* { box-sizing: border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:#10271f;color:#fff;font-family:Arial,Helvetica,sans-serif; }
body { touch-action:none;user-select:none; }
.game-shell { position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;background:radial-gradient(circle at 50% 100%,#285c43 0,transparent 52%),linear-gradient(145deg,#173c2e,#0d241c); }
canvas { display:block;width:100%;height:100%;touch-action:none;cursor:pointer; }
.hud { position:absolute;z-index:2;inset:9px 9px auto;display:flex;justify-content:space-between;gap:8px;pointer-events:none; }
.hud-group { display:flex;flex-wrap:wrap;gap:5px;max-width:65%; }
.hud-pill,.bloom-panel { border:1px solid rgba(255,255,255,.15);background:rgba(7,30,21,.78);box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(8px); }
.hud-pill { margin:0;border-radius:99px;padding:7px 10px;color:#a7c7b4;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.hud-pill strong { margin-left:3px;color:#fde68a;font-size:12px; }
.bloom-panel { width:min(200px,34vw);border-radius:13px;padding:8px 10px; }
.bloom-panel p { display:flex;justify-content:space-between;margin:0;color:#a7c7b4;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.bloom-panel strong { color:#f9a8d4; }
.progress { height:5px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1); }
.progress span { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fde68a,#f9a8d4,#86efac);transition:width .2s ease; }
.announcement { position:absolute;z-index:3;top:17%;left:50%;width:90%;margin:0;transform:translateX(-50%);color:#fff;font-size:clamp(22px,5vw,44px);font-weight:1000;text-align:center;text-shadow:0 4px 20px #06140e;opacity:0;pointer-events:none;transition:.18s ease; }
.announcement.visible { opacity:1;transform:translateX(-50%) translateY(-4px); }
.overlay,.pause-panel { position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(5,19,13,.73);backdrop-filter:blur(8px);transition:opacity .18s ease; }
.overlay.hidden,.pause-panel.hidden { visibility:hidden;opacity:0;pointer-events:none; }
.panel,.pause-panel>div { border:1px solid rgba(255,255,255,.16);border-radius:27px;background:radial-gradient(circle at 50% 0%,rgba(249,168,212,.13),transparent 40%),linear-gradient(145deg,rgba(27,68,50,.98),rgba(13,42,30,.98));box-shadow:0 30px 100px rgba(0,0,0,.5);text-align:center; }
.panel { width:min(525px,100%);padding:clamp(21px,5vw,38px); }
.pause-panel>div { width:min(330px,100%);padding:28px; }
.kicker { margin:0;color:#fde68a;font-size:10px;font-weight:1000;letter-spacing:.2em;text-transform:uppercase; }
h1,h2 { margin:10px 0 0;line-height:.94;letter-spacing:-.055em;text-transform:uppercase; }
h1 { font-size:clamp(35px,8vw,62px); } h2 { font-size:40px; }
#screen-copy,.pause-panel p:last-child { margin:15px auto 0;max-width:410px;color:#c9ddd0;font-size:14px;line-height:1.55; }
button { margin-top:21px;border:0;border-radius:99px;padding:13px 24px;background:#fde68a;color:#16382a;font:inherit;font-size:13px;font-weight:1000;cursor:pointer;box-shadow:0 12px 34px rgba(253,230,138,.18); }
button:hover { transform:translateY(-2px);background:#fff; } button:focus-visible { outline:3px solid #fff;outline-offset:4px; }
.controls-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px; }
.controls-grid p { display:grid;gap:3px;margin:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px;background:rgba(255,255,255,.035);font-size:10px; }
.controls-grid strong { text-transform:uppercase; }.controls-grid span { color:#a7c7b4; }
@media(max-width:560px),(max-height:440px){.hud{inset:5px}.hud-pill{padding:5px 7px;font-size:7px}.hud-pill strong{font-size:9px}.bloom-panel{padding:6px 8px}.panel{padding:17px 20px}.controls-grid{margin-top:12px}}
@media(max-height:360px){#screen-copy{margin-top:8px;font-size:12px}button{margin-top:10px;padding-block:10px}.controls-grid{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}