/**
 * Halloween event skin — load AFTER style.css.
 * Quiet nocturne: ember accent, real Lottie at the edges, no sticker graphics.
 * Admin → Settings → Frontend event theme → Default to restore.
 */

html.event-theme-halloween.dark-theme,
html.dark-theme.event-theme-halloween,
html.event-theme-halloween body.dark-theme {
  --primary: #e85d04;
  --primary-hover: #c2410c;
  --secondary: #f4c7a1;
  --border-color: rgba(232, 93, 4, 0.22);
  --glow-color: rgba(232, 93, 4, 0.28);
  --gradient-start: #e85d04;
  --gradient-mid: #c2410c;
  --gradient-end: #9a3412;
  --btn-primary-bg: #e85d04;
  --btn-primary-hover-bg: #c2410c;
  --bs-btn-disabled-bg: #e85d04;
  --bs-btn-disabled-border-color: #e85d04;
  --scrollbar-thumb: #9a3412;
  --scrollbar-thumb-hover: #e85d04;
  --dark-bg: #09080c;
  --darker-bg: #050407;
  --navbar-bg: rgba(9, 8, 12, 0.94);
  --section-bg-alt: rgba(14, 12, 18, 0.92);
}

/* Halloween is dark only. A saved light preference must not pale the page. */
html.event-theme-halloween.light-theme,
html.light-theme.event-theme-halloween,
html.event-theme-halloween body.light-theme {
  --primary: #e85d04;
  --primary-hover: #c2410c;
  --secondary: #f4c7a1;
  --border-color: rgba(232, 93, 4, 0.22);
  --glow-color: rgba(232, 93, 4, 0.28);
  --gradient-start: #e85d04;
  --gradient-mid: #c2410c;
  --gradient-end: #9a3412;
  --btn-primary-bg: #e85d04;
  --btn-primary-hover-bg: #c2410c;
  --bs-btn-disabled-bg: #e85d04;
  --bs-btn-disabled-border-color: #e85d04;
  --scrollbar-thumb: #9a3412;
  --scrollbar-thumb-hover: #e85d04;
  --dark-bg: #09080c;
  --darker-bg: #050407;
  --navbar-bg: rgba(9, 8, 12, 0.94);
  --section-bg-alt: rgba(14, 12, 18, 0.92);
  --text-color: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --card-bg: rgba(25, 25, 25, 0.95);
  --glass-bg: rgba(18, 18, 18, 0.95);
  --glass-border: rgba(255, 255, 255, 0.08);
}

html.event-theme-halloween body {
  isolation: isolate;
  background-color: var(--dark-bg);
  background-image: radial-gradient(ellipse 80% 42% at 50% -8%, rgba(88, 28, 18, 0.45), transparent 62%);
  background-attachment: scroll;
}

html.event-theme-halloween.light-theme body,
html.event-theme-halloween body.light-theme {
  background-color: #09080c;
  background-image: radial-gradient(ellipse 80% 42% at 50% -8%, rgba(88, 28, 18, 0.45), transparent 62%);
  color: #ffffff;
}

html.event-theme-halloween #theme-toggle,
html.event-theme-halloween #theme-toggle-mobile,
html.event-theme-halloween .mobile-theme-toggle {
  display: none !important;
}

html.event-theme-halloween .hw-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

html.event-theme-halloween .hw-ambient__wash {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 160px rgba(5, 4, 7, 0.55);
}

html.event-theme-halloween .hw-lotties {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

html.event-theme-halloween .hw-lottie {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Flies across the viewport, then starts again from the left. */
html.event-theme-halloween .hw-lottie--bats {
  top: 120px;
  left: 0;
  width: 150px;
  height: auto;
  opacity: 0.8;
  animation: hw-bat-cruise 14s linear infinite;
}

@keyframes hw-cat-peek {
  0%,
  100% {
    transform: translateY(36px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes hw-bat-cruise {
  0% {
    transform: translate3d(-30vw, 0, 0);
  }
  50% {
    transform: translate3d(45vw, 18px, 0);
  }
  100% {
    transform: translate3d(110vw, -8px, 0);
  }
}

html.event-theme-halloween .hw-lottie--spider {
  top: 36px;
  right: 18px;
  width: 42px;
  height: auto;
  opacity: 0.72;
}

html.event-theme-halloween .hw-lottie--cat {
  position: fixed;
  bottom: 18px;
  left: 12px;
  z-index: 1990;
  width: 108px;
  height: auto;
  opacity: 0.88;
}

html.event-theme-halloween .site-header .navbar,
html.event-theme-halloween #main-navbar {
  border-bottom: 1px solid rgba(232, 93, 4, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  background-color: var(--navbar-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.event-theme-halloween .navbar .nav-link.active,
html.event-theme-halloween .navbar .nav-link:hover,
html.event-theme-halloween .gospin-nav-badge {
  color: var(--primary);
}

html.event-theme-halloween .btn-primary,
html.event-theme-halloween .btn.btn-primary {
  background: var(--btn-primary-bg) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 18px rgba(154, 52, 18, 0.28);
}

html.event-theme-halloween .btn-primary:hover,
html.event-theme-halloween .btn.btn-primary:hover {
  background: var(--btn-primary-hover-bg) !important;
}

html.event-theme-halloween .btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: color-mix(in srgb, var(--primary) 70%, transparent);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
}

html.event-theme-halloween .competition-card:not(.skeleton-card) {
  border: 1px solid rgba(168, 85, 247, 0.55);
  box-shadow:
    0 0 0 1px rgba(232, 93, 4, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22);
  overflow: visible;
  position: relative;
  isolation: isolate;
}

html.event-theme-halloween .homepage-mobile-grid > [class*='col-'],
html.event-theme-halloween #featured-competitions-container > [class*='col-'],
html.event-theme-halloween #competitions-container > [class*='col-'] {
  overflow: visible;
}

html.event-theme-halloween .hw-card-decor {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

html.event-theme-halloween .hw-web,
html.event-theme-halloween .hw-pumpkin {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

html.event-theme-halloween .hw-web {
  top: 0;
  width: 64px;
  height: 64px;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f7f2ff' stroke-width='0.7' stroke-linecap='round'%3E%3Cpath d='M0 0h100M0 0l100 26M0 0l100 58M0 0l70 100M0 0l26 100M0 0v100'/%3E%3Cpath d='M20 0A20 20 0 0 1 0 20M38 0A38 38 0 0 1 0 38M56 0A56 56 0 0 1 0 56M74 0A74 74 0 0 1 0 74M92 0A92 92 0 0 1 0 92'/%3E%3C/svg%3E");
}

html.event-theme-halloween .hw-web--l {
  left: 0;
}

html.event-theme-halloween .hw-web--r {
  right: 0;
  width: 52px;
  height: 52px;
  opacity: 0.32;
  transform: scaleX(-1);
}

html.event-theme-halloween h1::before {
  content: "";
  display: inline-block;
  width: 1.7em;
  height: 1.55em;
  margin-right: 0.28em;
  vertical-align: -0.22em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cpath d='M30 18c0-7 5-12 9-13 0 4-3 7-2 11' fill='%234d8a38' stroke='%23215c22' stroke-width='1.4'/%3E%3Cellipse cx='22' cy='36' rx='16' ry='18' fill='%23e15f10' stroke='%23a33b10' stroke-width='1.4'/%3E%3Cellipse cx='43' cy='36' rx='16' ry='18' fill='%23e15f10' stroke='%23a33b10' stroke-width='1.4'/%3E%3Cellipse cx='32' cy='35' rx='15' ry='20' fill='%23ff8c1a' stroke='%23c25212' stroke-width='1.4'/%3E%3Cpath d='M16 30l7-7 2 8zM40 31l2-8 8 7z' fill='%23ffe38a'/%3E%3Cpath d='M22 42c3 7 16 8 20 1-4 3-16 3-20-1z' fill='%23331814'/%3E%3Cpath d='M26 44l3-2 2 5-3 1zM38 43l4 1-1 5-3-2z' fill='%23ffe38a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 4px rgba(255, 135, 23, 0.4));
}

html.event-theme-halloween .hw-pumpkin {
  left: -16px;
  bottom: -12px;
  width: 48px;
  height: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cpath d='M30 18c0-7 5-12 9-13 0 4-3 7-2 11' fill='%234d8a38' stroke='%23215c22' stroke-width='1.4'/%3E%3Cellipse cx='22' cy='36' rx='16' ry='18' fill='%23e15f10' stroke='%23a33b10' stroke-width='1.4'/%3E%3Cellipse cx='43' cy='36' rx='16' ry='18' fill='%23e15f10' stroke='%23a33b10' stroke-width='1.4'/%3E%3Cellipse cx='32' cy='35' rx='15' ry='20' fill='%23ff8c1a' stroke='%23c25212' stroke-width='1.4'/%3E%3Cpath d='M16 30l7-7 2 8zM40 31l2-8 8 7z' fill='%23ffe38a'/%3E%3Cpath d='M22 42c3 7 16 8 20 1-4 3-16 3-20-1z' fill='%23331814'/%3E%3Cpath d='M26 44l3-2 2 5-3 1zM38 43l4 1-1 5-3-2z' fill='%23ffe38a'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(255, 135, 23, 0.55));
  animation: hw-pumpkin-glow 3s ease-in-out infinite;
}

@keyframes hw-pumpkin-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 135, 23, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 135, 23, 0.75));
  }
}

html.event-theme-halloween .competition-card:not([class*='competition-card--game-']):hover {
  border-color: rgba(232, 93, 4, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

html.event-theme-halloween .countdown-mobile-wrapper,
html.event-theme-halloween.light-theme .countdown-mobile-wrapper,
html.event-theme-halloween .light-theme .countdown-mobile-wrapper {
  position: relative;
  overflow: visible;
  background: rgba(9, 8, 12, 0.88) !important;
  color: #fff !important;
  border: 1px solid rgba(232, 93, 4, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

html.event-theme-halloween .countdown-mobile-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f7f2ff' stroke-width='0.7' stroke-linecap='round'%3E%3Cpath d='M0 0h100M0 0l100 26M0 0l100 58M0 0l70 100M0 0l26 100M0 0v100'/%3E%3Cpath d='M20 0A20 20 0 0 1 0 20M38 0A38 38 0 0 1 0 38M56 0A56 56 0 0 1 0 56M74 0A74 74 0 0 1 0 74M92 0A92 92 0 0 1 0 92'/%3E%3C/svg%3E")
    no-repeat top left / contain;
}

html.event-theme-halloween .hw-countdown-spider {
  position: absolute;
  top: -22px;
  right: 6px;
  width: 48px;
  height: 66px;
  z-index: 3;
  pointer-events: none;
}

html.event-theme-halloween .countdown-mobile-wrapper .countdown-intro-text,
html.event-theme-halloween.light-theme .countdown-mobile-wrapper .countdown-intro-text {
  color: #fff !important;
  text-shadow: none;
}

html.event-theme-halloween .home-hero-title__accent {
  color: var(--primary);
  background: none;
  -webkit-text-fill-color: var(--primary);
}

html.event-theme-halloween .site-footer {
  border-top: 1px solid rgba(232, 93, 4, 0.28);
}

html.event-theme-halloween .mobile-bottom-nav {
  border-top: 1px solid rgba(232, 93, 4, 0.35);
  background-color: var(--navbar-bg);
}

html.event-theme-halloween .nav-item-bottom.active,
html.event-theme-halloween .nav-item-bottom.active i {
  color: var(--primary) !important;
}

html.event-theme-halloween .nav-item-bottom.active::after {
  background: var(--primary);
  box-shadow: none;
}

html.event-theme-halloween .trustpilot-section,
html.event-theme-halloween #news-ticker-section {
  display: flex;
  align-items: center;
  background-color: #e85d04 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30'%3E%3Cg opacity='.22'%3E%3Cellipse cx='36' cy='17' rx='8' ry='8.5' fill='%239a3412'/%3E%3Cellipse cx='30' cy='17.5' rx='5' ry='7.5' fill='%239a3412'/%3E%3Cellipse cx='42' cy='17.5' rx='5' ry='7.5' fill='%239a3412'/%3E%3Cpath d='M35 9c.4-3.2 3.2-5.2 5.2-5.6' fill='none' stroke='%23166534' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M32 16.2l2.2-2.4 1.2 2.2M38.2 16l1.2-2.4 2.4 2.2' fill='%23fde68a'/%3E%3Cpath d='M32.5 20.5c1.2 2.2 6.2 2.4 7.6 0-1.6 1.2-6 1.2-7.6 0z' fill='%23431a08'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat-x !important;
  background-size: 72px 30px !important;
  background-position: center;
  color: #fff !important;
  min-height: 30px;
  height: 30px;
  z-index: 1060;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

html.event-theme-halloween #news-ticker-content,
html.event-theme-halloween .news-ticker-item,
html.event-theme-halloween .news-ticker-item a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  line-height: 30px;
  font-size: 0.95rem !important;
  font-weight: 600;
  text-decoration: none;
}

html.event-theme-halloween .notification-count {
  background-color: var(--primary) !important;
  color: #fff !important;
}

html.event-theme-halloween .progress-bar {
  background: var(--primary) !important;
}

html.event-theme-halloween .marquee-middle {
  border-block-color: rgba(232, 93, 4, 0.35);
  background: transparent;
}

@media (max-width: 991.98px) {
  html.event-theme-halloween .hw-web {
    width: 46px;
    height: 46px;
    opacity: 0.36;
  }

  html.event-theme-halloween .hw-web--r {
    width: 38px;
    height: 38px;
    opacity: 0.28;
  }

  html.event-theme-halloween .hw-pumpkin {
    width: 46px;
    height: 44px;
    left: -12px;
    bottom: -10px;
    animation: none;
    filter: none;
  }

  html.event-theme-halloween .hw-lottie--bats {
    display: block;
    width: 96px;
    top: 78px;
    opacity: 0.75;
    animation-duration: 11s;
  }

  html.event-theme-halloween .hw-lottie--cat {
    display: block;
    width: 104px;
    left: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    opacity: 0.95;
    animation: hw-cat-peek 4.8s ease-in-out infinite;
  }

  html.event-theme-halloween .homepage-mobile-grid .competition-card {
    overflow: visible;
  }

  /* overflow-x:hidden on this grid computes overflow-y to auto and traps the first touch swipe */
  html.event-theme-halloween .featured-competitions .container,
  html.event-theme-halloween .competitions-section .container,
  html.event-theme-halloween .homepage-mobile-grid.row {
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
  }

  html.event-theme-halloween .hw-lottie--spider {
    width: 34px;
    right: 10px;
    opacity: 0.65;
  }

  html.event-theme-halloween .site-header .navbar,
  html.event-theme-halloween #main-navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.event-theme-halloween .hw-lottie {
    display: none;
  }

  html.event-theme-halloween .hw-pumpkin,
  html.event-theme-halloween .hw-lottie--cat {
    animation: none;
  }
}