@font-face{font-family:system;src:local('Microsoft JhengHei')}*{box-sizing:border-box} :root{--bg:#111512;--panel:#1a201b;--line:#333c32;--ink:#edf0e4;--muted:#a0ab99;--acid:#d6fb70;--orange:#ff896b;--mono:Consolas,'Courier New',monospace}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Microsoft JhengHei','PingFang TC',Arial,sans-serif}button,a,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acid);outline-offset:4px}button{color:inherit;background:transparent;border:0}a{color:inherit;text-decoration:none}#app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 70% 30%,#28341c40,transparent 65%)}header{height:92px;flex-shrink:0;display:flex;align-items:center;padding:0 4.5vw;border-bottom:1px solid var(--line);gap:32px}.brand{display:flex;gap:12px;align-items:center;font:900 18px/1.1 var(--mono);letter-spacing:.3px}.brand-symbol{font:900 43px var(--mono);color:var(--acid);transform:skew(-10deg)}.brand-sub{display:block;font-size:9px;color:var(--muted);letter-spacing:1.3px;margin-top:6px}nav{display:flex;margin-left:auto;gap:25px;align-items:center}nav button{font-size:12px;color:var(--muted);padding:12px 0}nav button:hover{color:var(--acid)}nav span{color:var(--acid);font:11px var(--mono)}.build{border-left:1px solid var(--line);padding-left:22px;max-width:105px;font:10px/1.7 var(--mono);color:var(--muted)}.build b{color:var(--acid)}main{flex:1;padding:34px 4.5vw 30px;position:relative}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4.5vw;border-top:1px solid var(--line);font:9px var(--mono);letter-spacing:1px;color:var(--muted)}footer b{padding:0 9px;color:var(--acid)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);margin-right:7px}.eyebrow{display:flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:2px;color:var(--acid);margin:0 0 24px}.eyebrow:before{content:'';width:24px;height:1px;background:var(--acid)}.hero{display:grid;grid-template-columns:46% 54%;max-width:1500px;margin:auto;min-height:550px}.hero-copy{padding-top:28px;position:relative;z-index:2}.hero h1{font-size:clamp(42px,4.6vw,78px);font-weight:900;letter-spacing:-3px;line-height:1.06;margin:0 0 22px}.hero h1 em{display:block;color:var(--acid);font-style:normal}.hero .eng{font:900 clamp(18px,2.3vw,34px)/1.05 var(--mono);letter-spacing:-1px;color:transparent;-webkit-text-stroke:1px #879776;display:block;margin-top:17px}.hero-desc{font-size:13px;color:#acb6a5;line-height:1.9;max-width:365px;margin:25px 0}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:15px 22px;border:1px solid #4a5545;font-size:13px;font-weight:700;min-height:47px;transition:background .15s,transform .15s}.btn:hover{background:#34402a;transform:translateY(-2px)}.btn.primary{background:var(--acid);border-color:var(--acid);color:#141b0e}.btn.primary:hover{background:#e5ff9c}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn.small{padding:9px 14px;min-height:36px;font-size:11px;gap:10px}.hero-meta{display:flex;gap:35px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line);max-width:410px}.hero-meta strong{font:700 29px var(--mono);display:block}.hero-meta span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.hero-art{position:relative;overflow:hidden;min-height:540px;background:radial-gradient(ellipse at 50% 70%,#69813f35,transparent 70%)}.hero-art:before{content:'地下';position:absolute;font-size:260px;font-weight:900;letter-spacing:-20px;left:4%;top:28px;color:#c8eaa30a;-webkit-text-stroke:1px #7a915639;transform:rotate(-6deg);white-space:nowrap}.hero-art canvas{width:100%;height:100%;position:absolute;inset:0}.art-topline{position:absolute;top:12px;left:30px;right:15px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1px;color:#8d9d80}.art-sticker{position:absolute;bottom:32px;right:8px;background:var(--acid);color:#1e2c10;font:900 12px/1.3 var(--mono);transform:rotate(-6deg);padding:13px 17px;border:2px solid #1e2c10;box-shadow:5px 5px 0 #687c47}.ticker{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#1a2318;padding:17px 22px;margin-top:22px;gap:20px;font:11px var(--mono)}.ticker span{color:var(--muted)}.ticker b{color:var(--acid);font-size:11px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin:4px 0 28px}.section-head h1{font-size:34px;margin:6px 0 0;letter-spacing:-1px}.section-head p{font-size:12px;color:var(--muted);margin:8px 0 0}.section-index{font:10px var(--mono);color:var(--acid);letter-spacing:2px}.stepper{display:flex;gap:24px;font:10px var(--mono);color:#657160}.stepper .active{color:var(--acid)}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.mode-card{position:relative;text-align:left;border:1px solid var(--line);padding:25px;min-height:230px;overflow:hidden;background:linear-gradient(145deg,#27312488,#161b1600);transition:all .2s}.mode-card:hover{border-color:var(--acid);transform:translateY(-3px);background:#273222}.mode-num{font:10px var(--mono);letter-spacing:2px;color:var(--acid)}.mode-icon{font:60px var(--mono);color:#c8e995;line-height:1;margin:18px 0}.mode-card h2{font-size:21px;margin:0 0 8px}.mode-card p{font-size:11px;color:var(--muted);line-height:1.7;margin:0;max-width:220px}.mode-card .arrow{position:absolute;right:22px;bottom:24px;font:28px var(--mono);color:var(--acid)}.mode-note{margin:20px 0;font-size:12px;color:var(--muted);line-height:1.8}.select-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px}.roster-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;align-content:start}.fighter-card{padding:0;text-align:left;position:relative;height:142px;overflow:hidden;border:1px solid var(--line);background:#242c24;transition:all .15s}.fighter-card:hover{border-color:#b3d378}.fighter-card.selected{border:2px solid var(--acid);box-shadow:0 0 16px #c0ea5120}.fighter-card.p2{border-color:var(--orange)}.fighter-card img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:saturate(.45) brightness(.8);transition:.2s}.fighter-card:hover img,.fighter-card.selected img{filter:saturate(.8) brightness(1)}.fighter-card:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#071008f5)}.fighter-card .f-name{position:absolute;bottom:9px;left:10px;right:2px;font-size:12px;font-weight:700;z-index:1}.fighter-card .f-index{position:absolute;left:8px;top:8px;font:9px var(--mono);color:#fff;background:#182313b0;padding:3px 5px}.fighter-card .selected-tag{position:absolute;right:0;top:0;font:9px var(--mono);padding:4px 7px;background:var(--acid);color:#161e12;z-index:2}.fighter-detail{border:1px solid var(--line);background:#1c241b;min-height:540px;padding:20px;position:relative}.detail-image{height:210px;position:relative;overflow:hidden;margin:-20px -20px 15px;background:radial-gradient(ellipse,#576d3930,#161d17);border-bottom:1px solid var(--line)}.detail-image canvas{width:100%;height:100%}.detail-image .portrait-inset{position:absolute;right:12px;bottom:12px;width:63px;height:77px;border:1px solid #728068;object-fit:cover;object-position:top;filter:saturate(.6)}.detail-id{font:9px var(--mono);color:var(--acid);letter-spacing:2px}.fighter-detail h2{margin:7px 0 6px;font-size:26px}.role{font-size:10px;color:var(--muted);margin-bottom:20px}.skill-row{border-top:1px solid var(--line);padding:12px 0}.skill-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.skill-row p{font-size:10px;line-height:1.75;color:var(--muted);margin:7px 0 0}.key{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border:1px solid #57614f;background:#232d1f;box-shadow:0 2px 0 #070d06;font:11px var(--mono);color:var(--acid)}.stat-row{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted);padding:6px 0}.selection-bar{display:flex;justify-content:space-between;align-items:center;margin-top:21px;border-top:1px solid var(--line);padding-top:20px;gap:15px}.selection-slots{display:flex;gap:25px;font-size:12px;align-items:center}.selection-slots b{display:block;color:var(--acid);font:9px var(--mono);margin-bottom:5px}.selection-slots .vs{font:italic 700 22px var(--mono);color:#66715e}.selection-slots .second b{color:var(--orange)}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stage-card{border:1px solid var(--line);padding:0;text-align:left;background:#1d261d}.stage-card.selected{border:2px solid var(--acid)}.stage-card canvas{width:100%;aspect-ratio:2.4;display:block}.stage-info{padding:16px}.stage-info h2{font-size:16px;margin:4px 0 9px}.stage-info p{font-size:10px;color:var(--muted);line-height:1.5}.stage-tag{font:9px var(--mono);letter-spacing:1px;color:var(--acid)}.stage-bottom{display:flex;justify-content:space-between;margin-top:22px;align-items:center}.field{display:flex;flex-direction:column;gap:8px;margin:15px 0;font-size:11px;color:var(--muted)}input,select{background:#111b12;color:var(--ink);border:1px solid #475540;padding:12px 14px;min-width:0}input::placeholder{color:#68755f}.lobby-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel{border:1px solid var(--line);background:#1b231a;padding:24px}.panel h2{margin:0 0 16px;font-size:22px}.panel p{font-size:12px;color:var(--muted);line-height:1.8}.room-code{font:700 42px var(--mono);color:var(--acid);letter-spacing:8px;margin:24px 0}.room-player{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding:13px 0;font-size:13px}.room-player img{width:42px;height:46px;object-fit:cover}.room-player span{margin-left:auto;font:10px var(--mono);color:var(--acid)}.room-empty{padding:22px 0;color:#718169;border-top:1px dashed #3c4934;font-size:12px}.battle-screen{padding-top:0!important}.battle-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font:10px var(--mono);color:var(--muted)}.battle-top b{color:var(--acid)}.arena-wrap{position:relative;border:1px solid #4b5b3e;background:#101511;max-width:1440px;margin:auto;overflow:hidden;box-shadow:0 24px 60px #0006}.arena-wrap canvas{display:block;width:100%;aspect-ratio:16/9}.arena-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10px;color:#aab79d;margin:15px auto 0;max-width:1440px}.arena-controls .group{display:flex;gap:8px;align-items:center}.pause-layer,.results-layer{position:absolute;inset:0;background:#0b120bce;backdrop-filter:blur(9px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:10}.pause-layer h2,.results-layer h2{font-size:48px;margin:12px 0 18px;color:var(--acid);font-weight:900}.pause-layer p,.results-layer p{font-size:13px;color:var(--muted);line-height:1.8}.results-stat{display:flex;gap:30px;margin:20px 0 25px}.results-stat strong{font:24px var(--mono);color:var(--ink)}.results-stat span{display:block;margin-top:5px;font-size:10px;color:var(--muted)}.touch-controls{display:none}.tutorial-strip{margin:20px 0;border:1px solid var(--line);padding:18px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}dialog{background:#1b241a;color:var(--ink);border:1px solid #657255;padding:32px;width:min(720px,94vw);max-height:88vh}dialog::backdrop{background:#060b07d9;backdrop-filter:blur(8px)}.close-modal{position:absolute;right:14px;top:12px;color:var(--muted);font-size:20px}dialog h2{margin:0 0 8px;font-size:25px}dialog p{font-size:12px;color:var(--muted);line-height:1.9}dialog table{border-collapse:collapse;width:100%;font-size:12px;margin:20px 0}dialog td,dialog th{text-align:left;border-bottom:1px solid var(--line);padding:10px 7px}dialog th{font-size:10px;color:var(--acid)}dialog .song-row{display:flex;gap:10px;align-items:center;margin:16px 0}dialog .song-row img{width:45px;height:52px;object-fit:cover}dialog .song-row .song-info{flex:1;min-width:0}dialog .song-row strong{font-size:12px}dialog .song-row small{display:block;font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px}input[type=range]{padding:0;accent-color:var(--acid);width:100%}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--acid);color:#16220f;z-index:100;padding:13px 22px;font-size:12px;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.loading{min-height:400px;display:grid;place-items:center;color:var(--acid);font:12px var(--mono)}.error-box{border:1px solid #9f5e50;background:#412920;padding:20px;font-size:13px}.settings-row{display:flex;align-items:center;gap:22px;margin:22px 0;font-size:12px}.settings-row label{min-width:100px}.badge{font:9px var(--mono);padding:5px 8px;background:#c9ec6720;color:var(--acid);border:1px solid #c9ec6740}.roster-head-extra{display:flex;align-items:center;gap:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:1600px){main{padding-left:calc((100vw - 1440px)/2);padding-right:calc((100vw - 1440px)/2)}.fighter-card{height:167px}.hero{min-height:630px}.hero-art{min-height:630px}}
@media(max-width:1100px){header{padding:0 25px;gap:15px}nav{gap:16px}.build{display:none}main{padding:25px}.select-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.fighter-card{height:120px}.fighter-card .f-name{font-size:10px}.hero-art{min-height:480px}.hero-copy{padding-top:20px}.hero{min-height:500px}.hero-meta{margin-top:27px}.mode-card{min-height:215px}.fighter-detail{padding:16px}.detail-image{margin:-16px -16px 14px;height:180px}}
@media(max-width:760px){header{height:75px;padding:0 18px}.brand{font-size:14px}.brand-sub{font-size:7px}nav{gap:13px}nav button{font-size:10px}nav #rosterNav,nav #settingsNav{display:none}main{padding:20px 16px}.hero{grid-template-columns:1fr}.hero-copy{padding-top:0}.hero h1{font-size:52px}.hero-art{min-height:320px;margin-top:20px}.hero-meta{margin-top:25px}.hero-desc{max-width:100%}.hero .eng{font-size:26px}.art-topline{left:0}.hero-art:before{font-size:220px}.ticker{font-size:9px;padding:13px}.ticker span:nth-child(2){display:none}.mode-grid{grid-template-columns:1fr 1fr;gap:10px}.mode-card{padding:18px;min-height:205px}.mode-card h2{font-size:18px}.mode-card p{font-size:10px}.mode-icon{font-size:44px}.select-layout{display:flex;flex-direction:column-reverse}.fighter-detail{min-height:0;display:grid;grid-template-columns:120px 1fr;gap:0 16px}.detail-image{grid-row:1/8;height:240px;margin:0}.detail-image .portrait-inset{width:40px;height:50px;right:5px;bottom:5px}.fighter-detail h2{font-size:20px}.skill-row{padding:8px 0}.skill-row p{font-size:9px}.fighter-detail .stat-row,.fighter-detail .role{display:none}.fighter-card{height:108px}.roster-grid{gap:6px}.stage-grid{grid-template-columns:1fr 1fr}.stage-info{padding:12px}.stage-info p{font-size:9px}.section-head h1{font-size:26px}.stepper{gap:12px;font-size:8px}.section-head{margin-bottom:20px}.lobby-layout{grid-template-columns:1fr}.selection-slots{gap:12px;font-size:10px}.selection-bar .btn{padding:13px 15px;font-size:11px}.arena-controls{font-size:8px}.arena-controls .key{height:18px;min-width:18px;font-size:9px}.battle-screen{padding-left:6px!important;padding-right:6px!important}.battle-top{font-size:8px}.touch-controls{display:flex;justify-content:space-between;margin-top:12px;touch-action:none;user-select:none}.touch-controls button{min-width:42px;min-height:42px;border:1px solid #566544;background:#263322;margin:2px;font-size:12px}.touch-controls button:active{background:var(--acid);color:#16200f}.pause-layer h2,.results-layer h2{font-size:30px}.results-stat{margin:10px 0;gap:20px}footer{padding:17px;font-size:7px}footer span:last-child{display:none}.hero .eyebrow{font-size:9px}.tutorial-strip{font-size:10px;line-height:1.8;gap:20px}}
.expression-strip{display:flex;gap:7px;margin:0 0 17px}.expression-strip button{flex:1;padding:0;min-width:0}.expression-strip canvas{width:100%;aspect-ratio:1;display:block;border:1px solid #526043;image-rendering:pixelated}.expression-strip button:hover canvas{border-color:var(--acid)}.expression-strip span{display:block;font-size:9px;color:var(--muted);padding-top:5px}.face-study{display:grid;grid-template-columns:1fr 1fr;gap:18px}.face-study img,.face-study canvas{width:100%;aspect-ratio:1;object-fit:contain;background:#111820;display:block}.face-study canvas{image-rendering:pixelated}.face-study small{display:block;text-align:center;font:9px var(--mono);color:var(--acid);padding-top:10px}.fighter-card[data-char="tiger"] img{object-position:50% 0%}.fighter-card[data-char="prince"] img{object-position:50% 45%}
@media(max-width:760px){.expression-strip{grid-column:2;margin:0 0 12px}.expression-strip canvas{max-width:48px}.expression-strip span{font-size:8px}.selection-bar{flex-wrap:wrap}.selection-slots{flex-wrap:wrap}.face-study{gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}