@font-face {
  font-family: 'Naskh';
  src: url('assets/font/naskh-700.woff2') format('woff2');
  font-weight: 700;
}

:root {
  --navy: #1E3A5F; --deep: #0D1B2A; --ink: #080F1A;
  --teal: #0D9488; --orange: #EA580C; --gold: #FACC15;
  --good: #22C55E; --bad: #EF4444;
  --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.14); --muted: rgba(255,255,255,.62);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% -10%, #1E3A5F 0%, #0D1B2A 55%, #080F1A 100%);
  color: white; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button.plain { background: none; padding: 0; }
input, select { font: inherit; user-select: text; -webkit-user-select: text; }

.ar { font-family: 'Naskh', 'Geeza Pro', 'Traditional Arabic', serif; font-weight: 700; direction: rtl; }
.wordmark { font-weight: 800; letter-spacing: .14em; color: var(--orange); white-space: nowrap; }

#app { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 3vw; }
.screen { width: 100%; max-width: 1150px; text-align: center; animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1 { font-size: clamp(1.8rem, 5.5vh, 3.2rem); margin: .35em 0 .2em; line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 4vh, 2.2rem); margin: .3em 0; }
.sub { color: var(--muted); font-size: clamp(1rem, 2.5vh, 1.3rem); margin: 0 0 1em; }

.big-btn {
  background: var(--orange); padding: .75em 2.1em; border-radius: 999px; font-weight: 900;
  font-size: clamp(1.15rem, 3.4vh, 1.8rem); box-shadow: 0 8px 0 #9A3412; transition: transform .08s;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 #9A3412; }
.big-btn.teal { background: var(--teal); box-shadow: 0 8px 0 #115E59; }
.ghost { background: transparent; border: 2px solid var(--line); padding: .6em 1.4em; border-radius: 999px; font-weight: 700; color: var(--muted); }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.row { display: flex; justify-content: center; gap: 1.5vw; flex-wrap: wrap; align-items: center; }

/* ── Attract screen and leaderboards ── */
.attract-top { display: flex; align-items: center; justify-content: center; gap: 2vw; margin-top: 1.5vh; }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vw; margin: 3vh 0; text-align: left; }
.board { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1em 1.2em; }
.board h3 { margin: 0 0 .5em; font-size: 1.15rem; color: var(--gold); }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: .6em; padding: .34em 0; font-size: 1.08rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.board li:last-child { border-bottom: 0; }
.board li.empty { color: var(--muted); font-style: italic; }
.board li.me { color: var(--gold); font-weight: 900; }
.board .rank { width: 1.8em; text-align: center; font-weight: 900; }
.board .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who small.b { font-size: .75em; letter-spacing: -.1em; }
.board .pts { font-weight: 900; font-variant-numeric: tabular-nums; }

.sync-line { color: rgba(255,255,255,.4); font-size: .85rem; margin-top: 2vh; }

/* ── Setup ── */
.name-input {
  font-size: clamp(1.6rem, 5vh, 2.6rem); font-weight: 800; text-align: center; width: min(560px, 90%);
  padding: .4em .6em; border-radius: 16px; border: 3px solid var(--teal); background: rgba(255,255,255,.95); color: var(--deep); outline: none;
}
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; margin: 3vh auto; max-width: 1000px; }
.level-card {
  background: var(--card); border: 3px solid var(--line); border-radius: 24px; padding: 3.5vh 1em 2.5vh;
  transition: transform .12s, border-color .12s, box-shadow .12s; animation: rise .4s ease-out both;
  display: flex; flex-direction: column; align-items: center; gap: .3em;
}
.level-card:hover { border-color: var(--c); transform: translateY(-4px); box-shadow: 0 10px 30px -10px var(--c); }
.level-card .icon { font-size: 3.4rem; }
.level-card b { font-size: 1.6rem; color: var(--c); }
.level-card > span { color: var(--muted); font-size: 1.05rem; }
.level-card em { font-style: normal; color: var(--c); letter-spacing: .25em; margin-top: .4em; }
.level-card em span { color: rgba(255,255,255,.15); }

/* ── HUD ── */
.hud { width: 100%; max-width: 1150px; display: flex; align-items: center; justify-content: space-between; gap: 1em; font-weight: 900; font-size: 1.25rem; }
.hud .score { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 8em; text-align: right; }
.hearts { min-width: 8em; text-align: left; font-size: 1.5rem; letter-spacing: .1em; }
.heart { display: inline-block; transition: filter .3s, opacity .3s; }
.heart.lost { filter: grayscale(1); opacity: .25; }
.heart.pop { animation: heartpop .6s; }
@keyframes heartpop { 30% { transform: scale(1.6); } 100% { transform: scale(1); } }
.round-pill { background: var(--card); border: 1px solid var(--line); padding: .3em 1em; border-radius: 999px; font-size: 1rem; }

/* ── Trail map ── */
.map { position: relative; width: 100%; max-width: 1150px; height: min(56vh, 480px); margin: 2vh 0 3vh; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail-bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 10; stroke-dasharray: 3 18; stroke-linecap: round; }
.trail-done { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100 200; opacity: .85; transition: stroke-dashoffset 1.4s ease-in-out; }
.node { position: absolute; transform: translate(-50%, -42px); display: flex; flex-direction: column; align-items: center; }
.node .disc {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.8rem, 5vh, 2.6rem); background: var(--c); box-shadow: 0 7px 0 rgba(0,0,0,.35); position: relative;
}
.node.boss { transform: translate(-50%, -54px); }
.node.boss .disc { width: 108px; height: 108px; font-size: 3.2rem; }
.node.locked .disc { background: #1F2937; filter: grayscale(1); opacity: .7; font-size: 1.6rem; }
.node.current { cursor: pointer; z-index: 2; }
.node.current .disc { box-shadow: 0 7px 0 rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.12), 0 0 40px var(--c); }
.node.current .disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--c); animation: ring 1.4s infinite; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
.go-pill { position: absolute; top: 50%; left: 100%; margin: -14px 0 0 10px; background: white; color: var(--ink); font-weight: 900; font-size: .8rem; letter-spacing: .15em; padding: 5px 12px; border-radius: 8px; animation: bob 1.2s ease-in-out infinite; white-space: nowrap; }
.node-stars { margin-top: 10px; font-size: .95rem; }
.node-stars span { filter: grayscale(1); opacity: .2; }
.node-stars span.on { filter: none; opacity: 1; }
.node-label { margin-top: 4px; text-align: center; white-space: nowrap; }
.node-label b { display: block; font-size: 1rem; }
.node-label small { font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.node.locked .node-label b { color: rgba(255,255,255,.4); }
.walker { position: absolute; transform: translate(-50%, calc(-100% - 40px)); transition: left 1.4s ease-in-out, top 1.4s ease-in-out; z-index: 3; pointer-events: none; }

/* ── Questions ── */
.timebar { width: 100%; max-width: 1150px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 1.2vh 0 1.5vh; }
.timebar div { width: 100%; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .1s linear; }
.timebar.low div { background: var(--bad); }
.screen.q { position: relative; }
.q-mascot { position: absolute; left: 0; top: 0; }
.context { display: inline-block; background: var(--card); border: 1px solid var(--line); padding: .3em 1em; border-radius: 999px; font-weight: 800; margin-bottom: .6em; }
.prompt { font-size: clamp(1.25rem, 3.6vh, 1.9rem); font-weight: 800; margin: 0 auto 1vh; max-width: 860px; }
.prompt-glyph { font-size: clamp(4.5rem, 16vh, 9rem); line-height: 1.25; color: var(--gold); }
.prompt-phrase { font-size: clamp(2rem, 7vh, 3.6rem); line-height: 1.6; color: var(--gold); }
.prompt-text { font-size: clamp(1.1rem, 3vh, 1.5rem); color: var(--gold); font-style: italic; max-width: 820px; margin: 0 auto .4em; }
.play-sound { background: var(--teal); width: clamp(100px, 16vh, 150px); height: clamp(100px, 16vh, 150px); border-radius: 50%; font-size: clamp(2.8rem, 7vh, 4.2rem); box-shadow: 0 8px 0 #115E59; margin: .5vh 0 2.5vh; }
.play-sound.playing, .small-sound.playing { animation: pulse .7s ease-in-out infinite; }
.small-sound { background: var(--teal); border-radius: 999px; padding: .35em 1.1em; font-weight: 800; margin: .2em 0 1.8vh; }

.options { display: flex; justify-content: center; gap: 1.8vw; flex-wrap: wrap; direction: rtl; }
.opt {
  background: white; color: var(--deep); border-radius: 22px; min-width: clamp(110px, 19vh, 170px); height: clamp(110px, 21vh, 180px);
  font-size: clamp(3.8rem, 12vh, 6.5rem); line-height: 1; padding: 0 .3em .15em; box-shadow: 0 8px 0 #94A3B8; transition: transform .08s;
}
.opt.img { padding: 10px; width: clamp(140px, 25vh, 220px); }
.opt.img img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.opt:active { transform: translateY(5px); box-shadow: 0 3px 0 #94A3B8; }
.opt.good, .choice.good { background: var(--good); box-shadow: 0 8px 0 #15803D; animation: bounce .4s; }
.opt.good { color: white; } .opt.img.good { background: #BBF7D0; outline: 6px solid var(--good); }
.opt.bad, .choice.bad { background: var(--bad); color: white; box-shadow: 0 8px 0 #B91C1C; animation: shake .35s; }
.opt.img.bad { background: #FECACA; outline: 6px solid var(--bad); }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes bounce { 40% { transform: scale(1.08); } }

.choices { display: grid; gap: 1.4vh; max-width: 820px; margin: 0 auto; }
.choice { background: white; color: var(--deep); font-weight: 800; font-size: clamp(1.05rem, 2.8vh, 1.45rem); padding: .75em 1em; border-radius: 18px; box-shadow: 0 6px 0 #94A3B8; text-align: center; }
.choice.good { color: white; }
.choice.phrase { font-size: clamp(1.6rem, 4.6vh, 2.4rem); padding: .3em 1em .45em; }
.gone { opacity: .12 !important; transform: scale(.88); pointer-events: none; transition: opacity .35s, transform .35s; }
.hint-btn { margin-top: 1.6vh; background: rgba(250,204,21,.12); border: 2px solid rgba(250,204,21,.45); color: var(--gold); padding: .45em 1.3em; border-radius: 999px; font-weight: 800; font-size: 1.05rem; }
.hint-btn small { opacity: .75; font-weight: 700; margin-left: .3em; }
.hint-btn:disabled { opacity: .35; cursor: default; }
.help-row { margin-top: 1.4vh; gap: 1vw; }
.help-row .hint-btn { margin-top: 0; }
.cadet-btn { background: rgba(45,212,191,.12); border-color: rgba(45,212,191,.5); color: #5EEAD4; }
.clue { max-width: 860px; margin: 1.4vh auto 0; background: rgba(250,204,21,.1); border: 1px solid rgba(250,204,21,.4); color: #FDE68A;
  border-radius: 14px; padding: .6em 1em; font-size: clamp(.95rem, 2.4vh, 1.15rem); line-height: 1.4; animation: rise .3s ease-out; }
.feedback.ask { color: #5EEAD4; }
.timebar.listening div { background: #93C5FD; }
.timebar.paused div { background: #5EEAD4; animation: pulse 1.2s ease-in-out infinite; }
.reveal-img { height: 2.4em; vertical-align: middle; background: white; border-radius: 8px; padding: 2px 6px; }

.feedback { min-height: 2.6em; margin-top: 1.6vh; font-weight: 800; font-size: 1.25rem; }
.feedback.good { color: var(--good); } .feedback.bad { color: #FCA5A5; }
.feedback .ar { font-size: 1.4em; color: white; }
.float-pts { position: fixed; font-weight: 900; font-size: 2rem; color: var(--gold); pointer-events: none; animation: floatup .9s ease-out forwards; z-index: 20; }
@keyframes floatup { to { transform: translateY(-80px); opacity: 0; } }

/* ── Stop complete ── */
.big-stars { font-size: clamp(3.5rem, 11vh, 6rem); letter-spacing: .15em; }
.big-stars span { display: inline-block; filter: grayscale(1); opacity: .2; }
.big-stars span.on { filter: none; opacity: 1; animation: starpop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* ── Badges ── */
.badge-toast {
  position: fixed; top: 3vh; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: .8em;
  background: linear-gradient(135deg, #F59E0B, #EA580C); padding: .7em 1.6em .7em 1em; border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: toastin .5s cubic-bezier(.3,1.6,.5,1);
}
.badge-toast.out { animation: toastout .45s ease-in forwards; }
.badge-toast .big { font-size: 2.6rem; animation: spin 1s ease-out; }
.badge-toast small { display: block; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.badge-toast b { font-size: 1.4rem; }
@keyframes toastin { from { transform: translate(-50%, -150%) scale(.6); } to { transform: translate(-50%, 0) scale(1); } }
@keyframes toastout { to { transform: translate(-50%, -150%); opacity: 0; } }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(720deg); } }

.shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1vw; margin: 2vh auto 0; max-width: 1050px; }
.shelf-badge { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .7em .4em; animation: rise .4s ease-out both; }
.shelf-badge span { font-size: 2.2rem; display: block; filter: grayscale(1); opacity: .25; }
.shelf-badge b { display: block; font-size: .9rem; color: rgba(255,255,255,.4); }
.shelf-badge small { color: rgba(255,255,255,.35); font-size: .72rem; }
.shelf-badge.got { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.6); }
.shelf-badge.got span { filter: none; opacity: 1; animation: starpop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: inherit; }
.shelf-badge.got b { color: var(--gold); }
.shelf-badge.got small { color: var(--muted); }

/* ── Confetti ── */
.confetti { position: fixed; top: -12px; width: 10px; height: 14px; border-radius: 2px; z-index: 30; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }

/* ── Results ── */
.final-score { font-size: clamp(3rem, 10vh, 5.5rem); font-weight: 900; color: var(--gold); line-height: 1; margin: .5vh 0; }
.stats { display: flex; justify-content: center; gap: 1.5vw; margin: 1.5vh 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .6em 1.3em; }
.stat b { display: block; font-size: 1.6rem; }
.stat span { color: var(--muted); font-size: .9rem; }

/* ── Raffle form ── */
.form { max-width: 620px; margin: 0 auto; text-align: left; display: grid; gap: 1.6vh; }
.form label { font-weight: 800; display: grid; gap: .35em; }
.form input[type=text], .form input[type=tel], .form select {
  font-size: 1.3rem; padding: .55em .8em; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,255,255,.95); color: var(--deep);
}
.form .check { display: flex; gap: .7em; align-items: flex-start; font-weight: 600; color: var(--muted); }
.form .check input { width: 1.4em; height: 1.4em; margin-top: .1em; accent-color: var(--teal); }
.form .err { color: #FCA5A5; font-weight: 800; min-height: 1.3em; }
.fine { color: var(--muted); font-size: .9rem; }

/* ── Staff panel ── */
.staff { position: fixed; inset: 0; background: rgba(8,15,26,.94); display: flex; align-items: center; justify-content: center; z-index: 50; }
.staff .box { background: var(--deep); border: 1px solid var(--line); border-radius: 20px; padding: 2em; width: min(620px, 92vw); text-align: center; }
.staff .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: 1.2em; }
.staff .grid button { background: var(--card); border: 1px solid var(--line); padding: .9em; border-radius: 14px; font-weight: 800; }
.staff .grid button.danger { border-color: var(--bad); color: #FCA5A5; }
.staff .winner { font-size: 1.6rem; color: var(--gold); font-weight: 900; margin-top: 1em; min-height: 1.3em; }

/* ── Kashafa summit emblem ── */
.peaks { overflow: visible; }
.peaks .m { transform-box: fill-box; transform-origin: 50% 100%; animation: peakrise .8s cubic-bezier(.3,1.5,.5,1) both; }
.peaks .m1 { animation-delay: .05s; } .peaks .m2 { animation-delay: .25s; } .peaks .m3 { animation-delay: .15s; }
.peaks .trail { animation: march 1.6s linear infinite, fadein .4s .8s both; }
.peaks .flagpole { transform-box: fill-box; transform-origin: 50% 100%; animation: plant .5s 1s cubic-bezier(.3,1.6,.5,1) both; }
.peaks .flag { transform-box: fill-box; transform-origin: 0 50%; animation: wave 1.4s ease-in-out infinite; }
.peaks .spark { transform-box: fill-box; transform-origin: center; animation: twinkle2 2.4s ease-in-out infinite; }
.peaks .s2 { animation-delay: .8s; } .peaks .s3 { animation-delay: 1.6s; }
@keyframes peakrise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes plant { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes march { to { stroke-dashoffset: -14; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.86); } }
@keyframes twinkle2 { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1.1); opacity: 1; } }

/* ── Citron ── */
.citron { overflow: visible; }
.citron-idle { animation: bob 2.2s ease-in-out infinite; }
.citron-happy { animation: hop .7s ease-out; }
.citron-cheer { animation: hop 1s ease-out infinite; }
.citron-sad { animation: wobble .8s; }
.citron .spark { animation: twinkle .9s infinite; } .citron .spark.s2 { animation-delay: .3s; }
.citron .drop { animation: drip 1.2s infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes hop { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 80% { transform: translateY(-5px); } }
@keyframes wobble { 25% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes twinkle { 50% { opacity: .3; } }
@keyframes drip { from { transform: translateY(-4px); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(6px); opacity: 0; } }

@media (max-height: 720px) {
  .board li { padding: .22em 0; font-size: .98rem; }
  .shelf-badge small { display: none; }
}

.walker.at-boss { transform: translate(-50%, calc(-100% - 52px)); }

/* ── Phones (the game opened from the QR code) ── */
@media (max-width: 700px) {
  body { overflow-y: auto; }
  #app { height: auto; min-height: 100%; justify-content: flex-start; padding: 2.5vh 4vw 4vh; }
  h1 { font-size: 1.6rem; }
  .sub { font-size: .95rem; }
  .big-btn { font-size: 1.15rem; padding: .7em 1.6em; }
  .attract-top { flex-direction: column; gap: .6rem; }
  .attract-top > div { text-align: center !important; }
  .boards { grid-template-columns: 1fr; gap: 1.2vh; margin: 2vh 0 2.5vh; }
  .board { padding: .7em 1em; }
  .board li { font-size: .95rem; padding: .25em 0; }
  .levels { grid-template-columns: 1fr; gap: 1.2vh; margin: 2vh auto; }
  .level-card { padding: 1.6vh 1em; }
  .level-card .icon { font-size: 2.2rem; }
  .level-card b { font-size: 1.3rem; }
  .hud { font-size: .95rem; }
  .hearts { font-size: 1.05rem; min-width: auto; }
  .hud .score { min-width: auto; }
  .round-pill { font-size: .78rem; padding: .25em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
  .map { height: 64vh; margin: 2vh 0 2.5vh; }
  .node { transform: translate(-50%, -30px); }
  .node .disc { width: 60px; height: 60px; font-size: 1.6rem; }
  .node.boss { transform: translate(-50%, -38px); }
  .node.boss .disc { width: 76px; height: 76px; font-size: 2.2rem; }
  .node-stars { margin-top: 6px; font-size: .75rem; }
  .node .node-label { position: absolute; top: 12px; width: 34vw; white-space: normal; }
  .node.lab-r .node-label { left: calc(100% + 10px); text-align: left; }
  .node.lab-l .node-label { right: calc(100% + 10px); text-align: right; }
  .node-label b { font-size: .88rem; }
  .node-label small { font-size: .62rem; }
  .go-pill { display: none; }
  .walker { transform: translate(-50%, calc(-100% - 26px)); }
  .walker.at-boss { transform: translate(-50%, calc(-100% - 34px)); }
  .walker svg { width: 52px; height: 52px; }
  .q-mascot { display: none; }
  .prompt { font-size: 1.15rem; }
  .prompt-glyph { font-size: 4.2rem; }
  .prompt-phrase { font-size: 1.8rem; }
  .play-sound { width: 90px; height: 90px; font-size: 2.6rem; }
  .options { gap: 3vw; }
  .opt { min-width: 26vw; height: 92px; font-size: 3.2rem; border-radius: 16px; }
  .opt.img { width: 42vw; height: 92px; padding: 6px; }
  .choice { font-size: 1rem; padding: .7em .8em; }
  .choice.phrase { font-size: 1.45rem; }
  .hint-btn { font-size: .9rem; }
  .feedback { font-size: 1.05rem; }
  .final-score { font-size: 3.2rem; }
  .stats { flex-wrap: wrap; gap: 2vw; }
  .stat { padding: .5em .9em; }
  .stat b { font-size: 1.2rem; }
  .shelf { grid-template-columns: repeat(3, 1fr); gap: 2vw; }
  .shelf-badge span { font-size: 1.7rem; }
  .shelf-badge small { display: none; }
  .badge-toast { width: max-content; max-width: 92vw; }
}

/* ── Slideshow (TV between boards; laptops when idle) ── */
.show { position: fixed; inset: 0; z-index: 45; background: #080F1A; opacity: 0; transition: opacity .8s ease; cursor: pointer; }
.show.on { opacity: 1; }
.show .layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.show .layer.on { opacity: 1; }
.slide { position: absolute; inset: 0; overflow: hidden; }
.slide.photo .bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.45); }
.slide.photo .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kenburns 8s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.slide .cap { position: absolute; left: 3vw; bottom: 4vh; right: 30vh; background: linear-gradient(90deg, rgba(8,15,26,.85), rgba(8,15,26,0)); padding: 2vh 3vw 2vh 2vw; border-radius: 2vh; }
.slide .cap .wordmark { display: block; margin-bottom: .8vh; }
.slide .cap b { font-size: 4.4vh; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.qr-mini { position: absolute; right: 3vw; bottom: 4vh; background: white; color: var(--deep); border-radius: 1.8vh; padding: 1vh; text-align: center; box-shadow: 0 1vh 4vh rgba(0,0,0,.5); }
.qr-mini img { width: 17vh; height: 17vh; display: block; }
.qr-mini span { display: block; font-weight: 900; font-size: 2.2vh; margin-top: .4vh; }
.slide.promo { display: flex; align-items: center; justify-content: center; gap: 6vw; padding: 0 6vw;
  background: radial-gradient(circle at 30% 20%, #1E3A5F 0%, #0D1B2A 55%, #080F1A 100%); }
.promo-text { max-width: 55vw; text-align: left; animation: rise .8s ease-out both; }
.promo-text .emoji { font-size: 9vh; margin-top: 2vh; }
.promo-text h2 { font-size: 7vh; line-height: 1.08; margin: 1vh 0 2vh; }
.promo-text p { font-size: 3.4vh; color: var(--muted); margin: 0; }
.qr-big { background: white; color: var(--deep); border-radius: 3vh; padding: 2.4vh; text-align: center; box-shadow: 0 2vh 6vh rgba(0,0,0,.5); animation: rise .8s .2s ease-out both; }
.qr-big img { width: 40vh; height: 40vh; display: block; }
.qr-big b { display: block; font-size: 3vh; margin-top: 1.4vh; max-width: 40vh; }
.qr-big small { display: block; font-size: 2.2vh; color: #475569; margin-top: .4vh; }
.tap-pill { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--orange); color: white; font-weight: 900;
  font-size: 3.4vh; padding: 1.4vh 4vh; border-radius: 999px; box-shadow: 0 1vh 0 #9A3412; animation: pulse 1.6s ease-in-out infinite; white-space: nowrap; }
@media (max-width: 700px) {
  .slide.promo { flex-direction: column; gap: 3vh; padding: 6vh 6vw; }
  .promo-text { max-width: none; text-align: center; }
  .promo-text h2 { font-size: 4.2vh; }
  .qr-big img { width: 28vh; height: 28vh; }
  .slide .cap { right: 3vw; bottom: 26vh; }
  .slide .cap b { font-size: 3vh; }
}