/* Layout: the page is a pinball cabinet read from the top down.
   1. The backglass: the logo under the app icon's light rays, a chrome ball
      in flight, and two flippers guarding the bottom.
   2. The playfield: the board picker, shown like the app's Home slider, under
      an arched top and lit by the chosen board's own art.
   3. The apron: a launcher to try, beside the instruction card.
   4. House rules, the stores, then the dark footer. */
:root {
  /* One dark-blue look on purpose: the site continues the game's own world
     (B900 base, B800 floor), and the game has no light mode to mirror. */
  color-scheme: dark;

  --base: #0E2259;      /* B900, the game's HUD panel and base */
  --b850: #132C78;
  --floor: #1B3F99;     /* B800, the playfield floor */
  --blue: #2453C4;      /* B600, the game's main blue, also the title rim */
  --lane: #7EA3F5;      /* B300, lane lines */
  --soft: #B7CBF7;      /* B100, secondary text (9.27:1 on base) */
  --ink: #FFFFFF;
  --night: #050C22;     /* letterbox, the darkest band and the extrusion */
  --lip: #0A1A47;       /* the dark lip under blue buttons */
  --chrome: #E9EEF7;    /* the chrome ball and rails */
  --chrome-mid: #B9C3DA;
  --chrome-edge: #8C97B5;
  --cta: #D9650F;       /* the game's PLAY orange */
  --cta-lip: #7A2E00;
  --lamp: #3CCB6B;      /* the game's lane-light green */
  --gold: #FFC83D;      /* accent, kept for the record, as in the game */
  --paper: #F4F7FD;     /* the apron's instruction card */
  --tint: #132C78;      /* stage color, set per board by site.js */

  --font-logo: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-latin: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-logo);
  --font-body: var(--font-latin);
  --display-weight: 400;
  --display-lh: 1.05;
  --display-track: 0.01em;
  --body-lh: 1.6;

  --r-btn: 16px;
  --r-frame: 30px;
  --r-board: 22px;
  --slot: 380px;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* Each script gets a chunky rounded display face and a body face that covers
   it; Lilita One and Fredoka have Latin only. Tall scripts get more leading,
   and only Latin display type is tracked (spacing breaks joined scripts). */
.script-viet { --font-display: "Baloo 2", var(--font-logo); --display-weight: 800; --font-body: "Nunito", var(--font-latin); --display-track: 0; }
.script-cyrl { --font-display: "Rubik", var(--font-logo); --display-weight: 800; --font-body: "Nunito", var(--font-latin); --display-track: 0; }
.script-hans { --font-display: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif; --font-body: "Noto Sans SC", var(--font-latin); --display-lh: 1.25; --display-track: 0; --body-lh: 1.75; }
.script-jpan { --font-display: "Mochiy Pop One", "M PLUS Rounded 1c", sans-serif; --font-body: "M PLUS Rounded 1c", var(--font-latin); --display-lh: 1.3; --display-track: 0; --body-lh: 1.75; }
.script-kore { --font-display: "Jua", "Noto Sans KR", sans-serif; --font-body: "Noto Sans KR", var(--font-latin); --display-lh: 1.25; --display-track: 0; --body-lh: 1.75; }
.script-arab { --font-display: "Baloo Bhaijaan 2", "Noto Sans Arabic", sans-serif; --display-weight: 800; --font-body: "Noto Sans Arabic", var(--font-latin); --display-lh: 1.45; --display-track: 0; --body-lh: 1.85; }
.script-deva { --font-display: "Baloo 2", "Noto Sans Devanagari", sans-serif; --display-weight: 800; --font-body: "Noto Sans Devanagari", var(--font-latin); --display-lh: 1.4; --display-track: 0; --body-lh: 1.85; }
.script-beng { --font-display: "Baloo Da 2", "Hind Siliguri", sans-serif; --display-weight: 800; --font-body: "Hind Siliguri", var(--font-latin); --display-lh: 1.4; --display-track: 0; --body-lh: 1.85; }
.script-thai { --font-display: "Mitr", "Noto Sans Thai", sans-serif; --display-weight: 600; --font-body: "Noto Sans Thai", var(--font-latin); --display-lh: 1.45; --display-track: 0; --body-lh: 1.85; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--base);
  border-radius: 10px;
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* Plain display type, for the privacy and 404 pages. */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  overflow-wrap: anywhere;
  color: var(--ink);
  text-shadow: 0 0.07em 0 var(--night);
  text-wrap: balance;
  margin: 0;
}

/* Titles in the game's lettering: a pale glossy fill over a blue rim and a
   dark extrusion, the way the game sets its own banners. The rim and the
   extrusion repeat the text from data-text. */
.title {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  /* Plain greedy wrapping: balance can break the copies and the fill on
     different words. */
  text-wrap: wrap;
  overflow-wrap: break-word;
  color: var(--ink);
}
.title > span {
  background: linear-gradient(180deg, #FFFFFF 38%, #C6D6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.title::before,
.title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.title::after { color: var(--blue); -webkit-text-stroke: 0.15em var(--blue); }
.title::before { color: var(--night); -webkit-text-stroke: 0.15em var(--night); transform: translateY(0.11em); }

/* Top bar */
.bar {
  position: relative;
  z-index: 5;
  padding-block: 18px;
}
.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--font-logo);
  font-size: 22px;
}
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.page-home .bar { position: absolute; inset: 0 0 auto; }

/* Language menu: a native disclosure with real links, one per language. */
.langs { position: relative; }
.langs summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid rgba(183, 203, 247, 0.55);
  border-radius: 12px;
  background: rgba(5, 12, 34, 0.35);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}
.langs summary::-webkit-details-marker { display: none; }
/* Flags are round, 1:1, with a thin ring so pale flags keep an edge. */
.flag {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.langs summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline-start: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.langs[open] summary::after { transform: translateY(2px) rotate(225deg); }
.langs summary:hover { background: rgba(126, 163, 245, 0.2); }
.langs-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 16px;
  background: var(--night);
  border: 2px solid rgba(126, 163, 245, 0.45);
  /* Elevation: the open menu floats over the page it covers. */
  box-shadow: 0 18px 40px rgba(5, 12, 34, 0.7);
}
/* Every row starts at the page's start edge, whatever the language's own
   direction: the flag first, then the name. */
.langs-list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: start;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--soft);
  font-family: var(--font-latin), "Noto Sans SC", "Noto Sans Arabic", sans-serif;
}
.langs-list a:hover { background: rgba(126, 163, 245, 0.16); color: var(--ink); }
.langs-list a[aria-current="true"] { background: var(--ink); color: var(--base); font-weight: 600; }
.langs-list a[aria-current="true"] .flag { box-shadow: 0 0 0 1.5px rgba(14, 34, 89, 0.35); }

/* Buttons: the game's chunky glossy buttons, a top highlight over a darker
   lip that collapses when pressed. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 34px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 25px;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.btn-cta {
  background: var(--cta);
  text-shadow: 0 2px 0 var(--cta-lip);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.3),
    inset 0 -4px 0 rgba(122, 46, 0, 0.35),
    0 7px 0 var(--cta-lip),
    0 14px 26px rgba(5, 12, 34, 0.55);
}
.btn-cta:active {
  transform: translateY(5px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 2px 0 var(--cta-lip), 0 6px 12px rgba(5, 12, 34, 0.5);
}
.btn-round {
  width: 58px;
  min-height: 58px;
  padding: 0;
  background: var(--blue);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.24), 0 5px 0 var(--lip), 0 10px 20px rgba(5, 12, 34, 0.45);
}
.btn-round:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.24), 0 2px 0 var(--lip); }
.btn-round svg { width: 26px; height: 26px; }
[dir="rtl"] .btn-round svg { transform: scaleX(-1); }

/* Stores. Before launch each is an engraved metal plate marked "Coming soon",
   which reads as a label, not a button; with a listing URL it becomes a raised
   blue button. */
.stores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
}
.store {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 60px;
  padding: 8px 18px 9px;
  border-radius: 12px;
  text-decoration: none;
  text-align: start;
}
.store.is-soon {
  background: linear-gradient(180deg, #F5F7FC 0%, #D3DAEA 50%, #B6C0D6 100%);
  color: var(--base);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(14, 34, 89, 0.28), 0 1px 0 rgba(5, 12, 34, 0.6);
}
.store-kicker { font-size: 12px; line-height: 1.3; font-weight: 600; }
.store.is-soon .store-kicker { color: #24346A; text-transform: uppercase; letter-spacing: 0.05em; }
.store-name { font: 600 17px/1.25 var(--font-latin); white-space: nowrap; }
.store.is-soon .store-name { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
a.store {
  background: var(--blue);
  color: var(--ink);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22), 0 5px 0 var(--lip);
}
a.store .store-kicker { color: var(--soft); }
a.store:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22), 0 2px 0 var(--lip); }

/* 1. Backglass */
.hero {
  position: relative;
  overflow: clip;
  padding-block: 112px 0;
  background: linear-gradient(180deg, var(--floor) 0%, var(--b850) 48%, var(--base) 100%);
}
/* The app icon's light rays, centered on the logo. */
.rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from -3deg at 50% 210px, rgba(183, 203, 247, 0.14) 0deg 5deg, rgba(183, 203, 247, 0) 5deg 14deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 210px, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 210px, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 230px;
}
.lead {
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
  font-weight: 500;
  max-width: 30ch;
  margin: 30px 0 12px;
  text-wrap: balance;
}
.sub {
  color: var(--soft);
  max-width: 46ch;
  margin: 0 0 34px;
  text-wrap: balance;
}

/* The FLIPBONK logo, built like the app's: each letter has its own vertical
   gradient over a dark outline and a dark extrusion, and hops once. */
.logo {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.02em;
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: clamp(60px, 11.6vw, 158px);
  line-height: 1.1;
  cursor: default;
}
.L {
  --c: var(--cta);
  position: relative;
  display: inline-block;
  isolation: isolate;
  transform-origin: 50% 100%;
  transform: rotate(var(--tilt, 0deg));
}
.L::before,
.L::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--base);
  -webkit-text-stroke: 0.12em var(--base);
}
.L::after { top: 0.08em; color: var(--night); -webkit-text-stroke-color: var(--night); }
.L > span {
  display: block;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 50%, #FFFFFF) 10%,
    var(--c) 55%,
    color-mix(in srgb, var(--c) 64%, #000000) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.L:nth-child(odd) { --tilt: -2.9deg; }
.L:nth-child(even) { --tilt: 2deg; }
.logo.hop .L { animation: hop 420ms cubic-bezier(0.3, 0.6, 0.4, 1) both; }
.logo.hop .L:nth-child(2) { animation-delay: 110ms; }
.logo.hop .L:nth-child(3) { animation-delay: 220ms; }
.logo.hop .L:nth-child(4) { animation-delay: 330ms; }
.logo.hop .L:nth-child(5) { animation-delay: 440ms; }
.logo.hop .L:nth-child(6) { animation-delay: 550ms; }
.logo.hop .L:nth-child(7) { animation-delay: 660ms; }
.logo.hop .L:nth-child(8) { animation-delay: 770ms; }
@keyframes hop {
  0% { transform: rotate(var(--tilt)) translateY(0) scale(1, 1); }
  40% { transform: rotate(var(--tilt)) translateY(-0.22em) scale(0.95, 1.07); }
  80% { transform: rotate(var(--tilt)) translateY(0) scale(1, 1); }
  90% { transform: rotate(var(--tilt)) translateY(0) scale(1.1, 0.86); }
  100% { transform: rotate(var(--tilt)) translateY(0) scale(1, 1); }
}

/* The bottom of the table: inlane guides, two flippers and the ball. The
   flippers answer a tap, or Left and Right Shift as in PC pinball. */
.table-bottom {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.table-bottom::before,
.table-bottom::after {
  content: "";
  position: absolute;
  bottom: 118px;
  width: 300px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--chrome-edge), var(--chrome));
  opacity: 0.55;
}
.table-bottom::before { left: calc(50% - 560px); transform: rotate(26deg); transform-origin: 100% 50%; }
.table-bottom::after { right: calc(50% - 560px); transform: rotate(-26deg); transform-origin: 0 50%; }
.flipper {
  position: absolute;
  bottom: 70px;
  width: 290px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.flipper-l { left: calc(50% - 300px); }
.flipper-r { right: calc(50% - 300px); }
.flipper .mirror { display: block; transform: scaleX(-1); }
.flipper svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 14.7% 54.3%;
  transform: rotate(24deg);
  transition: transform 130ms cubic-bezier(0.4, 0, 0.6, 1);
  filter: drop-shadow(0 10px 10px rgba(5, 12, 34, 0.45));
}
.flipper.is-up svg { transform: rotate(-20deg); transition-duration: 55ms; }

.ball {
  --size: clamp(60px, 7.4vw, 108px);
  position: absolute;
  top: 190px;
  left: calc(50% + min(36vw, 500px));
  width: var(--size);
  height: var(--size);
  font-size: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, var(--chrome) 20%, var(--chrome-mid) 52%, var(--chrome-edge) 76%, #4A5578 100%);
  box-shadow: 0 0 0 0.05em var(--night), inset -0.08em -0.12em 0.2em rgba(14, 34, 89, 0.45), 0 0.22em 0.3em rgba(5, 12, 34, 0.45);
}
/* Two afterimages, as in the app icon, trailing back toward the flipper. */
.ball::before,
.ball::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--chrome) 0, var(--chrome-mid) 60%, var(--chrome-edge) 100%);
}
.ball::before { transform: translate(-0.18em, 0.46em) scale(0.92); opacity: 0.32; }
.ball::after { transform: translate(-0.34em, 0.9em) scale(0.84); opacity: 0.14; }
.ball.kick { animation: kick 420ms cubic-bezier(0.25, 0.8, 0.4, 1); }
@keyframes kick {
  0% { translate: 0 0; }
  35% { translate: -0.12em -0.4em; }
  100% { translate: 0 0; }
}

/* The opening, once per visit: the right flipper fires, the ball flies up to
   its spot, the rays come up and the letters hop as it arrives. */
.hero.is-intro .rays { animation: rays-in 900ms ease-out both; }
.hero.is-intro .ball { animation: ball-in 720ms cubic-bezier(0.18, 0.85, 0.3, 1) 140ms both; }
.hero.is-intro .flipper-r svg { animation: flick 300ms ease-out both; }
@keyframes rays-in { from { opacity: 0; } }
@keyframes ball-in {
  from { translate: -2.6em 6.6em; scale: 0.7; opacity: 0; }
  15% { opacity: 1; }
}
@keyframes flick {
  0% { transform: rotate(24deg); }
  25% { transform: rotate(-20deg); }
  100% { transform: rotate(24deg); }
}

/* 2. Playfield: the board picker */
.boards {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--tint);
  transition: background-color 450ms ease;
  border-top-left-radius: 50% 120px;
  border-top-right-radius: 50% 120px;
  padding-block: 124px 100px;
}
/* The chosen board's own art, blurred into light behind the slider, the way
   the app's Home takes on the selected board. */
.ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
  filter: blur(46px) saturate(1.3);
  opacity: 0.6;
  transition: opacity 260ms ease;
}
.ambient img.is-fading { opacity: 0; }
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 34, 89, 0.5) 0%, rgba(14, 34, 89, 0.7) 45%, rgba(14, 34, 89, 0.92) 100%);
}
.boards-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}
.boards-head .title { font-size: clamp(42px, 6.4vw, 72px); }
.boards-head p { color: var(--soft); margin: 18px 0 0; }
.record {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--gold);
  font-weight: 600;
}
.record svg { width: 20px; height: 16px; align-self: center; }

.carousel {
  position: relative;
  height: calc(var(--slot) * 1.8986 + 16px);
  margin-inline: auto;
  max-width: 1120px;
  touch-action: pan-y;
  user-select: none;
}
.track { position: absolute; inset: 0; }
.slot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--slot);
  margin-left: calc(var(--slot) / -2);
  transition: transform 460ms cubic-bezier(0.22, 0.8, 0.25, 1), opacity 460ms ease, filter 460ms ease;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.slot[data-pos="0"] { z-index: 3; opacity: 1; visibility: visible; cursor: default; }
.slot[data-pos="-1"],
.slot[data-pos="1"] { z-index: 2; opacity: 0.62; visibility: visible; filter: brightness(0.62) saturate(0.85); }
.slot[data-pos="-1"] { transform: translateX(-86%) scale(0.86); }
.slot[data-pos="1"] { transform: translateX(86%) scale(0.86); }
.slot[data-pos="-2"] { transform: translateX(-150%) scale(0.72); }
.slot[data-pos="2"] { transform: translateX(150%) scale(0.72); }
.slot[data-pos="far"] { transform: scale(0.6); }
.slot[data-pos="-1"]:hover,
.slot[data-pos="1"]:hover { filter: brightness(0.8) saturate(0.95); }

/* Chrome rail around each board, under glass. */
.cabinet {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: var(--r-frame);
  background: linear-gradient(180deg, #F7F9FD 0%, var(--chrome) 30%, var(--chrome-edge) 100%);
  box-shadow: inset 0 2px 0 #FFFFFF;
}
/* Elevation: only the board in focus stands off the playfield. */
.slot[data-pos="0"] .cabinet { box-shadow: inset 0 2px 0 #FFFFFF, 0 30px 60px rgba(5, 12, 34, 0.65); }
.cabinet img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1367;
  border-radius: var(--r-board);
  background: var(--night);
}
.cabinet::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--r-board);
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 27%);
}
.nav-prev,
.nav-next {
  position: absolute;
  top: 44%;
  z-index: 4;
}
.nav-prev { inset-inline-start: calc(50% - var(--slot) / 2 - 30px); }
.nav-next { inset-inline-end: calc(50% - var(--slot) / 2 - 30px); }

.stage-info {
  max-width: 620px;
  margin: 40px auto 0;
  text-align: center;
}
.stage-count {
  margin: 0 0 6px;
  color: var(--soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stage-name { font-size: clamp(46px, 6.8vw, 80px); }
.price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(5, 12, 34, 0.6);
  font-weight: 600;
  font-size: 17px;
}
.price svg { width: 18px; height: 18px; }
.stage-blurb { margin: 18px auto 0; max-width: 48ch; }
.parts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.parts li {
  padding: 6px 12px;
  border: 2px solid rgba(183, 203, 247, 0.45);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
}

.picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  max-width: 800px;
  margin: 52px auto 0;
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 6px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(5, 12, 34, 0.42);
  color: var(--soft);
  font: 500 14px/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}
.pick img { width: 100%; max-width: 64px; height: auto; aspect-ratio: 180 / 342; border-radius: 8px; }
.pick:hover { background: rgba(5, 12, 34, 0.7); }
.pick[aria-selected="true"] { background: var(--ink); color: var(--base); font-weight: 600; transform: translateY(-4px); }

/* 3. Apron: a launcher to try beside the instruction card */
.howto {
  padding-block: 116px 108px;
  background: var(--base);
}
.howto .wrap {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.launcher {
  --p: 0;
  --h: 0;
  --travel: 300px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 30px;
  align-items: end;
  padding: 24px;
  border-radius: var(--r-frame);
  background: linear-gradient(180deg, var(--floor), var(--b850));
  box-shadow: inset 0 0 0 3px rgba(126, 163, 245, 0.35), 0 24px 48px rgba(5, 12, 34, 0.5);
}
.lane {
  position: relative;
  height: 460px;
  border-radius: 60px 60px 16px 16px;
  background: linear-gradient(90deg, #0F276A 0%, #1B3F99 50%, #0F276A 100%);
  box-shadow: inset 0 0 0 4px rgba(183, 203, 247, 0.4), inset 0 -60px 50px rgba(5, 12, 34, 0.45);
  overflow: hidden;
}
.lane-light {
  position: absolute;
  left: 50%;
  bottom: calc(var(--at) * 100%);
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: #1F3779;
  box-shadow: inset 0 0 0 3px rgba(5, 12, 34, 0.55);
  transition: background-color 120ms ease, box-shadow 120ms ease;
  transition-delay: calc(var(--at) * 260ms);
}
.lane-light.is-lit {
  background: var(--lamp);
  box-shadow: inset 0 0 0 3px rgba(5, 12, 34, 0.3), 0 0 18px rgba(60, 203, 107, 0.85);
}
.lane-ball {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, var(--chrome) 20%, var(--chrome-mid) 52%, var(--chrome-edge) 76%, #4A5578 100%);
  box-shadow: 0 0 0 3px var(--night);
  transform: translateY(calc(var(--p) * 40px - var(--h) * var(--travel)));
}
.launcher.is-rising .lane-ball { transition: transform 420ms cubic-bezier(0.12, 0.8, 0.3, 1); }
.launcher.is-falling .lane-ball { transition: transform 460ms cubic-bezier(0.6, 0, 0.9, 0.5); }
.plunger {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 34px;
  height: 84px;
  margin-left: -17px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spring {
  flex: 1;
  width: 26px;
  background: repeating-linear-gradient(180deg, var(--chrome) 0 4px, var(--chrome-edge) 4px 7px, transparent 7px 10px);
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 - var(--p) * 0.48));
}
.knob {
  width: 34px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FF8A2B, var(--cta));
  box-shadow: 0 3px 0 var(--cta-lip);
}
.launch-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-bottom: 4px;
}
.power {
  margin: 0;
  font-family: var(--font-logo);
  font-size: 64px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-shadow: 0 0.07em 0 var(--night);
}
.hold {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 200px;
  min-height: 200px;
  padding: 18px 14px;
  border: 0;
  border-radius: 28px;
  background: var(--blue);
  color: var(--ink);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.24), 0 7px 0 var(--lip), 0 14px 26px rgba(5, 12, 34, 0.5);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.launcher.is-charging .hold { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.24), 0 2px 0 var(--lip); }
/* The in-game ring gauge: it fills and empties while held. */
.hold-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.18) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.hold-text {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
}

/* The instruction card that sits on a real machine's apron. */
.apron-card {
  position: relative;
  padding: 48px 44px 40px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--base);
  transform: rotate(-1.2deg);
  /* Elevation: the card sits on the apron, above the section. */
  box-shadow: inset 0 2px 0 #FFFFFF, 0 26px 50px rgba(5, 12, 34, 0.55);
}
.apron-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(14, 34, 89, 0.5);
  border-radius: 8px;
  pointer-events: none;
}
.screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0, var(--chrome-mid) 50%, var(--chrome-edge) 100%);
  box-shadow: 0 1px 2px rgba(5, 12, 34, 0.45);
}
.screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 6px;
  height: 2px;
  background: rgba(14, 34, 89, 0.55);
  transform: rotate(35deg);
}
.screw:nth-child(1) { top: 22px; left: 22px; }
.screw:nth-child(2) { top: 22px; right: 22px; }
.screw:nth-child(3) { bottom: 22px; left: 22px; }
.screw:nth-child(4) { bottom: 22px; right: 22px; }
.card-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: var(--display-lh);
  color: var(--base);
  text-align: center;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.step-n {
  font-family: var(--font-logo);
  font-size: 30px;
  line-height: 1;
  color: var(--blue);
}
.card-tips {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 2px dashed rgba(14, 34, 89, 0.35);
}
.card-tips h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 21px;
  line-height: var(--display-lh);
}
.card-tips ul { margin: 0; padding-inline-start: 20px; color: #2B3D73; }
.card-tips li + li { margin-top: 6px; }

/* 4. Closing band: the stores once more, at the end of the read, with the
   two plain facts a player asks before installing. */
.get {
  position: relative;
  padding-block: 100px 108px;
  text-align: center;
  background: linear-gradient(180deg, var(--base), var(--night));
}
.get .title { font-size: clamp(40px, 5.6vw, 64px); }
.get p { color: var(--soft); margin: 18px auto 0; max-width: 46ch; }
.get .stores { margin-top: 34px; }
.fine {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 40px auto 0;
  padding: 0;
  max-width: 760px;
  color: var(--soft);
  font-size: 16px;
}

/* Footer, as dark as the cabinet's apron */
.foot {
  background: var(--night);
  padding-block: 36px calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(126, 163, 245, 0.18);
  color: var(--soft);
  font-size: 16px;
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.foot p { margin: 0; }
.foot a:not(.brand) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-underline-offset: 3px;
}
.foot .brand { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; }

/* Privacy page */
.doc { padding-block: 32px 96px; }
.doc article { max-width: 68ch; margin-inline: auto; }
.doc article:lang(en), .doc article:lang(id) {
  --font-display: var(--font-logo);
  --display-weight: 400;
  --display-lh: 1.1;
  font-family: var(--font-latin);
}
.doc h1 { font-size: clamp(36px, 6vw, 56px); }
.doc .updated { color: var(--soft); margin: 12px 0 32px; }
.doc h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.2;
  margin: 40px 0 10px;
}
.doc h3 { font-size: 19px; font-weight: 600; margin: 24px 0 6px; }
.doc p, .doc li, .doc dd { color: #DCE6FB; }
.doc ul { padding-inline-start: 22px; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--ink); text-underline-offset: 3px; }
.doc-note {
  max-width: 68ch;
  margin: 0 auto 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--floor);
}
.doc-summary {
  margin-top: 8px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--floor);
}
.doc-summary h2 { margin-top: 0; }
.doc-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
}
.doc-facts dt { color: var(--soft); }
.doc-facts dd { margin: 0; overflow-wrap: anywhere; }

/* 404 */
.lost { padding-block: 48px 120px; text-align: center; }
.lost-code {
  margin: 0;
  font-family: var(--font-logo);
  font-size: clamp(88px, 18vw, 160px);
  line-height: 1;
  color: var(--lane);
  text-shadow: 0 0.07em 0 var(--night);
}
.lost h1 { font-size: clamp(32px, 5vw, 48px); margin-top: 12px; }
.lost p:not(.lost-code) { color: var(--soft); margin: 16px auto 32px; max-width: 46ch; }

/* Tablet */
@media (max-width: 1023px) {
  :root { --slot: 330px; }
  .table-bottom::before, .table-bottom::after { display: none; }
  .ball { left: auto; right: 4%; top: 120px; }
  .howto .wrap { grid-template-columns: minmax(0, 1fr); gap: 64px; max-width: 640px; }
  .launcher { max-width: 440px; width: 100%; justify-self: center; }
  .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; }
}

/* Phone */
@media (max-width: 719px) {
  :root { --slot: 62vw; }
  body { font-size: 17px; }
  .hero { padding-top: 92px; }
  .hero-inner { padding-bottom: 168px; }
  .lead { margin-top: 22px; }
  .sub { margin-bottom: 28px; }
  .flipper { width: 156px; bottom: 30px; }
  .flipper-l { left: calc(50% - 166px); }
  .flipper-r { right: calc(50% - 166px); }
  .ball { --size: 46px; top: auto; bottom: 112px; left: calc(50% + 26px); right: auto; }
  .boards {
    border-top-left-radius: 50% 48px;
    border-top-right-radius: 50% 48px;
    padding-block: 76px 72px;
  }
  .boards-head { margin-bottom: 32px; }
  .nav-prev { inset-inline-start: 4px; }
  .nav-next { inset-inline-end: 4px; }
  .nav-prev, .nav-next { top: 40%; }
  .stage-info { margin-top: 28px; }
  /* The picker becomes a strip you scroll sideways inside its own box. */
  .picker {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    max-width: none;
    margin-top: 40px;
    padding: 6px 2px 12px;
  }
  .pick { flex: 0 0 82px; scroll-snap-align: start; }
  .howto { padding-block: 84px 76px; }
  .launcher { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 18px; --travel: 220px; }
  .lane { height: 380px; }
  .power { font-size: 52px; }
  .hold { min-height: 170px; }
  .hold-ring { width: 76px; height: 76px; }
  .apron-card { padding: 40px 24px 34px; transform: rotate(-0.6deg); }
  .get { padding-block: 72px 80px; }
  .doc-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc-facts dd { margin-bottom: 10px; }
  .langs summary span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}