/* ==========================================================================
   SETTINGS MODAL STYLES
   ==========================================================================

   Consolidated CSS for Settings Modal (System Settings panel).

   This file contains all styles for:
   - #settingsContent (Settings modal container)
   - .settings-modal-content (Modal content wrapper)
   - .modal-tabs (Tab navigation - base styles in modal.css)
   - .tab-btn (Tab buttons - base styles in modal.css)
   - .music-controls (Music player controls)
   - .settings-section (Content sections)

   Styling matches Core/Breach UI:
   - Dark buttons with subtle borders
   - Green values with less glow
   - Standardized close button (red, compact)
   - Smaller, readable text

   Modal animation keyframes (modalFadeInGrow, modalFadeOutShrink) are in modal.css

   Last Updated: 2025-11-21
   ========================================================================== */

/* ========================================================================== */
/*   MODAL ANIMATIONS - Using shared keyframes from modal.css
   ========================================================================== */

   .settings-modal-content.is-opening,
   #settingsContent.is-opening {
       animation: modalFadeInGrow 0.2s ease-out forwards;
   }

   .settings-modal-content.is-closing,
   #settingsContent.is-closing {
       animation: modalFadeOutShrink 0.18s ease-in forwards;
   }

   /* ========================================================================== */
   /*   MODAL CONTAINER & BASE STYLES
      ========================================================================== */

   /* Settings modal matches game yellow button theme */
   .settings-modal-content {
       background-color: rgba(10, 8, 3, 0.94);
       --modal-frame-rgb: 255 220 64;
       --modal-panel-surface: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(14, 12, 5, 0.96), rgba(10, 8, 3, 0.94));
       background-image: var(--modal-panel-surface);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-top: 2px solid rgba(255, 255, 0, 0.75);
       border-radius: var(--radius-xl, 8px);
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 4px rgba(255, 255, 0, 0.08) inset;
       margin: auto;
       position: relative;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       z-index: 66;
       padding: 10px 12px;
   }

   /* Keep the title, status, and close control in one stable shell above the scroller. */
   #settingsContent > .hub-header-container,
   #settingsContent > .modal-tabs,
   #settingsContent > .settings-main {
       position: relative;
       z-index: 2;
   }

   #settingsContent > .hub-header-container {
       flex: 0 0 auto;
       padding: 2px 54px 0 2px;
   }

   #settingsContent .modal-hud-title--settings {
       min-height: 44px;
       margin: 0;
       padding: 0 0 6px;
       font-size: 16px;
       line-height: 1.2;
       letter-spacing: 1.8px;
   }

   #settingsContent .hub-header-container .styled-pause-indicator {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 32px;
       margin: 6px 0 0;
       padding: 5px 10px;
       font-size: 11px !important;
       letter-spacing: 1px;
   }

   #settingsContent > .modal-close-btn {
       top: 10px;
       right: 12px;
       width: 44px;
       height: 44px;
       font-size: 20px;
   }

   /* ========================================================================== */
   /*   STANDARDIZED CLOSE BUTTON - Uses base style from modal.css
      ========================================================================== */
   /* No additional overrides needed - inherits from .modal-close-btn base style */

   /* ========================================================================== */
   /*   MODAL HEADER
      ========================================================================== */

   /* .pause-indicator and h2 title use shared modal.css classes (.styled-pause-indicator, .modal-hud-title--settings) */

   /* ========================================================================== */
   /*   TAB NAVIGATION - Modal Tabs (Music Control, General Game, Visual Effects)
      ========================================================================== */
   /* Base styles for .modal-tabs and .tab-btn are in how-to-modal.css and hub-modal.css */

   #settingsContent .modal-tabs {
       flex-shrink: 0;
       margin-top: 4px;
       margin-bottom: 10px;
       border-bottom: 1px solid rgba(255, 255, 0, 0.5);
       box-shadow: 0 1px 4px rgba(255, 255, 0, 0.08);
   }

   /* Settings modal tab buttons - game yellow theme to match button */
   #settingsContent .tab-btn {
       min-height: 44px;
       border: var(--border-width, 2px) solid rgba(255, 255, 0, 0.2);
       /* Game yellow border */
       background: rgba(0, 0, 0, 0.6);
       /* Semi-transparent black for readability */
       color: rgba(255, 255, 255, 0.9);
       /* Brighter white text */
       backdrop-filter: none;
   }

   #settingsContent .tab-btn::before {
       background: linear-gradient(90deg, transparent, rgba(255, 255, 0, 0.1), transparent);
       /* Game yellow shimmer */
   }

   #settingsContent .tab-btn:hover {
       background: linear-gradient(135deg, rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1));
       /* Game yellow hover */
       color: #ffffff;
       /* White text */
       border-color: rgba(255, 255, 0, 0.6);
       /* Game yellow border */
       box-shadow: 0 0 15px rgba(255, 255, 0, 0.2);
       /* Game yellow shadow */
   }

   #settingsContent .tab-btn.active {
       background: linear-gradient(180deg, rgba(255, 255, 0, 0.3), rgba(200, 200, 0, 0.22) 50%, rgba(100, 100, 0, 0.28));
       color: #ffff00;
       border-color: rgba(255, 255, 0, 0.6);
       border-top: 2px solid #ffff00;
       box-shadow: 0 0 10px rgba(255, 255, 0, 0.2);
       font-weight: 800;
       text-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
   }

   /* Settings main content area - compact spacing */
   .settings-main {
       flex: 1 1 auto;
       min-height: 0;
       max-height: none;
       overflow-y: auto;
       overscroll-behavior: contain;
       scrollbar-gutter: stable;
       -webkit-overflow-scrolling: touch;
       padding: 0 10px 10px 10px;
   }

   #settingsContent :is(button, [role="slider"]):focus-visible {
       outline: 2px solid #fff86a;
       outline-offset: 3px;
   }

   /* Settings toggle rows - compact inline layout */
   .settings-toggle-row {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 6px 0;
   }

   .settings-toggle-row + .settings-toggle-row {
       border-top: 1px solid rgba(255, 255, 255, 0.06);
       margin-top: 4px;
       padding-top: 10px;
   }

   .settings-toggle-info {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .settings-toggle-label {
       color: #00ff88;
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.8px;
   }

   .settings-toggle-desc {
       color: #999;
       font-size: 10px;
       line-height: 1.3;
   }

   /* ========================================================================== */
   /*   SETTINGS SECTIONS - Content Areas
      ========================================================================== */

   .settings-section {
       margin-bottom: 8px;
       padding: 8px 12px;
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-bottom: 2px solid rgba(255, 255, 0, 0.4);
       border-radius: var(--radius-lg, 6px);
       background: rgba(40, 40, 0, 0.12);
       backdrop-filter: none;
       --modal-frame-rgb: 255 220 64;
       --modal-corner-frame-opacity: 0.72;
   }

   .settings-section h3 {
       color: #ffff00;
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       margin-bottom: 8px;
       padding: 4px 8px;
       background: rgba(0, 0, 0, 0.86);
       border-radius: var(--radius-lg, 6px);
       border-bottom: 1px solid rgba(255, 255, 0, 0.4);
       text-shadow: 0 0 6px rgba(255, 255, 0, 0.3);
   }

   /* ========================================================================== */
   /*   BASE BUTTON STYLES - All Settings Buttons
      ========================================================================== */

   .settings-modal-content button:not(.game-btn):not(.modal-close-btn):not(.tab-btn):not(.music-btn):not(.music-playlist-btn) {
       background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)) !important;
       border: 1px solid #fff;
       color: #fff !important;
       font-size: 11px !important;
       font-weight: 600 !important;
       padding: 8px 14px !important;
       border-radius: 1em !important;
       cursor: pointer !important;
       transition: all 0.3s ease !important;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
   }

   .settings-modal-content button:hover:not(:disabled):not(.game-btn):not(.modal-close-btn):not(.tab-btn):not(.music-btn):not(.music-playlist-btn) {
       transform: translateY(-1px) !important;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
       background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1)) !important;
       border-color: rgba(0, 255, 0, 0.4) !important;
   }

   .settings-modal-content button:disabled {
       opacity: 0.5 !important;
       cursor: not-allowed !important;
   }

   .music-section {
       background: rgba(40, 40, 0, 0.12);
       border: 1px solid rgba(255, 255, 0, 0.24);
       border-bottom: 2px solid rgba(255, 255, 0, 0.38);
       box-shadow:
           inset 0 0 24px rgba(255, 255, 0, 0.04),
           0 0 18px rgba(0, 255, 255, 0.08);
   }

   .music-section .music-panel-title {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       width: 100%;
       margin: 0 0 14px;
       padding: 7px 12px;
       color: #00ffff;
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: 14px;
       font-weight: 800;
       line-height: 1;
       letter-spacing: 1.5px;
       text-align: left;
       text-shadow: 0 0 8px rgba(0, 255, 255, 0.42);
       background: rgba(0, 0, 0, 0.76);
       border: 1px solid rgba(0, 255, 255, 0.2);
       border-bottom: 1px solid rgba(0, 255, 255, 0.48);
       border-radius: var(--radius-lg, 6px);
       box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.04);
   }

   .music-player-panel {
       display: block;
       padding: 0;
       background: transparent;
       border: 0;
       border-radius: 0;
       box-shadow: none;
       backdrop-filter: none;
   }

   .music-player-layout {
       display: grid;
       grid-template-columns: minmax(0, 0.95fr) minmax(330px, 1.05fr);
       gap: 14px;
       align-items: stretch;
   }

   .music-now-panel,
   .music-playlist-panel {
       /* min-height: 297px; */
       padding: 18px 20px;
       border: 1px solid rgba(0, 255, 255, 0.56);
       border-radius: var(--radius-lg, 6px);
       background:
           linear-gradient(135deg, rgba(0, 255, 255, 0.06), rgba(0, 0, 0, 0.7)),
           rgba(0, 0, 0, 0.58);
       box-shadow:
           inset 0 0 18px rgba(0, 255, 255, 0.045),
           0 0 16px rgba(0, 255, 255, 0.12);
       --modal-frame-rgb: 0 255 200;
       --modal-corner-frame-opacity: 0.72;
   }

   .music-now-panel {
       display: flex;
       flex-direction: column;
       gap: 18px;
   }

   .music-playlist-panel {
       position: relative;
       max-height: min(260px, 52vh);
       overflow-y: auto;
       overscroll-behavior: contain;
       scrollbar-gutter: stable;
   }

   .music-now-label,
   .music-list-label {
       color: #00ffff;
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: 12px;
       font-weight: 800;
       letter-spacing: 1.35px;
       line-height: 1;
       text-transform: uppercase;
       text-shadow: 0 0 9px rgba(0, 255, 255, 0.58);
   }

   .music-track-info .track-info-row {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-start;
       gap: 8px;
   }

   .music-now-playing {
       color: #ffffff;
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: clamp(15px, 1.55vw, 20px);
       font-weight: 800;
       line-height: 1.16;
       text-transform: none;
       text-shadow: 0 0 9px rgba(0, 255, 255, 0.42);
   }

   .music-track-count {
       color: rgba(0, 255, 255, 0.82);
       font-size: 11px;
       letter-spacing: 1px;
       text-transform: uppercase;
       text-shadow: 0 0 5px rgba(0, 255, 255, 0.26);
   }

   .music-progress-wrap {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       gap: 12px;
       margin-top: auto;
   }

   .music-time {
       min-width: 2.8em;
       color: rgba(230, 255, 236, 0.86);
       font-family: 'Courier New', monospace;
       font-size: 12px;
       font-weight: 800;
   }

   .music-progress-bar {
       position: relative;
       height: 9px;
       min-height: 9px;
       background: rgba(0, 0, 0, 0.72);
       border: 1px solid rgba(0, 255, 255, 0.56);
       border-radius: var(--radius-sm, 3px);
       overflow: visible;
       cursor: pointer;
       touch-action: none;
       box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.1);
   }

   .music-progress-fill {
       position: relative;
       width: 0%;
       height: 100%;
       background: linear-gradient(90deg, #1fffff, #00ff88);
       border-radius: var(--radius-sm, 3px);
       box-shadow: 0 0 10px rgba(0, 255, 255, 0.36), 0 0 14px rgba(0, 255, 136, 0.18);
       transition: width 0.1s linear;
   }

   .music-progress-handle {
       position: absolute;
       top: 50%;
       right: 0;
       display: block;
       width: 14px;
       height: 14px;
       border: 1px solid rgba(230, 255, 255, 0.94);
       border-radius: 50%;
       background:
           radial-gradient(circle at 35% 30%, #ffffff 0 18%, #66ffff 19% 42%, #00ff99 43% 100%);
       box-shadow: 0 0 9px rgba(0, 255, 255, 0.82), 0 0 16px rgba(0, 255, 136, 0.34);
       transform: translate(50%, -50%);
       opacity: 0;
       cursor: grab;
       pointer-events: auto;
       transition: opacity 0.16s ease, transform 0.12s ease;
   }

   .music-progress-bar.is-ready .music-progress-handle {
       opacity: 1;
   }

   .music-progress-bar.is-seeking .music-progress-handle,
   .music-progress-bar:hover .music-progress-handle {
       transform: translate(50%, -50%) scale(1.12);
   }

   .music-progress-bar.is-seeking {
       cursor: grabbing;
   }

   .music-controls-row {
       display: grid;
       width: 100%;
       gap: 12px;
   }

   .music-controls-primary {
       grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
   }

   .music-controls-secondary {
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 8px;
   }

   .music-btn,
   .music-controls-secondary .music-btn,
   .music-controls-secondary .game-btn {
       min-height: 44px;
       padding: 9px 10px;
       color: rgba(255, 255, 255, 0.94);
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: 10px;
       font-weight: 800;
       letter-spacing: 0.7px;
       line-height: 1;
       text-transform: uppercase;
       background: rgba(0, 0, 0, 0.58);
       border: 1px solid rgba(0, 255, 255, 0.56);
       border-radius: var(--radius-lg, 6px);
       box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.04), 0 0 8px rgba(0, 255, 255, 0.12);
   }

   .music-btn:hover,
   .music-controls-secondary .game-btn.active,
   .music-controls-secondary .game-btn:hover {
       color: #ffffff;
       background: rgba(0, 255, 255, 0.17);
       border-color: rgba(0, 255, 255, 0.9);
       box-shadow: 0 0 15px rgba(0, 255, 255, 0.34);
   }

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

   .music-btn-play-pause {
       width: auto;
       height: auto;
       border-radius: var(--radius-lg, 6px);
       font-size: 11px;
   }

   .music-player-panel .volume-display {
       color: rgba(0, 255, 255, 0.88);
       font-family: 'Courier New', monospace;
       font-size: 11px;
       font-weight: 800;
       text-align: left;
       text-shadow: 0 0 7px rgba(0, 255, 255, 0.32);
   }

   .music-playlist-buttons {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-top: 14px;
       padding-bottom: 0;
   }

   .music-playlist-btn {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: center;
       gap: 10px;
       min-height: 48px;
       padding: 12px;
       color: rgba(255, 255, 255, 0.88);
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: 11px;
       font-weight: 800;
       letter-spacing: 0.45px;
       text-align: left;
       text-transform: none;
       background:
           repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 221, 255, 0.045) 19px, rgba(0, 221, 255, 0.045) 20px),
           repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.04) 19px, rgba(0, 221, 255, 0.04) 20px),
           linear-gradient(90deg, rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0.52)),
           rgba(0, 0, 0, 0.56);
       border: 1px solid rgba(0, 255, 255, 0.34);
       border-radius: var(--radius-lg, 6px);
       box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.035);
   }

   .music-playlist-btn:hover,
   .music-playlist-btn.active {
       color: #ffffff;
       background:
           repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 221, 255, 0.07) 19px, rgba(0, 221, 255, 0.07) 20px),
           repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.06) 19px, rgba(0, 221, 255, 0.06) 20px),
           linear-gradient(90deg, rgba(0, 255, 255, 0.24), rgba(0, 255, 120, 0.08)),
           rgba(0, 0, 0, 0.62);
       border-color: rgba(0, 255, 255, 0.9);
       box-shadow: 0 0 13px rgba(0, 255, 255, 0.32), inset 0 0 14px rgba(0, 255, 255, 0.05);
   }

   .music-playlist-btn.active {
       border-left: 3px solid #00ff88;
   }

   .music-playlist-btn:disabled {
       color: rgba(205, 220, 216, 0.62);
       border-color: rgba(130, 160, 154, 0.32);
       background: rgba(0, 8, 8, 0.72);
       box-shadow: none;
   }

   .music-playlist-title {
       display: block;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

   .music-playlist-index {
       min-width: 28px;
       padding: 2px 6px;
       color: rgba(0, 255, 255, 0.88);
       font-family: 'Courier New', monospace;
       font-size: 10px;
       font-weight: 900;
       text-align: center;
       background: rgba(0, 221, 255, 0.08);
       border: 1px solid rgba(0, 221, 255, 0.38);
       border-radius: var(--radius-sm, 3px);
       opacity: 0.9;
   }

   /* ========================================================================== */
   /*   MOBILE RESPONSIVE STYLES
      ========================================================================== */

   @media (max-width: 640px) {
       #settingsModal {
           box-sizing: border-box;
           padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
       }

       .settings-modal-content {
           width: 100%;
           max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
           padding: 10px;
       }

       #settingsContent > .hub-header-container {
           padding-right: 52px;
       }

       #settingsContent .modal-hud-title--settings {
           min-height: 44px;
           font-size: 14px;
           letter-spacing: 1.4px;
       }

       #settingsContent > .modal-close-btn {
           top: 8px;
           right: 10px;
       }

       .settings-main {
           max-height: none;
           padding: 0 8px 12px;
       }

       #settingsContent .tab-btn {
           min-width: 0;
           min-height: 48px;
           padding: 10px;
           font-size: 10px;
       }

       .music-player-panel {
           padding: 0;
       }

       .music-player-layout {
           grid-template-columns: 1fr;
           gap: 14px;
       }

       .music-section .music-panel-title {
           padding: 7px 10px;
           font-size: 13px;
       }

       .music-now-panel,
       .music-playlist-panel {
           min-height: 0;
           padding: 14px;
       }

       .music-playlist-panel {
           max-height: none;
           overflow-y: visible;
           overscroll-behavior: auto;
           scrollbar-gutter: auto;
       }

       .music-controls-primary {
           gap: 8px;
       }

       .music-btn-play-pause {
           width: auto;
           height: auto;
           font-size: 11px;
       }

       .music-controls-secondary {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }

       .music-controls-secondary .music-btn,
       .music-controls-secondary .game-btn {
           min-height: 48px;
           padding: 8px;
           font-size: 9px;
       }

       .music-playlist-btn {
           min-height: 52px;
           padding: 12px 10px;
           font-size: 12px;
       }

       #settingsContent .settings-toggle-row > .game-btn {
           min-height: 44px;
           flex: 0 0 auto;
       }

       .game-btn {
           flex: 1;
           font-size: 10px !important;
           padding: 8px 10px !important;
       }

       .music-controls .game-btn {
           padding: 8px !important;
           font-size: 9px !important;
       }
   }

   @media (max-width: 480px) {
       .settings-modal-content {
           padding: 10px;
       }

       .settings-main {
           padding: 0 10px 10px 10px;
       }

       #settingsContent .tab-btn {
           width: auto;
           margin: 0 !important;
           border-radius: 4px;
       }

       .settings-section {
           padding: 10px;
           margin-bottom: 15px;
       }
   }

   @media (max-height: 600px) {
       #settingsContent.settings-modal-content {
           max-height: calc(100dvh - 12px);
       }

       #settingsContent > .hub-header-container {
           padding-top: 0;
       }

       #settingsContent .modal-hud-title--settings {
           min-height: 40px;
       }

       #settingsContent .hub-header-container .styled-pause-indicator {
           min-height: 28px;
           margin-top: 3px;
           padding-block: 3px;
       }

       #settingsContent .modal-tabs {
           margin-top: 3px;
           margin-bottom: 6px;
       }

       #settingsContent .music-playlist-panel {
           max-height: none;
           overflow-y: visible;
           overscroll-behavior: auto;
           scrollbar-gutter: auto;
       }
   }