/* styles.css - Tischfußball 3D (Präfix tf_).
   Eigene Optik (AGENTS.md 3.13.6): das Spiel steht im VEREINSHEIM - Nussbaum,
   Messing, grüner Filz, eine Vignette aus dem Pokalregal. Vier Bausteine:
     1. Kulisse  - assets/kulisse.svg (Tag) + kulisse-nacht.svg (Nacht), EINE
                   gestreckte Szene auf body, cover/no-repeat/fixed (3.13.7 A)
     2. Leiste   - Nussbaum-Konsole mit Messingkante (drei Zonen, 3.13.2)
     3. Bühne    - das 3D-Bild ist durchsichtig, der Raum scheint durch; der
                   Tisch selbst ist das Ding der Welt (Holzrahmen + Messing)
     4. HUD      - Anzeigetafel aus Holz mit Bernstein-Ziffern, Startmenü,
                   Hilfe und Ergebnis als Aushang/Urkunde auf Papier
   Dark Mode = dasselbe Vereinsheim bei Nacht (eigene Nachtszene, Papiere
   bleiben hell). Farben liegen als Variablen hier, nicht verstreut. */

:root {
  --tf-nuss: #3a2414;
  --tf-nuss-hell: #53361e;
  --tf-nuss-dunkel: #241508;
  --tf-messing: #c9a24a;
  --tf-messing-hell: #f0d68f;
  --tf-messing-dunkel: #8d6a26;
  --tf-filz: #2f6b47;
  --tf-filz-dunkel: #1f4a30;
  --tf-papier: #f7efdc;
  --tf-papier-schatten: #e3d4b6;
  --tf-tinte: #2f2415;
  --tf-tinte-leise: #6a5636;
  --tf-bernstein: #ffc65a;
  --tf-rot: #d4463f;
  --tf-blau: #3f7cc4;
  --tf-rahmen: 10px;
}

/* ---------- Grundgerüst: Spiel füllt den ganzen Bildschirm ---------- */
html, body.tf {
  height: 100%;
  margin: 0;
  padding: 0;
}

body.tf.tf_body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f6ecd6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Kulisse: EINE gestreckte Szene, kein Kachelmuster (3.13.7 Weg A).
     Die zweite Ebene ist die Vignette der Plattform - beide cover, beide
     no-repeat, beide fixed. */
  background:
    url("assets/kulisse.svg") center top / cover no-repeat fixed;
  background-color: #2a1c0f;
}

html[data-theme="dark"] body.tf.tf_body {
  background:
    url("assets/kulisse-nacht.svg") center top / cover no-repeat fixed;
  background-color: #14100a;
}

/* ---------- Kopfzeile: Nussbaum-Konsole mit Messingkante ---------- */
.tf_leiste {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  min-height: 56px;
  color: #f6ecd6;
  background:
    linear-gradient(180deg, #5c3a1e 0%, #452a13 42%, #33200f 100%);
  border-bottom: 3px solid var(--tf-messing-dunkel);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 178, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 3px 12px rgba(0, 0, 0, 0.45);
  /* ÜBER den Overlays (z-index 40): die Leiste mit Ansicht, Ton, Vollbild und
     Menü muss auch bei offenem Startmenü bedienbar sein. */
  z-index: 50;
  position: relative;
}

/* Messingkante als feine Linie unter der Leiste */
.tf_leiste::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--tf-messing-dunkel), var(--tf-messing-hell) 18%,
    var(--tf-messing) 50%, var(--tf-messing-hell) 82%, var(--tf-messing-dunkel));
  pointer-events: none;
}

.tf_zurueck {
  flex: none;
  color: #f8e7c2;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.42rem 0.7rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(201, 162, 74, 0.55);
  background: rgba(0, 0, 0, 0.28);
}

.tf_zurueck:hover { background: rgba(201, 162, 74, 0.28); }

/* Marke: Logo + Name + Beta. Die Mitte der drei Zonen. */
.tf_marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tf_logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 0.55rem;
  box-shadow: 0 0 0 2px var(--tf-messing-dunkel), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tf_titel {
  font-size: 1.06rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.02em;
  color: #fff4d8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.tf_vermerk {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #ffe7ae;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(201, 162, 74, 0.6);
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
}

.tf_werkzeuge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

/* 🌐-Sprachwahl (Regel 3.14): Umschalter sitzt in der Leiste. Bedienziel
   mindestens 40 px, Material der Leiste. */
.tf_leiste .jupi_sprachen_wahl { flex: none; }
.tf_leiste .jupi_sprachen_select {
  min-height: 40px;
  max-width: 11rem;
  color: #f8e7c2;
  background: rgba(20, 12, 6, 0.55);
  border: 1px solid rgba(201, 162, 74, 0.55);
}
.tf_leiste .jupi_sprachen_select:hover { background: rgba(201, 162, 74, 0.26); }
.tf_leiste .jupi_sprachen_select option { color: #241508; background: #f7efdc; }

/* Theme-Pille: auf 74 × 40 px wie die Plattform-Vorgabe (3.13.2). */
.tf_leiste .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-height: 40px;
  background: rgba(20, 12, 6, 0.55);
  border: 1px solid rgba(201, 162, 74, 0.55);
}
.tf_leiste .jupi_theme_switch:hover { background: rgba(201, 162, 74, 0.26); }
.tf_leiste .jupi_theme_switch .jts_thumb {
  width: 2rem;
  height: 2rem;
  top: 3px;
  bottom: auto;
  background: linear-gradient(180deg, #f7e3b4, #c9a24a 62%, #9c7a2f);
  border: 1px solid #3a2718;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .tf_leiste .jupi_theme_switch .jts_thumb {
  left: calc(100% - 2rem - 0.18rem);
}
.tf_leiste .jupi_theme_switch:focus-visible {
  outline: 3px solid var(--tf-messing-hell);
  outline-offset: 2px;
}

.tf_knopf {
  font: inherit;
  font-size: 0.92rem;
  color: #fdf1d6;
  background: rgba(20, 12, 6, 0.5);
  border: 1px solid rgba(201, 162, 74, 0.5);
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.tf_knopf:hover { background: rgba(201, 162, 74, 0.28); }
.tf_knopf:focus-visible { outline: 3px solid var(--tf-messing-hell); outline-offset: 2px; }

/* Der Ansichts-Knopf sagt, welche Ansicht gerade da ist - ein blosses
   Symbol könnte man nicht lesen, und die Ansicht ist genau die Sache, die
   man beim Spielen ab und an braucht. */
.tf_knopf_ansicht { white-space: nowrap; }

.tf_auge { font-size: 1rem; line-height: 1; }

.tf_ansicht_text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Auf dem Handy ist für das Wort kein Platz mehr: dort bleibt das Auge,
   der Titel des Knopfes (und die Hilfe) erklären die Ansicht. */
@media (max-width: 620px) {
  .tf_ansicht_text { display: none; }
}

/* ---------- Bühne: das 3D-Bild steht im Raum ---------- */
.tf_feld {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.tf_feld canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Der Rahmen der Bühne: Holz mit Messingkante, liegt ÜBER der Zeichenfläche
   (pointer-events: none, damit kein Klick verloren geht). */
.tf_feld::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--tf-rahmen) solid #4a2c16;
  box-shadow:
    inset 0 0 0 2px var(--tf-messing-dunkel),
    inset 0 0 0 3px rgba(240, 214, 143, 0.55),
    inset 0 22px 40px rgba(0, 0, 0, 0.35),
    inset 0 -26px 46px rgba(0, 0, 0, 0.42);
  border-radius: 4px;
}

/* ---------- Hilfe: eigenes Fenster (3.13.4) ---------- */
.tf_hilfe {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(84vh, 46rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--tf-messing-dunkel);
  border-radius: 0.8rem;
  background: var(--tf-papier);
  color: var(--tf-tinte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.tf_hilfe::backdrop {
  background: rgba(10, 6, 3, 0.6);
  backdrop-filter: blur(2px);
}

/* Das Fenster ist beim Öffnen eine Spalte: Kopf bleibt stehen, Inhalt scrollt. */
.tf_hilfe[open] {
  display: flex;
  flex-direction: column;
}

.tf_hilfe_kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(180deg, #5c3a1e, #3a2414);
  border-bottom: 2px solid var(--tf-messing-dunkel);
}

.tf_hilfe_titel {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #fff4d8;
  flex: 1 1 auto;
}

.tf_hilfe_zu {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fdf1d6;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 162, 74, 0.6);
  border-radius: 0.5rem;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

.tf_hilfe_zu:hover { background: rgba(201, 162, 74, 0.3); }

.tf_hilfe_inhalt {
  padding: 0.7rem 1rem 1rem;
  overflow: auto;
  font-size: 0.88rem;
}

/* Die Hilfe ist die wichtigste Textstelle des Spiels: deshalb mit Absätzen,
   echter Tabelle und großen Tasten - nicht als Fließtext. */
.tf_hilfe_was {
  margin: 0.1rem 0 0.5rem;
  font-size: 0.95rem;
  color: #33260f;
}

.tf_schritte {
  margin: 0.3rem 0 0.5rem;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.tf_schritte li { margin: 0.25rem 0; }

.tf_tasten {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.84rem;
}

.tf_tasten th,
.tf_tasten td {
  padding: 0.24rem 0.32rem;
  text-align: left;
  border-bottom: 1px solid rgba(58, 36, 20, 0.18);
  vertical-align: middle;
}

.tf_tasten th { color: var(--tf-tinte-leise); font-weight: 700; }

/* Die Tasten als echte Tasten-Miniatur - dann ist der Unterschied zwischen
   "E drücken" und "die Taste E sehen" sofort klar. */
.tf_tasten kbd {
  display: inline-block;
  min-width: 1.5rem;
  margin: 0 0.1rem;
  padding: 0.1rem 0.34rem;
  border: 1px solid rgba(58, 36, 20, 0.45);
  border-bottom-width: 3px;
  border-radius: 0.32rem;
  background: #fffaf0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  color: var(--tf-tinte);
}

.tf_punkt {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  vertical-align: baseline;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.tf_punkt.rot { background: var(--tf-rot); }
.tf_punkt.blau { background: var(--tf-blau); }

.tf_hilfe_liste {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}

.tf_hilfe_liste li { margin: 0.26rem 0; }

.tf_hilfe_inhalt p { margin: 0.4rem 0; line-height: 1.45; }

.tf_merksatz {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid var(--tf-messing);
  background: rgba(201, 162, 74, 0.16);
  color: #4a3513;
}

/* ---------- Anzeige während des Spiels: Anzeigetafel ---------- */
.tf_hud {
  position: fixed;
  /* Oben unter der Kopfzeile - nicht auf dem Tisch. Unten wäre sie mitten im
     Spielfeld und würde den Ball verdecken. */
  top: 4.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  align-items: center;
  padding: 0.4rem 0.7rem 0.45rem;
  border-radius: 0.7rem;
  color: #f8ecd2;
  background:
    linear-gradient(180deg, rgba(58, 36, 20, 0.95), rgba(32, 19, 9, 0.96));
  border: 1px solid var(--tf-messing-dunkel);
  box-shadow:
    inset 0 0 0 2px rgba(240, 214, 143, 0.25),
    0 10px 26px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  max-width: min(46rem, calc(100vw - 1rem));
}

.tf_tafel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.1rem 0.5rem 0.2rem;
  border-bottom: 1px solid rgba(201, 162, 74, 0.45);
}

.tf_tor {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Die Ziffern wie auf einer Anzeigetafel: Bernstein auf dunklem Blech. */
.tf_tor b {
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 0 0.32rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #1a1108, #2b1c0d);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.45);
  text-shadow: 0 0 10px rgba(255, 198, 90, 0.5);
}

.tf_tor.rot b { color: #ff9a7a; }
.tf_tor.blau b { color: #9fc4ff; }

.tf_mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.76rem;
  color: #e8d7b4;
  opacity: 0.9;
}

.tf_messung {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.76rem;
  color: #eee0c4;
}

.tf_messung b { color: var(--tf-bernstein); font-variant-numeric: tabular-nums; }

.tf_stangenwahl {
  display: flex;
  gap: 1rem;
  font-size: 0.74rem;
  color: #e8d7b4;
}

.tf_wahlzeile.rot b { color: #ff9f8d; }
.tf_wahlzeile.blau b { color: #a9caff; }

.tf_meldung {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--tf-bernstein);
  text-align: center;
  min-height: 1.1em;
}

/* ---------- 3-2-1-Los ---------- */
.tf_countdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(28vw, 12rem);
  font-weight: 800;
  color: #fff7e2;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 198, 90, 0.45);
  z-index: 22;
  pointer-events: none;
  animation: tf_pop 0.35s ease-out;
}

@keyframes tf_pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Bildschirmtasten: die Konsole am Tisch ---------- */
/* Aufbau je Seite (siehe index.html): Titel, vier Stangen-Knöpfe im 2x2-Raster,
   darunter der Daumenhebel neben den beiden Schlagtasten. Vorher standen hier
   zehn einzelne Tasten (4 Stangen + 4 Richtungen + 2 Schläge) auf 2,5 - 2,75 rem
   - das war auf dem Handy zu klein und zu eng, und schieben/kippen ließ sich
   nur ja/nein dosieren. Jetzt: größere Flächen und ein Hebel, der feinfühlig
   führt. Material: Filzbrett in Nussbaum mit Messingkante. */
.tf_touch {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 24;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.42rem 0.45rem 0.5rem;
  border-radius: 0.8rem;
  color: #f7ecd6;
  background:
    linear-gradient(180deg, rgba(58, 36, 20, 0.94), rgba(28, 17, 8, 0.95));
  border: 1px solid var(--tf-messing-dunkel);
  box-shadow:
    inset 0 0 0 2px rgba(240, 214, 143, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.5);
  /* Kein Scrollen und kein Zoomen, während der Daumen hier liegt - sonst
     rutscht das Spiel bei jedem Wischen weg. */
  touch-action: none;
}

.tf_touch.rechts {
  left: auto;
  right: 0.5rem;
}

.tf_touch_titel {
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tf_touch_titel.rot { color: #ff9f8d; }
.tf_touch_titel.blau { color: #a9caff; }

.tf_touch_wage {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* 2x2 statt einer Reihe aus vier: eine Reihe wäre auf einem 360-px-Handy
   breiter als die halbe Bildschirmbreite - und eine so breite Leiste gilt der
   Kamera in tisch3d.js als "Rand" und schiebt den Tisch weit nach hinten. */
.tf_touch_stangen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

.tf_t_knopf {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  /* Daumen-Zielfläche: unter etwa 40 Pixel trifft man im Spiel nicht mehr
     zuverlässig. Deshalb feste Mindestgröße und kein Schrumpfen. */
  flex: 0 0 auto;
  min-width: 2.6rem;
  min-height: 2.6rem;
  color: #fdf1d6;
  background: linear-gradient(180deg, rgba(90, 62, 34, 0.95), rgba(46, 29, 14, 0.95));
  border: 1px solid rgba(201, 162, 74, 0.5);
  border-radius: 0.55rem;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 233, 187, 0.18);
}

/* Die Zahl steht groß da, der Name der Stange klein darunter - so bleibt der
   Knopf ein Ein-Buchstaben-Ziel und ist trotzdem ohne Nachsehen benannt. */
.tf_t_stange {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  font-size: 1.15rem;
  padding: 0.15rem 0.2rem;
}

.tf_t_stange small {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Die gewählte Stange leuchtet gelb - genau wie ihre Plakette am Tisch. Wer
   mit dem Daumen zielt, schaut nicht auf die Leiste, sondern auf das Spiel. */
.tf_t_stange.tf_gewaehlt {
  background: linear-gradient(180deg, #ffe08a, #e8b53c);
  color: #241708;
  border-color: #fff4c4;
  box-shadow: 0 0 12px rgba(255, 214, 120, 0.55);
}

.tf_t_stange.tf_gewaehlt small { opacity: 0.95; }

/* ---------- Der Daumenhebel ---------- */
/* Eine Fläche je Seite. Ziehen quer schiebt die Stange, ziehen hoch oder
   runter kippt sie - und zwar so fein, wie man zieht. Das ersetzt die vier
   Richtungsknopf-Tasten. */
.tf_t_stick {
  position: relative;
  width: 5.4rem;
  height: 5.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 236, 199, 0.18) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0 42%, transparent 43%),
    rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(201, 162, 74, 0.55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  touch-action: none;
  cursor: pointer;
}

.tf_t_stick_knopf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.1rem;
  height: 2.1rem;
  margin: -1.05rem 0 0 -1.05rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff6dd, #d9b25c 55%, #a8832f);
  border: 2px solid rgba(255, 246, 221, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  /* Wird vom Spiel per transform gesetzt - daher ohne transition, sonst
     schleppt der Knopf der Bewegung nach. */
}

/* Zwei winzige Hinweise, welche Richtung was macht. Sie stehen nur die ersten
   Sekunden da (Animation) und blenden dann aus - dauerhafte Pfeile auf dem
   Hebel würden nur stören, wenn man draufliegt. */
.tf_t_stick_achs {
  position: absolute;
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  color: rgba(255, 240, 208, 0.85);
  pointer-events: none;
  opacity: 0;
  animation: tf_achs 5s ease-in-out 1;
}

.tf_t_stick_achs:nth-of-type(1) { left: 0; right: 0; top: 0.15rem; text-align: center; }
.tf_t_stick_achs_seit { bottom: 0.15rem; text-align: center; }

@keyframes tf_achs {
  0%, 70% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Der Schlag-Knopf: groß und breit, weil man ihn im Spiel am häufigsten
   braucht - mit der Hand, ohne hinzusehen. */
.tf_t_knopf.tf_t_schlag {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 2.6rem;
  font-size: 0.9rem;
  background: linear-gradient(180deg, #f2c66a, #c99a34);
  color: #241708;
  border-color: #fff0c4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.tf_t_schlag small { font-size: 0.6rem; font-weight: 800; }

/* Schlag und Durchdrehen übereinander: beide werden oft gebraucht, der
   Durchdreher ist der Zug für den schnellen Abschluss. */
.tf_touch_schlaege {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 3.4rem;
}

/* Der Durchdreher: ein einziger Tastendruck, die Stange schnellt auf volle
   Drehzahl. Kräftiger als der Schlag, damit man ihn mit dem Daumen trifft. */
.tf_t_knopf.tf_t_durch {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.6rem;
  font-size: 0.9rem;
  font-weight: 800;
  background: linear-gradient(180deg, #e07a45, #a94d22);
  color: #fff4e2;
  border-color: #ffb27a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.tf_t_durch small { font-size: 0.6rem; font-weight: 800; }

/* Auf kleinen Bildschirmen (Hochformat beim Spielen) wird die Leiste
   niedriger, sonst schiebt sie sich aus dem Bild. Die Daumen-Größe bleibt -
   und zwar echt: die Knöpfe dürfen nicht unter 40 px fallen, sonst trifft man
   im Spiel nicht mehr zuverlässig (pruef-touch.js misst das nach). */
@media (max-width: 520px) {
  .tf_touch { gap: 0.22rem; padding: 0.3rem 0.32rem 0.42rem; }
  .tf_t_knopf { min-width: 2.6rem; min-height: 2.6rem; }
  .tf_t_stick { width: 5rem; height: 5rem; }
  .tf_t_stick_knopf { width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; }
  .tf_t_knopf.tf_t_schlag,
  .tf_t_knopf.tf_t_durch { min-height: 2.6rem; font-size: 0.8rem; }
  .tf_t_stange { font-size: 1.05rem; }
  .tf_t_stange small { font-size: 0.52rem; }
}

/* Im Querformat liegt kaum Höhe über der Leiste. Dann wird sie breit statt
   hoch: Stangenwahl, Hebel und Schläge nebeneinander. Ein Daumen kommt dann
   von der Seite ans Spiel, nicht von unten - so herum liegt er auf dem Handy
   quer auch. */
@media (orientation: landscape) and (max-height: 560px) {
  .tf_touch { flex-direction: row; align-items: center; bottom: 0.3rem; }
  .tf_touch_titel {
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    max-height: 4.4rem;
    overflow: hidden;
  }
  .tf_touch_stangen { grid-template-columns: 1fr 1fr; }
  .tf_t_stick { width: 4.6rem; height: 4.6rem; }
  .tf_touch_schlaege { flex-direction: row; min-width: 0; }
  .tf_t_knopf.tf_t_schlag, .tf_t_knopf.tf_t_durch { min-width: 3.1rem; }
  .tf_t_knopf.tf_t_schlag small, .tf_t_knopf.tf_t_durch small,
  .tf_t_stange small { display: none; }
}

.tf_t_knopf.tf_gedrueckt {
  background: linear-gradient(180deg, #ffe8a8, #e8b53c);
  color: #241708;
}

/* Der Hebel selbst färbt sich, solange er gedrückt gehalten wird - so sieht
   man auch dann, dass die Stange läuft, wenn der Daumen darauf liegt. */
.tf_t_stick.tf_gedrueckt {
  border-color: rgba(255, 224, 102, 0.85);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 236, 199, 0.28) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(255, 224, 102, 0.26) 0 42%, transparent 43%),
    rgba(0, 0, 0, 0.32);
}

.tf_t_stick_knopf.tf_gedrueckt {
  background: radial-gradient(circle at 38% 32%, #fffbe8, #ffd166 55%, #c99a34);
}

/* ---------- Overlays (Menü, Ergebnis) ---------- */
/* Wichtig: eigene display-Regeln (.tf_overlay -> display:flex) schlagen die
   Browser-Vorgabe für [hidden]. Ohne diese Zeile bleibt "Spielende" beim
   Start sichtbar über dem Menü liegen. */
[hidden] { display: none !important; }

.tf_overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  /* oben Platz für die Kopfzeile: die liegt über dem Overlay und soll
     nicht mit dem Menü kollidieren. */
  padding: 4.2rem 1rem 1rem;
  background: rgba(8, 5, 2, 0.62);
  overflow: auto;
}

/* Der Aushang: Papier auf Holz, in beiden Themes hell (Papiere dürfen hell
   bleiben, 3.13.6). */
.tf_karte {
  position: relative;
  width: min(38rem, 100%);
  max-height: 100%;
  overflow: auto;
  background:
    linear-gradient(180deg, #fbf5e6, #f2e6cc);
  color: var(--tf-tinte);
  border-radius: 0.5rem;
  border: 1px solid #cdb88d;
  padding: 1.1rem 1.2rem 1.3rem;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 6px rgba(255, 255, 255, 0.35),
    inset 0 0 0 7px rgba(141, 106, 38, 0.35);
  /* Papierkorn: zwei sehr blasse Linien, keine Kachel mit Einzelmotiven. */
  background-image:
    repeating-linear-gradient(0deg, rgba(106, 86, 54, 0.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fbf5e6, #f2e6cc);
}

.tf_karte h2 { margin: 0 0 0.3rem; font-size: 1.5rem; color: #2c1d0b; }

/* Kopf des Startmenüs: Logo und Text nebeneinander. Vorher stand der Titel
   allein über dem Lernsatz und das Menü wirkte wie eine Liste. */
.tf_menue_kopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.tf_menue_logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 2px var(--tf-messing-dunkel);
}

.tf_menue_kopf h2 { margin: 0 0 0.2rem; }

@media (max-width: 480px) {
  .tf_menue_logo { width: 42px; height: 42px; }
}

.tf_lernsatz {
  margin: 0 0 0.8rem;
  line-height: 1.45;
  color: #4d3a1c;
}

.tf_abschnitt {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0.9rem 0 0.35rem;
  color: var(--tf-tinte-leise);
}

.tf_abschnitt_weg {
  font-size: 0.76rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

.tf_wahl_reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

/* Modus-Karten: jede Karte sagt in einem Satz, was dieser Modus ist. Drei
   nackte Knöpfe mit Emojis waren die größte Unklarheit im Startmenü. */
.tf_wahl_reihe_wide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.tf_wahl_gross b { font-size: 0.95rem; }

@media (max-width: 620px) {
  .tf_wahl_reihe_wide { grid-template-columns: 1fr; }
}

/* ---------- Einstellungen im Startmenü ----------
   Drei Schalter in einer Zeile: Ton, Vollbild, Ansicht. Sie stehen bewusst
   UNTER dem Start-Knopf - wer schon gewählt hat, will los, und wer die
   Einstellungen sucht, findet sie trotzdem an derselben Stelle wie in der
   Leiste oben (dort dieselben Schalter, nur als Symbole). */
.tf_einstellungen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.6rem;
}

/* Ein Schalter mit sichtbarem Stand: links Symbol, dann Name, dann "an"/
   "aus" rechts. Der Stand steht als Text da, nicht nur als Farbe - sonst
   weiß man im Dark Mode nicht, ob der Schalter jetzt ein oder aus ist. */
.tf_schalter {
  font: inherit;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(58, 36, 20, 0.3);
  background: #fffaf0;
  color: #2c1d0b;
  cursor: pointer;
}

.tf_schalter:hover { background: #fff3d8; }

.tf_schalter_symbol { font-size: 1rem; line-height: 1; }

.tf_schalter_name { font-weight: 700; }

.tf_schalter_wert {
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(58, 36, 20, 0.1);
}

/* "an" ist grün, "aus" bleibt grau - in beiden Themes lesbar. */
.tf_schalter[aria-checked="true"] {
  border-color: var(--tf-messing-dunkel);
  box-shadow: inset 0 0 0 1px var(--tf-messing);
}

.tf_schalter[aria-checked="true"] .tf_schalter_wert {
  background: var(--tf-filz);
  color: #fff;
}

.tf_schalter_gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
}

.tf_schalter_gruppe .tf_schalter_name { margin-right: 0.15rem; font-size: 0.86rem; }

.tf_wahl_klein {
  min-height: 36px;
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
}

/* ---------- Siege ----------
   Was man bisher gewonnen hat, gehört ins Startmenü: die Zahl ist das
   einzige, was einen zum Weiterspielen bewegt. */
.tf_bestwert { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.tf_bestwert b.rot { color: #a52b26; }
.tf_bestwert b.blau { color: #1c4f92; }

.tf_weg {
  font: inherit;
  font-size: 0.74rem;
  color: inherit;
  opacity: 0.75;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  min-height: 30px;
  cursor: pointer;
}

.tf_weg:hover { opacity: 1; }

/* Der Schluss des Startmenüs: Siege, Tasten, Hinweis. Ruhiger als der
   große Knopf darüber, aber alles, was man beim Start wissen will.
   ACHTUNG Name: „fuss" im Klassennamen lässt `leisten-pruef.cjs` hier eine
   Fußzeile vermuten und meldet „Fuß nicht am Fensterrand". Das ist kein Fuß,
   sondern das Ende der Menü-Karte - deshalb `tf_menue_schluss`. */
.tf_menue_schluss {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(58, 36, 20, 0.22);
  font-size: 0.8rem;
  line-height: 1.5;
}

.tf_menue_schluss p { margin: 0.25rem 0; }

.tf_menue_tipp { opacity: 0.85; }

/* Ein Knopf in der Leiste, der "aus" zeigt (Ton stumm, kein Vollbild):
   gedrückt, damit man es auf einen Blick sieht. */
.tf_knopf_aus {
  background: rgba(0, 0, 0, 0.55);
  opacity: 0.8;
}

/* Auswahl-Knöpfe auf Papier: Tinte auf Creme, aktive Wahl in Filzgrün. */
.tf_wahl {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(58, 36, 20, 0.3);
  background: #fffaf0;
  color: #2c1d0b;
  cursor: pointer;
  min-height: 40px;
}

.tf_wahl:hover { background: #fff3d8; }

.tf_wahl.tf_aktiv {
  background: linear-gradient(180deg, #3f8259, #2a5d3e);
  color: #fff8e6;
  border-color: #1f4a30;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tf_wahl_grau { opacity: 0.85; }

/* STEHT HIER ABSICHTLICH NACH .tf_wahl UND NICHT DAVOR: beide Regeln haben
   dieselbe Spezifität, es gewinnt also die spätere. Stand der Block weiter
   oben, zog .tf_wahl sein border-radius: 999px und sein knappes Padding wieder
   über die Karten - die Modus-Karten wurden ovale Pillen, aus denen der Titel
   oben herausragte. Jetzt sind es echte Karten mit abgerundeten Ecken. */
.tf_wahl_gross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border-radius: 0.5rem;
  text-align: left;
  line-height: 1.35;
}

.tf_wahl_gross span {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.9;
}

.tf_wahl_gross.tf_aktiv span { opacity: 1; }

/* Der Start-Knopf: der grüne Filz des Tisches. */
.tf_start {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #1f4a30;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #3f8259, #245137);
  color: #fff8e6;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tf_start:hover { background: linear-gradient(180deg, #4a9265, #2a5d3e); }

.tf_tasten_hinweis,
.tf_modus_hinweis {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4d3a1c;
}

.tf_netz {
  margin-top: 0.5rem;
  padding: 0.7rem;
  border-radius: 0.5rem;
  background: rgba(63, 130, 89, 0.1);
  border: 1px dashed rgba(47, 107, 71, 0.55);
}

.tf_netz_text {
  margin: 0.3rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.tf_netz_status {
  margin: 0.5rem 0;
  font-weight: 800;
  font-size: 0.92rem;
}

.tf_netz_status[data-art="gut"] { color: #23743d; }
.tf_netz_status[data-art="fehler"] { color: #b3332c; }

/* ---------- Ergebnis: die Urkunde ---------- */
.tf_karte_ende { text-align: center; }

.tf_ende_text { font-size: 1.25rem; font-weight: 800; margin: 0.3rem 0; }

.tf_ende_merk {
  margin: 0.3rem 0 0.8rem;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid var(--tf-messing);
  background: rgba(201, 162, 74, 0.16);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

/* ---------- Kleine Bildschirme (Tablets im Hochformat, Handy) ---------- */
@media (max-width: 620px) {
  /* Die Leiste braucht zwei Zeilen: oben Zurück, Marke und Menü, darunter die
     Werkzeuge. Ohne den Umbruch rutschen Sprachwahl und Knöpfe aus dem Bild
     (gemessen bei 390 px). */
  .tf_leiste {
    flex-wrap: wrap;
    gap: 0.3rem;
    row-gap: 0.3rem;
    padding: 0.35rem 0.45rem 0.4rem;
    min-height: 0;
  }
  .tf_titel { font-size: 0.96rem; }
  .tf_vermerk { display: none; }
  .tf_logo { width: 28px; height: 28px; }
  .tf_zurueck { font-size: 0.8rem; padding: 0.34rem 0.5rem; }
  .tf_zurueck_wort { display: none; }
  .tf_werkzeuge {
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: 0.28rem;
    /* Umbruch als Sicherheitsnetz: kommt eine Sprache mit langem Kürzel oder
       ein neuer Knopf dazu, rutscht er in die nächste Zeile statt aus dem Bild
       (gemessen: 473 px Werkzeuge bei 390 px Fenster). */
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .tf_knopf { font-size: 0.85rem; padding: 0.32rem 0.45rem; }
  .tf_knopf_menue { margin-left: 0; }
  .tf_ansicht_text { display: none; }
  .tf_leiste .jupi_sprachen_select { max-width: 8.4rem; font-size: 0.76rem; }
  /* Leiste ist jetzt zwei Zeilen hoch - Overlay und HUD rücken mit. */
  .tf_overlay { padding: 6.2rem 0.5rem 0.6rem; }
  .tf_hud { top: 6.4rem; }
}

/* Sehr schmale Bildschirme: für alle sieben Werkzeuge ist kein Platz. Kamera,
   Ton und Vollbild stehen im Startmenü unter „Einstellungen" ohnehin noch
   einmal - dort sind sie erreichbar, hier weichen sie (Muster bolzplatz3d).
   Ohne das rücken sie in eine dritte Leistenzeile und die Anzeigetafel
   verschwindet darunter (gemessen bei 390 px). */
@media (max-width: 460px) {
  #tf_kamera, #tf_ton, #tf_vollbild { display: none; }
  /* Mit ❓ UND ℹ️ in der Leiste war die Sprachwahl zu breit: der Menü-Knopf
     rutschte in eine DRITTE Zeile (Leiste 145 px hoch, gemessen bei 390 px).
     Ein schmaleres Auswahlfeld genügt - „Deutsch" und die Kürzel der anderen
     Sprachen passen weiterhin hinein. */
  .tf_leiste .jupi_sprachen_select { max-width: 6.4rem; }
}

@media (max-width: 760px) {
  /* Im Hochformat sitzen die Bildschirmtasten links und rechts am unteren
     Rand. Die Anzeige steht wie im Querformat oben, nur kompakter, damit auf
     dem schmalen Bildschirm mehr vom Tisch übrig bleibt.
     Sie beginnt bewusst UNTER der Leiste und der Hilfe: gleichauf wären
     beide unlesbar. */
  .tf_hud {
    top: 6.4rem;
    left: 0.3rem;
    right: 0.3rem;
    transform: none;
    max-width: none;
    padding: 0.28rem 0.4rem 0.34rem;
    gap: 0.12rem;
    border-radius: 0.5rem;
  }
  .tf_tafel { gap: 0.5rem; }
  .tf_hud_zeile { gap: 0.5rem; font-size: 0.85rem; }
  .tf_tor b { font-size: 1.45rem; }
  .tf_messung, .tf_stangenwahl { font-size: 0.7rem; gap: 0.45rem; }
  .tf_meldung { font-size: 0.7rem; }
  .tf_touch { bottom: 0.3rem; left: 0.3rem; }
  .tf_touch.rechts { right: 0.3rem; }
  .tf_t_stick { width: 5rem; height: 5rem; }
  .tf_karte { padding: 0.9rem 0.9rem 1rem; }
  .tf_hilfe { width: calc(100vw - 1.2rem); }
}

@media (max-height: 560px) {
  .tf_tor b { font-size: 1.3rem; }
  /* Kurze Bildschirme: Hebel und Beschriftung kleiner, damit die Leiste nicht
     die halbe Höhe frisst (siehe die Querformat-Regel weiter oben). */
  .tf_t_stick { width: 4.4rem; height: 4.4rem; }
  .tf_t_stick_achs { display: none; }
  .tf_hud { top: 4rem; }
}

/* Wer keine Bewegung wünscht: nur kurze Überblendungen. */
@media (prefers-reduced-motion: reduce) {
  .tf_countdown { animation: none; }
  .tf_t_stick_achs { animation: none; opacity: 0.7; }
}