/* The fighter lobby */
body{background:radial-gradient(ellipse at 10% 35%,#223b601c,transparent 48%),radial-gradient(ellipse at 92% 75%,#83531d12,transparent 45%),#080b12}
#app{position:relative}
header{border-bottom-color:#ffffff12}
.brand{gap:11px}.brand-wordmark{font:900 22px/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:2px}.brand-wordmark>span{display:block;color:var(--gold);margin-top:4px}
.edition{font-size:10px;letter-spacing:3px}
.header-actions button,.social-x{border-radius:4px;background:#ffffff03}
.header-actions .wallet-button{background:linear-gradient(120deg,#ffc25520,#ffc25508);box-shadow:inset 0 0 16px #ffc25508}
.select-heading{padding:26px 0 22px;align-items:center}
.select-heading .eyebrow{font-size:10px;letter-spacing:4px}
.select-heading h1{font-size:clamp(32px,3.5vw,58px);letter-spacing:.2px}
.selection-subtitle{font-size:12px;color:#8c98ae;letter-spacing:.5px;margin:10px 0 0}
.mode-tag{background:#72e5c508;border-color:#72e5c529;color:#ade2d0;border-radius:4px;font-size:10px}
.mode-tag::before,.live-dot{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#8ce6be;box-shadow:0 0 10px #8ce6be88;margin-right:8px;vertical-align:middle}
.selection-body{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}
.showcase{--fighter-color:#ff9e32;border:1px solid #ffffff20;border-radius:10px;background:#0e1521;box-shadow:0 18px 55px #0003;isolation:isolate}
.showcase::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px #ffffff0d;pointer-events:none;background:linear-gradient(0deg,#080d17 0%,#080d17bb 15%,transparent 56%);z-index:1}
.showcase-bg{width:100%;height:100%;background:none;opacity:.64;object-fit:cover}
.spotlight-label{position:absolute;top:22px;left:24px;z-index:3;color:#c1cbda;font-size:9px;letter-spacing:2px}
.spotlight-label .live-dot{background:var(--fighter-color);box-shadow:0 0 10px var(--fighter-color)}
.fighter-number{top:21px;right:22px;font-size:10px;letter-spacing:2px;color:#bec8d7;z-index:3}
.fighter-glow{top:0;height:100%;filter:blur(7px);opacity:.8}
.showcase-ring{position:absolute;left:12%;right:12%;height:23%;top:54%;border:1px solid var(--fighter-color);border-radius:50%;transform:rotate(-12deg);opacity:.2;box-shadow:0 0 45px color-mix(in srgb,var(--fighter-color) 25%,transparent),inset 0 0 35px color-mix(in srgb,var(--fighter-color) 15%,transparent)}
#hero{z-index:1;filter:drop-shadow(0 12px 18px #0007)}
.fighter-info{left:26px;right:26px;bottom:25px;padding-top:50px;background:none;z-index:2}
.fighter-info>span{font-size:10px;letter-spacing:3px;color:var(--fighter-color)}
.fighter-info h2{font-size:clamp(48px,4.8vw,78px);letter-spacing:.5px;margin:9px 0 5px}
.fighter-info p{font-size:13px;letter-spacing:3px;margin:8px 0;color:#e9edf6}
#move-description{font-size:12px;color:#a8b3c7;max-width:390px;line-height:1.5}
#super-name{font-size:10px;letter-spacing:1.1px;color:var(--fighter-color);margin-top:9px}
.fighter-access{display:inline-block;border:1px solid #87dfbd30;background:#10251eaa;padding:5px 8px;font-size:8px;border-radius:3px;margin-top:12px;letter-spacing:1px}
.fighter-access.access-locked{border-color:#ffc25544;background:#2c2113aa}
.setup{padding:20px;border:1px solid #ffffff12;border-radius:10px;background:linear-gradient(145deg,#141b2880,#0e131c77);box-shadow:0 16px 50px #0002}
.section-label{font-size:10px;letter-spacing:1.8px;align-items:center;margin-bottom:13px}
.section-label>span:first-child{color:#adb9cc}.section-label>span:last-child{font-weight:600;font-size:9px}
.fighter-picker{min-height:0}
.roster{gap:11px;padding:3px 3px 12px;scroll-padding-inline:3px;scrollbar-width:thin;scrollbar-color:#8d7042 #ffffff06;min-height:135px}
.fighter-card{--fighter-color:var(--gold);flex-basis:clamp(125px,10vw,168px);border-radius:6px;border:1px solid #ffffff20;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--fighter-color) 18%,#111927),#0c111c 75%);transition:transform .2s,border-color .2s,box-shadow .2s}
.fighter-card::before{display:none}
.fighter-card .card-art{position:absolute;inset:0 0 auto;width:100%;height:calc(100% - 48px);object-fit:cover;object-position:center 20%;transition:filter .2s,transform .3s}
.fighter-card.new-fighter .card-art{object-fit:contain;object-position:center bottom}
.fighter-card::after{background:linear-gradient(0deg,#0b101c 0%,#0b101cf2 13%,transparent 48%);pointer-events:none}
.fighter-card>span{bottom:24px;font-size:20px;font-weight:800;letter-spacing:.8px}
.fighter-card .card-class{position:absolute;bottom:10px;left:0;right:0;z-index:1;color:#7e8da8;font-size:8px;letter-spacing:2px}
.fighter-card .card-index{position:absolute;top:9px;right:9px;z-index:1;font-size:9px;letter-spacing:1px;color:#ffffffa0;background:#080b1255;padding:4px 5px;border-radius:3px}
.fighter-card.selected{border:1px solid var(--fighter-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--fighter-color) 22%,transparent),0 0 22px color-mix(in srgb,var(--fighter-color) 14%,transparent)}
.fighter-card.selected>span,.fighter-card.selected .card-class{color:var(--fighter-color)}
.fighter-card.locked .card-art{filter:saturate(.55) brightness(.65)}
.fighter-card.locked.selected{border-color:var(--fighter-color)}
.fighter-card .fighter-lock{font-size:8px;letter-spacing:.6px;left:7px;top:9px;border-radius:3px;padding:4px 5px}
.roster-navigation{padding-top:8px}.roster-hint{font-size:8px;letter-spacing:1px}.roster-controls{gap:9px}.roster-controls button{border-radius:3px;background:#ffffff05;width:32px;height:27px}.roster-controls span{font-size:10px}
.arena-label{margin-top:20px}
.arenas{height:78px;gap:8px}
.arena-card{border-radius:4px;filter:saturate(.8);transition:filter .2s,border-color .2s}
.arena-card::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#050813ee);pointer-events:none}
.arena-card .arena-index{top:6px;left:6px;bottom:auto;right:auto;font:600 8px Barlow,Arial;background:#080b1299;padding:2px 4px;color:#d4deef;letter-spacing:1px}
.arena-card .arena-name{bottom:6px;font-size:10px;letter-spacing:.3px;background:none;padding:0 3px;line-height:1.1}
.arena-card.selected{border:1px solid var(--gold);filter:saturate(1.1);box-shadow:0 0 14px #ffc25520}
.arena-card.selected .arena-name{color:var(--gold)}
.launch{gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid #ffffff0c}
.launch label{font-size:9px;letter-spacing:1.5px;width:104px}
.launch select{font-size:13px;color:#d9e0ee;padding:7px 0;border-bottom-color:#ffffff26}
.launch .primary{position:relative;overflow:hidden;min-height:52px;border:1px solid #ffda8a;border-radius:4px;background:linear-gradient(110deg,#ffca67,#efa438);box-shadow:0 4px 22px #edaa3020;font-size:22px;letter-spacing:2.5px;transition:filter .2s,box-shadow .2s}
.launch .primary::after{content:'\2197';position:absolute;right:18px;font-size:22px;font-weight:500}
.launch .primary:hover{filter:brightness(1.12);box-shadow:0 6px 30px #edaa3040}
footer{font-size:9px;letter-spacing:1.3px;color:#69788f}footer kbd{font-size:10px;border-color:#ffffff20;color:#9eacc2}
@media(hover:hover) and (pointer:fine){.fighter-card:hover{transform:translateY(-2px);border-color:var(--fighter-color)}.fighter-card:hover .card-art{transform:scale(1.035);filter:saturate(1.1)}.arena-card:hover{filter:saturate(1.2)}}
@media(max-height:720px){.select-heading{padding:16px 0}.selection-subtitle{display:none}.select-heading h1{font-size:38px}.setup{padding:14px}.arena-label{margin-top:13px}.arenas{height:58px}.launch{margin-top:12px;padding-top:10px}.launch .primary{min-height:42px;font-size:19px}.fighter-info{left:20px;right:20px;bottom:18px}.fighter-info h2{font-size:52px}.fighter-access{margin-top:8px}.spotlight-label{top:16px;left:20px}.fighter-number{top:16px}.fighter-card>span{font-size:17px}.section-label{margin-bottom:10px}}
@media(max-height:500px),(pointer:coarse) and (orientation:portrait){.select-heading{padding:8px 0}.select-heading h1{font-size:28px}.setup{padding:10px}.selection-body{gap:13px;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.section-label{font-size:9px;margin-bottom:7px}.section-label>span:last-child{font-size:8px}.roster{min-height:80px;gap:7px;padding-bottom:7px}.fighter-card{flex-basis:108px}.fighter-card>span{font-size:14px;bottom:17px}.fighter-card .card-class{font-size:7px;bottom:5px}.fighter-card .card-art{height:calc(100% - 30px)}.fighter-card .card-index{display:none}.fighter-card .fighter-lock{font-size:7px;padding:3px;top:5px;left:5px}.roster-navigation{padding-top:4px}.roster-controls button{height:22px;width:26px}.roster-hint{font-size:7px;letter-spacing:.2px}.arena-label{margin-top:9px}.arenas{height:42px;gap:5px}.arena-card .arena-name{font-size:8px;bottom:4px}.arena-card .arena-index{display:none}.launch{margin-top:8px;padding-top:7px;gap:10px}.launch label{width:76px;font-size:8px}.launch select{font-size:11px;padding:3px 0}.launch .primary{min-height:34px;font-size:17px;padding:6px 20px 6px 8px;letter-spacing:1.2px}.launch .primary::after{right:9px;font-size:17px}.fighter-info{left:16px;bottom:12px;right:16px}.fighter-info h2{font-size:34px;margin:5px 0}.fighter-info>span{font-size:8px;letter-spacing:1.5px}.fighter-info p{font-size:11px;margin:4px 0}.fighter-info #move-description{font-size:10px;line-height:1.35;max-width:290px}.fighter-info #super-name{font-size:8px;margin-top:5px}.fighter-access{font-size:7px;padding:3px 5px;margin-top:6px}.spotlight-label{top:12px;left:14px;font-size:7px;letter-spacing:1px}.fighter-number{top:12px;right:14px;font-size:8px}.brand-wordmark{font-size:16px;letter-spacing:1px}.brand{gap:7px}}
@media(pointer:fine) and (max-width:750px){.selection-body{grid-template-columns:1fr;gap:18px}.select-heading{padding:20px 0}.select-heading h1{font-size:34px}.setup{min-height:390px;padding:15px}.showcase{height:390px}.fighter-info h2{font-size:50px}.brand-wordmark{font-size:18px;letter-spacing:1px}.fighter-picker{min-height:230px}.arenas{height:65px}.fighter-card{flex-basis:140px}.selection-subtitle{display:block}.launch .primary{font-size:19px}.launch .primary::after{display:none}.select-heading .eyebrow{letter-spacing:2px}.brand-logo{max-width:60px}}
@media(pointer:fine) and (max-width:480px){.brand-wordmark{display:none}.setup{padding:12px}.arena-card .arena-name{font-size:8px}.launch label{width:83px}.launch{gap:10px}}
@media(prefers-reduced-motion:reduce){.fighter-card,.fighter-card .card-art,.arena-card{transition:none}}

/* Complete silhouettes remain inside cards at every card aspect ratio. */
.fighter-card .card-art{object-fit:contain;object-position:center bottom}

.release-tag{font:inherit;font-size:8px;color:#91a2bc;border:1px solid #ffffff1c;padding:3px 5px;margin-left:8px;border-radius:3px;letter-spacing:.5px}