/* =========================================================
   PUDDLE — Halloween theme. Everything is scoped to html.hw, which the admin switches on / off
   (Admin > Games & notices > Site theme). Without the class this file changes nothing.
   Deep violet surfaces, pumpkin orange replaces ice-blue; the green stays for wins.
   ========================================================= */
html.hw {
    --bg-0: #110a1b; --bg-1: #1b1129; --bg-2: #32204b; --bg-3: #48306a;
    --text-1: #cdbce6; --text-2: #8a6fb0;
    --ice: #ff8a1f; --ice-bg: rgba(255, 138, 31, .13); --ice-border: rgba(255, 138, 31, .4);
    --gold: #ffb84a; --red: #f0446a;
    --green: #ff7a00; --green-hover: #ff9626;               /* primary buttons */
    --win: #38e86a;                                         /* wins stay green */
    --shadow-1: 0 4px 14px rgba(0, 0, 0, .5);
}
html.hw body {
    background:
        radial-gradient(900px 420px at 85% -80px, rgba(255, 122, 0, .13), transparent 70%),
        radial-gradient(900px 500px at 5% 105%, rgba(138, 63, 252, .16), transparent 70%),
        var(--bg-0);
    background-attachment: fixed;
}
html.hw ::selection { background: rgba(255, 138, 31, .35); }
html.hw ::-webkit-scrollbar-thumb { background: #3b2559; }
html.hw ::-webkit-scrollbar-thumb:hover { background: #55357d; }

/* chrome */
html.hw .topbar { background: #170e25; border-bottom: 1px solid #3a2358; box-shadow: 0 1px 0 rgba(255, 122, 0, .25), 0 8px 24px -12px rgba(255, 122, 0, .35); }
html.hw .sidebar { background: #150d22; border-right-color: #2e1c46; }
html.hw .nav-item.active, html.hw .nav-item:hover { background: rgba(255, 138, 31, .12); }
html.hw .nav-item.active { box-shadow: inset 3px 0 0 #ff8a1f; }
html.hw .tb-mark rect:first-child { fill: #1b1129; }
html.hw .tb-mark rect:nth-child(2) { stroke: #48306a; }
html.hw .tb-mark circle { fill: #ff8a1f; }
html.hw .tb-logo .dot { background: #ff8a1f; }
html.hw .wordmark .wm-dot, html.hw .wm-dot { color: #ff8a1f; }

/* buttons, links, focus */
html.hw .btn-primary, html.hw .btn.primary { background: linear-gradient(180deg, #ff9626, #ff7a00); color: #1c0a2e; font-weight: 700; box-shadow: 0 0 0 0 rgba(255, 122, 0, .5); }
html.hw .btn-primary:hover, html.hw .btn.primary:hover { background: linear-gradient(180deg, #ffa646, #ff8a1f); box-shadow: 0 0 18px rgba(255, 122, 0, .45); }
html.hw .btn-primary:disabled, html.hw .btn.primary:disabled { background: #4a3568; color: #9d86bf; box-shadow: none; }
html.hw a:focus-visible, html.hw button:focus-visible { outline-color: #ff8a1f; }
html.hw .is-cash, html.hw .btn.is-cash { background: linear-gradient(180deg, #ffc247, #ffa500) !important; color: #1c0a2e !important; }

/* cards & panels get a faint violet glow and an orange edge on hover */
html.hw .game-card, html.hw .orig-card, html.hw .chart-card, html.hw .st-panel, html.hw .panel, html.hw .account-card { border-color: #3a2358; }
html.hw .game-card:hover, html.hw .orig-card:hover, html.hw .sl-card:hover .sl-thumb { box-shadow: 0 10px 28px -8px rgba(255, 122, 0, .45), 0 0 0 1px rgba(255, 138, 31, .55); }
html.hw .section-kicker, html.hw .sec-label { color: #ff8a1f; }
html.hw input:focus, html.hw select:focus, html.hw textarea:focus { border-color: #ff8a1f; box-shadow: 0 0 0 3px rgba(255, 138, 31, .18); outline: none; }

/* decorations (purely visual, never block clicks) */
html.hw .main::before {                                    /* cobweb in the top-right corner of every page */
    content: ""; position: absolute; top: var(--tb-h); right: 0; width: 190px; height: 190px; pointer-events: none; z-index: 0; opacity: .55;
    background: no-repeat top right / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23b8a2dc' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M200 0L0 0M200 0L0 60M200 0L0 130M200 0L50 200M200 0L120 200M200 0L200 200'/%3E%3Cpath d='M150 0Q135 30 200 52M100 0Q80 50 200 100M55 0Q35 80 200 150M20 0Q5 110 200 200'/%3E%3C/svg%3E");
}
html.hw .main { position: relative; }
html.hw .main-inner { position: relative; z-index: 1; }
html.hw body::after {                                      /* bats flying across the top */
    content: ""; position: fixed; top: calc(var(--tb-h) + 8px); left: -60px; width: 34px; height: 18px; z-index: 40; pointer-events: none; opacity: .75;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='%23050309'%3E%3Cpath d='M20 18c-1.500 0-2-2-2.500-4C15 12 12 14 8 10 6 8 3 7 0 8c3 1 3 4 4 6 2-1 4-1 6 1 2 1 4 0 6 2l2 1 2-1c2-2 4-1 6-2 2-2 4-2 6-1 1-2 1-5 4-6-3-1-6 0-8 2-4 4-7 2-9 4-.5 2-1 4-2.500 4z'/%3E%3C/svg%3E");
    animation: hwBat 26s linear infinite;
}
@keyframes hwBat {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(30vw, 24px) scale(1.15); }
    50%  { transform: translate(62vw, -4px) scale(.9); }
    75%  { transform: translate(92vw, 30px) scale(1.2); }
    100% { transform: translate(112vw, 6px) scale(1); }
}
html.hw .site-footer { border-top: 1px solid #3a2358; background: linear-gradient(180deg, transparent, rgba(138, 63, 252, .08)); }
html.hw .site-footer::before { content: ""; display: block; height: 3px; margin: -1px 0 18px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ff7a00, #8a3ffc, #ff7a00, transparent); opacity: .7; }

/* chips / tags / bars that used the ice colour hard-coded */
html.hw .live-dot, html.hw .dot-live { background: #ff8a1f; }
html.hw .progress > i, html.hw .bar > i { background: #ff8a1f; }
html.hw .pg-frame { box-shadow: 0 0 0 1px #3a2358, 0 12px 34px -10px rgba(255, 122, 0, .3); }
html.hw .sl-thumb { background: #1b1129; }

@media (prefers-reduced-motion: reduce) { html.hw body::after { animation: none; display: none; } }
@media (max-width: 700px) {
    html.hw .main::before { width: 120px; height: 120px; opacity: .45; }
    html.hw body::after { display: none; }                 /* no flying bats on phones: keeps it fast and uncluttered */
}

/* ===== Halloween: the witch rides the Crash curve, the ghost deals Blackjack ===== */
.dealer-ghost, .hw-rider { display: none; }
html.hw .dealer-svg { display: none; }
html.hw .dealer-ghost { display: block; position: absolute; left: 50%; bottom: 0; width: auto; height: 70%; transform: translateX(-50%); transform-origin: 50% 100%;
    animation: ghFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(255,138,31,.28)); pointer-events: none; user-select: none; }
html.hw .dealer-fig.dealing .dealer-ghost { animation: ghDeal .45s ease-in-out; }
@keyframes ghFloat { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); } 50% { transform: translateX(-50%) translateY(-7px) rotate(1.5deg); } }
@keyframes ghDeal { 0% { transform: translateX(-50%) translateY(0) scale(1); } 35% { transform: translateX(-50%) translateY(-10px) scale(1.06, .96) rotate(4deg); } 100% { transform: translateX(-50%) translateY(0) scale(1); } }

html.hw .hw-rider { display: block; position: absolute; left: 0; top: 0; width: 92px; z-index: 5; pointer-events: none; will-change: transform; }
html.hw .hw-rider img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,138,31,.45)); animation: witchBob 1.6s ease-in-out infinite; transform-origin: 50% 60%; }
.hw-bubble { position: absolute; left: 55%; top: -34px; padding: 6px 11px; border-radius: 14px 14px 14px 4px; background: #fdf4e8; color: #3b1a5c; font: 700 13px/1 var(--font-display, sans-serif); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); opacity: 0; }
html.hw .hw-rider.laugh img { animation: witchShake .16s ease-in-out infinite; }
html.hw .hw-rider.laugh .hw-bubble { animation: witchBubble 2.6s ease-out forwards; }
@keyframes witchBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes witchShake { 0%, 100% { transform: translateY(2px) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
@keyframes witchBubble { 0% { opacity: 0; transform: scale(.6); } 10% { opacity: 1; transform: scale(1.08); } 18%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-6px); } }
@media (max-width: 700px) { html.hw .hw-rider { width: 66px; } }
@media (prefers-reduced-motion: reduce) { html.hw .dealer-ghost, html.hw .hw-rider img { animation: none; } }