/* ── Halloween site-wide theme kit ────────────────────────────────────────
   Shared across the hub and every public game. Pure decoration — never
   touches layout flow (cobwebs/fx are fixed/absolute + pointer-events:
   none) so it can be dropped into any existing page without risking its
   real UI or gameplay. Replaces the earlier Ice Age (frost-*) kit. */
:root {
    --hw-orange: #ff7518;
    --hw-orange-bright: #ffa94d;
    --hw-purple: #9d4edd;
    --hw-black: #0d0d14;
    --hw-glow: rgba(255, 117, 24, 0.55);
    --hw-glow-purple: rgba(157, 78, 221, 0.45);
    --hw-shadow: rgba(10, 5, 20, 0.55);
}

.hw-cobwebs {
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30'%3E%3Cpath d='M0 1 Q9 25 18 5 Q27 25 36 1' stroke='%232c2340' stroke-width='2' fill='none' stroke-opacity='0.5'/%3E%3Cpath d='M0 0 Q9 24 18 4 Q27 24 36 0' stroke='%23cbb8e8' stroke-width='1.3' fill='none' stroke-opacity='0.85'/%3E%3Cpath d='M0 0 L9 24 M18 4 L9 24 M18 4 L27 24 M36 0 L27 24' stroke='%23cbb8e8' stroke-width='0.8' fill='none' stroke-opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 36px 30px;
    filter: drop-shadow(0 3px 6px rgba(10, 5, 20, 0.55));
}

/* Fixed purple/orange wash + edge vignette — makes the whole viewport read
   as haunted, not just the decorated strips. Sits above page background,
   below content, never intercepts clicks. */
.hw-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(60, 20, 90, 0.28) 100%),
        linear-gradient(rgba(255, 117, 24, 0.08), transparent 20%, transparent 80%, rgba(120, 40, 170, 0.12));
}

.hw-drift {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(120, 60, 160, 0.3), transparent);
    filter: blur(3px);
}

.hw-panel {
    background: linear-gradient(160deg, rgba(157, 78, 221, 0.10), rgba(255, 117, 24, 0.05));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 117, 24, 0.35);
    box-shadow: 0 0 20px var(--hw-glow), inset 0 0 30px rgba(157, 78, 221, 0.08);
}

.hw-glow {
    color: var(--hw-orange-bright);
    text-shadow: 0 0 8px var(--hw-orange), 0 0 18px var(--hw-purple);
}

.hw-shimmer {
    position: relative;
    overflow: hidden;
}
.hw-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 167, 77, 0.2) 50%, transparent 60%);
    background-size: 220% 100%;
    animation: hw-shimmer-sweep 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hw-shimmer-sweep {
    0% { background-position: 140% 0; }
    50%, 100% { background-position: -40% 0; }
}

.hw-frame {
    border: 1px solid rgba(255, 117, 24, 0.4) !important;
    box-shadow: 0 0 16px var(--hw-glow) !important;
}

#hw-fx-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    pointer-events: none;
}