:root {
  --bg-dark: #0a051b;
  --panel-dark: #120c2d;
  --neon-pink: #ff2a7a;
  --neon-blue: #00f0ff;
  --neon-purple: #9d4edd;
  --neon-green: #39ff14;
  --text-main: #f8f9fa;
  --text-muted: #a0aec0;
}

/* Base Body Area Adjustments */
.pitchmaster-view-wrapper {
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(157, 78, 221, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.12) 0%, transparent 40%);
  background-attachment: fixed;
  color: var(--text-main);
  padding: 1.5rem 0;
}

/* Neon Text Glows */
.glow-text-pink {
    color: #fff;
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ff007f, 0 0 40px #ff007f;
}

.glow-text-blue {
    color: #fff;
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #00f3ff, 0 0 40px #00f3ff;
}

.glow-text-purple {
    color: #fff;
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #bc13fe, 0 0 40px #bc13fe;
}

.glow-text-green {
    color: #fff;
    text-shadow: 
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #39ff14,
        0 0 40px #39ff14,
        0 0 80px #39ff14,
        0 0 120px #39ff14;
}

.glow-text-yellow {
    color: #fff;
    text-shadow: 
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #ffea00,
        0 0 40px #ffea00,
        0 0 80px #ffea00,
        0 0 120px #ffea00;
}

/* Neon Dynamic Border Layouts */
.glow-border-blue {
    border: 2px solid #00f3ff;
    box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #00f3ff, inset 0 0 15px #00f3ff;
}

.glow-border-purple {
    border: 2px solid #bc13fe;
    box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #bc13fe, inset 0 0 15px #bc13fe;
}

/* Glassmorphic Component Panels */
.glass-card {
  background: rgba(18, 12, 45, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

/* Interactive Input Elements */
.pitchmaster-view-wrapper .form-select,
.pitchmaster-view-wrapper .form-control {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border-radius: 12px;
}

.pitchmaster-view-wrapper .form-select:focus,
.pitchmaster-view-wrapper .form-control:focus {
  background-color: rgba(18, 12, 45, 0.9);
  color: var(--text-main);
  border-color: var(--neon-blue);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}


/* ==========================================================================
   Definitive Override for the Neon Blue Trigger Button Text Visibility
   ========================================================================== */

/* 1. Initial Load State: Force bright white text to contrast against dark glass */
.pitchmaster-view-wrapper .btn-neon-blue,
.pitchmaster-view-wrapper .btn-neon-blue:link,
.pitchmaster-view-wrapper .btn-neon-blue:visited {
  background-color: transparent !important;
  border: 2px solid var(--neon-blue) !important;
  color: var(--text-main) !important; /* Stark bright white/light gray */
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* 2. Hover & Focus States: Turn background solid neon blue and text crisp dark black */
.pitchmaster-view-wrapper .btn-neon-blue:hover,
.pitchmaster-view-wrapper .btn-neon-blue:focus {
  background-color: var(--neon-blue) !important;
  color: #000000 !important; /* Perfect readability against the neon illumination background */
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
  transform: scale(1.02);
}

/* 3. Mouse Down/Active State: Handle momentary click compression styling safely */
.pitchmaster-view-wrapper .btn-neon-blue:active {
  background-color: var(--neon-blue) !important;
  color: #000000 !important;
  transform: scale(0.99);
}

/* --- NEON GREEN BUTTON (Save My Score) --- */
.pitchmaster-view-wrapper .btn-neon-green,
.pitchmaster-view-wrapper .btn-neon-green:link,
.pitchmaster-view-wrapper .btn-neon-green:visited {
  background-color: transparent !important;
  border: 2px solid var(--neon-green) !important;
  color: var(--text-main) !important; /* Forces bright white text on initial load */
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.pitchmaster-view-wrapper .btn-neon-green:hover,
.pitchmaster-view-wrapper .btn-neon-green:focus {
  background-color: var(--neon-green) !important;
  color: #000000 !important; /* Flips text to crisp black once button illuminates */
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
  transform: scale(1.02);
}

.pitchmaster-view-wrapper .btn-neon-green:active {
  background-color: var(--neon-green) !important;
  color: #000000 !important;
  transform: scale(0.99);
}

/* Leaderboard Matrix Display Elements */
.tcc-table {
  color: var(--text-main);
  vertical-align: middle;
}

.tcc-table th {
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tcc-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem 0.75rem;
}

/* ==========================================================================
   Fluid Scrolled Table Body Alignment Directives - REVISED DEFINITIVE
   ========================================================================== */

#tbody-scroll-wrapper {
    max-height: 300px !important;  /* Locks structural height safely across 10-row segments */
    overflow-y: scroll !important;  /* Forces the scrollbar gutter to stay permanently visible */
    overflow-x: hidden !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: block !important;
    width: 100% !important;
}

/* Force the table, tbody, and rows inside the scroll area to behave as a single block-level flow */
#tbody-scroll-wrapper .tcc-table,
#tbody-scroll-wrapper #leaderboard-entries,
#tbody-scroll-wrapper tr {
    display: block !important;
    width: 100% !important;
}

/* Force child table body rows to float their layout cells like a regular grid row block */
#tbody-scroll-wrapper tr {
    content: "";
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

/* Enforce shared, rigid pixel width distributions across BOTH tables so columns align perfectly */
.tcc-table th, 
.tcc-table td {
    flex: 1 1 18% !important; /* Distributes remaining cells evenly across fluid bounds */
    width: 18% !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    display: inline-block !important;
}

/* Tighten down the first column (Rank) across both top header and body rows */
.tcc-table th:first-child, 
.tcc-table td:first-child {
    flex: 0 0 10% !important; /* Retain standard tightened rank bounds */
    width: 10% !important;
}

.spot-available {
  color: rgba(255, 255, 255, 0.50);
  font-style: italic;
}

/* ==========================================================================
   Sleek Rounded Capsule Overrides for Playback Mechanisms
   ========================================================================== */

/* Standard Play A & Play B Control Capsules */
.pitchmaster-view-wrapper .btn-control-capsule,
.pitchmaster-view-wrapper .btn-control-capsule:link,
.pitchmaster-view-wrapper .btn-control-capsule:visited {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-main) !important;
    border-radius: 30px !important; /* Forces perfect rounding */
    transition: all 0.25s ease;
}

.pitchmaster-view-wrapper .btn-control-capsule:hover,
.pitchmaster-view-wrapper .btn-control-capsule:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

/* Master Play Sequence Feature Capsule */
.pitchmaster-view-wrapper .btn-sequence-capsule,
.pitchmaster-view-wrapper .btn-sequence-capsule:link,
.pitchmaster-view-wrapper .btn-sequence-capsule:visited {
    background-color: transparent !important;
    border: 2px solid var(--neon-blue) !important;
    color: var(--text-main) !important;
    border-radius: 30px !important;
    transition: all 0.25s ease;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.pitchmaster-view-wrapper .btn-sequence-capsule:hover,
.pitchmaster-view-wrapper .btn-sequence-capsule:focus {
    background-color: var(--neon-blue) !important;
    color: #000000 !important; /* Flips to black text on high illumination glow overlay */
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    transform: translateY(-1px) scale(1.02);
}

.pitchmaster-view-wrapper .btn-sequence-capsule:active,
.pitchmaster-view-wrapper .btn-control-capsule:active {
    transform: translateY(1px);
}

/* ==========================================================================
   Synthwave Floating Quiz Option Button Overrides
   ========================================================================== */

/* Shared Base Layout for Interactive Option Buttons */
.pitchmaster-view-wrapper .btn-quiz-option {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
}

/* Rounded Alpha Indicators (A, B, C) matching the quiz profile */
.pitchmaster-view-wrapper .btn-quiz-option .option-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
    margin-right: 8px;
    font-weight: 700;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}

/* --- OPTION A: NEON BLUE (B is lower) --- */
.pitchmaster-view-wrapper .btn-quiz-option.option-blue .option-indicator {
    color: var(--neon-blue);
}
.pitchmaster-view-wrapper .btn-quiz-option.option-blue:hover {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    transform: translateY(-2px);
}

/* --- OPTION B: NEON PURPLE (Same Pitch) --- */
.pitchmaster-view-wrapper .btn-quiz-option.option-purple .option-indicator {
    color: var(--neon-purple);
}
.pitchmaster-view-wrapper .btn-quiz-option.option-purple:hover {
    background: rgba(157, 78, 221, 0.1) !important;
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
    transform: translateY(-2px);
}

/* --- OPTION C: NEON PINK (B is higher) --- */
.pitchmaster-view-wrapper .btn-quiz-option.option-pink .option-indicator {
    color: var(--neon-pink);
}
.pitchmaster-view-wrapper .btn-quiz-option.option-pink:hover {
    background: rgba(255, 42, 122, 0.08) !important;
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 15px rgba(255, 42, 122, 0.3);
    transform: translateY(-2px);
}

/* Active micro-press feedback */
.pitchmaster-view-wrapper .btn-quiz-option:active {
    transform: translateY(0);
}

/* ==========================================================================
   Synthwave Custom Glass Alert Panel Overrides
   ========================================================================== */
#custom-alert {
    background: rgba(18, 12, 45, 0.85) !important; /* Deep translucent slate glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-main) !important; /* Crisp bright white text */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease;
}

/* Dynamic State Colors - Overriding the native Bootstrap state classes */
#custom-alert.alert-success {
    border: 2px solid var(--neon-green) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4), inset 0 0 10px rgba(57, 255, 20, 0.1) !important;
}

#custom-alert.alert-danger {
    border: 2px solid var(--neon-pink) !important;
    box-shadow: 0 0 15px rgba(255, 42, 122, 0.4), inset 0 0 10px rgba(255, 42, 122, 0.1) !important;
}

#custom-alert.alert-info {
    border: 2px solid var(--neon-blue) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
}

/* ==========================================================================
   Alert Panel Confirmation Triggers Overrides
   ========================================================================== */

/* The 'Yes, Save & Reset' Confirmation Button */
#custom-alert #commit-score-btn {
    background-color: transparent !important;
    border: 2px solid var(--neon-green) !important;
    color: var(--text-main) !important; /* Forces bright white text initially */
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 20px !important;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
}

#custom-alert #commit-score-btn:hover,
#custom-alert #commit-score-btn:focus {
    background-color: var(--neon-green) !important;
    color: #000000 !important; /* Stark black text on solid green illumination hover */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* The 'Keep Playing' Text Link Override */
#custom-alert #cancel-score-btn {
    color: var(--text-muted) !important; /* Shifts text away from disappearing dark gray */
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

#custom-alert #cancel-score-btn:hover {
    color: var(--neon-blue) !important; /* Glows neon blue on mouse hover */
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* ==========================================================================
   Mid-Game Difficulty Switch Confirmation Overrides
   ========================================================================== */

/* 1. 'Save & Change' Primary Button */
#custom-alert #alert-btn-save {
    background-color: transparent !important;
    border: 2px solid var(--neon-green) !important;
    color: var(--text-main) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 20px !important;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
}

#custom-alert #alert-btn-save:hover,
#custom-alert #alert-btn-save:focus {
    background-color: var(--neon-green) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* 2. 'Discard Progress' Destructive Button */
#custom-alert #alert-btn-discard {
    background-color: transparent !important;
    border: 2px solid var(--neon-pink) !important; /* Reusing your neon-pink variables */
    color: var(--text-main) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 20px !important;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(255, 42, 122, 0.15);
}

#custom-alert #alert-btn-discard:hover,
#custom-alert #alert-btn-discard:focus {
    background-color: var(--neon-pink) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 42, 122, 0.5);
}

/* 3. 'Cancel' Link Override */
#custom-alert #alert-btn-cancel {
    color: var(--text-muted) !important;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

#custom-alert #alert-btn-cancel:hover {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* ==========================================================================
   Premium Synthwave Custom Scrollbar Theme
   ========================================================================== */

/* Define width dimensions of the interaction track channel */
#tbody-scroll-wrapper::-webkit-scrollbar {
    width: 8px !important;
}

/* Background gutter path track (deep dark panel slate blending into table) */
#tbody-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(18, 12, 45, 0.6) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Draggable thumb handle indicator (translucent neon purple to match card borders) */
#tbody-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(157, 78, 221, 0.4) !important; /* Matches your card accent line tint */
    border-radius: 10px !important;
    border: 1px solid rgba(188, 19, 254, 0.2) !important;
    transition: all 0.25s ease-in-out !important;
}

/* Fully illuminate the scroll handle on user pointer hover hover */
#tbody-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 78, 221, 0.8) !important;
    box-shadow: 0 0 10px #bc13fe !important; /* Neon purple text shadow bloom style */
}

/* ==========================================================================
   Pitch Master Responsive Mobile Viewport Overrides (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Stack and clean up the HUD matrix alignment */
    .pitchmaster-view-wrapper h2.h5 {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    
    /* 2. Reposition quiz buttons into a clean, thumb-friendly vertical block stack */
    #canvas-container .position-absolute.bottom-0.end-0 {
        position: relative !important;
        bottom: auto !important;
        end: auto !important;
        margin: 0 !important;
        padding: 1rem;
        background: rgba(10, 5, 27, 0.85);
    }
    
    #canvas-container .position-absolute.bottom-0.end-0 .d-flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .btn-quiz-option {
        width: 100% !important;
        justify-content: center;
        padding: 0.65rem !important;
    }
    
    /* 3. Adjust canvas height so buttons aren't crowding it out */
    #visualizer {
        height: 140px !important;
    }
}

@media (max-width: 768px) {
    /* Hide the non-essential columns on small phone viewports */
    .tcc-table th:nth-child(4), .tcc-table td:nth-child(4), /* Hide Rounds */
    .tcc-table th:nth-child(6), .tcc-table td:nth-child(6)  /* Hide Difficulty */ {
        display: none !important;
    }

    /* Recalculate remaining 4 columns to utilize 100% width cleanly (10% + 30% + 30% + 30%) */
    .tcc-table th, 
    .tcc-table td {
        flex: 1 1 30% !important;
        width: 30% !important;
        font-size: 0.85rem !important;
    }

    /* Keep the rank tight on the left edge */
    .tcc-table th:first-child, 
    .tcc-table td:first-child {
        flex: 0 0 10% !important;
        width: 10% !important;
    }
}