/* Halloween atmosphere. Local assets only; no extra libraries or trackers. */
html { scrollbar-gutter: stable; }
.gn-app {
  --orange: #f5ab69;
  --line: #d6b29524;
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 12% 9%, #b85a2420, transparent 29%),
    radial-gradient(ellipse at 95% 29%, #ba65200c, transparent 32%), #182934;
}
.gn-app > main, .site-header, .site-footer { position: relative; z-index: 1; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #f4b878; }
.site-header { background: #10212ef2; border-bottom-color: #d395542b; }
.welcome-reopen {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 9px 12px;
  border: 1px solid #e3a36840; border-radius: 8px;
  background: #d7914110; color: #efbd8e; font-size: 11px; font-weight: 600;
}
.welcome-reopen svg { width: 19px; height: 19px; }
.welcome-reopen:hover { background: #d7914126; border-color: #e3a36880; }
.nav-active::after { box-shadow: 0 0 16px #ed934b5c; }
.hero h1 span { text-shadow: 0 4px 42px #ed8c3020; }
.hero-web, .deck-web {
  display: block; position: absolute; pointer-events: none;
  color: #d2ab86; opacity: .16;
}
.hero-web { width: 150px; height: 150px; top: 4px; right: 0; }
.deck-web { width: 100px; height: 100px; right: 0; top: 0; opacity: .12; }
.game-zone {
  position: relative;
  background: radial-gradient(ellipse at 80% 0, #ad5d2821, transparent 65%), #10212e;
  border-color: #d58b493c;
  box-shadow: 0 18px 60px #06111f33, 0 0 60px #bd581007;
}
.game-heading, .game-status { position: relative; }
.game-heading .eyebrow { color: #bfaa96; }
.rules-button { border-color: #d59a6140; color: #e7bf99; }
.rules-button:hover { background: #d59a6117; }
.card-back {
  background: radial-gradient(ellipse at 50% 25%, #a666352b, transparent 75%),
    linear-gradient(145deg, #302c30, #172735);
  border-color: #bf8a5845;
}
.card-back::before { border-color: #bd8b5824; }
.card-no { color: #c6a98e; }
.card-back-copy strong { color: #f0ded0; }
.card-back-copy > span { color: #b4a398; }
.deck-note, .deck-note svg { color: #c7ac96; }
.mascot-orbit {
  display: block; position: absolute; z-index: -1; pointer-events: none;
  inset: 20% 10% 8%; border-radius: 50%;
  background: radial-gradient(ellipse, #dc81232b, #dc812300 70%);
}
.orbit-two { inset: 15% 28% 15% 2%; opacity: .5; }
.scene-star { display: block; position: absolute; color: #e6ac6b; opacity: .7; }
.star-one { left: 8%; top: 18%; font-size: 23px; }
.star-two { right: 12%; top: 4%; font-size: 12px; }
.stash-copy h2 span { color: #eab685; }
.stash-copy .eyebrow, .faq-copy .eyebrow { color: #c6a183; }
.step-top, .text-button { color: #e8b584; }
.channel-strip {
  background: radial-gradient(ellipse at 0 100%, #b66c2521, transparent 65%), #1b303e;
  border-color: #c8935740;
}
.site-footer { border-top-color: #d6a26a29; }
.offer-dialog, .rules-dialog {
  background: radial-gradient(ellipse at top, #9a58232a, transparent 65%), #122431;
  border-color: #d59a6147;
}
.night-atmosphere {
  position: absolute; inset: 76px 0 auto; height: 1050px;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.night-atmosphere::after {
  content: ''; position: absolute; width: 85%; height: 180px; left: -10%; top: 57%;
  background: radial-gradient(ellipse, #c49e7110, transparent 70%);
  animation: mist-drift 16s ease-in-out infinite alternate;
}
.night-moon {
  position: absolute; top: 15px; right: 4.5%; width: 105px; height: 105px;
  border-radius: 50%; opacity: .14;
  background: radial-gradient(circle at 30% 30%, #fbd7aa, #c88043);
  box-shadow: 0 0 70px #ee9e4e50;
}
.night-bat { position: absolute; color: #c79670; opacity: .22; }
.bat-one { right: 2%; top: 140px; width: 55px; height: 29px; transform: rotate(15deg); }
.bat-two { left: 3%; top: 72px; width: 38px; height: 20px; transform: rotate(-20deg); }
.bat-three { right: 13%; top: 42px; width: 29px; height: 16px; transform: rotate(-9deg); }
.night-ember, .welcome-spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #edaa6e; box-shadow: 0 0 10px #e18a31;
  animation: ember-drift 7s ease-in-out infinite; pointer-events: none;
}
.ember-one { top: 22%; left: 4%; }
.ember-two { top: 55%; right: 4%; animation-delay: -2s; }
.ember-three { top: 72%; left: 44%; animation-delay: -4s; }
.ember-four { top: 10%; left: 48%; animation-delay: -1s; }
.is-invited { animation: deck-invitation 1.2s ease-out; }
.ambient-paused .night-atmosphere::after,
.ambient-paused .night-ember,
.dialog-open .night-atmosphere::after,
.dialog-open .night-ember,
.motion-paused .night-atmosphere::after,
.motion-paused .night-ember,
.motion-paused .welcome-gary,
.motion-paused .welcome-spark { animation-play-state: paused; }

/* The entrance is deliberately independent of the card selection state. */
.welcome-dialog {
  color: #f8eee5; font: inherit; padding: 0; margin: auto;
  width: min(980px, calc(100% - 48px)); max-width: none;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: hidden;
  background: #17232c; border: 1px solid #e0a16b59; border-radius: 24px;
  box-shadow: 0 40px 120px #0009, 0 0 90px #d77b1610, inset 0 1px 0 #f4be8112;
}
.welcome-dialog::backdrop { background: #050d15b8; backdrop-filter: blur(7px); }
.welcome-dialog::before {
  content: ''; position: absolute; top: 0; left: 12%; width: 76%; height: 1px;
  background: linear-gradient(90deg, transparent, #ffce9b9c, transparent);
  pointer-events: none; z-index: 4;
}
.welcome-dialog[open] { animation: welcome-in .65s cubic-bezier(.16, 1, .3, 1) both; }
.welcome-dialog[open]::backdrop { animation: backdrop-in .45s ease both; }
.welcome-dialog[open].is-closing { animation: welcome-out .18s ease-in both; }
.welcome-dialog[open].is-closing::backdrop { animation: backdrop-in .18s ease reverse both; }
.welcome-layout {
  display: grid; grid-template-columns: 44% 56%; min-height: 510px;
  max-height: calc(100vh - 42px); max-height: calc(100dvh - 42px);
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: #b5845c50 transparent;
}
.welcome-close {
  top: 12px; right: 12px; z-index: 3; color: #d0b9a5;
  border: 1px solid #c995631f; background: #14202b80;
}
.welcome-close:hover { background: #e7a26918; color: #ffe5cd; }
.welcome-scene {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  border-right: 1px solid #da9b5b1a;
  background: radial-gradient(ellipse at 52% 51%, #b9712933, transparent 62%),
    linear-gradient(145deg, #263039, #20292e 40%, #302b26);
}
.welcome-scene::after {
  content: ''; position: absolute; inset: auto 0 0; height: 100px;
  background: linear-gradient(0deg, #20292ef0, transparent); z-index: 1; pointer-events: none;
}
.welcome-edition {
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute; left: 26px; top: 26px; color: #e9ba8a;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
}
.welcome-edition svg { width: 17px; height: 17px; }
.welcome-moon {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  top: 91px; left: calc(50% - 95px); z-index: -1;
  background: radial-gradient(circle at 35% 30%, #d8a86b30, #e18e3910 75%);
  border: 1px solid #e8b26a17; box-shadow: 0 0 75px #e69a3510;
}
.welcome-gary {
  display: block; position: relative; z-index: 1; width: 118%; max-width: none; height: auto;
  margin-top: 34px; flex-shrink: 0;
  filter: drop-shadow(0 20px 22px #080e1480);
  animation: gary-hover 6s ease-in-out infinite;
}
.welcome-pumpkin { display: none; }
.welcome-host {
  position: absolute; bottom: 32px; left: 15px; right: 15px; z-index: 2;
  color: #bd9980; text-align: center; font-size: 8px; font-weight: 600; letter-spacing: 2px;
}
.welcome-host strong {
  display: block; color: #e3c9b1; font-size: 12px; font-weight: 500;
  letter-spacing: .1px; margin-top: 5px;
}
.welcome-bat { position: absolute; color: #ddb385; opacity: .42; }
.welcome-bat-one { width: 55px; height: 28px; top: 87px; right: 25px; transform: rotate(17deg); }
.welcome-bat-two { width: 33px; height: 18px; top: 130px; left: 29px; transform: rotate(-21deg); opacity: .25; }
.spark-one { top: 35%; left: 9%; }
.spark-two { top: 68%; right: 9%; animation-delay: -2s; }
.spark-three { top: 17%; left: 44%; animation-delay: -4s; }
.welcome-copy {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px 26px; min-width: 0;
  background: radial-gradient(ellipse at 100% 0, #b56d2420, transparent 65%);
}
.welcome-web {
  position: absolute; top: 0; right: 0; width: 145px; height: 145px;
  opacity: .12; color: #d7b08a; pointer-events: none;
}
.welcome-eyebrow {
  display: flex; align-items: center; gap: 8px; color: #cea886;
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px; margin: 0 0 17px;
}
.welcome-copy h2 {
  font-size: clamp(37px, 4vw, 48px); font-weight: 800; letter-spacing: -1.8px;
  line-height: 1.06; margin: 0 0 18px; position: relative;
}
.welcome-copy h2:focus { outline: none; }
.welcome-copy h2 span { color: #f1ae72; }
.welcome-title-break { display: none; }
.welcome-description { font-size: 14px; line-height: 1.75; color: #b7b5b3; margin: 0 0 23px; max-width: 350px; }
.welcome-details {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 27px;
  font-size: 11px; font-weight: 500; color: #d2bba6;
}
.welcome-details > span { display: inline-flex; align-items: center; gap: 7px; }
.welcome-details svg { width: 16px; height: 16px; color: #dda06c; }
.welcome-saved {
  --saved-accent: #efb680;
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  margin-bottom: 24px; border: 1px solid #e5af7840; border-radius: 12px;
  background: linear-gradient(120deg, #b1712c12, #ffffff03);
}
.welcome-saved[data-offer="deposit200"] { --saved-accent: #d3b2f4; }
.welcome-saved[data-offer="spins500"] { --saved-accent: #a1dcd4; }
.welcome-saved-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  flex-shrink: 0; color: var(--saved-accent);
}
.welcome-saved-label { display: block; font-size: 8px; letter-spacing: 1px; color: #c9ae95; }
.welcome-saved strong { display: block; font-size: 17px; line-height: 1.4; color: var(--saved-accent); margin-top: 3px; }
.welcome-saved-requirement { display: block; font-size: 11px; color: #b5b3b0; margin-top: 3px; }
.welcome-start {
  width: 100%; min-height: 54px; gap: 12px; border: 1px solid #ffc89055;
  background: linear-gradient(110deg, #f5b477, #e99a58); box-shadow: 0 6px 25px #d27b2620;
  font-size: 14px;
}
.welcome-start > svg { margin-left: auto; }
.welcome-start > span { margin-left: auto; }
.welcome-later {
  align-self: center; min-height: 44px; padding: 10px 18px; margin: 4px 0 0;
  background: none; font-size: 13px; color: #bbb5ae; border-radius: 6px;
}
.welcome-later:hover { color: #f1d1b4; }
.welcome-terms { margin: 3px 0 0; color: #aaa5a0; font-size: 10px; line-height: 1.6; text-align: center; }
.welcome-dialog[open]:not(.is-closing) .welcome-eyebrow { animation: welcome-content-in .4s .08s both; }
.welcome-dialog[open]:not(.is-closing) #welcomeTitle { animation: welcome-content-in .4s .12s both; }
.welcome-dialog[open]:not(.is-closing) .welcome-description { animation: welcome-content-in .4s .16s both; }
.welcome-dialog[open]:not(.is-closing) :is(.welcome-details, .welcome-saved) { animation: welcome-content-in .4s .2s both; }
.welcome-dialog[open]:not(.is-closing) .welcome-start { animation: welcome-content-in .4s .24s both; }
@keyframes welcome-content-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes mist-drift { from { transform: translateX(-3%); } to { transform: translateX(8%); } }
@keyframes welcome-in { from { opacity: 0; transform: translateY(38px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes welcome-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gary-hover { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-7px); } }
@keyframes ember-drift { 0%, 100% { opacity: .15; transform: translateY(10px); } 50% { opacity: .65; transform: translateY(-12px); } }
@keyframes deck-invitation { 0%, 100% { border-color: #d58b493c; } 35% { border-color: #f0b576; box-shadow: 0 0 40px #e68e3629; } }
@media (max-width: 1050px) {
  .welcome-reopen { padding: 10px; }
  .welcome-reopen > span { display: none; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .welcome-layout { grid-template-columns: 42% 58%; min-height: 500px; }
  .welcome-copy { padding: 48px 32px 24px; }
  .welcome-copy h2 { font-size: 40px; }
  .welcome-edition { left: 20px; font-size: 8px; letter-spacing: 1px; }
  .welcome-gary { width: 126%; }
  .welcome-host strong { font-size: 10px; }
}
@media (max-width: 700px) {
  html { scrollbar-gutter: auto; }
  .night-atmosphere { top: 115px; height: 1150px; }
  .night-moon { width: 72px; height: 72px; right: 2%; top: 5px; opacity: .1; }
  .bat-one { top: 92px; right: 2%; width: 32px; }
  .bat-two { display: none; }
  .bat-three { top: 12px; right: 26%; }
  .hero-web { width: 100px; height: 100px; top: 0; }
  .deck-web { width: 80px; height: 80px; }
  .welcome-dialog {
    position: fixed; inset: 0; margin: auto;
    width: min(460px, calc(100% - 32px)); height: fit-content;
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    border: 1px solid #e0a16b59; border-radius: 22px;
  }
  .welcome-dialog[open] { animation-name: welcome-center-in; }
  .welcome-dialog[open].is-closing { animation-name: welcome-center-out; }
  .welcome-layout {
    grid-template-columns: minmax(0, 1fr) 100px; column-gap: 12px; min-height: 0;
    padding: 42px 22px 20px;
    max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px);
    background: radial-gradient(ellipse at 100% 10%, #b46b221b, transparent 60%);
  }
  .welcome-scene {
    grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-height: 0;
    border: 0; background: none; pointer-events: none; margin: 0;
    /* The transparent artwork and its glow must not meet a rectangular clip. */
    overflow: visible;
  }
  .welcome-scene::before {
    content: ''; position: absolute; width: 150%; aspect-ratio: 1;
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;
    background: radial-gradient(circle, #df8f2624 0%, #df8f260c 38%, transparent 68%);
    pointer-events: none;
  }
  .welcome-scene::after, .welcome-host, .welcome-edition, .welcome-bat-two, .welcome-gary { display: none; }
  .welcome-pumpkin {
    display: block; position: absolute; width: 100%; max-width: 112px; height: auto;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    object-fit: contain; filter: none;
  }
  .welcome-moon { display: none; }
  .welcome-bat-one { top: 8px; right: 4px; width: 29px; opacity: .35; }
  .welcome-copy { display: contents; }
  .welcome-copy > * { grid-column: 1 / -1; }
  .welcome-web { width: 90px; height: 90px; top: auto; bottom: 0; opacity: .08; transform: rotate(90deg); }
  .welcome-copy > .welcome-eyebrow { grid-column: 1; grid-row: 1; font-size: 8px; line-height: 1.7; letter-spacing: .7px; margin-bottom: 10px; }
  .welcome-eyebrow .live-dot { width: 4px; height: 4px; }
  .welcome-copy h2 { grid-column: 1; grid-row: 2; font-size: clamp(28px, 8vw, 34px); letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 14px; overflow-wrap: anywhere; }
  .welcome-title-break { display: block; }
  .welcome-description { grid-row: 3; font-size: 13px; line-height: 1.7; max-width: none; margin-bottom: 16px; }
  .welcome-details { grid-row: 4; gap: 10px 14px; font-size: 11px; margin-bottom: 18px; }
  .welcome-saved { grid-row: 4; margin-bottom: 18px; }
  .welcome-saved strong { font-size: 16px; }
  .welcome-start { grid-row: 5; min-height: 52px; font-size: 14px; }
  .welcome-later { grid-row: 6; justify-self: center; margin-top: 4px; }
  .welcome-terms { grid-row: 7; font-size: 10px; margin-top: 3px; }
  .welcome-close { top: 7px; right: 9px; background: #17232ce6; width: 44px; height: 44px; }
}
@media (max-width: 370px) {
  .welcome-layout { grid-template-columns: minmax(0, 1fr) 76px; column-gap: 8px; padding-inline: 18px; }
  .welcome-copy h2 { font-size: 28px; }
  .welcome-copy > .welcome-eyebrow { font-size: 8px; letter-spacing: .3px; }
  .welcome-description { font-size: 13px; }
  .welcome-details { font-size: 10px; gap: 12px; }
}
@keyframes welcome-center-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes welcome-center-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@media (max-height: 540px) and (min-width: 701px) {
  .welcome-layout { min-height: 0; }
  .welcome-copy { padding-block: 30px 18px; }
  .welcome-copy h2 { font-size: 35px; margin-bottom: 12px; }
  .welcome-description { font-size: 12px; margin-bottom: 15px; }
  .welcome-details { margin-bottom: 16px; }
  .welcome-eyebrow { margin-bottom: 12px; }
  .welcome-edition { top: 20px; }
  .welcome-gary { width: 122%; }
  .welcome-host { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-dialog, .welcome-dialog::backdrop, .welcome-gary,
  .night-ember, .welcome-spark, .is-invited { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .welcome-dialog::backdrop { background: #08101cea; backdrop-filter: none; }
}