:root{--bg:#14151d;--panel:#1f2130;--panel-edge:#2c2f44;--text:#e8e8f0;--muted:#8a8ca3;--accent:#ffe066;--skill-0:#ff8a3d;--skill-1:#ff4d2e;--skill-2:#4fc3f7;font-family:Courier New,ui-monospace,monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;overflow:hidden}#app{max-width:480px;height:100dvh;padding-top:env(safe-area-inset-top);flex-direction:column;margin:0 auto;display:flex}#hud{color:var(--muted);align-items:center;gap:8px;padding:6px 10px;font-size:12px;display:flex}#score{white-space:nowrap;flex:1;gap:10px;display:flex;overflow:hidden}#score .me{color:var(--accent)}#score .goal{color:var(--text)}#share,#mute{font:inherit;color:var(--text);background:var(--panel-edge);text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:4px;max-width:50%;padding:4px 10px;overflow:hidden}#game{flex:1;min-height:0;display:flex;position:relative}#overlay{z-index:1;text-align:center;pointer-events:none;text-shadow:0 2px #000,0 0 8px #000c;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}#overlay[hidden]{display:none}#overlay.waiting{background:#0a0b1259}#overlay.result{background:#0a0b12b3}#overlay .title{font-size:26px;font-weight:700}#overlay .big{color:var(--accent);font-size:72px;font-weight:700}#overlay .sub{color:var(--muted);font-size:13px;line-height:1.6}#overlay.win .title{color:var(--accent)}#overlay.lose .title{color:#ff8a8a}#overlay table{border-collapse:collapse;font-size:14px}#overlay td{padding:3px 10px}#overlay tr.me{color:var(--accent)}#overlay.go .big{animation:.8s ease-out forwards go}@keyframes go{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.4)}}#game canvas{image-rendering:pixelated}#controls{height:clamp(200px,34dvh,280px);padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:var(--panel);border-top:2px solid var(--panel-edge);flex:none;justify-content:space-between;align-items:center;display:flex}#joystick{border:3px solid var(--panel-edge);background:radial-gradient(circle,#2a2d40 0 55%,#23263a 56%);border-radius:50%;place-items:center;width:140px;height:140px;display:grid;position:relative}#knob{pointer-events:none;background:#4a4f6e;border:3px solid #6a7096;border-radius:50%;width:56px;height:56px;transition:transform 80ms ease-out;box-shadow:0 4px #1a1c28}#joystick.active #knob{background:#5b6188;transition:none}#skills{grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:end;gap:12px;display:grid}.skill{--cd:0;--color:var(--skill-0);border:3px solid color-mix(in srgb, var(--color) 60%, black);background:color-mix(in srgb, var(--color) 35%, var(--panel));width:64px;height:64px;color:var(--text);font:inherit;touch-action:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 4px #111219}.skill-0{grid-area:1/2/span 2;width:88px;height:88px}.skill-1{--color:var(--skill-1);grid-area:2/1}.skill-2{--color:var(--skill-2);grid-area:1/1}.skill.pressed{transform:translateY(3px);box-shadow:0 1px #111219}.skill .icon{font-size:24px;line-height:1}.skill-0 .icon{font-size:32px}.skill .label{margin-top:2px;font-size:11px}.skill:after{content:"";background:conic-gradient(#0009 calc(var(--cd) * 360deg), transparent 0);pointer-events:none;position:absolute;inset:0}