/* voidpixelstudios — spotlight = a per-game preview REEL (adopts each game's vibe via --bg1/--bg2/--acc).
   Cinematic hero → guided multi-beat walkthrough (gameplay, mobile, and honest on-deck slots). */
.spot { background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2)); min-height: 100dvh; overflow-x: hidden; }

/* atmospheric per-game backdrop (interactive parallax) + readability veil */
.sp-bg { position: fixed; inset: -8%; z-index: -2; background-size: cover; background-position: center; filter: blur(2px); transform: scale(1.08); will-change: transform; }
.sp-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg1) 40%, transparent) 0%, color-mix(in srgb, var(--bg2) 74%, transparent) 55%, color-mix(in srgb, var(--bg2) 94%, transparent) 100%); }

/* shared media block */
.media { position: relative; overflow: hidden; }
.media .poster, .media .loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media .loop { opacity: 0; transition: opacity .7s ease; }
.media.playing .loop { opacity: 1; }

/* ---------- top bar ---------- */
.sp-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 40px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg1) 58%, transparent); transition: background .3s, box-shadow .3s; }
.sp-top.solid { background: color-mix(in srgb, var(--bg1) 88%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,.3); }
.back { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.back:hover { background: color-mix(in srgb, #fff 6%, transparent); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.sp-top-r { display: flex; align-items: center; gap: 12px; }
.sp-top .badge.early { background: color-mix(in srgb, var(--early) 24%, #000 50%); color: var(--early); border: 1px solid color-mix(in srgb, var(--early) 45%, transparent); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }

/* ---------- hero (the hook beat) ---------- */
.sp-hero { position: relative; max-width: 1120px; margin: clamp(12px,3vw,28px) auto 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/9;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--hairline)); }
@media (max-width: 720px) { .sp-hero { border-radius: var(--r-lg); aspect-ratio: 4/3; margin-inline: clamp(10px,3vw,20px); } }
.sp-hero-media { position: absolute; inset: 0; }
.sp-hero-grad { position: absolute; inset: 0; background:
  radial-gradient(90% 80% at 22% 92%, rgba(0,0,0,.5), transparent 60%),
  linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--bg2) 90%, transparent) 98%); }
.sp-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 4vw, 42px); }
.sp-kicker { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; color: var(--acc-glow); margin: 0 0 10px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.sp-hero-copy h1 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.sp-hook { font-size: clamp(1rem, 2.4vw, 1.35rem); color: #fff; opacity: .94; margin: 12px 0 14px; max-width: 46ch; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.sp-hero-copy .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-hero-copy .tag { font-size: 11px; font-weight: 600; color: #fff; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, #000 40%, transparent); border: 1px solid color-mix(in srgb, #fff 20%, transparent); backdrop-filter: blur(4px); }

/* play button */
.sp-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.hero-play { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: 0; padding: 13px 24px 13px 15px; border-radius: 999px; background: var(--acc); color: var(--acc-text); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; box-shadow: 0 10px 30px color-mix(in srgb, var(--acc) 50%, transparent); transition: transform .2s var(--spring), box-shadow .2s; }
.hero-play:hover, .hero-play:focus-visible { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 40px color-mix(in srgb, var(--acc) 60%, transparent); }
.hero-play .tri { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--acc-text) 16%, transparent); }
.hero-play .tri svg { width: 18px; height: 18px; margin-left: 2px; }
.hero-play.mini { padding: 8px 16px 8px 9px; font-size: .9rem; }
.hero-play.mini .tri { width: 26px; height: 26px; } .hero-play.mini .tri svg { width: 14px; height: 14px; }
.hp-t b { font-weight: 500; opacity: .9; }
.hero-controls { color: #fff; opacity: .82; font-size: .9rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* ---------- the reel ---------- */
.reel { max-width: 1080px; margin: clamp(40px,7vw,80px) auto 0; padding: 0 clamp(16px,4vw,40px); }
.reel-head { margin-bottom: clamp(20px,3vw,36px); }
.reel-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 700; color: var(--acc-glow); margin: 0 0 8px; }
.reel-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.reel-head h2 span { color: var(--faint); font-weight: 500; font-size: .62em; letter-spacing: 0; }
.beats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(20px,3.5vw,44px); counter-reset: beat; }

.beat { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(18px,3vw,40px); align-items: center; }
.beat.flip { grid-template-columns: 1fr 1.15fr; }
.beat.flip .beat-media { order: 2; }
@media (max-width: 760px) { .beat, .beat.flip { grid-template-columns: 1fr; gap: 16px; } .beat.flip .beat-media { order: 0; } }

.beat-media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; border: 1px solid color-mix(in srgb, var(--acc) 24%, var(--hairline)); box-shadow: 0 20px 50px rgba(0,0,0,.4); background: #05060a; }
.beat-media .media { position: absolute; inset: 0; }

.beat-copy { min-width: 0; }
.beat-copy .beat-k { counter-increment: beat; display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--acc-glow); margin: 0 0 12px; }
.beat-copy .beat-k::before { content: counter(beat, decimal-leading-zero); font-family: var(--font-display); font-size: 12px; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding: 3px 8px; border-radius: 8px; letter-spacing: 0; }
.beat-copy .beat-k .bk { width: 15px; height: 15px; }
.beat-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.beat-cap { color: color-mix(in srgb, #fff 82%, transparent); font-size: 1.04rem; line-height: 1.6; margin: 10px 0 0; }

/* gameplay callouts */
.callouts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.callouts li { display: flex; gap: 12px; align-items: flex-start; }
.callouts .co-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--acc-text); background: var(--acc); box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 38%, transparent); }
.callouts .co-ic .i { width: 18px; height: 18px; }
.callouts .co-label { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--acc-glow); }
.callouts li p { margin: 2px 0 0; color: color-mix(in srgb, #fff 84%, transparent); font-size: .95rem; line-height: 1.4; }

/* device (mobile beat) frame */
.beat-media .device { position: absolute; inset: 6% 24%; border-radius: 26px; overflow: hidden; border: 3px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.6); background: #000; }
@media (max-width: 760px) { .beat-media .device { inset: 6% 18%; } }
.beat-media .device .media { position: absolute; inset: 0; }
.beat-media .device .dev-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 34%; height: 6px; border-radius: 999px; background: rgba(0,0,0,.7); z-index: 3; }
.beat.mob-glow .beat-media { background: radial-gradient(80% 80% at 50% 30%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), #05060a; }

/* honest on-deck (planned) slot */
.beat.planned .beat-media.planned-slot { display: grid; place-items: center; background:
  repeating-linear-gradient(135deg, color-mix(in srgb, var(--acc) 6%, transparent) 0 14px, transparent 14px 28px),
  color-mix(in srgb, var(--bg2) 70%, transparent); border-style: dashed; border-color: color-mix(in srgb, var(--acc) 34%, var(--hairline)); box-shadow: none; }
.planned-slot .ps-in { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--acc-glow); }
.planned-slot .ps-ic { width: 40px; height: 40px; opacity: .8; }
.planned-slot .ps-tag { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--acc-glow); padding: 6px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.beat.planned .beat-copy { opacity: .96; }
.planned-note { margin: 12px 0 0; font-size: .86rem; color: var(--faint); font-style: italic; }

/* ---------- about / early ---------- */
.sp-about { max-width: 760px; margin: clamp(40px,6vw,72px) auto 0; padding: 0 clamp(16px,4vw,40px); }
.sp-about > p { color: color-mix(in srgb, #fff 82%, transparent); font-size: 1.08rem; line-height: 1.65; }
.note { max-width: 70ch; margin: 16px 0 0; color: var(--muted); font-size: .9rem; }
.note strong { color: var(--text); }
.earlybar { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 20px; border-radius: var(--r-md); background: color-mix(in srgb, var(--early) 10%, transparent); border: 1px solid color-mix(in srgb, var(--early) 32%, transparent); }
.earlybar .badge.early { flex: none; background: color-mix(in srgb, var(--early) 24%, #000 40%); color: var(--early); border: 1px solid color-mix(in srgb, var(--early) 45%, transparent); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.earlybar p { margin: 0; color: var(--text); font-size: .96rem; }
.concept { margin: 26px 0 0; }
.concept img { width: 100%; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--hairline)); display: block; }
.concept figcaption { margin-top: 10px; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.concept .ctag { flex: none; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--acc-glow); padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }

/* ---------- play CTA band ---------- */
.sp-play-cta { max-width: 1080px; margin: clamp(40px,6vw,72px) auto 0; padding: 0 clamp(16px,4vw,40px); }
.pc-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(22px,3vw,36px);
  border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--hairline));
  background: radial-gradient(90% 140% at 12% 10%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%), color-mix(in srgb, var(--bg2) 70%, transparent); }
.pc-band h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.pc-band p { color: var(--muted); margin: 8px 0 0; }

/* ---------- fullscreen game overlay ---------- */
.gamefs { position: fixed; inset: 0; z-index: 1000; background: #05060a; display: flex; flex-direction: column; opacity: 0; transition: opacity .2s ease; }
.gamefs.show { opacity: 1; }
.gamefs[hidden] { display: none; }
.gamefs-bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #0b0c12; border-bottom: 1px solid var(--hairline); }
.gamefs-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.gamefs-close { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--hairline-2); background: transparent; color: var(--text); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; font-family: var(--font-body); transition: background .2s, border-color .2s; }
.gamefs-close:hover, .gamefs-close:focus-visible { background: color-mix(in srgb, #fff 8%, transparent); border-color: var(--acc); }
.gamefs-close svg { width: 15px; height: 15px; }
.gamefs-mount { flex: 1; position: relative; background: #000; }
.gamefs-mount iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sp-foot { border-top: 1px solid color-mix(in srgb, #fff 8%, transparent); margin-top: clamp(40px,6vw,80px); padding: 26px clamp(16px,4vw,40px); display: flex; justify-content: center; }