/* ==========================================================================
   WORD THIEF — Art-Deco Heist Noir
   A CAPS-aligned English game for Grade 1–12.
   All art is SVG/CSS, all audio is synthesised. No external assets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Core palette — midnight mansion */
  --ink-900: #05080f;
  --ink-800: #0a1020;
  --ink-700: #101a33;
  --ink-600: #16243f;
  --ink-500: #1e3053;
  --ink-400: #2b4167;

  /* Brass & gold — the thief's world */
  --brass-100: #fff3cf;
  --brass-200: #ffe19a;
  --brass-300: #e8c470;
  --brass-400: #d3a141;
  --brass-500: #a97c21;
  --brass-600: #7a5312;

  /* Signal colours */
  --jade:   #3ad29f;
  --jade-d: #1d8f68;
  --ruby:   #ff3b5c;
  --ruby-d: #b01a34;
  --amber:  #ffb347;
  --ice:    #59d8f2;
  --violet: #9b7bff;

  --paper:   #f4ecd8;
  --paper-d: #d9cdb0;

  --text:      #eaf0ff;
  --text-soft: #a9b8d6;
  --text-dim:  #6d7fa3;

  /* Type */
  --font-display: "Bodoni MT", "Didot", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --font-read: var(--font-ui);

  /* Geometry */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 30px;

  --gut: clamp(16px, 3.2vw, 40px);

  /* Elevation */
  --sh-1: 0 2px 6px rgba(0,0,0,.45);
  --sh-2: 0 8px 26px rgba(0,0,0,.55);
  --sh-3: 0 22px 60px rgba(0,0,0,.65);
  --glow-brass: 0 0 0 1px rgba(232,196,112,.34), 0 0 28px rgba(211,161,65,.28);

  /* Motion */
  --ease-out: cubic-bezier(.22,.68,.35,1);
  --ease-in-out: cubic-bezier(.65,.02,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 130ms;
  --t-med: 260ms;
  --t-slow: 520ms;
}

/* High-contrast mode toggled in Settings */
html[data-contrast="high"] {
  --text: #ffffff;
  --text-soft: #d9e4ff;
  --text-dim: #a9b8d6;
  --ink-800: #000308;
  --ink-700: #060d1c;
  --brass-300: #ffdf95;
}

/* Dyslexia-friendly reading mode toggled in Settings */
html[data-readable="on"] {
  --font-read: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  --font-ui: "Trebuchet MS", Verdana, system-ui, sans-serif;
}
html[data-readable="on"] .q-card__prompt,
html[data-readable="on"] .opt__text,
html[data-readable="on"] .passage {
  letter-spacing: .035em;
  word-spacing: .16em;
  line-height: 1.85;
}

/* Larger text mode */
html[data-textsize="large"] { font-size: 19px; }
html[data-textsize="xlarge"] { font-size: 22px; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The browser's own [hidden] rule is only `display: none`, so any class
   below that sets display (.modal is a grid, .hud is a flex row) would beat
   it and paint an element that is supposed to be hidden. Settle it here. */
[hidden] { display: none !important; }

html { font-size: 16px; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(232,196,112,.22);
  touch-action: manipulation;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .012em;
  margin: 0 0 .4em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

button, input, select { font: inherit; color: inherit; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-160%);
  background: var(--brass-300); color: var(--ink-900);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--brass-200);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brass-400); color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3. Backdrop — the night, the rain, the mansion skyline
   -------------------------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.backdrop__sky {
  position: absolute; inset: 0;
  background:
    /* Moonlit haze sitting on the horizon. Without this the manor
       silhouette is the same black as the sky and simply disappears. */
    radial-gradient(90% 46% at 50% 96%, rgba(86,116,190,.55) 0%, rgba(52,74,132,.26) 45%, transparent 72%),
    radial-gradient(120% 80% at 50% -20%, #1b2c57 0%, #0d1630 42%, #05080f 100%);
}

.backdrop__moon {
  position: absolute;
  top: 6vh; right: 12vw;
  width: clamp(70px, 9vw, 140px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf0, #e6ebcd 62%, #aeb894);
  box-shadow:
    0 0 60px 18px rgba(232,238,200,.16),
    0 0 180px 60px rgba(190,205,255,.09);
}

.backdrop__skyline {
  position: absolute; inset: auto 0 0 0; height: 46vh;
  opacity: .96;
  filter: drop-shadow(0 0 26px rgba(120,160,255,.18));
}
.backdrop__skyline svg { width: 100%; height: 100%; display: block; }

/* Rain is drawn on a canvas by js/weather.js — layered, varied and lit by
   lightning. This element is only the surface it paints on. */
.backdrop__rain {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Wet ground: a soft sheen along the bottom that the splashes land on. */
.backdrop__wet {
  position: absolute; inset: auto 0 0 0; height: 22vh;
  background:
    linear-gradient(180deg, transparent, rgba(120,160,230,.07) 55%, rgba(150,185,255,.12)),
    radial-gradient(70% 100% at 50% 100%, rgba(255,207,122,.07), transparent 70%);
  mix-blend-mode: screen;
}

.backdrop__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(105% 85% at 50% 42%, transparent 38%, rgba(0,0,0,.72) 100%);
}

.backdrop__grain {
  position: absolute; inset: 0;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0,0); }
}

.fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Stage & screens
   -------------------------------------------------------------------------- */
.stage {
  position: relative; z-index: 1;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gut)
           calc(env(safe-area-inset-bottom) + 28px);
  display: flex; flex-direction: column;
}

/* Note on entrance animations throughout this file: anything that carries
   real content animates WITHOUT a fill mode, and its `to` keyframe matches
   the element's resting style. If an animation never runs — an old engine,
   a frozen compositor, an odd accessibility setting — the element simply
   sits there fully visible instead of being stranded at `opacity: 0`. */
.screen {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1180px; margin-inline: auto;
  animation: screenIn var(--t-slow) var(--ease-out);
}
@keyframes screenIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

.screen--center { justify-content: center; align-items: center; text-align: center; }

.screen__head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.6vw, 28px);
}
.screen__head h2 { margin: 0; font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
.screen__head .spacer { flex: 1 1 auto; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass-400);
}

.lede { color: var(--text-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   5. Deco frame — the recurring art-deco panel
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  background:
    linear-gradient(155deg, rgba(30,48,83,.92), rgba(10,16,32,.96));
  border: 1px solid rgba(232,196,112,.26);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,240,200,.1);
  padding: clamp(18px, 3vw, 34px);
}
.panel::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(232,196,112,.14);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
}
.panel--tight { padding: clamp(14px, 2vw, 20px); }

/* Deco corner fans */
.panel__corner {
  position: absolute; width: 26px; height: 26px;
  border-color: var(--brass-400); border-style: solid; border-width: 0;
  pointer-events: none; opacity: .75;
}
.panel__corner--tl { top: 12px; left: 12px;  border-top-width: 2px; border-left-width: 2px;  border-top-left-radius: 8px; }
.panel__corner--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 8px; }
.panel__corner--bl { bottom: 12px; left: 12px;  border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 8px; }
.panel__corner--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 8px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(180deg, var(--brass-200), var(--brass-400) 52%, var(--brass-500));
  --btn-fg: #2a1c05;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  min-height: 46px;
  border: 1px solid rgba(255,240,200,.4);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800; font-size: .96rem;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              filter var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.6); }
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.95); }
.btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; filter: grayscale(.5); }

.btn--lg { padding: 17px 42px; font-size: 1.1rem; min-height: 58px; }
.btn--sm { padding: 8px 16px; font-size: .82rem; min-height: 36px; }

.btn--ghost {
  --btn-bg: rgba(20,32,58,.72);
  --btn-fg: var(--brass-200);
  border-color: rgba(232,196,112,.4);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { --btn-bg: rgba(32,50,86,.9); }

.btn--danger { --btn-bg: linear-gradient(180deg,#ff6b83,#d32546); --btn-fg: #fff; }
.btn--jade   { --btn-bg: linear-gradient(180deg,#63e8bd,#189a70); --btn-fg: #04261b; }

.btn__key {
  font: 700 .7rem/1 var(--font-mono);
  padding: 3px 6px; border-radius: 4px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(0,0,0,.2);
}

/* --------------------------------------------------------------------------
   7. Title screen
   -------------------------------------------------------------------------- */
.title { text-align: center; padding-block: clamp(6px, 2vh, 22px); }

.title__mark {
  width: min(290px, 52vw); margin-inline: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.6));
}

.title__logo {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 9.4vw, 5.4rem);
  line-height: .86;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: linear-gradient(178deg, #fff6da 4%, #e8c470 32%, #9d7220 62%, #ffeec2 78%, #8a6014 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.42)) drop-shadow(0 18px 34px rgba(211,161,65,.28));
}
.title__logo span { display: block; }
.title__logo .l2 { font-style: italic; }

.title__rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 10px auto 8px; max-width: 460px;
  color: var(--brass-400);
}
.title .lede { margin: 0 auto; max-width: 56ch; font-size: .92rem; }
.title__rule::before, .title__rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-500), transparent);
}
.title__tag {
  font-size: .78rem; font-weight: 800;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--brass-300);
}

.title__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }

.title .thief { width: min(150px, 34vw); height: auto; display: block; margin: 4px auto -4px; }

/* Lit windows in the skyline flicker now and then */
.winlit { animation: winflick 9s ease-in-out infinite; }
@keyframes winflick {
  0%, 88%, 100% { opacity: .85; }
  91% { opacity: .3; }
  94% { opacity: .9; }
}

/* --------------------------------------------------------------------------
   7b. Thief cards
   Collectible-feeling cards: deco frame, foil sweep, restrained tilt.
   -------------------------------------------------------------------------- */
.deck {
  display: grid; gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  perspective: 1200px;
}

.tcard {
  --tiltX: 0deg; --tiltY: 0deg;
  --edge: #d3a141;
  --ink: #0a1020;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 15px 14px;
  min-height: 400px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid var(--edge);
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255,220,150,.16), transparent 58%),
    linear-gradient(168deg, #1a2a4a 0%, #0c1428 52%, #070c18 100%);
  box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255,240,200,.1);
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transform-style: preserve-3d;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 160ms linear;
}
.tcard:hover { box-shadow: var(--sh-3), 0 0 0 1px var(--edge), 0 0 34px rgba(211,161,65,.3); }

/* Deco inner rule */
.tcard::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(232,196,112,.24);
  border-radius: 11px; pointer-events: none;
}
/* Corner fans */
.tcard::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(135deg, var(--edge) 0 11px, transparent 11px) top left / 22px 22px no-repeat,
    linear-gradient(225deg, var(--edge) 0 11px, transparent 11px) top right / 22px 22px no-repeat,
    linear-gradient(45deg,  var(--edge) 0 11px, transparent 11px) bottom left / 22px 22px no-repeat,
    linear-gradient(315deg, var(--edge) 0 11px, transparent 11px) bottom right / 22px 22px no-repeat;
  opacity: .5; border-radius: 11px;
}

/* Foil sweep */
.tcard__foil {
  position: absolute; inset: -40% -120%;
  background: linear-gradient(104deg,
    transparent 38%, rgba(255,245,215,.13) 47%, rgba(255,255,255,.26) 50%,
    rgba(255,245,215,.13) 53%, transparent 62%);
  transform: translateX(-42%);
  transition: transform 720ms var(--ease-out);
  pointer-events: none;
}
.tcard:hover .tcard__foil, .tcard.is-chosen .tcard__foil { transform: translateX(42%); }

.tcard__rarity {
  align-self: flex-start;
  font-size: .58rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--edge); color: var(--edge);
  background: rgba(0,0,0,.32);
}

.tcard__art {
  position: relative;
  height: 150px; display: grid; place-items: center;
  margin: 2px 0 4px;
}
.tcard__art::before {
  content: ""; position: absolute; inset: auto 12% 6px 12%; height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
}
.tcard__art svg { height: 148px; width: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)); }

.tcard__name {
  font-family: var(--font-display); font-size: 1.24rem; line-height: 1.1;
  color: var(--brass-100);
}
.tcard__tag { font-size: .74rem; color: var(--text-soft); font-style: italic; line-height: 1.35; }
.tcard__rule { height: 1px; background: linear-gradient(90deg, transparent, var(--edge), transparent); margin: 6px 0 2px; opacity: .6; }

.tcard__ability { display: block; font-size: .76rem; color: var(--text-soft); line-height: 1.45; }
.tcard__ability b { display: block; color: var(--brass-200); font-size: .82rem; margin-bottom: 2px; letter-spacing: .02em; }

.tcard__foot { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 10px; }
.tcard__assistwrap { display: flex; flex-direction: column; gap: 4px; }
.tcard__assistlbl { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; }
.tcard__assist { display: flex; gap: 4px; }
.tcard__assist i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); }
.tcard__assist i.on { background: linear-gradient(90deg, var(--brass-400), var(--brass-200)); }

.tcard__state {
  margin-left: auto;
  font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--jade); color: var(--jade);
}
.tcard__state.is-locked { border-color: var(--text-dim); color: var(--text-dim); }

.tcard__req { display: block; margin-top: 8px; font-size: .66rem; color: var(--text-dim); }
.tcard__bar { display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,.12); margin: 5px 0 3px; overflow: hidden; }
.tcard__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-500), var(--brass-200)); }
.tcard__reqnum { font-variant-numeric: tabular-nums; }
.tcard__reqnum.is-ready { color: var(--jade); font-weight: 800; }

/* Rarity tinting */
.tcard--common    { --edge: #8e9cb4; }
.tcard--uncommon  { --edge: #3ad29f; }
.tcard--rare      { --edge: #59d8f2; }
.tcard--legendary { --edge: #e8c470; }
.tcard--legendary { box-shadow: var(--sh-3), 0 0 30px rgba(232,196,112,.22); }

/* Locked */
.tcard.is-locked { filter: grayscale(.72) brightness(.72); }
.tcard.is-locked .tcard__art svg { opacity: .55; }
.tcard.is-locked:hover { filter: grayscale(.4) brightness(.85); }

/* Chosen: lifts and locks into place with a stamp */
/* The stamp sits over the artwork, clear of the name and ability text. */
.tcard__stamp {
  position: absolute; top: 30%; left: 50%;
  transform: translate(-50%, -50%) rotate(-13deg) scale(1.6);
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--jade);
  border: 3px solid var(--jade); border-radius: 8px; padding: 3px 12px;
  background: rgba(4,10,8,.5);
  opacity: 0; pointer-events: none;
}
.tcard.is-chosen {
  border-color: var(--jade);
  box-shadow: var(--sh-3), 0 0 0 2px var(--jade), 0 0 40px rgba(58,210,159,.34);
  transform: translateY(-8px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
}
.tcard.is-chosen .tcard__stamp { animation: stampIn 460ms var(--ease-back) forwards; }
@keyframes stampIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1.9); }
  60%  { opacity: .95; transform: translate(-50%, -50%) rotate(-14deg) scale(.94); }
  100% { opacity: .85; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}

/* Title-screen badge showing who you are */
.thiefbadge {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 18px auto 0; padding: 8px 16px 8px 8px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(232,196,112,.34);
  background: rgba(12,20,40,.8);
  color: var(--text);
  text-align: left;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) linear;
}
.thiefbadge:hover { transform: translateY(-2px); border-color: var(--brass-300); }
.thiefbadge__art { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; flex: none; }
.thiefbadge__art svg { width: 64px; height: auto; margin-top: 10px; }
.thiefbadge__txt { display: flex; flex-direction: column; line-height: 1.2; }
.thiefbadge__txt b { font-size: .86rem; color: var(--brass-200); }
.thiefbadge__txt span { font-size: .7rem; color: var(--text-dim); }
.thiefbadge__go {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(232,196,112,.4); color: var(--brass-300);
}
.thiefbadge.has-new .thiefbadge__go { border-color: var(--jade); color: var(--jade); animation: bump 1.8s ease-in-out infinite; }

@media (max-width: 520px) {
  .deck { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .tcard { min-height: 348px; padding: 13px 12px 12px; }
  .tcard__art { height: 116px; }
  .tcard__art svg { height: 114px; }
  .tcard__name { font-size: 1.04rem; }
}

/* --------------------------------------------------------------------------
   8. Grade select
   -------------------------------------------------------------------------- */
.phase { margin-bottom: clamp(22px, 3.4vw, 38px); }
.phase__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(232,196,112,.2);
  padding-bottom: 8px; margin-bottom: 16px;
}
.phase__head h3 { margin: 0; font-size: 1.28rem; color: var(--brass-200); }
.phase__head .phase__sub { font-size: .82rem; color: var(--text-dim); }

.grades { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

.gradecard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.24);
  background: linear-gradient(168deg, rgba(31,49,85,.9), rgba(9,15,30,.95));
  cursor: pointer; text-align: center;
  box-shadow: var(--sh-2);
  transition: transform var(--t-med) var(--ease-back),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.gradecard:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--brass-300); box-shadow: var(--sh-3), var(--glow-brass); }
.gradecard__num {
  font-family: var(--font-display);
  font-size: 2.5rem; line-height: 1;
  color: var(--brass-200);
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.gradecard__name { font-size: .82rem; color: var(--text-soft); font-weight: 600; }
.gradecard__bar { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px; }
.gradecard__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-400), var(--brass-200)); border-radius: 3px; transition: width var(--t-slow) var(--ease-out); }
.gradecard__pct { font-size: .68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. Mansion map
   -------------------------------------------------------------------------- */
.map { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.room {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 14px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.22);
  background: linear-gradient(162deg, rgba(28,45,78,.92), rgba(8,13,27,.96));
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: transform var(--t-med) var(--ease-back), box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.room::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 80% -10%, rgba(255,220,150,.16), transparent 65%);
  pointer-events: none;
}
.room:hover:not(.room--locked) { transform: translateY(-5px); border-color: var(--brass-300); box-shadow: var(--sh-3), var(--glow-brass); }
.room--locked { opacity: .5; cursor: not-allowed; filter: grayscale(.55); }
.room--done { border-color: rgba(58,210,159,.45); }

.room__top { display: flex; align-items: center; gap: 10px; }
.room__icon { width: 40px; height: 40px; flex: none; }
.room__no {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--brass-300);
  min-width: 1.4em; text-align: center;
}
.room__name { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.room__topic { font-size: .78rem; color: var(--text-soft); min-height: 2.2em; }
.room__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }

.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 16px; height: 16px; }
.stars .off { opacity: .22; }

.badge {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.badge--lock { color: var(--text-dim); }
.badge--open { color: var(--brass-300); }
.badge--done { color: var(--jade); }
.badge--vault { color: var(--ruby); }

.bestpct { margin-left: auto; font-size: .76rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   10. HUD
   -------------------------------------------------------------------------- */
.hud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px var(--gut);
  padding-top: calc(env(safe-area-inset-top) + 10px);
  background: linear-gradient(180deg, rgba(5,8,15,.94), rgba(5,8,15,.62) 70%, transparent);
  backdrop-filter: blur(10px);
}
.hud__left, .hud__right { display: flex; align-items: center; gap: 10px; }
.hud__center { flex: 1; display: flex; justify-content: center; }
.hud__room { font-size: .84rem; color: var(--text-soft); font-weight: 700; }

.heat { display: flex; align-items: center; gap: 9px; width: min(340px, 42vw); }
.heat__label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; }
.heat__track {
  flex: 1; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.heat__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--jade), var(--amber) 55%, var(--ruby));
  border-radius: 999px;
  transition: width var(--t-med) var(--ease-out);
}
.heat__pct { font-size: .72rem; color: var(--text-soft); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.hud--panic .heat__track { animation: panic 620ms ease-in-out infinite; }
@keyframes panic { 50% { box-shadow: 0 0 0 4px rgba(255,59,92,.28); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(232,196,112,.3);
  background: rgba(16,26,51,.8);
  color: var(--brass-200);
}
.chip--gem { color: var(--ice); border-color: rgba(89,216,242,.35); }
.chip svg { width: 14px; height: 14px; }
.chip.bump { animation: bump 420ms var(--ease-back); }
@keyframes bump { 40% { transform: scale(1.22); } }

/* --------------------------------------------------------------------------
   11. Heist layout
   -------------------------------------------------------------------------- */
.heist {
  display: grid; gap: clamp(16px, 2.6vw, 30px);
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: start;
  width: 100%; max-width: 1180px; margin-inline: auto;
}
@media (max-width: 900px) {
  .heist { grid-template-columns: 1fr; }
  .heist__device { order: -1; }
}

.heist__device { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.heist__device svg { width: 100%; height: auto; display: block; overflow: visible; }
.device-hint { font-size: .78rem; color: var(--text-dim); text-align: center; min-height: 1.4em; }

/* --- Lockpick ------------------------------------------------------------ */
/* The device host is full width, so the lock has to centre itself inside it
   or it sits in the left corner of a tablet. */
.lockwrap { width: min(100%, 420px); margin-inline: auto; }
.pin { transition: transform var(--t-med) var(--ease-back); }
.pin--set { transform: translateY(-26px); }
.pin--fail { animation: pinShake 360ms var(--ease-out); }
@keyframes pinShake {
  0%,100% { transform: translateY(0); }
  25% { transform: translate(-3px, 3px); }
  55% { transform: translate(3px, 2px); }
}
.pin__key { transition: fill var(--t-med) var(--ease-out); }

.cyl { transition: transform var(--t-slow) var(--ease-back); transform-box: fill-box; transform-origin: center; }

/* --- Dial (rebuilt: js/dial.js) ------------------------------------------ */
.dialv2 {
  position: relative;
  width: min(100%, 408px);
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}
.dialv2__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* The rotor must swallow touch gestures, or dragging it scrolls the page. */
.dialv2__rotor {
  transform-box: view-box;
  transform-origin: 210px 210px;
  cursor: grab;
  touch-action: none;
}
.dialv2.is-dragging .dialv2__rotor { cursor: grabbing; }

.dvPlate { cursor: pointer; }
.dvPlate text { pointer-events: none; }
.dvPlate__ring { transition: stroke var(--t-fast) linear, stroke-width var(--t-fast) linear; }
.dvPlate__hit  { transition: opacity var(--t-fast) linear, fill var(--t-fast) linear; }

@media (hover: hover) {
  .dvPlate:hover .dvPlate__ring { stroke: #7a5312; stroke-width: 4; }
}
.dvPlate.is-selected .dvPlate__ring { stroke: #ff3b5c; stroke-width: 5; }
.dvPlate.is-selected .dvPlate__hit  { opacity: .34; }
.dvPlate.is-right .dvPlate__ring { stroke: #1d8f68; stroke-width: 5; }
.dvPlate.is-right .dvPlate__hit  { fill: #3ad29f; opacity: .5; }
.dvPlate.is-wrong .dvPlate__ring { stroke: #b01a34; stroke-width: 5; }
.dvPlate.is-wrong .dvPlate__hit  { fill: #ff3b5c; opacity: .45; }

.dvTumb { transition: x 300ms var(--ease-back), fill 240ms linear; }
.dvBolt { transition: x 320ms var(--ease-back), fill 240ms linear; }

.dvHandle {
  cursor: pointer;
  transition: transform 200ms var(--ease-out);
  transform-box: view-box; transform-origin: 210px 455px;
}
.dvHandle.is-armed { animation: handlePulse 1.9s ease-in-out infinite; }
.dvHandle.is-pulling { transform: translateY(7px); }
@keyframes handlePulse {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 12px rgba(232,196,112,.75)); }
}

.dialv2.is-right { animation: dialSeat 420ms var(--ease-out); }
.dialv2.is-wrong { animation: dialShake 460ms var(--ease-out); }
@keyframes dialSeat { 40% { transform: translateY(3px) scale(1.012); } }
@keyframes dialShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-8px); }
  48% { transform: translateX(7px); }
  74% { transform: translateX(-3px); }
}

/* The accessible listbox sits invisibly over the dial so keyboard users get
   a real control with a real focus ring. */
.dialv2__a11y { position: absolute; inset: 0 0 18% 0; border-radius: 50%; }
.dialv2__a11y:focus-visible { outline: 3px solid var(--brass-200); outline-offset: 4px; }

/* --- Laser grid ---------------------------------------------------------- */
.laser { transition: opacity var(--t-med) var(--ease-out), stroke var(--t-fast) linear; }
.laser--off { opacity: .12; }
.laser--hit { animation: laserHit 420ms ease-out; }
@keyframes laserHit { 0%,100% { stroke: #ff3b5c; } 50% { stroke: #fff; } }

/* --------------------------------------------------------------------------
   12. Question card
   -------------------------------------------------------------------------- */
.q-card {
  position: relative;
  background:
    linear-gradient(168deg, rgba(244,236,216,.97), rgba(217,205,176,.95));
  color: #241a10;
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.8vw, 30px);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.7);
  border: 1px solid rgba(120,92,40,.4);
  animation: cardIn 420ms var(--ease-back);
}
@keyframes cardIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) rotate(.8deg) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.q-card::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px dashed rgba(120,92,40,.28);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}

.q-card__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #7a5c23; margin-bottom: 12px;
}
.q-card__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.q-card__prompt {
  font-family: var(--font-read);
  font-size: clamp(1.06rem, 2.3vw, 1.42rem);
  font-weight: 700; line-height: 1.45;
  margin: 0 0 6px;
  color: #1d1409;
}
.q-card__sub { font-size: .88rem; color: #5e4a22; margin: 0 0 14px; font-style: italic; }

.passage {
  font-family: var(--font-read);
  background: rgba(255,255,255,.55);
  border-left: 4px solid var(--brass-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 16px; margin: 0 0 16px;
  font-size: .96rem; line-height: 1.7; color: #33260f;
  max-height: 34vh; overflow-y: auto; overscroll-behavior: contain;
}

.opts { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 620px) { .opts--2col { grid-template-columns: 1fr 1fr; } }

.opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 2px solid rgba(120,92,40,.42);
  background: linear-gradient(180deg, #fffaf0, #ece0c4);
  color: #241a10;
  font-weight: 700; font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(120,92,40,.35);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.opt:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--brass-500); box-shadow: 0 5px 0 rgba(120,92,40,.4); }
.opt:active:not([disabled]) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(120,92,40,.4); }
.opt[disabled] { cursor: default; }

.opt__key {
  flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(120,92,40,.16);
  border: 1px solid rgba(120,92,40,.34);
  font: 800 .82rem/1 var(--font-mono);
  color: #5e4718;
}
.opt__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.opt--right {
  background: linear-gradient(180deg,#8ff0c9,#2fae80);
  border-color: #157d57; color: #06301f;
  animation: rightPop 480ms var(--ease-back);
}
@keyframes rightPop { 40% { transform: scale(1.035); } }
.opt--wrong {
  background: linear-gradient(180deg,#ff9aab,#e04663);
  border-color: #9d132f; color: #370310;
  animation: wrongShake 420ms var(--ease-out);
}
@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-7px); }
  46% { transform: translateX(6px); }
  72% { transform: translateX(-3px); }
}
.opt--faded { opacity: .34; }
.opt--eliminated { opacity: .2; text-decoration: line-through; }

.feedback {
  margin-top: 14px; padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: .92rem; font-weight: 600;
  animation: cardIn 300ms var(--ease-out);
}
.feedback--ok  { background: rgba(29,143,104,.18); border: 1px solid rgba(58,210,159,.5); color: #0d4a34; }
.feedback--bad { background: rgba(176,26,52,.14); border: 1px solid rgba(255,59,92,.5); color: #6b1023; }
.feedback b { font-weight: 900; }
.feedback--bold { font-size: 1.02rem; border-width: 2px; box-shadow: 0 3px 0 rgba(120,92,40,.25); }

/* The Scholar's extra working */
.studynote {
  margin-top: 10px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(155,123,255,.13);
  border-left: 3px solid var(--violet);
  font-size: .86rem; font-weight: 500; color: #3a2c6b;
}
.studynote b { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #5a44a8; margin-bottom: 3px; }

/* Spelling / typed answers */
.spell {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px;
}
.spell input {
  flex: 1 1 200px; min-width: 0;
  padding: 13px 16px; border-radius: var(--r-md);
  border: 2px solid rgba(120,92,40,.45);
  background: #fffaf0; color: #241a10;
  font-weight: 700; font-size: 1.05rem;
  letter-spacing: .05em;
}
.spell input:focus-visible { outline-color: var(--brass-500); }

/* Word tiles (sentence building) */
.tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tile {
  padding: 10px 14px; border-radius: var(--r-sm);
  background: linear-gradient(180deg,#fffaf0,#e7dabc);
  border: 2px solid rgba(120,92,40,.42);
  box-shadow: 0 2px 0 rgba(120,92,40,.35);
  font-weight: 800; color: #241a10; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) linear;
}
.tile:hover { transform: translateY(-2px); }
.tile--used { opacity: .25; pointer-events: none; }
.slotline {
  min-height: 56px; margin-top: 12px; padding: 10px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border: 2px dashed rgba(120,92,40,.4); border-radius: var(--r-md);
  background: rgba(255,255,255,.35);
}

/* Gadget bar */
.gadgets { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; justify-content: center; }
.gadget {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(232,196,112,.4);
  background: rgba(16,26,51,.86); color: var(--brass-200);
  font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) linear;
}
.gadget:hover:not([disabled]) { transform: translateY(-2px); background: rgba(30,48,83,.95); }
.gadget[disabled] { opacity: .35; cursor: not-allowed; }
.gadget svg { width: 16px; height: 16px; }
.gadget__n { background: rgba(0,0,0,.35); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* Progress pips for the 10 questions in a room */
.pips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.pip {
  width: 22px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  transition: background-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-back);
}
.pip--ok  { background: var(--jade); }
.pip--bad { background: var(--ruby); }
.pip--now { background: var(--brass-200); transform: scaleX(1.35); }

/* --------------------------------------------------------------------------
   13. Results screen
   -------------------------------------------------------------------------- */
.result { text-align: center; max-width: 700px; margin-inline: auto; }
.result__verdict {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.6rem);
  margin: 0 0 4px;
}
.result--win .result__verdict { color: var(--brass-200); text-shadow: 0 0 34px rgba(211,161,65,.5); }
.result--lose .result__verdict { color: var(--ruby); text-shadow: 0 0 30px rgba(255,59,92,.4); }

.result__stars { display: flex; justify-content: center; gap: 12px; margin: 18px 0 6px; }
.result__stars svg { width: 56px; height: 56px; }
.result__stars .star-slot { opacity: .18; }
.result__stars .star-slot.lit { opacity: 1; animation: starIn 620ms var(--ease-back); }
.result__stars .star-slot:nth-child(2).lit { animation-delay: .18s; }
.result__stars .star-slot:nth-child(3).lit { animation-delay: .36s; }
@keyframes starIn {
  from { opacity: 0; transform: scale(.2) rotate(-140deg); }
  to   { opacity: 1; transform: none; }
}

.scoreline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: 1; margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
}
.scoresub { color: var(--text-soft); font-size: .92rem; }

.rewards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 22px 0; }
.reward {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 22px; border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.26);
  background: rgba(16,26,51,.72); min-width: 116px;
}
.reward__v { font-family: var(--font-display); font-size: 1.7rem; color: var(--brass-200); font-variant-numeric: tabular-nums; }
.reward__k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 800; }

.review { text-align: left; margin-top: 22px; }
.review__item {
  padding: 12px 14px; border-radius: var(--r-sm);
  border-left: 3px solid var(--ruby);
  background: rgba(176,26,52,.1);
  margin-bottom: 9px; font-size: .9rem;
}
.review__item b { color: var(--jade); }
.review__q { color: var(--text-soft); display: block; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   14. Shop
   -------------------------------------------------------------------------- */
.shop { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.shopitem {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--r-md);
  border: 1px solid rgba(232,196,112,.24);
  background: linear-gradient(166deg, rgba(28,45,78,.92), rgba(8,13,27,.96));
  box-shadow: var(--sh-2);
  text-align: center;
}
.shopitem svg { width: 54px; height: 54px; margin-inline: auto; }
.shopitem h4 { margin: 0; font-size: 1.02rem; }
.shopitem p { font-size: .8rem; color: var(--text-soft); margin: 0; flex: 1; }
.shopitem .owned { font-size: .74rem; color: var(--jade); font-weight: 800; }
.shopitem .skinprev { max-width: 130px; margin-inline: auto; }
.shopitem .skinprev svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   15. Toasts & modal
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: 80;
  left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; gap: 8px; align-items: center;
  pointer-events: none; width: min(92vw, 460px);
}
.toast {
  padding: 11px 20px; border-radius: 999px;
  background: rgba(10,16,32,.95);
  border: 1px solid rgba(232,196,112,.4);
  box-shadow: var(--sh-3);
  font-size: .88rem; font-weight: 700; color: var(--brass-200);
  animation: toastIn 320ms var(--ease-back);
  max-width: 100%;
}
.toast--bad { border-color: rgba(255,59,92,.5); color: #ffb3c0; }
.toast--good { border-color: rgba(58,210,159,.5); color: #a6f2d5; }
.toast.out { animation: toastOut 300ms var(--ease-out) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(18px) scale(.92); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(-10px) scale(.96); } }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gut); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(3,5,11,.76); backdrop-filter: blur(6px); }
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(158deg, rgba(30,48,83,.98), rgba(8,13,27,.99));
  border: 1px solid rgba(232,196,112,.34);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(20px, 3vw, 32px);
  animation: cardIn 340ms var(--ease-back);
}
.modal__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }

/* --------------------------------------------------------------------------
   16. Settings & report
   -------------------------------------------------------------------------- */
.setting {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid rgba(232,196,112,.14);
}
.setting:last-child { border-bottom: 0; }
.setting__label { flex: 1 1 200px; min-width: 0; }
.setting__label b { display: block; font-size: .98rem; }
.setting__label span { font-size: .8rem; color: var(--text-soft); }

.switch {
  position: relative; width: 56px; height: 30px; flex: none;
  border-radius: 999px; border: 1px solid rgba(232,196,112,.4);
  background: rgba(255,255,255,.09); cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out);
}
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-200), var(--brass-400));
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease-back);
}
.switch[aria-checked="true"] { background: rgba(58,210,159,.4); }
.switch[aria-checked="true"] i { transform: translateX(26px); }

.seg { display: inline-flex; border: 1px solid rgba(232,196,112,.36); border-radius: 999px; overflow: hidden; }
.seg button {
  border: 0; background: transparent; color: var(--text-soft);
  padding: 8px 15px; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.seg button[aria-pressed="true"] { background: var(--brass-400); color: #2a1c05; }

.slider { width: 160px; accent-color: var(--brass-300); }

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(232,196,112,.14); }
.table th { color: var(--brass-300); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.table td { font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* --------------------------------------------------------------------------
   17. Guard / caught overlay
   -------------------------------------------------------------------------- */
.caught {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 50%, rgba(120,0,20,.5), rgba(3,5,11,.95));
  animation: cardIn 300ms var(--ease-out);
}
.caught__txt {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 5rem);
  color: #ff6b83; text-transform: uppercase; letter-spacing: .08em;
  text-shadow: 0 0 40px rgba(255,59,92,.7);
}
.alarmflash { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: rgba(255,59,92,.24); animation: flash 520ms ease-out both; }
@keyframes flash { to { opacity: 0; } }

/* --------------------------------------------------------------------------
   18. Utility
   -------------------------------------------------------------------------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.center { text-align: center; }
.mt { margin-top: 18px; }
.mt-lg { margin-top: 30px; }
.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); }
/* Something the player has to know: the browser is not letting the game save. */
.warnline {
  margin: 0; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255,59,92,.12); border: 1px solid rgba(255,59,92,.45);
  color: #ffc2cc; font-weight: 600; line-height: 1.55;
}
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .backdrop__rain, .backdrop__grain { display: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html[data-motion="off"] .backdrop__rain,
html[data-motion="off"] .backdrop__grain { display: none; }

/* --------------------------------------------------------------------------
   20. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hud { gap: 8px; flex-wrap: wrap; }
  .hud__center { order: 3; flex-basis: 100%; }
  .heat { width: 100%; }
  .title__actions .btn { flex: 1 1 100%; }
  .grades { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
  .gradecard__num { font-size: 2rem; }
  .result__stars svg { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   21. Phones & tablets
   This game is played on school tablets and borrowed phones at least as
   often as on a laptop. Nothing here changes a desktop layout: it gives
   fingers something big enough to hit, and keeps the question — the part
   that is actually the lesson — on screen next to the mechanism.
   -------------------------------------------------------------------------- */

/* Touch, whatever the screen size. 44px is the smallest target a thumb
   hits reliably; a 36px button on a tablet is a missed tap and a wrong
   answer that was never meant. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; padding: 11px 18px; }
  .gadget { min-height: 44px; padding: 11px 16px; }
  .seg button { padding: 12px 18px; }
  .opt { min-height: 56px; padding: 15px 16px; }
  .roomtile, .gradecard, .tcard { -webkit-tap-highlight-color: transparent; }

  .switch { width: 66px; height: 40px; }
  .switch i { width: 30px; height: 30px; top: 4px; left: 4px; }
  .switch[aria-checked="true"] i { transform: translateX(26px); }

  /* A 160px rail with a hairline thumb is unusable with a finger. */
  .slider { width: min(100%, 220px); height: 40px; }

  /* Hover lifts are pointless on touch and leave buttons stuck "lifted"
     after a tap on some engines. */
  .btn:hover, .opt:hover:not([disabled]), .gadget:hover:not([disabled]),
  .room:hover:not(.room--locked), .gradecard:hover, .tcard:hover { transform: none; }
}

/* Phones: one column, a mechanism that knows its place, and a question card
   that starts near the top of the screen instead of below the fold. */
@media (max-width: 760px) {
  .heist { gap: 14px; }
  .heist__device { gap: 8px; }

  /* Cap the mechanism by height, not just width: the dial is tall, and a
     500-unit-high safe door would otherwise push the question off screen. */
  .heist__device svg { max-height: 34vh; }
  .lockwrap { width: min(100%, 380px); }
  .dialv2 { width: min(100%, 300px); }

  .device-hint { font-size: .74rem; min-height: 0; }
  .pips { margin-top: 8px; gap: 4px; }
  .pip { width: 18px; height: 6px; }
  .gadgets { gap: 7px; margin-top: 10px; }
  .gadget { padding: 10px 12px; font-size: .74rem; gap: 6px; }

  .q-card { padding: 16px 15px; }
  .q-card__meta { font-size: .62rem; gap: 7px; margin-bottom: 9px; }
  .opts { margin-top: 12px; gap: 8px; }

  /* A reading passage can fill a phone on its own. Give it a quarter of the
     screen and let it scroll, so the question and the answers stay close. */
  .passage { max-height: 26vh; font-size: .9rem; padding: 10px 13px; }
}

/* The HUD is three stacked rows on a narrow screen by default, which is a
   third of a phone gone before the game starts. Two tight rows instead. */
@media (max-width: 560px) {
  .hud {
    display: grid; row-gap: 5px; column-gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "left right" "alarm alarm";
    align-items: center;
    padding: 7px var(--gut);
    padding-top: calc(env(safe-area-inset-top) + 7px);
  }
  /* The room name lives inside .hud__left, so the truncation has to happen
     there rather than on a grid track. */
  .hud__left { grid-area: left; min-width: 0; }
  .hud__room {
    font-size: .74rem; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hud__right { grid-area: right; }
  .hud__center { grid-area: alarm; }
  .heat { width: 100%; }
  /* "Abort Heist" on two lines makes the whole HUD twice as tall. */
  #hudQuit { padding: 8px 13px; font-size: .76rem; white-space: nowrap; }
  .chip { padding: 4px 9px; font-size: .74rem; }

  /* Dialog buttons side by side get very narrow; stack them full width. */
  .modal__actions { flex-direction: column; align-items: stretch; }
  .modal__actions .btn { width: 100%; }

  /* Thief cards are a reading screen: one at a time beats two columns of
     six-point type. */
  .deck { grid-template-columns: 1fr; }
  .tcard { min-height: 0; }
  .tcard__art { height: 128px; }
  .tcard__art svg { height: 126px; }
  .tcard__name { font-size: 1.16rem; }
  .tcard__stamp { font-size: 1rem; transform: translate(-50%, -50%) rotate(-13deg) scale(1.3); }
}

/* Landscape on a phone: wide but very short. Go back to two columns so the
   question is beside the mechanism rather than a screen below it, and stop
   the HUD from eating a third of the height. */
@media (orientation: landscape) and (max-height: 560px) {
  .heist { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 14px; }
  .heist__device svg { max-height: 52vh; }
  .hud { position: static; }
  .stage { padding-top: calc(env(safe-area-inset-top) + 6px); }
  .gadgets { margin-top: 8px; }
}