@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#eef4ec;--muted:#bcd3d2;--plate:#06202ad6;--gold:#f2d892;--threat:#ff8f78;--cyan:#8fe9ff;--edge:24px;--glass:#04202be0;--line:#d6eeee30;--mono:ui-monospace,'Geist Mono',monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#04131d;overflow:hidden}
body{color:var(--ink);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
.sea{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.back,.tools{position:absolute;z-index:3;top:max(16px,env(safe-area-inset-top))}
.back{left:var(--edge);display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);letter-spacing:.03em;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--glass);font-size:14px}
.tools{right:var(--edge);display:flex;gap:8px}
/* On a phone the top row has no room for Sound beside the round's pill; it's on the pause card. */
@media (max-width:700px){.tools #sound{display:none}}
.tools button{border:1px solid var(--line);background:#051f2bd0;border-radius:99px;min-height:44px;padding:8px 14px}

/* ---- HUD ------------------------------------------------------------------------------------ */
/* No backdrop blur and no CSS filters on anything shown in play (fix pass after look round 4): the
   water behind a panel changes every frame, so a blurred backdrop was blurred again every frame, at
   the screen's own pixels. On a 2x laptop at 1440x900 that held the round to 60 fps (median 16.7 ms,
   p95 25 ms; with the HUD hidden 8.3 / 9.2 ms). The plates are a little more opaque instead. */
.hud{position:absolute;z-index:2;background:var(--plate);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.sea:not([data-phase=playing]):not([data-phase=paused]) :is(.hud,.marks,.reticle,.touch,.tools){display:none}
/* Paused: the dim card owns the middle, so the marks and the reticle step out from under its heading. */
.sea[data-phase=paused] :is(.marks,.reticle){display:none}
.hud-label{display:block;font:700 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.hud-hp{left:var(--edge);bottom:max(20px,env(safe-area-inset-bottom));width:236px;display:grid;gap:7px}
.bar{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:8px;font:700 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.bar i{display:block;height:8px;border-radius:9px;background:linear-gradient(90deg,var(--c) var(--v,100%),#ffffff1c var(--v,100%))}
.bar b{font:700 13px var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bar.shield{--c:#7fd8ff}.bar.hull{--c:#f2d892}
.hud-hp.broken .bar.shield b{color:var(--threat)}
.hud-hp.critical .bar.hull{--c:#ff7a62}.hud-hp.critical .bar.hull b{color:var(--threat)}
.status{margin:0;font-size:13px;color:var(--muted)}
.status:empty{display:none}
.hud-hp.broken .status{color:var(--threat);font-weight:700}
.hud-round{left:50%;translate:-50% 0;top:max(14px,env(safe-area-inset-top));display:grid;grid-template-columns:auto auto auto auto;align-items:baseline;gap:4px 10px;padding:8px 16px}
.hud-round b{font-size:24px;font-weight:760;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hud-round b#kills{color:var(--gold);min-width:1.4ch}
.hud-round .time-label{margin-left:8px}
.hud-round.late b#time{color:var(--threat)}
.hud-arms{right:var(--edge);bottom:max(20px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,auto);gap:6px;padding:8px}
.hud-arms button{display:flex;align-items:center;gap:7px;border:1px solid transparent;background:#ffffff0a;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:600;color:var(--muted)}
.hud-arms button.on{border-color:#f2d89299;color:var(--ink);background:#f2d8921f}
.hud-arms kbd{font:700 10px var(--mono);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
.pips{display:inline-flex;gap:3px}.pips i{width:6px;height:12px;border-radius:3px;background:#ffffff26}.pips i.on{background:var(--gold)}
.hint{grid-column:1/-1;margin:2px 4px 0;font-size:13.5px;color:var(--muted);min-height:17px}
/* Look round 4: while the torpedo warning stands alone the hint steps back, and the panel closes up. */
.hud-arms .hint:empty{display:none}
.hint.ready,.hint-top.ready{color:var(--gold);font-weight:700}
/* The round's first lock with darts or the lance up, once, in the band between the aim (where the
   locked poacher sits) and your sub (feel round 1). */
.lock-cue{position:absolute;z-index:2;left:50%;translate:-50% 0;top:46%;margin:0;max-width:calc(100% - 32px);padding:7px 14px;border-radius:9px;background:var(--plate);border:1px solid #f2d89266;color:var(--gold);font-weight:700;font-size:16px;text-align:center;pointer-events:none}
.lock-cue:empty{display:none}
.sea:not([data-phase=playing]) .lock-cue{display:none}
/* The shield back to full after a break: "Shield full. Back in." in gold, on every size. */
.hud-hp.full .status{color:var(--gold);font-weight:700}
.hint-top{display:none;position:absolute;z-index:2;right:var(--edge);top:max(66px,calc(env(safe-area-inset-top) + 58px));max-width:calc(100% - 196px);margin:0;text-align:right;font-size:12px;line-height:1.3;color:var(--muted);background:#021018c4;border:1px solid var(--line);border-radius:8px;padding:4px 9px;pointer-events:none}
.sea:not([data-phase=playing]):not([data-phase=paused]) .hint-top{display:none!important}
/* A lock while another weapon is up: the torpedo button asks to be picked. */
.hud-arms button.cue{border-color:var(--gold);color:var(--ink);animation:cue 1s ease-in-out infinite alternate}
@keyframes cue{from{background:#f2d8920f}to{background:#f2d89240}}
@keyframes cue-chip{from{border-color:#f2d89244}to{border-color:#f2d892}}

/* Your nose's aim point, and the poachers' marks: a bracket on screen, an arrow at the edge when not.
   The reticle is a dot and four short ticks 26-34 px out, so a poacher you're aiming at shows in the
   clear circle between them (look round 1: a 34 px ring sat over a poacher at fighting range). */
.reticle{position:absolute;z-index:1;left:0;top:0;width:68px;height:68px;margin:-34px 0 0 -34px;pointer-events:none;will-change:transform}
/* The ticks' dark edge is drawn into them (a CSS drop-shadow on the moving reticle cost frames). */
.reticle::before,.reticle::after{content:'';position:absolute;left:0;top:50%;width:100%;height:5px;margin-top:-2.5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 5'%3E%3Cpath d='M0 2.5h7M61 2.5h7' stroke='%23021018' stroke-opacity='.55' stroke-width='3.5'/%3E%3Cpath d='M0 2.5h7M61 2.5h7' stroke='%23eef4ec' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/100% 100%;transition:opacity .2s}
.reticle::after{transform:rotate(90deg)}
.reticle i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#eef4ec;box-shadow:0 0 0 1px #02101880}
/* Look round 3: with a torpedo locked the aim doesn't matter (it homes), and a crosshair beside the
   gold lock bracket read as two reticles competing. Then the reticle steps down to its dot, and the
   bracket is the one mark that says where the shot goes. */
.reticle.quiet::before,.reticle.quiet::after{opacity:0}
.reticle.quiet i{opacity:.6}
.marks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* --rw, --rh: half the bracket's width and height, set per poacher from its outline on screen
   (sub-duel.js), so the bracket hugs the craft. */
.mark{--rw:17px;--rh:17px;position:absolute;left:0;top:0;will-change:transform;transition:opacity .2s}
.mark .box{position:absolute;left:calc(-1*var(--rw));top:calc(-1*var(--rh));width:calc(2*var(--rw));height:calc(2*var(--rh));border:1.5px solid #ff8f78cc;border-radius:6px;clip-path:polygon(0 0,30% 0,30% 2px,70% 2px,70% 0,100% 0,100% 30%,calc(100% - 2px) 30%,calc(100% - 2px) 70%,100% 70%,100% 100%,70% 100%,70% calc(100% - 2px),30% calc(100% - 2px),30% 100%,0 100%,0 70%,2px 70%,2px 30%,0 30%)}
.mark .info{position:absolute;left:calc(var(--rw) + 5px);top:-18px;display:grid;justify-items:start;gap:3px;font:700 11px var(--mono);color:#ffd9cf;white-space:nowrap}
/* Distance labels sit on a dark pill so they read against the bright water overhead. */
.mark .d,.edge-mark b{background:#021018c4;border-radius:5px;padding:1px 5px}
.mark .mini{position:relative;display:block;margin-left:10px;width:44px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c) var(--v),#ffffff26 var(--v))}
.mark .mini.s{--c:#7fd8ff}.mark .mini.h{--c:#f2d892}
.mark .mini::before{position:absolute;left:-10px;top:-2px;font:700 8px/8px var(--mono);color:var(--c);font-style:normal}
.mark .mini.s::before{content:"S"}.mark .mini.h::before{content:"H"}
.mark .info{gap:5px}
.sea:is([data-phase=playing],[data-phase=paused]) .back{display:none}
/* Locked: the same corner brackets, in gold and heavier. (Look round 2: a round lock ring beside the
   round reticle read as two reticles; the aim point is the only round mark on screen.) */
.mark.locked .box{border-color:var(--gold);border-width:2px;animation:lock .5s ease-out}
.mark.locked .info{color:var(--gold)}
.mark .tag{display:none;font:800 10px var(--mono);letter-spacing:.12em;color:#13303a;background:var(--gold);border-radius:4px;padding:1px 5px;width:max-content}
/* (Look round 3: a LOCKED pill beside the gold bracket made the busiest spot on screen busier; the
   gold bracket says it, and the hint line says what to do with it.) */
.mark.running .box{border-style:dashed}
/* A poacher breaking away from your torpedo (rules: DODGE): pale box and tag for the 0.6 s break. */
.mark.dodging .box{border-color:#c8f6ff}
.mark.dodging .tag{display:block;background:#c8f6ff}
.mark.bare .info{display:none}
/* No room on the right (the screen edge, a panel or a nearer readout): the readout sits to the left. */
.mark.flip .info{left:auto;right:calc(var(--rw) + 5px);justify-items:end}
@keyframes lock{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
.torp-mark{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.torp-mark::before{content:'';position:absolute;left:-9px;top:-9px;width:18px;height:18px;border:2px solid #ff6a4c;border-radius:3px;transform:rotate(45deg);box-shadow:0 0 0 1px #02101899}
.edge-mark.torp i{border-color:#ff6a4caa;background-color:#2a0d08d0}
.edge-mark.torp b{color:#ffb3a3;letter-spacing:.1em}
.tether{position:absolute;left:0;top:-.75px;height:1.5px;transform-origin:0 50%;will-change:transform;background:repeating-linear-gradient(90deg,#f2d892a0 0 6px,transparent 6px 11px)}
.edge-mark{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
/* Look round 3: filled salmon paper planes read as "a different style from the rest of the HUD".
   Now a chevron in the marks' colour on the HUD's dark plate, like the distance pills. */
.edge-mark i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:#021018c4 no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5 13.5 10 7 15.5' fill='none' stroke='%23ff9f8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border:1px solid #ff8f7866}
.edge-mark b{position:absolute;left:0;top:16px;translate:-50% 0;width:max-content;font:700 10px var(--mono);color:#ffd9cf}
.edge-mark.locked i{border-color:#f2d892aa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5 13.5 10 7 15.5' fill='none' stroke='%23f2d892' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* An incoming torpedo: a warning of its own, top centre, pulsing (look round 2: as a line in the
   shield panel it got no urgency and was easy to miss). */
/* Look round 3: a red pill with a pulsing glow read "like a default web-UI toast". Now the HUD's own
   dark plate with a red edge, and only the dot pulses. */
.warn{position:absolute;z-index:2;left:50%;translate:-50% 0;top:max(76px,calc(env(safe-area-inset-top) + 66px));margin:0;padding:6px 12px 6px 10px;border-radius:8px;background:var(--plate);border:1px solid #ff8f7855;border-left:3px solid #ff6a4c;color:#ffe3dc;font-weight:700;font-size:14px;letter-spacing:.01em;white-space:nowrap;pointer-events:none}
.warn::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff5a3a;vertical-align:1px;animation:warn .6s ease-in-out infinite alternate}
.warn:empty{display:none}
.sea:not([data-phase=playing]):not([data-phase=paused]) .warn{display:none}
@keyframes warn{from{opacity:.35}to{opacity:1}}

/* A hit flashes the screen (row 38): blue on the shield, red once it's gone. */
.flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 45%,var(--fc,#58c8ff) 100%)}
.flash.hull{--fc:#d5281a}

/* ---- touch ---------------------------------------------------------------------------------- */
.touch{display:none}
.sea.touching .touch{display:block}
.sea.touching .hud-arms kbd{display:none}
/* Every touch target is at least 44 px tall (the weapon bar was 32). */
.sea.touching .hud-arms button{min-height:44px}
/* Look round 1: the controls crowded the play area on a phone; now smaller, every target still 44 px or more. */
/* Look round 2: the stick was a faint ring lost over the coral; now a dark disc with a light rim and a
   solid knob, as legible as the buttons. */
/* Look round 4: the stick (flat grey), the weapon chips and an olive Fire read as three different kits
   beside the teal HUD. All of them now wear the HUD's own plate (--plate) and line, gold marks what's
   picked or ready, and every label is light on dark. */
.stick{position:absolute;z-index:3;left:max(20px,env(safe-area-inset-left));bottom:max(104px,calc(env(safe-area-inset-bottom) + 90px));width:112px;height:112px;border-radius:50%;border:1px solid #d6eeee55;background:radial-gradient(circle,#06202ad6 0 55%,#06202a90 56%);box-shadow:0 2px 10px #0006;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2f5d66,#123a44);border:1.5px solid #d6eeee88;box-shadow:0 2px 6px #0008;will-change:transform}
.pad{position:absolute;z-index:3;right:max(16px,env(safe-area-inset-right));bottom:max(104px,calc(env(safe-area-inset-bottom) + 90px));display:grid;grid-template-columns:auto auto;gap:10px;align-items:end}
.pad button{width:60px;height:60px;border-radius:50%;border:1px solid #d6eeee55;background:#06202ad6;color:var(--ink);font-weight:800;font-size:13px;touch-action:none}
.pad .t-fire{width:76px;height:76px;background:#06202ad0;border:2px solid #f2d892cc;color:var(--gold)}
.pad button.held{background:#f2d89266;color:#13303a}

/* ---- cards ---------------------------------------------------------------------------------- */
[data-when]{display:none}
.sea[data-phase=loading] [data-when~=loading],.sea[data-phase=ready] [data-when~=ready],.sea[data-phase=paused] [data-when~=paused],.sea[data-phase=done] [data-when~=done]{display:grid}
.card{position:absolute;z-index:4;inset:auto 0 0;padding:60px 24px max(26px,env(safe-area-inset-bottom));justify-items:center;text-align:center;gap:14px;background:linear-gradient(transparent,#021018b0 22%,#021018f0);max-height:calc(100% - 64px);overflow:auto}
.keeper{width:min(220px,40vw);height:auto;filter:drop-shadow(0 10px 24px #0008)}
.eyebrow{margin:0;font:700 11px var(--mono);letter-spacing:.18em;color:var(--gold)}
.card h1{margin:0;font-size:clamp(52px,7.5vw,104px);font-weight:560;letter-spacing:-.06em;line-height:1}
.card h1 span{display:block;margin:12px auto 0;max-width:40ch;font-size:clamp(16px,1.8vw,21px);font-weight:380;letter-spacing:-.01em;color:#e2e6d9}
.rules{margin:0;max-width:64ch;font-size:15px;line-height:1.55;color:#dfe8e2}
.rules-short{display:none}
.livery{display:grid;gap:12px;justify-items:center}
.livery .row{display:flex;gap:12px;align-items:center}
.livery .row span{width:44px;text-align:right;font:700 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
/* A 32 px swatch, touched anywhere in the 44 px square round it; 12 px apart, so the squares meet without overlapping. */
.livery button{position:relative;width:32px;height:32px;border-radius:50%;border:2px solid #ffffff30;background:var(--c);padding:0}
.livery button::after{content:'';position:absolute;inset:-6px}
.livery button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 3px #eef4ec33}
.go{border:0;border-radius:99px;padding:14px 38px;min-height:50px;background:var(--gold);color:#13303a;font-weight:800;font-size:16px;letter-spacing:.01em;box-shadow:0 10px 30px #00000055}
.go:disabled{opacity:.6;cursor:default}
.text-button{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:10px;font-size:14px}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.how{margin:0;font-size:13px;color:var(--muted);max-width:90ch}
.touch-help{display:none}
@media (pointer:coarse){.desktop-help{display:none}.touch-help{display:block}}
.fine{margin:0;font-size:12px;color:#b4c9c7}
/* The shared buy-in (overhaul/game-credit.css): on the start card the entry, balance and prizes; on
   the end card only the balance, what was paid and the refill. */
/* The paint and the buy-in sit side by side where there's room, so the start card still fits a
   900 px tall laptop with its button in view. */
.setup{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 36px;width:100%}
.credit .game-buyin{margin:0;width:min(400px,100%)}
.credit-end .game-buyin-prizes,.credit-end .game-buyin-entry,.credit-end .game-buyin-label{display:none}
.credit-end .game-buyin-balance{margin-left:0}
.pause-card{position:absolute;z-index:4;inset:0;place-content:center;justify-items:center;gap:10px;background:#021018a6;text-align:center}
.pause-card h2{margin:0;font-size:clamp(40px,5vw,64px);font-weight:520;letter-spacing:-.05em}
.pause-card p{margin:0 0 8px;color:var(--muted)}
#end:focus{outline:none}
.card-end h2{margin:0;font-size:clamp(38px,5.4vw,72px);font-weight:540;letter-spacing:-.05em;line-height:1.05}
.end-stats{display:grid;grid-template-columns:repeat(3,auto);gap:6px 28px;margin:4px 0}
.end-stats div{display:grid;gap:2px}.end-stats dt{font:700 10px var(--mono);letter-spacing:.14em;color:var(--muted)}.end-stats dd{margin:0;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.prize{margin:0;font-size:16px;color:var(--gold);font-weight:700}

@media (max-width:700px){
 :root{--edge:16px}
 /* Phone: the round's count and clock own the top centre. */
 .hud-hp{width:148px;padding:6px 8px;gap:4px;border-radius:11px;top:max(62px,calc(env(safe-area-inset-top) + 54px));bottom:auto}
 .bar{grid-template-columns:38px 1fr 22px;gap:4px;font-size:9px;letter-spacing:.1em}.bar i{height:6px}.bar b{font-size:11px}
 .status{font-size:11px;line-height:1.25}
 .hud-round{padding:6px 12px}.hud-round b{font-size:19px}
 .card{gap:10px;padding:40px 16px max(20px,env(safe-area-inset-bottom))}.card h1{font-size:50px}.card h1 span{font-size:16px}
 .rules{display:none}.rules-short{display:block;font-size:14px}
 .keeper{width:150px}
}
/* At 320 px, leave the clock its own space beside Pause, including a two-digit sink count. */
@media (max-width:360px){.hud-round{left:var(--edge);translate:none}}
/* Phone, upright or on its side: the weapon bar sits bottom centre, between the stick and the pad
   (on its side the corner placement ran under Boost and Fire), and the hint rides one short line
   above it (the gap between it and the pad is free). */
@media (max-width:700px),(max-height:500px) and (pointer:coarse){
 .hud-arms{left:50%;right:auto;translate:-50% 0;bottom:max(12px,env(safe-area-inset-bottom));padding:5px;gap:4px}
 .hud-arms button{padding:8px 8px;font-size:12px}
 /* The hint rides one short line above the weapon bar (the gap between it and the pad is free). */
 .hint{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;margin:0;min-height:0;white-space:nowrap;font-size:11px;background:#021018c4;border-radius:6px;padding:2px 8px}
 /* On touch the hint shows at the top right under Pause (.hint-top): above the weapon bar it sat
    squeezed between the stick and the buttons (look round 2). */
 .sea.touching .hud-arms .hint{display:none}
 .sea.touching .hint-top{display:block}
 .sea.touching .hint-top:empty{display:none}
 .hint:empty{display:none}
}
/* Upright phone (look round 3: "three text messages stack in the top 20%, and the joystick and
   buttons cover the bottom quarter"). One message slot: the torpedo warning takes the hint's place
   under Pause while it lasts; the shield panel's line shows only when the shield is down. The
   controls drop to the bottom edge, and the weapons ride as a row of three 44 px chips over Boost and
   Fire, so the bottom band is about 17% of the screen, from 26%. */
@media (max-width:700px){
 .warn{left:auto;right:var(--edge);translate:none;top:max(66px,calc(env(safe-area-inset-top) + 58px));max-width:calc(100% - 196px);font-size:12px;padding:4px 9px 4px 8px;white-space:pre-line;text-align:right}
 .warn:not(:empty)+.hint-top{display:none!important}
 .hud-hp:not(.broken):not(.full) .status{display:none}
 .lock-cue{font-size:13px}
 .sea.touching .stick,.sea.touching .pad{bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px))}
 .sea.touching .hud-arms{left:auto;right:max(16px,env(safe-area-inset-right));translate:none;bottom:max(100px,calc(env(safe-area-inset-bottom) + 92px));grid-template-columns:repeat(3,44px);gap:4px;padding:0;background:none;border:0}
 .sea.touching .hud-arms button{width:44px;min-height:44px;padding:0;flex-direction:column;justify-content:center;gap:3px;font-size:11px;color:var(--muted);background:#06202ad6;border-color:#d6eeee33}
 .sea.touching .hud-arms button.on{background:#06202ad8;border:1.5px solid var(--gold);color:var(--ink)}
 .sea.touching .hud-arms .pips i{width:4px;height:5px;border-radius:2px}
 /* A lock with another weapon up: the chip stays dark and its border and label pulse gold (a pale
    pulsing fill read as a disabled chip). */
 .sea.touching .hud-arms button.cue{background:#06202ad6;color:var(--gold);animation:cue-chip 1s ease-in-out infinite alternate}
}
.ws{display:none}
@media (max-width:700px){.sea.touching .wl{display:none}.sea.touching .ws{display:inline}}
/* Short desktop windows (a 1280x720 laptop and under): the short rules and no Keeper, so the start card,
   with the buy-in, still shows its button without scrolling. */
@media (max-height:780px) and (min-width:701px){.rules{display:none}.rules-short{display:block}.card{gap:10px;padding-top:30px}.card h1{font-size:60px}.keeper{display:none}}
@media (max-height:500px) and (pointer:coarse){
 .card{padding:20px 24px max(12px,env(safe-area-inset-bottom));gap:8px}.card h1{font-size:40px}.card h1 span{font-size:14px;margin-top:4px}.keeper,.rules,.fine{display:none}.rules-short{display:block;font-size:13px}
 .hud-hp{top:max(60px,calc(env(safe-area-inset-top) + 52px));bottom:auto;width:180px}
 .stick,.pad{bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px))}
}
@media (prefers-reduced-motion:reduce){.mark.locked .box,.hud-arms button.cue,.warn::before{animation:none}}