@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#080c17;--muted:#8992a8;--blue:#6e9bff;--pink:#ff688d;--line:#242b3e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#141c36 0,transparent 65%),var(--bg);color:#f3f5ff;font-family:Outfit,'Noto Sans KR',sans-serif}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:#161c2d;border-radius:6px;transition:.2s}button:hover{background:#27324c;border-color:#8099d2}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #a2beff;outline-offset:4px}button:active{transform:translateY(1px)}header{height:92px;border-bottom:1px solid #202637;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,24px)}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:15px;font-size:17px;letter-spacing:2px;font-weight:800}.brand b{color:#9ca8c5}.brand small{display:block;font-size:10px;letter-spacing:3px;font-weight:400;color:#8792ad;margin-top:5px}.monogram{font-size:37px;font-weight:900;font-style:italic;letter-spacing:-12px;width:48px;color:#91adff}.monogram span{color:#ff829e}.head-right{display:flex;align-items:center;gap:12px}.edition{font-size:10px;letter-spacing:2px;color:#6e7a95;margin-right:18px}.icon-button{background:transparent;padding:9px 13px;font-size:12px}kbd{font:600 12px Outfit,sans-serif;display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:27px;border:1px solid #38415a;border-bottom:3px solid #38415a;border-radius:5px;background:#1c2436;color:#dfe5f5}.icon-button kbd{min-width:18px;height:19px;font-size:10px;margin-left:4px}main{max-width:1440px;margin:auto;padding:30px 48px 0}.intro{display:flex;align-items:end;justify-content:space-between;margin:0 0 25px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#97a8cb}.eyebrow i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9faeff;box-shadow:0 0 12px #647afc;margin-right:8px}h1{font-size:25px;margin:10px 0 0;font-weight:700;letter-spacing:-1px}h1 em{font-style:normal;color:#9ca7bf}.online{font-size:11px;color:#77849f}.online span{color:#78c8b0;font-size:8px;margin-left:12px}.arcade{position:relative;aspect-ratio:16/9;border:1px solid #3b4662;border-radius:10px;overflow:hidden;background:#101b31;box-shadow:0 20px 90px #0006}canvas{width:100%;height:100%;display:block;outline:none}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#0000000a 3px 4px);opacity:.4}.selection{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px 18px 12px;background:radial-gradient(ellipse at 12% 50%,rgba(0,160,255,.24) 0,transparent 55%),radial-gradient(ellipse at 88% 50%,rgba(255,30,90,.24) 0,transparent 55%),radial-gradient(circle at 50% 15%,rgba(25,38,70,.6) 0,#060913 90%);overflow:hidden;z-index:20;user-select:none}
.select-top-bar{display:flex;flex-direction:column;align-items:center;position:relative;z-index:10;margin-bottom:6px}
.select-title-wrap{position:relative}
.select-title-logo{height:54px;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(0,180,255,.45))}
.select-turn-indicator{display:flex;align-items:center;gap:12px;background:rgba(10,16,32,.85);border:1px solid #283754;border-radius:20px;padding:3px 18px;font-size:11px;margin-top:2px;box-shadow:0 4px 15px rgba(0,0,0,.6)}
.indicator-step{display:flex;align-items:center;gap:6px;opacity:.4;transition:opacity .2s,color .2s;color:#8fa0c2}
.indicator-step.active{opacity:1}
.p1-step.active{color:#00d2ff;text-shadow:0 0 8px rgba(0,210,255,.8)}
.p2-step.active{color:#ff2a6d;text-shadow:0 0 8px rgba(255,42,109,.8)}
.indicator-arrow{color:#435579;font-size:9px}
.select-main-content{display:grid;grid-template-columns:250px 1fr 250px;gap:16px;flex:1;min-height:0;align-items:stretch}
.player-preview-card{background:linear-gradient(180deg,rgba(15,22,40,.8) 0,rgba(8,12,24,.9) 100%);border:1px solid #283754;border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.7);transition:border-color .2s,box-shadow .2s;cursor:pointer}
.player-preview-card:hover{border-color:#485e88}
.p1-preview-card.active-turn{border-color:#00d2ff;box-shadow:0 0 25px rgba(0,210,255,.3),inset 0 0 15px rgba(0,210,255,.1)}
.p2-preview-card.active-turn{border-color:#ff2a6d;box-shadow:0 0 25px rgba(255,42,109,.3),inset 0 0 15px rgba(255,42,109,.1)}
.preview-header{position:relative;z-index:3}
.preview-header.right-align{text-align:right}
.preview-player-tag{font-size:12px;font-weight:900;font-style:italic;letter-spacing:2px}
.preview-player-tag.p1-tag{color:#00d2ff;text-shadow:0 0 10px #00d2ff}
.preview-player-tag.p2-tag{color:#ff2a6d;text-shadow:0 0 10px #ff2a6d}
.preview-name{font-size:27px;font-weight:900;letter-spacing:-1px;margin:2px 0 3px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.preview-sub-info{display:flex;flex-direction:column;gap:1px}
.preview-type{font-size:9px;letter-spacing:1.5px;color:#8ba0c5;font-weight:700}
.preview-skill{font-size:10px;color:#cfdcff;font-weight:600}
.preview-body-container{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:6px 0}
.p1-aura-wrap::before{content:'';position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 50%,rgba(0,180,255,.35) 0,rgba(0,80,220,.15) 50%,transparent 72%);filter:blur(14px);z-index:1;animation:pulse-aura 3s infinite alternate ease-in-out}
.p2-aura-wrap::before{content:'';position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 50%,rgba(255,42,109,.35) 0,rgba(180,10,60,.15) 50%,transparent 72%);filter:blur(14px);z-index:1;animation:pulse-aura 3s infinite alternate ease-in-out}
@keyframes pulse-aura{0%{transform:scale(.94);opacity:.7}100%{transform:scale(1.06);opacity:1}}
.preview-full-img{position:relative;z-index:2;height:100%;max-height:330px;object-fit:contain;transition:transform .2s ease,filter .2s ease}
.p1-aura-wrap .preview-full-img{filter:drop-shadow(0 0 14px rgba(0,210,255,.65)) drop-shadow(0 0 28px rgba(0,110,255,.4))}
.p2-aura-wrap .preview-full-img{transform:scaleX(-1);filter:drop-shadow(0 0 14px rgba(255,42,109,.65)) drop-shadow(0 0 28px rgba(200,0,50,.4))}
.preview-bottom-action{position:relative;z-index:3;display:flex;justify-content:center}
.ready-badge{font-size:14px;font-weight:900;font-style:italic;letter-spacing:2px;padding:6px 24px;border-radius:4px;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.8);box-shadow:0 4px 15px rgba(0,0,0,.6);width:100%}
.p1-ready-badge{background:linear-gradient(135deg,#00d2ff,#0066cc);border:1px solid #73e6ff;color:#fff;box-shadow:0 0 16px rgba(0,210,255,.7)}
.p2-ready-badge{background:linear-gradient(135deg,#ff2a6d,#990033);border:1px solid #ff80a6;color:#fff;box-shadow:0 0 16px rgba(255,42,109,.7)}
.roster-center-column{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.roster-grid-10{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:8px;flex:1;align-items:center}
.select-card{position:relative;aspect-ratio:140/220;border-radius:7px;overflow:hidden;border:2px solid #2f3c57;background:#0d1424;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .18s ease;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.select-card:hover{transform:translateY(-3px) scale(1.02);border-color:#657da9;box-shadow:0 8px 20px rgba(0,0,0,.8);z-index:4}
.select-card.selected-p1{border:3.5px solid #00d2ff!important;box-shadow:0 0 20px rgba(0,210,255,.9),inset 0 0 10px rgba(0,210,255,.5)!important;transform:scale(1.03);z-index:3}
.select-card.selected-p1 .p1-badge{display:flex!important}
.select-card.selected-p2{border:3.5px solid #ff2a6d!important;box-shadow:0 0 20px rgba(255,42,109,.9),inset 0 0 10px rgba(255,42,109,.5)!important;transform:scale(1.03);z-index:3}
.select-card.selected-p2 .p2-badge{display:flex!important}
.select-card.selected-both{border:3.5px solid #c054f7!important;box-shadow:0 0 20px rgba(0,210,255,.8),0 0 20px rgba(255,42,109,.8)!important;transform:scale(1.04);z-index:5}
.select-card.selected-both .p1-badge{display:flex!important}
.select-card.selected-both .p2-badge{display:flex!important;left:auto;right:4px}
.select-card.locked{filter:brightness(.75) saturate(.85)}
.card-badges{position:absolute;top:4px;left:4px;right:4px;display:flex;justify-content:space-between;pointer-events:none;z-index:6}
.p-badge{display:none;font-size:11px;font-weight:900;font-style:italic;padding:2px 7px;color:#fff;border-radius:3px;letter-spacing:.5px;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.p1-badge{background:linear-gradient(135deg,#00d2ff,#0066cc);box-shadow:0 0 10px #00d2ff;border:1px solid #80e8ff;clip-path:polygon(0 0,100% 0,85% 100%,0 100%);padding-right:9px}
.p2-badge{background:linear-gradient(135deg,#ff2a6d,#b3003b);box-shadow:0 0 10px #ff2a6d;border:1px solid #ffa3be;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);padding-left:9px}
.card-img-wrap{position:relative;width:100%;height:100%;display:flex}
.card-sprite{width:100%;height:100%;object-fit:cover;display:block}
.lock-overlay{position:absolute;inset:0;background:rgba(4,7,18,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.lock-icon{font-size:20px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.lock-overlay small{font-size:8px;font-weight:800;letter-spacing:1.5px;color:#f0ad4e;background:rgba(0,0,0,.7);padding:1px 5px;border-radius:3px;border:1px solid #f0ad4e66}
.select-notice{background:rgba(20,28,48,.92);border:1px solid #57709b;border-radius:6px;padding:7px 12px;font-size:11px;color:#ffde80;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.6);margin:4px 0}
.select-bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;background:rgba(12,18,34,.7);border:1px solid #23314c;border-radius:6px;padding:6px 12px}
.match-options{display:flex;gap:12px;align-items:center}
.match-options label{font-size:10px;color:#8e9bb8;display:flex;gap:7px;align-items:center;font-weight:600}
.match-options select{background:#171e31;border:1px solid #38425e;border-radius:4px;padding:5px 12px;font-size:11px;color:#e6eeff}
.arcade-start-button{margin-left:auto;padding:8px 24px;border:0;border-radius:5px;background:linear-gradient(135deg,#00d2ff,#ff2a6d);box-shadow:0 0 20px rgba(0,210,255,.4),0 0 20px rgba(255,42,109,.4);color:#fff;font-weight:900;font-style:italic;font-size:13px;letter-spacing:1px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform .15s,filter .15s}
.arcade-start-button:hover{transform:scale(1.04);filter:brightness(1.15);box-shadow:0 0 30px rgba(0,210,255,.6),0 0 30px rgba(255,42,109,.6)}
.arcade-start-button i{font-style:normal;font-size:14px}
.stage-caption{position:absolute;bottom:13px;left:22px;font-size:8px;letter-spacing:2px;color:#b9c7da;pointer-events:none}.stage-caption span{color:#8594ae;margin-right:12px}.selection:not(.hidden)~.stage-caption{display:none}.game-footer{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;font-size:10px}.game-footer b{letter-spacing:1px;font-weight:600}.game-footer #statusDesc{color:#7f8ba5;margin-left:16px}.game-footer button{border:0;background:transparent;color:#9ca8be;font-size:11px}.controls{display:flex;justify-content:space-between;gap:20px;padding:22px 0}.control-group,.control-group>div{display:flex;align-items:center;gap:6px}.control-group{gap:18px}.control-group span{font-size:11px;color:#8997b0;margin-left:3px}.notes{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;border-top:1px solid var(--line);padding:30px 0 35px;margin-top:10px}.notes h2{font-size:22px;line-height:1.5;font-weight:600;margin:10px 0}.notes h3{font-size:13px;font-weight:600;margin:13px 0 9px}.notes p{font-size:11px;line-height:1.9;color:#7b88a2}.note-number{font-size:11px;color:#697d9f}footer{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1px;color:#67758f}footer small{margin-left:8px;font-size:9px;letter-spacing:0}footer a{color:#9ba8bd}.hidden{display:none!important}.hud{position:absolute;inset:0;pointer-events:none;padding:30px;display:flex;gap:20px}.health{width:44%;height:75px}.fighter-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.fighter-label b{font-size:22px;font-style:italic;text-shadow:2px 2px #000}.fighter-label span{font-size:9px;letter-spacing:2px;color:#d8e7ff}.health-track{border:2px solid #e9c66c;background:#231a29;height:22px;transform:skew(-12deg);padding:2px;box-shadow:0 3px 12px #0008}.health-track>div{height:100%;width:100%;background:linear-gradient(0deg,#e88f29,#ffde64 50%,#fff2a6);transition:width .15s}.right .health-track{transform:skew(12deg);display:flex;justify-content:flex-end}.wins{font-size:20px;color:#ffdd80;letter-spacing:7px;margin-top:5px}.right .wins{text-align:right}.timer{text-align:center;flex-shrink:0;width:76px;height:80px;clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%);background:#111b38;border:1px solid #6b8dc8;padding-top:9px}.timer small{font-size:9px;font-style:italic}.timer b{display:block;font-size:40px;line-height:1.1;color:#fff0ac}.power{position:absolute;bottom:38px;width:30%;text-shadow:1px 2px #000}.ppower{left:30px}.epower{right:30px;text-align:right}.power>span{font-size:10px;font-weight:800;font-style:italic;letter-spacing:2px}.power>div{height:12px;transform:skew(-15deg);background:#080e26;border:1px solid #8697cf;margin-top:4px;padding:2px}.power i{display:block;background:linear-gradient(90deg,#467bff,#c0dbff);height:100%;width:0}.epower i{background:linear-gradient(90deg,#dc366d,#ffa7c0)}.power small{font-size:9px;color:#d2dfff;display:block;margin-top:5px}.pause-button{pointer-events:auto;position:absolute;top:130px;right:30px;font-size:20px;width:34px;background:#07102b99}.move-label{position:absolute;top:130px;left:30px;color:#fff;font-size:18px;font-style:italic;font-weight:800;text-shadow:0 0 16px #6d8fff}.message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-style:italic;font-size:clamp(35px,8vw,110px);font-weight:900;letter-spacing:-4px;color:#ffdf80;text-shadow:4px 5px #201221,-2px -2px #fff1a1,0 0 45px #fa762b}.modal-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;max-width:90%;padding:32px;background:#0d1527ef;border:1px solid #61739b;box-shadow:0 0 0 100vmax #030817aa;border-radius:9px;text-align:center}.modal-panel h2{font-size:32px;margin:12px 0 20px}.modal-panel p{font-size:12px;color:#a6b5d1;line-height:1.8}.modal-panel button{display:block;width:100%;padding:12px;margin-top:10px;font-size:12px}.primary{background:#97b8ff;color:#0d1b35;border:0;font-weight:800;padding:12px 20px}.touch-controls{display:none;justify-content:space-between;gap:12px;margin:14px 0;touch-action:none;user-select:none}.touch-controls button{width:52px;height:48px;font-size:12px;touch-action:none}.dpad,.attackpad{display:flex;gap:5px}.attackpad button{background:#253963}.attackpad button:last-child{background:#59314e}dialog{border:1px solid #54688d;border-radius:12px;background:#111a2d;color:#edf2ff;padding:35px;max-width:560px;width:90%;line-height:1.8}dialog::backdrop{background:#020613bb;backdrop-filter:blur(6px)}dialog h2{font-size:23px}dialog p{font-size:13px;color:#c0cce2}dialog .muted{font-size:11px;color:#8696b1}.close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:25px}
@media(min-width:1500px){main{padding-top:38px}}
@media(max-width:1050px){
main{padding:25px 24px 0}
.select-main-content{grid-template-columns:190px 1fr 190px;gap:10px}
.preview-name{font-size:22px}
.preview-full-img{max-height:260px}
.select-title-logo{height:44px}
.edition{display:none}.controls{gap:10px}.control-group{gap:10px}.control-group span{font-size:10px}
.notes{gap:22px}.online{display:none}.touch-controls{display:flex}.head-right{gap:6px}
}
@media(max-width:760px){
header{height:72px;padding:0 16px}
.brand{font-size:12px;gap:9px}.brand small{font-size:8px}.monogram{font-size:30px;width:37px}
.icon-button{font-size:10px;padding:7px 9px}.icon-button kbd{display:none}
main{padding:20px 12px 0}h1{font-size:18px}.intro{margin-bottom:18px}.eyebrow{font-size:8px}
.arcade{aspect-ratio:4/3}.arcade canvas{object-fit:fill}
.select-screen{padding:8px 8px 10px}
.select-title-logo{height:34px}
.select-turn-indicator{font-size:9px;padding:2px 10px}
.select-main-content{grid-template-columns:1fr;gap:6px}
.player-preview-card{display:none}
.roster-grid-10{gap:5px}
.select-card{aspect-ratio:140/215}
.select-bottom-bar{padding:4px 8px;gap:6px}
.match-options label{font-size:9px}
.match-options select{font-size:9px;padding:3px 6px}
.arcade-start-button{font-size:11px;padding:6px 14px}
.controls{display:none}.game-footer #statusDesc{display:none}.game-footer{font-size:8px}
.touch-controls button{width:39px;height:44px;font-size:10px}
.notes{grid-template-columns:1fr 1fr;gap:20px}.notes h2{font-size:18px}.notes h3{font-size:12px}.notes p{font-size:10px}
footer{flex-wrap:wrap;gap:12px;font-size:8px}footer>span:last-child{display:none}
.hud{padding:15px;gap:8px}.fighter-label b{font-size:14px}.fighter-label span{font-size:7px}
.health-track{height:14px}.timer{width:48px;height:55px;padding-top:5px}.timer small{font-size:7px}.timer b{font-size:28px}.wins{font-size:13px}
.power{bottom:22px}.ppower{left:15px}.epower{right:15px}.power>span{font-size:7px}.power small{font-size:7px}
.pause-button{right:14px;top:90px;font-size:13px;width:28px}.move-label{top:90px;left:15px;font-size:12px}
.stage-caption{font-size:6px;bottom:7px;left:15px}.modal-panel{padding:20px;width:280px}.modal-panel h2{font-size:24px;margin:7px 0}.modal-panel button{padding:8px;margin-top:7px}.modal-panel p{margin:6px 0}
}