.site-page{margin:0;min-height:100vh;background:var(--bb-bg);color:var(--bb-text);font-family:var(--bb-font-body);line-height:1.6;overflow:auto}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,80px);border-bottom:2px solid var(--bb-border-soft);background:var(--bb-bg-deep)}
.site-brand{display:flex;align-items:center;gap:18px}.site-brand .lobby-wordmark{display:block;width:190px}.site-brand img{width:100%;height:auto}.site-main{max-width:1180px;margin:auto;padding:40px 28px 72px}.site-main h1,.site-main h2,.site-main h3{line-height:1.5}.site-main h1{font-family:var(--bb-font-display);font-size:clamp(22px,3.5vw,40px)}.site-main h2{font-size:23px}.site-main h3{font-size:20px}.site-main a,.site-footer a,.site-dialog a{color:var(--bb-blue);text-underline-offset:4px}.site-main p{color:var(--bb-text-soft)}
.site-play,.site-main .pixel-menu-button,.site-dialog .pixel-menu-button{display:inline-block;padding:13px 19px;color:var(--bb-text);text-decoration:none;text-align:center;cursor:pointer}.site-heading{margin:12px 0 36px}.site-eyebrow{display:block;color:var(--bb-gold);text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:12px}.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:26px}.site-panel,.site-card{background:var(--bb-surface-gradient);border:2px solid var(--bb-border);box-shadow:var(--bb-card-shadow);padding:24px}.site-card{padding:0;overflow:hidden;color:var(--bb-text)!important;text-decoration:none}.site-card>div{padding:24px}.site-card img{width:100%;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated}.site-card time,.site-article time{color:var(--bb-gold);font-size:13px}.site-card:hover{border-color:var(--bb-border-highlight)}
.site-hero{position:relative;min-height:460px;display:flex;align-items:center;overflow:hidden;border:3px solid var(--bb-border);box-shadow:var(--bb-card-shadow);margin-bottom:36px;background:#071224}.site-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;image-rendering:pixelated}.site-hero-copy{position:relative;z-index:1;padding:48px;max-width:720px;text-shadow:2px 3px #03060b}.site-hero-copy p{font-size:22px;max-width:430px;margin:22px 0 32px}.site-features{margin-bottom:64px}.site-showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:60px 0}.site-showcase img{width:100%;border:3px solid var(--bb-border);image-rendering:pixelated}.site-cta{text-align:center}.site-help-hero{padding:48px 36px;background:linear-gradient(90deg,#08101ef0,#08101e99),url('/assets/site/help-banner.webp') center/cover;border:2px solid var(--bb-border)}.site-search{display:block;max-width:620px;font-weight:700}.site-search input{margin-top:8px;transition:border-color .18s ease,box-shadow .18s ease,opacity .18s ease}.site-search input:focus{border-color:var(--bb-blue);box-shadow:0 0 0 3px #54a8ff25;outline:none}.site-search input.is-placeholder-changing{opacity:.55}.site-search-status{display:block;min-height:21px;margin-top:7px;color:var(--bb-text-muted);font-size:12px;font-weight:500}.site-help-actions{display:flex;align-items:center;gap:30px;margin:32px 0}.site-help-card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.site-help-card.has-search-match{border-color:#4b8ed0;box-shadow:0 5px #03060b,0 0 0 2px #4b8ed022}.site-help-link{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;padding:9px 8px;margin:0 -8px;border-top:1px solid var(--bb-border-soft);color:var(--bb-text)!important;text-decoration:none;font-weight:700;transition:background .15s ease,color .15s ease,padding .15s ease,transform .15s ease}.site-help-link:hover,.site-help-link:focus-visible{padding-left:13px;background:linear-gradient(90deg,#2c5273aa,transparent);color:#fff!important;outline:none;transform:translateX(2px)}.site-help-link.is-search-match{background:#142c43;border-left:3px solid var(--bb-blue);padding-left:11px}.site-help-link.is-ai-match{border-left-color:var(--bb-gold)}.site-help-link-copy{display:grid;gap:2px}.site-help-link strong{font-size:14px}.site-help-link small{color:var(--bb-text-muted);font-size:11px;font-weight:500;line-height:1.35}.site-help-link mark{padding:0 2px;background:#f4d36b;color:#101722}.site-help-link[hidden],.site-panel[hidden]{display:none}.site-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-article{max-width:800px;margin:auto}.site-prose{font-size:16px;line-height:1.8;overflow-wrap:anywhere}.site-prose h2{padding-top:18px;margin-top:24px;border-top:1px solid var(--bb-border-soft)}.site-prose li{margin:8px 0}.site-toc{display:flex;gap:8px 18px;flex-wrap:wrap;margin:24px 0}.site-toc a{font-size:13px}
.site-form{display:grid;gap:18px;max-width:720px}.site-form label,.site-field{display:grid;gap:7px;font-weight:700}.site-form input,.site-form textarea,.site-form select,.site-search input,.site-filter select{width:100%;padding:12px;border:2px solid var(--bb-border);border-radius:0;background:var(--bb-bg-deep);color:var(--bb-text);font:inherit}.site-form textarea{min-height:160px;resize:vertical}.site-form small,.site-contact-note{color:var(--bb-text-muted);font-size:13px}.site-form button{justify-self:start}.site-consent{display:flex;align-items:flex-start;gap:12px;text-align:left;margin:18px 0;font:14px/1.6 var(--bb-font-body);color:var(--bb-text-soft)}.site-consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--bb-blue)}.site-consent a{color:var(--bb-blue)}.site-error{color:#ff9292!important;white-space:pre-wrap}.site-message{padding:18px;background:var(--bb-surface-2);border-left:3px solid var(--bb-border);margin:18px 0;white-space:pre-wrap;overflow-wrap:anywhere}.site-message[data-sender=admin]{border-color:var(--bb-gold)}.site-message small{display:block;color:var(--bb-text-muted)}.site-request{display:block;width:100%;text-align:left;padding:18px;margin:12px 0;border:2px solid var(--bb-border);background:var(--bb-surface-2);color:var(--bb-text);cursor:pointer;font:inherit}.site-request strong,.site-request small{display:block}.site-request[data-unread=true]{border-color:var(--bb-gold)}.site-pagination,.site-filter{display:flex;gap:16px;align-items:center;margin:20px 0;flex-wrap:wrap}.site-footer{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:35px 24px;border-top:2px solid var(--bb-border-soft)}.site-footer small{width:100%;text-align:center;color:var(--bb-text-muted)}
.site-nav-wrap{position:relative;display:inline-flex;margin-right:16px;align-items:center}.site-waffle{position:relative;display:grid!important;grid-template-columns:repeat(3,4px);gap:4px;padding:14px!important;cursor:pointer;background:var(--bb-surface-2);border:2px solid var(--bb-border);color:var(--bb-text)}.site-waffle i{display:block;width:4px;height:4px;background:currentColor}.site-waffle-notification{display:none;position:absolute;right:-5px;top:-5px;width:10px;height:10px;background:#e44747;border:2px solid #03060b;box-shadow:inset 0 1px #ff9595}.site-waffle-notification.is-visible{display:block}.site-menu{position:absolute;left:0;top:calc(100% + 16px);width:260px;z-index:20000;background:var(--bb-surface-gradient);border:3px solid var(--bb-border);box-shadow:var(--bb-frame-shadow);padding:12px}.site-menu[hidden]{display:none}.site-menu>a,.site-menu>button{display:block;width:100%;padding:12px;text-align:left;background:none;border:none;color:var(--bb-text);font:700 15px var(--bb-font-body);text-decoration:none;cursor:pointer}.site-menu>a:hover,.site-menu>button:hover{background:var(--bb-surface-raised)}.site-menu .site-menu-legal{font-size:12px;color:var(--bb-text-muted);padding:8px 12px}.site-menu small{display:block;text-align:center;color:var(--bb-text-muted);font:11px var(--bb-font-body);padding:14px 0 4px}.site-menu hr{border:0;border-top:1px solid var(--bb-border)}
.site-dialog{border:3px solid var(--bb-border);border-radius:var(--bb-radius-window);background:var(--bb-surface-1);color:var(--bb-text);width:min(720px,calc(100vw - 36px));max-height:85dvh;padding:0;box-shadow:var(--bb-frame-shadow);font:15px/1.6 var(--bb-font-body)}.site-dialog::backdrop{background:var(--bb-popup-backdrop,rgba(5,10,22,.74))}.site-dialog header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;background:var(--bb-header-gradient)}.site-dialog h2{font:16px/1.6 var(--bb-font-display);margin:0}.site-dialog header button{font:24px var(--bb-font-body);color:white;background:none;border:0;cursor:pointer;padding:2px 10px}.site-dialog-body{padding:24px;overflow:auto}.site-setting{padding:16px 0;border-bottom:1px solid var(--bb-border-soft);display:grid;grid-template-columns:1fr auto;gap:10px}.site-setting input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--bb-blue)}.site-setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--bb-blue)}.site-setting small{grid-column:1/-1;color:var(--bb-text-muted)}.site-dialog #settings-reset{margin-top:24px}.site-battle-settings{position:fixed;right:18px;bottom:18px;z-index:15000;padding:12px;color:var(--bb-text);background:var(--bb-surface-2);border:2px solid var(--bb-border);cursor:pointer}.site-battle-settings img{width:22px;height:22px}.site-skip{position:fixed;left:16px;top:-100px;z-index:30000;padding:12px;background:var(--bb-bg)}.site-skip:focus{top:16px}
.bb-streamer .bb-private-name{color:transparent!important;text-shadow:none!important;background:repeating-conic-gradient(#587395 0% 25%,#263b59 0% 50%) 0 0/8px 8px!important;user-select:none;min-width:52px;border-radius:0}.bb-streamer .bb-private-name *{color:transparent!important;text-shadow:none!important}.site-settings-note{font-size:13px;color:var(--bb-text-muted)}
@media(max-width:650px){.site-main{padding:24px 18px 48px}.site-header{padding:18px;gap:16px}.site-brand .lobby-wordmark{width:130px}.site-brand{gap:0}.site-hero-copy{padding:28px}.site-hero{min-height:420px}.site-hero-copy p{font-size:18px}.site-showcase{grid-template-columns:1fr}.site-help-hero{padding:26px 20px}.site-header .site-play{padding:10px;font-size:12px}.site-dialog-body{padding:18px}.site-help-actions{gap:20px}.site-nav-wrap{margin-right:12px}}
@media(prefers-reduced-motion:no-preference){.site-dialog[open]{animation:site-popup 150ms ease-out}.site-menu:not([hidden]){animation:site-popup 130ms ease-out}@keyframes site-popup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
.site-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.site-dialog>header{flex:none}.site-dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}.site-dialog-body>h2,.site-dialog-body.site-prose h2{font:700 20px/1.5 var(--bb-font-body)}
.site-fighter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:26px 0}.site-fighter{display:grid;gap:12px;padding:16px;text-align:center;text-decoration:none;background:var(--bb-surface-gradient);border:2px solid var(--bb-border)}.site-fighter img{width:100%;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}.site-fighter strong{color:var(--bb-text);font-size:14px}.site-fighter:hover{border-color:var(--bb-gold)}
@media(max-width:650px){.site-fighter-grid{grid-template-columns:repeat(3,1fr);gap:12px}.site-fighter{padding:12px 6px}}
/* Second-pass visual system: use the game's local display faces and framed cards. */

.site-page,.site-dialog,.site-header,.site-admin-inbox{--bb-font-body:system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--bb-font-body);font-size:18px;letter-spacing:.02em}
.site-page .site-prose{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.8;letter-spacing:.025em}.site-page .site-prose strong{font-weight:400;color:var(--bb-gold)}
.site-page h2,.site-admin-inbox h2{font-family:var(--bb-font-display);font-size:clamp(17px,2vw,25px);line-height:1.65}.site-page h3{font-family:system-ui,sans-serif;font-size:26px;line-height:1.25}
.site-header{position:relative;z-index:16000;min-height:88px;padding:18px 4vw;gap:24px;border-bottom:4px solid #03060b;box-shadow:0 3px #385478}.site-header .site-brand{flex:none}.site-header .site-brand .lobby-wordmark{width:176px}
#navbar .site-nav-wrap,.site-header .site-nav-wrap{align-self:center;flex:none;height:36px;margin:0 16px 0 8px}#navbar .site-waffle,.site-header .site-waffle{width:34px!important;height:34px!important;min-height:0!important;padding:8px!important;gap:3px!important;grid-template-columns:repeat(3,4px);box-shadow:0 3px #03060b!important;align-content:center;justify-content:center;border-width:2px!important}
.site-desktop-nav{display:none;align-items:center;justify-content:center;gap:24px;flex:1}.site-nav-group{position:relative;display:flex;align-items:center;gap:5px}.site-nav-group>a{color:#ecf4ff;text-decoration:none;font-size:19px;padding:12px 0;border-bottom:3px solid transparent}.site-nav-group.is-current>a{color:var(--bb-gold);border-color:var(--bb-gold)}.site-nav-group>button{border:0;background:none;color:#fff;font-size:24px;cursor:pointer}.site-nav-group>button[aria-expanded=true]{color:var(--bb-gold);transform:rotate(180deg)}.site-nav-sub{position:absolute;top:100%;left:-20px;width:240px;padding:12px;background:var(--bb-surface-2);border:3px solid #03060b;box-shadow:0 5px #03060b,inset 0 2px #7aa9e5;z-index:20}.site-nav-sub a{display:block;padding:12px;color:white;text-decoration:none}.site-nav-sub a:hover{background:var(--bb-blue-deep)}
.site-account{position:relative;flex:none}.site-account>button,.site-account>a{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;padding:10px 14px;font:14px var(--bb-font-display)!important;text-decoration:none!important}.site-account-menu{display:none;position:absolute;right:0;top:100%;width:190px;padding:10px;background:var(--bb-surface-2);border:3px solid #03060b;box-shadow:0 5px #03060b;z-index:30}.site-account.is-open .site-account-menu{display:block}.site-account-menu>*{display:block;width:100%;padding:12px;border:0;background:none;color:white;text-align:left;font:18px system-ui,sans-serif;text-decoration:none}.site-account-menu>*:hover{background:var(--bb-blue-deep)}.site-account-menu .site-signout{color:#ff9e9e;cursor:pointer}
.site-page .pixel-menu-button,.site-dialog .pixel-menu-button,.site-admin-inbox .pixel-menu-button,.site-header .pixel-menu-button{background:linear-gradient(#4c75ab,#2c4973)!important;border:3px solid #03060b!important;box-shadow:0 5px #03060b,inset 0 3px #8faecc,inset 0 -4px #203653!important;color:#fff!important;text-shadow:2px 2px #132135;font-family:var(--bb-font-display)!important;font-size:11px;line-height:1.7;cursor:pointer}
.site-page .site-play,.site-header .site-play,.site-dialog button[type=submit],.site-form button[type=submit]{background:linear-gradient(#40b65b,#258337)!important;box-shadow:0 5px #03060b,inset 0 3px #8edf79,inset 0 -4px #185424!important;color:white!important;text-shadow:2px 2px #174724}.site-page .pixel-menu-button:hover,.site-dialog .pixel-menu-button:hover,.site-admin-inbox .pixel-menu-button:hover{filter:brightness(1.15)}.site-page button:disabled,.site-admin-inbox button:disabled{opacity:.45;cursor:default}
.site-page .site-panel,.site-page .site-card,.site-fighter,.site-admin-inbox,.site-request{border:4px solid #03060b;box-shadow:0 7px #03060b,inset 0 3px #547299,inset 3px 0 #2a4363,inset -3px 0 #182c44; border-radius:0;background:linear-gradient(145deg,#20344f,#101b2e)}.site-card:hover,.site-fighter:hover{box-shadow:0 7px #03060b,inset 0 3px var(--bb-gold),inset 3px 0 #496386,inset -3px 0 #182c44}
.site-page a:not(.pixel-menu-button):not(.site-card):not(.site-fighter):not(.lobby-wordmark):not(.site-skip),.site-dialog a{color:#efcf87;text-decoration:none}.site-page .site-prose a,.site-dialog .site-prose a,.site-consent a{padding:1px 4px;background:#33455b;border-bottom:2px solid #caa45b;color:#ffe4a5;text-decoration:none}.site-page a:hover,.site-dialog a:hover{color:#fff3c9}.site-help-link{color:#e3ecfa!important}.site-help-link:hover{color:#fff!important;background:#243e5d}.site-help-card{position:relative;padding:26px!important;min-height:270px}.site-help-art{height:80px;width:80px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(4px 5px #03060b);margin-bottom:12px}.site-help-card h2{margin:6px 0 20px;font-size:18px}.site-help-actions .pixel-menu-button{font-size:10px}
.site-about .site-main{max-width:none;padding:0 0 72px}.site-about .site-main>section:not(.site-hero){max-width:1180px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}.site-about .site-hero{display:block;min-height:560px;height:65vw;max-height:690px;overflow:visible;border:0;box-shadow:none;margin:0 0 200px}.site-about .site-hero>img{opacity:1;object-position:center;filter:brightness(.85);height:100%;width:100%}.site-about .site-hero-copy{position:absolute;top:auto;bottom:-145px;left:max(28px,calc((100vw - 1124px)/2));padding:32px 40px;max-width:670px;background:linear-gradient(135deg,#23364a,#101c2e);border:5px solid #03060b;box-shadow:0 9px #03060b,inset 0 4px #7190af;z-index:2}.site-about .site-hero h1{font-size:clamp(22px,3vw,35px);margin:18px 0}.site-about .site-hero p{font-size:21px;max-width:none;margin:18px 0 26px}.site-about .site-features{margin-bottom:80px}.site-modes{margin-top:75px;margin-bottom:80px}.site-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:35px}.site-mode-art{height:280px;background:radial-gradient(#46658a,#0a1424);overflow:hidden}.site-mode .site-mode-art img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;transform:scale(.92);transition:transform .2s}.site-mode:hover .site-mode-art img{transform:scale(1)}.site-mode h3{font-family:var(--bb-font-display);font-size:22px}.site-mode p{min-height:90px}.site-showcase{margin-top:80px!important}.site-cta{padding:32px!important;margin-top:70px!important}
.site-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;max-width:none;padding:55px max(28px,calc((100vw - 1124px)/2)) 22px;background:linear-gradient(180deg,#14243c,#080f1e);border-top:6px solid #03060b;box-shadow:inset 0 3px #4d688b;font-family:system-ui,sans-serif}.site-footer-brand img{max-width:200px;width:100%;image-rendering:pixelated}.site-footer-brand p{font-size:22px;color:#cad8e8}.site-footer-brand span{color:var(--bb-gold);font:10px var(--bb-font-display)}.site-footer h3{font:12px var(--bb-font-display);color:#91abc9;margin:0 0 22px}.site-footer a{display:block;padding:7px 0;font-size:18px}.site-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:2px solid #385478;padding-top:20px;color:#829aba;font-size:14px}
.site-dialog{border:4px solid #03060b;box-shadow:0 8px #03060b,0 0 0 2px #567696,0 22px 70px #000b}.site-dialog>header{padding:20px 24px;border-bottom:4px solid #03060b}.site-dialog h2{font-size:clamp(17px,2vw,23px)!important;line-height:1.5}.site-setting{margin:0 0 20px;padding:18px;background:linear-gradient(#1c2e48,#111e32);border:3px solid #03060b;box-shadow:0 4px #03060b,inset 0 2px #4e698c;font:11px/1.7 var(--bb-font-display)}.site-setting small,.site-settings-note{font:16px/1.5 system-ui,sans-serif}.site-setting output{color:var(--bb-gold)}
.site-setting input[type=range]{appearance:none;-webkit-appearance:none;height:18px;background:linear-gradient(#080e18,#182b43);border:3px solid #03060b;box-shadow:inset 0 2px #000;margin:15px 0 8px}.site-setting input[type=range]::-webkit-slider-thumb{appearance:none;width:25px;height:32px;background:linear-gradient(#acd0f0,#4c85b8);border:3px solid #03060b;box-shadow:inset 0 3px #e3f4ff,0 4px #03060b;cursor:ew-resize;border-radius:0}.site-setting input[type=range]::-moz-range-thumb{width:20px;height:26px;background:#77a9d2;border:3px solid #03060b;box-shadow:inset 0 3px #e3f4ff,0 4px #03060b;border-radius:0}
.site-consent input[type=checkbox],.site-setting input[type=checkbox]{appearance:none;-webkit-appearance:none;width:27px;height:27px;border:3px solid #03060b;border-radius:0;background:#23374f;box-shadow:0 3px #03060b,inset 0 2px #6b85a2;cursor:pointer;display:grid;place-content:center;flex:none}.site-consent input:checked,.site-setting input[type=checkbox]:checked{background:#309d51}.site-consent input:checked:after,.site-setting input[type=checkbox]:checked:after{content:'✓';color:#fff;font:bold 22px monospace;text-shadow:2px 2px #175629}.site-consent{font:17px/1.65 system-ui,sans-serif}.site-consent input:focus-visible{outline:3px solid var(--bb-gold);outline-offset:4px}.site-dialog.site-battle-consent-dialog{width:min(560px,calc(100vw - 36px))}.battle-consent{display:grid;gap:16px;margin:4px 0 20px}.battle-legal-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}.battle-legal-card{display:grid;justify-items:center;gap:4px;min-height:126px;padding:10px 8px;background:linear-gradient(145deg,#203b59,#111f35);border:3px solid #03060b;box-shadow:0 4px #03060b,inset 0 2px #6686aa;color:#e7f2ff!important;text-align:center;text-decoration:none}.battle-legal-card:hover,.battle-legal-card:focus-visible{background:linear-gradient(145deg,#294d70,#142842);border-color:#8fc8ff;outline:none}.battle-legal-card img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(2px 3px #03060b)}.battle-legal-card strong{font:11px/1.45 var(--bb-font-display);color:#fff}.battle-consent .site-consent{width:100%;margin:0;align-items:center}.battle-consent .site-consent span{min-width:0}
.site-form select,.site-filter select{appearance:none;border:3px solid #03060b!important;box-shadow:0 4px #03060b,inset 0 2px #6582a6!important;background:#233c5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath fill='%23f1d48d' d='M0 0h18v4h-4v4h-3v4H7V8H4V4H0z'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat!important;padding:12px 40px 12px 14px!important;font:17px system-ui,sans-serif!important;color:white!important;border-radius:0!important}.site-form input,.site-form textarea{font:18px system-ui,sans-serif;background:#0c1728;border:3px solid #03060b;box-shadow:inset 0 2px #304966}.site-filter{padding:16px;background:#0b1729;border:3px solid #03060b}.site-filter label{flex:1;min-width:140px;font-size:16px}.site-filter select{display:block;margin-top:8px;width:100%}
.site-inbox{min-width:0}.site-inbox[aria-busy=true]{opacity:.65;pointer-events:none;transition:opacity .15s}.site-request{padding:22px;margin:18px 0;position:relative;min-height:100px;font:19px system-ui,sans-serif!important;color:white!important}.site-request strong{font-weight:400;font-size:23px;margin-bottom:12px}.site-request small{font-size:14px;color:#a9c0db}.site-ticket-status{float:right;background:#304d6a;border:2px solid #03060b;padding:5px 9px;color:#f1d18a;font-size:13px;text-transform:uppercase}.site-request[data-unread=true]{box-shadow:0 6px #03060b,inset 5px 0 #e4bc66,inset 0 2px #4d6a8c}.site-message{margin:24px 0 24px 58px;padding:20px 24px;position:relative;background:#213953;border:3px solid #03060b;box-shadow:0 4px #03060b,inset 0 2px #567897;border-radius:0 8px 8px 8px;white-space:normal}.site-message p{white-space:pre-wrap;margin:10px 0 0;font-size:18px;line-height:1.6}.site-message>img{position:absolute;left:-60px;top:0;width:44px;height:44px;object-fit:contain;image-rendering:pixelated;background:#122036;border:3px solid #03060b;padding:5px;box-shadow:0 4px #03060b}.site-message[data-sender=admin]{background:#283a32;border-color:#03060b;box-shadow:0 4px #03060b,inset 0 3px #719674}.site-message small{color:#ecd28c;font-size:13px}.site-admin-inbox{margin:36px 0!important;padding:28px!important;width:100%;box-sizing:border-box}.site-inbox>.site-form{max-width:none;border-top:3px solid #03060b;margin-top:28px;padding-top:25px}.site-admin-inbox .site-form{max-width:none}.site-admin-inbox .site-inbox>h2{font-family:system-ui,sans-serif;font-size:26px}
.bb-streamer #spectate-player-name,.bb-streamer .team-hud-player-name,.bb-streamer .bs-card-player-name{visibility:hidden!important;background:none!important}
@media(min-width:1100px){.site-desktop-nav{display:flex}.site-header>.site-play{font-size:10px;padding:12px}.site-header .site-account{margin-left:0}}
@media(max-width:1099px){.site-header{padding:16px 20px;gap:15px}.site-header .site-brand .lobby-wordmark{width:150px}.site-header>.site-play{margin-left:auto}.site-header .site-account>button,.site-header .site-account>a{font-size:10px!important;max-width:130px}.site-menu{max-height:75dvh;overflow:auto}.site-about .site-hero-copy{left:28px;max-width:620px}}
@media(max-width:650px){.site-header{flex-wrap:wrap;gap:15px}.site-header .site-brand{flex:1}.site-header .site-account{margin-left:auto}.site-header>.site-play{display:none}.site-header .site-brand .lobby-wordmark{width:132px}.site-about .site-hero{height:420px;min-height:420px;margin-bottom:280px}.site-about .site-hero-copy{left:20px;right:20px;bottom:-240px;padding:25px}.site-about .site-hero p{font-size:19px}.site-about .site-hero h1{font-size:21px}.site-mode-grid{grid-template-columns:1fr}.site-mode-art{height:230px}.site-footer{grid-template-columns:1fr 1fr;padding:35px 24px;gap:30px}.site-footer-brand{grid-column:1/-1}.site-footer-bottom{display:block}.site-footer-bottom span{display:block;margin-top:12px}.site-help-actions{gap:15px;flex-wrap:wrap}.site-setting{padding:14px;font-size:10px}.site-dialog>header{padding:18px}.site-message{margin-left:44px;padding:14px}.site-message>img{left:-47px;width:35px;height:35px}.site-admin-inbox{padding:18px!important}.site-ticket-status{float:none;display:inline-block;margin-bottom:10px}.site-help-art{width:75px;height:75px}}
.site-select{position:relative;min-width:140px;width:100%;font:17px system-ui,sans-serif}.site-select select[hidden]{display:none!important}.site-select-trigger{width:100%;text-align:left;padding:13px 16px;background:linear-gradient(#365677,#243b57);border:3px solid #03060b;color:#fff;box-shadow:0 4px #03060b,inset 0 2px #6582a6;font:inherit;cursor:pointer}.site-select-options{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:100;max-height:260px;overflow:auto;padding:6px;background:#172b43;border:3px solid #03060b;box-shadow:0 6px #03060b,inset 0 2px #547496}.site-select-options[hidden]{display:none}.site-select-options button{display:block;width:100%;border:0;border-bottom:2px solid #101d30;text-align:left;padding:12px;background:transparent;color:#e9f2ff;font:inherit;cursor:pointer}.site-select-options button[aria-selected=true]{color:#f8d78d;background:#304d68}.site-select-options button:focus,.site-select-options button:hover{outline:2px solid #7faccf;outline-offset:-2px;background:#466b8c}.site-select-trigger:focus-visible{outline:3px solid #f8d78d;outline-offset:3px}.site-nav-settings{border:0;background:none;color:#e2edfc;font:12px system-ui,sans-serif;cursor:pointer;padding:12px}.site-nav-settings:hover{color:#f8d78d}
/* Battle navigation stays out of the timer and teammate HUD. */
body.site-auth{--bb-font-body:system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--bb-font-body)}.site-auth a{color:#f4d28a;text-decoration:none}.site-auth a:hover{color:#fff1c9;text-decoration:none}.site-dialog button:disabled{opacity:.45;cursor:default}

.site-menu{--bb-font-body:system-ui,-apple-system,"Segoe UI",sans-serif}
/* Readable copy, stationary links, and aligned navigation controls. */
.site-page,.site-dialog,.site-header,.site-admin-inbox,.site-auth{font-weight:400;letter-spacing:normal}
.site-prose,.site-main p,.site-footer,.site-dialog-body,.site-consent,.site-message p,.site-select,.site-menu{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400}
.site-page .site-prose{font-size:16px;line-height:1.75;letter-spacing:normal}.site-page .site-prose strong{font-weight:600;color:inherit}
.site-main p{font-size:16px;line-height:1.65}.site-menu>a,.site-menu>button{font-weight:400}.site-request strong{font-weight:600}.site-setting small,.site-settings-note{font:400 13px/1.5 system-ui,sans-serif}
.site-page a:not(.pixel-menu-button):not(.site-card):not(.site-fighter):not(.lobby-wordmark):not(.site-skip),.site-dialog a,.site-auth a{color:#dce9fa;text-decoration:none}
.site-page .site-prose a,.site-dialog .site-prose a,.site-consent a{background:transparent;padding:0;border-bottom:1px solid #8298b4;color:#dce9fa}
.site-page a:hover,.site-dialog a:hover,.site-auth a:hover{color:#fff}.site-help-link:hover{padding-left:0}
.site-nav-group>a{display:flex;align-items:center;min-height:44px;box-sizing:border-box;font:500 16px/1.4 system-ui,sans-serif;padding:10px 0}
.site-nav-group>button{display:flex;align-items:center;justify-content:center;width:28px;height:44px;padding:0;line-height:1;flex:none;font-size:0;transform:none!important}
.site-nav-group>button:after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.site-nav-group>button[aria-expanded=true]:after{transform:translateY(2px) rotate(225deg)}
.site-nav-group.is-current>a,.site-page .site-nav-group.is-current>a{color:#fff;border-color:#9bbde7}.site-nav-group>button[aria-expanded=true]{color:#dce9fa}
.site-nav-sub{box-sizing:border-box}.site-nav-sub[hidden]{display:none!important}.site-nav-sub a{font:400 15px/1.5 system-ui,sans-serif}.site-nav-settings{font:500 15px/1.4 system-ui,sans-serif;color:#dce9fa}.site-nav-settings:hover{color:white}
.site-select-options button[aria-selected=true]{color:#fff}.site-select-trigger:focus-visible{outline-color:#b4d6ff}
.site-settings-window{width:min(600px,calc(100vw - 32px))}.site-settings-window>header{padding:14px 18px}.site-settings-window .site-dialog-body{padding:16px}.site-settings-window .site-setting{padding:12px;margin-bottom:12px;gap:6px;font-size:10px}.site-settings-window .site-setting input[type=range]{margin:8px 0 5px}.site-settings-window #settings-reset{margin-top:8px}.site-settings-window .site-settings-note{margin:8px 0}
.site-settings-side[open]{position:fixed;inset:56px 16px auto auto;margin:0;width:min(350px,calc(100vw - 32px));max-height:calc(100dvh - 80px);z-index:16001;box-sizing:border-box;box-shadow:0 0 0 3px #03060b,0 6px #03060b,0 16px 28px #0006}
.site-settings-side h2{font-size:14px!important}.site-settings-side .site-show-controls{margin-bottom:14px;width:100%;font-size:10px}.site-settings-side .site-setting{font:500 13px/1.4 system-ui,sans-serif}.site-settings-side .site-setting output{color:#dce9fa}.site-settings-side #settings-reset{font-size:9px}
.site-battle-settings.fullscreen-toggle{top:calc(8px + env(safe-area-inset-top));right:calc(50px + env(safe-area-inset-right));bottom:auto;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;z-index:10005}.site-battle-settings.fullscreen-toggle img{width:14px;height:14px}
#battle-keybind-hud .controls-popover{max-height:calc(100dvh - 120px);overflow-y:auto;box-sizing:border-box}
#profile-sign-out{margin-top:22px;background:linear-gradient(#cf5050,#9c2929);color:#fff}
@media(max-width:480px){.site-battle-settings.fullscreen-toggle{width:30px;min-width:30px;height:30px;min-height:30px}}

/* Shared popup contract, including legal consent and the in-game side panel. */
.site-dialog.bb-popup{border:var(--bb-border-width) solid var(--bb-border);border-radius:var(--bb-radius-window);background:var(--bb-surface-gradient);box-shadow:var(--bb-frame-shadow)}
.site-dialog>.bb-popup-header{position:relative;min-height:64px;box-sizing:border-box;padding:14px 62px;border-bottom:2px solid rgba(255,255,255,.14);justify-content:center}
.site-dialog .bb-popup-title{text-align:center;text-transform:uppercase;text-shadow:var(--bb-title-shadow);font-size:var(--bb-title-lg)!important;line-height:1.3;outline:none}
.site-dialog>.bb-popup-header>.bb-close{position:absolute;right:14px;top:calc(50% - 21px);transform:none;padding:0}
.site-settings-side .bb-popup-title{font-size:14px!important}.site-settings-side>.bb-popup-header{padding:14px 48px;min-height:54px}
#battle-keybind-hud .controls-mini-toggle{display:none!important}
.site-key-remap{margin:16px 0;border:2px solid var(--bb-border);background:#101d30;padding:12px}
.site-key-remap summary{cursor:pointer;font:11px/1.7 var(--bb-font-display);color:#e5efff}.site-key-remap p{font:9px/1.8 var(--bb-font-display)}.site-key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font:10px/1.7 var(--bb-font-display)}.site-key-row button{min-width:64px;padding:8px!important;font-size:10px!important}
.site-dialog #settings-reset.is-reset{background:linear-gradient(#40b65b,#258337)!important;box-shadow:0 5px #03060b,inset 0 3px #8edf79,inset 0 -4px #185424!important}

/* Reset keeps the values legible while they return to their defaults. */
.site-settings-window .site-dialog-body{position:relative}
.site-settings-window.is-resetting .site-setting{animation:site-reset-card .72s ease both}
.site-dialog #settings-reset{background:linear-gradient(#df5757,#9e2525)!important;box-shadow:0 5px #03060b,inset 0 3px #ff9898,inset 0 -4px #6c1717!important;color:#fff}
.site-dialog #settings-reset:hover{background:linear-gradient(#f16a6a,#b63030)!important}
.site-settings-window.is-resetting #settings-reset{animation:site-reset-button .72s ease both}
.site-key-row button.is-resetting-key{animation:site-reset-key .62s ease both;background:linear-gradient(#58c8ff,#2679b4)!important;color:#fff}
@keyframes site-reset-card{0%,100%{filter:none}35%{filter:brightness(1.45) saturate(1.2);transform:translateX(3px)}}
@keyframes site-reset-button{35%{transform:scale(1.08);filter:brightness(1.35)}}
@keyframes site-reset-key{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.site-settings-window.is-resetting .site-setting,.site-settings-window.is-resetting #settings-reset,.site-key-row button.is-resetting-key{animation:none}}

/* Compact controls and stable, shared page chrome. */
.site-dialog .bb-popup-title{font-size:clamp(14px,2vw,22px)!important;overflow-wrap:anywhere}
.site-settings-side .bb-popup-title{font-size:12px!important}
.site-settings-side{width:min(320px,calc(100vw - 32px))!important}
.site-settings-side>.bb-popup-header{min-height:44px;padding:10px 40px}
.site-settings-side>.bb-popup-header>button.bb-close{width:26px!important;min-width:26px!important;height:26px!important;min-height:26px!important;font-size:10px!important;top:calc(50% - 13px);right:10px}
.site-settings-side .site-dialog-body{padding:10px}.site-settings-side .site-setting{padding:10px;margin-bottom:9px;gap:4px;font:9px/1.6 var(--bb-font-display)}
.site-settings-side .site-setting input[type=range]{height:12px;margin:7px 0 4px}.site-settings-side .site-setting input[type=range]::-webkit-slider-thumb{height:24px;width:20px}
.site-settings-side .site-setting input[type=checkbox]{width:22px;height:22px}
.site-setting-title{display:flex;align-items:center;gap:8px}.site-setting-info-wrap{position:relative;display:inline-flex;flex:none}.site-setting-info{display:inline-grid;place-content:center;flex:none;width:18px;height:18px;padding:0;border:1px solid #738daf;background:#263d5a;color:#e7f1ff;font:600 12px/1 system-ui;cursor:help}
.site-setting-tooltip{display:none;position:absolute;z-index:5;top:calc(100% + 6px);left:-120px;width:210px;padding:10px;border:2px solid #526b89;background:#0b1629;color:#e7f1ff;box-shadow:0 4px #03060b;font:400 12px/1.5 system-ui;text-align:left}
.site-setting-info:hover+.site-setting-tooltip,.site-setting-info:focus+.site-setting-tooltip{display:block}
.site-key-remap{border:3px solid #03060b;background:linear-gradient(#1c2e48,#111e32);box-shadow:0 4px #03060b,inset 0 2px #4e698c;padding:12px;margin:12px 0}
.site-settings-side .site-key-remap summary,.site-settings-side .site-key-row{font:9px/1.7 var(--bb-font-display)}.site-key-row button.is-in-use{background:linear-gradient(#d35656,#9d2727)!important}
.site-about .site-hero{height:clamp(300px,42vw,480px);min-height:0;max-height:480px}
.site-header,#navbar{top:0;left:0;right:0;width:100%;height:60px;min-height:60px;box-sizing:border-box;padding:8px 24px;gap:12px;background:linear-gradient(90deg,rgba(16,29,47,.76),rgba(23,26,42,.94) 38%,rgba(34,24,40,.88) 72%,rgba(43,27,39,.76)),linear-gradient(100deg,#243d50,#262b40 48%,#493042);border-bottom:2px solid #424052;box-shadow:0 4px 16px rgba(5,13,35,.35),inset 0 2px rgba(182,186,208,.09)}
.site-header{position:fixed;z-index:1000}.site-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("/assets/chromas/lobby-chroma-mosaic.svg") top left / 576px 96px repeat;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 9%,transparent 25%,transparent 93%,rgba(0,0,0,.45) 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 9%,transparent 25%,transparent 93%,rgba(0,0,0,.45) 100%)}.site-header>*{position:relative}
#navbar{position:relative!important;z-index:1000}.site-page,.site-auth,.admin-page{padding-top:60px;scrollbar-gutter:stable}.site-header{display:grid;grid-template-columns:250px minmax(0,1fr) 132px 160px;align-items:center}
.site-header .site-brand{gap:0}.site-header .site-brand .lobby-wordmark{width:176px;margin:0 0 0 4px}.site-header .site-desktop-nav{grid-column:2;grid-row:1}.site-header>.site-play{grid-column:3;grid-row:1}.site-header>.site-account{grid-column:4;grid-row:1;width:160px;margin:0}
.site-header>.site-play,.site-header .site-account>button,.site-header .site-account>a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-height:36px;width:100%;padding:6px 10px!important;font-size:10px!important;line-height:1.5;overflow:hidden}.site-account-caret{flex:none;margin-left:10px;font-size:10px;line-height:1}
.site-header .site-brand img{display:block;width:176px;height:auto}.site-header .site-desktop-nav{gap:20px}.site-header .site-account>button>span:first-child{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1099px){.site-header{grid-template-columns:minmax(0,1fr) 110px 130px}.site-header .site-desktop-nav{display:none}.site-header>.site-play{grid-column:2}.site-header>.site-account{grid-column:3;width:130px}.site-header .site-brand img{width:132px}}
@media(max-width:650px){.site-header{grid-template-columns:minmax(0,1fr) 115px;padding:8px 16px;gap:12px}.site-header>.site-play{display:none}.site-header>.site-account{grid-column:2;width:115px}.site-header .site-brand img{width:120px}.site-header .site-brand .lobby-wordmark{width:120px}.site-about .site-hero{height:330px;min-height:330px}}
/* Reserve the exact waffle footprint before shell.js replaces this node. */
.site-menu-placeholder{display:inline-block;flex:none;width:34px;height:36px;margin:0 16px 0 8px}
.site-dialog .site-setting-tooltip{white-space:normal}

/* Navbar controls share the lobby's compact pixel treatment. */
.site-header .site-waffle{background:var(--bb-surface-2)!important;border:0!important;color:var(--bb-text)!important;box-shadow:0 3px #03060b!important}
#navbar .site-waffle:hover,.site-header .site-waffle:hover{background:#1e395e!important;color:#fff!important;filter:brightness(1.12);outline:0}
#navbar .site-waffle:focus-visible,.site-header .site-waffle:focus-visible{background:#1e395e!important;color:#fff!important;outline:2px solid #7798bf;outline-offset:2px}
#navbar .lobby-wordmark{transform:translateY(1px)}
.site-nav-group{height:44px;padding:0 2px;transition:background-color .14s ease}
.site-nav-group:before{content:"";position:absolute;z-index:1;top:100%;left:-10px;right:-10px;height:10px;background:transparent}
.site-nav-group:after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:3px;background:transparent}
.site-nav-group.is-current:after{background:#a9c9ed;box-shadow:4px 0 #a9c9ed,-4px 0 #a9c9ed}
.site-nav-group:hover,.site-nav-group:focus-within{background:rgba(65,91,127,.24)}
.site-nav-group>a{padding-left:8px;border-bottom:0!important;font:10px/1.6 var(--bb-font-display)}.site-nav-group>button{width:25px;margin-right:3px;color:#b9cae0}
.site-nav-group>button:after{width:3px;height:3px;border:0;background:currentColor;box-shadow:3px 3px currentColor,6px 6px currentColor,9px 3px currentColor,12px 0 currentColor;transform:translate(-6px,-1px);transition:color .14s ease}
.site-nav-group>button[aria-expanded=true]:after{color:#f1d48d;box-shadow:3px -3px currentColor,6px -6px currentColor,9px -3px currentColor,12px 0 currentColor;transform:translate(-6px,3px)}
:is(.site-menu,.site-nav-sub,.site-account-menu){box-sizing:border-box;padding:7px;border:3px solid #03060b;background:linear-gradient(145deg,#233b5a,#101d31 68%,#0b1627);box-shadow:0 6px #03060b,0 0 0 1px #526f92,inset 0 3px #6685a8;color:#eef5ff}
.site-menu{top:calc(100% + 9px)}.site-nav-sub{top:calc(100% + 7px);left:-10px;width:225px}.site-account-menu{top:calc(100% + 8px);width:190px}
:is(.site-menu,.site-nav-sub,.site-account-menu)>:is(a,button){position:relative;display:flex;align-items:center;min-height:38px;box-sizing:border-box;width:100%;padding:9px 12px;border:0;border-bottom:2px solid #2b405b;background:transparent;color:#e8f1ff!important;text-align:left;text-decoration:none;font:9px/1.7 var(--bb-font-display);cursor:pointer;transition:background-color .12s ease,color .12s ease}
:is(.site-menu,.site-nav-sub,.site-account-menu)>:is(a,button):last-of-type{border-bottom-color:transparent}
:is(.site-menu,.site-nav-sub,.site-account-menu)>:is(a,button):hover,:is(.site-menu,.site-nav-sub,.site-account-menu)>:is(a,button):focus-visible{padding-left:12px;background:linear-gradient(90deg,#315a82,#294667);color:#fff!important;outline:2px solid #82a6ce;outline-offset:-2px}
.site-account-profile-link:after{content:"";width:12px;height:12px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%2391afd2' d='M0 3h2v7h7V8h2v4H0V3zm5-3h7v7h-2V3L5 8 4 7l5-5H5V0z'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.site-menu>hr{margin:0 5px;border-color:#395371}.site-menu>small{padding:9px 0 3px}
.site-menu>.site-menu-legal{min-height:38px;padding:9px 12px;color:#c7d5e8!important;font:9px/1.7 var(--bb-font-display)}
.site-account:after{content:"";position:absolute;top:100%;left:0;right:0;height:10px;background:transparent}
.site-account-caret{display:block;width:3px;height:3px;margin:0 12px 5px 3px;background:currentColor;box-shadow:3px 3px currentColor,6px 6px currentColor,9px 3px currentColor,12px 0 currentColor;color:#d8e6f7;font-size:0;transition:color .14s ease}.site-account-trigger[aria-expanded=true] .site-account-caret{margin-top:5px;margin-bottom:0;color:#fff2a6;box-shadow:3px -3px currentColor,6px -6px currentColor,9px -3px currentColor,12px 0 currentColor}
.site-account-menu .site-signout{color:#ffaaaa!important}.site-account-menu .site-signout:hover,.site-account-menu .site-signout:focus-visible{background:linear-gradient(90deg,#74343d,#51242c)}

#battle-keybind-hud[data-state="collapsed"] .controls-popover{visibility:hidden}
.site-page section[id]{scroll-margin-top:90px}

.site-support-badge{display:none;float:right;margin-top:1px;padding:3px 5px 2px;background:#b52e32;border:2px solid #03060b;box-shadow:inset 0 1px #f17b7b;color:#fff;font:8px/1 var(--bb-font-display);letter-spacing:.06em}.site-support-badge.is-visible{display:inline-block}
.site-help-actions .site-support-badge{float:none;margin:0 0 0 6px;vertical-align:middle}

/* Keep the Help Center request list visually stable while its data is loading. */
.site-request-skeleton{position:relative;min-height:100px;box-sizing:border-box;padding:22px;margin:18px 0;border:3px solid #03060b;background:linear-gradient(105deg,#1b304b,#213953);box-shadow:0 4px #03060b,inset 0 2px #567897}.site-skeleton-title,.site-skeleton-meta,.site-skeleton-status{display:block;background:#3b5878}.site-skeleton-title{width:42%;height:22px;margin:3px 0 17px}.site-skeleton-meta{width:58%;height:12px}.site-skeleton-status{position:absolute;right:22px;top:22px;width:72px;height:23px}

/* Submission confirmations replace the form with a short, deliberate arrival. */
.site-submit-success{opacity:0;transform:translateY(14px) scale(.98);padding:28px;border:3px solid #03060b;background:linear-gradient(135deg,#274f48,#18362f);box-shadow:0 6px #03060b,inset 0 2px #78ab91;transition:opacity .22s ease-out,transform .28s cubic-bezier(.2,.8,.25,1)}
.site-submit-success.is-visible{opacity:1;transform:translateY(0) scale(1)}
.site-submit-success h2{margin-top:0;color:#f4dda0}.site-submit-success .pixel-menu-button{margin-top:10px}
@media (prefers-reduced-motion:reduce){.site-submit-success{transition:none;transform:none}}

.site-volume-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.site-volume-row .site-setting{min-width:0}.site-volume-row input[type=range]{min-width:0;box-sizing:border-box}.site-settings-side .site-volume-row .site-setting{padding:8px;font-size:8px;column-gap:3px}

/* Compact, clearly targeted Help Center results. */
.site-page .site-help-card{min-height:0;padding:22px!important}
.site-page .site-help-card h2{margin:4px 0 13px}
.site-page .site-help-link{padding:8px;margin:0 -6px}
.site-page .site-help-link:hover,.site-page .site-help-link:focus-visible{padding-left:12px;background:linear-gradient(90deg,#315779cc,transparent);transform:translateX(2px)}
.site-page .site-help-link.is-search-match{padding-left:10px}

/* Help search links stay stationary; AI lookup uses a compact activity mark. */
.site-page .site-help-link:hover,.site-page .site-help-link:focus-visible{padding-left:8px;transform:none}
.site-page .site-help-link.is-search-match:hover,.site-page .site-help-link.is-search-match:focus-visible{padding-left:10px}
.site-ai-finding{display:inline-flex;align-items:center;gap:7px;margin-left:9px;color:#b8cae0}.site-ai-finding i{--bb-loader-size:24px}
.site-ai-finding[hidden]{display:none}
.site-runtime-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 900; width: min(680px, calc(100% - 32px)); box-sizing: border-box; padding: 12px 18px; border: 1px solid #e6b85a; background: #172238; color: #fff2cb; font: 14px/1.5 Lato, sans-serif; box-shadow: 0 4px 20px #0008; overflow-wrap: anywhere; max-height: 25vh; overflow: auto; }
.site-runtime-banner[hidden] { display: none; }

.site-settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.site-settings-window .site-settings-footer #settings-reset{margin-top:0}
.site-settings-renderer{font:11px/1.4 system-ui,sans-serif;color:#94a3b8;white-space:nowrap}

/* Generated BB website art, with separate mobile hero composition. */
.site-hero-art{position:absolute;inset:0;display:block;overflow:hidden}
.site-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto}
.site-about .site-hero-art img{filter:brightness(.85)}
.site-support-heading{padding:32px 36px;border:2px solid var(--bb-border);background:linear-gradient(90deg,#08101ef0,#08101e80),url('/assets/site/help-banner.webp') center/cover}
.site-article-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:24px 0;border:2px solid var(--bb-border);image-rendering:pixelated}
.site-showcase img{height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:650px){.site-support-heading{padding:26px 20px}.site-help-hero,.site-support-heading{background-position:65% center}.site-about .site-hero-art img{object-position:center 42%}}
.site-mode .site-mode-art{padding:0;height:auto;aspect-ratio:4/3}
.site-mode .site-mode-art img{object-fit:cover;transform:none}
.site-mode:hover .site-mode-art img{transform:none}
.site-card:not(.site-mode)>img{aspect-ratio:4/3}
@media(min-width:651px){.site-about .site-hero-copy{bottom:-210px}.site-about .site-hero{margin-bottom:265px}}

.site-consent input[type="checkbox"]:checked,
.site-setting input[type="checkbox"]:checked {
  background-image: url("/assets/ui/pixel-check.webp") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.site-consent input[type="checkbox"]:checked::after,
.site-setting input[type="checkbox"]:checked::after {
  content: none !important;
}

/* Shared by signup and account settings. */
:is(.auth-card, .email-dialog) .email-edit.pixel-menu-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-height:36px;
  padding:9px 12px;
  border:0;
  border-radius:0;
  background:linear-gradient(135deg,#18a462,#0e8255);
  color:#fff;
  font:10px/1.4 var(--bb-font-display,"Press Start 2P",monospace);
  text-transform:uppercase;
  box-shadow:var(--bb-control-shadow);
  cursor:pointer;
}
:is(.auth-card, .email-dialog) .email-edit.pixel-menu-button:hover:not(:disabled) { filter:brightness(1.12); }
:is(.auth-card, .email-dialog) .email-edit.pixel-menu-button:focus-visible { outline:3px solid var(--bb-gold,#ffd166); outline-offset:4px; }
:is(.auth-card, .email-dialog) .email-edit.pixel-menu-button:active:not(:disabled) { transform:translateY(2px); box-shadow:var(--bb-control-shadow-pressed); }

/* Keep the unit lowercase even inside uppercase arcade action buttons. */
.email-dialog [data-send], .email-dialog [data-resend],
.auth-card #signupBtn, .auth-card #resend-button { text-transform:none; }

/* Container: stack top-center with gap */
.sonner-wrap {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center; /* center horizontally */
  gap: 12px; /* keep stacked notifications visually distinct */
  pointer-events: none;
  z-index: 2147483647;
}

/* Toast card */
.sonner {
  pointer-events: auto;
  max-width: 420px;
  width: calc(100% - 24px);
  box-sizing: border-box;
  background: var(--bb-popup-bg);
  color: #fff;
  border: 2px solid var(--bb-border);
  border-radius: var(--bb-radius-card);
  box-shadow: var(--bb-card-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-16px); /* enter from top */
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
  will-change: transform, opacity;
  font-family: "Lato", sans-serif;

  /* Inline layout: content + actions in one row */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* text can wrap beside the action */
  grid-auto-rows: auto;
}

.sonner--success {
  border-color: rgba(83, 214, 139, 0.34);
  background: linear-gradient(135deg, #172d2b, #1f2030);
}

.sonner--error {
  border-color: rgba(244, 112, 112, 0.38);
  background: linear-gradient(135deg, #382126, #22202e);
}

.sonner--info {
  border-color: rgba(111, 166, 240, 0.32);
  background: linear-gradient(135deg, #18283a, #22202e);
}

/* Entered state */
.sonner.show {
  opacity: 1;
  transform: translateY(0);
}

/* Inline content area */
.sonner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  min-width: 0; /* allow text to wrap instead of overflowing */
}

.sonner__hdr {
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0;
  font-size: 14px;
  word-break: break-word;
}

.sonner__msg {
  margin: 3px 0 0 0;
  line-height: 1.3;
  font-size: 12px;
  word-break: break-word;
  white-space: pre-wrap;
}

.sonner--description .sonner__msg {
  margin-top: 0;
}

.sonner--short .sonner__msg {
  font-weight: 700;
}

/* Actions: inline with text, same row, aligned center */
.sonner__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 10px 0;
}

.sonner .sonner__btn {
  --bb-chroma-corner-size: 10px;
  --bb-control-shadow: 0 0 0 2px var(--bb-ink), 0 3px var(--bb-ink), inset 0 2px rgba(255, 255, 255, 0.16);
  --bb-control-shadow-pressed: 0 0 0 2px var(--bb-ink), inset 0 2px rgba(0, 0, 0, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 36px;
  min-height: 26px;
  flex-shrink: 0;
  appearance: none;
  border: 0;
  border-radius: var(--bb-radius-control);
  background: var(--bb-primary-gradient);
  color: #fff;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.sonner__btn:hover {
  filter: brightness(0.95);
}

/* Progress bar spans full width on its own row */
.sonner__progress {
  grid-column: 1 / -1;
  height: 3px;
  background: linear-gradient(to right, #18a0fb, #53f);
  width: 100%;
}
.sonner--success .sonner__progress {
  background: linear-gradient(to right, #43d58c, #8ee8b5);
}
.sonner--error .sonner__progress {
  background: linear-gradient(to right, #ef6464, #f5a66f);
}
.sonner__progress.anim {
  animation: sonnerBar var(--sonner-duration, 5s) linear forwards;
}
@keyframes sonnerBar {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

/* The portrait carries its own thin rim. Match its rounded silhouette in
   avatar wrappers so their backgrounds cannot show through the corners. */
img[src^="data:image/svg+xml,%3Csvg%20id%3D%22bro-portrait%22"] {
  border-radius: 9.375% !important;
  border: 0 !important;
  object-fit: contain !important;
}
:is(.bb-chat-avatar, .leaderboard-avatar-frame, .profile-hero-avatar):has(img[src^="data:image/svg+xml,%3Csvg%20id%3D%22bro-portrait%22"]) {
  border-radius: 9.375%;
  border: 0;
}

.player-card-preview {
  box-sizing: border-box;
  width: min(760px, 94vw);
  max-height: 92dvh;
  padding: 0;
  text-align: center;
}
.player-card-preview[open] { display: flex; flex-direction: column; }
.player-card-preview .bb-popup-header { flex: 0 0 auto; text-align: left; }
.player-card-preview .bb-popup-title { min-width: 0; overflow-wrap: anywhere; }
.player-card-preview-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  overflow: auto;
  min-height: 0;
}
.player-card-preview figure { margin: 0; flex: 0 1 280px; min-width: 0; }
.player-card-preview figure > :is(img, .player-card-canvas) {
  width: 100%;
  height: min(66dvh, 560px);
  object-fit: contain;
  display: block;
}
.player-card-preview figcaption { margin: 16px 0 8px; }

body.shop-is-open {
  overflow: hidden;
}

body.shop-is-open .cs-confirm-backdrop {
  z-index: 20000;
}

/* Keep the game's original confirmation treatment, with shop copy spaced cleanly. */
body.shop-is-open .cs-confirm {
  width: min(92vw, 520px);
  max-width: 520px;
  padding: 22px 24px 20px;
}

body.shop-is-open .cs-confirm-title {
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.45;
  text-wrap: balance;
}

body.shop-is-open .cs-confirm-body p {
  margin: 0;
  line-height: 1.5;
}

body.shop-is-open .cs-confirm-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

body.shop-is-open .cs-btn {
  min-width: 112px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.shop-is-open .cs-currency {
  width: 22px;
  height: 22px;
}

@media (max-width: 480px) {
  body.shop-is-open .cs-confirm {
    width: calc(100vw - 32px);
    padding: 18px 17px 16px;
  }

  body.shop-is-open .cs-confirm-title {
    font-size: 11px;
  }

  body.shop-is-open .cs-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  body.shop-is-open .cs-btn {
    min-width: 0;
    width: 100%;
  }
}

body.shop-is-open .sonner-wrap {
  z-index: 20010;
}

.shop-overlay,
.shop-overlay * {
  box-sizing: border-box;
}

.shop-overlay {
  --shop-ink: #070c16;
  --shop-panel: #0e1727;
  --shop-paper: #f5f7ff;
  --shop-muted: #91a3bd;
  --shop-gold: #f0c66f;
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: none;
  place-items: center;
  padding: 12px;
  color: var(--shop-paper);
  font-family: "Lato", sans-serif;
  isolation: isolate;
}

.shop-overlay.is-open {
  display: grid;
}

.shop-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bb-popup-backdrop);
}

.shop-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}

.shop-backdrop > span {
  position: absolute;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.08;
  pointer-events: none;
  animation: shopBackdropDrift 16s ease-in-out infinite alternate;
}

.shop-backdrop > span:first-child {
  top: -18vw;
  left: -9vw;
  background: #397bce;
}

.shop-backdrop > span:last-child {
  right: -12vw;
  bottom: -21vw;
  background: #8d4bd8;
  animation-delay: -8s;
}

@keyframes shopBackdropDrift {
  to {
    transform: translate3d(5vw, 3vw, 0) scale(1.08);
  }
}

.shop-window {
  position: relative;
  width: min(1390px, 94vw);
  height: min(970px, 92vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  transform-origin: center;
}

.shop-window::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 7px;
  border: 2px solid rgba(255, 255, 255, 0.055);
  border-radius: 0;
  pointer-events: none;
}

.shop-header {
  position: relative;
  z-index: 6;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 10px 22px;
  /* Chroma header and divider come from the popup contract. */
}


.shop-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-title-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.42));
}

.shop-brand h1 {
  margin: 0;
  color: #fff;
  font:
    700 clamp(16px, 1.7vw, 23px)/1 "Press Start 2P",
    monospace;
  letter-spacing: -0.03em;
  text-shadow: var(--bb-title-shadow);
}

.shop-header-wallet {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-header-wallet > span {
  position: relative;
  min-width: 96px;
  height: 38px;
  display: grid;
  grid-template-columns: 22px auto;
  grid-template-rows: 11px 15px;
  align-items: center;
  column-gap: 7px;
  padding: 5px 10px 5px 8px;
  border: 2px solid #203452;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(5, 14, 27, 0.78), rgba(18, 24, 43, 0.88)),
    #0a1120;
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.78),
    inset 0 2px rgba(255, 255, 255, 0.07);
}

.shop-header-wallet small {
  grid-column: 2;
  color: #778ca9;
  font:
    700 8px/1 "Press Start 2P",
    monospace;
  letter-spacing: 0.06em;
}

.shop-header-wallet img {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.shop-header-wallet strong {
  grid-column: 2;
  color: #f9fbff;
  font:
    700 10px/1 "Press Start 2P",
    monospace;
  line-height: 1;
}

.shop-close,
.shop-checkout-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  background: rgba(13, 21, 36, 0.7);
  cursor: pointer;
}

.shop-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0 4px 4px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #e04a4a, #ad252f);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 10px rgba(0, 0, 0, 0.3),
    inset 0 4px rgba(255, 255, 255, 0.18);
  line-height: 1;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.shop-close:hover,
.shop-checkout-close:hover {
  filter: brightness(1.12);
}

.shop-close:active {
  transform: translateY(4px);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    inset 0 4px rgba(0, 0, 0, 0.2);
}

.shop-tabs {
  position: relative;
  z-index: 5;
  min-height: 44px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 0 14px;
  border-bottom: 2px solid var(--bb-border-soft);
  background: var(--bb-surface-1);
  scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar {
  display: none;
}

.shop-tabs button {
  position: relative;
  flex: 1 0 auto;
  min-width: 118px;
  padding: 0 16px;
  border: 0;
  border-right: 2px solid rgba(45, 67, 98, 0.48);
  color: #9bb0ca;
  background: transparent;
  font:
    700 10px/1 "Press Start 2P",
    monospace;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.shop-tab-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.48));
}

.shop-tabs button:first-child {
  border-left: 2px solid rgba(45, 67, 98, 0.48);
}


.shop-tabs button:hover {
  color: #f4f7fc;
  background: rgba(116, 144, 184, 0.055);
}


.shop-tabs button.is-active {
  color: #fff3cc;
  background: linear-gradient(
    180deg,
    rgba(239, 198, 110, 0.08),
    rgba(239, 198, 110, 0.025)
  );
}

.shop-tabs button:active {
  background: rgba(239, 198, 110, 0.08);
}

.shop-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
  padding: 0 20px 56px;
  /* The window supplies the shared popup surface. */
  background: transparent;
  scrollbar-color: var(--bb-border) transparent;
  scrollbar-width: thin;
}

.shop-section {
  scroll-margin-top: 12px;
  padding: 24px 2px 12px;
}

.shop-section + .shop-section {
  position: relative;
  margin-top: 24px;
}

.shop-section + .shop-section::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 6%;
  left: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 166, 202, 0.2),
    transparent
  );
}

.shop-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 4px 12px;
}

.shop-section-copy h2 {
  margin: 0;
}

.shop-section-copy {
  display: flex;
  align-items: center;
  gap: 9px;
}

.shop-section-copy > img {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.48));
}

.shop-section-copy h2 {
  color: #f8faff;
  font:
    700 clamp(13px, 1.4vw, 18px)/1.35 "Press Start 2P",
    monospace;
  letter-spacing: -0.03em;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55);
}

.shop-reset-chip {
  min-width: 102px;
  padding: 6px 9px;
  border: var(--bb-currency-chip-border);
  border-radius: 0;
  background: var(--bb-currency-chip-bg);
  box-shadow: var(--bb-currency-chip-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: right;
}

.shop-clock-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 #0e162d);
}

.shop-reset-chip strong {
  color: #e7edf7;
  font:
    700 10px/1 "Press Start 2P",
    monospace;
  font-variant-numeric: tabular-nums;
}

.shop-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.shop-sales-grid {
  grid-template-columns: minmax(360px, 1.4fr) repeat(2, minmax(190px, 0.8fr));
}

.shop-sales-grid .shop-offer {
  min-height: 330px;
  grid-template-rows: 226px minmax(50px, auto) auto;
}

.shop-section-dailies .shop-offer-grid {
  grid-template-columns: minmax(0, 660px);
}

.shop-offer {
  --rarity-rgb: 126, 151, 181;
  --light-x: 50%;
  --light-y: 35%;
  position: relative;
  min-width: 0;
  min-height: 295px;
  display: grid;
  grid-template-rows: 188px auto auto;
  overflow: hidden;
  outline: none;
  opacity: 1;
  /* Standard card fill; only real rarities paint their light into it. */
  background: var(--bb-card-bg);
  transition: filter 170ms ease;
}

.shop-offer.has-rarity:not(.shop-rarity-common) {
  background:
    radial-gradient(
      circle at var(--light-x) var(--light-y),
      rgba(var(--rarity-rgb), 0.14),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(var(--rarity-rgb), 0.08) 0%,
      rgba(255, 255, 255, 0.02) 28%,
      rgba(var(--rarity-rgb), 0.12) 58%,
      rgba(18, 29, 47, 0.45) 100%
    ),
    linear-gradient(155deg, rgba(18, 29, 47, 0.99), rgba(8, 14, 25, 0.99));
  background-size:
    220% 220%,
    100% 100%;
  animation: shopCardGradientDrift 16s ease-in-out infinite alternate;
  animation-delay: calc(var(--offer-index, 0) * -2.4s);
}

@keyframes shopCardGradientDrift {
  0% {
    background-position:
      0% 0%,
      center;
  }
  50% {
    background-position:
      100% 100%,
      center;
  }
  100% {
    background-position:
      0% 0%,
      center;
  }
}

.shop-offer.is-spotlight::before {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  border: 4px solid transparent;
  border-radius: 0;
  pointer-events: none;
  animation: shopOfferSpotlight 1.8s ease-out both;
}

@keyframes shopOfferSpotlight {
  0%, 100% {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  15%, 48%, 80% {
    border-color: #ffe16e;
    background: rgba(255, 215, 95, 0.13);
    box-shadow: inset 0 0 35px rgba(255, 184, 46, 0.55);
  }
  32%, 65% {
    border-color: rgba(255, 225, 110, 0.3);
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-offer.is-spotlight::before {
    animation: none;
    border-color: #ffe16e;
    box-shadow: inset 0 0 20px rgba(255, 184, 46, 0.45);
  }
}

.shop-offer:focus-visible {
  outline: 2px solid rgba(var(--rarity-rgb), 0.86);
  outline-offset: 2px;
}

.shop-rarity-common {
  --rarity-rgb: 137, 160, 184;
}
.shop-rarity-rare {
  --rarity-rgb: 63, 158, 239;
}
.shop-rarity-epic {
  --rarity-rgb: 176, 91, 235;
}
.shop-rarity-legendary {
  --rarity-rgb: 247, 174, 57;
}

.shop-offer-bundle {
  min-height: 330px;
  grid-template-rows: 226px auto auto;
}

.shop-sales-grid .shop-offer:first-child {
  grid-row: span 1;
}

.shop-offer.is-unavailable .shop-banner-art {
  filter: saturate(0.5) brightness(0.65);
}

.shop-offer.is-completing {
  pointer-events: none;
  animation: shopCardComplete 600ms ease both;
}

@keyframes shopCardComplete {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.65);
    border-color: rgba(var(--rarity-rgb), 1);
  }
  100% {
    filter: brightness(1);
  }
}

.shop-offer-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-bottom: 2px solid var(--bb-ink);
  background: #08101c;
}

.shop-banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  transition: filter 220ms ease;
}

.shop-card-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  width: 32px;
  height: 32px;
}

.shop-banner-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 16, 0.18),
      transparent 28%,
      transparent 72%,
      rgba(4, 8, 16, 0.2)
    ),
    linear-gradient(
      180deg,
      rgba(5, 9, 17, 0.12),
      transparent 52%,
      rgba(5, 10, 18, 0.72)
    );
}

.shop-banner-light {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(
    circle at var(--light-x) var(--light-y),
    rgba(var(--rarity-rgb), 0.19),
    transparent 37%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  display: none;
}


.shop-offer.has-rarity .shop-banner-light {
  display: block;
  opacity: 0.82;
}

.shop-rarity-badge {
  position: absolute;
  z-index: 7;
  top: 10px;
  right: 10px;
  padding: 6px 8px 5px;
  border: 1px solid rgba(var(--rarity-rgb), 0.75);
  border-radius: 0;
  color: rgb(var(--rarity-rgb));
  background: rgba(5, 10, 19, 0.82);
  box-shadow:
    0 0 15px rgba(var(--rarity-rgb), 0.35),
    inset 0 0 9px rgba(var(--rarity-rgb), 0.1);
  font: 700 7px/1 "Press Start 2P", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(var(--rarity-rgb), 0.72);
}


.shop-offer-badge {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 10px;
  padding: 5px 8px 5px;
  border: 2px solid rgba(255, 224, 151, 0.58);
  border-radius: var(--bb-radius-tag);
  color: #ffe6a5;
  background: linear-gradient(
    135deg,
    rgba(27, 24, 20, 0.9),
    rgba(68, 48, 28, 0.8)
  );
  font:
    700 8px/1 "Press Start 2P",
    monospace;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.72);
}

.shop-sale-sheen {
  position: absolute;
  z-index: 6;
  top: -36%;
  bottom: -36%;
  left: -52%;
  width: 22%;
  opacity: 0;
  transform: skewX(-17deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 245, 214, 0.22),
    transparent
  );
  pointer-events: none;
  display: none;
}

.shop-section-sales .shop-offer-featured .shop-sale-sheen {
  animation: shopSaleSweep 7.5s cubic-bezier(0.2, 0.65, 0.25, 1) infinite;
  animation-delay: calc(var(--offer-index) * 1.35s);
}

@keyframes shopSaleSweep {
  0%,
  68% {
    left: -52%;
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  84%,
  100% {
    left: 130%;
    opacity: 0;
  }
}

.shop-offer-body {
  min-width: 0;
  padding: 11px 14px 5px;
}

.shop-offer-body h3 {
  margin: 0;
  color: #fbfcff;
  font:
    700 10px/1.4 "Press Start 2P",
    monospace;
  letter-spacing: -0.025em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.54);
}

.shop-offer-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.shop-offer-name > img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}

.shop-offer-type {
  display: block;
  margin-top: 6px;
  color: rgb(var(--rarity-rgb));
  font:
    700 8px/1.45 "Press Start 2P",
    monospace;
  letter-spacing: 0.05em;
}

.shop-offer-footer {
  position: relative;
  display: block;
  padding: 8px 14px 14px;
}

.shop-offer-footer.has-discount {
  padding-top: 14px;
}

.shop-sale-prices {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.shop-bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.shop-bundle-items li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(var(--rarity-rgb), 0.55);
  color: #f5e7be;
  background: rgba(5, 12, 24, 0.65);
  font: 700 8px/1.3 "Press Start 2P", monospace;
}

.shop-bundle-items img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.shop-original-price {
  color: rgba(255, 255, 255, 0.48);
  font: 700 9px/1 "Press Start 2P", monospace;
  text-decoration-color: rgba(89, 20, 27, 0.95);
  text-decoration-thickness: 2px;
}

.shop-sale-discount {
  position: absolute;
  z-index: 3;
  top: -5px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 48px;
  padding: 5px 4px 4px;
  color: #fff;
  background: linear-gradient(145deg, #d13bfa, #8419cf);
  border: 2px solid #ed83ff;
  box-shadow: 2px 3px 0 #421369, 0 0 9px rgba(202, 72, 255, 0.5);
  font: 700 10px/1 "Press Start 2P", monospace;
  transform: rotate(5deg);
  pointer-events: none;
}

.shop-sale-discount small {
  margin-top: 3px;
  font: 700 7px/1 "Press Start 2P", monospace;
}

.shop-price-virtual {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shop-price-virtual img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.shop-price-virtual strong {
  font:
    700 13.5px/1 "Press Start 2P",
    monospace;
  line-height: 1;
}

.shop-price-free,
.shop-price-money {
  display: inline-block;
  color: #fff;
  font:
    700 13.5px/1 "Press Start 2P",
    monospace;
  line-height: 1;
}

.shop-price-free {
  color: #7ff0a2;
}

/* The active daily reward is always free: give its CTA a distinct claimable
   treatment without affecting paid or already-claimed offers. */
.shop-section-dailies .shop-buy-button:not(:disabled) {
  color: #fff;
  background: linear-gradient(180deg, #23d994 0%, #09a96f 54%, #07895f 100%);
  text-shadow: 0 2px 0 rgba(1, 61, 42, 0.56);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 0 12px rgba(47, 255, 174, 0.74),
    0 0 28px rgba(32, 218, 145, 0.42),
    0 8px rgba(0, 0, 0, 0.28),
    5px 5px rgba(0, 0, 0, 0.28),
    -5px 5px rgba(0, 0, 0, 0.28),
    inset 0 5px rgba(255, 255, 255, 0.28);
  animation: shop-daily-claim-glow 1.9s ease-in-out infinite;
}

.shop-section-dailies .shop-buy-button:not(:disabled) .shop-price-free {
  color: #fff;
}

.shop-buy-button {
  position: relative;
  width: calc(100% - 10px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  margin: 0 5px 5px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--bb-radius-control);
  color: #fff;
  background: linear-gradient(180deg, #16bd83, #078e66);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 8px rgba(0, 0, 0, 0.28),
    5px 5px rgba(0, 0, 0, 0.28),
    -5px 5px rgba(0, 0, 0, 0.28),
    inset 0 5px rgba(255, 255, 255, 0.18);

  font:
    700 10px/1 "Press Start 2P",
    monospace;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition:
    transform 150ms ease,
    filter 150ms ease,
    box-shadow 150ms ease;
}

.shop-offer.has-rarity .shop-buy-button:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      rgba(var(--rarity-rgb), 0.88),
      rgba(var(--rarity-rgb), 0.48)
    ),
    #273b5b;
}

.shop-buy-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 220ms ease;
}

.shop-section-dailies .shop-buy-button:not(:disabled)::before {
  inset: -30% auto -30% -45%;
  width: 28%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 22%,
    rgba(255, 255, 255, 0.74) 50%,
    rgba(255, 255, 255, 0.06) 78%,
    transparent 100%
  );
  opacity: 0;
  transform: skewX(-18deg) translateX(0);
  animation: shop-daily-claim-glint 2.8s ease-in-out infinite;
}

.shop-buy-button > * {
  position: relative;
  z-index: 1;
}

.shop-action-state {
  font:
    700 9px/1 "Press Start 2P",
    monospace;
  letter-spacing: 0.08em;
}

.shop-buy-button:hover:not(:disabled) {
  filter: brightness(1.15) saturate(1.08);
  transform: translateY(-1px);
}

.shop-buy-button:hover:not(:disabled)::before {
  transform: translateX(110%);
  opacity: 1;
}

@keyframes shop-daily-claim-glow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.14) saturate(1.16);
  }
}

@keyframes shop-daily-claim-glint {
  0%,
  18% {
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
  }
  30% {
    opacity: 1;
  }
  54%,
  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(560%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-section-dailies .shop-buy-button:not(:disabled),
  .shop-section-dailies .shop-buy-button:not(:disabled)::before {
    animation: none;
  }
}

.shop-buy-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    inset 0 4px rgba(0, 0, 0, 0.22);
}

.shop-buy-button:disabled {
  color: #8d9bb0;
  background: rgba(30, 42, 60, 0.72);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    inset 0 4px rgba(255, 255, 255, 0.06);
  cursor: default;
}

.shop-loading,
.shop-checkout-loading,
.shop-load-error,
.shop-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9fb2cc;
  text-align: center;
}

.shop-loading strong,
.shop-checkout-loading strong,
.shop-load-error strong,
.shop-empty strong {
  color: #edf3fc;
  font-size: 13px;
}

.shop-loading p,
.shop-checkout-loading p,
.shop-load-error p,
.shop-empty p {
  margin: 0;
  color: #71859f;
  font-size: 10px;
}

.shop-loading-rune { margin-bottom: 6px; }

.shop-load-error {
  min-height: 360px;
}

.shop-load-error > span,
.shop-empty > span {
  color: #e8c774;
  font-size: 24px;
}

.shop-load-error button,
.shop-empty button {
  min-height: 32px;
  margin: 8px 4px 4px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--bb-radius-control);
  color: #fff;
  background: linear-gradient(180deg, #4ba4ed, #296fc0);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 10px rgba(0, 0, 0, 0.28),
    inset 0 4px rgba(255, 255, 255, 0.18);
  font:
    700 7.5px/1 "Press Start 2P",
    monospace;
  cursor: pointer;
}

.shop-load-error button:active,
.shop-empty button:active {
  transform: translateY(4px);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    inset 0 4px rgba(0, 0, 0, 0.2);
}

.shop-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  border: 1px dashed rgba(131, 160, 197, 0.18);
  border-radius: var(--bb-radius-card);
  background: rgba(11, 20, 34, 0.42);
}

.shop-checkout {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: none;
  place-items: center;
  padding: 14px;
}

.shop-checkout.is-open {
  display: grid;
}

.shop-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

.shop-checkout-panel {
  position: relative;
  width: min(530px, 96vw);
  max-height: 94vh;
  overflow: auto;
  background: #f6f8fc;
}

.shop-checkout-panel > header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 9px 15px;
  color: #eff5ff;
  background: linear-gradient(100deg, #398fe3, #6b45bd), #17253c;
}

.shop-checkout-panel header h2 {
  margin: 0;
  font:
    700 11px/1.35 "Press Start 2P",
    monospace;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.48);
}

.shop-checkout-close {
  width: 33px;
  height: 33px;
  margin: 0 4px 4px;
  border: 0;
  border-radius: 0;
  font:
    700 12px/1 "Press Start 2P",
    monospace;
  background: linear-gradient(180deg, #e04a4a, #ad252f);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 10px rgba(0, 0, 0, 0.28),
    inset 0 4px rgba(255, 255, 255, 0.18);
}

.shop-checkout-close:active {
  transform: translateY(4px);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    inset 0 4px rgba(0, 0, 0, 0.2);
}

.shop-checkout-host {
  min-height: 350px;
  padding: 12px;
  color: #26364a;
}

.shop-checkout-loading {
  min-height: 290px;
  color: #4f6278;
}

.shop-checkout-loading strong {
  color: #24364b;
}

.shop-reward-reveal {
  position: absolute;
  z-index: 32;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  --rarity-rgb: 63, 158, 239;
  --reveal-origin-x: 50vw;
  --reveal-origin-y: 50vh;
  animation: shopRevealFadeIn 260ms ease both;
}

.shop-reward-reveal.is-leaving {
  pointer-events: none;
  animation: shopRevealFadeOut 260ms ease both;
}

@keyframes shopRevealFadeIn {
  from {
    opacity: 0;
  }
}
@keyframes shopRevealFadeOut {
  to {
    opacity: 0;
  }
}

.shop-reveal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

.shop-reveal-rays {
  position: absolute;
  width: min(880px, 90vw);
  aspect-ratio: 1;
  opacity: 0.22;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(var(--rarity-rgb), 0.5) 0 2deg,
    transparent 2deg 13deg
  );
  mask-image: radial-gradient(circle, black, transparent 68%);
  animation: shopRevealRayTurn 20s linear infinite;
}

@keyframes shopRevealRayTurn {
  to {
    transform: rotate(360deg);
  }
}

.shop-reveal-panel {
  position: relative;
  z-index: 3;
  width: min(530px, calc(100vw - 34px));
  padding: 0 18px 20px;
  overflow: hidden;
  border: 3px solid rgba(var(--rarity-rgb), 0.86);
  border-radius: 0;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(var(--rarity-rgb), 0.18),
      transparent 42%
    ),
    linear-gradient(155deg, rgba(22, 31, 51, 0.99), rgba(7, 12, 22, 0.99));
  box-shadow:
    0 0 0 5px var(--bb-ink),
    0 9px 0 var(--bb-ink),
    0 24px 80px rgba(0, 0, 0, 0.74),
    0 0 45px rgba(var(--rarity-rgb), 0.15),
    inset 0 1px rgba(255, 255, 255, 0.12);
  text-align: center;
  animation: shopRevealPanelIn 520ms cubic-bezier(0.16, 0.8, 0.2, 1) both;
}

.shop-reveal-panel::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255, 255, 255, 0.055);
  border-radius: 0;
  pointer-events: none;
}

@keyframes shopRevealPanelIn {
  0% {
    opacity: 0;
    transform: translate(
        calc(var(--reveal-origin-x) - 50vw),
        calc(var(--reveal-origin-y) - 50vh)
      )
      scale(0.18);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.shop-reveal-origin {
  position: fixed;
  z-index: 2;
  left: var(--reveal-origin-x);
  top: var(--reveal-origin-y);
  width: 20px;
  height: 20px;
  border: 3px solid rgb(var(--rarity-rgb));
  box-shadow:
    0 0 16px rgba(var(--rarity-rgb), 0.9),
    0 0 44px rgba(var(--rarity-rgb), 0.55);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: shopRevealOriginBurst 650ms cubic-bezier(0.12, 0.72, 0.2, 1) both;
}

@keyframes shopRevealOriginBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(20) rotate(45deg);
  }
}

.shop-reveal-wallet {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 18px;
  display: flex;
  gap: 10px;
}

.shop-reveal-wallet > span {
  min-width: 98px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-rows: 12px 15px;
  align-items: center;
  column-gap: 6px;
  padding: 5px 9px;
  border: 2px solid #294362;
  border-radius: var(--bb-radius-tag);
  background: rgba(7, 15, 28, 0.94);
  box-shadow:
    0 4px 0 var(--bb-ink),
    inset 0 2px rgba(255, 255, 255, 0.08);
  transform-origin: center;
}

.shop-reveal-wallet img {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.shop-reveal-wallet small {
  color: #8da2bf;
  font:
    700 5.5px/1 "Press Start 2P",
    monospace;
}

.shop-reveal-wallet strong {
  color: #fff;
  font:
    700 8px/1 "Press Start 2P",
    monospace;
  font-variant-numeric: tabular-nums;
}

.shop-reveal-heading {
  position: relative;
  margin: 0 -18px 8px;
  padding: 16px 14px 14px;
  border-bottom: 3px solid rgba(12, 24, 47, 0.72);
  background: linear-gradient(
    100deg,
    rgba(56, 145, 232, 0.92),
    rgba(102, 65, 184, 0.92)
  );
  box-shadow: inset 0 3px rgba(255, 255, 255, 0.1);
}

.shop-reveal-kicker {
  color: #ddecff;
  font:
    700 7px/1 "Press Start 2P",
    monospace;
  letter-spacing: 0.12em;
}

.shop-reveal-panel h2 {
  margin: 8px 0 0;
  color: #fff;
  font:
    700 clamp(13px, 2vw, 18px)/1.4 "Press Start 2P",
    monospace;
  letter-spacing: -0.04em;
  text-shadow: var(--bb-title-shadow);
}

.shop-reveal-grants {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
}

.shop-reveal-grant {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: shopRevealGrantIn 500ms cubic-bezier(0.16, 0.8, 0.2, 1) both;
  animation-delay: calc(250ms + var(--reveal-index) * 120ms);
}

@keyframes shopRevealGrantIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.7);
  }
}

.shop-reveal-grant > span {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}

.shop-reveal-grant > span i {
  position: absolute;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(var(--rarity-rgb), 0.55);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--rarity-rgb), 0.2),
    transparent 68%
  );
  box-shadow: 0 0 26px rgba(var(--rarity-rgb), 0.22);
}

.shop-reveal-grant img {
  position: relative;
  z-index: 1;
  max-width: 102px;
  max-height: 116px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 7px rgba(var(--rarity-rgb), 0.25));
}

.shop-reveal-card img {
  max-width: 78px;
}

.shop-reveal-skin img {
  max-width: 64px;
}

.shop-reveal-grant strong {
  max-width: 140px;
  overflow: hidden;
  color: #f2f6fd;
  font:
    700 7px/1.5 "Press Start 2P",
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-reveal-grant small {
  margin-top: 2px;
  color: #91a4bc;
  font-size: 8px;
  text-transform: capitalize;
}

.shop-reveal-panel > button {
  min-width: 120px;
  min-height: 40px;
  margin: 12px 4px 4px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--bb-radius-control);
  color: #fff;
  background: linear-gradient(180deg, #4ba4ed, #296fc0);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink),
    0 10px rgba(0, 0, 0, 0.28),
    inset 0 4px rgba(255, 255, 255, 0.18);
  font:
    700 8px/1 "Press Start 2P",
    monospace;
  cursor: pointer;
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.shop-reveal-panel > button:hover {
  filter: brightness(1.16);
}

.shop-reveal-panel > button:active {
  transform: translateY(4px);
  box-shadow:
    0 5px var(--bb-ink),
    0 -5px var(--bb-ink),
    5px 0 var(--bb-ink),
    -5px 0 var(--bb-ink);
}

.shop-reveal-panel > button:disabled {
  opacity: 0.58;
  cursor: wait;
  filter: saturate(0.55);
}

.shop-reveal-shard {
  --dx: 0px;
  --dy: -190px;
  --turn: 90deg;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 16px;
  border-radius: 0;
  background: rgb(var(--rarity-rgb));
  box-shadow: 0 0 12px rgba(var(--rarity-rgb), 0.7);
  opacity: 0;
  animation: shopRevealShard 900ms cubic-bezier(0.15, 0.7, 0.2, 1)
    calc(160ms + var(--shard) * 24ms) both;
}

.shop-reveal-shard:nth-of-type(1) {
  --dx: -270px;
  --dy: -145px;
  --turn: -120deg;
}
.shop-reveal-shard:nth-of-type(2) {
  --dx: -185px;
  --dy: -220px;
  --turn: 80deg;
}
.shop-reveal-shard:nth-of-type(3) {
  --dx: -70px;
  --dy: -250px;
  --turn: 150deg;
}
.shop-reveal-shard:nth-of-type(4) {
  --dx: 80px;
  --dy: -245px;
  --turn: -70deg;
}
.shop-reveal-shard:nth-of-type(5) {
  --dx: 205px;
  --dy: -205px;
  --turn: 130deg;
}
.shop-reveal-shard:nth-of-type(6) {
  --dx: 275px;
  --dy: -115px;
  --turn: -160deg;
}
.shop-reveal-shard:nth-of-type(7) {
  --dx: 285px;
  --dy: 70px;
  --turn: 110deg;
}
.shop-reveal-shard:nth-of-type(8) {
  --dx: 175px;
  --dy: 205px;
  --turn: -100deg;
}
.shop-reveal-shard:nth-of-type(9) {
  --dx: 45px;
  --dy: 235px;
  --turn: 170deg;
}
.shop-reveal-shard:nth-of-type(10) {
  --dx: -95px;
  --dy: 220px;
  --turn: -130deg;
}
.shop-reveal-shard:nth-of-type(11) {
  --dx: -225px;
  --dy: 170px;
  --turn: 100deg;
}
.shop-reveal-shard:nth-of-type(12) {
  --dx: -285px;
  --dy: 35px;
  --turn: -170deg;
}

@keyframes shopRevealShard {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      rotate(var(--turn)) scale(0.55);
  }
}

.shop-flying-currency {
  position: fixed;
  z-index: 18000;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 6px rgba(255, 230, 151, 0.32));
}

.shop-wallet-spark {
  position: fixed;
  z-index: 18001;
  width: 6px;
  height: 6px;
  border: 1px solid #fff4c7;
  background: #ffbf35;
  box-shadow: 0 0 8px rgba(255, 193, 53, 0.8);
  pointer-events: none;
}

.shop-wallet-spark-gems {
  border-color: #e3fbff;
  background: #56d8ff;
  box-shadow: 0 0 9px rgba(86, 216, 255, 0.9);
}

@media (max-width: 1080px) {
  .shop-sales-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .shop-sales-grid .shop-offer:first-child {
    grid-column: 1 / -1;
  }

  .shop-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shop-overlay {
    padding: 5px;
  }

  .shop-window {
    width: 100%;
    height: calc(var(--bb-viewport-height, 100dvh) - 10px);
  }

  .shop-header {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px 9px 12px;
  }

  .shop-brand h1 {
    font-size: 14px;
  }

  .shop-title-icon {
    width: 27px;
    height: 27px;
  }

  .shop-header-wallet {
    grid-column: 1;
    grid-row: 2;
  }

  .shop-header-wallet > span {
    min-width: 94px;
    height: 36px;
    grid-template-columns: 20px auto;
    grid-template-rows: 10px 15px;
    padding: 5px 8px;
  }

  .shop-header-wallet img {
    width: 20px;
    height: 20px;
  }

  .shop-header-wallet strong {
    font-size: 12px;
  }

  .shop-header-wallet small {
    font-size: 8px;
  }

  .shop-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 42px;
    height: 50px;
  }

  .shop-tabs {
    min-height: 46px;
    padding: 0 4px;
  }

  .shop-tabs button {
    min-width: 112px;
    padding: 0 10px;
    font-size: 9px;
  }

  .shop-tab-icon {
    width: 19px;
    height: 19px;
  }

  .shop-scroll {
    padding: 0 10px 48px;
  }

  .shop-section {
    padding-top: 30px;
  }

  .shop-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 15px;
  }

  .shop-section-copy h2 {
    font-size: 15px;
  }

  .shop-reset-chip {
    grid-column: auto;
    justify-self: end;
    min-width: 112px;
    margin-top: 0;
    text-align: right;
  }

  .shop-offer-grid,
  .shop-sales-grid,
  .shop-section-dailies .shop-offer-grid {
    grid-template-columns: 1fr;
  }

  .shop-sales-grid .shop-offer:first-child {
    grid-column: auto;
  }

  .shop-offer,
  .shop-offer-bundle {
    min-height: 350px;
    grid-template-rows: 220px auto auto;
  }

  .shop-sales-grid .shop-offer {
    min-height: 350px;
    grid-template-rows: 220px auto auto;
  }

  .shop-offer-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .shop-buy-button {
    min-width: 0;
  }

  .shop-checkout {
    padding: 6px;
  }

  .shop-reveal-panel {
    padding: 0 14px 20px;
  }

  .shop-reveal-wallet {
    top: 11px;
    right: 11px;
    gap: 7px;
  }

  .shop-reveal-wallet > span {
    min-width: 84px;
    min-height: 39px;
    grid-template-columns: 21px auto;
    grid-template-rows: 10px 14px;
    column-gap: 5px;
    padding: 5px 7px;
  }

  .shop-reveal-wallet img {
    width: 21px;
    height: 21px;
  }

  .shop-reveal-wallet small {
    font-size: 5px;
  }

  .shop-reveal-wallet strong {
    font-size: 7px;
  }

  .shop-reveal-heading {
    margin-right: -14px;
    margin-left: -14px;
  }

  .shop-reveal-grants {
    gap: 4px;
    min-height: 155px;
  }

  .shop-reveal-grant > span {
    width: 98px;
    height: 112px;
  }

  .shop-reveal-grant > span i {
    width: 82px;
    height: 82px;
  }

  .shop-reveal-grant img {
    max-width: 92px;
    max-height: 108px;
  }

  .shop-reveal-card img,
  .shop-reveal-skin img {
    max-width: 64px;
  }

  .shop-reveal-grant strong {
    max-width: 106px;
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  .shop-header-wallet > span {
    min-width: 87px;
  }

  .shop-offer-body h3 {
    font-size: 10px;
  }

  .shop-reveal-panel h2 {
    font-size: 13px;
  }
}

/* Shared unlock showcase. Artwork carries the moment; no medallions or rings. */
.reward-showcase { padding: 86px 24px 30px; box-sizing: border-box; }
.reward-showcase .shop-reveal-panel {
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100dvh - 120px);
  overflow: auto;
  padding: 28px 28px 24px;
  border: 2px solid rgba(var(--rarity-rgb), .8);
  border-radius: 0;
  background: linear-gradient(145deg, #18273b, #090f1d 65%);
  box-shadow: 0 0 0 5px var(--bb-ink), 0 12px var(--bb-ink), 0 30px 90px #0009;
}
.reward-showcase .shop-reveal-panel::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 3px;
  background: rgb(var(--rarity-rgb)); box-shadow: 0 0 28px rgba(var(--rarity-rgb), .9);
}
.reward-showcase .shop-reveal-panel::after { border: 0; }
.reward-showcase .shop-reveal-heading {
  margin: 0; padding: 0 0 14px; background: none; border: 0; box-shadow: none;
}
.reward-showcase .shop-reveal-panel h2 { margin-top: 0; font-size: clamp(18px, 3vw, 28px); line-height: 1.35; }
.reward-showcase .shop-reveal-subheader {
  margin: 8px 0 0;
  color: rgb(var(--rarity-rgb));
  font: 700 10px/1.3 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.reward-showcase .shop-reveal-grants { display: block; padding: 0; min-height: 0; }
.reward-showcase .shop-reveal-collectibles { display: grid; grid-template-columns: repeat(var(--reward-columns), minmax(0, 1fr)); gap: 12px; }
.reward-showcase .shop-reveal-grant { display: flex; gap: 14px; min-width: 0; padding: 10px 0 16px; }
.reward-showcase .shop-reveal-art {
  width: 100%; height: clamp(190px, 32vh, 310px); max-width: none; position: relative;
  background: linear-gradient(0deg, rgba(var(--rarity-rgb), .09), transparent 70%);
  border-bottom: 2px solid rgba(var(--rarity-rgb), .35);
  border-radius: 0; overflow: hidden;
}
.reward-showcase .shop-reveal-art::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: -1px; height: 2px;
  background: rgba(var(--rarity-rgb), .8); box-shadow: 0 -8px 32px rgba(var(--rarity-rgb), .3);
}
.reward-showcase .shop-reveal-art :is(img, video, .player-card-canvas) {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; filter: drop-shadow(0 16px 8px #0007);
}
.reward-showcase .shop-reveal-profileIcon .shop-reveal-art :is(img, video, .player-card-canvas) { width: 64%; height: 64%; }
.reward-showcase .shop-reveal-card .shop-reveal-art :is(img, video, .player-card-canvas) { image-rendering: auto; padding: 5px 0 10px; box-sizing: border-box; }
.reward-showcase .shop-reveal-mode .shop-reveal-art { width: min(100%, 560px); height: clamp(170px, 34vh, 300px); flex: none; }
.reward-showcase .shop-reveal-mode .shop-reveal-art :is(img, video, .player-card-canvas) { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.reward-showcase .shop-reveal-currencies { display: flex; justify-content: center; gap: 32px; padding: 14px 20px; margin-top: 8px; background: #0209147a; border: 1px solid #6c829529; }
.reward-showcase .shop-reveal-currencies .shop-reveal-grant { flex: 0 1 auto; flex-direction: row; padding: 0; gap: 14px; }
.reward-showcase .shop-reveal-currencies .shop-reveal-art { width: 54px; height: 54px; border: 0; background: none; overflow: visible; }
.reward-showcase .shop-reveal-currencies .shop-reveal-art::after { display: none; }
.reward-showcase .shop-reveal-currencies [data-reveal-currency="gems"] strong { color: #aeedff; }
.reward-showcase .shop-reveal-currencies { flex-wrap: wrap; }
.reward-showcase .shop-reveal-currencies .shop-reveal-currency-amount {
  max-width: none;
  overflow: visible;
  white-space: normal;
  font-size: clamp(10px, 1.2vw, 14px);
  color: #ffdc7a;
}
.reward-showcase .shop-reveal-panel > button { margin-top: 24px; min-width: 180px; min-height: 44px; }
.reward-showcase [data-reveal-wallet-shell="coins"] { border-color: #bb882b; box-shadow: 0 4px var(--bb-ink), 0 0 22px #ffbe3538; }
.reward-showcase [data-reveal-wallet-shell="gems"] { border-color: #3694ba; box-shadow: 0 4px var(--bb-ink), 0 0 22px #56d8ff38; }
.reward-showcase.currency-only .shop-reveal-panel { width: min(620px, calc(100vw - 48px)); }
.reward-showcase.currency-only .shop-reveal-currencies { background: none; border: 0; }
.reward-showcase.currency-only .shop-reveal-currencies .shop-reveal-grant { flex-direction: column; }
.reward-showcase.currency-only .shop-reveal-currencies .shop-reveal-art { width: 150px; height: 150px; }
@media (max-width: 600px) {
  .reward-showcase { padding: 76px 16px 22px; }
  .reward-showcase .shop-reveal-panel { width: calc(100vw - 32px); padding: 22px 14px 18px; max-height: calc(100dvh - 104px); }
  .reward-showcase .shop-reveal-subheader { font-size: 8px; letter-spacing: .1em; }
  .reward-showcase .shop-reveal-collectibles { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-showcase .shop-reveal-collectibles > :only-child { grid-column: 1 / -1; }
  .reward-showcase .shop-reveal-collectibles > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .reward-showcase .shop-reveal-collectibles:has(> :nth-child(3)) .shop-reveal-card { flex-direction: row; justify-content: center; gap: 20px; padding: 0 0 14px; }
  .reward-showcase .shop-reveal-collectibles:has(> :nth-child(3)) .shop-reveal-card .shop-reveal-art { width: 90px; height: 162px; border: 0; background: none; }
  .reward-showcase .shop-reveal-art { height: 175px; }
  .reward-showcase .shop-reveal-currencies { gap: 16px; padding: 12px 4px; }
  .reward-showcase .shop-reveal-currencies .shop-reveal-art { width: 35px; height: 35px; }
  .reward-showcase .shop-reveal-currencies .shop-reveal-grant { gap: 7px; }
  .reward-showcase.currency-only .shop-reveal-currencies .shop-reveal-art { width: 110px; height: 110px; }
  .reward-showcase .shop-reveal-panel > button { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-showcase, .reward-showcase * { animation: none !important; transition: none !important; }
  .reward-showcase .shop-reveal-rays, .reward-showcase .shop-reveal-shard, .reward-showcase .shop-reveal-origin { display: none; }
}
.reward-showcase [data-character="gloop"] .shop-reveal-art :is(img, video, .player-card-canvas) { transform: scale(1.25) translateY(-16%); }
.reward-showcase, .reward-showcase * { box-sizing: border-box; }

/* Reward polish: keep the full silhouette and light its actual alpha outline. */
.reward-showcase .shop-reveal-art { display: flex; align-items: center; justify-content: center; overflow: visible; border: 0; background: none; padding: 12px; }
.reward-showcase .shop-reveal-art::after { display: none; }
.reward-showcase .shop-reveal-art :is(img, video, .player-card-canvas) { object-fit: contain; filter: drop-shadow(0 0 14px rgba(var(--rarity-rgb), .48)) drop-shadow(0 0 30px rgba(var(--rarity-rgb), .2)); }
.reward-showcase [data-character="gloop"] .shop-reveal-art :is(img, video, .player-card-canvas) { transform: none; }
.reward-showcase .shop-reveal-profileIcon .shop-reveal-art :is(img, video, .player-card-canvas) { width: 85%; height: 85%; }
.reward-showcase .shop-reveal-card .shop-reveal-art :is(img, video, .player-card-canvas) { padding: 0; }
/* Keep card rewards in a centered portrait box, with room for canvas effects. */
.reward-showcase .shop-reveal-card { justify-content: center; }
.reward-showcase .shop-reveal-card .shop-reveal-art {
  width: auto;
  height: clamp(240px, 52vh, 380px);
  aspect-ratio: 650 / 1250;
  flex: none;
  padding: 0;
}
.reward-showcase .shop-reveal-card .shop-reveal-art :is(img, video, .player-card-canvas) {
  width: 100%;
  height: 100%;
}
.reward-showcase.single-card-reveal .shop-reveal-card .shop-reveal-art {
  height: clamp(160px, calc(100dvh - 350px), 380px);
}
.reward-showcase.currency-only .shop-reveal-currencies .shop-reveal-art { width: clamp(180px, 30vh, 260px); height: clamp(180px, 30vh, 260px); }
.reward-showcase .shop-reveal-panel > .reward-continue {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease;
  border: 0; border-radius: 0; background: #328ed4; color: white; padding: 16px 28px;
  font: 12px 'Press Start 2P', monospace; text-transform: uppercase;
  box-shadow: 0 5px #000, 0 -5px #000, 5px 0 #000, -5px 0 #000, 0 10px #0006, inset 0 5px #ffffff36;
}
.reward-showcase[data-ready="1"] .shop-reveal-panel > .reward-continue { opacity: 1; visibility: visible; pointer-events: auto; }
.reward-showcase .shop-reveal-panel > .reward-continue:active { box-shadow: 0 5px #000, 0 -5px #000, 5px 0 #000, -5px 0 #000, inset 0 5px #0004; }
.shop-flying-currency { will-change: transform, opacity; }
@media (max-width:600px) { .reward-showcase .shop-reveal-art { padding: 8px; } }
@media (max-width:600px) {
  .reward-showcase .shop-reveal-card .shop-reveal-art { height: min(42dvh, 300px); padding: 0; }
  .reward-showcase.single-card-reveal .shop-reveal-card .shop-reveal-art {
    height: clamp(140px, calc(100dvh - 310px), 300px);
  }
  .reward-showcase .shop-reveal-collectibles:has(> :nth-child(3)) .shop-reveal-card .shop-reveal-art {
    width: 90px;
    height: 162px;
  }
}
.reward-showcase .shop-reveal-art :is(img, video, .player-card-canvas) { --currency-gleam-size: 12px; --currency-bloom-size: 24px; }
.reward-showcase.currency-only .shop-reveal-currencies .shop-reveal-art { width: clamp(220px, 34vh, 300px); height: clamp(220px, 34vh, 300px); }
.reward-showcase.has-collectibles .shop-reveal-currencies .shop-reveal-art { width: 64px; height: 64px; padding: 0; flex: none; }
@media (max-width: 600px) { .reward-showcase.has-collectibles .shop-reveal-currencies .shop-reveal-art { width: 48px; height: 48px; } }

/* Currency balances use a single icon-and-number row at every breakpoint. */
.shop-header-wallet > span { grid-template-rows: auto; }
.shop-header-wallet img, .shop-header-wallet strong { grid-row: 1; }
.shop-reveal-wallet > span { grid-template-rows: auto; }
.shop-reveal-wallet img, .shop-reveal-wallet strong { grid-row: 1; }

.shop-section-copy > img[src$="skins-hanger.svg"] { width: 19px; height: 19px; }

.reward-showcase .shop-reveal-mode .shop-reveal-art :is(img, video, .player-card-canvas) {
  width: auto; height: auto; border: 4px solid #000; border-radius: 0; box-sizing: border-box;
}

.shop-info-icon { width: 20px; height: 20px; display: block; pointer-events: none; }

/* Profile/skin catalogs open at two rows at every responsive column count. */
.shop-expand { display: none; margin: 18px auto 0; padding: 12px 24px; }
.shop-section-collapsible:not(.is-expanded) .shop-offer:nth-child(n + 7) { display: none; }
.shop-section-collapsible:has(.shop-offer:nth-child(7)) > .shop-expand { display: block; }
@media (max-width: 1080px) {
  .shop-section-collapsible:not(.is-expanded) .shop-offer:nth-child(n + 5) { display: none; }
  .shop-section-collapsible:has(.shop-offer:nth-child(5)) > .shop-expand { display: block; }
}
@media (max-width: 760px) {
  .shop-section-collapsible:not(.is-expanded) .shop-offer:nth-child(n + 3) { display: none; }
  .shop-section-collapsible:has(.shop-offer:nth-child(3)) > .shop-expand { display: block; }
}
/* Scene covers contain the complete collectible, including its top ornament. */
.shop-product-card .shop-banner-art { object-fit: cover; background: #090e1b; }

/* Keep original card pixels separate from the themed background. Never stretch
   either dimension independently: intrinsic proportions survive every tile size. */
.shop-original-card {
  position: absolute;
  left: 50%;
  top: 8%;
  height: 82%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
}

.shop-collection-complete {
  padding: 28px 18px;
  border: 2px solid #71603d;
  background: #101c2e;
  box-shadow: inset 0 0 0 4px #18263a;
}
.shop-collection-star { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.shop-collection-complete :is(strong, p, button) { font-family: var(--bb-font-display, "Press Start 2P", monospace); }
.shop-collection-complete strong { color: #f4cb67; }
.shop-collection-complete p { line-height: 1.8; color: #afbed3; }

/* Account-saved unread Shop content. */
.shop-new-tag {
  display: inline-block;
  padding: 5px 7px;
  background: #d52b3f;
  color: #fff;
  border: 2px solid #17111a;
  box-shadow: 2px 2px 0 #0008;
  font-family: var(--bb-font-display, "Press Start 2P", monospace);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
#shop-button > .shop-new-tag {
  position: absolute;
  top: -18px;
  right: -4px;
  z-index: 3;
  padding: 4px 6px;
  line-height: 1.25;
  text-shadow: none;
}
/* Absolute badges leave the centered tab labels and widths unchanged. */
.shop-tabs .shop-new-tag {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: 0;
  transform: translateY(-50%);
}
.shop-item-new { position: absolute; left: 10px; top: 10px; z-index: 8; }
.shop-item-new + .shop-offer-badge { top: 38px; }

/* Road-specific layering; the reward stage itself is shared with Shop. */
.shop-reward-reveal.trophy-reward-reveal { position: fixed; z-index: 17900; }
.trophy-reward-reveal .shop-reveal-backdrop { backdrop-filter: blur(9px); }
.trophy-reward-reveal .shop-reveal-wallet { position: fixed; z-index: 10; }
#trophy-track-list .trophy-lane-item-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; }
#trophy-track-list .trophy-reward-preview { display: grid; place-items: center; position: relative; width: 58px; height: 65px; }
#trophy-track-list .trophy-reward-preview .trophy-lane-item { position: static; width: 48px; height: 48px; max-height: 56px; transform: none; object-fit: contain; }
#trophy-track-list .trophy-reward-preview.reward-card .trophy-lane-item { height: 65px; max-height: 65px; image-rendering: auto; }
#trophy-track-list .trophy-reward-preview small { color: #ffebba; font: 700 9px/1.2 'Press Start 2P', monospace; }
#trophy-track-list .trophy-finale { border-color: #efbd4b; box-shadow: 0 5px #03050a, 0 0 28px #e5ac3d38; }
#trophy-track-list .trophy-finale .trophy-lane-item-wrap { gap: 4px; }
#trophy-track-list .trophy-finale .trophy-reward-preview { width: 46px; height: 54px; }
#trophy-track-list .trophy-finale .trophy-lane-item { width: 38px; height: 38px; }
.trophy-claim-error { color: #ffd3c7; font-size: 11px; margin: 6px 0 0; }
.shop-reveal-panel button:focus-visible { outline: 3px solid #ffdc7a; outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) {
  .shop-reward-reveal, .shop-reward-reveal *, .trophy-claim-spark { animation: none !important; transition: none !important; }
  .shop-reveal-origin, .shop-reveal-shard, .shop-reveal-rays { display: none; }
}
#trophy-track-list .trophy-lane-item-wrap.multi-reward { width: 176px; height: 120px; }
#trophy-track-list .trophy-lane-meta strong { white-space: normal; }

#trophy-track-list .trophy-lane-card:hover { transform: translateX(-50%); }
#trophy-track-list .trophy-lane-card { transition: box-shadow 350ms ease; }
#trophy-track-list .trophy-tier-claim { transition: filter 300ms ease, box-shadow 300ms ease; }
#trophy-track-list .trophy-lane-item-wrap {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 138px;
  border: 0; box-shadow: none; background: none; overflow: visible; padding: 5px; box-sizing: border-box;
}
#trophy-track-list .trophy-lane-item-wrap .trophy-lane-item {
  position: static; transform: none; width: 100%; height: 100%; max-height: none; object-fit: contain;
  filter: none;
}
#trophy-track-list .reward-card .trophy-lane-item { width: 100%; height: 152px; max-height: none; image-rendering: auto; }
/* Give the smallest currency rewards more breathing room in the same frame. */
#trophy-track-list .reward-currency .trophy-lane-item[src$="-small.webp"] {
  width: 65%;
  height: 65%;
}
#trophy-track-list .reward-card { height: 152px; margin-top: -7px; margin-bottom: -7px; }
#trophy-track-list .trophy-lane-meta { min-height: 42px; justify-content: center; }
#trophy-track-list .trophy-lane-meta span { font-size: 10px; white-space: normal; line-height: 1.4; }
#trophy-track-list .trophy-lane-card.locked .trophy-lane-item { opacity: .85; }
#trophy-track-list .trophy-lane-item { --currency-bloom-size: 14px; }

#trophy-track-list .reward-mode .trophy-lane-item {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border: 4px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  filter: none;
}

/* Keep the bloom independent of the image's rectangular filter surface. */
#trophy-track-list .trophy-lane-item-wrap:not(.reward-mode)::before {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(var(--reward-glow), .24), rgba(var(--reward-glow), .08) 55%, transparent 100%);
}

#trophy-track-list .trophy-lane-meta .trophy-pack-contents {
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 8px;
  line-height: 1.35;
}

@media (max-width: 768px) {
  #trophy-track-list { scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--trophy-snap-inset, 0px); }
  #trophy-track-list .trophy-lane-card { scroll-snap-align: start; }
  #trophy-track-list .trophy-lane-meta { height: 54px; min-height: 54px; }
  #trophy-track-list .trophy-lane-meta .trophy-pack-contents { font-size: 7px; line-height: 1.3; -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (max-width: 600px) and (min-height: 521px) {
  #trophy-track-overlay .trophy-track-stage,
  #trophy-track-list,
  #trophy-track-list .trophy-track-canvas { min-height: 390px; }
}

@media (max-height: 520px) {
  #trophy-track-overlay .trophy-track-stage,
  #trophy-track-list,
  #trophy-track-list .trophy-track-canvas { min-height: 230px; }
  #trophy-track-list .trophy-lane-item-wrap { height: 72px; }
  #trophy-track-list .reward-card { height: 78px; }
  #trophy-track-list .reward-card .trophy-lane-item { height: 78px; }
}

.level-badge {
  --level-badge-size: 52px;
  --level-accent-rgb: 176, 112, 67;
  display: flex;
  width: var(--level-badge-size);
  box-sizing: border-box;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #f5e8c2;
  font: 6px/1 "Press Start 2P", monospace;
  pointer-events: none;
}

.level-badge[data-level="2"] { --level-accent-rgb: 255, 171, 35; }
.level-badge[data-level="3"] { --level-accent-rgb: 61, 164, 78; }
.level-badge[data-level="4"] { --level-accent-rgb: 65, 143, 255; }
.level-badge[data-level="5"] { --level-accent-rgb: 255, 43, 73; }
.level-badge[data-level="6"] { --level-accent-rgb: 61, 211, 255; }
.level-badge[data-level="7"] { --level-accent-rgb: 239, 52, 157; }
.level-badge[data-level="8"] { --level-accent-rgb: 25, 218, 177; }
.level-badge[data-level="9"] { --level-accent-rgb: 178, 57, 255; }
.level-badge[data-level="10"] { --level-accent-rgb: 255, 204, 62; }

.level-badge--framed {
  position: relative;
  width: calc(var(--level-badge-size) + 6px);
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(var(--level-accent-rgb), 0.44) 0,
      rgba(var(--level-accent-rgb), 0.18) 42%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(var(--level-accent-rgb), 0.2),
      #172b45 36%,
      #091423 100%
    );
  background-position: center, center;
  background-size: 108% 108%, 100% 100%;
  background-repeat: no-repeat;
  border: 2px solid var(--bb-ink);
  box-shadow:
    0 3px 0 var(--bb-ink),
    0 0 7px rgba(var(--level-accent-rgb), 0.18),
    inset 0 0 0 2px rgba(var(--level-accent-rgb), 0.62);
  animation: level-badge-gradient-gleam 3.8s ease-in-out infinite;
}

.level-badge__caption {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  padding: 4px 2px 3px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(var(--level-accent-rgb), 0.34), transparent),
    linear-gradient(180deg, #2b415d, #132238);
  border-bottom: 2px solid var(--bb-ink);
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 2px var(--bb-ink);
}

.level-badge--framed .level-badge__caption {
  display: block;
}

.level-badge__caption-text {
  display: inline-block;
  color: rgb(var(--level-accent-rgb));
  background: linear-gradient(
    110deg,
    rgb(var(--level-accent-rgb)) 35%,
    #fff 49%,
    rgb(var(--level-accent-rgb)) 63%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 var(--bb-ink))
    drop-shadow(0 0 3px rgba(var(--level-accent-rgb), 0.38));
  animation: level-caption-gleam 4s linear infinite;
}

.level-badge__art {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--level-badge-size);
  height: var(--level-badge-size);
  flex: none;
  margin-bottom: -2px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(3, 6, 11, 0.78));
}

@keyframes level-badge-gradient-gleam {
  0%,
  100% {
    background-size: 108% 108%, 100% 100%;
    box-shadow:
      0 3px 0 var(--bb-ink),
      0 0 7px rgba(var(--level-accent-rgb), 0.18),
      inset 0 0 0 2px rgba(var(--level-accent-rgb), 0.62);
  }
  50% {
    background-size: 148% 148%, 100% 100%;
    box-shadow:
      0 3px 0 var(--bb-ink),
      0 0 11px rgba(var(--level-accent-rgb), 0.3),
      inset 0 0 0 2px rgba(var(--level-accent-rgb), 0.78);
  }
}

@keyframes level-caption-gleam {
  0%,
  20% { background-position: 100% 0; }
  65%,
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .level-badge--framed {
    animation: none;
    background-size: 125% 125%, 100% 100%;
  }

  .level-badge__caption-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.character-select-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bb-popup-backdrop);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.character-select-popup {
  width: min(1180px, 94vw);
  max-width: 1180px;
  height: min(88vh, 920px);
  height: min(88dvh, 920px);
  max-height: 88vh;
  max-height: 88dvh;
  box-sizing: border-box;
  position: relative;
  padding: 0 30px 30px;
  color: var(--bb-text);
  z-index: 1; /* above the decorative starfield */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.character-select-popup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 66px;
  background:
    var(--bb-header-gradient),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 2px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 8px
    );
  z-index: -1;
  border-radius: 0;
}

.popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 66px;
  min-height: 66px;
  margin: 0 -30px 18px -30px;
  padding: 0 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.popup-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-family: var(--bb-font-display);
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: var(--bb-title-shadow);
}

.close-popup {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 0 14px;
  background: linear-gradient(135deg, #d14b42, #ab2e2e);
  color: white;
  font-size: 22px;
  font-weight: 800;
  width: 38px;
  height: 38px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-popup.profile-close {
  width: auto;
  min-width: 98px;
  height: 30px;
  padding: 0 14px;
  font-size: 11px;
  text-transform: uppercase;
  font-family: "Press Start 2P", "Lato", sans-serif;
}

.close-popup:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.close-popup:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #7b1f1f;
}

/* Fighter card grid */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  padding: 12px 14px 24px;
  gap: 16px;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  align-content: start;
  grid-auto-rows: max-content;
}

/* Frame, fill, and states come from the shared card contract (ui-system.css). */
.character-card {
  padding: 9px 9px 11px;
  box-sizing: border-box;
  cursor: pointer;
  /* Hover lift is a compositor-only `translate` from the card contract. */
  will-change: translate;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: start;
  position: relative;
  min-height: 0;
  appearance: none;
  text-align: left;
  width: 100%;
  height: auto;
  align-self: start;
  overflow: hidden;
}


.character-card:focus-visible {
  outline: none;
}


.character-card.selected::after {
  content: none;
}

.character-card.is-maxed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255, 241, 174, 0.07) 42%,
    transparent 64%
  );
  transform: translate3d(-115%, 0, 0);
  animation: maxLevelSheen 4.5s ease-in-out infinite;
}


@keyframes maxLevelSheen {
  0%,
  62% {
    transform: translate3d(-115%, 0, 0);
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  90%,
  100% {
    transform: translate3d(115%, 0, 0);
    opacity: 0;
  }
}


.character-card.locked .character-profile-icon {
  opacity: 0.9;
  filter: saturate(0.65) brightness(0.9);
}



/* Image wrapper - profile icon */
.character-card-image-wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  flex: none;
  display: block;
  /* Match the rounded silhouette of the composed portrait. */
  border-radius: 9.375%;
  overflow: hidden;
  background: transparent;
  /* The SVG owns the complete rounded frame; avoid a second outer bezel. */
  box-shadow: none;
}

.character-profile-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9.375%;
  border: 0;
  outline: none;
  box-shadow: none;
  clip-path: none;
}

/* Compact painted medallions attach to the portrait frame as a corner plaque. */
.character-level {
  color: #afc0d6;
  font: 6px/1 "Press Start 2P", monospace;
}

.character-level-art {
  width: var(--level-badge-size);
  height: var(--level-badge-size);
}

.character-level-caption {
  padding: 4px 2px 3px;
}

.character-card-level {
  --level-badge-size: 50px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
}

.character-card-level .character-level-art {
  margin-bottom: -2px;
}

.character-card-selected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 50;
  padding: 5px 6px;
  border: 2px solid var(--bb-ink);
  border-radius: var(--bb-radius-tag);
  color: #fff;
  background: var(--bb-success-gradient);
  box-shadow: 0 3px 0 var(--bb-ink);
  font: 700 7px/1.4 "Press Start 2P", "Lato", sans-serif;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #0f5c2b;
}

.character-card-selected-badge[hidden] {
  display: none;
}

.character-card-lock-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 16, 0.12);
  z-index: 2;
}

.character-card-lock-overlay img {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: brightness(1.5) drop-shadow(0 2px 0 var(--bb-ink)) drop-shadow(0 0 4px var(--bb-ink));
}

.character-card-lock-overlay::before,
.character-details-lock-overlay::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  background: url("/assets/locked-chains.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.character-card.locked .character-card-image-wrap {
  overflow: visible;
}

.character-details-preview-frame.is-locked {
  overflow: hidden;
}

.character-details-lock-overlay::before {
  inset: 0;
  background-size: cover;
}

.character-card-lock-overlay {
  border-radius: 9.375%;
}

.character-details-lock-overlay {
  border-radius: inherit;
}

/* Card info section */
.character-card-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.character-card-name-section {
  margin-bottom: 0;
}

.character-card-name-row {
  display: flex;
  align-items: center;
  min-height: 20px;
  justify-content: center;
}

.character-card-name {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  font-family: "Press Start 2P", "Lato", sans-serif;
  text-transform: uppercase;
  color: #f7fafc;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 0 rgba(2, 5, 12, 0.7);
}

/* Status section */
.character-card-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.character-card-status-text {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  padding: 6px 8px;
  background: linear-gradient(180deg, #45546a, #2b374a);
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  border: 0;
  border-radius: var(--bb-radius-tag);
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(255, 255, 255, 0.13);
}

.character-card-status-text > * {
  position: relative;
  z-index: 1;
}

.character-card-status-label {
  font: 700 9px/1.3 "Press Start 2P", "Lato", sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.character-card-status-price {
  min-width: 34px;
  text-align: center;
  font-size: 13px;
  font-family: "Press Start 2P", "Lato", sans-serif;
}

.character-card-status-text img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.character-card-status-text:not(.maxed) {
  display: flex;
  justify-content: center;
  gap: 5px 6px;
  min-height: 34px;
}

.character-card-status-text .character-card-status-label,
.character-card-status-text .character-card-upgrade-icon {
  display: none;
}

.character-card-status-price,
.character-details-action .button-price {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.character-card-status-label {
  grid-column: 1 / -1;
}

.character-card-status-text.upgradable .character-card-status-label {
  grid-column: 2;
}

.character-card-status-text .character-card-upgrade-icon {
  width: 20px;
  height: 20px;
  filter: brightness(1.2) drop-shadow(0 1px 1px #342100);
}

.character-card-status-text:not(.maxed) > img:not(.character-card-upgrade-icon) {
  justify-self: end;
}

.character-card-status-price {
  justify-self: start;
  line-height: 1;
}

.character-card.locked .character-card-status-text {
  color: #f7fafc;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.character-card-status-text.maxed {
  color: #fff;
  min-height: 34px;
  background: linear-gradient(180deg, #bd8c24, #765315);
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-weight: 800;
  font-size: 8px;
  text-shadow: 0 2px 0 rgba(58, 35, 4, 0.8);
}

.character-card-status-text.maxed img {
  width: 18px;
  height: 18px;
}

.character-card-status-text.upgradable {
  color: #fff4bd;
  background: linear-gradient(180deg, #d5b42d, #9f8119);
}

.character-card.is-unlock-ready .character-card-status-text::after,
.character-details-action.buy-button.is-ready::after,
.character-card.is-upgrade-ready .character-card-status-text::after,
.character-details-action.upgrade-button.is-ready::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: 0;
  width: 24%;
  pointer-events: none;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 250, 209, 0.78), transparent);
  animation: characterUpgradeGlint 2.5s ease-in-out infinite;
}

.character-card.is-upgrade-ready .character-card-upgrade-icon,
.character-details-action.upgrade-button.is-ready .upgrade-icon {
  animation: characterUpgradeIconReady 850ms ease-in-out infinite alternate;
  transform-origin: 50% 72%;
}

@keyframes characterUpgradeGlint {
  /* Percentages are relative to the glint's 24%-wide box. Transform keeps
     the sweep off the layout path, including on every affordable card. */
  0%, 55% { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  62% { opacity: 1; }
  82%, 100% { transform: translateX(500%) skewX(-18deg); opacity: 0; }
}

@keyframes characterUpgradeIconReady {
  from { transform: translateY(1px) scale(1) rotate(-3deg); }
  to { transform: translateY(-2px) scale(1.12) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .character-card.is-unlock-ready .character-card-status-text::after,
  .character-details-action.buy-button.is-ready::after,
  .character-card.is-upgrade-ready .character-card-status-text::after,
  .character-details-action.upgrade-button.is-ready::after,
  .character-card.is-upgrade-ready .character-card-upgrade-icon,
  .character-details-action.upgrade-button.is-ready .upgrade-icon,
  .character-details-popup.is-upgrade-confirming,
  .upgrade-button.is-confirming,
  .stat-box-preview-fill {
    animation: none;
  }
}

.character-details-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bb-popup-backdrop);
  z-index: 1110;
  overflow: hidden;
}

.character-details-popup {
  width: min(920px, 90vw);
  max-height: min(90vh, 900px);
  max-height: min(90dvh, 900px);
  box-sizing: border-box;
  color: #e5eefb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform, opacity;
}

.character-details-popup.is-upgrade-confirming {
  animation: characterConfirmFramePulse 430ms ease-in-out infinite alternate;
}

@keyframes characterConfirmFramePulse {
  from {
    box-shadow:
      0 5px #000,
      0 -5px #000,
      5px 0 #000,
      -5px 0 #000,
      0 10px #00000038,
      5px 5px #00000038,
      -5px 5px #00000038,
      inset 0 5px #ffffff1f,
      0 0 0 rgba(80, 255, 165, 0);
  }
  to {
    box-shadow:
      0 5px #000,
      0 -5px #000,
      5px 0 #000,
      -5px 0 #000,
      0 10px #00000038,
      5px 5px #00000038,
      -5px 5px #00000038,
      inset 0 5px #ffffff1f,
      0 0 26px 7px rgba(80, 255, 165, 0.78);
  }
}

.character-details-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px 18px;
  border-bottom: 0;
  background: var(--bb-header-gradient);
  box-shadow:
    0 4px #000,
    inset 0 4px rgba(255, 255, 255, 0.16);
  position: relative;
}

.character-details-popup.is-character-locked .character-details-header {
  background: linear-gradient(90deg, #515865, #343a45);
}

.character-details-wallet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}

.character-details-wallet > span {
  min-width: 76px;
  height: 34px;
  display: grid;
  grid-template-columns: 18px auto;
  grid-template-rows: 10px 13px;
  align-items: center;
  column-gap: 5px;
  padding: 4px 7px 4px 6px;
  box-sizing: border-box;
  border: 2px solid #203452;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(5, 14, 27, 0.78), rgba(18, 24, 43, 0.88)),
    #0a1120;
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.78),
    inset 0 2px rgba(255, 255, 255, 0.07);
}

.character-details-wallet small {
  grid-column: 2;
  color: #9eb2cd;
  font: 700 7px/1 "Press Start 2P", monospace;
  letter-spacing: 0.04em;
}

.character-details-wallet img {
  grid-row: 1 / span 2;
  width: 17px;
  height: 17px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.character-details-wallet strong {
  grid-column: 2;
  color: #f9fbff;
  font: 700 9px/1 "Press Start 2P", monospace;
}

.character-details-title-wrap {
  min-width: 0;
}

.character-details-title {
  margin: 0;
  font-family: "Press Start 2P", "Lato", sans-serif;
  text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 21px);
  color: #f8fbff;
  line-height: 1.3;
  overflow-wrap: anywhere;
  letter-spacing: 1px;
  text-shadow: var(--bb-title-shadow);
}

.character-details-header-description {
  margin: 8px 0 0;
  font-size: 12px;
  color: #dceaff;
  line-height: 1.35;
  max-width: 72ch;
}

.character-details-popup.is-character-locked .character-details-header-description {
  color: #d3d8e0;
}

.character-details-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, #d9494e, #ad2734);
  border: 0;
  color: white;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(255, 255, 255, 0.18);
  transition: all 0.2s;
}

.character-details-close:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.character-details-close:active {
  transform: translateY(1px);
  box-shadow:
    0 2px #000,
    0 -2px #000,
    2px 0 #000,
    -2px 0 #000,
    inset 0 3px rgba(0, 0, 0, 0.22);
}

/* Main content area */
.character-details-content {
  display: grid;
  grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.05fr);
  /* Keep each row tall enough for its content when the panel scrolls. */
  grid-auto-rows: max-content;
  align-content: start;
  gap: 20px;
  padding: 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* Preview - smaller, no rounded corners */
.character-details-preview {
  position: relative;
  display: flex;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.character-details-preview-frame {
  --skin-rarity-rgb: 148, 163, 184;
  --skin-rarity-start-rgb: 88, 104, 128;
  --skin-rarity-end-rgb: 44, 57, 78;
  --character-chroma-main: 148, 163, 184;
  --character-chroma-light: 215, 225, 237;
  --character-chroma-shadow: 44, 57, 78;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  box-sizing: border-box;
  border-radius: 0;

  background:
    radial-gradient(circle at top, rgba(var(--character-chroma-main), 0.15), transparent 40%),
    linear-gradient(180deg, rgba(10, 17, 34, 0.95), rgba(6, 10, 20, 0.98));
  border: 0;
  outline: 0;
  box-shadow:
    0 4px #000,
    0 -4px #000,
    4px 0 #000,
    -4px 0 #000,
    0 9px #00000038,
    inset 0 4px rgba(var(--character-chroma-main), 0.3);
  display: grid;
  place-items: center;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  perspective: 850px;
  perspective-origin: 50% 48%;
}

.character-details-preview-frame[data-character="ninja"] {
  --character-chroma-main: 187, 51, 73;
  --character-chroma-light: 255, 213, 204;
  --character-chroma-shadow: 72, 15, 40;
}

.character-details-preview-frame[data-character="thorg"] {
  --character-chroma-main: 210, 149, 53;
  --character-chroma-light: 255, 241, 176;
  --character-chroma-shadow: 86, 48, 25;
}

.character-details-preview-frame[data-character="draven"] {
  --character-chroma-main: 151, 74, 220;
  --character-chroma-light: 239, 209, 255;
  --character-chroma-shadow: 50, 23, 71;
}

.character-details-preview-frame[data-character="wizard"] {
  --character-chroma-main: 52, 125, 224;
  --character-chroma-light: 208, 245, 255;
  --character-chroma-shadow: 16, 46, 102;
}

.character-details-preview-frame[data-character="huntress"] {
  --character-chroma-main: 67, 170, 119;
  --character-chroma-light: 219, 255, 186;
  --character-chroma-shadow: 18, 63, 56;
}

.character-details-preview-frame[data-character="gloop"] {
  --character-chroma-main: 56, 191, 209;
  --character-chroma-light: 209, 255, 255;
  --character-chroma-shadow: 18, 82, 104;
}

.skin-rarity-common {
  --skin-rarity-rgb: 148, 163, 184;
  --skin-rarity-start-rgb: 88, 104, 128;
  --skin-rarity-end-rgb: 44, 57, 78;
}

.skin-rarity-rare {
  --skin-rarity-rgb: 65, 163, 255;
  --skin-rarity-start-rgb: 37, 132, 225;
  --skin-rarity-end-rgb: 23, 67, 139;
}

.skin-rarity-epic {
  --skin-rarity-rgb: 181, 91, 255;
  --skin-rarity-start-rgb: 157, 67, 230;
  --skin-rarity-end-rgb: 78, 35, 139;
}

.skin-rarity-legendary {
  --skin-rarity-rgb: 255, 179, 55;
  --skin-rarity-start-rgb: 235, 160, 38;
  --skin-rarity-end-rgb: 139, 75, 17;
}

.character-details-preview-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 2;
  pointer-events: none;
  /* Fixed square cells, sharing the card portrait's palette and mosaic. */
  background:
    var(--portrait-chroma-0) left top / 64px 64px no-repeat,
    var(--portrait-chroma-1) right top / 64px 64px no-repeat,
    var(--portrait-chroma-2) left bottom / 64px 64px no-repeat,
    var(--portrait-chroma-3) right bottom / 64px 64px no-repeat;
}

.character-details-preview-frame.is-locked .character-details-preview-image {
  filter: saturate(0.65) brightness(0.9);
}

.character-details-preview-frame.is-maxed {
  box-shadow:
    0 4px #000,
    0 -4px #000,
    4px 0 #000,
    -4px 0 #000,
    0 9px #00000038,
    inset 0 4px rgba(255, 224, 143, 0.36);
}

.character-details-preview-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle,
    rgba(var(--skin-rarity-rgb), 0.26),
    transparent 50%
  );
  filter: blur(15px);
  animation: characterGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes characterGlowPulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.character-details-preview-image {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: min(100%, 280px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
  backface-visibility: hidden;
  transform-origin: 50% 65%;
  pointer-events: none;
}

.is-skin-revolving .character-details-preview-image {
  will-change: transform, opacity;
}

.character-details-preview-level-badge {
  --level-badge-size: 64px;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  overflow: hidden;
  border: 3px solid var(--bb-ink);
  box-shadow:
    0 4px 0 var(--bb-ink),
    0 0 10px rgba(var(--level-accent-rgb), 0.28),
    inset 0 0 0 2px rgba(var(--level-accent-rgb), 0.72);
  font-size: 7px;
}

.character-details-preview-level-badge .character-level-art {
  margin-bottom: -3px;
}

.character-details-preview-level-badge .character-level-caption {
  padding: 4px 2px 3px;
}


.character-details-lock-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  background: rgba(5, 10, 20, 0.2);
}

.character-details-lock-overlay img {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: brightness(1.5) drop-shadow(0 3px 0 var(--bb-ink)) drop-shadow(0 0 6px var(--bb-ink));
}

.character-details-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.character-details-sticky-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 17, 34, 0.92),
    rgba(8, 13, 26, 0.95)
  );
  padding: 12px 16px 14px;
  box-shadow:
    0 -3px #000,
    inset 0 3px rgba(255, 255, 255, 0.06);
}

.character-details-footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.character-details-inline-skin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 390px;
  padding: 7px;
  background:
    radial-gradient(
      circle at 48% 120%,
      rgba(var(--skin-rarity-rgb), 0.16),
      transparent 62%
    ),
    linear-gradient(180deg, rgba(23, 36, 59, 0.98), rgba(9, 17, 32, 0.98));
  border: 0;
  border-radius: 0;
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    0 6px #00000038,
    inset 0 3px rgba(var(--skin-rarity-rgb), 0.24),
    inset 0 -3px #00000038;
}

.character-details-inline-skin.is-locked {
  background:
    linear-gradient(rgba(64, 70, 81, 0.38), rgba(25, 31, 42, 0.58)),
    linear-gradient(180deg, #202c3f, #101827);
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px #ffffff12;
}

.character-details-skin-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  color: #f4f7fb;
  font: 700 7px/1 "Press Start 2P", "Lato", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: 0 2px #07101f;
}

.character-details-hanger-icon {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #f4f7fb;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 0 #081226);
}

.character-details-skin-controls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.character-details-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Stats container - 3 boxes */
.character-details-stats-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 300px;
}

.character-details-stat-box {
  background: linear-gradient(180deg, rgba(20, 32, 54, 0.9), rgba(13, 23, 42, 0.94));
  border: 0;
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(96, 165, 250, 0.26);
  padding: 13px 14px 15px;
  border-radius: 0;
}

.character-details-stat-box:is(.attack-box, .special-box) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.character-details-stat-box.health-box {
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(248, 113, 113, 0.34);
}

.character-details-stat-box.special-box {
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(167, 139, 250, 0.34);
}

.stat-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #f7fafc;
}

.stat-box-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.stat-box-label {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.stat-box-value {
  font-size: 17px;
  font-weight: 900;
  color: #fef3c7;
  margin-left: auto;
  font-family: "Press Start 2P", "Lato", sans-serif;
}

.stat-box-value-stack {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 58px;
}

.stat-box-value-stack .stat-box-value {
  margin-left: 0;
  line-height: 1;
}

.stat-box-gain {
  color: #fff;
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  animation: statGainReveal 240ms ease-out both;
}

.stat-box-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  font-size: 11px;
}

.stat-box-content .stat-box-value {
  font-size: 18px;
  color: #fef3c7;
  margin-left: 0;
}

.stat-box-track {
  position: relative;
  width: 100%;
  height: 15px;
  box-sizing: border-box;
  border-radius: 0;
  background: #263c52;
  border: 2px solid #050b13;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    inset 0 2px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.stat-box-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 2px),
    rgba(3, 8, 15, 0.95) calc(10% - 2px),
    rgba(3, 8, 15, 0.95) 10%
  );
}

.stat-box-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.24);
}

.stat-box-preview-fill {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 255, 255, 0.6);
  animation: statPreviewFillPulse 430ms ease-in-out infinite alternate;
}

.stat-box-fill.is-stat-leveling {
  transition: width 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.character-details-stat-box.is-leveling-up {
  position: relative;
  overflow: hidden;
  animation: statLevelAura 760ms ease-out both;
}

.character-details-stat-box.is-leveling-up::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 244, 183, 0.48), transparent 62%);
  mix-blend-mode: screen;
  animation: statLevelFlash 780ms ease-out both;
}

@keyframes statGainReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes statPreviewFillPulse {
  from { opacity: 0.58; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.45); }
}

@keyframes statLevelAura {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 231, 134, 0)); }
  35% { filter: brightness(1.22) drop-shadow(0 0 13px rgba(255, 231, 134, 0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 231, 134, 0)); }
}

@keyframes statLevelFlash {
  0% { opacity: 0; transform: scale(0.86); }
  38% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}

.attack-box .stat-box-fill {
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.special-box .stat-box-fill {
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}

.stat-box-desc {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 8px;
}

.stat-box-detail {
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.2;
}

.stat-box-metrics {
  display: grid;
  gap: 8px;
  margin-block: auto;
  padding-top: 0;
}

.attack-metrics {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.special-metrics {
  grid-template-columns: minmax(0, 1fr);
}

.stat-box-metric {
  min-width: 0;
  min-height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 9px;
  border: 2px solid #060b15;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(33, 57, 91, 0.96), rgba(10, 20, 38, 0.98));
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.82),
    inset 0 2px rgba(255, 255, 255, 0.08);
}

.stat-box-metric.reload-metric {
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.82),
    inset 0 2px rgba(83, 219, 255, 0.3);
}

.attack-metrics .stat-box-metric {
  min-height: 44px;
  padding-block: 5px;
}

.stat-box-metric.ammo-metric {
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.82),
    inset 0 2px rgba(255, 193, 63, 0.32);
}

.stat-box-metric.hits-metric {
  background:
    radial-gradient(circle at 18% 50%, rgba(173, 70, 255, 0.15), transparent 38%),
    linear-gradient(135deg, rgba(45, 34, 88, 0.96), rgba(16, 18, 43, 0.98));
  box-shadow:
    0 3px 0 rgba(2, 5, 11, 0.82),
    inset 0 2px rgba(192, 132, 252, 0.34);
}

.stat-box-metric img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(1, 4, 10, 0.75));
}

.stat-box-metric-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-box-metric-label {
  color: #9fb2ca;
  font: 6px/1 "Press Start 2P", "Lato", sans-serif;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.stat-box-metric strong {
  color: #f8fbff;
  font: 10px/1 "Press Start 2P", "Lato", sans-serif;
  white-space: nowrap;
  text-shadow: 0 2px 0 #040812;
}

.stat-box-metric strong small {
  color: #c4b5fd;
  font: inherit;
  font-size: 7px;
  text-transform: uppercase;
}

.health-box .stat-box-value {
  color: #fca5a5;
}

.attack-box .stat-box-value {
  color: #fbbf24;
}

.special-box .stat-box-value {
  color: #c4b5fd;
}

/* Attack and Special side by side */
.character-details-stat-boxes-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

/* Description */
.character-details-description {
  padding: 10px 12px;
  background: rgba(10, 17, 34, 0.5);
  border: 2px solid rgba(100, 100, 100, 0.4);
  box-shadow: 0 2px 0 #0a0a0a;
  font-size: 11px;
  line-height: 1.4;
  color: #cbd5e1;
}

.character-details-description p {
  margin: 0;
  color: #e2e8f0;
}

/* Footer section */
.character-details-footer-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(20, 30, 50, 0.6);
  border: 2px solid rgba(100, 100, 100, 0.4);
  box-shadow: 0 2px 0 #0a0a0a;
}

.skin-selector-section {
  justify-content: center;
}

.character-details-skin-stepper {
  display: grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
  width: 38px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(var(--skin-rarity-rgb), 0.16), rgba(7, 16, 31, 0.56)),
    linear-gradient(180deg, #263c5a, #13223a);
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    0 6px #00000038,
    inset 0 3px rgba(255, 255, 255, 0.22),
    inset 0 -3px #00000038;
  color: #fff;
  font-weight: 900;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background 130ms, transform 130ms;
}

.character-details-skin-stepper:hover:not(:disabled) {
  background:
    linear-gradient(rgba(var(--skin-rarity-rgb), 0.3), rgba(7, 16, 31, 0.36)),
    linear-gradient(180deg, #315078, #172a47);
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    inset 0 3px rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.character-details-skin-stepper:active:not(:disabled) {
  transform: translateY(1px);
}

.character-details-skin-stepper:disabled {
  opacity: 0.34;
  filter: grayscale(0.75);
  cursor: default;
}

.character-details-skin-name-box {
  min-width: 0;
  height: 40px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7px 9px;
  box-sizing: border-box;
  grid-template-rows: auto auto;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 130%, rgba(var(--skin-rarity-rgb), 0.24), transparent 62%),
    linear-gradient(180deg, rgba(24, 40, 65, 0.98), rgba(10, 20, 38, 0.98));
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    0 6px #00000038,
    inset 0 3px rgba(var(--skin-rarity-rgb), 0.24),
    inset 0 -3px #00000038;
  color: #f4f7fb;
  font-family: var(--bb-font-display);
  font-weight: 800;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px #07101f;
}

.character-details-skin-name-box strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-details-skin-lock {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.character-details-inline-skin.is-locked .character-details-skin-name-box {
  background:
    linear-gradient(rgba(64, 70, 81, 0.5), rgba(25, 31, 42, 0.72)),
    linear-gradient(180deg, #263244, #151e2c);
  box-shadow:
    0 3px #000,
    0 -3px #000,
    inset 0 3px #ffffff0d;
}

.character-details-inline-skin.is-locked .character-details-skin-rarity {
  color: rgba(var(--skin-rarity-rgb), 0.78);
  text-shadow: 0 0 7px rgba(var(--skin-rarity-rgb), 0.36);
}

.character-details-skin-rarity {
  color: rgb(var(--skin-rarity-rgb));
  font-size: 6px;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(var(--skin-rarity-rgb), 0.7);
}

.upgrade-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Footer buttons */
.character-details-footer-buttons {
  display: none;
}

.character-details-action.pixel-menu-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 50px;
  min-width: 110px;
  padding: 7px 14px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--bb-motion-fast) var(--bb-ease),
    filter var(--bb-motion-fast) ease;
  border: 0;
  border-radius: var(--bb-radius-control);
  box-shadow: var(--bb-control-shadow);
  text-align: center;
  letter-spacing: 0.5px;
}

.character-details-action.pixel-menu-button:has(.character-details-action-label) {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 14px 22px;
  padding: 5px 18px;
  gap: 4px;
  align-content: center;
}

.character-details-inline-actions .character-details-action.pixel-menu-button {
  flex: 0 0 110px;
  width: 110px;
  min-width: 110px;
  height: 50px;
  min-height: 50px;
  white-space: nowrap;
}

.character-details-inline-actions .character-details-action:is(.buy-button, .upgrade-button) {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
}

.character-details-action > * {
  position: relative;
  z-index: 1;
}

.character-details-action:hover:not(:disabled) {
  filter: brightness(1.12) saturate(1.06);
  transform: translateY(-2px);
}

.character-details-action:active:not(:disabled) {
  filter: brightness(0.97);
  transform: translateY(5px);
  box-shadow: var(--bb-control-shadow-pressed);
}

.upgrade-button {
  background: linear-gradient(180deg, #d5b42d, #9f8119);
  border: 0;
  height: 50px;
  white-space: nowrap;
  color: #f7fafc;
}

.upgrade-button:not(:disabled):hover {
  background: linear-gradient(180deg, #e4c341, #b09522);
}

.upgrade-button.is-confirming {
  background: linear-gradient(180deg, #27c77c, #138a4f);
  color: #fff;
  animation: upgradeConfirmPulse 430ms ease-in-out infinite alternate;
}

.upgrade-button.is-confirming:not(:disabled):hover {
  background: linear-gradient(180deg, #39de91, #15965a);
}

@keyframes upgradeConfirmPulse {
  from { box-shadow: var(--bb-control-shadow), 0 0 0 rgba(80, 255, 165, 0); }
  to { box-shadow: var(--bb-control-shadow), 0 0 16px rgba(80, 255, 165, 0.92); }
}

.upgrade-button.disabled {
  background: linear-gradient(180deg, #5a5a5a, #4a4a4a);
  border-color: #7a7a7a;
  color: #9ca3af;
  opacity: 0.6;
  cursor: not-allowed;
}

.buy-button {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: 0;
  height: 50px;
  color: #f7fafc;
}

.buy-button:hover {
  background: linear-gradient(180deg, #4b94fc, #3574f0);
}

.select-button {
  background: linear-gradient(180deg, #10b981, #059669);
  border: 0;
  height: 50px;
  color: #f7fafc;
}

.select-button:hover {
  background: linear-gradient(180deg, #1ecb8f, #17a678);
}

.character-details-maxed-label {
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  height: 50px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(215, 167, 44, 0.72), rgba(142, 96, 20, 0.76));
  border: 0;
  border-radius: var(--bb-radius-tag);
  box-shadow: var(--bb-control-shadow);
  color: #fff4bc;
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(65, 39, 3, 0.62);
}

.character-details-maxed-label img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.character-details-maxed-label span {
  line-height: 1.15;
}

.button-price {
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-weight: 800;
  color: #fef3c7;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.character-details-action-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 8px;
  line-height: 1;
}

.character-details-action-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.cs-currency {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: inline-block;
}

.character-details-action .button-price .cs-currency {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.character-details-action.buy-button {
  min-height: 50px;
}

.character-card-status-text.maxed,
.character-details-maxed-label,
.character-details-action {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.character-details-maxed-label img,
.character-details-action > .upgrade-icon {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* Success animation - heavy with effects */
.character-details-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.character-details-success-beams {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg 20deg,
    rgba(255, 255, 255, 0.3) 20deg 28deg
  );
  animation: successBeamsSpin 1.2s linear forwards;
  filter: blur(4px) saturate(1.5) brightness(1.2);
}

.character-details-success-beams.coin {
  filter: hue-rotate(35deg) saturate(2) brightness(1.3) blur(4px);
}

.character-details-success-beams.gem {
  filter: hue-rotate(250deg) saturate(2) brightness(1.25) blur(4px);
}

@keyframes successBeamsSpin {
  from {
    transform: rotate(0deg) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: rotate(360deg) scale(1.3);
    opacity: 0;
  }
}

.character-details-success-label {
  position: relative;
  z-index: 1;
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fef3c7;
  text-shadow:
    0 2px 0 #7b6312,
    0 4px 8px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(254, 243, 199, 0.4);
  letter-spacing: 1px;
  animation: successLabelPop 1.2s ease-out forwards;
}

@keyframes successLabelPop {
  0% {
    transform: scale(0) translateY(20px);
    opacity: 0;
  }
  40% {
    transform: scale(1.1) translateY(-5px);
    opacity: 1;
  }
  70% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .character-details-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .character-details-info {
    height: auto;
  }

  .character-details-stats-container {
    min-height: 0;
  }

  .character-details-footer-line {
    flex-wrap: wrap;
  }

  .character-details-inline-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .character-details-stat-boxes-row {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .character-details-preview-frame {
    height: 240px;
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .characters-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
  }

  .character-card {
    gap: 8px;
    padding: 8px;
  }

  .character-card-image-wrap {
    width: 100%;
    height: auto;
  }

  .character-card-name {
    font-size: 9px;
  }

  .character-details-popup {
    max-width: 95vw;
  }

  .character-details-header {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  .character-details-content {
    padding: 12px;
    gap: 16px;
  }

  .character-details-title {
    font-size: 16px;
  }

  .character-details-header-description {
    font-size: 11px;
  }

  .character-details-inline-skin {
    width: 100%;
    max-width: none;
  }

  .character-details-inline-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }

  .character-details-footer-line {
    flex-direction: column;
    align-items: stretch;
  }

  .character-details-inline-actions .character-details-action {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    height: 60px;
  }

  .character-details-maxed-label {
    flex-basis: 128px;
    width: 128px;
    min-width: 128px;
    height: 44px;
  }

  .character-details-skin-stepper,
  .character-details-skin-name-box {
    height: 40px;
  }

  .character-details-preview-frame {
    height: 200px;
    min-height: 200px;
  }
}

/* Static stars preserve the backdrop without a full-screen repaint loop. */
.character-select-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 31px 47px, rgba(255, 255, 255, 0.35) 1px, transparent 2px) 0 0 / 173px 137px,
    radial-gradient(circle at 73px 29px, rgba(120, 180, 255, 0.25) 1px, transparent 2.5px) 0 0 / 227px 191px,
    rgba(0, 0, 0, 0.15);
}

/* Confirmation modal sizing shared with the level-up visuals. */
.cs-vars,
:root {
  --cs-level-size: 176px;
  --cs-level-wrap: calc(var(--cs-level-size) + 8px);
}

/* Dialog shell, title, body, and actions live in selectionPopup.css. */
.cs-price-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}


/* Level upgrade beams (from confirm dialogs) */
.cs-level-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.cs-level-img,
.cs-next-badge {
  width: var(--cs-level-size);
  height: var(--cs-level-size);
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  display: block;
}

.cs-arrow {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}

.cs-next-wrap {
  position: relative;
  width: var(--cs-level-wrap);
  height: var(--cs-level-wrap);
  display: grid;
  place-items: center;
}

.cs-beams {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg 28deg,
    rgba(255, 255, 255, 0.22) 28deg 36deg
  );
  animation: csSpin 10s linear infinite;
  filter: blur(3px) saturate(1.2);
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0 24%,
    rgba(0, 0, 0, 0.5) 62%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0 24%,
    rgba(0, 0, 0, 0.5) 62%,
    rgba(0, 0, 0, 1) 100%
  );
}

.cs-beams.coin {
  filter: hue-rotate(40deg) saturate(1.8) brightness(1.15);
}

.cs-beams.gem {
  filter: hue-rotate(210deg) saturate(1.8) brightness(1.1);
}

@keyframes csSpin {
  to {
    transform: rotate(360deg);
  }
}

.cs-hero {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.cs-hero-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.cs-hero-beams {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg 28deg,
    rgba(255, 255, 255, 0.22) 28deg 36deg
  );
  animation: csSpin 14s linear infinite;
  filter: blur(1px) saturate(1.2);
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0 20%,
    rgba(0, 0, 0, 0.5) 58%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0 20%,
    rgba(0, 0, 0, 0.5) 58%,
    rgba(0, 0, 0, 1) 100%
  );
}

.cs-hero-beams.gem {
  filter: hue-rotate(210deg) saturate(1.8) brightness(1.1);
}

.cs-hero-beams.coin {
  filter: hue-rotate(40deg) saturate(1.8) brightness(1.15);
}

/* Success overlay displayed after card unlock/upgrade */
.cs-card-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: cs-pop-in 250ms ease-out;
}

.cs-card-success.fade-out {
  animation: cs-fade-out 300ms ease-in forwards;
}

.cs-card-beams {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255, 230, 150, 0) 0deg,
    rgba(255, 230, 150, 0) 8deg,
    rgba(255, 230, 150, 0.65) 12deg,
    rgba(255, 230, 150, 0.65) 20deg
  );
  mask: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 1) 100%
  );
  animation: cs-spin 6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 222, 96, 0.4));
}

.cs-card-beams.gem {
  filter: hue-rotate(210deg) saturate(1.2)
    drop-shadow(0 0 10px rgba(80, 180, 255, 0.5));
}

.cs-card-success-label {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 0;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

@keyframes cs-pop-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes cs-fade-out {
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes cs-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Currency balances use a single icon-and-number row at every breakpoint. */
.character-details-wallet > span { grid-template-rows: auto; }
.character-details-wallet img, .character-details-wallet strong { grid-row: 1; }

/* Geometric arrows avoid font baseline and side-bearing offsets. */
.character-details-skin-stepper::before {
  content: "";
  width: 8px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
}
.character-details-skin-stepper:first-child::before {
  transform: rotate(180deg);
}

.character-details-skin-name-text,
.character-details-skin-rarity {
  color: rgb(var(--skin-rarity-rgb));
  background: linear-gradient(110deg,
    rgb(var(--skin-rarity-rgb)) 35%, #fff 49%,
    rgb(var(--skin-rarity-rgb)) 63%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 3px rgba(var(--skin-rarity-rgb), .35));
  animation: skin-rarity-gleam 4s linear infinite;
}
.character-details-skin-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes skin-rarity-gleam {
  0%, 20% { background-position: 100% 0; }
  65%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .character-details-skin-name-text,
  .character-details-skin-rarity {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

@media (max-width: 640px) {
  .character-card-level { --level-badge-size: 42px; top: 6px; left: 6px; }
  .character-card-level .character-level-caption { font-size: 5px; }
  .character-card-name { font-size: 8px; letter-spacing: 0; }
}

/* Keep upgrade comparisons legible and inside the confirmation at small sizes. */
.cs-level-img.character-level,
.cs-next-badge.character-level {
  --level-badge-size: 96px;
  width: 112px;
  height: 112px;
  display: flex;
}
.cs-next-wrap { width: 120px; height: 120px; }

@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/PressStart2P.woff2") format("woff2");
  font-display: swap;
}

html {
  width: var(--bb-viewport-width, 100vw);
  height: var(--bb-viewport-height, 100dvh);
}

body {
  margin: 0;
  background-color: #071426;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Lato", sans-serif;
  width: var(--bb-viewport-width, 100vw);
  height: var(--bb-viewport-height, 100dvh);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* Images are display-only throughout the lobby UI. Prevent the browser's
   native drag ghost from competing with click and tap interactions. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

input,
textarea,
select {
  user-select: text;
  -webkit-user-select: text;
}

button,
.pixel-menu-button,
.party-button,
.mode-picker,
.map-picker,
.account,
.dropdown,
#ready {
  touch-action: manipulation;
}

body.mobile-game-ui #game-timer-hud,
body.mobile-game-ui #team-status-hud,
body.mobile-game-ui #battle-keybind-hud {
  transform: scale(0.82);
  transform-origin: top center;
}

body.mobile-game-ui #game-timer-hud {
  top: 18px;
}

body.mobile-game-ui #team-status-hud {
  top: 18px;
}

body.mobile-game-ui #battle-keybind-hud {
  bottom: 8px;
  right: 8px;
  opacity: 0.78;
}

body.mobile-game-ui #game-timer-display,
body.mobile-game-ui .team-hud-player,
body.mobile-game-ui .team-hud-player-name {
  font-size: 0.88em;
}

body.mobile-game-ui #battle-start-overlay {
  zoom: 0.9;
}

#lobby-bg-fade {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 220ms ease;
}

#lobby-bg-fade.active {
  opacity: 1;
}

/* Utility */
.hidden {
  display: none !important;
}

.flex {
  display: flex;
  align-items: center;
}
.lobby-wordmark {
  position: relative;
  margin: 0 0 0 4px;
  line-height: 0;
  overflow: hidden;
}

.lobby-wordmark img {
  display: block;
  width: clamp(120px, 18vw, 180px);
  height: auto;
}

h3 {
  margin: 0;
  font-weight: 200;
}

/* Fortnite-style navbar with gradient and glow */
#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  top: 0;
  height: 60px;
  padding: 5px 20px;
  box-sizing: border-box;
  background: linear-gradient(
    135deg,
    rgba(17, 17, 48, 0.9),
    rgba(8, 8, 16, 0.9)
  );
  color: white;
  border-bottom: 2px solid #363c0f;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
  z-index: 1000;
  position: relative;
}

.fullscreen-toggle {
  min-width: 48px;
  padding: 0 10px;
  margin-left: -2px;
  letter-spacing: 1px;
}

.fullscreen-toggle.is-active {
  background:
    linear-gradient(135deg, rgba(67, 126, 255, 0.94), rgba(36, 92, 194, 0.86)),
    rgba(14, 30, 70, 0.38);
}

.button {
  padding: 5px 10px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.pixel-menu-button {
  font-size: 12px;
  text-transform: uppercase;
  font-family: "Press Start 2P", system-ui;
  border: 0;
  box-shadow:
    0px 5px black,
    0px -5px black,
    5px 0px black,
    -5px 0px black,
    0px 10px #00000038,
    5px 5px #00000038,
    -5px 5px #00000038,
    inset 0px 5px #ffffff36;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pixel-menu-button:active {
  /* The face moves below; the actual button stays put so edge clicks land. */
  transform: none;
  box-shadow:
    0px 5px black,
    0px -5px black,
    5px 0px black,
    -5px 0px black,
    inset 0px 5px #00000038;
}

.pixel-menu-button:active > * {
  translate: 0 2px;
}

.resources {
  margin-right: 0;
  gap: 5px;
}

.currency-resource {
  border: 0;
  min-height: 30px;
  padding: 4px 8px;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  box-shadow: inset 0 0 0 0 rgba(122, 169, 229, 0);
  transition:
    background-color 130ms ease,
    box-shadow 130ms ease,
    filter 130ms ease,
    transform 130ms ease;
}

.currency-resource:hover,
.currency-resource:focus-visible {
  outline: none;
  background: rgba(55, 83, 124, 0.58);
  box-shadow: none;
  filter: brightness(1.08);
}

.currency-resource:focus-visible {
  outline: 2px solid #9bc7ff;
  outline-offset: 2px;
}

.currency-resource:active {
  transform: translateY(2px);
  filter: brightness(0.96);
}

#navbar-right {
  display: flex;
  align-items: center;
  gap: var(--bb-action-gap);
}

.trophy-resource {
  height: 30px;
  padding: 0 10px;
  margin-left: 10px;
  margin-right: 0;
  color: #fff4c8;
  background:
    linear-gradient(135deg, rgba(176, 131, 34, 0.92), rgba(137, 95, 18, 0.84)),
    rgba(35, 22, 8, 0.42);
  box-shadow:
    0px 5px rgb(85, 58, 8),
    0px -5px rgb(85, 58, 8),
    5px 0px rgb(85, 58, 8),
    -5px 0px rgb(85, 58, 8),
    0px 10px #00000038,
    5px 5px #00000038,
    -5px 5px #00000038,
    inset 0px 5px #ffffff36;
}

.trophy-resource:hover {
  background:
    linear-gradient(135deg, rgba(208, 153, 38, 0.96), rgba(154, 103, 18, 0.88)),
    rgba(40, 25, 8, 0.44);
}

.trophy-resource p {
  margin: 0;
}

.trophy-resource {
  position: relative;
}

.trophy-claim-badge {
  position: absolute;
  right: -7px;
  top: -8px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: "Press Start 2P", system-ui;
  color: #fff;
  background: linear-gradient(135deg, #f25555, #c72f2f);
  box-shadow: 0 0 0 2px rgba(9, 15, 30, 0.96);
}

.trophy-resource.has-claimable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 213, 122, 0.74);
  animation: trophyPulseGlow 1.2s ease-in-out infinite;
}

@keyframes trophyPulseGlow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#gem-count,
#coin-count {
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 12px;
}

#party {
  height: 45px;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  border-radius: 0;
  padding: 0px 15px;
  box-sizing: border-box;
  color: white;
  margin-left: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
  font-weight: 600;
}
#party:hover {
  background: linear-gradient(135deg, #0099cc, #007399);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.6);
  transform: translateY(-2px);
}

/* Lobby area with platforms */
#lobby-area {
  position: relative;
  width: 100%;
  height: calc(var(--bb-viewport-height, 100dvh) - 140px);
  margin-top: 20px;
  --lobby-character-seam-overlap: 0px;
}

/* Platform styling - responsive and mode-based sizing */
.platform {
  position: absolute;
  --platform-width: clamp(220px, 30vw, 420px);
  --platform-base-y: 0px;
  --platform-float-distance: 10px;
  /* Remove background image from container to avoid overlap with character slot */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* ensure no space between children */
  width: var(--platform-width);
  padding-top: 10px;
  transition:
    left 0.3s ease,
    right 0.3s ease,
    top 0.3s ease,
    width 0.3s ease;
  isolation: isolate;
  will-change: transform;
  animation: lobbyPlatformHoverFloat 7s ease-in-out infinite;
}

.platform[data-team="your-team"][data-slot="1"] {
  animation-delay: -0.15s;
}

.platform[data-team="your-team"][data-slot="2"] {
  animation-delay: -0.7s;
}

.platform[data-team="your-team"][data-slot="3"] {
  animation-delay: -5.2s;
}

.platform[data-team="op-team"][data-slot="1"] {
  animation-delay: -0.4s;
}

.platform[data-team="op-team"][data-slot="2"] {
  animation-delay: -3s;
}

.platform[data-team="op-team"][data-slot="3"] {
  animation-delay: -4.45s;
}

/* Visual platform image placed as a separate element to stack vertically */
.platform-image {
  position: relative;
  margin-top: calc(-1 * var(--platform-surface-offset, 0px));
  z-index: 1;
  width: 100%;
  aspect-ratio: 638 / 300;
  height: auto;
  background-image: url("/assets/lushy/lobbyPlatform.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  transition:
    transform 200ms ease,
    filter 200ms ease;
}

.platform-image.map-switch {
  animation: platformImagePop 240ms ease;
}

@keyframes platformImagePop {
  0% {
    transform: scale(0.96);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
}

@keyframes lobbyPlatformHoverFloat {
  0%,
  100% {
    transform: translateY(var(--platform-base-y));
  }
  50% {
    transform: translateY(
      calc(var(--platform-base-y) - var(--platform-float-distance))
    );
  }
}

/* 1v1 Mode - Much larger platforms utilizing more space */
.mode-1 .platform {
  --platform-width: clamp(220px, 34vw, 420px);
}

.mode-1 .platform.your-team-1 {
  left: 5%; /* Moved closer to center */
  top: 45%; /* Adjusted to use more bottom space */
  --platform-base-y: -30%; /* Less centering to use bottom space */
}

.mode-1 .platform.op-team-1 {
  right: 5%; /* Moved closer to center */
  top: 45%; /* Adjusted to use more bottom space */
  --platform-base-y: -30%; /* Less centering to use bottom space */
}

/* 2v2 Mode - Medium platforms positioned diagonally, bigger */
.mode-2 .platform {
  --platform-width: clamp(250px, 20vw, 380px);
}

.mode-2 .platform.your-team-1 {
  left: 5%; /* Moved out slightly for bigger platforms */
  top: 15%; /* Adjusted to use more bottom space */
}

.mode-2 .platform.your-team-2 {
  left: 15%; /* Adjusted spacing */
  top: 53%; /* Moved down to use bottom space */
}

.mode-2 .platform.op-team-1 {
  right: 5%; /* Moved out slightly for bigger platforms */
  top: 15%; /* Adjusted to use more bottom space */
}

.mode-2 .platform.op-team-2 {
  right: 15%; /* Adjusted spacing */
  top: 53%; /* Moved down to use bottom space */
}

/* 3v3 Mode - Triangular formation with better spacing, bigger platforms */
.mode-3 .platform {
  --platform-width: clamp(120px, 15vw, 230px);
}

.mode-3 .platform.your-team-1 {
  left: 3%; /* Slightly adjusted for bigger platforms */
  top: 15%; /* Moved up to use more bottom space */
}

.mode-3 .platform.your-team-2 {
  left: 12%; /* Adjusted spacing */
  top: 40%; /* Adjusted positioning */
}

.mode-3 .platform.your-team-3 {
  left: 21%; /* Adjusted spacing */
  top: 65%; /* Moved down to use bottom space */
}

.mode-3 .platform.op-team-1 {
  right: 3%; /* Slightly adjusted for bigger platforms */
  top: 15%; /* Moved up to use more bottom space */
}

.mode-3 .platform.op-team-2 {
  right: 12%; /* Adjusted spacing */
  top: 40%; /* Adjusted positioning */
}

.mode-3 .platform.op-team-3 {
  right: 21%; /* Adjusted spacing */
  top: 65%; /* Moved down to use bottom space */
}

/* VS indicator in the center */
#vs-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

#vs {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* Character container on platforms - anchored so the character sits on the platform */
.character-slot {
  position: relative;
  z-index: 2;
  width: min(9vw, 104px);
  min-width: 76px;
  height: min(15vh, 154px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* push content to bottom so sprite sits on platform */
  cursor: pointer;
  margin-top: 0;
  /* Keep character feet merged with platform across responsive scales. */
  margin-bottom: calc(-1 * var(--lobby-character-seam-overlap));
  padding: 8px 8px 0px 8px;
  /* Ensure sprite stays at top regardless of platform size */
  min-height: 80px;
  overflow: visible;
}

/* Give desktop sprites room below the badge and character-switch control. */
@media (min-width: 769px) and (min-height: 600px) {
  .character-slot {
    width: calc(min(9vw, 104px) + 12px);
    height: calc(min(15vh, 154px) + 8px);
  }
}

.character-slot::before,
.character-slot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: var(--bb-radius-card);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.character-slot::before {
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(255, 255, 255, 0.18),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0) 38%
    );
}

.character-slot::after {
  inset: -18px;
  background: radial-gradient(
    circle,
    rgba(255, 234, 167, 0.24) 0%,
    rgba(114, 214, 255, 0.16) 38%,
    rgba(114, 214, 255, 0) 72%
  );
  filter: blur(10px);
  transform: scale(0.9);
}

/* Character sprite - responsive sizing, anchored to bottom */
.character-sprite {
  position: relative;
  z-index: 2;
  width: min(8vw, 102px);
  height: min(8vw, 116px);
  display: block;
  margin-top: auto; /* push sprite to bottom within the slot */
  margin-bottom: 0;
  filter: none;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0; /* Prevent shrinking */
  transform-origin: 50% 100%;
}

/* Status feedback lives behind the character so the sprite remains readable. */
.lobby-ready-fx,
.lobby-selecting-ring {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: min(126px, calc(100% + 24px));
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.lobby-ready-fx {
  --ready-fx: #53dd63;
  --ready-fx-bright: #d8ff9c;
  z-index: 17;
  opacity: 0;
}

.lobby-ready-fx-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ready-line-width);
  height: var(--ready-line-height);
  border-radius: 0;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--ready-line-color) 18%,
    var(--ready-line-bright) 68%,
    var(--ready-line-color) 100%
  );
  box-shadow:
    0 0 4px var(--ready-line-bright),
    0 0 9px var(--ready-line-color);
  opacity: 0;
  image-rendering: pixelated;
  transform: translate(var(--ready-line-x), var(--ready-start-y)) scaleY(0.18);
  transform-origin: 50% 100%;
}

.character-slot.lobby-ready-burst > .lobby-ready-fx,
.character-slot.lobby-unready-burst > .lobby-ready-fx {
  opacity: 0.86;
}

.character-slot.lobby-ready-burst > .lobby-ready-fx .lobby-ready-fx-line {
  animation: lobbyReadyLine var(--ready-line-duration) steps(4, end)
    var(--ready-line-delay) both;
}

.character-slot.lobby-unready-burst > .lobby-ready-fx {
  opacity: 0.38;
}

.character-slot.lobby-unready-burst > .lobby-ready-fx .lobby-ready-fx-line {
  --ready-line-color: #e55364 !important;
  --ready-line-bright: #ffc0b5 !important;
  box-shadow: 0 0 5px rgba(229, 83, 100, 0.58);
}

.character-slot.lobby-unready-burst > .lobby-ready-fx .lobby-ready-fx-line {
  animation: lobbyUnreadyLine var(--unready-line-duration) steps(3, end)
    var(--unready-line-delay) both;
}

.lobby-selecting-ring {
  z-index: 1;
  bottom: 0;
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
  transition: opacity 180ms ease, transform 220ms ease;
}

.lobby-selecting-ring::before,
.lobby-selecting-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.lobby-selecting-ring::before {
  inset: 3px;
  background: conic-gradient(
    from 0deg,
    transparent 0 9%,
    #35d8e8 14% 27%,
    transparent 32% 48%,
    #d8fcff 54% 66%,
    transparent 72% 88%,
    #35d8e8 94%
  );
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 61% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 59%, #000 61% 70%, transparent 72%);
  filter: none;
  animation: lobbySelectingSpin 1.1s steps(16, end) infinite;
}

.lobby-selecting-ring::after {
  inset: 18%;
  border: 2px dashed rgba(130, 235, 244, 0.72);
  box-shadow: none;
  animation: lobbySelectingPulse 900ms steps(2, end) infinite;
}

.character-slot.is-selecting-character > .lobby-selecting-ring {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@keyframes lobbyReadyLine {
  0% {
    opacity: 0;
    transform: translate(var(--ready-line-x), var(--ready-start-y)) scaleY(0.12);
  }
  18% {
    opacity: 1;
    transform: translate(var(--ready-line-x), var(--ready-start-y)) scaleY(0.72);
  }
  58% {
    opacity: 0.92;
    transform: translate(var(--ready-line-x), var(--ready-end-y)) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ready-line-x), calc(var(--ready-end-y) + 7px))
      scaleY(0.28);
  }
}

@keyframes lobbyUnreadyLine {
  0% {
    opacity: 0;
    transform: translate(var(--ready-line-x), calc(var(--ready-end-y) + 4px))
      scaleY(0.24);
  }
  26% {
    opacity: 0.56;
    transform: translate(var(--ready-line-x), var(--ready-end-y)) scaleY(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ready-line-x), var(--ready-start-y)) scaleY(0.16);
  }
}

@keyframes lobbySelectingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lobbySelectingPulse {
  50% {
    opacity: 0.45;
    transform: scale(0.9);
  }
}

/* Lobby materialization effect. The FX is attached to each occupied slot so it
   follows the platform's idle float and never feels detached from the player. */
.lobby-spawn-fx {
  --spawn-main: #11dfff;
  --spawn-bright: #d9fbff;
  --spawn-deep: #087dff;
  position: absolute;
  left: 50%;
  bottom: -12px;
  z-index: 18;
  width: 168px;
  height: 270px;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
}

.character-slot.lobby-spawn-enter,
.character-slot.lobby-spawn-exit {
  pointer-events: none;
}

.character-slot.lobby-spawn-enter > .lobby-spawn-fx,
.character-slot.lobby-spawn-exit > .lobby-spawn-fx {
  opacity: 1;
  visibility: visible;
}

.character-slot.lobby-spawn-exit > .lobby-spawn-fx {
  --spawn-main: #ff314e;
  --spawn-bright: #fff1e8;
  --spawn-deep: #ba071f;
}

.lobby-spawn-fx-column {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 78px;
  height: 248px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--spawn-deep) 16%, transparent) 24%,
    color-mix(in srgb, var(--spawn-main) 34%, transparent) 48%,
    color-mix(in srgb, var(--spawn-bright) 28%, transparent) 52%,
    color-mix(in srgb, var(--spawn-deep) 14%, transparent) 76%,
    transparent
  );
  box-shadow:
    0 0 20px color-mix(in srgb, var(--spawn-main) 28%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spawn-bright) 14%, transparent);
  filter: blur(2px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.lobby-spawn-fx-column::after {
  content: none;
}

.lobby-spawn-fx-core {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 7px;
  height: 255px;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    transparent,
    var(--spawn-main) 18%,
    var(--spawn-bright) 62%,
    var(--spawn-main)
  );
  box-shadow:
    0 0 8px var(--spawn-bright),
    0 0 24px var(--spawn-main),
    0 0 48px var(--spawn-deep);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.lobby-spawn-fx-floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 126px;
  height: 28px;
  border: 2px solid color-mix(in srgb, var(--spawn-bright) 76%, transparent);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--spawn-bright) 68%, transparent),
    color-mix(in srgb, var(--spawn-main) 30%, transparent) 42%,
    transparent 72%
  );
  box-shadow:
    0 0 9px color-mix(in srgb, var(--spawn-bright) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--spawn-main) 68%, transparent),
    inset 0 0 9px color-mix(in srgb, var(--spawn-main) 70%, transparent);
  transform: translateX(-50%);
}

.lobby-spawn-fx-shard {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: var(--spawn-width);
  height: var(--spawn-height);
  border-radius: 0;
  background: linear-gradient(180deg, var(--spawn-bright), var(--spawn-main));
  box-shadow:
    0 0 7px var(--spawn-bright),
    0 0 14px var(--spawn-main);
  transform: translate(
    calc(-50% + var(--spawn-x)),
    calc(-1 * var(--spawn-y))
  );
}

.lobby-spawn-fx-shard:nth-of-type(3n + 2) {
  background: var(--spawn-deep);
}

.character-slot.lobby-spawn-enter > .lobby-spawn-fx .lobby-spawn-fx-column {
  animation: lobbySpawnColumnIn 900ms cubic-bezier(0.16, 0.84, 0.31, 1) both;
}

.character-slot.lobby-spawn-enter > .lobby-spawn-fx .lobby-spawn-fx-core {
  animation: lobbySpawnCoreIn 820ms ease-out both;
}

.character-slot.lobby-spawn-enter > .lobby-spawn-fx .lobby-spawn-fx-floor {
  animation: lobbySpawnFloorIn 850ms ease-out both;
}

.character-slot.lobby-spawn-enter > .lobby-spawn-fx .lobby-spawn-fx-shard {
  animation: lobbySpawnShardIn var(--spawn-duration) ease-out
    var(--spawn-delay) both;
}

.character-slot.lobby-spawn-exit > .lobby-spawn-fx .lobby-spawn-fx-column {
  animation: lobbySpawnColumnOut 780ms cubic-bezier(0.55, 0.06, 0.68, 0.19)
    both;
}

.character-slot.lobby-spawn-exit > .lobby-spawn-fx .lobby-spawn-fx-core {
  animation: lobbySpawnCoreOut 740ms ease-in both;
}

.character-slot.lobby-spawn-exit > .lobby-spawn-fx .lobby-spawn-fx-floor {
  animation: lobbySpawnFloorOut 760ms ease-in both;
}

.character-slot.lobby-spawn-exit > .lobby-spawn-fx .lobby-spawn-fx-shard {
  animation: lobbySpawnShardOut var(--spawn-duration) ease-in
    var(--spawn-delay) both;
}

.character-slot.lobby-spawn-enter > .character-sprite {
  animation: lobbyMaterializeSprite 920ms cubic-bezier(0.16, 0.84, 0.31, 1)
    both;
}

.character-slot.lobby-spawn-exit > .character-sprite {
  animation: lobbyDematerializeSprite 760ms cubic-bezier(0.55, 0.06, 0.68, 0.19)
    both;
}

.character-slot.lobby-spawn-enter > .username,
.character-slot.lobby-spawn-enter > .status {
  animation: lobbySpawnUiIn 430ms ease-out 430ms both;
}

.character-slot.lobby-spawn-exit > .username,
.character-slot.lobby-spawn-exit > .status,
.character-slot.lobby-spawn-exit > .slot-level-badge,
.character-slot.lobby-spawn-exit > .switch-character {
  animation: lobbySpawnUiOut 240ms ease-in both;
}

@keyframes lobbySpawnColumnIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scaleY(0.08);
  }
  18% {
    opacity: 0.62;
    transform: translate(-50%, 0) scaleY(1);
  }
  48% {
    opacity: 0.42;
    transform: translate(-50%, -3px) scaleY(1);
  }
  72% {
    opacity: 0.22;
    transform: translate(-50%, -10px) scaleY(0.92);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scaleY(0.62);
  }
}

@keyframes lobbySpawnCoreIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.02);
  }
  22%,
  62% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -58px) scaleY(0.12);
  }
}

@keyframes lobbySpawnFloorIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.2);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.35);
  }
}

@keyframes lobbySpawnShardIn {
  0% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--spawn-x)),
        calc(28px - var(--spawn-y))
      )
      scale(0.45);
  }
  18% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--spawn-x)),
        calc(8px - var(--spawn-y))
      )
      scale(1);
  }
  68% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--spawn-x) + var(--spawn-drift)),
        calc(-42px - var(--spawn-y))
      )
      scale(0.72);
  }
}

@keyframes lobbySpawnColumnOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -34px) scaleY(0.62);
  }
  28% {
    opacity: 0.26;
    transform: translate(-50%, -10px) scaleY(0.92);
  }
  66% {
    opacity: 0.58;
    transform: translate(-50%, 0) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 24px) scaleY(0.08);
  }
}

@keyframes lobbySpawnCoreOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -52px) scaleY(0.12);
  }
  30%,
  72% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.02);
  }
}

@keyframes lobbySpawnFloorOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(1.35);
  }
  52% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.14);
  }
}

@keyframes lobbySpawnShardOut {
  0% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--spawn-x) + var(--spawn-drift)),
        calc(-42px - var(--spawn-y))
      )
      scale(0.72);
  }
  24%,
  68% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--spawn-x)),
        calc(30px - var(--spawn-y))
      )
      scale(0.42);
  }
}

@keyframes lobbyMaterializeSprite {
  0%,
  18% {
    opacity: 0;
    transform: translateY(5px) scale(0.98);
  }
  58% {
    opacity: 0.84;
    transform: translateY(-2px) scale(1.01);
  }
  78% {
    opacity: 1;
    transform: translateY(-1px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lobbyDematerializeSprite {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  42% {
    opacity: 0.86;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 0;
    transform: translateY(5px) scale(0.98);
  }
}

@keyframes lobbySpawnUiIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes lobbySpawnUiOut {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-slot.lobby-spawn-enter,
  .character-slot.lobby-spawn-exit,
  .character-slot.lobby-spawn-enter > .character-sprite,
  .character-slot.lobby-spawn-exit > .character-sprite,
  .character-slot.lobby-spawn-enter > .username,
  .character-slot.lobby-spawn-enter > .status,
  .character-slot.lobby-spawn-exit > .username,
  .character-slot.lobby-spawn-exit > .status,
  .character-slot.lobby-spawn-exit > .slot-level-badge,
  .character-slot.lobby-spawn-exit > .switch-character {
    animation: none !important;
  }

  .character-slot.lobby-spawn-enter,
  .character-slot.lobby-spawn-exit {
    pointer-events: auto;
  }

  .lobby-spawn-fx {
    display: none;
  }

  .lobby-ready-fx {
    display: none;
  }

  .lobby-selecting-ring::before,
  .lobby-selecting-ring::after {
    animation: none !important;
  }
}

.switch-character {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 28px;
  height: 28px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

/* Username above character - positioned relative to sprite at top */
.username {
  position: absolute;
  top: -30px; /* Positioned above the sprite */
  left: 50%;
  transform: translateX(-50%);
  font-size: min(1.15vw, 12px);
  font-weight: 700;
  font-family: "Press Start 2P", system-ui;
  color: white;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.85),
    0 6px 14px rgba(0, 0, 0, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10; /* Ensure it appears above platform */
  max-width: 160px;
}

.username.op-player {
  color: #fff7f4;
}

/* Status grows down from the frame so long labels never cover the sprite. */
.status {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(160px, calc(var(--platform-width) - 24px));
  padding: 5px 8px;
  text-align: center;
  white-space: normal;
  z-index: 50;
}

.status.bot-status {
  color: #92e8ff;
  border-color: rgba(104, 218, 255, 0.55);
  background: rgba(7, 26, 45, 0.88);
}

.character-slot.bot-display::before {
  opacity: 0.72;
  background: radial-gradient(circle at 50% 35%, rgba(78, 210, 255, 0.28), transparent 66%);
}

.party-bot-picker-scroll {
  width: 100%;
  flex: 0 1 auto;
}

.character-select-popup:has(.party-bot-picker-scroll) {
  width: min(820px, 94vw);
  height: auto;
  max-height: min(720px, 88vh);
}

.party-bot-picker-description {
  margin: 0 0 18px;
  color: var(--bb-text-soft);
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.party-bot-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 4px 6px 22px;
  box-sizing: border-box;
}

.party-bot-choice {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 10px 16px;
  text-align: center;
}

.character-select-popup .party-bot-choice img {
  width: 94px;
  height: 112px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0;
  image-rendering: pixelated;
}

.party-bot-choice .map-select-name {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1.4;
}

.bot-shuffle-icon {
  content: url("/assets/shuffle/shuffle1.svg");
  transform-origin: 50% 50%;
  animation: bot-shuffle-frames 8s steps(1, end) infinite;
}

.character-slot > .character-sprite.bot-shuffle-icon {
  width: 78%;
  height: 78%;
  max-width: 78px;
  max-height: 90px;
}

@keyframes bot-shuffle-frames {
  0%,
  24.999% {
    content: url("/assets/shuffle/shuffle1.svg");
  }
  25%,
  49.999% {
    content: url("/assets/shuffle/shuffle2.svg");
  }
  50%,
  74.999% {
    content: url("/assets/shuffle/shuffle3.svg");
  }
  75%,
  100% {
    content: url("/assets/shuffle/shuffle4.svg");
  }
}

@media (prefers-reduced-motion: reduce) {
  .bot-shuffle-icon {
    animation: none;
  }
}

@media (max-width: 640px) {
  .character-select-popup:has(.party-bot-picker-scroll) {
    width: min(430px, 92vw);
  }

  .party-bot-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .party-bot-choice {
    min-height: 158px;
  }

  .character-select-popup .party-bot-choice img {
    width: 76px;
    height: 88px;
  }
}

/* Tips strip inside the matchmaking card */
#mm-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(680px, calc(100% - 32px));
  min-height: 24px;
  margin: 20px 0 0;
  padding: 0 18px;
  text-align: center;
}
#tips-text {
  max-width: 620px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bb-text-muted);
  text-align: center;
  text-shadow: 0 2px 0 rgba(2, 5, 12, 0.62);
  transition: opacity 0.35s ease;
}

/* Fortnite-style bottom UI */
#bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 50, 0.3),
    rgba(40, 40, 80, 0.3)
  );
  box-shadow: 0 -4px 20px rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Scope dropdown baseline styles to the bottom bar only */
#bottom-bar select.dropdown {
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  color: #ffffff;
  /* Remove native arrow and add a consistent chevron */
  padding-right: 20px; /* space for chevron */
  color-scheme: dark; /* hint UA to use dark popups */
}

/* Custom chevron using an inline SVG (white) */
#bottom-bar #character,
#bottom-bar #mode,
#bottom-bar #map {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
}

/* Improve readability in the native popup list */
#bottom-bar select.dropdown option {
  background-color: rgba(18, 22, 40, 0.98);
  color: #f5f7ff;
}
/* Selected option background tint per dropdown (best-effort; UA-dependent) */
#bottom-bar #character option:checked {
  background-color: rgba(61, 129, 177, 0.85);
}
#bottom-bar #mode option:checked {
  background-color: rgba(88, 178, 55, 0.85);
}
#bottom-bar #map option:checked {
  background-color: rgba(206, 150, 53, 0.85);
}

/* Hide default arrow in legacy IE */
#bottom-bar select.dropdown::-ms-expand {
  display: none;
}

/* Consistent focus ring behavior within the bottom bar */
#bottom-bar select.dropdown:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

#bottom-bar #character {
  background: linear-gradient(135deg, #4da1dc, #3d81b1);
  color: white;
}
#bottom-bar #character:hover {
  background: linear-gradient(135deg, #3d81b1, #2d6191);
  box-shadow: 0 6px 20px rgba(77, 161, 220, 0.4);
}
#bottom-bar #character:focus {
  border-color: #4da1dc;
  box-shadow:
    0 0 0 2px rgba(77, 161, 220, 0.35),
    0 6px 20px rgba(77, 161, 220, 0.4);
}

#bottom-bar #mode {
  background: linear-gradient(135deg, #49d15d, #58b237);
  color: white;
}
#bottom-bar #mode:hover {
  background: linear-gradient(135deg, #58b237, #48a227);
  box-shadow: 0 6px 20px rgba(73, 209, 93, 0.4);
}
#bottom-bar #mode:focus {
  border-color: #49d15d;
}

#bottom-bar #map {
  background: linear-gradient(135deg, #ce9635, #9f9814);
  color: rgb(255, 255, 255);
}
#bottom-bar #map:hover {
  background: linear-gradient(135deg, #9f9814, #8f8804);
  box-shadow: 0 6px 20px rgba(206, 150, 53, 0.4);
}
#bottom-bar #map:focus {
  border-color: #ce9635;
  box-shadow:
    0 0 0 2px rgba(206, 150, 53, 0.35),
    0 6px 20px rgba(206, 150, 53, 0.4);
}

.dropdown-group {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

#map {
  display: none;
}

#mode {
  display: none;
}

.mode-picker,
.map-picker {
  display: flex;
  box-sizing: border-box;
  width: 270px;
  gap: 10px;
  padding: 7px 10px;

  height: 45px;
  min-width: 270px;
  background: linear-gradient(
    135deg,
    rgba(9, 97, 72, 0.55),
    rgba(80, 8, 29, 0.7)
  );
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.mode-picker::before,
.map-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0.16) 32%,
    rgba(255, 255, 255, 0) 48%
  );
  transform: translateX(-120%);
  transition: transform 320ms ease;
  pointer-events: none;
}

.mode-picker:hover,
.map-picker:hover {
  background: linear-gradient(
    135deg,
    rgba(9, 32, 76, 0.66),
    rgba(19, 3, 47, 0.78)
  );
  transform: translateY(-2px) scale(1.01);
}

.mode-picker:hover::before,
.map-picker:hover::before {
  transform: translateX(120%);
}

#mode-preview-img,
#map-preview-img {
  width: 72px;
  height: 40px;
  border-radius: 0;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

#mode-preview-name,
#map-preview-name {
  font-size: 11px;
  color: #fff;
  line-height: 1.25;
  max-width: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-picker-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

#mode-preview-subtitle {
  font-size: 9px;
  color: rgba(214, 232, 255, 0.86);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.map-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  justify-items: center;
}

.selection-popup-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px 22px;
  margin: 0 -12px -12px;
  box-sizing: border-box;
}

.map-selection-popup-scroll {
  width: 100%;
}

.selection-popup-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.selection-popup-back {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 14px;
  background: linear-gradient(135deg, #4b95e6, #3678c3);
  color: #fff;
}

.character-select-popup .map-select-grid {
  width: min(100%, 920px);
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  overscroll-behavior: contain;
  padding: 4px 6px 18px;
  box-sizing: border-box;
}

.map-select-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px 12px 16px;
  color: #e5f0ff;
  text-align: left;
  overflow: visible;
  isolation: isolate;
  transform: translateY(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.map-select-card::before {
  content: none;
  pointer-events: none;
}


.map-select-card:focus-visible {
  outline: none;
}


.map-select-card:hover::before,
.map-select-card:focus-visible::before {
  content: none;
}

.map-select-card:hover img,
.map-select-card:focus-visible img {
  transform: none;
  filter: none;
}

.mode-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 4px 6px 18px;
  box-sizing: border-box;
  overflow: visible;
  align-content: start;
  min-height: 0;
}

.mode-select-grid.subcards {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  width: min(100%, 860px);
  align-items: stretch;
}

.mode-select-card {
  min-height: 310px;
}

.mode-select-card.is-disabled {
  opacity: 0.78;
}

.mode-select-subtitle {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(220, 232, 255, 0.88);
  line-height: 1.35;
  letter-spacing: 0.1px;
  text-transform: none;
}

.mode-select-meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(157, 195, 249, 0.88);
}

.mode-select-trophy-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mode-select-empty {
  padding: 22px 18px;
  text-align: center;
  color: #e5f0ff;
  border: 2px dashed rgba(157, 195, 249, 0.35);
  border-radius: 0;
  background: rgba(6, 13, 29, 0.8);
}


.map-select-card img {
  width: 100%;
  height: 162px;
  border-radius: 0;
  object-fit: cover;
  display: block;
  margin-bottom: 10px;
  transition: none;
}

.character-select-popup .map-select-card {
  width: 100%;
}

.character-select-popup .map-select-grid > .map-select-card {
  min-height: 0;
  padding: 10px 10px 12px;
}

.character-select-popup .map-select-grid .map-select-card img {
  height: auto;
  aspect-ratio: 16 / 7;
}

.character-select-popup .mode-select-grid .map-select-card img {
  height: 162px;
  aspect-ratio: auto;
}

.mode-select-grid .map-select-card,
.mode-select-grid.subcards .map-select-card {
  width: 100%;
}

.mode-select-grid.subcards .mode-select-card {
  min-height: 285px;
}

.map-select-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  text-align: center;
  padding: 0 4px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .map-select-grid {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
  }

  .character-select-popup .map-select-grid .map-select-card img {
    aspect-ratio: 16 / 6;
  }
}

.profile-card-rarity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 7px 3px;
  border: 2px solid var(--bb-ink);
  border-radius: 0;
  color: #fff;
  background: var(--bb-surface-raised);
  box-shadow: 0 2px 0 var(--bb-ink);
  font-family: var(--bb-font-display);
  font-size: 7px;
  line-height: 1.2;
  text-transform: uppercase;
}

.profile-card-rarity.rare {
  background: var(--bb-blue-deep);
}

.profile-card-rarity.epic {
  background: var(--bb-purple);
}

.profile-card-rarity.legendary {
  background: #b8661a;
}

.profile-card-tile.rare,
.profile-card-tile.epic,
.profile-card-tile.legendary {
  position: relative;
  overflow: hidden;
}

.profile-card-tile.rare::before,
.profile-card-tile.epic::before,
.profile-card-tile.legendary::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 30%;
  height: 320%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(20deg);
  animation: cardGlimmer 2.8s linear infinite;
  pointer-events: none;
}

@keyframes cardGlimmer {
  0% {
    transform: translateX(-170%) rotate(20deg);
  }
  100% {
    transform: translateX(420%) rotate(20deg);
  }
}

.profile-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-cost img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

#ready {
  background: linear-gradient(135deg, #b49e20, #bda322);
  padding: 13px 35px;
  font-size: calc(18px * var(--ready-text-scale, 1));
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
}
#ready:hover {
  background: linear-gradient(135deg, #d4ba3a, #c6991b);
}

#ready:disabled,
#ready.is-disabled {
  cursor: not-allowed;
  opacity: 0.68;
  filter: saturate(0.55);
}

/* Cancel (red) visual state for Ready button */
#ready.cancel {
  background: linear-gradient(135deg, #ff4757, #dc3545);
}
#ready.cancel:hover {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

#ready.battle-in-progress {
  --ready-text-scale: 0.8;
  background: linear-gradient(135deg, #2879df, #1856b8);
}
#ready.battle-in-progress:hover {
  background: linear-gradient(135deg, #398bf0, #2468ce);
}


#username-text {
  margin-right: 0;
}

#username-button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#username-button #username-text {
  display: inline-block;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account,
.party-button,
.mode-picker,
.map-picker,
.mm-btn {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.account::before,
.party-button::before,
.mode-picker::before,
.map-picker::before,
.mm-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.04)
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 0.9;
}

.account {
  height: 30px;
  background:
    linear-gradient(135deg, rgba(154, 173, 68, 0.9), rgba(130, 158, 28, 0.82)),
    rgba(18, 34, 17, 0.38);
  padding: 0px 10px;
  color: white;
  margin-left: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 400;
  box-shadow:
    0px 5px rgb(16, 80, 19),
    0px -5px rgb(16, 80, 19),
    5px 0px rgb(16, 80, 19),
    -5px 0px rgb(16, 80, 19),
    0px 10px #00000038,
    5px 5px #00000038,
    -5px 5px #00000038,
    inset 0px 5px #ffffff36;
}
.account:hover {
  background:
    linear-gradient(135deg, rgba(187, 119, 60, 0.92), rgba(162, 100, 42, 0.84)),
    rgba(32, 21, 10, 0.42);
}

.party-button {
  position: fixed;
  top: 80px;
  left: 20px;
  font-size: 11px;
  height: 35px;
  background:
    linear-gradient(135deg, rgba(105, 71, 255, 0.9), rgba(142, 53, 220, 0.82)),
    rgba(16, 12, 44, 0.34);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  font-weight: 600;
  z-index: 1;
  transition: all 0.3s ease;
}

.party-button p {
  margin: 0;
}

.lobby-hint {
  position: fixed;
  /* Above the lobby bars, while staying below popup and modal overlays. */
  z-index: 1001;
  width: min(238px, calc(100vw - 18px));
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 0;
  border-radius: 0;
  color: #f5fbff;
  background: linear-gradient(180deg, #294d70 0%, #172d47 100%);
  box-shadow:
    0 4px #000,
    0 -4px #000,
    4px 0 #000,
    -4px 0 #000,
    0 9px rgba(0, 0, 0, 0.3),
    inset 0 3px rgba(255, 255, 255, 0.14);
  opacity: 0;
  isolation: isolate;
  clip-path: inset(0 50% 100% 50%);
  transform: translateY(-6px);
  transform-origin: var(--lobby-hint-origin-x, 50%) top;
  pointer-events: auto;
}

.lobby-hint.is-visible {
  opacity: 1;
  clip-path: none;
  transform: translateY(0);
  animation: lobby-hint-enter-below 240ms steps(1, end) both;
}

.lobby-hint[data-placement="above"] {
  transform-origin: var(--lobby-hint-origin-x, 50%) bottom;
  transform: translateY(6px);
}

.lobby-hint[data-placement="above"].is-visible {
  animation-name: lobby-hint-enter-above;
}

.lobby-hint.is-leaving,
.lobby-hint[data-placement="above"].is-leaving {
  pointer-events: none;
  animation: lobby-hint-exit 200ms steps(1, end) both;
}

.lobby-hint [hidden] {
  display: none !important;
}

.lobby-hint-pointer {
  position: absolute;
  z-index: 0;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.lobby-hint[data-placement="below"] .lobby-hint-pointer {
  top: -14px;
  border-right-width: 10px;
  border-bottom: 14px solid #000;
  border-left-width: 10px;
  transform: translateX(-50%);
}

.lobby-hint[data-placement="below"] .lobby-hint-pointer::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -6px;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #294d70;
  border-left: 6px solid transparent;
}

.lobby-hint[data-placement="above"] .lobby-hint-pointer {
  bottom: -14px;
  border-top: 14px solid #000;
  border-right-width: 10px;
  border-left-width: 10px;
  transform: translateX(-50%);
}

.lobby-hint[data-placement="above"] .lobby-hint-pointer::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: -6px;
  border-top: 9px solid #172d47;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.lobby-hint-main {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  gap: 6px;
}

.lobby-hint-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.lobby-hint-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55));
}

.lobby-hint-title {
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 8px;
  line-height: 1.35;
  color: #ffffff;
}

.lobby-hint-message {
  font-size: 12px;
  line-height: 1.25;
  color: #d9ecf8;
}

.lobby-hint-action {
  position: relative;
  z-index: 2;
  justify-self: end;
}

.lobby-hint-glint,
.lobby-hint-art,
.lobby-hint-badge,
.lobby-hint-meta {
  display: none;
}

.lobby-hint.is-sale {
  width: min(232px, calc(100vw - 18px));
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 148, 43, 0.2), transparent 38%),
    linear-gradient(135deg, #4b1e55 0%, #242044 62%, #48231e 100%);
  box-shadow:
    0 4px #000,
    0 -4px #000,
    4px 0 #000,
    -4px 0 #000,
    0 9px rgba(0, 0, 0, 0.34),
    0 0 13px rgba(255, 191, 60, 0.35),
    inset 0 3px rgba(255, 255, 255, 0.14);
}

.lobby-hint.is-sale[role="button"] {
  cursor: pointer;
}

.lobby-hint.is-sale[role="button"]:focus-visible {
  outline: 3px solid #ffe16e;
  outline-offset: 5px;
}

.lobby-hint.is-sale[data-placement="below"] .lobby-hint-pointer,
.lobby-hint.is-sale[data-placement="above"] .lobby-hint-pointer {
  background: transparent;
}

.lobby-hint.is-sale[data-placement="below"] .lobby-hint-pointer::after {
  border-bottom-color: #3d1a50;
}

.lobby-hint.is-sale[data-placement="above"] .lobby-hint-pointer::after {
  border-top-color: #3d1a50;
}

.lobby-hint.is-sale .lobby-hint-glint {
  position: absolute;
  z-index: 1;
  inset: 2px;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.lobby-hint.is-sale .lobby-hint-glint::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -45%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 196, 0.34), transparent);
  transform: skewX(-18deg);
  animation: lobby-hint-glint 3.2s ease-in-out infinite;
}

.lobby-hint.is-sale .lobby-hint-header {
  padding-right: 68px;
}

.lobby-hint.is-sale .lobby-hint-icon {
  width: 22px;
  height: 22px;
}

.lobby-hint.is-sale .lobby-hint-badge {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -7px;
  display: block;
  padding: 3px 5px;
  border: 0;
  color: #371205;
  background: linear-gradient(180deg, #ffe16e, #ff922f);
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 6px;
  line-height: 1.35;
  box-shadow:
    0 2px #000,
    0 -2px #000,
    2px 0 #000,
    -2px 0 #000;
}

.lobby-hint.is-sale .lobby-hint-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 27px;
}

.lobby-hint-price,
.lobby-hint-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  color: #fff7d4;
  background: transparent;
  box-shadow: none;
}

.lobby-hint-price {
  min-height: 23px;
  padding: 3px 7px;
  color: #fff;
  background: linear-gradient(180deg, #38d879, #15954f);
  box-shadow:
    0 2px #061b10,
    0 -2px #061b10,
    2px 0 #061b10,
    -2px 0 #061b10,
    inset 0 2px rgba(255, 255, 255, 0.25);
}

.lobby-hint-price img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
}

.lobby-hint-price strong,
.lobby-hint-countdown strong {
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 7px;
  line-height: 1.2;
}

.lobby-hint-countdown {
  display: flex;
  gap: 4px;
  text-align: left;
}

.pixel-clock-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 #17132e);
}

.lobby-hint.is-party {
  width: min(286px, calc(100vw - 18px));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 12px;
  background: linear-gradient(180deg, #46346f, #27244e);
}

.lobby-hint.is-party[data-placement="below"] .lobby-hint-pointer,
.lobby-hint.is-party[data-placement="above"] .lobby-hint-pointer {
  background: transparent;
}

.lobby-hint.is-party[data-placement="below"] .lobby-hint-pointer::after {
  border-bottom-color: #3b3067;
}

.lobby-hint.is-party[data-placement="above"] .lobby-hint-pointer::after {
  border-top-color: #27244e;
}

.lobby-hint.is-party .lobby-hint-main {
  min-width: 0;
}

.lobby-hint-details {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lobby-hint-party-name {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-hint-party-subline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.lobby-hint-party-subline > :not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: #8e82bb;
}

.lobby-hint-party-mode {
  color: #d7c9ff;
  font-family: "Press Start 2P", "Lato", sans-serif;
  font-size: 6px;
  line-height: 1.25;
  white-space: nowrap;
}

.lobby-hint-players {
  position: relative;
  color: #ffdf78;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  cursor: help;
}

.lobby-hint-player-popover {
  position: absolute;
  z-index: 6;
  top: calc(100% + 9px);
  right: 0;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 7px;
  color: #fff;
  background: #151a31;
  box-shadow:
    0 3px #000,
    0 -3px #000,
    3px 0 #000,
    -3px 0 #000,
    0 8px 14px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.lobby-hint-players:hover .lobby-hint-player-popover,
.lobby-hint-players:focus .lobby-hint-player-popover,
.lobby-hint-players:focus-within .lobby-hint-player-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lobby-hint-player {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.lobby-hint-player > img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  image-rendering: pixelated;
  background: #283055;
}

.lobby-hint-player > strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-hint-player > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffd56c;
  font-size: 9px;
}

.lobby-hint-player > span img {
  width: 13px;
  height: 13px;
  image-rendering: pixelated;
}

.lobby-hint-action.is-join {
  align-self: end;
  margin-bottom: 1px;
  min-width: 58px;
  min-height: 20px;
  padding: 5px 8px;
  color: #fff;
  background: linear-gradient(180deg, #19c890, #079063);
  box-shadow:
    0 2px #000,
    0 -2px #000,
    2px 0 #000,
    -2px 0 #000,
    inset 0 2px rgba(255, 255, 255, 0.18);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.5px;
}

@keyframes lobby-hint-glint {
  0%,
  55% {
    left: -45%;
  }
  82%,
  100% {
    left: 125%;
  }
}

@keyframes lobby-hint-enter-below {
  0% { opacity: 0; clip-path: inset(0 50% 100% 50%); transform: translateY(-6px); }
  20% { opacity: 1; clip-path: inset(0 32% 72% 32%); transform: translateY(-6px); }
  40% { clip-path: inset(0 16% 42% 16%); transform: translateY(-4px); }
  60% { clip-path: inset(0 5% 16% 5%); transform: translateY(-2px); }
  80% { clip-path: inset(0); transform: translateY(1px); }
  100% { opacity: 1; clip-path: none; transform: translateY(0); }
}

@keyframes lobby-hint-enter-above {
  0% { opacity: 0; clip-path: inset(100% 50% 0 50%); transform: translateY(6px); }
  20% { opacity: 1; clip-path: inset(72% 32% 0 32%); transform: translateY(6px); }
  40% { clip-path: inset(42% 16% 0 16%); transform: translateY(4px); }
  60% { clip-path: inset(16% 5% 0 5%); transform: translateY(2px); }
  80% { clip-path: inset(0); transform: translateY(-1px); }
  100% { opacity: 1; clip-path: none; transform: translateY(0); }
}

@keyframes lobby-hint-exit {
  0% { opacity: 1; clip-path: none; transform: translateY(0); }
  25% { clip-path: inset(8% 3% 0 3%); transform: translateY(-1px); }
  50% { clip-path: inset(30% 12% 0 12%); transform: translateY(-3px); }
  75% { opacity: 1; clip-path: inset(62% 28% 0 28%); transform: translateY(-5px); }
  100% { opacity: 0; clip-path: inset(100% 50% 0 50%); transform: translateY(-6px); }
}

.party-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(43, 99, 152, 0.94), rgba(45, 95, 188, 0.86)),
    rgba(12, 43, 38, 0.4);
}

.party-search-button img,
.party-settings-button img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.party-search-button:hover {
  background:
    linear-gradient(135deg, rgba(34, 120, 93, 0.94), rgba(31, 124, 107, 0.86)),
    rgba(11, 44, 39, 0.4);
}

.party-settings-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(111, 111, 111, 0.9), rgba(75, 75, 75, 0.82)),
    rgba(89, 89, 89, 0.36);
}

.party-settings-button:hover {
  background:
    linear-gradient(135deg, rgba(71, 71, 71, 0.94), rgba(75, 75, 75, 0.82)),
    rgba(89, 89, 89, 0.36);
}

.leaderboard-button {
  left: auto;
  right: 20px;
  width: max-content;
  min-width: 0;
  gap: 7px;
  padding: 0 12px 0 8px;
  white-space: nowrap;
  background:
    linear-gradient(135deg, rgba(26, 105, 167, 0.9), rgba(14, 80, 138, 0.82)),
    rgba(10, 23, 48, 0.36);
}

.leaderboard-button-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  object-fit: contain;
}

.leaderboard-button:hover {
  background:
    linear-gradient(135deg, rgba(29, 126, 198, 0.94), rgba(17, 94, 161, 0.86)),
    rgba(12, 28, 55, 0.4);
}

/* Both lobby toolbars are flex rows, so spacing never depends on label width. */
.lobby-party-actions,
.lobby-quick-actions {
  position: fixed;
  top: 80px;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: var(--bb-action-gap);
}

.lobby-party-actions {
  left: 20px;
}

.lobby-quick-actions {
  right: 20px;
}

.lobby-party-actions .party-button,
.lobby-quick-actions .party-button {
  position: relative;
  inset: auto;
  margin: 0;
  flex: 0 0 auto;
}

.party-button.shop-button {
  left: auto;
  right: auto;
  width: max-content;
  min-width: 0;
  gap: 7px;
  padding: 0 12px 0 7px;
  isolation: isolate;
  overflow: visible;
  white-space: nowrap;
  color: #fffbe7;
  background: linear-gradient(
    115deg,
    #5d28ce 0%,
    #ae28d6 24%,
    #ec3aa8 46%,
    #e98627 68%,
    #36a7c9 100%
  );
  background-size: 230% 230%;
  text-shadow:
    0 1px 0 #3c0b5b,
    1px 0 0 #3c0b5b;
  animation: shopButtonGradientFlow 5s ease-in-out infinite;
}

.party-button.shop-button:hover {
  background: linear-gradient(
    115deg,
    #7138e9 0%,
    #c83be9 24%,
    #ff4fbd 46%,
    #f6a13a 68%,
    #43c8e8 100%
  );
  background-size: 230% 230%;
  filter: saturate(1.16) brightness(1.08);
}

.shop-button-icon,
.shop-button p {
  position: relative;
  z-index: 2;
}

.shop-button-icon {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(32, 4, 56, 0.72));
}

.party-button.shop-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 44%,
    rgba(255, 249, 190, 0.75) 50%,
    transparent 56%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: shopButtonGlint 3.6s ease-in-out infinite;
}

@keyframes shopButtonGradientFlow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shopButtonGlint {
  0%,
  52% {
    background-position: 100% 0;
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  78%,
  100% {
    background-position: 0% 0;
    opacity: 0;
  }
}

.trophy-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.trophy-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

.trophy-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 97vw);
  max-height: min(860px, 95vh);
  overflow: hidden;
  padding: 16px;
}

.trophy-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.trophy-overlay-head h2 {
  margin: 0;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(13px, 1.6vw, 20px);
  color: #eef8ff;
}

.trophy-overlay-head p {
  margin: 6px 0 0;
  color: #b7d8ff;
  font-size: 13px;
}

.trophy-overlay-close {
  min-height: 30px;
  padding: 0 14px;
  background: linear-gradient(135deg, #d14b42, #ab2e2e);
  color: #fff;
}

.party-join-request-panel,
.party-join-request-owner-panel {
  box-sizing: border-box;
}

.party-join-request-panel {
  width: min(500px, calc(100vw - 40px));
}

.party-join-request-overlay .trophy-overlay-backdrop {
  background: var(--bb-popup-backdrop);
}


.party-join-request-owner-panel {
  width: min(600px, calc(100vw - 40px));
}

.party-request-banner {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 0;
  border: 1px solid rgba(99, 177, 255, 0.38);
  background: linear-gradient(
    135deg,
    rgba(19, 42, 79, 0.88),
    rgba(11, 23, 45, 0.92)
  );
  color: #e8f5ff;
  font-weight: 700;
  line-height: 1.5;
}

.party-request-banner[data-status="pending"] {
  border-color: rgba(100, 182, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(20, 52, 96, 0.9),
    rgba(11, 28, 56, 0.96)
  );
}

.party-request-banner[data-status="accepted"] {
  border-color: rgba(112, 221, 154, 0.48);
  background: linear-gradient(
    135deg,
    rgba(22, 78, 48, 0.92),
    rgba(10, 39, 24, 0.96)
  );
}

.party-request-banner[data-status="rejected"] {
  border-color: rgba(232, 112, 112, 0.5);
  background: linear-gradient(
    135deg,
    rgba(85, 28, 34, 0.92),
    rgba(43, 16, 20, 0.96)
  );
}

.party-request-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.party-request-summary-card {
  min-height: 76px;
  padding: 16px;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: 7px;
}

.party-request-summary-card span,
.party-request-attempts {
  color: #9fc2ef;
  font-size: 12px;
}

.party-request-summary-card strong {
  color: #f4fbff;
  font-size: 15px;
}

.party-request-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.party-request-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.party-request-actions-row .party-request-submit,
.party-request-actions-row .party-request-return {
  width: 100%;
}

.party-request-submit {
  min-height: 42px;
  padding: 0 16px;
  background: linear-gradient(135deg, #2c9af0, #1d6fc2);
  color: #fff;
}

.party-request-submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.party-request-return {
  min-height: 42px;
  padding: 0 16px;
  background: linear-gradient(135deg, #4d5f77, #334055);
  color: #f0f7ff;
}

.party-request-owner-list {
  display: grid;
  gap: 16px;
  max-height: 54vh;
  overflow: auto;
  padding: 2px;
}

.party-request-empty {
  display: grid;
  place-items: center;
  min-height: 88px;
  color: #b7d8ff;
  border-radius: 0;
  border: 1px dashed rgba(103, 146, 203, 0.35);
  background: rgba(8, 18, 33, 0.42);
  margin-bottom: 8px;
}

.party-request-card {
  padding: 18px;
  display: grid;
  gap: 18px;
}

.party-request-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.party-request-card-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.party-request-card-copy strong {
  font-size: 17px;
  color: #f5fbff;
}

.party-request-card-copy span {
  color: #a9c8ef;
  font-size: 12px;
  line-height: 1.5;
}

.party-request-pill {
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  text-transform: capitalize;
  flex: 0 0 auto;
}

.party-request-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.join-request-overlay-open .bb-chat-lobby-wrap {
  display: none !important;
}

.party-request-button {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
}

.party-request-accept {
  background: linear-gradient(135deg, #2f944f, #1f6d3a);
  color: #fff;
}

.party-request-reject {
  background: linear-gradient(135deg, #cf4c44, #a92f2d);
  color: #fff;
}

@media (max-width: 540px) {
  .party-join-request-panel,
  .party-join-request-owner-panel {
    width: calc(100vw - 24px);
  }

  .party-request-summary-grid,
  .party-request-actions-row {
    grid-template-columns: 1fr;
  }

  .party-request-card-actions {
    grid-template-columns: 1fr;
  }
}

.trophy-rewards-body {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px 24px 24px;
  background: transparent;
}

.trophy-track-stage {
  position: relative;
  min-height: 440px;
  flex: 1 1 auto;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  background: linear-gradient(180deg, #111a2d 0%, #080d17 100%);
  box-shadow:
    0px 5px black,
    0px -5px black,
    5px 0px black,
    -5px 0px black,
    0px 10px #00000038,
    inset 0px 5px #ffffff1f;
}

.trophy-track-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: var(--bb-action-gap);
  padding: 6px 8px;
  border: 0;
  background: rgba(11, 17, 28, 0.92);
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black;
  backdrop-filter: blur(6px);
}

.trophy-track-control {
  width: 38px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, #3d88e0, #245ca8);
  color: #fff;
  font-family: "Press Start 2P", system-ui;
  font-size: 11px;
  cursor: pointer;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    0px 6px #00000038,
    3px 3px #00000038,
    -3px 3px #00000038,
    inset 0px 3px #ffffff36;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.trophy-track-control:hover:not(:disabled) {
  filter: brightness(1.18);
}

.trophy-track-control:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    inset 0px 3px #00000038;
}

.trophy-track-control:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.7);
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black;
}

.trophy-track-control:disabled:active {
  transform: none;
}

.trophy-track-list {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.trophy-track-list:focus-visible {
  outline: 2px solid #72c9ff;
  outline-offset: -3px;
}

#trophy-track-rail-fill {
  display: none;
}

.trophy-track-canvas {
  position: relative;
  height: 100%;
  min-height: 440px;
  --trophy-lane-inset: 130px;
  --trophy-progress-x: 4px;
}

.trophy-track-line-shell {
  position: absolute;
  left: var(--trophy-lane-inset);
  right: var(--trophy-lane-inset);
  bottom: 74px;
  height: 18px;
  z-index: 2;
}

.trophy-track-line-bg {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid #23344d;
  border-radius: 0;
  background: #0b1322;
  box-shadow:
    0 4px 0 var(--bb-ink),
    inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.trophy-track-line-fill {
  position: absolute;
  left: 3px;
  top: 3px;
  height: 10px;
  max-width: calc(100% - 6px);
  border-radius: 0;
  background: linear-gradient(90deg, #3db8ff, #5d67f5 55%, #9b4de0);
  box-shadow:
    0 0 14px rgba(61, 184, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: width 320ms ease;
}

.trophy-track-line-glint {
  position: absolute;
  top: 2px;
  left: var(--trophy-progress-x);
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid #eafaff;
  border-radius: 0;
  background: #70d5ff;
  box-shadow: 0 0 12px rgba(106, 218, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

.trophy-track-canvas.has-progress .trophy-track-line-glint {
  opacity: 1;
}

.trophy-track-card-row {
  position: absolute;
  inset: 0;
}

.trophy-track-marker-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 44px;
}

.trophy-track-player-pin {
  position: absolute;
  bottom: 96px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  box-sizing: border-box;
  border: 2px solid #e5a93b;
  border-radius: 0;
  background: linear-gradient(180deg, #2b1f09, #120e05);
  box-shadow:
    4px 4px 0 var(--bb-ink),
    0 0 16px rgba(229, 169, 59, 0.4);
  z-index: 7;
  animation: trophyPinBob 2.4s ease-in-out infinite;
}

.trophy-track-player-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #e5a93b;
}

.trophy-track-player-pin small {
  color: #ffd778;
  font-family: "Press Start 2P", system-ui;
  font-size: 6px;
  line-height: 1;
  text-transform: uppercase;
}

.trophy-track-player-pin img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
}

.trophy-track-player-pin span {
  color: #fff2c4;
  font-family: "Press Start 2P", system-ui;
  font-size: 8.5px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

@keyframes trophyPinBob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

.trophy-lane-card {
  --reward-accent: #3d506e;
  --reward-tint: rgba(61, 80, 110, 0.12);
  position: absolute;
  bottom: 138px;
  width: 216px;
  min-height: 250px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 14px 14px;
  box-sizing: border-box;
  z-index: 3;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.trophy-lane-card-sheen,
.trophy-lane-item-glow {
  display: none;
}

.trophy-lane-item-wrap {
  position: relative;
  width: 92px;
  height: 84px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #091322, #040914);
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    inset 0px 3px rgba(255, 255, 255, 0.08);
}

.trophy-lane-item {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

.trophy-lane-item-wrap.multi-reward {
  width: 116px;
}

.trophy-lane-item-wrap.multi-reward .trophy-lane-item {
  position: absolute;
  width: 50px;
  height: 50px;
}

.trophy-lane-item-wrap.multi-reward .trophy-lane-item:first-child {
  transform: translateX(-16px) rotate(-5deg);
}

.trophy-lane-item-wrap.multi-reward .trophy-lane-item:last-child {
  transform: translateX(16px) rotate(5deg);
}

.trophy-lane-meta {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  /* Fixed: every card is the same height whatever its reward list says. */
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: center;
}

.trophy-lane-meta strong {
  max-width: 188px;
  overflow: hidden;
  color: #ffffff;
  font-family: "Press Start 2P", system-ui;
  font-size: 10.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 #000000;
}

.trophy-lane-meta span {
  max-width: 188px;
  overflow: hidden;
  /* Long bundles clamp to two lines inside the fixed meta height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

.trophy-tier-claim {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--bb-radius-control);
  font-family: "Press Start 2P", system-ui;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.trophy-lane-card.claimed .trophy-tier-claim {
  background: #141c2c;
  color: #5b6f8a;
  cursor: default;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black;
}


.trophy-lane-card.claimable .trophy-tier-claim {
  background: linear-gradient(180deg, #38d66c, #1fa84f);
  color: #ffffff;
  text-shadow: 0 2px 0 #0f5c2b;
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    4px 4px #00000038,
    -4px 4px #00000038,
    inset 0px 4px #ffffff40;
}

.trophy-lane-card.claimable .trophy-tier-claim:hover:not(:disabled) {
  filter: brightness(1.15);
}

.trophy-lane-card.claimable .trophy-tier-claim:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    inset 0px 4px #00000038;
}

.trophy-lane-card.locked .trophy-tier-claim {
  background: #0f1624;
  color: #435368;
  cursor: default;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black;
}

.trophy-lane-card.locked .trophy-lane-item,
.trophy-lane-card.locked .trophy-lane-meta {
  opacity: 0.65;
}

.trophy-lane-marker {
  --marker-accent: #374b68;
  position: absolute;
  top: 0;
  width: auto;
  transform: translateX(-50%);
  z-index: 4;
}

.trophy-lane-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  width: 3px;
  height: 52px;
  transform: translateX(-50%);
  background: var(--marker-accent);
  opacity: 0.85;
  z-index: -1;
}

.trophy-lane-marker-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #0d1626;
  color: #a4b9d6;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    0 0 0 1px var(--marker-accent);
  font-family: "Press Start 2P", system-ui;
  font-size: 8px;
  line-height: 1;
}

.trophy-lane-marker-chip img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
}

.trophy-lane-marker.claimable {
  --marker-accent: #e5a93b;
}

.trophy-lane-marker.claimable .trophy-lane-marker-chip {
  background: #251a06;
  color: #ffe48e;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    0 0 0 2px var(--marker-accent),
    0 0 14px rgba(229, 169, 59, 0.4);
}

.trophy-lane-marker.claimed {
  --marker-accent: #2e7d4a;
}

.trophy-lane-marker.claimed .trophy-lane-marker-chip {
  background: #0f2418;
  color: #87d9a3;
}

.trophy-lane-marker.locked {
  --marker-accent: #23344d;
}

.trophy-lane-marker.major {
  --marker-accent: #e5a93b;
}

.trophy-rewards-state {
  position: absolute;
  inset: 16px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid #23354f;
  border-radius: 0;
  background: #0b1322;
  color: #8ea7ca;
  text-align: center;
}

.trophy-rewards-state strong {
  color: #f1f7ff;
  font-family: "Press Start 2P", system-ui;
  font-size: 10px;
  line-height: 1.5;
}

.trophy-rewards-state > span:last-child {
  font-size: 12px;
}

.trophy-rewards-state-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #121e33;
  color: #b8d8ff;
  font-family: "Press Start 2P", system-ui;
  font-size: 14px;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black;
}

@keyframes trophyRewardCardIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.trophy-lane-card.claim-success {
  animation: trophyClaimCardBurst 520ms ease;
}

.trophy-lane-marker.claim-success {
  animation: trophyClaimMarkerPulse 540ms ease;
}

.trophy-track-canvas.claim-flash .trophy-track-line-fill {
  animation: trophyRailClaimPulse 640ms ease;
}

.trophy-claim-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: trophyClaimSpark var(--spark-dur, 520ms) ease-out forwards;
  animation-delay: var(--spark-delay, 0ms);
}

.trophy-claim-spark.tone-gold {
  background: radial-gradient(circle, #fff7c6 0%, #ffc95c 64%, #ffb42f 100%);
}

.trophy-claim-spark.tone-blue {
  background: radial-gradient(circle, #dbf5ff 0%, #74d2ff 62%, #3a96ff 100%);
}

@keyframes trophyClaimSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--spark-dx)),
        calc(-50% + var(--spark-dy))
      )
      scale(0.9);
  }
}

@keyframes trophyClaimCardBurst {
  0% {
    transform: translateX(-50%) scale(1);
  }
  35% {
    transform: translateX(-50%) scale(1.06);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes trophyClaimMarkerPulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  45% {
    transform: translateX(-50%) scale(1.14);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes trophyRailClaimPulse {
  0% {
    box-shadow:
      0 0 16px rgba(78, 202, 255, 0.76),
      inset 0 1px 0 rgba(235, 252, 255, 0.58);
  }
  50% {
    box-shadow:
      0 0 28px rgba(140, 226, 255, 0.92),
      inset 0 1px 0 rgba(235, 252, 255, 0.86);
  }
  100% {
    box-shadow:
      0 0 16px rgba(78, 202, 255, 0.76),
      inset 0 1px 0 rgba(235, 252, 255, 0.58);
  }
}

@keyframes trophySummaryRewardPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.trophy-track-list::-webkit-scrollbar,
.leaderboard-list::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.trophy-track-list::-webkit-scrollbar-track,
.leaderboard-list::-webkit-scrollbar-track {
  background: rgba(8, 20, 40, 0.72);
  border-radius: 0;
}

.trophy-track-list::-webkit-scrollbar-thumb,
.leaderboard-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #57b9ff, #2f7dd7);
  border-radius: 0;
  border: 1px solid rgba(185, 225, 255, 0.55);
}

.trophy-track-list,
.leaderboard-list {
  scrollbar-color: #2f7dd7 rgba(8, 20, 40, 0.72);
}

.trophy-track-list::-webkit-scrollbar {
  height: 12px;
}

.trophy-track-list::-webkit-scrollbar-track {
  border-top: 3px solid #05070d;
  border-radius: 0;
  background: #0a1020;
}

.trophy-track-list::-webkit-scrollbar-thumb {
  border: 3px solid #0a1020;
  border-radius: 0;
  background: linear-gradient(90deg, #4c6b98, #684aae);
}

.trophy-track-list {
  scrollbar-color: #5967a1 #0a1020;
}

.leaderboard-panel,
.trophy-rewards-panel {
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--bb-text);
}

.leaderboard-panel {
  width: min(940px, 94vw);
  max-height: min(84vh, 840px);
}

.trophy-rewards-panel {
  width: min(1140px, 94vw);
  max-height: min(640px, 90vh);
}

#leaderboard-overlay .trophy-overlay-backdrop,
#trophy-track-overlay .trophy-overlay-backdrop {
  background: var(--bb-popup-backdrop);
}

.leaderboard-head,
.trophy-rewards-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 66px;
  min-height: 66px;
  margin: 0;
  padding: 0 72px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(74, 158, 255, 0.92), rgba(107, 70, 193, 0.9)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 2px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 8px
    );
  border-radius: 0;
}

.leaderboard-head-copy,
.trophy-rewards-head-copy {
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaderboard-title-line,
.trophy-rewards-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.leaderboard-title-line img,
.trophy-rewards-title-line img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(11, 24, 52, 0.9));
}

.leaderboard-head .leaderboard-title-line h2,
.trophy-rewards-head .trophy-rewards-title-line h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  font-family: "Press Start 2P", "Lato", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 2px 0 rgba(11, 24, 52, 0.9),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.leaderboard-head .leaderboard-head-copy p,
.trophy-rewards-head .trophy-rewards-head-copy p {
  display: none;
}

.leaderboard-head .trophy-overlay-close,
.trophy-rewards-head .trophy-overlay-close {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 0;
  background: linear-gradient(135deg, #d14b42, #ab2e2e);
  color: white;
  font-family: "Press Start 2P", system-ui;
  font-size: 20px;
  font-weight: 800;
  width: 38px;
  height: 38px;
  min-height: 0;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 0;
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    inset 0px 2px #ffffff36;
  transition: all 0.15s ease;
  z-index: 10;
}

.leaderboard-head .trophy-overlay-close:hover,
.trophy-rewards-head .trophy-overlay-close:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.leaderboard-head .trophy-overlay-close:active,
.trophy-rewards-head .trophy-overlay-close:active {
  transform: translateY(2px);
  box-shadow:
    0px 2px black,
    0px -2px black,
    2px 0px black,
    -2px 0px black;
}

.leaderboard-body {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px 24px 24px;
  background: transparent;
}

.party-discovery-panel {
  width: min(760px, 94vw);
  max-height: min(760px, 92vh);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: var(--bb-space-2);
}

.party-discovery-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--bb-action-gap);
}

.party-discovery-search-row input {
  box-sizing: border-box;
}

.party-discovery-input,
.party-public-name-input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  box-sizing: border-box;
}

.party-discovery-input {
  min-height: 46px;
}

/* A compact ring keeps the button's visible height equal to the field's. */
.party-discovery-refresh {
  --bb-control-shadow: 0 0 0 2px var(--bb-ink), 0 4px 0 var(--bb-ink), inset 0 3px rgba(255, 255, 255, 0.16);
  --bb-control-shadow-pressed: 0 0 0 2px var(--bb-ink), inset 0 3px rgba(0, 0, 0, 0.24);
  --bb-chroma-corner-size: 12px;
  width: 46px;
  min-height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
}

.party-discovery-refresh img {
  width: 20px;
  height: 20px;
}

.party-discovery-status,
.party-settings-status {
  min-height: 18px;
}

.party-discovery-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 2px;
}

.party-discovery-status:empty {
  min-height: 0;
}

.party-discovery-count-marker {
  width: 8px;
  height: 8px;
  background: #5bd6ff;
  box-shadow: 3px 3px 0 #1f5d91;
}

.party-discovery-count-label {
  color: #bcd2ec;
  font-family: var(--bb-font-display);
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.party-discovery-list {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: var(--bb-card-grid-gap);
  overflow-y: auto;
  /* Room for each card's ink ring and drop shadow. */
  padding: 6px 6px 12px;
}

.party-discovery-card {
  padding: var(--bb-space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head join"
    "details details"
    "roster roster";
  gap: var(--bb-space-3) var(--bb-space-4);
  align-items: center;
}

.party-discovery-card-head {
  display: block;
  grid-area: head;
  min-width: 0;
}

.party-discovery-card-head > div:first-child {
  display: grid;
  min-width: 0;
  gap: var(--bb-space-2);
}

.party-discovery-title {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.party-discovery-info-row {
  grid-area: details;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
}

/* Mode and map use the shared chip surface. */
.party-discovery-detail {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  padding: 6px 10px 5px;
  border: var(--bb-currency-chip-border);
  background: var(--bb-currency-chip-bg);
  box-shadow: var(--bb-currency-chip-shadow);
  color: var(--bb-text);
}

.party-discovery-roster {
  grid-area: roster;
  display: flex;
  align-items: center;
  gap: var(--bb-space-4);
  min-width: 0;
  padding-top: var(--bb-space-3);
  border-top: 2px solid var(--bb-border-soft);
}

.party-discovery-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-discovery-meta img {
  flex-shrink: 0;
}

.party-discovery-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.party-discovery-members {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-2) var(--bb-space-4);
}

.party-discovery-member {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.party-discovery-member > div {
  min-width: 0;
}

.party-discovery-member img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border: 2px solid var(--bb-ink);
  background: var(--bb-bg-deep);
}

.party-discovery-member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-discovery-join {
  grid-area: join;
  justify-self: end;
  align-self: center;
  min-height: 38px;
  padding: 0 22px;
}

.party-discovery-empty {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: 2px solid #314e71;
  background:
    linear-gradient(90deg, #4a6b92 8px, transparent 8px) 0 0 / 100% 4px no-repeat,
    linear-gradient(180deg, #4a6b92 8px, transparent 8px) 0 0 / 4px 100% no-repeat,
    linear-gradient(270deg, #172d49 8px, transparent 8px) 100% 100% / 100% 4px no-repeat,
    linear-gradient(0deg, #172d49 8px, transparent 8px) 100% 100% / 4px 100% no-repeat,
    #10213a;
  box-shadow: inset 0 0 0 4px #0c1a2e;
  text-align: left;
}

.party-discovery-empty-icon {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 3px solid #365a82;
  background: #0a182b;
  box-shadow: 4px 4px 0 #07101e, inset 3px 3px #162f50;
}

.party-discovery-empty-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.party-discovery-empty h3,
.party-discovery-empty p {
  margin: 0;
}

.party-discovery-empty h3 {
  color: #eef7ff;
  font-family: var(--bb-font-display);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #07101e;
}

.party-discovery-empty p {
  margin-top: 4px;
  color: #9eb5d1;
  font-size: 14px;
}

@media (max-width: 640px) {
  .party-discovery-roster {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

.party-settings-panel {
  width: min(540px, 94vw);
  max-height: 92dvh;
  overflow-y: auto;
  display: grid;
  gap: var(--bb-space-3);
}

.party-settings-panel .form-group {
  margin-bottom: 8px;
  text-align: left;
}

.party-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-3);
}

.party-public-name-label,
.party-visibility-toggle-label {
  display: block;
  margin-bottom: 8px;
}

.party-settings-hint {
  margin: 0;
}

.party-settings-status:empty {
  display: none;
}

.party-visibility-toggle + .party-settings-hint {
  margin: var(--bb-space-2) 0 0 34px;
  line-height: 1.5;
}

.party-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.party-settings-save {
  min-height: 34px;
  padding: 0 14px;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  border-radius: 0;
  background: linear-gradient(180deg, #1b2840 0%, #101a2a 100%);
  box-shadow:
    0px 5px black,
    0px -5px black,
    5px 0px black,
    -5px 0px black,
    0px 10px #00000038,
    inset 0px 5px #ffffff1f;
}

.leaderboard-column-head {
  display: grid;
  grid-template-columns: 76px 1fr 120px 170px;
  gap: 16px;
  align-items: center;
  padding: 0 18px 8px;
  color: #98a9ca;
  font-family: "Press Start 2P", system-ui;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.leaderboard-column-head span:nth-child(1) {
  text-align: left;
  padding-left: 6px;
}

.leaderboard-column-head span:nth-child(2) {
  text-align: left;
}

.leaderboard-column-head span:nth-child(3),
.leaderboard-column-head span:nth-child(4) {
  text-align: center;
}

.leaderboard-row {
  --rank-accent: #455a79;
  --rank-color: #c8d9f2;
  --rank-tint: rgba(65, 91, 128, 0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 76px 1fr 120px 170px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px 18px;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 36, 59, 0.97),
    rgba(14, 26, 46, 0.98)
  );
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    inset 0px 3px #ffffff1f;
  color: #deeeff;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  animation: leaderboardRowIn 220ms ease both;
  animation-delay: calc(var(--leaderboard-row-index, 0) * 28ms);
}

.leaderboard-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--rank-accent);
  opacity: 0.9;
}

.leaderboard-row:hover,
.leaderboard-row:focus-visible {
  background: linear-gradient(
    180deg,
    rgba(33, 51, 79, 0.98),
    rgba(22, 39, 63, 0.99)
  );
  transform: translateY(-1px);
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    0 0 0 2px rgba(126, 194, 255, 0.25) inset;
}

.leaderboard-row:focus-visible {
  outline: 2px solid #73caff;
  outline-offset: 3px;
}

.leaderboard-row:active {
  transform: translateY(3px);
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    inset 0px 4px #00000038;
}

.leaderboard-row.top-1 {
  --rank-accent: #c8a349;
  --rank-color: #ffe088;
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    0 0 0 2px rgba(216, 168, 45, 0.4) inset,
    inset 0px 3px #ffffff1f;
}

.leaderboard-row.top-2 {
  --rank-accent: #8997aa;
  --rank-color: #e7eef7;
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    0 0 0 2px rgba(183, 197, 216, 0.3) inset,
    inset 0px 3px #ffffff1f;
}

.leaderboard-row.top-3 {
  --rank-accent: #a9653e;
  --rank-color: #f2b17d;
  box-shadow:
    0px 4px black,
    0px -4px black,
    4px 0px black,
    -4px 0px black,
    0px 8px #00000038,
    0 0 0 2px rgba(190, 101, 53, 0.3) inset,
    inset 0px 3px #ffffff1f;
}

.leaderboard-rank {
  display: block;
  justify-self: start;
  padding-left: 6px;
  color: var(--rank-color);
  font-family: "Press Start 2P", system-ui;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.46);
}

.leaderboard-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.leaderboard-avatar-frame {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  background: linear-gradient(180deg, #091322, #040914);
  box-shadow:
    0px 3px black,
    0px -3px black,
    3px 0px black,
    -3px 0px black,
    inset 0px 2px rgba(255, 255, 255, 0.08);
}

.leaderboard-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.leaderboard-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.leaderboard-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.38);
}

.leaderboard-character {
  color: #9cc2f4;
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.leaderboard-wins {
  display: grid;
  justify-items: center;
  justify-self: center;
  gap: 4px;
  color: #edf5ff;
}

.leaderboard-wins strong {
  font-family: "Press Start 2P", system-ui;
  font-size: 13px;
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.42);
}

.leaderboard-wins small,
.leaderboard-trophies small {
  color: #94a8c7;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.leaderboard-trophies {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  color: #ffe6a0;
}

.leaderboard-trophies img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(68, 39, 3, 0.5));
}

.leaderboard-trophies > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.leaderboard-trophies strong {
  overflow: hidden;
  color: #ffe6a0;
  font-family: "Press Start 2P", system-ui;
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 rgba(56, 32, 2, 0.55);
}

.leaderboard-trophies small {
  color: #a88a4e;
}

.leaderboard-state {
  min-height: 280px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid rgba(117, 140, 177, 0.32);
  border-radius: 0;
  background: #0b1425;
  box-shadow: 7px 7px 0 var(--bb-ink);
  color: #8fa8cb;
  text-align: center;
}

.leaderboard-state strong {
  color: #f1f7ff;
  font-family: "Press Start 2P", system-ui;
  font-size: 11px;
  line-height: 1.5;
}

.leaderboard-state > span:last-child {
  font-size: 13px;
}

.leaderboard-state-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #53698e;
  border-radius: 0;
  background: #15233b;
  box-shadow: 4px 4px 0 #05070d;
  color: #b8d8ff;
  font-family: "Press Start 2P", system-ui;
  font-size: 15px;
}

.leaderboard-list::-webkit-scrollbar {
  width: 10px;
}

.leaderboard-list::-webkit-scrollbar-track {
  border: 0;
  border-radius: 0;
  background: #0a1020;
}

.leaderboard-list::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0;
  background: #536f99;
}

@keyframes leaderboardRowIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trophy-overlay-loading {
  color: #c4defd;
  padding: 14px 6px;
}

@media (max-width: 900px) {
  .leaderboard-column-head {
    grid-template-columns: 60px minmax(0, 1fr) 96px 132px;
    gap: 16px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .leaderboard-row {
    grid-template-columns: 60px minmax(0, 1fr) 96px 132px;
    gap: 16px;
    min-height: 102px;
    padding: 16px 18px;
  }

  .leaderboard-body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .leaderboard-list {
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .leaderboard-panel,
  .trophy-rewards-panel {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-width: 4px;
    border-radius: 0;
    box-shadow:
      0 0 0 3px #4a5874,
      0 0 0 6px rgba(4, 7, 13, 0.9),
      0 18px 40px rgba(0, 0, 0, 0.56);
  }


  .leaderboard-head,
  .trophy-rewards-head {
    min-height: 94px;
    padding: 14px 60px 14px 18px;
    text-align: left;
  }

  .leaderboard-head-copy,
  .trophy-rewards-head-copy {
    justify-items: start;
  }

  .leaderboard-title-line,
  .trophy-rewards-title-line {
    justify-content: flex-start;
    gap: 9px;
  }

  .leaderboard-title-line img,
  .trophy-rewards-title-line img {
    width: 24px;
    height: 24px;
  }

  .leaderboard-head .leaderboard-title-line h2,
  .trophy-rewards-head .trophy-rewards-title-line h2 {
    font-size: clamp(13px, 4vw, 18px);
  }

  .leaderboard-head .leaderboard-head-copy p,
  .trophy-rewards-head .trophy-rewards-head-copy p {
    font-size: 11px;
  }

  .leaderboard-head .trophy-overlay-close,
  .trophy-rewards-head .trophy-overlay-close {
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  .leaderboard-body {
    padding: 18px 14px 22px;
  }

  .leaderboard-column-head {
    display: none;
  }

  .leaderboard-list {
    gap: 17px;
    padding: 6px 7px 18px;
  }

  .leaderboard-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 12px 12px;
    min-height: 122px;
    padding: 16px 14px 17px;
    border-width: 1px;
  }

  .leaderboard-rank {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    padding-left: 1px;
    font-size: 11px;
  }

  .leaderboard-player {
    grid-column: 2 / 4;
    grid-row: 1;
    gap: 10px;
  }

  .leaderboard-avatar-frame {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .leaderboard-main {
    gap: 5px;
  }

  .leaderboard-name {
    font-size: 15px;
  }

  .leaderboard-character {
    font-size: 6px;
  }

  .leaderboard-wins {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    justify-self: start;
    gap: 7px;
  }

  .leaderboard-wins strong {
    font-size: 12px;
  }

  .leaderboard-wins small {
    font-size: 7px;
  }

  .leaderboard-trophies {
    grid-column: 3;
    grid-row: 2;
    gap: 6px;
  }

  .leaderboard-trophies img {
    width: 23px;
    height: 23px;
  }

  .leaderboard-trophies strong {
    max-width: 78px;
    font-size: 11px;
  }

  .leaderboard-trophies small {
    display: none;
  }

  .leaderboard-state {
    min-height: 220px;
    padding: 18px;
  }

  .trophy-rewards-body {
    gap: 8px;
    padding: 10px 10px 12px;
  }

  .trophy-track-controls {
    right: 12px;
    bottom: 12px;
    padding: 4px;
    gap: 12px;
  }

  .trophy-track-control {
    width: 32px;
    height: 28px;
    font-size: 8.5px;
  }

  .trophy-track-stage,
  .trophy-track-list,
  .trophy-track-canvas {
    min-height: 320px;
  }

  .trophy-track-line-shell {
    bottom: 54px;
  }

  .trophy-track-player-pin {
    bottom: 74px;
    padding: 4px 6px;
  }

  .trophy-track-player-pin small {
    display: none;
  }

  .trophy-track-player-pin span {
    font-size: 7px;
  }

  .trophy-track-marker-row {
    bottom: 10px;
  }

  .trophy-lane-card {
    bottom: 114px;
    width: 154px;
    min-height: 160px;
    gap: 5px;
    padding: 8px 8px 10px;
  }

  .trophy-lane-item-wrap {
    width: 52px;
    height: 48px;
  }

  .trophy-lane-item {
    width: 38px;
    height: 38px;
  }

  .trophy-lane-meta {
    height: 40px;
  }

  .trophy-lane-meta strong {
    max-width: 132px;
    font-size: 11.5px;
  }

  .trophy-lane-meta span {
    max-width: 132px;
    font-size: 8px;
  }

  .trophy-tier-claim {
    min-height: 24px;
    font-size: 6.5px;
  }

  .trophy-lane-marker::before {
    height: 64px;
  }

  .trophy-lane-marker-chip {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 5.5px;
  }
}

@media (max-height: 650px) {
  #leaderboard-overlay {
    padding: 8px;
  }

  .leaderboard-panel {
    max-height: calc(100dvh - 16px);
  }

  .leaderboard-head,
  .trophy-rewards-head {
    flex-basis: 64px;
    min-height: 64px;
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .leaderboard-head-copy {
    transform: translateY(3px);
  }

  .leaderboard-head .leaderboard-title-line h2 {
    font-size: clamp(13px, 2vw, 18px);
    line-height: 1.25;
  }

  .leaderboard-head .trophy-overlay-close {
    top: 16px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .leaderboard-body {
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .leaderboard-row {
    min-height: 82px;
  }

  .trophy-rewards-body {
    gap: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .trophy-track-stage,
  .trophy-track-list,
  .trophy-track-canvas {
    min-height: 290px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-resource.has-claimable::after {
    animation: none;
  }

  .lobby-hint {
    animation: none !important;
  }

  .lobby-hint.is-sale .lobby-hint-glint::after {
    animation: none;
  }

  .leaderboard-row,
  .trophy-lane-card {
    animation: none;
  }
}

@media (max-width: 768px) {
  .lobby-party-actions,
  .lobby-quick-actions {
    top: 68px;
  }

  .party-button,
  .leaderboard-button,
  .shop-button {
    font-size: 9px;
    height: 30px;
  }

  .shop-button {
    right: 120px;
  }
}

@media (min-width: 601px) and (max-width: 768px) and (min-height: 651px) {
  .trophy-track-stage,
  .trophy-track-list,
  .trophy-track-canvas {
    min-height: 360px;
  }

  .trophy-lane-card {
    bottom: 130px;
    width: 176px;
    min-height: 178px;
    padding: 9px;
  }

  .trophy-lane-item-wrap {
    width: 60px;
    height: 54px;
  }

  .trophy-lane-item {
    width: 44px;
    height: 44px;
  }
}

@media (max-height: 520px) {
  .trophy-rewards-panel {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .trophy-rewards-head {
    min-height: 60px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .trophy-rewards-head .trophy-rewards-head-copy p {
    display: none;
  }

  .trophy-rewards-title-line img {
    width: 20px;
    height: 20px;
  }

  .trophy-rewards-head .trophy-rewards-title-line h2 {
    font-size: 13px;
  }

  .trophy-rewards-head .trophy-overlay-close {
    width: 32px;
    height: 32px;
    font-size: 9px;
  }

  .trophy-rewards-body {
    gap: 6px;
    padding: 6px 8px;
  }

  .trophy-track-controls {
    right: 8px;
    bottom: 8px;
    padding: 3px;
    gap: 12px;
  }

  .trophy-track-control {
    width: 28px;
    height: 24px;
    font-size: 8px;
  }

  .trophy-track-stage,
  .trophy-track-list,
  .trophy-track-canvas {
    min-height: 190px;
  }

  .trophy-track-line-shell {
    bottom: 30px;
  }

  .trophy-track-player-pin {
    display: none;
  }

  .trophy-track-marker-row {
    bottom: 2px;
    height: 30px;
  }

  .trophy-lane-card {
    bottom: 58px;
    width: 140px;
    min-height: 130px;
    gap: 3px;
    padding: 6px 6px;
  }

  .trophy-lane-item-wrap {
    width: 38px;
    height: 34px;
  }

  .trophy-lane-item {
    width: 28px;
    height: 28px;
  }

  .trophy-lane-item-wrap.multi-reward {
    width: 52px;
  }

  .trophy-lane-item-wrap.multi-reward .trophy-lane-item {
    width: 26px;
    height: 26px;
  }

  .trophy-lane-item-wrap.multi-reward .trophy-lane-item:first-child {
    transform: translateX(-8px) rotate(-4deg);
  }

  .trophy-lane-item-wrap.multi-reward .trophy-lane-item:last-child {
    transform: translateX(8px) rotate(4deg);
  }

  .trophy-lane-meta {
    height: 34px;
    gap: 4px;
  }

  .trophy-lane-meta strong {
    max-width: 120px;
    font-size: 10px;
  }

  .trophy-lane-meta span {
    max-width: 120px;
    min-height: 8px;
    font-size: 6.5px;
  }

  .trophy-tier-claim {
    min-height: 22px;
    font-size: 5.5px;
  }

  .trophy-lane-marker::before {
    height: 30px;
  }

  .trophy-lane-marker-chip {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-track-player-pin,
  .trophy-lane-card.claim-success,
  .trophy-lane-marker.claim-success,
  .trophy-track-canvas.claim-flash .trophy-track-line-fill,
  .trophy-claim-spark {
    animation: none !important;
  }
}
.party-button:hover {
  background:
    linear-gradient(135deg, rgba(115, 86, 247, 0.94), rgba(158, 80, 227, 0.86)),
    rgba(22, 15, 55, 0.38);
  transform: translateY(-1px);
}

/* Drag and drop visual feedback - less obnoxious */
.platform.drag-over {
  filter: brightness(1.2) drop-shadow(0 0 10px #ffff00);
}

.slot-level-badge {
  --level-badge-size: 42px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 14;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  pointer-events: none;
}

.slot-level-badge .level-badge__caption {
  padding-block: 3px 2px;
  font-size: 5px;
}

.character-slot.has-level .slot-level-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Party invite popup styling with higher z-index */
.party-popup {
  position: absolute;
  padding: 8px 12px;
  color: white;
  z-index: 10000;
  font-size: 12px;
  white-space: nowrap;
}

.character-slot.character-splash::before {
  opacity: 1;
  animation: lobbySplashSheen 520ms ease-out forwards;
}

.character-slot.character-splash::after {
  opacity: 1;
  animation: lobbySplashBloom 620ms cubic-bezier(0.16, 0.84, 0.31, 1) forwards;
}

.character-slot.character-splash .character-sprite {
  animation: lobbySplashSprite 520ms cubic-bezier(0.16, 0.84, 0.31, 1);
}

@keyframes lobbySplashBloom {
  0% {
    opacity: 0.85;
    transform: scale(0.58);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes lobbySplashSheen {
  0% {
    opacity: 0.7;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes lobbySplashSprite {
  0% {
    transform: scale(0.88) translateY(8px);
  }
  48% {
    transform: scale(1.12) translateY(-6px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Never leave a composited animation filter on an idle lobby sprite. */
.character-slot:not(.lobby-spawn-enter):not(.lobby-spawn-exit):not(
    .lobby-ready-burst
  ):not(.lobby-unready-burst):not(.character-splash)
  > .character-sprite {
  opacity: 1;
  filter: none;
  animation: none;
}

@media (hover: none) and (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  #navbar {
    height: 42px;
    padding: 3px calc(8px + env(safe-area-inset-right)) 3px
      calc(8px + env(safe-area-inset-left));
  }

  #navbar .lobby-wordmark {
    display: none;
  }

  #navbar-right {
    gap: 6px;
  }

  .resources {
    gap: 3px;
  }

  .resources p,
  #username-button #username-text {
    font-size: 8px;
  }

  #username-button #username-text {
    max-width: 88px;
  }

  .resources img {
    width: 14px;
    height: 14px;
  }

  .account,
  .fullscreen-toggle,
  .trophy-resource {
    height: 24px;
    padding: 0 6px;
    font-size: 8px;
  }

  .lobby-party-actions,
  .lobby-quick-actions {
    top: 50px;
  }

  .party-button,
  .leaderboard-button,
  .shop-button {
    height: 24px;
    font-size: 8px;
  }

  .lobby-party-actions {
    left: 8px;
  }

  .party-search-button {
    width: 38px;
  }

  .party-settings-button {
    width: 38px;
  }

  .leaderboard-button {
    left: auto;
    right: 8px;
  }

  .shop-button {
    left: auto;
    right: 108px;
  }

  #lobby-area {
    height: calc(var(--bb-viewport-height, 100dvh) - 92px);
    margin-top: 6px;
  }

  #bottom-bar {
    height: 48px;
    padding: 0 calc(8px + env(safe-area-inset-right))
      env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
  }

  .dropdown-group {
    gap: 6px;
    max-width: calc(100vw - 96px);
  }

  .mode-picker,
  .map-picker {
    width: 154px;
    min-width: 154px;
    height: 34px;
    padding: 4px 7px;
    gap: 8px;
  }

  #mode-preview-img,
  #map-preview-img {
    width: 48px;
    height: 26px;
  }

  #mode-preview-name,
  #map-preview-name {
    font-size: 9px;
    max-width: 96px;
  }

  #mode-preview-subtitle {
    display: none;
  }

  #ready {
    min-width: 72px;
    height: 34px;
    font-size: calc(10px * var(--ready-text-scale, 1));
    padding: 8px 14px;
  }

  .mode-1 .platform {
    --platform-width: clamp(190px, 45vw, 260px);
  }

  .mode-2 .platform {
    --platform-width: clamp(155px, 36vw, 210px);
  }

  .mode-3 .platform {
    --platform-width: clamp(130px, 31vw, 175px);
  }

  .character-slot {
    width: min(15vw, 70px);
    height: min(18vh, 90px);
    min-height: 60px;
  }

  .character-sprite {
    width: min(10vw, 40px);
    height: min(10vw, 40px);
  }

  .username {
    font-size: min(2vw, 10px);
    top: -20px;
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .mode-1 .platform {
    --platform-width: clamp(250px, 42vw, 360px);
  }

  .mode-2 .platform {
    --platform-width: clamp(200px, 33vw, 300px);
  }

  .mode-2 .platform.your-team-2,
  .mode-2 .platform.op-team-2 {
    top: 55%;
  }

  .mode-3 .platform {
    --platform-width: clamp(150px, 27vw, 230px);
  }

  .mode-3 .platform.your-team-2,
  .mode-3 .platform.op-team-2 {
    top: 45%;
  }

  .mode-3 .platform.your-team-3,
  .mode-3 .platform.op-team-3 {
    top: 65%;
  }

  .character-slot {
    width: min(12vw, 80px);
    height: min(15vh, 100px);
    min-height: 70px;
    margin-bottom: calc(-1 * var(--lobby-character-seam-overlap));
  }

  .character-sprite {
    width: max(8vw, 50px);
    height: max(8vw, 50px);
  }

  #navbar {
    height: 46px;
    padding: 4px 10px;
  }

  #navbar .lobby-wordmark {
    margin-left: 6px;
  }

  #navbar-right {
    gap: 8px;
  }

  .resources {
    gap: 4px;
  }

  .resources img {
    width: 16px;
    height: 16px;
  }

  .account,
  .fullscreen-toggle {
    height: 28px;
    padding: 0 8px;
    font-size: 9px;
  }

  #username-button #username-text {
    max-width: 92px;
  }

  .lobby-party-actions,
  .lobby-quick-actions {
    top: 56px;
  }

  .party-button,
  .leaderboard-button,
  .shop-button {
    height: 28px;
    font-size: 8px;
  }

  .lobby-party-actions {
    left: 10px;
  }

  .leaderboard-button {
    left: auto;
    right: 10px;
  }

  .shop-button {
    left: auto;
    right: 110px;
  }

  #lobby-area {
    height: calc(var(--bb-viewport-height, 100dvh) - 100px);
    margin-top: 8px;
  }

  #vs {
    width: 74px;
  }

  #bottom-bar {
    height: 54px;
    padding: 0 10px;
    gap: 8px;
  }

  .dropdown-group {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 112px);
    -webkit-overflow-scrolling: touch;
  }

  .mode-picker,
  .map-picker {
    min-width: 188px;
    height: 38px;
    padding: 5px 8px;
  }

  #mode-preview-img,
  #map-preview-img {
    width: 54px;
    height: 30px;
  }

  #mode-preview-name,
  #map-preview-name {
    font-size: 10px;
  }

  #mode-preview-subtitle {
    font-size: 8px;
  }

  #ready {
    min-width: 84px;
    height: 38px;
    font-size: calc(11px * var(--ready-text-scale, 1));
  }

  .fullscreen-toggle {
    min-width: 42px;
  }
}

@media (max-width: 480px) {


  .mode-1 .platform {
    --platform-width: clamp(190px, 45vw, 260px);
  }

  .mode-2 .platform {
    --platform-width: clamp(155px, 36vw, 210px);
  }

  .mode-3 .platform {
    --platform-width: clamp(130px, 31vw, 175px);
  }

  .character-slot {
    width: min(15vw, 70px);
    height: min(18vh, 90px);
    min-height: 60px;
    margin-bottom: calc(-1 * var(--lobby-character-seam-overlap));
  }

  .character-sprite {
    width: min(10vw, 40px);
    height: min(10vw, 40px);
  }

  .username {
    font-size: min(2vw, 10px);
    top: -20px;
  }

  #navbar {
    height: 42px;
    padding: 3px 8px;
  }

  #navbar .lobby-wordmark {
    display: none;
  }

  #navbar-right {
    gap: 6px;
  }

  .resources p,
  #username-button #username-text {
    font-size: 8px;
  }

  .resources img {
    width: 14px;
    height: 14px;
  }

  .account,
  .fullscreen-toggle {
    height: 26px;
    padding: 0 7px;
    font-size: 8px;
  }


  .mode-1 .platform {
    --platform-width: clamp(190px, 45vw, 260px);
  }

  .mode-2 .platform {
    --platform-width: clamp(155px, 36vw, 210px);
  }

  .mode-3 .platform {
    --platform-width: clamp(130px, 31vw, 175px);
  }

  .character-slot {
    width: min(15vw, 70px);
    height: min(18vh, 90px);
    min-height: 60px;
    margin-bottom: calc(-1 * var(--lobby-character-seam-overlap));
  }

  .character-sprite {
    width: min(10vw, 40px);
    height: min(10vw, 40px);
  }

  .username {
    font-size: min(2vw, 10px);
    top: -20px;
  }

  #lobby-area {
    height: calc(var(--bb-viewport-height, 100dvh) - 90px);
  }

  #bottom-bar {
    height: 50px;
    padding: 0 8px;
  }

  .dropdown-group {
    max-width: calc(100vw - 92px);
  }

  .mode-picker,
  .map-picker {
    min-width: 156px;
    height: 34px;
    padding: 4px 7px;
    gap: 8px;
  }

  .mode-picker-copy {
    display: none;
  }

  #mode-preview-img,
  #map-preview-img {
    width: 48px;
    height: 26px;
  }

  #ready {
    min-width: 70px;
    height: 34px;
    font-size: calc(10px * var(--ready-text-scale, 1));
  }

  .lobby-party-actions {
    left: 8px;
  }

  .leaderboard-button {
    left: auto;
    right: 8px;
  }

  .shop-button {
    left: auto;
    right: 106px;
  }
}

#profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 12020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.profile-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

.profile-popup {
  position: relative;
  z-index: 1;
  width: min(880px, 96vw);
  max-height: min(700px, 92vh);
  overflow: auto;
  padding: 0;
}

.profile-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 68px;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  background: var(--bb-header-gradient);
}

.profile-head-copy {
  display: grid;
  gap: 6px;
}

.profile-popup-head h2 {
  margin: 0;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(14px, 2vw, 22px);
  color: #fff;
  text-shadow: 3px 4px 0 rgba(2, 5, 12, 0.62);
}

.profile-popup-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.profile-close {
  height: 30px;
  padding: 0 14px;
  background: linear-gradient(135deg, #d14b42, #ab2e2e);
  color: #fff;
}

.profile-popup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px;
}

.profile-panel {
  border: 2px solid var(--bb-border);
  border-radius: var(--bb-radius-card);
  padding: 14px;
  background: var(--bb-card-gradient);
  box-shadow: var(--bb-card-shadow);
}

/* Card grids need room below for the cards' ink ring and drop shadow. */
.profile-character-levels-panel {
  padding-bottom: 26px;
}

.profile-panel h3 {
  margin: 0 0 12px;
  color: #d8edff;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.profile-hero-panel {
  display: grid;
  gap: 12px;
}

.profile-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1.2fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 16px;
}

.profile-hero-center {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.profile-hero-side {
  display: grid;
  gap: 8px;
}

.profile-hero-side-right {
  align-content: start;
}

.profile-metric-stack-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8fc3f4;
  padding-left: 2px;
}

.profile-card-showcase {
  width: min(100%, 210px);
  position: relative;
  display: grid;
  place-items: center;
}

.profile-card-edit-trigger {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--bb-radius-control);
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  transition: transform var(--bb-motion-fast) var(--bb-ease);
}

.profile-card-edit-trigger:disabled {
  cursor: default;
}

.profile-hero-card-frame {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
  transition: filter var(--bb-motion-standard) ease;
}

.profile-hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
}

.profile-hero-avatar-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: inherit;
  cursor: pointer;
  transition: transform var(--bb-motion-fast) var(--bb-ease);
}

.profile-hero-avatar-trigger:disabled {
  cursor: default;
}

.profile-hero-avatar-trigger > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  border: 2px solid var(--bb-border);
  box-shadow: 0 0 0 3px var(--bb-ink);
  transition:
    border-color var(--bb-motion-fast) ease,
    box-shadow var(--bb-motion-fast) ease,
    filter var(--bb-motion-fast) ease;
}

.profile-icon-edit-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.profile-card-edit-trigger:is(:hover, :focus-visible):not(:disabled),
.profile-hero-avatar-trigger:is(:hover, :focus-visible):not(:disabled) {
  transform: translateY(-2px);
}

.profile-card-edit-trigger:is(:hover, :focus-visible):not(:disabled) + .profile-hero-card-frame {
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px rgba(103, 153, 212, 0.72));
}

.profile-hero-avatar-trigger:is(:hover, :focus-visible):not(:disabled) #profile-hero-avatar {
  border-color: var(--bb-border-highlight);
  box-shadow:
    0 0 0 3px var(--bb-ink),
    0 0 18px rgba(103, 153, 212, 0.76);
  filter: brightness(1.08);
}

.profile-card-edit-trigger:active:not(:disabled),
.profile-hero-avatar-trigger:active:not(:disabled) {
  transform: translateY(2px);
}

.profile-hero-copy {
  display: grid;
  gap: 5px;
  text-align: center;
}

.profile-hero-name {
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(14px, 1.8vw, 20px);
  color: #fff;
}

.profile-hero-class {
  color: #ffe69a;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.profile-hero-tag {
  color: #a9d5ff;
  font-size: 12px;
}

.profile-metric-card {
  --profile-metric-accent: #78bfff;
  --profile-metric-glow: rgba(72, 154, 255, 0.2);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  min-height: 76px;
  padding: 10px 10px 10px 12px;
  background:
    radial-gradient(
      circle at 88% 48%,
      var(--profile-metric-glow),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(10, 23, 45, 0.92), rgba(5, 13, 28, 0.82));
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.profile-metric-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--profile-metric-accent) 30%,
    var(--profile-metric-accent) 70%,
    transparent
  );
  opacity: 0.8;
}


.profile-metric-card[data-profile-metric="wins"] {
  --profile-metric-accent: #ffd56a;
  --profile-metric-glow: rgba(255, 194, 63, 0.2);
}

.profile-metric-card[data-profile-metric="trophies"] {
  --profile-metric-accent: #ffbd45;
  --profile-metric-glow: rgba(255, 155, 41, 0.2);
}

.profile-metric-card[data-profile-metric="level"] {
  --profile-metric-accent: #75e3ff;
  --profile-metric-glow: rgba(44, 191, 255, 0.2);
}

.profile-metric-card[data-profile-metric="coins"] {
  --profile-metric-accent: #ffd25b;
  --profile-metric-glow: rgba(255, 198, 51, 0.2);
}

.profile-metric-card[data-profile-metric="gems"] {
  --profile-metric-accent: #e68cff;
  --profile-metric-glow: rgba(196, 91, 255, 0.22);
}

.profile-metric-icon {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(
    in srgb,
    var(--profile-metric-accent) 55%,
    transparent
  );
  border-radius: 0;
  background: rgba(2, 8, 19, 0.5);
  box-shadow:
    inset 0 0 10px var(--profile-metric-glow),
    0 3px 0 rgba(0, 0, 0, 0.28);
}

.profile-metric-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.42));
  transition: transform 150ms ease;
}

.profile-metric-card[data-profile-metric="level"]
  .profile-metric-icon
  img {
  width: 29px;
  height: 36px;
}

.profile-metric-card:hover .profile-metric-icon img {
  transform: scale(1.08) rotate(-3deg);
}

.profile-metric-card > span:not(.profile-metric-icon) {
  grid-column: 1;
  align-self: end;
  font-size: 11px;
  color: #a9d5ff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.profile-metric-card strong {
  grid-column: 1;
  align-self: start;
  font-size: 20px;
  color: #fff;
}

.profile-metric-card-generic strong {
  font-size: 26px;
}

.profile-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--bb-radius-card);
  margin-bottom: 6px;
  background: rgba(7, 18, 39, 0.58);
  border: 1px solid rgba(126, 191, 255, 0.2);
  color: #cfe8ff;
}

.profile-stat-row strong {
  color: #ffffff;
}

.profile-form {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.profile-form label {
  font-size: 11px;
  color: #b8ddff;
  letter-spacing: 0.2px;
}

.profile-form input {
  min-height: 42px;
  border: 2px solid var(--bb-border);
  border-radius: var(--bb-radius-control);
  background: rgba(8, 18, 38, 0.84);
  color: #f2f8ff;
  padding: 10px;
}

.profile-action-btn {
  justify-self: start;
  min-height: 30px;
  padding: 0 14px;
  background: linear-gradient(135deg, #18a462, #0e8255);
  color: #fff;
}

.profile-message {
  min-height: 18px;
  margin: 0;
  color: #bfe2ff;
  font-size: 12px;
}

.profile-panel.is-hidden {
  display: none;
}

.profile-loadout-modal .is-hidden {
  display: none !important;
}

.profile-cards-panel {
  margin-top: 0;
}

.profile-loadout-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.profile-loadout-overlay.hidden {
  display: none;
}

.profile-loadout-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

.profile-loadout-modal {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 12px));
  max-height: min(620px, 80vh);
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
}

.profile-loadout-overlay[data-loadout-mode="cards"] .profile-loadout-modal {
  width: min(760px, calc(100% - 12px));
}

.profile-loadout-section {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-loadout-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 68px;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  background: var(--bb-header-gradient);
}

.profile-loadout-head #profile-loadout-title {
  min-width: 0;
  white-space: nowrap;
  margin: 0 auto 0 0;
  color: #fff;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(9px, 1.6vw, 16px);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--bb-title-shadow);
}

.profile-loadout-head #profile-loadout-shop,
.profile-loadout-head .profile-action-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.profile-loadout-head #profile-loadout-close,
.profile-loadout-head .profile-close {
  height: 42px !important;
  width: 42px !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: center;
  gap: 16px;
}

.profile-card-tile {
  padding: 10px;
}


.profile-card-tile {
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.profile-card-tile :is(img, video, .player-card-canvas) {
  width: 100%;
  aspect-ratio: 650 / 1250;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.profile-icon-tile img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--bb-radius-media);
}

.profile-loadout-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.profile-loadout-shop-short {
  display: none;
}

.profile-icon-collection {
  display: grid;
  gap: var(--bb-space-6);
}

.profile-icon-group + .profile-icon-group {
  padding-top: var(--bb-space-5);
}

.profile-icon-group-heading {
  margin-bottom: var(--bb-space-4);
}

.profile-icon-group-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.profile-icon-group-heading h3 span {
  padding: 4px 6px;
}

.profile-icon-group-heading p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.profile-icon-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  align-items: stretch;
  gap: var(--bb-space-4);
}

.profile-icon-group-grid .profile-loadout-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
}

.profile-icon-choice-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}

.profile-icon-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.profile-icon-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-icon-choice-tile.is-selected {
  cursor: default;
}

.profile-loadout-modal .profile-icon-choice-tile:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
}

.profile-icon-choice-tile.is-locked .profile-icon-art > img {
  filter: brightness(0.58) saturate(0.35);
}

.profile-icon-selected-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 5px 6px;
}

.profile-icon-details {
  display: grid;
  gap: 4px;
  padding: 9px 3px 5px;
  line-height: 1.3;
}

.profile-icon-details strong {
  font-size: 13px;
}

.profile-icon-status {
  font-size: 11px;
}

.profile-icon-requirement {
  font-size: 11px;
  line-height: 1.4;
}

.profile-icon-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.profile-icon-lock-overlay img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px #000);
}

@media (max-width: 600px) {
  .profile-loadout-overlay {
    padding: 8px;
  }

  .profile-loadout-head-actions {
    gap: 8px;
  }

  .profile-loadout-modal .profile-loadout-head {
    padding: 10px;
  }

  .profile-loadout-modal .profile-loadout-head #profile-loadout-shop {
    padding: 0 8px !important;
    font-size: 9px !important;
  }

  .profile-loadout-head .profile-loadout-shop-full {
    display: none;
  }

  .profile-loadout-head .profile-loadout-shop-short {
    display: inline;
  }

  .profile-loadout-head #profile-loadout-title {
    font-size: clamp(8px, 2.1vw, 12px);
  }

  .profile-loadout-section {
    padding: 14px;
  }

  .profile-icon-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
  }
}

/* Card tile: art, name, rarity tag, then one full-width action. */
.profile-card-meta {
  margin-top: var(--bb-space-3);
  display: grid;
  justify-items: start;
  gap: var(--bb-space-2);
}

.profile-card-meta strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--bb-text);
  font-family: var(--bb-font-display);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--bb-ink);
  white-space: nowrap;
}

.profile-card-actions {
  margin-top: var(--bb-space-4);
  padding: 0 5px 5px;
}

.profile-card-btn {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  color: #fff;
  background: var(--bb-primary-gradient);
}

/* Equipped is a state, not an unavailable action. */
.profile-card-tile .profile-card-btn:disabled {
  color: #fff;
  background: var(--bb-success-gradient);
  opacity: 1;
  filter: none;
  cursor: default;
}

.profile-slot-menu {
  position: fixed;
  z-index: 12040;
  width: min(224px, calc(100vw - 24px));
  padding: 6px;
  isolation: isolate;
}

.profile-slot-menu[hidden] {
  display: none;
}

.profile-slot-menu-head {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px 11px;
  border-bottom: 2px solid #263d5e;
}

.profile-slot-menu-eyebrow {
  color: #83a4cb;
  font-family: var(--bb-font-display);
  font-size: 7px;
  line-height: 1.3;
  text-transform: uppercase;
}

.profile-slot-menu-head strong {
  overflow: hidden;
  color: #f4f8ff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-slot-menu-actions {
  display: grid;
  gap: 2px;
  padding-top: 5px;
}

.profile-slot-menu .profile-slot-menu-btn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 39px;
  width: 100%;
  justify-content: flex-start;
  padding: 0 10px;
  border-left: 3px solid transparent;
  color: #dce9f8;
  background: transparent;
  box-shadow: none;
  font-size: 8px;
  line-height: 1.35;
  text-align: left;
}

.profile-slot-menu-btn[hidden] {
  display: none;
}

.profile-slot-menu .profile-slot-menu-btn:hover,
.profile-slot-menu .profile-slot-menu-btn:focus-visible {
  filter: none;
  color: #fff;
  background: #203c61;
  box-shadow: inset 3px 0 #63a9ff;
}

.profile-slot-menu .profile-slot-menu-btn:active {
  filter: brightness(0.94);
  background: #172d4b;
  box-shadow: inset 3px 0 #63a9ff;
}

.profile-slot-menu-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #78b8ff;
  background: #102743;
}

.profile-slot-menu-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.profile-slot-menu .profile-slot-menu-btn.owner .profile-slot-menu-icon {
  color: #f1c45e;
  background: #362b16;
}

.profile-slot-menu .profile-slot-menu-btn.kick {
  color: #ffbfc3;
}

.profile-slot-menu .profile-slot-menu-btn.kick:hover,
.profile-slot-menu .profile-slot-menu-btn.kick:focus-visible {
  color: #fff;
  background: #4b222d;
  box-shadow: inset 3px 0 #ed6570;
}

.profile-slot-menu .profile-slot-menu-btn.kick .profile-slot-menu-icon {
  color: #f16a74;
  background: #391c27;
}

.profile-slot-menu-pointer {
  position: absolute;
  z-index: -1;
  top: 32px;
  left: -11px;
  width: 16px;
  height: 16px;
  border-bottom: 3px solid #45658b;
  border-left: 3px solid #45658b;
  background: #142a49;
  box-shadow: -3px 3px 0 var(--bb-ink);
  transform: rotate(45deg);
}

.profile-slot-menu[data-side="left"] .profile-slot-menu-pointer {
  right: -11px;
  left: auto;
  border: 0;
  border-top: 3px solid #45658b;
  border-right: 3px solid #45658b;
  box-shadow: 3px -3px 0 var(--bb-ink);
}

@media (max-width: 880px) {
  .profile-popup-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero-top {
    grid-template-columns: 1fr;
  }

  .profile-hero-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-hero-side-right {
    grid-template-columns: 1fr;
  }

  .profile-metric-stack-title {
    grid-column: 1 / -1;
  }

  .profile-card-showcase {
    width: min(100%, 190px);
  }

  .profile-hero-avatar {
    width: 88px;
    height: 88px;
  }
}

/* Matchmaking is a cinematic lobby state, not a card layered over the lobby. */
#navbar,
#bottom-bar,
#lobby-area,
.lobby-party-actions,
.lobby-quick-actions,
.bb-chat-lobby-wrap {
  transition:
    transform 540ms cubic-bezier(0.16, 0.84, 0.31, 1),
    opacity 360ms ease,
    filter 540ms ease;
}

body.matchmaking-active #navbar {
  opacity: 0;
  transform: translateY(-125%);
  filter: blur(6px);
}

body.matchmaking-active #bottom-bar {
  opacity: 0;
  transform: translateY(130%);
  filter: blur(6px);
}

body.matchmaking-active .lobby-party-actions {
  opacity: 0;
  transform: translateX(-150%) scale(0.84);
  filter: blur(5px);
}

body.matchmaking-active .lobby-quick-actions,
body.matchmaking-active .bb-chat-lobby-wrap {
  opacity: 0;
  transform: translateX(150%) scale(0.84);
  filter: blur(5px);
}

body.matchmaking-active #lobby-area {
  opacity: 0.26;
  transform: translateY(2.5vh) scale(1.16);
  filter: brightness(0.5) saturate(0.72) blur(1.5px);
}

body.matchmaking-exiting #navbar,
body.matchmaking-exiting #bottom-bar,
body.matchmaking-exiting #lobby-area,
body.matchmaking-exiting .lobby-party-actions,
body.matchmaking-exiting .lobby-quick-actions,
body.matchmaking-exiting .bb-chat-lobby-wrap {
  transition-duration: 180ms, 120ms, 180ms;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
}

.mm-overlay {
  --mm-map-background: url("/assets/lushy/lobbyBg.webp");
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.mm-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mm-overlay.is-exiting {
  opacity: 0;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* Sized and positioned exactly like the lobby's body background so the art
   holds still while the matchmaking tint fades in over it. */
.mm-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(15, 42, 72, 0.08), transparent 38%),
    radial-gradient(circle at 12% 52%, rgba(0, 199, 255, 0.18), transparent 44%),
    radial-gradient(circle at 88% 50%, rgba(255, 65, 89, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(2, 7, 17, 0.42), rgba(2, 7, 17, 0.72)),
    var(--mm-map-background) center / cover no-repeat;
  filter: saturate(1.12) contrast(1.03);
  transition: filter 720ms ease;
}

.mm-bg::before,
.mm-bg::after {
  content: "";
  position: absolute;
  inset: -24%;
  pointer-events: none;
  will-change: transform, background-position;
}

.mm-bg::before {
  opacity: 0.9;
  background:
    radial-gradient(ellipse, rgba(16, 209, 255, 0.28), transparent 64%),
    radial-gradient(ellipse, rgba(98, 64, 221, 0.24), transparent 67%),
    radial-gradient(ellipse, rgba(255, 76, 97, 0.18), transparent 69%),
    conic-gradient(
      from 210deg at 50% 50%,
      transparent 0 24%,
      rgba(65, 217, 255, 0.12) 31%,
      transparent 39% 63%,
      rgba(136, 87, 255, 0.12) 71%,
      transparent 80%
    );
  background-repeat: no-repeat;
  background-size: 46% 58%, 44% 54%, 42% 56%, 100% 100%;
  background-position: -4% 84%, 52% -12%, 110% 76%, center;
  filter: blur(30px);
  mix-blend-mode: screen;
  animation: mm-gradient-drift-primary 12s ease-in-out infinite alternate;
}

.mm-bg::after {
  opacity: 0.68;
  background:
    radial-gradient(ellipse, rgba(0, 210, 255, 0.24), transparent 66%),
    radial-gradient(ellipse, rgba(255, 49, 78, 0.18), transparent 70%),
    linear-gradient(
      112deg,
      transparent 26%,
      rgba(105, 229, 255, 0.11) 43%,
      rgba(174, 113, 255, 0.09) 50%,
      transparent 66%
    );
  background-repeat: no-repeat;
  background-size: 38% 54%, 36% 48%, 180% 180%;
  background-position: 8% 10%, 92% 16%, -40% 50%;
  filter: blur(42px);
  mix-blend-mode: screen;
  animation: mm-gradient-drift-secondary 17s ease-in-out infinite alternate-reverse;
}

.mm-particles,
.mm-speed-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.mm-success-burst {
  position: absolute;
  inset: -14%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(255, 241, 164, 0.42),
      rgba(255, 194, 67, 0.16) 18%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 16% 46%,
      rgba(255, 183, 48, 0.25),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 84% 48%,
      rgba(255, 214, 84, 0.24),
      transparent 35%
    ),
    radial-gradient(
      ellipse at 50% 92%,
      rgba(255, 151, 37, 0.18),
      transparent 42%
    );
  filter: blur(17px) saturate(1.18);
  mix-blend-mode: screen;
  transform: scale(0.62);
  transform-origin: 50% 54%;
  will-change: opacity, transform;
}

.mm-particles i {
  position: absolute;
  left: var(--mm-particle-x);
  bottom: -12vh;
  width: var(--mm-particle-size);
  height: calc(var(--mm-particle-size) * 4.5);
  border-radius: 0;
  opacity: 0;
  background: linear-gradient(180deg, transparent, #baf7ff 55%, #28d9ff);
  box-shadow:
    0 0 8px rgba(115, 235, 255, 0.9),
    0 0 20px rgba(33, 166, 255, 0.48);
  transform: translate3d(0, 0, 0) scale(0.5);
  animation: mm-particle-rise var(--mm-particle-duration) linear
    var(--mm-particle-delay) infinite;
}

.mm-particles i:nth-child(3n) {
  background: linear-gradient(180deg, transparent, #f6e8ff 55%, #b785ff);
  box-shadow: 0 0 12px rgba(160, 114, 255, 0.66);
}

.mm-particles i:nth-child(5n) {
  filter: blur(1.5px);
}

.mm-speed-lines {
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    96deg,
    transparent 0 9%,
    rgba(145, 232, 255, 0.08) 9.1%,
    transparent 9.25% 18%
  );
  transform: skewY(-3deg) translateY(20%);
  animation: mm-speed-lines-rise 8s linear infinite;
}

.mm-card {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--bb-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  box-sizing: border-box;
  overflow: hidden;
  color: #f7fbff;
  pointer-events: none;
}

.mm-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 28px;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(22px, 4vh, 42px) 0 8px;
  opacity: 0;
  transform: translateY(-34px);
  transition:
    transform 620ms cubic-bezier(0.16, 0.84, 0.31, 1) 100ms,
    opacity 420ms ease 100ms;
}

.mm-overlay.is-visible .mm-header {
  opacity: 1;
  transform: translateY(0);
}

.mm-heading {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(17px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.8px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 4px 0 rgba(1, 6, 17, 0.8),
    0 0 28px rgba(90, 218, 255, 0.38);
}

.mm-brand-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: clamp(100px, 12vw, 170px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.mm-heading::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #5deaff, transparent);
  box-shadow: 0 0 12px #31d6ff;
}

.mm-progress {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
}

.mm-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: #fff;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(25px, 3.2vw, 42px);
  letter-spacing: -3px;
  line-height: 1;
  text-shadow:
    0 4px 0 rgba(1, 5, 14, 0.8),
    0 0 24px rgba(88, 220, 255, 0.34);
}

.mm-count-divider,
#mm-total {
  color: rgba(210, 230, 244, 0.56);
  font-size: 0.52em;
  letter-spacing: -1px;
}

#mm-found.is-updating {
  animation: mm-count-pop 520ms cubic-bezier(0.16, 0.84, 0.31, 1);
}

.mm-label {
  max-width: 78px;
  color: rgba(201, 221, 238, 0.68);
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  line-height: 1.55;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.mm-lobby {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 54px;
  perspective: 1000px;
}

.mm-lobby::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(980px, 82vw);
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(77, 205, 255, 0.13),
    rgba(65, 117, 255, 0.04) 46%,
    transparent 72%
  );
  filter: blur(20px);
  transform: translateX(-50%);
  animation: mm-stage-breathe 3.6s ease-in-out infinite;
}

.mm-lobby::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(1080px, 90vw);
  height: 190px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 214, 91, 0.08) 28%,
    rgba(255, 238, 157, 0.28) 50%,
    rgba(255, 214, 91, 0.08) 72%,
    transparent
  );
  filter: blur(18px);
  transform: translate(-50%, -50%) scaleX(0.08);
}

.mm-players-grid {
  --mm-platform-image: url("/assets/lushy/lobbyPlatform.webp");
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 168px));
  align-items: end;
  justify-content: center;
  justify-items: center;
  gap: clamp(24px, 2.2vw, 38px);
  width: min(1180px, 94vw);
  margin: auto;
  opacity: 0;
  transform: translateY(54px) scale(0.78) rotateX(5deg);
  transform-origin: 50% 82%;
  transition:
    transform 880ms cubic-bezier(0.12, 0.86, 0.25, 1) 80ms,
    opacity 380ms ease 80ms;
}

.mm-players-grid[data-slots="2"] {
  grid-template-columns: repeat(2, minmax(180px, 240px));
  gap: clamp(110px, 18vw, 250px);
  width: min(900px, 92vw);
}

.mm-players-grid[data-slots="4"] {
  grid-template-columns: repeat(4, minmax(145px, 195px));
  gap: clamp(28px, 3vw, 48px);
}

.mm-players-grid[data-slots="6"] {
  grid-template-columns: repeat(6, minmax(112px, 154px));
  gap: clamp(24px, 2vw, 34px);
}

.mm-overlay.is-visible .mm-players-grid {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

.mm-player {
  --mm-team-color: #3bdfff;
  --mm-team-glow: rgba(34, 190, 255, 0.62);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: clamp(225px, 34vh, 320px);
  box-sizing: border-box;
}

.mm-player-visual {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  /* Stack the artwork so character feet share the platform top at every size. */
  padding-bottom: 22px;
  animation: mm-platform-float 5.2s ease-in-out infinite;
  animation-delay: calc(var(--mm-slot-index) * -0.72s);
}

.mm-player[data-team="red"] {
  --mm-team-color: #ff5c75;
  --mm-team-glow: rgba(255, 55, 88, 0.58);
}

.mm-players-grid[data-slots="2"] .mm-player {
  height: clamp(300px, 47vh, 410px);
}

.mm-character {
  position: relative;
  z-index: 4;
  width: clamp(62px, 7.2vw, 104px);
  height: clamp(76px, 13vh, 138px);
  display: block;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0;
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 7px 0 rgba(0, 0, 0, 0.24))
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.48));
}

.mm-players-grid[data-slots] .mm-character.mm-bot-shuffle-icon {
  width: clamp(54px, 6vw, 86px);
  height: clamp(66px, 10vh, 108px);
}

.mm-players-grid[data-slots="2"] .mm-character {
  width: clamp(88px, 10vw, 138px);
  height: clamp(112px, 19vh, 182px);
}

.mm-platform {
  position: relative;
  margin-top: calc(-1 * var(--platform-surface-offset, 0px));
  flex-shrink: 0;
  z-index: 2;
  width: 108%;
  max-width: 258px;
  aspect-ratio: 638 / 300;
  background-image: var(--mm-platform-image);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter:
    drop-shadow(0 14px 13px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 12px var(--mm-team-glow));
}

.mm-players-grid[data-slots="2"] .mm-platform {
  width: 118%;
}

.mm-players-grid[data-slots="6"] .mm-platform {
  width: 100%;
}

.mm-player::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 7%;
  width: 72%;
  height: 10%;
  border-radius: 50%;
  background: var(--mm-team-color);
  opacity: 0.28;
  filter: blur(17px);
  transform: translateX(-50%);
}

.mm-name {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -2px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  box-sizing: border-box;
  padding: 4px 7px 5px;
  border: 1px solid rgba(174, 226, 255, 0.18);
  border-radius: 0;
  color: #fff;
  background: rgba(2, 8, 18, 0.84);
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(7px, 0.76vw, 10px);
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 #01050c;
  white-space: nowrap;
  transform: translateX(-50%);
  filter: none;
  -webkit-font-smoothing: none;
}

.mm-player.placeholder {
  opacity: 0.64;
}

.mm-player.placeholder .mm-platform {
  opacity: 0.62;
  filter:
    grayscale(0.7) brightness(0.62)
    drop-shadow(0 12px 12px rgba(0, 0, 0, 0.48));
}

.mm-player.placeholder::after {
  opacity: 0.1;
}

.mm-player.placeholder .mm-name {
  color: rgba(222, 239, 250, 0.78);
  background: rgba(2, 8, 18, 0.72);
  text-shadow: 0 2px 0 #01050c;
}

.mm-slot-beacon {
  position: relative;
  z-index: 4;
  width: clamp(62px, 6vw, 86px);
  height: clamp(58px, 7vh, 78px);
  margin-bottom: 10px;
}

/* Three hard-edged pixels tick in sequence above each open slot. */
.mm-slot-beacon { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mm-slot-beacon i {
  width: 8px;
  height: 8px;
  background: #b9d7e8;
  box-shadow: 0 3px 0 #020710;
  opacity: 0.35;
  animation: mm-search-pixel 1.2s steps(1, end) infinite;
}
.mm-slot-beacon i:nth-child(2) { animation-delay: 0.2s; }
.mm-slot-beacon i:nth-child(3) { animation-delay: 0.4s; }
.mm-player.placeholder .mm-player-visual { animation: none; }

.mm-arrival-fx {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(92px, 13vh, 116px);
  width: 120px;
  height: 210px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
}

.mm-players-grid[data-slots="2"] .mm-arrival-fx {
  bottom: clamp(128px, 18vh, 150px);
}

.mm-arrival-fx::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 64px;
  height: 205px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--mm-team-color) 34%, transparent),
    rgba(235, 253, 255, 0.68),
    color-mix(in srgb, var(--mm-team-color) 34%, transparent),
    transparent
  );
  filter: blur(2px);
  transform: translateX(-50%);
}

.mm-arrival-fx::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 104px;
  height: 22px;
  border: 2px solid rgba(224, 252, 255, 0.82);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--mm-team-glow), transparent 68%);
  box-shadow:
    0 0 12px #dffbff,
    0 0 28px var(--mm-team-color);
  transform: translateX(-50%);
}

.mm-arrival-fx > i {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 18px;
  border-radius: 0;
  background: #e8fdff;
  box-shadow: 0 0 9px var(--mm-team-color);
}

.mm-arrival-fx > i:nth-child(1) {
  transform: translateX(-42px);
}

.mm-arrival-fx > i:nth-child(2) {
  height: 9px;
  transform: translateX(-27px);
}

.mm-arrival-fx > i:nth-child(3) {
  height: 25px;
  transform: translateX(-12px);
}

.mm-arrival-fx > i:nth-child(4) {
  height: 12px;
  transform: translateX(15px);
}

.mm-arrival-fx > i:nth-child(5) {
  height: 21px;
  transform: translateX(31px);
}

.mm-arrival-fx > i:nth-child(6) {
  height: 7px;
  transform: translateX(45px);
}

.mm-arrival-fx > span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 206px;
  background: linear-gradient(180deg, transparent, #fff 62%, var(--mm-team-color));
  box-shadow:
    0 0 9px #e5fdff,
    0 0 22px var(--mm-team-color);
  transform: translateX(-50%);
}

.mm-player-arriving .mm-arrival-fx {
  animation: mm-arrival-beam 1.05s cubic-bezier(0.16, 0.84, 0.31, 1) both;
}

.mm-player-arriving .mm-arrival-fx > i {
  animation: mm-arrival-shard 720ms ease-out both;
}

.mm-player-arriving .mm-arrival-fx > i:nth-child(even) {
  animation-delay: 90ms;
}

.mm-player-arriving .mm-character {
  animation: mm-character-materialize 980ms cubic-bezier(0.16, 0.84, 0.31, 1)
    both;
}

.mm-player-arriving .mm-name {
  animation: mm-player-copy-in 420ms ease-out 480ms both;
}

.mm-player-arriving .mm-platform {
  animation: mm-platform-lock-in 760ms cubic-bezier(0.16, 0.84, 0.31, 1) both;
}

.mm-footer {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 8px 0 max(24px, env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(28px);
  transition:
    transform 520ms cubic-bezier(0.16, 0.84, 0.31, 1) 200ms,
    opacity 360ms ease 200ms;
}

.mm-overlay.is-visible .mm-footer {
  opacity: 1;
  transform: translateY(0);
}

#mm-tips {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(560px, 55vw);
  min-height: 38px;
  margin: 0;
  padding: 0 18px;
  border-top: 1px solid rgba(159, 220, 255, 0.16);
  border-bottom: 1px solid rgba(159, 220, 255, 0.12);
  background: linear-gradient(90deg, transparent, rgba(3, 14, 31, 0.45), transparent);
  text-align: left;
}

.mm-tip-label {
  flex: 0 0 auto;
  color: #63e7ff;
  font-family: "Press Start 2P", system-ui;
  font-size: 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#tips-text {
  max-width: 430px;
  color: rgba(211, 229, 241, 0.72);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-shadow: 0 2px 0 rgba(2, 5, 12, 0.62);
  transition: opacity 0.35s ease;
}

.mm-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.mm-fill-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.mm-btn {
  min-width: 150px;
  padding: 11px 18px;
  color: rgba(244, 249, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(108, 126, 153, 0.42), rgba(49, 62, 83, 0.52)),
    rgba(4, 10, 20, 0.54);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--bb-motion-fast) ease,
    filter var(--bb-motion-fast) ease,
    background-color var(--bb-motion-fast) ease;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

.mm-btn:hover {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(190, 61, 77, 0.76), rgba(126, 31, 46, 0.76)),
    rgba(22, 5, 10, 0.54);
  filter: brightness(1.08);
}

.mm-fill-bots {
  background:
    linear-gradient(135deg, rgba(0, 193, 255, 0.9), rgba(0, 129, 214, 0.82)),
    rgba(4, 26, 42, 0.26);
}

.mm-fill-bots:hover {
  background:
    linear-gradient(135deg, rgba(31, 205, 255, 0.94), rgba(13, 152, 234, 0.86)),
    rgba(7, 34, 56, 0.3);
}

.mm-fill-bots-unlimited {
  background:
    linear-gradient(135deg, rgba(233, 89, 89, 0.92), rgba(190, 45, 45, 0.84)),
    rgba(52, 8, 8, 0.26);
}

.mm-fill-bots-unlimited:hover {
  background:
    linear-gradient(135deg, rgba(247, 108, 108, 0.94), rgba(216, 58, 58, 0.86)),
    rgba(70, 10, 10, 0.3);
}

.mm-overlay[data-state="ready"] .mm-bg {
  filter: saturate(1.18) contrast(1.04) brightness(1.08);
}

.mm-overlay[data-state="ready"] .mm-bg::before {
  opacity: 1;
  filter: blur(24px) sepia(0.18);
}

.mm-overlay[data-state="ready"] .mm-lobby::before {
  background: radial-gradient(
    ellipse,
    rgba(255, 212, 79, 0.24),
    rgba(255, 151, 47, 0.07) 48%,
    transparent 72%
  );
}

.mm-overlay[data-state="ready"] .mm-lobby::after {
  animation: mm-success-wave 1.25s cubic-bezier(0.16, 0.84, 0.31, 1) both;
}

.mm-overlay[data-state="ready"] .mm-success-burst {
  animation: mm-gold-gradient-burst 1.55s cubic-bezier(0.12, 0.82, 0.24, 1)
    both;
}

.mm-overlay[data-state="ready"] .mm-heading {
  color: #fff0a5;
  text-shadow:
    0 4px 0 rgba(20, 10, 0, 0.82),
    0 0 18px rgba(255, 219, 92, 0.82),
    0 0 42px rgba(255, 153, 45, 0.42);
}

.mm-overlay[data-state="ready"] .mm-heading::after {
  background: linear-gradient(90deg, transparent, #ffe783, transparent);
  box-shadow:
    0 0 12px #ffd34e,
    0 0 28px rgba(255, 164, 50, 0.72);
}

.mm-overlay[data-state="ready"] .mm-count,
.mm-overlay[data-state="ready"] .mm-count-divider,
.mm-overlay[data-state="ready"] #mm-total,
.mm-overlay[data-state="ready"] #mm-found {
  color: #ffd75e;
  text-shadow:
    0 4px 0 rgba(20, 9, 0, 0.82),
    0 0 16px rgba(255, 229, 111, 0.9),
    0 0 36px rgba(255, 158, 42, 0.52);
}
.mm-overlay[data-state="ready"] .mm-label {
  color: #fff0ac;
}
.mm-overlay[data-state="ready"]
  .mm-player:not(.mm-player-arriving)
  .mm-platform {
  animation: mm-platform-success 1.08s cubic-bezier(0.16, 0.84, 0.31, 1) 260ms
    both;
}

.mm-overlay[data-state="ready"]
  .mm-player:not(.mm-player-arriving)
  .mm-character {
  animation: mm-character-success 920ms cubic-bezier(0.16, 0.84, 0.31, 1) 320ms
    both;
}

.mm-overlay[data-state="ready"] .mm-player .mm-name {
  border-color: rgba(255, 221, 103, 0.52);
  color: #fff2b2;
  background: rgba(24, 14, 2, 0.88);
  box-shadow:
    inset 0 0 10px rgba(255, 218, 92, 0.08),
    0 0 12px rgba(255, 187, 50, 0.18);
}
.mm-overlay[data-state="ready"] .mm-particles i {
  background: linear-gradient(180deg, transparent, #fff2aa 55%, #ffc640);
  box-shadow:
    0 0 8px rgba(255, 239, 155, 0.94),
    0 0 22px rgba(255, 171, 45, 0.6);
}

@keyframes mm-gradient-drift-primary {
  0% {
    background-position: -4% 84%, 52% -12%, 110% 76%, center;
    transform: translate3d(-1.5%, 0, 0) scale(1.02);
  }
  50% {
    background-position: 18% 56%, 38% 20%, 82% 46%, center;
    transform: translate3d(1%, -1.5%, 0) scale(1.07);
  }
  100% {
    background-position: 34% 24%, 72% 42%, 62% 14%, center;
    transform: translate3d(-0.5%, 1%, 0) scale(1.04);
  }
}

@keyframes mm-gradient-drift-secondary {
  0% {
    background-position: 8% 10%, 92% 16%, -40% 50%;
    transform: translate3d(-1%, 1%, 0) scale(1);
  }
  100% {
    background-position: 74% 72%, 24% 64%, 140% 50%;
    transform: translate3d(1.5%, -1%, 0) scale(1.08);
  }
}

@keyframes mm-particle-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45);
  }
  12% {
    opacity: var(--mm-particle-opacity);
  }
  80% {
    opacity: var(--mm-particle-opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--mm-particle-drift), -125vh, 0) scale(1.35);
  }
}

@keyframes mm-speed-lines-rise {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -100vh;
  }
}

@keyframes mm-count-pop {
  0% {
    transform: scale(0.6);
    filter: brightness(2.2);
  }
  58% {
    transform: scale(1.22);
    filter: brightness(1.45);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes mm-stage-breathe {
  0%,
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes mm-platform-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes mm-search-pixel {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  20%, 40% { opacity: 1; transform: translateY(-4px); }
}

@keyframes mm-success-wave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.08);
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(1.15);
  }
}


@keyframes mm-gold-gradient-burst {
  0% {
    opacity: 0;
    transform: scale(0.62);
  }
  24% {
    opacity: 0.92;
    transform: scale(0.92);
  }
  52% {
    opacity: 0.48;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.14;
    transform: scale(1.18);
  }
}


@keyframes mm-platform-success {
  0%,
  100% {
    filter:
      brightness(1)
      drop-shadow(0 14px 13px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 12px var(--mm-team-glow));
  }
  48% {
    filter:
      brightness(1.32)
      drop-shadow(0 14px 13px rgba(0, 0, 0, 0.4))
      drop-shadow(0 0 25px rgba(255, 211, 76, 0.86));
  }
}


@keyframes mm-character-success {
  0%,
  100% {
    filter:
      brightness(1)
      drop-shadow(0 7px 0 rgba(0, 0, 0, 0.24))
      drop-shadow(0 16px 18px rgba(0, 0, 0, 0.48));
  }
  48% {
    filter:
      brightness(1.24)
      drop-shadow(0 7px 0 rgba(0, 0, 0, 0.2))
      drop-shadow(0 0 24px rgba(255, 219, 90, 0.68));
  }
}


@keyframes mm-arrival-beam {
  0% {
    opacity: 0;
    transform: translate(-50%, 24px) scaleY(0.05);
  }
  18%,
  58% {
    opacity: 1;
    transform: translate(-50%, 0) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scaleY(0.22);
  }
}

@keyframes mm-arrival-shard {
  0% {
    opacity: 0;
    translate: 0 22px;
    scale: 0.55;
  }
  26% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -62px;
    scale: 0.82;
  }
}

@keyframes mm-character-materialize {
  0%,
  16% {
    opacity: 0;
    transform: translateY(9px) scale(0.9);
    filter: brightness(2.2) saturate(0.15) drop-shadow(0 0 18px #e8fdff);
  }
  52% {
    opacity: 0.78;
    transform: translateY(-4px) scale(1.05);
    filter: brightness(1.62) saturate(0.88) drop-shadow(0 0 24px var(--mm-team-color));
  }
  76% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 7px 0 rgba(0, 0, 0, 0.24))
      drop-shadow(0 16px 18px rgba(0, 0, 0, 0.48));
  }
}

@keyframes mm-player-copy-in {
  from {
    opacity: 0;
    translate: 0 7px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes mm-platform-lock-in {
  0% {
    opacity: 0.25;
    transform: translateY(18px) scale(0.76);
    filter: brightness(1.8) drop-shadow(0 0 30px var(--mm-team-color));
  }
  62% {
    opacity: 1;
    transform: translateY(-5px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 14px 13px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 12px var(--mm-team-glow));
  }
}

@media (max-width: 900px) {
  .mm-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px 18px;
    width: calc(100% - 32px);
    padding-top: 20px;
  }

  .mm-heading {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .mm-progress {
    grid-column: 3;
    grid-row: 1;
  }

  .mm-brand-logo {
    width: clamp(72px, 17vw, 110px);
  }

  .mm-players-grid[data-slots="4"],
  .mm-players-grid[data-slots="6"] {
    grid-template-columns: repeat(3, minmax(112px, 168px));
    gap: 16px 26px;
  }

  .mm-player {
    height: clamp(146px, 24vh, 220px);
  }

  .mm-footer {
    width: calc(100% - 32px);
  }

}

@media (max-width: 620px) {
  .mm-header {
    gap: 9px 12px;
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .mm-heading {
    font-size: clamp(14px, 4.8vw, 19px);
  }

  .mm-heading::after {
    margin-top: 9px;
  }

  .mm-progress {
    gap: 7px;
  }

  .mm-count {
    font-size: clamp(21px, 7vw, 31px);
  }

  .mm-label {
    display: none;
  }

  .mm-lobby {
    padding: 0 10px;
  }

  .mm-players-grid,
  .mm-players-grid[data-slots="2"],
  .mm-players-grid[data-slots="4"],
  .mm-players-grid[data-slots="6"] {
    grid-template-columns: repeat(2, minmax(104px, 145px));
    gap: 8px 18px;
    width: 100%;
  }

  .mm-player,
  .mm-players-grid[data-slots="2"] .mm-player {
    height: clamp(174px, 27vh, 224px);
  }

  .mm-player-visual,
  .mm-players-grid[data-slots="2"] .mm-player-visual,
  .mm-players-grid[data-slots="4"] .mm-player-visual,
  .mm-players-grid[data-slots="6"] .mm-player-visual {
    padding-bottom: 18px;
  }

  .mm-character,
  .mm-players-grid[data-slots="2"] .mm-character {
    width: clamp(52px, 15vw, 72px);
    height: clamp(62px, 12vh, 92px);
  }

  .mm-platform {
    width: 100%;
  }

  .mm-players-grid[data-slots="2"] .mm-platform {
    width: 106%;
  }

  .mm-name {
    bottom: -1px;
    padding: 3px 5px 4px;
    font-size: 6px;
  }

  .mm-arrival-fx,
  .mm-players-grid[data-slots="2"] .mm-arrival-fx {
    bottom: 76px;
    height: 148px;
  }

  .mm-slot-beacon {
    width: 56px;
    height: 58px;
    margin-bottom: 5px;
  }

  .mm-arrival-fx::before,
  .mm-arrival-fx > span {
    height: 144px;
  }

  .mm-footer {
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: calc(100% - 24px);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  #mm-tips {
    grid-column: 1;
    width: auto;
    min-height: 32px;
    padding: 0 8px;
  }

  .mm-tip-label {
    display: none;
  }

  #tips-text {
    font-size: 9px;
    text-align: center;
  }

  .mm-actions {
    grid-column: 2;
  }

  .mm-btn {
    min-width: 96px;
    padding: 10px 11px;
    font-size: 7px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .mm-header {
    grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
    width: calc(100% - 36px);
    padding-top: 12px;
  }

  .mm-heading {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(13px, 2vw, 20px);
  }

  .mm-progress {
    grid-column: 3;
    grid-row: 1;
  }

  .mm-player,
  .mm-players-grid[data-slots="2"] .mm-player {
    height: clamp(132px, 47vh, 220px);
  }

  .mm-player-visual,
  .mm-players-grid[data-slots="2"] .mm-player-visual,
  .mm-players-grid[data-slots="4"] .mm-player-visual,
  .mm-players-grid[data-slots="6"] .mm-player-visual {
    padding-bottom: 16px;
  }

  .mm-character,
  .mm-players-grid[data-slots="2"] .mm-character {
    width: clamp(58px, 7vw, 88px);
    height: clamp(66px, 20vh, 112px);
  }

  .mm-name {
    bottom: -2px;
  }

  .mm-arrival-fx,
  .mm-players-grid[data-slots="2"] .mm-arrival-fx {
    bottom: 88px;
  }

  .mm-footer {
    width: calc(100% - 36px);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar,
  #bottom-bar,
  #lobby-area,
  .lobby-party-actions,
  .lobby-quick-actions,
  .bb-chat-lobby-wrap,
  .mm-overlay,
  .mm-bg,
  .mm-header,
  .mm-players-grid,
  .mm-footer {
    transition-duration: 1ms !important;
  }

  .mm-bg::before,
  .mm-bg::after,
  .mm-overlay[data-state="ready"] .mm-bg,
  .mm-overlay[data-state="ready"] .mm-success-burst,
  .mm-overlay[data-state="ready"] .mm-heading,
  .mm-overlay[data-state="ready"] .mm-progress,
  .mm-particles i,
  .mm-speed-lines,
  .mm-lobby::before,
  .mm-player-visual,
  .mm-slot-beacon i,
  .mm-player-arriving .mm-arrival-fx,
  .mm-player-arriving .mm-arrival-fx > i,
  .mm-player-arriving .mm-character,
  .mm-player-arriving .mm-name,
  .mm-player-arriving .mm-platform,
  .mm-overlay[data-state="ready"] .mm-lobby::after,
  .mm-overlay[data-state="ready"]
    .mm-player:not(.mm-player-arriving)
    .mm-platform,
  .mm-overlay[data-state="ready"]
    .mm-player:not(.mm-player-arriving)
    .mm-character,
  .mm-overlay[data-state="ready"]
    .mm-player:not(.mm-player-arriving)
    .mm-name,
  #mm-found.is-updating {
    animation: none !important;
  }

  .mm-particles,
  .mm-speed-lines,
  .mm-success-burst,
  .mm-arrival-fx {
    display: none;
  }
}

@media (max-width: 768px) {
  .lobby-quick-actions {
    top: 56px;
    right: 10px;
    gap: 14px;
  }

  .shop-button-icon {
    width: 22px;
    height: 22px;
  }

  .party-button.shop-button {
    gap: 5px;
    padding-right: 9px;
    padding-left: 5px;
  }
}

@media (max-width: 480px) {
  .lobby-quick-actions {
    right: 8px;
    gap: 10px;
  }

  .shop-button-icon {
    width: 20px;
    height: 20px;
  }
}

@media (hover: none) and (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .lobby-quick-actions {
    top: 50px;
    right: 8px;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-bg::before,
  .mm-bg::after {
    animation: none;
  }

  .party-button.shop-button {
    animation: none;
    background-position: 48% 50%;
  }

  .party-button.shop-button::after {
    animation: none;
    display: none;
  }
}

/* Admin actions are siblings of the map choice, avoiding nested click targets. */
.map-choice { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 8px; }
.map-choice .map-select-card { width: 100%; flex: 1; }
.map-choice-edit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-end; padding: 9px 13px; border: 1px solid #718aa6; border-radius: 0; background: #18293e; color: #d9edff; font: 600 12px/1.3 system-ui, sans-serif; text-decoration: none; transition: background .15s, border-color .15s; }
.map-choice-edit svg { width: 16px; height: 16px; }
.map-choice-edit:hover { background: #29435e; border-color: #aed5ff; }
.map-choice-edit:focus-visible { outline: 2px solid #baf36b; outline-offset: 3px; }

/* Shared party seats and full-card movement. */
.character-slot[data-is-current-user="true"] {
  outline: 2px solid #83f9ff;
  outline-offset: 5px;
  border-radius: 0;
  box-shadow: 0 0 20px #50dfff55;
}
.character-slot[data-is-current-user="true"] .username {
  color: #d5ffff;
  background: radial-gradient(ellipse at center, #48bccc35 0%, #48bccc12 45%, transparent 72%);
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 2px #102d45, 0 0 10px #58ddeb66;
  overflow: visible;
}
.character-slot[data-is-current-user="true"]::after {
  content: 'YOU';
  position: absolute;
  inset: auto;
  filter: none;
  z-index: 5;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: #a4faff;
  color: #10243b;
  padding: 4px 6px 3px;
  font: 7px/1.2 var(--bb-font-display);
  border: 2px solid var(--bb-ink);
  opacity: 1;
  text-shadow: none;
  box-shadow: 0 2px 0 #0008;
}
.character-slot[data-slot-movable="true"] { cursor: grab; touch-action: none; user-select: none; }
.character-slot[data-slot-movable="true"]:focus-visible { outline: 2px solid #ffdd69; outline-offset: 8px; }
.party-dragging { cursor: grabbing; user-select: none; }

.platform.party-drag-platform { z-index: 10001; }
.character-slot.party-drag-source { z-index: 10000; cursor: grabbing; will-change: translate; }

.party-drop-target::before { opacity: 1; background: radial-gradient(ellipse at 50% 85%, #ffe88a66, #ffe88a18 42%, transparent 70%); }
.party-slot-announcement { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.party-move-trail { position: fixed; inset: 0; pointer-events: none; z-index: 999; }
.party-move-beam { position: absolute; height: 36px; margin-top: -18px; transform-origin: 0 50%; background: radial-gradient(ellipse, #dcffffb3 0%, #7be5ff55 30%, #7be5ff00 72%); filter: blur(5px); }
.party-move-pixel { position: absolute; background: #c9ffff; box-shadow: 0 0 7px #71dfff88; }
@keyframes party-seat-wiggle { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
@media (prefers-reduced-motion: reduce) {
  .party-dragging .character-sprite, .party-drag-source .character-sprite { animation: none !important; }
}

/* Keep a clearly visible, muted copy of the entire card in its original seat. */
.character-slot.party-seat-silhouette {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: .58;
  filter: grayscale(1) brightness(1.2) drop-shadow(0 0 5px #95e9ff55);
  image-rendering: pixelated;
  user-select: none;
}

.party-seat-silhouette, .party-seat-silhouette * { animation: none !important; transition: none !important; }

.mode-select-art { position: relative; width: 100%; isolation: isolate; }
.character-select-popup .mode-select-card.is-trophy-locked {
  opacity: 1;
  filter: none;
}
.character-select-popup .mode-select-card.is-trophy-locked .mode-select-art > img {
  filter: grayscale(.9) brightness(.28);
}
.character-select-popup .mode-select-card.is-trophy-locked .map-select-name,
.character-select-popup .mode-select-card.is-trophy-locked .mode-select-subtitle {
  color: #8792a6;
}
.mode-select-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  background: url("/assets/locked-chains.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px #000);
  pointer-events: none;
}
.character-select-popup .mode-select-grid .mode-select-lock img {
  width: 44px; height: 44px; margin: 0; object-fit: contain;
  filter: brightness(1.5) drop-shadow(0 2px 0 var(--bb-ink));
}
.character-select-popup .mode-select-grid .mode-select-meta img {
  width: 22px; height: 22px; margin: 0; object-fit: contain; filter: none;
}

.profile-metric-card[data-profile-metric="coins"],
.profile-metric-card[data-profile-metric="gems"] { grid-template-rows: 1fr; align-items: center; }
.profile-metric-card[data-profile-metric="coins"] strong,
.profile-metric-card[data-profile-metric="gems"] strong { grid-row: 1; align-self: center; }

.character-select-popup .mode-select-art > img {
  border: 4px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.bb-chat-root {
  position: fixed;
  z-index: 10012;
  font-family: "Lato", sans-serif;
  color: #eff8ff;
}

.bb-chat-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  min-width: 56px;
  padding: 6px 8px 6px;
  border-radius: 0;
  border: 0;
  background: rgba(28, 72, 121, 0.96);
  color: #fff;
  box-shadow:
    0px 5px black,
    0px -5px black,
    5px 0px black,
    -5px 0px black,
    0px 10px #00000038,
    5px 5px #00000038,
    -5px 5px #00000038,
    inset 0px 5px #ffffff36;
  cursor: pointer;
  flex-direction: column;
}

.bb-chat-launcher {
  pointer-events: auto;
}

.bb-chat-launcher-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}

.bb-chat-launcher-label {
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: "Press Start 2P", system-ui;
}

.bb-chat-button:hover {
  background: rgba(34, 104, 170, 0.98);
}

.bb-chat-is-suspended .bb-chat-send,
.bb-chat-is-suspended .bb-chat-textarea,
.bb-chat-is-suspended .bb-chat-hover-btn,
.bb-chat-is-suspended .bb-chat-inline-reaction {
  opacity: 0.6;
}

.bb-chat-is-suspended .bb-chat-textarea {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
}

.bb-chat-button .bb-chat-badge,
.bb-chat-launcher .bb-chat-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: linear-gradient(180deg, #fb7185, #e11d48);
  color: #fff;
  font-size: 9px;
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.28);
}

.bb-chat-reaction-badge {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 0;
  background: rgba(148, 27, 50, 0.96);
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 5px 0 rgba(87, 17, 31, 0.95);
  pointer-events: none;
}

.bb-chat-reaction-badge img {
  display: block;
}

.bb-chat-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--bb-ink);
  background: var(--bb-popup-bg);
  box-shadow: none;
}

.bb-chat-shell.is-idle {
  opacity: 0.32;
}

.bb-chat-shell.is-muted {
  opacity: 0;
  pointer-events: none;
}

.bb-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--bb-ink);
  background: var(--bb-surface-raised);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.bb-chat-title {
  margin: 0;
  font-size: 11px;
  color: #dff3ff;
  letter-spacing: 0.4px;
  font-family: "Press Start 2P", system-ui;
}

.bb-chat-subtitle {
  margin-top: 6px;
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  color: #8fb8d8;
  line-height: 1.35;
}

.bb-chat-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bb-chat-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  min-height: 25px;
  padding: 0 8px;
  border-radius: var(--bb-radius-control);
  border: 2px solid var(--bb-ink);
  background: rgba(14, 24, 44, 0.88);
  color: #eff8ff;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 3px 0 var(--bb-ink);
  transition:
    transform var(--bb-motion-fast) var(--bb-ease),
    filter var(--bb-motion-fast) ease;
}

.bb-chat-mini-btn:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.bb-chat-mini-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: none;
}

.bb-chat-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 2px solid var(--bb-ink);
  border-radius: 0;
  background: linear-gradient(180deg, #d95a52, var(--bb-red-deep));
  color: #fff;
  font-size: 10px;
  text-transform: none;
  font-family: "Press Start 2P", system-ui;
  box-shadow:
    0 3px 0 var(--bb-ink),
    inset 0 2px rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.bb-chat-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bb-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 12px 12px;
  overflow: auto;
  align-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 211, 255, 0.72) transparent;
}

.bb-chat-messages::-webkit-scrollbar {
  width: 9px;
}

.bb-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.bb-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: rgba(126, 211, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.bb-chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(147, 224, 255, 0.92);
}

.bb-chat-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  font-size: 9px;
  color: #7dd3fc;
  letter-spacing: 0.4px;
}

.bb-chat-divider::before,
.bb-chat-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(125, 211, 252, 0.65),
    transparent
  );
}

.bb-chat-divider span {
  padding: 0 10px;
  font-family: "Press Start 2P", system-ui;
}

.bb-chat-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.bb-chat-message.is-self {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.bb-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--bb-radius-media);
  overflow: hidden;
  border: 2px solid rgba(87, 132, 184, 0.62);
  background: rgba(14, 24, 44, 0.8);
  box-shadow: 0 2px 0 var(--bb-ink);
}

.bb-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-chat-bubble {
  position: relative;
  display: grid;
  width: fit-content;
  min-width: min(210px, 100%);
  max-width: 100%;
  gap: 4px;
  padding: 7px 9px 6px;
  border-radius: var(--bb-radius-media);
  border: 2px solid rgba(56, 84, 120, 0.9);
  background: var(--bb-card-gradient);
  box-shadow:
    0 3px 0 var(--bb-ink),
    inset 0 2px rgba(255, 255, 255, 0.05);
}

.bb-chat-message.is-self .bb-chat-bubble {
  justify-self: end;
  background: linear-gradient(180deg, #19345a, #10243f);
  border-color: rgba(78, 130, 187, 0.92);
}

.bb-chat-message-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #9bd1ff;
}

.bb-chat-author {
  color: #f6fbff;
  font-family: "Press Start 2P", system-ui;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.bb-chat-time {
  color: #7fb7df;
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.1px;
}

.bb-chat-reply-preview {
  padding: 7px 8px;
  border-radius: 0;
  border: 1px solid rgba(73, 119, 171, 0.52);
  border-left-width: 3px;
  background: rgba(12, 20, 34, 0.72);
  font-size: 8px;
  color: #b8ddf5;
  line-height: 1.45;
}

.bb-chat-reply-preview.is-link {
  cursor: pointer;
}

.bb-chat-reply-preview.is-link:hover {
  border-left-color: rgba(147, 216, 255, 0.95);
}

.bb-chat-body-text {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #eff8ff;
  white-space: pre-wrap;
  word-break: break-word;
}

.bb-chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 18px;
  margin-top: 2px;
}

/* Floating toolbar on the bubble's top edge; never over the reaction chips. */
.bb-chat-hover-actions {
  position: absolute;
  top: -15px;
  right: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  padding: 2px;
  border: 2px solid var(--bb-ink);
  background: rgba(10, 20, 34, 0.98);
  box-shadow: 0 3px 0 var(--bb-ink);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.bb-chat-message.is-self .bb-chat-hover-actions {
  right: auto;
  left: 8px;
}

.bb-chat-message:hover .bb-chat-hover-actions,
.bb-chat-message:focus-within .bb-chat-hover-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.bb-chat-hover-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.bb-chat-inline-reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-right: auto;
}

.bb-chat-inline-reaction {
  position: relative;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 0;
  border: 1px solid rgba(90, 137, 190, 0.62);
  background: rgba(18, 38, 60, 0.9);
  color: #eff8ff;
  font-size: 9px;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--bb-ink);
}

.bb-chat-inline-reaction.is-readonly {
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.bb-chat-inline-reaction:not(.is-readonly):hover,
.bb-chat-inline-reaction:not(.is-readonly):focus-visible {
  border-color: rgba(170, 227, 255, 0.95);
  background: rgba(34, 82, 131, 0.95);
}

/* Compact "who reacted" tag: one line, pixel border, anchored to the chip. */
.bb-chat-inline-reaction[data-tooltip]:hover::after,
.bb-chat-inline-reaction[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: -2px;
  bottom: calc(100% + 6px);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 6px;
  border: 2px solid var(--bb-ink);
  background: #0d1a2b;
  color: #eaf6ff;
  font: 700 11px/1.2 "Lato", sans-serif;
  box-shadow: 0 3px 0 var(--bb-ink);
  z-index: 4;
  pointer-events: none;
}

.bb-chat-inline-reaction[data-tooltip]:hover::before,
.bb-chat-inline-reaction[data-tooltip]:focus-visible::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: calc(100% + 1px);
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-color: var(--bb-ink);
  z-index: 5;
  pointer-events: none;
}

.bb-chat-inline-reaction.is-active {
  border-color: rgba(125, 211, 252, 0.95);
  background: rgba(33, 76, 122, 0.95);
}

.bb-chat-inline-reaction.is-pop {
  animation: bb-reaction-pop 260ms ease;
}

@keyframes bb-reaction-pop {
  0% {
    transform: scale(0.76);
    opacity: 0.75;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.bb-chat-hover-btn {
  min-height: 22px;
  min-width: 24px;
  padding: 0 5px;
  border-radius: var(--bb-radius-tag);
  border: 1px solid rgba(90, 137, 190, 0.58);
  background: rgba(9, 18, 30, 0.88);
  color: #eff8ff;
  font-size: 9px;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--bb-ink);
}

.bb-chat-hover-btn:hover,
.bb-chat-hover-btn:focus-visible {
  border-color: rgba(170, 227, 255, 0.95);
  background: rgba(34, 82, 131, 0.95);
}

.bb-chat-hover-btn.is-active {
  border-color: rgba(125, 211, 252, 0.9);
  background: rgba(28, 68, 111, 0.96);
}

.bb-chat-view-count {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #86a8c4;
  font-size: 9px;
  cursor: pointer;
}

.bb-chat-view-count::before {
  content: "";
  width: 22px;
  height: 12px;
  flex: none;
  background-image: url("/assets/ui/pixel-check.webp"), url("/assets/ui/pixel-check.webp");
  background-position: 0 0, 8px 0;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  image-rendering: pixelated;
}

.bb-chat-view-count:hover,
.bb-chat-view-count:focus-visible {
  color: #ffffff;
}

.bb-chat-view-count.is-read {
  color: #5bb2ff;
}

.bb-chat-message-target .bb-chat-bubble {
  box-shadow:
    0 0 0 2px rgba(125, 211, 252, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.bb-chat-viewers-popup {
  position: fixed;
  inset: 0;
  z-index: 10030;
}

.bb-chat-viewers-popup.hidden {
  display: none;
}

.bb-chat-viewers-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}

.bb-chat-viewers-card {
  position: absolute;
  width: min(280px, calc(100vw - 20px));
  max-height: min(240px, 46vh);
  overflow: auto;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.bb-chat-viewers-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bb-chat-viewers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(126, 211, 255, 0.16);
}

.bb-chat-viewers-title {
  font-size: 10px;
  color: #dff3ff;
  font-family: "Press Start 2P", system-ui;
}

.bb-chat-viewers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.bb-chat-viewers-empty {
  font-size: 10px;
  color: #9dbdd8;
  padding: 8px 4px;
}

.bb-chat-viewer-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--bb-radius-card);
  background: rgba(12, 20, 34, 0.74);
  border: 1px solid rgba(126, 211, 255, 0.12);
}

.bb-chat-viewer-avatar {
  width: 28px;
  height: 28px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 211, 255, 0.35);
}

.bb-chat-viewer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-chat-viewer-name {
  font-size: 11px;
  color: #e6f5ff;
}

.bb-chat-viewer-time {
  font-size: 9px;
  color: #8fb8d8;
}

.bb-chat-composer {
  position: relative;
  padding: 8px 10px 10px;
  border-top: var(--bb-popup-divider);
  display: grid;
  gap: 6px;
  background: var(--bb-surface-2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.bb-chat-reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0;
  background: rgba(15, 30, 48, 0.98);
  border: 1px solid rgba(125, 189, 255, 0.22);
  font-size: 10px;
  color: #cbeaff;
}

.bb-chat-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.bb-chat-heading { flex: 1 1 0; min-width: 0; }
.bb-chat-header-status {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 18px;
  margin-top: 4px;
  min-width: 0;
}
.bb-chat-header-status .bb-chat-subtitle { margin: 6px 0 0; flex: 0 0 auto; }
.bb-chat-typing {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  height: 18px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.bb-chat-typing.is-idle { display: none; }
.bb-chat-game-panel .bb-chat-header-status { display: none; }
.bb-chat-typing-icons { display: none; }
.bb-chat-typing-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #53718c;
  background: #102036;
  box-shadow: 0 2px 0 #030a13;
}
.bb-chat-typing-icon + .bb-chat-typing-icon { margin-left: -4px; }
.bb-chat-typing-icon img { width: 100%; height: 100%; object-fit: cover; }
.bb-chat-typing-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bb-chat-typing-text {
  font: 11px/1.4 "Lato", sans-serif;
  color: #9bb8ce;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  height: 14px;
}
/* Same stepped three-pixel rhythm as matchmaking's searching slots. */
.bb-chat-typing-dots i {
  width: 4px;
  height: 4px;
  background: #b9d7e8;
  box-shadow: 0 2px 0 #020710;
  opacity: .35;
  animation: bb-chat-typing-pixel 1.2s steps(1, end) infinite;
}
.bb-chat-typing-dots i:nth-child(2) { animation-delay: .2s; }
.bb-chat-typing-dots i:nth-child(3) { animation-delay: .4s; }
.bb-chat-typing.is-idle .bb-chat-typing-dots i { animation-play-state: paused; }
@keyframes bb-chat-typing-pixel {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  20%, 40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-chat-typing { transition: none; }
  .bb-chat-typing-dots i { animation: none; opacity: .7; }
}

.bb-chat-composer .bb-chat-textarea {
  width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 96px;
  resize: none;
  box-sizing: border-box;
  border-radius: 0;
  border: 2px solid var(--bb-border);
  background: var(--bb-bg-deep);
  color: var(--bb-text);
  padding: 7px 10px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  overflow-y: auto;
  box-shadow: var(--bb-inset-shadow);
}

.bb-chat-composer .bb-chat-textarea::placeholder {
  color: var(--bb-text-muted);
  opacity: 1;
}

.bb-chat-composer .bb-chat-textarea:focus,
.bb-chat-composer .bb-chat-textarea:focus-visible {
  outline: none;
  border-color: var(--bb-field-focus);
  background: var(--bb-bg-deep);
  box-shadow: var(--bb-field-focus-shadow);
}

/* Match the field's visible height; global button shadows add 5px above
   and below the box, so these compact controls use their own shadows. */
.bb-chat-shell .bb-chat-composer .bb-chat-send {
  --bb-control-shadow: 0 3px 0 var(--bb-ink), inset 0 3px rgba(255, 255, 255, 0.16);
  --bb-control-shadow-pressed: 0 3px 0 var(--bb-ink), inset 0 3px rgba(0, 0, 0, 0.24);
  min-width: 82px;
  min-height: 38px;
  border-radius: 0;
  border: 2px solid var(--bb-ink);
  background: var(--bb-primary-gradient);
  color: #fff;
  cursor: pointer;
  font-family: "Press Start 2P", system-ui;
  font-size: 9px;
  letter-spacing: 0.2px;
  box-shadow: var(--bb-control-shadow);
}

.bb-chat-composer .bb-chat-send:hover {
  filter: brightness(1.12) saturate(1.06);
}

.bb-chat-composer .bb-chat-send:active {
  transform: none;
  box-shadow: var(--bb-control-shadow-pressed);
}

.bb-chat-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.bb-chat-drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.bb-chat-lobby-wrap {
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  pointer-events: none;
}

.bb-chat-lobby-launcher {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 58px;
  min-height: 56px;
}

.bb-chat-lobby-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(390px, calc(100vw - 18px));
  height: 100dvh;
  border-radius: 0;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.22, 0.9, 0.32, 1);
  pointer-events: auto;
  overflow: hidden;
}

.bb-chat-lobby-panel.is-open {
  transform: translateX(0);
}

.bb-chat-lobby-panel .bb-chat-body {
  flex: 1 1 auto;
  min-height: 0;
}

.bb-chat-lobby-panel .bb-chat-messages {
  flex: 1 1 auto;
  max-height: none;
}

.bb-lobby-chat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  top: auto;
  width: max-content;
  max-width: min(210px, 32vw);
  box-sizing: border-box;
  padding: 9px 12px;
  border: 2px solid #597793;
  background: #112237;
  border-radius: 0;
  box-shadow: 0 4px 0 #030a13, inset 0 2px #ffffff12;
  color: #f3fbff;
  font: 9px/1.7 "Press Start 2P", monospace;
  text-align: center;
  pointer-events: none;
  z-index: 58;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity 220ms ease, transform 220ms ease;
}

.bb-lobby-chat-bubble-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}

.bb-lobby-chat-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #112237;
  border-right: 2px solid #597793;
  border-bottom: 2px solid #597793;
  transform: translateX(-50%) rotate(45deg);
}

.bb-lobby-chat-bubble.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: bb-lobby-chat-arrive 320ms cubic-bezier(.2,.8,.25,1) both;
}

@keyframes bb-lobby-chat-arrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.86); }
  65% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.025); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-lobby-chat-bubble, .bb-lobby-chat-bubble.is-visible {
    animation: none;
    transition: opacity 100ms ease;
  }
}

.bb-chat-game-wrap {
  top: 72px;
  left: 114px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.bb-chat-game-launcher {
  position: absolute;
  top: 12px;
  left: 122px;
  min-height: 40px;
  min-width: 44px;
  z-index: 10013;
  pointer-events: auto;
}

.bb-chat-game-panel {
  width: 100%;
  height: min(268px, 31vh);
  max-height: min(268px, 31vh);
  border-radius: var(--bb-radius-card);
  opacity: 1;
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
  pointer-events: auto;
}

.bb-chat-game-panel.is-open {
  pointer-events: auto;
}

.bb-chat-game-panel.is-active {
  opacity: 1;
  filter: brightness(1);
}

.bb-chat-game-panel.is-unfocused {
  opacity: 1;
  filter: brightness(0.8);
}

.bb-chat-game-panel.is-auto-hidden {
  opacity: 0;
  pointer-events: none;
}

.bb-chat-game-panel.is-muted {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.bb-chat-game-panel .bb-chat-messages {
  max-height: none;
}

.bb-chat-game-panel .bb-chat-composer {
  padding: 8px;
}

.bb-chat-game-panel .bb-chat-header {
  padding: 8px 8px 8px 12px;
  min-height: 40px;
  gap: 8px;
  border-bottom: var(--bb-popup-divider);
}

.bb-chat-game-panel .bb-chat-textarea {
  height: 32px;
  min-height: 32px;
  max-height: 52px;
  padding: 9px 9px 7px;
  font-family: var(--bb-font-display);
  font-size: 8px;
  line-height: 1.6;
}

.bb-chat-game-panel .bb-chat-composer .bb-chat-send {
  min-width: 58px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 8px;
}

.bb-chat-game-panel .bb-chat-title {
  font-size: 9px;
  line-height: 1.35;
  white-space: nowrap;
}

.bb-chat-game-panel .bb-chat-subtitle {
  display: none;
}

.bb-chat-game-panel .bb-chat-message {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
}

.bb-chat-game-panel .bb-chat-message.is-self {
  grid-template-columns: minmax(0, 1fr) 26px;
}

.bb-chat-game-panel .bb-chat-header-actions {
  gap: 7px;
}

.bb-chat-audience-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(54px, 1fr));
  gap: 0;
  padding: 0;
  border: 2px solid var(--bb-ink);
  background: var(--bb-surface-1);
  box-shadow: 0 2px 0 var(--bb-ink);
}

.bb-chat-audience-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--bb-text-muted);
  cursor: pointer;
  font-family: var(--bb-font-display);
  font-size: 7px;
  line-height: 1;
  transition:
    color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.bb-chat-audience-tab:hover {
  color: var(--bb-text);
  background: var(--bb-surface-3);
}

.bb-chat-audience-tab:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.bb-chat-audience-tab:focus-visible {
  outline: 1px solid #b9e3ff;
  outline-offset: -1px;
}

.bb-chat-audience-tab.is-active {
  --bb-chroma-corner-size: 9px;
  color: var(--bb-text);
  background: var(--bb-chroma-button-corners), var(--bb-primary-gradient);
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.18);
}

.bb-chat-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 0;
  background: var(--bb-red);
  color: #fff;
  font-family: var(--bb-font-display);
  font-size: 6px;
  line-height: 1;
  box-shadow: 0 0 0 1px var(--bb-ink);
}

.bb-chat-tab-count.hidden {
  display: none;
}

.bb-chat-game-panel .bb-chat-body {
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.bb-chat-game-panel .bb-chat-messages {
  gap: 4px;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--bb-panel-bg);
}

.bb-chat-game-empty {
  display: flex;
  flex: 1 1 auto;
  min-height: 70px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--bb-text-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.bb-chat-game-empty-title {
  color: var(--bb-text-soft);
  font-family: var(--bb-font-display);
  font-size: 8px;
}

.bb-chat-game-line {
  display: grid;
  grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  width: 100%;
  min-height: 30px;
  padding: 7px 9px 6px;
  border: 2px solid var(--bb-border-soft);
  border-left: 4px solid var(--bb-blue);
  border-radius: 0;
  background: var(--bb-card-bg);
  box-shadow: 0 2px 0 var(--bb-ink);
  font-size: 8px;
  line-height: 1.45;
  color: var(--bb-text);
}

.bb-chat-game-line.is-team-blue {
  border-left-color: var(--bb-blue);
}

.bb-chat-game-line.is-team-red {
  border-left-color: var(--bb-red);
}

.bb-chat-game-line-name {
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  line-height: 1.55;
  color: #c6e7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-chat-game-line.is-team-red .bb-chat-game-line-name {
  color: #ff8f9a;
}

.bb-chat-game-line.is-team-blue .bb-chat-game-line-name {
  color: #83c3ff;
}

.bb-chat-game-line-body {
  min-width: 0;
  font-family: "Press Start 2P", system-ui;
  font-size: 7px;
  line-height: 1.55;
  color: #eff8ff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bb-chat-game-line.is-team-red .bb-chat-game-line-body {
  color: #ffd6dc;
}

.bb-chat-game-line.is-team-blue .bb-chat-game-line-body {
  color: #e7f4ff;
}

.bb-chat-game-line.is-self .bb-chat-game-line-name {
  color: #fff;
  text-shadow: 0 1px #163c62;
}

.bb-chat-game-panel .bb-chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 0;
}

.bb-chat-game-panel .bb-chat-bubble {
  padding: 7px 8px 6px;
  gap: 4px;
}

.bb-chat-game-panel .bb-chat-message-header {
  gap: 5px;
  font-size: 8px;
}

.bb-chat-game-panel .bb-chat-author {
  font-size: 6px;
}

.bb-chat-game-panel .bb-chat-time {
  font-size: 6px;
}

.bb-chat-game-panel .bb-chat-body-text {
  font-size: 11px;
  line-height: 1.28;
}

.bb-chat-game-panel .bb-chat-hover-btn,
.bb-chat-game-panel .bb-chat-inline-reaction {
  font-size: 8px;
}

.bb-chat-game-panel .bb-chat-reply-preview,
.bb-chat-game-panel .bb-chat-view-count {
  font-size: 7px;
}

@media (max-width: 768px) {
  .bb-chat-lobby-panel {
    width: min(360px, calc(100vw - 12px));
  }

  .bb-chat-game-wrap {
    top: 64px;
    left: 110px;
    width: min(320px, calc(100vw - 20px));
  }

  .bb-chat-game-launcher {
    top: 10px;
    left: 114px;
    min-height: 38px;
    min-width: 42px;
  }
}

@media (max-width: 480px) {
  .bb-chat-lobby-launcher {
    right: 8px;
  }

  .bb-chat-lobby-panel {
    width: min(100vw, 100vw);
  }

  .bb-chat-lobby-panel .bb-chat-textarea {
    font-size: 16px;
  }

  .bb-lobby-chat-bubble {
    max-width: min(160px, 36vw);
    padding: 7px 9px;
    font-size: 8px;
  }

  .bb-chat-game-wrap {
    top: 58px;
    left: 80px;
    width: min(300px, calc(100vw - 16px));
  }

  .bb-chat-game-launcher {
    top: 8px;
    left: 90px;
    min-height: 36px;
    min-width: 40px;
  }
}

/* Keep the viewers dialog controls proportional to its compact header. */
.bb-chat-viewers-head .bb-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  padding: 0;
  font: 20px/1 system-ui, sans-serif;
}

.bb-chat-close:focus-visible {
  outline: 2px solid #b6eeff;
  outline-offset: 3px;
}

.bb-chat-viewers-title {
  min-width: 0;
  line-height: 1.5;
}

/* Count markers (chat, friends) share the trophy road's claim badge style. */
.bb-chat-launcher .bb-chat-badge,
.bb-chat-button .bb-chat-badge,
.bb-chat-tab-count,
.bb-friends-tab-count,
.bb-friends-unread {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border: 0;
  border-radius: 0; /* square, like the trophy badge renders in-game */
  background: linear-gradient(135deg, #f25555, #c72f2f);
  color: #fff;
  font: 9px/1 "Press Start 2P", system-ui;
  box-shadow: 0 0 0 2px rgba(9, 15, 30, 0.96);
}

/* Reaction notice: the pixel heart in a small red tile (chat + friends). */
.bb-chat-reaction-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 2px;
  border: 1px solid #ffc1bd;
  border-radius: 0;
  background: #b93446;
  box-shadow: 0 2px 0 #450f1c;
}
.bb-chat-reaction-badge img {
  display: block;
  image-rendering: pixelated;
}
.bb-chat-badge.hidden, .bb-chat-tab-count.hidden, .bb-chat-reaction-badge.hidden { display: none; }

/* Override the game's selection lock only for readable chat content. */
.bb-chat-messages, .bb-chat-messages *,
.bb-chat-reply-banner, .bb-chat-reply-banner *,
.bb-chat-viewers-list, .bb-chat-viewers-list *,
.bb-chat-composer .bb-chat-textarea {
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  user-select: text;
}
.bb-chat-messages button, .bb-chat-messages button * {
  -webkit-user-select: none;
  user-select: none;
}
.bb-chat-composer .bb-chat-textarea {
  max-height: none; /* JS caps the measured height at five lines. */
  overflow-y: auto;
}
.bb-chat-input-row { align-items: end; }

/* The cue sits above the composer, without covering or resizing the message log. */
.bb-chat-composer.has-messages-below::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 44px;
  background: linear-gradient(transparent, rgba(2, 8, 18, .86));
  pointer-events: none;
  z-index: 2;
}
.bb-chat-jump-latest {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 10px);
  z-index: 3;
  min-width: 30px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #81c7e6;
  border-radius: 0;
  background: #15334e;
  color: #ecfaff;
  box-shadow: 0 3px 0 #030a13;
  font: 700 12px/1 "Lato", sans-serif;
  cursor: pointer;
}
.bb-chat-jump-latest[hidden] { display: none; }
.bb-chat-jump-latest:hover { background: #245575; }
.bb-chat-jump-latest:focus-visible { outline: 2px solid #d6f5ff; outline-offset: 2px; }
.bb-chat-messages { overflow-anchor: none; }
.bb-chat-message, .bb-chat-game-line { flex-shrink: 0; }

.bb-chat-profile-link { cursor: pointer; }
.bb-chat-author.bb-chat-profile-link:hover,
.bb-chat-author.bb-chat-profile-link:focus-visible,
.bb-chat-viewer-name.bb-chat-profile-link:hover,
.bb-chat-viewer-name.bb-chat-profile-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bb-chat-profile-link:focus-visible {
  outline: 2px solid #9bddff;
  outline-offset: 3px;
}
.bb-chat-avatar.bb-chat-profile-link:hover,
.bb-chat-viewer-avatar.bb-chat-profile-link:hover { filter: brightness(1.15); }

/* A permanent clear strip above the composer keeps typing off the messages.
   The indicator is positioned in that strip; idle/active never changes layout. */
.bb-chat-lobby-panel .bb-chat-composer { margin-top: 28px; }
.bb-chat-lobby-panel .bb-chat-typing {
  position: absolute;
  left: 12px;
  right: 112px;
  bottom: calc(100% + 5px);
  height: 18px;
  z-index: 3;
}
.bb-chat-game-panel .bb-chat-typing { display: none; }
.bb-chat-lobby-panel .bb-chat-composer.has-messages-below::before {
  bottom: calc(100% + 28px);
}
.bb-chat-lobby-panel .bb-chat-jump-latest { bottom: calc(100% + 1px); }

.bb-chat-system-log {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  color: #93adc3;
  font: 11px/1.5 "Lato", sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  box-shadow: none;
  outline: none;
}
.bb-chat-system-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 0;
  transition: color 120ms ease, background 120ms ease;
}
.bb-chat-system-icon {
  display: inline-flex;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: #6e9fbd;
}
.bb-chat-system-icon svg { width: 100%; height: 100%; }
.bb-chat-system-log[data-kind="join"] .bb-chat-system-icon { color: #79bda3; }
.bb-chat-system-log[data-kind="leave"] .bb-chat-system-icon { color: #bc9494; }
.bb-chat-system-log[data-kind="battle"] .bb-chat-system-icon { color: #d9b779; }
.bb-chat-system-log:hover .bb-chat-system-content,
.bb-chat-system-log:focus-visible .bb-chat-system-content {
  color: #d0e2f0;
  background: #91bfe90b;
}
.bb-chat-system-log:focus-visible .bb-chat-system-content { outline: 1px solid #81b2d0; }
.bb-chat-system-time {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 12px);
  padding: 2px 5px;
  border-radius: 0;
  background: #0a1524;
  white-space: nowrap;
  z-index: 5;
  color: #91adc2;
  font: 9px/1.4 "Lato", sans-serif;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.bb-chat-system-log:hover .bb-chat-system-time,
.bb-chat-system-log:focus-visible .bb-chat-system-time { opacity: 1; }
.bb-chat-system-log { padding: 3px 10px; min-height: 28px; }
.bb-chat-system-log .bb-chat-system-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  image-rendering: pixelated;
}

/* Friends drawer. Shell, header, composer and message bubbles reuse chat.css. */

.bb-pixel {
  display: block;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

/* ---------- launcher ---------- */

.bb-friends-launcher {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 58px;
  min-height: 56px;
  gap: 5px;
}

/* When chat is visible the two launchers sit as a centered pair. */
.bb-friends-launcher.is-paired {
  top: calc(50% + 38px);
}

.bb-chat-lobby-launcher.has-friends-pair {
  top: calc(50% - 38px);
}

.bb-friends-launcher .bb-chat-launcher-label {
  font-size: 6px;
  letter-spacing: 0;
}

/* ---------- panel ---------- */

/* Pixel font for the drawer's own UI; the chat log and composer use the
   shared chat.css styles so both chats look the same. */
.bb-friends-panel,
.bb-friends-panel button,
.bb-friends-panel input {
  font-family: "Press Start 2P", system-ui;
}

.bb-friends-panel {
  display: flex;
  flex-direction: column;
}

.bb-friends-panel .bb-chat-header {
  justify-content: flex-start;
}

.bb-friends-panel .bb-chat-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.bb-friends-panel .bb-chat-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-friends-back {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
}

.bb-friends-back[hidden] {
  display: none;
}

.bb-friends-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--bb-ink);
  background: var(--bb-surface-1);
}

.bb-friends-tabs[hidden] {
  display: none;
}

.bb-friends-tabs button {
  flex: 1 1 0;
  position: relative;
  padding: 9px 2px;
  border: 2px solid var(--bb-ink);
  background: rgba(14, 24, 44, 0.88);
  color: #8fb8d8;
  font-size: 7px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bb-ink);
}

.bb-friends-tabs button:hover {
  color: #dff3ff;
}

.bb-friends-tabs button.is-active {
  background: rgba(28, 72, 121, 0.96);
  color: #fff;
}

/* Look comes from the shared count-marker rule in chat.css; markers inside
   the drawer use a compact size so they stay clear of the panel edges. */
.bb-friends-tab-count,
.bb-friends-unread {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 7px;
  box-shadow: 0 0 0 2px rgba(9, 15, 30, 0.96);
}

.bb-friends-tab-count {
  position: absolute;
  top: -7px;
  right: -5px;
}

.bb-friends-tab-count[hidden] {
  display: none;
}

.bb-friends-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 211, 255, 0.72) transparent;
}

.bb-friends-content[hidden],
.bb-friends-chat[hidden] {
  display: none;
}

.bb-friends-section {
  margin: 14px 0 8px;
  color: #8fb8d8;
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.bb-friends-loading {
  margin: 24px 0;
  color: #8fb8d8;
  font-size: 8px;
  text-align: center;
}

.bb-friends-loading::after {
  content: "...";
  display: inline-block;
  width: 3ch;
  text-align: left;
  animation: bb-friends-dots 1.2s steps(4) infinite;
  overflow: hidden;
  vertical-align: bottom;
}

@keyframes bb-friends-dots {
  from { width: 0; }
  to { width: 4ch; }
}

/* ---------- rows ---------- */

.bb-friends-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 6px;
  border: 2px solid rgba(3, 6, 11, 0.9);
  background: rgba(15, 30, 48, 0.78);
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04);
}

.bb-friends-row:hover {
  background: rgba(22, 42, 66, 0.92);
}

.bb-friends-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.bb-friends-avatar {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: cover;
  border: 2px solid var(--bb-ink);
  background: #0b1626;
  image-rendering: pixelated;
}

.bb-friends-avatar-wrap.bb-chat-profile-link {
  cursor: pointer;
}

.bb-friends-avatar-wrap.bb-chat-profile-link:hover .bb-friends-avatar {
  border-color: #7ed3ff;
}

.bb-friends-avatar-wrap.is-online::after,
.bb-friends-avatar-wrap.is-battle::after,
.bb-friends-avatar-wrap.is-offline::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid #08121e;
}

.bb-friends-avatar-wrap.is-online::after { background: #22c55e; }
.bb-friends-avatar-wrap.is-battle::after { background: #f59e0b; }
.bb-friends-avatar-wrap.is-offline::after { background: #64748b; }

.bb-friends-text {
  flex: 1 1 auto;
  min-width: 0;
}

.bb-friends-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: #eff8ff;
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.bb-friends-name.bb-chat-profile-link {
  cursor: pointer;
}

.bb-friends-name.bb-chat-profile-link:hover {
  color: #7ed3ff;
}

.bb-friends-sub {
  margin-top: 6px;
  color: #8fb8d8;
  font-size: 6px;
  line-height: 1.4;
}

.bb-friends-sub.is-online,
.bb-chat-subtitle.is-online { color: #4ade80; }
.bb-friends-sub.is-battle,
.bb-chat-subtitle.is-battle { color: #fbbf24; }
.bb-friends-sub.is-incoming { color: #7ed3ff; }

.bb-friends-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- buttons ---------- */

.bb-friends-icon-btn,
.bb-friends-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bb-ink);
  background: rgba(14, 24, 44, 0.88);
  color: #eff8ff;
  cursor: pointer;
  box-shadow:
    0 3px 0 var(--bb-ink),
    inset 0 2px rgba(255, 255, 255, 0.12);
  transition: filter 120ms ease, transform 120ms ease;
}

.bb-friends-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
}

.bb-friends-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 7px;
  line-height: 1;
  text-decoration: none;
}

.bb-friends-icon-btn:hover:not(:disabled),
.bb-friends-btn:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.bb-friends-icon-btn:active:not(:disabled),
.bb-friends-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: none;
}

.bb-friends-icon-btn:disabled,
.bb-friends-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.bb-friends-icon-btn.is-chat,
.bb-friends-btn.is-primary {
  background: linear-gradient(180deg, #2f8fd8, #1d5f9e);
}

.bb-friends-icon-btn.is-invite,
.bb-friends-icon-btn.is-accept {
  background: linear-gradient(180deg, #23774a, #165434);
}

.bb-friends-icon-btn.is-danger {
  background: linear-gradient(180deg, #5b1d2a, #3d1019);
}

.bb-friends-unread {
  position: absolute;
  top: -7px;
  right: -7px;
}

/* A friend reacted to one of your messages in this chat. */
.bb-friends-heart {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 15px;
  padding: 0 2px;
  border: 1px solid #ffc1bd;
  border-radius: 0;
  background: #b93446;
  box-shadow: 0 2px 0 #450f1c;
  pointer-events: none;
}

.bb-friends-heart img {
  display: block;
}

/* Sent request: plain amber "Pending" status. */
.bb-friends-sub.is-pending {
  color: #fbbf24;
}

.bb-friends-btn.is-quiet {
  min-height: 30px;
  padding: 0 10px;
  background: rgba(20, 34, 54, 0.95);
  color: #b8d6ee;
}

.bb-friends-btn.is-quiet:hover:not(:disabled) {
  color: #fff;
}

/* ---------- add tab ---------- */

.bb-friends-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  border: 2px dashed rgba(126, 211, 255, 0.35);
  background: rgba(15, 30, 48, 0.72);
}

.bb-friends-code .bb-friends-sub {
  margin-top: 0;
}

.bb-friends-code-value {
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2px;
  user-select: all;
}

.bb-friends-add-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.bb-friends-add-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border: 2px solid var(--bb-ink);
  background: #0b1626;
  color: #eff8ff;
  font-size: 8px;
  outline: none;
  box-shadow: inset 0 2px rgba(0, 0, 0, 0.4);
  -webkit-appearance: none;
  appearance: none;
}

.bb-friends-add-form input::-webkit-search-cancel-button {
  display: none;
}

.bb-friends-add-form input::placeholder {
  color: #5d7a94;
}

.bb-friends-add-form input:focus {
  border-color: #2f8fd8;
}

.bb-friends-add-form .bb-friends-btn {
  min-height: 34px;
}

/* ---------- empty states ---------- */

.bb-friends-empty-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 12px 24px;
  text-align: center;
}

.bb-friends-empty-sprite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

.bb-friends-empty-title {
  color: #dff3ff;
  font-size: 9px;
}

.bb-friends-empty-art p {
  max-width: 260px;
  margin: 0;
  color: #8fb8d8;
  font-size: 7px;
  line-height: 1.9;
}

.bb-friends-float {
  animation: bb-friends-float 1.6s steps(4) infinite alternate;
}

@keyframes bb-friends-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-friends-float,
  .bb-friends-loading::after {
    animation: none;
  }
}

/* ---------- chat ---------- */

.bb-friends-chat {
  flex: 1 1 auto;
  min-height: 0;
}

.bb-friends-chat .bb-chat-messages {
  flex: 1 1 auto;
  max-height: none;
}

.bb-friends-chat .bb-friends-empty-art {
  margin: auto 0;
}

.bb-friends-older {
  align-self: center;
}

/* ---------- profile modal ---------- */

.profile-friend-btn {
  margin-top: 8px;
  font-family: "Press Start 2P", system-ui;
}

.profile-friend-btn[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .bb-friends-launcher {
    right: 8px;
  }

  .bb-friends-add-form input {
    font-size: 16px;
  }
}

/* Invite cooldown: greyed button with a small timer tag. */
.bb-friends-icon-btn.is-cooling:disabled {
  opacity: 0.85;
}

.bb-friends-icon-btn.is-cooling .bb-pixel {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.bb-friends-cooldown {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 3px;
  border: 2px solid var(--bb-ink);
  background: #1d2f45;
  color: #fbbf24;
  font-size: 6px;
  line-height: 1;
  white-space: nowrap;
}

/* Hidden while matchmaking, sliding out like the other lobby side UI. */
.bb-friends-launcher,
.bb-friends-wrap {
  transition:
    transform 420ms cubic-bezier(0.22, 0.9, 0.32, 1),
    opacity 360ms ease,
    filter 540ms ease;
}

body.matchmaking-active .bb-friends-launcher {
  opacity: 0;
  transform: translate(150%, -50%) scale(0.84);
  filter: blur(5px);
  pointer-events: none;
}

body.matchmaking-active .bb-friends-wrap {
  opacity: 0;
  transform: translateX(150%) scale(0.84);
  filter: blur(5px);
  pointer-events: none;
}

body.matchmaking-active .bb-friends-wrap * {
  pointer-events: none;
}

body.matchmaking-exiting .bb-friends-launcher,
body.matchmaking-exiting .bb-friends-wrap {
  transition-duration: 180ms, 120ms, 180ms;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Friend requests get a yellow marker, separate from the red message count. */
.bb-friends-launcher .bb-friends-request-badge {
  position: absolute;
  top: -7px;
  right: auto;
  left: -7px;
}

.bb-friends-launcher .bb-friends-request-badge,
.bb-friends-tab-count.is-request {
  background: linear-gradient(135deg, #fde047, #eab308);
  color: #2a1d02;
}

/* Standalone profile page. Lobby profile layout remains in index.css. */

body.profile-page-body {
  min-height: 100dvh;
  margin: 0;
  color: var(--bb-text);
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(61, 145, 235, 0.2),
      transparent 38%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(106, 67, 189, 0.18),
      transparent 42%
    ),
    var(--bb-bg-deep);
  font-family: var(--bb-font-body);
}

body.profile-page-body .profile-page {
  --profile-page-header-height: 68px;
  width: min(1120px, calc(100% - 32px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 0 48px;
}

body.profile-page-body .profile-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: min(1120px, calc(100% - 32px));
  transform: translateX(-50%);
  min-height: var(--profile-page-header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border: 3px solid var(--bb-border);
  border-radius: var(--bb-radius-window);
  color: #fff;
  background: var(
    --bb-header-gradient,
    linear-gradient(90deg, var(--bb-blue), var(--bb-purple))
  );
  box-shadow: var(--bb-frame-shadow);
}

body.profile-page-body .profile-header::after {
  content: "";
}

body.profile-page-body .profile-header h1 {
  margin: 0;
  font-family: var(--bb-font-display);
  font-size: clamp(16px, 2.4vw, 25px);
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--bb-title-shadow);
}

body.profile-page-body .profile-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(340px, 1.15fr);
  column-gap: 20px;
  row-gap: 28px;
  margin-top: calc(var(--profile-page-header-height) + 28px);
}

body.profile-page-body .profile-card {
  padding: 18px;
  border: 2px solid var(--bb-border);
  border-radius: var(--bb-radius-card);
  color: var(--bb-text);
  background: var(
    --bb-card-gradient,
    linear-gradient(180deg, #14243c, #0b172a)
  );
  box-shadow: var(--bb-card-shadow);
}

body.profile-page-body .profile-card h2,
body.profile-page-body .profile-card h3 {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--bb-font-display);
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}

body.profile-page-body .profile-icon-row {
  display: flex;
  justify-content: center;
  margin: 10px 0 20px;
}

body.profile-page-body .profile-icon-trigger {
  position: relative;
  width: 112px;
  height: 112px;
  padding: 6px;
  border: 2px solid var(--bb-border-highlight);
  border-radius: var(--bb-radius-card);
  color: #fff;
  background: rgba(5, 13, 28, 0.9);
  box-shadow: var(--bb-card-shadow);
  cursor: pointer;
  transition:
    transform var(--bb-motion-fast) var(--bb-ease),
    filter var(--bb-motion-fast) ease;
}

body.profile-page-body .profile-icon-trigger:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

body.profile-page-body .profile-icon-trigger:active {
  transform: translateY(5px);
  box-shadow: var(--bb-control-shadow-pressed);
}

body.profile-page-body .profile-icon-trigger > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--bb-radius-media);
  object-fit: cover;
}

body.profile-page-body .profile-icon-edit-badge {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bb-ink);
  border-radius: var(--bb-radius-tag);
  background: var(
    --bb-primary-gradient,
    linear-gradient(180deg, #438feb, #285fc0)
  );
  box-shadow: 0 3px 0 var(--bb-ink);
}

body.profile-page-body .profile-icon-edit-badge img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

body.profile-page-body .stat-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 9px 11px;
  border: 2px solid var(--bb-border-soft);
  border-radius: var(--bb-radius-card);
  color: var(--bb-text-soft);
  background: rgba(5, 13, 28, 0.68);
  box-shadow: var(--bb-inset-shadow);
}

body.profile-page-body .stat-row strong {
  color: #fff;
  font-family: var(--bb-font-display);
  font-size: 11px;
}

body.profile-page-body .actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

body.profile-page-body .profile-btn {
  min-height: 40px;
  padding: 9px 14px;
  color: #fff;
  background: var(
    --bb-primary-gradient,
    linear-gradient(180deg, #438feb, #285fc0)
  );
}

body.profile-page-body .profile-btn.primary {
  background: var(
    --bb-success-gradient,
    linear-gradient(180deg, #19c890, #079063)
  );
}

body.profile-page-body .profile-form {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

body.profile-page-body .profile-form label {
  margin-top: 2px;
  color: var(--bb-text-soft);
  font-size: 13px;
  font-weight: 900;
}

body.profile-page-body .profile-form input {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 2px solid var(--bb-border);
  border-radius: var(--bb-radius-control);
  color: var(--bb-text);
  background: rgba(5, 12, 25, 0.88);
  box-shadow: var(--bb-inset-shadow);
}

body.profile-page-body .account-message {
  min-height: 22px;
  margin: 0;
  color: #a9d5ff;
  font-size: 13px;
}

body.profile-page-body .cards-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

body.profile-page-body .cards-modal.hidden {
  display: none;
}

body.profile-page-body .cards-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bb-popup-backdrop);
}

body.profile-page-body .cards-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1000px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: auto;
  padding: 16px;
  border: 3px solid var(--bb-border);
  border-radius: var(--bb-radius-window);
  color: var(--bb-text);
  background: var(--bb-popup-bg);
  box-shadow: var(--bb-frame-shadow);
  transform: translate(-50%, -50%);
}

body.profile-page-body .cards-modal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: -16px -16px 18px;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  background: var(
    --bb-header-gradient,
    linear-gradient(90deg, var(--bb-blue), var(--bb-purple))
  );
}

body.profile-page-body .cards-modal-head h2 {
  margin: 0 auto 0 0;
  font-family: var(--bb-font-display);
  font-size: 16px;
  text-transform: uppercase;
  text-shadow: var(--bb-title-shadow);
}

body.profile-page-body .cards-modal-head .browse-shop-link {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body.profile-page-body .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

body.profile-page-body .card-tile {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 2px solid var(--bb-border-soft);
  border-radius: var(--bb-radius-card);
  background: var(
    --bb-card-gradient,
    linear-gradient(180deg, #14243c, #0b172a)
  );
  box-shadow: var(--bb-card-shadow);
}

body.profile-page-body .card-tile > :is(img, video, .player-card-canvas) {
  width: 100%;
  aspect-ratio: 650 / 1250;
  display: block;
  object-fit: contain;
}

body.profile-page-body .icon-tile > img {
  aspect-ratio: 1;
  border-radius: var(--bb-radius-media);
  object-fit: cover;
}

body.profile-page-body .card-meta {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

body.profile-page-body .card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.profile-card-rarity {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 2px solid var(--bb-ink);
  border-radius: var(--bb-radius-tag);
  color: #fff;
  box-shadow: 0 3px 0 var(--bb-ink);
  font-family: var(--bb-font-display);
  font-size: 8px;
  text-transform: uppercase;
}

.profile-card-rarity.common {
  background: #58667a;
}
.profile-card-rarity.rare {
  background: #2867c4;
}
.profile-card-rarity.epic {
  background: var(--bb-purple);
}
.profile-card-rarity.legendary {
  background: #c47b16;
}

.profile-card-tile.rare::before,
.profile-card-tile.epic::before,
.profile-card-tile.legendary::before,
.card-tile.rare::before,
.card-tile.epic::before,
.card-tile.legendary::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 30%;
  height: 320%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: rotate(20deg);
  animation: profileCardGlimmer 2.8s linear infinite;
  pointer-events: none;
}

@keyframes profileCardGlimmer {
  from {
    transform: translateX(-170%) rotate(20deg);
  }
  to {
    transform: translateX(420%) rotate(20deg);
  }
}

.profile-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-cost img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* Shared unlocked Bros display for self and public profile views. */
.profile-character-levels-card {
  grid-column: 1 / -1;
}

.profile-character-levels-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.profile-character-level-card {
  position: relative;
  width: 100px;
  display: grid;
  gap: 7px;
  justify-items: center;
}

.profile-character-level-card > img {
  width: 92px;
  height: 92px;
  display: block;
  object-fit: cover;
}

.profile-character-level-badge {
  --level-badge-size: 40px;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  pointer-events: none;
}

.profile-character-level-badge .level-badge__caption {
  padding-block: 3px 2px;
  font-size: 5px;
}

.profile-character-level-name {
  color: #eaf5ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
  text-align: center;
  width: 100%;
}

[data-bros-heading] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.profile-bros-unlocked-count {
  color: #8ba3c7;
  font-family: var(--bb-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.profile-bros-unlocked-count strong {
  color: #fff;
  font: inherit;
}

.profile-character-level-empty {
  color: #a9d5ff;
  font-size: 12px;
  padding: 6px 2px;
}

/* Battle Log Section */
.profile-card.battle-log-card {
  grid-column: 1 / -1;
}

.battle-log-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--bb-border-soft);
}

.battle-log-header h2,
.battle-log-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--bb-font-display);
  font-size: 14px;
  text-transform: uppercase;
  text-shadow: var(--bb-title-shadow);
}

.battle-log-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 0 2px;
  font-size: 12px;
  color: #8ba3c7;
}

.battle-log-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.battle-log-summary-bar .trophy-mini-icon,
.battle-trophy-pill .trophy-mini-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}

.battle-summary-note,
.battle-data-note {
  color: #a7b9d0;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.battle-summary-count {
  margin-left: auto;
  color: #7188a8;
}

.battle-log-metric strong {
  color: #fff;
  font-weight: 900;
  font-family: var(--bb-font-display);
  font-size: 11px;
}

.battle-log-metric.trophies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.battle-log-metric.record {
  padding-right: 12px;
  border-right: 1px solid var(--bb-border-soft);
}

.battle-log-metric.trophies.positive strong {
  color: #ffd32a;
}

.battle-log-metric.trophies.negative strong {
  color: #ff6b81;
}

.battle-cards-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.battle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--bb-motion-fast) ease;
}


.battle-card.victory {
  border-left: 3px solid #19c890;
}

.battle-card.defeat {
  border-left: 3px solid #ff4757;
}

.battle-card.draw {
  border-left: 3px solid #ffa502;
}

.battle-card.unknown {
  border-left: 3px solid #8095af;
}

.battle-outcome-badge.unknown {
  background: #34465f;
}

/* Battle Card Main Body */
.battle-card-main {
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.battle-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.battle-match-meta {
  flex: 1;
  min-width: 0;
}

.battle-match-meta h4 {
  margin: 0 0 2px;
  color: var(--bb-text);
  font-size: 13px;
  line-height: 1.2;
}

.battle-match-meta > span {
  display: block;
  overflow: hidden;
  color: #8ba3c7;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-time {
  margin-left: auto;
  font-size: 11px;
  color: #7188a8;
  white-space: nowrap;
}

.battle-outcome-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 5px 9px;
  border: 1px solid var(--bb-ink);
  font-family: var(--bb-font-display);
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.5px;
}

.battle-outcome-badge.victory {
  background: var(--bb-success-gradient);
}

.battle-outcome-badge.defeat {
  background: var(--bb-danger-gradient);
}

.battle-outcome-badge.draw {
  background: linear-gradient(180deg, #e6923b, #c47b16);
}

.battle-trophy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 48px;
  justify-content: flex-end;
  padding: 0;
  font-family: var(--bb-font-display);
  font-size: 9px;
  line-height: 1;
}

.battle-trophy-pill.positive {
  color: #ffd32a;
}

.battle-trophy-pill.negative {
  color: #ff6b81;
}

.battle-trophy-pill.neutral {
  color: var(--bb-text-soft);
}

/* Compact secondary details */
.battle-details-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-left: 90px;
  color: #7188a8;
  font-size: 11px;
  line-height: 1.4;
}

.battle-combat-stats,
.battle-rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}

.battle-detail-divider {
  width: 1px;
  height: 12px;
  background: var(--bb-border-soft);
}

.battle-details-row .chip-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #a7b9d0;
}

.battle-details-row .chip-val.kills {
  color: #ff7675;
}

.battle-details-row .chip-val.damage {
  color: #fdcb6e;
}

.battle-details-row .chip-val.hits {
  color: #74b9ff;
}

.battle-details-row .chip-val.coins {
  color: #ffd32a;
}

.battle-details-row .chip-val.gems {
  color: #2ed573;
}

.battle-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 16px;
  border-radius: var(--bb-radius-card);
  background: rgba(5, 12, 25, 0.7);
  border: 2px dashed var(--bb-border-soft);
  box-shadow: 0 4px 0 var(--bb-ink);
}

.battle-log-empty-icon {
  margin-bottom: 12px;
  opacity: 0.6;
}

.battle-log-empty-icon img {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 3px 0 var(--bb-ink));
}

.battle-log-empty h4 {
  margin: 0 0 8px;
  font-family: var(--bb-font-display);
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

.battle-log-empty p {
  margin: 0;
  font-size: 13px;
  color: #8ba3c7;
  max-width: 380px;
}

@media (max-width: 820px) {
  body.profile-page-body .profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .battle-summary-count {
    display: none;
  }

  .battle-result-row {
    align-items: flex-start;
    gap: 8px;
  }

  .battle-outcome-badge {
    min-width: 70px;
  }

  .battle-trophy-pill {
    margin-left: auto;
  }

  .battle-details-row {
    padding-left: 78px;
  }

  .battle-detail-divider {
    display: none;
  }
  body.profile-page-body .profile-page {
    --profile-page-header-height: 110px;
    width: min(100% - 20px, 1120px);
    padding-top: 0;
  }

  body.profile-page-body .profile-header {
    width: min(100% - 20px, 1120px);
    grid-template-columns: 1fr auto;
  }

  body.profile-page-body .profile-header h1 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.profile-page-body #back-btn {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.profile-page-body .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.email-hint { color: #b9cbe0; font-size: .875rem; line-height: 1.5; margin: 4px 0 12px; }
#email-code-step { margin-top: 18px; }
#account-email-code { letter-spacing: .3em; font-size: 1.25rem; }
#email-form button:disabled { opacity: .6; cursor: wait; }

/* Account email uses the same framed panels and pixel controls as the lobby. */
.email-dialog { width:min(92vw,500px); padding:0; max-height:calc(100dvh - 32px); overflow:auto; color:var(--bb-text); }
.email-dialog::backdrop { background:var(--bb-popup-backdrop); }
.email-dialog-card { display:grid; padding:28px; gap:22px; font:15px/1.5 var(--bb-font-body); border-top:8px solid #438feb; }
.email-dialog-card h2 { margin:0; font:18px/1.6 var(--bb-font-display); text-shadow:var(--bb-title-shadow); }
.email-dialog-eyebrow { margin:0; padding-right:40px; color:#91c9ff; font:10px/1.6 var(--bb-font-display); }
.email-dialog-close { position:absolute; top:16px; right:16px; width:32px; height:32px; padding:0; border:2px solid var(--bb-ink); border-radius:0; color:#fff; background:#29405f; box-shadow:inset 0 2px #6686aa,0 3px var(--bb-ink); font:24px/1 monospace; cursor:pointer; }
.email-dialog-card .email-step { display:grid; gap:18px; margin:0; }
.email-dialog-card label { display:grid; gap:8px; font-weight:700; }
.email-dialog [hidden] { display:none!important; }
.email-dialog-card input { width:100%; box-sizing:border-box; min-height:48px; padding:0 12px; border:2px solid var(--bb-border); border-radius:0; background:#071123; color:#fff; box-shadow:var(--bb-inset-shadow); font:11px/1.6 var(--bb-font-display); user-select:text; -webkit-user-select:text; cursor:text; }
.email-dialog-card .profile-btn { width:100%; margin:4px 0; min-height:44px; background:linear-gradient(#438fea,#2562bc); color:#fff; }
.email-dialog .verification-destination { display:flex; align-items:center; gap:16px; }
.email-dialog [data-destination] { min-width:0; overflow-wrap:anywhere; flex:1; }
.email-code-inputs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:8px 0; }
.email-code-inputs input { padding:0; height:52px; text-align:center; font-size:22px; }
.email-text-button { border:0; padding:8px; background:transparent; color:#abd2ff; font:10px/1.6 var(--bb-font-display); cursor:pointer; }
.email-dialog-message { margin:0; color:#9fdbbe; font-size:13px; }
.email-dialog-message.is-error { color:#ffb5bf; }
.email-dialog-card .email-marketing-setting { display:flex; align-items:center; gap:12px; border-top:2px solid var(--bb-border-soft); padding-top:20px; color:#b9cbe0; font:14px/1.5 var(--bb-font-body); }
.email-marketing-setting input[type=checkbox] { appearance:none; -webkit-appearance:none; flex:none; width:26px; height:26px; min-height:26px; padding:0; margin:0; border:3px solid var(--bb-ink); background:#23374f; box-shadow:0 3px var(--bb-ink),inset 0 2px #6b85a2; cursor:pointer; }
.email-marketing-setting input:checked { background:#309d51 url("/assets/ui/pixel-check.webp") center/20px 20px no-repeat; image-rendering:pixelated; }
.email-dialog :is(button,input):focus-visible { outline:3px solid var(--bb-gold); outline-offset:4px; }
.email-dialog :is(button,input):disabled { opacity:.55; cursor:default; }
@media(max-width:480px) { .email-dialog-card { padding:24px 18px; }.email-code-inputs { gap:5px; }.email-dialog-card h2 { font-size:15px; } }

.profile-slot-menu-crown {
  width: 24px; height: 24px; object-fit: contain;
  margin-left: 8px; vertical-align: middle; image-rendering: pixelated;
}

.cs-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bb-popup-backdrop);
}

.cs-confirm {
  width: min(100%, 440px);
  padding: 22px;
  color: var(--bb-text);
}

.cs-confirm-title {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--bb-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  text-shadow: 2px 3px 0 rgba(2, 5, 12, 0.62);
}

.cs-confirm-body p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: var(--bb-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.cs-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 22px;
}

.cs-btn {
  min-width: 112px;
  min-height: 42px;
  padding: 8px 14px;
  font-family: var(--bb-font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.cs-btn.cancel {
  color: var(--bb-text);
  background: linear-gradient(180deg, #43536b, #2d3b50);
}

.cs-btn.confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--bb-primary-gradient);
}

.cs-currency {
  width: 20px;
  height: 20px;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .cs-confirm {
    padding: 18px;
  }

  .cs-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cs-btn {
    min-width: 0;
    width: 100%;
  }
}