:root{color:#f6f7ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#111415;font-synthesis:none;line-height:1.4;text-rendering:geometricPrecision}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{border:0;font:inherit}#app{position:relative;background:radial-gradient(circle at 22% 12%,rgba(201,232,181,.16),transparent 32%),linear-gradient(135deg,#101616,#1a2020 45%,#161716)}#game-canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:clamp(12px,2vw,24px);left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);display:grid;grid-template-columns:minmax(92px,1fr) 46px repeat(4,minmax(72px,auto));gap:8px;align-items:stretch;pointer-events:none}.hud__brand,.hud__camera,.hud__meter{min-height:46px;border:1px solid rgba(239,236,207,.16);border-radius:8px;background:#141918b8;box-shadow:0 16px 40px #00000038;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hud__brand{display:flex;align-items:center;padding:0 14px;color:#fff8dd;font-size:18px;font-weight:800}.hud__camera{display:grid;place-items:center;width:46px;padding:0;color:#fff5c5;cursor:pointer;pointer-events:auto}.hud__camera:hover,.hud__camera.is-active{border-color:#ffe19173;background:#364238db}.hud__meter{display:grid;min-width:82px;padding:7px 12px 8px;text-align:right}.hud__meter span{color:#b8c8b9;font-size:11px;font-weight:700;text-transform:uppercase}.hud__meter strong{color:#fff7cc;font-size:18px;font-weight:850;line-height:1}.status-panel{position:absolute;inset:auto 50% 11vh auto;width:min(360px,calc(100vw - 32px));transform:translate(50%);display:grid;gap:12px;justify-items:center;padding:18px;border:1px solid rgba(239,236,207,.18);border-radius:8px;background:#111616d1;box-shadow:0 24px 80px #00000061;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity .16s ease,transform .16s ease}.status-panel--hidden{opacity:0;pointer-events:none;transform:translate(50%) translateY(10px)}.status-panel__title{color:#fff4be;font-size:24px;font-weight:850;text-align:center}.status-panel__subtitle{min-height:18px;color:#cdd8ce;font-size:13px;font-weight:650;text-align:center}.status-panel__actions{display:flex;gap:10px}.icon-button,.touch-pad__button{display:grid;place-items:center;border:1px solid rgba(239,236,207,.2);border-radius:50%;background:#242e2bc7;box-shadow:inset 0 1px #ffffff1f,0 16px 36px #0000003d;color:#fff5c5;cursor:pointer}.icon-button{width:46px;height:46px}.icon-button:hover,.touch-pad__button:hover,.touch-pad__button.is-active{background:#475a4cdb}.icon{position:relative;display:block;width:20px;height:20px}.icon--play:before{position:absolute;top:2px;left:5px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff5c5;content:""}.icon--restart:before{position:absolute;inset:3px;border:3px solid #fff5c5;border-right-color:transparent;border-radius:50%;content:""}.icon--restart:after{position:absolute;top:0;right:0;width:0;height:0;border-left:8px solid #fff5c5;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(22deg);content:""}.icon--camera:before{position:absolute;left:1px;top:5px;width:18px;height:12px;border:2px solid #fff5c5;border-radius:3px;content:""}.icon--camera:after{position:absolute;left:7px;top:8px;width:5px;height:5px;border:2px solid #fff5c5;border-radius:50%;box-shadow:4px -7px 0 -3px #fff5c5;content:""}.touch-pad{position:absolute;left:clamp(12px,4vw,34px);bottom:clamp(12px,4vw,34px);display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:8px}.touch-pad__button{position:relative;width:54px;height:54px;touch-action:none}.touch-pad__button--up{grid-area:1 / 2}.touch-pad__button--left{grid-area:2 / 1}.touch-pad__button--right{grid-area:2 / 3}.touch-pad__button--down{grid-area:3 / 2}.touch-pad__button--fire{grid-area:2 / 2;border-color:#ffd37070;background:#6a4426cc}.touch-pad__button:before{position:absolute;content:""}.touch-pad__button--up:before,.touch-pad__button--down:before,.touch-pad__button--left:before,.touch-pad__button--right:before{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:14px solid #fff5c5}.touch-pad__button--down:before{transform:rotate(180deg)}.touch-pad__button--left:before{transform:rotate(-90deg)}.touch-pad__button--right:before{transform:rotate(90deg)}.touch-pad__button--fire:before{width:16px;height:16px;border:3px solid #ffe191;border-radius:50%}.touch-pad__button--fire:after{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe191;content:""}@media(min-width:860px){.touch-pad{opacity:.45}}@media(max-width:640px){.hud{grid-template-columns:46px repeat(3,minmax(72px,1fr))}.hud__brand{grid-column:1 / -1;justify-content:center;min-height:38px;font-size:16px}.hud__camera{grid-column:1;width:46px}.hud__meter{min-width:0;min-height:42px;padding-inline:8px;text-align:center}.hud__meter:last-child{grid-column:span 3}.hud__meter strong{font-size:16px}.status-panel{bottom:128px}.touch-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:7px}.touch-pad__button{width:48px;height:48px}}