/* SnowRSPS WEB-OPTIMIZE-10: CLS + missing-image fixes. Visuals stay the same.
   Load AFTER snow-wo7.css. Do not remove earlier snow-wo* layers. */

/* 1) Lock the top ticker to the slim 30px height snow-wo4 already wanted.
      Inline CSS used height: clamp(40px, 8vw, 45px) and then wo4 dropped it
      to 30px after/at paint; Orbitron/Rajdhani swap also resized the bar.
      That was 0.172 of the 0.187 desktop CLS (the failing agentic check). */
.marquee-system,
.snow-wo4 .marquee-system {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  contain: layout style;
}
.marquee-system .marquee-track,
.marquee-system .ticker-text {
  max-height: 30px;
  line-height: 28px;
  white-space: nowrap;
}
.marquee-system,
.marquee-system .ticker-text,
.marquee-system .ticker-text span,
.marquee-system #ticker-time,
.marquee-system #ticker-time-2{
  font-family:system-ui,-apple-system,sans-serif!important;
  font-size:12px!important;
  line-height:28px!important;
  font-synthesis:none;
}


/* 2) Toast used `top: -100px` -> `top: 90px`, which counts as layout shift.
      Keep the same slide, but animate transform only (not top). */
#toast-container {
  top: 90px !important;
  transform: translate(-50%, calc(-100% - 140px));
  will-change: transform;
}
#toast-container.active {
  top: 90px !important;
  transform: translate(-50%, 0);
}

/* 3) Seasonal fallback-*.jpg files are not on the host (theme-winter 404s
      fallback-winter.jpg). Videos still cover the hero. Use a dark wash
      so the browser does not request a missing file. */
body.theme-winter #bg-slider-wrapper,
body.theme-christmas #bg-slider-wrapper,
body.theme-spring #bg-slider-wrapper,
body.theme-summer #bg-slider-wrapper,
body.theme-autumn #bg-slider-wrapper,
body.theme-newyear #bg-slider-wrapper,
body.theme-valentine #bg-slider-wrapper,
body.theme-easter #bg-slider-wrapper,
body.theme-independence #bg-slider-wrapper,
body.theme-halloween #bg-slider-wrapper,
body.theme-thanksgiving #bg-slider-wrapper {
  background-image: none !important;
  background-color: #041018;
}

/* 4) Two ways to play — reserved heights so the new block cannot shift the page. */
.wo10-playways{
  position:relative;z-index:10;
  width:min(1316px,calc(100% - 64px));
  margin:8px auto 28px;
  min-height:560px;
  contain:layout style;
}
.wo10-playways-inner{min-height:560px}
.wo10-playways-head{margin:0 0 16px;min-height:72px}
.wo10-playways-head .wo4-eyebrow{margin-bottom:8px}
.wo10-playways-head h2{
  margin:0;
  font:800 clamp(26px,3.4vw,40px)/1.15 var(--font-display,Orbitron,system-ui,sans-serif);
  letter-spacing:.03em;
  color:#f4fbff;
  text-wrap:balance;
  text-shadow:0 0 24px rgba(38,230,255,.28);
}
.wo10-playways-head h2 span{display:inline;color:#9fdfff;font-weight:700}
.wo10-playways-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  min-height:480px;
}
.wo10-way{
  box-sizing:border-box;
  display:flex;flex-direction:column;
  min-height:480px;
  padding:26px 26px 22px;
  border-radius:22px;
  color:#e9f8ff;
  overflow:hidden;
  contain:layout style;
  transition:transform .25s,box-shadow .25s;
}
.wo10-way-full{
  background:
    radial-gradient(90% 80% at 0% 0%,rgba(38,230,255,.18),transparent 55%),
    radial-gradient(70% 60% at 100% 100%,rgba(245,197,66,.10),transparent 50%),
    linear-gradient(155deg,#0b1d31f2,#060d18f5);
  border:1px solid rgba(122,243,255,.38);
  box-shadow:0 22px 60px #0008,inset 0 1px #ffffff18,0 0 40px rgba(38,230,255,.08);
}
.wo10-way-mini{
  background:
    radial-gradient(80% 70% at 100% 0%,rgba(255,90,31,.16),transparent 55%),
    linear-gradient(155deg,#1a1010f2,#0c0a12f5);
  border:1px solid rgba(255,140,64,.32);
  box-shadow:0 18px 48px #0007,inset 0 1px #ffffff14;
  min-height:480px;
}
.wo10-way-kicker{
  margin:0 0 8px;
  font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7af3ff;
  min-height:14px;
}
.wo10-way-mini .wo10-way-kicker{color:#ffb077}
.wo10-way h3{
  margin:0 0 10px;
  font:800 clamp(22px,2.4vw,30px)/1.15 var(--font-display,Orbitron,system-ui,sans-serif);
  letter-spacing:.02em;
  color:#f4fbff;
}
.wo10-way-lead{
  margin:0 0 14px;
  font:400 16px/1.55 system-ui,-apple-system,sans-serif;
  color:#c5dff0;
  max-width:62ch;
}
.wo10-way-features{
  margin:0 0 16px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.wo10-way-features li{
  position:relative;
  padding:8px 12px 8px 28px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(122,243,255,.12);
  font:500 14.5px/1.4 system-ui,sans-serif;
  color:#e9f8ff;
  min-height:22px;
}
.wo10-way-features li::before{
  content:"";
  position:absolute;left:11px;top:50%;
  width:7px;height:7px;margin-top:-3px;
  border-radius:50%;
  background:#26e6ff;
  box-shadow:0 0 8px #26e6ff;
}
.wo10-way-features b{color:#7af3ff;font-weight:700}
.wo10-way-note{
  margin:0 0 16px;
  font:400 13.5px/1.5 system-ui,sans-serif;
  color:#9bb8c9;
}
.wo10-way-cta{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  font:800 15px/1 system-ui,sans-serif;
  text-decoration:none;
  width:fit-content;
  max-width:100%;
  transition:transform .2s,box-shadow .2s;
}
.wo10-way-full .wo10-way-cta{margin-top:auto}
.wo10-way-cta-full{
  color:#03121c;
  background:linear-gradient(100deg,#eaffff,#7af3ff 45%,#26e6ff);
  box-shadow:0 8px 28px #26e6ff44;
}
.wo10-way-cta-mini{
  color:#1a0a06;
  background:linear-gradient(100deg,#ffe7d2,#ffb077 45%,#ff6a2a);
  box-shadow:0 8px 28px #ff6a2a44;
}
.wo10-way-cta:hover,.wo10-way-cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 34px #26e6ff66;
}
.wo10-way-cta-mini:hover,.wo10-way-cta-mini:focus-visible{box-shadow:0 12px 34px #ff6a2a66}
@media (hover:hover){
  .wo10-way-full:hover{transform:translateY(-3px);box-shadow:0 26px 70px #0009,0 0 48px rgba(38,230,255,.16)}
  .wo10-way-mini:hover{transform:translateY(-3px);box-shadow:0 22px 60px #0009,0 0 36px rgba(255,106,42,.16)}
}
@media (max-width:800px){
  .wo10-playways{width:calc(100% - 44px);margin:4px auto 22px;min-height:0}
  .wo10-playways-inner{min-height:0}
  .wo10-playways-grid{grid-template-columns:1fr;min-height:0;gap:12px}
  .wo10-way,.wo10-way-mini{min-height:0;padding:22px 20px}
  .wo10-way-full{min-height:280px}
  .wo10-way-mini{min-height:360px}
  .wo10-way-cta{width:100%}
  .wo10-playways-head{min-height:0}
}
@media (max-width:480px){
  .wo10-playways{width:calc(100% - 32px)}
  .wo10-way-lead{font-size:15px}
  .wo10-way-features li{font-size:14px}
}

/* 5) Mini card: How it works + compact FAQ (WO10b). Heights reserved above. */
.wo10-how-title{
  margin:2px 0 8px;
  font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffb077;
  min-height:14px;
}
.wo10-how{
  margin:0 0 12px;
  padding:0;
  list-style:none;
  counter-reset:wo10how;
  display:grid;
  gap:8px;
}
.wo10-how li{
  counter-increment:wo10how;
  position:relative;
  padding:8px 10px 8px 34px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,140,64,.16);
  font:400 13.5px/1.45 system-ui,sans-serif;
  color:#ecd9cc;
  min-height:36px;
}
.wo10-how li::before{
  content:counter(wo10how);
  position:absolute;left:8px;top:8px;
  width:18px;height:18px;
  border-radius:50%;
  display:grid;place-items:center;
  font:800 11px/18px system-ui,sans-serif;
  color:#1a0a06;
  background:linear-gradient(180deg,#ffe7d2,#ff6a2a);
  box-shadow:0 0 8px #ff6a2a88;
}
.wo10-how b{color:#ffe7d2;font-weight:700}
.wo10-mini-faq{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.wo10-mini-faq li{
  font:400 13px/1.45 system-ui,sans-serif;
  color:#c9b2a4;
  min-height:18px;
}
.wo10-mini-faq b{color:#ffe7d2;font-weight:700}
.wo10-way-mini .wo10-way-lead b{color:#ffe7d2}
@media (max-width:800px){
  .wo10-how li{font-size:13.5px;min-height:0}
  .wo10-mini-faq li{min-height:0}
  /* Keep the Mini CTA above the fixed 60px #music-widget (bottom:20px; right:20px). */
  .wo10-way-mini{padding-bottom:88px}
}