/* ==========================================================================
   🎃 HALLOWEEN THEME — Perle de Naomie
   Loaded AFTER each page's own styles, so it simply repaints everything.
   To switch it off after Halloween: delete halloween.css and halloween.js
   from the server (the pages work fine without them).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&display=swap');

/* ---- Colour palette (overrides the variables used by every page) ---- */
:root {
    /* index / leaderboard pages */
    --bg-color: #0a0610;
    --bg-panel: #150c1c;
    --bg-panel-2: #1e1128;
    --glass-bg: rgba(18, 9, 26, 0.80);
    --glass-border: rgba(255, 128, 32, 0.30);
    --primary: #ff9a3c;            /* pumpkin orange */
    --primary-hover: #ffc27a;
    --accent: #7a1fa2;             /* witchy purple */
    --accent-hover: #a23ad6;
    --text-main: #f3e9e1;
    --text-muted: #ab97bb;
    --cyan: #8fd16a;               /* toxic slime green */
    --danger: #ff4d5e;
    --warning: #ffb347;

    /* admin page */
    --bg-grad: linear-gradient(160deg, #0a0610 0%, #190b25 55%, #0d0612 100%);
    --panel-bg: rgba(20, 10, 30, 0.82);
    --border-subtle: rgba(255, 128, 32, 0.20);
    --accent-cyan: #ff8a1f;
    --success: #7bd34a;

    --hw-title-font: 'Creepster', 'Chiller', 'Nosifer', fantasy;
}

body {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(ellipse at 50% 110%, rgba(255, 106, 0, 0.20), transparent 55%),
        radial-gradient(circle at 12% 18%, rgba(122, 31, 162, 0.28), transparent 38%),
        radial-gradient(circle at 88% 8%, rgba(255, 150, 40, 0.10), transparent 30%);
    background-attachment: fixed;
}
/* admin uses a gradient shorthand for its background; keep it dark/purple */
body.hw-admin { background: var(--bg-grad); background-attachment: fixed; }

/* ---- Scary titles ---------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--hw-title-font);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.5px;
}
h1 {
    font-family: 'Nosifer', 'Creepster', fantasy;   /* the big dripping blood title */
    font-size: 1.4em;
    line-height: 1.5;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    color: #ff4a1c;
    text-shadow: 0 0 4px rgba(255, 60, 0, .9), 0 0 18px rgba(255, 60, 0, .55), 0 0 40px rgba(140, 0, 0, .6);
    animation: hwFlicker 5s infinite;
}
.auth-container h1 { font-size: 1.4em; }
h2 { font-size: 2em; color: var(--primary); text-shadow: 0 0 14px rgba(255, 110, 0, .55), 2px 3px 0 #2a0a0a; }
h3 { font-size: 1.55em; text-shadow: 0 0 10px rgba(255, 110, 0, .35); }
.past-container > summary,
.price-amount,
.rank {
    font-family: var(--hw-title-font);
    font-style: normal;
    letter-spacing: 1px;
}
.price-amount { font-size: 1.6em; }
.past-container > summary { font-size: 1.7em; }
.status-panel h2 { font-size: 30px; }

/* dripping blood under the main title */
.auth-container h1::after {
    content: '';
    display: block;
    height: 22px;
    width: min(250px, 80%);
    margin: 6px auto 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 22' preserveAspectRatio='none'><g fill='%23b3121f'><rect y='0' width='250' height='3' rx='1.5'/><rect x='22' width='5' height='13' rx='2.5'/><circle cx='24.5' cy='14' r='3.2'/><rect x='70' width='4' height='8' rx='2'/><circle cx='72' cy='9' r='2.7'/><rect x='118' width='6' height='19' rx='3'/><circle cx='121' cy='19' r='3.4'/><rect x='171' width='4' height='10' rx='2'/><circle cx='173' cy='11' r='2.8'/><rect x='214' width='5' height='15' rx='2.5'/><circle cx='216.5' cy='16' r='3.1'/></g></svg>") center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, .55));
    animation: hwDrip 6s ease-in-out infinite;
    transform-origin: top center;
}

/* ---- Panels, cards, buttons ----------------------------------------- */
.auth-container,
.profile-box,
.status-panel,
.row {
    box-shadow: 0 15px 40px rgba(0, 0, 0, .65), 0 0 28px rgba(255, 100, 0, .10);
}
details.event-card {
    background: rgba(14, 7, 20, .62);
    border-color: rgba(255, 128, 32, .28);
}
details.event-card[open] {
    background: rgba(18, 9, 26, .78);
    border-color: rgba(255, 128, 32, .55);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 100, 0, .16);
}
.past-container { background: rgba(8, 4, 12, .55); border-color: rgba(255, 128, 32, .16); }

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 128, 32, .18);
}
a:hover { text-shadow: 0 0 10px rgba(255, 140, 40, .55); }

button {
    background: linear-gradient(135deg, #d9560b, #7a1fa2);
    box-shadow: 0 4px 14px rgba(255, 100, 0, .28);
}
button:hover {
    background: linear-gradient(135deg, #ff7a1f, #a23ad6);
    box-shadow: 0 6px 22px rgba(255, 122, 24, .5);
}
.game-link:hover, .navlink:hover, .btn-outline:hover, .settings-dropdown > summary:hover {
    background: rgba(255, 128, 32, .14);
}
.profile-pic:hover { box-shadow: 0 8px 20px rgba(255, 128, 32, .35); }
.welcome-message { background: rgba(255, 128, 32, .06); }

/* admin extras that had hard-coded blue */
.plusone-btn.plus { background: rgba(255, 138, 31, .15); color: #ff8a1f; border-color: #ff8a1f; }
.plusone-count { color: #ff8a1f; }
.chat-admin { background: linear-gradient(135deg, #d9560b, #7a1fa2); }
.top-bar h1 { font-family: 'Creepster', fantasy; font-size: 28px; letter-spacing: 2px; animation: none; text-shadow: 0 0 12px rgba(255, 90, 0, .6); }
.top-bar h1::after { display: none; }
details.admin-panel > summary, details.sub-panel > summary { letter-spacing: .3px; }

/* check-in page (kept readable & fast at the door) */
body.hw-checkin { background: #07040b; }
body.hw-checkin .topbar { background: rgba(14, 7, 20, .94); border-bottom-color: rgba(255, 128, 32, .45); }
body.hw-checkin .event-title { font-family: 'Creepster', fantasy; font-weight: 400; font-size: 28px; letter-spacing: 1.5px; color: #ff9a3c; text-shadow: 0 0 12px rgba(255, 110, 0, .5); }
body.hw-checkin .guest-row { background: rgba(21, 12, 29, .9); border-color: rgba(255, 128, 32, .22); }
body.hw-checkin .guest-pic { border-color: #ff9a3c; }
body.hw-checkin #searchBox:focus { border-color: #ff9a3c; }

/* ======================================================================
   ANIMATED BACKGROUND  (built by halloween.js, sits behind everything)
   ====================================================================== */
#hw-bg {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1; overflow: hidden; pointer-events: none;
}
#hw-bg * { pointer-events: none; }

/* the moon */
.hw-moon {
    position: absolute; top: 5vh; right: 7vw;
    width: clamp(70px, 14vw, 130px); aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle at 30% 32%, rgba(190, 130, 40, .45) 0 7%, transparent 8%),
        radial-gradient(circle at 62% 58%, rgba(190, 130, 40, .40) 0 10%, transparent 11%),
        radial-gradient(circle at 45% 78%, rgba(190, 130, 40, .35) 0 6%, transparent 7%),
        radial-gradient(circle at 35% 35%, #fff2cf, #ffd47f 55%, #f0a43c 100%);
    box-shadow: 0 0 50px 14px rgba(255, 170, 60, .35), 0 0 150px 55px rgba(255, 110, 20, .16);
    animation: hwMoon 7s ease-in-out infinite;
}

/* drifting fog banks */
.hw-fog {
    position: absolute; left: -50%; width: 200%;
    background:
        radial-gradient(ellipse at 18% 60%, rgba(150, 110, 210, .20), transparent 55%),
        radial-gradient(ellipse at 52% 40%, rgba(255, 130, 40, .10), transparent 50%),
        radial-gradient(ellipse at 84% 66%, rgba(150, 110, 210, .18), transparent 55%);
    will-change: transform;
}
.hw-fog.f1 { bottom: 0; height: 46%; animation: hwDrift 55s linear infinite alternate; }
.hw-fog.f2 { bottom: 8%; height: 38%; opacity: .75; animation: hwDrift 80s linear infinite alternate-reverse; }

/* graveyard silhouette */
.hw-ground {
    position: absolute; bottom: 0; left: 50%;
    width: max(100vw, 1100px); height: auto; transform: translateX(-50%);
    display: block;
}
.hw-ground .hw-jackface { fill: #ffb52e; animation: hwCandle 3.1s infinite; filter: drop-shadow(0 0 6px #ff9a1f); }
.hw-ground .hw-jackbody { fill: #4a1b00; stroke: #ff7a1a; stroke-opacity: .55; stroke-width: 2; }

/* bats */
.hw-bat { position: absolute; left: 0; will-change: transform; animation: hwFly linear infinite; }
.hw-bat.rtl { animation-name: hwFlyBack; }
.hw-bat .bob { animation: hwBob ease-in-out infinite alternate; }
.hw-bat svg { display: block; fill: #07030c; filter: drop-shadow(0 0 3px rgba(255, 140, 40, .5)); animation: hwFlap .32s ease-in-out infinite alternate; transform-origin: 50% 50%; }

/* ghosts */
.hw-ghost { position: absolute; bottom: -90px; will-change: transform, opacity; animation: hwFloat linear infinite; opacity: 0; }
.hw-ghost svg { display: block; filter: drop-shadow(0 0 12px rgba(190, 170, 255, .7)); animation: hwSway 4s ease-in-out infinite alternate; }

/* rising embers */
.hw-ember {
    position: absolute; bottom: -10px; border-radius: 50%;
    background: radial-gradient(circle, #ffd27a, #ff7a1a 60%, transparent 70%);
    box-shadow: 0 0 8px 2px rgba(255, 130, 30, .6);
    opacity: 0; will-change: transform, opacity;
    animation: hwEmber linear infinite;
}

/* creepy eyes in the dark */
.hw-eyes { position: absolute; display: flex; gap: 14px; opacity: 0; animation: hwEyes 4.2s ease-in-out forwards; }
.hw-eyes i { display: block; width: 9px; height: 5px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: var(--eye, #ffd23a); box-shadow: 0 0 10px 3px var(--eye, #ffd23a); transform: rotate(var(--tilt, 12deg)); }
.hw-eyes i:last-child { transform: rotate(calc(var(--tilt, 12deg) * -1)); }

/* cobwebs + spider */
.hw-web { position: absolute; top: 0; width: clamp(90px, 22vw, 170px); height: auto; opacity: .35; }
.hw-web.l { left: 0; }
.hw-web.r { right: 0; transform: scaleX(-1); }
.hw-spider { position: absolute; top: 0; left: 14vw; display: flex; flex-direction: column; align-items: center; }
.hw-spider .thread { width: 1px; background: rgba(255, 255, 255, .35); height: 40px; animation: hwThread 7s ease-in-out infinite; }
.hw-spider svg { display: block; fill: #0a050f; stroke: #0a050f; filter: drop-shadow(0 0 3px rgba(255, 140, 40, .5)); }

/* lightning */
.hw-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 70% 10%, rgba(220, 205, 255, .55), rgba(150, 120, 255, .15) 60%, transparent 80%); opacity: 0; }
.hw-flash.go { animation: hwLightning 1.8s ease-out forwards; }

/* ---- Keyframes ------------------------------------------------------- */
@keyframes hwFlicker {
    0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
    20% { opacity: .55; }
    63% { opacity: .7; }
    80% { opacity: .92; }
}
@keyframes hwDrip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.22); } }
@keyframes hwMoon {
    0%, 100% { box-shadow: 0 0 50px 14px rgba(255, 170, 60, .30), 0 0 150px 55px rgba(255, 110, 20, .13); }
    50%      { box-shadow: 0 0 62px 20px rgba(255, 170, 60, .45), 0 0 180px 70px rgba(255, 110, 20, .22); }
}
@keyframes hwDrift { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes hwCandle {
    0%, 100% { opacity: 1; } 8% { opacity: .65; } 14% { opacity: 1; }
    40% { opacity: .85; } 52% { opacity: .55; } 58% { opacity: 1; } 80% { opacity: .9; }
}
@keyframes hwFly     { from { transform: translateX(-20vw); } to { transform: translateX(115vw); } }
@keyframes hwFlyBack { from { transform: translateX(115vw); } to { transform: translateX(-20vw); } }
@keyframes hwBob     { from { transform: translateY(-26px); } to { transform: translateY(26px); } }
@keyframes hwFlap    { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hwFloat {
    0%   { transform: translateY(0);     opacity: 0; }
    12%  { opacity: var(--o, .35); }
    85%  { opacity: var(--o, .35); }
    100% { transform: translateY(-115vh); opacity: 0; }
}
@keyframes hwSway { from { transform: translateX(-28px) rotate(-5deg); } to { transform: translateX(28px) rotate(5deg); } }
@keyframes hwEmber {
    0%   { transform: translate(0, 0) scale(1);                     opacity: 0; }
    10%  { opacity: .9; }
    100% { transform: translate(var(--dx, 30px), -105vh) scale(.3); opacity: 0; }
}
@keyframes hwEyes {
    0% { opacity: 0; } 12% { opacity: 1; } 40% { opacity: 1; transform: scaleY(1); }
    44% { transform: scaleY(.1); } 48% { transform: scaleY(1); }
    80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes hwThread { 0%, 100% { height: 30px; } 50% { height: 95px; } }
@keyframes hwLightning {
    0% { opacity: 0; } 8% { opacity: .75; } 22% { opacity: .15; }
    34% { opacity: .55; } 100% { opacity: 0; }
}

/* ---- Respect "reduce motion" settings -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #hw-bg *, h1, h1::after { animation: none !important; }
}