/* Themed-day skins (handoff Priority 2). Each is a class on <body> (theme-<name>), set by apply_look.js from the
   puzzle's theme, so it switches itself off the next day. A skin = colours + one motif + share emoji (themes.js).
   Never the layout, buttons or game. Keep text readable (dark skins: light text, strong contrast). */

.cobweb, .crack { display: none; } /* motifs only show on their day */

/* ---------- Halloween: the album goes dark. Creepy-cosy, not horror. ---------- */
body.theme-halloween[data-theme="sticker"] {
  --s-page: #141018;      /* near-black page */
  --s-page-dot: #201a27;
  --s-card: #2c2236;      /* faded purple album paper */
  --s-ink: #f3ead9;       /* light text on the dark paper */
  --s-soft: #c4b4d4;
  --s-green: #e8781e;     /* tabs and active buttons: pumpkin orange */
  --s-red: #ff9a3c;       /* headings: brighter pumpkin */
  --s-gold: #9ee27a;      /* foil: slight green glow */
  --s-sticker: #3a2e47;   /* stickers: darker purple, with pumpkin borders below */
  color-scheme: dark;
}
.theme-halloween .ceefax-top { background: #2c2236; color: var(--s-ink); }
.theme-halloween .ceefax-top .service { color: var(--s-red); }
.theme-halloween .titlebar h1 { text-shadow: 3px 3px 0 #000, 0 0 14px rgba(255, 154, 60, 0.35); }
.theme-halloween .titlebar::after { content: "HALLOWEEN EDITION"; color: #141018; }
/* Active buttons (green in the normal album) are pumpkin: keep their text dark */
.theme-halloween .fastext button.active, .theme-halloween #today-puzzle.active { color: #141018; }
/* Stickers: pumpkin-orange borders */
.theme-halloween :is(#chain, .route-chain) li:not(.slot), .theme-halloween .fixture .v { border: 2px solid var(--s-green); }
.theme-halloween #pitch { border-color: var(--s-green); }
/* The END player's foil sticker glows a slight green */
.theme-halloween #end-name {
  color: #0f1a0b;
  background: linear-gradient(110deg, #9ee27a, #d8f7c4 25%, #7fd06a 45%, #c9f0a8 60%, #9ee27a 80%);
  background-size: 250% 100%;
  box-shadow: 0 0 10px rgba(158, 226, 122, 0.55);
}
/* Bonus ticks (spooky names on your route) */
.theme-halloween .bonus-tick { font-size: 0.7rem; font-weight: 700; color: var(--s-gold); }
.theme-halloween :is(#chain, .route-chain) li.bonus { box-shadow: 0 0 10px rgba(158, 226, 122, 0.5); }
.theme-halloween .bonus-line { font-weight: 700; color: var(--s-gold); }
/* One cobweb in the album corner */
.theme-halloween .cobweb {
  display: block; position: absolute; top: 0; right: 0; width: 70px; height: 70px;
  color: rgba(243, 234, 217, 0.45); transform: scaleX(-1); pointer-events: none;
}
/* Correct answer: the newest sticker peels on */
.theme-halloween :is(#chain, .route-chain) li.newest:not(.slot) { animation: peel-on 0.6s ease-out; transform-origin: top left; }
@keyframes peel-on {
  from { opacity: 0; transform: perspective(400px) rotateX(-70deg) rotate(-6deg); }
  to { opacity: 1; }
}
/* Wrong answer: a faint crack across the current sticker, fading out */
.theme-halloween .crack {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(243, 234, 217, 0.75); stroke-width: 1.5; pointer-events: none;
  animation: crack-fade 1.8s ease-out forwards;
}
@keyframes crack-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .theme-halloween :is(#chain, .route-chain) li.newest:not(.slot) { animation: none; }
  .theme-halloween .crack { animation: none; opacity: 0.6; }
}
/* Readability fixes for the dark album: top bar text, and the How-to-play bar (gold -> pumpkin, dark text) */
.theme-halloween .ceefax-top #matchday, .theme-halloween .ceefax-top #clock { color: var(--s-ink); }
.theme-halloween .head-yellow { background: var(--s-green); color: #141018; }
/* Lives are pixel pumpkins on Halloween (pixel_pumpkin.js): orange with a carved face; lost ones go dark */
.theme-halloween .pumpkin.full .body { fill: #e8781e; }
.theme-halloween .pumpkin.full .stem { fill: #6aa84f; }
.theme-halloween .pumpkin.full .face { fill: #ffd34d; } /* candle glow through the carved face */
.theme-halloween .pumpkin.empty rect { fill: #4a3d58; }
/* Themed-day note in the match panel */
.theme-note { margin: 0; padding: 6px 12px 10px; font-weight: 700; }
.theme-halloween .theme-note { color: var(--s-gold); }
/* Dark outline round the pumpkins, so they show up on the orange panel bar */
.theme-halloween .pumpkin {
  filter: drop-shadow(1px 0 0 #141018) drop-shadow(-1px 0 0 #141018) drop-shadow(0 1px 0 #141018) drop-shadow(0 -1px 0 #141018);
}

/* ---------- Bonfire Night: dark navy album, sparkler-gold borders, one firework on a finish ---------- */
body.theme-bonfire[data-theme="sticker"] {
  --s-page: #0e1530;      /* night sky */
  --s-page-dot: #18214a;
  --s-card: #1c2650;      /* navy album paper */
  --s-ink: #f4ecd8;
  --s-soft: #b9c0dc;
  --s-green: #f2b632;     /* tabs and active buttons: sparkler gold */
  --s-red: #ff8a3d;       /* headings: ember orange */
  --s-gold: #ffe27a;
  --s-sticker: #253163;
  color-scheme: dark;
}
.theme-bonfire .ceefax-top { background: #1c2650; color: var(--s-ink); }
.theme-bonfire .ceefax-top .service { color: var(--s-gold); }
.theme-bonfire .ceefax-top #matchday, .theme-bonfire .ceefax-top #clock { color: var(--s-ink); }
.theme-bonfire .titlebar h1 { text-shadow: 3px 3px 0 #000, 0 0 14px rgba(255, 170, 60, 0.4); }
.theme-bonfire .titlebar::after { content: "BONFIRE NIGHT EDITION"; color: #0e1530; }
.theme-bonfire .head-yellow { background: var(--s-green); color: #0e1530; }
.theme-bonfire .fastext button.active, .theme-bonfire #today-puzzle.active { color: #0e1530; }
.theme-bonfire :is(#chain, .route-chain) li:not(.slot), .theme-bonfire .fixture .v { border: 2px solid var(--s-green); }
.theme-bonfire #pitch { border-color: var(--s-green); }
.theme-bonfire #end-name {
  color: #2a1a00;
  background: linear-gradient(110deg, #ffd75e, #fff2b8 25%, #ff9a3c 45%, #ffe27a 60%, #ffd75e 80%);
  background-size: 250% 100%;
  box-shadow: 0 0 10px rgba(255, 200, 80, 0.55);
}
.theme-bonfire .theme-note, .theme-bonfire .bonus-line, .theme-bonfire .bonus-tick { color: var(--s-gold); }
.theme-bonfire .bonus-tick { font-size: 0.7rem; font-weight: 700; }
.theme-bonfire :is(#chain, .route-chain) li.bonus { box-shadow: 0 0 10px rgba(255, 200, 80, 0.5); }
/* The firework: 12 sparks flying out from one point, once */
.result { position: relative; }
.firework { position: absolute; top: 30px; right: 40px; width: 0; height: 0; pointer-events: none; }
.firework span {
  position: absolute; width: 4px; height: 4px; background: #ffe27a; box-shadow: 0 0 6px #ffb347;
  transform: rotate(var(--angle)) translateX(0); animation: spark 1.2s ease-out forwards;
}
.firework span:nth-child(3n) { background: #ff8a3d; }
.firework span:nth-child(3n+1) { background: #fff; }
@keyframes spark {
  from { opacity: 1; transform: rotate(var(--angle)) translateX(0); }
  to { opacity: 0; transform: rotate(var(--angle)) translateX(60px); }
}

/* ---------- Derby days and England games: header split in the two sides' colours, stickers alternate borders
   (colours only: no crests or badges). England games share these rules (theme-nations). ---------- */
.theme-derby .ceefax-top, .theme-nations .ceefax-top { background: linear-gradient(90deg, var(--derby-a) 50%, var(--derby-b) 50%); color: #fff; }
.theme-derby .ceefax-top > span, .theme-nations .ceefax-top > span { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
.theme-derby .ceefax-top .service, .theme-derby .ceefax-top #matchday, .theme-derby .ceefax-top #clock,
.theme-nations .ceefax-top .service, .theme-nations .ceefax-top #matchday, .theme-nations .ceefax-top #clock { color: #fff; }
.theme-derby .titlebar::after { content: attr(data-stamp); background: linear-gradient(90deg, var(--derby-a) 50%, var(--derby-b) 50%); color: #fff; }
.theme-derby :is(#chain, .route-chain) li:not(.slot):nth-child(odd), .theme-nations :is(#chain, .route-chain) li:not(.slot):nth-child(odd) { border: 3px solid var(--derby-a); }
.theme-derby :is(#chain, .route-chain) li:not(.slot):nth-child(even), .theme-nations :is(#chain, .route-chain) li:not(.slot):nth-child(even) { border: 3px solid var(--derby-b); }
.theme-derby .theme-note, .theme-nations .theme-note { color: var(--s-ink); }
/* Lives are pixel torches on Bonfire Night (pixel_torch.js); lost ones go out. Dark outline for the gold bar. */
.theme-bonfire .torch.full .flame { fill: #ff7a1a; }
.theme-bonfire .torch.full .core { fill: #ffe066; }
.theme-bonfire .torch.full .handle { fill: #7a4a24; }
.theme-bonfire .torch.empty rect { fill: #3a4470; }
.theme-bonfire .torch {
  filter: drop-shadow(1px 0 0 #0e1530) drop-shadow(-1px 0 0 #0e1530) drop-shadow(0 1px 0 #0e1530) drop-shadow(0 -1px 0 #0e1530);
}

/* England games: flags. A stamp under the title ([flag] ENGLAND v CROATIA [flag]) instead of the usual one,
   and a small flag on the start and end name stickers. Flags are simple SVG drawings (nation_flag.js). */
.flag { width: 1.5em; height: 1em; vertical-align: -0.12em; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 2px; }
#start-flag .flag, #end-flag .flag { margin-right: 6px; }
.theme-nations .titlebar::after { display: none; }
.nation-stamp {
  position: absolute; right: 6px; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-family: var(--s-head-font); font-size: 0.65rem; letter-spacing: 1px;
  color: #fff; background: linear-gradient(90deg, var(--derby-a) 50%, var(--derby-b) 50%); transform: rotate(3deg);
}
.nation-stamp span { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
.nation-stamp .flag { width: 1.8em; height: 1.2em; }

/* ---------- Christmas (Eve, Day, Boxing Day): red and green borders, light snow on the album paper,
   tinsel on the END player's foil sticker, bauble lives ---------- */
body.theme-festive[data-theme="sticker"] {
  --s-green: #1d6b3a;     /* tabs and active buttons: holly green */
  --s-red: #c8202f;       /* headings: Christmas red */
  background:
    radial-gradient(rgba(170, 195, 220, 0.75) 1.8px, transparent 2.4px) 0 0 / 26px 26px,
    radial-gradient(rgba(170, 195, 220, 0.55) 1.3px, transparent 1.9px) 13px 13px / 26px 26px,
    radial-gradient(var(--s-page-dot) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--s-page);
}
.theme-festive .ceefax-top { background: linear-gradient(90deg, #1d6b3a 50%, #c8202f 50%); }
.theme-festive .titlebar::after { content: "CHRISTMAS EDITION"; background: #c8202f; }
.theme-boxingday .titlebar::after { content: "BOXING DAY EDITION"; }
.theme-festive :is(#chain, .route-chain) li:not(.slot):nth-child(odd), .theme-festive .fixture .v { border: 3px solid #c8202f; }
.theme-festive :is(#chain, .route-chain) li:not(.slot):nth-child(even) { border: 3px solid #1d6b3a; }
.theme-festive #pitch { border-color: #c8202f; }
/* Tinsel: a sparkly gold-silver trim round the END player's foil sticker */
.theme-festive #end-name { outline: 3px dotted #d9a520; outline-offset: 2px; }
.theme-festive .bauble.full .ball { fill: #c8202f; }
.theme-festive .bauble.full .cap { fill: #d9a520; }
.theme-festive .bauble.full .shine { fill: #fff; }
.theme-festive .bauble.empty rect { fill: #bfb39a; }