/* ===================================
   TRIVIA SYSTEM - MODERN CSS
   =================================== */

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body#nav_master_modern {
    font-family: "ofelia-display", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #003462;
    color: #fff;
    overflow-x: auto;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #fff;
    margin-top: 15px;
    font-size: 16px;
}

/* Main Container */
.trivia-container {
    display: flex;
    width: fit-content;         /* Only as wide as content needs */
    min-height: 100vh;
    padding: 10px;
}

/* ===================================
   LEFT SIDEBAR
   =================================== */
.sidebar-left {
    width: 500px; /* Adjusted: more room for team names on right */
    min-width: 500px;
    padding: 15px;
    background: #002953;
    border-radius: 15px;
    margin-right: 10px;
    font-size: 22px; /* Reduced from 24px per user request */
}

/* Menu Toggle */
.menu-toggle {
    margin-bottom: 10px;
}

#menu-toggle-btn {
    width: 100%;
    background: #0666a4;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

#menu-toggle-btn:hover {
    background: #0888d4;
}

/* Sidebar Menu */
.sidebar-menu {
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-menu.collapsed {
    max-height: 0;
}

.menu-buttons {
    padding: 10px 0;
}

.menu-buttons .btn {
    margin-bottom: 8px;
    font-size: 14px;
    padding: 8px;
    border-radius: 8px;
}

/* Settings Panel */
.settings-panel {
    background: #001a33;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
}

.settings-panel h5 {
    color: #92c83e;
    margin-bottom: 15px;
    font-size: 18px;
}

.settings-panel .form-group {
    margin-bottom: 12px;
}

.settings-panel label {
    display: block;
    color: #febe10;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

.settings-panel .form-control {
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 6px;
    font-size: 14px;
}

/* Content Sections */
.content-section {
    margin-bottom: 15px;
}

/* Launch Buttons */
.launch-button {
    background: #414141;
    border-radius: 15px;
    margin-bottom: 10px;
    transition: background 0.3s;
}

.launch-button.launch-game {
    background: grey;
}

.launch-button.launch-rules {
    background: orange;
}

.launch-button.launch-start {
    background: #d72136;
}

.launch-button:hover {
    opacity: 0.9;
}

.launch-button .btn-launch {
    display: block;
    padding: 15px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px; /* Increased from 16px for much better visibility */
}

/* Splash Navigation */
.splash-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.splash-controls button {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    border-radius: 8px;
}

.splash-round-info {
    background: #002953; /* Changed from orange to dark blue */
    padding: 15px;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 10px;
}

.splash-round-info .round-title {
    font-size: 20px;
    font-weight: bold;
    color: #febe10; /* Changed to yellow for contrast */
}

.splash-categories {
    background: #002953;
    padding: 15px;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    line-height: 1.6;
}

/* Question Navigation */
#question-nav {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.current-rq {
    background: #002953;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 10px;
    font-size: 24px; /* Reduced from 26px per user request */
    font-weight: bold;
    color: #fff;
}

.question-nav-options {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.question-nav-options button {
    flex: 1;
    padding: 10px;
    font-size: 16px; /* Increased from 12px for better visibility */
    border-radius: 8px;
    font-weight: bold;
}

/* Info Boxes */
.info-box {
    background: #002953;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px; /* Reduced from 22px per user request */
    font-weight: bold;
    margin-bottom: 8px;
}

.info-header.category-box .info-header { color: mediumpurple; }
.info-header.question-box .info-header { color: #d72136; }
.info-header.answer-box .info-header { color: #febe10; }
.info-header.host-info-box .info-header { color: #0666a4; }
.info-header.coming-up-box .info-header { color: #92c83e; }

.info-content {
    color: #fff;
    font-size: 18px; /* Reduced from 24px per user request */
    line-height: 1.7;
}

.info-box .btn-link {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

.info-box .btn-link:hover {
    background: rgba(255,255,255,0.3);
}

/* Jump To Box */
.jump-to-box {
    background: #92c83e;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
}

.jump-to-box label {
    display: block;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.jump-to-box .form-control {
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 6px;
}

/* Timer Section */
.timer-section {
    background: #002953;
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
}

.timer-header {
    color: #febe10;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 8px;
}

.timer-controls {
    display: flex;
    flex-direction: column;
}

.timer-controls select {
    font-size: 14px;
    padding: 6px;
}

.timer-display-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.timer-display {
    flex: 1;
    background: #001a33;
    color: #febe10;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.timer-controls button {
    flex: 0 0 auto;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
}

/* Webcam Section */
.webcam-section {
    background: #002953;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.webcam-header {
    color: #febe10;
    font-weight: bold;
    font-size: 20px; /* Increased from 16px for better visibility */
    margin-bottom: 8px;
}

.webcam-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.webcam-controls button {
    width: 100%;
    height: 40px; /* Fixed height for consistency */
    font-size: 14px;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    line-height: 24px; /* Centers text vertically */
}

.webcam-preview {
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* Jump To Section (Always Visible) */
.jump-to-section {
    background: #002953;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.jump-to-header {
    color: #febe10;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 8px;
}

.jump-to-section .jump-to-box {
    background: transparent; /* Override the green background since we're in a blue container */
    padding: 0;
    margin-top: 0;
}

.jump-to-section .jump-to-box .form-control {
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px;
    font-size: 16px;
}


#webcam-video, #webcam-canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   RIGHT CONTENT AREA (SCORING)
   =================================== */
.content-area {
    width: 570px;
    min-width: 570px;
    max-width: 570px;
    background: #001a33;
    border-radius: 15px;
    padding: 10px;
}

/* Add Team Bar */
.add-team-bar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 12px;          /* Reduced from 15px → 12px */
    padding: 8px 12px;            /* Reduced from 14px 18px → 8px 12px */
    margin-bottom: 5px;           /* Reduced from 12px → 8px */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid #4a5f7f;
}

.add-team-form {
    display: flex;
    gap: 8px;
    align-items: center;
    /* Removed flex-wrap: wrap to keep all on one line */
}

.add-team-form input {
    background: #fff;
    color: #000;
    border: 2px solid #ddd;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 80px;
}

.add-team-form input:focus {
    outline: none;
    border-color: #febe10;
    box-shadow: 0 0 0 3px rgba(254, 190, 16, 0.2);
}

.add-team-form input[name="team_id"] {
    max-width: 60px;           /* Shrunk from 80px - max 5 digits */
    flex: 0 0 60px;            /* Don't grow */
}

.add-team-form input[name="teamname"] {
    min-width: 150px;          /* Reduced from 200px to save space */
    flex: 2;                   /* Grows more than others */
}

.add-team-form input[name="aka"] {
    min-width: 100px;
    flex: 1;
}

.add-team-form input[name="players"] {
    max-width: 65px;           /* Shrunk from 80px - max 2 digits, show "# PPL" */
    flex: 0 0 65px;            /* Don't grow */
}

.btn-add-team {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    border: 2px solid #b177d1;
    padding: 8px 18px;            /* Reduced from 10px 24px → 8px 18px */
    border-radius: 8px;           /* Reduced from 10px → 8px */
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(155, 89, 182, 0.3);
    flex-shrink: 0;
}

.btn-view-all-teams {
    /*background: linear-gradient(135deg, yellow 0%, #8e44ad 100%);*/
    background: yellow;
    color: #000;
    border: 2px solid #000;
    padding: 8px 18px;            /* Reduced from 10px 24px → 8px 18px */
    border-radius: 8px;           /* Reduced from 10px → 8px */
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(155, 89, 182, 0.3);
    flex-shrink: 0;
}

/* ========================================
   Frequently Played Teams Modal
   Match add-team-bar styling
   ======================================== */

/* Main container - matches add-team-bar */
#freq-teams-panel {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 12px;
    padding: 6px 8px;          /* Reduced from 8px 12px */
    margin: 8px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid #4a5f7f;
    min-width: 520px;          /* Ensure all columns fit */
    max-width: 100%;           /* Don't exceed content area */
    overflow-x: auto;          /* Scroll if needed */
}

/* Header section */
.freq-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;        /* Reduced from 12px */
    padding-bottom: 6px;       /* Reduced from 8px */
    border-bottom: 2px solid rgba(254, 190, 16, 0.3);
}

.freq-panel-header h3 {
    color: #febe10;
    font-size: 18px;
    margin: 0;
    font-weight: 600;
}

/* Close button */
.btn-close-freq-teams {
    background: #e74c3c;
    color: white;
    border: 2px solid #c0392b;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-freq-teams:hover {
    background: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Content area with teams */
.freq-panel-content {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;              /* Reduced from 12px */
    border-radius: 8px;
    margin-bottom: 8px;        /* Reduced from 12px */
}

.teams-found-text {
    color: #fff;
    margin-bottom: 6px;        /* Reduced from 10px */
    font-weight: 500;
    font-size: 14px;
}

/* Table styling */
.freq-teams-table {
    width: 100%;
    min-width: 480px;          /* Ensure all columns fit */
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    overflow: hidden;
    table-layout: auto;        /* Let columns size naturally */
}

.freq-teams-table thead tr {
    background: #2c3e50;
    color: white;
}

.freq-teams-table th {
    padding: 4px 6px;          /* Reduced from 6px */
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}

/* Column widths for fixed layout */
.freq-teams-table th:nth-child(1) { min-width: 50px; }    /* ID */
.freq-teams-table th:nth-child(2) { min-width: 145px; }   /* Team Name */
.freq-teams-table th:nth-child(3) { min-width: 105px; }   /* AKA */
.freq-teams-table th:nth-child(4) { min-width: 65px; }    /* Players */
.freq-teams-table th:nth-child(5) { min-width: 80px; }    /* Action */

.freq-teams-table td {
    padding: 4px 6px;          /* Reduced from 6px */
    font-size: 13px;
}

.freq-teams-table .even-row {
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.freq-teams-table .odd-row {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.freq-teams-table .team-id {
    color: #007bff;
}

.freq-teams-table .action-cell {
    text-align: center;
}

/* Input fields in table */
.freq-team-name {
    width: 140px;              /* Reduced from 200px */
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;          /* Reduced padding */
    font-weight: 500;
    font-size: 13px;
}

.freq-team-aka {
    width: 100px;              /* Reduced from 150px */
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;          /* Reduced padding */
    color: #495057;
    font-size: 13px;
}

.freq-team-players {
    width: 60px;               /* Reduced from 80px */
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;          /* Reduced padding */
    color: #495057;
    font-size: 13px;
}

/* Add button in table */
.btn-add-freq-team {
    font-weight: 600;
    padding: 4px 12px;        /* Reduced from 6px 16px */
    font-size: 13px;
}

/* Empty state */
.freq-panel-empty {
    padding: 40px 20px;
    text-align: center;
}

.freq-panel-empty .empty-primary {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 500;
}

.freq-panel-empty .empty-secondary {
    color: #ddd;
    font-size: 13px;
    margin: 0;
}

/* Footer section */
.freq-panel-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid rgba(254, 190, 16, 0.3);
}

.freq-panel-footer p {
    color: #ddd;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

.freq-panel-footer .btn {
    margin-right: 8px;
}



.btn-settle-up {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: 2px solid #45a049;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(76, 175, 80, 0.3);
    flex-shrink: 0;
}

.btn-settle-up:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(76, 175, 80, 0.4);
}

.settle-up-btn-container {
    margin-left: 10px;
}

.btn-add-team:hover {
    background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(155, 89, 182, 0.4);
}

/* Scoring Info Bar */
.scoring-info-bar {
    background: linear-gradient(135deg, #febe10 0%, #ffcd3c 100%);
    color: #000;
    padding: 3px 3px 3px 8px;           /* Reduced from 8px 12px → 6px 10px */
    border-radius: 8px;          /* Reduced from 10px → 8px */
    margin-bottom: 2px;          /* Reduced from 3px → 2px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(254, 190, 16, 0.3);
    border: 2px solid #ffd54f;
}

.scoring-info-left {
    font-size: 14px;            /* Reduced from 15px → 14px */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;                   /* Reduced from 6px → 5px */
}

.scoring-info-left::before {
    font-size: 14px;            /* Reduced from 20px → 16px */
}

#scoring-current-rq {
    background: rgba(0, 0, 0, 0.15);
    padding: 3px 10px;          /* Reduced from 4px 12px → 3px 10px */
    border-radius: 5px;         /* Reduced from 6px → 5px */
    font-weight: 900;
    letter-spacing: 0.8px;      /* Reduced from 1px → 0.8px */
}

.scoring-info-right button {
    background: linear-gradient(135deg, #d72136 0%, #c41e30 100%);
    color: #fff;
    border: 2px solid #e63946;
    padding: 4px 12px;          /* Reduced from 5px 14px → 4px 12px */
    border-radius: 6px;         /* Reduced from 8px → 6px */
    font-weight: bold;
    font-size: 12px;            /* Reduced from 13px → 12px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(215, 33, 54, 0.3);
}

.scoring-info-right button:hover {
    background: linear-gradient(135deg, #c41e30 0%, #b01a29 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(215, 33, 54, 0.4);
}

/* Team Scoring Container */
.team-scoring-container {
    margin-bottom: 4px;         /* Reduced from 8px → 4px */
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;               /* Reduced from 12px → 8px */
    border-radius: 10px;        /* Reduced from 15px → 10px */
    max-width: 800px;           /* Limit single column width */
}

.team-columns {
    display: flex;
    gap: 16px;
}

.team-column {
    flex: 1;
    min-width: 0; /* Allow flex shrinking */
    background: rgba(0, 0, 0, 0.15);
    padding: 10px;
    border-radius: 10px;
}

/* Team Row */
.team-row {
    background: linear-gradient(135deg, #2a2a2a 0%, #383838 100%);
    border-radius: 8px;
    /*padding: 2px 5px;            /* MINIMAL padding */
    margin-bottom: 2px;          /* VERY LITTLE space between teams */
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.team-row:nth-child(even) {
    background: linear-gradient(135deg, #333333 0%, #3d3d3d 100%);
}

.team-row:hover {
    background: linear-gradient(135deg, #404040 0%, #4a4a4a 100%);
    border-color: #febe10;
    box-shadow: 0 4px 8px rgba(254, 190, 16, 0.15);
    transform: translateY(-1px);
}

.team-row.score-flash {
    animation: scoreFlash 0.5s ease;
}

@keyframes scoreFlash {
    0%, 100% { background: linear-gradient(135deg, #2a2a2a 0%, #383838 100%); }
    50% { background: linear-gradient(135deg, #febe10 0%, #ffcd3c 100%); }
}

.score-update-flash {
    animation: scoreUpdateFlash 0.5s ease;
}

@keyframes scoreUpdateFlash {
    0%, 100% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.2); color: #febe10; font-weight: 900; }
}

/* REMOVED: Green bar on scored teams - user requested removal
.team-row.scored {
    border-left: 4px solid #4CAF50;
}
*/

/* FIX 2.4: Removed confusing green checkmark
.team-row.scored::before {
    content: "✓";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    color: #4CAF50;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
*/

.team-name {
    flex: 1;
    color: #fff;
    font-size: 16px;            /* Reduced from 18px → 16px */
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.3px;      /* Reduced from 0.5px → 0.3px */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding-left: 6px;          /* Reduced from 8px → 6px */
}

.team-row:hover .team-name {
    color: #febe10;
}

.team-score-buttons {
    display: flex;
    gap: 4px;                   /* Reduced from 6px → 4px */
    padding-right: 6px;
}

.team-score-buttons.correct {
    background: rgba(76, 175, 80, 0.15);
}

.team-score-buttons.incorrect {
    background: rgba(244, 67, 54, 0.15);
}

/* Modern Score Buttons */
.score-btn {
    width: 36px;                /* Reduced from 48px → 36px */
    height: 36px;               /* Reduced from 48px → 36px */
    border: none;
    border-radius: 8px;         /* Reduced from 10px → 8px */
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 900;
    font-size: 18px;            /* Reduced from 22px → 18px */
    font-family: 'Arial Black', sans-serif;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.score-btn::before {
    content: attr(data-value);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.score-btn:hover {
    transform: translateY(-2px) scale(1.08);    /* Reduced scale from 1.1 → 1.08 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 15px rgba(254, 190, 16, 0.4);
}

.score-btn:active {
    transform: scale(1.05) translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.score-btn.pulse {
    animation: buttonPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes buttonPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); box-shadow: 0 0 30px rgba(254, 190, 16, 0.8); }
    50% { transform: scale(1.15); }
    75% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Correct (Green) Score Buttons */
.score-btn[data-value="5"][data-yn="Y"] {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border: 3px solid #66BB6A;
}

.score-btn[data-value="3"][data-yn="Y"] {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    border: 3px solid #81C784;
}

.score-btn[data-value="1"][data-yn="Y"] {
    background: linear-gradient(135deg, #81C784 0%, #66BB6A 100%);
    border: 3px solid #A5D6A7;
}

.score-btn[data-value="5"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
    border-color: #4CAF50;
}

.score-btn[data-value="3"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border-color: #66BB6A;
}

.score-btn[data-value="1"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    border-color: #81C784;
}

/* Incorrect (Red) Score Buttons */
.score-btn[data-value="5"][data-yn="N"] {
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%);
    border: 3px solid #EF5350;
}

.score-btn[data-value="3"][data-yn="N"] {
    background: linear-gradient(135deg, #EF5350 0%, #f44336 100%);
    border: 3px solid #E57373;
}

.score-btn[data-value="1"][data-yn="N"] {
    background: linear-gradient(135deg, #E57373 0%, #EF5350 100%);
    border: 3px solid #EF9A9A;
}

.score-btn[data-value="5"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%);
    border-color: #f44336;
}

.score-btn[data-value="3"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%);
    border-color: #EF5350;
}

.score-btn[data-value="1"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #EF5350 0%, #f44336 100%);
    border-color: #E57373;
}

/* Rounds 4-6: 6, 4, 2 Point Values - Green for Correct */
.score-btn[data-value="6"][data-yn="Y"] {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border: 3px solid #66BB6A;
}

.score-btn[data-value="4"][data-yn="Y"] {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    border: 3px solid #81C784;
}

.score-btn[data-value="2"][data-yn="Y"] {
    background: linear-gradient(135deg, #81C784 0%, #66BB6A 100%);
    border: 3px solid #A5D6A7;
}

.score-btn[data-value="6"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
    border-color: #4CAF50;
}

.score-btn[data-value="4"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border-color: #66BB6A;
}

.score-btn[data-value="2"][data-yn="Y"]:hover {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    border-color: #81C784;
}

/* Rounds 4-6: 6, 4, 2 Point Values - Red for Incorrect */
.score-btn[data-value="6"][data-yn="N"] {
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%);
    border: 3px solid #EF5350;
}

.score-btn[data-value="4"][data-yn="N"] {
    background: linear-gradient(135deg, #EF5350 0%, #f44336 100%);
    border: 3px solid #E57373;
}

.score-btn[data-value="2"][data-yn="N"] {
    background: linear-gradient(135deg, #E57373 0%, #EF5350 100%);
    border: 3px solid #EF9A9A;
}

.score-btn[data-value="6"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%);
    border-color: #f44336;
}

.score-btn[data-value="4"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%);
    border-color: #EF5350;
}

.score-btn[data-value="2"][data-yn="N"]:hover {
    background: linear-gradient(135deg, #EF5350 0%, #f44336 100%);
    border-color: #E57373;
}

/* Halftime Buttons: 0, 2, 4, 6, 8 - Green styling */
.btn-halftime-zero {
    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
    border: 3px solid #555;
}

.btn-halftime-zero:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    border-color: #333;
}

.btn-halftime-correct {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border: 3px solid #66BB6A;
}

.btn-halftime-correct:hover {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
    border-color: #4CAF50;
}

/* Final Round Styling */
.team-score-buttons.final-wager {
    display: flex;
    align-items: center;
    gap: 6px;                   /* Reduced from 8px → 6px */
    background: rgba(254, 190, 16, 0.1);
    padding: 4px 6px;           /* Reduced from 8px → 4px 6px */
    border-radius: 8px;         /* Reduced from 10px → 8px */
}

.final-wager-input {
    width: 80px !important;          /* Reduced from 100px → 80px */
    height: 36px !important;         /* Reduced from 48px → 36px */
    font-size: 20px !important;      /* Reduced from 24px → 20px */
    font-weight: 900 !important;
    text-align: center !important;
    border: 2px solid #febe10 !important;     /* Reduced from 3px → 2px */
    border-radius: 8px !important;   /* Reduced from 10px → 8px */
    background: rgba(0, 0, 0, 0.3) !important;
    color: #febe10 !important;
    font-family: 'Arial Black', sans-serif !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-right: 4px !important;    /* Reduced from 5px → 4px */
    padding: 0 !important;
    line-height: 36px !important;    /* Match new height */
    vertical-align: middle !important;
}

.final-wager-input:focus {
    outline: none !important;
    border-color: #fff !important;
    box-shadow: 0 0 20px rgba(254, 190, 16, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4) !important;
    transform: scale(1.05) !important;
}

.final-wager-input::placeholder {
    color: rgba(254, 190, 16, 0.4) !important;
    font-size: 18px !important;
}

/* Final Correct Button - Match score button style */
.btn-final-correct {
    width: 80px !important;          /* Reduced from 100px → 80px */
    height: 36px !important;         /* Reduced from 48px → 36px */
    border: none !important;
    border-radius: 8px !important;   /* Reduced from 10px → 8px */
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 900 !important;
    font-size: 16px !important;      /* Reduced from 18px → 16px */
    font-family: 'Arial Black', sans-serif !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
    border: 2px solid #66BB6A !important;  /* Reduced from 3px → 2px */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-final-correct:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(76, 175, 80, 0.4) !important;
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%) !important;
    border-color: #4CAF50 !important;
}

.btn-final-correct:active {
    transform: scale(1.0) translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Final Incorrect Button - Match score button style */
.btn-final-incorrect {
    width: 80px !important;          /* Reduced from 100px → 80px */
    height: 36px !important;         /* Reduced from 48px → 36px */
    border: none !important;
    border-radius: 8px !important;   /* Reduced from 10px → 8px */
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 900 !important;
    font-size: 16px !important;      /* Reduced from 18px → 16px */
    font-family: 'Arial Black', sans-serif !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%) !important;
    border: 2px solid #EF5350 !important;  /* Reduced from 3px → 2px */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-final-incorrect:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 20px rgba(244, 67, 54, 0.4) !important;
    background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%) !important;
    border-color: #f44336 !important;
}

.btn-final-incorrect:active {
    transform: scale(1.0) translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Disabled/Used Score Buttons */
.score-btn:disabled,
.score-btn.used {
    opacity: 0.25;
    cursor: not-allowed;
    filter: grayscale(80%);
    transform: scale(0.9);
}

.score-btn:disabled:hover,
.score-btn.used:hover {
    transform: scale(0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.score-btn.used::before {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

.team-final-score {
    min-width: 60px;
    height: 36px;               /* Match score button height exactly */
    display: flex;              /* Added for vertical centering */
    align-items: center;        /* Vertically center the text */
    justify-content: center;    /* Horizontally center the text */
    text-align: center;
    color: #FFF;
    font-size: 20px;
    font-weight: 900;
    background: #000;
    padding: 0 10px;            /* Only horizontal padding, vertical handled by flex */
    border-radius: 8px;
    border: 2px solid #febe10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(254, 190, 16, 0.4);
    font-family: 'Arial Black', sans-serif;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.team-row:hover .team-final-score {
    transform: scale(1.05);
}

/* Team Management Buttons */
.team-actions {
    display: flex;
    gap: 4px;
    margin-left: 4px;
}

.btn-team-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-edit-team {
    display: none; /* Hidden - users can click team name to edit */
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    border: 2px solid #5dade2;
}

.btn-edit-team:hover {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
    transform: translateY(-1px);
}

.btn-drop-team {
    /*background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);*/
    color: #fff;
    border: 2px solid #f5b041;
}

.btn-drop-team:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    transform: translateY(-1px);
}

.btn-delete-team {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    border: 2px solid #ec7063;
}

.btn-delete-team:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
}

.btn-team-action:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Jump To Scoring Bar */
.jump-to-scoring-bar {
    background: linear-gradient(135deg, #d72136 0%, #c41e30 100%);
    border-radius: 10px;
    padding: 3px 8px 8px 8px;
    display: flex;
    gap: 8px;
    align-items: flex-start;  /* Changed from center for better layout */
    flex-wrap: wrap;
    box-shadow: 0 3px 6px rgba(215, 33, 54, 0.3);
    border: 2px solid #e63946;
}

.jump-label {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    width: 100%;              /* Force label to take full width */
    margin-bottom: 4px;
}

.jump-buttons {
    display: grid;
    grid-template-columns: repeat(10, 32px);  /* 10 columns: 1-1 through HT */
    gap: 4px;
    flex: 0 0 auto;
    width: 100%;             /* Take full width to force next items to new line */
}

.jump-btn {
    width: 32px;
    height: 32px;
    background: #fff;
    color: #000;
    border: 2px solid transparent;
    padding: 0;                 /* Changed from 5px 10px for fixed size */
    border-radius: 6px;         /* Reduced from 8px → 6px */
    font-size: 12px;            /* Reduced from 13px → 12px */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jump-btn:hover {
    background: #febe10;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(254, 190, 16, 0.4);
    border-color: #ffd54f;
}

.jump-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.jump-btn.active {
    background: #92c83e;
    color: #fff;
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.btn-orange {
    background: #DF691A;
    color: #fff;
    border: none;
}

.btn-orange:hover {
    background: #c55a15;
}

.text-center {
    text-align: center;
}

.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }

.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
/* DISABLED - Desktop system doesn't need responsive breakpoints
@media (max-width: 1400px) {
    .sidebar-left {
        width: 350px;
        min-width: 350px;
    }
}
*/

/* DISABLED - Desktop system doesn't need mobile stacking
@media (max-width: 900px) {
    .trivia-container {
        flex-direction: column;
    }

    .sidebar-left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .content-area {
        width: 100%;
    }
}
*/

@media (max-width: 768px) {
    .team-columns {
        flex-direction: column;
    }

    .add-team-form {
        flex-wrap: wrap;
    }

    .add-team-form input {
        min-width: 100%;
    }
}

/* ===================================
   ANIMATION CLASSES
   =================================== */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pulse {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Score Update Flash */
.score-flash {
    animation: scoreFlash 0.5s ease-out;
}

@keyframes scoreFlash {
    0% {
        background: #febe10;
    }
    100% {
        background: inherit;
    }
}

/* ===================================
   SPLIT SCREEN MODE
   =================================== */

/* Hide old column structure when using split mode */
.team-scoring-container.split-mode .team-columns {
    display: none;
}

/* Expand content-area when split mode is active */
.content-area:has(.team-scoring-container.split-mode) {
    max-width: none;             /* Remove max-width limit */
    width: fit-content;          /* Expand to fit columns */
}

/* Split screen container - uses CSS Grid for columns */
.team-scoring-container.split-mode {
    display: grid;
    gap: 10px;
    max-width: none;            /* Allow wider than single column */
    width: fit-content;         /* Shrink to content size */
}

/* Column wrappers - each column is 570px (same as content-area) */
.split-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 570px;               /* Same width as non-split! */
    min-width: 570px;
}

/* 2-column layout - 570px per column */
.team-scoring-container.split-mode[data-columns="2"] {
    grid-template-columns: 570px 570px;
}

/* 3-column layout - 570px per column */
.team-scoring-container.split-mode[data-columns="3"] {
    grid-template-columns: 570px 570px 570px;
}

/* 4-column layout - 570px per column */
.team-scoring-container.split-mode[data-columns="4"] {
    grid-template-columns: 570px 570px 570px 570px;
}

/* NO need for smaller buttons - each column has full 570px width */

/* Team rows in split mode take full width of their column */
.team-scoring-container.split-mode .team-row {
    width: 100%;
    margin: 0; /* Column handles spacing */
}

/* Responsive: Stack columns on very small screens if needed */
@media (max-width: 600px) {
    .team-scoring-container.split-mode {
        grid-template-columns: 1fr !important; /* Single column on small screens */
    }
}

/* ===================================
   BATCH SCORING BUTTONS
   =================================== */
#batch-scoring-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

#btn-batch-correct,
#btn-batch-incorrect {
    padding: 5px 10px;
    font-weight: 700;
    font-size: 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
}

#btn-batch-correct {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border-color: #66BB6A;
}

#btn-batch-correct:hover {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

#btn-batch-incorrect {
    background: linear-gradient(135deg, #f44336 0%, #D32F2F 100%);
    border-color: #EF5350;
}

#btn-batch-incorrect:hover {
    background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
}

#btn-batch-correct:active,
#btn-batch-incorrect:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========================================
   TEAM EDIT PANEL STYLES
   ======================================== */

/* Clickable team names */
.team-name.clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.team-name.clickable:hover {
    color: #00d9ff;
    transform: translateX(3px);
}

/* Team edit panel container */
.team-edit-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-radius: 15px;
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel header */
.edit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}

.edit-panel-header h3 {
    color: #00d9ff;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.btn-close-panel {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 2px solid #f44336;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-close-panel:hover {
    background: #f44336;
    color: white;
    transform: scale(1.05);
}

/* Edit sections */
.edit-section {
    margin-bottom: 30px;
}

.section-title {
    color: #00d9ff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}

/* Info grid */
.info-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Score grid */
.score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.score-item {
    background: rgba(30, 30, 45, 0.5);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 217, 255, 0.2);
}

.score-item label {
    display: block;
    color: #00d9ff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Halftime and final boxes */
.halftime-box,
.final-box {
    background: rgba(30, 30, 45, 0.5);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    margin-bottom: 20px;
}

.halftime-box label,
.final-box label {
    display: block;
    color: #00d9ff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Score preview */
.score-preview {
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
    border: 2px solid rgba(0, 217, 255, 0.3);
}

.score-preview-title {
    color: #00d9ff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.score-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.score-box {
    background: rgba(0, 217, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.score-box-label {
    color: #b8b8b8;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.score-box-value {
    color: #00d9ff;
    font-size: 32px;
    font-weight: 700;
}

/* Buttons */
.button-group {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid rgba(0, 217, 255, 0.2);
}

.btn-save {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 10px;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-cancel {
    background: linear-gradient(135deg, #666 0%, #555 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Loading panel */
.loading-panel {
    text-align: center;
    padding: 60px 20px;
    color: #00d9ff;
    font-size: 18px;
}

.loading-panel .loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 217, 255, 0.2);
    border-top-color: #00d9ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* Error panel */
.error-panel {
    text-align: center;
    padding: 60px 20px;
    color: #f44336;
    font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

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

    .score-display {
        grid-template-columns: 1fr;
    }

    .btn-save,
    .btn-cancel {
        display: block;
        width: 100%;
        margin: 5px 0;
    }
}

/* ========================================
   SETTLE UP PANEL STYLES
   ======================================== */

.settle-up-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-radius: 15px;
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease-out;
}

.settle-up-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}

.settle-up-panel .panel-header h3 {
    color: #00d9ff;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.settle-up-panel .game-summary {
    background: rgba(0, 217, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

.settle-up-panel .game-summary h4 {
    color: #00d9ff;
    font-size: 18px;
    margin-bottom: 15px;
}

.settle-up-panel .summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.settle-up-panel .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.settle-up-panel .summary-label {
    color: #b8b8b8;
    font-size: 14px;
}

.settle-up-panel .summary-value {
    color: #00d9ff;
    font-size: 18px;
    font-weight: 700;
}

.settle-up-panel .form-section {
    margin-bottom: 30px;
}

.settle-up-panel .form-section h4 {
    color: #00d9ff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}

.settle-up-panel .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.settle-up-panel .form-group {
    margin-bottom: 15px;
}

.settle-up-panel .form-group label {
    display: block;
    color: #00d9ff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.settle-up-panel .form-control {
    width: 100%;
    padding: 10px;
    background: rgba(30, 30, 45, 0.5);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.settle-up-panel .form-control:focus {
    outline: none;
    border-color: #00d9ff;
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
}

.settle-up-panel .btn-submit {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 10px;
}

.settle-up-panel .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.settle-up-panel .btn-cancel {
    background: linear-gradient(135deg, #666 0%, #555 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.settle-up-panel .btn-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .settle-up-panel .summary-grid {
        grid-template-columns: 1fr;
    }

    .settle-up-panel .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   LIGHTNING ROUND CONTROLS
   =================================== */
.lightning-controls {
    margin: 15px 0;
    padding: 15px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 2px solid #ff4444;
    text-align: center;
}

#btn-auto-rotate {
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
}

#btn-auto-rotate.btn-danger {
    background: #ff4444;
    color: white;
}

#btn-auto-rotate.btn-danger:hover {
    background: #ff6666;
    transform: scale(1.02);
}

#btn-auto-rotate.btn-warning {
    background: #ffa500;
    color: white;
    animation: pulse-lightning 1.5s ease-in-out infinite;
}

#btn-auto-rotate.btn-warning:hover {
    background: #ffb733;
}

@keyframes pulse-lightning {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);
    }
}

.lightning-info {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .sidebar-left,
    .add-team-bar,
    .scoring-info-bar,
    .jump-to-scoring-bar {
        display: none;
    }

    body {
        background: #fff;
    }

    .team-row {
        background: #fff;
        border: 1px solid #000;
        color: #000;
    }
}

.freq-played-teams {
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 8px;         /* Put on new row */
}

.btn-freq-teams {
    background-color: #17a2b8;
    color: white;
    border: 2px solid #138496;
    padding: 6px 12px;       /* More compact: was 8px 16px */
    border-radius: 8px;
    font-weight: bold;
    font-size: 12px;         /* Smaller: was 14px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(155, 89, 182, 0.3);
    flex-shrink: 0;
    white-space: nowrap;     /* Prevent text wrapping */
}

.btn-freq-teams:hover {
    background-color: #138496;
    border-color: #117a8b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-freq-teams:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* ===================================
   ULTRA-TARGETED NAVIGATION INFO BOX IMPROVEMENTS
   ONLY affects info boxes in #question-nav area
   Will NOT affect menus, scoring, or anything else
   =================================== */

/* CRITICAL: These styles ONLY affect elements inside #question-nav
   which is the question display area on the left sidebar.
   They will NOT affect:
   - Menu buttons at top
   - Scoring area on right
   - Any other part of the interface */

/* ===================================
   COLOR-CODED INFO BOXES (QUESTION NAV ONLY)
   =================================== */

/* Base info box improvements - ONLY in #question-nav */
#question-nav .info-box {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 5px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

/* CATEGORY BOX - Purple theme */
#question-nav .info-box.category-box {
    background: linear-gradient(135deg, #2d1b3d 0%, #1a0f26 100%);
    border-color: rgba(147, 112, 219, 0.4);
}

/* QUESTION BOX - Red theme */
#question-nav .info-box.question-box {
    background: linear-gradient(135deg, #3d1b1b 0%, #2d1010 100%);
    border-color: rgba(215, 33, 54, 0.4);
}

/* ANSWER BOX - Yellow/Gold theme */
#question-nav .info-box.answer-box {
    background: linear-gradient(135deg, #3d3310 0%, #2d2408 100%);
    border-color: rgba(254, 190, 16, 0.4);
}

/* HOST INFO (PRE) BOX - Cyan theme */
#question-nav .info-box.host-info-pre-box {
    background: linear-gradient(135deg, #0a2d3d 0%, #051a26 100%);
    border-color: rgba(6, 102, 164, 0.4);
}

/* HOST INFO BOX - Blue theme */
#question-nav .info-box.host-info-box {
    background: linear-gradient(135deg, #0a2d3d 0%, #051a26 100%);
    border-color: rgba(6, 102, 164, 0.4);
}

/* COMING UP BOX - Green theme */
#question-nav .info-box.coming-up-box {
    background: linear-gradient(135deg, #1e3d1e 0%, #0f260f 100%);
    border-color: rgba(146, 200, 62, 0.4);
}

/* Info Headers with Color Coding - #question-nav only */
#question-nav .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Color-code the headers to match their boxes */
#question-nav .category-box .info-header {
    color: #9370db;
    border-bottom-color: rgba(147, 112, 219, 0.3);
}

#question-nav .question-box .info-header {
    color: #ff6b7a;
    border-bottom-color: rgba(215, 33, 54, 0.3);
}

#question-nav .answer-box .info-header {
    color: #febe10;
    border-bottom-color: rgba(254, 190, 16, 0.3);
}

#question-nav .host-info-pre-box .info-header,
#question-nav .host-info-box .info-header {
    color: #4db8ff;
    border-bottom-color: rgba(6, 102, 164, 0.3);
}

#question-nav .coming-up-box .info-header {
    color: #92c83e;
    border-bottom-color: rgba(146, 200, 62, 0.3);
}

/* Info Content - #question-nav only */
#question-nav .info-content {
    color: #fff;
    font-size: 18px;
    line-height: 1.7;
    padding-top: 4px;
}

/* Show/Hide Buttons - #question-nav only */
#question-nav .info-box .btn-link {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: all 0.2s;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

#question-nav .info-box .btn-link:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* Visual Separators Between Sections - #question-nav only */
#question-nav .category-box::after,
#question-nav .question-box::after,
#question-nav .answer-box::after,
#question-nav .host-info-pre-box::after,
#question-nav .host-info-box::after {
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    bottom: -9px;
    left: 10%;
    right: 10%;
}

/* Timer Section - #question-nav only */
#question-nav .timer-section {
    background: linear-gradient(135deg, #1a2d3d 0%, #0f1a26 100%);
    padding: 14px;
    border-radius: 10px;
    margin-top: 5px;
    border: 2px solid rgba(254, 190, 16, 0.3);
}

#question-nav .timer-header {
    color: #febe10;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(254, 190, 16, 0.2);
}

#question-nav .timer-display {
    flex: 1;
    background: #001a33;
    color: #febe10;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid rgba(254, 190, 16, 0.3);
}

/* END OF ULTRA-TARGETED NAVIGATION INFO BOX IMPROVEMENTS */

/* Jump-to-Scoring: Third row - all three buttons */
.view-all-teams {
    display: inline-block;
    margin-top: 8px;         /* Same as freq-played-teams */
    margin-left: 8px;        /* Gap from freq-played-teams */
}

.settle-up-btn-container {
    display: inline-block;
    margin-top: 8px;         /* Same as others */
    margin-left: 8px;        /* Gap from view-all-teams */
}