/* ==========================================================================
   Pixelino — marketing site
   Design language: Apple-style restraint — one typeface, huge whitespace,
   alternating black/white sections, minimal chrome, a single accent color.
   Pixelino's own brand colors survive only where they carry real meaning:
   the logo mark, and the per-game color coding.
   ========================================================================== */

:root {
  --fg: #f5f5f7;
  /* Secondary text sat at #86868b -- Apple's dark-mode gray, 5.4:1 on the page
     ground and only 4.5:1 on the lighter glass cards. That is a pass on paper
     and a strain in practice: the whole site is light text on a dark, blurred,
     gradient-lit surface, and the cards' own translucency eats the rest of the
     margin. The catalog hit the same wall in print and lifted its entire
     neutral ladder one step (body text from 6.8:1 to 11:1); this is the same
     move for the screen, kept hue-neutral so the Apple-restraint palette is
     unchanged. #c2c2ca is 11.1:1 on the page ground and 10.1:1 on glass.
     The grays inside .modal-panel and the Leaflet popups are deliberately NOT
     lifted -- those are white surfaces, where brighter means worse. */
  --fg-secondary: #c2c2ca;
  --bg: #000000;
  --surface: #1d1d1f;
  --surface-2: #2a2a2d;
  --divider: rgba(255, 255, 255, 0.14);
  --divider-strong: rgba(255, 255, 255, 0.24);

  --accent: #3dd6ff;
  --accent-soft: rgba(61, 214, 255, 0.14);

  --green: #39ff8a;
  --red: #ff4d6a;
  --purple: #b060ff;
  --orange: #ff8a3d;
  --sky: #39d6ff;
  --blue: #5c8aff;
  --yellow: #ffce39;

  /* Pixelino rainbow-neon system — same tokens as pixel_kiosk's
     static/style.css, shared verbatim so the marketing site and the kiosk
     UI read as one visual family. */
  --neon-green: #39ff8a;
  --neon-cyan: #39d6ff;
  --neon-gold: #ffce39;
  --neon-purple: #b060ff;
  --neon-orange: #ff8a3d;
  --neon-pink: #ff4fd8;
  --rainbow-gradient: linear-gradient(
    100deg,
    var(--neon-green),
    var(--neon-cyan) 35%,
    var(--neon-purple) 65%,
    var(--neon-pink)
  );

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-pill: 980px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font);
  --font-head: var(--font);
  --font-body: var(--font);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* .light-section used to flip to a flat white panel; the whole page is now
   one continuous dark gradient with glass cards on top, so it's a no-op
   kept only so existing markup doesn't need touching. */
.light-section {
  color: var(--fg);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 760px at 12% -8%, rgba(180, 92, 255, 0.24), transparent 60%),
    radial-gradient(950px 700px at 88% 12%, rgba(61, 214, 255, 0.18), transparent 55%),
    radial-gradient(900px 800px at 55% 55%, rgba(255, 168, 62, 0.09), transparent 60%),
    radial-gradient(1000px 700px at 20% 100%, rgba(255, 92, 122, 0.12), transparent 55%),
    linear-gradient(180deg, #060512 0%, #0a0a1a 25%, #090914 55%, #0d0a17 80%, #060510 100%);
  background-attachment: fixed;
  background-size: cover;
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  position: relative;
  color: var(--fg);
}

::selection {
  background: var(--accent);
  color: #071019;
}

/* ---------- typography helpers ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* The section head runs the full width of the wrap. It used to be capped at
   640px, which left the right half of every section empty -- most visibly on
   the advantages section, whose intro runs several lines. */
.section-head {
  margin: 0 0 64px;
}

.section-head.center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 700;
  color: var(--fg);
  margin: 18px 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.section-head p {
  font-size: 19px;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.5;
}

.section-pad {
  padding: 160px 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 590;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #041018;
}

.btn-primary:hover {
  opacity: 0.85;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--divider-strong);
}

.btn-ghost:hover {
  border-color: var(--fg-secondary);
}

.btn-block {
  width: 100%;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0;
  height: 76px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}

.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 50px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 400;
  color: #f5f5f7;
}

.nav-links a {
  position: relative;
  padding: 4px 0;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta .btn {
  padding: 7px 16px;
  font-size: 12.5px;
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #f5f5f7;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle .ui-icon {
  width: 18px;
  height: 18px;
}

/* ---- the two chrome icons every page carries ----------------------------
   The caret and the burger were inline <svg>, written out again in
   index.html, privacy.html and impressum.html: three copies of one drawing
   with nothing keeping them equal. This stylesheet is the one file all three
   pages already load, so the drawing lives here and the markup just names it.
   Masked rather than drawn, so they still take their colour from the button
   they sit in the way currentColor did. */
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
}

.ui-icon.caret {
  width: 10px;
  height: 10px;
  --ui-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.ui-icon.burger {
  --ui-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 192px 0 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(92vh, 860px);
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-glow span {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.22;
}

.hero-glow .g1 {
  width: 560px;
  height: 560px;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  background: var(--accent);
}

.hero-glow .g2 {
  width: 460px;
  height: 460px;
  right: -140px;
  top: 140px;
  background: var(--purple);
  opacity: 0.14;
}

.hero-glow .g3 {
  width: 380px;
  height: 380px;
  left: -120px;
  top: 220px;
  background: var(--yellow);
  opacity: 0.1;
}

.hero-grid {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Soft pulsing halo behind the hero logo, so the mark reads as a big,
   always-present anchor rather than a small static image the eye passes over.
   The wordmark carries its own white sticker outline, so it gets no frame. */
.hero-logo-halo {
  position: relative;
  display: block;
  margin-bottom: 28px;
}

.hero-logo-halo::after {
  content: "";
  position: absolute;
  inset: -70px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 214, 255, 0.32), rgba(176, 96, 255, 0.16) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: hero-logo-glow-pulse 4.2s ease-in-out infinite;
}

@keyframes hero-logo-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.07); }
}

.hero-logo {
  display: block;
  width: 560px;
  max-width: 78vw;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
  animation: float-y 6s ease-in-out infinite;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.04;
  color: var(--fg);
  margin: 0 0 24px;
  max-width: 920px;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero h1 .hl-cyan { color: var(--accent); }
.hero h1 .hl-yellow { color: var(--yellow); }
.hero h1 .hl-red { color: var(--red); }
.hero h1 .hl-green { color: var(--green); }
.hero h1 .hl-purple { color: var(--purple); }

.hero .lead {
  font-size: 21px;
  line-height: 1.5;
  color: var(--fg-secondary);
  max-width: 560px;
  margin: 0 0 40px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 76px;
}

/* stat strip */

/* The cover's badge row, in the hero. Pills rather than the numeric stat
   tiles that were here before: the four claims are sentences in the catalog,
   and two of them ("Full-Body Multiplayer", "Live Score Screen") have no
   number to put in a tile. */
.hero-badges {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}

.hero-badge {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.hero-badge:first-child {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--fg-secondary);
}

.badge {
  display: inline-flex;
  align-items: center;
}

.badge:not(:last-child)::after {
  content: '\00b7';
  margin-left: 8px;
  color: var(--divider-strong);
}

/* ==========================================================================
   Quick-play grid
   ========================================================================== */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 26px;
}

.quick-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s ease, background 0.3s ease;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .quick-card {
    background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.045));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

.quick-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .quick-card:hover {
    background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.06));
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  }
}

.quick-card:hover {
  transform: translateY(-3px);
}

/* The card head is inset rather than full-bleed. It used to run edge to edge,
   and the mosaic's black background meant its 5px inner padding read as more
   dark floor rather than as a margin -- so the tile field looked like it was
   bleeding under the card border and getting clipped by the corner radius.
   Inset media on the card's own surface reads as a framed thumbnail instead. */
.quick-card .card-shot {
  display: block;
  width: calc(100% - 20px);
  height: 128px;
  margin: 10px 10px 0;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
}

.quick-card .body {
  padding: 18px 18px 22px;
}

.quick-card h4 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 3px;
  letter-spacing: -0.005em;
}

.quick-card .cat {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: 10px;
}

.quick-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 12px;
}

.quick-card .meta {
  font-size: 12px;
  color: var(--fg-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  line-height: 1.6;
}

/* ---------- clickable card affordance ---------- */

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}

/* The card that closes the grid: no game behind it, so no media box and a
   dashed edge to say it is a note rather than a tenth game. */
.quick-card.filler {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px dashed var(--divider-strong);
  padding: 22px;
}

.quick-card.filler h4 {
  margin: 0 0 10px;
}

.quick-card.filler p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

.quick-card .card-link {
  margin-top: 10px;
  font-size: 12.5px;
}

.card-link svg {
  transition: transform 0.2s ease;
}

.quick-card:hover .card-link svg {
  transform: translateX(3px);
}

.quick-card[data-game] {
  cursor: pointer;
}

.quick-card[data-game]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Game overview strip
   ========================================================================== */

.game-overview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}

.game-overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-m);
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .game-overview-item {
    background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.04));
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  }
}

.game-overview-item:hover,
.game-overview-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .game-overview-item:hover,
  .game-overview-item:focus-visible {
    background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.055));
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

.game-overview-item:hover,
.game-overview-item:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

.game-overview-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--accent);
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .game-overview-item:hover .game-overview-icon,
  .game-overview-item:focus-visible .game-overview-icon {
    box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--accent) 65%, transparent);
    transform: scale(1.08);
  }
}

.game-overview-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.3;
}

/* ==========================================================================
   Pull quotes — big centered typographic statement, no box
   ========================================================================== */

.quote-box {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 48px;
  text-align: center;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .quote-box {
    background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.045));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

.quote-box::before {
  content: '\201C';
  position: absolute;
  top: -18px;
  left: 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 140px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
}

.quote-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px 200px at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.quote-box p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--fg);
}

@media (max-width: 640px) {
  .quote-box { padding: 44px 28px; }
  .quote-box::before { font-size: 100px; top: -10px; left: 16px; }
}

/* ==========================================================================
   Technology section
   ========================================================================== */

.flow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 72px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.flow-step {
  position: relative;
  background: rgba(10, 8, 20, 0.35);
  padding: 32px 22px;
  text-align: left;
  transition: background 0.3s ease;
}

.flow-step:hover {
  background: rgba(255, 255, 255, 0.04);
}

.flow-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #041018;
  margin-bottom: 18px;
  background: var(--accent);
}

.flow-row .flow-step:nth-child(2) .num { background: var(--yellow); }
.flow-row .flow-step:nth-child(3) .num { background: var(--green); }
.flow-row .flow-step:nth-child(4) .num { background: var(--purple); }

.flow-step h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.flow-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

/* ==========================================================================
   Advantages + occasions  (catalog pages 2-3)
   ========================================================================== */

/* A shared sub-heading for the runs of content that sit below a section-head
   but still need a name -- the catalog's .section-label, in the site's voice.
   Small caps on their own line, so they separate without competing with h2. */
.minor-label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  padding-top: 22px;
  border-top: 1px solid var(--divider);
  margin-bottom: 18px;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.adv-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 20px;
  padding: 26px 28px 28px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-m);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}

.adv-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}

/* Icon spans the full height of the text column so it stays top-aligned with
   the number no matter how many lines the body runs to. */
.adv-card .adv-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.adv-card .adv-icon img {
  width: 64px;
  height: 64px;
}

.adv-card .adv-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}

.adv-card h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.adv-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

.adv-card .adv-num { grid-column: 2; grid-row: 1; }
.adv-card h4       { grid-column: 2; grid-row: 2; }
.adv-card p        { grid-column: 2; grid-row: 3; }

.occasion-block {
  margin-top: 64px;
}

.occasion-intro {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 28px;
  max-width: 720px;
}

.occasion-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.occasion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.occasion .occ-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.35s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .occasion .occ-tile {
    background:
      linear-gradient(150deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
      rgba(255, 255, 255, 0.05);
  }
}

.occasion:hover .occ-tile {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}

.occasion .occ-tile img {
  width: 58%;
  max-width: 76px;
}

.occasion .occ-label {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg);
}

/* ==========================================================================
   Games: the note under the card grid
   ========================================================================== */

.grid-note {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 720px;
}

/* ==========================================================================
   Game comparison table  (catalog page 7)
   ========================================================================== */

/* The table is the one element on the page that cannot reflow -- seven columns
   of short values stop making sense stacked. It scrolls inside its own frame
   instead, so the page body never scrolls sideways on a phone. */
/* On a phone the table is wider than the screen and scrolls sideways. The
   edge with more columns behind it fades out (script.js toggles .more-left /
   .more-right), so the cut reads as "swipe" rather than as a broken layout. */
.compare-scroll {
  --fade-left: 0px;
  --fade-right: 0px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
}

.compare-scroll.more-left { --fade-left: 28px; }
.compare-scroll.more-right { --fade-right: 56px; }

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.compare-table thead th {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  text-align: left;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--divider-strong);
  white-space: nowrap;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  white-space: nowrap;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody th {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}

.compare-table tbody td {
  color: var(--fg-secondary);
  font-weight: 400;
}

.compare-table tbody tr:hover th,
.compare-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

.compare-table td.yes { color: var(--green); font-weight: 500; }
.compare-table td.no { color: #7c7c86; }

.table-footnote {
  margin: 16px 0 56px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 780px;
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.playlist-card {
  padding: 24px 26px 26px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 2px solid var(--accent);
}

.playlist-card h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fg);
  margin: 0 0 8px;
}

.playlist-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

/* ==========================================================================
   Scope of delivery  (catalog pages 8-10)
   ========================================================================== */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}

.spec-intro {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: -4px 0 22px;
  max-width: 780px;
}

.spec-card {
  padding: 24px 26px 26px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.spec-card h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fg);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}

.spec-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

.optional-panel .optional-body p.spec-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}

.optional-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(255, 206, 57, 0.13);
  border: 1px solid rgba(255, 206, 57, 0.32);
}

/* Both optional modules are things you have to see to understand -- a wall of
   lit buttons, a kiosk screen full of games. Photo left, copy right, and the
   photo keeps its own aspect ratio rather than being cropped to a band. */
.optional-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 20px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* These two are the wall of lit buttons and the kiosk screen -- a panorama and
   a UI you are meant to read. Stretching either to the height of the text
   column beside it and cropping the overflow cut 19-31% off the wall photo and
   up to a fifth of the kiosk screenshot, varying with how the German text
   happened to wrap. The image keeps its own proportions instead and sits
   centred in the row, inset like the media on the game cards. */
.optional-panel img {
  width: calc(100% - 20px);
  height: auto;
  margin: 10px;
  border-radius: 10px;
  align-self: center;
}

.optional-panel .optional-body {
  padding: 28px 30px 30px;
  align-self: center;
}

.optional-panel .optional-body h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.optional-panel .optional-body p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

/* ==========================================================================
   The editions  (catalog page 11)
   ========================================================================== */

.editions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.edition-card {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.edition-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.edition-card figcaption {
  padding: 24px 26px 26px;
}

.edition-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.edition-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

.edition-games {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
}

.edition-games em {
  display: block;
  font-style: normal;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.edition-note {
  margin-top: 44px;
  max-width: 780px;
}

.edition-note p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}

/* ==========================================================================
   Contact: the two panels  (catalog page 12)
   ========================================================================== */

/* One panel since the QR half came out. Auto-fit keeps the two-column split
   if a second ever returns, and centres a lone panel at a width that reads as
   a card rather than a stretched band. */
.contact-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.contact-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 26px 30px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-panel .partner-logo {
  width: 148px;
  margin-bottom: 12px;
}

.contact-panel .panel-label {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: 10px;
}

.contact-panel .qr-card {
  margin-bottom: 12px;
}

.contact-panel .panel-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}

.contact-panel .panel-line {
  font-size: 13px;
  line-height: 1.55;
  color: #d2d2d7;
}

.contact-panel .panel-line a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-panel .panel-line a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   Locations map
   ========================================================================== */

/* References: the installation cards beside the map. Two columns on a
   desktop, stacked (cards first) once the map would get too narrow. */
.ref-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 20px;
  align-items: start;
}

.ref-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-card {
  padding: 22px 24px 24px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.ref-status {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ref-status--ready {
  color: var(--green);
  background: rgba(57, 255, 138, 0.12);
  border: 1px solid rgba(57, 255, 138, 0.3);
}

.ref-status--soon {
  color: var(--orange);
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.3);
}

.ref-card h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 0 0 4px;
}

.ref-card .ref-place {
  display: block;
  font-size: 13.5px;
  color: var(--fg-secondary);
}

.ref-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13.5px;
}

.ref-facts dt {
  color: var(--fg-secondary);
}

.ref-facts dd {
  margin: 0;
  color: var(--fg);
  font-weight: 500;
}

.ref-card > a {
  display: inline-block;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

.ref-upcoming ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ref-upcoming li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ref-upcoming li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.ref-up-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
}

.ref-up-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

.ref-up-when {
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);
  text-align: right;
  white-space: nowrap;
}

.ref-up-place {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--fg-secondary);
}

.ref-cta {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .ref-layout { grid-template-columns: 1fr; }
}

/* Side by side, the map grows to the height of the card column instead of
   leaving a gap under itself; script.js tells Leaflet when that changes. */
@media (min-width: 901px) {
  .ref-layout { align-items: stretch; }
  .ref-layout .map-card { display: flex; }
  .ref-layout .world-map { flex: 1; height: auto; min-height: 520px; }
}

.map-card {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.map-card .world-map {
  border-radius: calc(var(--radius-l) - 6px);
}

.world-map {
  width: 100%;
  height: 520px;
  background: #eef0f2;
}

.world-map .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.85);
}

.world-map .leaflet-control-zoom a {
  color: #1d1d1f;
  font-weight: 500;
}

.pixel-pin {
  width: 32px;
  height: 42px;
  position: relative;
}

.pixel-pin .pin-body {
  position: absolute;
  top: 0;
  left: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.pixel-pin .ping {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 14px;
  height: 6px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  transform-origin: center;
  animation: pin-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pixel-pin--soon .ping {
  background: var(--orange);
}

@keyframes pin-ping {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-pin .ping { animation: none; opacity: 0; }
}

.map-popup {
  font-family: var(--font-body);
  min-width: 180px;
}

.map-popup .badge-soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 168, 62, 0.16);
  color: #b25e0e;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.map-popup .badge-ready {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(62, 207, 110, 0.16);
  color: #1f9e52;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.map-popup strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 2px;
}

.map-popup .map-popup-city {
  display: block;
  font-size: 12.5px;
  color: #6e6e73;
  margin-bottom: 10px;
}

.map-popup a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0071e3;
}

.world-map .leaflet-popup-content-wrapper {
  border-radius: 14px;
}

@media (max-width: 640px) {
  .world-map { height: 400px; }
}

/* ==========================================================================
   Contact / CTA
   ========================================================================== */

.contact-section {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.contact-bg {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(180deg, rgba(6, 5, 16, 0.55) 0%, rgba(6, 5, 16, 0.9) 75%, #060510 100%),
    url('assets/contact-bg.png');
  background-size: cover;
  background-position: center 20%;
  text-align: center;
  padding: 120px 24px;
}

.contact-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
}

.contact-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 18px 0 16px;
}

.contact-inner .lead {
  font-size: 18px;
  line-height: 1.5;
  color: #d2d2d7;
  margin: 0 0 36px;
}

.contact-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.qr-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.qr-card img {
  width: 92px;
  height: 92px;
}

.contact-url {
  margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: #fff;
}

.contact-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 56px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand img {
  height: 46px;
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 13px;
  color: var(--fg-secondary);
  max-width: 260px;
  line-height: 1.6;
}

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a,
.footer-col li {
  font-size: 12.5px;
  color: var(--fg-secondary);
}

.footer-col a {
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--fg);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--fg-secondary);
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-logo { animation: none; }
  .hero-logo-halo::after { animation: none; }
}

/* ==========================================================================
   Game detail modal
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  color: #1d1d1f;
  border-radius: var(--radius-l);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease);
}

.modal-overlay.open .modal-panel {
  transform: none;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.modal-close svg {
  width: 15px;
  height: 15px;
}

.modal-media {
  aspect-ratio: 16 / 8;
  background: #000;
  overflow: hidden;
}

.modal-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: 30px 32px 36px;
}

.modal-body .cat-pill {
  position: static;
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #0071e3);
}

.modal-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  margin: 12px 0 4px;
}

.modal-body .desc {
  font-size: 15px;
  line-height: 1.6;
  color: #424245;
  margin: 0 0 24px;
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e5e5e7;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}

.modal-stats div {
  background: #f5f5f7;
  padding: 14px 8px;
  text-align: center;
}

.modal-stats strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: #1d1d1f;
  margin-bottom: 3px;
}

.modal-stats span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86868b;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .modal-stats { grid-template-columns: 1fr 1fr; }
  .modal-body { padding: 24px 22px 30px; }
}

/* ==========================================================================
   Language dropdown
   ========================================================================== */

.lang-dropdown {
  position: relative;
}

.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lang-dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lang-dropdown-btn .caret {
  transition: transform 0.2s ease;
}

.lang-dropdown.open .lang-dropdown-btn .caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 250;
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

.lang-dropdown.open .lang-menu {
  display: flex;
}

.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #1d1d1f;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

[dir="rtl"] .lang-menu button {
  text-align: right;
}

.lang-menu button:hover {
  background: #f5f5f7;
}

.lang-menu button.active {
  background: #e8f7ff;
  color: #0071e3;
  font-weight: 600;
}

.lang-menu .flag {
  font-size: 16px;
}

@media (max-width: 980px) {
  .lang-dropdown { display: none; }
}

/* Six nav items rather than four since the advantages and system sections
   arrived. Between the 980px drawer breakpoint and the 1180px wrap width they
   only fit at a tighter gap. */
@media (max-width: 1120px) {
  .nav-links { gap: 22px; }
}

.mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}

.mobile-lang-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}

.mobile-lang-grid button .flag {
  font-size: 18px;
}

.mobile-lang-grid button.active {
  background: rgba(61, 214, 255, 0.16);
  color: var(--accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .flow-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .game-overview { grid-template-columns: repeat(4, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .editions-row { grid-template-columns: 1fr; }
  .edition-card img { aspect-ratio: 16 / 9; }
  .occasion-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .section-pad { padding: 96px 0; }
  .section-head { margin-bottom: 44px; }
  .hero { padding-top: 132px; min-height: auto; }
  .quick-grid { grid-template-columns: 1fr; }
  .flow-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .hero-ctas .btn, .contact-actions .btn { width: 100%; }
  .hero-ctas, .contact-actions { flex-direction: column; }
  .nav-cta .btn span.long { display: none; }
  .game-overview { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .spec-grid { grid-template-columns: 1fr; }
  .playlist-grid { grid-template-columns: 1fr; }
  .occasion-grid { grid-template-columns: repeat(2, 1fr); }
  /* Photo above copy: at this width a side-by-side split leaves the image too
     narrow to read what is actually on the wall or the kiosk screen. */
  .optional-panel { grid-template-columns: 1fr; }
  .adv-card { grid-template-columns: 52px 1fr; column-gap: 16px; padding: 22px 20px 24px; }
  .adv-card .adv-icon img { width: 48px; height: 48px; }
}

/* mobile nav drawer */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}

.mobile-nav.open {
  transform: translateY(0);
}

.mobile-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 24px;
  color: #f5f5f7;
}

.mobile-nav .btn {
  margin-top: 8px;
}

/* ==========================================================================
   Impressum / legal page
   ========================================================================== */

.legal-hero {
  padding: 140px 0 32px;
}

.legal-hero .eyebrow { margin-bottom: 14px; }

.legal-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 14px;
}

/* ==========================================================================
   Standalone rules page (rules/index.html)
   ========================================================================== */

/* One column width for the whole page. The hero used to sit in the default
   1180px wrap while the card grid was capped at 980px, so the headline began
   a hundred pixels to the left of the first card. Setting it on .wrap puts
   the wordmark, the headline, the cards and the footer on one edge. */
.rules-page .wrap {
  max-width: 980px;
}

/* The legal pages pad 140px to clear the marketing site's fixed header. This
   page's header scrolls with the content, so that padding was just a band of
   empty screen above the headline on the one page people open on a phone. */
.rules-page .legal-hero {
  padding-top: 44px;
}

/* Players reach this by scanning a code on the floor, usually one-handed and
   mid-session, so the page carries only the wordmark and the language choice.
   The marketing site's header would put a sales call to action in front of
   someone who is already standing on the product. */
.rules-header {
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
}

.rules-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.rules-logo {
  height: 40px;
  width: auto;
}

.rules-footer {
  padding: 28px 0 34px;
  border-top: 1px solid var(--divider);
  font-size: 12.5px;
  color: var(--fg-secondary);
}

.rules-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
}

/* Impressum and privacy have to be reachable from every published page under
   German law, so these two stay even on a page stripped of everything else. */
.rules-footer a {
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--divider-strong);
}

.rules-footer a:hover {
  color: var(--fg);
}

.rules-footer span + span {
  display: flex;
  gap: 18px;
}

/* The rules page's language menu: a native select, which opens the system
   picker on a phone. Twelve languages as buttons did not fit beside the logo
   even on a desktop; six already overflowed a phone. */
.rules-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--fg-secondary);
}

.rules-lang svg {
  position: absolute;
  inset-inline-start: 14px;
  pointer-events: none;
}

.rules-lang select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  padding-block: 8px;
  padding-inline: 40px 36px;
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23c2c2ca' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right 16px center;
  color: var(--fg);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

[dir="rtl"] .rules-lang select {
  background-position: left 16px center;
}

.rules-lang select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rules-lang option {
  background: #14141f;
  color: var(--fg);
}

.legal-content {
  max-width: 760px;
}

.legal-lang {
  display: none;
}

.legal-lang.active {
  display: block;
}

.legal-block {
  margin-bottom: 36px;
}

.legal-block h2 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}

.legal-block p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--fg-secondary);
  margin: 0 0 10px;
}

.legal-block a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Rules page (rules/index.html) — rainbow-neon treatment, tokens shared
   verbatim with pixel_kiosk's static/style.css.
   ========================================================================== */

.rules-title {
  color: var(--fg); /* fallback if background-clip: text fails */
  background: var(--rainbow-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.rules-card {
  position: relative;
  padding: 26px 26px 22px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 2px solid var(--accent, var(--sky));
  box-shadow:
    0 18px 40px -16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 26px -4px var(--accent, var(--sky));
}

/* The drawn badge names the game far better than a line of type does, and it
   is what a player has just seen on the floor and on the wall poster. The
   heading stays in the markup for the outline, the anchor links and anyone
   listening rather than looking. */
.rules-badge {
  display: block;
  width: 100%;
  max-width: 210px;
  height: 78px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 14px;
}

/* Right to left, the badge lines up with the text on the right. */
[dir="rtl"] .rules-badge {
  object-position: right center;
}

/* Kept for the three games with no badge art -- and, as .sr-only, for the
   seven that have it, so the page still has a heading per game for the
   document outline, the #anchor links and a screen reader. */
.rules-card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--accent, var(--sky));
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--sky)) 65%, transparent);
  /* Same height as a badge, so a titled card and a badged one start their
     copy on the same line across a row of the grid. */
  display: flex;
  align-items: center;
  min-height: 78px;
  margin: 0 0 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Poster headline: the one-line "what this game is" from the printed
   SPIELREGELN poster, sitting above the numbered steps on each card. */
.rules-lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--fg);
}

/* Tile icons instead of numbers. The colour is the point: it is the same
   vocabulary the intro video and the printed poster use, so "green tile" is
   shown rather than described. Numbering carried no meaning here -- the steps
   are not a sequence, they are things that are true at once. */
.rules-card ol {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-card ol li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rules-card .ri {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.rules-score {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg);
  font-weight: 500;
}

@keyframes rules-ring-spin {
  to { filter: hue-rotate(360deg); }
}

@media (max-width: 720px) {
  .rules-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RTL adjustments (Arabic)
   ========================================================================== */

[dir="rtl"] .card-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .flow-step,
[dir="rtl"] .legal-block {
  text-align: right;
}

/* ==========================================================================
   Script-specific font fallbacks
   ========================================================================== */

:root[lang="zh"] {
  --font-display: 'Noto Sans SC', sans-serif;
  --font-head: 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', sans-serif;
}

:root[lang="ar"] {
  --font-display: 'Cairo', sans-serif;
  --font-head: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}