@font-face {
    font-family: 'GHLFont';
    src: url('../assets/fonts/SDK_JP_Web 85W.ttf') format('truetype');
}

/* =========================================== */
/* ACCESSIBILITY - Focus indicators            */
/* =========================================== */

*:focus-visible {
    outline: 2px solid var(--md-sys-color-primary, #9CCAFF);
    outline-offset: 2px;
}

/* =========================================== */
/* MATERIAL DESIGN 3 (MATERIAL YOU) SYSTEM     */
/* =========================================== */

:root {
    /* ============================================ */
    /* COLOR SYSTEM - Material You Dark Theme       */
    /* ============================================ */

    /* Primary Palette - Derivado del azul #0A84FF */
    --md-sys-color-primary: #9CCAFF;
    --md-sys-color-on-primary: #003353;
    --md-sys-color-primary-container: #004A77;
    --md-sys-color-on-primary-container: #CEEBFF;

    /* Secondary Palette - Complementario neutro */
    --md-sys-color-secondary: #BAC8DB;
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3B4758;
    --md-sys-color-on-secondary-container: #D6E4F7;

    /* Tertiary Palette - Success/Green */
    --md-sys-color-tertiary: #A0D0A0;
    --md-sys-color-on-tertiary: #0E3814;
    --md-sys-color-tertiary-container: #265329;
    --md-sys-color-on-tertiary-container: #BCECBB;

    /* Error Palette - Danger/Red */
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    /* Neutral Palette - Surfaces */
    --md-sys-color-surface: #1A1C1E;
    --md-sys-color-surface-dim: #111315;
    --md-sys-color-surface-bright: #37393E;
    --md-sys-color-on-surface: #E2E2E6;
    --md-sys-color-on-surface-variant: #C3C7CF;
    --md-sys-color-inverse-surface: #E2E2E6;
    --md-sys-color-inverse-on-surface: #2E3036;

    /* Surface Containers - Con tinting progresivo */
    --md-sys-color-surface-container-lowest: #0E1013;
    --md-sys-color-surface-container-low: #202227;
    --md-sys-color-surface-container: #24262B;
    --md-sys-color-surface-container-high: #2E3036;
    --md-sys-color-surface-container-highest: #393A41;

    /* Outline Colors */
    --md-sys-color-outline: #8D9199;
    --md-sys-color-outline-variant: #42474E;

    /* Background (igual que surface en dark theme) */
    --md-sys-color-background: #1A1C1E;
    --md-sys-color-on-background: #E2E2E6;

    /* Scrim (para overlays) */
    --md-sys-color-scrim: #000000;

    /* ============================================ */
    /* ELEVATION - Shadows + Surface Tinting        */
    /* ============================================ */

    /* Level 0 - No elevation */
    --md-sys-elevation-0-shadow: none;
    --md-sys-elevation-0-overlay: transparent;

    /* Level 1 - Lowest elevation */
    --md-sys-elevation-1-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-1-overlay: rgba(156, 202, 255, 0.05);

    /* Level 2 - Low elevation */
    --md-sys-elevation-2-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-2-overlay: rgba(156, 202, 255, 0.08);

    /* Level 3 - Medium elevation */
    --md-sys-elevation-3-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), 0px 4px 12px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-3-overlay: rgba(156, 202, 255, 0.11);

    /* Level 4 - High elevation */
    --md-sys-elevation-4-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 6px 16px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-4-overlay: rgba(156, 202, 255, 0.12);

    /* Level 5 - Highest elevation */
    --md-sys-elevation-5-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3), 0px 8px 20px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-5-overlay: rgba(156, 202, 255, 0.14);

    /* ============================================ */
    /* SHAPE - Border Radius Scale                  */
    /* ============================================ */

    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 12px;
    --md-sys-shape-corner-medium: 16px;
    --md-sys-shape-corner-large: 20px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* ============================================ */
    /* TYPOGRAPHY SCALE - Material 3                */
    /* ============================================ */

    /* Display - Largest text */
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-weight: 400;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-weight: 400;
    --md-sys-typescale-display-small-line-height: 44px;

    /* Headline - High emphasis */
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-weight: 400;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-weight: 400;
    --md-sys-typescale-headline-small-line-height: 32px;

    /* Title - Medium emphasis */
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-title-small-line-height: 20px;

    /* Body - Regular text */
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-body-small-line-height: 16px;

    /* Label - UI components */
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-weight: 500;
    --md-sys-typescale-label-small-line-height: 16px;

    /* ============================================ */
    /* MOTION - Easing & Duration                   */
    /* ============================================ */

    /* Easing curves */
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

    /* Durations */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;

    /* ============================================ */
    /* SPACING - Material Guidelines                */
    /* ============================================ */

    --md-sys-spacing-0: 0px;
    --md-sys-spacing-1: 4px;
    --md-sys-spacing-2: 8px;
    --md-sys-spacing-3: 12px;
    --md-sys-spacing-4: 16px;
    --md-sys-spacing-5: 20px;
    --md-sys-spacing-6: 24px;
    --md-sys-spacing-7: 28px;
    --md-sys-spacing-8: 32px;
    --md-sys-spacing-12: 48px;
    --md-sys-spacing-16: 64px;
}

/* ============================================ */
/* SVG ICON SYSTEM                              */
/* ============================================ */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Iconos dentro de botones */
button .icon,
.toggle-button .icon {
    vertical-align: middle;
    margin-right: 4px;
}

/* Iconos en headers */
h2 .icon,
h3 .icon {
    margin-right: 8px;
    vertical-align: middle;
}

/* Iconos solo (sin texto) */
.hamburger-icon .icon,
.side-panel-close .icon,
.yin-close-btn .icon,
.volume-dropdown-close .icon {
    margin-right: 0;
}

/* Iconos en el dropdown title */
.volume-dropdown-title .icon {
    margin-right: 6px;
}

/* ============================================ */
/* BASE STYLES                                  */
/* ============================================ */

* {
    box-sizing: border-box;
}

html,
body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0;
    background: var(--md-sys-color-background);
    font-family: 'GHLFont', 'Courier New', monospace;
    overflow: hidden;
    color: var(--md-sys-color-on-background);
    position: fixed;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
}

/* ============================================ */
/* MAIN STRUCTURE                               */
/* ============================================ */

#hudContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

#mainCanvas {
    display: block;
    background: var(--md-sys-color-surface);
    flex: 1;
    width: 100%;
    height: 100%;
    touch-action: none;
}

#audioPlayer {
    display: none;
}

/* ============================================ */
/* MATERIAL TOP APP BAR                         */
/* ============================================ */

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 64px;
    background: var(--md-sys-color-surface-container);
    display: flex;
    align-items: center;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
    padding-top: max(var(--md-sys-spacing-2), env(safe-area-inset-top) + var(--md-sys-spacing-2));
    padding-left: max(var(--md-sys-spacing-4), env(safe-area-inset-left) + var(--md-sys-spacing-4));
    padding-right: max(var(--md-sys-spacing-4), env(safe-area-inset-right) + var(--md-sys-spacing-4));
    gap: var(--md-sys-spacing-3);
    z-index: 200;
    box-shadow: var(--md-sys-elevation-2-shadow);
}

/* Surface tint for top bar */
.top-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-2-overlay);
    pointer-events: none;
    z-index: -1;
}

/* Icon Button (Hamburger) - Material Standard */
.hamburger-btn {
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    font-size: 24px;
    position: relative;
    transition: none;
}

/* State layer for icon button */
.hamburger-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.hamburger-btn:hover::before {
    opacity: 0.08;
}

.hamburger-btn:focus::before {
    opacity: 0.12;
}

.hamburger-btn:active::before {
    opacity: 0.12;
}

.hamburger-icon {
    display: block;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Top bar title - Title Medium */
.top-bar-title {
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.15px;
}

/* ============================================ */
/* SETTINGS DROPDOWN PANEL                      */
/* ============================================ */

/* Toggle button in top bar - pushed to the right */
.top-bar-settings-btn {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: var(--md-sys-shape-corner-full);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    margin-left: auto;
    position: relative;
    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.top-bar-settings-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.top-bar-settings-btn:hover::before {
    opacity: 0.08;
}

.top-bar-settings-btn:active::before {
    opacity: 0.12;
}

.top-bar-settings-btn.active {
    color: var(--md-sys-color-primary);
}

/* Dropdown container — top se calcula con JS para pegarse al borde inferior de la top-bar */
.settings-dropdown {
    position: absolute;
    top: 64px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 199;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized),
                transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}

.settings-dropdown.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* Content card */
.settings-dropdown-content {
    background: var(--md-sys-color-surface-container-high);
    border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
    box-shadow: var(--md-sys-elevation-3-shadow);
    position: relative;
}

.settings-dropdown-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-3-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: -1;
}

/* Each control */
.settings-control {
    margin-bottom: var(--md-sys-spacing-4);
}

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

/* Header row: label + value */
.settings-control-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--md-sys-spacing-1);
}

.settings-control-header label {
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-body-medium-size);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.15px;
}

.settings-value {
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 600;
    color: var(--md-sys-color-primary);
    min-width: 48px;
    text-align: right;
}

/* Material Slider */
.settings-control input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    outline: none;
    cursor: pointer;
}

.settings-control input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-control input[type='range']::-webkit-slider-thumb:hover {
    width: 24px;
    height: 24px;
}

.settings-control input[type='range']::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-control input[type='range']::-moz-range-thumb:hover {
    width: 24px;
    height: 24px;
}

/* Difficulty selector */
.settings-difficulty {
    margin-bottom: var(--md-sys-spacing-5);
}

.settings-difficulty-label {
    display: block;
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-body-medium-size);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    color: var(--md-sys-color-on-surface);
    margin-bottom: var(--md-sys-spacing-2);
    letter-spacing: 0.15px;
}

/* Material You Segmented Buttons */
.settings-segmented-buttons {
    display: flex;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
}

.segmented-btn {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    border: none;
    border-right: 1px solid var(--md-sys-color-outline);
    cursor: pointer;
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    position: relative;
    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

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

.segmented-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.segmented-btn:hover::before {
    opacity: 0.08;
}

.segmented-btn:active::before {
    opacity: 0.12;
}

.segmented-btn.selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.segmented-btn.selected::before {
    background: var(--md-sys-color-on-secondary-container);
}

/* Reset button - Material Tonal Button */
.settings-reset-btn {
    width: 100%;
    margin-top: var(--md-sys-spacing-4);
    padding: 8px 16px;
    height: 36px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    position: relative;
    transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-reset-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-secondary-container);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-reset-btn:hover::before {
    opacity: 0.08;
}

.settings-reset-btn:active::before {
    opacity: 0.12;
}

/* ---- Tabs ---- */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--md-sys-spacing-4);
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 4px;
}

.settings-tab {
    flex: 1;
    padding: 6px 12px;
    height: 32px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    font-family: 'GHLFont', 'Courier New', monospace;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

.settings-tab.selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* ---- Tab content ---- */
.settings-tab-content.hidden {
    display: none;
}

/* ---- Theme circles ---- */
.settings-theme-circles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--md-sys-spacing-2);
}

.settings-theme-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.settings-theme-circle:hover {
    transform: scale(1.15);
}

.settings-theme-circle.selected {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-high),
                0 0 0 4px var(--md-sys-color-primary);
}

.settings-theme-label {
    margin-top: 14px;
}

/* Responsive: mobile */
@media (max-width: 480px) {
    .settings-dropdown {
        width: calc(100vw - 16px);
        right: 8px;
    }

    .settings-dropdown-content {
        padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    }

    .settings-control-header label {
        font-size: var(--md-sys-typescale-body-small-size);
    }
}

/* ============================================ */
/* MATERIAL NAVIGATION DRAWER (Modal)           */
/* ============================================ */

.side-panel {
    position: fixed;
    top: 0;
    left: -360px;
    width: 360px;
    height: 100vh;
    height: 100dvh;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-1-shadow);
    z-index: 300;
    transition: left var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate);
    overflow-y: auto;
    overflow-x: hidden;
}

.side-panel.open {
    left: 0;
}

/* Material scrollbar para side panel */
.side-panel::-webkit-scrollbar {
    width: 8px;
}

.side-panel::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--md-sys-shape-corner-full);
}

.side-panel::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
}

.side-panel::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary);
}

/* Surface tint overlay */
.side-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-1-overlay);
    pointer-events: none;
    z-index: -1;
}

/* Header */
.side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-6);
    position: sticky;
    top: 0;
    background: var(--md-sys-color-surface-container-low);
    z-index: 10;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.side-panel-header h3 {
    margin: 0;
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0;
}

/* Close button - Icon Button */
.side-panel-close {
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    width: 40px;
    height: 40px;
    color: var(--md-sys-color-on-surface);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

.side-panel-close::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.side-panel-close:hover::before {
    opacity: 0.08;
}

.side-panel-close:active::before {
    opacity: 0.12;
}

/* Content */
.side-panel-content {
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-6);
    min-height: calc(100vh - 80px);
}

.side-section {
    margin-bottom: var(--md-sys-spacing-6);
}

/* Section headings - Label Small */
.side-section h4 {
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--md-sys-spacing-3) 0;
}

/* File controls card */
.side-section .file-controls {
    background: var(--md-sys-color-surface-container-highest);
    padding: var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-corner-large);
    margin-bottom: var(--md-sys-spacing-3);
    position: relative;
}

/* Surface tint */
.side-section .file-controls::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-0-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.side-section .file-controls input[type='file'] {
    display: none;
}

/* Filled Button - Primary action */
.side-section .file-controls label {
    display: block;
    padding: 10px 24px;
    height: 40px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    text-align: center;
    line-height: 20px;
    position: relative;
    z-index: 1;
    border: none;
    transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    box-shadow: var(--md-sys-elevation-1-shadow);
}

/* State layer */
.side-section .file-controls label::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-primary);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.side-section .file-controls label:hover {
    box-shadow: var(--md-sys-elevation-2-shadow);
}

.side-section .file-controls label:hover::before {
    opacity: 0.08;
}

.side-section .file-controls label:active::before {
    opacity: 0.12;
}

/* Status text - Body Small */
#loadingStatus,
#audioStatus,
#midiInfo {
    font-size: var(--md-sys-typescale-body-small-size);
    font-weight: var(--md-sys-typescale-body-small-weight);
    line-height: var(--md-sys-typescale-body-small-line-height);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: var(--md-sys-spacing-2);
}

/* Info row - List item style */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-medium);
    margin-bottom: var(--md-sys-spacing-2);
    position: relative;
}

.info-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-0-overlay);
    pointer-events: none;
    border-radius: inherit;
}

.info-label {
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    position: relative;
    z-index: 1;
}

.info-value {
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-primary);
    font-weight: 500;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
}

/* Scrim backdrop */
.side-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-medium2) ease;
}

.side-panel-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================ */
/* SCORING OVERLAY - GHL Style                  */
/* ============================================ */

/* Animación de aparición */
@keyframes fadeInUI {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 2. Modificamos la clase del overlay */
.scoring-overlay {
    /* Posición inicial - será sobrescrita por JavaScript */
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    background: transparent;
    padding: 0;
    z-index: 150;
    pointer-events: none;
    display: block !important;
    opacity: 0;
    
    /* Funcionamiento:
       0.5s -> Duración de la aparición (fade in)
       ease-out -> Suavizado
       1.5s -> RETRASO (Delay): Espera 1.5s antes de empezar
       forwards -> Se queda visible (opacity 1) al terminar
    */
    animation: fadeInUI 0.5s ease-out 1.5s forwards;
}

/* GHL Layout - posiciones fijas */
.scoring-ghl {
    position: relative;
    width: fit-content;
    height: fit-content;
}

/* Circulo del Multiplicador - posición fija */
.multiplier-circle-container {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.multiplier-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.multiplier-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 6;
}

.multiplier-progress {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 6;
    stroke-dasharray: 282.7433;
    stroke-dashoffset: 282.7433;
    transition: none !important;
}

.multiplier-separator {
    stroke: rgba(150, 150, 150, 1.0);
    stroke-width: 5;
    stroke-linecap: square;
}

.multiplier-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1.0);
}

/* Estrellas - posición fija */
.stars-container {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 10px;
    margin-top: 18px;
    display: flex;
    flex-direction: row;
    gap: 2px;
}

/* Color: estrellas inactivas */
.star {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: background 0.2s ease;
}

/* Color: estrellas activas */
.star.active {
    background: rgba(68, 255, 253, 1.0);
}

/* Score Display - ancho fijo para evitar movimiento */
.score-display {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

.score-value {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 1.0);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Multiplier at max - solo cambio de color, sin glow */
.multiplier-circle-container.max-multiplier .multiplier-progress {
    stroke: #00FF88;
}

.multiplier-circle-container.max-multiplier .multiplier-text {
    color: #00FF88;
}

/* ============================================ */
/* BOTTOM PANEL - Playback Controls             */
/* ============================================ */

.bottom-panel {
    position: absolute;
    bottom: 88px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md-sys-spacing-3);
}

.playback-controls {
    background: var(--md-sys-color-surface-container-high);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-corner-full);
    display: flex;
    gap: var(--md-sys-spacing-2);
    align-items: center;
    justify-content: center;
    box-shadow: var(--md-sys-elevation-3-shadow);
    flex-wrap: wrap;
    position: relative;
}

/* Surface tint */
.playback-controls::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-3-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Material Tonal Button (Secondary actions) */
.playback-controls button {
    padding: 10px 24px;
    height: 40px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    font-family: 'GHLFont', 'Courier New', monospace;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.playback-controls button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-secondary-container);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.playback-controls button:hover::before {
    opacity: 0.08;
}

.playback-controls button:active::before {
    opacity: 0.12;
}

/* Material Filled Button (Primary) */
.playback-controls button:first-child {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-1-shadow);
}

.playback-controls button:first-child::before {
    background: var(--md-sys-color-on-primary);
}

.playback-controls button:first-child:hover {
    box-shadow: var(--md-sys-elevation-2-shadow);
}

/* Toggle button (active state with tertiary color) */
.playback-controls button.toggle-button {
    background: var(--md-sys-color-secondary-container);
}

.playback-controls button.toggle-button.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.playback-controls button.toggle-button.active::before {
    background: var(--md-sys-color-on-primary);
}

/* Separator */
.playback-controls .separator {
    width: 1px;
    height: 24px;
    background: var(--md-sys-color-outline-variant);
    margin: 0 var(--md-sys-spacing-1);
    position: relative;
    z-index: 1;
}

.config-hidden {
    display: none;
}

/* ============================================ */
/* TIME DISPLAY - Surface Container             */
/* ============================================ */

.time-display {
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-high);
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    box-shadow: var(--md-sys-elevation-1-shadow);
    letter-spacing: 0.4px;
    z-index: 100;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    position: relative;
}

.time-display::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-1-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: -1;
}

/* ============================================ */
/* MATERIAL SLIDER - Seek Bar                   */
/* ============================================ */

#seekBar {
    position: absolute;
    bottom: var(--md-sys-spacing-4);
    bottom: calc(var(--md-sys-spacing-4) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    max-width: 1000px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
}

#seekBarProgress {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: visible;
}

#seekBarFill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-full);
    width: 0%;
    transition: width 0.05s linear;
}

#seekBarHandle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--md-sys-color-primary);
    border-radius: 50%;
    box-shadow: var(--md-sys-elevation-1-shadow);
    left: 0%;
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#seekBar:hover #seekBarHandle {
    width: 24px;
    height: 24px;
    box-shadow: var(--md-sys-elevation-2-shadow);
}

#seekBar:hover #seekBarProgress {
    height: 6px;
}

/* ============================================ */
/* CREDITS INFO                                 */
/* ============================================ */

.info {
    position: absolute;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    left: max(12px, env(safe-area-inset-left));
    font-size: var(--md-sys-typescale-label-small-size);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    z-index: 99;
}

/* ============================================ */
/* VOLUME DROPDOWN - Material Bottom Sheet      */
/* ============================================ */

.volume-dropdown {
    position: fixed;
    bottom: 155px;
    bottom: calc(155px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 90%;
    max-width: 520px;
    max-height: 60vh;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-3-shadow);
    z-index: 180;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
                transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
    overflow: hidden;
}

.volume-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Surface tint */
.volume-dropdown::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-3-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: -1;
}

.volume-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-6);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    position: relative;
    z-index: 1;
}

.volume-dropdown-title {
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0;
}

.volume-dropdown-close {
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    width: 40px;
    height: 40px;
    color: var(--md-sys-color-on-surface);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

.volume-dropdown-close::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.volume-dropdown-close:hover::before {
    opacity: 0.08;
}

.volume-dropdown-close:active::before {
    opacity: 0.12;
}

.volume-dropdown-content {
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-6);
    max-height: calc(60vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

/* Material scrollbar */
.volume-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
.volume-dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.volume-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--md-sys-shape-corner-full);
}

.volume-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

.volume-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary);
}

/* ============================================ */
/* STEM CONTROLS - Sliders                      */
/* ============================================ */

.stem-control {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-medium);
    margin-bottom: var(--md-sys-spacing-3);
    position: relative;
}

.stem-control::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-0-overlay);
    pointer-events: none;
    border-radius: inherit;
}

.stem-control:hover {
    background: var(--md-sys-color-surface-container-high);
}

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

.stem-name {
    flex: 0 0 100px;
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.stem-slider-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Material Slider */
.stem-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    outline: none;
    position: relative;
    cursor: pointer;
}

.stem-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.stem-slider::-webkit-slider-thumb:hover {
    width: 24px;
    height: 24px;
}

.stem-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.stem-slider::-moz-range-thumb:hover {
    width: 24px;
    height: 24px;
}

.stem-volume-value {
    flex: 0 0 48px;
    font-size: var(--md-sys-typescale-label-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    text-align: right;
    font-weight: 500;
}

/* Icon Button for mute */
.stem-mute-btn {
    flex: 0 0 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.stem-mute-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.stem-mute-btn:hover::before {
    opacity: 0.08;
}

.stem-mute-btn:active::before {
    opacity: 0.12;
}

/* Muted state - Error color */
.stem-mute-btn.muted {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.stem-mute-btn.muted::before {
    background: var(--md-sys-color-on-error-container);
}

/* Master control separator */
.stem-master-control {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: var(--md-sys-spacing-3);
    margin-top: var(--md-sys-spacing-3);
}

.stem-master-control .stem-name {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    font-size: var(--md-sys-typescale-body-large-size);
}

.stem-master-control .stem-slider::-webkit-slider-thumb {
    background: var(--md-sys-color-on-surface);
}

.stem-master-control .stem-slider::-moz-range-thumb {
    background: var(--md-sys-color-on-surface);
}

/* ============================================ */
/* RESPONSIVE - TABLET                          */
/* ============================================ */

@media (max-width: 1024px) {
    .top-bar {
        min-height: 56px;
    }

    .playback-controls button {
        padding: 8px 20px;
        font-size: var(--md-sys-typescale-label-medium-size);
    }

    .playback-controls .separator {
        height: 22px;
    }

    .volume-dropdown {
        max-width: 480px;
    }

    .side-panel {
        width: 320px;
        left: -320px;
    }
}

/* ============================================ */
/* RESPONSIVE - MOBILE                          */
/* ============================================ */

@media (max-width: 768px) {
    .top-bar {
        min-height: 56px;
        padding: var(--md-sys-spacing-1) var(--md-sys-spacing-3);
        padding-top: max(var(--md-sys-spacing-1), env(safe-area-inset-top) + var(--md-sys-spacing-1));
        padding-left: max(var(--md-sys-spacing-3), env(safe-area-inset-left) + var(--md-sys-spacing-3));
        padding-right: max(var(--md-sys-spacing-3), env(safe-area-inset-right) + var(--md-sys-spacing-3));
    }

    .top-bar-title {
        font-size: var(--md-sys-typescale-title-small-size);
    }

    .hamburger-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .side-panel {
        width: 320px;
        left: -320px;
    }

    /* Scoring overlay position is controlled by JavaScript */

    .scoring-compact {
        font-size: var(--md-sys-typescale-body-large-size);
        gap: var(--md-sys-spacing-2);
    }

    .scoring-compact span {
        font-size: var(--md-sys-typescale-title-medium-size);
    }

    .bottom-panel {
        bottom: 68px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        width: 94vw;
        gap: var(--md-sys-spacing-2);
    }

    .playback-controls {
        padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
        gap: var(--md-sys-spacing-1);
        max-width: 100%;
    }

    .playback-controls button {
        padding: 8px 16px;
        font-size: var(--md-sys-typescale-label-medium-size);
    }

    .playback-controls .separator {
        height: 20px;
    }

    #seekBar {
        width: 92%;
    }

    .info {
        display: none;
    }

    .volume-dropdown {
        width: 94vw;
        max-width: 400px;
        bottom: 180px;
        bottom: calc(180px + env(safe-area-inset-bottom));
    }

    .volume-dropdown-content {
        padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    }

    .stem-control {
        padding: var(--md-sys-spacing-3) var(--md-sys-spacing-2);
    }

    .stem-name {
        flex: 0 0 90px;
        font-size: var(--md-sys-typescale-body-small-size);
    }

    .stem-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .stem-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    .stem-volume-value {
        flex: 0 0 10px;
        font-size: var(--md-sys-typescale-label-small-size);
    }

    .stem-mute-btn {
        flex: 0 0 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ============================================ */
/* RESPONSIVE - SMALL MOBILE                    */
/* ============================================ */

@media (max-width: 480px) {
    .top-bar {
        min-height: 56px;
        padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
        padding-top: max(var(--md-sys-spacing-1), env(safe-area-inset-top) + var(--md-sys-spacing-1));
        padding-left: max(var(--md-sys-spacing-2), env(safe-area-inset-left) + var(--md-sys-spacing-2));
        padding-right: max(var(--md-sys-spacing-2), env(safe-area-inset-right) + var(--md-sys-spacing-2));
    }

    .top-bar-title {
        font-size: var(--md-sys-typescale-body-large-size);
    }

    .hamburger-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .side-panel {
        width: 90vw;
        max-width: 320px;
        left: -90vw;
    }

    /* Scoring overlay position is controlled by JavaScript */

    .scoring-compact {
        font-size: var(--md-sys-typescale-body-medium-size);
        gap: var(--md-sys-spacing-2);
    }

    .scoring-compact span {
        font-size: var(--md-sys-typescale-body-large-size);
    }

    .volume-dropdown {
        width: 96vw;
    }

    .bottom-panel {
        bottom: 60px;
        bottom: calc(60px + env(safe-area-inset-bottom));
        gap: var(--md-sys-spacing-2);
        width: 96vw;
    }

    .playback-controls {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: var(--md-sys-shape-corner-extra-large);
        padding: var(--md-sys-spacing-3);
        gap: var(--md-sys-spacing-2);
    }

    .playback-controls button {
        flex-grow: 1;
        font-size: var(--md-sys-typescale-label-small-size);
        flex-basis: 0;
        padding: 8px 12px;
    }

    .playback-controls .separator {
        flex-basis: 100%;
        height: 0;
        margin: 0;
        padding: 0;
        width: 0;
    }

    #seekBar {
        width: 94%;
        height: 40px;
    }

    #seekBarProgress {
        height: 4px;
    }

    #seekBarHandle {
        width: 18px;
        height: 18px;
    }

    #seekBar:hover #seekBarHandle {
        width: 22px;
        height: 22px;
    }

    #seekBar:hover #seekBarProgress {
        height: 6px;
    }
}

/* ============================================ */
/* LANDSCAPE - GENERAL                          */
/* ============================================ */

@media (orientation: landscape) and (max-width: 1024px) {
    .playback-controls {
        flex-wrap: nowrap !important;
    }

    .playback-controls button {
        flex-grow: 0;
        flex-basis: auto;
        white-space: nowrap;
    }

    .playback-controls .separator {
        flex-basis: auto;
        width: 1px;
        height: 20px;
        display: block;
    }
}

/* ============================================ */
/* LANDSCAPE - LOW HEIGHT                       */
/* ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    .top-bar {
        min-height: 48px;
        padding: var(--md-sys-spacing-1) var(--md-sys-spacing-3);
        padding-top: max(var(--md-sys-spacing-1), env(safe-area-inset-top) + var(--md-sys-spacing-1));
        padding-left: max(var(--md-sys-spacing-3), env(safe-area-inset-left) + var(--md-sys-spacing-3));
        padding-right: max(var(--md-sys-spacing-3), env(safe-area-inset-right) + var(--md-sys-spacing-3));
    }

    .top-bar-title {
        font-size: var(--md-sys-typescale-body-medium-size);
    }

    .hamburger-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Scoring overlay position is controlled by JavaScript */

    .scoring-compact {
        font-size: var(--md-sys-typescale-body-medium-size);
        gap: var(--md-sys-spacing-2);
    }

    .bottom-panel {
        bottom: 52px;
        bottom: calc(52px + env(safe-area-inset-bottom));
        gap: var(--md-sys-spacing-2);
    }

    .playback-controls {
        padding: var(--md-sys-spacing-1) var(--md-sys-spacing-3);
        flex-wrap: nowrap !important;
        gap: var(--md-sys-spacing-1);
    }

    .playback-controls button {
        padding: 6px 16px;
        font-size: var(--md-sys-typescale-label-small-size);
        flex-grow: 0;
        flex-basis: auto;
        white-space: nowrap;
    }

    .playback-controls .separator {
        flex-basis: auto;
        width: 1px;
        height: 20px;
        margin: 0 var(--md-sys-spacing-1);
    }

    .volume-dropdown {
        max-height: 50vh;
        bottom: 106px;
        bottom: calc(106px + env(safe-area-inset-bottom));
        max-width: 450px;
        z-index: 350;
    }

    .volume-dropdown-content {
        max-height: calc(50vh - 72px);
        padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    }

    .stem-control {
        padding: var(--md-sys-spacing-2) var(--md-sys-spacing-2);
        margin-bottom: var(--md-sys-spacing-1);
    }

    .stem-name {
        flex: 0 0 70px;
        font-size: var(--md-sys-typescale-label-small-size);
    }

    .stem-slider-container {
        gap: var(--md-sys-spacing-2);
    }

    .stem-slider {
        height: 4px;
    }

    .stem-slider::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    .stem-slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }

    .stem-volume-value {
        flex: 0 0 36px;
        font-size: var(--md-sys-typescale-label-small-size);
    }

    .stem-mute-btn {
        flex: 0 0 32px;
        height: 32px;
        font-size: 14px;
    }

    .volume-dropdown-header {
        padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    }

    .volume-dropdown-title {
        font-size: var(--md-sys-typescale-title-medium-size);
    }

    .volume-dropdown-close {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ============================================ */
/* ANIMATIONS                                   */
/* ============================================ */

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

#loadingStatus:not(:empty),
#audioStatus:not(:empty) {
    animation: pulse 2s ease-in-out infinite;
}

/* Disabled states */
.playback-controls button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.playback-controls button:disabled::before {
    display: none;
}

/* ============================================ */
/* CALIBRATION CONTROLS - Material Design       */
/* ============================================ */

.calibration-control {
    background: var(--md-sys-color-surface-container-highest);
    padding: var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-corner-large);
    margin-bottom: var(--md-sys-spacing-4);
    position: relative;
}

.calibration-control::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-elevation-0-overlay);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.calibration-label {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-1);
    margin-bottom: var(--md-sys-spacing-3);
    position: relative;
    z-index: 1;
}

.calibration-title {
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    line-height: var(--md-sys-typescale-body-large-line-height);
}

.calibration-desc {
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: var(--md-sys-typescale-body-small-line-height);
}

.calibration-slider-container {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    margin-bottom: var(--md-sys-spacing-2);
    position: relative;
    z-index: 1;
}

.calibration-min,
.calibration-max {
    font-size: var(--md-sys-typescale-label-small-size);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    min-width: 55px;
    flex-shrink: 0;
}

.calibration-min {
    text-align: right;
    padding-right: var(--md-sys-spacing-1);
}

.calibration-max {
    text-align: left;
    padding-left: var(--md-sys-spacing-1);
}

.calibration-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    outline: none;
    cursor: pointer;
    position: relative;
}

.calibration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.calibration-slider::-webkit-slider-thumb:hover {
    width: 24px;
    height: 24px;
    box-shadow: var(--md-sys-elevation-2-shadow);
}

.calibration-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--md-sys-elevation-1-shadow);
    transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.calibration-slider::-moz-range-thumb:hover {
    width: 24px;
    height: 24px;
    box-shadow: var(--md-sys-elevation-2-shadow);
}

.calibration-value-display {
    text-align: center;
    margin-bottom: var(--md-sys-spacing-2);
    position: relative;
    z-index: 1;
}

.calibration-value-display span {
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
}

.calibration-value-display strong {
    color: var(--md-sys-color-primary);
    font-weight: 700;
    font-size: var(--md-sys-typescale-title-medium-size);
}

.calibration-hint {
    font-size: var(--md-sys-typescale-label-small-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
    font-style: italic;
    padding: var(--md-sys-spacing-2);
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-small);
    border-left: 3px solid var(--md-sys-color-primary);
    position: relative;
    z-index: 1;
}

.calibration-reset-container {
    margin-top: var(--md-sys-spacing-4);
    position: relative;
    z-index: 1;
}

.calibration-reset-btn {
    display: block;
    width: 100%;
    padding: 10px 24px;
    min-height: 40px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    font-family: 'GHLFont', 'Courier New', monospace;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    position: relative;
    transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.calibration-reset-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-secondary-container);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.calibration-reset-btn:hover::before {
    opacity: 0.08;
}

.calibration-reset-btn:active::before {
    opacity: 0.12;
}

/* Responsive para calibración */
@media (max-width: 768px) {
    .calibration-control {
        padding: var(--md-sys-spacing-3);
    }

    .calibration-title {
        font-size: var(--md-sys-typescale-body-medium-size);
    }

    .calibration-desc {
        font-size: var(--md-sys-typescale-label-small-size);
    }

    .calibration-min,
    .calibration-max {
        font-size: 10px;
        min-width: 48px;
    }

    .calibration-reset-btn {
        font-size: var(--md-sys-typescale-label-medium-size);
        padding: 8px 16px;
    }

    .calibration-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .calibration-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* ============================================ */
/* PREVENT ZOOM ON INPUTS (iOS)                 */
/* ============================================ */

input,
textarea,
select {
    font-size: 16px !important;
}

/* ======================================================= */
/* LÓGICA DE COLOR MULTIPLICADOR (TODOS LOS NIVELES)       */
/* ======================================================= */

/* 1. Estado Base (0% - 49%): Todo CIAN */
.multiplier-circle-container .multiplier-progress {
    stroke: rgba(68, 255, 253, 1.0) !important; /* Cian Puro */
    transition: none !important;
}

.multiplier-circle-container .multiplier-text {
    color: rgba(68, 255, 253, 1.0) !important; /* Cian Puro */
    transition: none !important;
}

/* 2. Fase Blanca (>50%): Todo BLANCO */
.multiplier-circle-container.phase-white .multiplier-progress {
    stroke: rgba(255, 255, 255, 1.0) !important;
    filter: none !important;
}

/* .multiplier-circle-container.phase-white .multiplier-text {
    color: rgba(255, 255, 255, 1.0) !important;
    text-shadow: none !important;
} */

/* ======================================================= */
/* ANIMACIÓN DE ERROR (ROJO + PARPADEO FADE SUAVE)         */
/* ======================================================= */

@keyframes blink-fade-red {
    0% { opacity: 1; }
    50% { opacity: 0; } /* Baja suavemente a invisible */
    100% { opacity: 1; } /* Sube suavemente a visible */
}

.multiplier-circle-container.combo-loss .multiplier-text {
    /* Color ROJO */
    color: rgba(255, 90, 90, 1.0) !important;
    text-shadow: none !important;
    filter: none !important;
    
    /* Eliminar transiciones de color heredadas */
    transition: none !important;
    
    /* 4. ANIMACIÓN FADE: Usamos 'ease-in-out' para suavidad */
    /* 0.2s es una velocidad buena para notar el fade sin ser lenta */
    animation: blink-fade-red 0.15s ease-in-out infinite;
}