/* Halloween theme: only applies while <html class="halloween"> is set by season.js (October to 2 November, or when chosen in the footer). */

html.halloween {
  --pink: #ff9a2e;
  --purple: #6d2a9c;
  --bg: #140a12;
  --panel: #211220;
  --panel2: #2d1a2b;
  --border: #5a3418;
  --text: #f8eddf;
  --dim: #d3b9a0;
}

html.halloween body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 138, 31, 0.2), transparent 55%),
    linear-gradient(160deg, var(--bg), #0a0508);
  background-attachment: fixed;
}

html.halloween header.top .brand,
html.halloween .hero h1 {
  background: linear-gradient(90deg, #ff9a2e, #b07ce8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html.halloween header.top .brand::before { content: "\1F383  "; -webkit-text-fill-color: initial; }
html.halloween .hero h1::after { content: " \1F47B"; -webkit-text-fill-color: initial; }

html.halloween .card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 154, 46, 0.06), 0 6px 22px rgba(0, 0, 0, 0.35);
}

/* a cobweb in the top-right corner of every card */
html.halloween .card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23e8e0f0' stroke-width='0.8'><path d='M54 0 L0 0 M54 0 L54 54 M54 0 L8 46 M54 0 L26 52 M54 0 L2 22'/><path d='M40 0 Q41 14 54 14 M26 0 Q28 26 54 28 M12 0 Q15 38 54 42'/></svg>") no-repeat top right / contain;
}

html.halloween button,
html.halloween .btn {
  background: linear-gradient(135deg, #b5651c, #6b2f86);
}

html.halloween button.secondary,
html.halloween .btn.secondary { background: var(--panel2); }

html.halloween .pill[aria-pressed="true"] {
  background: var(--pink);
  color: #2a1405;
  border-color: var(--pink);
}

html.halloween table.board td.value { color: #9be08a; }

html.halloween footer { border-top-color: var(--border); }

/* bats flying across the top of the page */
.bat {
  position: fixed;
  top: 6px;
  left: -40px;
  font-size: 22px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  animation: bat-fly linear infinite;
}

@keyframes bat-fly {
  0% { transform: translate(0, 0) scale(var(--s, 1)); opacity: 0; }
  5% { opacity: 0.85; }
  50% { transform: translate(55vw, 40px) scale(var(--s, 1)); }
  95% { opacity: 0.85; }
  100% { transform: translate(115vw, 6px) scale(var(--s, 1)); opacity: 0; }
}

/* the blurred blossom photo goes warm: pumpkin-orange and violet bokeh instead of pink and blue */
html.halloween body::before { filter: sepia(0.9) hue-rotate(-18deg) saturate(2.2) brightness(0.75); opacity: 0.5; }

/* the big gradient tiles: violet into burnt orange */
html.halloween .tile.t1 { background: linear-gradient(135deg, #4a1d73, #c4521a); }
html.halloween .tile.t2 { background: linear-gradient(135deg, #5f2590, #e0701c); }
html.halloween .tile.t3 { background: linear-gradient(135deg, #36184f, #a8431a); }
html.halloween .m-hero { background: linear-gradient(135deg, #5f2590, #e0701c); }
html.halloween .cta, html.halloween .save-tile, html.halloween .pv-alert { background: linear-gradient(90deg, #4a1d73, #c4521a); }
html.halloween .note { background: color-mix(in srgb, var(--pink) 12%, var(--panel)); }
html.halloween .badge { background: linear-gradient(135deg, #6d2a9c, #e0701c); }
html.halloween .save-tile .badge { background: rgba(255, 255, 255, 0.22); }
html.halloween .realm.r2 { background: color-mix(in srgb, #6d2a9c 60%, transparent); }
html.halloween .mini-bar i::before { background: linear-gradient(90deg, #ffd08a, #ff9a2e); }

/* cobwebs in the corner of every tile and panel (cards already have one above) */
html.halloween .tile::after,
html.halloween .panel-tile::after,
html.halloween .stat::after,
html.halloween .board-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23f8eddf' stroke-width='0.8'><path d='M54 0 L0 0 M54 0 L54 54 M54 0 L8 46 M54 0 L26 52 M54 0 L2 22'/><path d='M40 0 Q41 14 54 14 M26 0 Q28 26 54 28 M12 0 Q15 38 54 42'/></svg>") no-repeat top right / contain;
}
html.halloween .panel-tile,
html.halloween .board-card { overflow: hidden; }
html.halloween .stat::after { width: 40px; height: 40px; }

/* a warm glow under the top bar, and a pumpkin-coloured line in the footer */
html.halloween header.top { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 154, 46, 0.14), 0 18px 40px -18px rgba(255, 138, 31, 0.35); }
html.halloween footer { border-top-color: rgba(255, 154, 46, 0.35); }

/* the look button in the top bar */
#season-toggle { cursor: pointer; }

/* the look button in the top bar (both themes): an icon, plus its name when there is room. season.js fills it in. */
header.top #look-toggle { width: auto; height: 32px; gap: 8px; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
header.top #look-toggle .lt { display: none; }
@media (min-width: 1400px) { header.top #look-toggle .lt { display: inline; } }
header.top #look-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--pink) 22%, transparent); color: var(--pink); }
header.top #look-toggle:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bat { display: none; }
}