/* CHICKEN RUST SERVER - Halloween theme (Admin > Settings > Theme).
   Loaded on top of app.css. Night-purple ground, pumpkin orange accent, a moon, slow bats, low fog and a
   graveyard skyline. Motion is slow and transform-only; the reduced-motion rule in app.css switches it all off. */

html[data-theme="halloween"] {
  --bg: #0a0610;
  --panel: rgba(28, 16, 36, 0.72);
  --panel-solid: #1a1022;
  --raise: rgba(255, 190, 140, 0.06);
  --field: rgba(8, 4, 12, 0.6);
  --line: rgba(255, 170, 90, 0.13);
  --line-strong: rgba(255, 170, 90, 0.28);
  --text: #f7efe6;
  --muted: #bcaabd;
  --accent: #ff7a18;
  --accent-deep: #c2410c;
  --accent-soft: rgba(255, 122, 24, 0.16);
  --accent-glow: rgba(255, 122, 24, 0.46);
  --ok: #9bff6a;
  --hw-purple: #8b5cf6;
  --hw-moon: #f6dfa4;
}

/* ---------- sky ---------- */
html[data-theme="halloween"] .bg {
  background:
    radial-gradient(900px 520px at 86% 6%, rgba(139, 92, 246, 0.26), transparent 62%),
    radial-gradient(1100px 460px at 50% 112%, rgba(255, 122, 24, 0.24), transparent 66%),
    linear-gradient(180deg, #0a0610 0%, #150b20 55%, #0a0610 100%);
}
/* stars instead of the grid */
html[data-theme="halloween"] .bg::after {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 9%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 23%, rgba(255, 235, 200, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 69% 28%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 41%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 93% 37%, rgba(255, 235, 200, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 46%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 49%, rgba(255, 255, 255, 0.35) 50%, transparent 51%);
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  animation: hw-twinkle 7s ease-in-out infinite alternate;
}
html[data-theme="halloween"] .bg-glow-a { background: radial-gradient(circle, rgba(139, 92, 246, 0.42) 0%, transparent 62%); }
html[data-theme="halloween"] .bg-glow-b { background: radial-gradient(circle, rgba(255, 122, 24, 0.4) 0%, transparent 62%); opacity: 0.3; }
html[data-theme="halloween"] .bg-glow-c { background: radial-gradient(circle, rgba(155, 255, 106, 0.22) 0%, transparent 60%); opacity: 0.22; }
/* embers become will-o'-the-wisps */
html[data-theme="halloween"] .embers i { background: #ffb347; box-shadow: 0 0 10px 3px rgba(255, 122, 24, 0.55); }
html[data-theme="halloween"] .embers i:nth-child(even) { background: #c9ff9a; box-shadow: 0 0 10px 3px rgba(155, 255, 106, 0.45); }

.hw { display: none; }
html[data-theme="halloween"] .hw { display: block; }
.hw-moon { position: absolute; top: 9vh; right: 7vw; width: clamp(84px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(0, 0, 0, 0.09) 0 9%, transparent 10%),
    radial-gradient(circle at 36% 62%, rgba(0, 0, 0, 0.08) 0 13%, transparent 14%),
    radial-gradient(circle at 70% 68%, rgba(0, 0, 0, 0.06) 0 7%, transparent 8%),
    radial-gradient(circle at 36% 34%, #fff7dc 0%, var(--hw-moon) 55%, #c9a35c 100%);
  box-shadow: 0 0 70px 22px rgba(246, 223, 164, 0.22), 0 0 160px 60px rgba(139, 92, 246, 0.16);
  opacity: 0.92; animation: hw-moon 14s ease-in-out infinite; }
.hw-web { position: absolute; top: 0; left: 0; width: clamp(140px, 17vw, 250px); height: auto; opacity: 0.55; }
.hw-web path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.hw-bat { position: absolute; left: 0; width: 46px; height: 23px; fill: #040208; opacity: 0.9; will-change: transform; }
.hw-bat path { transform-origin: 50% 40%; animation: hw-flap 0.7s ease-in-out infinite alternate; }
.hw-bat-1 { top: 14vh; animation: hw-fly-a 34s linear infinite; animation-delay: -4s; }
.hw-bat-2 { top: 24vh; width: 34px; height: 17px; animation: hw-fly-b 46s linear infinite; animation-delay: -21s; }
.hw-bat-3 { top: 8vh; width: 28px; height: 14px; animation: hw-fly-a 58s linear infinite; animation-delay: -37s; opacity: 0.7; }
.hw-bat-4 { top: 33vh; width: 40px; height: 20px; animation: hw-fly-b 40s linear infinite; animation-delay: -12s; }
.hw-fog { position: absolute; bottom: 0; left: -30%; width: 160%; height: 42vh;
  background:
    radial-gradient(ellipse 45% 60% at 25% 100%, rgba(170, 130, 215, 0.2), transparent 70%),
    radial-gradient(ellipse 40% 55% at 62% 100%, rgba(255, 150, 70, 0.13), transparent 70%),
    radial-gradient(ellipse 35% 50% at 88% 100%, rgba(170, 130, 215, 0.16), transparent 70%);
  animation: hw-fog 50s ease-in-out infinite alternate; will-change: transform; }
.hw-ground { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(90px, 13vw, 170px); }
.hw-ground .hw-dark { fill: #050309; }
.hw-ground .hw-line { fill: none; stroke: #050309; stroke-width: 5; stroke-linecap: round; }
.hw-ground .hw-pumpkin { fill: #ff7a18; filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.8)); }
.hw-ground .hw-face { fill: #ffe08a; animation: hw-candle 4.5s ease-in-out infinite alternate; }

@keyframes hw-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes hw-moon { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
@keyframes hw-fly-a { from { transform: translate3d(-12vw, 0, 0); } 50% { transform: translate3d(50vw, -6vh, 0); } to { transform: translate3d(112vw, 3vh, 0); } }
@keyframes hw-fly-b { from { transform: translate3d(112vw, 0, 0) scaleX(-1); } 50% { transform: translate3d(48vw, 5vh, 0) scaleX(-1); } to { transform: translate3d(-12vw, -4vh, 0) scaleX(-1); } }
@keyframes hw-fog { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, 0, 0); } }
@keyframes hw-candle { from { opacity: 0.75; } to { opacity: 1; } }

/* ---------- chrome ---------- */
html[data-theme="halloween"] .top { background: rgba(10, 6, 16, 0.66); border-bottom-color: rgba(255, 122, 24, 0.2); }
html[data-theme="halloween"] .top.is-scrolled { background: rgba(10, 6, 16, 0.9); box-shadow: 0 10px 34px -18px rgba(255, 122, 24, 0.35); }
html[data-theme="halloween"] .brand span { text-shadow: 0 0 18px rgba(255, 122, 24, 0.45); }
html[data-theme="halloween"] .brand span::after { content: " \1F383"; text-shadow: none; }
html[data-theme="halloween"] .statusbar { background: rgba(255, 122, 24, 0.035); border-bottom-color: rgba(255, 122, 24, 0.14); }
html[data-theme="halloween"] .dot-on { box-shadow: 0 0 12px rgba(155, 255, 106, 0.8); }
html[data-theme="halloween"] footer { background: rgba(5, 3, 9, 0.82); border-top-color: rgba(255, 122, 24, 0.18); position: relative; }

/* ---------- type ---------- */
html[data-theme="halloween"] h1, html[data-theme="halloween"] h2 { text-shadow: 0 0 26px rgba(255, 122, 24, 0.22); }
html[data-theme="halloween"] .hero h1 {
  background: linear-gradient(180deg, #fff0d6 0%, #ffb056 48%, #ff6a00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(255, 122, 24, 0.4));
}
html[data-theme="halloween"] .strip-day { color: #ffd9a8; text-shadow: 0 0 24px rgba(255, 122, 24, 0.35); }
html[data-theme="halloween"] a { text-decoration-color: rgba(255, 122, 24, 0.7); }

/* ---------- surfaces ---------- */
html[data-theme="halloween"] .panel, html[data-theme="halloween"] .live, html[data-theme="halloween"] .figures, html[data-theme="halloween"] .flash {
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.07), 0 0 0 1px rgba(139, 92, 246, 0.07), 0 22px 50px -30px #000;
}
html[data-theme="halloween"] .panel:hover { border-color: rgba(255, 122, 24, 0.34); box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.08), 0 0 34px -14px rgba(255, 122, 24, 0.4), 0 22px 50px -30px #000; }
html[data-theme="halloween"] .figures { background: rgba(255, 150, 70, 0.14); }
html[data-theme="halloween"] .figures > div { background: rgba(22, 12, 30, 0.9); }
html[data-theme="halloween"] .figures > div:hover { background: rgba(38, 20, 46, 0.94); }
html[data-theme="halloween"] .figures dd { color: #ffd9a8; }
html[data-theme="halloween"] .product { background: rgba(24, 13, 32, 0.88); }
html[data-theme="halloween"] .product-price { color: #ffb056; }
html[data-theme="halloween"] tbody tr:hover { background: rgba(255, 122, 24, 0.06); }
html[data-theme="halloween"] .hero-halo { background: radial-gradient(circle, rgba(255, 122, 24, 0.5) 0%, rgba(139, 92, 246, 0.22) 42%, transparent 70%); }
html[data-theme="halloween"] .hero-halo::after { border-color: rgba(255, 176, 86, 0.3); box-shadow: 0 0 40px rgba(139, 92, 246, 0.25); }
html[data-theme="halloween"] .hero-logo img { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 34px rgba(255, 122, 24, 0.55)); }

/* ---------- controls ---------- */
html[data-theme="halloween"] .btn-primary { background: linear-gradient(180deg, #ffa24a 0%, #f06a0c 100%); color: #1c0e05;
  box-shadow: 0 8px 26px -10px rgba(255, 122, 24, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html[data-theme="halloween"] .btn-primary:hover { background: linear-gradient(180deg, #ffb469 0%, #ff7a18 100%); color: #1c0e05;
  box-shadow: 0 12px 34px -8px rgba(255, 122, 24, 0.85), 0 0 0 1px rgba(255, 176, 86, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
html[data-theme="halloween"] .btn:hover { border-color: rgba(255, 176, 86, 0.55); }
html[data-theme="halloween"] .tabs a[aria-current="true"], html[data-theme="halloween"] .lang a[aria-current="true"] { color: #ffe3c2; }
html[data-theme="halloween"] .meter span, html[data-theme="halloween"] .strip-fill { background: linear-gradient(90deg, var(--hw-purple), #ff7a18); }
html[data-theme="halloween"] .chart-bar { background: linear-gradient(180deg, #ff9a3c, #7c3aed); }
html[data-theme="halloween"] .status-pill.is-on { border-color: rgba(155, 255, 106, 0.45); background: rgba(155, 255, 106, 0.08); color: #dcffc7; }
html[data-theme="halloween"] .badge-completed, html[data-theme="halloween"] .badge-active, html[data-theme="halloween"] .badge-online {
  border-color: rgba(155, 255, 106, 0.5); background: rgba(155, 255, 106, 0.08); }
html[data-theme="halloween"] .admin-nav a[aria-current="page"] { color: #ffe3c2; }

@media (max-width: 860px) {
  .hw-bat-3, .hw-bat-4, .hw-web { display: none !important; }
  .hw-moon { top: 15vh; right: 4vw; opacity: 0.5; }
}

/* ---------- more motion: ghosts, a spider on its thread, falling leaves ---------- */
.hw-ghost { position: absolute; width: clamp(38px, 4.4vw, 64px); height: auto; opacity: 0.55; will-change: transform; filter: drop-shadow(0 0 14px rgba(190, 170, 255, 0.35)); }
.hw-ghost .g-body { fill: rgba(236, 230, 255, 0.34); }
.hw-ghost .g-eye { fill: rgba(10, 6, 16, 0.75); }
.hw-ghost-1 { left: 6vw; top: 46vh; animation: hw-ghost-a 26s ease-in-out infinite; }
.hw-ghost-2 { right: 9vw; top: 58vh; opacity: 0.4; animation: hw-ghost-b 34s ease-in-out infinite; animation-delay: -9s; }
.hw-spider { position: absolute; top: 0; right: 22vw; width: 26px; display: flex; flex-direction: column; align-items: center;
  transform: translate3d(0, -100%, 0); animation: hw-spider 22s ease-in-out infinite; animation-delay: 3s; will-change: transform; }
.hw-spider::before { content: ""; width: 1px; height: 34vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35)); }
.hw-spider svg { width: 26px; height: 26px; fill: #05030a; stroke: #05030a; stroke-width: 2; stroke-linecap: round; }
.hw-leaf { position: absolute; top: -6vh; width: 14px; height: 9px; border-radius: 80% 10% 80% 10%; background: linear-gradient(135deg, #ff9a3c, #b4430a);
  opacity: 0.8; will-change: transform; animation: hw-leaf 18s linear infinite; }
.hw-leaf:nth-of-type(1) { left: 9%; animation-duration: 19s; animation-delay: -2s; }
.hw-leaf:nth-of-type(2) { left: 27%; animation-duration: 25s; animation-delay: -13s; background: linear-gradient(135deg, #e0a13a, #8a4a12); }
.hw-leaf:nth-of-type(3) { left: 46%; animation-duration: 21s; animation-delay: -7s; width: 11px; height: 7px; }
.hw-leaf:nth-of-type(4) { left: 64%; animation-duration: 27s; animation-delay: -18s; background: linear-gradient(135deg, #d9632a, #6e2a0c); }
.hw-leaf:nth-of-type(5) { left: 83%; animation-duration: 23s; animation-delay: -10s; }
@keyframes hw-ghost-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); } 50% { transform: translate3d(5vw, -7vh, 0) rotate(4deg); } }
@keyframes hw-ghost-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); } 50% { transform: translate3d(-6vw, -9vh, 0) rotate(-4deg); } }
@keyframes hw-spider { 0%, 12% { transform: translate3d(0, -100%, 0); } 38%, 62% { transform: translate3d(0, 0, 0); } 88%, 100% { transform: translate3d(0, -100%, 0); } }
@keyframes hw-leaf {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(4vw, 28vh, 0) rotate(120deg); }
  50% { transform: translate3d(-3vw, 56vh, 0) rotate(240deg); }
  75% { transform: translate3d(5vw, 84vh, 0) rotate(380deg); }
  100% { transform: translate3d(0, 112vh, 0) rotate(520deg); }
}

/* interface motion */
html[data-theme="halloween"] .brand img { animation: hw-sway 6s ease-in-out infinite; transform-origin: 50% 90%; }
html[data-theme="halloween"] .btn-primary { animation: hw-ember 3.6s ease-in-out infinite; }
html[data-theme="halloween"] .nav > a:hover { text-shadow: 0 0 14px rgba(255, 122, 24, 0.7); }
html[data-theme="halloween"] .product:hover { transform: translateY(-6px) rotate(-0.4deg); }
html[data-theme="halloween"] .figures > div { transition: background 0.2s var(--ease), transform 0.25s var(--ease); }
html[data-theme="halloween"] .figures > div:hover { transform: translateY(-2px); }
html[data-theme="halloween"] .rank-top { animation: hw-candle 2.8s ease-in-out infinite alternate; }
html[data-theme="halloween"] body:not(.is-admin) .main { animation: hw-page 0.5s var(--ease) both; }
@keyframes hw-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hw-ember {
  0%, 100% { box-shadow: 0 8px 26px -10px rgba(255, 122, 24, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 8px 34px -6px rgba(255, 122, 24, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
@keyframes hw-page { from { opacity: 0; } to { opacity: 1; } }

/* ---------- music button ---------- */
.music-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 170, 90, 0.4); background: rgba(20, 11, 28, 0.82);
  color: var(--text); font: 600 0.9rem var(--body); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -12px #000, 0 0 24px -8px rgba(255, 122, 24, 0.5);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.music-toggle:hover { transform: translateY(-2px); border-color: rgba(255, 176, 86, 0.8); }
.music-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.music-bars i { width: 3px; height: 5px; border-radius: 2px; background: var(--accent); }
.music-toggle.is-playing { border-color: var(--accent); box-shadow: 0 10px 30px -12px #000, 0 0 30px -6px rgba(255, 122, 24, 0.8); }
.music-toggle.is-playing .music-bars i { animation: hw-bars 0.9s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-bars i:nth-child(2) { animation-delay: -0.3s; }
.music-toggle.is-playing .music-bars i:nth-child(3) { animation-delay: -0.6s; }
.music-toggle.is-playing .music-bars i:nth-child(4) { animation-delay: -0.15s; }
@keyframes hw-bars { from { height: 4px; } to { height: 16px; } }

@media (max-width: 860px) {
  .hw-ghost-2, .hw-spider, .hw-leaf:nth-of-type(4), .hw-leaf:nth-of-type(5) { display: none !important; }
  .music-toggle { right: 12px; bottom: 12px; padding: 9px 12px; }
  .music-label { display: none; }
}