:root {
  --bg:#06182a; --bg-2:#0c2941; --panel:rgba(5,19,36,.88); --panel-2:rgba(15,43,64,.95);
  --line:#30526d; --text:#e1eff3; --muted:#8aacc3; --accent:#54dded; --accent-ink:#071e30;
  --danger:#ff759b; --t0:#9bc1d5; --t1:#54dded; --t2:#c0a4fa; --t3:#ffa886; --t4:#ffe09b;
  --serif:'VT323',monospace; --sans:'Space Mono',monospace; --radius:0px;
}
body { background:#071e35; font-size:13px; }
body::after { content:''; position:fixed; inset:0; z-index:8; pointer-events:none; opacity:.18; background:repeating-linear-gradient(transparent 0 3px,#08233d 3px 4px); }
#stars { image-rendering:pixelated; }
.screen { max-width:760px; padding:16px 24px 50px; animation:rise .3s ease both; }
.topbar { margin-bottom:30px; gap:12px; }
.topbar__title { font-family:var(--serif); text-transform:uppercase; font-size:26px; letter-spacing:2px; text-shadow:2px 2px #071725; }
.topbar__title small { font-family:var(--sans); font-size:10px; letter-spacing:0; margin-top:4px; }
.icon-btn { border-radius:0; border:2px solid #3b617a; background:#10283e; box-shadow:3px 3px 0 #061627; color:#b7dce8; }
.btn { border-radius:0; min-height:52px; border:2px solid var(--line); box-shadow:3px 4px 0 #041422; background:#10263d; font-family:var(--serif); text-transform:uppercase; letter-spacing:2px; font-size:24px; padding:8px 18px; }
.btn--primary { border:3px solid #64e9f4; color:#ddf8ff; background:#102d43; box-shadow:inset 0 0 0 3px #092132,4px 5px 0 #062132; }
.btn--primary:hover { background:#1c5368; }
.btn:disabled { opacity:.45; cursor:default; }
.btn--danger { border-color:#aa4664; }
.btn--big { min-height:62px; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h1 { font-size:40px; line-height:1.1; } h2 { font-size:30px; } h3 { font-size:24px; }
.page,.stats,.packs,.list { background:rgba(5,19,36,.86); border:2px solid var(--line); padding:24px; box-shadow:6px 6px #06172b; }
.page p { line-height:1.8; }
.creature { overflow:visible; filter:drop-shadow(0 8px 12px #041626); animation:bob 4s ease-in-out infinite; }
.creature--gem { filter:drop-shadow(0 0 18px #f6c96c66); }
.home { max-width:980px; min-height:100dvh; padding-bottom:24px; }
.topbar--home { margin-bottom:0; }
.home-log { justify-self:start; text-transform:uppercase; font-size:10px; letter-spacing:2px; color:#164d62; }
.hero { margin:clamp(38px,8vh,90px) 0 0; }
.hero__eyebrow { color:#1c586c; font-size:10px; letter-spacing:3px; margin-bottom:12px; }
.wordmark { font-family:var(--serif); font-weight:400; font-size:clamp(88px,15vw,150px); letter-spacing:14px; color:#f0f9f7; text-shadow:-4px 4px #fa7298,4px -4px #54e3e7,7px 8px #21587344; margin:0 0 5px 14px; }
.hero__subtitle { color:#196478; font-family:var(--serif); font-size:26px; letter-spacing:9px; margin:0 0 20px; text-shadow:1px 2px #b2e4e8; }
.tagline { font-family:var(--serif); font-style:normal; font-size:25px; line-height:1.25; color:#345d76; letter-spacing:1px; }
.home-companion { position:relative; width:100%; height:clamp(80px,12vh,140px); display:flex; justify-content:center; align-items:center; margin:0 0 14px; }
.home-companion .creature { position:absolute; right:12%; bottom:-18px; z-index:1; }
.home-companion span { position:absolute; right:3%; bottom:0; color:#b3dae1; font-family:var(--serif); font-size:17px; transform:rotate(-5deg); }
.home-controls { position:relative; max-width:700px; margin:0 auto; }
.home-descent { font-size:32px; min-height:72px; background:#0b2036; margin-bottom:16px; box-shadow:5px 6px #052033; }
.daily-card { display:grid; grid-template-columns:1fr auto; border-radius:0; padding:12px 16px; border:1px solid #52768c; background:#071c30ed; margin-bottom:12px; }
.daily-card__meta { color:#9cc6da; letter-spacing:1px; font-size:10px; }
.daily-card__main { margin:0; font-family:var(--serif); font-size:24px; color:#f2b1c4; grid-row:span 2; }
.daily-card__cta { font-size:9px; }
.modes { grid-template-columns:repeat(4,1fr); gap:8px; }
.mode { grid-template-columns:1fr; text-align:center; gap:3px; padding:10px 8px; border:1px solid #3c647c; background:#091d30ed; border-radius:0; }
.mode__icon { display:none; } .mode__name { font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:1px; font-size:22px; }
.mode__sub { font-size:8px; }
.countdown { margin:14px 0 0; font-size:10px; } .foot { font-size:9px; margin:10px 0 0; }
body[data-screen="home"] .topbar .icon-btn { background:#21485c; }
.play-screen { min-height:100dvh; }
.run-head { margin:0 0 28px; display:grid; grid-template-columns:100px 1fr 100px; align-items:start; gap:10px; }
.depth-badge,.run-head__score { padding:9px 12px; background:#071a2ce8; box-shadow:3px 4px #09223588; min-height:64px; text-align:left; clip-path:polygon(10% 0,90% 0,90% 10%,100% 10%,100% 90%,90% 90%,90% 100%,10% 100%,10% 90%,0 90%,0 10%,10% 10%); }
.depth-badge small,.run-head__score small { display:block; font-size:9px; letter-spacing:3px; }
.depth-badge strong { display:block; font-family:var(--serif); color:var(--accent); font-size:30px; font-weight:400; }
.run-head__score { text-align:right; } .run-head__score span { color:#fa83a6; font-family:var(--serif); font-size:30px; }
.pips { gap:4px; justify-content:center; padding-top:7px; }
.pip { border-radius:0; width:16px; height:18px; border:2px solid #041629; background:#12334b; }
.pip--now { background:#fa749f; box-shadow:0 0 0 2px #89d7e544; }
.run-head__label { font-family:var(--serif); text-transform:uppercase; letter-spacing:2px; font-size:15px; margin-top:8px; }
.asking .topbar { position:absolute; top:94px; left:24px; right:24px; margin:0; }
.asking .topbar__title { visibility:hidden; }
.asking .run-head { padding-top:0; }
.asking .play { min-height:calc(100dvh - 66px); display:flex; flex-direction:column; }
.asking .eyebrow { margin:66px 0 0; padding:14px 20px 0; background:#071a2ce8; font-size:10px; color:#ee97b1; text-align:left; border:2px solid #2d5470; border-bottom:0; }
.asking .prompt { margin:0; text-align:left; padding:14px 20px; font-family:var(--serif); font-style:normal; font-size:clamp(32px,5vw,46px); color:#e8f2f2; background:#071a2ce8; border-left:2px solid #2d5470; border-right:2px solid #2d5470; }
.prompt-hint { text-align:left; color:#8baec5; letter-spacing:2px; padding:0 20px 16px; margin:0; font-family:var(--serif); font-size:18px; background:#071a2ce8; border:2px solid #2d5470; border-top:0; }
.dive-companion { flex:1; min-height:100px; display:flex; align-items:center; justify-content:center; }
.asking .guess { margin:0 0 0 66px; }
.guess input { border-radius:0; border:2px solid #4dabc1; background:#071827e8; font-family:var(--serif); font-size:27px; min-width:0; box-shadow:3px 4px #06182a; }
.guess .btn--primary { background:#e96894; border-color:#7f3455; color:#181c30; box-shadow:inset 0 0 0 3px #c9557f; }
.asking .timer { position:absolute; bottom:104px; left:24px; right:24px; margin:0; height:56px; pointer-events:none; }
.asking .timer__n { position:absolute; left:0; top:0; width:54px; height:54px; display:grid; place-items:center; border:3px double #64c5df; border-radius:50%; background:#082137; font-family:var(--serif); font-size:29px; }
.asking .timer__bar { position:absolute; left:66px; right:0; bottom:-8px; height:4px; border-radius:0; }
.asking .flash { margin:16px 0 0; min-height:24px; font-size:11px; background:#06192ac9; }
.asking .play__foot { font-size:9px; gap:6px; margin-top:0; }
.asking .link { font-size:11px; }
.answer,.gem-card,.slot,.pack,.tile,.gemcell,.board,.mini,.chip,.seg span,.field select,.player-row input,.modal__card,.share-text { border-radius:0; }
.answer { background:#081d32ed; padding:24px; border-width:2px; }
.answer__name { font-family:var(--serif); font-size:44px; }
.answer__pts { font-family:var(--serif); font-size:48px; }
.answer__pts small { display:block; font-family:var(--sans); font-size:11px; }
.gem-card { background:#092037ed; }
.reveal { background:#061a2ee8; padding:12px; }
.reveal__group { text-align:left; }
.results { background:#061a2ddd; border:2px solid #30526d; padding:20px; }
.results__depth { font-family:var(--serif); color:var(--accent); font-size:64px; margin:0; line-height:1; }
.results__depth small { font-size:22px; }
.results__phase { font-family:var(--serif); font-size:28px; margin:10px 0; }
.results__score { font-size:36px; } .results__score small { font-size:20px; }
.results__moon { height:130px; } .results__moon svg { height:130px; }
.slots--results .slot { min-height:54px; padding:8px 10px; gap:8px; }
.slot__name { font-size:12px; } .slot__tier { font-size:9px; } .slot__prompt { font-size:9px; }
.slot__pts { min-width:30px; }
.friend-mascot { text-align:center; height:110px; }
.friend-hub h1 { text-align:center; }
.friend-option { display:block; background:#0b2539; padding:22px; border:2px solid #345b73; margin:18px 0; }
.friend-option>span { font-size:10px; letter-spacing:2px; color:var(--accent); }
.friend-option h2 { margin:10px 0; }
.friend-option p { color:#a6c3d3; }
.field input:not([type=radio]):not([type=checkbox]),.field select,.room-name,.room-code { width:100%; padding:14px; border:2px solid #41667e; background:#081c30; font-family:var(--serif); font-size:26px; color:var(--text); border-radius:0; }
.room-code { text-transform:uppercase; letter-spacing:6px; }
.room-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.room-actions>* { flex:1; }
.room-join { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.room-id { font-family:var(--serif); font-size:60px; letter-spacing:9px; color:var(--accent); margin:4px 0; text-align:center; }
.room-roster { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:10px; margin:20px 0; }
.room-player { border:2px solid var(--line); background:#091d30; padding:12px 8px; text-align:center; overflow-wrap:anywhere; }
.room-player--turn { border-color:var(--accent); box-shadow:0 0 20px #50ccdd33; }
.room-player--out { opacity:.4; }
.room-player small { display:block; color:var(--muted); font-size:9px; }
.room-player strong { font-family:var(--serif); font-size:28px; display:block; font-weight:400; }
.room-status { padding:12px; background:#071c30e8; color:var(--accent); line-height:1.6; min-height:42px; }
.room-prompt { padding:18px; border:2px solid #315671; background:#0b2034; font-family:var(--serif); font-size:38px; line-height:1.1; margin:20px 0; }
.room-countdown { font-family:var(--serif); color:var(--accent); font-size:36px; text-align:center; margin:10px 0; }
.room-feedback { min-height:24px; color:#ffafbf; margin:10px 0; }
.room-board { width:100%; border-collapse:collapse; margin:18px 0; font-size:12px; }
.room-board td,.room-board th { text-align:left; border-bottom:1px solid var(--line); padding:10px; overflow-wrap:anywhere; }
.room-board th { color:var(--accent); font-weight:400; font-size:10px; }
.room-board td:last-child { text-align:right; }
.room-note { font-size:10px; color:var(--muted); line-height:1.8; }
.modal__card { border:2px solid #4d7990; background:#0a2135; box-shadow:6px 6px #020c19; }
.toast { border-radius:0; background:#183b51; border:1px solid #54c5d8; color:#e8f6f9; }
@keyframes bob { 50% { transform:translateY(-7px) rotate(3deg); } }
@media(min-width:900px) { .asking { max-width:920px; } .asking .prompt,.asking .eyebrow,.asking .prompt-hint { max-width:620px; width:100%; } .asking .dive-companion { justify-content:flex-end; padding-right:15%; } }
@media(max-width:600px) {
  .screen { padding:12px 14px 30px; }
  .home .hero { margin-top:52px; }
  .hero__eyebrow { font-size:8px; letter-spacing:2px; }
  .hero__subtitle { font-size:21px; letter-spacing:5px; }
  .tagline { font-size:22px; }
  .home-companion { height:100px; }
  .home-controls { margin-top:0; }
  .home-descent { min-height:64px; font-size:26px; }
  .modes { grid-template-columns:1fr 1fr; }
  .mode__name { font-size:21px; }
  .daily-card { display:block; }
  .daily-card__main { font-size:26px; }
  .daily-card__meta { font-size:9px; }
  .daily-card__cta { font-size:8px; }
  .topbar__title { font-size:22px; }
  .page,.packs,.stats,.list { padding:16px; }
  .asking .topbar { left:14px; right:14px; }
  .run-head { grid-template-columns:78px 1fr 78px; gap:6px; }
  .depth-badge,.run-head__score { padding:8px 10px; }
  .depth-badge strong,.run-head__score span { font-size:25px; }
  .pip { width:13px; height:16px; }
  .pips { gap:3px; }
  .run-head__label { font-size:13px; letter-spacing:1px; }
  .asking .play { min-height:calc(100dvh - 42px); }
  .asking .eyebrow { margin-top:58px; font-size:8px; padding:12px 14px 0; }
  .asking .prompt { font-size:34px; padding:12px 14px; }
  .asking .prompt-hint { padding:0 14px 12px; font-size:16px; letter-spacing:1px; }
  .asking .timer { left:14px; right:14px; bottom:84px; }
  .asking .guess { margin-left:60px; gap:8px; }
  .guess input { font-size:24px; width:100%; }
  .guess .btn { padding:6px 12px; font-size:23px; }
  .asking .timer__bar { left:60px; }
  .play__foot { flex-wrap:wrap; }
  .slot__tier { display:none; }
  .slots--results .slot { grid-template-columns:10px 1fr auto; }
  .friend-option { padding:16px; }
  .room-board td,.room-board th { padding:8px 5px; font-size:10px; }
}
@media(max-width:360px) { .hero__subtitle { letter-spacing:3px; } .hero__eyebrow { letter-spacing:1px; } .home .hero { margin-top:28px; } .run-head { grid-template-columns:70px 1fr 70px; } .pip { width:11px; height:14px; } }
@media(prefers-reduced-motion:reduce) { .creature { animation:none; } }
body:has([data-setting="reduceMotion"]:checked) .creature { animation:none; }

:root[data-reduced="true"] .creature { animation:none; }
.player-row { grid-template-columns:14px minmax(0,1fr) 40px; }
.player-row input,.field select { min-width:0; }
.pips { display:flex; }

.answer-dock { position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:12px; margin-bottom:8px; }
.asking .answer-dock .timer { position:static; width:54px; height:54px; margin:0; }
.asking .answer-dock .timer__n { top:0; }
.asking .answer-dock .timer__bar { left:66px; right:0; bottom:-8px; }
.asking .answer-dock .guess { margin:0; }
.guess { border:0; box-shadow:none; padding:0; background:none; border-radius:0; }

.bank-count { color:#244e63; font-family:var(--serif); font-size:18px; letter-spacing:1px; margin:12px 0 0; }