:root{--fg: #e8ecf7;--dim: #8a93ad;--accent: #ffd27f;--alarm: #ff6a5a;--btn: 54px;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#02030a;color:var(--fg);font-family:Avenir Next,Segoe UI,system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app canvas{display:block;touch-action:none}.hidden{display:none!important}body:not(.touch) .only-touch,body.touch .only-desk{display:none!important}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:none}.label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#stats{position:absolute;top:calc(20px + var(--safe-t));left:calc(24px + var(--safe-l));display:flex;gap:28px;font-size:22px;font-variant-numeric:tabular-nums}#energy{font-size:34px;font-weight:600;color:var(--accent)}#level-box .label b{color:var(--fg);font-weight:600}#level-dots{display:block;margin-top:6px;font-size:15px;letter-spacing:.25em;color:var(--accent)}#labels{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.gain{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;font-size:26px;font-weight:600;color:var(--accent);text-shadow:0 0 10px rgba(255,210,127,.8)}.gain b{font-size:20px;color:#fff}#toast{position:absolute;top:26%;left:50%;transform:translate(-50%);text-align:center;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 16px rgba(255,210,127,.7);opacity:0}#toast span{display:block;margin-top:4px;font-size:15px;letter-spacing:.08em;text-transform:none;color:var(--fg)}#toast.show{animation:toast 2.2s ease-out forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}15%,70%{opacity:1;transform:translate(-50%)}to{opacity:0}}#next{position:absolute;top:calc(20px + var(--safe-t));right:calc(24px + var(--safe-r));text-align:right;font-size:18px}#alarm{position:absolute;top:calc(70px + var(--safe-t));left:50%;transform:translate(-50%);padding:6px 14px;border:1px solid var(--alarm);border-radius:4px;color:var(--alarm);font-size:14px;letter-spacing:.08em;white-space:nowrap;pointer-events:auto;cursor:pointer;animation:blink .6s infinite alternate}#arrow{position:absolute;width:40px;height:48px;line-height:48px;text-align:center;font-size:40px;color:var(--alarm);text-shadow:0 0 12px var(--alarm);transform-origin:center;pointer-events:auto;cursor:pointer;animation:blink .4s infinite alternate}@keyframes blink{0%{opacity:1}to{opacity:.35}}#bot-badge{position:absolute;top:calc(20px + var(--safe-t));left:50%;transform:translate(-50%);padding:4px 12px;border:1px solid var(--dim);border-radius:4px;color:var(--dim);font-size:12px;letter-spacing:.08em;white-space:nowrap;pointer-events:auto;cursor:pointer}#help{position:absolute;bottom:16px;left:24px;font-size:12px;line-height:1.7;color:var(--dim)}#help b{color:var(--fg);font-weight:600}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);pointer-events:none}#overlay h1{margin:0 0 12px;font-size:clamp(40px,9vw,88px);font-weight:200;letter-spacing:.35em;text-indent:.35em}#overlay h2{margin:0 0 16px;font-size:44px;font-weight:200;letter-spacing:.25em}#overlay p{margin:10px 16px;line-height:1.6}#overlay .tag{color:var(--fg)}#overlay .keys{font-size:13px;color:var(--dim)}#overlay .go{margin-top:28px;padding:10px 22px;color:var(--accent);letter-spacing:.1em;pointer-events:auto;touch-action:manipulation;animation:blink .9s infinite alternate}#screen-over b{font-size:26px;margin-left:8px}.legend{display:inline-grid;gap:10px;margin:18px auto 0;padding:0;list-style:none;text-align:left;font-size:14px;color:var(--dim)}.legend li{display:flex;align-items:center;gap:12px}.chip{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:30px;padding:0 10px;border:1px solid rgba(232,236,247,.25);border-radius:15px;background:#e8ecf70f;color:var(--fg);font-size:14px;letter-spacing:.08em}body.touch #overlay .go{margin-top:26px;padding:14px 34px;border:1px solid rgba(255,210,127,.55);border-radius:28px;background:#ffd27f14;font-size:17px}#overlay .hint{margin-top:14px;font-size:12px;color:var(--dim)}body.touch #stats{top:calc(12px + var(--safe-t));left:calc(14px + var(--safe-l));gap:16px;font-size:18px}body.touch #energy{font-size:26px}body.touch #toast{font-size:22px}body.touch .label{font-size:9px;letter-spacing:.14em}body.touch #next{top:calc(62px + var(--safe-t));right:calc(14px + var(--safe-r));font-size:15px}body.touch #alarm{top:calc(104px + var(--safe-t));padding:8px 14px;font-size:13px}#pause-btn{position:absolute;top:calc(10px + var(--safe-t));right:calc(10px + var(--safe-r));width:44px;height:44px;border-radius:50%;border:1px solid rgba(232,236,247,.2);background:#0a0e1e73;color:var(--dim);font-size:13px;letter-spacing:1px;pointer-events:auto}.pad{position:absolute;bottom:calc(16px + var(--safe-b));display:grid;gap:8px;pointer-events:auto}.pad button{width:var(--btn);height:var(--btn);border-radius:50%;border:1px solid rgba(232,236,247,.22);background:#0a0e1e80;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--fg);font-size:22px;transition:transform .06s,background .06s}.pad button.on{transform:scale(.92);background:#ffd27f38;border-color:#ffd27f99}#pad-rot{left:calc(16px + var(--safe-l));grid-template-columns:repeat(3,var(--btn))}#pad-rot .drop{grid-column:1 / -1;width:auto;border-radius:calc(var(--btn) / 2);font-size:26px;border-color:#ffd27f73;color:var(--accent)}#pad-move{right:calc(16px + var(--safe-r));grid-template-columns:repeat(3,var(--btn));grid-template-rows:repeat(3,var(--btn));gap:2px}#pad-move .up{grid-area:1 / 2}#pad-move .left{grid-area:2 / 1}#pad-move .right{grid-area:2 / 3}#pad-move .down{grid-area:3 / 2}#pad-move button{font-size:18px}@media (max-width: 380px){:root{--btn: 48px}body.touch #stats{gap:12px;font-size:16px}}@media (max-height: 500px){#overlay h1{font-size:40px;margin-bottom:4px}#overlay h2{font-size:32px;margin-bottom:8px}#overlay p{margin:6px 16px;line-height:1.45;font-size:14px}.legend{grid-template-columns:auto auto;column-gap:28px;gap:8px;margin-top:10px;font-size:13px}body.touch #overlay .go{margin-top:14px;padding:10px 28px}#overlay .hint{display:none}body.touch #next{top:calc(12px + var(--safe-t));right:calc(66px + var(--safe-r))}body.touch #alarm{top:calc(60px + var(--safe-t))}}.chip.big{font-size:19px}