/* =====================================================
   FIREHELMET - STYLE 6/8: REDESIGN
   ---------------------------------------------------
   Das grosse Redesign-Upgrade und das Admin-Gateway.

   ACHTUNG REIHENFOLGE: diese Dateien waren bis zum Aufteilen
   EINE Datei mit 13.539 Zeilen. An mehreren Stellen entscheidet
   allein die Reihenfolge, welche Regel gewinnt (gleich starke
   Selektoren, spaeter schlaegt frueher). Die Einbindung in
   index.html muss daher genau in dieser Nummerierung bleiben -
   eine umgestellte oder vergessene Datei aendert das Aussehen.
===================================================== */

/* =====================================================
   FIRE HELMET - MASSIVES REDESIGN-UPGRADE
   Schwarzmarkt-Rotation + Seltenheiten, Spotify-Karte,
   Boss-Arena-Hintergrund, Logbuch-Papier-Optik. Alles
   additiv unter einem eigenen "fh-" bzw. "shop-*" Namespace,
   bestehende Klassen/IDs bleiben unangetastet.
===================================================== */

/* #shop braucht position:relative, damit .fh-shop-intro-overlay
   (position:absolute;inset:0) exakt die Shop-Seite abdeckt statt
   sich am nächsten positionierten Vorfahren (z.B. main) zu
   orientieren. */
#shop {
  position: relative;
}

/* ---------- SCHWARZMARKT: ROTATION + SELTENHEITEN ---------- */
.shop-rotation-label {
  margin-top: 14px;
  font-family: var(--fh-font-display);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.shop-rotation-countdown {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.4);
  background: rgba(214,168,79,.1);
  color: var(--fh-gold-bright);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .05em;
}

.shop-rarities-heading {
  margin-top: 34px;
  font-family: var(--fh-font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fh-text);
}

.fh-rarity-legend {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fh-rarity-chip {
  --rarity-color: #9aa4b2;
  --rarity-glow: 154,164,178;
  position: relative;
  padding: 12px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent);
  background: rgba(255,255,255,.03);
  color: var(--rarity-color);
  font-family: var(--fh-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: help;
  transition: transform .2s var(--fh-ease), box-shadow .25s ease, background .25s ease;
}

.fh-rarity-chip:hover,
.fh-rarity-chip:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 18px rgba(var(--rarity-glow),.45);
  outline: none;
}

.fh-rarity-chip-desc {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(6,9,15,.96);
  border: 1px solid color-mix(in srgb, var(--rarity-color) 50%, transparent);
  color: var(--fh-text);
  font-family: var(--fh-font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transition: opacity .2s ease, transform .2s ease;
}

.fh-rarity-chip:hover .fh-rarity-chip-desc,
.fh-rarity-chip:focus-visible .fh-rarity-chip-desc {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .fh-rarity-chip:hover,
  .fh-rarity-chip:focus-visible {
    transform: none;
  }
}

/* Ohne Hover (Handy) erscheint der Hinweis nie - unsichtbar ragte er
   beim aeusseren Chip aber ueber den Rand, und der Shop liess sich
   seitwaerts schieben. Der Text steht weiter im title des Chips. */
@media (hover: none) {
  .fh-rarity-chip-desc {
    display: none;
  }
}

/* Seltenheits-Rand/-Glow + Badge je Shop-Artikel. Die konkrete
   Farbe kommt per Inline-Style (--rarity-color/--rarity-glow,
   siehe renderShopGrid in shop.js) direkt aus der zentralen
   Konfiguration - hier nur die generische Optik. */
.shop-item {
  --rarity-color: #9aa4b2;
  --rarity-glow: 154,164,178;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 40%, rgba(255,255,255,.1));
}

.shop-item:hover {
  border-color: var(--rarity-color);
  box-shadow: 0 20px 45px rgba(0,0,0,.45), 0 0 26px rgba(var(--rarity-glow),.35);
}

.shop-item-rarity-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rarity-color);
  border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent);
  background: color-mix(in srgb, var(--rarity-color) 16%, rgba(6,9,15,.75));
}

/* Auf dem Handy ist die Karte nur noch gut 150 px breit; "Ungewöhnlich"
   schob sich dort unter den Info-Knopf. Kleiner gesetzt passt es. */
@media (max-width: 560px) {
  .shop-item-rarity-badge {
    padding: 2px 7px;
    font-size: 9px;
    letter-spacing: .03em;
  }
}

/* Jede Seltenheitsstufe fühlt sich spürbar anders an, nicht nur
   andersfarbig (Punkt 15): Common/Uncommon/Rare bleiben ruhig
   (nur Rand-/Badge-Farbe), Epic bekommt einen weichen Puls,
   Legendary zusätzlich einen ständig sichtbaren, langsam
   rotierenden Goldrahmen, Mythic eine eigene, kräftigere
   Variante mit schnellerem, mehrfarbigem Rahmen. */

@keyframes fhRarityPulseSoft {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--rarity-glow),0); }
  50%      { box-shadow: 0 0 16px rgba(var(--rarity-glow),.3); }
}

@keyframes fhRarityPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--rarity-glow),0); }
  50%      { box-shadow: 0 0 24px rgba(var(--rarity-glow),.4); }
}

.shop-item-rarity-legendary::before {
  opacity: .5;
  animation-duration: 6s;
}

@keyframes fhRarityPulseMythic {
  0%, 100% { box-shadow: 0 0 0 rgba(255,85,85,0); }
  50%      { box-shadow: 0 0 28px rgba(255,85,85,.5), 0 0 46px rgba(240,201,106,.28); }
}

.shop-item-rarity-mythic::before {
  opacity: .65;
  animation-duration: 2.4s;
  background: conic-gradient(from 0deg, #ff5555, var(--menu-hex1), #ff5555, #7c1d1d, #ff5555);
}

@media (prefers-reduced-motion: reduce) {
  .shop-item,
  .shop-item-rarity-epic,
  .shop-item-rarity-legendary,
  .shop-item-rarity-mythic,
  .shop-item-rarity-legendary::before,
  .shop-item-rarity-mythic::before,
  .shop-grid-quiet .shop-item-rarity-epic,
  .shop-grid-quiet .shop-item-rarity-legendary,
  .shop-grid-quiet .shop-item-rarity-mythic {
    animation: none;
  }
}

/* ---------- ITEM-INFO PANEL (Hover Desktop / Tap Mobile) ---------- */
.shop-item-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(6,9,15,.6);
  color: var(--fh-text-muted);
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Groesserer, unsichtbarer Treffbereich fuer Touch (Punkt 1: Buttons
   muessen auf kleinen Bildschirmen gut erreichbar sein) - das
   sichtbare Icon bleibt klein/dezent, nur die tatsaechliche Tippflaeche
   waechst auf ca. 44x44px, siehe https://web.dev/accessible-tap-targets/ */
.shop-item-info-btn::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.shop-item-info-btn:hover,
.shop-item-info-btn[aria-expanded="true"] {
  color: var(--rarity-color);
  border-color: var(--rarity-color);
  transform: scale(1.1);
}

.shop-item-info-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  text-align: center;
  background: rgba(4,6,11,.96);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.shop-item:hover .shop-item-info-panel,
.shop-item.shop-item-info-open .shop-item-info-panel {
  opacity: 1;
  transform: scale(1);
}

.shop-item-info-name {
  font-family: var(--fh-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--fh-text);
}

.shop-item-info-rarity {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rarity-color);
}

.shop-item-info-desc {
  font-size: 12.5px;
  font-style: italic;
  color: var(--fh-text-muted);
  line-height: 1.4;
}

.shop-item-info-meta {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--fh-gold-bright);
  font-weight: 600;
}

@media (hover: none) {
  /* Auf reinen Touch-Geräten nur per Tap öffnen, kein :hover-Zufall */
  .shop-item:hover .shop-item-info-panel {
    opacity: 0;
    transform: scale(.98);
    pointer-events: none;
  }

  .shop-item.shop-item-info-open .shop-item-info-panel {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

/* Eingangsanimation (spielt nur bei echtem Seitenaufruf/
   Rotationswechsel, siehe shop-grid-quiet unten) */
.shop-item {
  animation-name: shopItemReveal;
}

@keyframes shopItemReveal {
  0%   { opacity: 0; transform: translateY(26px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------
   ZWEI ANIMATIONEN, NICHT EINE
   Eingangsanimation UND Seltenheitspuls laufen auf DEMSELBEN
   Element. Vorher setzten die Seltenheitsregeln ihren Puls mit
   der Kurzschreibweise "animation: fhRarityPulse 2.6s ... infinite"
   - und weil die Regel ".shop-item { animation-name: shopItemReveal }"
   in derselben Datei DANACH steht, gewann am Ende deren Name,
   während Dauer und "infinite" vom Puls stehen blieben. Ergebnis:
   jede epische, legendäre und mythische Karte spielte ihre
   EINGANGSanimation endlos - blendete also dauerhaft auf und
   wieder weg - und der Glanz, um den es ging, kam nie.
   Deshalb hier beide als echte Liste statt als Wettstreit um
   einen Platz.
--------------------------------------------------- */
.shop-item-rarity-epic,
.shop-item-rarity-legendary,
.shop-item-rarity-mythic {
  animation-name: shopItemReveal, fhRarityPulse;
  animation-duration: .5s, 2.6s;
  animation-timing-function: cubic-bezier(0.22, 0.9, 0.32, 1.2), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
}

.shop-item-rarity-epic {
  animation-name: shopItemReveal, fhRarityPulseSoft;
  animation-duration: .5s, 3.4s;
}

.shop-item-rarity-mythic {
  animation-name: shopItemReveal, fhRarityPulseMythic;
  animation-duration: .5s, 1.9s;
}

/* "quiet" = nach Kauf/Ausrüsten neu gerendert: keine erneute
   Eingangsanimation, Karten stehen sofort da (Punkt 11:
   "darf nicht bei jedem State-Update erneut abgespielt werden").
   Der Seltenheitspuls gehört aber zum Aussehen der Karte, nicht
   zum Eintritt - der bleibt deshalb. */
.shop-grid-quiet .shop-item {
  animation-name: none;
}

.shop-grid-quiet .shop-item-rarity-epic {
  animation: fhRarityPulseSoft 3.4s ease-in-out infinite;
}

.shop-grid-quiet .shop-item-rarity-legendary {
  animation: fhRarityPulse 2.6s ease-in-out infinite;
}

.shop-grid-quiet .shop-item-rarity-mythic {
  animation: fhRarityPulseMythic 1.9s ease-in-out infinite;
}

/* Ganzer Shop-"Öffnen"-Moment (~1.8s), wie das Betreten eines
   geheimen Marktes:
     1) Bildschirm dunkelt ab
     2) eine Pergament-/Handelskarte rollt sich in der Mitte auf
     3) der Titel "DER SCHWARZMARKT" blendet darüber ein
     4) das Pergament zieht sich wieder zurück
     5) die eigentliche Shop-Oberfläche fährt hoch/fällt in Fokus,
        die Artikel selbst erscheinen einzeln nachfolgend (siehe
        .shop-item / shopItemReveal weiter unten). */
.fh-shop-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, rgba(214,168,79,.18), rgba(2,3,10,.92) 70%);
  opacity: 0;
  overflow: hidden;
}

.fh-shop-intro-overlay.fh-shop-intro-play {
  animation: fhShopIntroFade 2.3s ease forwards;
}

@keyframes fhShopIntroFade {
  0%   { opacity: 0; transform: scale(1.06); }
  14%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Langsam driftender Nebel hinter dem Pergament - reine
   CSS-Ebene, keine Partikel, kostet praktisch nichts. */
.fh-shop-intro-fog {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 60%, rgba(180,190,210,.10), transparent 70%),
    radial-gradient(ellipse 45% 32% at 72% 45%, rgba(180,190,210,.08), transparent 70%);
  filter: blur(18px);
  opacity: 0;
}

.fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-fog {
  animation: fhShopIntroFogDrift 2.3s ease-out forwards;
}

@keyframes fhShopIntroFogDrift {
  0%   { opacity: 0; transform: translate3d(-2%, 1%, 0) scale(1); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(3%, -2%, 0) scale(1.12); }
}

/* Kurze, geheimnisvolle Lichtstrahlen die einmalig hinter dem
   Pergament aufblenden und langsam weiterdrehen. */
.fh-shop-intro-rays {
  position: absolute;
  width: 140%;
  height: 140%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(240,201,106,.12) 4deg,
    transparent 10deg,
    transparent 96deg,
    rgba(240,201,106,.09) 100deg,
    transparent 108deg,
    transparent 190deg,
    rgba(240,201,106,.1) 195deg,
    transparent 202deg,
    transparent 360deg
  );
  opacity: 0;
}

.fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-rays {
  animation: fhShopIntroRays 2.3s ease-out forwards;
}

@keyframes fhShopIntroRays {
  0%   { opacity: 0; transform: rotate(-8deg) scale(.9); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(10deg) scale(1.05); }
}

/* Einzelne, einmalig aufsteigende Goldstaub-Partikel (JS-gespawnt,
   siehe spawnShopIntroParticles() in shop.js) - eigene, NICHT
   endlos laufende Animation, damit nichts dauerhaft rechnet. */
.fh-shop-intro-particles {
  position: absolute;
  inset: 0;
}

.fh-shop-intro-particle {
  position: absolute;
  bottom: 30%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fh-gold-bright);
  box-shadow: 0 0 6px rgba(240,201,106,.8);
  opacity: 0;
  left: var(--fh-particle-x, 50%);
  animation: fhShopIntroParticleDrift var(--fh-particle-duration, 2s) ease-out forwards;
  animation-delay: var(--fh-particle-delay, 0s);
}

@keyframes fhShopIntroParticleDrift {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}

.fh-shop-intro-parchment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 46px;
  border-radius: 14px;
  background: linear-gradient(160deg, #3a2c1c, #1c140c);
  border: 1px solid rgba(214,168,79,.5);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(214,168,79,.2);
  opacity: 0;
  transform: scaleY(.05) scaleX(.7);
  transform-origin: 50% 50%;
}

.fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-parchment {
  animation: fhShopParchmentUnroll 1.8s var(--fh-ease) forwards;
}

@keyframes fhShopParchmentUnroll {
  0%   { opacity: 0; transform: scaleY(.05) scaleX(.7); }
  22%  { opacity: 1; transform: scaleY(1) scaleX(1); }
  70%  { opacity: 1; transform: scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: scaleY(.6) scaleX(.85); }
}

.fh-shop-intro-compass {
  font-size: 34px;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(240,201,106,.6));
}

.fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-compass {
  animation: fhShopIntroFadeInSpin 1.8s var(--fh-ease) forwards;
}

@keyframes fhShopIntroFadeInSpin {
  0%   { opacity: 0; transform: rotate(-90deg); }
  30%  { opacity: 1; transform: rotate(0deg); }
  70%  { opacity: 1; transform: rotate(0deg); }
  100% { opacity: 0; transform: rotate(20deg); }
}

.fh-shop-intro-title {
  font-family: var(--fh-font-display);
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: .12em;
  color: var(--fh-gold-bright);
  text-shadow: 0 0 24px rgba(240,201,106,.5);
  opacity: 0;
  transform: translateY(10px);
}

.fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-title {
  animation: fhShopIntroTitleIn 1.8s var(--fh-ease) forwards;
}

@keyframes fhShopIntroTitleIn {
  0%   { opacity: 0; transform: translateY(10px); }
  32%  { opacity: 0; transform: translateY(10px); }
  48%  { opacity: 1; transform: translateY(0); }
  72%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.shop-content {
  opacity: 1;
}

.shop-content.fh-shop-content-in {
  animation: fhShopContentIn .8s var(--fh-ease) 1.1s both;
}

@keyframes fhShopContentIn {
  0%   { opacity: 0; transform: translateY(24px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Kürzere "Refresh"-Version für einen reinen Rotationswechsel
   (nicht das volle Markt-Intro - siehe tickShopRotation() in
   shop-rotation.js) */
.shop-content.fh-shop-content-refresh {
  animation: fhShopContentRefresh .5s var(--fh-ease) both;
}

@keyframes fhShopContentRefresh {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-shop-intro-overlay.fh-shop-intro-play,
  .fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-parchment,
  .fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-compass,
  .fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-title,
  .fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-fog,
  .fh-shop-intro-overlay.fh-shop-intro-play .fh-shop-intro-rays,
  .fh-shop-intro-particle,
  .shop-content.fh-shop-content-in,
  .shop-content.fh-shop-content-refresh {
    animation: none;
  }
}

/* Toast bei Rotationswechsel - nutzt dieselbe Optik wie die
   bestehende Dublonen-Toast-Benachrichtigung */
.shop-rotation-toast {
  top: auto;
  bottom: 30px;
}

@media (max-width: 600px) {
  .shop-rotation-toast {
    bottom: 16px;
  }
}

/* ---------- SOCIALS: SPOTIFY-HÖRSPIEL-KARTE ---------- */
.fh-audiobook-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 22px 28px;
  border-radius: var(--fh-radius-lg, 24px);
  background: linear-gradient(135deg, rgba(30,185,84,.14), rgba(13,21,32,.9));
  border: 1px solid rgba(30,185,84,.4);
  box-shadow: var(--fh-shadow);
  text-decoration: none;
  color: var(--fh-text);
  overflow: hidden;
  transition: transform .25s var(--fh-ease), box-shadow .25s ease, border-color .25s ease;
}

.fh-audiobook-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 40px);
  opacity: .5;
  pointer-events: none;
}

.fh-audiobook-card:hover {
  transform: translateY(-4px);
  border-color: #1eb954;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(30,185,84,.3);
}

.fh-audiobook-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 26px;
  background: radial-gradient(circle at 35% 30%, rgba(30,185,84,.4), rgba(6,9,15,.9));
  border: 1px solid rgba(30,185,84,.5);
}

.fh-audiobook-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-width: 0;
}

.fh-audiobook-title {
  font-family: var(--fh-font-display);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 700;
  color: var(--fh-text);
}

.fh-audiobook-text {
  font-size: 13px;
  color: var(--fh-text-muted);
}

.fh-audiobook-button {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1eb954;
  color: #04170c;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .2s var(--fh-ease, ease), box-shadow .2s ease, filter .2s ease;
}

/* Hatte bisher weder Hover-Zustand noch transition - Spotify-Gruen
   bleibt bewusst als Marken-Farbe erhalten, nur die Hover-Reaktion ist
   neu (passend zur restlichen Button-Sprache der Seite: leichtes
   Anheben + Glow statt Farbwechsel). */
.fh-audiobook-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(30,185,84,.4);
}

.fh-audiobook-button:active {
  transform: translateY(0) scale(.97);
}

.fh-audiobook-card-soon {
  cursor: default;
  opacity: .75;
}

.fh-audiobook-card-soon:hover {
  transform: none;
  border-color: rgba(30,185,84,.4);
  box-shadow: var(--fh-shadow);
}

.fh-audiobook-card-soon .fh-audiobook-button {
  background: rgba(255,255,255,.12);
  color: var(--fh-text-muted);
}

body.lang-de .fh-audiobook-card-soon .fh-audiobook-button::after { content: " · bald verfügbar"; }
body.lang-en .fh-audiobook-card-soon .fh-audiobook-button::after { content: " · coming soon"; }

@media (max-width: 600px) {
  .fh-audiobook-card {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px;
  }

  .fh-audiobook-copy {
    text-align: center;
  }
}

/* ---------- COMMUNITY-BOSS: ARENA-HINTERGRUND ---------- */
#community-boss {
  position: relative;
  overflow: hidden;
}

.boss-content {
  position: relative;
  z-index: 1;
  padding: 10px 10px 30px;
}

.boss-content::before {
  content: "";
  position: absolute;
  inset: -30px -8vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, color-mix(in srgb, var(--boss-accent, #7c2d12) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.6), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* Mehrere unabhängig, langsam bewegte Hintergrund-Ebenen (Punkt 4):
   Himmel, Wolken, Lichtkegel, Nebel (fern/nah), Glut. Läuft immer
   ambient im Hintergrund, unabhängig von der Eintrittssequenz. */
.fh-boss-arena-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fh-boss-layer {
  position: absolute;
  inset: -4% -2%;
}

.fh-boss-layer-sky {
  background: radial-gradient(ellipse at 50% 18%, color-mix(in srgb, var(--boss-accent, #7c2d12) 35%, transparent), var(--fh-bg) 72%);
  transition: background 1.2s ease;
}

.fh-boss-layer-clouds {
  background:
    repeating-radial-gradient(circle at 18% 28%, rgba(255,255,255,.035) 0 40px, transparent 40px 150px),
    repeating-radial-gradient(circle at 82% 62%, rgba(255,255,255,.025) 0 60px, transparent 60px 190px);
  animation: fhBossCloudsDrift 70s linear infinite;
  opacity: .6;
}

@keyframes fhBossCloudsDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-6%); }
}

.fh-boss-layer-rays {
  background: conic-gradient(from 200deg at 50% 26%,
    transparent 0deg, color-mix(in srgb, var(--boss-accent, #7c2d12) 55%, transparent) 6deg,
    transparent 18deg, transparent 342deg,
    color-mix(in srgb, var(--boss-accent, #7c2d12) 45%, transparent) 352deg, transparent 360deg);
  mix-blend-mode: screen;
  opacity: .5;
  animation: fhBossRaysSpin 50s linear infinite;
}

@keyframes fhBossRaysSpin {
  to { transform: rotate(360deg); }
}

.fh-boss-layer-fog-far {
  background: linear-gradient(180deg, transparent 50%, rgba(15,8,6,.6) 100%);
  animation: fhBossFogDrift 28s ease-in-out infinite alternate;
}

@keyframes fhBossFogDrift {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}

.fh-boss-layer-embers {
  inset: 0;
  overflow: hidden;
}

.fh-boss-layer-fog-near {
  inset: 0;
  background: radial-gradient(ellipse 95% 45% at 50% 105%, rgba(0,0,0,.7), transparent 68%);
}

/* Dunkler werdender Puls beim Eintritt (Punkt 5.1) */
.fh-boss-arena-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(2,3,6,.9) 100%);
  opacity: 0;
  pointer-events: none;
}

.fh-boss-arena-bg.fh-boss-arena-play::after {
  animation: fhBossArenaDarkenPulse 1.6s ease forwards;
}

@keyframes fhBossArenaDarkenPulse {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-boss-layer-clouds,
  .fh-boss-layer-rays,
  .fh-boss-layer-fog-far,
  .fh-boss-arena-bg.fh-boss-arena-play::after {
    animation: none;
  }
}

/* ---------- BOSS-EINTRITTSSEQUENZ (Punkt 5) ---------- */
.fh-boss-stage-wrap {
  position: relative;
}

#boss-content-panel.fh-boss-entrance-play .fh-boss-stage-wrap {
  animation: fhBossStageIn 1s var(--fh-ease) both;
}

@keyframes fhBossStageIn {
  0%   { opacity: 0; transform: scale(.7); filter: blur(10px); }
  55%  { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

#boss-content-panel.fh-boss-entrance-play #boss-name {
  animation: fhBossFadeUp .6s var(--fh-ease) .55s both;
}

#boss-content-panel.fh-boss-entrance-play #boss-flavor {
  animation: fhBossFadeUp .6s var(--fh-ease) .68s both;
}

#boss-content-panel.fh-boss-entrance-play .fh-boss-panel {
  animation: fhBossFadeUp .7s var(--fh-ease) .85s both;
}

#boss-content-panel.fh-boss-entrance-play .boss-leaderboard-title,
#boss-content-panel.fh-boss-entrance-play .boss-leaderboard-hint,
#boss-content-panel.fh-boss-entrance-play #boss-leaderboard {
  animation: fhBossFadeUp .7s var(--fh-ease) 1.05s both;
}

@keyframes fhBossFadeUp {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #boss-content-panel.fh-boss-entrance-play .fh-boss-stage-wrap,
  #boss-content-panel.fh-boss-entrance-play #boss-name,
  #boss-content-panel.fh-boss-entrance-play #boss-flavor,
  #boss-content-panel.fh-boss-entrance-play .fh-boss-panel,
  #boss-content-panel.fh-boss-entrance-play .boss-leaderboard-title,
  #boss-content-panel.fh-boss-entrance-play .boss-leaderboard-hint,
  #boss-content-panel.fh-boss-entrance-play #boss-leaderboard {
    animation: none;
  }
}

/* ---------- BOSS-ANGRIFF: ARENA-WEITER IMPACT (Punkt 6) ---------- */
.fh-boss-impact {
  animation: fhBossImpactShake .35s ease;
}

@keyframes fhBossImpactShake {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-6px,2px,0); }
  40%  { transform: translate3d(5px,-2px,0); }
  60%  { transform: translate3d(-4px,1px,0); }
  80%  { transform: translate3d(3px,-1px,0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-boss-impact {
    animation: none;
  }
}

/* ---------- BOSS-PHASEN (Punkt 7) - rein visuell anhand HP% ---------- */
.fh-boss-panel {
  position: relative;
  /* Volle Inhaltsbreite statt 480px. Seit die Angriffswahl ein
     Raster aus vierzehn Karten ist, war das Feld zu eng: die Karten
     brachen auf eine Spalte um, obwohl daneben Platz frei blieb. */
  max-width: 100%;
  margin: 26px auto 0;
  padding: 24px 22px 20px;
  border-radius: var(--fh-radius-lg, 24px);
  background: linear-gradient(165deg, rgba(28,20,14,.85), rgba(10,7,5,.92));
  border: 1px solid rgba(214,168,79,.3);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.4);
}

.fh-boss-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--fh-radius-lg, 24px) - 4px);
  border: 1px solid rgba(214,168,79,.18);
  pointer-events: none;
}

#fh-boss-panel.fh-boss-phase-wounded {
  border-color: rgba(255,190,110,.4);
}

#fh-boss-panel.fh-boss-phase-enraged {
  border-color: rgba(255,150,60,.45);
}

#fh-boss-panel.fh-boss-phase-critical {
  border-color: rgba(255,90,60,.55);
  animation: fhBossPanelCriticalPulse 2.2s ease-in-out infinite;
}

#fh-boss-panel.fh-boss-phase-final {
  border-color: rgba(255,50,50,.7);
  animation: fhBossPanelCriticalPulse 1.1s ease-in-out infinite;
}

#fh-boss-panel.fh-boss-phase-defeated {
  border-color: rgba(214,168,79,.5);
  filter: saturate(.7);
}

@keyframes fhBossPanelCriticalPulse {
  0%, 100% { box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 rgba(255,60,60,0); }
  50%      { box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 34px rgba(255,60,60,.35); }
}

#fh-boss-arena-bg.fh-boss-phase-critical .fh-boss-layer-sky,
#fh-boss-arena-bg.fh-boss-phase-final .fh-boss-layer-sky {
  background: radial-gradient(ellipse at 50% 18%, rgba(217,67,30,.5), var(--fh-bg) 72%);
}

#fh-boss-arena-bg.fh-boss-phase-final .fh-boss-layer-clouds {
  animation-duration: 30s;
}

@media (prefers-reduced-motion: reduce) {
  #fh-boss-panel.fh-boss-phase-critical,
  #fh-boss-panel.fh-boss-phase-final {
    animation: none;
  }
}

/* Kurzer Skalier-"Kamera-Ruck" bei jedem Treffer, unabhängig vom
   Zittern (.fh-boss-impact) - sitzt auf der Bühne selbst, damit
   der Treffer mehr Gewicht bekommt (Punkt 22). */
.fh-boss-camera-jolt {
  animation: fhBossCameraJolt .3s ease-out;
}

@keyframes fhBossCameraJolt {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.035) rotate(-0.6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-boss-camera-jolt {
    animation: none;
  }
}

/* ---------- BOSS-STATISTIK-ZEILE (Schaden / Angreifer) ---------- */
.fh-boss-stats-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.fh-boss-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fh-boss-stat-value {
  font-family: var(--fh-font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--fh-gold-bright);
  text-shadow: 0 0 16px rgba(240,201,106,.4);
  font-variant-numeric: tabular-nums;
}

.fh-boss-stat-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-boss-stat-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(214,168,79,.5), transparent);
}

/* Dekorativer Arena-Ring ÜBER dem Canvas (::after wird nach dem
   per JS eingefügten <canvas> gemalt, also oben drauf) - rahmt
   die Boss-Kreatur wie eine Kampf-Arena, ohne Angriffs-Effekte
   im Canvas selbst zu beschneiden. */
.boss-stage::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--boss-accent, #7c2d12) 55%, transparent);
  box-shadow:
    0 0 40px color-mix(in srgb, var(--boss-accent, #7c2d12) 45%, transparent),
    inset 0 0 50px rgba(0,0,0,.55);
  pointer-events: none;
}

@media (min-width: 768px) {
  .boss-stage {
    width: 380px;
    height: 380px;
  }
}

@media (min-width: 1024px) {
  .boss-stage {
    width: 440px;
    height: 440px;
  }
}

/* ---------- STORIES: LOGBUCH-PAPIER-OPTIK ---------- */
.book {
  position: relative;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(214,168,79,.08), transparent 60%),
    linear-gradient(160deg, #1c1712, #100d0a 60%, #0a0807);
  border: 1px solid rgba(214,168,79,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 120px rgba(0,0,0,.5);
}

.book::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 6%, rgba(0,0,0,.55), transparent 22%),
    radial-gradient(circle at 96% 8%, rgba(0,0,0,.5), transparent 24%),
    radial-gradient(circle at 8% 96%, rgba(0,0,0,.5), transparent 22%),
    radial-gradient(circle at 95% 94%, rgba(0,0,0,.55), transparent 24%);
  mix-blend-mode: multiply;
}

.book-content {
  position: relative;
  background: rgba(255,247,225,.04);
  border: 1px solid rgba(214,168,79,.18);
}

.book-content p {
  font-family: Georgia, 'Times New Roman', serif;
  color: #f1e6cf;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

#book-title {
  font-family: var(--fh-font-display);
  color: var(--fh-gold-bright);
  text-shadow: 0 0 24px rgba(240,201,106,.35);
}

/* =====================================================
   ADMIN-GATEWAY
===================================================== */
.fh-gateway-link {
  opacity: .55;
  font-size: 14px;
}

.fh-sidebar-gateway-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--fh-border);
  cursor: pointer;
  color: var(--fh-muted-fg);
  text-decoration: none;
}

.fh-sidebar-gateway-link:hover {
  color: var(--fh-gold-bright);
  border-color: rgba(240,201,106,.4);
}

.gateway-page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Das Admin-Gate ist ein Werkzeug, keine Buehne: kleinerer Kopf,
   damit der gewaehlte Teil ohne Scrollen auf den Schirm passt. */
#gateway .fh-page-head {
  margin-bottom: 8px;
}

#gateway .fh-page-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
}

.gateway-content {
  margin-top: 24px;
}

.gateway-login-box {
  text-align: center;
  padding: 40px 20px;
  border-radius: var(--fh-radius);
  background: var(--fh-surface);
  border: 1px solid var(--fh-border-strong);
}

.gateway-login-lead {
  margin-bottom: 20px;
  color: var(--fh-text-muted);
}

.gateway-denied {
  color: var(--fh-danger);
}

.gateway-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 8px 6px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fh-success, #55c878) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fh-success, #55c878) 30%, transparent);
  color: var(--fh-fg);
  font-size: 14px;
}

.gateway-logout-link {
  background: none;
  border: 1px solid var(--fh-border);
  color: var(--fh-muted-fg);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

/* --- Admin-Gate: Menue ---
   Sieben Bereiche als Leiste, darunter bei Bedarf die Teile als
   kleine Pillen. Es ist immer nur ein Teil sichtbar (siehe
   gwZeige() in admin-gateway.js). Uebergang, Druckgefuehl und
   Fokusring kommen zentral aus 80-interaktion.css. */
.gw-menue {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 12px 0 10px;
  padding: 5px;
  border-radius: var(--fh-radius);
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
}

.gw-gruppe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 7px 4px;
  border: 1px solid transparent;
  border-radius: var(--fh-radius-sm);
  background: none;
  color: var(--fh-muted-fg);
  font-family: var(--fh-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
}

.gw-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.gw-gruppe[aria-current="true"] {
  color: var(--fh-gold-bright);
  background: color-mix(in srgb, var(--fh-gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--fh-gold) 45%, transparent);
}

.gw-unter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.gw-teil-knopf {
  padding: 7px 14px;
  border: 1px solid var(--fh-border);
  border-radius: 999px;
  background: none;
  color: var(--fh-muted-fg);
  font-family: var(--fh-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
}

.gw-teil-knopf[aria-current="true"] {
  color: var(--fh-bg);
  background: var(--fh-gold-bright);
  border-color: var(--fh-gold-bright);
}

@media (hover: hover) {
  .gw-gruppe:not([aria-current="true"]):hover {
    color: var(--fh-fg);
    background: var(--fh-surface-2);
  }
  .gw-teil-knopf:not([aria-current="true"]):hover {
    color: var(--fh-fg);
    border-color: var(--fh-border-strong);
  }
}

/* hidden allein verliert gegen display:flex der Klasse. */
.gw-unter[hidden],
.gw-teil[hidden] {
  display: none !important;
}

.gw-teil {
  padding-top: 4px;
}

.gw-teil-titel {
  margin: 0 0 14px;
  font-family: var(--fh-font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--fh-gold-bright);
}

@media (max-width: 560px) {
  /* 4 + 3 statt 3 + 3 + 1 - sonst stuende "Community" allein. */
  .gw-menue {
    grid-template-columns: repeat(4, 1fr);
  }
  .gw-teil-knopf {
    min-height: 40px;
  }
}

/* --- Admin-Gate: Live-Steuerung ---
   Alles, was wirklich an alle geht, traegt den Feuer-Ton
   (.ist-alle) - Testen und Senden sollen sich mitten im Event
   nicht verwechseln lassen. */
.gw-live-nachricht {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}

.gw-feld {
  width: 140px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--fh-border-strong);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-bg-secondary);
  color: var(--fh-fg);
  font-family: var(--fh-font-sans);
  font-size: 14px;
  line-height: 1.3;
}

.gw-feld-breit {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
}

.gw-feld:focus-visible,
.gw-farbe:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 1px;
}

.gw-feld-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--fh-muted-fg);
}

.gw-farbe {
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--fh-border-strong);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-bg-secondary);
  cursor: pointer;
}

.gw-live-knopf {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--fh-border-strong);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface-2);
  color: var(--fh-fg);
  font-family: var(--fh-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
}

.gw-live-knopf.ist-alle {
  border-color: color-mix(in srgb, var(--fh-fire) 55%, transparent);
  background: color-mix(in srgb, var(--fh-fire) 14%, transparent);
}

@media (hover: hover) {
  .gw-live-knopf:hover {
    border-color: var(--fh-gold);
  }
  .gw-live-knopf.ist-alle:hover {
    border-color: var(--fh-fire);
    background: color-mix(in srgb, var(--fh-fire) 24%, transparent);
  }
}

.gw-live-tabelle {
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  background: var(--fh-surface);
  overflow: hidden;
}

.gw-live-zeile {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 1.2fr 1.2fr;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--fh-border);
}

.gw-live-zeile:first-child {
  border-top: 0;
}

.gw-live-kopf {
  background: var(--fh-surface-2);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.gw-live-kopf span:last-child {
  color: var(--fh-fire);
}

.gw-live-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fh-fg);
}

.gw-live-zelle {
  display: flex;
  gap: 6px;
}

.gw-live-zelle .gw-live-knopf {
  flex: 1;
}

.gw-live-status {
  min-height: 1.3em;
  margin: -6px 0 10px;
  font-size: 13px;
  color: var(--fh-success);
}

.gw-live-status.ist-fehler {
  color: var(--fh-danger);
}

/* Schmal: Name ueber die volle Breite, darunter die zwei Spalten. */
@media (max-width: 560px) {
  .gw-live-zeile {
    grid-template-columns: 1fr 1fr;
  }
  .gw-live-name {
    grid-column: 1 / -1;
  }
  .gw-live-kopf span:first-child {
    display: none;
  }
}

.gateway-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.gateway-status-card {
  padding: 14px 16px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface-2);
  border: 1px solid var(--fh-border);
}

.gateway-status-label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.gateway-status-value {
  margin-top: 6px;
  font-family: var(--fh-font-display);
  color: var(--fh-fg);
  font-size: 15px;
}

.gateway-status-sub {
  margin-top: 10px;
  color: var(--fh-muted-fg);
  font-size: 14px;
}

.gateway-inline-btn {
  padding: 6px 14px;
  font-size: 13px;
  margin-left: 8px;
  vertical-align: middle;
}

.gateway-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.gateway-form-row label {
  flex: 1;
  min-width: 220px;
  color: var(--fh-muted-fg);
  font-size: 13px;
}

.gateway-form-row input {
  margin-top: 6px;
  width: 100%;
}

.gateway-chapter-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.gateway-chapter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--fh-surface-2);
  border: 1px solid var(--fh-border);
  font-size: 14px;
  cursor: pointer;
}

.gateway-chapter-row input[type="checkbox"] {
  accent-color: var(--fh-gold);
}

.gateway-chapter-row small {
  color: var(--fh-muted-fg);
}

.gateway-preview-hint {
  margin-top: 10px;
  color: var(--fh-text-muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  .gateway-form-row { flex-direction: column; }
}


/* --- Admin-Gate: Event-Titel (Live-Event -> Titel) --- */
.gw-titel-vorschau {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--fh-border-strong);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-bg-secondary);
  font-size: 20px;
}

.gw-titel-treffer {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.gw-titel-treffer-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface);
}

.gw-titel-treffer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-titel-treffer-zeile code {
  font-size: 12px;
  color: var(--fh-muted-fg);
}


/* --- Admin-Gate: Codes -> Uebersicht --- */
.gw-code-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.gw-code-liste {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.gw-code-zeile {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface);
}

.gw-code-kopf,
.gw-code-daten,
.gw-code-nachtragen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gw-code-art {
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}
.gw-code-art.ist-dublonen { color: var(--fh-gold-bright); }
.gw-code-art.ist-boss     { color: var(--fh-fire); }
.gw-code-art.ist-xp       { color: var(--fh-violett); }
.gw-code-art.ist-story    { color: var(--fh-success); }

.gw-code-klartext {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fh-bg-secondary);
  font-size: 15px;
  font-weight: 600;
  color: var(--fh-fg);
  overflow-wrap: anywhere;
}

.gw-code-kopieren {
  margin-left: auto;
}

.gw-code-unbekannt {
  font-size: 13px;
  font-style: italic;
  color: var(--fh-muted-fg);
}

.gw-code-belohnung {
  font-weight: 600;
}

.gw-code-meta {
  font-size: 12px;
  color: var(--fh-muted-fg);
}

.gw-code-notiz {
  font-size: 13px;
  color: var(--fh-muted-fg);
  overflow-wrap: anywhere;
}

.gw-code-nachtragen .gw-feld {
  flex: 1;
  min-width: 140px;
}


/* --- Admin-Gate: Live-Storys --- */
.gw-story-lage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--fh-border-strong);
  border-radius: var(--fh-radius-sm);
}
.gw-story-jetzt { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--fh-fg); }
.gw-story-lage-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }

.gw-story-liste { display: grid; gap: 8px; margin-bottom: 10px; }

.gw-story {
  --ton: var(--fh-border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fh-border);
  border-left: 3px solid var(--ton);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface);
}
.gw-story.ist-gold    { --ton: var(--fh-gold-bright); }
.gw-story.ist-neon    { --ton: var(--fh-neon); }
.gw-story.ist-kalt    { --ton: var(--fh-cold); }
.gw-story.ist-violett { --ton: var(--fh-violett); }
.gw-story.ist-papier  { --ton: var(--fh-paper); }
.gw-story.ist-wasser  { --ton: #5aa0e0; }
.gw-story.ist-rot     { --ton: var(--fh-danger); }

.gw-story-text { display: flex; flex: 1 1 240px; flex-direction: column; gap: 2px; min-width: 0; }
.gw-story-name { font-size: 14px; font-weight: 600; color: var(--fh-fg); }
.gw-story.ist-neon .gw-story-name { font-family: var(--fh-mono); color: var(--fh-neon); }
.gw-story.ist-rot .gw-story-name { font-family: var(--fh-mono); color: var(--fh-danger); }
.gw-story-info { font-size: 12px; line-height: 1.4; color: var(--fh-muted-fg); }
.gw-story-knoepfe { display: flex; gap: 6px; }

/* Belohnungen je Story (admin-gateway.js, Migration 36) */
.gw-preis-felder { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.gw-preis-felder .gw-feld { width: 150px; }
.gw-preis-felder .gw-feld-zahl { width: 96px; }

/* Ablaufplan je Event (admin-gateway.js, Migration 33) */
.gw-plan {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--fh-gold) 40%, transparent);
  border-radius: var(--fh-radius-sm);
  background: color-mix(in srgb, var(--fh-gold) 5%, var(--fh-surface));
}
.gw-plan-kopf, .gw-plan-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gw-plan-kopf .gw-story-name { margin-right: 4px; color: var(--fh-gold-bright); }
.gw-plan-kopf .gw-feld-breit { flex: 1 1 220px; }
.gw-plan-ablauf { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gw-plan-leer { font-size: 13px; color: var(--fh-muted-fg); }
.gw-plan-schritt.ist-gelaufen { opacity: .55; }
.gw-plan-schritt.ist-naechste {
  border-color: color-mix(in srgb, var(--fh-gold) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-gold) 35%, transparent), 0 0 18px -6px var(--fh-gold);
}
.gw-plan-schritt.ist-naechste .gw-story-info { color: var(--fh-gold-bright); }
.gw-live-knopf.ist-klein { min-width: 34px; padding-left: 8px; padding-right: 8px; }
.gw-live-knopf:disabled { opacity: .35; cursor: default; }
/* Liedtext fuer "Liebeslied" (Gateway, Migration 70). */
.gw-lied-text { display: block; width: 100%; min-height: 220px; margin: 0 0 8px; resize: vertical; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; }
.gw-lied-klopfen { margin: 0 0 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--fh-lied-lila) 40%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--fh-lied-daemmer) 18%, transparent); }
.gw-lied-klopfen-zeit { margin: 0 0 6px; font: 500 12px/1.4 var(--fh-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--fh-muted-fg); }
.gw-lied-naechste { margin: 0 0 10px; font: 600 20px/1.35 var(--fh-font-sans); color: var(--fh-lied-lila); }

.gw-plan-ueberschrift {
  margin: 4px 0 8px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

/* Drehbuch je Event (scripts/liveevent/drehbuch.js, Migration 65) */
.gw-db { margin-top: 14px; }
.gw-db-steuer { padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--fh-gold) 30%, transparent); }
.gw-db-steuer .gw-story-info { margin-left: 6px; }
.gw-db-form { align-items: center; }
.gw-db-form [hidden], .gw-db-gruppe[hidden] { display: none; }
.gw-db-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 260px; }
.gw-db-gruppe .gw-feld-breit { flex: 1 1 200px; }
.gw-db input[type="color"] { width: 44px; height: 34px; padding: 2px; }
.gw-db input[type="number"] { width: 84px; }
.gw-db-ueberblick { display: block; margin: 2px 0 8px; }
.gw-db-marke { color: var(--fh-gold); }
.gw-plan-schritt.ist-bearbeitet { outline: 1px dashed var(--fh-gold); outline-offset: 2px; }
.gw-db-form optgroup { font-style: normal; }
/* acht Knöpfe je Schritt - auf schmalen Schirmen umbrechen statt überstehen */
.gw-db > *, .gw-db .gw-story-text { min-width: 0; }
.gw-db .gw-story-knoepfe { flex-wrap: wrap; }
.gw-db select.gw-feld { max-width: 100%; }

/* Musik je Story (admin-gateway.js, Migration 34) */
.gw-musik-datei { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; }

/* Mystery Gift (Migration 44): offene Kaeufe als Hinweis ganz oben
   in der Admin-Uebersicht. */
.gw-mystery-hinweis {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--fh-fire);
  border-radius: var(--fh-radius-sm);
  background: rgba(255,106,42,.12);
  color: var(--fh-fg);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease);
}
.gw-mystery-hinweis:hover,
.gw-mystery-hinweis:focus-visible { background: rgba(255,106,42,.22); }

/* ======================================================
   RECHTSSEITEN (Impressum, Datenschutz) + Fußzeile
====================================================== */
.fh-legal-body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--fh-fg);
  line-height: 1.7;
}
.fh-legal-body h2 {
  font-family: var(--fh-font-display);
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--fh-gold-bright);
  margin: 28px 0 8px;
}
.fh-legal-body h2:first-child { margin-top: 0; }
.fh-legal-body p { margin: 0 0 14px; color: var(--fh-muted-fg); }
.fh-legal-body a { color: var(--fh-cold); text-decoration: underline; word-break: break-word; }
.fh-legal-stand { font-size: 13px; opacity: .7; margin-top: 24px; }

.fh-legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--fh-muted-fg);
  border-top: 1px solid var(--fh-border);
  background: var(--fh-bg-secondary);
}
.fh-legal-footer a {
  color: var(--fh-muted-fg);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--fh-dauer) var(--fh-ease);
}
.fh-legal-footer a:hover,
.fh-legal-footer a:focus-visible { color: var(--fh-gold-bright); }


/* =====================================================
   SEITENWAHL IN DER EPOCHE 2100 (scripts/seiten/seiten.js)
   Vollbild ueber der Seite: zwei Karten, Menschen (kalt-blau)
   und Aliens (violett/neon), jeweils Vor- und Nachteile.
   #fh-seitenwahl haengt an body und steht in den :not-Listen von
   95 und 96 - der Epochen-Farbfilter faerbt es nicht um.
===================================================== */
.fh-seiten {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-overlay);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 40%, rgba(20,24,60,.88), rgba(2,3,10,.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fh-fg);
  animation: fh-seiten-rein .5s var(--fh-ease) both;
}
@keyframes fh-seiten-rein { from { opacity: 0; } to { opacity: 1; } }
.fh-seiten-innen { width: min(1040px, 100%); display: grid; gap: 24px; }
.fh-seiten-titelblock { text-align: center; display: grid; gap: 8px; }
.fh-seiten-kicker { margin: 0; font-family: var(--fh-font-display); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--fh-cold); }
.fh-seiten-titel { margin: 0; font-family: var(--fh-font-display); font-size: clamp(28px, 5vw, 44px); line-height: 1.05; }
.fh-seiten-lead { margin: 0 auto; max-width: 60ch; color: var(--fh-muted-fg); }
.fh-seiten-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fh-seiten-karte {
  --akzent: var(--fh-cold);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 12%, var(--fh-surface)), var(--fh-surface) 60%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--akzent) 14%, transparent);
  transition: transform .25s var(--fh-ease), box-shadow .25s var(--fh-ease);
}
.fh-seiten-karte.ist-aliens { --akzent: var(--fh-violett); }
.fh-seiten-karte:hover { transform: translateY(-2px); box-shadow: 0 0 56px color-mix(in srgb, var(--akzent) 26%, transparent); }
.fh-seiten-kopf { display: flex; align-items: center; gap: 14px; }
.fh-seiten-symbol {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.fh-seiten-symbol svg { width: 26px; height: 26px; }
.fh-seiten-volk { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.fh-seiten-name { margin: 2px 0 0; font-family: var(--fh-font-display); font-size: 26px; }
.fh-seiten-satz { margin: 0; color: var(--fh-muted-fg); }
.fh-seiten-ueber { margin: 6px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fh-muted-fg); }
.fh-seiten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fh-seiten-liste li { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; }
.fh-seiten-zeichen { flex: none; width: 1.1em; font-weight: 700; text-align: center; }
.fh-seiten-liste.ist-vor .fh-seiten-zeichen { color: var(--fh-success); }
.fh-seiten-liste.ist-nach .fh-seiten-zeichen { color: var(--fh-danger); }
.fh-seiten-aktion { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fh-seiten-knopf {
  font: inherit;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--akzent);
  color: var(--fh-fg);
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  cursor: pointer;
  transition: background .2s var(--fh-ease), box-shadow .2s var(--fh-ease);
}
.fh-seiten-knopf:hover,
.fh-seiten-knopf:focus-visible { background: color-mix(in srgb, var(--akzent) 38%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--akzent) 45%, transparent); outline: none; }
.fh-seiten-knopf.ist-ja { background: var(--akzent); color: var(--fh-bg); }
.fh-seiten-frage { margin: 0; width: 100%; color: var(--fh-fg); }
.fh-seiten-zurueck,
.fh-seiten-spaeter { font: inherit; background: none; border: 0; padding: 6px 4px; color: var(--fh-muted-fg); text-decoration: underline; cursor: pointer; }
.fh-seiten-zurueck:hover,
.fh-seiten-spaeter:hover { color: var(--fh-fg); }
.fh-seiten-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fh-seiten-status { margin: 0; min-height: 1.4em; color: var(--fh-muted-fg); }
.fh-seiten-status.ist-fehler { color: var(--fh-danger); }
@media (max-width: 720px) {
  .fh-seiten { place-items: start center; }
  .fh-seiten-karten { grid-template-columns: 1fr; }
  .fh-seiten-karte { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fh-seiten, .fh-seiten-karte { animation: none; transition: none; }
}

/* Wochenrennen in der Epoche 2100: statt der Rennbahn nur der
   Hinweis (race.js schreibt dann nichts). */
.race-ruht { display: none; }
html.fh-2100 #race > :not(.race-ruht) { display: none; }
html.fh-2100 #race > .race-ruht {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 12vh auto 0;
  padding: 32px 24px;
  text-align: center;
  border-radius: var(--fh-radius-lg);
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
}
.race-ruht-symbol { width: 44px; height: 44px; color: var(--fh-gold); }
.race-ruht-titel { margin: 0; font-family: var(--fh-font-display); font-size: 28px; }
.race-ruht-text { margin: 0; color: var(--fh-muted-fg); }

/* =====================================================
   HANGAR IM JAHR 2100 (scripts/hangar/hangar.js)
   Oben die vier Typen der eigenen Seite, darunter die gewaehlte
   Einheit gross mit ihren drei Werten und dem Ausbau.
   Menschen kalt-blau, Aliens violett mit gruenem Kern - wie im Film.
===================================================== */
.hg-seite { max-width: 1040px; margin: 0 auto; display: grid; gap: 20px; }
.hg-kopf { display: grid; gap: 6px; position: relative; padding-right: 56px; }
/* Ton der Schlachtmusik im Hangar (hangar.js) - wie der Knopf der Schlacht. */
.hg-ton {
  position: absolute; top: 0; right: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .04);
  color: var(--fh-fg);
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.hg-ton svg { width: 20px; height: 20px; }
/* Musik je Kampfort im Hangar (hangar.js) */
.hg-musik { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--fh-muted-fg); }
.hg-musik-wahl {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
  color: var(--fh-fg);
  font: inherit;
  cursor: pointer;
}
.hg-musik-wahl:hover, .hg-musik-wahl:focus-visible { border-color: var(--fh-cold); outline: none; }
.hg-ton:hover, .hg-ton:focus-visible { background: color-mix(in srgb, var(--fh-cold) 22%, transparent); border-color: var(--fh-cold); outline: none; }
.hg-ton[aria-pressed="false"] { opacity: .6; }
.hg-oberzeile { margin: 0; font-family: var(--fh-font-display); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--fh-cold); }
.hg-lead { margin: 0; color: var(--fh-muted-fg); }
#hangar-inhalt { display: grid; gap: 18px; }

.hg-hinweis { display: grid; gap: 10px; justify-items: start; padding: 28px; border-radius: var(--fh-radius-lg); border: 1px solid var(--fh-border); background: var(--fh-surface); }
.hg-hinweis-titel { margin: 0; font-family: var(--fh-font-display); font-size: 24px; }
.hg-hinweis-text { margin: 0; color: var(--fh-muted-fg); }

.hg-typen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hg-typ {
  font: inherit;
  color: var(--fh-fg);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
  cursor: pointer;
  transition: border-color .2s var(--fh-ease), background .2s var(--fh-ease), transform .2s var(--fh-ease);
}
.hg-typ:hover,
.hg-typ:focus-visible { border-color: var(--fh-border-strong); transform: translateY(-2px); outline: none; }
.hg-typ.ist-aktiv { border-color: var(--fh-cold); background: color-mix(in srgb, var(--fh-cold) 10%, var(--fh-surface)); box-shadow: 0 0 22px color-mix(in srgb, var(--fh-cold) 22%, transparent); }
.hg-typen:has(.ist-aliens) .hg-typ.ist-aktiv { border-color: var(--fh-violett); background: color-mix(in srgb, var(--fh-violett) 10%, var(--fh-surface)); box-shadow: 0 0 22px color-mix(in srgb, var(--fh-violett) 22%, transparent); }
.hg-typ-name { font-weight: 600; }
.hg-typ-rolle { font-size: 12px; color: var(--fh-muted-fg); text-align: center; }

.hg-schiff { display: block; width: 104px; aspect-ratio: 3 / 2; }
.hg-schiff svg { width: 100%; height: 100%; overflow: visible; }
.hg-schiff canvas { display: block; width: 100%; height: 100%; }
.hg-schiff.ist-gross { width: min(420px, 100%); height: auto; aspect-ratio: 3 / 2; }
.hg-schiff .hg-rumpf { fill: #8996a6; stroke: #e6eef6; stroke-width: 1.5; }
.hg-schiff .hg-deck { fill: #3e4a58; stroke: #dfe7f0; stroke-width: 1; }
.hg-schiff .hg-antrieb { fill: var(--fh-cold); filter: drop-shadow(0 0 6px var(--fh-cold)); }
.hg-schiff .hg-linie { fill: none; stroke: #dfe7f0; stroke-width: 2; stroke-linecap: round; opacity: .6; }
.hg-schiff.ist-aliens .hg-rumpf { fill: #3a2462; stroke: #b06cff; }
.hg-schiff.ist-aliens .hg-deck { fill: #22143e; stroke: #9d7bff; }
.hg-schiff.ist-aliens .hg-linie { stroke: #6b3fa8; opacity: 1; stroke-width: 4; }
.hg-schiff .hg-kern { fill: #8dff8a; filter: drop-shadow(0 0 6px #6bff7a); }

.hg-detail {
  --akzent: var(--fh-cold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent);
  background: radial-gradient(80% 90% at 25% 50%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 70%), var(--fh-surface);
}
.hg-detail.ist-aliens { --akzent: var(--fh-violett); }
.hg-buehne { position: relative; display: grid; place-items: center; min-height: 200px; }
@media (prefers-reduced-motion: no-preference) {
  .hg-buehne .hg-schiff { animation: hg-schweben 6s ease-in-out infinite; }
}
@keyframes hg-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hg-anzahl { position: absolute; right: 8%; bottom: 8%; font-family: var(--fh-font-display); font-size: 28px; color: var(--akzent); }
.hg-info { display: grid; gap: 10px; }
.hg-kicker { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.hg-name { margin: 0; font-family: var(--fh-font-display); font-size: 34px; line-height: 1; }
.hg-rolle { margin: 0; color: var(--fh-muted-fg); }
.hg-werte { display: grid; gap: 12px; margin-top: 6px; }
.hg-wert { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf knopf" "punkte knopf"; gap: 6px 14px; align-items: center; }
.hg-wert-kopf { grid-area: kopf; display: flex; justify-content: space-between; gap: 10px; }
.hg-wert-name { color: var(--fh-muted-fg); }
.hg-wert-zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-punkte { grid-area: punkte; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.hg-punkt { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.hg-punkt.ist-an { background: var(--akzent); box-shadow: 0 0 8px color-mix(in srgb, var(--akzent) 60%, transparent); }
.hg-ausbau,
.hg-knopf {
  grid-area: knopf;
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--akzent, var(--fh-cold));
  color: var(--fh-fg);
  background: color-mix(in srgb, var(--akzent, var(--fh-cold)) 18%, transparent);
  cursor: pointer;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hg-ausbau:hover:not(:disabled),
.hg-ausbau:focus-visible,
.hg-knopf:hover { background: color-mix(in srgb, var(--akzent, var(--fh-cold)) 34%, transparent); outline: none; }
.hg-ausbau.ist-frage { background: var(--akzent); color: var(--fh-bg); }
.hg-ausbau:disabled { opacity: .55; cursor: default; }
.hg-spezial { margin: 4px 0 0; color: var(--fh-muted-fg); }
.hg-spezial strong { color: var(--fh-fg); }
.hg-status { margin: 0; min-height: 1.4em; color: var(--fh-muted-fg); }
.hg-status.ist-fehler { color: var(--fh-danger); }
@media (max-width: 760px) {
  .hg-typen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fuenf Typen (63): der letzte bekommt die ganze Breite. */
  .hg-typen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hg-detail { grid-template-columns: 1fr; padding: 18px; }
  .hg-buehne { min-height: 150px; }
  .hg-wert { grid-template-columns: 1fr; grid-template-areas: "kopf" "punkte" "knopf"; }
  .hg-ausbau { justify-self: start; }
}

/* =====================================================
   LIVE-STERNENSCHLACHT (scripts/schlacht/schlacht.js)
   Vollbild-Buehne (#fh-schlacht-buehne an body, in den :not-Listen
   von 95/96 - kein Farbfilter): Kopf mit Runde, Rundensiegen, Ton
   und Schliessen; darunter das Schlachtfeld als Canvas, unten das
   Prozentbanner (Menschen kalt-blau links, Aliens violett rechts)
   und die Steuerung. Ohne laufende Schlacht: Hinweis, Siegerbanner
   mit Funken, Ruhmeshalle - dann scrollt der Inhalt.
   #fh-schlacht-hinweis haengt ebenfalls an body.
===================================================== */
.sl-seite { max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
html.fh-schlacht-offen, html.fh-schlacht-offen body { overflow: hidden; }
.sl-buehne {
  position: fixed;
  inset: 0;
  z-index: calc(var(--fh-z-overlay) - 1);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--fh-fg);
  background:
    radial-gradient(45% 60% at 18% 55%, color-mix(in srgb, var(--fh-cold) 16%, transparent), transparent 70%),
    radial-gradient(45% 60% at 82% 45%, color-mix(in srgb, var(--fh-violett) 18%, transparent), transparent 70%),
    #03040c;
}
.sl-buehne[hidden] { display: none; }
.sl-buehne-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--fh-cold) 18%, transparent);
  background: linear-gradient(180deg, rgba(3, 4, 12, .9), rgba(3, 4, 12, .55));
}
.sl-buehne-titel { display: grid; min-width: 0; line-height: 1.05; }
.sl-buehne-kicker { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--fh-cold); }
.sl-buehne-titel h2 { margin: 0; font-family: var(--fh-font-display); font-size: clamp(18px, 2.6vw, 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-buehne-lage { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sl-rund-knopf {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  cursor: pointer;
  transition: background .2s var(--fh-ease), border-color .2s var(--fh-ease);
}
.sl-rund-knopf svg { width: 20px; height: 20px; }
.sl-rund-knopf:hover, .sl-rund-knopf:focus-visible { background: color-mix(in srgb, var(--fh-cold) 22%, transparent); border-color: var(--fh-cold); outline: none; }
.sl-ton[aria-pressed="false"] { opacity: .6; }
.sl-buehne-inhalt {
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  align-content: start;
}
.sl-buehne-inhalt.ist-feld {
  max-width: none;
  overflow: hidden;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}
.sl-fuss { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; display: grid; gap: 10px; }
@media (max-width: 560px) {
  .sl-buehne-titel { display: none; }
  .sl-buehne-lage { margin-left: 0; margin-right: auto; }
}
.sl-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fh-font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--fh-danger); }
.sl-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fh-danger); box-shadow: 0 0 10px var(--fh-danger); }
@media (prefers-reduced-motion: no-preference) {
  .sl-live::before { animation: sl-puls 1.4s ease-in-out infinite; }
}
@keyframes sl-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sl-uhr { font-family: var(--fh-font-display); font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Rundensiege der endlosen Schlacht (Migration 50): Menschen : Aliens. */
.sl-punkte {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--fh-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--fh-cold) 22%, transparent), color-mix(in srgb, var(--fh-violett) 22%, transparent));
  font-family: var(--fh-font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.sl-punkte:empty { display: none; }
.sl-feld { position: relative; min-height: 0; overflow: hidden; }
.sl-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.sl-banner {
  display: flex;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--fh-border);
  font-weight: 700;
}
.sl-banner-m, .sl-banner-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  min-width: 0;
  white-space: nowrap;
  transition: width 1.2s var(--fh-ease);
}
.sl-banner-m { justify-content: flex-start; background: linear-gradient(90deg, color-mix(in srgb, var(--fh-cold) 70%, #000), var(--fh-cold)); color: #03101c; width: 50%; }
.sl-banner-a { justify-content: flex-end; background: linear-gradient(90deg, var(--fh-violett), color-mix(in srgb, var(--fh-violett) 60%, #000)); color: #fff; width: 50%; }
.sl-banner-name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.sl-banner-zahl-m, .sl-banner-zahl-a { font-variant-numeric: tabular-nums; }
.sl-steuer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sl-ziel-info { margin: 0; color: var(--fh-muted-fg); }
.sl-spezial {
  font: inherit; font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--fh-gold);
  background: color-mix(in srgb, var(--fh-gold) 20%, transparent);
  color: var(--fh-fg);
  cursor: pointer;
}
.sl-spezial:not(:disabled):hover, .sl-spezial:focus-visible { background: var(--fh-gold); color: var(--fh-bg); outline: none; }
.sl-spezial:disabled { opacity: .55; cursor: default; }
.sl-status { margin: 0; min-height: 1.4em; color: var(--fh-muted-fg); }
.sl-status.ist-fehler { color: var(--fh-danger); }

.sl-hinweis { display: grid; gap: 8px; padding: 28px; border-radius: var(--fh-radius-lg); border: 1px solid var(--fh-border); background: var(--fh-surface); }
.sl-hinweis-titel { margin: 0; font-family: var(--fh-font-display); font-size: 24px; }
.sl-hinweis-text { margin: 0; color: var(--fh-muted-fg); }

.sl-sieger {
  --akzent: var(--fh-gold);
  position: relative;
  overflow: hidden;
  display: grid; justify-items: center; gap: 6px;
  padding: 40px 20px;
  text-align: center;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--akzent) 50%, transparent);
  background: radial-gradient(70% 90% at 50% 30%, color-mix(in srgb, var(--akzent) 22%, transparent), transparent 70%), var(--fh-surface);
}
.sl-sieger.ist-menschen { --akzent: var(--fh-cold); }
.sl-sieger.ist-aliens { --akzent: var(--fh-violett); }
.sl-sieger-kicker { margin: 0; letter-spacing: .25em; text-transform: uppercase; font-size: 12px; color: var(--akzent); }
.sl-sieger-titel { margin: 0; font-family: var(--fh-font-display); font-size: clamp(30px, 6vw, 52px); }
.sl-sieger-stand { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--fh-muted-fg); }
.sl-funken { position: absolute; inset: 0; pointer-events: none; }
.sl-funken span {
  position: absolute; left: var(--x); bottom: -10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 10px var(--akzent);
  opacity: 0;
  animation: sl-funke 2.4s var(--fh-ease) var(--d) infinite both;
}
@keyframes sl-funke {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-260px) scale(.4); opacity: 0; }
}

.sl-ruhm { display: grid; gap: 10px; }
.sl-ruhm-titel { margin: 0; font-family: var(--fh-font-display); font-size: 24px; }
.sl-leer { margin: 0; color: var(--fh-muted-fg); }
.sl-ruhm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-ruhm-eintrag { display: grid; gap: 6px; padding: 12px 16px; border-radius: var(--fh-radius); border: 1px solid var(--fh-border); background: var(--fh-surface); border-left: 4px solid var(--fh-gold); }
.sl-ruhm-eintrag.ist-menschen { border-left-color: var(--fh-cold); }
.sl-ruhm-eintrag.ist-aliens { border-left-color: var(--fh-violett); }
.sl-ruhm-kopf { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.sl-ruhm-datum { color: var(--fh-muted-fg); font-variant-numeric: tabular-nums; }
.sl-ruhm-stand { margin-left: auto; font-variant-numeric: tabular-nums; }
.sl-ruhm-helden { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-held { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fh-cold) 16%, transparent); }
.sl-held.ist-aliens { background: color-mix(in srgb, var(--fh-violett) 18%, transparent); }

.fh-schlacht-hinweis {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--fh-z-toast);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--fh-2100-kante, var(--fh-border));
  background: var(--fh-2100-glas, var(--fh-surface));
  color: var(--fh-2100-text, var(--fh-fg));
  box-shadow: 0 0 24px rgba(80,120,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fh-schlacht-hinweis-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--fh-danger); box-shadow: 0 0 10px var(--fh-danger); }
.fh-schlacht-hinweis-knopf { font: inherit; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--fh-2100-cyan, var(--fh-cold)); color: var(--fh-bg); cursor: pointer; }
@media (max-width: 760px) {
  .fh-schlacht-hinweis { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); justify-content: space-between; }
  .sl-banner-name { display: none; }
}

/* =====================================================
   STERNENSCHLACHT: KAMPFORT UND START-ANIMATION
   (scripts/schlacht/schlacht-orte.js, Migration 55)
   Die Animation liegt INNERHALB von #fh-schlacht-buehne - die steht
   schon in den :not-Listen von 95 und 96.
===================================================== */
/* Der Kopf darf nie breiter als das Fenster werden - sonst zieht die
   Grid-Spalte der Buehne das ganze Feld mit (Handy, mit Orts-Plakette). */
.sl-buehne { grid-template-columns: minmax(0, 1fr); }
.sl-buehne-lage { min-width: 0; }
.sl-punkte { flex: none; white-space: nowrap; }
.sl-ort { position: relative; min-width: 0; flex: 0 1 auto; }
.sl-ort-knopf {
  max-width: 34vw;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fh-gold-bright) 45%, transparent);
  background: color-mix(in srgb, var(--fh-gold) 14%, transparent);
  color: var(--fh-gold-bright);
  font: 600 13px/1.2 var(--fh-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.sl-ort-knopf:hover, .sl-ort-knopf:focus-visible, .sl-ort-knopf[aria-expanded="true"] {
  background: color-mix(in srgb, var(--fh-gold) 28%, transparent);
  border-color: var(--fh-gold-bright);
  outline: none;
}
.sl-ort-tafel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 3;
  width: min(340px, 86vw);
  padding: 14px 16px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid color-mix(in srgb, var(--fh-gold-bright) 35%, transparent);
  background: rgba(6, 8, 18, .94);
  box-shadow: var(--fh-shadow);
  display: grid;
  gap: 10px;
}
.sl-ort-tafel[hidden] { display: none; }
.sl-ort-name { margin: 0; font: 600 16px/1.2 var(--fh-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--fh-gold-bright); }
.sl-ort-gegend { margin: -6px 0 0; font-style: italic; color: var(--fh-muted-fg); font-size: 14px; }
.sl-ort-regeln { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.sl-ort-regeln li { padding-left: 16px; position: relative; }
.sl-ort-regeln li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--fh-gold-bright); }
.sl-ort-nochmal {
  justify-self: start;
  padding: 6px 12px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.sl-ort-nochmal:hover, .sl-ort-nochmal:focus-visible { border-color: var(--fh-cold); outline: none; }
@media (max-width: 560px) {
  .sl-ort-knopf { max-width: 100%; font-size: 11px; padding: 5px 10px; }
  .sl-buehne-lage { gap: 8px; }
  .sl-live { font-size: 0; gap: 0; }   /* nur der rote Punkt */
  .sl-uhr { font-size: 18px; }
  .sl-ort-tafel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(64px + env(safe-area-inset-top));
    width: auto;
  }
}

/* ---- Start-Animation ----
   Seit dem Design V2 (Claude Design, "Schlacht Design") stylt
   schlacht-orte.js den Einflug selbst mit Inline-Stilen aus den
   --fh-Tokens; hier steht nur noch, was inline nicht geht. */
.sl-intro-weiter:hover, .sl-intro-weiter:focus-visible { outline: 2px solid var(--fh-nocturne-hell); outline-offset: 2px; }

/* ---- Vorschau aller Kampforte (Admin, schlacht-orte.js) ----
   #fh-orte-vorschau haengt an body und steht in den :not-Listen von
   95 und 96. Gleiche Ebene wie die Schlachtbuehne. */
.sl-vorschau {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--fh-fg);
  background: #03040c;
}
.sl-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--fh-gold-bright) 22%, transparent);
  background: rgba(3, 4, 12, .92);
  min-width: 0;
}
.sl-vorschau-titel { margin: 0; flex: none; font: 600 clamp(16px, 2.2vw, 22px)/1.1 var(--fh-font-display); white-space: nowrap; }
.sl-vorschau-reiter { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.sl-vorschau-reiter-knopf {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  font: 600 12px/1.2 var(--fh-font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.sl-vorschau-reiter-knopf:hover, .sl-vorschau-reiter-knopf:focus-visible { border-color: var(--fh-gold-bright); outline: none; }
.sl-vorschau-reiter-knopf[aria-selected="true"] {
  border-color: var(--fh-gold-bright);
  background: color-mix(in srgb, var(--fh-gold) 26%, transparent);
  color: var(--fh-gold-bright);
}
.sl-vorschau-feld { position: relative; min-height: 0; overflow: hidden; }
.sl-vorschau-canvas { display: block; width: 100%; height: 100%; }
.sl-vorschau-fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--fh-gold-bright) 22%, transparent);
  background: rgba(3, 4, 12, .92);
}
.sl-vorschau-info { display: grid; gap: 6px; min-width: 0; }
.sl-vorschau-info .sl-ort-gegend { margin: -4px 0 0; }
.sl-vorschau-info .sl-ort-regeln { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sl-vorschau-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sl-vorschau-knopf {
  padding: 9px 16px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid color-mix(in srgb, var(--fh-gold-bright) 50%, transparent);
  background: color-mix(in srgb, var(--fh-gold) 18%, transparent);
  color: var(--fh-gold-bright);
  font: 600 14px/1.2 var(--fh-font-display);
  letter-spacing: .04em;
  cursor: pointer;
}
.sl-vorschau-knopf:hover, .sl-vorschau-knopf:focus-visible { background: color-mix(in srgb, var(--fh-gold) 32%, transparent); outline: none; }
.sl-vorschau-knopf:disabled { opacity: .45; cursor: not-allowed; }
.sl-vorschau-hinweis { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--fh-muted-fg); }
@media (max-width: 640px) {
  .sl-vorschau-titel { display: none; }
  .sl-vorschau-fuss { grid-template-columns: minmax(0, 1fr); }
  .sl-vorschau-knoepfe { justify-content: flex-start; }
}
/* Das Banner "Sternenschlacht laeuft!" gehoert nicht ueber die
   Vorschau oder die Buehne selbst. */
html.fh-schlacht-offen #fh-schlacht-hinweis { display: none; }

/* =====================================================
   STERNENSCHLACHT: PARTEIEN (Migration 57)
   ---------------------------------------------------
   Jede Partei bringt ihre Akzentfarbe als --partei mit (data-partei).
   Sammelphase: .sl-lobby mit der Wahl-Tafel .sl-wahl (zwei Parteien,
   je vier Schiffe). Im Kampf liegt dieselbe Tafel in .sl-wahl-ueber
   ueber dem Feld.
===================================================== */
[data-partei="menschen"] { --partei: var(--fh-cold); --partei-text: #03101c; }
[data-partei="aliens"] { --partei: var(--fh-violett); --partei-text: #fff; }
[data-partei="piraten"] { --partei: var(--fh-fire); --partei-text: #1a0a02; }
[data-partei="maschinen"] { --partei: var(--fh-danger); --partei-text: #fff; }
[data-partei="kristall"] { --partei: var(--fh-kristall); --partei-text: #2a0620; }
[data-partei="geister"] { --partei: var(--fh-geist); --partei-text: #021a12; }

.sl-banner-m[data-partei] { background: linear-gradient(90deg, color-mix(in srgb, var(--partei) 70%, #000), var(--partei)); color: var(--partei-text); }
.sl-banner-a[data-partei] { background: linear-gradient(90deg, var(--partei), color-mix(in srgb, var(--partei) 60%, #000)); color: #fff; }
.sl-sieger[data-partei] { --akzent: var(--partei); }
.sl-ruhm-eintrag[data-partei] { border-left-color: var(--partei); }
.sl-held[data-partei] { background: color-mix(in srgb, var(--partei) 18%, transparent); }

.sl-lobby { display: grid; gap: 18px; }
.sl-lobby-kopf { display: grid; gap: 6px; justify-items: center; text-align: center; }
.sl-lobby-kicker { margin: 0; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--fh-gold-bright); }
.sl-lobby-titel { margin: 0; font-family: var(--fh-font-display); font-size: clamp(26px, 5vw, 44px); line-height: 1.05; }
.sl-lobby-uhr {
  margin: 4px 0 0;
  padding: 4px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fh-gold) 60%, transparent);
  background: color-mix(in srgb, var(--fh-gold) 12%, transparent);
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.sl-lobby-text { margin: 0; max-width: 60ch; color: var(--fh-muted-fg); }

.sl-wahl { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sl-wahl-partei {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--partei) 38%, var(--fh-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--partei) 14%, var(--fh-surface)), var(--fh-surface) 62%);
  transition: opacity var(--fh-dauer) var(--fh-ease);
}
.sl-wahl-partei.ist-gesperrt { opacity: .45; }
.sl-wahl-partei-kopf { display: grid; gap: 2px; }
.sl-wahl-partei-name { margin: 0; font-family: var(--fh-font-display); font-size: 22px; color: var(--partei); }
.sl-wahl-partei-text { margin: 0; font-size: 13px; color: var(--fh-muted-fg); }
.sl-wahl-partei-zahl { margin: 4px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fh-fg); }
.sl-wahl-typen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl-wahl-typen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.sl-wahl-typ {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fh-dauer) var(--fh-ease), background var(--fh-dauer) var(--fh-ease), transform var(--fh-dauer) var(--fh-ease), box-shadow var(--fh-dauer) var(--fh-ease);
}
.sl-wahl-typ:not(:disabled):hover, .sl-wahl-typ:focus-visible {
  border-color: var(--partei);
  background: color-mix(in srgb, var(--partei) 10%, transparent);
  transform: translateY(-2px);
  outline: none;
}
.sl-wahl-typ.ist-aktiv {
  border-color: var(--partei);
  background: color-mix(in srgb, var(--partei) 16%, transparent);
  box-shadow: 0 0 0 1px var(--partei), 0 0 24px color-mix(in srgb, var(--partei) 30%, transparent);
}
.sl-wahl-typ:disabled { cursor: not-allowed; }
.sl-wahl-bild canvas { display: block; width: 100%; max-width: 116px; height: auto; margin: 0 auto; }
.sl-wahl-name { font-weight: 700; }
.sl-wahl-typ.ist-aktiv .sl-wahl-name { color: var(--partei); }
.sl-wahl-rolle, .sl-wahl-spezial { font-size: 12px; color: var(--fh-muted-fg); }
.sl-wahl-werte { font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sl-wahl { grid-template-columns: minmax(0, 1fr); }
}

/* Wahl waehrend des Kampfs: Knopf in der Steuerung, Tafel ueber dem Feld */
.sl-wahl-knopf {
  font: inherit; font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--fh-border-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--fh-fg);
  cursor: pointer;
}
.sl-wahl-knopf:hover, .sl-wahl-knopf:focus-visible, .sl-wahl-knopf[aria-expanded="true"] { border-color: var(--fh-gold-bright); outline: none; }
.sl-wahl-ueber {
  position: absolute;
  inset: 8px;
  z-index: 2;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow-y: auto;
  padding: 14px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid var(--fh-border-strong);
  background: rgba(3, 4, 12, .92);
}
.sl-wahl-ueber[hidden] { display: none; }
.sl-wahl-ueber-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sl-wahl-ueber-titel { margin: 0; font-family: var(--fh-font-display); font-size: 20px; }

/* Hangar: die Schiffe der anderen Parteien (nur mit Freigabe) */
.hg-parteien { display: grid; gap: 14px; margin-top: 8px; }
.hg-parteien-titel { margin: 0; font-family: var(--fh-font-display); font-size: 22px; }
.hg-parteien-text { margin: 0; color: var(--fh-muted-fg); }
.hg-parteien-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hg-partei {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--partei) 35%, var(--fh-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--partei) 12%, var(--fh-surface)), var(--fh-surface) 65%);
}
.hg-partei-name { margin: 0; font-family: var(--fh-font-display); font-size: 18px; color: var(--partei); }
.hg-partei-text { margin: 0; font-size: 12px; color: var(--fh-muted-fg); }
.hg-partei-typen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hg-partei-typ { display: grid; justify-items: center; gap: 2px; min-width: 0; font-size: 12px; text-align: center; }
.hg-partei-typ .hg-schiff canvas { display: block; width: 100%; max-width: 110px; height: auto; }
.hg-partei-typ-name { font-weight: 700; }
.hg-partei-typ-werte { color: var(--fh-muted-fg); font-variant-numeric: tabular-nums; }

/* =====================================================
   HANGAR-AUSRUESTUNG UND BOSS (Migrationen 58/59)
   ---------------------------------------------------
   .hg-aus: Rang, Sonderwaffe, Module im Hangar.
   .sl-boss: Lebensleiste des Mutterschiffs ueber dem Feld.
===================================================== */
[data-partei="allianz"] { --partei: var(--fh-gold-bright); --partei-text: #1a1204; }
[data-partei="boss"] { --partei: var(--fh-danger); --partei-text: #fff; }

.hg-aus { display: grid; gap: 16px; margin-top: 6px; }
.hg-aus-titel { margin: 0; font-family: var(--fh-font-display); font-size: 22px; }
.hg-rang {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid color-mix(in srgb, var(--fh-gold) 40%, var(--fh-border));
  background: linear-gradient(140deg, color-mix(in srgb, var(--fh-gold) 12%, var(--fh-surface)), var(--fh-surface) 70%);
}
.hg-rang-kopf { display: flex; align-items: center; gap: 14px; }
.hg-rang-abzeichen {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--fh-gold-bright);
  background: color-mix(in srgb, var(--fh-gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fh-gold) 50%, transparent);
  box-shadow: var(--fh-glow-gold);
}
.hg-rang-abzeichen svg { width: 34px; height: 34px; }
.hg-rang-text { display: grid; gap: 2px; min-width: 0; }
.hg-rang-name { margin: 0; font-family: var(--fh-font-display); font-size: 22px; color: var(--fh-gold-bright); }
.hg-rang-bonus, .hg-rang-zahlen { margin: 0; font-size: 13px; color: var(--fh-muted-fg); font-variant-numeric: tabular-nums; }
.hg-rang-balken { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--fh-gold) 14%, transparent); }
.hg-rang-fuellung { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fh-gold), var(--fh-gold-bright)); box-shadow: var(--fh-glow-gold); }
.hg-aus-gruppe { display: grid; gap: 8px; }
.hg-aus-gruppe-titel { margin: 0; font-family: var(--fh-font-display); font-size: 18px; }
.hg-aus-gruppe-text { margin: 0; font-size: 13px; color: var(--fh-muted-fg); }
.hg-aus-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hg-teil {
  --akzent: var(--fh-cold);
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
  transition: border-color var(--fh-dauer) var(--fh-ease), box-shadow var(--fh-dauer) var(--fh-ease);
}
.hg-teil[data-teil="plasma"] { --akzent: var(--fh-waffe-plasma); }
.hg-teil[data-teil="raketen"] { --akzent: var(--fh-waffe-raketen); }
.hg-teil[data-teil="tesla"] { --akzent: var(--fh-waffe-tesla); }
.hg-teil[data-teil="lanze"] { --akzent: var(--fh-waffe-lanze); }
.hg-teil.ist-gekauft { border-color: color-mix(in srgb, var(--akzent) 40%, var(--fh-border)); }
.hg-teil.ist-angelegt { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), 0 0 20px color-mix(in srgb, var(--akzent) 25%, transparent); }
.hg-teil-name { margin: 0; font-size: 15px; }
.hg-teil.ist-angelegt .hg-teil-name { color: var(--akzent); }
.hg-teil-text { margin: 0; font-size: 12px; color: var(--fh-muted-fg); }
.hg-teil-platz { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.hg-teil-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.hg-teil-knopf {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--akzent);
  color: var(--fh-fg);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.hg-teil-knopf:hover, .hg-teil-knopf:focus-visible { background: color-mix(in srgb, var(--akzent) 30%, transparent); outline: none; }
.hg-teil-knopf.ist-frage { background: var(--akzent); color: var(--fh-bg); }

/* Boss: Lebensleiste ueber dem Feld */
.sl-boss {
  position: absolute;
  top: 10px; left: 50%;
  z-index: 1;
  width: min(560px, calc(100% - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--fh-radius);
  border: 1px solid color-mix(in srgb, var(--fh-danger) 50%, transparent);
  background: rgba(10, 2, 6, .72);
  pointer-events: none;
}
.sl-boss-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sl-boss-name { font-family: var(--fh-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--fh-boss-hell); }
.sl-boss-phase, .sl-boss-schild {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--fh-danger) 60%, transparent);
  color: var(--fh-fg);
}
.sl-boss-schild { border-color: var(--fh-boss-hell); background: color-mix(in srgb, var(--fh-boss) 22%, transparent); }
.sl-boss-schild[hidden] { display: none; }
.sl-boss-zahl { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.sl-boss-balken { height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.sl-boss-fuellung {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fh-danger), var(--fh-boss));
  box-shadow: 0 0 12px color-mix(in srgb, var(--fh-danger) 70%, transparent);
  transition: width 1.2s var(--fh-ease);
}
.sl-boss[data-phase="3"] .sl-boss-fuellung { background: linear-gradient(90deg, var(--fh-fire-deep), var(--fh-fire)); }

/* Boss: Wahl einer Partei mit Chips (eine Spalte) */
.sl-wahl.ist-boss { grid-template-columns: minmax(0, 1fr); max-width: 760px; width: 100%; margin: 0 auto; }
.sl-wahl.ist-boss .sl-wahl-typen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sl-wahl.ist-boss .sl-wahl-typen > :last-child:nth-child(odd) { grid-column: auto; }
.sl-wahl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sl-wahl-chip {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--partei) 50%, var(--fh-border));
  background: transparent;
  color: var(--partei);
  cursor: pointer;
}
.sl-wahl-chip[aria-pressed="true"] { background: var(--partei); color: var(--partei-text); border-color: var(--partei); }
.sl-wahl-chip:focus-visible { outline: 2px solid var(--partei); outline-offset: 2px; }
@media (max-width: 760px) {
  .sl-wahl.ist-boss .sl-wahl-typen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-wahl.ist-boss .sl-wahl-typen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =====================================================
   SPIND, PROFILKARTE, GLUECKSMINE, FRONT (Migrationen 60-62)
   ---------------------------------------------------
   Namensfarben .fh-name-<id> und Banner .fh-banner-<id> sind die
   festen Teile aus public.spind_teile.
===================================================== */
.fh-name-gold { color: var(--fh-gold-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--fh-gold) 55%, transparent); }
.fh-name-feuer { color: var(--fh-fire); text-shadow: 0 0 10px color-mix(in srgb, var(--fh-fire) 55%, transparent); }
.fh-name-eis { color: var(--fh-cold); text-shadow: 0 0 10px color-mix(in srgb, var(--fh-cold) 55%, transparent); }
.fh-name-smaragd { color: var(--fh-success); text-shadow: 0 0 10px color-mix(in srgb, var(--fh-success) 55%, transparent); }
.fh-name-nordlicht, .fh-name-regenbogen {
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fh-name-nordlicht { background-image: linear-gradient(90deg, var(--fh-geist), var(--fh-cold), var(--fh-violett), var(--fh-geist)); }
.fh-name-regenbogen { background-image: linear-gradient(90deg, var(--fh-danger), var(--fh-fire), var(--fh-gold-bright), var(--fh-success), var(--fh-cold), var(--fh-violett), var(--fh-danger)); }
@media (prefers-reduced-motion: no-preference) {
  .fh-name-nordlicht, .fh-name-regenbogen { animation: fh-name-lauf 4s linear infinite; }
}
@keyframes fh-name-lauf { from { background-position: 0% 0; } to { background-position: 200% 0; } }

.fh-banner-meer { background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--fh-cold) 45%, transparent), transparent 60%), linear-gradient(180deg, var(--fh-blue), var(--fh-ocean)); }
.fh-banner-sturm { background: linear-gradient(115deg, transparent 47%, color-mix(in srgb, var(--fh-gold-bright) 70%, transparent) 48%, transparent 50%), linear-gradient(180deg, var(--fh-border-strong), var(--fh-bg-secondary)); }
.fh-banner-schatzkarte { background: repeating-linear-gradient(45deg, transparent 0 18px, color-mix(in srgb, var(--fh-seekarte-tinte) 18%, transparent) 18px 19px), radial-gradient(circle at 75% 55%, var(--fh-red-deep) 0 5px, transparent 6px), linear-gradient(180deg, var(--fh-paper), var(--fh-seekarte-sand)); }
.fh-banner-vulkan { background: radial-gradient(60% 80% at 50% 110%, var(--fh-fire), transparent 70%), linear-gradient(180deg, var(--fh-red-deep), var(--fh-bg)); }
.fh-banner-sternennebel { background: radial-gradient(50% 70% at 25% 40%, color-mix(in srgb, var(--fh-violett) 70%, transparent), transparent 70%), radial-gradient(40% 60% at 75% 60%, color-mix(in srgb, var(--fh-kristall) 55%, transparent), transparent 70%), var(--fh-bg); }
.fh-banner-kraken { background: radial-gradient(30% 120% at 15% 100%, color-mix(in srgb, var(--fh-geist) 55%, transparent), transparent 70%), radial-gradient(30% 120% at 85% 100%, color-mix(in srgb, var(--fh-geist) 40%, transparent), transparent 70%), linear-gradient(180deg, var(--fh-nocturne-dunkel), var(--fh-seekarte-see)); }
.fh-banner-zeitriss { background: linear-gradient(100deg, transparent 44%, var(--fh-neon-hell) 49%, var(--fh-violett) 51%, transparent 56%), linear-gradient(180deg, var(--fh-nocturne-tief), var(--fh-bg)); background-size: 220% 100%, 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .fh-banner-zeitriss { animation: fh-zeitriss 6s ease-in-out infinite alternate; }
}
@keyframes fh-zeitriss { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }

/* Profilkarte */
.fh-profil {
  position: relative;
  overflow: hidden;
  border-radius: var(--fh-radius-lg);
  border: 1px solid var(--fh-border-strong);
  background: var(--fh-surface);
  box-shadow: var(--fh-shadow);
}
.fh-profil-banner { height: 108px; }
.fh-profil-kopf { display: grid; justify-items: center; gap: 6px; padding: 0 18px 12px; margin-top: -46px; text-align: center; }
.fh-profil-avatar { display: grid; place-items: center; width: 92px; height: 92px; }
.fh-profil-avatar img, .fh-profil-avatar .fh-profil-avatar-emoji {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid var(--fh-surface);
  background: var(--fh-muted);
  object-fit: cover;
  display: grid; place-items: center;
  font-size: 44px;
}
.fh-profil-name { margin: 2px 0 0; font-family: var(--fh-font-display); font-size: 26px; }
.fh-profil-titel { margin: 0; }
.fh-profil-spruch { margin: 2px 0 0; font-style: italic; color: var(--fh-muted-fg); }
.fh-profil-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 0; background: var(--fh-border); border-top: 1px solid var(--fh-border); }
.fh-profil-wert { display: grid; gap: 2px; padding: 10px 14px; background: var(--fh-surface); }
.fh-profil-wert dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fh-muted-fg); }
.fh-profil-wert dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fh-profil-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fh-fg);
  overflow: visible;
}
.fh-profil-dialog::backdrop { background: rgba(3, 4, 12, .7); }
.fh-profil-zu {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fh-border-strong);
  background: rgba(3, 4, 12, .6);
  color: var(--fh-fg);
  cursor: pointer;
}
.fh-profil-zu svg { width: 18px; height: 18px; }
.fh-profil-laedt { margin: 0; padding: 24px; border-radius: var(--fh-radius-lg); background: var(--fh-surface); text-align: center; color: var(--fh-muted-fg); }
/* Name in der Rangliste: oeffnet die Profilkarte */
.fh-name-knopf { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.fh-name-knopf:hover, .fh-name-knopf:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }

/* Spind-Seite */
.sp-inhalt { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.sp-vorschau { position: sticky; top: calc(var(--fh-topbar-h) + 16px); display: grid; gap: 10px; }
.sp-vorschau-kicker { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fh-gold-bright); }
.sp-einstellungen { display: grid; gap: 18px; min-width: 0; }
.sp-abschnitt { display: grid; gap: 8px; padding: 16px; border-radius: var(--fh-radius-lg); border: 1px solid var(--fh-border); background: var(--fh-surface); }
.sp-abschnitt-titel { margin: 0; font-family: var(--fh-font-display); font-size: 20px; }
.sp-abschnitt-text, .sp-leer, .sp-hinweis { margin: 0; font-size: 13px; color: var(--fh-muted-fg); }
.sp-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-wahl {
  font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border);
  background: rgba(255, 255, 255, .03);
  color: var(--fh-fg);
  cursor: pointer;
  transition: border-color var(--fh-dauer) var(--fh-ease), box-shadow var(--fh-dauer) var(--fh-ease);
}
.sp-wahl:hover, .sp-wahl:focus-visible { border-color: var(--fh-gold); outline: none; }
.sp-wahl.ist-aktiv { border-color: var(--fh-gold-bright); box-shadow: 0 0 0 1px var(--fh-gold-bright), var(--fh-glow-gold); }
.sp-rahmen .fh-profil-avatar { width: 48px; height: 48px; }
.sp-rahmen .fh-profil-avatar img, .sp-rahmen .fh-profil-avatar .fh-profil-avatar-emoji { width: 40px; height: 40px; font-size: 22px; border-width: 2px; }
.sp-teile .sp-wahl { flex-direction: column; align-items: stretch; min-width: 120px; }
.sp-teil-inhalt { display: grid; gap: 4px; justify-items: center; font-weight: 700; }
.sp-banner-probe { width: 100%; min-width: 110px; height: 34px; border-radius: 8px; }
.sp-teil-name { font-size: 13px; font-weight: 600; }
.sp-preis { font-size: 12px; font-weight: 600; color: var(--fh-gold-bright); font-variant-numeric: tabular-nums; }
.sp-preis.ist-frage { padding: 2px 8px; border-radius: 999px; background: var(--fh-gold); color: var(--fh-bg); }
.sp-wahl.ist-zu-kaufen { opacity: .85; }
.sp-spruch { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-spruch-feld { flex: 1 1 220px; min-width: 0; font: inherit; padding: 9px 12px; border-radius: var(--fh-radius-sm); border: 1px solid var(--fh-border-strong); background: var(--fh-bg-secondary); color: var(--fh-fg); }
.sp-spruch-feld:focus-visible { outline: 2px solid var(--fh-gold); outline-offset: 1px; }
.sp-knopf {
  font: inherit; font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--fh-gold);
  background: color-mix(in srgb, var(--fh-gold) 18%, transparent);
  color: var(--fh-fg);
  cursor: pointer;
}
.sp-knopf:hover, .sp-knopf:focus-visible { background: color-mix(in srgb, var(--fh-gold) 32%, transparent); outline: none; }
.sp-status { margin: 0; min-height: 1.4em; color: var(--fh-muted-fg); }
.sp-status.ist-fehler { color: var(--fh-danger); }
@media (max-width: 820px) {
  .sp-inhalt { grid-template-columns: minmax(0, 1fr); }
  .sp-vorschau { position: static; }
}

/* Gluecksmine - Design "Nocturne" (Claude Design "Gluecksmine", Entwurf 1b):
   der Fels als Buehne mit Anzeigen darueber, Ausruestung und Bestenliste in
   einer Spalte daneben, Erz und Raumerz rechts neben der Ueberschrift. */
#gluecksmine .mn-seite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
#gluecksmine .fh-page-head { text-align: left; margin-bottom: 28px; max-width: 60ch; }
#gluecksmine .fh-page-kicker { margin-bottom: 8px; font-family: var(--fh-font-sans); font-size: 12px; letter-spacing: .16em; color: var(--fh-nocturne); }
#gluecksmine h1.fh-page-title { font-family: var(--fh-font-sans); font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; text-shadow: none; }
#gluecksmine .fh-page-lead { margin: 8px 0 0; font-size: 15px; color: color-mix(in srgb, var(--fh-text) 62%, transparent); }
#gluecksmine .mn-inhalt { grid-column: 1 / -1; }
.mn-konten { display: flex; gap: 32px; align-items: flex-end; margin-bottom: 28px; }
.mn-konten[hidden], .mn-konto[hidden] { display: none; }
.mn-konto { display: flex; flex-direction: column; gap: 2px; }
.mn-konto-name { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--fh-text) 55%, transparent); }
.mn-konto-zahl { font-family: var(--fh-font-sans); font-size: clamp(30px, 4vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fh-text); }
.mn-konto.ist-raumerz .mn-konto-zahl { color: var(--fh-nocturne-hell); text-shadow: 0 0 24px color-mix(in srgb, var(--fh-nocturne) 45%, transparent); }

.mn-inhalt { display: grid; gap: 16px; }
.mn-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.mn-links { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mn-fels {
  position: relative;
  border-radius: var(--fh-radius);
  overflow: hidden;
  background: var(--fh-nocturne-karte);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-text) 20%, transparent), 0 6px 18px rgba(0, 0, 0, .55);
}
.mn-canvas { display: block; width: 100%; height: clamp(300px, 52vh, 460px); cursor: pointer; touch-action: manipulation; }
.mn-canvas:focus-visible { outline: 2px solid var(--fh-nocturne); outline-offset: -2px; }

/* Anzeigen ueber dem Fels: Block (links), Tiefe (rechts), Tipp und Meldung (unten) */
.mn-hud {
  position: absolute; top: 16px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--fh-radius-sm);
  background: color-mix(in srgb, var(--fh-nocturne-grund) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-text) 14%, transparent);
  backdrop-filter: blur(6px);
  font-size: 14px;
  pointer-events: none;
}
.mn-hud.ist-block { left: 16px; min-width: 220px; }
.mn-hud.ist-tiefe { right: 16px; min-width: 170px; align-items: flex-end; gap: 6px; }
.mn-hud-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mn-hud-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mn-hud-wert, .mn-hud-klein { font-size: 12px; color: color-mix(in srgb, var(--fh-text) 60%, transparent); font-variant-numeric: tabular-nums; }
.mn-raute { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.mn-leiste { align-self: stretch; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--fh-text) 12%, transparent); }
.mn-leiste-fuellung { height: 100%; border-radius: 2px; transition: width .15s ease-out; }
.mn-leiste-fuellung.ist-tiefe { background: var(--fh-nocturne-hell); transition-duration: .3s; }
.mn-tipp {
  position: absolute; right: 16px; bottom: 18px;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: color-mix(in srgb, var(--fh-text) 60%, transparent);
  pointer-events: none;
}
.mn-tipp kbd {
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-text) 20%, transparent);
  background: color-mix(in srgb, var(--fh-nocturne-grund) 60%, transparent);
  color: color-mix(in srgb, var(--fh-text) 82%, transparent);
  font: inherit; font-size: 11px; letter-spacing: .04em;
}
.mn-status {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: calc(100% - 32px);
  margin: 0; padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fh-nocturne-grund) 82%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-text) 14%, transparent);
  color: var(--fh-text);
  font-weight: 500; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.mn-status:empty { display: none; }
.mn-status.ist-gold { color: var(--fh-gold-bright); box-shadow: 0 0 0 1px var(--fh-gold-bright), 0 0 24px color-mix(in srgb, var(--fh-gold-bright) 35%, transparent); }
.mn-status.ist-edelstein { color: var(--fh-geist); box-shadow: 0 0 0 1px var(--fh-geist), 0 0 24px color-mix(in srgb, var(--fh-geist) 35%, transparent); }
.mn-status.ist-raumerz,
.mn-status.ist-tiefe { color: var(--fh-nocturne-hell); box-shadow: 0 0 0 1px var(--fh-nocturne-hell), 0 0 24px color-mix(in srgb, var(--fh-nocturne) 45%, transparent); }
.mn-status.ist-fehler { color: var(--fh-danger); }
.mn-zahlen { margin: 0; padding-left: 4px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: color-mix(in srgb, var(--fh-text) 60%, transparent); font-variant-numeric: tabular-nums; }
.mn-zahl strong { font-weight: 500; color: var(--fh-text); }

/* Spalte: Ausruestung und Bestenliste */
.mn-spalte { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.mn-gruppe { display: flex; flex-direction: column; gap: 10px; }
.mn-gruppe-titel { margin: 0; font-family: var(--fh-font-sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--fh-text) 55%, transparent); }
.mn-geraete { display: flex; flex-direction: column; gap: 10px; }
.mn-geraet {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "sym kopf knopf" "sym fuss knopf";
  gap: 4px 12px; align-items: center;
  padding: 12px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-nocturne-karte);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fh-text) 14%, transparent);
}
.mn-geraet-sym { grid-area: sym; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--fh-radius-sm); background: var(--fh-nocturne-dunkel); color: var(--fh-nocturne-hell); }
.mn-geraet-sym svg { width: 20px; height: 20px; }
.mn-geraet-kopf { grid-area: kopf; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mn-geraet-name { margin: 0; font-family: var(--fh-font-sans); font-size: 14px; font-weight: 500; }
.mn-geraet-stufe { font-size: 12px; color: color-mix(in srgb, var(--fh-text) 55%, transparent); font-variant-numeric: tabular-nums; }
.mn-geraet-fuss { grid-area: fuss; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mn-punkte { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 150px; }
.mn-punkte span { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--fh-text) 12%, transparent); }
.mn-punkte span.ist-an { background: var(--fh-nocturne-hell); }
.mn-geraet-wirkung { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--fh-text) 60%, transparent); }
.mn-knopf {
  grid-area: knopf;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fh-text) 16%, transparent);
  background: transparent;
  color: var(--fh-text);
  font: inherit; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.mn-knopf svg { width: 16px; height: 16px; }
.mn-knopf:hover:not(:disabled) { background: color-mix(in srgb, var(--fh-text) 7%, transparent); }
.mn-knopf:active:not(:disabled) { background: color-mix(in srgb, var(--fh-text) 14%, transparent); }
.mn-knopf:focus-visible { outline: 2px solid var(--fh-nocturne); outline-offset: 2px; }
.mn-knopf:disabled { opacity: .45; cursor: not-allowed; }
.mn-rangliste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.mn-rang { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 4px; transition: background var(--fh-dauer) var(--fh-ease); }
.mn-rang:hover { background: color-mix(in srgb, var(--fh-text) 6%, transparent); }
.mn-rang-platz { font-size: 12px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fh-text) 55%, transparent); }
.mn-rang.ist-erster .mn-rang-platz { color: var(--fh-nocturne-hell); }
.mn-rang-name { font: inherit; font-weight: 500; text-align: left; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-rang-name:hover, .mn-rang-name:focus-visible { text-decoration: underline; outline: none; }
.mn-rang-erz { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fh-text) 60%, transparent); }
.mn-leer, .mn-hinweis { color: var(--fh-muted-fg); }

@media (max-width: 1080px) {
  .mn-raster { grid-template-columns: minmax(0, 1fr); }
  .mn-geraete { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 760px) {
  #gluecksmine .mn-seite { grid-template-columns: minmax(0, 1fr); }
  .mn-konten { gap: 24px; }
  .mn-hud { top: 10px; padding: 8px 10px; font-size: 13px; }
  .mn-hud.ist-block { left: 10px; min-width: 0; max-width: 52%; }
  .mn-hud.ist-tiefe { right: 10px; min-width: 0; max-width: 42%; }
  .mn-hud-wert { display: none; }
  .mn-tipp { display: none; }
}

.hg-raumerz-konto { margin: 0 0 4px; font-size: 13px; color: var(--fh-muted-fg); }
.hg-raumerz { color: var(--fh-raumerz); font-variant-numeric: tabular-nums; }
.hg-punkte.ist-raumerz { grid-template-columns: repeat(15, 1fr); }
.hg-punkt.ist-raumerz { background: color-mix(in srgb, var(--fh-raumerz) 16%, transparent); }
.hg-punkt.ist-raumerz.ist-an { background: var(--fh-raumerz); box-shadow: 0 0 8px color-mix(in srgb, var(--fh-raumerz) 60%, transparent); }
.hg-ausbau.ist-raumerz { border-color: var(--fh-raumerz); background: color-mix(in srgb, var(--fh-raumerz) 14%, transparent); }

/* Hangar: Erz-Stufen und Schiffssysteme */
.hg-punkte.ist-erz { grid-template-columns: repeat(10, 1fr); }
.hg-punkt.ist-erz { background: color-mix(in srgb, var(--fh-gold) 16%, transparent); }
.hg-punkt.ist-erz.ist-an { background: var(--fh-gold-bright); box-shadow: 0 0 8px color-mix(in srgb, var(--fh-gold) 60%, transparent); }
.hg-ausbau.ist-erz { border-color: var(--fh-gold); background: color-mix(in srgb, var(--fh-gold) 16%, transparent); }
.hg-systeme { display: grid; gap: 10px; margin-top: 6px; }
.hg-systeme-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hg-erz { font-weight: 700; color: var(--fh-gold-bright); font-variant-numeric: tabular-nums; }
.hg-systeme-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hg-system { --akzent: var(--fh-gold); display: grid; gap: 8px; padding: 14px; border-radius: var(--fh-radius); border: 1px solid color-mix(in srgb, var(--fh-gold) 30%, var(--fh-border)); background: var(--fh-surface); }
.hg-system .hg-punkte { grid-template-columns: repeat(5, 1fr); }
/* Punkte und Knopf tragen aus .hg-wert benannte Flaechen - hier nicht. */
.hg-system > * { grid-area: auto; }

/* Front (Sternenschlacht) */
.sl-front { display: grid; gap: 8px; }
.sl-front[hidden] { display: none; }
.sl-front-leiste { --links: var(--fh-cold); --rechts: var(--fh-violett); }
.sl-front-spur { position: relative; height: 16px; border-radius: 999px; overflow: hidden; border: 1px solid var(--fh-border); display: flex; }
.sl-front-links, .sl-front-rechts { flex: 1; }
.sl-front-links { background: linear-gradient(90deg, color-mix(in srgb, var(--links) 70%, #000), color-mix(in srgb, var(--links) 35%, transparent)); }
.sl-front-rechts { background: linear-gradient(90deg, color-mix(in srgb, var(--rechts) 35%, transparent), color-mix(in srgb, var(--rechts) 70%, #000)); }
.sl-front-mitte { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .35); }
.sl-front-marke {
  position: absolute; top: -3px; left: 50%;
  width: 6px; height: 20px; margin-left: -3px;
  border-radius: 3px;
  background: var(--fh-fg);
  box-shadow: 0 0 12px var(--fh-fg);
}
.sl-front-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.sl-front-uhr { font-variant-numeric: tabular-nums; color: var(--fh-muted-fg); }
.sl-front-ereignis { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--ev, transparent); color: var(--ev, var(--fh-fg)); font-weight: 600; }
.sl-front-ereignis:empty { display: none; }
.sl-front-ausgleich { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fh-gold) 18%, transparent); color: var(--fh-gold-bright); font-weight: 600; }
.sl-front-ausgleich[hidden] { display: none; }
.sl-front-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sl-front-haltung { display: inline-flex; border-radius: 999px; border: 1px solid var(--fh-border-strong); overflow: hidden; }
.sl-front-h, .sl-front-u {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 0;
  background: rgba(255, 255, 255, .03);
  color: var(--fh-fg);
  cursor: pointer;
}
.sl-front-h + .sl-front-h { border-left: 1px solid var(--fh-border-strong); }
.sl-front-h svg, .sl-front-u svg { width: 16px; height: 16px; }
.sl-front-h[aria-checked="true"] { background: var(--fh-gold); color: var(--fh-bg); }
.sl-front-h:hover:not(:disabled):not([aria-checked="true"]), .sl-front-h:focus-visible { background: color-mix(in srgb, var(--fh-gold) 20%, transparent); outline: none; }
.sl-front-h:disabled, .sl-front-u:disabled { opacity: .5; cursor: default; }
.sl-front-kp { font-weight: 700; color: var(--fh-gold-bright); font-variant-numeric: tabular-nums; min-width: 4ch; }
.sl-front-upg { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-front-u { border-radius: 999px; border: 1px solid var(--fh-border-strong); font-variant-numeric: tabular-nums; }
.sl-front-u:hover:not(:disabled), .sl-front-u:focus-visible { border-color: var(--fh-gold); outline: none; }
@media (max-width: 560px) {
  .sl-front-h span { display: none; }
  .sl-front-h { padding: 8px 10px; }
}

/* Admin: Haken neben den Reglern */
.gw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }