/* ============================================================
   Waltz of the Wizard game site (waltz/index.html).
   Loads AFTER assets/site.css and reuses its components (store tiles, feature
   points, awards, Skully portrait, social pills, trailer pop-up). This file
   re-tints the palette and lays out the game page: buy first, details below.
   ============================================================ */
.wotw{
  --grad-a:#ffe3a3;           /* candle gold */
  --grad-b:#cfa6ff;           /* arcane violet */
  --cyan:#dcc8ff;             /* accent: focus rings, eyebrows */
  --void:#07030f;
}

/* backdrop: the shared blue light rays, pushed toward violet */
.wotw .ray-base{filter:hue-rotate(42deg) saturate(1.12) brightness(.92)}
.wotw .ray-magenta{background-image:linear-gradient(44deg,rgba(130,40,190,.42) 0%,rgba(130,40,190,0) 42%)}
.wotw .vignette{background:
  radial-gradient(120% 85% at 60% 42%,rgba(12,3,24,.38) 35%,rgba(10,2,22,.68) 100%),
  linear-gradient(to bottom,rgba(10,2,22,.35),rgba(10,2,22,0) 22%)}
.wotw h2{text-wrap:balance}

/* ---- 1 · buy: key art beside the store buttons, all on the first screen ---- */
.w-hero{position:relative;z-index:1;min-height:100dvh;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(2rem,4.5vw,4.5rem);
  padding:clamp(2rem,6vh,4rem) var(--pad) clamp(4.5rem,10vh,6rem)}
.w-keyart{position:relative;margin:0;transform:perspective(1400px) rotateY(6deg) rotateX(1.5deg);animation:w-float 9s ease-in-out infinite}
.w-keyart::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(183,125,255,.55),rgba(183,125,255,.18) 55%,rgba(183,125,255,0))}
.w-keyart img{width:100%;border-radius:18px;border:1px solid rgba(220,200,255,.28);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 70px -18px rgba(183,125,255,.75)}
@keyframes w-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

.w-buy h1{font-size:clamp(2rem,3.1vw,2.95rem);line-height:1.06;text-transform:none;white-space:normal;text-wrap:balance;margin-bottom:1rem}
.w-sub{margin:0;font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--ink-body)}
.w-sub strong{color:#fff}
.w-buy .eyebrow{margin:clamp(1.6rem,4vh,2.4rem) 0 1.1rem}
.w-buy .eyebrow::before{display:none}
.w-stores{margin:0;max-width:none;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(.8rem,1.6vw,1.4rem)}
.w-stores li{width:clamp(66px,6.4vw,92px)}
.w-stores .app-name{font-size:.74rem}
.w-stores b{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.w-stores .stars{font-size:.78rem}
.w-trailer{display:inline-flex;align-items:center;gap:.75rem;margin-top:clamp(1.6rem,4vh,2.2rem);padding:0;border:0;background:none;
  font:inherit;font-size:1.02rem;font-weight:500;color:var(--ink);cursor:pointer}
.w-play-ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;padding-left:3px;color:#20100a;
  background:linear-gradient(180deg,#ffe9b0,#f0a640);box-shadow:0 8px 22px -8px rgba(255,170,70,.8);transition:transform .2s}
.w-trailer:hover .w-play-ico{transform:scale(1.08)}
.w-trailer:hover span:last-child{color:var(--grad-a)}
.w-more{position:absolute;left:50%;bottom:clamp(1rem,3vh,1.8rem);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;
  font-size:.86rem;color:var(--ink-soft);white-space:nowrap;transition:color .2s}
.w-more svg{animation:w-nudge 2.2s ease-in-out infinite}
.w-more:hover{color:#fff}
@keyframes w-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---- 2 · the game ---- */
.w-game .lede{max-width:44rem}
.w-points{grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--max);margin:clamp(2.2rem,5vh,3rem) auto 0;text-align:left}
.w-strip{margin:clamp(2.4rem,6vh,3.6rem) auto 0;max-width:1680px;padding:0 var(--pad)}
.w-strip img{width:100%;border-radius:16px;border:1px solid rgba(220,200,255,.18);box-shadow:0 30px 60px -28px rgba(0,0,10,.9),0 0 60px -26px rgba(183,125,255,.6)}
.w-worlds-note{margin-top:clamp(1.6rem,4vh,2.4rem)}
.w-worlds-note p{font-size:clamp(.98rem,1.25vw,1.1rem);color:var(--ink-soft)}

/* ---- 3 · skully ---- */
.w-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.w-split .lede{max-width:34rem}
.w-skully{max-width:340px;box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 80px -16px rgba(196,120,255,.7);animation:w-eyes 5s ease-in-out infinite}
@keyframes w-eyes{0%,100%{box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 70px -20px rgba(196,120,255,.55)}
  50%{box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 100px -12px rgba(206,140,255,.9)}}
.w-skully-actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* ---- 4 · honors ---- */
.w-honors{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.wotw .co-stats li{background:linear-gradient(140deg,rgba(207,166,255,.12),rgba(255,255,255,.025));border-color:rgba(207,166,255,.2)}
@media (min-width:1000px){.w-awards li.one-line > div{white-space:nowrap}}


/* ---- footer ---- */
.w-foot{position:relative;z-index:1;display:grid;justify-items:center;gap:1.3rem;text-align:center;
  padding:clamp(2.4rem,6vh,3.6rem) var(--pad) 2rem;border-top:1px solid var(--rule-soft);
  background:linear-gradient(to bottom,rgba(6,3,22,0),rgba(6,3,22,.7) 40%)}
.w-by{display:inline-flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--ink-soft);transition:color .2s}
.w-by img{width:34px;filter:drop-shadow(0 0 10px rgba(140,205,255,.4))}
.w-by:hover{color:#fff}
.w-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;font-size:.82rem;color:var(--ink-faint)}
.w-legal a:hover{color:#fff}

/* ---- responsive ---- */
@media (max-width:1100px){.w-points{grid-template-columns:1fr 1fr;max-width:44rem}}
@media (max-width:920px){
  .w-hero{grid-template-columns:1fr;min-height:0;gap:1.8rem;padding-top:1.2rem;padding-bottom:4.5rem;text-align:center}
  .w-keyart{max-width:620px;width:100%;margin:0 auto;transform:none}
  .w-buy{max-width:34rem;margin:0 auto}
  .w-buy .eyebrow::before{display:block}
  .w-stores{justify-content:center;flex-wrap:wrap;gap:1.4rem 1.2rem;max-width:22rem;margin:0 auto}
  .w-stores li{width:84px}
  .w-split,.w-honors{grid-template-columns:1fr}
  .w-skully{max-width:260px;margin:0 auto}
}
@media (max-width:640px){
  .w-points{grid-template-columns:1fr}
  .w-strip{padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .w-strip::-webkit-scrollbar{display:none}
  .w-strip img{width:auto;max-width:none;height:230px;border-radius:0;border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){.w-keyart,.w-skully,.w-more svg{animation:none}}