/* Layout: a single dive. The 3D sea sits fixed behind the page and every
   section is one ocean zone, deeper as you scroll. Text sits left, the whale right. */
:root {
  --abyss: #03111a;
  --deep: #072433;
  --panel: rgba(5, 27, 39, 0.74);
  --panel-solid: #08283a;
  --line: rgba(160, 214, 230, 0.16);
  --line-strong: rgba(160, 214, 230, 0.34);
  --bone: #eef4f2;
  --foam: #a3c4ce;
  --mute: #6f93a0;
  --pill: #52d98f;
  --pill-ink: #0f3d36;
  --steel: #3a4652;
  --rug: #ff5468;
  --gold: #ffcf5a;
  --glow: #bff6ff;

  --f-display: "Pirata One", "Georgia", "Times New Roman", serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  --step-3: clamp(2.4rem, 1.7rem + 3vw, 4.4rem);
  --step-4: clamp(3.6rem, 2rem + 8vw, 9.5rem);

  --radius: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.playing { overflow: hidden; }
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--abyss);
}

a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--step-3); line-height: 1; letter-spacing: 0.01em; }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- sea canvas ---------- */
.sea { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.sea-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 17, 26, 0.86) 0%, rgba(3, 17, 26, 0.5) 42%, rgba(3, 17, 26, 0) 70%),
    linear-gradient(0deg, rgba(3, 17, 26, 0.55), rgba(3, 17, 26, 0) 35%);
  transition: opacity 0.6s;
}
body.playing .sea-scrim { opacity: 0; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--abyss); color: var(--foam); font-family: var(--f-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 0.7s, visibility 0.7s;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader-mark { width: 72px; height: 72px; animation: bob 2.2s ease-in-out infinite; }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* ---------- site shell ---------- */
.site { position: relative; z-index: 2; }
.wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}

.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding-block: 12px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: linear-gradient(180deg, rgba(3, 17, 26, 0.9), rgba(3, 17, 26, 0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-size: 1.7rem; line-height: 1; }
.brand-mark { width: 38px; height: 38px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--foam); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; }
.nav-links a:hover { color: var(--bone); }
@media (max-width: 860px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- buttons ---------- */
.btn {
  --b-bg: transparent; --b-fg: var(--bone); --b-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); border: 2px solid var(--b-bd);
  font: 700 0.98rem/1 var(--f-body); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 0.9rem; }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 1.08rem; }
.btn-pill { --b-bg: var(--pill); --b-fg: var(--pill-ink); --b-bd: var(--pill-ink); box-shadow: 0 5px 0 var(--pill-ink), 0 10px 30px rgba(82, 217, 143, 0.25); }
.btn-pill:hover { box-shadow: 0 7px 0 var(--pill-ink), 0 14px 40px rgba(82, 217, 143, 0.4); }
.btn-pill:active { box-shadow: 0 2px 0 var(--pill-ink); }
.btn-bone { --b-bg: var(--bone); --b-fg: var(--pill-ink); --b-bd: var(--pill-ink); box-shadow: 0 5px 0 var(--pill-ink); }
.btn-ghost { --b-bg: rgba(3, 17, 26, 0.4); }
.btn-ghost:hover { --b-bd: var(--foam); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- depth gauge ---------- */
.gauge {
  position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  z-index: 40; display: grid; justify-items: end; gap: 10px; pointer-events: none;
  font-family: var(--f-mono); color: var(--foam);
}
.gauge-track { position: relative; width: 2px; height: 220px; background: linear-gradient(var(--glow), var(--line) 40%, rgba(160, 214, 230, 0.05)); }
.gauge-track i { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--pill); box-shadow: 0 0 14px var(--pill); }
.gauge-read { font-size: 1.15rem; font-weight: 700; color: var(--bone); font-variant-numeric: tabular-nums; }
.gauge-read span { color: var(--mute); margin-left: 3px; font-size: 0.8rem; }
.gauge-zone { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 1100px) { .gauge { display: none; } }

/* ---------- sections ---------- */
.zone { position: relative; padding-block: clamp(80px, 12vw, 150px); }
.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--foam);
  margin-bottom: 18px;
}
.depth-tag { color: var(--pill-ink); background: var(--pill); padding: 2px 8px; border-radius: 6px; font-weight: 700; letter-spacing: 0.06em; }
.section-lead { max-width: 60ch; color: var(--foam); font-size: var(--step-1); line-height: 1.5; margin-top: 16px; }
.muted { color: var(--mute); font-size: var(--step-0); }
.small-note { color: var(--mute); font-size: var(--step--1); }

/* hero */
.hero { min-height: min(100svh, 900px); display: flex; align-items: center; padding-block: 120px 100px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 640px); }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 0; }
.hero-title {
  font-family: var(--f-display); font-weight: 400; font-size: var(--step-4); line-height: 0.82; letter-spacing: 0.005em;
  color: var(--bone); text-shadow: 0 6px 0 var(--pill-ink), 0 0 60px rgba(191, 246, 255, 0.25);
}
.hero-title span { color: var(--pill); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--foam); max-width: 46ch; }

.ca {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 8px 8px 16px; border-radius: 999px; max-width: 560px;
  background: var(--panel); border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ca-label { font-family: var(--f-mono); font-weight: 700; font-size: 0.78rem; color: var(--pill); letter-spacing: 0.1em; }
.ca-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: 0.9rem; color: var(--bone); user-select: all; }
.ca-copy {
  flex: none; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  background: var(--bone); color: var(--pill-ink); font: 700 0.85rem/1 var(--f-body);
}
.ca-copy:disabled { background: rgba(160, 214, 230, 0.12); color: var(--mute); cursor: default; }
.ca-copy.ok { background: var(--pill); }
.ca-wide { max-width: 760px; margin-top: 28px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-facts { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.hero-facts li { display: grid; gap: 2px; }
.hero-facts span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.hero-facts b { font-weight: 600; font-variant-numeric: tabular-nums; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; text-decoration: none;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foam);
}
.scroll-cue i { width: 2px; height: 36px; background: linear-gradient(var(--foam), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i, .loader-mark { animation: none; } }

/* lore */
.lore { background: linear-gradient(180deg, rgba(3, 17, 26, 0) 0%, rgba(3, 17, 26, 0.55) 30%, rgba(3, 17, 26, 0.55) 70%, rgba(3, 17, 26, 0)); }
.lore-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.lore-text { display: grid; gap: 18px; max-width: 62ch; font-size: var(--step-1); line-height: 1.6; color: var(--foam); }
.lore-text strong { color: var(--bone); }
.lore-text blockquote {
  margin: 10px 0 0; font-family: var(--f-display); font-size: var(--step-2); line-height: 1.1; color: var(--bone);
  padding-left: 20px; border-left: 3px solid var(--pill);
}
@media (max-width: 820px) { .lore-grid { grid-template-columns: minmax(0, 1fr); } }

/* hunt / bestiary */
.hunt { background: linear-gradient(180deg, rgba(3, 17, 26, 0), rgba(3, 17, 26, 0.72) 18%, rgba(3, 17, 26, 0.72) 85%, rgba(3, 17, 26, 0)); }
.bestiary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.beast {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px;
  padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s, border-color 0.2s;
}
.beast:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.beast p { color: var(--foam); font-size: 0.93rem; line-height: 1.5; }
.beast.boss { border-color: rgba(255, 207, 90, 0.45); background: linear-gradient(180deg, rgba(255, 207, 90, 0.1), var(--panel)); }
.pill-art { aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; }
.pill-art svg { width: 82%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.beast:hover .pill-art svg { animation: wobble 0.6s ease-in-out; }
@keyframes wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(6deg); } }
.beast dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.beast dl div { display: grid; gap: 1px; }
.beast dt { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.beast dd { margin: 0; font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) { .bestiary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bestiary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .bestiary { grid-template-columns: minmax(0, 1fr); } }

.howto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.howto-card { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.score-card p { color: var(--foam); }
.score-card b { color: var(--bone); }
.score-card .btn { justify-self: start; margin-top: 6px; }
.keys { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.keys li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--foam); }
.keys li > span { display: flex; gap: 5px; flex-wrap: wrap; }
kbd {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px;
  font: 700 0.78rem/1 var(--f-mono); color: var(--bone); background: var(--panel-solid);
  border: 1px solid var(--line-strong); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
@media (max-width: 820px) { .howto { grid-template-columns: minmax(0, 1fr); } .keys li { grid-template-columns: 120px minmax(0, 1fr); } }

/* token */
.token { background: linear-gradient(180deg, rgba(3, 17, 26, 0), rgba(3, 17, 26, 0.6) 25%, rgba(3, 17, 26, 0.6) 80%, rgba(3, 17, 26, 0)); }
.token-title { font-size: clamp(2.6rem, 1rem + 7vw, 7rem); color: var(--bone); overflow-wrap: anywhere; }
.token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.fact { display: grid; gap: 6px; padding: 22px 18px 22px 0; }
.fact + .fact { padding-left: 18px; border-left: 1px solid var(--line); }
.fact span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fact b { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* buy */
.buy { background: linear-gradient(180deg, rgba(3, 17, 26, 0), rgba(3, 17, 26, 0.7) 20%, rgba(3, 17, 26, 0.7) 80%, rgba(3, 17, 26, 0)); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bone); color: var(--pill-ink); font: 700 1.1rem/1 var(--f-mono); box-shadow: 0 3px 0 var(--pill-ink);
}
.steps p { color: var(--foam); font-size: 0.95rem; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* roadmap */
.road { background: linear-gradient(180deg, rgba(3, 17, 26, 0), rgba(3, 17, 26, 0.72) 20%, rgba(3, 17, 26, 0.72) 80%, rgba(3, 17, 26, 0)); }
.road-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.road-list::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: linear-gradient(90deg, var(--pill), var(--line) 30%, rgba(160, 214, 230, 0.06)); }
.road-list li { position: relative; display: grid; gap: 10px; align-content: start; padding: 0 20px 0 0; }
.road-list .chip {
  justify-self: start; position: relative; z-index: 1;
  font: 700 0.72rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 999px; background: var(--panel-solid); color: var(--foam); border: 1px solid var(--line-strong);
}
.road-list .is-live .chip { background: var(--pill); color: var(--pill-ink); border-color: var(--pill-ink); }
.road-list h3 { margin-top: 10px; font-family: var(--f-display); font-weight: 400; font-size: var(--step-2); }
.road-list p { color: var(--foam); font-size: 0.95rem; max-width: 34ch; }
@media (max-width: 860px) {
  .road-list { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 26px; }
  .road-list::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--pill), var(--line) 40%); }
}

/* leaderboard */
.ranks { background: linear-gradient(180deg, rgba(3, 17, 26, 0), rgba(3, 17, 26, 0.82) 20%); }
.table-wrap { overflow-x: auto; margin: 34px 0 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.lb th { text-align: left; font: 700 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lb td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.lb tr:last-child td { border-bottom: 0; }
.lb td:nth-child(3) { font-family: var(--f-mono); font-weight: 700; color: var(--pill); }
.lb tr.example td { color: var(--mute); font-style: italic; }
.lb tr.example td:nth-child(3) { color: var(--mute); }
.lb tr.me td { background: rgba(82, 217, 143, 0.08); }
.ranks .btn { margin-top: 10px; }

/* footer */
.foot { position: relative; z-index: 2; padding-block: 50px 60px; background: var(--abyss); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: center; }
.foot-links { display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap; }
.foot-links a { color: var(--foam); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--bone); }
.foot-links a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.disclaimer { grid-column: 1 / -1; color: var(--mute); font-size: var(--step--1); max-width: 80ch; }
@media (max-width: 600px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-links { justify-content: flex-start; } }

/* ============ GAME LAYER ============ */
.game { position: fixed; inset: 0; z-index: 70; pointer-events: none; font-family: var(--f-body); user-select: none; -webkit-user-select: none; }
.game > * { pointer-events: auto; }
.game .hud, .game .floaters, .game .banner, .game .hurt-flash, .game .hint { pointer-events: none; }
.hud {
  position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.hud .bar { position: relative; height: 12px; border-radius: 999px; background: rgba(3, 17, 26, 0.7); border: 2px solid var(--pill-ink); overflow: hidden; }
.hud .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; transition: width 0.15s; }
.hud-left { display: grid; gap: 8px; max-width: 260px; }
.meter { display: grid; grid-template-columns: 74px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.meter-label { font: 700 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--foam); }
.meter b { font: 700 0.85rem/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.meter-hp .bar i { background: linear-gradient(90deg, var(--bone), var(--glow)); }
.meter-hp.low .bar i { background: var(--rug); }
.meter-sp .bar i { background: linear-gradient(90deg, #38c7ff, var(--glow)); }
.meter-sp.ready .bar { box-shadow: 0 0 14px var(--glow); }
.meter-sp.ready b { color: var(--glow); }
.hud-center { display: grid; justify-items: center; gap: 6px; min-width: min(360px, 44vw); }
.wave-label { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; text-shadow: 0 3px 0 var(--pill-ink); }
.curve { width: 100%; display: grid; gap: 4px; justify-items: center; }
.curve .bar { width: 100%; }
.curve .bar i { background: linear-gradient(90deg, #2fb36f, var(--pill)); }
.curve span { font: 700 0.7rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foam); }
.boss { width: 100%; display: grid; gap: 4px; justify-items: center; margin-top: 4px; }
.boss span { font: 700 0.72rem/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.boss .bar { width: 100%; height: 14px; border-color: #6b4d00; }
.boss .bar i { background: linear-gradient(90deg, #ff9d2e, var(--gold)); }
.hud-right { display: grid; justify-items: end; gap: 6px; }
.mc { display: grid; justify-items: end; }
.mc span { font: 700 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--foam); }
.mc b { font: 700 1.7rem/1.1 var(--f-mono); color: var(--pill); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--pill-ink); }
.combo { font: 700 1.05rem/1 var(--f-mono); color: var(--gold); opacity: 0.35; transition: opacity 0.2s, transform 0.15s; }
.combo.hot { opacity: 1; }
.combo.bump { transform: scale(1.3); }
.hud-buttons { display: flex; gap: 8px; pointer-events: auto; margin-top: 4px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  background: rgba(3, 17, 26, 0.6); color: var(--bone); border: 1px solid var(--line-strong);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .snd-off { display: none; }
.icon-btn.muted .snd-on { display: none; }
.icon-btn.muted .snd-off { display: inline; }
@media (max-width: 720px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-center { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
  .hud-left { max-width: none; }
  .meter { grid-template-columns: 58px minmax(0, 1fr) 38px; }
  .wave-label { font-size: 1.4rem; }
  .mc b { font-size: 1.25rem; }
}

.floaters { position: absolute; inset: 0; overflow: hidden; }
.floater {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; font-size: 1.05rem;
  color: var(--bone); text-shadow: 0 2px 0 var(--pill-ink), 0 0 10px rgba(0, 0, 0, 0.6); will-change: transform, opacity;
}
.floater.kill { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; color: var(--pill); }
.floater.money { font-family: var(--f-mono); color: var(--gold); font-size: 0.95rem; }
.floater.hurt { color: var(--rug); }
.floater.heal { color: #ff8fd1; }

.banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center;
  font-family: var(--f-display); font-size: clamp(2.4rem, 1rem + 6vw, 5.5rem); line-height: 0.95; color: var(--bone);
  text-shadow: 0 5px 0 var(--pill-ink), 0 0 40px rgba(191, 246, 255, 0.35); opacity: 0; width: min(92vw, 900px);
}
.banner small { display: block; font-family: var(--f-mono); font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pill); text-shadow: none; margin-top: 10px; }
.banner.show { animation: banner 2.2s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.85); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58%); } }

.hurt-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 84, 104, 0.55)); opacity: 0; transition: opacity 0.35s; }
.hurt-flash.on { opacity: 1; transition: none; }

.hint {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  margin: 0; font: 600 0.78rem/1.3 var(--f-mono); color: var(--foam); letter-spacing: 0.04em; text-align: center;
  padding: 8px 14px; border-radius: 999px; background: rgba(3, 17, 26, 0.55); width: max-content; max-width: calc(100vw - 32px);
}

/* touch controls */
.touch { display: none; }
body.touch-ui .touch { display: block; }
body.touch-ui .hint { display: none; }
.stick {
  position: absolute; left: calc(26px + env(safe-area-inset-left, 0px)); bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: 136px; height: 136px; border-radius: 50%; background: rgba(3, 17, 26, 0.45); border: 2px solid var(--line-strong); touch-action: none;
}
.stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--bone); border: 3px solid var(--pill-ink); opacity: 0.9; }
.tbtns {
  position: absolute; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 64px); gap: 10px;
}
.tbtn {
  border-radius: 50%; border: 3px solid var(--pill-ink); font: 800 0.72rem/1 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(238, 244, 242, 0.85); color: var(--pill-ink); touch-action: none;
}
.tbtn-slash { grid-column: 3; grid-row: 2; background: var(--pill); width: 74px; height: 74px; align-self: end; justify-self: end; }
.tbtn-dash { grid-column: 2; grid-row: 2; }
.tbtn-blast { grid-column: 3; grid-row: 1; background: #9ae7ff; }
.tbtn-up { grid-column: 1; grid-row: 1; background: rgba(3, 17, 26, 0.55); color: var(--bone); border-color: var(--line-strong); }
.tbtn-down { grid-column: 1; grid-row: 2; background: rgba(3, 17, 26, 0.55); color: var(--bone); border-color: var(--line-strong); }
.tbtn.on { transform: scale(0.92); filter: brightness(1.2); }

/* overlays */
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; overflow-y: auto;
  padding-block: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: rgba(3, 17, 26, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card {
  width: min(560px, 100%); display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(10, 44, 62, 0.95), rgba(5, 27, 39, 0.97)); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.card .eyebrow { margin-bottom: 0; color: var(--pill); }
.card h2 { font-size: var(--step-3); }
.card > p { color: var(--foam); }
.brief-keys { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--foam); font-size: 0.92rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.over-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.over-stats div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(3, 17, 26, 0.5); border: 1px solid var(--line); }
.over-stats span { font: 700 0.6rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.over-stats b { font: 700 1.05rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.over-stats div:first-child b { color: var(--pill); }
@media (max-width: 520px) { .over-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.save-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.save-row label { grid-column: 1 / -1; font: 700 0.7rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--foam); }
.save-row input {
  min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(3, 17, 26, 0.6); color: var(--bone); font: 600 1rem var(--f-body);
}
.save-row input:focus { outline: 2px solid var(--pill); outline-offset: 1px; }
@media (max-width: 460px) { .save-row { grid-template-columns: minmax(0, 1fr); } }