/* Classic Card Games 3D - styles.
   ASCII only (server sends no charset for .css). No external fonts or images.

   Look: like the Steam capsules - ornament wallpaper (assets/img/pattern.png, black with alpha,
   made by tools/make_pattern.py) over a colour gradient. Each game has its own colour (--c) and
   optional logo tuning (--logo-s/-x/-sh), set from inc/games.php on the section.

   One game at a time, like a big carousel: the URL anchor (#hearts ...) selects the visible
   <section class="game"> via :target - works without JavaScript, Steam links open the right game
   directly. Without an anchor: Classic. Dots in the header and arrows on the band switch games.
   Browsers without :has() show all games below each other (old long page) - intended fallback. */

:root {
  --bg: #0b1030;
  --bg-top: #18215e;
  --topbar: #04050f;
  --glass: rgba(9, 12, 34, 0.62);
  --panel: rgba(7, 10, 32, 0.78);
  --line: rgba(255, 255, 255, 0.1);
  --text: #eceffa;
  --muted: #a7aed0;
  --gold: #f2c04a;
  --gold-hi: #ffd56e;
  --ink: #14171e;
  --radius: 12px;
  --wrap: 1180px;
  --gutter: 20px;
  --top-h: 56px;
  --pattern: url(../img/pattern.png);
  --pattern-size: 52px 108px;
  --head-font: Verdana, "DejaVu Sans", Geneva, sans-serif;
  --title-font: "Marcellus SC", Georgia, serif;   /* close to the lettering of the game logos */
  --title-stroke: 0.6px;   /* outline of the header title: makes the single weight bolder (try 0.3px - 1px) */
  --body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Marcellus SC 400 (SIL OFL, assets/fonts/OFL.txt), served from this site - fetched by tools/fetch_font.py */
@font-face {
  font-family: "Marcellus SC"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/marcellus-sc.woff2) format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Smooth scrolling only after a click inside the page (link has focus), never on the
   initial jump to a Steam anchor - otherwise the target is still moving after load. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* page: dark navy with a faint wallpaper */
/* column layout: the footer sits at the bottom of the window even when a game is short */
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--text); font: 16px/1.6 var(--body-font);
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(11, 16, 48, 0.2) 0, rgba(11, 16, 48, 0.85) 700px),
    var(--pattern),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 700px);
  background-size: auto, var(--pattern-size), auto;
  background-repeat: no-repeat, repeat, no-repeat;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- Header (sticky): title | game dots | EN/DE in one bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 5, 15, 0.86); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.topbar__in {
  max-width: var(--wrap); min-height: var(--top-h); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 12px 20px;
}
.brand {
  flex: 1 1 0; min-width: max-content; color: #fff; text-decoration: none;
  font: 400 19px/1 var(--title-font); letter-spacing: 0.02em;   /* 400: the only weight, no faux bold */
  -webkit-text-stroke: var(--title-stroke) currentColor; paint-order: stroke fill;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.12);
}
.brand:hover { color: #fff; }

/* EN | DE */
.langswitch { flex: 1 1 0; display: flex; justify-content: flex-end; }
.langswitch ul {
  list-style: none; margin: 0; padding: 3px; display: flex; gap: 3px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
}
.langswitch a, .langswitch span[aria-current] {
  display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 7px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; color: var(--muted);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.langswitch .flag {
  flex: none; width: 20px; height: 12px; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.langswitch a .flag { opacity: 0.7; filter: saturate(0.6); transition: opacity 0.15s, filter 0.15s; }
.langswitch span[aria-current] {
  color: var(--gold); background: rgba(242, 192, 74, 0.14); box-shadow: inset 0 0 0 1px rgba(242, 192, 74, 0.6);
}
.langswitch a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.langswitch a:hover .flag { opacity: 1; filter: none; }

/* game dots: one per game, gold pill = current (site.js sets aria-current); name as tooltip */
.gamenav { flex: none; }
.gamenav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.gamenav a { position: relative; display: block; padding: 8px 7px; }  /* 24 px tap target */
.gamenav a::before {
  content: ""; display: block; width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.35); transition: width 0.25s, background-color 0.25s;
}
.gamenav a:hover::before { background: rgba(255, 255, 255, 0.75); }
.gamenav a[aria-current]::before { width: 30px; background: var(--gold); }
.gamenav span {
  position: absolute; left: 50%; top: calc(100% + 4px); z-index: 5; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 6px; background: #000; color: #fff; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.gamenav a:hover span, .gamenav a:focus-visible span { opacity: 1; }

/* ---------- Which game is visible ---------- */
main { flex: 1 0 auto; overflow-x: clip; }  /* fills the height; no sideways scrollbar while a game slides in */
main:has(.game:target) .game:not(:target),
main:not(:has(.game:target)) .game:not(.game--hero) { display: none; }

/* Anchor jump: the visible game starts right below the header, so the page stays at the very top
   (header and game in view). Only where :has() works - the long fallback page keeps
   the normal offset below the sticky header. */
.game { scroll-margin-top: calc(var(--top-h) + 8px); padding-bottom: 44px; }
main:has(.game:target) .game:target { scroll-margin-top: 100vh; }

/* ---------- Band: wallpaper in the game colour ---------- */
.band {
  --c-hi: color-mix(in srgb, var(--c, #4b4aa8), white 22%);
  --c-lo: color-mix(in srgb, var(--c, #4b4aa8), black 58%);
  position: relative;
  background-color: var(--c, #4b4aa8);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 0 0 50% 50% / 0 0 34px 34px;   /* soft arc like the capsules */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .band { box-shadow: 0 18px 60px color-mix(in srgb, var(--c, #4b4aa8) 45%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
}
@supports (color: color-mix(in srgb, red, blue)) {
  .band {
    background-image:
      radial-gradient(ellipse 70% 90% at 30% 35%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
      var(--pattern),
      linear-gradient(180deg, var(--c-hi) 0, var(--c) 45%, var(--c-lo) 100%);
    background-size: auto, var(--pattern-size), auto;
  }
}
.band__in {
  display: grid; gap: 24px 36px; align-items: center;
  padding-top: 30px; padding-bottom: 42px;
}
@media (min-width: 860px) {
  .band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.band__brand { text-align: center; }
.band__title { margin: 0; }
.band__title picture { display: flex; justify-content: center; }
/* --logo-s (size), --logo-x (width), --logo-sh (shadow) per game from inc/games.php; never wider
   than its column (arrows beside it) */
.band__title .logo {
  width: auto; max-height: calc(215px * var(--logo-s, 1));
  max-width: min(calc(500px * var(--logo-s, 1)), calc(100% / var(--logo-x, 1)));
  transform: scaleX(var(--logo-x, 1));
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, calc(0.6 * var(--logo-sh, 1))));
}
.aka { margin: 0 0 8px; color: rgba(255, 255, 255, 0.75); font-size: 14px; font-style: italic; }
.band__text {
  background: rgba(5, 8, 26, 0.5); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.pitch { margin: 0 0 16px; font-size: 1.06em; color: #fff; }

/* ---------- Icons (inline SVG, see icon() in inc/page.php) ---------- */
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }

/* ---------- Buy badges (one look for all, like the store badges) ----------
   All the same width: equal grid columns of at least 172px; they wrap as a whole when narrow. */
.buy { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 10px; }
.badge {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 6px 15px 6px 10px;
  background: #000; color: #fff; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.badge:hover { color: #fff; border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
.badge__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.badge__logo img { max-width: 28px; max-height: 28px; width: auto; height: auto; }
.badge__text { display: flex; flex-direction: column; line-height: 1.1; }
.badge small {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72);
}
.badge strong { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Below the band: screenshots, features, details ---------- */
.game__main { padding-top: 26px; }

.gallery {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 10px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.shot {
  display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--line);
  aspect-ratio: 16 / 9; background: var(--bg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.shot:hover img { transform: scale(1.04); }
/* trailer thumbnail: play button (the name is in the alt text) */
.shot--video { position: relative; }
.shot__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(5, 8, 26, 0.6); border: 2px solid rgba(255, 255, 255, 0.85); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.shot__play .icon { width: 20px; height: 20px; margin-left: 3px; }
.shot--video:hover .shot__play { border-color: var(--gold); color: var(--gold); transform: translate(-50%, -50%) scale(1.08); }

.game__body { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .game__body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.game__text, .game__side {
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; column-gap: 22px; } }
.features li { position: relative; padding-left: 24px; }
.features li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}

.side__title {
  margin: 0 0 10px; font: 700 13px/1.3 var(--body-font);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 2px 10px; border-radius: 999px; font-size: 13px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
}
.platforms { margin: 0; color: var(--muted); font-size: 14px; }
.trailer { margin: 10px 0 0; font-size: 15px; }
.textlink { color: var(--gold); }
.textlink .icon, .sysreq summary .icon { margin-right: 0.4em; }

.sysreq { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.sysreq summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.sysreq summary:hover { color: #fff; }
.sysreq dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 8px; }
.sysreq dt { color: var(--muted); }
.sysreq dd { margin: 0; }
.sysreq .note { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Carousel arrows on the band ----------
   Previous/next links inside each game (.flip, real anchor links with wrap-around, work without JS)
   as glass circles on the band:
   from 1300px next to the content, 860-1299px in an inner margin of the band, below 860px (one
   column) smaller at the height of the logo. Plus swipe and arrow keys (site.js).
   Switching slides the content in from the side (direction from site.js via html[data-dir]). */
.flip__link {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(5, 8, 26, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.2s;
}
.flip__link--prev { left: max(14px, calc(50% - var(--wrap) / 2 - 80px)); }
.flip__link--next { right: max(14px, calc(50% - var(--wrap) / 2 - 80px)); }
.flip__link:hover {
  background: rgba(5, 8, 26, 0.6); border-color: var(--gold); color: var(--gold); transform: translateY(-50%) scale(1.06);
}
.flip__link .icon { width: 30px; height: 30px; }
@media (min-width: 860px) and (max-width: 1299px) {
  .band__in { padding-left: 96px; padding-right: 96px; }  /* room for the arrows */
  .flip__link--prev { left: 16px; }
  .flip__link--next { right: 16px; }
}
@media (max-width: 859px) {
  /* one column: arrows beside the logo (band padding-top + half the logo height) */
  .flip__link { top: calc(30px + 107px); width: 44px; height: 44px; }
  .flip__link .icon { width: 22px; height: 22px; }
  .flip__link--prev { left: 10px; }
  .flip__link--next { right: 10px; }
  .band__title .logo { max-width: calc((100vw - 120px) / var(--logo-x, 1)); }
}
@media (max-width: 640px) {
  .flip__link { top: calc(20px + 75px); width: 40px; height: 40px; }
  .flip__link--prev { left: 8px; }
  .flip__link--next { right: 8px; }
}
/* slide-in when switching (JS sets data-dir right before the anchor changes) */
@media (prefers-reduced-motion: no-preference) {
  .js[data-dir="next"] .game:target .band__in,
  .js[data-dir="next"] .game:target .game__main { animation: slide-from-right 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js[data-dir="prev"] .game:target .band__in,
  .js[data-dir="prev"] .game:target .game__main { animation: slide-from-left 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@keyframes slide-from-right { from { opacity: 0; transform: translateX(80px); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-80px); } }

/* ---------- Footer: one compact line - logo | support | legal | copyright | to the top ---------- */
.footer {
  flex: none; margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: #020309;
  color: var(--muted); font-size: 13px; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}
.footer p { margin: 0; }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 12px; padding-bottom: 12px; }
/* every item on one centre line (no text baselines mixed with flex boxes) */
.footer__in > *, .footer__legal li { display: flex; align-items: center; line-height: 20px; }
.footer__logo { flex: none; }
.footer__logo img { display: block; width: 52px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.15s; }
.footer__logo:hover img { transform: scale(1.06); }
.footer__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.footer__link { display: inline-flex; align-items: center; gap: 0.4em; color: #d5d9ee; text-decoration: none; }
.footer__link .icon { width: 1em; height: 1em; opacity: 0.7; }
.footer__link:hover { color: var(--gold); }
.footer__link:hover .icon { opacity: 1; }
.footer__copy { margin-left: auto !important; }
.footer__top {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); color: #d5d9ee;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.footer__top .icon { width: 18px; height: 18px; }
.footer__top:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--gold); }
@media (max-width: 860px) {
  .footer__in { gap: 8px 20px; }
  .footer__copy { margin-left: 0 !important; flex: 1 1 auto; }
}

/* ---------- Screenshot viewer (site.js): window above the blurred, dimmed page ---------- */
.lightbox {
  width: min(1000px, 90vw); max-width: none; max-height: 92vh; margin: auto; padding: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px;
  background: #0e1438; color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}
.lightbox::backdrop {
  background: rgba(5, 8, 25, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(0.8); backdrop-filter: blur(8px) saturate(0.8);
}
.lightbox[open] { display: flex; flex-direction: column; }
html:has(.lightbox[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in 0.22s ease-out; }
  .lightbox[open]::backdrop { animation: lb-fade 0.22s ease-out; }
}
@keyframes lb-in { from { opacity: 0; transform: scale(0.95); } }
@keyframes lb-fade { from { opacity: 0; } }
.lightbox__head {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--line);
}
.lightbox__count { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lightbox__fig { position: relative; margin: 0; background: #000; touch-action: pan-y; }
.lightbox__img, .lightbox__video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(86vh - 56px); object-fit: contain;
  background: #000; user-select: none; -webkit-user-drag: none;
}
.lightbox__img[hidden], .lightbox__video[hidden] { display: none; }
.lightbox__count { margin-right: auto; }
.lightbox__max:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox__max span { display: flex; }
.lightbox__max-off, .lightbox--max .lightbox__max-on { display: none !important; }
.lightbox--max .lightbox__max-off { display: flex !important; }
/* maximised: whole screen, picture/video as large as possible */
.lightbox.lightbox--max {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0;
}
.lightbox--max .lightbox__fig { flex: 1; min-height: 0; }
.lightbox--max .lightbox__img, .lightbox--max .lightbox__video {
  width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
}
.lightbox__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: #fff;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox__prev, .lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(5, 8, 26, 0.6); border-color: rgba(255, 255, 255, 0.4);
}
.lightbox__prev:hover, .lightbox__next:hover { border-color: var(--gold); color: var(--gold); background: rgba(5, 8, 26, 0.8); }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }

/* header on narrow screens: title and EN/DE in the first row, the dots below (same bar) */
@media (max-width: 720px) {
  :root { --top-h: 84px; }
  .topbar__in { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .gamenav { order: 3; flex: 1 1 100%; margin-top: -2px; }
  .gamenav a { padding-top: 6px; padding-bottom: 8px; }
}
/* small phones: only the flags (codes stay for screen readers), so title and switch share one row */
@media (max-width: 520px) {
  .langswitch a, .langswitch span[aria-current] { padding: 5px 7px; }
  .langswitch__code {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  :root { --gutter: 14px; }
  body { font-size: 15px; }
  .brand { font-size: 16px; }
  .band { border-radius: 0 0 50% 50% / 0 0 20px 20px; }
  .band__in { padding-top: 20px; padding-bottom: 28px; gap: 16px; }
  .band__title .logo { max-height: calc(150px * var(--logo-s, 1)); }
  .band__text { padding: 16px; }
  .gallery {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px; scrollbar-width: thin;
  }
  .gallery li { flex: 0 0 78%; scroll-snap-align: center; }
  .game__text, .game__side { padding: 16px; }
  .game { padding-bottom: 32px; }
  .lightbox { width: calc(100vw - 16px); border-radius: 12px; }
  .lightbox__prev, .lightbox__next { width: 36px; height: 36px; }
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
}