/* =====================================================================
   DayZ GeoGuessr - Grundgestaltung
   Umgesetzt nach dem Entwurf "Chernarus Guessr".
   ===================================================================== */

:root {
  /* --- Grundflaechen ------------------------------------------------ */
  --bg:            #0a0b08;   /* Fast-Schwarz mit Olivstich */
  --bg-raised:     #14170f;
  --bg-sunken:     #070803;

  /* Glas-Panels: halbdurchsichtig plus Weichzeichner. Traegt den
     gesamten Look - flache Fuellfarben wirken daneben sofort billig. */
  --glass:         rgba(18, 20, 15, .6);
  --glass-strong:  rgba(18, 20, 15, .7);
  --glass-border:  rgba(255, 255, 255, .09);
  --blur:          blur(16px);

  /* Raender sind immer hauchduennes Weiss, nie ein Grauton. */
  --border:        rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);

  /* --- Text --------------------------------------------------------- */
  --text:          #f2f1ea;
  --text-muted:    rgba(242, 241, 234, .65);
  --text-faint:    rgba(242, 241, 234, .45);
  --text-dim:      rgba(242, 241, 234, .3);

  /* --- Akzent (Oliv) ------------------------------------------------ */
  --accent:        #c9d17a;
  --accent-hover:  #dbe295;
  --accent-text:   #181c10;   /* dunkler Text auf oliver Flaeche */
  --accent-soft:   rgba(201, 209, 122, .14);
  --accent-line:   rgba(201, 209, 122, .5);

  /* --- Signalfarben -------------------------------------------------- */
  --good:          #7fae5a;
  --warn:          #e0a24f;
  --bad:           #e0714f;
  --guess:         #c9482f;   /* Tipp-Markierung auf der Karte */

  /* --- Form --------------------------------------------------------- */
  --radius:        8px;
  --radius-lg:     14px;
  --radius-pill:   999px;
  --shadow:        0 12px 30px rgba(0, 0, 0, .45);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  color-scheme: dark;
}

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

/* Das hidden-Attribut setzt nur eine Regel des Browser-Stylesheets, die von
   jeder eigenen display-Angabe geschlagen wird. Ohne diese Zeile bleibt ein
   Element mit z.B. `display: grid` trotz hidden sichtbar - bei einer
   bildschirmfuellenden Ebene faengt es dann unbemerkt alle Klicks ab. */
[hidden] { display: none !important; }

/* Honigtopf gegen Bots. Bewusst NICHT display:none und nicht type="hidden" -
   beides erkennen Bots trivial. Das Feld bleibt technisch sichtbar, steht
   aber ausserhalb des Bildschirms und ist per tabindex="-1" aus der
   Tastaturreihenfolge genommen. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  /* Gekacheltes Muster als Grundflaeche, in Spiel wie Verwaltung - beide
     laden diese Datei, und der relative Pfad loest von "/" wie von "/admin/"
     auf dasselbe Bild auf.

     background-size bleibt bei auto: das Bild wird NICHT skaliert, sondern
     so oft wiederholt, wie das Fenster breit ist. Die Farbe darunter bleibt
     stehen, falls die Datei einmal fehlt - dann ist die Flaeche einfarbig
     statt weiss. */
  background: var(--bg) url(../img/backdrop-pattern.jpg) repeat;
  background-size: auto;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p  { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---------------------------------------------------------------------
   Wiederkehrende Bausteine
   --------------------------------------------------------------------- */

/* Glas-Panel: der Grundbaustein des gesamten Entwurfs. */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.panel {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}

/* Logo: gedrehtes Quadrat mit kleinerer Raute darin, reines CSS. */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo__mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--accent-line);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo__mark::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(-45deg);
}
.logo__text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
}
.logo__text b { font-weight: 600; }
.logo__text span { color: var(--accent); }

/* Zweizeilige Variante fuer das Spiel-HUD */
.logo--stacked .logo__mark { width: 30px; height: 30px; }
.logo--stacked .logo__text { font-size: 14px; letter-spacing: .14em; line-height: 1.25; }
.logo--stacked .logo__text span {
  display: block;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: .22em;
}

/* Grosse Variante fuer den Startbildschirm */
.logo--hero .logo__mark { width: 32px; height: 32px; }
.logo--hero .logo__mark::after { width: 9px; height: 9px; }
.logo--hero .logo__text {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Kleintext-Label in Mono, ueberall fuer Rubriken verwendet. */
.label-mono {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* Farbkreis mit Initiale - steht ueberall dort, wo der Entwurf ein
   Avatarbild zeigt. Ein Avatar-Feld wird bislang nirgends befuellt. */
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

/* ---------------------------------------------------------------------
   Bedienelemente
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  color: rgba(242, 241, 234, .85);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); color: var(--text); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
}
.btn--ghost:hover:not(:disabled) { background: transparent; color: var(--text); }

.btn--danger { border-color: rgba(224, 113, 79, .35); color: #eda893; }
.btn--danger:hover:not(:disabled) { background: rgba(224, 113, 79, .12); border-color: var(--bad); }

.btn--lg { padding: 15px 30px; font-size: 15px; border-radius: 9px; }
.btn--block { width: 100%; }

input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(255, 255, 255, .07);
}
input::placeholder { color: var(--text-dim); }
textarea { resize: vertical; min-height: 4em; }

label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
}

.field { margin-bottom: 16px; }
.field__hint { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }

/* Chips: Runden-, Zeit- und Tag-Auswahl. Ausgewaehlt = olive Flaeche. */
.choice, .tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: rgba(242, 241, 234, .85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.choice:hover, .tag-toggle:hover { background: rgba(255, 255, 255, .08); }

.choice input, .tag-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice:has(input:checked),
.tag-toggle:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.choice:has(input:focus-visible),
.tag-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Zaehler im Tag-Chip */
.tag-toggle__count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  opacity: .7;
}
.tag-toggle:has(input:checked) .tag-toggle__count { color: var(--accent-text); }

/* Gesperrter Chip mit Sprechblase, z.B. der Ranked-Modus vor der
   Freischaltung. Das Label bleibt bewusst ueberfahrbar - nur das
   Auswahlfeld darin ist deaktiviert -, damit der Hinweis erscheint. */
.choice--disabled {
  position: relative;
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .07);
  color: var(--text-dim);
  cursor: not-allowed;
}
.choice--disabled:hover { background: rgba(255, 255, 255, .02); }

.choice--disabled[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(10, 11, 8, .95);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s;
}
.choice--disabled[data-tooltip]:hover::after,
.choice--disabled[data-tooltip]:focus-within::after { opacity: 1; }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Trennt zwei Gruppen innerhalb einer Filterzeile voneinander. */
.filter-gap { flex: 0 0 16px; }

/* Farbiger Tag-Aufkleber (Ergebnisanzeige, Verwaltung) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--tag-color, rgba(255, 255, 255, .1));
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.notice {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.5;
}
.notice--error { border-left-color: var(--bad);  color: #eda893; }
.notice--warn  { border-left-color: var(--warn); color: #e8c58c; }
.notice--info  { border-left-color: var(--accent); color: var(--text-muted); }
.notice--ok    { border-left-color: var(--good); color: #aacf94; }
.notice + .notice { margin-top: 8px; }

.spinner {
  width: 2rem; height: 2rem;
  border: 2px solid rgba(255, 255, 255, .1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 40vh;
  color: var(--text-faint);
  font-size: 13px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Spiel
   ===================================================================== */

#app { height: 100%; }

.screen { display: none; height: 100%; }
.screen.is-active { display: block; }

/* Vollflaechiger Hintergrund: Szenenfoto (falls vorhanden), darueber
   Verlauf und Vignette. Ein flaches dunkles Rechteck wirkt tot. */
/* Das Bild wird nicht hier gesetzt, sondern von game.js - erst nachdem es
   erfolgreich geladen wurde. Eine fehlende Datei direkt im Stylesheet zu
   referenzieren laesst den Browser bei jeder Neuberechnung erneut anfragen
   und fuellt das Netzwerkprotokoll mit 404ern. */
/* Kein eigenes Bild mehr: das Muster kommt vom body durch. Uebrig bleibt der
   dunkle Rahmen darunter, der die Raender abdunkelt und den Blick nach innen
   zieht. */
.backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Ebenfalls fuers Foto gedacht: 50 px Streuung bei 60 % Deckung zogen einen
   schwarzen Rahmen um die Seite. Ueber dem Muster wuerde der die Kacheln am
   Rand verschlucken - schwaecher und weicher, der Blick wird immer noch nach
   innen gefuehrt. */
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px 10px rgba(0, 0, 0, .45);
}

/* ---------------------------- Startbildschirm ---------------------- */

/* Senkrechte Aufteilung: oben der Inhalt, unten die Partnerleiste. */
/* Kein min-height: der Bereich soll sich nach dem Fenster richten. Waere er
   hoeher als das Fenster, schnitte das overflow:hidden unten die
   Partnerleiste ab. Zu wenig Platz faengt .start__grid ab, indem es innen
   scrollt. */
.start {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Aussen deckend, zur Mitte hin offener - der Inhalt steht mittig, deshalb
   muss der Verlauf symmetrisch sein. Ein einseitiger Verlauf wuerde den
   Block halb im Hellen stehen lassen.

   DIE WERTE WAREN FUER EIN SZENENFOTO GEDACHT und entsprechend kraeftig:
   senkrecht und waagerecht multiplizieren sich, in der Mitte kamen so 72 %
   Deckung zusammen, an den Raendern 92 %. Ueber einem hellen Foto war das
   noetig, ueber dem dunklen Muster loeschte es dieses schlicht aus.
   Halbiert: der Text bleibt weit ueber dem noetigen Kontrast, das Muster
   ist zu sehen. */
.start__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 7, 5, .35) 0%,
      rgba(6, 7, 5, .10) 45%,
      rgba(6, 7, 5, .55) 100%),
    linear-gradient(90deg,
      rgba(6, 7, 5, .70) 0%,
      rgba(6, 7, 5, .25) 28%,
      rgba(6, 7, 5, .25) 72%,
      rgba(6, 7, 5, .70) 100%);
  pointer-events: none;
}

.start__session {
  position: absolute;
  top: 32px;
  right: 40px;
  /* Muss ueber .start__grid liegen. Das Raster fuellt mit height:100% die
     ganze Flaeche; bei gleichem Stapelwert gewinnt es als spaeteres Element
     im Dokument und faengt jeden Klick auf den Anmeldeknopf ab. */
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.start__session .btn--ghost { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }

/* Zwei Spalten: links Name und Beschreibung, rechts das Menue.
   Die Spalten haben feste Hoechstbreiten und werden als Block zentriert -
   mit 1fr-Spalten wuerden sie an die Fensterkanten gedrueckt. */
.start__grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 560px);
  gap: 56px;
  justify-content: center;
  /* "safe" verhindert, dass bei zu wenig Platz oben abgeschnitten wird -
     dann faengt der Inhalt wieder oben an, statt aus dem Bild zu laufen. */
  align-content: center;
  align-content: safe center;
  /* Nimmt die Hoehe, die die Partnerleiste uebrig laesst. min-height:0 ist
     noetig, damit overflow-y in einem Flex-Element ueberhaupt greift. */
  flex: 1 1 auto;
  min-height: 0;
  padding: 56px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.start__intro { max-width: 520px; padding-top: 8px; }
.start__menu  { max-width: 560px; }

.start__subtitle {
  margin: 8px 0 20px 44px;
  font-size: 15px;
  color: var(--text-muted);
}
.start__lead {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Kurzbeschreibung der beiden Spielmodi */
.mode-info { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.mode-info__item {
  padding-left: 14px;
  border-left: 2px solid var(--accent-line);
}
.mode-info__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
}
.mode-info__badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Nicht --text-faint: mit 45 % Deckkraft faellt dieser Absatz ueber einer
   aufgehellten Hoehenlinie auf 4,1:1 und damit unter die 4,5:1, die
   Fliesstext braucht. --text-muted haelt den Abstand. */
.mode-info__text { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* Regelübersicht im Ranked-Modus */
.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rules li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.rules li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.rules b { color: var(--text); font-weight: 600; }

.start__panel { display: flex; flex-direction: column; gap: 18px; }

.setup-group__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.setup-group__hint { font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
/* Der mitlaufende Reglerwert, rechtsbuendig am Ende der Zeile. */
.setup-group__value {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------- Regler ---------------------------- */
/* Runden und Zeitlimit. Schiene und Griff muessen fuer WebKit und Firefox
   getrennt notiert werden: fasst man die Praefixe in einer Regelliste
   zusammen, verwirft der Browser wegen des ihm unbekannten Selektors den
   gesamten Block. */

.slider { display: flex; flex-direction: column; gap: 7px; }

.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.slider__input:focus { outline: none; }

/* --fill kommt aus dem JavaScript und faerbt die Schiene bis zum Griff. */
.slider__input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 / var(--fill, 0%) 100% no-repeat,
    rgba(255, 255, 255, .12);
}
.slider__input::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}
.slider__input::-moz-range-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
}

.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  /* (Schienenhoehe - Griffhoehe) / 2, damit der Griff mittig sitzt. */
  margin-top: -6.5px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.slider__input::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}

.slider__input:hover::-webkit-slider-thumb,
.slider__input:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider__input:hover::-moz-range-thumb,
.slider__input:active::-moz-range-thumb { transform: scale(1.12); }

/* Tastaturbedienung muss sichtbar sein. */
.slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 4px rgba(0, 0, 0, .5);
}
.slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 1px 4px rgba(0, 0, 0, .5);
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.tag-category { margin-bottom: 18px; }
.tag-category:last-of-type { margin-bottom: 0; }
.tag-category__name { margin-bottom: 8px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }

.divider { height: 1px; background: var(--glass-border); }

.start__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.start__pool { font-size: 13px; color: var(--text-muted); }
.start__pool strong { color: var(--text); font-weight: 700; }

.start__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
}

/* Discord-Knopf. Bewusst in der Hausfarbe von Discord statt im Olivton der
   Seite - er fuehrt woanders hin, und das soll man sehen. */
.btn--discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
  text-decoration: none;
}
.btn--discord:hover { background: #4752c4; border-color: #4752c4; }
.btn--discord svg { flex-shrink: 0; }

/* ----------------------------- Turniere ---------------------------- */
/* Unten mittig auf der Startseite, ueber der Partnerleiste. Drei Bloecke
   nebeneinander, solange Platz ist - darunter zwei, dann einer.

   flex: 0 0 auto wie bei .partners: der Abschnitt behaelt seine Hoehe, und
   das Raster darueber gibt nach. Andersherum wuerden die Karten gequetscht,
   sobald das Fenster niedrig ist. */

.tournaments {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding: 18px 40px 6px;
}
.tournaments[hidden] { display: none; }

.tournaments__label {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

.tournaments__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1136px;
  margin: 0 auto;
}

.tournament-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
/* Was laeuft, bekommt eine Kante - es ist das einzige, an dem man gerade
   teilnehmen kann. */
.tournament-card.is-running { border-color: rgba(120, 190, 90, .45); }

.tournament-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tournament-card__badge {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tournament-card__badge.is-running {
  border-color: rgba(120, 190, 90, .5);
  background: rgba(120, 190, 90, .16);
  color: #a6d98a;
}
.tournament-card__badge.is-upcoming {
  border-color: rgba(120, 160, 200, .5);
  background: rgba(120, 160, 200, .16);
  color: #a7c6e4;
}
.tournament-card__time {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tournament-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.tournament-card__prize {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.tournament-card__rules {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tournament-card__button { width: 100%; margin-top: 2px; }

.tournament-card__sponsor {
  font-size: 11px;
  color: var(--text-faint);
}
.tournament-card__sponsor a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tournament-card__sponsor a:hover { color: var(--text); }

/* --------------------------- Turnierseite -------------------------- */

.tournament-prize {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
}
.tournament-prize__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tournament-prize__text {
  margin: 4px 0 6px;
  font-size: 15px;
  line-height: 1.5;
}

.tournament-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}
.tournament-action__hint {
  margin: 0;
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tournament-own {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 1040px) {
  .tournaments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .tournaments { padding: 14px 18px 4px; }
  .tournaments__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------- Partnerleiste ------------------------ */
/* Nur auf dem Startbildschirm - sie liegt in #screen-start und taucht
   deshalb im Spiel, in der Zusammenfassung und in der Bestenliste nicht auf. */

.partners {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  padding: 14px 0 18px;
  border-top: 1px solid var(--glass-border);
  background: rgba(6, 7, 5, .55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.partners__label {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* Beschneidet den Streifen und blendet ihn an beiden Enden weich aus,
   statt die Logos hart abzuschneiden. */
.partners__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* Die Logoliste steht zweimal im Streifen. Verschoben wird um genau die
   halbe Streifenbreite, danach steht wieder das erste Logo an derselben
   Stelle - der Umlauf ist deshalb nicht zu sehen.
   Das padding-left ist kein Zierrand: ohne es fehlt beim Umlauf genau ein
   Zwischenraum, und der Sprung waere sichtbar. */
.partners__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding-left: 56px;
  animation: partners-scroll 40s linear infinite;
}
.partners__viewport:hover .partners__track { animation-play-state: paused; }

.partners__logo {
  flex-shrink: 0;
  height: 34px;
  width: auto;
  opacity: .5;
  transition: opacity .2s ease;
}
.partners__logo:hover { opacity: .95; }

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------- Spielansicht ------------------------- */

.play { position: relative; height: 100%; overflow: hidden; }

.pano-stage {
  position: absolute;
  inset: 0;
  background: var(--bg-sunken);
  touch-action: none;
}
.pano-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.pano-canvas.is-dragging { cursor: grabbing; }
.pano-stage.is-locked .pano-canvas { cursor: default; pointer-events: none; }

/* Verlauf oben und unten, damit die HUD-Elemente lesbar bleiben. */
.play__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .05) 22%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, .35) 100%);
  box-shadow: inset 0 0 180px 40px rgba(0, 0, 0, .65);
}

.pano-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sunken);
}

/* HUD-Ecken */
.hud-corner { position: absolute; z-index: 5; }
.hud-corner--tl { top: 28px; left: 32px; }
.hud-corner--tc { top: 26px; left: 50%; transform: translateX(-50%); }
.hud-corner--tr { top: 26px; right: 32px; display: flex; align-items: center; gap: 12px; }
.hud-corner--bl { bottom: 16px; left: 32px; display: flex; align-items: center; gap: 14px; }

/* Runden- und Timer-Pille */
.hud-pill {
  display: flex;
  align-items: stretch;
  background: rgba(18, 20, 15, .55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--mono);
}
.hud-pill__round {
  padding: 12px 20px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(242, 241, 234, .72);
}
.hud-pill__round strong { color: var(--text); font-weight: 600; }

/* Ohne Zeitlimit wird das Timer-Segment ausgeblendet - dann darf auch der
   Trennstrich nicht als freier Strich am rechten Rand stehen bleiben. */
.hud-pill:has(.hud-pill__timer[hidden]) .hud-pill__round { border-right: none; }

.hud-pill__timer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
}
.hud-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hud-pill__time {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Unter 15 Sekunden: Farbwechsel und Pulsieren. */
.hud-pill__timer.is-urgent .hud-pill__dot,
.hud-pill__timer.is-urgent .hud-pill__time {
  color: var(--bad);
  background-color: var(--bad);
  animation: hud-pulse 1s ease-in-out infinite;
}
.hud-pill__timer.is-urgent .hud-pill__time { background-color: transparent; }
@keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* HP-Balken unter der Runden-Pille, nur im Ranked. */
.hp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 0;
  padding: 7px 14px;
  width: fit-content;
  background: rgba(18, 20, 15, .55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}
.hp-bar__track {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.hp-bar__fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .45s cubic-bezier(.22, .9, .3, 1), background .3s;
}
.hp-bar.is-critical .hp-bar__fill { background: var(--bad); }
.hp-bar__value {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hp-bar.is-critical .hp-bar__value { color: var(--bad); }

/* Spieler oben rechts */
.hud-player { text-align: right; line-height: 1.3; }
.hud-player__name { font-size: 13px; font-weight: 600; }
.hud-player__score {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
}
.hud-corner--tr .avatar {
  width: 56px; height: 56px;
  font-size: 20px;
  border: 1.5px solid rgba(255, 255, 255, .18);
}

/* Statuszeile unten links */
.hud-corner--bl .btn--ghost {
  padding: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Kartenfenster unten rechts */
.guess-panel {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 6;
  width: 300px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: width .18s ease;
}
.guess-panel.is-expanded { width: min(72vw, 900px); }

.guess-panel__map {
  height: 190px;
  background: var(--bg-sunken);
  transition: height .18s ease;
}
.guess-panel.is-expanded .guess-panel__map { height: min(66vh, 620px); }

.guess-panel__actions {
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.guess-panel__actions .btn {
  border: none;
  border-radius: 0;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.guess-panel__actions .btn--primary { padding: 13px 16px; font-size: 13.5px; }
.guess-panel__actions .btn--ghost {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Ergebnis nach einer Runde: vollflaechige Karte, nur leicht abgedunkelt -
   sie muss lesbar bleiben. */
.result {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: var(--bg);
}
.result__map { position: absolute; inset: 0; }
.result__map .leaflet-container { height: 100%; }
.result__veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 5, .18);
  pointer-events: none;
  z-index: 400;
}

.result__panel {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 600;
  width: min(92%, 460px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result__stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px 18px;
}
.result__stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.result__stat-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.result__stat-value--distance { color: var(--accent); }
.result__stat--right { text-align: right; }

/* Schadensanzeige im Ranked, direkt unter der Punktzahl. */
.result__damage {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bad);
}
.result__damage--heal { color: var(--good); }

/* Sechsstelliger Bestaetigungscode: gross, mittig, mit Zeichenabstand. */
.code-input {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .32em;
  text-align: center;
  padding: 14px 12px;
}

/* Titel und Tags des Ortes - vorhandene Funktion, im Entwurf nicht
   vorgesehen, deshalb als eigene Zeile unter den Kennzahlen. */
/* ---------------------------- Zentrierte Seiten -------------------- */
/* Zusammenfassung, Bestenliste und Meine Spiele teilen sich diesen Aufbau. */

.page {
  position: relative;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}
.page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(201, 209, 122, .07) 0%, rgba(10, 11, 8, 0) 70%);
  pointer-events: none;
}
.page__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 32px 72px;
}
.page__inner--narrow { max-width: 760px; }

.page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
/* Das Logo im Seitenkopf fuehrt zurueck zum Start. Es ist ein <a>, damit
   Tastatur und Vorlesehilfen es als Ziel erkennen - die Schriftfarbe erbt es
   weiterhin vom Logo selbst und nicht von der Linkfarbe. */
.logo--home { color: inherit; cursor: pointer; }
.logo--home:hover .logo__text { color: var(--text); }

/* Rechte Seite der Kopfzeile: das Sitzungsmenue. */
.page__head-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

/* Das Sitzungsmenue steht auf jeder Seite ausser der Spielansicht. Die
   Grundregeln hier, die Sonderstellung auf der Startseite in
   .start__session (dort absolut in der Ecke). */
.session-menu {
  display: flex;
  align-items: center;
  /* Fuenf Punkte passen auf einem Telefon nicht in eine Zeile. Umbrechen
     statt ueber den Rand hinauslaufen - der Name landet dann in der zweiten
     Zeile, bleibt aber der letzte Eintrag. */
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.session-menu__name { white-space: nowrap; }
.session-menu__divider { color: var(--text-dim); }
.session-menu:empty { display: none; }

/* Eigene Klasse, damit Menuepunkte nicht versehentlich die Stile anderer
   Kopfzeilen-Elemente erben. */
.session-menu__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.session-menu__link:hover { color: var(--text); }

.page__title { margin-bottom: 6px; }
.page__subtitle { margin-bottom: 26px; font-size: 14px; color: var(--text-muted); }

/* ---------------------------- Bestenliste -------------------------- */

.board {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.board__row {
  display: grid;
  /* Klassisch: Rang, Spieler, Gesamt, Spiele, Bester, Durchschnitt */
  grid-template-columns: 52px 1.6fr 1.2fr .8fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Ranked hat andere Inhalte, aber ebenfalls sechs Spalten. */
.board--ranked .board__row {
  grid-template-columns: 52px 1.6fr 1fr .9fr 1fr 1.2fr;
}
/* Geteilte Runde und Turnier: nur vier Spalten. Dort spielt jeder in
   derselben Sache, Gesamtpunkte und Spielzahl waeren dieselbe Zahl und eine
   leere Spalte. */
.board--challenge .board__row {
  grid-template-columns: 52px 1.8fr 1fr 1.4fr;
}
.board__row:last-child { border-bottom: none; }
.board__row--head {
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.board__row:not(.board__row--head):hover { background: rgba(255, 255, 255, .03); }
.board__row.is-self { background: var(--accent-soft); }

/* Voruebergehende Markierung nach einem Sprung vom Profil: sie beantwortet
   die Frage "wo stehe ich?" und verblasst danach. Bliebe sie stehen, waere
   sie eine zweite, staerkere Auszeichnung neben is-self. */
.board__row.is-found {
  animation: board-found 2.6s ease-out;
}
@keyframes board-found {
  0%, 60% { box-shadow: inset 0 0 0 2px var(--accent); }
  100%    { box-shadow: inset 0 0 0 2px transparent; }
}

.board__rank { font-family: var(--mono); font-size: 13.5px; color: var(--text-faint); }
.board__rank--top { color: var(--accent); font-weight: 700; }

.board__player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.board__player .avatar { width: 34px; height: 34px; font-size: 13px; }
.board__name {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__num {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.board__num--best { font-size: 14px; font-weight: 700; color: var(--accent); }
.board__num--total { color: rgba(242, 241, 234, .85); }

/* ---------------------------- Zusammenfassung ---------------------- */

.summary__total {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.summary__total small {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-faint);
}
.summary__rounds { margin: 24px 0; }

.summary-round {
  display: grid;
  grid-template-columns: 40px 72px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.summary-round:last-child { border-bottom: none; }
.summary-round__no { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.summary-round__thumb {
  width: 72px; height: 36px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-sunken);
}
.summary-round__title { font-size: 14px; font-weight: 600; }
.summary-round__distance { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.summary-round__score {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------------------------- Tabellen ----------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  padding: 14px 22px;
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text-faint);
  text-transform: uppercase;
  text-align: left;
}
.table td { padding: 14px 22px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.table tr.is-self { background: var(--accent-soft); }
.table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------- Karten-Elemente ---------------------- */

.leaflet-container { background: var(--bg-sunken); font-family: var(--font); }
.leaflet-container a { color: var(--accent); }

/* Zoomknoepfe wie im Entwurf: kleine Felder in einer Glaskachel. */
.leaflet-control-zoom {
  border: none !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: rgba(10, 11, 8, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px;
}
.leaflet-control-zoom a {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  border: none !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 500;
}
.leaflet-control-zoom a:hover { background: rgba(255, 255, 255, .1) !important; }
.leaflet-control-zoom a.leaflet-disabled { color: var(--text-dim) !important; }

/* Tipp: roter Kreis mit weissem Rand. Loesung: olives Dreieck. */
.map-pin { background: none; border: none; }
.map-pin__dot {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--guess);
  border: 2px solid var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.map-pin__flag {
  display: block;
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 24px solid var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.result-line { stroke: var(--text); stroke-width: 1.5; opacity: .85; }

.map-coords {
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(10, 11, 8, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  pointer-events: none;
}

/* ---------------------------- Dialog ------------------------------- */

dialog {
  max-width: min(92vw, 420px);
  padding: 26px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(18, 20, 15, .92);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(6, 7, 5, .72); backdrop-filter: blur(3px); }

.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog__intro { margin-bottom: 20px; font-size: 13px; color: var(--text-muted); }
.dialog__switch { margin: 18px 0 0; font-size: 13px; text-align: center; }

/* ---------------------------- Mobil -------------------------------- */

/* Ab hier passen zwei Spalten nicht mehr nebeneinander. */
@media (max-width: 1080px) {
  /* Eine Spalte, weiterhin mittig - das erledigt das justify-content
     der Grundregel. */
  .start__grid {
    grid-template-columns: minmax(0, 620px);
    gap: 32px;
    padding: 40px;
  }
  .start__intro, .start__menu { max-width: 620px; }
  /* Einspaltig braucht es keine seitliche Abdunklung mehr. */
  .start__veil {
    background: linear-gradient(180deg,
      rgba(6, 7, 5, .93) 0%, rgba(6, 7, 5, .86) 55%, rgba(6, 7, 5, .93) 100%);
  }
}

@media (max-width: 860px) {
  /* Oben Platz fuer das Sitzungsmenue, das hier absolut in der Ecke sitzt.
     Bei einem langen Benutzernamen bricht es auf zwei Zeilen um; ohne diesen
     Abstand legte es sich ueber das Logo darunter. */
  .start__grid { padding: 72px 20px 40px; gap: 26px; }

  /* left setzt die Breite, an der umgebrochen wird - ohne sie waere der
     absolut gesetzte Kasten so breit wie sein Inhalt und liefe links aus
     dem Bild. flex-end haelt ihn trotzdem an der rechten Kante. */
  .start__session {
    top: 18px;
    right: 20px;
    left: 20px;
    justify-content: flex-end;
    gap: 12px;
    font-size: 12.5px;
  }

  /* Ohne Trennstriche passen die fuenf Punkte in eine Zeile. Sie bringen auf
     dieser Breite ohnehin nichts - und beim Umbruch bliebe sonst ein
     Trennstrich am Zeilenende haengen, hinter dem nichts mehr kommt. */
  .session-menu__divider { display: none; }
  .logo--hero .logo__text { font-size: 23px; }
  .start__subtitle { margin-left: 0; font-size: 14px; }
  .start__lead { font-size: 13.5px; }

  .partners { padding: 12px 0 14px; }
  .partners__label { margin-bottom: 9px; font-size: 9px; }
  .partners__track { gap: 36px; padding-left: 36px; }
  .partners__logo { height: 26px; }

  .page__inner { padding: 28px 18px 56px; }
  .page__head {
    margin-bottom: 24px;
    /* Auf schmalen Bildschirmen unter das Logo statt daneben - sonst
       quetschen sich Menue und Zurueck-Link in eine unlesbare Zeile. */
    flex-wrap: wrap;
    gap: 10px;
  }
  .page__head-right { gap: 12px; width: 100%; justify-content: flex-start; }
  .session-menu { gap: 10px; font-size: 12.5px; }

  /* Bestenliste: die beiden Nebenspalten weglassen, sonst wird jede Spalte
     unlesbar schmal. Uebrig bleiben Rang, Spieler und die zwei Werte, nach
     denen sortiert wird - klassisch Gesamtpunkte und Spiele, im Ranked
     Punktzahl und Runden. */
  .board__row,
  .board--ranked .board__row { grid-template-columns: 34px 1.5fr .9fr .7fr; padding: 12px 14px; }
  /* Tagesaufgabe und geteilte Runde haben nur vier Spalten, und die letzte
     (der Zeitpunkt) faellt hier weg - drei genuegen, sonst bliebe rechts ein
     reservierter Streifen ohne Inhalt stehen. */
  .board--daily .board__row,
  .board--challenge .board__row { grid-template-columns: 34px 1.6fr 1fr; }
  .board__cell--best, .board__cell--avg, .board__cell--total { display: none; }
  .board__player .avatar { width: 28px; height: 28px; font-size: 11px; }
  .board__name { font-size: 13px; }

  .summary-round { grid-template-columns: 28px 56px 1fr auto; gap: 10px; padding: 12px 14px; }
  .summary-round__thumb { width: 56px; height: 28px; }
  .summary__total { font-size: 32px; }

  .table th, .table td { padding: 10px 14px; }
}

@media (max-width: 720px) {
  .hud-corner--tl { top: 14px; left: 14px; }
  .hud-corner--tc { top: 12px; }
  .hud-corner--tr { top: 12px; right: 14px; gap: 8px; }
  .hud-corner--bl { bottom: 10px; left: 14px; gap: 10px; }

  .logo--stacked .logo__mark { width: 24px; height: 24px; }
  .logo--stacked .logo__text { font-size: 11px; }

  .hud-pill__round { padding: 8px 12px; font-size: 11px; }
  .hud-pill__timer { padding: 8px 14px; }
  .hud-pill__time { font-size: 14px; }

  .hp-bar { margin-top: 6px; padding: 5px 10px; gap: 8px; }
  .hp-bar__track { width: 90px; }
  .hp-bar__value { font-size: 10.5px; }

  .hud-corner--tr .avatar { width: 38px; height: 38px; font-size: 15px; }
  .hud-player__name { font-size: 11.5px; }
  .hud-player__score { font-size: 10.5px; }

  .guess-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }
  .guess-panel.is-expanded { width: auto; }
  .guess-panel__map { height: 30vh; }
  .guess-panel.is-expanded .guess-panel__map { height: 58vh; }

  .result__panel { bottom: 14px; width: calc(100% - 24px); }
  .result__stat-value { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  /* Fuer ein Endlos-Karussell heisst eine Dauer von .01ms nicht "steht
     still", sondern "steht an einer beliebigen Stelle". Deshalb hier die
     Animation ganz abschalten und die Logos als ruhige Reihe zentrieren. */
  .partners__track {
    animation: none !important;
    transform: none;
    width: auto;
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 18px;
  }
  /* Der zweite Durchlauf existiert nur fuer den nahtlosen Umlauf. Steht die
     Reihe still, waere jedes Logo doppelt zu sehen. */
  .partners__logo[aria-hidden="true"] { display: none; }
  .partners__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ------------------------------- Profil ---------------------------- */

.profile__head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.profile__avatar { width: 64px; height: 64px; font-size: 24px; flex-shrink: 0; }
.profile__name { margin: 0; }

.profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}
.profile__stat {
  padding: 16px 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.profile__stat-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.profile__stat-label {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------- Herausforderung ------------------------- */
.versus {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
}
.versus.is-win  { border-color: var(--good); }
.versus.is-loss { border-color: var(--glass-border); }

.versus__verdict { font-size: 16px; font-weight: 700; }
.versus.is-win .versus__verdict { color: var(--good); }
.versus__line {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* Seite einer geteilten Runde: Link, Startknopf, lebende Bestenliste. */
.challenge-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
}
.challenge-action__name {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

/* Wer noch spielt, steht ohne Rang und ohne Punkte in der Liste. Etwas
   zurueckgenommen, damit die gewerteten Zeilen vorn bleiben. */
.board__playing {
  font-size: 12.5px;
  color: var(--accent);
}
.board__row.is-playing .board__name,
.board__row.is-playing .board__rank { color: var(--text-muted); }
.board__row.is-playing .avatar { opacity: .6; }

/* Medaille neben dem Namen der ersten drei. Emoji statt Grafik: keine
   zusaetzliche Datei, und sie skaliert mit der Schrift. */
.board__medal { font-size: 16px; line-height: 1; }
.board__tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--glass);
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.share-link__hint {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.share-link {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.share-link__url {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ---------------------------- Einladungen -------------------------- */
/* Der eigene Code steht gross und einzeln da - er wird abgetippt oder
   vorgelesen, und dafuer muss er auf einen Blick zu erfassen sein. */
.profile__invites { margin-bottom: 34px; }

.invite-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.invite-code {
  padding: 10px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  /* Weit gesperrt: so laesst sich Zeichen fuer Zeichen ablesen, ohne dass
     zwei benachbarte zu einem verschwimmen. */
  letter-spacing: .22em;
  /* Sperrung haengt sonst als Leerraum hinter dem letzten Zeichen. */
  text-indent: .22em;
  color: var(--accent);
  user-select: all;
}
.profile__invite-hint {
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: 13px;
  color: var(--text-muted);
}
.profile__invite-count {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-faint);
}

.profile__section { margin: 34px 0 14px; font-size: 17px; }
.profile__count { font-family: var(--mono); font-size: 13px; color: var(--text-faint); }
.profile__game { grid-template-columns: 1.4fr 1fr .6fr .8fr; }

/* Der Rang fuehrt in die Bestenliste, an die Stelle, an der man steht. */
.profile__rank {
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.profile__rank:hover { color: var(--accent); }

/* --------------------------- Einstellungen ------------------------- */

.settings-section {
  max-width: 520px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--glass-border);
}
.settings-section:last-child { border-bottom: none; }
.settings-section__hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.settings-form { display: flex; flex-direction: column; gap: 14px; }

.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Die Felder selbst kommen aus der allgemeinen Regel weiter oben - eigene
   Raender und Groessen hier waeren ein zweiter, leicht anderer Satz Eingabe-
   felder neben denen im Anmeldedialog. */

.settings-form__actions { display: flex; gap: 10px; margin-top: 2px; }

/* Zeilen der Bestenliste fuehren zum Profil. */
.board__row--link { cursor: pointer; }
.board__row--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------------------------- Achievements ------------------------- */

.ach-category {
  margin: 22px 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.ach {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  /* Gesperrte bleiben lesbar, treten aber zurueck - man soll sehen,
     worauf sich das Spielen lohnt, ohne dass es die Freigeschalteten
     erschlaegt. */
  opacity: .55;
}
.ach.is-unlocked { opacity: 1; border-color: var(--accent-line); background: var(--accent-soft); }

.ach__icon { font-size: 24px; line-height: 1.1; flex-shrink: 0; }
.ach__body { min-width: 0; flex: 1; }
.ach__name { font-size: 14px; font-weight: 700; }
.ach__desc { margin-top: 2px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.ach__date { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--accent); }

.ach__bar {
  margin-top: 9px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.ach__bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.ach__progress {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.unlock-note { margin-top: 18px; }

@media (max-width: 860px) {
  .profile__head { gap: 14px; margin-bottom: 22px; }
  .profile__avatar { width: 48px; height: 48px; font-size: 19px; }
  .profile__stats { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 8px; }
  .profile__stat { padding: 12px 13px; }
  .profile__stat-value { font-size: 18px; }
  .ach-grid { grid-template-columns: 1fr; }
  .profile__game { grid-template-columns: 1.2fr 1fr .5fr .7fr; }
}