:root { --snap-header: 80px; }
/* JS owns desktop document movement; native CSS snap must not compete with it. */
html.view-snap-active { scroll-snap-type: none; scroll-behavior: auto; scroll-padding-top: var(--snap-header); }
html.view-snap-active .site-header { position: fixed; padding-top: 16px; padding-bottom: 16px; }
.view-snap-toggle {
  position: fixed; right: 20px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 8;
  display: inline-flex; align-items: center; gap: 9px; min-height: 35px;
  padding: 10px 13px; border: 1px solid rgba(139,255,244,.32); border-radius: 2px;
  background: rgba(7,10,13,.88); backdrop-filter: blur(14px); color: #cfdfdf;
  font-size: 9px; font-weight: 600; letter-spacing: .035em;
}
.view-snap-toggle::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #758183; }
.view-snap-toggle[aria-pressed="true"]::before { background: var(--cyan, #8bfff4); box-shadow: 0 0 9px #8bfff45c; }
.view-snap-toggle:hover { border-color: var(--cyan, #8bfff4); color: white; }
.view-snap-toggle[hidden], body.dialog-open .view-snap-toggle { display: none; }
/* Keep the cinematic chapters to one actual view, rather than a tiny tail stop. */
@media (min-height: 600px) {
  html.view-snap-active .hero { height: 100svh; min-height: 0; max-height: none; }
  html.view-snap-active .hero-content { top: clamp(105px, 17svh, 180px); }
  html.view-snap-active .hero h1 { font-size: min(10.3vw, 15svh); }
  html.view-snap-active .hero-bottom-content { margin-top: 26px; }
  html.view-snap-active .hero-actions { margin-top: 24px; }
  html.view-snap-active .hero-mode-link { margin-top: 16px; }
  html.view-snap-active .game-chapter,
  html.view-snap-active .arcade-gallery { height: calc(100svh - var(--snap-header)); min-height: 0; max-height: none; }
  html.view-snap-active .chapter-content { bottom: 48px; }
  html.view-snap-active .chapter-content h3 { font-size: min(15vw, 22svh); }
  html.view-snap-active .gallery-title { top: 105px; }
  html.view-snap-active .gallery-title h2 { font-size: min(10vw, 15svh); }
  html.view-snap-active .gallery-title > p { margin-top: 22px; }
  html.view-snap-active .gallery-bottom { bottom: 80px; }
}
@media (max-width: 760px) and (min-height: 600px) {
  html.view-snap-active .hero-content { top: clamp(108px, 16svh, 172px); }
  html.view-snap-active .hero h1 { font-size: clamp(48px, 16vw, min(130px, 15svh)); }
  html.view-snap-active .hero-eyebrow { margin-bottom: 16px; }
  html.view-snap-active .hero-bottom-content { margin-top: 20px; }
  html.view-snap-active .hero-actions { margin-top: 18px; gap: 14px; }
  html.view-snap-active .chapter-content { bottom: 36px; gap: 22px; }
  html.view-snap-active .chapter-content h3 { font-size: min(135px, 22svh); }
  html.view-snap-active .gallery-title { top: 105px; }
  html.view-snap-active .gallery-title h2 { font-size: min(88px, 15svh); }
  html.view-snap-active .gallery-title > p { margin-top: 18px; }
  html.view-snap-active .gallery-bottom { bottom: 86px; }
  .view-snap-toggle { right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 9px 11px; }
}
@media (min-width: 761px) and (min-height: 600px) {
  html.view-snap-active .experience,
  html.view-snap-active .games-intro {
    min-height: calc(100svh - var(--snap-header));
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 32px; padding-bottom: 32px;
  }
  html.view-snap-active .experience .section-kicker,
  html.view-snap-active .games-intro .section-kicker { margin-bottom: 24px; }
  html.view-snap-active .experience .display-heading { font-size: clamp(78px, 8.1vw, 13svh); }
  html.view-snap-active .experience-ribbon { margin-top: 24px; padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 760px) and (min-height: 600px) and (max-height: 700px) {
  html.view-snap-active .hero-content { top: 96px; }
  html.view-snap-active .hero h1 { font-size: clamp(48px, 16vw, min(130px, 13.5svh)); }
  html.view-snap-active .hero-mode-link { display: none; }
}
/* Small landscape screens and reduced motion retain native continuous reading. */
@media (max-height: 420px), (prefers-reduced-motion: reduce) {
  .view-snap-toggle { display: none; }
  html { scroll-snap-type: none; }
}