/* ============================================================
   Pokertimer — Grundlagen: Farben, Typografie, Bausteine

   Dunkel als Vorgabe, weil das Ding im abgedunkelten Raum neben
   dem Tisch steht und oft auf einen Beamer geht. Alle Farben als
   Variablen, damit der Beamer-Screen dieselben Werte erbt.
   ============================================================ */

:root {
  /* Flaechen */
  --bg:          #0a0d12;
  --surface:     #131820;
  --surface-2:   #1b222d;
  --surface-3:   #232c39;
  --border:      #2a3240;
  --border-soft: #1e2531;

  /* Schrift */
  --text:        #e8edf5;
  --text-dim:    #a7b4c8;
  --text-mute:   #7a8798;

  /* Akzente */
  --gold:        #f0b429;
  --gold-dim:    #a87b16;
  --green:       #2fa36b;
  --green-dim:   #1c6f47;
  --red:         #e5484d;
  --red-dim:     #9b2c30;
  --blue:        #4c8dff;
  --violet:      #9b7cf0;

  /* Rollen */
  --accent:      var(--gold);
  --ok:          var(--green);
  --danger:      var(--red);

  /* Abstaende */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow:    0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.6);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --nav-h: 56px;
}

/* Helles Thema fuer Raeume, in denen Dunkel schlecht lesbar ist */
:root[data-theme="light"] {
  --bg:          #f2f4f8;
  --surface:     #ffffff;
  --surface-2:   #eef1f6;
  --surface-3:   #e2e7ef;
  --border:      #cbd3e0;
  --border-soft: #dde3ec;
  --text:        #10151d;
  --text-dim:    #46536a;
  --text-mute:   #6b7a90;
  --gold:        #a8760a;
  --shadow:      0 4px 20px rgba(20,30,50,.12);
  --shadow-lg:   0 12px 48px rgba(20,30,50,.18);
}

/* ---------- Reset ---------- */

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* die App scrollt in Panels, nicht als Seite */
  overscroll-behavior: none;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 650; line-height: 1.2; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 19px; letter-spacing: -.01em; }
h3 { font-size: 15px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
p  { margin: 0 0 var(--sp-3); }

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

::selection { background: var(--gold); color: #10151d; }

/* Sichtbarer Fokus — das Ding wird oft nur mit der Tastatur bedient */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Schlanke Scrollbalken, damit lange Spielerlisten nicht klobig wirken */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a465a; }

/* ---------- Zahlen ---------- */

.num, .tabular, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Schaltflaechen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: #3a465a; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn.primary  { background: var(--gold); border-color: var(--gold); color: #10151d; }
.btn.primary:hover:not(:disabled) { background: #ffc63f; border-color: #ffc63f; }
.btn.success  { background: var(--green); border-color: var(--green); color: #fff; }
.btn.success:hover:not(:disabled) { background: #38bd7d; }
.btn.danger   { background: transparent; border-color: var(--red-dim); color: #ff7b7f; }
.btn.danger:hover:not(:disabled) { background: rgba(229,72,77,.14); border-color: var(--red); }
.btn.ghost    { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn.sm  { padding: 4px 9px; min-height: 28px; font-size: 13px; }
.btn.lg  { padding: 12px 22px; min-height: 46px; font-size: 16px; }
.btn.icon { padding: 0; width: 32px; min-height: 32px; }
.btn.icon.sm { width: 26px; min-height: 26px; }
.btn.block { width: 100%; }

.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- Eingabefelder ---------- */

input[type="text"], input[type="number"], input[type="search"],
input[type="time"], input[type="date"], select, textarea {
  padding: 7px 10px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  width: 100%;
}
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea {
  background: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { min-height: 70px; resize: vertical; line-height: 1.45; }

input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px; min-height: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-3); }
.field > label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.field .hint { font-size: 12px; color: var(--text-mute); }
.field.inline { flex-direction: row; align-items: center; gap: var(--sp-2); }
.field.inline > label { margin: 0; }

.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 150px; margin-bottom: 0; }

.check-line { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; padding: 4px 0; }
.check-line span { font-size: 14px; }

/* ---------- Karten und Panels ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  /* Steht eine Karte in einem Raster (die Auswertung legt ihre Karten so
     aus), erbt sie min-width:auto und reicht die Min-Content-Breite ihrer
     Tabelle nach aussen durch — die ganze Ansicht rollte dadurch auf dem
     Handy waagrecht weg, Kopf- und Aktionsleiste inklusive. Mit 0 rollt
     wieder das .tbl-wrap in sich selbst, wofuer es gebaut ist. Auf Laptop
     und Beamer aendert das nichts: dort wird die Karte nie unter ihre
     Min-Content-Breite gedrueckt. */
  min-width: 0;
}
.card.pad-0 { padding: 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.card-head h2, .card-head h3 { margin: 0; }

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

table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
  text-align: left; padding: 8px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
table.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.right, table.tbl th.right { text-align: right; }
table.tbl td.center, table.tbl th.center { text-align: center; }
table.tbl td.actions { text-align: right; white-space: nowrap; width: 1%; }
table.tbl tr.dim td { opacity: .45; }
table.tbl tr.selected td { background: rgba(240,180,41,.1); }

.tbl-wrap { overflow: auto; max-height: 100%; }

/* ---------- Kleinteile ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-dim);
  white-space: nowrap;
}
.badge.gold   { background: rgba(240,180,41,.16); color: var(--gold); }
.badge.green  { background: rgba(47,163,107,.16); color: #56d197; }
.badge.red    { background: rgba(229,72,77,.16);  color: #ff7b7f; }
.badge.blue   { background: rgba(76,141,255,.16); color: #8db4ff; }
.badge.violet { background: rgba(155,124,240,.16); color: #b9a2ff; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px;
}

.pill-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pill-group button {
  padding: 6px 12px; border: none; background: var(--surface-2); color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-right: 1px solid var(--border);
}
.pill-group button:last-child { border-right: none; }
.pill-group button.on { background: var(--gold); color: #10151d; }
.pill-group button:hover:not(.on) { background: var(--surface-3); color: var(--text); }

.muted { color: var(--text-mute); }
.dim   { color: var(--text-dim); }
.small { font-size: 12.5px; }
.mono  { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.grow  { flex: 1; }
.center-text { text-align: center; }
.hidden { display: none !important; }

hr.sep { border: none; border-top: 1px solid var(--border-soft); margin: var(--sp-4) 0; }

/* Leerzustand — kommt oft vor (keine Struktur, keine Spieler, kein Turnier) */
.empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--text-mute);
}
.empty .empty-title { font-size: 16px; color: var(--text-dim); font-weight: 600; margin-bottom: var(--sp-2); }
.empty .btn { margin-top: var(--sp-4); }

/* Hinweisbalken */
.note {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--blue);
  background: rgba(76,141,255,.09);
  font-size: 13.5px;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}
.note.warn   { border-color: var(--gold); background: rgba(240,180,41,.09); }
.note.danger { border-color: var(--red);  background: rgba(229,72,77,.09); }
.note.ok     { border-color: var(--green); background: rgba(47,163,107,.09); }
.note strong { color: var(--text); }

/* ---------- Kennzahlen ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
}
.stat {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); font-weight: 700; }
.stat .value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.15; }
.stat .sub   { font-size: 11.5px; color: var(--text-mute); }
.stat.accent .value { color: var(--gold); }

/* ---------- Dialoge ---------- */
/* Eigene Dialoge statt confirm()/prompt(): die Browser-Dialoge blockieren
   den Timer-Tick und sehen im Vollbild kaputt aus. */

.modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,8,12,.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: 88vh;
  /* dvh statt vh: auf dem Handy waechst und schrumpft der Ausschnitt mit
     der Adressleiste, vh kennt nur den grossen Zustand — der Dialog stand
     dann unten aus dem Bild heraus. Aeltere Browser ignorieren die zweite
     Zeile und behalten die erste. */
  max-height: 88dvh;
  display: flex; flex-direction: column;
  animation: pop .14s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop { from { transform: scale(.96) translateY(8px); opacity: 0; } }

.modal.wide  { width: min(880px, 100%); }
.modal.narrow { width: min(420px, 100%); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-soft);
}
.modal-head h2 { margin: 0; }
.modal-body { padding: var(--sp-5); overflow: auto; flex: 1; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-soft);
}
.modal-foot .left { margin-right: auto; }

/* Handy: der Dialog nimmt fast den ganzen Schirm und dockt oben an, statt
   mittig zu schweben. Gerollt wird nur der Rumpf — Kopf und Fusszeile
   bleiben stehen, weil in der Fusszeile der Knopf sitzt, auf den es
   ankommt. Die 24 px Innenabstand liessen von 390 px nur 293 px Inhalt. */
@media (max-width: 600px) {
  .modal-back {
    align-items: flex-start;
    padding: var(--sp-2);
    padding-top: max(var(--sp-2), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom, 0px));
  }
  .modal, .modal.wide, .modal.narrow { width: 100%; }
  .modal-head, .modal-foot { padding: var(--sp-3) var(--sp-4); }
  .modal-body { padding: var(--sp-4); }

  /* Sobald ein Textfeld im Dialog den Fokus hat, steht auf dem Handy die
     Bildschirmtastatur im Bild. Sie deckt rund die untere Haelfte ab, und
     weder vh noch dvh schrumpfen deswegen — iOS verschiebt dabei nur den
     sichtbaren Ausschnitt, der fixierte Hintergrund bleibt, wo er ist. Die
     Fusszeile mit "Abbrechen"/"Eintragen" lag deshalb unter der Tastatur
     und war nicht erreichbar. Also zieht sich der Dialog jetzt selbst auf
     die obere Bildschirmhaelfte zusammen; der Rumpf rollt dafuer.
     ui.js setzt den Fokus beim Oeffnen von sich aus ins erste Feld, die
     Regel greift also im selben Moment wie die Tastatur. Kaesten und
     Schalter sind ausgenommen — die holen keine Tastatur ins Bild.
     Browser ohne :has() ignorieren die Regel und verhalten sich wie
     bisher. */
  .modal:has(textarea:focus, select:focus,
             input:not([type="checkbox"]):not([type="radio"]):focus) {
    max-height: 52dvh;
  }
}

/* ---------- Kurzmeldungen ---------- */

#toasts {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px; font-weight: 550;
  box-shadow: var(--shadow);
  animation: toast-in .18s ease-out;
  max-width: 80vw;
}
.toast.ok     { border-color: var(--green-dim); color: #7ee0ae; }
.toast.err    { border-color: var(--red-dim);   color: #ff9b9e; }
.toast.info   { border-color: var(--blue); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }