/* Temporary Halloween theme. Loaded by header.php inside its date window (or with ?theme=halloween). */

:root {
    --hw-orange: #ff7a1a;
    --hw-orange2: #ffb347;
    --hw-purple: #8b5cf6;
    --hw-night: #120c1f;
}

/* Header: dusk tint + moon over the usual background */
.main-header,
.main-header-sub {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 82% 22%, rgba(255, 236, 190, 0.95) 0 46px, rgba(255, 190, 90, 0.35) 48px, rgba(255, 140, 40, 0.12) 120px, transparent 220px),
        linear-gradient(180deg, rgba(40, 10, 60, 0.55) 0%, rgba(120, 40, 10, 0.35) 70%, rgba(18, 12, 31, 0.85) 100%),
        url('../images/header-bg.webp');
}

/* Two bats flapping across the header */
.main-header::before,
.main-header::after,
.main-header-sub::before,
.main-header-sub::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23140a1c' d='M32 9c-2 0-3 2-3 2l-1-4-1 4C22 6 14 5 8 8c4 1 6 4 6 7-4-2-9-2-14 1 7 1 12 5 14 10 2-3 6-5 10-4 2 1 4 3 5 5l4 3 4-3c1-2 3-4 5-5 4-1 8 1 10 4 2-5 7-9 14-10-5-3-10-3-14-1 0-3 2-6 6-7-6-3-14-2-19 3l-1-4-1 4s-1-2-3-2z'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
    z-index: 2;
    animation: hw-bat-fly 19s linear infinite, hw-bat-flap .35s ease-in-out infinite alternate;
}
.main-header::after,
.main-header-sub::after {
    width: 30px; height: 16px;
    animation-duration: 27s, .28s;
    animation-delay: -11s, 0s;
    opacity: .8;
}
@keyframes hw-bat-fly {
    0%   { translate: -60px 180px; }
    25%  { translate: 25vw 90px; }
    50%  { translate: 50vw 150px; }
    75%  { translate: 75vw 70px; }
    100% { translate: calc(100vw + 60px) 130px; }
}
@keyframes hw-bat-flap { from { scale: 1 1; } to { scale: 1 .45; } }

.header-title .title-site {
    color: var(--hw-orange);
    text-shadow: 0 0 18px rgba(255, 122, 26, 0.55), 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.header-title .title-site::after { content: " 🎃"; font-size: .8em; }

/* Nav + buttons */
.main-links a:hover, .main-links a.active { color: var(--hw-orange2); }
.main-header-container.sticky {
    background: rgba(18, 12, 31, 0.85);
    border-bottom-color: rgba(255, 122, 26, 0.35);
}
.gh-login {
    background: linear-gradient(135deg, #ff7a1a 0%, #c2410c 100%);
    box-shadow: 0 4px 18px rgba(255, 122, 26, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Content: purple-black night, orange glow on the raised panel, cobweb in its corner */
.main-section { background-color: var(--hw-night); }
.main-section a:hover { color: var(--hw-orange); }
.main-section > .container,
.main-section > .player-profile-container,
.main-section > .game-detail-container {
    z-index: 3;
    border-color: rgba(255, 122, 26, 0.25);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), 0 0 50px rgba(255, 122, 26, 0.08);
}
.main-section > .container::before,
.main-section > .player-profile-container::before,
.main-section > .game-detail-container::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 110px; height: 110px;
    border-top-right-radius: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='.8'%3E%3Cpath d='M100 0L0 0M100 0L20 40M100 0L50 70M100 0L80 100M100 0L100 100'/%3E%3Cpath d='M78 0Q84 8 89 11Q93 17 100 22'/%3E%3Cpath d='M55 0Q66 13 75 18Q80 26 88 30Q93 38 100 44'/%3E%3Cpath d='M32 0Q48 18 60 26Q68 39 76 45Q85 56 100 66'/%3E%3Cpath d='M10 0Q30 23 45 33Q56 50 66 58Q78 74 100 88'/%3E%3C/svg%3E") no-repeat top right / contain;
    pointer-events: none;
}

.footer { border-top: 2px solid rgba(255, 122, 26, 0.5); }

@media (prefers-reduced-motion: reduce) {
    .main-header::before, .main-header::after,
    .main-header-sub::before, .main-header-sub::after { animation: none; display: none; }
}
@media (max-width: 700px) {
    .main-header::after, .main-header-sub::after { display: none; }
}