:root{
  --paper:#F1EFE9; --surface:#FBFAF6; --sunk:#E8E4DA;
  --ink:#191712; --muted:#6E685B; --line:#DAD4C6; --line-soft:#E6E1D5;
  --accent:#A9540A; --accent-bg:#F6E6D2;
  --good:#2C6B4C; --good-bg:#DCEBE1;
  --bad:#A32C22; --bad-bg:#F4DFDC;
  --f-disp:'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body:'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono:'Consolas', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15140F; --surface:#1E1C16; --sunk:#100F0B;
    --ink:#EDE9DE; --muted:#9C9484; --line:#332F24; --line-soft:#272419;
    --accent:#FFAC46; --accent-bg:#33240F;
    --good:#63C494; --good-bg:#12261C;
    --bad:#F0837A; --bad-bg:#2E1512;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--f-body);
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:700; line-height:1.2; margin:0}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px}
.num,code{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- Gerüst ---------- */
.app{max-width:560px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}
@media (min-width:900px){ .app{max-width:1100px} }

.kopf{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.7rem 1rem .6rem; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.kopf .marke{font-weight:800; letter-spacing:-.01em}
.kopf .info{font-family:var(--f-mono); font-size:.76rem; color:var(--muted)}

.reiter{display:flex; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:44px; z-index:19}
.reiter button{
  flex:1; border:0; background:none; color:var(--muted); cursor:pointer;
  font-family:var(--f-mono); font-size:.76rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.6rem .2rem; border-bottom:2.5px solid transparent;
}
.reiter button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
.punkt{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:.3rem; vertical-align:middle}

.inhalt{flex:1; padding:.9rem; display:flex; flex-direction:column; gap:.8rem}
@media (min-width:900px){
  .inhalt{padding:1.4rem}
  .spalten{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:start}
}

/* ---------- Karten ---------- */
.karte{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem}
.karte > h3{
  font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.karte.hebt{border-color:var(--accent)}
.karte.hebt > h3{color:var(--accent)}

.zeile{display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.35rem 0}
.zeile + .zeile{border-top:1px solid var(--line-soft)}
.zeile .bez{font-size:.93rem}
.zeile .bez small{display:block; color:var(--muted); font-size:.78rem; line-height:1.35}

/* ---------- Bedienelemente ---------- */
.knopf{
  cursor:pointer; font-weight:600; font-size:.9rem; padding:.5rem .9rem; border-radius:8px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); width:100%;
}
.knopf:hover{border-color:var(--accent); color:var(--accent)}
.knopf:disabled{opacity:.45; cursor:default}
.knopf:disabled:hover{border-color:var(--line); color:var(--ink)}
.knopf.wichtig{background:var(--accent); border-color:var(--accent); color:var(--surface)}
@media (prefers-color-scheme: dark){ .knopf.wichtig{color:#15140F} }
.knopf.schmal{width:auto; padding:.32rem .6rem; font-size:.8rem}
.knopf.gefahr:hover{border-color:var(--bad); color:var(--bad)}
.knopfreihe{display:flex; gap:.4rem; flex-wrap:wrap}
.knopfreihe .knopf{width:auto; flex:1; min-width:110px}

.eingabe{
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:8px; padding:.42rem .6rem; width:100%;
}
.eingabe:focus{border-color:var(--accent)}
.holz{
  width:82px; text-align:right; font-family:var(--f-mono); font-size:1.15rem;
  font-weight:600; font-variant-numeric:tabular-nums; padding:.34rem .5rem;
}
.zaehler{display:flex; align-items:center; gap:.25rem}
.zaehler button{
  width:34px; height:34px; cursor:pointer; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); border-radius:7px; font-size:17px; line-height:1;
}
.zaehler button:hover{border-color:var(--accent); color:var(--accent)}
.zaehler .wert{min-width:28px; text-align:center; font-family:var(--f-mono); font-weight:600}

.marke-pill{
  display:inline-block; font-family:var(--f-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:.16rem .5rem; border-radius:999px;
  background:var(--sunk); color:var(--muted); white-space:nowrap;
}
.marke-pill.ja{background:var(--good-bg); color:var(--good)}
.marke-pill.nein{background:var(--bad-bg); color:var(--bad)}
.marke-pill.akz{background:var(--accent-bg); color:var(--accent)}

.hinweis{font-family:var(--f-mono); font-size:.74rem; line-height:1.5; margin-top:.5rem; color:var(--muted)}
.hinweis.ok{color:var(--good)}
.hinweis.fehler{color:var(--bad)}

/* ---------- Tabellen ---------- */
.tabellenrahmen{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.9rem}
th{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; text-align:left; padding:.3rem .4rem;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:.4rem .4rem; border-bottom:1px solid var(--line-soft)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
tr.ich td{background:var(--accent-bg); font-weight:600}
tr.inaktiv td{color:var(--muted)}

/* ---------- Namensliste ---------- */
.namen{display:flex; flex-direction:column; gap:.2rem; max-height:56vh; overflow-y:auto}
.namen button{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  text-align:left; padding:.55rem .7rem; font-size:.95rem; font-weight:500;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:8px; cursor:pointer; width:100%;
}
.namen button:hover{border-color:var(--accent)}

/* ---------- Melder ---------- */
.melder{
  position:fixed; left:50%; transform:translateX(-50%); bottom:1rem; z-index:60;
  max-width:min(460px, calc(100% - 2rem)); padding:.65rem 1rem; border-radius:10px;
  background:var(--ink); color:var(--paper); font-size:.9rem; box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
}
.melder.gut{background:var(--good); color:#fff}
.melder.schlecht{background:var(--bad); color:#fff}
.melder[hidden]{display:none !important}

/* ---------- Mannschaftsumschalter beim Tannenbaum ----------
   Sieht nur, wer für beide Seiten einträgt. Bewusst NICHT wie der
   Vertretungsmodus eingefärbt: »für die Schere eintragen« ist etwas anderes
   als »als Michael eintragen«. */
.tb-seitenwahl{display:flex; gap:.4rem; margin-top:.8rem}
.tb-seitenwahl button{
  flex:1; min-height:52px; display:flex; flex-direction:column; justify-content:center;
  gap:.1rem; padding:.4rem; border:2px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--muted); font-weight:600; cursor:pointer;
}
.tb-seitenwahl button small{font-family:var(--f-mono); font-size:.72rem; font-weight:400}
.tb-seitenwahl button[aria-pressed="true"]{
  border-color:var(--accent); background:var(--accent-bg); color:var(--accent);
}

/* ---------- Rückfrage ---------- */
/* Ersetzt confirm(). Große Tasten, weil am Kegelabend mit dem Daumen bedient wird. */
.frage[hidden]{display:none !important}
.frage-schatten{position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.5)}
.frage-kasten{
  position:fixed; z-index:111; left:50%; top:var(--sichtfenster-mitte,50%); transform:translate(-50%,-50%);
  width:min(420px, calc(100% - 2rem)); padding:1.2rem;
  max-height:calc(var(--sichtfenster-hoehe, 100dvh) - 1.5rem); overflow-y:auto;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.6);
}
.inhalt input,.inhalt textarea,.frage-kasten input,.frage-kasten textarea{scroll-margin-top:16px;scroll-margin-bottom:110px}
html{scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.frage-kasten p{margin:0 0 1rem; font-size:1.05rem; line-height:1.45}
.frage-kasten .frage-hinweis{margin-top:-.55rem; color:var(--muted); font-size:.88rem}
.frage-tasten{display:flex; gap:.6rem; flex-wrap:wrap}
.frage-tasten .knopf{flex:1; min-width:120px; min-height:48px; justify-content:center}
/* Eingabefelder im Rückfragekasten — ersetzt prompt(). Die Beschriftung steht über
   dem Feld, damit auf schmalen Geräten nichts umbricht oder abgeschnitten wird. */
.frage-felder{display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem}
.frage-felder label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted)}
.frage-felder .eingabe{width:100%; min-height:48px; font-size:1.05rem}
.frage-fehler{margin:0 0 .9rem; font-size:.9rem; color:var(--bad); line-height:1.4}
.frage-fehler[hidden]{display:none}

/* Überschrift und primäre Aktion teilen sich bei Verwaltungslisten eine Zeile.
   Auf dem Handy darf der Knopf darunter auf volle Breite springen. */
.kartenkopf{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.75rem}
.kartenkopf h3{margin:0 0 .2rem}
.kartenkopf p{margin:0; color:var(--muted); font-size:.85rem; line-height:1.4}
.kartenkopf>div{flex:1 1 auto; min-width:0}
.kartenkopf>.knopf{flex:0 0 auto; width:auto; white-space:nowrap}
@media(max-width:560px){
  .kartenkopf{display:block}
  .kartenkopf>.knopf{width:100%; margin-top:.7rem}
}

/* ---------- Oberflächenwahl ---------- */
.cx-vorschau{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:.6rem .9rem; margin-bottom:.8rem; border:1px solid var(--line); border-radius:10px;
  background:var(--accent-bg); color:var(--ink); font-size:.85rem;
}
.ui-option{padding:.7rem 0; border-top:1px solid var(--line-soft)}
.ui-option:first-of-type{border-top:0}
.ui-option .zeile{gap:.5rem; flex-wrap:wrap}

/* ---------- Verbindungsanzeige ----------
   Der Pi steht im Keller, das WLAN reicht nicht überall gleich weit. Ohne diesen
   Streifen läuft die Abfrageschleife stumm ins Leere und niemand merkt, dass die
   letzte Eingabe vielleicht nicht angekommen ist. */
.verbindung{
  padding:.55rem .9rem; font-size:.88rem; line-height:1.35; text-align:center;
  background:var(--bad-bg); color:var(--bad); border-bottom:1px solid var(--line);
}
.verbindung.zurueck{background:var(--good-bg); color:var(--good)}
/* Die Aufforderung bleibt stehen, bis sie jemand weggetippt hat — deshalb sieht sie
   anders aus als die folgenlose »Wieder verbunden«-Meldung und hat einen Knopf. */
.verbindung.bleibt{
  background:var(--accent-bg); color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
}
.verbindung.bleibt button{
  border:1px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:8px; min-height:36px; padding:.3rem .8rem; font-weight:700; cursor:pointer;
}
.verbindung[hidden]{display:none !important}

/* Nachträglich geändertes Ergebnis. Klein, aber antippbar — auf dem Handy gibt es
   kein Überfahren mit der Maus. */
.korrigiert{
  background:none; border:0; padding:0 0 0 .15rem; cursor:pointer;
  color:var(--accent); font:inherit; font-weight:700; line-height:1;
}

.mitte{text-align:center}
.gross{font-family:var(--f-mono); font-size:2rem; font-weight:600; color:var(--accent); line-height:1.1}
.leer{color:var(--muted); font-size:.9rem; padding:.4rem 0}

/* ---------- Anzeige für den Laptop vorn an der Bahn ---------- */
.anzeige{display:flex; flex-direction:column; gap:.9rem}
.anzeige .karte > h3{font-size:.95rem}
table.gross-tab{font-size:1.35rem}
table.gross-tab th{font-size:.75rem}
table.gross-tab td{padding:.5rem .5rem}
.anzeige p{font-size:1.15rem}

/* ---------- Spielauswahl ---------- */
.spielwahl{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.45rem; margin-bottom:.7rem}
.spielkachel{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; cursor:pointer;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:9px; padding:.6rem .7rem; text-align:left;
}
.spielkachel strong{font-size:.98rem}
.spielkachel small{color:var(--muted); font-size:.75rem; line-height:1.3}
.spielkachel:hover{border-color:var(--accent)}
.spielkachel.aktiv{border-color:var(--accent); background:var(--accent-bg)}
.spielkachel.aktiv strong{color:var(--accent)}
.spieloptionen{border-top:1px solid var(--line-soft); padding-top:.7rem}
.schalter{display:flex; align-items:center; gap:.5rem; padding:.24rem 0; font-size:.9rem; flex-wrap:wrap}

/* ---------- Wertungswürfe: zwei Zeilen je Bahn, auf breit eine ---------- */
.wurfzeile{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; padding:.45rem 0}
.wurfzeile + .wurfzeile{border-top:1px solid var(--line-soft)}

.wurfoben{display:flex; align-items:center; gap:.5rem; flex:1 1 190px}
.wurfunten{display:flex; align-items:center; gap:.9rem; flex:0 0 auto}

.wurfbahn{
  font-family:var(--f-mono); font-size:.7rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; width:3.6rem;
}
.wurfbahn.fertig{color:var(--good)}
.wurfzeile .holz{flex:1; min-width:0; font-size:1.2rem; padding:.3rem .45rem}
.wurfspeichern{width:44px; flex:0 0 auto; padding:.4rem 0; font-size:1rem}

.wurfzaehler{
  display:flex; align-items:center; gap:.3rem;
  font-family:var(--f-mono); font-size:.68rem; color:var(--muted); white-space:nowrap;
}
.wurfzaehler .zaehler button{width:30px; height:30px; font-size:15px}
.wurfzaehler .zaehler .wert{min-width:18px}

/* Der Hinweis nimmt die ganze Breite und verschwindet, wenn es nichts zu sagen gibt. */
.wurfhinweis{flex:1 0 100%; margin-top:0}
.wurfhinweis:empty{display:none}

/* ---------- Etwas dichter insgesamt ---------- */
.inhalt{gap:.6rem; padding:.7rem}
.karte{padding:.65rem .75rem}
.karte > h3{margin-bottom:.45rem}
.zeile{padding:.28rem 0}
.hinweis{margin-top:.35rem}
@media (min-width:900px){ .inhalt{padding:1.1rem; gap:.7rem} }