/* Weekday look 2: early-2000s sticker album.
   Cream album pages, players as stickers (white border, slight tilt, peel corner), shiny foil for the end player.
   Turned on by <body data-theme="sticker">. Body text stays in the easy-to-read font. */

[data-theme="sticker"] {
  --s-page: #efe6cf;      /* album page */
  --s-page-dot: #e6dbbf;  /* paper texture dots */
  --s-card: #fbf6e9;      /* panels */
  --s-ink: #2b2620;       /* text */
  --s-soft: #7a6f5c;      /* less important text */
  --s-green: #1f5130;     /* album tabs and spine */
  --s-red: #c8202f;
  --s-gold: #d9a520;
  --s-sticker: #ffffff;   /* sticker border */
  --s-head-font: "Archivo Black", "Atkinson Hyperlegible", Impact, sans-serif;
  color-scheme: light;
}

/* Page: cream paper with faint dots */
body[data-theme="sticker"] {
  background: radial-gradient(var(--s-page-dot) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--s-page);
  color: var(--s-ink);
}
body[data-theme="sticker"]::after { display: none; } /* no TV scan lines */

/* Top bar: the album spine */
[data-theme="sticker"] .ceefax-top {
  padding: 5px 12px;
  font-family: var(--s-head-font);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--s-green);
  color: var(--s-page);
}
[data-theme="sticker"] .ceefax-top .page { display: none; }
[data-theme="sticker"] .ceefax-top .service { color: var(--s-gold); }
[data-theme="sticker"] #matchday { display: inline; color: var(--s-page); }
[data-theme="sticker"] #clock { color: var(--s-page); }

/* Title: album cover lettering with a "Sticker collection" stamp */
[data-theme="sticker"] .titlebar { background: none; padding: 14px 4px 6px; }
[data-theme="sticker"] .titlebar h1 {
  font-family: var(--s-head-font);
  font-size: clamp(2.2rem, 12vw, 3.4rem);
  letter-spacing: 1px;
  line-height: 1;
  color: var(--s-red);
  text-shadow: 3px 3px 0 var(--s-sticker), 5px 5px 0 rgba(43, 38, 32, 0.25);
  transform: rotate(-2deg);
}
[data-theme="sticker"] .titlebar::after {
  content: "STICKER COLLECTION";
  position: absolute;
  right: 6px;
  bottom: 0;
  height: auto;
  margin: 0;
  padding: 3px 8px;
  font-family: var(--s-head-font);
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--s-page);
  background: var(--s-green);
  transform: rotate(3deg);
}
[data-theme="sticker"] .tag { font-family: var(--s-head-font); font-size: 0.7rem; color: var(--s-red); }
[data-theme="sticker"] .puzzle-pick { font-family: var(--s-head-font); font-size: 0.8rem; color: var(--s-ink); }
[data-theme="sticker"] .puzzle-pick select { padding: 8px 10px; background: var(--s-card); color: var(--s-ink); border: 2px solid var(--s-ink); border-radius: 4px; }
/* Today's puzzle button: cream until it's the one being played, then green */
[data-theme="sticker"] #today-puzzle {
  padding: 8px 16px;
  font-family: var(--s-head-font);
  font-size: 0.85rem;
  color: var(--s-ink);
  background: var(--s-card);
  border: 2px solid var(--s-ink);          /* replaces the Ceefax cyan border */
  box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.3);
}
[data-theme="sticker"] #today-puzzle.active { color: var(--s-page); background: var(--s-green); }

/* Panels: album page boxes with a tab-shaped heading */
[data-theme="sticker"] .panel {
  background: var(--s-card);
  border: 2px solid var(--s-ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(43, 38, 32, 0.2);
}
[data-theme="sticker"] .panel-head {
  display: flex;
  width: fit-content;
  max-width: calc(100% - 12px);
  margin: -2px 0 0 -2px;
  padding: 4px 18px 4px 10px;
  font-family: var(--s-head-font);
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--s-page);
  background: var(--s-green);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
[data-theme="sticker"] .head-magenta { background: var(--s-red); }
[data-theme="sticker"] .head-yellow { background: var(--s-gold); color: var(--s-ink); }
[data-theme="sticker"] details.rules > summary.panel-head { width: auto; max-width: none; clip-path: none; margin: 0; }
[data-theme="sticker"] .stats b { color: var(--s-gold); }
[data-theme="sticker"] .rules-list li::before { color: var(--s-red); font-family: var(--s-head-font); }
[data-theme="sticker"] .rules-list b { color: var(--s-red); }

/* Start / End: name stickers; the END player is a shiny foil sticker */
[data-theme="sticker"] .fixture { gap: 10px 14px; }
[data-theme="sticker"] .fixture .k { font-family: var(--s-head-font); font-size: 0.8rem; color: var(--s-soft); }
[data-theme="sticker"] .fixture .v {
  width: fit-content;
  padding: 4px 10px;
  color: var(--s-ink);
  background: var(--s-sticker);
  border-radius: 3px;
  box-shadow: 1px 2px 0 rgba(43, 38, 32, 0.25);
}
[data-theme="sticker"] #end-name {
  background: linear-gradient(110deg, #f6e7a8, #fff8d8 25%, #c9e6f2 45%, #f2c9e6 60%, #f6e7a8 80%);
  background-size: 250% 100%;
  padding: 0 4px;
  animation: foil 3s linear infinite;
}
@keyframes foil { to { background-position: -250% 0; } }
[data-theme="sticker"] .fixture .v.banned { color: var(--s-red); }

/* Pitch: a big sticker with a white border */
[data-theme="sticker"] .pitch-panel { padding: 8px; }
[data-theme="sticker"] #pitch { box-sizing: border-box; border: 5px solid var(--s-sticker); box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.3); }
/* Pitch names: easy-to-read bold font, a bit bigger, thin outline (a thick outline at this size squashed the letters) */
[data-theme="sticker"] #pitch .label { font-family: var(--body-font); font-weight: 700; font-size: 7.5px; letter-spacing: 0.4px; stroke-width: 1.4px; }
[data-theme="sticker"] #commentary { font-family: "Atkinson Hyperlegible", sans-serif; font-size: 0.95rem; font-style: italic; color: var(--s-ink); }

/* Buttons: rounded album tabs */
[data-theme="sticker"] button {
  font-family: var(--s-head-font);
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--s-page);
  background: var(--s-green);
  border: 2px solid var(--s-ink);
  border-radius: 999px;
  box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.3);
}
[data-theme="sticker"] button:active { transform: translate(2px, 3px); box-shadow: none; }
[data-theme="sticker"] button:focus-visible,
[data-theme="sticker"] input:focus-visible,
[data-theme="sticker"] select:focus-visible { outline: 3px solid var(--s-gold); }
[data-theme="sticker"] .fastext button { font-family: var(--s-head-font); font-size: 0.9rem; color: var(--s-ink); background: var(--s-card); border: 2px solid var(--s-ink); }
[data-theme="sticker"] .fastext button.active { background: var(--s-green); }
[data-theme="sticker"] .fastext button.active span { color: var(--s-page); }
[data-theme="sticker"] #milner-mode.active { background: var(--s-red); }

/* Chain: each player is a sticker stuck on the page, a little crooked, numbered like an album slot */
[data-theme="sticker"] #chain { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 10px; } /* small stickers: 3 per row on a phone */
[data-theme="sticker"] #chain li {
  position: relative;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 6px 8px;
  font-size: 0.85rem;
  background: var(--s-sticker);
  border: 0;
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.25);
  transform: rotate(-1.2deg);
}
[data-theme="sticker"] #chain li:nth-child(even) { transform: rotate(1.2deg); }
[data-theme="sticker"] #chain li:last-child { border: 0; }
[data-theme="sticker"] #chain li::before {
  content: "No. " counter(step);
  font-family: var(--s-head-font);
  font-size: 0.7rem;
  color: var(--s-soft);
}
/* Peeling corner */
[data-theme="sticker"] #chain li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--s-sticker) 50%, var(--s-page-dot) 50%);
  box-shadow: -1px -1px 2px rgba(43, 38, 32, 0.25);
}
[data-theme="sticker"] #chain .via { margin-left: 0; color: var(--s-green); font-size: 0.7rem; line-height: 1.2; }
/* Pixel shirt picture: fills the top of the sticker, chunky pixels */
[data-theme="sticker"] .kit-picture {
  display: block;
  width: 56px;
  height: 56px;
  margin: 2px auto 2px 0;
  image-rendering: pixelated;
  border-radius: 2px;
}
[data-theme="sticker"] #chain .name { line-height: 1.2; margin-top: 2px; }
[data-theme="sticker"] .clue { font-family: var(--s-head-font); font-size: 0.7rem; color: var(--s-green); }
[data-theme="sticker"] button.clue { padding: 1px 8px; color: var(--s-page); }
[data-theme="sticker"] #message { color: var(--s-red); }

/* Next pick: blank sticker slots to choose from */
[data-theme="sticker"] #controls { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 10px; }
[data-theme="sticker"] .option {
  flex: 1 1 45%;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  color: var(--s-ink);
  background: var(--s-sticker);
  border: 2px dashed var(--s-soft);
  border-radius: 4px;
  box-shadow: none;
}
[data-theme="sticker"] .option:hover { border-style: solid; border-color: var(--s-green); background: var(--s-sticker); }
[data-theme="sticker"] .option:disabled { color: var(--s-soft); opacity: 0.5; }
[data-theme="sticker"] .option::before, [data-theme="sticker"] .option:hover::before { content: ""; }
[data-theme="sticker"] .guess-box { flex: 1 1 100%; padding: 0; }
[data-theme="sticker"] .back { flex: 1 1 100%; margin: 0; color: var(--s-ink); background: var(--s-card); }
[data-theme="sticker"] .note { color: var(--s-soft); }
[data-theme="sticker"] .guess-box input { background: var(--s-sticker); color: var(--s-ink); border: 2px dashed var(--s-ink); border-radius: 4px; caret-color: var(--s-red); }
[data-theme="sticker"] #suggestions li { border-bottom: 1px solid var(--s-page-dot); }
[data-theme="sticker"] #suggestions li:hover, [data-theme="sticker"] #suggestions li.active { background: var(--s-page); }
[data-theme="sticker"] #suggestions li::before { color: var(--s-red); }
[data-theme="sticker"] #suggestions .hint { color: var(--s-green); }

[data-theme="sticker"] .credit { color: var(--s-soft); }
[data-theme="sticker"] .credit a { color: var(--s-green); }
[data-theme="sticker"] .stats-line { color: var(--s-soft); }
[data-theme="sticker"] .kofi { color: var(--s-red); }

/* Result */
[data-theme="sticker"] .result { flex: 1 1 100%; }
[data-theme="sticker"] .final-score { font-family: var(--s-head-font); font-size: 1.3rem; color: var(--s-red); }
[data-theme="sticker"] .verdict { color: var(--s-green); }
[data-theme="sticker"] .share-preview { background: var(--s-sticker); color: var(--s-ink); border: 2px dashed var(--s-soft); }
[data-theme="sticker"] #share { color: var(--s-ink); background: var(--s-gold); }
[data-theme="sticker"] .share-links a, [data-theme="sticker"] .link-button { color: var(--s-green); font-family: var(--s-head-font); font-size: 0.85rem; letter-spacing: 0.5px; }
[data-theme="sticker"] .link-button { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; text-decoration: underline; }

/* Pop-ups: a starburst, like a "NEW!" flash on the album cover */
[data-theme="sticker"] .popup {
  font-family: var(--s-head-font);
  font-size: clamp(1.8rem, 10vw, 3rem);
  padding: 48px 56px;
  border: 0;
  background: var(--s-gold);
  box-shadow: none;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 85% 52%, 98% 70%, 76% 74%, 76% 96%, 58% 84%, 44% 100%, 36% 80%, 14% 90%, 18% 68%, 0 58%, 16% 44%, 4% 24%, 26% 24%, 26% 4%, 42% 16%);
}
[data-theme="sticker"] .popup.good { color: var(--s-red); }
[data-theme="sticker"] .popup.bad { color: var(--s-sticker); background: var(--s-red); font-size: clamp(1.2rem, 6vw, 2rem); }

/* Seasons note: dark ink in the sticker look */
[data-theme="sticker"] .seasons-note { color: var(--s-ink); }

/* Ko-fi button as a sticker: white border, slight tilt, drop shadow, red album lettering */
[data-theme="sticker"] .kofi-button, [data-theme="sticker"] .report-button {
  color: var(--s-ink); background: var(--s-page); border: 5px solid var(--s-sticker);
  box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.3); transform: rotate(-1.5deg);
}
[data-theme="sticker"] .kofi-words b { font-family: var(--s-head-font); font-weight: 400; color: var(--s-red); letter-spacing: 0.5px; }
[data-theme="sticker"] .kofi-cup .cup { fill: var(--s-green); }  /* green cup stands out on the cream page */
[data-theme="sticker"] .report-button { transform: rotate(1.5deg); } /* tilts the other way, like stuck-in stickers */
[data-theme="sticker"] .report-icon .paper { fill: #ffffff; stroke: var(--s-ink); stroke-width: 0.5px; }
[data-theme="sticker"] .report-icon .fold { fill: var(--s-red); }
[data-theme="sticker"] .kofi-cup .saucer, [data-theme="sticker"] .kofi-cup .steam { fill: var(--s-ink); }

/* Ko-fi pop-up as a sticker: white border, album green title bar */
[data-theme="sticker"] .kofi-box { background: var(--s-page); border: 6px solid var(--s-sticker); box-shadow: 3px 4px 0 rgba(43, 38, 32, 0.35); }
[data-theme="sticker"] .kofi-box-head { background: var(--s-green); color: var(--s-page); font-family: var(--s-head-font); font-weight: 400; letter-spacing: 0.5px; }