/* ==========================================================================
   Bikeball-Playbook

   Gebaut fuers Handy am Spielfeldrand: Das Feld steht oben und fuellt die
   Breite, alle Knoepfe liegen darunter in Daumenreichweite. Auf breiten
   Schirmen waechst nur das Feld, die Bedienung bleibt gleich — wer das
   Board in der Halle bedient, soll es am Rechner nicht neu lernen.
   ========================================================================== */

.tk-body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  /* Kein Durchziehen der Seite, waehrend man auf dem Feld zeichnet. */
  overscroll-behavior-y: contain;
  /* Das Brett ist ein Werkzeug, keine Textseite: kein graues Aufblitzen
     beim Tippen, kein Markieren von Wörtern, kein Zoom beim zweiten
     Tippen. Sonst sprang auf dem Handy bei jedem Tippen etwas. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
/* Fußzeile, Hilfe und Eingaben will man sehr wohl markieren. */
.tk-fuss, .tk-dlg, .tk-body input {
  -webkit-user-select: text; user-select: text;
}

/* ── Kopf ─────────────────────────────────────────────────────── */

.tk-kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.tk-zurueck {
  font-size: .85rem; font-weight: 700; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.tk-zurueck:hover { color: var(--fg); }
.tk-titel {
  flex: 1; min-width: 0;
  font-size: 1rem; font-weight: 850; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-kopfknoepfe { display: flex; align-items: center; gap: .5rem; }
.tk-kopfknopf {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--fg); font: inherit; font-weight: 800; cursor: pointer;
}
.tk-kopfknopf:hover { border-color: var(--accent-2); color: var(--accent-2); }

.tk-haupt {
  max-width: 1180px; margin-inline: auto;
  padding: .9rem var(--pad) 4rem;
  display: grid; gap: .75rem;
}
/* Auf dem Handy zaehlt jeder Millimeter Feld — der Rand wird schmaler,
   das Feld dadurch spuerbar groesser. Der Kopf behaelt seinen Rand. */
@media (max-width: 620px) {
  .tk-haupt { --pad: .5rem; padding-bottom: 2.5rem; gap: .6rem; }
}
/* Hochkant verhält sich der Bedienblock wie vorher die Einzelteile. */
.tk-bedienung { display: grid; gap: .75rem; }

/* ── Das Feld ─────────────────────────────────────────────────── */

.tk-feldbox { position: relative; display: grid; gap: .4rem; }

.tk-feld {
  /* Die Breite kommt aus der Hoehe, nicht umgekehrt: Sonst waechst das
     Feld auf dem Rechner so weit, dass Werkzeuge und Schrittleiste unter
     die Falz rutschen — und genau die braucht man staendig. 14/11 ist das
     Seitenverhaeltnis des Spielfelds. */
  width: min(100%, calc(56vh * 14 / 11));
  width: min(100%, calc(56svh * 14 / 11));
  margin-inline: auto;
  height: auto; display: block;
  border-radius: 14px;
  background: #0d1712;                 /* Hallenboden, gruenlich-dunkel */
  /* Ohne das scrollt die Seite, sobald der Finger ueber dem Feld zieht. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Schwebt ueber dem unteren Feldrand und nimmt keinen Platz in der
   Seite ein — sonst verschiebt jeder Hinweis das ganze Bild. */
.tk-tipp {
  /* Von Kante zu Kante aufgespannt und mittig gesetzt: `left: 50%`
     allein laesst nur die halbe Breite uebrig, der Hinweis bricht dann
     unnoetig oft um und verdeckt zu viel Feld. */
  position: absolute; left: 0; right: 0; bottom: .55rem;
  width: max-content; max-width: min(92%, 30rem);
  margin-inline: auto;
  padding: .4rem .75rem; border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .82rem; line-height: 1.35; color: var(--fg);
  text-align: center; text-wrap: balance;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.tk-tipp.an { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tk-tipp { transition: none; } }

/* Linien und Figuren */
.tk-linie { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tk-linie-lauf   { stroke: #7ee081; stroke-width: .11; }
/* Der Ballweg: gelb und gestrichelt. Es gab einmal zwei Stile, einen
   fuer den Pass und einen fuer den Schuss — geblieben ist der eine. */
.tk-linie-pass   { stroke: #ffc300; stroke-width: .1; stroke-dasharray: .34 .26; }
/* Drehring des gewaehlten Rades: zurueckhaltend gezeichnet, damit er
   das Feld nicht dominiert, aber mit klarem Knauf zum Anfassen. */
.tk-ring {
  fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: .05;
  stroke-dasharray: .28 .22;
}
.tk-ring-strich { stroke: rgba(255, 255, 255, .28); stroke-width: .04; }
.tk-knauf { stroke: rgba(0, 0, 0, .55); stroke-width: .05; cursor: grab; }
.tk-ring-g { cursor: grab; }

/* Der Punkt am Anfang eines Weges, der einer Figur gehoert. */
.tk-weg-start { stroke: rgba(0, 0, 0, .5); stroke-width: .05; }
.tk-weg-lauf   { fill: #7ee081; }
.tk-weg-pass   { fill: #ffc300; }

/* Unsichtbar, aber fett: damit der Radiergummi eine Linie mit dem
   Finger ueberhaupt trifft. */
.tk-linie-griff { fill: none; stroke: transparent; stroke-width: .7;
  cursor: pointer; }

.tk-figur { cursor: grab; }
.tk-figur.zieht { cursor: grabbing; }
.tk-rad-a { fill: #ff4b1f; }
.tk-rad-b { fill: #63c6ff; }
.tk-rad-rumpf { stroke: rgba(0, 0, 0, .55); stroke-width: .05; }
.tk-rad-nase { fill: #fff; }
/* Kein `font-size` und kein `dominant-baseline`: Die Groesse steht als
   Attribut am Element (CSS wuerde es ueberstimmen und dreistellige
   Kuerzel nicht mehr schrumpfen), die Hoehe rechnet radBauen aus —
   Safari legt `central` sonst merklich zu hoch. */
.tk-rad-schrift {
  /* 700 statt 800: Bei der kleinen Groesse auf dem Handy laufen die
     Striche bei 800 ineinander. */
  fill: #0b0b0e; font-weight: 700;
  text-anchor: middle;
  font-family: system-ui, -apple-system, Arial, sans-serif;
  pointer-events: none;
}
.tk-ball { fill: #fff; stroke: rgba(0, 0, 0, .5); stroke-width: .04; }
/* Getragen: Die Figur schwebt beim Ziehen ueber der Fingerkuppe, damit
   man sie ueberhaupt sieht. Der Schatten sagt, dass sie abgehoben ist —
   sonst wirkte der Versatz wie ein Fehler. */
.tk-hebt { filter: drop-shadow(0 .22px .2px rgba(0, 0, 0, .8)); }

/* Beim Abspielen darf nichts angefasst werden. */
.tk-feld.spielt .tk-figur, .tk-feld.spielt .tk-linie-griff {
  pointer-events: none;
}

/* ── Werkzeugleiste ───────────────────────────────────────────── */

/* Umbrechen statt seitwaerts schieben: Sonst steht der Radierer halb
   ausserhalb, und jeder Tipp auf einen angeschnittenen Knopf ruckt die
   Reihe zurecht — auf dem Handy das Zappeln bei jedem Werkzeugwechsel. */
.tk-werkzeuge {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding-bottom: .2rem;
}
.tk-wz {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--fg); font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.tk-wz:hover { border-color: var(--accent-2); }
.tk-wz[aria-pressed="true"] {
  background: var(--accent-2); border-color: transparent; color: #0b0b0e;
}
.tk-wz-strich { width: 1.1rem; height: 2px; border-radius: 2px; }

/* ── Knoepfe und Zeilen ───────────────────────────────────────── */

.tk-schrittleiste, .tk-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.tk-btn {
  padding: .55rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--fg); font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.tk-btn:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
.tk-btn:disabled { opacity: .4; cursor: default; }
.tk-rund { width: 2.2rem; padding: .55rem 0; text-align: center; font-size: 1.1rem; }
.tk-haupt-btn {
  margin-left: auto;
  background: var(--accent); border-color: transparent; color: #fff;
}
.tk-haupt-btn:hover:not(:disabled) { color: #fff; filter: brightness(1.1); }
/* ── Zeitleiste ───────────────────────────────────────────────────
   Eigene Zeile, volle Breite: Man schiebt sie mit dem Daumen, und dabei
   soll die Seite nicht mitwandern. Der gefuellte Teil kommt aus
   --anteil, das playbook.js beim Abspielen mitfuehrt. */
.tk-zeit {
  flex: 1 1 100%; margin: .15rem 0 0;
  height: 1.6rem; padding: 0;
  background: transparent; border: 0;
  accent-color: var(--accent-2);
  touch-action: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tk-zeit:disabled { opacity: .4; cursor: default; }
.tk-zeit:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.tk-zeit::-webkit-slider-runnable-track {
  height: .4rem; border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent-2) var(--anteil, 0%), rgba(255, 255, 255, .16) var(--anteil, 0%));
}
.tk-zeit::-moz-range-track {
  height: .4rem; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
.tk-zeit::-moz-range-progress {
  height: .4rem; border-radius: 999px; background: var(--accent-2);
}
.tk-zeit::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.25rem; height: 1.25rem; margin-top: -.43rem;
  border-radius: 50%; border: 2px solid var(--bg);
  background: var(--fg); box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.tk-zeit::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%; border: 2px solid var(--bg);
  background: var(--fg); box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.tk-schrittzahl {
  min-width: 3.4rem; text-align: center;
  font-size: .85rem; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Aufklappmenue der Standardsituationen */
.tk-menue { position: relative; }
.tk-menue > summary { list-style: none; display: inline-block; }
.tk-menue > summary::-webkit-details-marker { display: none; }
.tk-menue > ul {
  position: absolute; z-index: 20; bottom: calc(100% + .4rem); left: 0;
  min-width: 13rem; margin: 0; padding: .35rem;
  list-style: none; border-radius: 14px;
  border: 1px solid var(--line); background: #14141c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.tk-menue > ul button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .7rem; border: 0; border-radius: 9px;
  background: none; color: var(--fg); font: inherit; font-size: .88rem;
  font-weight: 600; cursor: pointer;
}
.tk-menue > ul button:hover { background: var(--bg-soft); color: var(--accent-2); }

.tk-warnung {
  padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: .87rem;
}

.tk-fuss {
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.tk-fuss a { color: var(--muted); }
.tk-fuss p + p { margin-top: .4rem; }

/* ── Handy im Querformat ──────────────────────────────────────────

   Hochkant bleibt das Feld oben und die Bedienung darunter. Quer waere
   das die schlechteste aller Anordnungen: Das Feld muss sich die Hoehe
   mit den Knoepfen teilen und wird winzig. Deshalb hier zwei Spalten —
   Bedienung schmal links, Feld rechts ueber die ganze Hoehe. Aus rund
   270 Pixeln Feldbreite werden so ueber 450.

   Die Abfrage greift ueber die Hoehe, nicht ueber die Geraeteart: Was
   zaehlt, ist wenig Hoehe bei viel Breite — das trifft das quer
   gehaltene Handy und lae sst Tablets und Rechner in Ruhe. */
@media (orientation: landscape) and (max-height: 600px) {
  /* Die Resthoehe wird nicht ausgerechnet, sondern verteilt: Der Koerper
     ist genau bildschirmhoch, der Kopf nimmt, was er braucht, und der
     Rest gehoert dem Hauptteil. Ein fester Abzug ginge schief, sobald
     die Kopfzeile eine andere Hoehe hat — genau das ist passiert. */
  .tk-body {
    display: flex; flex-direction: column;
    height: 100svh; overflow: hidden;
  }
  .tk-kopf {
    position: static; flex: 0 0 auto;
    padding: .35rem var(--pad);
  }
  .tk-titel { font-size: .92rem; }

  /* `width: 100%` ist hier kein Schmuck: `.tk-body` ist quer ein
     Flex-Kasten, und `margin-inline: auto` nimmt dem Raster die
     Streckung — es schrumpft dann auf seinen Inhalt und die 1fr-Spalte
     bleibt leer. Frueher hat der Hinweistext unter dem Feld sie
     zufaellig aufgespannt; seit er schwebt, tut das niemand mehr. */
  .tk-haupt {
    flex: 1 1 auto; min-height: 0; width: 100%;
    grid-template-columns: minmax(9rem, 15rem) 1fr;
    align-items: start;
    gap: .4rem .7rem;
    padding: .4rem var(--pad);
  }
  /* Das Feld steht im HTML zuerst, gehoert hier aber nach rechts und
     ueber alle Zeilen. */
  .tk-feldbox {
    grid-column: 2; grid-row: 1 / -1;
    height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .25rem;
  }
  /* Die Bedienung ist die linke Spalte und scrollt fuer sich, falls
     die Knoepfe nicht alle auf einmal hineinpassen — die Seite selbst
     soll nicht wandern, sonst rutscht einem das Feld weg. */
  .tk-bedienung {
    grid-column: 1; grid-row: 1 / -1;
    gap: .4rem; overflow-y: auto; max-height: 100%;
    scrollbar-width: none;
  }
  .tk-bedienung::-webkit-scrollbar { display: none; }
  .tk-haupt-btn { margin-left: 0; }
  /* Quer zaehlt jeder Millimeter: kleinere Knoepfe, enger gesetzt. */
  .tk-btn, .tk-wz { padding: .35rem .6rem; font-size: .78rem; }
  .tk-rund { width: 1.8rem; padding: .35rem 0; font-size: .95rem; }
  .tk-schrittzahl { min-width: 2.6rem; font-size: .76rem; }
  /* Kein Platz — und beides ist quer entbehrlich. */
  .tk-fuss, .tk-drehen { display: none; }

  .tk-feld {
    /* Hoehe kommt vom Platz, Breite aus dem Seitenverhaeltnis des
       Spielfelds. Keine Zahl, die man nachziehen muesste. */
    flex: 1 1 auto; min-height: 0;
    width: auto; height: auto;
    aspect-ratio: 14 / 11;
    max-width: 100%;
  }
  .tk-tipp { font-size: .74rem; min-height: 1em; }
}

/* Hochkant auf dem Handy: einmal darauf hinweisen, dass quer mehr
   Platz bringt. Auf allen anderen Geraeten ueberfluessig. */
.tk-drehen { display: none; }
@media (orientation: portrait) and (max-width: 620px) {
  .tk-drehen {
    display: block; text-align: center;
    font-size: .78rem; color: var(--muted);
  }
}

/* ── Dialog ───────────────────────────────────────────────────── */

.tk-dlg {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: end center;
  background: rgba(0, 0, 0, .6);
  padding: 0;
  /* Wischen im Dialog darf nicht auf die Seite dahinter durchschlagen. */
  overscroll-behavior: contain;
}
@media (min-width: 640px) { .tk-dlg { place-items: center; padding: 1rem; } }
.tk-dlg[hidden] { display: none; }
.tk-dlg-innen {
  position: relative; width: 100%; max-width: 32rem;
  max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4rem 1.3rem 1.6rem;
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--line); background: #101018;
}
@media (min-width: 640px) { .tk-dlg-innen { border-radius: 20px; } }
.tk-dlg-innen h2 { font-size: 1.15rem; font-weight: 850; margin-bottom: .9rem; }
.tk-dlg-zu {
  position: absolute; top: .7rem; right: .7rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--fg); font: inherit; font-size: 1.1rem; cursor: pointer;
}
.tk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tk-liste li {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.tk-liste b { flex: 1; min-width: 0; font-weight: 700; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-liste small { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.tk-liste button { padding: .35rem .7rem; font-size: .8rem; }
/* Vier Knoepfe je Zeile passen am Handy nicht mehr neben den Namen:
   Der Name nimmt die erste Zeile, die Knoepfe ruecken darunter. */
@media (max-width: 520px) {
  .tk-liste li { flex-wrap: wrap; gap: .4rem .5rem; }
  .tk-liste b { flex: 1 1 100%; }
  .tk-liste small { flex: 1 1 auto; }
}

/* ── Ladeanzeige ──────────────────────────────────────────────────
   Ein Dialog, der auf den Server wartet, sah vorher aus wie ein leerer
   Dialog. Jetzt dreht sich ein Ring und daneben steht, dass geladen
   wird. Der feste Platz verhindert, dass die Liste beim Eintreffen
   springt. */
.tk-laden {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; min-height: 4.5rem; margin: 0;
  color: var(--muted); font-size: .88rem;
}
.tk-laden-ring {
  width: 1.15rem; height: 1.15rem; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--accent-2);
  animation: tk-dreht .8s linear infinite;
}
@keyframes tk-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Kein Kreisel fuer alle: Dann pulsiert der Ring nur noch sanft. */
  .tk-laden-ring {
    animation: tk-atmet 1.4s ease-in-out infinite;
    border-top-color: var(--accent-2);
  }
  @keyframes tk-atmet { 50% { opacity: .35; } }
}

/* ── Freigabecode ─────────────────────────────────────────────────
   Gross, gesperrt und antippbar: Man liest ihn jemandem vor oder gibt
   ihn per Teilen-Blatt weiter. */
.tk-code {
  display: block; width: 100%; margin: 0 0 .5rem;
  padding: .85rem .6rem; border-radius: 14px;
  border: 1px dashed var(--line); background: var(--bg-soft);
  color: var(--fg); font: inherit;
  font-size: clamp(1.2rem, 7vw, 1.9rem); font-weight: 800;
  letter-spacing: .16em; text-align: center; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.tk-code:hover { border-color: var(--accent-2); color: var(--accent-2); }
.tk-code-feld {
  text-align: center; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
}
.tk-feld-eingabe {
  width: 100%; padding: .7rem .85rem; margin-bottom: .8rem;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); font: inherit;
  /* Unter 16 px zoomt iOS beim Hineintippen die ganze Seite heran —
     und beim Verlassen wieder heraus. Genau dieses Springen. */
  font-size: 16px;
}
.tk-dlg-text { color: var(--muted); font-size: .88rem; margin-bottom: .9rem; }
.tk-dlg-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .tk-btn, .tk-wz { transition: none; }
}