:root{color:#f5f1e6;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--cyan:#18d8f5;--coral:#ff6b5c;--gold:#f7c94d;background:#020817;font-family:ui-monospace,SFMono-Regular,Cascadia Code,Roboto Mono,monospace}*{box-sizing:border-box}html,body,#app,#game{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;min-width:320px}#app{isolation:isolate;background:#020817;position:relative}#game canvas{outline:none;width:100%;height:100%;display:block}.hud-top{z-index:2;pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:start;gap:1.5rem;display:grid;position:absolute;inset:clamp(1rem,2.6vw,2rem) clamp(1rem,2.8vw,2.5rem) auto}.hud-top p,.hud-top h1,.controls,.event-feed{margin:0}.brand h1{color:var(--cyan);letter-spacing:.11em;text-shadow:0 0 24px #18d8f52e;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:clamp(2.15rem,4vw,3.8rem);font-weight:900;line-height:.82}.brand p{letter-spacing:.36em;margin-top:.75rem;font-size:clamp(.58rem,.95vw,.82rem)}.scoreline,.flagline{letter-spacing:.1em;white-space:nowrap;font-size:clamp(.72rem,1.35vw,1.18rem);font-weight:800}.scoreline{color:var(--cyan);align-items:baseline;gap:clamp(.45rem,1vw,.9rem);display:flex}.scoreline strong{font-size:clamp(1.5rem,3.25vw,2.8rem);font-weight:500}.scoreline i{color:#f5f1e6;font-style:normal}.scoreline #score-bot,.scoreline .bot-label{color:var(--coral)}.flagline{justify-self:end}.flagline strong{color:var(--gold)}.event-feed{z-index:2;min-height:1.4em;color:var(--gold);letter-spacing:.15em;pointer-events:none;font-size:clamp(.72rem,1.15vw,1rem);font-weight:800;position:absolute;top:18%;left:50%;transform:translate(-50%)}.actions{z-index:2;pointer-events:none;gap:clamp(.6rem,1.8vw,1.6rem);margin:0;display:flex;position:absolute;bottom:clamp(1rem,3.4vw,2.7rem);left:50%;transform:translate(-50%)}.action{--action-color:var(--cyan);--cooldown:0;grid-template-columns:auto auto;grid-template-areas:"key name""key cooldown";align-items:center;gap:.15rem .7rem;min-width:clamp(8rem,13vw,11.5rem);display:grid;position:relative;overflow:hidden}.action[data-action=attack]{--action-color:var(--coral)}.action[data-action=parry]{--action-color:#f5f1e6}.action .key{z-index:1;min-width:2.8rem;color:var(--action-color);border:1px solid var(--action-color);letter-spacing:.06em;text-align:center;box-shadow:0 0 18px color-mix(in srgb, var(--action-color) 15%, transparent);grid-area:key;padding:.55rem .65rem;font-size:clamp(.65rem,.95vw,.82rem);font-weight:900;position:relative}.action-name{z-index:1;letter-spacing:.1em;grid-area:name;font-size:clamp(.62rem,.9vw,.82rem);font-weight:800;position:relative}.cooldown{z-index:1;color:#6f829d;letter-spacing:.08em;grid-area:cooldown;font-size:.55rem;position:relative}.action[data-ready=true] .cooldown{color:var(--action-color)}.cooldown-mask{transform:translateY(calc((1 - var(--cooldown)) * 100%));pointer-events:none;background:#020817b8;position:absolute;inset:0}.controls{z-index:2;color:var(--cyan);letter-spacing:.08em;pointer-events:none;font-size:clamp(.58rem,.85vw,.75rem);font-weight:900;position:absolute;bottom:clamp(1.15rem,3.8vw,3rem);left:clamp(1rem,2.8vw,2.5rem)}.controls span{color:#f5f1e6;font-weight:500}.controls i{margin:0 .55rem;font-style:normal}.debug-panel{z-index:2;width:clamp(10rem,15vw,13rem);color:var(--cyan);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);pointer-events:none;background:#020817c7;border:1px solid #18d8f5a6;position:absolute;bottom:clamp(.9rem,2.5vw,2rem);right:clamp(1rem,2.8vw,2.5rem)}.debug-panel[hidden]{display:none}.debug-panel dl{margin:0}.debug-panel div{border-bottom:1px solid #344a6880;grid-template-columns:4.2rem 1fr;gap:.5rem;padding:.38rem .65rem;display:grid}.debug-panel div:last-child{border-bottom:0}.debug-panel dt,.debug-panel dd{margin:0;font-size:clamp(.55rem,.75vw,.68rem);line-height:1.3}.debug-panel dt{letter-spacing:.1em;font-weight:900}.debug-panel dd{color:#f5f1e6;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.touch-controls{display:none}@media (hover:none) and (pointer:coarse),(width<=760px),(height<=520px) and (orientation:landscape){.touch-controls{z-index:5;right:max(.8rem, env(safe-area-inset-right));bottom:max(.75rem, env(safe-area-inset-bottom));left:max(.8rem, env(safe-area-inset-left));pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:end;display:flex;position:absolute}.touch-joystick{--stick-x:0px;--stick-y:0px;aspect-ratio:1;pointer-events:auto;touch-action:none;background:radial-gradient(circle,#18d8f517 0 34%,#0208176b 35% 100%);border:1px solid #18d8f58c;border-radius:50%;width:clamp(6.6rem,29vw,8rem);position:relative;box-shadow:inset 0 0 26px #18d8f514,0 0 22px #18d8f512}.touch-joystick-ring{border:1px solid #18d8f53d;border-radius:50%;position:absolute;inset:17%}.touch-joystick-knob{aspect-ratio:1;border:2px solid var(--cyan);width:42%;transform:translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));pointer-events:none;background:#18d8f533;border-radius:50%;transition:transform 70ms ease-out;position:absolute;top:50%;left:50%;box-shadow:0 0 20px #18d8f547}.touch-joystick[data-active=true] .touch-joystick-knob{background:#18d8f557;transition:none}.touch-joystick-label{color:#18d8f5ad;letter-spacing:.2em;text-align:center;pointer-events:none;font-size:.52rem;font-weight:900;position:absolute;bottom:-.1rem;left:0;right:0}.touch-actions{pointer-events:none;grid-template-rows:repeat(2,clamp(4rem,18vw,5rem));grid-template-columns:repeat(2,clamp(4rem,18vw,5rem));place-items:center;gap:.45rem;display:grid}.touch-action{--action-color:var(--cyan);--cooldown:0;aspect-ratio:1;width:100%;color:var(--action-color);border:1px solid var(--action-color);background:linear-gradient(to top, #020817c2 calc(var(--cooldown) * 100%), transparent calc(var(--cooldown) * 100%)), #02081794;font:inherit;box-shadow:inset 0 0 18px color-mix(in srgb, var(--action-color) 8%, transparent), 0 0 16px color-mix(in srgb, var(--action-color) 9%, transparent);pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.touch-action span{letter-spacing:.08em;font-size:.82rem;font-weight:950}.touch-action small{letter-spacing:.06em;font-size:.42rem;font-weight:800;position:absolute;bottom:.55rem;left:0;right:0}.touch-action[data-ready=false]{opacity:.58}.touch-action[data-pressed=true]{background:color-mix(in srgb, var(--action-color) 30%, #020817);box-shadow:0 0 28px color-mix(in srgb, var(--action-color) 42%, transparent);transform:scale(.92)}.touch-traverse{grid-row:1/3;align-self:center}.touch-attack{--action-color:var(--coral)}.touch-parry{--action-color:#f5f1e6}}@media (width<=760px){.hud-top{grid-template-columns:1fr auto;gap:.75rem}.scoreline{justify-self:end}.flagline{position:absolute;top:4rem;right:0}.actions,.controls,.debug-panel{display:none}}@media (height<=520px) and (orientation:landscape){.touch-controls{align-items:center;display:flex;top:5.6rem;bottom:.55rem}.actions,.controls,.debug-panel{display:none}.touch-joystick{width:min(23vh,7rem)}.touch-actions{grid-template-rows:repeat(2,min(18vh,4.4rem));grid-template-columns:repeat(2,min(18vh,4.4rem))}}