/* ==========================================================================
   theme.css – Look: ein Game, aber aufgeräumt und auf allen Seiten gleich
   Liegt über menu.css. Gleiche Bausteine überall: dunkles Glas für Panels
   und Karten, Orange als einziger Akzent (Hauptaktion, Auswahl), die
   kursive Anton-Schrift für Titel, ein einziger Etiketten-Stil.
   Bewusst NICHT: schräge Sticker, Tickets mit Barcode/Stempel, Muster und
   Strahlen auf Karten, bunte Pillen. (Die grossen Umriss-Wörter im
   Hintergrund bleiben – gewünscht.)
   Grundbausteine (Schatten, Ränder, Ecken, Titel) sind in menu.css auf
   diese Variablen umgestellt; hier die Feinheiten je Screen.
   ========================================================================== */

:root {
  --r-card: 16px;
  --shine: inset 0 1px 0 rgba(255, 255, 255, .28);
  --lift: 0 10px 28px rgba(8, 14, 30, .28), 0 2px 6px rgba(8, 14, 30, .18);
  --lift-hi: 0 16px 38px rgba(8, 14, 30, .34), 0 3px 8px rgba(8, 14, 30, .2);
  --lift-sm: 0 4px 14px rgba(8, 14, 30, .18), 0 1px 3px rgba(8, 14, 30, .12);
  --edge: rgba(17, 17, 17, .14);           /* feine Linie statt schwarzer Rand */
  --sticker: 0 3px 10px rgba(8, 14, 30, .28);
  /* feine Texturen */
  --tx-lines: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px);
  --tx-dots: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px) 0 0 / 7px 7px;
  --glass-dark: rgba(14, 17, 24, .66);
}

/* --------------------------------------------------------------------------
   Startseite: Marke
   -------------------------------------------------------------------------- */
.screen--main .brand__logo {
  color: #fff;
  text-shadow: 0 3px 18px rgba(8, 14, 30, .35);
}
.screen--main .brand__meta {
  color: #fff;
  opacity: .85;
  text-shadow: 0 1px 8px rgba(8, 14, 30, .4);
}

/* --------------------------------------------------------------------------
   Startseite: Karten
   -------------------------------------------------------------------------- */
.screen--main .hub { gap: 10px; }

.screen--main .card {
  border: 0;
  border-radius: var(--r-card);
  color: #fff;
  box-shadow: var(--lift), var(--shine);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s ease;
}
.screen--main .card:hover,
.screen--main .card:focus {
  transform: translateY(-3px);
  box-shadow: var(--lift-hi), var(--shine), 0 0 0 2px rgba(255, 255, 255, .9);
  filter: brightness(1.05);
}
.screen--main .card:active { transform: translateY(0) scale(.99); box-shadow: var(--lift), var(--shine); }

/* Titel: kräftig, leicht kursiv (statt verzerrt), weicher Schatten */
.screen--main .card__title {
  transform: none;
  font-style: italic;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(8, 14, 30, .25);
}
.screen--main .card__meta {
  color: rgba(255, 255, 255, .86);
  font-weight: 600;
}

/* Park: Verlauf in den Farben der Tageszeit, Berge bleiben */
.screen--main .card--park {
  background: linear-gradient(160deg, var(--mood-b) 0%, var(--mood-a) 100%);
}
.screen--main .card__sun { display: none; }
.screen--main .card--park .card__title { text-shadow: 0 3px 14px rgba(8, 14, 30, .3); }
.screen--main .card--park .card__meta { color: var(--ink); }
.screen--main .card__near { opacity: .95; }
.screen--main .card__far { opacity: .28; }
.screen--main .card__link { font-weight: 700; }
.screen--main .card__link::after { content: ' →'; }

/* Sticker: Park-Nummer, "New" */
.screen--main .card__chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(8, 10, 16, .35);
  color: #fff;
}
.screen--main .card__top { color: #fff; text-shadow: 0 1px 6px rgba(8, 14, 30, .3); }
.screen--main .card__badge {
  padding: 2px 7px;
  border: 0;
  border-radius: 4px;
  background: var(--signal);
  color: #fff;
  font-weight: 700;
}

/* Locker, Controls: dunkles Glas wie alle Panels, Symbol in Orange */
.screen--main .card--locker,
.screen--main .card--controls {
  color: #fff;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--lift), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.screen--main .card--locker .card__icon,
.screen--main .card--controls .card__icon { color: var(--signal); }
.screen--main .card--controls .card__cut { stroke: rgba(14, 17, 24, .9); }
.screen--main .card__icon svg { filter: drop-shadow(0 2px 4px rgba(8, 14, 30, .25)); }

/* Drop in: die Hauptaktion – Orange mit Strahlen und Glow */
.screen--main .card--ride {
  color: #fff;
  background: linear-gradient(120deg, #ff6a33 0%, #ff4f1f 60%, #f0401a 100%);
  box-shadow: 0 10px 26px rgba(255, 79, 31, .32), 0 2px 6px rgba(120, 30, 0, .22), var(--shine);
}
.screen--main .card--ride:hover,
.screen--main .card--ride:focus {
  box-shadow: 0 18px 46px rgba(255, 79, 31, .6), 0 3px 8px rgba(120, 30, 0, .28), var(--shine), 0 0 0 2px #fff;
}
.screen--main .card--ride .card__title { font-size: clamp(2.8rem, 4.2vw, 3.8rem); }
.screen--main .card--ride .card__meta { color: rgba(255, 255, 255, .9); }
.screen--main .card__arrow { color: #fff; }
.screen--main .keycap {
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 5px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
}

/* Links darunter: dunkle Glas-Knöpfe wie die Karten */
.screen--main .chip {
  border: 0;
  border-radius: 10px;
  background: rgba(14, 17, 24, .86);   /* dichter: heller Schnee dahinter */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  box-shadow: var(--lift-sm), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .2s var(--ease-out), background .2s linear, box-shadow .2s ease;
}
.screen--main .chip:hover,
.screen--main .chip:focus { transform: translateY(-2px); background: rgba(24, 28, 38, .86); box-shadow: var(--lift), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.screen--main .chip .tag { border: 0; background: var(--signal); color: #fff; }

/* --------------------------------------------------------------------------
   Startseite: Fahrer-Schild und Tagespass
   -------------------------------------------------------------------------- */
.screen--main .avatar__plate {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sticker);
}

.screen--main .ticket {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  /* Saison-Pass: Abendhimmel-Farben wie der Rider-Pass im Account */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 122, 69, .55), transparent 60%),
    linear-gradient(150deg, #2b2f7a 0%, #6a2d84 55%, #c43a63 100%);
  color: #fff;
  box-shadow: var(--lift), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.screen--main .ticket__body { border-top: 4px solid var(--signal); }
.screen--main .ticket__row { color: rgba(255, 255, 255, .8); }
.screen--main .ticket__big { text-shadow: 0 3px 14px rgba(20, 10, 50, .45); }
.screen--main .ticket__stub,
.screen--main .ticket__body::before,
.screen--main .ticket__body::after { display: none; }
.screen--main .ticket__record { border-color: rgba(255, 255, 255, .25); }

/* --------------------------------------------------------------------------
   Untere Leiste: dunkles Glas, Symbole, aktiver Tab als orange Linie
   -------------------------------------------------------------------------- */
/* gleiches dunkles Glas wie Locker/Controls (etwas dichter, weil hier
   heller blauer Schnee dahinter liegt und es sonst blau wirkt) */
.dock {
  background: rgba(14, 17, 24, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.dock__tab { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.dock__tab:hover,
.dock__tab:focus-visible,
.dock__tab.is-current { color: #fff; }
.dock__tab::after {
  top: auto;
  bottom: 8px;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 3px;
}
.dock__tab.is-locked { color: rgba(255, 255, 255, .4); }

/* Symbole vor den Tabs (Linien-Icons als Maske, Farbe = Textfarbe) */
.dock__nav .dock__tab::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.dock__tab[data-action="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 20h18L14 7l-3 5-2-3z'/%3E%3C/svg%3E"); }
.dock__tab[data-action="locker"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 3 3 6l2 5 2-1v11h10V10l2 1 2-5-5-3c-.5 1.7-2 3-4 3S8.5 4.7 8 3z'/%3E%3C/svg%3E"); }
.dock__tab[data-action="friends"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.8c1.8.8 3 2.5 3.5 5.2'/%3E%3C/svg%3E"); }
.dock__tab[data-action="party"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.9 4.9a10 10 0 0 0 0 14.2M19.1 4.9a10 10 0 0 1 0 14.2'/%3E%3C/svg%3E"); }
.dock__tab[data-action="news"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.dock__tab[data-action="locked"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9h16l-1.5 11h-13z'/%3E%3Cpath d='M8.5 9V7a3.5 3.5 0 0 1 7 0v2'/%3E%3C/svg%3E"); }
.dock__soon { border-radius: 4px; }

/* --------------------------------------------------------------------------
   HUD: schwarze Etiketten als runde Sticker, Karten weich
   -------------------------------------------------------------------------- */
.hud__state,
.hud__score-label,
.hud__trick-pts,
.hud__delta { border-radius: 6px; box-shadow: var(--sticker); }
.hud__kmh,
.hud__score-num { text-shadow: 0 2px 14px rgba(8, 14, 30, .25); }
.liftcard { border: 0; box-shadow: var(--lift-hi), var(--shine); }

/* --------------------------------------------------------------------------
   Hintergrundbild der Menüs (menubg.js): scharf, links leicht abgedunkelt
   für die Karten, in Untermenüs dunkler getönt
   -------------------------------------------------------------------------- */
.menu-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #0c1220 center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, background-image .6s ease;
}
.menu-bg.is-on { opacity: 1; }
.menu-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 12, 24, .5) 0%, rgba(8, 12, 24, .18) 38%, transparent 60%),
    linear-gradient(0deg, rgba(8, 12, 24, .35) 0%, transparent 22%);
}
/* alle Menü-Seiten zeigen das Bild, abgedunkelt (Pause/Ergebnis liegen über dem Spiel) */
body.has-menu-bg .screen--sub:not(.screen--pause):not(.screen--results),
body.has-menu-bg .screen--parks,
body.has-menu-bg .screen--news,
body.has-menu-bg .screen--friends,
body.has-menu-bg .screen--party,
body.has-menu-bg .screen--account,
body.has-menu-bg .screen--builder {
  background: linear-gradient(135deg, rgba(8, 14, 30, .62) 0%, rgba(8, 14, 30, .3) 100%);
}

/* --------------------------------------------------------------------------
   Ladebildschirm: Bild (assets/bg/…/loading.jpg), unten Park-Name,
   schlanker Ladebalken, darunter ein Tipp
   -------------------------------------------------------------------------- */
.loader.has-img { background-color: #0b1220; background-position: center; background-size: cover; background-repeat: no-repeat; }
.loader.has-img .loader__art { display: none; }
.loader.has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 10, 22, .82) 0%, rgba(6, 10, 22, .38) 32%, transparent 58%),
    linear-gradient(180deg, rgba(6, 10, 22, .35) 0%, transparent 18%);
  pointer-events: none;
}
.loader.has-img .loader__main { margin-top: auto; margin-bottom: 18px; padding-top: 0; }
.loader.has-img .loader__title { font-size: clamp(3rem, 7.5vw, 6.5rem); color: #fff; text-shadow: 0 4px 24px rgba(6, 10, 22, .45); }
.loader.has-img .loader__sub,
.loader.has-img .loader__top { color: #fff; text-shadow: 0 1px 8px rgba(6, 10, 22, .5); }
.loader.has-img .loader__kicker { box-shadow: var(--sticker); }

/* schlanker Balken (auch ohne Bild) */
.loader__foot { width: min(760px, 100%); color: #fff; }
.loader__row { margin-bottom: 8px; font-size: 11px; justify-content: flex-end; }
.loader__step { display: none; }
.loader__bar {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
  box-shadow: none;
}
.loader__bar::after { display: none; }
.loader__fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a4f, var(--signal));
  box-shadow: 0 0 14px rgba(255, 79, 31, .7);
}
.loader__tip {
  margin-top: 14px;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(6, 10, 22, .5);
}
.loader__tip b {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 0;
  border-radius: 5px;
  background: var(--signal);
  color: #fff;
  box-shadow: var(--sticker);
}

/* --------------------------------------------------------------------------
   Dunkles Glas für alle Panels, Formulare und Dialoge
   Trick: in diesen Flächen werden Tinte und Schnee getauscht – Schrift,
   Linien, Eingabefelder, Tasten und Knöpfe drehen automatisch mit.
   Objekte (Locker-Kacheln, Ticket, Rider-Pass, Park-Karten) bleiben hell.
   -------------------------------------------------------------------------- */
:root {
  --dg-bg: rgba(14, 18, 28, .74);
  --dg-line: rgba(255, 255, 255, .13);
  --dg-dim: rgba(255, 255, 255, .6);
}
.panel,
.acc__left,
.fr__left,
.fr-row,
.pt__left,
.pt__board,
.vs,
.nw-post,
.pk-pop__box,
.confirm__box,
.pt-picker__box,
.invite,
.map__panel,
.np {
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
  color: var(--ink);
}
.panel,
.acc__left,
.fr__left,
.pt__left,
.pt__board,
.vs,
.nw-post,
.pk-pop__box,
.confirm__box,
.pt-picker__box,
.invite,
.map__panel,
.np {
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--dg-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.fr-row { background: rgba(255, 255, 255, .05); }

/* Objekte bleiben hell (eigene Farben zurück) */
.swatch, .pass, .ticket {
  --ink: #111111;
  --snow: #F2EFE8;
  --edge: rgba(17, 17, 17, .14);
}

/* feste helle Farben in den Panels */
.panel .row:focus { background: rgba(255, 255, 255, .09); box-shadow: inset 4px 0 0 var(--signal); }
.panel .rows--tail { border-top: 1px dashed var(--dg-line); }
.panel .row { border-bottom-color: var(--dg-line); }
.panel .row__num, .panel .row__value { color: var(--dg-dim); }
.panel .row:focus .row__num { color: var(--signal); }
.panel .row:focus .choice__opt.is-on { color: #fff; }
.panel .panel__foot { background: rgba(0, 0, 0, .22); border-top: 1px solid var(--dg-line); color: var(--dg-dim); }
.pk-pop__top, .pk-pop__stats div { background: rgba(255, 255, 255, .06) !important; }
.pt__full, .pk-sel, .pk__seg { background: rgba(255, 255, 255, .1) !important; }
.field__input::placeholder { color: rgba(255, 255, 255, .4); }

/* Eingabefelder, Umschalter, Balken und Etiketten in dunklen Panels */
.acc__left .field__input,
.panel .field__input,
.pk-pop__box .field__input,
.confirm__box .field__input {
  background: rgba(255, 255, 255, .07);
  border-color: var(--dg-line);
  color: #fff;
}
.acc__left .field__input:focus,
.panel .field__input:focus { border-color: var(--signal); background: rgba(255, 255, 255, .1); }
.acc__left .seg,
.panel .seg,
.fr__left .seg,
.pt__left .seg { background: rgba(255, 255, 255, .08); }
.vs-bar { background: rgba(255, 255, 255, .08) !important; }
.tag { color: #111; }

/* alle Eingabefelder dunkel (alle Menüs liegen jetzt auf dunklem Grund) */
.field__input,
.cm__search,
.lk__redeem-input {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--dg-line) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.field__input:focus,
.cm__search:focus,
.lk__redeem-input:focus { border-color: var(--signal) !important; background: rgba(255, 255, 255, .11) !important; }
.field__input::placeholder,
.cm__search::placeholder,
.lk__redeem-input::placeholder { color: rgba(255, 255, 255, .42); }

/* Party: Park-Karten dunkel, Beta-Label lesbar */
.pt-park,
.pt-sel { background: rgba(255, 255, 255, .07) !important; color: #fff; border-color: var(--dg-line); }
.pt-park.is-on { background: #fff !important; color: #111; }
.pt__beta { background: #fff; color: #111; border: 0; }

/* Locker: Kacheln dunkel statt cremeweiss, Fahrer-Vorschau bleibt gut sichtbar */
.lk-card,
.lk-opt {
  background: radial-gradient(120% 90% at 50% 15%, #3a4357 0%, #232a39 62%, #1a202c 100%) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}
.lk-card__label { color: rgba(255, 255, 255, .62); opacity: 1; }
.lk-card__name { color: #fff; }
.lk-card.is-active,
.lk-opt.is-on { border-color: var(--signal) !important; }
.lk-back { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--dg-line); }
.lk__saved { color: rgba(255, 255, 255, .7); border-color: var(--dg-line); }
.lk-card__text { background: linear-gradient(180deg, rgba(20, 25, 36, 0) 0%, rgba(20, 25, 36, .92) 42%) !important; }
.lk-opt__name { background: linear-gradient(180deg, rgba(20, 25, 36, 0) 0%, rgba(20, 25, 36, .9) 45%) !important; color: #fff; }

/* ==========================================================================
   HUD im Spiel: sauber und ruhig – weisse Zahlen mit weichem Schatten,
   Hinweise als dunkle Glas-Pillen, schlanke runde Balken, Orange als Akzent
   ========================================================================== */
:root {
  --hud-glass: rgba(12, 16, 26, .55);
  --hud-line: rgba(255, 255, 255, .16);
  --hud-shadow: 0 2px 12px rgba(6, 10, 22, .55), 0 1px 2px rgba(6, 10, 22, .5);
}
.hud .hud__score-num,
.hud .hud__kmh,
.hud .hud__combo-pot,
.hud .hud__trick-name {
  -webkit-text-stroke: 0;
  color: #fff;
  text-shadow: var(--hud-shadow);
}
.hud .hud__score-num.is-minus { color: #ff7a52; }
.hud .hud__unit { color: #fff; text-shadow: var(--hud-shadow); }

/* Glas-Pillen */
.hud .hud__score-label,
.hud .hud__state,
.hud .hud__live,
.hud .hud__slide,
.hud .hud__balance-label,
.hud .hud__lifthint,
.hud .hud__trick-rating,
.hud .hud__delta.is-plus,
.hud .hud__note {
  border: 1px solid var(--hud-line);
  border-radius: 999px;
  background: var(--hud-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 4px 16px rgba(6, 10, 22, .25);
}
.hud .hud__score-label,
.hud .hud__state { padding: 3px 10px; letter-spacing: .12em; }
.hud .hud__state.is-air { background: rgba(255, 255, 255, .92); color: #111; }
.hud .hud__state.is-crash { background: var(--signal); border-color: var(--signal); }
.hud .hud__live { padding: 5px 14px; font-size: 13px; }
.hud .hud__slide { padding: 6px 14px; }
.hud .hud__slide b,
.hud .hud__lifthint b,
.hud .hud__balance-keys b,
.hud .hud__hint b {
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 5px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.hud .hud__balance-keys,
.hud .hud__hint { color: #fff; text-shadow: var(--hud-shadow); }
.hud .hud__balance-label { padding: 4px 14px 3px; }

/* Pop-Balken: schlank, rund, ohne Kästchen */
.hud .hud__pop-label,
.hud .hud__pop-max { color: #fff; text-shadow: var(--hud-shadow); letter-spacing: .12em; }
.hud .hud__pop-bar {
  height: 8px;
  border: 1px solid var(--hud-line);
  border-radius: 999px;
  background: var(--hud-glass);
  box-shadow: 0 4px 14px rgba(6, 10, 22, .3);
}
.hud .hud__pop-bar::after { display: none; }
.hud .hud__pop-fill { background: linear-gradient(90deg, rgba(255, 255, 255, .75), #fff); border-radius: 999px; }
.hud .hud__pop.is-full .hud__pop-fill { background: linear-gradient(90deg, #ff8a4f, var(--signal)); box-shadow: 0 0 14px rgba(255, 79, 31, .8); }
.hud .hud__pop.is-full .hud__pop-max { color: #ff8a4f; }

/* Rail-Fortschritt */
.hud .hud__balance-bar { height: 6px; border: 1px solid var(--hud-line); background: var(--hud-glass); }
.hud .hud__balance-track { background: linear-gradient(90deg, #ff8a4f, var(--signal)); border-radius: 999px; }

/* Combo */
.hud .hud__combo-mult { border-radius: 999px; padding: 2px 8px; background: var(--signal); color: #fff; box-shadow: 0 2px 10px rgba(255, 79, 31, .5); }
.hud .hud__combo-timer { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.hud .hud__combo-fill { background: #fff; border-radius: 999px; }

/* Punkte-Gutschrift */
.hud .hud__delta { border-radius: 999px; padding: 3px 10px; }
.hud .hud__delta.is-minus { background: var(--signal); color: #fff; }

/* Trick nach der Landung: grosser weisser Name, Punkte als orange Pille */
.hud .hud__trick-name { font-style: italic; letter-spacing: .01em; }
.hud .hud__trick.is-bad .hud__trick-name { color: #ff7a52; }
.hud .hud__trick-rating,
.hud .hud__trick-pts { padding: 4px 12px; font-size: 12px; }
.hud .hud__trick-rating.is-perfect { background: rgba(255, 255, 255, .92); color: #111; }
.hud .hud__trick-rating.is-sketchy { border-style: dashed; }
.hud .hud__trick-pts {
  border: 0;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 79, 31, .45);
}
.hud .hud__lifthint { padding: 9px 18px 8px; }

/* --------------------------------------------------------------------------
   Park Builder: dunkles Glas wie die anderen Panels
   -------------------------------------------------------------------------- */
.pb-panel,
.pb-palette,
.pb-side {
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
  color: var(--ink);
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--dg-line) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pb-input {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--dg-line) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.pb-input:focus { border-color: var(--signal) !important; }
.pb-input::placeholder { color: rgba(255, 255, 255, .4); }
.pb-step {
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--dg-line) !important;
  color: rgba(255, 255, 255, .7);
}
.pb-step.is-done { color: #fff; }
.pb-step.is-on { background: #fff !important; color: #111; }
.pb-card,
.pb-tool {
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--dg-line) !important;
  color: #fff;
}
.pb-card:hover, .pb-card:focus, .pb-tool:hover, .pb-tool:focus { background: rgba(255, 255, 255, .13) !important; }
.pb-card.is-on { background: #fff !important; color: #111; }
.pb-tool.is-on { background: var(--signal) !important; color: #fff; }

/* Park- und Community-Karten: dunkel wie die Locker-Kacheln */
.cm-card {
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--dg-line) !important;
  color: var(--ink);
}
.pk-card__best { background: rgba(255, 255, 255, .08) !important; }

/* Tabs über den Parks (liegen direkt auf dem Hintergrund) */
.pk__seg .seg__btn { color: rgba(255, 255, 255, .75); }
.pk__seg .seg__btn.is-on { background: #fff !important; color: #111; }

/* Ergebnis: wie die Pause – das Spiel bleibt dahinter sichtbar, abgedunkelt */
.screen--results {
  background:
    linear-gradient(90deg, rgba(8, 12, 22, .72) 0%, rgba(8, 12, 22, .35) 70%) !important;
}

/* ==========================================================================
   Handy quer (iPhone & Co.): kompakt, Notch und Home-Balken berücksichtigt
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --sa-l: env(safe-area-inset-left, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
  }
  /* untere Leiste als schwebende Glas-Pille über dem Home-Balken,
     aktiver Tab als helle Pille (keine Linie) */
  :root { --info-h: 56px; --dock-b: max(6px, calc(var(--sa-b) - 8px)); }
  .dock {
    left: calc(10px + var(--sa-l));
    right: calc(10px + var(--sa-r));
    bottom: var(--dock-b);
    height: 40px;
    padding: 0 5px 0 6px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(12, 16, 26, .62);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
  .dock__nav { align-items: center; gap: 2px; }
  .dock__tab {
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: .8rem;
    letter-spacing: .08em;
    gap: 6px;
  }
  .dock__tab::after { display: none; }
  .dock__tab.is-current { background: rgba(255, 255, 255, .14); color: #fff; }
  .dock__nav .dock__tab::before { width: 14px; height: 14px; }
  .dock__tab.is-current::before { background: var(--signal); }
  .dock__account { height: 30px; padding: 0 10px 0 4px; }
  .dock__avatar { width: 24px; height: 24px; font-size: .75rem; }
  .dock__soon { display: none; }
  /* Inhalte enden mit gleichmässigem Abstand über der Leiste */
  .screen { bottom: calc(40px + var(--dock-b) + 8px) !important; }
  .screen--pause, .screen--results { bottom: 0 !important; }

  /* Startseite: Logo klein, Karten schlank, alles links in einer ruhigen Spalte */
  .screen--main .brand { top: 10px; left: calc(14px + var(--sa-l)); }
  .screen--main .brand__logo { font-size: 1.5rem; }
  /* Karten unten links über der Leiste verankert (feste Grössen, auf jedem
     Gerät gleich), darüber bleibt Luft für Logo und Dorf */
  .screen--main .hub {
    left: calc(14px + var(--sa-l));
    top: auto;
    bottom: 10px;
    width: min(420px, 50vw);
    gap: 7px;
    grid-template-rows: none;
    align-content: end;
  }
  .screen--main .card { padding: 8px 12px; border-radius: 12px; min-height: 0; gap: 1px; }
  .screen--main .card__title { font-size: 1.05rem; }
  .screen--main .card__meta,
  .screen--main .card__top { font-size: 8px; letter-spacing: .08em; }
  .screen--main .card__chip { padding: 2px 6px; }
  .screen--main .card--park { min-height: 78px !important; padding: 10px 12px; }
  .screen--main .card--locker,
  .screen--main .card--controls { min-height: 56px !important; }
  .screen--main .card--ride { min-height: 66px !important; }
  .screen--main .card--park .card__title { font-size: 1.45rem; }
  .screen--main .card--ride { padding: 9px 14px; }
  .screen--main .card--ride .card__title { font-size: 1.6rem; white-space: nowrap; }
  .screen--main .card__arrow { font-size: 1.4rem; }
  .screen--main .keycap { display: none; }
  .screen--main .card__badge { top: 6px; right: 8px; padding: 1px 6px; font-size: 7px; }
  .screen--main .hub__chips { gap: 5px; }
  .screen--main .chip { padding: 4px 9px; font-size: 10px; letter-spacing: .06em; }
  .screen--main .chip .tag { font-size: 7px; }
  /* Fahrer rechts gross, Namensschild klein */
  .screen--main .avatar { height: calc(100dvh - 62px - var(--dock-b)); width: 42vw; }
  .screen--main .avatar__plate { padding: 3px 10px; }
  .screen--main .avatar__name { font-size: .8rem; }
  .screen--main .avatar__num { display: none; }
  .screen--main .ticket { display: none; }
  .showcase { right: calc(8px + var(--sa-r)); bottom: 4px; }

  /* Untermenüs: Platz für Notch und Leiste */
  .subtitle { left: calc(14px + var(--sa-l)); }
  .panel--sub, .panel--locker, .panel--results, .panel--pause { left: calc(14px + var(--sa-l)); }
}
}

/* ==========================================================================
   Zusammenfassung nach dem Ziel (Run complete)
   Gross: Gesamtpunkte, rechts daneben die Aufschlüsselung, darunter
   Kennzahlen, bester Trick und die Aktionen ("Ride again" = Lift)
   ========================================================================== */
.panel--results { width: min(860px, 64vw); }
.panel--results .result { padding: 18px 22px 10px; }
.panel--results .result__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dg-line);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dg-dim);
}
.panel--results .result__head b { color: #fff; margin-left: 6px; }
.result__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: center;
  padding: 14px 0 12px;
}
.panel--results .result__score { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; }
.panel--results .result__score .mono { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dg-dim); }
.panel--results .result__score b {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 6.4vw, 5.6rem);
  font-style: italic;
  line-height: .95;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.panel--results .result__badge {
  margin-top: 6px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  font-size: 10px;
  letter-spacing: .1em;
  box-shadow: 0 4px 14px rgba(255, 79, 31, .45);
}
.result__break { list-style: none; margin: 0; padding: 0; }
.result__break li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--dg-line);
}
.result__break li:last-child { border-bottom: 0; }
.result__break span { font-size: 13px; font-weight: 600; color: #fff; }
.result__break small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; color: var(--dg-dim); }
.result__break b { font-family: var(--f-display); font-size: 1.5rem; font-style: italic; color: #fff; }
.result__break li.is-minus b { color: #ff7a52; }
.panel--results .result__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--dg-line);
  border-bottom: 1px solid var(--dg-line);
}
.panel--results .result__grid div { padding: 0 10px 0 0; border: 0 !important; }
.panel--results .result__grid dt { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-dim); }
.panel--results .result__grid dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 1.7rem; font-style: italic; color: #fff; }
.panel--results .result__grid small { margin-left: 4px; font-family: var(--f-mono); font-size: 9px; font-style: normal; color: var(--dg-dim); }
.panel--results .result__best {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0 4px;
  border: 0;
}
.panel--results .result__best .mono { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-dim); }
.panel--results .result__best b { flex: 1; font-size: 13px; color: #fff; }
.panel--results .result__best em { font-family: var(--f-display); font-size: 1.4rem; color: #ff8a62; }
.result__mini { display: flex; gap: 22px; margin: 6px 0 0; font-size: 10px; color: var(--dg-dim); }
.result__mini div { display: flex; gap: 6px; }
.result__mini dd { margin: 0; color: #fff; font-weight: 600; }

/* Aktionen: "Ride again" als grosser orange Knopf */
.result__actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 12px 22px 16px !important; border-top: 0 !important; }
.result__actions .row {
  grid-template-columns: 1fr !important;
  padding: 12px 14px !important;
  border: 1px solid var(--dg-line) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}
.result__actions .row__num { display: none; }
.result__actions .row__label { font-size: 1.15rem !important; }
.result__actions .row__sub { margin-top: 2px; color: rgba(255, 255, 255, .8); }
.result__actions .row:focus { transform: translateY(-2px); background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 2px #fff; }
.result__actions .row--primary {
  border-color: transparent !important;
  background:
    repeating-conic-gradient(from 0deg at 92% 50%, rgba(255, 255, 255, .09) 0 5deg, transparent 5deg 13deg),
    linear-gradient(120deg, #ff7a3d 0%, #ff4f1f 60%, #f23a16 100%);
  box-shadow: 0 10px 30px rgba(255, 79, 31, .4);
}
.result__actions .row--primary:focus { background: linear-gradient(120deg, #ff8a4f, #ff5a28); box-shadow: 0 0 0 2px #fff, 0 12px 34px rgba(255, 79, 31, .5); }

@media (max-height: 560px), (max-width: 900px) {
  .panel--results { width: auto; right: var(--gutter); }
  .result__top { grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 0; }
  .panel--results .result__score b { font-size: 3rem; }
  .result__break li { padding: 5px 0; }
  .result__break b { font-size: 1.15rem; }
  .panel--results .result__grid dd { font-size: 1.2rem; }
  .result__mini { display: none; }
  .result__actions { padding: 8px 14px 10px !important; }
  .result__actions .row { padding: 8px 10px !important; }
  .screen--results .receipt { display: none; }
}

/* Handy/Tablet: keine Tastatur-Hinweise */
.has-touch-ui .keycap,
.has-touch-ui .panel__foot,
.has-touch-ui .hud__hint,
.has-touch-ui .liftskip__btn b,
.has-touch-ui .liftcard__skip,
.has-touch-ui .keys-note,
.has-touch-ui .row[data-key="mouseSens"],
.has-touch-ui [data-action="keys-reset"] { display: none !important; }

/* Letzte helle Flächen: Vorteile-Liste, Vergleichskopf, Tafel-Köpfe, Trickliste dunkel */
.perks li {
  background: rgba(14, 18, 28, .62) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--dg-line) !important;
  color: #fff !important;
}
.vs__head,
.board__head {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--dg-line);
  color: #fff !important;
}
.receipt {
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--dg-line) !important;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
}
.receipt li, .receipt__head, .receipt__total { border-color: var(--dg-line) !important; }
.receipt__barcode { opacity: .5; filter: invert(1); }

/* Park-Karte: gezeichnete Schneeberge nicht mehr reinweiss */
.screen--main .card__near { fill: #dfe6f0; opacity: .5; }
.screen--main .card__far { opacity: .22; }
.screen--main .card--park .card__meta { color: #fff; }
/* Etiketten (Your crew, Steezers account …) in dunklen Panels: kleine helle Pille */
.acc__eyebrow { display: inline-block !important; align-self: flex-start; justify-self: start; width: auto !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.vs__name { color: #fff; }

/* Startseite (PC): Fahrer tiefer, steht knapp über der unteren Leiste */
.screen--main .showcase { bottom: 0; }
/* Namensschild unter die Ski (nicht über die Füsse) */
.screen--main .avatar canvas { height: calc(100% - 44px); }
.screen--main .avatar__plate { bottom: 6px; }

/* ==========================================================================
   Friends: grosses Duell statt kleiner schiefer Tabelle
   ========================================================================== */
.fr { grid-template-columns: minmax(0, 480px) minmax(0, 560px); gap: clamp(20px, 3vw, 44px); }
.fr__left { padding: 24px 24px 18px; }
.fr .acc__title { font-size: clamp(3rem, 5vw, 4.4rem); }

/* Freunde als Karten */
.fr-row {
  padding: 10px 12px !important;
  border: 1px solid var(--dg-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .05) !important;
  transition: background .2s ease, transform .2s var(--ease-out), border-color .2s ease;
}
.fr-row:hover { background: rgba(255, 255, 255, .09) !important; transform: translateY(-1px); }
.fr-row.is-active { border-color: var(--signal) !important; background: rgba(255, 79, 31, .12) !important; box-shadow: none !important; }
.fr-row__name { font-size: 1.25rem; color: #fff; }
.fr-row__meta { color: rgba(255, 255, 255, .55); }
.fr .fr-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
.fr-row.is-active .fr-avatar { border-color: var(--signal); }
.fr__empty { padding: 18px; border: 1px dashed var(--dg-line); border-radius: 14px; color: rgba(255, 255, 255, .6); text-align: center; }

/* Duell-Karte */
.vs { transform: none !important; border-radius: 20px !important; }
.vs__head {
  position: relative;
  padding: 22px 20px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 79, 31, .55) 0%, rgba(255, 79, 31, .08) 46%, rgba(60, 140, 255, .08) 54%, rgba(60, 140, 255, .55) 100%) !important;
}
.vs__rider { flex-direction: column; gap: 8px !important; text-align: center; }
.vs__rider--them { flex-direction: column !important; }
.vs .fr-avatar { width: 72px !important; height: 72px !important; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.vs__name { font-size: 1.5rem !important; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.vs__mid {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-style: italic;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.vs__rows { padding: 14px 20px 8px !important; }
.vs-row { margin-bottom: 10px; }
.vs-row dt { justify-content: center !important; font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
.vs-row dt span:nth-child(2) { display: none; }
.vs-row dd { gap: 8px !important; }
.vs-bar {
  height: 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .07) !important;
}
.vs-bar i { border-radius: 999px; }
.vs-bar--me i { background: linear-gradient(270deg, #ff8a4f, #ff4f1f) !important; }
.vs-bar--them i { background: linear-gradient(90deg, #6fb0ff, #3c8cff) !important; }
.vs-bar b { font-size: 12px !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important; }
.vs-bar--me b { left: 10px !important; }
.vs-bar--them b { right: 10px !important; }
.vs-bar.is-lead b::after { content: ' ★'; color: #ffd36b; }
.vs__foot { border-top: 1px solid var(--dg-line) !important; padding: 12px 20px 16px !important; color: rgba(255, 255, 255, .7); }
.vs__foot b { color: #fff; }

/* ==========================================================================
   Party: breiteres Panel, Lichtkegel auf der Bühne, leere Liste als Karte
   ========================================================================== */
.pt { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
.pt__left { padding: 24px 24px 18px; }
.pt .acc__title { font-size: clamp(3rem, 5vw, 4.4rem); }
.pt-sel { border-radius: 14px !important; padding: 12px 14px 12px 0 !important; }
.pt-sel__band { border-radius: 14px 0 0 14px; }
.pt__list .fr__empty,
.pt__list li:only-child.fr__empty { border: 1px dashed var(--dg-line); border-radius: 14px; padding: 16px; }
.lineup::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(70%, 620px);
  height: 92%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 236, 210, .22), transparent 70%);
  pointer-events: none;
}
.lineup__tag {
  padding: 5px 12px 6px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  background: rgba(12, 16, 26, .7) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3) !important;
}
.lineup__tag.is-me { background: var(--glass-dark) !important; border-color: var(--signal) !important; }
.vs { display: flex; flex-direction: column; max-height: calc(100dvh - var(--info-h) - 40px); }
.vs__rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.vs-row { margin-bottom: 7px; }
.vs-bar { height: 19px !important; }
/* Duell-Karte etwas kompakter */
.fr { grid-template-columns: minmax(0, 480px) minmax(0, 480px); }
.vs__head { padding: 16px 18px 14px !important; }
.vs .fr-avatar { width: 58px !important; height: 58px !important; }
.vs__name { font-size: 1.25rem !important; }
.vs__mid { width: 38px; height: 38px; font-size: .95rem; }
.vs__rows { padding: 10px 18px 6px !important; }
.vs-row { margin-bottom: 5px; }
.vs-bar { height: 16px !important; }
.vs-bar b { font-size: 11px !important; }
/* Vergleichskarte genau so hoch wie die Freunde-Kachel daneben: sie zählt
   nicht zur Zeilenhöhe (contain: size), streckt sich aber auf diese Höhe */
.fr { align-items: center; align-content: center; }   /* Zeile = Höhe der Freunde-Kachel */
.fr__right { align-self: stretch; contain: size; min-height: 0; max-height: none; }
.fr__right .vs { height: 100%; max-height: none; }
/* Ticket sitzt über der Leiste, nicht darauf */
.screen--main .ticket { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Startseite: Adventskalender-Countdown über dem Skipass
   -------------------------------------------------------------------------- */
.showcase__side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.advent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  /* Weihnachtsrot mit einem Hauch Tannengrün, warmes Licht links */
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 210, 140, .35), transparent 50%),
    linear-gradient(115deg, #b3262a 0%, #8f1c26 58%, #1f5b3f 100%);
  box-shadow: 0 8px 24px rgba(90, 10, 20, .4);
  color: #fff;
  transform: none;
}
.advent[hidden] { display: none; }
.advent__icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.advent__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.advent__text { display: flex; flex-direction: column; line-height: 1.15; }
.advent__text b { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 235, 200, .85); }
.advent__text span { font-family: var(--f-display); font-size: 1.25rem; font-style: italic; letter-spacing: .02em; }
@media (max-height: 500px) and (orientation: landscape) {
  .advent { display: none; }
}

/* ==========================================================================
   Handy quer: alle Seiten kompakt (kleine Titel, schlanke Panels, Inhalte
   scrollen in ihren Panels statt aus dem Bild zu laufen)
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  /* gemeinsame Titel und Etiketten */
  .acc__title, .cm__title, .pk .cm__title, .fr .acc__title, .pt .acc__title, .nw .acc__title, .pb .acc__title { font-size: 1.7rem !important; margin: 2px 0 4px !important; }
  .acc__eyebrow { font-size: 8px !important; padding: 2px 7px !important; }
  .acc__lead { font-size: 11px !important; margin-bottom: 6px !important; }
  .subtitle .subtitle__clip { font-size: 1.9rem; }
  :root { --st: 2.2rem; }

  /* Friends: zwei Spalten über die volle Höhe, Listen scrollen */
  .fr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; padding: 8px calc(12px + var(--sa-l)) 8px calc(12px + var(--sa-l)) !important; align-items: stretch !important; align-content: stretch !important; }
  .fr__left { padding: 10px 12px !important; max-height: none; min-height: 0; overflow: hidden; }
  .fr__body { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 6px; }
  .fr__list { flex: 1; min-height: 0; overflow-y: auto; }
  .fr .field__label { display: none; }
  .fr .field__input { padding: 6px 10px !important; font-size: 12px !important; }
  .fr .seg__btn, .fr__seg .seg__btn { padding: 4px 10px; font-size: 11px; }
  .fr-row { padding: 6px 8px !important; gap: 8px; }
  .fr .fr-avatar { width: 32px !important; height: 32px !important; }
  .fr-row__name { font-size: 1rem !important; }
  .fr-row__meta { font-size: 8px; }
  .fr__right { contain: none; }
  .vs__head { padding: 8px 10px !important; }
  .vs .fr-avatar { width: 34px !important; height: 34px !important; border-width: 2px; }
  .vs__name { font-size: .95rem !important; }
  .vs__mid { width: 28px; height: 28px; font-size: .75rem; }
  .vs__rows { padding: 6px 10px 4px !important; }
  .vs-row { margin-bottom: 3px; }
  .vs-row dt { font-size: 8px; margin-bottom: 2px; }
  .vs-bar { height: 13px !important; }
  .vs-bar b { font-size: 9px !important; }
  .vs__foot { padding: 6px 10px 8px !important; font-size: 9px; }

  /* Party: Panel links schmal und scrollbar, Bühne rechts */
  .pt { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important; padding: 8px calc(12px + var(--sa-l)) !important; gap: 10px !important; align-items: stretch !important; }
  .pt__left { padding: 10px 12px !important; max-height: none; overflow-y: auto; }
  .pt__right { height: auto !important; }
  .pt .seg__btn { padding: 4px 10px; font-size: 11px; }
  .pt-sec { gap: 5px; }
  .pt-sel { padding: 6px 8px 6px 0 !important; }
  .pt-sel .pt-park__name, .pt-sel__name { font-size: .95rem; }

  /* Account: Formular links scrollt, Pass rechts kleiner */
  .acc { padding: 8px calc(12px + var(--sa-l)) !important; gap: 12px; align-items: stretch !important; }
  .acc__left { padding: 10px 14px !important; max-height: 100%; overflow-y: auto; }
  .acc .field__input { padding: 6px 10px !important; font-size: 12px !important; }
  .acc .field { gap: 3px; margin-bottom: 4px; }
  .acc .seg__btn { padding: 4px 10px; font-size: 11px; }
  .acc__right { transform: scale(.72); transform-origin: top center; }

  /* Controls: Tafeln kompakt, scrollen */
  .boards { max-height: calc(100dvh - var(--st) - 120px); overflow-y: auto; }
  .board { padding: 8px 10px 10px !important; }
  .board__head { padding: 6px 10px !important; }
  .board__title { font-size: 1rem; }
  .bind { padding: 3px 0; font-size: 10px; }

  /* Parks: Vorschau niedriger, damit Name und Infos sichtbar bleiben */
  .pk-prev { height: 92px; }
  .cm-card__name { font-size: 1.1rem; }
  .cm-card__info { padding: 8px 10px !important; }
  .cm__grid, .pk__grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 8px !important; }

  /* News: Bilder niedriger, Text kleiner */
  .nw-post__media img { aspect-ratio: auto; height: 34dvh; max-height: 150px; }
  .nw-post__body { padding: 10px 14px !important; }
  .nw-post__title { font-size: 20px; }
  .nw-post__text { font-size: 12px; }

  /* Park Builder: Eingabe und Karten kleiner */
  .pb-input { font-size: 1.3rem !important; padding: 8px 12px !important; }
  .pb-step { padding: 3px 9px; font-size: 10px; }
  .pb-panel { padding: 12px 16px !important; }
}
/* Handy quer: oben Luft lassen (nicht an der Bildschirmkante kleben) */
@media (max-height: 500px) and (orientation: landscape) {
  .screen:not(.screen--pause):not(.screen--results) { top: max(14px, env(safe-area-inset-top)) !important; }
  .screen--main .brand { top: max(14px, env(safe-area-inset-top)); }
  .subtitle { top: 0 !important; }
}

/* Parks: Hinweis "neue offizielle Parks im Bau" */
.pk-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 79, 31, .22), rgba(255, 79, 31, 0) 60%),
    rgba(12, 16, 26, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.pk-notice[hidden] { display: none; }
.pk-notice__icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--signal); box-shadow: 0 4px 12px rgba(255, 79, 31, .45); }
.pk-notice__icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk-notice__text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.pk-notice__text b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
@media (max-height: 500px) and (orientation: landscape) {
  .pk-notice { padding: 6px 10px; gap: 8px; }
  .pk-notice__icon { width: 26px; height: 26px; }
  .pk-notice__text { font-size: 10px; }
  .pk-notice__text b { font-size: .85rem; }
}

/* Spielstart / zurück ins Menü: kurze Abblende statt Wisch-Fläche */
.menu-fade { position: fixed; inset: 0; z-index: 9000; background: #0d1220; opacity: 0; pointer-events: none; }

/* Ladebalken: Lichtschimmer läuft rein per CSS (Compositor) weiter, auch wenn
   der Rechner beim ersten Bild der Strecke kurz beschäftigt ist */
.loader__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  width: 35%;
  transform: translateX(-120%);
  animation: loaderShine 1.1s ease-in-out infinite;
  will-change: transform;
}
@keyframes loaderShine { to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .loader__bar::before { animation: none; display: none; } }

/* ==========================================================================
   Freunde ("Crew"): eine Wand aus Kacheln wie die Menü-Karten (Jackenfarbe
   des Freundes, feine Streifen, grosser Name). Vergleich erst als Popup.
   ========================================================================== */
.crew {
  position: absolute;
  inset: 0 0 var(--dock-h, 56px);
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vh, 44px) calc(var(--gutter) * 1.5) 18px;
  color: #fff;
  /* dunkle Seite: Knöpfe (Chips) hell auf dunkel */
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
}
.crew__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.crew__title { margin: 6px 0 0 !important; font-size: clamp(3.2rem, 7vw, 5.6rem) !important; line-height: .85 !important; }
.crew__count { margin: 10px 0 0; min-height: 1em; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.crew__live { color: #fff; }
.crew__live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 2px; border-radius: 50%; background: #39d27f; vertical-align: middle; }

/* Suche: schlichtes Feld, Treffer klappen darunter auf */
.crew__search { position: relative; display: flex; flex-direction: column; gap: 6px; width: min(320px, 46%); }
.crew__search-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.crew__results {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; border-radius: 14px;
  background: #151a26; border: 1px solid var(--dg-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.crew__results:empty { display: none; }
.crew-hit { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.crew-hit + .crew-hit { border-top: 1px solid rgba(255, 255, 255, .06); }
.crew-hit .fr-avatar { width: 32px; height: 32px; }
.crew-hit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.crew-hit > .mono { font-size: 10px; color: rgba(255, 255, 255, .5); }
.crew-hit__tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.crew-hit--none { display: block; padding: 10px; font-size: 11px; color: rgba(255, 255, 255, .6); }

.crew-gate[hidden], .crew__body[hidden], .crew__search[hidden] { display: none; }
/* ohne Konto: gedämpfte Kacheln als Vorschau, davor die Karte */
.crew-gate { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.crew-gate__ghosts {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 168px; gap: 14px;
  overflow: hidden; opacity: .42; filter: saturate(.7);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.crew-ghost {
  position: relative; border-radius: var(--radius); border: 1px solid rgba(0, 0, 0, .25);
  background: var(--tx-lines), linear-gradient(150deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 55%, #0b0f18) 100%);
}
.crew-ghost i { position: absolute; top: 12px; right: 12px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 3px solid rgba(255, 255, 255, .5); }
.crew-ghost b { position: absolute; left: 16px; bottom: 36px; width: 58%; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .3); }
.crew-ghost s { position: absolute; left: 16px; bottom: 16px; width: 36%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.crew-gate__card {
  position: relative; width: min(440px, 100%); padding: 26px 28px 24px; border-radius: 20px;
  background: rgba(14, 18, 28, .9); border: 1px solid var(--dg-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.crew-gate__tag {
  position: absolute; top: -12px; right: 18px; padding: 4px 12px 3px; background: #39d27f; color: #0b2414;
  font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.crew-gate__title { margin: 0 0 14px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: .95; text-transform: uppercase; color: #fff; }
.crew-gate__list { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .85); }
.crew-gate__list li { display: flex; align-items: center; gap: 10px; }
.crew-gate__list li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--signal); transform: rotate(45deg); }
.crew-gate__text { margin: 0 0 16px; font-size: 10px; letter-spacing: .06em; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.crew-gate__btn { width: 100%; }
.crew__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 20px; margin: -4px; scrollbar-width: thin; }

/* Anfrage an mich: ein Streifen mit Sticker */
.crew__reqs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.crew__reqs:empty { display: none; }
.crew-req {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--tx-lines), #1b2130; border: 1px solid var(--dg-line); border-left: 4px solid var(--signal);
}
.crew-req .fr-avatar { width: 44px; height: 44px; }
.crew-req__text { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, .8); }
.crew-req__text b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.3rem; text-transform: uppercase; color: #fff; margin-right: 4px; }
.crew-req__btns { display: flex; gap: 6px; }

/* Wand: Kacheln in der Jackenfarbe */
.crew__wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.crew-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch !important; gap: 6px;
  min-height: 168px; padding: 14px 16px !important; text-align: left; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .25); border-radius: var(--radius);
  color: #fff; font: inherit;
  background: var(--tx-lines), linear-gradient(150deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 55%, #0b0f18) 100%);
  box-shadow: var(--lift);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.crew-tile:hover, .crew-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--lift-hi), 0 0 0 2px #fff; outline: none; }
.crew-tile:active { transform: translate(2px, 2px); box-shadow: var(--lift-sm); }
.crew-tile.is-light { color: #14171f; }
.crew-tile__top { position: absolute; top: 12px; left: 14px; display: flex; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.crew-tile__lv { padding: 3px 7px 2px; border-radius: 999px; background: #14171f; color: #fff; }
.crew-tile__no { padding: 3px 0 2px; opacity: .7; }
.crew-tile__face { position: absolute; top: 12px; right: 12px; }
.crew-tile .fr-avatar { width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.crew-tile.is-light .fr-avatar { border-color: #14171f; }
.crew-tile__name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-display); font-style: italic; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: .95; text-transform: uppercase;
}
.crew-tile__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.crew-tile__st { opacity: .8; white-space: nowrap; }
.crew-tile__best { opacity: .8; white-space: nowrap; }
/* online: grünes Abzeichen oben */
.crew-tile__live { padding: 3px 7px 2px; border-radius: 999px; background: #39d27f; color: #0b2414; }
.crew-tile::before { display: none !important; }
.crew-tile__st.is-on { opacity: 1; }

.crew__empty {
  display: flex; flex-direction: column; gap: 8px; padding: 36px 24px; border-radius: var(--radius);
  border: 2px dashed rgba(255, 255, 255, .25); text-align: center;
}
.crew__empty b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.8rem; text-transform: uppercase; }
.crew__empty .mono { font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }

/* gesendete Anfragen: klein unten */
.crew__pending:empty { display: none; }
.crew__pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; }
.crew__sub { width: 100%; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.crew-pend { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--dg-line); }
.crew-pend .fr-avatar { width: 28px; height: 28px; }
.crew-pend b { font-weight: 600; font-size: .9rem; }

/* Vergleich als Popup */
.crew-pop { position: absolute; inset: 0 0 var(--dock-h, 56px); z-index: 20; display: grid; place-items: center; padding: 20px; }
.crew-pop[hidden] { display: none; }
.crew-pop__back { position: absolute; inset: 0; background: rgba(6, 9, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.crew-pop__card { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; }
.crew-pop.is-in .crew-pop__back { animation: crewFade .2s ease both; }
.crew-pop.is-in .crew-pop__card { animation: crewPop .26s var(--ease-out) both; }
@keyframes crewFade { from { opacity: 0; } }
@keyframes crewPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.crew-pop__close {
  position: absolute; z-index: 2; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 13px; cursor: pointer;
}
.crew-pop__close:hover, .crew-pop__close:focus-visible { background: #fff; color: #14171f; }
.crew-pop__actions { display: flex; justify-content: center; padding: 4px 16px 16px; }
.vs__mid { display: flex !important; align-items: center; gap: 10px; width: auto !important; height: auto !important; padding: 8px 14px !important; border-radius: 999px !important; }
.vs__mid i { font-style: normal; font-size: 11px; opacity: .7; }
.vs__pts { font-family: var(--f-display); font-style: italic; font-size: 1.7rem; line-height: 1; }
.vs__pts.is-lead { color: var(--signal); }

@media (max-width: 760px) {
  .crew__head { flex-direction: column; align-items: stretch; }
  .crew__search { width: 100%; }
  .crew__wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .crew-tile { min-height: 140px; }
  .crew-tile .fr-avatar { width: 56px; height: 56px; }
  .crew-req { grid-template-columns: auto 1fr; }
  .crew-req__btns { grid-column: 1 / -1; justify-content: flex-end; }
}


/* ==========================================================================
   Einheitliche Bausteine (gilt für alle Seiten)
   Ein Etiketten-Stil, gerade Karten.
   ========================================================================== */

/* Etiketten: überall gleich – klein, ruhig, ohne eigene Farben */
.tag,
.cm-card__tags i,
.crew-gate__tag {
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-weight: 600;
}
.cm-card__tags i:first-child { background: transparent; color: inherit; }

/* Rider Pass, Run-Karte, Trickliste: gerade, ohne Stempel-Effekt */
.pass__stamp {
  padding: 3px 9px;
  border-width: 1px;
  border-radius: 4px;
  font-size: 11px;
  opacity: .85;
}

/* Vorteile-Liste: schlicht (Haken in Orange, keine grünen Pillen) */
.perks li { background: transparent !important; box-shadow: none !important; }
.perks b,
.perks li.is-on b { background: transparent !important; color: var(--signal) !important; }

/* ==========================================================================
   News: drei Tabs (Announcements, Updates, Bug fixes)
   Gleiche dunkle Glas-Karten wie die Posts, Orange als Akzent.
   ========================================================================== */
/* Seite füllt den Platz bis zur Leiste (der Screen endet schon über der
   Leiste – vorher war der Abstand doppelt und unten fehlte ein Stück) */
.screen--news .nw { inset: 0; padding-bottom: 0; }
.nw .cm__head { align-items: flex-end; width: 100%; max-width: 1240px; padding-right: 12px; }
.nw__tabs { margin: 0; }
.nw__feed {
  gap: 16px;
  max-width: 1240px;
  padding-bottom: 28px;
  /* weich ausblenden statt hart abschneiden */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
/* Updates und Bug fixes: zwei Spalten nebeneinander, kein leerer Rand rechts */
.nw__feed[data-view="updates"],
.nw__feed[data-view="fixes"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  align-items: start;
  align-content: start;
}
.nw__feed[data-view="updates"] .nw-notes__cols { grid-template-columns: 1fr; }

/* Adventskalender */
.nw-advent {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 210, 140, .18), transparent 55%),
    linear-gradient(160deg, #a3232a 0%, #7e1a24 55%, #1d4f38 120%);
  box-shadow: 0 14px 40px rgba(60, 5, 15, .45);
  color: #fff;
}
.nw-advent__media { position: relative; min-height: 280px; }
.nw-advent__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-advent__ribbon {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 5px 10px;
  border-radius: 4px;
  background: #fff;
  color: #a3232a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.nw-advent__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; min-width: 0; }
.nw-advent .nw-post__meta { opacity: 1; color: rgba(255, 235, 200, .9); }
.nw-advent .nw-post__meta b { background: #fff; color: #a3232a; }
.nw-advent__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: .92;
  text-transform: uppercase;
}
.nw-advent__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.nw-advent__count { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.nw-advent__count span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 235, 200, .85); }
.nw-advent__count b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.9rem; line-height: 1; }
.nw-advent__doors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.nw-advent__door {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.nw-advent__door i { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: rgba(255, 255, 255, .8); }
.nw-advent__door:nth-child(24) { background: rgba(255, 210, 140, .28); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .6); }

.nw-notes,
.nw-fixes {
  flex: none;
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  background: var(--dg-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--lift);
  color: #f4f2ee;
}
.nw-notes { padding: 18px 22px 20px; }
.nw-notes.is-latest { border-top: 4px solid var(--signal); }
.nw-notes__title {
  margin: 8px 0 4px;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: .95;
  text-transform: uppercase;
}
.nw-notes__text { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.5; opacity: .82; }
.nw-notes__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--dg-line);
}
.nw-notes__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.nw-notes__group--new .nw-notes__label { color: var(--signal); }
.nw-notes ul,
.nw-fixes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.nw-notes li,
.nw-fixes li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.nw-notes li::before,
.nw-fixes li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.nw-notes__group--new li::before { content: '+'; color: var(--signal); }
.nw-notes__group--changed li::before { content: '↑'; color: rgba(255, 255, 255, .55); }

.nw-fixes { display: grid; grid-template-columns: 110px 1fr; gap: 14px 22px; padding: 18px 22px; }
.nw-fixes__date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nw-fixes__date i { font-style: normal; font-weight: 400; font-size: 10px; opacity: .6; }
.nw-fixes li::before { content: '✓'; color: var(--signal); }

@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .nw-notes { padding: 12px 14px 14px; }
  .nw-notes__cols { grid-template-columns: 1fr; }
  .nw-notes li, .nw-fixes li, .nw-notes__text { font-size: 12px; }
  .nw-fixes { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .nw-advent { grid-template-columns: 36% 1fr; }
  .nw-advent__media { min-height: 0; }
  .nw-advent__ribbon { left: 8px; top: 8px; padding: 3px 7px; font-size: 9px; }
  .nw-advent__body { padding: 12px 14px 14px; gap: 6px; }
  .nw-advent__title { font-size: 24px; }
  .nw-advent__text { font-size: 12px; }
  .nw-advent__doors { grid-template-columns: repeat(12, 1fr); gap: 4px; }
  .nw-advent__door i { font-size: .8rem; }
}

/* ==========================================================================
   Freunde & Party: Feinschliff auf das Niveau der anderen Seiten
   - weisser Titel wie Parks/News/Locker, Seite links bündig und volle Breite
   - Kacheln ohne Streifenmuster: Jackenfarbe als ruhiger Verlauf
   - kein doppelter Abstand zur Leiste (der Screen endet schon darüber)
   ========================================================================== */
/* alle Seitentitel weiss (Account, Park Builder, Freunde, Party …) */
.ui .acc__title {
  color: #f4f2ee;
  -webkit-text-stroke: 0;
  text-shadow: 0 4px 18px rgba(8, 10, 20, .35);
}

/* Freunde */
.crew {
  inset: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0;
  padding: 22px calc(var(--gutter) * 1.5) 0;
}
.crew__head { margin-bottom: 18px; }
.crew__body {
  padding-bottom: 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.crew__wall { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.crew-tile,
.crew-ghost {
  background:
    linear-gradient(180deg, transparent 35%, rgba(8, 10, 18, .35) 100%),
    linear-gradient(150deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 50%, #0b0f18) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
}
.crew-tile.is-light {
  background:
    linear-gradient(180deg, transparent 45%, rgba(8, 10, 18, .12) 100%),
    linear-gradient(150deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 78%, #8a8f9c) 100%);
}
/* online: leuchtender Rand statt nur Abzeichen */
.crew-tile.is-on { box-shadow: var(--lift), 0 0 0 2px #39d27f; }
.crew-tile.is-on:hover, .crew-tile.is-on:focus-visible { box-shadow: var(--lift-hi), 0 0 0 2px #fff; }
.crew-req {
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.crew-gate__ghosts { opacity: .5; }
.crew-pop { inset: 0; }

/* Party */
.pt { inset: 0; padding-bottom: var(--gutter); }
/* Refresh sah durch die halbe Deckkraft des Labels deaktiviert aus */
.pt-sec__label { opacity: 1; color: rgba(255, 255, 255, .7); }
.pt-sec__label .chip { color: #fff; }
/* Fokus (Tastatur/Controller) auf Knöpfen: oranger Ring statt hellblauer
   Fläche – die sah aus wie deaktiviert. Gilt auf allen Seiten. */
.ui .chip:focus {
  background: var(--snow);
  color: #fff;
  box-shadow: 0 0 0 2px var(--signal);
}
.ui .chip--ok:focus { background: #fff; color: #14171f; }
.ui .screen--main .chip:focus { background: rgba(24, 28, 38, .86); }

/* Party-Einladung am Handy: kompakt, deckt weniger zu */
@media (max-height: 500px) and (orientation: landscape), (max-width: 640px) {
  .invite { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; width: min(340px, calc(100vw - 2 * var(--gutter))); padding: 7px 9px; }
  .invite__av { width: 32px; height: 32px; font-size: 1rem; }
  .invite__eyebrow { display: none; }
  .invite__text { font-size: .95rem; }
  .invite__btns { flex-direction: row; }
  .invite__btns .chip { padding: 4px 9px; font-size: 11px; }
}

/* ==========================================================================
   Account: Vorteile als eine Glas-Karte statt loser Zeilen
   ========================================================================== */
.perks {
  gap: 0;
  padding: 4px 16px;
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--lift);
}
.perks li {
  padding: 9px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-size: 11px;
  letter-spacing: .06em;
}
.perks li + li { border-top: 1px solid var(--dg-line) !important; }
.perks b { min-width: 0 !important; padding: 0 !important; font-size: 13px !important; }

/* ==========================================================================
   Pause-Karte wie die Ergebnis-Karte (dunkles Glas), Controller-Tasten wie
   die Tastatur-Tasten (dunkel statt hellblau)
   ========================================================================== */
.runcard {
  --ink: #f4f2ee;
  --snow: #161b27;
  --edge: var(--dg-line);
  background: var(--dg-bg) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--dg-line) !important;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
}
.runcard__score, .runcard__grid div { border-color: var(--dg-line) !important; }
.runcard__score .mono, .runcard__grid dt, .runcard__best span { color: rgba(255, 255, 255, .6); }
.key--pad { background: var(--snow); }

/* ==========================================================================
   Umzug-Popup (alte Adresse → steezers.app), siehe js/domain.js
   ========================================================================== */
.moved {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 9, 16, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: crewFade .25s ease both;
}
.moved__card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 20px;
  border: 1px solid var(--dg-line, rgba(255, 255, 255, .12));
  border-top: 4px solid var(--signal, #ff4f1f);
  border-radius: 18px;
  background: rgba(14, 18, 28, .94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  color: #fff;
  animation: crewPop .3s var(--ease-out, ease-out) both;
}
.moved__tag {
  align-self: flex-start;
  padding: 3px 9px 2px;
  border-radius: 4px;
  background: var(--signal, #ff4f1f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.moved__title {
  margin: 0;
  font-family: var(--f-display, 'Anton', sans-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: .92;
  text-transform: uppercase;
}
.moved__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.moved__text b { color: #fff; }
.moved__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(120deg, #ff6a33 0%, #ff4f1f 60%, #f0401a 100%);
  box-shadow: 0 10px 26px rgba(255, 79, 31, .35);
  color: #fff;
  font-family: var(--f-display, 'Anton', sans-serif);
  font-style: italic;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.moved__go:hover, .moved__go:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 79, 31, .55), 0 0 0 2px #fff; outline: none; }
.moved__stay {
  align-self: center;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.moved__stay:hover, .moved__stay:focus-visible { color: #fff; outline: none; }