@font-face { font-family: "Open Sans"; src: url("../assets/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../assets/OpenSans-Semibold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }

:root {
    font-family: Open Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg-main: #0D2742;
    --bg-surface: #3A3458;
    --bg-panel: #1E3A57;
    --bg-score-left: #4A4F4A;
    --bg-score-right: #2F5256;
    --text-primary: #F8F4EA;
    --text-secondary: #E6DCC8;
    --text-muted: #CBBEAA;
    --accent-primary: #C46A45;
    --accent-primary-hover: #A95636;
    --accent-gold: #D5AE63;
    --accent-active: #E0B868;
    --button-text: #F8F4EA;
    color: var(--text-primary);
    background: var(--bg-main);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--bg-main); color: var(--text-primary); }
body { overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .55; }

.app-shell { min-height: 100vh; min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: var(--bg-main); color: var(--text-primary); }
.app-shell.light-theme {
    --bg-main: #EDE1CC;
    --bg-surface: #F7F0E3;
    --bg-panel: #EFE5D4;
    --bg-score-left: #D9DDD6;
    --bg-score-right: #D2E0DD;
    --text-primary: #3B2417;
    --text-secondary: #5A4030;
    --text-muted: #705B4A;
    --accent-primary: #C46A45;
    --accent-primary-hover: #A95636;
    --accent-gold: #CFA657;
    --accent-active: #D6B56A;
    --button-text: #F8F4EA;
    background: var(--bg-main);
    color: var(--text-primary);
}
.app-toolbar { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1180px); margin: 0 auto 14px; min-height: 48px; }
.brand-mark { color: var(--text-primary); font-size: 1.15rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.toolbar-actions { display: flex; gap: 8px; }
.icon-button { display: grid; place-items: center; width: 46px; height: 42px; border: 1.5px solid var(--accent-gold); border-radius: 14px; background: var(--bg-panel); color: var(--text-primary); font-size: 1.1rem; }
.icon-button img { width: 23px; height: 23px; }
.icon-button.danger { background: #97504b; }
.portrait-hint { display: none; width: min(100%, 1180px); margin: 0 auto 12px; border: 1px solid var(--accent-gold); border-radius: 10px; padding: 8px 12px; color: var(--text-secondary); font-size: .78rem; text-align: center; }
.notice { width: min(100%, 700px); margin: 0 auto 14px; border-radius: 12px; padding: 12px; }
.notice.error { background: #4a3038; color: #ffe5dc; }
.notice.toast { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 8; width: auto; max-width: min(92vw, 420px); margin: 0; background: #3f684f; color: #f4ffef; box-shadow: 0 8px 24px #0005; }

.home-page, .game-page, .settings-page { width: min(100%, 1180px); margin: 0 auto; }
.home-page { display: grid; min-height: calc(100vh - 100px); place-items: center; }
.home-card { width: min(100%, 800px); border: 3px solid var(--accent-gold); border-radius: 28px; background: var(--bg-surface); padding: clamp(22px, 4vw, 34px); text-align: center; }
.app-logo { display: block; width: 126px; height: 126px; margin: 0 auto 5px; object-fit: contain; }
.home-card h1 { margin: 0; color: var(--text-primary); font-size: clamp(2.5rem, 6vw, 3.5rem); letter-spacing: -.06em; }
.home-subtitle { margin: 7px auto 18px; color: var(--text-secondary); font-size: .95rem; }
.round-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: min(100%, 430px); margin: 0 auto 22px; }
.round-highlight { display: grid; min-height: 94px; place-items: center; gap: 5px; border: 1.5px solid var(--accent-gold); border-radius: 18px; background: var(--bg-panel); padding: 9px; color: var(--text-primary); }
.round-highlight img { width: 44px; height: 44px; }
.round-highlight span { font-size: .76rem; font-weight: 800; }
.home-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.button { min-height: 52px; border: 1px solid transparent; border-radius: 14px; padding: 12px 24px; color: var(--button-text); font-weight: 800; transition: filter .15s ease, transform .15s ease; }
.button:hover, .segment-button:hover, .icon-button:hover, .small-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button { background: var(--accent-primary); }
.secondary-button { background: var(--bg-panel); border-color: var(--accent-gold); }
.neutral-button { background: var(--bg-surface); color: var(--text-primary); border-color: var(--accent-gold); }
.home-actions .button { width: min(100%, 360px); }

.settings-page { display: grid; gap: 14px; width: min(100%, 700px); padding-bottom: 20px; }
.settings-header { border: 3px solid #d7b46a; border-radius: 24px; background: #322e46; padding: 20px; color: #d7b46a; font-size: clamp(1.7rem, 5vw, 2rem); font-weight: 800; text-align: center; }
.settings-card { overflow: hidden; border: 2px solid #d7b46a; border-radius: 20px; background: #3b3652; }
.settings-card summary { cursor: pointer; padding: 14px 18px; color: #fff9e8; font-size: 1.05rem; font-weight: 800; text-align: center; list-style: none; }
.settings-card summary::-webkit-details-marker { display: none; }
.settings-card summary::after { content: " ▾"; color: #d7b46a; }
.settings-card[open] summary::after { content: " ▴"; }
.settings-content { display: grid; gap: 12px; padding: 0 14px 16px; }
.segment-grid { display: grid; gap: 10px; }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segment-button { min-height: 50px; border: 1.5px solid #d7b46a; border-radius: 14px; background: #203447; color: #fff9e8; padding: 8px 10px; font-weight: 800; }
.segment-button.selected { border: 3px solid #f1d9a0; background: #b75d3d; }
.segment-button.unavailable { width: 100%; border-style: dashed; color: #d9c8a1; }
.setting-value { text-align: center; }
.time-slider { accent-color: #d7b46a; width: 100%; }
.options-list { gap: 7px; }
.option-row { display: flex; min-height: 42px; align-items: center; gap: 12px; border: 1px solid #d7b46a; border-radius: 14px; background: #203447; padding: 8px 12px; color: #fff9e8; }
.option-row input { width: 20px; height: 20px; accent-color: #f1d9a0; }
.language-selector { display: grid; grid-template-columns: 54px 1fr 54px; gap: 8px; align-items: center; margin: 0 14px 16px; border: 1px solid #d7b46a; border-radius: 16px; background: #4a455f; padding: 8px; text-align: center; }
.small-button { min-height: 48px; border: 1px solid #d7b46a; border-radius: 13px; background: #304050; color: #fff9e8; font-size: 1.8rem; }
.setting-help { margin: 0; color: #ddd3b8; font-size: .84rem; }
.sound-options { margin-top: 4px; }
.color-settings { gap: 8px; }
.color-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.color-button { width: 42px; height: 42px; border: 2px solid transparent; border-radius: 12px; color: white; font-size: 1.2rem; font-weight: 800; }
.color-button.selected { border-color: #f1d9a0; box-shadow: 0 0 0 2px #b75d3d; }

.game-page { width: min(100%, 1280px); padding-bottom: 20px; }
.score-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.score-card, .timer-card { display: grid; min-height: 74px; place-items: center; border: 2px solid #d7b46a; border-radius: 16px; background: #203447; }
.score-card { border-color: var(--team-color); background: color-mix(in srgb, var(--team-color) 32%, #102133); }
.score-card strong { font-size: clamp(2rem, 5vw, 2.5rem); }
.timer-card { min-width: 88px; border-radius: 22px; background: #223647; }
.timer-card strong { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1; }
.timer-card span { color: #ddd3b8; font-size: .7rem; }
.timer-card.time-up { border-color: #b75d3d; background: #4a3038; }
.game-card { min-height: min(66vh, 650px); border: 3px solid #d7b46a; border-radius: 28px; background: #322e46; padding: clamp(18px, 4vw, 30px); text-align: center; }
.rules-card, .summary-card, .timeout-card { display: grid; place-content: center; justify-items: center; gap: 12px; }
.rules-card { width: min(100%, 800px); margin: auto; }
.rules-card > p { max-width: 500px; color: #ddd3b8; font-size: 1.05rem; }
.round-status { width: 100%; border: 1.5px solid #d7b46a; border-radius: 14px; background: #203447; padding: 9px; color: #fff9e8; font-size: 1.05rem; font-weight: 800; }
.round-rule { display: flex; min-width: min(100%, 370px); align-items: center; justify-content: center; gap: 12px; color: #f1d9a0; font-size: 1.15rem; }
.round-rule img { width: 42px; height: 42px; }
.rules-card .button { width: min(100%, 350px); margin-top: 14px; }
.ready-card { display: grid; place-content: center; justify-items: center; border-color: var(--team-color); background: color-mix(in srgb, var(--team-color) 45%, #16283a); cursor: pointer; }
.ready-card img, .timeout-card img { width: 82px; height: 82px; }
.ready-card h2, .timeout-card h2 { color: #f1d9a0; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.ready-card p, .timeout-card p { color: #ddd3b8; font-size: 1.05rem; }
.word-card { display: grid; min-height: min(66vh, 650px); grid-template-rows: auto 1fr auto; align-items: center; border-color: var(--team-color); background: color-mix(in srgb, var(--team-color) 52%, #322e46); cursor: pointer; }
.concept-badges { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr); gap: 10px; }
.concept-badges span { border: 1.5px solid #d7b46a; border-radius: 14px; background: #203447; padding: 8px 10px; color: #fff9e8; font-size: .82rem; font-weight: 800; }
.word-card h1 { margin: 12px 0; color: #f6ebd0; font-size: clamp(2.6rem, 8vw, 5.2rem); overflow-wrap: anywhere; }
.word-help, .stat-line { color: #ddd3b8; font-size: .86rem; }
.summary-card { min-height: min(58vh, 560px); }
.summary-card h2 { color: #f1d9a0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.summary-card p { color: #ddd3b8; }
.summary-score { display: grid; grid-template-columns: auto auto; gap: 8px 24px; align-items: center; color: #ddd3b8; }
.summary-score strong { color: #f1d9a0; font-size: 2rem; }
.summary-card .button { margin-top: 12px; }

.sound-actions { display: grid; gap: 10px; }
.sound-actions .segment-button { width: 100%; }

.light-theme .settings-header, .light-theme .settings-card, .light-theme .game-card { background: #fbf2e4; }
.light-theme .settings-card summary, .light-theme .option-row, .light-theme .round-status, .light-theme .concept-badges span { color: #4a2c1e; }
.light-theme .option-row, .light-theme .round-status, .light-theme .concept-badges span { background: #fff8ee; }
.light-theme .game-card { color: #4a2c1e; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background: #4a3038; padding: .75rem; color: white; text-align: center; }

@media (orientation: portrait) and (max-width: 800px) {
    .portrait-hint { display: block; }
}

@media (min-width: 900px) and (orientation: landscape) {
    .game-page { max-width: 1280px; }
    .score-grid { margin-inline: auto; width: min(100%, 1120px); }
    .game-card { min-height: clamp(420px, 62vh, 690px); }
    .word-card h1 { font-size: clamp(3rem, 6vw, 6rem); }
}

@media (min-width: 1100px) and (min-height: 800px) {
    .app-toolbar { margin-bottom: 18px; }
    .game-page { padding-bottom: 30px; }
    .game-card { min-height: clamp(520px, 68vh, 760px); }
}

@media (orientation: landscape) and (max-height: 520px) {
    .app-shell { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .app-toolbar { min-height: 40px; margin-bottom: 6px; }
    .score-grid { gap: 8px; margin-bottom: 8px; }
    .score-card, .timer-card { min-height: clamp(54px, 17vh, 74px); }
    .score-card strong, .timer-card strong { font-size: clamp(1.65rem, 7vh, 2.5rem); }
    .timer-card { min-width: clamp(76px, 12vw, 108px); }
    .game-card { min-height: calc(100dvh - 112px); max-height: 690px; padding: clamp(12px, 2vw, 24px); border-radius: 22px; }
    .word-card h1 { margin: 8px 0; font-size: clamp(2rem, 9vh, 4.5rem); }
    .word-help { margin: 5px 0 0; }
    .concept-badges { grid-template-columns: minmax(145px, .8fr) minmax(0, 1.6fr); }
    .ready-card img, .timeout-card img { width: 58px; height: 58px; }
    .ready-card h2, .timeout-card h2 { margin: 8px 0; font-size: clamp(1.35rem, 5vh, 2rem); }
}

@media (max-width: 680px) {
    .app-shell { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .app-toolbar { margin-bottom: 8px; }
    .round-highlights { gap: 6px; }
    .round-highlight { min-height: 82px; padding: 6px; }
    .round-highlight img { width: 36px; height: 36px; }
    .round-highlight span { font-size: .68rem; }
    .score-grid { gap: 6px; }
    .score-card, .timer-card { min-height: 62px; }
    .timer-card { min-width: 72px; }
    .game-card { min-height: clamp(360px, 58vh, 620px); border-radius: 22px; padding: 14px; }
    .concept-badges { grid-template-columns: 1fr; gap: 6px; }
    .word-card h1 { font-size: clamp(2rem, 10vw, 3.8rem); }
    .button-row .button { flex: 1 1 40%; padding-left: 10px; padding-right: 10px; }
}

@media (orientation: portrait) and (max-width: 680px) {
    .app-toolbar { align-items: flex-start; }
    .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
    .game-card { min-height: clamp(430px, 63vh, 620px); }
    .word-card h1 { font-size: clamp(2rem, 11vw, 3.8rem); }
    .concept-badges span { font-size: .76rem; }
}

@media (max-width: 420px) {
    .toolbar-actions { gap: 4px; }
    .icon-button { width: 40px; height: 38px; border-radius: 12px; }
    .home-card { padding: 18px 12px; }
    .app-logo { width: 100px; height: 100px; }
    .three-columns { gap: 6px; }
    .segment-button { padding: 7px 5px; font-size: .82rem; }
}

/* Final statistics remain readable on small screens and use the same data as MAUI. */
.final-stats { display: flex; width: min(100%, 860px); flex-direction: column; gap: 8px; text-align: left; }
.final-total { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.final-total strong { color: var(--team-accent, #f1d9a0); }
.winner-line { margin: 2px 0; text-align: center; font-weight: 800; }
.final-round { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(2, auto); gap: 5px 12px; border: 1px solid currentColor; border-radius: 12px; padding: 8px 10px; }
.final-round strong { grid-column: 1 / -1; }
.round-timing { grid-column: span 1; font-size: .78rem; }

/* The light palette is applied to every interactive surface, including game cards. */
.light-theme {
    --surface: #fffaf3;
    --surface-alt: #f5eadb;
    --surface-strong: #ead9c5;
    --ink: #2f241d;
    --ink-muted: #5e4c3f;
    --border: #8b5d38;
    --accent: #8f3f27;
}
.light-theme .app-toolbar,
.light-theme .game-page,
.light-theme .settings-page,
.light-theme .home-page { color: var(--ink); }
.light-theme .round-highlight,
.light-theme .score-card,
.light-theme .timer-card,
.light-theme .round-status,
.light-theme .concept-badges span,
.light-theme .language-selector,
.light-theme .option-row,
.light-theme .segment-button,
.light-theme .small-button { background: var(--surface); color: var(--ink); }
.light-theme .settings-header,
.light-theme .settings-card,
.light-theme .game-card,
.light-theme .home-card { background: var(--surface-alt); color: var(--ink); }
.light-theme .score-card { background: color-mix(in srgb, var(--team-color) 22%, var(--surface)); }
.light-theme .ready-card,
.light-theme .word-card { background: color-mix(in srgb, var(--team-color) 25%, var(--surface-alt)); }
.light-theme .timer-card.time-up { background: #f4d9d2; color: #5b2017; }
.light-theme .brand-mark,
.light-theme .home-card h1,
.light-theme .summary-card h2,
.light-theme .ready-card h2,
.light-theme .timeout-card h2,
.light-theme .word-card h1,
.light-theme .round-rule,
.light-theme .settings-header { color: var(--ink); }
.light-theme .home-subtitle,
.light-theme .rules-card > p,
.light-theme .ready-card p,
.light-theme .timeout-card p,
.light-theme .word-help,
.light-theme .stat-line,
.light-theme .summary-card p,
.light-theme .timer-card span,
.light-theme .setting-help { color: var(--ink-muted); }
.light-theme .icon-button,
.light-theme .secondary-button,
.light-theme .neutral-button { background: var(--surface); color: var(--ink); border-color: var(--border); }
.light-theme .primary-button { background: var(--accent); color: #fff; }
.light-theme .settings-card,
.light-theme .settings-header,
.light-theme .game-card,
.light-theme .home-card,
.light-theme .round-highlight,
.light-theme .score-card,
.light-theme .timer-card,
.light-theme .round-status,
.light-theme .concept-badges span,
.light-theme .option-row,
.light-theme .segment-button,
.light-theme .language-selector { border-color: var(--border); }
.light-theme .segment-button.selected { background: var(--accent); color: #fff; border-color: #5b271a; }
.light-theme .segment-button.unavailable { color: var(--ink-muted); }
.light-theme .final-total strong { color: var(--accent); }

@media (orientation: portrait) and (max-width: 800px) {
    .home-page { min-height: calc(100dvh - 84px); }
}

@media (max-width: 680px) {
    .final-round { grid-template-columns: 1fr 1fr; }
    .round-timing { grid-column: 1 / -1; }
}

/* Authoritative role-based palette. Component rules below must consume these roles. */
.app-shell {
    --bg-main: #0D2742;
    --bg-surface: #3A3458;
    --bg-panel: #1E3A57;
    --bg-score-left: #4A4F4A;
    --bg-score-right: #2F5256;
    --text-primary: #F8F4EA;
    --text-secondary: #E6DCC8;
    --text-muted: #CBBEAA;
    --accent-primary: #C46A45;
    --accent-primary-hover: #A95636;
    --accent-gold: #D5AE63;
    --accent-active: #E0B868;
    --button-text: #F8F4EA;
}
.app-shell.light-theme {
    --bg-main: #EDE1CC;
    --bg-surface: #F7F0E3;
    --bg-panel: #EFE5D4;
    --bg-score-left: #D9DDD6;
    --bg-score-right: #D2E0DD;
    --text-primary: #3B2417;
    --text-secondary: #5A4030;
    --text-muted: #705B4A;
    --accent-primary: #C46A45;
    --accent-primary-hover: #A95636;
    --accent-gold: #CFA657;
    --accent-active: #D6B56A;
    --button-text: #F8F4EA;
}

.app-shell,
.app-shell .game-page,
.app-shell .settings-page,
.app-shell .home-page { color: var(--text-primary); }
.app-shell .home-card,
.app-shell .settings-card,
.app-shell .settings-header,
.app-shell .game-card { background: var(--bg-surface); color: var(--text-primary); }
.app-shell .round-highlight,
.app-shell .round-status,
.app-shell .concept-badges span,
.app-shell .segment-button,
.app-shell .option-row,
.app-shell .language-selector,
.app-shell .small-button,
.app-shell .icon-button { background: var(--bg-panel); color: var(--text-primary); border-color: var(--accent-gold); }
.app-shell .home-card h1,
.app-shell .word-card h1,
.app-shell .summary-card h2,
.app-shell .ready-card h2,
.app-shell .timeout-card h2,
.app-shell .round-rule,
.app-shell .settings-header,
.app-shell .settings-card summary,
.app-shell .round-status,
.app-shell .concept-badges span { color: var(--text-primary); }
.app-shell .home-subtitle,
.app-shell .rules-card > p,
.app-shell .ready-card p,
.app-shell .timeout-card p,
.app-shell .word-help,
.app-shell .stat-line,
.app-shell .summary-card p,
.app-shell .summary-score,
.app-shell .timer-card span,
.app-shell .setting-help,
.app-shell .portrait-hint { color: var(--text-secondary); }
.app-shell .settings-card summary::after { color: var(--accent-gold); }
.app-shell .primary-button,
.app-shell .segment-button.selected { background: var(--accent-primary); color: var(--button-text); border-color: var(--accent-active); }
.app-shell .primary-button:hover,
.app-shell .segment-button.selected:hover { background: var(--accent-primary-hover); }
.app-shell .secondary-button { background: var(--bg-panel); color: var(--text-primary); border-color: var(--accent-gold); }
.app-shell .neutral-button { background: var(--bg-surface); color: var(--text-primary); border-color: var(--accent-gold); }
.app-shell .score-card,
.app-shell .timer-card { color: var(--text-primary); border-color: var(--accent-gold); }
.app-shell .score-card.team-one { background: var(--bg-score-left); }
.app-shell .score-card.team-two { background: var(--bg-score-right); }
.app-shell .score-card strong,
.app-shell .timer-card strong,
.app-shell .summary-score strong { color: var(--text-primary); }
.app-shell .timer-card { background: var(--bg-surface); }
.app-shell .timer-card.time-up { background: var(--bg-score-right); border-color: var(--accent-primary); }
.app-shell .ready-card,
.app-shell .word-card { background: var(--bg-panel); border-color: var(--team-color); }
.app-shell .score-card.team-one,
.app-shell .score-card.team-two { border-color: var(--accent-gold); }
.app-shell .final-total strong { color: var(--text-primary); }
.app-shell .final-round { border-color: var(--accent-gold); color: var(--text-secondary); }
.app-shell .final-round strong,
.app-shell .winner-line { color: var(--text-primary); }
.app-shell .color-button.selected { border-color: var(--accent-active); box-shadow: 0 0 0 2px var(--accent-primary); }
.app-shell .notice.error { background: var(--bg-score-right); color: var(--text-primary); border: 1px solid var(--accent-gold); }
.app-shell .notice.toast { background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--accent-gold); box-shadow: 0 8px 24px rgb(0 0 0 / 32%); }
.app-shell button:disabled,
.app-shell .segment-button.unavailable { color: var(--text-muted); }
.app-shell .setting-help,
.app-shell .word-help,
.app-shell .stat-line,
.app-shell .portrait-hint { color: var(--text-muted); }
.app-shell .button:focus-visible,
.app-shell button:focus-visible,
.app-shell input:focus-visible,
.app-shell summary:focus-visible { outline: 3px solid var(--accent-active); outline-offset: 3px; }

/* Comparative statistics: the same three-column structure is used at every size. */
.comparison-table { display: grid; width: min(100%, 900px); min-width: 0; overflow: hidden; border: 1px solid var(--accent-gold); border-radius: 14px; background: var(--bg-panel); color: var(--text-primary); text-align: left; }
.comparison-row { display: grid; grid-template-columns: minmax(7.5rem, 22%) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-width: 0; min-height: 42px; border-top: 1px solid color-mix(in srgb, var(--accent-gold) 55%, transparent); }
.comparison-row:first-child { border-top: 0; }
.comparison-row > * { display: flex; min-width: 0; min-height: 42px; align-items: center; padding: 8px 12px; }
.comparison-row > :not(:first-child) { border-left: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent); }
.comparison-header { background: color-mix(in srgb, var(--accent-gold) 18%, var(--bg-panel)); }
.comparison-header > * { color: var(--text-primary); font-weight: 800; }
.comparison-row > strong:first-child { color: var(--text-secondary); }
.comparison-row > strong:first-child { white-space: nowrap; }
.scroll-cell { position: relative; display: block !important; overflow-x: auto; overflow-y: hidden; white-space: nowrap; overflow-wrap: normal; word-break: normal; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent-gold) 60%, transparent) transparent; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.scroll-cell:focus-visible { outline: 2px solid var(--accent-active); outline-offset: -2px; }
.scroll-cell::-webkit-scrollbar { height: 4px; }
.scroll-cell::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--accent-gold) 60%, transparent); }
.timing-value { color: var(--text-secondary); font-size: .88rem; }
.round-details-title { margin-top: 6px; color: var(--text-primary); font-size: .95rem; font-weight: 800; text-align: left; }
.round-table-heading { width: 100%; margin-top: 4px; color: var(--text-secondary); font-size: .84rem; font-weight: 800; text-align: left; }
.final-round-table { width: 100%; }
.final-stats .round-details-title,
.final-stats .round-table-heading,
.final-stats .final-round-table { order: 1; }
.final-stats .final-comparison { order: 2; }
.legacy-final-stats { display: none; }
.round-comparison ~ p { display: none; }
.summary-card { align-content: start; overflow-y: auto; }
.summary-card > h2 { margin: 0; }
.summary-card > .button { margin-top: 8px; }

@media (max-width: 680px) {
    .comparison-row { grid-template-columns: minmax(5.8rem, 23%) minmax(0, 1fr) minmax(0, 1fr); }
    .comparison-row > * { padding: 7px 7px; font-size: .82rem; }
    .comparison-row > strong:first-child { font-size: .76rem; }
    .comparison-header > * { font-size: .78rem; }
    .timing-value { font-size: .76rem; }
    .round-details-title { margin-top: 4px; }
    .round-table-heading { margin-top: 2px; font-size: .78rem; }
}

@media (orientation: landscape) and (max-height: 520px) {
    .comparison-row { grid-template-columns: minmax(5.5rem, 22%) minmax(0, 1fr) minmax(0, 1fr); min-height: 38px; }
    .comparison-row > * { min-height: 38px; padding: 6px 7px; font-size: .78rem; }
    .timing-value { font-size: .72rem; }
}