/* ============================================================================
   Play Editor Styles - Production-Grade UI/UX
   ============================================================================
   
   Design Principles:
   - Clean, modern interface
   - High contrast for accessibility
   - Smooth animations
   - Professional color palette
   ============================================================================ */

:root {
    /* Color Palette */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --bg-dark: #1e293b;
    
    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-light: #ffffff;
    
    /* Border & Shadow */
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Layout */
    --sidebar-width: 280px;
    --nav-height: 0px; /* Top nav hidden globally — controls relocated */
    --action-bar-height: 0px; /* Action bar no longer used - set to 0 */

    /* Beehive theme tokens — mirror of beehive-saas/app/globals.css.
     * Stored as bare HSL components ("H S% L%") so CSS can wrap them
     * via hsl(var(--TOKEN)) and use modifiers like
     * hsl(var(--primary) / 0.9). Beehive Main overrides these at
     * runtime via postMessage({type:'BEEHIVE_THEME', tokens:{...}}) —
     * see _installBeehiveThemeBridge() in editor/main.js. */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 192 82% 31%;             /* cyan-700 — Beehive brand */
    --primary-foreground: 0 0% 100%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
}
.dark, body.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 187 92% 69%;             /* cyan-300 — Beehive brand (dark) */
    --primary-foreground: 240 6% 10%;
    --secondary: 240 5% 11%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 5% 11%;
    --muted-foreground: 240 5% 70%;
    --accent: 240 5% 11%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

/* ============================================================================
   Reset & Base Styles
   ============================================================================ */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--spacing-sm);
    outline: none;
    transition: border-color 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================================================
   Navigation Bar - Modern Design
   ============================================================================ */

.editor-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(255,255,255,0.98) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    z-index: 100;
}

/* Hide the legacy top navigation bar globally — its controls have been
 * relocated to the bottom-left meta strip (play name + sport switcher),
 * the canvas-more-options menu (Help, Export), and the bottom-right
 * Save play pill. The whole bar is `display: none` so it doesn't
 * occupy any vertical space and the canvas area now claims the full
 * viewport. */
.editor-nav { display: none !important; }
.editor-container { height: calc(100vh - var(--action-bar-height)); }

/* Right sidebar is hidden globally too — the canvas now goes full
 * width / full screen. Sidebar elements stay in DOM (display:none on
 * the aside) so their handlers + ids remain wired; the new floating
 * cluster forwards Save through to _handleSave directly, and Help /
 * Export already live in the canvas 3-dot menu. */
.sidebar.right-sidebar { display: none !important; }

/* Bottom-left "play meta" strip — back button + play name input + sport
 * selector + save-status pip. Floats over the canvas-area corner so the
 * coach always knows what play they're editing. */
.editor-bottom-left-meta {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 14;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    color: #e6e8eb;
    backdrop-filter: blur(10px);
    max-width: calc(100% - 200px); /* leave room for the right-side actions */
}
.editor-bottom-left-meta #back-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.editor-bottom-left-meta #back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.editor-bottom-left-meta .play-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.editor-bottom-left-meta .play-name-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.editor-bottom-left-meta .play-name-input {
    max-width: 200px;
    background: transparent;
    border: 1px solid transparent;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 5px;
}
.editor-bottom-left-meta .play-name-input:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.editor-bottom-left-meta .play-name-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
}
.editor-bottom-left-meta .play-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.editor-bottom-left-meta .edit-icon { color: rgba(255, 255, 255, 0.4); }
.editor-bottom-left-meta .sport-selector-mobile { display: none; }
.editor-bottom-left-meta .sport-dropdown-btn {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    font-size: 11px;
}
.editor-bottom-left-meta .sport-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.editor-bottom-left-meta .status-indicator {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}
.editor-bottom-left-meta .status-indicator .status-text { color: rgba(255, 255, 255, 0.6); }

/* Sidebar "Save play" button — appended by JS as the last sidebar row. */
.sidebar-save-action {
    margin: 12px 0 4px;
}
.sidebar-save-action .sidebar-save-btn {
    width: 100%;
    padding: 10px 12px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary));
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 10px hsl(var(--primary) / 0.25);
}
.sidebar-save-action .sidebar-save-btn:hover {
    filter: brightness(1.06);
}
.sidebar-save-action .sidebar-save-btn:active {
    transform: scale(0.99);
}

/* Onboarding mode: strip the bottom-left meta + canvas action buttons
 * too — onboarding is a pure playback surface. */
body.onboarding-mode .right-sidebar,
body.onboarding-mode #more-options-btn,
body.onboarding-mode #canvas-more-options-btn,
body.onboarding-mode #mobile-more-btn,
body.onboarding-mode #editor-bottom-left-meta,
body.onboarding-mode #canvas-floating-actions,
body.onboarding-mode #canvas-mode-group {
    display: none !important;
}

/* Autoplay mode: same treatment as onboarding for chrome. */
body.autoplay-mode .right-sidebar,
body.autoplay-mode #more-options-btn,
body.autoplay-mode #canvas-more-options-btn,
body.autoplay-mode #mobile-more-btn,
body.autoplay-mode #editor-bottom-left-meta,
body.autoplay-mode #canvas-floating-actions,
body.autoplay-mode #canvas-mode-group {
    display: none !important;
}

.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Editor mode badge (shown when editing an existing play) */
.editor-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    background: var(--surface-2, #2a2d35);
    color: var(--text-secondary, #a0a4b0);
    border: 1px solid var(--border, #3a3d45);
    white-space: nowrap;
}
.editor-mode-badge.editing {
    background: var(--accent, #4a9eff);
    color: #fff;
    border-color: var(--accent, #4a9eff);
}
.editor-mode-badge.hidden {
    display: none;
}

/* Motion placement overlay — prompts user to click endpoint */
.motion-placement-overlay {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.motion-placement-icon {
    font-size: 18px;
}

/* Back Button - Clean Icon Style */
.nav-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-back-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-back-btn:active {
    transform: scale(0.95);
}

/* Navigation Divider */
.nav-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 var(--spacing-sm);
}

/* Play Header - Title & Meta */
.play-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.play-name-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.play-name-input {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    background: transparent;
    border-radius: 6px;
    width: auto;
    min-width: 200px;
    max-width: 400px;
    transition: all 0.15s ease;
}

.play-name-input:hover {
    background: var(--bg-secondary);
}

.play-name-input:focus {
    background: var(--bg-secondary);
    outline: 2px solid var(--primary-color);
    outline-offset: 0;
}

.play-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.play-name-wrapper .edit-icon {
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.play-name-wrapper:hover .edit-icon {
    opacity: 1;
}

/* Play Meta - Sport & Status */
.play-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-left: 8px;
}

.sport-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.sport-pill .sport-icon {
    width: 14px;
    height: 14px;
}

.sport-pill.basketball {
    background: linear-gradient(135deg, #ff7849 0%, #ff5722 100%);
    color: white;
}

.sport-pill.basketball .sport-icon {
    color: rgba(255,255,255,0.9);
}

.sport-pill.football {
    background: linear-gradient(135deg, #6d4c41 0%, #5d4037 100%);
    color: white;
}

.sport-pill.football .sport-icon {
    color: rgba(255,255,255,0.9);
}

/* Sport Selector Dropdown */
.sport-selector {
    position: relative;
}

.sport-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sport-dropdown-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.sport-dropdown-btn .sport-icon {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.sport-dropdown-btn .dropdown-chevron {
    margin-left: 2px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.sport-selector.open .dropdown-chevron {
    transform: rotate(180deg);
}

/* Show/hide sport icons based on current sport */
.sport-dropdown-btn .basketball-icon,
.sport-dropdown-btn .football-icon {
    display: none;
}

.sport-dropdown-btn.basketball .basketball-icon {
    display: block;
}

.sport-dropdown-btn.football .football-icon {
    display: block;
}

/* Dropdown Menu */
.sport-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 140px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    overflow: hidden;
}

.sport-selector.open .sport-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sport-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: left;
}

.sport-option:hover {
    background: var(--bg-secondary);
}

.sport-option:first-child {
    border-radius: 9px 9px 0 0;
}

.sport-option:last-child {
    border-radius: 0 0 9px 9px;
}

.sport-option .sport-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.sport-option[data-sport="basketball"]:hover .sport-icon {
    color: #ff5722;
}

.sport-option[data-sport="football"]:hover .sport-icon {
    color: #5d4037;
}

.sport-option.active {
    background: var(--bg-secondary);
    font-weight: 600;
}

.sport-option.active::after {
    content: '';
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* Status Indicator */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4caf50;
}

.status-indicator.saving .status-dot {
    background: #ff9800;
    animation: pulse 1s ease-in-out infinite;
}

.status-indicator.unsaved .status-dot {
    background: #9e9e9e;
}

.status-indicator.error .status-dot {
    background: #f44336;
}

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

/* Nav Actions - Undo/Redo */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-icon-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.nav-icon-btn:active {
    transform: scale(0.92);
}

.nav-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Nav Buttons - Primary & Secondary */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-btn svg {
    flex-shrink: 0;
}

.nav-btn.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1565c0 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.25);
}

.nav-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.35);
}

.nav-btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(25, 118, 210, 0.2);
}

.nav-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.nav-btn.secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.nav-btn.secondary:active {
    transform: scale(0.98);
}

/* Legacy support - keep for backward compatibility */
.sport-badge {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sport-badge.basketball {
    background-color: #ff6b35;
    color: white;
}

.sport-badge.football {
    background-color: #8b4513;
    color: white;
}

.play-title {
    display: none; /* Legacy - hidden */
}

/* ============================================================================
   Main Editor Container
   ============================================================================ */

.editor-container {
    display: flex;
    height: calc(100vh - var(--nav-height) - var(--action-bar-height));
}

/* ============================================================================
   Sidebars - HIDDEN by default (Canvas-first design)
   Can be shown with advanced menu toggle if needed
   ============================================================================ */

.sidebar,
.left-sidebar,
.right-sidebar {
    display: none; /* Hidden - use bottom bar instead */
    width: var(--sidebar-width);
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.right-sidebar {
    border-right: none;
    border-left: 1px solid #1e293b;
    background: #000000;
    padding: 0;
}

/* Dark theme overrides for right sidebar */
.right-sidebar .sidebar-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.right-sidebar .section-header {
    padding: 10px 14px;
}

.right-sidebar .section-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.right-sidebar .section-header .section-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
}

.right-sidebar .section-header .chevron {
    color: rgba(255, 255, 255, 0.5);
}

.right-sidebar .section-content {
    padding: 0 14px 12px 14px;
}

.right-sidebar .sidebar-select {
    padding: 8px 10px;
    font-size: 12px;
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .sidebar-select:hover {
    border-color: #6b7280;
}

.right-sidebar .sidebar-select:focus {
    border-color: var(--primary-color);
}

.right-sidebar .form-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}

.right-sidebar .sidebar-input {
    padding: 8px 10px;
    font-size: 12px;
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .sidebar-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.right-sidebar .sidebar-btn {
    padding: 6px 10px;
    font-size: 12px;
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .sidebar-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.right-sidebar .sidebar-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.right-sidebar .sidebar-btn.primary:hover {
    background: var(--primary-hover);
}

.right-sidebar .toggle-row .toggle-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
}

.right-sidebar .empty-state,
.right-sidebar .player-empty-state {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* Compact play mode buttons */
.right-sidebar .play-mode-buttons {
    gap: 4px;
}

.right-sidebar .play-mode-btn {
    padding: 8px 10px;
    font-size: 11px;
    background: #374151;
    border: 1px solid #4b5563;
    color: rgba(255, 255, 255, 0.8);
}

.right-sidebar .play-mode-btn:hover {
    background: #4b5563;
}

.right-sidebar .play-mode-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.right-sidebar .description-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* Comprehensive dark theme for all right sidebar elements */
.right-sidebar,
.right-sidebar * {
    color: rgba(255, 255, 255, 0.9);
}

.right-sidebar label,
.right-sidebar .control-label,
.right-sidebar .toggle-label,
.right-sidebar span,
.right-sidebar p {
    color: rgba(255, 255, 255, 0.8);
}

.right-sidebar h1, .right-sidebar h2, .right-sidebar h3,
.right-sidebar h4, .right-sidebar h5, .right-sidebar h6 {
    color: white;
}

.right-sidebar select option {
    background: #1e293b;
    color: white;
}

.right-sidebar .sidebar-player-list,
.right-sidebar .player-list {
    background: transparent;
}

.right-sidebar .player-item,
.right-sidebar .sidebar-player-item {
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .player-item:hover,
.right-sidebar .sidebar-player-item:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.right-sidebar .player-item.selected,
.right-sidebar .sidebar-player-item.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.right-sidebar .create-custom-btn,
.right-sidebar .desktop-create-formation-btn {
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .create-custom-btn:hover,
.right-sidebar .desktop-create-formation-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.right-sidebar .flip-formation-btn {
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .flip-formation-btn:hover {
    background: #4b5563;
}

.right-sidebar .layer-item {
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar .layer-item:hover {
    background: #4b5563;
}

.right-sidebar .layer-item.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.right-sidebar input[type="text"],
.right-sidebar input[type="number"] {
    background: #374151;
    border: 1px solid #4b5563;
    color: white;
}

.right-sidebar input[type="text"]:focus,
.right-sidebar input[type="number"]:focus {
    border-color: var(--primary-color);
    outline: none;
}

.right-sidebar .toggle-switch .toggle-slider {
    background: #4b5563;
}

.right-sidebar .toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color);
}

.right-sidebar svg {
    fill: currentColor;
    color: rgba(255, 255, 255, 0.7);
}

.right-sidebar button svg,
.right-sidebar .sidebar-btn svg {
    color: inherit;
}

/* Hide Play Type section for now */
#play-type-section {
    display: none !important;
}

.tool-section {
    margin-bottom: var(--spacing-xl);
}

.tool-section:last-child {
    margin-bottom: 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.section-title .icon {
    font-size: 16px;
}

/* ============================================================================
   Formation Selector
   ============================================================================ */

.formation-select {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.btn-block {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--text-light);
    border-radius: 6px;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.desktop-create-formation-btn {
    margin-top: 8px;
    background: var(--success-color);
    color: white;
}

.btn-block:hover {
    background-color: var(--primary-hover);
}

.btn-block.secondary {
    background-color: var(--secondary-color);
}

.btn-block.secondary:hover {
    background-color: var(--secondary-hover);
}

.formation-info {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.formation-info.hidden {
    display: none;
}

.formation-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.formation-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 12px;
}

.stat {
    color: var(--text-secondary);
}

/* ============================================================================
   Tool Buttons
   ============================================================================ */

.tool-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-weight: 500;
    text-align: left;
}

.tool-btn:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.tool-btn.active {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.tool-btn .icon {
    font-size: 18px;
}

/* ============================================================================
   Route Properties Panel
   ============================================================================ */

.route-properties {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.route-properties.hidden {
    display: none;
}

.route-properties h4 {
    font-size: 14px;
    margin-bottom: var(--spacing-md);
}

.route-properties label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ============================================================================
   Screen Setup Panel
   ============================================================================ */

.screen-setup {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #fef3c7;
    border-radius: 8px;
    border: 2px solid var(--warning-color);
}

.screen-setup.hidden {
    display: none;
}

.screen-setup h4 {
    font-size: 14px;
    margin-bottom: var(--spacing-md);
    color: #92400e;
}

.screen-setup label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    font-size: 13px;
    font-weight: 500;
    color: #78350f;
}

.player-select {
    width: 100%;
}

/* ============================================================================
   Layers
   ============================================================================ */

.layer-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.layer-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.layer-toggle:hover {
    background-color: var(--bg-secondary);
}

.layer-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================================================
   Canvas Area
   ============================================================================ */

.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-tertiary);
    position: relative;
}

.canvas-controls {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-sm);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.control-btn:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.zoom-level {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.canvas-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    z-index: 10; /* Ensure canvas is above other elements in canvas-area */
}

#main-canvas, #interaction-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    cursor: crosshair;
    border-radius: 0;
}

#main-canvas {
    background-color: #f0e6d6;  /* Wood floor color */
    z-index: 1;
}

#interaction-canvas {
    z-index: 2;
    pointer-events: none;
}

/* ============================================================================
   Context Menu
   ============================================================================ */

.context-menu {
    position: absolute;
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 6px;
    z-index: 1000;
    min-width: 220px;
    color: rgba(255, 255, 255, 0.88);
}

.context-menu.hidden {
    display: none;
}

.context-menu-list {
    list-style: none;
}

.context-menu-list li {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.context-menu-list li:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.context-menu-list li.divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
    padding: 0;
    cursor: default;
}

.context-menu-list li.divider:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.context-menu-list li.danger {
    color: #f87171;
}

.context-menu-list li.danger:hover {
    background-color: rgba(248, 113, 113, 0.08);
}

.context-menu-list li .arrow {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

.context-menu-list .ctx-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.context-menu-list li.danger .ctx-icon {
    color: #f87171;
}

.context-menu-list li span:not(.arrow) {
    flex: 1;
    min-width: 0;
}

/* ============================================================================
   Timeline
   ============================================================================ */

.timeline-container {
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.timeline-scrubber {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.timeline-track {
    position: relative;
    height: 40px;
    background-color: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
}

.timeline-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 10;
    transition: left 0.05s linear;
}

.timeline-playhead::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -5px;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
}

.timeline-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.timeline-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.timeline-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.timeline-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.timeline-container label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ============================================================================
   Properties Panel
   ============================================================================ */

.properties-panel {
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-height: 150px;
}

.properties-panel .empty-state {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* ============================================================================
   Player List
   ============================================================================ */

.player-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.player-item:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.player-item.selected {
    background-color: #dbeafe;
    border-color: var(--primary-color);
}

.player-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.player-jersey {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
}

.player-position {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ============================================================================
   Action Bar
   ============================================================================ */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--action-bar-height);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 0 var(--spacing-lg);
}

.action-left, .action-center, .action-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.action-btn:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
}

.action-btn.danger {
    color: var(--danger-color);
}

.action-btn.danger:hover {
    background-color: #fef2f2;
}

.status-message {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

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

.status-message.error {
    color: var(--danger-color);
}

/* ============================================================================
   Modals
   ============================================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    min-width: 400px;
    max-width: 600px;
}

.modal-content.large {
    min-width: 900px;
    max-width: 1200px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.modal-header h2 {
    font-size: 20px;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 28px;
    border-radius: 6px;
}

.close-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-content label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.btn.primary {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 6px;
    font-weight: 500;
}

.btn.primary:hover {
    background-color: var(--primary-hover);
}

.btn.secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 6px;
    font-weight: 500;
}

.btn.secondary:hover {
    background-color: var(--bg-tertiary);
}

/* ============================================================================
   Preview
   ============================================================================ */

.preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

#preview-canvas {
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    background-color: #f0e6d6;
}

/* Legacy .preview-controls styles moved to Professional Preview Controls section below */

/* ============================================================================
   Utility Classes
   ============================================================================ */

.hidden {
    display: none !important;
}

.icon {
    display: inline-block;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 1400px) {
    .left-sidebar, .right-sidebar {
        width: 240px;
    }
}

@media (max-width: 1200px) {
    .right-sidebar {
        display: none;
    }
}

/* Show sidebars on large desktop screens */
@media (min-width: 1200px) {
    .left-sidebar {
        display: block;
    }
    .right-sidebar {
        display: block;
    }
}

/* Show only right sidebar on medium screens */
@media (min-width: 992px) and (max-width: 1199px) {
    .right-sidebar {
        display: block;
    }
}

/* ============================================================================
   Scrollbar Styling (for sidebars)
   ============================================================================ */

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-color);
}

/* ============================================================================
   Mode Toggle & Preview Controls
   ============================================================================ */

/* Mode Toggle Container - hidden globally, always defaults to Draw mode */
.mode-toggle-container {
    display: none !important;
}

/* Dim edit tabs during preview */
.mode-toggle-container.previewing .mode-toggle {
    opacity: 0.5;
    pointer-events: none;
}

/* Two-tab edit mode toggle (Draw | Versus) */
.mode-toggle {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Mobile: Compact layout, hide help panel to prevent overlap */
@media (max-width: 768px) {
    .mode-toggle-container {
        top: 52px; /* Below nav bar */
        bottom: auto;
        left: 12px;
        right: auto;
        transform: none;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
    }

    .mode-toggle {
        padding: 2px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mode-btn {
        padding: 4px 12px;
        font-size: 11px;
    }

    /* Mobile floating actions: only Undo + Menu + Play visible.
       Save/Edit/Formations + More-options all move into the menu sheet
       (mobile-menu-btn opens it). */
    #canvas-floating-actions #canvas-save-btn,
    #canvas-floating-actions #edit-play-btn,
    #canvas-floating-actions #canvas-formations-btn,
    #canvas-floating-actions #canvas-more-options-btn {
        display: none !important;
    }

    #canvas-floating-actions #mobile-menu-btn {
        display: inline-flex;
    }

    /* Play button stays visible — earlier rule had it hidden waiting for a
       replacement bar that was never built. */
    .preview-action-btn {
        display: inline-flex !important;
    }

    /* Hide help tips panel on mobile — it blocks overlay */
    .canvas-help-panel {
        display: none !important;
    }

    /* Move ball assignment overlay below mode toggle */
    .ball-assignment-overlay {
        top: 88px;
    }

    /* Pure black body bg so the iOS safe-area / nav strip below doesn't
       show white — also aligns with the rest of the editor's new black theme. */
    body {
        background-color: #000000;
    }
}

/* Mobile menu button (hidden on desktop, shown in 768px media query above). */
#mobile-menu-btn {
    display: none;
}

.mode-btn {
    padding: 8px 24px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
    white-space: nowrap;
}

.mode-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04);
    color: #334155;
}

.mode-btn.active {
    background: #1e293b;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mode-btn .icon {
    font-size: 14px;
}

/* Preview Action Button (separate from edit mode toggle) */
.preview-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.preview-action-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: #334155;
}

/* Active/Stop state when preview is running */
.preview-action-btn.active {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.preview-action-btn.active:hover {
    background: #dc2626;
}

/* Floating Flip Button */
.flip-btn-canvas {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    border: 2px solid var(--warning-color);
    background: var(--warning-color);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
    z-index: 20;
    transition: all 0.2s ease;
    display: none; /* Hidden by default, shown via JS */
}

.flip-btn-canvas:hover {
    background: #d97706;
    border-color: #d97706;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.4);
}

/* Desktop: Below mode toggle */
@media (min-width: 769px) {
    .flip-btn-canvas {
        bottom: 40px;
    }
}

/* Mobile: Position at top with other controls */
@media (max-width: 768px) {
    .flip-btn-canvas {
        bottom: auto;
        top: 60px;
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* Player Chips Bar (Custom Formation Creation) — Desktop */
.player-chips-bar {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.95) 0%, rgba(30, 64, 175, 0.98) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    z-index: 25;
    max-width: 90%;
    backdrop-filter: blur(10px);
}

.player-chips-bar .player-chip {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid rgba(0, 0, 0, 0.3);
    color: #000000;
}

.player-chips-bar .player-chip:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Done Button */
.player-chips-bar .done-chip {
    background: #000000 !important;
    border: 3px solid white !important;
    color: white !important;
}

.player-chips-bar .done-chip:hover {
    background: #1a1a1a !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Add Player Button */
.player-chips-bar .add-player-chip {
    background: #475569 !important;
    border: 3px dashed white !important;
    color: white !important;
}

.player-chips-bar .add-player-chip:hover {
    background: #334155 !important;
    transform: scale(1.05);
}

/* ── Mobile: Bottom drawer style (matches route-sheet) ── */
@media (max-width: 768px) {
    .player-chips-bar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        background: var(--bg-primary, #ffffff);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        padding: 12px 16px 20px;
        gap: 10px;
        z-index: 10001;
        animation: chipsSlideUp 0.2s ease;
    }

    @keyframes chipsSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .player-chips-bar .player-chip {
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.4);
        padding: 12px 18px;
        font-size: 13px;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .player-chips-bar .done-chip {
        background: var(--text-primary, #1e293b) !important;
        border: 2px solid var(--border-color, #e2e8f0) !important;
        border-radius: 20px !important;
        order: 99; /* Push Done to end on mobile */
    }

    .player-chips-bar .add-player-chip {
        border-radius: 20px !important;
    }

    /* Drawer handle (matches route-sheet) */
    .chips-drawer-handle {
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 4px;
        flex-basis: 100%;
    }

    /* Drawer title */
    .chips-drawer-title {
        flex-basis: 100%;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary, #1e293b);
        margin-bottom: 4px;
    }
}

/* ============================================
   Route Edit Mode Chips Bar
   ============================================ */
.route-edit-chips-bar {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 12px;
    z-index: 25;
    max-width: 90%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.route-edit-chips-bar .route-edit-label {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
}

#route-edit-chips-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.route-edit-chips-bar .player-chip {
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    background: rgba(37, 99, 235, 0.3);
    white-space: nowrap;
}

.route-edit-chips-bar .player-chip:hover {
    transform: scale(1.05);
    background: rgba(37, 99, 235, 0.5);
}

.route-edit-chips-bar .player-chip.active {
    background: #2563eb;
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}
.route-edit-chips-bar .player-chip:not(.active) {
    opacity: 0.45;
}

.route-edit-chips-bar .player-chip.no-route {
    opacity: 0.3;
    cursor: not-allowed;
}

.route-edit-undo-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.route-edit-undo-btn:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.3);
}

.route-edit-undo-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.route-edit-cancel-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.route-edit-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}

.route-edit-done-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.route-edit-done-btn:hover {
    background: rgba(16, 185, 129, 0.3);
}

@media (max-width: 768px) {
    .route-edit-chips-bar {
        top: 10px;
        padding: 6px 12px;
        gap: 6px;
    }
    .route-edit-chips-bar .player-chip {
        padding: 6px 10px;
        font-size: 12px;
    }
    .route-edit-undo-btn,
    .route-edit-cancel-btn,
    .route-edit-done-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Add Player Menu */
.add-player-menu {
    animation: menuSlideDown 0.15s ease-out;
}

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

.add-player-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: background 0.15s ease;
}

.add-player-menu-item:hover {
    background: #f3f4f6;
}


/* ============================================================================
   Floating Edit Players / Done Editing Buttons
   ============================================================================ */

.edit-players-btn,
.done-editing-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    border: none;
}

.edit-players-btn {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.edit-players-btn:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.done-editing-btn {
    display: none;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: white;
}

.done-editing-btn:hover {
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

/* Hide on mobile - use mobile toolbar instead */
@media (max-width: 768px) {
    .edit-players-btn,
    .done-editing-btn {
        display: none !important;
    }
}


/* ============================================================================
   Player Options Popup (Edit Mode)
   ============================================================================ */

.player-options-popup {
    position: fixed;
    z-index: 1000;
    background: #0a0a0a;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    overflow: hidden;
    animation: popupSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.player-options-popup .popup-header {
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;
    color: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.player-options-popup .popup-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    transition: background-color 0.12s ease;
}

.player-options-popup .popup-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.player-options-popup .popup-option:active {
    background: rgba(255, 255, 255, 0.08);
}

/* Danger variant (Delete route) — soft red, not aggressive */
.player-options-popup .popup-option.danger {
    color: #f87171;
}
.player-options-popup .popup-option.danger:hover {
    background: rgba(248, 113, 113, 0.08);
}

/* Done is the affirmative finish action — sits below a separator */
.player-options-popup .popup-option.popup-done {
    color: #34d399;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 0 8px 8px;
}
.player-options-popup .popup-option.popup-done:hover {
    background: rgba(52, 211, 153, 0.08);
}

.player-options-popup .popup-option .popup-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
}

.player-options-popup .popup-option.danger .popup-icon {
    color: #f87171;
}
.player-options-popup .popup-option.popup-done .popup-icon {
    color: #34d399;
}

.player-options-popup .popup-option.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.player-options-popup .popup-option span:not(.popup-icon) {
    flex: 1;
    min-width: 0;
}

/* ============================================================================
   Route Correction Bottom Sheet (AI Import Mode)
   ============================================================================ */

/* No overlay scrim — play stays fully visible behind the sheet */
.route-sheet-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.route-sheet-overlay.hidden {
    display: none;
}

.route-sheet {
    pointer-events: auto;
    background: var(--bg-primary, #ffffff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    animation: sheetSlideUp 0.2s ease;
}

@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.route-sheet-handle {
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 6px auto 2px;
}

.route-sheet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.route-sheet-player-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

.route-sheet-player-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.route-sheet-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.route-sheet-pos {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.route-sheet-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.route-sheet-close:hover {
    background: var(--bg-tertiary, #f1f5f9);
}

.route-sheet-body {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.route-sheet-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.route-sheet-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    min-width: 55px;
}

.route-sheet-select {
    flex: 1;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1e293b);
    font-size: 15px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.route-sheet-select:focus {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.route-sheet-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.stepper-btn {
    width: 40px;
    height: 38px;
    border: none;
    background: var(--bg-secondary, #f8fafc);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:active {
    background: var(--bg-tertiary, #e2e8f0);
}

.stepper-value {
    width: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.stepper-unit {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    padding-right: 4px;
}

.route-sheet-actions {
    display: flex;
    gap: 6px;
}

.route-sheet-action-btn {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #ffffff);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
}

.route-sheet-action-btn:active {
    background: var(--bg-secondary, #f8fafc);
}

.route-sheet-action-btn.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.route-sheet-action-btn.danger:active {
    background: #fef2f2;
}

/* ============================================================================
   Photo Reference Thumbnail (AI Import Mode)
   ============================================================================ */

.import-photo-thumb {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 80px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 50;
    overflow: hidden;
    background: #000;
}

.import-photo-thumb.hidden {
    display: none;
}

.import-photo-img {
    width: 100%;
    height: auto;
    display: block;
}

.import-photo-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 14px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* ============================================================================
   Import Mode Bar (fixed bottom)
   ============================================================================ */

.import-mode-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-primary, #ffffff);
    border-top: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

.import-mode-bar.hidden {
    display: none;
}

.import-status-text {
    font-size: 14px;
    color: var(--text-muted, #64748b);
    flex: 1;
}

.import-done-btn {
    height: 40px;
    min-width: 80px;
    padding: 0 20px;
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.import-done-btn:active {
    background: #059669;
}

/* Motion info row in route sheet */
.route-sheet-motion-info {
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 8px;
}

.route-sheet-motion-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.motion-type-badge {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-secondary, #64748b);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.route-sheet-remove-btn {
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: auto;
}

.route-sheet-remove-btn:active {
    opacity: 0.6;
}

/* Desktop: center the bottom sheet as a bottom-anchored panel */
@media (min-width: 769px) {
    .route-sheet {
        border-radius: 16px;
        max-width: 400px;
        margin-bottom: 16px;
    }

    .route-sheet-handle {
        display: none;
    }
}

/* ============================================================================
   Move Player Tooltip (follows cursor)
   ============================================================================ */

.move-player-tooltip {
    position: fixed;
    z-index: 10000;
    background: #ffffff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
    animation: tooltipFadeIn 0.15s ease-out;
}

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

/* ============================================================================
   Professional Preview Controls (Video Player Style)
   ============================================================================ */

.preview-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.96);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.preview-controls.hidden {
    display: none;
}

/* Timeline Scrubber */
.preview-timeline-container {
    position: relative;
    width: 100%;
    height: 32px;
    padding: 12px 12px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-timeline-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transition: height 0.15s;
}

.preview-timeline-container:hover .preview-timeline-track {
    height: 6px;
}

.preview-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Beehive primary brand gradient — light brand tone at the leading
     * edge fading into the deep brand at the trailing edge so the
     * timeline reads as energetic without competing with the play. */
    background: linear-gradient(90deg, hsl(var(--primary) / 0.55) 0%, hsl(var(--primary)) 100%);
    border-radius: 3px;
    /* No transition: JS drives the width frame-by-frame via rAF. CSS
       interpolation on top causes a "catch-up" effect that reads as jumpy. */
    will-change: width;
}

.preview-timeline-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid hsl(var(--primary));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px hsl(var(--primary) / 0.6), 0 1px 4px rgba(0, 0, 0, 0.45);
    /* Drop the transform transition: JS updates `left` every frame
       during playback. CSS transitioning that movement makes the thumb
       lag behind the actual playhead. Only transition box-shadow (hover). */
    transition: box-shadow 0.15s;
    will-change: left;
    cursor: grab;
    z-index: 10;
}

.preview-timeline-thumb:hover {
    box-shadow: 0 0 10px hsl(var(--primary) / 0.8), 0 1px 6px rgba(0, 0, 0, 0.55);
}

.preview-timeline-thumb:active {
    cursor: grabbing;
}

/* Control Bar */
.preview-control-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
}

/* Close button — first item, persistent red so coaches always see the
   exit affordance during preview. */
.preview-close-btn {
    margin-right: 4px;
    color: #f87171 !important;
}
.preview-close-btn:hover {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #fca5a5 !important;
}
.preview-close-btn svg {
    color: inherit !important;
}

/* Icon Buttons */
.preview-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255, 255, 255, 0.8);
}

.preview-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.preview-icon-btn:active {
    transform: scale(0.95);
}

.preview-play-btn {
    width: 34px;
    height: 34px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 50%;
    border: 1px solid hsl(var(--primary) / 0.45);
    box-shadow: 0 2px 12px hsl(var(--primary) / 0.4);
}

.preview-play-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.05);
}


/* Time Display */
.preview-time {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 4px;
    min-width: 90px;
}

/* Speed Select */
.preview-speed-select {
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.preview-speed-select:hover {
    background: rgba(255, 255, 255, 0.2);
}

.preview-speed-select option {
    background: #0f172a;
    color: #fff;
}

/* Loop Toggle */
.preview-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    margin-left: auto;
}

.preview-toggle input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.preview-toggle input[type="checkbox"]:checked {
    background: hsl(var(--primary));
}

.preview-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.preview-toggle input[type="checkbox"]:checked::after {
    transform: translateX(14px);
}

.toggle-label {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================================
   Mobile & Tablet Responsive Styles
   Production-Grade Mobile-First Design
   ============================================================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    /* Canvas-first layout - full bleed */
    body {
        overflow: hidden;
    }

    /* Ultra-compact nav — sport switcher + undo + menu + close only */
    .editor-nav {
        height: 44px;
        padding: 0 8px;
        --nav-height: 44px;
    }

    /* Hide everything except nav-right on mobile */
    .editor-nav .nav-left {
        display: none;
    }

    .editor-nav .nav-right {
        width: 100%;
        justify-content: space-between;
    }

    /* Hide help, export, save, dividers in nav-right */
    .editor-nav #help-btn,
    .editor-nav #export-btn,
    .editor-nav #save-btn,
    .editor-nav .nav-right .nav-divider {
        display: none !important;
    }

    /* Push undo + more buttons to the right */
    #mobile-undo-btn {
        margin-left: auto;
    }

    .editor-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 44px);
        height: calc(100dvh - 44px);
        overflow: hidden;
    }
    
    /* Hide sidebars on mobile - too cluttered */
    .left-sidebar,
    .right-sidebar {
        display: none; /* We'll add a floating bottom bar instead */
    }
    
    /* Canvas dominates the screen */
    .canvas-area {
        flex: 1;
        width: 100%;
        height: 100%;
        min-height: 0; /* Allow flexbox to shrink */
        order: 1;
        position: relative;
    }
    
    .canvas-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    
    canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Canvas fills the wrapper full-height on mobile. We keep the
       50-yard zoom from 1.6.93 (FOOTBALL_VISIBLE_MIN_Y / MAX_Y in
       canvas_controller.js), which makes the visible field shorter
       in real-world terms and naturally produces well-spaced yard
       lines and larger player chips. The earlier aspect-ratio
       letterbox was reverted at user request because it left the
       field too small relative to the available screen real estate.
       Field still appears slightly stretched vertically vs. real-life
       proportions, but the 50-yard zoom keeps that within tolerance
       while giving the play room to breathe. */

    /* Compact navigation - Modern */
    .editor-nav {
        padding: 0 var(--spacing-sm);
    }

    /* Hide Save & Export on mobile — sport dropdown takes their place */
    #save-btn,
    #export-btn {
        display: none !important;
    }

    /* Move sport dropdown into nav-right on mobile */
    .play-meta .sport-selector {
        display: none; /* Hide from original position in play-meta */
    }

    .nav-right .sport-selector-mobile {
        display: flex;
    }

    .nav-btn span {
        display: none; /* Icons only for space */
    }

    .nav-btn svg {
        margin: 0;
    }

    .nav-divider {
        margin: 0 4px;
    }

    .play-name-input {
        max-width: 150px;
        font-size: 15px;
        min-width: 100px;
    }

    .play-meta {
        padding-left: 4px;
    }

    .status-indicator .status-text {
        display: none;
    }

    /* Hide complex features (keep action bar visible for undo/redo) */
    .timeline-container,
    .zoom-level {
        display: none;
    }

    /* Compact action bar on mobile */
    .action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 50px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
    }

    /* Larger touch targets */
    .tool-btn,
    .nav-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    .nav-icon-btn {
        width: 40px;
        height: 40px;
    }

    /* Show mobile-only nav buttons */
    .mobile-nav-btn {
        display: flex !important;
    }

    /* Hide Draw/Versus toggle on mobile — default to Draw */
    .mode-toggle-container {
        display: none !important;
    }

    /* Hide ONLY the More button on mobile — Undo stays visible next to
       Menu per user request (left of Menu, before Play). HTML order
       Save → Edit → Formations → Undo → More → Menu → Play renders as
       [Undo] [Menu] [Play] once the hidden buttons drop out. */
    #canvas-more-options-btn {
        display: none;
    }

    /* Hide editor-bottom-left-meta strip (back arrow + "Untitled" + sport)
       on mobile — beehive-main's webview chrome already shows play context
       at the top, so this is duplicate UI that crowds the canvas. */
    .editor-bottom-left-meta {
        display: none !important;
    }

    /* Floating actions — full-width bottom strip with Menu on the far
       left and Undo + Play together on the right. Container is fully
       transparent (no pill); individual buttons carry their own dark
       fill so they "pop" without a wrapping bar covering the play. */
    .canvas-floating-actions {
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 24px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        gap: 12px;
        justify-content: flex-end; /* base: Undo + Play on right */
    }

    /* Menu button gets pushed to the far left, separated from the
       Undo/Play cluster. flex order ensures it's first visually even
       though it's later in the DOM. */
    #canvas-floating-actions #mobile-menu-btn {
        order: -1;
        margin-right: auto;
    }

    /* Override the touch min-height:44px (from generic button rule)
       so Menu and Undo stay properly circular (44x44, not 36w x 44h). */
    #canvas-floating-actions .canvas-action-btn:not(.canvas-action-btn--primary) {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 50%;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
        background: rgba(0, 0, 0, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
    }

    /* Play button — bigger, more prominent, stronger shadow. */
    #canvas-floating-actions .canvas-action-btn--primary {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        border-radius: 50%;
        box-shadow: 0 8px 22px hsl(var(--primary) / 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Hide mobile-only nav buttons on desktop */
.mobile-nav-btn {
    display: none;
}

/* Mobile Play Mode Toggle (OFF/DEF) */
.mobile-play-mode-toggle {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 2px;
    gap: 0;
}

.mobile-mode-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-mode-btn.active {
    background: var(--primary-color);
    color: white;
}

.mobile-mode-btn:not(.active):hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Save play + Edit buttons are reached through the canvas More menu
   (save-play / edit-play actions), so hide them in the floating cluster
   to reduce visual noise. The IDs stay in the DOM so the menu's
   .click() forwarders keep working. */
#canvas-floating-actions #canvas-save-btn,
#canvas-floating-actions #edit-play-btn {
    display: none !important;
}

/* Off/Def play-mode toggle — connected segmented control pinned to the
   far-LEFT of #canvas-floating-actions via flex order so it sits with
   the rest of the canvas controls on the right but still reads as one
   segmented component. Uses the same dark-pill / blur vocabulary as
   .canvas-action-btn so it feels native to the cluster. Hidden on
   mobile (BeehiveV1 nav owns the mode toggle there). */
.canvas-mode-group {
    order: -1;                 /* far left of the flex cluster */
    margin-right: 4px;         /* slight separation from action pills */
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background: rgba(0, 0, 0, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
}

.canvas-mode-group .canvas-mode-btn {
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.canvas-mode-group .canvas-mode-btn.active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.canvas-mode-group .canvas-mode-btn:not(.active):hover {
    color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 768px) {
    .canvas-mode-group {
        display: none;
    }
}

/* Mobile Phone (480px and below) */
@media (max-width: 480px) {
    :root {
        --nav-height: 52px;
        --bottom-bar-height: 60px;
    }

    /* Ultra-compact navigation */
    .editor-nav {
        padding: 0 8px;
        height: 52px;
    }

    .nav-back-btn {
        width: 32px;
        height: 32px;
    }

    .nav-divider {
        display: none;
    }

    .play-header {
        flex: 1;
        min-width: 0; /* Allow shrinking */
    }

    .play-name-wrapper {
        max-width: 100%;
    }

    .play-name-input {
        font-size: 14px;
        padding: 2px 4px;
        margin: -2px -4px;
        max-width: 140px;
        min-width: 80px;
    }

    .play-name-wrapper .edit-icon {
        display: none;
    }

    .play-meta {
        gap: 8px;
    }

    .sport-pill {
        padding: 2px 8px 2px 5px;
        font-size: 10px;
    }

    .sport-pill .sport-icon {
        width: 12px;
        height: 12px;
    }

    .status-indicator {
        display: none;
    }

    .nav-actions {
        padding: 2px;
        gap: 2px;
    }

    .nav-icon-btn {
        width: 28px;
        height: 28px;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: auto;
    }

    .nav-btn span {
        display: none;
    }

    .nav-right {
        gap: 6px;
    }

    /* Full bleed — nav is hidden on mobile, no deductions */
    .editor-container {
        height: 100vh;
        height: 100dvh;
    }
}

/* Desktop specific - taller bottom bar */
@media (min-width: 769px) {
    .editor-container {
        height: calc(100vh - var(--nav-height) - 120px); /* 120px for desktop */
    }
}

@media (max-width: 768px) {
    .editor-container {
        height: 100vh; /* Full bleed — nav hidden on mobile */
    }

    .canvas-area {
        width: 100%;
        height: 100%;
        flex: 1;
    }
    
    /* Prevent accidental zoom/scroll */
    .canvas-wrapper {
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        overflow: hidden;
    }
    
    canvas {
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Hide advanced panels on phone */
    .properties-panel,
    .layer-controls,
    .formation-info,
    .context-menu {
        display: none;
    }
    
    /* Compact player list */
    .player-item {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .player-jersey {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    /* Bottom action bar */
    .action-bar {
        height: 45px;
        padding: 0 var(--spacing-sm);
    }
    
    .action-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 12px;
    }
    
    .action-btn span:not(.icon) {
        display: none;
    }
    
    /* Modals take full screen */
    .modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
    
    /* Mode toggle — centering handled by container */
    .mode-toggle {
        position: static;
    }
    
    /* Preview controls - compact centered on mobile, above floating actions */
    .preview-controls {
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-width: 400px;
        padding: 0;
    }

    .preview-control-bar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 8px;
    }

    .preview-icon-btn {
        width: 36px;
        height: 36px;
    }

    .preview-play-btn {
        width: 42px;
        height: 42px;
    }

    /* Larger touch target for timeline scrubber */
    .preview-timeline-container {
        height: 44px;
        padding: 18px 16px;
    }

    .preview-timeline-track {
        height: 6px;
    }

    .preview-timeline-thumb {
        width: 22px;
        height: 22px;
    }

    /* When preview/scrubber is showing, hide the floating Menu + Play
       cluster — the scrubber's own controls (close, play/pause, etc.)
       take over and we don't want duplicate / colliding buttons. */
    body:has(#preview-controls:not(.hidden)) #canvas-floating-actions {
        display: none !important;
    }

    /* Loop toggle switch — touch-friendly min-height (44px) was stretching
       the 18px-tall toggle into a long pill. Pin the explicit dimensions. */
    .preview-toggle input[type="checkbox"] {
        min-height: 18px !important;
        height: 18px;
        width: 32px;
    }
    .preview-toggle {
        min-height: 0;
    }
    
    /* Input fields */
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on focus in iOS */
    }
    
    /* Status message */
    .status-message {
        font-size: 11px;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* Bottom toolbar - VISIBLE on ALL devices (desktop + mobile) */
.mobile-bottom-bar {
    display: flex; /* Always visible! */
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); /* Subtle gradient */
    border-top: 2px solid var(--primary-color); /* Prominent border */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    z-index: 1000;
    padding: 0;
}

/* ============================================================================
   Professional Sidebar - Enterprise Design
   ============================================================================ */

/* Sidebar Section - Collapsible */
.sidebar-section {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.section-header:hover {
    background-color: var(--bg-secondary);
}

.section-header .section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    border: none;
}

.section-header .chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.section-header[aria-expanded="true"] .chevron {
    transform: rotate(0deg);
}

.section-header[aria-expanded="false"] .chevron {
    transform: rotate(-90deg);
}

.section-content {
    padding: 0 16px 16px 16px;
}

.section-content.collapsed {
    display: none;
}

/* Sidebar Select */
.sidebar-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.sidebar-select:hover {
    border-color: var(--text-muted);
}

.sidebar-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Sidebar Form Groups */
.form-group {
    margin-bottom: 12px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.sidebar-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.sidebar-input:hover {
    border-color: var(--text-muted);
}

.sidebar-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sidebar-input::placeholder {
    color: var(--text-muted);
}

/* Sidebar Button */
.sidebar-btn {
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.sidebar-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.sidebar-btn.primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.sidebar-btn.secondary {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Perspective Toggle in Sidebar */
.perspective-toggle-container {
    margin-top: 12px;
}

.perspective-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.perspective-buttons-sidebar {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.perspective-btn-sidebar {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 1px solid var(--border-color);
}

.perspective-btn-sidebar:last-child {
    border-right: none;
}

.perspective-btn-sidebar:hover {
    background: var(--bg-secondary);
}

.perspective-btn-sidebar.active {
    background: var(--primary-color);
    color: white;
}

/* Sidebar Action Row (Undo, More buttons) */
.sidebar-action-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.sidebar-btn.icon-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-btn.icon-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.sidebar-btn.icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-btn.icon-btn svg {
    flex-shrink: 0;
    color: inherit;
}

/* Player List in Sidebar */
.player-list-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.player-list-container .empty-state {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

.player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

.player-row:hover {
    background-color: var(--bg-secondary);
}

.player-row.selected {
    background-color: #eff6ff;
    border-color: var(--primary-color);
}

.player-row .player-indicator {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.player-row .player-indicator.offense {
    background-color: #1e293b;
}

.player-row .player-indicator.defense {
    background-color: #1e293b;
}

.player-row .player-details {
    flex: 1;
    min-width: 0;
}

.player-row .player-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-row .player-position {
    font-size: 11px;
    color: var(--text-muted);
}

.player-row .player-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.player-row:hover .player-actions {
    opacity: 1;
}

.player-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.player-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Sidebar Player Editor - Inline Edit Panel */
.sidebar-player-editor {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.sidebar-player-editor .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-player-editor #editor-player-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-player-editor .close-editor-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-player-editor .close-editor-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-player-editor .editor-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-player-editor .editor-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sidebar-player-editor .editor-action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.sidebar-player-editor .editor-action-btn.danger {
    color: var(--danger-color);
}

.sidebar-player-editor .editor-action-btn.danger:hover {
    background: #fef2f2;
    border-color: var(--danger-color);
}

.sidebar-player-editor .editor-action-btn svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.sidebar-player-editor .editor-action-btn:hover svg {
    color: var(--primary-color);
}

.sidebar-player-editor .editor-action-btn.danger svg {
    color: var(--danger-color);
}

/* Control Row */
.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.control-row:last-child {
    margin-bottom: 0;
}

.control-row .control-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.control-row .control-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.control-row .control-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.control-row .control-input input {
    width: 60px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
}

.control-row .input-suffix {
    font-size: 11px;
    color: var(--text-muted);
}

/* Properties Content */
.properties-content {
    font-size: 13px;
}

.properties-content .empty-state {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
    font-style: italic;
}

/* Desktop adjustments - RIGHT SIDEBAR LAYOUT */
/* Hide mobile-only sport selector on desktop */
.sport-selector-mobile {
    display: none;
}

@media (min-width: 769px) {
    /* Hide mobile bottom bar on desktop */
    .mobile-bottom-bar {
        display: none !important;
    }

    /* Show right sidebar on desktop - dark theme */
    .right-sidebar {
        display: flex !important;
        flex-direction: column;
        width: 260px;
        background: #000000 !important;
        border-left: 1px solid #1e293b !important;
        overflow-y: auto;
        padding: 0;
    }

    /* Editor container - full height with sidebar */
    .editor-container {
        margin-top: 0;
        height: calc(100vh - var(--nav-height) - var(--action-bar-height)) !important;
        flex-direction: row !important;
    }

    .canvas-area {
        flex: 1;
    }
}

/* Hide desktop controls on mobile */
@media (max-width: 768px) {
    .desktop-formation-controls,
    .desktop-player-chips {
        display: none !important;
    }
}

/* Mobile-specific overrides */
@media (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px; /* Increased for two rows */
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 0;
    }
    
    /* Top row: Formation dropdown + Create button */
    .mobile-top-row {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        gap: 12px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }
    
    .mobile-formation-select {
        flex: 1;
        height: 40px;
        font-size: 14px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: white;
        padding: 0 12px;
    }
    
    .create-formation-btn {
        height: 40px;
        padding: 0 16px;
        background: var(--success-color);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .create-formation-btn:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .create-formation-btn:active {
        transform: translateY(0);
    }
    
    /* Bottom row: Players + actions */
    .mobile-bottom-row {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        gap: 8px;
        overflow: hidden;
    }
    
    .mobile-player-chips {
        display: flex;
        gap: 6px;
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding: 4px 0;
    }
    
    .mobile-player-chips::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }
    
    /* Compact player chips */
    .player-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--primary-color);
        color: white;
        font-weight: 700;
        font-size: 11px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        text-transform: uppercase;
        letter-spacing: -0.5px;
    }
    
    .player-chip:active {
        transform: scale(0.92);
    }
    
    .player-chip.selected {
        border-color: var(--warning-color);
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
        background: var(--primary-hover);
    }
    
    /* Draggable chips for formation creation */
    .player-chip.draggable-chip {
        cursor: grab;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: 2px dashed white;
    }
    
    .player-chip.draggable-chip:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    
    .player-chip.draggable-chip:active {
        cursor: grabbing;
        transform: scale(0.95);
    }
    
    /* Action buttons */
    .mobile-action-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .mobile-action-btn:active {
        transform: scale(0.9);
        background: var(--secondary-color);
    }
}

/* Mobile more menu */
.mobile-more-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.more-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
}

.more-menu-content {
    position: relative;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
    /* Bottom padding is on the cancel button (safe-area inset) so the
       sticky footer hugs the screen edge cleanly. */
    padding: 16px 14px 0;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    /* Sheet never exceeds ~88% of viewport so the user always sees the
       canvas edge above it. dvh handles iOS Safari's collapsing toolbar
       mid-session. The whole sheet body scrolls; the Cancel button uses
       position: sticky to stay pinned at the bottom while items scroll. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.more-menu-cancel {
    /* Pinned footer — stays at the bottom of the visible sheet while
       items scroll above. The negative horizontal margins span the
       parent's 14px padding so the divider runs edge-to-edge. */
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    margin-left: -14px;
    margin-right: -14px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #0a0a0a;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: calc(100% + 28px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

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

.more-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.more-menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.more-menu-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.more-menu-item.danger {
    color: #f87171;
}

.more-menu-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.more-menu-item.danger .more-menu-icon {
    color: #f87171;
}

/* Legacy pill-style .more-menu-cancel removed — the sticky-footer
   version defined above (near .more-menu-content) supersedes it. The
   pressed-state hover lives there too. */
.more-menu-cancel:active {
    background: #16181c;
}

/* Play details header at top of mobile menu sheet */
.more-menu-details {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.more-menu-details-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.more-menu-details-row span {
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.more-menu-details-row strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Separator between primary actions and secondary (Shift, Flip, etc.) */
.more-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 10px 0;
}

/* Settings rows inside the More menu — used for Play Type / Perspective
   (mobile-only, since the .play-control-bar at the canvas top is hidden
   on mobile). Each row is a label + a small segmented control with the
   available choices; the active segment uses primary brand color. */
.more-menu-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
}

.more-menu-setting-label {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.6px;
    font-weight: 600;
    flex-shrink: 0;
}

.more-menu-segmented {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 2px;
    gap: 0;
}

.more-menu-segmented button {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* Override the global touch-target 44px min-height — these are
       inline segments and shouldn't stretch vertically. */
    min-height: 0 !important;
}

.more-menu-segmented button.active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.more-menu-segmented button:not(.active):active {
    background: rgba(255, 255, 255, 0.08);
}

/* Landscape mode on phones (max-height: 500px excludes tablets) */
@media (max-height: 500px) and (orientation: landscape) {

    /* Hide nav bar — reclaim 44px */
    .editor-nav {
        display: none !important;
    }

    /* Full-bleed editor container — ignore safe areas for max field visibility */
    .editor-container {
        height: 100vh !important;
        height: 100dvh !important;
        flex-direction: column !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep sidebars hidden — override min-width:769px desktop rule */
    .left-sidebar,
    .right-sidebar {
        display: none !important;
        width: 0 !important;
    }

    /* Hide Draw/Versus toggle */
    .mode-toggle-container {
        display: none !important;
    }

    /* Hide mobile bottom bar — reclaim 100px */
    .mobile-bottom-bar {
        display: none !important;
    }

    /* Canvas fills everything */
    .canvas-area {
        flex: 1;
        min-height: 0;
        width: 100%;
    }

    /* Compact play control bar */
    .play-control-bar {
        top: 4px;
        padding: 4px 12px;
        gap: 8px;
        max-width: calc(100% - 20px);
        font-size: 11px;
    }
    .play-control-bar .control-group {
        padding: 0 6px;
        gap: 4px;
    }
    .play-control-bar .control-select {
        min-width: 110px;
        padding: 4px 8px;
        font-size: 11px;
    }
    .play-control-bar .action-btn-main {
        padding: 4px 8px;
        font-size: 11px;
        min-height: 32px;
    }

    /* Floating actions — bottom-right to avoid center-field overlap */
    .canvas-floating-actions {
        right: 8px;
        bottom: 8px;
        left: auto;
        transform: none;
        padding: 4px 6px;
        border-radius: 20px;
    }

    /* Constrain route sheet for short viewport */
    .route-sheet {
        max-height: 60vh;
        max-height: 60dvh;
        overflow-y: auto;
    }
    .route-sheet-overlay {
        padding-bottom: 0;
    }

    /* Compact route edit chips bar */
    .route-edit-chips-bar {
        padding: 4px 8px;
        gap: 4px;
    }
    .route-edit-chips-bar button {
        padding: 4px 8px;
        font-size: 11px;
        min-height: 28px;
    }

    /* Compact import mode bar */
    .import-mode-bar {
        padding: 4px 8px;
    }

    /* Compact player chips */
    #mobile-player-chips {
        padding: 2px 8px;
        gap: 4px;
    }
    .player-chip {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 10px;
    }
}

/* Touch-friendly enhancements (all devices with touch) */
@media (hover: none) and (pointer: coarse) {
    /* Increase all interactive element sizes */
    button,
    .tool-btn,
    .player-item,
    select,
    input {
        min-height: 44px; /* Apple HIG minimum touch target */
    }
    
    /* Remove hover effects (they're sticky on touch) */
    button:hover,
    .tool-btn:hover,
    .nav-btn:hover {
        transform: none;
    }
    
    /* Add active/pressed state instead */
    button:active,
    .tool-btn:active,
    .nav-btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    /* Larger spacing between interactive elements */
    .tool-buttons {
        gap: 12px;
    }
    
    /* Disable text selection while drawing */
    .canvas-wrapper,
    canvas {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* ============================================================================
   Preview Loading Overlay
   ============================================================================ */

.preview-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ============================================================================
   Initial Loading Overlay
   Covers the entire viewport from first paint until the editor/simulator
   has fetched its play data. Prevents the basketball-default canvas flash
   while EDITOR_STATE.sport is still in flight.
   ============================================================================ */

.initial-loading-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.initial-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.initial-loading-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.initial-loading-icon {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.initial-loading-icon svg {
    position: relative;
    z-index: 2;
    animation: bh-loading-pulse 2s ease-in-out infinite;
    /* Brand-tinted glow: primary @ ~35% alpha — picks up the Beehive
     * primary token so it changes with the host's theme. */
    filter: drop-shadow(0 0 24px hsl(var(--primary) / 0.35));
}

.initial-loading-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    /* The leading edge of the spinner is the Beehive primary brand
     * color; the trailing arc is white at lower alpha so the spin
     * direction reads clearly. */
    border-top-color: hsl(var(--primary));
    border-right-color: rgba(255, 255, 255, 0.45);
    animation: bh-loading-spin 1.1s linear infinite;
}

.initial-loading-ring::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: hsl(var(--primary) / 0.35);
    animation: bh-loading-spin 2.6s linear infinite reverse;
}

.initial-loading-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.initial-loading-text::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: bh-loading-dots 1.4s steps(4, end) infinite;
}

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

@keyframes bh-loading-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes bh-loading-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

.preview-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px auto;
    border: 4px solid rgba(255, 255, 255, 0.18);
    border-top: 4px solid hsl(var(--primary));
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px hsl(var(--primary) / 0.25);
}

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

.loading-text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.loading-subtext {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    animation: pulse 2s ease-in-out infinite;
}

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

/* Basketball-themed loading animation variant */
.loading-spinner.basketball {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #f97316;
}

/* Football-themed loading animation variant */
.loading-spinner.football {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #65a30d;
}

/* ============================================================================
   Line Play Mode Styles
   ============================================================================ */

/* Play Type Selector */
.play-type-selector {
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    margin-left: var(--spacing-md);
    border-left: 1px solid var(--border-color);
}

.play-type-select {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.play-type-select:hover {
    border-color: var(--primary-color);
}

.play-type-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Perspective Selector */
.perspective-selector {
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    margin-left: var(--spacing-md);
    border-left: 1px solid var(--border-color);
}

.perspective-btn {
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.perspective-btn:hover {
    background: var(--bg-secondary);
}

.perspective-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--text-light);
}

.perspective-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Line Play Tool Sections */
.line-play-tools {
    display: none; /* Hidden by default, shown in line play mode via JS */
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
}

.line-play-tools .section-title {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

/* OL Tools Styling */
.ol-tools {
    border-left: 4px solid var(--primary-color);
}

.ol-tools .section-title {
    color: var(--primary-color);
}

/* DL Tools Styling */
.dl-tools {
    border-left: 4px solid var(--danger-color);
}

.dl-tools .section-title {
    color: var(--danger-color);
}

/* Scheme/Stunt Selectors */
.scheme-select,
.stunt-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scheme-select:hover,
.stunt-select:hover {
    border-color: var(--primary-color);
}

.scheme-select:focus,
.stunt-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Info Boxes */
.scheme-info,
.stunt-info {
    padding: var(--spacing-sm);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.scheme-info {
    background: #dbeafe;
    color: #1e40af;
}

.stunt-info {
    background: #fef3c7;
    color: #92400e;
}

/* Participant Selector Chips */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 32px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--danger-color);
    color: var(--text-light);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.participant-chip .remove-btn {
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.8;
}

.participant-chip .remove-btn:hover {
    opacity: 1;
}

/* Gap Count Buttons */
.gap-count-btn {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gap-count-btn:hover {
    background: var(--bg-secondary);
}

.gap-count-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--text-light);
}

/* Button Variants for Line Play */
.btn-block.ol-primary {
    background: var(--primary-color);
    color: var(--text-light);
}

.btn-block.ol-primary:hover {
    background: var(--primary-hover);
}

.btn-block.dl-primary {
    background: var(--danger-color);
    color: var(--text-light);
}

.btn-block.dl-primary:hover {
    background: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .play-type-selector,
    .perspective-selector {
        padding: 0 var(--spacing-sm);
        margin-left: var(--spacing-sm);
    }

    .perspective-btn {
        padding: 4px 12px;
        font-size: 11px;
    }

    .line-play-tools {
        padding: var(--spacing-sm);
    }
}

/* ============================================================================
   Play Mode Selector (Offense vs Defense)
   ============================================================================ */

.play-mode-selector {
    display: flex;
    gap: 0;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.play-mode-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid var(--border-color);
}

.play-mode-btn:last-child {
    border-right: none;
}

.play-mode-btn:hover {
    background: var(--bg-secondary);
}

.play-mode-btn.active[data-mode="offense"] {
    background: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.play-mode-btn.active[data-mode="defense"] {
    background: var(--danger-color);
    color: var(--text-light);
    border-color: var(--danger-color);
}

.mode-description {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================================================
   Defensive Play Tools Styling
   ============================================================================ */

.defensive-tools {
    display: none; /* Hidden by default, shown in defense mode via JS */
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-left: 4px solid var(--danger-color);
}

.defensive-tools .section-title {
    margin-bottom: var(--spacing-md);
    color: var(--danger-color);
}

.btn-block.defensive-primary {
    background: var(--danger-color);
    color: var(--text-light);
    margin-top: var(--spacing-sm);
}

.btn-block.defensive-primary:hover {
    background: #dc2626;
}

/* Defense Setup Section Styles */
.defense-step {
    margin-bottom: var(--spacing-md);
}

.step-instruction {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 8px 0;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-md) 0;
}

/* Defender Panel (shown when defender clicked) */
.defender-panel {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px;
    margin-top: 8px;
}

.defender-panel.hidden {
    display: none;
}

/* Zone Customization Sliders */
.slider-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.slider-label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
}

.zone-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 2px;
    outline: none;
}

.zone-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--danger-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.zone-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--danger-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.slider-value {
    font-size: 10px;
    color: var(--text-muted);
    min-width: 35px;
    text-align: right;
    font-family: monospace;
}

#zone-customization-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

#zone-customization-section.hidden {
    display: none;
}

/* Assignment Summary */
.assignment-summary {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.assignment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.assignment-list li {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

.assignment-list li strong {
    color: var(--danger-color);
}

.btn-block.small {
    padding: 6px 10px;
    font-size: 11px;
}

/* Empty state */
.empty-state {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
}

.coverage-info {
    padding: var(--spacing-sm);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    background: #fee2e2;
    color: #991b1b;
    margin-top: var(--spacing-sm);
}

/* Section Description */
.section-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

/* Defensive Tool Buttons */
.tool-btn.defensive-btn {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.tool-btn.defensive-btn:hover {
    background: var(--danger-color);
    color: var(--text-light);
}

.tool-btn.defensive-btn.active {
    background: var(--danger-color);
    color: var(--text-light);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

/* Offensive Tools (hidden in defense mode) */
.offensive-tools {
    transition: opacity 0.2s ease;
}

/* Conditional Sections */
.conditional-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Hidden by Default - Elements that need JS to show */
.hidden-default,
#motion-section,
#motion-editor,
#motion-defense-response,
#perspective-control-group,
#mobile-player-chips,
#sidebar-perspective-toggle,
#sidebar-player-editor,
#route-edit-chips-bar,
#sidebar-edit-route-btn {
    display: none;
}

/* Conditional sections - controlled by JS via hidden class */
#zone-area-section.hidden,
#zone-customization-section.hidden,
#man-target-section.hidden {
    display: none;
}

/* Football-Only Elements (hidden when sport is basketball) */
.football-only {
    display: none; /* Shown via JS when sport is football */
}

/* Play Control Bar (hidden by default, shown during animation) */
.play-control-bar.hidden-default {
    display: none;
}

/* Tool Labels */
.tool-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Selected Player Label */
.selected-player-label {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--danger-color);
    font-weight: 600;
}

/* Empty Chips Message */
.empty-chips-message {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* ============================================================================
   Motion Section Styling
   ============================================================================ */

.motions-list {
    margin-top: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
}

.motions-list .empty-state {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-md);
    font-style: italic;
}

.motion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.motion-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.motion-item.selected {
    background: #fff7ed;
    border-color: #f59e0b;
}

.motion-item-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.motion-player-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f59e0b;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.motion-type-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.motion-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.motion-item:hover .motion-item-actions {
    opacity: 1;
}

.motion-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.motion-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.motion-action-btn.danger:hover {
    background: #fee2e2;
    color: var(--danger-color);
}

/* Motion Editor Panel */
.motion-editor-panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff7ed;
    border: 2px solid #f59e0b;
    border-radius: 8px;
}

.motion-editor-panel h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 14px;
    color: #b45309;
    font-weight: 600;
}

.motion-editor-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

/* Defense Response Section */
.defense-response-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--border-color);
}

.response-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.radio-option:hover {
    background: var(--bg-secondary);
}

.radio-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.radio-option span {
    font-size: 13px;
    color: var(--text-primary);
}

/* ============================================================================
   Zone Visualization Colors (for CSS color reference)
   ============================================================================ */

.zone-deep-third {
    fill: rgba(147, 51, 234, 0.2);
    stroke: #9333ea;
}

.zone-deep-half {
    fill: rgba(79, 70, 229, 0.2);
    stroke: #4f46e5;
}

.zone-deep-quarter {
    fill: rgba(99, 102, 241, 0.2);
    stroke: #6366f1;
}

.zone-flat {
    fill: rgba(249, 115, 22, 0.2);
    stroke: #f97316;
}

.zone-curl-flat {
    fill: rgba(234, 179, 8, 0.2);
    stroke: #eab308;
}

.zone-hook {
    fill: rgba(34, 197, 94, 0.2);
    stroke: #22c55e;
}

.zone-middle {
    fill: rgba(14, 165, 233, 0.2);
    stroke: #0ea5e9;
}

/* ============================================================================
   Prominent Play Control Bar (Modal-Style, Like Mode Toggle)
   ============================================================================ */

.play-control-bar {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
    z-index: 15;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-right: 1px solid var(--border-color);
}

.control-group:first-child {
    padding-left: 0;
}

.control-group:last-child {
    border-right: none;
    padding-right: 0;
}

/* Perspective control group - hidden by default, shown for line plays */
#perspective-control-group {
    display: none;
}

.control-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.control-label .icon {
    font-size: 16px;
}

.control-select {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.control-select:hover {
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.control-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.create-custom-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--success-color);
    border-radius: 6px;
    background: var(--success-color);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.create-custom-btn:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.create-custom-btn:active {
    transform: translateY(0);
}

.perspective-buttons {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.perspective-btn-main {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid var(--border-color);
}

.perspective-btn-main:last-child {
    border-right: none;
}

.perspective-btn-main:hover {
    background: var(--bg-primary);
}

.perspective-btn-main.active {
    background: var(--primary-color);
    color: var(--text-light);
}

/* Action Buttons in Control Bar */
.actions-group {
    margin-left: auto;
}

.action-btn-main {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn-main:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
}

.action-btn-main:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile responsive — the play-control-bar is fully hidden on mobile.
   Its Play Type / Perspective controls move into the More menu sheet
   (see _showMobileMoreMenu's segmented rows). Formation lives behind
   the existing Formations menu item. Undo + More are already in the
   floating actions cluster, so the top control bar is redundant. */
@media (max-width: 768px) {
    .play-control-bar {
        display: none !important;
    }
    /* Legacy styles kept in case desktop layout regresses, but the
       display: none above wins. */
    .play-control-bar.__legacy-mobile-fallback {
        top: 10px;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
        max-width: calc(100% - 20px);
    }

    .control-group {
        padding: 0 8px;
        gap: 6px;
    }

    .control-label {
        font-size: 11px;
    }

    .control-select {
        min-width: 140px;
        font-size: 12px;
        padding: 6px 10px;
    }

    .perspective-btn-main {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* ============================================================================
   Opposition Dialog - Floating Panel
   ============================================================================ */

.opposition-dialog {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 300px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 1100;
    border: 1px solid var(--border-color);
}

.opposition-dialog.hidden {
    display: none;
}

.opposition-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-dark);
    color: white;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
}

.opposition-dialog-header .header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.opposition-dialog-header .close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.opposition-dialog-header .close-btn:hover {
    color: white;
}

.opposition-dialog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.2s;
}

.opposition-dialog-body .dialog-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opposition-dialog-body .dialog-section > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opposition-dialog-body select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.opposition-dialog-body .coverage-row {
    display: flex;
    gap: 8px;
}

.opposition-dialog-body .coverage-row select {
    flex: 1;
}

.opposition-dialog-body .btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.opposition-dialog-body .btn-sm:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.opposition-dialog-body .btn-sm.danger:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--success-color);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Edit mode toggle */
.opposition-mode-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.opposition-mode-toggle .mode-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.opposition-mode-toggle .mode-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Player chips */
.opposition-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.player-chip-opp {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #fed7aa;
    color: #c2410c;
    border: 2px solid transparent;
    transition: all 0.15s;
}

.player-chip-opp:hover {
    background: #fdba74;
}

.player-chip-opp.selected {
    border-color: var(--primary-color);
    background: #fb923c;
    color: white;
}

.player-chip-opp.has-route::after {
    content: ' \2713';
}

.player-chip-opp.has-zone {
    background: #c4b5fd;
    color: #6d28d9;
}

.player-chip-opp.has-man {
    background: #fecaca;
    color: #b91c1c;
}

.player-chip-opp.unassigned {
    background: #fef3c7;
    color: #92400e;
    border: 2px dashed #f59e0b;
}

/* Custom mode hint */
.custom-mode-hint {
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #92400e;
    background: #fef3c7;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Defender Assignment Popup - Compact Dark Theme */
.defender-assignment-popup {
    position: fixed;
    z-index: 10001;
    background: var(--bg-primary);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
    width: 280px;
    max-height: 75vh;
    overflow: hidden;
    user-select: none;
    font-size: 12px;
}

.defender-assignment-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #000000;
    color: white;
    font-weight: 500;
    font-size: 13px;
    cursor: grab;
    border-radius: 10px 10px 0 0;
}

.defender-assignment-popup .popup-header:active {
    cursor: grabbing;
}

.defender-assignment-popup .popup-header span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.defender-assignment-popup .popup-header span::before {
    content: '⋮⋮';
    font-size: 9px;
    opacity: 0.4;
    letter-spacing: 1px;
}

.defender-assignment-popup .popup-header .close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    padding: 3px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s;
}

.defender-assignment-popup .popup-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.defender-assignment-popup .popup-body {
    padding: 10px;
    max-height: calc(75vh - 90px);
    overflow-y: auto;
}

.defender-assignment-popup .assignment-option {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
    transition: all 0.15s;
    background: var(--bg-secondary);
}

.defender-assignment-popup .assignment-option:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.04);
}

.defender-assignment-popup .assignment-option.selected {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.08);
}

.defender-assignment-popup .assignment-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-primary);
}

.defender-assignment-popup .assignment-option .option-label {
    font-weight: 500;
}

.defender-assignment-popup .assignment-option input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-color);
}

.defender-assignment-popup .target-select,
.defender-assignment-popup .zone-select {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 11px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.defender-assignment-popup .target-select:focus,
.defender-assignment-popup .zone-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.defender-assignment-popup .target-select:disabled,
.defender-assignment-popup .zone-select:disabled {
    opacity: 0.35;
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

.defender-assignment-popup .popup-footer {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 10px 10px;
}

.defender-assignment-popup .btn-primary {
    flex: 1;
    padding: 8px 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.defender-assignment-popup .btn-primary:hover {
    background: var(--primary-hover);
}

.defender-assignment-popup .btn-primary:active {
    transform: scale(0.98);
}

.defender-assignment-popup .btn-secondary {
    padding: 7px 10px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-weight: 400;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.defender-assignment-popup .btn-secondary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Zone sliders section in opposition popup - Compact */
.zone-sliders-section {
    padding: 8px;
    margin-top: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.zone-sliders-section.hidden {
    display: none;
}

.zone-sliders-section .sliders-header {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zone-sliders-section .sliders-header:first-child {
    margin-top: 0;
}

.zone-sliders-section .slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.zone-sliders-section .slider-row label {
    flex: 0 0 45px;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 400;
}

.zone-sliders-section .slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 2px;
    cursor: pointer;
}

.zone-sliders-section .slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: 1.5px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.zone-sliders-section .slider-row input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: 1.5px solid white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.zone-sliders-section .slider-val {
    flex: 0 0 32px;
    font-size: 10px;
    font-family: ui-monospace, 'SF Mono', monospace;
    color: var(--text-secondary);
    text-align: right;
    font-weight: 400;
}

/* Position controls row */
.position-controls-row {
    display: flex;
    gap: 6px;
}

.position-controls-row .btn-sm {
    flex: 1;
    padding: 6px 8px;
    font-size: 11px;
}

/* Actions row */
.actions-row {
    display: flex;
    gap: 8px;
}

.actions-row .btn-sm {
    flex: 1;
}

/* Opposition toggle button */
#opposition-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #fff7ed;
    border: 1px solid #fb923c;
    color: #c2410c;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

#opposition-btn:hover {
    background: #fed7aa;
}

#opposition-btn.active {
    background: #f97316;
    color: white;
    border-color: #f97316;
}

/* Mobile responsive for dialog */
@media (max-width: 768px) {
    .opposition-dialog {
        right: 10px;
        left: 10px;
        width: auto;
        top: 70px;
    }
}

/* ============================================================================
   Coverage Assignment Popup - Floating Panel for Defensive Plays
   ============================================================================ */

/* Legacy coverage popup (kept for backward compat) */
.coverage-popup { display: none; }
.coverage-popup.hidden { display: none; }

/* ============================================================================
   Unified Defender Edit Popup (matches sidebar-player-editor style)
   ============================================================================ */
.defender-edit-popup {
    position: fixed;
    width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    animation: popupSlideIn 0.15s ease-out;
    max-height: 80vh;
    overflow-y: auto;
}

.def-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
    user-select: none;
}

.def-popup-header:active {
    cursor: grabbing;
}

.def-popup-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.def-popup-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.def-popup-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.def-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
}

.defender-edit-popup .editor-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.defender-edit-popup .editor-action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.defender-edit-popup .editor-action-btn svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.defender-edit-popup .editor-action-btn:hover svg {
    color: var(--primary-color);
}

.def-popup-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.def-popup-assignment {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.def-popup-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.def-popup-field > label,
.def-popup-sliders > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.def-popup-field select {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.def-popup-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.def-popup-sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.def-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.def-slider-row > span:first-child {
    width: 45px;
    font-size: 12px;
    color: var(--text-secondary);
}

.def-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: var(--primary-color);
}

.def-slider-val {
    width: 35px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.def-popup-footer {
    padding: 8px 12px 12px;
}

.def-popup-apply-btn {
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.def-popup-apply-btn:hover {
    background: #1d4ed8;
}

.def-popup-apply-btn.success {
    background: var(--success-color);
}

.def-popup-field.hidden,
.def-popup-sliders.hidden {
    display: none;
}

/* Mobile responsive for defender popup */
@media (max-width: 768px) {
    .defender-edit-popup {
        width: calc(100vw - 20px);
        left: 10px !important;
    }
}

/* ============================================================================
   Basketball Play Sequencing Styles
   ============================================================================ */

/* Ball Assignment Overlay - Compact tooltip style */
.ball-assignment-overlay {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    pointer-events: none;
}

.ball-assignment-overlay.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ball-assignment-content {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #000000;
    color: white;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.ball-assignment-icon {
    font-size: 20px;
    line-height: 1;
}

.ball-assignment-content h3 {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin: 0;
    white-space: nowrap;
}

.ball-assignment-content p {
    display: none;
}

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

/* Phase Status Bar - Minimal top indicator */
.phase-status-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #000000;
    color: var(--text-light);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-sm);
}

.phase-status-bar.hidden {
    display: none;
}

.phase-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-status-bar .phase-number {
    font-weight: 600;
    font-size: 11px;
    background: var(--primary-color);
    padding: 2px 6px;
    border-radius: 8px;
}

.phase-status-bar .phase-separator {
    color: var(--text-muted);
}

.phase-status-bar .ball-icon {
    font-size: 12px;
}

.phase-status-bar .ball-handler {
    font-weight: 700;
    font-size: 12px;
    color: #fbbf24;
}

.phase-status-bar .ball-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.phase-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.phase-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.phase-action-btn.primary {
    background: var(--primary-color);
}

.phase-action-btn.primary:hover {
    background: var(--primary-hover);
}

.phase-action-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.phase-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.phase-action-btn svg {
    flex-shrink: 0;
}

/* Phase Badge - Clean styling */
.phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
}

.phase-badge .phase-number {
    background: none;
    padding: 0;
}

.ball-handler-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.phase-status-bar .ball-handler {
    font-weight: 700;
    font-size: 11px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
}

.phase-status-bar .ball-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}

/* ===============================================
   Canvas Help Panel - Contextual Tips (Left Side)
   =============================================== */
.canvas-help-panel {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
    pointer-events: auto; /* Allow interactions with the panel itself */
}

/* Ensure interactive elements in help panel are clickable */
.canvas-help-panel button,
.canvas-help-panel .help-panel-close {
    pointer-events: auto;
}

.canvas-help-panel.hidden {
    display: none;
}

.help-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.help-panel-header svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.help-panel-header span {
    flex: 1;
}

.help-panel-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-panel-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.help-tips-content {
    padding: 12px;
}

.help-tips-content.hidden {
    display: none;
}

.help-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.help-tips-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-muted);
}

.help-tips-list li span {
    flex: 1;
}

/* ===============================================
   Canvas Floating Actions (Bottom Right)
   =============================================== */
/* Simulate-this-play button — floats at the top-center of the canvas,
 * solid-black pill so it reads as the "launch" action rather than one
 * of the cluster's editing tools. Hidden until the user has drawn at
 * least one route (PlayEditor._updateSimulateButtonVisibility adds
 * .is-active when EDITOR_STATE.routes is non-empty). Hidden in
 * onboarding mode (first-run tutorial). Visible in autoplay mode so a
 * coach previewing a saved playbook play can jump straight into the
 * simulator. Click routes through the host (callback or postMessage). */
.simulate-vs-btn {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: filter 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.simulate-vs-btn.is-active {
    display: inline-flex;
}

.simulate-vs-btn:hover:not(:disabled) {
    filter: brightness(1.2);
    border-color: rgba(255, 255, 255, 0.25);
}

.simulate-vs-btn:active:not(:disabled) {
    transform: translateX(-50%) scale(0.97);
}

.simulate-vs-btn svg {
    flex-shrink: 0;
}

body.onboarding-mode .simulate-vs-btn {
    display: none !important;
}

/* Route-edit focus mode: dim the rest of the canvas chrome so the
 * route-edit chips bar at the top dominates and the user's attention
 * stays on the route being redrawn. Players themselves are dimmed via
 * the canvas renderer (canvas_controller _renderPlayers' `dim` flag).
 * The Simulate button is hidden via JS during this mode — see
 * _updateSimulateButtonVisibility — so it can't overlap the chips bar. */
body.route-edit-active #canvas-floating-actions,
body.route-edit-active #canvas-mode-group {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* Floating "cancel route drawing" X button — shown by
   RouteDrawer._showCancelDrawButton positioned just below the player
   chip while the drawer is in ready-to-draw state. Lets the user back
   out of draw mode without having to draw-then-undo a phantom route. */
.draw-route-cancel-btn {
    position: fixed;
    z-index: 200;
    /* Pin to a fixed circular size on every device. Without !important
       the global touch-target rule (@media hover:none and pointer:coarse
       → button { min-height: 44px }) pushes mobile to 28w × 44h, which
       renders as a tall ellipse. Touch hit-area is still comfortable
       because the player chip overlaps part of the touch zone above. */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 120ms ease, background 120ms ease;
}

.draw-route-cancel-btn:hover {
    background: #dc2626;
    transform: scale(1.08);
}

.draw-route-cancel-btn:active {
    transform: scale(0.95);
}

body.route-edit-active #canvas-floating-actions #canvas-undo-btn,
body.route-edit-active #canvas-floating-actions #route-edit-undo-btn {
    /* Keep undo reachable even while dimmed — useful for backing out
     * of a botched edit stroke without exiting edit mode entirely. */
    opacity: 1;
    pointer-events: auto;
}

/* Floating action cluster — same dark-pill + primary-circle vocabulary
 * the simulator uses for its Edit / Run buttons so the editor and
 * simulator share a single visual language across surfaces. */
.canvas-floating-actions {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.canvas-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    transition: filter 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.canvas-action-btn:hover:not(:disabled) {
    filter: brightness(1.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.canvas-action-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.canvas-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.canvas-action-btn svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.85);
}

/* Unlabeled icon-only variant (Undo, More) — square-ish, no padding for text. */
.canvas-action-btn:not(.labeled):not(.canvas-action-btn--primary) {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
}

.canvas-action-btn .action-label {
    font-size: 12px;
    line-height: 1;
}

/* Save play — primary brand pill so the save action reads as the
 * most important commit available in the cluster. */
#canvas-save-btn {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary) / 0.45);
    color: hsl(var(--primary-foreground));
    box-shadow: 0 4px 14px hsl(var(--primary) / 0.35);
}
#canvas-save-btn:hover:not(:disabled) { filter: brightness(1.08); }
#canvas-save-btn svg { color: hsl(var(--primary-foreground)); }

/* Edit active = primary brand pill (mirrors the simulator's active edit). */
#edit-play-btn.active {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary) / 0.45);
    color: hsl(var(--primary-foreground));
}
#edit-play-btn.active svg { color: hsl(var(--primary-foreground)); }

/* Preview is the cluster's primary circular action — Beehive primary
 * brand colour by default, slate-900 when actively stopping. */
.canvas-action-btn--primary {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.6);
    color: hsl(var(--primary-foreground));
    box-shadow: 0 4px 18px hsl(var(--primary) / 0.4);
}
.canvas-action-btn--primary svg { color: hsl(var(--primary-foreground)); }
.canvas-action-btn--primary:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.08); }
.canvas-action-btn--primary:active:not(:disabled) { transform: scale(0.95); }

#preview-action-btn.active {
    background: linear-gradient(135deg, #1e293b 0%, #020617 100%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#preview-action-btn.active svg { color: #fff; }

/* Swap play <-> stop icon based on .active state */
#preview-action-btn .preview-icon-stop { display: none; }
#preview-action-btn.active .preview-icon-play { display: none; }
#preview-action-btn.active .preview-icon-stop { display: inline-block; }

/* ─────────────────────────────────────────────────────────────────
 * Formations popup — anchored above the floating action cluster.
 * Reuses the dark slate aesthetic of the bottom buttons so it feels
 * like an extension of the cluster, not a foreign panel.
 * ───────────────────────────────────────────────────────────────── */
.canvas-formations-popup {
    position: fixed;
    z-index: 60;
    min-width: 260px;
    max-width: 320px;
    max-height: 60vh;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    color: #f1f5f9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.canvas-formations-popup.hidden { display: none; }
.canvas-formations-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.canvas-formations-popup__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #cbd5e1;
}
.canvas-formations-popup__close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 4px;
}
.canvas-formations-popup__close:hover { color: #f1f5f9; background: rgba(255,255,255,0.06); }
.canvas-formations-popup__body {
    overflow-y: auto;
    padding: 6px;
}
.canvas-formations-popup__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 12px;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.canvas-formations-popup__item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
.canvas-formations-popup__item:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: hsl(var(--primary) / 0.7);
}
.canvas-formations-popup__item-name {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
}
.canvas-formations-popup__item-meta {
    font-size: 11px;
    color: #94a3b8;
}
.canvas-formations-popup__custom-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.12);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 6px;
}
.canvas-formations-popup__empty {
    margin: 0;
    padding: 16px 12px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

/* Phase Tracker (Bottom Panel) - Dark compact panel with actions */
.phase-tracker {
    position: absolute;
    bottom: 90px; /* Position above preview controls */
    left: 20px;
    background: #000000;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 15; /* Above preview controls */
    backdrop-filter: blur(10px);
    max-width: 300px;
}

.phase-tracker.hidden {
    display: none;
}

/* When in preview/versus mode (actions hidden), make it more compact */
.phase-tracker.preview-mode .phase-tracker-timeline {
    border-top: none;
    padding-top: 0;
}

.phase-tracker.preview-mode {
    padding: 8px 12px;
}

/* Action buttons row */
.phase-tracker-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.phase-tracker-actions.hidden {
    display: none;
}

.phase-tracker-spacer {
    flex: 1;
    min-width: 10px;
}

/* Phase timeline row */
.phase-tracker-timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
}

.timeline-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.phase-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.tracker-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
}

.tracker-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}

.tracker-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.phase-tracker-phases {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 2px 0;
    flex: 1;
}

.phase-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: auto;
    white-space: nowrap;
}

.phase-block:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.12);
}

.phase-block.active {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.25);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

.phase-block .phase-number {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.phase-block .phase-ball-handler {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
}

.phase-block .phase-status {
    font-size: 9px;
    color: #4ade80;
}

.phase-block.active .phase-status {
    color: #60a5fa;
}

.phase-arrow {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    padding: 0 2px;
}

.phase-arrow .arrow-line {
    font-size: 12px;
    line-height: 1;
}

.phase-arrow .pass-type {
    font-size: 8px;
    text-transform: uppercase;
    margin-left: 2px;
}

/* Phase Edit Popup */
.phase-edit-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    z-index: 3000;
    min-width: 320px;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.phase-edit-popup.hidden {
    display: none;
}

.phase-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.phase-edit-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.phase-edit-header .close-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
}

.phase-edit-header .close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.phase-edit-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.phase-edit-section {
    margin-bottom: 16px;
}

.phase-edit-section:last-child {
    margin-bottom: 0;
}

.phase-edit-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.phase-edit-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.phase-edit-list {
    max-height: 120px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 8px;
}

.phase-edit-list .empty-state {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    padding: 4px;
}

.phase-edit-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 13px;
}

.phase-edit-list-item:last-child {
    margin-bottom: 0;
}

.phase-edit-list-item .item-label {
    font-weight: 500;
    color: var(--text-primary);
}

.phase-edit-list-item .item-type {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
}

.phase-edit-footer {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.phase-edit-footer .btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.phase-edit-footer .btn.primary {
    background: var(--primary-color);
    color: white;
}

.phase-edit-footer .btn.primary:hover {
    background: var(--primary-hover);
}

.phase-edit-footer .btn.danger {
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.phase-edit-footer .btn.danger:hover {
    background: var(--danger-color);
    color: white;
}

/* Phase Edit Popup Overlay */
.phase-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2999;
}

.phase-edit-overlay.hidden {
    display: none;
}

/* Pass Mode Highlighting */
.player-pass-target {
    cursor: pointer;
}

.player-pass-target::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px dashed var(--primary-color);
    border-radius: 50%;
    animation: pulse-border 1s infinite;
}

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

/* Pass Type Popover */
.pass-type-popover {
    position: fixed;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 16px;
    z-index: 3000;
    min-width: 200px;
}

.pass-type-popover h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.pass-type-options {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.pass-type-option {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.pass-type-option:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.pass-type-option.selected {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.pass-popover-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.pass-popover-actions button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.pass-popover-actions .cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.pass-popover-actions .cancel-btn:hover {
    background: var(--bg-tertiary);
}

.pass-popover-actions .confirm-btn {
    background: var(--primary-color);
    border: none;
    color: white;
}

.pass-popover-actions .confirm-btn:hover {
    background: var(--primary-hover);
}

/* Canvas Ball Indicator */
.canvas-ball-indicator {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f97316;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -100%);
    margin-top: -8px;
    pointer-events: none;
    z-index: 100;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .phase-status-bar {
        padding: 4px 8px;
    }

    .phase-tracker-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .phase-action-btn {
        padding: 3px 6px;
        font-size: 10px;
    }

    .phase-tracker-spacer {
        display: none;
    }

    .ball-assignment-content {
        padding: 8px 14px;
        margin: 0 10px;
    }

    .phase-tracker-phases {
        gap: 3px;
    }

    .phase-block {
        padding: 3px 6px;
    }

    .timeline-label {
        display: none;
    }
}

/* ============================================================================
   Basketball Preview Event Overlay
   ============================================================================ */

.basketball-event-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-out;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.basketball-event-overlay.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.basketball-event-overlay .event-icon {
    font-size: 24px;
}

.basketball-event-overlay .event-text {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Event type specific styling */
.basketball-event-overlay.event-look-for-shot {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.95) 0%, rgba(194, 65, 12, 0.95) 100%);
    border-color: rgba(251, 146, 60, 0.5);
}

.basketball-event-overlay.event-pass {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(29, 78, 216, 0.95) 100%);
    border-color: rgba(96, 165, 250, 0.5);
}

.basketball-event-overlay.event-shot {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%);
    border-color: rgba(74, 222, 128, 0.5);
    animation: shotPulse 0.3s ease-out;
}

@keyframes shotPulse {
    0% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Phase Indicator */
.phase-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(30, 41, 59, 0.9);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.phase-indicator.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================================================
   Screen Manager - Dialog and Button Styles
   ============================================================================ */

/* Highlight style for Pick & Roll button */
.phase-action-btn.highlight {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.9) 0%, rgba(202, 138, 4, 0.9) 100%);
    color: #000;
    font-weight: 600;
}

.phase-action-btn.highlight:hover {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.95) 0%, rgba(234, 179, 8, 0.95) 100%);
}

/* Screen Dialog */
.screen-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    min-width: 320px;
    max-width: 400px;
    animation: dialogSlideIn 0.2s ease-out;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.screen-dialog.placing {
    opacity: 0.3;
    pointer-events: none;
}

.screen-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 12px 12px 0 0;
}

.screen-dialog-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.close-dialog-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.close-dialog-btn:hover {
    color: var(--text-light);
}

/* Screen Steps */
.screen-step {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.screen-step:last-of-type {
    border-bottom: none;
}

.screen-step label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Player Chip Grid */
.player-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.player-chip {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-tertiary);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.player-chip:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.player-chip.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.player-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Screen Type Grid */
.screen-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.screen-type-btn {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 44px;
    text-align: center;
}

.screen-type-btn:hover {
    border-color: var(--screen-color, rgba(234, 179, 8, 0.7));
    background: rgba(255, 255, 255, 0.05);
}

.screen-type-btn.selected {
    background: var(--screen-color, rgba(234, 179, 8, 0.9));
    border-color: var(--screen-color, rgba(234, 179, 8, 0.9));
    color: #000;
}

/* Screener Action Grid */
.screener-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.action-btn.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Side Select Grid (for PnR) */
.side-select-grid {
    display: flex;
    gap: 8px;
}

.side-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.side-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.side-btn.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Dialog Footer */
.screen-dialog-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--border-color);
}

.screen-dialog-footer .btn-primary {
    flex: 1;
    padding: 10px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.screen-dialog-footer .btn-primary:hover {
    background: var(--primary-hover);
}

.screen-dialog-footer .btn-secondary {
    padding: 10px 16px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.screen-dialog-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
}

/* Screen rendering on canvas - color-coded by type */
.screen-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
}

.screen-marker-box {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #000;
}

/* Screen Placement Tooltip */
.screen-placement-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    animation: tooltipFadeIn 0.2s ease-out;
}

.screen-placement-tooltip span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.screen-placement-tooltip span::before {
    content: '👆';
    font-size: 14px;
}

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

/* ============================================================================
   Manual Drawing Mode Tooltip
   ============================================================================ */

.manual-drawing-tooltip {
    position: fixed;
    z-index: 10001;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.95));
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 220px;
    animation: manualTooltipSlideIn 0.25s ease-out;
}

.manual-tooltip-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.manual-tooltip-header::before {
    content: '🎨';
    font-size: 14px;
}

.manual-tooltip-instruction {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 12px;
}

.manual-tooltip-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.manual-tooltip-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.manual-tooltip-btn.done-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.manual-tooltip-btn.done-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.manual-tooltip-btn.cancel-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.manual-tooltip-btn.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

@keyframes manualTooltipSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Draw Custom Toggle in Screen Dialog */
.draw-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 8px 0;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.draw-mode-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #2563eb;
    cursor: pointer;
}

.draw-mode-toggle label::before {
    content: '✏️';
    font-size: 14px;
}

.draw-mode-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.draw-mode-description {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    padding-left: 26px;
}

/* ============================================================================
   UX Redesign: Versus Mode & Hidden Sections
   ============================================================================ */

/* Hidden Sections (Properties, Timeline, Layers, Play Details) */
.sidebar-section.hidden-section {
    display: none !important;
}

/* Conditional Section (Edit Players - shown when formation loaded) */
.sidebar-section.conditional-section {
    display: none;
    /* Remove the extra border-top from conditional sections in sidebar */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.sidebar-section.conditional-section.visible {
    display: block;
}

/* ============================================================================
   Left Sidebar - Versus Mode
   ============================================================================ */

/* Old versus sidebar - hidden, replaced by horizontal versus-bar */
.left-sidebar.versus-sidebar {
    display: none !important;
    width: var(--sidebar-width);
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 0;
    position: relative;
    flex-shrink: 0;
}

.left-sidebar.versus-sidebar.visible {
    /* Sidebar is now replaced by horizontal bar - keep hidden */
    display: none !important;
}

.versus-sidebar-header {
    padding: 16px;
    background: #000000;
    border-bottom: 1px solid var(--border-color);
}

.versus-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin: 0;
}

/* Toggle Row */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.toggle-row .toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Versus Edit Toggle */
.versus-edit-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.versus-toggle-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.versus-toggle-btn:first-child {
    border-right: 1px solid var(--border-color);
}

.versus-toggle-btn:hover {
    background: var(--bg-secondary);
}

.versus-toggle-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Versus Player Chips */
.versus-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.versus-player-chips .empty-state {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px;
    width: 100%;
}

.versus-player-chip {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.versus-player-chip:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.versus-player-chip.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.versus-player-chip.has-man {
    border-color: #10b981;
}

.versus-player-chip.has-zone {
    border-color: #f59e0b;
}

/* Position Controls Grid */
.position-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.position-controls-grid .sidebar-btn {
    margin-top: 0;
}

.position-controls-grid .sidebar-btn:last-child {
    grid-column: span 2;
}

/* Sidebar Slider Control */
.slider-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    appearance: none;
    outline: none;
}

.sidebar-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
}

/* Danger Button */
.sidebar-btn.danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--danger-color);
}

.sidebar-btn.danger:hover {
    background: #fee2e2;
    border-color: var(--danger-color);
}

/* ============================================================================
   Horizontal Versus Bar (Top of Canvas)
   ============================================================================ */

.versus-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #000000;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.versus-bar.hidden {
    display: none;
}

.versus-bar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.versus-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Versus Bar Toggle */
.versus-bar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.versus-bar-toggle input {
    display: none;
}

.versus-bar-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: #374151;
    border-radius: 20px;
    transition: background 0.2s;
}

.versus-bar-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.versus-bar-toggle input:checked + .versus-bar-toggle-slider {
    background: var(--primary-color);
}

.versus-bar-toggle input:checked + .versus-bar-toggle-slider::before {
    transform: translateX(16px);
}

.versus-bar-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: white;
}

/* Versus Bar Select */
.versus-bar-select {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
}

.versus-bar-select:hover {
    border-color: #6b7280;
}

.versus-bar-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Versus Bar Button */
.versus-bar-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.versus-bar-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.versus-bar-btn.icon-btn {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.versus-bar-btn.icon-btn svg {
    fill: currentColor;
}

.versus-bar-btn.danger {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

.versus-bar-btn.danger:hover {
    background: #991b1b;
    border-color: #b91c1c;
}

/* Versus Bar Actions */
.versus-bar-actions {
    display: flex;
    gap: 4px;
}

/* Versus Bar Opacity */
.versus-bar-opacity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.versus-bar-slider {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: #374151;
    appearance: none;
    outline: none;
    cursor: pointer;
}

.versus-bar-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.versus-bar-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
}

.versus-bar-value {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    min-width: 32px;
}

/* Hide coverage group by default (show for defense opposition) */
#versus-coverage-group {
    display: none;
}

#versus-coverage-group.visible {
    display: flex;
}

/* Versus Bar Player Chips */
.versus-bar-players {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 400px;
}

#versus-bar #versus-player-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    max-width: 300px;
}

#versus-bar #versus-player-chips::-webkit-scrollbar {
    height: 4px;
}

#versus-bar #versus-player-chips::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#versus-bar #versus-player-chips::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

#versus-bar .versus-player-chip {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

#versus-bar .versus-player-chip:hover {
    background: #4b5563;
    border-color: #6b7280;
}

#versus-bar .versus-player-chip.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

#versus-bar .versus-player-chip.has-man {
    border-color: #10b981;
}

#versus-bar .versus-player-chip.has-zone {
    border-color: #f59e0b;
}

#versus-bar .empty-state {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    white-space: nowrap;
}

.versus-bar-empty {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Responsive: Wrap on smaller screens */
@media (max-width: 900px) {
    .versus-bar {
        padding: 8px 12px;
        gap: 12px;
    }

    .versus-bar-select {
        min-width: 80px;
    }

    .versus-bar-slider {
        width: 60px;
    }
}

/* ============================================================================
   Formation Tooltip (Points to right sidebar)
   ============================================================================ */

.formation-tooltip {
    position: fixed;
    top: 50%;
    right: calc(var(--sidebar-width) + 20px);
    transform: translateY(-50%);
    z-index: 1000;
    animation: tooltipPulse 2s ease-in-out infinite;
}

.formation-tooltip.hidden {
    display: none;
}

.tooltip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4);
    font-size: 14px;
    font-weight: 500;
}

.tooltip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-arrow {
    font-size: 20px;
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes tooltipPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.02);
    }
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* ============================================================================
   Mode Toggle - Three Buttons (Draw/Versus/Preview)
   ============================================================================ */

/* Desktop adjustments for 3 buttons */
@media (min-width: 769px) {
    .mode-toggle {
        bottom: 98px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .mode-toggle {
        padding: 3px;
        gap: 2px;
    }

    .mode-toggle .mode-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
    }

    .left-sidebar.versus-sidebar {
        position: fixed;
        left: 0;
        top: var(--nav-height);
        height: calc(100vh - var(--nav-height) - var(--action-bar-height));
        z-index: 100;
        width: 260px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .formation-tooltip {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 140px;
        transform: translateX(-50%);
    }

    .tooltip-arrow {
        display: none;
    }
}

/* ============================================================================
   Editor Container Layout with Left Sidebar
   ============================================================================ */

/* Update editor container to support left sidebar */
.editor-container {
    display: flex;
    height: calc(100vh - var(--nav-height) - var(--action-bar-height));
}

/* Canvas area should flex to fill remaining space */
.canvas-area {
    flex: 1;
    min-width: 0;
}

/* Right sidebar - show by default on desktop */
@media (min-width: 769px) {
    .right-sidebar {
        display: block;
    }
}

/* ============================================================================
   Save Play Dialog
   ============================================================================ */

/* Dark-themed save dialog. Shares its visual language with the simulator
   defender-assignment / save-dialog popups so all naming surfaces feel
   consistent. The same classes are reused by the dynamic "name your custom
   formation" prompt (see _promptForName in editor/main.js). */
.save-play-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.18s ease;
}

.save-play-overlay.hidden {
    display: none;
}

.save-play-modal {
    background: #14181f;
    color: #e6e8eb;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.22s ease;
    overflow: hidden;
}

.save-play-header {
    padding: 14px 18px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.save-play-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.save-play-body {
    padding: 18px 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.save-play-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.save-play-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.save-play-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #2d3441;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #e2e8f0;
    background: #0f1218;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.save-play-input::placeholder {
    color: #475569;
}

.save-play-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* <select> renders the option list in OS-native styling; we can only
   influence the closed state. Match it to the dark input look. */
select.save-play-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.save-play-error {
    margin: 0;
    color: #f87171;
    font-size: 12px;
    min-height: 1em;
}

.save-play-error.hidden {
    display: none;
}

.save-play-footer {
    padding: 10px 20px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.save-play-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, filter 0.12s ease, transform 0.12s ease;
}

.save-play-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-color: transparent;
}

.save-play-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.save-play-btn-primary {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.save-play-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.save-play-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #3b82f6;
}

/* ============================================================================
   Formation Picker Modal
   ============================================================================ */

.formation-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.formation-picker-overlay.hidden {
    display: none;
}

.formation-picker-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

.formation-picker-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.formation-picker-header h2 {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.formation-picker-subtitle {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.formation-picker-mode-toggle {
    display: inline-flex;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.fp-mode-btn {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.fp-mode-btn:hover {
    color: var(--text-primary);
}

.fp-mode-btn.active {
    background: var(--primary-color, #2563eb);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.formation-picker-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.formation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.formation-grid.hidden {
    display: none;
}

.formation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.formation-card:hover {
    border-color: var(--primary-color);
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.formation-card:active {
    transform: translateY(0);
}

.formation-preview {
    width: 100%;
    aspect-ratio: 5/3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.formation-preview svg {
    width: 100%;
    height: 100%;
}

.formation-preview.custom-formation {
    border: 2px dashed var(--border-color);
    background: var(--bg-tertiary);
}

.formation-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.formation-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-color, #3b82f6);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formation-card.user-custom {
    position: relative;
    border: 2px solid var(--accent-color, #3b82f6);
}

.formation-card.user-custom:hover {
    border-color: var(--accent-hover, #2563eb);
}

.formation-picker-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.formation-picker-saved-btn {
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}

.formation-picker-saved-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color, #2563eb);
}

.formation-picker-skip-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.formation-picker-skip-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .formation-picker-modal {
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
    }

    .formation-picker-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .formation-picker-header {
        padding: 20px 16px 12px;
    }

    .formation-picker-header h2 {
        font-size: 18px;
    }

    .formation-picker-content {
        padding: 16px;
    }

    .formation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .formation-card {
        padding: 10px;
    }

    .formation-name {
        font-size: 12px;
    }
}

/* ============================================================================
   Demo Mode Styles
   ============================================================================
   Styles for the demo/preview mode that restricts save/export functionality
   ============================================================================ */

/* Demo Mode Badge */
.demo-mode-badge {
    display: inline-flex;
    align-items: center;
    background: #0f172a;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Demo mode status message styling */
.status-message.warning {
    background-color: #fef3c7;
    color: #92400e;
    border-left: 4px solid var(--warning-color, #f59e0b);
}

/* Optional: Subtle visual indicator on save/export buttons in demo mode */
body.demo-mode .save-btn,
body.demo-mode .export-btn,
body.demo-mode #save-btn,
body.demo-mode #export-btn {
    position: relative;
}

body.demo-mode .save-btn::after,
body.demo-mode .export-btn::after,
body.demo-mode #save-btn::after,
body.demo-mode #export-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--warning-color, #f59e0b);
    border-radius: 50%;
    border: 2px solid white;
}

/* ============================================================================
   Demo Admin Mode Styles
   ============================================================================ */

/* Admin mode badge variant */
.demo-mode-badge.admin-mode {
    background: linear-gradient(135deg, #10b981, #059669);
    cursor: default;
    animation: none;
}

/* Save Demo Play Button */
.save-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-left: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.save-demo-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.save-demo-btn:active {
    transform: translateY(0);
}

/* Demo Admin Login Modal */
.demo-admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.demo-admin-modal.hidden {
    display: none;
}

.demo-admin-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: modal-slide-in 0.2s ease;
}

@keyframes modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.demo-admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}

.demo-admin-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.demo-admin-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.demo-admin-close-btn:hover {
    color: var(--danger-color, #ef4444);
}

.demo-admin-modal-body {
    padding: 20px;
}

.demo-admin-form-group {
    margin-bottom: 16px;
}

.demo-admin-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    margin-bottom: 6px;
}

.demo-admin-form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.demo-admin-form-group input:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.demo-admin-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
}

.demo-admin-error.hidden {
    display: none;
}

.demo-admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}

.demo-admin-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.demo-admin-btn.primary {
    background: var(--primary-color, #2563eb);
    color: white;
}

.demo-admin-btn.primary:hover {
    background: var(--primary-hover, #1d4ed8);
}

.demo-admin-btn.secondary {
    background: white;
    color: var(--text-secondary, #475569);
    border: 1px solid var(--border-color, #e2e8f0);
}

.demo-admin-btn.secondary:hover {
    background: var(--bg-secondary, #f8fafc);
}

/* schemer-patch: hide scrubber close in autoplay-mode */
body.autoplay-mode #preview-close-btn { display: none !important; }