html {
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

#logout-btn {
    position: fixed;
    top: 10px;
    right: 12px;
    padding: 5px 12px;
    background: rgba(0,0,0,0.4);
    color: #aaa;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    z-index: 9999;
}
#logout-btn:hover { background: rgba(0,0,0,0.7); color: #fff; }

#logged-in-label {
    position: fixed;
    top: 50px;
    right: 12px;
    font-size: 11px;
    color: #888;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

body {
    font-family: sans-serif;
    text-align: center;
    background-color: #333333;
    color: #a200e2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    transition: background-color 0.5s;
}
body.view-game {
    overflow: hidden;
}

/* Global hidden utility — hides any element with class="hidden".
   Elements that use opacity/visibility for transitions override display below. */
.hidden { display: none; }

/* These fade via opacity, not display — keep them rendered so transitions work */
#grade-video-bg.hidden,
#grade-youtube-bg.hidden {
    display: block;
}

#endless-mode-indicator.hidden {
    display: block;
    max-height: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
}

/* Fire overlay wrapper — opacity transition handles fade in/out */
#fire-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99997;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.6s ease;
}

#fire-overlay.active {
    opacity: 1;
    box-shadow: inset 0 0 80px 20px rgba(255, 80, 0, 0.45);
}

/* Border fire strips — one per screen edge, animated sprite frames */
.border-fire-strip {
    position: absolute;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: auto 100%;
    image-rendering: pixelated;
}

.border-fire-strip-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 128px;
}

.border-fire-strip-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    transform: scaleY(-1);
    transform-origin: top center;
}

/* Left/right: width set by JS to window.innerHeight; rotated into place */
.border-fire-strip-left {
    left: 0;
    top: 0;
    height: 128px;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-128px);
}

.border-fire-strip-right {
    right: 0;
    top: 0;
    height: 128px;
    transform-origin: top right;
    transform: rotate(-90deg) translateY(-128px);
}

h1 {
    color: #8a00fc;
    margin: 0;
    padding-top: 16px;
    line-height: 0;
}

h1.hidden {
    display: none;
}

#song-library h2 {
    color: #8a00fc;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 3em;
}


#grade-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#grade-video-bg.hidden {
    opacity: 0;
    pointer-events: none;
}

body.grade-video-active {
    background-color: transparent;
}

body.grade-video-active #game-hud {
    background-color: rgba(26, 26, 26, 0.3);
    border-color: rgba(0, 0, 0, 0.3);
}

body.grade-video-active #game-container {
    background-color: rgba(255, 255, 255, 0.3);
}

body.grade-video-active #game-area {
    background-color: rgba(34, 34, 34, 0.3);
}


#grade-youtube-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    border: none;
}

#grade-youtube-bg.hidden {
    opacity: 0;
    pointer-events: none;
}


.controls-key {
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #ccc;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
    z-index: 60;
    pointer-events: none;
}

.controls-key.hidden,
.controls-key.overlap-hidden {
    display: none;
}

.controls-key strong {
    color: #fff;
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.controls-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    filter: invert(1);
}

#game-hud-difficulty {
    min-width: 400px;
    width: fit-content;
    text-align: center;
    color: #c9b8e8;
    font-size: 220%;
    margin-top: 20px;
    margin-bottom: 4px;
}
#game-hud-difficulty.hidden {
    display: none;
}
#game-hud {
    min-width: 400px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 4px 10px;
    gap: 24px;
    background-color: #1a1a1a;
    border: 1px solid black;
    margin-top: 0;
    margin-bottom: 6px;
}

#game-hud.hidden {
    display: none;
}

#hud-pause-btn {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0.75;
    color: inherit;
}
#hud-pause-btn:hover { opacity: 1; }

#game-song-info {
    position: fixed;
    left: 15px;
    top: 15px;
    text-align: left;
    max-width: calc(100vw - 30px);
}
#game-song-info.hidden {
    display: none;
}
#game-song-title {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#game-song-artist {
    font-size: 14px;
    color: #aaa;
    margin-top: 4px;
}

#game-container {
    position: relative;
    width: 400px;
    height: calc(100vh - 150px);
    border: 1px solid black;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 20px;
    transition: background-color 0.5s ease;
}
body.endless-active #game-container {
    height: calc(100vh - 280px);
}

#score {
    font-size: 20px;
    color: white;
    white-space: nowrap;
}

#live-grade {
    font-size: 20px;
    font-weight: bold;
    color: white;
    transition: color 0.3s;
    white-space: nowrap;
}

#game-yt-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
#game-yt-player iframe {
    width: 100%;
    height: 100%;
    display: block;
}

#game-area {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #222;
    transition: background-color 0.5s ease;
    z-index: 1;
}

.column {
    flex: 1;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    position: relative;
    transition: background-color 0.1s;
    touch-action: none;
    user-select: none;
}

.column.hit {
    background-color: rgba(255, 255, 255, 0.5);
}

.column.on-fire {
    animation: lane-fire 0.8s ease-in-out infinite alternate;
}

.column.on-fire.hit {
    background-color: rgba(255, 160, 40, 0.6);
}

@keyframes lane-fire {
    0% {
        background: linear-gradient(to top,
            rgba(255, 80, 0, 0.55) 0%,
            rgba(255, 140, 0, 0.30) 40%,
            rgba(255, 200, 0, 0.10) 70%,
            transparent 100%);
        box-shadow: inset 0 0 18px 4px rgba(255, 100, 0, 0.35),
                    0 0 12px 3px rgba(255, 80, 0, 0.5);
        border-color: rgba(255, 120, 0, 0.8);
    }
    100% {
        background: linear-gradient(to top,
            rgba(255, 120, 0, 0.65) 0%,
            rgba(255, 60, 0, 0.38) 45%,
            rgba(255, 180, 0, 0.12) 72%,
            transparent 100%);
        box-shadow: inset 0 0 28px 8px rgba(255, 60, 0, 0.45),
                    0 0 20px 6px rgba(255, 60, 0, 0.55);
        border-color: rgba(255, 200, 0, 0.9);
    }
}

/* ── Streak mode red glow ── */
body.streak-fire .border-fire-strip {
    filter: drop-shadow(0 0 14px rgba(255, 30, 0, 0.95));
}

/* Circle fades during a streak — .note-circle is a sibling of .note-sprite so opacity is isolated */
.note-circle {
    transition: opacity 0.3s ease;
}

body.streak-fire .note-circle { opacity: 0.45; }



@keyframes sprite-anim-80 {
    from { background-position-x: 0; }
    to { background-position-x: -960px; }
}

@keyframes sprite-anim-60 {
    from { background-position-x: 0; }
    to { background-position-x: -720px; }
}


.arrow-sprite {
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.note-sprite.arrow-sprite,
.note-head.arrow-sprite {
    background-size: 960px 80px;
    animation: sprite-anim-80 0.6s steps(12) infinite;
}

.column-arrow.arrow-sprite {
    background-size: 720px 60px;
    animation: sprite-anim-60 0.6s steps(12) infinite;
}

.arrow-sprite.arrow-left {
    background-image: url('Assets/Images/Notes/ArrowBlock_BLUE_L.png');
    background-color: #1a2e6e;
    border-radius: 50%;
}

.arrow-sprite.arrow-down {
    background-image: url('Assets/Images/Notes/ArrowBlock_LIME_L.png');
    background-color: #1a5e2a;
    border-radius: 50%;
}

.arrow-sprite.arrow-up {
    background-image: url('Assets/Images/Notes/ArrowBlock_Yellow_L.png');
    background-color: #5e5a1a;
    border-radius: 50%;
}

.arrow-sprite.arrow-right {
    background-image: url('Assets/Images/Notes/ArrowBlock_RED_L.png');
    background-color: #6e1a1a;
    border-radius: 50%;
}

.note-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 0;
}

.note-circle.arrow-left  { background-color: #1a2e6e; }
.note-circle.arrow-down  { background-color: #1a5e2a; }
.note-circle.arrow-up    { background-color: #5e5a1a; }
.note-circle.arrow-right { background-color: #6e1a1a; }

.note-sprite {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.note-sprite.arrow-sprite {
    background-color: transparent;
}

.note.arrow-left {
    transform: translateX(-50%) rotate(180deg);
}

.note.arrow-down {
    transform: translateX(-50%) rotate(90deg);
}

.note.arrow-up {
    transform: translateX(-50%) rotate(-90deg);
}

.note.arrow-right {
    transform: translateX(-50%) rotate(0deg);
}

.column-arrow.arrow-left {
    transform: translateX(-50%) rotate(180deg);
}

.column-arrow.arrow-down {
    transform: translateX(-50%) rotate(90deg);
}

.column-arrow.arrow-up {
    transform: translateX(-50%) rotate(-90deg);
}

.column-arrow.arrow-right {
    transform: translateX(-50%) rotate(0deg);
}

.note-head.arrow-sprite.arrow-left {
    transform: rotate(180deg);
}

.note-head.arrow-sprite.arrow-down {
    transform: rotate(90deg);
}

.note-head.arrow-sprite.arrow-up {
    transform: rotate(-90deg);
}

.note-head.arrow-sprite.arrow-right {
    transform: rotate(0deg);
}

.column-arrow {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    z-index: 0;
    opacity: 0.4;
}

#player-string {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: #4a18a5;
    z-index: 1;
}

/* Pause menu */
#pause-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#pause-menu.hidden {
    display: none;
}

#pause-menu h2 {
    color: #ffd700;
    font-size: 48px;
    margin-bottom: 30px;
}

#pause-menu button {
    display: block;
    width: 200px;
    padding: 12px 20px;
    margin: 8px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition-duration: 0.4s;
}

#pause-menu button:hover {
    background-color: #15628a;
}


@keyframes float-up-fade {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-75px) scale(0.9); }
}

@keyframes float-up-fade-fire {
    0%   {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.15);
        text-shadow: 0 0 4px #fff, 0 -2px 8px #ff3, 0 -4px 14px #f90, 0 -10px 24px #c33, 0 0 18px rgba(255,200,0,0.5);
    }
    20%  {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1);
        text-shadow: 0 0 4px #fff, 0 -2px 8px #ff3, 0 -4px 14px #f90, 0 -10px 24px #c33, 0 0 18px rgba(255,200,0,0.5);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-75px) scale(0.9);
        text-shadow: 0 0 2px #fff, 0 -1px 4px #ff3, 0 -2px 8px #f90, 0 -5px 12px #c33;
    }
}

.floating-points {
    position: absolute;
    bottom: 68px;
    font-size: 30px;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    animation: float-up-fade 0.75s ease-out forwards;
}

.floating-points.positive {
    color: #00ff66;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
}

.floating-points.negative {
    color: #ff3333;
    text-shadow: 0 0 8px rgba(255, 50, 50, 0.5);
}

.floating-points.fire {
    color: #ffe080;
    animation: float-up-fade-fire 0.75s ease-out forwards;
}

.floating-label {
    position: absolute;
    font-size: 18px;
    font-weight: 900;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    color: #aaddff;
    text-shadow: 0 0 6px rgba(100, 180, 255, 0.6);
    animation: float-up-fade 1s ease-out forwards;
}

.floating-streak {
    position: absolute;
    font-size: 22px;
    font-weight: 900;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    color: #ffe080;
    animation: float-up-fade-fire 1s ease-out forwards;
}

.note {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 1;
    left: 50%;
    pointer-events: none;
}

.sustained-game-note {
    position: absolute;
    width: 80%;
    height: auto;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.sustained-game-note .note-head {
    width: 80px;
    height: 80px;
    z-index: 2;
}

.sustain-tail {
    width: 30%;
    border-radius: 6px 6px 0 0;
    transition: background 0.1s, box-shadow 0.1s;
}

/* Tail colors match note head colors, brightened */
.sustain-tail.arrow-left {
    background: linear-gradient(to bottom, rgba(40, 100, 255, 0.4), #4488ff);
}
.sustain-tail.arrow-down {
    background: linear-gradient(to bottom, rgba(40, 220, 100, 0.4), #44ee88);
}
.sustain-tail.arrow-up {
    background: linear-gradient(to bottom, rgba(220, 210, 40, 0.4), #ffee44);
}
.sustain-tail.arrow-right {
    background: linear-gradient(to bottom, rgba(255, 60, 60, 0.4), #ff5555);
}

/* Holding state — even brighter with glow */
.sustained-game-note.holding .sustain-tail.arrow-left {
    background: linear-gradient(to bottom, rgba(60, 130, 255, 0.7), #66aaff);
    box-shadow: 0 0 12px 4px rgba(68, 136, 255, 0.7);
}
.sustained-game-note.holding .sustain-tail.arrow-down {
    background: linear-gradient(to bottom, rgba(60, 255, 130, 0.7), #66ffaa);
    box-shadow: 0 0 12px 4px rgba(68, 238, 136, 0.7);
}
.sustained-game-note.holding .sustain-tail.arrow-up {
    background: linear-gradient(to bottom, rgba(255, 240, 60, 0.7), #ffee66);
    box-shadow: 0 0 12px 4px rgba(255, 238, 68, 0.7);
}
.sustained-game-note.holding .sustain-tail.arrow-right {
    background: linear-gradient(to bottom, rgba(255, 80, 80, 0.7), #ff7777);
    box-shadow: 0 0 12px 4px rgba(255, 68, 68, 0.7);
}

.sustained-game-note.holding .note-head.arrow-left {
    filter: brightness(1.5) drop-shadow(0 0 8px #4488ff);
}
.sustained-game-note.holding .note-head.arrow-down {
    filter: brightness(1.5) drop-shadow(0 0 8px #44ee88);
}
.sustained-game-note.holding .note-head.arrow-up {
    filter: brightness(1.5) drop-shadow(0 0 8px #ffee44);
}
.sustained-game-note.holding .note-head.arrow-right {
    filter: brightness(1.5) drop-shadow(0 0 8px #ff5555);
}

/* Notes on fire during a streak — fireball from Fireball/3/ (64×64 per frame,
   displayed at 2× = 128×128px).
   The sprite points LEFT; rotate(-90deg) (CCW) brings the RIGHT side — the
   fire trail — to the TOP so the trail rises upward from the note.
   Game loop sets style.top = note.position - 40 (note head top).
   translateY(-96px) positions the element so ~96px of trail is visible above
   the note circle while the bright fireball body sits at/behind the note top. */
.note-flame {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + 4px)) translateY(-175px) rotate(90deg);
    width: 350px;
    height: 350px;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 0;
}

/* Sustain tail flame — upright GIF, height set dynamically by JS */
.note-flame-sustain {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 490px;
    height: 256px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Note hit explosion */
.note-explosion {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}

.note-explosion-particle {
    position: absolute;
    border-radius: 50%;
    animation: note-explode 0.38s ease-out forwards;
}

@keyframes note-explode {
    0%   { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* Note hit ripple — speaker/water-wave rings */
.note-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--ripple-color, #ffffff);
    box-shadow: 0 0 6px var(--ripple-color, #ffffff);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    animation: note-ripple-expand 0.5s ease-out forwards;
}
@keyframes note-ripple-expand {
    0%   { transform: translate(-50%, -50%) scale(0.05); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Streak firework explosion is canvas-based (see spawnFireworkExplosion in script.js) */


#grade-display {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

#song-selection.hidden,
#difficulty-selection.hidden,
#editor-container.hidden,
#game-container.hidden,
#grade-display.hidden,
#name-entry.hidden,
#song-library.hidden,
#endless-loop-count.hidden,
#endless-diff-notice.hidden,
#name-entry-no-save-notice.hidden,
#firework-credit.hidden {
    display: none;
}

#firework-credit {
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 12px;
}

#firework-credit a {
    color: rgba(255, 255, 255, 0.45);
}


#editor-song-info {
    position: fixed;
    left: 15px;
    top: 15px;
    text-align: left;
    max-width: calc(100vw - 30px);
}
#editor-song-title {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80vw;
}
#editor-song-artist {
    font-size: 14px;
    color: #aaa;
    margin-top: 4px;
}
#editor-difficulty-label {
    min-width: 400px;
    width: fit-content;
    text-align: center;
    color: #c9b8e8;
    font-size: 220%;
    margin-top: 20px;
    margin-bottom: 4px;
}
#editor-difficulty-label.hidden {
    display: none;
}

#editor-container {
    width: 80%;
    max-width: 800px;
    margin-top: 20px;
    background-color: #444;
    padding: 10px;
    border: 1px solid black;
    height: calc(100vh - 150px); /* Match game container height */
    display: flex;
    flex-direction: column;
}

#editor-controls {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#editor-controls button {
    padding: 6px 14px;
    background: #2a2a2a;
    color: #bbb;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

#editor-controls button:hover {
    background: #3c3c3c;
    color: #fff;
    border-color: #777;
}

/* Playback — green tint */
#editor-play-pause {
    background: #1a3d22;
    border-color: #4a9955;
    color: #90d890;
}

#editor-play-pause:hover {
    background: #235230;
    border-color: #5cbf6a;
    color: #b2f0b2;
}

/* Primary tool actions — blue tint */
#editor-quick-test,
#editor-export {
    background: #152e42;
    border-color: #2a6a9a;
    color: #7ec8e3;
}

#editor-quick-test:hover,
#editor-export:hover {
    background: #1a3a55;
    border-color: #3a8abb;
    color: #a8daee;
}

/* Tag panel */
#tag-panel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    vertical-align: middle;
    flex-wrap: wrap;
}

#tag-list {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    color: #fff;
    user-select: none;
    transition: border-color 0.15s, opacity 0.15s;
}

.tag-pill:hover {
    opacity: 0.85;
}

.tag-pill.active {
    border-color: #fff;
}

.tag-pill .tag-delete {
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.7;
    line-height: 1;
}

.tag-pill .tag-delete:hover {
    opacity: 1;
}

#add-tag-button {
    padding: 2px 8px;
    font-size: 12px;
    background-color: #555;
    color: #ccc;
    border: 1px solid #777;
    border-radius: 12px;
    cursor: pointer;
}

#add-tag-button:hover {
    background-color: #666;
}

#tag-create-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#tag-create-form.hidden {
    display: none;
}

#tag-name-input {
    width: 90px;
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid #777;
    border-radius: 4px;
    background: #333;
    color: #fff;
}

#tag-color-input {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: none;
}

#tag-create-confirm, #tag-create-cancel {
    padding: 2px 8px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

#tag-create-confirm {
    background-color: #2a7a2a;
}

#tag-create-cancel {
    background-color: #666;
}

/* Tag dots on editor notes */
.editor-note-head .tag-dots {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    gap: 2px;
    pointer-events: none;
    z-index: 10;
}

.editor-note-head .tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
}

/* Tagging mode cursor */
.tagging-mode .editor-note {
    cursor: crosshair;
}

.tagging-mode .timeline-column {
    cursor: not-allowed;
}

/* Tag mode indicator */
#tag-mode-indicator {
    display: none;
    padding: 2px 10px;
    font-size: 11px;
    color: #fff;
    border-radius: 4px;
    margin-left: 6px;
}

#tag-mode-indicator.active {
    display: inline-block;
}

#timeline-container {
    position: relative;
    flex-grow: 1; /* Allow this container to fill available space */
    min-height: 0; /* Necessary for flex-grow with overflow */
    overflow-y: scroll;
    background-color: #222;
}

#timeline-area {
    position: relative;
    width: 100%;
    display: flex;
}

.timeline-column {
    flex: 1;
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    position: relative;
    min-height: 100%;
}

#playhead {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: red;
    z-index: 10;
    cursor: ns-resize;
}
/* Expand click target above and below the 2px line */
#playhead::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 18px;
    cursor: ns-resize;
}

.editor-note {
    position: absolute;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Fixed-size head wrapper — prevents the arrow circle from stretching during resize */
.editor-note-head {
    width: 80px;
    height: 80px;
    position: relative;
    flex-shrink: 0;
}

.editor-note-head .note-head {
    position: absolute;
    inset: 0;
}

.editor-note::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 10;
}

/* Sustain tail in editor: matches gameplay (transparent at top/free end, solid at bottom/head) */
.editor-note .sustain-tail {
    width: 30%;
    border-radius: 6px 6px 0 0;
}

.editor-note.selected {
    z-index: 6;
    filter: drop-shadow(0 0 4px #ffeb3b) drop-shadow(0 0 10px rgba(255, 235, 59, 0.6));
}

.selection-rect {
    position: absolute;
    background-color: rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.6);
    z-index: 8;
    pointer-events: none;
}

#difficulty-selection {
    margin-top: 20px;
}

#difficulty-stars-display {
    min-height: 36px;
    margin: 4px 0 8px;
}

#difficulty-stars-display img {
    height: 32px;
}

.diff-stars img {
    height: 20px;
    vertical-align: middle;
}

#difficulty-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#start-button, #edit-chart-button, #difficulty-back-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
}

#start-button:hover, #edit-chart-button:hover, #difficulty-back-button:hover {
    background-color: #15628a;
}

#song-input-label, #chart-input-label, #proceed-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
}

#song-input-label:hover, #chart-input-label:hover, #proceed-button:hover {
    background-color: #15628a;
}

#song-subtitle {
    margin: 0;
    color: #ccc;
    font-size: 250%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90vw;
    padding-bottom: 0.15em;
}

#song-subtitle.hidden {
    display: none;
}

#subtitle-difficulty {
    margin-left: 10px;
    font-size: 1em;
    font-weight: normal;
    color: #44aaff;
    opacity: 0.9;
}

#subtitle-difficulty.hidden {
    display: none;
}

#game-ready {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    color: #44aaff;
    text-shadow: 0 0 15px rgba(68, 170, 255, 0.7);
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

#game-ready.go {
    color: #00ff66;
    font-size: 80px;
    text-shadow: 0 0 20px rgba(0, 255, 102, 0.6);
}

#game-ready.hidden {
    display: none;
}

#name-entry {
    margin-top: 20px;
    font-size: 18px;
}

#name-entry-score {
    font-size: 2em;
    font-weight: bold;
    margin: 0 0 8px 0;
}

#name-entry-stats {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 15px;
}

#rating-section {
    margin-top: 20px;
    border-top: 1px solid #444;
    padding-top: 15px;
}

.rating-question {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
}

.rating-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rating-btn {
    font-size: 28px;
    padding: 8px 18px;
    background: #333;
    border: 2px solid #555;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
    line-height: 1;
    color: #fff;
}

.rating-btn:hover {
    border-color: #aaa;
    background: #444;
}

.rating-btn.rating-active {
    border-color: #a200e2;
    background: #3a1155;
    transform: scale(1.12);
}

.library-song-rating {
    font-size: 13px;
    color: #bbb;
    margin: 2px 0 4px;
}

.library-song-rating--interactive {
    display: flex;
    gap: 6px;
    align-items: center;
}

.card-rating-btn {
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 5px;
}

#player-name-input {
    padding: 8px 12px;
    font-size: 16px;
    border: 2px solid #a200e2;
    border-radius: 5px;
    background-color: #444;
    color: white;
    text-align: center;
    margin: 10px 0;
    width: 200px;
}

#player-name-input:focus {
    outline: none;
    border-color: #d040ff;
}

#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
}

.confetti {
    position: absolute;
    opacity: 0.8;
    animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
    0% {
        top: -10px;
        transform: rotate(0deg);
        opacity: 0.8;
    }
    100% {
        top: 100%;
        transform: rotate(720deg);
        opacity: 0;
    }
}

#new-high-score {
    color: #ffd700;
    font-size: 36px;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.6),
        0 0 20px rgba(255, 215, 0, 0.3);
    animation: high-score-pulse 0.8s ease-in-out infinite alternate;
    margin-bottom: 5px;
}

@keyframes high-score-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

#new-high-score.hidden {
    display: none;
}

#play-again-button, #change-difficulty-button, #library-return-button,
#open-editor-button, #open-library-button, #open-help-button, #library-back-button,
#library-export-button, #library-import-button, #session-kick-now {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 5px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition-duration: 0.4s;
}

#play-again-button:hover, #change-difficulty-button:hover, #library-return-button:hover,
#open-editor-button:hover, #open-library-button:hover, #open-help-button:hover, #library-back-button:hover,
#library-export-button:hover, #library-import-button:hover, #session-kick-now:hover {
    background-color: #15628a;
}

#change-difficulty-button {
    background-color: #555;
}

#change-difficulty-button:hover {
    background-color: #444;
}

#library-return-button {
    background-color: #666;
}

#library-return-button:hover {
    background-color: #555;
}


/* Credits overlay */
#credits-modal {
    width: max-content;
    max-width: 90vw;
    text-align: center;
}

#credits-modal h2 {
    margin-top: 0;
    color: #ffd700;
}

#credits-content h3 {
    margin: 18px 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

#credits-content p {
    margin: 10px 0;
    font-size: 14px;
    white-space: nowrap;
}

#credits-content a {
    color: #44aaff;
    text-decoration: none;
}

#credits-content a:hover {
    text-decoration: underline;
}

/* Already-in-library warning overlay */
#already-in-library-modal {
    width: max-content;
    max-width: 90vw;
    text-align: center;
}

#already-in-library-modal h2 {
    margin-top: 0;
    color: #ffd700;
}

/* Help overlay */
#help-modal {
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

#help-modal h2 {
    margin-top: 0;
    text-align: center;
    color: #ffd700;
}

#help-modal h3 {
    color: #44aaff;
    margin: 20px 0 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

#help-modal p {
    margin: 6px 0;
    line-height: 1.5;
    font-size: 14px;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 14px;
}

.help-table td {
    padding: 4px 10px;
    border-bottom: 1px solid #222;
}

.help-table td:first-child {
    white-space: nowrap;
    font-weight: bold;
    width: 40%;
}

.help-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    filter: invert(1);
}

.help-note {
    color: #999;
    font-size: 13px;
    font-style: italic;
}

.help-excellent { color: #00ff66; }
.help-early { color: #ff9900; }
.help-late { color: #ff4444; }
.help-miss { color: #ff2222; }
.help-aplus { color: #ffd700; }
.help-a { color: #00ff66; }
.help-b { color: #44aaff; }
.help-c { color: #ff9900; }
.help-d { color: #ff4444; }
.help-f { color: #aa0000; }

#close-help-button {
    display: block;
    margin: 20px auto 0;
    padding: 10px 30px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition-duration: 0.4s;
}

#close-help-button:hover {
    background-color: #15628a;
}

/* Score detail popup */
#score-detail-modal {
    max-width: 420px;
    width: 90%;
}

#score-detail-title {
    margin-top: 0;
    text-align: center;
    color: #ffd700;
    font-size: 18px;
}

.score-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #222;
    font-size: 14px;
}

.score-detail-row:last-child {
    border-bottom: none;
}

.score-detail-label {
    color: #999;
}

#konami-modal {
    border-color: #7b5ea7;
    max-width: 400px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    box-shadow: 0 0 30px rgba(123, 94, 167, 0.4);
}

#konami-title {
    margin: 0;
    font-size: 20px;
    color: #c87dff;
}

#konami-message {
    margin: 0;
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    font-style: italic;
}

#konami-close {
    display: block;
    margin: 4px auto 0;
    padding: 8px 30px;
    background-color: #7b5ea7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.4s;
}

#konami-close:hover {
    background-color: #6a4d92;
}

/* YouTube quota modal */
#yt-quota-modal {
    border-color: #7b5ea7;
    padding: 28px 30px;
    max-width: 360px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    box-shadow: 0 0 30px rgba(123, 94, 167, 0.4);
}

#yt-quota-modal-msg {
    margin: 0;
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

#yt-quota-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#yt-quota-modal-confirm,
#yt-quota-modal-cancel {
    padding: 8px 22px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.2s;
}

#yt-quota-modal-confirm {
    background-color: #7b5ea7;
    color: white;
}

#yt-quota-modal-confirm:hover {
    background-color: #6a4d92;
}

#yt-quota-modal-cancel {
    background-color: #444;
    color: #ccc;
}

#yt-quota-modal-cancel:hover {
    background-color: #555;
}

.score-detail-value {
    font-weight: bold;
}

.score-detail-value.excellent { color: #00ff66; }
.score-detail-value.early { color: #ff9900; }
.score-detail-value.late { color: #ff4444; }
.score-detail-value.miss { color: #ff2222; }
.score-detail-value.grade-aplus { color: #ffd700; }
.score-detail-value.grade-a { color: #00ff66; }
.score-detail-value.grade-b { color: #44aaff; }
.score-detail-value.grade-c { color: #ff9900; }
.score-detail-value.grade-d { color: #ff4444; }
.score-detail-value.grade-f { color: #aa0000; }

#score-detail-close {
    display: block;
    margin: 20px auto 0;
    padding: 8px 30px;
    background-color: #1874a5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.4s;
}

#score-detail-close:hover {
    background-color: #15628a;
}

.library-score-clickable {
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.library-score-clickable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#song-library {
    margin-top: 5px;
    width: 90%;
    max-width: 1920px;
}

#library-search-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

#library-search-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

#library-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

#library-filter-linked-label {
    white-space: nowrap;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

#library-search {
    flex: 1;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #333;
    border: 1px solid #666;
    border-radius: 6px;
    color: #eee;
    font-size: 14px;
    outline: none;
}

#library-search:focus {
    border-color: #d040ff;
}

/* YouTube daily quota meter */
#youtube-quota-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#youtube-quota-bar-track {
    width: 100%;
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #444;
}

#youtube-quota-bar-fill {
    height: 100%;
    width: 0%;
    background: #4caf50;
    border-radius: 3px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

#youtube-quota-bar-fill.quota-warn {
    background: #ff9800;
}

#youtube-quota-bar-fill.quota-full {
    background: #e53935;
}

#youtube-quota-label {
    font-size: 12px;
    color: #666;
    text-align: right;
}

#youtube-quota-label.quota-warn {
    color: #ff9800;
}

#youtube-quota-label.quota-full {
    color: #e53935;
}

#library-artist-details {
    list-style: none;
}

#library-artist-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 12px;
    color: #aaa;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 0;
}

#library-artist-details > summary:hover {
    background: #333;
    color: #ccc;
}

#library-artist-details > summary::-webkit-details-marker {
    display: none;
}

#library-artist-details > summary::after {
    content: '▸';
    font-size: 11px;
    color: #666;
    transition: transform 0.15s;
    flex-shrink: 0;
}

#library-artist-details[open] > summary::after {
    transform: rotate(90deg);
}

#library-artist-details[open] > summary {
    border-radius: 6px 6px 0 0;
    border-bottom-color: #3a3a3a;
    margin-bottom: 0;
}

#library-artist-details[open] > #library-artist-list {
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 4px 0;
}

#library-artist-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

.artist-filter-option {
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.12s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artist-filter-option:hover {
    background: #2a2a2a;
}

.artist-filter-option input[type="checkbox"] {
    accent-color: #d040ff;
    cursor: pointer;
    flex-shrink: 0;
}

.filter-panel-empty {
    color: #666;
    font-size: 12px;
    font-style: italic;
}

/* Scrollbar styling for all <select> dropdowns */
select {
    scrollbar-width: thin;
    scrollbar-color: #555 #1a1a1a;
}

select::-webkit-scrollbar {
    width: 6px;
}

select::-webkit-scrollbar-track {
    background: #1a1a1a;
}

select::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

#library-sort-group {
    display: flex;
    align-items: center;
    border: 1px solid #666;
    border-radius: 6px;
    overflow: hidden;
    background: #333;
    width: 100%;
}

#library-sort-label {
    padding: 0 8px;
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    border-right: 1px solid #555;
    line-height: 34px;
}

#library-sort {
    padding: 8px 8px;
    background: #333;
    border: none;
    border-right: 1px solid #555;
    color: #eee;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
}

#library-sort:focus {
    background: #3a3a3a;
}

#library-sort-dir {
    padding: 8px 10px;
    background: #333;
    border: none;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

#library-sort-dir:hover {
    background: #444;
    color: #eee;
}

#library-filter-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

#library-filter-btn {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#library-filter-btn:hover {
    background: #444;
    color: #eee;
}

#library-filter-btn.has-active {
    background: #1a0a2a;
    color: #d040ff;
    border-color: #d040ff;
    text-shadow: 0 0 6px #d040ff88;
}

#library-filter-btn.has-active:hover {
    background: #22103a;
}

#library-filter-panel.hidden {
    display: none;
}

#library-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 14px;
    z-index: 200;
    min-width: 230px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

.filter-panel-section {
    margin-bottom: 14px;
}

.filter-panel-label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.filter-panel-section-header {
    color: #666;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 0 6px;
    border-top: 1px solid #2e2e2e;
    margin-top: 2px;
}

.filter-panel-section-header:first-child {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

.filter-panel-footer {
    border-top: 1px solid #2e2e2e;
    padding-top: 10px;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

#library-filter-clear,
#library-filter-clear-filters,
#library-filter-clear-sorting {
    background: transparent;
    color: #888;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

#library-filter-clear:hover,
#library-filter-clear-filters:hover,
#library-filter-clear-sorting:hover {
    background: #333;
    color: #ccc;
    border-color: #666;
}

#library-sort-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.sort-criterion-pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
}

.sort-criterion-label {
    padding: 4px 8px;
    color: #ddd;
    white-space: nowrap;
    border-right: 1px solid #444;
}

.sort-criterion-dir,
.sort-criterion-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 7px;
    color: #aaa;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.sort-criterion-dir {
    border-right: 1px solid #444;
}

.sort-criterion-dir:hover {
    background: #383838;
    color: #d040ff;
}

.sort-criterion-remove:hover {
    background: #3a2020;
    color: #ff6666;
}

#library-sort-add-wrap {
    position: relative;
}

#library-sort-add-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#library-sort-add-btn:hover {
    background: #333;
    color: #ccc;
    border-color: #777;
}

#library-sort-add-list.hidden {
    display: none;
}

#library-sort-add-list {
    background: #2a2a2a;
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.sort-add-option {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    border-top: 1px solid #383838;
    color: #ccc;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.sort-add-option:first-child {
    border-top: none;
}

.sort-add-option:hover {
    background: #383838;
}

#library-song-list {
    height: 60vh;
    overflow-y: auto;
    overflow-x: visible;
    margin: 15px 0;
    padding: 6px 8px;
    box-sizing: border-box;
    scrollbar-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 10px;
    align-content: start;
    align-items: start;
}

#library-song-list::-webkit-scrollbar {
    display: none;
}

#library-song-list-wrap {
    position: relative;
}

#library-scroll-thumb {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    background: #555;
    border-radius: 2px;
    pointer-events: none;
    display: none;
}

.library-song-card {
    background-color: #444;
    border: 1px solid #666;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.song-flag-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: transparent;
    border: 1px solid #555;
    border-radius: 5px;
    color: #888;
    font-size: 12px;
    padding: 3px 7px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1.4;
    z-index: 1;
}

.song-flag-btn:hover {
    border-color: #f88;
    color: #f88;
}

.song-flag-btn--active {
    border-color: #d44;
    color: #f66;
    background: #2a0000;
}

.song-admin-btns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.song-admin-btns .song-flag-btn {
    position: static;
}

.song-corner-btns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    z-index: 1;
}

.song-corner-btns .song-flag-btn {
    position: static;
}

.song-corner-btns .song-admin-btns {
    position: static;
}

.song-heart-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
    position: relative;
    overflow: visible;
}

.heart-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    background: #e53935;
    mask-image: url('Assets/Images/UI/Heart.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('Assets/Images/UI/Heart.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    pointer-events: none;
    z-index: 10;
    animation: heart-ripple-expand 0.52s ease-out both;
}

@keyframes heart-ripple-expand {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

.song-heart-btn img {
    width: 40px;
    height: 40px;
    filter: invert(1);
    opacity: 0.45;
    transition: filter 0.2s, opacity 0.2s;
    display: block;
    pointer-events: none;
}

.song-heart-btn:hover img {
    opacity: 0.75;
}

.song-heart-btn--active img {
    opacity: 1;
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}


.song-admin-delete-btn {
    border-color: #555;
    color: #aaa;
}

.song-ban-btn {
    border-color: #a33;
    color: #f66;
}

.song-ban-btn:hover {
    border-color: #f44;
    color: #f44;
    background: #200000;
}

.library-song-card--focused {
    animation: song-card-focus-flash 2s ease-out forwards;
}

@keyframes song-card-focus-flash {
    0%   { box-shadow: 0 0 0 3px #fff; border-color: #fff; }
    60%  { box-shadow: 0 0 0 3px #fff; border-color: #fff; }
    100% { box-shadow: none; border-color: #666; }
}

.bonus-screen-config {
    flex-basis: 100%;
}

.library-song-card-content {
    flex: 1;
    min-width: 0;
}

.library-song-thumbnail {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.library-song-rating-badge {
    display: block;
    background: #1a1a1a;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    text-align: center;
    align-self: flex-end;
}

.library-song-explicit {
    border: 1px solid #d9534f88;
    color: #d9534f;
}

.library-song-pg {
    border: 1px solid #4caf5088;
    color: #4caf50;
}

.library-song-not-rated {
    border: 1px solid #66666688;
    color: #888;
}

.library-song-pg-verified {
    border: 1px solid #4caf50;
    color: #4caf50;
    font-weight: 900;
}

.admin-rating-badge {
    cursor: pointer;
}

.admin-rating-badge:hover {
    filter: brightness(1.3);
}

#rating-badge-picker {
    position: fixed;
    z-index: 10000;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rating-picker-option {
    background: #1a1a1a;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.1s;
}

.rating-picker-option:hover {
    filter: brightness(1.3);
}

.rating-picker-option.rating-picker-current {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

body.endless-active #rating-badge-picker {
    background: #0d2233;
    border-color: #00ccff44;
}

body.endless-active .rating-picker-option {
    background: #0a1a28;
}

body.endless-active .rating-picker-option.library-song-pg-verified {
    border-color: #00ff88;
}

#rating-badge-tooltip {
    position: fixed;
    z-index: 9999;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ccc;
    font-size: 12px;
    font-family: inherit;
    padding: 5px 10px;
    pointer-events: none;
    max-width: 240px;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.15s;
}

#rating-badge-tooltip.visible {
    opacity: 1;
}

.library-song-name {
    margin: 0 0 2px 0;
    color: #9160ba;
    font-size: 18px;
    display: flex;
    min-width: 0;
}

.library-song-name-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.library-song-name-title--clickable {
    cursor: pointer;
}

.library-song-name-title--clickable:hover {
    text-decoration: underline;
}

.library-song-name-duration {
    flex-shrink: 0;
    white-space: nowrap;
}

.library-song-diff-stars {
    margin: 0 0 5px;
}

.library-song-diff-stars img {
    height: 20px;
    vertical-align: middle;
}

.score-diff-stars img {
    height: 13px;
    vertical-align: middle;
}

.library-song-channel {
    margin: -3px 0 4px;
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-song-channel--no-artist {
    font-style: italic;
    opacity: 0.5;
}

.library-song-channel a {
    color: #888;
    text-decoration: none;
}

.library-song-channel a:hover {
    color: #aaa;
    text-decoration: underline;
}

.library-song-date {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.library-song-play-count {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.library-song-added-by {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.library-now-playing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    color: #4caf50;
    cursor: default;
}

.library-now-playing[hidden] {
    display: none;
}

.library-now-playing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4caf50;
    flex-shrink: 0;
    animation: now-playing-pulse 1.6s ease-in-out infinite;
}

@keyframes now-playing-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(0.65); }
}

.library-song-scores {
    margin: 10px 0;
    font-size: 14px;
    color: #ccc;
}

.library-song-scores-summary {
    cursor: pointer;
    color: #aaa;
    font-size: 13px;
    user-select: none;
}

.library-song-scores details summary,
.library-score-row {
    cursor: pointer;
    color: #aaa;
    font-size: 12px;
    margin-top: 5px;
}

.library-song-scores > p {
    font-size: 12px;
    margin: 5px 0 0;
    color: #aaa;
}

.library-score-list {
    padding-left: 20px;
    font-size: 12px;
    color: #bbb;
    margin-top: 5px;
}

.library-score-list li {
    margin-bottom: 3px;
}

.song-comments {
    margin: 10px 0 4px;
    font-size: 13px;
}

.song-comments > summary {
    cursor: pointer;
    color: #aaa;
    font-size: 12px;
    user-select: none;
}

.comments-count {
    color: #888;
    font-size: 11px;
}

.song-comments-body {
    margin-top: 8px;
}

.song-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.song-comments-loading,
.song-comments-empty,
.comment-no-access {
    font-size: 12px;
    color: #888;
    margin: 4px 0;
}

.comment-item {
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    padding: 7px 10px;
}

.comment-item-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.comment-item-header {
    font-size: 11px;
    color: #888;
}

.comment-delete-btn {
    background: transparent;
    border: 1px solid #444;
    color: #666;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
    flex-shrink: 0;
}

.comment-delete-btn:hover {
    border-color: #f66;
    color: #f66;
    background: #1a0000;
}

.comment-report-btn {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
    flex-shrink: 0;
}

.comment-report-btn:hover {
    border-color: #c84;
    color: #c84;
    background: #1a1000;
}

.comment-report-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.comment-item-text {
    margin: 0;
    font-size: 13px;
    color: #ddd;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 6px;
}

.comment-textarea {
    flex: 1;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    color: #eee;
    font-size: 13px;
    padding: 6px 8px;
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}

.comment-textarea:focus {
    outline: none;
    border-color: #7a50a0;
}

.comment-submit-btn {
    padding: 6px 14px;
    background: #6a3d9a;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition-duration: 0.2s;
}

.comment-submit-btn:hover {
    background: #532f7a;
}

.comment-submit-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.library-song-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.library-play-button, .library-delete-button, .library-reanalyze-button {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.3s;
    color: white;
}

.library-play-button {
    background-color: #992222;
}

.library-play-button:hover {
    background-color: #772222;
}

.library-reanalyze-button {
    background-color: #2a7a4b;
}

.library-reanalyze-button:hover {
    background-color: #1f5c38;
}

.library-reanalyze-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.library-delete-button {
    background-color: #993333;
}

.library-delete-button:hover {
    background-color: #772222;
}


.library-bonus-screen-button {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.3s;
    color: white;
    background-color: #6a3d9a;
}

.library-bonus-screen-button:hover {
    background-color: #532f7a;
}

.bonus-screen-config {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bonus-screen-config label {
    font-size: 13px;
    color: #ccc;
}

.bonus-screen-config input[type="text"] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: white;
    padding: 5px 8px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.bonus-screen-config-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bonus-screen-config-actions button {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: white;
    transition-duration: 0.2s;
}

.bonus-screen-save-btn {
    background-color: #1874a5;
}

.bonus-screen-save-btn:hover {
    background-color: #15628a;
}

.bonus-screen-local-btn {
    background-color: #2a7a4b;
}

.bonus-screen-local-btn:hover {
    background-color: #1f5c38;
}

.bonus-screen-clear-btn {
    background-color: #993333;
}

.bonus-screen-clear-btn:hover {
    background-color: #772222;
}

.bonus-screen-status {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}

.library-song-unavailable {
    opacity: 0.7;
}

.library-song-unavailable .library-play-button {
    background-color: #b87800;
}

.library-song-unavailable .library-play-button:hover {
    background-color: #996300;
}

.library-empty-message {
    color: #999;
    font-style: italic;
    padding: 20px;
    text-align: center;
    grid-column: 1 / -1;
}

/* ── Content Review section ───────────────────────────────────────────────── */
#library-review-section {
    margin-top: 18px;
    border-top: 1px solid #444;
    padding-top: 12px;
}

#library-review-section summary {
    cursor: pointer;
    font-size: 13px;
    color: #888;
    list-style: none;
    user-select: none;
    padding: 4px 0;
}
#library-review-section summary::-webkit-details-marker { display: none; }
#library-review-section summary::before {
    content: '▶ ';
    font-size: 10px;
    vertical-align: 1px;
}
#library-review-section[open] summary::before { content: '▼ '; }

#library-review-list {
    margin-top: 8px;
}

.review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #333;
    font-size: 13px;
}
.review-row:last-child { border-bottom: none; }

.review-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.review-title {
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.review-badge-pending  { background: #2a2a1a; color: #fa6; }
.review-badge-approved { background: #1a3a22; color: #6f6; }
.review-badge-denied   { background: #3a1a1a; color: #f88; }

#library-help-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #555;
    background: #333;
    color: #aaa;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition-duration: 0.2s;
}

#library-help-button:hover {
    background: #444;
}

#library-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

#library-add-song-button,
#library-add-youtube-button,
#library-credits-button,
#flag-status-btn,
#bug-report-btn,
#controls-btn,
#accessibility-btn,
#leaderboard-btn {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#library-add-youtube-button {
    background: #333;
    color: #aaa;
    border-color: #555;
}

#library-add-song-button:hover,
#library-add-youtube-button:hover,
#library-credits-button:hover,
#flag-status-btn:hover,
#bug-report-btn:hover,
#controls-btn:hover,
#accessibility-btn:hover,
#leaderboard-btn:hover {
    background: #444;
}

#library-add-song-button:disabled,
#library-add-youtube-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#library-add-song-button.public-only-disabled {
    text-decoration: line-through;
    opacity: 0.5;
    cursor: not-allowed;
}

#library-add-song-button.public-only-disabled:hover {
    background: #333;
}

#library-youtube-menu-wrap {
    position: relative;
    flex-shrink: 0;
}


#library-youtube-dialog.hidden {
    display: none;
}

#library-youtube-dialog {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 8px;
    z-index: 200;
    min-width: 280px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

#library-youtube-url {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    padding: 7px 10px;
    font-size: 14px;
    box-sizing: border-box;
}

#library-youtube-dialog-buttons {
    display: flex;
    gap: 8px;
}

#library-youtube-submit {
    background-color: #b00000;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    cursor: pointer;
    transition-duration: 0.2s;
}

#library-youtube-submit:hover {
    background-color: #b00000;
}

#library-youtube-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

#library-youtube-cancel {
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    cursor: pointer;
    transition-duration: 0.2s;
}

#library-youtube-cancel:hover {
    background-color: #444;
}

#library-open-editor-button {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#library-open-editor-button:hover {
    background: #444;
}

.library-load-chart-button {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition-duration: 0.3s;
    color: white;
    background-color: #4a5a2a;
}

.library-load-chart-button:hover {
    background-color: #3a4820;
}

/* ── Debug panel ──────────────────────────────────────────────────── */
#debug-setup-view.hidden,
#debug-code-view.hidden { display: none; }

/* Invisible triple-click trigger (bottom-right corner) */
#debug-corner-trigger {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    z-index: 9999;
    cursor: default;
    /* no background, no border — truly invisible */
}

/* Debug auth overlay */
#debug-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
#debug-auth-overlay.hidden { display: none; }

#debug-auth-modal {
    background: #1a1a2e;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 360px;
    width: 90%;
    color: #ccc;
    font-size: 13px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
}
#debug-auth-modal h3 {
    margin: 0 0 12px;
    color: #88aaff;
    font-size: 16px;
}
#debug-auth-modal p {
    margin: 0 0 12px;
    line-height: 1.5;
}
#debug-setup-qr {
    display: block;
    margin: 0 auto 12px;
    max-width: 180px;
    border-radius: 4px;
}
.debug-auth-note {
    color: #888;
    font-size: 11px;
}
.debug-secret-key {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: #fff;
    background: #0d0d1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 14px;
    word-break: break-all;
    text-align: center;
    user-select: all;
}
#debug-setup-continue {
    width: 100%;
    padding: 8px;
    background: #3a6ea8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
#debug-setup-continue:hover { background: #4a7ec8; }
#debug-auth-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #0d0d1a;
    border: 1px solid #555;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
    margin-bottom: 10px;
}
#debug-auth-error {
    color: #f88;
    font-size: 12px;
    margin-bottom: 8px;
    min-height: 16px;
}
#debug-auth-error.hidden { display: none; }
.debug-auth-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#debug-auth-cancel {
    padding: 7px 16px;
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
#debug-auth-cancel:hover { background: #444; }
#debug-auth-submit {
    padding: 7px 16px;
    background: #3a6ea8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
#debug-auth-submit:hover { background: #4a7ec8; }

#debug-save {
    width: 100%;
    padding: 8px;
    background: #2a6e3a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}
#debug-save:hover { background: #3a8e4a; }
#debug-save:disabled { background: #555; cursor: default; }

#debug-panel.hidden { display: none; }
#debug-panel {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 2000;
    width: 340px;
    max-height: 80vh;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid #555;
    border-radius: 8px;
    font-size: 12px;
    color: #ccc;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

#debug-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a4e;
    border-bottom: 1px solid #444;
    font-weight: bold;
    color: #fff;
    position: sticky;
    top: 0;
}
#debug-logout {
    background: none;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    margin-right: 4px;
}
#debug-logout:hover { color: #f88; }
#debug-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
#debug-close:hover { color: #fff; }

#debug-panel-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#debug-panel fieldset {
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
}
#debug-panel legend {
    color: #88aaff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px;
}
#debug-panel label {
    display: block;
    margin-bottom: 6px;
    color: #bbb;
    line-height: 1.4;
}
#debug-panel input[type=number] {
    width: 100%;
    margin: 3px 0 1px;
    background: #1a1a2e;
    border: 1px solid #555;
    color: #fff;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
}
#debug-panel label span {
    font-weight: bold;
    color: #fff;
    font-size: 13px;
}

.primary-mode-toggle {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}
.inline-radio {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-bottom: 0 !important;
    cursor: pointer;
}
#manual-band-selector {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.freq-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.freq-row input[type=number] {
    flex: 1;
    margin: 0;
    accent-color: #88aaff;
}
.freq-row input[type=number] {
    width: 58px;
    background: #1a1a2e;
    border: 1px solid #555;
    color: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: right;
}
.freq-unit {
    color: #888;
    font-size: 11px;
    flex-shrink: 0;
}
#band-preview-btn {
    width: 100%;
    background: #2a2a4e;
    border: 1px solid #555;
    color: #aaa;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}
#band-preview-btn:hover { background: #3a3a5e; color: #fff; }

.band-weights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.band-weights-grid label {
    font-size: 10px;
    text-align: center;
}
.band-weights-grid input[type=number] {
    width: 100%;
    box-sizing: border-box;
}

.diff-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.diff-header, .diff-row {
    display: grid;
    grid-template-columns: 62px repeat(5, minmax(42px, 1fr));
    gap: 3px;
    align-items: center;
}
.diff-header span {
    font-size: 10px;
    color: #88aaff;
    text-align: center;
    font-weight: bold;
}
.diff-row span {
    font-size: 10px;
    color: #aaa;
    cursor: help;
}
.diff-row input[type=number] {
    width: 100%;
    margin: 0;
    padding: 2px 3px;
    font-size: 11px;
    text-align: center;
}

#debug-reanalyze {
    width: 100%;
    padding: 8px;
    background: #3a6ea8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}
#debug-reanalyze:hover { background: #4a7ec8; }
#debug-reanalyze:disabled { background: #555; cursor: default; }
/* ─────────────────────────────────────────────────────────────────── */

/* ── Mobile / phone layout ─────────────────────────────────────────── */
@media (max-width: 480px) {
    #game-hud {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 3;
        background-color: rgba(0, 0, 0, 0.65);
        border: none;
        margin: 0;
    }

    #game-container {
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* uses dynamic viewport on modern mobile (excludes browser chrome) */
        margin: 0;
        border: none;
    }

    #hud-pause-btn {
        display: block;
    }

    /* Keyboard hint is irrelevant on touch devices */
    #controls-key-game {
        display: none !important;
    }

    /* Title: push below fixed logout + help buttons on mobile */
    h1 {
        padding-top: 80px;
    }

    /* Title GIF: constrain width so it doesn't overflow narrow screens */
    h1 img {
        max-width: 100%;
        max-height: 100px;
    }

    /* Library: let the search row wrap so controls don't get crushed */
    #song-library {
        width: 95%;
    }

    #library-search-fields {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Search input takes its own full line */
    #library-search {
        flex-basis: 100%;
    }

    /* Shrink thumbnail so card content has more room */
    .library-song-thumbnail {
        width: 90px;
        height: 51px;
    }

    /* Song title on difficulty-slider and game screens */
    #song-subtitle {
        font-size: 160%;
    }

    /* "Song Library" heading */
    #song-library h2 {
        font-size: 1.8em;
    }

    /* Endless mode image asset */
    #endless-mode-indicator img {
        max-width: 80vw;
        max-height: none;
        width: auto;
        height: auto;
    }
}

/* ── Endless Mode ──────────────────────────────────────────────────────────── */


#endless-mode-toggle {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 155px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#endless-mode-toggle.active {
    background: #444;
    color: #ddd;
    border-color: #777;
}

#endless-mode-toggle:hover {
    background: #444;
}

#endless-mode-toggle.active:hover {
    background: #555;
}

#private-library-toggle {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 125px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#private-library-toggle.active {
    background: #444;
    color: #ddd;
    border-color: #777;
}

#private-library-toggle:hover {
    background: #444;
}

#private-library-toggle.active:hover {
    background: #555;
}

.library-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.song-bookmark-btn {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.song-bookmark-btn img {
    width: 25px;
    height: 25px;
    filter: invert(1);
    opacity: 0.45;
    transition: filter 0.2s, opacity 0.2s;
    display: block;
    pointer-events: none;
}

.song-bookmark-btn:hover img {
    opacity: 0.75;
}

.song-bookmark-btn--active img {
    opacity: 1;
    filter: invert(84%) sepia(43%) saturate(1352%) hue-rotate(5deg) brightness(103%) contrast(97%);
}

.star-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    background: #ffd700;
    mask-image: url('Assets/Images/UI/Star.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('Assets/Images/UI/Star.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    pointer-events: none;
    z-index: 10;
    animation: star-ripple-expand 0.52s ease-out both;
}

@keyframes star-ripple-expand {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

.song-bookmark-btn:hover {
}

.song-bookmark-btn--active {
}

#bookmarked-only-toggle {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#bookmarked-only-toggle.active {
    background: #1a1400;
    color: #fd0;
    border-color: #c90;
    text-shadow: 0 0 6px #fd088;
}

#bookmarked-only-toggle:hover {
    background: #444;
}

#bookmarked-only-toggle.active:hover {
    background: #2a2000;
}

#playing-now-toggle {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#playing-now-toggle.active {
    background: #0d1f0d;
    color: #4caf50;
    border-color: #2e7d32;
    text-shadow: 0 0 6px #4caf5088;
}

#playing-now-toggle:hover {
    background: #444;
}

#playing-now-toggle.active:hover {
    background: #132013;
}

#endless-diff-notice {
    color: #00ccff;
    font-size: 14px;
    margin: 0 0 10px;
}

#endless-mode-indicator {
    text-align: center;
    pointer-events: none;
    margin-bottom: 0;
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
    transition: max-height 0.55s ease, opacity 0.4s ease, margin-bottom 0.4s ease;
}

#endless-mode-indicator img {
    display: block;
    max-height: 125px;
    width: auto;
}

/* ── Endless Mode — Neon Cyan Theme ───────────────────────────────────────── */

body.endless-active {
    background-color: #08161e;
    color: #00ccff;
    transition: background-color 0.5s, color 0.5s;
}

/* Title GIF glow */
body.endless-active h1 img {
    filter: drop-shadow(0 0 10px #00ccff88);
}

body.endless-active #version-label {
    color: rgba(0, 204, 255, 0.55);
}

/* Song subtitle (song name on diff/game screens) */
body.endless-active #song-subtitle,
body.endless-active #game-hud-difficulty,
body.endless-active #game-song-title {
    color: #00ccff;
    text-shadow: 0 0 10px #00ccff66;
}
body.endless-active #game-song-artist {
    color: #00ccffaa;
}

body.endless-active #subtitle-difficulty {
    color: #00ccff;
}

/* Library heading */
body.endless-active #song-library h2 {
    color: #00ccff;
    text-shadow: 0 0 10px #00ccff66;
}

/* Library song cards */
body.endless-active .library-song-card {
    background-color: #0d2233;
    border-color: #00ccff44;
    box-shadow: 0 0 5px #00ccff66;
}

body.endless-active .library-song-name {
    color: #00ccff;
}

body.endless-active .library-song-channel,
body.endless-active .library-song-channel a,
body.endless-active .library-song-date,
body.endless-active .library-song-play-count,
body.endless-active .library-song-added-by,
body.endless-active .library-song-rating,
body.endless-active .library-song-scores,
body.endless-active .library-song-scores-summary,
body.endless-active .library-song-scores details summary,
body.endless-active .library-score-row,
body.endless-active .library-score-list,
body.endless-active .library-song-scores > p,
body.endless-active .song-comments > summary,
body.endless-active .comments-count,
body.endless-active .song-comments-loading,
body.endless-active .song-comments-empty,
body.endless-active .comment-no-access,
body.endless-active .comment-item-header,
body.endless-active .comment-item-text {
    color: #00ccff99;
}

body.endless-active .library-score-clickable {
    color: #00ccff99;
}

body.endless-active .library-song-explicit {
    color: #ff4444;
    text-shadow: 0 0 6px #ff2222, 0 0 14px #ff000099;
    border-color: #ff444466;
}

body.endless-active .library-song-pg {
    color: #00ff88;
    text-shadow: 0 0 6px #00ff88, 0 0 14px #00ff88;
    border-color: #00ff88;
    box-shadow: 0 0 6px #00ff8866;
}

body.endless-active .library-song-pg-verified {
    color: #00ff88;
    text-shadow: 0 0 6px #00ff88, 0 0 14px #00ff88;
    border-color: #00ff88;
    box-shadow: 0 0 8px #00ff88aa;
}

body.endless-active .library-song-not-rated {
    color: #00ccff;
    background: #0d2a3a;
    border-color: #00ccff;
}

body.endless-active #rating-badge-tooltip {
    background: #0d2233;
    border-color: #00ccff44;
    color: #00ccffcc;
    box-shadow: 0 0 8px #00ccff22;
}

body.endless-active .library-score-clickable:hover {
    background-color: rgba(0, 204, 255, 0.12);
}

body.endless-active .comment-delete-btn,
body.endless-active .comment-report-btn {
    border-color: #00ccff33;
    color: #00ccff55;
}

body.endless-active .comment-item {
    background: rgba(0, 204, 255, 0.06);
    border: 1px solid #00ccff22;
}

body.endless-active .comment-textarea {
    background: #071820;
    border-color: #00ccff44;
    color: #00ccff;
}

body.endless-active .comment-textarea:focus {
    border-color: #00ccff;
}

body.endless-active .comment-submit-btn {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active .comment-submit-btn:hover {
    background: #103444;
}

body.endless-active .library-play-button,
body.endless-active .library-load-chart-button,
body.endless-active .library-bonus-screen-button {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active .library-play-button:hover,
body.endless-active .library-load-chart-button:hover,
body.endless-active .library-bonus-screen-button:hover {
    background: #103444;
}

body.endless-active .song-flag-btn {
    border-color: #00ccff33;
    color: #00ccff55;
}

body.endless-active .song-flag-btn:hover {
    background: #00ccff22;
    border-color: #00ccff88;
    color: #00ccffbb;
}


body.endless-active .song-bookmark-btn--active {
    box-shadow: none;
}

body.endless-active .song-heart-btn img,
body.endless-active .song-bookmark-btn img {
    filter: invert(66%) sepia(97%) saturate(466%) hue-rotate(155deg) brightness(101%) contrast(101%);
    opacity: 0.45;
}

body.endless-active .song-heart-btn:hover img,
body.endless-active .song-bookmark-btn:hover img {
    opacity: 0.75;
}

body.endless-active .song-heart-btn--active img {
    filter: invert(66%) sepia(97%) saturate(466%) hue-rotate(155deg) brightness(101%) contrast(101%);
    opacity: 1;
}

body.endless-active .song-bookmark-btn--active img {
    filter: invert(66%) sepia(97%) saturate(466%) hue-rotate(155deg) brightness(150%) contrast(101%) drop-shadow(0 0 6px #00ccff);
    opacity: 1;
}

body.endless-active .heart-ripple {
    background: #00ccff;
}

body.endless-active .star-ripple {
    background: #00ccff;
}

body.endless-active #endless-mode-toggle,
body.endless-active #endless-mode-toggle.active {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #endless-mode-toggle:hover,
body.endless-active #endless-mode-toggle.active:hover {
    background: #103444;
}

body.endless-active #library-add-song-button,
body.endless-active #library-credits-button,
body.endless-active #library-open-editor-button {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #library-add-song-button:hover,
body.endless-active #library-credits-button:hover,
body.endless-active #library-open-editor-button:hover {
    background: #103444;
}

body.endless-active #library-add-youtube-button {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #library-add-youtube-button:hover {
    background: #103444;
}

body.endless-active #library-youtube-dialog {
    background: #0a1e2a;
    border-color: #00ccff44;
    box-shadow: 0 6px 24px rgba(0, 204, 255, 0.15);
}

body.endless-active #library-youtube-url {
    background: rgba(0, 204, 255, 0.06);
    border-color: #00ccff44;
    color: #00ccff;
}

body.endless-active #library-youtube-url:focus {
    border-color: #00ccff;
    outline: none;
}

body.endless-active #library-youtube-url::placeholder {
    color: #00ccff55;
}

body.endless-active #library-youtube-submit {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #library-youtube-submit:hover {
    background: #103444;
}

body.endless-active #library-youtube-cancel {
    background: #0d2a3a;
    border: 1px solid #00ccff44;
    color: #00ccff88;
}

body.endless-active #library-youtube-cancel:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active #private-library-toggle {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #private-library-toggle.active {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #private-library-toggle:hover {
    background: #103444;
}

body.endless-active #library-filter-btn {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #library-filter-btn.has-active {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #library-filter-btn:hover {
    background: #103444;
}

body.endless-active #library-filter-panel {
    background: #0a1e2a;
    border-color: #00ccff44;
}

body.endless-active .filter-panel-label {
    color: #00ccff88;
}

body.endless-active .filter-panel-section-header {
    color: #00ccff55;
    border-top-color: #00ccff18;
}

body.endless-active .filter-panel-footer {
    border-top-color: #00ccff22;
}

body.endless-active #bookmarked-only-toggle,
body.endless-active #playing-now-toggle {
    background: #0d2a3a;
    color: #00ccff99;
    border-color: #00ccff44;
}

body.endless-active #bookmarked-only-toggle.active {
    background: #1a1a00;
    color: #ffee00;
    border-color: #ffee00;
    text-shadow: 0 0 6px #ffee0088;
}

body.endless-active #playing-now-toggle.active {
    background: #0d1f0d;
    color: #00ff88;
    border-color: #00ff88;
    text-shadow: 0 0 6px #00ff8888;
}

body.endless-active #bookmarked-only-toggle:hover,
body.endless-active #playing-now-toggle:hover {
    background: #103444;
}

body.endless-active .library-now-playing {
    color: #00ff88;
}

body.endless-active .library-now-playing-dot {
    background: #00ff88;
}

body.endless-active #library-filter-clear,
body.endless-active #library-filter-clear-filters,
body.endless-active #library-filter-clear-sorting {
    color: #00ccff66;
    border-color: #00ccff22;
}

body.endless-active #library-filter-clear:hover,
body.endless-active #library-filter-clear-filters:hover,
body.endless-active #library-filter-clear-sorting:hover {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff44;
}

body.endless-active #library-artist-details > summary {
    background: #0a1e2a;
    border-color: #00ccff33;
    color: #00ccff88;
}

body.endless-active #library-artist-details > summary:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active #library-artist-details[open] > #library-artist-list {
    border-color: #00ccff33;
}

body.endless-active .sort-criterion-pill {
    background: #0a1e2a;
    border-color: #00ccff33;
}

body.endless-active .sort-criterion-label {
    color: #00ccffcc;
    border-right-color: #00ccff22;
}

body.endless-active #logout-btn {
    background: #0d2a3a;
    color: #00ccff99;
    border-color: #00ccff44;
}

body.endless-active #logout-btn:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active #logged-in-label {
    color: #00ccff66;
}

body.endless-active #library-help-button {
    background: #0d2a3a;
    color: #00ccff;
    border-color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #library-help-button:hover {
    background: #103444;
}

body.endless-active .sort-criterion-dir,
body.endless-active .sort-criterion-remove {
    color: #00ccff88;
}

body.endless-active .sort-criterion-dir {
    border-right-color: #00ccff22;
}

body.endless-active .sort-criterion-dir:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active .sort-criterion-remove:hover {
    background: #2a1010;
    color: #ff6666;
}

body.endless-active #library-sort-add-btn {
    background: #0a1e2a;
    border-color: #00ccff44;
    color: #00ccff88;
}

body.endless-active #library-sort-add-btn:hover {
    background: #103444;
    color: #00ccff;
    border-color: #00ccff88;
}

body.endless-active #library-sort-add-list {
    background: #0a1e2a;
    border-color: #00ccff44;
}

body.endless-active .sort-add-option {
    color: #00ccffcc;
    border-top-color: #00ccff22;
}

body.endless-active .sort-add-option:hover {
    background: #103444;
}

body.endless-active #library-filter-linked-label {
    color: #00ccff99;
}

body.endless-active #game-hud {
    background-color: #071318;
    border-color: #00ccff44;
    box-shadow: 0 0 12px #00ccff33;
}

body.endless-active #score,
body.endless-active #live-grade,
body.endless-active #hud-pause-btn {
    color: #eafaff;
    text-shadow: 0 0 8px #00ccff, 0 0 16px #00ccffaa;
}

#endless-loop-count {
    font-size: 20px;
    font-weight: bold;
    color: #eafaff;
    text-shadow: 0 0 8px #00ccff, 0 0 16px #00ccffaa;
    pointer-events: none;
}

body.endless-active #pause-menu {
    background: rgba(4, 14, 22, 0.92);
}

body.endless-active #pause-menu h2 {
    color: #eafaff;
    text-shadow: 0 0 8px #00ccff, 0 0 16px #00ccffaa;
}

body.endless-active #pause-menu button {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #pause-menu button:hover {
    background: #103444;
}

/* ── Global modal endless theme ─────────────────────────────────── */
/* Base modal box — all modals inherit these; override only what differs */
.modal {
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 30px;
    color: white;
    animation: rainbow-card-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Global modal button baseline — applies to every .modal button unless an ID rule overrides */
.modal button {
    padding: 8px 20px;
    background: #1874a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.modal button:hover {
    background: #15628a;
}

.modal button.btn-cancel {
    background: #333;
    color: #aaa;
    border: 1px solid #444;
}

.modal button.btn-cancel:hover {
    background: #444;
    color: #fff;
}

/* Endless-mode overrides — !important required because ID selectors on individual
   modals outrank the .modal class, so these must win without touching each ID rule */
body.endless-active .modal {
    background: #0a1e2a !important;
    border-color: #00ccff44 !important;
    box-shadow: 0 6px 24px rgba(0, 204, 255, 0.15) !important;
    color: #00ccff99 !important;
}

body.endless-active .modal h2 {
    color: #00ccff !important;
    text-shadow: 0 0 10px #00ccff88 !important;
}

body.endless-active .modal h3 {
    color: #00ccff !important;
    text-shadow: 0 0 6px #00ccff66 !important;
}

body.endless-active .modal p {
    color: #00ccff99 !important;
}

body.endless-active .modal button {
    background: #0d2a3a !important;
    border: 1px solid #00ccff !important;
    color: #00ccff !important;
    text-shadow: 0 0 6px #00ccff88 !important;
    box-shadow: 0 0 8px #00ccff44 !important;
}

body.endless-active .modal button:hover {
    background: #103444 !important;
    box-shadow: 0 0 8px #00ccff88 !important;
}

body.endless-active .modal button.btn-cancel {
    border-color: #00ccff44 !important;
    color: #00ccff88 !important;
    text-shadow: none !important;
}

body.endless-active .modal button.btn-cancel:hover {
    border-color: #00ccff !important;
    color: #00ccff !important;
}

body.endless-active .modal input[type="text"],
body.endless-active .modal input[type="url"],
body.endless-active .modal input[type="email"],
body.endless-active .modal input[type="password"],
body.endless-active .modal textarea {
    background: rgba(0, 204, 255, 0.06) !important;
    border-color: #00ccff44 !important;
    color: #00ccff !important;
}

body.endless-active .modal input[type="text"]:focus,
body.endless-active .modal input[type="url"]:focus,
body.endless-active .modal input[type="email"]:focus,
body.endless-active .modal input[type="password"]:focus,
body.endless-active .modal textarea:focus {
    border-color: #00ccff !important;
    outline: none;
}

body.endless-active .modal input::placeholder,
body.endless-active .modal textarea::placeholder {
    color: #00ccff55 !important;
}

body.endless-active .score-detail-row {
    border-bottom-color: #00ccff22;
}

body.endless-active .score-detail-label {
    color: #00ccff99;
}

body.endless-active .score-detail-value {
    color: #00ccff;
}

body.endless-active #name-entry-stats,
body.endless-active .rating-question,
body.endless-active #firework-credit,
body.endless-active #firework-credit a {
    color: #00ccff99;
}

body.endless-active #rating-section {
    border-top-color: #00ccff44;
}

body.endless-active .rating-btn {
    background: #0d2233;
    border-color: #00ccff44;
    color: #00ccff;
}

body.endless-active .rating-btn:hover {
    background: #103444;
    border-color: #00ccff;
}

body.endless-active .rating-btn.rating-active {
    border-color: #00ccff;
    background: #0d2a3a;
}

body.endless-active #play-again-button,
body.endless-active #change-difficulty-button {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}

body.endless-active #play-again-button:hover,
body.endless-active #change-difficulty-button:hover {
    background: #103444;
}

body.endless-active #library-return-button {
    background: #071820;
    border: 1px solid #00ccff44;
    color: #00ccff99;
}

body.endless-active #library-return-button:hover {
    background: #0d2233;
    border-color: #00ccff;
}


body.endless-active #player-name-input {
    background: #071820;
    border-color: #00ccff;
    color: #00ccff;
}

body.endless-active #player-name-input:focus {
    border-color: #00ccff;
    box-shadow: 0 0 8px #00ccff88;
}

/* Scroll indicators — lists */
body.endless-active #library-scroll-thumb {
    background: #00ccff;
    box-shadow: 0 0 6px #00ccff88;
}

/* Scroll indicators — dropdowns */
body.endless-active select {
    scrollbar-color: #00ccff #071820;
}

body.endless-active select::-webkit-scrollbar-track {
    background: #071820;
}

body.endless-active select::-webkit-scrollbar-thumb {
    background: #00ccff;
    border-radius: 3px;
    box-shadow: 0 0 6px #00ccff88;
}

/* Global scrollbar override */
body.endless-active * {
    scrollbar-color: #00ccff #071820;
}

body.endless-active ::-webkit-scrollbar-track {
    background: #071820;
}

body.endless-active ::-webkit-scrollbar-thumb {
    background: #00ccff;
    border-radius: 3px;
    box-shadow: 0 0 6px #00ccff88;
}

/* Library search / sort bar */
body.endless-active #library-search-row {
    border-color: #00ccff44;
}

body.endless-active #library-search,
body.endless-active #library-sort,
body.endless-active #library-sort-dir {
    background: #0d2233;
    border-color: #00ccff44;
    color: #00ccff;
}

body.endless-active #library-search {
    border-color: #00ccff;
    box-shadow: 0 0 6px #00ccff88;
}

body.endless-active #library-artist-list {
    scrollbar-color: #00ccff44 transparent;
}

body.endless-active #youtube-quota-bar-track {
    background: #0d2233;
    border-color: #00ccff22;
}

body.endless-active #youtube-quota-label {
    color: #00ccff55;
}

body.endless-active #youtube-quota-label.quota-warn {
    color: #ff980099;
}

body.endless-active #youtube-quota-label.quota-full {
    color: #e5393599;
}

body.endless-active #youtube-quota-bar-fill {
    background: #00ccff;
    box-shadow: 0 0 6px #00ccff88;
    transition: width 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

body.endless-active #youtube-quota-bar-fill.quota-warn {
    background: #ff9800;
    box-shadow: 0 0 6px #ff980088;
}

body.endless-active #youtube-quota-bar-fill.quota-full {
    background: #e53935;
    box-shadow: 0 0 6px #e5393588;
}

body.endless-active .artist-filter-option {
    color: #00ccffcc;
}

body.endless-active .artist-filter-option:hover {
    background: #0d2a3a;
}

body.endless-active .artist-filter-option input[type="checkbox"] {
    accent-color: #00ccff;
}

body.endless-active #library-sort-group {
    border-color: #00ccff;
    box-shadow: 0 0 6px #00ccff88;
    background: #0d2233;
}



/* Difficulty slider screen buttons */
body.endless-active #start-button,
body.endless-active #edit-chart-button,
body.endless-active #difficulty-back-button {
    background-color: #0d2a3a;
    border-color: #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #start-button:hover,
body.endless-active #edit-chart-button:hover,
body.endless-active #difficulty-back-button:hover {
    background-color: #103444;
}

/* Game ready text */
body.endless-active #game-ready {
    color: #00ccff;
    text-shadow: 0 0 20px #00ccffaa;
}

/* Endless diff notice */
body.endless-active #endless-diff-notice {
    color: #00ccff;
}

body.endless-active .note-sprite.arrow-sprite,
body.endless-active .note-head.arrow-sprite {
    filter: drop-shadow(0 0 10px #00ccff88);
}

body.endless-active .column {
    border-left-color: #00ccff;
    border-right-color: #00ccff;
}

body.endless-active #player-string {
    background-color: #00ccff;
    box-shadow: 0 0 10px 2px rgba(0, 204, 255, 0.6);
}

/* Bug report + Accessibility buttons */
body.endless-active #bug-report-btn {
    background: #0d2a3a;
    border-color: #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #bug-report-btn:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active #controls-btn,
body.endless-active #accessibility-btn {
    background: #0d2a3a;
    border-color: #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #controls-btn:hover,
body.endless-active #accessibility-btn:hover {
    background: #103444;
    color: #00ccff;
}

/* Bug report modal */
body.endless-active #bug-report-char-count {
    color: #00ccff55;
}

body.endless-active #bug-status-details {
    border-color: #00ccff33;
}

body.endless-active #bug-status-summary {
    background: #0a1e2a;
    color: #00ccff99;
}

body.endless-active #bug-status-summary:hover {
    background: #103444;
    color: #00ccff;
}

body.endless-active #bug-status-list {
    background: #06141e;
}

body.endless-active .bug-status-item {
    border-bottom-color: #00ccff22;
}

body.endless-active .bug-status-msg {
    color: #00ccff99;
}

body.endless-active .bug-status-loading {
    color: #00ccff55;
}

body.endless-active #bug-report-contact {
    color: #00ccff55;
}

body.endless-active #bug-report-contact a {
    color: #00ccff;
}


/* ── Help modal (endless) ───────────────────────────────────────── */
body.endless-active #help-modal h3 {
    border-bottom-color: #00ccff33;
}

body.endless-active .help-note {
    color: #00ccff66;
}

body.endless-active .help-table td {
    border-bottom-color: #00ccff22;
}

/* ── Credits modal (endless) ───────────────────────────────────── */
body.endless-active #credits-content a {
    color: #00ccff;
}

/* ── Flag status button (endless) ──────────────────────────────── */
body.endless-active #flag-status-btn {
    background: #0d2a3a;
    border-color: #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #flag-status-btn:hover {
    background: #103444;
    color: #00ccff;
}

/* ── Leaderboard button (endless) ──────────────────────────────── */
body.endless-active #leaderboard-btn {
    background: #0d2a3a;
    border-color: #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
    box-shadow: 0 0 8px #00ccff44;
}

body.endless-active #leaderboard-btn:hover {
    background: #103444;
    color: #00ccff;
}

/* ── Flag status modal ──────────────────────────────────────────── */
#flag-status-modal {
    max-width: 480px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#flag-status-modal h2 {
    margin: 0;
    font-size: 18px;
    color: #c87941;
}

#flag-status-modal > p {
    margin: 0;
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
}

#flag-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.flag-status-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 13px;
}

.flag-status-title {
    flex: 1;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flag-status-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flag-status-badge.pending  { background: #3a2a00; color: #f0a500; border: 1px solid #f0a50066; }
.flag-status-badge.approved { background: #0a2a0a; color: #4caf50; border: 1px solid #4caf5066; }
.flag-status-badge.denied   { background: #2a0a0a; color: #e05555; border: 1px solid #e0555566; }

.flag-status-date {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.flag-status-dismiss {
    background: none;
    border: none;
    color: #555;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.flag-status-dismiss:hover { color: #e05555; }

#flag-status-empty {
    font-size: 13px;
    color: #666;
    text-align: center;
    padding: 16px 0;
}

#flag-status-actions {
    display: flex;
    justify-content: flex-end;
}

/* ── Bug report button ──────────────────────────────────────────── */

/* ── Bug report modal ───────────────────────────────────────────── */
#bug-report-modal {
    max-width: 480px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#bug-report-modal h2 {
    margin: 0;
    font-size: 18px;
    color: #c87941;
}

#bug-report-modal p {
    margin: 0;
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
}

#bug-report-text {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    padding: 10px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

#bug-report-text:focus {
    outline: none;
    border-color: #c87941;
}

#bug-report-char-count {
    font-size: 11px;
    color: #666;
    text-align: right;
    margin-top: -6px;
}

#bug-report-status {
    font-size: 12px;
    min-height: 16px;
}

#bug-report-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

#bug-report-submit {
    background: #c87941;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

#bug-report-submit:hover:not(:disabled) {
    background: #e8a060;
}

#bug-report-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

#bug-report-cancel {
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

#bug-report-cancel:hover {
    background: #444;
}

#bug-status-details {
    margin-top: 16px;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
}

#bug-status-summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ccc;
    background: #2a2a2a;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

#bug-status-summary::-webkit-details-marker { display: none; }

#bug-status-summary::before {
    content: '▶';
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: inline-block;
}

#bug-status-details[open] > #bug-status-summary::before {
    transform: rotate(90deg);
}

#bug-status-summary:hover { color: #fff; background: #333; }

#bug-status-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: #1e1e1e;
}

.bug-status-loading {
    color: #888;
    font-size: 0.85rem;
}

.bug-status-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.83rem;
    border-bottom: 1px solid #333;
    padding-bottom: 7px;
}

.bug-status-item:last-child { border-bottom: none; padding-bottom: 0; }

.bug-status-msg {
    color: #ccc;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bug-status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bug-status-badge.unresolved { background: #553; color: #ff9; }
.bug-status-badge.pending    { background: #355; color: #9cf; }
.bug-status-badge.fixed      { background: #253; color: #8f8; }
.bug-status-badge.non-issue  { background: #444; color: #aaa; }

#bug-report-contact {
    margin-top: 14px;
    font-size: 0.85rem;
    color: #999;
    text-align: center;
}

#bug-report-contact a {
    color: #7af;
    text-decoration: none;
}

#bug-report-contact a:hover { text-decoration: underline; }

/* ── Tutorial overlay ──────────────────────────────────────────────────────── */

#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: all;
}

#tutorial-overlay.hidden {
    display: none;
}

/* The spotlight box — box-shadow punches a transparent "window" in the dim */
#tutorial-spotlight {
    position: fixed;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    pointer-events: none;
    outline: 2px solid rgba(162, 0, 226, 0.7);
}

#tutorial-spotlight.no-target {
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85);
    outline: none;
}

/* The card that shows tutorial text */
#tutorial-card {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 90vw);
    background: #1a1a2e;
    border: 1px solid #555;
    border-radius: 12px;
    padding: 24px 28px 20px;
    color: #eee;
    z-index: 20001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    transition: top 0.35s ease, bottom 0.35s ease;
}

#tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

#tutorial-font-btn {
    background: #2a2a40;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

#tutorial-font-btn:hover {
    background: #383858;
    color: #fff;
}

#tutorial-font-panel {
    border-bottom: 1px solid #333;
    margin-bottom: 14px;
    padding-bottom: 12px;
}

#tutorial-font-panel .a11y-toggle-row {
    color: #ccc;
    font-size: 13px;
}

#tutorial-step-indicator {
    font-size: 12px;
    color: #888;
    text-align: right;
    letter-spacing: 0.03em;
}

#tutorial-title {
    margin: 0 0 12px;
    font-size: 20px;
    color: #ffd700;
    text-align: center;
}

#tutorial-text {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.7;
    color: #ccc;
    text-align: left;
}

#tutorial-text p {
    margin: 0 0 16px;
}

#tutorial-text p:last-child {
    margin-bottom: 0;
}

#tutorial-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

#tutorial-prev,
#tutorial-next,
#tutorial-finish {
    padding: 8px 22px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #666;
    transition: background 0.15s, border-color 0.15s;
}

#tutorial-prev {
    background: #2a2a40;
    color: #bbb;
}

#tutorial-prev:hover {
    background: #383858;
    color: #fff;
}

#tutorial-prev:disabled {
    opacity: 0.35;
    cursor: default;
}

#tutorial-next,
#tutorial-finish {
    background: #6200a0;
    color: #fff;
    border-color: #a200e2;
    font-weight: bold;
}

#tutorial-next:hover,
#tutorial-finish:hover {
    background: #8000cc;
}

#tutorial-next.hidden,
#tutorial-finish.hidden {
    display: none;
}

/* ── OpenDyslexic fonts ───────────────────────────────────────────── */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('Assets/Text/Fonts/OpenDyslexic/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('Assets/Text/Fonts/OpenDyslexic/OpenDyslexic-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('Assets/Text/Fonts/OpenDyslexic/OpenDyslexic-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'OpenDyslexicMono';
    src: url('Assets/Text/Fonts/OpenDyslexic/OpenDyslexicMono-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* CSS variable set per-class; one selector list applies it to all text elements */
body.a11y-dyslexic-od  { --a11y-font: 'OpenDyslexic', sans-serif; }
body.a11y-dyslexic-odm { --a11y-font: 'OpenDyslexicMono', monospace; }

body.a11y-dyslexic-od,  body.a11y-dyslexic-od button,  body.a11y-dyslexic-od input,
body.a11y-dyslexic-od textarea,  body.a11y-dyslexic-od label,  body.a11y-dyslexic-od p,
body.a11y-dyslexic-od h1,  body.a11y-dyslexic-od h2,  body.a11y-dyslexic-od h3,
body.a11y-dyslexic-od td,  body.a11y-dyslexic-od th,
body.a11y-dyslexic-odm, body.a11y-dyslexic-odm button, body.a11y-dyslexic-odm input,
body.a11y-dyslexic-odm textarea, body.a11y-dyslexic-odm label, body.a11y-dyslexic-odm p,
body.a11y-dyslexic-odm h1, body.a11y-dyslexic-odm h2, body.a11y-dyslexic-odm h3,
body.a11y-dyslexic-odm td, body.a11y-dyslexic-odm th {
    font-family: var(--a11y-font) !important;
}

/* Modals with ID-based rules need explicit targeting to win specificity */
body.a11y-dyslexic-od #konami-title,
body.a11y-dyslexic-od #konami-message,
body.a11y-dyslexic-od #konami-close,
body.a11y-dyslexic-od #rating-badge-tooltip,
body.a11y-dyslexic-odm #konami-title,
body.a11y-dyslexic-odm #konami-message,
body.a11y-dyslexic-odm #konami-close,
body.a11y-dyslexic-odm #rating-badge-tooltip {
    font-family: var(--a11y-font) !important;
}



/* Freeze arrow sprite animation on frame 7 */
body.a11y-static-arrows .column-arrow.arrow-sprite {
    animation: none;
    background-position-x: -360px;
}
body.a11y-static-arrows .note-sprite.arrow-sprite,
body.a11y-static-arrows .note-head.arrow-sprite {
    animation: none;
    background-position-x: -480px;
}

/* ── Toxic Frog note theme ───────────────────────────────────────── */

/* 8 frames at 150px each → 1200px total */
@keyframes frog-idle-anim {
    from { background-position-x: 0; }
    to   { background-position-x: -1200px; }
}

/* 8 frames at 75px each → 600px total (125% of 60px column arrow) */
@keyframes frog-idle-column-anim {
    from { background-position-x: 0; }
    to   { background-position-x: -600px; }
}

/* Freeze on frame 4 (index 3) during pulse */
body.note-theme-frogs .note-sprite.arrow-sprite.frog-pulsing {
    animation: none;
    background-position-x: -450px;
}

/* last 6 of 9 frames (frames 3–8), 200px each */
@keyframes frog-explosion-anim {
    from { background-position-x: -600px; }
    to   { background-position-x: -1800px; }
}

body.note-theme-frogs .note-sprite.arrow-sprite {
    width: 150px;
    height: 150px;
    top: -35px;
    left: -28px;
    right: auto;
    bottom: auto;
    background-size: 1200px 150px;
    animation: frog-idle-anim 0.8s steps(8) infinite;
    border-radius: 0;
    background-color: transparent;
}

/* Sustain head: container only — sprite and circle come from child elements */
body.note-theme-frogs .note-head.arrow-sprite {
    position: relative;
    background-image: none;
    border-radius: 0;
    background-color: transparent;
}

/* Hide sustain head children in non-frog mode */
.sustained-game-note .note-head > .note-circle,
.sustained-game-note .note-head > .note-sprite {
    display: none;
}
body.note-theme-frogs .sustained-game-note .note-head > .note-circle,
body.note-theme-frogs .sustained-game-note .note-head > .note-sprite {
    display: block;
}

body.note-theme-frogs .column-arrow.arrow-sprite {
    background-size: 600px 75px;
    background-position-y: center;
    animation: frog-idle-column-anim 0.8s steps(8) infinite;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-frogs .arrow-sprite.arrow-left {
    background-image: url('Assets/Images/Notes/ToxicFrogs/BlueBlue/ToxicFrogBlueBlue_Idle.png');
}
body.note-theme-frogs .arrow-sprite.arrow-down {
    background-image: url('Assets/Images/Notes/ToxicFrogs/GreenBrown/ToxicFrogGreenBrown_Idle.png');
}
body.note-theme-frogs .arrow-sprite.arrow-up {
    background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleWhite/ToxicFrogPurpleWhite_Idle.png');
}
body.note-theme-frogs .arrow-sprite.arrow-right {
    background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleBlue/ToxicFrogPurpleBlue_Idle.png');
}

/* Bubble overlay — semi-transparent so the frog remains visible */
body.note-theme-frogs .note-sprite.arrow-sprite::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 65%;
    background-position: 40% center;
    background-repeat: no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

body.note-theme-frogs .note-sprite.arrow-sprite.arrow-left::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Blue.png');
}
body.note-theme-frogs .note-sprite.arrow-sprite.arrow-down::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Green.png');
}
body.note-theme-frogs .note-sprite.arrow-sprite.arrow-up::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Yellow.png');
}
body.note-theme-frogs .note-sprite.arrow-sprite.arrow-right::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Red.png');
}

/* No rotation for frogs — they all face the same direction */
body.note-theme-frogs .note.arrow-left,
body.note-theme-frogs .note.arrow-down,
body.note-theme-frogs .note.arrow-up,
body.note-theme-frogs .note.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-frogs .column-arrow.arrow-left,
body.note-theme-frogs .column-arrow.arrow-down,
body.note-theme-frogs .column-arrow.arrow-up,
body.note-theme-frogs .column-arrow.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-frogs .note-head.arrow-sprite.arrow-left,
body.note-theme-frogs .note-head.arrow-sprite.arrow-down,
body.note-theme-frogs .note-head.arrow-sprite.arrow-up,
body.note-theme-frogs .note-head.arrow-sprite.arrow-right {
    transform: none;
}

/* Hide the background circle in frog mode */
body.note-theme-frogs .note-circle { opacity: 0; }

/* Freeze frog animation when static arrows is also on */
body.a11y-static-arrows.note-theme-frogs .note-sprite.arrow-sprite,
body.a11y-static-arrows.note-theme-frogs .column-arrow.arrow-sprite {
    animation: none;
    background-position-x: 0;
}

/* Frog explosion hit effect */
.frog-explosion {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: 1800px 200px;
    animation: frog-explosion-anim 0.2s steps(6) 1 forwards;
    pointer-events: none;
    z-index: 10;
}

.frog-explosion.arrow-left {
    background-image: url('Assets/Images/Notes/ToxicFrogs/BlueBlue/ToxicFrogBlueBlue_Explosion.png');
}
.frog-explosion.arrow-down {
    background-image: url('Assets/Images/Notes/ToxicFrogs/GreenBrown/ToxicFrogGreenBrown_Explosion.png');
    filter: hue-rotate(120deg) saturate(2) brightness(1.1);
}
.frog-explosion.arrow-up {
    background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleWhite/ToxicFrogPurpleWhite_Explosion.png');
    filter: hue-rotate(150deg) saturate(4) brightness(1.3);
}
.frog-explosion.arrow-right {
    background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleBlue/ToxicFrogPurpleBlue_Explosion.png');
    filter: hue-rotate(120deg) saturate(2) brightness(1.1);
}

/* ── Green Frog note theme ───────────────────────────────────────── */

/* Sheet: 448×128px, 4 rows × 32px (idle/hop/hurt/attack), 7 cols × 64px.
   Scaled to 1050×300 → each frame displays at 150×75px.
   background-position shorthand is used throughout to lock the y-row at every step. */
/* Frame: 172×95px; sheet: 1204×380px (7 cols × 172, 4 rows × 95) */
@keyframes green-frog-idle-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -688px 0px; }
}

/* Hop animation: row 1, 7 frames × 172px = 1204px, y = -95px */
@keyframes green-frog-hop-anim {
    from { background-position: 0px -95px; }
    to   { background-position: -1204px -95px; }
}

/* Column idle: half-scale (602×190), 4 frames × 86px = 344px, row 0 y = 0 */
@keyframes green-frog-idle-column-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -344px 0px; }
}

/* Pulse: play hop animation when key is pressed; attack row 3, y = -281.25px */
body.note-theme-green-frog .note-sprite.arrow-sprite.green-frog-pulsing {
    animation: green-frog-hop-anim 0.4s steps(7) infinite;
}

body.note-theme-green-frog .note-sprite.arrow-sprite {
    width: 172px;
    height: 95px;
    top: -9px;
    left: -5px;
    right: auto;
    bottom: auto;
    background-image: url('Assets/Images/Notes/frog_spritesheet.png');
    background-size: 1204px 380px;
    animation: green-frog-idle-anim 0.8s steps(4) infinite;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-green-frog .note-head.arrow-sprite {
    position: relative;
    background-image: none;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-green-frog .sustained-game-note .note-head > .note-circle,
body.note-theme-green-frog .sustained-game-note .note-head > .note-sprite {
    display: block;
}

/* Column arrow — half-scale (616×174), 4 frames × 88px = 352px */
body.note-theme-green-frog .column-arrow.arrow-sprite {
    background-image: url('Assets/Images/Notes/frog_spritesheet.png');
    background-size: 602px 190px;
    animation: green-frog-idle-column-anim 0.8s steps(4) infinite;
    border-radius: 0;
    background-color: transparent;
}


/* Color-tint per lane — rotate from green (120°) to match lane color.
   :not(.note-head) prevents the filter from hitting the sustain head container,
   which would hue-rotate the note-circle inside it. */
body.note-theme-green-frog .arrow-sprite.arrow-left:not(.note-head) {
    filter: hue-rotate(120deg) saturate(0.9);
}
body.note-theme-green-frog .arrow-sprite.arrow-down:not(.note-head) {
    filter: none;
}
body.note-theme-green-frog .arrow-sprite.arrow-up:not(.note-head) {
    filter: hue-rotate(300deg) saturate(1.5) brightness(1.15);
}
body.note-theme-green-frog .arrow-sprite.arrow-right:not(.note-head) {
    filter: hue-rotate(240deg) saturate(1.2);
}

/* Bubble overlay — green image is used for all lanes; parent filter tints it */
body.note-theme-green-frog .note-sprite.arrow-sprite::after {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    right: 0;
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Green.png');
    background-size: 83px 83px;
    background-position: 4px calc(50% + 1px);
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

/* No rotation — frog faces forward in all lanes */
body.note-theme-green-frog .note.arrow-left,
body.note-theme-green-frog .note.arrow-down,
body.note-theme-green-frog .note.arrow-up,
body.note-theme-green-frog .note.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-green-frog .column-arrow.arrow-left,
body.note-theme-green-frog .column-arrow.arrow-down,
body.note-theme-green-frog .column-arrow.arrow-up,
body.note-theme-green-frog .column-arrow.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-green-frog .note-head.arrow-sprite.arrow-left,
body.note-theme-green-frog .note-head.arrow-sprite.arrow-down,
body.note-theme-green-frog .note-head.arrow-sprite.arrow-up,
body.note-theme-green-frog .note-head.arrow-sprite.arrow-right {
    transform: none;
}

/* Note circle stays visible — shows through transparent frog areas as a colored ring */

/* Preserve lane filter AND add endless glow */
body.endless-active.note-theme-green-frog .arrow-sprite.arrow-left:not(.note-head) {
    filter: hue-rotate(120deg) saturate(0.9) drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-green-frog .arrow-sprite.arrow-down:not(.note-head) {
    filter: drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-green-frog .arrow-sprite.arrow-up:not(.note-head) {
    filter: hue-rotate(300deg) saturate(1.5) brightness(1.15) drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-green-frog .arrow-sprite.arrow-right:not(.note-head) {
    filter: hue-rotate(240deg) saturate(1.2) drop-shadow(0 0 10px #00ccff88);
}

body.a11y-static-arrows.note-theme-green-frog .note-sprite.arrow-sprite,
body.a11y-static-arrows.note-theme-green-frog .column-arrow.arrow-sprite {
    animation: none;
    background-position: 0px 0px;
}

/* ── Ghost note theme ───────────────────────────────────────────── */

/* Sheet: 256×224px, 8 cols × 7 rows, 32×32px frames
   Displayed at 840×630px (105×90px per frame)
   Row 0 = idle (8 frames), row 4 = pulse (5 frames), row 2 = explosion (8 frames) */
@keyframes ghost-idle-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -840px 0px; }
}

@keyframes ghost-pulse-anim {
    from { background-position: -525px -360px; }
    to   { background-position: 0px -360px; }
}

@keyframes ghost-idle-column-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -420px 0px; }
}

@keyframes ghost-explosion-anim {
    from { background-position: 0px -180px; }
    to   { background-position: -840px -180px; }
}

body.note-theme-ghost .note-sprite.arrow-sprite.ghost-pulsing {
    animation: ghost-pulse-anim 0.3s steps(5) 1 forwards;
}

body.note-theme-ghost .note-sprite.arrow-sprite {
    width: 105px;
    height: 90px;
    top: -13px;
    left: -24px;
    right: auto;
    bottom: auto;
    background-image: url('Assets/Images/Notes/ghost_spritesheet.png');
    background-size: 840px 630px;
    animation: ghost-idle-anim 0.8s steps(8) infinite;
    border-radius: 0;
    background-color: transparent;
    image-rendering: pixelated;
}

body.note-theme-ghost .note-head.arrow-sprite {
    position: relative;
    background-image: none;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-ghost .sustained-game-note .note-head > .note-circle,
body.note-theme-ghost .sustained-game-note .note-head > .note-sprite {
    display: block;
}

body.note-theme-ghost .column-arrow.arrow-sprite {
    background-image: url('Assets/Images/Notes/ghost_spritesheet.png');
    background-size: 420px 315px;
    background-position-y: 0;
    animation: ghost-idle-column-anim 0.8s steps(8) infinite;
    border-radius: 0;
    background-color: transparent;
    image-rendering: pixelated;
}

/* sepia(1) gives white areas a warm chroma so hue-rotate can shift them to lane color */
body.note-theme-ghost .arrow-sprite.arrow-left:not(.note-head) {
    filter: sepia(1) hue-rotate(190deg) saturate(8);
}
body.note-theme-ghost .arrow-sprite.arrow-down:not(.note-head) {
    filter: sepia(1) hue-rotate(95deg) saturate(8);
}
body.note-theme-ghost .arrow-sprite.arrow-up:not(.note-head) {
    filter: sepia(1) saturate(8) brightness(1.2);
}
body.note-theme-ghost .arrow-sprite.arrow-right:not(.note-head) {
    filter: sepia(1) hue-rotate(320deg) saturate(8);
}

body.note-theme-ghost .note.arrow-left,
body.note-theme-ghost .note.arrow-down,
body.note-theme-ghost .note.arrow-up,
body.note-theme-ghost .note.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-ghost .column-arrow.arrow-left,
body.note-theme-ghost .column-arrow.arrow-down,
body.note-theme-ghost .column-arrow.arrow-up,
body.note-theme-ghost .column-arrow.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-ghost .note-head.arrow-sprite.arrow-left,
body.note-theme-ghost .note-head.arrow-sprite.arrow-down,
body.note-theme-ghost .note-head.arrow-sprite.arrow-up,
body.note-theme-ghost .note-head.arrow-sprite.arrow-right {
    transform: none;
}

body.note-theme-ghost .note-circle { opacity: 0; }

body.endless-active.note-theme-ghost .arrow-sprite.arrow-left:not(.note-head) {
    filter: sepia(1) hue-rotate(190deg) saturate(8) drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-ghost .arrow-sprite.arrow-down:not(.note-head) {
    filter: sepia(1) hue-rotate(95deg) saturate(8) drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-ghost .arrow-sprite.arrow-up:not(.note-head) {
    filter: sepia(1) saturate(8) brightness(1.2) drop-shadow(0 0 10px #00ccff88);
}
body.endless-active.note-theme-ghost .arrow-sprite.arrow-right:not(.note-head) {
    filter: sepia(1) hue-rotate(320deg) saturate(8) drop-shadow(0 0 10px #00ccff88);
}

body.a11y-static-arrows.note-theme-ghost .note-sprite.arrow-sprite,
body.a11y-static-arrows.note-theme-ghost .column-arrow.arrow-sprite {
    animation: none;
    background-position: 0px 0px;
}

/* Explosion — row 2, same scale and position as the note sprite */
.ghost-explosion {
    position: absolute;
    width: 105px;
    height: 90px;
    left: 50%;
    margin-left: -64px;
    background-image: url('Assets/Images/Notes/ghost_spritesheet.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: 840px 630px;
    animation: ghost-explosion-anim 0.2s steps(8) 1 forwards;
    pointer-events: none;
    z-index: 10;
}

.ghost-explosion.arrow-left  { filter: sepia(1) hue-rotate(190deg) saturate(8); }
.ghost-explosion.arrow-down  { filter: sepia(1) hue-rotate(95deg) saturate(8); }
.ghost-explosion.arrow-up    { filter: sepia(1) saturate(8) brightness(1.2); }
.ghost-explosion.arrow-right { filter: sepia(1) hue-rotate(320deg) saturate(8); }

/* ── Cat note theme ──────────────────────────────────────────────── */

/* Sheet: 640×64px, 8 frames × 80px, displayed at 896×101px (1.4× scale) */
@keyframes cat-idle-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -448px 0px; }
}

@keyframes cat-attack-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -784px 0px; }
}

@keyframes cat-idle-column-anim {
    from { background-position: 0px 0px; }
    to   { background-position: -224px 0px; }
}

body.note-theme-cats .note-sprite.arrow-sprite.cat-pulsing {
    animation: cat-attack-anim 0.3s steps(7) 1 forwards;
}

body.note-theme-cats .note-sprite.arrow-sprite.cat-pulsing.arrow-left {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/ATTACK_Blue.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.cat-pulsing.arrow-down {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/ATTACK_Green.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.cat-pulsing.arrow-up {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/ATTACK_Yellow.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.cat-pulsing.arrow-right {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/ATTACK_Red.png');
}

body.note-theme-cats .note-sprite.arrow-sprite {
    width: 117px;
    height: 129.5px;
    top: -12px;
    left: -7.5px;
    right: auto;
    bottom: auto;
    background-size: 896px 101px;
    animation: cat-idle-anim 0.8s steps(4) infinite;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-cats .note-head.arrow-sprite {
    position: relative;
    background-image: none;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-cats .sustained-game-note .note-head > .note-circle,
body.note-theme-cats .sustained-game-note .note-head > .note-sprite {
    display: block;
}

body.note-theme-cats .column-arrow.arrow-sprite {
    background-size: 448px 50.5px;
    background-position-y: center;
    animation: cat-idle-column-anim 0.8s steps(4) infinite;
    border-radius: 0;
    background-color: transparent;
}

body.note-theme-cats .arrow-sprite.arrow-left {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/IDLE_Blue.png');
}
body.note-theme-cats .arrow-sprite.arrow-down {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/IDLE_Green.png');
}
body.note-theme-cats .arrow-sprite.arrow-up {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/IDLE_Yellow.png');
}
body.note-theme-cats .arrow-sprite.arrow-right {
    background-image: url('Assets/Images/Notes/FREE_Cat 2D Pixel Art/Sprites/IDLE_Red.png');
}

body.note-theme-cats .note-sprite.arrow-sprite::after {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    right: 0;
    background-size: 83px 83px;
    background-position: 7px calc(50% + -13px);
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

body.note-theme-cats .note-sprite.arrow-sprite.arrow-left::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Blue.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.arrow-down::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Green.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.arrow-up::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Yellow.png');
}
body.note-theme-cats .note-sprite.arrow-sprite.arrow-right::after {
    background-image: url('Assets/Images/Notes/ToxicFrogs/Bubbles/Assets Bubbles Part 1 +107/Red.png');
}

body.note-theme-cats .note.arrow-left,
body.note-theme-cats .note.arrow-down,
body.note-theme-cats .note.arrow-up,
body.note-theme-cats .note.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-cats .column-arrow.arrow-left,
body.note-theme-cats .column-arrow.arrow-down,
body.note-theme-cats .column-arrow.arrow-up,
body.note-theme-cats .column-arrow.arrow-right {
    transform: translateX(-50%);
}

body.note-theme-cats .note-head.arrow-sprite.arrow-left,
body.note-theme-cats .note-head.arrow-sprite.arrow-down,
body.note-theme-cats .note-head.arrow-sprite.arrow-up,
body.note-theme-cats .note-head.arrow-sprite.arrow-right {
    transform: none;
}

body.a11y-static-arrows.note-theme-cats .note-sprite.arrow-sprite,
body.a11y-static-arrows.note-theme-cats .column-arrow.arrow-sprite {
    animation: none;
    background-position: 0px 0px;
}

.cat-explosion {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-size: 1800px 200px;
    animation: frog-explosion-anim 0.2s steps(6) 1 forwards;
    pointer-events: none;
    z-index: 10;
}

.cat-explosion.arrow-left  { background-image: url('Assets/Images/Notes/ToxicFrogs/BlueBlue/ToxicFrogBlueBlue_Explosion.png'); }
.cat-explosion.arrow-down  { background-image: url('Assets/Images/Notes/ToxicFrogs/GreenBrown/ToxicFrogGreenBrown_Explosion.png');   filter: hue-rotate(120deg) saturate(2) brightness(1.1); }
.cat-explosion.arrow-up    { background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleWhite/ToxicFrogPurpleWhite_Explosion.png'); filter: hue-rotate(150deg) saturate(4) brightness(1.3); }
.cat-explosion.arrow-right { background-image: url('Assets/Images/Notes/ToxicFrogs/PurpleBlue/ToxicFrogPurpleBlue_Explosion.png');  filter: hue-rotate(120deg) saturate(2) brightness(1.1); }

body.endless-active.note-theme-cats .arrow-sprite.arrow-left:not(.note-head) { filter: drop-shadow(0 0 10px #00ccff88); }
body.endless-active.note-theme-cats .arrow-sprite.arrow-down:not(.note-head) { filter: drop-shadow(0 0 10px #00ccff88); }
body.endless-active.note-theme-cats .arrow-sprite.arrow-up:not(.note-head)   { filter: drop-shadow(0 0 10px #00ccff88); }
body.endless-active.note-theme-cats .arrow-sprite.arrow-right:not(.note-head) { filter: drop-shadow(0 0 10px #00ccff88); }

/* ── Controls (key bindings) modal ───────────────────────────────── */

#controls-modal {
    max-width: 420px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#controls-modal h2 {
    margin: 0;
    font-size: 18px;
    color: #41b8d8;
}

.controls-intro {
    margin: 0;
    font-size: 13px;
    color: #888;
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 10px;
    align-items: center;
}

.controls-grid-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding-bottom: 2px;
    border-bottom: 1px solid #333;
}

.controls-lane-name {
    font-size: 14px;
    color: #ccc;
    font-weight: 600;
}

.controls-lane-name[data-lane="0"] { color: #5b9bd5; }
.controls-lane-name[data-lane="1"] { color: #d55b5b; }
.controls-lane-name[data-lane="2"] { color: #5bd58a; }
.controls-lane-name[data-lane="3"] { color: #d5c45b; }

.binding-btn {
    padding: 6px 10px;
    min-width: 60px;
    font-size: 14px;
    font-weight: 700;
    background: #252540;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}

.binding-btn:hover {
    background: #2e2e55;
    border-color: #41b8d8;
}

.binding-btn.binding-listening {
    background: #1a3a4a;
    border-color: #41b8d8;
    color: #41b8d8;
    animation: binding-pulse 0.8s ease-in-out infinite;
}

@keyframes binding-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.controls-hint {
    font-size: 11px;
    color: #555;
    font-style: italic;
}

.controls-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* ── Accessibility button ─────────────────────────────────────────── */

/* ── Accessibility modal ──────────────────────────────────────────── */
#accessibility-modal {
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#accessibility-modal h2 {
    margin: 0;
    font-size: 18px;
    color: #41b8d8;
}

.a11y-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.a11y-section h3 {
    margin: 0 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

.a11y-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    padding: 4px 0;
    line-height: 1.4;
    flex-wrap: wrap;
}

.a11y-toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #41b8d8;
}

.a11y-hint {
    font-size: 11px;
    color: #666;
    font-style: italic;
    width: 100%;
    padding-left: 26px;
    margin-top: -4px;
}

.a11y-dyslexic-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    width: 100%;
    padding-left: 4px;
}

.a11y-dyslexic-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    white-space: nowrap;
}

.a11y-dyslexic-option input[type="radio"] {
    cursor: pointer;
    accent-color: #a200e2;
}

.a11y-row-inline {
    cursor: default;
    flex-wrap: wrap;
    gap: 8px;
}

.a11y-row-inline > span {
    flex-shrink: 0;
}

.a11y-font-scale-buttons {
    display: flex;
    gap: 6px;
}

.a11y-font-btn {
    background: #2a2a3e;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.a11y-font-btn:hover {
    background: #3a3a50;
    color: #ddd;
}

.a11y-font-btn.active {
    background: #0f3a4a;
    color: #41b8d8;
    border-color: #41b8d8;
}

#accessibility-close {
    align-self: flex-end;
    background: #333;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

#accessibility-close:hover {
    background: #444;
    color: #fff;
}

/* ── Firework sound warning modal ────────────────────────────────── */
#fw-sound-warning-modal {
    padding: 28px 30px 24px;
    max-width: 380px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

#fw-sound-warning-modal h2 {
    margin: 0;
    font-size: 17px;
    color: #e8a060;
}

#fw-sound-warning-modal p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
}

#fw-sound-warning-modal strong {
    color: #fff;
}

#fw-sound-warning-confirm {
    align-self: center;
    background: #444;
    color: #fff;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 4px;
}

#fw-sound-warning-confirm:hover {
    background: #555;
}

/* ── Font size scaling ────────────────────────────────────────────── */

/* --- Large (+25%) --- */

/* Library */
body.a11y-font-large .library-song-name { font-size: 22px; }
body.a11y-font-large .library-song-channel { font-size: 15px; }
body.a11y-font-large .library-song-card { font-size: 16px; }
body.a11y-font-large #library-title { font-size: 2.5em; }
body.a11y-font-large #library-search { font-size: 16px; }
body.a11y-font-large #library-buttons button { font-size: 16px; }
body.a11y-font-large #library-filter-btn { font-size: 14px; }
body.a11y-font-large .filter-panel-section-header { font-size: 14px; }

/* Song selection (home screen) */
body.a11y-font-large #song-input-label,
body.a11y-font-large #chart-input-label,
body.a11y-font-large #proceed-button,
body.a11y-font-large #open-editor-button,
body.a11y-font-large #open-library-button,
body.a11y-font-large #open-help-button { font-size: 20px; }

/* Difficulty selection */
body.a11y-font-large #difficulty-selection h2 { font-size: 28px; }
body.a11y-font-large #start-button,
body.a11y-font-large #edit-chart-button,
body.a11y-font-large #difficulty-back-button { font-size: 20px; }

/* In-game HUD — not scaled; fixed 400px container has no room */

/* Grade / name-entry screen — h2 not scaled (already 36px default; long text wraps badly larger) */
body.a11y-font-large #name-entry-stats { font-size: 18px; }
body.a11y-font-large #play-again-button,
body.a11y-font-large #change-difficulty-button,
body.a11y-font-large #library-return-button { font-size: 20px; }
body.a11y-font-large .rating-question { font-size: 20px; }
body.a11y-font-large #grade-display { font-size: 30px; }

/* Pause menu */
body.a11y-font-large #pause-menu h2 { font-size: 60px; }
body.a11y-font-large #pause-menu button { font-size: 22px; }

/* Modals — global */
body.a11y-font-large .modal h2 { font-size: 22px; }
body.a11y-font-large .modal h3 { font-size: 18px; }
body.a11y-font-large .modal p,
body.a11y-font-large .modal li,
body.a11y-font-large .modal label,
body.a11y-font-large .modal td,
body.a11y-font-large .modal th { font-size: 16px; }
body.a11y-font-large .modal button,
body.a11y-font-large .modal input,
body.a11y-font-large .modal textarea { font-size: 16px; }

/* Modal-specific overrides */
body.a11y-font-large #score-detail-content { font-size: 16px; }
body.a11y-font-large .a11y-section h3 { font-size: 14px; }
body.a11y-font-large .a11y-hint { font-size: 13px; }
body.a11y-font-large #rating-badge-tooltip { font-size: 15px; }

/* Tutorial */
body.a11y-font-large #tutorial-title { font-size: 25px; }
body.a11y-font-large #tutorial-text { font-size: 20px; }
body.a11y-font-large #tutorial-prev,
body.a11y-font-large #tutorial-next,
body.a11y-font-large #tutorial-finish,
body.a11y-font-large #tutorial-font-btn { font-size: 18px; }
body.a11y-font-large #tutorial-step-indicator { font-size: 15px; }


/* --- Largest (+50%) --- */

/* Library */
body.a11y-font-largest .library-song-name { font-size: 26px; }
body.a11y-font-largest .library-song-channel { font-size: 18px; }
body.a11y-font-largest .library-song-card { font-size: 19px; }
body.a11y-font-largest #library-title { font-size: 3em; }
body.a11y-font-largest #library-search { font-size: 19px; }
body.a11y-font-largest #library-buttons button { font-size: 19px; }
body.a11y-font-largest #library-filter-btn { font-size: 17px; }
body.a11y-font-largest .filter-panel-section-header { font-size: 17px; }

/* Song selection (home screen) */
body.a11y-font-largest #song-input-label,
body.a11y-font-largest #chart-input-label,
body.a11y-font-largest #proceed-button,
body.a11y-font-largest #open-editor-button,
body.a11y-font-largest #open-library-button,
body.a11y-font-largest #open-help-button { font-size: 24px; }

/* Difficulty selection */
body.a11y-font-largest #difficulty-selection h2 { font-size: 34px; }
body.a11y-font-largest #start-button,
body.a11y-font-largest #edit-chart-button,
body.a11y-font-largest #difficulty-back-button { font-size: 24px; }

/* In-game HUD — not scaled; see "large" comment above */

/* Grade / name-entry screen — h2 not scaled (already 36px default; long text wraps badly larger) */
body.a11y-font-largest #name-entry-stats { font-size: 21px; }
body.a11y-font-largest #play-again-button,
body.a11y-font-largest #change-difficulty-button,
body.a11y-font-largest #library-return-button { font-size: 24px; }
body.a11y-font-largest .rating-question { font-size: 24px; }
body.a11y-font-largest #grade-display { font-size: 36px; }

/* Pause menu */
body.a11y-font-largest #pause-menu h2 { font-size: 72px; }
body.a11y-font-largest #pause-menu button { font-size: 27px; }

/* Modals — global */
body.a11y-font-largest .modal h2 { font-size: 26px; }
body.a11y-font-largest .modal h3 { font-size: 22px; }
body.a11y-font-largest .modal p,
body.a11y-font-largest .modal li,
body.a11y-font-largest .modal label,
body.a11y-font-largest .modal td,
body.a11y-font-largest .modal th { font-size: 19px; }
body.a11y-font-largest .modal button,
body.a11y-font-largest .modal input,
body.a11y-font-largest .modal textarea { font-size: 19px; }

/* Modal-specific overrides */
body.a11y-font-largest #score-detail-content { font-size: 19px; }
body.a11y-font-largest .a11y-section h3 { font-size: 17px; }
body.a11y-font-largest .a11y-hint { font-size: 15px; }
body.a11y-font-largest #rating-badge-tooltip { font-size: 18px; }

/* Tutorial */
body.a11y-font-largest #tutorial-title { font-size: 30px; }
body.a11y-font-largest #tutorial-text { font-size: 24px; }
body.a11y-font-largest #tutorial-prev,
body.a11y-font-largest #tutorial-next,
body.a11y-font-largest #tutorial-finish,
body.a11y-font-largest #tutorial-font-btn { font-size: 21px; }
body.a11y-font-largest #tutorial-step-indicator { font-size: 17px; }

/* ── Gamepad menu navigation focus ────────────────────────────────── */
.gamepad-nav-focus {
    outline: 3px solid #44aaff !important;
    outline-offset: 2px;
}
.library-song-card.gamepad-nav-focus {
    outline-offset: -2px;
    background: rgba(68, 170, 255, 0.09) !important;
}


/* ── Logo spin on click ───────────────────────────────────────────── */
@keyframes logo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
#logo-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}

#site-logo {
    transform-origin: center center;
}
#site-logo.spinning {
    animation: logo-spin 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#version-label {
    position: absolute;
    bottom: 28px;
    right: 4px;
    font-size: 11px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   SHARED OVERLAY CLASS
   Use .modal-overlay on any overlay wrapper. Pairs with the existing
   .modal class which already handles endless-mode and dyslexic font.
   ═══════════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-overlay.hidden { display: none; }

/* Font scaling for all .modal dialogs — large (+25%) */
body.a11y-font-large .modal h2     { font-size: 22px !important; }
body.a11y-font-large .modal p      { font-size: 16px !important; }
body.a11y-font-large .modal button { font-size: 16px !important; }

/* Font scaling for all .modal dialogs — largest (+50%) */
body.a11y-font-largest .modal h2     { font-size: 26px !important; }
body.a11y-font-largest .modal p      { font-size: 19px !important; }
body.a11y-font-largest .modal button { font-size: 19px !important; }


/* ── Session-kick modal ───────────────────────────────────────────── */
#session-kick-modal { text-align: center; }
#session-kick-modal h2 { color: #f87171; }
body.endless-active #session-kick-modal h2 { color: #ff6666 !important; text-shadow: 0 0 10px #ff444488 !important; }

#session-kick-countdown {
    font-size: 28px;
    font-weight: bold;
    color: #f87171;
    line-height: 1;
}
body.endless-active #session-kick-countdown { color: #ff6666; }
body.a11y-font-large   #session-kick-countdown { font-size: 34px; }
body.a11y-font-largest #session-kick-countdown { font-size: 42px; }

/* ── Gem Sprites ──────────────────────────────────────────────────────────── */
@keyframes gem-spin {
    from { background-position-y: 0px; }
    to   { background-position-y: -160px; }
}
@keyframes gem-spin-large {
    from { background-position-y: 0px; }
    to   { background-position-y: -320px; }
}
@keyframes gem-spin-xlarge {
    from { background-position-y: 0px; }
    to   { background-position-y: -640px; }
}

/* Base gem sprite — 32×32, left column of 64×160 sheet (5 frames × 32 px tall) */
.gem-sprite {
    display: inline-block;
    width: 32px;
    height: 32px;
    /* Natural size keeps left-column gem; width:32px clips the right column. */
    background-size: 64px 160px;
    background-repeat: no-repeat;
    background-position-x: 0;
    animation: gem-spin steps(5) 1.04s infinite;
    flex-shrink: 0;
}
.gem-rupee    { background-image: url('Assets/Images/Gemstones/rupeeheet.png'); }
.gem-topaz    { background-image: url('Assets/Images/Gemstones/topazsheet.png'); }
.gem-sapphire { background-image: url('Assets/Images/Gemstones/sapphiresheet.png'); }
.gem-ruby     { background-image: url('Assets/Images/Gemstones/rubysheet.png'); }
.gem-diamond  { background-image: url('Assets/Images/Gemstones/diamondsheet.png'); }
.gem-rainbow  { background-image: url('Assets/Images/Gemstones/ranbowsheet.png'); }

/* ── Leaderboard modal — Shop theme ──────────────────────────────────────── */
#leaderboard-modal {
    max-width: 560px;
    width: 90vw;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #1c1208 0%, #2a1d0e 60%, #1c1208 100%);
    border: 2px solid #8b6914;
    border-radius: 14px;
    box-shadow: 0 0 0 1px #c8961044, 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 #c8961033;
    padding: 0;
}

/* Shop sign header */
#leaderboard-shop-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 24px 14px;
    background: linear-gradient(135deg, #3a2508 0%, #5a3a10 50%, #3a2508 100%);
    border-bottom: 2px solid #8b6914;
    border-radius: 12px 12px 0 0;
}
.leaderboard-sign-gems {
    font-size: 28px;
    filter: drop-shadow(0 0 6px #ffcc0088);
}
#leaderboard-sign-text {
    text-align: center;
}
#leaderboard-sign-title {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #ffd84d;
    text-shadow: 0 0 12px #ffcc0099, 0 2px 4px rgba(0,0,0,0.8);
}
#leaderboard-sign-subtitle {
    font-size: 11px;
    letter-spacing: 2px;
    color: #c89a40;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Divider banner */
#leaderboard-shop-divider {
    text-align: center;
    padding: 8px 24px;
    font-size: 11px;
    letter-spacing: 2px;
    color: #9a7230;
    border-bottom: 1px solid #4a3208;
    background: #221508;
}
#leaderboard-shop-divider span {
    color: #c89a40;
}

#leaderboard-content {
    overflow-y: auto;
    flex: 1;
    padding: 8px 16px 4px;
}
#leaderboard-content::-webkit-scrollbar { width: 6px; }
#leaderboard-content::-webkit-scrollbar-track { background: #1c1208; }
#leaderboard-content::-webkit-scrollbar-thumb { background: #6b4f10; border-radius: 3px; }

#leaderboard-modal #leaderboard-close {
    margin: 10px 20px 16px;
    padding: 10px;
    background: #3a2508;
    border: 1px solid #6b4f10;
    border-radius: 6px;
    color: #c89a40;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    align-self: stretch;
}
#leaderboard-modal #leaderboard-close:hover {
    background: #4a3210;
    border-color: #ffd84d;
    color: #ffd84d;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-bottom: 1px solid #3a2808;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.15s;
}
.leaderboard-row:hover { background: rgba(200, 150, 20, 0.07); }
.leaderboard-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 160px;
    min-width: 0;
    overflow: hidden;
}
.leaderboard-rank {
    font-weight: bold;
    color: #7a5c20;
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}
.leaderboard-row:nth-child(1) .leaderboard-rank { color: #ffd700; text-shadow: 0 0 6px #ffd70088; font-size: 15px; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #c0c0c0; text-shadow: 0 0 4px #c0c0c066; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #cd7f32; text-shadow: 0 0 4px #cd7f3266; }
.leaderboard-username {
    flex: 1;
    min-width: 0;
    color: #e8d090;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-gems {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    flex-wrap: nowrap;
    overflow: hidden;
}
.leaderboard-gem-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.leaderboard-gem-count {
    font-size: 12px;
    color: #a08040;
}
.leaderboard-points {
    display: none;
}

/* Endless-mode leaderboard overrides */
body.endless-active #leaderboard-modal {
    background: linear-gradient(160deg, #050f18 0%, #091824 60%, #050f18 100%) !important;
    border-color: #00ccff66 !important;
    box-shadow: 0 0 0 1px #00ccff22, 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 #00ccff22 !important;
}
body.endless-active #leaderboard-shop-sign {
    background: linear-gradient(135deg, #061420 0%, #0a2030 50%, #061420 100%) !important;
    border-bottom-color: #00ccff44 !important;
}
body.endless-active #leaderboard-sign-title {
    color: #00ccff !important;
    text-shadow: 0 0 12px #00ccff88, 0 2px 4px rgba(0,0,0,0.8) !important;
}
body.endless-active #leaderboard-sign-subtitle,
body.endless-active #leaderboard-shop-divider span { color: #00ccff88 !important; }
body.endless-active #leaderboard-shop-divider { background: #040e18 !important; border-bottom-color: #00ccff22 !important; }
body.endless-active .leaderboard-row { border-bottom-color: #0a2030 !important; }
body.endless-active .leaderboard-row:hover { background: rgba(0,204,255,0.05) !important; }
body.endless-active .leaderboard-username { color: #a0d8ef !important; }
body.endless-active .leaderboard-rank { color: #00ccff55 !important; }
body.endless-active .leaderboard-row:nth-child(1) .leaderboard-rank { color: #00ccff !important; text-shadow: 0 0 6px #00ccff88 !important; }
body.endless-active .leaderboard-row:nth-child(2) .leaderboard-rank { color: #00ccffaa !important; text-shadow: none !important; }
body.endless-active .leaderboard-row:nth-child(3) .leaderboard-rank { color: #00ccff77 !important; text-shadow: none !important; }
body.endless-active .leaderboard-gem-count { color: #00ccff66 !important; }
body.endless-active .leaderboard-points { color: #00ccff !important; text-shadow: 0 0 8px #00ccff55 !important; }
body.endless-active .leaderboard-sign-gems { filter: brightness(2) drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px #00ccff) !important; }
body.endless-active #leaderboard-modal #leaderboard-close {
    background: #0a1e2a !important;
    border-color: #00ccff44 !important;
    color: #00ccff88 !important;
}
body.endless-active #leaderboard-modal #leaderboard-close:hover {
    background: #103444 !important;
    border-color: #00ccff !important;
    color: #00ccff !important;
}

/* ── Diff gem notification (grade screen) ────────────────────────────────── */
#gem-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px auto;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid #555;
    border-radius: 8px;
    width: fit-content;
    max-width: 90%;
}
#gem-notification.hidden { display: none; }
#gem-notification-text {
    margin: 0;
    font-size: 15px;
    color: #fff;
}
/* 2× gem in grade screen notification */
#gem-notification .gem-sprite {
    width: 64px;
    height: 64px;
    background-size: 128px 320px;
    animation: gem-spin-large steps(5) 1.04s infinite;
}

/* ── Rainbow gem interstitial screen ─────────────────────────────────────── */
@keyframes rainbow-card-rise {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Use :not(.hidden) so the ID selector's display:flex doesn't override .hidden's display:none */
#rainbow-gem-screen:not(.hidden) {
    display: flex;
}
#rainbow-gem-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    box-sizing: border-box;
}
#rainbow-gem-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 52px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 20px;
    animation: rainbow-card-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#rainbow-gem-screen h2 {
    font-size: 28px;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 200, 100, 0.8);
    margin: 0;
}
/* 4× gem on rainbow screen */
#rainbow-gem-sprite {
    width: 128px;
    height: 128px;
    background-size: 256px 640px;
    animation: gem-spin-xlarge steps(5) 1.04s infinite;
}
#rainbow-gem-next {
    padding: 12px 40px;
    font-size: 16px;
    background: #1874a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#rainbow-gem-next:hover { background: #1d8fc4; }

body.endless-active #rainbow-gem-card {
    background: rgba(0, 20, 40, 0.55);
    border: 1px solid rgba(0, 204, 255, 0.25);
    box-shadow: 0 6px 24px rgba(0, 204, 255, 0.15);
}
body.endless-active #rainbow-gem-screen h2 {
    color: #00ccff;
    text-shadow: 0 0 10px #00ccff88;
}
body.endless-active #rainbow-gem-next {
    background: #0d2a3a;
    border: 1px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 6px #00ccff88;
}
body.endless-active #rainbow-gem-next:hover {
    background: #103444;
}

/* ── Small gem for scores dropdown (20×20) ────────────────────────────────── */
@keyframes gem-spin-sm {
    from { background-position-y: 0px; }
    to   { background-position-y: -100px; }
}
.gem-sprite-sm {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 40px 100px;
    background-repeat: no-repeat;
    background-position-x: 0;
    animation: gem-spin-sm steps(5) 1.04s infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Gem loss modal ───────────────────────────────────────────────────────── */
body.endless-active #gem-loss-modal {
    background: rgba(0, 20, 40, 0.55) !important;
    border: 1px solid rgba(0, 204, 255, 0.25) !important;
    box-shadow: 0 6px 24px rgba(0, 204, 255, 0.15) !important;
}
#gem-loss-modal {
    max-width: 400px;
    width: 90vw;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 20px;
    padding: 40px 52px;
}
#gem-loss-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    align-items: center;
}
.gem-loss-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #fff;
}
#gem-loss-close {
    margin-top: 8px;
    padding: 12px 40px;
    font-size: 16px;
    background: #1874a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#gem-loss-close:hover { background: #1d8fc4; }

/* ── Gems update announcement modal ──────────────────────────── */
#gems-update-modal {
    max-width: 480px;
    width: 90vw;
    text-align: left;
}
#gems-update-modal h2 {
    text-align: center;
    margin-bottom: 12px;
}
#gems-update-modal p {
    font-size: 14px;
    color: #ccc;
    margin: 8px 0;
    line-height: 1.5;
}
#gems-update-modal strong { color: #fff; }
#gems-update-gem-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid #333;
}
.gems-update-gem-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #ddd;
}
#gems-update-sign-off {
    font-style: italic;
    color: #ffcc00;
    text-align: center;
    margin-top: 12px;
}
#gems-update-close {
    display: block;
    margin: 16px auto 0;
    padding: 12px 40px;
    font-size: 16px;
    background: #1874a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#gems-update-close:hover { background: #1d8fc4; }
body.endless-active #gems-update-modal {
    background: rgba(0, 48, 64, 0.75);
    border-color: #1dbfb8;
}

/* ── v1.2 update announcement modal ──────────────────────────── */
#v12-update-modal {
    max-width: 480px;
    width: 90vw;
    text-align: left;
}
#v12-update-modal h2 {
    text-align: center;
    margin-bottom: 12px;
}
#v12-update-subheader {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    color: #ccc;
    margin: 0 0 10px;
}
#v12-update-modal p {
    font-size: 14px;
    color: #ccc;
    margin: 8px 0;
    line-height: 1.5;
}
#v12-update-list {
    font-size: 14px;
    color: #ddd;
    line-height: 1.6;
    margin: 20px 0 12px 20px;
    padding: 0;
}
#v12-update-list li { margin-bottom: 12px; }
.v12-note {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}
#v12-update-sign-off {
    font-style: italic;
    color: #ffcc00;
    text-align: center;
    margin-top: 12px;
}
#v12-update-close {
    display: block;
    margin: 16px auto 0;
    padding: 12px 40px;
    font-size: 16px;
    background: #1874a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#v12-update-close:hover { background: #1d8fc4; }
body.endless-active #v12-update-modal {
    background: rgba(0, 48, 64, 0.75);
    border-color: #1dbfb8;
}