/* ============================================================
   Factor Dungeon — Pixel Math Temple
   ============================================================ */
:root {
  color-scheme: dark;
  --bg0: #0a0e1c;
  --bg1: #121b33;
  --bg2: #1a2748;
  --stone: #5a6685;
  --stone-d: #353f5b;
  --stone-l: #828fb0;
  --ink: #f7f3df;
  --muted: #9fb0d0;
  --line: #2f3e63;
  --gold: #f2c75c;
  --gold-2: #ffe49a;
  --cyan: #74e6ff;
  --cyan-d: #2a9fbf;
  --green: #79e6a4;
  --red: #ff6b76;
  --purple: #a98be0;
  --heart: #ff5d6c;
  --shadow: rgba(0, 0, 0, 0.4);
  --pix: 0 4px 0 #060912;
  --pix-lg: 0 6px 0 #060912;
  font-family: "Tahoma", "Noto Sans Thai", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg0);
  color: var(--ink);
}

button {
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

kbd {
  display: inline-block;
  padding: 0 6px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: #0d1426;
  font-size: 0.82em;
  box-shadow: 0 2px 0 #060912;
}

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Screen system ---------- */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
}

/* ===========================================================
   TITLE SCREEN
   =========================================================== */
.title-screen {
  display: grid;
  place-items: center;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 18%, rgba(116, 230, 255, 0.14), transparent 46%),
    radial-gradient(circle at 50% 120%, rgba(242, 199, 92, 0.16), transparent 50%),
    linear-gradient(180deg, #0c1430 0%, var(--bg0) 100%);
  text-align: center;
  padding: 24px;
}

.title-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-pillar {
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 70%;
  background: linear-gradient(180deg, #1b2848, #0d1428);
  border: 4px solid #0a1022;
  box-shadow: inset 0 0 0 4px rgba(130, 143, 176, 0.12);
  opacity: 0.7;
}
.bg-pillar.p1 { left: 4%; height: 78%; }
.bg-pillar.p2 { left: 20%; height: 64%; opacity: 0.5; }
.bg-pillar.p3 { right: 20%; height: 64%; opacity: 0.5; }
.bg-pillar.p4 { right: 4%; height: 78%; }

.title-torch {
  position: absolute;
  bottom: 30%;
}
.tt-left { left: 12%; }
.tt-right { right: 12%; }

.title-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 26px;
  width: min(440px, 100%);
}

.logo-sub {
  display: block;
  letter-spacing: 6px;
  font-size: 0.7rem;
  color: var(--cyan);
  margin-bottom: 6px;
}

.logo-title {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 4rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--gold-2);
  text-shadow:
    0 4px 0 #7a4d12,
    0 8px 0 #060912,
    0 0 26px rgba(242, 199, 92, 0.4);
  animation: logoFloat 3.4s ease-in-out infinite;
}

.logo-th {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.title-menu {
  display: grid;
  gap: 10px;
}

.menu-label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 1px;
}

.menu-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 3px solid var(--line);
  background: linear-gradient(180deg, #1c2c50, #16223f);
  box-shadow: var(--pix);
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: linear-gradient(180deg, #243a68, #1a2a4e);
  outline: none;
}

.mb-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--gold);
  background: #2a1f12;
  color: var(--gold-2);
  font-weight: 900;
  box-shadow: inset 0 0 0 3px #1a1208;
}

.mb-name {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
}

.mb-meta {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.mb-stars {
  color: var(--gold-2);
  font-weight: 700;
  white-space: nowrap;
}

.title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.mini-btn {
  flex: 1;
  min-width: 110px;
  padding: 9px 10px;
  border: 2px solid var(--line);
  background: #15203c;
  box-shadow: 0 3px 0 #060912;
  font-size: 0.84rem;
  transition: transform 120ms ease, border-color 120ms ease;
}
.mini-btn:hover {
  transform: translateY(-1px);
  border-color: var(--cyan);
}

.char-select {
  display: grid;
  gap: 8px;
}
.char-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.char-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 6px;
  border: 3px solid var(--line);
  background: linear-gradient(180deg, #1c2c50, #16223f);
  box-shadow: var(--pix);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.char-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}
.char-card.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2a3f6c, #1d2c50);
}
.char-sprite {
  width: 58px;
  height: 74px;
}
.char-sprite .hero-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.char-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--muted);
}
.char-card.selected .char-name {
  color: var(--gold-2);
}

.title-tip {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  color: var(--muted);
  font-size: 0.82rem;
  animation: blink 1.6s steps(1) infinite;
}

/* ===========================================================
   GAME SCREEN
   =========================================================== */
.game-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #0c1430, var(--bg0));
}

/* ---------- HUD ---------- */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(8, 12, 26, 0.85);
  border-bottom: 3px solid var(--line);
  z-index: 5;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hearts {
  display: flex;
  gap: 4px;
}

.heart {
  width: 22px;
  height: 22px;
  background: var(--heart);
  clip-path: polygon(50% 100%, 8% 48%, 8% 26%, 28% 12%, 50% 26%, 72% 12%, 92% 26%, 92% 48%);
  box-shadow: 0 2px 0 #7a1822;
  transition: transform 140ms ease;
}
.heart.empty {
  background: #3a2330;
  box-shadow: none;
}
.heart.lose {
  animation: heartPop 360ms ease;
}

.combo-tag {
  padding: 3px 8px;
  border: 2px solid var(--gold);
  background: #2a1f12;
  color: var(--gold-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 160ms ease, transform 160ms ease;
}
.combo-tag.show {
  opacity: 1;
  transform: scale(1);
}
.combo-tag.bump {
  animation: comboBump 320ms ease;
}

.hud-center {
  text-align: center;
}
.floor-name {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--gold-2);
  white-space: nowrap;
}
.room-pips {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 5px;
}
.pip {
  width: 12px;
  height: 12px;
  border: 2px solid var(--stone-l);
  background: #0d1426;
  transform: rotate(45deg);
}
.pip.done {
  background: var(--green);
  border-color: #d6ffe4;
}
.pip.current {
  background: var(--gold);
  border-color: var(--gold-2);
  box-shadow: 0 0 8px rgba(242, 199, 92, 0.8);
}

.hud-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.stat-chip {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}
.stat-chip strong {
  color: var(--gold-2);
}
.icon-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line);
  background: #15203c;
  box-shadow: 0 3px 0 #060912;
  font-size: 1rem;
  line-height: 1;
  transition: transform 120ms ease, border-color 120ms ease;
}
.icon-btn:hover {
  transform: translateY(-1px);
  border-color: var(--cyan);
}

/* ---------- Stage / scene ---------- */
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #101a36 0%, #16264a 62%, #0c1326 63%);
  transition: transform 120ms ease;
}
.scene.shake {
  animation: sceneShake 360ms ease;
}
.scene.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  animation: flashFade 320ms ease forwards;
  pointer-events: none;
  z-index: 20;
}

.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg-far {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 2px, transparent 2px);
  background-size: 46px 46px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
}
.bg-near {
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0, 0, 0, 0.25) 78px 82px);
  opacity: 0.6;
  mask-image: linear-gradient(180deg, #000 10%, transparent 60%);
}

.floor-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  background:
    repeating-linear-gradient(90deg, #243453 0 44px, #1c2a45 44px 88px),
    linear-gradient(180deg, #2a3a5c, #18233c);
  border-top: 4px solid #46587e;
  box-shadow: inset 0 8px 0 rgba(0, 0, 0, 0.22);
}

/* torches */
.torch {
  position: absolute;
  width: 16px;
  height: 46px;
  background: #3a2745;
  border: 3px solid #160d1d;
  z-index: 2;
}
.torch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 30px;
  height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(circle, #fff0a2 0 18%, #ffb238 40%, #f36d36 64%, transparent 70%);
  animation: flicker 640ms infinite alternate;
}
.torch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -54px;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 178, 56, 0.22), transparent 62%);
  pointer-events: none;
}
.t-left { left: 6%; bottom: 30%; }
.t-right { right: 6%; bottom: 30%; }
.title-torch { width: 18px; height: 52px; }

/* ---------- Gate ---------- */
.gate {
  position: absolute;
  left: 50%;
  bottom: 27%;
  transform: translateX(-50%);
  width: clamp(150px, 30vmin, 230px);
  height: clamp(190px, 40vmin, 300px);
  z-index: 2;
}
.gate-arch {
  position: absolute;
  inset: -16px -10px auto -10px;
  height: 40px;
  background: repeating-linear-gradient(90deg, #6c7894 0 26px, #586580 26px 52px);
  border: 4px solid var(--stone-d);
}
.gate-half {
  position: absolute;
  top: 24px;
  bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(0, 0, 0, 0.16) 30px 34px),
    linear-gradient(180deg, var(--stone), #434f6c);
  border: 4px solid var(--stone-d);
  transition: transform 620ms cubic-bezier(0.4, 0.1, 0.2, 1), opacity 620ms ease;
}
.gate-left { left: 0; border-right: 0; }
.gate-right { right: 0; border-left: 0; }
.gate-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 60%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(116, 230, 255, 0.9), transparent 62%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.gate.is-open .gate-left { transform: translateX(-94%); }
.gate.is-open .gate-right { transform: translateX(94%); }
.gate.is-open .gate-glow { opacity: 1; }

/* ---------- Guardian (rune sigil + boss) ---------- */
.guardian {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
}

.rune-sigil {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  animation: floaty 3s ease-in-out infinite;
}
.rune-sigil span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid var(--cyan);
  box-shadow: 0 0 12px rgba(116, 230, 255, 0.7);
  transform: rotate(45deg);
}
.rune-sigil span:nth-child(1) { top: 0; left: 50%; margin-left: -7px; }
.rune-sigil span:nth-child(2) { bottom: 0; left: 50%; margin-left: -7px; }
.rune-sigil span:nth-child(3) { left: 0; top: 50%; margin-top: -7px; }
.rune-sigil span:nth-child(4) { right: 0; top: 50%; margin-top: -7px; }
.rune-eye {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #dffaff 0 28%, var(--cyan) 30%, #1d6b86 70%);
  box-shadow: 0 0 16px rgba(116, 230, 255, 0.8);
  animation: eyePulse 2.4s ease-in-out infinite;
}
.guardian.is-hit { animation: hitShake 300ms ease; }
.guardian.is-hit .rune-eye { background: radial-gradient(circle, #fff 0 30%, var(--red) 34%, #7a1822 72%); }
.guardian.is-cleared .rune-sigil { opacity: 0; transition: opacity 300ms ease; }

/* boss */
.boss-sprite {
  display: none;
  width: clamp(124px, 30vmin, 192px);
}
.boss-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.28));
}
.b-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: eyePulse 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.95));
}
.guardian.is-boss .rune-sigil { display: none; }
.guardian.is-boss .boss-sprite { display: block; }
.guardian.is-boss { bottom: 30%; }
.guardian.is-boss.is-hit .boss-sprite { animation: hitShake 320ms ease; }
.guardian.is-boss.is-hit .boss-svg { filter: brightness(2.2) saturate(0.4); }
.guardian.is-boss.is-cleared .boss-svg { animation: bossCrumble 720ms ease forwards; }
.guardian.is-boss.is-cleared .boss-bar-wrap { opacity: 0; transition: opacity 420ms ease; }

.boss-bar-wrap {
  display: none;
  position: absolute;
  top: -34px;
  width: max(150px, 100%);
  text-align: center;
}
.guardian.is-boss .boss-bar-wrap { display: block; }
.boss-name {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--red);
  text-shadow: 0 2px 0 #060912;
  margin-bottom: 3px;
  white-space: nowrap;
}
.boss-bar {
  height: 12px;
  border: 3px solid #2a3047;
  background: #0d1426;
  box-shadow: 0 3px 0 #060912;
}
.boss-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff8a3c, var(--red));
  transition: width 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Problem plaque ---------- */
.plaque {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 6;
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: clamp(180px, 50%, 360px);
  padding: 10px 22px;
  border: 4px solid #3c3041;
  background: #f7f3df;
  color: #17233f;
  text-align: center;
  box-shadow: inset 0 0 0 4px #d9cda7, 0 6px 0 #060912;
}
.plaque.pulse { animation: plaquePulse 360ms ease; }
.plaque-label {
  color: #6f5f40;
  font-size: 0.74rem;
  letter-spacing: 1px;
}
.plaque strong {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.5px;
}

/* ---------- Hero sprite ---------- */
.hero {
  position: absolute;
  left: 19%;
  bottom: 26%;
  width: 60px;
  height: 80px;
  z-index: 4;
  transition: left 560ms cubic-bezier(0.4, 0.1, 0.2, 1);
}
.title-hero .hero-sprite,
.hero .hero-sprite {
  position: relative;
  width: 60px;
  height: 78px;
  margin: 0 auto;
  transform-origin: bottom center;
  animation: idleBob 1.7s ease-in-out infinite;
}
.hero-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.hero-svg .visor-eye {
  filter: drop-shadow(0 0 2px rgba(116, 230, 255, 0.95));
}
.hero-svg .blade {
  filter: drop-shadow(0 0 2.5px rgba(116, 230, 255, 0.55));
}
.hero-svg .orb {
  filter: drop-shadow(0 0 3px rgba(116, 230, 255, 0.9));
}
.sword-arm {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 170ms ease;
}
.hero-shadow {
  width: 50px;
  height: 9px;
  margin: -2px auto 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: shadowPulse 1.7s ease-in-out infinite;
}

.hero.is-walking .hero-sprite { animation: walkBob 280ms steps(2) infinite; }
.hero.is-attacking .hero-sprite { animation: heroLunge 360ms ease; }
.hero.is-attacking .sword-arm { transform: rotate(-115deg); }
.hero.is-hurt .hero-sprite { animation: heroHurt 360ms ease; }
.hero.is-cheer .hero-sprite { animation: heroCheer 600ms ease infinite; }
.hero.is-cheer .sword-arm { transform: rotate(16deg); }

/* ---------- Hint bubble ---------- */
.hint-bubble {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%) translateY(-8px);
  max-width: 80%;
  padding: 8px 12px;
  border: 3px solid var(--gold);
  background: rgba(14, 20, 38, 0.96);
  color: var(--gold-2);
  font-size: 0.84rem;
  box-shadow: var(--pix);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 8;
  pointer-events: none;
}
.hint-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- FX & popups ---------- */
.fx-layer,
.popup-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.fx-bit {
  position: absolute;
  will-change: transform, opacity;
}
.fx-star {
  color: var(--gold-2);
  text-shadow: 0 0 8px rgba(242, 199, 92, 0.9);
  animation: fxFly 950ms ease-out forwards;
}
.fx-shard {
  width: 10px;
  height: 10px;
  background: var(--stone-l);
  border: 2px solid var(--stone-d);
  animation: fxFall 820ms ease-in forwards;
}
.fx-spark {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: fxFly 620ms ease-out forwards;
}

.popup {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 #060912;
  animation: popUp 1100ms ease-out forwards;
  white-space: nowrap;
}
.popup.good { color: var(--gold-2); }
.popup.bad { color: var(--red); }
.popup.combo { color: var(--cyan); top: 30%; }

/* ---------- Floor toast ---------- */
.floor-toast {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.8);
  padding: 12px 26px;
  border: 4px solid var(--gold);
  background: rgba(10, 14, 28, 0.92);
  color: var(--gold-2);
  font-weight: 800;
  font-size: 1.15rem;
  text-align: center;
  box-shadow: var(--pix-lg);
  opacity: 0;
  z-index: 15;
  pointer-events: none;
}
.floor-toast.show { animation: toastIn 1900ms ease forwards; }
.floor-toast small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
  z-index: 14;
}

/* ---------- Command dock ---------- */
.command-dock {
  flex-shrink: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8, 12, 26, 0.92);
  border-top: 3px solid var(--line);
  z-index: 5;
}
.dock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dock-prompt h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.dock-prompt p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.hint-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  border: 2px solid #866195;
  background: #3c2b47;
  box-shadow: 0 3px 0 #060912;
  white-space: nowrap;
  transition: transform 120ms ease;
}
.hint-btn:hover { transform: translateY(-1px); }
.hint-btn.flash { animation: hintFlash 500ms ease; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  border: 3px solid var(--line);
  background: linear-gradient(180deg, #1d2c50, #16223f);
  box-shadow: var(--pix);
  text-align: left;
  transition: transform 110ms ease, border-color 110ms ease, background 110ms ease;
}
.choice-key {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--stone-l);
  background: #0d1426;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}
.choice-body {
  flex: 1;
  min-width: 0;
}
.choice-label {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.choice.long .choice-label { font-size: 0.84rem; }
.choice small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.choice:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}
.choice.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2c3f6c, #20305a);
}
.choice.selected .choice-key {
  border-color: var(--gold);
  color: var(--gold-2);
}
.choice small.hidden { display: none; }
.choice.correct {
  border-color: var(--green);
  background: rgba(31, 111, 82, 0.55);
}
.choice.correct .choice-key {
  border-color: var(--green);
  color: #d6ffe4;
}
.choice.wrong {
  border-color: var(--red);
  background: rgba(136, 46, 59, 0.5);
  animation: nudge 360ms ease;
}
.choices.locked .choice { cursor: default; pointer-events: none; }

.cast-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 3px solid #61d296;
  background: linear-gradient(180deg, #1f8f63, #166848);
  box-shadow: var(--pix);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: transform 120ms ease, filter 120ms ease;
}
.cast-btn:hover:not(:disabled) { transform: translateY(-2px); }
.cast-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.cast-btn.ready { animation: castReady 1.1s ease-in-out infinite; }
@keyframes castReady {
  0%, 100% { box-shadow: var(--pix); }
  50% { box-shadow: 0 4px 0 #060912, 0 0 16px rgba(121, 230, 164, 0.7); }
}

/* solved panel (results between rooms) */
.solved-panel {
  display: none;
  animation: panelIn 280ms ease;
}
.solved-panel.show { display: block; }
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sp-title {
  font-weight: 800;
  color: var(--green);
  font-size: 1.05rem;
}
.sp-stars { color: var(--gold-2); font-size: 1.1rem; letter-spacing: 2px; }
.sp-steps {
  margin: 0 0 10px;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.sp-steps li { color: var(--muted); font-size: 0.86rem; }
.sp-next {
  width: 100%;
  padding: 12px;
  border: 3px solid #61d296;
  background: linear-gradient(180deg, #1f8f63, #166848);
  box-shadow: var(--pix);
  font-weight: 800;
  font-size: 1rem;
  transition: transform 120ms ease;
}
.sp-next:hover { transform: translateY(-2px); }

.feedback {
  margin-top: 10px;
  padding: 9px 12px;
  border: 2px solid var(--line);
  background: #0e1730;
  color: var(--muted);
  font-size: 0.9rem;
}
.feedback.good { border-color: var(--green); color: #d6ffe4; background: rgba(31, 111, 82, 0.3); }
.feedback.bad { border-color: var(--red); color: #ffe0e0; background: rgba(136, 46, 59, 0.3); }
.feedback.hint { border-color: var(--gold); color: var(--gold-2); background: rgba(122, 77, 18, 0.28); }

/* ===========================================================
   OVERLAY (pause / result / formula)
   =========================================================== */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 8, 18, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.overlay.show {
  opacity: 1;
  visibility: visible;
}
.overlay-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 22px;
  border: 3px solid var(--gold);
  background: linear-gradient(180deg, #1b2a4c, #131d36);
  box-shadow: 0 14px 0 #060912;
  text-align: center;
  transform: translateY(10px);
  transition: transform 220ms ease;
}
.overlay.show .overlay-card { transform: translateY(0); }
.overlay-card h2 {
  margin: 0 0 6px;
  color: var(--gold-2);
  font-size: 1.5rem;
}
.overlay-card h2.lose { color: var(--red); }
.overlay-card p.lead {
  margin: 0 0 16px;
  color: var(--muted);
}
.result-stars {
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.result-cell {
  padding: 10px;
  border: 2px solid var(--line);
  background: #0e1730;
}
.result-cell span { display: block; color: var(--muted); font-size: 0.76rem; }
.result-cell strong { display: block; color: var(--gold-2); font-size: 1.3rem; }

.overlay-actions {
  display: grid;
  gap: 10px;
}
.btn {
  width: 100%;
  padding: 12px;
  border: 3px solid var(--line);
  background: #1a294b;
  box-shadow: var(--pix);
  font-weight: 700;
  transition: transform 120ms ease, border-color 120ms ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); }
.btn.primary {
  border-color: #61d296;
  background: linear-gradient(180deg, #1f8f63, #166848);
}
.btn.gold {
  border-color: var(--gold);
  background: linear-gradient(180deg, #b8862a, #8a631c);
  color: var(--gold-2);
}
.overlay-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  background: #15203c;
  font-size: 1.1rem;
  line-height: 1;
}

/* settings rows in pause */
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: #0e1730;
  margin-bottom: 8px;
}
.set-row span { color: var(--ink); }
.switch {
  padding: 6px 14px;
  border: 2px solid var(--line);
  background: #15203c;
  font-weight: 700;
  font-size: 0.84rem;
}
.switch.on { border-color: var(--green); color: var(--green); }
.switch.off { border-color: var(--stone-l); color: var(--muted); }

/* formula tome */
.tome-list {
  display: grid;
  gap: 8px;
  text-align: left;
  margin-bottom: 6px;
}
.tome-item {
  border: 2px solid var(--line);
  background: #0e1730;
}
.tome-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: transparent;
  text-align: left;
  font-weight: 700;
  color: var(--gold-2);
}
.tome-q .chev { color: var(--muted); transition: transform 160ms ease; }
.tome-item.open .tome-q .chev { transform: rotate(90deg); }
.tome-a {
  display: none;
  padding: 0 12px 12px;
  text-align: left;
}
.tome-item.open .tome-a { display: block; }
.tome-a p { margin: 0 0 8px; color: var(--muted); font-size: 0.86rem; }
.tome-ex {
  padding: 9px 10px;
  border: 2px solid var(--line);
  background: #101a31;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- scanlines ---------- */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ===========================================================
   Animations
   =========================================================== */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.25; }
}
@keyframes flicker {
  from { transform: translateX(-50%) scale(0.92, 1); }
  to { transform: translateX(-50%) scale(1.08, 0.9); }
}
@keyframes idleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes walkBob {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes shadowPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(0.86); opacity: 0.3; }
}
@keyframes heroLunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(26px) rotate(4deg); }
  100% { transform: translateX(0); }
}
@keyframes heroHurt {
  0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-12px); filter: brightness(1.6) sepia(1) saturate(6) hue-rotate(-30deg); }
  60% { transform: translateX(6px); filter: brightness(1.6) sepia(1) saturate(6) hue-rotate(-30deg); }
}
@keyframes heroCheer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes eyePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.82); opacity: 0.7; }
}
@keyframes hitShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@keyframes sceneShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 4px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-5px, 2px); }
  80% { transform: translate(4px, -2px); }
}
@keyframes flashFade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.5) rotate(-12deg); }
  100% { transform: scale(1); }
}
@keyframes comboBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes plaquePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.06); }
}
@keyframes fxFly {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); opacity: 0; }
}
@keyframes fxFall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; }
}
@keyframes popUp {
  0% { transform: translateX(-50%) translateY(10px) scale(0.6); opacity: 0; }
  25% { transform: translateX(-50%) translateY(0) scale(1.1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-46px) scale(1); opacity: 0; }
}
@keyframes toastIn {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  15%, 78% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes panelIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes hintFlash {
  0%, 100% { box-shadow: 0 3px 0 #060912; }
  50% { box-shadow: 0 0 16px var(--gold); }
}
@keyframes bossCrumble {
  0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translateY(26px) rotate(7deg) scale(0.86); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 720px) {
  .dock-prompt h2 { font-size: 0.96rem; }
  .choice { padding: 10px 10px 10px 34px; font-size: 0.92rem; }
  .hud { grid-template-columns: auto 1fr auto; padding: 6px 8px; }
  .floor-name { font-size: 0.8rem; }
  .stat-chip { font-size: 0.76rem; }
  .icon-btn { width: 32px; height: 32px; }
}

@media (max-width: 470px) {
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 0; }
}

@media (max-width: 420px) {
  .choice small { font-size: 0.72rem; }
  .combo-tag { display: none; }
  .heart { width: 18px; height: 18px; }
}

/* short viewports: keep dock from eating the scene */
@media (max-height: 640px) {
  .hero { bottom: 24%; }
  .dock-prompt p { display: none; }
  .feedback { margin-top: 8px; padding: 7px 10px; font-size: 0.84rem; }
}