/* PLANKTILLION UNLIMITED — hand-set styles. One font, hard pixels, no rounded corners. */

:root {
  --ink: #e8f1ff;
  --dim: #7d93b8;
  --deep: #050a14;
  --panel: #101d33;
  --panel-glass: rgba(11, 21, 38, 0.82);
  --hairline: #7d93b838;
  --cyan: #4de3ff;
  --pink: #ff5d8f;
  --pink-lite: #ff8fb3;
  --pink-dark: #b33059;
  --lip: #123048;
  --tier-miss: #3d4f6e;
  --tier-plankton: #8fa3c4;
  --tier-schooler: #4de3ff;
  --tier-rare: #ff5252;
  --tier-deepcut: #9d7bff;
  --tier-planktillion: #ffd166;
  --tier-tooclever: #ff9f43;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* every display:flex/grid rule below outranks the UA's [hidden] rule, so state
   this once rather than remembering it per component */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: 'VT323', ui-monospace, monospace;
  background: var(--deep);
  color: var(--ink);
  font-size: 20px;
  overflow: hidden;
  -webkit-font-smoothing: none;
}

button, input {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }
img { image-rendering: pixelated; }

/* ---------------------------------------------------------------- stage */

#stage { position: fixed; inset: 0; }
#sea { position: absolute; inset: 0; width: 100%; height: 100%; }

#world { position: absolute; inset: 0; will-change: transform; }

#surface { position: absolute; left: 0; right: 0; top: 0; text-align: center; }

#title {
  font-size: clamp(52px, 13vw, 112px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow:
    -4px 3px 0 var(--pink),
    4px -3px 0 rgba(77, 227, 255, 0.85),
    /* a thin dark keyline so the white core still reads against daylight */
    0 2px 0 rgba(3, 12, 24, 0.55),
    2px 0 0 rgba(3, 12, 24, 0.35),
    -2px 0 0 rgba(3, 12, 24, 0.35),
    0 0 30px rgba(77, 227, 255, 0.35);
}
#title span { display: inline-block; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* the sky behind these is daylight now, so they carry their own dark backing
   rather than relying on a dim background to sit against */
#tagline {
  margin-top: 4px;
  font-size: clamp(18px, 2.6vw, 28px);
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-shadow:
    0 2px 0 rgba(3, 12, 24, 0.85), 0 -1px 0 rgba(3, 12, 24, 0.7),
    1px 0 0 rgba(3, 12, 24, 0.7), -1px 0 0 rgba(3, 12, 24, 0.7),
    0 0 14px rgba(77, 227, 255, 0.45);
}
#subline {
  margin-top: 10px;
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: 0.08em;
  color: #dbeaf9;
  text-shadow: 0 2px 0 rgba(3, 12, 24, 0.8), 0 0 6px rgba(3, 12, 24, 0.6);
}

#boat { position: absolute; width: 156px; animation: boatbob 4.5s ease-in-out infinite; }
@keyframes boatbob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(6px) rotate(1.4deg); }
}

/* ambient depth labels */
.amb {
  position: absolute;
  color: var(--dim);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.amb.L { left: max(18px, 4vw); }
.amb.R { right: max(18px, 4vw); }
.amb .dash { opacity: 0.5; }
.amb.major {
  font-size: 24px;
  letter-spacing: 0.28em;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(77, 227, 255, 0.4), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.tick {
  position: absolute; left: 6px;
  color: #55688c; font-size: 14px; letter-spacing: 0.05em; opacity: 0.7;
}

/* tier lines shown while an answer sinks */
.tierline {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--tc) 45%, transparent);
  opacity: 0;
  transition: opacity 0.5s;
}
.tierline.on { opacity: 1; }
.tierline .tag {
  position: absolute; right: max(14px, 3vw); top: -12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; letter-spacing: 0.14em; color: var(--tc);
  background: var(--deep); padding: 2px 9px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 32%, transparent);
  white-space: nowrap;
}
.tierline .tag img { width: 22px; height: 22px; }
@media (max-width: 720px) {
  .tierline .tag { font-size: 13px; padding: 1px 6px; gap: 5px; right: 8px; }
  .tierline .tag img { width: 17px; height: 17px; }
}

/* the sinking answer chip.
   --chip-lift is set from JS to half the word's height, so the word straddles
   the tier line instead of hanging underneath it. The sway and tilt during the
   descent are written into this same transform, so JS owns it once it starts. */
#chip {
  position: absolute; left: 50%;
  transform: translate(-50%, var(--chip-lift, 0px));
  text-align: center;
  transition: top 2.1s cubic-bezier(0.55, 0.02, 0.85, 0.6);
  z-index: 3;
}
#chip .word {
  display: inline-block;
  background: var(--panel-glass);
  padding: 6px 16px;
  font-size: 30px;
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
}
#chip .landing {
  /* block-level flex so it sits on its own line under the word, not beside it */
  display: flex; align-items: center; gap: 8px;
  width: fit-content; margin: 12px auto 0;
  font-size: 20px; letter-spacing: 0.18em;
  color: var(--tc, var(--dim));
  opacity: 0; transform: scale(0.5);
  background: rgba(5, 10, 20, 0.82); padding: 3px 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc, var(--dim)) 40%, transparent);
}
#chip .landing img { width: 26px; height: 26px; }
#chip .quip {
  margin: 10px auto 0; max-width: min(420px, 86vw);
  font-size: 19px; color: var(--ink); opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s 0.28s, transform 0.45s 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
#chip.landed .landing { animation: pop 0.32s cubic-bezier(0.3, 1.7, 0.5, 1) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
#chip.landed .quip { opacity: 1; transform: translateY(0); }
#chip .word { transition: transform 0.2s; }
#chip.landed .word { animation: squash 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes squash { 0% { transform: scale(1.06, 0.9); } 55% { transform: scale(0.97, 1.04); } 100% { transform: scale(1, 1); } }

/* prompt card */
#card {
  position: absolute; left: 50%; top: 24%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  text-align: center;
  background: var(--panel-glass);
  padding: 22px 26px 18px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--hairline), 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 4;
}
#card { animation: cardIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.18); }
@keyframes cardIn { from { opacity: 0; transform: translateX(-50%) translateY(-26px); } }
#card .rnd { font-size: 16px; letter-spacing: 0.3em; color: var(--dim); }
#card .prompt { margin-top: 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
#card .hint { margin-top: 10px; font-size: 15px; letter-spacing: 0.2em; color: var(--dim); animation: blink 2.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
#card.gone { opacity: 0; transform: translateX(-50%) translateY(18px); transition: opacity 0.35s, transform 0.35s ease-in; }

/* overlays */
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2, 6, 12, 0.55) 100%);
}
#crt {
  position: absolute; inset: -10% 0; pointer-events: none; z-index: 7;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 4px);
  animation: crtroll 9s linear infinite;
}
@keyframes crtroll { from { transform: translateY(0); } to { transform: translateY(4px); } }
#flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: #fff; opacity: 0;
}
#flash.zap { animation: zap 0.45s steps(3) forwards; }
@keyframes zap { 0% { opacity: 0.22; } 100% { opacity: 0; } }

#stage.shake-sm { animation: shakeS 0.26s steps(2); }
#stage.shake-lg { animation: shakeL 0.5s steps(2); }
@keyframes shakeS {
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(1px, 1px); }
}
@keyframes shakeL {
  20% { transform: translate(5px, -4px); }
  40% { transform: translate(-5px, 4px); }
  60% { transform: translate(4px, 2px); }
  80% { transform: translate(-3px, -2px); }
}

/* HUD */
#hud {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 10; pointer-events: none;
}
.pod {
  background: var(--panel-glass);
  padding: 8px 16px 6px;
  min-width: 118px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
}
.pod .label { font-size: 14px; letter-spacing: 0.32em; color: var(--dim); }
.pod .num { font-size: 38px; line-height: 1; margin-top: 2px; }
.pod .num.bump { animation: bump 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bump { 30% { transform: scale(1.18); color: var(--cyan); } }
.pod .sub { font-size: 13px; letter-spacing: 0.2em; color: var(--dim); margin-top: 2px; }
.pod.right { text-align: right; }
.hud-mid { text-align: center; padding-top: 6px; }
#dots { display: flex; gap: 8px; justify-content: center; }
#dots i {
  width: 9px; height: 9px; background: #22344f;
  box-shadow: 0 0 0 1px var(--deep);
}
#dots i.cur { background: var(--cyan); box-shadow: 0 0 0 1px var(--deep), 0 0 8px rgba(77, 227, 255, 0.7); animation: dotpulse 1.3s ease-in-out infinite; }
@keyframes dotpulse { 50% { transform: scale(1.35); } }
#promptCount { margin-top: 7px; font-size: 14px; letter-spacing: 0.3em; color: var(--dim); }

/* battle rail */
#rail {
  position: absolute; right: 14px; top: 108px; z-index: 10;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.rail-p {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-glass); padding: 4px 10px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
  font-size: 17px; min-width: 150px;
}
.rail-p .dot { width: 8px; height: 8px; background: #22344f; flex: none; }
.rail-p.answered .dot { background: var(--cyan); box-shadow: 0 0 6px rgba(77, 227, 255, 0.8); }
.rail-p.me { outline: 1px solid var(--hairline); }
.rail-p .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-p .dp { color: var(--dim); font-size: 15px; }
.rail-p .nm.t0 { color: #7fd4ff; }
.rail-p .nm.t1 { color: var(--pink-lite); }

/* mascot */
#mascot { position: absolute; left: 16px; bottom: 96px; z-index: 9; pointer-events: none; }
#mascotSprite { width: 52px; animation: bob 2.6s ease-in-out infinite; }
#blub {
  position: absolute; left: 54px; top: -8px;
  background: var(--panel-glass); color: var(--dim);
  font-size: 15px; padding: 2px 8px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
  opacity: 0; transition: opacity 0.3s;
  white-space: nowrap;
}
#blub.on { opacity: 1; }

#mute {
  position: absolute; right: 14px; bottom: 96px; z-index: 11;
  width: 40px; height: 40px; font-size: 22px; color: var(--dim);
  background: var(--panel-glass);
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
}
#mute.off { color: #3d4f6e; text-decoration: line-through; }

/* ---------------------------------------------------------------- UI screens */

#ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.screen[hidden] { display: none; }
.screen:not([hidden]) { animation: fadeIn 0.24s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.screen.scroll { overflow-y: auto; align-items: flex-start; padding: 48px 0 80px; }

/* the stack is bottom-anchored and grows upward, so the padding below it is
   what keeps it clear of the title floating above the waterline */
#screen-intro { align-items: flex-end; padding-bottom: 8vh; background: none; pointer-events: none; }
#screen-intro .stack { pointer-events: auto; }
#screen-intro .legal-strip { max-width: min(520px, 88vw); }

.stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* stretch, not center: the sword glyph is taller than the infinity sign, and
   buttons that disagree about their own height look broken side by side */
.row { display: flex; gap: 18px; align-items: stretch; justify-content: center; }

/* buttons */
.big {
  font-size: 28px; letter-spacing: 0.18em;
  color: var(--ink); background: var(--panel);
  padding: 12px 34px;
  box-shadow:
    0 0 0 3px var(--deep),
    0 0 0 6px var(--cyan),
    0 6px 0 6px var(--lip),
    0 0 26px rgba(77, 227, 255, 0.25);
  animation: pulseglow 2.8s ease-in-out infinite;
}
@keyframes pulseglow {
  0%, 100% { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 6px 0 6px var(--lip), 0 0 26px rgba(77, 227, 255, 0.25); }
  50% { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 6px 0 6px var(--lip), 0 0 40px rgba(77, 227, 255, 0.5); }
}
.big:active { transform: translateY(4px); }

.mid {
  font-size: 21px; letter-spacing: 0.14em;
  line-height: 1.25; /* fixed, so a tall glyph can't stretch one button */
  color: var(--ink); background: var(--panel);
  padding: 8px 22px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px #2a4468, 0 4px 0 4px var(--lip);
}
.mid:hover { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan), 0 4px 0 4px var(--lip); }
.mid:active { transform: translateY(3px); }
.mid.wide { width: 100%; }

.pink, .big.pink {
  background: var(--pink); color: #0b1526;
  box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--pink-lite), 0 6px 0 6px var(--pink-dark), 0 0 26px rgba(255, 93, 143, 0.3);
  animation: none;
}
.mid.pink { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--pink-lite), 0 4px 0 4px var(--pink-dark); }

.ghost {
  font-size: 17px; letter-spacing: 0.22em; color: var(--dim);
  background: rgba(11, 21, 38, 0.75); padding: 5px 16px;
  box-shadow: 0 0 0 2px rgba(6, 13, 26, 0.9);
}
.ghost:hover { color: var(--ink); }

.fine { font-size: 15px; letter-spacing: 0.12em; color: var(--dim); text-align: center; }

/* panels */
.panel {
  width: min(560px, 92vw);
  background: rgba(8, 16, 30, 0.93);
  padding: 28px 30px 26px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--hairline), 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.wide-panel { width: min(680px, 94vw); }
.panel-title {
  font-size: 28px; letter-spacing: 0.3em;
  /* letter-spacing leaves a trailing gap; pull it back so the title sits centred */
  padding-left: 0.3em;
  color: var(--ink);
  text-shadow: -1px 1px 0 rgba(255, 93, 143, 0.55), 1px -1px 0 rgba(77, 227, 255, 0.45);
}
/* keep buttons at their natural width instead of stretching across the panel */
.panel > button { align-self: center; }
.panel > button.wide { align-self: stretch; }
.panel p { color: var(--ink); font-size: 20px; line-height: 1.35; }
.panel p em { color: var(--cyan); font-style: normal; }
.panel .err { color: var(--tier-rare); font-size: 17px; letter-spacing: 0.06em; min-height: 20px; }
.field-label { font-size: 14px; letter-spacing: 0.3em; color: var(--dim); text-align: left; }
.gap { height: 4px; }

.panel input {
  background: #0a1424; color: var(--ink);
  font-size: 24px; letter-spacing: 0.06em;
  padding: 8px 12px; width: 100%;
  box-shadow: inset 0 0 0 2px #1a2c49;
  caret-color: var(--cyan);
}
.panel input::placeholder { color: #45597c; }
input#codeInput { width: 120px; text-transform: uppercase; letter-spacing: 0.4em; text-align: center; }
input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cyan); }
.or-line { color: var(--dim); font-size: 15px; letter-spacing: 0.2em; margin: 2px 0; }

.code-display {
  font-size: clamp(44px, 12vw, 62px);
  letter-spacing: 0.35em; line-height: 1.1;
  color: var(--cyan); cursor: pointer;
  text-shadow: 0 0 18px rgba(77, 227, 255, 0.5);
  padding-left: 0.35em; /* optical centering against letterspacing */
  margin-bottom: -4px;
}
.code-display:hover { color: var(--ink); }

.lobby-players { display: flex; flex-direction: column; gap: 6px; }
.lobby-p {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-glass); padding: 6px 14px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
  font-size: 21px; text-align: left;
}
.lobby-p .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-p .badge {
  font-size: 12px; letter-spacing: 0.2em; color: var(--tier-planktillion);
  padding: 1px 7px; box-shadow: 0 0 0 1px #ffd16644; flex: none;
}
.lobby-p .team-chip { font-size: 14px; letter-spacing: 0.15em; padding: 1px 8px; }
.team-chip.t0 { color: #7fd4ff; box-shadow: 0 0 0 1px #7fd4ff55; }
.team-chip.t1 { color: var(--pink-lite); box-shadow: 0 0 0 1px #ff8fb355; }
.lobby-p.gone { opacity: 0.4; }

.lobby-teams { display: flex; gap: 12px; justify-content: center; }
.team-btn { font-size: 18px; letter-spacing: 0.12em; padding: 6px 16px; background: var(--panel); }
.team-btn.t0 { color: #7fd4ff; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px #23739e, 0 3px 0 4px var(--lip); }
.team-btn.t1 { color: var(--pink-lite); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px #a04a6b, 0 3px 0 4px var(--pink-dark); }

.cfg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 3px 0;
}
.cfg-label { font-size: 14px; letter-spacing: 0.28em; color: var(--dim); }
.cfg-btn {
  font-size: 17px; letter-spacing: 0.1em; color: var(--cyan);
  background: #0a1424; padding: 5px 14px;
  box-shadow: inset 0 0 0 2px #1a2c49;
  min-width: 172px; text-align: center; flex: none; /* both rows line up on the right */
}
.cfg-btn:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
#hostControls { display: flex; flex-direction: column; gap: 4px; }
#hostControls .big { align-self: center; margin-top: 6px; }

/* the six values an answer can be worth */
.score-key { display: flex; flex-direction: column; gap: 2px; }
.key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; text-align: left; font-size: 17px;
  background: rgba(11, 21, 38, 0.5);
}
.key-row img { width: 22px; height: 22px; flex: none; }
.key-row .val { width: 34px; flex: none; text-align: right; font-size: 20px; }
.key-row .nm { width: 96px; flex: none; font-size: 14px; letter-spacing: 0.12em; }
.key-row .note { color: var(--dim); font-size: 15px; }
@media (max-width: 560px) {
  .key-row .note { display: none; }
  .key-row .nm { width: auto; }
}

/* bearing list (howto + results) */
.bearing-list { display: flex; flex-direction: column; }
.bearing-row {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 4px; text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: 18px;
}
.bearing-row img { width: 26px; height: 26px; flex: none; }
.bearing-row .range { width: 96px; flex: none; letter-spacing: 0.06em; font-size: 17px; }
.bearing-row .desc { color: var(--dim); }
.bearing-row.active { background: rgba(77, 227, 255, 0.06); }
.bearing-row.active .desc { color: var(--ink); }

/* results */
.res-head { font-size: 15px; letter-spacing: 0.35em; color: var(--dim); text-align: left; border-bottom: 1px dashed var(--hairline); padding-bottom: 4px; margin-top: 10px; }
.res-bigline { display: flex; align-items: baseline; justify-content: center; gap: 18px; }
.res-bigline .meters { font-size: 58px; color: var(--cyan); text-shadow: 0 0 18px rgba(77, 227, 255, 0.4); }
.res-bigline .pts { font-size: 26px; color: var(--dim); }
.res-verdict { font-size: 24px; letter-spacing: 0.08em; }
#diveChart { width: 100%; height: 190px; image-rendering: pixelated; }

.catch-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--hairline); text-align: left; }
.catch-row .n { color: var(--dim); width: 18px; flex: none; font-size: 16px; }
.catch-row img { width: 26px; height: 26px; flex: none; }
.catch-row .mid-col { flex: 1; min-width: 0; }
.catch-row .cat { font-size: 13px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }
.catch-row .ans { font-size: 23px; line-height: 1.1; }
.catch-row .ans.missed { color: var(--tier-miss); }
.catch-row .quip { font-size: 15px; color: var(--dim); }
.catch-row .sc { font-size: 24px; width: 48px; text-align: right; flex: none; }
.catch-row .sc small { display: block; font-size: 12px; letter-spacing: 0.1em; color: var(--dim); }

/* standings */
.stand-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--hairline); font-size: 22px; text-align: left; }
.stand-row .rank { width: 30px; color: var(--dim); flex: none; }
.stand-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-row .depth { color: var(--cyan); }
.stand-row .pts { color: var(--dim); font-size: 17px; width: 70px; text-align: right; }
.stand-row.winner .nm { color: var(--tier-planktillion); text-shadow: 0 0 10px rgba(255, 209, 102, 0.4); }
.stand-row.me-row { background: rgba(77, 227, 255, 0.05); }
.team-card { background: var(--panel-glass); padding: 12px 16px; box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline); flex: 1; }
.team-card .tname { font-size: 22px; letter-spacing: 0.2em; }
.team-card .tsum { font-size: 40px; color: var(--cyan); }
.team-card .tavg { font-size: 15px; color: var(--dim); }
.team-card.winner { box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--tier-planktillion); }
.team-card.winner .tname { color: var(--tier-planktillion); }

/* reveal overlay */
#reveal {
  position: absolute; inset: 0; z-index: 22;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  background: rgba(3, 7, 14, 0.55);
}
#reveal[hidden] { display: none; }
#reveal:not([hidden]) .panel { animation: riseIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } }
.rev-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--hairline); font-size: 20px; text-align: left; }
.rev-row img { width: 24px; height: 24px; flex: none; }
.rev-row .nm { width: 128px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.rev-row .nm.t0 { color: #7fd4ff; } .rev-row .nm.t1 { color: var(--pink-lite); }
.rev-row .ans { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-row .ans .col { color: var(--tier-tooclever); font-size: 14px; letter-spacing: 0.1em; }
.rev-row .sc { width: 44px; text-align: right; flex: none; }
.rev-count { font-size: 15px; letter-spacing: 0.25em; color: var(--dim); }

/* dock */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; }
#dock[hidden] { display: none; }
#dock:not([hidden]) .dock-inner { animation: riseIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.dock-inner {
  max-width: 720px; margin: 0 auto 18px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(8, 16, 30, 0.93);
  padding: 12px 16px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--hairline), 0 12px 40px rgba(0, 0, 0, 0.6);
}
.sonar-wrap { position: relative; width: 54px; height: 54px; flex: none; }
.sonar {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #1a2c49, 0 0 12px rgba(77, 227, 255, 0.15);
  overflow: hidden;
}
.sweep {
  position: absolute; inset: 0;
  background: conic-gradient(rgba(77, 227, 255, 0.5), transparent 70deg, transparent);
  animation: sweep 2s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.time {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--cyan);
  text-shadow: 0 0 8px rgba(77, 227, 255, 0.6);
}
.time.low { color: var(--tier-rare); text-shadow: 0 0 8px rgba(255, 82, 82, 0.6); }
.input-col { flex: 1; }
#answerInput {
  width: 100%; font-size: 27px; letter-spacing: 0.04em;
  background: #0a1424; padding: 7px 14px;
  box-shadow: inset 0 0 0 2px #1a2c49;
  caret-color: var(--cyan);
}
#answerInput:focus { box-shadow: inset 0 0 0 2px var(--cyan); }
#answerInput:disabled { opacity: 0.45; }
.fuse { height: 5px; background: #0a1424; margin-top: 5px; }
.fuse-fill { height: 100%; width: 100%; background: var(--cyan); }
#answerInput.shake { animation: inshake 0.32s; }
@keyframes inshake {
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
  90% { transform: translateX(2px); }
}
.retry-msg {
  position: absolute;
  font-size: 15px; letter-spacing: 0.16em;
  color: var(--tier-rare);
  margin-top: 3px;
  opacity: 0; pointer-events: none;
}
.retry-msg.on { animation: retryflash 1.5s ease-out forwards; }
@keyframes retryflash {
  0% { opacity: 0; transform: translateY(-3px); }
  8% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
.input-col { position: relative; }
.fuse-fill.low { background: var(--tier-rare); }
#diveBtn {
  font-size: 26px; letter-spacing: 0.2em;
  color: #0b1526; background: var(--pink);
  padding: 9px 26px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--pink-lite), 0 4px 0 4px var(--pink-dark);
}
#diveBtn:active { transform: translateY(3px); }
#diveBtn:disabled { opacity: 0.45; cursor: default; }

#toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: var(--panel); color: var(--cyan);
  font-size: 18px; letter-spacing: 0.12em;
  padding: 8px 20px; z-index: 40;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan);
}
#toast[hidden] { display: none; }

/* ------------------------------------------------------------------ footer */

.row.nowrap { flex-wrap: nowrap; }

.legal-strip { font-size: 14px; letter-spacing: 0.06em; color: #55688c; text-align: center; line-height: 1.6; }
.legal-strip a { color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--hairline); }
.legal-strip a:hover { color: var(--cyan); }

.mini {
  flex: none;
  font-size: 14px; letter-spacing: 0.16em;
  color: var(--ink); background: var(--panel);
  padding: 3px 10px;
  box-shadow: 0 0 0 1px var(--deep), 0 0 0 2px #2a4468;
}
.mini:hover { box-shadow: 0 0 0 1px var(--deep), 0 0 0 2px var(--cyan); }
.mini:disabled { opacity: 0.4; cursor: default; box-shadow: 0 0 0 1px var(--deep), 0 0 0 2px #2a4468; }
.mini.ghosty { color: var(--dim); background: none; box-shadow: 0 0 0 1px var(--hairline); }
.mini.ghosty:hover { color: var(--tier-rare); box-shadow: 0 0 0 1px var(--tier-rare); }

/* ------------------------------------------------------------ public reefs */

.room-list { display: flex; flex-direction: column; gap: 6px; }
.room-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-glass); padding: 8px 13px;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
  text-align: left;
}
.room-row .rm-main { flex: 1; min-width: 0; }
.room-row .rm-name { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .rm-sub { font-size: 14px; letter-spacing: 0.12em; color: var(--dim); }
.room-row .rm-count { font-size: 19px; color: var(--cyan); flex: none; }
.room-row.shut { opacity: 0.5; }
.room-row.shut .rm-count { color: var(--dim); }

.lobby-name { font-size: 20px; letter-spacing: 0.14em; color: var(--dim); margin-bottom: -8px; }

/* ------------------------------------------------- rivals, out in the water */

/* Pinned into #world at their own depth, so they scroll past as you sink and
   only the ones the camera is looking at are on screen. Left margin, opposite
   the tier-line tags, and built like the ambient depth labels so it reads as
   part of the ocean rather than as UI on top of it. */
.diver-mark {
  position: absolute;
  left: max(18px, 4vw);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  z-index: 2;
  transition: top 1.15s cubic-bezier(0.3, 0.85, 0.35, 1), opacity 0.45s;
}
.diver-mark.on { opacity: 1; }
.diver-mark .dm-dash { color: var(--cyan); opacity: 0.45; font-size: 17px; letter-spacing: -0.1em; }
.diver-mark .dm-name {
  font-size: 17px; letter-spacing: 0.1em; color: var(--ink);
  background: rgba(5, 10, 20, 0.86); padding: 1px 9px;
  box-shadow: 0 0 0 1px var(--hairline);
  max-width: 30vw; overflow: hidden; text-overflow: ellipsis;
}
.diver-mark .dm-depth {
  font-size: 15px; color: var(--dim);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.diver-mark.t0 .dm-name { color: #7fd4ff; box-shadow: 0 0 0 1px #7fd4ff44; }
.diver-mark.t1 .dm-name { color: var(--pink-lite); box-shadow: 0 0 0 1px #ff8fb344; }
.diver-mark.t0 .dm-dash { color: #7fd4ff; }
.diver-mark.t1 .dm-dash { color: var(--pink-lite); }
.diver-mark.adrift { opacity: 0.4; }
.diver-mark.adrift .dm-name { color: var(--dim); }
/* your own line, so the others have something to be measured against */
.diver-mark.me .dm-name {
  color: var(--pink-lite);
  box-shadow: 0 0 0 1px var(--pink), inset 0 0 12px rgba(255, 93, 143, 0.12);
}
.diver-mark.me .dm-dash { color: var(--pink); opacity: 0.75; }
.diver-mark.me .dm-depth { color: var(--pink-lite); }

/* ---------------------------------------------------------------- settings */

.set-note { text-align: left; margin-top: -8px; opacity: 0.85; }
.vol-wrap { display: flex; align-items: center; gap: 10px; flex: none; }
.vol-num { font-size: 17px; color: var(--cyan); width: 36px; text-align: right; }
input[type="range"]#setVolume {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 6px; padding: 0;
  background: #0a1424; box-shadow: inset 0 0 0 2px #1a2c49;
  cursor: pointer;
}
input[type="range"]#setVolume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 18px; background: var(--cyan);
  box-shadow: 0 0 0 2px var(--deep);
}
input[type="range"]#setVolume::-moz-range-thumb {
  width: 14px; height: 18px; border: none; border-radius: 0;
  background: var(--cyan); box-shadow: 0 0 0 2px var(--deep);
}

/* -------------------------------------------------------- category picker */

.cat-picker {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 0 2px;
}
.cat-chip {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; letter-spacing: 0.1em;
  color: var(--dim); background: #0a1424;
  padding: 4px 9px;
  box-shadow: inset 0 0 0 2px #1a2c49;
}
.cat-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 2px #2a4468; }
.cat-chip.on { color: var(--deep); background: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); }
.cat-chip .cc-n { font-size: 12px; opacity: 0.7; }
.cat-chip.all { margin-left: auto; }
.cat-warn { flex-basis: 100%; font-size: 14px; color: var(--tier-tooclever); letter-spacing: 0.05em; }

/* ------------------------------------- the obvious ones nobody said out loud */

.overlooked { margin-top: 14px; opacity: 0; animation: overlookedIn 0.5s ease-out 0.1s forwards; }
@keyframes overlookedIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.overlooked-head { font-size: 13px; letter-spacing: 0.34em; color: var(--dim); margin-bottom: 6px; }
.overlooked-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.ov {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(5, 10, 20, 0.86); padding: 2px 9px;
  font-size: 17px; color: var(--tc, var(--dim));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc, var(--dim)) 34%, transparent);
  white-space: nowrap;
}
.ov img { width: 19px; height: 19px; }
.ov .ov-name { color: var(--ink); }
.ov .ov-score { font-size: 15px; opacity: 0.85; }
#revealPanel .overlooked { text-align: center; border-top: 1px dashed var(--hairline); padding-top: 10px; }
.catch-row .log-overlooked { font-size: 14px; letter-spacing: 0.04em; color: #55688c; margin-top: 2px; }

/* ------------------------------------------- dock: locked in, clock running */

.wait-msg {
  position: absolute;
  font-size: 15px; letter-spacing: 0.16em;
  color: var(--cyan); margin-top: 3px;
  animation: blink 1.8s steps(2) infinite;
}
#dock.frozen #answerInput { opacity: 0.3; }
#dock.frozen .fuse-fill { background: var(--tier-deepcut); }
#dock.frozen #diveBtn { opacity: 0.35; }

#toast button { pointer-events: auto; margin-left: 8px; }
#toast { pointer-events: none; }

/* ------------------------------------------------- motion + scanlines opt-out */

/* The dive itself still sinks — that is the game, not decoration. What goes is
   everything that loops, shakes or flashes without being asked. */
body.reduced-motion #crt,
body.reduced-motion #flash { display: none; }
body.reduced-motion #title span,
body.reduced-motion #mascotSprite,
body.reduced-motion #boat,
body.reduced-motion .big,
body.reduced-motion #dots i.cur,
body.reduced-motion #card .hint,
body.reduced-motion .sweep,
body.reduced-motion .wait-msg { animation: none !important; }
body.reduced-motion #stage.shake-sm,
body.reduced-motion #stage.shake-lg { animation: none !important; }
body.reduced-motion .screen:not([hidden]),
body.reduced-motion #dock:not([hidden]) .dock-inner,
body.reduced-motion #reveal:not([hidden]) .panel { animation: none !important; }
body.reduced-motion .big {
  box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 6px 0 6px var(--lip);
}

body.no-scanlines #crt { display: none; }

@media (max-width: 640px) {
  .dock-inner { margin: 0 8px 10px; gap: 10px; }
  #diveBtn { padding: 9px 14px; }
  .rail-p { min-width: 110px; font-size: 15px; }
  #mascot { display: none; }
  .row { flex-wrap: wrap; }
  .row.nowrap { flex-wrap: nowrap; }
  .wait-msg { font-size: 13px; letter-spacing: 0.08em; }
  .ov { font-size: 15px; }
  .diver-mark { left: 8px; gap: 5px; }
  .diver-mark .dm-name { font-size: 15px; padding: 1px 6px; max-width: 38vw; }
  .diver-mark .dm-depth { font-size: 13px; }
}

/* ------------------------------------------------------ privacy / terms pages */

body.doc { overflow: auto; background: var(--deep); }
.doc-wrap {
  max-width: 760px; margin: 0 auto; padding: 46px 22px 90px;
  position: relative; z-index: 1;
}
.doc-wrap h1 {
  font-size: clamp(38px, 7vw, 58px); font-weight: 400; letter-spacing: 0.06em;
  text-shadow: -3px 2px 0 var(--pink), 3px -2px 0 rgba(77, 227, 255, 0.8);
}
.doc-wrap .sub { font-size: 17px; letter-spacing: 0.2em; color: var(--cyan); margin-top: 4px; }
.doc-wrap .updated { font-size: 15px; color: var(--dim); margin-top: 6px; }
.doc-wrap h2 {
  font-size: 24px; font-weight: 400; letter-spacing: 0.22em;
  color: var(--cyan); margin: 34px 0 8px;
  border-bottom: 1px dashed var(--hairline); padding-bottom: 5px;
}
.doc-wrap p, .doc-wrap li { font-size: 20px; line-height: 1.45; color: var(--ink); margin-bottom: 10px; }
.doc-wrap ul { padding-left: 24px; }
.doc-wrap li::marker { color: var(--dim); }
.doc-wrap strong { color: var(--tier-planktillion); font-weight: 400; }
.doc-wrap a { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted rgba(77, 227, 255, 0.5); }
.doc-wrap a:hover { color: var(--pink-lite); border-color: var(--pink-lite); }
.doc-note {
  background: rgba(11, 21, 38, 0.75); padding: 14px 18px; margin: 18px 0;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--hairline);
  font-size: 18px; color: var(--dim);
}
.doc-back { display: inline-block; margin-top: 34px; }
.doc-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
}

/* ------------------------------------------------- consent bar + ad space */

/* A link-shaped button, so "cookie settings" can be a real button (focusable,
   announced correctly) without looking like one. */
.linkish {
  font: inherit; color: var(--dim); background: none; border: 0; padding: 0;
  text-decoration: none; border-bottom: 1px dotted var(--hairline); cursor: pointer;
}
.linkish:hover { color: var(--cyan); }

/* Sits at the top: the intro screen's own content is bottom-aligned, so a bar
   down there fights the buttons and the legal strip for the same space. */
#consent-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px 20px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, 4vw) 14px;
  background: rgba(6, 13, 26, 0.97);
  box-shadow: 0 2px 0 var(--deep), 0 4px 0 var(--cyan), 0 20px 40px rgba(0, 0, 0, 0.55);
  animation: cbDrop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes cbDrop { from { transform: translateY(-100%); } }
#consent-bar[hidden] { display: none; }
#consent-bar .cb-copy {
  flex: 1 1 460px; max-width: 720px;
  font-size: 17px; line-height: 1.35; color: var(--ink);
}
#consent-bar .cb-copy a { color: var(--cyan); }
#consent-bar .cb-row { display: flex; gap: 10px; flex: none; }
#consent-bar .cb-yes { background: var(--pink); color: #0b1526; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--pink-lite), 0 4px 0 4px var(--pink-dark); }
#consent-bar .cb-no { font-size: 18px; }
@media (max-width: 560px) {
  #consent-bar { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; gap: 10px; }
  #consent-bar .cb-copy { font-size: 15px; flex-basis: 100%; }
  #consent-bar .cb-row { width: 100%; }
  #consent-bar .cb-row .mid { flex: 1; padding: 8px 10px; font-size: 17px; }
}

/* Rails sit in the margin beside the play area and only exist on screens with
   room to spare — the game is the product, ads are not allowed to crowd it.
   1440px is the narrowest width that fits 2x160px rails plus the 720px dock
   with real breathing room either side. */
.ad-rail { display: none; }
@media (min-width: 1440px) {
  .ad-rail {
    display: block; position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 12; pointer-events: auto;
  }
  .ad-rail.left { left: 16px; }
  .ad-rail.right { right: 16px; }
}
/* the box is sized before anything loads, so an arriving ad shifts nothing */
.ad-slot {
  width: 160px; height: 600px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 21, 38, 0.35);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.ad-slot .ad-note {
  font-size: 12px; letter-spacing: 0.3em; color: #33465f;
}

/* When the rails are on screen the game's own furniture has to move inboard,
   or the battle player-list and the ad share the same 160px of right margin. */
@media (min-width: 1440px) {
  #hud { left: 196px; right: 196px; }
  #rail { right: 196px; }
  #mascot { left: 196px; }
  #mute { right: 196px; }
}

/* --------------------------------------------------------------- boot veil */

/* Removed by app.js once the world exists. Styled inline-cheap so it can paint
   before style.css has even finished, and given the same palette so the load
   reads as part of the game rather than as a gap before it. */
#boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--deep);
  transition: opacity 0.4s ease-out;
  /* Hidden for the first 220ms. A fast load removes the veil before this fires
     and the player never sees a splash at all; a slow one still gets covered
     instead of staring at a black rectangle. */
  opacity: 0;
  animation: bootReveal 0s linear 0.22s forwards;
}
@keyframes bootReveal { to { opacity: 1; } }
#boot.gone { opacity: 0; pointer-events: none; }
#boot .boot-inner { text-align: center; }
#boot .boot-title {
  font-size: clamp(34px, 8vw, 64px); letter-spacing: 0.08em; color: var(--ink);
  /* deliberately NO chromatic offsets here. The title's pink and cyan shadows
     overlap into magenta while the pixel font is still swapping in, which reads
     as a purple smear rather than as the logo. The real title gets them; this
     stand-in has half a second to live and only has to look calm. */
  text-shadow: 0 2px 0 rgba(3, 12, 24, 0.8);
}
#boot .boot-sub { margin-top: 10px; font-size: 17px; letter-spacing: 0.24em; color: var(--dim); }
#boot .boot-bar {
  margin: 22px auto 0; width: min(240px, 60vw); height: 6px;
  background: #0a1424; box-shadow: inset 0 0 0 2px #1a2c49; overflow: hidden;
}
#boot .boot-bar i {
  display: block; height: 100%; width: 40%; background: var(--cyan);
  animation: bootslide 1.1s ease-in-out infinite;
}
@keyframes bootslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
body.reduced-motion #boot .boot-bar i { animation: none; width: 100%; }

/* The footer sits over sunlit water now, not a dark void, so it carries its own
   backing rather than relying on the background being dim. */
#screen-intro .legal-strip {
  background: rgba(5, 12, 24, 0.72);
  padding: 8px 14px;
  color: #a9bcd6;
  box-shadow: 0 0 0 1px rgba(125, 147, 184, 0.18);
}
#screen-intro .legal-strip a,
#screen-intro .legal-strip .linkish { color: #cfe0f2; }

@media (max-width: 640px) {
  /* the sound button lives at bottom-right; reserve its lane so the footer
     text does not run underneath it */
  #screen-intro .legal-strip { margin-bottom: 46px; }
}

/* same problem as the footer: this line sits on lit water, so it needs its own
   dark backing rather than a dim colour that assumed a dark background */
#introFine {
  color: #b9cbe2;
  text-shadow: 0 2px 0 rgba(3, 12, 24, 0.85), 0 0 8px rgba(3, 12, 24, 0.7);
}