/* neon-stage-b2e — fullscreen neon sections; palette follows the keyword game (Olympus purple/gold) — full-screen neon acts, purple/gold Olympus */
:root {
  --bg: #0a0614;
  --bg-elev: #140a22;
  --gold: #f0d078;
  --neon: #b48cff;
  --text: #f4ead8;
  --muted: #b8a8c8;
  --border: rgba(240,208,120,0.32);
  --cta-bg: #f0d078;
  --cta-text: #0a0614;
  --font-display: "Bungee", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --lime: #f0d078;
}
*,*::before,*::after{box-sizing:border-box;}
body.stage-shell{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.5;}
body.stage-shell:has(.stage-act){height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--lime);}
.stage-skip{position:absolute;left:-999px;}
.stage-skip:focus{left:1rem;top:1rem;z-index:50;background:var(--lime);color: var(--cta-text, #0a0614);padding:.4rem;}
.stage-float{position:fixed;top:1rem;left:1rem;right:1rem;z-index:30;display:flex;align-items:center;gap:.7rem;pointer-events:none;}
.stage-float > *{pointer-events:auto;}
.stage-brand{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--lime);font-family:var(--font-display);font-size:1.15rem;text-shadow:0 0 12px var(--lime);}
.stage-18{margin-left:auto;border:1px solid var(--neon);color:var(--neon);padding:.1rem .4rem;}
.stage-burger{background:transparent;color:var(--lime);border:1px solid var(--lime);padding:.35rem .7rem;font:inherit;box-shadow:0 0 10px rgba(240,208,120,.4);}
.stage-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:25;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;}
.stage-overlay.is-open{display:flex;}
.stage-overlay a{font-family:var(--font-display);font-size:2rem;color:var(--lime);text-decoration:none;text-shadow:0 0 16px var(--lime);}
.stage-ticker{position:fixed;bottom:0;left:0;right:0;z-index:20;margin:0;padding:.3rem 1rem;background:#0c0c10;color:var(--neon);font-size:.75rem;letter-spacing:.08em;border-top:1px solid var(--lime);}
.stage-dots{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:.5rem;}
.stage-dots a{width:14px;height:14px;border-radius:50%;border:1px solid var(--lime);color:transparent;overflow:hidden;text-indent:-99px;}
.stage-dots a.is-on,.stage-dots a:hover{background:var(--lime);box-shadow:0 0 10px var(--lime);}
.stage-act{min-height:100vh;scroll-snap-align:start;display:flex;align-items:center;padding:5rem 6% 3.5rem;position:relative;overflow:hidden;}
.stage-act-alt{background:linear-gradient(180deg,#0a0614,#140a22 50%,#0a0614);}
.stage-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(240,208,120,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(180,140,255,.08) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 75%);pointer-events:none;}
.stage-act-inner{position:relative;width:min(1100px,100%);margin:0 auto;}
.stage-act h1{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,5.5rem);line-height:.9;color:var(--lime);text-shadow:0 0 24px rgba(240,208,120,.45);margin:.3rem 0 .8rem;}
.stage-act h2{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);color:var(--neon);}
.stage-lede{font-size:1.15rem;max-width:38rem;color:var(--muted);}
.stage-hero-fig{margin:1rem 0;max-width:720px;border:1px solid var(--lime);box-shadow:0 0 30px rgba(240,208,120,.2);}
.stage-hero-fig figcaption{padding:.3rem .6rem;font-size:.8rem;color:var(--muted);}
.stage-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;}
.stage-badge{display:inline-block;border:1px solid var(--lime);color:var(--lime);padding:.1rem .45rem;letter-spacing:.12em;font-size:.7rem;}
.stage-badge-novo{background:var(--lime);color: var(--cta-text, #0a0614);}
.stage-kicker{color:var(--neon);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;}
.stage-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem;}
.stage-panel{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;border:1px solid var(--neon);text-decoration:none;color:var(--text);background:rgba(0,20,20,.4);min-height:220px;}
.stage-panel img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.2) contrast(1.05);}
.stage-panel strong{font-family:var(--font-display);font-size:1.3rem;color:var(--lime);}
.stage-panel em{font-style:normal;color:var(--muted);}
.stage-panel:hover{box-shadow:0 0 22px rgba(180,140,255,.35);}
.stage-spotlight{display:grid;gap:1.2rem;}
.stage-spot{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;border:1px solid var(--lime);padding:.6rem;background:rgba(10,6,20,.7);}
.stage-spot img{width:100%;}
.stage-logo{width:48px;height:48px;}
.stage-ghost{display:inline-flex;border:1px solid var(--neon);color:var(--neon);text-decoration:none;padding:.5rem .8rem;}
.stage-foot{padding:2rem 6%;border-top:1px solid var(--lime);color:var(--muted);font-size:.85rem;scroll-snap-align:start;}
.stage-article,.stage-page{width:min(760px,calc(100% - 2rem));margin:5.5rem auto 4rem;}
.stage-article h1,.stage-page h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);color:var(--lime);}
.stage-body h2{color:var(--neon);font-family:var(--font-display);}
.stage-crumbs{width:min(760px,calc(100% - 2rem));margin:5rem auto 0;font-size:.85rem;color:var(--muted);}
.btn-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--cta-bg);color:var(--cta-text);text-decoration:none;font-weight:800;letter-spacing:.08em;padding:.85rem 1.3rem;text-transform:uppercase;box-shadow:0 0 22px rgba(201,179,126,.85),0 0 36px rgba(180,140,255,.25);}
.cta-review-wrap{margin-top:.6rem;}
.cta-review-disclosure,.cta-disclosure,.stage-disc{font-size:.75rem;color:var(--muted);}
.stage-deck{width:min(1000px,calc(100% - 2rem));margin:5.5rem auto 4rem;}
@media(max-width:700px){
  .stage-spot{grid-template-columns:1fr;}
  .stage-act{padding:5rem 1rem 3.5rem;}
}

.stage-compact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem;}
.stage-compact li{border:1px solid #1c2a20;padding:.6rem .7rem;background:#0a0c0a;}
.stage-compact strong{display:block;font-family:var(--font-display);color:var(--lime);}

.btn-cta {
  box-shadow: 0 0 16px color-mix(in srgb, var(--cta-bg) 75%, transparent),
              0 0 36px color-mix(in srgb, var(--cta-bg) 40%, transparent);
}
.btn-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cta-bg) 90%, transparent),
              0 0 44px color-mix(in srgb, var(--cta-bg) 50%, transparent);
}


/* promo act, framed tile wall, leaderboard */
.stage-promo-frame { position: relative; margin-top: 1rem; border: 3px solid var(--gold, #f0d078); box-shadow: 0 0 28px color-mix(in srgb, var(--neon, #b48cff) 35%, transparent); overflow: hidden; background: #070410; }
.stage-promo-slide { display: none; margin: 0; }
.stage-promo-slide.is-on { display: block; }
.stage-promo-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.stage-promo-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: var(--text); font-weight: 700; letter-spacing: .06em; }
.stage-promo-nav { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .4rem; }
.stage-promo-nav button { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--neon, #b48cff); background: rgba(10,6,20,.75); color: var(--neon, #b48cff); cursor: pointer; font-size: 1.4rem; }
.stage-tilewall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.stage-tile { position: relative; margin: 0; border: 3px solid var(--gold, #f0d078); overflow: hidden; background: #070410; box-shadow: 0 0 18px color-mix(in srgb, var(--neon, #b48cff) 30%, transparent); }
.stage-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.stage-tile .stage-badge { position: absolute; top: .5rem; left: .5rem; }
.stage-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: var(--text); font-weight: 700; }
.stage-board { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: .85rem; }
.stage-board th, .stage-board td { border: 1px solid var(--border); padding: .45rem .5rem; text-align: left; }
.stage-board th { background: var(--bg-elev); color: var(--gold, #f0d078); letter-spacing: .04em; }
.stage-visit { display: inline-block; margin: .35rem .35rem 0 0; padding: .4rem .8rem; border: 1px solid var(--neon, #b48cff); color: var(--neon, #b48cff); text-decoration: none; font-weight: 700; }
@media (max-width: 800px) {
  .stage-tilewall { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stage-board { display: block; overflow-x: auto; }
}