/* Halloween theme layer (utils/halloween.ts adds html.theme-halloween 24/10 - 2/11 Europe/Rome,
   or ?theme=halloween). Light only. Motion = transform / opacity; nothing pops out above
   elements: decorations stay inside their tile / card or in the fixed layer under the page. */

html.theme-halloween {
  --hw-accent: #F2811D;
  --hw-deep: #B4500E;
  --hw-soft: #FDE3C8;
  --hw-violet: #6B3FA0;
  --hw-violet-soft: #ECE3F6;
  --hw-slime: #8BD346;
  --hw-slime-deep: #4E8A1E;
  --hw-ink: #0B0B0C;
  --hw-cream: #F4EBDA;
  --hw-display: 'Griffy', 'Yellowtail', 'Outfit', cursive;
}
/* Brand palette -> pumpkin (overrides every fruit; the stored fruit returns on 3/11). #facd15 paused. */
html.theme-halloween,
html.theme-halloween[data-fruit] {
  --brand-50: 255 246 236;
  --brand-100: 253 227 200;
  --brand-200: 251 203 156;
  --brand-300: 247 168 98;
  --brand-400: 242 129 29;
  --brand-500: 217 104 15;
  --brand-600: 180 80 14;
  --brand-700: 143 63 14;
  --brand-800: 110 50 16;
  --brand-900: 79 37 16;
  --brand-950: 11 11 12;
  --brand-primary: #F2811D;
  --brand-ink: #0B0B0C;
  --brand-cream: #F4EBDA;
  --brand-cream-2: #FBF3E6;
  --brand-cream-border: rgb(253 227 200 / 0.8);
}

/* ---- Backgrounds: parchment, random cobwebs, paper grain 3% ---- */
html.theme-halloween body,
html.theme-halloween .app-shell,
html.theme-halloween .auth-shell,
html.theme-halloween .qr-shell { background-color: var(--hw-cream); }
.hw-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.hw-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.05 0 0 0 1 0%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.03;
}
/* Cobwebs: exactly two fixed corner webs (left bigger, right smaller), flush with the screen
   sides and the header bottom (--hw-top, set from the header height). Same on every page, never re-laid out. */
.hw-web {
  position: absolute;
  top: var(--hw-top, 0px);
  display: block;
  overflow: visible;
  fill: none;
  stroke: #3A2414;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.2;
  pointer-events: none;
}
.hw-web path { vector-effect: non-scaling-stroke; }
.hw-web--l { left: 0; width: clamp(140px, 41.5vw, 196px); height: clamp(140px, 41.5vw, 196px); }
.hw-web--r { right: 0; width: clamp(96px, 28.2vw, 132px); height: clamp(96px, 28.2vw, 132px); transform: scaleX(-1); opacity: 0.19; }

/* Spiders: drop from just under the header (the clip top) at a random x, then climb back and
   vanish. One animated node each (thread + spider move together); transform only. The pivot of
   the wiggle is the thread's anchor at the clip top. */
.hw-spider {
  position: absolute;
  left: -40px;
  top: 0;
  width: 28px;
  height: 320px;
  margin-left: -14px;
  overflow: hidden;
  pointer-events: none;
}
.hw-spider__drop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-300px - var(--hw-spider, 16px));
  height: calc(300px + var(--hw-spider, 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2A1747;
  opacity: 0.72;
  transform-origin: 50% calc(100% - var(--hw-drop, 120px) - var(--hw-spider, 16px));
}
.hw-spider__drop.is-dropping { animation: hw-spider-drop 7s linear 1 both; }
.hw-spider__drop.is-violet { color: #3B2160; }
.hw-spider__thread {
  flex: 1 1 auto;
  width: 1px;
  background: rgb(58 36 20 / 0.6);
}
.hw-spider__body { display: block; flex: 0 0 auto; margin-top: -3px; }
@keyframes hw-spider-drop {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.1, 0.4, 1); }
  36% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px)), 0) rotate(0deg); animation-timing-function: ease-in-out; }
  42% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px) - 7px), 0) rotate(0deg); animation-timing-function: ease-in-out; }
  48% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px)), 0) rotate(5deg); animation-timing-function: ease-in-out; }
  54% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px)), 0) rotate(-4deg); animation-timing-function: ease-in-out; }
  60% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px)), 0) rotate(2.5deg); animation-timing-function: ease-in-out; }
  66% { transform: translate3d(0, calc(var(--hw-drop, 120px) + var(--hw-spider, 16px)), 0) rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Ambient: the 3 spiders are the only animated nodes. Fog and webs are static. */
.hw-amb { position: absolute; will-change: transform; }
.hw-fog {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 220px;
  opacity: 0.3;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 1200px 100%;
  will-change: auto;
}
.hw-fog--a { background-image: url('/images/halloween/fog-a.webp'); }
.hw-fog--b { background-image: url('/images/halloween/fog-b.webp'); height: 180px; background-position: 420px 100%; }
/* Pause only when the tab is hidden (html.hw-paused); keeps running behind sheets / modals. */
html.hw-paused .hw-amb,
html.hw-paused .hw-logo-face { animation-play-state: paused; }

/* ---- Home: "Halloween LTE" pill with countdown (normal flow, under the header) ---- */
.hw-lte-wrap { display: flex; justify-content: center; margin: 0 0 12px; }
.hw-lte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 36px;
  padding: 4px 14px 4px 14px;
  border-radius: 999px;
  background: #FFF8EF;
  border: 1.5px solid rgb(180 80 14 / 0.35);
  box-shadow: inset 0 -2px 0 rgb(180 80 14 / 0.25);
  color: var(--hw-ink);
  white-space: nowrap;
}
.hw-lte__name {
  font-family: var(--hw-display);
  font-size: 19px;
  line-height: 1;
  color: var(--hw-deep);
  transform: translateY(1px);
}
.hw-lte__chip {
  padding: 3px 6px 2px;
  border-radius: 6px;
  background: var(--hw-violet);
  color: #F4EBDA;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
}
.hw-lte__sep { color: rgb(11 11 12 / 0.35); font-weight: 700; }
.hw-lte__time {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgb(11 11 12 / 0.8);
}

/* ---- Display font: Griffy for titles only (24-32px); body, numbers, receipts stay Outfit ---- */
html.theme-halloween .page h2.text-2xl,
html.theme-halloween .page h2.sm\:text-2xl,
html.theme-halloween #loginPage h2 {
  font-family: var(--hw-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
html.theme-halloween #loginPage h2 { font-size: 26px; color: var(--hw-deep); }

/* ---- Login: pumpkin logo bounce + candle face, card rises in ---- */
.hw-logo {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: hw-logo-in 400ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.hw-logo svg { display: block; }
@keyframes hw-logo-in {
  0% { opacity: 0; transform: translateY(-24px) scale(0.9); }
  35% { opacity: 1; }
  60% { transform: translateY(0) scale(1.06, 0.94); }
  80% { transform: scale(0.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
.hw-logo-face { animation: hw-candle 1.6s steps(2, jump-none) infinite alternate; }
@keyframes hw-candle {
  from { opacity: 1; }
  to { opacity: 0.85; }
}
html.theme-halloween #loginPage,
html.theme-halloween .auth-shell section.bg-white {
  animation: hw-card-in 320ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
@keyframes hw-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---- Home: drinks as soft pumpkin tokens ---- */
html.theme-halloween .dc-drink-tile {
  background: var(--hw-soft);
  border-color: rgb(180 80 14 / 0.22);
  box-shadow: inset 0 -4px 0 var(--hw-deep), 0 1px 2px rgb(11 11 12 / 0.06);
  overflow: hidden;
}
html.theme-halloween .dc-drink-tile .dc-drink-media {
  background: #FFF8EF;
  border-color: rgb(180 80 14 / 0.18);
}
html.theme-halloween .dc-drink-tile .dc-drink-label { color: var(--hw-ink); }
/* ---- Nav: pumpkin pill that slides, ink icon, wobble inside the pill ---- */
html.theme-halloween .app-bottom-nav .dc-nav-btn { color: rgb(11 11 12 / 0.6); }
html.theme-halloween .app-bottom-nav .dc-nav-btn[aria-current="page"] { color: var(--hw-deep); }
html.theme-halloween .app-bottom-nav .dc-nav-btn[aria-current="page"] .dc-nav-label { color: var(--hw-deep); opacity: 1; }
html.theme-halloween .app-bottom-nav .dc-nav-pill {
  background: transparent !important;
  color: inherit;
  transition: color 150ms ease;
}
html.theme-halloween .app-bottom-nav .dc-nav-btn[aria-current="page"] .dc-nav-pill { color: var(--hw-ink); }
html.theme-halloween .app-bottom-nav .dc-nav-btn[aria-current="page"] .dc-nav-pill svg {
  --hw-fill-pumpkin: #FDE3C8;
  --hw-fill-soft: #FFF8EF;
  animation: hw-wobble 360ms ease-in-out both;
}
html.theme-halloween .dc-nav-pill svg { transition: opacity 150ms ease; }
@keyframes hw-wobble {
  0%, 100% { transform: none; }
  30% { transform: rotate(-3deg); }
  65% { transform: rotate(3deg); }
}
.hw-nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 1rem;
  background: var(--hw-accent);
  box-shadow: inset 0 -2px 0 rgb(180 80 14 / 0.55);
  pointer-events: none;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Tessera: carved pumpkins, violet double border, violet candy PREMIO ---- */
html.theme-halloween .dc-punch {
  --punch-accent: #F2811D;
  --punch-deep: #B4500E;
  --punch-paper: color-mix(in srgb, #F2811D 12%, #F4EBDA);
}
html.theme-halloween .dc-punch__card {
  overflow: hidden; /* confetti falls inside the card */
  outline: 3px double var(--hw-violet);
  outline-offset: -9px;
}
html.theme-halloween .dc-punch__title {
  font-family: var(--hw-display);
  font-size: 28px;
  color: var(--hw-deep);
}
html.theme-halloween .dc-punch--mini .dc-punch__title { font-size: 24px; }
html.theme-halloween .dc-hole:not(.is-prize) { border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%; }
html.theme-halloween .dc-hole.is-next:not(.is-prize) { border-color: var(--hw-deep); }
html.theme-halloween .dc-hole:not(.is-prize) .dc-hole__fill {
  inset: -4px;
  border-radius: 0;
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M31 18c0-4 2-8 5-10%22 stroke=%22%234E8A1E%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cg fill=%22%23F2811D%22 stroke=%22%23B4500E%22 stroke-width=%222%22%3E%3Cellipse cx=%2221%22 cy=%2239%22 rx=%2214%22 ry=%2217%22/%3E%3Cellipse cx=%2243%22 cy=%2239%22 rx=%2214%22 ry=%2217%22/%3E%3Cellipse cx=%2232%22 cy=%2239%22 rx=%2215%22 ry=%2219%22/%3E%3C/g%3E%3Cpath d=%22M32 21c-3 6-3 30 0 36%22 stroke=%22%23B4500E%22 stroke-width=%221.5%22 fill=%22none%22 opacity=%22.5%22/%3E%3C/svg%3E") center / contain no-repeat;
}
html.theme-halloween .dc-hole:not(.is-prize) .dc-hole__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg fill=%22%230B0B0C%22%3E%3Cpath d=%22M18 36l5.5-7.5 5.5 7.5z%22/%3E%3Cpath d=%22M35 36l5.5-7.5 5.5 7.5z%22/%3E%3Cpath d=%22M30 41l2-3 2 3z%22/%3E%3Cpath d=%22M18 45c5 8 23 8 28 0l-4 2.5-3-2.5-4 3.5-3-3-3 3-4-3.5-3 2.5z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* Faces are static on purpose: an infinite opacity loop on these ::after layers (4 composited
   layers inside the rounded, overflow-clipped card) made iOS Safari drop and misplace tiles of
   the second row (5/6 jumping, 7 and PREMIO vanishing about every second). */
html.theme-halloween .dc-hole.is-punched:not(.is-prize) .dc-hole__num { visibility: hidden; }
/* PREMIO: wrapped violet candy (dashed outline until won, then solid). */
html.theme-halloween .dc-hole.is-prize {
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg fill=%22%23ECE3F6%22 stroke=%22%236B3FA0%22 stroke-width=%222%22 stroke-dasharray=%224 3%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 32L3 22v20z%22/%3E%3Cpath d=%22M47 32l14-10v20z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2216%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
html.theme-halloween .dc-hole.is-prize .dc-hole__num { color: var(--hw-violet); font-size: 8px; letter-spacing: 0.04em; }
html.theme-halloween .dc-hole.is-prize .dc-hole__fill {
  inset: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg fill=%22%236B3FA0%22 stroke=%22%230B0B0C%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 32L3 22v20z%22/%3E%3Cpath d=%22M47 32l14-10v20z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2216%22/%3E%3C/g%3E%3Cpath d=%22M22 26c5-5 15-5 20 0%22 stroke=%22%23ECE3F6%22 stroke-width=%222.5%22 fill=%22none%22 stroke-linecap=%22round%22 opacity=%22.7%22/%3E%3C/svg%3E") center / contain no-repeat;
}
html.theme-halloween .dc-hole.is-prize.is-punched { background: none; }
html.theme-halloween .dc-hole.is-prize.is-punched .dc-hole__num { color: #FDE3C8; }
/* Punch: no paper disc flying up; orange confetti falls inside the card instead. */
html.theme-halloween .dc-hole__chad { display: none; }
html.theme-halloween .dc-hole__frag {
  width: 6px;
  height: 9px;
  margin: -4px 0 0 -3px;
  border-radius: 1px;
  box-shadow: none;
  background: var(--hw-accent);
  animation: hw-confetti-fall 620ms cubic-bezier(0.3, 0.6, 0.5, 1) both;
  animation-delay: calc(var(--punch-at, 0ms) + 120ms + var(--f) * 40ms);
}
html.theme-halloween .dc-hole__frag:nth-of-type(odd) { background: var(--hw-violet); }
@keyframes hw-confetti-fall {
  0% { opacity: 1; transform: translate(calc((var(--f) - 1) * 10px), 10px) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc((var(--f) - 1) * 22px), 64px) rotate(calc(160deg + var(--f) * 70deg)); }
}
html.theme-halloween .dc-punch.is-celebrating .dc-punch__card { animation-name: hw-punch-bounce; }
@keyframes hw-punch-bounce {
  0% { transform: none; }
  30% { transform: translateY(-8px) scale(1.06, 0.95) rotate(-2deg); }
  55% { transform: scale(0.97, 1.03) rotate(2deg); }
  75% { transform: scale(1.01, 0.99) rotate(-1deg); }
  100% { transform: none; }
}
html.theme-halloween .dc-punch-collection b { background: var(--hw-soft); color: var(--hw-deep); }

/* ---- Sisal receipts: layout untouched; pumpkin watermark 6% + violet BOO on won ones ---- */
.hw-receipt-wm {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  z-index: -1;
  opacity: 0.06;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg fill=%22%23B4500E%22%3E%3Cellipse cx=%2221%22 cy=%2239%22 rx=%2214%22 ry=%2217%22/%3E%3Cellipse cx=%2243%22 cy=%2239%22 rx=%2214%22 ry=%2217%22/%3E%3Cellipse cx=%2232%22 cy=%2239%22 rx=%2215%22 ry=%2219%22/%3E%3Cpath d=%22M29 22c0-5 2-10 6-13l3 2c-3 3-4 7-4 11z%22/%3E%3C/g%3E%3Cg fill=%22%23F6F1E3%22%3E%3Cpath d=%22M18 36l5.5-7.5 5.5 7.5z%22/%3E%3Cpath d=%22M35 36l5.5-7.5 5.5 7.5z%22/%3E%3Cpath d=%22M18 45c5 8 23 8 28 0l-4 2.5-3-2.5-4 3.5-3-3-3 3-4-3.5-3 2.5z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.hw-boo {
  position: absolute;
  right: 16px;
  top: 104px;
  z-index: 1;
  padding: 2px 12px 0;
  border: 3px solid var(--hw-violet, #6B3FA0);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #f6f1e3, inset 0 0 0 3.5px var(--hw-violet, #6B3FA0);
  font-family: var(--hw-display, 'Griffy', 'Yellowtail', cursive);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--hw-violet, #6B3FA0);
  opacity: 0.82;
  transform: rotate(-8deg);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ---- Reduced motion: ambient off (static cobwebs + fog only, no spiders), no candle, short fades ---- */
@media (prefers-reduced-motion: reduce) {
  .hw-spider { display: none; }
  .hw-logo-face { animation: none; }
  .hw-logo { animation: hw-fade 200ms linear both; }
  html.theme-halloween #loginPage,
  html.theme-halloween .auth-shell section.bg-white { animation: hw-fade 200ms linear both; }
  html.theme-halloween .app-bottom-nav .dc-nav-btn[aria-current="page"] .dc-nav-pill svg { animation: none; }
  .hw-nav-indicator { transition: opacity 150ms linear; }
  html.theme-halloween .dc-hole__frag { display: none; }
  html.theme-halloween .dc-punch.is-celebrating .dc-punch__card { animation: none; }
}
@keyframes hw-fade { from { opacity: 0; } to { opacity: 1; } }