/* Shared visual language. Game viewport dimensions are owned by studio-layout. */
:root {
    --ui-surface: #121212;
    --ui-raised: #1b1b1d;
    --ui-border: #ffffff12;
    --ui-muted: #a5a5ab;
    --ui-radius: 18px;
}

body { background: radial-gradient(ellipse at 15% 0, #ff263608, transparent 48rem), #080809; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a { touch-action: manipulation; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid #e48c9e; outline-offset: 3px; }
button:disabled { cursor: default; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
body > header { background: #0c0c0ee8; box-shadow: 0 1px #ffffff05, 0 8px 32px #0003; }
.site-header-inner { gap: 16px; }
.site-header-inner > nav:not(.mobile-nav) { background: #ffffff04; border-radius: 16px; }
.site-header-inner > nav:not(.mobile-nav) > button { border-radius: 11px; font-weight: 700; }
.site-header-inner > nav:not(.mobile-nav) > button.is-active { background: linear-gradient(135deg, #ca2f4e25, #ca2f4e0a); }
#btn-login-modal { box-shadow: inset 0 1px #ffffff25, 0 4px 16px #c02d4a18; }
.home-page { padding-top: 24px; }
.home-page .home-hero { border-color: #ffffff12; border-radius: 28px; background: radial-gradient(ellipse at 85% 20%, #ff334413, transparent 60%), linear-gradient(135deg, #161618, #0b0b0d); }
.home-page .home-hero-inner { padding-block: clamp(36px, 6vw, 78px); }
.home-page .home-hero-copy h1 { letter-spacing: -.065em; line-height: 1.04; }
.home-page .home-hero-copy > p { line-height: 1.85; }
.home-primary-button, .home-secondary-button { min-height: 50px; padding-inline: 22px; }
.home-page .home-hot-game { border-radius: 22px; }
.home-page .home-how-step { background: linear-gradient(145deg, #20202388, #10101288); }
.home-page .home-how-step > i { color: #ff8892; }
.home-page .home-section-heading h2, .account-heading h1, .account-heading h2 { letter-spacing: -.045em; }
.premium-card, .pricing-card, .account-card, .leaderboard-top-card, .home-leaderboard-card { border-color: var(--ui-border); border-radius: 22px; background: linear-gradient(145deg, #19191c, #101012); box-shadow: 0 12px 36px #0002; }
.game-catalog-card { overflow: hidden; padding: 18px; }
.game-catalog-card .game-card-preview { border-radius: 14px; }
.game-catalog-card h2 { font-size: 1.35rem; letter-spacing: -.03em; }
.game-card-details-link { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--ui-border); }
.pricing-card { padding: 28px; }
.pricing-card.featured { border-color: #ff334460; background: radial-gradient(ellipse at top right, #ff334415, transparent 65%), #171719; }
.leaderboard-periods { gap: 5px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 13px; background: #0f0f11; }
.leaderboard-periods button { border-radius: 9px; }
.leaderboard-table { border-collapse: separate; border-spacing: 0; }
.leaderboard-table th { color: var(--ui-muted); font-weight: 600; letter-spacing: .09em; }
.leaderboard-table td { border-color: #ffffff08; padding-block: 18px; }
.account-heading { gap: 20px; }
.account-card input, .account-card select { border-radius: 11px; border-color: #ffffff16; background: #0c0c0e; }
#auth-modal > div { background: radial-gradient(ellipse at top, #ff33440c, transparent 65%), #151517; border-color: #ffffff1a; box-shadow: 0 30px 100px #0009; }
.site-footer { background: #0b0b0d; border-color: var(--ui-border); }

/* A quieter studio shell, with distinct working areas and consistent controls. */
#view-live .live-studio-tabs { border: 1px solid #ffffff14; border-radius: 14px; background: #151517; box-shadow: 0 4px 18px #0003; padding: 4px; }
#view-live .live-studio-tab { min-width: 0; min-height: 40px; padding: 10px 17px; border-radius: 10px; font-size: .74rem; font-weight: 650; letter-spacing: 0; }
#view-live .live-studio-tab.is-active { color: #ffffff; border-color: #ca2f4e35; background: linear-gradient(135deg, #ca2f4e24, #ca2f4e10); box-shadow: inset 0 1px #ffffff08; }
#view-live .studio-help-button { color: #bebec4; }
#view-live .studio-stage { border-color: #ffffff10; background: linear-gradient(155deg, #171719, #0f0f11 65%); box-shadow: 0 12px 40px #0002; }
#view-live .studio-stage-heading { padding: 3px 2px 12px; border-bottom: 1px solid #ffffff0c; margin-bottom: 14px; }
#view-live .studio-stage-heading h4 { color: #eeeeef; font-size: .92rem; letter-spacing: -.02em; font-weight: 650; }
#view-live .studio-connection, #view-live .studio-audio, #view-live .studio-game-picker { border-radius: 16px; border-color: #ffffff12; background: linear-gradient(145deg, #1b1b1e, #131315); box-shadow: inset 0 1px #ffffff04; }
#view-live .studio-panel-title { font-size: .9rem; letter-spacing: -.02em; }
#view-live .studio-panel-title > i { border: 0; width: 30px; height: 30px; border-radius: 10px; background: #ff334413; }
#view-live .studio-connection input { font-family: inherit; font-size: .8rem; }
#view-live .studio-connection > p { font-size: .68rem; line-height: 1.7; }
#view-live #btn-connect { min-height: 42px; font-size: .76rem; border-radius: 10px; box-shadow: inset 0 1px #ffffff22, 0 4px 16px #c02d4a18; }
#view-live #tiktok-sync-status { font-size: .6rem; letter-spacing: .06em; border-radius: 9px; }
#view-live .studio-audio .live-favorites-heading h4, #view-live .studio-game-picker .live-favorites-heading h4 { font-size: .9rem; letter-spacing: -.025em; }
#view-live .section-kicker { font-size: .55rem; letter-spacing: .13em; }
#view-live .studio-audio .live-favorite-card { min-height: 68px; border-radius: 10px; }
#view-live .studio-audio .live-favorite-title { font-size: .57rem; }
#view-live .live-favorites-volume { border-radius: 10px; background: #ffffff04; border-color: #ffffff09; }
#view-live .live-favorites-search input, #view-live .studio-quick-search input { font-size: .7rem; min-height: 38px; background: #0c0c0e; border-color: #ffffff12; }
#view-live .studio-all-games { min-height: 38px; font-size: .68rem; font-weight: 650; border-radius: 10px; background: #ffffff05; border-color: #ffffff12; color: #dedee2; }
#view-live .studio-all-games:hover { background: #ca2f4e12; color: #ffffff; border-color: #ca2f4e35; }
#view-live .studio-stats { gap: 8px; }
#view-live .mini-stat-box { padding: 12px 16px; border: 1px solid #ffffff0a; border-radius: 12px; background: #ffffff03; }
#view-live .mini-stat-box > span { font-size: .62rem; color: var(--ui-muted); }
#view-live .mini-stat-box strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
#view-live .feed-box { background: #0c0c0e; border-color: #ffffff0c; border-radius: 12px; }
#view-live .live-game-frame-wrap { border-color: #ffffff14; border-radius: 14px; background: radial-gradient(ellipse at center, #24242870, #080809 75%); }
.game-center-shell, .soundboard-shell { border-radius: 22px; border-color: #ffffff12; background: linear-gradient(145deg, #19191c, #0e0e10); }
.game-center-card { border-radius: 18px; border-color: #ffffff14; background: #171719; }
.game-center-card-body { padding: 20px; }
.game-center-card-body h4 { letter-spacing: -.025em; }
.game-center-search input, .soundboard-shell .audio-search input, .soundboard-shell .audio-category-filter select { background: #0c0c0e; border-color: #ffffff16; border-radius: 12px; }
.soundboard-shell .audio-sound-card { border-radius: 14px; }
.soundboard-source-tab, .soundboard-scope-tab { border-radius: 10px; }

/* Test Menu: open control deck, not a stack of nested panels. */
#view-live .studio-game-sidebar > .studio-test-panel { position: static; padding: 4px 0 16px; background: transparent; }
.studio-test-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.studio-test-symbol { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: linear-gradient(145deg, #ff4d5d22, #ff4d5d09); color: #ff4d5d; font-size: .85rem; }
.studio-test-eyebrow { margin-bottom: 3px; color: #98989f; font-size: .49rem; font-weight: 650; letter-spacing: .13em; }
.studio-test-header h5 { font-size: .96rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.studio-test-status { gap: 5px; font-size: .48rem; letter-spacing: .05em; color: #a3bdb0; }
.studio-test-status > span { width: 4px; height: 4px; box-shadow: 0 0 9px #6ee7b744; }
#studio-test-game-name { margin: 10px 0 0; padding-left: 2px; color: #aaaab2; font-size: .7rem; }
.studio-test-tabs { gap: 4px; padding: 4px; margin-top: 12px; border: 0; border-radius: 12px; background: #09090b80; }
.studio-test-tabs > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 49px; padding: 7px 1px; border: 0; border-radius: 8px; color: #9898a0; font-size: .6rem; font-weight: 600; transition: background .15s, color .15s; }
.studio-test-tabs > button::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8rem; line-height: 1; }
#studio-test-tab-teams::before { content: '\f0e7'; }
#studio-test-tab-weather::before { content: '\f185'; }
#studio-test-tab-audio::before { content: '\f028'; }
#studio-test-tab-music::before { content: '\f001'; }
.studio-test-tabs > button[aria-selected="true"] { background: color-mix(in srgb, var(--test-accent) 16%, #19191c); box-shadow: inset 0 1px #ffffff0b; }
#studio-test-controls { margin-top: 14px; gap: 14px; }
.studio-test-group-body { gap: 8px; }
.studio-test-team-row { --team-color: #fb7185; min-height: 39px; gap: 4px; border: 0; }
.studio-test-team-row[data-test-team="1"] { --team-color: #7dd3fc; }
.studio-test-team-row[data-test-team="2"] { --team-color: #6ee7b7; }
.studio-test-team-name { display: flex; align-items: center; gap: 5px; width: 42px; color: var(--team-color); font-size: .52rem; letter-spacing: .01em; }
.studio-test-team-name::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: var(--team-color); flex: none; }
.studio-test-team-row > button { min-height: 35px; border-radius: 7px; padding: 7px 3px; font-size: .63rem; background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, #19191c), #1b1b1e); }
.studio-test-team-row > button:hover:not(:disabled) { color: var(--team-color); background: color-mix(in srgb, var(--team-color) 23%, #19191c); }
.studio-test-action { min-height: 36px; padding: 9px 6px; border-radius: 8px; font-size: .66rem; font-weight: 600; line-height: 1.4; }
.studio-test-group--race { padding-top: 14px; border-color: #ffffff0c; }
.studio-test-group--race > h6 { display: block; margin-bottom: 8px; color: #9e9ea7; font-size: .51rem; font-weight: 650; letter-spacing: .1em; }
.studio-test-action[data-test-control="pause"] { color: #fcdba0; background: #fcd34d12; }
.studio-test-action[data-test-control="reset"], .studio-test-action[data-test-control="nextRace"] { color: #ebaab7; background: #dc6a8115; }
.studio-test-action[data-test-control="auto"], .studio-test-action[data-test-control="demo"] { color: #d3425f; background: #d3425f12; }
.studio-test-field { gap: 8px; }
.studio-test-field > span { font-size: .7rem; color: #bebec5; }
.studio-test-field > output { font-size: .65rem; }
.studio-test-field--range { grid-template-columns: 74px minmax(0, 1fr) 32px; }
.studio-test-field--range > span, .studio-test-field--range > output { font-size: .65rem; }
.studio-test-input { font-size: .7rem; }
input.studio-test-input:not([type="range"]):not([type="checkbox"]), select.studio-test-input { min-height: 36px; padding: 8px 10px; border: 1px solid #ffffff10; border-radius: 9px; background: #0c0c0e; }
.studio-test-field--checkbox { min-height: 36px; padding-block: 4px; }
input.studio-test-input[type="checkbox"] { width: 15px; height: 15px; }
input.studio-test-input[type="range"] { height: 4px; cursor: pointer; }
.studio-test-note, .studio-test-group--audio .studio-test-input:not(input) { font-size: .67rem; color: #9e9ea7; }

@media (min-width: 1000px) {
    #view-live.is-studio-mode .studio-stage { padding: 16px; border-radius: 20px; }
    #view-live.is-studio-mode .studio-workspace { gap: 18px; grid-template-columns: minmax(0, 1fr) 290px; }
    #view-live.is-studio-mode .studio-connection, #view-live.is-studio-mode .studio-audio { padding: 16px; }
    #view-live.is-studio-mode .studio-game-sidebar { gap: 18px; }
}
@media (max-width: 999px) {
    #view-live .studio-stage { padding: 16px; }
    #view-live .live-studio-tab { padding: 10px 13px; }
    .studio-test-header { max-width: none; }
}
@media (max-width: 767px) {
    .site-header-inner { gap: 10px; }
    .home-page .home-hero { border-radius: 20px; }
    .home-page .home-hero-inner { padding-inline: 22px; }
    .home-page .home-primary-button, .home-page .home-secondary-button { width: 100%; justify-content: center; }
    .pricing-card { padding: 22px; }
    #view-live .live-studio-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2px; }
    #view-live .live-studio-tab { padding: 9px 5px; min-height: 44px; font-size: .62rem; gap: 5px; }
    #view-live .studio-help-button { font-size: .6rem; }
    #view-live .studio-stage-heading { flex-wrap: wrap; gap: 8px; }
    .studio-test-tabs > button { min-height: 52px; font-size: .7rem; }
    .studio-test-team-row { gap: 5px; }
    .studio-test-team-name { width: 48px; font-size: .59rem; }
    .studio-test-team-row > button, .studio-test-action { min-height: 44px; font-size: .72rem; }
    .studio-test-field > span, .studio-test-field--range > span, .studio-test-field--range > output { font-size: .74rem; }
    input.studio-test-input:not([type="range"]):not([type="checkbox"]), select.studio-test-input { min-height: 44px; font-size: .8rem; }
    .studio-test-field--checkbox { min-height: 44px; }
    input.studio-test-input[type="checkbox"] { width: 18px; height: 18px; }
    .game-center-card-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-test-tabs > button { transition: none; }
}

/* Gaming and broadcasting identity: lit accents, arena artwork and control decks. */
body { background: radial-gradient(ellipse at 5% 0, #ff263610, transparent 42rem), radial-gradient(ellipse at 100% 35rem, #ff4d5d06, transparent 36rem), #080809; }
body > header { border-bottom-color: #ff334422; }
.site-header-inner > nav:not(.mobile-nav) > button.is-active { box-shadow: inset 0 -2px #ca2f4e, 0 4px 15px #ca2f4e0c; }
.home-page .home-hero { border-radius: 20px; border-color: #ff334429; background: radial-gradient(ellipse at 85% 25%, #ff334425, transparent 60%), linear-gradient(120deg, #160d0f, #0c0c0e 65%); box-shadow: inset 0 1px #ff889220, 0 20px 80px #ff263606; }
.home-page .home-hero::before { opacity: .75; background-size: 32px 32px; }
.home-page .home-hero-copy h1 { font-size: clamp(2.7rem, 4.8vw, 4.8rem); font-weight: 900; letter-spacing: -.06em; }
.home-page .home-hero-copy h1 span { background-image: linear-gradient(110deg, #ffffff, #ff6573 55%, #ff3344); }
.home-page .home-kicker { border-radius: 6px; color: #f5f5f7; background: #ff26360d; border-color: #ff334435; font-size: .55rem; letter-spacing: .09em; }
.home-page .home-primary-button { border-radius: 9px; box-shadow: inset 0 1px #ffffff30, 0 6px 28px #ca2f4e35; }
.home-page .home-secondary-button { border-radius: 9px; }
.home-page .home-hero-proof { flex-wrap: wrap; gap: 8px; }
.home-page .home-hero-proof > span { padding: 7px 9px; border: 1px solid #ffffff0c; border-radius: 6px; background: #08080950; font-size: .6rem; }
.home-page .home-hero-proof > span:nth-child(2) i { color: #6ee7b7; }
.home-page .home-hero-proof > span:nth-child(3) i { color: #ff4d5d; }
.home-preview-player { border-radius: 12px; border-color: #ff334435; box-shadow: 0 25px 70px #0009, 0 0 50px #ff33440d; }
.home-preview-topbar { background: #140d0f; }
.home-preview-topbar > span:first-child { letter-spacing: .17em; }
.home-page .home-hot-game, .game-catalog-card, .game-center-card { border-radius: 14px; border-color: #ffffff18; }
.home-page .home-hot-game-race { border-bottom-color: #ff334480; }
.home-page .home-hot-game-riders { border-bottom-color: #ff4d5d80; }
.home-page .home-hot-game-derby { border-bottom-color: #6ee7b780; }
.home-page .home-game-number { padding: 7px 10px; border-radius: 6px; border: 1px solid #ffffff1a; background: #080809b8; backdrop-filter: blur(8px); }
.home-page .home-hot-game-copy h3 { font-weight: 850; letter-spacing: -.045em; }
.home-page .home-hot-game:hover, .game-catalog-card:hover, .game-center-card:hover { border-color: #ff334470; box-shadow: 0 12px 35px #0005, 0 0 24px #ff33440b; }
#view-live .live-studio-tabs { border-radius: 10px; background: #101012; }
#view-live .live-studio-tab { border-radius: 7px; }
#view-live .live-studio-tab.is-active { box-shadow: inset 0 -2px #ca2f4e, inset 0 1px #ffffff09; }
#view-live #audio-center-tab:not(.is-active) > i { color: #6ee7b7; }
#view-live #game-center-tab:not(.is-active) > i { color: #ff4d5d; }
#view-live .studio-stage { border-top-color: #ff334450; box-shadow: inset 0 2px #ff33440d, 0 12px 40px #0003; }
.studio-stage-game-icon { margin-right: 7px; color: #ff8892; }
#view-live .studio-connection { border-top-color: #ff334455; }
#view-live .studio-audio { border-top-color: #6ee7b744; }
#view-live .studio-audio .section-kicker { color: #6ee7b7; }
#view-live .studio-game-picker { border-top-color: #ff4d5d44; }
#view-live .studio-game-picker .section-kicker { color: #ff4d5d; }
#view-live .live-game-frame-wrap { background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px), radial-gradient(ellipse at center, #28282d70, #080809 78%); background-size: 24px 24px, 24px 24px, auto; }
.studio-test-symbol { border-radius: 8px; color: #ffffff; background: linear-gradient(135deg, #ff4d5d35, #ff4d5d0a); box-shadow: inset 0 1px #ff4d5d35; }
.studio-test-header h5 { text-transform: uppercase; font-size: .83rem; font-weight: 850; letter-spacing: .06em; }
.studio-test-tabs { border-radius: 9px; background: #08080a; }
.studio-test-tabs > button { border-radius: 6px; }
.studio-test-tabs > button[aria-selected="true"] { box-shadow: inset 0 -2px var(--test-accent), inset 0 1px #ffffff09, 0 4px 12px #0003; }
.studio-test-team-row > button { border-radius: 5px; box-shadow: inset 0 1px #ffffff07; }
.studio-test-team-name::before { height: 20px; box-shadow: 0 0 9px color-mix(in srgb, var(--team-color) 35%, transparent); }
.studio-test-action { border-radius: 6px; }
.studio-test-action:active:not(:disabled) { background: #3a1c23; }
@media (max-width: 700px) {
    .home-page .home-hero-copy h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
    .home-page .home-kicker { font-size: .49rem; }
    .home-page .home-hero-proof > span { font-size: .55rem; padding: 7px; }
}

/* Red, black and white are the shared platform palette. */
.studio-test-panel, .studio-test-group, .studio-test-tabs > button { --test-accent: #d3425f; }
#studio-test-tab-teams, #studio-test-tab-weather, #studio-test-tab-audio,
#studio-test-tab-music { --test-accent: #ff4d5d; }
#view-live .studio-test-group[data-studio-test-category] { --test-accent: #ff4d5d; }
.home-page .home-hero-proof > span:nth-child(n) i { color: #ff4d5d; }
#view-live #audio-center-tab:not(.is-active) > i,
#view-live #game-center-tab:not(.is-active) > i { color: #d4d4d8; }
#view-live .studio-audio .section-kicker,
#view-live .studio-game-picker .section-kicker { color: #ff6471; }
#view-live .studio-audio, #view-live .studio-game-picker { border-top-color: #ff334440; }
.home-page .home-hot-game-riders, .home-page .home-hot-game-derby { border-bottom-color: #ff334480; }

/* Clarity pass: readable labels, crisp edges and less visual haze. */
:root { --ui-muted: #b6b6be; }
body { font-kerning: normal; }
.home-page .home-hero::before { opacity: .3; }
.home-page .home-hero-copy > p { color: #c8c8ce; }
.home-page .home-hot-game-copy { backdrop-filter: none; background: linear-gradient(180deg, #0b0b0de8, #0b0b0d); }
.home-page .home-hot-game-copy p { color: #cdced4; line-height: 1.65; }
.home-page .home-hot-game-copy h3 { color: #fff; }
.home-page .home-hot-game:hover > img { transform: none; }
.home-preview-player, .game-catalog-card, .game-center-card { border-color: #ffffff24; }
.game-catalog-card > p, .game-center-card-body > p { color: #bdbdc6; }
.home-page .home-preview-topbar { font-size: .64rem; }
.home-page .home-preview-topbar > span:last-child { font-size: .56rem; color: #b6b6be; }
#view-live .studio-stage, #view-live .studio-connection,
#view-live .studio-audio, #view-live .studio-game-picker { border-color: #ffffff1c; }
#view-live .studio-stage { border-top-color: #ff334460; }
#view-live .studio-stage-heading { border-bottom-color: #ffffff18; }
#view-live .studio-stage-heading h4 { font-size: 1rem; color: #fafafa; }
#view-live .studio-audio .live-favorites-heading h4,
#view-live .studio-game-picker .live-favorites-heading h4 { font-size: .96rem; color: #fafafa; }
#view-live .live-studio-tab { font-weight: 700; }
#view-live .section-kicker { font-size: .6rem; letter-spacing: .1em; }
#view-live .studio-audio .live-favorite-title { font-size: .64rem; line-height: 1.35; color: #f4f4f6; }
#view-live .studio-audio .live-favorite-card { min-height: 72px; }
#view-live .studio-connection > p { color: #b6b6be; font-size: .72rem; }
#view-live #tiktok-sync-status { font-size: .66rem; }
#view-live .live-favorites-search input, #view-live .studio-quick-search input { border-color: #ffffff24; }
#view-live .studio-all-games { color: #f0f0f3; border-color: #ffffff20; }
#view-live .studio-game-option span { font-size: .6rem; line-height: 1.35; }
#view-live .mini-stat-box > span { font-size: .69rem; color: #b6b6be; }
#view-live.is-studio-mode .studio-stage #live-game-status { font-size: .66rem; color: #b6b6be; }
#view-live.is-studio-mode .studio-stage .feed-header { font-size: .61rem; }
#view-live.is-studio-mode .studio-stage .feed-item { font-size: .69rem; }
.studio-test-header h5 { color: #fff; font-size: .9rem; letter-spacing: .035em; }
.studio-test-eyebrow { font-size: .56rem; color: #b6b6be; letter-spacing: .09em; }
.studio-test-status { font-size: .54rem; }
#studio-test-game-name { color: #cdced4; font-size: .75rem; }
.studio-test-tabs > button { font-size: .67rem; color: #bebec6; font-weight: 650; }
.studio-test-tabs > button::before { font-size: .86rem; }
.studio-test-team-name { font-size: .57rem; font-weight: 750; }
.studio-test-team-row > button { font-size: .68rem; color: #f6f6f8; box-shadow: inset 0 1px #ffffff15; }
.studio-test-action { font-size: .71rem; }
.studio-test-group--race > h6 { font-size: .59rem; color: #b6b6be; letter-spacing: .08em; }
.studio-test-field > span { color: #cdced4; }
.studio-test-field--range > span, .studio-test-field--range > output { font-size: .7rem; }
input.studio-test-input:not([type="range"]):not([type="checkbox"]), select.studio-test-input { border-color: #ffffff24; font-size: .75rem; }
.studio-test-note, .studio-test-group--audio .studio-test-input:not(input) { color: #b6b6be; font-size: .71rem; }
@media (min-width: 1101px) {
    .site-header-inner > nav:not(.mobile-nav) > button { font-size: .71rem; }
}
@media (max-width: 767px) {
    #view-live .studio-game-option span { font-size: .74rem; }
    .studio-test-tabs > button { font-size: .73rem; }
    .studio-test-team-name { font-size: .62rem; }
    .studio-test-team-row > button, .studio-test-action { font-size: .76rem; }
    .studio-test-field--range > span, .studio-test-field--range > output { font-size: .76rem; }
    input.studio-test-input:not([type="range"]):not([type="checkbox"]), select.studio-test-input { font-size: .82rem; }
}

/* Plan colors distinguish tiers without changing subscription behavior. */
#pricing .pricing-card--free { --plan-accent: #c9cdd6; --plan-surface: #25272d; }
#pricing .pricing-card--pass { --plan-accent: #ff4d5d; --plan-surface: #3c151d; }
#pricing .pricing-card--pro { --plan-accent: #f0c66e; --plan-surface: #30271a; }
#pricing .pricing-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    overflow: hidden; padding: 28px; border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 38%, #242428);
    background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--plan-accent) 17%, transparent), transparent 65%), linear-gradient(150deg, var(--plan-surface), #111113 88%);
    box-shadow: inset 0 1px #ffffff0a, 0 14px 38px #0003;
}
#pricing .pricing-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: linear-gradient(90deg, transparent, var(--plan-accent), transparent); }
#pricing .pricing-emblem { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 12px; color: var(--plan-accent); font-size: 1.1rem; border: 1px solid color-mix(in srgb, var(--plan-accent) 28%, transparent); background: color-mix(in srgb, var(--plan-accent) 12%, transparent); }
#pricing .pricing-card .eyebrow { color: var(--plan-accent); font-size: .6rem; letter-spacing: .12em; }
#pricing .pricing-card h3 { margin-top: 10px; font-size: 1.55rem; letter-spacing: -.035em; }
#pricing .pricing-card .price { margin: 14px 0 22px; font-size: 2.7rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
#pricing .pricing-card .price span { margin-left: 3px; letter-spacing: 0; font-size: .8rem; color: #c2c2cb; }
#pricing .pricing-card ul { width: 100%; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--plan-accent) 18%, transparent); }
#pricing .pricing-card li { color: #d0d0d8; line-height: 1.6; }
#pricing .pricing-card li::before { color: var(--plan-accent); }
#pricing .pricing-card > button { margin-top: auto; min-height: 44px; color: var(--plan-accent); border-color: color-mix(in srgb, var(--plan-accent) 27%, transparent); background: color-mix(in srgb, var(--plan-accent) 10%, #111113); font-size: .72rem; opacity: 1; }
@media (max-width: 767px) { #pricing .pricing-card { padding: 24px; } }

/* One clean selected state, without stacked borders, glows or underlines. */
.site-header-inner > nav:not(.mobile-nav) { border-color: transparent; background: transparent; box-shadow: none; }
.site-header-inner > nav:not(.mobile-nav) > button { color: #bdbdc5; border-radius: 9px; }
.site-header-inner > nav:not(.mobile-nav) > button:hover:not(.is-active) { color: #fff; background: #ffffff09; box-shadow: none; }
.site-header-inner > nav:not(.mobile-nav) > button.is-active,
.mobile-nav .mobile-nav-link.is-active { color: #fff; background: #9e253d; border-color: transparent; box-shadow: none; }
.site-header-inner > nav:not(.mobile-nav) > button.is-active > i,
.mobile-nav .mobile-nav-link.is-active > i { color: #fff; }
#view-live .live-studio-tab.is-active,
.studio-test-tabs > button[aria-selected="true"],
.leaderboard-periods button.is-active,
.soundboard-source-tab.is-active,
.soundboard-scope-tab.is-active { color: #fff; background: #821e32; border-color: transparent; box-shadow: none; }
#view-live .live-studio-tab.is-active > i { color: #fff; }
.studio-test-action[aria-pressed="true"] { color: #fff; background: #48212a; box-shadow: none; }
button:active:not(:disabled) { scale: none; }
.studio-test-panel button:focus-visible,
.site-header-inner > nav button:focus-visible,
#view-live .live-studio-tab:focus-visible,
.leaderboard-periods button:focus-visible,
.soundboard-source-tab:focus-visible,
.soundboard-scope-tab:focus-visible { outline: 2px solid #f5f5f7; outline-offset: 3px; }

/* Quick game favorites: larger artwork and a quiet corner favorite action. */
#view-live .studio-game-picker .studio-quick-item { border-color: #ffffff18; background: #1a1a1e; }
#view-live .studio-game-picker .studio-game-option img { opacity: 1; border-color: #ffffff1c; border-radius: 6px; }
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star {
    top: 0; right: 0; bottom: auto; left: auto; width: 28px; height: 28px;
    padding: 0; border: 0; border-radius: 6px; background: transparent;
    color: #a0a0aa; font-size: 0; line-height: 1;
}
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star::before { content: '\f005'; font-family: 'Font Awesome 6 Free'; font-weight: 400; font-size: 12px; }
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star.is-favorite { color: #e3c06e; }
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star.is-favorite::before { font-weight: 900; }
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star:hover { color: #ffe09a; background: #ffffff08; }
#view-live .studio-game-picker .studio-quick-item > .game-favorite-star:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 999px) {
    #view-live .studio-game-picker .studio-game-option { min-height: 146px; padding: 26px 9px 12px; }
    #view-live .studio-game-picker .studio-game-option img { width: 100%; max-width: 120px; height: 76px; }
}
@media (max-width: 767px) {
    #view-live .studio-game-picker .studio-quick-item > .game-favorite-star { width: 32px; height: 32px; }
    #view-live .studio-game-picker .studio-quick-item > .game-favorite-star::before { font-size: 13px; }
}

/* Home podium: ranked DOM order, with the winner visually centered. */
.home-top-five-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.home-top-five-heading > span:first-child { display: flex; align-items: center; gap: 8px; color: #e5e5ea; font-size: .71rem; font-weight: 600; }
.home-top-five-heading i { color: #edc568; }
.home-top-five-heading > span:last-child { color: #93939e; font-size: .55rem; letter-spacing: .1em; }
.home-top-five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 0; padding: 24px 20px 10px; list-style: none; }
.home-top-five:empty { display: none; }
.home-top-five-entry { --podium-color: #dedee5; min-width: 0; border: 1px solid #ffffff12; border-radius: 14px; background: #ffffff03; }
.home-top-five-entry:nth-child(-n+3) { display: flex; flex-direction: column; align-items: center; gap: 9px; grid-row: 1; padding: 18px 10px 0; text-align: center; }
.home-top-five-entry--1 { --podium-color: #edc568; grid-column: 3 / span 2; min-height: 320px; border-color: #edc56850; background: radial-gradient(ellipse at top, #edc56818, transparent 70%), linear-gradient(180deg, #221d17, #171516); box-shadow: 0 -8px 40px #edc56808; }
.home-top-five-entry--2 { --podium-color: #cbd3e0; grid-column: 1 / span 2; min-height: 286px; background: linear-gradient(180deg, #24252d, #151518); }
.home-top-five-entry--3 { --podium-color: #d99a72; grid-column: 5 / span 2; min-height: 270px; background: linear-gradient(180deg, #2b201c, #171416); }
.home-top-five-emblem { display: grid; place-items: center; min-height: 26px; color: var(--podium-color); font-size: 1.25rem; }
.home-top-five-entry--1 .home-top-five-emblem { min-height: 38px; font-size: 2rem; }
.home-top-five-person { width: 100%; min-width: 0; }
.home-top-five-entry:nth-child(-n+3) .home-top-five-person { flex-direction: column; justify-content: center; gap: 9px; }
.home-top-five-person > .min-w-0 { max-width: 100%; }
.home-top-five-entry .leaderboard-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--podium-color) 55%, transparent); background: #28282e; font-family: var(--font-display); font-size: 1.2rem; }
.home-top-five-entry--1 .leaderboard-avatar { width: 68px; height: 68px; border-color: #edc568; box-shadow: 0 0 0 4px #edc5680b; }
.home-top-five-person a { font-size: .8rem; font-weight: 600; }
.home-top-five-person span { font-size: .6rem; color: #aaaab5; }
.home-top-five-score { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-top-five-score strong { color: #fafafa; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home-top-five-entry--1 .home-top-five-score strong { color: #f5d788; font-size: 1.5rem; }
.home-top-five-score > span { color: #a9a9b4; font-size: .57rem; }
.home-top-five-time { color: #b9b9c2; font-size: .57rem; font-variant-numeric: tabular-nums; }
.home-top-five-position { color: var(--podium-color); font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.5; }
.home-top-five-entry:nth-child(-n+3) > .home-top-five-position { width: calc(100% + 20px); margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--podium-color) 20%, transparent); background: #ffffff03; border-radius: 0 0 14px 14px; }
.home-top-five-entry--1 > .home-top-five-position { font-size: 2.1rem; }
.home-top-five-entry:nth-child(n+4) { grid-row: 2; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; row-gap: 4px; padding: 12px; }
.home-top-five-entry--4 { grid-column: 1 / span 3; }
.home-top-five-entry--5 { grid-column: 4 / span 3; }
.home-top-five-entry:nth-child(n+4) .home-top-five-position { grid-row: 1 / span 2; font-size: 1rem; color: #9c9ca8; }
.home-top-five-entry:nth-child(n+4) .home-top-five-person { grid-column: 2; grid-row: 1 / span 2; gap: 8px; }
.home-top-five-entry:nth-child(n+4) .leaderboard-avatar { width: 32px; height: 32px; border-width: 1px; font-size: .8rem; }
.home-top-five-entry:nth-child(n+4) .home-top-five-score { grid-column: 3; grid-row: 1; align-items: flex-end; }
.home-top-five-entry:nth-child(n+4) .home-top-five-score strong { font-size: .86rem; }
.home-top-five-entry:nth-child(n+4) .home-top-five-time { grid-column: 3; grid-row: 2; font-size: .52rem; text-align: right; }
@media (max-width: 600px) {
    .home-top-five-heading { padding: 18px 14px 0; }
    .home-top-five-heading > span:first-child { font-size: .65rem; }
    .home-top-five { gap: 7px; padding: 20px 10px 10px; }
    .home-top-five-entry:nth-child(-n+3) { padding: 14px 6px 0; gap: 8px; border-radius: 11px; }
    .home-top-five-entry--1 { min-height: 294px; }
    .home-top-five-entry--2 { min-height: 266px; }
    .home-top-five-entry--3 { min-height: 250px; }
    .home-top-five-entry .leaderboard-avatar { width: 42px; height: 42px; }
    .home-top-five-entry--1 .leaderboard-avatar { width: 56px; height: 56px; }
    .home-top-five-person a { font-size: .66rem; }
    .home-top-five-person span { font-size: .52rem; }
    .home-top-five-score strong { font-size: .95rem; }
    .home-top-five-entry--1 .home-top-five-score strong { font-size: 1.15rem; }
    .home-top-five-time { font-size: .5rem; }
    .home-top-five-entry:nth-child(-n+3) > .home-top-five-position { width: calc(100% + 12px); border-radius: 0 0 11px 11px; }
    .home-top-five-entry--4, .home-top-five-entry--5 { grid-column: 1 / -1; }
    .home-top-five-entry.home-top-five-entry--5 { grid-row: 3; }
    .home-top-five-entry:nth-child(n+4) .home-top-five-person a { font-size: .78rem; }
}