:root {
  color-scheme: dark;
  --bg: #0a1219; --panel: #101c24; --line: #263842; --text: #eef3eb;
  --sub: #a9bbc1; --muted: #8babb1; --gold: #f7d586; --mint: #76e3ba; --danger: #ff9a84;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1312px, calc(100% - 112px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); background: #0d161d; }
.masthead { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; font-weight: 750; letter-spacing: .18em; white-space: nowrap; }
.wordmark > svg { width: 38px; color: var(--gold); }
.wordmark-online { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; letter-spacing: .31em; }
.header-nav { display: flex; align-items: center; gap: 24px; color: var(--sub); font-size: 14px; }
.header-nav a { text-decoration: none; }
.header-nav a:hover { color: var(--text); }
#admin-link { color: var(--gold); font-size: 12px; }
.audio-toggles { display: flex; align-items: center; gap: 6px; }
.audio-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; padding: 8px 4px; background: none; color: var(--muted); white-space: nowrap; }
.audio-toggle[aria-pressed="true"] { color: var(--gold); }
#ambience[aria-pressed="true"] { color: var(--mint); }
.audio-toggle svg { width: 16px; height: 16px; }
.sound-open { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 20px; background: transparent; color: var(--gold); }
.sound-open:hover { background: #1a2a31; }
.sound-open svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-settings { position: fixed; inset: 86px 24px auto auto; margin: 0; width: min(310px, calc(100vw - 28px)); padding: 16px 18px 20px; border: 1px solid #426056; border-radius: 15px; background: #101e24; color: var(--text); box-shadow: 0 18px 60px #0007; }
.sound-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sound-heading h2 { font-size: 18px; margin: 0; }
.sound-heading > button { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 50%; color: var(--sub); font-size: 25px; }
.sound-channel + .sound-channel { margin-top: 18px; }
.sound-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 14px; }
.sound-label .audio-toggle { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: #172b31; }
.sound-label label { cursor: pointer; }
.sound-label output { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gold); }
.sound-channel:last-child output { color: var(--mint); }
.sound-channel input { display: block; width: 100%; height: 28px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.sound-channel:last-child input { accent-color: var(--mint); }
.sound-channel input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 680px) { .sound-open { min-width: 40px; justify-content: center; padding: 8px; } .sound-open span { display: none; } .sound-settings { top: 66px; right: 14px; } }
.live-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; border: 1px solid #315049; border-radius: 4px; background: #132724; padding: 4px 10px; color: #b1ecd5; font-size: 12px; white-space: nowrap; }
.live-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px #76e3ba77; }
.beta-badge { border-radius: 999px; background: transparent; color: var(--gold); text-transform: uppercase; letter-spacing: .11em; }
.live-chip[data-mode="fallback"], .live-chip[data-mode="loading"], .live-chip[data-mode="outside"] { color: #f0d290; border-color: #564629; background: #29231b; }
.live-chip[data-mode="fallback"] i, .live-chip[data-mode="loading"] i, .live-chip[data-mode="outside"] i { background: var(--gold); box-shadow: none; }
.live-chip[data-mode="offline"], .live-chip[data-mode="danger"] { color: #ffb4a2; border-color: #694138; background: #301d1c; }
.live-chip[data-mode="offline"] i, .live-chip[data-mode="danger"] i { background: var(--danger); box-shadow: none; }
.hero { min-height: 575px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 16px; padding-block: 45px 42px; }
.hero-copy { position: relative; z-index: 1; padding-block: 22px; }
.eyebrow, .hero-art figcaption, .site-footer, .step-no { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 12px; font-weight: 600; letter-spacing: .15em; }
.eyebrow { color: var(--mint); margin: 0 0 13px; text-transform: uppercase; line-height: 1.45; }
.accent-mark { display: inline-block; width: 22px; height: 1px; margin-right: 9px; vertical-align: middle; background: var(--mint); }
.hero h1 { font-weight: 730; font-size: clamp(55px, 7.6vw, 111px); line-height: .94; letter-spacing: -.069em; margin: 0 0 25px; }
.hero h1 span { color: var(--gold); display: block; }
.hero-intro { color: var(--sub); font-size: clamp(16px, 2vw, 20px); line-height: 1.55; max-width: 397px; margin: 0 0 28px; }
.entry { display: flex; gap: 10px; flex-wrap: wrap; }
.mode-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mode-links button { min-height: 35px; padding: 6px 8px; border: 1px solid #334852; border-radius: 4px; background: #15242d; color: var(--sub); font-size: 12px; }
.mode-links button:hover:not(:disabled) { color: var(--text); background: #213742; }
.mode-links button:disabled { opacity: .55; }
.primary, .google, .action { border-radius: 5px; border: 1px solid transparent; padding: 10px 16px; min-height: 42px; font-weight: 650; }
.primary { background: var(--gold); color: #172025; }
.primary:hover:not(:disabled) { background: #ffe5a9; }
.play, .google { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; }
.play { min-width: 138px; font-size: 17px; }
.play svg, .google svg { width: 17px; height: 17px; }
.google { background: #182630; color: #e9f1f1; border-color: #364a54; }
.google:hover:not(:disabled) { background: #243742; }
.google:disabled, .primary:disabled, .action:disabled { opacity: .52; }
.entry-note { color: var(--muted); margin: 12px 0 0; font-size: 13px; min-height: 18px; }
.text-button { margin-top: 7px; padding: 0; color: var(--sub); text-decoration: underline; border: 0; background: none; }
.credentials { max-width: 420px; margin-top: 8px; border: 1px solid #344a54; border-radius: 5px; background: #122029; }
.credentials > summary { padding: 7px 9px; cursor: pointer; color: var(--sub); font-size: 13px; font-weight: 650; }
.credentials > summary:focus-visible, .auth-fields input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.credentials > summary svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: text-bottom; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.credentials form { padding: 3px 9px 9px; }
.auth-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.auth-fields label { min-width: 0; display: grid; gap: 3px; color: var(--sub); font-size: 12px; }
.auth-fields input { min-width: 0; width: 100%; min-height: 39px; padding: 5px 7px; border: 1px solid #405761; border-radius: 4px; background: #0a1720; color: var(--text); font: 16px system-ui, sans-serif; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; margin-top: 8px; }
.auth-actions .primary { min-height: 36px; padding: 5px 10px; font-size: 13px; }
.auth-actions .text-button { margin: 0; font-size: 13px; }
.auth-feedback { color: var(--gold); margin-top: 5px; }
.auth-feedback:empty { display: none; }
.hero-art { position: relative; isolation: isolate; margin: 0; min-width: 0; }
.hero-art img { width: 100%; height: auto; display: block; }
.plate-corner { width: 19px; height: 19px; border: solid #6aa8a7; opacity: .68; position: absolute; pointer-events: none; }
.plate-top { top: 7%; right: 4%; border-width: 1px 1px 0 0; }
.plate-bottom { bottom: 8%; left: 4%; border-width: 0 0 1px 1px; }
.hero-art figcaption { position: absolute; right: 4%; bottom: 8%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: #9bc1bd; font-size: 10px; }
.hero-art figcaption span:last-child { color: var(--gold); }
.cycle { border-top: 1px solid var(--line); padding: 34px 0 48px; scroll-margin-top: 16px; }
.cycle-heading { display: flex; align-items: baseline; gap: 17px; flex-wrap: wrap; margin-bottom: 15px; }
.cycle-heading .eyebrow { margin: 0; }
.cycle h2 { font-size: clamp(21px, 3vw, 31px); letter-spacing: -.035em; margin: 0; }
.cycle ol { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cycle li { display: flex; align-items: flex-start; gap: 14px; min-height: 108px; padding: 15px; border: 1px solid var(--line); background: #101b24; border-radius: 5px; }
.step-no { color: var(--gold); padding-top: 4px; }
.cycle h3 { font-size: 16px; margin: 0 0 4px; }
.cycle li p { font-size: 14px; line-height: 1.45; color: var(--sub); margin: 0; }
.site-footer { color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
.site-footer .wrap { min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding-block: 8px; }
.site-footer a { text-underline-offset: 3px; }
html:fullscreen { overflow: auto; }
#game { position: fixed; inset: 0; width: 100%; height: 100dvh; margin: 0; padding: 0; }
#game .game-grid { display: block; height: 100%; }
#game .arena { position: relative; min-height: 0; height: 100%; isolation: isolate; border: 0; border-radius: 0; overflow: hidden; background: #0b1c25; }
#field { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#field:focus-visible { outline: 1px solid #789eac; outline-offset: -2px; }
#map-open { position: absolute; inset: 65px max(10px, env(safe-area-inset-right)) auto auto; padding: 0; border: 1px solid #426167; border-radius: 4px; background: #0a1620e8; opacity: .85; }
#map-open:hover, #map-open:focus-visible { border-color: var(--mint); opacity: 1; }
#map { display: block; width: 100px; height: 70px; }
#map-dialog { width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 12px; border: 1px solid #456d68; border-radius: 16px; background: #102129; color: var(--text); }
#map-dialog::backdrop { background: #050c16bb; }
#map-dialog h2 { padding-left: 5px; }
#explored-map { display: block; width: 100%; height: min(68dvh, 580px); margin-top: 8px; border: 1px solid #345359; border-radius: 8px; }
.action:not(.primary) { background: #172a35; border-color: #4a626d; }
.action:not(.primary):hover:not(:disabled) { background: #23414c; }
kbd { font: .75em ui-monospace, Consolas, monospace; margin-left: 3px; padding: 1px 3px; border: 1px solid currentColor; opacity: .8; border-radius: 3px; white-space: nowrap; }
.death { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0b19284d, #081522a8);
  display: grid; place-items: center; text-align: center; padding: 15px; }
.death-card { display: grid; gap: 12px; min-width: 184px; padding: 14px 17px; margin-top: 100px;
  background: #111f2bf5; border: 1px solid #e8aa7c50; border-radius: 15px; box-shadow: 0 16px 48px #050a1590; }
.death h2 { margin: 0; font-size: 19px; font-weight: 650; }
.death button { min-height: 42px; padding: 0 18px; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .death:not([hidden]) { animation: death-reveal .22s ease-out both; }
  @keyframes death-reveal { from { opacity: 0; } to { opacity: 1; } }
}
.game-panel { display: grid; align-content: start; gap: 7px; min-width: 0; }
.panel-section { min-width: 0; padding: 9px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; }
.panel-section h2 { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.hud-symbols, .sr-only { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
.hud-icon { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.phenotype { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.phenotype > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px; padding: 3px; border: 1px solid #283e48; border-radius: 4px; background: #0c1922; }
.phenotype .hud-icon, .meter-label .hud-icon { color: var(--muted); }
.meter-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; margin: 6px 0 3px; }
.meter-label label, .digest > .meter-label span:first-child, .gene-heading h2 { display: flex; align-items: center; gap: 4px; }
.meter-label > span:last-child { color: var(--sub); font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 6px; display: block; overflow: hidden; appearance: none; border: 0; border-radius: 2px; background: #273b45; color: var(--mint); }
progress::-webkit-progress-bar { background: #273b45; }
progress::-webkit-progress-value { background: var(--mint); }
progress::-moz-progress-bar { background: var(--mint); }
#cargo::-webkit-progress-value { background: var(--gold); }
#cargo::-moz-progress-bar { background: var(--gold); }
.panel-hint { font-size: 12px; line-height: 1.38; color: var(--sub); margin: 6px 0 0; }
.hud-hint { font-size: 11px; margin-top: 4px; }
.intake-stat { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 8px; color: var(--sub); font-size: 11px; }
.intake-stat > span { display: inline-flex; align-items: center; gap: 4px; }
.intake-stat b { color: var(--gold); font-weight: 550; font-variant-numeric: tabular-nums; }
.intake-progress .meter-label { color: var(--gold); font-size: 11px; }
#intake { color: var(--gold); }
#intake::-webkit-progress-value { background: var(--gold); }
#intake::-moz-progress-bar { background: var(--gold); }
.digest { border-top: 1px solid var(--line); margin-top: 7px; }
.digest ul, .upgrades { list-style: none; margin: 0; padding: 0; }
.digest li { margin: 6px 0; }
.digest li .meter-label { font-size: 11px; }
.digest li .meter-label > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digest li .meter-label > span:last-child { flex-shrink: 0; }
.digest li progress { height: 4px; }
.gene-heading { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.gene-heading h2 { margin: 0; }
.gene-heading .hud-icon { color: var(--gold); width: 17px; height: 17px; }
.gene-count { color: var(--gold); font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.upgrades { display: grid; gap: 3px; margin-top: 5px; }
.growth-row { --growth-tint: #8ee5be; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 40px; padding: 3px 4px; border: 1px solid #3355528c; border-radius: 8px; background: linear-gradient(105deg, #203b3c94, #10242d70); }
.growth-row[data-upgrade="size"] { --growth-tint: #c7e7a0; }
.growth-row[data-upgrade="cargo"] { --growth-tint: #f2d588; }
.growth-row[data-upgrade="speed"] { --growth-tint: #9fe6f6; }
.growth-row[data-upgrade="enzyme"] { --growth-tint: #c9b6ff; }
.growth-row[data-upgrade="absorption"] { --growth-tint: #86efd3; }
.growth-row[data-upgrade="armor"] { --growth-tint: #f3b199; }
.growth-row[data-upgrade="reach"] { --growth-tint: #acd5ff; }
.growth-emblem { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 43% 53% 49% 46%; border: 1px solid color-mix(in srgb, var(--growth-tint) 47%, transparent); background: radial-gradient(ellipse at 40% 34%, color-mix(in srgb, var(--growth-tint) 28%, #0d202b), #11252c 73%); color: var(--growth-tint); }
.growth-emblem .hud-icon { width: 23px; height: 23px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--growth-tint) 45%, transparent)); stroke-width: 1.4; }
.growth-name { display: grid; gap: 1px; min-width: 0; font-size: 11px; line-height: 1.2; }
.growth-name strong { overflow-wrap: anywhere; }
.growth-name small { color: var(--sub); font-size: 9px; font-variant-numeric: tabular-nums; }
.growth-buy, .growth-max { display: inline-flex; justify-content: center; align-items: center; gap: 4px; min-height: 31px; padding: 2px 6px; border: 1px solid #947e4d; border-radius: 6px; background: #403726; color: #ffdf9c; font-size: 11px; font-variant-numeric: tabular-nums; }
.growth-buy { min-width: 46px; white-space: nowrap; }
.growth-plus { font-size: 18px; line-height: 1; }
.growth-max { padding-inline: 5px; border-color: #506767; background: #1b3439; color: #b7e1d6; font-size: 9px; font-weight: 750; }
.growth-buy:hover:not(:disabled), .growth-max:hover:not(:disabled) { filter: brightness(1.35); }
.growth-buy:disabled, .growth-max:disabled { opacity: .54; }
.upgrade-effects { display: flex; flex-wrap: wrap; gap: 1px 5px; margin-top: 2px; font-size: 10px; font-variant-numeric: tabular-nums; }
.upgrade-effects > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.upgrade-effects .hud-icon { width: 12px; height: 12px; }
.effect-gain { color: #9cdec8; }
.effect-loss { color: #ffb99e; }
.feedback { min-height: 22px; margin: 9px 0 0; font-size: 13px; color: #f4d899; }
.game-foot { display: flex; flex-wrap: wrap; gap: 9px 16px; justify-content: space-between; color: var(--sub); font-size: 12px; }
.game-foot i { display: inline-block; margin-inline: 6px 3px; width: 7px; height: 7px; background: #8bd9ff; border-radius: 50%; }
.game-foot .legend-threat { background: var(--danger); }
.lobby-view { max-width: 790px; min-height: 66vh; padding-block: clamp(25px, 6vw, 64px); }
.lobby-heading { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 19px); padding: clamp(12px, 3vw, 24px); margin-bottom: 9px; border: 1px solid #345553; border-radius: 7px; background: radial-gradient(ellipse at 0 75%, #203c36, #10212c 62%); }
.lobby-heading::after { content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; inset: -105px -20px auto auto; border: 1px solid #72c9aa1c; border-radius: 50%; box-shadow: 0 0 0 19px #72c9aa0b, 0 0 0 42px #72c9aa07; pointer-events: none; }
.lobby-emblem { display: block; width: clamp(45px, 8vw, 69px); color: var(--mint); }
.lobby-heading .eyebrow { margin: 0 0 3px; font-size: 10px; }
.lobby-heading h1 { margin: 0; font-size: clamp(25px, 6vw, 49px); line-height: 1.04; letter-spacing: -.05em; overflow-wrap: anywhere; }
.lobby-heading > .live-chip { justify-self: end; }
.lobby-panel { border: 1px solid var(--line); background: var(--panel); padding: clamp(13px, 3vw, 23px); border-radius: 7px; }
.lobby-form label { display: block; font-weight: 650; margin-bottom: 6px; }
.lobby-buttons, .lobby-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lobby-card-heading { justify-content: space-between; margin-bottom: 10px; }
.lobby-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; padding: 7px 8px; border: 1px solid #344b53; border-radius: 5px; background: #0a1720; }
.lobby-invite .action { display: inline-flex; align-items: center; gap: 4px; min-height: 35px; padding: 5px 8px; font-size: 12px; }
.lobby-invite .action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lobby-buttons input { min-width: 0; min-height: 42px; max-width: 100%; border: 1px solid #405761; border-radius: 4px; padding: 6px 9px; background: #0a1720; color: var(--text); font: inherit; }
.lobby-buttons input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lobby-code { display: block; color: var(--gold); font: 750 19px ui-monospace, Consolas, monospace; letter-spacing: .11em; }
.lobby-invite .eyebrow { margin: 0; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.lobby-panel h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 19px; }
.lobby-panel h2 small { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--sub); font-size: 11px; font-weight: 500; }
.lobby-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 177px), 1fr)); gap: 7px; padding: 0; margin: 0; list-style: none; }
.lobby-roster li { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 61px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: #0c1922; }
.lobby-roster li[data-host="true"] { border-color: #54493a; background: #1c2427; }
.lobby-cell { width: 43px; height: 43px; flex: 0 0 auto; padding: 2px; border: 1px solid #38535b; border-radius: 50%; background: #102830; }
.lobby-member { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.lobby-member-name { color: var(--text); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.lobby-roster small { padding: 1px 4px; border-radius: 3px; background: #38332a; color: var(--gold); font-size: 10px; }
.lobby-panel .feedback { margin: 8px 0; }
.lobby-buttons .text-button { margin: 0; min-height: 42px; }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 56px); }
  .hero { min-height: auto; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 28px); }
  .masthead { height: 58px; }
  .header-nav { gap: 8px; }
  .header-nav a:not(#admin-link) { display: none; }
  .audio-toggles { gap: 2px; }
  .audio-toggle { min-width: 28px; min-height: 34px; }
  .audio-toggle span { display: none; }
  .live-chip { font-size: 11px; min-height: 28px; }
  .hero { grid-template-columns: 1fr; gap: 0; padding: 19px 0 20px; }
  .hero-copy { padding: 15px 0 3px; }
  .hero h1 { font-size: clamp(50px, 12vw, 75px); margin-bottom: 18px; }
  .hero-intro { margin-bottom: 19px; }
  .hero-art { width: min(100%, 510px); margin: -2px auto 0; }
  .cycle { padding: 21px 0 25px; }
  .cycle-heading { gap: 5px 12px; }
  .cycle ol { grid-template-columns: 1fr; gap: 7px; }
  .cycle li { min-height: 0; padding: 10px; }
  #map { width: 84px; height: 59px; inset: 7px 7px auto auto; }
  .panel-section { padding: 8px; }
  .meter-label { font-size: 11px; }
}
@media (max-width: 520px) {
  .lobby-heading { grid-template-columns: auto minmax(0, 1fr); }
  .lobby-heading > .live-chip { grid-column: 2; justify-self: start; }
}
@media (max-width: 380px) {
  .auth-fields { grid-template-columns: 1fr; }
  .wordmark { gap: 5px; }
  .wordmark > svg { width: 30px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }
.admin { max-width: 760px; padding-block: clamp(32px, 7vw, 72px); }
.admin h1 { margin: 0 0 11px; font-size: clamp(34px, 7vw, 58px); line-height: 1.04; letter-spacing: -.05em; }
.admin-summary { color: var(--sub); line-height: 1.5; }
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px; margin: 24px 0; }
.admin-metrics > div { background: var(--panel); padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.admin-metrics dt { color: var(--sub); font-size: 13px; margin-bottom: 4px; }
.admin-metrics dd { margin: 0; font-size: 23px; font-weight: 700; color: var(--gold); overflow-wrap: anywhere; }
.credits {
  max-width: 44rem;
  margin: 8vh auto;
  padding: 0 1.25rem;
  line-height: 1.65;
}
.credits a { color: #8ae8cd; text-decoration: underline; }
.credits h1 { margin-top: 1.5rem; }

/* During an expedition, only the field owns layout space. HUD floats above it. */
html:has(body.playing), body.playing { overflow: hidden; }
body.playing > .site-header { display: none; }
.maintenance-countdown { position: fixed; z-index: 9; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; padding: 13px 22px; border: 1px solid #8c774e; border-radius: 16px; background: #10242bf2; box-shadow: 0 10px 44px #041017a0; color: var(--gold); pointer-events: none; text-align: center; white-space: nowrap; }
.maintenance-countdown strong, .maintenance-clock { font-size: clamp(40px, 7vw, 70px); line-height: 1.02; font-weight: 720; font-variant-numeric: tabular-nums; }
.maintenance-countdown small { color: var(--sub); }
.maintenance-room { min-height: 70dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 44%, #1b3c3b, transparent 57%); }
.maintenance-card { display: grid; justify-items: center; gap: 10px; text-align: center; }
.maintenance-clock { width: 118px; aspect-ratio: 1; display: grid; place-items: center; color: var(--gold); border: 1px solid #b5a06a; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #695a35, #203631 75%); box-shadow: 0 0 28px #d8b66a30; }
.maintenance-card h1, .maintenance-card p { margin: 0; }
.maintenance-card p { color: var(--sub); }
.maintenance-card button { margin-top: 8px; }
.game-tools { position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 4px; }
.hud-tool, .quick-specimen, .quick-evolution { border: 1px solid #46645c88; background: #0c1d23d9; box-shadow: 0 3px 16px #0003; backdrop-filter: blur(10px); }
.hud-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; min-width: 36px; padding: 7px; border-radius: 10px; color: #c4d8d0; }
.hud-tool:hover { background: #203b3bdc; border-color: var(--mint); }
.hud-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#game-sound { min-width: 48px; height: 48px; color: var(--gold); }
#game-sound svg { width: 29px; height: 29px; }
#game-sound[data-muted="true"] { color: var(--sub); }
.hud-connection { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--mint); }
.hud-connection[data-mode="loading"], .hud-connection[data-mode="fallback"] { color: var(--gold); }
.hud-connection[data-mode="offline"] { color: var(--danger); }
.field-hud { position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: 252px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#game:has(#death:not([hidden])) .field-hud { visibility: hidden; }
.quick-specimen, .quick-evolution { padding: 6px 8px; border-radius: 11px; pointer-events: auto; }
.quick-specimen { display: grid; gap: 4px; }
.quick-evolution { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.quick-meter { --bar-tint: var(--mint); display: grid; grid-template-columns: 15px minmax(0, 1fr) minmax(43px, auto); align-items: center; gap: 6px; color: var(--bar-tint); }
.quick-meter progress { height: 5px; border-radius: 6px; }
.quick-meter progress::-webkit-progress-value { background: var(--bar-tint); }
.quick-meter progress::-moz-progress-bar { background: var(--bar-tint); }
.quick-meter b { text-align: right; white-space: nowrap; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.quick-load { --bar-tint: #f3cf82; }
.quick-absorption { --bar-tint: #c5b6fb; }
.quick-specimen[data-danger="true"] .quick-membrane { --bar-tint: var(--danger); }
.quick-specimen[data-danger="true"] { border-color: var(--danger); }
.quick-digests { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px 0 0; margin: 0; list-style: none; border-top: 1px solid #35545080; }
.digest-portrait { position: relative; width: 42px; height: 42px; overflow: hidden; border-radius: 8px; border: 1px solid #426764; background: radial-gradient(circle at 50% 42%, #264955, #0b1e29 72%); }
.digest-portrait canvas { width: 100%; height: 100%; display: block; }
.digest-portrait progress { position: absolute; bottom: 0; height: 3px; background: #25404a; }
.quick-evolution-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 23px; }
.quick-stock { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 14px; font-variant-numeric: tabular-nums; }
.quick-upgrade-hint { margin-inline-start: auto; color: var(--sub); font-size: 10px; }
.quick-details { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border: 1px solid #46645c; border-radius: 5px; color: #c8e1d8; background: #20373d; font-size: 10px; }
.quick-details .hud-icon { width: 11px; height: 11px; }
#cell-panel, .hud-popover { position: fixed; inset: 58px auto auto 10px; margin: 0; width: min(330px, calc(100vw - 20px)); max-height: calc(100dvh - 76px); padding: 12px; border: 1px solid #46685f; border-radius: 14px; background: #0f2028f5; color: var(--text); box-shadow: 0 16px 50px #0008; overflow: auto; overscroll-behavior: contain; }
#cell-panel:not(:popover-open), .hud-popover:not(:popover-open) { display: none; }
#cell-panel:popover-open { display: grid; grid-template-columns: 1fr; gap: 8px; }
.hud-popover { inset: 58px 10px auto auto; }
.hud-popover p { font-size: 13px; line-height: 1.6; color: var(--sub); }
.hud-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hud-popover-heading h2 { margin: 0; font-size: 15px; }
.hud-close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #21383d; color: var(--sub); font-size: 25px; line-height: 1; }
.cell-location { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cell-location small { font-size: 11px; color: var(--sub); }
.cell-location .live-chip { font-size: 11px; }
body.playing .sound-settings { top: 65px; right: 10px; max-height: calc(100dvh - 76px); overflow: auto; }
#game .feedback { position: absolute; z-index: 4; left: 50%; bottom: 68px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); min-height: 0; margin: 0; padding: 8px 12px; border-radius: 9px; background: #10232be0; font-size: 12px; text-align: center; pointer-events: none; }
#game .feedback:has(#feedback:empty):not(:has(#retry:not([hidden]))) { display: none; }
#game .feedback #retry { pointer-events: auto; }
@media (max-width: 600px) {
  .field-hud { top: max(64px, calc(env(safe-area-inset-top) + 52px)); right: max(10px, env(safe-area-inset-right)); width: auto; justify-content: space-between; }
  .quick-specimen { width: min(210px, calc(100% - 93px)); }
  .quick-upgrades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-upgrades .growth-row { grid-template-columns: 25px minmax(0, 1fr) auto auto; gap: 3px; padding-inline: 2px; }
  .quick-upgrades .growth-emblem { width: 25px; height: 27px; }
  .quick-upgrades .growth-emblem .hud-icon { width: 19px; height: 19px; }
  .quick-upgrades .growth-buy, .quick-upgrades .growth-max { padding-inline: 3px; min-width: 0; }
  .quick-upgrades .growth-buy { gap: 2px; }
  .quick-upgrades .growth-name { font-size: 10px; }
  #cell-panel { top: 64px; max-height: calc(100dvh - 76px); }
  #map-open { top: 64px; }
  #map { width: 84px; height: 59px; }
  #game .feedback { bottom: min(234px, 52dvh); }
}