/* Components used by the multi-page site (loaded after site.css) */

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--yellow);color:var(--royal);font-family:var(--label);font-weight:800;padding:.6em 1em;border-radius:10px}
.skip:focus{left:8px}

/* reveal on scroll (site.js adds .in) */
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

.wrap-xs{width:min(820px,100% - 2*var(--gutter));margin-inline:auto}
.center{text-align:center}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:#e6e3fa}
.stack>*+*{margin-top:1.1em}
body{font-size:1rem}
p{max-width:70ch}
.section-head p,.page-head p,.cta-box p,.center p,p.center,.reel-hint,.game-help{margin-inline:auto;max-width:none}
.section-head p{max-width:60ch}.page-head p.sub{max-width:58ch}

/* ---------- video player (self-hosted) ---------- */
.player{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;
  border:4px solid var(--pink);box-shadow:0 0 0 6px var(--navy),0 0 0 9px var(--cyan),0 0 60px rgba(248,89,241,.4)}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.player .play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(rgba(10,4,58,.15),rgba(10,4,58,.55))}
.player .play i{width:clamp(72px,11vw,120px);aspect-ratio:1;border-radius:50%;background:var(--yellow);display:grid;place-items:center;
  box-shadow:0 0 0 8px rgba(251,253,253,.25),0 0 50px rgba(248,192,0,.85);transition:transform .25s}
.player .play:hover i{transform:scale(1.1)}
.player .play svg{width:40%;margin-left:8%;fill:var(--royal)}
.player .play b{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;text-align:left;font-family:var(--label);font-weight:800;font-size:.95rem;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.player.playing .play{display:none}
.video-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

/* ---------- step cards ---------- */
.steps-grid{display:grid;gap:34px 22px;grid-template-columns:repeat(4,1fr);counter-reset:s;padding-top:20px}
@media (max-width:1000px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.steps-grid li{list-style:none;position:relative;background:var(--pink);border-radius:20px;padding:12px;
  box-shadow:0 0 0 3px var(--cyan),0 0 34px rgba(0,192,248,.3);transition:transform .25s}
.steps-grid li:nth-child(odd){transform:rotate(-1.2deg)}
.steps-grid li:nth-child(even){transform:rotate(1.2deg)}
.steps-grid li:hover{transform:rotate(0) translateY(-6px) scale(1.02);z-index:2}
.steps-grid .n{position:absolute;top:-22px;left:-10px;width:56px;aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--royal);
  display:grid;place-items:center;font-family:var(--display);font-size:1.9rem;box-shadow:0 5px 0 rgba(0,0,0,.35);z-index:3}
.steps-grid img{border-radius:12px;width:100%;aspect-ratio:424/470;object-fit:cover;background:#fff}
.steps-grid h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.answer{max-width:62ch;margin:0 auto 40px;text-align:center;color:#e6e3fa;font-size:1.08rem}
.answer strong{color:var(--yellow)}

/* ---------- hub cards ---------- */
.hub{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.hub a{position:relative;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--white);padding:26px 24px 24px;border-radius:24px;
  background:linear-gradient(160deg,var(--navy-2),var(--ink));border:3px solid var(--c,var(--cyan));box-shadow:0 0 30px color-mix(in srgb,var(--c,var(--cyan)) 30%,transparent);
  transition:transform .25s,box-shadow .25s;overflow:hidden}
.hub a:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 0 50px color-mix(in srgb,var(--c,var(--cyan)) 55%,transparent)}
.hub .ico{font-size:2.6rem;line-height:1;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c,var(--cyan)) 70%,transparent))}
.hub h3{font-size:1.75rem;color:var(--c,var(--cyan))}
.hub p{color:#cfcbef;font-size:.98rem}
.hub .go{margin-top:6px;font-family:var(--display);font-size:1.15rem;color:var(--yellow)}
.hub .go::after{content:" \2192"}
.c-pink{--c:var(--pink)}.c-cyan{--c:var(--cyan)}.c-gold{--c:var(--yellow)}.c-red{--c:var(--red)}

/* ---------- roundup / film lists ---------- */
.film-groups{display:grid;gap:48px}
.film-group h2{font-size:clamp(1.8rem,4.4vw,2.6rem);color:var(--cyan);text-shadow:0 0 18px rgba(0,192,248,.4);margin-bottom:6px}
.film-group>p{margin-bottom:20px;color:#cfcbef}
.films{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));list-style:none}
.film{background:var(--navy-2);border:3px solid var(--purple);border-radius:18px;padding:18px 20px;display:grid;gap:6px;align-content:start}
.film h3{font-size:1.4rem;color:var(--white);line-height:1.1}
.film .yr{font-family:var(--label);font-weight:800;font-size:.8rem;color:var(--pink);letter-spacing:.06em}
.film p{font-size:.95rem;color:#dcd8f7}
.film .snack{margin-top:6px;font-size:.9rem;color:var(--yellow)}
.film .snack b{font-family:var(--label);font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{font-family:var(--label);font-weight:700;font-size:.72rem;padding:.25em .7em;border-radius:999px;border:2px solid var(--cyan);color:var(--cyan)}
.note{font-size:.9rem;color:var(--purple);border-left:4px solid var(--pink);padding:.4em 0 .4em 1em;margin-top:30px}

/* ---------- reel (swipe) ---------- */
.reel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--gutter) 26px;margin-inline:calc(-1*var(--gutter));-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--pink) transparent}
.reel-item{flex:none;scroll-snap-align:center;width:min(78vw,300px);position:relative;border-radius:22px;overflow:hidden;background:#000;border:3px solid var(--pink);
  box-shadow:0 0 30px rgba(248,89,241,.3);aspect-ratio:9/16}
.reel-item.landscape{width:min(86vw,520px);aspect-ratio:16/9}
.reel-item.square{aspect-ratio:1}
.reel-item video,.reel-item img{width:100%;height:100%;object-fit:cover;display:block}
.reel-item .play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;background:linear-gradient(transparent 55%,rgba(10,4,58,.75));color:#fff}
.reel-item .play i{width:64px;aspect-ratio:1;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 0 30px rgba(248,192,0,.7)}
.reel-item .play svg{width:38%;margin-left:8%;fill:var(--royal)}
.reel-item.playing .play{display:none}
.reel-item .cap{position:absolute;left:12px;right:12px;bottom:10px;font-size:.8rem;font-weight:700;pointer-events:none;text-shadow:0 1px 6px #000}
.reel-hint{text-align:center;font-family:var(--label);font-weight:800;font-size:.72rem;letter-spacing:.22em;color:var(--purple)}

/* ---------- photo gallery ---------- */
.gallery{columns:3 260px;column-gap:16px}
.gallery figure{break-inside:avoid;margin-bottom:16px;border-radius:18px;overflow:hidden;border:3px solid var(--cyan);box-shadow:0 0 24px rgba(0,192,248,.2);position:relative;background:var(--navy-2);cursor:zoom-in}
.gallery figure:nth-child(3n+2){border-color:var(--pink);box-shadow:0 0 24px rgba(248,89,241,.22)}
.gallery figure:nth-child(3n){border-color:var(--yellow);box-shadow:0 0 24px rgba(248,192,0,.18)}
.gallery img{width:100%;height:auto;display:block;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.04)}

/* ---------- misc ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pill{font-family:var(--label);font-weight:800;font-size:.8rem;padding:.5em 1em;border-radius:999px;border:2px solid var(--pink);color:var(--pink)}
.two-col{display:grid;gap:36px;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.prose-page h2{font-size:clamp(1.7rem,4.2vw,2.4rem);color:var(--cyan);margin-top:1.8em}
.prose-page h3{font-size:1.5rem;color:var(--pink);margin-top:1.4em}
.prose-page p,.prose-page li{color:#e6e3fa;line-height:1.75}
.prose-page ul{padding-left:1.3em}
.prose-page a{color:var(--cyan)}
.prose-page>*+*{margin-top:1em}

/* ---------- numbered guide ---------- */
.guide{list-style:none;counter-reset:g;display:grid;gap:26px;margin-top:38px}
.guide li{counter-increment:g;position:relative;padding-left:76px}
.guide li::before{content:counter(g);position:absolute;left:0;top:0;width:54px;aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--royal);
  display:grid;place-items:center;font-family:var(--display);font-size:1.9rem;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.guide h2{margin-top:0;font-size:clamp(1.4rem,3.2vw,1.9rem)}
.guide p{margin-top:.4em}

h1,h2,.section-head h2,.page-head h1{text-wrap:balance}

.snd-badge{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(10,4,58,.78);border:2px solid var(--cyan);display:grid;place-items:center;font-size:.95rem;pointer-events:none}

/* never let a tilted banner or negative margin create sideways scrolling on phones */
main{overflow-x:clip}