:root{font-family:Inter,Arial,system-ui,sans-serif;color:#f6f7e9;background:#14242b;font-synthesis:none;--ink: #10232a;--acid: #dfff4b;--mint: #43f0c2;--coral: #ff6459;--cream: #f4f0d4}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-width:320px;height:100%;overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--acid);outline-offset:3px}.game-shell{position:relative;width:100%;height:100%;background:#58c5e9}.game-shell canvas{display:block;width:100%;height:100%}.sun-glow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 14% 8%,rgba(255,250,210,.26),transparent 30%),linear-gradient(180deg,#3ac0e80a 48%,#0e262630);mix-blend-mode:soft-light}.street-mark{position:absolute;left:24px;bottom:18px;color:#ffffffa8;font:800 11px/1 Inter;letter-spacing:.14em;pointer-events:none}.street-mark span{opacity:.65;margin-left:12px}.hud{position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud-card{position:absolute;top:18px;width:min(390px,35vw);background:#0c1f1fdb;border:1px solid rgba(225,255,242,.25);border-top:3px solid rgba(223,255,75,.75);box-shadow:0 12px 34px #04161a33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%)}.hud-left{left:18px}.hud-right{right:18px;clip-path:polygon(15px 0,100% 0,100% 100%,0 100%)}.hud-kicker{padding:8px 14px 7px;color:var(--acid);border-bottom:1px solid rgba(255,255,255,.1);font:900 11px/1 Inter;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 9px rgba(223,255,75,.18)}.hud-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stat{min-height:60px;padding:11px 12px;border-right:1px solid rgba(255,255,255,.1)}.stat:last-child{border:0}.stat small{display:block;color:#f0faf487;font-size:8px;font-weight:800;letter-spacing:.15em}.stat strong{display:block;margin-top:5px;font:800 19px/.9 Arial Narrow,Impact,sans-serif;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.22)}.stat.accent strong{color:var(--acid)}.pause-button{pointer-events:auto;position:absolute;top:112px;right:18px;width:42px;height:42px;border:1px solid rgba(255,255,255,.4);background:#0a1b1fb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:900}.wind-chip{position:absolute;left:50%;top:20px;transform:translate(-50%);padding:10px 14px;color:var(--ink);background:var(--acid);font:900 10px/1 Inter;letter-spacing:.14em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}.shot-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.shot-input.is-dragging{cursor:crosshair}.aim-reticle{position:absolute;width:54px;height:54px;border:2px solid var(--acid);border-radius:50%;box-shadow:0 0 0 5px #dfff4b2b,0 0 22px #dfff4b80;pointer-events:none;transition:left .04s,top .04s}.aim-reticle:before,.aim-reticle:after{content:"";position:absolute;background:var(--acid)}.aim-reticle:before{left:50%;top:-8px;bottom:-8px;width:1px}.aim-reticle:after{top:50%;left:-8px;right:-8px;height:1px}.aim-reticle span{position:absolute;top:18px;right:18px;bottom:18px;left:18px;border:2px solid var(--acid);border-radius:50%}.aim-hint{position:absolute;left:50%;bottom:124px;transform:translate(-50%);padding:9px 13px;color:#ffffffd1;background:#09191c94;font-size:9px;font-weight:800;letter-spacing:.13em;pointer-events:none}.power-wrap{position:absolute;z-index:6;left:50%;bottom:8px;transform:translate(-50%);width:min(470px,46vw);padding:12px 14px 14px;color:#fff;background:#091b1fd6;border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}.power-label{display:flex;align-items:end;justify-content:space-between;margin-bottom:8px;font-size:9px;font-weight:800;letter-spacing:.16em}.power-label b{color:var(--acid);font:800 18px/1 Arial Narrow,Impact,sans-serif}.power-track{position:relative;height:13px;background:#ffffff1f;overflow:visible}.power-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#3cd8c2,#dfff4b 70%,#ff5e52)}.perfect-zone{position:absolute;z-index:2;left:72%;width:12%;top:-18px;height:31px;border:1px solid var(--acid);color:var(--acid);font-size:6px;font-weight:900;text-align:center;padding-top:2px;letter-spacing:.08em}.power-needle{position:absolute;z-index:3;top:-4px;width:3px;height:21px;background:#fff;box-shadow:0 0 9px #fff}.kick-button{position:absolute;z-index:8;right:32px;bottom:24px;width:105px;height:105px;border:0;border-radius:50%;color:var(--ink);background:var(--acid);box-shadow:0 12px 35px #13262240,inset 0 -7px #305d212b;pointer-events:auto;transition:transform .15s,filter .15s}.kick-button:hover{transform:scale(1.05);filter:brightness(1.06)}.kick-button:active{transform:scale(.96)}.kick-button:disabled{opacity:0;pointer-events:none}.kick-button span{display:block;font:900 24px/.9 Arial Narrow,Impact,sans-serif}.kick-button small{display:block;margin-top:7px;font-size:7px;font-weight:900;letter-spacing:.13em;opacity:.6}.outcome{position:absolute;z-index:8;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle,transparent 10%,rgba(4,20,24,.3));pointer-events:none;animation:hit-flash .34s ease-out}.outcome h2{max-width:90vw;margin:8px 0 0;color:var(--acid);text-align:center;text-shadow:0 7px 0 rgba(5,28,32,.35);font:italic 900 clamp(45px,8vw,112px)/.8 "Arial Narrow",Impact,sans-serif;letter-spacing:-.02em}.outcome-save h2,.outcome-miss h2{color:#fff}.outcome-post h2,.outcome-crossbar h2{color:#ffb03b}.replay-tag{padding:7px 10px;color:var(--ink);background:#fff;font-size:8px;font-weight:900;letter-spacing:.18em}.score-pop{margin:20px 0;color:#fff;font:800 13px/1 Inter;letter-spacing:.18em}.outcome button{pointer-events:auto;padding:13px 18px;border:1px solid rgba(255,255,255,.5);color:#fff;background:#06171bb3;font-size:10px;font-weight:900;letter-spacing:.13em}@keyframes hit-flash{0%{background:#fffc}to{background:radial-gradient(circle,transparent 10%,rgba(4,20,24,.3))}}.modal-backdrop{position:absolute;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#071418b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pause-card{width:min(440px,calc(100vw - 32px));padding:40px;background:#122c32;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 90px #00000059}.pause-card h2{margin:10px 0 28px;font:italic 900 47px/.9 Arial Narrow,Impact,sans-serif}.pause-card>button:not(.primary-action){width:100%;padding:14px;border:0;border-top:1px solid rgba(255,255,255,.12);color:#ffffffbf;background:transparent;font-size:10px;font-weight:800;letter-spacing:.12em}.menu-scene,.panel-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#12303a}.menu-sky{position:absolute;top:0;right:0;bottom:0;left:0;background:url(/assets/coastal-bay-backdrop.png) center / cover no-repeat;filter:saturate(1.05) contrast(1.02)}.menu-sky:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#071c2129}.hero-panel{position:relative;z-index:2;width:min(630px,88vw);height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(30px,8vw,120px);background:linear-gradient(90deg,#081f25f5 0,#081f25d6 62%,#081f2514)}.eyebrow{color:var(--acid);font-size:10px;font-weight:900;letter-spacing:.23em;text-transform:uppercase}.hero-panel h1{margin:15px 0 12px;font:900 clamp(82px,13vw,170px)/.62 "Arial Narrow",Impact,sans-serif;letter-spacing:-.055em;text-transform:uppercase}.hero-panel h1 i{color:var(--acid)}.hero-panel p{margin:20px 0 30px;color:#ffffffad;font-size:13px}.primary-action{display:flex;align-items:center;justify-content:space-between;width:min(310px,100%);padding:17px 18px;border:0;color:var(--ink);background:var(--acid);font-size:11px;font-weight:900;letter-spacing:.14em;box-shadow:inset 0 -4px #1c462e24}.primary-action b{font-size:21px}.secondary-actions{display:flex;gap:8px;margin-top:10px}.secondary-actions button{padding:11px 9px;border:0;border-bottom:1px solid rgba(255,255,255,.25);color:#ffffffad;background:transparent;font-size:8px;font-weight:800;letter-spacing:.1em}.menu-footer{position:absolute;z-index:3;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:.15em;opacity:.55}.panel-screen{overflow-y:auto;background:radial-gradient(circle at 78% 17%,rgba(42,148,155,.35),transparent 28%),#102a31}.panel-screen:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(135deg,transparent 0 28px,#fff 29px 30px)}.panel-header{position:relative;z-index:2;min-height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.12)}.panel-header button{justify-self:start;padding:10px 0;border:0;color:#ffffffad;background:transparent;font-size:9px;font-weight:800;letter-spacing:.13em}.panel-header>span{justify-self:end;color:var(--acid);font-size:8px;font-weight:900;letter-spacing:.17em}.mini-brand{font:900 17px/1 Arial Narrow,Impact,sans-serif;letter-spacing:-.01em}.mode-wrap{position:relative;z-index:1;width:min(1100px,calc(100% - 40px));margin:0 auto;padding:7vh 0}.mode-wrap h2,.info-card h2{margin:12px 0 34px;font:italic 900 clamp(50px,8vw,90px)/.82 "Arial Narrow",Impact,sans-serif;letter-spacing:-.03em}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mode-card{position:relative;min-height:360px;padding:22px;overflow:hidden;text-align:left;border:1px solid rgba(255,255,255,.15);background:#113239c2;transition:transform .18s,background .18s,border-color .18s}.mode-card:hover{transform:translateY(-7px);border-color:var(--acid);background:#19404a}.mode-card>small{color:#ffffff61;font-size:9px;font-weight:900}.mode-icon{height:100px;display:grid;place-items:center}.mode-icon span{width:56px;height:56px;border:3px solid var(--acid);border-radius:50%;box-shadow:inset 0 0 0 9px #dfff4b14}.mode-card h3{margin:13px 0;font:800 29px/.9 Arial Narrow,Impact,sans-serif;text-transform:uppercase}.mode-card p{min-height:58px;color:#ffffff94;font-size:11px;line-height:1.5}.mode-card>b{display:inline-block;padding:7px 8px;color:var(--ink);background:var(--acid);font-size:7px;letter-spacing:.12em}.mode-card>i{position:absolute;right:20px;bottom:16px;color:var(--acid);font-size:24px}.info-card,.results-card{position:relative;z-index:1;width:min(680px,calc(100% - 36px));margin:8vh auto;padding:clamp(28px,6vw,64px);background:#0d2a31eb;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px #00000036}.info-card p{color:#ffffffad;font-size:14px;line-height:1.75}.info-card .primary-action{margin-top:30px}.settings-card label{display:grid;grid-template-columns:1fr auto;gap:12px;margin:24px 0;color:#ffffffad;font-size:10px;font-weight:900;letter-spacing:.12em}.settings-card label b{color:var(--acid)}.settings-card input{grid-column:1/-1;width:100%;accent-color:var(--acid)}.outfit-label{margin-top:35px;color:#ffffffad;font-size:10px;font-weight:900;letter-spacing:.12em}.outfits{display:flex;gap:12px;margin-top:14px}.outfits button{width:54px;height:54px;border:3px solid transparent}.outfits button.selected{border-color:#fff;box-shadow:0 0 0 3px var(--acid)}.score-list>div{display:grid;grid-template-columns:40px 1fr auto;align-items:center;padding:19px 0;border-top:1px solid rgba(255,255,255,.12)}.score-list small{color:var(--acid);font-weight:900}.score-list span{font:800 20px/1 Arial Narrow,Impact,sans-serif;text-transform:uppercase}.score-list b{font:800 22px/1 Arial Narrow,Impact,sans-serif}.results-card{text-align:center}.results-card h2{margin:12px 0 0;color:var(--acid);font:italic 900 clamp(75px,11vw,130px)/.8 "Arial Narrow",Impact,sans-serif}.results-card>p{font-size:9px;font-weight:900;letter-spacing:.2em;opacity:.5}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:35px 0;border:1px solid rgba(255,255,255,.12)}.results-grid>div{padding:16px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.results-grid small{display:block;opacity:.45;font-size:7px;font-weight:900;letter-spacing:.13em}.results-grid strong{display:block;margin-top:7px;font:800 23px/1 Arial Narrow,Impact,sans-serif}.result-actions{display:flex;gap:10px;justify-content:center}.result-actions>button:not(.primary-action){padding:0 20px;border:1px solid rgba(255,255,255,.22);background:transparent;font-size:9px;font-weight:900;letter-spacing:.1em}@media(max-width:820px){.hud-card{width:calc(50% - 15px);top:10px}.hud-left{left:10px}.hud-right{right:10px}.hud-kicker{font-size:8px}.stat{padding:9px 6px;min-height:50px}.stat small{font-size:6px}.stat strong{font-size:15px}.pause-button{top:82px;right:10px}.wind-chip{top:82px}.kick-button{right:16px;bottom:20px;width:82px;height:82px}.kick-button span{font-size:20px}.kick-button small{display:none}.power-wrap{left:14px;transform:none;width:calc(100% - 120px);bottom:24px}.aim-hint{bottom:108px;white-space:nowrap;font-size:7px}.mode-grid{grid-template-columns:repeat(2,1fr)}.mode-card{min-height:285px}.mode-icon{height:70px}.hero-panel{width:78vw;padding-left:30px}.hero-panel h1{font-size:clamp(80px,22vw,130px)}}@media(max-width:520px){.hud-card{width:calc(50% - 8px)}.hud-left{left:5px}.hud-right{right:5px}.hud-kicker{padding-left:8px}.stat{min-height:42px;padding:7px 4px}.stat strong{font-size:13px}.street-mark{display:none}.wind-chip{left:10px;transform:none;top:71px}.pause-button{top:70px}.aim-reticle{width:44px;height:44px}.aim-reticle span{top:14px;right:14px;bottom:14px;left:14px}.menu-footer{left:16px;right:16px}.menu-footer span:first-child{display:none}.hero-panel{width:100%;padding:28px;background:linear-gradient(90deg,#081f25f0,#081f2580)}.hero-panel h1{font-size:95px}.secondary-actions{flex-wrap:wrap}.panel-header{padding:0 14px}.panel-header>span{display:none}.mode-wrap{padding:5vh 0}.mode-wrap h2{font-size:55px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:210px}.mode-card p{min-height:auto}.mode-icon{position:absolute;right:20px;top:30px;opacity:.5}.results-grid{grid-template-columns:repeat(2,1fr)}.result-actions{flex-direction:column}.result-actions>button{min-height:48px;width:100%}.outcome h2{font-size:48px;line-height:.9}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}