:root{color-scheme:dark;font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif;--ink:#f7efd9;--muted:#c9bea8;--green:#86c996;--gold:#e7c166;--panel:rgba(20,17,25,.86)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#17131d;color:var(--ink);user-select:none}
button{font:inherit}
#game{position:relative;width:100%;height:var(--escapee-vh,100dvh);overflow:hidden;background:#17131d}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(66px,calc(env(safe-area-inset-right) + 54px));display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;pointer-events:none}
.hud__room,.hud__stat{min-height:46px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.hud__room{min-width:0}.hud__room strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(14px,2vw,18px)}
.hud small{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hud__stat{min-width:84px;text-align:center}.hud__stat strong{font-size:18px}.hud__stat.danger strong{color:#ff927f}
.meter{height:7px;margin-top:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6fb67d,#b2dda8);transition:width .16s linear}
.prompt{position:absolute;z-index:3;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 96px);transform:translateX(-50%);min-width:min(76vw,330px);padding:9px 14px;border:1px solid rgba(255,255,255,.1);border-radius:99px;background:rgba(19,16,23,.82);text-align:center;font-size:13px;font-weight:800;pointer-events:none;opacity:0;transition:opacity .12s}.prompt.visible{opacity:1}
.controls{position:absolute;z-index:4;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none}
.joystick,.clean{pointer-events:auto;width:clamp(70px,20vw,92px);height:clamp(70px,20vw,92px);border:2px solid rgba(255,255,255,.38);border-radius:50%;color:white;touch-action:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.joystick{position:relative;background:rgba(26,22,31,.68)}.joystick::after{content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;border-radius:50%;background:#a8d6b0;transform:translate(calc(-50% + var(--jx,0px)),calc(-50% + var(--jy,0px)));box-shadow:0 2px 12px rgba(0,0,0,.35)}
.clean{background:rgba(89,126,98,.82);font-weight:950;font-size:15px;letter-spacing:.04em}.clean.active{transform:scale(.94);background:rgba(119,170,131,.95)}
.screen{position:absolute;z-index:8;inset:0;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 38%,rgba(93,74,60,.42),rgba(14,12,18,.95) 70%)}
.screen[hidden]{display:none}.card{width:min(92vw,560px);max-height:100%;overflow:auto;padding:clamp(22px,5vw,38px);border:1px solid rgba(255,255,255,.13);border-radius:26px;background:rgba(27,23,32,.95);box-shadow:0 28px 80px rgba(0,0,0,.55);text-align:center}
.eyebrow{margin:0 0 8px;color:var(--green);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.card h1,.card h2{margin:0 0 12px;line-height:.95}.card h1{font-size:clamp(38px,10vw,68px)}.card h2{font-size:clamp(30px,7vw,48px)}.card p{margin:0 auto 20px;max-width:450px;color:var(--muted);line-height:1.45}.primary{min-width:180px;min-height:52px;padding:12px 22px;border:0;border-radius:15px;background:var(--green);color:#132017;font-weight:950;box-shadow:0 8px 24px rgba(86,150,104,.25);cursor:pointer}.primary:focus-visible,.upgrade:focus-visible{outline:3px solid white;outline-offset:3px}
.mini{margin-top:16px;color:#9f9587;font-size:12px}.upgrades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.upgrade{min-height:132px;padding:14px 10px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:#28222e;color:var(--ink);cursor:pointer}.upgrade:hover{background:#312a38}.upgrade strong{display:block;margin-bottom:8px;color:var(--gold);font-size:16px}.upgrade span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
#soundBtn{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
@media(hover:hover) and (pointer:fine){.controls{display:none}.prompt{bottom:22px}}
@media(max-width:620px),(orientation:portrait){.hud{grid-template-columns:minmax(0,1fr) 74px;right:max(58px,calc(env(safe-area-inset-right) + 50px))}.hud__stat:last-child{grid-column:1/-1;justify-self:end;min-height:34px;padding:5px 10px;margin-top:-4px}.hud__stat:last-child small{display:inline;margin-right:5px}.prompt{bottom:calc(max(18px,env(safe-area-inset-bottom)) + clamp(82px,22vw,104px));font-size:12px}.upgrades{grid-template-columns:1fr}.upgrade{min-height:76px;text-align:left}.upgrade strong{margin-bottom:4px}}
@media(max-height:520px) and (orientation:landscape){.hud{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));gap:5px}.hud__room,.hud__stat{min-height:38px;padding:5px 9px;border-radius:11px}.hud__room strong,.hud__stat strong{font-size:14px}.meter{margin-top:3px}.joystick,.clean{width:64px;height:64px}.prompt{bottom:18px;min-width:250px}.card{padding:18px;max-width:620px}.card h1{font-size:42px}.card h2{font-size:30px}.card p{margin-bottom:12px}.upgrades{grid-template-columns:repeat(3,1fr)}.upgrade{min-height:92px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}