/* ==========================================================================
   Tischlein — hand.css
   Spieler-App (Handy, Hochformat): Join-Screen, Kopfzeile, Mitspieler-Leiste,
   Tisch-Status in der Mitte, Kartenfächer unten, Aktionsleiste.
   Design-Tokens + Karten (.tcard…) kommen aus theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grundgerüst: eine Bildschirmseite, nichts scrollt, nichts zoomt
   -------------------------------------------------------------------------- */
/* hidden-Attribut muss auch gegen display:flex & Co. gewinnen */
[hidden]{ display:none !important; }

html, body.hand-body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.hand-body{
  position:fixed; inset:0; width:100%;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(42,138,104,.28), transparent 60%),
    var(--bg);
  -webkit-tap-highlight-color:transparent;
}

/* --------------------------------------------------------------------------
   Join-Screen
   -------------------------------------------------------------------------- */
.join{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  overflow-y:auto; /* mit offener Tastatur muss der Screen scrollbar sein */
}
@media (max-height:520px){
  .join{ align-items:flex-start; }
}
.join-card{
  width:100%; max-width:360px;
  color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px calc(26px + env(safe-area-inset-bottom,0px));
  text-align:center;
  /* Holz-Akzentleiste oben, wie bei den Modals */
  background:
    linear-gradient(90deg,
      var(--wood-dark), var(--wood-light) 30%, var(--wood) 65%, var(--wood-dark))
      top center / 100% 9px no-repeat,
    var(--paper);
  animation:t-pop-in .3s cubic-bezier(.34,1.45,.5,1);
}
.join-logo{ font-size:3rem; line-height:1; margin-top:6px; }
.join-title{
  margin:.15em 0 .1em;
  font-size:2rem; font-weight:600; color:var(--ink);
  letter-spacing:.01em;
}
.join-sub{ margin:0 0 1.4em; color:var(--muted); font-size:.95rem; line-height:1.4; }
.join-form{ display:flex; flex-direction:column; gap:14px; }
.join-label{
  display:flex; flex-direction:column; gap:6px;
  text-align:left; font-weight:600; font-size:.85rem; color:var(--ink);
}
.join-input{ width:100%; }
.join-input--code{
  text-transform:uppercase; text-align:center;
  font-size:1.35rem; font-weight:600; letter-spacing:.35em; text-indent:.35em;
}
.join-btn{ margin-top:6px; }

/* --------------------------------------------------------------------------
   Handansicht: Spalten-Layout über die volle Höhe
   -------------------------------------------------------------------------- */
.hand{
  height:100%;    /* Fallback für Browser ohne dvh */
  height:100dvh;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  /* Seitliche Insets fehlten komplett — im Querformat schiebt die Notch/
     Kamera-Insel sonst Kopfzeile, Mitspieler-Chips und Aktionsleiste an. */
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

/* ---- Kopfzeile: Verbindungspunkt, Name + Spielname, Regeln-Button ---- */
.hand-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 6px;
}
.conn{
  flex:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(213,72,74,.25);
  animation:conn-pulse 1.2s ease-in-out infinite;
}
.conn--on{
  background:var(--ok,#2ba14f);
  box-shadow:0 0 0 3px rgba(43,161,79,.22);
  animation:none;
}
@keyframes conn-pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}
.hand-id{
  flex:1; min-width:0;
  display:flex; flex-direction:column; line-height:1.2;
}
.own-name{
  font-weight:600; font-size:1.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.game-name{
  font-size:.8rem; color:rgba(250,243,227,.65);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- Mitspieler-Leiste: Chips mit Initial, Name, Kartenanzahl ---- */
.mates{
  display:flex; gap:8px;
  padding:4px 14px 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.mates::-webkit-scrollbar{ display:none; }
.mate{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(250,243,227,.1);
  border:1.5px solid transparent;
  border-radius:999px;
  padding:8px 10px 8px 4px;
  min-height:44px;                /* 44px-Touch-Target wie .btn--small */
  box-sizing:border-box;
  font:inherit; font-size:.82rem; font-weight:500;
  color:var(--cream);
  cursor:pointer;                 /* Tipp = Karte verdeckt an diese Person geben */
}
.mate--off{ opacity:.45; }
.mate:disabled{ opacity:.4; cursor:default; }
.mate--target{
  border-color:var(--gold);
  background:rgba(242,181,68,.18);
  box-shadow:0 0 10px rgba(242,181,68,.35);
}
.mate-dot{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:600;
  /* Farbe wird je Spielerfarbe per lesbareTextfarbe() gesetzt (player.js) —
     ein Text-Stroke ist bei dieser Größe nur eine Haarlinie und WCAG-technisch
     kein Ersatz für echten Kontrast. */
  color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.mate-name{
  max-width:16ch;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mate-count{ opacity:.75; font-size:.78rem; }

/* ---- Mitte: Ablagestapel-Top groß, Nachziehstapel + Ziehen-Button ---- */
.mid{
  flex:1; min-height:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  align-content:center;
  /* „safe": Wenn der Inhalt höher ist als der Platz (Brett + Vorrat auf fast
     quadratischen Screens wie dem aufgeklappten Fold), darf Zentrierung NICHT
     den oberen Rand unerreichbar abschneiden — stattdessen oben andocken und
     scrollen. Browser ohne safe-Support fallen auf die Zeile darüber zurück. */
  align-items:safe center; justify-content:safe center;
  align-content:safe center;
  gap:clamp(14px, 5vw, 32px);
  padding:4px 16px;
  overflow-y:auto;
  /* zarte Filz-Insel, damit sich die „Tischmitte" anfühlt wie der Tisch */
  background:radial-gradient(60% 80% at 50% 50%, rgba(30,107,82,.35), transparent 72%);
}
.mid .tcard{ --card-w:clamp(72px, 24vw, 108px); }
.mid-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.mid-label{
  font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(250,243,227,.55);
}
.mid-card{ position:relative; }
/* Ablagestapel existiert, ist aber leer → gestrichelte Ablage-Fläche */
.mid-card--leer{
  width:clamp(72px, 24vw, 108px);
  aspect-ratio:5/7;
  border:2px dashed rgba(250,243,227,.35);
  border-radius:10px;
}
.mid-card--draw .tcard{ --card-w:clamp(58px, 18vw, 84px); }
.mid-count{
  position:absolute; top:-8px; right:-10px;
  min-width:1.7em; height:1.7em;
  display:flex; align-items:center; justify-content:center;
  padding:0 .35em;
  border-radius:999px;
  background:var(--gold); color:#4a3208;
  font-size:.8rem; font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.mid-hint{
  margin:0; max-width:30ch;
  text-align:center; line-height:1.45;
  color:rgba(250,243,227,.55); font-size:.92rem;
}

/* ---- Sanduhr: Countdown-Pill in der Mitte (nur laufende Timer) ---- */
.timer-block{ display:flex; align-items:center; justify-content:center; }
.timer-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px;
  border-radius:999px;
  border:1.5px solid rgba(242,181,68,.55);
  background:linear-gradient(135deg, rgba(242,181,68,.2), rgba(63,29,19,.32));
  color:var(--cream);
  font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.timer-pill--zero{
  border-color:var(--red);
  background:linear-gradient(135deg, rgba(213,72,74,.4), rgba(63,29,19,.32));
  animation:timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

/* ---- Offene Bereiche: Karten antippen = nehmen, ＋ = hineinlegen ---- */
.zone-block{
  display:flex; flex-direction:column; gap:6px;
  max-width:100%;
  padding:10px 12px 12px;
  border-radius:14px;
  border:1.5px dashed rgba(242,181,68,.45);
  background:rgba(6,28,19,.3);
}
.zone-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.zone-label{
  font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold);
}
.zone-row{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto;
  padding:2px;
  -webkit-overflow-scrolling:touch;
}
.zone-row .tcard{ --card-w:clamp(58px, 17vw, 80px); }
.zone-card{
  flex:0 0 auto;
  padding:0; border:none; background:none;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s ease;
}
.zone-card:active{ transform:translateY(-4px) scale(1.04); }
.zone-card:disabled{ opacity:.45; }
.zone-leer{
  font-size:.82rem; color:rgba(250,243,227,.5);
  padding:10px 6px;
}

/* ---- Mini-Spielfeld: lose Tischkarten ---- */
.table-block{
  display:flex; flex-direction:column; gap:6px;
  max-width:100%;
  padding:10px 12px 12px;
  border-radius:14px;
  border:1.5px dashed rgba(250,243,227,.25);
  background:rgba(0,0,0,.18);
}
.table-card{ flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.table-card .tcard{ --card-w:clamp(50px, 14vw, 68px); }

/* ---- Spielleiter-Menü + QR (Bottom-Sheet) ---- */
/* Achtung: Diese Elemente leben im hellen Papier-Sheet (--paper, Text --ink) —
   dunkle Schrift auf hellem Grund, NICHT die Creme-Töne des Filz-Screens! */
.menu-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%;
  margin:0 0 8px;
  padding:12px 14px;
  border:1px solid rgba(38,49,59,.14);
  border-radius:12px;
  background:rgba(38,49,59,.05);
  color:var(--ink);
  font:inherit; font-size:.95rem; font-weight:600;
  text-align:left;
  cursor:pointer;
}
.menu-row:active{ background:rgba(242,181,68,.3); }
.menu-row-sub{ font-size:.78rem; font-weight:400; color:rgba(38,49,59,.72); }
.menu-gruppe{
  margin:16px 0 6px; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(38,49,59,.72);
}
.menu-gruppe:first-child{ margin-top:0; }
.menu-hinweis{ margin:0 0 10px; font-size:.82rem; color:rgba(38,49,59,.72); }
.qr-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.qr-img{
  width:min(70vw, 260px); aspect-ratio:1;
  border-radius:14px; background:#fff; padding:8px;
  border:1px solid rgba(38,49,59,.15);
}
.qr-code{
  font-size:2rem; font-weight:700; letter-spacing:.35em;
  padding-left:.35em; /* optischer Ausgleich fürs letterspacing */
  color:#a06c14; /* dunkles Gold — lesbar auf Papier */
}
.qr-url{ font-size:.8rem; color:rgba(38,49,59,.72); word-break:break-all; text-align:center; }

/* ---- Join-Screen: „Runde ohne Tisch starten" ---- */
/* Achtung: Die Join-Karte ist heller Papier-Look (--paper) — hier gehören
   Tinten-Töne hin, keine Creme-Farben des dunklen Filz-Hintergrunds! */
.join-trenner{
  display:flex; align-items:center; gap:12px;
  width:100%; margin:16px 0 12px;
  color:rgba(38,49,59,.72); font-size:.8rem;
}
.join-trenner::before, .join-trenner::after{
  content:''; flex:1; height:1px; background:rgba(38,49,59,.22);
}
.join-create{ width:100%; }
/* Ghost-Buttons auf der Papier-Karte: dunkle Schrift + dunkle Kontur
   (der globale .btn--ghost aus theme.css ist für dunkle Hintergründe) */
.join-card .btn--ghost{
  color:var(--ink);
  background:rgba(38,49,59,.05);
  box-shadow:inset 0 0 0 1.5px rgba(38,49,59,.35);
}
.join-create-hinweis{
  margin:8px 0 0; font-size:.78rem; line-height:1.4;
  color:rgba(38,49,59,.6); text-align:center;
}

/* ---- Spielbrett auf dem Handy: SVG-Ansicht + Vorrat + Aktionen ---- */
.board-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  /* Breite zusätzlich an der HÖHE deckeln: auf fast quadratischen Screens
     (aufgeklapptes Fold, kleine Tablets) muss das quadratische Brett samt
     Vorrat über den Kartenfächer passen, sonst wird es abgeschnitten. */
  width:min(88vw, 40vh, 380px);
  padding:10px;
  border-radius:14px;
  border:1.5px solid rgba(122,90,48,.5);
  background:rgba(0,0,0,.18);
}
.pb-svg{
  display:block; width:100%; aspect-ratio:1;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.pb-token--sel circle{ filter:drop-shadow(0 0 3px rgba(242,181,68,.9)); }
.pb-svg text{ pointer-events:none; font-weight:600; }
.token-vorrat{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  max-width:100%;
}
.vorrat-token{
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.4);
  background:var(--tf, #888);
  font:inherit; font-size:1rem; line-height:1;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.vorrat-token--sel{
  border-color:var(--gold);
  box-shadow:0 0 10px rgba(242,181,68,.8);
  transform:translateY(-2px);
}
.board-aktionen{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
}
.board-hinweis{ font-size:.82rem; color:var(--gold); font-weight:600; }

/* ---- Tisch-Würfel: tippen = würfeln ---- */
.dice-block{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:8px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
}
.dice-die{ border:none; font:inherit; font-size:1.6rem; font-weight:700; cursor:pointer; }
.dice-die--frisch{ animation:cup-shake .5s ease; }
.dice-hinweis{ font-size:.72rem; color:rgba(250,243,227,.55); }

/* ---- Zähler: −/+ direkt vom Handy ---- */
.counter-block{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  max-width:100%;
}
.counter-zeile{ display:flex; align-items:center; gap:10px; }
.counter-label{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.9rem; font-weight:600; color:var(--cream);
}
.counter-wert{
  min-width:2.2em; text-align:center;
  font-size:1.1rem; font-weight:700; color:var(--gold);
}
.counter-btn{ min-width:44px; }

/* ---- Pokerchips: eigenes Konto + Einsatz in den Pot ---- */
.chip-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:100%;
  padding:10px 16px;
  border-radius:14px;
  border:1.5px solid rgba(242,181,68,.4);
  background:rgba(0,0,0,.2);
}
.chip-kopf{ display:flex; align-items:center; gap:16px; }
.chip-eigene{ font-size:1.15rem; font-weight:700; color:var(--gold); }
.chip-pot{ font-size:.95rem; font-weight:600; color:rgba(250,243,227,.85); }
.chip-zeile{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }

/* ---- Würfelbecher: geheim schütteln & anschauen ---- */
.cup-block{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:100%;
  padding:12px 16px;
  border-radius:14px;
  border:1.5px solid rgba(124,64,48,.65);
  background:linear-gradient(180deg, rgba(124,64,48,.28), rgba(63,29,19,.32));
}
.cup-block--mein{ border-color:var(--gold); box-shadow:0 0 14px rgba(242,181,68,.25); }
.cup-head{
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(250,243,227,.75);
}
.cup-geheim{ margin:0; font-size:.82rem; color:var(--gold); font-weight:600; }
.cup-hinweis{ margin:0; font-size:.82rem; color:rgba(250,243,227,.6); text-align:center; max-width:26ch; }
.cup-dice{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.cup-die{
  position:relative;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg, #fffdf6, #e6dcc2);
  color:#2b1902; font-size:1.6rem; font-weight:700;
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 #fff;
}
.cup-die[data-sides]::after{
  content:attr(data-sides);
  position:absolute; top:2px; right:5px;
  font-size:.55rem; font-weight:600; color:#8a7a55;
}
.cup-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cup-block--shake{ animation:cup-shake .6s ease; }
@keyframes cup-shake{
  15%{ transform:rotate(-3deg) translateX(-3px); }
  35%{ transform:rotate(2.5deg) translateX(3px); }
  55%{ transform:rotate(-2deg) translateX(-2px); }
  75%{ transform:rotate(1.5deg) translateX(2px); }
  100%{ transform:none; }
}

/* Banner für den „＋ Ablegen"-Modus (über dem Fächer) */
.zone-banner{
  margin:0 14px 4px;
  min-height:44px;
  padding:10px 14px;
  border:none; border-radius:12px;
  background:linear-gradient(135deg, #f7cb72, #e0a63a);
  color:#3a2604; font:inherit; font-size:.88rem; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  cursor:pointer;
}
.zone-banner[hidden]{ display:none; }

/* ---- Aktionsleiste: Sortieren + Verdeckt-Toggle ---- */
.actions{
  display:flex; justify-content:center; gap:8px;
  padding:6px 12px;
}
.actions .btn{ white-space:nowrap; }
.btn--active{
  background:var(--grad-gold);
  color:#4a3208;
  box-shadow:0 2px 12px rgba(242,181,68,.35), inset 0 -2px 0 rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   Kartenfächer — Karten überlappend im Bogen, alles über transform animiert
   -------------------------------------------------------------------------- */
.fan{
  position:relative;
  height:clamp(190px, 32vh, 280px);
  overflow:visible;
  touch-action:none;               /* Gesten gehören ganz uns */
  --card-w:clamp(84px, 30vw, 128px); /* Handkarten schön groß und daumig */
}
.fan-hint{
  position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%);
  margin:0; width:max-content; max-width:80vw;
  text-align:center; line-height:1.45;
  color:rgba(250,243,227,.5); font-size:.92rem;
  pointer-events:none;
}
.fan-card{
  position:absolute;
  left:50%;
  bottom:calc(-1 * var(--card-w) * .22 + env(safe-area-inset-bottom,0px));
  transform-origin:50% 100%;
  transition:transform .28s cubic-bezier(.3,1.25,.4,1), opacity .25s ease;
  will-change:transform;
  cursor:grab;
  touch-action:none;
}
.fan-card .tcard{
  box-shadow:
    -3px 0 8px rgba(0,0,0,.3),      /* Kante zur überlappten Nachbarkarte */
    0 6px 18px rgba(0,0,0,.35);
}
/* Während der Geste: keine Transition, Karte klebt am Finger */
.fan-card--drag{
  transition:opacity .25s ease;
  cursor:grabbing;
}
/* Über der Ausspiel-Schwelle: goldenes Leuchten als „loslassen = spielen" */
.fan-card--armed .tcard{
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 26px rgba(242,181,68,.65),
    0 10px 26px rgba(0,0,0,.4);
}
/* Wegfliegen beim Ausspielen: weich beschleunigt nach oben */
.fan-card--fly{
  transition:transform .45s cubic-bezier(.5,-.1,.75,.4), opacity .4s ease .05s;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   Regeln-Bottom-Sheet: Feinschliff der Theme-Basis
   -------------------------------------------------------------------------- */
.sheet-body p{ margin:0 0 .8em; line-height:1.55; }
.sheet-close-btn{ width:100%; margin-top:4px; }

/* --------------------------------------------------------------------------
   Sehr kleine Bildschirme: alles etwas kompakter
   -------------------------------------------------------------------------- */
@media (max-height:640px){
  .fan{ height:clamp(160px, 30vh, 220px); --card-w:clamp(72px, 26vw, 104px); }
  .mid .tcard{ --card-w:clamp(60px, 20vw, 88px); }
  /* nur die Schrift verkleinern — die 44px-Hit-Area der Buttons bleibt */
  .actions .btn{ font-size:.78rem; }
}

/* --------------------------------------------------------------------------
   Handy im Querformat (z. B. 844×390): Kopf + Mitspieler + Aktionen + Fächer
   belegen zusammen ~302 von 390px — für die Tischmitte blieben ~88px, also
   eine Scroll-Schlucht. Hier wird radikal auf die Kernelemente eingedampft.
   -------------------------------------------------------------------------- */
@media (orientation:landscape) and (max-height:480px){
  .hand-head{ padding:4px 12px 2px; }
  .own-name{ font-size:.95rem; }
  .game-name{ display:none; }          /* steht auch im Regeln-Sheet */
  .mates{ padding:2px 12px 4px; }
  .mate-name{ display:none; }          /* Initial + Kartenzahl reichen */
  .mate{ min-height:38px; padding:4px 8px 4px 4px; }
  .mid{ padding:2px 12px; gap:12px; }
  .mid-label{ display:none; }
  .mid .tcard{ --card-w:clamp(52px, 9vw, 74px); }
  .fan{ height:clamp(112px, 34vh, 150px); --card-w:clamp(58px, 11vw, 84px); }
  .actions{ padding:2px 12px calc(4px + env(safe-area-inset-bottom,0px)); }
}

/* --------------------------------------------------------------------------
   „Am Zug" — Zugreihenfolge (host:setTurn / host:nextTurn)
   -------------------------------------------------------------------------- */
/* Der eigene Zug: goldener Rahmen um den ganzen Screen + auffälliger Kopftext.
   Bei 5+ Personen sonst der häufigste Grund fürs Stocken. */
body.du-bist-dran .hand::before{
  content:'';
  position:fixed; inset:0; z-index:90;
  border:3px solid var(--gold);
  border-radius:14px;
  pointer-events:none;
  animation:zug-puls 2s ease-in-out infinite;
}
@keyframes zug-puls{
  0%,100%{ box-shadow:inset 0 0 24px rgba(242,181,68,.30); }
  50%    { box-shadow:inset 0 0 44px rgba(242,181,68,.55); }
}
body.du-bist-dran .game-name{
  color:var(--gold);
  font-weight:600;
}
/* Mitspieler*in am Zug: goldener Punkt statt Rahmen — dezenter als der eigene */
.mate--zug{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(242,181,68,.45);
}

/* --------------------------------------------------------------------------
   Blickschutz: Hand verdecken, bis der Finger auf dem Fächer liegt
   -------------------------------------------------------------------------- */
body.blickschutz .fan{ position:relative; }
body.blickschutz .fan::after{
  content:'🫣 Zum Ansehen gedrückt halten';
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:18px;
  background:rgba(12,10,8,.94);
  color:var(--cream); font-size:.9rem; font-weight:500;
  border-radius:14px 14px 0 0;
}
body.blickschutz.blickschutz-auf .fan::after{ opacity:0; pointer-events:none; }

/* --------------------------------------------------------------------------
   Reaktionen + Profil im Bottom-Sheet
   -------------------------------------------------------------------------- */
.emote-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:6px;
}
.emote-knopf{
  aspect-ratio:1;
  min-height:56px;
  border:none; border-radius:14px;
  background:rgba(38,49,59,.07);
  font-size:1.9rem; line-height:1;
  cursor:pointer;
}
.emote-knopf:active{ background:rgba(242,181,68,.3); transform:scale(.95); }

.farb-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  margin:14px 0;
}
.farb-knopf{
  aspect-ratio:1; min-height:44px;
  border:2px solid transparent; border-radius:50%;
  cursor:pointer;
}
.farb-knopf--sel{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(242,181,68,.55);
}

/* Pause-Overlay: Spieler-Aktionen sind serverseitig gesperrt, das muss man sehen */
body.pausiert .mid::after{
  content:'⏸️ Pause';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,10,8,.72);
  color:var(--cream); font-size:1.4rem; font-weight:600;
  pointer-events:none;
}
.mid{ position:relative; }