:root {
    --bg: #f7f9ff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: #ffffff;
    --surface-soft: #f1f4fd;
    --ink: #121c34;
    --ink-soft: #6f7b98;
    --line: rgba(95, 119, 255, 0.12);
    --line-strong: rgba(95, 119, 255, 0.2);
    --purple: #5b4dff;
    --purple-strong: #4136d8;
    --purple-soft: rgba(91, 77, 255, 0.1);
    --blue-soft: rgba(116, 195, 255, 0.18);
    --blue-strong: #2d7ce9;
    --slate-soft: rgba(18, 28, 52, 0.06);
    --confidence-elite-bg: rgba(72, 196, 135, 0.16);
    --confidence-elite-ink: #15734d;
    --confidence-strong-bg: rgba(245, 186, 77, 0.18);
    --confidence-strong-ink: #8a5a00;
    --confidence-steady-bg: rgba(133, 148, 191, 0.14);
    --confidence-steady-ink: #4f6187;
    --confidence-watch-bg: rgba(151, 160, 183, 0.12);
    --confidence-watch-ink: #6b748f;
    --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
    --display: "Newsreader", "Iowan Old Style", serif;
    --sans: "Manrope", "Segoe UI", sans-serif;
}

body.theme-dark {
    --bg: #0d1326;
    --surface: rgba(20, 28, 52, 0.9);
    --surface-strong: #131c34;
    --surface-soft: #18233f;
    --ink: #eef3ff;
    --ink-soft: #93a0c2;
    --line: rgba(139, 157, 255, 0.18);
    --line-strong: rgba(139, 157, 255, 0.32);
    --purple: #7e72ff;
    --purple-strong: #9d93ff;
    --purple-soft: rgba(126, 114, 255, 0.14);
    --blue-soft: rgba(86, 158, 255, 0.18);
    --blue-strong: #7db4ff;
    --slate-soft: rgba(238, 243, 255, 0.06);
    --confidence-elite-bg: rgba(72, 196, 135, 0.18);
    --confidence-elite-ink: #7be1b0;
    --confidence-strong-bg: rgba(245, 186, 77, 0.18);
    --confidence-strong-ink: #ffcf77;
    --confidence-steady-bg: rgba(133, 148, 191, 0.16);
    --confidence-steady-ink: #bcc8e6;
    --confidence-watch-bg: rgba(151, 160, 183, 0.14);
    --confidence-watch-ink: #b7c1db;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--sans);
    background:
        radial-gradient(circle at 12% 10%, rgba(91, 77, 255, 0.07), transparent 18rem),
        radial-gradient(circle at 88% 12%, rgba(72, 196, 135, 0.06), transparent 20rem),
        linear-gradient(180deg, #fbfcff 0%, #f6f8ff 100%);
    background-color: var(--bg);
}

body.theme-dark {
    background:
        radial-gradient(circle at 12% 10%, rgba(126, 114, 255, 0.12), transparent 18rem),
        radial-gradient(circle at 88% 12%, rgba(72, 196, 135, 0.08), transparent 20rem),
        linear-gradient(180deg, #0b1122 0%, #111833 100%);
}

body.drawer-open {
    overflow: hidden;
}

body.filters-drawer-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        "FILL" 0,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

.dashboardShell {
    width: min(1380px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dashboardBackdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.32;
    background-image:
        linear-gradient(rgba(95, 119, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 119, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 92%);
}

.dashboardTopbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.55rem 0 0;
}

.dashboardBrand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.16rem;
    line-height: 1;
}

.dashboardBrand__name {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink);
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.dashboardBrand__namePart {
    display: inline-flex;
    align-items: center;
}

.dashboardBrand__namePart--ai {
    letter-spacing: 0.14em;
}

.dashboardBrand__separator {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    transform: translateY(-0.02em);
}

.dashboardBrand__slash {
    color: var(--purple-strong);
    font-size: 0.98em;
    line-height: 1;
}

.dashboardBrand__dot {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--purple) 0%, #7ce0c1 100%);
}

.dashboardBrand__descriptor,
.dashboardEyebrow,
.dashboardTopbar__pill,
.filterGroup__title,
.filterChip,
.boardLegend__cell,
.drawerMetric__label,
.drawerEyebrow,
.drawerBoardLabel,
.drawerSection__eyebrow,
.drawerSignal__label,
.drawerTrend__label,
.comparisonRow__label,
.drawerPaceSummaryLabel {
    font-family: var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboardBrand__descriptor {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.dashboardTopbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboardThemeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.55rem;
    width: 4.7rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--ink);
    position: relative;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.dashboardThemeToggle:hover {
    transform: translateY(-1px);
}

.dashboardThemeToggle__icon {
    position: relative;
    z-index: 1;
    width: 1.2rem;
    text-align: center;
    font-size: 1.05rem;
    transition: color 180ms ease, opacity 180ms ease;
}

.dashboardThemeToggle__icon--sun {
    color: #f4b63f;
}

.dashboardThemeToggle__icon--moon {
    color: var(--ink-soft);
}

.dashboardThemeToggle__thumb {
    position: absolute;
    top: 0.28rem;
    left: 0.28rem;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(91, 77, 255, 0.08);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.dashboardThemeToggle[aria-pressed="true"] {
    background: rgba(126, 114, 255, 0.14);
    border-color: rgba(126, 114, 255, 0.32);
    color: var(--purple-strong);
}

.dashboardThemeToggle[aria-pressed="true"] .dashboardThemeToggle__thumb {
    transform: translateX(2.1rem);
    background: rgba(126, 114, 255, 0.22);
    border-color: rgba(126, 114, 255, 0.22);
}

.dashboardThemeToggle[aria-pressed="true"] .dashboardThemeToggle__icon--sun {
    color: var(--ink-soft);
    opacity: 0.62;
}

.dashboardThemeToggle[aria-pressed="true"] .dashboardThemeToggle__icon--moon {
    color: var(--purple-strong);
}

.dashboardTopbar__pill,
.dashboardTopbar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0 0.96rem;
    border-radius: 999px;
}

.dashboardTopbar__pill {
    border: 1px solid rgba(72, 196, 135, 0.16);
    background: rgba(72, 196, 135, 0.1);
    color: var(--confidence-elite-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboardTopbar__link {
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 180ms ease;
}

.dashboardTopbar__link:hover {
    transform: translateY(-1px);
}

.dashboardMain {
    padding: 1.6rem 0 3.5rem;
}

.dashboardHero {
    max-width: 56rem;
    padding-bottom: 1rem;
}

.filtersLauncher {
    display: none;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.4rem;
    margin-top: 0.9rem;
    padding: 0 0.88rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--purple-strong);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.dashboardEyebrow {
    margin: 0 0 0.7rem;
    color: var(--purple-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.dashboardTitle {
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.dashboardLead {
    max-width: 48rem;
    margin: 0.72rem 0 0;
    color: var(--ink-soft);
    font-size: 0.98rem;
    line-height: 1.7;
}

.dashboardWorkspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 0.35rem;
}

.filtersPanel {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.9rem;
    position: sticky;
    top: 5.75rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(95, 119, 255, 0.08);
}

.filtersPanel__grid {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    order: 1;
}

.filtersPanel__clearButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--purple-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, opacity 160ms ease;
}

.filtersPanel__clearButton:hover {
    opacity: 0.72;
}

.filtersPanel__clearButton:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

.filtersPanel__clearButton--drawer {
    align-self: flex-start;
}

.filterGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.52rem;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
}

.filterGroup__title {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

.filterGroup__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: 100%;
}

.filterChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(95, 119, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.filterChip:hover {
    transform: translateY(-1px);
    border-color: rgba(95, 119, 255, 0.18);
}

.filterChip.is-active {
    border-color: rgba(91, 77, 255, 0.18);
    background: rgba(91, 77, 255, 0.1);
    color: var(--purple-strong);
}

body.theme-dark .filtersPanel {
    border-right-color: rgba(139, 157, 255, 0.14);
}

body.theme-dark .filterChip {
    border-color: rgba(139, 157, 255, 0.16);
    background: rgba(19, 28, 52, 0.88);
    color: var(--ink-soft);
}

body.theme-dark .filterChip:hover {
    border-color: rgba(139, 157, 255, 0.28);
    background: rgba(24, 35, 63, 0.96);
}

body.theme-dark .filterChip.is-active {
    border-color: rgba(126, 114, 255, 0.28);
    background: rgba(126, 114, 255, 0.16);
    color: var(--purple-strong);
}

.boardSection {
    position: relative;
    overflow: visible;
    padding-bottom: 0.25rem;
    min-width: 0;
}

.boardSection__results {
    margin: 0 0 0.35rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.boardSection__status {
    margin: 0 0 0.95rem;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
}

.boardLegend,
.gameCard {
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(0, 0.72fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 0.56fr) minmax(0, 0.96fr) minmax(132px, 0.98fr);
    gap: 0.9rem;
    align-items: center;
}

.gameCard__topPills,
.gameCard__statsStrip {
    display: none;
}

.boardLegend {
    position: sticky;
    top: 0.65rem;
    z-index: 6;
    padding: 0.9rem 1rem 0.75rem;
    margin-bottom: 0.7rem;
}

.boardLegend__cell {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}

.boardLegend__cell--matchup {
    padding-left: 0.1rem;
    text-align: left;
}

.boardLegend__cell--action {
    text-align: right;
}

.gameGrid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.gameCard {
    position: relative;
    isolation: isolate;
    padding: 1.15rem 1.15rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease;
    grid-template-areas:
        "matchup pick market model edge confidence action"
        "subline subline subline subline subline subline subline";
}

.gameCard--featured {
    border: 2px solid transparent;
    padding-top: 3.1rem;
}

.gameCard--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #2a0f6f 0%, #6f35ff 28%, #b98dff 52%, #7d4dff 74%, #4a19d8 100%);
    background-size: 220% 220%;
    animation: featuredBorderShift 5s linear infinite;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.gameCard--featured:hover {
    border-color: transparent;
}

.gameCard__featuredBadge {
    position: absolute;
    top: 1rem;
    left: 1.1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0 0.82rem;
    border: 1px solid rgba(91, 77, 255, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, #3d21a8 0%, #6f35ff 52%, #9c7bff 100%);
    color: #f7f7ff;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: none;
    box-shadow: 0 10px 24px rgba(91, 77, 255, 0.18);
}

body.theme-dark .gameCard__featuredBadge {
    border-color: rgba(158, 176, 255, 0.18);
    background: linear-gradient(135deg, #4a28c7 0%, #7d5cff 58%, #b29cff 100%);
    color: #fcfcff;
    box-shadow: 0 10px 24px rgba(58, 42, 128, 0.32);
}

.gameCard:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
}

.gameCard:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
}

@keyframes featuredBorderShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gameCard__matchup {
    min-width: 0;
    grid-area: matchup;
}

.gameCard__matchupTeams {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gameCard__team {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    min-width: 0;
}

.gameCard__teamLogo {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.gameCard__teamName {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.gameCard__subline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    grid-area: subline;
    width: 100%;
    margin-top: 0.2rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.gameCard__miniStat {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    min-width: 0;
    padding: 0.78rem 0.82rem;
    border-radius: 18px;
    background: rgba(18, 28, 52, 0.03);
}

.gameCard__miniStatLabel {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gameCard__miniStatValue {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

body.theme-dark .gameCard__miniStat {
    background: rgba(238, 243, 255, 0.05);
}

.gameCard__subline span {
    position: relative;
}

.gameCard__subline span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.54rem;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(111, 123, 152, 0.5);
    transform: translateY(-50%);
}

.gameCard__cell,
.gameCard__actionCell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    text-align: center;
}

.gameCard__cellLabel {
    display: none;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gameCard__cell--pick {
    grid-area: pick;
}

.gameCard__cell--market {
    grid-area: market;
}

.gameCard__cell--model {
    grid-area: model;
}

.gameCard__cell--edge {
    grid-area: edge;
}

.gameCard__cell--confidence {
    grid-area: confidence;
}

.gameCard__actionCell {
    grid-area: action;
}

.gameCard__cellValue {
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.gameCard__cellValue.is-live,
.drawerMetric__value.is-live,
.drawerMetric__value--edge.is-live,
.drawerTrend__value.is-live {
    color: var(--ink);
}

.gameCard__cellValue.is-na,
.drawerMetric__value.is-na,
.drawerMetric__value--edge.is-na,
.drawerTrend__value.is-na {
    color: var(--ink-soft);
}

.gameCard__direction,
.drawerDirection {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(95, 119, 255, 0.12);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.gameCard__direction.is-under,
.drawerDirection.is-under {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.gameCard__direction.is-over,
.drawerDirection.is-over {
    background: rgba(91, 77, 255, 0.08);
    color: var(--purple-strong);
}

.gameCard__confidenceBadge,
.drawerConfidence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.78rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.gameCard__confidenceBadge.is-elite,
.drawerConfidence.is-elite {
    background: var(--confidence-elite-bg);
    color: var(--confidence-elite-ink);
}

.gameCard__confidenceBadge.is-strong,
.drawerConfidence.is-strong {
    background: var(--confidence-strong-bg);
    color: var(--confidence-strong-ink);
}

.gameCard__confidenceBadge.is-steady,
.drawerConfidence.is-steady {
    background: var(--confidence-steady-bg);
    color: var(--confidence-steady-ink);
}

.gameCard__confidenceBadge.is-watch,
.drawerConfidence.is-watch {
    background: var(--confidence-watch-bg);
    color: var(--confidence-watch-ink);
}

.gameCard__actionCell {
    align-items: flex-end;
}

.gameCard__actionButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0 0.94rem;
    border: 2px solid var(--purple);
    border-radius: 8px;
    background: transparent;
    color: var(--purple-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.gameCard__actionButton:hover {
    transform: translateY(-1px);
    background: rgba(91, 77, 255, 0.08);
}

.gameCard__actionButton:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

.emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    border: 1px dashed rgba(95, 119, 255, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.68);
    text-align: center;
}

.emptyState__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.95rem;
    padding: 0 0.76rem;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple-strong);
    font-size: 0.62rem;
    font-weight: 700;
}

.emptyState h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.26rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.emptyState p {
    max-width: 28rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
}

.drawerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 16, 32, 0.42);
    backdrop-filter: blur(6px);
    z-index: 60;
}

.filtersOverlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 16, 32, 0.36);
    backdrop-filter: blur(5px);
    z-index: 50;
}

.filtersDrawer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 51;
    pointer-events: none;
}

.filtersDrawer__panel {
    width: 100%;
    max-height: min(78vh, 680px);
    padding: 1rem 1rem 1.2rem;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 220ms ease;
}

.filtersDrawer[aria-hidden="false"] {
    pointer-events: auto;
}

.filtersDrawer[aria-hidden="false"] .filtersDrawer__panel {
    transform: translateY(0);
}

.filtersDrawer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filtersDrawer__eyebrow {
    margin: 0 0 0.38rem;
    color: var(--purple-strong);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filtersDrawer__title {
    margin: 0;
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.filtersDrawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
}

.filtersDrawer__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body.theme-dark .filtersDrawer__close {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--ink);
}

body.theme-dark .drawerOverlay {
    background: rgba(4, 7, 16, 0.62);
}

.detailDrawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(620px, 100%);
    pointer-events: none;
    z-index: 61;
}

.detailDrawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 1.2rem;
    overflow-y: auto;
    border-left: 1px solid rgba(95, 119, 255, 0.1);
    background: rgba(251, 252, 255, 0.96);
    backdrop-filter: blur(18px);
    transform: translateX(104%);
    transition: transform 220ms ease;
    pointer-events: auto;
}

body.theme-dark .detailDrawer__panel {
    border-left-color: rgba(139, 157, 255, 0.12);
    background: rgba(10, 16, 32, 0.96);
}

.detailDrawer.is-open .detailDrawer__panel {
    transform: translateX(0);
}

.detailDrawer__close {
    position: sticky;
    top: 0;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid rgba(18, 28, 52, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
}

.detailDrawer__close .material-symbols-rounded {
    font-size: 1.18rem;
}

body.theme-dark .detailDrawer__close {
    border-color: rgba(238, 243, 255, 0.1);
    background: rgba(26, 36, 64, 0.92);
    color: #f4f7ff;
}

.drawerContent {
    padding-top: 0.72rem;
}

.drawerHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.drawerMatchup {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.drawerEyebrow {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
}

.drawerTitle {
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.drawerVenue {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.6;
}

.drawerHeaderMeta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}

.drawerBoardLabel {
    color: var(--purple-strong);
    font-size: 0.64rem;
    font-weight: 700;
}

.drawerMetricGrid,
.drawerProjectionGrid,
.drawerSignals,
.drawerTrendGrid {
    display: grid;
    gap: 0.8rem;
}

.drawerMetricGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.drawerSummaryCard {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    padding: 1rem;
}

body.theme-dark .drawerSummaryCard {
    background: rgba(19, 28, 52, 0.92);
}

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

.drawerTrendGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.drawerProjectionCard,
.drawerSignal,
.drawerTrend,
.drawerStatComparison,
.drawerPaceCard {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
}

body.theme-dark .drawerProjectionCard,
body.theme-dark .drawerSignal,
body.theme-dark .drawerTrend,
body.theme-dark .drawerStatComparison,
body.theme-dark .drawerPaceCard {
    background: rgba(19, 28, 52, 0.92);
}

.drawerMetricStat,
.drawerProjectionCard,
.drawerSignal,
.drawerTrend,
.drawerStatComparison,
.drawerPaceCard {
    padding: 1rem;
}

.drawerMetricStat {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
}

.drawerMetric__label,
.drawerSignal__label,
.drawerTrend__label,
.comparisonRow__label {
    color: var(--ink-soft);
    font-size: 0.58rem;
    font-weight: 700;
}

.drawerTrend__label--logo {
    display: inline-flex;
    align-items: center;
    min-height: 1rem;
}

.drawerTrend__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.drawerTrend__brandMark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.drawerTrend__brandText {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.drawerTrend__brandLogo,
.drawerTrend__brandSvg {
    display: block;
    height: 1rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    overflow: visible;
}

.drawerTrend__brandLogo--fanduel {
    height: 1rem;
}

.drawerTrend__brandLogo--draftkings {
    height: 1.05rem;
}

.drawerMetric__value {
    display: block;
    color: var(--ink);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.drawerTrend--wide {
    grid-column: 1 / -1;
}

.drawerTrend--marketLead {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.drawerTrend--book {
    display: flex;
    flex-direction: column;
}

.drawerMarketLead__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.drawerMarketLead__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(95, 119, 255, 0.1);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.drawerMarketLead__pill.is-live {
    background: rgba(25, 195, 125, 0.12);
    color: #159a63;
}

.drawerMarketLead__pill.is-na {
    background: rgba(95, 119, 255, 0.08);
    color: var(--ink-soft);
}

.drawerMarketStats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgba(95, 119, 255, 0.08);
    border-radius: 18px;
    background: rgba(247, 249, 255, 0.72);
}

body.theme-dark .drawerMarketStats {
    border-color: rgba(139, 157, 255, 0.14);
    background: rgba(13, 21, 42, 0.94);
}

.drawerMarketStat {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
}

.drawerMarketStat__value {
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.drawerStatComparison {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drawerSpiderCard {
    border: 1px solid rgba(95, 119, 255, 0.08);
    border-radius: 20px;
    background: rgba(247, 249, 255, 0.78);
    padding: 1rem;
}

body.theme-dark .drawerSpiderCard {
    border-color: rgba(139, 157, 255, 0.14);
    background: rgba(13, 21, 42, 0.94);
}

.drawerSpiderCard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.drawerSpiderCard__copy {
    max-width: 28rem;
    margin: 0.38rem 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.6;
}

.drawerSpiderLegend {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.drawerSpiderLegend__team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drawerSpiderLegend__team--away {
    background: rgba(91, 77, 255, 0.1);
    color: var(--purple-strong);
}

.drawerSpiderLegend__team--home {
    background: rgba(87, 216, 162, 0.14);
    color: #148156;
}

.drawerSpiderLayout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.drawerSpiderChartWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.drawerSpiderChart {
    width: min(100%, 320px);
    height: auto;
    overflow: visible;
}

.drawerSpiderChart__ring,
.drawerSpiderChart__axis {
    fill: none;
    stroke: rgba(95, 119, 255, 0.14);
    stroke-width: 1;
}

body.theme-dark .drawerSpiderChart__ring,
body.theme-dark .drawerSpiderChart__axis {
    stroke: rgba(139, 157, 255, 0.16);
}

.drawerSpiderChart__shape {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.drawerSpiderChart__shape--away {
    fill: rgba(91, 77, 255, 0.16);
    stroke: var(--purple-strong);
}

.drawerSpiderChart__shape--home {
    fill: rgba(87, 216, 162, 0.16);
    stroke: #1ba36d;
}

.drawerSpiderChart__label {
    fill: var(--ink-soft);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.drawerSpiderMetrics {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.drawerSpiderMetrics__head,
.drawerSpiderMetrics__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(70px, auto) minmax(70px, auto);
    gap: 0.55rem;
    align-items: center;
}

.drawerSpiderMetrics__head {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(95, 119, 255, 0.08);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.theme-dark .drawerSpiderMetrics__head {
    border-bottom-color: rgba(139, 157, 255, 0.12);
}

.drawerSpiderMetrics__row {
    padding: 0.18rem 0;
}

.drawerSpiderMetrics__label {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.drawerSpiderMetrics__value {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
}

.drawerSpiderMetrics__value--away {
    color: var(--purple-strong);
}

.drawerSpiderMetrics__value--home {
    color: #148156;
}

.drawerDirection {
    min-height: 1.85rem;
    padding: 0 0.72rem;
    font-size: 0.88rem;
}

.drawerSection {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-top: 1.8rem;
}

.drawerSection__eyebrow {
    color: var(--purple-strong);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.drawerSection__title {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.drawerSection__copy {
    max-width: 44rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

body.theme-dark .drawerEyebrow,
body.theme-dark .drawerVenue,
body.theme-dark .drawerSection__copy,
body.theme-dark .drawerSpiderCard__copy,
body.theme-dark .drawerSignal__subtext,
body.theme-dark .drawerTrend__subtext,
body.theme-dark .drawerProjectionMeta,
body.theme-dark .drawerTeamSub,
body.theme-dark .drawerMetric__label,
body.theme-dark .drawerSignal__label,
body.theme-dark .drawerTrend__label,
body.theme-dark .comparisonRow__label,
body.theme-dark .drawerPaceSummaryLabel,
body.theme-dark .drawerSpiderMetrics__head {
    color: var(--ink-soft);
}

body.theme-dark .drawerTitle,
body.theme-dark .drawerSection__title,
body.theme-dark .drawerTeamName,
body.theme-dark .drawerTrend__brandText,
body.theme-dark .drawerPaceValue,
body.theme-dark .drawerPaceSummaryValue,
body.theme-dark .drawerProjectionValue,
body.theme-dark .drawerMetric__value,
body.theme-dark .drawerMarketStat__value,
body.theme-dark .drawerSpiderMetrics__label,
body.theme-dark .drawerSpiderMetrics__value,
body.theme-dark .comparisonRow__value {
    color: var(--ink);
}

body.theme-dark .drawerSignal__chip {
    background: rgba(126, 114, 255, 0.14);
    color: var(--purple-strong);
}

.drawerPaceRows {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.drawerPaceRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.drawerTeamIdentity,
.drawerProjectionHeader {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.drawerTeamIdentity {
    min-width: 12rem;
}

.drawerTeamLogo {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

.drawerTeamName {
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.drawerTeamSub,
.drawerProjectionMeta,
.drawerTrend__subtext {
    display: block;
    margin-top: 0.18rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

.drawerProjectionMeta {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drawerPaceTrack {
    flex: 1 1 auto;
    height: 0.82rem;
    border-radius: 999px;
    background: rgba(95, 119, 255, 0.12);
    overflow: hidden;
}

.drawerPaceFill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.drawerPaceFill--away {
    background: linear-gradient(90deg, #5b4dff 0%, #7c70ff 100%);
}

.drawerPaceFill--home {
    background: linear-gradient(90deg, #57d8a2 0%, #7fe4ba 100%);
}

.drawerPaceValue {
    min-width: 3rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    text-align: right;
}

.drawerPaceSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(95, 119, 255, 0.1);
}

.drawerPaceSummaryLabel {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0 0.76rem;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple-strong);
    font-size: 0.6rem;
    font-weight: 700;
}

.drawerPaceSummaryValue {
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.drawerProjectionCard {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.drawerProjectionValue {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.drawerSignal__body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.65rem;
}

.drawerSignal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.drawerSignal__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0 0.68rem;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple-strong);
    font-size: 0.62rem;
    font-weight: 700;
}

.drawerSignal__text {
    margin: 0;
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.drawerSignal__subtext {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

.drawerTrend__value {
    display: block;
    margin-top: 0.45rem;
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.comparisonTable {
    display: flex;
    flex-direction: column;
}

.comparisonRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.82rem 0;
    border-bottom: 1px solid rgba(95, 119, 255, 0.08);
}

.comparisonRow:last-child {
    border-bottom: 0;
}

.comparisonRow__values {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 0.65rem;
    align-items: center;
}

.comparisonCell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.7rem;
    border: 1px solid rgba(95, 119, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
}

.comparisonCell__team {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.comparisonCell__value {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

@media (max-width: 1180px) {
    .dashboardWorkspace {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .filtersPanel {
        display: none;
    }

    .filtersLauncher {
        display: inline-flex;
    }

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

    .drawerSpiderLayout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .boardLegend {
        grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
        grid-template-areas: "matchup pick edge confidence action";
        gap: 0.72rem 0.82rem;
    }

    .gameCard {
        grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "matchup pick edge confidence action"
            "matchup market model confidence action"
            "subline subline subline subline subline";
        gap: 0.72rem 0.82rem;
    }

    .gameCard--featured {
        padding-top: 3rem;
    }

    .boardLegend__cell--matchup,
    .gameCard__matchup {
        grid-area: matchup;
    }

    .boardLegend__cell--pick,
    .gameCard__cell--pick {
        grid-area: pick;
    }

    .boardLegend__cell--market,
    .gameCard__cell--market {
        grid-area: market;
    }

    .boardLegend__cell--model,
    .gameCard__cell--model {
        grid-area: model;
    }

    .boardLegend__cell--edge,
    .gameCard__cell--edge {
        grid-area: edge;
    }

    .boardLegend__cell--confidence,
    .gameCard__cell--confidence {
        grid-area: confidence;
    }

    .boardLegend__cell--action,
    .gameCard__actionCell {
        grid-area: action;
    }

    .gameCard__actionCell {
        align-items: stretch;
    }

    .gameCard__actionButton {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 780px) {
    .dashboardShell {
        width: min(100% - 24px, 1380px);
    }

    .dashboardTitle {
        font-size: clamp(1.85rem, 8vw, 2.7rem);
    }

    .boardLegend {
        display: none;
    }

    .gameCard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "matchup"
            "subline"
            "stats"
            "action";
        gap: 0.82rem 0.72rem;
        padding: 1rem;
        border-radius: 22px;
        align-items: stretch;
    }

    .gameCard--featured {
        padding-top: 4.2rem;
    }

    .gameCard__featuredBadge {
        top: 0.9rem;
        left: 1rem;
        min-height: 1.85rem;
        padding: 0 0.74rem;
        font-size: 0.58rem;
    }

    .gameCard__matchupTeams {
        gap: 0.58rem;
    }

    .gameCard__teamLogo {
        width: 2rem;
        height: 2rem;
    }

    .gameCard__teamName {
        font-size: 0.95rem;
    }

    .gameCard__matchup {
        padding-right: min(11.5rem, 46vw);
    }

    .gameCard__subline {
        margin-top: -0.1rem;
        gap: 0.45rem 0.8rem;
        font-size: 0.76rem;
        width: 100%;
    }

    .gameCard__cell {
        display: none;
    }

    .gameCard__topPills {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
        max-width: calc(100% - 7.5rem);
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 2;
    }

    .gameCard__statsStrip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.72rem;
        width: 100%;
        grid-area: stats;
    }

    .gameCard__miniStatValue {
        font-size: 1rem;
    }

    .gameCard__cellLabel {
        display: inline-flex;
    }

    .gameCard__direction,
    .drawerDirection,
    .gameCard__confidenceBadge {
        min-height: 1.9rem;
        padding: 0 0.64rem;
        font-size: 0.76rem;
    }

    .gameCard__confidenceBadge {
        white-space: nowrap;
    }

    .gameCard__actionCell {
        align-items: stretch;
        background: transparent;
        padding: 0;
        grid-area: action;
        margin-top: 0.12rem;
    }

    .gameCard__actionButton {
        width: 100%;
        min-height: 2.8rem;
        font-size: 0.8rem;
    }

    .boardSection__results {
        font-size: 0.66rem;
        line-height: 1.55;
    }

    .boardSection__status {
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .detailDrawer {
        width: 100%;
    }

    .detailDrawer__panel {
        width: 100%;
    }

    .drawerHead {
        flex-direction: column;
    }

    .drawerHeaderMeta {
        align-items: flex-start;
    }

    .drawerSpiderCard__header {
        flex-direction: column;
    }

    .drawerProjectionGrid,
    .drawerSignals,
    .drawerTrendGrid,
    .comparisonRow__values {
        grid-template-columns: 1fr;
    }

    .drawerMarketLead__top {
        flex-direction: column;
    }

    .drawerMarketStats {
        grid-template-columns: 1fr;
    }

    .drawerPaceRow,
    .comparisonRow {
        align-items: flex-start;
        flex-direction: column;
    }

    .drawerPaceValue {
        text-align: left;
    }

    .drawerSpiderMetrics__head,
    .drawerSpiderMetrics__row {
        grid-template-columns: minmax(0, 1fr) minmax(62px, auto) minmax(62px, auto);
    }
}

@media (max-width: 560px) {
    .dashboardMain {
        padding: 1.1rem 0 2.5rem;
    }

    .dashboardHero {
        padding-bottom: 0.75rem;
    }

    .dashboardTitle {
        font-size: clamp(1.7rem, 10vw, 2.3rem);
    }

    .filterChip {
        min-height: 1.9rem;
        padding: 0 0.72rem;
        font-size: 0.66rem;
    }

    .gameCard {
        gap: 0.72rem;
    }

    .gameCard__subline {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.36rem 0.72rem;
    }

    .gameCard__subline span {
        min-width: 0;
    }

    .gameCard__topPills {
        max-width: calc(100% - 2rem);
        gap: 0.42rem;
    }

    .gameCard__statsStrip {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.62rem;
    }

    .gameCard__miniStat {
        padding: 0.72rem 0.72rem 0.76rem;
    }

    .gameCard__miniStatValue {
        font-size: 0.96rem;
    }

    .detailDrawer__panel {
        padding: 1rem 1rem 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .dashboardTopbar__link,
    .filterChip,
    .gameCard,
    .detailDrawer__panel {
        transition: none;
    }

    .gameCard--featured::before {
        animation: none;
    }
}