/* ============================================================
   THE SEASONS (docs/SEASONS.md)

   Linked on every page beside appearance.css, so a season's palette is on
   before the first paint: the head script sets data-season from the windows
   site.js caches (October for Halloween on a first visit), and these rules
   colour the page at once. The effects themselves (season-halloween.js) load
   a moment later and add their layers to the body.

   Everything here is scoped to html[data-season] or a season's own classes
   (hw- for Halloween), so outside a season it styles nothing. The admin pages
   and the merch studio never carry the attribute.

   HEX ON PURPOSE: a season's palettes define the tokens rather than use them,
   the same as appearance.css (see check-drift's list).
   ============================================================ */

/* ---- Halloween: the palettes (the user, 2026-10-06: "perfect") ---- */
:root[data-season="halloween"][data-mode] {
  --bg:#0b090c; --surface:#141015; --surface-2:#1c161d;
  --ink:#efe5d6; --muted:#a39484; --line:#2a2229; --line-strong:#3e333c;
  --accent:#ec7a2c; --accent-ink:#120804; --accent-soft:rgba(236,122,44,0.14);
  --ok:#8cc97a; --scroll:#ec7a2c; --track:#241c23; --shadow:rgba(0,0,0,0.72);
  --hw-glow:236,122,44; --hw-fog:232,222,206;
}
:root[data-season="halloween"][data-mode][data-hw-pal="blood"] {
  --bg:#0c0809; --surface:#150e10; --surface-2:#1e1316;
  --ink:#f1e4df; --muted:#a8908b; --line:#2d1c1f; --line-strong:#452a2e;
  --accent:#d8434a; --accent-ink:#fff1ee; --accent-soft:rgba(216,67,74,0.15);
  --scroll:#d8434a; --track:#24161a;
  --hw-glow:216,67,74; --hw-fog:226,210,206;
}
:root[data-season="halloween"][data-mode][data-hw-pal="witch"] {
  --bg:#090b0a; --surface:#111412; --surface-2:#181d19;
  --ink:#e6eedd; --muted:#93a08c; --line:#1f2721; --line-strong:#2f3a31;
  --accent:#a6d65a; --accent-ink:#0b1004; --accent-soft:rgba(166,214,90,0.13);
  --scroll:#a6d65a; --track:#1a201b;
  --hw-glow:166,214,90; --hw-fog:214,226,206;
}
/* the page sits on its own layer, so the season's layers can go over it */
html[data-season] #site { position: relative; z-index: 1; }

/* ---- Haunted: fog, a flashlight, grain ---- */
.hw-fog { position: fixed; z-index: 5; left: 0; bottom: 0; width: 100vw; height: 34vh; pointer-events: none; opacity: 0.55; }
/* A FLASHLIGHT, NOT A CANDLE (the user): a tight beam with a defined edge,
   a faint hot ring where the reflector sits, and the page dark beyond it.
   --dim (0 to 1) is the battery dying: the beam darkens from the middle out. */
.hw-light { position: fixed; z-index: 4; inset: 0; pointer-events: none; --dim: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 30%),
    rgba(var(--hw-glow), calc(0.07 * (1 - var(--dim)))) 0,
    rgba(4, 3, 5, calc(0.62 * var(--dim))) calc(var(--r, 150px) * 0.55),
    rgba(255, 244, 228, calc(0.05 * (1 - var(--dim)))) calc(var(--r, 150px) * 0.86),
    rgba(4, 3, 5, calc(0.7 * var(--dim))) calc(var(--r, 150px) * 0.94),
    rgba(4, 3, 5, 0.6) calc(var(--r, 150px) * 1.18), rgba(4, 3, 5, 0.74) calc(var(--r, 150px) * 4)); }
.hw-light.hw-dead { background: rgba(4, 3, 5, 0.93); }
.hw-vig { position: fixed; z-index: 4; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
/* FILM GRAIN, AND QUIET (the user, twice): soft clumps a couple of pixels
   across, never more than a few percent from the picture, nothing bright. */
.hw-grain { position: fixed; z-index: 6; inset: 0; pointer-events: none; background-repeat: repeat; }

/* candlelight on the words that are already lit */
html[data-hw-glow] .disp em, html[data-hw-glow] .pg-title em { animation: hwCandle 3.4s ease-in-out infinite alternate; }
@keyframes hwCandle {
  0% { text-shadow: 0 0 14px rgba(var(--hw-glow), 0.30); } 38% { text-shadow: 0 0 24px rgba(var(--hw-glow), 0.48); }
  52% { text-shadow: 0 0 11px rgba(var(--hw-glow), 0.24); } 100% { text-shadow: 0 0 19px rgba(var(--hw-glow), 0.42); }
}
html[data-hw-glow] .eyebrow .dot { box-shadow: 0 0 10px 2px rgba(var(--hw-glow), 0.55); }

/* ---- Found tape: a camcorder's viewfinder, played back ---- */
.hw-tape { position: fixed; z-index: 7; inset: 0; pointer-events: none; font-family: var(--f-mono); color: #f6f6f2; }
.hw-tape .hw-osd { text-shadow: 1.5px 0 rgba(255, 30, 80, 0.55), -1.5px 0 rgba(30, 220, 255, 0.5), 0 0 8px rgba(255, 255, 255, 0.35); }
.hw-corner { position: absolute; width: 44px; height: 44px; border: 0 solid rgba(246, 246, 242, 0.88); filter: drop-shadow(1.5px 0 rgba(255, 30, 80, 0.5)) drop-shadow(-1.5px 0 rgba(30, 220, 255, 0.45)); }
.hw-corner.hw-tl { top: 126px; left: 12px; border-top-width: 3px; border-left-width: 3px; }
.hw-corner.hw-tr { top: 126px; right: 12px; border-top-width: 3px; border-right-width: 3px; }
.hw-corner.hw-bl { bottom: 12px; left: 12px; border-bottom-width: 3px; border-left-width: 3px; }
.hw-corner.hw-br { bottom: 12px; right: 12px; border-bottom-width: 3px; border-right-width: 3px; }
.hw-osd { position: absolute; font-size: var(--t-h2); font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; white-space: nowrap; }
.hw-osd small { display: block; font-size: var(--t-md); letter-spacing: 0.12em; opacity: 0.9; }
.hw-osd.hw-a { top: 144px; left: 82px; }
.hw-osd.hw-b { top: 144px; right: 82px; text-align: right; display: flex; align-items: flex-start; gap: var(--s-5); }
.hw-osd.hw-c { bottom: 30px; right: 82px; text-align: right; }
.hw-osd.hw-d { bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; }
.hw-osd.hw-d.on { opacity: 1; }
/* ---- the tape makes room for the page (the user, 2026-10-07): fitTape in
   season-halloween.js measures the margin beside the content and picks one.
   snug: the readouts smaller, under the corner brackets at the screen's
   edge, without the time remaining. bare: no readouts.
   tight and tiny: the corners shrink toward the screen's edge. ---- */
.hw-tape.hw-snug .hw-osd { font-size: var(--t-md); }
.hw-tape.hw-snug .hw-osd small { font-size: var(--t-micro); }
.hw-tape.hw-snug .hw-osd.hw-a { top: 182px; left: 14px; }
.hw-tape.hw-snug .hw-osd.hw-b { top: 182px; right: 14px; gap: var(--s-3); }
.hw-tape.hw-snug .hw-osd.hw-b [data-left] { display: none; }
.hw-tape.hw-snug .hw-osd.hw-c { bottom: 66px; right: 14px; }
.hw-tape.hw-bare .hw-osd.hw-a, .hw-tape.hw-bare .hw-osd.hw-b, .hw-tape.hw-bare .hw-osd.hw-c { display: none; }
.hw-tape.hw-tight .hw-corner { width: 26px; height: 26px; }
.hw-tape.hw-tight .hw-corner.hw-tl, .hw-tape.hw-tight .hw-corner.hw-bl { left: 6px; }
.hw-tape.hw-tight .hw-corner.hw-tr, .hw-tape.hw-tight .hw-corner.hw-br { right: 6px; }
.hw-tape.hw-tight .hw-corner.hw-bl, .hw-tape.hw-tight .hw-corner.hw-br { bottom: 6px; }
.hw-tape.hw-tiny .hw-corner { width: 14px; height: 14px; }
.hw-tape.hw-tiny .hw-corner.hw-tl, .hw-tape.hw-tiny .hw-corner.hw-bl { left: 3px; }
.hw-tape.hw-tiny .hw-corner.hw-tr, .hw-tape.hw-tiny .hw-corner.hw-br { right: 3px; }
.hw-tape.hw-tiny .hw-corner.hw-bl, .hw-tape.hw-tiny .hw-corner.hw-br { bottom: 3px; }
.hw-osd.hw-d i { display: block; margin: var(--s-2) auto 0; width: 220px; height: 10px; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor var(--trk, 40%), transparent 0); }
.hw-play { display: inline-block; width: 0; height: 0; border-left: 15px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 10px; vertical-align: -1px; }
.hw-batt { position: relative; flex: none; margin-top: var(--s-1); width: 38px; height: 18px; border: 2.5px solid currentColor; border-radius: 2px; animation: hwBlink 1.1s steps(2, jump-none) infinite; }
.hw-batt::after { content: ""; position: absolute; right: -6px; top: 3.5px; width: 3.5px; height: 6px; background: currentColor; }
.hw-batt::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 7px; background: currentColor; }
@keyframes hwBlink { 0% { opacity: 1; } 100% { opacity: 0.15; } }
.hw-scan { position: fixed; z-index: 6; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0.28) 1px, transparent 1px, transparent 3px); }
.hw-crt { position: fixed; z-index: 6; inset: 0; pointer-events: none; background: radial-gradient(120% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.62) 100%); }
.hw-roll { position: fixed; z-index: 6; left: 0; right: 0; top: -20vh; height: 18vh; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.03) 50%, transparent); animation: hwRoll 7.5s linear infinite; }
@keyframes hwRoll { to { transform: translateY(140vh); } }
.hw-track { position: fixed; z-index: 7; left: 0; right: 0; height: 56px; top: -120px; pointer-events: none; backdrop-filter: blur(1.4px) contrast(1.4) saturate(1.7); -webkit-backdrop-filter: blur(1.4px) contrast(1.4) saturate(1.7); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 6px); }
html[data-hw-look="tape"] .disp, html[data-hw-look="tape"] .card-title, html[data-hw-look="tape"] .spot-litem-title { text-shadow: -1.5px 0 rgba(255, 40, 90, 0.45), 1.5px 0 rgba(40, 220, 255, 0.4); }
html[data-hw-look="tape"] .disp em { animation: none; }

/* ---- the jumpscare, the same for both looks ----
   The face is set by the script (--hw-face), scaled up smoothly to fill the
   screen under grain and contrast, lit by the beam. It sits UNDER the grain
   and the tape's scanlines, which the user liked. */
.hw-scare { position: fixed; z-index: 5; inset: 0; pointer-events: none; background: #000; display: none; overflow: hidden; }
.hw-scare.on { display: block; }
.hw-scare::after { content: ""; position: absolute; inset: 0; background-image: var(--hw-noise, none); opacity: 0.35; mix-blend-mode: overlay; }
.hw-face { position: absolute; inset: -6%; background-repeat: no-repeat; }
.hw-scare.hw-grin .hw-face { background-image: var(--hw-face, none); background-size: var(--hw-face-size, auto 100vh); background-position: 50% 52%; image-rendering: auto; filter: grayscale(1) contrast(1.6) brightness(1.08) blur(0.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 32vmin, transparent 70vmin); mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 32vmin, transparent 70vmin);
  animation: hwSlam 0.95s cubic-bezier(0.1, 0.9, 0.2, 1) both; }
.hw-scare.hw-grin { animation: hwShake 0.95s linear both; }
/* OVER EVERY POP-UP WHILE IT PLAYS (the user, 2026-10-08: "make sure now its
   always on the top of pop ups, last thing we need is it getting covered").
   The page's own pop-ups sit inside #site, under all of this, but the ones a
   script adds to the body (the date picker, a card opening, the pranks) went
   over a scare at 5. For the scare the season's layers go to the top, in the
   order they always have, so it looks the same with a pop-up open: the beam
   that flickers first, the face, then the grain and the tape over it. */
html[data-hw-scaring] .hw-light, html[data-hw-scaring] .hw-vig { z-index: 2147483640; }
html[data-hw-scaring] .hw-fog, html[data-hw-scaring] .hw-scare { z-index: 2147483641; }
html[data-hw-scaring] .hw-grain, html[data-hw-scaring] .hw-scan, html[data-hw-scaring] .hw-crt, html[data-hw-scaring] .hw-roll { z-index: 2147483642; }
html[data-hw-scaring] .hw-track, html[data-hw-scaring] .hw-tape { z-index: 2147483643; }
@keyframes hwSlam { 0% { transform: scale(1.34); } 12% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes hwShake { 0%, 100% { transform: none; } 10% { transform: translate(-16px, 9px); } 20% { transform: translate(13px, -11px); } 30% { transform: translate(-9px, -6px); } 40% { transform: translate(8px, 9px); } 55% { transform: translate(-5px, 4px); } 70% { transform: translate(4px, -3px); } }

/* ---- sound: a chip in the navbar, beside the appearance button (the
   corner one was in the way of the tape's corners, the user, 2026-10-07) ---- */
.hw-soundchip { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hw-soundchip svg { width: 16px; height: 16px; }
.hw-soundchip.on { color: var(--accent); border-color: var(--accent); }

.hw-fog[hidden], .hw-light[hidden], .hw-vig[hidden], .hw-grain[hidden], .hw-tape[hidden], .hw-scan[hidden], .hw-crt[hidden], .hw-roll[hidden], .hw-track[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hw-roll, .hw-batt { animation: none; } }

/* ---- a season's settings, inside the real appearance menu ----
   For the season the menu shows the season's look, palettes and effects in
   place of its usual palettes, corners and depth. */
.ap-scroll.sz-season > :not(#szMenu) { display: none; }
.sz-lead { margin-top: var(--s-2); }
.sz-sws { display: grid; margin-top: var(--s-2); }
.sz-sw { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; padding: var(--s-3) 0; background: none; border: 0; border-top: var(--bw) solid var(--line); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; text-align: left; }
.sz-sw:first-child { border-top: 0; }
.sz-sw[hidden] { display: none; }
.sz-sw i { flex: none; width: 30px; height: 16px; border-radius: 3px; border: var(--bw) solid var(--line-strong); position: relative; }
.sz-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 2px; background: var(--muted); }
.sz-sw.on i { border-color: var(--accent); }
.sz-sw.on i::after { left: 16px; background: var(--accent); }
#szMenu .ap-reset { margin-top: var(--s-6); }

/* ============================================================
   CHRISTMAS (docs/SEASONS.md), from the day after Thanksgiving to December
   31. Ported from the approved mockup's styles (2026-10-07), prefixed xm-;
   its effects are season-christmas.js. Snow and Cold snap share these.
   ============================================================ */

/* ---- Christmas: the palettes, Evergreen (the default), Cranberry, Frost ---- */
:root[data-season="christmas"][data-mode] {
  --bg:#08100c; --surface:#0f1913; --surface-2:#15221a;
  --ink:#f2ecdf; --muted:#98a796; --line:#1d2d23; --line-strong:#2b4033;
  --accent:#e0b25c; --accent-ink:#120d03; --accent-soft:rgba(224,178,92,0.14);
  --ok:#8fd19e; --scroll:#e0b25c; --track:#17231c; --shadow:rgba(0,0,0,0.7);
  --xm-foil-a:#9c7330; --xm-foil-b:#e0b25c; --xm-foil-c:#fff1cf;
}
:root[data-season="christmas"][data-mode][data-xm-pal="cranberry"] {
  --bg:#0f0809; --surface:#180e10; --surface-2:#211316;
  --ink:#f6ebe4; --muted:#b09a93; --line:#2f1b1e; --line-strong:#46282c;
  --accent:#e0525c; --accent-ink:#1a0507; --accent-soft:rgba(224,82,92,0.15);
  --scroll:#e0525c; --track:#24151a;
  --xm-foil-a:#8e2530; --xm-foil-b:#e0525c; --xm-foil-c:#ffd9d4;
}
:root[data-season="christmas"][data-mode][data-xm-pal="frost"] {
  --bg:#080c14; --surface:#0e1420; --surface-2:#141c2b;
  --ink:#eef3fb; --muted:#93a0b6; --line:#1c2638; --line-strong:#2a3850;
  --accent:#a9d2ff; --accent-ink:#06101c; --accent-soft:rgba(169,210,255,0.14);
  --scroll:#a9d2ff; --track:#162033;
  --xm-foil-a:#6f8fb8; --xm-foil-b:#cfe6ff; --xm-foil-c:#ffffff;
}

/* ---- Cold snap: frost on the glass, in front of the page ---- */
.xm-frost { position: fixed; z-index: 3; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.xm-frost[hidden] { display: none; }

/* ---- snow: behind the page, and the settled caps and the near flakes in front ---- */
.xm-back { position: fixed; z-index: 0; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.xm-front { position: fixed; z-index: 3; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.xm-back[hidden], .xm-front[hidden] { display: none; }

/* ---- fairy lights hung from the bottom of the navbar ---- */
.xm-strand { position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none; overflow: visible; }
.xm-strand[hidden] { display: none; }
.xm-strand svg { width: 100%; height: 100%; overflow: visible; display: block; }
.xm-strand .xm-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.xm-strand .xm-cap { fill: var(--line-strong); }
.xm-strand .xm-glass { animation: xmTwinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes xmTwinkle { 0% { opacity: 1; } 70% { opacity: 0.92; } 100% { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) { .xm-strand .xm-glass { animation: none; } }

/* ---- gold foil on the words that are already lit ---- */
html[data-xm-foil] .disp em, html[data-xm-foil] .pg-title em {
  background-image: linear-gradient(100deg, var(--xm-foil-b) 0%, var(--xm-foil-b) 38%, var(--xm-foil-c) 47%, var(--xm-foil-c) 50%, var(--xm-foil-b) 59%, var(--xm-foil-b) 100%);
  background-size: 320% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: xmFoil 9s ease-in-out infinite;
}
/* the band starts off the right edge and ends off the left, so the jump back
   to the start happens while only plain gold is showing */
@keyframes xmFoil { 0%, 50% { background-position: 100% 0; } 90%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { html[data-xm-foil] .disp em, html[data-xm-foil] .pg-title em { animation: none; background-position: 50% 0; } }

/* ---- sound: a chip in the navbar, beside the appearance button, as
   Halloween's ---- */
.xm-soundchip { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.xm-soundchip svg { width: 16px; height: 16px; }
.xm-soundchip.on { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   THE ADVENT (docs/ADVENT.md): twenty-four doors under Happening Now
   The grid, the doors and their lids are the approved Christmas mockup's,
   copied (mockups/christmas). Added since: a door missed that can still be
   opened (xm-late), the latch, the spring and the light of a door opening,
   the overlay that grows out of a door, Christmas Eve's present and wall,
   and the owner's test run.
   ============================================================ */
.xm-advent { margin-top: var(--s-9); }
.xm-advent[hidden] { display: none; }
.xm-adv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-7); flex-wrap: wrap; margin-bottom: var(--s-6); }
.xm-adv-head .disp { font-size: clamp(30px, 4vw, 46px); margin-top: var(--s-3); line-height: 1.02; }
.xm-adv-head .disp em { color: var(--accent); font-style: italic; }
.xm-adv-head p { margin: 0; max-width: 50ch; color: var(--muted); font-size: var(--t-md); line-height: 1.5; }
.xm-doors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); perspective: 900px; }
@media (max-width: 900px) { .xm-doors { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.xm-door { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: default; font: inherit; color: inherit; }
.xm-door .xm-in { position: absolute; inset: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); display: grid; place-items: center; align-content: center; gap: var(--s-1); padding: var(--s-2); text-align: center; overflow: hidden; }
.xm-door .xm-in b { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--accent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xm-door .xm-in span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; }
.xm-door .xm-in img { width: 28px; height: 28px; object-fit: contain; }
.xm-door .xm-lid { position: absolute; inset: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); display: flex; align-items: flex-start; justify-content: flex-start; padding: var(--s-3); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.3, 0.9, 0.2, 1); backface-visibility: hidden; }
.xm-door .xm-lid b { font-weight: 900; font-style: italic; font-size: var(--t-h2); line-height: 1; color: var(--muted); }
.xm-door.xm-opened .xm-lid { transform: rotateY(-108deg); }
.xm-door.xm-opened { cursor: pointer; }
.xm-door.xm-today { cursor: pointer; }
.xm-door.xm-today .xm-lid { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 26px var(--accent-soft); }
.xm-door.xm-today .xm-lid b { color: var(--accent); }
.xm-door.xm-today .xm-lid::after { content: "Open"; position: absolute; left: var(--s-3); bottom: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.xm-door.xm-later .xm-lid { opacity: 0.55; border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .xm-door .xm-lid { transition: none; } }
/* a door from an earlier day, still shut: openable, quieter than today's */
.xm-door.xm-late { cursor: pointer; }
.xm-door.xm-late .xm-lid { border-color: var(--accent); }
.xm-door.xm-late .xm-lid::after { content: "Open"; position: absolute; left: var(--s-3); bottom: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.xm-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
/* the knob on the lid's free edge */
.xm-door .xm-knob { position: absolute; right: var(--s-3); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--line-strong); }
.xm-door.xm-today .xm-knob, .xm-door.xm-late .xm-knob { background: var(--accent); }
/* opening: the latch gives, the lid swings out on a spring and settles */
.xm-door.xm-unlatch .xm-lid { animation: xmUnlatch 0.19s ease-in-out; }
@keyframes xmUnlatch { 0% { transform: rotateY(0); } 35% { transform: rotateY(-7deg); } 70% { transform: rotateY(2deg); } 100% { transform: rotateY(-4deg); } }
.xm-door.xm-opening .xm-lid { transition: transform 1s cubic-bezier(0.22, 1.5, 0.36, 1); }
/* the light let out: bright as it opens, then a warm glow that stays */
.xm-door .xm-glow { position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; background: radial-gradient(70% 60% at 50% 45%, var(--accent-soft), transparent 75%); opacity: 0; }
.xm-door.xm-opened .xm-glow { opacity: 0.6; }
.xm-door.xm-opening .xm-glow { animation: xmGlow 1.3s ease-out; }
@keyframes xmGlow { 0% { opacity: 0; } 25% { opacity: 1; box-shadow: 0 0 34px var(--accent-soft); } 100% { opacity: 0.6; box-shadow: 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .xm-door.xm-unlatch .xm-lid, .xm-door.xm-opening .xm-glow { animation: none; } }
.xm-adv-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.xm-adv-foot b { color: var(--ink); }

/* foil and snow for a moment, over everything */
.xm-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 87; pointer-events: none; }
.xm-fx.over { z-index: 89; }

/* ---- the owner's test run ---- */
.xm-testbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border: var(--bw) dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); font-family: var(--f-mono); font-size: var(--t-mono); }
.xm-testbar > b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-label); }
.xm-testbar > span { color: var(--muted); flex: 1 1 260px; }
.xm-testbar .xm-test-as { display: inline-flex; align-items: center; gap: var(--s-2); }
.xm-testbar .xm-test-as img { width: 22px; height: 22px; border-radius: var(--radius); object-fit: cover; }
.xm-testbar input { width: 150px; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); padding: var(--s-2) var(--s-3); font: inherit; }
.xm-testbar input:focus { outline: none; border-color: var(--accent); }
.xm-testbar button { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--s-2) var(--s-4); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
.xm-testbar button:hover { border-color: var(--accent); color: var(--accent); }

/* ---- the overlay: it grows out of the door it came from ----
   --from (set per door) lays the card over the door; it springs from there
   to the middle of the screen, and goes back into the door when closed. */
.xm-ov { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: var(--s-7); }
.xm-ov[hidden] { display: none; }
.xm-ov-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.32s ease; }
.xm-ov.in .xm-ov-back { opacity: 1; }
.xm-ov.out .xm-ov-back { opacity: 0; transition-duration: 0.3s; }
.xm-ov-card { position: relative; width: 640px; max-width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: 9px 9px 0 var(--accent); padding: var(--s-7) var(--s-8); transform-origin: 0 0; outline: none; }
.xm-ov-card.wide { width: 1040px; }
.xm-ov.in .xm-ov-card { animation: xmOvIn 0.56s cubic-bezier(0.18, 0.95, 0.3, 1.04) both; }
.xm-ov.out .xm-ov-card { animation: xmOvOut 0.33s cubic-bezier(0.55, 0, 0.8, 0.3) both; }
@keyframes xmOvIn { from { transform: var(--from); opacity: 0.35; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes xmOvOut { from { transform: none; opacity: 1; } 70% { opacity: 0.9; } to { transform: var(--from); opacity: 0; } }
.xm-ov-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-5); }
.xm-ov-title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h2); letter-spacing: -0.02em; font-stretch: 88%; }
.xm-ov-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); font-size: var(--t-lg); }
.xm-ov-x:hover { border-color: var(--accent); color: var(--accent); }
/* what is inside comes up a beat after the card lands, one piece at a time */
.xm-ov.in .xm-rv > * { animation: xmRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(150ms + var(--i, 0) * 55ms); }
@keyframes xmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .xm-ov.in .xm-ov-card, .xm-ov.out .xm-ov-card, .xm-ov.in .xm-rv > * { animation: none; } }
.xm-load { min-height: 220px; display: grid; place-items: center; }

/* ---- what is behind a door ---- */
.xm-rv { display: grid; gap: var(--s-5); }
.xm-rv-lab { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.xm-rv-note { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); line-height: 1.5; }
.xm-rv-note b { color: var(--ink); }
.xm-rv-title { font-weight: 800; font-size: var(--t-lg); line-height: 1.3; overflow-wrap: anywhere; }
.xm-rv-title.big { font-size: var(--t-h2); }
.xm-rv-big { display: block; font-weight: 900; font-style: italic; font-size: clamp(40px, 7vw, 64px); line-height: 0.95; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.xm-rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 560px) { .xm-rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xm-rv-tile { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); align-content: start; }
.xm-rv-tile b { font-weight: 900; font-style: italic; font-size: var(--t-h2); line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xm-rv-tile span { font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); line-height: 1.35; }
.xm-rv-tile.lead { grid-column: 1 / -1; border-color: var(--accent); }
.xm-rv-tile.lead b { color: var(--accent); font-size: clamp(34px, 6vw, 52px); }
.xm-rv-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: end; }
.xm-rv-podium > div { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); padding: var(--s-5) var(--s-3); display: grid; justify-items: center; gap: var(--s-2); text-align: center; min-width: 0; }
.xm-rv-podium > div:first-child { border-color: var(--accent); padding-top: var(--s-7); padding-bottom: var(--s-7); }
.xm-rv-podium img { width: 56px; height: 56px; object-fit: contain; }
.xm-rv-podium > div:first-child img { width: 84px; height: 84px; }
.xm-rv-podium b { font-weight: 900; font-size: var(--t-lg); max-width: 100%; overflow-wrap: anywhere; }
.xm-rv-podium > div:first-child b { color: var(--accent); font-size: var(--t-h2); }
.xm-rv-podium span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.xm-rv-podium i { font-style: normal; font-family: var(--f-mono); font-size: var(--t-label); color: var(--muted); }
.xm-rv-frame { position: relative; display: block; padding-top: 56.25%; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.xm-rv-frame iframe, .xm-rv-frame .xm-rv-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.xm-rv-frame.tall { padding-top: 0; height: min(640px, 70vh); display: grid; place-items: center; }
.xm-rv-frame.tall iframe { position: static; aspect-ratio: 325 / 738; height: 100%; width: auto; background: #fff; }
.xm-rv-frame.auto { padding-top: 0; min-height: 380px; }
.xm-rv-frame.auto iframe { position: static; width: 100%; height: 380px; background: #fff; }
/* a link with no player: its picture, which opens it */
.xm-plain { color: inherit; text-decoration: none; }
.xm-plain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xm-plain .xm-plain-host { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-style: italic; font-size: clamp(22px, 4vw, 34px); color: var(--muted); }
.xm-plain .xm-plain-go { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface); border: var(--bw) solid var(--line-strong); color: var(--ink); font-size: var(--t-lg); }
.xm-plain:hover { border-color: var(--accent); }
.xm-plain:hover .xm-plain-go { border-color: var(--accent); color: var(--accent); }
.xm-rv-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.xm-rv-btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s-3) var(--s-5); border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.xm-rv-btn:hover { border-color: var(--accent); color: var(--accent); }
.xm-rv-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--line-strong); color: var(--muted); }
.xm-rv-btn[hidden] { display: none; }
.xm-rv-btn.main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.xm-rv-btn.main:hover { color: var(--accent-ink); filter: brightness(1.08); }
.xm-rv-quote { margin: 0; padding: var(--s-6) var(--s-7); border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: var(--radius); font-size: var(--t-lg); line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.xm-rv-quote img { height: 1.6em; vertical-align: middle; }
.xm-rv-quote em { color: var(--accent); font-style: italic; }
.xm-rv-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.xm-rv-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: baseline; padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.xm-rv-list li > b { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--accent); white-space: nowrap; }
.xm-rv-list li > span { color: var(--muted); font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.05em; }
.xm-rv-list li > p { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
.xm-rv-lines { margin: 0; padding: var(--s-4) var(--s-5); list-style: none; display: grid; gap: var(--s-2); max-height: 240px; overflow-y: auto; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); font-size: var(--t-sm); line-height: 1.4; }
.xm-rv-lines li { overflow-wrap: anywhere; }
.xm-em { height: 1.75em; vertical-align: middle; }
.xm-rv-links { display: grid; gap: var(--s-3); }
.xm-rv-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-3); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: inherit; text-decoration: none; }
.xm-rv-link:hover { border-color: var(--accent); }
.xm-rv-link .th { width: 96px; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; place-items: center; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; }
.xm-rv-link .th img { width: 100%; height: 100%; object-fit: cover; }
.xm-rv-link > div { min-width: 0; display: grid; gap: var(--s-1); }
.xm-rv-link b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xm-rv-link span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.xm-rv-game { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.xm-rv-game img { width: 108px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); border: var(--bw) solid var(--line-strong); background: var(--surface-2); }
.xm-rv-chart { width: 100%; height: 140px; display: block; }
/* door 15's charts: every hour and every day, theirs lit */
.xm-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 3px; height: 92px; padding-bottom: var(--s-1); border-bottom: var(--bw) solid var(--line-strong); }
.xm-bars span { display: block; height: max(3px, calc(var(--h) * 100%)); border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 34%, var(--surface-2)); }
.xm-bars span.pk { background: var(--accent); }
.xm-bars span:hover { filter: brightness(1.35); }
.xm-ov.in .xm-bars span { animation: xmGrow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.3s; transform-origin: bottom; }
@keyframes xmGrow { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .xm-ov.in .xm-bars span { animation: none; } }
.xm-bars-x { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); margin-top: calc(var(--s-5) * -1 + var(--s-2)); }
.xm-bars-x.each { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); justify-items: center; }

/* ---- door 17: the chat's most unhinged line of each month ----
   two months a row in the wide card; "Who said it?" sits at the foot of
   each, level across a row whatever the lines' lengths */
.xm-uh { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.xm-uh li { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.xm-uh-m { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--t-lg); line-height: 1; color: var(--accent); }
.xm-uh-reply { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.xm-uh p { margin: 0; font-size: var(--t-md); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.xm-uh .xm-uh-who { align-self: flex-start; margin-top: auto; }
.xm-uh-who[hidden] { display: none; }
.xm-uh-name { display: inline-flex; align-self: flex-start; margin-top: auto; align-items: center; gap: var(--s-3); font-weight: 800; animation: xmRise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (max-width: 760px) { .xm-uh { grid-template-columns: minmax(0, 1fr); } }
.xm-uh-name[hidden] { display: none; }
.xm-uh-face img { width: 28px; height: 28px; border-radius: var(--radius); object-fit: cover; display: block; }

/* ---- Christmas Eve: the present ---- */
.xm-eve { min-height: 460px; }
.xm-stage { position: relative; display: grid; place-items: center; gap: var(--s-6); min-height: 440px; overflow: hidden; border-radius: var(--radius); background: radial-gradient(48% 52% at 50% 46%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%); }
.xm-rays { position: absolute; left: calc(50% - 450px); top: calc(44% - 450px); width: 900px; height: 900px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.2);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 30%, transparent) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%); }
.xm-gift { position: relative; width: 210px; height: 230px; padding: 0; border: 0; background: none; cursor: pointer; }
.xm-gift:disabled { cursor: default; }
.xm-gift:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: var(--radius); }
.xm-gbox { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; animation: xmBob 3.2s ease-in-out infinite; }
@keyframes xmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.xm-gbody { position: absolute; left: 12px; right: 12px; bottom: 0; height: 150px; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35); }
.xm-gv { position: absolute; left: 50%; width: 30px; margin-left: -15px; bottom: 0; height: 150px; background: var(--ink); opacity: 0.9; transform-origin: bottom; transition: transform 0.4s ease, opacity 0.4s ease; }
.xm-gh { position: absolute; left: 12px; right: 12px; bottom: 58px; height: 26px; background: var(--ink); opacity: 0.9; transform-origin: center; transition: transform 0.45s ease 0.05s, opacity 0.4s ease 0.05s; }
.xm-glid { position: absolute; left: 0; right: 0; bottom: 146px; height: 46px; border-radius: var(--radius); background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 60%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); transform-origin: 50% 100%; }
.xm-glv { position: absolute; left: 50%; width: 30px; margin-left: -15px; top: 0; bottom: 0; background: var(--ink); opacity: 0.9; transition: transform 0.4s ease, opacity 0.4s ease; }
.xm-gbow { position: absolute; left: 50%; bottom: 186px; width: 0; height: 0; }
.xm-gbow i { position: absolute; bottom: 0; width: 54px; height: 40px; border: 9px solid var(--ink); border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; opacity: 0.92; }
.xm-gbow i:first-child { right: 2px; transform: rotate(-20deg); transform-origin: right bottom; }
.xm-gbow i:last-child { left: 2px; transform: rotate(20deg); transform-origin: left bottom; }
.xm-gbow b { position: absolute; left: -12px; bottom: -6px; width: 24px; height: 20px; border-radius: 8px; background: var(--ink); }
.xm-ghint { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); min-height: 1.2em; }
/* 1. it rattles */
.xm-stage.shake .xm-gbox { animation: xmShake 0.76s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes xmShake {
  0% { transform: none; } 12% { transform: rotate(-4deg) translateY(-3px); } 24% { transform: rotate(4deg); } 36% { transform: rotate(-6deg) translateY(-5px); }
  48% { transform: rotate(6deg); } 60% { transform: rotate(-8deg) translateY(-7px) scale(1.02); } 72% { transform: rotate(8deg) scale(1.03); } 86% { transform: scale(1.06, 0.94); } 100% { transform: scale(1.02, 0.98); }
}
/* 2. the bow pops and the ribbon gives */
.xm-stage.untie .xm-gbow { animation: xmBowOff 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) forwards; }
@keyframes xmBowOff { to { transform: translate(90px, -120px) rotate(220deg) scale(0.6); opacity: 0; } }
.xm-stage.untie .xm-gv, .xm-stage.untie .xm-glv { transform: scaleY(0); opacity: 0; }
.xm-stage.untie .xm-gh { transform: scaleX(0); opacity: 0; }
/* 3. the lid goes, and the light comes out */
.xm-stage.burst .xm-glid { animation: xmLidOff 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes xmLidOff { 30% { transform: translateY(-110px) rotate(-14deg); } 100% { transform: translate(-150px, -260px) rotate(-70deg); opacity: 0; } }
.xm-stage.burst .xm-rays { animation: xmRays 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes xmRays { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0.55; transform: scale(1) rotate(40deg); } }
.xm-stage.burst .xm-gbody { box-shadow: 0 -30px 70px color-mix(in srgb, var(--accent) 60%, transparent), 0 18px 30px rgba(0, 0, 0, 0.35); transition: box-shadow 0.3s ease; }
/* 4. the box falls away */
.xm-stage.rise .xm-gbox { animation: xmDrop 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
@keyframes xmDrop { to { transform: translateY(60px) scale(0.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xm-gbox, .xm-stage .xm-gbox, .xm-stage .xm-glid, .xm-stage .xm-gbow, .xm-stage .xm-rays { animation: none !important; } }

/* ---- Christmas Eve: the year's biggest links, counted down ---- */
.xm-cd { display: grid; gap: var(--s-5); animation: xmRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.xm-cd[hidden] { display: none; }
.xm-cd-head { display: grid; gap: var(--s-1); }
.xm-cd-k { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(30px, 5vw, 48px); line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-stretch: 88%; }
.xm-cd-t { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.xm-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); perspective: 1200px; }
@media (max-width: 760px) { .xm-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xm-tile { position: relative; aspect-ratio: 16 / 11; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; transform-style: preserve-3d; }
.xm-tile.up { cursor: pointer; }
.xm-tback, .xm-tfront { position: absolute; inset: 0; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.45, 1); }
.xm-tback { display: grid; place-items: center; background: var(--surface-2); border: var(--bw) solid var(--line-strong); }
.xm-tback b { font-weight: 900; font-style: italic; font-size: var(--t-h2); color: var(--line-strong); }
.xm-tfront { overflow: hidden; background: var(--surface-2); border: var(--bw) solid var(--line-strong); transform: rotateY(-180deg); }
.xm-tile.up .xm-tback { transform: rotateY(180deg); }
.xm-tile.up .xm-tfront { transform: none; }
.xm-tfront img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xm-tfront::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.35)); }
.xm-thost { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-style: italic; color: var(--muted); font-size: var(--t-md); padding: var(--s-3); text-align: center; overflow-wrap: anywhere; }
.xm-trank, .xm-ttitle, .xm-tmonth, .xm-tyours { position: absolute; z-index: 1; }
.xm-trank { left: var(--s-3); top: var(--s-2); font-weight: 900; font-style: italic; font-size: var(--t-lg); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.xm-tmonth { right: var(--s-3); top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.xm-ttitle { left: var(--s-3); right: var(--s-3); bottom: var(--s-2); font-size: var(--t-micro); font-weight: 700; line-height: 1.25; color: #fff; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xm-tyours { left: var(--s-3); top: calc(var(--s-2) + 1.7em); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px var(--s-2); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); }
.xm-tile.top .xm-tfront, .xm-tile.top .xm-tback { border-color: var(--accent); }
.xm-tile.first .xm-tfront { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 28px var(--accent-soft); }
.xm-tile.up:hover .xm-tfront { border-color: var(--accent); }
/* the drumroll before number one, and its moment after */
.xm-tile.drum .xm-tback { animation: xmDrum 0.18s ease-in-out infinite alternate; border-color: var(--accent); }
@keyframes xmDrum { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(1.04) rotate(1.5deg); } }
.xm-tile.won { animation: xmWon 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); z-index: 2; }
@keyframes xmWon { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .xm-tback, .xm-tfront { transition: none; } .xm-tile.drum .xm-tback, .xm-tile.won, .xm-cd { animation: none; } }
.xm-cd-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; min-height: 2.5em; }
.xm-cd-say { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-lg); color: var(--accent); }
/* one link of the countdown, in the card */
.xm-view-wrap { display: grid; }
.xm-view { display: grid; gap: var(--s-5); animation: xmRise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.xm-view-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.xm-view-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.xm-view-nav .xm-rv-btn { padding: var(--s-4) var(--s-6); }
.xm-view-nav .xm-rv-btn i { font-style: normal; opacity: 0.7; }
.xm-view-pos { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.xm-view-rank { font-weight: 900; font-style: italic; font-size: clamp(44px, 8vw, 72px); line-height: 0.9; color: var(--accent); letter-spacing: -0.03em; }
@media (prefers-reduced-motion: reduce) { .xm-view { animation: none; } }

/* the phone pass (2026-10-08): the advent's card takes more of a phone's
   width, so a door's content is not boxed into the middle third */
@media (max-width: 620px) {
  .xm-ov { padding: var(--s-4); }
  .xm-ov-card { padding: var(--s-6) var(--s-5); }
}
@media (pointer: coarse) {
  .xm-ov-x { width: 40px; height: 40px; }
  .xm-rv-btn { min-height: 40px; }
}