/* ============================================================
   KANJI RUSH · estética washi / sumi-e / hanko
   ============================================================ */

:root {
  --washi:      #f3ecdd;   /* papel */
  --washi-hi:   #faf5e9;   /* papel claro (tarjetas) */
  --washi-dim:  #e7ddc8;   /* papel sombreado */
  --ink:        #211d18;   /* tinta sumi */
  --ink-soft:   #5a5248;   /* tinta diluida */
  --vermilion:  #cf3b2b;   /* rojo hanko: sellos y superficies */
  --vermilion-deep: #a32619;   /* sombras duras del acento */
  --vermilion-text: #a32619;   /* bermellón como texto pequeño (6.3:1 sobre washi) */
  --gold:       #b08d3e;   /* oro premium: superficies, sellos y bordes */
  --gold-deep:  #8a6c2a;   /* sombra dura bajo botones dorados */
  --gold-text:  #7d6228;   /* oro como texto pequeño sobre papel */
  --gold-wash:  #f3e6c3;   /* fondo dorado suave (chips, badge premium) */
  --indigo:     #3b4a66;

  /* niveles JLPT */
  --lv-n5: #708a4f;
  --lv-n4: var(--indigo);
  --lv-n3: var(--gold);
  --lv-n2: #c05a28;
  --lv-n1: var(--ink);

  /* medallas del ranking */
  --silver: #76766f;
  --bronze: #8f5a31;

  --font-display: "Shippori Mincho B1", serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;

  --shadow-card: 0 2px 0 rgba(33,29,24,.06), 0 12px 32px -12px rgba(33,29,24,.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--washi);
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* Grano de papel sobre todo */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.42 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- pantallas ---------- */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  height: 100dvh;
}
.screen.is-active { display: flex; animation: screen-in .35s cubic-bezier(.2,.9,.3,1); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.screen-dark {
  background: var(--ink);
  color: var(--washi);
  max-width: none;
  justify-content: center;
  gap: 24px;
}

/* ============================================================
   INICIO
   ============================================================ */
#screen-home { justify-content: space-between; }

/* kanji gigante de fondo, tinta diluida */
.home-deco {
  position: absolute; inset: 0; z-index: -1;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: min(120vw, 560px);
  color: rgba(33,29,24,.045);
  transform: rotate(-6deg) translateY(4%);
  pointer-events: none;
}

.home-top {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
}

.streak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--washi-hi);
}
.streak-flame { color: var(--vermilion); font-family: var(--font-display); }

.icon-btn {
  font-family: var(--font-display);
  font-size: 16px;
  width: 44px; height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--washi-hi);
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:active { transform: scale(.9); }
.icon-btn.is-muted { background: var(--washi-dim); color: var(--ink-soft); text-decoration: line-through; }

.home-brand { text-align: center; margin-top: -16px; }

.hanko {
  display: inline-grid; place-items: center;
  width: 84px; height: 84px;
  margin-bottom: 18px;
  background: var(--vermilion);
  color: var(--washi-hi);
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; line-height: 1.05;
  border-radius: 14px;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 3px var(--washi-hi), inset 0 0 0 5px var(--vermilion), 0 10px 24px -10px rgba(163,38,25,.55);
  text-align: center;
}

#screen-home h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 16vw, 72px);
  line-height: .96;
  letter-spacing: .015em;
}

.tagline {
  margin-top: 16px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-soft);
}
.tagline em {
  font-style: normal; font-weight: 700;
  color: var(--vermilion-text);
  border-bottom: 2px solid var(--vermilion);
}

.home-stats {
  display: flex; align-items: center; gap: 28px;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.stat-divider { width: 1.5px; height: 40px; background: var(--ink); opacity: .25; transform: rotate(12deg); }

/* botón principal estilo sello */
.btn-play {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: min(100%, 320px);
  padding: 18px 28px;
  background: var(--ink);
  color: var(--washi-hi);
  border: none; border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--vermilion-deep), 0 18px 30px -12px rgba(33,29,24,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-play:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--vermilion-deep), 0 6px 14px -8px rgba(33,29,24,.5);
}
.btn-play-jp {
  font-family: var(--font-display);
  font-size: 22px; color: var(--vermilion);
  background: var(--washi-hi);
  border-radius: 8px;
  padding: 3px 8px;
  transform: rotate(-3deg);
}
.btn-play-es {
  font-size: 22px; font-weight: 700; letter-spacing: .22em;
}
.btn-play-sm { padding: 14px 24px; }
.btn-play-sm .btn-play-es { font-size: 17px; }
.btn-play-sm .btn-play-jp { font-size: 17px; }

.home-foot {
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; gap: 10px; align-items: center;
}
.home-foot a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid currentColor; }
.home-foot a:hover { color: var(--vermilion-text); }

/* entrada escalonada */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal .7s cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: calc(var(--d) * 90ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============================================================
   JUEGO
   ============================================================ */
#screen-game { gap: 14px; }

.game-top {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* vidas = gotas de tinta */
.lives { display: flex; gap: 7px; }
.drop {
  width: 16px; height: 16px;
  background: var(--ink);
  border-radius: 60% 40% 55% 45% / 30% 30% 70% 70%;
  transform: rotate(-8deg);
  transition: opacity .3s, transform .3s;
}
.drop.is-empty { opacity: .18; transform: rotate(-8deg) scale(.8); }
.drop.is-lost { animation: drop-lost .45s ease forwards; }
@keyframes drop-lost {
  40% { transform: rotate(-8deg) scale(1.5); background: var(--vermilion); opacity: 1; }
  100% { transform: rotate(-8deg) scale(.8); opacity: .18; }
}

.score-box { text-align: center; }
.score-label {
  display: block; font-size: 9px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}
.score {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score.bump { animation: bump .3s ease; }
@keyframes bump { 40% { transform: scale(1.18); color: var(--vermilion); } }

.combo {
  justify-self: end;
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transition: opacity .25s;
}
.combo.is-on { opacity: 1; }
.combo-jp {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 11px; color: var(--vermilion-text); font-weight: 800;
}
.combo-x {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; color: var(--vermilion);
}
.combo.pop .combo-x { animation: bump .3s ease; }

/* temporizador = brochazo de tinta que se agota */
.timer-track {
  width: 100%; height: 10px;
  border-radius: 999px;
  background: var(--washi-dim);
  overflow: hidden;
}
.timer-ink {
  height: 100%; width: 100%;
  background: var(--ink);
  border-radius: 999px;
  transform-origin: left;
}
.timer-ink.is-low { background: var(--vermilion); }

/* tarjeta del kanji */
.kanji-stage {
  flex: 1; width: 100%;
  display: grid; place-items: center;
  min-height: 0;
}
.kanji-card {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 1;
  background: var(--washi-hi);
  border-radius: 20px;
  border: 1.5px solid rgba(33,29,24,.14);
  box-shadow: var(--shadow-card);
  transform: rotate(-.6deg);
  display: grid; place-items: center;
  padding: 18px;
}
.kanji-card.shake { animation: shake .4s ease; }
@keyframes shake {
  20% { transform: rotate(-.6deg) translateX(-9px); }
  45% { transform: rotate(-.6deg) translateX(7px); }
  70% { transform: rotate(-.6deg) translateX(-4px); }
}

.kanji-corner {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--font-display);
  font-size: 12px; color: var(--ink-soft);
  writing-mode: vertical-rl;
  letter-spacing: .1em;
}

.kanji-svg { width: 82%; height: 82%; }
.kanji-svg svg { width: 100%; height: 100%; overflow: visible; }
.kanji-svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* fallback si no hay red: el glifo aparece como tinta que se asienta */
.kanji-glyph {
  font-family: var(--font-display);
  font-size: min(46vw, 180px);
  line-height: 1;
  animation: ink-settle .8s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ink-settle {
  from { opacity: 0; filter: blur(10px); transform: scale(1.25); }
  to   { opacity: 1; filter: blur(0);  transform: scale(1); }
}

.kanji-reading {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: 14px; font-weight: 700;
  color: var(--ink-soft);
  opacity: 0; transition: opacity .25s;
}
.kanji-reading.is-on { opacity: 1; }
.kanji-reading b { color: var(--vermilion-text); }

/* sello de acierto/fallo */
.stamp {
  position: absolute; inset: 0; margin: auto;
  width: 110px; height: 110px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 64px; font-weight: 800;
  color: var(--vermilion);
  border: 5px solid var(--vermilion);
  border-radius: 18px;
  background: rgba(250,245,233,.6);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
}
.stamp.stamp-in {
  animation: stamp-in .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
.stamp.stamp-bad { color: var(--indigo); border-color: var(--indigo); }
@keyframes stamp-in {
  0%   { opacity: 0; transform: rotate(14deg) scale(2.2); }
  55%  { opacity: 1; transform: rotate(-7deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* opciones de respuesta */
.options {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 4px;
}
.opt {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  background: var(--washi-hi);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 16px 10px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(33,29,24,.85);
  transition: transform .1s ease, box-shadow .1s ease, background .15s, color .15s, opacity .2s;
}
.opt:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(33,29,24,.85); }
.opt.is-correct {
  background: var(--vermilion); border-color: var(--vermilion-deep);
  color: var(--washi-hi);
  box-shadow: 0 3px 0 var(--vermilion-deep);
}
.opt.is-wrong {
  background: var(--washi-dim); color: var(--ink-soft);
  text-decoration: line-through;
}
.opt.is-dim { opacity: .35; }
.opt:disabled { cursor: default; }

/* ============================================================
   INTERSTITIAL
   ============================================================ */
.ad-kicker {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: .35em;
  color: rgba(243,236,221,.55);
  text-transform: uppercase;
}
.ad-slot {
  display: grid; place-items: center; gap: 4px;
  border: 1.5px dashed rgba(243,236,221,.35);
  border-radius: 12px;
  color: rgba(243,236,221,.5);
}
.ad-slot-box { width: 300px; height: 250px; }
.ad-slot-tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
}
.ad-slot-size { font-family: var(--font-display); font-size: 22px; }

.btn-secondary {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: var(--washi); background: transparent;
  border: 1.5px solid rgba(243,236,221,.5);
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  transition: opacity .2s, background .2s;
}
.btn-secondary:disabled { opacity: .4; cursor: default; }
.btn-secondary:not(:disabled):hover { background: rgba(243,236,221,.12); }

/* ============================================================
   FIN DE PARTIDA
   ============================================================ */
#screen-over {
  justify-content: center; gap: 14px; text-align: center;
  overflow-y: auto; /* móviles de pantalla baja */
}

.over-stamp {
  width: 92px; height: 92px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 52px; font-weight: 800;
  color: var(--vermilion);
  border: 5px solid var(--vermilion);
  border-radius: 16px;
  animation: stamp-in .55s cubic-bezier(.2,1.4,.4,1) both;
}
.over-kicker {
  font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.over-score-num {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.over-score-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}
.over-best { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--vermilion-text); min-height: 1.2em; }

.over-row {
  display: flex; gap: 22px; justify-content: center;
  font-size: 13px; color: var(--ink-soft); font-weight: 400;
}
.over-row b { color: var(--ink); font-family: var(--font-display); font-size: 16px; }

/* repaso de fallos */
.over-review {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 340px;
}
.review-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--washi-hi);
  border: 1.5px solid rgba(33,29,24,.2);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.review-chip .rk {
  font-family: var(--font-display);
  font-size: 19px; color: var(--ink);
}

.btn-revive {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  border: none; border-radius: 14px;
  padding: 13px 22px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--gold-deep);
  transition: transform .12s, box-shadow .12s;
}
.btn-revive:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.btn-revive small { font-weight: 400; }
.btn-revive-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: rgba(250,245,233,.35);
  border-radius: 50%;
  font-size: 11px;
}
.btn-revive.is-hidden { display: none; }

.btn-ghost {
  background: none; border: none;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 12px 8px;
}

.ad-slot-banner {
  width: min(100%, 320px); height: 50px;
  border-color: rgba(33,29,24,.3);
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============================================================
   PANTALLAS BAJAS (landscape móvil)
   ============================================================ */
@media (max-height: 600px) {
  #screen-home { overflow-y: auto; }
  #screen-game { gap: 8px; }
  .kanji-card { width: min(45dvh, 300px); }
  .options { gap: 8px; }
  .opt { padding: 10px; font-size: 14px; }
  .score { font-size: 24px; }
  .timer-track { height: 8px; }
}