/* Site craft follows Unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   CMG's charcoal, green, Barlow type and game artwork remain the material. */
:root{--craft-surface:#242424;--craft-raised:#303031;--craft-line:rgba(250,250,250,.1);--craft-secondary:#c5c6c8;--craft-meta:#aeb0b3;--craft-ease:cubic-bezier(.22,1,.36,1)}
.app-body{color:var(--text);background:var(--bg)}
.app-body :is(h1,h2,h3){font-weight:600}
.app-body :is(h2,h3){letter-spacing:0}
.app-body :is(.eyebrow,.subtle-tag,.site-status,.site-meta,.source-note,.nav-label,.live-label,.platform-label,.queue-status,.season-label,.browse-game-tag){font-size:11px;letter-spacing:0;text-transform:none;line-height:1.5}
.app-body :is(.page-heading .eyebrow,.section-top .eyebrow,.settings-heading .eyebrow){font-size:11px;letter-spacing:0}
.app-body :is(.source-note,.site-meta,.site-preview-note){color:var(--craft-meta);font-size:12px;line-height:1.6}
.app-body :is(.subtle-tag,.site-status){border-color:var(--craft-line);border-radius:4px;box-shadow:none;font-weight:500}
.app-body :is(.site-form label,.field-label,.match-preferences label,.profile-select-label,.team-page-breadcrumb>label,.event-preview-scenarios label){font-size:12px;letter-spacing:0;text-transform:none;line-height:1.5}
.app-body :is(.site-metrics span,.profile-metrics span,.stats-line div>span,.event-facts span,.team-page-member-label,.team-metric-label){font-size:11px;letter-spacing:0;text-transform:none;line-height:1.5}
.app-body :is(.primary-button,.quiet-button){min-height:44px;border-radius:8px;padding-inline:16px;gap:8px;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;box-shadow:none;transition:background-color 160ms var(--craft-ease),color 160ms var(--craft-ease),border-color 160ms var(--craft-ease)}
.app-body .primary-button:hover{transform:none;background:#9aff92;color:#1a1a1a}
.app-body .primary-button:active{background:#7ee574}
.app-body .quiet-button{background:transparent;border-color:var(--craft-line);color:var(--craft-secondary)}
.app-body .quiet-button:hover{background:#ffffff08;border-color:#ffffff30;color:var(--text)}
.app-body :is(.primary-button,.quiet-button):disabled{cursor:default;transform:none}
.app-body :is(.primary-button,.quiet-button):after{animation:none;background:none}
.app-body .text-button{gap:8px;line-height:1.5;letter-spacing:0;font-weight:500;text-transform:none}
.app-body :is(button,a,input,select,textarea):focus-visible,.modal :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.app-body :is(input,select,textarea){border-color:var(--craft-line);border-radius:8px;line-height:1.4}
.app-body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){min-height:44px}
.app-body :is(.site-tabs,.filter-tabs,.ranking-toggle,.competition-switch){border-color:var(--craft-line)}
.app-body :is(.site-tabs button,.filter-tabs button,.ranking-toggle button,.ladder-switch button){font-weight:500;letter-spacing:0;text-transform:none}
.app-body :is(.site-section,.site-empty,.list-section,.account-section,.commerce-section,.support-section){border-color:var(--craft-line)}
.app-body .site-section{border-radius:8px}
.app-body :is(.site-metrics strong,.stats-line b,.profile-metrics strong,.commerce-cash-value,.event-hero-prize strong,.team-rating-value strong){font-variant-numeric:tabular-nums}
.app-body .page-heading{margin-bottom:24px}
.app-body .site-page-heading>div>p{line-height:1.6;max-width:680px}
.app-body :is(.site-tabs,.site-inline-actions){gap:12px}
.app-body .site-form{gap:12px}
.app-body .site-form-row{gap:16px}
.app-body .site-form-hint{font-size:12px;line-height:1.5}
.app-body :is(.site-tabs button,.filter-tabs button,.competition-choice,.nav-item){transition:color 160ms var(--craft-ease),background-color 160ms var(--craft-ease),border-color 160ms var(--craft-ease)}
.app-body :is(.nav-item.active,.competition-choice.selected){background:#ffffff05}
.app-body :is(.game-context small,.competition-choice small,.persistent-match>div>span,.mobile-bottom-nav>button,.mobile-bottom-nav b,.app-footer>span,.app-footer .text-button,.full-site-footer small,.full-site-footer .eyebrow){font-size:11px;letter-spacing:0;line-height:1.4}
.app-body .game-context strong{font-weight:500}
.app-body .competition-choice{padding:8px 16px;gap:12px}
.app-body :is(.player-caption,.player-status,.slot-number,.squad-note,.queue-bar p,.rank-summary .eyebrow,.rank-summary .muted,.how-strip>div,.banner-caption,.game-banner .live-label,.game-banner-content p,.tournament-art>span,.tournament-info .eyebrow,.tournament-info p,.tournament-time,.match-list td:before,.history-table td,.rankings-table th,.rankings-table td,.roster-player small,.roster-state,.room-map>span){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body .player-slot strong{font-size:12px}
.app-body :is(.player-caption,.squad-note,.queue-bar p){color:var(--craft-meta)}
.app-body .rankings-table .avatar{font-size:11px}
.app-body :is(.profile-online,.profile-cover>span:first-child,.profile-cover .subtle-tag,.profile-tabs button>span,.profile-select-label,.profile-form>span,.profile-game-strip small,.profile-game-entry-body>.eyebrow,.profile-team-row em,.profile-topline>.eyebrow,.profile-topline .text-button,.profile-identity p,.profile-match-row small,.profile-game-ids small,.profile-team-row small,.profile-trophies p,.profile-missions small,.profile-stat-rank>span){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body :is(.team-page-top-actions .site-status,.team-page-section-top .subtle-tag,.team-page-record>strong>span,.team-page-form>span,.team-page-form>small,.team-page-member p,.team-page-member-label,.team-page-match p,.team-page .site-preview-note){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body :is(.team-game-abbr,.team-detail-metrics>div>span,.team-detail-form>div>small,.team-recent-form>li>small,.team-recent-form small>i){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body .team-detail-metrics>div{border-color:var(--craft-line)}
.app-body .team-badge.team-game-art>.team-game-abbr{font-size:11px;letter-spacing:0;font-weight:500}
.app-body .account-main .site-form>label:not(.account-switch){font-size:12px;letter-spacing:0}
.app-body :is(.squad-roster-button,.squad-roster-button .mobile-only,.settings-heading>span:last-child){font-size:11px;letter-spacing:0}
.app-body :is(.account-section-heading>.eyebrow,.account-linked-id em,.account-session .site-status,.account-demo-code>span,.account-field-caption,.account-savebar>span,.account-main .site-preview-note,.account-session small,.account-session .quiet-button,.account-linked-id small){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body :is(.commerce-status,.commerce-price-note,.commerce-product-art>small,.commerce-product-content small,.commerce-ledger-copy>small,.commerce-review-summary span,.commerce-balance-breakdown dt,.commerce-claim .eyebrow,.commerce-plan .eyebrow){font-size:11px;letter-spacing:0;line-height:1.5;text-transform:none}
.app-body :is(.event-state,.event-state em,.event-hero-prize small,.event-facts span,.event-entry-panel>.site-status,.event-entry-cost small,.event-entry-panel>.source-note,.event-bracket-heading>.site-status,.event-bracket-round h3,.event-match-label,.event-match-label i,.event-bracket-player>small,.event-entrant .quiet-button,.event-entrant .site-status){font-size:11px;letter-spacing:0;text-transform:none;line-height:1.5}
.app-body :is(.search-result small,.full-search-group>.eyebrow,.guest-hero-caption,.guest-games-strip button>span){font-size:11px;letter-spacing:0;line-height:1.5}
.app-body :is(.game-image,.team-page-emblem,.found-mark,.ready-players>span,.result-summary){animation:none}
.app-body :is(.profile-game-cover:hover img,.news-story:hover img,.news-feature:hover img,.game-card:hover img,.catalog-game:hover img){transform:none}
.app-body :is(.game-image,.profile-game-cover img,.news-story img,.news-feature img){transition:opacity 180ms var(--craft-ease)}
.app-body :is(.found-mark:before,.found-mark:after){animation:none;display:none}
.app-body :is(.banner-number,.new-dot){display:none}
.app-body :is(.queue-bar:before,.player-slot:before,.game-banner:before,.match-room-banner:before){background-image:none}
.app-body .player-slot.empty:hover{transform:none}
.app-body .queue-bar{border-color:var(--craft-line)}
.app-body :is(.site-metrics,.profile-metrics,.event-facts,.account-linked-id,.account-session){box-shadow:none}
@media(max-width:900px){
 .app-body .competition-choice{padding:8px;gap:8px}
 .app-body .page-heading>.quiet-button{min-height:44px;font-size:12px;padding-inline:12px;gap:8px}
 .app-body .site-page-heading{gap:16px}
 .app-body .site-tabs{gap:8px}
 .app-body .site-tabs button{min-height:44px}
 .app-body .site-form-row{gap:12px}
 .app-body .persistent-match>.quiet-button{font-size:11px;padding-inline:12px;gap:8px}
 .app-body .queue-bar .primary-button{font-size:12px;padding-inline:12px;gap:8px}
 .app-body .queue-bar p{max-width:160px}
 .app-body :is(.source-note,.site-meta,.site-preview-note){font-size:11px}
 .app-body .player-caption{white-space:normal;line-height:1.4}
 .app-body .profile-topline .text-button{min-height:44px}
 .app-body .event-page .page-heading{flex-wrap:wrap}
 .app-body .browse-toolbar{flex-wrap:wrap;gap:12px;align-items:center}
 .app-body .browse-toolbar .filter-tabs{flex-wrap:wrap;gap:12px;min-width:0}
 .app-body .browse-toolbar>.subtle-tag{margin-left:auto;max-width:100%}
}
@media(max-width:380px){
 .app-body .game-context strong{font-size:12px}
 .app-body .game-context small{font-size:11px}
 .app-body .competition-choice{gap:8px;padding-inline:8px}
 .app-body .competition-choice strong{font-size:12px}
 .app-body .queue-bar>.primary-button{min-width:132px}
 .app-body .queue-bar p{max-width:144px}
}
@media(min-width:1021px) and (max-height:850px){
 /* Keep the roster and queue within a laptop broadcast frame. */
 .app-body:has(.play-workspace) .competition-choice{min-height:44px;padding-block:4px}
 .app-body:has(.play-workspace) .page-heading{margin-bottom:16px}
 .app-body:has(.play-workspace) .compact-banner .game-banner-content{padding-block:8px}
 .app-body .play-workspace .section-top .eyebrow{margin-bottom:4px}
 .app-body .play-workspace .squad-note{margin-bottom:12px}
 .app-body .play-workspace .settings-heading{padding-top:12px}
 .app-body .play-workspace .match-preferences{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){.app-body *,.app-body *:before,.app-body *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.arena-session-notice{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding:20px;border:1px solid var(--line);border-left:2px solid var(--lime)}.arena-session-notice p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}.arena-session-examples{margin-block:24px}.arena-session-examples label{display:grid;gap:8px;margin-top:16px;max-width:440px;font-size:12px}.arena-session-examples select{min-height:44px}@media(max-width:600px){.arena-session-notice{align-items:stretch;flex-direction:column}}