/* Krillion retro arcade skin. Loaded after styles.css and overrides it. */
@font-face { font-family: 'VT323'; src: url(assets/fonts/vt323.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(assets/fonts/silkscreen-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(assets/fonts/silkscreen-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --r-bg: #07111f;
  --r-bg2: #040a14;
  --r-panel: rgba(7, 17, 31, .88);
  --r-line: #24506a;
  --r-line-hi: #4fc3d9;
  --r-cyan: #72e4f3;
  --r-pink: #ff5d7e;
  --r-amber: #f6c454;
  --ink: #e6f1f4;
  --ink-soft: #9fb9c4;
  --ink-faint: #5f7e8c;
  --phosphor: #72e4f3;
  --krill: #ff5d7e;
  --line: rgba(79, 195, 217, .28);
  --glass: rgba(7, 17, 31, .82);
  --glass-strong: rgba(4, 10, 20, .94);
  --pixel: 'Silkscreen', 'Courier New', monospace;
  --term: 'VT323', 'Courier New', monospace;
  --display: var(--term);
  font-synthesis-weight: none;
}
body { background: var(--r-bg2); }

/* ---------- the sea goes dark ---------- */
.sea-surface { background: linear-gradient(180deg, #0f2a44 0%, #0a1d33 40%, #06111f 80%, #03080f 100%); opacity: 1; }
.sea-caustics { opacity: calc(.45 - var(--depth) * 2); }
.sea-rays { opacity: calc(.35 - var(--depth) * 1.2); }

/* ---------- top bar ---------- */
.topbar { background: rgba(5, 12, 22, .92); border-bottom: 2px solid #12283a; }
.wordmark span { font: 700 21px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.krill-glyph { color: var(--r-pink); filter: drop-shadow(0 0 6px rgba(255, 93, 126, .6)); }
.icon-btn { border-radius: 2px; border: 2px solid transparent; }
.icon-btn:hover { background: rgba(79, 195, 217, .1); border-color: var(--r-line); }

/* ---------- the cabinet: a framed game screen ---------- */
.cabinet {
  position: relative; max-width: 1000px; margin: 14px auto 48px;
  border: 2px solid var(--r-line); border-radius: 6px;
  background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(18, 44, 70, .35), transparent 70%), rgba(4, 10, 20, .55);
  box-shadow: 0 0 0 1px #0a1a28, 0 0 60px rgba(0, 0, 0, .5), inset 0 0 80px rgba(0, 0, 0, .45);
}
.cabinet::after { /* scanlines */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
.cab-bar {
  position: relative; display: flex; justify-content: center; align-items: center;
  padding: 10px 70px; border-bottom: 2px solid var(--r-line); background: rgba(4, 10, 20, .7);
}
.cab-label { font: 400 15px/1 var(--pixel); letter-spacing: .32em; color: var(--r-cyan); text-transform: uppercase; text-align: center; text-shadow: 0 0 8px rgba(114, 228, 243, .5); }
.cab-mute {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 400 11px/1 var(--pixel); letter-spacing: .14em; color: var(--ink-soft);
  background: rgba(79, 195, 217, .08); border: 1px solid var(--r-line); padding: 5px 7px; border-radius: 2px;
}
.cab-mute:hover { color: var(--ink); border-color: var(--r-line-hi); }
.cab-mute[aria-pressed="true"] { color: var(--r-pink); border-color: var(--r-pink); }
main { max-width: 760px; padding: 18px 28px 44px; }
@media (min-width: 721px) { main { padding-left: 28px; } }
@media (max-width: 720px) {
  .cabinet { margin: 8px 6px 30px; }
  main { padding: 14px 14px 34px; }
  .cab-bar { padding: 9px 62px 9px 14px; justify-content: flex-start; }
  .cab-label { font-size: 12px; letter-spacing: .18em; text-align: left; }
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--term); font-weight: 400; letter-spacing: .01em; }
.dive-no, .prompt-cat, .section-title, .panel-head h3 {
  font: 400 13px/1.2 var(--pixel); letter-spacing: .28em; text-transform: uppercase; color: var(--r-pink);
}
.section-title { font-size: 15px; margin: 40px 0 14px; color: var(--r-cyan); }
.panel-head h3 { color: var(--r-cyan); font-size: 13px; }
.home-title { font: 400 clamp(56px, 13vw, 104px)/.86 var(--term); letter-spacing: .01em; text-shadow: 0 0 22px rgba(114, 228, 243, .25); }
.home-title .sink { -webkit-text-stroke: 0; color: var(--r-pink); text-shadow: 0 0 18px rgba(255, 93, 126, .55); }
.home-lede { font-size: 18px; }
.reset-note b, .num { font-family: var(--term); font-size: 1.15em; letter-spacing: .03em; }

/* ---------- buttons ---------- */
.btn {
  border-radius: 2px; min-height: 50px; padding: 0 22px;
  font: 400 15px/1 var(--pixel); letter-spacing: .16em; text-transform: uppercase;
  background: var(--r-cyan); color: #04121c; border: 2px solid #b6f4fb;
  box-shadow: 0 0 0 2px #04121c, 0 0 22px rgba(114, 228, 243, .35);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.krill, .btn.dive, .guess .btn {
  background: #8a2443; color: #ffc2cf; border: 2px solid var(--r-pink);
  box-shadow: 0 0 0 2px #2a0712, 0 0 26px rgba(255, 93, 126, .45);
  text-shadow: 0 0 8px rgba(255, 93, 126, .8);
}
.btn.ghost { background: rgba(7, 17, 31, .7); color: var(--r-cyan); border: 2px solid var(--r-line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--r-line-hi); }
.btn.small { min-height: 38px; font-size: 12px; padding: 0 14px; }
.linkish { font: 400 12px var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--r-cyan); }

/* ---------- panels, cards, chips ---------- */
.panel, .mode, .pack, .challenge-banner, .badge-strip, .locked, .party-reveal li, .pod {
  border-radius: 3px !important; border: 2px solid var(--r-line); background: var(--r-panel);
  box-shadow: inset 0 0 0 1px rgba(114, 228, 243, .05), 0 6px 24px rgba(0, 0, 0, .35);
}
.mode:hover, .pack:hover { border-color: var(--r-line-hi); box-shadow: 0 0 0 1px var(--r-line-hi), 0 0 24px rgba(114, 228, 243, .2); }
.mode h3, .pack b { font: 400 26px/1 var(--term); letter-spacing: .02em; }
.mode .best { font: 400 18px var(--term); color: var(--r-amber); }
.chip, .tried span, .tab { border-radius: 2px; }
.chip { font-family: var(--term); font-size: 19px; padding: 3px 10px; background: rgba(79, 195, 217, .06); border-color: var(--r-line); }
.tab { font: 400 12px var(--pixel); letter-spacing: .12em; text-transform: uppercase; }
.tab[aria-selected="true"] { background: var(--r-cyan); border-color: var(--r-cyan); color: #04121c; }
.tried span { font-family: var(--term); font-size: 18px; }
.stat b { font: 400 40px/1 var(--term); color: var(--r-cyan); }
.stat span { font: 400 10px var(--pixel); letter-spacing: .14em; text-transform: uppercase; }
.board .rk, .board .sc { font-family: var(--term); font-size: 24px; }
.board .who b { font-family: var(--term); font-size: 22px; font-weight: 400; }
.toast { border-radius: 2px; background: var(--r-cyan); color: #04121c; font: 400 13px/1.3 var(--pixel); letter-spacing: .06em; border: 2px solid #b6f4fb; }
dialog { border-radius: 4px; border: 2px solid var(--r-line); background: linear-gradient(180deg, #0a1a2c, #050c17); }
.modal-head h2 { font: 400 34px var(--term); color: var(--r-cyan); }
.field input[type=text] { border-radius: 2px; font: 400 24px var(--term); }

/* ---------- HUD ---------- */
.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 8px 0 28px; }
.hud-box {
  justify-self: start; min-width: 130px; padding: 9px 16px 8px;
  border: 2px solid var(--r-line); background: rgba(4, 10, 20, .8); border-radius: 2px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .6);
}
.hud-box.right { justify-self: end; text-align: right; }
.hud-box small, .hud-mid small { display: block; font: 400 10px/1 var(--pixel); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.hud-box b { display: block; margin-top: 6px; font: 400 40px/.9 var(--term); color: var(--r-cyan); text-shadow: 0 0 10px rgba(114, 228, 243, .6); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hud-box b.neg::before { content: '-'; }
.hud-box b.neg::after { content: '.'; animation: blink 1.1s steps(1) infinite; }
.hud-box b.pink { color: var(--r-pink); text-shadow: 0 0 10px rgba(255, 93, 126, .6); }
@keyframes blink { 50% { opacity: 0; } }
.hud-mid { text-align: center; }
.hud-mid small { margin-top: 9px; }
.pips { gap: 5px; justify-content: center; }
.pip { width: 16px; height: 16px; border-radius: 0; border: 2px solid var(--r-line); background: rgba(4, 10, 20, .8); font-size: 0; transform: none; }
.pip.now { background: var(--r-pink); border-color: #ffb3c2; box-shadow: 0 0 10px rgba(255, 93, 126, .8); transform: none; animation: pipPulse 1s steps(2) infinite; }
@keyframes pipPulse { 50% { box-shadow: 0 0 2px rgba(255, 93, 126, .4); } }
.pip.t-p { background: var(--t-p); border-color: var(--t-p); }
.pip.t-c { background: var(--t-c); border-color: var(--t-c); }
.pip.t-s { background: var(--r-amber); border-color: var(--r-amber); }
.pip.t-r { background: var(--t-r); border-color: var(--t-r); }
.pip.t-d { background: var(--t-d); border-color: var(--t-d); }
.pip.t-k { background: var(--r-pink); border-color: #fff; box-shadow: 0 0 10px var(--r-pink); }
.pip.t-x { background: #1a2633; border-color: #33475a; }
.pip.hit { animation: pipPop .35s steps(3); }

/* the score line used by other modes */
.game-top { margin: 6px 0 22px; padding-bottom: 14px; border-bottom: 1px dashed var(--r-line); }
.score-now { font: 400 30px/1 var(--term); color: var(--r-cyan); text-shadow: 0 0 10px rgba(114, 228, 243, .5); }
.score-now small { font: 400 10px var(--pixel); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-shadow: none; }

/* ---------- prompt card ---------- */
.prompt-card {
  position: relative; margin: 0 auto 30px; max-width: 640px; padding: 26px 28px 22px;
  border: 3px solid #2b5b74; background: linear-gradient(180deg, rgba(10, 24, 40, .94), rgba(6, 14, 26, .94));
  box-shadow: 0 0 0 2px #061019, 0 0 40px rgba(0, 0, 0, .5), inset 0 0 30px rgba(0, 0, 0, .35);
  animation: cardBoot .45s steps(6) both;
}
@keyframes cardBoot { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pc-label { display: block; font: 400 12px/1 var(--pixel); letter-spacing: .4em; text-transform: uppercase; color: var(--r-pink); margin-bottom: 16px; }
.pc-label span { color: var(--ink-faint); letter-spacing: .2em; }
.prompt-q { font: 400 clamp(40px, 8.4vw, 60px)/1.05 var(--term); letter-spacing: .03em; color: var(--ink); text-shadow: 0 0 1px #fff, 0 0 14px rgba(160, 230, 245, .25); margin-bottom: 0; min-height: 0; }
.prompt-card .prompt-q { margin-bottom: 12px; }
.pc-sub { color: var(--ink-soft); font-size: 17px; }
.prompt-q .w { animation: none; opacity: 1; transform: none; }
#stage > .prompt-q, .blitz-card .prompt-q, main > .screen > .prompt-q { margin-bottom: 22px; }

/* ---------- answer row with timer dial ---------- */
.guess { gap: 12px; align-items: center; margin-top: 18px; }
.guess input {
  height: 58px; border-radius: 0; border: 2px solid var(--r-line-hi); background: rgba(3, 9, 17, .9);
  font: 400 28px/1 var(--term); letter-spacing: .06em; color: var(--ink); padding: 0 16px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .7);
}
.guess input::placeholder { color: var(--ink-faint); font-weight: 400; }
.guess input:focus { border-color: var(--r-cyan); box-shadow: inset 0 0 14px rgba(0, 0, 0, .7), 0 0 0 2px rgba(114, 228, 243, .25), 0 0 22px rgba(114, 228, 243, .25); }
.guess .btn { height: 58px; border-radius: 0; padding: 0 24px; font-size: 17px; letter-spacing: .26em; }
.dial { position: relative; flex: none; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #0b1d30, #050c17); box-shadow: 0 0 0 2px #10283a, 0 0 18px rgba(114, 228, 243, .2); }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(0deg); }
.dial-bg { fill: none; stroke: #143047; stroke-width: 3; }
.dial-arc { fill: none; stroke: var(--r-cyan); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 24px 24px; transition: stroke-dashoffset .1s linear; filter: drop-shadow(0 0 3px var(--r-cyan)); }
.dial-hand { stroke: rgba(114, 228, 243, .6); stroke-width: 1.5; stroke-linecap: round; transform-origin: 24px 24px; transition: transform .1s linear; }
.dial b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 30px/1 var(--term); color: var(--r-cyan); text-shadow: 0 0 8px rgba(114, 228, 243, .7); }
.dial.low .dial-arc { stroke: var(--r-pink); filter: drop-shadow(0 0 4px var(--r-pink)); }
.dial.low b { color: var(--r-pink); animation: blink .5s steps(1) infinite; }
.tank { border-radius: 0; border: 2px solid var(--r-line); background: rgba(3, 9, 17, .9); height: 12px; }
.tank-fill { border-radius: 0; background: repeating-linear-gradient(90deg, var(--r-cyan) 0 10px, #4bbfd0 10px 12px); box-shadow: 0 0 12px rgba(114, 228, 243, .5); }
.tank-fill::after { display: none; }
.tank.low .tank-fill { background: repeating-linear-gradient(90deg, var(--r-pink) 0 10px, #c9405e 10px 12px); }
.tank.thin { height: 6px; border-width: 1px; margin: 8px 0 0 82px; }
.tank-label { font: 400 10px var(--pixel); letter-spacing: .2em; text-transform: uppercase; }
.tank-label b { font: 400 24px var(--term); }
.hint-line { font-size: 14px; }
@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .hud-mid { grid-column: 1 / -1; grid-row: 1; }
  .hud-box { min-width: 0; width: 100%; }
  .hud-box b { font-size: 32px; }
  .prompt-card { padding: 20px 18px 18px; }
  .pc-label { letter-spacing: .28em; font-size: 11px; }
  .dial-row { flex-wrap: wrap; }
  .dial-row .dial { width: 58px; height: 58px; }
  .dial b { font-size: 26px; }
  .dial-row input { flex: 1 1 0; min-width: 0; }
  .dial-row .btn { flex: 1 0 100%; }
  .tank.thin { margin-left: 0; }
}

/* ---------- reveal ---------- */
.tier-badge { border-radius: 2px; font: 400 13px/1 var(--pixel); letter-spacing: .16em; text-transform: uppercase; padding: 10px 16px 10px 10px; }
.tier-badge .em { font-size: 24px; }
.reveal-answer { font: 400 clamp(46px, 11vw, 72px)/1 var(--term); letter-spacing: .03em; }
.reveal-pts { font: 400 26px/1 var(--term); }
.reveal-extra h4 { font: 400 11px var(--pixel); letter-spacing: .2em; text-transform: uppercase; color: var(--r-cyan); }
.crowd-bar { border-radius: 0; height: 10px; }
.crowd-bar i { border-radius: 0; }

/* ---------- results ---------- */
.sum-depth { font: 400 clamp(90px, 24vw, 160px)/.85 var(--term); color: var(--r-cyan); text-shadow: 0 0 30px rgba(114, 228, 243, .5); }
.sum-depth small { color: var(--ink-soft); }
.sum-band { font: 400 30px/1.1 var(--term); }
.sum-band span { color: var(--r-pink); }
.rounds .a { font: 400 26px/1.1 var(--term); }
.rounds .pts { font: 400 26px/1 var(--term); color: var(--r-cyan); }
.pf-line { stroke: var(--r-cyan); }
.pf-lab { font-family: var(--pixel); font-size: 10px; }

/* ---------- home ---------- */
.home-hero { padding-top: 22px; }
.mode-art svg { stroke: var(--r-cyan); }
.zone-card b { font: 400 clamp(64px, 17vw, 140px)/.9 var(--term); letter-spacing: .02em; }
.zone-card small { font: 400 13px var(--pixel); letter-spacing: .4em; text-transform: uppercase; color: var(--r-pink); }
.badge-pop { border-radius: 3px; background: #0a1a2c; border: 2px solid var(--r-pink); }
.badge-pop small { font: 400 10px var(--pixel); letter-spacing: .2em; text-transform: uppercase; }
.badge-pop b { font: 400 26px var(--term); }
.countdown b { font: 400 clamp(160px, 50vw, 280px)/1 var(--term); }
.sonar-time { border-radius: 2px; }
.sonar-time b { font: 400 36px/1 var(--term); }
.sonar-wrap canvas { border: 2px solid var(--r-line); }

/* ---------- sounding line ---------- */
.tick.major::after { font: 400 10px/1 var(--pixel); letter-spacing: .1em; }
.sounding-marker span { font: 400 18px/1 var(--term); border-radius: 0; border: 1px solid var(--r-line); }

@media (prefers-reduced-motion: reduce) {
  .prompt-card, .pip.now, .hud-box b.neg::after, .dial.low b { animation: none !important; }
}

/* reveal sits in the same terminal card as the prompt */
#stage > .reveal {
  margin: 0 auto; max-width: 640px; padding: 24px 28px 24px;
  border: 3px solid var(--tc, #2b5b74); background: linear-gradient(180deg, rgba(10, 24, 40, .94), rgba(6, 14, 26, .94));
  box-shadow: 0 0 0 2px #061019, 0 0 36px color-mix(in srgb, var(--tc, #2b5b74) 22%, transparent), inset 0 0 30px rgba(0, 0, 0, .35);
  animation: cardBoot .4s steps(5) both;
}
#stage > .reveal.tc-x { --tc: #3a4a5a; }
.prompt-q { word-spacing: -.18em; }
@media (max-width: 560px) { #stage > .reveal { padding: 20px 18px; } }