* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(1200px 600px at 70% -10%, #16213b 0%, #0b0e14 60%), #0b0e14;
    color: #e8ecf3;
    overflow: auto;
}

.hidden {
    display: none !important;
}

/* (Old two-pane layout removed in the arena redesign; layout now lives in
   the "Arena layout" section below.) */

/* Collapsible Sections — modern header: full-row click target, ghost
   chevron button with rotation animated purely in CSS via :has(). */
.collapsible-section .section-header {
    display: flex;
    align-items: center;
    margin: -16px -16px 12px;
    padding: 10px 12px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.15s ease;
    justify-content: flex-start;
    gap: 8px;
}

.collapsible-section .section-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.collapsible-section .section-title {
    margin-bottom: 0;
    flex: 1;
    font-size: 0.78em;
    color: #8b94a7;
}

.collapsible-section .section-title::before {
    display: none;
}

.collapse-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8b94a7;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-shrink: 0;
}

.collapse-toggle:hover {
    background: rgba(78, 205, 196, 0.12);
    border-color: rgba(78, 205, 196, 0.45);
}

.collapse-toggle:active {
    transform: scale(0.95);
}

/* Hide the JS-swapped ▶/▼ glyph; CSS chevron rotates on state. */
.collapse-toggle .collapse-icon {
    font-size: 0;
    display: inline-block;
    line-height: 1;
    transition: transform 0.2s ease;
}

.collapse-toggle .collapse-icon::after {
    content: '›';
    font-size: 14px;
    font-weight: 700;
    color: #8b94a7;
}

.collapsible-section:has(.section-content.collapsed) .collapse-icon {
    transform: rotate(0deg);
}

.collapsible-section:not(:has(.section-content.collapsed)) .collapse-icon {
    transform: rotate(90deg);
}

.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.collapsible-section {
    padding: 15px 20px;
}

/* Buttons */
.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-icon {
    font-size: 1.2em;
}

/* Compact Load Models Button */
#load-models-btn {
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    gap: 6px;
}

#load-models-btn .btn-icon {
    font-size: 1em;
}

/* (Variant gradients removed in the unified button system below.) */
.btn-large {
    padding: 10px;
    font-size: 14px;
}

/* Benchmark buttons container */
.benchmark-buttons-container {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.benchmark-buttons-container .btn {
    flex: 1;
}

/* Breathing room when the button row opens a collapsed section. */
#extra-content .benchmark-buttons-container {
    margin-top: 2px;
}

/* Sort buttons container */
.sort-buttons-container {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.sort-buttons-label {
    font-weight: 700;
    color: #8b94a7;
    margin-right: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sort-buttons-container .btn {
    flex: 1;
}

.btn-disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    color: #4ecdc4;
}

/* "N models loaded" confirmation shown below the Load Models button */
.models-loaded-count {
    margin-top: 8px;
    font-size: 0.85em;
    color: #4ecdc4;
    font-weight: 600;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(78, 205, 196, 0.3);
    border-top-color: #4ecdc4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error Message */
.error {
    padding: 10px 12px;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.4);
    border-radius: 8px;
    color: #ff8a8a;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 10px;
}

/* Model Selection */
.player-model-section {
    margin-bottom: 20px;
}

.player-label {
    margin-bottom: 10px;
    font-size: 1em;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* Searchable Dropdown */
.searchable-dropdown {
    position: relative;
}

.searchable-dropdown-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.model-search-input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #0d1220;
    color: #e8ecf3;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.model-search-input:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.dropdown-arrow {
    position: absolute;
    right: 15px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s;
    pointer-events: none;
    font-size: 0.8em;
}

.searchable-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(18, 23, 36, 0.98);
    border: 1px solid rgba(78, 205, 196, 0.35);
    border-radius: 10px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    contain: layout style paint;
}

.dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
}

.dropdown-option {
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
    color: #c6cddb;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: rgba(78, 205, 196, 0.12);
    color: #e8ecf3;
}

.dropdown-option.selected {
    background: rgba(78, 205, 196, 0.14);
    color: #5eead4;
    font-weight: 700;
    border-left: 3px solid #4ecdc4;
}

.dropdown-option.no-results {
    cursor: default;
    color: #888;
    font-style: italic;
}

/* (Swap/selected-model/active-controls removed: no longer in the layout.) */

/* Game Control Bar - Compact horizontal layout */
.btn-small {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

.btn-small .btn-icon {
    font-size: 1em;
}

.btn-small:hover {
    transform: none;
}

/* Timer Display */
.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    background: #161c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #e8ecf3;
    align-self: center;
    width: fit-content;
}

.timer-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

/* Options Section */
.option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 9px 11px;
    background: #0d1220;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.option-label {
    font-weight: 600;
    color: #c6cddb;
    white-space: nowrap;
    font-size: 13px;
}

.option-input {
    width: 60px;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #0d1220;
    color: #e8ecf3;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.option-input:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

/* Helper line tucked under an option row (e.g. visibility range). */
.option-hint {
    font-size: 11px;
    color: #8b94a7;
    line-height: 1.4;
    margin: -6px 0 12px;
    padding-left: 11px;
}

/* Check rows in the Options panel. Canonical names for the new system;
   the legacy .debug-checkbox-wrapper / .debug-compact /
   .debug-checkbox-label selectors below are deprecated aliases. */
.option-check {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #c6cddb;
    user-select: none;
}

.option-check:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: none;
}

.option-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #4ecdc4;
}

.option-check-label {
    cursor: pointer;
    font-weight: 600;
    color: #c6cddb;
    font-size: 13px;
}

/* Debug Checkbox */
.debug-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
    color: #c6cddb;
    border: 1px solid transparent;
    user-select: none;
}

.debug-checkbox-wrapper:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: transparent;
    transform: none;
}

.debug-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4ecdc4;
}

/* Compact debug mode */
.debug-compact {
    padding: 0;
    gap: 5px;
    border: none;
    background: transparent;
    margin-top: 8px;
}

.debug-compact:hover {
    transform: none;
}

.debug-compact input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.debug-checkbox-label {
    cursor: pointer;
    font-weight: 600;
    color: #c6cddb;
    font-size: 13px;
}

/* (Old right-pane/stats/player-card layout removed in the arena redesign.) */

#p1-model-name,
#p2-model-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.player-stats-text {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 0;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1400px) {
    .player-stats-text {
        font-size: 0.8em;
    }
}

@media (max-width: 1200px) {
    .player-stats-text {
        font-size: 0.75em;
    }
}

#p1-model-stats {
    color: #FF6B6B;
}

#p2-model-stats {
    color: #6ea8ff;
}


.player-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.player-dot.red {
    background: #ff4444;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.7);
}

.player-dot.blue {
    background: #4488ff;
    box-shadow: 0 0 8px rgba(68, 136, 255, 0.7);
}

/* (player-metrics/api-failures/api-errors/vs removed: no longer rendered.) */

/* (Old .latency-timegraph removed: graphs live in .latcard now.) */

.latency-graph-title {
    font-size: 10px;
    font-weight: 700;
    color: #8b94a7;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    user-select: none;
}

.latency-stats {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 0;
}

.latency-stat {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #8b94a7;
    padding: 5px 2px;
    border-radius: 6px;
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.latency-stat label {
    display: block;
    margin-bottom: 2px;
    color: #8b94a7;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.8px;
    font-size: 9px;
}

.latency-stat value {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #e8ecf3;
    line-height: 1.3;
}

.api-error-count {
    color: #ffb224;
    font-weight: 700;
    margin-left: 2px;
}

@keyframes error-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* (Old game-layout/toolbar/center/right rules removed in the arena redesign.) */

.fruit-legend-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Popover header (restores the title the old legend column had). */
.fruit-legend-popover-title {
    margin-bottom: 6px;
    color: #4ecdc4;
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid rgba(78, 205, 196, 0.3);
    padding-bottom: 4px;
}

.fruit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.fruit-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.fruit-info {
    flex: 1;
}

.fruit-name {
    font-size: 11px;
    color: #e0e0e0;
    margin-bottom: 1px;
}

.fruit-value {
    font-size: 14px;
    font-weight: bold;
    color: #4ecdc4;
}

.fruit-rarity {
    font-size: 9px;
    color: #888;
    margin-top: 1px;
}

.fruit-item.rare .fruit-value {
    color: #FFD93D;
}

.fruit-item.ultra-rare .fruit-value {
    color: #FF6B6B;
}

/* (Old .fruit-legend-btn block removed: the trigger is .iconbtn now.) */

/* Active state while the legend popover is open */
.iconbtn.fruit-legend-btn-active {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
    color: #fff;
}

/* Fruit legend popup — page-level (position:fixed), pinned below the trigger
   button via JS getBoundingClientRect(). */
.fruit-legend-popover {
    position: fixed;
    z-index: 10000;
    min-width: 210px;
    padding: 10px;
    background: #161c2c;
    border: 1px solid rgba(78, 205, 196, 0.4);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: benchmark-menu-in 0.12s ease;
}

/* (Old .game-log-panel removed: the log rail is .logcard now.) */

#log-content {
    font-size: 11px;
    line-height: 1.4;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scroll-behavior: smooth;
    padding-right: 5px;
}

#log-content p {
    margin-bottom: 3px;
    color: #b0b0b0;
    padding: 1px 0;
}

#log-content .turn {
    color: #e0e0e0;
    font-weight: 600;
}

#log-content .p1 {
    color: #ff6b6b;
}

#log-content .p2 {
    color: #6ea8ff;
}

#log-content .food {
    color: #ffd93d;
}

#log-content .crash {
    color: #ff6b6b;
    font-weight: 600;
}

#log-content .latency {
    font-size: 0.75em;
    color: #888;
    margin-left: 8px;
    font-weight: 400;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
}

/* Color-coded latency styling */
#log-content .latency[data-latency-fast="true"] {
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.15);
}

#log-content .latency[data-latency-medium="true"] {
    color: #ffdd59;
    background: rgba(255, 221, 89, 0.15);
}

#log-content .latency[data-latency-slow="true"] {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}

/* Slim neutral scrollbar */
#log-content::-webkit-scrollbar {
    width: 8px;
}

#log-content::-webkit-scrollbar-track {
    background: transparent;
}

#log-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
}

#log-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.log-control-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    color: #aaa;
    user-select: none;
}

.log-control-checkbox:hover {
    color: #4ecdc4;
}

.log-control-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #4ecdc4;
}

/* Game Canvas */
.game-canvas-container {
    display: flex;
    justify-content: center;
    max-width: 600px;
}

#game-canvas {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #0a0a15;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    width: 600px;
    height: 600px;
}

/* (Old responsive rules removed: the arena layout has its own breakpoint.) */

/* Benchmark Modal Styles */
.benchmark-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.benchmark-modal-content {
    background: #121724;
    border-radius: 12px;
    max-width: 95vw;
    max-height: 85vh;
    min-width: 600px;
    min-height: 400px;
    width: 800px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
}

.benchmark-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

.benchmark-modal-header h2 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #e8ecf3;
}

.close-modal-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8b94a7;
    font-size: 1em;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.close-modal-btn:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.5);
    color: #ff6b6b;
    transform: none;
}

.benchmark-modal-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
    font-size: 0.95em;
}

.benchmark-modal-body .benchmark-summary-title {
    font-size: 1.05em;
}

.benchmark-results-table th,
.benchmark-results-table td {
    font-size: 0.9em;
    padding: 8px 12px;
}

.benchmark-summary-content {
    font-size: 0.95em;
    line-height: 1.4;
}

.benchmark-summary-content p {
    margin: 6px 0;
}

/* Benchmark Results Table */
.benchmark-results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.benchmark-results-table thead {
    position: sticky;
    top: 0;
    z-index: 100;
}

.benchmark-results-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8b94a7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #121724;
}

.benchmark-results-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #c6cddb;
}

.benchmark-results-table tbody tr {
    background: transparent;
}

.benchmark-results-table tbody tr:hover {
    background: rgba(78, 205, 196, 0.07);
}

.benchmark-results-table tbody tr:first-child {
    background: rgba(255, 217, 61, 0.06);
}

.benchmark-results-table tbody tr:nth-child(2),
.benchmark-results-table tbody tr:nth-child(3) {
    background: rgba(255, 255, 255, 0.02);
}

.benchmark-rank {
    font-size: 1.2em;
    font-weight: bold;
}

.benchmark-model-cell {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

.benchmark-latency-positive {
    color: #4ecdc4;
    font-weight: 500;
}

.benchmark-latency-warning {
    color: #ff6b6b;
    font-weight: 500;
}

.benchmark-latency-critical {
    color: #ff4444;
    font-weight: 600;
}

/* Sortable column headers in the results table */
.benchmark-results-table th.benchmark-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.benchmark-results-table th.benchmark-sortable:hover {
    color: #e8ecf3;
    background: rgba(78, 205, 196, 0.1);
}

.benchmark-results-table th.benchmark-sortable-active {
    color: #5eead4;
    background: rgba(78, 205, 196, 0.1);
}

.benchmark-results-table th.benchmark-th-rank {
    cursor: default;
}

.benchmark-success-high {
    color: #4ecdc4;
    font-weight: 600;
}

.benchmark-success-medium {
    color: #ffd93d;
    font-weight: 500;
}

.benchmark-success-low {
    color: #ff6b6b;
    font-weight: 600;
}

.benchmark-no-results {
    text-align: center;
    padding: 40px;
    color: #aaa;
    font-size: 1.2em;
}

.benchmark-no-results-sub {
    font-size: 0.9em;
    margin-top: 10px;
}

.benchmark-summary {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(78, 205, 196, 0.07);
    border-radius: 8px;
    border: 1px solid rgba(78, 205, 196, 0.25);
}

.benchmark-summary-line {
    color: #ddd;
    font-size: 0.95em;
    line-height: 1.4;
}

.benchmark-summary-title {
    font-weight: 700;
    color: #e8ecf3;
    margin-bottom: 8px;
    font-size: 1em;
}

.benchmark-summary-content {
    color: #b8c0cf;
    line-height: 1.6;
}

/* Responsive table */
@media (max-width: 768px) {
    .benchmark-modal-content {
        max-width: 95%;
        max-height: 90vh;
    }

    .benchmark-results-table {
        font-size: 0.85em;
    }

    .benchmark-model-cell {
        font-size: 0.75em;
    }

    .benchmark-results-table th,
    .benchmark-results-table td {
        padding: 8px 10px;
    }
}

/* Benchmark results — tab bar */
.benchmark-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
    padding-bottom: 0;
}

.benchmark-tab {
    background: transparent;
    border: none;
    color: #8b94a7;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease;
    margin-bottom: -1px;
}

.benchmark-tab:hover {
    color: #e8ecf3;
    background: transparent;
}

.benchmark-tab.active {
    color: #5eead4;
    border-bottom-color: #4ecdc4;
}

/* A benchmark tab whose results aren't available yet (not run / failed) */
.benchmark-tab.benchmark-tab-empty {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Each benchmark's table group lives in its own view container */
.benchmark-view.hidden {
    display: none;
}

/* "Sort by Benchmark" flyout submenu — page-level (position:fixed),
   pinned to the right of the button via JS getBoundingClientRect() */
.benchmark-sort-menu {
    position: fixed;
    z-index: 10000;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: #161c2c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: benchmark-menu-in 0.12s ease;
}

@keyframes benchmark-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.benchmark-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 9px 12px;
    color: #c6cddb;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.benchmark-menu-item:hover {
    background: rgba(78, 205, 196, 0.1);
    border-color: rgba(78, 205, 196, 0.35);
}

.benchmark-menu-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #e8ecf3;
}

.benchmark-menu-meta {
    font-size: 0.78em;
    color: #8b94a7;
}

/* Button state while its flyout is open */
.btn.benchmark-sort-btn-active {
    background: rgba(78, 205, 196, 0.14);
    border-color: rgba(78, 205, 196, 0.45);
    color: #5eead4;
}

/* Smooth theme cross-fade on the main surfaces only (not every element). */
body, .rail .card, .logcard, .boardcard, .scoreboard .team, .latcard,
.dropdown-options, .benchmark-modal-content {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ---------- Polished dark theme (Preview A — Arena Pro Dark) ----------
   Styling-only refinements: same layout, panel sizes, and breakpoints.
   One accent, calm 1px borders, flat buttons, timeline log. */

.section-title {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8b94a7;
}

.model-search-input,
.option-input {
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Unified button system: one shape/language, two tones (neutral + accent).
   No gradients, no solid neon blocks, no lift-on-hover. */
.btn {
    background: #1c2438;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8ecf3;
    border-radius: 9px;
    font-weight: 600;
    box-shadow: none;
}

.btn-secondary {
    background: #1c2438;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8ecf3;
}

.btn-primary,
.btn-success {
    background: rgba(78, 205, 196, 0.13);
    border: 1px solid rgba(78, 205, 196, 0.45);
    color: #5eead4;
}

.btn-control,
.btn-info,
.btn-warning {
    background: #1c2438;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8ecf3;
}

.btn:hover,
.btn-secondary:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-control:hover,
.btn-info:hover,
.btn-warning:hover {
    transform: none;
    filter: none;
    box-shadow: none;
    background: #242e48;
    border-color: rgba(255, 255, 255, 0.22);
}

.btn-primary:hover,
.btn-success:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
}

.btn:disabled,
.btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: #1c2438;
    color: #8b94a7;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: none;
}

.player-stats-text {
    font-variant-numeric: tabular-nums;
}

/* Timeline-style log rows */
#log-content p {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 8px 8px 0;
    padding: 6px 10px;
    color: #b8c0cf;
}

#log-content p.p1 {
    border-left-color: #ff6b6b;
}

#log-content p.p2 {
    border-left-color: #4488ff;
}

#log-content p.crash {
    border-left-color: #ff6b6b;
}

#log-content p.food {
    border-left-color: #ffd93d;
}

#game-canvas {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Light theme (Preview B — Light Studio tokens) ---------- */
html[data-theme="light"] body {
    background: linear-gradient(135deg, #f4f5f7 0%, #e9edf3 60%, #dde5ee 100%);
    color: #111827;
}

html[data-theme="light"] .section-title,
html[data-theme="light"] .sort-buttons-label {
    color: #0d9488;
}

html[data-theme="light"] .player-label,
html[data-theme="light"] .debug-checkbox-label,
html[data-theme="light"] .option-check,
html[data-theme="light"] .option-check-label,
html[data-theme="light"] .option-label {
    color: #374151;
}

html[data-theme="light"] .option-hint {
    color: #6b7280;
}

html[data-theme="light"] .model-search-input,
html[data-theme="light"] .option-input {
    background: #f9fafb;
    border-color: #d7dce4;
    color: #111827;
}

html[data-theme="light"] .option-row {
    background: #f9fafb;
    border-color: #e3e6ec;
}

html[data-theme="light"] .dropdown-options {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.15);
}

html[data-theme="light"] .dropdown-option {
    border-bottom-color: #eef0f3;
    color: #111827;
}

html[data-theme="light"] #log-content p {
    color: #4b5563;
    background: rgba(17, 24, 39, 0.03);
    border-left-color: rgba(17, 24, 39, 0.14);
}

html[data-theme="light"] #log-content::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.2);
}

html[data-theme="light"] #log-content::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.32);
}

html[data-theme="light"] .dropdown-option:hover {
    color: #111827;
}

html[data-theme="light"] .latcard canvas {
    background: #f9fafb;
    border: 1px solid #e3e6ec;
}

html[data-theme="light"] .latency-stat {
    background: #ffffff;
    border-color: #e3e6ec;
    color: #6b7280;
}

html[data-theme="light"] .latency-stat label {
    color: #6b7280;
}

html[data-theme="light"] .latency-stat value {
    color: #111827;
}

html[data-theme="light"] #log-content .turn {
    color: #111827;
}

html[data-theme="light"] #game-canvas {
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(16, 24, 40, 0.1);
}

html[data-theme="light"] .fruit-legend-popover,
html[data-theme="light"] .benchmark-sort-menu {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15);
}

html[data-theme="light"] .fruit-legend-popover-title {
    color: #0d9488;
    border-bottom-color: rgba(13, 148, 136, 0.3);
}

html[data-theme="light"] .fruit-name {
    color: #374151;
}

html[data-theme="light"] .fruit-value {
    color: #0f766e;
}

html[data-theme="light"] .fruit-item.rare .fruit-value {
    color: #b45309;
    text-shadow: none;
}

html[data-theme="light"] .fruit-item.ultra-rare .fruit-value {
    color: #dc2626;
    text-shadow: none;
}

html[data-theme="light"] .benchmark-modal-content {
    background: #ffffff;
    border-color: #0d9488;
}

html[data-theme="light"] .benchmark-modal-header {
    background: rgba(13, 148, 136, 0.08);
    border-bottom-color: rgba(13, 148, 136, 0.3);
}

html[data-theme="light"] .benchmark-menu-item,
html[data-theme="light"] .benchmark-menu-title {
    color: #111827;
}

/* Latency graphs stay dark in both themes (instrument-panel look). */

/* ---------- Arena layout (topbar + 3-column command center) ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    background: rgba(11, 14, 20, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-logo {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #4ecdc4;
    color: #062a28;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.topbar-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    color: #ffffff;
    max-width: none;
    margin: 0;
    text-shadow: none;
    text-align: left;
}

.topbar-title .grad {
    background: linear-gradient(90deg, #ffffff 25%, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.app-version {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #8b93a7;
    white-space: nowrap;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8b93a7;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.topbar-link:hover {
    color: #5eead4;
    text-decoration: underline;
}

.topbar-link-inline {
    display: inline;
}

.topbar-sep {
    color: #8b93a7;
    opacity: 0.6;
    font-size: 12px;
}

.topbar-by {
    font-size: 12px;
    color: #8b93a7;
    white-space: nowrap;
}

.github-icon {
    flex-shrink: 0;
}

.topbar-spacer {
    flex: 1;
}

.pill {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(78, 205, 196, 0.12);
    color: #5eead4;
    border: 1px solid rgba(78, 205, 196, 0.35);
    white-space: nowrap;
}

.iconbtn {
    background: #161c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 7px;
    min-width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.iconbtn:hover {
    background: rgba(78, 205, 196, 0.15);
    border-color: rgba(78, 205, 196, 0.5);
}

.iconbtn:active {
    transform: scale(0.95);
}

.arena-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 14px;
    padding: 16px 20px 24px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: start;
}

.rail .card,
.logcard,
.boardcard,
.scoreboard .team,
.latcard {
    background: #121724;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.rail .card {
    padding: 16px;
}

.rail .card + .card {
    margin-top: 12px;
}

.rail .card h2,
.logcard h2 {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8b94a7;
    margin-bottom: 12px;
}

.prov-head {
    font-size: 12px;
    font-weight: 700;
    color: #e8ecf3;
    margin-bottom: 8px;
}

.provtag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 99px;
    margin-left: 6px;
}

.p1tag {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.35);
}

.p2tag {
    background: rgba(68, 136, 255, 0.15);
    color: #6ea8ff;
    border: 1px solid rgba(68, 136, 255, 0.35);
}

#provider-2-block {
    transition: opacity 0.2s ease;
}

#provider-2-block.off {
    opacity: 0.45;
}

#provider-2-block.off input {
    cursor: not-allowed;
}

.toggle-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #8b94a7;
    margin: 2px 0 12px;
    cursor: pointer;
    user-select: none;
}

/* Compact provider rows: preset full-width, URL+key side by side */
.inline-group {
    margin-bottom: 10px;
}

.prov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.prov-grid input {
    width: 100%;
    min-width: 0;
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e8ecf3;
    padding: 9px 11px;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.prov-grid input:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.prov-grid input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Provider 2 collapses away while sharing Provider 1 */
.prov2 {
    margin: 2px 0 4px;
}

.prov2 > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.prov2 > summary::-webkit-details-marker {
    display: none;
}

.prov2 > summary::before {
    content: '▶';
    font-size: 9px;
    color: #8b94a7;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.prov2[open] > summary::before {
    transform: rotate(90deg);
}

.prov2state {
    color: #8b94a7;
    font-weight: 500;
    font-size: 11px;
}

.prov2.off > summary {
    cursor: not-allowed;
}

.toggle-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #4ecdc4;
    cursor: pointer;
}

.model-src {
    font-size: 11px;
    color: #8b94a7;
    margin-top: 5px;
    letter-spacing: 0.3px;
}

.preset-select {
    width: 100%;
    background: #0d1220;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e8ecf3;
    padding: 9px 11px;
    font-size: 13px;
    cursor: pointer;
}

.preset-select:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}

.preset-select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.preset-note {
    font-size: 11px;
    color: #8b94a7;
    margin-top: 6px;
    line-height: 1.4;
}

.preset-note.warn {
    color: #ffb224;
}

.controls-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.controls-row .btn {
    flex: 1;
}

.loop-inline {
    flex: 0 0 auto;
    margin-top: 0;
}

/* Scoreboard strip over the board */
.scoreboard {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
}

.scoreboard .team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-width: 0;
}

.team-who {
    flex: 1;
    min-width: 0;
}

.team-who b {
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-who small {
    color: #8b94a7;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.team-right {
    text-align: right;
}

.team-score {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.score-mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    font-size: 13px;
    color: #8b94a7;
    padding: 0 4px;
}

.score-live {
    color: #ffd93d;
    font-size: 10px;
    letter-spacing: 2px;
}

/* Board + latency dock */
.boardcard {
    border-radius: 16px;
    padding: 14px;
}

.boardcard .game-canvas-container {
    max-width: none;
}

.boardcard #game-canvas {
    width: min(100%, calc(100dvh - 400px));
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    display: block;
}

.latrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.latcard {
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

.latcard .latency-graph-title {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #8b94a7;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.latcard .lat-title-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.latcard .token-counter {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    word-spacing: 6px;
    text-transform: none;
    color: #aab3c5;
    white-space: nowrap;
}

.latcard canvas {
    width: 100%;
    height: 56px;
    display: block;
    background: #0a0a15;
    border-radius: 6px;
    position: static;
    cursor: default;
}

.latcard .latency-stats {
    margin-top: 8px;
}

/* Log rail */
.logcard {
    padding: 14px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 76px;
    overflow: hidden;
}

.logcard #log-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.logcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.logcard-header h2 {
    margin-bottom: 0;
}

/* Viewport-fit shell (desktop): one screen, no page scroll. */
@media (min-width: 1101px) {
    body {
        height: 100dvh;
        overflow: hidden;
    }

    .arena-layout {
        height: calc(100dvh - 38px);
        overflow: hidden;
    }

    .rail,
    .centercol {
        max-height: 100%;
        overflow-y: auto;
        padding-bottom: 4px;
    }

    .logcard {
        position: static;
        max-height: 100%;
    }
}

@media (max-width: 1100px) {
    .arena-layout {
        grid-template-columns: 1fr;
    }

    .logcard {
        position: static;
        max-height: 420px;
    }

    .boardcard #game-canvas {
        width: 100%;
    }
}

/* ---------- Light theme: arena layout surfaces ---------- */
html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #e3e6ec;
}

html[data-theme="light"] .topbar-title {
    color: #111827;
}

html[data-theme="light"] .topbar-title .grad {
    background: linear-gradient(90deg, #111827 25%, #0d9488);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="light"] .app-version {
    color: #6b7280;
}

html[data-theme="light"] .topbar-link,
html[data-theme="light"] .topbar-by,
html[data-theme="light"] .topbar-sep {
    color: #6b7280;
}

html[data-theme="light"] .topbar-link:hover {
    color: #0d9488;
}

html[data-theme="light"] .iconbtn {
    background: #ffffff;
    border-color: #d7dce4;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

html[data-theme="light"] .rail .card,
html[data-theme="light"] .logcard,
html[data-theme="light"] .boardcard,
html[data-theme="light"] .scoreboard .team,
html[data-theme="light"] .latcard {
    background: #ffffff;
    border-color: #e3e6ec;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

html[data-theme="light"] .rail .card h2,
html[data-theme="light"] .logcard h2,
html[data-theme="light"] .toggle-check,
html[data-theme="light"] .model-src,
html[data-theme="light"] .team-who small,
html[data-theme="light"] .score-mid {
    color: #6b7280;
}

html[data-theme="light"] .prov-head,
html[data-theme="light"] .team-who b,
html[data-theme="light"] .team-score {
    color: #111827;
}

html[data-theme="light"] .preset-select {
    background: #f9fafb;
    border-color: #d7dce4;
    color: #111827;
}

html[data-theme="light"] .prov-grid input {
    background: #f9fafb;
    border-color: #d7dce4;
    color: #111827;
}

html[data-theme="light"] .collapsible-section .section-header:hover {
    background: rgba(17, 24, 39, 0.04);
}

html[data-theme="light"] .collapse-toggle {
    border-color: #d7dce4;
}

html[data-theme="light"] .collapse-toggle .collapse-icon::after {
    color: #6b7280;
}

html[data-theme="light"] .collapse-toggle:hover {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.45);
}

html[data-theme="light"] .score-live {
    color: #b45309;
}

html[data-theme="light"] .btn,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-control,
html[data-theme="light"] .btn-info,
html[data-theme="light"] .btn-warning {
    background: #ffffff;
    border-color: #d7dce4;
    color: #374151;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-control:hover,
html[data-theme="light"] .btn-info:hover,
html[data-theme="light"] .btn-warning:hover {
    background: #f3f4f6;
    border-color: #c3cad4;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-success {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.45);
    color: #0f766e;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-success:hover {
    background: rgba(13, 148, 136, 0.16);
    border-color: #0d9488;
}

html[data-theme="light"] .btn:disabled,
html[data-theme="light"] .btn:disabled:hover {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e3e6ec;
}

/* ---------- Modern type pass ---------- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.01em;
}

.topbar-title,
.scoreboard .team-who b,
.team-score {
    letter-spacing: -0.01em;
}

.rail .card h2,
.logcard h2,
.latcard .latency-graph-title {
    font-weight: 700;
}

.player-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e8ecf3;
    display: flex;
    align-items: center;
}

.player-label .player-dot {
    width: 10px;
    height: 10px;
}

/* Model IDs read best in mono */
.model-search-input,
.dropdown-option {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.btn {
    letter-spacing: 0.02em;
}

#log-content {
    line-height: 1.55;
}

#log-content p {
    font-size: 12px;
}

.timer-value,
.team-score,
.latency-stats {
    font-variant-numeric: tabular-nums;
}

html[data-theme="light"] .player-label {
    color: #111827;
}

/* ---------- Light theme: legibility fixes (UI sweep) ----------
   The stylesheet is dark-first, so every pale-on-dark text needs an
   explicit light override. Pure color swaps below — no layout changes. */

/* Disabled buttons use the .btn-disabled class (toggled from benchmark.js),
   which the :disabled rule doesn't cover — without this they render
   white-on-white. */
html[data-theme="light"] .btn-disabled {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e3e6ec !important;
}

html[data-theme="light"] .timer-display {
    background: #ffffff;
    border-color: #e3e6ec;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

html[data-theme="light"] .models-loaded-count,
html[data-theme="light"] .loading {
    color: #0d9488;
}

html[data-theme="light"] .error {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

html[data-theme="light"] .preset-note {
    color: #6b7280;
}

html[data-theme="light"] .preset-note.warn {
    color: #b45309;
}

html[data-theme="light"] .latency-graph-title {
    color: #6b7280;
}

html[data-theme="light"] .latcard .token-counter {
    color: #4b5563;
}

html[data-theme="light"] .dropdown-option.no-results {
    color: #6b7280;
}

html[data-theme="light"] .dropdown-arrow {
    color: rgba(17, 24, 39, 0.4);
}

html[data-theme="light"] .dropdown-options::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.2);
}

html[data-theme="light"] .dropdown-options::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.32);
}

/* Game log: neon accents vanish on white, so use deeper same-hue variants
   (mirrors the canvas fruit palette in js/game.js getFruitFill). */
html[data-theme="light"] #log-content .p1 {
    color: #dc2626;
}

html[data-theme="light"] #log-content p.p1 {
    border-left-color: #dc2626;
}

html[data-theme="light"] #log-content .p2 {
    color: #2563eb;
}

html[data-theme="light"] #log-content p.p2 {
    border-left-color: #2563eb;
}

html[data-theme="light"] #log-content .food {
    color: #b45309;
}

html[data-theme="light"] #log-content p.food {
    border-left-color: #b45309;
}

html[data-theme="light"] #log-content .crash {
    color: #dc2626;
}

html[data-theme="light"] #log-content p.crash {
    border-left-color: #dc2626;
}

html[data-theme="light"] #log-content .latency {
    color: #6b7280;
    background: rgba(17, 24, 39, 0.06);
}

html[data-theme="light"] #log-content .latency[data-latency-fast="true"] {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.12);
}

html[data-theme="light"] #log-content .latency[data-latency-medium="true"] {
    color: #b45309;
    background: rgba(180, 83, 9, 0.1);
}

html[data-theme="light"] #log-content .latency[data-latency-slow="true"] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

html[data-theme="light"] .log-control-checkbox {
    color: #6b7280;
}

html[data-theme="light"] .log-control-checkbox:hover {
    color: #0d9488;
}

/* Benchmark modal: the results table intentionally stays a dark instrument
   panel, but chrome text on the white surfaces must be dark. */
html[data-theme="light"] .benchmark-modal-header h2 {
    color: #111827;
}

html[data-theme="light"] .close-modal-btn {
    color: #6b7280;
    border-color: #d7dce4;
}

html[data-theme="light"] .benchmark-tabs {
    border-bottom-color: #e3e6ec;
}

html[data-theme="light"] .benchmark-tab.active {
    color: #0f766e;
}

html[data-theme="light"] .benchmark-summary-title {
    color: #111827;
}

html[data-theme="light"] .benchmark-summary-line,
html[data-theme="light"] .benchmark-summary-content {
    color: #4b5563;
}

html[data-theme="light"] .benchmark-no-results {
    color: #6b7280;
}

/* Fruit legend popover on white. */
html[data-theme="light"] .fruit-item {
    background: rgba(17, 24, 39, 0.03);
}

html[data-theme="light"] .fruit-rarity {
    color: #6b7280;
}