@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#101112;--panel:#191a1c;--line:#303134;--muted:#797b80;--ink:#edeeed;--accent:#ff6a35}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans SC',sans-serif;font-size:13px}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}header{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 4.5%;gap:24px}.brand{display:flex;gap:12px;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;line-height:.94;letter-spacing:1px}.brand-mark{font-size:39px;font-style:italic;letter-spacing:-6px;border:1px solid #666;padding:5px 11px 7px 5px;transform:skew(-7deg)}.brand-mark span{color:var(--accent)}.brand-dot{font-size:9px;vertical-align:top;margin-left:4px}nav{display:flex;height:100%;gap:38px}.nav{background:none;color:#858689;border-bottom:2px solid transparent;padding:0 5px;font-weight:600}.nav span{font-family:'Barlow Condensed';font-size:11px;margin-left:9px;letter-spacing:1px}.nav.active{color:#fff;border-color:var(--accent)}.header-right{display:flex;gap:25px;align-items:center}i{display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:7px;border-radius:50%}.icon-btn{background:none;border:1px solid var(--line);height:33px;width:33px;font-size:19px}main,#battle{max-width:1550px;margin:auto;padding:34px 4.5% 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font:11px monospace;letter-spacing:1.8px;color:#96979a;display:flex;gap:12px}.orange{color:var(--accent)}h1{font-size:39px;letter-spacing:-1.6px;margin:12px 0 9px;line-height:1.3;font-weight:900}h1 em{font-style:normal;color:var(--accent)}.page-heading p{margin:0;color:#888b8e;font-size:12px;letter-spacing:1px}.select-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:30px}.showcase{position:relative;isolation:isolate;overflow:hidden;min-height:610px;background:#27221f;border:1px solid #49372e;--accent:#ff8b55}.showcase:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#141313 0%,transparent 58%);z-index:1;pointer-events:none}.showcase-top{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px;z-index:4}.showcase-top span:first-child{color:var(--accent)}.giant-name{position:absolute;top:63px;left:17px;font:900 clamp(75px,9vw,144px)/1 'Barlow Condensed';color:transparent;-webkit-text-stroke:1px #ffffff36;letter-spacing:-2px;z-index:2;pointer-events:none}.portrait{background-image:url('assets/fighters.png');background-size:300% 300%;background-repeat:no-repeat;background-position:0% 0%}.hero-art{position:absolute;inset:0;opacity:1;transition:filter .25s;mask-image:linear-gradient(#000 68%,transparent 100%)}.hero-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 59px,#ffffff04 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,#ffffff04 60px);pointer-events:none;z-index:2}.vertical-label{position:absolute;left:16px;top:190px;writing-mode:vertical-rl;transform:rotate(180deg);font:9px monospace;letter-spacing:2px;color:#ffffff70;z-index:3}.fighter-meta{position:absolute;bottom:29px;left:30px;z-index:3}.fighter-kicker{font:10px monospace;color:var(--accent);letter-spacing:2px}.fighter-meta h2{font:700 62px/1 'Barlow Condensed';margin:12px 0}.fighter-meta h2 span{font:500 14px 'Noto Sans SC';margin-left:16px;color:#bbb}.fighter-meta p{color:#b9b5b4;font-size:12px;letter-spacing:.5px}.hero-index{position:absolute;right:25px;bottom:20px;font:700 88px 'Barlow Condensed';color:#ffffff0e;z-index:3}.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 17px}.section-title>div{display:flex;gap:12px;align-items:center}.step{font:13px 'Barlow Condensed';color:var(--accent);border:1px solid #574034;padding:3px 6px}.section-title h2{font-size:17px;margin:0;font-weight:600}.subtle,.tiny{font:9px monospace;letter-spacing:1px;color:var(--muted)}.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.fighter-card{height:111px;position:relative;overflow:hidden;background:#252527;border:1px solid #38393c;text-align:left;padding:0;transition:transform .15s,border-color .15s}.fighter-card:hover{transform:translateY(-2px);border-color:#bbb}.fighter-card.selected{border:2px solid var(--accent)}.fighter-card .portrait{position:absolute;inset:0;transition:filter .2s;filter:saturate(.65) brightness(.75)}.fighter-card:hover .portrait,.fighter-card.selected .portrait{filter:saturate(1) brightness(1)}.fighter-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#080a0ce8)}.card-name{position:absolute;bottom:8px;left:10px;font:600 19px 'Barlow Condensed';z-index:1;letter-spacing:.5px}.card-name small{display:block;font:8px 'Noto Sans SC';color:#b9bbbd;margin-top:2px}.card-num{position:absolute;right:8px;top:7px;font:9px monospace;color:#d1d1d3;z-index:1}.selected .card-num{background:var(--accent);color:#161616;padding:2px 4px}.selected .card-name{color:#ff995f}.loadout{margin-top:19px;border-top:1px solid var(--line);padding-top:15px}.signature{display:flex;align-items:center;gap:12px;background:#ffffff03;border:1px solid var(--line);padding:10px 13px}.skill-symbol{font-size:30px;color:var(--accent)}.signature div{flex:1}.signature small{display:block;font:9px monospace;color:#8a8989;margin-bottom:3px}.signature strong{font-size:12px;font-weight:500}.signature kbd{width:25px;height:25px;text-align:center;line-height:24px}.match-settings{display:flex;gap:20px;margin:14px 0}.match-settings label{color:#95969a;display:flex;align-items:center;gap:12px;flex:1;font-size:11px}.match-settings select{background:transparent;border:0;border-bottom:1px solid #444;color:#d1d1d3;padding:5px 0;flex:1;min-width:0}.match-settings option{background:#222}.start-button{display:flex;align-items:center;justify-content:space-between;background:var(--accent);color:#101112;width:100%;padding:17px 22px;font-weight:800;font-size:16px;transition:background .2s}.start-button:hover{background:#ff8c5d}.start-button small{font:600 11px 'Barlow Condensed';letter-spacing:1.2px;margin-left:12px}.start-button>span:last-child{font-size:26px;line-height:1}.selection-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:9px;color:#787a7e}.selection-foot i{width:4px;height:4px}.outlined-icon{font-size:24px;color:#aaa}footer{display:flex;justify-content:space-between;padding:26px 4.5%;font:9px monospace;color:#62656b;letter-spacing:.7px;gap:14px}footer i{width:4px;height:4px;margin-left:9px}.battle-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;color:#777;font:12px monospace}.battle-toolbar button,.secondary{padding:10px 16px;background:#242528;color:#ccc}.arena-wrap{position:relative;border:1px solid #404045;background:#101118}canvas{width:100%;display:block;aspect-ratio:1280/650}.battle-overlay{position:absolute;inset:0;background:#0b0c12d9;backdrop-filter:blur(7px);display:grid;place-items:center;text-align:center}.battle-overlay>div{min-width:270px;max-width:90%}.battle-overlay span{font:12px monospace;color:var(--accent);letter-spacing:3px}.battle-overlay h2{font-size:45px;margin:10px}.battle-overlay p{color:#999}.battle-overlay .secondary{margin:12px 4px 0}.battle-hint{display:flex;justify-content:space-between;gap:15px;color:#888;font-size:10px;margin-top:20px}kbd{display:inline-block;border:1px solid #494b50;border-bottom:2px solid #55575b;padding:3px 5px;margin:0 3px;color:#ddd;background:#222326;border-radius:3px;font:11px monospace}.touch-controls{display:none;justify-content:space-between;gap:20px;margin-top:16px;touch-action:none;user-select:none}.touch-controls button{background:#252830;border:1px solid #414650;padding:14px;color:#ddd;touch-action:none}.touch-controls button:active{background:#c45b35}.dpad,.attack-pad{display:flex;gap:6px}.attack-pad button:last-child{color:var(--accent)}[hidden]{display:none!important}@media(min-width:1500px){.showcase{min-height:665px}.fighter-card{height:128px}}@media(max-width:1000px){header{padding:0 24px}main,#battle{padding:26px 24px 0}.select-layout{gap:20px;grid-template-columns:1fr 1.05fr}.showcase{min-height:606px}.fighter-card{height:108px}.subtle{display:none}.start-button small{display:none}.fighter-meta{left:22px}.fighter-meta h2{font-size:52px}.hero-art{background-size:300% 300%}.battle-hint{flex-wrap:wrap}.touch-controls{display:flex}}@media(max-width:680px){header{height:70px;padding:0 18px;gap:12px}.brand{font-size:14px}.brand-mark{font-size:29px}.nav span{display:none}nav{gap:15px}.nav{font-size:11px}.header-right{gap:0}.icon-btn{width:27px;height:27px}main,#battle{padding:26px 16px 0}.page-heading{margin-bottom:24px}h1{font-size:30px}.eyebrow{font-size:8px;letter-spacing:1px}.page-heading p{font-size:10px}.select-layout{grid-template-columns:1fr}.showcase{min-height:420px}.hero-art{background-size:300% 300%}.giant-name{font-size:100px;top:52px}.fighter-meta{bottom:22px}.fighter-meta h2{font-size:48px}.fighter-meta p{font-size:11px}.fighter-card{height:116px}.roster-panel{margin-top:7px}footer{padding:25px 16px;flex-wrap:wrap;font-size:8px}footer span:nth-child(2){order:3;width:100%}.battle-toolbar{font-size:9px}.battle-toolbar button{padding:8px;font-size:10px}.touch-controls{gap:8px;flex-wrap:wrap}.touch-controls button{padding:13px 12px}.battle-overlay h2{font-size:25px}.battle-overlay .start-button{padding:10px;font-size:13px}.battle-overlay p{margin:4px}.battle-overlay .secondary{margin:8px 4px 0;padding:7px}.battle-overlay span{font-size:9px}.battle-hint{font-size:9px}}

/* Individual reference-based portraits: preserve aspect ratios and readable silhouettes. */
@media(min-width:1100px){.roster{grid-template-columns:repeat(5,minmax(0,1fr))}.fighter-card{height:167px}.card-name{font-size:16px;left:7px}.card-name small{font-size:9px}.card-num{right:5px}.showcase{min-height:650px}}
.fighter-meta h2 span{display:block;margin:8px 0 0;font-size:18px;letter-spacing:3px;color:#e3ddd9}.fighter-card.selected{border-color:var(--accent)}.hero-art{transition:opacity .2s}.hero-art[style*="cover"]{background-repeat:no-repeat}.giant-name{opacity:.65}.fighter-card .portrait[style*="cover"]{background-position:center 20%!important}
@media(max-width:1099px){.fighter-card:last-child{grid-column:1/-1;height:100px}.fighter-card:last-child .portrait{background-position:center 31%!important}.fighter-card:last-child .card-name{font-size:23px}}

/* Simplified selection UI and full-width keyboard reference. */
.status{font:11px monospace;color:#aaa;letter-spacing:.7px}.status i{background:#a2ca9b}@media(max-width:1000px){.status{display:none}}
.page-heading{margin:0 0 25px}.page-heading h1{margin:0;font-size:38px;line-height:1.4}
.showcase{min-height:590px}.roster-panel{display:flex;flex-direction:column}.loadout{margin-top:20px;padding-top:0;border:0}.match-settings{margin:17px 0}.roster-panel .start-button{margin-top:auto}
.fighter-meta h2 span{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:600;letter-spacing:1.2px}.card-name{right:5px}.card-name small{font-family:'Barlow Condensed',sans-serif;font-size:11px;line-height:1.15;letter-spacing:.1px;color:#d3d3d3}
.keyboard-panel{display:flex;gap:30px;align-items:center;width:100%;margin-top:24px;padding:25px 28px;border:1px solid #62442f;background:linear-gradient(110deg,#271e18,#191a1c 65%)}
.keyboard-heading{min-width:145px}.keyboard-heading>span{font-size:30px;color:var(--accent)}.keyboard-heading h2{font-size:21px;margin:5px 0 0}
.keyboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px 24px;flex:1}.keyboard-grid>div{display:flex;align-items:center;gap:5px;min-width:0}.keyboard-grid kbd{font-size:16px;min-width:32px;height:34px;display:inline-grid;place-items:center;margin:0;background:#303034;border-color:#626167}.keyboard-grid span{font-size:14px;margin-left:5px;line-height:1.4}.keyboard-grid small{display:block;font-size:10px;color:#a8a3a0}
@media(min-width:1100px){.showcase{min-height:590px}.fighter-card{height:171px}}
@media(max-width:1000px){.keyboard-panel{gap:20px;padding:22px}.keyboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.showcase{min-height:630px}}
@media(max-width:680px){.page-heading h1{font-size:29px}.showcase{min-height:430px}.keyboard-panel{display:block;padding:21px 17px}.keyboard-heading{display:flex;align-items:center;gap:12px;margin-bottom:22px}.keyboard-heading h2{margin:0}.keyboard-grid{gap:18px 12px}.keyboard-grid span{font-size:13px}.keyboard-grid kbd{font-size:15px;min-width:29px}.fighter-meta h2 span{font-size:24px}.roster-panel .start-button{margin-top:0}}
.combo-guide{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;background:#181a22;border:1px solid #383746;color:#f1d3a8;font-size:13px;letter-spacing:.04em}.combo-guide strong{color:#ff9067}.combo-guide span{color:#9fa4b7;font-size:12px}@media(max-width:650px){.combo-guide{gap:7px;font-size:11px;padding:12px}.combo-guide span{font-size:10px}}

.stamina-hint{color:#9fb8b0;font-size:12px;line-height:1.8;margin:12px 0}.attack-pad{flex-wrap:wrap}.keyboard-grid>div{flex-wrap:wrap}
.language-switch{color:var(--text,#eae7e0);font-size:13px;text-decoration:none;border:1px solid #555;padding:8px 12px;border-radius:3px;white-space:nowrap}.language-switch:hover{border-color:#ff754a}html[lang=en] .keyboard-grid small{line-height:1.5}html[lang=en] .page-heading h1{font-size:clamp(28px,4vw,54px)}