:root{--bg:#080a10;--panel:#10141e;--panel2:#171d29;--line:#2a3342;--text:#f6f7fb;--muted:#a4adbd;--gold:#f5b82e;--red:#f04e45;--green:#54e0a2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#1c1b27 0%,var(--bg) 55%);color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100vh}button,select{font:inherit}button{cursor:pointer;color:inherit}.app-shell{max-width:1440px;margin:auto;padding:0 28px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:800;letter-spacing:1.5px}.brand>span:last-child{font-size:15px}.brand b{color:var(--gold)}.brand small{display:block;color:#8c96a8;font-size:9px;letter-spacing:2.5px;margin-top:4px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--gold);color:#111;border-radius:12px;font-family:'Barlow Condensed';font-size:22px;font-weight:900;transform:skew(-5deg)}.top-meta{display:flex;gap:12px;align-items:center}.coin-pill,.icon-btn{border:1px solid var(--line);background:#111722;border-radius:30px;padding:10px 15px}.icon-btn{border-radius:50%;width:42px;height:42px}.screen{display:none;min-height:calc(100vh - 145px);padding:42px 0 58px}.screen.active{display:block}.hero-screen.active{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:calc(100vh - 145px)}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:800;color:var(--gold);margin:0 0 12px}.hero-copy h1,.section-head h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,7vw,94px);line-height:.88;letter-spacing:1px;margin:0;font-weight:900}.hero-copy h1 span,.section-head h2 span{color:var(--gold)}.lead{max-width:520px;color:#aeb6c5;font-size:17px;line-height:1.7;margin:24px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{border:1px solid transparent;padding:14px 20px;font-size:12px;letter-spacing:1px;font-weight:800;border-radius:7px;transition:transform .15s,filter .15s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn.primary{background:var(--gold);color:#17130a}.btn.ghost{background:#141a25;border-color:#343d4c;color:#e5e9f1}.btn.small{padding:11px 14px}.feature-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;color:#9da7b7;font-size:11px}.hero-art{height:min(570px,70vh);min-height:380px;position:relative;overflow:hidden;border:1px solid #ffffff1a;border-radius:18px;background:linear-gradient(145deg,#25202a,#111722 62%,#21140e)}.hero-art:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07090e 0%,transparent 58%),repeating-linear-gradient(115deg,transparent 0 50px,#ffffff04 51px 52px)}.sunburst{position:absolute;width:360px;height:360px;right:10%;top:10%;border-radius:50%;background:radial-gradient(circle,#f5b82e 0%,#d94d32 30%,#802b37 56%,transparent 70%);filter:blur(1px);opacity:.8}.fighter-silhouette{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%) rotate(-10deg);font-size:clamp(150px,25vw,330px);font-family:serif;color:#0a0b10;text-shadow:12px 12px 0 #f5b82e55,-6px -5px 0 #fff1;filter:drop-shadow(0 20px 15px #000);z-index:1}.hero-stamp{position:absolute;right:24px;top:25px;border:2px solid var(--gold);color:var(--gold);padding:9px 12px;font-family:'Barlow Condensed';font-weight:900;font-size:20px;line-height:.9;transform:rotate(7deg);z-index:2}.hero-bottom{position:absolute;bottom:20px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:2px;color:#d6d9df;z-index:2}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.section-head h2{font-size:clamp(40px,5vw,64px)}.muted{color:var(--muted);font-size:13px}.fighter-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr);gap:22px}.fighter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}.fighter-card{background:linear-gradient(150deg,#171e2a,#0d1119);border:1px solid #293242;border-radius:9px;min-height:130px;padding:12px;text-align:left;position:relative;overflow:hidden}.fighter-card:after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;background:var(--fighter-color,#f5b82e);opacity:.1;right:-30px;top:-30px}.fighter-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px #f5b82e55 inset}.fighter-avatar{height:64px;width:64px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--fighter-color,#f5b82e),#141824);color:#fff;text-shadow:0 2px 8px #000;font-family:'Barlow Condensed';font-size:28px;font-weight:900;margin-bottom:10px}.fighter-card strong{display:block;font-size:12px}.fighter-card small{color:#8d98aa;font-size:10px}.fighter-details,.help-card{background:linear-gradient(145deg,#171e2a,#0e121a);border:1px solid var(--line);border-radius:12px;padding:24px}.detail-avatar{height:130px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 50% 30%,var(--fighter-color),#111722 65%);font-family:'Barlow Condensed';font-size:74px;font-weight:900;margin-bottom:20px;text-shadow:0 5px 12px #000}.fighter-details h3,.help-card h3{font-family:'Barlow Condensed';font-size:30px;margin:0 0 4px}.fighter-details p{color:var(--muted);font-size:12px;line-height:1.7}.stat{margin:14px 0}.stat-head{display:flex;justify-content:space-between;font-size:10px;color:#c8cfda;margin-bottom:6px}.stat-bar,.progress-track{height:7px;background:#252c38;border-radius:10px;overflow:hidden}.stat-bar i,.progress-track i{display:block;height:100%;background:var(--gold);width:70%;border-radius:10px}.campaign-banner{padding:24px;border:1px solid #55421c;background:linear-gradient(110deg,#342714,#151721 70%);border-radius:12px;margin-bottom:18px;display:grid;grid-template-columns:1fr minmax(130px,250px);gap:20px;align-items:center}.campaign-banner h3{font-family:'Barlow Condensed';font-size:28px;margin:0}.campaign-banner p{font-size:12px;color:#c2b7a3;margin:6px 0 0}.stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stage-card{padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:150px;text-align:left}.stage-card.current{border-color:var(--gold);background:linear-gradient(140deg,#342a17,#131721)}.stage-card.locked{opacity:.45;cursor:not-allowed}.stage-card .stage-num{font-family:'Barlow Condensed';font-size:30px;color:var(--gold)}.stage-card h3{font-size:13px;margin:6px 0}.stage-card p{font-size:10px;color:#9aa4b4;margin:0}.center-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;flex-wrap:wrap}.setting-label{font-size:11px;color:#9ea8b8;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:10px}.setting-label select{background:#171d29;color:white;border:1px solid var(--line);padding:12px;border-radius:7px}.arena-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.arena-card{border:1px solid var(--line);background:#121722;border-radius:10px;overflow:hidden;text-align:left}.arena-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px #f5b82e55}.arena-card img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;background:#202531}.arena-card strong{display:block;padding:13px;font-size:12px}.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.help-card p{font-size:12px;color:#b5becc;line-height:1.8}.help-card kbd{display:inline-block;min-width:25px;text-align:center;background:#252c38;border:1px solid #3a4557;padding:4px 6px;border-radius:4px;color:white}.match-screen{padding-top:16px;position:relative}.match-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.match-title{text-align:center;font-size:10px;letter-spacing:2px;color:#b5bdca}.match-title b{display:block;font-size:14px;color:var(--gold);margin-top:4px}.match-timer{font-size:11px;color:var(--green);font-weight:800}.health-row{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;gap:10px;margin-bottom:12px}.health-name{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-bottom:6px}.health-name b{color:var(--gold)}.health-bar{height:13px;background:#33313a;border:1px solid #4a4650;transform:skew(-10deg);overflow:hidden}.health-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#35d58c,#c8e96a);transition:width .15s}.health-bar.enemy i{background:linear-gradient(90deg,#f4b82f,#f04e45)}.vs{text-align:center;font-family:'Barlow Condensed';font-size:25px;color:var(--gold);font-weight:900}.arena{width:100%;height:min(56vw,450px);min-height:280px;max-height:450px;background:#121722;border:1px solid #303747;border-radius:8px;overflow:hidden;position:relative}.arena canvas{display:block;max-width:100%;height:auto!important;margin:0 auto}.touch-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 4px}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,42px);gap:5px}.dpad button,.action-pad button{border:1px solid #4b5669;background:#1b2330;border-radius:8px;font-weight:800;touch-action:none;user-select:none}.dpad button[data-key="37"]{grid-column:1;grid-row:2}.dpad button[data-key="38"]{grid-column:2;grid-row:1}.dpad button[data-key="40"]{grid-column:2;grid-row:2}.dpad button[data-key="39"]{grid-column:3;grid-row:2}.action-pad{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.action-pad button{padding:13px 12px;font-size:10px}.action-pad .block-key{border-color:#498f7b;color:#7cf0c1}.match-overlay{position:absolute;z-index:8;inset:65px 0 0;display:grid;place-items:center;background:#05070cbb;backdrop-filter:blur(5px);border-radius:10px}.match-overlay.hidden{display:none}.result-panel{text-align:center;padding:34px 24px;border:1px solid #55421c;border-radius:14px;background:#111620;max-width:460px;width:92%;box-shadow:0 20px 80px #0009}.result-panel h2{font-family:'Barlow Condensed';font-size:60px;color:var(--gold);margin:0}.result-panel p:not(.eyebrow){color:#aeb7c5;font-size:13px}.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#1b2631;border:1px solid #42566b;padding:12px 18px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}footer{height:60px;border-top:1px solid #ffffff14;display:flex;justify-content:space-between;align-items:center;color:#6e7889;font-size:9px;letter-spacing:2px}.hidden{display:none!important}@media(max-width:900px){.app-shell{padding:0 16px}.hero-screen.active{grid-template-columns:1fr;gap:24px;padding-top:35px}.hero-art{height:380px;min-height:320px}.fighter-layout{grid-template-columns:1fr}.fighter-details{order:-1}.fighter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.help-grid{grid-template-columns:1fr}.section-head{align-items:flex-start}.stage-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.topbar{height:68px}.brand-mark{width:38px;height:38px}.brand>span:last-child{font-size:12px}.brand small{font-size:7px}.screen{padding-top:28px}.hero-copy h1{font-size:60px}.lead{font-size:14px}.feature-row{gap:10px;font-size:9px}.hero-art{min-height:290px;height:300px}.fighter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fighter-card{padding:8px;min-height:118px}.fighter-avatar{width:48px;height:48px;font-size:22px}.fighter-card strong{font-size:10px}.fighter-card small{font-size:9px}.section-head h2{font-size:42px}.section-head{gap:10px}.campaign-banner{grid-template-columns:1fr}.stage-grid{gap:8px}.stage-card{padding:13px;min-height:130px}.arena-grid{grid-template-columns:repeat(2,1fr);gap:9px}.arena-card strong{padding:10px;font-size:10px}.match-head .btn{padding:9px;font-size:9px}.match-title{font-size:8px}.health-row{grid-template-columns:1fr 28px 1fr;gap:5px}.health-name{font-size:9px}.health-bar{height:10px}.arena{height:52vh;min-height:230px}.touch-controls{padding:12px 0;gap:8px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,34px);gap:4px}.action-pad{max-width:58%;gap:5px}.action-pad button{padding:10px 7px;font-size:8px}.touch-controls button{min-height:34px}.match-overlay{inset:48px 0 0}.result-panel h2{font-size:48px}footer{font-size:7px;letter-spacing:1px}}

/* Roster search and tier filters */
.roster-tools{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:16px;background:#10141e;border:1px solid var(--line);border-radius:10px}.roster-search,.roster-filter{display:flex;flex-direction:column;gap:7px}.roster-search{flex:1;min-width:220px}.roster-filter{min-width:190px}.roster-tools label{font-size:9px;font-weight:900;letter-spacing:1.6px;color:#9ea8b8}.roster-tools input,.roster-tools select{height:42px;padding:0 12px;background:#171d29;border:1px solid #343d4c;border-radius:7px;color:#f6f7fb;min-width:0}.roster-tools input{width:100%}.roster-count{font-size:11px;color:var(--gold);font-weight:800;padding:12px 2px;white-space:nowrap}.tier-chip{display:inline-block;position:relative;z-index:1;margin-top:7px;padding:4px 6px;border-radius:4px;background:#ffffff0b;border:1px solid #ffffff16;color:#c7cfdd;font-size:8px;font-weight:800;letter-spacing:.5px}.tier-starter{color:#8ce6b8}.tier-silver{color:#cbd5e1}.tier-gold{color:#f5c94f}.tier-platinum{color:#8ed7ff}.tier-boss{color:#ff9c83}.tier-faction{color:#c9a4ff}.roster-empty{grid-column:1/-1;padding:30px;border:1px dashed #394355;border-radius:10px;color:var(--muted);text-align:center;font-size:13px}
@media(max-width:540px){.roster-tools{gap:10px;padding:12px}.roster-search,.roster-filter{width:100%;min-width:0}.roster-count{padding:2px 0}}

/* Version 4: dedicated roster portrait artwork */
.fighter-avatar{overflow:hidden;padding:0;border:1px solid color-mix(in srgb,var(--fighter-color,#f5b82e) 65%,transparent);background:#111722}
.fighter-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.detail-avatar{overflow:hidden;padding:0;min-height:130px;background:#111722}
.detail-avatar img{display:block;width:100%;height:100%;max-height:250px;object-fit:contain;object-position:center bottom}

/* Version 6: signature-move control and impact feedback */
.special-key{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:linear-gradient(100deg,#f7b928,#ff6b35);color:#141820;font-weight:900;border:1px solid rgba(255,255,255,.3);border-radius:9px;box-shadow:0 5px 18px rgba(247,185,40,.18)}
.special-key small{font-size:9px;letter-spacing:.08em;opacity:.8}
.special-key:disabled{opacity:.6;filter:saturate(.55);cursor:not-allowed}
.special-key.cooldown{background:linear-gradient(100deg,#454b58,#272d38);color:#d8dde6;box-shadow:none}
.arena.special-flash{animation:nac-special-flash .62s ease-out}
@keyframes nac-special-flash{0%{filter:brightness(1) saturate(1)}18%{filter:brightness(1.7) saturate(1.8) drop-shadow(0 0 12px #ffc83d)}45%{filter:brightness(1.3) saturate(1.5)}100%{filter:brightness(1) saturate(1)}}

.special-meter{margin:0 0 12px;padding:10px 13px;border:1px solid #3b3340;border-radius:8px;background:linear-gradient(100deg,#171b27,#201a25)}.special-meter-head{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:900;letter-spacing:1px}.special-meter-head span{color:#f5b82e}.special-meter-head b{color:#f6f7fb;font-variant-numeric:tabular-nums}.special-meter-track{height:8px;background:#30313b;border-radius:20px;overflow:hidden;margin:8px 0 5px}.special-meter-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#f5b82e,#ff643c);border-radius:20px;transition:width .2s}.special-meter.ready .special-meter-track i{box-shadow:0 0 14px #ffb52e}.special-meter small{font-size:10px;color:#9ca6b6}

/* v8: signature-move archetype feedback */
.arena.special-flash-power{animation:nac-power-burst .72s ease-out}
.arena.special-flash-speed{animation:nac-speed-burst .72s ease-out}
.arena.special-flash-guard{animation:nac-guard-burst .72s ease-out}
.arena.special-flash-balanced{animation:nac-balanced-burst .72s ease-out}
@keyframes nac-power-burst{0%{filter:none}25%{filter:brightness(1.8) saturate(1.6) drop-shadow(0 0 15px #ff5733)}100%{filter:none}}
@keyframes nac-speed-burst{0%{filter:none}18%{filter:brightness(1.7) hue-rotate(35deg) drop-shadow(0 0 13px #5ce7ff)}38%{filter:brightness(1.25) hue-rotate(-25deg)}100%{filter:none}}
@keyframes nac-guard-burst{0%{filter:none}30%{filter:brightness(1.7) saturate(.7) drop-shadow(0 0 15px #9eaaff)}100%{filter:none}}
@keyframes nac-balanced-burst{0%{filter:none}20%{filter:brightness(1.8) saturate(1.5) drop-shadow(0 0 15px #ffd84d)}55%{filter:brightness(1.25)}100%{filter:none}}

/* v9: arena tiers and online lobby */
.arena-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-8px 0 18px}.arena-filters{display:flex;gap:8px;flex-wrap:wrap}.arena-filter{border:1px solid var(--line);background:#141a25;color:#cbd3df;border-radius:999px;padding:9px 13px;font-size:10px;font-weight:800;letter-spacing:.5px}.arena-filter.active{background:#352a16;color:var(--gold);border-color:var(--gold)}.arena-card{position:relative}.arena-tier{position:absolute;top:8px;left:8px;z-index:2;padding:5px 7px;border-radius:5px;background:#080a10d9;color:#f5b82e;font-size:9px;font-weight:900;letter-spacing:1px}.arena-card.secret .arena-tier{color:#d6a6ff}.arena-card img{background:radial-gradient(circle at 50% 25%,#7b4a2c,#1a2331 58%,#090c13)}.arena-card .arena-subtitle{display:block;padding:0 13px 12px;color:#8f9aab;font-size:10px}.online-connect-panel,.online-players-panel,.online-challenge-panel{border:1px solid var(--line);background:linear-gradient(145deg,#171e2a,#0e121a);border-radius:12px;padding:20px}.online-connect-panel{margin-bottom:18px}.online-status-row{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;margin-bottom:18px}.status-dot{width:9px;height:9px;border-radius:50%;background:#657080;box-shadow:0 0 0 4px #65708022}.status-dot.online{background:#42d89b;box-shadow:0 0 0 4px #42d89b22}.online-count{margin-left:auto;color:var(--gold)}.online-form-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}.online-form-grid label,.online-match-settings label{display:flex;flex-direction:column;gap:7px;color:#9ea8b8;font-size:10px;font-weight:800;letter-spacing:1px}.online-form-grid input,.online-player-head input,.online-panel-head input,.online-match-settings select{width:100%;min-width:0;background:#0d1119;border:1px solid #30394a;border-radius:7px;color:#f3f5f8;padding:12px;font:inherit;letter-spacing:0}.online-connect-actions{display:flex;gap:8px;margin-top:14px}.online-note{font-size:10px;line-height:1.6;color:#8f9aab;margin:12px 0 0}.online-lobby-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.online-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.online-panel-head h3,.online-challenge-panel h3{font-family:'Barlow Condensed';font-size:26px;margin:0}.online-panel-head .eyebrow{margin-bottom:4px}.online-panel-head input{max-width:210px}.online-player-list,.online-challenge-list{display:grid;gap:8px}.online-player-row,.online-challenge-row{display:flex;align-items:center;gap:10px;border:1px solid #293242;background:#101620;border-radius:8px;padding:11px}.online-player-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#322817;color:var(--gold);font-weight:900}.online-player-meta{min-width:0;flex:1}.online-player-meta strong{display:block;font-size:12px;overflow-wrap:anywhere}.online-player-meta small{color:#8f9aab;font-size:10px}.online-player-row .btn,.online-challenge-row .btn{padding:9px 10px;font-size:9px;white-space:nowrap}.online-empty{color:#8f9aab;font-size:11px;line-height:1.6;padding:12px 4px}.online-match-settings{display:grid;gap:12px;margin-top:18px}.online-challenge-panel>.eyebrow{margin-bottom:4px}.online-challenge-row{align-items:flex-start;flex-wrap:wrap}.online-challenge-row .challenge-copy{flex:1;min-width:130px;font-size:11px;line-height:1.6}.online-challenge-row .challenge-actions{width:100%;display:flex;gap:7px}.online-challenge-row .challenge-actions button{flex:1}.arena-card .arena-tier.tier-a{color:#83d8ff}.arena-card .arena-tier.tier-b{color:#9be6b0}
@media(max-width:760px){.online-lobby-layout,.online-form-grid{grid-template-columns:1fr}.online-panel-head{align-items:flex-start;flex-direction:column}.online-panel-head input{max-width:none}.online-connect-panel,.online-players-panel,.online-challenge-panel{padding:15px}.arena-toolbar{align-items:flex-start}}