/* HeyPlay Interactive — shared brand sheet. Noir base + four inversions. */
:root{
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
}
[data-theme="noir"]{
  --glow:#FFFFFF; --glow-hi:#FFFFFF; --glow-deep:#6B6B6B;
  --glow-dim:rgba(255,255,255,0.55); --glow-faint:rgba(255,255,255,0.09);
  --ink:#000000; --ink-soft:#0B0B0B;
  --bone:#F4F1EB; --muted:#BCC1CE; --whisper:#979DAE;
  --line:rgba(255,255,255,0.14); --veil:rgba(0,0,0,0.8);
  --fall-a:#101010; --fall-b:#000000; --card-shadow:rgba(0,0,0,0.5);
}
[data-theme="paper"]{
  --glow:#1D1D1F; --glow-hi:#48484C; --glow-deep:#000000;
  --glow-dim:rgba(29,29,31,0.6); --glow-faint:rgba(29,29,31,0.06);
  --ink:#FFFFFF; --ink-soft:#F5F5F7;
  --bone:#1D1D1F; --muted:#56565C; --whisper:#86868B;
  --line:rgba(0,0,0,0.12); --veil:rgba(255,255,255,0.85);
  --fall-a:#FAFAFC; --fall-b:#EDEDF0; --card-shadow:rgba(0,0,0,0.10);
}
[data-theme="fog"]{
  --glow:#1D1D1F; --glow-hi:#48484C; --glow-deep:#000000;
  --glow-dim:rgba(29,29,31,0.55); --glow-faint:rgba(29,29,31,0.05);
  --ink:#F5F5F7; --ink-soft:#FFFFFF;
  --bone:#1D1D1F; --muted:#515156; --whisper:#86868B;
  --line:rgba(0,0,0,0.10); --veil:rgba(245,245,247,0.88);
  --fall-a:#FFFFFF; --fall-b:#F0F0F3; --card-shadow:rgba(0,0,0,0.08);
}
[data-theme="titanium"]{
  --glow:#2C2C2E; --glow-hi:#55524C; --glow-deep:#141414;
  --glow-dim:rgba(44,44,46,0.55); --glow-faint:rgba(44,44,46,0.06);
  --ink:#ECEAE5; --ink-soft:#F6F5F1;
  --bone:#26241F; --muted:#5C594F; --whisper:#8B877B;
  --line:rgba(38,36,31,0.14); --veil:rgba(236,234,229,0.88);
  --fall-a:#F8F7F3; --fall-b:#E7E4DD; --card-shadow:rgba(38,36,31,0.10);
}
[data-theme="azure"]{
  --glow:#0071E3; --glow-hi:#5AA9F2; --glow-deep:#004A99;
  --glow-dim:rgba(0,113,227,0.55); --glow-faint:rgba(0,113,227,0.07);
  --ink:#FFFFFF; --ink-soft:#F5F8FC;
  --bone:#1D1D1F; --muted:#515156; --whisper:#86868B;
  --line:rgba(0,0,0,0.11); --veil:rgba(255,255,255,0.86);
  --fall-a:#F7FAFE; --fall-b:#EAF1F9; --card-shadow:rgba(0,40,90,0.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--bone);font-family:var(--body);
  font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100svh;
}
::selection{background:var(--glow);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,video,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.18}
h1 em,h2 em{font-style:normal;color:var(--glow)}
.wrap{max-width:1080px;margin:0 auto;
  padding-left:max(20px,var(--sa-l));padding-right:max(20px,var(--sa-r))}
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
.sub{color:var(--muted);font-size:15.5px;line-height:1.8}
.mono-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--whisper);line-height:2}

/* gold shine — BattleSymphony2035 wordmark */
[data-theme="noir"]{--g-base:#D4AF37;--g-mid:#F2DE92;--g-hi:#FFFBEA}
[data-theme="paper"],[data-theme="fog"],[data-theme="azure"]{--g-base:#9A7B16;--g-mid:#C9A227;--g-hi:#E8CF6A}
[data-theme="titanium"]{--g-base:#8C6F12;--g-mid:#C0981F;--g-hi:#E3C85F}
.gold{
  background:linear-gradient(100deg,var(--g-base) 0%,var(--g-base) 34%,
    var(--g-mid) 44%,var(--g-hi) 50%,var(--g-mid) 56%,var(--g-base) 66%,var(--g-base) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 9px rgba(201,162,39,.28));
  animation:goldShine 6s linear infinite;
}
@keyframes goldShine{0%{background-position:125% 0}100%{background-position:-125% 0}}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(to bottom,var(--veil),transparent);pointer-events:none;
  padding-top:var(--sa-t)}
.nav-inner{max-width:1080px;margin:0 auto;
  padding:16px max(20px,var(--sa-r)) 16px max(20px,var(--sa-l));
  display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:auto}
.logo{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--bone);white-space:nowrap}
.logo span{color:var(--glow)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-link{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--glow-dim);transition:.3s}
.nav-link:hover,.nav-link:focus-visible{color:var(--glow)}
.nav-cta{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--glow-dim);color:var(--glow);
  padding:9px 16px;border-radius:99px;transition:.3s;white-space:nowrap}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--glow);color:var(--ink)}
@media(max-width:620px){.nav-link{display:none}.logo{font-size:11px;letter-spacing:.12em}}

/* tone picker — desktop only, keeps mobile clean */
.tone-picker{position:fixed;z-index:60;display:none;align-items:center;gap:9px;
  right:calc(16px + var(--sa-r));bottom:calc(16px + var(--sa-b));
  background:var(--veil);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:99px;padding:9px 13px}
.tone-picker .tp-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--whisper)}
.tone{width:19px;height:19px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  transition:transform .2s,border-color .2s;padding:0}
.tone:hover{transform:scale(1.15)}
.tone[aria-pressed="true"]{border-color:var(--glow)}
.tone-noir{background:#000;box-shadow:inset 0 0 0 1.5px #FFF}
.tone-paper{background:#FFF;box-shadow:inset 0 0 0 1.5px #1D1D1F}
.tone-fog{background:linear-gradient(135deg,#FFF 50%,#E8E8EC 50%);box-shadow:inset 0 0 0 1.5px #86868B}
.tone-titanium{background:linear-gradient(135deg,#F6F5F1 50%,#D9D5CC 50%);box-shadow:inset 0 0 0 1.5px #55524C}
.tone-azure{background:#FFF;box-shadow:inset 0 0 0 5px #FFF,inset 0 0 0 20px #0071E3}
@media(min-width:900px){.tone-picker{display:flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 26px;border-radius:99px;transition:.3s;
  cursor:pointer;background:var(--glow);border:1px solid var(--glow);color:var(--ink);
  min-height:46px;-webkit-tap-highlight-color:transparent}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--glow);box-shadow:0 0 36px var(--glow-faint)}
.btn.ghost{background:transparent;color:var(--glow);border-color:var(--glow-dim)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--glow);color:var(--ink)}
.btn.gold-btn{background:transparent;color:var(--g-mid);border-color:rgba(201,162,39,.5)}
.btn.gold-btn:hover,.btn.gold-btn:focus-visible{background:var(--g-base);color:#120E02;border-color:var(--g-base);box-shadow:0 0 36px rgba(201,162,39,.22)}

/* product cards (home) */
.products{padding:0 0 40px;display:flex;flex-direction:column;gap:20px}
.pcard{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--ink-soft);box-shadow:0 0 60px var(--glow-faint),0 20px 44px var(--card-shadow);
  display:flex;flex-direction:column}
.pcard-top{padding:22px 20px 0;display:flex;flex-wrap:wrap;
  gap:8px 14px;align-items:baseline;justify-content:space-between}
.pcard-name{font-family:var(--display);font-weight:500;font-size:clamp(23px,5.4vw,32px);line-height:1.1}
.pcard-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--whisper)}
.pcard-media{position:relative;margin:16px 0 0;line-height:0;background:#000}
.pcard-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.pcard-body p{color:var(--muted);font-size:15px;line-height:1.8}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);border:1px solid var(--line);border-radius:99px;padding:6px 11px;white-space:nowrap}
.chip.live{color:var(--glow);border-color:var(--glow-dim)}
.chip.gold-chip{color:var(--g-mid);border-color:rgba(201,162,39,.4)}
.pcard-actions{margin-top:4px;display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:900px){.products{gap:26px}}

/* shot grids */
.shots{display:flex;flex-direction:column;gap:14px}
.shot{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink-soft);box-shadow:0 0 50px var(--glow-faint),0 16px 36px var(--card-shadow);line-height:0}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#F4F1EB;line-height:1.7;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent)}
@media(min-width:860px){.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

/* sections */
.sec{padding:64px 0}
.sec-head{max-width:640px;margin:0 0 30px}
.sec-head h2{font-size:clamp(25px,5.2vw,38px);margin-bottom:12px}
.idea{display:grid;grid-template-columns:1fr;gap:14px;padding:34px 0;border-top:1px solid var(--line)}
.idea:last-child{border-bottom:1px solid var(--line)}
.idea .mark{width:48px;height:48px;border-radius:14px;border:1px solid var(--glow-dim);
  display:flex;align-items:center;justify-content:center;flex:none}
.idea .mark svg{width:21px;height:21px;stroke:var(--glow);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.idea h3{font-size:clamp(20px,4.4vw,29px);max-width:24ch;margin-bottom:10px}
.idea p{color:var(--muted);font-size:15.5px;max-width:58ch;line-height:1.85}
.idea .plain{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--bone)}
.idea .plain b{color:var(--glow);font-weight:500}
@media(min-width:760px){.idea{grid-template-columns:72px 1fr;gap:28px;align-items:start;padding:48px 0}}

.rows{display:flex;flex-direction:column;gap:9px;margin-top:18px;max-width:600px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.row i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 9px var(--glow-dim)}
.row i.off{background:transparent;border:1.5px solid var(--glow);box-shadow:none}
.row b{color:var(--bone);font-weight:500}
.row .where{margin-left:auto;color:var(--glow);letter-spacing:.12em;text-transform:uppercase;font-size:10px}
@media(max-width:560px){.row .where{margin-left:20px;width:100%}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

footer{border-top:1px solid var(--line);
  padding:34px 0 calc(34px + var(--sa-b))}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--whisper);line-height:2.1}
.foot .note a{color:var(--glow);border-bottom:1px solid var(--glow-faint)}
.foot .entity{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone)}

:focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .gold{animation:none}
}

/* ================= THE DECK — the real disc, spun and scratched ================= */
.deck{position:relative;width:100%}
.deck-stage{position:relative;width:100%;aspect-ratio:1/1;
  max-width:min(460px,86vw);margin:0 auto;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;cursor:grab;isolation:isolate}
.deck-stage.dragging{cursor:grabbing}
.deck-bg{position:absolute;inset:-10%;z-index:0;pointer-events:none;border-radius:50%;
  background:
    radial-gradient(circle at 50% 46%, hsla(var(--dk-h,352),70%,48%,.26), transparent 58%),
    radial-gradient(circle at 26% 78%, hsla(var(--dk-h2,34),64%,44%,.18), transparent 60%);
  filter:blur(2px);transition:background 260ms linear}

/* the platter: the artwork, turning — its centre punched out */
/* Both layers share one box and one background, so the centre lines up exactly.
   closest-side makes the mask stops read as a fraction of the disc radius. */
.deck-face,.deck-core{position:absolute;inset:0;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:contain}
.deck-face{z-index:1;will-change:transform;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%, transparent 0 41%, #000 43%);
          mask-image:radial-gradient(circle closest-side at 50% 50%, transparent 0 41%, #000 43%)}
/* the same artwork again, centre only, held still so its button stays upright */
.deck-core{z-index:2;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%, #000 0 41%, transparent 43%);
          mask-image:radial-gradient(circle closest-side at 50% 50%, #000 0 41%, transparent 43%)}

/* until the artwork is in place, a plain platter rather than a broken box */
.deck-stage.no-face .deck-face{background:
  repeating-conic-gradient(from 0deg, #0e0e10 0 14deg, #121215 14deg 28deg);
  box-shadow:inset 0 0 0 2px var(--g-base), inset 0 0 60px rgba(0,0,0,.9)}
.deck-stage.no-face .deck-core{background:
  radial-gradient(circle closest-side at 50% 50%, #7a3fd6 0 30%, #2b1150 34%, #121214 41%, transparent 43%)}

.deck-needle{position:absolute;z-index:4;top:-1.5%;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:15px solid var(--g-mid);filter:drop-shadow(0 0 7px rgba(201,162,39,.6));pointer-events:none}

.deck-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30%;height:30%;border-radius:50%;border:0;background:transparent;color:#F7F2FF;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  -webkit-tap-highlight-color:transparent;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.deck-play svg{width:22px;height:22px;fill:#F7F2FF;stroke:none;filter:drop-shadow(0 1px 5px rgba(0,0,0,.5))}
.deck-play:hover,.deck-play:focus-visible{filter:brightness(1.18)}
.deck-play .lbl{opacity:.92}
.deck-play .sublbl{font-size:8px;letter-spacing:.14em;opacity:.6;margin-top:-1px}
/* with no artwork the button has to carry its own disc */
.deck-stage.no-face .deck-play{border:1.5px solid var(--g-base);
  background:radial-gradient(circle at 42% 36%, rgba(255,255,255,.16), rgba(20,6,44,.9) 65%)}

.deck-read{margin:18px auto 0;text-align:center;max-width:430px;line-height:1.7}
.deck-genre{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,4.6vw,24px);color:var(--bone);min-height:1.3em}
.deck-world{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-mid);margin-top:4px;min-height:1.5em}
.deck-hint{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--whisper);margin-top:12px;line-height:1.9}
.deck-eq{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:16px;margin-top:12px}
.deck-eq i{width:3px;border-radius:3px;background:var(--g-mid);opacity:.3;height:18%;
  transition:height .09s linear,opacity .25s}
.deck-stage.on + .deck-read .deck-eq i{opacity:.85}
@media(prefers-reduced-motion:reduce){.deck-bg{transition:none}}
/* The artwork already says PRESS TO PLAY in its own centre, so the overlay button
   is just a hit target until it is playing — then it shows the pause state. */
.deck-stage.has-face .deck-play .lbl,
.deck-stage.has-face .deck-play .sublbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.deck-stage.has-face .deck-play svg{opacity:0;transition:opacity .2s}
.deck-stage.has-face .deck-play.playing{background:radial-gradient(circle closest-side,rgba(24,8,48,.92) 0 72%,transparent 86%)}
.deck-stage.has-face .deck-play.playing svg{opacity:1}
.deck-stage.has-face .deck-play:focus-visible{outline:2px solid var(--g-mid);outline-offset:2px;border-radius:50%}

/* ===== the page behind the deck — swaps as the disc turns (/BattleSymphony2035) ===== */
.scene-layer{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;
  opacity:0;transition:opacity 700ms ease;pointer-events:none;will-change:opacity}
.scene-layer.on{opacity:1}
.scene-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 26%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.86) 84%, #000 100%),
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.58) 76%)}
body.scened{background:#000}
@media(prefers-reduced-motion:reduce){.scene-layer{transition:none}}

/* ownership strip at the foot of each product page */
.ipline{border-top:1px solid var(--line);margin-top:30px;padding-top:20px}
.ipline p{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--whisper);line-height:2}
.ipline b{color:var(--bone);font-weight:500}
.ipline a{color:var(--glow);border-bottom:1px solid var(--glow-faint)}
/* the four-up worlds panel on /CitizenZero */
.cz-grid{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#07070a;
  box-shadow:0 0 60px var(--glow-faint),0 20px 44px var(--card-shadow);line-height:0;margin-top:22px}
.cz-grid img{width:100%;height:auto;display:block}

/* ===== CitizenZero, written in the world's scripts ===== */
.cz-scripts{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000 0 62%,transparent 94%)}
.cz-ghost{position:absolute;white-space:nowrap;font-family:var(--display);font-weight:400;
  color:var(--bone);opacity:0;transition:opacity 2600ms ease, transform 7000ms linear;
  will-change:opacity,transform;line-height:1}
.cz-ghost.show{opacity:.07}
.cz-ghost-0{left:-6%;top:14%;font-size:clamp(44px,13vw,110px);transform:translateX(0)}
.cz-ghost-0.show{transform:translateX(5%)}
.cz-ghost-1{right:-8%;top:46%;font-size:clamp(34px,9vw,78px);transform:translateX(0)}
.cz-ghost-1.show{transform:translateX(-5%)}
.cz-ghost-2{left:8%;bottom:10%;font-size:clamp(26px,7vw,58px);transform:translateX(0)}
.cz-ghost-2.show{transform:translateX(4%)}

.cz-name{position:relative;z-index:1;min-height:1.15em}
.cz-name-live{display:inline-block;transition:opacity 600ms ease, transform 600ms ease;
  transform-origin:left center}
.cz-name-live.out{opacity:0;transform:translateY(-6px)}
[dir="rtl"] .cz-name-live,.cz-name-live[lang="ar"],.cz-name-live[lang="he"]{direction:rtl}
.pcard-top{position:relative;z-index:2}
.pcard.cz-card{position:relative}
@media(prefers-reduced-motion:reduce){.cz-ghost{display:none}.cz-name-live{transition:none}}