:root{color-scheme:dark;--ink:#f8f1e4;--muted:#9e98b0;--mint:#a4e4ce;--line:rgba(225,210,241,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:#211d30;background:radial-gradient(ellipse at 50% 35%,#353044 0,#272237 48%,#1d1b2b 100%);color:var(--ink);font-family:ui-rounded,"Avenir Next",Avenir,"Trebuchet MS",sans-serif;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,canvas.keyboard:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
button:active{transform:translateY(1px) scale(.96)}
button svg{width:20px;height:20px;display:block;pointer-events:none}
.app{height:100svh;height:100dvh;max-width:700px;margin:auto;padding:max(24px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:0}
.header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;flex-shrink:0;gap:12px}
.brand{display:flex;align-items:center;gap:11px}.brand svg{width:29px;height:29px;color:var(--mint)}
h1{font-size:14px;font-weight:750;letter-spacing:2.4px;margin:0}.tools{display:flex;gap:8px;justify-self:end}
.score-hud{min-width:64px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.best-score{display:flex;align-items:center;justify-content:center;gap:5px;color:#f4d58d;font-size:11px;line-height:16px;white-space:nowrap}
.best-score svg{width:13px;height:13px;flex-shrink:0}
.score-value{display:block;font-size:27px;font-weight:750;letter-spacing:-.8px;line-height:30px}
.result-score{display:block;font-size:28px;font-weight:750;margin:0 0 6px;font-variant-numeric:tabular-nums}
.icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035);display:grid;place-items:center;transition:background .2s,transform .15s}
.icon-button:hover{background:rgba(255,255,255,.085)}
.playfield{position:relative;width:100%;flex:1;min-height:0;margin:auto 0;isolation:isolate}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}
canvas.aiming{cursor:grabbing}
.counter{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);pointer-events:none;display:flex;align-items:center;gap:7px;margin-left:3px}
.counter::before{content:"";height:6px;width:6px;border:1px solid currentColor;border-radius:50%}
.counter.warn{color:#efba94}.counter.full{color:#ff8795}
.loss-dialog{width:min(300px,calc(100vw - 36px));max-height:calc(100dvh - 32px);border:1px solid #65536f;border-radius:26px;padding:28px;background:#30283e;color:var(--ink);text-align:center;box-shadow:0 24px 90px #0b081980;overflow:auto}
.loss-dialog::backdrop{background:#141020a8;backdrop-filter:blur(3px)}
.loss-dialog[open]{animation:loss-in .22s ease-out}
.loss-symbol{display:block;width:88px;height:88px;margin:0 auto 14px}
.loss-dialog h2{font-size:27px;letter-spacing:-.6px;margin:0 0 9px}
.loss-count{font-size:16px;font-variant-numeric:tabular-nums;color:#efa4ad;margin:0 0 24px}
.retry-button{height:60px;width:100%;display:grid;place-items:center;background:#a4e4ce;color:#254c43;border:0;border-radius:17px;box-shadow:0 4px 0 #648f80}
.retry-button svg{width:29px;height:29px}
@keyframes loss-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:450px){.loss-dialog{padding:20px}.loss-symbol{width:52px;height:52px;margin-bottom:8px}.loss-dialog h2{font-size:24px}.loss-count{margin-bottom:16px}.retry-button{height:50px}}
.toast{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:12px;color:var(--mint);opacity:0;transition:opacity .2s;pointer-events:none}.toast.visible{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:400px){.app{padding: max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))}.header{padding:0 5px}.brand{gap:8px}.brand svg{width:24px}h1{font-size:12px;letter-spacing:2px}.tools{gap:6px}.counter{font-size:11px;margin:0;gap:5px}}
@media(max-width:640px){.brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.brand{gap:7px}.brand svg{width:24px;flex-shrink:0}.counter{white-space:nowrap;margin-left:0}.header{gap:8px}}
@media(max-width:350px){.icon-button{width:40px;height:40px;border-radius:13px}.brand{gap:5px}.brand svg{width:21px}.tools{gap:5px}.score-value{font-size:25px}.score-hud{min-width:58px}}
@media(max-height:450px) and (orientation:landscape){.app{max-width:850px;padding:14px 24px}.header{position:absolute;left:24px;right:24px;top:14px;z-index:2;pointer-events:none}.header button{pointer-events:auto}.brand{gap:8px}.brand svg{width:24px}h1{font-size:12px}.playfield{height:100%}.toast{bottom:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loss-dialog[open]{animation:none}}

/* Fit navigation into the existing left HUD column; keep the orbit untouched. */
.brand{display:grid;grid-template-columns:auto auto;column-gap:6px;row-gap:2px;align-items:center;justify-content:start}
.brand h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;grid-column:1/-1;font-size:11px;line-height:13px;letter-spacing:2px}
.brand .counter{font-size:11px;gap:0;margin:0;white-space:nowrap}.brand .counter::before{display:none}
.hub-back{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 6px;border:1px solid #b4a1c74d;border-radius:10px;background:#ffffff08;color:#d8cfe5;font-family:inherit;font-size:11px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.hub-back:hover{background:#ffffff16;color:#fff4e7}.hub-back:focus-visible{outline:2px solid #a4e4ce;outline-offset:3px}
.site-result-back{margin-top:16px;min-height:36px;padding-inline:14px}
@media(max-width:350px){.brand{column-gap:4px}.brand h1{font-size:10px;letter-spacing:1.8px}.hub-back{padding-inline:5px}}