/* ---- The parallax system ----
   Anything marked .l moves with the scroll: transform and opacity only, from its *0 values to its *1 values.
     --d       shorthand for vertical depth. Plus runs ahead of the scroll (near), minus lags behind it (far).
     --x, --y, --r, --s, --o  with 0 and 1 suffixes, for anything else.
   Timelines: by default the enclosing .sec, across its whole pass through the viewport, so an element rests at its
   layout position when its section is centred. Add .o to fly in over the nearest .own's approach and then stay.
   A .blk inside a long section gives its layers their own pass, so type that sits close together stays apart.
   Add .t for the pinned track at the end of the page.
   Where the browser has scroll-driven animations, the compositor runs all of this. Elsewhere landing.js writes
   --p (0 to 1) on each nearby .sec, .blk, .own and .arrive, and the same numbers go through calc(). */
.l {
  --x0: 0px; --x1: 0px; --y0: var(--d, 0px); --y1: calc(var(--d, 0px) * -1);
  --r0: 0deg; --r1: 0deg; --s0: 1; --s1: 1; --o0: 1; --o1: 1;
  --q: var(--p, .5);
  transform:
    translate3d(calc(var(--x0) + (var(--x1) - var(--x0)) * var(--q)), calc(var(--y0) + (var(--y1) - var(--y0)) * var(--q)), 0)
    rotate(calc(var(--r0) + (var(--r1) - var(--r0)) * var(--q)))
    scale(calc(var(--s0) + (var(--s1) - var(--s0)) * var(--q)));
  opacity: calc(var(--o0) + (var(--o1) - var(--o0)) * var(--q));
}
.l.o { --q: var(--p, 1); --y1: 0px; }
.l.t { --q: var(--p, 0); --y1: 0px; }
.sec { view-timeline-name: --sec; }
.own { view-timeline-name: --own; }
.blk { view-timeline-name: --blk; }
.arrive { view-timeline-name: --track; }
@keyframes par {
  from { transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--r0)) scale(var(--s0)); opacity: var(--o0); }
  to { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(var(--s1)); opacity: var(--o1); }
}
@supports (animation-timeline: view()) {
  html:not(.js-par):not(.calm) .l { animation: par 1ms linear both; animation-timeline: --sec; }
  html:not(.js-par):not(.calm) .blk .l { animation-timeline: --blk; }
  html:not(.js-par):not(.calm) .l.o { animation-timeline: --own; animation-range: entry 0% cover 50%; }
  html:not(.js-par):not(.calm) .l.t { animation-timeline: --track; animation-range: contain 0% contain 100%; }
  html:not(.js-par):not(.calm) .door.t, html:not(.js-par):not(.calm) .dl.t { animation-range: contain 14% contain 86%; }
  html:not(.js-par):not(.calm) .seam.t { animation-range: contain 84% contain 96%; }
  html:not(.js-par):not(.calm) .seam-h.t, html:not(.js-par):not(.calm) .seam-v.t { animation-range: contain 0% contain 14%; }
}
/* Only what is near the viewport is promoted or even drawn. Decorations are hidden further out. */
html.js .sec:not(.near) .art { visibility: hidden; }
html.js .sec:not(.near) .arena { visibility: hidden; }
.sec.near .l { will-change: transform; }

html { scrollbar-color: var(--edge) var(--night); overflow-x: clip; }
body { background: none; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% -5%, #3b1d86, transparent 70%), radial-gradient(90% 60% at 80% 100%, #2a1370, transparent 70%); }
main { overflow-x: clip; }

/* ---- Layers, back to front: sky and curtains, section backdrops, the particle field, then type and art.
   Sections stay out of the stacking order so the field can pass between their layers. */
#sky { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity .5s ease; }
.parting #sky, .parting #field-box { opacity: 0 !important; }
.curtain { position: absolute; left: -20%; top: -6%; width: 140%; height: 92%; opacity: 0; transition: opacity 1.6s ease; }
.curtain.on { opacity: .75; }
.curtain canvas { width: 100%; height: 100%; max-width: none; transform-origin: 50% 0; animation: sway 19s ease-in-out infinite alternate; }
.curtain:nth-child(2) canvas { animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes sway { from { transform: translate3d(-5%, 0, 0) scaleY(.94); } to { transform: translate3d(5%, 1.5%, 0) scaleY(1.08); } }
.hide-sky #sky { visibility: hidden; }
.hide-sky #sky canvas { animation-play-state: paused; }

#field-box { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 1; pointer-events: none; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .9s ease; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hide-sky #field-box { visibility: hidden; }

.sec { position: relative; }
.back { position: absolute; inset: -6vh 0; z-index: 0; overflow: hidden; pointer-events: none; }
.back .arena { position: absolute; inset: -18vh 0; }
.back img, .door .arena img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.back.to-night { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.back.soft { opacity: .62; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.front { position: relative; z-index: 2; }
.art { position: absolute; z-index: 2; pointer-events: none; }
.art img { width: 100%; }
.bobs img, .bobber { animation: bob 5.4s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate3d(0, -3%, 0) rotate(-2deg); } to { transform: translate3d(0, 3%, 0) rotate(2deg); } }
.spark i { display: block; width: 100%; height: 100%; background: url("../art/star.webp") center / contain no-repeat; animation: twinkle 4.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.sec:not(.near) .bobs img, .sec:not(.near) .bobber, .sec:not(.near) .spark i { animation-play-state: paused; }

.wrap, .hinge-in, .moves-title, .cast-title, .powers-title, .chapters-title, .devices-title, .two-in, .app-in { width: min(1120px, 100% - 40px); margin-inline: auto; }
p { margin: 0; }
.big { font: 400 clamp(23px, 3.5vw, 46px)/1.14 var(--display); text-wrap: balance; }
.note { color: var(--muted); }
.front p, .front h3:not(.stk) { text-shadow: 0 1px 2px rgba(10, 4, 28, .9), 0 0 18px rgba(10, 4, 28, .85); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 20; padding: 12px 18px; background: var(--sun); color: #33140f; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 12px; }
.cue a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); text-underline-offset: 4px; }

/* ---- Hero ---- */
.hero { min-height: 118vh; min-height: 118svh; display: flex; }
.hero-in { width: min(1120px, 100% - 32px); margin: auto; padding-block: max(10px, 3vh) 16vh; display: grid; justify-items: center; text-align: center; gap: clamp(10px, 2vh, 20px); }
.hero-logo { margin: 0; width: min(88vw, 74vh, 760px); }
.hero-logo img { width: 100%; animation: logo-in .9s cubic-bezier(.2, 1.3, .4, 1) .55s both; }
@keyframes logo-in { from { opacity: 0; transform: scale(.82) rotate(-3deg); } to { opacity: 1; transform: none; } }
.tag { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 clamp(6px, 1.4vw, 18px); font: 400 clamp(25px, 5.6vw, 62px)/1.1 var(--display); color: var(--sun); text-shadow: 0 .06em 0 #a82c06, 0 0 .5em rgba(20, 10, 46, .8); }
.tag span { display: inline-block; }
.tag i { font-style: normal; color: var(--cyan); }
.lede { max-width: 26em; font-size: 1.12em; text-shadow: 0 1px 3px rgba(10, 4, 28, .9); }

/* ---- The hinge ---- */
.hinge { min-height: 190vh; padding-block: 0 26vh; }
.hinge-in { padding-top: 16vh; }
.hinge-in > * { position: relative; }
.hinge-in { display: grid; gap: 18px; }
.hinge-in > p:not(.big) { max-width: 30em; }
/* The line holds the middle of the screen while the words pass it, the way the game's hinge holds the arena. */
.hinge-pin { position: sticky; top: 50vh; top: 50lvh; height: 0; z-index: 1; }
.hinge-line { left: -100vw; width: 300vw; max-width: none; top: -22px; height: 44px; }
.bolt { width: 100%; height: 100%; overflow: visible; }
.bolt path, .bolt-v path { vector-effect: non-scaling-stroke; }
.bolt, .bolt-v { animation: flicker 1.3s steps(2, jump-none) infinite; }
@keyframes flicker { 0%, 82%, 100% { opacity: 1; } 86% { opacity: .62; } 92% { opacity: .9; } }

/* ---- Moves: each one wider, further across and bigger than the last. ---- */
.moves { padding-block: 10vh 12vh; }
.move { position: relative; min-height: 76vh; display: grid; align-items: center; width: min(1120px, 100% - 40px); margin-inline: auto; }
.word { margin: 0 0 8px; font: 400 clamp(52px, 14vw, 170px)/.98 var(--display); color: var(--ink); }
.move .front { max-width: 620px; }
.move p { max-width: 24em; }
.m1 .art { right: -6%; top: 4%; width: clamp(150px, 42vw, 440px); }
.m1 .word { color: var(--cyan); }
.m2 { justify-items: end; text-align: right; }
.m2 .word { color: var(--sun); }
.m2 .slash { left: -16%; right: -16%; top: 26%; height: 44px; rotate: -14deg; }
.m2 .art:last-child { left: 2%; top: 6%; width: clamp(90px, 22vw, 230px); }
.m3 .word { color: #ff85d4; }
.m3 .front { margin-top: 26vh; }
.chain-art { position: absolute; inset: 0 0 auto; height: 40vh; }
.chain-art .art:nth-child(1) { left: 2%; top: 26%; width: clamp(46px, 11vw, 110px); }
.chain-art .art:nth-child(2) { left: 25%; top: 2%; width: clamp(60px, 14vw, 140px); }
.chain-art .art:nth-child(3) { left: 50%; top: 40%; width: clamp(50px, 12vw, 120px); }
.chain-art .art:nth-child(4) { left: 68%; top: 0; width: clamp(96px, 26vw, 260px); }

/* ---- The cast: rows that run into each other, each bubble at its own size. ---- */
.cast { padding-block: 16vh 10vh; }
.cast-title { display: grid; gap: 12px; margin-bottom: 8vh; }
.cast-title .note { max-width: 32em; }
.actor { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(10px, 3vw, 44px); width: min(1120px, 100% - 32px); margin-inline: auto; min-height: 52vh; }
.actor.alt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.actor.alt .fly { order: 2; }
.actor .fly { position: relative; justify-self: center; width: 100%; max-width: 330px; }
.actor.fast .fly { max-width: 220px; } .actor.armored .fly { max-width: 300px; } .actor.magnetic .fly { max-width: 250px; }
.actor.repel .fly { max-width: 350px; } .actor.golden .fly { max-width: 190px; } .actor.frozen .fly { max-width: 300px; }
.actor.boss { min-height: 74vh; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.actor.boss .fly { max-width: 560px; width: 118%; }
.say .stk { font-size: clamp(36px, 7vw, 86px); margin-bottom: 6px; }
.say p { max-width: 20em; }

/* ---- Power-ups: a scattered constellation, not a list. ---- */
.powers { padding-block: 14vh 12vh; }
.guests { padding-block: 12vh 10vh; }
.guest-grid { width: min(1120px, 100% - 32px); margin: 5vh auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px 22px; }
.guest-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.guest-card .art { position: relative; }
.guest-card img { display: block; width: 100%; height: auto; }
.guest-card h3 { margin: 0 0 2px; font: 400 clamp(21px, 2.4vw, 28px)/1.05 var(--display); color: var(--sun); }
.guest-card p { margin: 0; font-size: 15px; line-height: 1.35; }
.powers-title { display: grid; gap: 12px; }
.powers-title .big { max-width: 22em; }
.power-field { position: relative; width: min(1180px, 100% - 32px); margin: 6vh auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 7vh; column-gap: 12px; }
.power { position: relative; display: grid; grid-template-columns: clamp(92px, 24vw, 190px) minmax(0, 1fr); gap: 12px; align-items: center; }
.power .art { position: relative; }
.power h3 { margin: 0 0 2px; font: 400 clamp(25px, 3.5vw, 40px)/1.05 var(--display); color: var(--sun); }
.p0 { grid-column: 1 / span 11; }
.p1 { grid-column: 2 / span 11; }
.p2 { grid-column: 1 / span 11; }
.p3 { grid-column: 2 / span 11; }
.p4 { grid-column: 1 / span 11; }
@media (min-width: 900px) {
  .p0 { grid-column: 1 / span 5; }
  .p1 { grid-column: 8 / span 5; margin-top: 12vh; }
  .p2 { grid-column: 3 / span 5; }
  .p3 { grid-column: 8 / span 5; margin-top: 14vh; }
  .p4 { grid-column: 1 / span 6; }
}

/* ---- Chapters: a long descent through the arenas. ---- */
.chapters { padding-top: 14vh; }
.chapters-title { display: grid; gap: 12px; margin-bottom: 6vh; }
.chapters-title .big { max-width: 22em; }
.chapter { position: relative; min-height: 88vh; display: grid; align-items: center; }
.ch-in { position: relative; width: min(1120px, 100% - 40px); margin-inline: auto; display: grid; gap: 0; }
/* The number is drawn in light by the aurora field. This one only shows if the field could not start. */
.numeral { position: absolute; right: -2%; top: 50%; margin-top: -.62em; font: 400 clamp(180px, 46vw, 560px)/1 var(--display); color: rgba(255, 255, 255, .1); -webkit-text-stroke: 3px rgba(255, 255, 255, .24); pointer-events: none; user-select: none; }
.has-field:not(.calm) .numeral { display: none; }
.chapter:nth-of-type(even) .numeral { right: auto; left: -2%; }
.chapter:nth-of-type(even) .ch-in > div { justify-self: end; text-align: right; }
.ch-in > div { max-width: 640px; }
.ch-levels { color: var(--sun); font-weight: 600; letter-spacing: .02em; }
.ch-in .stk { font-size: clamp(38px, 7.6vw, 92px); margin-block: 4px 8px; }

/* ---- Two players ---- */
.two { min-height: 160vh; padding-block: 24vh 16vh; overflow: hidden; overflow: clip; }
.two-line { left: 50%; top: -100%; height: 300%; width: 44px; margin-left: -22px; }
.bolt-v { width: 100%; height: 100%; overflow: visible; }
.two-words { position: absolute; inset: 8vh 0 auto; display: grid; grid-template-columns: 1fr 1fr; font: 400 clamp(46px, 13vw, 190px)/1 var(--display); z-index: 2; }
.two-words span { display: block; text-align: center; }
.w-left { color: var(--cyan); text-shadow: 0 .06em 0 #0a38a8; }
.w-right { color: #ff9f5a; text-shadow: 0 .06em 0 #8c1c1c; }
.two-in { display: grid; gap: 16px; margin-top: 34vh; }
.two-in p { max-width: 32em; padding: 12px 16px; border-radius: 16px; background: rgba(20, 10, 46, .78); }
@media (min-width: 900px) { .two-in { width: min(560px, 44%); margin-left: max(20px, calc(50% - 600px)); } .two-in p { background: none; padding: 0; } }

/* ---- Devices: three outlines of real proportions, rising at different speeds. ---- */
.devices { padding-block: 12vh; }
.device-row { width: min(1120px, 100% - 32px); margin: 6vh auto 4vh; display: grid; gap: 8vh 24px; align-items: end; }
.device { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.device h3 { margin: 0 0 2px; font: 400 clamp(25px, 3.4vw, 40px)/1.05 var(--display); color: var(--cyan); }
.frame { position: relative; display: block; border: 5px solid #e6dcff; border-radius: 22px; background: rgba(35, 20, 74, .72); box-shadow: 0 0 0 2px #170a38, 0 0 28px rgba(79, 216, 255, .28); }
.frame i { position: absolute; display: block; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.duo .frame { width: clamp(118px, 30vw, 230px); aspect-ratio: 1 / 1.04; }
.duo .frame i { left: 50%; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; }
.pad .frame { width: clamp(104px, 27vw, 210px); aspect-ratio: 3 / 4; border-radius: 14px; }
.pad .frame i, .phone .frame i { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.phone .frame { width: clamp(62px, 15vw, 120px); aspect-ratio: 9 / 19.5; border-radius: 20px; }
@media (min-width: 900px) {
  .device-row { grid-template-columns: 1.15fr 1fr 1fr; }
  .device { grid-template-columns: 1fr; }
}
.devices > .note { width: min(1120px, 100% - 40px); margin-inline: auto; max-width: 720px; }

/* ---- Get the app ---- */
.app { padding-block: 14vh 24vh; }
.app-in { display: grid; gap: 22px; justify-items: start; }
.buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.compare { display: grid; gap: 18px; width: 100%; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 40px; } }
.compare h3 { margin: 0 0 4px; font: 400 clamp(23px, 3vw, 34px)/1.1 var(--display); color: var(--cyan); }
.compare div + div h3 { color: var(--sun); }
.promise { font: 400 clamp(21px, 3vw, 34px)/1.2 var(--display); }
.links { display: flex; gap: 22px; }
.links a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }

/* ---- The end of the page: a pinned track where the page parts around its hinge and the game is underneath. ---- */
.arrive { position: relative; height: calc(100vh + 170vh); height: calc(100dvh + 170vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; z-index: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--night); }
.rail { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 8px; background: var(--night); border-bottom: 2px solid var(--night-2); touch-action: pan-y; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--edge); background: var(--night-2); color: var(--ink); font: 600 16px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pill span[aria-hidden] { font-size: 19px; line-height: 1; }
.rail-note { flex: 1; min-width: 0; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.2; }
.rail-note a { display: inline-block; white-space: nowrap; }
.pill .sr { display: none; }
.slot { position: relative; min-height: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: var(--night); }
.in-game #game { pointer-events: auto; }
.noscript-play { position: absolute; inset: 0; display: grid; place-items: center; }

.door { position: absolute; overflow: hidden; z-index: 3; background: var(--night); }
.door.l.t { --q: clamp(0, (var(--p, 0) - .14) / .72, 1); }
.door-in { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; }
.night { position: absolute; inset: 0; background: linear-gradient(var(--night), #2a1370 40%, var(--night)); }
.door .arena { position: absolute; inset: -20vh -20vw; -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); opacity: .86; }
.l.t.dl { position: absolute; --x1: calc(var(--dir-x, 0) * var(--m, 0vh)); --y1: calc(var(--dir-y, 0) * var(--m, 0vh)); --q: clamp(0, (var(--p, 0) - .14) / .72, 1); }
.b1 { left: 4%; top: 14%; width: clamp(90px, 25vmin, 250px); }
.b2 { right: 4%; top: 22%; width: clamp(70px, 18vmin, 190px); }
.b3 { left: 34%; bottom: 8%; width: clamp(50px, 11vmin, 120px); }
.b4 { right: 10%; bottom: 11%; width: clamp(100px, 28vmin, 280px); }
.door-text { position: absolute; display: grid; justify-items: center; gap: 0; width: 100%; text-align: center; left: 0; top: var(--seam-y, 50%); transform: translateY(-50%); }
.door-text .stk { font-size: clamp(50px, 15vmin, 170px); }
.stage[data-axis="v"] .door-text { left: var(--seam-x, 50%); top: 50%; width: auto; transform: translate(-50%, -50%); white-space: nowrap; }

/* Horizontal hinge: the doors go up and down. Vertical hinge: left and right. */
.stage[data-axis="h"] .door-a { left: 0; right: 0; top: 0; height: var(--seam-y, 54%); --y1: -100%; --dir-y: -1; --dir-x: 0; }
.stage[data-axis="h"] .door-b { left: 0; right: 0; top: var(--seam-y, 54%); bottom: 0; --y1: 100%; --dir-y: 1; --dir-x: 0; }
.stage[data-axis="h"] .door-b .door-in { top: calc(var(--seam-y, 54%) * -1); }
.stage[data-axis="v"] .door-a { top: 0; bottom: 0; left: 0; width: var(--seam-x, 50%); --x1: -100%; --dir-x: -1; --dir-y: 0; }
.stage[data-axis="v"] .door-b { top: 0; bottom: 0; left: var(--seam-x, 50%); right: 0; --x1: 100%; --dir-x: 1; --dir-y: 0; }
.stage[data-axis="v"] .door-b .door-in { left: calc(var(--seam-x, 50%) * -1); }
.door { --y0: 0px; --x0: 0px; }
.stage[data-axis="h"] .door-a, .stage[data-axis="h"] .door-b { --x1: 0px; }
.stage[data-axis="v"] .door-a, .stage[data-axis="v"] .door-b { --y1: 0px; }

/* The page's hinge, sitting exactly on the game's. It draws across, holds through the parting, then hands over. */
.seam.l.t { position: absolute; inset: 0; z-index: 4; pointer-events: none; --o0: 1; --o1: 0; --q: clamp(0, (var(--p, 0) - .84) / .12, 1); }
.seam-h.l.t { position: absolute; left: 0; right: 0; top: var(--seam-y, 54%); height: 44px; margin-top: -22px; --x0: -100%; --x1: 0%; --q: clamp(0, var(--p, 0) / .14, 1); display: none; }
.seam-v.l.t { position: absolute; top: 0; bottom: 0; left: var(--seam-x, 50%); width: 44px; margin-left: -22px; --y0: -100%; --y1: 0%; --q: clamp(0, var(--p, 0) / .14, 1); display: none; }
.stage[data-axis="h"] .seam-h.l.t, .stage[data-axis="v"] .seam-v.l.t { display: block; }
.in-game .door, .in-game .seam { visibility: hidden; }
html:not(.js) .door, html:not(.js) .seam { display: none; }
html:not(.js) .arrive { height: auto; }
html:not(.js) .stage { position: relative; }

@media (max-height: 500px) {
  /* A phone on its side: the rail becomes a column, so the game keeps its height. */
  .stage { grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); }
  .rail { flex-direction: column; justify-content: flex-start; padding: 6px; border: 0; border-right: 2px solid var(--night-2); }
  .rail-note, .pill .lab { display: none; }
  .pill { padding: 0; }
  .pill .sr { display: inline; }
  .hero { min-height: 150vh; }
  .hero-logo { width: min(58vw, 96vh); }
  .chapter, .move { min-height: 110vh; }
  .actor { min-height: 90vh; }
}
@media (max-width: 420px) { .rail-note { display: none; } }
@media (min-width: 421px) and (max-width: 640px) { .pill .lab { font-size: 15px; } }

/* ---- Reduced motion: a calm, complete page. Everything rests at its layout position and the game asks first. ---- */
.calm .l { transform: none !important; opacity: 1 !important; }
.calm .hero-logo img, .calm .bobs img, .calm .bobber, .calm .spark i, .calm .bolt, .calm .bolt-v, .calm .curtain canvas { animation: none; }
.calm .spark i { opacity: .7; }
.calm #field-box { position: absolute; height: 100vh; transition: none; }
.calm .curtain { transition: none; }
.calm .door, .calm .seam { display: none; }
.calm .arrive { height: auto; }
.calm .stage { position: relative; }
.calm #game { pointer-events: auto; }
.calm .two-line, .calm .hinge-line { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .l { animation: none !important; transform: none !important; opacity: 1 !important; }
  .hero-logo img, .bobs img, .bobber, .spark i, .bolt, .bolt-v, .curtain canvas { animation: none !important; }
}