/* Chiptune Challenge 2026 - October Theme: Horror / Spooky */
/* Don't look back. Gothic horror by candlelight - stone, fog, and guttering flame. */
/* DARK theme - September's grid black warms into crypt black and firelight. */

/* 'Press Start 2P' is already loaded globally in base_chiptune.html. It stays on
   the micro-labels (day badges, pills) because Nosifer is illegible below ~1rem;
   Nosifer is reserved for display sizes and UnifrakturMaguntia for accents. */
@import url('https://fonts.googleapis.com/css2?family=Nosifer&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=UnifrakturMaguntia&display=swap');

:root {
    /* Primary Colors */
    --chiptune-primary: #8B0000;          /* Blood Red */
    --chiptune-primary-hover: #B71C1C;
    --chiptune-secondary: #FF6B00;        /* Candlelight Orange */
    --chiptune-accent: #6A0DAD;           /* Ghost Purple */

    /* Backgrounds - crypt black */
    --chiptune-bg: #0A0A0A;               /* Crypt Black */
    --chiptune-header-bg: rgba(10, 10, 10, 0.94);
    --chiptune-card-bg: #1C1C1C;          /* Stone Gray */
    --chiptune-surface: rgba(255, 107, 0, 0.08);
    --chiptune-player-bg: rgba(10, 10, 10, 0.96);

    /* Text - bone on stone */
    --chiptune-text: #E8E0D5;
    --chiptune-text-secondary: #8B8B8B;

    /* Borders & glows */
    --chiptune-border: rgba(139, 0, 0, 0.5);
    --chiptune-glow: rgba(255, 107, 0, 0.5);
    --chiptune-secondary-glow: rgba(106, 13, 173, 0.5);

    /* October-specific */
    --october-blood: #8B0000;
    --october-blood-bright: #B71C1C;
    --october-blood-deep: #4A0000;
    --october-candle: #FF6B00;
    --october-candle-bright: #FFA040;
    --october-candle-pale: #FFF4C0;       /* the hot core of a flame */
    --october-candle-deep: #C44000;
    --october-ghost: #6A0DAD;
    --october-ghost-bright: #9C4DD4;
    --october-gold: #D4AF37;              /* Spectral Gold - winners */
    --october-gold-deep: #9C7C1E;
    --october-bone: #E8E0D5;
    --october-tomb: #8B8B8B;
    /* Poison green is a SEMANTIC color only - success/health. It is deliberately
       not part of the surface palette; October is lit by fire, not phosphor. */
    --october-poison: #39FF14;

    --october-bg-mid: #1C1C1C;
    --october-bg-surface: #2A2A2A;
    --october-bg-panel: #141014;
    --october-crypt: #0E0B0E;
    --october-gutter: #3A3A3A;
    --october-iron: #4A4344;

    --october-glow-candle: 0 0 30px rgba(255, 107, 0, 0.4);
    --october-glow-ghost: 0 0 20px rgba(106, 13, 173, 0.5);
    --october-glow-blood: 0 0 18px rgba(139, 0, 0, 0.6);
    --october-glow-gold: 0 0 20px rgba(212, 175, 55, 0.5);
    --october-shadow-stone: 0 4px 0 rgba(0, 0, 0, 0.7);
    --october-shadow-lift: 0 10px 0 rgba(0, 0, 0, 0.7), 0 0 26px rgba(255, 107, 0, 0.22);

    /* Mortar coursing - running bond, so panels read as masonry rather than a
       grid. 26px courses, 52px joints, offset every other course by the block
       texture on .song-card::before. */
    --october-mortar:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 25px,
            rgba(0, 0, 0, 0.45) 25px,
            rgba(0, 0, 0, 0.45) 27px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 51px,
            rgba(0, 0, 0, 0.3) 51px,
            rgba(0, 0, 0, 0.3) 53px
        );

    /* Carved stone, not molded plastic: the lit edge is dimmer and the shadow
       deeper than September's block bevel, so it reads as cut rather than cast. */
    --october-bevel:
        inset 3px 3px 0 rgba(232, 224, 213, 0.07),
        inset -3px -3px 0 rgba(0, 0, 0, 0.62);

    --october-fog: linear-gradient(180deg, transparent 0%, rgba(42, 42, 42, 0.75) 100%);

    --october-gradient-blood: linear-gradient(180deg, #8B0000 0%, #4A0000 100%);
    --october-gradient-candle: linear-gradient(135deg, #FF6B00 0%, #8B0000 100%);
    --october-gradient-gold: linear-gradient(135deg, #D4AF37 0%, #8B6914 100%);

    /* A candle flame, reused wherever one is drawn */
    --october-flame-fill: radial-gradient(
        ellipse at 50% 72%,
        var(--october-candle-pale) 0%,
        var(--october-candle-bright) 32%,
        var(--october-candle) 55%,
        rgba(139, 0, 0, 0.55) 78%,
        transparent 100%
    );

    /* Player Handle - the skull rides the playhead on a blood-red seal */
    --chiptune-handle-size: 18px;
    --chiptune-handle-bg: radial-gradient(circle at 40% 35%, #B71C1C 0%, #8B0000 60%, #4A0000 100%);
    --chiptune-handle-radius: 50%;
    --chiptune-handle-icon-size: 10px;
    --chiptune-handle-icon-color: #E8E0D5;
    --chiptune-handle-icon-shadow: 0 0 4px rgba(255, 107, 0, 0.9);
    --chiptune-handle-glow: rgba(255, 107, 0, 0.7);

    /* Volume Handle */
    --chiptune-volume-handle-size: 14px;
    --chiptune-volume-handle-bg: radial-gradient(circle at 40% 35%, #B71C1C 0%, #6A0DAD 100%);
    --chiptune-volume-handle-radius: 50%;
    --chiptune-volume-handle-icon-size: 8px;
    --chiptune-volume-handle-icon-color: #E8E0D5;
    --chiptune-volume-handle-icon-shadow: 0 0 3px rgba(106, 13, 173, 0.9);
    --chiptune-volume-handle-glow: rgba(106, 13, 173, 0.6);
}

/* =============================================================================
   BODY & BACKGROUND - Crypt black over the corridor artwork
   ============================================================================= */

body.chiptune-theme-october {
    background-color: #0A0A0A;
    /* Static corridor artwork, fixed behind the scrolling content. A veil plus
       mortar coursing sit on top: the veil keeps bone-white text readable over
       the candle pools, and the coursing ties the artwork to the panels.
       Heaviest at the bottom where the player bar sits. If the artwork is
       missing the coursing + crypt black still render correctly. */
    background-image:
        var(--october-mortar),
        linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.72) 0%,
            rgba(10, 10, 10, 0.5) 30%,
            rgba(10, 10, 10, 0.55) 62%,
            rgba(10, 10, 10, 0.88) 100%
        ),
        url("/static/sites/zimventures/chiptune/images/october/october-gothic-bg.3824c51c1535.jpg");
    background-size: 52px 26px, 52px 26px, auto, cover;
    background-position: center, center, center, center bottom;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, scroll, fixed;
    color: var(--october-bone);
}

body.chiptune-theme-october .chiptune-app {
    background: transparent;
    color: var(--october-bone);
}

/* =============================================================================
   PIXEL BACKGROUND - repurposed as the fog bank and the storm

   September hid .pixel-bg entirely. October needs two full-viewport layers that
   the templates don't provide - drifting fog and a lightning flash - and
   .pixel-bg already exists in base_chiptune.html with two free pseudo-elements,
   so it becomes the weather instead of being switched off. No template change.
   ============================================================================= */

.chiptune-theme-october .pixel-bg {
    background: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Fog rolling along the floor of the frame */
.chiptune-theme-october .pixel-bg::before {
    content: '';
    position: fixed;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 42%;
    background: var(--october-fog);
    opacity: 0.6;
    pointer-events: none;
    animation: october-fog-drift 19s ease-in-out infinite;
}

@keyframes october-fog-drift {
    0%, 100% { opacity: 0.5; transform: translate3d(0, 0, 0); }
    50%      { opacity: 0.72; transform: translate3d(-3%, -14px, 0); }
}

/* Lightning. Deliberately restrained: a full-viewport flash is the one effect
   in this theme that can actually hurt a photosensitive visitor. Peak opacity
   is 0.18 (not the 0.3 the spec doc proposed), the two strikes sit ~400ms apart
   inside a 14s cycle - well under WCAG 2.3.1's three-per-second ceiling - and
   the whole thing is switched off under prefers-reduced-motion below. */
.chiptune-theme-october .pixel-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(232, 224, 213, 0.9) 0%, rgba(155, 175, 200, 0.5) 60%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    animation: october-lightning 14s ease-in-out infinite;
}

@keyframes october-lightning {
    0%, 41%   { opacity: 0; }
    42%       { opacity: 0.18; }
    43.5%     { opacity: 0; }
    45%       { opacity: 0.11; }
    46.5%     { opacity: 0; }
    100%      { opacity: 0; }
}

/* =============================================================================
   CORRIDOR SCONCES - candle glow pinned to the viewport edges
   ============================================================================= */

.chiptune-theme-october .chiptune-app::before,
.chiptune-theme-october .chiptune-app::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 90px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 107, 0, 0.09) 28%,
        rgba(255, 107, 0, 0.14) 55%,
        rgba(139, 0, 0, 0.1) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 5;
    animation: october-sconce 7s ease-in-out infinite alternate;
}

.chiptune-theme-october .chiptune-app::before {
    left: 0;
}

.chiptune-theme-october .chiptune-app::after {
    right: 0;
    animation-delay: -3.1s;
}

@keyframes october-sconce {
    0%   { opacity: 0.75; }
    100% { opacity: 1; }
}

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

/* =============================================================================
   HEADER - Stone lintel across the top of the corridor
   ============================================================================= */

.chiptune-theme-october .chiptune-header {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.97) 0%, rgba(28, 28, 28, 0.93) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--october-blood);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.75);
    position: relative;
    overflow: hidden;
}

.chiptune-theme-october .chiptune-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--october-mortar);
    background-size: 52px 26px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

/* Candlelight breathing along the lintel */
.chiptune-theme-october .chiptune-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 240px 70px at 14% 100%, rgba(255, 107, 0, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 240px 70px at 86% 100%, rgba(255, 107, 0, 0.16) 0%, transparent 70%);
    animation: october-header-flicker 4.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

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

@keyframes october-header-flicker {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

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

.chiptune-theme-october .chiptune-logo .logo-text {
    color: var(--october-blood-bright);
    font-family: 'Nosifer', 'Times New Roman', serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #0A0A0A, 0 0 14px rgba(139, 0, 0, 0.7);
}

.chiptune-theme-october .chiptune-logo .logo-icon {
    filter: drop-shadow(0 0 7px rgba(255, 107, 0, 0.8));
}

.chiptune-theme-october .chiptune-nav a,
.chiptune-theme-october .chiptune-nav .nav-link {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.95rem;
    transition: color 0.18s ease, background 0.18s ease;
}

.chiptune-theme-october .chiptune-nav a:hover,
.chiptune-theme-october .chiptune-nav .nav-link:hover {
    color: var(--october-bone);
    background: var(--october-blood);
}

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

.chiptune-theme-october .nav-badge.pulse {
    background: var(--october-blood);
    color: var(--october-bone);
    border-radius: 0;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.85);
    animation: october-ember-blink 2.2s ease-in-out infinite;
}

.chiptune-theme-october .auth-link {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

.chiptune-theme-october .profile-menu-item {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
}

.chiptune-theme-october .profile-menu-item:hover {
    background: rgba(139, 0, 0, 0.28);
    color: var(--october-candle);
}

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

.chiptune-theme-october .page-header h1,
.chiptune-theme-october .page-header h2 {
    color: var(--october-bone);
    font-family: 'Nosifer', 'Times New Roman', serif;
    letter-spacing: 1px;
    text-shadow: 3px 3px 0 #0A0A0A, 0 0 22px rgba(139, 0, 0, 0.5);
}

.chiptune-theme-october .page-header p,
.chiptune-theme-october .page-header .page-subtitle,
.chiptune-theme-october .page-header .subtitle {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* =============================================================================
   SONG CARDS - Crypt niches cut into the wall

   Every card is one niche: --card-flame drives its border, face tint, glow and
   day badge together, so a state only has to reassign that one variable. The
   week's seven flames burn down from a fresh taper to a guttering ember, so the
   row reads left-to-right as time passing.
   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-october {
    --card-flame: var(--october-candle);
    --card-wax: 26px;
}

.chiptune-theme-october .song-card {
    /* Older engines keep the flat fill/border; color-mix warms the stone face
       toward the flame and splits the border into a lit top-left and shaded
       bottom-right, which is what sells it as carved rather than outlined. */
    background: var(--october-bg-mid);
    background: color-mix(in srgb, var(--card-flame) 7%, var(--october-bg-mid));
    border: 4px solid var(--card-flame);
    border-color:
        color-mix(in srgb, var(--card-flame) 42%, #6b5b4a)
        color-mix(in srgb, var(--card-flame) 68%, black)
        color-mix(in srgb, var(--card-flame) 72%, black)
        color-mix(in srgb, var(--card-flame) 42%, #6b5b4a);
    border-radius: 0;
    box-shadow: var(--october-bevel), var(--october-shadow-stone);
    padding: 12px;
    position: relative;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

/* Mortar coursing inside each niche. 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 coursing sits behind
   the title and meta rows instead of washing over them. */
.chiptune-theme-october .song-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--october-mortar);
    background-size: 52px 26px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

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

/* The day badge carries the card's own flame on the BORDER only. The label
   itself keeps a fixed bright tone: the burn-down ramp darkens toward the end
   of the week, and #C43D00 / #A32800 on the #141014 badge fill measure 3.6:1
   and 2.6:1 — both under the 4.5:1 needed for text this size. The bright end of
   the ramp measures 9.3:1, which is what an earlier single-sample check saw and
   wrongly generalised to the whole week. */
.chiptune-theme-october .song-card .day-badge {
    border-color: var(--card-flame);
    color: var(--october-candle-bright);
}

/* Candle burn-down across the week. Each day is a cooler, lower flame than the
   last, and --card-wax shortens the taper in the sealed-door wells below.
   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 day 5 rather than restarting the cycle.
   The row match is wrapped in :where() so it contributes no specificity - the
   card states below then override --card-flame with a plain class selector
   instead of needing !important. */
.chiptune-theme-october :where(.week-row > div:nth-of-type(1)) .song-card,
.chiptune-theme-october :where(.week-row > div:nth-of-type(1)).song-card {
    --card-flame: #FFB347;
    --card-wax: 30px;
}

.chiptune-theme-october :where(.week-row > div:nth-of-type(2)) .song-card,
.chiptune-theme-october :where(.week-row > div:nth-of-type(2)).song-card {
    --card-flame: #FF9A2E;
    --card-wax: 26px;
}

.chiptune-theme-october :where(.week-row > div:nth-of-type(3)) .song-card,
.chiptune-theme-october :where(.week-row > div:nth-of-type(3)).song-card {
    --card-flame: #FF8214;
    --card-wax: 22px;
}

.chiptune-theme-october :where(.week-row > div:nth-of-type(4)) .song-card,
.chiptune-theme-october :where(.week-row > div:nth-of-type(4)).song-card {
    --card-flame: #FF6B00;
    --card-wax: 18px;
}

/* Second row of the week continues burning down: days 5, 6, 7 */
.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(1)) .song-card,
.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(1)).song-card {
    --card-flame: #E25400;
    --card-wax: 14px;
}

.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(2)) .song-card,
.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(2)).song-card {
    --card-flame: #C43D00;
    --card-wax: 10px;
}

.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(3)) .song-card,
.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(3)).song-card {
    --card-flame: #A32800;
    --card-wax: 7px;
}

.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(4)) .song-card,
.chiptune-theme-october :where(.week-row:nth-of-type(even) > div:nth-of-type(4)).song-card {
    --card-flame: #FFB347;
    --card-wax: 30px;
}

.chiptune-theme-october .song-card .song-title,
.chiptune-theme-october .song-card .song-name {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.chiptune-theme-october .song-card .song-artist,
.chiptune-theme-october .song-card .song-date,
.chiptune-theme-october .song-card .song-duration-text,
.chiptune-theme-october .song-card .song-meta,
.chiptune-theme-october .song-card .song-day {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
}

/* Hover: the niche warms as if a candle were carried past it.
   animation: none kills base.css's card-glow-pulse so the edges stay crisp -
   .is-playing is declared after this and keeps its own flicker. */
.chiptune-theme-october .song-card:hover {
    transform: translateY(-6px);
    box-shadow:
        inset 3px 3px 0 rgba(232, 224, 213, 0.12),
        inset -3px -3px 0 rgba(0, 0, 0, 0.6),
        0 12px 0 rgba(0, 0, 0, 0.65),
        0 0 30px rgba(255, 107, 0, 0.3);
    animation: none;
}

/* Playing card = the lit niche: flame brightens and breathes */
.chiptune-theme-october .song-card.is-playing {
    --card-flame: var(--october-candle-bright);
    box-shadow:
        var(--october-bevel),
        0 4px 0 rgba(0, 0, 0, 0.7),
        0 0 26px rgba(255, 107, 0, 0.45);
    animation: october-candle-breathe 3.4s ease-in-out infinite;
}

.chiptune-theme-october .song-card.is-today {
    --card-flame: var(--october-candle-bright);
    box-shadow:
        var(--october-bevel),
        0 4px 0 rgba(0, 0, 0, 0.7),
        0 0 22px rgba(255, 107, 0, 0.38);
    animation: none;
}

/* A lit candle flame in today's niche, drawn as a gradient teardrop rather than
   an emoji so it matches the rest of the theme. Top-left corner: the base
   .song-card clips overflow and the day badge owns the top-right.
   Base .song-card::after is a full-bleed inset:0 corner decoration, so three of
   its properties have to be undone here or the flame breaks: the unused offsets
   (or `top`/`left` are ignored), border-radius: 0.5rem (which fights the
   teardrop shape), and border: 2px (which boxes the flame in a visible frame).
   opacity: 1 undoes the base .placeholder-card::after dimming. */
.chiptune-theme-october .song-card.is-today::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 14px;
    right: auto;
    bottom: auto;
    width: 13px;
    height: 19px;
    border: none;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: var(--october-flame-fill);
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.75);
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: october-flicker 0.16s ease-in-out infinite alternate;
}

/* 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-october .song-card-wrapper .song-card {
    --card-flame: var(--october-gold);
    box-shadow:
        var(--october-bevel),
        0 4px 0 rgba(0, 0, 0, 0.7),
        0 0 28px rgba(212, 175, 55, 0.45);
}

/* Gold cross badge for winners, kept inside the clipped card bounds. This is
   also the click target for the DON'T LOOK BACK 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. The offsets deliberately match September's badge
   (top: 8px; right: 18px) because the hit-test box in pixel-art.js is a
   hardcoded 48x40 region measured from the card's top-right corner.
   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 cross at the
   top-left, behind the ribbon and out of sync with the egg. */
.chiptune-theme-october .song-card-wrapper .song-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 18px;
    left: auto;
    bottom: auto;
    /* Two crossing bars painted as backgrounds - box-shadow would only clone
       this box's own shape, and border-radius/border from the base rule would
       round and inflate them. */
    width: 16px;
    height: 20px;
    border: none;
    border-radius: 0;
    background:
        linear-gradient(var(--october-gold), var(--october-gold)) 6px 0 / 4px 20px no-repeat,
        linear-gradient(var(--october-gold), var(--october-gold)) 0 5px / 16px 4px no-repeat;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8));
    opacity: 1;
    pointer-events: none;
    z-index: 3;
    animation: october-cross-glow 3.6s ease-in-out infinite;
}

/* 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
   candlelit corridor - at 0.5 it reads straight through the card and makes the
   text unreadable. The "not yet" / "missed" signal comes from the cold palette
   and the dashed border instead. */

/* Past placeholders are cold niches - still carved, just gone out. */
.chiptune-theme-october .song-card.placeholder-card.is-past {
    --card-flame: var(--october-gutter);
    background: #131113;
    opacity: 1;
    box-shadow: var(--october-bevel), var(--october-shadow-stone);
}

/* Future cards are a niche nobody has opened: dashed outline, flat fill, no
   bevel - unfinished masonry rather than a sealed tomb. */
.chiptune-theme-october .song-card.is-future {
    --card-flame: var(--october-gutter);
    background: #101010;
    opacity: 1;
    border: 3px dashed #3A3A3A;
    box-shadow: none;
}

.chiptune-theme-october .song-card.is-future::before {
    opacity: 0.4;
}

/* base.css:1305 `.song-card.placeholder-card.is-future:hover` sets opacity:
   0.85 at (0,4,0), which outranks the (0,3,0) rule above — so hovering an
   unscheduled card faded it and let the corridor artwork read straight through,
   the exact failure the opaque-placeholder decision exists to prevent. */
.chiptune-theme-october .song-card.placeholder-card.is-future:hover {
    opacity: 1;
    border-color: #3A3A3A;
}

.chiptune-theme-october .placeholder-title {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1px;
    color: #9A9A9A;
}

.chiptune-theme-october .placeholder-status {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0;
}

.chiptune-theme-october .placeholder-status.status-today {
    color: var(--october-candle);
}

.chiptune-theme-october .placeholder-status.status-future {
    color: var(--october-ghost-bright);
}

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

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

/* =============================================================================
   UNRELEASED CARDS - a sealed crypt door 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 a sealed door - weathered stone, an iron-banded arch,
   a SEALED plate, and two eyes watching from behind it.
   ============================================================================= */

.chiptune-theme-october .mystery-block,
.chiptune-theme-october .mystery-block-bg {
    /* Replaces the orange brick gradient with weathered crypt-door stone */
    background:
        linear-gradient(170deg, #211D1E 0%, #161314 55%, #0E0B0C 100%);
}

/* The gold rounded frame becomes the iron-banded arch surround. The top corners
   are rounded into an arch; the bottom stays square where it meets the floor. */
.chiptune-theme-october .mystery-block::before,
.chiptune-theme-october .mystery-block-bg::before {
    inset: 8px;
    border: 3px solid var(--october-iron);
    border-radius: 46% 46% 0 0 / 22% 22% 0 0;
    opacity: 0.85;
    box-shadow:
        inset 0 2px 0 rgba(232, 224, 213, 0.06),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

/* The shine quadrant becomes the SEALED plate. right/bottom have to be released:
   base pins all four offsets, and left+right+width together would stretch it. */
.chiptune-theme-october .mystery-block::after,
.chiptune-theme-october .mystery-block-bg::after {
    content: 'SEALED';
    top: 14px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    background: none;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.4rem;
    letter-spacing: 3px;
    color: var(--card-flame);
    opacity: 0.55;
}

/* The bounce becomes a slow breath, like something on the other side of it */
.chiptune-theme-october .question-block {
    animation: october-door-breathe 5.5s ease-in-out infinite;
}

@keyframes october-door-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-2px) scale(1.012); }
}

/* The taper itself — this is what --card-wax drives. The property was being
   assigned by every rotation rule but never read, so the documented 30px→7px
   burn-down existed only in the colour ramp. Drawn on .question-block::after,
   the one pseudo-element in this component that neither base.css nor the rules
   above already use: a candle stub that is visibly shorter every day of the
   week, standing in a pool of its own wax. */
.chiptune-theme-october .question-block::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 13%;
    width: 11px;
    height: calc(var(--card-wax) + 12px);
    transform: translateX(-50%);
    background:
        /* flame, sitting on top of whatever wax is left */
        radial-gradient(
            ellipse 4px 6px at 50% 6px,
            var(--october-candle-pale) 0%,
            var(--october-candle-bright) 38%,
            var(--october-candle) 62%,
            transparent 80%
        ) top center / 11px 12px no-repeat,
        /* the taper, shortening across the week */
        linear-gradient(180deg, #E8E0D5 0%, #CFC3AD 58%, #9A8F7E 100%)
            bottom center / 9px var(--card-wax) no-repeat;
    filter: drop-shadow(0 0 7px rgba(255, 107, 0, 0.45));
    pointer-events: none;
    z-index: 1;
    animation: october-flicker 0.2s ease-in-out infinite alternate;
}

/* An unscheduled day has no one to light it */
.chiptune-theme-october .placeholder-card.is-future .question-block::after {
    filter: none;
    opacity: 0.4;
    animation: none;
}

/* The brick texture becomes the door's own stone coursing */
.chiptune-theme-october .question-block::before {
    background-image: var(--october-mortar);
    background-size: 34px 18px;
    opacity: 0.8;
}

/* The '?' glyph becomes two eyes watching from the dark. The span is the left
   eye and a box-shadow places the right one; font-size: 0 hides the character
   without collapsing the box, and box-shadow is not clipped by the element's
   own overflow, so the second eye still draws.
   Eyes are round - the one place this theme uses a circle, because a square eye
   reads as a pixel rather than a thing that is looking at you. */
.chiptune-theme-october .question-mark {
    display: block;
    width: 9px;
    height: 9px;
    font-size: 0;
    line-height: 0;
    color: var(--card-flame);
    background: currentColor;
    border-radius: 50%;
    box-shadow:
        22px 0 0 currentColor,
        0 0 12px currentColor,
        22px 0 12px currentColor;
    transform: translateX(-11px);
    text-shadow: none;
    animation: october-eyes-blink 6s ease-in-out infinite;
}

@keyframes october-eyes-blink {
    0%, 92%, 100% { transform: translateX(-11px) scaleY(1); opacity: 1; }
    95%           { transform: translateX(-11px) scaleY(0.1); opacity: 0.7; }
}

/* An unscheduled day has nothing behind the door yet - no eyes, colder stone,
   and the SEALED plate goes gray. A drafted day keeps its own flame, so the
   two states fall out of --card-flame almost for free. */
.chiptune-theme-october .placeholder-card.is-future .question-mark {
    background: transparent;
    box-shadow: none;
    animation: none;
}

.chiptune-theme-october .placeholder-card.is-future .mystery-block-bg::after {
    color: #5A5A5A;
}

/* 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-october .coming-soon-card .coming-soon-badge {
    background: rgba(10, 10, 10, 0.94);
    border: 2px solid var(--card-flame);
    border-radius: 0;
    color: var(--card-flame);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.28rem 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 niche opaque and
   let the cold palette carry the "not published yet" read. */
.chiptune-theme-october .coming-soon-card {
    opacity: 1;
}

.chiptune-theme-october .coming-soon-card .coming-soon-hint {
    font-family: 'Crimson Text', Georgia, serif;
    font-style: italic;
    letter-spacing: 0.5px;
    color: #8A8A8A !important;
}

.chiptune-theme-october .coming-soon-card .coming-soon-text {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--card-flame);
    opacity: 0.8;
}

/* Today with nothing published yet: the rings become candle-glow halos and the
   '?' picks up the theme's own blackletter. */
.chiptune-theme-october .placeholder-cover {
    background: #0E0B0C;
    background-image: var(--october-mortar);
    background-size: 34px 18px;
}

.chiptune-theme-october .mystery-ring {
    border-radius: 50%;
    border-color: rgba(255, 107, 0, 0.55);
    animation-timing-function: ease-in-out;
}

.chiptune-theme-october .mystery-icon {
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 2.6rem;
    color: var(--october-candle);
    text-shadow: 0 0 18px rgba(255, 107, 0, 0.8);
    animation: october-door-breathe 3.6s ease-in-out infinite;
}

/* Past with nothing published: a cold dead niche, not TV static */
.chiptune-theme-october .static-noise {
    opacity: 0.06;
    animation: none;
}

.chiptune-theme-october .offline-text {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    color: rgba(232, 224, 213, 0.3);
    letter-spacing: 2px;
}

.chiptune-theme-october .placeholder-static {
    background: rgba(17, 15, 17, 0.88);
    border: 2px dashed var(--october-gutter);
    border-radius: 0;
}

/* Cover art sits recessed into the niche, arched at the top, and aged. The
   bevel is inverted (dark top-left, lit bottom-right) so it reads as a recess
   cut into the stone rather than another raised block. */
/* The niche itself must NOT be rounded. base.css:764 gives .song-cover
   `overflow: hidden`, so any border-radius here clips every absolutely
   positioned child as well as the artwork — and the DAY badge sits only 10px
   in from the top-right corner, well inside a 44%/18% curve, so its tail was
   being painted away. The badge measures identically with and without the
   radius (x 329, w 77, inset 10): the geometry was never wrong, only what got
   painted, which is exactly what a rect-based check cannot see. */
.chiptune-theme-october .song-cover {
    border-radius: 0;
    border: 2px solid var(--october-bg-surface);
    box-shadow:
        inset 3px 3px 0 rgba(0, 0, 0, 0.6),
        inset -3px -3px 0 rgba(232, 224, 213, 0.05);
    overflow: hidden;
    position: relative;
}

/* The arch shapes the artwork, not the box that also holds badges and buttons */
.chiptune-theme-october .song-cover img,
.chiptune-theme-october .song-cover video,
.chiptune-theme-october .song-cover .song-cover-placeholder,
.chiptune-theme-october .song-card img.cover-art,
.chiptune-theme-october .song-card .cover-art {
    border-radius: 44% 44% 0 0 / 18% 18% 0 0;
}

/* Aged photograph: everything in this castle has been here a long time */
.chiptune-theme-october .song-cover img,
.chiptune-theme-october .song-cover video,
.chiptune-theme-october .song-card img.cover-art {
    filter: sepia(24%) contrast(112%) saturate(88%);
}

/* base.css:923 makes .play-btn a full-bleed scrim (position: absolute; inset: 0)
   that base fades in from opacity 0 on card hover. Giving it a solid background
   therefore hides the cover art completely — candle orange turned the whole
   niche into an orange rectangle with a play glyph on it. It stays translucent
   so the artwork reads through, and takes the same arch as the media so the
   wash follows the niche instead of squaring it off. */
.chiptune-theme-october .song-cover .play-btn {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.32) 0%, rgba(10, 10, 10, 0.7) 100%);
    color: var(--october-candle-pale);
    border: none;
    border-radius: 44% 44% 0 0 / 18% 18% 0 0;
    text-shadow: 0 0 16px rgba(255, 107, 0, 0.95), 0 2px 0 #0A0A0A;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Hover warms the niche as if a candle were held up to it - a wash, not a fill */
.chiptune-theme-october .song-cover .play-btn:hover {
    background:
        radial-gradient(ellipse at 50% 54%, rgba(255, 107, 0, 0.36) 0%, rgba(255, 107, 0, 0.13) 46%, transparent 76%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.28) 0%, rgba(10, 10, 10, 0.6) 100%);
    color: #FFF4C0;
}

.chiptune-theme-october .song-cover .song-duration {
    background: rgba(10, 10, 10, 0.92);
    color: var(--october-candle);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    border-radius: 0;
    letter-spacing: 1px;
}

/* Songs with no cover art fall back to base.css's placeholder, which centres a
   full-colour music emoji over --chiptune-surface. At 3rem the emoji renders in
   its own pink/violet and is the one thing on the page that ignores the palette
   entirely, so it gets drained to bone and lit like everything else down here.
   base.css:1562 .today-badge hardcodes --chiptune-accent for the same reason the
   day badge did; restated just below. */
.chiptune-theme-october .song-cover-placeholder {
    background:
        radial-gradient(ellipse at 50% 62%, rgba(255, 107, 0, 0.16) 0%, transparent 68%),
        #0E0B0C;
}

.chiptune-theme-october .song-cover-placeholder span {
    filter: grayscale(100%) sepia(62%) saturate(180%) hue-rotate(-18deg) brightness(0.92);
    opacity: 0.75;
    text-shadow: 0 0 22px rgba(255, 107, 0, 0.5);
}

.chiptune-theme-october .today-badge {
    background: var(--october-candle);
    color: #0A0A0A;
}

/* Equalizer bars read as candles of varying height */
.chiptune-theme-october .equalizer-bar {
    background: linear-gradient(180deg, var(--october-candle-bright) 0%, var(--october-blood) 100%);
    border-radius: 0;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.7);
}

/* =============================================================================
   VOTE & LIKE BUTTONS - Iron plates
   ============================================================================= */

.chiptune-theme-october .vote-btn,
.chiptune-theme-october .song-card .vote-btn {
    background: var(--october-bg-mid);
    border: 2px solid var(--october-blood);
    color: var(--october-bone);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chiptune-theme-october .vote-btn:hover:not(:disabled),
.chiptune-theme-october .song-card .vote-btn:hover:not(:disabled) {
    background: var(--october-blood);
    color: var(--october-bone);
    box-shadow: var(--october-glow-blood);
}

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

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

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

.chiptune-theme-october .like-btn.liked {
    color: var(--october-blood-bright);
}

.chiptune-theme-october .like-btn.liked .like-icon {
    animation: october-heart-thud 0.5s ease-out;
    filter: drop-shadow(0 0 7px rgba(183, 28, 28, 0.85));
}

.chiptune-theme-october .vote-count-badge {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-blood);
    color: var(--october-candle);
    border-radius: 0;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .vote-btn-overlay.voted {
    color: #0A0A0A;
}

/* =============================================================================
   DAY & CARD BADGES - Tombstone plates
   ============================================================================= */

.chiptune-theme-october .day-badge {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-candle);
    color: var(--october-candle);
    /* A headstone: rounded shoulders, flat base */
    border-radius: 6px 6px 0 0;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    letter-spacing: 1px;
    cursor: pointer;
}

/* base.css:796 repaints today's badge in --chiptune-accent (ghost purple) and
   adds badge-pulse. Purple on a surface is the one place the accent escapes the
   palette, so restate it at higher specificity. animation: none rather than an
   October pulse, so there's no extra class to remember in the reduced-motion
   block below. */
.chiptune-theme-october .song-card.is-today .day-badge {
    background: var(--october-bg-panel);
    border-color: var(--october-candle-bright);
    color: var(--october-candle-bright);
    animation: none;
}

.chiptune-theme-october .card-badge-weekly {
    background: var(--october-blood);
    color: var(--october-bone);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(139, 0, 0, 0.7);
}

.chiptune-theme-october .card-badge-monthly-ribbon {
    background: var(--october-gradient-gold);
    color: #0A0A0A;
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: var(--october-glow-gold);
}

.chiptune-theme-october .today-badge {
    position: absolute;
    background: var(--october-candle);
    color: #0A0A0A;
    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: var(--october-glow-candle);
}

/* =============================================================================
   PLAYER BAR - Stone ledge with a candle-wax progress bar
   ============================================================================= */

.chiptune-theme-october .chiptune-player {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 4px solid var(--october-blood);
    border-radius: 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.8);
    position: relative;
}

.chiptune-theme-october .chiptune-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--october-mortar);
    background-size: 52px 26px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

/* Blood running down from the border into the bar */
.chiptune-theme-october .chiptune-player::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background:
        radial-gradient(ellipse 6px 14px at 12px 0%, var(--october-blood) 0 72%, transparent 73%),
        radial-gradient(ellipse 4px 9px at 44px 0%, var(--october-blood) 0 72%, transparent 73%),
        radial-gradient(ellipse 7px 16px at 82px 0%, var(--october-blood) 0 72%, transparent 73%),
        radial-gradient(ellipse 5px 7px at 118px 0%, var(--october-blood) 0 72%, transparent 73%);
    background-size: 150px 16px;
    background-repeat: repeat-x;
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
}

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

.chiptune-theme-october .chiptune-player,
.chiptune-theme-october .player-info,
.chiptune-theme-october .player-title,
.chiptune-theme-october .player-song-title,
.chiptune-theme-october .player-song-artist {
    color: var(--october-bone);
}

.chiptune-theme-october .player-title,
.chiptune-theme-october .player-song-title {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.chiptune-theme-october .player-date,
.chiptune-theme-october .player-song-artist {
    font-family: 'Crimson Text', Georgia, serif;
    color: var(--october-tomb);
}

.chiptune-theme-october .player-cover {
    filter: sepia(24%) contrast(112%);
    border-radius: 0;
}

.chiptune-theme-october .player-time,
.chiptune-theme-october .player-duration {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.25rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .player-btn {
    color: var(--october-tomb);
    border-radius: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.chiptune-theme-october .player-btn:hover {
    color: var(--october-candle);
}

.chiptune-theme-october .player-btn.play-pause {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-blood);
    color: var(--october-candle);
    border-radius: 0;
    box-shadow: 0 0 16px rgba(139, 0, 0, 0.5);
}

.chiptune-theme-october .player-btn.play-pause:hover {
    background: var(--october-blood);
    color: var(--october-bone);
    box-shadow: var(--october-glow-blood);
}

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

/* The progress bar is the candle: molten wax fills it as the song burns down,
   and the skull handle rides the flame at the playhead. */
.chiptune-theme-october .player-progress-bar {
    background: var(--october-crypt);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    overflow: visible;
    position: relative;
}

.chiptune-theme-october .player-progress-fill {
    background: linear-gradient(90deg, var(--october-blood-deep) 0%, var(--october-blood) 45%, var(--october-candle) 100%);
    border-radius: 0;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
}

.chiptune-theme-october .player-volume-fill {
    background: linear-gradient(90deg, var(--october-blood) 0%, var(--october-ghost) 100%);
}

.chiptune-theme-october .stats-panel {
    background: rgba(20, 16, 20, 0.95);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    box-shadow: var(--october-shadow-stone);
    color: var(--october-bone);
}

.chiptune-theme-october .stats-title,
.chiptune-theme-october .stats-day {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    color: var(--october-candle);
}

.chiptune-theme-october .stats-tagline {
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.1rem;
    color: var(--october-blood-bright);
}

.chiptune-theme-october .stat-bar-fill {
    border-radius: 0;
}

.chiptune-theme-october .stat-bar-fill.plays-bar { background: var(--october-candle); }
.chiptune-theme-october .stat-bar-fill.likes-bar { background: var(--october-blood-bright); }
.chiptune-theme-october .stat-bar-fill.votes-bar { background: var(--october-ghost); }

.chiptune-theme-october .queue-item.is-current {
    background: rgba(139, 0, 0, 0.2);
}

.chiptune-theme-october .queue-title {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    color: var(--october-bone);
}

.chiptune-theme-october .expanded-song-title {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    color: var(--october-bone);
}

.chiptune-theme-october .expanded-cover,
.chiptune-theme-october .queue-cover {
    filter: sepia(24%) contrast(112%);
    border-radius: 0;
}

.chiptune-theme-october .expanded-cover-glow {
    background: radial-gradient(circle, rgba(255, 107, 0, 0.35) 0%, transparent 70%);
}

.chiptune-theme-october .expanded-tab-btn.active {
    color: var(--october-candle);
    border-bottom-color: var(--october-candle);
}

.chiptune-theme-october .shortcut-row kbd {
    background: var(--october-bg-panel);
    border: 1px solid var(--october-blood);
    border-radius: 0;
    color: var(--october-bone);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.4rem;
}

/* =============================================================================
   WEEK NAVIGATION - Corridor markers
   ============================================================================= */

.chiptune-theme-october .week-nav {
    background: linear-gradient(90deg, rgba(20, 16, 20, 0.88) 0%, rgba(28, 28, 28, 0.88) 100%);
    border-bottom: 2px solid rgba(139, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.chiptune-theme-october .week-nav a,
.chiptune-theme-october .week-nav span {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
}

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

.chiptune-theme-october .week-nav-current .week-label {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #0A0A0A;
    animation: none;
}

.chiptune-theme-october .week-nav-current .week-year {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.35rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .week-nav-current .week-dates {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .week-nav-theme-icon {
    filter: drop-shadow(0 0 7px rgba(255, 107, 0, 0.7));
}

.chiptune-theme-october .week-nav-theme-name {
    color: var(--october-blood-bright);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .week-nav-btn {
    color: var(--october-tomb);
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.chiptune-theme-october .week-nav-btn:hover:not(.disabled) {
    background: var(--october-blood);
    color: var(--october-bone);
    transform: translateY(-1px);
}

/* =============================================================================
   THEME BANNER & VOTE BANNERS - Cobwebbed plaques
   ============================================================================= */

.chiptune-theme-october .theme-banner {
    background: rgba(20, 16, 20, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    box-shadow: var(--october-shadow-stone);
    position: relative;
    overflow: hidden;
}

/* Blood gradient across the top of the plaque */
.chiptune-theme-october .theme-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--october-blood-deep) 0%, var(--october-blood) 30%, var(--october-candle) 60%, var(--october-ghost) 100%);
    pointer-events: none;
    z-index: 1;
}

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

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

.chiptune-theme-october .theme-banner .theme-icon {
    filter: drop-shadow(0 0 9px rgba(255, 107, 0, 0.7));
}

.chiptune-theme-october .theme-banner .theme-name {
    color: var(--october-bone);
    font-family: 'Nosifer', 'Times New Roman', serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #0A0A0A, 0 0 18px rgba(139, 0, 0, 0.6);
}

.chiptune-theme-october .theme-banner .theme-tagline {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.7rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .theme-banner .theme-description {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.05rem;
}

.chiptune-theme-october .theme-banner .theme-link {
    color: var(--october-candle);
    background: transparent;
    border: 2px solid var(--october-candle);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chiptune-theme-october .theme-banner .theme-link:hover {
    background: var(--october-candle);
    color: #0A0A0A;
    box-shadow: var(--october-glow-candle);
}

.chiptune-theme-october .vote-banner {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-ghost);
    border-radius: 0;
    box-shadow: 0 0 22px rgba(106, 13, 173, 0.35);
    position: relative;
    overflow: hidden;
}

/* A cobweb strung across the top-right corner: concentric strands plus radial
   spokes, both drawn as gradients so nothing has to ship as an asset. */
.chiptune-theme-october .vote-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    background:
        repeating-radial-gradient(
            circle at 100% 0,
            transparent 0 15px,
            rgba(232, 224, 213, 0.16) 15px 16px
        ),
        repeating-conic-gradient(
            from 180deg at 100% 0,
            rgba(232, 224, 213, 0.14) 0 1.2deg,
            transparent 1.2deg 13deg
        );
    pointer-events: none;
    z-index: 2;
}

.chiptune-theme-october .vote-banner-content {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: 0.4px;
    position: relative;
    z-index: 3;
}

.chiptune-theme-october .vote-banner-btn {
    background: var(--october-blood);
    border: 2px solid var(--october-blood-bright);
    color: var(--october-bone);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-october .vote-banner-btn:hover {
    background: var(--october-candle);
    color: #0A0A0A;
    box-shadow: var(--october-glow-candle);
}

.chiptune-theme-october .voting-open-banner {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-candle);
    border-radius: 0;
    box-shadow: 0 0 22px rgba(255, 107, 0, 0.3);
}

.chiptune-theme-october .voting-open-banner .vote-text {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Countdown as a row of headstones */
.chiptune-theme-october .countdown,
.chiptune-theme-october .vote-countdown {
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.7rem;
    color: var(--october-candle);
    letter-spacing: 3px;
}

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

.chiptune-theme-october .trophy-badge {
    background: rgba(212, 175, 55, 0.12);
    border: 2px solid var(--october-gold);
    border-radius: 0;
    padding: 0.5rem 1rem;
    color: var(--october-gold);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-october .winner-banner,
.chiptune-theme-october .month-winner-banner {
    background: rgba(20, 16, 20, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--october-gold);
    border-radius: 0;
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.3);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.chiptune-theme-october .winner-banner .winner-text strong {
    color: var(--october-gold);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
}

.chiptune-theme-october .winner-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.8));
}

.chiptune-theme-october .winner-info h3 {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
}

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

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

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

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

/* Stat cards burn down the same way the week does */
.chiptune-theme-october .stat-card:nth-child(7n + 2) { border-color: #FF9A2E; }
.chiptune-theme-october .stat-card:nth-child(7n + 3) { border-color: #FF8214; }
.chiptune-theme-october .stat-card:nth-child(7n + 4) { border-color: #FF6B00; }
.chiptune-theme-october .stat-card:nth-child(7n + 5) { border-color: #E25400; }
.chiptune-theme-october .stat-card:nth-child(7n + 6) { border-color: #C43D00; }
.chiptune-theme-october .stat-card:nth-child(7n + 7) { border-color: #A32800; }

.chiptune-theme-october .stat-card h3 {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    color: var(--october-bone);
}

.chiptune-theme-october .stat-card .stat-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 7px rgba(255, 107, 0, 0.6));
}

.chiptune-theme-october .stat-card .stat-value {
    font-size: 2.2rem;
    color: var(--october-candle);
    display: block;
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    letter-spacing: 1px;
}

.chiptune-theme-october .stat-card .stat-label {
    font-size: 0.7rem;
    color: var(--october-tomb);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chiptune-theme-october .hof-card {
    background: var(--october-bg-mid);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--october-shadow-stone);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

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

.chiptune-theme-october .hof-card.year-card {
    border-color: var(--october-gold);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(212, 175, 55, 0.35);
}

.chiptune-theme-october .hof-card.month-card {
    border-color: var(--october-ghost);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(106, 13, 173, 0.35);
}

.chiptune-theme-october .hof-card-badge.week {
    background: var(--october-blood);
    color: var(--october-bone);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-october .hof-label.purple {
    background: var(--october-ghost);
    color: var(--october-bone);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-october .hof-play-btn,
.chiptune-theme-october .bracket-play-btn,
.chiptune-theme-october .champion-play-btn,
.chiptune-theme-october .entry-play-btn,
.chiptune-theme-october .yearly-bracket-play-btn,
.chiptune-theme-october .yearly-champ-play {
    background: var(--october-bg-panel);
    color: var(--october-candle);
    border: 2px solid var(--october-candle);
    border-radius: 0;
}

.chiptune-theme-october .hof-play-btn:hover {
    background: var(--october-candle);
    color: #0A0A0A;
    box-shadow: var(--october-glow-candle);
}

.chiptune-theme-october .hof-btn {
    background: transparent;
    border: 2px solid var(--october-blood);
    color: var(--october-candle);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-october .hof-btn:hover {
    background: var(--october-blood);
    color: var(--october-bone);
    transform: translateY(-2px);
    box-shadow: var(--october-glow-blood);
}

.chiptune-theme-october .theme-card {
    background: var(--october-bg-mid);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    box-shadow: var(--october-shadow-stone);
}

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

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

.chiptune-theme-october .theme-card-header .current-badge {
    background: var(--october-candle);
    color: #0A0A0A;
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

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

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

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

.chiptune-theme-october .bracket-vote-btn {
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-october .bracket-vote-btn:hover:not(:disabled) {
    background: var(--october-blood);
    color: var(--october-bone);
}

.chiptune-theme-october .bracket-vote-btn.voted {
    background: var(--october-candle) !important;
    color: #0A0A0A;
    border-color: var(--october-candle-deep);
}

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

.chiptune-theme-october .bracket-status.voting p {
    color: var(--october-bone);
}

.chiptune-theme-october .slot-title {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
}

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

.chiptune-theme-october .champion-card {
    background: rgba(20, 16, 20, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--october-gold);
    border-radius: 0;
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.3);
}

.chiptune-theme-october .champion-card-title,
.chiptune-theme-october .champion-info h3 {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-october .past-champion-badge {
    background: var(--october-gradient-gold);
    color: #0A0A0A;
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-october .song-nav-btn {
    color: var(--october-tomb);
    border-radius: 0;
}

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

.chiptune-theme-october .play-btn-large {
    background: var(--october-bg-panel);
    border: 3px solid var(--october-blood);
    color: var(--october-candle);
    border-radius: 0;
    box-shadow: 0 0 24px rgba(139, 0, 0, 0.5);
}

.chiptune-theme-october .play-btn-large:hover {
    background: var(--october-blood);
    color: var(--october-bone);
    transform: scale(1.04);
    box-shadow: 0 0 32px rgba(255, 107, 0, 0.55);
}

.chiptune-theme-october .like-btn-large.liked {
    color: var(--october-blood-bright);
}

.chiptune-theme-october .vote-badge-float {
    background: var(--october-bg-panel);
    border: 2px solid var(--october-candle);
    color: var(--october-candle);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.4);
}

.chiptune-theme-october .week-check {
    background: rgba(139, 0, 0, 0.12);
    border: 2px solid rgba(139, 0, 0, 0.5);
    border-radius: 0;
}

.chiptune-theme-october .chiptune-toast {
    background: var(--october-bg-panel);
    color: var(--october-bone);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    box-shadow: var(--october-shadow-stone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
}

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

.chiptune-theme-october .modal-theme-name {
    color: var(--october-blood-bright);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

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

/* =============================================================================
   PAUSE MENU - The castle holds its breath
   ============================================================================= */

.chiptune-theme-october .pause-menu-content {
    background: rgba(20, 16, 20, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 3px solid var(--october-blood);
    border-radius: 0;
    box-shadow: 0 0 44px rgba(139, 0, 0, 0.35);
}

.chiptune-theme-october .pause-menu-content::before {
    border-color: rgba(255, 107, 0, 0.3);
}

.chiptune-theme-october .pause-menu-scanlines {
    background: var(--october-mortar);
    background-size: 52px 26px;
    opacity: 0.6;
}

.chiptune-theme-october .pause-menu-header {
    border-bottom-color: rgba(139, 0, 0, 0.45);
}

.chiptune-theme-october .pause-menu-title {
    color: var(--october-bone);
    font-family: 'Nosifer', 'Times New Roman', serif;
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #0A0A0A;
}

.chiptune-theme-october .pause-menu-subtitle {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .pause-menu-item {
    color: var(--october-bone);
    border-bottom-color: rgba(232, 224, 213, 0.1);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.chiptune-theme-october .pause-menu-item:hover {
    background: rgba(139, 0, 0, 0.22);
    color: var(--october-candle);
}

.chiptune-theme-october .pause-menu-item.active {
    color: var(--october-candle);
    background: rgba(255, 107, 0, 0.1);
}

.chiptune-theme-october .pause-menu-cursor {
    color: var(--october-candle);
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.8);
}

.chiptune-theme-october .pause-menu-item-detail {
    border-bottom-color: rgba(232, 224, 213, 0.1);
}

.chiptune-theme-october .pause-menu-item-detail p {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
}

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

.chiptune-theme-october .pause-menu-cta {
    background: transparent;
    border: 2px solid var(--october-candle);
    color: var(--october-candle);
    border-radius: 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

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

.chiptune-theme-october .pause-menu-resume-btn {
    color: var(--october-candle);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-october .pause-menu-resume-btn:hover {
    color: var(--october-blood-bright);
}

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

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

   yearly.css loads AFTER the theme file (base -> player -> pixel-art -> theme
   -> yearly), so these have to be restated here to win.
   ============================================================================= */

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

/* yearly.css paints the dot, its glyph and the label cyan (#00d4ff at 169-188
   and 219), and the connector too. Overriding only the dot's background left
   the number and the label reading cyan on every step - measured
   rgb(0, 212, 255) on all four. Colour and text-shadow have to come with it. */
.chiptune-theme-october .phase-dot {
    background: rgba(255, 107, 0, 0.12);
    border-color: var(--october-candle);
    border-radius: 50%;
    color: var(--october-candle);
    box-shadow:
        0 0 12px rgba(255, 107, 0, 0.7),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.8);
}

.chiptune-theme-october .phase-label {
    color: var(--october-candle);
    text-shadow: 0 0 6px rgba(255, 107, 0, 0.6);
}

.chiptune-theme-october .phase-connector {
    background: var(--october-blood);
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.6);
}

/* `viewing` is the only one of these yearly states that uses !important
   (1136-1139), so matching specificity is not enough to beat it. */
.chiptune-theme-october .phase-step.viewing .phase-dot {
    border-color: var(--october-candle-bright) !important;
    box-shadow: 0 0 15px rgba(255, 160, 64, 0.85) !important;
}

.chiptune-theme-october .phase-step.clickable:hover .phase-dot {
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.9);
}

/* yearly.css carries its own .active / .complete state rules at the same
   specificity as the unqualified overrides above, and it loads after this file,
   so it wins every state and the overrides only ever took the base one - active
   and completed phases kept yearly's hard-coded pink and cyan. These are
   state-qualified so they outrank it. (yearly.css is indented throughout, which
   makes its rules look nested; leading whitespace is not significant in CSS and
   they are plain top-level selectors.) */
.chiptune-theme-october .phase-step.active {
    background: rgba(255, 107, 0, 0.12);
    border-color: var(--october-candle);
    box-shadow:
        0 0 15px rgba(255, 107, 0, 0.55),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.chiptune-theme-october .phase-step.complete {
    background: rgba(139, 0, 0, 0.14);
    border-color: var(--october-blood-bright);
    box-shadow:
        0 0 12px rgba(139, 0, 0, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.chiptune-theme-october .phase-step:hover {
    border-color: var(--october-candle-bright);
    box-shadow:
        0 0 12px rgba(255, 160, 64, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.chiptune-theme-october .phase-step.active .phase-dot {
    background: rgba(255, 107, 0, 0.18);
    border-color: var(--october-candle);
    color: var(--october-candle);
    box-shadow:
        0 0 10px rgba(255, 107, 0, 0.8),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 8px rgba(255, 107, 0, 0.9);
}

.chiptune-theme-october .phase-step.complete .phase-dot {
    background: rgba(139, 0, 0, 0.2);
    border-color: var(--october-blood-bright);
    color: var(--october-blood-bright);
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
}

.chiptune-theme-october .phase-step.active .phase-label {
    color: var(--october-candle);
}

.chiptune-theme-october .phase-step.complete .phase-label {
    color: var(--october-blood-bright);
}

.chiptune-theme-october .champion-play-overlay {
    background: rgba(20, 16, 20, 0.78);
}

.chiptune-theme-october .champion-title {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-october .champion-stats .stat-value {
    color: var(--october-candle);
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    letter-spacing: 1px;
}

.chiptune-theme-october .wildcard-entry .song-name,
.chiptune-theme-october .champion-card .song-title {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
}

.chiptune-theme-october .group-box {
    background: var(--october-bg-mid);
    border: 2px solid var(--october-blood);
    border-radius: 0;
    box-shadow: var(--october-shadow-stone);
}

.chiptune-theme-october .group-entry {
    background: rgba(10, 10, 10, 0.9);
    border: 2px solid rgba(139, 0, 0, 0.5);
    border-radius: 0;
}

.chiptune-theme-october .group-entry .song-name {
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
}

.chiptune-theme-october .vote-counter .vote-pip {
    background: rgba(106, 13, 173, 0.35);
    border: 1px solid rgba(106, 13, 173, 0.75);
    border-radius: 0;
}

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

.chiptune-theme-october .yearly-bracket-slot {
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid rgba(139, 0, 0, 0.55);
    border-radius: 0;
}

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

.chiptune-theme-october .yearly-bracket-slot .slot-title {
    color: var(--october-bone);
}

.chiptune-theme-october .yearly-bracket-vote-btn.voted {
    background: var(--october-candle);
    color: #0A0A0A;
    border-radius: 0;
}

/* =============================================================================
   FONTS - blackletter headings
   ============================================================================= */

.chiptune-theme-october h1,
.chiptune-theme-october h2,
.chiptune-theme-october h3 {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

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

/* The candle flame. Fast and irregular - a flame doesn't ease. */
@keyframes october-flicker {
    0%   { transform: scale(1) skewX(0deg); opacity: 0.88; }
    100% { transform: scale(1.09) skewX(-2deg); opacity: 1; }
}

@keyframes october-candle-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.88; }
}

@keyframes october-ember-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes october-cross-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }
    50%      { filter: drop-shadow(0 0 16px rgba(212, 175, 55, 1)); }
}

@keyframes october-heart-thud {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    45%  { transform: scale(1.08); }
    70%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* =============================================================================
   SCROLLBAR - Iron rail
   ============================================================================= */

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

.chiptune-theme-october ::-webkit-scrollbar-track {
    background: var(--october-crypt);
}

.chiptune-theme-october ::-webkit-scrollbar-thumb {
    background: var(--october-blood);
    border: 2px solid var(--october-crypt);
    border-radius: 0;
}

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

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

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

.chiptune-theme-october ::selection {
    background: var(--october-blood);
    color: var(--october-bone);
}

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

.chiptune-theme-october .voter-avatar-placeholder {
    background: var(--october-gradient-candle);
    color: var(--october-bone);
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 700;
    border: 2px solid var(--october-blood);
    border-radius: 0;
}

.chiptune-theme-october a {
    color: var(--october-candle);
    transition: color 0.18s ease;
}

.chiptune-theme-october a:hover {
    color: var(--october-blood-bright);
}

.chiptune-theme-october .chiptune-footer {
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 3px solid var(--october-blood);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.7);
}

.chiptune-theme-october .chiptune-footer,
.chiptune-theme-october .chiptune-footer p,
.chiptune-theme-october .chiptune-footer span {
    color: var(--october-tomb);
    font-family: 'Crimson Text', Georgia, serif;
}

.chiptune-theme-october .chiptune-footer a {
    color: var(--october-candle);
}

.chiptune-theme-october .chiptune-footer a:hover {
    color: var(--october-blood-bright);
}

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

/* BLOOD MOON (Konami) — the sky turns and the whole castle goes red */
.october-bloodmoon-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background:
        radial-gradient(circle at 50% 28%, rgba(139, 0, 0, 0.32) 0%, transparent 55%),
        linear-gradient(180deg, rgba(139, 0, 0, 0.3) 0%, rgba(74, 0, 0, 0.5) 100%);
    animation: october-bloodmoon-fade 3.4s ease-in-out forwards;
}

@keyframes october-bloodmoon-fade {
    0%   { opacity: 0; }
    14%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 0; }
}

.october-bloodmoon-disc {
    position: fixed;
    top: 16%;
    left: 50%;
    width: 140px;
    height: 140px;
    margin-left: -70px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle at 38% 34%, #E04A4A 0%, #8B0000 58%, #4A0000 100%);
    box-shadow: 0 0 70px rgba(139, 0, 0, 0.95), 0 0 140px rgba(139, 0, 0, 0.6);
    animation: october-bloodmoon-rise 3.4s ease-out forwards;
}

@keyframes october-bloodmoon-rise {
    0%   { opacity: 0; transform: translateY(70px) scale(0.75); }
    22%  { opacity: 1; transform: translateY(0) scale(1); }
    78%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-18px) scale(1.04); }
}

.october-bloodmoon-text {
    position: fixed;
    top: 52%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 10000;
    font-family: 'Nosifer', 'Times New Roman', serif;
    font-size: clamp(1.1rem, 5vw, 3rem);
    letter-spacing: 4px;
    color: #E8E0D5;
    text-shadow: 0 0 22px rgba(139, 0, 0, 1), 3px 3px 0 #0A0A0A;
    animation: october-egg-text 3.2s ease-in-out forwards;
}

@keyframes october-egg-text {
    0%   { opacity: 0; transform: scale(0.85); }
    16%  { opacity: 1; transform: scale(1); }
    80%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
}

/* CRYPT OPENS (triple-click a card) — the slab drags aside */
.song-card.october-crypt-open {
    animation: october-crypt-open 1.1s ease-in-out;
    z-index: 20;
}

@keyframes october-crypt-open {
    0%   { transform: translateX(0) rotate(0deg); }
    26%  { transform: translateX(-9px) rotate(-1.6deg); }
    54%  { transform: translateX(7px) rotate(1.2deg); box-shadow: 0 0 34px rgba(106, 13, 173, 0.7); }
    78%  { transform: translateX(-3px) rotate(-0.5deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.october-crypt-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(circle at 50% 60%, rgba(106, 13, 173, 0.22) 0%, transparent 65%);
    animation: october-crypt-flash 1s ease-out forwards;
}

@keyframes october-crypt-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* DON'T LOOK BACK (winner cross) — the candelabra catches */
.october-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(255, 107, 0, 0.2) 0%, transparent 70%);
    animation: october-winner-fade 2.2s ease-in-out forwards;
}

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

.october-winner-text {
    font-family: 'Nosifer', 'Times New Roman', serif;
    font-size: clamp(0.95rem, 4vw, 2.2rem);
    letter-spacing: 3px;
    color: var(--october-gold);
    background: rgba(10, 10, 10, 0.88);
    border: 3px solid var(--october-blood);
    padding: 1rem 1.6rem;
    text-align: center;
    text-shadow: 3px 3px 0 #0A0A0A, 0 0 22px rgba(212, 175, 55, 0.7);
    box-shadow: 0 0 36px rgba(212, 175, 55, 0.45);
    animation: october-egg-text 2.2s ease-in-out forwards;
}

/* CANDLE SNUFF (day badge) — the flame gutters out, then catches again */
.day-badge.october-snuff {
    animation: october-snuff 0.85s ease-in-out;
}

@keyframes october-snuff {
    0%   { filter: brightness(1); opacity: 1; transform: scale(1); }
    18%  { filter: brightness(0.35); opacity: 0.55; transform: scale(0.96); }
    46%  { filter: brightness(0.2); opacity: 0.4; transform: scale(0.94); }
    74%  { filter: brightness(1.7); opacity: 1; transform: scale(1.04); }
    100% { filter: brightness(1); opacity: 1; transform: scale(1); }
}

/* GHOST DRIFT (background click) — a shade rises and dissipates */
.october-ghost-drift {
    position: fixed;
    width: 26px;
    height: 34px;
    margin-left: -13px;
    margin-top: -17px;
    pointer-events: none;
    z-index: 9996;
    border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 38%, rgba(232, 224, 213, 0.85) 0%, rgba(155, 140, 190, 0.5) 45%, rgba(106, 13, 173, 0.18) 75%, transparent 100%);
    box-shadow: 0 0 22px rgba(232, 224, 213, 0.45);
    animation: october-ghost-rise 1.6s ease-out forwards;
}

@keyframes october-ghost-rise {
    0%   { opacity: 0; transform: translateY(6px) scale(0.6); }
    18%  { opacity: 0.95; transform: translateY(-10px) scale(1); }
    62%  { opacity: 0.7; transform: translateY(-64px) scale(1.12) translateX(8px); }
    100% { opacity: 0; transform: translateY(-120px) scale(1.3) translateX(-6px); }
}

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

   Nothing here is inherited: base.css has no prefers-reduced-motion block and
   no per-month selectors, and the JS flag only gates the canvas particle
   bursts. Every class this theme animates - ambient and easter-egg alike - has
   to be listed by name. The lightning is the one that matters most.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .chiptune-theme-october .pixel-bg::before,
    .chiptune-theme-october .pixel-bg::after,
    .chiptune-theme-october .chiptune-app::before,
    .chiptune-theme-october .chiptune-app::after,
    .chiptune-theme-october .chiptune-header::after,
    .chiptune-theme-october .song-card.is-playing,
    .chiptune-theme-october .song-card.is-today::after,
    .chiptune-theme-october .song-card-wrapper .song-card::after,
    .chiptune-theme-october .question-block,
    .chiptune-theme-october .question-block::after,
    .chiptune-theme-october .question-mark,
    .chiptune-theme-october .mystery-icon,
    .chiptune-theme-october .mystery-ring,
    .chiptune-theme-october .nav-badge.pulse,
    .chiptune-theme-october .like-btn.liked .like-icon,
    /* Animations that come from base.css itself. base.css has no
       prefers-reduced-motion block at all, so these keep running on a playing
       card and on placeholder cards unless the theme stops them by name:
       .equalizer-bar (902-906), .offline-text (1496), .blink (1510),
       .status-dot (1542). */
    .chiptune-theme-october .equalizer-bar,
    .chiptune-theme-october .offline-text,
    .chiptune-theme-october .placeholder-title .blink,
    .chiptune-theme-october .blink,
    .chiptune-theme-october .status-dot,
    .october-bloodmoon-overlay,
    .october-bloodmoon-disc,
    .october-bloodmoon-text,
    .song-card.october-crypt-open,
    .october-crypt-flash,
    .october-winner-flash,
    .october-winner-text,
    .day-badge.october-snuff,
    .october-ghost-drift {
        animation: none;
    }

    /* The lightning layer is animation-driven, so killing the animation leaves
       it at opacity 0 - but be explicit, because this is the effect with an
       actual safety cost rather than a comfort one. */
    .chiptune-theme-october .pixel-bg::after {
        opacity: 0;
        display: none;
    }

    .chiptune-theme-october .song-card:hover {
        transform: none;
    }

    .chiptune-theme-october .stat-card:hover,
    .chiptune-theme-october .hof-card:hover {
        transform: none;
    }
}

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

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .chiptune-theme-october .chiptune-header {
        background: rgba(10, 10, 10, 0.985);
    }

    .chiptune-theme-october .chiptune-player {
        background: rgba(10, 10, 10, 0.99);
    }

    .chiptune-theme-october .week-nav {
        background: rgba(20, 16, 20, 0.97);
    }

    .chiptune-theme-october .theme-banner,
    .chiptune-theme-october .winner-banner,
    .chiptune-theme-october .month-winner-banner,
    .chiptune-theme-october .champion-card {
        background: rgba(20, 16, 20, 0.99);
    }

    .chiptune-theme-october .pause-menu-content {
        background: rgba(20, 16, 20, 0.995);
    }
}