/* Playtester. Fuers Handy gebaut: der Daumen bedient unten, das Feld waechst
   nach oben. Auf breiten Schirmen wird daraus eine ruhigere Spalte. */

.ist-playtester {
  overflow: hidden;                /* das Feld scrollt, nicht die Seite */
  overscroll-behavior: none;
  /* body.werkzeug bringt 1.35rem Innenabstand mit. Auf 375 Pixeln sind das
     43 Pixel, die dem Brett fehlen, und oben und unten schiebt es die
     100dvh-Hoehe aus dem Bild. */
  padding: 0;
  margin: 0;
}

.pt {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst waechst die Feldzeile mit ihrem Inhalt
     mit, statt zu scrollen. Bei 40 Karten auf dem Tisch schob sie Hand und
     Zonenleiste aus dem Bild, und die waren dann nicht mehr erreichbar. */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  /* dvh kennen aeltere Browser nicht, dann bleibt vh stehen. Ohne die erste
     Zeile faellt die Hoehe dort auf auto und das Brett laeuft aus dem Bild. */
  height: 100vh;
  height: 100dvh;
  max-width: 62rem;
  margin: 0 auto;
  background: var(--ground);
  overflow: hidden;
}

/* Grid- und Flex-Kinder bekommen von sich aus min-width:auto. Ein langes Wort
   wie "Kommandozone" schiebt dann die ganze Spalte auf und die Seite laeuft
   seitlich aus dem Bild. Genau das ist auf dem Handy passiert. */
.pt > * { min-width: 0; }

/* style.css deckelt Absaetze auf die Lesebreite von 76 Zeichen. Das ist fuer
   Fliesstext richtig und fuer ein Brett falsch: der Fusstext sass dadurch in
   einem 452 Pixel breiten Kasten am linken Rand und sah verrutscht aus,
   obwohl er darin sauber zentriert war. Im Brett gibt es keinen Fliesstext. */
.pt p { max-width: none; }

/* ------------------------------------------------------------------ Kopf */

.pt-kopf {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground-deep);
}

.pt-zurueck {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-3);
  text-decoration: none;
  padding: .25rem .45rem;
}
.pt-zurueck:hover { color: var(--gold); }

.pt-runde {
  margin: 0 .1rem 0 0;
  padding: .2rem .3rem;
  border: 0;
  background: transparent;
  font-family: var(--f-caps);
  font-size: .9rem;
  white-space: nowrap;
  color: var(--text-2);
  cursor: pointer;
}
.pt-runde:hover { color: var(--text); }
.pt-runde:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: .3rem; }
.pt-runde b { color: var(--gold); font-size: 1.15rem; }

/* Manavorrat in der Kopfzeile: Zahl plus Farbpunkte. */
.pt-mana {
  display: inline-flex;
  align-items: center;
  gap: .14rem;
  flex: 0 0 auto;
  margin-right: auto;
  padding: .15rem .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
/* Ohne das ueberstimmt display:inline-flex das hidden-Attribut, und die
   versteckte Anzeige belegt weiter Platz in der Kopfzeile. */
.pt-mana[hidden] { display: none; }
.pt-mana b { font-size: .82rem; color: var(--text); margin-right: .1rem; }
.pt-pip {
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  display: inline-block;
}
.pt-pip.ist-w { background: var(--mana-w); }
.pt-pip.ist-u { background: var(--mana-u); }
.pt-pip.ist-b { background: var(--mana-b); }
.pt-pip.ist-r { background: var(--mana-r); }
.pt-pip.ist-g { background: var(--mana-g); }
.pt-pip.ist-c { background: var(--text-3); }

.pt-knopf {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  border-radius: .5rem;
  padding: .4rem .7rem;
  font-size: .85rem;
  cursor: pointer;
}
.pt-knopf:hover { border-color: var(--gold); color: var(--text); }

/* Eigener Knopf statt .cta: das ist ein Seiten-Knopf mit width:100% und
   margin-top:1.5rem, in einer Kopfzeile schiebt er alles auseinander. */
.pt-weiter {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: .45rem .95rem;
  background: linear-gradient(135deg, #FF6A0D 0%, var(--accent) 100%);
  color: #fff;
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pt-weiter:focus-visible { outline: 2px solid #FFB59E; outline-offset: 2px; }

/* ----------------------------------------------------------------- Leben */

.pt-leben {
  border-bottom: 1px solid var(--line);
  background: var(--ground-deep);
  font-size: .85rem;
}
.pt-leben > summary {
  padding: .45rem .8rem;
  cursor: pointer;
  color: var(--text-2);
  list-style: none;
}
.pt-leben > summary::-webkit-details-marker { display: none; }
.pt-leben > summary::after { content: " ▾"; color: var(--text-3); }
.pt-leben[open] > summary::after { content: " ▴"; }

.pt-leben ul { list-style: none; margin: 0; padding: 0 .8rem .6rem; }
.pt-leben li {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .1rem 0;
}
.pt-leben-name { flex: 0 0 4.6rem; color: var(--text-3); font-size: .8rem; }
.pt-leben-zahl { min-width: 2rem; text-align: center; font-size: .95rem; }
.pt-leben .pt-knopf { padding: .1rem .5rem; font-size: .95rem; line-height: 1.2; }

.pt-cmd {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  color: var(--text-3);
  font-size: .78rem;
}
.pt-cmd b { color: var(--text-2); min-width: 1.2rem; text-align: center; }
.pt-cmd.ist-tot b { color: var(--accent-hot); }

.pt-markenzeile .pt-leben-name { color: var(--text-3); }

.pt-wuerfel { flex-wrap: wrap; gap: .25rem; padding-top: .3rem; }
.pt-wuerfel .pt-knopf { padding: .18rem .4rem; font-size: .7rem; }
.pt-wurfergebnis {
  margin-left: auto;
  color: var(--gold);
  font-size: .82rem;
  white-space: nowrap;
}

/* Tokenkarten im Menue sind Ablageziele, keine Karten im Spiel. */
.pt-menue-karten .pt-karte[data-token] { cursor: pointer; }
.pt-markenzeile.ist-tot .pt-leben-zahl { color: var(--accent-hot); }

/* Erinnerung an Ausloeser und Tokens. Liegt ueber dem Feld, geht von selbst
   wieder weg und haelt niemanden auf. */
.pt-hinweis {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: .4rem .7rem;
  border-bottom: 1px solid var(--line);
  background: rgba(217, 182, 80, .12);
  color: var(--text-2);
  font-size: .8rem;
  line-height: 1.35;
}
.pt-hinweis[hidden] { display: none; }
.pt-hinweis-token {
  flex: 0 0 auto;
  border: 1px dashed var(--violet);
  background: transparent;
  color: var(--text);
  border-radius: 1rem;
  padding: .15rem .5rem;
  font-size: .74rem;
  cursor: pointer;
}
.pt-hinweis-token:hover { background: rgba(95, 64, 171, .25); }

/* Grosse Vorschau, nur am Schreibtisch. */
.pt-vorschau {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 15rem;
  height: auto;
  aspect-ratio: 146 / 204;   /* haelt die Form, bevor das Bild da ist */
  border-radius: .6rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7);
  pointer-events: none;
  z-index: 80;
}
.pt-vorschau[hidden] { display: none; }

/* ------------------------------------------------------------------ Feld */

.pt-feld {
  /* Beide Achsen ausschreiben: mischt man visible mit auto, rechnet der Browser
     die visible-Achse still auf auto um, und man debuggt am falschen Ende. */
  overflow: auto;
  padding: .6rem;
  min-height: 0;                   /* sonst sprengt das Grid-Kind die Zeile */
}

/* Das leere Feld erklaert die Bedienung. Die Gesten sind nicht zu erraten,
   und wer den Playtester zum ersten Mal oeffnet, sieht genau diese Flaeche. */
.pt-leer {
  margin: 1.4rem auto;
  max-width: 22rem;      /* die Bedienhilfe soll schmal bleiben */
  text-align: center;
  color: var(--text-3);
}
.pt-leer-titel {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--text-2);
}
.pt-leer-hilfe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  font-size: .82rem;
  line-height: 1.4;
}
.pt-leer-hilfe b { color: var(--text-2); }

.pt-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* --kb ist die Kartenbreite. Alles andere leitet sich daraus ab, damit die
   getappte Karte an jedem Breakpunkt rechnet und nicht mit festen Werten. */
.pt-karte {
  -webkit-touch-callout: none;
  user-select: none;
  /* Ohne eine Angabe nimmt der Browser jede Fingerbewegung auf einer Karte als
     Scrollen an, schickt pointercancel und die Karte bleibt liegen. Deshalb
     bekommt er je Zone die Achse, die dort wirklich scrollt — die andere
     gehoert dem Ziehen. Die Regeln dazu stehen bei .pt-feld und .ist-hand. */
  touch-action: manipulation;
  --kb: calc(4.6rem * var(--zoom, 1));
  --kh: calc(var(--kb) * 1.3973);   /* Kartenformat 146:204 */
  position: relative;
  width: var(--kb);
  cursor: pointer;
  border-radius: .3rem;
}
.pt-karte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .3rem;
  -webkit-user-drag: none;
  user-select: none;
  /* Ohne das legt iOS beim langen Druecken sein eigenes Menue ueber das Bild
     (Sichern, Kopieren) und unsere Geste kommt nie an. */
  -webkit-touch-callout: none;
  pointer-events: none;
}
.pt-karte .pt-kein-bild { width: 100%; }
.pt-karte:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Getappt wird die Karte gedreht. Nur zu drehen reicht nicht: die Box bleibt
   dabei hochkant, und die gedrehte Karte legt sich ueber ihre Nachbarn. Also
   bekommt sie eine liegende Box und das Bild dreht sich darin mittig. */
.pt-karte.ist-getappt { width: var(--kh); height: var(--kb); }
.pt-karte.ist-getappt img,
.pt-karte.ist-getappt .pt-kein-bild {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--kb);
  height: var(--kh);
  transform: translate(-50%, -50%) rotate(90deg);
}
/* Waehrend des Ziehens haengt eine Kopie am Finger, das Original bleibt
   blass an seinem Platz stehen. */
.pt-geist {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
  transform: rotate(-3deg);
}
/* Das Feld scrollt hoch und runter, also darf der Finger das dort weiter.
   Quer dazu zieht er die Karte. */
.pt-feld .pt-karte { touch-action: pan-y; }
/* Die Hand scrollt seitlich. Nach oben zieht der Finger die Karte aufs Feld,
   und das ist der Weg, den man beim Spielen am oeftesten geht. */
.pt-karten.ist-hand .pt-karte { touch-action: pan-x; }

.pt-karte.ist-unterwegs { opacity: .28; }

/* Zone unter dem Finger anleuchten, sonst raet man beim Loslassen. */
.ist-ziel { outline: 2px dashed var(--gold); outline-offset: -3px; border-radius: .5rem; }

/* Getappt tritt zurueck, so wie es die offizielle Oberflaeche macht: die
   Karte bleibt lesbar, ist aber sichtbar verbraucht. */
.pt-karte.ist-getappt img { filter: saturate(.5) brightness(.72); }

/* Bezahlbar oder nicht, als Hinweis wie der blaue Rahmen in Arena. Es haelt
   niemanden auf, es zeigt nur, was gerade ginge. */
.pt-karten.ist-hand .pt-karte.ist-spielbar img {
  outline: 2px solid var(--mana-u);
  outline-offset: -2px;
}
.pt-karten.ist-hand .pt-karte.ist-zu-teuer { opacity: .52; }
.pt-karten.ist-hand .pt-karte.ist-zu-teuer:hover { opacity: .8; }

/* Erzwingt einen Zeilenumbruch und benennt die Flaeche darunter. */
.pt-reihenbruch {
  flex: 1 0 100%;
  margin: .5rem 0 .1rem;
  padding: 0;
  font-family: var(--f-caps);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  border-top: 1px solid var(--line);
  padding-top: .35rem;
}

.pt-karte.ist-cmd img { outline: 2px solid var(--gold); outline-offset: -2px; }
.pt-karte.ist-token img { outline: 2px dashed var(--violet); outline-offset: -2px; }

.pt-kein-bild {
  display: flex;
  align-items: center;
  text-align: center;
  aspect-ratio: 146 / 204;
  padding: .3rem;
  font-size: .6rem;
  line-height: 1.2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .3rem;
  color: var(--text-2);
}

.pt-kraft {
  position: absolute;
  right: -.15rem;
  bottom: -.15rem;
  background: var(--ground-deep);
  color: var(--text);
  border: 1px solid var(--line-strong);
  font-size: .66rem;
  font-weight: 700;
  padding: .05rem .3rem;
  border-radius: .6rem;
}
.pt-kraft.ist-erhoeht { background: var(--gold); color: var(--ground-deep); border-color: var(--gold); }
.pt-kraft.ist-loyal { border-color: var(--violet); border-width: 2px; }
.pt-kraft.ist-loyal.ist-erhoeht { border-color: var(--gold); }
/* Abgegebene Loyalitaet ist kein Zugewinn, sie soll auch nicht so aussehen. */
.pt-kraft.ist-gesenkt { border-color: var(--accent-hot); color: var(--accent-hot); }

/* Gedrehte Karte: die Zahl dreht mit, sonst steht sie quer. */
.pt-karte.ist-getappt .pt-kraft { right: auto; bottom: auto; top: -.15rem; left: -.15rem; }

/* Der Menueknopf auf Feldkarten. Gross genug fuer den Daumen, klein genug,
   dass man die Karte noch erkennt. */
.pt-kartenmenue {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--ground-deep);
  color: var(--text-2);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.pt-kartenmenue:hover { border-color: var(--gold); color: var(--text); }
.pt-kartenmenue:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Bei gedrehten Karten wandert die Ecke mit. */
.pt-karte.ist-getappt .pt-kartenmenue { top: -.25rem; right: -.25rem; }
.pt-geist .pt-kartenmenue { display: none; }

/* Beschriftung schmal und fest, Knoepfe daneben mit Umbruch. Mit einer
   gierigen Beschriftung liefen die Zahlen aus dem Menue heraus. */
.pt-stufen {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
  padding: .2rem .2rem;
}
.pt-stufen > span:first-child {
  font-size: .85rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-stufen-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  min-width: 0;
}
.pt-stufen-knoepfe > button {
  flex: 1 1 2rem;
  min-width: 2rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  border-radius: .45rem;
  padding: .4rem .2rem;
  font-size: .85rem;
  cursor: pointer;
}
.pt-stufen-knoepfe > button:hover { border-color: var(--gold); }
.pt-stufen-knoepfe > button[disabled] { opacity: .4; cursor: default; }
/* "Loyalität" ist laenger als "Ziehen" oder "Mill" und braucht die Spalte. */
.pt-stufen.ist-loyal { grid-template-columns: 5.4rem minmax(0, 1fr); }

/* -------------------------------------------------------- Aktionsleiste */

.pt-aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  border-top: 1px solid var(--line);
  padding: .4rem .6rem;
  background: var(--ground-deep);
  min-width: 0;
}
.pt-feldknopf { flex: 0 0 auto; padding: .3rem .65rem; font-size: .78rem; }
.pt-zurueckknopf { flex: 0 0 auto; padding: .3rem .6rem; font-size: 1rem; line-height: 1; }
.pt-zurueckknopf:disabled { opacity: .35; cursor: default; border-color: var(--line); }
.pt-zurueckknopf:disabled:hover { border-color: var(--line); color: var(--text-2); }
.pt-feldknopf::after { content: " ▾"; color: var(--text-3); }

.pt-marke {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .3rem;
  font-family: var(--f-caps);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ------------------------------------------------------------ Unterer Rand */

.pt-unten {
  border-top: 1px solid var(--line);
  background: var(--ground-deep);
}

.pt-handbereich { padding: .45rem .6rem .3rem; min-width: 0; }
.pt-karten.ist-hand {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: .2rem;
  min-width: 0;
}
.pt-karten.ist-hand .pt-karte { flex: 0 0 auto; --kb: calc(5.2rem * var(--zoom, 1)); }

.pt-mull { color: var(--accent-hot); text-transform: none; letter-spacing: 0; }
.pt-mulligan { margin-left: auto; padding: .2rem .55rem; font-size: .7rem; }

.pt-zonen {
  list-style: none;
  margin: 0;
  padding: .3rem .4rem .35rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3rem;
}
.pt-zonen.ist-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pt-zonen.ist-fuenf .pt-zone { font-size: .6rem; }
.pt-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: .5rem;
  padding: .35rem .2rem;
  cursor: pointer;
  font-size: .66rem;
  color: var(--text-3);
  min-width: 0;
}
.pt-zone > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-zone:hover { border-color: var(--gold); }

/* Groessere Ziele, solange eine Karte am Finger haengt. */
.ist-am-ziehen .pt-zone { padding: .8rem .2rem; border-style: dashed; }
.ist-am-ziehen .pt-handbereich { outline: 1px dashed var(--line-strong); outline-offset: -2px; }
.ist-am-ziehen .pt-karte:not(.pt-geist) { pointer-events: none; }
.pt-zone b { font-size: 1rem; color: var(--text); }
.pt-zone i { color: var(--gold); font-style: normal; }

.pt-fuss {
  margin: 0;
  padding: .25rem .8rem calc(.3rem + env(safe-area-inset-bottom));
  font-size: .65rem;
  line-height: 1.3;
  color: var(--text-3);
  text-align: center;
}

/* ----------------------------------------------------------------- Menue */

/* Der Dialog wird auch ohne <dialog>-API mittig gelegt. Mit API macht das
   der Browser selbst, die Angaben stoeren ihn nicht. */
.pt-menue:not([open]) { display: none; }
.pt-menue[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
body.pt-menue-offen::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  z-index: 99;
}

.pt-menue {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: .8rem;
  padding: 0;
  width: min(24rem, 92vw);
  max-height: 86vh;
  max-height: 86dvh;
}
.pt-menue::backdrop { background: rgba(0, 0, 0, .66); }
.pt-menue form { display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; }

.pt-menue-kopf {
  display: flex;
  gap: .7rem;
  padding: .8rem;
  border-bottom: 1px solid var(--line);
}
.pt-menue-kopf img { width: 5.4rem; height: auto; border-radius: .3rem; display: block; }

/* Das Bild im Kopf ist der Knopf zur Lupe. Ohne appearance/border malt
   Windows-Chrome den grauen Systemknopf darum. */
.pt-menue-lupe {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  display: block;
  border-radius: .3rem;
  flex: 0 0 auto;
}
.pt-menue-lupe[hidden] { display: none; }
.pt-menue-lupe span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .22rem 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  background: rgba(0, 0, 0, .66);
  border-radius: 0 0 .3rem .3rem;
}
.pt-menue-lupe:hover span, .pt-menue-lupe:focus-visible span { background: rgba(234, 54, 1, .8); }

.pt-menue-name { margin: 0; font-family: var(--f-display); font-size: 1.05rem; }
.pt-menue-typ { margin: .2rem 0 0; font-size: .78rem; color: var(--text-3); }

.pt-menue-liste {
  list-style: none;
  margin: 0;
  padding: .4rem;
  overflow-y: auto;
  overflow-x: hidden;      /* nichts darf seitlich herauslaufen */
  display: grid;
  gap: .25rem;
}
.pt-menue-liste > li > button {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  border-radius: .45rem;
  padding: .6rem .7rem;
  font-size: .9rem;
  cursor: pointer;
}
.pt-menue-liste > li > button:hover { background: var(--line); }

.pt-suchzeile { padding: .1rem .1rem .3rem; }
.pt-suche {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: .5rem;
  background: var(--ground-deep);
  color: var(--text);
  padding: .5rem .7rem;
  font: inherit;
  font-size: 16px;            /* unter 16px zoomt iOS beim Fokus hinein */
  -webkit-appearance: none;
  appearance: none;
}
.pt-suche:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.pt-trefferzahl {
  padding: .1rem .2rem .2rem;
  font-size: .76rem;
  color: var(--text-3);
}
.pt-trefferzahl[hidden] { display: none; }

.pt-notizzeile { padding: .1rem .1rem .3rem; }
.pt-notiz {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: .5rem;
  background: var(--ground-deep);
  color: var(--text);
  padding: .5rem .7rem;
  font: inherit;
  font-size: 16px;            /* unter 16px zoomt iOS beim Fokus hinein */
  line-height: 1.45;
  resize: vertical;
}
.pt-notiz:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.pt-teilen-ausgabe {
  margin: .35rem 0 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--gold);
  word-break: break-all;
}

.pt-logzeile {
  display: flex;
  gap: .5rem;
  padding: .3rem .3rem;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text-2);
}
.pt-logzeile:last-child { border-bottom: 0; }
.pt-logzeile b { flex: 0 0 1.9rem; color: var(--text-3); font-weight: 400; }

.pt-menue-karten { padding: .3rem 0; }
.pt-menue-karten .pt-karte { --kb: 3.9rem; }

.pt-menue-zu { margin: .2rem .5rem .6rem; }

/* ------------------------------------------------------------------ Lupe */

.pt-lupe {
  border: 0;
  padding: 0;
  background: none;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pt-lupe:not([open]) { display: none; }
.pt-lupe[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  /* Ohne <dialog>-API haengt der Kasten sonst im Textfluss. Mit ihr schadet
     die Angabe nichts, der Dialog liegt ohnehin in der obersten Ebene. */
  position: fixed;
  inset: 0;
  z-index: 100;
}
.pt-lupe::backdrop { background: rgba(0, 0, 0, .86); }
.pt-lupe img {
  /* Beide Achsen nur nach oben begrenzen, dann behaelt das Bild in jedem
     Fenster seine Form. aspect-ratio haelt den Platz frei, bevor es da ist,
     sonst springen die Knoepfe beim Laden nach unten. */
  width: auto;
  height: auto;
  max-width: min(94vw, 30rem);
  max-height: 76vh;
  max-height: min(76dvh, 42rem);
  aspect-ratio: 488 / 680;
  border-radius: 1.6rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .8);
}
.pt-lupe-fuss { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.pt-lupe-fuss .pt-knopf { min-height: 44px; padding-inline: 1.1rem; }

/* --------------------------------------------------------------- Breiter */

@media (min-width: 48rem) {
  .pt-karte { --kb: calc(5.6rem * var(--zoom, 1)); }
  .pt-karten.ist-hand .pt-karte { --kb: calc(6.4rem * var(--zoom, 1)); }
  .pt-zonen { grid-template-columns: repeat(4, minmax(0, 9rem)); justify-content: center; }
  .pt-feld { padding: 1rem; }
  .pt-karten { gap: .5rem; }
}



/* ------------------------------------------------- Einstieg ohne Deck */

/* Keine eigene Maximalbreite: .einstieg gibt die Spalte vor, und ein
   Formular, das 64 Pixel vor der Ueberschrift endet, sieht kaputt aus. */
.pt-einstieg-form {
  display: grid;
  gap: .7rem;
  margin: 1.4rem 0 0;
}
.pt-einstieg-form label {
  font-family: var(--f-caps);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pt-einstieg-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: .6rem;
  background: var(--ground-deep);
  color: var(--text);
  padding: .7rem .8rem;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
}
.pt-einstieg-form textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
/* .cta bringt max-width: 22rem mit, der schlichte Knopf fuellt die Spalte.
   Nebeneinander sahen die beiden aus wie ein Fehler. */
.pt-einstieg-form .cta,
.pt-einstieg-form .knopf-schlicht {
  margin-top: 0;
  width: 100%;
  max-width: none;
}

.pt-weiterspielen { margin: 1.6rem 0 0; }
.pt-weiterspielen ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }

.pt-fortsetzen {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface);
  padding: .6rem .8rem;
  text-decoration: none;
  color: var(--text);
}
.pt-fortsetzen:hover { border-color: var(--gold); }
.pt-fortsetzen b { font-family: var(--f-display); font-size: 1rem; font-weight: 400; }
.pt-fortsetzen span { font-size: .78rem; color: var(--text-3); }

.einstieg-fuss {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-3);
}
.einstieg-fuss a { color: var(--gold); }

.pt-fehlend { color: var(--accent-hot); }

.pt-weiterspielen-hinweis {
  margin: .5rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-3);
}