/* Keep the document as the single vertical scroll surface. */
html, body { overflow-x: clip; }
body.lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
main, .shell, .hero-layout > *, .about-grid > *, .neon-grid > *,
.scene-head > *, .acc-grid > *, .recruit-grid > *, .facts > * { min-width: 0; }
/* SVG percentages must not feed back into an auto-height grid track on Safari. */
.duo-img { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); }
.duo-img > figure { min-width: 0; }
.duo-img .a .ph { padding: 0; }
.duo-img .hero-pigwrap { position: absolute; inset: 16px 12px; width: auto; height: auto; aspect-ratio: auto; }
.duo-img .hero-pigwrap .boo-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%; }
.ph > img { position: absolute; inset: 0; }
.hero-act, .hero-bottomline, .sns { flex-wrap: wrap; }
.recruit-link { max-width: 100%; white-space: normal; text-align: left; }
.recruit-link span, .bignum svg { flex: none; }
.game-canvas { position: absolute; inset: 0; }
.game-cover { overflow-y: auto; overscroll-behavior: contain; }
.sheet { overscroll-behavior-y: contain; }
.gal-track { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.roulette-top > p, .roulette-saved button > * { min-width: 0; }
.roulette-odds { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.roulette-ticket strong { font-size: clamp(2.5rem, 14vw, 4rem); overflow-wrap: anywhere; }

@media (max-width: 800px) {
  html { scroll-behavior: auto; scroll-padding-top: 88px; }
  .gnav, .js .gnav { min-height: 76px; padding: 10px 5vw; }
  .gnav-mark > span { font-size: 1.85rem; }
  .gnav-mark img { width: 35px; height: 32px; }
  .hero { min-height: 0; padding: 100px 5vw 0; }
  .hero-layout { display: flex; flex: none; flex-direction: column; align-items: stretch; min-height: 0; gap: 32px; padding: 24px 0; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 4.6rem); line-height: 1.3; margin-left: 0; }
  .hero-title-line > span { white-space: normal; }
  .hero-kicker { margin-bottom: 20px; font-size: .8125rem; }
  .hero-copy-bottom { display: block; margin-top: 18px; }
  .hero-sub { font-size: 1rem; }
  .hero-act { margin-top: 24px; gap: 14px 20px; }
  .hero-act .btn-p { min-width: 0; max-width: 100%; padding: 15px 18px; gap: 18px; }
  .hero-line { font-size: .875rem; white-space: nowrap; }
  .hero-art { flex: none; align-self: stretch; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; margin: 0 0 16px; }
  .hero-bottomline { gap: 10px 16px; padding-block: 16px; }
  .hero-bottomline > span { max-width: none; }
  .hero-bottom-note { display: none; }
  .about-grid, .scene-head, .acc-grid, .recruit-grid, .neon-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-img { width: 92%; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); gap: 16px; }
  .duo-img .a { margin-right: -20px; }
  .neon-grid { min-height: 0; }
  .neon-ph { min-height: 0; aspect-ratio: 4 / 3; }
  .neon-txt { padding: 48px 5vw; }
  .bignum { max-width: 100%; font-size: clamp(1.9rem, 8.6vw, 3rem); gap: 8px; }
  .bignum svg { width: 22px; height: 22px; }
  .book .display-heading { font-size: clamp(2.25rem, 9.8vw, 4rem); }
  .recruit-link { width: 100%; gap: 16px; padding-inline: 18px; }
  .fbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .fbar .secret-door { margin: 0; }
  .fbar .roulette-open { width: 100%; max-width: none; margin: 0; }
  #motionToggle { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .dock-in { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .dock .btn { white-space: normal; line-height: 1.5; min-height: 44px; }
  .up { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .sheet { justify-content: flex-start; padding: 80px 6vw calc(24px + env(safe-area-inset-bottom)); }
  .sheet a { padding: 10px 12px; font-size: 1.5rem; }
  .roulette-panel { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100svh - 24px - env(safe-area-inset-bottom)); padding: 16px; border-radius: 16px; }
  .roulette-panel h2 { font-size: clamp(1.125rem, 5.3vw, 1.4375rem); }
  .roulette-stage { width: min(204px, 100%, 34svh); height: auto; aspect-ratio: 1; margin-block: 10px 16px; }
  .roulette-center { inset: 22%; }
  .roulette-pig { width: 78%; height: auto; }
  .roulette-center small { font-size: 11px; }
}

@media (max-width: 700px) {
  .boo-game { width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; }
  .game-head { position: sticky; top: 0; background: #121216; z-index: 6; }
  .game-layout { padding: 14px; }
  /* Browser toolbar changes must not repeatedly shrink the playing field. */
  .game-machine { max-width: clamp(240px, calc((100svh - 200px) * .75), 480px); }
  .game-cover { padding: 16px; }
  .game-cover h3 { font-size: clamp(1.125rem, 5.5vw, 1.5625rem); margin-bottom: 10px; }
  .game-cover .cover-pig { width: 56px; height: 63px; margin-bottom: 8px; }
  .game-cover p { font-size: .75rem; line-height: 1.7; }
  .game-aside { margin-inline: auto; }
}

@media (max-width: 360px) {
  .hero-act { gap: 12px; }
  .hero-act .btn-p { padding-inline: 14px; gap: 12px; }
  .fact { padding-inline: 10px !important; }
  .fact b { font-size: 2.25rem; }
  .spec > div { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .game-layout { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .game-machine { max-width: 240px; }
  .roulette-stage { width: 140px; }
  .roulette-center small { display: none; }
}