@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,600;0,700;1,600&family=JetBrains+Mono:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ==========================================================================
   Sci-Fi / Cyberpunk HUD Theme ("Neon Grid")
   Activated via <html data-theme="cyberpunk">
   ========================================================================== */

[data-theme="cyberpunk"] {
    /* 1. Visual Design System Tokens */
    --hud-bg-root-start: #070b12;
    --hud-bg-root-end: #0a1120;
    --hud-card-bg: rgba(13, 22, 38, 0.82); /* >= 75-80% opacity for daylight readability */
    --hud-card-bg-elevated: rgba(16, 28, 48, 0.90);
    --hud-cyan: #00f3ff;
    --hud-cyan-glow: 0 0 12px rgba(0, 243, 255, 0.45);
    --hud-cyan-glow-strong: 0 0 18px rgba(0, 243, 255, 0.35);
    --hud-pink: #ff0055;
    --hud-pink-alt: #f72585;
    --hud-pink-glow: 0 0 12px rgba(255, 0, 85, 0.45);
    --hud-green: #00ff88;
    --hud-green-glow: 0 0 12px rgba(0, 255, 136, 0.45);
    --hud-amber: #ffb703;
    --hud-amber-glow: 0 0 12px rgba(255, 183, 3, 0.45);
    --hud-muted: #4f6b8a;
    --hud-grid-line: rgba(0, 243, 255, 0.15);
    --hud-border-color: rgba(0, 243, 255, 0.3);
    --hud-text-primary: #f0f6fc;
    --hud-text-secondary: #8ba8c7;

    /* Field / Diamond specific CSS variables */
    --hud-field-bg: #0d1826;
    --hud-infield-bg: rgba(10, 22, 38, 0.92);
    --hud-basepath-grid: rgba(0, 243, 255, 0.25);
    --hud-line-glow: #00f3ff;
    --hud-mound-bg: #07111e;

    /* Typography */
    --hud-font-mono: 'Share Tech Mono', 'JetBrains Mono', monospace;
    --hud-font-display: 'Chakra Petch', 'Barlow', sans-serif;

    /* Bootstrap 5 Variable Overrides for Seamless Dark/Cyberpunk Integration */
    --bs-body-bg: #070b12;
    --bs-body-color: #f0f6fc;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #8ba8c7;
    --bs-tertiary-bg: rgba(13, 22, 38, 0.85);
    --bs-card-bg: rgba(13, 22, 38, 0.82);
    --bs-card-cap-bg: rgba(8, 15, 28, 0.9);
    --bs-border-color: rgba(0, 243, 255, 0.3);
    --bs-primary: #00f3ff;
    --bs-primary-rgb: 0, 243, 255;
    --bs-danger: #ff0055;
    --bs-danger-rgb: 255, 0, 85;
    --bs-success: #00ff88;
    --bs-success-rgb: 0, 255, 136;
    --bs-warning: #ffb703;
    --bs-warning-rgb: 255, 183, 3;
    --bs-info: #00f3ff;
    --bs-link-color: #00f3ff;
    --bs-link-hover-color: #70f9ff;
}

/* ==========================================================================
   2. Background Grid Layer & Global Typography
   ========================================================================== */

html[data-theme="cyberpunk"],
[data-theme="cyberpunk"] body {
    overflow-x: hidden;
    max-width: 100vw;
}

[data-theme="cyberpunk"] body {
    background-color: var(--hud-bg-root-start);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(0, 243, 255, 0.10) 0%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(0, 243, 255, 0.06) 39px,
            rgba(0, 243, 255, 0.06) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(0, 243, 255, 0.06) 39px,
            rgba(0, 243, 255, 0.06) 40px
        ),
        linear-gradient(180deg, var(--hud-bg-root-start) 0%, var(--hud-bg-root-end) 100%);
    background-attachment: fixed;
    color: var(--hud-text-primary);
    min-height: 100vh;
}

[data-theme="cyberpunk"] h1,
[data-theme="cyberpunk"] h2,
[data-theme="cyberpunk"] h3,
[data-theme="cyberpunk"] h4,
[data-theme="cyberpunk"] h5,
[data-theme="cyberpunk"] h6,
[data-theme="cyberpunk"] .navbar-brand {
    font-family: var(--hud-font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hud-text-primary);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.25);
}

/* Monospace HUD elements: timestamps, scores, deadlines, sub-labels */
[data-theme="cyberpunk"] .hud-mono,
[data-theme="cyberpunk"] .inning-score-input,
[data-theme="cyberpunk"] .rsvp-deadline-badge,
[data-theme="cyberpunk"] .event-timestamp,
[data-theme="cyberpunk"] .badge,
[data-theme="cyberpunk"] small.fw-bold,
[data-theme="cyberpunk"] #current-inning-title,
[data-theme="cyberpunk"] .card-num,
[data-theme="cyberpunk"] .card-pos,
[data-theme="cyberpunk"] .bench-num,
[data-theme="cyberpunk"] .bench-pos,
[data-theme="cyberpunk"] .jersey-badge,
[data-theme="cyberpunk"] .batting-number {
    font-family: var(--hud-font-mono) !important;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   3. Utility Classes & HUD Geometry (Chamfers, Brackets, Glows)
   ========================================================================== */

[data-theme="cyberpunk"] .neon-glow-cyan {
    color: var(--hud-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
    box-shadow: var(--hud-cyan-glow);
    border-color: var(--hud-cyan) !important;
}

[data-theme="cyberpunk"] .neon-glow-pink {
    color: var(--hud-pink) !important;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
    box-shadow: var(--hud-pink-glow);
    border-color: var(--hud-pink) !important;
}

/* Chamfered borders using polygon clip-path */
[data-theme="cyberpunk"] .hud-chamfer,
[data-theme="cyberpunk"] .btn-primary,
[data-theme="cyberpunk"] .btn-danger,
[data-theme="cyberpunk"] .btn-success,
[data-theme="cyberpunk"] .btn-warning,
[data-theme="cyberpunk"] .btn-info,
[data-theme="cyberpunk"] .participation-btn,
[data-theme="cyberpunk"] .badge {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    border-radius: 0 !important;
}

/* HUD Cards & Dashboard Event Items */
[data-theme="cyberpunk"] .card,
[data-theme="cyberpunk"] .hud-card,
[data-theme="cyberpunk"] .list-group-item.list-group-item-action {
    background-color: var(--hud-card-bg) !important;
    border: 1px solid var(--hud-border-color) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 243, 255, 0.05);
    color: var(--hud-text-primary);
    position: relative;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Apply backdrop-filter only to non-scrolling top-level cards for mobile scroll performance */
@media (min-width: 768px) {
    [data-theme="cyberpunk"] .card,
    [data-theme="cyberpunk"] .hud-card {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

[data-theme="cyberpunk"] .card:hover,
[data-theme="cyberpunk"] .hud-card:hover,
[data-theme="cyberpunk"] .list-group-item.list-group-item-action:hover {
    border-color: rgba(0, 243, 255, 0.65) !important;
    box-shadow: var(--hud-cyan-glow-strong), inset 0 0 15px rgba(0, 243, 255, 0.08);
}

/* Corner Brackets (.hud-bracket and automatic on cards) */
[data-theme="cyberpunk"] .hud-bracket,
[data-theme="cyberpunk"] .card,
[data-theme="cyberpunk"] .list-group-item.list-group-item-action {
    background-image:
        linear-gradient(to right, var(--hud-cyan) 2px, transparent 2px),
        linear-gradient(to bottom, var(--hud-cyan) 2px, transparent 2px),
        linear-gradient(to left, var(--hud-cyan) 2px, transparent 2px),
        linear-gradient(to top, var(--hud-cyan) 2px, transparent 2px);
    background-size: 10px 10px;
    background-position: top left, top left, bottom right, bottom right;
    background-repeat: no-repeat;
}

/* Event type indicators in Cyberpunk HUD */
[data-theme="cyberpunk"] .event-game {
    border-left: 4px solid var(--hud-pink) !important;
    box-shadow: -4px 0 12px rgba(255, 0, 85, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="cyberpunk"] .event-training {
    border-left: 4px solid var(--hud-cyan) !important;
    box-shadow: -4px 0 12px rgba(0, 243, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="cyberpunk"] .event-generic {
    border-left: 4px solid var(--hud-muted) !important;
}

[data-theme="cyberpunk"] .support-game {
    background-color: rgba(255, 183, 3, 0.12) !important;
    border-color: var(--hud-amber) !important;
}

/* ==========================================================================
   4. Navigation, Modals, Tables & Forms
   ========================================================================== */

[data-theme="cyberpunk"] .navbar {
    background: rgba(7, 11, 18, 0.92) !important;
    border-bottom: 1px solid var(--hud-border-color);
    box-shadow: 0 2px 16px rgba(0, 243, 255, 0.15);
}

[data-theme="cyberpunk"] .navbar .navbar-brand,
[data-theme="cyberpunk"] .navbar .nav-link,
[data-theme="cyberpunk"] .navbar .navbar-text {
    color: var(--hud-text-primary) !important;
}

[data-theme="cyberpunk"] .navbar .nav-link:hover,
[data-theme="cyberpunk"] .navbar .nav-link:focus {
    color: var(--hud-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}

[data-theme="cyberpunk"] .dropdown-menu {
    background-color: rgba(10, 17, 32, 0.96);
    border: 1px solid var(--hud-cyan);
    box-shadow: var(--hud-cyan-glow);
    border-radius: 0;
}

[data-theme="cyberpunk"] .dropdown-item {
    color: var(--hud-text-primary);
}

[data-theme="cyberpunk"] .dropdown-item:hover,
[data-theme="cyberpunk"] .dropdown-item:focus {
    background-color: rgba(0, 243, 255, 0.18);
    color: var(--hud-cyan);
}

[data-theme="cyberpunk"] .dropdown-header {
    color: var(--hud-cyan) !important;
    background-color: rgba(0, 243, 255, 0.08) !important;
    font-family: var(--hud-font-mono);
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .card-header,
[data-theme="cyberpunk"] .bg-light,
[data-theme="cyberpunk"] .bg-white {
    background-color: rgba(10, 18, 34, 0.88) !important;
    color: var(--hud-text-primary) !important;
    border-color: var(--hud-border-color) !important;
}

[data-theme="cyberpunk"] .text-muted,
[data-theme="cyberpunk"] .text-secondary {
    color: var(--hud-text-secondary) !important;
}

[data-theme="cyberpunk"] .text-dark {
    color: var(--hud-text-primary) !important;
}

[data-theme="cyberpunk"] .badge.bg-light,
[data-theme="cyberpunk"] .badge.text-dark {
    background-color: rgba(13, 25, 43, 0.9) !important;
    color: var(--hud-cyan) !important;
    border: 1px solid var(--hud-border-color) !important;
}

[data-theme="cyberpunk"] .footer {
    background-color: rgba(7, 11, 18, 0.95) !important;
    border-top: 1px solid var(--hud-border-color) !important;
}

[data-theme="cyberpunk"] .form-control,
[data-theme="cyberpunk"] .form-select {
    background-color: rgba(7, 13, 24, 0.9);
    border: 1px solid var(--hud-border-color);
    color: var(--hud-text-primary);
    border-radius: 0;
}

[data-theme="cyberpunk"] .form-control:focus,
[data-theme="cyberpunk"] .form-select:focus {
    background-color: rgba(10, 19, 36, 0.95);
    border-color: var(--hud-cyan);
    box-shadow: var(--hud-cyan-glow);
    color: #fff;
}

[data-theme="cyberpunk"] .modal-content {
    background-color: rgba(10, 17, 32, 0.96);
    border: 1px solid var(--hud-cyan);
    box-shadow: 0 0 28px rgba(0, 243, 255, 0.35);
    color: var(--hud-text-primary);
    border-radius: 0;
}

[data-theme="cyberpunk"] .list-group-item {
    background-color: rgba(13, 22, 38, 0.78);
    color: var(--hud-text-primary);
    border-color: var(--hud-grid-line);
}

[data-theme="cyberpunk"] .table {
    --bs-table-bg: rgba(13, 22, 38, 0.75);
    --bs-table-striped-bg: rgba(0, 243, 255, 0.05);
    --bs-table-hover-bg: rgba(0, 243, 255, 0.12);
    --bs-table-color: var(--hud-text-primary);
    --bs-table-striped-color: var(--hud-text-primary);
    --bs-table-hover-color: #ffffff;
    border-color: var(--hud-border-color);
}

/* ==========================================================================
   5. Attendance Status Indicators (RSVP) & Buttons
   ========================================================================== */

[data-theme="cyberpunk"] .btn-primary {
    background-color: rgba(0, 243, 255, 0.18);
    border: 1px solid var(--hud-cyan);
    color: var(--hud-cyan);
    font-family: var(--hud-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.25);
}

[data-theme="cyberpunk"] .btn-primary:hover {
    background-color: var(--hud-cyan);
    color: #05080f;
    box-shadow: var(--hud-cyan-glow);
}

/* Active RSVP Choices: Bright Neon Glow */
[data-theme="cyberpunk"] .participation-btn.btn-success,
[data-theme="cyberpunk"] .btn-success {
    background-color: rgba(0, 255, 136, 0.22) !important;
    border: 1px solid var(--hud-green) !important;
    color: var(--hud-green) !important;
    box-shadow: var(--hud-green-glow) !important;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
    font-family: var(--hud-font-mono);
    font-weight: 700;
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .participation-btn.btn-danger,
[data-theme="cyberpunk"] .btn-danger {
    background-color: rgba(255, 0, 85, 0.22) !important;
    border: 1px solid var(--hud-pink) !important;
    color: #ff4d88 !important;
    box-shadow: var(--hud-pink-glow) !important;
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.6);
    font-family: var(--hud-font-mono);
    font-weight: 700;
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .participation-btn.btn-warning,
[data-theme="cyberpunk"] .btn-warning {
    background-color: rgba(255, 183, 3, 0.22) !important;
    border: 1px solid var(--hud-amber) !important;
    color: var(--hud-amber) !important;
    box-shadow: var(--hud-amber-glow) !important;
    text-shadow: 0 0 6px rgba(255, 183, 3, 0.5);
    font-family: var(--hud-font-mono);
    font-weight: 700;
    text-transform: uppercase;
}

/* Unselected RSVP States: Outlined subtle HUD buttons */
[data-theme="cyberpunk"] .participation-btn.btn-outline-success,
[data-theme="cyberpunk"] .participation-btn.btn-outline-warning,
[data-theme="cyberpunk"] .participation-btn.btn-outline-danger {
    background-color: rgba(7, 11, 18, 0.6) !important;
    border: 1px solid var(--hud-border-color) !important;
    color: var(--hud-text-secondary) !important;
    box-shadow: none !important;
    font-family: var(--hud-font-mono);
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .participation-btn.btn-outline-success:hover {
    border-color: var(--hud-green) !important;
    color: var(--hud-green) !important;
    box-shadow: var(--hud-green-glow) !important;
}

[data-theme="cyberpunk"] .participation-btn.btn-outline-warning:hover {
    border-color: var(--hud-amber) !important;
    color: var(--hud-amber) !important;
    box-shadow: var(--hud-amber-glow) !important;
}

[data-theme="cyberpunk"] .participation-btn.btn-outline-danger:hover {
    border-color: var(--hud-pink) !important;
    color: var(--hud-pink) !important;
    box-shadow: var(--hud-pink-glow) !important;
}

[data-theme="cyberpunk"] .text-success {
    color: var(--hud-green) !important;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

[data-theme="cyberpunk"] .text-danger {
    color: #ff3377 !important;
    text-shadow: 0 0 6px rgba(255, 0, 85, 0.3);
}

[data-theme="cyberpunk"] .text-warning {
    color: var(--hud-amber) !important;
}

/* ==========================================================================
   6. Interactive Lineup & Baseball Diamond (Tactical Radar Scheme)
   ========================================================================== */

[data-theme="cyberpunk"] .diamond-svg {
    background: radial-gradient(circle at 50% 55%, #112236 0%, #070d17 100%);
    border: 1px solid rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 24px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.15) !important;
}

[data-theme="cyberpunk"] .diamond-svg .field-grass {
    fill: var(--hud-field-bg) !important;
    stroke: var(--hud-line-glow);
    stroke-width: 1.5;
}

[data-theme="cyberpunk"] .diamond-svg .field-infield {
    fill: var(--hud-infield-bg) !important;
    stroke: var(--hud-basepath-grid);
    stroke-width: 1;
    stroke-dasharray: 4 2;
}

[data-theme="cyberpunk"] .diamond-svg .field-basepaths {
    stroke: var(--hud-line-glow) !important;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.8));
}

[data-theme="cyberpunk"] .diamond-svg .field-mound {
    fill: var(--hud-mound-bg) !important;
    stroke: var(--hud-cyan) !important;
    stroke-width: 1.5;
}

[data-theme="cyberpunk"] .diamond-svg .field-base {
    fill: var(--hud-cyan) !important;
    filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.9));
}

/* Tactical Radar Rings & Trajectory Lines (Visible in Cyberpunk Theme) */
.hud-tactical-overlay {
    display: none;
    pointer-events: none;
}

[data-theme="cyberpunk"] .hud-tactical-overlay {
    display: block;
}

/* Player Tactical Tokens on Field & Dugout */
[data-theme="cyberpunk"] .player-field-card,
[data-theme="cyberpunk"] .bench-card,
[data-theme="cyberpunk"] .player-list-card {
    background-color: rgba(10, 19, 34, 0.90) !important;
    border: 1px solid var(--hud-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.25) !important;
    color: var(--hud-text-primary) !important;
    border-radius: 2px !important;
}

[data-theme="cyberpunk"] .player-field-card .card-num,
[data-theme="cyberpunk"] .player-list-card .jersey-badge {
    background-color: #06101e !important;
    color: var(--hud-cyan) !important;
    border: 1px solid var(--hud-cyan) !important;
    box-shadow: 0 0 6px rgba(0, 243, 255, 0.5);
}

[data-theme="cyberpunk"] .player-field-card .card-pos,
[data-theme="cyberpunk"] .bench-card .bench-pos {
    color: var(--hud-cyan) !important;
    font-weight: 600;
}

[data-theme="cyberpunk"] .empty-ring {
    border: 1.5px dashed var(--hud-cyan) !important;
    background-color: rgba(0, 243, 255, 0.08) !important;
    color: var(--hud-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.25);
    font-family: var(--hud-font-mono);
}

[data-theme="cyberpunk"] .player-token-portrait {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hud-cyan);
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

/* ==========================================================================
   7. Carpooling Map Widget (Dark Tactical Radar & Neon Route)
   ========================================================================== */

.carpool-map-container {
    height: 300px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

[data-theme="cyberpunk"] .carpool-map-container {
    border: 1px solid var(--hud-cyan);
    box-shadow: var(--hud-cyan-glow);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.hud-waypoint-pin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #00f3ff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 12px #00f3ff, 0 0 24px #00f3ff;
    animation: hud-pin-pulse 1.8s infinite ease-in-out;
}

.hud-waypoint-pin.pin-dest {
    background-color: #ff0055;
    box-shadow: 0 0 12px #ff0055, 0 0 24px #ff0055;
}

@keyframes hud-pin-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.75;
    }
}

/* ==========================================================================
   8. Diamond Awards & Level Badges
   ========================================================================== */

[data-theme="cyberpunk"] .diamond-status-display,
[data-theme="cyberpunk"] .hud-diamond-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.18), rgba(255, 0, 85, 0.18));
    border: 1px solid transparent;
    border-image: linear-gradient(135deg, #00f3ff, #ff0055) 1;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.35), 0 0 12px rgba(255, 0, 85, 0.25);
    animation: hud-level-unlock 3s infinite ease-in-out;
}

@keyframes hud-level-unlock {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.35), 0 0 10px rgba(255, 0, 85, 0.2);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 18px rgba(0, 243, 255, 0.65), 0 0 22px rgba(255, 0, 85, 0.45);
    }
}

/* ==========================================================================
   9. Futuristic Video-Matched Dashboard Bento, Action Tiles & Bottom Dock
      (Ref: docs/gemini_generated_video_4b7ab1ab.mp4 0:00 - 0:09)
   ========================================================================== */

/* Hide portrait tokens in default theme so default lineup cards stay 100% original */
.player-token-portrait {
    display: none !important;
}

[data-theme="cyberpunk"] .player-token-portrait {
    display: inline-block !important;
}

[data-theme="cyberpunk"] .player-field-card .player-token-portrait {
    display: block !important;
}

[data-theme="cyberpunk"] .hud-command-deck,
[data-theme="cyberpunk"] .hud-only-subtitle,
[data-theme="cyberpunk"] .hud-only-icon,
[data-theme="cyberpunk"] .hud-owner-tag {
    display: inline-block !important;
}

[data-theme="cyberpunk"] div.hud-command-deck,
[data-theme="cyberpunk"] .hud-only-map-card {
    display: block !important;
}

/* Split Own Events and Children Events into 2 columns ONLY in Cyberpunk HUD mode */
@media (min-width: 1200px) {
    [data-theme="cyberpunk"] #hud-events-split-container.hud-has-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    [data-theme="cyberpunk"] .hud-hide-on-split {
        display: none !important;
    }
}

[data-theme="cyberpunk"] .hud-event-date-box {
    display: flex !important;
    min-width: 64px;
    padding: 8px 6px;
    background: linear-gradient(160deg, rgba(0, 243, 255, 0.14), rgba(255, 0, 85, 0.14));
    border: 1px solid rgba(0, 243, 255, 0.45);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.2);
}

[data-theme="cyberpunk"] .hud-date-day {
    font-family: var(--hud-font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.65);
}

[data-theme="cyberpunk"] .hud-date-month {
    font-family: var(--hud-font-mono);
    font-size: 0.7rem;
    color: var(--hud-cyan);
    letter-spacing: 0.08em;
    margin-top: 2px;
}

[data-theme="cyberpunk"] .hud-date-time {
    font-family: var(--hud-font-mono);
    font-size: 0.68rem;
    color: #ff66a3;
    margin-top: 2px;
}

[data-theme="cyberpunk"] .hud-owner-tag {
    font-family: var(--hud-font-mono);
    font-size: 0.72rem;
    padding: 2px 7px;
    background: rgba(255, 0, 85, 0.22);
    border: 1px solid var(--hud-pink);
    color: #ff80b3;
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.35);
    vertical-align: middle;
}

/* HUD Top Pill Bar (Ref: Video 0:08 WIDGETS | EIGENE | KINDER) */
[data-theme="cyberpunk"] .hud-tab-bar {
    padding: 6px;
    background: rgba(8, 14, 26, 0.85);
    border: 1px solid rgba(0, 243, 255, 0.28);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

[data-theme="cyberpunk"] .hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-family: var(--hud-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hud-text-secondary);
    background: rgba(13, 22, 38, 0.75);
    border: 1px solid rgba(0, 243, 255, 0.25);
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    transition: all 0.2s ease;
}

[data-theme="cyberpunk"] .hud-pill.active,
[data-theme="cyberpunk"] .hud-pill:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(255, 0, 85, 0.35), rgba(0, 243, 255, 0.25));
    border-color: var(--hud-pink);
    box-shadow: var(--hud-pink-glow);
}

[data-theme="cyberpunk"] .hud-pill-child {
    border-color: rgba(0, 243, 255, 0.45);
    color: var(--hud-cyan);
}

[data-theme="cyberpunk"] .hud-pill-child:hover {
    border-color: var(--hud-cyan);
    box-shadow: var(--hud-cyan-glow);
}

[data-theme="cyberpunk"] .hud-pill-badge {
    background: var(--hud-pink);
    color: #fff;
    font-family: var(--hud-font-mono);
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 2px;
    box-shadow: 0 0 6px var(--hud-pink);
}

/* Dual Top Bento Cards (Ref: Video 0:08 Date Box & Score Matrix) */
[data-theme="cyberpunk"] .hud-bento-card {
    background: rgba(11, 19, 34, 0.88);
    border: 1px solid rgba(0, 243, 255, 0.4);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
}

[data-theme="cyberpunk"] .hud-bento-pink {
    border-color: rgba(255, 0, 85, 0.65);
    background: linear-gradient(135deg, rgba(35, 10, 32, 0.9) 0%, rgba(12, 20, 36, 0.9) 100%);
    box-shadow: 0 0 18px rgba(255, 0, 85, 0.22), inset 0 0 16px rgba(255, 0, 85, 0.08);
}

[data-theme="cyberpunk"] .hud-bento-cyan {
    border-color: rgba(0, 243, 255, 0.55);
    background: linear-gradient(135deg, rgba(8, 24, 42, 0.9) 0%, rgba(11, 18, 32, 0.92) 100%);
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.2), inset 0 0 16px rgba(0, 243, 255, 0.06);
}

[data-theme="cyberpunk"] .hud-micro-label {
    font-family: var(--hud-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--hud-text-secondary);
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .hud-big-num {
    font-family: var(--hud-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 14px rgba(255, 0, 85, 0.75), 0 0 24px rgba(0, 243, 255, 0.4);
}

[data-theme="cyberpunk"] .hud-month-label {
    font-family: var(--hud-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hud-cyan);
}

[data-theme="cyberpunk"] .hud-time-label {
    font-family: var(--hud-font-mono);
    font-size: 0.76rem;
    color: var(--hud-text-primary);
}

[data-theme="cyberpunk"] .hud-event-sub {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ff80b3;
}

[data-theme="cyberpunk"] .hud-crest-shield {
    width: 48px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--hud-cyan);
    background: rgba(0, 243, 255, 0.12);
    border: 1.5px solid var(--hud-cyan);
    clip-path: polygon(50% 0%, 100% 20%, 100% 70%, 50% 100%, 0% 70%, 0% 20%);
    box-shadow: var(--hud-cyan-glow);
}

/* Telemetry Score Matrix Table */
[data-theme="cyberpunk"] .hud-score-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-theme="cyberpunk"] .hud-score-row {
    display: grid;
    grid-template-columns: 56px 1fr 1fr 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(5, 10, 20, 0.65);
    border-left: 2px solid var(--hud-cyan);
    font-family: var(--hud-font-mono);
    font-size: 0.78rem;
}

[data-theme="cyberpunk"] .hud-score-team {
    font-weight: 700;
    color: #ffffff;
}

[data-theme="cyberpunk"] .hud-score-cell {
    color: var(--hud-text-secondary);
}

[data-theme="cyberpunk"] .hud-score-badge {
    padding: 1px 7px;
    font-size: 0.68rem;
    background: rgba(0, 243, 255, 0.18);
    border: 1px solid var(--hud-cyan);
    color: var(--hud-cyan);
}

/* 2x2 Neon Quick-Action Tiles (Ref: Video 0:02) */
[data-theme="cyberpunk"] .hud-action-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 112px;
    padding: 12px 14px;
    background: rgba(11, 19, 35, 0.86);
    border: 1.5px solid rgba(0, 243, 255, 0.4);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    transition: all 0.2s ease;
    position: relative;
}

[data-theme="cyberpunk"] .hud-tile-pink {
    border-color: rgba(255, 0, 85, 0.7);
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.25), inset 0 0 14px rgba(255, 0, 85, 0.1);
}

[data-theme="cyberpunk"] .hud-tile-cyan {
    border-color: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 14px rgba(0, 243, 255, 0.25), inset 0 0 14px rgba(0, 243, 255, 0.1);
}

[data-theme="cyberpunk"] .hud-tile-amber {
    border-color: rgba(255, 183, 3, 0.7);
    box-shadow: 0 0 14px rgba(255, 183, 3, 0.22), inset 0 0 14px rgba(255, 183, 3, 0.08);
}

[data-theme="cyberpunk"] .hud-action-tile:hover,
[data-theme="cyberpunk"] .hud-action-tile.active {
    transform: translateY(-2px);
}

[data-theme="cyberpunk"] .hud-tile-pink:hover,
[data-theme="cyberpunk"] .hud-tile-pink.active {
    border-color: #ff2a75;
    box-shadow: 0 0 22px rgba(255, 0, 85, 0.55), inset 0 0 18px rgba(255, 0, 85, 0.2);
}

[data-theme="cyberpunk"] .hud-tile-cyan:hover,
[data-theme="cyberpunk"] .hud-tile-cyan.active {
    border-color: var(--hud-cyan);
    box-shadow: 0 0 22px rgba(0, 243, 255, 0.55), inset 0 0 18px rgba(0, 243, 255, 0.2);
}

[data-theme="cyberpunk"] .hud-tile-amber:hover,
[data-theme="cyberpunk"] .hud-tile-amber.active {
    border-color: var(--hud-amber);
    box-shadow: 0 0 22px rgba(255, 183, 3, 0.55), inset 0 0 18px rgba(255, 183, 3, 0.2);
}

[data-theme="cyberpunk"] .hud-tile-icon {
    color: var(--hud-cyan);
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
}

[data-theme="cyberpunk"] .hud-tile-pink .hud-tile-icon {
    color: #ff4d88;
    filter: drop-shadow(0 0 8px rgba(255, 0, 85, 0.65));
}

[data-theme="cyberpunk"] .hud-tile-amber .hud-tile-icon {
    color: var(--hud-amber);
    filter: drop-shadow(0 0 8px rgba(255, 183, 3, 0.65));
}

[data-theme="cyberpunk"] .hud-tile-stats {
    display: flex;
    justify-content: space-between;
    font-family: var(--hud-font-mono);
    font-size: 0.72rem;
    color: var(--hud-text-secondary);
    margin-top: 6px;
}

[data-theme="cyberpunk"] .hud-tile-title {
    font-family: var(--hud-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Center Holographic Shield Card (Ref: Video 0:00 & 0:09) */
[data-theme="cyberpunk"] .hud-hero-shield-card {
    background: radial-gradient(circle at 50% 45%, rgba(0, 243, 255, 0.16) 0%, rgba(255, 0, 85, 0.12) 45%, rgba(9, 15, 28, 0.92) 100%);
    border: 1.5px solid rgba(0, 243, 255, 0.5);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 0 0 24px rgba(0, 243, 255, 0.22), inset 0 0 24px rgba(255, 0, 85, 0.12);
}

[data-theme="cyberpunk"] .hud-shield-emblem svg {
    filter: drop-shadow(0 0 14px rgba(0, 243, 255, 0.55)) drop-shadow(0 0 20px rgba(255, 0, 85, 0.35));
    animation: hud-shield-float 4s ease-in-out infinite;
}

@keyframes hud-shield-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

[data-theme="cyberpunk"] .hud-shield-banner {
    font-family: var(--hud-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    padding: 3px 16px;
    background: linear-gradient(90deg, rgba(255, 0, 85, 0.75), rgba(123, 44, 191, 0.75), rgba(0, 243, 255, 0.75));
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

[data-theme="cyberpunk"] .hud-award-ribbon {
    font-family: var(--hud-font-mono);
    font-size: 0.74rem;
    color: var(--hud-amber);
    padding: 3px 12px;
    border: 1px solid rgba(255, 183, 3, 0.6);
    background: rgba(255, 183, 3, 0.12);
    box-shadow: 0 0 12px rgba(255, 183, 3, 0.25);
}

/* Events Panels (Own vs. Children Split View) */
[data-theme="cyberpunk"] .hud-events-panel {
    padding: 14px;
    background: rgba(9, 16, 30, 0.72);
    border: 1px solid rgba(0, 243, 255, 0.28);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

[data-theme="cyberpunk"] .hud-child-panel {
    border-color: rgba(255, 0, 85, 0.45);
    box-shadow: inset 0 0 16px rgba(255, 0, 85, 0.06);
}

[data-theme="cyberpunk"] .hud-section-summary {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.22);
}

/* Carpool Telemetry Bar (Ref: Video 0:06) */
[data-theme="cyberpunk"] .hud-carpool-telemetry {
    display: flex !important;
}

[data-theme="cyberpunk"] .hud-telemetry-val {
    font-family: var(--hud-font-mono);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Bottom Cyberpunk HUD Navigation Dock (Ref: Video 0:08 & 0:09) */
[data-theme="cyberpunk"] body {
    padding-bottom: 74px;
}

[data-theme="cyberpunk"] .hud-bottom-dock {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: rgba(6, 10, 20, 0.94);
    border-top: 1px solid rgba(0, 243, 255, 0.45);
    box-shadow: 0 -4px 20px rgba(0, 243, 255, 0.2);
    z-index: 1030;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

[data-theme="cyberpunk"] .hud-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--hud-text-secondary);
    font-family: var(--hud-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

[data-theme="cyberpunk"] .hud-dock-item i {
    font-size: 1.15rem;
    margin-bottom: 2px;
}

[data-theme="cyberpunk"] .hud-dock-item.active,
[data-theme="cyberpunk"] .hud-dock-item:hover {
    color: var(--hud-cyan);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.7);
}

[data-theme="cyberpunk"] .hud-dock-center {
    position: relative;
    top: -14px;
    text-decoration: none;
}

[data-theme="cyberpunk"] .hud-dock-orb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #00f3ff, #ff0055);
    border: 2px solid #ffffff;
    box-shadow: 0 0 16px rgba(0, 243, 255, 0.75), 0 0 24px rgba(255, 0, 85, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.35rem;
}

/* ==========================================================================
   10. High-Octane Interactive Swipe-Deck, Tactical Loader, 3D Field & Award Burst
       (Ref: Video 0:00 Boot, 0:03-0:05 3D Field, 0:07 Award Burst, 0:08 Swipe)
   ========================================================================== */

/* Background Particle Grid Canvas (only active in Cyberpunk theme) */
[data-theme="cyberpunk"] #hud-particle-canvas {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

[data-theme="cyberpunk"] main,
[data-theme="cyberpunk"] nav.navbar {
    position: relative;
    z-index: 2;
}

/* Hide redundant default-theme headers/filters inside Cyberpunk Swipe Mode */
[data-theme="cyberpunk"] .hud-hide-in-cyberpunk,
[data-theme="cyberpunk"] .hud-default-filter-bar {
    display: none !important;
}

/* Live Telemetry Strip ("Sinnloser geiler Spielkram" - Video top telemetry bar) */
[data-theme="cyberpunk"] .hud-telemetry-strip {
    padding: 5px 12px;
    background: rgba(5, 11, 22, 0.85);
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-left: 3px solid var(--hud-cyan);
    font-family: var(--hud-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--hud-text-secondary);
}

[data-theme="cyberpunk"] .hud-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hud-green);
    box-shadow: 0 0 8px var(--hud-green);
    animation: hud-dot-blink 1.4s infinite ease-in-out;
}

@keyframes hud-dot-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

/* Horizontal Swipe-Deck (Slide-Grid Center Architecture - Video 0:01 - 0:09) */
[data-theme="cyberpunk"] #hud-swipe-deck {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1.5rem;
    padding-bottom: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[data-theme="cyberpunk"] #hud-swipe-deck::-webkit-scrollbar {
    display: none;
}

[data-theme="cyberpunk"] #hud-swipe-deck > .hud-swipe-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optional Desktop Split-View Override when user clicks "SPLIT / SWIPE" button */
@media (min-width: 992px) {
    [data-theme="cyberpunk"] #hud-swipe-deck.hud-mode-split {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
        align-items: start;
    }
    [data-theme="cyberpunk"] #hud-swipe-deck.hud-mode-split > .hud-swipe-slide {
        width: auto;
        max-width: none;
    }
}

/* Pagination Dots for Swipe Deck */
[data-theme="cyberpunk"] .hud-dot {
    width: 22px;
    height: 5px;
    background: rgba(0, 243, 255, 0.22);
    border: 1px solid rgba(0, 243, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}

[data-theme="cyberpunk"] .hud-dot.active {
    width: 42px;
    background: var(--hud-pink);
    border-color: #ff66a3;
    box-shadow: var(--hud-pink-glow);
}

/* Rotating Radar Rings behind SGC Shield */
[data-theme="cyberpunk"] .hud-radar-rings {
    transform-origin: 100px 105px;
    animation: hud-spin-slow 18s linear infinite;
}

@keyframes hud-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Tactical HUD Boot / Action Scanner Overlay (Replaces boring spinners!)
   (Ref: Video 0:00 - 0:01)
   ========================================================================== */
.hud-tactical-loader-overlay,
.hud-award-burst-overlay {
    display: none !important;
}

[data-theme="cyberpunk"] .hud-tactical-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(circle at 50% 50%, rgba(12, 24, 46, 0.94) 0%, rgba(4, 7, 15, 0.98) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

[data-theme="cyberpunk"] .hud-tactical-loader-overlay.active,
[data-theme="cyberpunk"] .hud-tactical-loader-overlay.hud-loader-visible {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="cyberpunk"] .hud-loader-frame,
[data-theme="cyberpunk"] .hud-loader-core {
    position: relative;
    width: min(92vw, 440px);
    padding: 32px 24px;
    background: rgba(9, 16, 32, 0.92);
    border: 1.5px solid var(--hud-cyan);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.35), inset 0 0 25px rgba(255, 0, 85, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-theme="cyberpunk"] .hud-loader-ring {
    position: absolute;
    top: 22px;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    pointer-events: none;
}

[data-theme="cyberpunk"] .hud-ring-outer {
    border: 2px dashed rgba(0, 243, 255, 0.55);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.25);
    animation: hud-spin-slow 4s linear infinite;
}

[data-theme="cyberpunk"] .hud-ring-inner {
    top: 32px;
    width: 126px;
    height: 126px;
    border: 2px solid transparent;
    border-top-color: var(--hud-pink);
    border-bottom-color: var(--hud-cyan);
    animation: hud-spin-reverse 2.4s linear infinite;
}

[data-theme="cyberpunk"] .hud-loader-shield {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 14px rgba(0, 243, 255, 0.6));
}

@keyframes hud-spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

[data-theme="cyberpunk"] .hud-loader-banner,
[data-theme="cyberpunk"] .hud-loader-title {
    font-family: var(--hud-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #ffffff;
    padding: 3px 16px;
    background: linear-gradient(90deg, rgba(255, 0, 85, 0.75), rgba(123, 44, 191, 0.75), rgba(0, 243, 255, 0.75));
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    text-shadow: 0 0 10px var(--hud-cyan);
}

[data-theme="cyberpunk"] .hud-loader-status-text,
[data-theme="cyberpunk"] .hud-loader-pct {
    font-family: var(--hud-font-mono);
    font-size: 0.8rem;
    color: var(--hud-cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="cyberpunk"] .hud-loader-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(0, 243, 255, 0.12);
    border: 1px solid rgba(0, 243, 255, 0.45);
    padding: 1px;
}

[data-theme="cyberpunk"] .hud-loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--hud-cyan), var(--hud-pink));
    box-shadow: 0 0 12px var(--hud-cyan);
    transition: width 0.08s linear;
}

[data-theme="cyberpunk"] .hud-loader-stream,
[data-theme="cyberpunk"] .hud-loader-telemetry {
    font-family: var(--hud-font-mono);
    font-size: 0.75rem;
    color: var(--hud-cyan);
    letter-spacing: 0.06em;
}

[data-theme="cyberpunk"] .hud-loader-hex {
    font-family: var(--hud-font-mono);
    font-size: 0.68rem;
    color: #ff66a3;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   3D Level / Diamond Award Burst Overlay (Ref: Video 0:07 Golden Wings + Gem)
   ========================================================================== */
[data-theme="cyberpunk"] .hud-award-burst-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: radial-gradient(circle at 50% 45%, rgba(45, 12, 68, 0.92) 0%, rgba(5, 8, 18, 0.97) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

[data-theme="cyberpunk"] .hud-award-burst-overlay.active,
[data-theme="cyberpunk"] .hud-award-burst-overlay.hud-award-visible {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="cyberpunk"] .hud-burst-rays {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 15deg,
        rgba(0, 243, 255, 0.18) 15deg 30deg,
        transparent 30deg 45deg,
        rgba(255, 0, 85, 0.2) 45deg 60deg,
        transparent 60deg 75deg,
        rgba(255, 183, 3, 0.2) 75deg 90deg,
        transparent 90deg 120deg,
        rgba(0, 243, 255, 0.18) 120deg 150deg,
        transparent 150deg 180deg,
        rgba(255, 0, 85, 0.2) 180deg 210deg,
        transparent 210deg 240deg,
        rgba(255, 183, 3, 0.2) 240deg 270deg,
        transparent 270deg 300deg,
        rgba(0, 243, 255, 0.18) 300deg 330deg,
        transparent 330deg 360deg
    );
    filter: blur(8px);
    animation: hud-spin-slow 12s linear infinite;
    pointer-events: none;
}

[data-theme="cyberpunk"] .hud-burst-card {
    position: relative;
    z-index: 2;
    width: min(92vw, 420px);
    padding: 28px 22px;
    background: rgba(12, 18, 36, 0.92);
    border: 2px solid var(--hud-amber);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    box-shadow: 0 0 40px rgba(255, 183, 3, 0.45), 0 0 60px rgba(255, 0, 85, 0.35);
    transform: scale(0.75);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-theme="cyberpunk"] .hud-award-burst-overlay.active .hud-burst-card,
[data-theme="cyberpunk"] .hud-award-burst-overlay.hud-award-visible .hud-burst-card {
    transform: scale(1);
}

[data-theme="cyberpunk"] .hud-burst-wings {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 18px rgba(255, 183, 3, 0.65)) drop-shadow(0 0 28px rgba(157, 78, 221, 0.6));
    animation: hud-shield-float 3s ease-in-out infinite;
}

[data-theme="cyberpunk"] .hud-burst-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[data-theme="cyberpunk"] .hud-burst-level-title {
    font-family: var(--hud-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--hud-cyan);
}

[data-theme="cyberpunk"] .hud-burst-level-num {
    font-family: var(--hud-font-display);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 14px var(--hud-amber), 0 0 24px var(--hud-pink);
}

[data-theme="cyberpunk"] .hud-burst-ribbon {
    margin-top: 4px;
    padding: 2px 14px;
    font-family: var(--hud-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #111;
    background: linear-gradient(90deg, #fff3b0, #ffb703, #fb8500);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

[data-theme="cyberpunk"] .hud-burst-sub {
    font-family: var(--hud-font-mono);
    font-size: 0.85rem;
    color: var(--hud-cyan);
    letter-spacing: 0.08em;
}

/* ==========================================================================
   3D Hologram Perspective Baseball Field in Lineup Editor (Ref: Video 0:03-0:05)
   ========================================================================== */
[data-theme="cyberpunk"] .field-container {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
}

[data-theme="cyberpunk"] .field-container.hud-field-3d {
    transform: perspective(880px) rotateX(28deg) scale(0.96);
    filter: drop-shadow(0 24px 28px rgba(0, 243, 255, 0.22));
}

/* Counter-rotate player tokens on the 3D field so they stand upright like hologram billboards */
[data-theme="cyberpunk"] .field-container.hud-field-3d .position-spot {
    transform: translate(-50%, -65%) rotateX(-24deg) scale(1.04);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.85));
}

[data-theme="cyberpunk"] .field-container.hud-field-3d .position-spot:hover {
    transform: translate(-50%, -72%) rotateX(-24deg) scale(1.14);
    z-index: 30;
}

[data-theme="cyberpunk"] .hud-gauge-needle {
    transform-origin: 200px 368px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   11. Mobile & Smartphone Proportions (Pixel 10 / 360px - 430px Viewports)
       + Dark-Outline Button Fix & Compact-Mode Title Visibility
       Ref: docs/handy2.png & docs/gemini_generated_video_4b7ab1ab.mp4
   ========================================================================== */

/* Fix .btn-outline-dark ("Saisons verwalten") being dark-on-dark in Cyberpunk mode */
[data-theme="cyberpunk"] .btn-outline-dark {
    background: rgba(11, 22, 40, 0.88) !important;
    border: 1px solid rgba(0, 243, 255, 0.55) !important;
    color: var(--hud-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.18);
    font-family: var(--hud-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="cyberpunk"] .btn-outline-dark:hover {
    background: rgba(0, 243, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: var(--hud-cyan-glow);
}

/* Hide redundant Absence Card header in Cyberpunk mode (since .hud-tab-bar has the toggle button) */
[data-theme="cyberpunk"] .crisp-absence-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0.5rem !important;
}

[data-theme="cyberpunk"] .crisp-absence-card > .card-header {
    display: none !important;
}

[data-theme="cyberpunk"] .crisp-absence-card .collapse.show .card-body {
    background: rgba(9, 17, 32, 0.94);
    border: 1px solid var(--hud-cyan);
    box-shadow: var(--hud-cyan-glow);
    margin-bottom: 1rem;
}

/* Keep HUD Sector Pill Bar on a single horizontal swipeable strip */
[data-theme="cyberpunk"] .hud-tab-bar > .d-flex {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px !important;
}

[data-theme="cyberpunk"] .hud-tab-bar > .d-flex::-webkit-scrollbar {
    display: none;
}

[data-theme="cyberpunk"] .hud-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Ensure Compact Mode Event Rows show full title instead of "..." */
/* Compact Mode & Expanded Event Card Styling in Cyberpunk Theme */
[data-theme="cyberpunk"] .collapse .crisp-area-header {
    display: none !important;
}

[data-theme="cyberpunk"] .crisp-rsvp-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
}

[data-theme="cyberpunk"] .crisp-rsvp-buttons .participation-btn {
    min-width: 0;
    width: 100%;
}

[data-theme="cyberpunk"] .crisp-compact-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    white-space: normal !important;
    overflow: visible !important;
}

[data-theme="cyberpunk"] .crisp-compact-time {
    font-family: var(--hud-font-mono);
    color: var(--hud-cyan);
    font-size: 0.85rem;
}

[data-theme="cyberpunk"] .crisp-compact-title {
    flex: 1 1 100%;
    font-family: var(--hud-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.35);
}

@media (max-width: 767.98px) {
    /* 1. Single-row Navbar: Logo + SLIDE GRID CENTER + Harper LED + Hamburger on right */
    [data-theme="cyberpunk"] nav.navbar {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    [data-theme="cyberpunk"] nav.navbar > .container-fluid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    [data-theme="cyberpunk"] .navbar-brand {
        font-size: 1rem !important;
        letter-spacing: 0.03em !important;
        margin-right: 2px;
    }

    [data-theme="cyberpunk"] .navbar-brand img {
        width: 24px;
        height: 24px;
    }

    [data-theme="cyberpunk"] .navbar-toggler {
        margin-left: auto;
        padding: 0.22rem 0.45rem;
        font-size: 0.9rem;
        border-color: rgba(0, 243, 255, 0.45) !important;
    }

    [data-theme="cyberpunk"] .navbar-collapse {
        flex-basis: 100%;
        margin-top: 0.5rem;
    }

    [data-theme="cyberpunk"] body > .container.mt-4 {
        margin-top: 0.45rem !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 2. Compact Top Title + Symmetrical 2-Button HUD Bar (100% inside screen, zero clipping!) */
    [data-theme="cyberpunk"] .crisp-top-actionbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 5px;
        margin-bottom: 0.45rem !important;
        max-width: 100%;
        overflow: hidden;
    }

    [data-theme="cyberpunk"] .crisp-top-actionbar > div:first-child {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
    }

    [data-theme="cyberpunk"] .crisp-top-actionbar h2 {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    [data-theme="cyberpunk"] .crisp-top-actionbar .hud-only-subtitle {
        font-size: 0.52rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        color: var(--hud-cyan) !important;
        opacity: 0.85;
    }

    /* Hide dev email viewer button (.btn-warning) on mobile so the 2 coach buttons fit 50% / 50% */
    [data-theme="cyberpunk"] .crisp-top-btn-group .btn-warning,
    [data-theme="cyberpunk"] .crisp-top-btn-group a[href*="dev"] {
        display: none !important;
    }

    [data-theme="cyberpunk"] .crisp-top-btn-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }

    [data-theme="cyberpunk"] .crisp-top-btn-group .btn {
        min-width: 0 !important;
        width: 100% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--hud-font-display) !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        padding: 6px 4px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    /* 3. Single-Row Sector Pill Bar (WIDGETS | EIGENE TERMINE | KIND | ABWESENHEITEN) - 0% Cut-off */
    [data-theme="cyberpunk"] .hud-command-deck.mb-3 {
        margin-bottom: 0.4rem !important;
        max-width: 100%;
    }

    [data-theme="cyberpunk"] .hud-tab-bar {
        padding: 4px;
        max-width: 100%;
        overflow: hidden;
    }

    [data-theme="cyberpunk"] .hud-tab-bar > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 3px !important;
        width: 100%;
        min-width: 0;
    }

    [data-theme="cyberpunk"] .hud-tab-bar > div > .ms-auto {
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    /* Desktop Split-View toggle is irrelevant on 380px screens */
    [data-theme="cyberpunk"] #hud-toggle-split-mode {
        display: none !important;
    }

    /* Hide team name in parens and decorative icons inside text pills so all tabs fit 100% */
    [data-theme="cyberpunk"] .hud-pill-child small,
    [data-theme="cyberpunk"] .hud-tab-bar a.hud-pill > i {
        display: none !important;
    }

    [data-theme="cyberpunk"] .hud-pill {
        flex: 1 1 auto;
        justify-content: center;
        padding: 4px 5px !important;
        font-size: 0.61rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap;
        min-width: 0;
    }

    [data-theme="cyberpunk"] .hud-pill-badge {
        font-size: 0.58rem;
        padding: 0 4px;
    }

    /* Single-Line Swipe Hint + Compact Pagination Dots */
    [data-theme="cyberpunk"] .hud-swipe-hint-bar {
        margin-top: 4px !important;
    }

    [data-theme="cyberpunk"] .hud-swipe-hint-bar .hud-micro-label {
        font-size: 0.58rem;
        letter-spacing: 0.05em;
    }

    [data-theme="cyberpunk"] .hud-dot {
        width: 14px;
        height: 4px;
    }

    [data-theme="cyberpunk"] .hud-dot.active {
        width: 26px;
    }

    /* 4. Compact Bento Cards & 2x2 Neon Action Tiles on Smartphone (Ref: docs/hady7.png) */
    [data-theme="cyberpunk"] #slide-widgets > .row.g-3.mb-3 {
        --bs-gutter-y: 0.45rem;
        margin-bottom: 0.45rem !important;
    }

    [data-theme="cyberpunk"] #slide-widgets > .row.g-3.align-items-stretch {
        --bs-gutter-y: 0.45rem;
    }

    [data-theme="cyberpunk"] .hud-bento-card {
        padding: 8px 10px !important;
    }

    [data-theme="cyberpunk"] .hud-big-num {
        font-size: 1.65rem;
    }

    [data-theme="cyberpunk"] .hud-month-label {
        font-size: 0.78rem;
    }

    [data-theme="cyberpunk"] .hud-time-label {
        font-size: 0.7rem;
    }

    [data-theme="cyberpunk"] .hud-event-sub {
        font-size: 0.76rem;
        margin-top: 2px !important;
    }

    [data-theme="cyberpunk"] .hud-crest-shield {
        width: 36px;
        height: 40px;
        font-size: 1.05rem;
    }

    /* Keep Telemetry Header on 1 single line without wrapping */
    [data-theme="cyberpunk"] .hud-bento-cyan > .d-flex:first-child {
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 4px !important;
        padding-bottom: 3px !important;
    }

    [data-theme="cyberpunk"] .hud-bento-cyan > .d-flex:first-child .hud-micro-label {
        font-size: 0.58rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-theme="cyberpunk"] .hud-bento-cyan > .d-flex:first-child .hud-mono {
        font-size: 0.62rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Fix Score Row columns so 'Testteam' and '1 OPEN' never collide */
    [data-theme="cyberpunk"] .hud-score-table {
        gap: 4px;
    }

    [data-theme="cyberpunk"] .hud-score-row {
        grid-template-columns: 40px 36px minmax(0, 1fr) 52px auto;
        gap: 6px;
        padding: 3px 6px;
        font-size: 0.68rem;
    }

    [data-theme="cyberpunk"] .hud-score-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-theme="cyberpunk"] .hud-score-badge {
        padding: 1px 5px;
        font-size: 0.62rem;
        white-space: nowrap;
    }

    /* 2x2 Neon Quick-Action Tiles */
    [data-theme="cyberpunk"] .hud-action-tile {
        min-height: 76px;
        padding: 7px 9px;
    }

    [data-theme="cyberpunk"] .hud-tile-icon svg {
        width: 38px;
        height: 24px;
    }

    [data-theme="cyberpunk"] .hud-tile-stats {
        font-size: 0.66rem;
        margin-top: 3px;
    }

    [data-theme="cyberpunk"] .hud-tile-title {
        font-size: 0.72rem;
        line-height: 1.15;
    }

    [data-theme="cyberpunk"] .hud-hero-shield-card {
        padding: 8px 10px !important;
    }

    [data-theme="cyberpunk"] .hud-shield-emblem svg {
        width: 56px;
        height: 60px;
    }

    [data-theme="cyberpunk"] .hud-shield-banner {
        font-size: 0.82rem;
    }

    /* 5. Event Cards on Slide 1 & Slide 2 (Buttons & Roster Columns inside cards) */
    [data-theme="cyberpunk"] .hud-events-panel {
        padding: 10px;
        max-width: 100%;
        overflow: hidden;
    }

    [data-theme="cyberpunk"] .hud-section-summary {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    [data-theme="cyberpunk"] .hud-section-summary h4 {
        font-size: 0.95rem;
        margin-bottom: 0;
        display: inline;
    }

    [data-theme="cyberpunk"] .hud-events-panel .btn-outline-primary {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
        white-space: nowrap;
    }

    [data-theme="cyberpunk"] .hud-events-panel .hud-only-subtitle {
        font-size: 0.58rem;
        text-align: right;
        line-height: 1.15;
    }

    [data-theme="cyberpunk"] .crisp-roster-columns,
    [data-theme="cyberpunk"] .crisp-coach-columns {
        column-count: 2 !important;
        font-size: 0.76rem;
    }

    [data-theme="cyberpunk"] .crisp-rsvp-buttons .participation-btn {
        font-size: 0.74rem !important;
        padding: 5px 3px !important;
    }

    [data-theme="cyberpunk"] .crisp-coach-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100%;
        min-width: 0;
    }

    [data-theme="cyberpunk"] .crisp-coach-actions .btn {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 36px;
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
        padding: 4px 3px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 3px;
    }

    /* 6. Bottom Dock Spacing on Mobile */
    [data-theme="cyberpunk"] body {
        padding-bottom: 92px;
    }

    [data-theme="cyberpunk"] .hud-bottom-dock {
        height: 56px;
        padding: 0 6px;
    }

    [data-theme="cyberpunk"] .hud-dock-item {
        font-size: 0.58rem;
    }
}