/* One pinned stage with poster type on top. */
:root {
  --ink: #1D1035; --cream: #FFF1D6; --pink: #FF2E93; --magenta: #FF3EDB; --orange: #FF7A1A; --gold: #FFC61A; --green: #1F9A57; --leaf: #3FBF6A; --cobalt: #1F4FE0; --plum: #2A0E5E; --drab: #D9D5CA;
  --disp: "Lilita One", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --text: "Geist", system-ui, sans-serif; --hand: "Kalam", cursive;
  --pop: cubic-bezier(.2, 1.5, .4, 1);
}
* { box-sizing: border-box; }
html { background: var(--drab); color: var(--ink); }
body { margin: 0; font: 400 17px/1.45 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { position: fixed; inset: 0; overflow: hidden; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- the show ---------- */
#show { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#show.gone { visibility: hidden; pointer-events: none; }
#stage, #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

#slam { position: absolute; z-index: 10; left: 0; right: 0; top: max(5vh, env(safe-area-inset-top)); padding: 0 16px; display: grid; justify-items: center; gap: .06em; text-align: center; pointer-events: none; font-size: clamp(38px, min(15.5vw, 8.6vh), 112px); }
.line { display: block; font: 400 1em/.98 var(--disp); color: var(--cream); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: .07em .08em 0 var(--ink); animation: slam .42s var(--pop) both; }
.line.gold { color: var(--gold); }
.line.pink { color: var(--pink); }
.line.small { font-size: .52em; }
.line.deva { font-family: "Modak", var(--disp); font-size: .68em; line-height: 1.2; color: var(--cream); -webkit-text-stroke-width: .07em; text-shadow: none; }
.tag { display: inline-block; margin-left: .15em; padding: .3em .55em; vertical-align: .9em; background: var(--ink); color: var(--gold); border-radius: 99px; font: 500 .16em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: none; transform: rotate(8deg); }
@keyframes slam { from { opacity: 0; transform: scale(2.4) rotate(-5deg); } }
@media (orientation: landscape) {
  #show #cta { left: max(4vw, env(safe-area-inset-left)); translate: 0 0; font-size: clamp(20px, min(6.6vw, 6.2vh), 38px); padding: .5em .9em; }
  #show #sticker { left: max(4vw, env(safe-area-inset-left)); top: 40vh; width: min(32vw, 480px); transform: none; justify-items: start; }
  #show .stick { font-size: clamp(16px, 2.6vw, 34px); padding: 10px 14px; }
  #show .stick.red { font-size: clamp(30px, 5vw, 66px); }
  #show #tapPrompt { left: 25vw; top: 26%; font-size: clamp(30px, min(7vw, 13vh), 96px); }
  #slam { font-size: clamp(30px, min(11.5vh, 6vw), 92px); justify-items: start; text-align: left; left: max(4vw, env(safe-area-inset-left)); right: auto; top: 7vh; max-width: 62vw; }
}

#sticker { position: absolute; z-index: 11; left: 50%; top: max(92px, 11vh); transform: translateX(-50%); width: min(90vw, 560px); display: grid; justify-items: center; pointer-events: none; }
.stick { padding: 12px 20px; border: 5px solid var(--ink); border-radius: 16px; background: var(--cream); box-shadow: 7px 7px 0 var(--ink); text-align: center; font: 400 clamp(21px, 5.8vw, 34px)/1.12 var(--disp); animation: stick .32s var(--pop) both; rotate: -2deg; }
.stick.gold { background: var(--gold); }
.stick.pink { background: var(--pink); color: var(--cream); }
.stick.red { background: #F0322B; color: var(--cream); font-size: clamp(38px, 11vw, 66px); rotate: 5deg; }
@keyframes stick { from { opacity: 0; transform: scale(.4) rotate(9deg); } }

#tapPrompt { position: absolute; z-index: 9; left: 50%; top: 35%; transform: translate(-50%, -50%); margin: 0; pointer-events: none; font: 400 clamp(36px, min(13vw, 8vh), 96px)/1 var(--disp); color: var(--gold); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; white-space: nowrap; animation: throb .75s ease-in-out infinite alternate; }
@keyframes throb { to { transform: translate(-50%, -50%) scale(1.14) rotate(-3deg); } }

#cta { position: absolute; z-index: 12; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); translate: -50% 0; padding: 18px 30px; border: 6px solid var(--ink); border-radius: 99px; background: var(--pink); color: var(--cream); box-shadow: 8px 8px 0 var(--ink); font: 400 clamp(22px, min(6.6vw, 4.6vh), 38px)/1 var(--disp); white-space: nowrap; animation: stick .35s var(--pop) both, bump 1s ease-in-out .4s infinite alternate; }
#cta:focus-visible, #mute:focus-visible { outline: 4px solid var(--cobalt); outline-offset: 4px; }
#cta.drab { background: var(--ink); }
@keyframes bump { to { transform: translateY(-7px) rotate(-1.5deg); } }

#mute { position: fixed; z-index: 40; right: 12px; top: max(10px, env(safe-area-inset-top)); padding: 7px 12px; border: 3px solid var(--ink); border-radius: 99px; background: var(--cream); box-shadow: 3px 3px 0 var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.noscript { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 24px; background: var(--plum); color: var(--cream); font: 400 28px/1.2 var(--disp); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .line, .stick, #cta, #tapPrompt { animation: none; }
  #tapPrompt { transform: translate(-50%, -50%); }
}