*{box-sizing:border-box}
:root{font-family:system-ui,sans-serif;color:#fbf6df;background:#082a30;font-weight:800;color-scheme:dark}
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 50% 37%,#215154,transparent 67%),repeating-linear-gradient(125deg,#12373c 0 2px,#0d2e35 2px 14px)}
[hidden]{display:none!important}
.cabinet{width:min(100%,510px);height:min(100%,920px);min-height:0;display:grid;grid-template-rows:55px minmax(0,1fr) 82px;background:#12383c;border:1px solid #436465;border-radius:23px;box-shadow:0 22px 90px #001719aa;overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:center;padding:0 13px 0 16px;background:#10363a}
.brand{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.19em;line-height:1.18;color:#fff1c9}
.mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #8c9e64;color:#d9f46b;border-radius:50%;font-size:21px}
.actions{display:flex;gap:7px}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
button:focus-visible{outline:3px solid #fe8184;outline-offset:2px}
.icon{width:44px;height:44px;display:grid;place-items:center;background:#1e484a;border:1px solid #557576;border-radius:12px;font-size:20px}
.icon svg{width:21px;height:21px}
.icon:disabled{opacity:.45;cursor:default}
#stage{position:relative;overflow:hidden;isolation:isolate;background:#f8e1a9;touch-action:none;user-select:none}
#arena{display:block;width:100%;height:100%}
.hud{position:absolute;top:10px;left:11px;right:11px;display:flex;justify-content:space-between;pointer-events:none;color:#fff5d6}
.hud>div{min-width:75px;background:#123e40;border:2px solid #fff1c7;box-shadow:0 3px 0 #12474855;padding:5px 11px;border-radius:13px}
.hud small,.hud strong{display:block}.hud small{font-size:9px;letter-spacing:.16em;color:#d7eb88}.hud strong{font-size:21px;line-height:1.05;font-variant-numeric:tabular-nums}.timer{text-align:center}
.caption,.tutorial{position:absolute;pointer-events:none;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.caption{top:19%;font-size:clamp(19px,5.5vw,32px);color:#fff5bd;paint-order:stroke fill;-webkit-text-stroke:5px #183a36;text-shadow:2px 5px #183a36;letter-spacing:-.035em;font-style:italic;font-weight:1000}
.tutorial{bottom:5%;font-size:11px;background:#163e3e;color:#fff5cf;padding:8px 14px;border:2px solid #f7e9af;border-radius:999px;letter-spacing:.09em}
.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
#menu{background:radial-gradient(ellipse at 50% 46%,#fbe6aa 27%,#ffe9b0d9 62%,#f5d49859 100%)}
.title-card{width:min(92%,400px);color:#153d3b;display:grid;justify-items:center;align-content:center}
.eyebrow{font-size:10px;letter-spacing:.21em;display:flex;align-items:center;gap:7px;justify-content:center;font-weight:950}
.eyebrow i{width:13px;height:2px;background:#eb735a}
h1,h2,p{margin:0}
h1{font-size:clamp(48px,13vw,81px);font-weight:1000;line-height:.79;letter-spacing:-.105em;transform:rotate(-5deg);margin:16px 9px 0 0;color:#fff3bd;paint-order:stroke fill;-webkit-text-stroke:clamp(5px,1.7vw,9px) #193e38;text-shadow:3px 7px #193e38}
h1 span{display:block;font-size:1.23em;color:#cfec62;letter-spacing:-.1em}
#mascot{width:min(88%,340px);height:auto;max-height:28dvh;object-fit:contain;display:block;margin:-4px 0 -4px}
.tagline{font-size:clamp(13px,4vw,17px);margin:0 0 13px;font-weight:900}
.primary,.secondary{border-radius:13px;min-height:44px}
.primary{min-width:min(220px,100%);border:2px solid #163b35;background:#ed7654;color:#143b36;box-shadow:0 4px #173b35;padding:8px 17px;letter-spacing:.05em;font-weight:1000}
.primary b{margin-left:13px}
.primary:active{transform:translateY(3px);box-shadow:0 1px #173b35}
.secondary{padding:5px 14px;border:0;background:transparent;font-size:13px;text-decoration:underline;text-underline-offset:4px}
#modal{background:#103638ae;padding:10px}
.dialog{width:min(100%,330px);background:#fff1c6;color:#153d3b;border:3px solid #163b35;border-radius:22px;box-shadow:0 7px #102e31;padding:13px 15px;display:grid;justify-items:center;gap:7px}
.dialog .eyebrow{color:#88633e}
.dialog h2{font-size:clamp(24px,8vw,44px);line-height:.98;letter-spacing:-.06em;font-weight:1000}
#modal-content{width:100%;font-size:13px;line-height:1.35}
.result{font-size:clamp(28px,9vw,46px);color:#153e36;font-variant-numeric:tabular-nums;line-height:1.15}
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:6px 0}
.skin{color:#163b35;background:#ead9a7;border:2px solid #baaa7c;border-radius:10px;font-size:10px;padding:3px;min-height:44px;display:grid;justify-items:center;align-content:center}
.skin[aria-pressed=true]{border-color:#1f5552;background:#e7edac}.skin:disabled{opacity:.65;cursor:default}
.swatch{width:23px;height:17px;border:2px solid #204536;border-radius:50% 55% 42% 37%;background:var(--swatch);margin:1px}
footer{padding:9px 14px;background:#12383c;display:grid;align-content:center;gap:6px}
.meter-head,.footer-note{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em;gap:5px}
.meter-head strong{color:#d9f172;font-size:13px}
.meter{position:relative;height:12px;border:1px solid #71938c;border-radius:7px;background:#092b2d;overflow:hidden}
#fill{height:100%;width:0;background:repeating-linear-gradient(115deg,#cfe965 0 8px,#afda60 8px 11px);transition:width .09s linear}
.full #fill{background:repeating-linear-gradient(115deg,#ff825e 0 8px,#fbc175 8px 12px);animation:pulse .34s alternate infinite}
@keyframes pulse{to{filter:brightness(1.28)}}
.footer-note{color:#b9d5c4;font-size:9px}.footer-note span:last-child{white-space:nowrap;color:#e9e39b}
@media(max-width:530px){.cabinet{border:0;border-radius:0;height:100%}}
@media(max-height:630px){.cabinet{grid-template-rows:49px minmax(0,1fr) 60px}footer{padding:5px 13px;gap:4px}#mascot{max-height:24dvh}.tagline{margin-bottom:6px}}
@media(max-height:460px) and (min-width:600px){.title-card{grid-template-columns:1fr 1fr;column-gap:12px}.title-card .eyebrow,.title-card h1,.title-card .tagline{grid-column:1}.title-card h1{font-size:49px}.title-card #mascot{grid-column:2;grid-row:1/4;max-height:130px}.title-card .primary,.title-card .secondary{grid-row:4;min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}