/* ============================================================
   Hustle n' Tussle — Design Tokens & Base Styles
   Task 1 of 14: CSS Foundation
   ============================================================ */

/* ----------------------------------------------------------
   1. Design Tokens — Admin (Clean Competition) defaults
   ---------------------------------------------------------- */
:root {
    /* Colors */
    --bg: #f5f5f7;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8faff;
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-light: #dbeafe;
    --accent-hot: #dc2626;
    --accent-gold: #b45309;
    --success: #15803d;
    --success-light: #dcfce7;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-focus: #93c5fd;
    --danger-color: #dc2626;
    --danger-bg: #fef2f2;

    /* Typography */
    --font-display: 'DM Sans', -apple-system, sans-serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 100px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Glow */
    --glow-accent: none;

    /* Focus ring */
    --focus-ring: rgba(29, 78, 216, 0.25);
}

/* ----------------------------------------------------------
   2. Design Tokens — Dark color scheme
   ---------------------------------------------------------- */
[data-color="dark"] {
    --bg: #0a0a12;
    --bg-surface: #12121f;
    --bg-card: #1a1a2e;
    --bg-card-hover: #222240;

    --accent: #7c3aed;
    --accent-hover: #6d28d9;
    --accent-light: rgba(124, 58, 237, 0.15);
    --accent-hot: #f43f5e;
    --accent-gold: #eab308;
    --accent-cyan: #06b6d4;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border: rgba(148, 163, 184, 0.1);
    --border-focus: rgba(124, 58, 237, 0.5);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --glow-accent: 0 0 30px rgba(124, 58, 237, 0.3);
    --glow-hot: 0 0 30px rgba(244, 63, 94, 0.3);

    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;

    --focus-ring: rgba(124, 58, 237, 0.25);

    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.15);

    --danger-color: #f43f5e;
    --danger-bg: rgba(244, 63, 94, 0.15);
}

/* ----------------------------------------------------------
   3. Base Reset
   ---------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   4. Display Mode Background Effect
   ---------------------------------------------------------- */
[data-color="dark"] body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(244, 63, 94, 0.1) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

/* ----------------------------------------------------------
   5. Utility Classes
   ---------------------------------------------------------- */
.hidden {
    display: none !important;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-lg) 20px;
}

/* ----------------------------------------------------------
   6. Theme Toggle
   ---------------------------------------------------------- */
.theme-toggle {
    margin-left: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.theme-toggle:hover {
    border-color: var(--accent);
}

.theme-toggle-icon::before {
    content: '\263E'; /* moon */
    font-size: 16px;
    line-height: 1;
}

[data-color="dark"] .theme-toggle-icon::before {
    content: '\2600'; /* sun */
}

/* Floating toggle — shown only when nav bar is hidden */
.theme-toggle--floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 999;
    display: none;
    box-shadow: var(--shadow-md);
}

/* Show floating toggle when nav bar is not visible (display mode) */
.display-mode .theme-toggle--floating {
    display: inline-flex;
}

/* ----------------------------------------------------------
   7. Session ID Display
   ---------------------------------------------------------- */
/* Session ID display — inline in nav bar, expands as dropdown */
.session-id-display {
    position: relative;
    font-size: 12px;
    color: var(--text-primary);
    margin-left: 8px;
}

.session-id-display:empty {
    display: none;
}

.session-id-display-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.session-id-display-header:hover {
    background: var(--bg);
}

.session-id-display-label {
    font-weight: 600;
    font-size: 12px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-id-display-toggle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.session-id-display-toggle:hover {
    background: var(--accent);
    color: white;
}

.session-id-display-body {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    min-width: 280px;
    max-width: 340px;
    z-index: 100;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: top right;
}

.session-id-display--minimized .session-id-display-body {
    display: none;
}

.display-url-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: var(--font-mono);
    background: var(--bg-surface);
    color: var(--text-primary);
    margin-top: 4px;
}

.display-url-info {
    margin-bottom: 8px;
}

.display-url-info span {
    font-size: 11px;
    color: var(--text-muted);
}

.display-url-info button {
    margin-top: 4px;
    font-size: 11px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
}

.display-url-info button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.session-id-display canvas,
.session-id-display img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

/* ============================================================
   7. Navigation Bar
   ============================================================ */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.nav-bar .brand {
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-bar .brand .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.nav-pills {
    display: flex;
    gap: 4px;
}

.nav-pill {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-pill.active {
    background: var(--accent);
    color: white;
}

.nav-pill:hover:not(.active) {
    background: var(--bg);
}

/* Dark theme: remove nav box-shadow */
[data-color="dark"] .nav-bar {
    box-shadow: none;
}

/* ============================================================
   8. Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    position: relative;
}

.btn.primary {
    background: var(--accent);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn.primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.btn.secondary {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
}

.btn.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn.warning {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1.5px solid var(--danger-color);
}

.btn.large {
    padding: 16px 40px;
    font-size: 16px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn.loading::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.btn.loading {
    color: transparent;
}

/* Dark theme: gradient primary button */
[data-color="dark"] .btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hot));
    box-shadow: var(--glow-accent);
}

/* ============================================================
   9. Forms
   ============================================================ */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

textarea,
input[type="text"],
input[type="url"],
input[type="number"],
select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--border-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-helper-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.warning-message {
    color: var(--accent-gold);
    font-size: 13px;
}

.error-message {
    color: var(--danger-color);
    font-size: 13px;
    min-height: 20px;
}

.file-upload-wrapper {
    position: relative;
}

.file-upload-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.file-upload-btn {
    padding: 6px 16px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

/* Dark theme: dark inputs */
[data-color="dark"] textarea,
[data-color="dark"] input[type="text"],
[data-color="dark"] input[type="url"],
[data-color="dark"] input[type="number"],
[data-color="dark"] select {
    background: var(--bg-surface);
    border-color: var(--border);
}

/* ============================================================
   10. Matchup Card
   ============================================================ */
.matchup-card {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.matchup-side {
    flex: 1;
    padding: var(--space-lg) 20px;
    text-align: center;
}

.matchup-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Style the existing matchup structure (old HTML with .matchup children) */
.matchups.matchup-card .matchup {
    flex: 1;
    text-align: center;
    padding: var(--space-lg) 20px;
}

.matchups.matchup-card .matchup h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.matchups.matchup-card .pair {
    font-size: 16px;
    font-weight: 600;
}

.matchups.matchup-card .vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.dancer-name {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 6px;
}

.dancer-score {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    background: var(--accent-light);
    color: var(--accent);
}

/* Dark theme: matchup card */
[data-color="dark"] .matchup-card {
    border-top: 3px solid;
    border-image: linear-gradient(135deg, var(--accent), var(--accent-hot)) 1;
}

[data-color="dark"] .matchup-divider,
[data-color="dark"] .matchups.matchup-card .vs {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-hot), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   11. Judge Rows
   ============================================================ */
.judge-section {
    margin-bottom: var(--space-lg);
}

.judge-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.judge-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.judge-section-count {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--success-light);
    color: var(--success);
}

.judge-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.judge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.judge-row.voted {
    border-color: var(--accent);
    border-left: 3px solid var(--accent);
    background: var(--bg-card-hover);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    flex-shrink: 0;
}

.judge-row.voted .avatar,
.avatar.voted {
    background: var(--accent);
    color: white;
}

.judge-name {
    font-weight: 600;
    font-size: 14px;
    min-width: 90px;
}

.vote-chips {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.vote-chip {
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 36px;
}

.vote-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.vote-chip.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    font-weight: 600;
    transform: scale(1.02);
}

.vote-chip.tie-chip {
    border-style: dashed;
}

.vote-chip.nc-chip {
    color: var(--text-muted);
    font-size: 12px;
}

/* Dark theme: judge rows */
[data-color="dark"] .vote-chip.selected {
    box-shadow: var(--glow-accent);
}

/* ============================================================
   12. Standings / Mini-Leaderboard
   ============================================================ */
.standings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-top: var(--space-lg);
}

.standings-card h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.standings-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.standings-col h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.standings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bg);
}

.standings-row:last-child {
    border-bottom: none;
}

.standings-row .rank {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 24px;
}

.standings-row:first-child .rank {
    color: var(--accent);
}

.standings-row .name {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

.standings-row .pts {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--accent);
    min-width: 32px;
    text-align: right;
}

.bar-track {
    width: 80px;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}

.bar-track .fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ============================================================
   13. Modals
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.modal-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.modal-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 12px;
}

.modal-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}

.modal-summary-section h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.modal-pair {
    font-size: 14px;
}

.modal-winner {
    font-size: 14px;
    margin-top: 8px;
}

.modal-error {
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--danger-bg);
    border-radius: var(--radius-sm);
}

/* ============================================================
   14. Screen Layout
   ============================================================ */
.screen {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.screen.active {
    display: block;
    opacity: 1;
}

/* ============================================================
   15. Home Screen
   ============================================================ */
.home-hero,
.welcome-section {
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-lg);
}

.home-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.home-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
}

.home-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

.home-actions .btn {
    width: 100%;
}

/* ============================================================
   16. Setup Screen
   ============================================================ */
.spotify-auth-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.spotify-status {
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spotify-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.spotify-status--disconnected {
    color: var(--text-muted);
}

.spotify-status--disconnected::before {
    background: var(--text-muted);
}

.spotify-status--connected {
    color: var(--success);
}

.spotify-status--connected::before {
    background: var(--success);
}

.setup-actions {
    display: flex;
    gap: 12px;
    margin-top: var(--space-lg);
}

.format-guide {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.format-guide h3 {
    font-size: 15px;
    margin-bottom: 8px;
}

.format-guide ul {
    padding-left: 20px;
    margin: 8px 0;
}

.format-guide li {
    font-size: 14px;
    margin-bottom: 4px;
}

.format-guide .note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   17. Battle Screen
   ============================================================ */
.round-header-new {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.round-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--accent);
    color: white;
    margin-bottom: 12px;
}

/* Dark theme: round badge */
[data-color="dark"] .round-badge {
    background: linear-gradient(135deg, var(--accent), var(--accent-hot));
    box-shadow: var(--glow-accent);
}

.vote-progress {
    font-size: 14px;
    color: var(--text-secondary);
}

.combined-voting-section {
    margin-bottom: var(--space-lg);
}

.submit-area {
    text-align: center;
    padding: var(--space-lg) 0;
}

.battle-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.vote-submission {
    text-align: center;
    padding: var(--space-md) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ============================================================
   18. Results Screen
   ============================================================ */
.leaderboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
}

.results-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.results-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.results-actions {
    display: flex;
    gap: 12px;
    margin-top: var(--space-lg);
}

.ytd-collapsible-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ytd-collapsible-summary::-webkit-details-marker {
    display: none;
}

.ytd-collapsible-summary::before {
    content: '\25B6';
    display: inline-block;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

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

.ytd-collapsible-summary h4 {
    margin: 0;
}

.battle-graphic-section {
    margin-bottom: var(--space-lg);
}

.battle-graphic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.graphic-column h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.graphic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
}

.graphic-rank {
    min-width: 28px;
    font-weight: 600;
    color: var(--text-muted);
}

.graphic-name {
    font-weight: 500;
    margin-right: 8px;
}

.crown-icon {
    margin-left: 4px;
}

.round-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge.win {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
}

[data-color="dark"] .badge.win {
    color: #fff;
}

/* ============================================================
   19. Toast Notifications
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    pointer-events: auto;
    animation: toastIn 0.3s ease-out;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--danger-color);
}

.toast.info {
    border-left-color: var(--accent);
}

.toast.fade-out {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* ============================================================
   20. Accordion (Round History)
   ============================================================ */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--bg-card);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: var(--bg-card-hover);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.open {
    max-height: 2000px;
}

.round-details {
    padding: 16px;
}

.round-song {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.match-pair {
    font-size: 14px;
    margin-bottom: 4px;
}

.accordion-header.tiebreak {
    border-left: 3px solid var(--accent);
}

.tiebreak-history-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 8px;
    vertical-align: middle;
}

.tiebreak-history-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tiebreak-history-role-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    min-width: 48px;
}

.tiebreak-history-names {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tiebreak-history-vs {
    font-size: 12px;
    color: var(--text-muted);
}

.tiebreak-history-winner {
    font-weight: 700;
}

/* ============================================================
   21. Display Mode Specific
   ============================================================ */
[data-mode="display"] .container {
    font-size: 1.15em;
    max-width: 1400px;
}

/* Display mode: lock to viewport height on desktop — no scrolling or zooming needed */
@media (min-width: 641px) {
    [data-mode="display"] body { overflow: hidden; }

    [data-mode="display"] .container {
        height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-top: max(12px, 1.5vh);
        padding-bottom: max(12px, 1.5vh);
    }

    [data-mode="display"] #battle-screen.active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    [data-mode="display"] .round-header-new {
        flex-shrink: 0;
        margin-bottom: clamp(8px, 1.5vh, 20px);
    }

    [data-mode="display"] .round-header {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    [data-mode="display"] .round-info-container {
        height: 100%;
        overflow: hidden;
    }

    [data-mode="display"] #results-screen.active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    [data-mode="display"] #results-screen .battle-graphic-section {
        flex: 1;
        min-height: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    [data-mode="display"] #results-screen .battle-graphic {
        flex: 1;
        min-height: 0;
        overflow: auto;
        align-content: start;
    }
}

/* Round transition overlay */
.round-transition-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.round-transition-overlay.hidden {
    display: none;
}

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

.round-label {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.round-number-large {
    font-family: var(--font-display);
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
}

@keyframes glow {
    from { text-shadow: 0 0 40px rgba(124, 58, 237, 0.5); }
    to { text-shadow: 0 0 80px rgba(124, 58, 237, 0.8), 0 0 120px rgba(244, 63, 94, 0.4); }
}

[data-color="dark"] .round-number-large {
    animation: glow 2s infinite alternate;
}

/* Hide controls in display mode */
.display-mode .vote-submission,
.display-mode .battle-actions,
.display-mode .submit-area,
.display-mode #end-battle-early,
.display-mode #undo-round {
    display: none;
}

/* Hide duplicate "Voting" heading inside combined-voting-section
   (the round-header-new already shows the title) */
.combined-voting-section > h2 {
    display: none;
}

/* Hide old informational judge name lists — redundant with judge vote rows */
.judges-section {
    display: none;
}

/* Show contestant judges in admin view */
[data-mode="admin"] .judges-section:last-child {
    display: block;
}

/* Admin: contestant judges + next-up side by side as cards */
[data-mode="admin"] .round-context {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

[data-mode="admin"] .judges {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
}

/* Display mode: strip the wrapper so .judges and #next-up-section
   remain direct grid children of .round-info-container */
[data-mode="display"] .round-context {
    display: contents;
}

[data-mode="admin"] .judges-section h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

[data-mode="admin"] .judges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[data-mode="admin"] .judge-item {
    font-size: 13px;
    font-weight: 500;
    padding: 3px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
}

/* ============================================================
   22. Contestant Order Section
   ============================================================ */
.contestant-order-section {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.contestant-order-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.order-column h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.order-list {
    list-style-position: inside;
    padding: 0;
}

.order-list li {
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

/* Queue order animations (display mode) */
.order-list li.animating-out {
    animation: slideOutLeft 1s ease forwards;
}

.order-list li.animating-in {
    animation: slideInRight 1.2s ease forwards;
}

.order-list li.loser-arrived {
    background: var(--accent-light);
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   23. Scores Display / Live Graphic
   ============================================================ */
.round-info-container {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.round-content {
    flex: 1;
}

.scores-display {
    flex: 0 0 420px;
}

/* Display mode: projector-optimized layout */
[data-mode="display"] .round-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: clamp(8px, 2.2vh, 24px);
}

[data-mode="display"] .round-content {
    display: contents;
}

/* Row 1: current matchup spans full width */
[data-mode="display"] #current-matchup {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Row 2: contestant judges + next up side by side, equal height */
[data-mode="display"] .judges {
    grid-column: 1;
    grid-row: 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(10px, 1.85vh, 20px) 24px;
    align-self: stretch;
}

[data-mode="display"] #next-up-section {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    padding: clamp(10px, 1.85vh, 20px) 24px;
}

/* Row 3: battle graphic spans full width */
[data-mode="display"] .scores-display {
    grid-column: 1 / -1;
    grid-row: 3;
    flex: unset;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(10px, 1.85vh, 20px) 24px;
}

/* Hide elements not needed on projector display */
[data-mode="display"] .song-input-container,
[data-mode="display"] .contestant-order-section {
    display: none;
}

/* In display mode, show contestant judges section (second child) for the audience */
[data-mode="display"] .judges-section:last-child {
    display: block;
}

/* Show next-up section in both admin and display mode */
[data-mode="display"] #next-up-section,
[data-mode="admin"] #next-up-section {
    display: block !important;
}

/* Display mode: typography scales with viewport height via clamp()
   At 1080px: matchup 36px, pills 22px, headings 20px, graphic rows 22px
   Gracefully compresses on shorter screens down to readable minimums */

[data-mode="display"] .round-badge {
    font-size: clamp(13px, 1.67vh, 18px);
    padding: 6px 20px;
}

/* -- Matchup card -- */
[data-mode="display"] .matchups.matchup-card .matchup {
    padding: clamp(10px, 3vh, 32px) 24px;
}

[data-mode="display"] .matchups.matchup-card .matchup h3 {
    font-size: clamp(12px, 1.48vh, 16px);
}

[data-mode="display"] .matchups.matchup-card .pair {
    font-size: clamp(20px, 3.3vh, 36px);
}

[data-mode="display"] .matchups.matchup-card .vs {
    font-size: clamp(20px, 3.3vh, 36px);
    width: 80px;
}

/* -- Contestant Judges card -- */
[data-mode="display"] .judges-section h3 {
    font-size: clamp(13px, 1.85vh, 20px);
    margin-bottom: clamp(8px, 1.1vh, 16px);
}

[data-mode="display"] .judges-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 1.1vh, 12px);
}

[data-mode="display"] .judge-item {
    font-size: clamp(14px, 2vh, 22px);
    padding: clamp(6px, 0.9vh, 10px) clamp(14px, 2.2vw, 24px);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* -- Battle Graphic card -- */
[data-mode="display"] .scores-display h3 {
    font-size: clamp(13px, 1.85vh, 20px);
}

[data-mode="display"] .graphic-column h4 {
    font-size: clamp(12px, 1.67vh, 18px);
}

[data-mode="display"] .graphic-row {
    font-size: clamp(13px, 2vh, 22px);
    padding: clamp(5px, 0.9vh, 10px) 0;
}

[data-mode="display"] .graphic-rank {
    min-width: clamp(22px, 3.3vh, 36px);
    font-size: clamp(13px, 2vh, 22px);
}

[data-mode="display"] .badge {
    width: clamp(20px, 3vh, 32px);
    height: clamp(20px, 3vh, 32px);
    font-size: clamp(10px, 1.3vh, 14px);
}

/* Next Up section styling */
.next-up-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.next-up-section h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

/* -- Next Up card -- */
[data-mode="display"] .next-up-section h3 {
    font-size: clamp(13px, 1.85vh, 20px);
    margin-bottom: clamp(8px, 1.1vh, 16px);
}

.next-up-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.next-up-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.next-up-role {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    min-width: 60px;
}

.next-up-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

[data-mode="display"] .next-up-container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(6px, 1.1vh, 12px);
}

[data-mode="display"] .next-up-item {
    padding: clamp(6px, 0.9vh, 10px) clamp(14px, 2.2vw, 24px);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 10px;
}

[data-mode="display"] .next-up-role {
    font-size: clamp(11px, 1.48vh, 16px);
    min-width: unset;
}

[data-mode="display"] .next-up-name {
    font-size: clamp(14px, 2vh, 22px);
}

.scores-display h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ============================================================
   24. Winner Preview
   ============================================================ */
.winner-preview {
    padding: 12px 16px;
    background: var(--accent-light);
    border-radius: var(--radius-sm);
    margin-top: 12px;
    animation: fadeIn 0.3s ease-in;
}

.winner-preview h4 {
    font-size: 14px;
}

.preview-note {
    font-size: 12px;
    color: var(--text-muted);
}

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

/* ============================================================
   25. Song Input
   ============================================================ */
.song-input-container {
    margin-bottom: var(--space-md);
}

.song-input-container h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ============================================================
   26. Upload Screen
   ============================================================ */
.upload-form {
    max-width: 600px;
}

.upload-actions {
    display: flex;
    gap: 12px;
    margin-top: var(--space-md);
}

.file-name {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ============================================================
   27. Typography & Links
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.3;
}

h2 {
    font-size: 22px;
    margin-bottom: var(--space-md);
}

h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

/* ============================================================
   28. Rules Grid (Home Page)
   ============================================================ */
.rules-grid {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-xl);
    text-align: left;
}

.rules-grid .rule-card {
    flex: 1 1 0;
}

.rule-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: border-color 0.2s;
}

.rule-card:hover {
    border-color: var(--accent);
}

.home-about {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}

.home-about p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.home-rules h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.rule-card h3 {
    font-size: 15px;
    margin-bottom: var(--space-sm);
    color: var(--accent);
}

.rule-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.rule-card ul {
    list-style: disc;
    padding-left: var(--space-lg);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.rule-card li {
    margin-bottom: var(--space-xs);
}

/* ============================================================
   29. Demo Mode Overlay
   ============================================================ */
.demo-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    pointer-events: none;
}

.demo-hint {
    position: fixed;
    z-index: 10000;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    max-width: 380px;
    width: calc(100vw - 32px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.demo-hint-drag-handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    margin: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--bg-card-hover);
}

.demo-hint-drag-handle:active {
    cursor: grabbing;
}

.demo-drag-icon {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1;
}

.demo-hint h4 {
    font-size: 16px;
    margin-bottom: var(--space-sm);
    color: var(--accent);
}

.demo-hint p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.demo-hint-step {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.demo-hint-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.demo-hint-actions .btn {
    font-size: 13px;
    padding: 6px 14px;
}

.demo-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    transform: rotate(45deg);
}

.demo-arrow--top {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.demo-arrow--bottom {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.demo-arrow--left {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.demo-arrow--right {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.demo-highlight {
    position: relative;
    z-index: 9999 !important;
    box-shadow: 0 0 0 4px var(--accent), 0 0 20px rgba(29, 78, 216, 0.3);
    border-radius: var(--radius-sm);
}

[data-color="dark"] .demo-highlight {
    box-shadow: 0 0 0 4px var(--accent), 0 0 30px rgba(124, 58, 237, 0.4);
}

/* ============================================================
   30. Responsive
   ============================================================ */
@media (max-width: 640px) {
    .matchup-card { flex-direction: column; }
    .matchup-divider { width: 100%; height: 40px; }
    .matchups.matchup-card .vs,
    [data-mode="display"] .matchups.matchup-card .vs { width: 100%; padding: 8px 0; }
    .judge-row { flex-wrap: wrap; }
    .judge-row .vote-chips { width: 100%; justify-content: flex-start; }
    .vote-chip { flex: 1; text-align: center; min-width: calc(50% - 3px); }
    .nav-pills { display: none; }
    .leaderboard { grid-template-columns: 1fr; }
    .battle-graphic { grid-template-columns: 1fr; }
    .standings-columns { grid-template-columns: 1fr; }
    .modal-summary { grid-template-columns: 1fr; }
    .home-title { font-size: 28px; }
    .rules-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--space-xs);
    }
    .rules-grid .rule-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    .demo-hint { max-width: calc(100vw - 32px); }
    .submit-area { position: sticky; bottom: 0; padding: 16px; background: var(--bg); z-index: 10; }
    .round-info-container { flex-direction: column; }
    .scores-display { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
    [data-mode="display"] .round-number-large { font-size: 16rem; }
}

/* ============================================================
   31. Tie-Break Mode
   ============================================================ */
.modal--tiebreak {
    max-width: 600px;
}

.tiebreak-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.tiebreak-partner-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: var(--space-lg);
}

.tiebreak-partner-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tiebreak-lead-name,
.tiebreak-follow-name {
    min-width: 110px;
    font-weight: 600;
    font-size: 15px;
}

.tiebreak-arrow {
    color: var(--text-muted);
    font-size: 18px;
}

.tiebreak-partner-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.tiebreak-partner-select:focus {
    outline: none;
    border-color: var(--accent);
}

.tiebreak-pairings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-lg);
}

.tiebreak-pairing-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
}

.tiebreak-vs {
    color: var(--text-muted);
    font-size: 13px;
}

.tiebreak-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.tiebreak-voting-section {
    margin-bottom: var(--space-lg);
}

.tiebreak-voting-section h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.tiebreak-section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
}

.tiebreak-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--space-sm) 0;
}

.tiebreak-winner-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    background: var(--accent-light);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
}

.tiebreak-role-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.tiebreak-winner-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.tiebreak-still-tied-section {
    margin-bottom: var(--space-md);
}

.tiebreak-still-tied-section h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.tiebreak-vote-tally {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tiebreak-tally-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.tiebreak-tally-row.tiebreak-tally-tied {
    border-color: var(--accent);
    background: var(--accent-light);
}

.tiebreak-tally-score {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
}

.tiebreak-tally-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding: 2px 6px;
    border: 1px solid var(--accent);
    border-radius: 999px;
}

/* ============================================================
   32. Results Screen — Display Mode
   ============================================================ */

[data-mode="display"] #results-screen > h2,
[data-mode="display"] #results-screen .leaderboard,
[data-mode="display"] #results-screen .round-history,
[data-mode="display"] #results-screen .results-actions {
    display: none;
}

[data-mode="display"] #results-screen .graphic-column h4 {
    font-size: clamp(14px, 2vh, 20px);
    margin-bottom: clamp(8px, 1.2vh, 16px);
}

[data-mode="display"] #results-screen .graphic-row {
    padding: clamp(6px, 1vh, 12px) clamp(8px, 1.2vh, 16px);
}

[data-mode="display"] #results-screen .graphic-name,
[data-mode="display"] #results-screen .badge {
    font-size: clamp(14px, 2vh, 22px);
}

/* ============================================================
   33. Tie-Break Display Mode (projector / audience view)
   ============================================================ */

[data-mode="display"] #tiebreak-display-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 28px);
    padding: clamp(8px, 1.5vh, 20px);
}

.tiebreak-display-phase {
    font-size: clamp(18px, 3vh, 32px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

.tiebreak-display-contestants {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.8vh, 20px);
}

.tiebreak-display-role-group {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vh, 20px);
    flex-wrap: wrap;
    justify-content: center;
}

.tiebreak-display-role-label {
    font-size: clamp(11px, 1.5vh, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.tiebreak-display-name {
    font-size: clamp(20px, 3.5vh, 40px);
    font-weight: 700;
}

.tiebreak-display-vs {
    font-size: clamp(14px, 2vh, 22px);
    color: var(--text-muted);
    font-weight: 500;
}

.tiebreak-display-pairings {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vh, 16px);
    width: 100%;
    max-width: 640px;
}

.tiebreak-display-pairing-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vh, 20px);
    padding: clamp(10px, 1.8vh, 20px) clamp(16px, 2.5vh, 32px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: clamp(18px, 3vh, 34px);
    font-weight: 700;
}

.tiebreak-display-plus {
    color: var(--text-muted);
    font-size: clamp(16px, 2.5vh, 28px);
}

.tiebreak-display-winners {
    display: flex;
    gap: clamp(12px, 2vh, 24px);
    flex-wrap: wrap;
    justify-content: center;
}

.tiebreak-display-winner-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: clamp(12px, 2vh, 24px) clamp(20px, 3vh, 40px);
    background: var(--accent-light);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
}

.tiebreak-display-winner-name {
    font-size: clamp(22px, 4vh, 48px);
    font-weight: 800;
}

/* ============================================================
   34. Home Page Explainer Visualizations
   ============================================================ */

.home-explainers {
    margin: var(--space-2xl) 0;
}

.home-explainers > h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.explainer-desc {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    line-height: 1.6;
}

/* Tabs */
.explainer-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.explainer-tab {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.explainer-tab:hover,
.explainer-tab.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.explainer-panel { display: none; }
.explainer-panel.active { display: block; }

/* ── Arena (3-column layout) ── */
.viz-arena {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.viz-queue-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 110px;
    flex: 1;
    max-width: 160px;
}

.viz-queue-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2px;
}

.viz-queue-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Battle Stage ── */
.viz-stage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 2;
    min-width: 220px;
    max-width: 320px;
}

.viz-stage-pairs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.viz-stage-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

/* ── Couple cards ── */
.viz-couple-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.viz-couple-card.viz-couple-tied {
    border-color: #fdba74;
    background: #fff7ed;
}

[data-color="dark"] .viz-couple-card.viz-couple-tied {
    border-color: #9a3412;
    background: #431407;
}

.viz-couple-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 20px;
}

.viz-heart {
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Pills ── */
.viz-pill {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid transparent;
    white-space: nowrap;
    transition: opacity 0.3s, box-shadow 0.3s;
}

.viz-pill.lead {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
}

.viz-pill.follow {
    background: #fff1f2;
    color: #e11d48;
    border-color: #fda4af;
}

[data-color="dark"] .viz-pill.follow {
    background: #3f0d1a;
    color: #fb7185;
    border-color: #9f1239;
}

.viz-pill.winner {
    box-shadow: 0 0 0 2px var(--accent);
}

.viz-pill.loser {
    opacity: 0.38;
}

.viz-pill.tied {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

[data-color="dark"] .viz-pill.tied {
    background: #431407;
    color: #fb923c;
    border-color: #9a3412;
}

/* ── Outcome badge ── */
.viz-outcome-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.viz-outcome-badge.tie,
.viz-outcome-badge.tied {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

[data-color="dark"] .viz-outcome-badge.tie,
[data-color="dark"] .viz-outcome-badge.tied {
    background: #431407;
    color: #fb923c;
    border-color: #9a3412;
}

.viz-outcome-badge.no-contest {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.viz-outcome-badge.winner {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ── Caption and controls ── */
.viz-caption {
    text-align: center;
    margin-top: var(--space-md);
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 40px;
    line-height: 1.5;
}

.viz-nav-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viz-nav-wrap > .viz-arena,
.viz-nav-wrap > .viz-tiebreak-phase,
.viz-nav-wrap > .viz-outcome-stage {
    flex: 1;
    min-width: 0;
}

.viz-nav-btn {
    font-size: 18px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-body);
    transition: all 0.2s;
    flex-shrink: 0;
    user-select: none;
}

.viz-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.viz-step-counter {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 44px;
    text-align: center;
}

.viz-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.viz-play-btn {
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-body);
    transition: all 0.2s;
}

.viz-play-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Special Outcomes grid ── */
.viz-outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.viz-outcome-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.viz-outcome-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--accent);
}

.viz-outcome-stage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 130px;
}

.viz-outcome-col-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px 10px;
    align-items: center;
    justify-items: center;
    width: 100%;
}

.viz-outcome-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0;
}

/* ── Tie-break phase area ── */
.viz-tiebreak-phase {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

/* ── Score list (scoreboard + vote) ── */
.viz-score-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

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

.viz-score-row.tied .viz-score-pts {
    color: #c2410c;
    font-weight: 600;
}

.viz-score-bar {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.viz-score-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.viz-score-fill.tied {
    background: #f97316;
}

.viz-score-pts {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
}

/* ── Vote breakdown grid ── */
.viz-vote-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 8px 16px;
    align-items: center;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.viz-vote-col-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
}

.viz-vote-count {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Partner picks ── */
.viz-picks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
    margin: 0 auto;
}

.viz-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.viz-arrow {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Winner banner ── */
.viz-winner-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-lg);
    background: var(--accent-light);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    max-width: 280px;
    margin: 0 auto;
}

.viz-winner-crown {
    font-size: 28px;
}

.viz-winner-pill {
    font-size: 15px !important;
    padding: 7px 20px !important;
}

.viz-winner-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.viz-others {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ── Reuse existing keyframes ── */
.viz-pill.anim-in,
.viz-couple-card.anim-in,
.viz-pick-row.anim-in {
    animation: slideInRight 0.35s ease both;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .viz-outcomes-grid {
        grid-template-columns: 1fr;
    }

    .viz-queue-col {
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .viz-queue-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .viz-arena {
        flex-direction: column;
        align-items: center;
    }

    .viz-nav-btn {
        padding: 6px 8px;
        font-size: 15px;
    }

    .viz-stage {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   32. Edit Results Modal (uploaded battles)
   ============================================================ */
.modal--edit-results {
    max-width: 820px;
}

.edit-results-section {
    margin-bottom: var(--space-lg);
}

.edit-results-section h4 {
    margin-bottom: 8px;
}

.edit-results-table td {
    padding: 4px 6px;
}

.edit-results-table input[type="text"],
.edit-results-table input[type="number"] {
    width: 100%;
    margin: 0;
}

.edit-results-champions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.edit-results-champions .form-group {
    flex: 1 1 200px;
}

.edit-rounds-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

.edit-round-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.edit-round-row:last-child {
    border-bottom: none;
}

.edit-round-label {
    min-width: 140px;
    font-weight: 600;
}

.edit-round-row select {
    width: auto;
    min-width: 160px;
}

.consistency-warning {
    color: var(--accent-gold);
    border: 1.5px solid var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 13px;
}

.consistency-warning.hidden {
    display: none;
}

.consistency-warning strong {
    display: block;
    margin-bottom: 4px;
}

.consistency-warning ul {
    margin: 0;
    padding-left: 18px;
}

.consistency-warning li {
    margin: 2px 0;
}