/* Krillion — a krillion tribute. Design system per docs/ART_STYLE.md */

:root {
  --abyss: #050a14;
  --shallow: #101d33;
  --line: #1b2c47;
  --drift: #7d93b8;
  --foam: #e8f1ff;
  --hairline: #7d93b838;
  --lumen-cyan: #4de3ff;
  --lumen-pink: #ff5d8f;

  --tier-plankton: #8fa3c4;
  --tier-tooclever: #ff9f43;
  --tier-schooler: #4de3ff;
  --tier-rare: #ff7bac;
  --tier-deepcut: #9d7bff;
  --tier-krillion: #ffd166;
  --tier-miss: #3d4f6e;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);

  --font-pixel: 'VT323', 'Courier New', monospace;
}

:root.colorblind {
  --drift: #dbe5f5;
  --hairline: #c6d5ec80;
  --tier-plankton: #d7e1f2;
  --tier-tooclever: #ffb35c;
  --tier-schooler: #7deaff;
  --tier-rare: #ff7bac;
  --tier-deepcut: #bfa7ff;
  --tier-krillion: #ffe08a;
  --tier-miss: #a3b6d6;
}

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

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--abyss);
  color: var(--foam);
  font-family: var(--font-pixel);
  font-size: 20px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}

#sea {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

.crt {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, #00000022 2px 3px);
  mix-blend-mode: multiply;
}

.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, #02050bcc 100%);
}

/* ---------- chrome ---------- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #050a14e6, #050a1400);
}

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand img { align-self: center; image-rendering: pixelated; }
.brand-name { font-size: 26px; letter-spacing: .12em; color: var(--foam); text-shadow: 0 0 12px var(--lumen-cyan); }
.brand-sub { font-size: 16px; color: var(--drift); letter-spacing: .08em; }

.hud { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.hud-item { color: var(--drift); font-size: 16px; letter-spacing: .1em; }
.hud-item b { color: var(--foam); font-size: 22px; margin-left: 6px; font-weight: normal; }
.hud-dots { display: flex; gap: 6px; }
.hud-dots i {
  width: 10px; height: 10px; display: block;
  background: var(--shallow); border: 1px solid var(--line);
}
.hud-dots i.done { background: var(--dot-color, var(--lumen-cyan)); border-color: transparent; box-shadow: 0 0 8px var(--dot-color, var(--lumen-cyan)); }

.iconbtn {
  background: none; border: 1px solid var(--line); color: var(--drift);
  width: 38px; height: 38px; cursor: pointer; font-family: inherit; font-size: 20px;
  display: grid; place-items: center;
}
.iconbtn:hover { color: var(--foam); border-color: var(--drift); }
.iconbtn svg { width: 20px; height: 16px; }
#btn-sound .snd-off { display: none; }
#btn-sound.off .snd-on { display: none; }
#btn-sound.off .snd-off { display: block; }
#btn-menu { margin-left: 0; }
.hud + #btn-sound { margin-left: 0; }
.topbar > #btn-sound:first-of-type { margin-left: auto; }
.hud[hidden] + #btn-sound { margin-left: auto; }

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

#app { position: relative; z-index: 5; min-height: 100dvh; display: grid; place-items: center; padding: 90px 16px 40px; }

.screen { display: none; width: min(680px, 100%); }
.screen.active { display: block; animation: screen-in .5s var(--ease-out); }

@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* about block (crawlable intro copy on the homepage) */
.about-seo {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px dashed var(--hairline);
  color: var(--drift); font-size: 18px; text-align: left;
}
.about-seo h2 { font-size: 22px; color: var(--foam); letter-spacing: .12em; margin-bottom: 10px; font-weight: normal; }
.about-seo p { margin-bottom: 12px; }
.about-seo strong { color: var(--foam); font-weight: normal; }
.about-seo a { color: var(--lumen-cyan); }

/* boot */

#screen-boot { text-align: center; }
.boot-krill { image-rendering: pixelated; animation: boot-bob 1.6s var(--ease-io) infinite; }
.boot-label { color: var(--drift); letter-spacing: .3em; margin-top: 12px; animation: boot-fade 1.6s ease-in-out infinite; }
@keyframes boot-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes boot-fade { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* shared bits */

.eyebrow { color: var(--lumen-cyan); letter-spacing: .3em; font-size: 16px; margin-bottom: 10px; }
.screen-title { font-size: 40px; letter-spacing: .1em; margin-bottom: 24px; }

.title { font-size: clamp(48px, 10vw, 92px); letter-spacing: .08em; line-height: 1; text-shadow: 0 0 18px var(--lumen-cyan); margin: 6px 0 10px; }
.title span { display: inline-block; animation: letter-in .45s var(--ease-snap) both; }
@keyframes letter-in { from { opacity: 0; transform: translateY(22px) scaleY(1.4); } to { opacity: 1; transform: none; } }

.tagline { color: var(--drift); letter-spacing: .18em; font-size: 18px; margin-bottom: 26px; }

.bigbtn {
  font-family: inherit; font-size: 24px; letter-spacing: .12em;
  background: var(--lumen-pink); color: #14050c; border: 0;
  padding: 12px 26px; cursor: pointer;
  box-shadow: 0 0 18px #ff5d8f66;
  transition: transform .12s var(--ease-snap), box-shadow .2s;
}
.bigbtn:hover { transform: translateY(-2px); box-shadow: 0 0 26px #ff5d8f99; }
.bigbtn:active { transform: translateY(1px); }
.bigbtn.ghost { background: none; color: var(--foam); border: 1px solid var(--line); box-shadow: none; }
.bigbtn.ghost:hover { border-color: var(--drift); }

.fineprint { color: var(--drift); font-size: 16px; margin-top: 14px; }
.fineprint a { color: var(--lumen-cyan); }

/* intro */

.intro-card {
  background: #0b1526cc; border: 1px solid var(--line);
  padding: 22px 24px;
}
.intro-card p { margin-bottom: 14px; color: var(--foam); }
.howto { margin-bottom: 14px; color: var(--drift); }
.howto summary { cursor: pointer; color: var(--lumen-cyan); }
.howto ul { list-style: none; margin-top: 10px; }
.howto li { padding: 3px 0; }
.howto b { color: var(--foam); font-weight: normal; }
.streak-line { color: var(--tier-krillion) !important; letter-spacing: .1em; }

/* round */

#screen-round { text-align: center; }
.round-count { color: var(--drift); letter-spacing: .3em; font-size: 16px; margin-bottom: 8px; }
.prompt-text { font-size: clamp(34px, 6vw, 54px); margin-bottom: 26px; text-shadow: 0 0 14px #4de3ff44; }

.preview-pill {
  display: inline-grid; place-items: center;
  width: 74px; height: 74px; font-size: 44px;
  border: 2px solid var(--lumen-cyan); border-radius: 50%;
  color: var(--lumen-cyan); box-shadow: 0 0 22px #4de3ff44, inset 0 0 18px #4de3ff22;
}
.preview-pill.tick { animation: pill-pop .9s var(--ease-snap); }
@keyframes pill-pop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

#answer-form { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.sonar {
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid var(--lumen-cyan);
  display: grid; place-items: center;
  color: var(--lumen-cyan); font-size: 30px;
  position: relative; overflow: hidden;
}
.sonar::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--lumen-cyan) calc(var(--p, 1) * 360deg), transparent 0);
  opacity: .18;
}
.sonar.hot { border-color: var(--lumen-pink); color: var(--lumen-pink); }
.sonar.hot::after { background: conic-gradient(var(--lumen-pink) calc(var(--p, 1) * 360deg), transparent 0); opacity: .3; }

#answer-input {
  font-family: inherit; font-size: 30px; text-align: center;
  width: min(460px, 92%);
  background: #0b1526cc; color: var(--foam);
  border: 1px solid var(--line); border-bottom: 3px solid var(--lumen-cyan);
  padding: 12px 16px; outline: none;
}
#answer-input:focus { border-color: var(--lumen-cyan); box-shadow: 0 0 20px #4de3ff33; }
#answer-input::placeholder { color: var(--drift); opacity: .6; }
#answer-form.shake #answer-input { animation: shake .35s; border-bottom-color: var(--lumen-pink); }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

.reject-line { color: var(--lumen-pink); margin-top: 18px; min-height: 1.4em; }

/* land */

.land-stage { animation: screen-in .4s var(--ease-out); }
.land-icon { width: 96px; height: 96px; image-rendering: pixelated; animation: land-sink .8s var(--ease-snap) both; filter: drop-shadow(0 0 18px currentColor); }
@keyframes land-sink { from { opacity: 0; transform: translateY(-70px) scale(1.3); } to { opacity: 1; transform: none; } }
.land-tier { font-size: 26px; letter-spacing: .2em; margin-top: 10px; }
.land-score { font-size: 64px; margin: 6px 0 10px; text-shadow: 0 0 16px currentColor; }
.land-score .crank { display: inline-block; }
.land-quip { color: var(--drift); max-width: 46ch; margin: 0 auto 24px; font-size: 20px; }

/* results */

#screen-results { text-align: center; }
.res-total { font-size: clamp(64px, 12vw, 110px); line-height: 1; text-shadow: 0 0 22px var(--lumen-cyan); }
.res-total small { font-size: 32px; color: var(--drift); }
.res-band { font-size: 26px; margin: 8px 0 4px; }
.res-better { color: var(--drift); margin-bottom: 26px; }

.depth-log {
  position: relative; height: 220px; margin: 0 auto 8px;
  border-top: 1px dashed var(--hairline);
  background:
    linear-gradient(180deg, transparent 25%, var(--hairline) 25%, transparent calc(25% + 1px)),
    linear-gradient(180deg, transparent 50%, var(--hairline) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent 75%, var(--hairline) 75%, transparent calc(75% + 1px));
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.depth-log .col { position: relative; }
.depth-log .col::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 1px;
  height: calc(var(--d) * 100% - 10px);
  background: linear-gradient(180deg, transparent, var(--c));
  opacity: .45;
}
.depth-log img {
  position: absolute; left: 50%; top: calc(var(--d) * 100%);
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; image-rendering: pixelated;
  animation: log-sink .6s var(--ease-io) both;
  filter: drop-shadow(0 0 8px var(--c));
}
@keyframes log-sink { from { opacity: 0; top: 0; } to { opacity: 1; top: calc(var(--d) * 100%); } }
.depth-log .rn { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); color: var(--drift); font-size: 14px; }

#dist { width: 100%; max-width: 640px; height: 140px; margin: 26px 0 8px; }

.share-box { background: #0b1526cc; border: 1px solid var(--line); padding: 18px; margin: 14px 0 22px; }
#share-text { font-family: var(--font-pixel); font-size: 24px; color: var(--foam); white-space: pre-wrap; margin-bottom: 14px; }
.share-actions { display: flex; gap: 12px; justify-content: center; }

.reveal-box { text-align: left; margin-bottom: 22px; color: var(--drift); }
.reveal-box summary { cursor: pointer; color: var(--lumen-cyan); text-align: center; letter-spacing: .1em; }
.reveal-prompt { margin: 16px 0; border: 1px solid var(--line); padding: 12px 14px; background: #0b152699; }
.reveal-prompt h3 { font-weight: normal; font-size: 22px; color: var(--foam); margin-bottom: 8px; }
.reveal-prompt ul { list-style: none; columns: 2; }
.reveal-prompt li { padding: 2px 0; break-inside: avoid; font-size: 17px; }
.reveal-prompt li b { font-weight: normal; }
.reveal-prompt .mine { color: var(--tier-krillion); }

.next-dive { color: var(--drift); letter-spacing: .1em; }
.next-dive b { color: var(--foam); font-weight: normal; }

/* archive */

.archive-list { display: grid; gap: 10px; margin-bottom: 24px; }
.archive-item {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); background: #0b1526cc; padding: 12px 16px;
  cursor: pointer; font-size: 22px; color: var(--foam);
}
.archive-item:hover { border-color: var(--lumen-cyan); }
.archive-item .meta { color: var(--drift); font-size: 16px; }
.archive-item .score { color: var(--tier-krillion); }

/* menu */

#menu {
  border: 1px solid var(--line); background: #0b1526f2; color: var(--foam);
  padding: 0; width: min(420px, 92vw);
}
#menu::backdrop { background: #02050bb3; }
.menu-panel { padding: 22px 24px; }
.menu-panel header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.menu-panel header h2 { margin-left: auto; margin-right: 8px; letter-spacing: .15em; }
.menu-panel nav { display: grid; gap: 4px; margin-bottom: 18px; }
.menu-panel nav a { color: var(--foam); text-decoration: none; font-size: 24px; padding: 8px 10px; border: 1px solid transparent; }
.menu-panel nav a:hover { border-color: var(--line); color: var(--lumen-cyan); }
.settings { display: grid; gap: 8px; margin-bottom: 16px; color: var(--drift); font-size: 20px; }
.settings label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.settings input { accent-color: var(--lumen-pink); width: 18px; height: 18px; }
.menu-note { color: var(--lumen-pink); margin-bottom: 12px; font-size: 18px; }
.menu-panel footer { color: var(--drift); font-size: 16px; border-top: 1px dashed var(--hairline); padding-top: 12px; letter-spacing: .08em; }

@media (max-width: 560px) {
  body { font-size: 18px; }
  .brand-sub { display: none; }
  .hud { gap: 10px; }
  .hud-item { font-size: 13px; }
  .hud-item b { font-size: 18px; }
  .reveal-prompt ul { columns: 1; }
}

/* mascot companion — follows the dive, pokes, goes gold on a gem */
#mascot-wrap {
  position: fixed; right: clamp(60px, 9vw, 130px); top: 18%; z-index: 6;
  transition: top 2.5s var(--ease-io);
  pointer-events: none;
}
#mascot {
  width: 72px; height: 72px; image-rendering: pixelated;
  pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 0 12px #ff5d8f66);
  animation: mascot-bob 3.2s ease-in-out infinite;
}
#mascot.poked { animation: mascot-dart .9s var(--ease-snap); }
#mascot.gold { filter: drop-shadow(0 0 22px #ffd166aa); }
.mascot-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-60%);
  background: var(--foam); color: var(--abyss);
  font-size: 18px; padding: 2px 10px; white-space: nowrap;
  animation: bubble-pop 1.4s var(--ease-out) both;
}
.mascot-bubble::after {
  content: ''; position: absolute; top: 100%; left: 55%;
  border: 6px solid transparent; border-top-color: var(--foam);
}
@keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(12px) rotate(3deg); } }
@keyframes mascot-dart {
  0% { transform: none; }
  30% { transform: translate(-26px, -18px) rotate(-24deg) scale(1.08); }
  60% { transform: translate(10px, 8px) rotate(12deg); }
  100% { transform: none; }
}
@keyframes bubble-pop { 0% { opacity: 0; transform: translateX(-60%) translateY(8px); } 15% { opacity: 1; transform: translateX(-60%); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* depth ruler — right edge, YOU pinned, ticks scroll with the camera */
#ruler {
  position: fixed; top: 0; bottom: 0; right: 0; width: 96px; z-index: 4;
  pointer-events: none;
  border-left: 1px dashed var(--hairline);
}
#ruler-ticks { position: absolute; inset: 0; }
.ruler-tick {
  position: absolute; right: 8px; display: flex; align-items: center; gap: 6px;
  color: var(--drift); font-size: 15px; white-space: nowrap;
}
.ruler-tick::after { content: ''; display: block; width: 12px; border-top: 1px solid var(--drift); opacity: .7; }
.ruler-tick.minor::after { width: 6px; opacity: .35; }
#ruler-you {
  position: absolute; right: 0; top: 32%; display: flex; align-items: center; gap: 6px;
  color: var(--lumen-pink); font-size: 18px; letter-spacing: .1em;
  filter: drop-shadow(0 0 8px #ff5d8f88);
}
#ruler-you i { display: block; width: 26px; border-top: 3px solid var(--lumen-pink); }

/* depth milestone captions */
#caption {
  position: fixed; left: 50%; top: 80%; transform: translateX(-50%); z-index: 4;
  color: var(--drift); font-size: 19px; letter-spacing: .22em; text-align: center;
  opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none;
  text-shadow: 0 0 12px #050a14;
  max-width: 80vw;
}

/* tier flash on landing */
#flash {
  position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: var(--flash-color, transparent);
}
#flash.go { animation: flash-fade .45s var(--ease-out); }
@keyframes flash-fade { 0% { opacity: .32; } 100% { opacity: 0; } }

/* bubble burst + sparkles on good answers */
.burst-bubble {
  position: fixed; z-index: 7; pointer-events: none;
  border: 2px solid var(--bcolor, var(--lumen-cyan)); border-radius: 50%;
  animation: burst-rise var(--dur, .8s) var(--ease-out) forwards;
}
@keyframes burst-rise {
  0% { opacity: .95; transform: translate(0, 0) scale(.5); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15); }
}
.sparkle {
  position: fixed; z-index: 7; pointer-events: none;
  background: var(--tier-krillion);
  box-shadow: 0 0 10px var(--tier-krillion);
  animation: sparkle-fall var(--dur, 1.1s) var(--ease-out) forwards;
}
@keyframes sparkle-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(240deg); }
}

/* land stage: icon bubble trail */
.land-icon { position: relative; }
.trail-bubble {
  position: absolute; left: 50%; bottom: -6px;
  border: 2px solid currentColor; border-radius: 50%; opacity: 0;
  animation: trail-rise 1.1s var(--ease-out) forwards;
}
@keyframes trail-rise {
  0% { opacity: .8; transform: translateX(-50%) translateY(0) scale(.4); }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--tx))) translateY(-90px) scale(1); }
}

@media (max-width: 700px) {
  #ruler { width: 60px; }
  .ruler-tick { font-size: 12px; }
  #caption { font-size: 15px; }
}

.gauntlet-btn { display: block; margin-top: 12px; font-size: 19px; padding: 10px 18px; }
.gauntlet-best { color: var(--tier-krillion); font-size: 17px; margin-top: 10px; letter-spacing: .06em; }

@media (max-width: 700px) {
  #mascot { width: 52px; height: 52px; }
  #mascot-wrap { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Current controls use the original terminal palette, typography and geometry. */
button, input { font-family: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--lumen-cyan); outline-offset: 4px; }
.brand { text-decoration: none; }
.iconbtn { flex-shrink: 0; }
h1, h2, h3, h4, b { font-weight: normal; }
.screen { min-width: 0; }
.text-link { background: none; border: 0; color: var(--lumen-cyan); font-size: 18px; padding: 7px 0; }
.text-link:hover { color: var(--foam); text-decoration: underline; }
.mono { color: var(--drift); font-variant-numeric: tabular-nums; }
.notice { padding: 14px 18px; border: 1px dashed var(--lumen-cyan); color: var(--lumen-cyan); background: #0b1526cc; margin-bottom: 18px; }
.intro-card .fineprint { color: var(--drift); margin: 10px 0; }
.intro-card .gauntlet-best { color: var(--tier-krillion); font-size: 17px; }
#home-tiers { margin: 10px 0; }
.rarity-item, .how-tier { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.rarity-item img, .how-tier img { width: 26px; height: 26px; image-rendering: pixelated; }
.rarity-item b, .how-tier b { margin-left: auto; white-space: nowrap; }
.hud { gap: 16px; }
.hud-item { white-space: nowrap; }
.hud-dots i.done { background: var(--c); box-shadow: 0 0 8px var(--c); }
.hud-dots i.current { outline: 1px solid var(--lumen-cyan); outline-offset: 2px; }
.hud-dots.challenge { display: grid; grid-template-columns: repeat(25, 4px); gap: 3px; }
.hud-dots.challenge i { width: 4px; height: 4px; }
#hud-lives { color: var(--lumen-pink); }
#hud-lives .lost { color: var(--drift); opacity: .5; }
#life-hud { display: none; }
body[data-mode="challenge"] #life-hud { display: inline; }
#mascot-button { background: none; border: 0; padding: 0; pointer-events: auto; line-height: 0; }
.expedition-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 28px; }
.expedition-bar .eyebrow { font-size: 16px; letter-spacing: .1em; margin: 0; }
.expedition-bar .text-link, .expedition-bar .mono { font-size: 16px; }
.progress-track { display: none; }
.prompt-text, .land-answer, .log-row div { overflow-wrap: anywhere; }
.preview-pill b { font-weight: normal; }
.input-foot { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--drift); font-size: 16px; }
.input-foot .text-link { font-size: 16px; }
.land-answer { font-size: 24px; margin-top: 8px; }
.land-life { color: var(--lumen-pink); margin: 0 0 20px; }
.land-stage[data-tier="krillion"] .land-icon { filter: drop-shadow(0 0 22px #ffd166aa); }
.game-bottom { margin-top: 26px; font-size: 16px; color: var(--drift); letter-spacing: .16em; }
.result-top > img { width: 64px; height: 64px; image-rendering: pixelated; }
.result-top h2 { font-size: 24px; letter-spacing: .08em; margin-bottom: 16px; }
.res-summary { color: var(--drift); font-size: 18px; margin-bottom: 26px; }
.depth-log { margin-top: 28px; margin-bottom: 35px; grid-template-columns: repeat(var(--rounds, 7), minmax(0, 1fr)); }
.depth-log.challenge { height: 150px; margin-top: 16px; margin-bottom: 40px; }
.depth-log.challenge img { width: 24px; height: 24px; }
.result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
.result-stat b { display: block; font-size: 26px; color: var(--lumen-cyan); }
.result-stat span { color: var(--drift); font-size: 16px; }
.share-box > p { color: var(--drift); margin-bottom: 16px; }
.share-actions { align-items: center; flex-wrap: wrap; }
.share-actions .bigbtn { font-size: 20px; }
.share-preview { margin-top: 18px; }
.share-preview summary, .answer-log > summary { cursor: pointer; color: var(--lumen-cyan); }
#share-text { font-size: 22px; margin-top: 14px; overflow-wrap: anywhere; }
.share-status { color: var(--lumen-cyan); font-size: 18px; }
.answer-log { text-align: left; margin: 24px 0; }
.answer-log > summary { text-align: center; }
.answer-log .mono { font-size: 15px; margin-left: 10px; }
.divelog { margin-top: 14px; border-top: 1px dashed var(--hairline); }
.log-row { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--hairline); }
.log-row > span { color: var(--drift); font-size: 16px; }
.log-row img { width: 30px; height: 30px; image-rendering: pixelated; }
.log-row h4 { color: var(--drift); font-size: 17px; }
.log-row p { font-size: 20px; }
.log-row > b { font-size: 22px; }
.reveal-note { font-size: 16px; text-align: center; margin: 14px 0; }
.reveal-prompt summary { text-align: left; font-size: 20px; letter-spacing: 0; }
.reveal-prompt ul { margin-top: 10px; }
.reveal-prompt li span { margin-left: 8px; }
.result-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 26px 0; }
.result-actions .bigbtn { font-size: 20px; }
.next-dive { font-size: 18px; }
.archive-intro { color: var(--drift); margin: 0 0 24px; }
.archive-item { gap: 10px; flex-wrap: wrap; text-align: left; }
.archive-item span { font-size: 16px; color: var(--drift); }
.archive-item strong { font-size: 17px; color: var(--tier-krillion); font-weight: normal; }
#screen-error { text-align: center; }
#screen-error h2 { font-size: 32px; margin: 18px 0; }
#screen-error > p { margin-bottom: 22px; }
#btn-error-home { display: block; margin: 15px auto; }
dialog { margin: auto; max-height: calc(100dvh - 32px); border: 1px solid var(--line); background: #0b1526f2; color: var(--foam); width: min(480px, 92vw); padding: 0; font: inherit; }
dialog::backdrop { background: #02050bb3; }
.menu-panel header h2 { font-size: 26px; }
.menu-panel nav button { font: inherit; text-align: left; color: var(--foam); background: none; border: 1px solid transparent; padding: 8px 10px; font-size: 24px; }
.menu-panel nav button:hover { border-color: var(--line); color: var(--lumen-cyan); }
.how-steps { padding-left: 22px; color: var(--drift); }
.how-steps li { margin-bottom: 14px; }
.how-steps b { color: var(--foam); }
.how-tiers { font-size: 18px; border-top: 1px dashed var(--hairline); padding-top: 12px; }
#btn-how-ready { margin-top: 20px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--shallow); border: 1px solid var(--lumen-cyan); color: var(--foam); padding: 12px 20px; z-index: 20; max-width: 90vw; width: max-content; font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.large-text .prompt-text { font-size: clamp(42px, 7vw, 64px); }
.large-text #answer-input { font-size: 36px; }
.large-text .land-quip, .large-text .reject-line { font-size: 24px; }
.large-text .log-row h4, .large-text .log-row p, .large-text .reveal-prompt li { font-size: 22px; }
.large-text .input-foot { font-size: 20px; }
@media (max-width: 1150px) {
  body[data-screen="round"] .brand-sub { display: none; }
  .hud { gap: 10px; }
  .hud-item { font-size: 14px; }
  .hud-item b { font-size: 20px; }
  #ruler { width: 62px; }
  #mascot-wrap { right: 64px; }
}
@media (max-width: 900px) {
  body[data-screen="round"] .topbar { flex-wrap: wrap; background: linear-gradient(180deg, #050a14f2 65%, #050a1400); }
  .hud { order: 3; flex-basis: 100%; justify-content: center; margin: 0; flex-wrap: wrap; }
  body[data-screen="round"] #app { padding: 130px 80px 60px 24px; }
  #mascot-wrap { right: 6px; top: 18%; }
  #mascot { width: 48px; height: 48px; }
  #caption { top: auto; bottom: 12px; }
}
@media (max-width: 560px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .brand { gap: 5px; }
  .brand-name { font-size: 24px; letter-spacing: .08em; }
  .brand img { width: 28px; height: 28px; }
  .iconbtn { width: 34px; height: 34px; }
  #app { padding: 96px 16px 34px; }
  .title { font-size: clamp(44px, 10vw, 56px); }
  .tagline { font-size: 16px; letter-spacing: .12em; }
  .intro-card { padding: 20px 18px; }
  .intro-card .bigbtn { max-width: 100%; font-size: 21px; padding: 12px 18px; }
  .intro-card .gauntlet-btn { font-size: 18px; letter-spacing: .08em; }
  .hud { gap: 10px; row-gap: 7px; }
  .hud-item { font-size: 13px; letter-spacing: .05em; }
  .hud-item b { font-size: 18px; margin-left: 3px; }
  .hud-dots { gap: 4px; }
  .hud-dots i { width: 7px; height: 7px; }
  .hud-dots.challenge { order: 4; flex-basis: 100%; justify-content: center; }
  body[data-screen="round"] #app { padding: 136px 48px 65px 16px; }
  #ruler { width: 42px; }
  .ruler-tick { right: 3px; gap: 2px; font-size: 10px; }
  .ruler-tick::after { width: 5px; }
  #ruler-you { gap: 2px; font-size: 13px; }
  #ruler-you i { width: 12px; }
  #mascot-wrap { right: 2px; }
  #mascot { width: 40px; height: 40px; }
  .expedition-bar { flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .expedition-bar .eyebrow { order: 3; flex-basis: 100%; font-size: 15px; }
  .prompt-text { font-size: 34px; }
  #answer-input { width: 100%; font-size: 26px; }
  .input-foot { gap: 3px; font-size: 15px; }
  .input-foot .text-link { font-size: 15px; }
  .game-bottom { font-size: 13px; }
  .result-top h2 { font-size: 21px; }
  .result-stats { gap: 8px; }
  .result-stat b { font-size: 23px; }
  .result-stat span { font-size: 14px; }
  .depth-log.challenge img { width: 20px; height: 20px; }
  #share-text { font-size: 19px; }
  .log-row { gap: 7px; }
  .log-row h4 { font-size: 16px; }
  .next-dive > span { display: block; }
  .menu-panel { padding: 20px; }
  #caption { font-size: 13px; letter-spacing: .08em; }
}
@media (max-height: 600px) {
  #caption { display: none; }
  .expedition-bar { margin-bottom: 12px; }
  .prompt-text { margin-bottom: 16px; }
  .sonar { width: 52px; height: 52px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fine-line krill stays smooth; rarity icons keep their pixel art.
   The krill is drawn at 200x140, so every placement keeps height auto: a fixed
   square box would stretch it through the default object-fit: fill. */
.brand img, .boot-krill, #mascot, #screen-error img { object-fit: contain; }
.brand img { width: 46px; height: auto; image-rendering: auto; }
.boot-krill { width: 92px; height: auto; image-rendering: auto; }
#screen-error img { width: 92px; height: auto; }
#mascot { width: 104px; height: auto; image-rendering: auto; filter: drop-shadow(0 3px 12px #ed967e28); }
@keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(6px) rotate(1deg); } }
@media (max-width: 768px) { #mascot { width: 78px; height: auto; } }
@media (max-width: 480px) { #mascot { width: 65px; height: auto; } }
@media (max-width: 350px) { #mascot { width: 54px; height: auto; } }