:root {
  --color-bg: #f1f2f4;
  --color-surface: #ffffff;
  --color-text: #1c1e22;
  --color-text-muted: #6b7280;
  --color-border: #dfe1e5;

  /* Neongruen: als Flaeche sehr hell/knallig (fuer Buttons/Badges mit
     dunklem Text), als "-strong"-Variante abgedunkelt fuer lesbaren Text
     und Linien auf hellem Grund. */
  --color-green: #39ff14;
  --color-green-strong: #16a34a;

  /* Amber/Orange als zweite Akzentfarbe, gleiches Prinzip. */
  --color-amber: #ffb700;
  --color-amber-strong: #b45309;

  --color-on-accent: #0b1210;
  --color-focus: #2563eb;
  --color-danger: #d1293d;

  /* Fuer Classic bislang nur als Fallback fuer themenuebergreifende
     Bausteine (Donut-Chart Modus-Verteilung) - Bold ueberschreibt diese mit
     eigenen festen Werten weiter unten. Wiederverwendet bestehende Tokens
     statt neue Hex-Werte einzufuehren. */
  --player-color-1: var(--color-green-strong);
  --player-color-2: var(--color-amber-strong);
  --player-color-3: var(--color-focus);
  --player-color-4: var(--color-danger);

  --shadow-card: 0 1px 2px rgba(16, 20, 30, 0.04), 0 8px 24px rgba(16, 20, 30, 0.06);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #17181b;
    --color-surface: #202226;
    --color-text: #eef0f2;
    --color-text-muted: #9aa0a8;
    --color-border: #2d2f34;

    --color-green: #4dff2e;
    --color-green-strong: #34d058;

    --color-amber: #ffc233;
    --color-amber-strong: #fbbf24;

    --color-on-accent: #0b1210;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-green);
  color: var(--color-on-accent);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

a {
  color: var(--color-green-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.app-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem 0.6rem;
}

.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.app-header__logo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Eigenes Quadrat-Logo (Einstellungen) ersetzt das Standard-Icon und ist
   bewusst deutlich groesser, damit es wie ein richtiges Logo wirkt. */
.app-header__logo--custom {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
}

/* Eigenes Banner-Logo (Einstellungen), sitzt oberhalb des normalen Headers. */
#logo-banner-slot img {
  display: block;
  width: 100%;
  max-width: 1100px;
  max-height: 140px;
  object-fit: contain;
  margin: 0.75rem auto 0;
}

.app-header h1 {
  margin: 0.6rem 0 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.app-header__subtitle {
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.app-header__accent {
  width: 48px;
  height: 3px;
  margin: 0.6rem 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-green), var(--color-amber));
}

.app-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-nav .btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Burger-Menue unterhalb einer schmalen Breite (iPhone) - auf iPad Portrait
   (primaeres Zielgeraet, >=768px) bleibt die volle Nav in einer Zeile
   sichtbar, der Toggle-Button bleibt unsichtbar. */
.app-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.app-nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-text);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .app-nav-toggle {
    display: flex;
  }

  .app-nav {
    display: none;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  .app-nav.is-open {
    display: flex;
  }

  .app-header__bar {
    position: relative;
  }

  .app-nav .btn {
    text-align: left;
  }
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

.card h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

/* Buttons */
.btn {
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-green);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  filter: brightness(0.92);
}

.btn--secondary {
  background: var(--color-amber);
  color: var(--color-on-accent);
}

.btn--secondary:hover {
  filter: brightness(0.92);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-weight: 600;
}

.btn--ghost:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.btn--danger {
  background: var(--color-danger);
  color: #fff;
}

.btn--danger:hover {
  filter: brightness(0.92);
}

.btn--small {
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 6px;
}

/* Formulare */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form label {
  font-weight: 600;
  font-size: 0.9rem;
}

.form input[type="number"],
.form input[type="text"],
.form input[type="password"] {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
}

/* Plus/Minus-Stepper (Zielpunkte, Rundenzahl) - im Classic-Theme rendert
   nur das eingebettete Input, der Wrapper selbst nimmt per "display:contents"
   keinen eigenen Platz ein und die Buttons bleiben unsichtbar; im Bold-
   Theme werden beide sichtbar (siehe [data-theme-style="bold"] weiter
   unten). */
.stepper {
  display: contents;
}

.stepper__btn {
  display: none;
}

.hint-text {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.starting-player-legend {
  margin: 0.75rem 0 0;
  text-align: left;
}

.error-text {
  color: var(--color-danger);
  font-weight: 600;
}

/* Modus-Karten auf der Startseite */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.mode-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.mode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(16, 20, 30, 0.06), 0 12px 28px rgba(16, 20, 30, 0.1);
}

.mode-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}

.mode-card__examples {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

/* Nur im Bold-Theme sichtbar (siehe [data-theme-style="bold"] weiter unten) -
   im Classic-Theme rein dekorativ ungenutzt, deshalb per Default versteckt. */
.mode-card__icon {
  display: none;
}

/* Nur im Flip-Board-Theme sichtbar (siehe [data-theme-style="flip"] weiter
   unten) - Bold nutzt weiterhin das Emoji aus .mode-card__icon, Flip Board
   die schlichteren Linien-Icons hier. */
.mode-card__icon-svg {
  display: none;
}

.home-quick-action {
  display: none;
}

/* Nur im Bold-Theme sichtbar - in Classic sind die Modus-Karten direkt der
   Einstieg, ein zusaetzlicher Sprungbutton waere dort redundant. */
.home-start-btn {
  display: none;
}

/* Spielerauswahl (Checkbox-Chips) */
.player-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  user-select: none;
}

.player-chip input {
  accent-color: var(--color-green-strong);
}

.player-chip--checked {
  border-color: var(--color-green-strong);
  background: color-mix(in srgb, var(--color-green) 15%, var(--color-bg));
}

/* Aufklappbare Erweiterte Optionen (z.B. Team-Modus im Setup) */
.advanced-options {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.advanced-options summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.advanced-options summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.advanced-options[open] summary {
  margin-bottom: 0.75rem;
}

.team-setup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.team-setup__assignments {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.team-setup__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.team-setup__row select {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.team-setup__scoring {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.team-setup__scoring > label:first-child {
  font-weight: 600;
  font-size: 0.85rem;
}

.team-setup__names {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.team-setup__name-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.team-setup__name-field input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Sticky Scoreboard */
.scoreboard {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.scoreboard-card {
  border-top: 4px solid var(--color-green);
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
}

.standings-table th,
.standings-table td {
  text-align: left;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.standings-table td:nth-child(3) {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.standings-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.standings-table tr.rank-first {
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
}

.standings-table tr.rank-first td {
  font-weight: 700;
}

.standings-table tr.rank-first td:nth-child(2) {
  color: var(--color-green-strong);
  font-size: 1.15rem;
  font-weight: 800;
}

.standings-table tr.rank-first td:nth-child(3) {
  color: var(--color-green-strong);
  font-size: 1.55rem;
}

.standings-table tr.rank-first td:first-child {
  box-shadow: inset 4px 0 0 0 var(--color-green-strong);
  padding-left: 0.6rem;
}

.standings-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.standings-avatar {
  width: 22px;
  height: 33px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.standings-team-hint {
  margin-top: 0.15rem;
  font-size: 0.78rem;
}

.standings-table .progress-cell {
  min-width: 120px;
}

/* Kartenansicht des Punktestands - nur im Bold-Theme sichtbar, siehe unten */
.standings-cards {
  display: none;
}

/* RAGE: Mini-Stepper-Karten je Spieler - nur im Bold-Theme sichtbar, siehe
   unten. Referenzieren im Classic-Theme dieselben (dort weiterhin
   sichtbaren) Tabellen-Felder aus #round-entry-table. */
.rage-round-cards {
  display: none;
}

.mini-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-top: 0.3rem;
}

.mini-progress__fill {
  height: 100%;
  background: var(--color-amber);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.mini-progress__fill--done {
  background: var(--color-green-strong);
}

/* Gewinner-Banner */
.winner-banner {
  background: var(--color-green);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

/* Runde-beendet-Hinweis (Modus "Punkterunde mit fester Rundenzahl") */
.round-end-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-amber);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.round-end-notice__close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.round-end-notice__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Rundenzahl-erreicht-Hinweis (Beenden oder verlaengern) */
.target-reached-banner {
  background: var(--color-surface);
  border: 2px solid var(--color-amber);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.target-reached-banner__heading {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.target-reached-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.target-reached-banner__extend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.target-reached-banner__extend input {
  width: 4.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
}

/* Rundenerfassung */
.round-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

/* Schritt-Buttons-Modus: eine Spalte statt des schmalen Mehrspalten-Rasters,
   damit die Schritt-Zeile (.round-steps) nicht neben der Zahl umbricht,
   siehe js/round-entry.js::renderRoundEntryFields(). */
.round-form-grid--buttons {
  grid-template-columns: 1fr;
}

.round-form-grid--buttons .round-steps {
  justify-content: flex-start;
}

.round-form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.round-form-field input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.1rem;
  text-align: center;
}

/* Schritt-Buttons als Alternative zur Zahleneingabe - themenunabhaengig,
   ueber Einstellungen konfigurierbar und pro Geraet umschaltbar. Eine
   Zeile, symmetrisch um den Wert zentriert: [-10][-5][-1] [Wert] [+1][+5]
   [+10] - je nach Spiel nur die aktivierten Schrittweiten (siehe
   js/round-entry.js::roundEntryBuildStepButtons). Grosszuegige Mindest-
   groesse fuer zuverlaessiges Treffen per Finger. */
.round-steps {
  --round-steps-gap: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--round-steps-gap);
}

/* Passt eine Zeile nicht in ihren verfuegbaren Platz (grosse Schrittweiten
   wie 100/500/1000, siehe js/round-entry.js), schaltet JS auf diese
   senkrechte Anordnung um: Plus-Knoepfe oben, Wert, Minus-Knoepfe unten -
   statt eines unschoenen Umbruchs mitten in der Zeile. */
.round-steps--stacked {
  flex-direction: column;
}

.round-steps__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--round-steps-gap);
}

.round-steps__btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.round-steps__btn--plus {
  border-color: var(--color-green-strong);
}

.round-steps__btn--minus {
  border-color: var(--color-danger);
}

.round-steps__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.round-steps__value {
  font-weight: 800;
  font-size: 1.3rem;
  min-width: 3rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.3rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.round-steps__value--input {
  /* Als <input> braucht es zusaetzlich "width" - min-width allein verhindert
     nur ein Schrumpfen unter den Wert, nicht die browsereigene Default-
     Breite eines Text-Inputs (die deutlich groesser ist und sonst die ganze
     Zeile sprengt). */
  width: 3rem;
  font-family: inherit;
  color: var(--color-text);
}

.round-steps__value--input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Ein-Spieler-Sequenz zur Rundenerfassung - nur im Bold-Theme sichtbar (siehe
   unten), ersetzt dort das Tippen/Schritt-Buttons-Grid vollstaendig. */
.round-entry-sequence {
  display: none;
}

/* Kombiniertes Tipp-/Stepper-Muster - nur im Flip-Board-Theme sichtbar
   (siehe [data-theme-style="flip"] .entry-list weiter unten), ersetzt dort
   sowohl das Grid als auch die Ein-Spieler-Sequenz. Bislang fehlte diese
   Basis-Regel: unter Classic/Bold blieb der Container unsichtbar-aussehend
   nur, weil seine Buttons vor der Wiederverwendung von .round-steps
   ungestylt waren - mit der gemeinsamen Button-Optik waere er sonst jetzt
   sichtbar doppelt aufgetaucht. */
.entry-list {
  display: none;
}

/* Rundenverlauf / Korrektur - immer sichtbar und direkt editierbar */
.rounds-table-wrap {
  overflow-x: auto;
}

.rounds-table {
  width: 100%;
  border-collapse: collapse;
}

.rounds-table th,
.rounds-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.88rem;
}

.rounds-table th:first-child,
.rounds-table td:first-child {
  text-align: left;
  color: var(--color-text-muted);
}

.rounds-table input {
  width: 4.5rem;
  padding: 0.35rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  font-size: 0.9rem;
}

.rounds-table__row-actions {
  white-space: nowrap;
}

/* Kompaktere Rundentabelle auf schmalen Bildschirmen (z.B. iPhone Hochformat) -
   weniger Innenabstand/Schrift spart Platz, negativer Rand laesst die Tabelle
   bis an den Kartenrand reichen, damit moeglichst wenig seitlich gescrollt
   werden muss. */
@media (max-width: 480px) {
  .rounds-table-wrap {
    margin: 0 -1.75rem;
    padding: 0 0.5rem;
    overflow-x: auto;
  }

  .rounds-table th,
  .rounds-table td {
    padding: 0.3rem 0.3rem;
    font-size: 0.8rem;
  }

  .rounds-table input {
    width: 3.2rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.85rem;
  }

  .rounds-table__row-actions .btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Spielerverwaltung */
.player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.player-list input[type="text"] {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Spielergruppen (Spielerverwaltung) */
.group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.group-list__item {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.group-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.group-list__name {
  font-weight: 700;
}

.group-member-preview {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.group-member-preview__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.group-member-preview__avatar {
  width: 16px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
}

.group-list__edit {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.group-list__edit input[type="text"] {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.group-list__edit-actions {
  display: flex;
  gap: 0.4rem;
}

/* Gruppen-Chips beim Spiel-Einrichten (alle 4 Modi, siehe js/group-picker.js) */
.group-picker {
  margin-bottom: 0.75rem;
}

.group-picker__toolbar {
  margin-bottom: 0.5rem;
}

.group-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.group-chip {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 2px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.group-chip:hover {
  border-color: var(--color-green-strong);
}

/* Verlauf */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.history-item:hover {
  border-color: var(--color-green-strong);
}

.history-item__title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.history-item__icon {
  margin-right: 0.4rem;
}

.history-item__meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--active {
  background: var(--color-amber);
  color: var(--color-on-accent);
}

.badge--finished {
  background: var(--color-green);
  color: var(--color-on-accent);
}

/* Verlauf: Alle/Laufend/Beendet-Filter - Classic schlichte Underline-Tabs,
   Bold-Optik siehe [data-theme-style="bold"] weiter unten. */
.filter-tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  margin: 1rem 0;
}

.filter-tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.filter-tabs__btn[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-green-strong);
}

.filter-tabs__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Responsive: Desktop-Layouts ab Tablet-Breite */
@media (min-width: 700px) {
  .two-col {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    align-items: start;
  }
}

.section-spacing {
  margin-top: 1.5rem;
}

/* Halbtransparente Flaeche dahinter, damit der Versions-Hinweis sich auch
   dann absetzt, wenn darunter Zahlen/Knoepfe der Rundenerfassung sitzen
   (v.a. auf schmalen Bildschirmen, wo unten wenig Platz bleibt). */
.app-version {
  position: fixed;
  right: 0.75rem;
  bottom: 0.5rem;
  z-index: 50;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  pointer-events: none;
  text-align: right;
}

.app-version__update {
  pointer-events: auto;
  color: var(--color-danger);
  font-weight: 600;
  opacity: 1;
}

/* Unterstützen-Link (nur Startseite) - bewusst kein externes Widget-Skript,
   siehe Datenschutz-Abschnitt im README - reiner Link im Kartenstil, fix
   unten links als dezente, aber staendige Erinnerung. */
.support-link {
  position: fixed;
  left: 0.75rem;
  bottom: 0.5rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.support-link:hover,
.support-link:focus-visible {
  color: var(--color-text);
  border-color: var(--color-green);
}

.support-link__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .support-link__text {
    display: none;
  }

  .support-link {
    padding: 0.55rem;
  }
}

/* Finger-Chooser */
.chooser-card {
  padding: 0.75rem;
}

.chooser-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem 0.75rem;
}

.chooser-settings label {
  font-weight: 600;
  font-size: 0.9rem;
}

.chooser-settings input[type="text"] {
  width: 3.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  text-align: center;
}

.chooser-area {
  position: relative;
  width: 100%;
  height: min(70vh, 700px);
  min-height: 360px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chooser-hint {
  color: var(--color-text-muted);
  font-size: 1.3rem;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  max-width: 20rem;
}

.chooser-hint--result {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.05rem;
}

.chooser-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7rem;
  font-weight: 800;
  color: var(--color-amber);
  pointer-events: none;
  z-index: 5;
}

.finger-circle {
  position: absolute;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 30%, transparent);
  border: 3px solid var(--color-green-strong);
  transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease,
    background 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}

/* Kurzer "Pop": Kreis erscheint deutlich groesser und schrumpft dann auf die
   Ruhegroesse - bestaetigt sofort sichtbar, dass der Finger erkannt wurde. */
@keyframes finger-pop {
  0% {
    transform: scale(1.7);
    opacity: 0.55;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.finger-circle--pop {
  animation: finger-pop 0.3s ease-out;
}

.finger-circle--selected {
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  background: var(--color-green);
  border-color: var(--color-on-accent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--color-green) 55%, transparent);
}

.finger-circle--faded {
  opacity: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}

/* Nur fuer Screenreader sichtbar - sichtbares Label waere bei den runden
   Akzentfarben-Punkten redundant (Farbe ist bereits der Inhalt). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.settings-subsection {
  margin-top: 1.25rem;
}

.settings-subsection > label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* Einstellungen: vereinfachte Akzentfarben-Auswahl (5 Presets) - Hauptteil
   der Aussehen-Einstellung in beiden Themes, siehe
   includes/settings.php::accent_color_palette(). */
.accent-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.accent-color-dot {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dot-color);
  cursor: pointer;
  position: relative;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--color-border);
}

.accent-color-dot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.accent-color-dot:has(input:checked) {
  border-color: var(--color-text);
}

.accent-color-dot:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Einstellungen: Farbfelder */
.color-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.color-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.color-field__inputs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-field__inputs input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
}

.color-field__hex {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

.theme-pair-field {
  margin-bottom: 1.5rem;
}

.theme-pair-field:last-child {
  margin-bottom: 0;
}

.theme-pair-field h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.theme-pair-field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 500px) {
  .theme-pair-field__row {
    grid-template-columns: 1fr;
  }
}

.logo-upload-field {
  margin-bottom: 1.5rem;
}

.logo-upload-field:last-child {
  margin-bottom: 0;
}

.logo-upload-field h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.logo-upload-field__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg);
}

.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-preview--empty {
  display: none;
}

/* Spieler-Avatar (Passfoto-Format 2:3) - Spielerverwaltung + Punktestand */
.player-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-avatar-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.player-avatar-field__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.player-avatar-field__buttons .btn {
  font-size: 0.72rem;
  padding: 0.3rem 0.5rem;
}

/* Avatar-Cropper-Modal */
.avatar-cropper-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.avatar-cropper {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.avatar-cropper h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.avatar-cropper__canvas {
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  touch-action: none;
  cursor: grab;
  background: var(--color-bg);
}

.avatar-cropper__canvas:active {
  cursor: grabbing;
}

.avatar-cropper__zoom {
  width: 100%;
  accent-color: var(--color-green-strong);
}

.avatar-cropper__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* Statistik-Seite */
.table-scroll {
  overflow-x: auto;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.stats-table th,
.stats-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.9rem;
}

.stats-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Fuehrende Zeile (meiste Siege - Tabellen sind serverseitig danach
   sortiert, siehe includes/state.php) farblich hervorheben, analog zu
   .standings-table tr.rank-first in der aktiven Spielansicht. */
.stats-table tr.rank-first {
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
}

.stats-table tr.rank-first td {
  font-weight: 700;
}

.stats-table tr.rank-first td:nth-child(2) {
  color: var(--color-green-strong);
}

.stats-table tr.rank-first td:first-child {
  box-shadow: inset 4px 0 0 0 var(--color-green-strong);
  padding-left: 0.6rem;
}

/* Statistiken: KPI-Kacheln (Spiele/Beendet/Anteil beendet/Ø Punkte) */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
  text-align: center;
}

.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kpi-tile__value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-green-strong);
}

.kpi-tile__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Statistiken: Modus-Verteilung als Donut-Chart (CSS conic-gradient statt
   SVG-Arcs - keine externen Libraries im Projekt, siehe CLAUDE.md). */
.donut-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.donut-chart {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background-color: var(--color-border);
}

.donut-chart::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--color-surface);
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Statistiken: Kopf-an-Kopf-Matrix (Spieler x Spieler) */
.h2h-matrix th,
.h2h-matrix td {
  text-align: center;
  min-width: 64px;
}

.h2h-matrix th[scope="row"] {
  text-align: left;
  color: var(--color-text);
  font-weight: 600;
}

.h2h-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.h2h-row {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.h2h-row__names {
  font-weight: 700;
}

/* Druckansicht (Statistik-Seite: "Drucken / PDF") - Navigation, Buttons und
   Formulare ausblenden, nur die Auswertung bleibt auf dem Papier stehen. */
.print-only {
  display: none;
}

@media print {
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .stats-print-heading {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   "Bold Scorekeeper" Theme (zweites, waehlbares Aussehen)
   ==========================================================================
   Aktiviert per [data-theme-style="bold"] auf <html> (js/theme.js). Eigene,
   feste Farb-Tokens statt der individuell einstellbaren Classic-Farben -
   immer dunkel, kein Hell/Dunkel-Wechsel. Ueberschreibt dieselben CSS-
   Variablen wie Classic, deshalb recolort sich die komplette bestehende
   Seiten-Struktur automatisch, ganz ohne HTML-Aenderungen - Layout-/
   Bedienungs-Umbauten je Seite folgen in eigenen Schritten (siehe Roadmap).
   Spielerfarben (--player-color-*) sind vorbereitet, aber noch nicht in
   Markup verdrahtet. */
:root[data-theme-style="bold"] {
  --color-bg: #0b0d10;
  --color-surface: #16191e;
  --color-text: #f4f6f8;
  --color-text-muted: #97a1ad;
  --color-border: #262b32;

  /* Neon-Lime als Hauptaktion/Akzent. */
  --color-green: #b6ff1a;
  --color-green-strong: #8fd400;

  /* Amber-Slot wird zu Orange/Rot fuer RAGE- bzw. Warn-/Feuer-Akzente. */
  --color-amber: #ff6a3d;
  --color-amber-strong: #e0451c;

  --color-on-accent: #0b0d10;
  --color-focus: #22d3ee;
  --color-danger: #ff3b5c;

  /* Cyan/Purple als Spielerfarben, Lime/Orange ergaenzen den Zyklus. */
  --player-color-1: #b6ff1a;
  --player-color-2: #ff8a3d;
  --player-color-3: #b088ff;
  --player-color-4: #22d3ee;

  --radius: 18px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55);
}

[data-theme-style="bold"] body {
  letter-spacing: -0.01em;
}

[data-theme-style="bold"] h1,
[data-theme-style="bold"] h2,
[data-theme-style="bold"] h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Grosse, klare Haupt-Aktionen statt zurueckhaltender Formular-Buttons. */
[data-theme-style="bold"] .btn--primary,
[data-theme-style="bold"] .btn--secondary,
[data-theme-style="bold"] .btn--danger {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Startseite: starke Modus-Karten + Schnellaktion "Wer faengt an?" -- */

[data-theme-style="bold"] .home-start-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--color-green);
  color: var(--color-on-accent);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Kompakte Icon-Kacheln statt Karten mit Fliesstext-Beschreibung (Mockup
   zeigt nur Icon + Titel, keinen Beschreibungstext) - festes 2x2-Raster. */
[data-theme-style="bold"] .mode-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

[data-theme-style="bold"] .mode-card {
  border-top-width: 6px;
  padding: 1.1rem;
}

[data-theme-style="bold"] .mode-card h2 {
  font-size: 1rem;
}

[data-theme-style="bold"] .mode-card p,
[data-theme-style="bold"] .mode-card__examples {
  display: none;
}

/* Jede Modus-Karte in eigener Spielerfarbe, RAGE bewusst in Amber (Feuer-Optik
   passt zum Icon) statt im Zyklus. */
[data-theme-style="bold"] .mode-card:nth-of-type(1) {
  border-top-color: var(--player-color-1);
}

[data-theme-style="bold"] .mode-card:nth-of-type(2) {
  border-top-color: var(--player-color-2);
}

[data-theme-style="bold"] .mode-card:nth-of-type(3) {
  border-top-color: var(--player-color-3);
}

[data-theme-style="bold"] .mode-card--rage {
  border-top-color: var(--color-amber);
}

/* Einfarbige SVG-Linien-Icons statt der bunten Emoji (wirkten zu generisch/
   KI-generiert, gleiche Kritik wie bei den Preset-Icons) - dieselben Icons,
   die Flip Board bereits nutzt (siehe [data-theme-style="flip"]
   .mode-card__icon-svg weiter unten), hier nur groesser passend zur
   sonstigen Bold-Optik. .mode-card__icon (Emoji) bleibt im Markup fuer
   Classic/Bold-Kompatibilitaet, wird hier aber ausgeblendet. */
[data-theme-style="bold"] .mode-card__icon {
  display: none;
}

[data-theme-style="bold"] .mode-card__icon-svg {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--color-green);
  margin-bottom: 0.6rem;
}

[data-theme-style="bold"] .history-item__icon {
  font-size: 1.1rem;
}

[data-theme-style="bold"] .home-quick-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-amber);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  transition: transform 0.1s ease;
}

[data-theme-style="bold"] .home-quick-action:hover {
  transform: translateY(-2px);
}

[data-theme-style="bold"] .home-quick-action__icon {
  font-size: 2rem;
  line-height: 1;
}

[data-theme-style="bold"] .home-quick-action__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

[data-theme-style="bold"] .home-quick-action__title {
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-theme-style="bold"] .home-quick-action__hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ---- Spielerverwaltung: Spieler als farbige Chips/Karten ---- */

[data-theme-style="bold"] .player-list li {
  border-radius: var(--radius);
  border-left-width: 5px;
  border-left-style: solid;
  padding: 0.85rem 1.1rem;
}

/* Vollflaechige Farbtoenung statt nur linkem Rand (Mockup-Abgleich) - gleiche
   color-mix()-Technik wie .player-chip--checked weiter oben. */
[data-theme-style="bold"] .player-list li[data-player-color="1"] { border-left-color: var(--player-color-1); background: color-mix(in srgb, var(--player-color-1) 18%, var(--color-surface)); }
[data-theme-style="bold"] .player-list li[data-player-color="2"] { border-left-color: var(--player-color-2); background: color-mix(in srgb, var(--player-color-2) 18%, var(--color-surface)); }
[data-theme-style="bold"] .player-list li[data-player-color="3"] { border-left-color: var(--player-color-3); background: color-mix(in srgb, var(--player-color-3) 18%, var(--color-surface)); }
[data-theme-style="bold"] .player-list li[data-player-color="4"] { border-left-color: var(--player-color-4); background: color-mix(in srgb, var(--player-color-4) 18%, var(--color-surface)); }

/* ---- Verlauf: Filter-Tabs als gefuellte Pillen statt Underline-Tabs ---- */

[data-theme-style="bold"] .filter-tabs {
  border-bottom: none;
  gap: 0.6rem;
}

[data-theme-style="bold"] .filter-tabs__btn {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: var(--color-surface);
}

[data-theme-style="bold"] .filter-tabs__btn[aria-selected="true"] {
  background: var(--color-green);
  color: var(--color-on-accent);
  font-weight: 800;
}

/* ---- Verlauf: Spiele als staerker abgesetzte Karten ---- */

[data-theme-style="bold"] .history-item {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease;
}

[data-theme-style="bold"] .history-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-green-strong);
}

[data-theme-style="bold"] .badge {
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
}

/* ---- Setup-Seiten: Stepper, Gewinner-Karten, grosser Startbutton ---- */

[data-theme-style="bold"] .stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

[data-theme-style="bold"] .stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--color-green);
  color: var(--color-on-accent);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

[data-theme-style="bold"] .stepper__btn:active {
  transform: scale(0.94);
}

[data-theme-style="bold"] .stepper input {
  flex: 1;
  max-width: 140px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
}

[data-theme-style="bold"] .winner-card {
  flex: 1;
  min-width: 160px;
  justify-content: center;
  padding: 1.1rem;
  border-width: 2px;
  border-radius: var(--radius);
  font-size: 1rem;
}

[data-theme-style="bold"] #setup-form > button[type="submit"] {
  width: 100%;
  padding: 1.1rem;
  font-size: 1.05rem;
}

[data-theme-style="bold"] .setup-callout {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-amber);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---- Aktive Ansicht (3 Punkte-Modi): farbige Punktestand-Zeilen je Spieler,
   Rundenerfassung als Ein-Spieler-Sequenz, Verlauf/Korrektur dezent darunter.
   Spielerfarben (--player-color-1..4) durchgaengig auf Name/Punktzahl/
   Fortschritt statt nur duennem Rahmen - Farbe haengt an der Spieler-Position
   in state.players, nicht am aktuellen Rang (bleibt beim Ranguebergang stabil). ---- */

[data-theme-style="bold"] .standings-table {
  display: none;
}

[data-theme-style="bold"] .standings-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[data-theme-style="bold"] .standings-card {
  --row-color: var(--color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid var(--row-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--row-color) 12%, var(--color-surface));
}

[data-theme-style="bold"] .standings-card[data-player-color="1"] { --row-color: var(--player-color-1); }
[data-theme-style="bold"] .standings-card[data-player-color="2"] { --row-color: var(--player-color-2); }
[data-theme-style="bold"] .standings-card[data-player-color="3"] { --row-color: var(--player-color-3); }
[data-theme-style="bold"] .standings-card[data-player-color="4"] { --row-color: var(--player-color-4); }

[data-theme-style="bold"] .standings-card__rank {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-bg);
  font-weight: 800;
  font-size: 0.95rem;
}

[data-theme-style="bold"] .standings-card__info {
  flex: 1;
  min-width: 0;
}

[data-theme-style="bold"] .standings-card .standings-name span {
  color: var(--row-color);
  font-weight: 700;
}

[data-theme-style="bold"] .standings-card .mini-progress__fill {
  background: var(--row-color);
}

[data-theme-style="bold"] .standings-card__percent {
  flex-shrink: 0;
  min-width: 2.6rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

[data-theme-style="bold"] .standings-card__points {
  flex-shrink: 0;
  min-width: 3.2rem;
  text-align: right;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--row-color);
}

/* Rundenerfassung als frei anwaehlbarer Spieler-Picker statt Eingabe-Raster -
   ersetzt in Bold vollstaendig das Tippen/Schritt-Buttons-Grid aus Classic.
   Keine feste Reihenfolge/Automatik: die Spielreihenfolge am Tisch stimmt
   oft nicht mit der Spielerliste ueberein, daher bleiben alle Spieler als
   Chips frei anwaehlbar (auch zur Korrektur vor dem Speichern). */
[data-theme-style="bold"] #round-form-grid {
  display: none;
}

[data-theme-style="bold"] #round-entry-card #save-round-btn {
  width: 100%;
  padding: 1.1rem;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

[data-theme-style="bold"] .round-entry-sequence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

[data-theme-style="bold"] .round-picker__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

[data-theme-style="bold"] .round-picker__chip {
  --row-color: var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 5rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--row-color);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

[data-theme-style="bold"] .round-picker__chip[data-player-color="1"] { --row-color: var(--player-color-1); }
[data-theme-style="bold"] .round-picker__chip[data-player-color="2"] { --row-color: var(--player-color-2); }
[data-theme-style="bold"] .round-picker__chip[data-player-color="3"] { --row-color: var(--player-color-3); }
[data-theme-style="bold"] .round-picker__chip[data-player-color="4"] { --row-color: var(--player-color-4); }

[data-theme-style="bold"] .round-picker__chip--active {
  background: color-mix(in srgb, var(--row-color) 20%, var(--color-surface));
}

[data-theme-style="bold"] .round-picker__chip-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--row-color);
}

[data-theme-style="bold"] .round-picker__chip-value {
  font-size: 1.2rem;
  font-weight: 800;
}

[data-theme-style="bold"] .round-picker__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

[data-theme-style="bold"] .round-sequence__name {
  font-size: 1.3rem;
  font-weight: 800;
}

[data-theme-style="bold"] .round-sequence__stepper.round-steps {
  --round-steps-gap: 0.75rem;
  gap: var(--round-steps-gap);
}

[data-theme-style="bold"] .round-sequence__stepper .round-steps__btn {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

[data-theme-style="bold"] .round-sequence__stepper .round-steps__value {
  font-size: 2.2rem;
  min-width: 4rem;
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

[data-theme-style="bold"] .round-picker__type-input {
  width: 8rem;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
}

[data-theme-style="bold"] #round-entry-card ~ .card {
  opacity: 0.85;
  font-size: 0.92rem;
}

[data-theme-style="bold"] #round-entry-card ~ .card:hover {
  opacity: 1;
}

/* ---- RAGE-Aktivansicht: Mini-Stepper-Karten je Spieler statt Tabelle ---- */

[data-theme-style="bold"] #round-entry-table-wrap {
  display: none;
}

[data-theme-style="bold"] .rage-round-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-theme-style="bold"] .rage-round-card {
  --row-color: var(--color-border);
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--row-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--row-color) 12%, var(--color-surface));
}

[data-theme-style="bold"] .rage-round-card[data-player-color="1"] { --row-color: var(--player-color-1); }
[data-theme-style="bold"] .rage-round-card[data-player-color="2"] { --row-color: var(--player-color-2); }
[data-theme-style="bold"] .rage-round-card[data-player-color="3"] { --row-color: var(--player-color-3); }
[data-theme-style="bold"] .rage-round-card[data-player-color="4"] { --row-color: var(--player-color-4); }

[data-theme-style="bold"] .rage-round-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

[data-theme-style="bold"] .rage-round-card__name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--row-color);
}

[data-theme-style="bold"] .rage-round-card__preview {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-theme-style="bold"] .rage-round-card__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

[data-theme-style="bold"] .rage-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--color-bg);
}

[data-theme-style="bold"] .rage-stepper__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

[data-theme-style="bold"] .rage-stepper__control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

[data-theme-style="bold"] .rage-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: var(--color-green);
  color: var(--color-on-accent);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

[data-theme-style="bold"] .rage-stepper__btn:active {
  transform: scale(0.94);
}

[data-theme-style="bold"] .rage-stepper__value {
  min-width: 1.6rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
}

/* ---- Statistiken: Kopf-an-Kopf-Zeilen als angehobene Karten ---- */

[data-theme-style="bold"] .h2h-row {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem;
  transition: transform 0.1s ease;
}

[data-theme-style="bold"] .h2h-row:hover {
  transform: translateY(-2px);
}

[data-theme-style="bold"] .h2h-row__names {
  font-size: 1.05rem;
}

/* ---- Einstellungen: Kartenstil-Preset "Modern" (nur Bold) ---- */

[data-theme-style="bold"][data-card-style="modern"] .card,
[data-theme-style="bold"][data-card-style="modern"] .mode-card,
[data-theme-style="bold"][data-card-style="modern"] .history-item,
[data-theme-style="bold"][data-card-style="modern"] .standings-card,
[data-theme-style="bold"][data-card-style="modern"] .rage-round-card,
[data-theme-style="bold"][data-card-style="modern"] .h2h-row {
  border-radius: 26px;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   "Flip Board" Theme (drittes, waehlbares Aussehen - seit Einfuehrung Standard)
   ==========================================================================
   Aktiviert per [data-theme-style="flip"] auf <html> (js/theme.js). Folgt wie
   Classic dem System-Farbschema (nicht fest dunkel wie Bold), eigener,
   kleinerer Feldsatz (bg/surface/text/akzent, siehe includes/settings.php).
   Anzeigetafel-Konzept: flache, kantige Flaechen (kein Radius/Schatten-
   Ueberladen wie Bold), Haarlinien-Trennstriche statt Kartenschatten,
   Tabellen-Ziffern in Monospace, ein einzelner kuratierter Akzent statt
   4 Spielerfarben im Punktestand. Nur Header + Punktestand sitzen auf einer
   matten Glasflaeche (backdrop-filter), alles andere bleibt flach/matt.
   Ueberschreibt dieselben CSS-Variablen wie Classic/Bold, deshalb recolort
   sich die komplette bestehende Seiten-Struktur automatisch. */
:root[data-theme-style="flip"] {
  --color-bg: #edeef0;
  --color-surface: #ffffff;
  --color-text: #16181b;
  --color-text-muted: color-mix(in srgb, var(--color-text) 60%, var(--color-bg));
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);

  /* Amber/Bernstein als kuratierter Standard-Akzent (siehe
     includes/settings.php flip_accent_palette() fuer die 4 Alternativ-
     Presets) - "-strong" rein per CSS aus dem Akzent abgeleitet, keine
     eigene Einstellung noetig. Amber-Slot bewusst auf denselben Akzent
     gemappt statt einer zweiten, nicht konfigurierbaren Farbe. */
  --color-green: #c9761a;
  --color-green-strong: color-mix(in srgb, var(--color-green) 75%, black);
  --color-amber: var(--color-green);
  --color-amber-strong: var(--color-green-strong);

  --color-on-accent: #16181b;
  --color-focus: var(--color-green);
  --color-danger: #c0392b;

  /* Feste Spielerfarben (nicht ueber Akzent-Presets konfigurierbar, gleiches
     Prinzip wie Bolds --player-color-*) - nur fuer den Donut-Chart der
     Modus-Verteilung genutzt, im Punktestand haelt Flip Board bewusst nur
     die Fuehrungs-Zeile farblich fest (siehe .standings-card weiter unten). */
  --player-color-1: #c9761a;
  --player-color-2: #1f7a6c;
  --player-color-3: #b23a3a;
  --player-color-4: #6a4fb2;

  --radius: 6px;
  --shadow-card: 0 16px 32px -16px color-mix(in srgb, var(--color-text) 24%, transparent);

  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

[data-theme-style="flip"] h1,
[data-theme-style="flip"] h2,
[data-theme-style="flip"] h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

[data-theme-style="flip"] .btn {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
  font-size: 0.85rem;
}

/* Flip Board verzichtet bewusst auf die Karten-Box (Rand + Schatten) der
   anderen Themes - Abschnitte sitzen flach auf der Seite, nur durch
   Ueberschrift/Abstand getrennt (wie im Mockup). Ab dem zweiten Abschnitt
   (".section-spacing") uebernimmt eine Haarlinie oben die Trennfunktion
   statt einer eigenen Box. Elemente mit eigener Flaeche (z.B. die
   Punktestand-Glasflaeche in .standings-cards) behalten ihre Optik, da sie
   eigene Regeln haben und hier nicht betroffen sind. */
[data-theme-style="flip"] .card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

[data-theme-style="flip"] .card.section-spacing {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* Sticky Glas-Header (Blur) - einziger durchgaengiger "Glas"-Akzent, alles
   andere bleibt flach/matt. */
/* Bewusst NICHT sticky: .scoreboard (Punktestand, aktive Spielansicht) ist
   bereits themenuebergreifend sticky mit top:0 - ein zusaetzlich sticky
   Header wuerde mit gleichem top:0 kollidieren und den (per Klick
   einklappbaren) Punktestand optisch dahinter verschwinden lassen, statt
   ihn wie gewohnt oben stehen zu lassen. Die Glas-Optik bleibt trotzdem
   erhalten, nur ohne Fixierung beim Scrollen. */
[data-theme-style="flip"] .app-header {
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
}

[data-theme-style="flip"] .app-header__accent {
  display: none;
}

/* ---- Startseite: kompakte Icon-Kacheln in einem Raster statt Karten mit
   Fliesstext, "Wer faengt an?" als voller Balken statt Karte ---- */

[data-theme-style="flip"] .mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

[data-theme-style="flip"] .mode-card {
  border: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0.9rem;
}

[data-theme-style="flip"] .mode-card:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
}

[data-theme-style="flip"] .mode-card h2 {
  font-size: 0.9rem;
}

[data-theme-style="flip"] .mode-card p,
[data-theme-style="flip"] .mode-card__examples {
  display: none;
}

[data-theme-style="flip"] .mode-card__icon {
  display: none;
}

[data-theme-style="flip"] .mode-card__icon-svg {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--color-green);
  margin-bottom: 0.5rem;
}


.mode-grid-heading {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
}

[data-theme-style="flip"] .home-quick-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: none;
  padding: 1rem 1.25rem;
}

[data-theme-style="flip"] .home-quick-action__icon {
  font-size: 1.7rem;
  line-height: 1;
}

[data-theme-style="flip"] .home-quick-action__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

[data-theme-style="flip"] .home-quick-action__title {
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

[data-theme-style="flip"] .home-quick-action__hint {
  color: color-mix(in srgb, var(--color-bg) 65%, var(--color-text));
  font-size: 0.82rem;
}

/* ---- Spielerverwaltung: vollflaechig eingefaerbte Zeilen wie Bold, aber
   kantig statt abgerundet ---- */

[data-theme-style="flip"] .player-list li {
  border: none;
  border-left: 4px solid var(--color-border);
  border-radius: 0;
  padding: 0.75rem 1rem;
}

[data-theme-style="flip"] .player-list li[data-player-color="1"] { border-left-color: var(--player-color-1); background: color-mix(in srgb, var(--player-color-1) 14%, var(--color-surface)); }
[data-theme-style="flip"] .player-list li[data-player-color="2"] { border-left-color: var(--player-color-2); background: color-mix(in srgb, var(--player-color-2) 14%, var(--color-surface)); }
[data-theme-style="flip"] .player-list li[data-player-color="3"] { border-left-color: var(--player-color-3); background: color-mix(in srgb, var(--player-color-3) 14%, var(--color-surface)); }
[data-theme-style="flip"] .player-list li[data-player-color="4"] { border-left-color: var(--player-color-4); background: color-mix(in srgb, var(--player-color-4) 14%, var(--color-surface)); }

[data-theme-style="flip"] .player-avatar {
  border-radius: 3px;
}

/* ---- Verlauf: Filter-Tabs mit Unterstrich-Akzent, Spiele als Ledger-Zeilen
   statt Karten ---- */

[data-theme-style="flip"] .filter-tabs {
  gap: 0;
}

[data-theme-style="flip"] .filter-tabs__btn {
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme-style="flip"] .filter-tabs__btn[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

[data-theme-style="flip"] .history-item {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: 0.85rem 0.25rem;
}

[data-theme-style="flip"] .history-item:hover {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

[data-theme-style="flip"] .badge {
  border-radius: 3px;
}

/* ---- Setup-Seiten: kantiger Stepper, Auswahlkarten, Hinweiskasten ---- */

[data-theme-style="flip"] .stepper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

[data-theme-style="flip"] .stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

[data-theme-style="flip"] .stepper__btn:active {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
}

[data-theme-style="flip"] .stepper input {
  flex: 1;
  max-width: 120px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
}

[data-theme-style="flip"] .player-chip {
  border-radius: 4px;
}

[data-theme-style="flip"] .player-chip--checked {
  box-shadow: inset 0 -2px 0 var(--color-green);
}

[data-theme-style="flip"] .winner-card {
  flex: 1;
  min-width: 150px;
  justify-content: center;
  padding: 0.9rem;
  border-width: 1px;
  font-size: 0.95rem;
}

[data-theme-style="flip"] #setup-form > button[type="submit"] {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

[data-theme-style="flip"] .setup-callout {
  border-radius: 0;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-green);
  background: var(--color-surface);
  color: var(--color-text);
}

[data-theme-style="flip"] .advanced-options {
  border-radius: 4px;
}

[data-theme-style="flip"] .group-chip {
  border-radius: 4px;
}

[data-theme-style="flip"] .group-list__item {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}

/* ---- Aktive Ansicht (3 Punkte-Modi): Punktestand als Glas-Panel mit
   Fuehrungs-Zeile, Rundenerfassung als kombiniertes Tipp-/Stepper-Muster
   (siehe js/round-entry.js buildFlipRoundEntry() + #round-entry-flip) -
   ersetzt in Flip Board vollstaendig das Tippen/Schritt-Buttons-Grid UND
   die umschaltbare Ein-Spieler-Sequenz aus Classic/Bold: Tippen und
   Schritt-Buttons sind hier gleichzeitig sichtbar, kein Umschalt-Knopf
   noetig (siehe #round-entry-mode-btn unten). ---- */

[data-theme-style="flip"] .standings-table {
  display: none;
}

[data-theme-style="flip"] .standings-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

[data-theme-style="flip"] .standings-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  background: transparent;
}

[data-theme-style="flip"] .standings-card:last-child {
  border-bottom: none;
}

/* Nur die Fuehrungs-Zeile farblich hervorgehoben (eine kuratierte
   Akzentfarbe statt 4 Spielerfarben, anders als Bold) - .standings-cards
   ist bereits nach Rang sortiert, daher reicht :first-child. */
[data-theme-style="flip"] .standings-card:first-child {
  background: color-mix(in srgb, var(--color-green) 10%, transparent);
}

[data-theme-style="flip"] .standings-card:first-child .standings-card__rank {
  color: var(--color-green-strong);
  font-weight: 800;
}

[data-theme-style="flip"] .standings-card__rank {
  flex-shrink: 0;
  width: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}

[data-theme-style="flip"] .standings-card__info {
  flex: 1;
  min-width: 0;
}

[data-theme-style="flip"] .standings-card .standings-name span {
  font-weight: 600;
}

[data-theme-style="flip"] .standings-card__percent {
  display: none;
}

[data-theme-style="flip"] .standings-card__points {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

[data-theme-style="flip"] .mini-progress {
  height: 3px;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

[data-theme-style="flip"] .standings-card .mini-progress__fill {
  background: var(--color-green);
  border-radius: 0;
}

[data-theme-style="flip"] #round-form-grid,
[data-theme-style="flip"] .round-entry-sequence,
[data-theme-style="flip"] #round-entry-mode-btn {
  display: none;
}

[data-theme-style="flip"] .entry-list {
  display: block;
}

[data-theme-style="flip"] #round-entry-card #save-round-btn {
  width: 100%;
  padding: 0.95rem;
  font-size: 1rem;
}

[data-theme-style="flip"] .entry-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  padding: 0.75rem 0.1rem;
}

[data-theme-style="flip"] .entry-row:last-child {
  border-bottom: none;
}

[data-theme-style="flip"] .entry-row__name {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Wiederverwendet .round-steps/.round-steps__btn/.round-steps__value
   (gleiche symmetrische Zeile wie Classic/Bold, siehe js/round-entry.js),
   hier nur in der flachen/kantigen Flip-Optik statt runder Buttons. */
[data-theme-style="flip"] .entry-row .round-steps__btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 4px;
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 1rem;
}

[data-theme-style="flip"] .entry-row .round-steps__btn:active {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
}

[data-theme-style="flip"] .entry-row .round-steps__btn--plus {
  background: color-mix(in srgb, var(--color-green) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-green) 45%, var(--color-border));
}

[data-theme-style="flip"] .entry-row .round-steps__btn--minus {
  background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
}

[data-theme-style="flip"] .entry-row .round-steps__value {
  width: 2.75rem;
  min-width: 2.75rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border-radius: 4px;
  color: var(--color-text);
}

/* Auf schmalen Handy-Breiten (z.B. iPhone SE/mini) reicht der Platz sonst
   nicht fuer alle aktivierten Schrittweiten in einer Zeile - Buttons/Wert/
   Abstand hier nochmal etwas enger, bleiben aber weiterhin gut treffbar. */
@media (max-width: 400px) {
  [data-theme-style="flip"] .entry-row .round-steps {
    --round-steps-gap: 0.35rem;
    gap: var(--round-steps-gap);
  }

  [data-theme-style="flip"] .entry-row .round-steps__btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.35rem;
    font-size: 0.85rem;
  }

  [data-theme-style="flip"] .entry-row .round-steps__value {
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }
}

/* ---- RAGE-Aktivansicht: gleiches Glas-Punktestand-Muster (oben), Mini-
   Stepper-Karten flach/kantig statt farbiger Karten je Spieler ---- */

[data-theme-style="flip"] #round-entry-table-wrap {
  display: none;
}

[data-theme-style="flip"] .rage-round-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
}

[data-theme-style="flip"] .rage-round-card {
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0.85rem 1rem;
}

[data-theme-style="flip"] .rage-round-card:last-child {
  border-bottom: none;
}

[data-theme-style="flip"] .rage-round-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

[data-theme-style="flip"] .rage-round-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

[data-theme-style="flip"] .rage-round-card__preview {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
}

[data-theme-style="flip"] .rage-round-card__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

[data-theme-style="flip"] .rage-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

[data-theme-style="flip"] .rage-stepper__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

[data-theme-style="flip"] .rage-stepper__control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[data-theme-style="flip"] .rage-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

[data-theme-style="flip"] .rage-stepper__btn:active {
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
}

[data-theme-style="flip"] .rage-stepper__value {
  font-family: var(--font-mono);
  min-width: 1.4rem;
  text-align: center;
  font-weight: 700;
}

/* ---- Statistiken: Monospace-Ziffern, Kopf-an-Kopf-Zeilen als Ledger statt
   Karten ---- */

[data-theme-style="flip"] .kpi-tile__value {
  font-family: var(--font-mono);
  color: var(--color-text);
}

[data-theme-style="flip"] .h2h-row {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: 0.75rem 0.25rem;
}

[data-theme-style="flip"] .h2h-row:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

[data-theme-style="flip"] .stats-table tr.rank-first td:nth-child(2) {
  color: var(--color-green-strong);
}

/* ---- Einstellungen: Flip-Board Farbvorschlaege (5 Presets als Vorschau-
   Kacheln statt reiner Farbpunkte, siehe includes/settings.php
   flip_accent_palette()). Theme-unabhaengig (nicht [data-theme-style="flip"]
   gescoped) - der Abschnitt wird per JS ein-/ausgeblendet, unabhaengig vom
   gerade AKTIVEN Theme waehrend man in den Einstellungen blaettert, genau
   wie .accent-color-picker/.color-field-grid oben. ---- */

.flip-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

@media (min-width: 700px) {
  .flip-preset-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.flip-preset-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
}

.flip-preset-card input {
  position: absolute;
  opacity: 0;
}

.flip-preset-card:has(input:checked) {
  outline: 2px solid var(--flip-preset-color, var(--color-green));
  outline-offset: -1px;
}

.flip-preset-card:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.flip-preset-card__swatch {
  width: 100%;
  height: 30px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--flip-preset-color, var(--color-green)) 18%, var(--color-bg));
  display: grid;
  place-items: center;
}

.flip-preset-card__swatch::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--flip-preset-color, var(--color-green));
}

.flip-preset-card__label {
  font-size: 0.72rem;
  font-weight: 700;
}

/* Login-Seite (login.php) - eigenstaendig, kein Header/Nav, daher zentrierte
   Karte statt der ueblichen main-Breite. */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.login-card__logo {
  width: 40px;
  height: 40px;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.login-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
}

.login-card .form {
  text-align: left;
  margin-top: 1rem;
}

.login-card .btn {
  margin-top: 0.25rem;
}

.login-card__error {
  color: var(--color-danger);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Einstellungen: Reiter (settings.php) - rein optische Umschaltung, siehe
   js/settings.js. Horizontal scrollbar auf schmalen Bildschirmen, da 5
   Reiter auf iPhone-Breite nicht nebeneinander passen. */
.settings-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.settings-tabs__btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.65rem 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.settings-tabs__btn[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-green-strong);
}

.settings-tabs__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Bleibt beim Scrollen am unteren Bildschirmrand haengen, damit der
   Speichern-Button immer erreichbar ist, egal wie lang der aktive Reiter
   ist (siehe CLAUDE-Notiz zur "Reiter wechseln, Aenderung verlieren"-Sorge
   - technisch bleibt es EIN Formular, dieser Bereich liegt nur ausserhalb
   aller Reiter-Panels). */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 0;
  margin-top: 1.5rem;
}

/* "Meine Spiele" (settings.php Reiter "spiele", js/settings-presets.js) */
.preset-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.preset-item--dragging {
  opacity: 0.5;
}

.preset-item__drag-handle {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.4rem;
  cursor: grab;
  touch-action: none;
}

.preset-item__icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.preset-item__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.preset-item__favorite {
  background: none;
  border: none;
  color: var(--color-amber);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}

.preset-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preset-item__name {
  font-weight: 600;
}

.preset-item__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.preset-item__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.preset-item__move {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 2rem;
  height: 2rem;
  color: var(--color-text);
  cursor: pointer;
}

.preset-item__move:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Icon-Auswahl im Presets-Formular (settings.php, includes/settings.php::
   preset_icon_options()) - gleiches Auswahl-Prinzip wie .accent-color-picker,
   aber quadratische Kacheln mit einfarbigem SVG-Icon statt runder Farbpunkte. */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: 0.5rem;
}

.icon-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-text);
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  cursor: pointer;
  position: relative;
}

.icon-picker__option svg {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-picker__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.icon-picker__option:has(input:checked) {
  border-color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 15%, var(--color-surface));
  color: var(--color-green-strong);
}

.icon-picker__option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}