/* Slingshot Checkers: product page and privacy policy.
   Colors are sampled from the app icon and the App Store posters: walnut in
   shadow, brass inlay, poster gold, lacquered red and cobalt pieces. Three
   rules hold the system together: red is always you, blue is always the
   opponent, and gold marks what you can press or should read first. The
   live board in the hero is the one loud thing; the rest stays quiet. */

:root {
  --night: #1A0F09;
  --night-raised: #24150C;
  --walnut: #4A2410;
  --walnut-hi: #6E3B1C;
  --brass: #D9A54A;
  --gold: #FFD06A;
  --gold-deep: #E7A93A;
  --ember: #F28B44;
  --red: #D21F26;
  --red-deep: #7E0A0E;
  --blue: #3A63E0;
  --blue-deep: #14246A;
  --steel: #3A3D43;
  --steel-deep: #1F2125;
  --parchment: #F7EBDC;
  --paper: #F6EAD9;
  --ink: #2A1609;
  --ink-soft: #6B5443;
  --on-night: #F7EBDC;
  --on-night-soft: rgba(247, 235, 220, 0.78);
  --on-night-quiet: rgba(247, 235, 220, 0.6);
  --hairline: rgba(217, 165, 74, 0.22);
  --wash: rgba(247, 235, 220, 0.06);

  /* On Apple devices ui-rounded is SF Pro Rounded, the typeface of the game's own posters */
  --font-round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --step-3: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --step-4: clamp(2.75rem, 1.45rem + 5.2vw, 5.25rem);

  --gutter: clamp(16px, 5vw, 48px);
  --max: 1160px;
  --r-panel: 26px;
  --r-shot: 24px;
  --lift: 0 30px 60px rgba(8, 3, 1, 0.55), 0 8px 18px rgba(8, 3, 1, 0.35);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Wood grain: stretched fractal noise turned into dark streaks */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.09' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.035 0 0 0 0 0.01 0 0 0 2.4 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

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

[hidden] {
  display: none !important;
}

/* Without JS the page still reads top to bottom; only the toys go away */
html:not(.js) .hud,
html:not(.js) .play-bar,
html:not(.js) .device-tabs,
html:not(.js) .rail-btns,
html:not(.js) .lang-tabs {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--on-night);
  font: 400 var(--step-0)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

/* body's clip is handed to the viewport, which phones ignore when sizing the
   layout; clipping here keeps the oversized sunbursts from widening the page */
main {
  overflow-x: hidden;
  overflow-x: clip;
}

/* The page opens on a lamp-lit walnut table and fades into the dark room */
.tabletop {
  position: absolute;
  inset: 0 0 auto;
  height: 210vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 34% at 72% 26%, rgba(242, 139, 68, 0.26), transparent 70%),
    radial-gradient(60% 30% at 10% 0%, rgba(110, 59, 28, 0.85), transparent 75%),
    linear-gradient(180deg, #5A2C13 0%, #43200D 20%, #2E170A 46%, var(--night) 100%);
}

/* One 1600px tile, centered, so no seam lands inside a normal window */
.tabletop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: var(--grain);
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

a,
button {
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.wrap {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.wrap--doc {
  width: min(820px, 100% - 2 * var(--gutter));
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  font: 800 var(--step--1) var(--font-round);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   Top bar
   ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.topbar.is-stuck {
  background: rgba(26, 15, 9, 0.8);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--hairline);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.topbar-start {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Back sits first in the bar, the way a back button does on iPhone */
.back-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--on-night-soft);
  font: 800 var(--step--1)/1 var(--font-round);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.back-btn:hover {
  background: rgba(247, 235, 220, 0.12);
  color: var(--on-night);
}

.back-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-btn--app {
  padding-right: 14px;
  color: var(--on-night);
  font: 800 1.0625rem/1 var(--font-round);
}

.back-btn--app img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

@media (max-width: 720px) {
  .back-btn:not(.back-btn--app) {
    padding: 0;
  }

  .back-label {
    display: none;
  }
}

/* "Slingshot Checkers" is long: narrow phones keep the icon and drop the name */
@media (max-width: 440px) {
  .topbar-start .brand-name {
    display: none;
  }
}

@media (max-width: 360px) {
  .back-btn--app .brand-name {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  font: 800 1.125rem/1.1 var(--font-round);
  letter-spacing: -0.01em;
}

.brand img {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255, 208, 106, 0.3);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
}

.topbar nav a:not(.get-btn) {
  font: 800 var(--step--1)/1 var(--font-round);
  color: var(--on-night-soft);
  text-decoration: none;
  padding: 14px 2px;
  white-space: nowrap;
}

.topbar nav a:not(.get-btn):hover {
  color: var(--on-night);
}

.get-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE08F, var(--gold) 45%, var(--gold-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 16px rgba(231, 169, 58, 0.25);
  color: var(--ink);
  font: 900 0.9375rem/1 var(--font-round);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out);
}

.get-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 680px) {
  .topbar .nav-secondary {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(44px, 7vw, 64px);
  padding: clamp(24px, 5vw, 56px) 0 clamp(80px, 11vw, 140px);
}

@media (min-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    min-height: min(860px, calc(100svh - 68px));
    padding: 16px 0 clamp(32px, 5vw, 72px);
  }
}

/* The copy paints above the board's sunburst, which spills past its column */
.hero-copy {
  position: relative;
  z-index: 1;
}

/* The headline borrows the App Store posters: heavy rounded caps in glowing gold */
.hero h1,
.finale h2 {
  font-family: var(--font-round);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow:
    0 0.03em 0 #9A5A12,
    0 0 0.45em rgba(255, 170, 60, 0.4);
}

/* Breaks only between the three beats of the shot: PULL BACK, / AIM AND / FLICK. */
.hero h1 {
  margin: 0 0 24px;
  font-size: var(--step-4);
  line-height: 0.96;
  letter-spacing: 0.005em;
  max-width: 10.5em;
}

.hero h1 span {
  white-space: nowrap;
}

.lede {
  margin: 0 0 34px;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-night-soft);
  max-width: 31ch;
}

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.store-badge {
  display: inline-block;
  border-radius: 12px;
  line-height: 0;
  transition: transform 0.2s var(--ease-out);
}

.store-badge:hover {
  transform: translateY(-2px);
}

.store-badge img {
  display: block;
  width: auto;
  height: 54px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 800 var(--step--1)/1.3 var(--font-round);
  color: var(--on-night-soft);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.facts svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--gold);
}

/* ------------------------------------------------------------------
   The live board
   ------------------------------------------------------------------ */

.play {
  position: relative;
  isolation: isolate;
  width: min(100%, 460px);
  margin-inline: auto;
}

/* The poster sunburst, radiating from the table */
.play::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: 230%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 196, 92, 0.2) 0deg 6deg,
      rgba(255, 196, 92, 0) 7deg 17deg,
      rgba(255, 196, 92, 0.2) 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.6) 58%, transparent 86%);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.6) 58%, transparent 86%);
  transition: opacity 0.6s ease;
}

.play.is-won::before {
  animation: rays-flare 1.6s ease-out;
}

@keyframes rays-flare {
  20% { opacity: 1; filter: brightness(2.2); }
  to { opacity: 1; filter: none; }
}

/* Scoreboard, shaped like the one in the game */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(18, 10, 6, 0.86);
  box-shadow: inset 0 0 0 1px rgba(217, 165, 74, 0.45), 0 10px 24px rgba(0, 0, 0, 0.35);
  font: 800 0.875rem/1 var(--font-round);
}

.hud p {
  margin: 0;
}

.side {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.side b {
  font-size: 1.125rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.side span {
  color: rgba(255, 255, 255, 0.82);
}

.side i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.side--you {
  background: linear-gradient(180deg, #A3171C, #6B0B0E);
}

.side--you i {
  background: radial-gradient(circle at 35% 30%, #FF8A8C, var(--red) 55%, var(--red-deep));
  box-shadow: 0 0 0 1.5px #F0C25E;
}

.side--ai {
  background: linear-gradient(180deg, #24409E, #142763);
}

.side--ai i {
  background: radial-gradient(circle at 35% 30%, #9DB4FF, var(--blue) 55%, var(--blue-deep));
  box-shadow: 0 0 0 1.5px #C9D1E2;
}

.turn {
  min-width: 7.5em;
  padding: 0 6px;
  text-align: center;
  color: var(--on-night-soft);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.play[data-turn="you"] .turn {
  color: var(--gold);
}

/* The narrowest phones: the colored pills say whose side is whose */
@media (max-width: 360px) {
  .side span {
    display: none;
  }

  .turn {
    min-width: 0;
  }
}

.play[data-turn="you"] .side--you,
.play[data-turn="ai"] .side--ai {
  box-shadow: 0 0 0 2px var(--gold);
}

.side.is-bumped {
  animation: bump 0.45s var(--ease-back);
}

@keyframes bump {
  from { transform: scale(1.25); }
  to { transform: scale(1); }
}

/* The table: a brass-trimmed frame around the canvas, which sets the 4:5 board */
.table {
  position: relative;
  padding: 9px;
  border-radius: 24px;
  background: linear-gradient(160deg, #3B1B0B, #200E05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 208, 106, 0.35),
    inset 0 0 0 4px rgba(32, 14, 5, 0.9),
    inset 0 0 0 5px rgba(217, 165, 74, 0.5),
    0 40px 70px rgba(6, 2, 0, 0.6),
    0 12px 24px rgba(6, 2, 0, 0.4);
}

.board,
.board-still {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}

.board {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.board-still {
  object-fit: cover;
}

.pieces {
  position: absolute;
  inset: 9px;
  pointer-events: none;
}

/* Invisible handles over your pieces: big enough for a thumb, and real buttons for the keyboard */
.piece-btn {
  position: absolute;
  width: max(44px, 11%);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.piece-btn:focus-visible {
  outline-offset: 2px;
}

.play.is-aiming .piece-btn {
  cursor: grabbing;
}

/* Match over: the board turns into the result card */
.result {
  position: absolute;
  inset: 9px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 24px;
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(255, 176, 64, 0.28), transparent 70%),
    rgba(20, 11, 6, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.result p {
  margin: 0;
}

.result-title {
  font: 900 clamp(2.6rem, 2rem + 3vw, 3.6rem)/1 var(--font-round);
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0.04em 0 #9A5A12, 0 0 0.5em rgba(255, 170, 60, 0.5);
}

.result.is-loss .result-title {
  color: #FF8C7A;
  text-shadow: 0 0.04em 0 #6B0B0E, 0 0 0.5em rgba(210, 31, 38, 0.45);
}

.result-text {
  max-width: 24ch;
  margin: 6px 0 20px !important;
  color: var(--on-night-soft);
}

.result .store-badge img {
  height: 48px;
}

.again {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 208, 106, 0.55);
  border-radius: 999px;
  background: rgba(255, 208, 106, 0.08);
  color: var(--gold);
  font: 800 0.9375rem var(--font-round);
  cursor: pointer;
}

.again:hover {
  background: rgba(255, 208, 106, 0.16);
}

.result.is-shown {
  animation: result-in 0.5s var(--ease-out) both;
}

.result.is-shown .result-title {
  animation: title-pop 0.6s 0.1s var(--ease-back) both;
}

@keyframes result-in {
  from { opacity: 0; }
}

@keyframes title-pop {
  from { opacity: 0; transform: scale(0.55); }
}

.play-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.play-hint {
  margin: 0;
  max-width: 38ch;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--on-night-quiet);
}

.play-tools {
  display: flex;
  gap: 8px;
}

.tool {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(247, 235, 220, 0.22);
  border-radius: 50%;
  background: var(--wash);
  color: var(--on-night-soft);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tool:hover {
  background: rgba(247, 235, 220, 0.12);
  color: var(--on-night);
}

.tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-sound[aria-pressed="true"] {
  border-color: rgba(255, 208, 106, 0.6);
  color: var(--gold);
}

.tool-sound[aria-pressed="false"] .on,
.tool-sound[aria-pressed="true"] .off {
  display: none;
}

/* One orchestrated entrance: the table slides in and the pieces are set */
.js .play.is-setting .table {
  animation: table-in 0.8s var(--ease-out) both;
}

.js .play.is-setting .hud {
  animation: hud-in 0.5s 0.45s var(--ease-out) both;
}

@keyframes table-in {
  from { opacity: 0; transform: translateY(28px) rotate(-2deg) scale(0.97); }
}

@keyframes hud-in {
  from { opacity: 0; transform: translateY(-8px); }
}

/* ------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------ */

.section {
  padding: clamp(72px, 10vw, 136px) 0;
}

/* Section breaks are the board's brass inlay line */
.section + .section {
  border-top: 1px solid var(--hairline);
}

.section h2 {
  margin: 0 0 18px;
  font: 800 var(--step-3)/1.04 var(--font-round);
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 18ch;
}

.section h2 + p,
.section .body {
  margin: 0;
  max-width: 34rem;
  color: var(--on-night-soft);
}

.split {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 940px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
  }

  .split--reverse > :first-child {
    order: 2;
  }
}

/* Inside the game ------------------------------------------------------ */

.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

.device-tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.device-tabs button,
.lang-tabs button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 800 0.9375rem/1 var(--font-round);
  cursor: pointer;
}

.device-tabs button:hover,
.lang-tabs button:hover {
  background: rgba(247, 235, 220, 0.1);
}

.device-tabs button[aria-selected="true"],
.lang-tabs button[aria-selected="true"] {
  background: var(--gold);
  box-shadow: none;
  color: var(--ink);
}

.rail-frame {
  position: relative;
  margin-top: 36px;
}

/* The rail bleeds to both edges of the window; its first card lines up with the text */
.rail {
  --inset: max(var(--gutter), calc(50vw - var(--max) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(208px, 60vw, 268px);
  gap: clamp(16px, 2.4vw, 26px);
  margin: 0 calc(50% - 50vw);
  padding: 18px var(--inset) 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inset);
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail--ipad {
  grid-auto-columns: clamp(264px, 80vw, 420px);
}

/* Scattered on the table like cards dealt by hand */
.shot {
  --tilt: 0deg;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-shot);
  background: none;
  cursor: zoom-in;
  scroll-snap-align: start;
  transform: rotate(var(--tilt));
  transition: transform 0.35s var(--ease-out);
}

.shot:nth-child(odd) {
  --tilt: -1.4deg;
}

.shot:nth-child(even) {
  --tilt: 1.4deg;
}

.shot:hover,
.shot:focus-visible {
  transform: rotate(0deg) translateY(-6px);
}

.shot picture,
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-shot);
}

.shot img {
  box-shadow: var(--lift);
}

.rail-btns {
  display: none;
  gap: 10px;
}

@media (hover: hover) and (min-width: 700px) {
  .rail-btns {
    display: flex;
  }
}

.ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid rgba(247, 235, 220, 0.28);
  border-radius: 999px;
  background: var(--wash);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.ctl:hover {
  background: rgba(247, 235, 220, 0.14);
}

.ctl:disabled {
  opacity: 0.35;
  cursor: default;
}

.ctl svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lightbox (markup built by gallery.js) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background: rgba(14, 8, 4, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lightbox[hidden] {
  display: none;
}

.no-scroll {
  overflow: hidden;
}

.lb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 8px;
}

.lb-stage picture {
  display: contents;
}

.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lb-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(760px, 100% - 32px);
  margin: 0 auto;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
}

.lb-text {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.lb-text b {
  display: block;
  font: 800 1.0625rem/1.3 var(--font-round);
}

.lb-text span {
  display: block;
  font-size: var(--step--1);
  color: var(--on-night-soft);
}

.lb-count {
  position: absolute;
  top: 22px;
  left: 20px;
  font: 800 var(--step--1) var(--font-round);
  color: var(--on-night-soft);
}

.lb-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(247, 235, 220, 0.28);
  border-radius: 50%;
  background: var(--wash);
  font-size: 1.125rem;
  cursor: pointer;
}

.lb-btn:hover {
  background: rgba(247, 235, 220, 0.16);
}

.lb-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Two ways to play ----------------------------------------------------- */

/* Each mode is shown in its own material: walnut for Classic, riveted steel for Destruction */
.versus {
  position: relative;
  display: grid;
  gap: 28px;
  margin-top: 44px;
}

@media (min-width: 940px) {
  .versus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

.mode {
  position: relative;
  display: grid;
  align-content: start;
  gap: 30px;
  padding: clamp(26px, 3.6vw, 40px) clamp(22px, 3.6vw, 40px) 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  isolation: isolate;
}

.mode--classic {
  background: var(--grain), radial-gradient(90% 70% at 30% 0%, #7A3E1C, transparent 70%), linear-gradient(170deg, #5B2B12, #3A1A09 70%, #2C1307);
  box-shadow: inset 0 0 0 1px rgba(217, 165, 74, 0.4), var(--lift);
}

.mode--destruction {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7V97' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 70% 0%, rgba(242, 139, 68, 0.22), transparent 70%),
    linear-gradient(170deg, #4A4D53, var(--steel) 45%, var(--steel-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--lift);
}

/* Hazard stripes along the top edge of the arena */
.mode--destruction::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: repeating-linear-gradient(-45deg, #F2B33D 0 12px, #1C1C1E 12px 24px);
  opacity: 0.9;
}

.mode-text h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  font: 900 clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem)/1.05 var(--font-round);
  letter-spacing: -0.015em;
}

.tag {
  padding: 6px 11px;
  border-radius: 999px;
  font: 900 0.8125rem/1 var(--font-round);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mode--classic .tag {
  background: var(--gold);
  color: var(--ink);
}

.mode--destruction .tag {
  background: var(--red);
  color: #fff;
}

.mode-text p {
  margin: 0;
  max-width: 32ch;
  color: var(--on-night-soft);
}

/* The board slides out of the bottom of its card, like a table running off the frame */
.mode-art {
  display: block;
  width: min(100%, 380px);
  margin: 0 auto -18%;
}

.mode-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(var(--lean, 0deg));
}

.mode--classic .mode-art {
  --lean: -2.5deg;
}

.mode--destruction .mode-art {
  --lean: 2.5deg;
}

/* The gold coin from the game's About screen, flipped to VS */
.coin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(84px, 9vw, 108px);
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

.coin img {
  display: block;
  width: 100%;
  height: auto;
}

.coin span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1 var(--font-round);
  color: #7A4A0C;
  text-shadow: 0 1px 0 rgba(255, 244, 200, 0.75), 0 -1px 0 rgba(90, 50, 5, 0.35);
}

/* 8 super powers ------------------------------------------------------- */

.pw--granite { --pw: #C2BAAE; }
.pw--turbo { --pw: #FF9A3D; }
.pw--ram { --pw: #FF6A55; }
.pw--ghost { --pw: #C8B9FF; }
.pw--reinforce { --pw: #5BD27A; }
.pw--wall { --pw: #F2C94C; }
.pw--kamikaze { --pw: #FF7A45; }
.pw--medic { --pw: #63B5FF; }

.loadouts {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}

.loadout h3 {
  margin: 0 0 12px;
  font: 800 1rem/1.2 var(--font-round);
  color: var(--on-night-soft);
}

.loadout ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loadout li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 6px;
  border-radius: 999px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: 800 0.9375rem/1 var(--font-round);
}

.loadout svg,
.medal svg {
  fill: none;
  stroke: var(--pw);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loadout svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4A4D55, #1E2024 75%);
  box-shadow: inset 0 0 0 1.5px var(--pw);
}

/* A faithful copy of the in-game power card, so its words stay readable here */
.power-card {
  margin: 0;
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(60, 34, 18, 0.92), rgba(30, 17, 9, 0.96));
  box-shadow: inset 0 0 0 1.5px rgba(217, 165, 74, 0.55), var(--lift);
}

.power-card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font: 900 1.25rem/1.1 var(--font-round);
  text-align: center;
}

.power-card-title svg {
  width: 30px;
  height: 30px;
  fill: var(--gold);
  filter: drop-shadow(0 0 8px rgba(255, 176, 64, 0.6));
}

.power-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.power-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  background: linear-gradient(90deg, color-mix(in srgb, var(--pw) 20%, transparent), rgba(255, 255, 255, 0.02) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pw) 60%, transparent);
}

.medal {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #50535B, #1C1E22 72%);
  box-shadow: inset 0 0 0 2px var(--pw), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.medal svg {
  width: 26px;
  height: 26px;
}

.power-card b {
  align-self: end;
  font: 900 1.0625rem/1.2 var(--font-round);
}

.power-card li span:last-child {
  align-self: start;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--on-night-soft);
}

.power-card figcaption {
  margin-top: 18px;
  font-size: var(--step--1);
  color: var(--on-night-quiet);
  text-align: center;
}

/* Aim like a pro ------------------------------------------------------- */

/* A real sequence (pull, hit, fly, out), so these numbers are earned */
.steps {
  margin: 30px 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  color: var(--on-night-soft);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--gold);
  color: var(--gold);
  font: 900 0.8125rem/1 var(--font-round);
  transform: translateY(-1px);
}

.guide {
  margin: 0;
}

.guide svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

.guide .out-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.guide .shot-path {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 10;
}

.guide .impact {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2.5;
}

.guide .flight {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
}

.guide .power {
  fill: var(--gold);
  font: 900 15px var(--font-round);
}

.guide .out-tag rect {
  fill: var(--red);
}

.guide .out-tag text {
  fill: #fff;
  font: 900 15px var(--font-round);
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.guide .step-mark circle {
  fill: var(--night);
  stroke: var(--gold);
  stroke-width: 2;
}

.guide .step-mark text {
  fill: var(--gold);
  font: 900 13px var(--font-round);
  text-anchor: middle;
}

.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 208, 106, 0.55);
  color: var(--gold);
  font: 800 0.9375rem/1 var(--font-round);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.btn-line:hover {
  background: rgba(255, 208, 106, 0.1);
}

/* Opponents + sound ---------------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(72px, 9vw, 96px);
}

@media (min-width: 940px) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
  }
}

.levels,
.sounds {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.lv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.lv b {
  font: 900 1.1875rem/1.2 var(--font-round);
}

.lv span {
  grid-column: 1;
  font-size: 0.9375rem;
  color: var(--on-night-soft);
}

.lv .meter,
.lv svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.lv--easy { --lv: #5BD27A; }
.lv--normal { --lv: #FF9A3D; }
.lv--hard { --lv: #FF5A4E; }

/* Strength reads left to right: one, two or three bars lit */
.meter {
  display: flex;
  gap: 5px;
}

.meter i {
  width: 30px;
  height: 10px;
  border-radius: 999px;
  background: rgba(247, 235, 220, 0.12);
}

.lv--easy .meter i:nth-child(-n + 1),
.lv--normal .meter i:nth-child(-n + 2),
.lv--hard .meter i:nth-child(-n + 3) {
  background: var(--lv);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lv) 45%, transparent);
}

.lv--friend svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sounds {
  display: grid;
  column-gap: 32px;
}

@media (min-width: 520px) {
  .sounds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sounds li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font: 800 1.0625rem/1.25 var(--font-round);
}

.sounds svg {
  width: 64px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* What's new ----------------------------------------------------------- */

.release {
  display: grid;
  gap: 40px;
}

@media (min-width: 940px) {
  .release {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
  }
}

.version {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 0;
  font: 800 var(--step--1) var(--font-round);
  color: var(--on-night-soft);
}

.version b {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 900;
}

.release-lead {
  margin: 22px 0 0;
  font: 800 var(--step-1)/1.3 var(--font-round);
  color: var(--on-night);
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
}

@media (min-width: 700px) {
  .notes {
    columns: 2;
    column-gap: 40px;
  }
}

.notes li {
  break-inside: avoid;
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  color: var(--on-night-soft);
}

/* Bullets are tiny gold four-point stars, the emblem on every piece */
.notes li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.42em;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.notes strong {
  color: var(--on-night);
  font-weight: 600;
}

/* Privacy band --------------------------------------------------------- */

.privacy-band {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, rgba(247, 235, 220, 0.09), rgba(247, 235, 220, 0.02));
  box-shadow: inset 0 0 0 1px var(--hairline);
}

@media (min-width: 760px) {
  .privacy-band {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 36px;
  }
}

.privacy-band img {
  display: block;
  width: 132px;
  height: auto;
}

.privacy-band h2 {
  margin-bottom: 10px;
  font-size: var(--step-2);
  max-width: none;
}

.privacy-band p {
  margin: 0;
  max-width: 40rem;
  color: var(--on-night-soft);
}

/* Details -------------------------------------------------------------- */

.details dl {
  display: grid;
  gap: 0 40px;
  margin: 30px 0 0;
}

@media (min-width: 360px) {
  .details dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 940px) {
  .details dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.details dl div {
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.details dt {
  font: 800 0.8125rem/1.3 var(--font-round);
  color: var(--on-night-quiet);
}

.details dd {
  margin: 4px 0 0;
  font: 800 1.0625rem/1.35 var(--font-round);
}

/* Final call ----------------------------------------------------------- */

/* The page ends the way it began: under the poster sunburst */
.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(84px, 11vw, 150px) 0 clamp(64px, 8vw, 110px);
  text-align: center;
}

.finale::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: max(1100px, 140%);
  aspect-ratio: 1;
  transform: translate(-50%, -38%);
  background:
    radial-gradient(closest-side, rgba(242, 139, 68, 0.35), transparent 70%),
    repeating-conic-gradient(from 0deg, rgba(255, 196, 92, 0.1) 0deg 6deg, rgba(255, 196, 92, 0) 7deg 17deg, rgba(255, 196, 92, 0.1) 18deg);
  /* The section's top edge sits 38% down this box; the rays fade in below it */
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 75%), linear-gradient(180deg, transparent 38%, #000 47%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(closest-side, #000 30%, transparent 75%), linear-gradient(180deg, transparent 38%, #000 47%);
  mask-composite: intersect;
}

.finale-art {
  display: block;
  width: clamp(112px, 26vw, 152px);
  height: auto;
  margin: 0 auto 36px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 208, 106, 0.35), 0 0 60px rgba(242, 139, 68, 0.35), var(--lift);
}

.finale h2 {
  margin: 0 auto 16px;
  font-size: var(--step-4);
  line-height: 0.96;
}

.finale p {
  margin: 0 auto 32px;
  max-width: 30rem;
  color: var(--on-night-soft);
  text-wrap: balance;
}

/* Footer --------------------------------------------------------------- */

.footer {
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--on-night-quiet);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.footer p {
  margin: 0;
}

.footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  display: inline-block;
  padding: 10px 0;
  color: var(--on-night-soft);
  text-decoration: none;
}

.footer a:hover {
  color: var(--on-night);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------------
   Privacy policy page
   ------------------------------------------------------------------ */

.policy-head {
  padding: clamp(24px, 5vw, 56px) 0 clamp(32px, 5vw, 48px);
}

.crumbs {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 800 var(--step--1)/1.4 var(--font-round);
  color: var(--on-night-soft);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.policy-head h1 {
  margin: 0 0 14px;
  font: 900 var(--step-4)/1 var(--font-round);
  letter-spacing: -0.02em;
}

.policy-head .meta {
  margin: 0;
  color: var(--on-night-soft);
}

.policy-body {
  padding-bottom: clamp(72px, 10vw, 120px);
}

/* Paper panels hold the reading: the label card and the policy itself */
.app-privacy {
  position: relative;
  display: grid;
  gap: 18px;
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--r-panel);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift);
}

@media (min-width: 640px) {
  .app-privacy {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.app-privacy .label {
  margin: 0 0 12px;
  font: 800 0.9375rem/1 var(--font-round);
  color: var(--ink-soft);
}

.app-privacy .nc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  font: 900 clamp(1.5rem, 1.25rem + 1vw, 1.875rem)/1.1 var(--font-round);
  color: var(--ink);
}

.nc svg {
  width: 44px;
  height: 44px;
  flex: none;
}

.app-privacy p {
  margin: 0;
  color: var(--ink-soft);
}

.app-privacy img {
  display: block;
  width: 120px;
  height: auto;
}

/* On phones the shield perches on the card's corner */
@media (max-width: 639px) {
  .app-privacy {
    padding-right: 84px;
  }

  .app-privacy img {
    position: absolute;
    top: -30px;
    right: -10px;
    width: 96px;
  }
}

.glance {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.glance li {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--on-night-soft);
  font-size: 0.9375rem;
}

.glance b {
  display: block;
  margin-bottom: 4px;
  color: var(--on-night);
  font: 800 1.0625rem/1.3 var(--font-round);
}

.lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 52px 0 18px;
}

.lang-tabs button {
  padding: 0 18px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.policy {
  padding: clamp(26px, 5vw, 56px);
  border-radius: var(--r-panel);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift);
}

.policy + .policy {
  margin-top: 28px;
}

.policy h2 {
  margin: 0 0 6px;
  font: 900 var(--step-2)/1.15 var(--font-round);
  color: var(--ink);
  text-wrap: balance;
}

.policy .policy-date {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.policy h3 {
  margin: 34px 0 10px;
  font: 900 1.25rem/1.25 var(--font-round);
  color: #8E1A14;
}

.policy p,
.policy li {
  max-width: 64ch;
  line-height: 1.65;
}

.policy p {
  margin: 0 0 12px;
}

.policy ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.policy li {
  margin: 6px 0;
}

.policy li::marker {
  color: #8E1A14;
}

.policy a {
  color: #8E1A14;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   Reduced motion: keep every state, drop the travel
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}