:root{color-scheme:light;--ink:#103e58;--soft:#47798b;--blue:#078acb;--orange:#ff6c2e;--orange-dark:#d94b19;--panel:rgba(248,253,255,.96);--top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#153955;color:var(--ink);font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none;overscroll-behavior:none}button,a,select,input{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled,select:disabled{cursor:default;opacity:.65}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:4px solid #ffb52db3;outline-offset:3px}.hidden{display:none!important}#game{position:relative;width:100%;height:100%;height:100dvh;min-height:280px;overflow:hidden;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas.aiming{cursor:grabbing}.tools{position:absolute;z-index:8;top:calc(14px + var(--top));right:max(14px,env(safe-area-inset-right));display:flex;gap:7px}.icon-button{width:44px;height:44px;border:2px solid #ffffffaa;border-radius:50%;background:#f8fdffeb;box-shadow:0 6px 20px #03213433;display:grid;place-items:center}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button.muted{opacity:.65}.icon-button.muted:after{content:"";position:absolute;width:23px;height:2px;background:var(--ink);transform:rotate(-45deg)}
.screen{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:max(22px,var(--top)) max(16px,env(safe-area-inset-right)) max(22px,var(--bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(#08273b1f,#061c4347)}.panel{width:min(92vw,465px);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:clamp(25px,6vw,38px) clamp(20px,6vw,38px) clamp(21px,5vw,30px);border:2px solid #fffffff5;border-radius:30px;background:var(--panel);box-shadow:0 22px 70px #02182761,inset 0 1px 0 #fff;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.eyebrow{margin:0 0 8px;color:var(--orange);font-size:.73rem;font-weight:1000;letter-spacing:.18em;text-transform:uppercase}h1,h2{margin:0;font-weight:1000;line-height:.9;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 3px 0 #fff}h1{font-size:clamp(2.55rem,11vw,4.8rem);line-height:.84;letter-spacing:-.072em}h1 span{display:block;margin-top:11px;color:var(--blue);font-size:.47em;letter-spacing:.08em}h2{font-size:clamp(2.15rem,9vw,3.6rem)}.tagline{max-width:340px;margin:17px auto;color:var(--soft);font-size:clamp(.86rem,3.4vw,.97rem);font-weight:700;line-height:1.42}.how-to{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:17px}.how-to>div{padding:9px 5px;border-radius:13px;background:#103e580f;color:var(--soft);font-size:.61rem;font-weight:900;line-height:1.25}.how-to b{display:grid;width:25px;height:25px;margin:0 auto 6px;place-items:center;border-radius:50%;background:white;color:var(--blue);font-size:.8rem;box-shadow:0 2px 0 #103e581a}.actions{display:grid;gap:12px}.primary,.secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:55px;padding:13px 24px;border:0;border-radius:16px;text-decoration:none;font-size:1rem;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;transition:transform .12s,box-shadow .12s,background .12s}.primary{color:white;background:var(--orange);box-shadow:0 6px 0 var(--orange-dark),0 12px 24px #d94b1938}.primary:hover{background:#ff7b40}.primary:active{transform:translateY(3px) scale(.99);box-shadow:0 2px 0 var(--orange-dark)}.primary:disabled{opacity:.6}.secondary{min-height:47px;color:var(--soft);background:#103e5812}.secondary:hover{background:#103e581c}.best,.help{color:var(--soft);font-size:.63rem;font-weight:800;line-height:1.6;margin:17px 0 0}.best b{color:var(--ink);margin-left:5px}.text-button{display:block;margin:6px auto 0;background:none;border:0;min-height:44px;padding:12px 10px;color:var(--soft);font-size:.72rem;font-weight:900;text-transform:uppercase}
.loadout{display:flex;gap:10px;align-items:center}.select-shell{position:relative;display:block;min-width:0;padding:8px 10px 3px;border:1px solid #ffffffaa;border-radius:10px;box-shadow:0 4px 0 #03527b;transform:skew(-5deg);background:var(--blue);color:#fff;text-align:left}.select-shell>span{display:block;font-size:8px;letter-spacing:.13em;font-weight:1000;transform:skew(5deg);padding-left:3px}.select-shell select{display:block;width:100%;min-height:32px;border:0;color:#fff;background:transparent;font-size:.68rem;font-weight:900;outline-offset:0;transform:skew(5deg);cursor:pointer}.select-shell select option{background:#f5fbff;color:var(--ink);font-size:14px}.board-select{background:var(--orange);box-shadow:0 4px 0 var(--orange-dark)}.menu-loadout{justify-content:center;gap:12px;margin-top:3px}.menu-loadout>label{flex:1}.setup-note{font-size:.62rem;line-height:1.4;min-height:28px;color:var(--soft);font-weight:800;margin:13px 0 15px}.floating-loadout{position:absolute;top:calc(77px + var(--top));left:max(18px,env(safe-area-inset-left));pointer-events:auto;gap:12px}.floating-loadout label{width:165px}.loadout-hint{color:#e5f5ff;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 3px #103e58;margin-left:5px}
#hud{position:absolute;inset:0;pointer-events:none}.score-row{position:absolute;left:max(14px,env(safe-area-inset-left));top:calc(14px + var(--top));display:flex;gap:7px}.chip{border:2px solid #ffffffaa;background:#f8fdffeb;box-shadow:0 7px 24px #03213433;border-radius:999px;padding:12px 15px;text-align:center}.chip strong{font-size:1.3rem;font-weight:1000;line-height:1}.chip span{margin-left:4px;color:var(--soft);font-size:.6rem;font-weight:1000;letter-spacing:.07em;text-transform:uppercase}.goal-chip{position:absolute;top:calc(17px + var(--top));left:50%;transform:translateX(-50%);width:190px;border-radius:15px;background:#f8fdffdf;padding:9px 13px;text-align:center}.goal-chip>span{font-size:.59rem;letter-spacing:.1em;font-weight:1000}.track{height:6px;overflow:hidden;border-radius:99px;background:#103e581a;margin-top:6px}.track i{display:block;width:100%;height:100%;transform-origin:left;border-radius:inherit}#goalFill{background:linear-gradient(90deg,var(--blue),#e9b745);transform:scaleX(0)}
.shot-hint{position:absolute;bottom:calc(112px + var(--bottom));left:50%;transform:translateX(-50%);max-width:90%;width:max-content;text-align:center;color:var(--ink);background:#f5fbffe8;border-radius:20px;font-size:.67rem;font-weight:900;padding:9px 15px}.aim-controls,.sweep-controls,.next-controls{position:absolute;bottom:calc(19px + var(--bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:20px;width:min(850px,calc(100% - 32px));min-height:72px;padding:13px 18px;border-radius:22px;border:2px solid #ffffff77;background:#eaf7fff2;box-shadow:0 8px 28px #052f4630;pointer-events:auto}.aim-controls label{flex:1;min-width:0}.aim-controls label>span{display:flex;justify-content:space-between;font-size:.64rem;font-weight:1000;letter-spacing:.08em}.aim-controls input{display:block;width:100%;height:32px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer;touch-action:none}.aim-controls .primary{width:180px;min-height:47px;padding:12px 20px;font-size:.8rem}.sweep-controls{gap:12px;width:min(510px,calc(100% - 32px));background:#eaf7ffdd}.sweep-button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;min-height:48px;padding:7px 14px;border:0;border-radius:14px;color:#fff;background:var(--blue);box-shadow:0 3px 0 #03577f;touch-action:none}.sweep-button b{font-size:24px;line-height:1}.sweep-button>span{font-size:.65rem;font-weight:1000;letter-spacing:.09em}.sweep-button:active,.sweep-button.active{background:#17acdf}.sweep-main{flex:1}.sweep-main>span{font-size:.8rem}.sweep-main small{font-size:.47rem;margin-top:3px;font-weight:900}.sweep-main .track{width:100%;height:4px;background:#035a8999}.sweep-main .track i{background:#c7f5ff}.next-controls{width:min(550px,calc(100% - 32px));justify-content:space-between}.next-controls>span{font-weight:900;font-size:.8rem}.next-controls .primary{width:180px;min-height:47px;font-size:.8rem;padding:12px 15px}.callout{position:absolute;z-index:3;top:19%;left:50%;width:90%;transform:translate(-50%,5px);opacity:0;color:#fff;font-size:clamp(1.3rem,4vw,2.3rem);font-weight:1000;letter-spacing:.02em;text-align:center;text-shadow:0 3px 0 #103e5866,0 6px 20px #103e5855;text-transform:uppercase;pointer-events:none;transition:opacity .2s,transform .2s}.callout small{display:block;margin-top:7px;font-size:.68rem;font-weight:800;letter-spacing:0;text-transform:none}.callout.show{opacity:1;transform:translate(-50%,0)}
.result-score{margin:18px 0}.result-score strong{display:block;color:var(--blue);font-size:clamp(3rem,15vw,5.1rem);font-weight:1000;letter-spacing:-.07em;line-height:1}.result-score span,.result-score small{display:block;color:var(--soft);font-size:.62rem;font-weight:900;letter-spacing:.1em;margin:5px 0}.medals{display:flex;justify-content:center;gap:9px}.medals>span{flex:1;padding:10px 4px;background:#103e580a;border:2px solid #103e5810;border-radius:14px;color:#819eaa;font-size:.8rem;font-weight:900}.medals b{display:block;font-size:.55rem;margin-top:4px;letter-spacing:.1em}.medals>span.earned{color:#103e58;background:#fff1bf;border-color:#e7b649}.load-error{position:absolute;bottom:10px;left:10px;z-index:20;padding:14px;background:#fff;border-radius:12px;font-size:12px}.load-error button{border:0;background:none;text-decoration:underline}
@media(max-width:700px){.score-row{gap:6px}.chip{padding:12px 10px}.chip strong{font-size:1.1rem}.chip span{font-size:.48rem}.goal-chip{display:none}.floating-loadout{left:18px;right:18px;gap:12px;top:calc(74px + var(--top))}.floating-loadout label{flex:1;width:auto}.floating-loadout .loadout-hint{display:none}.select-shell{padding:7px 8px 2px}.select-shell select{font-size:.64rem;min-height:32px}.shot-hint{bottom:calc(149px + var(--bottom));font-size:.58rem;padding:7px 10px;max-width:95%}.aim-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding:9px 14px;bottom:calc(16px + var(--bottom));width:calc(100% - 28px)}.aim-controls .primary{grid-column:1 / -1;width:100%;min-height:44px;margin-bottom:3px;font-size:.75rem;padding:10px}.aim-controls input{height:28px}.aim-controls label>span{font-size:.58rem}.sweep-controls,.next-controls{bottom:calc(18px + var(--bottom));min-height:90px;padding:12px;gap:9px}.sweep-button{min-width:55px;padding:9px 11px;min-height:55px}.sweep-main small{font-size:.41rem}.next-controls>span{font-size:.72rem}.next-controls .primary{width:140px;font-size:.7rem;padding:10px}.callout{top:20%;font-size:1.45rem}.menu-loadout{gap:10px}.setup-note{font-size:.58rem}}
@media(max-height:690px){.panel{padding:20px 25px}.tagline{margin:12px auto;font-size:.84rem}.how-to{margin-bottom:13px}.setup-note{margin:10px 0 12px;min-height:24px}.best{margin-top:13px}.primary,.secondary{min-height:48px;padding:10px 18px}.help{display:none}}
@media(max-height:610px){.panel{width:min(90vw,570px);padding:17px 24px}h1{font-size:clamp(2.25rem,12vh,3.5rem)}h2{font-size:2.2rem}.tagline{margin:9px auto 11px;font-size:.79rem}.how-to{margin-bottom:11px}.actions{grid-template-columns:1.35fr 1fr}.primary,.secondary{min-height:46px;padding:9px 17px}.best{margin-top:12px}.result-score strong{font-size:2.8rem}.result-score{margin:12px 0}.medals>span{padding:8px 4px}}
@media(max-height:500px) and (orientation:landscape){.screen{padding-top:max(10px,var(--top));padding-bottom:max(10px,var(--bottom))}.panel{width:min(80vw,650px);padding:15px 25px}.eyebrow{font-size:.6rem}h1{font-size:2.6rem}h2{font-size:2rem}.tagline{max-width:460px;font-size:.75rem}.how-to{display:none}.menu-loadout{margin:12px 0 0}.select-shell>span{font-size:7px}.select-shell select{min-height:31px}.setup-note{margin:8px 0 11px;min-height:0;font-size:.58rem}.best{font-size:.5rem;margin-top:10px}.goal-chip{display:none}.floating-loadout{left:auto;right:18px;top:calc(72px + var(--top));gap:10px}.floating-loadout label{width:145px;flex:none}.loadout-hint{display:none}.aim-controls{display:flex;bottom:calc(11px + var(--bottom));padding:8px 14px;min-height:60px;gap:20px;width:min(750px,calc(100% - 32px))}.aim-controls .primary{width:155px;min-height:44px;padding:10px;grid-column:auto;margin:0;font-size:.7rem}.aim-controls input{height:24px}.aim-controls label>span{font-size:.55rem}.shot-hint{bottom:calc(83px + var(--bottom));font-size:.55rem;padding:6px 10px}.sweep-controls,.next-controls{bottom:calc(12px + var(--bottom));min-height:60px;padding:8px 12px}.sweep-button{min-height:44px;padding:5px 12px}.callout{top:18%;font-size:1.3rem;text-align:left;left:18px;transform:none;width:45%}.callout.show{transform:none}.callout small{font-size:.55rem}.result-panel{width:min(76vw,560px)}.result-score{margin:10px 0}.result-score strong{font-size:2.7rem}.result-panel .tagline{font-size:.7rem;margin:10px auto}.result-panel .text-button{min-height:34px;padding:7px}.result-panel .medals>span{padding:6px}.result-panel .medals b{font-size:.5rem}}
@media(max-width:360px){.panel{padding-left:20px;padding-right:20px}.menu-loadout{gap:8px}.select-shell{padding-left:6px;padding-right:6px}.select-shell select{font-size:.59rem}.chip{padding:12px 8px}.tools{gap:5px}.score-row{left:12px}.chip span{font-size:.43rem}.shot-hint{font-size:.52rem}}
@media(max-height:650px) and (orientation:portrait){.floating-loadout{top:calc(66px + var(--top))}.aim-controls{bottom:calc(12px + var(--bottom));grid-template-columns:1fr 1fr 82px;gap:12px;padding:9px 11px;min-height:70px}.aim-controls .primary{grid-column:auto;min-height:46px;font-size:.6rem;padding:7px 5px;line-height:1.4;margin:0}.aim-controls label>span{font-size:.49rem;letter-spacing:0}.aim-controls input{height:28px}.shot-hint{bottom:calc(98px + var(--bottom));font-size:.51rem;padding:5px 10px}.sweep-controls,.next-controls{bottom:calc(12px + var(--bottom));min-height:72px;padding:8px 10px}.next-controls .primary{min-height:45px;width:116px}}
.select-shell select{appearance:none;-webkit-appearance:none;border-radius:0;padding:0 17px 0 3px;background:none}.select-shell:after{content:"";position:absolute;right:13px;bottom:15px;width:6px;height:6px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg);pointer-events:none}.tools{z-index:10}
canvas:focus{outline:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}