:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#182332;background:#e8f6ff;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}#app{position:relative;min-width:320px;background:linear-gradient(180deg,#e8f6ff,#c9f1ff 46%,#f8e8c9);touch-action:none;-webkit-user-select:none;user-select:none}#app:after{position:absolute;right:0;bottom:0;left:0;height:34%;background:linear-gradient(180deg,#fff0,#ffefcc6b);content:"";pointer-events:none}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:block;width:100%;height:100%;outline:none}.hud,.actions,.toast,.modal,.power-meter{position:absolute;z-index:3}.hud{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));display:flex;max-width:calc(100vw - 112px);gap:8px;align-items:stretch}.metric{width:clamp(74px,12vw,108px);min-height:52px;padding:8px 10px;border:1px solid rgba(255,255,255,.68);border-radius:8px;background:#ffffffb8;box-shadow:0 12px 38px #364d6024;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.metric span{display:block;margin-bottom:2px;color:#617080;font-size:.68rem;font-weight:850;letter-spacing:0;text-transform:uppercase}.metric strong{display:block;color:#182332;font-size:clamp(1.15rem,2.1vw,1.48rem);line-height:1;letter-spacing:0}.metric.accent strong{color:#c25635}.actions{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px}.icon-button,#modal-restart{border:1px solid rgba(255,255,255,.68);border-radius:8px;background:#ffffffc2;color:#182332;box-shadow:0 12px 38px #364d6024;cursor:pointer;transition:transform .14s ease,background .14s ease,box-shadow .14s ease;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.icon-button:hover,#modal-restart:hover{background:#fff;box-shadow:0 14px 42px #364d6033;transform:translateY(-1px)}.icon-button:active,#modal-restart:active{transform:translateY(1px) scale(.98)}.icon-button{display:grid;width:42px;height:42px;place-items:center}.pause-mark{position:relative;display:block;width:15px;height:18px}.pause-mark:before,.pause-mark:after{position:absolute;top:0;width:5px;height:18px;border-radius:2px;background:#182332;content:""}.pause-mark:before{left:1px}.pause-mark:after{right:1px}.restart-mark{position:relative;display:block;width:22px;height:22px;border:4px solid #182332;border-right-color:transparent;border-radius:50%}.restart-mark:after{position:absolute;top:-5px;right:-2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid #182332;content:"";transform:rotate(22deg)}.sound-mark{position:relative;display:block;width:24px;height:20px}.sound-mark:before{position:absolute;top:5px;left:1px;width:8px;height:10px;border-radius:2px;background:#182332;content:""}.sound-mark:after{position:absolute;top:2px;left:8px;width:13px;height:16px;border:4px solid #182332;border-top-color:transparent;border-bottom-color:transparent;border-left:0;border-radius:0 16px 16px 0;content:""}.muted .sound-mark:after{top:8px;left:8px;width:15px;height:4px;border:0;border-radius:2px;background:#c25635;transform:rotate(-38deg)}.power-meter{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:14px;height:clamp(92px,18vh,148px);padding:3px;border:1px solid rgba(255,255,255,.7);border-radius:8px;background:#ffffff9e;box-shadow:0 12px 38px #364d6021;opacity:0;transform:translate(8px);transition:opacity .14s ease,transform .14s ease;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.power-meter span{position:absolute;right:3px;bottom:3px;left:3px;height:calc(var(--power, 0) * 100%);border-radius:6px;background:linear-gradient(180deg,#ff6d63,#ffd464 46%,#21b99a);box-shadow:0 0 20px #ff745d66}.charging .power-meter{opacity:1;transform:translate(0)}.toast{left:50%;bottom:max(20px,env(safe-area-inset-bottom));max-width:min(420px,calc(100vw - 36px));padding:8px 12px;border:1px solid rgba(255,255,255,.58);border-radius:8px;background:#182332c7;color:#fff;font-size:.92rem;font-weight:850;letter-spacing:0;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%)}.modal{top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#151d273d;opacity:0;pointer-events:none;transition:opacity .18s ease}.modal.show{opacity:1;pointer-events:auto}.modal-panel{width:min(360px,calc(100vw - 48px));padding:22px;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:#ffffffdb;box-shadow:0 28px 76px #19263447;text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.modal-panel h1{margin:0 0 8px;color:#182332;font-size:1.62rem;line-height:1.08;letter-spacing:0}.modal-panel p{margin:0 0 18px;color:#4f5f70;font-weight:780}#modal-restart{width:100%;min-height:44px;padding:10px 14px;background:#182332;color:#fff;font-weight:900}@media(max-width:720px){.hud{max-width:calc(100vw - 64px);gap:6px}.metric{width:clamp(62px,21vw,88px);min-height:48px;padding:7px 8px}.metric span{font-size:.62rem}.actions{gap:6px}.icon-button{width:38px;height:38px}.power-meter{right:max(12px,env(safe-area-inset-right));width:12px}}@media(max-height:460px){.metric{min-height:42px;padding-block:6px}.metric strong{font-size:1.05rem}.icon-button{width:36px;height:36px}.toast{bottom:max(12px,env(safe-area-inset-bottom))}}