/* ==========================================================================
   Theme tokens
   Light = pop / candy (navy outlines, hard offset shadows, bright pastels)
   Dark  = drum-machine cabinet (black + chrome, red judge line, neon chips)

   Judgment colors are kept far apart in hue AND shape so they never blur together:
     PERFECT gold   – big, pops
     GOOD    green  – big, pops
     MISS    red    – big, shakes
     EXTRA   violet – small outlined badge, floats up (a different shape from MISS)
   ========================================================================== */

:root {
    /* Light: rounded pop lettering; dark switches back to the sharper Outfit */
    --font: 'M PLUS Rounded 1c', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Page and surfaces */
    --page-bg: #fff1bf;
    --page-dot-1: #ffc4dc;
    --page-dot-2: #b5e3ff;
    --app-bg: #fffaf0;
    --app-ray: #fff0c9;
    --game-bg: #fff6df;
    --panel: #ffffff;
    --field: #fff4d6;
    --line: #2d2a6e;
    --line-w: 3px;
    --text: #2d2a6e;
    --text-dim: #5f5d92;
    --radius: 18px;
    --radius-sm: 12px;
    --pop-shadow: 4px 4px 0 var(--line);

    /* Brand */
    --brand: #ff4f9a;
    --brand-2: #ff7eb6;
    --on-brand: #ffffff;
    --accent: #0f78cc;
    --accent-2: #ffd21f;

    /* Lanes and notes */
    --lane-left-bg: #e6f4ff;
    --lane-right-bg: #ffecf4;
    --lane-grid: rgba(45, 42, 110, 0.07);
    --lane-pad: rgba(45, 42, 110, 0.06);
    --note-left: #2fa8ff;
    --note-left-hi: #a9dcff;
    --note-right: #ff5ca8;
    --note-right-hi: #ffc0dc;
    --judge: #ffd21f;
    --beam-left: rgba(47, 168, 255, 0.45);
    --beam-right: rgba(255, 92, 168, 0.45);

    /* Judgments: -ink is the readable text shade for small labels on light surfaces */
    --j-perfect: #ffb300;
    --j-perfect-ink: #9a5b00;
    --j-good: #1fbf5f;
    --j-good-ink: #11743a;
    --j-miss: #f0283c;
    --j-miss-ink: #c3121f;
    --j-extra: #8a4dff;
    --j-extra-ink: #6a2fe0;
    --extra-badge-bg: #ffffff;
    /* Smooth 16-direction outlines for chunky pop lettering */
    --outline-3:
        3px 0 0 var(--line), 2.8px 1.1px 0 var(--line), 2.1px 2.1px 0 var(--line), 1.1px 2.8px 0 var(--line),
        0 3px 0 var(--line), -1.1px 2.8px 0 var(--line), -2.1px 2.1px 0 var(--line), -2.8px 1.1px 0 var(--line),
        -3px 0 0 var(--line), -2.8px -1.1px 0 var(--line), -2.1px -2.1px 0 var(--line), -1.1px -2.8px 0 var(--line),
        0 -3px 0 var(--line), 1.1px -2.8px 0 var(--line), 2.1px -2.1px 0 var(--line), 2.8px -1.1px 0 var(--line),
        5px 6px 0 var(--line);
    --outline-4:
        4px 0 0 var(--line), 3.7px 1.5px 0 var(--line), 2.8px 2.8px 0 var(--line), 1.5px 3.7px 0 var(--line),
        0 4px 0 var(--line), -1.5px 3.7px 0 var(--line), -2.8px 2.8px 0 var(--line), -3.7px 1.5px 0 var(--line),
        -4px 0 0 var(--line), -3.7px -1.5px 0 var(--line), -2.8px -2.8px 0 var(--line), -1.5px -3.7px 0 var(--line),
        0 -4px 0 var(--line), 1.5px -3.7px 0 var(--line), 2.8px -2.8px 0 var(--line), 3.7px -1.5px 0 var(--line),
        6px 8px 0 var(--line);
    --fb-shadow: var(--outline-3);

    /* Gauge */
    --gauge-track: #efe9ff;
    --gauge-low: #2fa8ff;
    --gauge-clear: linear-gradient(90deg, #ffd21f, #ff4f9a);

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232d2a6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root.dark-mode {
    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --page-bg: #030406;
    --app-bg: #0a0b11;
    --game-bg: #06070b;
    --panel: #12141d;
    --field: #1b1e2b;
    --line: #353b52;
    --line-w: 1px;
    --text: #eef1f8;
    --text-dim: #9aa2bb;
    --radius: 6px;
    --radius-sm: 4px;
    --pop-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    --brand: #ff2e3a;
    --brand-2: #ff8a1f;
    --on-brand: #ffffff;
    --accent: #29d3ff;
    --accent-2: #ff8a1f;

    --lane-left-bg: linear-gradient(to bottom, #07090e, #0a1a22);
    --lane-right-bg: linear-gradient(to bottom, #07090e, #1f140a);
    --lane-grid: rgba(255, 255, 255, 0.05);
    --lane-pad: rgba(255, 46, 58, 0.07);
    --note-left: #1fcfff;
    --note-left-hi: #c4f4ff;
    --note-right: #ff9a1f;
    --note-right-hi: #ffe3b0;
    --judge: #ff2e3a;
    --beam-left: rgba(31, 207, 255, 0.4);
    --beam-right: rgba(255, 154, 31, 0.4);

    --j-perfect: #ffe14a;
    --j-perfect-ink: #ffe14a;
    --j-good: #43f58a;
    --j-good-ink: #43f58a;
    --j-miss: #ff3346;
    --j-miss-ink: #ff5a69;
    --j-extra: #c08bff;
    --j-extra-ink: #c9a0ff;
    --extra-badge-bg: rgba(192, 139, 255, 0.14);
    --fb-shadow: 0 0 12px currentColor, 0 2px 0 rgba(0, 0, 0, 0.9);

    --gauge-track: #1b1e2b;
    --gauge-low: #29d3ff;
    --gauge-clear: linear-gradient(90deg, #ff8a1f, #ff2e3a);

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa2bb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body {
    font-family: var(--font);
    background-color: var(--page-bg);
    /* Polka dots (light) */
    background-image:
        radial-gradient(var(--page-dot-1) 7px, transparent 8px),
        radial-gradient(var(--page-dot-2) 7px, transparent 8px);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark: brushed-metal stripes with a red stage glow */
.dark-mode body {
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(255, 46, 58, 0.18), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 12px);
    background-size: auto;
    background-position: 0 0;
}

#app {
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    /* Sunburst rays behind the menus (light) */
    background:
        repeating-conic-gradient(from 0deg at 50% 12%, var(--app-ray) 0deg 9deg, var(--app-bg) 9deg 18deg);
    border-left: var(--line-w) solid var(--line);
    border-right: var(--line-w) solid var(--line);
    position: relative;
    overflow: hidden;
}

.dark-mode #app {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 46, 58, 0.22), transparent 55%),
        linear-gradient(180deg, #10121b, var(--app-bg));
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

@media (max-width: 600px) {
    #app {
        border-left: none;
        border-right: none;
    }
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.screen.active {
    display: flex;
}

/* Scroll when the screen is too short; auto margins keep it centered
   without pushing the top out of reach like justify-content: center does */
#start-screen {
    justify-content: flex-start;
    overflow-y: auto;
}

#start-screen > :first-child {
    margin-top: auto;
}

#start-screen > :last-child {
    margin-bottom: auto;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    line-height: 1;
    font-weight: 900;
    text-align: center;
}

.logo-sub,
.logo-tag {
    font-size: 1rem;
    letter-spacing: 0.35em;
    padding: 0.3em 0.9em 0.3em 1.25em;
    border: var(--line-w) solid var(--line);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--line);
}

.logo-sub {
    background: var(--accent-2);
    color: var(--line);
    transform: rotate(-4deg);
}

.logo-tag {
    background: var(--accent);
    color: #ffffff;
    transform: rotate(3deg);
}

.logo-main {
    font-size: 3.6rem;
    letter-spacing: 0.02em;
    margin: 0.15em 0 0.2em;
    color: var(--brand);
    text-shadow: var(--outline-3);
}

/* Dark: chrome lettering, red cut-in tag */
.dark-mode .logo-sub,
.dark-mode .logo-tag {
    border: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
}

.dark-mode .logo-sub {
    background: none;
    color: var(--text-dim);
    letter-spacing: 0.8em;
    padding-left: 0.8em;
}

.dark-mode .logo-main {
    font-style: italic;
    font-size: 3.8rem;
    background: linear-gradient(180deg, #ffffff 0%, #d5dae8 45%, #6b7390 52%, #c9cfdf 75%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 14px rgba(255, 46, 58, 0.55));
}

.dark-mode .logo-tag {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color: #ffffff;
    font-style: italic;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    padding: 0.35em 1.6em 0.35em 2em;
}

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

.btn-primary,
.btn-secondary {
    font-family: inherit;
    padding: 0.9rem 2.6rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    margin: 0.5rem;
    border: var(--line-w) solid var(--line);
    border-radius: 999px;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.btn-primary {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 5px 0 var(--line), inset 0 4px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 2px 0 rgba(45, 42, 110, 0.35);
}

.btn-secondary {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 4px 0 var(--line);
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

.btn-primary:hover {
    box-shadow: 0 7px 0 var(--line), inset 0 4px 0 rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    background: var(--accent-2);
    box-shadow: 0 6px 0 var(--line);
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--line);
}

/* Dark: angled cabinet buttons */
.dark-mode .btn-primary,
.dark-mode .btn-secondary {
    border-radius: 0;
    font-style: italic;
    text-transform: uppercase;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    padding-left: 2.8rem;
    padding-right: 2.8rem;
}

.dark-mode .btn-primary {
    border: none;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dark-mode .btn-primary:hover {
    box-shadow: none;
    filter: brightness(1.15);
}

.dark-mode .btn-secondary {
    border: none;
    background: linear-gradient(180deg, #2a2f42, #171a26);
    color: var(--text);
    box-shadow: none;
}

.dark-mode .btn-secondary:hover {
    background: linear-gradient(180deg, #3a4058, #20243a);
    color: #ffffff;
    box-shadow: none;
}

.dark-mode .btn-primary:focus-visible,
.dark-mode .btn-secondary:focus-visible {
    /* clip-path would cut off an outline */
    outline: none;
    box-shadow: inset 0 0 0 3px var(--accent);
}

.dark-mode .btn-primary:active,
.dark-mode .btn-secondary:active {
    transform: translateY(1px);
    box-shadow: none;
    filter: brightness(0.9);
}

/* ==========================================================================
   Start screen: settings panel
   ========================================================================== */

.settings {
    width: 100%;
    max-width: 440px;
    background: var(--panel);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    border: var(--line-w) solid var(--line);
    box-shadow: var(--pop-shadow);
    margin-bottom: 1.5rem;
}

.dark-mode .settings {
    background: linear-gradient(180deg, #181b27, var(--panel));
    border-top: 2px solid var(--brand);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.4rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 2px dotted rgba(45, 42, 110, 0.15);
}

.dark-mode .setting-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.setting-item:last-child {
    border-bottom: none;
}

#bpm-value,
#offset-value {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.dark-mode #bpm-value,
.dark-mode #offset-value {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(41, 211, 255, 0.5);
}

select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 9.5rem;
    padding: 0.5rem 2.2rem 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--field) var(--select-arrow) no-repeat right 0.85rem center;
    color: var(--text);
    border: var(--line-w) solid var(--line);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.dark-mode select {
    border-radius: var(--radius-sm);
}

select option {
    background: var(--panel);
    color: var(--text);
}

/* BPM slider with -/+ buttons */
.bpm-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 60%;
}

.bpm-control input[type="range"] {
    flex: 1;
    width: auto;
    min-width: 0;
}

.bpm-step {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: var(--line-w) solid var(--line);
    background: var(--field);
    color: var(--text);
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 0 var(--line);
}

.bpm-step:active {
    transform: translateY(2px);
    box-shadow: none;
}

.dark-mode .bpm-step {
    border-radius: 2px;
    background: #0a0c12;
    color: var(--accent);
    border: 1px solid var(--line);
    box-shadow: none;
}

/* Range slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 50%;
    height: 28px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: var(--field);
    box-shadow: inset 0 0 0 2px var(--line);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid var(--line);
    box-shadow: 0 2px 0 var(--line);
}

input[type="range"]::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: var(--field);
    box-shadow: inset 0 0 0 2px var(--line);
}

input[type="range"]::-moz-range-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--brand-2);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid var(--line);
}

.dark-mode input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #0a0c12;
    box-shadow: inset 0 0 0 1px var(--line);
}

.dark-mode input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 22px;
    margin-top: -8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffffff, #aab2c8);
    border: none;
    box-shadow: 0 0 8px rgba(255, 46, 58, 0.8);
}

.dark-mode input[type="range"]::-moz-range-track {
    height: 6px;
    background: #0a0c12;
    box-shadow: inset 0 0 0 1px var(--line);
}

.dark-mode input[type="range"]::-moz-range-progress {
    height: 6px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.dark-mode input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffffff, #aab2c8);
    border: none;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--field);
    border: var(--line-w) solid var(--line);
    transition: 0.25s;
    border-radius: 999px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    border: 2px solid var(--line);
    transition: 0.25s;
    border-radius: 50%;
}

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

input:checked + .toggle-slider:before {
    transform: translate(26px, -50%);
}

input:focus-visible + .toggle-slider {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.dark-mode input:checked + .toggle-slider {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 10px rgba(255, 46, 58, 0.6);
}

/* Mode switch (Stage / Practice) */
.mode-switch {
    display: inline-flex;
    border: var(--line-w) solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--field);
}

.dark-mode .mode-switch {
    border-radius: var(--radius-sm);
}

.mode-switch label {
    position: relative;
    cursor: pointer;
}

.mode-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-switch span {
    display: block;
    padding: 0.45rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-dim);
    transition: background 0.2s, color 0.2s;
}

.mode-switch input:checked + span {
    background: var(--brand);
    color: var(--on-brand);
}

.mode-switch input:focus-visible + span {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* Only the settings of the selected mode are shown */
#start-screen:not(.practice-mode) .practice-only,
#start-screen.practice-mode .stage-only {
    display: none;
}

.practice-panel {
    border-bottom: 2px dotted rgba(45, 42, 110, 0.15);
}

.dark-mode .practice-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Per-beat grid: hand label + 4 beats; rows = beat numbers, selects, dot preview */
.practice-grid {
    display: grid;
    grid-template-columns: 1.6rem repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    align-items: center;
    padding: 0.6rem 0 0.7rem;
}

.pg-beat-num {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-dim);
}

.pg-hand {
    font-weight: 900;
    text-align: center;
}

.pg-hand.left {
    color: var(--note-left);
}

.pg-hand.right {
    color: var(--note-right);
}

.practice-grid .beat-select {
    min-width: 0;
    width: 100%;
    padding: 0.4rem 0.15rem;
    background-image: none;
    font-size: 0.8rem;
    text-align: center;
    text-align-last: center;
    border-radius: var(--radius-sm);
}

.beat-select.left {
    box-shadow: inset 0 -3px 0 var(--note-left);
}

.beat-select.right {
    box-shadow: inset 0 -3px 0 var(--note-right);
}

/* One beat of the preview: a short track with a dot at each note's position */
.pg-preview {
    position: relative;
    height: 12px;
    margin: 0 6px;
    border-left: 2px solid var(--lane-grid);
    background: linear-gradient(var(--lane-grid), var(--lane-grid)) center / 100% 2px no-repeat;
}

.pg-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pg-preview.left .pg-dot {
    background: var(--note-left);
}

.pg-preview.right .pg-dot {
    background: var(--note-right);
}

.practice-note {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dim);
}

/* No clear line in practice (it has no clear) */
#game-screen.practice-mode .gauge-mark {
    display: none;
}

.practice-warning {
    display: none;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--j-miss-ink);
}

#start-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.high-score {
    margin-top: 0.75rem;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

#all-cleared {
    color: var(--j-perfect-ink);
}

/* Best combo of the selected stage at the current BPM */
.stage-best-bpm {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.stage-best {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    text-align: right;
}

/* ==========================================================================
   Game screen: HUD
   ========================================================================== */

#game-screen {
    justify-content: flex-start;
    padding: 0;
    background: var(--game-bg);
}

.hud {
    /* Above the touch zones so the Menu button stays clickable */
    position: relative;
    z-index: 25;
    width: 100%;
    padding: 0.75rem 1rem 0.7rem;
    background: var(--panel);
    border-bottom: var(--line-w) solid var(--line);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    box-shadow: 0 4px 0 var(--line);
}

.dark-mode .hud {
    background: linear-gradient(180deg, #1a1d2a, #0d0f16);
    border-bottom: 2px solid var(--brand);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(255, 46, 58, 0.25);
}

.hud-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}

.hud-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--text-dim);
}

.hud-value {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stage-info {
    text-align: center;
    padding: 0.2rem 0.8rem;
    border: var(--line-w) solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--accent-2);
}

.stage-info .hud-label {
    color: var(--line);
}

.stage-info .hud-value {
    font-size: 1.4rem;
    color: var(--line);
}

.dark-mode .stage-info {
    background: #0a0c12;
    border-color: var(--line);
}

.dark-mode .stage-info .hud-label {
    color: var(--text-dim);
}

.dark-mode .stage-info .hud-value {
    color: var(--brand-2);
}

.score-info {
    text-align: right;
}

.score-info .hud-value {
    display: block;
    font-size: 1.8rem;
    color: var(--brand);
}

.dark-mode .score-info .hud-value {
    color: #ffffff;
    font-style: italic;
    text-shadow: 0 0 10px rgba(255, 46, 58, 0.7);
}

.btn-quit {
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    margin: 0;
}

.dark-mode .btn-quit {
    padding: 0.4rem 1.4rem;
}

.accuracy-info {
    display: grid;
    grid-template-columns: auto 1fr 3.2em;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.accuracy-info .hud-value {
    text-align: right;
    font-size: 1.05rem;
    color: var(--text);
}

.gauge {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--gauge-track);
    border: var(--line-w) solid var(--line);
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    width: 0;
    background: var(--gauge-low);
    transition: width 0.15s ease-out;
}

.gauge-fill.clear {
    background: var(--gauge-clear);
}

/* 80% clear line */
.gauge-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    width: 2px;
    background: var(--text);
}

.dark-mode .gauge {
    border-radius: 2px;
    height: 10px;
}

.dark-mode .gauge-fill {
    box-shadow: 0 0 10px currentColor;
}

.dark-mode .gauge-mark {
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff;
}

/* ==========================================================================
   Game screen: lanes
   ========================================================================== */

.rhythm-display {
    flex: 1;
    align-self: stretch;
    display: flex;
    position: relative;
    margin: 0.9rem 0.75rem 0.75rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: var(--line-w) solid var(--line);
    box-shadow: var(--pop-shadow);
}

.dark-mode .rhythm-display {
    margin: 0.5rem 0.75rem 0.75rem;
    border: 2px solid #2a2f42;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 0 1px #000;
}

.lane {
    flex: 1;
    position: relative;
    /* Darker pad below the judge line, then faint beat rows, then the lane tint */
    background:
        linear-gradient(to top, var(--lane-pad) 0 20%, transparent 20%),
        repeating-linear-gradient(to bottom, var(--lane-grid) 0 2px, transparent 2px 50px),
        var(--lane-bg);
}

.left-lane {
    --lane-bg: var(--lane-left-bg);
    --lane-color: var(--note-left);
    --beam: var(--beam-left);
}

.right-lane {
    --lane-bg: var(--lane-right-bg);
    --lane-color: var(--note-right);
    --beam: var(--beam-right);
}

.dark-mode .lane {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Key beam: lights the lane above the judge line on every hit */
.lane::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    height: 60%;
    background: linear-gradient(to top, var(--beam), transparent);
    opacity: 0;
    pointer-events: none;
}

.lane.beam::before {
    animation: beam 0.2s ease-out;
}

@keyframes beam {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.center-divider {
    width: var(--line-w);
    background: var(--line);
    height: 100%;
    z-index: 5;
}

.dark-mode .center-divider {
    width: 3px;
    background: linear-gradient(90deg, #1a1d28, #4a5170, #1a1d28);
}

.judge-line {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    height: 12px;
    /* Center the line on 80% from the top, where notes arrive at hit time */
    transform: translateY(50%);
    background-color: var(--judge);
    border-top: var(--line-w) solid var(--line);
    border-bottom: var(--line-w) solid var(--line);
    z-index: 5;
}

.dark-mode .judge-line {
    height: 5px;
    border: none;
    background: linear-gradient(90deg, rgba(255, 46, 58, 0.6), #ff6a5a 50%, rgba(255, 46, 58, 0.6));
    box-shadow: 0 0 8px var(--judge), 0 0 22px var(--judge);
}

.lane-label {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.75rem;
    white-space: nowrap;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--line);
    background: var(--lane-color);
    border: var(--line-w) solid var(--line);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--line);
    z-index: 6;
}

.dark-mode .lane-label {
    color: var(--lane-color);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid currentColor;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 8px currentColor;
}

.label-keys,
.label-touch {
    opacity: 0.85;
}

/* Touch-only devices (no hover, coarse pointer): show TAP instead of key names */
.label-touch {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .label-keys {
        display: none;
    }

    .label-touch {
        display: inline;
    }
}

/* ==========================================================================
   Notes
   ========================================================================== */

.note {
    position: absolute;
    width: 72%;
    height: 26px;
    left: 14%;
    /* Center the note on its `top`, so it sits on the judge line at hit time */
    transform: translateY(-50%);
    border-radius: 999px;
    border: 3px solid var(--line);
    box-shadow: 0 3px 0 var(--line), inset 0 5px 0 rgba(255, 255, 255, 0.55);
}

.note.left {
    background: var(--note-left);
}

.note.right {
    background: var(--note-right);
}

/* Dark: glowing drum chips */
.dark-mode .note {
    height: 16px;
    width: 80%;
    left: 10%;
    border-radius: 3px;
    border: none;
}

.dark-mode .note.left {
    background: linear-gradient(180deg, var(--note-left-hi), var(--note-left) 45%, #0a7fa8);
    box-shadow: 0 0 12px var(--note-left), 0 0 2px #ffffff;
}

.dark-mode .note.right {
    background: linear-gradient(180deg, var(--note-right-hi), var(--note-right) 45%, #b35a00);
    box-shadow: 0 0 12px var(--note-right), 0 0 2px #ffffff;
}

/* A note hit with Perfect/Good bursts and fades where it was hit */
.note.note-hit {
    animation: note-burst 0.15s ease-out forwards;
}

@keyframes note-burst {
    to {
        transform: translateY(-50%) scale(1.4, 1.8);
        opacity: 0;
    }
}

/* ==========================================================================
   Judgment feedback
   ========================================================================== */

.lane-feedback {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    text-shadow: var(--fb-shadow);
}

.dark-mode .lane-feedback {
    font-style: italic;
}

.feedback-perfect {
    color: var(--j-perfect);
    animation: pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.dark-mode .feedback-perfect {
    background: linear-gradient(180deg, #ffffff 0%, var(--j-perfect) 45%, #ff9a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 210, 60, 0.85));
}

.feedback-good {
    color: var(--j-good);
    animation: pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.feedback-miss {
    color: var(--j-miss);
    animation: shake 0.5s forwards;
}

/* EXTRA: small outlined badge that floats up, so it never reads as a MISS */
.feedback-extra {
    color: var(--j-extra-ink);
    font-size: 1rem;
    letter-spacing: 0.18em;
    padding: 0.2em 0.5em 0.2em 0.68em;
    border: 3px solid var(--j-extra);
    border-radius: 999px;
    background: var(--extra-badge-bg);
    text-shadow: none;
    box-shadow: 2px 2px 0 var(--line);
    animation: rise 0.55s ease-out forwards;
}

.dark-mode .feedback-extra {
    color: var(--j-extra-ink);
    border-width: 2px;
    border-style: dashed;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(192, 139, 255, 0.35);
    text-shadow: 0 0 6px rgba(192, 139, 255, 0.6);
}

@keyframes pop {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
    }

    25% {
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }

    45% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-6px) scale(1);
        opacity: 0;
    }
}

@keyframes shake {
    0% {
        transform: translateX(-50%) translateX(0);
        opacity: 1;
    }

    15% {
        transform: translateX(-50%) translateX(-10px) rotate(-4deg);
    }

    30% {
        transform: translateX(-50%) translateX(10px) rotate(4deg);
    }

    45% {
        transform: translateX(-50%) translateX(-5px);
    }

    60% {
        transform: translateX(-50%) translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(6px);
        opacity: 0;
    }
}

@keyframes rise {
    0% {
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
    }

    25% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-22px);
        opacity: 0;
    }
}

/* Count-in beat number (1-4) shown over both lanes before play starts */
.count-in {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
    text-shadow: var(--outline-4);
    pointer-events: none;
    z-index: 30;
}

.dark-mode .count-in {
    color: #ffffff;
    font-style: italic;
    text-shadow: 0 0 20px var(--brand), 0 0 40px var(--brand), 0 3px 0 #000;
}

.count-in-beat {
    animation: count-in-pulse 0.3s ease-out;
}

@keyframes count-in-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.4;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Combo of both hands, over the lanes (same spot as the count-in, which is gone by then) */
.combo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    pointer-events: none;
    z-index: 8;
    opacity: 0.9;
}

.combo.show {
    display: flex;
}

.combo .combo-num {
    font-size: 4rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
    text-shadow: var(--outline-4);
}

.combo-label {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    color: var(--line);
}

.dark-mode .combo .combo-num {
    color: #ffffff;
    font-style: italic;
    text-shadow: 0 0 16px var(--brand), 0 3px 0 #000;
}

.dark-mode .combo-label {
    color: var(--brand-2);
    text-shadow: 0 0 8px rgba(255, 138, 31, 0.7);
}

.combo.bump {
    animation: combo-bump 0.18s ease-out;
}

@keyframes combo-bump {
    0% {
        transform: translate(-50%, -50%) scale(1.15);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Per-hand combo, in the pad under the judge line */
.lane-combo {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    pointer-events: none;
    z-index: 6;
}

.lane-combo.show {
    display: block;
}

.lane-combo .combo-num {
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--text);
}

.dark-mode .lane-combo .combo-num {
    color: var(--lane-color);
    text-shadow: 0 0 8px currentColor;
}

.lane-combo.bump {
    animation: lane-combo-bump 0.18s ease-out;
}

@keyframes lane-combo-bump {
    0% {
        transform: translateX(-50%) scale(1.2);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* Practice: rhythm picker under the lanes. Above the touch zones so a pick isn't a hit */
.practice-live {
    display: none;
    position: relative;
    z-index: 25;
    align-self: stretch;
    margin: 0 0.75rem 0.75rem;
    padding: 0 0.75rem 0.4rem;
    background: var(--panel);
    border: var(--line-w) solid var(--line);
    border-radius: var(--radius);
}

.dark-mode .practice-live {
    background: linear-gradient(180deg, #181b27, var(--panel));
}

#game-screen.practice-mode .practice-live {
    display: block;
}

.practice-live .practice-grid {
    gap: 0.25rem 0.35rem;
    padding: 0.4rem 0 0.3rem;
}

.practice-live .beat-select {
    padding: 0.3rem 0.15rem;
}

.practice-live-hint {
    margin: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
}

/* Touch zones (the key beam shows the hit, so the zone itself stays clear) */
.touch-controls {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 20;
}

.touch-zone {
    flex: 1;
    height: 100%;
    /* Pointer events don't block scroll/zoom via preventDefault, so disable them here */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Result screen
   ========================================================================== */

#result-screen {
    z-index: 100;
}

#result-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--brand);
    text-shadow: var(--outline-3);
}

#result-screen.failed #result-title {
    color: #a9b3d6;
}

.dark-mode #result-title {
    font-style: italic;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #ffd2a0 45%, var(--brand) 55%, var(--brand-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 16px rgba(255, 46, 58, 0.6));
}

.dark-mode #result-screen.failed #result-title {
    background: linear-gradient(180deg, #ffffff 0%, #c9cfdf 45%, #5b6280 55%, #9aa2bb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: none;
}

.result-stats {
    background: var(--panel);
    padding: 1.25rem 1.25rem 1.25rem;
    border-radius: var(--radius);
    border: var(--line-w) solid var(--line);
    box-shadow: var(--pop-shadow);
    margin-bottom: 1.25rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.dark-mode .result-stats {
    background: linear-gradient(180deg, #181b27, var(--panel));
    border-top: 2px solid var(--brand);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 800;
    color: var(--text);
    padding: 0.2rem 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: var(--text-dim);
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.stat-item.big {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-item.big .stat-num {
    font-size: 3.4rem;
    line-height: 1.05;
    color: var(--brand);
}

.dark-mode .stat-item.big .stat-num {
    color: #ffffff;
    font-style: italic;
    text-shadow: 0 0 14px rgba(255, 46, 58, 0.8);
}

.stat-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 2px dotted rgba(45, 42, 110, 0.2);
}

.dark-mode .stat-breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 3px solid var(--j-color);
    background: var(--panel);
}

.bd-label {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--j-ink);
}

.bd-count {
    font-size: 1.3rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.breakdown-item.perfect {
    --j-color: var(--j-perfect);
    --j-ink: var(--j-perfect-ink);
}

.breakdown-item.good {
    --j-color: var(--j-good);
    --j-ink: var(--j-good-ink);
}

.breakdown-item.miss {
    --j-color: var(--j-miss);
    --j-ink: var(--j-miss-ink);
}

/* EXTRA uses a dashed border, echoing its in-game badge */
.breakdown-item.extra {
    --j-color: var(--j-extra);
    --j-ink: var(--j-extra-ink);
    border-style: dashed;
}

.dark-mode .breakdown-item {
    border-width: 0 0 0 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .breakdown-item.extra {
    border-width: 1px 1px 1px 4px;
    border-style: dashed dashed dashed solid;
}

.dark-mode .bd-label {
    text-shadow: 0 0 8px currentColor;
}

/* "/ 32" after a combo count */
.stat-total {
    font-size: 0.6em;
    color: var(--text-dim);
}

/* Max combo per hand, bordered in the lane colors */
.stat-hands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.hand-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 3px solid var(--hand-color);
    background: var(--panel);
}

.hand-item.left {
    --hand-color: var(--note-left);
}

.hand-item.right {
    --hand-color: var(--note-right);
}

.hand-item .bd-label {
    color: var(--text);
}

.dark-mode .hand-item {
    border-width: 0 0 0 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .hand-item .bd-label {
    color: var(--hand-color);
}

/* FULL COMBO / ALL PERFECT / NEW RECORD under the result title */
.result-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: -0.5rem 0 1rem;
}

.result-badges:empty {
    display: none;
}

.result-badge {
    padding: 0.3rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    border: var(--line-w) solid var(--line);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--line);
    color: var(--line);
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-fc {
    background: var(--j-good);
}

.badge-ap {
    background: var(--j-perfect);
}

.badge-new {
    background: var(--brand);
    color: var(--on-brand);
}

.dark-mode .result-badge {
    border-radius: 3px;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 12px currentColor;
    text-shadow: 0 0 8px currentColor;
}

.dark-mode .badge-fc {
    color: var(--j-good);
}

.dark-mode .badge-ap {
    color: var(--j-perfect);
}

.dark-mode .badge-new {
    color: var(--brand-2);
}

@keyframes pop-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Example playback running */
#demo-btn[aria-pressed="true"] {
    background: var(--accent-2);
}

.dark-mode #demo-btn[aria-pressed="true"] {
    background: linear-gradient(180deg, #3a4058, #20243a);
    color: #ffffff;
    box-shadow: inset 0 0 0 3px var(--accent);
}

.hint {
    margin-top: 0.75rem;
    color: var(--text-dim);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.hint.congratulations {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--j-perfect-ink);
}

.dark-mode .hint.congratulations {
    text-shadow: 0 0 10px rgba(255, 225, 74, 0.6);
}

/* ==========================================================================
   Small screens and reduced motion
   ========================================================================== */

@media (max-width: 400px) {
    .logo-main,
    .dark-mode .logo-main {
        font-size: 2.9rem;
    }

    .setting-item {
        font-size: 0.9rem;
    }

    select {
        min-width: 8rem;
    }

    .score-info .hud-value {
        font-size: 1.5rem;
    }

    .lane-feedback {
        font-size: 1.6rem;
    }

    .feedback-extra {
        font-size: 0.85rem;
    }

    #result-title {
        font-size: 2.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-perfect,
    .feedback-good,
    .feedback-miss,
    .feedback-extra {
        animation-name: fade-out;
    }

    .count-in-beat,
    .combo.bump,
    .lane-combo.bump,
    .result-badge {
        animation: none;
    }

    .btn-primary,
    .btn-secondary {
        transition: none;
    }
}

@keyframes fade-out {
    0%,
    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}