/* =============================================================================
   Kniffel — Gestaltung

   Eigenes Erscheinungsbild, bewusst NICHT das Ministry-CI: Das hier ist ein
   privates Familienprojekt. Angelehnt an das echte Spiel — Filztisch, Holz,
   ein Blockformular aus Papier. Schrift groß genug, um quer über den Tisch
   gelesen zu werden.

   Schriften kommen aus dem System. Kein CDN, weil die App offline auf einem
   Tablet laufen muss.
   ========================================================================== */

:root {
  /* --- Sichere Ränder ---
     Über Variablen statt direkt über env(), weil sich bei gedrehtem Bild oben
     und unten tauschen: Sonst läge das Polster für den Home-Indicator plötzlich
     am Kopf des Bildschirms. Siehe .drehbuehne.gedreht. */
  --sa-oben:  env(safe-area-inset-top);
  --sa-unten: env(safe-area-inset-bottom);
  /* --- Tischfläche --- */
  --filz:        #3a6b5c;
  --filz-tief:   #274c41;
  /* --- Holz --- */
  --holz:        #8b5e34;
  --holz-tief:   #5f3f22;
  /* --- Papier (Blockformular) --- */
  --papier:      #f4ead6;
  --papier-warm: #ece0c8;
  --papier-linie:#c9b895;
  /* --- Schrift --- */
  --tinte:       #2b2118;
  --tinte-schwach:#7a6a58;
  /* --- Akzente --- */
  --rotstift:    #a83232;
  --gold:        #c8963e;
  --gold-hell:   #e6c98a;
  /* --- Würfel --- */
  --wuerfel:     #faf6ee;
  --auge:        #2b2118;
  /* Kantenlänge eines Würfels. Steht bewusst NICHT auf .wuerfel selbst, sonst
     könnten Halteleiste und Wurffläche sie nicht unterschiedlich setzen. */
  --kante:       60px;
  /* --- Würfelbecher (Leder, von oben gesehen) --- */
  --becher-leder:#a9743f;
  --becher-tief: #5a3717;
  --becher-innen:#241407;

  --schatten-flach: 0 1px 2px rgba(0,0,0,.25);
  --schatten-tief:  0 6px 16px rgba(0,0,0,.35);
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;

  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --band-hoehe: 58px;
}

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

/* Muss vor allen Komponenten stehen: sonst gewinnt jede Klasse mit display
   gegen das eingebaute [hidden] und versteckte Karten bleiben sichtbar. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--tinte);
  background: var(--filz-tief);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 4px);
  -webkit-font-smoothing: antialiased;
  /* In der WebView stört sonst Textmarkierung, Lupe und Doppeltipp-Zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
button { font: inherit; touch-action: manipulation; }

/* ---------------------------------------------------------------- Screens */
/* ---------------------------------------------------------------------------
   Drehbühne — dreht das Bild zu dem, der gegenüber sitzt

   Der Kasten ist IMMER da (nicht nur im gedrehten Zustand), damit die Drehung
   überhaupt animiert werden kann; ein Wechsel der display-Art ließe sich nicht
   überblenden. Weil er dadurch ständig über dem Startbildschirm liegt, nimmt er
   selbst keine Klicks an — die reichen seine Kinder wieder ein.

   Ein transform macht das Element zum Bezugsrahmen für "position: fixed" der
   Nachkommen. Das ist hier kein Problem, sondern der Zweck: Die Bühne füllt
   exakt den Bildschirm, also liegen Spielfläche und Overlays weiterhin genau so,
   wie sie liegen sollen — nur eben mitgedreht.
   ------------------------------------------------------------------------- */
.drehbuehne {
  position: fixed; inset: 0;
  pointer-events: none;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 600ms cubic-bezier(.65,0,.35,1);
}
.drehbuehne > * { pointer-events: auto; }
.drehbuehne.gedreht {
  transform: rotate(180deg);
  /* Oben und unten haben getauscht — die sicheren Ränder also auch */
  --sa-oben:  env(safe-area-inset-bottom);
  --sa-unten: env(safe-area-inset-top);
}

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

.startinhalt {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(24px, var(--sa-oben)) 20px max(24px, var(--sa-unten));
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.startinhalt > * { width: 100%; max-width: 480px; }

.titel { text-align: center; padding: 12px 0 4px; }
.titel h1 { font-size: clamp(34px, 8vw, 48px); color: var(--papier); letter-spacing: .01em; }
.untertitel { color: var(--gold-hell); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.titelwuerfel { display: flex; justify-content: center; margin-bottom: 14px; }
.titelwuerfel { --kante: 68px; --rot: -8deg; }
.titelwuerfel .wuerfel { display: block; cursor: default; }

/* ----------------------------------------------------------------- Karten */
.karte {
  background: var(--papier);
  border-radius: var(--r-l);
  border: 1px solid var(--papier-linie);
  box-shadow: var(--schatten-tief);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.karte h2 { font-size: 22px; }
.karte.fortsetzen { border-left: 6px solid var(--gold); }
.karte.fortsetzen p { color: var(--tinte-schwach); }

/* ----------------------------------------------------------------- Knöpfe */
.knopf {
  background: var(--holz);
  color: #fff8ec;
  border: 1px solid var(--holz-tief);
  border-bottom-width: 3px;
  border-radius: var(--r-m);
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--schatten-flach);
}
.knopf:active { transform: translateY(1px); border-bottom-width: 2px; }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }
.knopf.gross { padding: 16px 24px; font-size: 19px; width: 100%; }
.knopf.leise { background: var(--papier-warm); color: var(--tinte); border-color: var(--papier-linie); }
.knopf.warnung { background: var(--rotstift); border-color: #7d2424; }

.textknopf {
  background: none; border: 0; color: var(--tinte-schwach);
  text-decoration: underline; text-underline-offset: .18em;
  padding: 10px; cursor: pointer; font-size: 15px;
}
.textknopf.hell { color: var(--gold-hell); }
.startinhalt > .textknopf { color: var(--gold-hell); text-align: center; }

.hinweiszeile { color: var(--tinte-schwach); font-size: 15px; }

/* Zeigt im Menü, ob die App ohne Netz startet. Ohne Entwicklerwerkzeuge auf
   einem Tablet ist das sonst nicht herauszufinden. */
.offlinestand {
  font-size: 14px; line-height: 1.35;
  color: var(--tinte-schwach);
  border-left: 3px solid var(--papier-linie);
  padding: 2px 0 2px 10px;
}
.offlinestand.bereit { color: #2f6b4f; border-left-color: #2f6b4f; }
.offlinestand.fehlt  { color: var(--rotstift); border-left-color: var(--rotstift); }

/* ---------------------------------------------------- Spielerliste (Start) */
.spielerliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spielerliste li {
  display: flex; align-items: center; gap: 10px;
  background: var(--papier-warm);
  border: 1px solid var(--papier-linie);
  border-radius: var(--r-m);
  padding: 10px 12px;
}
.spielerliste .punkt { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.spielerliste .nm { flex: 1; font-weight: 600; }
.spielerliste .seite {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: #fffdf7;
  border: 1px solid var(--papier-linie);
  border-radius: var(--r-m);
  color: var(--tinte-schwach);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 9px;
  cursor: pointer;
}
.spielerliste .seite .pfeil { font-size: 15px; line-height: 1; }
/* Gegenüber wird hervorgehoben — das ist die Abweichung vom Normalfall */
.spielerliste .seite[data-seite="oben"] {
  background: var(--gold-hell);
  border-color: var(--gold);
  color: var(--tinte);
}
.spielerliste .seite[data-seite="oben"] .pfeil { transform: rotate(180deg); }

.spielerliste .weg { background: none; border: 0; color: var(--rotstift); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }

.namenszeile { display: flex; gap: 8px; }
.namenszeile input {
  flex: 1; min-width: 0;
  padding: 12px; border-radius: var(--r-m);
  border: 1px solid var(--papier-linie); background: #fffdf7; color: var(--tinte);
}
.vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.vorschlag {
  background: none; border: 1px dashed var(--papier-linie); color: var(--tinte-schwach);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 15px;
}
.vorschlag:disabled { opacity: .4; }

/* ------------------------------------------------------------- Spielband */
.spielband {
  flex: none;
  height: calc(var(--band-hoehe) + var(--sa-oben));
  padding-top: var(--sa-oben);
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px; padding-right: 8px;
  background: var(--spielerfarbe, var(--holz));
  color: #fff8ec;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  position: relative; z-index: 5;
}
.bandname { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.amzug { font-family: var(--font-display); font-size: 25px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amzug::before { content: "▸ "; color: var(--gold-hell); }
.bandrunde { font-size: 14px; opacity: .85; white-space: nowrap; }
.bandmenue { background: rgba(0,0,0,.18); border: 0; color: inherit; border-radius: var(--r-s); padding: 8px 12px; font-size: 14px; cursor: pointer; }

/* ----------------------------------------------------------------- Tisch */
.tisch { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.blockbereich { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; }

/* ---------------------------------------------------------- Blockformular */
.blockformular {
  display: grid;
  /* Alle Zeilen gleich hoch. Vorher richtete sich jede Zeile nach ihrem Inhalt,
     dadurch waren Zeilen mit Zahl deutlich höher als leere und der Block sah
     ausgefranst aus. minmax(...,auto) lässt eine Zeile trotzdem wachsen, wenn
     ein Feldname umbricht — abgeschnitten wird nie etwas. */
  --zeile: 44px;
  grid-auto-rows: minmax(var(--zeile), auto);
  grid-template-columns: minmax(118px, 1.5fr) repeat(var(--spalten, 2), minmax(56px, 1fr));
  background: var(--papier);
  border: 2px solid var(--holz-tief);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--schatten-tief);
  min-width: fit-content;
}
.zelle {
  /* Kein senkrechtes Polster: die Zeilenhöhe kommt aus --zeile, sonst addiert
     sich beides und die Zeilen werden wieder unterschiedlich hoch. */
  padding: 0 8px;
  border-bottom: 1px solid var(--papier-linie);
  border-right: 1px solid rgba(201,184,149,.5);
  display: flex; align-items: center;
  font-variant-numeric: tabular-nums;
}
.zelle.label {
  position: sticky; left: 0; z-index: 2;
  background: var(--papier-warm);
  font-weight: 600; font-size: 15px;
  border-right: 2px solid var(--papier-linie);
}
.zelle.kopf {
  background: var(--holz-tief); color: #fff8ec;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  justify-content: center; text-align: center; padding: 0 6px;
  position: sticky; top: 0; z-index: 3;
  border-bottom: 2px solid var(--holz-tief);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zelle.kopf.label { z-index: 4; }
.zelle.kopf.dran { background: var(--gold); color: var(--tinte); }
.zelle.wert { justify-content: center; font-size: clamp(20px, 3vw, 30px); font-family: var(--font-display); }
.zelle.wert.aktivspalte { background: rgba(200,150,62,.12); }
.zelle.summe { background: var(--papier-warm); font-weight: 700; }
.zelle.wert.summe { flex-direction: column; line-height: 1.05; }
.zelle.gesamt { background: var(--holz-tief); color: #fff8ec; font-weight: 700; border-bottom: 0; }
.zelle.gesamt.label { background: var(--holz-tief); color: #fff8ec; }
/* Grenze zwischen oberem und unterem Block */
.zelle.blockstart { border-top: 3px solid var(--holz-tief); }

.zelle .eingetragen { color: var(--tinte); }
/* Eine eingetragene Null ist durchgestrichen, nicht rot — Rot ist in diesem
   Block ausschließlich die Sprache für "so kannst du den Wurf jetzt setzen". */
.zelle .gestrichen { color: var(--tinte-schwach); text-decoration: line-through; text-decoration-thickness: 2px; }
.zelle .vorschau { color: var(--tinte-schwach); font-size: .5em; opacity: .4; }
.zelle .bonusrest { display: block; font-size: 12px; font-family: var(--font-body); color: var(--tinte-schwach); font-weight: 400; }

/* Antippbare freie Felder des aktiven Spielers */
button.zelle.wert {
  background: none; border-radius: 0; cursor: pointer; width: 100%;
  border-bottom: 1px solid var(--papier-linie);
  border-right: 1px solid rgba(201,184,149,.5);
  border-top: 0; border-left: 0;
}
/* Der rote Rotstift: Felder, die dieser Wurf gerade füllen kann, tragen ihren
   Punktwert groß und rot. Wo nur eine Null zu holen wäre, bleibt es beim
   blassen Grau — damit sticht auf einen Blick heraus, was sich lohnt. */
button.zelle.wert.zaehlt { background: rgba(168,50,50,.07); }
button.zelle.wert.zaehlt .vorschau {
  color: var(--rotstift);
  font-size: 1em;
  font-weight: 700;
  opacity: 1;
  display: inline-block;
  transform: rotate(-4deg);
}
button.zelle.wert.gewaehlt {
  background: var(--gold); color: var(--tinte);
  box-shadow: inset 0 0 0 3px var(--holz-tief);
}
/* Im gewählten Feld steht der Wert immer groß und dunkel — auch eine Null,
   die sonst blass bleibt. Sonst wäre auf dem Gold nicht zu lesen, was man
   gerade im Begriff ist einzutragen. */
button.zelle.wert.gewaehlt .vorschau {
  color: var(--tinte); font-size: 1em; font-weight: 700; opacity: 1;
}
/* Joker-Wertung bekommt ein kleines hochgestelltes J */
button.zelle.wert.joker.zaehlt .vorschau::after {
  content: "J";
  font-family: var(--font-body); font-size: .38em; font-weight: 700;
  vertical-align: super; margin-left: .1em; color: var(--holz-tief);
}
button.zelle.wert:disabled { cursor: default; }

/* ============================================================= Würfelbereich
   Drei Zonen übereinander: die Halteleiste als Regal für alles, was behalten
   wird; darunter der grüne Filz, auf dem gewürfelt wird; in dessen unterer
   rechter Ecke der Becher. Der Becher IST der Wurfknopf — einen zweiten gibt
   es nicht, sonst hätte dieselbe Handlung zwei Orte.
   ========================================================================== */
.wuerfelbereich {
  --kante: clamp(52px, 14vw, 76px);
  flex: none;
  /* Höhe so gewählt, dass der Becher (2,2 Würfelkanten) in der Ecke Platz hat,
     ohne dass ihm ein Würfelplatz zu nahe kommt. Wer sie verkleinert, muss die
     STREUPLAETZE in app.js gegenprüfen. */
  height: clamp(320px, 46vh, 440px);
  background: linear-gradient(180deg, var(--holz) 0%, var(--holz-tief) 100%);
  border-top: 3px solid var(--holz-tief);
  padding: 10px 12px max(12px, var(--sa-unten));
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.3);
}
.wurfhinweis {
  flex: none;
  /* Kein display:flex — sonst wird jedes Textstück ein eigenes Flex-Element und
     die Zeile zerfällt bei schmaler Spalte in einzelne Wortblöcke. */
  color: #fff8ec; font-size: 15px; text-align: center; line-height: 1.35;
  /* Polsterung und Mindesthöhe stehen fest, damit die Zeile beim Umschalten
     auf die zweizeilige Rückfrage nicht wächst und die Würfel verrutschen. */
  padding: 6px 12px; min-height: 3.3em;
  border-radius: var(--r-m);
  max-width: 560px; margin: 0 auto; width: 100%;
}
.wurfhinweis .betont { color: var(--gold-hell); font-weight: 700; }

/* Ein Feld ist gewählt: aus der Hinweiszeile wird die Rückfrage. Sie ersetzt
   den Knopf, der früher unten in der Fußleiste saß. */
.wurfhinweis.bestaetigen {
  background: var(--gold); color: var(--tinte);
  font-weight: 600;
  box-shadow: var(--schatten-flach);
}
.wurfhinweis.bestaetigen b { color: var(--holz-tief); }
.wurfhinweis .waskommt, .wurfhinweis .nochmal { display: block; }
.wurfhinweis .nochmal { font-size: 13px; opacity: .78; }

/* ---------------------------------------------------------- Halteleiste */
.halteleiste {
  --kante: clamp(38px, 9vw, 58px);
  flex: none;
  min-height: calc(var(--kante) + 16px);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-m);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.35);
}
.haltehinweis {
  color: rgba(255,248,236,.45);
  font-size: 13px; letter-spacing: .04em;
}

/* ------------------------------------------------------------ Wurffläche */
.wurfflaeche {
  position: relative;
  flex: 1; min-height: 0;
  border-radius: var(--r-m);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.07), transparent 72%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 4px),
    var(--filz);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), inset 0 6px 18px rgba(0,0,0,.3);
  overflow: hidden;
}
.tischhinweis {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,248,236,.42); font-size: 16px; letter-spacing: .06em;
}

/* Die Würfel liegen absolut auf dem Streufeld. Es ist um eine halbe Würfel-
   kante nach innen gesetzt, damit kein Würfel über den Filzrand hinausragt —
   auch dann nicht, wenn sein Platz ganz außen liegt. */
.streufeld {
  position: absolute;
  inset: calc(var(--kante) / 2 + 8px);
}
.streufeld .wuerfel {
  position: absolute;
  margin: 0;
  box-shadow: 0 9px 16px rgba(0,0,0,.45);
  transform: translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 0px)))
             rotate(var(--rot, 0deg)) scale(var(--fs, 1));
}
/* Während der Becher darübersteht, sind die Würfel unter ihm verschwunden */
.streufeld.verdeckt .wuerfel { opacity: 0; --fs: .7; }
/* ... und purzeln danach gestaffelt heraus */
.streufeld.gefallen .wuerfel { animation: gefallen 240ms cubic-bezier(.2,.9,.3,1) both; }
.streufeld.gefallen .wuerfel:nth-child(2) { animation-delay: 25ms; }
.streufeld.gefallen .wuerfel:nth-child(3) { animation-delay: 50ms; }
.streufeld.gefallen .wuerfel:nth-child(4) { animation-delay: 75ms; }
.streufeld.gefallen .wuerfel:nth-child(5) { animation-delay: 100ms; }
@keyframes gefallen {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) - 28deg)) scale(1.4); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
}

/* ---------------------------------------------------------------- Würfel */
.wuerfel {
  width: var(--kante); height: var(--kante);
  background: var(--wuerfel);
  border: 1px solid #d8cfbe;
  border-radius: 16%;
  box-shadow: var(--schatten-tief);
  /* Nicht in Prozent: prozentuales Padding bezieht sich auf den Elternblock,
     nicht auf den Würfel — die Würfel würden dadurch riesig. */
  padding: calc(var(--kante) * 0.13);
  cursor: pointer;
  position: relative;
  /* translate steht außen, damit die FLIP-Verschiebung beim Wandern zwischen
     Filz und Halteleiste nicht von der Würfeldrehung mitgedreht wird. */
  transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--rot, 0deg)) scale(var(--fs, 1));
  transition: transform .34s cubic-bezier(.2,.8,.25,1), opacity .18s linear, box-shadow .2s ease;
}
.wuerfel:disabled { cursor: default; }
.wuerfel .augen {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%;
}
.wuerfel .augen i { border-radius: 50%; background: var(--auge); opacity: 0; align-self: center; justify-self: center; width: 74%; aspect-ratio: 1; }
/* Augenbilder: 1 = Mitte, 2 = Diagonale, … */
.wuerfel[data-wert="1"] .augen i:nth-child(5),
.wuerfel[data-wert="2"] .augen i:nth-child(1),
.wuerfel[data-wert="2"] .augen i:nth-child(9),
.wuerfel[data-wert="3"] .augen i:nth-child(1),
.wuerfel[data-wert="3"] .augen i:nth-child(5),
.wuerfel[data-wert="3"] .augen i:nth-child(9),
.wuerfel[data-wert="4"] .augen i:nth-child(1),
.wuerfel[data-wert="4"] .augen i:nth-child(3),
.wuerfel[data-wert="4"] .augen i:nth-child(7),
.wuerfel[data-wert="4"] .augen i:nth-child(9),
.wuerfel[data-wert="5"] .augen i:nth-child(1),
.wuerfel[data-wert="5"] .augen i:nth-child(3),
.wuerfel[data-wert="5"] .augen i:nth-child(5),
.wuerfel[data-wert="5"] .augen i:nth-child(7),
.wuerfel[data-wert="5"] .augen i:nth-child(9),
.wuerfel[data-wert="6"] .augen i:nth-child(1),
.wuerfel[data-wert="6"] .augen i:nth-child(3),
.wuerfel[data-wert="6"] .augen i:nth-child(4),
.wuerfel[data-wert="6"] .augen i:nth-child(6),
.wuerfel[data-wert="6"] .augen i:nth-child(7),
.wuerfel[data-wert="6"] .augen i:nth-child(9) { opacity: 1; }

/* Behalten: der Platz in der Halteleiste sagt es schon, der goldene Rand sagt
   es noch einmal — Lage allein reicht bei Sonnenlicht am Esstisch nicht. */
.wuerfel.gehalten { box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 0 3px var(--gold); }

/* ------------------------------------------------------------ Würfelbecher
   Von oben gesehen: Lederrand außen, dunkle Öffnung innen. Die Reise in die
   Mitte steckt in .ueber und wird von app.js in --bx/--by eingemessen; das
   Schütteln sitzt auf dem inneren Element, damit sich die beiden Transforms
   nicht gegenseitig überschreiben. */
.becher {
  /* Der Becher hängt an der Würfelkante, nicht am Bildschirm: gut das Doppelte
     einer Kante, so wie ein Lederbecher neben einem Würfel steht. Dadurch
     stimmt das Verhältnis in jedem Format und auf jedem Gerät.
     Er ragt ein Stück über den Filzrand hinaus und wird dort abgeschnitten —
     er liegt am Tischrand, nicht mitten auf der Spielfläche. */
  --gr: calc(var(--kante) * 2.2);
  position: absolute; z-index: 3;
  right: calc(var(--gr) * -0.12);
  bottom: calc(var(--gr) * -0.12);
  width: var(--gr); height: var(--gr);
  padding: 0; border: 0; background: none; cursor: grab;
  transform: translate(0, 0) scale(1);
  transition: transform 400ms cubic-bezier(.25,.9,.35,1);
  /* Ohne das scrollt beim Ziehen die Seite statt den Becher zu bewegen, und
     der Browser wartet erst 300 ms ab, ob eine Wischgeste daraus wird. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
/* In der Hand: folgt dem Finger ohne jede Verzögerung — ein Übergang würde
   sich wie Gummi anfühlen. Der Weg zurück in die Ecke nimmt dann wieder die
   400 ms aus der Grundregel, weil die Klasse einfach wegfällt. */
.becher.gegriffen {
  transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(1.12);
  transition: none;
  cursor: grabbing;
  z-index: 4;
}
.becher.gegriffen .becherleib { filter: brightness(1.06); }

/* MUSS nach .gegriffen stehen: Beide haben dieselbe Spezifität, es gewinnt also
   die spätere Regel. Läuft die Automatik, soll sie den Becher führen — bliebe
   .gegriffen aus einer abgebrochenen Geste hängen, stünde er sonst still und
   ohne Übergang in der Ecke, und die Würfel erschienen aus dem Nichts. */
.becher.ueber {
  transform: translate(var(--bx, 0px), var(--by, 0px)) scale(1.1);
  transition: transform 200ms cubic-bezier(.4,0,.25,1);
}
/* "wartet" statt :disabled — ein gesperrter Knopf feuert keine Ereignisse mehr
   und lässt Gesten mitten im Lauf hängen. Siehe becherSperren() in app.js. */
.becher.wartet { cursor: default; }
.becher.wartet .becherleib { filter: saturate(.5) brightness(.72); }
.becher:not(.wartet):active .becherleib { transform: scale(.95); }

.becherleib {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #c98f52 0%, var(--becher-leder) 42%, var(--becher-tief) 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.28),
    inset 0 -6px 12px rgba(0,0,0,.4),
    0 12px 24px rgba(0,0,0,.5);
  transition: transform .12s ease;
}
.becherleib::before {
  content: ""; position: absolute; inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #422a15 0%, var(--becher-innen) 78%);
  box-shadow: inset 0 7px 13px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.2);
}
.becherwort {
  position: relative;
  color: var(--gold-hell);
  font-size: calc(var(--gr) * 0.1);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.becherleib.schuettelt { animation: becherwackeln 150ms ease-in-out infinite; }
@keyframes becherwackeln {
  0%   { transform: translate(0, 0)      scale(1); }
  25%  { transform: translate(-6px, -4px) scale(1.035); }
  50%  { transform: translate(5px, 3px)   scale(.985); }
  75%  { transform: translate(-4px, 4px)  scale(1.025); }
  100% { transform: translate(0, 0)      scale(1); }
}

/* ---------------------------------------------------------------- Undo */
.undochip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sa-unten) + 12px);
  background: rgba(20,14,8,.92); color: #fff8ec;
  border-radius: 999px; padding: 8px 10px 8px 18px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--schatten-tief); z-index: 40; font-size: 15px;
}
.undochip[hidden] { display: none; }

/* -------------------------------------------------------------- Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,30,25,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.overlay[hidden] { display: none; }
.overlaykarte {
  background: var(--papier); border-radius: var(--r-l);
  box-shadow: var(--schatten-tief);
  padding: 28px 24px; text-align: center;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 16px;
}
.overlaykarte.schmal { max-width: 380px; text-align: left; }
.overlaykicker { color: var(--tinte-schwach); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.overlayname { font-family: var(--font-display); font-size: clamp(30px, 8vw, 44px); font-weight: 600; }
.dialogknoepfe, .menueknoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.dialogknoepfe .knopf, .menueknoepfe .knopf { flex: 1; min-width: 130px; }
.schalter { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.schalter input { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- Endstand */
.rangliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: platz; }
.rangliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-m);
  background: var(--papier-warm); border: 1px solid var(--papier-linie);
}
.rangliste li:first-child { background: var(--gold-hell); border-color: var(--gold); }
.rangliste .platz { counter-increment: platz; font-family: var(--font-display); font-size: 22px; width: 28px; color: var(--tinte-schwach); }
.rangliste .platz::before { content: counter(platz) "."; }
.rangliste li:first-child .platz { color: var(--tinte); }
.rangliste .nm { flex: 1; font-weight: 600; }
.rangliste .pkt { font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; }

/* ================================================================ Querformat
   Zwei Spalten: Würfel links fest, Block rechts scrollend. Rein per CSS,
   damit das Drehen des Tablets keinen Zustand anfasst. */
@media (orientation: landscape) and (min-width: 700px) {
  .tisch { flex-direction: row-reverse; }
  .wuerfelbereich {
    --kante: clamp(56px, 6.4vw, 84px);
    flex: 0 0 clamp(300px, 34vw, 420px);
    height: auto;
    border-top: 0; border-right: 3px solid var(--holz-tief);
    box-shadow: 4px 0 14px rgba(0,0,0,.3);
    padding: 12px 14px max(14px, var(--sa-unten));
  }
  .halteleiste { --kante: clamp(40px, 4.4vw, 60px); }
  .blockbereich { padding: 10px; }

  /* Der Block soll ohne Scrollen ganz zu sehen sein: Wer gerade wo steht, ist
     die wichtigste Auskunft am Tisch. Achtzehn Zeilen (Kopf + 6 oben + 2 Summen
     + 7 unten + Kniffel-Bonus + Gesamt) teilen sich die Höhe, die nach dem
     Spielband übrig bleibt. Wer Zeilen hinzufügt, muss die 18 mitzählen.
     Die Schriftgrößen hängen an der Zeilenhöhe, damit auf kleinen Tablets
     nichts überläuft. Bleibt zu wenig Platz, greift die Untergrenze und der
     Block scrollt wieder — abgeschnitten wird nie etwas. */
  .blockformular { --zeile: max(26px, calc((100vh - var(--band-hoehe) - 30px) / 18)); }
  .zelle.wert        { font-size: min(30px, calc(var(--zeile) * 0.62)); }
  .zelle.wert.summe  { font-size: min(24px, calc(var(--zeile) * 0.50)); }
  .zelle.label       { font-size: clamp(11px, calc(var(--zeile) * 0.34), 16px); }
  .zelle.kopf        { font-size: clamp(12px, calc(var(--zeile) * 0.40), 18px); }
  .zelle .bonusrest  { font-size: clamp(9px, calc(var(--zeile) * 0.22), 12px); }
}

/* Mit der Browserleiste ist 100vh größer als das, was man sieht. dvh misst das
   Sichtbare — wo es unterstützt wird, passt der Block deshalb genauer. */
@supports (height: 100dvh) {
  @media (orientation: landscape) and (min-width: 700px) {
    .blockformular { --zeile: max(26px, calc((100dvh - var(--band-hoehe) - 30px) / 18)); }
  }
}

/* ================================================== Reduzierte Bewegung
   Wichtig: Das Spiel hängt nirgends an animationend. Wird hier die Dauer
   auf null gesetzt, erscheinen die Würfel sofort mit ihrem Endwert — der
   Ablauf bleibt unberührt. iteration-count zusätzlich, damit Endlos-
   Animationen nicht zerhackt werden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Der Becher bleibt dann einfach in seiner Ecke liegen; app.js überspringt
     die Wurfanimation ohnehin und legt die Würfel sofort hin. */
  .becher.ueber { transform: none; }
}