/* ================================================================
   QuesoQuest — stylesheet.

   Tokens live in :root. Burrow-dark surroundings, warm lit maze:
   the maze is the only bright thing on screen, so the eye always
   finds the rat first.
   Tile geometry is expressed as calc(var(--tile) * n), which makes
   a resize a single custom-property write rather than a relayout
   of every tile.
   ================================================================ */
:root{
  --burrow:#17110d;
  --burrow-2:#221a13;
  --burrow-3:#2e2318;
  --floor:#f6e8cb;
  --floor-alt:#efdfbc;
  --wall:#4b382a;
  --wall-lip:#61492f;
  --cheese:#f4b93a;
  --cheese-deep:#c98a1c;
  --terracotta:#d0693f;
  --teal:#3fa88f;
  --wrong:#cf5b4a;
  --cream:#f8efdf;
  --muted:#b9a184;
  --radius:14px;
  --tile:40px;
  --vh:100vh;
  --font:ui-rounded,"SF Pro Rounded",Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}

body{
  position:fixed;inset:0;
  background:var(--burrow);
  color:var(--cream);
  font-family:var(--font);
  font-size:16px;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}

button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--cheese);outline-offset:2px}

/* ---------- app shell ---------- */
#app{
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:var(--vh);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@media (orientation:landscape) and (min-width:700px){
  #app{grid-template-columns:1fr auto;grid-template-rows:auto 1fr}
  #hud{grid-column:1/-1}
  #stage{grid-column:1;grid-row:2}
  #controls{grid-column:2;grid-row:2;align-self:center;padding-right:18px}
}

/* ---------- hud ---------- */
#hud{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  min-height:52px;
}
.brand{font-weight:700;font-size:17px;letter-spacing:.2px;color:var(--cheese);margin-right:auto;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.brand span{color:var(--cream);font-weight:500}
.stat{
  display:flex;align-items:center;gap:6px;
  background:var(--burrow-2);
  border:1px solid #3a2c1f;
  border-radius:999px;
  padding:6px 12px;font-size:14px;font-weight:600;white-space:nowrap;
  flex:0 0 auto;
}
.stat small{font-weight:500;color:var(--muted);font-size:12px}
.stat.streak-hot{border-color:var(--cheese-deep);color:var(--cheese)}
/* Below this width the brand is the first thing to go: the player
   already knows what game they are in. Stats and pause never clip. */
@media (max-width:560px){
  #hud{gap:8px;padding:8px 10px;justify-content:space-between}
  .brand{display:none}
}
@media (max-width:400px){
  .stat{font-size:13px;padding:5px 9px;gap:4px}
  .stat small{font-size:12px}
}
#pauseBtn{
  width:44px;height:44px;border-radius:12px;background:var(--burrow-2);
  border:1px solid #3a2c1f;display:grid;place-items:center;flex:0 0 auto;
}
#pauseBtn:active{background:var(--burrow-3)}

/* ---------- board ---------- */
#stage{display:grid;place-items:center;overflow:hidden;padding:6px}
#board{
  position:relative;
  border-radius:var(--radius);
  background:var(--wall);
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  /* `manipulation` (inherited from body) still allows pan gestures,
     and when iOS Safari claims a pan it fires pointercancel and the
     drag dies mid-corridor. `none` hands every touch on the maze to
     our pointer handlers, unconditionally. */
  touch-action:none;
}
.tile{position:absolute;width:var(--tile);height:var(--tile)}
.t-floor{background:var(--floor)}
.t-floor.alt{background:var(--floor-alt)}
.t-wall{background:var(--wall);border-top:2px solid var(--wall-lip)}
.t-goal{background:var(--floor);display:grid;place-items:center}
.t-goal svg{width:78%;height:78%}

.cheese{display:grid;place-items:center;transition:transform .22s ease,opacity .22s ease}
.cheese svg{width:66%;height:66%}
.cheese.taken{transform:scale(1.7);opacity:0}

.door{display:grid;place-items:center;background:var(--floor)}
.door .slab{
  width:92%;height:92%;border-radius:6px;
  background:var(--terracotta);
  border:2px solid #a8502e;
  display:grid;place-items:center;
  transition:transform .3s ease,opacity .3s ease;
}
.door .slab svg{width:52%;height:52%}
.door.open .slab{transform:scale(.2) rotate(-25deg);opacity:0}
.door.bump .slab{animation:bump .22s ease}
@keyframes bump{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#rat{
  position:absolute;width:var(--tile);height:var(--tile);
  z-index:5;pointer-events:none;
  transition:transform .13s ease-out;
  display:grid;place-items:center;
}
#rat svg{width:84%;height:84%}
#rat.face-left{transform-origin:center}
#rat .flip{transition:transform .1s}

/* ---------- touch controls ---------- */
#controls{padding:6px 14px 14px;display:grid;place-items:center}
#dpad{
  display:grid;
  grid-template-columns:repeat(3,72px);
  grid-template-rows:repeat(3,62px);
  gap:8px;
}
@media (max-width:420px){#dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,56px)}}
.dbtn{
  background:var(--burrow-2);
  border:1px solid #3d2e21;
  border-radius:16px;
  display:grid;place-items:center;
  color:var(--cheese);
  transition:background .08s,transform .08s;
}
.dbtn:active{background:var(--cheese);color:var(--burrow);transform:scale(.94)}
.dbtn svg{width:26px;height:26px}
.dpad-hint{grid-area:2/2;display:grid;place-items:center;color:#5a4632;font-size:12px;font-weight:600;text-align:center;line-height:1.25}

/* ---------- overlays ---------- */
/* Height comes from --vh, not `inset:0`: --vh tracks the *visual*
   viewport, so when the iPad's on-screen keyboard opens for a typed
   answer the overlay shrinks with it and the card re-centres in the
   space that is actually visible, instead of sitting half behind
   the keyboard. */
.screen{
  position:absolute;left:0;top:0;right:0;height:var(--vh);z-index:20;
  background:rgba(12,9,6,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.screen[hidden]{display:none}
.card{
  width:min(560px,100%);
  max-height:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--burrow-2);
  border:1px solid #3d2e21;
  border-radius:22px;
  padding:22px;
}
.card h1{font-size:30px;margin:0 0 6px;letter-spacing:-.4px}
.card h1 em{font-style:normal;color:var(--cheese)}
.card h2{font-size:21px;margin:0 0 10px}
.card p{margin:0 0 12px;line-height:1.55;color:#e2d3ba}
.card p.lede{color:var(--muted);font-size:14px}
.rules{list-style:none;padding:0;margin:0 0 18px}
.rules li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;line-height:1.45;font-size:15px;color:#e2d3ba}
.rules b{color:var(--cheese);font-weight:700;flex:0 0 auto}

.btn{
  display:block;width:100%;
  padding:16px;border-radius:16px;
  font-size:17px;font-weight:700;
  background:var(--cheese);color:#3a2a06;
  margin-top:10px;
  transition:transform .08s,filter .08s;
}
.btn:active{transform:scale(.98);filter:brightness(.94)}
.btn.ghost{background:transparent;border:1px solid #4a382a;color:var(--cream);font-weight:600}
.btn.ghost:active{background:var(--burrow-3)}

.titleArt{display:grid;place-items:center;margin:4px 0 14px}
.titleArt svg{width:120px;height:120px}

.card p.meta{
  font-size:13px;color:var(--cheese);font-weight:600;
  letter-spacing:.2px;margin:-4px 0 14px;
}

/* ---------- level map ---------- */
.band{margin:0 0 18px}
.bandHead h3{
  font-size:16px;margin:0 0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.bandHead h3 em{font-style:normal;font-size:13px;font-weight:600;color:var(--cheese)}
.bandHead p{font-size:13px;color:var(--muted);margin:0 0 10px;line-height:1.45}
.lvGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:430px){.lvGrid{grid-template-columns:1fr}}
.lv{
  display:flex;align-items:center;gap:10px;text-align:left;
  min-height:56px;padding:10px 12px;border-radius:14px;
  background:var(--burrow-3);border:1px solid #453422;
  transition:transform .08s,border-color .12s;
}
.lv:active{transform:scale(.98)}
.lv .num{
  flex:0 0 auto;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:#3a2c1f;color:var(--muted);font-size:13px;font-weight:700;
}
.lv .nm{font-size:15px;font-weight:600;line-height:1.25}
.lv.cleared{border-color:rgba(63,168,143,.5)}
.lv.cleared .num{background:rgba(63,168,143,.22);color:#7fd8c2}
.lv.locked{opacity:.4}
.lv[disabled]{cursor:default}
#bandList{margin:4px 0 6px}

.settings{margin:6px 0 4px}
.setRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid #33261b;
}
.setRow:first-child{border-top:0}
.setRow .lbl{font-size:15px;font-weight:600}
.setRow .lbl small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.seg{display:flex;background:var(--burrow-3);border-radius:12px;padding:3px;flex:0 0 auto}
.seg button{
  padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);min-height:44px;
}
.seg button[aria-pressed="true"]{background:var(--cheese);color:#3a2a06}

/* ---------- challenge ---------- */
#challengeScreen .card{padding:20px}
.chip{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--cheese);background:rgba(244,185,58,.12);
  border-radius:999px;padding:5px 11px;margin-bottom:14px;
}
.chip.again{color:var(--terracotta);background:rgba(208,105,63,.14)}
.chip.band{margin-bottom:10px}
.chip.band:empty{display:none}
.prompt{
  text-align:center;padding:14px 8px 16px;
  border-radius:16px;background:var(--burrow-3);margin-bottom:16px;
}
.prompt .person{font-size:15px;color:var(--muted);font-weight:600}
.prompt .verb{font-size:34px;font-weight:700;letter-spacing:-.5px;margin:2px 0 4px;line-height:1.1}
.prompt .verb b{color:var(--cheese);font-weight:700}
.prompt .meaning{font-size:14px;color:var(--muted)}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:400px){.answers{grid-template-columns:1fr}}
.ans{
  min-height:60px;padding:14px 12px;border-radius:14px;
  background:var(--burrow-3);border:1px solid #453422;
  font-size:19px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s,background .12s,border-color .12s;
}
.ans:active{transform:scale(.98)}
.ans .key{font-size:12px;color:var(--muted);font-weight:700;border:1px solid #4a3826;border-radius:6px;padding:1px 5px}
.ans.correct{background:rgba(63,168,143,.18);border-color:var(--teal);color:#a7e7d6}
.ans.wrong{background:rgba(207,91,74,.16);border-color:var(--wrong);color:#f0b3a9}
.ans.dim{opacity:.4}
.ans[disabled]{cursor:default}

/* ---------- sentence cloze ---------- */
/* The sentence is read, not scanned, so it sits left-aligned with
   ordinary line spacing rather than centred like a flashcard. */
.prompt.cloze{text-align:left;padding:16px 15px}
.prompt.cloze[hidden]{display:none}
#chPrompt[hidden]{display:none}
.sentence{font-size:21px;line-height:1.6;font-weight:600;letter-spacing:-.1px}
.gap{
  display:inline-block;min-width:70px;text-align:center;
  padding:0 8px;margin:0 3px;
  border-bottom:2px dashed var(--cheese);color:var(--cheese);
}
.gap.filled{border-bottom-style:solid;border-bottom-color:var(--teal);color:#a7e7d6}
.cue{font-size:13.5px;color:var(--cheese);font-weight:600;margin-top:10px}
.gloss{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.cue[hidden],.gloss[hidden]{display:none}
.chip.cloze{color:#7fd8c2;background:rgba(63,168,143,.14)}
/* Mood challenges and the read-it-back challenge get their own
   colours so the kind of thinking being asked for is legible before
   the question is read. */
.chip.mood{color:#c9a6e8;background:rgba(160,120,210,.16)}
.chip.readit{color:#8fbce6;background:rgba(96,150,210,.16)}
/* Near-native: both options are real Spanish. Warmer than the
   others on purpose — these doors are an invitation, not a trap. */
.chip.native{color:#e6b478;background:rgba(208,140,63,.16)}

/* ---------- typed answers ---------- */
.answers[hidden]{display:none}
.typeRow[hidden]{display:none}
.typeIn{display:flex;gap:8px;align-items:stretch}
#chType{
  flex:1;min-width:0;min-height:60px;
  padding:14px;border-radius:14px;
  background:var(--burrow-3);border:1px solid #453422;
  color:var(--cream);font-family:inherit;font-size:19px;font-weight:600;
  -webkit-user-select:text;user-select:text;
  /* 16px or more, or iOS Safari zooms the page on focus. */
}
#chType::placeholder{color:#7a6449;font-weight:500}
#chType:focus{outline:none;border-color:var(--cheese)}
#chTypeGo{width:auto;flex:0 0 auto;margin-top:0;padding:16px 20px}
.accents{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.accents button{
  min-width:46px;min-height:46px;border-radius:12px;
  background:var(--burrow-3);border:1px solid #453422;
  color:var(--cream);font-size:18px;font-weight:600;
}
.accents button:active{background:var(--cheese);color:#3a2a06}

.hintRow{margin-top:14px;text-align:center;min-height:22px}
.hintBtn{font-size:14px;font-weight:600;color:var(--muted);text-decoration:underline;padding:8px;min-height:44px}
.hintText{font-size:14.5px;color:#e6d6ba;line-height:1.5;padding:0 4px}

.verdict{margin-top:14px;border-radius:14px;padding:14px;display:none}
.verdict.show{display:block}
.verdict .head{font-size:18px;font-weight:700;margin-bottom:4px}
.verdict .body{font-size:15px;line-height:1.5;color:#e6d6ba}
.verdict .body b{color:var(--cream)}
.verdict.good{background:rgba(63,168,143,.14);border:1px solid rgba(63,168,143,.4)}
.verdict.good .head{color:#7fd8c2}
.verdict.bad{background:rgba(208,105,63,.13);border:1px solid rgba(208,105,63,.42)}
.verdict.bad .head{color:#e79878}
.verdict .pat{display:block;margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.45}
/* The teaching block. Each line answers a different question:
   why this one is right, what the other one would have meant,
   and where the standard and ordinary speech part company. */
.verdict .pat.why{color:#c8bfb4}
.verdict .pat.contrast{padding-left:9px;border-left:2px solid rgba(208,140,63,.5)}
.verdict .pat.reg{font-style:italic;opacity:.85}

.tally{display:flex;gap:10px;margin:14px 0 4px}
.tally div{flex:1;background:var(--burrow-3);border-radius:14px;padding:14px 10px;text-align:center}
.tally .n{font-size:26px;font-weight:700;color:var(--cheese);line-height:1.1}
.tally .k{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px}

.toast{
  position:absolute;left:50%;top:14px;transform:translate(-50%,-20px);
  background:var(--teal);color:#06231c;font-weight:700;font-size:15px;
  padding:10px 18px;border-radius:999px;z-index:30;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}