:root{--ink:#06303a;--cyan:#65f7ee;--glass:linear-gradient(180deg,rgba(255,255,255,.95),rgba(236,252,255,.82) 49%,rgba(176,238,246,.8) 51%,rgba(240,254,255,.9));--mono:'Courier New',monospace;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#7fe0ee;color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0;background:#000;overflow:hidden}
#game{width:100%;height:100%;display:block;outline:none;touch-action:none}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.pill{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:18px;font:800 12px/1.2 var(--mono);letter-spacing:.06em;color:var(--ink);background:var(--glass);border:1px solid rgba(255,255,255,.88);box-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px rgba(90,200,220,.18),0 10px 26px rgba(0,60,90,.35);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5)}
.hud-relics{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}
.hud-obj{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 46px);max-width:min(420px,calc(100vw - 150px));font-weight:700;letter-spacing:.03em;pointer-events:none}
.hud-obj:empty{display:none}
.hud-menu{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));cursor:pointer}
.orb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#ffd88a 40%,#ff9f3a);box-shadow:0 0 8px #ffc15a}
.btn{font:800 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink);cursor:pointer;border-radius:999px;padding:11px 16px;border:1px solid rgba(255,255,255,.92);background:linear-gradient(180deg,#fff,#c6f6fb 48%,#8fe6ee 52%,#d6fbff);box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(0,60,90,.3);transition:transform .12s,filter .12s}
.pill.btn{padding:9px 14px}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,.pill:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn[aria-pressed="true"]{background:linear-gradient(180deg,#e9fffb,#7ff5d8 48%,#32d6a8 52%,#9dffe6)}
.btn.primary{background:linear-gradient(180deg,#fff,#9ff8f0 46%,#34d6d0 54%,#b6fff6);font-size:14px;padding:14px 26px}
.btn.big{font-size:18px;padding:16px 44px}
.btn.danger{background:linear-gradient(180deg,#fff,#ffd0d6 48%,#ff9aa8 52%,#ffe3e6)}
.prompt{position:absolute;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 70px);transform:translateX(-50%);cursor:pointer;font-size:13px;gap:10px;animation:bob 1.6s ease-in-out infinite}
.prompt kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:#fff;border:1px solid #7ad;box-shadow:0 2px 0 #7ad;font:800 12px var(--mono)}
@keyframes bob{50%{transform:translateX(-50%) translateY(-4px)}}
.say{position:absolute;left:50%;transform:translateX(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 54px);max-width:min(560px,calc(100vw - 28px));display:flex;gap:10px;align-items:baseline;padding:12px 18px;border-radius:20px;font:700 14px/1.45 var(--sans);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(206,250,255,.7));border:1px solid #fff;box-shadow:0 10px 28px rgba(0,60,90,.38);pointer-events:none}
.say b{font:800 12px var(--mono);color:#0a8f9a;letter-spacing:.06em}
.toast{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 4px);transform:translate(-50%,-14px);opacity:0;font:800 13px var(--mono);letter-spacing:.06em;padding:10px 18px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(190,250,245,.7));border:1px solid #fff;box-shadow:0 8px 24px rgba(0,60,90,.4);transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.joy{display:none;position:absolute;left:max(24px,env(safe-area-inset-left));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 8px);width:124px;height:124px;border-radius:50%;pointer-events:auto;touch-action:none;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,.1));border:2px solid rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.joy .knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff,#b8fff6 30%,#32d6c8 66%,#0a8f9a);box-shadow:0 3px 10px rgba(0,50,80,.5)}
body.touch .joy{display:block}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(6,48,58,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card{width:min(440px,100%);padding:24px;border-radius:26px;background:var(--glass);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 22px 60px rgba(0,50,80,.5);display:grid;gap:14px}
.card h2{margin:0;font:800 22px var(--sans)}
.row{display:grid;gap:8px;font:800 12px var(--mono);letter-spacing:.05em}
.row output{float:right;opacity:.7}
.row.btns{grid-template-columns:1fr 1fr}
.row input[type=range]{width:100%;height:14px;-webkit-appearance:none;appearance:none;border-radius:99px;border:1px solid #fff;background:linear-gradient(90deg,#050a22,#2b4c9c 20%,#ff9e86 27%,#9be9f7 38%,#1e8bf0 50%,#9be9f7 62%,#ff7fa8 74%,#2e2f78 88%,#050a22);cursor:pointer}
.row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;border:1px solid #fff;background:radial-gradient(circle at 35% 28%,#fff,#b8fff6 28%,#32d6c8 62%,#0a8f9a);box-shadow:0 3px 10px rgba(0,50,80,.55)}
.row input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:1px solid #fff;background:radial-gradient(circle at 35% 28%,#fff,#b8fff6 28%,#32d6c8 62%,#0a8f9a)}
.keys{margin:0;font:700 11px/1.5 var(--mono);opacity:.75;text-align:center}
.boot{background:linear-gradient(#cdf6ff,#7fe0ee 55%,#2a9af0);backdrop-filter:none}
.boot-card{text-align:center;justify-items:center;gap:10px;padding:34px 28px}
.boot-card h1{margin:6px 0 0;font:800 clamp(40px,9vw,64px)/1 var(--sans);letter-spacing:.02em}
.sub{margin:0 0 14px;font:800 13px var(--mono);letter-spacing:.2em}
.logo-orb{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#aef 22%,#32d6c8 60%,#0a6a8a);box-shadow:0 0 36px #65f7ee;animation:float 2s ease-in-out infinite}
.logo-orb.small{width:44px;height:44px}
@keyframes float{50%{transform:translateY(-10px) scale(1.05)}}
.loading{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#031018;color:#bff;font:800 12px var(--mono);letter-spacing:.2em}
@media(max-width:640px){.hud-obj{top:calc(max(12px,env(safe-area-inset-top)) + 44px);font-size:11px}.say{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)}.prompt{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)}}
@media(prefers-reduced-motion:reduce){.logo-orb,.prompt{animation:none}}