/* ============================================
   HashSlot — Halloween seasonal theme
   Inert until the admin panel switches it on: /site-theme.js then sets
   data-theme="halloween" on <html> before the first paint, and open game
   pages follow live over Socket.io. Every rule is scoped to that attribute.
   Palette: pumpkin orange signal, amber ember secondary, warm night base.
   ============================================ */

html[data-theme='halloween'],
html[data-theme='halloween'][data-bg] {
  --hw-orange: 255, 117, 24;
  --hw-ember: 255, 150, 50;

  --bg-primary: #0b0704;
  --bg-secondary: rgba(20, 12, 6, 0.92);
  --bg-card: rgba(20, 12, 6, 0.92);
  --bg-card-solid: #140c06;
  --glass-border: rgba(255, 170, 110, 0.1);

  --accent: #ff7518;
  --accent-light: #ffa04d;
  --accent-dark: #c75200;
  --accent-glow: rgba(var(--hw-orange), 0.24);
  --accent-glow-strong: rgba(var(--hw-orange), 0.6);
  --cyber-cyan: #ffa04d;
  --cyber-cyan-glow: rgba(var(--hw-ember), 0.4);

  --gold: #ff7518;
  --gold-glow: rgba(var(--hw-orange), 0.4);
  --green: #ff7518;
  --green-glow: rgba(var(--hw-orange), 0.4);
  --cyan: #ffa04d;

  --text-primary: #f4e9dc;
  --text-secondary: #b9a291;
  --text-muted: rgba(244, 233, 220, 0.55);
  --text-dim: rgba(244, 233, 220, 0.34);

  --line-cyan: rgba(var(--hw-ember), 0.3);
  --line-green: rgba(var(--hw-orange), 0.38);
  --tick: rgba(var(--hw-orange), 0.5);

  /* Night sky over the usual pattern: an ember haze above, a low pumpkin
     glow below. Forced dark even for players who picked the white backdrop. */
  --page-bg-color: #0b0704;
  --page-bg-image: url('img/bg-black.png?v=1');
  --page-bg-veil:
    radial-gradient(ellipse 90% 55% at 50% 115%, rgba(var(--hw-orange), 0.28), transparent 70%),
    radial-gradient(ellipse 70% 50% at 15% -10%, rgba(var(--hw-ember), 0.2), transparent 70%),
    linear-gradient(180deg, rgba(12, 6, 2, 0.5), rgba(12, 6, 2, 0.68));
  --page-vignette: radial-gradient(ellipse at 50% 30%, transparent 50%, rgba(6, 3, 1, 0.62) 100%);

  --float-fill: rgba(14, 8, 4, 0.5);
  --float-fill-soft: rgba(255, 255, 255, 0.02);
  --float-edge: var(--hairline);
  --float-text: var(--text-dim);
  --float-shadow: none;
}

/* ---------- Night sky: moon, bats, cobweb ---------- */
/* One fixed, click-through layer behind the panels (style.css leaves
   body::before empty). Bats drift slowly; reduced motion keeps them still. */
html[data-theme='halloween'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%23120803' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%231f1006' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%231f1006' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 230' fill='none' stroke='%23f4e9dc' stroke-opacity='.32' stroke-width='1.1'%3E%3Cpath d='M0 0L230 0 M0 0L219 71 M0 0L163 163 M0 0L71 219 M0 0L0 230 M38 0Q33 5 36 12Q28 17 27 27Q17 28 12 36Q5 33 0 38 M78 0Q67 11 74 24Q57 35 55 55Q35 57 24 74Q11 67 0 78 M122 0Q105 17 116 38Q89 55 86 86Q55 89 38 116Q17 105 0 122 M170 0Q146 23 162 53Q124 76 120 120Q76 124 53 162Q23 146 0 170'/%3E%3C/svg%3E"),
    radial-gradient(circle at calc(100% - 120px) 110px, #fff1cf 0 38px, rgba(255, 206, 140, 0.38) 40px, rgba(var(--hw-orange), 0.12) 90px, transparent 170px);
  background-repeat: no-repeat;
  background-size: 64px 30px, 46px 22px, 34px 16px, 230px 230px, 100% 100%;
  background-position:
    calc(100% - 128px) 96px,
    calc(100% - 230px) 150px,
    calc(100% - 60px) 190px,
    0 0,
    0 0;
  animation: hwBats 14s ease-in-out infinite alternate;
}

@keyframes hwBats {
  0% {
    background-position: calc(100% - 128px) 96px, calc(100% - 230px) 150px, calc(100% - 60px) 190px, 0 0, 0 0;
  }
  50% {
    background-position: calc(100% - 170px) 78px, calc(100% - 190px) 168px, calc(100% - 92px) 172px, 0 0, 0 0;
  }
  100% {
    background-position: calc(100% - 110px) 112px, calc(100% - 262px) 132px, calc(100% - 40px) 206px, 0 0, 0 0;
  }
}

@media (max-width: 640px) {
  html[data-theme='halloween'] body::before {
    background-size: 44px 21px, 32px 15px, 24px 11px, 150px 150px, 100% 100%;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%23120803' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%231f1006' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath fill='%231f1006' d='M32 9c-1.6 0-2.6 1.6-2.6 1.6L27.6 7l-.8 3.6C21 5 12.6 4 2 7.6c5.6 1.8 8.6 5.8 8.6 10.6 2.8-2.8 6.8-2.8 9.6 0 2-2.8 5.8-3.8 8.6-1 .8-1.8 1.8-2.8 3.2-2.8s2.4 1 3.2 2.8c2.8-2.8 6.6-1.8 8.6 1 2.8-2.8 6.8-2.8 9.6 0 0-4.8 3-8.8 8.6-10.6C51.4 4 43 5 37.2 10.6L36.4 7l-1.8 3.6S33.6 9 32 9z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 230' fill='none' stroke='%23f4e9dc' stroke-opacity='.32' stroke-width='1.1'%3E%3Cpath d='M0 0L230 0 M0 0L219 71 M0 0L163 163 M0 0L71 219 M0 0L0 230 M38 0Q33 5 36 12Q28 17 27 27Q17 28 12 36Q5 33 0 38 M78 0Q67 11 74 24Q57 35 55 55Q35 57 24 74Q11 67 0 78 M122 0Q105 17 116 38Q89 55 86 86Q55 89 38 116Q17 105 0 122 M170 0Q146 23 162 53Q124 76 120 120Q76 124 53 162Q23 146 0 170'/%3E%3C/svg%3E"),
      radial-gradient(circle at calc(100% - 56px) 64px, #fff1cf 0 22px, rgba(255, 206, 140, 0.34) 24px, rgba(var(--hw-orange), 0.1) 52px, transparent 100px);
    animation: none;
    background-position: calc(100% - 62px) 52px, calc(100% - 118px) 84px, calc(100% - 26px) 104px, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='halloween'] body::before { animation: none; }
}

/* ---------- Brand ---------- */
/* A small jack-o'-lantern after the wordmark (style.css leaves ::after empty). */
html[data-theme='halloween'] .logo-text::after {
  content: '';
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.4em;
  vertical-align: -0.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%235a8f29' d='M15 7c.4-2.6 2.2-4.4 5-4.6-.2 1-1.6 1.4-2.4 2.6-.6.8-.6 1.4-.6 2z'/%3E%3Cellipse cx='10' cy='19' rx='8' ry='10' fill='%23d9560b'/%3E%3Cellipse cx='22' cy='19' rx='8' ry='10' fill='%23d9560b'/%3E%3Cellipse cx='16' cy='19' rx='7.5' ry='11' fill='%23ff7518'/%3E%3Cpath fill='%23240b00' d='M8.5 16.5l3-3.5 2.2 3.5zM18.3 16.5l2.2-3.5 3 3.5zM15 19.5l1-1.6 1 1.6zM8.5 22c2.2 3.2 4.8 4.4 7.5 4.4s5.3-1.2 7.5-4.4l-2 .8-1-1.2-1.8 1.8-1.4-1.6-1.3 1.6-1.3-1.6-1.4 1.6-1.8-1.8-1 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hard-coded green tints in style.css, re-hued ---------- */
html[data-theme='halloween'] ::selection { background: var(--accent); color: #1c0a00; }

html[data-theme='halloween'] .btn-buy,
html[data-theme='halloween'] .btn-pay,
html[data-theme='halloween'] .welcome-action,
html[data-theme='halloween'] .ach-filter-btn.active,
html[data-theme='halloween'] .ach-status-done,
html[data-theme='halloween'] .chat-send-btn:hover { color: #1c0a00; }

html[data-theme='halloween'] .btn-buy:hover,
html[data-theme='halloween'] .btn-pay:hover,
html[data-theme='halloween'] .welcome-action:hover,
html[data-theme='halloween'] .welcome-action:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

html[data-theme='halloween'] .hnav-btn:hover,
html[data-theme='halloween'] .user-pill:focus-visible,
html[data-theme='halloween'] .module-status,
html[data-theme='halloween'] .prize-sort-btn.active,
html[data-theme='halloween'] .faq-question[aria-expanded="true"],
html[data-theme='halloween'] .key-fragments-meter,
html[data-theme='halloween'] .ach-card.ach-unlocked,
html[data-theme='halloween'] .profile-avatar-option.default-avatar,
html[data-theme='halloween'] .profile-cos-item.equipped,
html[data-theme='halloween'] .mission-item.complete,
html[data-theme='halloween'] .shop-item.equipped,
html[data-theme='halloween'] .chat-send-btn {
  background: rgba(var(--hw-orange), 0.08);
}

html[data-theme='halloween'] .bg-swatch.active { box-shadow: 0 0 0 2px rgba(var(--hw-orange), 0.3); }

html[data-theme='halloween'] .hashkey-gain {
  text-shadow: 0 0 10px rgba(var(--hw-orange), 0.85), 0 1px 2px rgba(0, 0, 0, 0.8);
}

html[data-theme='halloween'] .key-fragments-card::after {
  background: radial-gradient(circle, rgba(var(--hw-orange), 0.16), transparent 66%);
}

html[data-theme='halloween'] .key-fragments-guide path { stroke: rgba(var(--hw-orange), 0.24); }

html[data-theme='halloween'] .key-fragment-slot.collected img {
  filter: drop-shadow(0 0 8px rgba(var(--hw-orange), 0.6)) drop-shadow(0 0 18px rgba(var(--hw-orange), 0.24));
}

html[data-theme='halloween'] .reel-highlight {
  border-color: rgba(var(--hw-orange), 0.38);
  background: rgba(var(--hw-orange), 0.05);
  box-shadow: 0 0 24px rgba(var(--hw-ember), 0.12) inset;
}

html[data-theme='halloween'] .result-display.won {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--hw-orange), 0.5);
}

html[data-theme='halloween'] .leaderboard-row:nth-child(3) .leaderboard-rank {
  color: #1c0a00;
  background: linear-gradient(135deg, #ff7518 0%, #c75200 100%);
  border-color: #ff7518;
  box-shadow: 0 0 8px rgba(var(--hw-orange), 0.3);
}

html[data-theme='halloween'] .fair-value { border-left-color: rgba(var(--hw-orange), 0.45); }

html[data-theme='halloween'] .fair-input:focus,
html[data-theme='halloween'] .form-input:focus { box-shadow: 0 0 0 3px rgba(var(--hw-orange), 0.12); }

html[data-theme='halloween'] .verify-result.pass {
  background: rgba(var(--hw-orange), 0.08);
  border-color: rgba(var(--hw-orange), 0.32);
}

html[data-theme='halloween'] .chat-msg.mine {
  border-color: rgba(var(--hw-orange), 0.3);
  background: rgba(var(--hw-orange), 0.07);
}

html[data-theme='halloween'] .chat-msg-reply-btn:hover { background: rgba(var(--hw-orange), 0.12); }

html[data-theme='halloween'] .featured-achievement {
  border-color: rgba(var(--hw-orange), 0.22);
  background: linear-gradient(120deg, rgba(var(--hw-orange), 0.06), rgba(var(--hw-ember), 0.03));
}

/* Panels pick up a faint ember rim so the page reads as one night scene. */
html[data-theme='halloween'] .card {
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 140, 0.05),
    0 0 0 1px rgba(var(--hw-ember), 0.08),
    0 14px 36px rgba(0, 0, 0, 0.45);
}

/* ---------- Floating widgets and page-specific accents ---------- */
/* The trophy and chat launchers paint their icons with a fill attribute;
   the CSS fill property outranks it. */
html[data-theme='halloween'] .achievements-toggle-btn svg path,
html[data-theme='halloween'] .chat-toggle-btn svg path { fill: var(--accent); }

html[data-theme='halloween'] .achievements-toggle-btn,
html[data-theme='halloween'] .chat-toggle-btn {
  background-image: linear-gradient(#24140a, #120a04);
}

html[data-theme='halloween'] .hw-promo-cta { background: rgba(var(--hw-orange), 0.12); }

/* HashWare page */
html[data-theme='halloween'] .hw-buybox {
  box-shadow: 0 0 46px rgba(var(--hw-orange), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme='halloween'] .hw-price-amount { text-shadow: 0 0 22px rgba(var(--hw-orange), 0.45); }
html[data-theme='halloween'] .hw-btn {
  background: linear-gradient(180deg, rgba(var(--hw-orange), 0.24), rgba(var(--hw-orange), 0.1));
}
html[data-theme='halloween'] .hw-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--hw-orange), 0.36), rgba(var(--hw-orange), 0.16));
  box-shadow: 0 0 30px rgba(var(--hw-orange), 0.32);
}

/* Hub, Throne, payment success, login */
html[data-theme='halloween'] .hub-app:hover {
  border-color: rgba(var(--hw-orange), 0.4);
  box-shadow: 0 0 20px rgba(var(--hw-orange), 0.1);
}
html[data-theme='halloween'] .throne-visit { background: rgba(var(--hw-orange), 0.08); }
html[data-theme='halloween'] .throne-visit:hover { background: rgba(var(--hw-orange), 0.18); }
html[data-theme='halloween'] .throne-card .throne-period.active {
  background: rgba(var(--hw-orange), 0.06);
  border-color: rgba(var(--hw-orange), 0.18);
}
html[data-theme='halloween'] .throne-month-arrow:hover:not(:disabled) { background: rgba(var(--hw-orange), 0.06); }
html[data-theme='halloween'] .throne-month-picker {
  border-color: rgba(var(--hw-orange), 0.26);
  background: #170d06;
}
html[data-theme='halloween'] .throne-month-option:hover:not(:disabled) { background: rgba(var(--hw-orange), 0.07); }
html[data-theme='halloween'] .throne-month-option.active { background: rgba(var(--hw-orange), 0.1); }
html[data-theme='halloween'] .success-card {
  border-color: rgba(var(--hw-orange), 0.18);
  border-top-color: rgba(var(--hw-orange), 0.34);
  box-shadow: 0 10px 40px rgba(var(--hw-orange), 0.06), inset 0 0 30px rgba(var(--hw-ember), 0.05);
}
html[data-theme='halloween'] .success-btn { background: rgba(var(--hw-orange), 0.06); }
html[data-theme='halloween'] .success-btn:hover {
  background: rgba(var(--hw-orange), 0.16);
  box-shadow: 0 0 25px var(--accent-glow), inset 0 0 10px rgba(var(--hw-orange), 0.2);
}
html[data-theme='halloween'] .auth-message.success {
  background: rgba(var(--hw-orange), 0.08);
  border-color: rgba(var(--hw-orange), 0.32);
}

/* ---------- Orange buttons ---------- */
/* The big OPEN button: purple slab in style.css, pumpkin slab here. */
html[data-theme='halloween'] .btn-spin {
  background-color: #7a2a00;
  background-image: linear-gradient(180deg, #ff8f2e 0%, #f06a0c 48%, #c24b00 100%);
  border-color: #ffb067;
  color: #fff7ef;
  text-shadow: 0 1px 0 rgba(60, 18, 0, 0.7), 0 0 10px rgba(60, 18, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 0 #6b2500,
    0 7px 0 rgba(0, 0, 0, 0.55),
    0 16px 28px rgba(0, 0, 0, 0.45);
}
html[data-theme='halloween'] .btn-spin:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #ffa24d 0%, #ff7a1f 48%, #d45500 100%);
  border-color: #ffc58f;
}
html[data-theme='halloween'] .btn-spin:active:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 0 #6b2500,
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.45);
}
html[data-theme='halloween'] .btn-spin:disabled {
  border-color: rgba(255, 176, 103, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 0 #6b2500,
    0 7px 0 rgba(0, 0, 0, 0.55),
    0 12px 22px rgba(0, 0, 0, 0.4);
}

/* Header buttons (hub, sound, account) and the corner launchers. */
html[data-theme='halloween'] .hnav-btn {
  background: linear-gradient(180deg, #ff8a26, #e05a00);
  border-color: #ffab5e;
  color: #1c0a00;
}
html[data-theme='halloween'] .hnav-btn:hover {
  background: linear-gradient(180deg, #ffa04d, #f06a0c);
  color: #1c0a00;
}
html[data-theme='halloween'] .achievements-toggle-btn,
html[data-theme='halloween'] .chat-toggle-btn {
  background-image: linear-gradient(180deg, #ff8a26, #d95400);
  border-color: #ffab5e;
}
html[data-theme='halloween'] .achievements-toggle-btn svg path,
html[data-theme='halloween'] .chat-toggle-btn svg path { fill: #1c0a00; }
html[data-theme='halloween'] .hw-promo-cta {
  background: linear-gradient(180deg, #ff8a26, #e05a00);
  border-color: #ffab5e;
  color: #1c0a00;
}
html[data-theme='halloween'] #btn-sound {
  background: linear-gradient(180deg, #ff8a26, #e05a00);
  border-color: #ffab5e;
  color: #1c0a00;
}
html[data-theme='halloween'] #btn-sound[aria-pressed="true"] {
  background: linear-gradient(180deg, #b8611f, #8a3d00);
  border-color: rgba(255, 171, 94, 0.5);
  color: #1c0a00;
}
html[data-theme='halloween'] .hnav-btn + .hnav-btn { border-left-color: rgba(60, 18, 0, 0.35); }