/* Chiptune Challenge 2026 - September Theme: Puzzle / Brain */
/* Solve the loop. Back-to-school brain engagement, falling blocks, clean geometry. */
/* DARK theme - August's warm sand snaps back to grid black and primary blocks. */

/* 'Press Start 2P' is already loaded globally in base_chiptune.html. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=VT323&display=swap');

:root {
    /* Primary Colors */
    --chiptune-primary: #00BCD4;          /* Tetris Cyan (I-piece) */
    --chiptune-primary-hover: #26C6DA;
    --chiptune-secondary: #9C27B0;        /* Tetris Purple (T-piece) */
    --chiptune-accent: #FFEB3B;           /* Tetris Yellow (O-piece) */

    /* Backgrounds - grid black */
    --chiptune-bg: #0D0D0D;               /* Grid Black */
    --chiptune-header-bg: rgba(13, 13, 13, 0.92);
    --chiptune-card-bg: #1A1A1A;          /* Matrix Gray */
    --chiptune-surface: rgba(0, 188, 212, 0.08);
    --chiptune-player-bg: rgba(13, 13, 13, 0.95);

    /* Text - clean readouts on black */
    --chiptune-text: #FFFFFF;
    --chiptune-text-secondary: #B0B0B0;

    /* Borders & glows */
    --chiptune-border: rgba(0, 188, 212, 0.45);
    --chiptune-glow: rgba(0, 188, 212, 0.5);
    --chiptune-secondary-glow: rgba(156, 39, 176, 0.5);

    /* September-specific - the full tetromino set */
    --piece-i: #00BCD4;
    --piece-t: #9C27B0;
    --piece-o: #FFEB3B;
    --piece-s: #4CAF50;
    --piece-z: #F44336;
    --piece-j: #2196F3;
    --piece-l: #FF9800;

    --september-cyan: #00BCD4;
    --september-cyan-hover: #26C6DA;
    --september-cyan-deep: #00838F;
    --september-purple: #9C27B0;
    --september-purple-hover: #BA68C8;
    --september-yellow: #FFEB3B;
    --september-yellow-deep: #FBC02D;
    --september-green: #4CAF50;
    --september-red: #F44336;
    --september-blue: #2196F3;
    --september-orange: #FF9800;

    --september-bg-mid: #1A1A1A;
    --september-bg-surface: #252525;
    --september-bg-panel: #0A1628;        /* Deep Blue panels */
    --september-well: #131313;
    --september-gutter: #333333;

    --september-glow-cyan: 0 0 16px rgba(0, 188, 212, 0.55);
    --september-glow-purple: 0 0 16px rgba(156, 39, 176, 0.55);
    --september-glow-yellow: 0 0 16px rgba(255, 235, 59, 0.5);
    --september-shadow-block: 0 4px 0 rgba(0, 0, 0, 0.6);
    --september-shadow-lift: 0 6px 0 rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 188, 212, 0.28);

    /* 20px playfield grid, reused on every panel */
    --september-grid: repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 19px,
            rgba(255, 255, 255, 0.05) 19px,
            rgba(255, 255, 255, 0.05) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 19px,
            rgba(255, 255, 255, 0.05) 19px,
            rgba(255, 255, 255, 0.05) 20px
        );

    /* Beveled 40px cells, so a card reads as a multi-cell piece rather than one
       flat rectangle: each cell is lit along its top/left seam and shadowed
       along its bottom/right, the same treatment as the blocks in the artwork. */
    --september-cell-grid:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0px,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px,
            transparent 38px,
            rgba(0, 0, 0, 0.38) 38px,
            rgba(0, 0, 0, 0.38) 40px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 0px,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px,
            transparent 38px,
            rgba(0, 0, 0, 0.38) 38px,
            rgba(0, 0, 0, 0.38) 40px
        );

    /* Block face: lit top-left edge, shadowed bottom-right, hard drop shadow */
    --september-bevel:
        inset 4px 4px 0 rgba(255, 255, 255, 0.15),
        inset -4px -4px 0 rgba(0, 0, 0, 0.5);

    /* The seven tetrominoes as box-shadow cell lists, for the NEXT-piece preview
       on unreleased cards. The element itself is the first cell; each --cells
       list places the other three on a 20px pitch (matching --september-grid, so
       the piece sits on the well's grid) and each --nudge re-centers the whole
       shape over the element's flex-centered position. currentColor means one
       list works for any piece color. */
    --tetro-i-cells: 20px 0 0 currentColor, 40px 0 0 currentColor, 60px 0 0 currentColor;
    --tetro-i-nudge: translate(-30px, 0);
    --tetro-t-cells: -20px 20px 0 currentColor, 0 20px 0 currentColor, 20px 20px 0 currentColor;
    --tetro-t-nudge: translate(0, -10px);
    --tetro-o-cells: 20px 0 0 currentColor, 0 20px 0 currentColor, 20px 20px 0 currentColor;
    --tetro-o-nudge: translate(-10px, -10px);
    --tetro-s-cells: 20px 0 0 currentColor, -20px 20px 0 currentColor, 0 20px 0 currentColor;
    --tetro-s-nudge: translate(0, -10px);
    --tetro-z-cells: 20px 0 0 currentColor, 20px 20px 0 currentColor, 40px 20px 0 currentColor;
    --tetro-z-nudge: translate(-20px, -10px);
    --tetro-j-cells: 0 20px 0 currentColor, 20px 20px 0 currentColor, 40px 20px 0 currentColor;
    --tetro-j-nudge: translate(-20px, -10px);
    --tetro-l-cells: -40px 20px 0 currentColor, -20px 20px 0 currentColor, 0 20px 0 currentColor;
    --tetro-l-nudge: translate(20px, -10px);

    /* Tetromino stripe used on progress/score bars */
    --september-stripe: repeating-linear-gradient(
        90deg,
        var(--piece-i) 0px,
        var(--piece-i) 10px,
        var(--piece-t) 10px,
        var(--piece-t) 20px,
        var(--piece-o) 20px,
        var(--piece-o) 30px,
        var(--piece-s) 30px,
        var(--piece-s) 40px,
        var(--piece-z) 40px,
        var(--piece-z) 50px,
        var(--piece-j) 50px,
        var(--piece-j) 60px,
        var(--piece-l) 60px,
        var(--piece-l) 70px
    );

    --september-gradient-cyan: linear-gradient(135deg, #00BCD4 0%, #2196F3 100%);
    --september-gradient-purple: linear-gradient(135deg, #9C27B0 0%, #2196F3 100%);
    --september-gradient-gold: linear-gradient(135deg, #FFEB3B 0%, #FF9800 100%);

    /* Player Handle - a locked block, not a ball */
    --chiptune-handle-size: 18px;
    --chiptune-handle-bg: linear-gradient(135deg, #00BCD4 0%, #9C27B0 100%);
    --chiptune-handle-radius: 0;
    --chiptune-handle-icon-size: 10px;
    --chiptune-handle-icon-color: #0D0D0D;
    --chiptune-handle-icon-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
    --chiptune-handle-glow: rgba(0, 188, 212, 0.65);

    /* Volume Handle */
    --chiptune-volume-handle-size: 14px;
    --chiptune-volume-handle-bg: linear-gradient(135deg, #00BCD4, #9C27B0);
    --chiptune-volume-handle-radius: 0;
    --chiptune-volume-handle-icon-size: 8px;
    --chiptune-volume-handle-icon-color: #0D0D0D;
    --chiptune-volume-handle-icon-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
    --chiptune-volume-handle-glow: rgba(156, 39, 176, 0.55);
}

/* =============================================================================
   BODY & BACKGROUND - Grid black over the puzzle artwork
   ============================================================================= */

body.chiptune-theme-september {
    background-color: #0D0D0D;
    /* Static puzzle artwork, fixed behind the scrolling content. A dark veil
       plus the 20px playfield grid sit on top: the veil keeps white text and
       the block borders readable over the busier stacks, and the grid ties the
       artwork to the panels. Heaviest at the bottom where the player bar sits.
       If the artwork is missing the grid + grid-black still render correctly. */
    background-image:
        var(--september-grid),
        linear-gradient(
            180deg,
            rgba(13, 13, 13, 0.62) 0%,
            rgba(13, 13, 13, 0.45) 30%,
            rgba(13, 13, 13, 0.55) 65%,
            rgba(13, 13, 13, 0.85) 100%
        ),
        url("/static/sites/zimventures/chiptune/images/september/september-puzzle-bg.9c0df232c0c7.jpg");
    background-size: 20px 20px, 20px 20px, auto, cover;
    background-position: center, center, center, center bottom;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, scroll, fixed;
    color: #FFFFFF;
}

body.chiptune-theme-september .chiptune-app {
    background: transparent;
    color: #FFFFFF;
}

/* =============================================================================
   PIXEL BACKGROUND - hidden (body owns the artwork + grid)
   ============================================================================= */

.chiptune-theme-september .pixel-bg {
    background: none;
}

.chiptune-theme-september .pixel-bg::before,
.chiptune-theme-september .pixel-bg::after {
    content: none;
}

/* =============================================================================
   PLAYFIELD WELL - cyan guide rails pinned to the viewport edges
   ============================================================================= */

.chiptune-theme-september .chiptune-app::before,
.chiptune-theme-september .chiptune-app::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 188, 212, 0.35) 15%,
        rgba(0, 188, 212, 0.35) 85%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 5;
}

.chiptune-theme-september .chiptune-app::before {
    left: 6px;
}

.chiptune-theme-september .chiptune-app::after {
    right: 6px;
}

@media (max-width: 768px) {
    .chiptune-theme-september .chiptune-app::before,
    .chiptune-theme-september .chiptune-app::after {
        display: none;
    }
}

/* =============================================================================
   HEADER - Score panel across the top of the well
   ============================================================================= */

.chiptune-theme-september .chiptune-header {
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.96) 0%, rgba(26, 26, 26, 0.92) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--september-cyan);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
}

/* Grid overlay + a single piece drifting down behind the header contents */
.chiptune-theme-september .chiptune-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--september-grid);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.chiptune-theme-september .chiptune-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0, 188, 212, 0.12) 20%, transparent 40%),
        linear-gradient(90deg, transparent 55%, rgba(156, 39, 176, 0.10) 75%, transparent 95%);
    animation: september-header-sweep 24s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.chiptune-theme-september .chiptune-header > * {
    position: relative;
    z-index: 1;
}

@keyframes september-header-sweep {
    0%   { transform: translateX(-40%); }
    100% { transform: translateX(40%); }
}

/* =============================================================================
   LOGO, NAV, AUTH
   ============================================================================= */

.chiptune-theme-september .chiptune-logo .logo-text {
    color: var(--september-cyan);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #0D0D0D, 0 0 12px rgba(0, 188, 212, 0.5);
}

.chiptune-theme-september .chiptune-logo .logo-icon {
    filter: drop-shadow(0 0 6px rgba(0, 188, 212, 0.7));
}

.chiptune-theme-september .chiptune-nav a,
.chiptune-theme-september .chiptune-nav .nav-link {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.chiptune-theme-september .chiptune-nav a:hover,
.chiptune-theme-september .chiptune-nav .nav-link:hover {
    color: #0D0D0D;
    background: var(--september-cyan);
}

.chiptune-theme-september .chiptune-nav a.active,
.chiptune-theme-september .chiptune-nav .nav-link.active {
    color: var(--september-yellow);
    border-bottom-color: var(--september-yellow);
}

.chiptune-theme-september .nav-badge.pulse {
    background: var(--september-purple);
    color: #FFFFFF;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.7);
    animation: september-block-blink 1.4s steps(2, end) infinite;
}

.chiptune-theme-september .auth-link {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .profile-menu {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .profile-menu-item {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
}

.chiptune-theme-september .profile-menu-item:hover {
    background: rgba(0, 188, 212, 0.18);
    color: var(--september-cyan);
}

/* =============================================================================
   PAGE HEADERS
   ============================================================================= */

.chiptune-theme-september .page-header h1,
.chiptune-theme-september .page-header h2 {
    color: #FFFFFF;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 #0D0D0D;
}

.chiptune-theme-september .page-header p,
.chiptune-theme-september .page-header .page-subtitle,
.chiptune-theme-september .page-header .subtitle {
    color: var(--september-cyan);
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =============================================================================
   SONG CARDS - Locked blocks in the stack
   ============================================================================= */

/* Every card is one locked block: --card-piece drives its border, tint, bevel
   and day badge together, so a state only has to reassign that one variable.
   Declared on the theme root (lowest specificity) so the per-day rules below
   and the card states further down both override it cleanly. */
.chiptune-theme-september {
    --card-piece: var(--september-cyan);
}

.chiptune-theme-september .song-card {
    /* Older engines keep the flat fill/border; color-mix tints the face toward
       the piece and splits the border into a lit top-left and shaded
       bottom-right, which is what actually sells it as a molded block. */
    background: var(--september-bg-mid);
    background: color-mix(in srgb, var(--card-piece) 9%, var(--september-bg-mid));
    border: 4px solid var(--card-piece);
    border-color:
        color-mix(in srgb, var(--card-piece) 58%, white)
        color-mix(in srgb, var(--card-piece) 62%, black)
        color-mix(in srgb, var(--card-piece) 62%, black)
        color-mix(in srgb, var(--card-piece) 58%, white);
    border-radius: 0;
    box-shadow: var(--september-bevel), var(--september-shadow-block);
    padding: 12px;
    position: relative;
    /* Stepped, not eased - pieces move by cells, they don't glide */
    transition: transform 0.09s steps(2, end), box-shadow 0.09s steps(2, end);
}

/* Cell seams inside each block. Base .song-card::before is a CRT scanline layer
   at z-index 10 (over the text); this replaces it and drops to z-index 0, with
   the card's own children lifted to z-index 1 so the seams sit behind the title
   and meta rows instead of washing over them. */
.chiptune-theme-september .song-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--september-cell-grid);
    background-size: 40px 40px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.chiptune-theme-september .song-card > * {
    position: relative;
    z-index: 1;
}

/* The day badge is the card's own piece, so it matches its block */
.chiptune-theme-september .song-card .day-badge {
    border-color: var(--card-piece);
    color: var(--card-piece);
}

/* Each day gets its own tetromino color, so a standard week shows the full
   piece set exactly once.
   Two things make :nth-child() the wrong tool here: winners are wrapped in
   .song-card-wrapper (so the row's child may be the wrapper, not the card),
   and _coming_soon_card.html emits an inline <style> as a sibling of the card,
   which shifts every :nth-child() index after it. Matching the row's Nth *div*
   skips those <style> tags, and the paired selectors below cover both the
   wrapped and unwrapped card.
   Weeks are split 4+3 (see split_week_days_into_rows), so the second row picks
   up at the Z-piece rather than restarting the cycle.
   The row match is wrapped in :where() so it contributes no specificity - the
   card states below (is-playing, is-today, winner, future) then override
   --card-piece with a plain class selector instead of needing !important. */
.chiptune-theme-september :where(.week-row > div:nth-of-type(1)) .song-card,
.chiptune-theme-september :where(.week-row > div:nth-of-type(1)).song-card {
    --card-piece: var(--piece-i);
    --ghost-cells: var(--tetro-i-cells);
    --ghost-nudge: var(--tetro-i-nudge);
}

.chiptune-theme-september :where(.week-row > div:nth-of-type(2)) .song-card,
.chiptune-theme-september :where(.week-row > div:nth-of-type(2)).song-card {
    --card-piece: var(--piece-t);
    --ghost-cells: var(--tetro-t-cells);
    --ghost-nudge: var(--tetro-t-nudge);
}

.chiptune-theme-september :where(.week-row > div:nth-of-type(3)) .song-card,
.chiptune-theme-september :where(.week-row > div:nth-of-type(3)).song-card {
    --card-piece: var(--piece-o);
    --ghost-cells: var(--tetro-o-cells);
    --ghost-nudge: var(--tetro-o-nudge);
}

.chiptune-theme-september :where(.week-row > div:nth-of-type(4)) .song-card,
.chiptune-theme-september :where(.week-row > div:nth-of-type(4)).song-card {
    --card-piece: var(--piece-s);
    --ghost-cells: var(--tetro-s-cells);
    --ghost-nudge: var(--tetro-s-nudge);
}

/* Second row of the week continues the cycle: Z, J, L (then wraps to I) */
.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(1)) .song-card,
.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(1)).song-card {
    --card-piece: var(--piece-z);
    --ghost-cells: var(--tetro-z-cells);
    --ghost-nudge: var(--tetro-z-nudge);
}

.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(2)) .song-card,
.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(2)).song-card {
    --card-piece: var(--piece-j);
    --ghost-cells: var(--tetro-j-cells);
    --ghost-nudge: var(--tetro-j-nudge);
}

.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(3)) .song-card,
.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(3)).song-card {
    --card-piece: var(--piece-l);
    --ghost-cells: var(--tetro-l-cells);
    --ghost-nudge: var(--tetro-l-nudge);
}

.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(4)) .song-card,
.chiptune-theme-september :where(.week-row:nth-of-type(even) > div:nth-of-type(4)).song-card {
    --card-piece: var(--piece-i);
    --ghost-cells: var(--tetro-i-cells);
    --ghost-nudge: var(--tetro-i-nudge);
}

.chiptune-theme-september .song-card .song-title,
.chiptune-theme-september .song-card .song-name {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chiptune-theme-september .song-card .song-artist,
.chiptune-theme-september .song-card .song-date,
.chiptune-theme-september .song-card .song-duration-text,
.chiptune-theme-september .song-card .song-meta,
.chiptune-theme-september .song-card .song-day {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
}

/* Hover: the piece steps up out of the stack, bevel brightening as it lifts.
   animation: none kills base.css's card-glow-pulse so the edges stay crisp -
   .is-playing is declared after this and keeps its own pulse. */
.chiptune-theme-september .song-card:hover {
    transform: translateY(-8px);
    box-shadow:
        inset 4px 4px 0 rgba(255, 255, 255, 0.24),
        inset -4px -4px 0 rgba(0, 0, 0, 0.55),
        0 12px 0 rgba(0, 0, 0, 0.55),
        0 0 22px rgba(0, 0, 0, 0.5);
    animation: none;
}

/* Playing card = the active piece: goes gold and pulses like a clearing line */
.chiptune-theme-september .song-card.is-playing {
    --card-piece: var(--september-yellow);
    box-shadow:
        var(--september-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 22px rgba(255, 235, 59, 0.4);
    animation: september-line-pulse 1.6s steps(2, end) infinite;
}

.chiptune-theme-september .song-card.is-today {
    --card-piece: var(--september-yellow);
    box-shadow:
        var(--september-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 235, 59, 0.35);
    animation: none;
}

/* An O-piece locked into today's card, drawn with box-shadow instead of an
   emoji so it matches the geometry. Top-left corner: the base .song-card clips
   overflow and the day badge owns the top-right. opacity: 1 undoes the base
   .placeholder-card::after dimming. */
.chiptune-theme-september .song-card.is-today::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    /* Base .song-card::after is a full-bleed inset:0 corner decoration, so the
       unused offsets have to be released or they win over the ones set here. */
    right: auto;
    bottom: auto;
    /* 8px cells on a 10px pitch, so the 2px gaps read as cell seams and the
       badge is visibly built from four blocks. Base .song-card::after is a
       full-bleed corner decoration, and three of its properties have to be
       undone here or the piece breaks: border-radius: 0.5rem rounds a box this
       small into a circle (and the box-shadow cells inherit the rounding), and
       border: 2px inflates each cell past the 10px pitch so the seams close up. */
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 0;
    background: var(--piece-o);
    box-shadow:
        10px 0 0 var(--piece-o),
        0 10px 0 var(--piece-o),
        10px 10px 0 var(--piece-o);
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    animation: september-piece-lock 2.4s steps(4, end) infinite;
}

@keyframes september-piece-lock {
    0%, 70%, 100% { transform: translateY(0); }
    80%           { transform: translateY(-3px); }
}

/* Winner styling - templates wrap weekly/monthly winners in .song-card-wrapper.
   .is-winner is never on .song-card itself, so target the wrapper instead. */
.chiptune-theme-september .song-card-wrapper .song-card {
    --card-piece: var(--september-yellow);
    box-shadow:
        var(--september-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 24px rgba(255, 235, 59, 0.5);
}

/* Gold T-piece badge for winners, kept inside the clipped card bounds. This is
   also the click target for the SOLVE THE LOOP easter egg, so it has to stay in
   the top-right corner the hit-test checks - and the top-left is taken by the
   WEEKLY WINNER ribbon. left/bottom are released because base .song-card::after
   pins all four offsets to 0; leaving them set makes `right` be ignored and
   parks the piece at the top-left, behind the ribbon. */
.chiptune-theme-september .song-card-wrapper .song-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 18px;
    left: auto;
    bottom: auto;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 0;
    background: var(--september-yellow);
    box-shadow:
        -10px 10px 0 var(--september-yellow),
        0 10px 0 var(--september-yellow),
        10px 10px 0 var(--september-yellow);
    opacity: 1;
    pointer-events: none;
    z-index: 3;
    animation: september-piece-spin 5s steps(4, end) infinite;
}

@keyframes september-piece-spin {
    0%, 60%, 100% { transform: rotate(0deg); }
    75%           { transform: rotate(90deg); }
}

/* Past and future placeholders both stay fully opaque. Element opacity would be
   the obvious way to mute them, but the fixed artwork behind the page is a
   colourful block stack - at 0.5 it reads straight through the card and makes
   the text unreadable. The "not yet" / "missed" signal comes from the gutter-gray
   palette and the dashed border instead. */

/* Past placeholders are dead blocks buried in the stack - still beveled, since
   they're locked in, just drained of color. */
.chiptune-theme-september .song-card.placeholder-card.is-past {
    --card-piece: var(--september-gutter);
    background: #131313;
    opacity: 1;
    box-shadow: var(--september-bevel), var(--september-shadow-block);
}

/* Future cards are where a block is going to land, not one that has: dashed
   outline, flat fill, no bevel. */
.chiptune-theme-september .song-card.is-future {
    --card-piece: var(--september-gutter);
    background: #111111;
    opacity: 1;
    border: 3px dashed #3A3A3A;
    box-shadow: none;
}

.chiptune-theme-september .song-card.is-future::before {
    opacity: 0.45;
}

/* Placeholder text, in the theme's own type rather than the base italics */
.chiptune-theme-september .placeholder-title {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 1px;
    color: #9A9A9A;
}

.chiptune-theme-september .placeholder-status {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0;
}

.chiptune-theme-september .placeholder-status.status-today {
    color: var(--september-yellow);
}

.chiptune-theme-september .placeholder-status.status-future {
    color: var(--september-cyan);
}

.chiptune-theme-september .placeholder-status.status-past {
    color: #6B6B6B;
}

/* The placeholder states set --card-piece to gutter gray, and the generic
   .song-card .day-badge rule paints the badge text with it - #333333 on the
   navy badge fill is ~1.4:1, effectively invisible. These get a legible gray
   instead. Specificity is deliberately 4 classes so it beats
   `.chiptune-theme-september .song-card .day-badge` outright rather than
   depending on which rule happens to come later in the file. */
.chiptune-theme-september .song-card .day-badge.placeholder-day-badge {
    background: var(--september-bg-panel) !important;
    border-color: #4A4A4A;
    color: #9A9A9A;
}

/* =============================================================================
   UNRELEASED CARDS - a NEXT-piece preview well instead of the Mario ? block

   Two components land here, and both use the same .question-block/.question-mark
   markup, so one set of overrides covers them:
     - _coming_soon_card.html   .song-cover.mystery-block       (song exists, not published yet)
     - _placeholder_card.html   .placeholder-coming-soon.mystery-block-bg  (no song scheduled)
   Base.css draws them as a Mario question block: an orange brick gradient, a
   gold rounded frame, a shine quadrant, a bouncing '?'. Every one of those is
   repurposed below into the preview box a puzzle game would show - dark well,
   grid, NEXT label, and the piece that's coming next sitting in it as a ghost.
   ============================================================================= */

.chiptune-theme-september .mystery-block,
.chiptune-theme-september .mystery-block-bg {
    /* Replaces the orange brick gradient with the well behind the stack */
    background: #0E0E0E;
}

/* The gold rounded frame becomes the squared-off preview box outline */
.chiptune-theme-september .mystery-block::before,
.chiptune-theme-september .mystery-block-bg::before {
    inset: 7px;
    border: 2px solid var(--card-piece);
    border-radius: 0;
    opacity: 0.45;
}

/* The shine quadrant becomes the NEXT label. right/bottom have to be released:
   base pins all four offsets, and left+right+width together would stretch it. */
.chiptune-theme-september .mystery-block::after,
.chiptune-theme-september .mystery-block-bg::after {
    content: 'NEXT';
    top: 13px;
    left: 14px;
    right: auto;
    bottom: auto;
    background: none;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.42rem;
    letter-spacing: 2px;
    color: var(--card-piece);
    opacity: 0.6;
}

/* The bounce becomes a slow stepped hover, like a piece waiting in the queue */
.chiptune-theme-september .question-block {
    animation: september-next-hover 3.2s steps(2, end) infinite;
}

@keyframes september-next-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* The brick texture becomes the well's playfield grid */
.chiptune-theme-september .question-block::before {
    background-image: var(--september-grid);
    background-size: 20px 20px;
    opacity: 0.7;
}

/* The '?' glyph becomes the ghost piece itself: the span is one 18px cell and
   --ghost-cells places the other three. font-size: 0 hides the character
   without hiding the box, and box-shadow is not clipped by the element's own
   overflow, so the rest of the piece still draws. */
.chiptune-theme-september .question-mark {
    display: block;
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
    color: var(--card-piece);
    background: currentColor;
    box-shadow: var(--ghost-cells);
    transform: var(--ghost-nudge);
    /* Dim, because the piece hasn't landed yet */
    opacity: 0.5;
    text-shadow: none;
}

/* COMING SOON pill. This one is styled in an inline <style> inside
   _coming_soon_card.html, which the cascade sees after this file - so the
   theme selector needs the extra class to win. */
.chiptune-theme-september .coming-soon-card .coming-soon-badge {
    background: rgba(13, 13, 13, 0.92);
    border: 2px solid var(--card-piece);
    border-radius: 0;
    color: var(--card-piece);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
}

/* The component's inline style sets opacity: 0.9 on the card; the artwork
   behind the page shows through even that little, so keep the block opaque and
   let the muted palette carry the "not published yet" read. */
.chiptune-theme-september .coming-soon-card {
    opacity: 1;
}

.chiptune-theme-september .coming-soon-card .coming-soon-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-style: normal;
    letter-spacing: 1px;
    color: #8A8A8A !important;
}

.chiptune-theme-september .coming-soon-card .coming-soon-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--card-piece);
    opacity: 0.75;
}

/* Today with nothing published yet: the rings lose their circles and pulse as
   square grid cells, and the '?' picks up the theme's own type and gold. */
.chiptune-theme-september .placeholder-cover {
    background: #0E0E0E;
    background-image: var(--september-grid);
    background-size: 20px 20px;
}

.chiptune-theme-september .mystery-ring {
    border-radius: 0;
    border-color: var(--september-yellow);
    animation-timing-function: steps(4, end);
}

.chiptune-theme-september .mystery-icon {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 2rem;
    color: var(--september-yellow);
    text-shadow: 0 0 16px rgba(255, 235, 59, 0.7);
    animation: september-next-hover 2.4s steps(2, end) infinite;
}

/* Past with nothing published: a dead cell in the stack, not TV static */
.chiptune-theme-september .static-noise {
    opacity: 0.07;
    animation: none;
}

.chiptune-theme-september .offline-text {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 2px;
}

/* Cover art sits recessed into the block - the bevel is inverted (dark
   top-left, lit bottom-right), so it reads as a well cut into the piece face
   rather than another raised block. */
.chiptune-theme-september .song-cover,
.chiptune-theme-september .song-card img.cover-art,
.chiptune-theme-september .song-card .cover-art {
    border-radius: 0;
    border: 2px solid var(--september-bg-surface);
    box-shadow:
        inset 3px 3px 0 rgba(0, 0, 0, 0.55),
        inset -3px -3px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
    position: relative;
}

.chiptune-theme-september .song-cover img,
.chiptune-theme-september .song-card img.cover-art {
    image-rendering: pixelated;
}

.chiptune-theme-september .song-cover .play-btn {
    background: rgba(13, 13, 13, 0.9);
    color: var(--september-cyan);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.chiptune-theme-september .song-cover .play-btn:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .song-cover .song-duration {
    background: rgba(13, 13, 13, 0.9);
    color: var(--september-cyan);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    border-radius: 0;
    letter-spacing: 1px;
}

/* Equalizer bars read as a stack of blocks */
.chiptune-theme-september .equalizer-bar {
    background: var(--september-cyan);
    border-radius: 0;
    box-shadow: 0 0 6px rgba(0, 188, 212, 0.6);
}

/* =============================================================================
   VOTE & LIKE BUTTONS - Square arcade keys
   ============================================================================= */

.chiptune-theme-september .vote-btn,
.chiptune-theme-september .song-card .vote-btn {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-purple);
    color: var(--september-purple-hover);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: background 0.1s ease, color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.chiptune-theme-september .vote-btn:hover:not(:disabled),
.chiptune-theme-september .song-card .vote-btn:hover:not(:disabled) {
    background: var(--september-purple);
    color: #FFFFFF;
    box-shadow: var(--september-glow-purple);
}

.chiptune-theme-september .vote-btn:active,
.chiptune-theme-september .song-card .vote-btn:active {
    transform: scale(0.95);
}

.chiptune-theme-september .vote-btn.voted,
.chiptune-theme-september .song-card .vote-btn.voted {
    background: var(--september-yellow);
    border-color: var(--september-yellow-deep);
    color: #0D0D0D;
    box-shadow: var(--september-glow-yellow);
}

.chiptune-theme-september .like-btn {
    color: #6B6B6B;
}

.chiptune-theme-september .like-btn.liked {
    color: var(--september-red);
}

.chiptune-theme-september .like-btn.liked .like-icon {
    animation: september-score-pop 0.45s steps(3, end);
    filter: drop-shadow(0 0 6px rgba(244, 67, 54, 0.7));
}

.chiptune-theme-september .vote-count-badge {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-september .vote-btn-overlay.voted {
    color: #0D0D0D;
}

/* =============================================================================
   DAY & CARD BADGES - Score readouts
   ============================================================================= */

.chiptune-theme-september .day-badge {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 1px;
    cursor: pointer;
}

.chiptune-theme-september .card-badge-weekly {
    background: var(--september-cyan);
    color: #0D0D0D;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.55);
}

.chiptune-theme-september .card-badge-monthly-ribbon {
    background: var(--september-gradient-gold);
    color: #0D0D0D;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.6);
}

.chiptune-theme-september .today-badge {
    position: absolute;
    background: var(--september-yellow);
    color: #0D0D0D;
    padding: 4px 14px;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 14px rgba(255, 235, 59, 0.55);
}

/* =============================================================================
   PLAYER BAR - Score panel with a tetromino progress bar
   ============================================================================= */

.chiptune-theme-september .chiptune-player {
    background: rgba(13, 13, 13, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 4px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.7);
    position: relative;
}

/* Grid overlay behind the transport controls */
.chiptune-theme-september .chiptune-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--september-grid);
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.chiptune-theme-september .chiptune-player > * {
    position: relative;
    z-index: 1;
}

.chiptune-theme-september .chiptune-player,
.chiptune-theme-september .player-info,
.chiptune-theme-september .player-song-title,
.chiptune-theme-september .player-song-artist {
    color: #FFFFFF;
}

.chiptune-theme-september .player-song-title {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chiptune-theme-september .player-song-artist {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: #B0B0B0;
}

/* Block-style time readout */
.chiptune-theme-september .player-time,
.chiptune-theme-september .player-duration {
    color: var(--september-cyan);
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    letter-spacing: 2px;
}

.chiptune-theme-september .player-btn {
    color: #B0B0B0;
    border-radius: 0;
    transition: color 0.1s ease, background 0.1s ease;
}

.chiptune-theme-september .player-btn:hover {
    color: var(--september-cyan);
}

.chiptune-theme-september .player-btn.play-pause {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    box-shadow: 0 0 14px rgba(0, 188, 212, 0.4);
}

.chiptune-theme-september .player-btn.play-pause:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .player-btn.play-pause:active {
    transform: scale(0.95);
}

/* Progress bar filled with locked tetromino blocks */
.chiptune-theme-september .player-progress-bar {
    background: var(--september-well);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.chiptune-theme-september .player-progress-fill {
    background: var(--september-stripe);
    background-size: 70px 100%;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

.chiptune-theme-september .stats-panel {
    background: rgba(10, 22, 40, 0.95);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
    color: #FFFFFF;
}

/* =============================================================================
   WEEK NAVIGATION - Level select
   ============================================================================= */

.chiptune-theme-september .week-nav {
    background: linear-gradient(90deg, rgba(10, 22, 40, 0.85) 0%, rgba(26, 26, 26, 0.85) 100%);
    border-bottom: 2px solid rgba(0, 188, 212, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.chiptune-theme-september .week-nav a,
.chiptune-theme-september .week-nav span {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.chiptune-theme-september .week-nav a:hover {
    color: var(--september-cyan);
}

.chiptune-theme-september .week-nav-current .week-label {
    color: #FFFFFF;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #0D0D0D;
    animation: none;
}

.chiptune-theme-september .week-nav-current .week-year {
    color: var(--september-cyan);
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.chiptune-theme-september .week-nav-current .week-dates {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.chiptune-theme-september .week-nav-theme-icon {
    filter: drop-shadow(0 0 6px rgba(0, 188, 212, 0.6));
}

.chiptune-theme-september .week-nav-theme-name {
    color: var(--september-purple-hover);
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .week-nav-btn {
    color: #B0B0B0;
    border-radius: 0;
    transition: background 0.1s ease, color 0.1s ease, transform 0.1s ease;
}

.chiptune-theme-september .week-nav-btn:hover:not(.disabled) {
    background: var(--september-cyan);
    color: #0D0D0D;
    transform: translateY(-1px);
}

/* =============================================================================
   THEME BANNER & VOTE BANNERS - Next-piece panels
   ============================================================================= */

.chiptune-theme-september .theme-banner {
    background: rgba(10, 22, 40, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
    position: relative;
    overflow: hidden;
}

/* Full tetromino stripe across the top of the panel */
.chiptune-theme-september .theme-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--september-stripe);
    background-size: 70px 100%;
    pointer-events: none;
    z-index: 1;
}

.chiptune-theme-september .theme-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--september-grid);
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.chiptune-theme-september .theme-banner > * {
    position: relative;
    z-index: 1;
}

.chiptune-theme-september .theme-banner .theme-icon {
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.6));
}

.chiptune-theme-september .theme-banner .theme-name {
    color: #FFFFFF;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #0D0D0D;
}

.chiptune-theme-september .theme-banner .theme-tagline {
    color: var(--september-yellow);
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chiptune-theme-september .theme-banner .theme-description {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
}

.chiptune-theme-september .theme-banner .theme-link {
    color: var(--september-cyan);
    background: transparent;
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.chiptune-theme-september .theme-banner .theme-link:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .vote-banner {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-purple);
    border-radius: 0;
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.35);
    position: relative;
    overflow: hidden;
}

.chiptune-theme-september .vote-banner-content {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-september .voting-open-banner {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-yellow);
    border-radius: 0;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.3);
}

.chiptune-theme-september .voting-open-banner .vote-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Level-counter countdown */
.chiptune-theme-september .countdown,
.chiptune-theme-september .vote-countdown {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: var(--september-yellow);
    letter-spacing: 3px;
}

/* =============================================================================
   TROPHY & WINNER BANNERS
   ============================================================================= */

.chiptune-theme-september .trophy-badge {
    background: rgba(255, 235, 59, 0.12);
    border: 2px solid var(--september-yellow);
    border-radius: 0;
    padding: 0.5rem 1rem;
    color: var(--september-yellow);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .winner-banner,
.chiptune-theme-september .month-winner-banner {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--september-yellow);
    border-radius: 0;
    box-shadow: 0 0 26px rgba(255, 235, 59, 0.3);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.chiptune-theme-september .winner-banner .winner-text strong {
    color: var(--september-yellow);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

.chiptune-theme-september .winner-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(255, 235, 59, 0.7));
}

.chiptune-theme-september .winner-info h3 {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

/* =============================================================================
   STAT CARDS / HALL OF FAME / THEME CARDS
   ============================================================================= */

.chiptune-theme-september .stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.chiptune-theme-september .stat-card {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.chiptune-theme-september .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--september-shadow-lift);
}

/* Stat cards cycle the piece palette too */
.chiptune-theme-september .stat-card:nth-child(7n + 2) { border-color: var(--piece-t); }
.chiptune-theme-september .stat-card:nth-child(7n + 3) { border-color: var(--piece-o); }
.chiptune-theme-september .stat-card:nth-child(7n + 4) { border-color: var(--piece-s); }
.chiptune-theme-september .stat-card:nth-child(7n + 5) { border-color: var(--piece-z); }
.chiptune-theme-september .stat-card:nth-child(7n + 6) { border-color: var(--piece-j); }
.chiptune-theme-september .stat-card:nth-child(7n + 7) { border-color: var(--piece-l); }

.chiptune-theme-september .stat-card h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: #FFFFFF;
}

.chiptune-theme-september .stat-card .stat-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 6px rgba(0, 188, 212, 0.5));
}

.chiptune-theme-september .stat-card .stat-value {
    font-size: 2rem;
    color: var(--september-cyan);
    display: block;
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
}

.chiptune-theme-september .stat-card .stat-label {
    font-size: 0.75rem;
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chiptune-theme-september .hof-card {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--september-shadow-block);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.chiptune-theme-september .hof-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--september-shadow-lift);
}

.chiptune-theme-september .hof-card.year-card {
    border-color: var(--september-yellow);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 235, 59, 0.35);
}

.chiptune-theme-september .hof-card.month-card {
    border-color: var(--september-purple);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(156, 39, 176, 0.35);
}

.chiptune-theme-september .hof-card-badge.week {
    background: var(--september-cyan);
    color: #0D0D0D;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .hof-label.purple {
    background: var(--september-purple);
    color: #FFFFFF;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .hof-play-btn {
    background: var(--september-bg-panel);
    color: var(--september-cyan);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september .hof-play-btn:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .hof-btn {
    background: transparent;
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-september .hof-btn:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    transform: translateY(-2px);
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .theme-card {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .theme-card.unlocked {
    border-color: var(--september-gutter);
}

.chiptune-theme-september .theme-card.locked {
    background: rgba(26, 26, 26, 0.7);
    border: 2px dashed var(--september-gutter);
    box-shadow: none;
}

.chiptune-theme-september .theme-card-header .current-badge {
    background: var(--september-yellow);
    color: #0D0D0D;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .liked-song-play:hover {
    color: var(--september-cyan);
}

.chiptune-theme-september .placeholder-static {
    background: rgba(19, 19, 19, 0.85);
    border: 2px dashed var(--september-gutter);
    border-radius: 0;
}

.chiptune-theme-september .current-vote-notice strong {
    color: var(--september-yellow);
}

/* =============================================================================
   BRACKET COMPONENTS
   ============================================================================= */

.chiptune-theme-september .bracket-slot {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .bracket-vote-btn {
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .bracket-vote-btn:hover:not(:disabled) {
    background: var(--september-purple);
    color: #FFFFFF;
}

.chiptune-theme-september .bracket-vote-btn.voted {
    background: var(--september-yellow) !important;
    color: #0D0D0D;
    border-color: var(--september-yellow-deep);
}

.chiptune-theme-september .bracket-play-btn {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september .bracket-login-link:hover {
    color: var(--september-yellow);
}

.chiptune-theme-september .bracket-status.voting p {
    color: #FFFFFF;
}

.chiptune-theme-september .slot-title {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

/* =============================================================================
   CHAMPION & YEARLY CARDS
   ============================================================================= */

.chiptune-theme-september .champion-card {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--september-yellow);
    border-radius: 0;
    box-shadow: 0 0 26px rgba(255, 235, 59, 0.3);
}

.chiptune-theme-september .champion-card-title,
.chiptune-theme-september .champion-info h3 {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-september .champion-play-btn {
    background: var(--september-bg-panel);
    color: var(--september-cyan);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september .past-champion-badge {
    background: var(--september-gradient-gold);
    color: #0D0D0D;
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-september .song-nav-btn {
    color: #B0B0B0;
    border-radius: 0;
}

.chiptune-theme-september .song-nav-btn:hover:not(.disabled) {
    color: var(--september-cyan);
}

.chiptune-theme-september .play-btn-large {
    background: var(--september-bg-panel);
    border: 3px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    box-shadow: 0 0 22px rgba(0, 188, 212, 0.45);
}

.chiptune-theme-september .play-btn-large:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.6);
}

.chiptune-theme-september .like-btn-large.liked {
    color: var(--september-red);
}

.chiptune-theme-september .vote-badge-float {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-yellow);
    color: var(--september-yellow);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 0 18px rgba(255, 235, 59, 0.4);
}

.chiptune-theme-september .week-check {
    background: rgba(0, 188, 212, 0.1);
    border: 2px solid rgba(0, 188, 212, 0.45);
    border-radius: 0;
}

.chiptune-theme-september .chiptune-toast {
    background: var(--september-bg-panel);
    color: #FFFFFF;
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.chiptune-theme-september .modal-close-btn {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-red);
    color: var(--september-red);
    border-radius: 0;
}

.chiptune-theme-september .modal-theme-name {
    color: var(--september-purple-hover);
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* Discord brand-color elements stay as-is */
.chiptune-theme-september .discord-login-btn,
.chiptune-theme-september .discord-floating-badge,
.chiptune-theme-september .discord-invite-header h2,
.chiptune-theme-september .discord-invite-join {
    color: white;
}

/* =============================================================================
   PAUSE MENU - Paused playfield
   ============================================================================= */

.chiptune-theme-september .pause-menu-content {
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 3px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: 0 0 40px rgba(0, 188, 212, 0.3);
}

.chiptune-theme-september .pause-menu-content::before {
    border-color: rgba(0, 188, 212, 0.35);
}

/* The playfield grid instead of scanlines */
.chiptune-theme-september .pause-menu-scanlines {
    background: var(--september-grid);
    background-size: 20px 20px;
    opacity: 0.7;
}

.chiptune-theme-september .pause-menu-header {
    border-bottom-color: rgba(0, 188, 212, 0.35);
}

.chiptune-theme-september .pause-menu-title {
    color: #FFFFFF;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #0D0D0D;
}

.chiptune-theme-september .pause-menu-subtitle {
    color: var(--september-yellow);
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chiptune-theme-september .pause-menu-item {
    color: #FFFFFF;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 1px;
}

.chiptune-theme-september .pause-menu-item:hover {
    background: rgba(0, 188, 212, 0.15);
    color: var(--september-cyan);
}

.chiptune-theme-september .pause-menu-item.active {
    color: var(--september-yellow);
    background: rgba(255, 235, 59, 0.1);
}

.chiptune-theme-september .pause-menu-cursor {
    color: var(--september-yellow);
    text-shadow: 0 0 8px rgba(255, 235, 59, 0.7);
}

.chiptune-theme-september .pause-menu-item-detail {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.chiptune-theme-september .pause-menu-item-detail p {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
}

.chiptune-theme-september .pause-menu-item-detail p strong {
    color: var(--september-cyan);
}

.chiptune-theme-september .pause-menu-cta {
    background: transparent;
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-september .pause-menu-cta:hover {
    background: var(--september-cyan);
    color: #0D0D0D;
    transform: translateY(-2px);
    box-shadow: var(--september-glow-cyan);
}

.chiptune-theme-september .pause-menu-resume-btn {
    color: var(--september-cyan);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-september .pause-menu-resume-btn:hover {
    color: var(--september-yellow);
}

.chiptune-theme-september .newhere-floating-badge:hover {
    color: var(--september-cyan);
}

/* =============================================================================
   YEARLY BRACKET OVERRIDES
   ============================================================================= */

.chiptune-theme-september .phase-step {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .phase-dot {
    background: var(--september-yellow);
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.6);
}

.chiptune-theme-september .champion-play-overlay {
    background: rgba(10, 22, 40, 0.75);
}

.chiptune-theme-september .entry-play-btn {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september .champion-title {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-september .champion-stats .stat-value {
    color: var(--september-cyan);
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
}

.chiptune-theme-september .wildcard-entry .song-name,
.chiptune-theme-september .champion-card .song-title {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

.chiptune-theme-september .group-box {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .group-entry {
    background: rgba(13, 13, 13, 0.9);
    border: 2px solid rgba(0, 188, 212, 0.45);
    border-radius: 0;
}

.chiptune-theme-september .group-entry .song-name {
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

.chiptune-theme-september .vote-counter .vote-pip {
    background: rgba(156, 39, 176, 0.35);
    border: 1px solid rgba(156, 39, 176, 0.7);
    border-radius: 0;
}

.chiptune-theme-september .yearly-matchup {
    background: var(--september-bg-mid);
    border: 2px solid var(--september-cyan);
    border-radius: 0;
    box-shadow: var(--september-shadow-block);
}

.chiptune-theme-september .yearly-bracket-slot {
    background: rgba(13, 13, 13, 0.95);
    border: 2px solid rgba(0, 188, 212, 0.5);
    border-radius: 0;
}

.chiptune-theme-september .yearly-bracket-slot.empty {
    background: rgba(19, 19, 19, 0.7);
    border-style: dashed;
    border-color: var(--september-gutter);
}

.chiptune-theme-september .yearly-bracket-slot .slot-title {
    color: #FFFFFF;
}

.chiptune-theme-september .yearly-bracket-play-btn {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september .yearly-bracket-vote-btn.voted {
    background: var(--september-yellow);
    color: #0D0D0D;
    border-radius: 0;
}

.chiptune-theme-september .yearly-champ-play {
    background: var(--september-bg-panel);
    border: 2px solid var(--september-cyan);
    color: var(--september-cyan);
    border-radius: 0;
}

/* =============================================================================
   FONTS - blocky headings
   ============================================================================= */

.chiptune-theme-september h1,
.chiptune-theme-september h2,
.chiptune-theme-september h3 {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

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

/* Line-clear flash - stepped, not eased, so it reads as a puzzle game */
@keyframes september-line-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.82; }
}

@keyframes september-block-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@keyframes september-score-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* =============================================================================
   SCROLLBAR - Piece well
   ============================================================================= */

.chiptune-theme-september ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.chiptune-theme-september ::-webkit-scrollbar-track {
    background: var(--september-well);
}

.chiptune-theme-september ::-webkit-scrollbar-thumb {
    background: var(--september-cyan);
    border: 2px solid var(--september-well);
    border-radius: 0;
}

.chiptune-theme-september ::-webkit-scrollbar-thumb:hover {
    background: var(--september-purple);
}

.chiptune-theme-september .likes-list::-webkit-scrollbar-track {
    background: rgba(13, 13, 13, 0.8);
}

/* =============================================================================
   SELECTION
   ============================================================================= */

.chiptune-theme-september ::selection {
    background: var(--september-cyan);
    color: #0D0D0D;
}

/* =============================================================================
   VOTER AVATAR / LINKS / FOOTER
   ============================================================================= */

.chiptune-theme-september .voter-avatar-placeholder {
    background: var(--september-gradient-purple);
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    border: 2px solid var(--september-cyan);
    border-radius: 0;
}

.chiptune-theme-september a {
    color: var(--september-cyan);
    transition: color 0.15s ease;
}

.chiptune-theme-september a:hover {
    color: var(--september-yellow);
}

.chiptune-theme-september .chiptune-footer {
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 3px solid var(--september-cyan);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6);
}

.chiptune-theme-september .chiptune-footer,
.chiptune-theme-september .chiptune-footer p,
.chiptune-theme-september .chiptune-footer span {
    color: #B0B0B0;
    font-family: 'IBM Plex Mono', monospace;
}

.chiptune-theme-september .chiptune-footer a {
    color: var(--september-cyan);
}

.chiptune-theme-september .chiptune-footer a:hover {
    color: var(--september-yellow);
}

/* =============================================================================
   EASTER EGGS
   ============================================================================= */

/* LINE CLEAR (Konami) — four full-width rows flash white, then collapse */
.september-line-clear-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.september-clear-row {
    height: 40px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 188, 212, 0.85) 0px,
        rgba(0, 188, 212, 0.85) 38px,
        rgba(13, 13, 13, 0.85) 38px,
        rgba(13, 13, 13, 0.85) 40px
    );
    box-shadow: 0 0 24px rgba(0, 188, 212, 0.7);
    transform-origin: center;
    animation: september-row-clear 1.6s steps(6, end) forwards;
}

.september-clear-row:nth-child(2) { animation-delay: 0.1s; }
.september-clear-row:nth-child(3) { animation-delay: 0.2s; }
.september-clear-row:nth-child(4) { animation-delay: 0.3s; }

@keyframes september-row-clear {
    0%   { transform: scaleY(1) scaleX(0);   opacity: 0; filter: brightness(1); }
    20%  { transform: scaleY(1) scaleX(1);   opacity: 1; filter: brightness(1); }
    55%  { transform: scaleY(1) scaleX(1);   opacity: 1; filter: brightness(2.6); }
    75%  { transform: scaleY(1) scaleX(1);   opacity: 1; filter: brightness(1); }
    100% { transform: scaleY(0) scaleX(1);   opacity: 0; filter: brightness(1); }
}

.september-clear-text {
    position: fixed;
    top: 18%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: clamp(0.9rem, 3.5vw, 2rem);
    letter-spacing: 4px;
    color: var(--september-yellow);
    text-shadow: 3px 3px 0 #0D0D0D, 0 0 20px rgba(255, 235, 59, 0.7);
    animation: september-clear-text 1.8s steps(4, end) forwards;
}

@keyframes september-clear-text {
    0%   { opacity: 0; transform: translateY(-16px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* HARD DROP (triple-click a card) — the block slams down and locks */
.song-card.september-hard-drop {
    animation: september-hard-drop 0.7s steps(5, end);
    z-index: 20;
}

@keyframes september-hard-drop {
    0%   { transform: translateY(-28px); box-shadow: 0 32px 0 rgba(0, 0, 0, 0.5); }
    45%  { transform: translateY(0);     box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 235, 59, 0.7); }
    60%  { transform: translateY(-4px);  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.6); }
    100% { transform: translateY(0);     box-shadow: var(--september-shadow-block); }
}

.september-drop-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: rgba(255, 235, 59, 0.16);
    animation: september-drop-flash 0.35s steps(3, end) forwards;
}

@keyframes september-drop-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* SOLVE THE LOOP (winner piece badge) — score banner over the playfield */
.september-winner-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(0, 188, 212, 0.18) 0%, transparent 70%);
    animation: september-winner-fade 1.8s steps(6, end) forwards;
}

@keyframes september-winner-fade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

.september-winner-text {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: clamp(0.85rem, 3.5vw, 1.9rem);
    letter-spacing: 4px;
    color: var(--september-yellow);
    background: rgba(13, 13, 13, 0.85);
    border: 3px solid var(--september-cyan);
    padding: 1rem 1.5rem;
    text-align: center;
    text-shadow: 3px 3px 0 #0D0D0D;
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.5);
    animation: september-winner-text 1.8s steps(5, end) forwards;
}

@keyframes september-winner-text {
    0%   { transform: scale(0.7); opacity: 0; }
    20%  { transform: scale(1.04); opacity: 1; }
    80%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1);   opacity: 0; }
}

/* PIECE ROTATE (day badge) — the badge rotates 90° like a piece in the well */
.day-badge.september-rotate {
    animation: september-rotate 0.4s steps(4, end);
}

@keyframes september-rotate {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(90deg)  scale(1.08); }
    100% { transform: rotate(0deg)   scale(1); }
}

/* BLOCK DROP (background click) — a single tetromino falls from the click point */
.september-block-drop {
    position: fixed;
    width: 10px;
    height: 10px;
    margin-left: -15px;
    pointer-events: none;
    z-index: 9996;
    animation: september-block-fall 1.1s steps(8, end) forwards;
}

@keyframes september-block-fall {
    0%   { transform: translateY(0)    rotate(0deg);  opacity: 1; }
    85%  { transform: translateY(180px) rotate(90deg); opacity: 1; }
    100% { transform: translateY(196px) rotate(90deg); opacity: 0; }
}

/* =============================================================================
   ACCESSIBILITY - Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .chiptune-theme-september .chiptune-header::after,
    .chiptune-theme-september .song-card.is-playing,
    .chiptune-theme-september .song-card.is-today::after,
    .chiptune-theme-september .song-card-wrapper .song-card::after,
    .chiptune-theme-september .nav-badge.pulse,
    .chiptune-theme-september .like-btn.liked .like-icon,
    .september-clear-row,
    .september-clear-text,
    .song-card.september-hard-drop,
    .september-drop-flash,
    .september-winner-flash,
    .september-winner-text,
    .day-badge.september-rotate,
    .september-block-drop {
        animation: none;
    }

    .chiptune-theme-september .song-card:hover,
    .chiptune-theme-september .stat-card:hover,
    .chiptune-theme-september .hof-card:hover,
    .chiptune-theme-september .vote-btn:active,
    .chiptune-theme-september .player-btn.play-pause:active,
    .chiptune-theme-september .week-nav-btn:hover:not(.disabled),
    .chiptune-theme-september .pause-menu-cta:hover,
    .chiptune-theme-september .play-btn-large:hover,
    .chiptune-theme-september .hof-btn:hover {
        transform: none;
    }
}

/* =============================================================================
   BACKDROP-FILTER FALLBACK
   ============================================================================= */

@supports not (backdrop-filter: blur(1px)) {
    .chiptune-theme-september .chiptune-header,
    .chiptune-theme-september .chiptune-player,
    .chiptune-theme-september .week-nav,
    .chiptune-theme-september .chiptune-footer,
    .chiptune-theme-september .theme-banner,
    .chiptune-theme-september .winner-banner,
    .chiptune-theme-september .month-winner-banner,
    .chiptune-theme-september .champion-card,
    .chiptune-theme-september .pause-menu-content {
        background: #0D0D0D;
    }
}