/* UNDERGROUND RUMBLE 02 — glacier-blue / ink / photocopied club posters */
:root{--bg:#070c13;--panel:#111c29;--line:#2b424f;--ink:#e7f0ef;--muted:#809daa;--acid:#91cfda;--orange:#c6a8da;--mono:Consolas,'Courier New',monospace}
body{background:#070c13;color:var(--ink)}
#app{background:radial-gradient(ellipse at 85% 6%,#346c8434,transparent 48%),linear-gradient(135deg,transparent 55%,#11243565 55.1%,transparent 75%);overflow:hidden;isolation:isolate}
#app:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.10;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}
header{height:76px;border-bottom:1px solid #42657466;background:#060b12b5;gap:20px}
.brand-symbol{color:#a8e5ec;font-size:43px}.brand{letter-spacing:-.5px}.brand-sub{color:#91b1bf;letter-spacing:2px}
nav{gap:24px}nav button{color:#a1b4bc;transition:color .12s}nav button:hover{color:#d0f5fa}.build{color:#7896a3}.build b{color:#b4dfe7}
main{padding-top:27px;padding-bottom:24px}
footer{background:#070b1166;border-color:#29414d88;padding-top:17px;padding-bottom:17px;color:#688997}
.eyebrow{font-weight:700;letter-spacing:3px;color:#9bddE8}
.hero{grid-template-columns:45% 55%;min-height:610px;position:relative}
.hero:after{content:'地下 / 亂鬥';position:absolute;bottom:4px;right:0;writing-mode:vertical-rl;font-weight:900;font-size:11px;letter-spacing:7px;color:#81c8d875;border-right:2px solid #74b2c3;padding-right:12px}
.hero-copy{padding-top:52px}
.hero h1{font-size:clamp(42px,4.8vw,80px);font-weight:950;line-height:1.01;letter-spacing:-4px;transform:skew(-5deg);text-shadow:4px 4px 0 #193d50}
.hero h1 em{color:#a5dce5}
.hero .eng{font-size:clamp(26px,3.2vw,49px);line-height:.94;letter-spacing:-3px;-webkit-text-stroke:1px #759eac;color:transparent;margin-top:20px}
.hero-desc{font-size:14px;letter-spacing:2px;color:#9db6c0;margin:30px 0 27px;line-height:1.8}
.hero-art{min-height:590px;overflow:visible;background:radial-gradient(ellipse at 50% 60%,#32748a50,transparent 68%)}
.hero-art:before{content:'無\00a0 界';font-size:240px;line-height:1;top:58px;left:-2%;color:#7caabb08;-webkit-text-stroke:1px #75a7bc38;transform:rotate(-13deg) skew(-10deg);letter-spacing:-24px}
.hero-art:after{content:'';position:absolute;inset:4% 0 7% 12%;border:1px solid #729cba26;transform:skew(-12deg);pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 28px,#8dbeca0b 29px)}
.hero-art canvas{z-index:1}
.art-topline{z-index:2;top:16px;left:22px;color:#78a6b9;font-size:9px;letter-spacing:2px}
.art-sticker{z-index:3;bottom:23px;right:26px;background:#b0dce2;border:0;color:#0b1a23;box-shadow:7px 7px 0 #1e4d64;transform:rotate(-7deg);font-size:11px;padding:14px 19px}
.hero-meta{max-width:370px;margin-top:34px;padding-top:20px;gap:34px;border-color:#40667866}
.hero-meta strong{font-size:29px;color:#ddeef0}.hero-meta span{font-size:10px;color:#739bab;letter-spacing:2px}
.btn{position:relative;min-height:46px;border-color:#537985;padding:14px 22px;font-size:12px;letter-spacing:1px;border-radius:0;transform:skew(-5deg);transition:transform .12s,background .12s,box-shadow .12s,color .12s}
.btn:hover{background:#1a3545;transform:skew(-5deg) translateY(-2px);box-shadow:3px 4px 0 #51788b55}
.btn:active{transform:skew(-5deg) translateY(1px);box-shadow:0 0 18px #a5eaf333}
.btn.primary{background:#a7d9e0;border-color:#b9e9ed;color:#0b1822;box-shadow:4px 4px 0 #2e5e70}
.btn.primary:hover{background:#c6f0f3;box-shadow:5px 6px 0 #3b8399}.btn.small{font-size:10px;min-height:34px;padding:9px 13px;box-shadow:none}
.ticker{margin-top:6px;background:#0e1d29;border-color:#335263;padding:15px 18px;transform:skew(-2deg)}
.ticker b{font-size:10px;letter-spacing:2px}.ticker span{font-size:10px;color:#6992a3}
.section-head{align-items:center;margin:0 0 23px;border-left:3px solid #9dd6e0;padding-left:16px}
.section-head h1{font-size:34px;letter-spacing:-1px;font-style:italic;margin-top:6px}
.section-head p{font-size:11px;letter-spacing:1px;margin-top:8px}.section-index{font-size:9px;letter-spacing:3px;color:#9ccdd8}
.stepper{gap:23px;color:#486573;letter-spacing:1px}
.mode-grid{gap:16px}.mode-card{background:linear-gradient(145deg,#1b36499c,#0d17218c);border-color:#345060;min-height:214px;padding:24px;clip-path:polygon(0 0,94% 0,100% 9%,100% 100%,0 100%);transition:transform .14s,background .14s,border-color .14s}
.mode-card:before{content:attr(data-mode);position:absolute;right:-12px;top:42px;transform:rotate(-14deg);font:900 54px var(--mono);text-transform:uppercase;letter-spacing:-5px;color:#c1e6ed08;pointer-events:none}
.mode-card:after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:#b5e5eb;transition:width .15s}
.mode-card:hover{border-color:#a3dbe5;background:#1b3749;transform:translateY(-4px)}.mode-card:hover:after{width:100%}
.mode-icon{font-size:51px;color:#94c4d5;margin:19px 0 14px;font-weight:900;letter-spacing:-4px}
.mode-card h2{font-size:22px;margin-bottom:8px}.mode-card p{font-size:10px;line-height:1.5;max-width:100%;color:#8faebb}
.mode-note{font-size:10px;color:#648b9e;line-height:1.7;margin:20px 0 2px}
.select-layout{grid-template-columns:minmax(0,1fr) 340px;gap:25px}
.roster-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fighter-card{height:151px;isolation:isolate;background:linear-gradient(135deg,#182c3b,#0b151f);border:1px solid #304e61;transition:transform .1s,box-shadow .1s,border .1s}
.fighter-card:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent 0,transparent 28px,#6693a10a 29px,#6693a10a 31px);z-index:-1}
.fighter-card canvas{display:block;width:100%;height:100%;image-rendering:pixelated;filter:brightness(.88);transition:filter .12s,transform .16s}
.fighter-card:hover{border-color:#92cbdb;z-index:2;transform:translateY(-3px)}
.fighter-card:hover canvas{filter:brightness(1.09);transform:scale(1.04)}
.fighter-card.selected{border:2px solid #b7ecf0;box-shadow:0 0 0 2px #487d94,0 0 25px #77c6e42b;z-index:3;background:linear-gradient(135deg,#315771,#0e2332)}
.fighter-card.selected canvas{filter:brightness(1.15)}
.fighter-card.p2{border-color:#c5b2db;box-shadow:0 0 0 2px #716284}
.fighter-card:after{inset:66% 0 0;background:linear-gradient(transparent,#060e19f0);z-index:1;pointer-events:none}
.fighter-card .f-name{font-size:11px;left:9px;bottom:8px;letter-spacing:.5px;text-shadow:0 1px 4px black}
.fighter-card .f-index{background:#081522b0;color:#93b9c8;font-size:8px;left:6px;top:6px;padding:2px 4px;z-index:1}
.fighter-card .selected-tag{background:#b2e4ec;color:#0a2537;padding:5px 7px;font-weight:900}
.fighter-card.pick-flash{animation:pickFlash .22s ease-out}
@keyframes pickFlash{0%{box-shadow:0 0 0 3px #b8edf4;transform:scale(1.025)}100%{box-shadow:0 0 0 0 #b8edf400;transform:scale(1)}}
.fighter-detail{padding:20px;background:linear-gradient(155deg,#1b3547,#0b151f 70%);border-color:#416478;min-height:0;position:relative}
.fighter-detail:before{content:'角色選擇';position:absolute;right:12px;top:24px;writing-mode:vertical-rl;letter-spacing:4px;font:9px var(--mono);color:#6c9cac;z-index:1}
.detail-image{height:315px;margin:-20px -20px 15px;background:radial-gradient(ellipse at 50% 65%,#4974874d,transparent 70%),repeating-linear-gradient(-45deg,#121f2b00 0,#121f2b00 35px,#729db510 35px,#729db510 36px);border-color:#36566b}
.detail-image:after{content:'選';position:absolute;left:12px;top:8px;font-weight:900;font-size:164px;line-height:1;color:#a6dbea08;-webkit-text-stroke:1px #91b5c514;pointer-events:none}
.detail-image canvas{position:relative;z-index:1}.detail-image .portrait-inset{display:none}
.detail-id{font-size:9px;letter-spacing:2px;color:#83c5d5}.fighter-detail h2{font-size:27px;font-style:italic;margin:8px 0}
.role{font-size:10px;margin-bottom:14px;color:#719aad;letter-spacing:1px}
.skill-row{padding:10px 0;border-color:#385269}.skill-label{font-size:12px;line-height:1.5;gap:7px}.skill-row p{font-size:10px;color:#9cb5c0;line-height:1.6;margin:7px 0 0}
.skill-row:last-of-type{padding-bottom:0}
.key{border-color:#496b80;background:#142a3b;color:#b7e1ec;box-shadow:0 2px 0 #040910}
.badge{background:#87c3d312;color:#a2cfdd;border-color:#719cac44;font-size:8px;padding:4px 7px}
.selection-bar{margin-top:17px;padding-top:16px;border-color:#294959;gap:12px}
.selection-slots{gap:18px;font-size:12px}.selection-slots button{padding:8px 12px;border-left:2px solid #729cb0;text-align:left;background:#1b304344;transition:background .12s}
.selection-slots b{color:#b2e0e9;letter-spacing:2px}.selection-slots .second b{color:#cbb5e0}
.expression-strip{margin:4px 0 14px;gap:7px}
.expression-strip canvas{border-color:#4b6a7d;background:#0b121b}.expression-strip span{font-size:8px;color:#7398aa}
.character-more{display:block;color:#8eb9c8;font-size:10px;margin-top:10px;text-align:right;width:100%;letter-spacing:1px}
.selection-hint{font:9px var(--mono);color:#587e91;margin:12px 0 0;letter-spacing:1px}
.stage-grid{gap:15px}.stage-card{background:#101d29;border-color:#345567;transition:transform .12s,border-color .12s}
.stage-card:hover{transform:translateY(-3px);border-color:#92c8d8}.stage-card.selected{border-color:#b4e5eb;box-shadow:0 0 0 2px #527c9450}.stage-info{padding:15px}.stage-info h2{font-size:16px}.stage-info p{margin-bottom:0;color:#7797a8}
input,select{background:#0b1622;border-color:#456479;color:#d8ebee}input::placeholder{color:#526f82}
.panel{background:#111f2c;border-color:#344f63}.room-player{border-color:#2d485c}.room-player img{display:none}.room-player canvas{width:49px;height:49px;image-rendering:pixelated}.room-empty{border-color:#294354;color:#587b8d}
.battle-top{font-size:9px;color:#7192a5;margin-bottom:9px}.battle-top b{color:#b7e1e9}
.arena-wrap{border-color:#456b81;box-shadow:0 20px 70px #0008}
.arena-controls{font-size:9px;color:#7497a7;margin-top:12px}
.pause-layer,.results-layer{background:#071321d6;backdrop-filter:blur(9px)}
.pause-layer h2,.results-layer h2{color:#b3e4e9;font-style:italic}.results-layer p,.pause-layer p{color:#8eacbb}
dialog{background:linear-gradient(135deg,#173043,#0e1a27);border-color:#648c9f;box-shadow:15px 15px 0 #0005}
dialog::backdrop{background:#020915d9}dialog td,dialog th{border-color:#345163}dialog h2{font-style:italic}
.face-study img,.face-study canvas{background:#111820}
#toast{background:#b1dfe8;color:#0d2636;box-shadow:4px 4px 0 #27485c;transform:translateX(-50%) translateY(20px) skew(-4deg)}
#toast.show{transform:translateX(-50%) translateY(0) skew(-4deg)}
.network-good{color:#a6deca}.network-medium{color:#dfc18d}.network-poor{color:#e099a9}
.nav-feedback{animation:navFlash .18s ease-out}
@keyframes navFlash{0%{filter:brightness(1.45)}100%{filter:brightness(1)}}
@media(min-width:1600px){.hero{min-height:650px}.hero-art{min-height:630px}.fighter-card{height:167px}.detail-image{height:350px}}
@media(max-width:1100px){header{height:70px}.hero h1{font-size:55px}.hero{min-height:550px}.hero-art{min-height:540px}.hero-copy{padding-top:34px}.select-layout{grid-template-columns:minmax(0,1fr) 290px;gap:17px}.fighter-card{height:135px}.detail-image{height:285px;margin:-16px -16px 14px}.fighter-detail{padding:16px}.fighter-detail h2{font-size:23px}}
@media(max-width:760px){header{height:65px;padding:0 16px}.brand{font-size:12px}.brand-symbol{font-size:34px}nav{gap:14px}.hero{min-height:0;grid-template-columns:1fr}.hero-copy{padding-top:15px}.hero h1{font-size:55px;letter-spacing:-3px}.hero .eng{font-size:33px}.hero-desc{font-size:12px;margin:20px 0}.hero-art{min-height:310px;margin-top:7px;overflow:hidden}.hero-art:before{font-size:195px;top:18px}.hero:after{display:none}.hero-meta{margin-top:26px;gap:30px}.hero-meta strong{font-size:24px}.art-topline{font-size:8px;left:12px}.art-sticker{font-size:9px;right:15px;bottom:15px}.ticker{font-size:8px}.ticker span{font-size:8px}.ticker b{font-size:8px;letter-spacing:1px}.section-head{padding-left:12px;gap:10px;margin-bottom:18px}.section-head h1{font-size:28px}.section-head p{font-size:10px;letter-spacing:0}.stepper{gap:9px;font-size:7px}.mode-grid{gap:10px}.mode-card{padding:17px;min-height:184px}.mode-card h2{font-size:18px}.mode-icon{font-size:42px}.mode-card p{font-size:9px}.mode-note{font-size:9px}.select-layout{display:flex;flex-direction:column-reverse;gap:14px}.fighter-detail{display:grid;grid-template-columns:120px 1fr;gap:0 13px;padding:13px}.detail-image{grid-row:1/8;height:238px;margin:0;overflow:hidden}.detail-image canvas{width:100%;height:100%;object-fit:contain}.detail-image:after{font-size:110px}.fighter-detail:before{display:none}.fighter-detail h2{font-size:20px;margin:5px 0 8px}.skill-row{padding:6px 0}.skill-label{font-size:10px;gap:5px}.skill-row p{font-size:9px;margin:4px 0}.expression-strip{display:none}.detail-id{font-size:8px;letter-spacing:1px}.fighter-detail .role{display:none}.character-more{font-size:9px;margin-top:7px}.roster-grid{gap:5px}.fighter-card{height:102px}.fighter-card .f-name{font-size:8px;left:4px;bottom:5px;letter-spacing:0}.fighter-card .f-index{font-size:7px;left:4px;top:4px;padding:1px 3px}.fighter-card .selected-tag{font-size:7px;padding:3px 4px}.selection-slots{gap:7px;font-size:10px}.selection-slots button{padding:6px 8px}.selection-slots b{font-size:8px}.selection-bar{margin-top:13px;padding-top:12px}.selection-bar .btn{padding:11px 13px;font-size:10px;min-height:38px}.selection-hint{font-size:8px}.stage-info{padding:11px}.stage-info h2{font-size:13px}.stage-info p{font-size:9px}.stage-bottom{gap:12px;align-items:center}.stage-bottom .btn{font-size:10px;padding:12px}.battle-top{font-size:7px;gap:6px}.battle-top .btn{font-size:9px;padding:8px;min-height:32px}.battle-top>.actions{gap:4px}.arena-controls{font-size:8px;gap:8px}.touch-controls>div{display:flex;flex-wrap:wrap;align-content:start;max-width:58%}.touch-controls>div:first-child{max-width:40%}.touch-controls button{background:#152c40;border-color:#40667f;min-width:42px;height:44px;touch-action:none}.touch-controls button:active{background:#b2e2eb;color:#102330;transform:translateY(2px)}footer{padding:15px;font-size:7px}.pause-layer h2,.results-layer h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.fighter-card.pick-flash,.nav-feedback{animation:none}*{transition:none!important}}


.cue-label{display:flex;align-items:center;gap:7px;font-size:11px;margin-top:8px;color:#a2c7d0}.cue-label input{width:66px;background:#0c1825;border:1px solid #47606b;color:#d8eef0;padding:5px}.cue-preview{border:1px solid #456371;background:#19303d;color:#c6eaf1;padding:4px 9px;cursor:pointer}
.fighter-card .f-name{color:#e4f0f3;text-shadow:0 2px 3px #000;background:linear-gradient(transparent,#030a13e8);padding:14px 9px 7px;left:0;right:0;bottom:0;font-size:12px}

.host-status{padding:12px 16px;border-left:2px solid #9ad6e1;background:#111f2b;color:#b4d6e0;font-size:12px}.room-avatar{width:54px;height:54px;border:1px solid #426473;object-fit:cover}