:root {
  --stage-1:#2C2358; --stage-2:#4A2E6B;
  --ink:#221C33; --card:#FFFDF7; --on-dark:#F4EFFF; --muted:#B7AEDA;
  --gold:#FFC247; --good:#36C28E; --bad:#FF6B6B; --cool:#7C8CFF; --maze-wall:#221C33;
  --shadow:0 2px 0 rgba(0,0,0,.12), 0 12px 30px rgba(20,12,40,.35);
  --pulse-dur:2.2s; --r:18px; --cx:0px; --cy:0px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* B&W high-contrast = DARK bg, light text (switched) */
:root[data-theme="contrast"] {
  --ink:#fff; --card:#000; --on-dark:#fff; --muted:#bbb;
  --gold:#fff; --good:#fff; --bad:#fff; --cool:#fff; --maze-wall:#fff;
  --shadow:0 0 0 2px #fff;
}
/* Night: dim warm low-blue */
:root[data-theme="night"] {
  --ink:#E7DEC9; --card:#241F17; --on-dark:#D8CFB8; --muted:#8C8268;
  --gold:#B8893F; --good:#6FA07A; --bad:#C0796E; --cool:#7E7CA8; --maze-wall:#5A4F38;
  --shadow:0 1px 0 rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; color:var(--on-dark); font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body { background:radial-gradient(130% 100% at 50% -10%, var(--stage-2) 0%, var(--stage-1) 70%); transition:background .8s ease; }
:root[data-theme="contrast"] body { background:#000; }
:root[data-theme="night"] body { background:#161109; }

body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0; background:radial-gradient(60% 50% at 50% 40%, rgba(255,194,71,.10), transparent 70%); }
:root[data-glow="1"] body::after { animation:breathe var(--pulse-dur) ease-in-out infinite; }
:root[data-glow="1"][data-bglow="low"] body::after { animation-duration:4s; opacity:.5; }
@keyframes breathe { 50% { opacity:1; } }

/* dyslexia-friendly */
.app.dyslexia { --font:"OpenDyslexic","Comic Sans MS","Verdana","Tahoma",sans-serif; letter-spacing:.03em; word-spacing:.12em; line-height:1.6; }
.app.dyslexia .prompt, .app.dyslexia .choices button { letter-spacing:.04em; }

.app { position:relative; z-index:1; max-width:480px; margin:0 auto; padding:16px 18px 34px; min-height:100vh; display:flex; flex-direction:column; }
.app.intense:not(.no-glow) { --gold:#FFB02E; } .app.blazing:not(.no-glow) { --gold:#FF8C42; }
.app.shake:not(.no-shake) { animation:shake .22s ease; }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.app.comfort, .app.comfort * { animation:none !important; transition:none !important; }

.screen { display:none; flex:1; flex-direction:column; }
.screen.active { display:flex; animation:rise .25s ease; }
@keyframes rise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.screen-title { font-family:"Fredoka","Fraunces",serif; font-size:26px; text-align:center; margin:4px 0 12px; color:var(--gold); }

.brand { text-align:center; margin:14px 0 4px; }
.brand .mark { font-family:"Fredoka","Fraunces",system-ui,sans-serif; font-weight:600; font-size:clamp(42px,12vw,72px); line-height:.95; color:var(--gold); text-shadow:0 3px 0 rgba(0,0,0,.18); }
:root[data-theme="contrast"] .brand .mark { text-shadow:none; }
.brand .tag { color:var(--muted); margin-top:6px; font-size:15px; }
.best-line { text-align:center; font-size:14px; margin-top:10px; } .best-line b { color:var(--gold); }
.start-actions { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.row2 { display:flex; gap:8px; } .row2 .ghost { flex:1; font-size:14px; padding:12px 6px; }

button.primary, button.ghost { font-family:inherit; font-weight:700; font-size:17px; padding:15px 18px; border-radius:14px; cursor:pointer; border:none; box-shadow:var(--shadow); transition:transform .06s ease; }
button.primary { background:var(--gold); color:#4a3209; }
:root[data-theme="contrast"] button.primary { background:#fff; color:#000; }
:root[data-theme="night"] button.primary { color:#1a1206; }
button.primary.cool { background:var(--cool); color:#fff; } :root[data-theme="contrast"] button.primary.cool { background:#fff; color:#000; }
button.ghost { background:transparent; color:var(--on-dark); box-shadow:none; border:1.5px solid currentColor; opacity:.85; }
button.primary:active, button.ghost:active { transform:translateY(2px); }
button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* settings */
.set-scroll { overflow-y:auto; flex:1; padding-right:2px; }
.set-group { margin-bottom:14px; }
.set-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.tog { display:block; width:100%; text-align:left; font-family:inherit; font-weight:600; font-size:15px; padding:12px 14px; margin-bottom:7px; border-radius:11px; border:1.5px solid rgba(255,255,255,.32); background:rgba(255,255,255,.08); color:var(--on-dark); cursor:pointer; }
:root[data-theme="contrast"] .tog { border-color:#fff; background:#181818; color:#fff; }
:root[data-theme="night"] .tog { border-color:rgba(216,207,184,.3); background:rgba(216,207,184,.07); }
.tog[aria-pressed="true"] { background:var(--gold); color:#4a3209; border-color:var(--gold); }
:root[data-theme="contrast"] .tog[aria-pressed="true"] { background:#fff; color:#000; border-color:#fff; }
.seg { display:flex; border:1.5px solid rgba(255,255,255,.32); border-radius:11px; overflow:hidden; background:rgba(255,255,255,.08); }
:root[data-theme="contrast"] .seg { border-color:#fff; background:#181818; }
:root[data-theme="night"] .seg { border-color:rgba(216,207,184,.3); background:rgba(216,207,184,.07); }
.seg button { flex:1; font-family:inherit; font-weight:700; font-size:14px; padding:11px 6px; border:none; background:transparent; color:var(--on-dark); cursor:pointer; }
.seg button + button { border-left:1.5px solid rgba(255,255,255,.28); }
:root[data-theme="contrast"] .seg button + button { border-left-color:#fff; }
.seg button[aria-pressed="true"] { background:var(--gold); color:#4a3209; } :root[data-theme="contrast"] .seg button[aria-pressed="true"] { background:#fff; color:#000; }
.seg.small button { font-size:13px; padding:8px 4px; }
.sel-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; margin:8px 0; }
.sel-row .seg { width:60%; }
.hint { font-size:12px; color:var(--muted); margin:2px 0 8px; line-height:1.5; }
.reset-row { display:flex; gap:7px; flex-wrap:wrap; }
.ghost.small { font-size:13px; padding:9px 12px; flex:1; min-width:64px; }
.ghost.small.danger { color:var(--bad); border-color:var(--bad); }
#set-back { margin-top:10px; }

/* campaign / scoreboard / howto lists */
.stage-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; overflow-y:auto; padding-bottom:10px; }
.stage-btn { display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-family:inherit; padding:16px 14px; border-radius:14px; border:none; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); }
.stage-btn .sn { font-weight:800; font-size:15px; } .stage-btn .ss { font-size:15px; color:var(--gold); }
:root[data-theme="contrast"] .stage-btn .ss { color:#fff; } .stage-btn.locked { opacity:.4; cursor:default; }
.board-list { overflow-y:auto; flex:1; }
.board-row { display:flex; justify-content:space-between; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.12); font-size:15px; }
.board-row b { color:var(--gold); font-variant-numeric:tabular-nums; }
.howto-list { overflow-y:auto; flex:1; }
.howto-warn { background:var(--card); color:var(--ink); border-radius:14px; padding:18px; box-shadow:var(--shadow); text-align:center; }
.howto-warn p { font-size:14px; line-height:1.55; }
.howto-card { background:var(--card); color:var(--ink); border-radius:12px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow); }
.howto-card b { display:block; margin-bottom:4px; } .howto-card p { margin:0; font-size:14px; color:#555; }
:root[data-theme="contrast"] .howto-card p { color:#bbb; } :root[data-theme="night"] .howto-card p { color:var(--muted); }
#camp-back,#board-back,#howto-back { margin-top:12px; }

/* HUD / play */
.hud { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.hud .left { display:flex; align-items:center; gap:8px; }
.icon-btn { background:transparent; border:none; font-size:20px; cursor:pointer; padding:2px 6px; color:var(--on-dark); }
.lives { font-size:20px; letter-spacing:2px; color:var(--bad); } :root[data-theme="contrast"] .lives { color:#fff; }
.lives .lost { opacity:.22; } .lives .vsp { font-size:14px; font-weight:800; letter-spacing:0; }
.hud .score { font-variant-numeric:tabular-nums; font-weight:800; font-size:22px; text-align:right; }
.hud .combo { font-size:12px; color:var(--gold); font-weight:700; min-height:14px; text-align:right; }
.timerbar { height:8px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden; margin-bottom:8px; }
:root[data-theme="contrast"] .timerbar { background:#444; outline:1px solid #fff; }
.timerbar > i { display:block; height:100%; width:100%; background:var(--gold); transform-origin:left; }
.ctx { text-align:center; font-size:11px; color:var(--muted); margin-bottom:6px; }
.tlabel { text-align:center; color:var(--muted); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.prompt { background:var(--card); color:var(--ink); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); text-align:center; min-height:90px; display:flex; align-items:center; justify-content:center; white-space:pre-line; font-size:clamp(18px,5vw,23px); font-weight:600; line-height:1.4; }
.explain { text-align:center; color:var(--muted); font-size:13px; margin-top:12px; min-height:18px; }
.stage { margin-top:14px; min-height:170px; }

.choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choices button { font-family:inherit; font-weight:700; font-size:19px; padding:20px 12px; border-radius:14px; border:none; cursor:pointer; background:var(--card); color:var(--ink); box-shadow:var(--shadow); font-variant-numeric:tabular-nums; transition:transform .06s ease; min-height:62px; word-break:break-word; }
.choices button:active { transform:translateY(2px); }
.choices button.correct { background:var(--good); color:#062b1d; animation:pop .3s ease; }
.choices button.wrong { background:var(--bad); color:#3a0808; animation:nudge .3s ease; }
:root[data-theme="contrast"] .choices button.correct { background:#fff; color:#000; }
:root[data-theme="contrast"] .choices button.wrong { background:#000; color:#fff; border:2px dashed #fff; opacity:.55; }
@keyframes pop { 50%{transform:scale(1.06)} } @keyframes nudge { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.typebox { display:flex; gap:10px; }
.typebox input { flex:1; font-family:inherit; font-size:20px; padding:16px; border-radius:14px; border:none; box-shadow:var(--shadow); color:var(--ink); background:var(--card); }
.typebox input.good { box-shadow:0 0 0 3px var(--good); } .typebox input.bad { box-shadow:0 0 0 3px var(--bad); }

.dragarea { position:relative; height:226px; border-radius:var(--r); background:rgba(255,255,255,.06); border:1.5px dashed rgba(244,239,255,.25); overflow:hidden; }
:root[data-theme="contrast"] .dragarea { background:#111; border-color:#fff; }
.dragarea .target,.dragarea .cover { position:absolute; transform:translate(-50%,-50%); width:84px; height:62px; border-radius:12px; font-family:inherit; font-weight:800; font-size:18px; border:none; cursor:pointer; box-shadow:var(--shadow); }
.dragarea .target { background:var(--gold); color:#4a3209; font-size:28px; z-index:1; }
.dragarea .cover { background:var(--card); color:var(--ink); z-index:2; touch-action:none; }
.dragarea .cover.grabbing { transform:translate(-50%,-50%) scale(1.04); }

.circlearea { display:flex; align-items:center; justify-content:space-around; min-height:150px; flex-wrap:wrap; gap:8px; }
.circle { border-radius:50%; border:none; background:var(--cool); cursor:pointer; box-shadow:var(--shadow); }
:root[data-theme="contrast"] .circle { background:#fff; } .circle.correct { background:var(--good); } .circle.wrong { background:var(--bad); }
.holdarea { display:flex; justify-content:center; padding-top:12px; }
.holdbtn { position:relative; width:130px; height:130px; border-radius:50%; border:none; cursor:pointer; background:var(--card); color:var(--ink); font-weight:800; font-size:18px; overflow:hidden; box-shadow:var(--shadow); touch-action:none; }
.holdfill { position:absolute; left:0; bottom:0; width:100%; height:0%; background:var(--good); opacity:.55; }
.waitarea { min-height:150px; border-radius:var(--r); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.waitmsg { font-size:22px; font-weight:700; color:var(--muted); }

.simon { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:280px; margin:0 auto; }
.pad { height:90px; border-radius:14px; border:none; cursor:pointer; opacity:.5; box-shadow:var(--shadow); transition:opacity .12s, transform .08s; }
.pad.lit { opacity:1; transform:scale(1.04); }
.p0{background:#FF6B6B}.p1{background:#36C28E}.p2{background:#7C8CFF}.p3{background:#FFC247}
:root[data-theme="contrast"] .pad { background:#fff; border:2px solid #fff; } :root[data-theme="contrast"] .pad.lit { background:#888; }

.bubblearea { position:relative; height:230px; border-radius:var(--r); background:rgba(255,255,255,.06); overflow:hidden; }
.bubble { position:absolute; transform:translate(-50%,-50%); border-radius:50%; border:none; cursor:pointer; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), var(--cool)); box-shadow:var(--shadow); font-size:20px; color:#fff; }
:root[data-theme="contrast"] .bubble { background:#fff; border:2px solid #fff; color:#000; }
.bubble.popped { animation:pop .2s ease forwards; } .bubble.correct { background:var(--good); }

.masharea { display:flex; flex-direction:column; gap:14px; align-items:center; padding-top:6px; }
.mashbar { width:100%; height:26px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden; } :root[data-theme="contrast"] .mashbar { background:#444; outline:1px solid #fff; }
.mashfill { height:100%; width:0%; background:var(--gold); transition:width .05s linear; }
.mashbtn { width:160px; height:90px; font-size:24px; }

.runarea { position:relative; height:210px; border-radius:var(--r); background:rgba(255,255,255,.06); overflow:hidden; }
.runbtn { position:absolute; font-family:inherit; font-weight:800; font-size:16px; padding:16px 18px; border-radius:12px; border:none; cursor:pointer; background:var(--gold); color:#4a3209; box-shadow:var(--shadow); transition:left .12s ease, top .12s ease; }
:root[data-theme="contrast"] .runbtn { background:#fff; color:#000; }

.patternwrap { text-align:center; }
.arrows { font-size:34px; letter-spacing:8px; margin-bottom:14px; color:var(--on-dark); }
.arrow.done { color:var(--good); } .arrow.miss { color:var(--bad); }
.swipepad { height:150px; border-radius:var(--r); background:rgba(255,255,255,.08); border:1.5px dashed rgba(244,239,255,.3); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:700; font-size:26px; touch-action:none; }
:root[data-theme="contrast"] .swipepad { background:#111; border-color:#fff; }

.maze { position:relative; display:grid; width:100%; max-width:320px; aspect-ratio:1/1; margin:0 auto; touch-action:none; }
.mcell { width:100%; height:100%; } .mcell.exit { background:color-mix(in srgb, var(--good) 45%, transparent); }
.token { position:absolute; border-radius:6px; background:var(--gold); box-shadow:var(--shadow); transition:left .1s ease, top .1s ease; }
:root[data-theme="contrast"] .token { background:#fff; }

.motionwrap { text-align:center; } .motionsub { font-size:26px; font-weight:800; margin-bottom:12px; } .motioncue { font-size:40px; color:var(--muted); margin-bottom:16px; }

/* overlays */
.overlay { position:fixed; inset:0; z-index:20; display:none; place-items:center; padding:22px; background:rgba(10,6,20,.6); }
.overlay.show { display:grid; animation:rise .2s ease; }
.o-card { background:var(--card); color:var(--ink); border-radius:18px; padding:24px; max-width:340px; width:100%; text-align:center; box-shadow:var(--shadow); }
.o-card h3 { font-family:"Fredoka","Fraunces",serif; font-size:24px; margin:0 0 10px; }
.o-actions { display:flex; flex-direction:column; gap:10px; }
.t-tag { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cool); font-weight:700; }
.t-title { font-family:"Fredoka","Fraunces",serif; font-size:24px; margin:6px 0 8px; }
.t-body { font-size:15px; line-height:1.55; margin:0 0 18px; }

/* results */
.over { text-align:center; margin:auto 0; }
.over h2 { font-family:"Fredoka","Fraunces",serif; font-size:32px; margin:0 0 4px; color:var(--gold); }
.over .final { font-size:50px; font-weight:800; font-variant-numeric:tabular-nums; margin:8px 0 2px; }
.over .sub { color:var(--muted); margin-bottom:4px; } .over .newbest { color:var(--good); font-weight:700; margin-bottom:18px; min-height:20px; }
.over .actions { display:flex; flex-direction:column; gap:10px; max-width:280px; margin:0 auto; }

/* passenger comfort cues */
#cues { position:fixed; inset:0; pointer-events:none; z-index:5; display:none; }
#cues.on { display:block; }
.cue { position:absolute; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); transform:translate(var(--cx),var(--cy)); transition:transform .12s ease; }
:root[data-theme="contrast"] .cue { background:#fff; }

@media (prefers-reduced-motion: reduce) { *, body::after { animation:none !important; transition:none !important; } }

/* ----- new puzzle widgets ----- */
/* estimate */
.dotfield { position:relative; height:150px; border-radius:var(--r); background:rgba(255,255,255,.06); margin-bottom:12px; overflow:hidden; }
:root[data-theme="contrast"] .dotfield { background:#111; outline:1px solid #fff; }
.dot { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); }
:root[data-theme="contrast"] .dot { background:#fff; }

/* shapes (next-shape / grid) */
.shapewrap { text-align:center; }
.shaperow { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.shapegrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:200px; margin:0 auto 14px; }
.shapecell { display:flex; align-items:center; justify-content:center; min-width:62px; min-height:62px; background:var(--card); border-radius:12px; box-shadow:var(--shadow); }
.shapecell.blank { font-size:28px; font-weight:800; color:var(--muted); }
.shapebtn { display:flex; align-items:center; justify-content:center; background:var(--card); border:none; border-radius:14px; box-shadow:var(--shadow); cursor:pointer; min-height:94px; min-width:84px; padding:6px; }
.shapebtn.correct { outline:3px solid var(--good); } .shapebtn.wrong { outline:3px solid var(--bad); opacity:.6; }

/* prompttap: the answer is a word in the question */
.prompttap { background:var(--card); color:var(--ink); border-radius:var(--r); padding:24px 20px; box-shadow:var(--shadow); text-align:center; font-size:22px; font-weight:600; line-height:1.8; margin-bottom:6px; }
.ptok { cursor:pointer; padding:2px 3px; border-radius:6px; }
.ptok:active { background:rgba(0,0,0,.06); }
.ptok.tiny { font-size:11px; vertical-align:middle; opacity:.85; }
.ptok.hit { background:var(--good); color:#062b1d; } .ptok.missTok { background:var(--bad); color:#3a0808; }

/* liar buttons */
.liarbtn { font-family:inherit; font-weight:800; font-size:22px; padding:24px 12px; border-radius:14px; border:none; cursor:pointer; background:var(--card); color:var(--ink); box-shadow:var(--shadow); min-height:70px; }
.liarbtn.correct { background:var(--good); color:#062b1d; } .liarbtn.wrong { background:var(--bad); color:#3a0808; }

/* trace / pinch */
.tracearea { height:200px; border-radius:var(--r); background:rgba(255,255,255,.06); border:1.5px dashed rgba(244,239,255,.3); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:700; font-size:18px; touch-action:none; }
:root[data-theme="contrast"] .tracearea { background:#111; border-color:#fff; }

/* catch falling */
.catcharea { position:relative; height:240px; border-radius:var(--r); background:rgba(255,255,255,.06); overflow:hidden; touch-action:none; }
:root[data-theme="contrast"] .catcharea { background:#111; outline:1px solid #fff; }
.falling { position:absolute; transform:translate(-50%,-50%); font-size:30px; font-weight:800; cursor:pointer; }
.falling.good { color:var(--gold); } .falling.bad { color:var(--bad); }
:root[data-theme="contrast"] .falling.good { color:#fff; } :root[data-theme="contrast"] .falling.bad { color:#888; }
.falling.hit { transform:translate(-50%,-50%) scale(1.5); opacity:0; transition:transform .12s, opacity .12s; }

/* rotate dial */
.rotatearea { position:relative; height:280px; display:flex; align-items:center; justify-content:center; }
.dial { position:relative; width:200px; height:200px; border-radius:50%; background:var(--card); box-shadow:var(--shadow); touch-action:none; }
.dialarrow { position:absolute; left:50%; top:10px; width:6px; height:80px; background:var(--gold); transform:translateX(-50%); border-radius:3px; }
:root[data-theme="contrast"] .dialarrow { background:#000; }
.dialdot { position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px; border-radius:50%; background:var(--good); }

/* audio / tune */
.audiowrap { text-align:center; }
.audiopads { display:flex; justify-content:center; gap:16px; margin-bottom:10px; }
.apad { width:90px; height:90px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:30px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); opacity:.5; transition:opacity .1s, transform .08s; }
.apad.lit { opacity:1; transform:scale(1.06); background:var(--gold); }

/* ----- cozy home scene: a little plane drifting through clouds ----- */
.sky { position:relative; width:100%; height:160px; margin:2vh auto 0; max-width:520px; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(124,140,255,.30), rgba(199,125,255,.10)); }
:root[data-theme="night"] .sky { background:linear-gradient(180deg, rgba(124,140,255,.16), rgba(0,0,0,.05)); }
:root[data-theme="contrast"] .sky { background:#0a0a0a; outline:1px solid #fff; }

.cloud { position:absolute; background:#fff; border-radius:40px; opacity:.9; will-change:transform; }
:root[data-theme="contrast"] .cloud { background:#fff; opacity:.65; }
.cloud::before, .cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud { width:70px; height:22px; }
.cloud::before { width:34px; height:34px; top:-15px; left:10px; }
.cloud::after { width:26px; height:26px; top:-11px; left:36px; }
.c1 { top:26px; transform:scale(1.1); animation:drift 26s linear infinite; }
.c2 { top:96px; transform:scale(.8); opacity:.7; animation:drift 38s linear infinite; animation-delay:-8s; }
.c3 { top:60px; transform:scale(1.35); opacity:.8; animation:drift 32s linear infinite; animation-delay:-18s; }
.c4 { top:120px; transform:scale(.6); opacity:.6; animation:drift 44s linear infinite; animation-delay:-4s; }
@keyframes drift { from { left:115%; } to { left:-45%; } }

.plane { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--gold); animation:bob 4.2s ease-in-out infinite; }
:root[data-theme="contrast"] .plane { color:#fff; }
.plane svg { display:block; filter:drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
@keyframes bob { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 7px)); } }
.plane .trail { position:absolute; right:86px; top:62%; width:120px; height:0;
  border-top:3px dotted currentColor; opacity:.45;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%);
  animation:puff 4.2s ease-in-out infinite; }
@keyframes puff { 0%,100% { opacity:.25; } 50% { opacity:.5; } }

/* subtle developer credit on the home screen */
.credit { text-align:center; color:var(--muted); opacity:.45; font-size:12px; margin-top:20px; letter-spacing:.02em; }

/* boss missions + longer stage list */
.stage-btn .sn { line-height:1.2; word-break:break-word; }
.stage-btn.boss { background:linear-gradient(135deg, var(--card), rgba(255,194,71,.20)); outline:1px solid rgba(255,194,71,.55); }
:root[data-theme="contrast"] .stage-btn.boss { background:#000; outline:2px solid #fff; }

/* ----- batch widgets: seatmap, recall, hold, drift, spotlight, dpad ----- */
.dpad { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px; }
.dpad .drow { display:flex; gap:8px; }
.dbtn { width:60px; height:54px; font-size:22px; border:none; border-radius:12px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; }
.dbtn:active { transform:translateY(1px); }

.pinchfb { margin-top:16px; text-align:center; }
.pinchslider { width:80%; margin-top:8px; }

.seatmap { display:flex; flex-direction:column; gap:7px; align-items:center; }
.seatrow { display:flex; align-items:center; gap:7px; }
.rownum { width:22px; text-align:right; color:var(--muted); font-size:13px; font-weight:700; }
.seat { width:40px; height:40px; border:none; border-radius:9px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; font-weight:700; font-size:14px; }
.seat.correct { background:var(--good); color:#062b1d; } .seat.wrong { background:var(--bad); color:#3a0808; }
.aisle { width:16px; }

.recall { text-align:center; }
.recallshow { display:flex; justify-content:center; gap:14px; font-size:46px; padding:24px 0; }
.recallq { font-size:20px; font-weight:700; margin-bottom:14px; color:var(--ink); }
.recallbtn { font-size:34px; padding:14px; }

.holdwrap { display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:10px; }
.holdring { position:relative; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:var(--shadow); }
:root[data-theme="contrast"] .holdring { outline:2px solid #fff; }
.holdfill { position:absolute; left:0; bottom:0; width:100%; height:0%; background:var(--gold); transition:height .05s linear; }
.holdbtn { font-family:inherit; font-weight:800; font-size:20px; padding:18px 36px; border:none; border-radius:16px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; -webkit-user-select:none; user-select:none; }
.holdbtn.correct { background:var(--good); color:#062b1d; }

.driftwrap { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 0; }
.driftbtn { font-family:inherit; font-weight:700; font-size:20px; padding:20px; border:none; border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; }
.driftbtn.correct { background:var(--good); color:#062b1d; } .driftbtn.wrong { background:var(--bad); color:#3a0808; }
@keyframes turb { 0%,100% { transform:translate(0,0) rotate(0deg); } 25% { transform:translate(4px,-3px) rotate(1deg); } 50% { transform:translate(-3px,4px) rotate(-1deg); } 75% { transform:translate(3px,2px) rotate(.5deg); } }

.spotarea { position:relative; border-radius:var(--r); overflow:hidden; }
.spotveil { position:absolute; inset:0; pointer-events:none; background:rgba(4,4,16,.96);
  -webkit-mask-image:radial-gradient(circle 70px at var(--mx,50%) var(--my,50%), transparent 0, transparent 55%, #000 75%);
  mask-image:radial-gradient(circle 70px at var(--mx,50%) var(--my,50%), transparent 0, transparent 55%, #000 75%); }

/* iOS: stop double-tap-to-zoom and accidental text selection/callout on controls
   (fixes the mash button zooming the page on iPhone) */
button, .seat, .apad, .bubble, .ricon, .ptok, .dbtn, .driftbtn, .holdbtn,
.mashbtn, .liarbtn, .shapebtn, .choices button, .stage, .tracearea, .catcharea,
.rotatearea, .spotarea, .dotfield, .swipepad, .arrows {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html, body { touch-action: manipulation; }

/* version under the credit */
.credit .ver { opacity:.7; font-variant-numeric:tabular-nums; }

/* hidden Happy Stage: crimson skin (only when colour theme is on) */
:root[data-theme="color"] body.secret { background:radial-gradient(circle at 50% 18%, #6a0f24, #2a0410 72%) fixed; }
:root[data-theme="color"] body.secret .app { --gold:#FF4D6D; }
body.secret .card, body.secret .choices button, body.secret .driftbtn, body.secret .shapebtn, body.secret .recallbtn { box-shadow:0 6px 18px rgba(120,0,30,.35); }

/* faint "I love you" pinned to the bottom, only during the secret stage */
#loveyou { position:fixed; left:0; right:0; bottom:10px; text-align:center; font-size:13px; letter-spacing:.08em;
  color:#fff; opacity:0; pointer-events:none; transition:opacity .8s ease; z-index:60; }
body.secret #loveyou { opacity:.16; }