/*
 * app.css — gesamtes Styling
 *
 * Mobile first: entworfen fuer ein Smartphone im Hochformat, einhaendig bedienbar.
 * Primaeraktionen liegen unten (NFA-04), Tippflaechen sind mindestens 44px hoch.
 * Farben ausschliesslich ueber Design-Tokens, damit hell/dunkel an einer Stelle haengt.
 */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --border: #d9dce1;
  --text: #16181d;
  --text-dim: #62676f;
  --accent: #0f766e;
  --accent-soft: #d3ebe8;
  --accent-text: #ffffff;
  --danger: #b91c1c;
  --danger-soft: #fbe3e3;
  --warn: #b45309;
  --warn-soft: #fdf0d8;
  --good: #15803d;

  --radius: 14px;
  --radius-sm: 9px;
  --tap: 46px;
  --shadow: 0 1px 2px rgba(16, 18, 24, .07), 0 6px 18px rgba(16, 18, 24, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1d2026;
    --surface-2: #262a31;
    --border: #343941;
    --text: #eef0f3;
    --text-dim: #9aa1ab;
    --accent: #2dd4bf;
    --accent-soft: #1b3a38;
    --accent-text: #08201e;
    --danger: #f87171;
    --danger-soft: #3a1f1f;
    --warn: #fbbf24;
    --warn-soft: #38300f;
    --good: #4ade80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

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

[hidden] { display: none !important; }

/* ---------- Grundgerüst ---------- */

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#view {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
  min-height: 58px;
}

.topbar h1, .topbar h2 {
  font-size: 19px;
  font-weight: 650;
  margin: 0;
  flex: 1;
  letter-spacing: -.01em;
}

.topbar .sub {
  display: block;
  font-size: 13px;
  font-weight: 450;
  color: var(--text-dim);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger { color: var(--danger); border-color: var(--border); background: transparent; }

.btn-block { width: 100%; }

.btn-icon {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 19px;
  color: var(--text-dim);
}
.btn-icon:hover { background: var(--surface-2); }

.btn:disabled { opacity: .45; cursor: default; }

/* Aktionsleiste unten - haelt die Hauptaktion in Daumenreichweite */
.actionbar {
  position: sticky;
  bottom: 0;
  padding: 12px 0 calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex;
  gap: 10px;
}
.actionbar .btn { flex: 1; }

/* ---------- Karten und Listen ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.center { text-align: center; }

.hero {
  text-align: center;
  padding: 26px 0 18px;
}
.hero .logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.hero .logo span { color: var(--accent); }
.hero p { color: var(--text-dim); margin: 6px 0 0; font-size: 14px; }

/* ---------- Formulare ---------- */

input[type="text"], input[type="number"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--tap);
  padding: 0 12px;
  width: 100%;
}

input:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 19px;
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
}
.toggle .switch {
  flex: none;
  width: 50px; height: 29px;
  border-radius: 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  transition: background .15s;
}
.toggle .switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .15s, background .15s;
}
.toggle[aria-checked="true"] .switch { background: var(--accent-soft); border-color: var(--accent); }
.toggle[aria-checked="true"] .switch::after { transform: translateX(21px); background: var(--accent); }

/* ---------- Spielerliste im Setup ---------- */

.player-row { display: flex; align-items: center; gap: 8px; }
.player-row .num {
  flex: none;
  width: 26px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Punktetabelle ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

table.score th, table.score td {
  padding: 9px 8px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

table.score thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  position: sticky;
  top: 0;
  background: var(--surface);
}

table.score th.rowhead, table.score td.rowhead {
  text-align: left;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--surface);
  min-width: 74px;
}

table.score tbody tr.editable { cursor: pointer; }
table.score tbody tr.editable:hover td { background: var(--surface-2); }

table.score td.doubled {
  color: var(--warn);
  font-weight: 650;
}
table.score td.doubled::after {
  content: " ×2";
  font-size: 11px;
  opacity: .8;
}

table.score tfoot td {
  font-weight: 700;
  font-size: 17px;
  border-bottom: none;
  border-top: 2px solid var(--border);
  background: var(--surface);
}
table.score tfoot td.leader { color: var(--good); }
table.score tfoot td.rowhead { font-weight: 600; font-size: 13px; }

.ender-mark {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: 2px;
}

/* ---------- Rundeneingabe ---------- */

.entry {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.entry:last-of-type { border-bottom: none; }
.entry .name {
  flex: 1;
  min-width: 0;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry input {
  flex: none;
  width: 78px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.entry input.invalid { border-color: var(--danger); background: var(--danger-soft); }
.entry .hint { font-size: 12px; color: var(--text-dim); }

/* Rechenhilfe */
.pad {
  margin: 6px 0 12px;
  padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pad .pad-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 14px;
}
.pad .pad-sum {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pad .pad-count { font-size: 12px; color: var(--text-dim); }
.pad-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pad-grid button {
  min-height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pad-grid button:active { background: var(--accent-soft); }
.pad-grid button.neg { color: var(--good); }
.pad-actions { display: flex; gap: 7px; margin-top: 8px; }
.pad-actions .btn { flex: 1; min-height: 40px; }

/* Verdopplungs-Hinweis */
.notice {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.info { background: var(--accent-soft); color: var(--text); }
.notice.plain { background: var(--surface-2); color: var(--text-dim); }
.notice .icon { flex: none; }
.notice button {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  flex: none;
  color: inherit;
}

/* ---------- Ergebnis ---------- */

.winner {
  text-align: center;
  padding: 22px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.winner .crown { font-size: 38px; line-height: 1; }
.winner .who { font-size: 23px; font-weight: 700; margin: 8px 0 2px; }
.winner .score { color: var(--text-dim); font-size: 14px; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.rank-row:last-child { border-bottom: none; }
.rank-row .pos {
  flex: none;
  width: 25px;
  text-align: center;
  color: var(--text-dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rank-row .rname { flex: 1; font-weight: 550; }
.rank-row .rscore { font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-row.first .rname, .rank-row.first .rscore { color: var(--good); }

/* ---------- Verlauf ---------- */

.history-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 9px;
  text-align: left;
  box-shadow: var(--shadow);
}
.history-item .body { flex: 1; min-width: 0; }
.history-item .title { font-weight: 600; }
.history-item .meta { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.history-item .badge {
  flex: none;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-dim);
}
.history-item .badge.running { background: var(--accent-soft); color: var(--accent); }

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-dim);
}
.empty .big { font-size: 34px; margin-bottom: 10px; }

/* ---------- Overlay / Bestaetigung ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 50;
}
.dialog {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.dialog p { margin: 0 0 18px; }
.dialog .row { gap: 9px; }
.dialog .row .btn { flex: 1; }

/* ---------- Hinweis unten (Toast) ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: 90vw;
  background: var(--text);
  color: var(--bg);
  padding: 11px 17px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  z-index: 60;
}

/* ---------- Breiter Bildschirm ---------- */

@media (min-width: 720px) {
  body { padding: 18px 0; }
  #app {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    min-height: calc(100vh - 36px);
    overflow: hidden;
  }
  .screen { padding: 0 22px 22px; }
}

/* Kompakte Tabelle ab vier Spielern: auf einem 360px-Telefon sollen alle Spalten
   ohne seitliches Scrollen sichtbar sein. */
table.score.compact th, table.score.compact td { padding: 8px 5px; font-size: 15px; }
table.score.compact thead th { font-size: 12px; }
table.score.compact th.rowhead, table.score.compact td.rowhead {
  min-width: 30px;
  font-size: 12px;
  padding-right: 4px;
}
table.score.compact tfoot td { font-size: 16px; }
table.score.compact td.doubled::after { content: "×2"; font-size: 10px; margin-left: 1px; }

/* Legende unter der Tabelle */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 9px 2px 0;
  font-size: 13px;
  color: var(--text-dim);
}
.legend .key { color: var(--accent); font-weight: 600; }
.legend .key.dbl { color: var(--warn); }

/* Lange Namen kappen, damit eine Spalte die Tabelle nicht sprengt. */
table.score thead th:not(.rowhead) {
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Siegesanimation ----------
   Nur auf dem Ergebnisbildschirm (Klasse .celebrate). Reine CSS-Animation, keine Bibliothek.
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt nichts davon zu sehen -
   siehe der Block am Ende dieses Abschnitts. */

.celebrate .winner {
  animation: winner-pop .45s cubic-bezier(.2, .8, .3, 1.2) both;
}
.celebrate .winner .crown {
  animation: crown-bounce .85s .12s ease-out both;
  display: inline-block;
}
.celebrate .winner .who {
  animation: fade-up .45s .22s ease-out both;
}
.celebrate .winner .score {
  animation: fade-up .45s .32s ease-out both;
}
/* Platzierungen laufen gestaffelt ein, von oben nach unten. */
.celebrate .rank-row {
  animation: fade-up .3s ease-out both;
  animation-delay: calc(var(--i, 0) * 70ms + 380ms);
}

@keyframes winner-pop {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: none; }
}

@keyframes crown-bounce {
  0%   { opacity: 0; transform: translateY(-16px) scale(.6) rotate(-12deg); }
  55%  { opacity: 1; transform: translateY(5px) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* Konfetti: liegt als eigene Ebene über allem, faengt aber keine Klicks ab. */
#celebration {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 45;
}
#celebration i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: 2px;
  will-change: transform;
  animation: confetti-fall var(--dur) var(--delay) cubic-bezier(.25, .6, .6, 1) forwards;
}
#celebration i:nth-child(3n) { border-radius: 50%; }

@keyframes confetti-fall {
  0%   { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0deg); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 104vh, 0) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate .winner,
  .celebrate .winner .crown,
  .celebrate .winner .who,
  .celebrate .winner .score,
  .celebrate .rank-row { animation: none; }
  #celebration { display: none; }
}

/* ---------- Easter Egg: koeniglicher Sieg ----------
   Gewinnt eine Spielerin mit dem Namen aus EASTER_EGG_NAME (js/ui.js), tritt an die Stelle
   des Konfettis ein Feuerwerk und an die Stelle des Pokals eine Sternenkrone.
   Auch hier gilt: bei reduzierter Bewegung bleibt die Krone, die Bewegung entfaellt. */

.winner.royal {
  background: linear-gradient(158deg, var(--accent-soft) 0%, rgba(251, 191, 36, .22) 100%);
}

.crown-royal { white-space: nowrap; }
.crown-royal .sparkle {
  display: inline-block;
  font-size: .62em;
  vertical-align: .35em;
  opacity: .45;
}
.celebrate .crown-royal .sparkle {
  animation: twinkle 1.5s ease-in-out 6 both;
}
/* Der zweite Funke blinkt versetzt, sonst wirkt es mechanisch. */
.celebrate .crown-royal .sparkle:last-child { animation-delay: .75s; }

.celebrate .winner.royal .who {
  text-shadow: 0 0 18px rgba(251, 191, 36, .6);
}

@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.85) rotate(-8deg); }
  50%      { opacity: 1;   transform: scale(1.25) rotate(8deg); }
}

/* Feuerwerk: Funken schiessen aus einem Zentrum nach aussen und verglimmen.
   Zentrum, Richtung, Weite, Farbe und Zeit kommen je Funke als CSS-Variablen. */
#celebration.fireworks i {
  left: var(--cx);
  top: var(--cy);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 7px 1px var(--c);
  animation: spark-burst var(--dur) var(--delay) cubic-bezier(.12, .62, .3, 1) forwards;
}
#celebration.fireworks i:nth-child(7n) { border-radius: 1px; }

/* Die Funken bleiben bis kurz vor Schluss hell und verglimmen erst dann. Blenden sie
   frueher aus, sieht die Salve nur nach einem kleinen Bommel in der Mitte aus, weil man
   die Ausdehnung nicht mehr wahrnimmt. */
@keyframes spark-burst {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.3); }
  10%  { opacity: 1;   transform: translate3d(calc(var(--dx) * .15), calc(var(--dy) * .10), 0) scale(1.2); }
  68%  { opacity: .95; transform: translate3d(calc(var(--dx) * .78), calc(var(--dy) * .72), 0) scale(.85); }
  100% { opacity: 0;   transform: translate3d(var(--dx), var(--dy), 0) scale(.3); }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate .crown-royal .sparkle { animation: none; }
}

/* ---------- Regelseite ----------
   Aufklappbare Abschnitte ueber <details>/<summary>: kein JavaScript, mit Tastatur und
   Screenreader bedienbar. */

.rules { display: flex; flex-direction: column; gap: 8px; }

.rule {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rule > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;              /* Standarddreieck weg, wir zeichnen selbst */
}
.rule > summary::-webkit-details-marker { display: none; }
.rule > summary:hover { background: var(--surface-2); }
.rule > summary > span:first-child { flex: 1; }

.rule > summary .marker {
  flex: none;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease;
}
.rule[open] > summary .marker { transform: rotate(90deg); }
.rule[open] > summary { border-bottom: 1px solid var(--border); }

.rule-body { padding: 4px 14px 14px; }

.rule-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rule-body li {
  position: relative;
  padding: 6px 0 6px 16px;
  font-size: 15px;
  line-height: 1.5;
}
/* Eigener Punkt statt Listenzeichen: sitzt sauber auf der ersten Zeile. */
.rule-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.rule-body strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .rule > summary .marker { transition: none; }
}