/* ==========================================================================
   The arcade
   ==========================================================================

   Loaded after styles.css and games.css on /games/ and on every arcade game.
   Each game page sets --g1 and --g2 on .arcade-main (its two colours from
   games/js/config.js), and everything here is painted from those two, so one
   stylesheet gives twelve games twelve looks.

   Motion rules, from the site's motion budget: only transform and opacity are
   animated, nothing uses backdrop-filter, and prefers-reduced-motion turns the
   whole lot off at the bottom of this file. */

.arcade-main {
  --g1: #b39dff;
  --g2: #ff9db8;
  --stage-bg: #0b0820;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 20px 72px;
}

/* ---------- Title row ---------- */
.arcade-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 14px;
}
.arcade-head-art {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px -10px var(--g1);
}
.arcade-head-art svg { display: block; width: 100%; height: 100%; }
.g-page .arcade-head h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.arcade-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.arcade-head-best {
  margin-inline-start: auto;
  flex: none;
  text-align: end;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.arcade-head-best span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.arcade-head-best b {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- The cabinet: HUD + stage ---------- */
/* Sized so HUD and stage fill the screen under the sticky header once Play
   scrolls them up to it (kit.js, bringIntoView): 72px header, 12px gap, 66px
   HUD, 12px gap below, and 4px spare. The old 250px guessed at the title row
   too, which Play scrolls away, so the stage came out small on laptops and
   still ran 30px off the bottom. */
.arcade-cabinet {
  --ratio: 0.8;
  width: min(100%, calc((100svh - 166px) * var(--ratio)));
  min-width: min(100%, 300px);
  margin: 0 auto;
}
.arcade-cabinet[data-shape="square"] { --ratio: 1; }

.arcade-hud {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 54px;
  margin-bottom: 10px;
}

/* The daily puzzles' title bar carries the cover too, a size down. */
.g-bar .g-bar-art { width: 44px; height: 44px; border-radius: 12px; }
/* On a phone the back arrow, title, number and two buttons already fill the
   row, and the art pushed titles like Daily Word onto a second line. */
@media (max-width: 480px) { .g-bar .g-bar-art { display: none; } }
.arcade-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.arcade-slot-label {
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.arcade-slot-value {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform-origin: left center;
}
[dir="rtl"] .arcade-slot-value { transform-origin: right center; }
.arcade-slot.is-bump .arcade-slot-value { animation: arcade-bump 0.32s ease-out; }
.arcade-slot.is-low .arcade-slot-value { color: #ff8f80; animation: arcade-pulse 0.5s ease-in-out infinite alternate; }
.arcade-hearts { display: flex; gap: 3px; margin-top: 3px; }
.arcade-heart svg { width: 19px; height: 19px; display: block; fill: #ff6f91; filter: drop-shadow(0 0 6px rgba(255, 111, 145, 0.6)); }
.arcade-heart { transition: transform 0.25s, opacity 0.25s; }
.arcade-heart.is-lost { opacity: 0.22; transform: scale(0.8); }
.arcade-heart.is-lost svg { fill: #8a80b3; filter: none; }
.arcade-slot--lives.is-hit { animation: arcade-hit 0.4s ease-out; }
.arcade-pause-btn {
  flex: none;
  width: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.arcade-pause-btn svg { width: 20px; height: 20px; fill: currentColor; }
.arcade-pause-btn:hover { border-color: var(--g1); color: var(--g1); }

.arcade-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid transparent;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 60%),
    radial-gradient(90% 60% at 110% 110%, color-mix(in srgb, var(--g2) 26%, transparent), transparent 60%),
    linear-gradient(var(--stage-bg), #070514) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2)) border-box;
  box-shadow:
    0 30px 70px -30px color-mix(in srgb, var(--g1) 70%, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* A faint field of fixed dots inside the glass, so an empty stage is still
   space and not a black box. Painted once, never animated. */
.arcade-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 40% 64%, #fff, transparent),
    radial-gradient(1px 1px at 88% 48%, #fff, transparent),
    radial-gradient(1px 1px at 22% 86%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 60% 90%, #fff, transparent),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent),
    radial-gradient(1px 1px at 94% 80%, #fff, transparent);
}
.arcade-stage.is-shaking { animation: arcade-shake 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.arcade-world {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.arcade-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.arcade-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.arcade-floats {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.arcade-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 850;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 0 12px var(--g1), 0 2px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  animation: arcade-float 0.9s ease-out forwards;
}
.arcade-float.is-big { font-size: 1.9rem; }
.arcade-float.is-small { font-size: 0.85rem; font-weight: 700; opacity: 0.85; }
.arcade-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
  animation: arcade-flash 0.4s ease-out forwards;
}
.arcade-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Overlays: start, countdown, paused, over ---------- */
.arcade-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
  background: radial-gradient(90% 80% at 50% 45%, rgba(10, 6, 26, 0.72), rgba(6, 4, 16, 0.9));
  overflow-y: auto;
}
.arcade-overlay[hidden] { display: none; }
/* The start screen sits over the game's idle board. A light veil let the board
   read through the instructions on a phone, so this one is nearly solid. */
.arcade-overlay.is-start {
  background: radial-gradient(90% 80% at 50% 40%, rgba(14, 9, 34, 0.9), rgba(6, 4, 16, 0.96));
}
/* The result card keeps a hint of the finished board (Sweeper's mines, the
   last maze) without letting a big number behind it fight the score. */
.arcade-overlay.is-over,
.arcade-overlay.is-paused {
  background: radial-gradient(90% 80% at 50% 42%, rgba(12, 8, 30, 0.86), rgba(6, 4, 16, 0.94));
}
.arcade-overlay.is-countdown { background: transparent; pointer-events: none; }
.arcade-card-in {
  width: 100%;
  max-width: 400px;
  animation: arcade-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.arcade-cover {
  width: min(62%, 220px);
  aspect-ratio: 16 / 10;
  margin: 0 auto 14px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 44px -18px var(--g1), 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: arcade-hover 3.2s ease-in-out infinite alternate;
}
.arcade-cover svg { display: block; width: 100%; height: 100%; }
.g-page .arcade-title {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff 10%, var(--g1) 55%, var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The one thing to do, big enough to read at a glance. The list under it is
   only controls and how a run ends. */
.arcade-goal {
  margin: 0 auto 12px;
  max-width: 340px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}
.arcade-how {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  max-width: 330px;
  display: grid;
  gap: 6px;
  text-align: start;
}
.arcade-how li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.arcade-how li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

.arcade-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  min-height: 58px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  color: #140a24;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 14px 34px -10px var(--g1),
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.arcade-overlay.is-start .arcade-play { animation: arcade-breathe 1.6s ease-in-out infinite; }
.arcade-play:hover { transform: translateY(-2px) scale(1.03); }
.arcade-play:active { transform: translateY(1px) scale(0.98); }
.arcade-play svg { width: 20px; height: 20px; fill: currentColor; }
.arcade-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.arcade-start-best {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.arcade-start-best b { color: var(--ink); font-variant-numeric: tabular-nums; }
.arcade-keys {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.arcade-keys kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 0.74rem;
}

.arcade-count {
  /* Block, not inline: it sits in a wrapper now, and an inline span ignores
     the transform its pop animation runs on. */
  display: block;
  font-size: clamp(4rem, 3rem + 8vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px var(--g1), 0 0 60px var(--g2);
}
.arcade-count.is-pop { animation: arcade-count 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25) both; }
.arcade-count-goal {
  margin: 14px 0 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(6, 4, 16, 0.7);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.arcade-count-goal:empty { display: none; }

.arcade-kicker {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g1);
}
.arcade-kicker.is-best {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  color: #140a24;
  background: linear-gradient(120deg, var(--g1), var(--g2), var(--g1));
  background-size: 200% 100%;
  animation: arcade-shimmer 1.6s linear infinite;
}
.arcade-final {
  margin: 4px 0 2px;
  font-size: clamp(3rem, 2.2rem + 5vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff 20%, var(--g1) 60%, var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.arcade-detail { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.arcade-bestline { margin: 6px 0 18px; color: var(--muted); font-size: 0.9rem; }
.arcade-over-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.arcade-over-actions .arcade-play { min-width: 170px; min-height: 52px; font-size: 1.05rem; }
.arcade-ghost,
.arcade-link {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.arcade-ghost:hover,
.arcade-link:hover { border-color: var(--g1); color: #fff; }
.arcade-link { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted); min-height: 40px; }
.arcade-next {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  margin: 18px auto 0;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 18px;
  text-align: start;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(rgba(14, 9, 34, 0.9), rgba(14, 9, 34, 0.9)) padding-box,
    linear-gradient(120deg, var(--n1), var(--n2)) border-box;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease;
}
.arcade-next:hover { transform: translateY(-2px); }
.arcade-next span {
  grid-row: span 2;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n1);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.arcade-next strong { font-size: 1rem; }
.arcade-next em { font-style: normal; font-size: 0.82rem; color: var(--muted); }

/* ---------- Below the stage ---------- */
.arcade-about {
  max-width: 640px;
  margin: 44px auto 0;
  color: var(--ink-soft);
}
.g-page .arcade-about h2 { font-size: 1.25rem; margin: 0 0 8px; }
.arcade-about p { margin: 0 0 12px; line-height: 1.6; }

.arcade-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 46px 0 14px;
}
.g-page .arcade-rail-head h2 { margin: 0; font-size: 1.35rem; }
.arcade-rail-head a { color: var(--muted); font-weight: 650; font-size: 0.92rem; }
.arcade-rail-head a:hover { color: var(--ink); }

/* ==========================================================================
   Game cards: the hub, the rail under each game, and the homepage door
   ========================================================================== */

.arcade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.arcade-grid.is-rail { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

.game-tile {
  --g1: #b39dff;
  --g2: #ff9db8;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(rgba(16, 11, 38, 0.94), rgba(12, 8, 30, 0.96)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--g1) 70%, transparent), rgba(255, 255, 255, 0.06) 45%, color-mix(in srgb, var(--g2) 60%, transparent)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 40px -26px var(--g1);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2), box-shadow 0.25s ease;
}
.game-tile:hover,
.game-tile:focus-visible {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 30px 60px -24px var(--g1);
}
.game-tile:nth-child(even):hover,
.game-tile:nth-child(even):focus-visible { transform: translateY(-6px) rotate(0.6deg); }
.game-tile:focus-visible { outline: 2px solid var(--g1); outline-offset: 3px; }
.game-tile-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.game-tile-art svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.game-tile:hover .game-tile-art svg { transform: scale(1.06); }
.game-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  flex: 1;
}
.game-tile-kind {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g1);
}
.g-page .game-tile h3,
.game-tile h3 {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.game-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}
.game-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.game-tile-best {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.game-tile-best[hidden] { display: none; }
.game-tile-go {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #140a24;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  transition: transform 0.2s ease;
}
.game-tile:hover .game-tile-go { transform: scale(1.06); }
.game-tile-status {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: rgba(10, 6, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.game-tile-status[data-status="new"] { display: none; }
.game-tile-status[data-status="won"] { color: #06180e; background: #5fd99a; border-color: transparent; }
.game-tile-status[data-status="playing"] { color: #221600; background: #f3c25b; border-color: transparent; }
.game-tile.is-rail .game-tile-body { padding: 10px 12px 12px; }
.game-tile.is-rail h3 { font-size: 1rem; }
.game-tile.is-rail p { display: none; }

/* Cover art: small, hover-only movement, all transforms. */
.cover-bob { animation: cover-bob 2.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.game-tile .cover-bob { animation-play-state: paused; }
.game-tile:hover .cover-bob,
.arcade-cover .cover-bob { animation-play-state: running; }
.cover-spin { animation: cover-spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.game-tile .cover-spin { animation-play-state: paused; }
.game-tile:hover .cover-spin,
.arcade-cover .cover-spin { animation-play-state: running; }
.cover-fall { animation: cover-fall 1.8s ease-in infinite; transform-box: fill-box; }
.game-tile .cover-fall { animation-play-state: paused; }
.game-tile:hover .cover-fall,
.arcade-cover .cover-fall { animation-play-state: running; }
.cover-twinkle { animation: cover-twinkle 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.game-tile .cover-twinkle { animation-play-state: paused; }
.game-tile:hover .cover-twinkle,
.arcade-cover .cover-twinkle { animation-play-state: running; }
.d1 { animation-delay: -0.4s; }
.d2 { animation-delay: -0.9s; }
.d3 { animation-delay: -1.3s; }

/* ==========================================================================
   The hub (/games/)
   ========================================================================== */

.games-hero {
  position: relative;
  padding: clamp(36px, 6vw, 72px) var(--gutter, 24px) 20px;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.games-hero-copy .eyebrow { margin-bottom: 12px; }
.g-page .games-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.games-hero h1 .hl {
  background: linear-gradient(110deg, #ffcf5c, #ff6fae 45%, #7c6bff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.puzzles-hub .games-hero h1 .hl {
  background-image: linear-gradient(110deg, #7dffb0, #22d3ee 50%, #7c6bff 90%);
}
/* Chinese and Japanese characters are full width, so at the Latin size a
   seven or eight character phrase ran wider than the column and its last
   character dropped onto a line of its own. Three quarters of the size fits,
   and the tight Latin tracking only crowds full-width characters. */
html[lang="zh"] .g-page .games-hero h1,
html[lang="ja"] .g-page .games-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  letter-spacing: 0;
}
.games-hero .g-hub-meta { margin-top: 4px; }
.games-hero-copy > p {
  margin: 0 0 22px;
  max-width: 460px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.games-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.games-hero-actions .arcade-play { --g1: #ffcf5c; --g2: #ff6fae; }
.games-hero-actions .arcade-ghost { display: inline-flex; align-items: center; text-decoration: none; }

/* The showcase: a fanned stack of four covers. */
.games-fan {
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 520px;
  width: 100%;
  justify-self: center;
}
.games-fan a {
  position: absolute;
  width: 58%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.games-fan a svg { display: block; width: 100%; height: 100%; }
.games-fan a:nth-child(1) { left: 2%; top: 8%; transform: rotate(-9deg); }
.games-fan a:nth-child(2) { right: 0; top: 0; transform: rotate(7deg); }
.games-fan a:nth-child(3) { left: 8%; bottom: 2%; transform: rotate(5deg); }
.games-fan a:nth-child(4) { right: 6%; bottom: 8%; transform: rotate(-6deg); z-index: 2; }
.games-fan a:hover { transform: rotate(0deg) scale(1.08); z-index: 3; }
.games-fan a:nth-child(1) { animation: fan-float 5s ease-in-out infinite alternate; }
.games-fan a:nth-child(4) { animation: fan-float 6s ease-in-out -2s infinite alternate; }

.games-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px var(--gutter, 24px) 10px;
}
.games-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.g-page .games-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  letter-spacing: -0.02em;
}
.games-section-head p { margin: 4px 0 0; color: var(--muted); }
.games-section-head .g-hub-meta { margin: 0; }
.games-footnote {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 var(--gutter, 24px);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.games-footnote h2 { font-size: 1rem; margin: 0 0 6px; color: var(--ink-soft); }

@media (max-width: 860px) {
  .games-hero { grid-template-columns: 1fr; }
  .games-fan { max-width: 420px; }
}
@media (max-width: 640px) {
  .arcade-main { padding: 12px 16px 56px; }
  .arcade-head { gap: 10px; margin-bottom: 10px; }
  .arcade-head-art { width: 46px; height: 46px; border-radius: 13px; }
  .arcade-head p { display: none; }
  .arcade-head-best { padding: 6px 10px; }
  .arcade-cabinet { width: 100%; }
  .arcade-stage { border-radius: 20px; }
  .arcade-slot { padding: 6px 9px; }
  .arcade-slot-value { font-size: 1.1rem; }
  .arcade-pause-btn { width: 44px; }
  .arcade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .arcade-grid.is-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-tile { border-radius: 18px; }
  .game-tile-body { padding: 10px 12px 12px; }
  .game-tile h3 { font-size: 1.02rem; }
  .game-tile p { display: none; }
  .game-tile-go { padding: 6px 11px; font-size: 0.78rem; }
  .games-section-head { flex-direction: column; align-items: flex-start; }
}

/* The start and result screens fit themselves to the stage's height, since a
   phone's stage can be half as tall as a desktop's. */
.arcade-stage { container-type: size; }
@container (max-height: 540px) {
  .arcade-overlay.is-start .arcade-cover { width: min(42%, 160px); margin-bottom: 8px; border-radius: 16px; }
  .g-page .arcade-title { font-size: 1.75rem; margin-bottom: 8px; }
  .arcade-goal { font-size: 1.05rem; margin-bottom: 8px; }
  .arcade-how { gap: 4px; margin-bottom: 14px; }
  .arcade-how li { font-size: 0.84rem; line-height: 1.35; }
  .arcade-play { min-height: 52px; font-size: 1.1rem; }
  .arcade-final { font-size: 3.2rem; }
  .arcade-next { margin-top: 12px; padding: 9px 14px; }
}
@container (max-height: 430px) {
  .arcade-overlay.is-start .arcade-cover { display: none; }
  .arcade-next em { display: none; }
}

/* A stage in progress on a phone: the page stops scrolling under a finger. */
.arcade-stage.is-live[data-drag] { touch-action: none; }

/* ---------- Keyframes ---------- */
@keyframes arcade-bump { 40% { transform: scale(1.28); } }
@keyframes arcade-pulse { to { opacity: 0.55; } }
@keyframes arcade-hit {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes arcade-shake {
  10%, 90% { transform: translate(calc(var(--shake) * -0.3), 1px); }
  20%, 80% { transform: translate(calc(var(--shake) * 0.5), -1px); }
  30%, 50%, 70% { transform: translate(calc(var(--shake) * -1), 2px); }
  40%, 60% { transform: translate(var(--shake), -2px); }
}
@keyframes arcade-float {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}
@keyframes arcade-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes arcade-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes arcade-hover { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes arcade-breathe { 50% { transform: scale(1.05); box-shadow: 0 18px 44px -8px var(--g1), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.18); } }
@keyframes arcade-count {
  from { opacity: 0; transform: scale(2.2); }
  60% { opacity: 1; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes arcade-shimmer { to { background-position: -200% 0; } }
@keyframes cover-bob { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
@keyframes cover-spin { to { transform: rotate(360deg); } }
@keyframes cover-fall { from { transform: translateY(-18px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes cover-twinkle { from { transform: scale(0.8); opacity: 0.6; } to { transform: scale(1.12); opacity: 1; } }
@keyframes fan-float { to { translate: 0 -10px; } }

@media (prefers-reduced-motion: reduce) {
  .arcade-stage.is-shaking,
  .arcade-cover,
  .arcade-overlay.is-start .arcade-play,
  .arcade-kicker.is-best,
  .arcade-slot.is-low .arcade-slot-value,
  .cover-bob, .cover-spin, .cover-fall, .cover-twinkle,
  .games-fan a { animation: none !important; }
  .arcade-card-in { animation: none; }
  .arcade-float { animation-duration: 0.01s; }
  .game-tile, .game-tile-art svg, .games-fan a { transition: none; }
}

/* Arabic pages: no tracking on the small labels, which would break the
   joins between letters. */
[dir="rtl"] :is(.arcade-slot-label, .arcade-kicker, .arcade-next span, .arcade-count, .g-next-label, .g-pill, .eyebrow, .mol-vs, .g-answer .label, .g-dist-title, .kick-head, .g-tag) {
  letter-spacing: 0;
  text-transform: none;
}