/* Spielblock – ein Stylesheet, keine Abhängigkeiten. Mobile zuerst. */

:root {
  color-scheme: light dark;
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --surface-alt: #f7f4ec;
  --line: #ddd6c8;
  --text: #23201b;
  --muted: #6f685c;
  --accent: #2f6f4f;
  --accent-ink: #ffffff;
  --accent-soft: #dff0e5;
  --danger: #a2382c;
  --warn-bg: #fdf3d8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(35, 32, 27, .08), 0 8px 24px rgba(35, 32, 27, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a;
    --surface: #1e2124;
    --surface-alt: #24282c;
    --line: #343a40;
    --text: #e9e6e0;
    --muted: #9aa0a6;
    --accent: #6cc39a;
    --accent-ink: #10231a;
    --accent-soft: #21362c;
    --danger: #e3705f;
    --warn-bg: #3a3320;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

/* ---------- Kopfzeile ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: -.01em;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.topbar nav a { white-space: nowrap; }

@media (max-width: 30rem) {
  .brand span, .hide-narrow { display: none; }
  .topbar { padding: .6rem .7rem; }
  .topbar nav a { padding: .35rem .4rem; font-size: .9rem; }
  .topbar nav a.btn::before { content: "+ "; }
}

.topbar nav a {
  padding: .4rem .6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
  font-size: .95rem;
}

/* Zustand des Abgleichs -- zurueckhaltend, solange alles seinen Gang geht,
   und deutlich, sobald etwas wartet. */
.abgleich {
  font-size: .8rem;
  color: var(--muted);
  padding: .25rem .5rem;
  border-radius: 8px;
  white-space: nowrap;
  margin-left: auto;
  margin-right: .4rem;
}

.abgleich-offen { background: var(--warn-bg); color: var(--text); }
.abgleich-fehler { background: var(--warn-bg); color: var(--danger); }

@media (max-width: 30rem) {
  .abgleich { font-size: .72rem; padding: .2rem .35rem; margin-right: .2rem; }
  .abgleich-still { display: none; }
}

.topbar nav a:hover { background: var(--surface-alt); color: var(--text); }
.topbar nav a.btn { color: var(--accent-ink); }

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

.footer {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  padding: 0 1rem 2rem;
}

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

h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }

.section-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 .6rem;
}

.page-head, .game-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.panel-flush { padding: 1rem 0 0; }
.panel-flush .section-title { padding: 0 1rem; }
.panel-danger summary, .panel-danger .btn-danger { color: var(--danger); }

.panel-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
}

.panel-collapsible[open] summary { margin-bottom: .75rem; }

.stack > * + * { margin-top: 1rem; }

.note {
  color: var(--muted);
  font-style: italic;
  margin: -.5rem 0 1rem;
}

.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }

.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

.badge-high, .badge-low { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-done { background: transparent; }

.banner {
  background: var(--warn-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

.banner-win { background: var(--accent-soft); border-color: transparent; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }

.message {
  padding: .6rem .9rem;
  border-radius: 10px;
  background: var(--accent-soft);
  margin-bottom: .5rem;
}

.message-error { background: var(--warn-bg); color: var(--danger); }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.empty .btn { margin-top: .5rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--surface-alt); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-sm { padding: .35rem .6rem; font-size: .85rem; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-danger { border-color: var(--danger); }
.btn-icon { padding: .35rem .55rem; border-color: transparent; background: transparent; color: var(--muted); font-size: 1.1rem; }

.form-actions { display: flex; gap: .5rem; justify-content: flex-end; }

/* ---------- Formularfelder ---------- */

.field { display: block; }
.field + .field { margin-top: .75rem; }
.field-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field-hint { color: var(--muted); font-size: .85rem; margin: .2rem 0 .6rem; }

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
}

input:focus-visible, textarea:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

ul.errorlist {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: .85rem;
}

.inline-form { display: flex; gap: .5rem; align-items: center; }
.field-inline { display: flex; align-items: center; gap: .5rem; }
.field-inline .field-label { margin: 0; white-space: nowrap; }

.choice-cards { display: grid; gap: .6rem; }

@media (min-width: 34rem) {
  .choice-cards { grid-template-columns: 1fr 1fr; }
}

.choice-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt);
  cursor: pointer;
}

.choice-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice-icon { font-size: 1.4rem; color: var(--accent); }
.choice-text { display: flex; flex-direction: column; }
.choice-text small { color: var(--muted); }

.player-rows { display: grid; gap: .5rem; margin-bottom: .6rem; }

.player-row { display: flex; align-items: center; gap: .5rem; }

.player-row-index {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}

.round-fields { display: grid; gap: .75rem; }

@media (min-width: 34rem) {
  .round-fields { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .round-fields .field + .field { margin-top: 0; }
}

/* ---------- Spielliste ---------- */

.card-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .75rem;
}

@media (min-width: 40rem) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}

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

.card-done { opacity: .8; }

.card-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  text-decoration: none;
}

.card-title { font-weight: 700; }
.card-players { margin: .4rem 0 0; font-size: .95rem; }
.card-meta { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }

/* ---------- Zwischenstand ---------- */

.standings { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.standing {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  background: var(--surface-alt);
}

.standing-lead { background: var(--accent-soft); }

.standing-rank {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .8rem;
  font-weight: 700;
}

.standing-lead .standing-rank { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.standing-name { font-weight: 600; }
.standing-total { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; }

/* ---------- Blockansicht ---------- */

.table-scroll { overflow-x: auto; }

.scoreboard {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.scoreboard th, .scoreboard td {
  padding: .5rem .7rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.scoreboard thead th {
  text-align: right;
  font-size: .85rem;
  color: var(--muted);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.scoreboard .col-round, .scoreboard .col-name {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  z-index: 1;
}

.scoreboard .col-round a { text-decoration: none; }
.scoreboard .col-round a:hover { text-decoration: underline; }
.scoreboard .col-round small { display: block; font-weight: 400; font-size: .75rem; }

.cell-best { color: var(--accent); font-weight: 700; }

.scoreboard thead th.col-lead { color: var(--accent); }
.scoreboard thead th.col-lead::after { content: " 🏆"; }

.row-empty td { text-align: center; color: var(--muted); padding: 1.5rem; }

.row-total th, .row-total td {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 2px solid var(--text);
  border-bottom: none;
  background: var(--surface-alt);
}

.row-total .col-round { background: var(--surface-alt); }

.row-input td { padding: .4rem .35rem; }
.row-input input { width: 5rem; text-align: right; padding: .45rem .5rem; }
.row-input .col-round { background: var(--surface); }

.entry-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  border-radius: 0 0 var(--radius) var(--radius);
}

.participant-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }

.participant-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .6rem;
  background: var(--surface-alt);
  border-radius: 8px;
}

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

/* ---------- Spiele, Spieler, Statistik ---------- */

.breadcrumb {
  margin: 0 0 .2rem;
  font-size: .85rem;
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

.chips-preset { margin-bottom: .75rem; }
.chips-label { color: var(--muted); font-size: .85rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
}

.chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.chip span { color: var(--muted); font-size: .8rem; }
.chip-ghost { border-style: dashed; }

.card-game { color: var(--muted); }

.new-game { margin-top: .75rem; }
.new-game[hidden] { display: none; }

.panel-hint { padding: 0 1rem 1rem; margin: .5rem 0 0; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  text-align: center;
}

.tile-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.tile-label { color: var(--muted); font-size: .8rem; }

.constellations { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.constellation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  background: var(--surface-alt);
  border-radius: 10px;
}

.constellation-names { margin: 0; font-weight: 600; }
.constellation .card-meta { margin-top: .15rem; }

.cell-text { text-align: right; color: var(--muted); }

.scoreboard .col-name a, .standings a { text-decoration: none; }
.scoreboard .col-name a:hover, .standings a:hover { text-decoration: underline; }

/* ---------- htmx ---------- */

/* Die Meldungsliste steht immer im DOM (Swap-Ziel), soll aber leer nichts kosten. */
.messages:empty { display: none; margin: 0; }

/* Laufende Anfrage: der ausgelöste Button wird ruhig gestellt. */
.htmx-request.btn, .htmx-request .btn[type="submit"] { opacity: .6; cursor: progress; }
button[disabled] { opacity: .6; cursor: progress; }

/* Zeile im Bearbeiten-Modus hebt sich vom Rest des Blocks ab. */
.row-editing td { padding: .4rem .35rem; background: var(--accent-soft); }
.row-editing .col-round { background: var(--accent-soft); color: var(--text); }
.row-editing input { width: 5rem; text-align: right; padding: .45rem .5rem; }

.entry-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Handy: Der Weg zur Eingabezeile soll kurz sein ---------- */

/* Bedienelemente sind Fingerziele, keine Mausziele. */
.btn, .chip, .topbar nav a, summary, .sign-toggle { touch-action: manipulation; }

@media (pointer: coarse) {
  .btn, .topbar nav a { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .standing { min-height: 44px; }
  .participant-list li { min-height: 44px; }
  .card-link { padding: .15rem 0; }
}

/* Randbereiche von iPhone-Notch und Home-Indicator freihalten. */
.topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.page { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }

/* Ein Schatten an der Kante zeigt, dass rechts noch Spalten stehen. */
.table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2rem 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left center / 1rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right center / 1rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
  overscroll-behavior-x: contain;
}

@media (max-width: 34rem) {
  /* Kopf zusammenrücken: Titel kleiner, Aktionen in einer Reihe. */
  h1 { font-size: 1.25rem; }
  .game-head { gap: .6rem; margin-bottom: .9rem; }
  .game-head .badges { margin-top: .35rem; }
  .head-actions { width: 100%; }
  .head-actions form, .head-actions > .btn { flex: 1 1 0; }
  .head-actions .btn { width: 100%; }
  .panel { padding: .75rem; }
  .panel-flush { padding: .75rem 0 0; }
  .panel-flush .section-title { padding: 0 .75rem; }
  .panel-hint { padding: 0 .75rem .75rem; }

  /* Zwischenstand als Chip-Reihe -- spart über 100 Pixel vor der Eingabe. */
  .standings { display: flex; flex-wrap: wrap; gap: .35rem; }
  .standing {
    grid-template-columns: auto auto auto;
    gap: .4rem;
    padding: .3rem .5rem .3rem .3rem;
  }
  .standing-total { font-size: 1.05rem; }
  .entry-bar { padding: .75rem; }
  .entry-bar .field-inline { flex: 1 1 8rem; }
}

/* ---------- Vorzeichen umschalten (Minuspunkte auf dem Zifferblock) ---------- */

.sign-toggle {
  display: none;
  width: 100%;
  margin-top: .25rem;
  padding: .3rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--muted);
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}

/* Überall dort, wo ein Touchscreen im Spiel ist: Die Ziffern-Tastatur der
   Handys und Tablets kennt kein Minuszeichen. `any-pointer` statt `pointer`,
   damit der Knopf auch auf Touch-Notebooks und Tablets mit Tastatur da ist --
   ihn zu sehen schadet nicht, ihn zu vermissen schon. */
@media (any-pointer: coarse) {
  .sign-toggle { display: block; min-height: 36px; }
}

/* Am Handy zählt der kurze Weg zur Eingabe: erst der Block, dann der Stand.
   Die Reihenfolge im Dokument bleibt unverändert (Vorlesereihenfolge). */
#match-board { display: flex; flex-direction: column; }
#match-board > .banner { order: 0; }
#match-board > .panel-standings { order: 1; }
#match-board > .panel-scoreboard { order: 2; }

@media (max-width: 34rem) {
  #match-board > .panel-standings { order: 3; margin-bottom: 0; }
  #match-board > .panel-scoreboard { order: 1; }
}

/* Fingerfreundliche Ziele in Tabelle, Rangliste und Karten. */
.scoreboard .col-round a { display: inline-block; padding: .35rem .5rem; margin: -.35rem -.5rem; }
.standing-name { padding-block: .5rem; }
.card-game { display: inline-block; padding: .2rem 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }

@media (pointer: coarse) {
  .row-input input, .row-editing input { min-height: 44px; }
  .scoreboard .col-round a { padding: .6rem .7rem; margin: -.6rem -.7rem; }
}

.brand { padding-inline: .25rem; }
.breadcrumb a { display: inline-block; padding-block: .35rem; }

/* Sehr schmale Geräte (iPhone SE & Co.): Die Kopfzeile muss in 320 px passen. */
@media (max-width: 22rem) {
  .topbar { gap: .35rem; padding-inline: .5rem; }
  .topbar nav a { font-size: .85rem; padding: .3rem .35rem; }
}

/* Sicherheitsnetz für große Systemschrift: die Leiste scrollt, die Seite nicht. */
.topbar nav {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topbar nav::-webkit-scrollbar { display: none; }