:root{--ink: #0d0520;--bg-deep: #1a0a2e;--panel: #2d1b4e;--panel-hi: #3a2563;--hud-fg: #ffffff;--hud-dim: #b0b0c0;--hp: #4ade80;--hp-low: #ff3d3d;--gold: #ffc107;--ult: #ff2d78;--danger: #ff3d3d;--self-color: #5ce1ff;--hud-bg: var(--panel);--hud-line: var(--panel-hi);--display-font: "Fredoka", "Nunito", system-ui, -apple-system, sans-serif;--ui-font: "Nunito", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif}.out{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#05060d;color:var(--hud-fg);font-family:var(--ui-font);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#game,#game canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#hud{position:fixed;inset:0;pointer-events:none;z-index:20}#combat-hud{position:absolute;inset:0;pointer-events:none}.hud-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:10px;align-items:stretch}.hud-chip{background:var(--panel);border:3px solid var(--ink);border-radius:22px;box-shadow:0 4px 0 0 var(--ink);padding:5px 14px;text-align:center;min-width:74px}.hud-chip .label{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--hud-dim);text-transform:uppercase}.hud-chip .value{font-family:var(--display-font);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}.hud-chip.pot .value{color:var(--gold)}.hud-chip.clock.urgent .value{color:var(--danger)}.ability-row{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px}.ability{position:relative;width:58px;height:58px;border-radius:999px;background:var(--panel-hi);border:3px solid var(--ink);box-shadow:0 4px 0 0 var(--ink);display:grid;place-items:center;overflow:hidden;appearance:none;padding:0;color:var(--hud-fg);font-family:inherit;pointer-events:auto;cursor:pointer;transition:transform 60ms ease-out,background 60ms ease-out}.ability.ult-slot{width:74px;height:74px;background:var(--panel)}.ability:hover{background:var(--panel)}.ability:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.ability.pressed{transform:translateY(4px);box-shadow:0 0 0 0 var(--ink);background:var(--panel)}.ability .glyph{font-family:var(--display-font);font-size:17px;font-weight:700;letter-spacing:.02em;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}.ability .key{position:absolute;bottom:2px;right:0;left:0;text-align:center;font-size:8px;font-weight:800;color:var(--hud-dim)}.ability .charge{position:absolute;inset:-3px;border-radius:999px;background:conic-gradient(var(--ult) var(--charge-deg, 0deg),transparent 0deg);-webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 5px),#000 calc(50% - 5px));mask:radial-gradient(circle,transparent 0 calc(50% - 5px),#000 calc(50% - 5px));pointer-events:none}.ability.ult-slot.charged{background:var(--ult)}.ability.ult-slot.charged .charge{animation:ultPulse 1.1s ease-in-out infinite}@keyframes ultPulse{0%,to{box-shadow:0 0 #ff2d7800}50%{box-shadow:0 0 14px 3px #ff2d78b3}}.ability .cd{position:absolute;inset:0;background:conic-gradient(rgba(13,5,32,.82) var(--cd-deg, 0deg),transparent 0deg);pointer-events:none}.ability.ready .glyph{color:var(--hud-fg)}.ability.locked{opacity:.6;cursor:default}.ability.locked .glyph{opacity:.4}.ability .cd-text{position:absolute;font-family:var(--display-font);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}.ability-tip{position:fixed;z-index:40;width:240px;padding:10px 12px 11px;background:var(--panel);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 0 var(--ink);pointer-events:none}.ability-tip[hidden]{display:none}.tip-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}.tip-name{font-family:var(--display-font);font-size:15px;font-weight:700;color:var(--self-color)}.tip-key{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--hud-dim)}.tip-stats{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}.tip-stats span{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--bg-deep);border:2px solid var(--ink);border-radius:999px;padding:1px 7px}.tip-shape{font-size:10px;font-weight:700;color:var(--gold);margin-bottom:6px}.tip-body{margin:0;font-size:12px;line-height:1.4;color:var(--hud-fg)}.char-info{position:absolute;top:6px;right:6px;width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--panel-hi);border:2px solid var(--ink);font-size:10px;font-weight:800;line-height:1;cursor:pointer}.char-info:hover{background:var(--gold);color:var(--ink)}#character-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}#character-sheet[hidden]{display:none}.cs-scrim{position:absolute;inset:0;background:#0d0520b8}.cs-panel{position:relative;display:flex;flex-direction:column;width:min(390px,94vw);max-height:min(844px,92vh);background:var(--bg-deep);border:3px solid var(--ink);border-radius:20px;box-shadow:0 8px 0 0 var(--ink);overflow:hidden}.cs-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:12px;background:var(--panel);border:3px solid var(--ink);color:var(--hud-fg);font-family:var(--ui-font);font-size:14px;font-weight:800;cursor:pointer}.cs-tabs{display:flex;gap:5px;padding:12px 52px 10px 12px;flex:none}.cs-tab{flex:1 1 0;min-width:0;padding:6px 2px;border-radius:10px;background:var(--panel);border:3px solid var(--ink);color:var(--hud-dim);font-family:var(--display-font);font-size:11px;font-weight:700;cursor:pointer}.cs-tab.on{background:var(--char);color:var(--ink)}.cs-body{flex:1 1 auto;overflow-y:auto;padding:0 12px 12px}.cs-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 0 12px;text-align:center}.cs-glow{position:absolute;top:-10px;width:230px;height:170px;border-radius:999px;background:radial-gradient(circle,color-mix(in srgb,var(--char) 28%,transparent) 0%,transparent 70%);pointer-events:none}.cs-ticker{position:relative;font-family:var(--display-font);font-size:52px;font-weight:700;line-height:1.05;color:var(--char);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}.cs-archetype{position:relative;font-family:var(--display-font);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--hud-fg)}.cs-fantasy{position:relative;margin-top:7px;max-width:300px;font-size:12px;font-weight:600;color:var(--hud-dim)}.cs-wip{position:relative;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold)}.cs-stats{display:flex;gap:8px;margin-bottom:12px}.cs-stat{flex:1 1 0;display:flex;flex-direction:column;align-items:center;background:var(--panel);border:3px solid var(--ink);border-radius:14px;padding:8px 4px}.cs-stat-value{font-family:var(--display-font);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}.cs-stat-value.cs-hp{color:var(--hp)}.cs-stat-value.cs-speed{color:#00d4ff}.cs-stat-value.cs-dmg{color:var(--ult)}.cs-stat-label{font-size:9px;font-weight:800;color:var(--hud-dim)}.cs-abilities{display:flex;flex-direction:column;gap:9px}.cs-ability{display:flex;align-items:flex-start;gap:10px;background:var(--panel);border:3px solid var(--ink);border-radius:16px;padding:10px;box-shadow:0 4px 0 0 var(--ink)}.cs-ability.ult{background:var(--panel-hi)}.cs-slot{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--panel-hi);border:3px solid var(--ink);border-radius:13px;font-family:var(--display-font);font-size:13px;font-weight:700;color:var(--char)}.cs-ability.ult .cs-slot{background:var(--ult);color:var(--hud-fg)}.cs-ability-text{flex:1 1 auto;min-width:0}.cs-ability-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.cs-ability-name{font-family:var(--display-font);font-size:14px;font-weight:600}.cs-badge{font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--gold);border-radius:999px;padding:2px 7px}.cs-badge.ult{color:var(--hud-fg);background:var(--ult)}.cs-ability-shape{display:block;margin:2px 0 3px;font-size:10px;font-weight:700;color:var(--gold)}.cs-ability-text p{margin:0;font-size:11px;font-weight:600;line-height:1.4;color:var(--hud-dim)}.cs-play{flex:none;margin:12px;height:54px;background:var(--hp);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 0 var(--ink);color:var(--ink);font-family:var(--display-font);font-size:19px;font-weight:700;cursor:pointer}.cs-play:active{transform:translateY(5px);box-shadow:0 0 0 0 var(--ink)}#kill-feed{position:absolute;top:calc(74px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:min(320px,62vw);display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}.kf-row{background:var(--hud-bg);border:1px solid var(--hud-line);border-radius:8px;padding:5px 9px;font-size:12px;line-height:1.3;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;animation:kfIn .16s ease-out;transition:opacity .26s ease-out}.kf-row.mine{border-color:#ffd93dbf}.kf-row .killer{font-weight:700}.kf-row .verb{color:var(--hud-dim);margin:0 5px}.kf-row .victim{font-weight:700;opacity:.9}.kf-row.fading{opacity:0}@keyframes kfIn{0%{transform:translate(16px);opacity:0}}#damage-numbers{position:absolute;inset:0;pointer-events:none;overflow:hidden}.dmg{position:absolute;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(0,0,0,.9);will-change:transform,opacity;transform:translate(-50%,-50%)}.dmg.taken{color:#ff8a97}.dmg.dealt{color:#fff2b0}.dmg.crit{font-size:28px;color:#fff}#announce-layer{position:absolute;top:20vh;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.announce{background:#0a0618c7;border:1px solid rgba(180,108,255,.6);border-radius:10px;padding:8px 18px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;animation:annIn .22s ease-out;transition:opacity .3s ease-out}.announce.zone{border-color:#ff5a78b3}.announce.fading{opacity:0}@keyframes annIn{0%{transform:translateY(-10px) scale(.96);opacity:0}}#death-cam{position:absolute;inset:0;pointer-events:none;display:none}#death-cam.active{display:block}.dc-banner{position:absolute;top:14vh;left:50%;transform:translate(-50%);text-align:center}.dc-banner .headline{font-size:clamp(28px,7vw,54px);font-weight:900;letter-spacing:.06em;color:#ff6076;text-shadow:0 4px 24px rgba(255,60,90,.4)}.dc-banner .sub{margin-top:6px;font-size:14px;color:var(--hud-dim);letter-spacing:.1em}.dc-panel{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:10px;align-items:stretch;pointer-events:auto}.dc-stat{background:var(--hud-bg);border:1px solid var(--hud-line);border-radius:10px;padding:8px 14px;text-align:center;min-width:92px}.dc-stat .label{font-size:9px;letter-spacing:.14em;color:var(--hud-dim);text-transform:uppercase}.dc-stat .value{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.dc-btn{appearance:none;border:1px solid rgba(255,217,61,.8);background:linear-gradient(180deg,#ffd93d38,#ffd93d14);color:var(--hud-fg);font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.12em;border-radius:10px;padding:0 22px;min-height:52px;pointer-events:auto;cursor:pointer}.dc-btn.secondary{border-color:var(--hud-line);background:var(--hud-bg);font-weight:600;letter-spacing:.06em}.dc-hint{position:absolute;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));transform:translate(-50%);font-size:11px;letter-spacing:.1em;color:var(--hud-dim);text-align:center}#boot-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse at center,#10122a,#05060d 70%);transition:opacity .42s ease-out}#boot-overlay.hidden{opacity:0;pointer-events:none}.boot-title{font-size:clamp(30px,8vw,62px);font-weight:900;letter-spacing:.22em;text-align:center}.boot-status{margin-top:12px;text-align:center;font-size:13px;letter-spacing:.16em;color:var(--hud-dim);text-transform:uppercase}.boot-status.error{color:var(--danger);text-transform:none;letter-spacing:.04em}#touch-layer{position:fixed;inset:0;z-index:30;pointer-events:none}#joystick-zone{position:absolute;left:env(safe-area-inset-left);bottom:env(safe-area-inset-bottom);width:min(44vw,340px);height:min(52vh,320px);pointer-events:auto}#joystick-visual{position:absolute;width:0;height:0;pointer-events:none}#joystick-base{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:3px solid var(--ink);background:#2d1b4e99}#joystick-thumb{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--panel-hi);border:3px solid var(--ink)}.tbtn{position:absolute;display:grid;place-items:center;border-radius:50%;background:var(--panel-hi);border:3px solid var(--ink);box-shadow:0 4px 0 0 var(--ink);color:var(--hud-fg);font-family:var(--display-font);font-weight:700;letter-spacing:.02em;overflow:hidden}#tb-ultimate{background:var(--panel)}#tb-ultimate.charged{background:var(--ult)}.tbtn .glyph{font-size:15px;pointer-events:none;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}.tbtn .cd{position:absolute;inset:0;background:conic-gradient(rgba(4,6,14,.8) var(--cd-deg, 0deg),transparent 0deg);pointer-events:none}.tbtn .cd-text{position:absolute;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 1px 3px #000}.tbtn.pressed{background:var(--panel);transform:translateY(4px);box-shadow:0 0 0 0 var(--ink)}.tbtn.locked{opacity:.45}#ability-cluster{position:absolute;right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);width:310px;height:200px;pointer-events:auto;transform-origin:100% 100%}@media (max-width: 700px){#ability-cluster{transform:scale(.86)}}@media (max-width: 600px){#ability-cluster{transform:scale(.76)}}#tb-basic{right:16px;bottom:16px;width:92px;height:92px;border-color:#ffdc9699}#tb-skill1{right:118px;bottom:30px;width:74px;height:74px}#tb-skill2{right:30px;bottom:118px;width:74px;height:74px}#tb-ultimate{right:128px;bottom:128px;width:80px;height:80px;border-color:#ffd93dcc}#tb-dash{right:218px;bottom:24px;width:68px;height:68px;border-color:#78f0ff99}#tb-jump{right:232px;bottom:108px;width:68px;height:68px}body:not(.touch) #touch-layer{display:none}body.touch .ability-row{display:none}