:root{color-scheme:dark;--ink:#edfff9;--muted:#a7d8d1;--glass:rgba(4,35,43,.68);--gold:#f6ce79;--aqua:#77f2df}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#063d48;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);touch-action:none}button{font:inherit;color:inherit}#stage,canvas{position:fixed;inset:0;width:100%;height:100%;display:block}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,transparent 35%,rgba(0,16,24,.27) 100%);z-index:2}.panel{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 34px));padding:50px 34px 38px;text-align:center;border:1px solid rgba(193,255,240,.28);background:linear-gradient(150deg,rgba(6,55,65,.78),rgba(3,27,34,.74));box-shadow:0 28px 80px rgba(0,18,25,.44),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(15px);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}.menu h1{font-family:Georgia,serif;font-size:clamp(58px,12vw,106px);letter-spacing:.08em;line-height:.82;margin:20px 0;color:#d7fff4;text-shadow:0 3px 0 #237b80,0 0 32px rgba(107,247,223,.38)}.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--gold);font-weight:800}.lede{font-family:Georgia,serif;font-style:italic;color:#d1ece7;font-size:17px;margin:28px auto 30px;max-width:430px}.primary,.quiet{border:0;cursor:pointer;letter-spacing:.18em;font-size:12px;font-weight:900;border-radius:2px}.primary{min-width:180px;padding:15px 28px;background:linear-gradient(135deg,#f4d487,#dda85b);color:#16383a;box-shadow:0 8px 28px rgba(255,201,102,.19)}.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.quiet{display:block;margin:12px auto 0;padding:10px 20px;background:transparent;color:var(--muted)}.controls{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:29px;color:#c5e3df;font-size:11px;letter-spacing:.08em}.controls b{display:block;color:#6fdacb;font-size:9px;margin-top:4px}.record{margin:22px 0 0;font-size:10px;letter-spacing:.25em;color:#80aaa6}.record strong{color:white}#hud{position:fixed;inset:0;z-index:4;pointer-events:none;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));text-shadow:0 2px 12px rgba(0,20,25,.8)}.scorebox{position:absolute;left:24px;top:22px;display:grid}.scorebox small{font-size:9px;letter-spacing:.26em;color:var(--aqua)}.scorebox strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:24px;letter-spacing:.08em}.scorebox span{font-size:9px;letter-spacing:.15em;color:#9bc6c2}.top-center{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;font-size:15px;color:var(--gold)}#chain{font-size:24px;color:#fff3b8}.health{position:absolute;right:22px;top:19px;display:flex;align-items:center;gap:10px}#hearts{color:#87f1dc;letter-spacing:.18em;font-size:13px}.health button{pointer-events:auto;width:36px;height:36px;border:1px solid rgba(194,255,242,.23);border-radius:50%;background:rgba(2,35,43,.5);cursor:pointer}.touch{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:70px 86px 70px;gap:14px;align-items:center}.touch button{pointer-events:auto;border-radius:50%;height:70px;border:1px solid rgba(192,255,244,.27);background:rgba(4,44,52,.42);backdrop-filter:blur(7px);font-size:36px;cursor:pointer;overflow:hidden;position:relative}.touch button:active{background:rgba(89,222,204,.25)}#surge{height:86px;font-size:10px;letter-spacing:.16em;color:#c1dfdb}#surge i{position:absolute;inset:4px;border-radius:50%;background:linear-gradient(150deg,#76efd9,#1b908e);transform-origin:50% 100%;transition:filter .2s;z-index:-1}#surge.ready{color:white;box-shadow:0 0 24px rgba(113,249,224,.45)}#reaction{position:absolute;left:50%;top:21%;transform:translateX(-50%);font-family:Georgia,serif;font-style:italic;font-size:18px;color:#f4fff8;opacity:0}#reaction.pop{animation:reaction 1.25s ease-out}@keyframes reaction{0%{opacity:0;transform:translate(-50%,14px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px)}}.compact{max-width:420px;padding:40px 30px}.compact h2{font-family:Georgia,serif;font-size:44px;letter-spacing:.08em;margin:18px 0}.compact p{color:#b8d7d2;font-size:13px}#unsupported{position:fixed;z-index:20;inset:0;background:#082e37;display:grid;place-items:center;padding:30px;text-align:center}#unsupported[hidden]{display:none}@media(min-width:900px) and (pointer:fine){.touch{grid-template-columns:62px 76px 62px;opacity:.46;transition:opacity .2s}.touch:hover{opacity:1}.touch button{height:62px}#surge{height:76px}}@media(max-width:600px){.panel{padding:38px 20px 28px}.controls{gap:13px}.menu h1{font-size:57px}.lede{font-size:15px}.scorebox{left:14px;top:14px}.health{right:12px;top:11px}.top-center{top:63px}.touch{grid-template-columns:66px 80px 66px;gap:10px}.touch button{height:66px}#surge{height:80px}#reaction{top:17%}}