:root{--sand: #f3d27a;--ocean: #1aa6c9;--deep: #0b6f8a;--ink: #1f3b4d;--panel: rgba(255, 250, 235, .92);--text-scale: 1;--coral: #ff6b8a;--gold: #ffd24a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#123;color:var(--ink);font-family:Trebuchet MS,Segoe UI,sans-serif;touch-action:none;overscroll-behavior:none;user-select:none}#app{height:100%;width:100%;display:grid;place-items:center;background:radial-gradient(circle at top,#4ec4e0,#0b6f8a 70%)}#game-shell{position:relative;width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,56.25vw);background:#f3d27a;box-shadow:0 12px 40px #00000047;overflow:hidden}#game-canvas{display:block;width:100%;height:100%;touch-action:none;position:relative;z-index:1}#ui-root,#hud,#rotate-gate{position:absolute;inset:0}#ui-root{pointer-events:none;z-index:5}#ui-root .overlay{pointer-events:auto}#hud{pointer-events:none;padding:12px;z-index:4}#hud button,#hud .tutorial-card{pointer-events:auto}.overlay{height:100%;display:grid;place-items:center;background:linear-gradient(180deg,#12465a2e,#12465a6b);overflow:hidden;pointer-events:auto}.overlay.menu-overlay{background:linear-gradient(180deg,#12465a0a,#12465a47);align-items:center;padding-top:clamp(18px,6vh,48px);padding-bottom:clamp(84px,22vh,168px)}.overlay.results-overlay,.overlay.pause-overlay{background:#081c2875;backdrop-filter:blur(7px);align-items:stretch;padding:clamp(6px,1.4vh,14px)}.overlay.settings-overlay,.overlay.customize-overlay{background:#0c283747}.panel{width:min(520px,92%);background:var(--panel);border-radius:clamp(14px,2.4vh,24px);padding:clamp(8px,1.8vh,22px);display:grid;gap:clamp(6px,1.2vh,12px);box-shadow:0 10px 30px #0000002e;max-height:94%;overflow:hidden}.panel.wide{width:min(680px,94%)}.panel.menu{text-align:center}.pause-shell{width:min(980px,98%);max-height:100%;margin:auto;background:var(--panel);border-radius:clamp(14px,2vh,22px);padding:clamp(8px,1.4vh,16px);display:grid;grid-template-rows:auto 1fr;gap:clamp(6px,1vh,10px);overflow:hidden;box-shadow:0 16px 40px #00000047}.pause-shell h2{text-align:center;font-size:clamp(1.15rem,3.4vh,calc(1.6rem * var(--text-scale)))}.pause-grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(6px,1.2vh,12px);min-height:0;overflow:hidden}.pause-card{background:#fff;border-radius:16px;padding:clamp(6px,1.2vh,12px);display:grid;gap:clamp(4px,.8vh,8px);box-shadow:0 4px 14px #00000014;min-height:0;overflow:hidden;align-content:start}.pause-actions{align-content:center}.pause-actions .btn-play{min-width:0;width:100%}.pause-checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}.pause-access>label:not(.check){font-size:clamp(.75rem,2vh,calc(.88rem * var(--text-scale)))}.pause-access input[type=range]{min-height:22px}.vol-row{display:grid;grid-template-columns:minmax(64px,.72fr) 1fr auto;align-items:center;gap:8px;font-size:clamp(.78rem,2.1vh,calc(.95rem * var(--text-scale)))}.vol-row input[type=range]{min-height:28px;width:100%}.vol-pct{font-weight:800;min-width:3.2ch;color:#0b6f8a}.instr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.2vh,12px)}.instr-grid p,.instr-panel p{font-size:clamp(.78rem,2.2vh,calc(.95rem * var(--text-scale)))}.menu-screen{width:min(860px,96%);margin:0;display:grid;justify-items:center;gap:clamp(8px,1.8vh,16px);text-align:center}.beach-logo{width:min(900px,98%);height:auto;max-height:clamp(124px,34vh,236px);overflow:visible;aspect-ratio:auto;filter:drop-shadow(0 8px 16px rgba(31,59,77,.25))}.logo-c{transform-box:fill-box;transform-origin:center;animation:logo-c-tilt 5.5s ease-in-out infinite}.logo-o,.logo-ball,.logo-gold-img{overflow:visible}.logo-ball{transform-box:fill-box;transform-origin:center;transform:none}.logo-gold-img{aspect-ratio:1 / 1}.beach-logo.popping .logo-ball{animation:logo-o-pop 1.15s ease;animation-fill-mode:none}.logo-shards circle{opacity:0}.beach-logo.popping .logo-shards circle{animation:logo-shard 1.15s ease}.beach-logo.popping .s1{--dx: -28px;--dy: -22px}.beach-logo.popping .s2{--dx: 26px;--dy: -24px}.beach-logo.popping .s3{--dx: -22px;--dy: 24px}.beach-logo.popping .s4{--dx: 30px;--dy: 18px}.beach-logo.popping .s5{--dx: 4px;--dy: -32px}.beach-logo.popping .s6{--dx: -8px;--dy: 30px}.beach-logo.reduce .logo-c,.reduce-motion .logo-c,.beach-logo.reduce .logo-ball,.reduce-motion .logo-ball{animation:none;transform:none}.beach-logo.reduce .logo-shards circle,.reduce-motion .logo-shards circle{animation:none;opacity:0}@keyframes logo-c-tilt{0%,to{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}@keyframes logo-o-pop{0%{transform:scaleZ(1);opacity:1}28%{transform:scale3d(1.18,1.18,1)}42%{transform:scale3d(.15,.15,1);opacity:0}78%{transform:scale3d(.15,.15,1);opacity:0}to{transform:scaleZ(1);opacity:1}}@keyframes logo-shard{0%,30%{opacity:0;transform:translate(0)}42%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy))}}.btn-play{min-height:clamp(40px,7vh,58px);min-width:min(280px,90%);padding:.55rem 1.8rem;font-size:clamp(1.05rem,3.2vh,calc(1.45rem * var(--text-scale)));background:linear-gradient(180deg,#ff8a5b,#ff5c6e);box-shadow:0 8px #c43b4d,0 12px 20px #c43b4d47}.btn-play:hover{transform:translateY(-2px);filter:brightness(1.06)}.btn-play:active{transform:translateY(3px);box-shadow:0 3px #c43b4d}.menu-mini{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.private-beta-note{margin:0;max-width:36rem;font-size:calc(.78rem * var(--text-scale));line-height:1.35;font-weight:600;color:#3a5d72;opacity:.9}.settings-body .private-beta-note{margin-top:clamp(6px,1vh,10px)}.diff-slider{width:min(420px,100%);background:#fffaebe0;border-radius:20px;padding:12px 16px 16px;box-shadow:0 8px 24px #0000001f}.diff-title{font-weight:800}.diff-slider input[type=range]{width:100%;accent-color:#1aa6c9}.diff-labels{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:calc(.9rem * var(--text-scale));font-weight:700}.diff-labels .on{color:#0b6f8a}.diff-stats{font-weight:800;color:#1f6f86;text-align:center}.customize-screen{width:min(980px,96%);height:min(94%,640px);display:grid;grid-template-columns:minmax(260px,1.1fr) .9fr;gap:clamp(8px,1.4vh,16px);pointer-events:none;overflow:hidden}.customize-panel{pointer-events:auto;width:100%;max-height:100%;overflow:hidden}.customize-preview{display:grid;align-content:center;justify-items:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);font-weight:800}.customize-preview canvas{width:min(220px,36vh);height:auto;max-height:46vh}.settings-shell{width:min(860px,96%);height:min(94%,620px);background:var(--panel);border-radius:clamp(14px,2.4vh,24px);padding:clamp(8px,1.6vh,16px);display:grid;grid-template-rows:auto auto 1fr;gap:clamp(6px,1vh,10px);box-shadow:0 10px 30px #0000002e;overflow:hidden}.settings-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.tabs{display:flex;flex-wrap:wrap;gap:6px}.tabs button{min-height:40px;padding:.45rem .8rem;font-size:calc(.92rem * var(--text-scale))}.tabs button.on{background:#0b6f8a}.settings-body{overflow:hidden;display:grid;gap:clamp(6px,1vh,10px);align-content:stretch;min-height:0}.general-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.4vh,14px);height:100%;align-content:stretch}.general-card{display:grid;justify-items:start;align-content:center;gap:4px;text-align:left;border-radius:16px;padding:clamp(8px,1.6vh,14px);min-height:0;height:100%;background:#fff;color:var(--ink);box-shadow:0 4px 14px #00000014}.general-grid .general-card:last-child:nth-child(odd){grid-column:1 / -1}.general-card.is-note{cursor:default;background:#f7fbff}.general-card strong{font-size:calc(1rem * var(--text-scale))}.general-card .g-hint{font-size:calc(.82rem * var(--text-scale));opacity:.75;font-weight:600}.g-ico{width:28px;height:28px;border-radius:8px;background:#1aa6c9;color:#fff;display:grid;place-items:center;font-size:.85rem}.results-layout{width:min(1100px,100%);height:100%;margin:auto;display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(8px,1.4vh,14px);padding:0;max-height:100%;overflow:hidden;min-height:0}.results-main,.results-board{background:var(--panel);border-radius:clamp(14px,2.2vh,22px);padding:clamp(8px,1.6vh,16px);display:grid;gap:clamp(4px,1vh,10px);overflow:hidden;max-height:100%;min-height:0;align-content:space-between}.results-board{grid-template-rows:auto 1fr}.board-wrap{overflow:hidden;min-height:0;display:grid;gap:clamp(4px,.8vh,8px)}.cheer{margin:0;font-size:clamp(1.05rem,3.5vh,calc(1.55rem * var(--text-scale)))}.final-score{font-size:clamp(.9rem,2.4vh,calc(1.15rem * var(--text-scale)))}.final-score strong{font-size:clamp(1.35rem,4.6vh,calc(2.1rem * var(--text-scale)));color:#0b6f8a}.record-banner{background:linear-gradient(90deg,#ffe566,#ffb347);color:#5a3a00;font-weight:800;border-radius:999px;padding:clamp(4px,.8vh,8px) 14px;text-align:center;font-size:clamp(.8rem,2.2vh,calc(1rem * var(--text-scale)))}.stat-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,1vh,8px)}.stat-card{background:#fff;border-radius:14px;padding:clamp(4px,1vh,10px) 6px;text-align:center;box-shadow:0 4px 12px #00000014;font-size:clamp(.72rem,2vh,calc(.92rem * var(--text-scale)))}.stat-card .icon{display:block;width:28px;height:28px;margin:0 auto 6px;border-radius:50%}.stat-card.combo .icon{background:conic-gradient(#ffd24a,#ff8a5b,#ffd24a)}.stat-card.balloon .icon{background:radial-gradient(circle at 35% 35%,#fff,#3d8bff 60%)}.stat-card.frisbee .icon{background:#ff3b3b;border-radius:50%;height:14px;margin-top:8px}.stat-card.hit .icon{background:#7ad36a}.stat-card.target .icon{background:radial-gradient(circle,#fff 20%,#ff5c6e 21% 40%,#fff 41% 60%,#1aa6c9 61%)}.score-cards{list-style:none;padding:0;margin:0;display:grid;gap:clamp(3px,.8vh,8px);min-height:0}.score-cards li{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:8px;background:#fff;border-radius:12px;padding:clamp(4px,1vh,10px) 10px;font-size:clamp(.78rem,2.1vh,calc(.95rem * var(--text-scale)))}.score-cards li.mine{box-shadow:0 0 0 3px #ffd24a;background:#fff8dc}.score-cards .rank{grid-row:1 / span 2;font-weight:800;color:#1aa6c9}.score-cards .meta{grid-column:2;opacity:.75;font-size:.9em}h2,h3,h1,p,label,legend{margin:0;font-size:calc(1rem * var(--text-scale))}h2,.cheer{font-size:clamp(1.1rem,3.4vh,calc(1.5rem * var(--text-scale)))}button,input,select{font:inherit;min-height:clamp(36px,6.4vh,44px)}button{border:0;border-radius:999px;padding:.7rem 1.1rem;background:#1aa6c9;color:#fff;font-weight:700;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;touch-action:manipulation}button.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #1f3b4d2e}button.danger{background:#d4534d}button.danger.ghost{background:#fff;color:#d4534d}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(1px);filter:brightness(.96)}button:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}button:focus-visible,input:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}.row{display:flex;gap:8px;justify-content:center}.row.wrap{flex-wrap:wrap}label,fieldset{display:grid;gap:6px;text-align:left;border:0;padding:0}label.check{display:flex;align-items:center;gap:10px;text-align:left}label.check input{width:20px;min-height:20px;accent-color:#1aa6c9}input[type=text],input:not([type]),input[data-act=nick]{width:100%;border-radius:12px;border:2px solid rgba(31,59,77,.2);padding:.5rem .8rem}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:42px;height:42px;min-height:42px;border-radius:50%;padding:0;box-shadow:inset 0 0 0 2px #ffffff80}.swatch.on{box-shadow:0 0 0 3px #1f3b4d}.pause-btn{pointer-events:auto;position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));left:auto;width:48px;height:48px;min-height:48px;border-radius:14px;background:#ffffffeb;color:var(--ink);z-index:2}.hud-top,.hud-hearts,.hud-ammo,.power{position:absolute;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);font-weight:700}.hud-top{top:max(12px,env(safe-area-inset-top,0px));right:max(68px,calc(env(safe-area-inset-right,0px) + 58px));left:auto;text-align:right}.hud-hearts{top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:4px;max-width:min(42%,280px)}.heart{color:#ff2a4a;font-size:1.25rem;text-shadow:0 0 0 2px #7a1020,0 2px 4px rgba(0,0,0,.45);filter:drop-shadow(0 1px 0 #7a1020)}.heart.off{color:#7a1020;opacity:.28;filter:grayscale(.2)}.heart.lost{animation:heart-lost .4s ease}@keyframes heart-lost{0%{transform:scale(1.3);opacity:1;color:#ff2a4a}to{transform:scale(.6);opacity:.28}}.hud-ammo{bottom:16px;left:16px;display:flex;gap:8px}.ammo{width:30px;height:12px;border-radius:999px;background:#d4d4d4;box-shadow:0 0 0 2px #fff6}.ammo.on.red{background:#ff3b3b;box-shadow:0 0 0 2px #ffffff8c}.ammo.on.gold{background:#ffe566;box-shadow:0 0 8px 2px #ffd23ccc}.power{top:max(56px,calc(env(safe-area-inset-top,0px) + 44px));right:max(68px,calc(env(safe-area-inset-right,0px) + 58px));background:#d4a017eb;padding:6px 12px;border-radius:999px}.tutorial-card{position:absolute;left:50%;bottom:18px;transform:translate(-50%);width:min(520px,92%);background:var(--panel);border-radius:18px;padding:12px;z-index:3}.stats,.board{text-align:left;padding-left:1.1rem}.record{color:#b8860b;font-weight:800}.countdown{text-align:center}.countdown strong{font-size:4rem}#rotate-gate{background:#7fd7ee;display:grid;place-items:center;z-index:8;text-align:center;padding:24px}#rotate-gate[hidden]{display:none}.high-contrast{--panel: #fff;--ink: #111}.high-contrast button{box-shadow:0 0 0 2px #111}.high-contrast .heart{color:#c40020;filter:none;text-shadow:0 0 0 2px #111}.high-contrast .ammo.on.red{background:#c40020;box-shadow:0 0 0 2px #111}.high-contrast .ammo.on.gold{background:#f5d000;box-shadow:0 0 0 2px #111}.reduce-motion *{transition:none!important;animation:none!important}@media(max-height:430px){.overlay.menu-overlay{padding-top:clamp(6px,2.5vh,14px);padding-bottom:clamp(40px,11vh,64px)}.beach-logo{max-height:clamp(84px,24vh,112px)}.menu-screen{gap:clamp(4px,1vh,8px)}.general-card .g-hint{display:none}}.reduce-motion .btn-play:hover,.reduce-motion button:hover{transform:none}@media(max-height:600px){.overlay.menu-overlay{padding-top:clamp(12px,4vh,28px);padding-bottom:clamp(52px,13vh,100px)}.pause-checks{grid-template-columns:1fr 1fr}.pause-card label.check{min-height:32px;gap:6px;font-size:clamp(.75rem,2.1vh,calc(.88rem * var(--text-scale)))}.diff-slider{padding:8px 12px 10px}.tabs button{min-height:34px}.customize-panel{gap:clamp(4px,.8vh,8px);padding:clamp(6px,1.2vh,12px)}.swatch{width:34px;height:34px;min-height:34px}}@media(max-width:800px){.results-layout,.customize-screen,.pause-grid{grid-template-columns:1fr 1fr}.stat-cards{grid-template-columns:repeat(5,minmax(0,1fr))}.menu-screen{gap:clamp(6px,1.4vh,12px)}.general-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.general-card{grid-column:auto}}