/* === Spooky theme: the Halloween update's look ===
   On only while js/event-theme.js sets <html data-event-theme="spooky">; when the event ends the
   attribute is never set and none of this applies. Decorations are drawn in index.html with
   data-theme-only="spooky" and are purely visual (aria-hidden, no pointer events). */

:root[data-event-theme="spooky"] {
  --bg-primary: #120b1f;
  --bg-secondary: #1d1230;
  --bg-card: #2a1b40;
  --surface: #221636;
  --surface-2: #30204a;
  --border: #4d356e;
  --brand: #ff9a3c;
  --brand-ink: #2b1203;
  --accent: #a3e635;
  --spooky-orange: #ff9a3c;
  --spooky-purple: #7c3aed;
  --spooky-slime: #a3e635;
  --spooky-night: #1a1030;
}

/* Night sky behind the whole game */
:root[data-event-theme="spooky"] body {
  background: radial-gradient(circle at 82% 8%, #fef3c722, transparent 28%), linear-gradient(180deg, #1c1033, #0c0815 70%);
}
:root[data-event-theme="spooky"] #app { background: linear-gradient(180deg, #1a0f2e, #120b1f 40%, #100a1a); }
:root[data-event-theme="spooky"] .auth-card { background: #1d1230; border-color: #4d356e; }

/* Title: a glowing jack-o'-lantern "Monstit" with a pumpkin eye */
:root[data-event-theme="spooky"] .game-title {
  color: var(--spooky-orange);
  -webkit-text-fill-color: var(--spooky-orange);
  text-shadow: 0 0 12px #ff7a1a99, 0 3px 0 #7c2d12;
}
:root[data-event-theme="spooky"] .eyeball-o {
  background: radial-gradient(circle at 35% 28%, #fff1b8 0%, #fbbf24 30%, #f97316 70%, #c2410c 100%);
  box-shadow: inset 0 -.045em .06em #7c2d1288, 0 0 .25em #ff9a3c88;
}
:root[data-event-theme="spooky"] .eyeball-o::after { background: radial-gradient(circle at 35% 25%, #fff 0 12%, transparent 15%), #1d1433; }
:root[data-event-theme="spooky"] #screen-menu .season-label.spooky-label { color: #fdba74; letter-spacing: .14em; }

/* Buttons and accents switch from lime to pumpkin */
:root[data-event-theme="spooky"] .room-primary { background: var(--spooky-orange); color: var(--brand-ink); }
:root[data-event-theme="spooky"] .room-secondary { background: #f3e8ff; color: #2e1065; }
:root[data-event-theme="spooky"] .eyebrow { color: #fdba74; }
:root[data-event-theme="spooky"] .menu-section-label { color: #e9d5ff; }
:root[data-event-theme="spooky"] .menu-section-label span { color: #b9a6d6; }

/* Sky decorations: cobwebs, moon, bats and a drifting ghost behind the lobby */
:root[data-event-theme="spooky"] .menu-container { position: relative; isolation: isolate; }
.spooky-sky { position: absolute; inset: -30px 0 auto; height: 260px; z-index: -1; pointer-events: none; overflow: hidden; }
.spooky-web { position: absolute; top: 0; width: 110px; height: 110px; }
.spooky-web-left { left: 0; }
.spooky-web-right { right: 0; transform: scaleX(-1); width: 80px; height: 80px; }
.spooky-web-left g { animation: spooky-spider 5s ease-in-out infinite; }
.spooky-moon { position: absolute; top: 34px; right: 30px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 30% 34%, #fff 0 10%, #fef3c7 40%, #fde68a 100%);
  box-shadow: 0 0 30px #fde68a66, 0 0 80px #fde68a33; }
.spooky-moon::after { content: ''; position: absolute; top: 14px; left: 30px; width: 9px; height: 9px; border-radius: 50%; background: #f5d77a; box-shadow: -16px 14px 0 -2px #f5d77a; }
.spooky-bat { position: absolute; width: 34px; height: 17px; animation: spooky-flutter .35s ease-in-out infinite alternate, spooky-fly 14s linear infinite; }
.spooky-bat-1 { top: 54px; animation-delay: 0s, -3s; }
.spooky-bat-2 { top: 98px; width: 24px; height: 12px; animation-delay: 0s, -9s; animation-duration: .3s, 18s; }
.spooky-bat-3 { top: 26px; width: 20px; height: 10px; animation-delay: 0s, -13s; animation-duration: .28s, 22s; }
.spooky-ghost { position: absolute; top: 140px; width: 34px; height: 40px; opacity: .85; animation: spooky-ghost 20s ease-in-out infinite; }
@keyframes spooky-spider { 0%, 100% { transform: translate(38px, 44px); } 50% { transform: translate(38px, 56px); } }
@keyframes spooky-flutter { from { scale: 1 1; } to { scale: 1 .55; } }
@keyframes spooky-fly { 0% { left: -12%; translate: 0 0; } 50% { translate: 0 -14px; } 100% { left: 110%; translate: 0 6px; } }
@keyframes spooky-ghost { 0%, 100% { left: -14%; translate: 0 0; } 45% { left: 104%; translate: 0 -18px; } 50%, 95% { left: 120%; } }

/* The Halloween banner */
.spooky-banner {
  border-color: #fb923c;
  background: radial-gradient(circle at 86% 30%, #fde68a44, transparent 30%), linear-gradient(120deg, #1a0b2e, #4c1d6e 55%, #c2410c);
  box-shadow: 0 5px 0 #0c0618, 0 0 20px #f9731655;
}
.spooky-banner:hover { border-color: #fed7aa; }
.spooky-banner .season-banner-icon { filter: drop-shadow(0 0 10px #fb923c); animation: spooky-glow 2.4s ease-in-out infinite alternate; }
.spooky-banner .season-banner-tag { color: #bef264; }
.spooky-banner .season-banner-copy small { color: #fde7d3; }
.spooky-banner .season-banner-go { color: #bef264; }
.spooky-banner-fog { position: absolute; inset: auto -10% -14px; height: 30px; pointer-events: none;
  background: radial-gradient(ellipse at 20% 50%, #e9d5ff33, transparent 60%), radial-gradient(ellipse at 70% 60%, #e9d5ff2a, transparent 55%);
  animation: spooky-fog 7s ease-in-out infinite alternate; }
@keyframes spooky-glow { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.08) rotate(4deg); } }
@keyframes spooky-fog { from { translate: -6% 0; } to { translate: 6% 0; } }

/* The hero card at night; its monster dresses up as a pumpkin in a witch hat */
:root[data-event-theme="spooky"] .party-hero { background: radial-gradient(circle at 90% 0%, #fde68a22, transparent 35%), linear-gradient(125deg, #3b1d5c, #1c1033); border-color: #6d4a9a; }
:root[data-event-theme="spooky"] .hero-copy h2 { color: #fff3e6; }
:root[data-event-theme="spooky"] .hero-copy p, :root[data-event-theme="spooky"] .hero-footnote { color: #d8c8ee; }
:root[data-event-theme="spooky"] .hero-monster { background: #fb923c; box-shadow: inset -15px -12px 0 #ea6a12, 0 16px 30px #0a051466; }
:root[data-event-theme="spooky"] .hero-monster::before, :root[data-event-theme="spooky"] .hero-monster::after { background: #65a30d; }
:root[data-event-theme="spooky"] .hero-monster span { border-color: #fde047; }
:root[data-event-theme="spooky"] .hero-monster i { border-bottom-color: #7c2d12; }
.hero-hat { position: absolute; left: 22px; top: -62px; width: 92px; height: 70px; z-index: 2; transform: rotate(-14deg); }
.hero-hat::before { content: ''; position: absolute; left: 18px; bottom: 10px; width: 56px; height: 62px; background: linear-gradient(#5b21b6, #7c3aed); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 4px; }
.hero-hat::after { content: ''; position: absolute; left: 0; bottom: 0; width: 92px; height: 18px; border-radius: 50%; background: #4c1d95; box-shadow: inset 0 6px 0 #f97316, 0 2px 0 #1d1433; }

/* Lobby tiles in Halloween colours: pumpkin, potion purple, slime green and midnight */
:root[data-event-theme="spooky"] #screen-menu .menu-buttons .menu-tile { border-color: #ffffff33; }
:root[data-event-theme="spooky"] #screen-menu .menu-buttons :is(.tile-hatch, .tile-battle, .tile-shop, .tile-pass) { background: linear-gradient(160deg, #fb923c, #c2410c); border-color: #fdba74; color: #fff; }
:root[data-event-theme="spooky"] #screen-menu .menu-buttons :is(.tile-collection, .tile-pvp, .tile-wheel, .tile-achievements) { background: linear-gradient(160deg, #8b5cf6, #5b21b6); border-color: #c4b5fd; color: #fff; }
:root[data-event-theme="spooky"] #screen-menu .menu-buttons :is(.tile-lab, .tile-team, .tile-challenges, .tile-codes, .tile-leaderboard) { background: linear-gradient(160deg, #65a30d, #3f6212); border-color: #bef264; color: #fff; }
:root[data-event-theme="spooky"] #screen-menu .menu-buttons :is(.tile-minigames, .tile-events, .tile-lore) { background: linear-gradient(160deg, #3b2a5c, #1c1033); border-color: #a78bfa; color: #fff; }
:root[data-event-theme="spooky"] #screen-menu .menu-buttons .tile-events { box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 16px #f9731666; }
/* A little cobweb in the corner of every tile */
:root[data-event-theme="spooky"] #screen-menu .menu-buttons .menu-tile::before {
  content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 30px; pointer-events: none; opacity: .5; border-top-left-radius: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M0 0L30 0M0 0L26 14M0 0L16 24M0 0L4 30M0 0L0 30M0 9Q6 8 8 3Q9 1 11 0M0 17Q9 15 13 7Q15 2 20 0M0 25Q13 22 19 11Q22 4 28 0' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") no-repeat;
}

/* Graveyard at the bottom of the lobby */
.spooky-graveyard { width: 100%; margin: 8px 0 -40px; border-radius: 0 0 18px 18px; overflow: hidden; text-align: center; pointer-events: none; }
.spooky-graveyard svg { display: block; width: 100%; height: auto; }
.spooky-graveyard p { margin: -6px 0 0; padding: 4px 0 24px; background: #2a1d3d; font: .95rem var(--font-display); color: #fdba74; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .spooky-sky *, .spooky-banner .season-banner-icon, .spooky-banner-fog { animation: none !important; }
  .spooky-bat, .spooky-ghost { display: none; }
}

/* === The sign-in screen (the first thing players see) === */
:root[data-event-theme="spooky"] .auth-gate { position: relative; isolation: isolate; background: radial-gradient(circle at 80% 10%, #fde68a1f, transparent 30%), linear-gradient(180deg, #1c1033, #0c0815 75%); }
.spooky-gate-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.spooky-gate-sky .spooky-web { width: 150px; height: 150px; }
.spooky-gate-sky .spooky-web-right { width: 110px; height: 110px; }
.spooky-gate-sky .spooky-moon { top: 48px; right: 9%; width: 84px; height: 84px; }
.spooky-gate-sky .spooky-bat-1 { top: 120px; }
.spooky-gate-sky .spooky-bat-2 { top: 34%; }
.spooky-gate-sky .spooky-bat-3 { top: 60px; }
.spooky-gate-sky .spooky-ghost { top: 46%; width: 46px; height: 54px; }
.spooky-stars { position: absolute; inset: 0 0 40%; opacity: .8; animation: season-twinkle 3s ease-in-out infinite alternate;
  background: radial-gradient(circle at 8% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 22% 8%, #fde68a 0 1.5px, transparent 2.5px), radial-gradient(circle at 38% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 56% 12%, #fff 0 1px, transparent 2px), radial-gradient(circle at 68% 40%, #e9d5ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 14% 56%, #fff 0 1px, transparent 2px), radial-gradient(circle at 84% 62%, #fde68a 0 1px, transparent 2px); }
.spooky-gate-hill { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 110px; border-radius: 50% 50% 0 0; background: #2a1d3d; box-shadow: 0 -2px 0 #1d1433; }
.spooky-gate-ground { position: absolute; bottom: 8px; width: min(42vw, 280px); height: auto; }
.spooky-gate-ground-left { left: 0; }
.spooky-gate-ground-right { right: 0; }
/* Bats show as silhouettes with a faint purple rim so they read against the night sky */
.spooky-gate-sky .spooky-bat path { fill: #2e1d4a; stroke: #a78bfa; stroke-width: .8; }

/* The card: a haunted-house window with a spider hanging off its corner */
:root[data-event-theme="spooky"] .auth-card { position: relative; background: linear-gradient(180deg, #24163aee, #1a1029ee); border: 2px solid #6d4a9a; box-shadow: 0 24px 80px #0008, 0 0 40px #f9731622; }
.spooky-card-spider { position: absolute; top: -2px; right: 28px; width: 30px; height: 70px; transform-origin: 50% 0; animation: spooky-dangle 3.2s ease-in-out infinite; }
@keyframes spooky-dangle { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(6px); } }
:root[data-event-theme="spooky"] .auth-hero::before { background: radial-gradient(ellipse, #f9731640, transparent 70%); }
:root[data-event-theme="spooky"] .auth-tagline { color: #f3e8ff; }
.spooky-gate-news { position: relative; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; border: 2px solid #fb923c; background: linear-gradient(120deg, #3b0764, #7c2d12); color: #fff3e6; font-size: .9rem; line-height: 1.45; box-shadow: 0 0 18px #f9731644; }
.spooky-gate-news strong { font: 1.05rem var(--font-display); font-weight: 400; color: #fdba74; }
.spooky-gate-news span { color: #d9f99d; font-weight: 700; font-size: .8rem; }
:root[data-event-theme="spooky"] #auth-message:not(:empty) { background: #30204a; }

/* "Got a game code?" becomes a glowing pumpkin-patch card */
:root[data-event-theme="spooky"] .auth-join-card { border-color: #fb923c; background: radial-gradient(ellipse at 50% 0%, #6b2fa0, #2a1640 75%); box-shadow: 0 10px 26px #0006, 0 0 20px #f9731633; }
:root[data-event-theme="spooky"] .auth-join-card h2 { color: #fdba74; }
:root[data-event-theme="spooky"] .auth-join-card .auth-note { color: #e9d5ff; }
:root[data-event-theme="spooky"] #auth-join-form label { color: #fff3e6; }
:root[data-event-theme="spooky"] :is(#auth-room-code, #auth-guest-name) { border-color: #8b5cf6; background: #160d24; color: #fdba74; }
:root[data-event-theme="spooky"] :is(#auth-room-code, #auth-guest-name)::placeholder { color: #6b5b8a; }
:root[data-event-theme="spooky"] :is(#auth-room-code, #auth-guest-name):focus { border-color: #fb923c; box-shadow: 0 0 0 4px #fb923c40; }
:root[data-event-theme="spooky"] .auth-account { border-top-color: #4d356e; }
:root[data-event-theme="spooky"] .auth-account h2 { color: #f3e8ff; }
:root[data-event-theme="spooky"] #auth-form input { border-color: #5b4380; background: #1d1230; }
:root[data-event-theme="spooky"] .auth-card .room-tabs button[aria-pressed="true"] { background: #fb923c; color: #2b1203; }
:root[data-event-theme="spooky"] :is(.auth-note, .auth-divider, .auth-legal a) { color: #c9b8e2; }

@media (prefers-reduced-motion: reduce) {
  .spooky-gate-sky *, .spooky-card-spider { animation: none !important; }
  .spooky-gate-sky .spooky-bat, .spooky-gate-sky .spooky-ghost { display: none; }
}