/* ── Lokale Fonts (kein Google Fonts CDN) ────────────────────────────────── */
/* Fraunces 700 = derselbe Schnitt, den frueher fonts.googleapis.com lieferte (opsz 72, wght 700), aus
   fonts/Fraunces/static/Fraunces_72pt-Bold.ttf nach WOFF konvertiert (alle Zeichen, kein unicode-range). */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/fraunces-72pt-700-normal.woff') format('woff');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/fraunces-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/fraunces-latin-800-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── SpielFinn Shared Styles ────────────────────────────────────────────── */
/* Wird von index.html und den Spiel-Frontends geladen.            */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-gutter: stable; }
/* Spielfarbene Karten (Startseiten-Kacheln, Ergebnis-Karten, Regeln-/Ranglisten-Sheets) behalten im Dunkelmodus ihre gewohnten
   Farben (Salbei/Himmel/Terrakotta passen zu Logos und Profilbildern). Damit ihr Inhalt unveraendert bleibt, gelten in ihnen die
   Tokens des hellen Modus (Schrift Navy, helle Pills, weisse Flaechen, ...). */
:root[data-theme="dark"] .hc-card,
:root[data-theme="dark"] .cs-result-card,
:root[data-theme="dark"] .sf-lb-card {
  color-scheme: light;
  --ink: #3D405B; --ink-rgb: 61 64 91; --scrim-rgb: 61 64 91;
  --surface: #fff; --inset: rgba(255,255,255,0.35); --inset-strong: rgba(255,255,255,0.6);
  --control: #3D405B; --on-control: #fff; --accent: #D86A4A; --on-accent: #fff;
  --c-red: #E63946; --bad-text: #a3402b; --err-text: #7d2f1d;
  --check-a: #FFFFFF; --check-b: #DCE0E8; --flag-line: #6E7391; --flag-detail-line: #7b8199;
}

/* Dunkel: Seiten-Untergrund auch auf den Spielseiten (dort war der body bisher ohne eigene Farbe) */
:root[data-theme="dark"], :root[data-theme="dark"] body { background: var(--bg); }
/* Beim Themenwechsel/Laden keine Farb-Transitionen (sonst faden alle Flaechen sichtbar um), siehe shared-theme-init.js */
.sf-no-theme-transition *, .sf-no-theme-transition *::before, .sf-no-theme-transition *::after { transition: none !important; }
* { -webkit-tap-highlight-color: transparent; }
*:focus-visible { outline: 3px solid #E63946; outline-offset: 2px; border-radius: 4px; }
/* Basis-Schriftart fuer den gesamten Text - Ueberschriften/Marken-Schriftzug ueberschreiben
   das gezielt mit Fraunces (hoehere Selektor-Spezifitaet als dieses Element-Selektor-Regel).
   Country Streak und GlobeSpot hatten bisher KEIN eigenes body{font-family} (anders als
   index.html/admin.html/...) - Elemente ganz ohne eigene font-family (z.B.
   .cs-hint) fielen dadurch auf die Browser-Standardschrift (meist ein Serif) zurueck statt
   auf DM Sans, siehe Nutzer-Screenshot "Noch keine Eintraege." in Country Streak. */
body { font-family: 'DM Sans', sans-serif; }

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  --terra:    #D86A4A;   /* Haupt-Akzentfarbe (terra = rot-orange); fuer Farbenblinde etwas dunkler als frueher (#E07A5F), siehe check-contrast.js */
  --schiefer: #3D405B;
  --creme:    #F2CC8F;
  --salbei:   #8CBBA3;   /* etwas heller als frueher (#81B29A): Abstand zu Terrakotta fuer Farbenblinde */
  --himmel:   #8ECAE6;
  --red:      #D86A4A;   /* Alias für --terra (Abwärtskompatibilität) */
  --navy:     #3D405B;   /* Alias für --schiefer */
  --bg:       #e8e4de;
  --header-h: 48px;
  --c-red:    #E63946;   /* Fehler-/Error-Rot (deutlich dunkler als --terra) */

  /* ── Semantische Tokens (Dunkelmodus, Umsetzungsspec 21) ────────────────────────────────────────────
     Bauteile nutzen diese Rollen statt fester Farben; der Dunkelmodus ueberschreibt nur die Tokens
     (:root[data-theme="dark"] unten). Werte im hellen Modus = die bisherigen festen Farben. */
  color-scheme: light;
  --ink:          var(--schiefer);      /* Text und Linien-Icons (frueher direkt --navy) */
  --ink-rgb:      61 64 91;             /* fuer Alpha-Varianten: rgb(var(--ink-rgb) / .5) */
  --scrim-rgb:    61 64 91;             /* abdunkelnde Flaechen: Scrim, Toast, Bildunterschrift */
  --surface:      #fff;                 /* helle Flaechen: Eingaben, Listen, Kacheln */
  --inset:        rgba(255,255,255,0.35);  /* aufgehellte Einbuchtung auf farbigen Karten */
  --inset-strong: rgba(255,255,255,0.6);
  --header-bg:    rgba(240,237,232,0.82);
  --overlay-veil: rgba(240,237,232,0.72);
  --control:      var(--schiefer);      /* Navy-Flaechen von Bedienelementen: Primaerbutton, aktiver Tab */
  --on-control:   #fff;
  --wordmark:     var(--schiefer);      /* "finn" im Schriftzug: Navy wie das Logo-Kaestchen, im Dunkeln Salbei-Gruen */
  --accent:       #D86A4A;              /* Terrakotta als Akzent (Zahlen, Badges, Akzentbutton) */
  --on-accent:    #fff;
  --bad-text:     #a3402b;              /* Fehler-/Warntext auf hellem Grund */
  --err-text:     #7d2f1d;
  /* Flag Fill: Farben der leeren Flaeche (Schachbrett), Trennlinien, Detail-Konturen */
  --check-a:      #FFFFFF;
  --check-b:      #DCE0E8;
  --flag-line:    #6E7391;
  --flag-detail-line: #7b8199;
  /* Shape Scale: Referenzland (Flaeche und Name im Satz) - Salbei in beiden Modi (Nutzer-Wunsch); als grosse Schrift auf hellem Grund nur ~2,3:1, bewusst akzeptiert (siehe scripts/check-contrast.js) */
  --ss-green:     var(--salbei);
}

/* Dunkelmodus: hue-erhaltende Abdunklung aus den hellen Tokens (Spec 21.1), Terrakotta-Akzent leicht
   aufgehellt, Navy nie als Text/Flaeche im Dunkeln (bleibt Akzent in .sf-subhdr, Logo). Gesetzt wird
   data-theme vom Init-Skript im <head> jeder Seite (siehe shared-theme.js). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #211d17;              /* Seiten-Untergrund und Sheets (Spec: Cream Flaeche) */
  --ink:          #ece7e0;
  --ink-rgb:      236 231 224;
  --scrim-rgb:    0 0 0;
  --surface:      #2a251d;
  --inset:        rgba(0,0,0,0.24);
  --inset-strong: rgba(0,0,0,0.42);
  --header-bg:    rgba(25,21,16,0.82);  /* Spec: Cream Header */
  --overlay-veil: rgba(25,21,16,0.72);
  --control:      #ece7e0;              /* heller Chip mit Navy-Schrift (Spec 21.1) */
  --on-control:   #3D405B;
  --wordmark:     var(--salbei);        /* Salbei-Gruen (Nutzer-Wunsch, statt Himmelblau): 7:1 auf dem dunklen Header, Navy waere dort unlesbar */
  --accent:       #e3876d;
  --on-accent:    #211d17;              /* dunkle Schrift auf Terrakotta: 6,35:1 (weiss nur 2,64:1) */
  --c-red:        #f26a75;
  --bad-text:     #f0a08c;
  --err-text:     #f2b3a3;
  --check-a:      #625b4f;
  --check-b:      #4d473d;
  --flag-line:    #b9b4aa;
  --flag-detail-line: #8b90a4;
  --ss-green:     var(--salbei);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  position: fixed; top: 0; left: 0;
  width: 100%; height: var(--header-h); z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 8px rgba(29,53,87,0.08);
}
.header-inner {
  max-width: 668px; margin: 0 auto; height: 100%; /* = Startseiten-Kachelbreite 640 + Innenabstand; auf allen Seiten gleich, damit Logo/Buttons beim Seitenwechsel nicht springen */
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.header-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
/* Zurueck-Pfeil im Header (Umsetzungsspec 2.1): auf jeder Seite ausser der Startseite, Ziel immer die Startseite */
.header-back {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s; text-decoration: none; flex-shrink: 0;
}
.header-back:active { background: rgb(var(--ink-rgb) / 0.08); }
.header-back svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-icons { display: flex; align-items: center; gap: 2px; }
.header-grid-wrap { transform: rotate(-5deg); flex-shrink: 0; padding: 2px; }
.header-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; width: 28px; height: 28px; }
.header-wordmark-svg { height: 26px; width: auto; flex-shrink: 0; overflow: visible; }

/* ── Logo-Kacheln (Animation) ────────────────────────────────────────────── */
.logo-tile { perspective: 200px; }
.logo-tile-inner {
  width: 100%; height: 100%; border-radius: 2px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.logo-tile-inner.flipped { transform: rotateY(180deg); }
.logo-tile-front, .logo-tile-back {
  position: absolute; inset: 0; border-radius: 2px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.logo-tile-back { transform: rotateY(180deg); }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
/* z-index muss ueber .acc-overlay (500) liegen, sonst sind Toasts unsichtbar, waehrend das
   Profil-Sheet offen ist (siehe Nutzer-Feedback: Toast beim Motiv-Klick war dadurch auf
   Seiten mit einer abweichenden Inline-Ueberschreibung sichtbar, aber schlecht platziert -
   diese Regel ist jetzt die einzige Toast-Positionierung, keine Seite braucht mehr eine
   eigene Ueberschreibung). */
.toast-container {
  position: fixed; top: calc(var(--header-h) + 8px); left: 50%;
  transform: translateX(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; width: calc(100% - 32px); max-width: 400px;
}
.toast {
  background: rgb(var(--scrim-rgb) / 0.92);
  border-radius: 12px; padding: 10px 16px;
  font-size: 13px; font-weight: 500; color: #fff;
  text-align: center;
  animation: toastIn 0.3s ease forwards;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(61,64,91,0.2);
}
.toast.error { background: rgba(230,57,70,0.92); }
/* Dunkel: Hinweise als heller Chip (ein fast schwarzer Toast waere auf dem dunklen Untergrund kaum abgesetzt) */
:root[data-theme="dark"] .toast:not(.error) { background: var(--control); color: var(--on-control); }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
.toast.hiding { animation: toastOut 0.3s ease forwards; }

/* ── Verbindungs-Hinweis (shared-net.js): erscheint, wenn eine Anfrage laenger als ~3 s dauert ────────── */
.sf-net-hint {
  position: fixed; top: calc(var(--header-h) + 8px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 600; pointer-events: none; opacity: 0;
  display: flex; align-items: center; gap: 8px;
  background: rgb(var(--scrim-rgb) / 0.92); color: #fff;
  border-radius: 999px; padding: 7px 14px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(61,64,91,0.2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sf-net-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sf-net-hint::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #F2A65A;
  animation: sfNetPulse 1.2s ease-in-out infinite;
}
:root[data-theme="dark"] .sf-net-hint { background: var(--control); color: var(--on-control); }
@keyframes sfNetPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .sf-net-hint::before { animation: none; } }

/* ── Gemeinsame Lobby / Warteraum Elemente ───────────────────────────────── */
.screen { display: none; flex-direction: column; padding: 16px 16px 36px; gap: 16px; max-width: 640px; margin: 0 auto; width: 100%; } /* = Header-/Startseiten-Inhaltsbreite (siehe .header-inner), Globus/Flagge/Laender-Karten skalieren mit */
.screen.active { display: flex; }

.lobby-hero {
  background: var(--game-color, var(--terra));
  border-radius: 10px;
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.lobby-hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 7vw, 44px); font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.lobby-hero-sub { font-size: 13px; color: rgb(var(--ink-rgb) / 0.55); font-weight: 500; }

.section-label {
  font-size: 11px; font-weight: 700;
  color: rgb(var(--ink-rgb) / 0.5);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 2px;
}

.sf-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.sf-input::placeholder { color: rgb(var(--ink-rgb) / 0.35); }
.sf-input:focus { border-color: rgb(var(--ink-rgb) / 0.4); }
.sf-input.code {
  text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 700; text-align: center; font-size: 18px;
}

.btn-primary {
  width: 100%;
  background: var(--control); color: var(--on-control);
  border: none; border-radius: 22px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  height: 50px; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }
.btn-primary.accent { background: var(--accent); color: var(--on-accent); }

.btn-secondary {
  width: 100%;
  background: rgb(var(--ink-rgb) / 0.08); color: var(--ink);
  border: none; border-radius: 22px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  height: 50px; cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:active { background: rgb(var(--ink-rgb) / 0.14); }
.btn-secondary:disabled { opacity: 0.35; cursor: default; }
.btn-secondary.active { background: var(--control); color: var(--on-control); }

.divider {
  display: flex; align-items: center; gap: 12px;
  color: rgb(var(--ink-rgb) / 0.35); font-size: 12px; font-weight: 600;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgb(var(--ink-rgb) / 0.12);
}

.error-msg {
  font-size: 13px; color: var(--c-red);
  text-align: center; min-height: 18px; font-weight: 500;
}

/* ── Gewinner Screen (gemeinsam) ─────────────────────────────────────────── */
.win-card {
  background: var(--surface); border-radius: 22px; padding: 36px 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(61,64,91,0.12);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.win-emoji { font-size: 64px; }
.win-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 800; color: var(--ink); }
.win-sub { font-size: 14px; color: rgb(var(--ink-rgb) / 0.5); }

/* Hervorgehobene "Chip"-Zeile fuer besondere Endscreen-Ereignisse (neuer Bestwert, neue
   Erfolge, siehe shared-game-helpers.js renderWinChip()) - ersetzt reinen Fliesstext/
   unterstrichenen Link, der neben der grossen Punktzahl leicht uebersehen wurde (Nutzer-
   Feedback). display:none per Default, wird nur bei Zutreffen per JS eingeblendet. */
.win-chip {
  display: none; width: 100%; align-items: center; gap: 12px;
  background: rgba(216,106,74,0.12); border-radius: 14px; padding: 10px 14px;
  text-align: left;
}
.win-chip.clickable { cursor: pointer; }
.win-chip-icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.win-chip-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; flex-wrap: wrap; max-width: 100px; }
.win-chip-text { flex: 1; min-width: 0; }
.win-chip-title { font-size: 14px; font-weight: 800; color: var(--ink); }
.win-chip-sub {
  font-size: 12px; color: rgb(var(--ink-rgb) / 0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-chip-arrow { flex-shrink: 0; color: rgb(var(--ink-rgb) / 0.4); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sf-footer {
  width: 100%;
  padding: 0 0 28px;
  margin-top: auto;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
}
.sf-footer-inner {
  max-width: 668px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 14px;
  padding-top: 16px;
}
.sf-footer-brand, .sf-footer-brand:visited {
  font-family: 'Fraunces', serif; font-size: 13px; font-weight: 800;
  color: rgb(var(--ink-rgb) / 0.3); letter-spacing: -0.01em;
  text-decoration: none; transition: color 0.15s;
}
.sf-footer-brand:hover { color: var(--ink); text-decoration: none; }
.sf-footer-links {
  display: flex; gap: 16px; align-items: center;
}
.sf-footer-links a {
  font-size: 12px; font-weight: 500; color: rgb(var(--ink-rgb) / 0.4);
  text-decoration: none; transition: color 0.15s;
}
.sf-footer-links a:hover { color: var(--ink); }

/* ── Profil-Menü / Account Modal (geteilt über alle Spiele, siehe shared-account.js) ── */
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.profil-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, transform 0.1s; flex-shrink: 0;
}
/* :active-Rueckmeldung gab es bisher nur bei index.html's lokaler .icon-btn-Kopie dieses
   Buttons (jetzt vereinheitlicht, siehe index.html #profil-btn) - kommt damit allen fuenf
   Seiten zugute statt nur der Startseite. */
.profil-btn:active { background: rgba(29,53,87,0.08); }
/* Gleicher Hover-Effekt wie .settings-header-btn/.mute-header-btn daneben (Nutzer-Feedback:
   Profil-Button war der einzige Header-Icon-Button ohne Hover-Hervorhebung). */
.profil-btn:hover { transform: scale(1.08); }

/* Zahnrad-Icon im Header (siehe shared-account.js renderSettingsHeaderIcon()) - ersetzt den
   frueheren Sprachumschalter an dieser Stelle, Sprache lebt jetzt im Einstellungen-Sheet
   (.settings-lang-item unten). Wird wie der Mute-Button per JS in .header-icons injiziert,
   damit keine Seite mit Top-Bar es vergessen kann. */
.settings-header-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; position: relative;
  background: none; cursor: pointer; flex-shrink: 0; transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.settings-header-btn:hover { transform: scale(1.08); }
.settings-header-btn svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-header-dot {
  display: none; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.settings-header-dot.visible { display: block; }

/* Mute-Umschalter im Header (siehe shared-sound.js renderMuteHeaderIcon()) - gleiche
   Groesse/Kreisform wie .settings-header-btn/.profil-btn. */
.mute-header-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
  background: none; cursor: pointer; flex-shrink: 0; transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.mute-header-btn:hover { transform: scale(1.08); }
/* Kein eigener Kreis-Hintergrund mehr hinter dem Icon (Nutzer-Feedback: sollte wie
   Zahnrad/Profil-Icon direkt freistehend wirken, nicht optisch abgesetzt) - .mute-icon-circle
   bleibt als reiner Layout-Wrapper (zentriert die zwei SVGs), traegt aber keine Flaeche mehr. */
.mute-icon-circle { display: flex; align-items: center; justify-content: center; }
.mute-header-btn svg { width: 22px; height: 22px; stroke: var(--ink); }
.mute-header-btn .mute-icon-off { display: none; }
.mute-header-btn.muted .mute-icon-on { display: none; }
.mute-header-btn.muted .mute-icon-off { display: block; }

/* "!"-Button (Fehler melden, siehe shared-bug-report.js) - gleiche Groesse/Kreisform wie Ton/Zahnrad, sitzt
   rechts vom Ton-Button. Passt der Header nicht in die Breite, setzt shared-bug-report.js fitHeader() die
   Klasse .sf-hdr-compact und der Ton-Button weicht (bleibt im Einstellungen-Sheet schaltbar). */
.bug-header-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
  background: none; cursor: pointer; flex-shrink: 0; transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.bug-header-btn:hover { transform: scale(1.08); }
.bug-header-btn svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
header.sf-hdr-compact .mute-header-btn { display: none; }

/* Fehler-melden-Sheet: .sf-sheet-overlay/.sf-sheet wie Ranglisten-/Regeln-Sheet (Esc, Zurueck, Fokus). */
.bug-view { display: flex; flex-direction: column; gap: 13px; }
.bug-view[hidden] { display: none; }
.bug-view .acc-error:empty { display: none; } /* Platzhalter nur, wenn wirklich ein Fehler dasteht */
.bug-label { font-size: 12px; font-weight: 700; color: rgb(var(--ink-rgb) / 0.55); margin: 2px 2px -6px; }
.bug-textarea { resize: vertical; min-height: 104px; font-size: 15px; line-height: 1.45; padding: 12px 14px; }
.bug-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.bug-thumb {
  position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1.5px solid rgb(var(--ink-rgb) / 0.12);
}
.bug-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; cursor: zoom-in; }
/* Antippen vergroessert die Vorschau auf volle Breite (z.B. um zu pruefen, was der Screenshot zeigt) */
.bug-thumb.zoomed { width: 100%; height: auto; }
.bug-thumb.zoomed img { height: auto; max-height: 60svh; object-fit: contain; cursor: zoom-out; }
.bug-thumb-badge {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px);
  font-size: 9.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgb(var(--scrim-rgb) / 0.75); color: #fff; padding: 2px 6px; border-radius: 6px; pointer-events: none;
}
.bug-thumb-remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%;
  background: rgb(var(--scrim-rgb) / 0.75); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bug-thumb-remove svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.bug-thumb-note {
  display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: rgb(var(--ink-rgb) / 0.55);
}
.bug-thumb-note.loading { animation: bug-pulse 1.2s ease-in-out infinite; }
@keyframes bug-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .bug-thumb-note.loading { animation: none; } }
button.bug-restore { cursor: pointer; border-style: dashed; background: transparent; }
.bug-add-btn {
  width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; border: 1.5px dashed rgb(var(--ink-rgb) / 0.3);
  background: transparent; color: rgb(var(--ink-rgb) / 0.6); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
}
.bug-add-btn:hover { border-color: rgb(var(--ink-rgb) / 0.5); color: var(--ink); }
.bug-add-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.bug-contact-row { cursor: pointer; }
.bug-hint { font-size: 12px; color: rgb(var(--ink-rgb) / 0.6); line-height: 1.45; margin: -4px 2px 0; }
.bug-privacy { text-align: center; font-size: 11.5px; color: rgb(var(--ink-rgb) / 0.5); margin: -4px 0 0; }
.bug-privacy a { color: inherit; }
/* Honeypot gegen Bots: fuer Menschen unsichtbar und nicht per Tab erreichbar */
.bug-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bug-thanks { align-items: center; text-align: center; padding: 16px 0 8px; }
.bug-thanks-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--salbei); display: flex; align-items: center; justify-content: center; }
.bug-thanks-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bug-thanks-title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink); }
.bug-thanks p { font-size: 14px; color: rgb(var(--ink-rgb) / 0.65); line-height: 1.5; margin: 0; }
.acc-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgb(var(--scrim-rgb) / 0.4); backdrop-filter: blur(5px);
  align-items: flex-end; justify-content: center;
  overscroll-behavior: contain;
}
.acc-overlay.open { display: flex; }
.acc-sheet {
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px; width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 13px;
  animation: slideUp 0.24s cubic-bezier(0.4,0,0.2,1);
  position: relative; max-height: 85svh; overflow-y: auto;
  overscroll-behavior: contain;
}
.acc-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgb(var(--ink-rgb) / 0.08);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.acc-close svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }

/* Zurueck-Button in den Kontoeinstellungen: symmetrisch zum X (gleiche Groesse/Position/
   Icon-Groesse, nur oben links und als Pfeil statt Kreuz). */
.acc-back {
  position: absolute; top: 14px; left: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgb(var(--ink-rgb) / 0.08);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.acc-back svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Profil-Sheet-Kopfzeile: gleiche generische .sf-sheet-head/-title/-close-Klassen wie das
   Einstellungen-Sheet (siehe dort) statt eines freistehenden X-Buttons ohne Titel - Kohaerenz-
   Nachzug (Nutzer-Wunsch), das Profil-Sheet hatte diese Ueberarbeitung bei Schritt 1 noch nicht
   bekommen. Kein Zurueck-Kreis noetig, das Profil-Sheet hat keine Unteransichten mehr (die
   Kontoeinstellungen wurden bei Schritt 1 ins eigene Einstellungen-Sheet verschoben). */
/* Kopfzeile des Profil-Sheets bleibt beim Scrollen stehen (Titel + Schliessen-Knopf immer erreichbar). top:-20px =
   Sheet-Padding oben (Chrome bezieht sticky auf die Content-Box des Scroll-Containers). */
.acc-sheet > .sf-sheet-head { position: sticky; top: -20px; z-index: 3; background: var(--bg); margin: -20px -20px 0; padding: 20px 20px 8px; }

/* Avatar/Name/Farbe sowie (siehe weiter unten) Fortschritt+Erfolge je in einer eigenen weissen
   Karte statt lose zentriert auf dem Sheet-Hintergrund - gleiche Optik wie .settings-group.
   .acc-card-section trennt mehrere Abschnitte INNERHALB einer Karte per duenner Linie (wie
   .settings-row), statt eigene Karten zu sein. */
.acc-card { background: var(--surface); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.acc-card-section + .acc-card-section { border-top: 1px solid rgb(var(--ink-rgb) / 0.08); padding-top: 14px; }
.acc-avatar-wrap { display: flex; justify-content: center; }
.acc-avatar-large {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 800; color: #fff;
}
.acc-name-display { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); text-align: center; }

/* Profilkarte: Avatar links, daneben Name und Farbpunkte (statt drei uebereinander) - haelt das Sheet niedrig.
   Farbpunkte etwas kleiner, damit alle sechs in eine Zeile passen (auf sehr schmalen Geraeten brechen sie um). */
.acc-card-profile { flex-direction: row; align-items: center; gap: 16px; }
.acc-card-profile .acc-avatar-wrap { flex-shrink: 0; }
.acc-profile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.acc-card-profile .acc-name-display { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-card-profile .color-swatches { justify-content: flex-start; flex-wrap: wrap; }
.acc-card-profile .color-swatch { width: 24px; height: 24px; }

.color-swatches { display: flex; gap: 8px; justify-content: center; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: border-color 0.15s, transform 0.1s;
}
/* Rand bekommt die Sheet-Hintergrundfarbe (= sichtbarer Spalt zur Kachel), der eigentliche
   dunkle Ring kommt per box-shadow aussen dazu - so bleibt ein dunkler Ring erhalten
   (Wunsch), ist aber bei ALLEN Kachelfarben inkl. navy sichtbar, weil er nicht mit der
   Kachelfarbe selbst kollidieren kann. */
.color-swatch.selected { border-color: var(--bg); box-shadow: 0 0 0 2px var(--ink); transform: scale(1.15); }

/* ── Rang-Fortschritt / Motiv-Wahl / Erfolge (siehe shared-account.js ensureProfileSections() -
   wird dynamisch nach .acc-swatches eingehaengt, nicht Teil der pro Seite kopierten Sheet-HTML) ── */
.acc-section-title { font-size: 12px; font-weight: 700; color: rgb(var(--ink-rgb) / 0.5); text-align: center; margin-bottom: 6px; }

/* .acc-progress-endpoint traegt sowohl das aktuelle als auch das naechste Rang-Symbol - reines
   Icon ohne Beschriftung darunter, damit align-items:center in .acc-progress-row den duennen
   Balken sauber auf Icon-Mitte zentriert (mit einer zusaetzlichen Zeile Text stand der Balken
   vorher zu tief, siehe Nutzer-Feedback). position:relative traegt bei Bedarf den Schloss-Badge. */
.acc-progress-row { display: flex; align-items: center; gap: 10px; }
.acc-progress-endpoint { position: relative; display: inline-flex; }
.acc-progress-track { flex: 1; height: 6px; border-radius: 3px; background: rgb(var(--ink-rgb) / 0.12); overflow: hidden; }
.acc-progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.acc-progress-total { text-align: center; font-family: 'DM Sans', sans-serif; font-weight: 800; color: var(--ink); }
.acc-progress-caption { text-align: center; font-size: 11px; color: rgb(var(--ink-rgb) / 0.5); margin-bottom: 8px; }

/* Schloss-Badge statt reinem Abdunkeln (war fast unsichtbar, siehe Nutzer-Feedback) - generisch
   gehalten, wird auf dem gesperrten Fortschritts-Symbol UND auf gesperrten Erfolgs-Kacheln
   genutzt (siehe .acc-achievement-tile weiter unten). */
.acc-lock-badge {
  position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--control); color: var(--on-control); display: flex; align-items: center; justify-content: center;
}
.acc-new-badge {
  position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

/* Rangaufstiegs-Feier (siehe shared-account.js checkRankUp()) - respektiert
   prefers-reduced-motion: dort erscheint das Symbol direkt in Endposition, ohne Animation. */
@keyframes acc-rank-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
.acc-rank-pop { display: inline-block; animation: acc-rank-pop 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .acc-rank-pop { animation: none; }
}

/* Glanz-Effekt fuer Motive auf der vollen Stufe (kompletter Erfolgs-Katalog, siehe
   shared-ranks.js renderAvatarSVG() motifShine-Parameter) - dauerhaft an allen Stellen, an
   denen das Motiv erscheint (Header, Profil-Sheet, Bestenliste, siehe Nutzer-Wunsch). Sanftes
   Pulsieren statt eines aufwaendigen Sweep-Gradients - robuster in der bestehenden SVG-String-
   Vorlage, faellt aber trotzdem als "besonders" auf. */
/* Kein Leuchten mehr (Nutzer-Wunsch): weder am Profilbild noch auf den Fan-/Kapstein-Kacheln. Die Klasse bleibt als Haken im
   Markup, falls der Glanz je wiederkommt. */
.motif-shine { animation: none; filter: none; }

#acc-progress-bar { margin-bottom: 14px; }
.acc-achievements-list { display: flex; flex-direction: column; gap: 18px; }
/* Kopfzeile je Spiel: Kachel des Fan-Erfolgs (Spiel-Logo) vor dem Titel, "x/9" zaehlt sie mit - bleibt auch bei
   eingeklapptem Spiel sichtbar. Der Titel ist der Auf-/Zuklapp-Knopf (immer nur ein Spiel aufgeklappt). */
.acc-achievement-game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.acc-achievement-game.collapsed .acc-achievement-game-head { margin-bottom: 0; }
.acc-achievement-game.collapsed .acc-achievement-body { display: none; }
.acc-game-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
}
.acc-game-chevron { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; transition: transform 0.2s; }
.acc-achievement-game.collapsed .acc-game-chevron { transform: rotate(-90deg); }
.acc-achievement-game-title { font-family: 'DM Sans', sans-serif; font-weight: 800; color: var(--ink); font-size: 14px; }
/* Jede Kachel ist ein Mini-Avatar (Rangform + Farbe + Erfolgs-Emoji, siehe shared-account.js
   renderAchievementTile()) und zeigt 1:1, was man als Profilbild bekommt, wenn man es waehlt. Die
   8 normalen Erfolge liegen in EINER Reihe; die Kacheln skalieren dafuer mit der Sheet-Breite (SVG
   width:100%, hoechstens 36px) - ein fester Wert passt bei den breiteren Rangformen (Dreieck, Stern) nicht
   in ~303px. Der Ring der geoeffneten Kachel ist ein box-shadow statt eines Rands, damit er keinen Platz
   kostet. Titel/Bedingung erst on-demand in .acc-achievement-detail, siehe shared-account.js Klick-Handler. */
.acc-achievement-tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; justify-items: center; }
.acc-achievement-tile {
  width: 100%; max-width: 36px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; line-height: 0; position: relative;
  transition: box-shadow 0.15s;
}
/* Fan-Kachel vor dem Spieltitel: gleich gross wie die Kacheln der Reihe (auf dem Handy ~34px), kein Raster-Teil. */
.acc-achievement-tile.acc-achievement-fan { width: 34px; max-width: none; flex-shrink: 0; }
/* Genau EINE Markierung insgesamt: der Ring sitzt am geoeffneten Zustand (siehe shared-account.js
   Klick-Handler) und zeigt per Farbe an, ob die Kachel freigeschaltet ist. Welches Bild das aktuelle
   Profilbild ist, steht in der Beschreibung ("Aktuelles Profilbild") und oben am Avatar. */
.acc-achievement-tile.open { box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.35); }
.acc-achievement-tile.open.unlocked { box-shadow: 0 0 0 2px var(--ink); }
/* Gesperrt: Form immer neutral grau (unabhaengig von der Profilfarbe, per CSS statt fill-Attribut), das
   Emoji/Logo bleibt farbig, aber auf 50 % Deckkraft - so sind die Ziele erkennbar (siehe Rang-Dokument
   Abschnitt 4); das Schloss-Badge bleibt voll sichtbar. Deckende Mischfarbe statt Alpha, sonst zeichnet
   sich die Kontur (Fuellung und Rand ueberlappen) dunkler ab. */
.acc-achievement-tile.locked svg > circle,
.acc-achievement-tile.locked svg > polygon { fill: color-mix(in srgb, var(--ink) 16%, var(--surface)); stroke: color-mix(in srgb, var(--ink) 16%, var(--surface)); }
.acc-achievement-tile.locked .acc-achievement-avatar image { opacity: 0.5; }
.acc-achievement-avatar { display: block; }
.acc-achievement-avatar svg { display: block; width: 100%; height: auto; }
/* Schloss-Badge und Neu-Punkt sind auf den kleinen Raster-Kacheln entsprechend kleiner. */
.acc-achievement-tiles .acc-lock-badge, .acc-achievement-fan .acc-lock-badge { width: 13px; height: 13px; bottom: -3px; right: -3px; }
.acc-achievement-tiles .acc-lock-badge svg, .acc-achievement-fan .acc-lock-badge svg { width: 9px; height: 9px; }
.acc-achievement-tiles .acc-new-badge, .acc-achievement-fan .acc-new-badge { width: 8px; height: 8px; border-width: 1.5px; top: -2px; left: -2px; }
.acc-achievement-detail { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgb(var(--ink-rgb) / 0.05); }
.acc-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acc-achievement-title { font-weight: 700; color: var(--ink); font-size: 13px; }
.acc-achievement-desc { font-size: 12px; color: var(--ink); opacity: 0.75; margin-top: 2px; }
/* Fortschrittszeile eines gesperrten Erfolgs in der Beschreibung (Text + schmaler Balken). */
.acc-detail-progress { margin-top: 8px; }
.acc-detail-progress-text { font-size: 12px; font-weight: 600; color: var(--ink); }
.acc-detail-progress-track { margin-top: 5px; height: 5px; border-radius: 3px; background: rgb(var(--ink-rgb) / 0.12); overflow: hidden; }
.acc-detail-progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.acc-pill { font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.1); color: var(--ink); }
.acc-pill.current { background: var(--accent); color: var(--on-accent); }
.acc-detail-btn {
  margin-top: 8px; border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  background: var(--control); color: var(--on-control);
}
.acc-detail-btn.secondary { background: rgb(var(--ink-rgb) / 0.1); color: var(--ink); }

/* -- Einstellungen-Sheet (Zahnrad) -- Eigenstaendiges Bottom-Sheet, gleiches Grundmuster wie
   .acc-overlay/.acc-sheet (Backdrop, Slide-Up-Animation, Kopfzeile mit optionalem Zurueck-Kreis
   links + Titel + Schliessen-Kreis rechts) - eigene Klassen, damit Profil-Sheet und
   Einstellungen-Sheet unabhaengig voneinander geoeffnet sein koennen (siehe Navigationskonzept
   Abschnitt 12). */
.settings-overlay, .sf-sheet-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgb(var(--scrim-rgb) / 0.4); backdrop-filter: blur(5px);
  align-items: flex-end; justify-content: center;
  overscroll-behavior: contain;
}
.settings-overlay.open, .sf-sheet-overlay.open { display: flex; }
.settings-sheet, .sf-sheet {
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 20px 20px 36px; width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 16px;
  animation: slideUp 0.24s cubic-bezier(0.4,0,0.2,1);
  position: relative; max-height: 85svh; overflow-y: auto;
  overscroll-behavior: contain;
}
/* Zurueck-Kreis, Titel und Schliessen-Kreis als gemeinsame Flex-Zeile statt einzeln
   positionierter Elemente (Nutzer-Feedback: mit absoluter Positionierung sass der Titel nicht
   zuverlaessig auf gleicher Hoehe wie die Kreise) - align-items:center zentriert alle drei
   automatisch, ganz ohne Pixel-Nachjustieren. Ist der Zurueck-Kreis ausgeblendet
   (display:none, siehe shared-account.js settingsGoTo()), nimmt er keinen Flex-Platz ein und
   der Titel beginnt von selbst am linken Rand - keine eigene .has-back-Regel noetig. */
.settings-head, .sf-sheet-head { display: flex; align-items: center; gap: 10px; }
.settings-close, .settings-back-btn, .sf-sheet-close {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: none; background: rgb(var(--ink-rgb) / 0.08);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.settings-close svg, .sf-sheet-close svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.settings-back-btn svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-title, .sf-sheet-title { flex: 1; min-width: 0; font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--ink); text-align: left; margin: 0; }
.settings-view { display: flex; flex-direction: column; gap: 13px; }
/* .settings-view setzt display:flex als Autorenregel - das schlaegt das UA-Default
   "[hidden]{display:none}" trotz gleicher Spezifitaet (Autorenregeln gewinnen immer gegen
   UA-Defaults). Braucht daher eine eigene, explizite Regel, sonst bleiben ausgeblendete
   Unteransichten trotz hidden-Attribut sichtbar. */
.settings-view[hidden] { display: none; }

/* Zeilen einer Gruppe verschmelzen zu einer zusammenhaengenden weissen Karte (Nutzer-Wunsch,
   Mockup) statt einzelner Pillen mit Abstand dazwischen - Trennung nur noch durch eine duenne
   Linie zwischen den Zeilen, die letzte Zeile bekommt keine. */
.settings-group { display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; overflow: hidden; }
.settings-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.08); border-radius: 0;
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink);
}
.settings-group > .settings-row:last-child { border-bottom: none; }
button.settings-row { cursor: pointer; text-align: left; transition: background 0.15s; }
button.settings-row:hover { background: rgb(var(--ink-rgb) / 0.04); }
.settings-row-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
/* Ton-Zeilenicon ist ein <span>, das zwei SVGs (an/aus) wrappt (siehe Markup) statt eines
   einzelnen <svg> wie bei den anderen Zeilen - die Groesse muss daher an die Kind-SVGs
   durchgereicht werden. */
.settings-row-icon svg { width: 100%; height: 100%; display: block; }
.settings-row-label { flex: 1; min-width: 0; }
.settings-row-value { display: flex; align-items: center; gap: 6px; font-weight: 500; opacity: 0.55; white-space: nowrap; min-width: 0; flex-shrink: 0; }
.settings-row-value .dots { font-size: 15px; letter-spacing: 1px; }
/* Aktueller Name/E-Mail/Sprache-Wert rechts in der Zeile (siehe shared-account.js
   openSettings()) - bei langen Werten (z.B. E-Mail-Adressen) abgeschnitten statt die Zeile
   zu sprengen oder umzubrechen. */
.settings-row-value .value-text { max-width: 165px; overflow: hidden; text-overflow: ellipsis; }
.settings-row-chevron { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; flex-shrink: 0; }

/* Ton-Zeile: nativer Checkbox-Schalter, spiegelt denselben Mute-Zustand wie der Schnellschalter
   im Header (siehe shared-sound.js SpielFinnSound.toggleMuted()) - bewusste Dopplung, Ton soll
   sowohl schnell erreichbar sein als auch an der erwarteten Stelle in den Einstellungen. Das
   Zeilen-Icon selbst wechselt ebenfalls mit dem Zustand (siehe shared-account.js
   renderSettingsSoundIcon()), gleiche zwei Pfade wie shared-sound.js MUTE_ICON_HTML. */
.settings-switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; }
.settings-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.settings-switch-track { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / 0.18); border-radius: 20px; transition: background 0.15s; pointer-events: none; }
.settings-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-switch input:checked + .settings-switch-track { background: var(--control); }
.settings-switch input:checked + .settings-switch-track::after { transform: translateX(16px); }
.settings-row-icon .icon-off { display: none; }
.settings-row-icon.muted .icon-on { display: none; }
.settings-row-icon.muted .icon-off { display: block; }

/* Sprache-Unterseite: Haekchenliste mit Eigenschreibweise statt Flaggen (Nutzer-Wunsch/Spec),
   selbe Zeilen-/Kartenoptik wie die Hauptansicht (in HTML ebenfalls in .settings-group
   gewrappt) - siehe shared-account.js renderSettingsLangActive(). */
.settings-lang-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.08); border-radius: 0;
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: background 0.15s;
}
.settings-lang-item:last-child { border-bottom: none; }
.settings-lang-item:hover { background: rgb(var(--ink-rgb) / 0.04); }
.settings-lang-item span { flex: 1; text-align: left; }
.settings-lang-item svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; flex-shrink: 0; }
.settings-lang-item.active svg { visibility: visible; }

.settings-guest-hint { display: flex; flex-direction: column; gap: 10px; }
.settings-guest-hint p { font-size: 13px; color: rgb(var(--ink-rgb) / 0.6); line-height: 1.5; margin: 0; text-align: center; }

/* Abmelden/Konto-loeschen: bewusst KEINE .settings-group (keine weisse Karte) - beides steht
   lt. Mockup frei auf dem Sheet-Hintergrund, anders als die Sprache/Ton- bzw.
   Name/E-Mail/Passwort-Zeilen. */
.settings-footer { display: flex; flex-direction: column; gap: 8px; }

.settings-delete-link {
  display: block; width: 100%; background: none; border: none; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; color: var(--c-red, #E63946);
  cursor: pointer; padding: 6px; margin-top: 2px;
}

/* Abmelden als schlichter Text-Link statt Button (Umsetzungsspec Abschnitt 11/12: "Abmelden
   als Textlink, NICHT als Button") - gleiche Zeile in Profil- UND Einstellungen-Sheet,
   dezenter als .settings-delete-link (kein Rot, das bleibt Loeschaktionen vorbehalten). */
.logout-link {
  display: block; width: 100%; background: none; border: none; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; padding: 6px;
}

.edit-toggle {
  width: 100%;
  background: rgb(var(--ink-rgb) / 0.07); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; text-align: center; padding: 12px;
  transition: background 0.15s;
}
.edit-toggle:hover { background: rgb(var(--ink-rgb) / 0.13); }

/* Hauptansicht: alles rund um E-Mail-Verifizierung lebt nur hier (nicht zusaetzlich in
   den Kontoeinstellungen) - reiner Hinweistext (keine Aktion, daher bewusst OHNE
   Button-Optik: kein Hintergrund/Rahmen, linksbuendig, kleines Symbol statt Chip) +
   eigener Resend-Button. */
.acc-email-notice {
  display: flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 700; color: var(--accent);
  text-align: left; padding: 0 2px;
}
.acc-email-notice svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; flex-shrink: 0; }
.acc-email-resend-wide {
  width: 100%;
  background: var(--accent); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--on-accent);
  cursor: pointer; text-align: center; padding: 12px;
  transition: opacity 0.15s;
}
.acc-email-resend-wide:hover { opacity: 0.88; }
.acc-email-resend-wide:disabled { opacity: 0.5; cursor: default; }

.edit-field { display: none; flex-direction: column; gap: 8px; }
.edit-field.open { display: flex; }
.acc-error { font-size: 12px; color: var(--c-red, #E63946); min-height: 16px; }

/* ── Bestenliste: gemeinsame Vorlage fuer alle Spiele (Mini-Karte auf dem Start-Screen +
   volle Bestenliste + Tages-/Challenge-Listen) - siehe shared-game-helpers.js
   renderHighscoreRows(), genutzt von games/country-streak/game.html +
   games/capital-spot/game.html. Zusammenhaengende Listen-Optik (ein Container, Zeilen nur
   durch Trennlinie getrennt) urspruenglich nur fuer die eingebettete Tages-Challenge-Karte
   gebaut, jetzt als gemeinsamer Standard fuer alle Bestenlisten uebernommen (Nutzer-Feedback
   "sieht nicht zusammenhaengend aus") - Container braucht dafuer die sf-hs-list-Klasse, siehe
   dort. Neue Spiele binden dieselben Klassen/dieselbe Funktion einfach ein, statt sie zu
   kopieren. */
.sf-hs-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sf-hs-title-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sf-hs-columns { display: flex; gap: 10px; }
.sf-hs-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-hs-col-title { font-size: 11px; font-weight: 700; color: rgb(var(--ink-rgb) / 0.5); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 2px; }
.sf-hs-row {
  display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 10px; padding: 9px 10px;
}
.sf-hs-row.mine { border-color: var(--terra); background: rgba(216,106,74,0.06); }
/* .sf-hs-list: zusammenhaengende Listen-Variante (ein Container, Zeilen nur durch Trennlinie
   getrennt statt einzelner Kachel je Zeile) - Container braucht diese Klasse zusaetzlich zur
   Zeilen-Klasse .sf-hs-row, siehe games/*/game.html Bestenlisten-Container. Bare .sf-hs-row
   (z.B. games/country-streak/game.html Laender-Glossar) behaelt die Kachel-Optik oben. */
.sf-hs-list { background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / 0.1); border-radius: 10px; }
.sf-hs-list .sf-hs-row {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
}
.sf-hs-list .sf-hs-row:last-child { border-bottom: none; }
/* box-shadow statt border/background-only fuer die eigene Zeile - ein echter Rahmen wuerde
   die Zeile gegenueber den anderen leicht nach innen verschieben (Zeilen haben in der
   zusammenhaengenden Liste keinen eigenen Rahmen mehr, siehe .sf-hs-list .sf-hs-row oben). */
.sf-hs-list .sf-hs-row.mine { background: rgba(216,106,74,0.06); box-shadow: 0 0 0 1.5px var(--terra); border-radius: 8px; border-bottom: none; }
/* Profil-Icon je Zeile (Rangform + Farbe + gewaehltes Motiv, siehe shared-ranks.js
   renderAvatarSVG()) - zeigt dasselbe Motiv wie im Header/Profil-Sheet (siehe account/db.js
   getAvatarBatch()-Kommentar), damit man sein Motiv auch anderen zeigen kann. */
.sf-hs-avatar { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.sf-hs-avatar svg { display: block; width: 100%; height: 100%; }
.sf-hs-rank { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 13px; color: rgb(var(--ink-rgb) / 0.4); width: 18px; flex-shrink: 0; }
.sf-hs-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-hs-score { font-size: 13px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
.sf-hs-hint { font-size: 12px; color: rgb(var(--ink-rgb) / 0.5); text-align: center; padding: 6px 0; }

/* ── Punkte-Popup: gemeinsame Vorlage fuer alle Spiele (kurzes "+N"-Badge rechts neben der
   Punktzahl bei einem Zuwachs, siehe shared-game-helpers.js showScorePop()/hideScorePop()) -
   uebernommen aus games/country-streak/game.html, jetzt auch von games/capital-spot/game.html
   genutzt. Blendet sich ein/aus statt die Punktzahl selbst zu veraendern, damit die
   Zentrierung der Score-Kachel unangetastet bleibt. Wann es wieder ausgeblendet wird
   (bei naechster Punktzahl-Aenderung, oder automatisch nach ein paar Sekunden) entscheidet
   jedes Spiel selbst, siehe dortiger Aufruf von hideScorePop(). */
.sf-score-value-wrap { position: relative; display: inline-block; }
.sf-score-pop {
  position: absolute; left: 100%; top: 50%; margin-left: 4px;
  transform: translateY(-50%) translateY(4px);
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800;
  color: var(--salbei);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.sf-score-pop.show { opacity: 1; transform: translateY(-50%) translateY(0); }

/* ── Regeln-Button + Regelwerk-Overlay: gemeinsame Vorlage fuer alle Spiele - uebernommen
   aus games/country-streak/game.html (Muster urspruenglich aus games/7mal7/game.html),
   jetzt auch von games/capital-spot/game.html genutzt. Inhalt/Text des Overlays bleibt pro
   Spiel eigenes HTML (siehe dortiges #rules-overlay), nur Optik + Oeffnen/Schliessen-Logik
   (shared-game-helpers.js initRulesOverlay()) sind gemeinsam. "?" statt vorher "i" (Nutzer-
   Feedback), und in der Punkteleiste jetzt oben rechts statt bei Country Streak vorher
   neben den Herzen. */
.sf-rules-btn {
  /* Gleiche Groesse wie der Zurueck-Button auf der anderen Seite der Punkteleiste
     (*-ingame-back-btn, 34x34px) - Nutzer-Wunsch: beide Ecken-Buttons sollen optisch
     gleich wirken. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgb(var(--ink-rgb) / 0.1); border: 1.5px solid rgb(var(--ink-rgb) / 0.25);
  border-radius: 50%; cursor: pointer; color: var(--ink);
  font-size: 15px; font-weight: 700; font-family: sans-serif;
  flex-shrink: 0; line-height: 1;
  vertical-align: middle;
}
.sf-rules-btn:active { background: rgb(var(--ink-rgb) / 0.2); }
/* on-dark: exakt dieselben Werte wie *-ingame-back-btn (Nutzer-Wunsch: beide Ecken-Buttons
   sollen identisch aussehen, nicht nur gleich gross sein - vorher hatte dieser Button einen
   sichtbar helleren Untergrund). */
.sf-rules-btn.on-dark { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.sf-rules-btn.on-dark:active { background: rgba(255,255,255,0.12); }

/* Pillen-Spalte in der Punkteleiste, sitzt als Flex-Geschwister NEBEN (nicht mehr ueber)
   dem Regeln-Button (siehe *-score-bar-right in beiden Spielen) - der Button bekommt so
   einen eigenen festen Platz ganz aussen, spiegelbildlich zum Zurueck-Button auf der
   anderen Seite, statt an der oberen Pille zu kleben (Nutzer-Feedback). */
.sf-score-bar-right-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Bestwert-Anzeige - jetzt Teil der mittleren Punkte-Kachel (unter der Punktzahl) statt in
   der rechten Pillen-Spalte (Nutzer-Feedback), bei GlobeSpot bisher komplett ungenutzt
   (view.personalBest kam vom Server schon an, wurde aber nirgends angezeigt). */
.sf-best-tile { text-align: center; }
.sf-best-value { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800; line-height: 1; opacity: 0.85; }

/* ── Lobby-Hero mit Regeln-Button ─────────────────────────────────────────── */
.lobby-hero { position: relative; }
.lobby-hero-info { position: absolute; top: 10px; right: 10px; }

/* ── Regelwerk-Overlay ───────────────────────────────────────────────────── */
#rules-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--overlay-veil);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 3000;
  align-items: center; justify-content: center; padding: 24px;
}
#rules-overlay.open { display: flex; }
#rules-box {
  background: var(--bg); border-radius: 18px;
  padding: 22px 22px 20px; max-width: 340px; width: 100%;
  position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-height: 80vh; overflow-y: auto;
}
#rules-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--ink); opacity: 0.5; padding: 2px 6px;
}
#rules-close:hover { opacity: 1; }
.rules-title {
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 800;
  color: var(--ink); margin: 0 0 12px; letter-spacing: -0.01em;
  padding-right: 24px;
}
.rules-section { margin-bottom: 12px; }
.rules-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgb(var(--ink-rgb) / 0.5); margin-bottom: 5px;
}
.rules-text {
  font-size: 13px; color: var(--ink); line-height: 1.6; margin: 0;
}

/* ── Challenge-Overlay: Vorschau/Annahme eines Herausforderungs-Links (?challenge=<id>) -
   natives <dialog>-Element statt einer handgebauten position:fixed-Konstruktion (siehe
   Bug-Report: bei mindestens einer Firefox-Konfiguration wurde die alte Variante an der
   falschen Stelle im Dokument gerendert und war nicht klickbar). dialog.showModal() rendert
   im Browser-eigenen "Top Layer" - unabhaengig von Vorfahren-Elementen und deren Transform-/
   Filter-Eigenschaften, die einem position:fixed-Element sonst das Elternelement fuer die
   Positionierung unterschieben koennen. Kein backdrop-filter mehr (bewusst, geringeres
   Rendering-Risiko als die Ursache nicht zweifelsfrei feststand) - reines abgedunkeltes
   ::backdrop statt Weichzeichner. Inhalt/Buttons bleiben pro Spiel eigenes HTML
   (games/*/game.html), nur diese Optik ist gemeinsam. */
dialog#challenge-overlay {
  /* !important auf ALLEN Eigenschaften hier, nicht nur Geschmackssache: Chromiums <dialog>-UA-
     Stylesheet setzt fuer position/margin/max-width/width/border/background eigene Werte mit
     einer Prioritaet, die normale Autoren-Regeln NICHT ueberschreiben (per Messung, nicht nur
     Spezifitaets-Rechnung - selbst margin:auto ohne !important verlor gegen die UA-Vorgabe).
     Ohne !important auf border/background blieb der dicke schwarze Standard-Dialograhmen
     sichtbar (siehe Bug-Report), ohne !important auf margin/max-width/width haengt der Dialog
     oben links am Viewport-Rand fest statt zentriert zu sein. */
  border: none !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  margin: auto !important;
  max-width: 340px !important;
  width: calc(100% - 48px) !important;
}
dialog#challenge-overlay::backdrop {
  background: rgb(var(--scrim-rgb) / 0.45);
}
/* #challenge-title/#challenge-share-title (siehe unten) sind NICHT Teil der normalen Tab-
   Reihenfolge (tabindex="-1" im HTML) - sie werden ausschliesslich einmalig beim Oeffnen per
   Skript fokussiert (siehe openChallengeOverlay()/openShareDialog()), nie per echter
   Tastatur-Navigation erreicht. Der sitweite Fokusring (siehe *:focus-visible oben) ist dort
   daher verzichtbar: Screenreader kuendigen den Dialog-Titel ohnehin an, und ein sehender
   Tastatur-Nutzer sieht bereits am geoeffneten Dialog selbst, wo der Fokus jetzt ist - anders
   als bei "Annehmen"/"Abbrechen", wo der Ring beim echten Durchtabben weiterhin noetig bleibt
   und unveraendert erscheint (siehe Bug-Report: der Ring landete beim automatischen Oeffnen
   zunaechst auf dem Titel statt auf einem Button, was in Firefox weiterhin sichtbar blieb).
   Bewusst NICHT :focus (nur :focus-visible) ausgenommen, damit ein evtl. per Maus fokussierter
   Zustand unveraendert bleibt - betrifft praktisch nie diese Elemente, da sie nicht klickbar
   gestylt sind, aber schadet nicht als Absicherung. */
#challenge-title:focus-visible,
#challenge-share-title:focus-visible {
  outline: none;
}
#challenge-box {
  background: var(--bg); border-radius: 18px;
  padding: 24px 22px 22px; width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-height: 80vh; overflow-y: auto; text-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
#challenge-box .rules-title { margin: 0; padding-right: 0; text-align: center; }
#challenge-box .rules-text { text-align: center; }
#challenge-box .challenge-actions { display: flex; flex-direction: column; gap: 10px; }
/* #challenge-box ist ein Spalten-Flex-Container - dessen Kinder strecken sich per CSS-Default
   (align-items: stretch) sonst auf die volle Breite, was bei Titel/Text/Buttons erwuenscht ist,
   bei der (inhaltsbreiten) Modus-Pille aber wie ein durchgehender Balken statt einer kompakten
   Pille aussah (siehe Bug-Report/Screenshot). align-self: center statt stretch, damit sie nur
   so breit wie ihr Inhalt wird und mittig sitzt. */
#challenge-mode-pill { align-self: center; }

/* ── Share-Dialog: Link + Erklaerung + WhatsApp/Kopieren nach "Freunde herausfordern" (siehe
   games/*/game.html openShareDialog()) - exakt dasselbe <dialog>-Muster wie #challenge-overlay
   oben (siehe dortiger Kommentar zum Bug/!important-Bedarf), bewusst als eigener Dialog mit
   eigenen IDs dupliziert statt das bereits funktionierende Annahme-Overlay zu verallgemeinern
   (geringeres Risiko, dort etwas zu zerbrechen). */
dialog#challenge-share-overlay {
  border: none !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  margin: auto !important;
  max-width: 340px !important;
  width: calc(100% - 48px) !important;
}
dialog#challenge-share-overlay::backdrop {
  background: rgb(var(--scrim-rgb) / 0.45);
}
#challenge-share-box {
  background: var(--bg); border-radius: 18px;
  padding: 24px 22px 22px; width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-height: 80vh; overflow-y: auto; text-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
#challenge-share-box .rules-title { margin: 0; padding-right: 0; text-align: center; }
#challenge-share-box .rules-text { text-align: center; }
#challenge-share-box .challenge-actions { display: flex; flex-direction: column; gap: 10px; }
/* Link-Zeile: Linktext (klickbar, kopiert) + Icon-Button (kopiert ebenfalls) nebeneinander -
   Nutzer-Wunsch, beide Wege sollen dieselbe Kopieren-Aktion ausloesen. */
.challenge-link-row { display: flex; align-items: stretch; gap: 8px; }
.challenge-link-text {
  flex: 1; min-width: 0; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: var(--ink); background: rgb(var(--ink-rgb) / 0.06); border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 10px; padding: 0 12px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 34x34px wie .sf-rules-btn (gleiche Ecken-Button-Groesse im restlichen Spiel) - hier aber
   eigene, nicht-runde Klasse, da diese Zeile neben einem breiten Textfeld sitzt statt frei in
   einer Ecke. */
.challenge-copy-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgb(var(--ink-rgb) / 0.1); border: 1.5px solid rgb(var(--ink-rgb) / 0.25);
  border-radius: 10px; cursor: pointer; color: var(--ink);
}
.challenge-copy-icon-btn:active { background: rgb(var(--ink-rgb) / 0.2); }

/* ── Spiel-Unterheader (Spec 18.1): gemeinsame Komponente fuer alle Spiele ───────────────────────────
   Eigene Navy-Karte unter dem Header. Grid 1fr | 88px | 1fr: die mittlere Spalte ist FEST 88 px breit,
   damit Icon+Pille links und Leben+Regeln rechts bei jeder Punktzahl an derselben Stelle bleiben.
   .sf-ptnumrow MUSS display:block sein (Spec 18.1.1): Zahl und Delta sind absolut positioniert, ein
   inline-Element ohne Fluss-Inhalt wuerde auf Breite/Hoehe 0 kollabieren. */
/* Waechst leicht mit der Fensterhoehe (Nutzer-Wunsch) - nur das vertikale Innenmass, Inhalt (Logo/Pille/
   Punkte/Leben) bleibt in fester Groesse, wird dadurch nur grosszuegiger umrahmt. */
.sf-subhdr {
  display: grid; grid-template-columns: 1fr 88px 1fr; column-gap: 6px; align-items: center;
  background: var(--navy); color: #fff; border-radius: 16px; padding: clamp(5px, 1.2vh, 12px) 12px;
}
.sf-subhdr-left { justify-self: start; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.sf-subhdr-right { justify-self: end; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Spiel-Logo (dasselbe Bild wie auf der Startseiten-Kachel), ohne Hintergrund. Soll den Header leicht
   "sprengen" (Nutzer-Wunsch) - dafuer reicht Verschieben allein nicht, das Logo muss selbst groesser
   wirken (Nutzer-Feedback: "die Logos sind nicht gewachsen, sondern nur verschoben worden"). Deshalb
   zwei Techniken kombiniert:
   1) position:relative + top: gleicht das eigene Padding der Navy-Leiste aus (kein margin-top - das
      wuerde die Margin-Box verkleinern, an der .sf-subhdr-left/align-items:center die Zeilenhoehe
      bemisst, die Zeile wurde dadurch selbst kuerzer und neu zentriert, siehe Git-Historie).
   2) transform:scale + transform-origin:bottom: vergroessert das Logo rein optisch (Transforms zaehlen
      NICHT zur Layout-Box, beeinflussen also weder die Breite der Pille daneben noch die Zeilenhoehe),
      verankert an der Unterkante - der Groessenzuwachs waechst dadurch gezielt nach oben aus der Leiste
      heraus, statt symmetrisch auch nach unten. Kein overflow:hidden auf .sf-subhdr, deshalb unproblematisch. */
.sf-subhdr-logo { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; display: block; position: relative; top: 9px; transform: scale(1.615); transform-origin: center bottom; }
.sf-subhdr-pill { font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 20px; background: rgba(255,255,255,0.14); white-space: nowrap; }
.sf-subhdr .sf-rules-btn { width: 28px; height: 28px; font-size: 13px; flex-shrink: 0; }
.sf-ptcol { display: block; text-align: center; }
.sf-ptcap { display: block; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; line-height: 1.2; }
.sf-ptnumrow { display: block; position: relative; width: 100%; height: 22px; }
.sf-ptnum {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 22px;
  font-variant-numeric: tabular-nums;
}
/* "+N"-Delta: beginnt 4 px rechts vom rechten Rand der Punktzahl (--sf-num-half = halbe Zahlenbreite, per
   ResizeObserver in shared-game-helpers.js showScorePop() gesetzt; 17px nur als Fallback), damit es auch
   bei mehrstelligen Punktzahlen nicht in die Zahl ragt. Blendet per .show ein/aus (siehe showScorePop()/hideScorePop()). */
.sf-ptdelta {
  position: absolute; left: 50%; margin-left: calc(var(--sf-num-half, 17px) + 4px); top: 50%; white-space: nowrap;
  transform: translateY(-50%) translateY(4px);
  font-size: 14px; font-weight: 700; color: #8fd6ab;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.4s ease;
}
.sf-ptdelta.show { opacity: 1; transform: translateY(-50%); }
/* "+0" nach einer Runde ohne Punkte: Rot statt Gruen (helle Variante, der Unterheader ist dunkel) */
.sf-ptdelta.zero { color: #ff9d8f; }
@media (prefers-reduced-motion: reduce) { .sf-ptdelta { transition: none; } }

/* Schmale Screens: Header (mit Zurueck-Pfeil auf Spielseiten) und Unterheader schlanker, damit nichts
   ueber den rechten Rand hinausragt. */
@media (max-width: 380px) {
  .header-inner { padding: 0 10px; }
  .header-logo { gap: 5px; }
  .header-wordmark-svg { height: 22px; }
  .sf-subhdr { padding-left: 10px; padding-right: 10px; }
  .sf-subhdr-pill { font-size: 10px; padding: 5px 7px; }
}
@media (max-width: 340px) {
  /* Sehr schmal (320 px): Header-Buttons etwas kleiner, sonst ragt der Avatar ueber den rechten Rand. */
  .header-inner { padding: 0 6px; }
  header .header-back, header .mute-header-btn, header .bug-header-btn, header .settings-header-btn, header .profil-btn { width: 36px; height: 36px; }
  .header-wordmark-svg { height: 20px; }
  .header-logo { gap: 4px; }
  .sf-subhdr { padding-left: 8px; padding-right: 8px; column-gap: 4px; }
  .sf-subhdr-logo { width: 30px; height: 30px; }
  .sf-subhdr-pill { font-size: 9.5px; padding: 4px 6px; }
  .sf-subhdr-right { gap: 6px; }
  .sf-subhdr .sf-rules-btn { width: 26px; height: 26px; }
}

/* ── Rangliste als helle Box in farbiger Karte (Startseite, Ergebnis-Screen; Umsetzungsspec 5) ─────────── */
.sf-rank-box {
  min-height: 40px; background: var(--inset); border: none; border-radius: 14px; padding: 4px 6px;
}
.sf-rank-box .sf-hs-hint { padding: 12px 0; }
.sf-rank-box .sf-hs-row { border-bottom: none; border-radius: 10px; padding: 7px 8px; }
.sf-rank-box .sf-hs-row.mine { background: var(--surface); box-shadow: none; border: none; }
.sf-rank-box .sf-hs-row.mine.running { background: var(--inset-strong); }
.sf-rank-box .sf-hs-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sf-rank-box .sf-hs-row.mine .sf-hs-name { font-weight: 600; }
.sf-rank-box .sf-hs-score { color: var(--accent); }
.sf-rank-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.12); color: rgb(var(--ink-rgb) / 0.75); white-space: nowrap; }
.sf-hs-row.is-action { cursor: pointer; }
.sf-hs-row.is-action:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.sf-rank-tag.action { display: inline-flex; align-items: center; gap: 2px; background: var(--control); color: var(--on-control); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-rank-tag.action svg { width: 9px; height: 9px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-rank-box .sf-hs-name { min-width: 0; }
@media (max-width: 360px) { .sf-rank-tag.action .tag-pre { display: none; } }
@media (max-width: 340px) { .sf-rank-tag.action { font-size: 9px; padding: 2px 5px; } }
.sf-rank-delta { width: 15px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: #2f7a52; }
.sf-rank-delta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-rank-delta span { font-size: 9px; font-weight: 700; }
.sf-rank-divider { text-align: center; color: rgb(var(--ink-rgb) / 0.45); font-size: 13px; line-height: 10px; letter-spacing: 2px; padding: 2px 0; }

/* ── Ranglisten-Sheet (Umsetzungsspec 10.1, shared-game-helpers.js sfOpenLeaderboardSheet) ─────────────
   Kopfzeile auf dem Sheet, darunter eine Karte in der Spielfarbe (--lb-color) mit Modus-Schalter und
   heller Rangliste-Box - dieselben Bausteine wie Startseiten-Kachel und Ergebnis-Screen (.sf-rank-box). */
.sf-sheet.sf-lb-sheet { height: auto; max-height: min(85svh, 680px); overflow: hidden; gap: 12px; padding-bottom: 0; }
.sf-lb-card {
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 16px;
  background: var(--lb-color, var(--salbei)); margin-bottom: max(16px, env(safe-area-inset-bottom));
}
.sf-lb-card-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 0; flex-shrink: 0; }
.sf-lb-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.sf-lb-game { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.sf-lb-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--inset); flex-shrink: 0; }
.sf-lb-tab {
  flex: 1; min-width: 0; height: 36px; border: none; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 5px; transition: background 0.15s, color 0.15s;
}
.sf-lb-tab[aria-selected="true"] { background: var(--control); color: var(--on-control); }
.sf-lb-tab .sf-lb-lock { display: none; }
.sf-lb-tab.is-locked .sf-lb-lock { display: block; }
.sf-lb-tab.is-locked svg:not(.sf-lb-lock) { display: none; }
.sf-lb-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sf-lb-list { flex: 0 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
.sf-lb-hint-btn { display: block; margin: 8px auto 0; padding: 8px 16px; border: none; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.1); color: var(--ink); font: 600 13px 'DM Sans', sans-serif; cursor: pointer; }
/* Eigene Zeile: heftet sich als weisse Zeile an den oberen/unteren Rand der Karte, solange sie ausserhalb des
   sichtbaren Bereichs der Liste liegt; feiner Schatten zur Liste hin (Spec 10.1), kein Pfeilsymbol. */
.sf-lb-pin { display: none; flex-shrink: 0; width: 100%; padding: 0 6px; border: none; border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; font-family: inherit; box-shadow: 0 2px 10px rgba(61,64,91,0.22); }
.sf-lb-pin.show { display: block; }
.sf-lb-pin .sf-hs-row { pointer-events: none; border: none; box-shadow: none; background: transparent; padding: 7px 8px; }
.sf-lb-pin .sf-hs-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ── Spielerprofil-Sheet (shared-player-profile.js): Profil eines anderen Spielers aus der Rangliste ── */
.sf-hs-row[data-action="openPlayerProfile"]:hover { background: rgb(var(--ink-rgb) / 0.05); }
#sf-pp-overlay { z-index: 510; }
.sf-sheet.sf-pp-sheet { max-height: min(92svh, 760px); gap: 14px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.sf-pp-body { flex: 0 1 auto; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sf-pp-hint { padding: 28px 0; text-align: center; font-size: 14px; color: rgb(var(--ink-rgb) / 0.6); }
.sf-pp-head { display: flex; align-items: center; gap: 14px; }
.sf-pp-avatar { width: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sf-pp-headtext { min-width: 0; }
.sf-pp-name { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sf-pp-total { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--ink-rgb) / 0.7); }
.sf-pp-rank { display: inline-flex; flex-shrink: 0; }
.sf-pp-section-title { margin: 0 0 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; color: var(--ink); }
.sf-pp-hs-list, .sf-pp-games { display: flex; flex-direction: column; gap: 8px; }
.sf-pp-games { gap: 16px; }
.sf-pp-hs { padding: 10px 12px; border-radius: 12px; border-left: 5px solid var(--lb-color, var(--salbei)); background: var(--inset); }
.sf-pp-hs-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sf-pp-hs-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.sf-pp-hs-none { margin-top: 6px; font-size: 12px; color: rgb(var(--ink-rgb) / 0.55); }
.sf-pp-hs-modes { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-pp-mode-label { font-size: 11px; font-weight: 600; color: rgb(var(--ink-rgb) / 0.6); }
.sf-pp-mode-score { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--accent); }
.sf-pp-mode-place { font-size: 11px; color: rgb(var(--ink-rgb) / 0.6); }
.sf-pp-mode.empty .sf-pp-mode-score { color: rgb(var(--ink-rgb) / 0.3); }
.sf-pp-game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sf-pp-game-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; color: var(--ink); }
/* Kacheln wie im eigenen Profil (.acc-achievement-tile): Mini-Avatar, gesperrt = graue Form, Emoji halbtransparent, Schloss-Badge */
.sf-pp-tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; justify-items: center; }
.sf-pp-tile { position: relative; width: 100%; max-width: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; line-height: 0; transition: box-shadow 0.15s; }
.sf-pp-tile.fan { width: 34px; max-width: none; flex-shrink: 0; }
.sf-pp-tile.open { box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.35); }
.sf-pp-tile.open.unlocked { box-shadow: 0 0 0 2px var(--ink); }
.sf-pp-tile.locked svg > circle,
.sf-pp-tile.locked svg > polygon { fill: color-mix(in srgb, var(--ink) 16%, var(--surface)); stroke: color-mix(in srgb, var(--ink) 16%, var(--surface)); }
.sf-pp-tile.locked image { opacity: 0.5; }
.sf-pp-tile-avatar { display: block; }
.sf-pp-tile-avatar svg { display: block; width: 100%; height: auto; }
.sf-pp-lock { position: absolute; bottom: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--control); color: var(--on-control); display: flex; align-items: center; justify-content: center; }
.sf-pp-lock svg { width: 9px; height: 9px; }
.sf-pp-detail { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgb(var(--ink-rgb) / 0.05); }
.sf-pp-detail[hidden] { display: none; }
.sf-pp-detail-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.sf-pp-detail-desc { margin-top: 2px; font-size: 12px; color: var(--ink); opacity: 0.75; }

/* ── Regeln-Sheet (Umsetzungsspec 10.2): gleiche Karte wie das Ranglisten-Sheet, darin die Regelzeilen ── */
.sf-sheet.sf-rules-sheet { max-height: min(92svh, 760px); }
.sf-rules-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-gutter: stable; }
.sf-rules-list { display: flex; flex-direction: column; background: var(--inset); border-radius: 14px; padding: 4px 10px; }
.sf-rules-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.sf-rules-row + .sf-rules-row { border-top: 1px solid rgb(var(--ink-rgb) / 0.1); }
.sf-rules-ico { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.sf-rules-ico svg { display: block; width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-rules-text b { font-weight: 700; }

/* ── Anmelde-Sheet (Umsetzungsspec 20, shared-account.js sfOpenAuthSheet) ──────────────────────────────── */
.sf-sheet.sf-auth-sheet { height: auto; max-height: min(92svh, 780px); gap: 14px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.sf-auth-view { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sf-auth-view[hidden], .sf-auth-view [hidden] { display: none !important; }
.sf-auth-reason { font-size: 13px; line-height: 1.45; color: var(--ink); background: rgba(140,187,163,0.22); border-radius: 10px; padding: 10px 12px; text-align: center; }
.sf-auth-google-wrap { display: flex; flex-direction: column; gap: 12px; }
/* Feste Hoehe + overflow hidden: aendert Googles Button beim Aufbau seine Groesse, verschiebt das nicht mehr Trenner, Tabs und Felder darunter.
   Bis der Iframe geladen ist bleibt er unsichtbar (.ready, siehe sfAuthRenderGoogleButton). */
.sf-auth-google { display: flex; justify-content: center; align-items: center; height: 44px; overflow: hidden; color-scheme: light; opacity: 0; transition: opacity 0.15s ease; }
.sf-auth-google.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sf-auth-google { transition: none; } }
/* Googles Button liegt in einem Iframe mit hellem Dokument (auch der schwarze Button, das Schwarz ist ins Dokument gezeichnet). Weicht das
   Farbschema des Iframe-Elements davon ab, legt der Browser einen deckenden weissen Kasten dahinter - darum hier immer light, auch im Dunkelmodus. */
.sf-auth-or { display: flex; align-items: center; gap: 10px; color: rgb(var(--ink-rgb) / 0.5); font-size: 12px; }
.sf-auth-or::before, .sf-auth-or::after { content: ''; flex: 1; height: 1px; background: rgb(var(--ink-rgb) / 0.15); }
.sf-auth-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.08); }
.sf-auth-tab { flex: 1; min-width: 0; height: 36px; border: none; border-radius: 999px; background: transparent; cursor: pointer; font: 500 13px 'DM Sans', sans-serif; color: var(--ink); transition: background 0.15s, color 0.15s; }
.sf-auth-tab[aria-selected="true"] { background: var(--control); color: var(--on-control); }
.sf-auth-field { display: flex; flex-direction: column; gap: 6px; }
.sf-auth-label { font-size: 12px; font-weight: 600; color: rgb(var(--ink-rgb) / 0.6); padding: 0 2px; }
.sf-auth-static { font-size: 15px; color: var(--ink); padding: 2px; word-break: break-all; }
.sf-input.invalid { border-color: var(--terra); }
.sf-input.ok { border-color: #2f7a52; }
.sf-auth-note { font-size: 12px; line-height: 1.4; color: rgb(var(--ink-rgb) / 0.6); padding: 0 2px; }
.sf-auth-note:empty { display: none; }
.sf-auth-note.ok { color: #2f7a52; font-weight: 600; }
.sf-auth-note.bad { color: var(--bad-text); }
.sf-auth-sugg { white-space: nowrap; border: none; background: rgba(216,106,74,0.16); color: var(--err-text); font: 700 12px 'DM Sans', sans-serif; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.sf-auth-pw { position: relative; }
.sf-auth-pw .sf-input { padding-right: 48px; }
.sf-auth-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: transparent; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sf-auth-eye svg { width: 20px; height: 20px; stroke: rgb(var(--ink-rgb) / 0.6); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-auth-forgot { align-self: flex-end; font-size: 13px; font-weight: 600; color: var(--bad-text); text-decoration: none; padding: 2px 0; }
.sf-auth-back { align-self: center; font-size: 13px; color: rgb(var(--ink-rgb) / 0.65); text-decoration: none; padding: 6px; }
.sf-auth-text { margin: 0; font-size: 13px; line-height: 1.5; color: rgb(var(--ink-rgb) / 0.7); }
.sf-auth-error { background: rgba(216,106,74,0.16); color: var(--err-text); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.sf-auth-ok { background: rgba(140,187,163,0.22); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.sf-auth-legal a { color: inherit; text-decoration: underline; }
.sf-auth-legal { margin: 0; text-align: center; font-size: 11.5px; line-height: 1.4; color: rgb(var(--ink-rgb) / 0.55); }

/* ── Header-Button "Anmelden" fuer Gaeste (Umsetzungsspec 2) ── */
.profil-btn.is-guest, header .profil-btn.is-guest {
  width: auto; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--control); color: var(--on-control);
  font: 700 13px 'DM Sans', sans-serif; white-space: nowrap; flex-shrink: 0;
}
/* Optischer Ausgleich (Nutzer-Feedback): Ton/Zahnrad davor sind transparent, nur das duenne
   22px-Symbol ist sichtbar (11px unsichtbarer Rand ringsum in der 44px-Flaeche) - der
   wahrgenommene Leerraum zwischen ihnen betraegt dadurch 11+2(gap)+11=24px. Der Anmelden-Pill ist
   dagegen komplett gefuellt, seine Farbe beginnt direkt an der Box-Kante - ohne diesen Zusatzabstand
   waere der wahrgenommene Leerraum zum Zahnrad nur 11+2=13px, sichtbar knapper als auf der
   Ton-Seite. +11px gleicht das auf ebenfalls ~24px an. */
header .profil-btn.is-guest { margin-left: 11px; }
/* Angemeldet ist das Profil-Icon kein Text-Pill, sondern die gefuellte Rang-Form (Kreis/Sechseck/
   Raute/Dreieck/Stern in der Profilfarbe, siehe shared-ranks.js) - ebenfalls gefuellt statt duenner
   Strich, nur kleiner als der Anmelden-Pill. Bei Rang 1 (Kreis, Standardfall neuer Konten) fuellt
   sie ca. 31 von 44px, also nur ~6,5px unsichtbarer Rand statt 11px (wahrgenommener Abstand zum
   Zahnrad ca. 19,5px statt 24px) - mit steigendem Rang wird die Form noch etwas groesser (Spec:
   Kreis/Sechseck/Raute/Dreieck/Stern-Multiplikator 1,0 bis 1,2), ein fester Wert kann das nicht
   fuer jeden Rang exakt ausgleichen, nur im Schnitt annaehern (kleinerer Korrekturwert als beim
   Pill, weil der Avatar insgesamt naeher an der Icon-Groesse liegt). */
header .profil-btn:not(.is-guest) { margin-left: 5px; }
.profil-btn.is-guest:hover { transform: none; }
.profil-btn.is-guest .guest-ico { display: none; width: 18px; height: 18px; stroke: var(--on-control); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  header .profil-btn.is-guest.has-back { width: 36px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  header .profil-btn.is-guest.has-back .guest-txt { display: none; }
  header .profil-btn.is-guest.has-back .guest-ico { display: block; }
}
@media (max-width: 340px) { header .profil-btn.is-guest { padding: 0 10px; font-size: 12px; } }

/* ── Daily-Endscreen (siehe shared-daily-result.js): Land des Tages, fuenf Rundenfelder, Countdown ──
   Feste Farben statt Tokens: Schrift und Hintergrund muessen in Hell- und Dunkelmodus gleichermassen lesbar bleiben
   (Navy auf dem Salbei-Feld ca. 5,5:1, Weiss auf Grau ab 5:1, Navy auf dem gelben Feld ca. 8:1). Die Fuellfarben sind in allen
   Spielen gleich; liegt eine Kachel auf einem Kartengrund in aehnlicher Farbe, hebt ein Rand sie ab. Welche, steht je Spiel
   am Kartenelement: data-tile-edge="perfect partial zero" (Spielfarbe der Karte = Sandgelb bzw. Terrakotta). */
.cs-tiles { display: flex; justify-content: center; gap: 8px; padding: 2px 0 2px; }
.cs-tiles[hidden], .cs-daily-extra[hidden], .cs-daily-country[hidden] { display: none; }
.cs-tile {
  width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.cs-tile.perfect { background: #8CBBA3; color: #2d2f45; } /* Marken-Salbei (--salbei); auf der salbeigruenen Karte traegt ihn der Rand (data-tile-edge="perfect") */
[data-tile-edge~="perfect"] .cs-tile.perfect { box-shadow: inset 0 0 0 2px rgba(45,47,69,0.55); }
.cs-tile.partial { background: #F2CC8F; color: #2d2f45; }
.cs-tile.zero { background: #666b82; color: #fff; }
[data-tile-edge~="partial"] .cs-tile.partial { box-shadow: inset 0 0 0 2px rgba(45,47,69,0.6); }
[data-tile-edge~="zero"] .cs-tile.zero { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.cs-daily-country { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cs-daily-country img { width: 22px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.cs-daily-extra { text-align: center; }
.cs-daily-countdown { font-size: 13px; font-weight: 600; color: rgb(var(--ink-rgb) / 0.7); font-variant-numeric: tabular-nums; }

/* ── Daily-Rueckblick (Startseite): eine Meldung ueber alle Spiele des letzten Spieltags ── */
.sf-sheet.sf-recap-sheet { height: auto; max-height: min(92svh, 760px); overflow-y: auto; gap: 12px; }
.sf-recap-body { display: flex; flex-direction: column; gap: 10px; }
.sf-recap-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: var(--inset); }
.sf-recap-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.sf-recap-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sf-recap-head { display: flex; align-items: baseline; gap: 8px; }
.sf-recap-game { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.sf-recap-date { font-size: 12px; font-weight: 500; color: rgb(var(--ink-rgb) / 0.65); }
.sf-recap-score { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sf-recap-place { font-size: 12.5px; font-weight: 500; color: rgb(var(--ink-rgb) / 0.75); line-height: 1.35; }
.sf-recap-tiles { justify-content: flex-start; gap: 6px; padding: 4px 0 0; flex-wrap: wrap; }
.sf-recap-tiles .cs-tile { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; }
.sf-recap-total { text-align: center; font-family: 'Fraunces', serif; font-size: 17px; font-weight: 800; color: var(--ink); }
.sf-recap-total[hidden] { display: none; }
.sf-recap-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.sf-recap-later { border: none; background: transparent; padding: 10px; font: 600 14px 'DM Sans', sans-serif; color: rgb(var(--ink-rgb) / 0.7); cursor: pointer; }

/* ── WhatsApp-Logo vor "Per WhatsApp teilen" (Herausfordern-Dialoge und Daily-Teilen-Dialog) ── */
.sf-wa-btn { display: flex; align-items: center; justify-content: center; gap: 9px; }
.sf-wa-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Daily-Ergebnis teilen: Dialog im Stil von "Freunde herausfordern" ── */
.sf-sheet.sf-dshare-sheet { height: auto; max-height: min(92svh, 640px); overflow-y: auto; gap: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.sf-dshare-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.sf-dshare-preview-row { display: flex; align-items: stretch; gap: 8px; }
.sf-dshare-preview { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--inset); color: var(--ink); font: 500 13px/1.45 'DM Sans', sans-serif; white-space: pre-wrap; word-break: break-word; }
.sf-dshare-copy { flex-shrink: 0; width: 44px; border: none; border-radius: 12px; background: var(--inset); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sf-dshare-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Spiel-Header: Modus-Pille und darunter die Rekord-Pille ── */
.sf-subhdr-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-record-pill { background: rgba(255,255,255,0.08); font-weight: 600; opacity: 0.9; }
.sf-record-pill[hidden] { display: none; }
.sf-record-pill.is-new { background: #F2CC8F; color: #2d2f45; opacity: 1; }

/* ── Spiel-Menue (Header-Button): Optionen als grosse Zeilen im Bottom Sheet ── */
.sf-sheet.sf-gmenu-sheet { height: auto; max-height: min(80svh, 520px); overflow-y: auto; gap: 8px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.sf-gmenu-list { display: flex; flex-direction: column; gap: 6px; }
.sf-gmenu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: none; border-radius: 14px; background: var(--inset); color: var(--ink); text-align: left; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.sf-gmenu-item:active { background: var(--inset-strong, var(--inset)); }
.sf-gmenu-ico { width: 24px; height: 24px; flex-shrink: 0; display: flex; }
.sf-gmenu-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-gmenu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-gmenu-label { font-size: 15px; font-weight: 700; line-height: 1.25; }
.sf-gmenu-sub { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgb(var(--ink-rgb) / 0.75); }

/* ── Handy im Querformat (niedrige Hoehe): Spielscreen zweispaltig - links die Bildflaeche, rechts Frage und Bedienung. Je Spiel
   legen die Bereiche in game.html (#screen-game) die Spalten und Flaechen fest. ── */
@media (orientation: landscape) and (max-height: 520px) {
  /* Solange der Spielscreen aktiv ist, fuellt er genau die Fensterhoehe (Spalten scrollen bei Platzmangel selbst, siehe game.html) */
  body:has(#screen-game.active) main { height: 100svh; min-height: 0; }
  #screen-game.active { max-width: none; min-height: 0; display: grid; column-gap: 16px; row-gap: 8px; padding: 8px 16px 10px; align-content: stretch; }
  #screen-game .sf-subhdr { grid-column: 1 / -1; }
}

/* Regeln-Sheet im Dunkelmodus: dunkel statt in der Spielfarbe (Nutzer-Wunsch). Die Karte nimmt wieder die dunklen Tokens, die
   Spielfarbe bleibt als Streifen oben und im Logo. Muss nach dem Block "Spielfarbene Karten" oben stehen (hoehere Spezifitaet). */
:root[data-theme="dark"] .sf-rules-sheet .sf-lb-card {
  color-scheme: dark;
  --ink: #ece7e0; --ink-rgb: 236 231 224; --scrim-rgb: 0 0 0;
  --surface: #2a251d; --inset: rgba(0,0,0,0.24); --inset-strong: rgba(0,0,0,0.42);
  --control: #ece7e0; --on-control: #3D405B; --accent: #e3876d; --on-accent: #211d17;
  --c-red: #f26a75; --bad-text: #f0a08c; --err-text: #f2b3a3;
  --check-a: #625b4f; --check-b: #4d473d; --flag-line: #b9b4aa; --flag-detail-line: #8b90a4;
  background: var(--surface);
  box-shadow: inset 0 4px 0 var(--lb-color, var(--salbei));
  padding-top: 14px;
}

/* Fan-Erfolg (Kapstein) zaehlt nicht in "x/8" des Spiels, aber in "Erfolge insgesamt": kleines "+1" an der Kachel */
.acc-achievement-tile.acc-achievement-fan { position: relative; }
.acc-achievement-tile.acc-achievement-fan.unlocked::after {
  content: '+1'; position: absolute; top: -4px; right: -6px; min-width: 18px; padding: 0 4px; height: 15px; border-radius: 8px;
  background: var(--control); color: var(--on-control); font: 700 10px/15px 'DM Sans', sans-serif; text-align: center; pointer-events: none;
}

/* Land des Tages gesammelt: Flagge im Erfolge-Chip des Daily-Ergebnisses */
.sf-country-chip-flag { width: 30px; height: 21px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.2); flex-shrink: 0; }