/* ── Spooky mode — the temporary Halloween look (Oct 2026) ─────────────
   Everything here applies only while <html> carries the `spooky` class,
   which spooky.js adds while the Halloween window set in the ORDERING
   platform (Admin → Homepage → Halloween theme) is open. Remove this file,
   spooky.js and the two <link>/<script> tags in index.html and the app is
   exactly as before — nothing in style.css or app.js knows about it.

   Design note: the app paints its text with thousands of inline
   `color:#1a1a2e` styles that a stylesheet can't remap, so the CONTENT
   area stays light (an aged parchment, cards with pumpkin-orange hard
   shadows) and the chrome goes black + orange: header, side nav, menus,
   pills, buttons, and the pitch-dark login room. Decorations (bunting,
   spiders, cobwebs) are injected by spooky.js and are hidden the moment the
   class goes, so switching off never leaves anything behind. */

html.spooky {
  --spk-void: #0d0a0f;
  --spk-pitch: #18121a;
  --spk-crypt: #241a22;
  --spk-edge: #3d2c2a;
  --spk-pumpkin: #ff7a1a;
  --spk-ember: #ffb35c;
  --spk-bone: #f2e8db;
  --spk-parchment: #efe5d2;
  --spk-paper: #fdf8f0;
  --spk-inkdark: #170c05;
  /* Tokens the shared components read: mint → pumpkin, the signature hard
     shadow goes orange. Text tokens are deliberately untouched (see above). */
  --c-mint: var(--spk-pumpkin);
  --c-mint-hover: #ff8f3d;
  --sh-offset: 5px 5px 0 var(--spk-pumpkin);
}
html.spooky, html.spooky body { background: var(--spk-void); }
html.spooky, html.spooky body { overflow-x: clip; } /* peeking spiders can poke past the edge */

/* ── Chrome ── */
html.spooky .header { background: #000; border-bottom: 2px solid var(--spk-edge); }
html.spooky .burger-menu { background: #000; border-color: var(--spk-edge); }
html.spooky .burger-item:hover { background: var(--spk-crypt); }
html.spooky .burger-divider { background: var(--spk-edge); }
html.spooky #burgerSignedInAs { border-bottom-color: var(--spk-edge) !important; }
html.spooky #topNavBellDot { border-color: #000 !important; }
html.spooky #sideNav { background: #000; }
html.spooky .sn-item.is-current { background: var(--spk-pumpkin); color: var(--spk-inkdark); }
html.spooky .sn-item:hover { background: var(--spk-crypt); }
html.spooky .sn-logo { color: var(--spk-ember); }
html.spooky .sn-pages { border-left-color: var(--spk-edge); }

html.spooky .sub-nav-bar { background: var(--spk-pitch); border-bottom-color: var(--spk-edge); }
html.spooky .pill { background: var(--spk-crypt); border-color: var(--spk-edge); color: var(--spk-ember); }
html.spooky .pill:hover { background: #33232f; border-color: var(--spk-pumpkin); color: #fff; }
html.spooky .pill.active { background: var(--spk-pumpkin); border-color: var(--spk-pumpkin); color: var(--spk-inkdark); box-shadow: 0 2px 10px rgba(255, 122, 26, 0.35); }
html.spooky .pill-divider { background: var(--spk-edge); }
html.spooky .header-status { color: var(--spk-ember); }

html.spooky .date-filter-bar { background: var(--spk-pitch); border-bottom-color: var(--spk-edge); }
html.spooky .date-filter-label, html.spooky .date-filter-to, html.spooky .date-filter-note { color: var(--spk-ember); }
html.spooky .date-select { background: var(--spk-crypt); color: var(--spk-bone); border-color: var(--spk-edge); }

/* ── Content area: parchment, cards with orange shadows ── */
/* ── Content area: the dark room behind, light cards in front ──
   The page itself is see-through onto a fixed "room" layer (`.spk-room`,
   injected by spooky.js, z-index -1: gradient, cobwebs, scattered blinking
   eyes, dim pumpkins, fog — the login room, app-wide). Cards stay light so
   the thousands of inline-ink text styles inside them keep reading. Text
   that sits DIRECTLY on the page is lifted to bone three ways: inherited
   colour, the --c-ink token (remapped on the page, restored inside anything
   with a light fill), and an attribute rule for the common inline hexes. */
html.spooky .page { background: transparent; min-height: calc(100vh - 48px); padding-top: 58px; color: var(--spk-bone); --c-ink: var(--spk-bone); }
html.spooky #homepage { background: transparent; color: var(--spk-bone); --c-ink: var(--spk-bone); }
html.spooky #homepage.home-cards-mode { padding-top: 64px; }
html.spooky .home-welcome h1, html.spooky #homepage.home-dash-mode .home-welcome h1 { color: var(--spk-ember); }
html.spooky .home-welcome-hint, html.spooky .fd-home-strip-title { color: var(--spk-bone); }
html.spooky .st-title { color: var(--spk-ember); }
/* Anything with its own light fill gets the real ink back for everything inside it. */
html.spooky .spk-lit, html.spooky .card, html.spooky .mip-card, html.spooky .fd-post, html.spooky .tk-groupcard, html.spooky .dash-card,
html.spooky .fd-home-card, html.spooky .tk-home-card, html.spooky .info-modal, html.spooky .mip-btn, html.spooky .tk-toolbar,
html.spooky .md-btn, html.spooky .md-stop-row, html.spooky .prod-seg,
html.spooky input, html.spooky select, html.spooky textarea,
html.spooky [style*="background:#fff"], html.spooky [style*="background: #fff"], html.spooky [style*="background:white"],
html.spooky [style*="background:#f5f2eb"], html.spooky [style*="background:#fafaf5"], html.spooky [style*="background:#fbf9f3"],
html.spooky [style*="background:#faf8f3"], html.spooky [style*="background:#f0ece0"], html.spooky [style*="background:#fffdf7"],
html.spooky [style*="background:var(--c-surface"], html.spooky [style*="background:var(--c-bg"],
html.spooky [style*="background-color:#fff"], html.spooky [style*="background-color:var(--c-surface"] {
  color: #1a1a2e; --c-ink: #1a1a2e;
}
/* Inline dark text that is NOT inside one of those light panels → bone. */
html.spooky .page [style*="color:#1a1a2e"]:not(.spk-lit):not(.spk-lit *), html.spooky #homepage [style*="color:#1a1a2e"]:not(.spk-lit):not(.spk-lit *),
html.spooky .page [style*="color:#333"]:not(.spk-lit):not(.spk-lit *), html.spooky .page [style*="color:#444"]:not(.spk-lit):not(.spk-lit *),
html.spooky .page [style*="color:#555"]:not(.spk-lit):not(.spk-lit *) { color: var(--spk-bone) !important; }
html.spooky .page [style*="color:#666"]:not(.spk-lit):not(.spk-lit *), html.spooky .page [style*="color:#888"]:not(.spk-lit):not(.spk-lit *),
html.spooky .page [style*="color:#999"]:not(.spk-lit):not(.spk-lit *), html.spooky #homepage [style*="color:#888"]:not(.spk-lit):not(.spk-lit *),
html.spooky .page [style*="color:var(--c-muted"]:not(.spk-lit):not(.spk-lit *) { color: rgba(242, 232, 219, 0.7) !important; }
html.spooky .card { background: var(--spk-paper); box-shadow: 5px 5px 0 var(--spk-pumpkin); }
html.spooky .mip-card, html.spooky .fd-home-card, html.spooky .tk-home-card { background: var(--spk-paper); }
html.spooky .info-modal { box-shadow: 6px 6px 0 var(--spk-pumpkin); }
html.spooky .home-welcome h1 { text-shadow: 3px 3px 0 var(--spk-pumpkin); }

/* ── Buttons: cobweb corners + a flickering candle glow ──
   The glow is a filter so each button's own hard shadow and press-in nudge
   are untouched. The web is one ::after over the whole button carrying two
   background images (one per corner) — no DOM change needed. */
html.spooky .mip-btn-primary,
html.spooky .login-btn,
html.spooky .login-fab,
html.spooky button[style*="background:var(--c-mint)"],
html.spooky button[style*="background:#47c299"] {
  position: relative;
  animation: spk-candle 3.4s ease-in-out infinite;
}
html.spooky .mip-btn-primary { color: var(--spk-inkdark); }
html.spooky .mip-btn-primary::after,
html.spooky .login-btn::after,
html.spooky .login-fab::after,
html.spooky button[style*="background:var(--c-mint)"]::after,
html.spooky button[style*="background:#47c299"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  --wsz: min(28px, 58%);
  background: var(--spk-web-tl) left 1px top 1px / var(--wsz) var(--wsz) no-repeat,
              var(--spk-web-br) right 1px bottom 1px / var(--wsz) var(--wsz) no-repeat;
}
@keyframes spk-candle {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.45)); }
  18% { filter: drop-shadow(0 0 9px rgba(255, 150, 50, 0.7)); }
  24% { filter: drop-shadow(0 0 4px rgba(255, 130, 30, 0.35)); }
  52% { filter: drop-shadow(0 0 11px rgba(255, 160, 60, 0.75)); }
  70% { filter: drop-shadow(0 0 6px rgba(255, 140, 40, 0.5)); }
}

/* ── Login room ── */
html.spooky #loginScreen { background: #120d16; }
html.spooky #loginScreen .gta-stage, html.spooky #loginScreen .gta-scrim { display: none !important; }
html.spooky #loginScreen .login-inner {
  background: rgba(22, 15, 24, 0.96);
  border-color: var(--spk-pumpkin);
  box-shadow: 6px 6px 0 #000, 0 0 60px rgba(255, 122, 26, 0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow: visible;
}
html.spooky .login-logo { color: var(--spk-ember); }
html.spooky .login-subtitle { color: rgba(242, 232, 219, 0.5); }
html.spooky .login-label { color: rgba(242, 232, 219, 0.6); }
html.spooky .login-input { background: var(--spk-crypt); border-color: var(--spk-edge); color: var(--spk-bone); }
html.spooky .login-input:focus { border-color: var(--spk-pumpkin); }
html.spooky .login-input::placeholder { color: rgba(242, 232, 219, 0.35); }
html.spooky .login-btn { background: var(--spk-pumpkin); color: var(--spk-inkdark); }
html.spooky .login-fab { background: var(--spk-pumpkin); color: var(--spk-inkdark); box-shadow: 0 6px 20px rgba(255, 122, 26, 0.35); }
html.spooky #forgotPasswordBtn { color: rgba(242, 232, 219, 0.5) !important; }
.spk-tagline { display: none; }
html.spooky .spk-tagline { display: block; text-align: center; margin: -14px 0 18px; }
.spk-tagline b { display: block; font-family: 'Creepster', var(--font-display), sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.04em; color: var(--spk-pumpkin); line-height: 1.1; }
.spk-tagline i { display: block; font-style: normal; font-family: var(--font-body); font-size: 13px; color: rgba(242, 232, 219, 0.7); margin-top: 6px; }

/* ── Skull bell (the drawing is swapped by spooky.js; the dot glows) ── */
html.spooky #topNavBell { color: var(--spk-ember) !important; }
html.spooky #topNavBellDot { background: var(--spk-pumpkin) !important; box-shadow: 0 0 8px 2px rgba(255, 122, 26, 0.7); }

/* ── Profile pictures (photo or initials) wear one of six costumes — ghost, zombie, witch,
   vampire, skull, jack-o'-lantern — fixed per person: spooky.js tags .spk-av-0..5 (hash of their
   id; 0/untagged = ghost). Matt Drake alone gets .spk-av-pigeon (a zombie pigeon). ── */
html.spooky [data-av-user] { position: relative; }
html.spooky [data-av-user]::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: -10%; bottom: -4%; pointer-events: none;
  background: var(--spk-ghost) center / contain no-repeat;
}
html.spooky [data-av-user].spk-av-1::after { background-image: var(--spk-zombie); }
html.spooky [data-av-user].spk-av-2::after { background-image: var(--spk-witch); top: -36%; left: -10%; right: -10%; bottom: -6%; }
html.spooky [data-av-user].spk-av-3::after { background-image: var(--spk-vampire); }
html.spooky [data-av-user].spk-av-4::after { background-image: var(--spk-skull); }
html.spooky [data-av-user].spk-av-5::after { background-image: var(--spk-pumpkin-face); top: -14%; }
html.spooky [data-av-user].spk-av-pigeon::after { background-image: var(--spk-pigeon); }

/* ── Checklist ticks are bones ── */
html.spooky .ck-tickbox-on {
  color: transparent !important; background: #2b1f25 var(--spk-bone-img) center / 76% auto no-repeat !important; border-color: var(--spk-pumpkin) !important;
}

/* ── Zombie hand cursor (computers only — phones have no cursor) ──
   The hand is set on <html> and INHERITS (no blanket `*` rule), so anything the app
   styles cursor:pointer still computes as "pointer" — spooky.js tags those .spk-click
   and they get the hand with an orange spark at the fingertip; an explicit
   cursor:default is tagged .spk-plain so it shows the hand, not the arrow. Click
   point = the fingertip (9 1 at 25px). Text boxes keep the I-beam, disabled things
   the no-entry sign. */
@media (pointer: fine) {
  html.spooky { cursor: var(--spk-hand) 9 1, auto; }
  html.spooky .spk-plain { cursor: var(--spk-hand) 9 1, auto !important; }
  html.spooky :is(a, button, [role="button"], select, summary, label, [onclick], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .spk-click) { cursor: var(--spk-hand-spark) 9 1, pointer !important; }
  html.spooky input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="file"]):not([type="submit"]):not([type="button"]), html.spooky textarea, html.spooky [contenteditable="true"] { cursor: text !important; }
  html.spooky :is(button:disabled, [aria-disabled="true"], .spk-hang-apple.is-falling) { cursor: not-allowed !important; }
}

/* ── Bottling sheet print: a cobweb in the top-right corner of each page.
   Stays out of the grids (it's in the title row's empty space) and prints in
   plain black. ── */
html.spooky #btl-print .btl-print-page { position: relative; }
html.spooky #btl-print .btl-print-page::before {
  content: ""; position: absolute; right: 0; top: 0; width: 26mm; height: 26mm; pointer-events: none; opacity: 0.55;
  background: var(--spk-web-ink) right top / 100% 100% no-repeat; transform: scaleX(-1);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Decorations (all injected by spooky.js; hidden without the class) ── */
html:not(.spooky) .spk-deco { display: none !important; }

/* Drawings */
.spk-spider { display: block; color: #8a7275; }
.spk-leg { animation: spk-wiggle 1.4s ease-in-out infinite; transform-origin: 30px 26px; }
.spk-leg-b { animation-delay: -0.7s; }
@keyframes spk-wiggle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }
.spk-wings { animation: spk-flap 0.22s ease-in-out infinite alternate; transform-origin: 32px 14px; }
@keyframes spk-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
.spk-web { color: rgba(255, 179, 92, 0.32); pointer-events: none; stroke-width: 1.1; }

/* Header: a cobweb in the top-right corner. */
.spk-header-web { position: absolute; right: 0; top: 0; width: 64px; height: 64px; transform: scaleX(-1); pointer-events: none; }
@media (min-width: 1024px) { .spk-header-web { width: 100px; height: 100px; } }

/* Bunting: hangs off the bottom of whichever sticky bar is lowest (header,
   or the pill bar when it's showing — spooky.js moves it). Each item has its
   own thread, size, gap, tilt and swing (laid out from a fixed seed). It sits
   over the top of the page but never catches a tap. */
.spk-bunting {
  position: absolute; left: 0; right: 0; top: 100%; height: 46px;
  display: flex; justify-content: center; align-items: flex-start;
  overflow: hidden; pointer-events: none; z-index: 1;
}
.spk-hang {
  flex: none; display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; animation: spk-swing 3s ease-in-out infinite;
}
.spk-hang > i { display: block; width: 1px; height: var(--thread); background: rgba(242, 232, 219, 0.55); }
.spk-hang > svg { width: var(--size); height: var(--size); transform: rotate(var(--tilt)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.spk-hang-bat > svg { height: calc(var(--size) * 0.6); color: #1a1218; }
/* The bite is hidden until the easter egg reveals it (bunting-black, so it reads as a bite). */
.spk-bite { display: none; }
.spk-hang-apple.is-bitten .spk-bite { display: block; }
/* Easter egg — tap an apple 3x: crunch (bite), 3x more: it drops off the thread. */
.spk-hang-apple { pointer-events: auto; cursor: default; -webkit-tap-highlight-color: transparent; }
.spk-hang-apple.is-crunch > svg { animation: spk-crunch 0.45s ease-in-out; }
.spk-hang-apple.is-falling > svg { animation: spk-fall 1.1s cubic-bezier(.55,0,1,.45) forwards; }
.spk-hang-apple.is-falling { animation: none; position: relative; z-index: 60; }
@supports (overflow: clip) { .spk-bunting { overflow-x: clip; overflow-y: visible; } }
@keyframes spk-crunch { 0%, 100% { transform: rotate(var(--tilt)) scale(1); } 30% { transform: rotate(-14deg) scale(1.18); } 65% { transform: rotate(12deg) scale(0.92); } }
@keyframes spk-fall { 0% { transform: rotate(var(--tilt)); opacity: 1; } 20% { transform: translateY(-6px) rotate(-8deg); } 100% { transform: translateY(70vh) rotate(260deg); opacity: 0; } }
.spk-hang-spider > svg { color: #4d3b3f; transform: rotate(180deg); }
.spk-hang-ghost > svg { width: calc(var(--size) * 0.8); opacity: 0.95; }
@media (min-width: 1024px) {
  .spk-bunting { height: 54px; }
  .spk-hang > svg { width: calc(var(--size) * 1.2); height: calc(var(--size) * 1.2); }
  .spk-hang-bat > svg { height: calc(var(--size) * 0.72); }
  .spk-hang-ghost > svg { width: calc(var(--size) * 0.96); }
}
@keyframes spk-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Peeking spiders / eyes. The host (a card) gets position:relative; the peek
   is a small overflow-hidden BOX sitting just outside one edge of the card,
   and the spider slides into that box from the card's side — so it reads as
   coming out from behind the card without touching the card's own stacking.
   --k scales everything up on bigger screens. */
.spk-host { position: relative; --k: 1; }
@media (min-width: 640px) { .spk-host { --k: 1.35; } }
@media (min-width: 1024px) { .spk-host { --k: 1.55; } }
.spk-peek {
  --s: calc(var(--sz, 30px) * var(--k));
  position: absolute; overflow: hidden; pointer-events: none;
  width: var(--s); height: var(--s);
}
.spk-peek-top { left: var(--p, 60%); bottom: 100%; --hide: translateY(62%); --out: translateY(0); --mid: translateY(22%); }
.spk-peek-left { right: 100%; top: var(--p, 30%); --hide: translateX(62%); --out: translateX(0); --mid: translateX(22%); }
/* Inside a card that clips its overflow: the box sits just inside the top
   edge and the spider comes DOWN into it. */
.spk-peek-intop { left: var(--p, 60%); top: 0; z-index: 3; --hide: translateY(-62%); --out: translateY(0); --mid: translateY(-22%); }
.spk-peek-intop .spk-spider { transform: rotate(180deg); }
.spk-peek-intop .spk-head { margin-top: 0; border-radius: 30% 30% 45% 45%; }
.spk-peek > .spk-in {
  display: block; width: 100%; height: 100%;
  transform: var(--hide);
  animation: spk-peekout var(--du, 6.5s) ease-in-out var(--dl, 0s) infinite;
}
.spk-peek .spk-spider { width: 100%; height: 100%; }
.spk-peek-left .spk-spider { transform: rotate(-90deg); }
@media (min-width: 640px) { .spk-peek .spk-spider { color: #a08a8f; } }
/* At rest a little of each one shows (so there's always something to spot),
   then every few seconds it comes right out. */
@keyframes spk-peekout {
  0%, 56%, 100% { transform: var(--hide); }
  64%, 70%, 84% { transform: var(--out); }
  67% { transform: var(--mid); }
}
.spk-host:hover > .spk-peek > .spk-in { animation: none; transform: var(--out); transition: transform 0.3s ease-out; }
.spk-head {
  display: flex; align-items: center; justify-content: center; gap: 18%;
  width: 100%; height: 70%; margin-top: 15%;
  border-radius: 45% 45% 30% 30%; background: #2b1f25;
}
.spk-peek-left .spk-head { margin-top: 15%; border-radius: 45% 30% 30% 45%; }
.spk-head i, .spk-eyes i {
  border-radius: 50%; background: #ffd23a; box-shadow: 0 0 8px 2px rgba(255, 190, 40, 0.7);
  animation: spk-blink 4s infinite;
}
.spk-head i { width: 22%; height: 24%; }
@keyframes spk-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(0.05); } }

/* Hairy legs hooked over a card's top edge. They scuttle off when you hover. */
.spk-legs {
  position: absolute; z-index: 3; top: calc(-15px * var(--k, 1)); left: var(--p, 30%);
  width: calc(46px * var(--k, 1)); height: calc(26px * var(--k, 1)); color: #7d6468; pointer-events: none;
  transition: transform 0.25s ease-in, opacity 0.25s;
}
.spk-claw { animation: spk-tap 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.spk-claw-b { animation-delay: -0.8s; }
@keyframes spk-tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
.spk-host:hover > .spk-legs { transform: translateY(-16px); opacity: 0; }

/* ── The beat after Clock In / Clock Out (full-screen, never blocks a tap) ── */
.spk-shift {
  position: fixed; inset: 0; z-index: 10060; pointer-events: none; overflow: hidden;
  background: #060408; opacity: 0; transition: opacity 0.25s ease;
}
.spk-shift-out { background: rgba(6, 4, 8, 0.86); }
.spk-shift.is-on { opacity: 1; }
.spk-shift.is-off { opacity: 0; transition: opacity 0.6s ease; }
.spk-shift-eyes { position: absolute; display: flex; gap: 14px; transform: scaleY(0); animation: spk-eyes-open 0.35s ease-out var(--d, 0.4s) forwards; }
.spk-shift-eyes i { width: 26px; height: 15px; border-radius: 50%; background: #ffd23a; box-shadow: 0 0 18px 5px rgba(255, 190, 40, 0.65); animation: spk-blink 3.2s infinite; }
.spk-shift-eyes:nth-child(2) { transform: scaleY(0) scale(0.7); }
.spk-shift-eyes:nth-child(2) i { animation-delay: -1.4s; }
.spk-shift-eyes:nth-child(3) i { width: 18px; height: 10px; animation-delay: -2.2s; }
@keyframes spk-eyes-open { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.spk-shift-bat {
  position: absolute; left: 50%; bottom: 38%; width: var(--w, 30px); color: #ff7a1a; opacity: 0;
  animation: spk-bat-burst var(--d, 1.3s) cubic-bezier(0.2, 0.7, 0.3, 1) var(--dl, 0s) forwards;
}
.spk-shift-bat svg { display: block; width: 100%; }
@keyframes spk-bat-burst {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), var(--y)) scale(1); opacity: 0; }
}
.spk-shift-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 86vw); text-align: center;
  opacity: 0; animation: spk-text-in 0.5s ease-out 0.7s forwards;
}
.spk-shift-text b { display: block; font-family: 'Creepster', var(--font-display), sans-serif; font-weight: 400; font-size: 44px; letter-spacing: 0.04em; color: var(--spk-pumpkin); line-height: 1; margin-bottom: 14px; text-shadow: 0 0 24px rgba(255, 122, 26, 0.45); }
.spk-shift-text p { margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.4; color: var(--spk-bone); }
@keyframes spk-text-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (min-width: 640px) { .spk-shift-text b { font-size: 58px; } .spk-shift-text p { font-size: 22px; } }
/* Reduced motion: a plain fade with the line, nothing flies or blinks. */
.spk-shift-still .spk-shift-eyes, .spk-shift-still .spk-shift-bat { display: none; }
.spk-shift-still .spk-shift-text { animation: none; opacity: 1; }

/* ── The room behind every page (fixed, under everything) ── */
.spk-room {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #2a1530 0%, transparent 60%), linear-gradient(#120d16, #1b1020);
}
.spk-room .spk-scene-web { opacity: 0.6; }
.spk-room .spk-obj { opacity: 0.45; }
.spk-room-p1 { left: 2%; bottom: 2%; width: 110px; }
.spk-room-p2 { right: 3%; bottom: 14%; width: 76px; }
.spk-room-ghost { right: 8%; top: 18%; width: 70px; opacity: 0.22; animation: spk-float 5s ease-in-out infinite; }
.spk-room .spk-eyes { z-index: 1; }
.spk-room .spk-eyes i { width: 9px; height: 5px; }
.spk-room-e1 { left: 6%; top: 30%; }
.spk-room-e2 { right: 4%; top: 46%; gap: 7px; }
.spk-room-e2 i { animation-delay: -1.7s; }
.spk-room-e3 { left: 42%; bottom: 8%; gap: 8px; }
.spk-room-e3 i { animation-delay: -2.9s; }
.spk-room-e4 { right: 28%; top: 72%; gap: 6px; }
.spk-room-e4 i { width: 7px; height: 4px; animation-delay: -0.9s; }
.spk-room-e5 { left: 18%; top: 62%; }
.spk-room-e5 i { animation-delay: -3.4s; }
.spk-room .spk-dangler { right: 9%; top: 0; }
.spk-room .spk-dangler .spk-thread { height: 90px; background: rgba(242, 232, 219, 0.3); }
.spk-room .spk-dangler .spk-spider { color: #4a3b3e; }
@media (max-width: 639px) { .spk-room-ghost, .spk-room-e4, .spk-room .spk-dangler { display: none; } .spk-room-p1 { width: 80px; } }
@media (min-width: 1024px) { .spk-room-p1 { width: 160px; } .spk-room-p2 { width: 110px; } .spk-room-ghost { width: 100px; } .spk-room .spk-eyes i { width: 12px; height: 7px; } }

/* ── The login room ──
   Pitch dark; on a computer the mouse is a torch that turns up pumpkins, a
   ghost with a sign, two headstones and a spider. Phones (no mouse) and
   reduced-motion get a dim static room. The sign-in card sits above it all. */
.spk-scene {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #2a1530 0%, transparent 60%), linear-gradient(#120d16, #1b1020);
}
.spk-obj { position: absolute; }
.spk-p1 { left: 5%; bottom: 6%; width: 130px; }
.spk-p2 { right: 6%; bottom: 10%; width: 92px; }
.spk-p3 { right: 20%; top: 9%; width: 64px; opacity: 0.9; }
.spk-scene-ghost { left: 3%; top: 1%; width: 150px; animation: spk-float 4s ease-in-out infinite; }
@media (min-width: 640px) { .spk-scene-ghost { left: 4%; top: 9%; width: 190px; } }
.spk-grave { width: 86px; }
.spk-grave-1 { left: 20%; bottom: 3%; transform: rotate(-4deg); }
.spk-grave-rip { font-family: 'Creepster', var(--font-display), sans-serif; font-size: 24px; fill: #231c1f; letter-spacing: 1px; }
.spk-grave-line { font-family: var(--font-display), sans-serif; font-size: 15px; fill: #231c1f; }
.spk-sign-line { font-family: var(--font-display), sans-serif; font-size: 15px; fill: #3b2a18; }
.spk-sign-big { font-family: 'Creepster', var(--font-display), sans-serif; font-size: 22px; fill: #b4321e; letter-spacing: 1px; }
.spk-scene-spider { right: 11%; top: 40%; width: 56px; }
.spk-scene-spider .spk-spider { width: 56px; height: 50px; color: #6b585b; }
.spk-boo { left: 30%; top: 7%; font-family: 'Creepster', var(--font-display), sans-serif; font-size: 42px; color: rgba(155, 212, 90, 0.75); transform: rotate(-8deg); }
@media (max-width: 639px) { .spk-boo { display: none; } }
.spk-scene-web { position: absolute; width: 200px; height: 200px; color: rgba(242, 232, 219, 0.3); }
.spk-tl { left: 0; top: 0; }
.spk-br { right: 0; bottom: 0; transform: rotate(180deg); }
.spk-fog {
  position: absolute; inset: auto -20% 0 -20%; height: 45%;
  background: radial-gradient(ellipse at 30% 80%, rgba(200, 190, 210, 0.16), transparent 60%),
              radial-gradient(ellipse at 70% 90%, rgba(200, 190, 210, 0.12), transparent 55%);
  animation: spk-drift 14s ease-in-out infinite alternate;
}
.spk-fog-2 { animation-duration: 20s; animation-direction: alternate-reverse; opacity: 0.7; }
@keyframes spk-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes spk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.spk-dark {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(190px circle at var(--tx, 30%) var(--ty, 40%),
    rgba(9, 6, 11, 0) 0%, rgba(9, 6, 11, 0.25) 40%, rgba(9, 6, 11, 0.94) 100%);
}
.spk-dark.spk-dark-static { background: rgba(9, 6, 11, 0.55); }
.spk-eyes { position: absolute; z-index: 4; display: flex; gap: 10px; }
.spk-eyes i { width: 10px; height: 6px; }
.spk-e1 { left: 8%; top: 52%; }
.spk-e2 { right: 5%; top: 24%; gap: 7px; }
.spk-e2 i { width: 7px; height: 4px; animation-delay: -2.3s; }
@media (min-width: 1024px) {
  .spk-p1 { width: 190px; }
  .spk-p2 { width: 130px; }
  .spk-p3 { width: 90px; }
  .spk-scene-ghost { width: 250px; }
  .spk-grave { width: 140px; }
  .spk-scene-spider, .spk-scene-spider .spk-spider { width: 80px; height: 70px; }
  .spk-boo { font-size: 64px; }
  .spk-scene-web { width: 300px; height: 300px; }
  .spk-dark {
    background: radial-gradient(270px circle at var(--tx, 30%) var(--ty, 40%),
      rgba(9, 6, 11, 0) 0%, rgba(9, 6, 11, 0.25) 40%, rgba(9, 6, 11, 0.94) 100%);
  }
  .spk-eyes i { width: 14px; height: 8px; }
}
/* A spider dangling off the sign-in card. */
.spk-dangler {
  position: absolute; right: 26px; top: -2px; z-index: 3; display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; animation: spk-dangle 3.4s ease-in-out infinite; pointer-events: none;
}
.spk-dangler .spk-thread { width: 1px; height: 46px; background: rgba(242, 232, 219, 0.45); }
.spk-dangler .spk-spider { width: 28px; height: 25px; color: #5a4a4c; transform: rotate(180deg); }
@keyframes spk-dangle { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(14px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .spk-peek > .spk-in, .spk-leg, .spk-wings, .spk-claw, .spk-hang, .spk-hang-apple > svg, .spk-scene-ghost, .spk-fog,
  .spk-dangler, .spk-head i, .spk-eyes i,
  html.spooky .mip-btn-primary, html.spooky .login-btn, html.spooky .login-fab,
  html.spooky button[style*="background:var(--c-mint)"], html.spooky button[style*="background:#47c299"] { animation: none !important; }
  .spk-peek > .spk-in { transform: var(--out) !important; }
}