/* ═══════════════════════════════════════════════════════════════
   Dampfstich
   Messing · Kupfer · Eisen · Pergament — viktorianischer Steampunk
═══════════════════════════════════════════════════════════════ */

:root {
  /* Hintergrund (Öl/Eisen/Leder) & Metall (Messing/Kupfer/Bronze) */
  --bg-primary:#1a1410; --bg-secondary:#241c14; --bg-deep:#12100b;
  --velvet:#382b1c; --panel:#2e2418;
  --gold:#c8963c; --gold-light:#e6c072; --gold-deep:#8a6425;
  --copper:#b5651d; --bronze:#8c6239;

  /* Spielfarben (steampunk-getönt) */
  --heart:#c0492f; --spade:#4a6d8c; --club:#5e7d3a; --diamond:#cc8f2e;
  --heart-l:#e39075; --spade-l:#9bb6cc; --club-l:#a7c078; --diamond-l:#eec98a;

  /* Sonderkarten (Messing/Glut/Blaupause/Rost) */
  --wizard:#d4a843; --narr:#6b6558; --drache:#8a2f1e; --fee:#8fd4e0;
  --werwolf:#b57a2a; --jongleur:#cc7a2e; --bombe:#2a2622; --wolke:#cdd2d0;
  --wandler:#5b8ca8; --vampir:#3f7fa6; --hexe:#7a5a34;

  /* Status & Text (Pergament) */
  --success:#4a9d7f; --error:#b23a2e; --info:#7d9bb5;
  --text-1:#ede0c8; --text-2:#b8a888; --text-3:#82735c;
  --line:rgba(200,150,60,.18);

  /* Fonts – Rollen nach Handoff, alle Schnitte selbst gehostet (fonts/fonts.css).
     Identisch zu tokens.css; dort steht die ausführliche Erklärung.
     Logo=Cinzel Decorative · Titel=Cinzel · Text=EB Garamond
     Labels/Log=EB Garamond versal+gesperrt · Zahlen=Oswald (in --f-mono). */
  --f-logo:'Cinzel Decorative',serif;
  --f-display:'Cinzel',serif;
  --f-body:'EB Garamond',Georgia,serif;
  --f-type:'EB Garamond',Georgia,serif;
  --f-num:'Oswald',sans-serif;
  --f-ui:'EB Garamond',Georgia,serif;
  --f-script:'EB Garamond',Georgia,serif;
  --f-mono:'Oswald',sans-serif;

  /* Verläufe (poliertes Messing) */
  --grad-gold:linear-gradient(180deg, #e6c072, #c8963c 60%, #8a6425);
  --grad-logo:linear-gradient(180deg, #f0d9a8, #c8963c 54%, #7a531f);

  /* Seat-Akzentfarben (Seat 0 = ich) – Metall/Patina, klar unterscheidbar */
  --seat-0:#c8963c; --seat-1:#3d8b7d; --seat-2:#c0492f;
  --seat-3:#cc7a2e; --seat-4:#5e7d3a; --seat-5:#7d9bb5;

  --card-w:84px; --card-h:118px; --r:10px;
  /* Kurzform für die Oberfläche. Zeigt auf die Tokens in tokens.css –
     hier steht bewusst keine eigene Zahl und keine eigene Kurve mehr,
     sonst gäbe es zwei Wahrheiten über dieselbe Bewegung. */
  --t:var(--ds-t-micro) var(--ds-ease-ui);
}

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

/* Dezente Rand-Vignette über dem Szenen-SVG: dunkelt die äußeren Ränder minimal ab
   und hebt so den Kontrast von Spieler-Chips/Karten am Bildrand, ohne die SVGs selbst
   zu verändern (eigene Hintergrundebene, keine Stacking-/Pointer-Probleme). */
:root { --bg-vignette:radial-gradient(ellipse 90% 84% at 50% 47%, transparent 60%, rgba(10,7,3,.55) 100%); }

body {
  /* Werkstatt-Hintergrund als reiner CSS-Verlauf (--ds-table-bg aus dem
     Handoff). Die früheren Szenen-SVGs (img/table-bg-*.svg) sind bewusst
     NICHT mehr eingebunden: sie zeigten die mitternachtsblaue Kulisse samt
     altem Schriftzug „ACADEMIA · ARCANA" – beides gehört nicht zu Dampfstich.
     Die Premium-Tisch-Themes weiter unten setzen weiterhin eigene Bilder.
     Vignette bleibt als oberste Ebene für den Randkontrast. */
  background-color:var(--bg-deep);
  background-image:var(--bg-vignette), var(--ds-table-bg);
  background-position:center center, center center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  color:var(--text-1);
  font-family:var(--f-ui);
  font-weight:300;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Hochformat / Handy (9:16) – background-attachment:fixed ist auf Mobil-Browsern
   (v.a. iOS Safari) unzuverlässig/ruckelig; da die Seite ohnehin nicht scrollt
   (overflow:hidden), ist scroll hier verlustfrei und stabiler.
   (Eigene Hintergrundbilder je Seitenverhältnis braucht der Verlauf nicht mehr.) */
@media (orientation:portrait) {
  body { background-attachment:scroll, scroll; }
}

.hidden { display:none !important; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(200,150,60,.2); border-radius:3px; }

/* ── Sternenfeld ─────────────────────────────────────────────── */
.starfield {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff5 50%, transparent),
    radial-gradient(1px 1px at 28% 64%, #fff4 50%, transparent),
    radial-gradient(1.5px 1.5px at 44% 14%, #ffe9b055 50%, transparent),
    radial-gradient(1px 1px at 62% 48%, #fff4 50%, transparent),
    radial-gradient(1px 1px at 76% 28%, #fff3 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 70%, #ffe9b044 50%, transparent),
    radial-gradient(1px 1px at 8% 84%, #fff3 50%, transparent),
    radial-gradient(1px 1px at 52% 88%, #fff3 50%, transparent),
    radial-gradient(1px 1px at 92% 18%, #fff4 50%, transparent);
}
.starfield-dense { position:absolute; opacity:.9; }

/* ── Buttons (Handoff: gravierte Messingtaste) ────────────────────
   Primär = poliertes Messing mit dunkler Gravurschrift, Sekundär =
   Werkstattholz mit Messingrand. Mindesthöhe 44px (Touch-Ziel). */
.btn {
  cursor:pointer; border:none; border-radius:var(--ds-radius);
  font-family:var(--f-display);
  font-size:.9rem; font-weight:700; letter-spacing:1px;
  padding:13px 22px; min-height:var(--ds-touch-min);
  transition:all var(--t); outline:none;
  text-transform:uppercase;
}
.btn-block { width:100%; display:block; }
.btn-gold {
  background:var(--ds-btn-primary);
  color:var(--ds-bg);
  border:1px solid var(--ds-brass-hi);
  box-shadow:0 6px 18px rgba(200,150,60,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
.btn-gold:active:not(:disabled) { transform:translateY(0); }
.btn-gold:disabled { opacity:.4; cursor:not-allowed; filter:grayscale(.3); }
.btn-ghost {
  background:var(--ds-btn-secondary);
  color:var(--ds-brass-hi);
  border:1px solid #6b4d1c;
  box-shadow:var(--ds-edge-gloss);
}
.btn-ghost:hover:not(:disabled) { border-color:var(--gold); filter:brightness(1.12); }
.btn-ghost:disabled { opacity:.4; cursor:not-allowed; }

/* ── Inputs ──────────────────────────────────────────────────── */
.input-gold, select {
  width:100%; padding:12px 15px; border-radius:11px;
  background:rgba(18,16,11,.6);
  border:1px solid var(--gold-deep);
  color:var(--text-1); font-family:var(--f-ui); font-size:1rem;
  outline:none; transition:all var(--t);
}
.input-gold::placeholder { color:var(--text-3); }
.input-gold:focus, select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,150,60,.18);
}
.input-code {
  font-family:var(--f-mono); letter-spacing:.25em; text-transform:uppercase;
}
select { cursor:pointer; }
select option { background:var(--bg-secondary); }


/* ═══════════════════════════════════════════════════════════════
   LOBBY
═══════════════════════════════════════════════════════════════ */

#screen-lobby {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  gap:24px; flex-wrap:wrap;
  min-height:100vh; padding:32px 20px;
}

/* Dezenter Copyright-Hinweis unten mittig im Lobby-Screen.
   Absolut positioniert, damit er das zentrierte Layout nicht verschiebt;
   pointer-events:none, damit er nie einen Klick abfängt. */
.page-copy {
  position:absolute; left:0; right:0; bottom:0;
  margin-top:24px; padding:14px 16px;
  text-align:center;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.02em;
  color:var(--text-3);
  pointer-events:none;
}

.lobby-card {
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  padding:34px 36px;
  width:380px; max-width:96vw;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Tagline über dem Logo: Schreibmaschine, weit gesperrt (Handoff .34em) */
.brand-eyebrow {
  font-family:var(--f-type);
  font-size:.68rem; font-weight:400; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ds-text-muted);
  text-align:center; margin-bottom:8px;
}
/* Wortmarke: geliefertes Bild aus dem Design-Handoff (§11), kein gesetzter
   Schriftzug mehr. Startbildschirm-Größe laut Handoff 268 px, hier auf die
   Breite der Lobby-Karte gedeckelt. NIE einfärben und nie auf hellen Grund:
   die Kanten des Bildes laufen weich aus, damit die braune Platte auf
   dunklem Grund nicht als Rechteck stehenbleibt – auf der Lobby-Karte
   (#2e2418) trägt das. Der Messing-Schein bleibt als weicher Schatten. */
.brand-logo {
  display:block; margin:-6px auto 20px;
  width:min(268px, 84%); height:auto;
  filter:drop-shadow(0 4px 24px rgba(200,150,60,.3));
}

.field-label {
  display:block;
  font-family:var(--f-display);
  font-size:.66rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-3);
  margin:0 0 8px 2px;
}
#lobby-main .input-gold { margin-bottom:18px; }
#lobby-main .btn-gold { margin-top:4px; }

/* #4: Angemeldete Nutzer – statt Namensfeld eine dezente Zeile mit dem Kontonamen */
.logged-in-as {
  margin:0 0 18px; padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--r-ctrl);
  background:rgba(200,150,60,.06);
  font-family:var(--f-ui); font-size:.9rem; color:var(--text-2); text-align:center;
}
.logged-in-as strong { color:var(--gold-light); font-weight:700; }

/* Spielen nur mit Konto: Statt der Bedienung steht hier der Weg dorthin.
   Erscheint nur, wenn Anmeldung eingerichtet UND niemand angemeldet ist –
   der Server prueft dasselbe (LOGIN_PFLICHT in server.js). */
.login-noetig { display:flex; flex-direction:column; gap:10px; }
.login-noetig-text {
  margin-bottom:4px; padding:13px 15px;
  border:1px solid var(--gold-deep); border-radius:var(--r-ctrl);
  background:rgba(200,150,60,.07);
  font-family:var(--f-ui); font-size:.92rem; line-height:1.5;
  color:var(--text-2); text-align:center;
}

.divider {
  text-align:center; color:var(--text-3);
  font-family:var(--f-display); font-size:.66rem;
  letter-spacing:.3em; text-transform:uppercase;
  margin:20px 0; position:relative;
}
.divider::before, .divider::after {
  content:''; position:absolute; top:50%; width:40%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line));
}
.divider::before { left:0; }
.divider::after { right:0; transform:scaleX(-1); }

.join-row { display:flex; gap:8px; }
.join-row .input-code { flex:1; margin:0; }
.join-row .btn-ghost { flex-shrink:0; white-space:nowrap; }

/* Zurück zur Landingpage von der "Raum erstellen"-Seite */
.lobby-home {
  display:block; width:100%; margin-top:20px;
  font-size:.85rem; color:var(--text-3); border-color:var(--line);
  text-align:center; text-decoration:none;
}
.lobby-home:hover { color:var(--gold-light); border-color:var(--gold-deep); background:rgba(200,150,60,.06); }

/* ── Warteraum ── */
.lobby-room { width:660px; }

.room-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:24px;
}
.room-title {
  font-family:var(--f-display); font-size:1.7rem; font-weight:700;
  color:var(--text-1); letter-spacing:.02em;
}
.room-subtitle { font-size:.85rem; color:var(--text-3); margin-top:2px; }

.code-badge {
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative;
  background:rgba(18,16,11,.5);
  border:1px solid var(--gold-deep);
  border-radius:12px; padding:8px 14px;
  text-align:left;
  /* Nicht schrumpfen: Nebeneinander drückte die Reihe das Feld sonst so weit
     zusammen, dass der Code aus seinem Kasten lief. */
  flex-shrink:0;
}
.code-badge-label {
  font-family:var(--f-display); font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-deep);
}
.code-badge-value {
  font-family:var(--f-mono); font-size:1.3rem; font-weight:700;
  letter-spacing:.18em; color:var(--gold-light);
}
/* .code-badge-icon ist entfallen – das ⧉ sitzt jetzt im Link-Knopf daneben. */
/* #1: Einladungslink teilen (Badge) + Raumcode allein kopieren (kleiner Knopf) */
.room-code-actions { display:flex; flex-direction:column; align-items:stretch; gap:6px; position:relative; }
/* Der Raumcode ist vierstellig – die Breite darf nicht am Inhalt hängen.
   Sonst reicht eine längere Zeichenkette im Feld, um den ganzen Knopf zu
   dehnen (genau das passierte mit den Kopier-Meldungen). */
.code-badge-value { min-width:4.6ch; }
/* Rückmeldung neben den Knöpfen. Nimmt keinen Platz, solange sie leer ist.
   UMBRUCH ERLAUBT: In der senkrechten Anordnung (Desktop) streckt
   align-items:stretch die ganze Spalte auf das breiteste Kind – mit nowrap
   zöge „Kopieren ging nicht" den Einladen-Knopf von 90 auf 129 px, und der
   spränge bei jedem Kopieren. Nebeneinander (schmal) bleibt sie einzeilig. */
.code-copy-hint {
  font-family:var(--f-display); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-light);
  white-space:normal; line-height:1.3; overflow-wrap:anywhere;
  /* UNTEREINANDER (Desktop) steht der Hinweis AUSSERHALB des Flusses, direkt
     unter den Knöpfen. Sonst streckt align-items:stretch die Spalte auf die
     längste Meldung, und der Einladen-Knopf springt bei jedem Kopieren von
     116 auf 129 px. Weder width:100% noch overflow-wrap helfen dagegen:
     Gestreckt wird nach max-content. */
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  opacity:0; transition:opacity var(--ds-t-micro) ease;
  text-align:center;
}
.code-copy-hint.is-in { opacity:1; }
.btn-code-only {
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; white-space:nowrap;
}

/* #6: Wartungsmodus-Hinweis – schmales Band ganz oben, über allem */
.server-notice {
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 14px;
  background:rgba(28,18,6,.96);
  border-bottom:1px solid var(--gold-deep);
  color:var(--gold-light); font-size:.78rem; line-height:1.35; text-align:center;
}
.server-notice-icon { flex:none; }
@media (max-width:900px) { .server-notice { font-size:.7rem; padding:6px 10px; } }

/* #1: Einladungs-Banner bei /play?room=XXXX */
.invite-banner {
  background:rgba(18,16,11,.5);
  border:1px solid var(--gold-deep);
  border-radius:12px; padding:12px 14px; margin-bottom:16px;
  display:flex; flex-direction:column; gap:10px;
}
.invite-banner-text { font-size:.9rem; line-height:1.45; color:var(--gold-light); }
.invite-banner-text strong { font-family:var(--f-mono); letter-spacing:.12em; color:var(--gold); }
.invite-banner.is-error { border-color:#a4453d; }
.invite-banner.is-error .invite-banner-text { color:#f0b7b1; }

.room-columns { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.col-heading {
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:12px;
}

.player-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.player-list li {
  display:flex; align-items:center; gap:10px;
  background:rgba(18,16,11,.45);
  border:1px solid var(--line); border-radius:12px;
  padding:9px 12px;
}
.player-list li.is-host { border-color:var(--gold-deep); }
.pl-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:.9rem;
  border:2px solid var(--ac, var(--gold));
  background:color-mix(in srgb, var(--ac, var(--gold)) 18%, var(--bg-deep));
  color:var(--ac, var(--gold));
}
.pl-avatar.is-bot { font-size:1rem; }
.pl-name { flex:1; font-weight:500; color:var(--text-1); }
.pl-tag {
  font-family:var(--f-display); font-size:.56rem; font-weight:600;
  letter-spacing:.12em; padding:2px 7px; border-radius:6px;
  text-transform:uppercase;
}
.pl-tag.host { background:rgba(200,150,60,.16); color:var(--gold-light); }
.pl-tag.bot { background:rgba(200,150,60,.18); color:#e6c072; }

.add-bot-btn {
  width:100%; margin-top:8px;
  background:transparent; cursor:pointer;
  border:1px dashed var(--gold-deep); border-radius:12px;
  padding:9px; color:var(--gold-deep);
  font-family:var(--f-ui); font-size:.85rem; font-weight:500;
  transition:all var(--t);
}
.add-bot-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold-light); background:rgba(200,150,60,.06); }
.add-bot-btn:disabled { opacity:.35; cursor:not-allowed; }
.add-bot-remove { border-color:rgba(182,82,77,.5); color:var(--error); margin-top:6px; }
.add-bot-remove:hover:not(:disabled) { border-color:var(--error); color:#D98480; background:rgba(182,82,77,.08); }

/* Sonderkarten-Toggles */
.special-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sc-toggle {
  display:flex; align-items:center; gap:8px;
  background:rgba(18,16,11,.45);
  border:1px solid var(--line); border-radius:11px;
  padding:8px 10px; cursor:pointer; transition:all var(--t);
  --ac:var(--gold);
}
.sc-toggle.on { border-color:color-mix(in srgb, var(--ac) 55%, transparent); }
.sc-toggle.off { opacity:.5; }
.sc-glyph {
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--ac);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ac) 45%, transparent));
}
/* Das gezeichnete Kartenmotiv im Schalter – dasselbe Bild wie auf der Karte
   und in der Legende. Der Schein der Zeile (drop-shadow oben) traegt weiter
   die Kartenfarbe, das Motiv selbst bleibt unangetastet: geliefertes Bild. */
.sc-glyph-illu { width:26px; height:26px; object-fit:contain; display:block; }
.sc-name { flex:1; font-size:.82rem; font-weight:500; color:var(--text-1); white-space:nowrap; }

/* Switch */
.switch { position:relative; display:inline-flex; flex-shrink:0; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-track {
  width:34px; height:19px; border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  transition:all var(--t); position:relative;
}
.switch-track::after {
  content:''; position:absolute; top:1px; left:1px;
  width:15px; height:15px; border-radius:50%;
  background:var(--text-3); transition:all var(--t);
}
.switch input:checked + .switch-track {
  background:var(--ac, var(--success));
  border-color:transparent;
}
.switch input:checked + .switch-track::after {
  left:16px; background:#fff;
}

.lobby-settings { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.85rem; color:var(--text-2); }
.settings-row label, .settings-row > span { flex:1; }
.settings-row select { width:auto; flex:0 0 auto; padding:6px 10px; font-size:.85rem; }
.toggle-line { cursor:pointer; }
.toggle-line .switch { --ac:var(--gold); }
.settings-note { font-size:.76rem; color:var(--text-3); line-height:1.4; }

#host-controls { margin-top:24px; }
.btn-start { font-size:1rem; padding:16px; box-shadow:0 8px 28px rgba(200,150,60,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.waiting-msg { text-align:center; color:var(--text-3); font-size:.85rem; margin-top:18px; }
.start-hint { text-align:center; color:var(--text-3); font-size:.8rem; line-height:1.4; margin-top:10px; }

/* „Raum verlassen" – dezent unter den Start-/Warte-Controls, gedämpft bis zum Hover. */
.btn-leave { display:block; width:100%; margin-top:16px; font-size:.85rem; color:var(--text-3); border-color:var(--line); }
.btn-leave:hover:not(:disabled) { color:#D98480; border-color:var(--error); background:rgba(182,82,77,.08); }


/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════════════════════════ */

#screen-game {
  position:relative; z-index:1;
  display:grid; grid-template-rows:auto 1fr auto;
  height:100vh; overflow:hidden;
}

#game-statusbar {
  display:flex; align-items:center; gap:14px;
  padding:8px 20px; min-height:38px;
  border-bottom:1px solid var(--line);
}
.status-text { flex:1 1 auto; min-width:0; color:var(--gold-light); font-size:.85rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#game-body { display:grid; grid-template-columns:1fr 252px; overflow:hidden; }

/* ── Spielbereich ── */
#table-section {
  position:relative; overflow:hidden;
  background:transparent;
}

/* Trumpf – oben-links außerhalb des Ovals (Design-Handoff). Eigener Panel-
   Hintergrund + hoher z-index, damit der linke Sitz-Chip ihn nicht überlagert (F10). */
#trump-panel {
  position:absolute; top:14px; left:16px; z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:8px 10px 10px;
  background:linear-gradient(180deg, rgba(56,43,28,.72), rgba(26,20,16,.78));
  border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(3px);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.tp-eyebrow {
  font-family:var(--f-display); font-size:.6rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep);
}
#tp-suit-fallback { display:flex; flex-direction:column; align-items:center; gap:6px; }
.trump-swatch {
  width:48px; height:48px; border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 18px color-mix(in srgb, currentColor 0%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
}
.trump-swatch.none {
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:1.4rem; box-shadow:none;
}
#tp-suit-name {
  font-family:var(--f-display); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3);
}

/* Trumpf-Flip-Container (wz-flip) – passt sich der Mini-Kartengröße an */
#tp-card-mini .wz-flip { width:54px; height:76px; }
#tp-card-mini .wz-flip .card { width:100%; height:100%; }

/* Runden-Badge oben-rechts */
#round-badge {
  position:absolute; top:18px; right:18px; z-index:4; text-align:right;
}
.rb-round { font-family:var(--f-display); font-size:1.05rem; font-weight:700; color:var(--gold-light); letter-spacing:.04em; }
.rb-trick { font-family:var(--f-mono); font-size:.72rem; color:var(--text-3); margin-top:2px; }
.rb-round span, .rb-trick span { font-family:var(--f-mono); }

/* Spielmitte – der Szenen-Hintergrund IST der Tisch; dieser Container
   positioniert nur die gespielten Karten mittig (kein eigenes Oval mehr). */
/* Werkbank: gemasertes Holz mit Messingkante (Handoff --ds-wood).
   Früher unsichtbar, weil die Tischplatte Teil des Hintergrund-SVGs war –
   seit dem Redesign wird sie hier gezeichnet. Radius als Prozentpaar, damit
   die Form (Handoff: 200px/130px auf 620×400) bei jeder Breite gleich bleibt. */
#felt-table {
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  width:min(66%, 680px); aspect-ratio:1.5 / 1;
  border:none; pointer-events:none;
  border-radius:32% / 33%;
  background:var(--ds-wood);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 3px var(--ds-brass-dim);
}

/* Gespielte Karten in der Mitte */
#trick-area {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px; padding:8%;
}
/* Platzhalter ("… eröffnet") – lesbare Pille, oberhalb des Emblems statt mittig drauf */
.trick-empty {
  position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% - 165px));
  color:var(--gold-light); font-family:var(--f-script); font-style:italic;
  font-size:1.05rem; letter-spacing:.02em; white-space:nowrap;
  padding:8px 22px; border-radius:999px;
  background:rgba(15,12,8,.82); border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.5); backdrop-filter:blur(3px);
}
.trick-play .card { box-shadow:0 18px 34px rgba(0,0,0,.6); }
/* Von der Hexe eingetauschte Karte kennzeichnen */
.trick-play.from-witch { position:relative; }
.trick-play.from-witch .card { box-shadow:0 0 0 2px #3d8b7d, 0 0 18px rgba(61,139,125,.6), 0 18px 34px rgba(0,0,0,.6); }
.witch-swap-tag {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:.52rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  background:#3d8b7d; color:#0c1a17; padding:2px 8px; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.5); z-index:3;
}
.trick-play:nth-child(odd) { transform:rotate(-5deg); }
.trick-play:nth-child(even) { transform:rotate(6deg); }
.trick-play:nth-child(3n) { transform:rotate(-2deg) translateY(-6px); }

/* ── Gegner-Chips ── */
#opponents-area { position:absolute; inset:0; pointer-events:none; z-index:3; }
.seat-chip {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  pointer-events:auto; width:108px;
}
.seat-avatar {
  --ac:var(--gold);
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:1.1rem;
  border:2px solid var(--ac);
  background:color-mix(in srgb, var(--ac) 18%, var(--bg-deep));
  color:var(--ac);
  position:relative; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
/* ── Aktiver Spieler: deutlich hervorgehoben ── */
.seat-chip.is-current { z-index:7; }
/* Leuchtendes Panel hinter dem aktiven Chip */
.seat-chip.is-current::before {
  content:''; position:absolute; inset:-10px -12px -8px;
  border-radius:16px; z-index:-1;
  background:radial-gradient(ellipse at 50% 30%, rgba(200,150,60,.22), rgba(200,150,60,.06) 65%, transparent 80%);
  border:1.5px solid rgba(200,150,60,.65);
  /* Handoff: sanft pulsierender Messingrahmen über 2400ms – kein Blinken.
     brassPulse liegt in tokens.css und respektiert prefers-reduced-motion. */
  animation:brassPulse 2400ms var(--ds-ease) infinite;
}
/* Größerer, hellerer Avatar beim aktiven Spieler */
.seat-chip.is-current .seat-avatar {
  transform:scale(1.14);
  border-width:3px;
  color:var(--gold-light);
}
.seat-chip.is-current .seat-name { color:var(--gold-light); }
/* Der pulsierende Ring in Akzentfarbe um den Avatar (.wz-active-player) liegt in
   wizard-motion.css (wird nach dieser Datei geladen und gewinnt daher). */

/* "AM ZUG / ERÖFFNET" – Abzeichen über dem aktiven Chip */
.seat-turn-badge {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:.55rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  background:var(--grad-gold); color:#3A2606;
  padding:2px 9px; border-radius:999px;
  box-shadow:0 3px 10px rgba(200,150,60,.55);
  animation:turnBadge 1.6s ease-in-out infinite;
}
@keyframes turnBadge {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-2px); }
}
/* Obere Sitze (seat-hi): Badge UNTER den Chip klappen, damit es nie die
   Statusleiste / das Runden-Badge berührt (zeigt nach unten in den Filz). */
.seat-chip.seat-hi .seat-turn-badge { top:auto; bottom:-14px; }

/* Barrierefreiheit: Bewegung reduzieren – Puls-Animationen der aktiven
   Hervorhebung ausschalten, statische Hervorhebung (Panel/Ring/Badge) bleibt. */
@media (prefers-reduced-motion: reduce) {
  .seat-chip.is-current::before,
  .seat-turn-badge { animation:none; }
}

.seat-meta { text-align:center; max-width:108px; }
.seat-name-row { display:flex; align-items:center; gap:5px; justify-content:center; }
.seat-name { font-weight:600; font-size:.84rem; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:74px; }
.seat-bot-tag { font-family:var(--f-display); font-size:.5rem; font-weight:600; letter-spacing:.08em; background:rgba(200,150,60,.2); color:#e6c072; padding:1px 5px; border-radius:5px; }
/* Verbindung verloren: Der Platz gehört noch dem Menschen – er geht erst
   nach Ablauf seiner Bedenkzeit an einen Automaten. Bewusst in Kupfer und
   nicht in Messing, damit es sich vom Bot-Schild unterscheidet. */
.seat-away-tag { font-family:var(--f-display); font-size:.5rem; font-weight:600; letter-spacing:.08em; background:rgba(181,101,29,.24); color:#e0a06a; padding:1px 5px; border-radius:5px; }
.seat-stats { font-family:var(--f-mono); font-size:.66rem; color:var(--text-3); margin-top:1px; }
.seat-stats b { color:var(--gold-light); font-weight:500; }
.seat-score { font-family:var(--f-mono); font-size:.6rem; color:var(--gold-deep); margin-top:1px; }

/* ── Hand-Bereich ── */
#hand-area {
  position:relative; z-index:2;
  background:linear-gradient(180deg, transparent, rgba(18,16,11,.5));
  padding:6px 18px 14px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}

#my-seat {
  position:absolute; left:18px; bottom:18px; z-index:5;
  display:flex; align-items:center; gap:10px;
  background:rgba(36,28,20,.7); border:1px solid var(--line);
  border-radius:14px; padding:8px 14px 8px 8px;
  backdrop-filter:blur(4px);
  transition:border-color var(--t), box-shadow var(--t);
}
#my-seat.is-current {
  border-color:rgba(200,150,60,.7);
  box-shadow:0 0 22px rgba(200,150,60,.4), inset 0 0 14px rgba(200,150,60,.1);
  background:rgba(56,43,28,.8);
}
#my-avatar-circle {
  --ac:var(--seat-0);
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  border:2px solid var(--ac);
  background:color-mix(in srgb, var(--ac) 18%, var(--bg-deep));
  color:var(--ac);
  transition:all var(--t);
}
#my-seat-name { font-weight:700; font-size:.9rem; color:var(--text-1); }
#hand-info { font-family:var(--f-mono); font-size:.72rem; color:var(--text-3); margin-top:2px; display:flex; gap:12px; }
#hand-info b { color:var(--gold-light); font-weight:500; }
#my-lead-badge { flex-shrink:0; }

/* Bid-Panel (inline) */
#bid-panel {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); border-radius:14px;
  padding:12px 20px; max-width:680px;
  box-shadow:0 0 30px rgba(200,150,60,.18);
  animation:slideUp .3s var(--t);
}
#bid-panel-label { font-family:var(--f-display); font-size:.82rem; font-weight:600; color:var(--gold-light); letter-spacing:.04em; }
.bid-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.bid-btn {
  width:42px; height:42px; border-radius:10px;
  font-family:var(--f-mono); font-size:1rem; font-weight:700;
  background:rgba(18,16,11,.6); color:var(--text-1);
  border:1px solid var(--line); cursor:pointer; transition:all var(--t);
}
.bid-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.bid-btn.selected { background:var(--grad-gold); color:#3A2606; border-color:transparent; }
.bid-btn:disabled, .bid-btn.disabled { opacity:.3; cursor:not-allowed; }

/* Hand-Fächer */
#hand-cards {
  display:flex; justify-content:center; align-items:flex-end;
  min-height:calc(var(--card-h) + 24px);
  padding-top:16px;
}
.hand-slot {
  transform-origin:bottom center;
  transition:transform var(--t);
  margin:0 -16px;
}
.hand-slot:hover { z-index:20; }

/* Drag & Drop: gezogene Karte + Einfüge-Markierung */
.card.card-dragging {
  z-index:60 !important; cursor:grabbing;
  box-shadow:0 0 0 2px var(--gold), 0 20px 36px rgba(0,0,0,.6), 0 0 26px rgba(200,150,60,.5) !important;
  opacity:.95;
}
.drop-indicator {
  width:4px; align-self:stretch; min-height:var(--card-h); flex:0 0 auto;
  background:var(--gold); border-radius:2px; margin:0 2px;
  box-shadow:0 0 10px rgba(200,150,60,.7);
}


/* ═══════════════════════════════════════════════════════════════
   KARTEN → public/cards.css
   Das Kartendesign ist ausgelagert, weil die Landingpage dieselben
   Karten zeigt. index.html lädt cards.css VOR style.css; die
   Größenstufen je Breakpoint stehen weiterhin hier unten.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */

#game-sidebar {
  border-left:1px solid var(--line);
  background:rgba(18,16,11,.4);
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar-tabs { display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
.sidebar-tab {
  flex:1; padding:11px 4px; cursor:pointer;
  font-family:var(--f-display); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  background:none; border:none; border-bottom:2px solid transparent;
  transition:all var(--t);
}
.sidebar-tab:hover { color:var(--text-2); }
.sidebar-tab.active { color:var(--gold-light); border-bottom-color:var(--gold); }
.sidebar-content { flex:1; overflow-y:auto; padding:14px; }

.score-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.score-table thead th {
  font-family:var(--f-display); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); text-align:left;
  padding:0 6px 8px; border-bottom:1px solid var(--line);
}
.score-table thead th:last-child, .score-table tbody td:last-child { text-align:right; }
.score-table tbody td { padding:7px 6px; border-bottom:1px solid rgba(255,255,255,.04); }
.score-table tbody td:nth-child(2) { color:var(--text-1); }
.score-table tbody td:last-child { font-family:var(--f-mono); font-weight:700; color:var(--gold-light); }
.score-table tr.leader td:nth-child(2) { color:var(--gold-light); font-weight:600; }
/* #2: Platz-Spalte */
.score-th-rank { width:1%; }
.score-table td.score-rank { color:var(--text-3); font-family:var(--f-mono); font-weight:600; width:1%; white-space:nowrap; padding-right:2px; }
.score-table tr.leader td.score-rank { color:var(--gold); }
.score-cell-good { color:var(--success) !important; }
.score-cell-bad  { color:var(--error) !important; }
.lead-star { color:var(--gold); margin-right:3px; }

/* Spiellog (Handoff): Schreibmaschinenschrift, je Ereignis ein 2px-Balken
   links. Der Balken ist die einzige Farbkodierung – ruhiger als flächige
   Hintergründe und auch bei vielen Zeilen gut lesbar. */
#log-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
#log-list li {
  font-family:var(--f-type); font-size:.84rem; line-height:1.45;
  color:var(--ds-text-2);
  padding-left:10px; border-left:2px solid transparent;
}
#log-list li.special { border-left-color:var(--ds-brass-hi); color:var(--ds-text); }
#log-list li.special.bomb  { border-left-color:#d0574a; color:#e0a79f; }
#log-list li.special.fairy { border-left-color:var(--ds-funkenfee); color:var(--ds-funkenfee); }
#log-list li.log-info { border-left-color:var(--ds-info); color:var(--ds-info); }
#log-list li b { color:var(--ds-text); }

#chat-messages { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
#chat-messages li { font-size:.8rem; color:var(--text-2); }
#chat-messages .cn { color:var(--gold-light); font-weight:600; }

/* #5: Lokales Stummschalten – Knopf je Nachricht + Hinweisleiste */
#chat-messages li { position:relative; padding-right:22px; }
.chat-mute-btn {
  position:absolute; right:0; top:0;
  background:none; border:none; padding:0 2px; cursor:pointer;
  font-size:.72rem; line-height:1.4; opacity:0; transition:opacity var(--t);
}
#chat-messages li:hover .chat-mute-btn,
.chat-mute-btn:focus-visible { opacity:.85; }
.chat-mute-btn:hover { opacity:1; }
/* Auf Touch-Geräten gibt es kein Hover – Knopf dauerhaft (dezent) zeigen. */
@media (hover:none) { .chat-mute-btn { opacity:.55; } }

#chat-messages li.chat-notice {
  font-style:italic; color:var(--gold-deep); font-size:.74rem; padding-right:0;
}

.chat-mute-bar {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px; padding:5px 8px;
  border:1px solid var(--gold-deep); border-radius:8px;
  background:rgba(18,16,11,.4);
  font-size:.72rem; color:var(--gold-deep);
}
.chat-unmute-all {
  background:none; border:none; cursor:pointer; white-space:nowrap;
  color:var(--gold-light); font-size:.72rem; text-decoration:underline;
}
#chat-input-row { display:flex; gap:6px; }
#chat-input-row input {
  flex:1; padding:9px 12px; border-radius:10px;
  background:rgba(18,16,11,.6); border:1px solid var(--line);
  color:var(--text-1); font-family:var(--f-ui); font-size:.85rem; outline:none;
}
#chat-input-row input:focus { border-color:var(--gold-deep); }
.btn-send {
  background:var(--grad-gold); color:#3A2606; border:none;
  border-radius:10px; width:40px; cursor:pointer; font-size:.9rem;
}


/* ═══════════════════════════════════════════════════════════════
   MODALS & OVERLAYS
═══════════════════════════════════════════════════════════════ */

@keyframes slideUp { from { opacity:0; transform:translateY(18px) scale(.97);} to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.modal-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(15,12,8,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .2s ease;
}
/* Dialog-Panel nach Handoff: Werkstattholz mit Messingrand, Kanten-Innenglanz
   oben, Radius 12, Padding 30/28, Breite 430px. */
.modal {
  --ac:var(--gold);
  background:linear-gradient(#33281a, #241c14);
  border:1px solid var(--ds-brass-dim);
  border-radius:var(--ds-radius-sheet); padding:28px 30px;
  max-width:430px; width:100%; text-align:center;
  /* Auf niedrigen Bildschirmen (Landscape/kleine Handys) nicht überlaufen –
     Inhalt scrollt innerhalb des Modals statt aus dem Viewport zu ragen. */
  max-height:85vh; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:inset 0 1px 0 rgba(230,192,114,.35), var(--ds-shadow-dialog),
    0 0 40px color-mix(in srgb, var(--ac) 18%, transparent);
  animation:slideUp .3s var(--t);
}
.modal-wide { max-width:520px; }
.modal h2 {
  font-family:var(--f-display); font-size:1.15rem; font-weight:700;
  letter-spacing:.04em; color:var(--gold-light); margin-bottom:8px;
}
/* Dialogtitel: Cinzel 700 (Handoff), nicht mehr kursiv-serif */
.modal h2.modal-script { font-family:var(--f-display); font-weight:700; font-size:1.45rem; letter-spacing:.05em; color:var(--ac); }
.modal p { color:var(--text-3); font-size:.88rem; margin-bottom:18px; }
.modal p strong { color:var(--gold-light); }
.modal p + p.cloud-stats { margin-top:-10px; }
.modal-accent-wandler { --ac:var(--wandler); }
.modal-accent-jongleur { --ac:var(--jongleur); }
.modal-accent-wolke { --ac:var(--wolke); }
.modal-accent-hexe { --ac:var(--hexe); }
.modal-accent-vampir { --ac:var(--vampir); }
.modal-accent-bug { --ac:var(--copper); }

/* Trumpf-Indikator in Auswahl-Overlays (Trumpfkarte + Trumpffarbe, wie im Spiel-UI) */
.modal-trump {
  display:inline-flex; align-items:center; gap:10px;
  margin:0 auto 16px; padding:6px 12px 6px 8px;
  background:rgba(26,20,16,.55); border:1px solid var(--line); border-radius:12px;
}
.modal-trump-label {
  font-family:var(--f-display); font-size:.58rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
}
.modal-trump-suit { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-2); font-weight:600; }
.modal-trump-swatch { width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.25); flex:none; }
.modal-trump-none { color:var(--text-3); font-style:italic; font-weight:400; }
/* Trumpf-Indikator im Overlay: 36px – dort trägt nur noch das Motiv,
   jeder Text wäre bei dieser Größe unlesbar. */
.modal-trump .card {
  width:36px; height:52px; --card-w:36px; --card-h:52px; flex:none;
}
.modal-trump .card .card-name, .modal-trump .card .card-hint,
.modal-trump .card .card-rule, .modal-trump .card .card-rank,
.modal-trump .card .card-color-label { display:none; }
.modal-trump .card .card-corner svg { display:none; }
.modal-trump .card.is-special .card-symbol { inset:0; }

/* Fehler-melden-Formular */
.bug-form { display:flex; flex-direction:column; gap:6px; text-align:left; }
.bug-label { font-family:var(--f-ui); font-size:.82rem; font-weight:500; color:var(--text-2); margin-top:8px; }
.bug-textarea { resize:vertical; min-height:112px; font-family:var(--f-ui); font-size:.95rem; line-height:1.5; }
.bug-actions { display:flex; gap:10px; margin-top:16px; }
.bug-actions .btn { flex:1; min-height:44px; }
.bug-feedback { margin-top:10px; padding:10px 12px; border-radius:var(--r-ctrl); font-size:.85rem; line-height:1.5; }
.bug-feedback.ok  { background:rgba(79,157,99,.14); border:1px solid var(--success); color:#9BD8AC; }
.bug-feedback.err { background:rgba(182,82,77,.14); border:1px solid var(--error); color:#E8A9A5; }

.suit-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.suit-btn {
  padding:16px; border-radius:12px; cursor:pointer; position:relative;
  font-family:var(--f-display); font-size:1rem; font-weight:600; letter-spacing:.04em;
  border:1.5px solid var(--sc); transition:all var(--t);
  background:color-mix(in srgb, var(--sc) 22%, var(--bg-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.suit-btn::before {
  content:''; width:16px; height:16px; border-radius:5px;
  background:var(--sc); box-shadow:0 0 10px color-mix(in srgb, var(--sc) 60%, transparent);
}
.suit-btn:hover { transform:translateY(-2px); box-shadow:0 0 18px color-mix(in srgb, var(--sc) 45%, transparent); }
.suit-btn-none::before { display:none; }
.suit-btn-red    { --sc:var(--heart); }
.suit-btn-blue   { --sc:var(--spade); }
.suit-btn-green  { --sc:var(--club); }
.suit-btn-yellow { --sc:var(--diamond); }
.suit-btn-none { grid-column:1/-1; font-size:1rem; font-family:var(--f-display); --sc:var(--text-3); }

.choice-buttons { display:flex; gap:12px; }
.choice-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 14px; border-radius:14px; cursor:pointer;
  background:rgba(18,16,11,.5); border:1.5px solid var(--line);
  color:var(--text-1); font-family:var(--f-display); font-size:.9rem; font-weight:600;
  transition:all var(--t);
}
.choice-btn:hover { transform:translateY(-2px); }
.choice-glyph { font-size:2rem; }
.choice-wizard { border-color:var(--gold-deep); } .choice-wizard:hover { border-color:var(--gold); box-shadow:0 0 20px rgba(200,150,60,.3); }
.choice-wizard .choice-glyph { color:var(--gold-light); }
.choice-jester { border-color:var(--narr); } .choice-jester:hover { box-shadow:0 0 20px rgba(184,168,136,.25); }
.choice-jester .choice-glyph { color:var(--narr); }
.choice-plus { border-color:var(--success); } .choice-plus .big-num { color:var(--success); }
.choice-minus { border-color:var(--error); } .choice-minus .big-num { color:var(--error); }
.big-num { font-family:var(--f-mono); font-size:2.2rem; font-weight:700; }

.picker-cards { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.picker-card {
  background:none; border:none; padding:0; cursor:pointer;
  border-radius:9px; transition:all var(--t); line-height:0;
}
.picker-card:hover:not(:disabled) { transform:translateY(-6px); filter:drop-shadow(0 0 12px rgba(200,150,60,.5)); }
/* Gesperrt (Hexen-Tausch: nach dem ersten Klick sperrt lockPicker ALLE Karten,
   damit die Netzlatenz keinen zweiten Klick durchlässt). Ohne eigene Regel sah
   der gesperrte Zustand exakt aus wie der klickbare – als einzige Button-Familie
   im Projekt hatte .picker-card kein :disabled. */
.picker-card:disabled { opacity:.4; cursor:not-allowed; }
/* … außer der gerade gewählten Karte: sie bleibt hell und bekommt den
   Messingring, damit während der Wartezeit sichtbar ist, WAS man gewählt hat.
   Ring als outline, nicht als border/box-shadow an der Karte – die Karte trägt
   seit dem Handoff-Umbau keinen border mehr, und ihr box-shadow führt bereits
   Rahmenlinie, Schlagschatten und Glow. */
.picker-card.is-chosen:disabled { opacity:1; }
.picker-card.is-chosen {
  outline:2px solid var(--gold); outline-offset:2px; border-radius:9px;
}

.step-indicator { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; }
.step {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.8rem; font-weight:700;
  background:rgba(18,16,11,.6); border:1px solid var(--line); color:var(--text-3);
}
.step.active { background:var(--grad-gold); color:#3A2606; border-color:transparent; }
.step-line { width:40px; height:1px; background:var(--line); }

/* Rundenende */
#round-result-overlay {
  position:fixed; inset:0; z-index:90;
  background:rgba(15,12,8,.65); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .25s ease;
}
#round-result-box {
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); border-radius:18px;
  padding:30px 34px; max-width:520px; width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 40px rgba(200,150,60,.2);
  animation:slideUp .32s var(--t);
}
#round-result-box h2 {
  font-family:var(--f-display); font-size:1.25rem; font-weight:700;
  color:var(--gold-light); text-align:center; margin-bottom:18px;
}
.rr-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.rr-table th { font-family:var(--f-display); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); text-align:left; padding:0 8px 8px; border-bottom:1px solid var(--line); }
.rr-table td { padding:8px; border-bottom:1px solid rgba(255,255,255,.04); }
.rr-table .pts-pos { color:var(--success); font-family:var(--f-mono); font-weight:700; }
.rr-table .pts-neg { color:var(--error); font-family:var(--f-mono); font-weight:700; }
.rr-table td:last-child { font-family:var(--f-mono); color:var(--gold-light); font-weight:700; }
.rr-actions { text-align:center; margin-top:20px; }

/* Spielende / Gewinner */
#gameover-overlay {
  position:fixed; inset:0; z-index:110; overflow-y:auto;
  /* Warmer Messingschein statt des alten Indigo (#1E1456) – der Endscreen
     gehörte als einziger Teil des Spiels noch ins Mitternachtsblau-Schema. */
  background:radial-gradient(ellipse 70% 60% at 50% 30%,
    color-mix(in srgb, var(--gold) 20%, var(--bg-secondary)) 0%,
    var(--bg-deep) 70%);
  display:flex; justify-content:center; padding:20px;
  animation:fadeIn .4s ease;
}
/* #3: margin:auto zentriert die Box, wenn Platz ist, kappt sie aber NICHT, wenn der
   Inhalt höher als der Viewport ist – dann scrollt das Overlay und der Button bleibt
   erreichbar (align-items:center würde oben abschneiden). */
/* Messingfassung wie bei den übrigen Overlays – der Endscreen stand vorher
   rahmenlos im Raum und wirkte dadurch beiläufiger als der Rest des Spiels. */
/* Der Kasten trägt ein Goldornament als Grund (public/img/szene/).
   Darüber liegt ein kräftiger Schleier – ohne ihn verlöre die Punkteliste
   den Kontrast, und darum geht es hier: Das Ornament soll Textur sein,
   nicht Hauptdarsteller. Das Motiv ist ein Ausschnitt aus der Vorlage:
   deren Ecken tragen „A" und Pik-Symbole, und die schließt CLAUDE.md für
   dieses Spiel aus (eigenes Blatt, keine französischen Farben). */
#gameover-box {
  position:relative; z-index:1; text-align:center; max-width:560px; width:100%; margin:auto;
  padding:clamp(26px,4vw,42px) clamp(20px,3vw,34px);
  overflow:hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 7%, rgba(36,28,20,.90)),
      rgba(26,20,16,.93)),
    url('img/szene/sieger-ornament.webp') center top / cover no-repeat,
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 7%, var(--bg-secondary)),
      var(--bg-primary));
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.05);
}
.go-eyebrow { font-family:var(--f-display); font-size:.78rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); }
.winner-name {
  font-family:var(--f-display); font-size:3.2rem; font-weight:800; letter-spacing:.04em;
  background:var(--grad-logo); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(200,150,60,.4)); margin:6px 0 4px;
}
.winner-points { font-family:var(--f-num); font-size:1rem; color:var(--gold-light); margin-bottom:22px; }
.winner-points::before { content:'✶ '; }

/* Podium – die Avatare STEHEN auf ihren Säulen (überlappen die Oberkante),
   Rang und Name sitzen in der Säule. Vorher schwebten Avatar und Name über
   dem Balken, wodurch bei ungleichen Höhen nicht erkennbar war, wer zu
   welcher Säule gehört. */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:12px; margin-bottom:24px; min-height:196px; }
.podium-place { display:flex; flex-direction:column; align-items:center; }
.podium-avatar {
  --ac:var(--gold);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:1.3rem;
  border:2px solid var(--ac); background:color-mix(in srgb, var(--ac) 18%, var(--bg-deep)); color:var(--ac);
  position:relative; z-index:2;
  margin-bottom:-16px;          /* setzt den Avatar auf die Säulenkante */
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.podium-place.first .podium-avatar { width:68px; height:68px; box-shadow:0 0 30px rgba(200,150,60,.5), 0 6px 16px rgba(0,0,0,.5); border-color:var(--gold); color:var(--gold-light); }
.podium-crown { position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-size:1.6rem; filter:drop-shadow(0 0 10px rgba(200,150,60,.7)); }
.podium-bar {
  width:96px; border-radius:12px 12px 0 0;
  background:linear-gradient(180deg, var(--velvet), var(--panel));
  border:1px solid var(--line); border-bottom:none;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:2px; padding:22px 6px 0;
  /* Sicherheitsnetz: nichts darf unten aus der Säule herauslaufen, egal wie
     kurz die Säule bei kleinen Höhen wird. */
  overflow:hidden;
}
.podium-rank { font-family:var(--f-num); font-size:1.5rem; font-weight:700; line-height:1; color:var(--gold-deep); }
.podium-name {
  font-size:.78rem; font-weight:600; color:var(--text-2); line-height:1.2;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Deutlichere Stufung: 1 klar über 2, 2 klar über 3 */
.podium-place.first .podium-bar { height:140px; border-color:var(--gold-deep); }
.podium-place.second .podium-bar { height:104px; }
.podium-place.third .podium-bar { height:78px; }
.podium-place.first .podium-rank { font-size:1.9rem; color:var(--gold); }
.podium-place.first .podium-name { color:var(--text-1); }

/* Endstand – Rang voran, Zahlen in Oswald, eigene Zeile hervorgehoben */
.final-scores { list-style:none; max-width:340px; margin:0 auto 22px; }
.final-scores li {
  display:grid; grid-template-columns:1.6rem 1fr auto; align-items:center; gap:10px;
  padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.9rem;
  border-radius:8px;
}
.fs-rank { font-family:var(--f-num); font-size:.9rem; color:var(--text-3); text-align:right; }
.fs-name { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-score { font-family:var(--f-num); font-weight:700; color:var(--gold-light); }
.fs-score small { font-family:var(--f-body); font-size:.7em; font-weight:400; color:var(--text-3); }
.final-scores li:first-child .fs-rank { color:var(--gold); }
.final-scores li:first-child .fs-name { color:var(--gold-light); font-weight:600; }
/* Eigene Zeile: auf einen Blick findbar, auch wenn man nicht gewonnen hat */
.final-scores li.is-me {
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent);
}
.final-scores li.is-me .fs-name::after {
  content:'du'; margin-left:8px;
  font-family:var(--f-num); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep);
}
.go-actions { display:flex; flex-direction:column; gap:10px; align-items:center; }
.go-actions .btn { min-width:220px; }

.lead-badge {
  font-family:var(--f-display); font-size:.6rem; font-weight:700;
  letter-spacing:.1em; padding:4px 9px; border-radius:999px;
  background:var(--grad-gold); color:#3A2606; white-space:nowrap;
}
.lead-badge.lead-badge-active { background:rgba(200,150,60,.25); color:#e6c072; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* ── Jongleur / Wolke: deklarierte Farbe als Label ── */
.card-color-label {
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:4px; z-index:3;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18);
  font-family:var(--f-display); font-size:.55rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.card-color-label .ccl-dot {
  width:.62em; height:.62em; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.5); box-shadow:0 0 5px rgba(0,0,0,.4);
}
/* Kleine Karten (Stich/Hand): Label kompakt, aber lesbar */
.card.card-sm .card-color-label { font-size:.48rem; bottom:3px; padding:1px 5px; }

/* ── Inline Trump-Wahl (kein Overlay, Karten bleiben sichtbar) ── */
#trump-choose-inline {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); border-radius:14px;
  padding:14px 20px; max-width:680px; width:100%;
  box-shadow:0 0 30px rgba(200,150,60,.18);
  animation:slideUp .3s var(--t);
}
#trump-choose-inline-label {
  font-family:var(--f-display); font-size:.9rem; font-weight:700;
  color:var(--gold-light); letter-spacing:.06em; text-align:center;
}
.inline-suit-buttons {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.inline-suit-buttons .suit-btn { padding:12px 18px; min-width:100px; }
.inline-suit-buttons .suit-btn-none { min-width:200px; }

/* ── Sonderkarten-Legende ── */
.sc-legend-btn {
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:50%; width:28px; height:28px; cursor:pointer;
  color:var(--gold-deep); font-family:var(--f-mono); font-size:.9rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); flex-shrink:0;
}
.sc-legend-btn:hover { background:rgba(200,150,60,.12); border-color:var(--gold); color:var(--gold-light); }

#sc-legend-panel {
  position:absolute; right:0; bottom:0; z-index:50;
  width:min(520px, 100%);
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); border-radius:16px 16px 0 0;
  padding:14px 18px 18px; max-height:60vh; overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  animation:slideUp .3s var(--t);
}
.sc-legend-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.sc-legend-header span {
  font-family:var(--f-display); font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light);
}
.sc-legend-header button {
  background:none; border:none; color:var(--text-3);
  font-size:1rem; cursor:pointer; padding:2px 6px;
}
.sc-legend-header button:hover { color:var(--text-1); }
.sc-legend-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px;
}
/* Unterüberschrift für weitere Legenden-Gruppen (z. B. Tisch-Markierungen) */
.sc-legend-subhead {
  font-family:var(--f-display); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep);
  margin:16px 0 8px;
}
/* Glyph-Slot, der eine echte Sitz-Markierung (Fähnchen/Geber) statt eines
   Emojis zeigt – Emoji-Größe/Schatten neutralisieren, Tag mittig ausrichten. */
.sc-legend-glyph--tag {
  display:flex; align-items:center; justify-content:center;
  width:1.4rem; filter:none;
}
.sc-legend-item {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(18,16,11,.4); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
  --ac:var(--gold);
}
.sc-legend-glyph {
  font-size:1.4rem; color:var(--ac); flex-shrink:0; line-height:1.2;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--ac) 50%, transparent));
  /* Feste Spalte, damit die Textblöcke aller Zeilen auf einer Kante stehen –
     die gezeichneten Motive haben unterschiedlich breite Silhouetten. */
  width:34px; display:flex; align-items:center; justify-content:center;
}
/* Das gezeichnete Kartenmotiv, wie es auch auf der Karte sitzt – nur klein.
   Der Schein der Zeile (drop-shadow oben) trägt weiter die Kartenfarbe, das
   Motiv selbst bleibt unangetastet: Es ist ein geliefertes Bild. */
.sc-legend-illu {
  width:34px; height:34px; object-fit:contain; display:block;
}
.karten-motiv-svg { display:flex; align-items:center; justify-content:center; }
.sc-legend-info { min-width:0; }
.sc-legend-name {
  font-family:var(--f-script); font-style:italic; font-size:1rem;
  font-weight:600; color:var(--text-1); margin-bottom:2px;
}
/* Kurzform hinter dem vollen Namen: „Dampfkoloss (Koloss)". Genau dieser Text
   steht auf schmalen Karten – hier ist er nachschlagbar. Quelle der Kurzformen
   ist window.CARD_NAME_SHORT (game/CardNames.js). */
.sc-legend-short {
  font-family:var(--f-mono); font-style:normal; font-size:.6rem;
  color:var(--text-3); letter-spacing:.04em; white-space:nowrap;
}
.sc-legend-hint {
  font-family:var(--f-mono); font-size:.58rem; color:var(--text-3);
  letter-spacing:.04em; text-transform:uppercase; line-height:1.4;
}

/* ── Topbar-Buttons (Emote / Übersicht) ── */
/* ── Topbar-Buttons: einheitliche, edle Gold-Linien-Icons ── */
.topbar-actions {
  display:flex; gap:4px; align-items:center; flex-shrink:0;
  padding:2px; border-radius:12px;
  background:rgba(18,16,11,.4); border:1px solid var(--line);
}
.topbar-btn {
  width:32px; height:32px; border-radius:9px;
  background:transparent; border:1px solid transparent;
  color:var(--gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--t), background var(--t), border-color var(--t), transform var(--t);
  padding:0;
}
.topbar-btn svg {
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.topbar-btn svg .ic-fill { fill:currentColor; stroke:none; }
.topbar-btn:hover {
  color:var(--gold-light);
  background:rgba(200,150,60,.14);
  border-color:color-mix(in srgb, var(--gold-deep) 60%, transparent);
  transform:translateY(-1px);
}
.topbar-btn:active { transform:translateY(0); }

/* #6: Top-Menü ein-/ausklappen (bei vielen Handkarten automatisch, jederzeit umschaltbar).
   Der Umschalt-Button bleibt sichtbar, nur die Aktions-Buttons klappen weg. */
.topbar-toggle .ic-expand { display:none; }
#game-statusbar.is-collapsed .topbar-actions { display:none; }
#game-statusbar.is-collapsed .topbar-toggle .ic-collapse { display:none; }
#game-statusbar.is-collapsed .topbar-toggle .ic-expand { display:block; }

/* Mute-Zustand: Wellen aus, Kreuz an */
.topbar-btn .ic-mute { display:none; }
#btn-mute.is-muted { color:var(--text-3); }
#btn-mute.is-muted .ic-wave { display:none; }
#btn-mute.is-muted .ic-mute { display:block; }
/* Übersicht-Button nur auf dem Handy (Desktop hat feste Sidebar) */
#btn-overview { display:none; }

/* Ansagen-Summe im Runden-Badge */
.rb-bids { font-family:var(--f-mono); font-size:.66rem; color:var(--text-3); margin-top:2px; }
.rb-bids.over  { color:var(--success); }
.rb-bids.under { color:var(--info); }

/* ── Geber-Marke (L4) ── */
.seat-dealer-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  font-family:var(--f-display); font-size:.52rem; font-weight:700;
  background:var(--grad-gold); color:#3A2606; flex-shrink:0;
}
/* Eröffner des aktuellen Stichs – statisches Fähnchen, bleibt den ganzen Stich.
   Bewusst NICHT animiert und farblich (Gold-Outline) vom pulsierenden
   Akzent-Ring "am Zug" abgesetzt, damit beide Signale unterscheidbar sind. */
.seat-opener-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; flex-shrink:0;
  font-size:.5rem; line-height:1; padding-left:1px;
  color:var(--gold-light);
  background:color-mix(in srgb, var(--gold) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
}

/* ── Stichgewinner-Banner (L1) ── */
#trick-winner-banner {
  position:absolute; top:18%; left:50%; transform:translate(-50%,-8px);
  z-index:9; pointer-events:none; opacity:0;
  font-family:var(--f-display); font-weight:700; font-size:.95rem;
  letter-spacing:.03em; white-space:nowrap;
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); color:var(--gold-light);
  box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 24px rgba(200,150,60,.3);
  transition:opacity var(--ds-t-move) ease, transform var(--ds-t-move) ease;
}
#trick-winner-banner.show { opacity:1; transform:translate(-50%,0); }
#trick-winner-banner.banner-bomb { border-color:var(--error); color:#E6A6A2; box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 24px rgba(182,82,77,.4); }

/* ── Letzter Stich (E2) ── */
.lt-play { display:flex; flex-direction:column; align-items:center; gap:5px; }
.lt-name { font-size:.66rem; color:var(--text-2); max-width:64px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lt-play.lt-winner .card { box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(200,150,60,.5); }
.lt-play.lt-winner .lt-name { color:var(--gold-light); font-weight:600; }

/* ── Rundenverlauf im Scoreboard (L5) ── */
#score-history { margin-top:14px; }
.sh-title { font-family:var(--f-type); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ds-text-muted); margin-bottom:6px; }
.sh-scroll { overflow-x:auto; scrollbar-width:thin; }
.sh-table { border-collapse:collapse; font-family:var(--f-num); font-size:.66rem; white-space:nowrap; }
.sh-table th { font-family:var(--f-type); color:var(--ds-text-muted); font-weight:400; letter-spacing:.16em; padding:3px 5px; border-bottom:1px solid var(--line); text-align:center; }
.sh-table td { padding:3px 5px; text-align:center; color:var(--ds-text-2); border-radius:5px; }
.sh-table .sh-name { text-align:left; color:var(--ds-text); position:sticky; left:0; background:var(--bg-deep); }
.sh-table .sh-sum { color:var(--ds-brass-hi); font-weight:700; font-size:.78rem; }
/* Getroffen / verfehlt als Zellfarbe (Handoff) – auf einen Blick lesbar */
.sh-table .pts-pos { color:#7fd0ad; background:rgba(74,157,127,.14); }
.sh-table .pts-neg { color:#e0796b; background:rgba(178,58,46,.16); }

/* ── Emote-Auswahl ── */
/* Kachel 56 px (Handoff): die gezeichneten Motive tragen Dampf und Funken in
   der Silhouette – unter ~44 px Motivfläche zerfällt der Kern zu einem Fleck.
   Panelbreite dazu passend 282 px = 4×56 + 3×8 Abstand + 2×12 Padding + 2×1
   Rand; bei box-sizing:border-box zählen Rand und Padding mit, sonst stehen
   nur drei Kacheln je Reihe. */
#emote-picker {
  position:absolute; top:44px; right:10px; z-index:120;
  box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; width:282px;
  background:linear-gradient(165deg, var(--velvet), var(--panel));
  border:1px solid var(--gold-deep); border-radius:14px; padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  animation:slideUp .2s var(--t);
  /* Mit 21 Kacheln à 56 px ist das Panel gut 400 px hoch – höher als das
     Handy-Querformat (390 px), das primäre Spiel-Layout. Ohne Deckel läge
     die letzte Reihe unter dem Bildrand und wäre nicht erreichbar. 54 px
     Abzug = 44 px Abstand von oben + 10 px Luft nach unten. */
  max-height:calc(100vh - 54px);
  max-height:calc(100dvh - 54px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent;
}
#emote-picker::-webkit-scrollbar { width:6px; }
#emote-picker::-webkit-scrollbar-thumb { background:var(--gold-deep); border-radius:3px; }
#emote-picker::-webkit-scrollbar-track { background:transparent; }
.emote-opt {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0; border-radius:10px;
  background:rgba(18,16,11,.5); border:1px solid var(--line);
  cursor:pointer; transition:all var(--t);
}
.emote-opt:hover { background:rgba(200,150,60,.14); }
/* object-fit: die Motive sind quadratisch geliefert – ein nachgeliefertes
   mit abweichendem Seitenverhältnis wird so eingepasst statt verzerrt. */
.emote-img { object-fit:contain; }
.emote-opt .emote-img { width:44px; height:44px; transition:transform var(--t); }
.emote-opt:hover .emote-img { transform:scale(1.12); }
/* Rückfall ohne Bilddatei: Emoji bzw. SVG-Glyph an derselben Stelle */
.emote-fallback { display:flex; align-items:center; justify-content:center; line-height:1; }

/* Emote-Blase über dem Sitz */
/* Motiv 54 px, bewusst OHNE Sprechblasen-Rahmen – der würde mit der
   Chat-Blase am selben Sitz konkurrieren. Nur der Schlagschatten trägt es
   gegen den Tisch ab. */
.emote-bubble {
  position:absolute; top:-26px; left:50%;
  transform:translateX(-50%); z-index:60;
  line-height:0; pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation:emotePop 2.6s ease-out forwards;
}
.emote-bubble .emote-img { width:54px; height:54px; }
.emote-bubble .emote-fallback { font-size:1.7rem; }
.emote-bubble-float { top:12%; }

/* Chat-Sprechblase über dem Sitz */
.chat-bubble {
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); z-index:60;
  max-width:160px; width:max-content;
  background:var(--gold-light); color:#2A1E06;
  font-family:var(--f-ui); font-size:.72rem; font-weight:500;
  padding:5px 9px; border-radius:12px; line-height:1.25;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  pointer-events:none; white-space:normal; text-align:center;
  animation:chatPop 4s ease-out forwards;
}
.chat-bubble::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--gold-light);
}
@keyframes chatPop {
  0% { opacity:0; transform:translateX(-50%) translateY(6px) scale(.9); }
  8% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  85% { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-6px); }
}
@keyframes emotePop {
  0%   { opacity:0; transform:translateX(-50%) translateY(10px) scale(.4); }
  14%  { opacity:1; transform:translateX(-50%) translateY(0) scale(1.15); }
  24%  { transform:translateX(-50%) translateY(0) scale(1); }
  80%  { opacity:1; transform:translateX(-50%) translateY(-6px) scale(1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-20px) scale(.9); }
}

/* Sidebar-Schließen (nur Handy-Sheet) */
.sidebar-close { display:none; margin-left:auto; background:none; border:none; color:var(--text-3); font-size:1rem; cursor:pointer; padding:0 6px; }
.sidebar-close:hover { color:var(--text-1); }

/* ── Werwolf: genommene Trumpfkarte fliegt zum Spieler ── */
.ww-taken-card {
  position:absolute; top:44%; left:50%; z-index:210;
  transform:translate(-50%,-50%) scale(1.4);   /* im Halten größer & gut lesbar */
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(200,150,60,.5));
  transition:transform var(--ds-t-carry) var(--ds-ease-carry), opacity var(--ds-t-carry) ease;
}
.ww-taken-card.appear { animation:wwTakenAppear .45s cubic-bezier(.22,1,.36,1); }
@keyframes wwTakenAppear {
  0%   { transform:translate(-50%,-50%) scale(.35); opacity:0; }
  60%  { transform:translate(-50%,-50%) scale(1.55); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.4); }
}
.ww-taken-card.fly {
  transform:translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -120px))) scale(.5);
  opacity:0;
}
.ww-taken-label {
  font-family:var(--f-display); font-size:.55rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light);
  background:rgba(18,16,11,.7); padding:2px 8px; border-radius:999px;
}

/* Motion-System ausgelagert nach wizard-motion.css (wz-* Utility-Klassen) */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width:1024px) {
  #game-body { grid-template-columns:1fr 220px; }
  #felt-table { width:72%; }
}

/* ── Tablet & Handy: Sidebar als Bottom-Sheet ────────────────── */
@media (max-width:760px) {
  :root { --card-w:64px; --card-h:90px; }
  .card { --name-size:8.5px; }   /* Karte jetzt <80px → unterstes Handoff-Band */
  #game-body { grid-template-columns:1fr; }
  .room-columns { grid-template-columns:1fr; }
  .lobby-room { width:96vw; }

  /* Übersicht-Button einblenden, Sidebar als schließbares Sheet */
  #btn-overview { display:flex; }
  #game-sidebar {
    position:fixed; left:0; right:0; bottom:0; z-index:130;
    height:min(72vh, 480px);
    border-left:none; border-top:1px solid var(--gold-deep);
    border-radius:18px 18px 0 0;
    background:linear-gradient(180deg, var(--bg-secondary), var(--bg-deep));
    transform:translateY(102%);
    /* Vorher stand hier "transform .3s var(--t)". Weil --t selbst schon
       eine Dauer mitbringt, las der Browser das als 300 ms Dauer PLUS
       200 ms Verzögerung – das Sheet blieb beim Öffnen kurz hängen. */
    transition:transform var(--ds-t-move) var(--ds-ease-ui);
    box-shadow:0 -12px 40px rgba(0,0,0,.6);
  }
  #game-sidebar.open { transform:translateY(0); }
  .sidebar-close { display:block; }
}

/* ── Mobil (≤ 600px) ─────────────────────────────────────────── */
@media (max-width:600px) {
  :root { --card-w:56px; --card-h:80px; }

  /* Lobby scrollbar */
  body { overflow-y:auto; }
  /* Extra Platz unten, damit der feste Ton-Button (unten links) die letzte
     Zeile / den Start-Button im Warteraum nicht überdeckt. */
  #screen-lobby { padding:16px 12px 76px; gap:16px; }
  .lobby-card { padding:24px 18px; }
  .brand-logo { margin-bottom:20px; }

  /* Lobby-Warteraum kompakt */
  .lobby-room { width:100%; padding:20px 14px; }
  .room-columns { grid-template-columns:1fr; gap:16px; }
  .room-header { flex-direction:column; gap:10px; align-items:stretch; }
  /* Der Raumcode bekommt die ganze Zeile. Er ist zwölfstellig
     (DAMPF-XXXXXX) und schob die Knöpfe sonst in die nächste Zeile –
     „Link" stand dann ÜBER „Nur Code" statt daneben. So bleiben die beiden
     immer beieinander, egal wie lang der Code ist. */
  .code-badge { flex-direction:row; align-items:center; padding:8px 12px; gap:8px; flex-basis:100%; }
  .code-badge-label { display:none; }
  .code-badge-value { font-size:1.1rem; }
  .room-code-actions { flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap; }
  /* NEBENEINANDER (schmal, das Layout auf dem Handy) steht er wieder im
     Fluss – direkt neben „Nur Code", wo er hingehört. Die Reihe streckt
     nicht, also wächst hier auch nichts mit. */
  .code-copy-hint {
    position:static; white-space:nowrap; width:auto; margin-top:0;
    align-self:center;
  }
  .special-toggle-grid { grid-template-columns:1fr; }

  /* ── Spielfeld Layout ── */
  #screen-game {
    height:100dvh;
    grid-template-rows:38px 1fr auto;
    grid-template-columns:minmax(0, 1fr);
    overflow:hidden;
  }

  /* Statusleiste: eine Zeile */
  #game-statusbar { padding:0 10px; min-height:38px; }
  .status-text {
    font-size:.72rem; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }

  /* Game-Body: nur Spielbereich */
  #game-body { grid-template-columns:minmax(0,1fr); overflow:hidden; min-height:0; min-width:0; }

  /* Table-Section füllt die Fläche, Gegner werden rundum überlagert */
  #table-section {
    position:relative; overflow:visible; min-height:0; min-width:0;
    display:flex; flex-direction:column; padding:0;
  }

  /* Gegner rundum um den Tisch (absolute Ring-Positionierung per JS) */
  #opponents-area { position:absolute; inset:0; pointer-events:none; z-index:6; }
  .seat-chip {
    position:absolute; transform:translate(-50%,-50%);
    flex-direction:column; align-items:center; width:auto; gap:2px;
    pointer-events:auto; background:none; border:none; padding:0;
  }
  .seat-avatar { width:34px; height:34px; font-size:.85rem; }
  .seat-meta {
    display:flex; flex-direction:column; gap:0; max-width:76px;
    background:rgba(15,12,8,.6); border-radius:7px; padding:1px 5px;
  }
  .seat-name { font-size:.62rem; max-width:66px; }
  .seat-stats { font-size:.52rem; }
  .seat-score { font-size:.5rem; }
  .seat-bot-tag, .seat-away-tag { display:none; }
  .seat-turn-badge { top:-12px; font-size:.5rem; padding:1px 7px; }
  /* Blinde erste Runde: Gegnerkarte am Chip klein halten (kein Überlappen des Ovals) */
  .seat-blind-card { margin-top:2px; }
  .seat-blind-card .card {
    width:30px; height:42px;
    --card-w:30px; --card-h:42px;
  }

  /* 5–6 Spieler auf schmalem Handy – Sitz-Chips & Karten kompakter, damit die
     Sitze sich nicht mehr überlappen. Die Blind-Karte hängt in Runde 1 seitlich
     (#1), dadurch bleibt unten Platz für die kompakte Gesamtpunkte-Zeile (#4). */
  #opponents-area[data-total="5"] .seat-avatar,
  #opponents-area[data-total="6"] .seat-avatar { width:30px; height:30px; font-size:.72rem; }
  #opponents-area[data-total="5"] .seat-meta,
  #opponents-area[data-total="6"] .seat-meta { max-width:70px; padding:1px 4px; }
  #opponents-area[data-total="5"] .seat-name,
  #opponents-area[data-total="6"] .seat-name { font-size:.55rem; max-width:62px; }
  #opponents-area[data-total="5"] .seat-stats,
  #opponents-area[data-total="6"] .seat-stats { font-size:.47rem; }
  /* #4: Gesamtpunkte während der Runde sichtbar halten – kompakt, eigene Zeile.
     (Die Blind-Karte hängt im Kompaktmodus seitlich, daher ist unten Platz.) */
  #opponents-area[data-total="5"] .seat-score,
  #opponents-area[data-total="6"] .seat-score { display:block; font-size:.46rem; margin-top:0; }
  #opponents-area[data-total="6"] .seat-chip { gap:1px; }
  #opponents-area[data-total="5"] .seat-blind-card .card,
  #opponents-area[data-total="6"] .seat-blind-card .card {
    width:22px; height:31px; border-radius:4px; --card-w:22px; --card-h:31px;
  }

  /* Karten-Innenelemente brauchen hier KEINE eigenen Größen mehr: seit dem
     Handoff-Redesign leiten sich Wert, Motiv, Name, Trennlinie und Hinweis
     alle proportional aus --card-w ab (siehe cards.css). Ein fixer font-size
     an dieser Stelle würde diese Skalierung wieder aushebeln.
     Was auf schmalen Karten ganz entfällt, entscheidet die Größenleiter am
     Ende von cards.css – sie greift allein über die Kartenbreite, ein
     --card-w-Override hier braucht also keine Begleitklasse mehr. */
  .card-color-label { font-size:.5rem; bottom:3px; }
  /* Ablage-Karten in einer zentrierten, schmalen Spalte bündeln. So erreichen sie
     bei vielen Spielern (5–6) NIE den Sitzring an den Rändern (Sitze sitzen links/
     rechts/oben, die Mitte ist frei). Statt das ganze Oval zu füllen (inset:0),
     eine zentrierte Box begrenzter Breite. */
  #trick-area {
    inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(46%, 158px); max-height:76%;
    padding:0; gap:5px; align-content:center;
  }
  /* Trick-Karten etwas kleiner → mehr Abstand + saubereres Umbrechen (3/Reihe) */
  #trick-area .card { --card-w:46px; --card-h:66px; }
  #trick-area .trick-play:nth-child(3n) { transform:rotate(-2deg); } /* kein translateY → bleibt in der Box */
  /* Platzhalter mittig in die zentrierte Box legen (Desktop-Versatz -165px aufheben,
     der ihn sonst nach oben in den obersten Sitz schiebt). */
  .trick-empty {
    position:static; transform:none; white-space:normal; text-align:center;
    max-width:100%; font-size:.9rem;
  }

  /* Ovaler Tisch: füllt den verbleibenden Platz, darf aber schrumpfen */
  #felt-table {
    position:relative; top:auto; left:auto; transform:none;
    width:calc(100% - 16px); margin:0 auto;
    flex:1 1 0; min-height:96px;
    /* kein aspect-ratio → Portrait-Oval füllt Höhe */
    border-radius:50%;
  }

  /* Trumpf: unten-links im Tischbereich, überlagert nicht Gegner */
  #trump-panel {
    position:absolute; bottom:6px; left:8px;
    top:auto; transform:none; z-index:5;
    flex-direction:column; align-items:center; gap:3px;
  }
  .tp-eyebrow { display:block; font-size:.48rem; letter-spacing:.15em; }
  #tp-card-mini { display:block; }
  #tp-card-mini .card {
    width:38px; height:54px;
    --card-w:38px; --card-h:54px;
  }
  /* 38px: nur Motiv + Wert, Texte entfallen */
  #tp-card-mini .card-name, #tp-card-mini .card-hint,
  #tp-card-mini .card-rule, #tp-card-mini .card-rank { display:none; }
  #tp-card-mini .card-corner svg { display:none; }
  #tp-card-mini .card.is-special .card-symbol { inset:0; }
  #tp-suit-fallback { flex-direction:row; align-items:center; gap:4px; }
  .trump-swatch { width:22px; height:22px; border-radius:5px; }
  #tp-suit-name { font-size:.5rem; letter-spacing:.1em; }
  #tp-card-mini .wz-flip { width:38px; height:54px; }

  /* Runden-Badge */
  #round-badge { top:4px; right:6px; }
  .rb-round { font-size:.75rem; }
  .rb-trick { font-size:.56rem; }

  /* ── Hand-Bereich ── */
  #hand-area {
    flex-shrink:0; padding:4px 10px max(6px, env(safe-area-inset-bottom));
    gap:4px; overflow:visible; background:rgba(18,16,11,.6);
    border-top:1px solid var(--line);
  }

  /* My-Seat: im Fluss (relative, damit Emote-Blasen daran ankern).
     left/bottom der Desktop-Regel MÜSSEN zurückgesetzt werden – sonst schiebt
     position:relative die Leiste 18px nach rechts (ragt aus dem Screen) und
     18px nach oben (überlappt das Trumpf-Feld). */
  #my-seat {
    position:relative; left:auto; bottom:auto;
    background:rgba(36,28,20,.7); border:1px solid var(--line);
    border-radius:12px; padding:6px 10px 6px 7px;
    display:flex; align-items:center; gap:8px;
    width:100%;
  }
  #my-avatar-circle { width:32px; height:32px; font-size:.85rem; }
  #my-seat-name { font-size:.78rem; }
  #hand-info { font-size:.62rem; gap:8px; }
  #my-lead-badge { font-size:.55rem; padding:3px 7px; }
  .sc-legend-btn { width:24px; height:24px; font-size:.75rem; }

  /* Bid-Panel: kompakt, bei vielen Stichen scrollbar */
  #bid-panel {
    width:100%; flex-wrap:wrap; justify-content:center;
    padding:8px 10px; gap:6px;
  }
  #bid-panel-label { font-size:.68rem; width:100%; text-align:center; margin-bottom:0; }
  .bid-buttons {
    justify-content:center; gap:6px;
    max-height:34vh; overflow-y:auto; width:100%;
    scrollbar-width:none;
  }
  .bid-buttons::-webkit-scrollbar { display:none; }
  .bid-btn { width:42px; height:42px; font-size:.95rem; }

  /* Inline Trump-Wahl: kompakt */
  #trump-choose-inline { padding:10px 12px; gap:8px; width:100%; }
  #trump-choose-inline-label { font-size:.8rem; }
  .inline-suit-buttons { gap:6px; }
  .inline-suit-buttons .suit-btn { padding:10px; font-size:.85rem; flex:1; min-width:80px; }

  /* Handkarten: umbrechende Reihen + vertikaler Scroll → alle Karten sichtbar/erreichbar
     (auch bei hohen Runden mit bis zu 20 Karten) */
  #hand-cards {
    display:flex; flex-direction:row; flex-wrap:wrap;
    align-items:flex-start; align-content:flex-start; justify-content:center;
    gap:6px 5px; padding:6px;
    width:100%; min-height:0;
    max-height:42vh; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; touch-action:pan-y;
    scrollbar-width:none;
  }
  #hand-cards::-webkit-scrollbar { display:none; }
  .hand-slot { transform:none !important; margin:0; flex:0 0 auto; }
  /* Touch-Feedback statt Hover-Lift */
  .card.playable:active { transform:translateY(-6px); }

  /* Modals: Bottom-Sheet */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal {
    max-width:100%; border-radius:18px 18px 0 0;
    padding:22px 20px 28px; width:100%;
  }
  .modal-wide { max-width:100%; }
  .choice-buttons { gap:8px; }
  .choice-btn { padding:16px 10px; }
  .big-num { font-size:1.8rem; }
  .suit-buttons { grid-template-columns:1fr 1fr; }
  .suit-btn { padding:14px; }
  .picker-cards { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }

  /* Sonderkarten-Legende */
  #sc-legend-panel { width:100%; right:0; border-radius:18px 18px 0 0; }
  .sc-legend-grid { grid-template-columns:1fr; }

  /* Rundenende */
  #round-result-overlay { align-items:flex-end; padding:0; }
  #round-result-box { border-radius:18px 18px 0 0; max-width:100%; }
  .rr-table th, .rr-table td { padding:5px; font-size:.78rem; }

  /* Spielende */
  .winner-name { font-size:2.4rem; }
  .podium { gap:8px; min-height:170px; }
  /* Vorher stand hier `.podium-bar.first` – die Klasse sitzt aber auf
     .podium-place, die Regeln griffen also nie. */
  .podium-bar { width:82px; padding-top:20px; }
  .podium-place.first .podium-bar { height:112px; }
  .podium-place.second .podium-bar { height:86px; }
  .podium-place.third .podium-bar { height:70px; }
  .podium-rank { font-size:1.25rem; }
  .podium-place.first .podium-rank { font-size:1.6rem; }
  .podium-name { font-size:.7rem; }
}

/* #3: Sehr niedrige Handy-Höhen – Endscreen kompakter, damit der Button möglichst
   ohne Scrollen sichtbar ist (und bei Bedarf sauber gescrollt werden kann). */
@media (max-height:680px) {
  #gameover-overlay { padding:14px; }
  .go-eyebrow { font-size:.7rem; }
  .winner-name { font-size:2rem; margin:4px 0; }
  .winner-points { font-size:.9rem; margin-bottom:14px; }
  #gameover-box { padding:20px 16px; }
  .podium { min-height:124px; margin-bottom:14px; }
  .podium-avatar { width:46px; height:46px; margin-bottom:-13px; }
  .podium-place.first .podium-avatar { width:56px; height:56px; }
  .podium-bar { padding-top:18px; }
  .podium-place.first .podium-bar { height:86px; }
  .podium-place.second .podium-bar { height:64px; }
  .podium-place.third .podium-bar { height:50px; }
  .podium-rank { font-size:1.2rem; }
  .podium-place.first .podium-rank { font-size:1.5rem; }
  .final-scores { margin-bottom:14px; }
  .final-scores li { padding:5px 6px; font-size:.85rem; }
  .go-actions { gap:9px; }
}

/* ── Zug-Timer (Countdown-Pille) ─────────────────────────────────
   Lebt in der Statusleiste (eigener Flex-Platz) → keine feste Pixel-Position mehr,
   überlappt bei keiner Spielerzahl mit Sitzen/Karten/Hand. */
.turn-timer{flex:0 0 auto;margin-left:auto;
  display:flex;align-items:center;gap:9px;padding:5px 14px 5px 8px;border-radius:var(--r-pill,999px);
  background:rgba(26,20,16,.9);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.4);
  backdrop-filter:blur(8px);font-family:var(--f-ui);color:var(--text-1);transition:border-color var(--ds-t-move),box-shadow var(--ds-t-move)}
.turn-timer.hidden{display:none}
.turn-timer .tt-time{font-family:var(--f-mono);font-weight:700;font-size:15px;color:var(--gold-light);min-width:40px;text-align:center}
.turn-timer .tt-who{font-size:12.5px;color:var(--text-2);letter-spacing:.02em}
.turn-timer .tt-ring{width:22px;height:22px;border-radius:50%;flex:none;
  background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),rgba(255,255,255,.10) 0);
  -webkit-mask:radial-gradient(circle 6px at center,transparent 98%,#000 100%);
          mask:radial-gradient(circle 6px at center,transparent 98%,#000 100%)}
.turn-timer.turn-timer-mine{border-color:var(--gold);box-shadow:0 8px 26px rgba(200,150,60,.3)}
.turn-timer.turn-timer-mine .tt-who{color:var(--gold-light);font-weight:600}
.turn-timer.turn-timer-urgent{border-color:#B6524D;animation:tt-pulse 1s ease-in-out infinite}
.turn-timer.turn-timer-urgent .tt-time{color:#F0A9A0}
.turn-timer.turn-timer-urgent .tt-ring{background:conic-gradient(#B6524D calc(var(--p,1)*360deg),rgba(255,255,255,.10) 0)}
@keyframes tt-pulse{0%,100%{box-shadow:0 8px 26px rgba(182,82,77,.25)}50%{box-shadow:0 8px 30px rgba(182,82,77,.6)}}
@media (prefers-reduced-motion:reduce){.turn-timer.turn-timer-urgent{animation:none}}

/* ── Audio-Bedienfeld (Mute + Musik/SFX-Regler) ─────────────── */
#audio-ctl{position:fixed;left:14px;bottom:14px;z-index:55;font-family:var(--f-ui)}
.audio-ctl-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(26,20,16,.9);border:1px solid var(--line);color:var(--gold-light);
  box-shadow:0 6px 18px rgba(0,0,0,.4);backdrop-filter:blur(8px);transition:border-color var(--ds-t-micro),transform var(--ds-t-feedback)}
.audio-ctl-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.audio-ctl-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.audio-ctl-btn .ac-fill{fill:currentColor;stroke:none}
.audio-ctl-btn .ac-mute{display:none}
#audio-ctl.is-muted .audio-ctl-btn{color:var(--text-3)}
#audio-ctl.is-muted .ac-wave{display:none}
#audio-ctl.is-muted .ac-mute{display:inline}
.audio-ctl-pop{
  position:absolute;left:0;bottom:52px;width:210px;padding:14px;border-radius:14px;
  background:rgba(26,20,16,.97);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:12px}
.audio-ctl-pop.hidden{display:none}
.audio-ctl-pop label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-2)}
.audio-mute-row span{font-family:var(--f-display);letter-spacing:.06em;color:var(--text-1)}
.audio-mute-toggle{
  min-width:52px;padding:5px 12px;border-radius:var(--r-pill,999px);cursor:pointer;
  font-family:var(--f-mono);font-size:12px;font-weight:700;
  background:rgba(200,150,60,.14);border:1px solid var(--gold);color:var(--gold-light)}
.audio-mute-toggle.off{background:rgba(182,82,77,.14);border-color:#B6524D;color:#F0A9A0}
.audio-slider-row span{flex:none}
.audio-slider-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));outline:none}
.audio-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--gold-light);border:1px solid var(--gold-deep);cursor:pointer}
.audio-slider-row input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--gold-light);border:1px solid var(--gold-deep);cursor:pointer}
@media (max-width:560px){ #audio-ctl{left:10px;bottom:10px} .audio-ctl-btn{width:38px;height:38px} }

/* Mobil im Spiel: schwebenden Audio-Knopf ausblenden – er lag über dem
   Hand-Bereich und verdeckte bei vollem Blatt die linkeste Karte. Die Regler
   öffnen sich stattdessen über den Mute-Button in der Statusleiste; das Panel
   klappt dann oben rechts unter der Leiste auf. */
@media (max-width:600px){
  body.in-game #audio-ctl { display:none; }
  body.in-game #audio-ctl.panel-open {
    display:block; left:auto; right:10px; bottom:auto; top:46px; z-index:80;
  }
  body.in-game #audio-ctl.panel-open .audio-ctl-btn { display:none; }
  body.in-game #audio-ctl.panel-open .audio-ctl-pop { position:static; }
}

/* Zug-Timer auf dem Handy: unten-links IM Tischbereich verankert (JS hängt ihn in
   #table-section). Sitzt direkt über der eigenen Namensleiste (= Unterkante des
   Tischbereichs) und bündig rechts neben dem Trumpf-Feld – unabhängig von der
   Bildschirmhöhe. (Steht bewusst NACH der Basisregel, damit der Cascade greift.) */
@media (max-width:600px){
  .turn-timer{
    position:absolute; left:90px; right:auto; top:auto; bottom:4px; margin:0;
    transform:none; padding:4px 9px 4px 6px; gap:6px; z-index:7;
  }
  .turn-timer .tt-ring{ width:18px; height:18px; }
  .turn-timer .tt-time{ font-size:13px; min-width:32px; }
  .turn-timer .tt-who { font-size:11px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── Kleine Bildschirmhöhe (kleine Handys / Landscape): Platz sparen ────
   WICHTIG: Die Trumpfkarte bleibt sichtbar – nur die Mini-Karte etwas kleiner
   und die Abstände enger. (Modals scrollen bereits via .modal max-height:85vh.) */
@media (max-width:600px) and (max-height:660px){
  #tp-card-mini .card, #tp-card-mini .wz-flip { width:32px; height:46px; --card-w:32px; --card-h:46px; }
  #trump-panel { bottom:4px; left:6px; padding:4px 7px; gap:2px; }
  .tp-eyebrow { font-size:.44rem; }
  #tp-suit-name { font-size:.46rem; }
  .trump-swatch { width:16px; height:16px; }
  /* Der Timer wird per JS bündig neben das (schmalere) Trumpf-Feld gesetzt. */
}

/* ═══════════════════════════════════════════════════════════════
   KOSMETIK (Phase 4) – per data-Attribut am <html> (game-auth.js)
   Standard (classic/midnight/none) = keine Überschreibung.
═══════════════════════════════════════════════════════════════ */

/* ── Kartenrückseiten ──
   Die Farbtabelle je Motiv (Rahmenton, Plakette, Schriftfarbe) ist mit dem
   Profil-Umbau nach cards.css gewandert: Sie gehört zum Kartendesign, und die
   Profilseite lädt cards.css, aber nicht style.css. Dort steht sie in einer
   Fassung, die sowohl dokumentweit (html[data-card-back] im Spiel) als auch
   je Element (data-back an der Karte, Vorschaukacheln) greift. */

/* ── Foto-Spieltische ──
   Fünf fotografierte Tischplatten in Aufsicht (31.07.2026, dritte Runde).
   Sie haben eine ruhige, dunkle Mitte und tragen alle Details als Rahmen am
   Bildrand – genau umgekehrt zu den bisherigen Motiven, deren helle
   Pergament-Mitte die Karten schluckte. Alle fünf vorherigen Tische sind
   damit entfallen.

     eiche         Eichenwerkbank mit Lederauflage   gratis, Standard
     nussbaum      Nussbaum mit Messingzahnrädern    gratis
     zeichenbrett  Blaugraues Reißbrett              Premium
     kupferplatte  Oxidiertes Kupfer, Grünspan       Premium
     messingblech  Genietetes Messingblech           Premium

   Die Bilder sind quadratisch (1264 px); background-size erbt cover aus der
   body-Regel, im Querformat wird also oben und unten beschnitten. Das ist
   gewollt: beschnitten wird der Detailrahmen, die ruhige Mitte bleibt.
   Katalog-Einträge: supabase/migrations/0010_spieltische_aufsicht.sql */
html[data-table-theme="eiche"]        body { background-image:var(--bg-vignette), url('img/backgrounds/spieltisch-eiche.jpg'); }
html[data-table-theme="nussbaum"]     body { background-image:var(--bg-vignette), url('img/backgrounds/spieltisch-nussbaum.jpg'); }
html[data-table-theme="zeichenbrett"] body { background-image:var(--bg-vignette), url('img/backgrounds/spieltisch-zeichenbrett.jpg'); }
html[data-table-theme="kupferplatte"] body { background-image:var(--bg-vignette), url('img/backgrounds/spieltisch-kupferplatte.jpg'); }
html[data-table-theme="messingblech"] body { background-image:var(--bg-vignette), url('img/backgrounds/spieltisch-messingblech.jpg'); }

/* Die folgenden drei Regeln gelten für JEDEN Tisch – seit alle Motive
   fotografierte Tischplatten sind, gibt es keinen Sonderfall mehr. Deshalb
   das blanke Attribut statt einer Liste aller Schlüssel: ein neuer Tisch
   braucht dann nur noch seine eine Bildzeile oben. game-auth.js setzt
   data-table-theme immer, auch für Gäste. */

/* NICHT display:none – #trick-area liegt INNERHALB von #felt-table, die
   ausgespielten Karten würden mit verschwinden. Nur die Zeichnung fällt weg
   (das Motiv IST die Tischplatte, sonst lägen zwei Tische übereinander),
   der Kasten bleibt als Positionsrahmen für die Kartenmitte bestehen. */
html[data-table-theme] #felt-table { background:none; box-shadow:none; }

/* Die halbtransparente Seitenspalte und die Sitz-Beschriftungen sind auf den
   dunklen Standardverlauf abgestimmt. Auf einem Foto brauchen sie Rückhalt,
   sonst leidet die Lesbarkeit – besonders auf dem hellen Messingblech. */
html[data-table-theme] #game-sidebar { background:rgba(14,11,7,.86); backdrop-filter:blur(6px); }

html[data-table-theme] .seat-chip,
html[data-table-theme] #my-seat-info,
html[data-table-theme] .rb-round,
html[data-table-theme] .rb-trick { text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); }

/* Der Textschatten allein trägt nur auf dunklen Platten. Auf „Messingblech"
   und „Kupferplatte" steht heller Text auf hellem Metall – dort legt sich ein
   weicher, dunkler Hauch hinter die Beschriftung. Er sitzt als ::after HINTER
   dem Inhalt (z-index -1) und deckt etwas mehr als den Textblock ab, damit
   keine sichtbare Kante entsteht. Der aktive Chip bringt mit ::before schon
   sein eigenes Messing-Panel mit – dort bleibt es aus. */
html[data-table-theme="messingblech"] .seat-meta,
html[data-table-theme="kupferplatte"] .seat-meta { position:relative; }
html[data-table-theme="messingblech"] .seat-meta::after,
html[data-table-theme="kupferplatte"] .seat-meta::after {
  content:''; position:absolute; inset:-4px -10px -3px; z-index:-1;
  border-radius:12px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
             rgba(12,9,5,.62) 40%, rgba(12,9,5,.34) 70%, transparent 88%);
}
html[data-table-theme="messingblech"] .seat-chip.is-current .seat-meta::after,
html[data-table-theme="kupferplatte"] .seat-chip.is-current .seat-meta::after { display:none; }

/* ── Spieler-Rahmen ──
   Seit dem 31.07.2026 sind es gezeichnete Ringe (public/img/rahmen/) statt
   CSS-Schatten.

   ZWEI Änderungen gegenüber vorher, beide bewusst:
   1. Der Rahmen sitzt jetzt am EIGENEN Avatar (#my-avatar-circle) statt an
      den Sitzen der Mitspieler (.seat-avatar). Es ist die persönliche
      Kosmetik des angemeldeten Nutzers – sie gehört an seinen eigenen Platz.
   2. Drei der vier Rahmen bringen eine deckende Platte mit. An den
      Mitspieler-Sitzen hätte die deren Akzentfarbe verdeckt – und genau
      daran erkennt man am Tisch, wer wer ist.

   Der Rahmen ersetzt Rand und Fläche des Avatars; das Initial liegt darauf.
   Die Schriftfarbe wird je Rahmen nachgezogen, weil „Grünspan" eine helle
   Platte hat und ein helles Initial dort verschwinden würde. */
html[data-player-frame="messingring"] #my-avatar-circle,
html[data-player-frame="stahlblende"] #my-avatar-circle,
html[data-player-frame="blaufeuer"]   #my-avatar-circle,
html[data-player-frame="gruenspan"]   #my-avatar-circle {
  border:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* „Messingring" hat eine OFFENE Mitte – dort scheint die Akzentfläche des
   Spielers weiterhin durch, deshalb bleibt sie hier erhalten. */
html[data-player-frame="messingring"] #my-avatar-circle {
  background-image:url('img/rahmen/messingring.webp');
  background-color:color-mix(in srgb, var(--ac) 18%, var(--bg-deep));
}
html[data-player-frame="stahlblende"] #my-avatar-circle {
  background-image:url('img/rahmen/stahlblende.webp'); color:#e8ecef;
}
html[data-player-frame="blaufeuer"] #my-avatar-circle {
  background-image:url('img/rahmen/blaufeuer.webp'); color:#bfe4ff;
}
html[data-player-frame="gruenspan"] #my-avatar-circle {
  background-image:url('img/rahmen/gruenspan.webp');
  color:#1f3b33;                     /* helle Platte → dunkles Initial */
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

/* Premium-Emotes im Picker dezent hervorheben */
.emote-opt.emote-premium { box-shadow:inset 0 0 0 1px rgba(200,150,60,.5); border-radius:8px; }