/* CBets Halloween theme (2026). Loaded after the main stylesheet while the season is on.
   To turn it off, remove the halloween.css <link> from public/index.html. The normal design is untouched underneath. */
html:root {
  --bg:#0c0716; --keep-bg:#0c0716; --keep-bg-deep:#060310; --vault-bg:#0a0613; --vault-bg-2:#140b22;
  --panel:#1a1027; --panel-2:#241636; --panel-3:#2e1c45; --keep-stone:#1a1027; --keep-stone-raised:#241636;
  --shell-panel:#1a1027; --shell-panel-raised:#241636; --surface-hover:#2f1d47;
  --surface-raised:rgba(26,16,39,.98); --surface-soft:rgba(36,22,54,.9); --player-surface:#120a1f;
  --vault-panel:rgba(22,13,35,.94); --vault-panel-strong:rgba(30,18,46,.98);
  --keep-edge:#4a2f66; --line:rgba(150,95,205,.42); --keep-edge-soft:rgba(150,95,205,.42);
  --shell-line:rgba(160,105,215,.5); --shell-line-soft:rgba(140,90,190,.36); --soft-line:rgba(255,140,26,.18);
  --player-line:rgba(190,120,255,.26); --player-line-strong:rgba(255,154,31,.55); --vault-line:rgba(255,148,38,.33);
  --text:#f6efe6; --keep-text:#f6efe6; --muted:#b9aacb; --keep-muted:#b9aacb; --player-muted:#b3a3c9;
  --gold:#ff9a1f; --brand-gold:#ff9a1f; --keep-gold:#ff8c1a; --shell-gold:#ff8c1a; --focus:#ff8c1a;
  --gold-bright:#ffc27a; --gold-deep:#8a3f06; --keep-gold-dark:#a8470b; --player-gold:#ffa23a;
  --vault-gold:#ff9426; --vault-gold-2:#ffc78a;
  --blue:#b46cff; --teal:#b46cff; --brand-cyan:#b46cff; --blue-2:#7c3aed; --brand-blue:#7c3aed;
  --keep-cyan:#9b6cff; --crystal:#c99bff; --vault-teal:#a97bff; --vault-teal-line:rgba(169,123,255,.24);
  --purple:#9b4dff; --brand-purple:#9b4dff; --keep-purple:#7a3fd1; --brand-magenta:#ff4fb0;
  --green:#7ee06a; --grass:#7ee06a; --shell-good:#7ee06a; --keep-grass:#6cc04a;
  --shadow-focus:0 0 0 4px rgba(255,140,26,.22);
}
body {
  background-image: radial-gradient(1100px 520px at 72% -8%, rgba(255,128,20,.10), transparent 62%),
                    radial-gradient(900px 600px at 0% 100%, rgba(124,58,237,.10), transparent 60%);
  background-attachment: fixed;
}
::selection { background: rgba(255,140,26,.35); }

/* Hero: swap in the Halloween art (same framing as the original picture) */
.keep-hero .brand-hero-media {
  position: relative; display: block;
  background: #120a1f url("/assets/seasonal/halloween/hero-1536.webp") 50% 52% / cover no-repeat;
}
.keep-hero .brand-hero-media img { opacity: 0; }
.keep-hero .brand-hero-scrim {
  background: linear-gradient(90deg, #1a1027 0%, rgba(26,16,39,.72) 13%, rgba(12,7,22,.08) 42%, rgba(12,7,22,.22) 100%);
}
.keep-hero .brand-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%230b0612' d='M32 9c1.6-3.2 3.4-5 3.4-5s.9 3.6.2 5.6c4.2-1 8.6-4.6 12.4-8.6 0 6-2 10-2 10s6-2 18 0c-7 2.2-9.6 6.4-9.6 10.6-4.6-4-9.8-4.8-14.4-1.8 0 3.2-2.6 6.4-4.6 7.8-2-1.4-4.6-4.6-4.6-7.8-4.6-3-9.8-2.2-14.4 1.8 0-4.2-2.6-8.4-9.6-10.6 12-2 18 0 18 0s-2-4-2-10c3.8 4 8.2 7.6 12.4 8.6-.7-2-.2-5.6.2-5.6S30.4 5.8 32 9z'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%230b0612' d='M32 9c1.6-3.2 3.4-5 3.4-5s.9 3.6.2 5.6c4.2-1 8.6-4.6 12.4-8.6 0 6-2 10-2 10s6-2 18 0c-7 2.2-9.6 6.4-9.6 10.6-4.6-4-9.8-4.8-14.4-1.8 0 3.2-2.6 6.4-4.6 7.8-2-1.4-4.6-4.6-4.6-7.8-4.6-3-9.8-2.2-14.4 1.8 0-4.2-2.6-8.4-9.6-10.6 12-2 18 0 18 0s-2-4-2-10c3.8 4 8.2 7.6 12.4 8.6-.7-2-.2-5.6.2-5.6S30.4 5.8 32 9z'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%230b0612' d='M32 9c1.6-3.2 3.4-5 3.4-5s.9 3.6.2 5.6c4.2-1 8.6-4.6 12.4-8.6 0 6-2 10-2 10s6-2 18 0c-7 2.2-9.6 6.4-9.6 10.6-4.6-4-9.8-4.8-14.4-1.8 0 3.2-2.6 6.4-4.6 7.8-2-1.4-4.6-4.6-4.6-7.8-4.6-3-9.8-2.2-14.4 1.8 0-4.2-2.6-8.4-9.6-10.6 12-2 18 0 18 0s-2-4-2-10c3.8 4 8.2 7.6 12.4 8.6-.7-2-.2-5.6.2-5.6S30.4 5.8 32 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 30px auto, 20px auto, 24px auto;
  background-position: 16% 20%, 74% 12%, 58% 34%;
  animation: cbets-halloween-bats 16s ease-in-out infinite alternate;
}
@keyframes cbets-halloween-bats {
  0%   { background-position: 16% 20%, 74% 12%, 58% 34%; }
  50%  { background-position: 24% 9%,  68% 24%, 64% 18%; }
  100% { background-position: 11% 28%, 80% 15%, 54% 26%; }
}
.keep-hero .hero-eyebrow::before { content: "\1F383  "; }
@media (max-width: 760px) {
  .keep-hero .brand-hero-media { background-image: url("/assets/seasonal/halloween/hero-768.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .keep-hero .brand-hero-media::after { animation: none; }
}

/* Logo: Halloween wordmark and icon (originals stay in /assets/brand) */
img.brand-lockup-image { content: url("/assets/seasonal/halloween/wordmark-720.webp"); }
.site-footer img.brand-lockup-image,
.auth-logo-row img.brand-lockup-image { content: url("/assets/seasonal/halloween/wordmark-1200.webp"); }
img.mobile-brand-mark { content: url("/assets/seasonal/halloween/icon-64.webp"); object-fit: contain; }
img.auth-hero-icon,
img.boot-mark { content: url("/assets/seasonal/halloween/icon-192.webp"); object-fit: contain; }

/* Spots with fixed navy/gold colours in the main stylesheet */
.site-footer { background-color: rgba(20,11,32,.92); border-color: rgba(150,95,205,.3); }
.chat-panel, .chat-feed-tabs { background-color: #0e0819; }
.rain-card {
  background: radial-gradient(circle at 100% 0, rgba(255,128,20,.22), transparent 55%), linear-gradient(145deg, #241636, #170d26);
  border-color: rgba(255,148,38,.4);
}
.chat-feed-tabs button.active { background-color: #241636; color: #ffa23a; border-color: rgba(255,148,38,.4); }
.button.gold, .rain-card .button.gold, .chat-panel .button.primary {
  background: linear-gradient(#ffb04a, #e0700f 58%, #9a4306); color: #1a0a00; border-color: rgba(255,190,110,.8);
}
.button.auth-signin { background-color: rgba(36,22,54,.86); border-color: rgba(160,105,215,.45); color: #f6efe6; }

/* ---------- Animated Halloween effects (driven by halloween.js) ---------- */
#cbets-halloween-fx { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; contain: strict; }
#cbets-halloween-fx.hw-paused * { animation-play-state: paused !important; }
#cbets-halloween-fx svg { display: block; width: 100%; height: 100%; }

/* cobwebs */
.hw-web { position: absolute; color: rgba(236,226,255,.34); filter: drop-shadow(0 0 2px rgba(180,108,255,.35)); }
.hw-web svg { width: auto; height: auto; }
.hw-web-tl { top: calc(var(--header, 64px) - 1px); left: calc(var(--sidebar-collapsed, 72px) - 1px); }
.hw-web-tr { top: calc(var(--header, 64px) - 1px); right: var(--chat, 0px); transform: scaleX(-1); opacity: .8; }
.hw-web-br { bottom: -1px; right: var(--chat, 0px); transform: scale(-1, -1); opacity: .75; }
.hw-web-tl svg { animation: hw-web-sway 7s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes hw-web-sway { to { transform: rotate(1.6deg) scale(1.015); } }

/* dangling spiders */
.hw-spider-lane { position: absolute; top: var(--header, 64px); left: 0; right: var(--chat, 0px); bottom: 0; overflow: hidden; }
.hw-spider { position: absolute; top: 0; left: 0; width: 42px; margin-left: -21px; will-change: transform; }
.hw-thread { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 100vh; margin-left: -.5px; background: linear-gradient(transparent, rgba(236,226,255,.55)); }
.hw-spider-body { display: block; width: 42px; height: 42px; filter: drop-shadow(0 0 3px rgba(236,226,255,.55)) drop-shadow(0 0 10px rgba(180,108,255,.5)); transform-origin: 50% 0; }
.hw-tile-spider .hw-spider-body { animation: hw-wiggle 1.1s ease-in-out infinite alternate; }
.hw-legs-l, .hw-legs-r { transform-box: fill-box; }
.hw-legs-l { transform-origin: 100% 40%; } .hw-legs-r { transform-origin: 0 40%; }
.hw-spider.hw-busy .hw-legs-l { animation: hw-legs .16s ease-in-out infinite alternate; }
.hw-spider.hw-busy .hw-legs-r { animation: hw-legs .16s ease-in-out -.08s infinite alternate-reverse; }
@keyframes hw-legs { from { transform: rotate(-7deg) scaleY(.96); } to { transform: rotate(6deg) scaleY(1.04); } }
@keyframes hw-drop {
  0%, 100% { transform: translateY(-60px); }
  18% { transform: translateY(calc(var(--hw-drop) * .9)); }
  24% { transform: translateY(calc(var(--hw-drop) * .82)); }
  30%, 62% { transform: translateY(var(--hw-drop)); }
  70% { transform: translateY(calc(var(--hw-drop) * .7)); }
  76% { transform: translateY(calc(var(--hw-drop) * .78)); }
}
@keyframes hw-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* bats */
.hw-bat { position: absolute; left: 0; width: 76px; height: 38px; animation: hw-fly var(--hw-dur, 8s) linear forwards; filter: drop-shadow(0 0 2px rgba(255,170,90,.7)) drop-shadow(0 0 12px rgba(255,120,20,.45)); }
.hw-bat svg { animation: hw-bob .5s ease-in-out infinite alternate; }
.hw-bat.hw-flip svg { transform: scaleX(-1); }
.hw-wing { transform-box: fill-box; animation: hw-flap .16s ease-in-out infinite alternate; }
.hw-wing-l { transform-origin: 100% 60%; }
.hw-wing-r { transform-origin: 0 60%; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
@keyframes hw-bob { to { translate: 0 6px; } }
@keyframes hw-fly {
  0%   { transform: translate(var(--hw-from), 0) scale(var(--hw-scale, 1)); }
  25%  { transform: translate(calc(var(--hw-from) * .75 + var(--hw-to) * .25), calc(var(--hw-rise) * .5 - 4vh)) scale(var(--hw-scale, 1)); }
  50%  { transform: translate(calc(var(--hw-from) * .5 + var(--hw-to) * .5), var(--hw-rise)) scale(var(--hw-scale, 1)); }
  75%  { transform: translate(calc(var(--hw-from) * .25 + var(--hw-to) * .75), calc(var(--hw-rise) * .6 + 5vh)) scale(var(--hw-scale, 1)); }
  100% { transform: translate(var(--hw-to), calc(var(--hw-rise) * .2)) scale(var(--hw-scale, 1)); }
}

/* ghosts */
.hw-ghost { position: absolute; bottom: -80px; width: 44px; height: 55px; opacity: 0; animation: hw-ghost var(--hw-dur, 11s) ease-in-out forwards; filter: drop-shadow(0 0 12px rgba(200,170,255,.55)); }
.hw-ghost svg { animation: hw-ghost-sway 2.4s ease-in-out infinite alternate; }
@keyframes hw-ghost { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .75; } 80% { opacity: .55; } 100% { opacity: 0; transform: translateY(-75vh); } }
@keyframes hw-ghost-sway { from { transform: translateX(-14px) rotate(-6deg); } to { transform: translateX(14px) rotate(6deg); } }

/* pumpkin peeking in from the edge */
.hw-peek { position: absolute; width: 54px; height: 48px; animation: hw-peek 4.2s ease-in-out forwards; filter: drop-shadow(0 0 10px rgba(255,140,26,.6)); }
.hw-peek-l { left: calc(var(--sidebar-collapsed, 72px) - 54px); --hw-peek-x: 46px; --hw-peek-r: 18deg; }
.hw-peek-r { right: -54px; --hw-peek-x: -46px; --hw-peek-r: -18deg; }
body:has(.app-shell:not(.chat-collapsed)) #cbets-halloween-fx .hw-peek-r { display: none; }
@keyframes hw-peek { 0%, 100% { transform: translateX(0) rotate(0); } 20%, 75% { transform: translateX(var(--hw-peek-x)) rotate(var(--hw-peek-r)); } 45% { transform: translateX(var(--hw-peek-x)) rotate(calc(var(--hw-peek-r) * -.4)); } }

/* embers */
.hw-ember { position: absolute; bottom: -10px; width: var(--hw-size, 3px); height: var(--hw-size, 3px); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255,140,26,.7); opacity: 0; animation: hw-ember var(--hw-dur, 12s) linear var(--hw-delay, 0s) infinite; }
@keyframes hw-ember { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--hw-drift, 0), -85vh); } }

/* fog */
.hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; opacity: .55; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
.hw-fog i { position: absolute; inset: 0 -50% 0 -50%; background: radial-gradient(40% 60% at 25% 80%, rgba(180,140,230,.32), transparent 70%), radial-gradient(35% 55% at 70% 90%, rgba(150,110,210,.28), transparent 70%); animation: hw-fog 38s linear infinite; }
.hw-fog i + i { animation-duration: 55s; animation-direction: reverse; opacity: .7; }
@keyframes hw-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* game pages: keep the play area clear */
html.hw-game .hw-fog, html.hw-game .hw-ghost, html.hw-game .hw-peek { display: none; }
html.hw-game .hw-ember { opacity: .5; }

/* game tiles: corner cobweb + a spider that drops on hover */
.game-tile .hw-tile-web { position: absolute; top: 2px; right: 2px; z-index: 3; width: 54px; height: 54px; color: rgba(236,226,255,.42); transform: scaleX(-1); pointer-events: none; }
.game-tile .hw-tile-spider { position: absolute; top: 0; left: 22%; z-index: 4; width: 26px; height: 26px; transform: translateY(-40px); opacity: 0; transition: transform .55s cubic-bezier(.3,1.6,.5,1), opacity .2s; pointer-events: none; }
.game-tile .hw-tile-spider .hw-thread { height: 90px; }
.game-tile .hw-tile-spider .hw-spider-body { width: 26px; height: 26px; filter: drop-shadow(0 0 3px rgba(236,226,255,.7)); }
.game-tile:hover .hw-tile-spider, .game-tile:focus-visible .hw-tile-spider { transform: translateY(46px); opacity: 1; }

/* hero corner web + flickering title */
.keep-hero .hw-hero-web { position: absolute; top: 0; left: 0; z-index: 3; width: 130px; height: 130px; color: rgba(236,226,255,.3); pointer-events: none; }
.keep-hero h1 strong { animation: hw-flicker 5s infinite; }
@keyframes hw-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 14px rgba(255,140,26,.75), 0 0 34px rgba(255,90,0,.45); }
  20%, 24%, 55% { text-shadow: none; }
}

@media (max-width: 760px) {
  .hw-web-tl { left: -1px; }
  .game-tile .hw-tile-web { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .keep-hero h1 strong, .hw-web-tl svg { animation: none; }
  .game-tile .hw-tile-spider { display: none; }
}

/* Blood Moon tease: the cubit currency icon turns blood red (art: Higgsfield) */
img.currency-icon { content: url("/assets/seasonal/halloween/cubit-blood-128.png"); object-fit: contain; filter: drop-shadow(0 0 3px rgba(255,0,30,.45)); }
img.tile-cubit { content: url("/assets/seasonal/halloween/cubit-blood-256.png"); object-fit: contain; }

/* Halloween: the dark ("deep") cases get the Blood Moon chest, untinted so it stays blood red */
.case-chest-deep .case-chest-exact { content: url("/assets/seasonal/halloween/chest-bloodmoon.webp"); filter: brightness(1.35) contrast(1.08) drop-shadow(0 0 10px rgba(255, 20, 40, .55)) !important; }