:root{--bg:#04060b;--neon:#2cf6ff;--neon-dim:#2cf6ff40;--pink:#ffa033;--pink-dim:#ffa03340;--amber:#ffb13d;--panel:#080e1ac7;--line:#2cf6ff38;--text:#cfe9f2;--text-dim:#5d7a8c;--display:"Chakra Petch", sans-serif;--mono:"IBM Plex Mono", monospace;--cut:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--mono);overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{display:block}.scanlines{z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#00000012 3px 4px);position:fixed;inset:0}.vignette{z-index:41;pointer-events:none;background:radial-gradient(at 50% 45%,#0000 55%,#0204098c 100%);position:fixed;inset:0}.hud{z-index:20;pointer-events:none;flex-direction:column;display:flex;position:fixed;inset:0}.ui{pointer-events:auto}.hidden{display:none!important}.jp{color:var(--text-dim);letter-spacing:.2em;font-size:.72em}.cyan{color:var(--neon)}.pink{color:var(--pink)}.hud-top{justify-content:space-between;align-items:flex-start;padding:20px 24px 0;animation:.7s cubic-bezier(.2,.9,.25,1) both drop-in;display:flex}.brand h1{font-family:var(--display);letter-spacing:.14em;color:#eaffff;text-shadow:0 0 18px var(--neon-dim), 0 0 4px #2cf6ff99;font-size:28px;font-weight:700}.brand .slash{color:var(--pink);text-shadow:0 0 14px var(--pink-dim)}.brand-sub{letter-spacing:.3em;color:var(--text-dim);margin-top:2px;font-size:11px}.chip{letter-spacing:.18em;color:var(--neon);border:1px solid var(--line);background:#2cf6ff0f;margin-left:10px;padding:1px 8px;font-size:9px;display:inline-block}.status-module{background:var(--panel);border:1px solid var(--line);min-width:220px;clip-path:var(--cut);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;gap:6px;padding:12px 16px;display:flex}.status-row{align-items:center;gap:10px;display:flex}.status-label{letter-spacing:.3em;color:var(--text-dim);font-size:10px}.status-value{font-family:var(--display);letter-spacing:.22em;color:var(--neon);font-size:15px;font-weight:600}.status-value.pink{color:var(--pink);animation:1.1s steps(2,end) infinite blink}.badge-check{font-family:var(--display);letter-spacing:.25em;color:var(--amber);text-shadow:0 0 12px #ffb13d99;font-size:13px;animation:.7s steps(2,end) infinite blink}.eq{align-items:flex-end;gap:2px;height:14px;display:inline-flex}.eq i{background:var(--pink);width:3px;box-shadow:0 0 8px var(--pink-dim);animation:.8s ease-in-out infinite eq}.eq i:first-child{animation-delay:0s}.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.1s}.eq i:nth-child(5){animation-delay:.25s}@keyframes eq{0%,to{height:3px}50%{height:14px}}@keyframes blink{50%{opacity:.25}}.panel{background:var(--panel);border:1px solid var(--line);width:240px;clip-path:var(--cut);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;animation:.7s cubic-bezier(.2,.9,.25,1) .15s both slide-in;display:flex;position:absolute;top:110px;bottom:214px;right:24px}.panel-head{font-family:var(--display);letter-spacing:.3em;color:var(--neon);border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;padding:12px 16px 10px;font-size:13px;font-weight:600;display:flex}.moves{scrollbar-width:thin;scrollbar-color:var(--neon-dim) transparent;flex:1;padding:10px 16px;font-size:12px;list-style:none;overflow-y:auto}.moves li{border-bottom:1px dashed #2cf6ff14;grid-template-columns:28px 1fr;gap:8px;padding:3px 0;display:grid}.moves .num{color:var(--text-dim)}.moves .w-move{color:var(--neon)}.moves .b-move{color:var(--pink)}.captures{border-top:1px solid var(--line);flex-direction:column;gap:4px;padding:10px 16px 14px;display:flex}.cap-row{align-items:center;gap:10px;min-height:20px;display:flex}.cap-label{letter-spacing:.3em;color:var(--text-dim);width:32px;font-size:9px}.cap-glyphs{letter-spacing:2px;font-size:16px}.skilldock{background:var(--panel);border:1px solid var(--line);width:240px;clip-path:var(--cut);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 16px 10px;animation:.7s cubic-bezier(.2,.9,.25,1) .25s both rise-in;position:absolute;bottom:24px;right:24px}.mana-row{align-items:center;gap:8px;margin-bottom:7px;display:flex}.mana-label{letter-spacing:.3em;color:var(--text-dim);width:30px;font-size:9px}.mana-num{font-family:var(--display);text-align:right;width:20px;font-size:13px}.pips{flex:1;gap:3px;display:flex}.pips i{background:#2cf6ff14;border:1px solid #2cf6ff2e;flex:1;height:9px;transition:all .25s;transform:skew(-18deg)}.pips i.on{background:var(--neon);box-shadow:0 0 8px var(--neon-dim)}.pips.bot i.on{background:var(--pink);box-shadow:0 0 8px var(--pink-dim);border-color:#ffa0334d}.skill-btns{gap:6px;margin-top:10px;display:flex}.skill-btns button{font-family:var(--display);letter-spacing:.08em;color:var(--text);border:1px solid var(--line);cursor:pointer;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:#2cf6ff0d;flex:1;padding:8px 4px;font-size:10px;font-weight:600;transition:all .15s}.skill-btns button i{font-style:normal;font-family:var(--mono);color:var(--text-dim);margin-top:3px;font-size:9px;display:block}.skill-btns button:hover:not(:disabled){color:var(--neon);border-color:var(--neon);box-shadow:0 0 14px var(--neon-dim)}.skill-btns button:disabled{opacity:.3;cursor:default}.skill-btns button.targeting{color:#021014;background:var(--neon);border-color:var(--neon);box-shadow:0 0 18px var(--neon-dim)}.skill-btns button.targeting i{color:#06323a}.skill-hint{letter-spacing:.2em;min-height:14px;color:var(--amber);margin-top:8px;font-size:10px}.res-list{background:var(--panel);border:1px solid var(--line);width:100%;clip-path:var(--cut);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;gap:6px;padding:10px;display:flex;position:absolute;bottom:calc(100% + 8px);right:0}.res-list button{font-family:var(--mono);color:var(--text);border:1px solid var(--line);cursor:pointer;background:#2cf6ff0d;align-items:center;gap:10px;padding:7px 10px;font-size:11px;transition:all .15s;display:flex}.res-list button .glyph{color:var(--neon);font-size:17px}.res-list button .cost{color:var(--amber);margin-left:auto;font-weight:600}.res-list button:hover:not(:disabled){border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}.res-list button:disabled{opacity:.35;cursor:default}.controls{flex-wrap:wrap;align-items:center;gap:12px;animation:.7s cubic-bezier(.2,.9,.25,1) .3s both rise-in;display:flex;position:absolute;bottom:24px;left:24px}.btn,.seg button,.promo-options button{font-family:var(--display);letter-spacing:.18em;color:var(--text);background:var(--panel);border:1px solid var(--line);cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);padding:10px 18px;font-size:12px;font-weight:600;transition:all .15s}.btn:hover,.seg button:hover{color:var(--neon);border-color:var(--neon);box-shadow:0 0 16px var(--neon-dim), inset 0 0 12px #2cf6ff14;text-shadow:0 0 8px var(--neon-dim)}.btn.primary{color:#021014;background:var(--neon);border-color:var(--neon);box-shadow:0 0 22px var(--neon-dim)}.btn.primary:hover{color:#021014;text-shadow:none;background:#8ffbff}.btn:disabled{opacity:.35;pointer-events:none}.seg{gap:0;display:flex}.seg button{clip-path:none;border-right-width:0;padding:10px 14px}.seg button:first-child{clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}.seg button:last-child{clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);border-right-width:1px}.seg button.active{color:var(--neon);text-shadow:0 0 8px var(--neon-dim);background:#2cf6ff1f;box-shadow:inset 0 0 14px #2cf6ff1f}#seg-side button[data-side=b].active{color:var(--pink);text-shadow:0 0 8px var(--pink-dim);background:#ff2bd61f;box-shadow:inset 0 0 14px #ff2bd624}.overlay{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#02040999;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut);text-align:center;padding:28px 36px;animation:.35s cubic-bezier(.2,.9,.25,1) both drop-in}.modal-title{font-family:var(--display);letter-spacing:.3em;color:var(--neon);margin-bottom:18px;font-size:18px;font-weight:700}.modal-title .jp{margin-left:10px}.promo-options{gap:10px;display:flex}.promo-options button{flex-direction:column;align-items:center;gap:6px;padding:14px 18px;font-size:11px;display:flex}.promo-options button i{color:var(--neon);text-shadow:0 0 14px var(--neon-dim);font-size:30px;font-style:normal;line-height:1}.promo-options button:hover{border-color:var(--neon);box-shadow:0 0 18px var(--neon-dim)}.end-modal{min-width:340px}.end-detail{letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);margin:10px 0 22px;font-size:12px}.menu-modal{min-width:380px;padding:40px 48px}.menu-logo{font-size:40px}.menu-sub{letter-spacing:.5em;color:var(--text-dim);margin:6px 0 26px;font-size:11px}.nick-row{border:1px solid var(--line);background:#2cf6ff0a;justify-content:center;align-items:center;gap:12px;margin-bottom:24px;padding:10px 14px;display:flex}.nick-label{letter-spacing:.3em;color:var(--text-dim);font-size:9px}.nick-row b{font-family:var(--display);letter-spacing:.15em;color:var(--neon);text-shadow:0 0 10px var(--neon-dim);font-size:15px}.mini{font-family:var(--display);letter-spacing:.2em;color:var(--text-dim);border:1px solid var(--line);cursor:pointer;background:0 0;padding:4px 10px;font-size:9px;transition:all .15s}.mini:hover{color:var(--neon);border-color:var(--neon)}.menu-btns{flex-direction:column;gap:10px;display:flex}.menu-btns .btn{padding:13px 18px;font-size:14px}.neon-input{width:100%;font-family:var(--mono);letter-spacing:.2em;text-align:center;color:var(--neon);border:1px solid var(--line);text-transform:uppercase;background:#02060ccc;outline:none;padding:12px 14px;font-size:16px}.neon-input:focus{border-color:var(--neon);box-shadow:0 0 16px var(--neon-dim), inset 0 0 10px #2cf6ff0f}.neon-input.code{font-family:var(--display);letter-spacing:.5em;font-size:26px;font-weight:700}.modal-actions{justify-content:center;gap:10px;margin-top:16px;display:flex}.net-status{letter-spacing:.25em;text-transform:uppercase;min-height:14px;color:var(--text-dim);margin-top:12px;font-size:10px}.net-status.error{color:#f56}.net-status.blink{animation:1.2s steps(2,end) infinite blink}.room-code{font-family:var(--display);letter-spacing:.35em;color:var(--neon);text-shadow:0 0 26px var(--neon-dim), 0 0 6px #2cf6ffb3;margin:14px 0 4px;font-size:44px;font-weight:700}.modal-title.pink{color:var(--pink)}.glitch{font-family:var(--display);letter-spacing:.18em;color:#eaffff;text-shadow:0 0 24px var(--neon-dim);font-size:52px;font-weight:700;position:relative}.glitch:before,.glitch:after{content:attr(data-text);opacity:.8;position:absolute;inset:0}.glitch:before{color:var(--pink);animation:2.4s step-end infinite glitch-a}.glitch:after{color:var(--neon);animation:2.4s step-end infinite glitch-b}.glitch.defeat{color:bisque;text-shadow:0 0 24px var(--pink-dim)}@keyframes glitch-a{0%,91%,to{clip-path:inset(0 0 100%);transform:none}92%{clip-path:inset(10% 0 55%);transform:translate(-3px,2px)}95%{clip-path:inset(60% 0 12%);transform:translate(2px,-1px)}98%{clip-path:inset(30% 0 40%);transform:translate(-2px)}}@keyframes glitch-b{0%,89%,to{clip-path:inset(0 0 100%);transform:none}90%{clip-path:inset(45% 0 30%);transform:translate(3px,-2px)}94%{clip-path:inset(5% 0 75%);transform:translate(-2px,1px)}97%{clip-path:inset(70% 0 5%);transform:translate(1px,2px)}}@keyframes drop-in{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}@keyframes slide-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes rise-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media (width<=900px){.panel{display:none}.brand h1{font-size:20px}.glitch{font-size:34px}}
