/* ==========================================================================
   STEEZERS – Menü-Styles
   Hauptmenü als Magazin-Cover: Ausgabe-Zeile, Masthead, Cover-Zeilen,
   Lift-Ticket als Sticker. Untermenüs, Pause und Ladebildschirm im selben
   Poster-Stil. Animiert werden nur transform/opacity.
   ========================================================================== */

:root {
  /* Palette – nur diese Farben verwenden */
  --snow: #F2EFE8;
  --ink: #111111;
  --signal: #FF4F1F;
  --ice: #9CC7D9;
  --pine: #1F3B2E;

  --f-display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --line: 2px;
  --info-h: 58px;
  --gutter: clamp(16px, 2.6vw, 44px);

  --st: min(6vw, 11vh);      /* Titel der Untermenüs */
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--snow);
  color: var(--ink);
}

body {
  font-family: var(--f-mono);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Schnee-Kontur: Text bleibt vor jedem Bildteil lesbar, ohne Fläche */
.knock {
  paint-order: stroke fill;
  -webkit-text-stroke: 6px var(--snow);
}

/* --------------------------------------------------------------------------
   Ebenen: Szene, Blenden, UI, Wipe, Korn
   -------------------------------------------------------------------------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-fade {
  position: fixed;
  inset: 0;
  background: var(--scene-fog, var(--snow));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Menü: Hintergrund unscharf (leicht vergrössert, damit die Ränder nicht ausfransen).
   Pause: Spiel entsättigt und leicht unscharf. */
#scene.is-blurred { filter: blur(3px) saturate(1.05); transform: scale(1.02); }
#scene.is-paused { filter: saturate(.18) brightness(1.06) blur(2px); }

.ui {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.no-webgl #scene { display: none; }

/* --------------------------------------------------------------------------
   Screens
   -------------------------------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0 0 var(--info-h) 0;
}

.screen[hidden] { display: none; }

.ui:not(.is-ready) .screen,
.ui:not(.is-ready) .dock { opacity: 0; }

/* Im Spiel: Menü weg, nur HUD. In der Pause: Pausenscreen, kein HUD */
.ui.is-playing .screen,
.ui.is-playing .dock { display: none; }
.ui.is-paused .screen:not([hidden]) { display: block; }
.ui.is-paused .hud { display: none; }
.ui.is-paused .dock { display: none; }

/* --------------------------------------------------------------------------
   Home: Logo oben links
   -------------------------------------------------------------------------- */

.brand {
  position: absolute;
  left: var(--gutter);
  top: var(--gutter);
  display: flex;
  align-items: flex-end;
  gap: 14px;
  z-index: 3;
}

.brand__logo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: .9;
  letter-spacing: .01em;
}

.brand__clip {
  display: inline-flex;
  overflow: hidden;
  padding-top: .14em;  /* Anton ist oben hoch: genug Luft, sonst wird das Logo abgeschnitten */
  padding-bottom: .02em;
}

.wordmark__l { display: inline-block; }

.brand__meta {
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  opacity: .75;
}

/* --------------------------------------------------------------------------
   Home: Menü links unten
   -------------------------------------------------------------------------- */

.menu {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) * 1.1);
  width: min(400px, 36vw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
}

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 16px;
  outline: none;
  transition: transform .25s var(--ease-out);
}

/* Fokus: schlichte helle Fläche mit Signal-Kante links */
.menu__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--snow);
  border-left: 4px solid var(--signal);
  opacity: 0;
  transform: scaleX(.96);
  transform-origin: left center;
  transition: opacity .2s linear, transform .25s var(--ease-out);
  z-index: -1;
}

.menu__item:focus { transform: translateX(6px); }
.menu__item:focus::before { opacity: 1; transform: none; }

.menu__num {
  min-width: 2.4ch;
  font-size: 10px;
  font-weight: 600;
  opacity: .6;
}

.menu__item:focus .menu__num { color: var(--signal); opacity: 1; }

.menu__label {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Play: Hauptaktion, etwas grösser, immer als Fläche sichtbar */
.menu__item--play {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 8px;
  padding: 12px 16px 12px 18px;
  background: var(--ink);
  color: var(--snow);
}

.menu__item--play::before { background: var(--signal); border-left-color: var(--ink); }
.menu__item--play:focus { color: var(--ink); }

.menu__item--play .menu__label {
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
}

.menu__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
}

.menu__item--play .keycap { color: var(--ink); }

.menu__item.is-locked { cursor: default; }
.menu__item.is-locked .menu__label { opacity: .45; }

.keycap {
  display: inline-block;
  padding: 2px 6px 1px;
  border: 1px solid var(--edge);
  border-bottom-width: 3px;
  background: var(--snow);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tag {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--edge);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.menu__item:focus .tag { background: var(--ice); }

.is-denied { animation: deny .32s var(--ease-out); }

@keyframes deny {
  0%   { transform: translateX(6px); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(10px); }
  75%  { transform: translateX(0); }
  100% { transform: translateX(6px); }
}

.touch-note {
  display: none;
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--gutter) + 64px);
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--signal);
  background: var(--snow);
  font-size: 10px;
  line-height: 1.6;
  z-index: 3;
}

.touch-note strong { display: block; font-weight: 600; }
/* Touch-Geräte haben jetzt eine eigene Steuerung (touch.js): kein Hinweis mehr */
.touch-note.is-flash { animation: flash .5s steps(2) 2; }

@keyframes flash { 50% { opacity: .2; } }

/* --------------------------------------------------------------------------
   Home: Hub mit Karten (Sticker-Look: dicke Kontur, harter Schatten,
   schräge Titel). Park-Karte in den Farben der gewählten Stimmung.
   -------------------------------------------------------------------------- */

:root {
  --mood-a: #FF8A3D;
  --mood-b: #7A5BC7;
  --mood-c: #FFD2A1;
  --mood-ink: #2A1A3A;
  --radius: 14px;
}

/* Startseite leicht in den Farben des gewählten Parks tönen */
.screen--main::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--mood-b) 0%, transparent 42%),
    linear-gradient(0deg, var(--mood-a) 0%, transparent 30%);
  opacity: .22;
  pointer-events: none;
}

.hub {
  width: min(470px, 38vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--snow);
  box-shadow: var(--lift);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

.card::before { display: none; }
.card:focus { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.card:active { transform: translate(2px, 2px); box-shadow: var(--lift-sm); }

.card__title {
  position: relative;
  align-self: flex-start;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: .95;
  text-transform: uppercase;
  transform: none; font-style: italic;
  transform-origin: left bottom;
}

.card__meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
}

.card__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: auto;
  font-size: 10px;
  font-weight: 600;
}

.card__chip {
  padding: 3px 7px 2px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--snow);
}

.card__badge {
  position: absolute;
  top: 10px;
  right: -4px;
  padding: 4px 12px 3px 9px;
  background: var(--signal);
  color: var(--snow);
  border: 1px solid var(--edge);
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: none;
}

.card__icon {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 38px;
  height: 38px;
}

.card__icon svg { width: 100%; height: 100%; fill: currentColor; }
.card__icon .card__cut { fill: none; stroke: var(--mood-c); stroke-width: 3; stroke-linecap: round; }

/* Park: Stimmung als kleine Landschaft */
.card--park {
  grid-column: 1 / -1;
  min-height: 150px;
  color: var(--snow);
  background: linear-gradient(170deg, var(--mood-b) 0%, var(--mood-a) 100%);
}

.card--park .card__title {
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  text-shadow: 0 3px 14px rgba(8, 14, 30, .3);
}

.card__scene { position: absolute; inset: 0; }
.card__scene svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.card__sun { fill: var(--mood-c); opacity: .9; }
.card__far { fill: var(--mood-ink); opacity: .35; }
.card__near { fill: var(--snow); opacity: .92; }
.card--park .card__meta { color: var(--mood-ink); }
.card__link { transition: transform .2s var(--ease-out); }
.card--park:focus .card__link { transform: translateX(4px); }

/* Locker: Pine mit Diagonalstreifen */
.card--locker {
  color: var(--snow);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 20px),
    var(--pine);
}

/* Controls: Eisblau */
.card--controls {
  color: var(--ink);
  background: var(--mood-c); /* heller Ton des gewählten Parks */
}

.card--controls .card__cut { stroke: var(--mood-c); }
.card--controls .card__icon { color: var(--ink); }

/* Drop in: die Hauptaktion */
.card--ride {
  grid-column: 1 / -1;
  min-height: 96px;
  padding: 16px 20px;
  color: var(--ink);
  background: var(--signal);
}

.card--ride .card__title { font-size: clamp(2.6rem, 4vw, 3.6rem); }
.card--ride .card__meta { justify-content: flex-start; }
.card--ride .keycap { margin-left: 4px; }

.card__arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  font-family: var(--f-display);
  font-size: 3.4rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .22s var(--ease-out);
}

.card--ride:focus .card__arrow { transform: translate(5px, calc(-50% - 5px)); }

/* Kleine Chips: Settings, bald verfügbare Modi */
.hub__chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--snow);
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: transform .2s var(--ease-out), background .2s linear;
}

.chip::before { display: none; }
.chip:focus { transform: translateY(-2px); background: var(--ice); }
.chip .tag { margin-left: 0; padding: 1px 5px; font-size: 8px; }
.chip.is-locked { color: rgba(17, 17, 17, .5); }

/* --------------------------------------------------------------------------
   Parkauswahl: gezeichnete Karte, Schilder als kleine Lift-Tickets,
   Infotafel unten rechts
   -------------------------------------------------------------------------- */

.screen--parks {
  overflow: clip;
  background:
    radial-gradient(circle at 85% 12%, var(--mood-c) 0, transparent 34%),
    linear-gradient(160deg, var(--mood-ink) 0%, var(--mood-b) 55%, var(--mood-a) 120%);
}
.screen--parks::before {
  content: 'PARKS';
  position: absolute;
  right: -2vw;
  bottom: -6vh;
  font-family: var(--f-display);
  font-size: 26vw;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .14);
  transform: none; font-style: italic;
  pointer-events: none;
}

.map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Himmel hinter dem 3D-Berg */
  background: linear-gradient(180deg, #C4CEF0 0%, #E4E2F2 55%, #F2EFE8 100%);
}
.map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mt-far { fill: #C3C6E4; }
.mt-snow { fill: #FAF8F3; }
.mt-shade { fill: #DCDDF0; }
.mt-rock { fill: #8E93B8; }
.mt-valley { fill: #F2EFE8; }
.mt-tree { fill: var(--pine); }
.mt-cap { fill: #FAF8F3; }
.mt-ink { fill: var(--ink); }
.mt-roof { fill: var(--signal); }
.mt-star { fill: #FFF6E0; }
.mt-cable { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 6; fill: none; }
.mt-glow { opacity: .55; transition: opacity .4s linear; }
.mt-glow.is-on { opacity: 1; }
.mt-piste { fill: none; stroke: #FFFFFF; stroke-width: 44; stroke-linecap: round; opacity: .9; }
.mt-trail { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 16; opacity: .55; transition: opacity .3s linear; }
.mt-line.is-on .mt-trail { opacity: 1; stroke-width: 9; animation: trail 1.2s linear infinite; }
.mt-dot { stroke: var(--ink); stroke-width: 3; }

@keyframes trail { to { stroke-dashoffset: -34; } }

.map__head {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--gutter) * .8);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.map__brand {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
}

.map__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  text-transform: uppercase;
  transform: none; font-style: italic;
  color: var(--signal);
  -webkit-text-stroke: 1px var(--ink);
}

/* Schild einer Line: kleines Ticket, schräg */
.pin {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 12px;
  min-width: 210px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--snow);
  box-shadow: var(--lift);
  outline: none;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s linear;
}

.pin:focus,
.pin.is-on { transform: translate(-50%, -50%) rotate(0deg) scale(1.08); box-shadow: var(--lift-hi); }
.pin.is-on { z-index: 3; background: var(--pin-a); color: var(--snow); }
/* nicht gewählte Schilder kompakter: nur Nummer und Name */
.pin:not(.is-on) { min-width: 0; padding: 6px 14px 6px 6px; gap: 0 10px; }
.pin:not(.is-on) .pin__num { width: 40px; height: 40px; font-size: 1.3rem; }
.pin:not(.is-on) .pin__name { font-size: 1.25rem; }
.pin:not(.is-on) .pin__mood { display: none; }

.pin__num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--pin-a);
  color: var(--snow);
  font-family: var(--f-display);
  font-size: 1.7rem;
  line-height: 1;
}

.pin.is-on .pin__num { background: var(--snow); color: var(--ink); }

.pin__name {
  font-family: var(--f-display);
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  transform: none; font-style: italic;
}

.pin__mood { font-size: 10px; font-weight: 600; opacity: .8; }

.map__panel {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 3;
  width: min(420px, 34vw);
  padding: 20px 22px 18px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}

.map__panel-top { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; }

.map__name {
  margin: 10px 0 6px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: .95;
  text-transform: uppercase;
  transform: none; font-style: italic;
  transform-origin: left bottom;
  color: var(--mood-a);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}

.map__desc { margin: 0 0 14px; font-size: 12px; line-height: 1.5; }

.map__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin: 0 0 16px;
  padding: 12px 0;
  border-top: 2px dashed var(--ink);
  border-bottom: 2px dashed var(--ink);
}

.map__stats dt { font-size: 9px; opacity: .6; }
.map__stats dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }

.map__actions { display: flex; align-items: center; gap: 12px; }
.map__actions .card--ride { flex: 1; }
.card--small { min-height: 74px; padding: 12px 16px; }
.card--small .card__title { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.card--small .card__arrow { font-size: 2.4rem; }

.is-entering .pin { animation: pinIn .45s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 80ms); }
.is-entering .map__panel { animation: ticketIn .5s var(--ease-out) both .2s; }

@keyframes pinIn { from { opacity: 0; transform: translate(-50%, -30%) rotate(-8deg); } }

/* --------------------------------------------------------------------------
   Home: Avatar + Lift-Ticket unten rechts
   -------------------------------------------------------------------------- */

.showcase {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) * 1.1);
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.5vw, 24px);
  z-index: 3;
}

.avatar {
  position: relative;
  width: clamp(280px, 32vw, 560px);
  height: clamp(380px, 78vh, 820px);
}

.avatar canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% - 34px);
  display: block;
  cursor: grab;
}

.avatar canvas:active { cursor: grabbing; }

.avatar__plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--ink);
  color: var(--snow);
  transform: translateX(-50%);
  white-space: nowrap;
}

.avatar__num { font-size: 9px; opacity: .7; }

.avatar__name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ticket {
  position: relative;
  display: flex;
  width: clamp(240px, 19vw, 320px);
  margin-bottom: 8px;
  background: var(--snow);
  border: 1px solid var(--edge);
  transform: none;
}

.ticket__stub {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 6px;
  background: var(--ink);
  color: var(--snow);
  font-size: 8px;
  letter-spacing: .22em;
  text-align: center;
}

.ticket__body {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 9px 12px 10px 15px;
}

.ticket__body::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  border-left: 1.5px dashed var(--ink);
}

.ticket__body::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: var(--signal);
}

.ticket__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 8px;
}

.ticket__record {
  margin: 0 0 6px;
  padding: 4px 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  font-size: 9px;
}

.ticket__record b { font-weight: 600; font-size: 11px; }

.ticket__big {
  font-family: var(--f-display);
  font-size: 4.2rem;
  line-height: 1;
  margin: 2px 0 6px;
}

.ticket__barcode svg {
  display: block;
  width: calc(100% - 20px);
  height: 30px;
}

.skip-hint {
  position: absolute;
  right: var(--gutter);
  top: var(--gutter);
  margin: 0;
  font-size: 10px;
  opacity: 0;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Untere Leiste: Navigation + Pistenbericht
   -------------------------------------------------------------------------- */

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--info-h);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--ink);
  color: var(--snow);
  z-index: 20;
}

.dock__nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.dock__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--snow);
  outline: none;
}

/* Aktiver Tab: Signal-Linie oben */
.dock__tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 4px;
  background: var(--signal);
  transform: scaleX(0);
  transition: transform .25s var(--ease-out);
}

.dock__tab.is-current::after,
.dock__tab:hover::after,
.dock__tab:focus-visible::after { transform: none; }

.dock__tab:not(.is-current):hover::after,
.dock__tab:not(.is-current):focus-visible::after { background: var(--ice); }

.dock__tab.is-locked { color: rgba(242, 239, 232, .5); cursor: default; }

.dock__soon {
  padding: 1px 5px;
  border: 1px solid currentColor;
  font-size: 8px;
}

.dock__more {
  align-self: center;
  margin-left: 10px;
  font-size: 9px;
  opacity: .45;
}

.dock__clock {
  align-self: center;
  margin-left: 18px;
  font-size: 11px;
  opacity: .7;
}

/* Account ganz rechts: rundes Avatar-Zeichen + Name */
.dock__account { margin-left: auto; }

.dock__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--snow);
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}

.dock__account.is-in .dock__avatar { background: var(--mood-a); color: var(--snow); }

/* --------------------------------------------------------------------------
   Freunde: Suche + Liste links (Sticker-Karte), Vergleich + Party rechts
   -------------------------------------------------------------------------- */

.screen--friends {
  overflow: clip;
  background:
    radial-gradient(circle at 22% 78%, var(--mood-c) 0, transparent 36%),
    linear-gradient(225deg, var(--mood-ink) 0%, var(--mood-b) 48%, var(--mood-a) 100%);
}

.screen--friends::before {
  content: 'CREW';
  position: absolute;
  right: -2vw;
  bottom: -7vh;
  font-family: var(--f-display);
  font-size: 30vw;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .22);
  transform: none; font-style: italic;
  pointer-events: none;
}

.fr {
  position: absolute;
  inset: 0 0 var(--dock-h, 56px);
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 460px);
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding: var(--gutter) calc(var(--gutter) * 1.5);
}

.fr__left {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
  padding: 22px 24px 18px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}

.fr__title { margin-bottom: 14px; }
.fr__body { display: flex; flex-direction: column; min-height: 0; }
.fr__body[hidden], .fr__gate[hidden] { display: none; }
.fr__gate .card { margin-top: 6px; }

.fr__search { margin-bottom: 6px; }

.fr__results {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.fr__results:empty { display: none; }

.fr__seg { align-self: flex-start; margin: 6px 0 10px; }
.fr__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--signal);
  color: var(--snow);
  font-size: 10px;
  vertical-align: 2px;
}

.fr__count.is-zero { background: rgba(17, 17, 17, .18); color: var(--ink); }

.fr__list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 42vh;
  margin: 0;
  padding: 2px 6px 2px 2px;
  overflow-y: auto;
  list-style: none;
}

.fr__empty {
  padding: 18px 4px;
  font-size: 12px;
  line-height: 1.5;
  opacity: .7;
}

/* Eine Zeile: Avatar, Name, Kennzahl, Knöpfe */
.fr-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #FFFFFF;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}

.fr-row.is-active,
.fr-row:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.fr-row__name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-row__meta { display: block; margin-top: 3px; font-size: 9px; opacity: .65; }
/* Online-Status bei Freunden: grüner Punkt, sonst "Last seen …" */
.fr-status { white-space: nowrap; }
.fr-status.is-on { color: #3ddc84; font-weight: 700; }
.fr-status.is-on::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; vertical-align: 1px; }
.fr-row__btns { display: flex; gap: 6px; }

.fr-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--av, var(--mood-a));
  color: var(--snow);
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18);
}

.chip--small { padding: 6px 10px; font-size: 13px; }
.chip--ok { background: var(--ink); color: var(--snow); }

/* Vergleich: Ticket mit zwei Fahrern und Balken je Wert */
.fr__right { display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 90px); }

.vs {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
  overflow: hidden;
  transform: none;
}

.vs__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--snow);
}

.vs__rider { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vs__rider--them { flex-direction: row-reverse; text-align: right; }
.vs__name {
  font-family: var(--f-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs__mid {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--signal);
  font-size: 11px;
  font-weight: 700;
}

.vs__rows { margin: 0; padding: 10px 16px 4px; }

.vs-row { margin-bottom: 6px; }
.vs-row dt {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
}

.vs-row dt span:nth-child(2) { opacity: .55; }
.vs-row dd { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 3px 0 0; }

.vs-bar {
  position: relative;
  height: 13px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: #E6E2D8;
  overflow: hidden;
}

.vs-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  background: var(--mood-a);
  transition: width .5s var(--ease-out);
}

.vs-bar--me i { right: 0; }
.vs-bar--them i { left: 0; background: var(--mood-b); }
.vs-bar.is-lead b::after { content: ' ▲'; color: var(--signal); }

.vs-bar b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 3px #FFFFFF;
}

.vs-bar--me b { left: 5px; }
.vs-bar--them b { right: 5px; }

.vs__foot {
  padding: 10px 16px 12px;
  border-top: 2px dashed var(--ink);
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .fr { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

@media (max-width: 760px) and (orientation: portrait) {
  .fr { grid-template-columns: 1fr; align-items: start; overflow-y: auto; padding-bottom: 80px; }
  .fr__left { max-height: none; }
  .fr__list { max-height: none; }
  .vs { transform: none; }
  /* Vergleich: Avatar über dem Namen, damit lange Namen ganz lesbar bleiben */
  .vs__head { gap: 6px; padding: 12px 10px; }
  .vs__rider,
  .vs__rider--them { flex-direction: column; gap: 4px; text-align: center; }
  .vs__name { max-width: 100%; font-size: 1rem; }
  .vs__head .fr-avatar { width: 34px; height: 34px; font-size: 1.1rem; }
  /* Freunde-/Party-Zeilen: Knöpfe unter den Namen, damit der Name Platz hat */
  .fr-row,
  .pt-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .fr-row__btns { grid-column: 2; justify-content: flex-start; }
  .fr-row__btns:empty { display: none; }
}

/* --------------------------------------------------------------------------
   Party: Steuerung links (Sticker-Karte), Lobby mit allen Fahrern rechts
   -------------------------------------------------------------------------- */

.screen--party {
  overflow: clip;
  background:
    radial-gradient(ellipse at 66% 72%, var(--mood-c) 0, transparent 42%),
    linear-gradient(200deg, var(--mood-ink) 0%, var(--mood-b) 50%, var(--mood-a) 100%);
}

.screen--party::before {
  content: 'PARTY';
  position: absolute;
  left: -1vw;
  bottom: -6vh;
  font-family: var(--f-display);
  font-size: 26vw;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .18);
  transform: none; font-style: italic;
  pointer-events: none;
}

.pt {
  position: absolute;
  inset: 0 0 var(--dock-h, 56px);
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: var(--gutter) calc(var(--gutter) * 1.5);
}

.pt__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 110px);
  padding: 22px 24px 16px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}

.pt__title { margin-bottom: 12px; overflow-wrap: anywhere; }
.pt__top { display: flex; align-items: center; gap: 8px; }
.pt__beta {
  padding: 2px 8px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--mood-c, #F3E39B);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: none;
}
.pt__body { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 2px 6px 4px 2px; margin: 0 -6px 0 -2px; }
.pt__body > .card { flex: none; margin: 0; }
.pt__go .card__title { font-size: clamp(2.2rem, 3.4vw, 3rem); }

.pt-sec { display: flex; flex-direction: column; gap: 8px; }
.pt-sec__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pt-sec__hint { margin: -4px 0 0; font-size: 10px; line-height: 1.45; opacity: .65; }
.pt__seg { align-self: flex-start; margin: 0; }

.pt-parks { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }

.pt-park {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #FFFFFF;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}

.pt-park::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pk, var(--mood-a)); }
.pt-park:focus,
.pt-park:hover { transform: translateY(-2px); box-shadow: var(--lift-sm); }
.pt-park.is-on { background: var(--ink); color: var(--snow); }
.pt-park__name { font-family: var(--f-display); font-size: 1.05rem; line-height: 1; text-transform: uppercase; }
.pt-park__meta { font-size: 8px; opacity: .65; }
/* Gewählter Park: Karte mit Farbband der Stimmung und "Change" */
.pt-sel {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #FFFFFF;
}
.pt-sel__band { align-self: stretch; margin: -10px 0; background: linear-gradient(180deg, var(--pk), var(--pk2)); }
.pt-sel__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-sel__kind { font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sel__name { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sel__meta { font-size: 9px; opacity: .7; }

/* Park-Auswahl als Popup über der Party-Seite */
.pt-picker {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(17, 17, 17, .45);
  backdrop-filter: blur(3px);
}
.pt-picker[hidden] { display: none; }
.pt-picker__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, 100%);
  max-height: calc(100dvh - 140px);
  padding: 18px 20px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}
.pt-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-picker__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--signal); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.pt-picker .pt__seg { align-self: flex-start; margin: 0; }
.pt-picker__search { width: 100%; }
.pt-picker__search[hidden] { display: none; }
.pt-picker__list { flex: 1 1 auto; min-height: 120px; max-height: none; overflow-y: auto; }
.pt-pick.is-active { box-shadow: 0 0 0 2px var(--signal), var(--lift); }

.pt__list { min-height: 0; max-height: 30vh; }
.pt__list--short { max-height: 22vh; }
.pt-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.pt-row .fr-avatar { width: 40px; height: 40px; font-size: 1.25rem; }

.pt__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.pt__access { font-size: 9px; opacity: .6; }
.pt__end { background: var(--signal); }
.pt__full { background: #E6E2D8; font-size: 11px; opacity: .7; }

.pt__right {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  height: calc(100dvh - 110px);
  min-width: 0;
}

.lineup { position: relative; min-height: 0; }
.lineup canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lineup__tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lineup__tags.is-hidden { display: none; }

.lineup__tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 9px 5px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--snow);
  box-shadow: var(--lift-sm);
  white-space: nowrap;
  will-change: transform;
}

.lineup__tag b { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; line-height: 1; text-transform: uppercase; }
.lineup__tag span { font-size: 8px; opacity: .7; }
.lineup__tag.is-me { background: var(--signal); }
.lineup__tag { z-index: 2; }
.lineup__tag.is-back { z-index: 1; }
.lineup__tag.is-small { padding: 3px 7px 4px; border-width: 1.5px; box-shadow: var(--lift-sm); }
.lineup__tag.is-small b { font-size: .85rem; }
.lineup__tag b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.lineup__tag.is-small b { max-width: 92px; }
.lineup__tag.is-small span { font-size: 7px; }
.lineup__tag.is-riding span { opacity: 1; color: var(--mood-a); }
.lineup__tag.is-me.is-riding span { color: var(--ink); }

/* Live-Board (Lobby und HUD teilen sich die Liste) */
.pt__board {
  justify-self: end;
  width: min(380px, 100%);
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}

.pt__board[hidden] { display: none; }

.pboard__head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.pboard__list { margin: 0; padding: 0; list-style: none; }
.pboard__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed rgba(17, 17, 17, .25); font-size: 12px; }
.pboard__list li:first-child { border-top: 0; }
.pboard__list li.is-me .pboard__name { color: var(--signal); }
.pboard__list b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.pboard__rank { font-weight: 600; opacity: .55; }
.pboard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pboard__name i { margin-left: 4px; padding: 0 4px; border-radius: 4px; background: var(--ink); color: var(--snow); font-style: normal; font-size: 8px; vertical-align: 1px; }
.pboard__name small { display: block; font-size: 8px; font-weight: 500; opacity: .6; }
.pboard__list--big li { padding: 8px 0; font-size: 14px; }
.pboard__list--big b { font-size: 1.5rem; }
.pboard__list--big li.is-top b { color: var(--signal); }

.dock__live {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--ink);
  font-size: 8px;
  animation: livePulse 1.6s ease-in-out infinite;
}

.dock__live[hidden] { display: none; }

@keyframes livePulse { 50% { opacity: .55; } }

@media (max-width: 1100px) {
  .pt { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

@media (max-width: 760px) and (orientation: portrait) {
  .pt { grid-template-columns: 1fr; align-items: start; overflow-y: auto; padding-bottom: 80px; }
  .pt__left { max-height: none; }
  .pt__right { height: 70vh; }
  .pt__board { justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   Account: Formular links (Sticker-Karte), Rider Pass rechts
   -------------------------------------------------------------------------- */

.screen--account {
  overflow: clip;
  background:
    radial-gradient(circle at 78% 30%, var(--mood-c) 0, transparent 38%),
    linear-gradient(135deg, var(--mood-ink) 0%, var(--mood-b) 45%, var(--mood-a) 100%);
}

/* Riesiger, angeschnittener Schriftzug im Hintergrund */
.screen--account::before {
  content: 'RIDER PASS';
  position: absolute;
  left: -2vw;
  bottom: -6vh;
  font-family: var(--f-display);
  font-size: 22vw;
  line-height: .8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .22);
  transform: none; font-style: italic;
  pointer-events: none;
}

.acc {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 90px);
  padding: var(--gutter) calc(var(--gutter) * 1.5);
}

.acc__left {
  position: relative;
  padding: 24px 26px 22px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}

.acc__eyebrow {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--snow);
  font-size: 10px;
}

.acc__title {
  margin: 10px 0 6px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: .92;
  text-transform: uppercase;
  transform: none; font-style: italic;
  transform-origin: left bottom;
  color: var(--signal);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}

.acc__lead { margin: 0 0 16px; font-size: 12px; line-height: 1.55; }

.seg {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: #E6E2D8;
}

.seg__btn {
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .2s linear, color .2s linear;
}

.seg__btn::before { display: none; }
.seg__btn:focus { transform: none; outline: 2px solid var(--signal); outline-offset: 1px; }
.seg__btn.is-on { background: var(--ink); color: var(--snow); }

.acc__form { display: flex; flex-direction: column; gap: 10px; }
.acc__form [data-only="signup"][hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 9px; font-weight: 600; }

.field__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}

.field__input::placeholder { color: rgba(17, 17, 17, .35); }
.field__input:focus { box-shadow: 0 0 0 2px var(--signal), var(--lift); transform: translateY(-2px); }

.field__hint { font-size: 9px; opacity: .6; }
.field__hint.is-ok { color: #1E8F55; opacity: 1; }
.field__hint.is-bad { color: var(--signal); opacity: 1; }

.acc__msg { min-height: 1.4em; margin: 2px 0 0; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: .02em; }
.acc__msg.is-bad { color: var(--signal); }
.acc__msg.is-ok { color: #1E8F55; }
.acc__submit { margin-top: 4px; }
.acc__submit.is-busy { opacity: .6; pointer-events: none; }

.acc__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 14px 0;
  border-top: 2px dashed var(--ink);
  border-bottom: 2px dashed var(--ink);
}

.acc__stats dt { font-size: 9px; opacity: .6; }
.acc__stats dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; text-transform: none; }

.acc__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc__sync { font-size: 10px; font-weight: 600; }
.acc__sync::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #1E8F55; }

.acc__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* Rider Pass: grosses Ticket, schräg, folgt beim Tippen dem Namen */
.pass {
  position: relative;
  width: min(440px, 100%);
  border: 1px solid var(--edge);
  border-radius: 18px;
  overflow: hidden;
  background: var(--snow);
  box-shadow: var(--lift-hi);
  transform: none;
  transition: transform .4s var(--ease-out);
}

.pass:hover { transform: translateY(-4px); }

.pass__band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 24px),
    linear-gradient(120deg, var(--mood-b), var(--mood-a));
  color: var(--snow);
  border-bottom: 1px solid var(--edge);
}

.pass__brand {
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: var(--lift-sm);
}

.pass__kind { font-size: 10px; font-weight: 600; }

.pass__body { padding: 16px 20px 18px; }
.pass__label { font-size: 9px; opacity: .6; }

.pass__name {
  display: block;
  min-height: 1em;
  margin: 2px 0 14px;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  transform: none; font-style: italic;
  transform-origin: left bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pass__name.is-empty { color: rgba(17, 17, 17, .25); }

.pass__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 2px dashed var(--ink);
  font-size: 9px;
}

.pass__grid span { display: block; opacity: .6; }
.pass__grid b { font-size: 14px; }

.pass__xp {
  height: 12px;
  margin: 6px 0 4px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
  background: #E6E2D8;
}

.pass__xp-fill {
  display: block;
  height: 100%;
  width: 6%;
  background: var(--signal);
  transition: width .6s var(--ease-out);
}

.pass__xptext {
  margin-bottom: 10px;
  font-size: 9px;
  opacity: .65;
}

.pass__barcode { height: 34px; }
.pass__barcode svg { width: 100%; height: 100%; }

.pass__stamp {
  position: absolute;
  right: 18px;
  bottom: 12px;
  padding: 6px 12px;
  background: rgba(242, 239, 232, .75);
  border: 3px solid var(--signal);
  border-radius: 8px;
  color: var(--signal);
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: none;
  opacity: .85;
}

.pass.is-member .pass__stamp { border-color: #1E8F55; color: #1E8F55; }

.perks {
  display: grid;
  gap: 8px;
  width: min(440px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  font-weight: 600;
}

.perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: rgba(242, 239, 232, .9);
}

.perks b {
  min-width: 42px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--snow);
  text-align: center;
  font-size: 9px;
}

.perks li.is-on b { background: #1E8F55; }

.is-entering .acc__left { animation: panelIn .45s var(--ease-io) both; transform-origin: left center; }
.is-entering .pass { animation: ticketIn .6s var(--ease-out) both .15s; }
.is-entering .perks li { animation: slideIn .4s var(--ease-out) both; }
.is-entering .perks li:nth-child(2) { animation-delay: .3s; }
.is-entering .perks li:nth-child(3) { animation-delay: .36s; }
.is-entering .perks li:nth-child(4) { animation-delay: .42s; }
.is-entering .perks li:nth-child(5) { animation-delay: .48s; }

.fps {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--gutter) + 18px);
  padding: 3px 7px;
  background: var(--ink);
  color: var(--snow);
  font-size: 10px;
  z-index: 30;
}

.fps[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Untermenüs (ganzer Screen, Poster-Layout)
   -------------------------------------------------------------------------- */

.subtitle {
  position: absolute;
  left: -.03em;
  top: calc(var(--gutter) * .6);
  margin: 0;
  z-index: 3;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--st);
  line-height: .95;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  overflow: hidden;
  paint-order: stroke fill;
  -webkit-text-stroke: 8px var(--snow);
}

.subtitle__clip { display: inline-block; }

.panel {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--snow);
  border-top: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  z-index: 2;
}

.panel__foot {
  display: flex;
  gap: 22px;
  padding: 12px var(--gutter);
  border-top: 1px solid var(--edge);
  font-size: 10px;
}

.panel__foot b {
  font-weight: 600;
  padding: 1px 5px;
  border: 1px solid var(--edge);
  margin-right: 4px;
}

.panel--sub {
  top: calc(var(--gutter) * 1.4 + var(--st));
  width: min(820px, 56vw);
}

.panel--wide { width: min(1100px, 76vw); }
.panel--pause { width: min(560px, 44vw); }

.rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px var(--gutter) 12px;
  scrollbar-width: thin;
}

.rows--tail {
  flex: 0 0 auto;
  border-top: 1px solid var(--edge);
  padding-top: 4px;
  padding-bottom: 4px;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto 7ch;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  width: 100%;
  padding: clamp(6px, 1.2vh, 12px) 0;
  border-bottom: 1px solid var(--edge);
  outline: none;
  cursor: pointer;
  transition: transform .26s var(--ease-out);
}

.rows--tail .row { border-bottom: 0; }

.row::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--gutter));
  top: 18%;
  bottom: 18%;
  width: calc(var(--gutter) - 8px);
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .26s var(--ease-out);
}

.row:focus { transform: translateX(12px); }
.row:focus::before { transform: scaleX(1); }

.row__num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
}

.row:focus .row__num { color: var(--signal); }

.row__label {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, min(2vw, 3.8vh), 2rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.row__value {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

.row--action { grid-template-columns: 3ch 1fr; }

.row__sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  opacity: .65;
}
.row--minor .row__label { font-size: clamp(1rem, min(1.5vw, 3vh), 1.5rem); }
.panel--pause .row__label { font-size: clamp(1.6rem, min(2.8vw, 5vh), 2.6rem); }

.gauge { display: flex; gap: 3px; }

.gauge__cell {
  width: clamp(8px, .8vw, 12px);
  height: 22px;
  border: 1px solid var(--edge);
}

.gauge__cell.is-on { background: var(--ink); }
.row:focus .gauge__cell.is-last { background: var(--signal); border-color: var(--signal); }

.choice {
  display: flex;
  border: 1px solid var(--edge);
}

.choice__opt {
  padding: 5px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.choice__opt + .choice__opt { border-left: 1px solid var(--edge); }
.choice__opt.is-on { background: var(--ink); color: var(--snow); }
.row:focus .choice__opt.is-on { background: var(--signal); color: var(--ink); }

/* --------------------------------------------------------------------------
   Steuerung – zwei Infotafeln
   -------------------------------------------------------------------------- */

.boards {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
  outline: none;
  scrollbar-width: thin;
}

.board { padding: 14px var(--gutter) 18px; }
.board + .board { border-left: 1.5px dashed var(--ink); }

.board__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px 4px;
  background: var(--ink);
  color: var(--snow);
}

.board__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.board__group {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 600;
}

.bind {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--ink);
  font-size: 11px;
  text-transform: none;
  letter-spacing: .02em;
}

.bind__keys { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.key {
  display: inline-block;
  min-width: 26px;
  padding: 3px 6px 2px;
  border: 1px solid var(--edge);
  border-bottom-width: 3px;
  background: var(--snow);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .04em;
}

.key--pad { background: var(--ice); }
.key-sep { font-size: 10px; opacity: .5; }

/* --------------------------------------------------------------------------
   Pause: Run-Karte rechts
   -------------------------------------------------------------------------- */

.runcard {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--gutter) * 1.4 + var(--st));
  width: clamp(240px, 22vw, 320px);
  background: var(--snow);
  border: 1px solid var(--edge);
  transform: none;
  z-index: 2;
}

.runcard__head {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--snow);
  font-size: 10px;
}

.runcard__score {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--edge);
}

.runcard__score .mono { font-size: 9px; }

.runcard__score b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1;
}

.runcard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  font-size: 9px;
}

.runcard__grid div { padding: 8px 12px; border-bottom: 1px solid var(--edge); }
.runcard__grid div:nth-child(odd) { border-right: 1px solid var(--edge); }
.runcard__grid dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; }

.runcard__best {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px 10px;
  font-size: 9px;
}

.runcard__best b { font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Locker: Ausrüstung wählen, Fahrer rechts in 3D
   -------------------------------------------------------------------------- */

.panel--locker { width: min(620px, 46vw); }

.locker-stage {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: min(620px, 46vw);
  z-index: 1;
}

.locker-stage canvas {
  position: absolute;
  inset: 4% 4% 6% 4%;
  width: 92%;
  height: 90%;
  cursor: grab;
}

.locker-stage canvas:active { cursor: grabbing; }

.locker-stage__hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: var(--ink);
  color: var(--snow);
  font-size: 9px;
}

/* Locker als Karten: Gruppen "Rider" und "Gear", jede Karte zeigt das Teil
   am eigenen Fahrer; darunter die Farben/Stile der aktiven Karte */
.lk { display: flex; flex-direction: column; gap: 9px; padding: 12px 16px 12px; overflow-y: auto; max-height: calc(100dvh - 250px); }
.lk__head { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.lk__sec { margin: 0; font: 400 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.lk__saved { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--edge); border-radius: 999px; opacity: .55; }
.lk__saved::before { content: '✓ '; }
.lk__saved.is-flash { animation: lkSaved .9s ease; }
@keyframes lkSaved { 0% { background: var(--signal); color: var(--snow); border-color: var(--signal); opacity: 1; } 100% { opacity: .55; } }
.lk__grid { display: grid; gap: 8px; }
.lk__grid--4 { grid-template-columns: repeat(4, 1fr); }
.lk-card {
  position: relative; display: block; padding: 0; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden;
  aspect-ratio: 1 / 1; cursor: pointer; text-align: left; color: var(--ink); font: inherit;
  background: radial-gradient(120% 90% at 50% 20%, #f4efe6 0%, #ddd5c7 70%, #cfc6b6 100%);
  box-shadow: var(--lift-sm); transition: transform .12s ease, box-shadow .12s ease;
}
.lk-card:hover, .lk-card:focus-visible { transform: translateY(-2px); box-shadow: var(--lift); outline: none; }
.lk-card.is-active { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.lk-card__img { position: absolute; inset: 0 0 30% 0; display: grid; place-items: center; }
.lk-card__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.lk-card__img img.is-on { opacity: 1; }
.lk-card__dot { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--snow); box-shadow: 0 0 0 1.5px var(--ink); }
.lk-card__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 9px 7px; display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(180deg, rgba(242, 239, 232, 0) 0%, rgba(242, 239, 232, .92) 38%);
}
.lk-card__label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.lk-card__name { font: 400 16px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk__actions { display: flex; gap: 8px; }
.lk__redeem { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.lk__redeem[hidden] { display: none; }
.lk__redeem-input { min-width: 0; padding: 7px 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--snow); color: var(--ink);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.lk__redeem-input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.lk__redeem-input:disabled { opacity: .45; }
.lk__redeem-msg { grid-column: 1 / -1; margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.lk__redeem-msg.is-ok { color: #1f7a3a; opacity: 1; }
.lk__redeem-msg.is-err { color: var(--signal); opacity: 1; }
.lk-opt.is-exclusive .lk-opt__name::before { content: '★ '; color: var(--signal); }
.swatch--helmet[title='Pro Team Helmet'] { background: linear-gradient(90deg, #1c2b55 0 40%, #c8ccd2 40% 60%, #1c2b55 60%) !important; }
.swatch--pat-cow { background: radial-gradient(circle at 30% 35%, #141414 0 22%, transparent 23%), radial-gradient(circle at 72% 70%, #141414 0 18%, transparent 19%), #f2efe8 !important; }
.lk-random { padding: 6px 12px; border: 1px solid var(--edge); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.lk-random:hover, .lk-random:focus-visible { background: var(--ink); color: var(--snow); outline: none; }
.lk__home, .lk__edit { display: flex; flex-direction: column; gap: 9px; }
.lk__home[hidden], .lk__edit[hidden] { display: none; }
.lk__edit-head { display: flex; align-items: center; gap: 12px; }
.lk__edit-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk__edit-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.lk__edit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-back { flex: none; padding: 7px 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--snow); color: var(--ink);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: var(--lift-sm); }
.lk-back:hover, .lk-back:focus-visible { background: var(--ink); color: var(--snow); outline: none; }
.lk__opts-head { margin-top: 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.lk__opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.lk-opt { position: relative; padding: 0; border: 1px solid var(--edge); border-radius: 9px; overflow: hidden; aspect-ratio: 1 / 1.1;
  background: radial-gradient(120% 90% at 50% 20%, #f4efe6 0%, #ddd5c7 70%, #cfc6b6 100%); cursor: pointer; color: var(--ink); font: inherit;
  transition: transform .12s ease, box-shadow .12s ease; }
.lk-opt:hover, .lk-opt:focus-visible { transform: translateY(-2px); box-shadow: var(--lift-sm); outline: none; }
.lk-opt.is-on { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.lk-opt.is-on::after { content: '✓'; position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--signal); color: var(--snow);
  font: 600 10px/16px var(--f-mono); text-align: center; }
.lk-opt__img { position: absolute; inset: 0 0 22% 0; }
.lk-opt__img img { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
/* bis das 3D-Bild da ist (oder falls es fehlt): Farbe / Muster als Fläche */
.lk-opt__sw { position: absolute; left: 50%; top: 46%; width: 46%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid var(--edge); transition: opacity .2s ease; }
.lk-opt__img img.is-on + .lk-opt__sw, .lk-opt__img:has(img.is-on) .lk-opt__sw { opacity: 0; }
.lk-opt__img img.is-on { opacity: 1; }
.lk-opt__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5px 5px; font: 400 12px/1.05 var(--f-display); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, rgba(242,239,232,0), rgba(242,239,232,.95) 45%); }
@media (max-width: 760px) and (orientation: portrait) {
  .lk { max-height: none; padding: 10px; }
  .lk__opts { grid-template-columns: repeat(3, 1fr); }
  .lk__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lk-card { aspect-ratio: 4 / 3; }
}

/* Farbfelder einer Kategorie */
.swatches { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.swatch {
  width: 20px;
  height: 20px;
  border: 1px solid var(--edge);
  cursor: pointer;
}

.swatch.is-on { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.row:focus .swatch.is-on { outline-color: var(--signal); }

/* Kopfbedeckung: Helm rund, Beanie mit Strich oben */
.swatch--helmet { border-radius: 50% 50% 4px 4px; }
.swatch--beanie { border-radius: 50% 50% 0 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); }

/* Keins: durchgestrichen */
.swatch--none { background: linear-gradient(135deg, transparent 0 45%, var(--ink) 45% 55%, transparent 55%); }

/* Jacke: zweifarbig (Grundfarbe + Farbband) */
.swatch--pat-solid { background: var(--snow) !important; }
.swatch--pat-twotone { background: linear-gradient(180deg, var(--ink) 0 40%, var(--snow) 40%) !important; }
.swatch--pat-logo { background: var(--snow) !important; position: relative; }
.swatch--pat-logo::after { content: 'S'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px/1 var(--f-display); color: var(--ink); }
.swatch--pat-camo { background: radial-gradient(circle at 28% 30%, #6d6a62 0 22%, transparent 23%), radial-gradient(circle at 72% 64%, #9c978c 0 26%, transparent 27%), radial-gradient(circle at 70% 18%, #4a4843 0 14%, transparent 15%), #c9c4b8 !important; }
.swatch--pat-stripes { background: repeating-linear-gradient(180deg, var(--snow) 0 4px, var(--ink) 4px 6.5px) !important; }
.swatch--pat-check { background: repeating-linear-gradient(90deg, rgba(17,17,17,.45) 0 5px, transparent 5px 10px), repeating-linear-gradient(180deg, rgba(17,17,17,.45) 0 5px, transparent 5px 10px), var(--signal) !important; }
.swatch--pat-fade { background: linear-gradient(180deg, var(--snow), var(--ink)) !important; }
.swatch--split { background-image: linear-gradient(180deg, var(--accent) 0 38%, transparent 38%); }

.row__value--wide { min-width: 13ch; }

/* --------------------------------------------------------------------------
   Ergebnis nach dem Run
   -------------------------------------------------------------------------- */

.panel--results { width: min(640px, 48vw); }

.result {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px var(--gutter);
  overflow-y: auto;
}

.result__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--edge);
  font-size: 10px;
}

.result__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0 10px;
}

.result__score .mono { font-size: 10px; }

.result__score b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: .95;
}

.result__badge {
  margin-top: 4px;
  padding: 3px 9px;
  background: var(--signal);
  font-size: 10px;
  font-weight: 600;
  animation: badge .5s var(--ease-out) both .4s;
}

.result__badge[hidden] { display: none; }

@keyframes badge {
  from { transform: scale(1.4) ; opacity: 0; }
  to { transform: none; opacity: 1; }
}

.result__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  font-size: 9px;
}

.result__grid div { padding: 8px 10px 8px 0; }
.result__grid div + div { padding-left: 10px; border-left: 1px solid var(--edge); }
.result__grid dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; }

/* Level & XP aus dem Run */
.result__xp {
  position: relative;
  padding: 10px 0 8px;
  border-bottom: 2px dashed rgba(17, 17, 17, .25);
}

.result__xp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
}

.result__xp-lv b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.7rem;
  margin-left: 4px;
}

.result__xp-gain {
  font-size: 12px;
  font-weight: 700;
}

.result__xp-gain.is-dim { font-weight: 400; opacity: .6; }

.result__xp-bar {
  height: 12px;
  margin: 6px 0 5px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17, 17, 17, .08);
}

.result__xp-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width .9s var(--ease-out);
}

.result__xp-fill.is-instant { transition: none; }

.result__xp-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  opacity: .7;
}

.result__lvup {
  position: absolute;
  right: 0;
  top: -6px;
  padding: 4px 11px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--signal);
  font-size: 11px;
  font-weight: 700;
  animation: badge .5s var(--ease-out) both;
}

.result__lvup b { font-size: 14px; margin-left: 3px; }
.result__lvup[hidden] { display: none; }

.result__best {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 10px;
  font-size: 9px;
}

.result__best b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .02em;
}

/* Trick-Liste wie ein Kassenzettel */
.receipt {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--gutter) * 1.4 + var(--st));
  bottom: calc(var(--gutter) * .6);
  width: clamp(260px, 24vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--snow);
  border: 1px solid var(--edge);
  transform: none;
  z-index: 2;
}

.receipt__head,
.receipt__total {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 10px;
}

.receipt__head { background: var(--ink); color: var(--snow); }

.receipt__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 6px 12px;
  list-style: none;
  font-size: 10px;
  scrollbar-width: thin;
}

.receipt__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--ink);
  text-transform: none;
  letter-spacing: .02em;
}

.receipt__list li b { font-weight: 600; }
.receipt__list li.is-fail { color: var(--signal); }
.receipt__list li small { opacity: .6; font-size: 9px; margin-left: 6px; }
.receipt__list li.is-bank { font-weight: 600; border-bottom-style: solid; }

.receipt__total {
  border-top: 1px solid var(--edge);
  font-weight: 600;
}

.receipt__total b { font-size: 14px; }

.receipt__barcode svg {
  display: block;
  width: calc(100% - 24px);
  height: 26px;
  margin: 0 12px 10px;
}

.is-entering .receipt { animation: ticketIn .5s var(--ease-out) both .2s; }

/* --------------------------------------------------------------------------
   Ladebildschirm
   -------------------------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);
  overflow: hidden;
  background: linear-gradient(180deg, var(--mood-ink) 0%, var(--mood-b) 38%, var(--mood-a) 78%, var(--mood-c) 100%);
  color: var(--snow);
}

.loader[hidden] { display: none; }

/* Key Art liegt hinter Text und Balken */
.loader__art { position: absolute; inset: 0; z-index: 0; }
.loader__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-sun { fill: var(--mood-c); opacity: .7; }
.ls-far { fill: var(--mood-ink); opacity: .45; }
.ls-slope { fill: var(--snow); }

#loader-rider {
  position: absolute;
  right: 6%;
  bottom: 16%;
  width: min(46vw, 720px);
  height: min(70vh, 680px);
}

.loader > :not(.loader__art) { position: relative; z-index: 1; }

.loader__top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1.5px solid rgba(242, 239, 232, .6);
  font-size: 10px;
}

.loader__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: auto;
  padding-top: 6vh;
}

.loader__kicker {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--snow);
  color: var(--mood-ink);
  font-size: 10px;
  font-weight: 600;
}

.loader__title {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: min(11vw, 20vh);
  line-height: .9;
  text-transform: uppercase;
  transform: none; font-style: italic;
  transform-origin: left bottom;
  text-shadow: 0 3px 14px rgba(8, 14, 30, .3);
}

.loader__sub {
  margin: 12px 0 0;
  font-size: 11px;
  opacity: .8;
}

.loader__brand { font-weight: 700; letter-spacing: .2em; }

.loader__foot { color: var(--ink); }

.loader__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 10px;
}

/* Fortschritt als Strichcode-Balken */
.loader__bar {
  position: relative;
  height: 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--snow);
  overflow: hidden;
}

.loader__fill {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
}

.loader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, var(--ink) 7px 9px, transparent 9px 13px, var(--ink) 13px 14px);
  opacity: .55;
}

.loader__tip {
  margin: 12px 0 0;
  font-size: 10px;
  text-transform: none;
  letter-spacing: .03em;
}

.loader__tip b {
  margin-right: 8px;
  padding: 1px 6px;
  background: var(--ink);
  color: var(--snow);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   Wipe-Übergang
   -------------------------------------------------------------------------- */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--gutter) var(--gutter) calc(var(--info-h) + var(--gutter));
  background: linear-gradient(135deg, var(--mood-ink) 0%, var(--mood-b) 100%); /* Farben des Parks */
  color: var(--snow);
  transform: translateX(-101%);
  visibility: hidden;
  pointer-events: none;
}

.wipe::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -16px;
  width: 16px;
  background: var(--mood-a);
}

.wipe__label {
  font-family: var(--f-display);
  font-size: min(11vw, 20vh);
  line-height: .9;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Untermenüs im neuen Look (wie Hub und Account): Parkfarben als Grund,
   Sticker-Karten mit runden Ecken und hartem Schatten, schräge Titel,
   grosser Schriftzug als Wasserzeichen. Überschreibt die Regeln oben.
   -------------------------------------------------------------------------- */

:root { --st: min(5.2vw, 9.5vh); }

.screen--sub {
  overflow: clip; /* nicht "hidden": sonst scrollt der Fokus den Screen samt Titel weg */
  background:
    radial-gradient(circle at 80% 20%, var(--mood-c) 0, transparent 34%),
    linear-gradient(135deg, var(--mood-ink) 0%, var(--mood-b) 48%, var(--mood-a) 100%);
}

/* Pause: Spiel bleibt dahinter sichtbar */
.screen--pause {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, .55) 0%, rgba(17, 17, 17, .15) 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--mood-ink) 60%, transparent), color-mix(in srgb, var(--mood-a) 35%, transparent));
}

.screen--sub::before {
  content: attr(data-mark);
  position: absolute;
  right: -2vw;
  bottom: -5vh;
  font-family: var(--f-display);
  font-size: 19vw;
  line-height: .8;
  white-space: nowrap;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .2);
  transform: none; font-style: italic;
  pointer-events: none;
}

.subtitle {
  left: var(--gutter);
  top: calc(var(--gutter) * .7);
  overflow: visible;
  color: var(--snow);
  -webkit-text-stroke: 0;
  text-shadow: var(--lift);
  transform: none; font-style: italic;
  transform-origin: left bottom;
}

.panel {
  left: var(--gutter);
  bottom: var(--gutter);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--lift-hi);
  overflow: hidden;
}

.panel--sub {
  top: calc(var(--gutter) * 1.6 + var(--st));
  bottom: auto;  /* Karte so hoch wie ihr Inhalt … */
  max-height: calc(100% - var(--gutter) * 2.6 - var(--st)); /* … aber nie über den Rand */
}

/* Pause und Ergebnis: keine untere Leiste, Screen bis ganz unten */
.screen--pause,
.screen--results { bottom: 0; }

.rows { padding: 10px 14px 12px; }
.rows--tail { border-top: 2px dashed var(--ink); }

.row {
  padding-left: 12px;
  padding-right: 12px;
  border-bottom: 2px dashed rgba(17, 17, 17, .18);
  border-radius: 10px;
  transition: transform .22s var(--ease-out), background .15s linear, box-shadow .22s var(--ease-out);
}

.row::before { display: none; }

.row:focus {
  transform: translateX(4px);
  background: #FFFFFF;
  border-bottom-color: transparent;
  box-shadow: inset 5px 0 0 var(--signal), var(--lift-sm);
}

.row__label { transform: skewX(-6deg); transform-origin: left bottom; }

.panel__foot {
  border-top: 2px dashed var(--ink);
  background: #E6E2D8;
}

.panel__foot b { border-radius: 5px; border-width: 1.5px; border-bottom-width: 3px; }

/* Regler, Auswahl, Tasten: rund */
.gauge__cell { border-radius: 4px; }
.choice { border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }
.choice__opt + .choice__opt { border-left: 1px solid var(--edge); }
.key, .keycap { border-radius: 6px; }
.tag { border-radius: 999px; }

/* Steuerung */
.boards { padding: 6px 4px; }
.board + .board { border-left: 2px dashed var(--ink); }
.board__head { border-radius: 10px; padding: 8px 12px 6px; }
.board__title { transform: skewX(-6deg); }
.board__group { border-bottom: 1px solid var(--edge); }
.bind { border-bottom: 1px dashed rgba(17, 17, 17, .3); }

/* Run-Karte (Pause) und Kassenzettel (Ergebnis): Tickets wie der Rider Pass */
.runcard,
.receipt {
  top: calc(var(--gutter) * 1.6 + var(--st));
  border: 1px solid var(--edge);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--lift-hi);
}

.runcard__head,
.receipt__head {
  padding: 10px 14px 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 10px, transparent 10px 20px),
    linear-gradient(120deg, var(--mood-b), var(--mood-a));
  border-bottom: 1px solid var(--edge);
}

.runcard__score b,
.result__score b { transform: none; font-style: italic; transform-origin: left bottom; display: inline-block; }

/* Ergebnis */
.result__head { border-bottom: 2px dashed var(--ink); }
.result__badge { border: 1px solid var(--edge); border-radius: 999px; }
.result__grid { border-top: 2px dashed var(--ink); border-bottom: 2px dashed var(--ink); }
.result__grid div + div { border-left: 2px dashed rgba(17, 17, 17, .25); }

/* Locker: Fahrer steht vor den Parkfarben, Farbfelder rund */
.locker-stage { left: calc(min(620px, 46vw) + var(--gutter)); }
.locker-stage__hint { border-radius: 999px; padding: 5px 12px; }
.swatch { border-width: 2px; border-radius: 6px; }
.swatch.is-on { outline-offset: 2px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Intro-Animation (max. 1.5 s, gestaffelt, überspringbar)
   -------------------------------------------------------------------------- */

@keyframes rise     { from { transform: translateY(104%); } to { transform: none; } }
@keyframes slideIn  { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes panelIn  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ruleIn   { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ticketIn { from { transform: translateY(60px) ; opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hint     { 0%, 100% { opacity: 0; } 15%, 85% { opacity: .8; } }

.is-intro .wordmark__l {
  animation: rise .7s var(--ease-out) both;
  animation-delay: calc(.1s + var(--i) * 40ms);
}

.is-intro .brand__meta { animation: fadeIn .4s linear both .5s; }

.is-intro .menu__item {
  animation: slideIn .5s var(--ease-out) both;
  animation-delay: calc(.45s + var(--i) * 70ms);
}

.is-intro .avatar { animation: fadeIn .6s linear both .6s; }
.is-intro .ticket { animation: ticketIn .6s var(--ease-out) both .85s; }
.is-intro .dock { animation: fadeIn .4s linear both .9s; }
.is-intro .skip-hint { animation: hint 1.5s linear both; }

.is-entering .subtitle__clip { animation: rise .55s var(--ease-out) both .05s; }
.is-entering .panel--sub { animation: panelIn .45s var(--ease-io) both; transform-origin: left center; }
.is-entering .runcard { animation: ticketIn .5s var(--ease-out) both .2s; }
.is-entering .row,
.is-entering .board { animation: slideIn .4s var(--ease-out) both; animation-delay: calc(.18s + var(--i, 0) * 45ms); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .acc { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 24px; }
  .perks { display: none; }
  .ticket { display: none; }
  .runcard { display: none; }
  .receipt { display: none; }
  .panel--results { width: auto; right: var(--gutter); } /* volle Breite, aber mit Rand */
  .panel--locker { width: 56vw; }
  .locker-stage { left: 56vw; }
}

@media (max-width: 760px) and (orientation: portrait) {
  :root {
    --st: 13vw;
    --info-h: 50px;
  }

  .menu, .hub { width: calc(100% - var(--gutter) * 2); }
  .map__panel { left: var(--gutter); width: auto; }
  .acc { grid-template-columns: 1fr; overflow-y: auto; align-items: start; }
  .acc__right { display: none; }
  .dock__account span:last-child { display: none; }
  .pin { min-width: 0; padding: 6px 10px 6px 6px; }
  .pin__num { width: 38px; height: 38px; font-size: 1.2rem; }
  .pin__name { font-size: 1.1rem; }
  .showcase { display: none; }
  .dock__more { display: none; }
  .panel--sub,
  .panel--wide,
  .panel--pause {
    width: 100%;
    border-right: 0;
  }

  .boards { grid-template-columns: 1fr; }
  .board + .board { border-left: 0; border-top: 1.5px dashed var(--ink); }

  .row { grid-template-columns: 3ch minmax(0, 1fr) 6ch; }
  .row .row__ctrl { grid-column: 2 / 4; grid-row: 2; }
  .row--action { grid-template-columns: 3ch 1fr; }

.row__sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  opacity: .65;
}

  .panel__foot { display: none; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .card { min-height: 84px; padding: 10px 14px; }
  .card--park { min-height: 116px; }
  .card--ride { min-height: 76px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .ticket { display: none; }
  .panel__foot { display: none; }
}

/* --------------------------------------------------------------------------
   Handy hochkant: alles in die Breite, nichts über den Rand, keine Überlappung
   -------------------------------------------------------------------------- */

@media (max-width: 760px) and (orientation: portrait) {
  /* Untere Leiste: kompakt, Shop/Uhr/Hinweise weg, Account nur als Kreis */
  .dock { padding: 0 6px; }
  .dock__nav { gap: 0; min-width: 0; }
  .dock__tab { padding: 0 10px; font-size: 1rem; }
  .dock__soon,
  .dock__more,
  .dock__clock,
  .dock__nav .is-locked { display: none; }
  .dock__account { padding: 0 6px 0 10px; }

  /* Karten links und rechts mit Abstand, nie breiter als der Screen */
  .panel,
  .panel--sub,
  .panel--wide,
  .panel--pause,
  .panel--locker,
  .panel--results {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }

  .panel { box-shadow: var(--lift); }
  .screen--sub::before { font-size: 34vw; }
  .rows { padding: 8px 8px 10px; }
  .row:focus { transform: none; }

  /* Ergebnis: Kennzahlen 2 × 2 */
  .result__grid { grid-template-columns: 1fr 1fr; }
  .result__grid div:nth-child(3) { border-left: 0; padding-left: 0; }
  .result__grid div:nth-child(n+3) { border-top: 2px dashed rgba(17, 17, 17, .25); }
  .result__score b { font-size: 19vw; }

  /* Parkkarte: Schilder als Liste unter dem Titel, Infotafel darunter, scrollbar */
  .screen--parks { overflow-y: auto; overflow-x: hidden; }
  .map {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 76px var(--gutter) 14px;
    overflow: visible;
  }
  .map__canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; }
  .map__head { top: 14px; flex-wrap: wrap; gap: 2px 12px; }
  .map__brand { font-size: 1.9rem; }
  .pin {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    transform: none;
  }
  .pin:focus,
  .pin.is-on { transform: translateY(-2px); }
  .is-entering .pin { animation-name: fadeIn; }
  .map__panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 var(--gutter) var(--gutter);
    width: auto;
    padding: 16px 16px 14px;
  }
  .map__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map__actions { flex-wrap: wrap; }

  /* Ladebildschirm: Fahrer unter dem Titel, nicht über der Liste */
  #loader-rider {
    left: 0;
    right: 0;
    bottom: 12%;
    width: 100%;
    height: 44vh;
  }
  .loader__main { padding-top: 2vh; }
  .loader__title { font-size: 17vw; }

  /* Account: etwas mehr Luft unten (Leiste) */
  .acc { padding: var(--gutter); }
  .acc__left { box-shadow: var(--lift); }
}

/* --------------------------------------------------------------------------
   Handy quer (wenig Höhe): kleinere Titel, kompakte Karten, Inhalte scrollen
   statt abgeschnitten zu werden
   -------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  :root { --st: 11vh; --gutter: 14px; }

  /* Home: Logo klein, Hub links kompakt, Hinweis oben rechts */
  .brand__logo { font-size: 2.2rem; }
  .brand__meta { display: none; }
  .hub { width: min(470px, 54vw); gap: 8px; bottom: 10px; }
  .card { min-height: 0; padding: 8px 12px; gap: 2px; box-shadow: var(--lift-sm); }
  .card--park { min-height: 74px; }
  .card--park .card__title { font-size: 1.9rem; }
  .card__top { margin-bottom: 0; }
  .card__title { font-size: 1.35rem; }
  .card__icon, .card__badge { display: none; }
  .card--ride { min-height: 0; padding: 8px 14px; }
  .card--ride .card__title { font-size: 2rem; }
  .card__arrow { font-size: 2.2rem; }
  .chip { padding: 3px 9px; font-size: 12px; }
  .hub__chips { gap: 6px; }
  .touch-note {
    left: auto;
    right: var(--gutter);
    top: var(--gutter);
    width: min(320px, 40vw);
  }
  .avatar { height: 78vh; width: 34vw; }

  /* Untermenüs */
  .subtitle { top: 8px; }
  .panel--sub { top: calc(var(--st) + 22px); max-height: calc(100% - var(--st) - 34px); }
  .screen--sub::before { font-size: 26vh; }
  .row { padding-top: 4px; padding-bottom: 4px; }
  .row__label { font-size: 1.15rem; }
  .panel--pause .row__label { font-size: 1.4rem; }
  .result { padding: 8px 14px; }
  .result__score { padding: 4px 0; }
  .result__score b { font-size: 3.4rem; }
  .result__best { display: none; } /* zu wenig Höhe; steht auch in der Trickliste */

  /* Account: Formular scrollt, Pass rechts kleiner */
  .acc { overflow-y: auto; align-items: start; padding: 14px; }
  .acc__left { padding: 14px 16px; }
  .acc__title { font-size: 2.2rem; margin: 6px 0 4px; }
  .acc__lead { margin-bottom: 8px; }
  .pass { transform: scale(.82); transform-origin: top center; }

  /* Parkkarte: Schilder als Liste links, Infotafel rechts (scrollt bei Bedarf) */
  .map__head { top: 8px; }
  .map__brand { font-size: 1.8rem; }
  .map {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 56px 0 0 var(--gutter);
    width: 44vw;
  }
  .map__canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; }
  .pin {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-width: 0;
    padding: 6px 12px 6px 6px;
    transform: none;
  }
  .pin:focus,
  .pin.is-on { transform: translateY(-2px); }
  .pin__num { width: 40px; height: 40px; font-size: 1.3rem; }
  .pin__name { font-size: 1.25rem; }
  .is-entering .pin { animation-name: fadeIn; }
  .map__panel {
    top: var(--gutter);
    bottom: var(--gutter);
    width: min(400px, 48vw);
    overflow-y: auto;
    padding: 12px 16px;
  }
  .map__name { font-size: 2.2rem; margin: 6px 0 4px; }
  .map__desc { margin-bottom: 8px; }
  .map__stats { margin-bottom: 10px; padding: 8px 0; }
  .card--small { min-height: 0; }

  /* Ladebildschirm */
  .loader__main { padding-top: 0; }
  .loader__title { font-size: 16vh; }
  #loader-rider { height: 80vh; bottom: 10%; }
}

/* Kleine Handys hochkant (wenig Höhe): Hub-Karten kompakt, damit Logo,
   Hinweis und Karten nicht übereinander liegen */
@media (max-width: 760px) and (max-height: 720px) and (orientation: portrait) {
  .brand__logo { font-size: 2.4rem; }
  .touch-note { top: calc(var(--gutter) + 44px); padding: 7px 10px; }
  .hub { gap: 8px; bottom: 12px; }
  .card { min-height: 0; padding: 8px 12px; gap: 2px; box-shadow: var(--lift-sm); }
  .card--park { min-height: 84px; }
  .card--park .card__title { font-size: 2rem; }
  .card__top { margin-bottom: 0; }
  .card__title { font-size: 1.4rem; }
  .card__icon, .card__badge { display: none; }
  .card--ride .card__title { font-size: 2.1rem; }
  .card__arrow { font-size: 2.2rem; }
  .chip { padding: 3px 9px; font-size: 12px; }
}

/* Kleine Handys quer (z. B. iPhone SE): Logo + Hinweis oben, Hub darunter links */
@media (max-width: 760px) and (max-height: 500px) {
  .brand { top: 8px; }
  .brand__meta { display: none; }
  .brand__logo { font-size: 1.8rem; }
  .touch-note { left: auto; right: var(--gutter); top: 8px; width: 46vw; font-size: 9px; }
  .hub { width: 58vw; grid-template-columns: 1fr 1fr 1fr; }
  .card--park { grid-column: 1 / -1; min-height: 64px; }
  .card--park .card__title { font-size: 1.6rem; }
  .card--locker, .card--controls { grid-column: span 1; }
  .card--ride { grid-column: span 1; }
  .card--ride .card__title { font-size: 1.4rem; }
  .card--ride .card__meta, .card__arrow { display: none; }
  .card__meta { font-size: 8px; }
}

/* Handy quer: Fahrer etwas kleiner, damit der Hinweis oben rechts frei liegt */
@media (max-height: 500px) and (orientation: landscape) {
  .avatar { height: 60vh; }
  .touch-note { width: min(300px, 36vw); }
}

@media (prefers-reduced-motion: reduce) {
  .menu__item, .menu__item::before, .row, .row::before { transition-duration: .01s; }
  .is-intro *, .is-entering * { animation-duration: .01s !important; animation-delay: 0s !important; }
}


/* ==========================================================================
   Soundtrack: Einblendung "jetzt läuft" (unten rechts, im Menü über dem Dock)
   ========================================================================== */
.np {
  position: fixed;
  right: 18px;
  bottom: calc(var(--dock-h, 56px) + 14px);
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: min(360px, 70vw);
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--snow);
  box-shadow: var(--lift);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s linear, transform .35s var(--ease-out);
  pointer-events: none;
}
.ui.is-playing ~ .np, .is-playing .np { bottom: 18px; }
.np.is-on { opacity: 1; transform: none; }
.np__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.np__eq i { width: 4px; height: 30%; border-radius: 1px; background: var(--signal); animation: npEq .9s ease-in-out infinite alternate; }
.np__eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.np__eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.np.is-off .np__eq i { animation: none; background: #b9b4aa; }
@keyframes npEq { from { height: 20%; } to { height: 100%; } }
.np__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np__title { overflow: hidden; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.05; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.np__artist { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; opacity: .75; }


/* ==========================================================================
   Park Builder
   ========================================================================== */
.pb {
  position: absolute;
  inset: 0 0 var(--dock-h, 56px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px var(--gutter) 14px;
}
.pb-steps { display: flex; gap: 6px; justify-content: center; }
.pb-step {
  padding: 5px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(242, 239, 232, .55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pb-step.is-done { background: var(--snow); }
.pb-step.is-on { background: var(--ink); color: var(--snow); }
.pb-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.screen--builder[data-step='build'] .pb-body { align-items: stretch; }

.pb-panel {
  width: min(860px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 22px 26px 20px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}
.pb-panel--narrow { width: min(520px, 100%); }
.pb-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #fff;
  font-family: var(--f-display);
  font-size: 2rem;
  text-transform: uppercase;
  outline: none;
}
.pb-input:focus { box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.pb-msg { min-height: 1.2em; margin: 8px 0 0; font-size: 11px; color: #c0392b; }
.pb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pb-hint { margin: 6px 0 0; font-size: 10px; line-height: 1.5; opacity: .7; }

.pb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  outline: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.pb-card b { font-family: var(--f-display); font-size: 1.25rem; text-transform: uppercase; line-height: 1; }
.pb-card:hover, .pb-card:focus { transform: translateY(-2px); box-shadow: var(--lift); }
.pb-card.is-on { background: var(--ink); color: var(--snow); box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.pb-card__sky {
  position: relative;
  display: block;
  height: 90px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--b), var(--a) 70%, var(--c));
  overflow: hidden;
}
.pb-card__sky i {
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  background: linear-gradient(160deg, #fff, #d9dde8);
  clip-path: polygon(0 60%, 18% 20%, 34% 55%, 52% 5%, 70% 50%, 86% 25%, 100% 55%, 100% 100%, 0 100%);
}
.pb-card--shape svg { height: 84px; }
.pb-cards--shape { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .pb-cards--shape { grid-template-columns: repeat(2, 1fr); } }
.pb-card--shape svg polygon { fill: #eef1f6; stroke: var(--ink); stroke-width: 1.5; }
.pb-card--shape svg polyline { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pb-card.is-on svg polygon { fill: #2b3040; stroke: var(--snow); }
.pb-card span.mono { font-size: 10px; opacity: .75; }
.pb-card__desc { font-size: 11px; line-height: 1.4; opacity: .85; }

.pb-list { margin: 14px 0 0; padding: 0; list-style: none; }
.pb-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1.5px dashed rgba(17, 17, 17, .25);
}
.pb-row__dot { width: 34px; height: 34px; border: 1px solid var(--edge); border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.pb-row__name { display: block; font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; }
.pb-row__meta { font-size: 10px; opacity: .7; }
.pb-row__btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* Bauen: Palette | Piste | Infos */
.pb-build { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; gap: 14px; width: 100%; min-height: 0; }
.pb-palette, .pb-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}
.pb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pb-tab { padding: 6px 4px; border: 1px solid var(--edge); border-radius: 8px; font-family: var(--f-display); font-size: 1rem; text-transform: uppercase; outline: none; }
.pb-tab.is-on { background: var(--ink); color: var(--snow); }
.pb-tools { display: flex; flex-direction: column; gap: 6px; }
.pb-tool {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  outline: none;
}
.pb-tool:hover, .pb-tool:focus { background: var(--ice); }
.pb-tool.is-on { background: var(--signal); color: var(--snow); }
.pb-ico { width: 44px; height: 26px; fill: currentColor; stroke: currentColor; }
.pb-canvas-wrap {
  position: relative;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: #dfe4ea;
  box-shadow: var(--lift);
}
.pb-canvas-wrap canvas { display: block; touch-action: none; }
.pb-head { display: flex; flex-direction: column; gap: 4px; }
.pb-head__name { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.pb-head .mono { font-size: 10px; opacity: .7; }
.pb-head .chip { align-self: flex-start; margin-top: 4px; }
.pb-selected { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px dashed rgba(17,17,17,.3); border-radius: 10px; }
.pb-selected b { font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; }
.pb-selected .mono { font-size: 10px; }
.pb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.pb-actions .card[disabled] { opacity: .45; }

@media (max-width: 1100px) {
  .pb-build { grid-template-columns: 190px minmax(0, 1fr) 220px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .pb-build { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; }
}


/* Community-Parks auf der Parkkarte */
.map__community { width: 100%; margin-top: 10px; justify-content: center; }
.cp {
  position: absolute;
  left: var(--gutter);
  top: 90px;
  bottom: calc(var(--dock-h, 56px) + var(--gutter));
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(460px, 44vw);
  padding: 16px 18px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}
.cp[hidden] { display: none; }
.cp__head { display: flex; justify-content: space-between; align-items: center; }
.cp__title { margin: 0; font-family: var(--f-display); font-size: 1.8rem; text-transform: uppercase; line-height: 1; }
.cp__tabs { display: flex; gap: 6px; }
.cp__tabs .chip.is-on { background: var(--ink); color: var(--snow); }
.cp__list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; }
.cp-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 6px;
  border-top: 1.5px dashed rgba(17, 17, 17, .25);
  text-align: left;
  outline: none;
}
.cp-row:hover, .cp-row:focus { background: var(--ice); }
.cp-row.is-on { background: var(--ink); color: var(--snow); }
.cp-row__dot { width: 34px; height: 34px; border: 1px solid var(--edge); border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.cp-row__name { display: block; font-family: var(--f-display); font-size: 1.15rem; text-transform: uppercase; }
.cp-row__meta { font-size: 10px; opacity: .7; }
.cp-row__go { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cp-empty { padding: 16px 4px; font-size: 11px; opacity: .7; }

/* Builder/Community: eigene Fokus-Darstellung statt der Menü-Fläche */
.pb-card, .pb-tool { align-items: stretch; }
.pb-tool { align-items: center; }
.pb-card::before, .pb-tab::before, .pb-tool::before, .cp-row::before, .pb-tabs .chip::before, .cp__tabs .chip::before { display: none; }
.pb-tab:focus, .pb-tool:focus, .cp-row:focus, .cp__tabs .chip:focus { transform: none; box-shadow: 0 0 0 3px var(--signal); }
.cp__tabs .chip.is-on:focus { background: var(--ink); }


/* Bestätigen-Dialog */
.confirm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 20, .5);
}
.confirm[hidden] { display: none; }
.confirm__box {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
  animation: confirmIn .2s var(--ease-out);
}
@keyframes confirmIn { from { transform: translateY(12px) scale(.97); } to { transform: none; } }
.confirm__text { margin: 0; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; }
.confirm__sub { margin: 8px 0 0; font-size: 11px; line-height: 1.5; opacity: .75; }
.confirm__sub:empty { display: none; }
.confirm__btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.confirm__btn:focus { outline: none; box-shadow: 0 0 0 3px var(--signal); }
.confirm__btn--yes { background: #c0392b; border-color: var(--ink); color: #fff; }

/* Builder-Schritte nur beim Erstellen (hidden muss display:flex schlagen) */
.pb-steps[hidden] { display: none; }


/* Community-Seite */
.cm {
  position: absolute;
  inset: 0 0 var(--dock-h, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px calc(var(--gutter) * 1.5) 18px;
}
.cm__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.cm__title { margin: 4px 0 0; color: var(--snow); -webkit-text-stroke: 1.5px var(--ink); }
.cm__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cm__search {
  width: min(320px, 70vw);
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--snow);
  font: 600 14px/1 var(--f-body, sans-serif);
  outline: none;
  box-shadow: var(--lift-sm);
}
.cm__search:focus { box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.cm__tabs { display: flex; gap: 6px; }
.cm__tabs .chip.is-on { background: var(--ink); color: var(--snow); }
.cm__tabs .chip::before { display: none; }
.cm__grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-content: start;
  grid-auto-rows: max-content;
  gap: 18px;
  padding: 4px 10px 10px 4px;
}
.cm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}
.cm-card.is-on { box-shadow: 0 0 0 2px var(--signal), var(--lift); }
.cm-card__prev { display: block; flex: none; width: 100%; height: 140px; border-bottom: 1px solid var(--edge); }
.cm-card__info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 4px; }
.cm-card__name { font-family: var(--f-display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.cm-card__meta { font-size: 10px; opacity: .7; }
.cm-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 9px; }
.cm-card__tags i { padding: 2px 7px; border: 1px solid var(--edge); border-radius: 999px; font-style: normal; font-weight: 700; text-transform: uppercase; }
.cm-card__tags i:first-child { background: linear-gradient(90deg, var(--a), var(--b)); color: #fff; }
.cm-card__btns { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px 14px; }
.cm-card__btns .chip::before { display: none; }
.cm-empty { grid-column: 1 / -1; padding: 30px; border: 2.5px dashed rgba(242,239,232,.6); border-radius: 14px; color: var(--snow); text-align: center; font-size: 12px; }


/* R halten: Neustart */
.hud__restart {
  position: fixed;
  left: 50%;
  top: 30%;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .55);
  color: var(--snow);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .15s linear, transform .2s var(--ease-out);
  pointer-events: none;
}

.hud__restart.is-on { opacity: 1; transform: translate(-50%, 0); }
/* dezenter Ring: dünner Fortschritt rund um die Zahl */
.hud__restart-ring {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(var(--signal) calc(var(--k, 0) * 360deg), rgba(242, 239, 232, .2) 0);
}
.hud__restart-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(17, 17, 17, .85);
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
}
.hud__restart-txt { display: flex; align-items: baseline; gap: 8px; }
.hud__restart-txt b { font-family: var(--f-mono, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.hud__restart-txt .mono { font-size: 9px; opacity: .6; }

/* --------------------------------------------------------------------------
   Party-Einladung: Popup unten rechts über dem Dock; im Spiel schmales Banner oben
   -------------------------------------------------------------------------- */

.invite {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--dock-h, 56px) + 16px);
  z-index: 40;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
  animation: inviteIn .35s var(--ease-out) both;
}

.invite[hidden] { display: none; }

.invite__av {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--signal);
  font-family: var(--f-display);
  font-size: 1.5rem;
  text-transform: uppercase;
}

.invite__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite__eyebrow { font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.invite__text { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.05; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite__meta { font-size: 9px; opacity: .7; }
.invite__btns { display: flex; flex-direction: column; gap: 5px; }
.invite__btns .chip { justify-content: center; cursor: pointer; }

/* im Spiel: klein, oben in der Mitte, ohne Knöpfe (Run läuft weiter) */
.invite.is-game {
  left: 50%;
  right: auto;
  top: var(--gutter);
  bottom: auto;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  width: auto;
  max-width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: 6px 14px 6px 6px;
  border-width: 2px;
  border-radius: 999px;
  box-shadow: var(--lift-sm);
  transform: translateX(-50%);
  animation: inviteDrop .35s var(--ease-out) both;
}
.invite.is-game .invite__av { width: 30px; height: 30px; font-size: 1rem; border-width: 1.5px; }
.invite.is-game .invite__btns,
.invite.is-game .invite__eyebrow { display: none; }
.invite.is-game .invite__text { font-size: .95rem; }
.invite.is-game .invite__meta { font-size: 8px; }

@keyframes inviteIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes inviteDrop { from { opacity: 0; transform: translate(-50%, -12px); } }

.dock__badge { margin-left: 2px; }
.dock__badge[hidden] { display: none; }


/* --------------------------------------------------------------------------
   Park-Seite: Karten mit Vorschau, Detailansicht, Rangliste
   -------------------------------------------------------------------------- */

.pk { z-index: 1; }
.pk .cm__title { font-size: clamp(2.8rem, 5vw, 4.6rem); }
.pk__seg { margin: 0; background: #E6E2D8; }
.pk .cm__search { width: min(260px, 60vw); border-radius: 999px; }
.pk__grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  /* weich ein-/ausblenden statt harter Kante oben und unten beim Scrollen */
  padding: 16px 14px 40px 6px;
  margin: -12px -14px -18px -6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 239, 232, .55) transparent;
}
.pk__grid::-webkit-scrollbar { width: 6px; }
.pk__grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(242, 239, 232, .55); }
.pk__grid::-webkit-scrollbar-track { background: transparent; }

.pk-card { position: relative; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); animation: pkIn .35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.pk-card:hover, .pk-card:focus-within { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.pk-card.is-on, .pk-card.is-on:hover { box-shadow: 0 0 0 2px var(--signal), var(--lift); }
@keyframes pkIn { from { opacity: 0; transform: translateY(14px); } }

.pk-card__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.pk-card__open::before { display: none; }
.pk-card__open:focus { outline: none; }
.pk-card__open:focus .pk-prev { filter: brightness(1.06); }
.pk-prev { height: 150px; }
.pk-card__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--snow);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pk-card__best {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 8px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--snow);
  font-size: 9px;
  font-weight: 700;
}
.pk-card.is-on .pk-card__badge { background: var(--signal); color: var(--ink); }
.pk-card__gap { flex: 1; }
.pk-card .cm-card__btns { align-items: center; }
.pk-sel { background: #E6E2D8; font-size: 11px; opacity: .8; }

.pk-trophy { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; }
.pk-trophy svg { width: 16px; height: 16px; color: #C99A1B; }
.pk-trophy span { font-size: 12px; }

/* Popups (Detail, Rangliste) */
.pk-pop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 10, 18, .5);
  backdrop-filter: blur(4px);
}
.pk-pop[hidden] { display: none; }
.pk-pop--board { z-index: 31; }
.pk-pop__box {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: calc(100dvh - 120px);
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--snow);
  box-shadow: var(--lift-hi);
}
.pk-pop__box--board { width: min(460px, 100%); }
.pk-pop__body { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }
.pk-pop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pk-pop__kicker { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.pk-pop__kicker i { padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--a), var(--b)); color: #fff; font-style: normal; }
.pk-pop__title {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: .9;
  text-transform: uppercase;
  transform: skewX(-6deg);
  transform-origin: left bottom;
  color: var(--signal);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
.pk-pop__map { display: block; flex: none; width: 100%; height: clamp(130px, 24vh, 200px); border: 1px solid var(--edge); border-radius: 12px; }
.pk-pop__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.pk-pop__desc { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.pk-pop__desc:empty { display: none; }
.pk-pop__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.pk-pop__stats div { padding: 7px 9px; border: 1px solid var(--edge); border-radius: 9px; background: #fff; }
.pk-pop__stats dt { font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.pk-pop__stats dd { margin: 3px 0 0; font-size: 12px; font-weight: 700; }
.pk-pop__feats { display: flex; gap: 14px; margin-bottom: 12px; font-size: 11px; }
.pk-pop__feats b { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; margin-right: 3px; }
.pk-pop__label { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.pk-pop__profile { display: block; width: 100%; height: 56px; }
.pk-pop__top { padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; }
.pk-pop__toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pk-pop__btns { position: sticky; bottom: -20px; z-index: 2; display: flex; align-items: stretch; gap: 10px; margin: 0 -20px -20px; padding: 12px 20px 16px; background: linear-gradient(180deg, rgba(242,239,232,0), var(--snow) 22%); }
.pk-pop__btns .card { min-height: 64px; padding: 10px 16px; }
.pk-pop__btns .card .card__title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.pk-pop__btns .card { flex: 1; margin: 0; }
.pk-pop__btns .chip { align-self: center; }
.pk-pop__you { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--snow); font-size: 11px; }
.pk-pop__you:empty { display: none; }

/* Rangliste */
.pk-rank { margin: 0; padding: 0; list-style: none; }
.pk-rank li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px dashed rgba(17, 17, 17, .22); font-size: 12px; }
.pk-rank li:first-child { border-top: 0; }
.pk-rank b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.pk-rank__pos { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: 10px; }
.pk-rank .is-top1 .pk-rank__pos { background: #F2C14E; }
.pk-rank .is-top2 .pk-rank__pos { background: #D5D9E0; }
.pk-rank .is-top3 .pk-rank__pos { background: #E0A47A; }
.pk-rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-transform: uppercase; }
.pk-rank .is-me { background: rgba(255, 79, 31, .1); border-radius: 8px; }
.pk-rank .is-me .pk-rank__name { color: var(--signal); }
.pk-rank li.pk-rank__empty { display: block; padding: 14px 4px; opacity: .7; line-height: 1.5; }
.pk-rank--big { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.pk-rank--big li { padding: 8px 2px; font-size: 13px; }

@media (max-width: 760px) and (orientation: portrait) {
  .pk .cm__tools { width: 100%; }
  .pk .cm__search { width: 100%; }
  .pk-pop__cols { grid-template-columns: 1fr; }
  .pk-pop__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-pop__map { height: 160px; }
  .pk-pop__box { max-height: calc(100dvh - 90px); }
}

/* Pause: die untere Leiste fehlt, also reichen Unterseiten (Settings …) bis ganz unten */
.ui.is-paused .screen { bottom: 0; }

/* Profilbilder: gerenderter Kopf im eigenen Skin statt Buchstabe */
.fr-avatar.has-portrait,
.dock__avatar.has-portrait,
.dock__account.is-in .dock__avatar.has-portrait {
  color: transparent;
  background-image: var(--portrait), radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .55), transparent 70%);
  background-size: 128% auto, cover;
  background-position: 50% 30%, center;
  background-repeat: no-repeat;
}
.dock__account.is-in .dock__avatar.has-portrait { background-color: var(--mood-a); color: transparent; }
.pk-rank__name { display: flex; align-items: center; gap: 8px; }
.pk-rank__av { flex: none; width: 26px; height: 26px; border-width: 1.5px; font-size: .85rem; box-shadow: none; }

/* Scrollbare Listen: weich ausblenden, nur wo noch Inhalt folgt (scrollfade.js) */
.fr__list, .fr__results, .pt__body, .pk__grid, .pk-pop__body, .pk-rank--big, .boards, .receipt__list {
  --fade-up: 0px;
  --fade-down: 0px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-up), #000 calc(100% - var(--fade-down)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-up), #000 calc(100% - var(--fade-down)), transparent 100%);
}
.is-fade-up { --fade-up: 26px; }
.is-fade-down { --fade-down: 34px; }
.pk__grid.is-fade-up { --fade-up: 22px; }
.pk__grid.is-fade-down { --fade-down: 46px; }

/* Park-Seite leer: Hinweis + direkt zum Builder */
.pk-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; }
.pk-empty p { margin: 0; }
.pk-empty .mono { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pk-empty__sub { max-width: 420px; font-size: 13px; line-height: 1.5; opacity: .85; }
.pk-empty__go { width: min(320px, 100%); margin-top: 6px; }

/* Datenschutz-Hinweise im Account */
.acc__legal { margin: 6px 0 0; font-size: 10px; letter-spacing: .06em; opacity: .7; }
.acc__legal a, a.acc__legal { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chip--danger { border-color: #b3261e !important; color: #b3261e !important; }
.chip--danger:hover, .chip--danger:focus-visible { background: #b3261e !important; color: var(--snow) !important; }


/* --------------------------------------------------------------------------
   News: grosse Updates, neueste zuerst
   -------------------------------------------------------------------------- */

.screen--news {
  overflow: clip;
  background:
    radial-gradient(circle at 80% 20%, var(--mood-c) 0, transparent 34%),
    linear-gradient(200deg, var(--mood-ink) 0%, var(--mood-b) 52%, var(--mood-a) 115%);
}
.screen--news::before {
  content: 'NEWS';
  position: absolute;
  left: -2vw;
  bottom: -6vh;
  font-family: var(--f-display);
  font-size: 26vw;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, .14);
  transform: none; font-style: italic;
  pointer-events: none;
}
.nw__feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 900px;
  padding: 4px 12px 16px 4px;
}
.nw-post {
  flex: none;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--snow);
  box-shadow: var(--lift);
}
.nw-post__media { display: grid; gap: 2.5px; background: var(--ink); border-bottom: 1px solid var(--edge); }
.nw-post__media--2 { grid-template-columns: 1.4fr 1fr; }
.nw-post__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nw-post__body { padding: 16px 20px 20px; }
.nw-post__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.nw-post__meta b { padding: 2px 8px; border-radius: 999px; background: var(--signal); color: var(--snow); font-weight: 700; opacity: 1; }
.nw-post__title { margin: 8px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: .95; text-transform: uppercase; }
.nw-post__text { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) {
  .nw-post__media--2 { grid-template-columns: 1fr; }
  .nw-post__body { padding: 12px 14px 16px; }
}


/* Steuerung: frei belegbare Tasten */
.key-edit {
  min-width: 46px;
  padding: 4px 9px;
  margin-left: 6px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--snow);
  box-shadow: var(--lift-sm);
  font: 700 12px/1.2 var(--f-mono, ui-monospace, monospace);
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.key-edit:hover, .key-edit:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--signal), var(--lift); outline: none; }
.key-edit.is-empty { color: rgba(17, 17, 17, .4); border-style: dashed; box-shadow: none; }
.key-edit.is-listening { background: var(--signal); color: var(--snow); animation: keyPulse .9s ease-in-out infinite; }
@keyframes keyPulse { 50% { box-shadow: var(--lift-sm), 0 0 0 4px rgba(255, 79, 31, .25); } }
.keys-note { margin: 12px 0 8px; font-size: 11px; opacity: .65; }
.keys-reset { margin-top: 4px; }

/* Handy quer (alle Breiten): Notch-Ränder frei, untere Leiste schmal,
   Locker kompakt in einer Reihe */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --info-h: 40px;
    --gutter: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  .dock { padding: 0 var(--gutter) env(safe-area-inset-bottom); }
  .dock__nav { gap: 0; min-width: 0; }
  .dock__tab { padding: 0 10px; font-size: .95rem; }
  .dock__soon,
  .dock__more,
  .dock__clock { display: none; }
  .lk { max-height: calc(100dvh - var(--st) - var(--info-h) - 44px); padding: 8px 10px; gap: 6px; }
  .lk__sec { font-size: 18px; }
  .lk__grid--4 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .lk-card { box-shadow: var(--lift-sm); aspect-ratio: 1 / 1.1; }
  .lk-card__img { inset: 0 0 34% 0; }
  .lk-card__dot { width: 11px; height: 11px; top: 5px; right: 5px; }
  .lk-card__label { font-size: 7px; letter-spacing: .08em; }
  .lk-card__name { font-size: 12px; }
  /* Untermenüs: breiter, Texte kleiner, nichts bricht um */
  .panel--sub { width: min(680px, calc(100vw - var(--gutter) * 2)); }
  .row__label { font-size: 1rem; white-space: nowrap; }
  /* Parks / Community: Kopf in einer Zeile, Liste darunter scrollt */
  .cm { inset: 0 0 var(--info-h); gap: 8px; padding: 8px var(--gutter) 8px; }
  .cm__head { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .cm__title, .pk .cm__title { font-size: 2rem; margin: 0; }
  .cm__head .acc__eyebrow { display: none; }
  .cm__tools { flex-wrap: nowrap; gap: 6px; }
  .cm__search, .pk .cm__search { width: min(180px, 26vw); padding: 6px 10px; font-size: 12px; box-shadow: var(--lift-sm); }
  .cm__tabs .chip, .pk__seg .seg__btn { padding: 4px 10px; font-size: 11px; }
  .cm__grid, .pk__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .panel--locker { top: calc(var(--st) + 22px); max-height: calc(100dvh - var(--st) - var(--info-h) - 30px); width: min(560px, 58vw); }
}