@font-face {
    font-family: "Space Grotesk";
    src: url("../../fonts/space-grotesk-variable-zEBpAU6.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

/* Account appearance is independent of Arcade Moments. Loaded after shared styles. */
html[data-app-theme="modern"] {
    --theme-accent-decor-rgb: 110 118 134;
    --theme-surface-ink-rgb: 16 17 21;
    --theme-secondary-top: #20232B;
    --theme-secondary-bottom: #17191F;
    --theme-grid-line: transparent;
    --theme-grid-line-soft: transparent;
    --color-bg: #090A0D;
    --color-bg-deep: #101115;
    --color-panel: #17191F;
    --color-panel-strong: #20232B;
    --color-panel-soft: #252932;
    --color-border: #30343D;
    --color-border-strong: #626A79;
    --color-text: #F7F8FB;
    --color-muted: #ABB1BD;
    --color-subtle: #ABB1BD;
    --color-primary: #FFE600;
    --color-primary-strong: #FFE600;
    --color-primary-text: #090A0D;
    --color-secondary: #FFE600;
    --color-focus: #FFE600;
    --color-glow: transparent;
    --court: #FFE600;
    --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-title: var(--font-body);
    --font-page-title: var(--font-body);
    --font-page-title-weight: 900;
    --page-title-white-space: normal;
    --page-title-text-wrap: balance;
    --font-display: var(--font-body);
    --font-mono: var(--font-body);
    --radius-control: 6px;
    --radius-card: 12px;
    --radius-panel: 14px;
    --radius-surface: var(--radius-card);
    --radius-featured: 16px;
    --radius-pixel: var(--radius-control);
    --surface-group: var(--color-bg-deep);
    --surface-card: var(--color-panel);
    --surface-footer: var(--color-bg);
    --font-section: 750 clamp(1.05rem, 2vw, 1.35rem)/1.3 var(--font-body);
    --font-metadata: 500 .75rem/1.45 var(--font-body);
    --font-subtitle: 600 .85rem/1.45 "Space Grotesk", var(--font-body);
    --font-description: 500 .95rem/1.55 "Space Grotesk", var(--font-body);
    --font-metric-label: 500 .7rem/1.4 var(--font-body);
    --font-action: 650 .8rem/1.3 var(--font-body);
    --section-spacing: 20px;
    --section-heading-gap: 10px;
    --mobile-section-gap: var(--section-spacing);
    --mobile-card-gap: 12px;
    --card-padding: 16px;
    --card-gap: 8px;
    --compact-card-height: 226px;
    --compact-content-height: calc(var(--compact-card-height) - 2px);
    --compact-card-rows: minmax(22px, auto) minmax(0, 1fr) 40px 22px 44px;
    --compact-title-white-space: normal;
    --compact-title-wrap: balance;
    --empty-state-height: 88px;
    --compact-card-padding: 16px 16px 12px;
    --compact-card-title: 750 .8rem/22px var(--font-body);
    --compact-action-size: 44px;
    --compact-action-font-size: .75rem;
    --card-edge-neutral: var(--color-border);
    --card-edge-priority: var(--color-border-strong);
    --card-edge-shadow: var(--shadow-surface);
    --card-cta-background: var(--color-primary);
    --card-cta-color: var(--color-primary-text);
    --card-cta-outline: 1px solid var(--color-primary);
    --metric-label-size: .7rem;
    --hero-bottom-space: 16px;
    --footer-top-space: 16px;
    --footer-padding-block: 20px;
    --footer-mobile-clearance: 128px;
    --border-panel: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-primary);
    --border-subtle: 1px solid var(--color-border);
    --border-structural: 1px solid var(--color-border-strong);
    --border-selected: 1px solid var(--color-primary);
    --border-reward: 1px solid var(--color-primary);
    --shadow-surface: 0 8px 24px rgb(0 0 0 / 22%);
    --shadow-pixel: var(--shadow-surface);
    --shadow-glow: none;
    --shadow-selected: 0 4px 16px rgb(0 0 0 / 24%);
    --shadow-reward: var(--shadow-selected);
}

/* Keep the arena artwork; remove only CSS grids and VHS overlays. */
html[data-app-theme="modern"] body.arcade-page {
    background-color: var(--color-bg);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}
html[data-app-theme="modern"] body.arcade-page::before,
html[data-app-theme="modern"] .mobile-arena-shell::before,
html[data-app-theme="modern"] .mobile-arena-shell::after,
html[data-app-theme="modern"] .mobile-arena-shell__grain {
    display: none;
}
html[data-app-theme="modern"] .mobile-arena-shell__background { animation: none; }

/* Named component families: no universal border/background or layout reset. */
html[data-app-theme="modern"] body.arcade-page :is(h1, h2, h3, h4, .ds-display, .app-page-hero h1) {
    font-family: var(--font-title);
    font-weight: 750;
    letter-spacing: -.025em;
    text-transform: none;
    text-shadow: none;
    line-height: 1.2;
}
html[data-app-theme="modern"] body.arcade-page :is(button, .ds-button, .market-action, .team-submit, .navigation-links a, .conference-switch__item strong, .app-sidebar a, .mobile-bottom-nav a) {
    font-family: var(--font-body);
    font-weight: 650;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-kicker, .ds-label, .market-meta dt, .dashboard-stat__label) {
    text-transform: none;
    letter-spacing: .015em;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-panel, .market-summary, .prediction-panel, .leaderboard-panel, .dashboard-panel, .auth-panel, .season-call-panel, .boost-frieze, .boost-detail, .final-deadline-strip, .dashboard-stats, .option-pick__meta, .option-pick__feedback, .option-pick__confirmation, .profile-pick-list, .dashboard-ranking-list, .dashboard-ledger-list, .ranking-board) {
    border: var(--border-panel);
    border-radius: var(--radius-panel);
    background: var(--surface-group);
    box-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-card, .navigation-market-card, .market-card, .checkpoint-card, .conference-switch__item, .season-hub-item, .profile-identity-card, .profile-team-summary, .auth-card, .community-card, .playoff-series, .modal-panel, .empty-state, .community-row, .popularity-row, .table-wrap, .dashboard-season-card, .bracket-scoreboard, .bracket-round, .bracket-series, .appearance-option, .boost-node, .ranking-zone, .option-pick__candidate:not(.match-team-surface)) {
    border: var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-surface);
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-panel, .ds-card)::before,
html[data-app-theme="modern"] body.arcade-page .reference-page .navigation-market-card::after {
    display: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button, .market-action, .team-submit, .ds-icon-button, .ds-input, .ds-select, .ds-textarea, .team-option, .conference-tab) {
    border-width: 1px;
    border-radius: var(--radius-control);
    box-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button--primary, .team-submit, button.market-action[type="submit"]:not(.market-action--secondary)) {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button--secondary, .market-action--secondary, a.market-action, .app-sidebar, .mobile-bottom-nav, .app-topbar) {
    background: var(--color-bg-deep);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button--primary, .ds-button--secondary)::before { display: none; }
html[data-app-theme="modern"] body.arcade-page :is(.navigation-market-card.is-active, .conference-switch__item.is-active, .team-option--selected, .team-option:has(:checked), .boost-node.is-selected) {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
html[data-app-theme="modern"] body.arcade-page :is(.checkpoint-card__meta, .dashboard-stats strong, .boost-summary strong) { text-shadow: none; }

/* This additive Profile control is shared by both themes and works without JS. */
.appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; border: 0; margin: 0 0 16px; padding: 0; }
.appearance-options legend { padding: 0 0 12px; }
.appearance-option { display: flex; gap: 12px; align-items: center; padding: 16px; min-height: 88px; border: var(--border-panel); border-radius: var(--radius-panel); background: var(--color-panel); cursor: pointer; }
.appearance-option:has(:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.appearance-option:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.appearance-option input { accent-color: var(--color-primary); width: 20px; height: 20px; flex-shrink: 0; }
.appearance-option span { min-width: 0; }
.appearance-option small { display: block; margin-top: 8px; color: var(--color-muted); font-size: .85rem; line-height: 1.5; }

html[data-app-theme="modern"] body.arcade-page .app-nav-item:is(.is-active, :hover, :focus-visible) {
    background: rgb(255 230 0 / 9%);
    color: var(--color-primary);
    box-shadow: inset 2px 0 0 var(--color-primary);
}
html[data-app-theme="modern"] body.arcade-page .app-nav-item.is-active > span { text-shadow: none; }
html[data-app-theme="modern"] body.arcade-page :is(.app-profile-action > span, .app-topbar__register) {
    border-width: 1px;
    border-color: var(--color-border);
    box-shadow: none;
}

html[data-app-theme="modern"] body.arcade-page :is(.page-heading, .market-card, .market-summary, .prediction-panel, .empty-state, .leaderboard-panel, .dashboard-panel, .auth-panel, .community-card, .community-row, .popularity-row, .table-wrap, .dashboard-hero, .dashboard-scoreboard, .dashboard-season-card, .bracket-hero, .bracket-scoreboard, .bracket-round, .bracket-series)::before {
    display: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.awards-landing .market-card, .option-pick__candidate:not(.match-team-surface):not(:has(:checked)))::after { display: none; }

html[data-app-theme="modern"] body.arcade-page .option-pick__identity strong { text-transform: none; }
html[data-app-theme="modern"] body.arcade-page .leaderboard-page--listing :is(.leaderboard-row, .leaderboard-list-heading, .leaderboard-podium__player) {
    background: var(--color-panel);
    box-shadow: none;
    text-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page .leaderboard-page--listing .leaderboard-row.is-current {
    --leaderboard-shine: transparent;
    background: rgb(255 230 0 / 8%);
    box-shadow: inset 2px 0 0 var(--color-primary);
}
html[data-app-theme="modern"] body.arcade-page .leaderboard-page--listing .leaderboard-you { color: var(--color-primary); }
html[data-app-theme="modern"] body.arcade-page .leaderboard-page--listing .leaderboard-podium__player {
    --leaderboard-shine: transparent;
    border-width: 1px;
    border-radius: var(--radius-panel);
    transform: none;
}
html[data-app-theme="modern"] body.arcade-page .leaderboard-page--listing .leaderboard-podium__player--1 {
    border-color: var(--color-primary);
}

html[data-app-theme="modern"] body.arcade-page :is(.markets-hero__background, .dashboard-next-action__background) { background: none; }
html[data-app-theme="modern"] body.arcade-page :is(.generic-market-mini-card__primary, .featured-market-card__primary, .market-mini-card__primary, .match-market-card__pick, .app-topbar__login, .app-topbar__register) {
    text-transform: none;
    font-weight: 650;
    text-shadow: none;
    box-shadow: none;
    border-width: 1px;
    border-radius: var(--radius-control);
}
html[data-app-theme="modern"] body.arcade-page .profile-pick-row__choice { color: var(--color-text); }

/* Owner visual trial: keep the arena visible in the dark, behind all content. */
html[data-app-theme="modern"] body.arcade-page::before {
    display: block;
    background: rgb(0 0 0 / 68%);
    -webkit-backdrop-filter: grayscale(90%);
    backdrop-filter: grayscale(90%);
}

/* Controls have their own radius; page sections and text links are not cards. */
html[data-app-theme="modern"] body.arcade-page :is(button, input:not([type="radio"]):not([type="checkbox"]), select, textarea, .app-icon-action, .app-locale-switcher, .app-account-menu__panel, .app-profile-action > span, .app-coin-counter, .app-topbar__login, .app-topbar__register, .status-pill, .profile-pick-row__choice, .market-action, .ds-badge, .alert) {
    border-radius: var(--radius-control);
}

html[data-app-theme="modern"] body.arcade-page :is(h1, .app-page-hero h1) {
    font-weight: 900;
    text-transform: uppercase;
}

/* Text tabs share a baseline; scrolling remains native for touch and keyboard. */
.app-tab-strip { display: contents; }
.app-tab-strip__hint { display: none; }
html[data-app-theme="modern"] body.arcade-page .app-tab-strip {
    position: relative;
    display: block;
    min-width: 0;
    margin-bottom: var(--space-4);
}
html[data-app-theme="modern"] body.arcade-page .app-tab-strip:has(> [hidden]) { display: none; }
html[data-app-theme="modern"] body.arcade-page .app-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 24px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
html[data-app-theme="modern"] body.arcade-page .app-tabs > :is(a, button, span) {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: max-content;
    min-height: 48px;
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted);
    font: 800 .85rem/1.4 var(--font-body);
    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}
html[data-app-theme="modern"] body.arcade-page .app-tabs > :is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"]) {
    border-bottom-color: var(--color-primary);
    background: transparent;
    color: var(--color-text);
    box-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page .app-tabs > :is(a, button):hover { color: var(--color-text); }
html[data-app-theme="modern"] body.arcade-page .app-tabs > :is(a, button):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -4px;
}
html[data-app-theme="modern"] body.arcade-page .app-tabs > :is(a, button)::before,
html[data-app-theme="modern"] body.arcade-page .app-tabs .conference-mobile-tab__letter { display: none; }
html[data-app-theme="modern"] body.arcade-page .app-tabs strong { font: inherit; text-transform: inherit; }
html[data-app-theme="modern"] body.arcade-page .app-tab-strip__hint {
    position: absolute;
    inset-block: 0 1px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: var(--color-text);
    font: 700 1.4rem/1 var(--font-body);
    pointer-events: none;
}
html[data-app-theme="modern"] body.arcade-page .app-tab-strip__hint--start { left: 0; background: linear-gradient(90deg, var(--color-bg), transparent); }
html[data-app-theme="modern"] body.arcade-page .app-tab-strip__hint--end { right: 0; background: linear-gradient(270deg, var(--color-bg), transparent); }
html[data-app-theme="modern"] body.arcade-page .app-tab-strip[data-overflow-start] > .app-tab-strip__hint--start,
html[data-app-theme="modern"] body.arcade-page .app-tab-strip[data-overflow-end] > .app-tab-strip__hint--end { display: flex; }

/* Shared type hierarchy, states and density — no route-specific composition. */
html[data-app-theme="modern"] body.arcade-page :is(h2, .markets-section-header h2) {
    font: var(--font-section);
    text-transform: none;
    letter-spacing: -.015em;
}
html[data-app-theme="modern"] body.arcade-page :is(.heading-subtitle, .app-page-hero .heading-subtitle, .app-page-hero .dashboard-purpose) {
    color: var(--color-primary);
    font: var(--font-subtitle);
    text-transform: none;
    letter-spacing: .01em;
}
html[data-app-theme="modern"] body.arcade-page .app-page-hero :is(.heading-description, .lede) {
    color: var(--color-text);
    font: var(--font-description);
}
html[data-app-theme="modern"] .market-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
html[data-app-theme="modern"] .market-breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
html[data-app-theme="modern"] .market-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--color-muted);
}
html[data-app-theme="modern"] .market-breadcrumb a { color: inherit; text-decoration: none; }
html[data-app-theme="modern"] .market-breadcrumb a:hover { text-decoration: underline; }
html[data-app-theme="modern"] .market-breadcrumb a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
html[data-app-theme="modern"] body.arcade-page .app-page-hero h1 { --page-title-size: clamp(1.65rem, 6vw, 2.25rem); }
html[data-app-theme="modern"] body.arcade-page .markets-section-header__action {
    color: var(--color-muted);
    font: var(--font-action);
    min-height: var(--tap-target);
}
html[data-app-theme="modern"] body.arcade-page :is(.dashboard-stat__label, .dashboard-stats--strip .dashboard-stat__label) {
    color: var(--color-muted);
    font: var(--font-metric-label);
    text-transform: none;
}
html[data-app-theme="modern"] body.arcade-page :is(.dashboard-ledger-row__copy span, .dashboard-ledger-row__amount span, .market-meta dt, .markets-deadline) {
    color: var(--color-muted);
    font: var(--font-metadata);
    text-transform: none;
}
html[data-app-theme="modern"] body.arcade-page .dashboard-ranking-row.is-current {
    color: var(--color-text);
    box-shadow: inset 2px 0 var(--color-primary);
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button, .market-action, .team-submit, .generic-market-mini-card__primary, .featured-market-card__primary, .match-market-card__pick) {
    min-height: var(--tap-target);
    font-weight: 650;
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button--ghost, .market-action--secondary) {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
html[data-app-theme="modern"] body.arcade-page :is(.ds-button, .market-action, .team-submit)[disabled],
html[data-app-theme="modern"] body.arcade-page :is(.is-disabled, .generic-market-mini-card__primary--disabled) {
    background: var(--color-panel-soft);
    color: var(--color-muted);
    border-color: var(--color-border);
    opacity: .65;
    box-shadow: none;
}
html[data-app-theme="modern"] body.arcade-page :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}
@media (hover: hover) {
    html[data-app-theme="modern"] body.arcade-page :is(.navigation-market-card, .option-pick__candidate, .team-option):hover {
        border-color: var(--color-border-strong);
    }
    html[data-app-theme="modern"] body.arcade-page :is(.ds-button--primary, .team-submit, .generic-market-mini-card__primary):hover { filter: brightness(1.06); }
}
@media (min-width: 961px) {
    html[data-app-theme="modern"] { --section-spacing: 24px; }
    html[data-app-theme="modern"] body.arcade-page .app-page-hero h1 { --page-title-size: 2.6rem; }
}

html[data-app-theme="modern"] body.arcade-page :is(.ds-card, .ds-panel, .empty-state, .option-pick__meta, .option-pick__feedback) { padding: var(--card-padding); }

html[data-app-theme="modern"] body.arcade-page .boost-node.is-selected { transform: none; }