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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #ffffff;
    overflow: auto;
}

.game-pane-title {
    text-align: center;
    font-size: 2em;
    margin: 10px 0 15px 0;
    color: #4ecdc4;
    text-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
    /* Center over the board + game log row (canvas 600 + gap 20 + log 250 = 870px,
       matching .stats-panel), not the full pane, so the title stays aligned on resize. */
    width: 100%;
    max-width: 870px;
}

.hidden {
    display: none !important;
}

/* Main Container - Left/Right Pane Layout */
.main-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Order left pane before right pane */
.left-pane {
    order: 1;
}
.right-pane {
    order: 2;
}

/* Left Pane - Configuration */
.left-pane {
    width: 400px;
    min-width: 350px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border-right: 2px solid rgba(78, 205, 196, 0.3);
    padding: 20px;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    overflow-y: auto;
}

.left-pane-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.left-pane::-webkit-scrollbar {
    width: 8px;
}

.left-pane::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.left-pane::-webkit-scrollbar-thumb {
    background: rgba(78, 205, 196, 0.4);
    border-radius: 4px;
}

.left-pane::-webkit-scrollbar-thumb:hover {
    background: rgba(78, 205, 196, 0.6);
}

/* Configuration Sections */
.config-pane {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.config-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.section-title {
    font-size: 1em;
    color: #4ecdc4;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #4ecdc4, #44a08d);
    border-radius: 2px;
}

.config-section:hover {
    border-color: rgba(78, 205, 196, 0.3);
    box-shadow: 0 5px 20px rgba(78, 205, 196, 0.1);
}

/* Collapsible Sections */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.collapsible-section .section-title {
    margin-bottom: 0;
    flex: 1;
}

.collapse-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #4ecdc4;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    flex-shrink: 0;
}

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

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

.collapse-icon {
    font-size: 10px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.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;
}

.collapsible-section .section-header {
    margin-bottom: 15px;
}

/* Input Groups */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.9em;
}

.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus,
.input-group input[type="number"]:focus {
    outline: none;
    border-color: #4ecdc4;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(78, 205, 196, 0.2);
}

/* 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;
}

.btn-primary {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
    color: #ffffff;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(86, 171, 47, 0.4);
}

.btn-large {
    padding: 10px;
    font-size: 14px;
}

.btn-control {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
}

.btn-control:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: #ffffff;
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}

.btn-info {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* Disabled button state */
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
    background: rgba(128, 128, 128, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(128, 128, 128, 0.4) !important;
}

.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(128, 128, 128, 0.3) !important;
}

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

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

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

.sort-buttons-label {
    font-weight: 600;
    color: #4ecdc4;
    margin-right: 8px;
    font-size: 0.9em;
}

.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-message {
    padding: 12px;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff6b6b;
    border-radius: 10px;
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
}

/* 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: 12px 40px 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s;
}

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

.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(0, 0, 0, 0.95);
    border: 2px solid rgba(78, 205, 196, 0.5);
    border-radius: 10px;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    contain: layout style paint;
}

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

.dropdown-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: rgba(78, 205, 196, 0.4);
    border-radius: 4px;
}

.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

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

.dropdown-option:hover {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.dropdown-option.selected {
    background: linear-gradient(90deg, rgba(78, 205, 196, 0.4) 0%, rgba(78, 205, 196, 0.2) 100%);
    color: #4ecdc4;
    font-weight: 700;
    border-left: 3px solid #4ecdc4;
}

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

/* Swap Button */
.swap-models-container {
    display: flex;
    justify-content: center;
    margin: -10px 0 10px 0;
}

.btn-swap {
    padding: 8px 20px;
    background: rgba(78, 205, 196, 0.2);
    border: 2px solid rgba(78, 205, 196, 0.5);
    border-radius: 20px;
    color: #4ecdc4;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-swap:hover {
    background: rgba(78, 205, 196, 0.3);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(78, 205, 196, 0.3);
}

/* Selected Model Display */
.selected-model-display {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 8px;
    font-size: 13px;
    color: #4ecdc4;
    min-height: 38px;
    display: flex;
    align-items: center;
    word-break: break-all;
}

/* Active Game Controls */
.active-game-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Game Control Bar - Compact horizontal layout */
.game-control-bar {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 4px 0;
}

.game-control-bar .btn {
    flex: 1;
    padding: 6px 8px;
    min-width: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.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: translateY(-1px);
}

/* Timer Display */
.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.25);
    align-self: center;
    width: fit-content;
}

.timer-icon {
    font-size: 0.85em;
}

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

/* Options Section */
.option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(78, 205, 196, 0.3);
}

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

.option-input {
    width: 60px;
    padding: 8px;
    border-radius: 6px;
    border: 2px solid #4ecdc4;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: bold;
    text-align: center;
}

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

.option-description {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}

/* 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: all 0.3s;
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    border: 2px solid rgba(255, 215, 0, 0.3);
    user-select: none;
}

.debug-checkbox-wrapper:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
}

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

/* 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;
}

/* Ensure loop checkbox works in game control bar */
.game-control-bar .debug-checkbox-wrapper {
    flex: 0 0 auto;
    margin-top: 0;
    align-self: center;
}

.game-control-bar .debug-checkbox-wrapper input[type="checkbox"] {
    z-index: 10;
    position: relative;
}

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

/* Right Pane - Game Visuals */
.right-pane {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.game-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
}

/* Stats Panel */
.stats-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    /* Align with the game-layout row above: canvas(600) + gap(20) + log(250) = 870px.
       Left-aligned so the panel's edges line up with the board (left) and game log (right). */
    width: 100%;
    max-width: 870px;
    align-self: flex-start;
}

.player-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: 0;
}

.player-card:hover {
    border-color: rgba(78, 205, 196, 0.4);
}

.player-model {
    font-size: 0.9em;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

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

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

#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: #4ECDC4;
}


.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 {
    display: flex;
    gap: 8px;
    font-size: 0.85em;
    color: #aaa;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.player-metrics b {
    color: #4ecdc4;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.6);
    font-size: 1.1em;
}

.api-failures {
    color: #f5a623;
    font-weight: 600;
    font-size: 0.95em;
    padding-left: 8px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.api-failures::before {
    content: '⚠️';
    font-size: 1em;
}

.api-errors {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 0.85em;
}

.api-errors::before {
    content: '⚠️';
    font-size: 0.9em;
    margin-right: 2px;
}

.vs {
    font-size: 1em;
    font-weight: bold;
    color: #4ecdc4;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 1400px) {
    .vs {
        font-size: 0.9em;
    }
}

@media (max-width: 1200px) {
    .vs {
        font-size: 0.8em;
    }
}

/* Latency Time Graph */
.latency-timegraph {
    margin-top: 6px;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 30, 1) 100%);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(78, 205, 196, 0.1);
}

.latency-graph-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.latency-graph-title {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 0.7em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.latency-timegraph canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    z-index: 1;
    cursor: crosshair;
}

.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: clamp(0.5em, 1vw, 0.6em);
    color: #aaa;
    padding: 4px 2px;
    border-radius: 4px;
    background: linear-gradient(145deg, #1a1a2e, #0f1520);
    border: 2px solid #162032;
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.5),
        inset -1px -1px 3px rgba(255, 255, 255, 0.05),
        2px 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease;
    position: relative;
    min-width: 0;
}

.latency-stat::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 6px 6px 0 0;
}

.latency-stat:hover {
    border-color: #2d4a6f;
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -1px -1px 2px rgba(255, 255, 255, 0.08),
        3px 3px 10px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(45, 74, 111, 0.2);
    transform: translateY(-1px);
}

.latency-stat label {
    display: block;
    margin-bottom: 2px;
    color: #c2d0e0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.75em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.latency-stat value {
    display: block;
    font-size: 1.1em;
    font-weight: 400;
    color: #ffffff;
    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.6);
    line-height: 1.3;
}

.api-error-count {
    color: #ffd700; /* Yellow color */
    font-weight: 700;
    margin-left: 2px;
}

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

/* Game Layout */
.game-layout {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Toolbar row above the board: legend button on the left, timer centered
   over the 600px canvas (the board). Constrained to the board width so the
   timer's center aligns with the canvas center, not the full pane. */
.game-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 600px;
    align-self: flex-start;
}

/* Legend button pinned to the start of the left column. */
.game-toolbar .fruit-legend-btn {
    justify-self: start;
}

/* Timer centered in the middle column. */
.game-toolbar .timer-display {
    justify-self: center;
    margin: 0;
}

.game-center-panel {
    flex: 1;
    max-width: 600px;
}

.game-right-panel {
    width: 250px;
    flex-shrink: 0;
}

.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;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
}

.fruit-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.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;
    text-shadow: 0 0 5px rgba(255, 217, 61, 0.5);
}

.fruit-item.ultra-rare .fruit-value {
    color: #FF6B6B;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.7);
}

/* Compact legend trigger button — small square chip matching the timer
   height, in the same toolbar row. */
.fruit-legend-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

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

.fruit-legend-btn:active {
    transform: scale(0.95);
}

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

/* Fruit legend popup — page-level (position:fixed), pinned below the trigger
   button via JS getBoundingClientRect(). Reuses the same dark chip styling as
   .benchmark-sort-menu and the .fruit-item rows above for zero restyle. */
.fruit-legend-popover {
    position: fixed;
    z-index: 10000;
    min-width: 210px;
    padding: 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    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;
}

.game-log-panel {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.game-log-panel h3 {
    margin-bottom: 6px;
    color: #4ecdc4;
    font-size: 0.8em;
    text-align: center;
    border-bottom: 1px solid rgba(78, 205, 196, 0.3);
    padding-bottom: 4px;
    flex-shrink: 0;
}

#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: #4ecdc4;
}

#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);
}

/* Custom scrollbar styling */
#log-content::-webkit-scrollbar {
    width: 10px;
}

#log-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

#log-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(78, 205, 196, 0.4), rgba(78, 205, 196, 0.6));
    border-radius: 5px;
    border: 1px solid rgba(78, 205, 196, 0.3);
}

#log-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(78, 205, 196, 0.6), rgba(78, 205, 196, 0.8));
}

/* Compact toggle under the game log panel */
.log-controls {
    flex-shrink: 0;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

.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: 3px solid rgba(78, 205, 196, 0.5);
    border-radius: 10px;
    background: #0a0a15;
    box-shadow: 0 0 30px rgba(78, 205, 196, 0.2);
    width: 600px;
    height: 600px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .left-pane {
        width: 350px;
        min-width: 300px;
    }
}

@media (max-width: 600px) {
    .main-container {
        flex-direction: column;
    }

    .left-pane {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 2px solid rgba(78, 205, 196, 0.3);
    }

    .game-layout {
        flex-direction: column;
    }

    .game-center-panel,
    .game-right-panel {
        width: 100%;
        max-width: none;
    }
}

/* 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: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    max-width: 95vw;
    max-height: 85vh;
    min-width: 600px;
    min-height: 400px;
    width: 800px;
    height: 600px;
    border: 2px solid #4ecdc4;
    box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
}

.benchmark-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.1);
}

.benchmark-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: #4ecdc4;
}

.close-modal-btn {
    background: rgba(255, 107, 107, 0.2);
    border: none;
    color: #ff6b6b;
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-modal-btn:hover {
    background: rgba(255, 107, 107, 0.4);
    transform: scale(1.1);
}

.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: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.benchmark-results-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #4ecdc4;
    border-bottom: 2px solid rgba(78, 205, 196, 0.3);
    background: rgba(30, 30, 50, 0.95);
    backdrop-filter: blur(10px);
}

.benchmark-results-table td {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benchmark-results-table tbody tr {
    background: rgba(20, 20, 35, 0.8);
}

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

.benchmark-results-table tbody tr:first-child {
    background: rgba(255, 215, 0, 0.15);
}

.benchmark-results-table tbody tr:nth-child(2) {
    background: rgba(192, 192, 192, 0.1);
}

.benchmark-results-table tbody tr:nth-child(3) {
    background: rgba(205, 127, 50, 0.1);
}

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

.benchmark-model-cell {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.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: #fff;
    background: rgba(78, 205, 196, 0.2);
}

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

.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-summary {
    margin-top: 20px;
    padding: 12px 15px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 8px;
    border-left: 4px solid #4ecdc4;
}

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

.benchmark-summary-title {
    font-weight: 600;
    color: #4ecdc4;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.benchmark-summary-content {
    color: #ddd;
    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: 6px;
    border-bottom: 2px solid rgba(78, 205, 196, 0.3);
    margin-bottom: 18px;
    padding-bottom: 0;
}

.benchmark-tab {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 0.95em;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.benchmark-tab:hover {
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.08);
}

.benchmark-tab.active {
    color: #4ecdc4;
    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: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    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;
}

@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: #ddd;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

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

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

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

/* Button state while its flyout is open */
.btn.benchmark-sort-btn-active {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: #4ecdc4 !important;
    color: #fff !important;
}