/* ─────────────────────────────────────────────────────────────────────────
   Tischlein — table.css: der Spieltisch (Host-App auf dem Tablet).
   Holzrand, Filz mit Lampenlicht, Sitzplätze, Items, Werkzeuge, Modals.
   Tokens kommen aus theme.css; jede Variable hat hier einen Fallback,
   damit der Tisch auch ohne geladene Tokens gedeckt bleibt.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --c-wood:       var(--wood, #6f4a26);
  --c-wood-dark:  var(--wood-dark, #4e3115);
  --c-wood-light: var(--wood-light, #8a6136);
  --c-felt:       var(--felt, #1e6b52);
  --c-felt-glow:  var(--felt-glow, #2a8a68);
  --c-felt-dark:  var(--felt-dark, #11432f);
  --c-gold:       var(--gold, #f2b544);
  --c-cream:      var(--cream, #faf3e3);
  --c-paper:      var(--paper, #fffdf6);
  --c-ink:        var(--ink, #26313b);
  --c-red:        var(--red, #d5484a);
  --c-muted:      var(--muted, #8b93a1);
  --c-bg:         var(--bg, #171412);
  --c-radius:     var(--radius, 16px);
  --c-radius-s:   var(--radius-s, 10px);
  --c-shadow:     var(--shadow, 0 8px 24px rgba(0, 0, 0, .35));
  --c-font:       var(--font, 'Fredoka', system-ui, sans-serif);
  --holz: clamp(40px, 6vmin, 58px);   /* Dicke des Holzrands */
}

* { box-sizing: border-box; }

/* hidden-Attribut gewinnt immer — auch gegen display:flex weiter unten */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--c-bg);
  font-family: var(--c-font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button { font-family: var(--c-font); touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* ── Der Raum & der Tisch ────────────────────────────────────────────── */

#raum {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 28%, #26201a 0%, var(--c-bg) 70%);
}

#tisch {
  position: absolute;
  inset: 8px;
  padding: var(--holz);
  border-radius: 44px;
  background:
    radial-gradient(130% 170% at 30% -10%, rgba(255, 255, 255, .10), transparent 55%),
    repeating-linear-gradient(88deg,
      rgba(0, 0, 0, .10) 0 3px, transparent 3px 9px,
      rgba(255, 255, 255, .035) 9px 12px, transparent 12px 26px),
    linear-gradient(160deg, var(--c-wood-light), var(--c-wood) 45%, var(--c-wood-dark));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .6),
    inset 0 2px 2px rgba(255, 255, 255, .22),
    inset 0 -3px 6px rgba(0, 0, 0, .45);
}

#filz {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background: radial-gradient(78% 78% at 50% 42%,
    var(--c-felt-glow) 0%, var(--c-felt) 52%, var(--c-felt-dark) 100%);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, .6),
    inset 0 0 60px rgba(0, 0, 0, .28);
  touch-action: none;
  cursor: default;
}

/* Goldene Intarsienlinie — die Signatur des Tischs */
#filz::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(242, 181, 68, .22);
  border-radius: 18px;
  pointer-events: none;
}

/* Vignette */
#filz::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 110px rgba(0, 0, 0, .45);
  pointer-events: none;
}

#items {
  position: absolute;
  inset: 0;
  touch-action: none;
  /* Kartengröße auf dem Tisch — bewusst groß, damit man sie im Stehen liest */
  --card-w: clamp(88px, 8.5vw, 124px);
}

/* ── Leerer-Tisch-Hinweis ─────────────────────────────────────────────── */

#leer-hinweis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
  padding: 0 24px;
  text-align: center;
  color: rgba(250, 243, 227, .78);
  pointer-events: none;
}
#leer-hinweis .lh-emoji { font-size: 46px; margin-bottom: 6px; }
#leer-hinweis p { font-size: 17px; line-height: 1.5; margin: 8px 0; }
#leer-hinweis .lh-klein { font-size: 13px; opacity: .7; }
#leer-hinweis strong { color: var(--c-gold); font-weight: 600; }

/* ── Items auf dem Filz ──────────────────────────────────────────────── */

.item {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  touch-action: none;
  cursor: grab;
}
.item.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.06);
}

.item.karte { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45)); }
.item.karte.dragging,
.item.karte.ghost { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.item .tcard { display: block; }

/* Stapel: Top-Karte + 3D-Versatz-Schichten + Badge + Filz-Beschriftung */
.item.stapel { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }

.stapel-schichten i {
  position: absolute;
  width: var(--card-w, 76px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: linear-gradient(160deg, #33333f, #232330);
  border: 1px solid rgba(255, 255, 255, .10);
}
.stapel-schichten i:nth-child(1) { transform: translate(2px, 2px); }
.stapel-schichten i:nth-child(2) { transform: translate(4px, 4px); }
.stapel-schichten i:nth-child(3) { transform: translate(6px, 6px); }
.item.stapel[data-lagen="0"] .stapel-schichten i { display: none; }
.item.stapel[data-lagen="1"] .stapel-schichten i:nth-child(n+2) { display: none; }
.item.stapel[data-lagen="2"] .stapel-schichten i:nth-child(3) { display: none; }

.stapel-top { position: relative; z-index: 2; }

.item.stapel.leer .stapel-top {
  width: var(--card-w, 76px);
  aspect-ratio: 5 / 7;
  border: 2px dashed rgba(250, 243, 227, .4);
  border-radius: 8px;
  background: rgba(0, 0, 0, .12);
}

/* Unsichtbar vergrößerte Hit-Areas: Badge & Label sind Drag-Griffe,
   optisch klein, aber als Touch-Target ≥ 44px */
.stapel-badge::before,
.stapel-label::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.stapel-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 3;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8ca6e, var(--c-gold));
  border: 2px solid rgba(78, 49, 21, .35);
  color: #4e3115;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  cursor: grab;                    /* Griff: ganzen Stapel verschieben */
}

/* Misch-Knopf unten links am Stapel */
.stapel-misch {
  position: absolute;
  bottom: -12px;
  left: -12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(78, 49, 21, .35);
  background: linear-gradient(180deg, #fffdf6, #e9dcc0);
  color: #4e3115;
  font-size: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.stapel-misch::before { content: ''; position: absolute; inset: -8px; } /* Touch-Target */
.stapel-misch:active { transform: scale(.92); }
.stapel-misch[hidden] { display: none; }

/* Riffle-Animation beim Mischen: Schichten fächern kurz auseinander */
.item.stapel.mischt .stapel-top { animation: misch-top .8s cubic-bezier(.3, .7, .3, 1); }
.item.stapel.mischt .stapel-schichten i:nth-child(1) { animation: misch-a .8s ease; }
.item.stapel.mischt .stapel-schichten i:nth-child(2) { animation: misch-b .8s ease; }
.item.stapel.mischt .stapel-schichten i:nth-child(3) { animation: misch-c .8s ease; }
@keyframes misch-top {
  18% { transform: translate(-16px, -5px) rotate(-8deg); }
  42% { transform: translate(14px, 3px) rotate(7deg); }
  66% { transform: translate(-7px, -2px) rotate(-3deg); }
  100% { transform: none; }
}
@keyframes misch-a {
  18% { transform: translate(16px, 4px) rotate(7deg); }
  42% { transform: translate(-12px, 0) rotate(-6deg); }
  70% { transform: translate(6px, 3px) rotate(2deg); }
  100% { transform: translate(2px, 2px); }
}
@keyframes misch-b {
  22% { transform: translate(-14px, 8px) rotate(-6deg); }
  48% { transform: translate(12px, 5px) rotate(5deg); }
  74% { transform: translate(-4px, 5px) rotate(-2deg); }
  100% { transform: translate(4px, 4px); }
}
@keyframes misch-c {
  20% { transform: translate(12px, 10px) rotate(5deg); }
  46% { transform: translate(-12px, 8px) rotate(-5deg); }
  72% { transform: translate(8px, 7px) rotate(2deg); }
  100% { transform: translate(6px, 6px); }
}

.stapel-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: rgba(250, 243, 227, .75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: grab;
}
.item.stapel[data-role="draw"] .stapel-label,
.item.stapel[data-role="discard"] .stapel-label {
  color: var(--c-gold);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(242, 181, 68, .35);
}

/* Dropzone-Hervorhebung: Stapel */
.item.stapel.drop-ok .stapel-top,
.item.stapel.drop-ok.leer .stapel-top {
  box-shadow: 0 0 0 3px var(--c-gold), 0 0 24px rgba(242, 181, 68, .8);
  border-radius: 8px;
}

/* ── Würfel ───────────────────────────────────────────────────────────── */

.item.wuerfel { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }

.wuerfel-koerper {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(160deg, #fffdf6, #e9decb);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .14), inset 0 2px 2px #fff;
  display: grid;
  place-items: center;
}

.pips {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 9px;
}
.pips i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a58, #23232e 70%);
  place-self: center;
  visibility: hidden;
}
.wuerfel-koerper[data-wert="1"] .pips i:nth-child(5),
.wuerfel-koerper[data-wert="2"] .pips i:nth-child(1),
.wuerfel-koerper[data-wert="2"] .pips i:nth-child(9),
.wuerfel-koerper[data-wert="3"] .pips i:nth-child(1),
.wuerfel-koerper[data-wert="3"] .pips i:nth-child(5),
.wuerfel-koerper[data-wert="3"] .pips i:nth-child(9),
.wuerfel-koerper[data-wert="4"] .pips i:nth-child(1),
.wuerfel-koerper[data-wert="4"] .pips i:nth-child(3),
.wuerfel-koerper[data-wert="4"] .pips i:nth-child(7),
.wuerfel-koerper[data-wert="4"] .pips i:nth-child(9),
.wuerfel-koerper[data-wert="5"] .pips i:nth-child(1),
.wuerfel-koerper[data-wert="5"] .pips i:nth-child(3),
.wuerfel-koerper[data-wert="5"] .pips i:nth-child(5),
.wuerfel-koerper[data-wert="5"] .pips i:nth-child(7),
.wuerfel-koerper[data-wert="5"] .pips i:nth-child(9),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(1),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(3),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(4),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(6),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(7),
.wuerfel-koerper[data-wert="6"] .pips i:nth-child(9) { visibility: visible; }

.w-zahl { display: none; }

/* W20: goldener Sechseck-Kristall mit großer Zahl */
.wuerfel-koerper.w20 {
  border-radius: 0;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: linear-gradient(160deg, #f9d98c, #e2a83c 60%, #b97f22);
  width: 62px;
  height: 66px;
}
.wuerfel-koerper.w20 .pips { display: none; }
.wuerfel-koerper.w20 .w-zahl {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #4e3115;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.w-tag {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(250, 243, 227, .85);
}

@keyframes wackeln {
  0%   { transform: rotate(0deg)   scale(1); }
  20%  { transform: rotate(-16deg) scale(1.14); }
  40%  { transform: rotate(12deg)  scale(1.2); }
  60%  { transform: rotate(-9deg)  scale(1.12); }
  80%  { transform: rotate(5deg)   scale(1.04); }
  100% { transform: rotate(0deg)   scale(1); }
}
.wuerfel-koerper.rollt { animation: wackeln .55s ease-out; }

/* ── Zähler ───────────────────────────────────────────────────────────── */

.item.zaehler {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(8, 26, 20, .55);
  border: 1px solid rgba(250, 243, 227, .18);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.z-minus, .z-plus {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff8e8, var(--c-cream));
  color: var(--c-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 #fff;
}
.z-minus:active, .z-plus:active { transform: scale(.9); }
.z-mitte {
  min-width: 68px;
  padding: 0 8px;
  text-align: center;
}
.z-wert {
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-cream);
}
.z-label {
  display: block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(250, 243, 227, .72);
  cursor: text;
}
.z-label input {
  width: 96px;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font: 500 12px var(--c-font);
  text-align: center;
}

/* ── Sitzplätze: gleichmäßig um den ganzen Tischrand verteilt ────────── */

#sitze {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;           /* nur die Tabs selbst sind anklickbar */
}

.sitz {
  position: absolute;
  width: 158px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: none;
  font: inherit;
  border-radius: 999px;
  pointer-events: auto;
  transition: box-shadow .15s ease, filter .2s ease,
              left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1);
}
/* Tab-Zentrum an (--sx, --sy), zum Spieler hin gedreht (--deg) */
.sitz {
  left: var(--sx, 50%);
  top: var(--sy, 100%);
  transform: translate(-50%, -50%) rotate(var(--deg, 0deg));
}

/* „+"-Ecke: Mitspieler einladen (QR) */
#sitz-plus {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left, 0px));
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 41;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px dashed rgba(250, 243, 227, .4);
  background: rgba(0, 0, 0, .2);
  color: rgba(250, 243, 227, .75);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
#sitz-plus:active { transform: scale(.94); }

.sitz.belegt {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .1)),
    var(--spieler-farbe, #888);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
}
.sitz.offline { filter: saturate(.35) brightness(.75); }

.s-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--spieler-farbe, var(--c-ink));
  font-size: 17px;
  font-weight: 600;
}
.s-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  /* Kräftiger dunkler Rand statt nur eines weichen Schattens — sichert
     Lesbarkeit auch auf hellen Spielerfarben (Gold/Limette/Orange), die
     gegen reines Weiß sonst unter dem AA-Kontrastminimum lägen. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -webkit-text-stroke: .5px rgba(0, 0, 0, .55);
}
.s-karten {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.s-punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok-glow, #58e08a);
  box-shadow: 0 0 7px var(--ok-glow, #58e08a);
}
.sitz.offline .s-punkt { background: #9aa3ad; box-shadow: none; }

/* Mini-Handfächer über dem Tab: visualisiert die Handgröße des Spielers.
   „Über" dem Pill zeigt dank der Tab-Drehung immer zur Tischmitte. */
.s-faecher {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.s-faecher i {
  position: absolute;
  left: -10px;
  bottom: 0;
  width: 20px;
  height: 28px;
  border-radius: 3px;
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(242, 181, 68, .30), transparent 60%),
    linear-gradient(160deg, #1d5741, #113626);
  border: 1.5px solid rgba(250, 243, 227, .75);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  transform-origin: 50% 145%;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* Dropzone-Hervorhebung: Sitz leuchtet */
.sitz.drop-ok {
  box-shadow: 0 0 0 3px var(--c-gold), 0 0 26px rgba(242, 181, 68, .9);
}

/* ── Raumcode-Ecke ────────────────────────────────────────────────────── */

#ecke-info {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;      /* Touch-Target: einzige Beitritts-Route neben den Sitzen */
  padding: 10px 16px;
  border: 1px solid rgba(250, 243, 227, .16);
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  color: var(--c-cream);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
#code-anzeige {
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--c-gold);
}
#spiel-anzeige:empty { display: none; }
#spiel-anzeige { opacity: .9; }

/* ── Werkzeugleiste ───────────────────────────────────────────────────── */

#toolbar {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-wood-light), var(--c-wood-dark));
  box-shadow: var(--c-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tb-knopf {
  width: 62px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff8e8, var(--c-cream));
  color: var(--c-ink);
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 1px 0 #fff;
}
.tb-knopf:active { transform: translateY(1px) scale(.95); }
.tb-emoji { font-size: 22px; line-height: 1.15; }
.tb-text  { font-size: 11px; font-weight: 600; }

/* ── Toasts ───────────────────────────────────────────────────────────── */

#toasts {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
@keyframes toast-rein {
  from { opacity: 0; transform: translateY(-10px) scale(.95); }
}
.toast {
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(38, 49, 59, .93);
  color: var(--c-cream);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--c-shadow);
  animation: toast-rein .25s ease-out;
  transition: opacity .4s ease, transform .4s ease;
  max-width: min(80vw, 520px);
  text-align: center;
}
.toast.weg { opacity: 0; transform: translateY(-8px); }

/* ── Verbindungs-Banner ───────────────────────────────────────────────── */

#netz-banner {
  position: absolute;
  /* über der Werkzeugleiste, damit sich beide nie überlagern */
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--danger-deep, #7a2b2b);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--c-shadow);
}

/* ── Menüs (Kontext + Popover) ────────────────────────────────────────── */

#menue-schleier {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .18);
}
#menue {
  position: fixed;
  z-index: 81;
  min-width: 240px;
  max-width: 320px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 6px;
  border-top: 6px solid var(--c-wood);
  border-radius: var(--c-radius);
  background: var(--c-paper);
  box-shadow: var(--c-shadow);
}
.m-kopf {
  padding: 10px 14px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.m-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--c-radius-s);
  background: none;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.m-eintrag:active { background: rgba(242, 181, 68, .28); }
.m-emoji { width: 26px; flex: none; text-align: center; font-size: 17px; }
.m-farbpunkt { font-size: 22px; }
.m-gefahr { color: var(--c-red); }
.m-zurueck {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--c-radius-s) var(--c-radius-s) 0 0;
  color: var(--c-muted);
}

/* ── Modal (Papier-Look mit Holz-Akzentleiste) ────────────────────────── */

#modal-schleier {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 8, 6, .62);
}
.modal-box {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(86vh, 860px);
  overflow: hidden;
  border-top: 10px solid var(--c-wood);
  border-radius: 20px;
  background: var(--c-paper);
  box-shadow: var(--c-shadow);
}
.modal-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.modal-titel { font-size: 18px; font-weight: 600; color: var(--c-ink); }
.modal-zu {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--c-ink);
  font-size: 16px;
  cursor: pointer;
}
.modal-zu:active { background: rgba(0, 0, 0, .14); }
.modal-inhalt { overflow-y: auto; padding: 18px; }

/* QR-Beitritt */
.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.qr-bild {
  width: min(58vw, 300px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  font-size: 40px;
}
.qr-bild img { width: 100%; height: 100%; border-radius: 16px; }
.qr-code {
  margin-left: .35em;             /* gleicht das letzte letter-spacing aus */
  font-size: 40px;
  font-weight: 600;
  letter-spacing: .35em;
  color: var(--c-ink);
}
.qr-url { font-size: 14px; color: var(--c-muted); word-break: break-all; }
.qr-hinweis { max-width: 400px; margin: 4px 0 0; font-size: 14px; color: var(--c-muted); }

/* Spiele-Bibliothek */
.bib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.bib-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  text-align: left;
  cursor: pointer;
}
.bib-karte:active { transform: scale(.97); }
.bib-emoji { font-size: 34px; line-height: 1.1; }
.bib-name  { font-size: 16px; font-weight: 600; color: var(--c-ink); }
.bib-meta  { font-size: 12px; color: var(--c-muted); }
.bib-desc  { font-size: 12.5px; line-height: 1.35; color: var(--c-ink); opacity: .72; }

/* Spiel-Detail */
.zurueck-knopf {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--c-wood);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.sd-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
}
.sd-emoji { font-size: 52px; line-height: 1; }
.sd-name  { margin: 0; font-size: 26px; font-weight: 600; color: var(--c-ink); }
.sd-meta  { font-size: 14px; color: var(--c-muted); }
.regeln {
  margin-bottom: 16px;
  padding: 6px 16px;
  border-radius: 14px;
  background: rgba(111, 74, 38, .07);
}
.regeln p { margin: 10px 0; font-size: 15px; line-height: 1.55; color: var(--c-ink); }
.cta-gold {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8c96a, var(--c-gold));
  color: #4e3115;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(242, 181, 68, .4);
  cursor: pointer;
}
.cta-gold:active { transform: translateY(1px); }
.sd-hinweis {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--c-muted);
}

/* ── Würfelbecher: Leder-Look, Würfelwerte bleiben verborgen ─────────── */

.item.becher { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }

.becher-koerper {
  position: relative;
  width: 76px;
  height: 88px;
  /* umgedrehter Becher: oben schmal, unten weit (er DECKT die Würfel ab) */
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(180deg, #7c4030 0%, #5c2c1f 55%, #3f1d13 100%);
  border-radius: 6px 6px 10px 10px;
}
.b-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 7px;
  background: linear-gradient(180deg, #f5c96a, #c9922e);
  opacity: .9;
}
.b-band2 { top: auto; bottom: 10px; }

.becher-badge {
  position: absolute;
  top: -12px;
  right: -14px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8ca6e, var(--c-gold, #f2b544));
  border: 2px solid rgba(78, 49, 21, .35);
  color: #4e3115;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  white-space: nowrap;
}

/* Becher liegt gerade bei einem Spieler auf der Hand */
.item.becher.gehalten .becher-koerper { opacity: .38; }
.becher-halter {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: var(--c-cream, #faf3e3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.item.becher.leer .becher-koerper { opacity: .55; }

.becher-koerper.schuettelt { animation: becher-wackel .75s ease; }
@keyframes becher-wackel {
  12% { transform: rotate(-13deg) translate(-4px, -6px); }
  28% { transform: rotate(11deg) translate(5px, -3px); }
  44% { transform: rotate(-9deg) translate(-4px, -5px); }
  62% { transform: rotate(7deg) translate(3px, -2px); }
  80% { transform: rotate(-4deg); }
  100% { transform: none; }
}

/* ── Offene Bereiche: Filz-Zonen, deren Karten alle Handys sehen ─────── */

.item.bereich {
  --zone-card: calc(var(--card-w, 88px) * .86);   /* Karten im Bereich etwas kleiner */
  min-width: calc(var(--card-w, 88px) * 1.7);
  max-width: calc(var(--card-w, 88px) * 3.9);
  min-height: calc(var(--zone-card) * 7 / 5 + 48px);
  padding: 34px 14px 14px;
  border-radius: 18px;
  border: 2px dashed rgba(242, 181, 68, .5);
  background: rgba(6, 28, 19, .28);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .28);
}
.item.bereich.drop-ok {
  border-color: rgba(255, 235, 190, .95);
  border-style: solid;
  background: rgba(242, 181, 68, .16);
}
.item.becher.drop-ok .becher-koerper {
  box-shadow: 0 0 0 3px var(--c-gold), 0 0 24px rgba(242, 181, 68, .8);
}

.bereich-label {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8ca6e, var(--c-gold, #f2b544));
  border: 2px solid rgba(78, 49, 21, .35);
  color: #4e3115;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.bereich-label input {
  width: 110px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  outline: none;
}

.bereich-karten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.bereich-karte {
  cursor: grab;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .4));
}
.bereich-karte .tcard { --card-w: var(--zone-card); }

.bereich-leer {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 13px;
  color: rgba(250, 243, 227, .55);
  pointer-events: none;
  padding: 0 10px;
}
.item.bereich:not(.leer) .bereich-leer { display: none; }

/* ── Spielbretter: quadratisch, Holzrahmen, liegen UNTER allen Items ─── */

.item.brett {
  /* Breite/Höhe setzt host.js inline (px) — exakt quadratisch, an den
     kürzeren Tisch-Rand gekoppelt. Keine eigene Filter-Schatten-Animation
     beim Drag, damit das Brett ruhig unter den Figuren bleibt. */
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .4));
}
.brett-rahmen {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.4%;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--c-wood-light), var(--c-wood) 55%, var(--c-wood-dark));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .25),
    inset 0 -3px 7px rgba(0, 0, 0, .4);
}
.brett-flaeche {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3);
  background: #efe4c8;
}
.brett-schach {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 8), 1fr);
}
.brett-schach .feld-hell { background: #efe4c8; }
.brett-schach .feld-dunkel { background: #9a6b3f; }
.brett-muehle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.brett-muehle svg polygon { fill: none; stroke: #4e3115; stroke-width: 1.3; }
.brett-muehle svg line { stroke: #4e3115; stroke-width: 1.3; }
.brett-muehle svg circle { fill: #4e3115; }

/* Badge = Drag-Griff, analog zum Stapel-Badge (das ganze Brett ist zwar
   ebenfalls greifbar, der Badge signalisiert es zusätzlich optisch). */
.brett-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8ca6e, var(--c-gold));
  border: 2px solid rgba(78, 49, 21, .35);
  color: #4e3115;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  cursor: grab;
}
.brett-badge::before { content: ''; position: absolute; inset: -10px; } /* Touch-Target */

/* Dropzone-Hervorhebung: Brett leuchtet, während eine Figur darüber schwebt */
.item.brett.drop-ok .brett-rahmen {
  box-shadow: 0 0 0 3px var(--c-gold), 0 0 26px rgba(242, 181, 68, .85);
}

/* ── Spielfiguren: Pöppel (rund + Kopf) oder große Glyphe ────────────── */

.item.spielfigur { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .45)); }

.figur-koerper {
  position: relative;
  width: 44px;
  height: 44px;
  cursor: grab;
}
.figur-basis,
.figur-kopf {
  position: absolute;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%),
    var(--token-farbe, #888);
  border: 2px solid rgba(0, 0, 0, .3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(255, 255, 255, .3);
}
.figur-basis { inset: 0; }
.figur-kopf {
  left: 50%;
  top: -8px;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
}
.item.spielfigur.mit-label .figur-kopf { display: none; }

.token-label {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.item.spielfigur.mit-label .token-label { display: flex; }

/* ── Mülleimer-Ecke: erscheint nur während eines Drags ───────────────── */

#muell {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 36px;
  background: rgba(10, 8, 6, .55);
  border: 2px dashed rgba(250, 243, 227, .45);
  color: var(--c-cream, #faf3e3);
  pointer-events: none;          /* Treffer laufen über die Drag-Rechtecke */
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
#muell[hidden] { display: none; }
#muell.drop-ok {
  background: rgba(213, 72, 74, .55);
  border-color: #ffb1b1;
  border-style: solid;
  transform: scale(1.12);
}
#muell .m-hinweis {
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .8;
}

/* ── Feinschliff ─────────────────────────────────────────────────────── */

/* Kleine Tablets/Handys: kompaktere Sitze und Werkzeuge */
@media (max-width: 820px), (max-height: 560px) {
  .sitz { width: 128px; height: 40px; }
  #sitz-plus { width: 44px; height: 44px; font-size: 20px; }
  .s-avatar { width: 26px; height: 26px; font-size: 14px; }
  .s-name { font-size: 12px; }
  .tb-knopf { width: 52px; height: 52px; }
  .tb-emoji { font-size: 18px; }
  #items { --card-w: clamp(66px, 9vw, 86px); }
}

/* prefers-reduced-motion wird zentral in theme.css behandelt */