/*
 * app.css - the whole interface.
 *
 * Construction-site palette: night blue for chrome, hazard amber for anything
 * you press, and safety orange for the demolition side. Everything is sized
 * for a nine-year-old at a laptop: big targets, heavy type, nothing subtle.
 *
 * Fonts (Baloo 2, Nunito) are registered from JS via FontFace in assets.js,
 * so there is no @font-face block here - just the family names.
 */

:root {
  --bg: #0d1522;
  --panel: #1a2740;
  --panel-2: #223154;
  --line: #33456b;
  --ink: #f4efe4;
  --ink-dim: #a9b6cf;

  --amber: #ffc233;
  --amber-deep: #e09a00;
  --orange: #ff7a3d;
  --green: #4ade80;
  --green-deep: #16a34a;
  --red: #f87171;
  --blue: #58a6ff;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Baloo2', 'Nunito', system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

#app { position: fixed; inset: 0; }

#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#world.grabbable { cursor: grab; }
#world.grabbing { cursor: grabbing; }

/* The UI layer floats over the canvas and lets clicks through except on
   things that are actually interactive. */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ui button,
#ui input,
#ui label,
#ui .screen,
#ui .qpanel,
#ui .hud { pointer-events: auto; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.62em 1.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  /* A chunky bottom edge reads as a physical key to press. */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.btn:hover:not(:disabled) { background: #2b3d66; border-color: #4a608f; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%);
  border-color: #a97400;
  color: #2a1c00;
  box-shadow: 0 5px 0 #8a5f00;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffd15e 0%, #f0a800 100%); border-color: #a97400; }
.btn-primary:active:not(:disabled) { box-shadow: 0 2px 0 #8a5f00; }

.btn-danger { background: #7f1d1d; border-color: #b91c1c; box-shadow: 0 4px 0 #4d1010; }
.btn-danger:hover { background: #991b1b; }

.btn-ghost { background: rgba(26, 39, 64, 0.75); }
.btn-small { font-size: 0.9rem; padding: 0.45em 0.85em; }

.btn-ico { display: inline-flex; }
.btn-ico svg { display: block; }

.btn-icon { flex-direction: column; gap: 0.25em; padding: 0.6em 0.9em; }
.btn-icon .btn-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }

/* ------------------------------------------------------------ HUD (top) -- */

.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) minmax(220px, 2fr) auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  padding: 14px clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(9, 14, 24, 0.92) 0%, rgba(9, 14, 24, 0) 100%);
}

.btn-back { padding: 0.5em 0.7em; }

.hud-title h2 {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  margin: 0;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-title p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.progress {
  position: relative;
  height: 30px;
  background: #0b1220;
  border: 2px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill, .progress-ghost {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
}
.progress-ghost { background: rgba(255, 194, 51, 0.28); transition: width 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); }
.progress-fill {
  background: linear-gradient(90deg, var(--orange), var(--amber));
  transition: width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.progress-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hud-progress { display: grid; gap: 6px; }

.materials { display: flex; gap: clamp(6px, 0.9vw, 14px); justify-content: center; }
.mat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 4px;
  background: rgba(26, 39, 64, 0.8);
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.86rem;
}
.mat img { display: block; image-rendering: auto; }
.mat b.bump { animation: bump 0.32s ease; color: var(--amber); }

.hud-stats { display: flex; gap: clamp(8px, 1.2vw, 18px); }
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 4px 10px;
  background: rgba(26, 39, 64, 0.8);
  border: 2px solid var(--line);
  border-radius: 12px;
}
.stat span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.stat b { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }
.stat b.bump { animation: bump 0.32s ease; }
.stat.hot { border-color: var(--amber); box-shadow: 0 0 14px rgba(255, 194, 51, 0.35); }
.stat.hot b { color: var(--amber); }
.stat.blazing { border-color: var(--orange); box-shadow: 0 0 22px rgba(255, 122, 61, 0.5); }
.stat.blazing b { color: var(--orange); }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------- banner -- */

.banner {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.6);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--amber);
  text-shadow: 0 4px 0 #7a4b00, 0 0 30px rgba(255, 194, 51, 0.6);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.banner.show { animation: banner 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  30% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

/* ------------------------------------------------------- question panel -- */

.qpanel {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 1.6vh, 20px);
  transform: translateX(-50%);
  width: min(1020px, calc(100% - 28px));
  background: rgba(15, 23, 39, 0.94);
  border: 3px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.qpanel.correct { border-color: var(--green); box-shadow: 0 0 34px rgba(74, 222, 128, 0.35); }
.qpanel.wrong { border-color: var(--red); box-shadow: 0 0 34px rgba(248, 113, 113, 0.3); }

/* The timer is a burning fuse rather than a bar, because a fuse is what a
   demolition charge has. */
.fuse {
  position: relative;
  height: 12px;
  margin: 3px 3px 0;
  border-radius: 10px 10px 0 0;
  background: #0a0f1a;
  overflow: hidden;
}
.fuse.hidden { visibility: hidden; }
.fuse-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: repeating-linear-gradient(90deg, #8a5a2b 0 8px, #6f4620 8px 16px);
}
.fuse-spark {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, var(--amber) 40%, rgba(255, 122, 61, 0) 72%);
}
.fuse.urgent .fuse-spark { animation: sparkPulse 0.32s infinite alternate; }
.fuse.urgent .fuse-fill { background: repeating-linear-gradient(90deg, #b03a1a 0 8px, #8a2b12 8px 16px); }
@keyframes sparkPulse { from { transform: scale(1); } to { transform: scale(1.5); } }

.qpanel-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.8vw, 22px);
}

.qline { display: flex; align-items: center; gap: 0.35em; margin-right: auto; }

.question {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  white-space: nowrap;
}

.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  min-height: 1.25em;
  padding: 0.02em 0.28em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.25;
  text-align: center;
  color: var(--amber);
  background: #0a0f1a;
  border: 3px dashed var(--line);
  border-radius: 12px;
}
.answer.filled { border-style: solid; border-color: var(--amber); }
.answer.nudge { animation: nudge 0.25s ease; }
.answer.shake { animation: shake 0.42s ease; }
@keyframes nudge { 50% { transform: scale(1.08); } }
@keyframes shake {
  10%, 50%, 90% { transform: translateX(-7px); }
  30%, 70% { transform: translateX(7px); }
}

.btn-hint {
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  padding: 0.5em 0.7em;
  background: #2b3d66;
}
.btn-hint.hidden { visibility: hidden; }

.keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 0.6vw, 9px);
}
.qactions { display: grid; gap: clamp(5px, 0.6vw, 9px); }

.key {
  width: clamp(50px, 5.2vw, 68px);
  height: clamp(40px, 4.2vw, 54px);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--ink);
  background: linear-gradient(180deg, #2c3f68 0%, #223154 100%);
  border: 2px solid #3f5583;
  border-radius: 14px;
  box-shadow: 0 4px 0 #16203a;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.12s ease;
}
.key:hover { background: linear-gradient(180deg, #354b7c 0%, #2a3b64 100%); }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 #16203a; }
.key:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.key-del { background: linear-gradient(180deg, #4a3550 0%, #3a2a40 100%); border-color: #6b4a75; box-shadow: 0 4px 0 #241a29; }
.key-ok {
  background: linear-gradient(180deg, #2f6b45 0%, #235338 100%);
  border-color: #3d8a58;
  box-shadow: 0 4px 0 #14311f;
  color: #dcffe8;
}
.key-ok.ready {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: #15803d;
  color: #04240f;
  animation: readyPulse 1.1s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 4px 0 #14311f, 0 0 0 rgba(74, 222, 128, 0); }
  50% { box-shadow: 0 4px 0 #14311f, 0 0 18px rgba(74, 222, 128, 0.55); }
}

/* Sits above the panel rather than inside it, so showing feedback never
   changes the panel's height - which would move the ground line under the
   building every time an answer came in. */
.feedback {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.7);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.feedback.show { opacity: 1; transform: translateY(0); }
.feedback.good { color: var(--green); font-size: clamp(1.4rem, 3vw, 2.1rem); }
.feedback.bad { color: var(--red); font-size: clamp(1rem, 1.9vw, 1.3rem); }
.feedback .nudge-line { line-height: 1.1; }

/* The correction, as a whole statement on black. Big enough to be the thing
   you look at, not a footnote under the encouragement. */
.reveal {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin-top: 6px;
  padding: 0.14em 0.62em 0.2em;
  background: #05080f;
  border: 3px solid var(--amber);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(5, 8, 15, 0.55);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  color: var(--ink);
  text-shadow: none;
  /* Pops in, then keeps creeping larger for three seconds. The slow push is
     what makes the eye stay on it instead of glancing away once it has
     registered that something appeared. */
  animation: revealIn 3.2s forwards;
}
.reveal .eq { color: var(--ink-dim); }
.reveal b { color: var(--amber); }

@keyframes revealPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes revealIn {
  0% { transform: scale(0.68); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1.5, 0.4, 1); }
  11% { transform: scale(1); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: scale(1.17); opacity: 1; }
}

/* --------------------------------------------------------------- screens -- */

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(16px, 3vh, 34px) clamp(16px, 3vw, 44px);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.4vh, 26px);
}
.brand h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: 0;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #fff2c9 0%, var(--amber) 55%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}
.brand p {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.24em;
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  color: var(--ink-dim);
  text-transform: uppercase;
}
.menu-actions { display: flex; gap: 10px; }
.brand .materials { justify-content: flex-start; margin-top: 12px; }

.btn-continue {
  width: min(560px, 100%);
  justify-content: flex-start;
  font-size: 1.2rem;
  padding: 0.85em 1.2em;
  margin-bottom: clamp(16px, 3vh, 30px);
}
.btn-continue span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn-continue small { font-weight: 700; opacity: 0.75; font-size: 0.82rem; }

.section-title {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-grid {
  display: grid;
  /* Capped so sixteen missions land as a tidy 4 x 4 on any normal window
     instead of five across with one orphan on a row of its own. Columns still
     drop to three or two on a narrow one. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-width: 1120px;
  gap: clamp(10px, 1.4vw, 16px);
}

.mission-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  background: rgba(26, 39, 64, 0.9);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}
.mission-card:hover:not(:disabled) {
  transform: translateY(-3px);
  background: #25365c;
  border-color: #4a608f;
}
.mission-card:disabled { cursor: not-allowed; opacity: 0.45; }
.mission-card.demolish { border-left: 6px solid var(--orange); }
.mission-card.build { border-left: 6px solid var(--green); }

.mission-no {
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink-dim);
  min-width: 1.4em;
}
.mission-kind { position: absolute; top: 10px; right: 12px; opacity: 0.5; }
.mission-card.demolish .mission-kind { color: var(--orange); }
.mission-card.build .mission-kind { color: var(--green); }
.mission-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  /* Leave room for the type icon in the corner, or a long title runs under it. */
  padding-right: 30px;
}
.mission-sub { font-size: 0.76rem; color: var(--ink-dim); line-height: 1.25; }

.stars { grid-column: 2; display: flex; gap: 4px; margin-top: 6px; }
.stars i {
  width: 16px; height: 16px;
  background: #2c3a58;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars i.on { background: var(--amber); }

.btn-freeplay {
  margin-top: clamp(16px, 3vh, 28px);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.btn-freeplay small { font-weight: 600; font-family: var(--font); opacity: 0.7; }

/* --------------------------------------------------------------- loadout -- */

.loadout-kind {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}

.loadout-body { max-width: 1000px; margin: 0 auto; }
.loadout-body .section-title { margin-top: 22px; }
.loadout-body .section-title small {
  font-family: var(--font);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-dim);
}

.pick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.pick-row.hats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  background: rgba(26, 39, 64, 0.9);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}
.pick:hover:not(:disabled) { transform: translateY(-3px); background: #25365c; border-color: #4a608f; }
.pick.on {
  border-color: var(--amber);
  background: #2c3a5e;
  box-shadow: 0 0 0 3px rgba(255, 194, 51, 0.22), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.pick:disabled { cursor: not-allowed; opacity: 0.55; }
.pick b { font-family: var(--display); font-size: 0.95rem; line-height: 1.15; text-align: center; }
.pick small { font-size: 0.72rem; color: var(--ink-dim); text-align: center; line-height: 1.2; }
.pick-art { display: block; color: var(--amber); }
.pick-art.dim { opacity: 0.3; filter: grayscale(1); }
.pick.hat b { font-size: 0.8rem; }

.btn-go {
  margin: 26px auto 10px;
  display: flex;
  font-size: 1.4rem;
  padding: 0.7em 2.4em;
}

/* ---------------------------------------------------------------- result -- */

.new-hat {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin: 0 0 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(255, 194, 51, 0.18), rgba(255, 194, 51, 0.06));
  border: 3px solid var(--amber);
  border-radius: var(--radius);
  animation: revealPop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 1.3s backwards;
}
.new-hat span { display: flex; flex-direction: column; align-items: flex-start; }
.new-hat b { font-family: var(--display); color: var(--amber); font-size: 1.15rem; }
.new-hat small { color: var(--ink-dim); }
.hat-prize { display: block; }

.result-screen { display: grid; place-items: center; }

.result-card {
  width: min(680px, 100%);
  background: rgba(15, 23, 39, 0.96);
  border: 3px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vh, 32px);
  text-align: center;
}
.result-card.passed { border-color: var(--green); }
.result-card.failed { border-color: var(--amber); }
.result-card h2 { font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0; }
.result-mission { margin: 2px 0 14px; color: var(--ink-dim); font-weight: 700; }

.big-stars { display: flex; justify-content: center; gap: 16px; margin: 6px 0 14px; }
.big-star {
  width: clamp(48px, 8vw, 74px);
  height: clamp(48px, 8vw, 74px);
  background: #2c3a58;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: scale(0.6);
  transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1), background 0.3s ease;
}
.big-star.on {
  background: linear-gradient(180deg, #fff0b8, var(--amber));
  transform: scale(1);
  filter: drop-shadow(0 0 18px rgba(255, 194, 51, 0.7));
}

.result-score { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 14px; }
.result-score b { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); color: var(--amber); }
.result-score span { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-dim); }

.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.rstat {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rstat span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); }
.rstat b { font-family: var(--display); font-size: 1.2rem; }

.to-practice { text-align: left; margin-bottom: 16px; }
.to-practice h4 {
  font-family: var(--display);
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.to-practice ul, .list-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.to-practice li, .list-block li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: var(--display);
  font-weight: 700;
}
.to-practice li .q, .list-block li .q { min-width: 5.5ch; }
.to-practice li .eq, .list-block li .eq { color: var(--ink-dim); }
.to-practice li b, .list-block li b { color: var(--green); }
.to-practice li s { color: var(--red); opacity: 0.8; margin-left: auto; }

.all-good { color: var(--green); font-weight: 800; font-family: var(--display); font-size: 1.15rem; }

.result-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- stats -- */

.sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sub-head.floating {
  position: absolute;
  top: clamp(14px, 2vh, 24px);
  left: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  margin: 0;
}
/* The city view is bright daylight, so the title and totals carry their own
   background rather than relying on the page behind them. */
.sub-head.floating h2,
.sub-head.floating .head-totals {
  padding: 6px 16px;
  background: rgba(13, 21, 34, 0.72);
  border-radius: 999px;
}
.sub-head h2 { font-family: var(--display); margin: 0; font-size: clamp(1.3rem, 3vw, 2rem); }
.head-totals { font-family: var(--display); color: var(--ink-dim); }
.head-totals b { color: var(--amber); }

.stats-body { display: grid; gap: 18px; }
.grids { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }
.grid-block h3 {
  font-family: var(--display);
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--amber);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.grid-block h3 small {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink-dim);
}
.grid { display: grid; gap: 3px; }
.grow { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.gh {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ink-dim);
  aspect-ratio: 1;
}
.gh.corner { color: var(--amber); }
.gcell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  font-family: var(--display);
  color: rgba(255, 255, 255, 0.92);
  cursor: help;
}
.gcell.unseen { color: rgba(255, 255, 255, 0.3); }

.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-dim); }
.legend .sw { width: 20px; height: 14px; border-radius: 4px; display: inline-block; }

.lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.list-block h4 { font-family: var(--display); margin: 0 0 8px; font-size: 0.95rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.list-block li .bar {
  margin-left: auto;
  width: 74px;
  height: 8px;
  background: #0b1220;
  border-radius: 999px;
  overflow: hidden;
}
.list-block li .bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--green)); }
.list-block li.muted { color: var(--ink-dim); justify-content: center; }

.empty-note { color: var(--ink-dim); text-align: center; margin-top: 18vh; font-size: 1.05rem; }

/* -------------------------------------------------------------- settings -- */

.settings-body { display: grid; gap: 12px; max-width: 620px; margin: 0 auto; }

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(26, 39, 64, 0.9);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
}
.setting > span { display: flex; flex-direction: column; gap: 2px; }
.setting b { font-family: var(--display); font-size: 1.05rem; }
.setting small { color: var(--ink-dim); }

.switch { position: relative; width: 62px; height: 34px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  position: absolute;
  inset: 0;
  background: #0b1220;
  border: 2px solid var(--line);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
  pointer-events: none;
}
.switch i::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), background 0.18s ease;
}
.switch input:checked + i { background: rgba(74, 222, 128, 0.22); border-color: var(--green); }
.switch input:checked + i::after { transform: translateX(28px); background: var(--green); }
.switch input:focus-visible + i { outline: 3px solid var(--amber); outline-offset: 2px; }

.range { width: 200px; accent-color: var(--amber); }

.danger-zone {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed var(--line);
}

.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 10, 18, 0.8);
  pointer-events: auto;
}
.modal-card {
  background: var(--panel);
  border: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 420px;
  text-align: center;
}
.modal-card p { font-family: var(--display); font-size: 1.15rem; margin: 0 0 18px; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------------ city -- */

/* Written as `#ui .screen.city-screen` on purpose: the generic `#ui .screen`
   rule above sets pointer-events:auto and outranks a bare class, which is what
   was quietly eating every drag and scroll meant for the canvas underneath. */
#ui .screen.city-screen { overflow: hidden; pointer-events: none; }
.city-screen .sub-head,
.city-screen .sub-head * { pointer-events: auto; }
.city-controls {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.city-hint {
  margin: 0;
  padding: 8px 16px;
  background: rgba(15, 23, 39, 0.85);
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 0.85rem;
  white-space: nowrap;
}
.btn-round {
  padding: 0.55em;
  border-radius: 50%;
  background: rgba(26, 39, 64, 0.92);
}

/* -------------------------------------------------------------- cartoons -- */

#ui .screen.cartoon-screen { overflow: hidden; pointer-events: none; }
.cartoon-screen .btn-skip { pointer-events: auto; }

.cartoon-caption {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 26px;
  background: rgba(6, 10, 18, 0.82);
  border: 3px solid var(--amber);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--ink);
  white-space: nowrap;
  animation: revealPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s backwards;
}

.btn-skip {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vh, 30px);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- loader -- */

#loader, #fatal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 50;
  transition: opacity 0.4s ease;
}
#loader.gone { opacity: 0; pointer-events: none; }
#fatal[hidden] { display: none; }

.loader-card { text-align: center; width: min(420px, 80vw); }
.loader-card h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.2rem);
  margin: 0 0 4px;
  letter-spacing: 0.04em;
  color: var(--amber);
}
.loader-card p { margin: 0 0 20px; color: var(--ink-dim); letter-spacing: 0.18em; font-size: 0.75rem; text-transform: uppercase; }
.loader-bar { height: 12px; background: #0b1220; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--amber)); transition: width 0.2s ease; }
.loader-card small { display: block; margin-top: 8px; color: var(--ink-dim); font-size: 0.75rem; }

/* --------------------------------------------------------- small screens -- */

@media (max-height: 760px) {
  .qpanel-body { padding: 8px 14px; gap: 10px; }
  .question, .answer { font-size: clamp(1.5rem, 3vw, 2.1rem); }
  .key { height: clamp(36px, 3.8vw, 46px); width: clamp(44px, 4.6vw, 58px); font-size: 1.2rem; }
  .hud { padding: 8px 16px; }
}

@media (max-width: 860px) {
  .btn-hint span:last-child { display: none; }
  .qline { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* iteration-count matters as much as duration: without it an `infinite`
     animation keeps cycling, just at 0.01ms per cycle, which strobes instead
     of stopping - the confirm key's glow flickered on and off dozens of times
     a second for anyone with reduced motion turned on. */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
  }
}