/* Reef Break: the game's HUD and cards. From the earlier WebGL page (overhaul/reef-break/reef-break.css),
   with every touch target at least 44 px and the no-WebGPU card. No backdrop blur or filters on anything
   shown during play: the water behind changes every frame. */
@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#f3f1ea;--muted:#c9d6d2;--plate:#0b1c26d9;--gold:#f2d892;--coral:#ff9a78;--cyan:#8fe9ff;--edge:24px;--glass:#08202bde;--line:#e8f2ee30;--mono:ui-monospace,'Geist Mono',monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b1c26;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}
.surf{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}
.tools button{border:1px solid var(--line);background:var(--glass);border-radius:99px;min-height:44px;min-width:44px;padding:8px 14px}
@media (max-width:700px){:root{--edge:16px}}

/* ---- HUD -------------------------------------------------------------------------------------- */
.hud{position:absolute;z-index:2;background:var(--plate);border:1px solid var(--line);border-radius:14px;padding:9px 14px}
.surf:not([data-phase=playing]):not([data-phase=paused]) :is(.hud,.callouts,.cue,.touch,.tools,.flash-line,.wave-card){display:none!important}
.surf[data-mode=live] :is(.card,.tools,.back){display:none!important}
.surf[data-mode=shot] :is(.hud,.callouts,.cue,.touch,.tools,.flash-line,.card,.back,.wave-card,.pause-card){display:none!important}
.hud-label{display:block;font:700 11px var(--mono);letter-spacing:.14em;color:var(--muted)}
.hud-wave{left:50%;translate:-50% 0;top:max(14px,env(safe-area-inset-top));display:grid;grid-template-columns:auto auto auto auto auto;align-items:baseline;gap:4px 8px;padding:7px 16px}
.hud-wave b{font-size:22px;font-weight:760;font-variant-numeric:tabular-nums}
.hud-wave .of{color:var(--muted);font-size:14px}
.hud-wave .sess-label{margin-left:10px}
.hud-wave #session{color:var(--gold)}
.hud-pocket{left:50%;translate:-50% 0;top:max(70px,calc(env(safe-area-inset-top) + 62px));width:min(420px,calc(100% - 32px));padding:8px 12px 6px}
.hud-pocket[hidden]{display:none}
.track{position:relative;height:10px;border-radius:9px;background:linear-gradient(90deg,#8fe9ff33,#8fe9ff22 50%,#ff9a7855 86%,#ff9a7888)}
.track .target{position:absolute;left:var(--pocket-start);right:calc(100% - var(--pocket-end));inset-block:0;background:#f2d89270;border-radius:3px}
.track .curl{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#fff8;translate:-1px 0}
.track .mark{position:absolute;top:-4px;width:6px;height:18px;border-radius:4px;background:var(--ink);box-shadow:0 0 0 2px #0b1c26;translate:-3px 0;left:50%}
.labels{display:flex;justify-content:space-between;margin-top:5px;font:700 10px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.labels #pocket-label{color:var(--gold)}
.hud-pocket.deep .labels #pocket-label{color:var(--coral)}
.hud-pocket.shoulder .labels #pocket-label{color:var(--cyan)}
.pocket-help{margin:7px 0 1px;font-size:12px;line-height:1.3;text-align:center;color:var(--ink)}
.ride-keys{left:50%;translate:-50% 0;bottom:max(20px,env(safe-area-inset-bottom));margin:0;width:max-content;max-width:calc(100% - 380px);text-align:center;font-size:13px;line-height:1.5;pointer-events:none}
.ride-keys[hidden]{display:none}
@media(max-width:760px){.ride-keys{bottom:140px;max-width:calc(100% - 32px);width:380px}}
.hud-speed{left:var(--edge);bottom:max(20px,env(safe-area-inset-bottom));width:104px;height:104px;padding:0;border-radius:50%;display:grid;place-items:center;align-content:center}
.hud-speed svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);rotate:135deg}
.ring-bg,.ring{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:75 100}
.ring-bg{stroke:#ffffff1c}.ring{stroke:var(--gold);stroke-dasharray:0 100}
.hud-speed b{font-size:30px;font-weight:760;font-variant-numeric:tabular-nums;line-height:1}
.hud-speed .hud-label{margin-top:2px}
.hud-score{right:var(--edge);bottom:max(20px,env(safe-area-inset-bottom));min-width:150px;text-align:right}
.hud-score b{display:block;font-size:30px;font-weight:760;font-variant-numeric:tabular-nums;line-height:1.1}
.hud-score .points{display:block;font:700 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.hud-score .combo{display:block;font:700 13px var(--mono);color:var(--gold);min-height:16px}
.hud-score .tube{display:block;font:700 13px var(--mono);color:var(--cyan);min-height:16px}
.hud-score :is(.combo,.tube):empty{display:none}
.callouts{position:absolute;z-index:2;right:var(--edge);top:152px;margin:0;padding:0;list-style:none;display:grid;justify-items:end;gap:4px;text-align:right;pointer-events:none}
.callouts li{font-weight:780;font-size:19px;letter-spacing:-.01em;text-shadow:0 2px 12px #0009;background:#0b1c2680;border-radius:8px;padding:4px 8px;animation:pop .35s cubic-bezier(.2,.8,.3,1.2) both}
.callouts li b{color:var(--gold);margin-left:8px;font-variant-numeric:tabular-nums}
.callouts li i{font-style:normal;color:var(--muted);font-size:.65em;margin-left:6px}
.callouts li.old{opacity:.65;font-size:14px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.callouts li,.surf.carding .wave-card{animation:none}}
.cue{position:absolute;z-index:2;left:50%;translate:-50% 0;bottom:max(150px,calc(env(safe-area-inset-bottom) + 140px));width:min(380px,calc(100% - 32px));text-align:center;pointer-events:none}
.cue:has(.cue-text:empty){display:none}
.cue-text{margin:0 0 8px;font-weight:760;font-size:19px;text-shadow:0 2px 10px #000a}
.cue.ready .cue-text{color:var(--gold)}
.cue-bar{position:relative;height:12px;border-radius:9px;background:#0b1c26c8;border:1px solid var(--line);overflow:hidden}
.cue-bar .band{position:absolute;top:0;bottom:0;background:#f2d89255}
.cue.ready .cue-bar .band{background:#f2d892aa}
.cue-bar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.cue.window .cue-bar .fill{width:4px!important;border-radius:2px;translate:-2px 0}
.cue.hidebar .cue-bar{display:none}
.flash-line{position:absolute;z-index:2;left:50%;translate:-50% 0;top:44%;margin:0;font-weight:800;font-size:30px;text-shadow:0 3px 16px #000b;pointer-events:none;text-align:center;max-width:calc(100% - 32px)}
.flash-line:empty{display:none}

/* ---- touch: every button at least 44 px ---------------------------------------------------------- */
.touch{display:none}
.surf.touching[data-phase=playing] .touch{display:block}
.surf.touching .hud-speed{bottom:auto;top:max(70px,calc(env(safe-area-inset-top) + 62px));width:76px;height:76px}
.surf.touching .hud-speed b{font-size:21px}
.surf.touching .hud-pocket{top:max(150px,calc(env(safe-area-inset-top) + 140px))}
.surf.touching .hud-score{bottom:auto;top:max(70px,calc(env(safe-area-inset-top) + 62px));min-width:0}
.surf.touching .hud-score b{font-size:22px}
.surf.touching .callouts{top:234px}
.steer,.pad{position:absolute;z-index:3;bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:10px}
.steer{left:16px}.pad{right:16px;flex-wrap:wrap;justify-content:flex-end;align-items:center;width:220px}
.touch button{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:#0b1c26cc;font-weight:700;font-size:14px;user-select:none;-webkit-user-select:none;touch-action:none}
.touch button.small{width:auto;min-width:64px;height:44px;border-radius:99px;padding:0 14px;font-size:13px}
.touch button.go{width:78px;height:78px;background:#f2d892e0;color:#11202a;font-size:17px}
.touch button.held{background:#f3f1ea;color:#11202a}

/* ---- cards -------------------------------------------------------------------------------------- */
.card,.pause-card{position:absolute;z-index:4;left:50%;top:50%;translate:-50% -50%;width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:#0b1c26ee;border:1px solid var(--line);border-radius:22px;padding:26px 28px;display:none}
.surf:is([data-phase=loading],[data-phase=ready]) #start,.surf[data-phase=paused] .pause-card,.surf[data-phase=done] #end,.surf[data-phase=nogpu] #nogpu{display:block}
.surf[data-phase=nogpu] :is(.back,.tools){display:none}
.keeper{display:block;width:150px;height:auto;margin:-6px auto 4px}
.eyebrow{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.18em;color:var(--gold);text-align:center}
.card h1,.card h2{margin:0 0 12px;text-align:center;font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.card h1 span{display:block;margin-top:8px;font-size:16px;font-weight:500;color:var(--muted);letter-spacing:0;line-height:1.35}
.rules{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.45}
.rules-short,.touch-help{display:none}
@media (pointer:coarse){.rules:not(.nogpu .rules){display:none}.rules-short{display:block}.desktop-help{display:none}.touch-help{display:block}}
.boards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:0;margin:0 0 12px;padding:0}
.boards legend{font:700 10px var(--mono);letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.boards label{display:grid;gap:3px;padding:10px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:#ffffff08;cursor:pointer;font-size:12.5px;color:var(--muted)}
.boards label b{color:var(--ink);font-size:15px}
.boards input{position:absolute;opacity:0;pointer-events:none}
.boards label:has(input:checked){border-color:var(--gold);background:#f2d8921c}
.boards label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.practice{display:flex;gap:10px;align-items:center;min-height:44px;font-size:13.5px;color:var(--muted);margin:0 0 14px;cursor:pointer}
.practice input{width:22px;height:22px;flex:none;accent-color:#f2d892}
.actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.go{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:99px;background:var(--gold);color:#11202a;font-weight:780;font-size:17px;padding:13px 26px;min-height:48px;text-decoration:none}
.go:disabled{opacity:.6;cursor:default}
.text-button{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:15px;padding:10px;min-height:44px}
.how{margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.fine{margin:10px 0 0;font-size:12px;color:#c9d6d299;text-align:center}
.pause-card{text-align:center}
.pause-card h2{margin:0 0 6px;font-size:30px}
.pause-card p{color:var(--muted);margin:0 0 16px}
.pause-card .text-button{display:block;margin:8px auto 0}
.controls-guide{text-align:left;font-size:13px;line-height:1.4}
.controls-guide b{color:var(--gold)}
.controls-guide dl{margin:0 0 16px}
.controls-guide dl>div{display:grid;grid-template-columns:125px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.controls-guide dt{font-weight:700;color:var(--gold)}
.controls-guide dd{margin:0;color:var(--muted)}
.key-touch,.key-gamepad{display:none}
.surf[data-input=touch] .key-keyboard,.surf[data-input=gamepad] .key-keyboard{display:none}
.surf[data-input=touch] .key-touch,.surf[data-input=gamepad] .key-gamepad{display:inline}
@media(max-width:520px){.pause-card{padding:20px 18px}.controls-guide dl>div{grid-template-columns:92px 1fr}}
.wave-card{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;width:min(400px,calc(100% - 32px));background:#0b1c26e8;border:1px solid var(--line);border-radius:20px;padding:18px 22px;display:none;text-align:center}
.surf.carding .wave-card{display:block;animation:pop .3s ease-out both}
.wave-card h2{margin:4px 0;font-size:46px;font-weight:820;line-height:1}
.wave-card h2 span{display:block;font-size:15px;font-weight:600;color:var(--gold);margin-top:6px;letter-spacing:.02em}
.wc-why{margin:6px 0 8px;color:var(--muted);font-size:14px}
.wc-moves,.end-waves{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13.5px;text-align:left}
.wc-moves li,.end-waves li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff12;padding-top:3px}
.wc-moves li span,.end-waves li span{color:var(--muted)}
.end-waves{margin:4px 0 12px;font-size:15px}
.end-waves li b{font-variant-numeric:tabular-nums}
.end-waves li.counts b{color:var(--gold)}
.end-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.end-stats div{background:#ffffff0a;border-radius:12px;padding:10px;text-align:center}
.end-stats dt{font:700 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.end-stats dd{margin:4px 0 0;font-size:22px;font-weight:760;font-variant-numeric:tabular-nums}
.prize{margin:0 0 14px;text-align:center;color:var(--gold);font-weight:700}
@media (max-width:520px){.card{padding:20px 18px}.card h1,.card h2{font-size:30px}.boards{grid-template-columns:1fr}.boards label{grid-template-columns:auto 1fr;align-items:baseline;gap:8px}.callouts li{font-size:19px}.flash-line{font-size:23px}.hud-wave b{font-size:18px}}
@media (max-width:520px){
 .back{padding:9px 15px}.back span{display:none}
 .hud-wave{grid-template-columns:auto auto auto auto;padding:6px 12px;gap:2px 6px;top:max(16px,env(safe-area-inset-top))}
 .hud-wave .hud-label:first-child{display:none}
 .hud-wave .sess-label{margin-left:6px}
 .tools #cam{display:none}
}
.surf.touching .cue{bottom:max(250px,calc(env(safe-area-inset-bottom) + 240px))}
.surf.touching .flash-line{top:38%}

/* The phone has separate rows for navigation, the session, and the wave gauges. */
@media(max-width:520px){
 .tools{gap:6px;right:12px}.tools button{padding:8px 10px;font-size:12px}
 .hud-wave{top:max(64px,calc(env(safe-area-inset-top) + 56px));white-space:nowrap;grid-template-columns:repeat(4,auto);padding:4px 12px}
 .hud-speed,.hud-score,.surf.touching .hud-speed,.surf.touching .hud-score{bottom:auto;top:max(100px,calc(env(safe-area-inset-top) + 92px))}
 .hud-speed,.surf.touching .hud-speed{width:66px;height:66px}
 .hud-speed b{font-size:21px}
 .hud-score{min-width:0}
 .hud-score b{font-size:22px}
 .hud-score{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:1px 7px;padding:6px 10px}
 .hud-score :is(.combo,.tube){font-size:12px;min-height:14px}
 .hud-score :is(.hud-label,.combo,.tube){grid-column:1 / -1}
 .hud-pocket,.surf.touching .hud-pocket{top:max(192px,calc(env(safe-area-inset-top) + 184px))}
 .callouts,.surf.touching .callouts{left:16px;right:auto;top:max(280px,calc(env(safe-area-inset-top) + 272px));width:calc(100% - 32px);text-align:left;justify-items:start}
 .surf.touching .callouts li{font-size:16px}
 .surf.touching .callouts li.old{font-size:13px}
 .steer{left:12px;gap:8px}.steer button{width:52px;height:52px;font-size:12px;line-height:1.15}
 .pad{right:12px;display:grid;grid-template-columns:64px 64px;gap:8px;width:136px}
 .pad button.small{min-width:64px;width:64px;padding:0 3px;font-size:12px}
 .pad button.go{grid-column:2;width:64px;height:64px}
 .surf.touching .cue{bottom:max(230px,calc(env(safe-area-inset-bottom) + 220px))}
 .card #credit,.card #credit-end{margin-bottom:14px}
}
.card .game-buyin{font-size:13px}.card .game-buyin-prizes{margin:8px 0}.card .game-buyin-status:empty{display:none}
.board-note{display:none}
@media(max-width:520px){
 .keeper{width:110px}.boards{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
 .boards label{display:flex;align-items:center;justify-content:center;padding:8px 2px;min-height:44px}
 .boards label b{font-size:12.5px}.boards label span{display:none}
 .board-note{display:block;font-size:12px;color:var(--muted);margin:0 0 8px;text-align:center}
}