:root{
  --bg:#07000f; --ink:#f4eaff; --ink-soft:#b9a6d6; --pink:#ff2e93; --cyan:#00f0ff; --yellow:#ffe14a; --panel:rgba(10,0,24,.78);
  --font:"Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;font-family:var(--mono)}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.crt{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px),
  radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.65) 100%);
  mix-blend-mode:multiply;animation:flick 6s infinite}
.crt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,80,.05),rgba(0,255,255,.05));}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.93}52%{opacity:1}}
.screen{position:fixed;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;gap:10px;
  background:radial-gradient(ellipse at center,rgba(7,0,15,.55),rgba(7,0,15,.88));overflow:auto}
body[data-mode=title] #title,body[data-mode=over] #over{display:flex}
body.paused #pause{display:flex}
.kicker{color:var(--cyan);letter-spacing:.3em;font-size:12px;margin:0}
h1{font:400 clamp(54px,12vw,130px)/.85 var(--font);margin:0;display:flex;flex-direction:column;letter-spacing:.02em;
  color:#fff;text-shadow:0 0 12px var(--pink),0 0 40px var(--pink),3px 3px 0 var(--cyan)}
h1 .s2{color:var(--cyan);text-shadow:0 0 12px var(--cyan),0 0 40px var(--cyan),-3px 3px 0 var(--pink)}
.sub{font:400 clamp(18px,3vw,30px) var(--font);letter-spacing:.5em;margin:0;color:var(--yellow);text-shadow:0 0 14px var(--yellow)}
.stances{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.card{width:150px;padding:10px;border:2px solid;background:var(--panel);position:relative}
.card b{position:absolute;top:-12px;left:10px;background:var(--bg);padding:0 8px;font-size:18px}
.card h3{margin:2px 0 4px;font:400 24px var(--font);letter-spacing:.1em}
.card p{margin:0;font-size:12px;color:var(--ink-soft)}
.c-phase{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.4)}
.c-guard{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 18px rgba(255,225,74,.4)}
.c-blade{border-color:var(--pink);color:var(--pink);box-shadow:0 0 18px rgba(255,46,147,.4)}
.how{max-width:560px;font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0}
.how em{color:var(--yellow);font-style:normal}
kbd{border:1px solid var(--ink-soft);padding:0 5px;color:var(--ink)}
.auras{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:11px;color:var(--ink-soft)}
#auraList{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#auraList button{font:inherit;font-size:12px;padding:6px 10px;border:1px solid var(--ink-soft);background:var(--panel);color:var(--ink);cursor:pointer}
#auraList button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
#auraList button.on{border-color:var(--pink);color:#fff;box-shadow:0 0 12px var(--pink)}
#auraList button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.big{font:400 28px var(--font);letter-spacing:.2em;padding:12px 38px;border:3px solid var(--pink);background:var(--pink);color:#12002a;cursor:pointer;
  box-shadow:0 0 28px var(--pink);transition:transform .1s,box-shadow .1s}
.big:hover{transform:scale(1.06);box-shadow:0 0 50px var(--pink)}
.best{font-size:12px;color:var(--ink-soft);margin:0;min-height:1em}
h2{font:400 clamp(44px,9vw,90px) var(--font);margin:0;color:var(--pink);text-shadow:0 0 30px var(--pink),3px 3px 0 var(--cyan)}
.final{font:400 34px var(--font);margin:0}.final b{color:var(--yellow)}
.unlock{color:var(--cyan);margin:0;min-height:1em}
#over{animation:none}
body[data-mode=over] #over{animation:fadein .6s 1.6s both}
@keyframes fadein{from{opacity:0;pointer-events:none}to{opacity:1}}
#touch{position:fixed;left:0;right:0;bottom:0;z-index:6;display:none;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));pointer-events:none}
#touch button{pointer-events:auto;flex:1;height:76px;font:400 20px var(--font);letter-spacing:.08em;background:rgba(10,0,24,.7);border:2px solid;touch-action:none;user-select:none;-webkit-user-select:none}
.t-phase{color:var(--cyan);border-color:var(--cyan)!important}.t-guard{color:var(--yellow);border-color:var(--yellow)!important}
.t-blade{color:var(--pink);border-color:var(--pink)!important}.t-dash{color:#fff;border-color:#fff!important;flex:.6!important}
#touch button:active{background:rgba(255,255,255,.25)}
@media (pointer:coarse),(max-width:760px){body[data-mode=play] #touch,body[data-mode=boss-encounter] #touch{display:flex}}
.topbtns{position:fixed;top:8px;right:8px;z-index:6;display:flex;gap:6px}
.topbtns button{font:12px var(--mono);color:var(--ink);background:var(--panel);border:1px solid var(--ink-soft);padding:6px 9px;cursor:pointer}
.topbtns button:hover{border-color:var(--cyan)}
@media (max-width:600px){.card{width:104px;padding:8px 6px}.card h3{font-size:18px}.card p{font-size:10px}.how{font-size:11px}.big{font-size:22px}}
@media (prefers-reduced-motion:reduce){.crt{animation:none}}