:root{--bg-ink: rgba(14, 16, 22, .82);--border-gold: rgba(212, 175, 95, .55);--gold-bright: #f5d37e;--crimson: #d93838;--jade: #38b87c;--rage-amber: #ff9d2e;--text-light: #f0ece1;--text-dim: #a8a090}*{box-sizing:border-box;margin:0;padding:0;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background:#090b10;font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;color:var(--text-light)}#game-container{position:relative;width:100vw;height:100vh}#game-canvas{display:block;width:100%;height:100%;cursor:crosshair}#top-bar{position:absolute;top:0;left:0;right:0;height:46px;background:linear-gradient(180deg,#0a0c12eb,#0a0c12a6);border-bottom:1px solid var(--border-gold);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:20;backdrop-filter:blur(6px)}.brand{display:flex;align-items:baseline;gap:10px}.brand-title{font-size:18px;font-weight:800;letter-spacing:2px;color:var(--gold-bright);text-shadow:0 2px 8px rgba(245,211,126,.35)}.brand-sub{font-size:12px;color:var(--text-dim)}.top-controls{display:flex;align-items:center;gap:12px;font-size:13px}.top-controls label{display:flex;align-items:center;gap:5px;color:var(--text-dim)}.top-controls select,.top-controls button{background:#1c202ae6;color:var(--text-light);border:1px solid var(--border-gold);border-radius:4px;padding:4px 9px;font-size:12px;cursor:pointer;transition:all .15s ease}.top-controls select:hover,.top-controls button:hover{border-color:var(--gold-bright);background:#322c20e6}#btn-camera-lock.locked{background:#38b87c40;border-color:var(--jade);color:#8affc1}.fighter-hud{position:absolute;top:60px;display:flex;align-items:center;gap:12px;background:var(--bg-ink);border:1px solid var(--border-gold);border-radius:6px;padding:10px 14px;width:340px;z-index:15;box-shadow:0 6px 20px #0000008c}.left-hud{left:18px}.right-hud{right:18px}.portrait-box{position:relative;width:58px;height:58px;border:2px solid var(--gold-bright);border-radius:6px;background:radial-gradient(circle at 30% 30%,#2a3950,#111622);display:flex;align-items:center;justify-content:center;flex-shrink:0}.enemy-portrait{background:radial-gradient(circle at 30% 30%,#52232c,#1a0f14)}.portrait-avatar{font-size:26px;font-weight:900;color:var(--gold-bright);text-shadow:0 2px 6px rgba(0,0,0,.8)}.enemy-avatar{color:#ff9494}.weapon-badge{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);background:#1c1914;border:1px solid var(--gold-bright);color:var(--gold-bright);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;white-space:nowrap}.bars-container{flex:1;display:flex;flex-direction:column;gap:6px}.hud-name-row{display:flex;justify-content:space-between;align-items:baseline}.fighter-name{font-size:15px;font-weight:700;color:var(--gold-bright)}.weapon-sub{font-size:11px;color:var(--text-dim)}.bar-track{position:relative;width:100%;height:15px;background:#000000a6;border:1px solid rgba(255,255,255,.16);border-radius:3px;overflow:hidden}.rage-track{height:12px}.bar-fill{height:100%;transition:width .12s ease-out}.hp-fill{background:linear-gradient(90deg,#1f8a58,#44d48e)}.enemy-hp-fill{background:linear-gradient(90deg,#9c2222,#ec4c4c)}.rage-fill{background:linear-gradient(90deg,#c26412,#ffc233)}.rage-fill.rage-ready{background:linear-gradient(90deg,#ff3814,#ffe657);box-shadow:0 0 12px #f80;animation:ragePulse .8s infinite alternate}@keyframes ragePulse{0%{filter:brightness(1)}to{filter:brightness(1.35)}}.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}.state-tags{display:flex;gap:6px}.right-tags{justify-content:flex-end}.state-tag{font-size:11px;padding:1px 7px;border-radius:3px;background:#ffffff14;color:var(--text-light);border:1px solid rgba(255,255,255,.15)}#movelist-panel{position:absolute;top:176px;left:18px;width:265px;background:var(--bg-ink);border:1px solid var(--border-gold);border-radius:6px;padding:10px 12px;z-index:15;box-shadow:0 6px 20px #00000080}.panel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(212,175,95,.3);padding-bottom:6px;margin-bottom:8px}#movelist-title{font-size:14px;font-weight:700;color:var(--gold-bright)}.panel-hint{font-size:11px;color:var(--text-dim)}#movelist-items{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.move-item{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:4px;background:#ffffff0a;border:1px solid transparent;font-size:12px;transition:all .18s ease}.move-item.active-move{background:#f5d37e3d;border-color:var(--gold-bright);transform:translate(4px)}.move-item.ultimate-move .move-name{color:#ff9c40;font-weight:700}.move-cmd{font-family:monospace;font-weight:700;color:var(--gold-bright);background:#00000073;padding:2px 6px;border-radius:3px}.move-desc{font-size:10px;color:var(--text-dim);margin-left:4px}.controls-guide{border-top:1px solid rgba(255,255,255,.1);padding-top:8px;font-size:11px;color:var(--text-dim);display:flex;flex-direction:column;gap:4px}kbd{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:3px;padding:0 4px;font-size:10px;color:var(--text-light)}#center-callout{position:absolute;top:22%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:25;animation:calloutPop .25s cubic-bezier(.18,.89,.32,1.28)}@keyframes calloutPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}#callout-subtitle{font-size:13px;letter-spacing:4px;color:#ffae42;text-shadow:0 2px 6px #000}#callout-title{font-size:38px;font-weight:900;letter-spacing:6px;color:#fff3d1;text-shadow:0 0 18px #ff5500,0 4px 10px #000}#combo-counter{position:absolute;top:32%;right:8%;pointer-events:none;z-index:22;display:flex;align-items:baseline;gap:6px}#combo-num{font-size:54px;font-weight:900;font-style:italic;color:#ffd95e;text-shadow:0 0 15px rgba(255,120,0,.85),2px 4px 8px #000}.combo-label{font-size:20px;font-weight:800;color:var(--text-light);text-shadow:0 2px 6px #000}#round-banner{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(15,12,8,.88) 20%,rgba(15,12,8,.88) 80%,transparent);border-top:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);padding:16px 80px;text-align:center;z-index:30;pointer-events:none}.banner-main{font-size:32px;font-weight:900;letter-spacing:6px;color:var(--gold-bright);text-shadow:0 3px 10px #000}.banner-sub{margin-top:4px;font-size:14px;letter-spacing:3px;color:var(--text-dim)}#input-stream-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);min-width:480px;height:44px;background:var(--bg-ink);border:1px solid var(--border-gold);border-radius:22px;padding:0 20px;display:flex;align-items:center;gap:12px;z-index:15;box-shadow:0 4px 16px #0009}.stream-label{font-size:12px;color:var(--text-dim);white-space:nowrap}#input-tokens{display:flex;align-items:center;gap:6px;flex:1;overflow:hidden}.token-placeholder{font-size:12px;color:#ffffff59}.input-token{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:5px;background:#ffffff1f;border:1px solid rgba(245,211,126,.5);font-size:13px;font-weight:800;color:var(--gold-bright);animation:tokenSlide .12s ease-out}.input-token.atk-token{background:#d9383859;border-color:#ff6b6b;color:#faa}@keyframes tokenSlide{0%{transform:scale(.7);opacity:.3}to{transform:scale(1);opacity:1}}#matched-move-badge{background:linear-gradient(135deg,#8c2616,#d94b27);border:1px solid var(--gold-bright);color:#fff;font-size:12px;font-weight:800;padding:3px 12px;border-radius:12px;white-space:nowrap}.hidden{display:none!important}
