/* Chiptune Challenge 2026 - November Theme: RPG Battles / Epic */
/* Boss Rush - the final fight. A 16-bit JRPG battle screen: menu windows, ATB
   gauges, braziers and magic. */
/* DARK theme - October's crypt black cools into a storm-night battle navy. */

/* 'Press Start 2P' is already loaded globally in base_chiptune.html. It carries
   every number and micro-label (day badges, times, stat values) the way a
   battle screen's damage and HP numbers do. Cinzel Decorative is display-only -
   its swash capitals turn to mush below ~1rem - Cinzel takes nav, buttons and
   card titles, and Quattrocento is the body face. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@600;700&family=Quattrocento:wght@400;700&display=swap');

:root {
    /* Primary Colors */
    --chiptune-primary: #1A237E;          /* Royal Blue - frames only, never text */
    --chiptune-primary-hover: #3949AB;
    --chiptune-secondary: #FF5722;        /* Fire Orange */
    --chiptune-accent: #7C4DFF;           /* Magic Purple */

    /* Backgrounds - battle night */
    --chiptune-bg: #0D1421;               /* Battle Dark */
    --chiptune-header-bg: rgba(13, 20, 33, 0.94);
    --chiptune-card-bg: #1E2A3A;          /* Command Blue */
    --chiptune-surface: rgba(124, 77, 255, 0.08);
    --chiptune-player-bg: rgba(13, 20, 33, 0.96);

    /* Text - parchment on blue */
    --chiptune-text: #FAFAFA;
    --chiptune-text-secondary: #B0BEC5;

    /* Borders & glows */
    --chiptune-border: rgba(176, 190, 197, 0.45);
    --chiptune-glow: rgba(124, 77, 255, 0.5);
    --chiptune-secondary-glow: rgba(255, 87, 34, 0.5);

    /* November-specific */
    --november-royal: #1A237E;
    --november-royal-bright: #3949AB;
    --november-royal-deep: #101850;
    --november-fire: #FF5722;
    --november-fire-bright: #FF8A50;
    --november-fire-deep: #C41C00;
    --november-magic: #7C4DFF;
    --november-magic-bright: #B388FF;
    --november-magic-deep: #4A1FC4;
    --november-gold: #FFC107;             /* Victory Gold - winners */
    --november-gold-pale: #FFE082;
    --november-gold-deep: #C79100;
    --november-parchment: #FAFAFA;
    --november-cream: #F5E6C8;            /* parchment cream - labels on dark */
    --november-steel: #90A4AE;
    --november-steel-light: #B0BEC5;
    /* HP green and MP blue are SEMANTIC - the stat bars and the ATB ramp. HP
       green never becomes a surface: November is lit by fire and magic. */
    --november-hp: #4CAF50;
    --november-mp: #2196F3;

    --november-bg-mid: #1E2A3A;
    --november-bg-surface: #2C3E50;
    --november-bg-panel: #111A2B;
    --november-void: #05080F;
    --november-gutter: #3A4656;

    /* The window frame. A classic battle-menu window is a blue gradient inside a
       bevelled silver rim with a hard black outline around that - the outline is
       what lifts it off any backdrop, so it lives in --november-outline and every
       window carries it. */
    --november-window: linear-gradient(180deg, #27378F 0%, #1A237E 36%, #121A5C 72%, #0E1442 100%);
    --november-window-flat: #1A237E;
    --november-frame-hi: #E3EAF2;
    --november-frame-mid: #9FB0C2;
    --november-frame-lo: #4E6078;
    --november-outline: 0 0 0 2px #05080F;
    --november-bevel:
        inset 0 2px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 0 rgba(0, 0, 0, 0.35);

    --november-glow-magic: 0 0 20px rgba(124, 77, 255, 0.5);
    --november-glow-fire: 0 0 24px rgba(255, 87, 34, 0.45);
    --november-glow-gold: 0 0 20px rgba(255, 193, 7, 0.5);
    --november-shadow-window: 0 4px 0 rgba(0, 0, 0, 0.6);
    --november-shadow-lift: 0 10px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(124, 77, 255, 0.28);

    --november-gradient-attack: linear-gradient(90deg, #FF5722 0%, #FFC107 100%);
    --november-gradient-magic: linear-gradient(90deg, #7C4DFF 0%, #2196F3 100%);
    --november-gradient-gold: linear-gradient(135deg, #FFE082 0%, #FFC107 45%, #C79100 100%);

    /* Four gold corner pieces, painted as backgrounds so any window can wear
       them without spending a pseudo-element on each corner. */
    --november-corners:
        linear-gradient(var(--november-gold), var(--november-gold)) top 4px left 4px / 10px 2px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) top 4px left 4px / 2px 10px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) top 4px right 4px / 10px 2px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) top 4px right 4px / 2px 10px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) bottom 4px left 4px / 10px 2px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) bottom 4px left 4px / 2px 10px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) bottom 4px right 4px / 10px 2px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) bottom 4px right 4px / 2px 10px no-repeat;

    /* Player Handle - the crossed swords ride the playhead on a fire seal */
    --chiptune-handle-size: 18px;
    --chiptune-handle-bg: radial-gradient(circle at 40% 35%, #FF8A50 0%, #FF5722 55%, #C41C00 100%);
    --chiptune-handle-radius: 2px;
    --chiptune-handle-icon-size: 10px;
    --chiptune-handle-icon-color: #FAFAFA;
    --chiptune-handle-icon-shadow: 0 0 4px rgba(255, 193, 7, 0.9);
    --chiptune-handle-glow: rgba(255, 87, 34, 0.7);

    /* Volume Handle */
    --chiptune-volume-handle-size: 14px;
    --chiptune-volume-handle-bg: radial-gradient(circle at 40% 35%, #B388FF 0%, #7C4DFF 60%, #4A1FC4 100%);
    --chiptune-volume-handle-radius: 2px;
    --chiptune-volume-handle-icon-size: 8px;
    --chiptune-volume-handle-icon-color: #FAFAFA;
    --chiptune-volume-handle-icon-shadow: 0 0 3px rgba(124, 77, 255, 0.9);
    --chiptune-volume-handle-glow: rgba(124, 77, 255, 0.6);
}

/* =============================================================================
   BODY & BACKGROUND - Storm-night navy over the battle arena artwork
   ============================================================================= */

body.chiptune-theme-november {
    background-color: #0D1421;
    /* Static arena artwork, fixed behind the scrolling content and anchored to
       the bottom, where all of its light is. The veil is heaviest at the top,
       where parchment UI text sits, and again at the very bottom under the
       player bar. If the artwork is missing the veil over battle dark still
       renders correctly. */
    background-image:
        linear-gradient(
            180deg,
            rgba(13, 20, 33, 0.78) 0%,
            rgba(13, 20, 33, 0.56) 32%,
            rgba(13, 20, 33, 0.5) 64%,
            rgba(13, 20, 33, 0.86) 100%
        ),
        url("/static/sites/zimventures/chiptune/images/november/november-battle-bg.69a21fadfe06.jpg");
    background-size: auto, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
    color: var(--november-parchment);
}

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

/* =============================================================================
   PIXEL BACKGROUND - repurposed as the magic in the air and the arena floor

   .pixel-bg exists in base_chiptune.html with two free pseudo-elements, so, as
   in October, it becomes two full-viewport layers instead of being switched
   off. No template change.
     ::before - magic motes rising off the floor
     ::after  - the battle grid, receding in perspective
   There is no lightning in this theme: the storm lives in the artwork, and a
   full-viewport flash is not worth its photosensitivity cost twice in a row.
   ============================================================================= */

/* The fade-out toward the top of the frame lives here rather than on the motes
   layer, because that layer moves: a mask on it would travel with it. The
   grid sits entirely inside the opaque bottom band, so it is unaffected. */
.chiptune-theme-november .pixel-bg {
    background: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(0deg, black 0%, black 35%, transparent 100%);
    mask-image: linear-gradient(0deg, black 0%, black 35%, transparent 100%);
}

/* Motes: a field of tiny sparks drifting upward. The layer is one tile
   (300px) taller than it needs to be and translated up by exactly one tile per
   loop, so it repeats seamlessly. transform rather than background-position,
   so the drift is composited instead of repainting a full-viewport layer every
   frame. */
.chiptune-theme-november .pixel-bg::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: -300px;
    height: calc(70% + 300px);
    background:
        radial-gradient(circle at 12% 70%, rgba(179, 136, 255, 0.85) 0 1.5px, transparent 2px),
        radial-gradient(circle at 31% 40%, rgba(124, 77, 255, 0.75) 0 1.5px, transparent 2px),
        radial-gradient(circle at 48% 85%, rgba(255, 138, 80, 0.8) 0 1.5px, transparent 2px),
        radial-gradient(circle at 66% 55%, rgba(179, 136, 255, 0.7) 0 1.5px, transparent 2px),
        radial-gradient(circle at 83% 78%, rgba(255, 193, 7, 0.7) 0 1.5px, transparent 2px),
        radial-gradient(circle at 92% 30%, rgba(124, 77, 255, 0.7) 0 1.5px, transparent 2px);
    background-size: 340px 300px;
    opacity: 0.55;
    pointer-events: none;
    will-change: transform;
    animation: november-motes-rise 13s linear infinite;
}

@keyframes november-motes-rise {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -300px, 0); }
}

/* The battle grid: faint magic-purple lines receding to the horizon along the
   bottom of the frame - the floor every battle in the genre is fought on. */
.chiptune-theme-november .pixel-bg::after {
    content: '';
    position: fixed;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 34%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(26, 35, 126, 0.16) 100%),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 58px,
            rgba(124, 77, 255, 0.13) 58px,
            rgba(124, 77, 255, 0.13) 60px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 38px,
            rgba(124, 77, 255, 0.1) 38px,
            rgba(124, 77, 255, 0.1) 40px
        );
    transform: perspective(520px) rotateX(62deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(0deg, black 0%, transparent 100%);
    mask-image: linear-gradient(0deg, black 0%, transparent 100%);
    pointer-events: none;
}

/* =============================================================================
   BRAZIERS - firelight pinned to the viewport edges
   ============================================================================= */

.chiptune-theme-november .chiptune-app::before,
.chiptune-theme-november .chiptune-app::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 90px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(124, 77, 255, 0.06) 30%,
        rgba(255, 87, 34, 0.1) 62%,
        rgba(255, 87, 34, 0.15) 86%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 5;
    animation: november-brazier 5.5s ease-in-out infinite alternate;
}

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

.chiptune-theme-november .chiptune-app::after {
    right: 0;
    animation-delay: -2.4s;
}

@keyframes november-brazier {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

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

/* =============================================================================
   HEADER - The top menu bar of the battle screen
   ============================================================================= */

.chiptune-theme-november .chiptune-header {
    background: linear-gradient(180deg, rgba(18, 26, 92, 0.96) 0%, rgba(13, 20, 33, 0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--november-frame-mid);
    box-shadow: 0 2px 0 #05080F, 0 4px 22px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
}

/* A gold trim line under the silver rim */
.chiptune-theme-november .chiptune-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--november-gold-deep) 18%, var(--november-gold) 50%, var(--november-gold-deep) 82%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Magic glow breathing along the bar */
.chiptune-theme-november .chiptune-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 260px 70px at 12% 100%, rgba(124, 77, 255, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 260px 70px at 88% 100%, rgba(255, 87, 34, 0.14) 0%, transparent 70%);
    animation: november-glow-breathe 4.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

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

@keyframes november-glow-breathe {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

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

.chiptune-theme-november .chiptune-logo .logo-text {
    color: var(--november-gold);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 #05080F, 0 0 14px rgba(255, 193, 7, 0.45);
}

.chiptune-theme-november .chiptune-logo .logo-icon {
    filter: drop-shadow(0 0 7px rgba(124, 77, 255, 0.85));
}

.chiptune-theme-november .chiptune-nav a,
.chiptune-theme-november .chiptune-nav .nav-link {
    color: var(--november-steel-light);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.chiptune-theme-november .chiptune-nav a:hover,
.chiptune-theme-november .chiptune-nav .nav-link:hover {
    color: var(--november-parchment);
    background: var(--november-royal-bright);
}

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

/* Battle dark on fire orange (about 6:1; parchment would be 3.0:1). The pulse
   is in the glow, not opacity: fading the whole badge took its text contrast
   down with it on every beat. */
.chiptune-theme-november .nav-badge.pulse {
    background: var(--november-fire);
    color: #0D1421;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255, 87, 34, 0.6);
    animation: november-ember-glow 2.2s ease-in-out infinite;
}

.chiptune-theme-november .auth-link {
    color: var(--november-steel-light);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-november .profile-menu {
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 3px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

.chiptune-theme-november .profile-menu-item {
    color: var(--november-parchment);
    font-family: 'Quattrocento', Georgia, serif;
    font-weight: 700;
}

.chiptune-theme-november .profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--november-gold);
}

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

.chiptune-theme-november .page-header h1,
.chiptune-theme-november .page-header h2 {
    color: var(--november-parchment);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--november-royal), 4px 4px 0 rgba(5, 8, 15, 0.7);
}

.chiptune-theme-november .page-header p,
.chiptune-theme-november .page-header .page-subtitle,
.chiptune-theme-november .page-header .subtitle {
    color: var(--november-fire-bright);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

/* =============================================================================
   SONG CARDS - Battle-menu windows

   Every card is a menu window with a gold-cornered silver rim. Two custom
   properties drive it, so a state only has to reassign those:
     --card-charge  the ATB colour: gauge fill, inner ring, day-badge rim
     --card-atb     how full the ATB gauge is, 0-1
   Across the week the gauge charges, MP blue through magic purple and fire to
   a full gold READY on day 7, so a row reads left-to-right as the fight
   building toward the vote. This is November's version of October's candle
   burning down - DESIGN_SYSTEM.md:231 names the ATB gauge filling.
   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-november {
    --card-charge: var(--november-magic);
    --card-atb: 0.5;
    --card-atb-anim: none;
}

.chiptune-theme-november .song-card {
    background: var(--november-window-flat);
    background: var(--november-window);
    /* Silver rim, lit top-left and shaded bottom-right */
    border: 3px solid var(--november-frame-mid);
    border-color:
        var(--november-frame-hi)
        var(--november-frame-lo)
        var(--november-frame-lo)
        var(--november-frame-hi);
    border-radius: 4px;
    /* Outline, then the inner ring in the card's own charge colour, then the
       window bevel and drop shadow. Older engines keep the flat ring. */
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px var(--card-charge),
        var(--november-bevel),
        var(--november-shadow-window);
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px color-mix(in srgb, var(--card-charge) 55%, transparent),
        var(--november-bevel),
        var(--november-shadow-window);
    padding: 10px;
    position: relative;
    transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}

/* Gold corner pieces and a top sheen. 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. */
.chiptune-theme-november .song-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        var(--november-corners),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 26%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

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

/* The day badge takes the card's charge on its RIM only. The label keeps a
   fixed cream: October found that keying text to a per-day ramp fails contrast
   at the ramp's dark end (2.6:1), and royal blue on this panel would be
   close to invisible. Cream on the panel fill measures well over 4.5:1 on
   every card in the row. */
.chiptune-theme-november .song-card .day-badge {
    border-color: var(--card-charge);
    color: var(--november-cream);
}

/* ATB charge across the week. Matching the row's Nth *div* rather than using
   :nth-child() for the same two reasons October documents: winners are wrapped
   in .song-card-wrapper, and _coming_soon_card.html emits an inline <style> as
   a sibling of the card that shifts every :nth-child() index after it.
   Weeks are split 4+3 (see split_week_days_into_rows), so the second row picks
   up at day 5. The row match is wrapped in :where() so it contributes no
   specificity and the card states below override --card-charge with a plain
   class selector. */
.chiptune-theme-november :where(.week-row > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-row > div:nth-of-type(1)).song-card {
    --card-charge: #2196F3;
    --card-atb: 0.14;
}

.chiptune-theme-november :where(.week-row > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-row > div:nth-of-type(2)).song-card {
    --card-charge: #3F7CF8;
    --card-atb: 0.29;
}

.chiptune-theme-november :where(.week-row > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-row > div:nth-of-type(3)).song-card {
    --card-charge: #5F63FC;
    --card-atb: 0.43;
}

.chiptune-theme-november :where(.week-row > div:nth-of-type(4)) .song-card,
.chiptune-theme-november :where(.week-row > div:nth-of-type(4)).song-card {
    --card-charge: #7C4DFF;
    --card-atb: 0.57;
}

/* Second row of the week keeps charging: days 5, 6, 7 */
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(1)).song-card {
    --card-charge: #C04BC9;
    --card-atb: 0.71;
}

.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(2)).song-card {
    --card-charge: #FF5722;
    --card-atb: 0.86;
}

/* Day 7: full gauge, gold, and it pulses READY */
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(3)).song-card {
    --card-charge: #FFC107;
    --card-atb: 1;
    --card-atb-anim: november-atb-ready 1.8s ease-in-out infinite;
}

.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(4)) .song-card,
.chiptune-theme-november :where(.week-row:nth-of-type(even) > div:nth-of-type(4)).song-card {
    --card-charge: #2196F3;
    --card-atb: 0.14;
}

/* Week 4 is not always seven days. split_week_days_into_rows() renders 8 days
   as 4+4, 9 as 3+3+3 and 10 as 4+3+3, and the 4+3 rules above would then put
   gold READY on the wrong card and restart a third row at blue. (November's
   week 4, Nov 22-30, is nine days.) Each longer layout is detected by its row
   shape on .week-grid, whose only children are the rows, and gets its own ramp
   across the same palette: first card blue, last card a full gold READY, and
   only the last card pulses. These come after the 4+3 rules and are equally
   specificity-free (:where), so they win on order. A browser without :has()
   keeps the 4+3 behaviour rather than losing the ramp. */

/* 8 days, 4+4 */
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(1)).song-card {
    --card-charge: #2196F3;
    --card-atb: 0.12;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(2)).song-card {
    --card-charge: #3F7CF8;
    --card-atb: 0.25;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(3)).song-card {
    --card-charge: #5F63FC;
    --card-atb: 0.38;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(4)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(1) > div:nth-of-type(4)).song-card {
    --card-charge: #7C4DFF;
    --card-atb: 0.50;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(1)).song-card {
    --card-charge: #C04BC9;
    --card-atb: 0.62;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(2)).song-card {
    --card-charge: #E2509A;
    --card-atb: 0.75;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(3)).song-card {
    --card-charge: #FF5722;
    --card-atb: 0.88;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(4)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-4:last-child) > .week-row:nth-child(2) > div:nth-of-type(4)).song-card {
    --card-charge: #FFC107;
    --card-atb: 1;
    --card-atb-anim: november-atb-ready 1.8s ease-in-out infinite;
}

/* 9 days, 3+3+3 */
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(1)).song-card {
    --card-charge: #2196F3;
    --card-atb: 0.11;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(2)).song-card {
    --card-charge: #3F7CF8;
    --card-atb: 0.22;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(1) > div:nth-of-type(3)).song-card {
    --card-charge: #5F63FC;
    --card-atb: 0.33;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(1)).song-card {
    --card-charge: #7C4DFF;
    --card-atb: 0.44;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(2)).song-card {
    --card-charge: #9E4CE6;
    --card-atb: 0.56;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(2) > div:nth-of-type(3)).song-card {
    --card-charge: #C04BC9;
    --card-atb: 0.67;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(1)).song-card {
    --card-charge: #FF5722;
    --card-atb: 0.78;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(2)).song-card {
    --card-charge: #FF8A14;
    --card-atb: 0.89;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-3:first-child) > .week-row:nth-child(3) > div:nth-of-type(3)).song-card {
    --card-charge: #FFC107;
    --card-atb: 1;
    --card-atb-anim: november-atb-ready 1.8s ease-in-out infinite;
}

/* 10 days, 4+3+3 */
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(1)).song-card {
    --card-charge: #2196F3;
    --card-atb: 0.10;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(2)).song-card {
    --card-charge: #3F7CF8;
    --card-atb: 0.20;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(3)).song-card {
    --card-charge: #5F63FC;
    --card-atb: 0.30;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(4)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(1) > div:nth-of-type(4)).song-card {
    --card-charge: #7C4DFF;
    --card-atb: 0.40;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(1)).song-card {
    --card-charge: #9E4CE6;
    --card-atb: 0.50;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(2)).song-card {
    --card-charge: #C04BC9;
    --card-atb: 0.60;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(2) > div:nth-of-type(3)).song-card {
    --card-charge: #E2509A;
    --card-atb: 0.70;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(1)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(1)).song-card {
    --card-charge: #FF5722;
    --card-atb: 0.80;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(2)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(2)).song-card {
    --card-charge: #FF8A14;
    --card-atb: 0.90;
    --card-atb-anim: none;
}

.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(3)) .song-card,
.chiptune-theme-november :where(.week-grid:has(> .week-row-4:first-child + .week-row-3 + .week-row-3:last-child) > .week-row:nth-child(3) > div:nth-of-type(3)).song-card {
    --card-charge: #FFC107;
    --card-atb: 1;
    --card-atb-anim: november-atb-ready 1.8s ease-in-out infinite;
}

/* The ATB gauge itself, drawn on .song-info::before - a pseudo-element that
   neither base.css nor any other rule here uses, and .song-info exists on all
   three card components (song, coming soon, placeholder). */
.chiptune-theme-november .song-card .song-info {
    position: relative;
    padding-top: 16px;
}

.chiptune-theme-november .song-card .song-info::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0.75rem;
    right: 0.75rem;
    height: 6px;
    border: 1px solid var(--november-frame-lo);
    border-radius: 1px;
    background:
        linear-gradient(90deg, var(--card-charge), var(--card-charge))
            left center / calc(var(--card-atb) * 100%) 100% no-repeat,
        var(--november-void);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--card-charge) 55%, white) 0%,
            var(--card-charge) 100%
        ) left center / calc(var(--card-atb) * 100%) 100% no-repeat,
        var(--november-void);
    box-shadow: 0 0 0 1px #05080F;
    pointer-events: none;
    animation: var(--card-atb-anim);
}

@keyframes november-atb-ready {
    0%, 100% { box-shadow: 0 0 0 1px #05080F, 0 0 4px rgba(255, 193, 7, 0.4); }
    50%      { box-shadow: 0 0 0 1px #05080F, 0 0 12px rgba(255, 193, 7, 0.95); }
}

.chiptune-theme-november .song-card .song-title,
.chiptune-theme-november .song-card .song-name {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 1px 1px 0 #05080F;
}

.chiptune-theme-november .song-card .song-artist,
.chiptune-theme-november .song-card .song-date,
.chiptune-theme-november .song-card .song-duration-text,
.chiptune-theme-november .song-card .song-meta,
.chiptune-theme-november .song-card .song-day {
    color: var(--november-steel-light);
    font-family: 'Quattrocento', Georgia, serif;
}

/* Hover: the window is selected. animation: none kills base.css's
   card-glow-pulse - .is-playing is declared after this and keeps its own. */
.chiptune-theme-november .song-card:hover {
    transform: translateY(-5px);
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px var(--card-charge),
        var(--november-bevel),
        0 10px 0 rgba(0, 0, 0, 0.55),
        0 0 26px rgba(124, 77, 255, 0.35);
    animation: none;
}

/* Playing card = this character's turn: fire-orange and pulsing battle-ready */
.chiptune-theme-november .song-card.is-playing {
    --card-charge: var(--november-fire);
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px var(--november-fire),
        var(--november-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 22px rgba(255, 87, 34, 0.4);
    animation: november-battle-ready 1.6s ease-in-out infinite;
}

.chiptune-theme-november .song-card.is-today {
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px var(--november-gold),
        var(--november-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 193, 7, 0.32);
    animation: none;
}

/* The command cursor: a white pointer bobbing beside today's window, the way
   a battle menu shows whose turn it is. Drawn with clip-path rather than an
   emoji so it matches the rest of the theme.
   Base .song-card::after is a full-bleed inset:0 corner decoration, so its
   offsets (or `top`/`left` are ignored), border-radius: 0.5rem and border: 2px
   all have to be released here. opacity: 1 undoes the base
   .placeholder-card::after dimming. */
.chiptune-theme-november .song-card.is-today::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    bottom: auto;
    width: 12px;
    height: 14px;
    border: none;
    border-radius: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #E3EAF2 55%, #9FB0C2 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    animation: november-cursor-bob 0.7s steps(2, jump-none) infinite;
}

/* 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-november .song-card-wrapper .song-card {
    --card-charge: var(--november-gold);
    border-color:
        var(--november-gold-pale)
        var(--november-gold-deep)
        var(--november-gold-deep)
        var(--november-gold-pale);
    box-shadow:
        var(--november-outline),
        inset 0 0 0 2px rgba(255, 193, 7, 0.6),
        var(--november-bevel),
        0 4px 0 rgba(0, 0, 0, 0.6),
        0 0 26px rgba(255, 193, 7, 0.4);
}

/* Gold crest for winners: a shield with a sword on it, pinned to the window's
   top rim. This is also the click target for the VICTORY easter egg, so it
   stays inside the hardcoded 48x40 region pixel-art.js hit-tests from the
   card's top-right corner (the WEEKLY WINNER ribbon owns the top-left).
   Two departures from July-October's top: 8px; right: 18px, both measured:
     - That spot overlaps the DAY badge, which starts 21px down and 21px in
       (card border + padding + the badge's own 8px). At top: 2px; right: 22px
       the crest ends at 20px and clears it.
     - pointer-events: auto. A pseudo-element that takes pointer events is
       hit-tested as its originating element, so a click on the crest targets
       the .song-card itself. With `none`, elementFromPoint at the crest came
       back as .play-btn - base.css's full-bleed scrim - and the winner
       handler's `button` guard returned before the egg could fire.
   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 crest
   top-left, behind the ribbon and out of sync with the egg.
   clip-path cuts the shield, so its glow comes from brightness rather than a
   drop-shadow (which the clip would cut off too). */
.chiptune-theme-november .song-card-wrapper .song-card::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 22px;
    left: auto;
    bottom: auto;
    width: 14px;
    height: 18px;
    border: none;
    border-radius: 0;
    background:
        /* blade */
        linear-gradient(#5A3E00, #5A3E00) 6px 3px / 2px 11px no-repeat,
        /* crossguard */
        linear-gradient(#5A3E00, #5A3E00) 3px 6px / 8px 2px no-repeat,
        var(--november-gradient-gold);
    clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%);
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    z-index: 3;
    animation: november-crest-shine 3.2s ease-in-out infinite;
}

/* Past and future placeholders both stay fully opaque - the arena artwork
   behind the page reads straight through a half-transparent window, the same
   lesson September and October learned. The "missed" / "not yet" signal comes
   from a drained palette and a dashed rim instead. */

/* Past placeholders: a KO'd party member - the window greys out, gauge empty.
   --card-atb-anim is reset with the gauge, or a past day 7 would keep pulsing
   READY from its day-position rule. */
.chiptune-theme-november .song-card.placeholder-card.is-past {
    --card-charge: var(--november-gutter);
    --card-atb: 0;
    --card-atb-anim: none;
    background: #141B28;
    opacity: 1;
    border-color: #4A5566 #2A3340 #2A3340 #4A5566;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

/* Future cards: a window not yet opened - dashed rim, flat fill, no bevel */
.chiptune-theme-november .song-card.is-future {
    --card-charge: var(--november-gutter);
    /* A day that hasn't happened isn't READY either */
    --card-atb-anim: none;
    background: #101827;
    opacity: 1;
    border: 3px dashed #3A4656;
    box-shadow: var(--november-outline);
}

.chiptune-theme-november .song-card.is-future::before {
    opacity: 0.35;
}

/* base.css:1305 `.song-card.placeholder-card.is-future:hover` sets opacity:
   0.85 at (0,4,0), which outranks a (0,3,0) theme rule - restated here so an
   unscheduled card does not fade on hover and let the artwork through. */
.chiptune-theme-november .song-card.placeholder-card.is-future:hover {
    opacity: 1;
    border-color: #3A4656;
}

.chiptune-theme-november .placeholder-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: #A9B4C2;
}

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

.chiptune-theme-november .placeholder-status.status-today {
    background: rgba(255, 193, 7, 0.1);
    border-color: var(--november-gold);
    color: var(--november-gold);
}

.chiptune-theme-november .placeholder-status.status-future {
    background: rgba(124, 77, 255, 0.12);
    border-color: rgba(179, 136, 255, 0.55);
    color: var(--november-magic-bright);
}

.chiptune-theme-november .placeholder-status.status-past {
    color: #8592A3;
}

.chiptune-theme-november .status-dot {
    background: var(--november-gold);
    border-radius: 0;
}

/* Placeholder day badges get a legible grey instead of the gutter-grey charge.
   Specificity is 4 classes so it beats `.chiptune-theme-november .song-card
   .day-badge` outright, and !important on the background because base.css
   puts !important on all three .placeholder-day-badge backgrounds. */
.chiptune-theme-november .song-card .day-badge.placeholder-day-badge {
    background: var(--november-bg-panel) !important;
    border-color: #5A6676;
    color: #B4BECB;
}

.chiptune-theme-november .song-card.is-today .day-badge.placeholder-day-badge {
    border-color: var(--november-gold);
    color: var(--november-cream);
}

/* =============================================================================
   UNRELEASED CARDS - a locked treasure chest 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)
   Every part of base.css's question block is repurposed:
     .mystery-block gradient    -> the dungeon floor the chest sits on
     ::before gold frame        -> an inner menu-window rim
     ::after shine quadrant     -> the LOCKED plate
     .question-block bounce     -> a slow idle hover
     .question-block::before    -> the chest itself
     .question-block::after     -> a glint on the lid (drafted days only)
     .question-mark '?'         -> the keyhole
   ============================================================================= */

.chiptune-theme-november .mystery-block,
.chiptune-theme-november .mystery-block-bg {
    background:
        radial-gradient(ellipse 70% 40% at 50% 78%, rgba(124, 77, 255, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, #141D3A 0%, #0F1629 60%, #0A0F1C 100%);
}

.chiptune-theme-november .mystery-block::before,
.chiptune-theme-november .mystery-block-bg::before {
    inset: 8px;
    border: 2px solid var(--november-frame-lo);
    border-radius: 3px;
    opacity: 0.9;
    box-shadow: inset 0 0 0 1px rgba(5, 8, 15, 0.8);
}

/* The LOCKED plate. right/bottom released: base pins all four offsets, and
   left+right+width together would stretch it. */
.chiptune-theme-november .mystery-block::after,
.chiptune-theme-november .mystery-block-bg::after {
    content: 'LOCKED';
    top: 16px;
    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;
    /* A fixed tone, not --card-charge: October trap 8. The blue-purple end of
       the ramp on this dark floor measures under 4.5:1. */
    color: var(--november-steel-light);
}

.chiptune-theme-november .question-block {
    animation: november-chest-idle 3.2s ease-in-out infinite;
}

@keyframes november-chest-idle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* The chest: a domed lid over a box, wood between gold bands, with a lock
   plate in the middle. Positioned so its lock plate lands exactly where the
   flex-centred .question-mark sits. inset is released from the base brick
   texture's inset: 0. */
.chiptune-theme-november .question-block::before {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 58px;
    transform: translate(-50%, -54%);
    border: 3px solid #05080F;
    border-radius: 14px 14px 3px 3px / 12px 12px 3px 3px;
    /* The lock plate is dark iron in a gold rim, not solid gold: the keyhole
       glows in the day's charge colour, and day 7's charge IS gold - on a gold
       plate it vanished entirely. */
    background:
        /* lock plate: iron face inside a gold rim */
        linear-gradient(#111A2B, #111A2B) 50% 50% / 14px 16px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) 50% 50% / 20px 22px no-repeat,
        /* lid seam */
        linear-gradient(#05080F, #05080F) 0 42% / 100% 3px no-repeat,
        /* gold bands */
        linear-gradient(var(--november-gold-deep), var(--november-gold-deep)) 14px 0 / 6px 100% no-repeat,
        linear-gradient(var(--november-gold-deep), var(--november-gold-deep)) calc(100% - 14px) 0 / 6px 100% no-repeat,
        /* lid highlight */
        linear-gradient(180deg, rgba(255, 224, 130, 0.22) 0%, transparent 30%),
        /* wood */
        linear-gradient(180deg, #8A4B22 0%, #6D3815 42%, #5A2C10 43%, #43200B 100%);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
    opacity: 1;
    pointer-events: none;
}

/* The keyhole, on the lock plate. The '?' span becomes it: font-size: 0 hides
   the character without collapsing the box; a round head plus a slot, both
   painted as backgrounds. Drafted days glow in their charge colour - there is
   something inside. */
.chiptune-theme-november .question-mark {
    display: block;
    position: relative;
    z-index: 1;
    width: 6px;
    height: 11px;
    font-size: 0;
    line-height: 0;
    color: var(--card-charge);
    background:
        radial-gradient(circle at 50% 3px, currentColor 0 2.6px, transparent 3px),
        linear-gradient(currentColor, currentColor) 50% 100% / 2px 7px no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 4px currentColor);
    text-shadow: none;
    transform: translateY(-2px);
    animation: november-keyhole-glow 2.4s ease-in-out infinite;
}

/* A glint sweeping the lid of a chest that has something in it */
.chiptune-theme-november .question-block::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -36px 0 0 18px;
    background: var(--november-parchment);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    pointer-events: none;
    z-index: 2;
    animation: november-glint 2.8s ease-in-out infinite;
}

/* An unscheduled day: an empty chest - dark keyhole, no glint, grey plate */
.chiptune-theme-november .placeholder-card.is-future .question-mark {
    color: #05080F;
    filter: none;
    animation: none;
}

.chiptune-theme-november .placeholder-card.is-future .question-block::after {
    display: none;
    animation: none;
}

.chiptune-theme-november .placeholder-card.is-future .question-block::before {
    filter: saturate(0.35) brightness(0.7);
}

.chiptune-theme-november .placeholder-card.is-future .mystery-block-bg::after {
    color: #8D99A8;
}

/* COMING SOON pill. Styled in an inline <style> inside _coming_soon_card.html,
   which the cascade sees after this file - the extra class wins. */
.chiptune-theme-november .coming-soon-card .coming-soon-badge {
    background: var(--november-bg-panel);
    border: 2px solid var(--card-charge);
    border-radius: 2px;
    color: var(--november-cream);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    box-shadow: 0 0 0 1px #05080F;
}

/* The component's inline style sets opacity: 0.9; keep the window opaque */
.chiptune-theme-november .coming-soon-card {
    opacity: 1;
}

.chiptune-theme-november .coming-soon-card .coming-soon-hint {
    font-family: 'Quattrocento', Georgia, serif;
    font-style: italic;
    letter-spacing: 0.4px;
    color: #A9B4C2 !important;
}

.chiptune-theme-november .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(--november-magic-bright);
    opacity: 1;
}

/* Today with nothing published yet: a summoning circle. The rings become
   magic-purple runes and the '?' turns gold. */
.chiptune-theme-november .placeholder-cover {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(124, 77, 255, 0.22) 0%, transparent 65%),
        #0E1529;
}

.chiptune-theme-november .mystery-ring {
    border-radius: 50%;
    border-color: rgba(179, 136, 255, 0.6);
    border-style: dashed;
    animation-timing-function: ease-in-out;
}

.chiptune-theme-november .mystery-icon {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--november-gold);
    text-shadow: 0 0 18px rgba(255, 193, 7, 0.75), 2px 2px 0 #05080F;
}

/* Past with nothing published: a fallen ally, not TV static */
.chiptune-theme-november .static-noise {
    opacity: 0.05;
    animation: none;
}

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

.chiptune-theme-november .placeholder-static {
    background: rgba(17, 24, 37, 0.92);
    border: 2px dashed var(--november-gutter);
    border-radius: 2px;
}

/* Cover art is the character portrait, set into the window with a thin
   inset rim. The cover stays square: base.css:764 gives .song-cover
   `overflow: hidden`, so any border-radius on it clips the DAY badge as well
   as the artwork - October trap 6, which no rect measurement catches. */
.chiptune-theme-november .song-cover {
    border-radius: 0;
    border: 2px solid var(--november-void);
    box-shadow:
        inset 0 0 0 1px var(--november-frame-lo),
        inset 3px 3px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

/* A touch of extra contrast and saturation: battle portraits are vivid */
.chiptune-theme-november .song-cover img,
.chiptune-theme-november .song-cover video,
.chiptune-theme-november .song-card img.cover-art {
    filter: contrast(108%) saturate(110%);
}

/* base.css:923 makes .play-btn a full-bleed scrim (position: absolute; inset:
   0) faded in on card hover. A solid background would hide the cover art
   entirely (October trap 7), so it stays a translucent wash. */
.chiptune-theme-november .song-cover .play-btn {
    background: linear-gradient(180deg, rgba(13, 20, 33, 0.28) 0%, rgba(13, 20, 33, 0.68) 100%);
    color: var(--november-parchment);
    border: none;
    border-radius: 0;
    text-shadow: 0 0 16px rgba(124, 77, 255, 0.95), 2px 2px 0 #05080F;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Hover: a spell charging in the portrait - a wash, not a fill */
.chiptune-theme-november .song-cover .play-btn:hover {
    background:
        radial-gradient(ellipse at 50% 54%, rgba(124, 77, 255, 0.36) 0%, rgba(124, 77, 255, 0.12) 46%, transparent 76%),
        linear-gradient(180deg, rgba(13, 20, 33, 0.24) 0%, rgba(13, 20, 33, 0.58) 100%);
    color: var(--november-gold-pale);
}

.chiptune-theme-november .song-cover .song-duration {
    background: rgba(13, 20, 33, 0.92);
    color: var(--november-cream);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    border-radius: 2px;
    letter-spacing: 1px;
    box-shadow: inset 0 0 0 1px var(--november-frame-lo);
}

/* Songs with no cover art fall back to base.css's placeholder, which centres a
   full-colour music emoji at 3rem. It is drained and re-lit in the palette so
   it doesn't read as a stray sticker. Written from base.css:913, not from an
   observed render - see the doc's Verification section. */
.chiptune-theme-november .song-cover-placeholder {
    background:
        radial-gradient(ellipse at 50% 62%, rgba(124, 77, 255, 0.2) 0%, transparent 68%),
        #0E1529;
}

.chiptune-theme-november .song-cover-placeholder span {
    filter: grayscale(100%) sepia(40%) hue-rotate(200deg) saturate(220%) brightness(1.05);
    opacity: 0.8;
    text-shadow: 0 0 22px rgba(124, 77, 255, 0.55);
}

/* Equalizer bars read as a row of MP gauges */
.chiptune-theme-november .equalizer-bar {
    background: linear-gradient(180deg, var(--november-magic-bright) 0%, var(--november-mp) 100%);
    border-radius: 0;
    box-shadow: 0 0 6px rgba(124, 77, 255, 0.75);
}

/* =============================================================================
   VOTE & LIKE BUTTONS - Command menu entries
   ============================================================================= */

.chiptune-theme-november .vote-btn,
.chiptune-theme-november .song-card .vote-btn {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 2px solid var(--november-frame-mid);
    color: var(--november-parchment);
    border-radius: 3px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    box-shadow: 0 0 0 1px #05080F;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chiptune-theme-november .vote-btn:hover:not(:disabled),
.chiptune-theme-november .song-card .vote-btn:hover:not(:disabled) {
    background: var(--november-royal-bright);
    border-color: var(--november-fire);
    color: var(--november-parchment);
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-fire);
}

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

.chiptune-theme-november .vote-btn.voted,
.chiptune-theme-november .song-card .vote-btn.voted {
    background: var(--november-gradient-gold);
    border-color: var(--november-gold-deep);
    color: #0D1421;
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-gold);
}

.chiptune-theme-november .like-btn {
    color: #8592A3;
}

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

.chiptune-theme-november .like-btn.liked .like-icon {
    animation: november-heal-pop 0.5s ease-out;
    filter: drop-shadow(0 0 7px rgba(255, 87, 34, 0.85));
}

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

.chiptune-theme-november .vote-btn-overlay.voted {
    color: #0D1421;
}

/* =============================================================================
   DAY & CARD BADGES - Status windows
   ============================================================================= */

.chiptune-theme-november .day-badge {
    background: var(--november-bg-panel);
    border: 2px solid var(--november-magic);
    color: var(--november-cream);
    border-radius: 2px;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.45rem;
    letter-spacing: 1px;
    box-shadow: 0 0 0 1px #05080F;
    text-shadow: none;
    cursor: pointer;
}

/* base.css:796 repaints today's badge in --chiptune-accent and adds a pulse at
   (0,3,0). Restated at (0,4,0) - October trap 5. animation: none rather than a
   November pulse, so there's no extra class to name under reduced motion. */
.chiptune-theme-november .song-card.is-today .day-badge {
    background: var(--november-bg-panel);
    border-color: var(--november-gold);
    color: var(--november-gold-pale);
    animation: none;
}

.chiptune-theme-november .card-badge-weekly {
    background: var(--november-royal-bright);
    color: var(--november-parchment);
    border: 2px solid var(--november-frame-hi);
    border-radius: 2px;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px #05080F, 0 0 14px rgba(124, 77, 255, 0.6);
}

.chiptune-theme-november .card-badge-monthly-ribbon {
    background: var(--november-gradient-gold);
    color: #0D1421;
    border: 2px solid var(--november-gold-pale);
    border-radius: 2px;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-gold);
}

/* base.css:1562 .today-badge hardcodes --chiptune-accent the same way the day
   badge did. Written from source rather than an observed render. */
.chiptune-theme-november .today-badge {
    position: absolute;
    background: var(--november-gold);
    color: #0D1421;
    padding: 4px 14px;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    border: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-gold);
}

/* =============================================================================
   PLAYER BAR - The battle command window, with an ATB progress gauge
   ============================================================================= */

.chiptune-theme-november .chiptune-player {
    background: var(--november-window-flat);
    background:
        linear-gradient(180deg, rgba(39, 55, 143, 0.97) 0%, rgba(26, 35, 126, 0.97) 40%, rgba(14, 20, 66, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 3px solid var(--november-frame-hi);
    border-radius: 0;
    box-shadow: 0 -2px 0 #05080F, 0 -6px 28px rgba(0, 0, 0, 0.7);
    position: relative;
}

/* Gold trim under the silver rim */
.chiptune-theme-november .chiptune-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--november-gold-deep) 15%, var(--november-gold) 50%, var(--november-gold-deep) 85%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* A faint top sheen across the window */
.chiptune-theme-november .chiptune-player::after {
    content: '';
    position: absolute;
    inset: 2px 0 auto 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

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

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

.chiptune-theme-november .player-title,
.chiptune-theme-november .player-song-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 1px 1px 0 #05080F;
}

.chiptune-theme-november .player-date,
.chiptune-theme-november .player-song-artist {
    font-family: 'Quattrocento', Georgia, serif;
    color: var(--november-steel-light);
}

.chiptune-theme-november .player-cover {
    border-radius: 2px;
    box-shadow: 0 0 0 2px var(--november-frame-mid), 0 0 0 4px #05080F;
}

/* Times in the battle-screen number face */
.chiptune-theme-november .player-time,
.chiptune-theme-november .player-duration {
    color: var(--november-cream);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #05080F;
}

.chiptune-theme-november .player-btn {
    color: var(--november-steel-light);
    border-radius: 2px;
    transition: color 0.15s ease, background 0.15s ease;
}

.chiptune-theme-november .player-btn:hover {
    color: var(--november-gold);
}

/* Play is the FIGHT command */
.chiptune-theme-november .player-btn.play-pause {
    background: var(--november-bg-panel);
    border: 2px solid var(--november-fire);
    color: var(--november-parchment);
    border-radius: 3px;
    box-shadow: 0 0 0 1px #05080F, 0 0 12px rgba(255, 87, 34, 0.35);
}

.chiptune-theme-november .player-btn.play-pause:hover {
    background: var(--november-fire);
    color: var(--november-parchment);
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-fire);
}

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

/* The progress bar is an ATB gauge. player.css draws the visible track as the
   content box of a padded element (padding 8px, background-clip: content-box),
   so a border on the bar would frame the whole 22px hit area rather than the
   6px track. The rim is drawn on ::before around the track instead, and the
   quarter segment markers on ::after above the fill. */
.chiptune-theme-november .player-progress-bar {
    background: var(--november-void);
    background-clip: content-box;
    border-radius: 0;
    overflow: visible;
    position: relative;
}

.chiptune-theme-november .player-progress-bar::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -2px;
    right: -2px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid var(--november-frame-mid);
    border-radius: 1px;
    box-shadow: 0 0 0 1px #05080F;
    pointer-events: none;
}

.chiptune-theme-november .player-progress-bar::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent calc(25% - 2px),
        rgba(5, 8, 15, 0.9) calc(25% - 2px),
        rgba(5, 8, 15, 0.9) 25%
    );
    pointer-events: none;
    z-index: 1;
}

.chiptune-theme-november .player-progress-fill {
    background: var(--november-gradient-attack);
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255, 87, 34, 0.55);
}

.chiptune-theme-november .player-progress-handle {
    z-index: 2;
}

.chiptune-theme-november .player-volume-fill {
    background: var(--november-gradient-magic);
}

.chiptune-theme-november .stats-panel {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 3px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
    color: var(--november-parchment);
}

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

.chiptune-theme-november .stats-tagline {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--november-fire-bright);
}

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

/* The three song stats as a party's status bars */
.chiptune-theme-november .stat-bar-fill.plays-bar { background: var(--november-gradient-attack); }
.chiptune-theme-november .stat-bar-fill.likes-bar { background: var(--november-hp); }
.chiptune-theme-november .stat-bar-fill.votes-bar { background: var(--november-mp); }

.chiptune-theme-november .queue-item.is-current {
    background: rgba(255, 255, 255, 0.1);
}

.chiptune-theme-november .queue-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    color: var(--november-parchment);
}

.chiptune-theme-november .expanded-song-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    color: var(--november-parchment);
}

.chiptune-theme-november .expanded-cover,
.chiptune-theme-november .queue-cover {
    border-radius: 2px;
}

.chiptune-theme-november .expanded-cover-glow {
    background: radial-gradient(circle, rgba(124, 77, 255, 0.4) 0%, transparent 70%);
}

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

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

/* =============================================================================
   WEEK NAVIGATION - The encounter bar
   ============================================================================= */

.chiptune-theme-november .week-nav {
    background: linear-gradient(90deg, rgba(18, 26, 92, 0.9) 0%, rgba(13, 20, 33, 0.9) 100%);
    border-bottom: 2px solid var(--november-frame-lo);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.chiptune-theme-november .week-nav a,
.chiptune-theme-november .week-nav span {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

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

.chiptune-theme-november .week-nav-current .week-label {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #05080F;
    animation: none;
}

.chiptune-theme-november .week-nav-current .week-year {
    color: var(--november-gold);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.chiptune-theme-november .week-nav-current .week-dates {
    color: var(--november-steel-light);
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.chiptune-theme-november .week-nav-theme-icon {
    filter: drop-shadow(0 0 7px rgba(124, 77, 255, 0.75));
}

.chiptune-theme-november .week-nav-theme-name {
    color: var(--november-gold);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.chiptune-theme-november .week-nav-btn {
    color: var(--november-steel-light);
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.chiptune-theme-november .week-nav-btn:hover:not(.disabled) {
    background: var(--november-royal-bright);
    color: var(--november-parchment);
    transform: translateY(-1px);
}

/* =============================================================================
   THEME BANNER & VOTE BANNERS - Dialogue windows and the quest alert
   ============================================================================= */

.chiptune-theme-november .theme-banner {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-color:
        var(--november-frame-hi)
        var(--november-frame-lo)
        var(--november-frame-lo)
        var(--november-frame-hi);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-bevel), var(--november-shadow-window);
    position: relative;
    overflow: hidden;
}

/* Gold corners */
.chiptune-theme-november .theme-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--november-corners);
    pointer-events: none;
    z-index: 0;
}

/* The attack gradient across the bottom edge, like a charged limit gauge */
.chiptune-theme-november .theme-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--november-mp) 0%, var(--november-magic) 35%, var(--november-fire) 70%, var(--november-gold) 100%);
    pointer-events: none;
    z-index: 0;
}

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

.chiptune-theme-november .theme-banner .theme-icon {
    filter: drop-shadow(0 0 9px rgba(124, 77, 255, 0.75));
}

.chiptune-theme-november .theme-banner .theme-name {
    color: var(--november-gold);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #05080F, 0 0 16px rgba(255, 193, 7, 0.4);
}

.chiptune-theme-november .theme-banner .theme-tagline {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--november-royal-deep);
}

.chiptune-theme-november .theme-banner .theme-description {
    color: var(--november-steel-light);
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 1.02rem;
}

.chiptune-theme-november .theme-banner .theme-link {
    color: var(--november-gold);
    background: transparent;
    border: 2px solid var(--november-gold);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', 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-november .theme-banner .theme-link:hover {
    background: var(--november-gold);
    color: #0D1421;
    box-shadow: var(--november-glow-gold);
}

/* The vote banner is a quest alert: a menu window with a bouncing "!" marker
   in its top-right corner, drawn in CSS (bar + dot) rather than an emoji. */
.chiptune-theme-november .vote-banner {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-magic);
    border-radius: 4px;
    box-shadow: var(--november-outline), 0 0 22px rgba(124, 77, 255, 0.35);
    position: relative;
    overflow: hidden;
}

.chiptune-theme-november .vote-banner::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 14px;
    width: 8px;
    height: 26px;
    background:
        linear-gradient(var(--november-gold), var(--november-gold)) 50% 0 / 6px 17px no-repeat,
        linear-gradient(var(--november-gold), var(--november-gold)) 50% 100% / 6px 6px no-repeat;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.75)) drop-shadow(1px 1px 0 #05080F);
    pointer-events: none;
    z-index: 2;
    animation: november-quest-bounce 1.1s ease-in-out infinite;
}

.chiptune-theme-november .vote-banner-content {
    color: var(--november-parchment);
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 3;
}

/* Dark text on fire orange: parchment on #FF5722 measures 3.0:1, battle dark
   about 6:1. */
.chiptune-theme-november .vote-banner-btn {
    background: var(--november-fire);
    border: 2px solid var(--november-fire-bright);
    color: #0D1421;
    border-radius: 3px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px #05080F;
}

.chiptune-theme-november .vote-banner-btn:hover {
    background: var(--november-gold);
    border-color: var(--november-gold-pale);
    color: #0D1421;
    box-shadow: 0 0 0 1px #05080F, var(--november-glow-gold);
}

.chiptune-theme-november .voting-open-banner {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-fire);
    border-radius: 4px;
    box-shadow: var(--november-outline), 0 0 22px rgba(255, 87, 34, 0.3);
}

.chiptune-theme-november .voting-open-banner .vote-text {
    font-family: 'Quattrocento', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Countdown as a turn timer, in the battle-number face */
.chiptune-theme-november .countdown,
.chiptune-theme-november .vote-countdown {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--november-gold);
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #05080F;
}

/* =============================================================================
   TROPHY & WINNER BANNERS - Victory screens
   ============================================================================= */

.chiptune-theme-november .trophy-badge {
    background: rgba(255, 193, 7, 0.12);
    border: 2px solid var(--november-gold);
    border-radius: 2px;
    padding: 0.5rem 1rem;
    color: var(--november-gold);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-november .winner-banner,
.chiptune-theme-november .month-winner-banner {
    background: var(--november-window-flat);
    background: var(--november-window);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid var(--november-gold);
    border-color:
        var(--november-gold-pale)
        var(--november-gold-deep)
        var(--november-gold-deep)
        var(--november-gold-pale);
    border-radius: 4px;
    box-shadow: var(--november-outline), 0 0 28px rgba(255, 193, 7, 0.3);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.chiptune-theme-november .winner-banner .winner-text strong {
    color: var(--november-gold);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

.chiptune-theme-november .winner-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.8));
}

.chiptune-theme-november .winner-info h3 {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

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

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

.chiptune-theme-november .stat-card {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-bevel), var(--november-shadow-window);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

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

/* Stat cards charge the same way the week does */
.chiptune-theme-november .stat-card:nth-child(7n + 1) { border-color: #2196F3; }
.chiptune-theme-november .stat-card:nth-child(7n + 2) { border-color: #3F7CF8; }
.chiptune-theme-november .stat-card:nth-child(7n + 3) { border-color: #5F63FC; }
.chiptune-theme-november .stat-card:nth-child(7n + 4) { border-color: #7C4DFF; }
.chiptune-theme-november .stat-card:nth-child(7n + 5) { border-color: #C04BC9; }
.chiptune-theme-november .stat-card:nth-child(7n + 6) { border-color: #FF5722; }
.chiptune-theme-november .stat-card:nth-child(7n + 7) { border-color: #FFC107; }

.chiptune-theme-november .stat-card h3 {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    color: var(--november-parchment);
}

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

/* Stat values are damage numbers */
.chiptune-theme-november .stat-card .stat-value {
    font-size: 1.4rem;
    color: var(--november-parchment);
    display: block;
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--november-royal), 3px 3px 0 #05080F;
}

.chiptune-theme-november .stat-card .stat-label {
    font-size: 0.7rem;
    color: var(--november-steel-light);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chiptune-theme-november .hof-card {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--november-outline), var(--november-shadow-window);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

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

.chiptune-theme-november .hof-card.year-card {
    border-color: var(--november-gold);
    box-shadow: var(--november-outline), 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 193, 7, 0.35);
}

.chiptune-theme-november .hof-card.month-card {
    border-color: var(--november-magic);
    box-shadow: var(--november-outline), 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 24px rgba(124, 77, 255, 0.35);
}

.chiptune-theme-november .hof-card-badge.week {
    background: var(--november-royal-bright);
    color: var(--november-parchment);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-november .hof-label.purple {
    background: var(--november-magic);
    color: var(--november-parchment);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

.chiptune-theme-november .hof-play-btn:hover {
    background: var(--november-fire);
    color: var(--november-parchment);
    box-shadow: var(--november-glow-fire);
}

.chiptune-theme-november .hof-btn {
    background: transparent;
    border: 2px solid var(--november-frame-mid);
    color: var(--november-gold);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.chiptune-theme-november .hof-btn:hover {
    background: var(--november-royal-bright);
    color: var(--november-parchment);
    transform: translateY(-2px);
    box-shadow: var(--november-glow-magic);
}

.chiptune-theme-november .theme-card {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

.chiptune-theme-november .theme-card.unlocked {
    border-color: var(--november-frame-lo);
}

.chiptune-theme-november .theme-card.locked {
    background: rgba(16, 24, 39, 0.85);
    border: 3px dashed var(--november-gutter);
    box-shadow: none;
}

.chiptune-theme-november .theme-card-header .current-badge {
    background: var(--november-gold);
    color: #0D1421;
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

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

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

.chiptune-theme-november .bracket-slot {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

.chiptune-theme-november .bracket-vote-btn {
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-november .bracket-vote-btn:hover:not(:disabled) {
    background: var(--november-fire);
    color: #0D1421;
}

.chiptune-theme-november .bracket-vote-btn.voted {
    background: var(--november-gold) !important;
    color: #0D1421;
    border-color: var(--november-gold-deep);
}

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

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

.chiptune-theme-november .slot-title {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

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

.chiptune-theme-november .champion-card {
    background: var(--november-window-flat);
    background: var(--november-window);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid var(--november-gold);
    border-radius: 4px;
    box-shadow: var(--november-outline), 0 0 28px rgba(255, 193, 7, 0.3);
}

.chiptune-theme-november .champion-card-title,
.chiptune-theme-november .champion-info h3 {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-november .past-champion-badge {
    background: var(--november-gradient-gold);
    color: #0D1421;
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chiptune-theme-november .song-nav-btn {
    color: var(--november-steel-light);
    border-radius: 2px;
}

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

.chiptune-theme-november .play-btn-large {
    background: var(--november-bg-panel);
    border: 3px solid var(--november-fire);
    color: var(--november-parchment);
    border-radius: 4px;
    box-shadow: var(--november-outline), 0 0 24px rgba(255, 87, 34, 0.45);
}

.chiptune-theme-november .play-btn-large:hover {
    background: var(--november-fire);
    color: var(--november-parchment);
    transform: scale(1.04);
    box-shadow: var(--november-outline), 0 0 32px rgba(255, 193, 7, 0.5);
}

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

.chiptune-theme-november .vote-badge-float {
    background: var(--november-bg-panel);
    border: 2px solid var(--november-gold);
    color: var(--november-gold);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 0 18px rgba(255, 193, 7, 0.4);
}

.chiptune-theme-november .week-check {
    background: rgba(124, 77, 255, 0.12);
    border: 2px solid rgba(124, 77, 255, 0.5);
    border-radius: 2px;
}

.chiptune-theme-november .chiptune-toast {
    background: var(--november-window-flat);
    background: var(--november-window);
    color: var(--november-parchment);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
    font-family: 'Quattrocento', Georgia, serif;
    font-weight: 700;
}

.chiptune-theme-november .modal-close-btn {
    background: var(--november-bg-panel);
    border: 2px solid var(--november-frame-mid);
    color: var(--november-parchment);
    border-radius: 2px;
}

.chiptune-theme-november .modal-theme-name {
    color: var(--november-gold);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

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

/* =============================================================================
   PAUSE MENU - The one menu this genre was built on
   ============================================================================= */

.chiptune-theme-november .pause-menu-content {
    background: var(--november-window-flat);
    background: var(--november-window);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 4px solid var(--november-frame-mid);
    border-color:
        var(--november-frame-hi)
        var(--november-frame-lo)
        var(--november-frame-lo)
        var(--november-frame-hi);
    border-radius: 5px;
    box-shadow: 0 0 0 3px #05080F, 0 0 44px rgba(124, 77, 255, 0.3);
}

.chiptune-theme-november .pause-menu-content::before {
    border-color: rgba(255, 193, 7, 0.35);
}

.chiptune-theme-november .pause-menu-scanlines {
    background: var(--november-corners);
    opacity: 1;
}

.chiptune-theme-november .pause-menu-header {
    border-bottom-color: rgba(176, 190, 197, 0.3);
}

.chiptune-theme-november .pause-menu-title {
    color: var(--november-gold);
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #05080F;
}

.chiptune-theme-november .pause-menu-subtitle {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.chiptune-theme-november .pause-menu-item {
    color: var(--november-parchment);
    border-bottom-color: rgba(250, 250, 250, 0.1);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.chiptune-theme-november .pause-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--november-gold);
}

.chiptune-theme-november .pause-menu-item.active {
    color: var(--november-gold);
    background: rgba(255, 193, 7, 0.08);
}

.chiptune-theme-november .pause-menu-cursor {
    color: var(--november-parchment);
    text-shadow: 1px 1px 0 #05080F;
}

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

.chiptune-theme-november .pause-menu-item-detail p {
    color: var(--november-parchment);
    font-family: 'Quattrocento', Georgia, serif;
}

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

.chiptune-theme-november .pause-menu-cta {
    background: transparent;
    border: 2px solid var(--november-gold);
    color: var(--november-gold);
    border-radius: 2px;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

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

.chiptune-theme-november .pause-menu-resume-btn {
    color: var(--november-gold);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

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

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

/* =============================================================================
   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 - and its .active /
   .complete states sit at the same specificity, so they are state-qualified.
   ============================================================================= */

.chiptune-theme-november .phase-step {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 2px solid var(--november-frame-mid);
    border-radius: 3px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

/* yearly.css paints the dot, its glyph, the label and the connector cyan, so
   colour and text-shadow have to come with the background (October trap 11). */
.chiptune-theme-november .phase-dot {
    background: rgba(124, 77, 255, 0.14);
    border-color: var(--november-magic);
    border-radius: 50%;
    color: var(--november-magic-bright);
    box-shadow:
        0 0 12px rgba(124, 77, 255, 0.65),
        inset 0 0 10px rgba(0, 0, 0, 0.7);
    text-shadow: 0 0 8px rgba(124, 77, 255, 0.8);
}

.chiptune-theme-november .phase-label {
    color: var(--november-magic-bright);
    text-shadow: 0 0 6px rgba(124, 77, 255, 0.55);
}

.chiptune-theme-november .phase-connector {
    background: var(--november-frame-lo);
    box-shadow: 0 0 6px rgba(124, 77, 255, 0.4);
}

/* `viewing` is the one yearly state that uses !important (1136-1139) */
.chiptune-theme-november .phase-step.viewing .phase-dot {
    border-color: var(--november-gold) !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.85) !important;
}

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

.chiptune-theme-november .phase-step.active {
    background: rgba(255, 87, 34, 0.14);
    border-color: var(--november-fire);
    box-shadow:
        var(--november-outline),
        0 0 15px rgba(255, 87, 34, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.chiptune-theme-november .phase-step.complete {
    background: rgba(255, 193, 7, 0.1);
    border-color: var(--november-gold-deep);
    box-shadow:
        var(--november-outline),
        0 0 12px rgba(255, 193, 7, 0.35),
        inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.chiptune-theme-november .phase-step:hover {
    border-color: var(--november-frame-hi);
    box-shadow:
        var(--november-outline),
        0 0 12px rgba(124, 77, 255, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.7);
}

.chiptune-theme-november .phase-step.active .phase-dot {
    background: rgba(255, 87, 34, 0.2);
    border-color: var(--november-fire);
    color: var(--november-fire-bright);
    box-shadow:
        0 0 10px rgba(255, 87, 34, 0.8),
        inset 0 0 10px rgba(0, 0, 0, 0.7);
    text-shadow: 0 0 8px rgba(255, 87, 34, 0.9);
}

.chiptune-theme-november .phase-step.complete .phase-dot {
    background: rgba(255, 193, 7, 0.16);
    border-color: var(--november-gold);
    color: var(--november-gold);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
}

.chiptune-theme-november .phase-step.active .phase-label {
    color: var(--november-fire-bright);
}

.chiptune-theme-november .phase-step.complete .phase-label {
    color: var(--november-gold);
}

.chiptune-theme-november .champion-play-overlay {
    background: rgba(13, 20, 33, 0.75);
}

.chiptune-theme-november .champion-title {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.chiptune-theme-november .champion-stats .stat-value {
    color: var(--november-gold);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 1px;
}

.chiptune-theme-november .wildcard-entry .song-name,
.chiptune-theme-november .champion-card .song-title {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

.chiptune-theme-november .group-box {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

.chiptune-theme-november .group-entry {
    background: rgba(13, 20, 33, 0.9);
    border: 2px solid var(--november-frame-lo);
    border-radius: 2px;
}

.chiptune-theme-november .group-entry .song-name {
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
}

.chiptune-theme-november .vote-counter .vote-pip {
    background: rgba(33, 150, 243, 0.35);
    border: 1px solid rgba(33, 150, 243, 0.8);
    border-radius: 0;
}

.chiptune-theme-november .yearly-matchup {
    background: var(--november-window-flat);
    background: var(--november-window);
    border: 3px solid var(--november-frame-mid);
    border-radius: 4px;
    box-shadow: var(--november-outline), var(--november-shadow-window);
}

.chiptune-theme-november .yearly-bracket-slot {
    background: rgba(13, 20, 33, 0.95);
    border: 2px solid var(--november-frame-lo);
    border-radius: 2px;
}

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

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

.chiptune-theme-november .yearly-bracket-vote-btn.voted {
    background: var(--november-gold);
    color: #0D1421;
    border-radius: 2px;
}

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

.chiptune-theme-november h1,
.chiptune-theme-november h2,
.chiptune-theme-november h3 {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

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

@keyframes november-battle-ready {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.12); }
}

/* A battle-menu cursor jumps between two positions rather than easing */
@keyframes november-cursor-bob {
    0%   { transform: translateX(0); }
    100% { transform: translateX(3px); }
}

@keyframes november-ember-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 87, 34, 0.6); }
    50%      { box-shadow: 0 0 16px rgba(255, 87, 34, 1); }
}

@keyframes november-crest-shine {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

@keyframes november-keyhole-glow {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

@keyframes november-glint {
    0%, 70%, 100% { opacity: 0; transform: scale(0.4); }
    80%           { opacity: 1; transform: scale(1); }
    90%           { opacity: 0; transform: scale(0.6); }
}

@keyframes november-quest-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes november-heal-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* =============================================================================
   SCROLLBAR - Menu scroll rail
   ============================================================================= */

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

.chiptune-theme-november ::-webkit-scrollbar-track {
    background: var(--november-void);
}

.chiptune-theme-november ::-webkit-scrollbar-thumb {
    background: var(--november-royal-bright);
    border: 2px solid var(--november-void);
    border-radius: 0;
}

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

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

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

.chiptune-theme-november ::selection {
    background: var(--november-magic);
    color: var(--november-parchment);
}

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

.chiptune-theme-november .voter-avatar-placeholder {
    background: var(--november-gradient-magic);
    color: var(--november-parchment);
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    border: 2px solid var(--november-frame-mid);
    border-radius: 2px;
}

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

.chiptune-theme-november a:hover {
    color: var(--november-fire-bright);
}

.chiptune-theme-november .chiptune-footer {
    background: rgba(13, 20, 33, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 3px solid var(--november-frame-mid);
    box-shadow: 0 -2px 0 #05080F, 0 -4px 18px rgba(0, 0, 0, 0.6);
}

.chiptune-theme-november .chiptune-footer,
.chiptune-theme-november .chiptune-footer p,
.chiptune-theme-november .chiptune-footer span {
    color: var(--november-steel-light);
    font-family: 'Quattrocento', Georgia, serif;
}

.chiptune-theme-november .chiptune-footer a {
    color: var(--november-gold);
}

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

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

/* SUMMON (Konami) - the screen darkens and a magic circle opens */
.november-summon-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background:
        radial-gradient(circle at 50% 46%, rgba(124, 77, 255, 0.3) 0%, transparent 52%),
        rgba(5, 8, 15, 0.62);
    animation: november-summon-fade 3.4s ease-in-out forwards;
}

@keyframes november-summon-fade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* The circle: two rune rings (dashed borders) around a glowing core, turning
   in opposite directions as it expands. */
.november-summon-circle {
    position: fixed;
    top: 46%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    border: 3px dashed rgba(179, 136, 255, 0.9);
    background:
        radial-gradient(circle, rgba(255, 224, 130, 0.5) 0%, rgba(124, 77, 255, 0.35) 22%, transparent 48%),
        repeating-conic-gradient(from 0deg, rgba(124, 77, 255, 0.28) 0 6deg, transparent 6deg 30deg);
    box-shadow: 0 0 50px rgba(124, 77, 255, 0.8), inset 0 0 40px rgba(124, 77, 255, 0.6);
    animation: november-summon-open 3.4s ease-out forwards;
}

.november-summon-circle::before {
    content: '';
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 193, 7, 0.85);
    animation: november-summon-counter 3.4s linear forwards;
}

@keyframes november-summon-open {
    0%   { opacity: 0; transform: scale(0.15) rotate(0deg); }
    24%  { opacity: 1; transform: scale(1) rotate(90deg); }
    80%  { opacity: 1; transform: scale(1.04) rotate(200deg); }
    100% { opacity: 0; transform: scale(1.3) rotate(240deg); }
}

@keyframes november-summon-counter {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-420deg); }
}

.november-summon-text {
    position: fixed;
    top: 72%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 10000;
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 6vw, 3.4rem);
    letter-spacing: 4px;
    color: var(--november-gold, #FFC107);
    text-shadow: 3px 3px 0 #1A237E, 5px 5px 0 #05080F, 0 0 26px rgba(124, 77, 255, 0.9);
    animation: november-egg-text 3.2s ease-in-out forwards;
}

@keyframes november-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); }
}

/* ATTACK (triple-click a card) - the card takes a hit */
.song-card.november-attack-hit {
    animation: november-attack-shake 0.6s steps(1, end);
    z-index: 20;
}

/* Hard frame-stepped shake, the way a sprite flinches - not an ease */
@keyframes november-attack-shake {
    0%   { transform: translate(0, 0); filter: brightness(1); }
    10%  { transform: translate(-7px, 0); filter: brightness(1.8); }
    20%  { transform: translate(6px, 0); filter: brightness(1); }
    30%  { transform: translate(-5px, 0); }
    40%  { transform: translate(4px, 0); filter: brightness(1.4); }
    50%  { transform: translate(-3px, 0); filter: brightness(1); }
    60%  { transform: translate(2px, 0); }
    70%  { transform: translate(-1px, 0); }
    80%  { transform: translate(0, 0); }
    100% { transform: translate(0, 0); filter: brightness(1); }
}

/* The slash streak across the card, positioned by JS over the card's rect */
.november-slash {
    position: fixed;
    height: 4px;
    pointer-events: none;
    z-index: 9997;
    background: linear-gradient(90deg, transparent 0%, #FFFFFF 40%, #FFE082 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 193, 7, 0.6);
    transform-origin: left center;
    animation: november-slash-sweep 0.38s ease-out forwards;
}

@keyframes november-slash-sweep {
    0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
    55%  { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

/* The damage number pops off the card and falls back */
.november-damage {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 1.5rem;
    color: #FAFAFA;
    text-shadow: 2px 2px 0 #C41C00, 4px 4px 0 #05080F, 0 0 12px rgba(255, 87, 34, 0.9);
    animation: november-damage-pop 1.2s ease-out forwards;
}

@keyframes november-damage-pop {
    0%   { opacity: 0; transform: translate(-50%, -20%) scale(0.5); }
    18%  { opacity: 1; transform: translate(-50%, -110%) scale(1.25); }
    34%  { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

/* VICTORY (winner crest) - the fanfare window */
.november-victory-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: radial-gradient(ellipse at center, rgba(255, 193, 7, 0.18) 0%, transparent 70%);
    animation: november-victory-fade 2.6s ease-in-out forwards;
}

@keyframes november-victory-fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}

.november-victory-window {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 3.4vw, 1.6rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FAFAFA;
    background: linear-gradient(180deg, #27378F 0%, #1A237E 40%, #0E1442 100%);
    border: 3px solid #9FB0C2;
    border-color: #E3EAF2 #4E6078 #4E6078 #E3EAF2;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #05080F, 0 0 30px rgba(124, 77, 255, 0.45);
    padding: 0.9rem 1.6rem;
    text-align: center;
    text-shadow: 2px 2px 0 #05080F;
}

.november-victory-text {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 7vw, 3.8rem);
    letter-spacing: 3px;
    /* A gold shine sweeping across the letters */
    background: linear-gradient(100deg, #C79100 0%, #FFC107 35%, #FFF8E1 50%, #FFC107 65%, #C79100 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #1A237E) drop-shadow(2px 2px 0 #05080F);
    animation: november-victory-shine 2.2s linear forwards;
}

@keyframes november-victory-shine {
    0%   { background-position: 120% center; }
    100% { background-position: -120% center; }
}

/* ATB READY (day badge) - the gauge fills and the badge flashes READY */
.day-badge.november-atb-charge {
    animation: november-atb-charge 0.9s ease-out;
}

@keyframes november-atb-charge {
    0%   { box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0); transform: scale(1); }
    60%  { box-shadow: inset 160px 0 0 0 rgba(255, 193, 7, 0.35); transform: scale(1); }
    74%  { box-shadow: inset 160px 0 0 0 rgba(255, 193, 7, 0.55), 0 0 14px rgba(255, 193, 7, 0.9); transform: scale(1.08); }
    100% { box-shadow: inset 160px 0 0 0 rgba(255, 193, 7, 0); transform: scale(1); }
}

.november-ready {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -100%);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: #FFE082;
    text-shadow: 1px 1px 0 #05080F, 0 0 8px rgba(255, 193, 7, 0.9);
    animation: november-ready-rise 1s ease-out forwards;
}

@keyframes november-ready-rise {
    0%   { opacity: 0; transform: translate(-50%, -60%); }
    25%  { opacity: 1; transform: translate(-50%, -140%); }
    75%  { opacity: 1; transform: translate(-50%, -160%); }
    100% { opacity: 0; transform: translate(-50%, -190%); }
}

/* SPELL CAST (background click) - a small magic sigil opens at the click */
.november-spell {
    position: fixed;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    pointer-events: none;
    z-index: 9996;
    border-radius: 50%;
    border: 2px dashed rgba(179, 136, 255, 0.95);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(179, 136, 255, 0.5) 22%, transparent 55%);
    box-shadow: 0 0 16px rgba(124, 77, 255, 0.7);
    animation: november-spell-open 0.9s ease-out forwards;
}

@keyframes november-spell-open {
    0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
    25%  { opacity: 1; transform: scale(1) rotate(60deg); }
    100% { opacity: 0; transform: scale(1.7) rotate(160deg); }
}

/* =============================================================================
   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, plus the base.css animations a theme never declares.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .chiptune-theme-november .pixel-bg::before,
    .chiptune-theme-november .chiptune-app::before,
    .chiptune-theme-november .chiptune-app::after,
    .chiptune-theme-november .chiptune-header::after,
    .chiptune-theme-november .song-card.is-playing,
    .chiptune-theme-november .song-card.is-today::after,
    .chiptune-theme-november .song-card-wrapper .song-card::after,
    .chiptune-theme-november .song-card .song-info::before,
    .chiptune-theme-november .question-block,
    .chiptune-theme-november .question-block::after,
    .chiptune-theme-november .question-mark,
    .chiptune-theme-november .mystery-icon,
    .chiptune-theme-november .mystery-ring,
    .chiptune-theme-november .nav-badge.pulse,
    .chiptune-theme-november .vote-banner::after,
    .chiptune-theme-november .like-btn.liked .like-icon,
    /* Animations that come from base.css itself, which has no
       prefers-reduced-motion block: .equalizer-bar (902-906), .offline-text
       (1496), .blink (1510), .status-dot (1542). */
    .chiptune-theme-november .equalizer-bar,
    .chiptune-theme-november .offline-text,
    .chiptune-theme-november .placeholder-title .blink,
    .chiptune-theme-november .blink,
    .chiptune-theme-november .status-dot,
    .november-summon-overlay,
    .november-summon-circle,
    .november-summon-circle::before,
    .november-summon-text,
    .song-card.november-attack-hit,
    .november-slash,
    .november-damage,
    .november-victory-flash,
    .november-victory-text,
    .day-badge.november-atb-charge,
    .november-ready,
    .november-spell {
        animation: none;
    }

    /* Without its animation the glint would sit lit forever; hide it */
    .chiptune-theme-november .question-block::after {
        display: none;
    }

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

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

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

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

    .chiptune-theme-november .week-nav {
        background: rgba(13, 20, 33, 0.97);
    }
}