/* Stone Labs Studios / Pengi: The Long Way Home. The website is the level. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/figtree.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/spacemono-400.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/spacemono-700.woff2) format("woff2"); }
/* Press Start 2P, Copyright 2012 The Press Start 2P Project Authors (cody@zone38.net), with Reserved Font Name
   "Press Start 2P". Licensed under the SIL Open Font License 1.1 (see ../fonts/OFL-PressStart2P.txt). Self-hosted. */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pressstart2p.woff2) format("woff2"); }

:root {
  --night: #07102B;
  --glacier: #9ED8F7;
  --ice: #D9F1FF;
  --frost: #F2F9FF;
  --aurora: #46EFC6;
  --violet: #8B7BFF;
  --coral: #FF5468;
  --coral-d: #D23A50;
  --coral-strong: #D62F48;
  --coral-deep: #9E1F33;
  --beak: #FFA53A;
  --gold: #FFD166;
  --gold-d: #D98A1E;
  --ink: #0B1733;
  --ink-2: #33456A;
  --muted: #5B6E90;

  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pixel: "Press Start 2P", "Space Mono", ui-monospace, monospace;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  /* Level layout. The game reads the real DOM rects, so these only shape the course. */
  --lane: clamp(300px, 27vw, 390px);
  --lane0: clamp(250px, 21vw, 300px);
  --chute: clamp(250px, 33vw, 560px);
  --edge: max(20px, calc((100vw - 1240px) / 2));
  --panel-max: 880px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
html, body { overflow-x: clip; }
body {
  margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  color: var(--ink); background: var(--night); -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
kbd {
  display: inline-block; font: 700 .72rem/1 var(--mono); padding: .38em .55em .32em; margin: 0 .1em;
  border-radius: 7px; background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .22); color: #fff;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--gold); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 500; background: var(--gold); color: var(--ink); font-weight: 700;
  padding: .7em 1.1em; border-radius: 999px; text-decoration: none; transition: top .3s var(--spring);
}
.skip-link:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); position: relative; }
[hidden] { display: none !important; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .55em; font: 700 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-d); }
.eyebrow svg { width: 1.05em; height: 1.05em; animation: spin 9s linear infinite; }
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.1vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; margin: .42em 0 .5em; text-wrap: balance; font-variation-settings: "opsz" 96; }
.h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; margin: .4em 0 .45em; text-wrap: balance; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 36em; }
.hl {
  color: var(--coral-d);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q5 1 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%23FF5468' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 40px 8px repeat-x;
  padding-bottom: .12em;
}

/* ---------- Buttons ---------- */
.btn {
  --b-bg: #fff; --b-ink: var(--ink); --b-edge: #B9C9DC; --b-glow: rgba(255, 255, 255, .25);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 800 1rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  padding: 1em 1.45em; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  background: var(--b-bg); color: var(--b-ink);
  box-shadow: 0 6px 0 var(--b-edge), 0 16px 30px -8px var(--b-glow);
  transition: translate .3s var(--spring), box-shadow .3s var(--ease), scale .3s var(--spring), rotate .3s var(--spring), filter .2s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; transition: rotate .4s var(--spring), scale .4s var(--spring); }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%); translate: -120% 0; transition: translate .7s var(--ease); }
.btn:hover { translate: 0 -4px; rotate: -1.5deg; box-shadow: 0 10px 0 var(--b-edge), 0 24px 40px -10px var(--b-glow); }
.btn:hover::after { translate: 120% 0; }
.btn:hover svg { rotate: -14deg; scale: 1.2; }
.btn:active { translate: 0 4px; rotate: 0deg; scale: .97; box-shadow: 0 2px 0 var(--b-edge), 0 8px 16px -8px var(--b-glow); transition-duration: .08s; }
.btn:disabled { cursor: default; filter: saturate(.6) brightness(.95); }
.btn--primary { --b-bg: linear-gradient(180deg, #FFE39A, #FFB83F); --b-ink: var(--ink); --b-edge: var(--gold-d); --b-glow: rgba(255, 184, 63, .55); }
.btn--coral { --b-bg: linear-gradient(180deg, #DD354E, #CF2A43); --b-ink: #fff; --b-edge: var(--coral-deep); --b-glow: rgba(255, 84, 104, .45); }
.btn--ghost { --b-bg: rgba(255, 255, 255, .1); --b-ink: var(--frost); --b-edge: rgba(255, 255, 255, .22); --b-glow: rgba(70, 239, 198, .25); border: 2px solid rgba(255, 255, 255, .35); }
.btn--xl { font-size: clamp(1.05rem, 1.5vw, 1.2rem); padding: 1.05em 1.55em; }
.btn--sm { font-size: .9rem; padding: .75em 1.15em; box-shadow: 0 4px 0 var(--b-edge), 0 10px 20px -8px var(--b-glow); }
.btn.boing { animation: boing .6s var(--spring); }

/* ---------- Nav + HUD ---------- */
.nav {
  position: fixed; top: 12px; left: 50%; translate: -50% 0; z-index: 200;
  width: min(calc(100% - 20px), 1240px);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(8, 17, 44, .72); color: var(--frost);
  border: 1.5px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 14px 40px -14px rgba(3, 8, 26, .6);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 800 1rem/1 var(--display); letter-spacing: -.02em; flex: none; }
.brand svg { width: 38px; height: 32px; transition: rotate .5s var(--spring), translate .5s var(--spring); }
.brand:hover svg { rotate: -18deg; translate: 0 -4px; }
.brand b { color: var(--gold); font-weight: 800; }
.brand__text small { display: block; font-size: .58em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin-bottom: .35em; }
.nav__links { display: flex; gap: .1rem; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: .92rem; padding: .55em .8em; border-radius: 999px; transition: background .25s, translate .3s var(--spring), color .2s; }
.nav__links a:hover { background: rgba(255, 255, 255, .1); translate: 0 -2px; color: var(--gold); }
.nav__links a.active { background: rgba(255, 209, 102, .16); color: var(--gold); }
.hud { display: flex; align-items: center; gap: .4rem; }
.hud__chip {
  display: inline-flex; align-items: center; gap: .4em; height: 40px; padding: 0 .85em; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .16);
  font: 700 .8rem/1 var(--mono); letter-spacing: .03em; white-space: nowrap;
}
.hud__chip svg { width: 1.2em; height: 1.2em; color: var(--gold); flex: none; }
.hud__fish svg { width: 1.8em; height: 1.15em; color: var(--gold); }
.hud__fish b { color: var(--gold); font-size: 1.05rem; display: inline-block; }
.hud__fish b.bump { animation: bump .45s var(--spring); }
.hud__fish small { opacity: .7; font-size: .78rem; }
.hud__cp { max-width: 190px; }
.hud__cp span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hud__cp.flash { animation: cpFlash 1.2s var(--ease); }
.hud__1up { display: none; }
/* In the level the HUD keeps a little of the arcade: pixel type, a blinking 1UP */
.lvl .hud__chip { font: 400 8px/1 var(--pixel); letter-spacing: 0; text-transform: uppercase; }
.lvl .hud__1up { display: inline; color: #FF6B7A; text-shadow: 0 0 8px rgba(255, 84, 104, .6); margin-right: .15em; }
.lvl.is-playing .hud__1up { animation: blink 1.2s steps(1) infinite; }
.lvl .hud__fish b { font: 400 16px/1 var(--pixel); text-shadow: 0 0 10px rgba(255, 209, 102, .55); }
.lvl .hud__fish small { font: 400 8px/1 var(--pixel); opacity: .75; }
.hud__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; height: 40px; min-width: 40px; padding: 0 .75em;
  border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: var(--frost);
  font: 800 .88rem/1 var(--display); cursor: pointer; white-space: nowrap;
  transition: translate .3s var(--spring), background .2s, color .2s, scale .3s var(--spring);
}
.hud__btn svg { width: 18px; height: 18px; flex: none; }
.hud__btn:hover { translate: 0 -2px; background: rgba(255, 255, 255, .18); }
.hud__btn:active { scale: .92; }
.hud__btn:disabled { opacity: .45; cursor: default; }
.hud__play { background: linear-gradient(180deg, #FFE39A, #FFB83F); color: var(--ink); border-color: transparent; box-shadow: 0 3px 0 var(--gold-d); padding: 0 1em; }
.hud__play:hover { background: linear-gradient(180deg, #FFEAB0, #FFC152); }
.hud__play .ic-pause, .is-playing .hud__play .ic-play { display: none; }
.is-playing .hud__play .ic-pause { display: block; }
.js-mute .ic-off, .js-mute[aria-pressed="true"] .ic-on { display: none; }
.js-mute[aria-pressed="true"] .ic-off { display: block; }
.hud__skip { font-size: .8rem; }

/* ---------- Page + world layers ---------- */
.page { position: relative; isolation: isolate; }
main, .footer { position: relative; z-index: 1; }
.signs, .world, .bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.signs { z-index: 4; }
.world { z-index: 5; }
.bubbles { z-index: 6; }
.world__canvas { position: absolute; left: 0; top: 0; display: block; will-change: transform; opacity: 0; transition: opacity .6s var(--ease); }
.game-ready .world__canvas { opacity: 1; }
/* Default is the plain page. "lvl" (script + 3D) switches on the arcade screen and the level layout. */
html:not(.lvl) .hud, html:not(.lvl) .howto { display: none !important; }
html:not(.lvl) .world, html:not(.lvl) .signs, html:not(.lvl) .bubbles { display: none; }
/* Toys that need the page script. Without it they turn into plain content, never dead buttons. */
html:not(.mjs) .tickets__bar, html:not(.mjs) .clip__toggle, html:not(.mjs) .pond-label, html:not(.mjs) .js-presskit { display: none; }
html:not(.mjs) .ticket__btn, html:not(.mjs) .skipstone, html:not(.mjs) .hero__logo img { pointer-events: none; cursor: default; }

/* ---------- Blocks share one smooth descent of color ---------- */
.hero, .lane, .zone, .studio { background: linear-gradient(180deg, var(--c1), var(--c2)); }

/* ---------- Hero (plain page) ---------- */
.hero { position: relative; padding: 104px 0 36px; color: var(--frost); overflow: clip; }
.hero__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars, .stars::after {
  position: absolute; inset: 0 0 20% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 37% 8%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 51% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 6%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 74% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 88% 14%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 94% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 15% 44%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 45% 40%, #fff 50%, transparent 51%);
  opacity: .8;
}
.stars::after { content: ""; inset: 0; transform: translate(3.5%, 6%); opacity: .6; animation: twinkle 4.5s ease-in-out infinite; }
.aurora { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: auroraDrift 18s ease-in-out infinite alternate; }
.aurora--a { width: 60vw; height: 22vw; left: -8vw; top: 4%; background: radial-gradient(closest-side, rgba(70, 239, 198, .8), transparent); rotate: -12deg; }
.aurora--b { width: 50vw; height: 18vw; right: -10vw; top: 14%; background: radial-gradient(closest-side, rgba(139, 123, 255, .75), transparent); rotate: 10deg; animation-duration: 22s; animation-delay: -6s; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "copy stage" "foot stage";
  align-items: center; column-gap: clamp(1rem, 3vw, 3rem); row-gap: .4rem;
}
.hero__copy { grid-area: copy; position: relative; z-index: 2; }
.hero__foot { grid-area: foot; position: relative; z-index: 2; align-self: start; }
.sticker {
  display: inline-flex; align-items: center; gap: .55em; font: 700 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  padding: .7em 1.05em; border-radius: 999px; rotate: -2deg; background: rgba(70, 239, 198, .12); color: var(--aurora); border: 1.5px solid rgba(70, 239, 198, .45);
  transition: rotate .4s var(--spring), scale .4s var(--spring);
}
.sticker:hover { rotate: 2deg; scale: 1.06; }
.sticker svg { width: 1.1em; height: 1.1em; animation: spin 8s linear infinite; }
.hero__logo { margin: .9rem 0 .5rem -.6rem; width: min(100%, 480px); }
.hero__logo img { width: 100%; height: auto; transform-origin: 50% 80%; animation: logoBob 4.2s ease-in-out infinite; filter: drop-shadow(0 16px 26px rgba(0, 4, 20, .45)); cursor: pointer; transition: scale .4s var(--spring); }
.hero__logo img:hover { scale: 1.04; }
.hero__logo img.boing { animation: logoBoing .7s var(--spring), logoBob 4.2s ease-in-out infinite .7s; }
.hero__lede { font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.5; color: #D6E9FA; max-width: 30em; }
.hero__note { display: none; }
.no-game .hero__note {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 1.3rem; padding: .75em 1.15em; border-radius: 18px; max-width: 32em;
  background: rgba(158, 216, 247, .13); border: 1.5px solid rgba(158, 216, 247, .42); color: #EAF6FF; font-weight: 700; font-size: .98rem; line-height: 1.35;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.hero__note svg { width: 1.25em; height: 1.25em; flex: none; color: var(--glacier); animation: spin 8s linear infinite; }
.hero__platforms { margin-top: .6rem; font: 700 .76rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hero__from { margin-top: .25rem; font-size: .9rem; color: #9FB8DA; }
.skipgame {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .4rem; padding: .6em 1.05em; border-radius: 999px;
  font: 700 .98rem/1.2 var(--body); color: #EEF7FF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(238, 247, 255, .4);
  background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .22);
  transition: background .2s, translate .3s var(--spring), text-decoration-color .2s, border-color .2s;
}
.skipgame:hover { background: rgba(255, 255, 255, .15); translate: 0 -2px; text-decoration-color: var(--gold); border-color: rgba(255, 209, 102, .6); }
.skipgame svg { width: 1.05em; height: 1.05em; flex: none; animation: bob 2.2s ease-in-out infinite; }
.skipgame .t-game, .lvl .skipgame .t-page { display: none; }
.lvl .skipgame .t-game { display: inline; }
.t-touch { display: none; }
.touch .t-touch { display: inline; }
.touch .t-desk { display: none; }

/* The stage: 2D Pengi on a CSS floe until the 3D one is ready (and always when there is no game) */
.hero__stage { grid-area: stage; position: relative; height: clamp(360px, 34vw, 470px); }
.hero__pengi { position: absolute; left: 50%; bottom: 60px; height: 64%; width: auto; translate: -50% 0; filter: drop-shadow(0 18px 18px rgba(0, 12, 40, .35)); transition: opacity .35s var(--ease), scale .35s var(--ease); animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; z-index: 1; }
.hero__stage::before {
  content: ""; position: absolute; left: 50%; bottom: 30px; width: min(90%, 330px); aspect-ratio: 3 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(60% 55% at 42% 36%, #fff 0%, #EAF6FF 45%, #BFE3FA 80%, #9CCFEF 100%);
  box-shadow: 0 14px 0 #6FAFDC, 0 36px 50px -8px rgba(0, 10, 40, .55); transition: opacity .35s var(--ease);
}
.game-ready .hero__pengi { opacity: 0; scale: .85; }
.game-ready .hero__stage::before { opacity: 0; }

/* ---------- Top of the page with the game on (the arcade screen hands over to this) ----------
   A compact title band: logo on the left, the pitch on the right. The first floor of the course starts right under
   it, with Pengi on his start ledge, so the whole first screen reads as "title, then go". */
.lvl .hero { padding: 92px 0 30px; }
.lvl .hero__stage { display: none; }
/* The sky fades out before the (now short) hero ends, so there is no hard edge where the course begins */
.lvl .hero__sky { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 96%); mask-image: linear-gradient(180deg, #000 45%, transparent 96%); }
.lvl .hero__inner {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto auto 1fr;
  grid-template-areas: "sticker ." "logo ." "logo lede" "logo plat" "logo from" "logo .";
  column-gap: clamp(1.5rem, 5vw, 5rem); row-gap: 0; align-items: start;
}
.lvl .hero__copy, .lvl .hero__foot { display: contents; }
.lvl .sticker, .lvl .hero__logo, .lvl .hero__lede, .lvl .hero__platforms, .lvl .hero__from { position: relative; z-index: 2; }
.lvl .sticker { grid-area: sticker; justify-self: start; }
.lvl .hero__logo { grid-area: logo; width: min(100%, 470px); margin: .7rem 0 0 -.6rem; }
.lvl .hero__lede { grid-area: lede; font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 27em; color: #C9DEF4; }
.lvl .skipgame { display: none; }
.lvl .hero__platforms { grid-area: plat; margin-top: .9rem; }
.lvl .hero__from { grid-area: from; margin-top: .2rem; font: 700 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #88A3CB; }
@media (min-width: 760px) and (max-height: 820px) {
  .lvl .hero { padding-top: 84px; padding-bottom: 22px; }
  .lvl .hero__logo { width: min(100%, 400px); }
}

/* ---------- The arcade screen: the first and only thing on screen at load ----------
   The canvas is drawn at 320x224 (or a tall 224xN "TATE" screen on portrait phones), upscaled with hard pixels
   plus baked scanlines in arcade.js, then dressed here: phosphor glow, RGB mask, vignette, glass and bezel. */
.arcade { display: none; }
html.arc-live .arcade, html.arc-out .arcade {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 450; background: #000; overflow: hidden;
  cursor: pointer; touch-action: pinch-zoom; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.arc-out .arcade { pointer-events: none; }
/* The keyboard skip link shows over the cabinet in the cabinet's own style, so it never breaks the illusion */
html.arc-live .skip-link { font: 400 10px/1.4 var(--pixel); text-transform: uppercase; border-radius: 0; background: #000; color: var(--gold); padding: .9em 1.1em; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px #000; }
html.arc-live .skip-link:focus-visible { outline: none; }
html.arc-lock, html.arc-lock body { overflow: hidden; }
html.arc-live .nav, html.arc-live .toast, html.arc-live .callouts, html.arc-live .touchpad, html.arc-live .pausebar { visibility: hidden; }
.arcade__screen {
  --px: 3px;
  position: relative; width: var(--sw, 80vw); height: var(--sh, 56vw); border-radius: 3.4% / 4.8%; overflow: hidden; background: #000; isolation: isolate;
  box-shadow: 0 0 0 max(3px, calc(var(--px) * 1.4)) #06070B, 0 0 0 max(7px, calc(var(--px) * 3.6)) #14161E, 0 0 0 max(8px, calc(var(--px) * 4)) #23262F, 0 0 calc(var(--px) * 40) rgba(90, 150, 255, .14);
  transform-origin: 50% 50%;
}
.arcade__canvas, .arcade__glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arcade__canvas { image-rendering: auto; }
.arcade__glow { mix-blend-mode: screen; opacity: .42; filter: blur(calc(var(--px) * 1.8)) saturate(1.35) brightness(1.1); image-rendering: auto; pointer-events: none; }
.arcade__fx {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 56%, rgba(0, 0, 0, .26) 78%, rgba(0, 0, 0, .72) 100%),
    repeating-linear-gradient(90deg, rgba(255, 70, 70, .045) 0 1px, rgba(70, 255, 120, .045) 1px 2px, rgba(80, 120, 255, .045) 2px 3px);
  box-shadow: inset 0 0 calc(var(--px) * 16) rgba(0, 0, 0, .66), inset 0 0 calc(var(--px) * 2.5) rgba(0, 0, 0, .8);
}
.arcade__fx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 55% at 28% 10%, rgba(255, 255, 255, .075), transparent 62%), linear-gradient(162deg, rgba(255, 255, 255, .05), transparent 34%); }
.arcade__fx::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 26%; background: linear-gradient(180deg, transparent, rgba(190, 225, 255, .045), transparent); animation: crtRoll 8s linear infinite, arcFlicker .12s steps(2, jump-none) infinite; }
.arcade__screen.is-poweron { animation: crtOn .5s cubic-bezier(.2, .7, .2, 1) both; }
.arcade__hot { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.arcade__hot:focus { outline: none; }
.arcade__hot:focus-visible { outline: max(2px, calc(var(--px) * 1)) solid var(--gold); outline-offset: 0; border-radius: 0; }

/* ---------- Lanes (the playable air between panels) ---------- */
.lane { position: relative; height: 56px; }
.lvl .lane { height: var(--lane); }
/* Lane 0 tucks under the hero by --ov; the solid layer under the fade keeps the seam invisible */
.lvl .lane[data-lane="0"] { --ov: 28px; height: calc(var(--lane0) + 40px); margin-top: calc(-1 * var(--ov)); background: linear-gradient(180deg, rgba(11, 26, 66, 0), var(--c2) 40%), linear-gradient(180deg, transparent var(--ov), var(--c1) var(--ov)); }
.lvl .lane::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: url(../img/bergs.svg) 0 100% / auto 100% repeat-x; opacity: .09;
}
.lvl .lane:nth-of-type(even)::before { background-position: 180px 100%; opacity: .075; }

/* ---------- Zones + panels ---------- */
.zone { position: relative; display: flex; padding-bottom: 20px; }
.panel {
  position: relative; width: min(1080px, calc(100% - 2 * var(--edge))); margin-inline: auto;
  border-radius: 30px; background-color: #FFFFFF; color: var(--ink);
  box-shadow: 0 10px 0 rgba(10, 30, 80, .28), 0 40px 70px -30px rgba(3, 10, 40, .7);
  padding: 58px clamp(1.25rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 2.4rem);
  outline: 3px dashed transparent; outline-offset: -12px;
  transition: scale .6s var(--spring), box-shadow .5s var(--ease), background-color .4s var(--ease), outline-color .3s;
}
.lvl .zone[data-chute="left"] { justify-content: flex-end; }
.lvl .zone[data-chute="none"] { justify-content: center; }
.lvl .panel { width: min(var(--panel-max), calc(100% - var(--chute) - var(--edge))); margin-inline: 0; }
.lvl .zone[data-chute="left"] .panel { margin-right: var(--edge); }
.lvl .zone[data-chute="right"] .panel { margin-left: var(--edge); }
.lvl .zone--final .panel { width: min(1080px, calc(100% - 2 * var(--edge))); }
.panel__body { position: relative; z-index: 1; }
.panel__head { max-width: 760px; }
.panel__head .lede { margin-top: -.2rem; }

/* ---------- Reveal: until Pengi reaches its flag, a section is a "???" block of ice ----------
   Only the look is gated: the text stays in the DOM for search engines and screen readers. */
.lock { display: none; }
.lvl .zone.is-locked .panel { background-color: rgba(160, 215, 255, .1); box-shadow: inset 0 0 0 2px rgba(190, 230, 255, .24), inset 0 0 80px rgba(120, 190, 255, .18), 0 10px 0 rgba(10, 30, 80, .12); outline-color: rgba(200, 236, 255, .32); }
.lvl .zone.is-locked .panel__body { opacity: 0; pointer-events: none; }
.lvl .zone.is-locked .lock, .lvl .zone.is-building .lock { display: grid; }
.lock {
  position: absolute; inset: 0; align-content: start; justify-content: center; justify-items: center; gap: .9rem; padding-top: clamp(80px, 17vh, 170px);
  pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    linear-gradient(rgba(200, 236, 255, .08) 2px, transparent 2px) 0 -1px / 100% 72px,
    linear-gradient(90deg, rgba(200, 236, 255, .06) 2px, transparent 2px) -1px 0 / 144px 100%,
    linear-gradient(160deg, rgba(220, 244, 255, .14), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 120px);
}
.lock__q { font: 700 clamp(3.4rem, 8vw, 6.4rem)/1 var(--mono); letter-spacing: .1em; color: rgba(214, 240, 255, .6); text-shadow: 0 0 26px rgba(120, 200, 255, .65), 0 4px 0 rgba(10, 30, 70, .35); animation: qFloat 3.2s ease-in-out infinite; }
.lock__hint {
  display: inline-flex; align-items: center; gap: .55em; padding: .65em 1.05em; border-radius: 999px;
  font: 700 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(222, 242, 255, .85);
  background: rgba(8, 17, 44, .5); border: 1.5px solid rgba(200, 236, 255, .28);
}
.lock__hint svg { width: 1.1em; height: 1.1em; color: var(--coral); }
.lock__cracks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; }
.lock__cracks path { fill: none; stroke: #F2FBFF; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(160, 225, 255, .9)); }
.zone.is-building .lock__cracks { opacity: 1; }
.zone.is-building .lock__cracks path { animation: crackDraw .26s var(--ease) forwards; }
.zone.is-building .lock__cracks path:nth-child(even) { animation-delay: .05s; }
.zone.is-building .lock__q { animation: qShake .26s linear; }
.zone.is-building .lock { animation: lockPop .5s var(--ease) .24s forwards; }
.zone.is-building .panel { animation: panelBuild .9s var(--spring) .2s backwards; box-shadow: 0 10px 0 rgba(10, 30, 80, .28), 0 0 0 6px var(--gold), 0 40px 90px -20px rgba(255, 209, 102, .7); transition-delay: .2s; }
.zone.is-building .blk { animation: blockDrop .72s var(--spring) backwards; animation-delay: calc(.34s + var(--i, 0) * 80ms); }

/* ---------- Story ---------- */
.story__head { max-width: none; }
.story__head .h2 { margin-bottom: .45em; }
/* The heading spans the card, so the photo and the two paragraphs are about the same height: centered side by side */
.story__row { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(1.25rem, 3vw, 2.4rem); align-items: center; }
.polaroid { position: relative; background: #fff; padding: 12px 12px 14px; border-radius: 20px; rotate: -2.5deg; box-shadow: 0 3px 0 #D7E6F3, 0 30px 50px -24px rgba(14, 47, 92, .5), 0 0 0 1.5px #E4EEF7; }
.polaroid img { width: 100%; height: auto; border-radius: 12px; }
.polaroid figcaption { font: 700 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 0; }
.tape { position: absolute; width: 96px; height: 26px; top: -12px; z-index: 2; background: repeating-linear-gradient(90deg, rgba(255, 209, 102, .9) 0 10px, rgba(255, 196, 70, .9) 10px 20px); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.tape--l { left: 8%; rotate: -8deg; }
.tape--r { right: 8%; rotate: 6deg; background: repeating-linear-gradient(90deg, rgba(70, 239, 198, .8) 0 10px, rgba(40, 214, 172, .8) 10px 20px); }
.story__copy p { color: var(--ink-2); font-size: 1.06rem; line-height: 1.66; }
.story__copy p + p { margin-top: .9rem; }
.story__chips { margin-top: 1.3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.chips li {
  font: 700 .82rem/1 var(--body); padding: .6em .95em; border-radius: 999px; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: translate .3s var(--spring), rotate .3s var(--spring), background .2s;
}
.chips li:hover { translate: 0 -4px; rotate: -3deg; background: var(--gold); }
.chips li:nth-child(even):hover { rotate: 3deg; }

[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .55s var(--spring), box-shadow .35s var(--ease); }
[data-tilt]:hover { --lift: -6px; }

/* ---------- Duo ---------- */
.duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: 1.4rem; }
.toybox {
  --box-bg: linear-gradient(165deg, #D93A52 0%, #C92C44 55%, #B32238 100%); --box-edge: #861A2B;
  --bubble-bg: radial-gradient(80% 70% at 50% 35%, #FFFFFF, #DDF1FF 55%, #A9D7F4);
  position: relative; border-radius: 28px; padding: 1.3rem 1.2rem 1.4rem; background: var(--box-bg); color: #fff;
  box-shadow: 0 8px 0 var(--box-edge), 0 30px 50px -26px rgba(10, 20, 48, .6);
}
.toybox--lacey { --box-bg: linear-gradient(165deg, #1E7F86 0%, #146269 55%, #0D4A50 100%); --box-edge: #073236; --bubble-bg: radial-gradient(80% 80% at 50% 40%, #FFF3E2, #FFD8B8 60%, #F5B28E); }
.toybox__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.toybox__kicker { display: block; font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: .3rem; }
.toybox h3 { font: 800 clamp(2.1rem, 3.6vw, 3rem)/.9 var(--display); letter-spacing: -.04em; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.toybox__tag { font: 700 .7rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; background: rgba(255, 255, 255, .95); color: var(--ink); padding: .55em .8em; border-radius: 999px; rotate: 3deg; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.toybox__bubble {
  position: relative; margin: .9rem 0 1rem; aspect-ratio: 5 / 3.6; border-radius: 22px; overflow: hidden; background: var(--bubble-bg);
  border: 3px solid rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .18), inset 0 -24px 40px rgba(0, 0, 0, .1);
}
.toybox__bubble img { position: absolute; left: 0; right: 0; bottom: 5%; margin-inline: auto; width: 100%; height: 88%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; transition: scale .5s var(--spring); }
.toybox--lacey .toybox__bubble img { bottom: 12%; height: 74%; transform-origin: 50% 50%; animation: laceyFloat 4.2s ease-in-out infinite; }
.toybox:hover .toybox__bubble img { scale: 1.07; }
.glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--gx, 28%) var(--gy, 18%), rgba(255, 255, 255, .55), transparent 38%), linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 44%, transparent 52%); }
.toybox > p { font-size: 1rem; line-height: 1.55; opacity: .96; }
.toybox .chips { margin-top: .9rem; }
.toybox .chips li { background: rgba(255, 255, 255, .95); border-color: rgba(0, 0, 0, .15); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }

/* ---------- Worlds ---------- */
.worlds__art { position: relative; margin-top: 1.2rem; border-radius: 22px; overflow: hidden; aspect-ratio: 2.2 / 1; box-shadow: 0 0 0 3px #E6EEF8, 0 26px 50px -26px rgba(60, 40, 140, .6); }
.worlds__art img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.worlds__art:hover img { scale: 1.05; }
.worlds__art figcaption, .clip figcaption { position: absolute; left: 12px; bottom: 12px; font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(10, 20, 48, .78); color: var(--frost); padding: .6em .9em; border-radius: 999px; }
.tickets { position: relative; margin-top: 1.4rem; }
.tickets__bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.tickets__hint { font: 700 .74rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.punch-count { background: #FFF4D6; color: #8A5A00; border: 1.5px solid #F2C866; padding: .5em .8em; border-radius: 999px; }
.punch-count b { display: inline-block; }
.punch-count b.bump { animation: bump .5s var(--spring); }
.arrows { display: flex; gap: .5rem; }
.arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; background: #fff; color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink);
  transition: translate .3s var(--spring), background .2s, scale .3s var(--spring), rotate .3s var(--spring);
}
.arrow svg { width: 20px; height: 20px; }
.arrow:hover { background: var(--gold); scale: 1.08; }
.arrow:active { scale: .9; }
.tickets__track { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 1.1rem .4rem 1.6rem; margin-inline: -.4rem; scrollbar-width: none; }
.tickets__track::-webkit-scrollbar { display: none; }
.ticket { flex: 0 0 clamp(210px, 22vw, 240px); scroll-snap-align: start; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .28)) drop-shadow(0 18px 20px rgba(0, 0, 0, .22)); transition: translate .4s var(--spring), rotate .4s var(--spring); }
.ticket:hover { translate: 0 -8px; rotate: -2deg; }
.ticket:nth-child(even):hover { rotate: 2deg; }
.ticket:has(.ticket__btn:focus-visible) { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 22px; }
.ticket__btn {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 300px; padding: 1.1rem 1.1rem 1rem;
  border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(165deg, var(--t1), var(--t2));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28); outline: none;
  -webkit-mask: radial-gradient(circle 12px at 0 78%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 78%, transparent 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 78%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 78%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.ticket__btn::before { content: ""; position: absolute; left: 20px; right: 20px; top: 78%; border-top: 2px dashed rgba(255, 255, 255, .45); }
.ticket__top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; font: 700 .64rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ticket__kind { background: rgba(255, 255, 255, .2); padding: .45em .7em; border-radius: 999px; }
.ticket__icon { width: 60px; height: 60px; margin: 1rem 0 .7rem; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .35); animation: bob 3.4s ease-in-out infinite; }
.ticket:nth-child(odd) .ticket__icon { animation-delay: -1.3s; }
.ticket__icon svg { width: 100%; height: 100%; }
.ticket__name { font: 800 1.4rem/1 var(--display); letter-spacing: -.03em; margin-bottom: .45rem; }
.ticket__blurb { font-size: .88rem; line-height: 1.45; opacity: .94; }
.ticket__stamp { position: absolute; right: 1rem; bottom: 1.1rem; rotate: -12deg; scale: 2.2; opacity: 0; font: 800 1.1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 3px solid var(--gold); border-radius: 10px; padding: .3em .5em; background: rgba(10, 20, 48, .35); transition: scale .45s var(--spring), opacity .2s; }
.ticket.punched .ticket__stamp { scale: 1; opacity: 1; }

/* ---------- Gallery ---------- */
.gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; max-width: none; }
.gallery__head .lede { max-width: 30em; }
.ue-badge { display: inline-flex; align-items: center; gap: .6em; font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .75em 1.05em; border-radius: 999px; background: var(--ink); color: var(--frost); rotate: 2deg; box-shadow: 0 4px 0 #000; }
.ue-badge i { width: .6em; height: .6em; border-radius: 50%; background: var(--coral); animation: pulse 1.8s ease-out infinite; }
.clip { position: relative; margin-top: 1.3rem; border-radius: 22px; overflow: hidden; background: #0B1733; aspect-ratio: 16 / 9; box-shadow: 0 6px 0 #C3D9EC, 0 24px 40px -22px rgba(14, 47, 92, .6); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { display: flex; align-items: center; gap: .6em; text-transform: none; letter-spacing: .02em; font: 700 .78rem/1.2 var(--body); max-width: calc(100% - 80px); }
.clip__tag { font: 800 .8rem/1 var(--display); color: var(--ink); background: var(--gold); padding: .35em .6em; border-radius: 999px; text-transform: uppercase; rotate: -3deg; flex: none; }
.clip__toggle { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: scale .3s var(--spring); }
.clip__toggle:hover { scale: 1.1; }
.clip__toggle svg { width: 18px; height: 18px; }
.clip__toggle .ic-play, .clip__toggle[aria-pressed="true"] .ic-pause { display: none; }
.clip__toggle[aria-pressed="true"] .ic-play { display: block; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 14px); margin-top: 1rem; }
.shot { position: relative; border-radius: 16px; overflow: hidden; background: #CFE6F7; aspect-ratio: 16 / 9; box-shadow: 0 5px 0 #C3D9EC; transition: translate .4s var(--spring), rotate .4s var(--spring), box-shadow .3s var(--ease); }
.shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.shot a { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.shot a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 16px; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.shot:hover { translate: 0 -5px; rotate: -.8deg; box-shadow: 0 8px 0 #C3D9EC, 0 0 0 4px var(--gold); }
.shot:nth-child(even):hover { rotate: .8deg; }
.shot:hover img { scale: 1.07; }
.shot figcaption { position: absolute; left: 8px; bottom: 8px; pointer-events: none; font: 700 .64rem/1.1 var(--mono); letter-spacing: .04em; text-transform: uppercase; background: rgba(10, 20, 48, .8); color: #fff; padding: .5em .7em; border-radius: 999px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .25s, translate .35s var(--spring); }
.shot:hover figcaption { background: var(--coral-strong); translate: 0 -3px; }

.lightbox { border: 0; padding: 0; background: transparent; width: min(94vw, 1180px); max-width: none; max-height: none; overflow: visible; color: #fff; }
.lightbox::backdrop { background: rgba(4, 9, 26, .88); }
.lightbox[open] .lightbox__frame { animation: popIn .5s var(--spring); }
.lightbox__frame { position: relative; }
.lightbox__img { width: 100%; max-height: 76vh; object-fit: contain; border-radius: 16px; background: #050A1C; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); touch-action: pan-y; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.lightbox__cap { font: 800 1.15rem/1.2 var(--display); }
.lightbox__count { font: 700 .75rem/1 var(--mono); letter-spacing: .08em; opacity: .7; margin-left: .75rem; }
.lightbox__ctrls { display: flex; gap: .6rem; }
.lightbox__close { position: absolute; top: -16px; right: -16px; z-index: 2; background: var(--coral) !important; border-color: #fff !important; color: #fff !important; box-shadow: none; }
.lightbox__close:hover { rotate: 90deg; }

/* ---------- Launch (the level ends here) ---------- */
.launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.4rem); align-items: start; }
.launch__main .btn { margin-top: 1.1rem; }
.launch__main > p:not(.eyebrow) { color: var(--ink-2); font-size: 1.08rem; }
.platforms { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.platforms li { font: 800 .85rem/1 var(--display); padding: .65em 1em; border-radius: 12px; background: var(--ink); color: var(--frost); box-shadow: 0 4px 0 #000; rotate: -2deg; transition: rotate .3s var(--spring), translate .3s var(--spring), background .2s; }
.platforms li:nth-child(even) { rotate: 2deg; }
.platforms li:hover { rotate: 0deg; translate: 0 -4px; background: var(--coral-strong); }
.launch__signup { position: relative; border-radius: 24px; padding: clamp(1.2rem, 2.6vw, 1.8rem); background: linear-gradient(160deg, #FFF3E4, #FFE1EA 60%, #EEE4FF); border: 2px solid #fff; box-shadow: 0 6px 0 rgba(170, 70, 100, .18), 0 26px 40px -26px rgba(120, 40, 70, .5); }
.launch__signup .h3 { margin-top: .5rem; }
.launch__signup > p:not(.eyebrow) { color: var(--ink-2); }
.launch__signup.pulse { animation: signupPulse 1.6s var(--ease) 2; }
.signup { margin-top: 1.1rem; }
.signup__row { display: flex; gap: .7rem; flex-wrap: wrap; }
.signup__row .btn { flex: 1 0 auto; }
.signup input {
  flex: 1 1 220px; min-width: 0; font: 600 1.05rem/1 var(--body); color: var(--ink); padding: 1em 1.2em; border-radius: 999px;
  border: 2.5px solid var(--ink); background: #fff; box-shadow: 0 4px 0 var(--ink); transition: box-shadow .25s, border-color .2s, translate .3s var(--spring);
}
.signup input::placeholder { color: #7D8CA8; }
.signup input:focus { outline: none; border-color: var(--coral); box-shadow: 0 4px 0 var(--coral), 0 0 0 6px rgba(255, 84, 104, .18); translate: 0 -2px; }
.signup__fine { font: 700 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }
.signup__msg { min-height: 1.5em; margin-top: .4rem; font-weight: 700; color: var(--ink); }
.signup__msg[data-state="error"] { color: var(--coral-d); }
.signup.shake { animation: shake .45s ease-in-out; }

/* ---------- Studio ---------- */
.studio { position: relative; padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(5rem, 9vw, 7rem); }
.studio__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.studio .eyebrow { color: #A5263B; }
.studio .lede { color: #3C2A3A; }
.studio .lede + p { margin-top: 1rem; color: #3C2A3A; font-size: 1.06rem; max-width: 36em; }
.pond-wrap { text-align: center; }
.skipstone { position: relative; display: block; width: min(100%, 400px); aspect-ratio: 1.15; margin-inline: auto; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pond { position: absolute; left: 0; right: 0; bottom: 8%; height: 42%; border-radius: 50%; background: radial-gradient(60% 60% at 45% 40%, #CFEFFF, #8FD0F2 60%, #5EAEDF); box-shadow: inset 0 -10px 30px rgba(20, 70, 130, .3), 0 20px 40px -20px rgba(14, 47, 92, .5); transition: scale .4s var(--spring); }
.skipstone:hover .pond { scale: 1.03; }
.stone { position: absolute; left: 14%; bottom: 36%; width: 34%; transform-origin: 50% 80%; animation: breathe 3.8s ease-in-out infinite; transition: rotate .4s var(--spring); }
.skipstone:hover .stone { rotate: -10deg; }
.stone svg { width: 100%; height: auto; filter: drop-shadow(0 14px 10px rgba(14, 47, 92, .3)); }
.splash { position: absolute; width: 22%; aspect-ratio: 3; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); translate: -50% 50%; pointer-events: none; }
.pond-label { display: inline-block; margin-top: .6rem; font: 700 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #5B3A48; rotate: -2deg; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.8rem; }
.value { background: #fff; border-radius: 20px; padding: 1.2rem 1.1rem 1.3rem; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: translate .35s var(--spring), rotate .35s var(--spring), box-shadow .3s, background .25s; }
.value:hover { translate: 0 -6px; rotate: -1.5deg; box-shadow: 0 10px 0 var(--ink); background: #FFF7E0; }
.value:nth-child(2):hover { rotate: 1.5deg; background: #E6FFF8; }
.value svg { width: 40px; height: 40px; margin-bottom: .6rem; transition: rotate .4s var(--spring), scale .4s var(--spring); }
.value:hover svg { rotate: -12deg; scale: 1.18; }
.value h3 { font: 800 1.3rem/1 var(--display); letter-spacing: -.02em; margin-bottom: .4rem; }
.value p { font-size: .94rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Ticker ---------- */
.ticker-wrap { position: relative; z-index: 2; overflow: clip; padding-block: 1.2rem; margin-block: -2.6rem -1.2rem; }
.ticker { width: 106vw; margin-left: -3vw; rotate: -2deg; background: var(--coral-strong); color: #fff; overflow: hidden; padding: .9rem 0; border-block: 3px solid #fff; box-shadow: 0 7px 0 var(--coral-deep), 0 20px 40px -10px rgba(210, 58, 80, .45); }
.ticker__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker__item { display: inline-flex; align-items: center; gap: 1.2rem; padding-right: 1.2rem; white-space: nowrap; font: 800 clamp(1rem, 1.7vw, 1.3rem)/1 var(--display); text-transform: uppercase; }
.ticker__item svg { width: 1.15em; height: 1.15em; color: var(--gold); animation: spin 7s linear infinite; }
.ticker__item svg.fishy { width: 1.6em; animation: fishFlop 2.4s ease-in-out infinite; }

/* ---------- Footer ---------- */
.footer { padding: clamp(4.5rem, 8vw, 6.5rem) 0 2rem; background: var(--night); color: #C3D6F2; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.4rem; align-items: start; }
.footer .brand { color: var(--frost); font-size: 1.25rem; }
.footer .brand svg { width: 50px; height: 42px; }
.footer__tag { margin-top: .9rem; max-width: 22em; }
.footer h3 { font: 700 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer__links { display: grid; gap: .45rem; }
.footer__links a { text-decoration: none; font-weight: 600; display: inline-block; transition: translate .3s var(--spring), color .2s; }
.footer__links a:hover { color: var(--gold); translate: 6px 0; }
.footer__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.footer__fine { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; line-height: 1.6; color: #8EA4C8; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__fine p:first-child { max-width: 60em; }
.footer__egg { font: 700 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--aurora); }

/* ---------- World HTML: signs + speech bubbles ---------- */
.sign {
  position: absolute; left: 0; top: 0; translate: -50% -100%; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45em; padding: .55em .8em; border-radius: 14px;
  font: 700 .82rem/1.2 var(--display); color: var(--ink); background: rgba(242, 249, 255, .96);
  box-shadow: 0 4px 0 #9CC5E4, 0 14px 22px -10px rgba(0, 10, 40, .5); rotate: -2deg;
  animation: signBob 3.2s ease-in-out infinite;
}
.sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 5px; height: 26px; translate: -50% 4px; border-radius: 3px; background: linear-gradient(#E6F2FB, #A9CBE6); z-index: -1; }
.sign kbd { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 2px 0 #000; }
.sign:nth-child(even) { rotate: 2deg; animation-delay: -1.4s; }
.sign--small { font-size: .74rem; padding: .45em .65em; }
.sign--tall::after { height: 48px; }
/* The wall it stood on got smashed: the sign tumbles down with it */
.sign.sign--down { animation: none; opacity: 0; translate: -50% -30%; rotate: 14deg; visibility: hidden; transition: opacity .35s ease, translate .45s cubic-bezier(.5, 0, .8, .4), rotate .45s ease, visibility 0s linear .45s; }
.bubble {
  position: absolute; left: 0; top: 0; translate: -50% -100%; padding: .6em .9em; border-radius: 16px; white-space: nowrap;
  background: #fff; color: var(--ink); font: 800 .9rem/1.2 var(--display);
  box-shadow: 0 4px 0 #BFD6EA, 0 14px 24px -10px rgba(0, 10, 40, .5); opacity: 0; scale: .3; transform-origin: 50% 100%;
  transition: opacity .2s, scale .4s var(--spring);
}
.bubble::after { content: ""; position: absolute; left: 50%; top: calc(100% - 6px); width: 14px; height: 14px; background: #fff; rotate: 45deg; translate: -50% 0; border-radius: 3px; box-shadow: 3px 3px 0 #BFD6EA; }
.bubble.show { opacity: 1; scale: 1; }

/* ---------- Callouts ----------
   They live in page coordinates beside Pengi (game.js picks a spot clear of every panel and the title),
   rise, fade and are removed. Sizes are in em so the game can shrink one to fit a narrow gap. */
.callouts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
.callout { position: absolute; left: 0; top: 0; display: grid; justify-items: center; text-align: center; white-space: nowrap; font-size: clamp(12px, 1.1vw, 16px); transform-origin: 50% 100%; animation: calloutIn 1.9s var(--ease) forwards; }
.callout.is-waiting, .callout.is-waiting * { visibility: hidden; animation-play-state: paused; }
.callout__star { width: 3em; height: auto; color: var(--gold); filter: drop-shadow(0 3px 0 #B86B00) drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); animation: starSpin 1.9s var(--spring); }
.callout__big {
  font: 800 2.8em/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; font-style: italic; padding: 0 .22em;
  color: #FFE7A0; -webkit-text-stroke: 2px #3A2200; paint-order: stroke fill;
  text-shadow: 0 4px 0 #9A5A00, 0 7px 0 #3A2200, 0 16px 24px rgba(0, 0, 0, .4);
}
.callout__sub { margin-top: .45em; font: 800 1.05em/1.2 var(--display); color: #fff; background: rgba(8, 17, 44, .86); padding: .45em .9em; border-radius: 999px; }
.callout--small .callout__star { width: 2.2em; }
.callout--small .callout__big { font-size: 1.85em; }

/* ---------- Pause bar ---------- */
.pausebar {
  position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 240; display: flex; align-items: center; gap: .6rem;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(8, 17, 44, .9); color: var(--frost);
  border: 1.5px solid rgba(255, 255, 255, .18); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); animation: popIn .4s var(--spring);
  max-width: calc(100% - 20px);
}
.pausebar__title { display: inline-flex; align-items: center; gap: .45em; font: 800 .92rem/1.2 var(--display); margin-right: .2rem; }
.pausebar__title svg { width: 1em; height: 1em; color: var(--gold); flex: none; }

/* ---------- Touch controls ---------- */
.touchpad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 230; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; }
.touchpad__dpad, .touchpad__acts { display: flex; gap: 10px; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touchpad__dpad { padding: 6px; border-radius: 999px; background: rgba(8, 17, 44, .38); border: 1.5px solid rgba(255, 255, 255, .22); }
.tp {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 1px;
  background: rgba(255, 255, 255, .86); color: var(--ink); box-shadow: 0 5px 0 rgba(8, 17, 44, .45);
  transition: scale .12s, translate .12s, background .12s;
}
.tp svg { width: 28px; height: 28px; }
.tp small { font: 800 .62rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.tp.on { scale: .92; translate: 0 3px; background: var(--gold); box-shadow: 0 2px 0 rgba(8, 17, 44, .45); }
.tp--jump { width: 82px; height: 82px; background: rgba(255, 229, 154, .95); }
.tp--jump svg { width: 34px; height: 34px; }
.tp--slide { align-self: flex-end; }
.tp--slide svg { width: 34px; height: 26px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 400; translate: -50% 160%; display: flex; align-items: center; gap: .6rem; width: max-content; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--frost); font-weight: 700; padding: .9em 1.3em; border-radius: 22px; border: 2px solid rgba(255, 255, 255, .2);
  box-shadow: 0 6px 0 #000, 0 20px 40px -10px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden;
  transition: translate .5s var(--spring), opacity .25s, visibility 0s linear .5s;
}
.toast svg { width: 1.3em; height: 1.3em; color: var(--gold); flex: none; }
.toast.show { translate: -50% 0; opacity: 1; visibility: visible; transition: translate .5s var(--spring), opacity .2s, visibility 0s; }
.is-playing .toast.show, .is-paused .toast.show { translate: -50% -90px; }
.particle { position: fixed; z-index: 350; pointer-events: none; width: var(--s); height: var(--s); }
.particle svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- Keyframes ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes auroraDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 2vw) scale(1.15); } 100% { transform: translate(-4vw, -1vw) scale(.95); } }
@keyframes logoBob { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -8px; rotate: 1deg; } }
@keyframes logoBoing { 0% { scale: 1; } 30% { scale: 1.1 .88; } 55% { scale: .95 1.07; } 100% { scale: 1; } }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 1.035; } }
@keyframes laceyFloat { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes signBob { 0%, 100% { translate: -50% -100%; } 50% { translate: -50% calc(-100% - 5px); } }
@keyframes fishFlop { 0%, 100% { rotate: -6deg; translate: 0 0; } 50% { rotate: 6deg; translate: 0 -4px; } }
@keyframes bump { 0% { scale: 1; } 40% { scale: 1.6; } 100% { scale: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 84, 104, .6); } 100% { box-shadow: 0 0 0 10px rgba(255, 84, 104, 0); } }
@keyframes popIn { 0% { scale: .85; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -10px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
@keyframes boing { 0% { scale: 1; } 30% { scale: 1.12 .9; } 55% { scale: .94 1.06; } 100% { scale: 1; } }
@keyframes stageGlow { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes blink { 0%, 58% { opacity: 1; } 60%, 100% { opacity: .28; } }

@keyframes crtRoll { to { transform: translateY(800%); } }
@keyframes arcFlicker { 0% { opacity: .82; } 100% { opacity: 1; } }
@keyframes crtOn { 0% { transform: scale(.55, .005); filter: brightness(7); } 38% { transform: scale(1, .005); filter: brightness(5); } 100% { transform: scale(1, 1); filter: brightness(1); } }
@keyframes qFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes qShake { 0%, 100% { translate: 0 0; } 25% { translate: -5px 1px; } 50% { translate: 4px -2px; } 75% { translate: -3px 2px; } }
@keyframes crackDraw { to { stroke-dashoffset: 0; } }
@keyframes lockPop { 0% { opacity: 1; transform: scale(1); } 25% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.14); } }
@keyframes panelBuild { 0% { scale: .93; } 45% { scale: 1.025; } 70% { scale: .994; } 100% { scale: 1; } }
@keyframes blockDrop {
  0% { opacity: 0; transform: translateY(-64px) scale(.92, 1.1); }
  55% { opacity: 1; transform: translateY(7px) scale(1.04, .94); }
  78% { transform: translateY(-3px) scale(.99, 1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes cpFlash { 0% { background: var(--gold); color: var(--ink); } 100% { background: rgba(255, 255, 255, .08); color: inherit; } }
@keyframes signupPulse { 0%, 100% { box-shadow: 0 6px 0 rgba(170, 70, 100, .18), 0 0 0 0 rgba(255, 209, 102, .9); } 50% { box-shadow: 0 6px 0 rgba(170, 70, 100, .18), 0 0 0 10px rgba(255, 209, 102, 0); } }
@keyframes calloutIn {
  0% { opacity: 0; transform: translateY(18px) scale(.4) rotate(-6deg); }
  14% { opacity: 1; transform: translateY(0) scale(1.12) rotate(2deg); }
  24% { transform: scale(.97) rotate(-1deg); }
  32% { transform: scale(1) rotate(0deg); }
  82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(.9); visibility: hidden; }
}
@keyframes starSpin { 0% { rotate: -180deg; scale: 0; } 60% { rotate: 20deg; scale: 1.2; } 100% { rotate: 0deg; scale: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .nav__links { display: none; }
}
@media (max-width: 900px) {
  .hud__cp { display: none; }
  .story__row { grid-template-columns: minmax(0, 1fr); }
  .story__row .polaroid { max-width: 520px; margin-top: .3rem; }
  .duo__grid, .launch__grid, .studio__grid { grid-template-columns: 1fr; }
  /* With the game on, the signup sits right under the igloo so the finale lands on it */
  .lvl .launch__signup { order: -1; }
  .studio__grid .pond-wrap { order: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  :root { --lane: 270px; --lane0: 280px; --chute: 62px; --edge: 10px; }
  body { font-size: 1rem; }
  .nav { top: 8px; padding: 6px 6px 6px 10px; gap: .35rem; }
  .brand__text { display: none; }
  .brand svg { width: 34px; height: 29px; }
  .hud { gap: .3rem; }
  .hud__chip, .hud__btn { height: 38px; }
  .hud__chip { padding: 0 .65em; }
  .hud__skip span, .hud__play span { display: none; }
  .hud__play { padding: 0 .7em; }
  .hero { padding-top: 84px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "foot"; }
  .hero__stage { height: 250px; }
  .hero__logo { margin: .6rem 0 .3rem -.4rem; width: min(100%, 340px); }
  /* Phone, game on: logo, the pitch and the platforms line stacked and centered, the first floor right under */
  .lvl .hero { padding: 70px 0 14px; }
  .lvl .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "logo" "lede" "plat" "from"; justify-items: center; text-align: center; row-gap: 0; }
  .lvl .sticker { display: none; }
  .lvl .hero__logo { justify-self: center; margin: 0; width: min(86%, 300px); }
  .lvl .hero__lede { margin-top: .35rem; font-size: .92rem; line-height: 1.45; max-width: 25em; }
  .lvl .hero__platforms { margin-top: .5rem; font-size: .64rem; }
  .lvl .hero__from { font-size: .6rem; }
  .lvl .lane[data-lane="0"] { --ov: 10px; height: var(--lane0); }
  .lvl .hud__fish b { font-size: 12px; }
  .panel { border-radius: 22px; padding: 42px 16px 20px; }
  .h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .toybox { padding: 1rem .95rem 1.1rem; border-radius: 22px; }
  .toybox__bubble { aspect-ratio: 16 / 10; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .shot:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
  .shot figcaption { font-size: .56rem; }
  .clip figcaption { font-size: .68rem; }
  .worlds__art { aspect-ratio: 16 / 9; }
  .ticket { flex-basis: 200px; }
  .values { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .lightbox__close { top: -14px; right: -6px; }
  .pausebar { flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: 10px; bottom: 12px; }
  .pausebar__title { width: 100%; justify-content: center; }
}
@media (max-width: 370px) {
  .hud__cp, .js-mute { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .callout { animation: calloutFade 2.2s linear forwards !important; animation-duration: 2.2s !important; }
  .callout.is-waiting { animation-play-state: paused !important; }
  .aurora { display: none; }
  .arcade__fx::after { animation: none !important; display: none; }
  .arcade__screen.is-poweron { animation: none !important; }
}
@keyframes calloutFade { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }