@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital@0;1&family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&display=swap');

:root {
  --bg-0: #07101f;
  --bg-1: #0e2038;
  --bg-2: #143055;
  --panel: rgba(10, 24, 46, 0.94);
  --panel-line: rgba(214, 178, 92, 0.45);
  --gold: #e7c46a;
  --gold-strong: #f6e2a6;
  --gold-deep: #a9802f;
  --gold-line: #caa24e;
  --ink: #f3ecd8;
  --muted: #9fb0cc;
  --cyan: #6fe9ff;
  --green: #5fd98a;
  --danger: #ff6f7a;
  --tile-font: 24px;
  --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --round: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  --round-ui: 'Quicksand', 'Baloo 2', system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--round-ui);
  overscroll-behavior: none;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 6px);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(36, 74, 124, 0.55), rgba(36, 74, 124, 0) 62%),
    radial-gradient(140% 60% at 50% 100%, rgba(10, 20, 40, 0.6), rgba(10, 20, 40, 0) 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
  overflow: hidden;
}
/* faint antique-map texture / vignette */
#app::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side at 78% 22%, rgba(120, 90, 40, 0.10), transparent 70%),
    radial-gradient(closest-side at 18% 78%, rgba(120, 90, 40, 0.08), transparent 70%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.55);
}
#app > *:not(.overlay):not(.level-panel):not(.scrim) { position: relative; z-index: 1; }

/* ---------------- Ornate title ---------------- */
.game-title {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 2px 0 6px;
  font-family: var(--serif); font-weight: 700; letter-spacing: 2px;
  font-size: clamp(1.05rem, 5.2vw, 1.5rem);
  text-transform: uppercase;
}
.game-title .title-text {
  background: linear-gradient(180deg, #fff4cf 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.game-title .flo {
  color: var(--gold-line); font-size: 0.7em; position: relative; opacity: 0.9;
}
.game-title .flo::before, .game-title .flo::after {
  content: ''; position: absolute; top: 50%; width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
.game-title .flo:first-child::before { right: 100%; margin-right: 6px; }
.game-title .flo:last-child::after { left: 100%; margin-left: 6px; transform: scaleX(-1); }

/* ---------------- Topbar ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 6px;
}
.icon-btn {
  width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #142c4c, #0a1729);
  border: 1.5px solid var(--gold-line);
  color: var(--gold-strong); font-size: 0.72rem; font-weight: 800; line-height: 1;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }
.back-btn { font-size: 1.3rem; padding-bottom: 3px; }
.sfx-btn { padding: 0; }
.snd-icon { width: 16px; height: 16px; }
.sfx-btn .snd-off { display: none; }
.sfx-btn.is-muted .snd-on { display: none; }
.sfx-btn.is-muted .snd-off { display: block; }

.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #1b3658, #0a1a30);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.5);
  color: var(--gold-strong); font-size: 0.95rem;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.brand-text { min-width: 38px; flex: 1; line-height: 1.12; padding-left: 1px; }
.brand-text strong {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 0.78rem;
  color: var(--gold-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stars { font-size: 0.58rem; color: var(--gold); letter-spacing: 1px; }

.stats { display: flex; gap: 4px; flex: none; }
.stat {
  text-align: center; padding: 3px 5px; border-radius: 8px; min-width: 39px;
  background: linear-gradient(180deg, rgba(28,52,86,0.7), rgba(10,22,40,0.8));
  border: 1px solid var(--gold-line);
}
.stat span { display: block; font-size: 0.46rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.4px; }
.stat strong { font-size: 0.8rem; color: var(--ink); font-weight: 800; }

.actions { display: flex; gap: 4px; flex: none; }

/* ---------------- Board ---------------- */
.board-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 4px 0;
}
.board {
  display: grid;
  gap: 4px;
  border-radius: 20px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(214,178,92,0.10), rgba(214,178,92,0) 24%),
    linear-gradient(160deg, #102a48, #0a182e);
  border: 2px solid var(--gold-line);
  box-shadow:
    inset 0 0 0 4px rgba(8, 18, 34, 0.95),
    inset 0 0 0 5.5px rgba(202, 162, 78, 0.4),
    0 16px 40px rgba(0,0,0,0.6),
    0 0 26px rgba(40, 80, 140, 0.28);
  touch-action: none;
}

.tile {
  position: relative;
  display: grid; place-items: center;
  min-width: 0; min-height: 0;
  border: 1px solid rgba(255, 223, 130, 0.55);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #5b4a2c 0%, #34291c 46%, #1a140e 100%);
  color: var(--gold-strong);
  font-family: var(--round);
  font-size: var(--tile-font);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 0.6px rgba(40, 22, 4, 0.9);
  text-shadow: 0 1px 0 #1a0e02, 0 0 8px rgba(255, 210, 90, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 235, 170, 0.25), inset 0 -4px 0 rgba(0,0,0,0.4), 0 3px 0 #0c0905;
  cursor: pointer;
  user-select: none;
  transition: transform 90ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tile.anchor {
  border-color: #fff0c0;
  box-shadow: inset 0 0 0 2px rgba(255, 225, 150, 0.85), 0 0 16px rgba(255, 200, 90, 0.85);
}
.tile.sel {
  border-color: #fff3cf;
  background: linear-gradient(180deg, #ffe79a 0%, #e3ad42 58%, #9a6f22 100%);
  color: #3a2607;
  -webkit-text-stroke: 0;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 20px rgba(255, 200, 90, 0.95);
  transform: scale(1.06);
  z-index: 2;
}
.tile.found {
  border-color: var(--gold-strong);
  background: linear-gradient(180deg, #ffe9a6, #c69434 55%, #7c5a1f);
  color: #3a2607;
  -webkit-text-stroke: 0px;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 16px rgba(255, 210, 90, 0.55);
}
.tile.wrong {
  border-color: var(--danger);
  background: linear-gradient(180deg, #7a2a30, #3a1418);
  color: #ffd9dc;
  animation: shake 0.34s ease;
}
.tile.hint-start {
  border-color: var(--cyan);
  z-index: 3;
  animation: hint-pulse 0.7s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(111,233,255,0.7), 0 0 14px rgba(111,233,255,0.6); transform: scale(1); }
  50% { box-shadow: inset 0 0 0 3px rgba(214,247,255,0.95), 0 0 26px rgba(96,214,255,0.95); transform: scale(1.09); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); }
}

body.lowercase .tile { text-transform: lowercase; }

/* ---------------- Quest panel ---------------- */
.quest {
  position: relative;
  flex: none;
  border-radius: 20px;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, rgba(14,30,52,0.96), rgba(8,20,38,0.97));
  border: 2px solid var(--gold-line);
  box-shadow: inset 0 0 0 1px rgba(202,162,78,0.18), 0 -8px 24px rgba(0,0,0,0.45);
}
.quest-flourish {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%);
  width: 110px; height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  pointer-events: none;
}
.quest-head { margin-bottom: 10px; text-align: center; }
.question {
  margin: 0; font-family: 'EB Garamond', Georgia, serif; font-size: 1.16rem;
  font-weight: 600; color: var(--ink); line-height: 1.25;
}
.reference-wrap { margin: 5px 0 0; display: flex; align-items: center; justify-content: center; gap: 9px; }
.ref-flo { color: var(--gold-line); font-size: 0.58rem; opacity: 0.85; }
.reference {
  font-family: 'EB Garamond', Georgia, serif; font-size: 0.86rem;
  color: var(--gold); font-style: italic; letter-spacing: 0.4px;
}

.quest-body { display: flex; align-items: stretch; gap: 10px; }
.slots {
  flex: 1;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px 8px;
  max-height: 124px; overflow-y: auto; padding-right: 2px;
}
.slot {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(40,64,100,0.45), rgba(12,26,46,0.6));
  border: 1px solid rgba(202,162,78,0.3);
}
.slot-boxes { display: flex; gap: 3px; }
.box {
  width: 15px; height: 20px;
  display: grid; place-items: center;
  border-radius: 4px;
  border: 1px solid rgba(202,162,78,0.3);
  border-bottom: 2px solid var(--gold-line);
  background: rgba(0,0,0,0.28);
  font-size: 0.76rem; font-weight: 700; color: var(--ink);
  font-family: var(--round);
}
.box.filled { background: linear-gradient(180deg,#ffe9a6,#c69434); color:#3a2607; border-color: #7c5a1f; }
.box.hinted { color: var(--cyan); background: rgba(111,233,255,0.12); border-bottom-color: var(--cyan); }
.slot-len {
  min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  border: 1px solid rgba(202,162,78,0.45);
  font-size: 0.66rem; font-weight: 800; color: var(--gold);
}
.slot.solved { background: linear-gradient(180deg, rgba(231,196,106,0.24), rgba(169,128,47,0.16)); border-color: var(--gold); }
.slot.solved .slot-len { color: var(--green); border-color: var(--green); font-size: 0.8rem; }
.slot.just-solved { animation: pop 0.5s ease; }
.slot.hinted { border-color: var(--cyan); box-shadow: 0 0 12px rgba(111,233,255,0.5); }
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);} }

body.lowercase .box { text-transform: lowercase; }

.hint-btn {
  flex: none; align-self: stretch; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid #fff0c0; border-radius: 14px; padding: 8px 14px;
  background: linear-gradient(180deg, #ffe9a0 0%, #e3b54e 55%, #b9852e 100%);
  color: #3a2607; font-family: var(--serif); font-weight: 700; font-size: 0.9rem; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 5px 0 #7c5a1f, 0 9px 16px rgba(0,0,0,0.45);
}
.hint-btn::after { content: '💡'; font-size: 1.15rem; line-height: 1; }
.hint-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 0 #7c5a1f; }
.hint-btn:disabled { filter: grayscale(0.55) brightness(0.85); box-shadow: none; cursor: default; }

/* ---------------- Decorative footer ---------------- */
.game-footer { flex: none; display: flex; justify-content: center; padding: 6px 0 0; }
.game-footer img { width: 260px; height: auto; opacity: 0.95; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }

/* ---------------- Level select ---------------- */
.scrim {
  position: absolute; inset: 0; z-index: 7; display: none; border: 0;
  background: rgba(0,0,0,0.5);
}
body.levels-open .scrim { display: block; }
.level-panel {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 8;
  max-height: 60%;
  border-radius: 22px; padding: 12px;
  background: var(--panel); border: 1px solid var(--panel-line);
  transform: translateY(calc(100% + 16px));
  transition: transform 220ms cubic-bezier(0.2,0.9,0.3,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
}
body.levels-open .level-panel { transform: translateY(0); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-label { display:block; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.panel-head strong { color: var(--gold-strong); font-size: 0.9rem; }
.level-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  max-height: 40vh; overflow-y: auto; padding-right: 2px;
}
.level-button {
  position: relative; aspect-ratio: 1; min-width: 0;
  border: 1px solid rgba(255, 226, 140, 0.18); border-radius: 12px;
  background: rgba(255,255,255,0.05); color: var(--muted);
  font-weight: 800; font-size: 0.82rem; cursor: pointer;
}
.level-button.active { border-color: var(--gold); color: var(--gold-strong); background: rgba(255,210,90,0.16); }
.level-button.cleared { color: #d9fbef; border-color: rgba(109,255,143,0.5); background: rgba(109,255,143,0.14); }
.level-button.cleared::after {
  content: '✓'; position: absolute; top: -4px; right: -4px;
  width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: #06241a;
  font-size: 0.6rem; font-weight: 900; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.level-button.locked {
  color: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: not-allowed;
}
.level-button.locked::after {
  content: '🔒'; position: absolute; top: -5px; right: -5px;
  font-size: 0.7rem; filter: grayscale(0.3);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* ---------------- Overlays ---------------- */
.overlay {
  position: absolute; inset: 0; z-index: 9; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: linear-gradient(180deg, rgba(6,8,18,0.7), rgba(6,8,18,0.92));
  backdrop-filter: blur(4px);
}
.overlay.show { display: flex; }

/* The win screen reserves the bottom of the screen for the app's native ad
   (a 300x250 Flutter overlay). Reserving this space keeps the result card in the
   upper area so the ad always sits UNDER it and never covers the popup. */
#resultOverlay {
  align-items: center;
  padding-bottom: 300px;
  overflow-y: auto;
}
.overlay-card {
  width: min(380px, 100%); text-align: center;
  border-radius: 24px; padding: 26px 22px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--panel-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.overlay-mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff3c4, var(--gold-deep));
  color: #4a3208; font-size: 28px;
}
.overlay-card h1 { margin: 6px 0 10px; font-size: 1.7rem; color: var(--gold-strong); }
.overlay-card h2 { margin: 4px 0 6px; font-size: 1.5rem; color: var(--gold-strong); }
.lead { margin: 0 0 18px; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.result-kicker { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.result-stars { margin: 4px 0 8px; font-size: 1.3rem; color: var(--gold); letter-spacing: 2px; }
.result-score {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px;
}
.result-score span { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }
.result-score strong { font-size: 1.6rem; color: var(--gold-strong); }
.btn-row { display: flex; gap: 10px; }
.primary-btn, .secondary-btn {
  flex: 1; border: 0; border-radius: 14px; padding: 13px 16px; font-weight: 800; font-size: 0.95rem; cursor: pointer;
}
.primary-btn {
  background: radial-gradient(circle at 30% 20%, #fff0bd, var(--gold-deep)); color: #4a3208;
  box-shadow: 0 5px 0 #7c5a1f, 0 10px 18px rgba(0,0,0,0.45);
}
.primary-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #7c5a1f; }
.secondary-btn { background: rgba(255,255,255,0.08); color: var(--ink); border: 1px solid rgba(255,255,255,0.14); }

/* ---------------- How to play (start screen) ---------------- */
.overlay-card.howto { width: min(400px, 100%); max-height: 92vh; overflow-y: auto; }
.howto-visual {
  margin: 6px auto 14px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 226, 140, 0.18);
}
.howto-visual svg { width: 100%; height: auto; display: block; }
.howto-steps { text-align: left; margin-bottom: 18px; }
.howto-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.86rem; color: var(--ink); line-height: 1.35; margin-bottom: 9px;
}
.howto-row b { color: var(--gold-strong); font-weight: 800; }
.howto-row .num {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: #3a2607; font-size: 0.7rem; font-weight: 900;
}
.howto-row.tip .num { background: var(--cyan); color: #04323d; }
.dir-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px 29px;
}
.dir-chips span {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; font-size: 1rem; font-weight: 900;
  color: var(--green);
  background: rgba(109, 255, 143, 0.12);
  border: 1px solid rgba(109, 255, 143, 0.35);
}

/* ---------------- Sparks ---------------- */
.spark {
  position: fixed; z-index: 20; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, var(--gold)); pointer-events: none;
  transform: translate(-50%, -50%);
  animation: spark 0.65s ease-out forwards;
}
@keyframes spark {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

.toast {
  position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%);
  z-index: 12; padding: 8px 16px; border-radius: 999px; pointer-events: none;
  background: rgba(0,0,0,0.8); color: var(--gold-strong); font-weight: 700; font-size: 0.9rem;
  opacity: 0; transition: opacity 0.2s ease;
}
.toast.show { opacity: 1; }

/* ---------------- Timer ---------------- */
.timer {
  position: relative;
  height: 30px;
  margin: 4px 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #050d18, #0a1626);
  border: 2px solid var(--gold-line);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.timer-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4fd987 0%, #8fe07a 55%, #f1d36a 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 4px rgba(0,0,0,0.25);
  transition: width 0.25s linear, background 0.3s ease;
}
.timer.warn .timer-fill { background: linear-gradient(90deg, #f1c057, #ff9a4d); }
.timer.danger .timer-fill { background: linear-gradient(90deg, #ff6f7a, #ff3d57); }
.timer.danger { animation: timer-flash 0.8s ease-in-out infinite; }
@keyframes timer-flash { 0%,100%{ box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 0 0 rgba(255,80,90,0); } 50%{ box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 0 14px rgba(255,80,90,0.7); } }
.timer-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 0.92rem; font-weight: 700; color: #1a1208; letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* ---------------- Native ad slot (win) ---------------- */
.native-ad {
  margin-top: 16px; min-height: 84px;
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  color: var(--muted);
}
.ad-label { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.ad-body { font-size: 0.8rem; }

.overlay-mark.fail { background: radial-gradient(circle at 30% 25%, #ffd0d4, #b93a44); color: #3a0a0e; }

/* ---------------- Win celebration ---------------- */
.overlay.show .overlay-card.result { animation: result-in 0.5s cubic-bezier(0.2,1.2,0.3,1) both; }
@keyframes result-in {
  0% { opacity: 0; transform: translateY(24px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.overlay.show .result-stars { animation: stars-pop 0.6s ease 0.15s both; }
@keyframes stars-pop { 0%{ transform: scale(0.4); opacity:0; } 60%{ transform: scale(1.2); } 100%{ transform: scale(1); opacity:1; } }

.confetti {
  position: fixed; top: -12px; z-index: 30; width: 9px; height: 14px; border-radius: 2px;
  pointer-events: none; opacity: 0.95;
  animation: confetti-fall var(--life, 1800ms) ease-in forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(112vh) rotate(var(--spin, 540deg)); opacity: 0.2; }
}

@media (max-height: 680px) {
  .question { font-size: 1rem; }
  .slots { max-height: 96px; }
  .box { height: 17px; }
  .game-footer { display: none; }
  .game-title { font-size: 1.05rem; padding-bottom: 3px; }
}