/* ============================================================
   Pokertimer — die Uhr

   Wird aus mehreren Metern Entfernung gelesen und laeuft oft auf
   einem Beamer. Deshalb alle Groessen in vmin: die Anzeige fuellt
   jeden Bildschirm gleich gut, vom Laptop bis zur Leinwand.
   Dieselbe Datei benutzt auch das Beamer-Fenster (display.html).
   ============================================================ */

.clockview {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(240,180,41,.06), transparent 60%),
    var(--bg);
}

/* Fortschrittsbalken ganz oben — die eine Information, die man
   auch aus dem Augenwinkel erfasst. */
.clock-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--surface-2);
  z-index: 3;
}
.clock-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  transition: width .9s linear, background-color .3s;
}
.clockview.warn  .clock-progress > i { background: var(--red); }
.clockview.break .clock-progress > i { background: var(--blue); }

.clock-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 22%);
  gap: clamp(12px, 2vmin, 32px);
  padding: clamp(14px, 2.6vmin, 40px);
  padding-top: clamp(20px, 3vmin, 46px);
  min-height: 0;
}
.clockview.no-side .clock-main { grid-template-columns: 1fr; }

.clock-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
  text-align: center;
}

/* ---------- Kopfzeile: Level / Pause ---------- */

.clock-level {
  font-size: clamp(15px, 3.4vmin, 46px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1;
  margin-bottom: clamp(6px, 1.4vmin, 20px);
}
.clockview.break .clock-level { color: var(--blue); }
.clock-level .lv-note {
  display: block;
  font-size: .5em; letter-spacing: .08em; color: var(--gold);
  margin-top: .5em; font-weight: 700;
}

/* ---------- Die Zeit ---------- */

.clock-time {
  font-size: clamp(64px, 23vmin, 340px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.035em;
  line-height: .84;
  color: var(--text);
  transition: color .25s;
  /* Rechts/links Platz lassen, sonst schneiden manche Fonts die 8 an */
  padding: 0 .04em;
}
.clockview.paused .clock-time { color: var(--gold); }
.clockview.break  .clock-time { color: var(--blue); }
.clockview.warn   .clock-time { color: var(--red); }

/* Letzte zehn Sekunden: ruhiger Puls statt Blinken.
   Blinken macht auf dem Beamer Kopfweh und ist schlechter lesbar. */
.clockview.last10 .clock-time { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .82; transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .clockview.last10 .clock-time { animation: none; }
}

.clock-paused-hint {
  font-size: clamp(12px, 1.8vmin, 24px);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  margin-top: clamp(4px, .8vmin, 12px);
  min-height: 1.2em;
}

/* ---------- Blinds ---------- */

.clock-blinds {
  margin-top: clamp(10px, 2.4vmin, 40px);
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(8px, 1.6vmin, 26px);
  flex-wrap: wrap;
}
.clock-blinds .bl-label {
  font-size: clamp(11px, 1.7vmin, 22px);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.clock-blinds .bl-value {
  font-size: clamp(30px, 8.4vmin, 120px);
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; line-height: 1;
  color: var(--gold);
}
.clock-blinds .bl-sep { color: var(--text-mute); font-size: clamp(22px, 6vmin, 84px); font-weight: 300; }
.clock-ante {
  margin-top: clamp(4px, 1vmin, 14px);
  font-size: clamp(13px, 2.4vmin, 34px);
  font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.clock-ante .ante-kind { color: var(--text-mute); font-weight: 600; font-size: .72em; letter-spacing: .06em; }

/* Naechstes Level */
.clock-next {
  margin-top: clamp(10px, 2.2vmin, 34px);
  font-size: clamp(12px, 1.9vmin, 25px);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.clock-next b { color: var(--text-dim); font-weight: 700; }

/* ---------- Seitenspalte mit Kennzahlen ---------- */

.clock-side {
  display: flex; flex-direction: column;
  gap: clamp(6px, 1.1vmin, 14px);
  justify-content: center;
  min-width: 0;
}
.cs-box {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: clamp(7px, 1.3vmin, 18px) clamp(9px, 1.5vmin, 20px);
  min-width: 0;
}
:root[data-theme="light"] .cs-box { background: rgba(0,0,0,.03); }
.cs-box .cs-label {
  font-size: clamp(9px, 1.15vmin, 14px);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-box .cs-value {
  font-size: clamp(18px, 3.3vmin, 46px);
  font-weight: 750; font-variant-numeric: tabular-nums;
  line-height: 1.1; margin-top: .1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-box .cs-sub { font-size: clamp(9px, 1.1vmin, 14px); color: var(--text-mute); }
.cs-box.accent .cs-value { color: var(--gold); }
.cs-box.green  .cs-value { color: #56d197; }

/* ---------- Steuerleiste ---------- */

.clock-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  z-index: 4;
}
.clock-bar .grow { flex: 1; }
.clock-bar .hintline { font-size: 11.5px; color: var(--text-mute); }
.clock-bar .hintline kbd {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; margin: 0 1px;
}

/* Im Vollbild verschwindet die Leiste, bis die Maus sie beruehrt */
.clockview.fullscreen .clock-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: 0; transform: translateY(100%);
  transition: opacity .2s, transform .2s;
}
.clockview.fullscreen:hover .clock-bar,
.clockview.fullscreen .clock-bar:focus-within { opacity: 1; transform: none; }

/* ---------- Pausen-Ansicht ---------- */

.break-banner {
  font-size: clamp(20px, 5.4vmin, 76px);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(6px, 1.2vmin, 18px);
}
.break-after {
  font-size: clamp(13px, 2.2vmin, 30px);
  color: var(--text-dim); font-weight: 600;
  margin-top: clamp(8px, 1.6vmin, 22px);
}

/* ---------- Beamer-Fenster ---------- */
/* Kein Bedienelement, nur Anzeige. Etwas groesser gesetzt, weil das
   Publikum weiter weg sitzt als der Turnierleiter. */

body.display-window { background: var(--bg); overflow: hidden; }
body.display-window .clockview { position: fixed; }
body.display-window .clock-bar { display: none; }
body.display-window .clock-time { font-size: clamp(80px, 27vmin, 460px); }
body.display-window .clock-blinds .bl-value { font-size: clamp(36px, 10vmin, 160px); }

.display-offline {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--text-mute);
  font-size: clamp(14px, 2.4vmin, 28px); text-align: center; padding: 5vmin;
  z-index: 10;
}
.display-offline b { color: var(--gold); display: block; margin-bottom: .6em; font-size: 1.3em; }

/* ============================================================
   Handy und Tablet — Uhr und Steuerleiste (21.08.2026)

   Seit die Steuerung ueber das Netz laeuft, haelt der Turnierleiter das Handy
   in der Hand, waehrend Beamer oder Laptop dieselbe Uhr anzeigen. Diese Datei
   bedient also ab jetzt zwei sehr verschiedene Geraete.

   Deshalb steht vor jeder Regel, die das Zifferblatt selbst betrifft, ein
   body:not(.display-window): display.html laedt genau diese Datei, und was der
   Daumen braucht, macht die Leinwand nur kaputt. Die Regeln fuer die
   Steuerleiste tragen den Zusatz nicht — die Leiste ist im Beamer-Fenster
   ohnehin ausgeblendet (siehe Block darueber).

   Zweite Absicherung: alles haengt an Breite bzw. Hoehe und bewusst NICHT an
   (pointer: coarse). Ein Beamer- oder Laptop-Rechner mit Touchscreen meldet
   ebenfalls "coarse" und soll das grosse Layout behalten.

   Die Groessen der Uhr bleiben in vmin — angefasst wird die Aufteilung, nicht
   die Kette clamp(...vmin...), die dafuer sorgt, dass die Anzeige jeden
   Bildschirm fuellt.
   ============================================================ */

/* ---------- Bedienung: dieselbe Schwelle wie im uebrigen Layout ----------

   900 px wie in layout.css, damit Handy (390/412), Handy im Querformat (844)
   und Tablet (768) dieselbe Behandlung bekommen. Hier geht es nur um die
   Steuerleiste, also um Finger — die Aufteilung der Uhr kommt erst im
   naechsten Block und bei einer anderen Schwelle.

   Das zweite Glied der Liste (Komma heisst ODER) faengt ein Geraet, das sonst
   durchfiele: ein Android mit 412 x 915 ist quer 915 px breit und damit ueber
   der Schwelle — die Leiste blieb dort mit Hinweiszeile und Mausmassen stehen,
   281 px hoch, und liess der Uhr 55 px. Hoechstens 1100 x 520 heisst "liegt
   quer in der Hand": das breiteste Handy im Querformat misst 932 px, ein iPad
   quer ist zwar 1024 px breit, aber 768 px hoch und faellt heraus. Ein
   flaches Laptopfenster bleibt damit ebenfalls unberuehrt. */
@media (max-width: 900px), (max-width: 1100px) and (max-height: 520px) {

  /* Die Leiste hat 15 Knoepfe, von denen je nach Zustand bis zu zwoelf
     sichtbar sind. Sie bricht schon von Haus aus um (flex-wrap: wrap), das
     bleibt auch so: umbrechen heisst, dass jeder Knopf sichtbar ist. Eine
     einzige rollbare Zeile waere zwar flacher, versteckt aber acht Knoepfe
     hinter einem Wisch, den nichts ankuendigt — im Querformat weiter unten
     ist das unvermeidlich, hier nicht. */
  .clock-bar {
    padding: var(--sp-2) var(--sp-3);
    /* Der Balken sitzt am unteren Bildschirmrand — auf dem iPhone liegt dort
       der Home-Balken quer ueber den Knoepfen. --safe-b kommt aus layout.css,
       das beide Seiten laden; ohne Kerbe ist es 0px. */
    padding-bottom: calc(var(--sp-2) + var(--safe-b, 0px));
    padding-left: max(var(--sp-3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  }

  /* Die Hinweiszeile listet Tastenkuerzel auf. Auf dem Handy gibt es keine
     Tastatur, dafuer kostete sie 53 px plus eine eigene Umbruchzeile. */
  .clock-bar .hintline { display: none; }
  /* Der Fueller schiebt nur die Hinweiszeile nach rechts; ohne sie hat er
     nichts mehr zu tun und wuerde in der Umbruchzeile Platz verstellen. */
  .clock-bar .grow { display: none; }

  /* 44 px ist das Mass fuer Beruehrungsflaechen. flex: 1 1 auto laesst die
     Knoepfe ihre Zeile ausfuellen, statt sie rechts ausfransen zu lassen —
     das vergroessert nebenbei jede Trefferflaeche. */
  .clock-bar .btn {
    min-height: 44px;
    padding: 8px 11px;
    flex: 1 1 auto;
  }
  .clock-bar .btn.lg { min-height: 48px; padding: 10px 14px; font-size: 15px; }

  /* ---------- Reihenfolge der Knoepfe ----------

     Vier Knoepfe entscheiden den Abend: Start/Pause, Level vor, Rebuy und
     "Spieler raus". In der Reihenfolge des DOM liegen sie verstreut zwischen
     "Level waehlen ..." und "Vollbild", auf 390 px also in Zeile 1 bis 3 — und
     sie wandern jedes Mal, wenn ein Knopf dazukommt oder verschwindet (die
     Rebuy-Knoepfe fallen weg, sobald die Rebuy-Phase endet). Mit order stehen
     sie immer in der ersten Zeile, zusammen und an derselben Stelle.

     ACHTUNG: die Zahlen sind die Positionen aus buildBar() in
     js/ui/view-clock.js (1 Turnier starten, 2 Start/Pause, 3 Level zurueck,
     4 Level vor, 5 -1 Min, 6 +1 Min, 7 Zeit setzen, 8 Level waehlen,
     9 Rebuy, 10 Add-on, 11 Spieler raus, 12 Auswertung, 13 wieder oeffnen,
     14 Beamer, 15 Vollbild). Das haelt, weil nicht sichtbare Knoepfe die
     Klasse .hidden bekommen und im DOM stehen bleiben — wer aber in
     buildBar() einen Knopf EINFUEGT, muss die Zahlen hier nachziehen.
     Die Tabulator-Reihenfolge folgt weiterhin dem DOM; auf einem Geraet
     ohne Tastatur faellt das nicht ins Gewicht. */
  .clock-bar > * { order: 5; }
  .clock-bar > :nth-child(2)  { order: 1; }   /* Start / Pause */
  .clock-bar > :nth-child(4)  { order: 2; }   /* Level vor */
  .clock-bar > :nth-child(9)  { order: 3; }   /* Rebuy */
  .clock-bar > :nth-child(11) { order: 4; }   /* Spieler raus */

  /* Im Vollbild versteckt sich die Leiste und kommt erst zurueck, wenn die
     Maus sie beruehrt. Einen Mauszeiger gibt es hier nicht: einmal auf
     "Vollbild" getippt, waere die Bedienung weg und der Weg zurueck (Taste F)
     ebenfalls. Also bleibt die Leiste im Fluss stehen. */
  .clockview.fullscreen .clock-bar {
    position: static;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Aufteilung der Uhr: Hochformat ----------

   Warum die Bedingung "hoch UND schmaler als 900 px" und nicht einfach eine
   Breite: im Hochformat ist vmin die BREITE, die Zeit waechst also mit
   derselben Zahl, aus der auch die Spalte danebensteht.

   .clock-side ist minmax(200px, 22%), unter rund 950 px Breite greifen die
   200 px. Bei 390 px bleiben der Mitte damit 150 px, waehrend die Zeit 235 px
   braucht — sie ragte 29 px ueber den linken Bildschirmrand hinaus und lag
   31 px ueber den Kennzahlen (nachgemessen). Auf dem Tablet mit 768 px sieht
   es mit "20:00" noch gut aus (467 px in 513 px), reisst aber bei der Vorlage
   WSOP Main Event: deren 120-Minuten-Level zeigen "2:00:00", und die 613 px
   liefen quer durch die Kennzahlenkaesten. Einspaltig hat die Zeit dort die
   vollen 728 px.

   Im Querformat stellt sich die Frage nicht: dort ist vmin die Hoehe, die
   Zeit bleibt klein, und 604 px Mitte reichen weit. Deshalb bleibt es dort
   zweispaltig, und nur die Hoehe wird im naechsten Block behandelt. */
@media (max-width: 900px) and (orientation: portrait) {

  /* Kennzahlen unter die Uhr statt daneben. Nicht weglassen: Spieleranzahl
     und Durchschnittsstack sind genau das, was am Tisch gefragt wird.
     1fr auto heisst: die Uhr bekommt allen Platz, der uebrig bleibt, die
     Kennzahlenreihe nur ihre eigene Hoehe. */
  body:not(.display-window) .clock-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-3);
    padding-top: var(--sp-4);
    padding-left: max(var(--sp-3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  }

  /* Aus der Spalte wird ein Raster: sechs Kaesten, zwei Reihen zu dritt.
     Drei nebeneinander, weil bei 390 px auf jeden Kasten dann rund 115 px
     entfallen — genug fuer "Durchschnitt" und einen fuenfstelligen Wert. */
  body:not(.display-window) .clock-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  body:not(.display-window) .cs-box { padding: 5px 8px; }

  /* Die Schriftgroesse der Zeit bleibt bewusst, wie sie ist.

     Es lag nahe, sie hier anzuheben — die Mitte ist jetzt 366 statt 150 px
     breit, waehrend clamp(64px, 23vmin, 340px) bei 390 px nur 90 px
     Schriftgrad ergibt: "22:34" ist damit 241 px breit und laesst reichlich
     Luft. 30vmin waren ausprobiert (309 px) und sahen besser aus.

     Dagegen steht die Vorlage "WSOP Main Event" (js/structures.js): sie faehrt
     120-Minuten-Level und 75-Minuten-Pausen, und U.fmtClock schreibt ab einer
     Stunde "2:00:00" — sieben Zeichen statt fuenf. Nachgerechnet passen sieben
     Zeichen bei 390 px nur bis etwa 25vmin in die Zeile, und das gilt fuer die
     Schrift DIESES Rechners; eine Systemschrift mit breiteren Ziffern (iOS)
     liegt noch darunter. Die vorhandenen 23vmin sind genau darauf ausgelegt.
     Eine abgeschnittene Uhr ist schlimmer als eine Uhr mit Rand — also bleibt
     die Kette unangetastet. */
}

/* ---------- Querformat auf dem Handy ----------

   844 x 390 (Handy gedreht): die Breite ist reichlich, die Hoehe ist das
   Problem. Ueber der Uhr steht die zweizeilige Kopfleiste, darunter die
   Steuerleiste; blieben beide wie im Hochformat, endete die Zeit unter der
   Leiste und Blinds und "naechstes Level" lagen ganz ausserhalb des Bildes
   (nachgemessen: .clockview ist position: absolute; inset: 0 — da rollt
   nichts nach, es ist einfach abgeschnitten).

   Ausloeser ist die Hoehe, nicht die Breite, deshalb (max-height: 520px);
   die 1100 px Breite grenzen wie im Block darueber das Handy vom flachen
   Laptopfenster ab, wo die Uhr auch bei 500 px Hoehe noch vollstaendig passt.
   Ein Beamer ist auch quer, hat aber 720 oder 1080 px Hoehe und faellt nicht
   darunter; das display-window ist zusaetzlich ausgenommen. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 520px) {

  /* Sechs Kennzahlenkaesten brauchen rund 330 px Hoehe, verfuegbar sind hier
     etwa 230. Sie ganz wegzulassen ist ehrlicher, als sie halb abzuschneiden
     — im Hochformat sind sie ja da. */
  body:not(.display-window) .clock-side { display: none; }
  body:not(.display-window) .clock-main {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    padding-top: var(--sp-3);
    padding-left: max(var(--sp-3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  }

  /* Die restlichen Zeilen enger stellen, bis die Uhr in die Hoehe passt.
     Der Hinweis haelt sich sonst 1.2em frei, auch wenn er nichts sagt. */
  body:not(.display-window) .clock-blinds { margin-top: var(--sp-2); }
  body:not(.display-window) .clock-paused-hint { min-height: 0; }
  /* "Naechstes Level" ist die Zeile, die man am ehesten entbehrt: sie steht
     auch in der Mini-Uhr der Kopfleiste und im Struktur-Editor. */
  body:not(.display-window) .clock-next { display: none; }

  /* Hier muss die Leiste rollen statt umzubrechen: jede zusaetzliche Zeile
     ginge von der Uhr ab, und davon gibt es quer nichts abzugeben. Durch die
     order-Regeln oben stehen die vier wichtigen Knoepfe am Anfang und
     brauchen zusammen rund 350 px — sie sind auf 844 px alle sichtbar, ohne
     zu rollen. */
  .clock-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sonst loest der Wisch am Ende der Leiste die Zurueck-Geste des Browsers
       aus — und die verlaesst die App mitsamt Turnier. */
    overscroll-behavior-x: contain;
  }
  .clock-bar .btn { flex: 0 0 auto; }
}