/* Pokernest – Oberfläche
   Aufbau: Grundlagen · Startseite · Tisch · Karten · Plätze · Video · Leisten und Seitenleiste ·
   Dialoge · Farben · Animationen · Turnier · Handy und kleine Bildschirme */

/* ---------- Grundlagen ---------- */
/* Schmale Schrift für alles auf dem Tisch (Namen, Stacks, Karten, Einsätze); lokal ausgeliefert */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
:root {
  --num: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --bg: #0b1210;
  --bg2: #111b18;
  --panel: #15211d;
  --panel2: #1b2a25;
  --line: #2a3b35;
  --text: #e8eee9;
  --muted: #93a49c;
  --accent: #e7c46b;
  --accent-ink: #231a05;
  --felt1: #20684b;
  --felt2: #134433;
  --rail: #2b2018;
  --danger: #e2675a;
  --ok: #58c48a;
  --blue: #5aa2e6;
  --card: #fbfaf6;
  --s-spade: #1b1b1b;
  --s-heart: #d2352b;
  --s-diamond: #2a6fd6;
  --s-club: #23874f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
body {
  min-height: 100%;
  background: var(--bg) radial-gradient(1200px 700px at 50% -10%, #17302a 0%, var(--bg) 60%) no-repeat fixed;
  color: var(--text);
  font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: var(--text); }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.muted { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; min-height: 1em; margin: -6px 0 10px; }
.seeall { color: var(--accent); font-weight: 700; }

.btn {
  border: 1px solid var(--line); background: var(--panel2); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; transition: transform .05s, background .15s, border-color .15s;
}
.btn:hover { border-color: #3d5a50; background: #20332c; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: #f0d385; }
.btn.danger { background: #3a1d1a; border-color: #6a2f29; color: #ffc9c2; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.icon-btn { background: transparent; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 34px; font-size: 18px; }
.icon-btn:hover { border-color: var(--line); }

label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
label input, label select {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--line); outline: none;
}
label input:focus, label select:focus { border-color: var(--accent); }
.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px #0005; }
.panel h2 { margin: 0 0 16px; font-size: 18px; }

/* ---------- Startseite ---------- */
#home { max-width: 980px; margin: 0 auto; padding: 20px 16px 32px; }
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 18px; }
.brand-logo { height: clamp(120px, 24vh, 230px); width: auto; max-width: 78vw; filter: drop-shadow(0 12px 30px #000c); }
.brand p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.home-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; }
.code-input { text-transform: uppercase; letter-spacing: 6px; font-size: 22px !important; font-weight: 700; text-align: center; }

/* Spielart wählen */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.mode-switch button { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.mode-switch button b { font-size: 15px; }
.mode-switch button small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.mode-switch button.active { border-color: var(--accent); background: #2a2614; box-shadow: inset 0 0 0 1px var(--accent); }
.mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Einstellungen und Blindstruktur */
details.settings { border-top: 1px solid var(--line); margin: 6px 0 16px; padding-top: 12px; }
details.settings summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.rebuy-fields.off { opacity: .4; pointer-events: none; }
.blind-editor { margin: 6px 0 14px; }
.blind-editor .bl-head, .blind-editor .bl-row { display: grid; grid-template-columns: 30px 1fr 1fr 1fr 78px 30px; gap: 6px; align-items: center; }
.blind-editor .bl-head { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.blind-editor .bl-row { margin-bottom: 5px; }
.blind-editor .bl-row span { color: var(--muted); font-size: 12px; text-align: right; }
.blind-editor input { width: 100%; padding: 6px 8px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); }
.blind-editor .check input { width: 18px; padding: 0; flex: none; }
.blind-editor .bl-last { font-size: 12px; color: var(--muted); text-align: center; }
.blind-editor .bl-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.blind-editor.no-ante .ante-col { visibility: hidden; }
.bl-list { max-height: 230px; overflow: auto; padding-right: 4px; }
.bl-all { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.bl-all label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 13px; }
.bl-all input { width: 70px; margin: 0; padding: 6px 8px; display: inline-block; }
.bl-from { margin: 10px 0 2px; align-items: flex-start; }
.bl-from small { display: block; }
.bl-explain { margin: 4px 0 0; }

/* ---------- Tisch ---------- */
#tableView { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: #0d1613cc; backdrop-filter: blur(8px);
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
.tb-title { font-weight: 700; }
.code-chip { border: 1px dashed #4a6359; background: transparent; border-radius: 6px; padding: 1px 7px; font-size: 12px; color: var(--muted); }
.code-chip span:first-child { color: var(--accent); font-weight: 700; letter-spacing: 2px; }
.tb-blinds { text-align: center; font-size: 13px; color: var(--muted); }
.tb-blinds b { color: var(--text); font-size: 15px; }

.table-layout { display: grid; grid-template-columns: 1fr; min-height: 0; position: relative; }
.table-area { position: relative; display: grid; place-items: center; padding: 0; min-height: 0; overflow: hidden; container-type: size;
  /* Raum: Lampe über dem Tisch, Lichtkegel auf dem Boden, Ecken im Dunkeln */
  background:
    radial-gradient(ellipse 45% 32% at 50% -6%, #fff1d21c 0%, transparent 70%),
    radial-gradient(ellipse 62% 66% at 50% 50%, #2b3c35 0%, #1b2823 40%, #0f1815 64%, #050807 100%);
}
/* Der Tisch nutzt den ganzen freien Platz; Größen von Kacheln und Karten setzt app.js als Variablen */
.table-wrap { position: relative; width: min(100cqw - 16px, (100cqh - 12px) * 1.75); aspect-ratio: 1.75; --pw: 160px; --ph: 100px; --sc: 48px; --hc: 64px; --cw: 60px; }

.table-wrap { z-index: 1; }

/* Filz mit Holzrand; Lage und Größe kommen aus app.js */
.felt { position: absolute; inset: 12%; }
/* sichtbarer Filz: liegt schräg nach hinten (Neigung aus app.js), Karten und Kacheln bleiben frontal */
.felt-bg { position: absolute; inset: 12%; border-radius: 999px; transform-origin: 50% 50%; }
/* Holzrand mit sichtbarer Kante nach unten, darüber der Filz */
.felt-bg::before {
  content: ''; position: absolute; inset: calc(var(--ph) * -.11); border-radius: inherit;
  background: linear-gradient(180deg, #5c4029, #36251a 35%, #23170f 70%, #1a110b);
  box-shadow: 0 0 0 1px #7a5c3a, inset 0 2px 0 #ffffff1c, inset 0 -2px 0 #00000060,
    0 calc(var(--ph) * .12) 0 #23170f, 0 calc(var(--ph) * .26) 0 #120b07, 0 calc(var(--ph) * .26 + 1px) 0 #00000080,
    0 calc(var(--ph) * .5) 60px #000c;
}
.felt-surface {
  position: absolute; inset: 0; border-radius: inherit;
  /* Licht der Lampe: heller Fleck in der Mitte, Ränder fallen ab, vorn am dunkelsten */
  background:
    radial-gradient(ellipse 48% 46% at 50% 40%, #ffffff26 0%, #ffffff0c 45%, transparent 75%),
    radial-gradient(ellipse 80% 75% at 50% 42%, transparent 55%, #00000040 100%),
    radial-gradient(ellipse at 50% 42%, var(--felt1) 0%, var(--felt2) 85%);
  box-shadow: inset 0 0 0 1px #00000050, inset 0 14px 30px #0005, inset 0 -30px 60px #0008;
}
.felt-surface::after { content: ''; position: absolute; inset: 14% 10%; border-radius: inherit; border: 1px solid #ffffff10; pointer-events: none; }
/* Gravur im Filz: Pokernest-Wappen und Name des Spiels, kaum sichtbar eingeprägt */
.felt-logo {
  position: absolute; left: 14%; right: 14%; top: 74%; transform: translateY(-50%); text-align: center; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: .5em;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; letter-spacing: .04em;
  font-size: clamp(16px, 2.6cqw, 34px); color: #ffffff14; text-shadow: 0 1px 0 #00000040;
  white-space: nowrap; overflow: hidden;
}
.felt-logo span { overflow: hidden; text-overflow: ellipsis; }
.felt-emblem { height: 2.4em; width: auto; flex: none; opacity: .2; filter: grayscale(.5) brightness(1.4) drop-shadow(0 1px 0 #0006); }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 60%; z-index: 2; }
.pots { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 24px; }
.side-pots { display: flex; gap: 12px; font: 500 14px/1.2 var(--num); color: #c9d6cf; background: #0007; border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.side-pots b { color: #fff; font-weight: 600; }
@media (min-width: 761px) { .side-pots { font-size: 17px; } }
.pot { display: inline-flex; align-items: flex-end; gap: 8px; background: #0008; border: 1px solid #ffffff12; border-radius: 999px; padding: 4px 14px 4px 6px; font: 600 16px/1 var(--num); letter-spacing: .02em; }
.pot small { color: var(--muted); font-weight: 500; margin-right: 4px; font-size: 13px; }
.pot .cstacks { margin-right: 2px; }
.boards { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.board { display: flex; gap: calc(var(--cw) * .12); min-height: calc(var(--cw) * 1.4); }
.board .slot { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .11); border: 1px dashed #ffffff1f; background: #00000014; }
.boards.two .board { --cw: calc(var(--cw-one, 60px) * .66); }
.boards.two { --cw-one: var(--cw); }
.board-label { font: 600 12px var(--num); color: #ffffffa0; width: 18px; align-self: center; }
.result:empty { display: none; }
.result { min-height: 20px; text-align: center; font: 600 16px/1.2 var(--num); letter-spacing: .02em; color: var(--accent); text-shadow: 0 1px 2px #000; }

/* ---------- Karten ---------- */
.card {
  width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .11); position: relative; flex: none;
  background: linear-gradient(170deg, #ffffff, #f1ede3); color: var(--s-spade);
  box-shadow: inset 0 0 0 1px #00000014, 0 1px 0 #cfc8b6, 0 4px 12px #000a; user-select: none;
  font-family: var(--num); font-weight: 700; overflow: hidden;
}
.card .r { position: absolute; left: 9%; top: 3%; font-size: calc(var(--cw) * .5); line-height: 1; letter-spacing: -.03em; }
.card .s { position: absolute; left: 11%; top: 38%; font-size: calc(var(--cw) * .32); line-height: 1; }
.card .big { position: absolute; right: 7%; bottom: 4%; font-size: calc(var(--cw) * .62); line-height: 1; }
.card.s-s { color: var(--s-spade); } .card.s-h { color: var(--s-heart); } .card.s-d { color: var(--s-diamond); } .card.s-c { color: var(--s-club); }
.card.win { box-shadow: 0 0 0 3px var(--accent), 0 0 16px #e7c46b90, 0 4px 12px #000a; transform: translateY(-5px); }
.card.dim { filter: brightness(.5) saturate(.6); }
.card.back {
  background: repeating-linear-gradient(45deg, #8e2b2b 0 5px, #a73a35 5px 10px);
  border: calc(var(--cw) * .07) solid #f4efe4; box-shadow: 0 4px 12px #000a;
}

/* Karten der Spieler: zwischen Kachel und Tischmitte */
.hole { position: absolute; transform: translate(-50%, -50%); display: flex; gap: calc(var(--cw) * .05); z-index: 4; --cw: var(--sc); pointer-events: none; }
.hole.mine { --cw: var(--hc); z-index: 5; }
.hole .card:first-child { transform: rotate(-5deg) translateY(2px); }
.hole .card:last-child { transform: rotate(5deg) translateY(2px); }
.hole .card.win:first-child { transform: rotate(-5deg) translateY(-4px); }
.hole .card.win:last-child { transform: rotate(5deg) translateY(-4px); }
.hole .card.anim-deal, .hole .card.anim-flip { transform: none; }
.hole.folded { opacity: .3; }
.hole.mine.folded { opacity: .5; filter: grayscale(.85); }
.hole .equity { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); display: flex; gap: 4px; }
.hole.eq-up .equity { top: auto; bottom: 100%; transform: translate(-50%, -6px); }
.hole .equity span { background: #0b1210f0; border: 1px solid var(--accent); color: var(--accent); font: 700 14px/1 var(--num); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* ---------- Spieler-Kacheln ---------- */
/* Jede Kachel ist gleich groß, ob mit Kamera oder ohne: ohne Kamera erscheint die Initiale */
.seat { position: absolute; width: var(--pw); height: var(--ph); transform: translate(-50%, -50%); z-index: 3; }
.seat .box {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--ph) * .14);
  background: linear-gradient(150deg, hsl(var(--hue) 26% 25%), hsl(var(--hue) 30% 11%));
  border: 2px solid #33463f; box-shadow: 0 10px 24px #000b; transition: border-color .2s, box-shadow .2s;
}
/* Kamerabild oben frei, Name und Stack in der Leiste darunter */
.seat .avatar { position: absolute; inset: 0 0 var(--plate, 32px) 0; display: grid; place-items: center; overflow: hidden; cursor: default; background: #00000030; }
.seat .avatar.has-video { cursor: pointer; }
.seat .avatar .ini { font: 600 calc((var(--ph) - var(--plate, 32px)) * .62)/1 var(--num); color: hsl(var(--hue) 40% 74% / .5); }
.seat .avatar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seat .avatar:not(.has-video) video { display: none; }
.avatar video.mirror { transform: scaleX(-1); }
.seat .avatar.speaking { box-shadow: inset 0 0 0 3px #58c48a; }
/* Leiste unter dem Bild: oben Name und Stack, darunter über die ganze Breite Aktion und Hand */
.seat .plate {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--plate, 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 6px; row-gap: 1px;
  padding: 0 calc(var(--pw) * .05); background: #070c0b; border-top: 1px solid #ffffff12;
}
.seat .plate .name { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.seat .plate .stack { grid-column: 2; grid-row: 1; align-self: end; }
.seat .plate .meta { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.seat .name { font: 600 clamp(12px, calc(var(--plate, 32px) * .42), 18px)/1.05 var(--num); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .meta { display: flex; gap: 6px; align-items: center; font: 500 clamp(10px, calc(var(--plate, 32px) * .32), 13px)/1.2 var(--num); color: #b5c4bd; white-space: nowrap; overflow: hidden; }
.seat .meta span { display: inline-flex; align-items: center; gap: 2px; }
.seat .meta svg { color: var(--accent); }
.seat .meta .rb { color: #9cc3ea; }
.small-tiles .seat .meta span:not(.hand-name):not(.status) { display: none; }
.small-tiles .seat .plate { padding: 0 4px; }
.small-tiles .seat .mic-off { transform: scale(.8); transform-origin: top right; }
.seat .meta .hand-name { display: block; min-width: 0; color: #e9f5ee; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.seat.me .meta .hand-name { color: var(--accent); }
.seat .stack { flex: none; font: 700 clamp(13px, calc(var(--plate, 32px) * .5), 22px)/1 var(--num); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.seat .owner { color: var(--accent); font-size: .75em; margin-left: 3px; }
.seat .meta .status {
  flex: none; padding: 0 5px; border-radius: 4px; background: #2a3a34; color: #e6efe9;
  font: 600 clamp(9px, calc(var(--plate, 32px) * .28), 11px)/1.4 var(--num); text-transform: uppercase; letter-spacing: .06em;
}
.seat .meta .status.allin { background: #6d1f1a; color: #ffd8cf; }
.seat .mic-off { position: absolute; right: 6px; top: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #2a1715e6; color: #ff9e93; border: 1px solid #6a2f29; }
.seat .mic-off.by-me { background: #3a1d1a; color: #fff; }
.seat .timer { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #00000060; z-index: 2; }
.seat .timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.seat .timer i.low { background: var(--danger); }
.timer-num { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--danger); color: #fff; font: 700 15px/1 var(--num); display: grid; place-items: center; box-shadow: 0 2px 6px #0009; z-index: 3; }
.seat.acting .box { border-color: var(--accent); box-shadow: 0 0 0 3px #e7c46b40, 0 10px 24px #000b; }
.seat.me .box { border-color: #4f6a60; }
.seat.me.acting .box { border-color: var(--accent); }
.seat.winner .box { border-color: var(--ok); box-shadow: 0 0 26px #58c48a90, 0 10px 24px #000b; }
/* gefoldet/ohne Chips: Kamera bleibt gut sichtbar, nur leicht gedämpft */
.seat.folded .avatar, .seat.out .avatar { filter: saturate(.55) brightness(.82); }
.seat.folded .plate, .seat.out .plate { opacity: .65; }
.seat.offline .name::after { content: " ⦸"; color: var(--danger); }
.seat .won { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -40%); background: var(--ok); color: #062012; font: 700 15px/1 var(--num); padding: 4px 10px; border-radius: 999px; white-space: nowrap; z-index: 6; box-shadow: 0 4px 12px #0009; }
.seat.empty { width: calc(var(--ph) * .62); height: calc(var(--ph) * .62); border-radius: 50%; border: 2px dashed #ffffff26; background: #08100ecc; display: grid; place-items: center; color: #ffffff40; font: 600 14px var(--num); }
.seat.empty button { background: none; border: none; color: var(--accent); font: 600 13px/1.1 var(--num); letter-spacing: .03em; text-transform: uppercase; padding: 4px; }

/* Dealer-, SB- und BB-Button */
.dealer, .blindbtn { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; z-index: 4; font-family: var(--num); font-weight: 700; }
.dealer {
  width: max(26px, calc(var(--sc) * .62)); height: max(26px, calc(var(--sc) * .62)); font-size: max(14px, calc(var(--sc) * .32)); color: #2a2418;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e9e2cf 60%, #cfc5aa); border: 2px solid #b79a5c; box-shadow: 0 3px 0 #8f7848, 0 5px 10px #000a;
}
.blindbtn { width: max(22px, calc(var(--sc) * .52)); height: max(22px, calc(var(--sc) * .52)); font-size: max(10px, calc(var(--sc) * .22)); border: 2px solid #ffffffb0; box-shadow: 0 2px 0 #0006, 0 4px 8px #0009; }
.blindbtn.sb { background: radial-gradient(circle at 35% 30%, #7dbaf4, #2b6cb0); color: #fff; }
.blindbtn.bb { background: radial-gradient(circle at 35% 30%, #ffe08a, #c99613); color: #3a2a00; }

/* Einsätze und Chip-Stapel in Schrägansicht */
.bet { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; gap: 6px; font: 600 15px/1 var(--num); letter-spacing: .02em; background: #000b; border: 1px solid #ffffff10; padding: 3px 10px 3px 4px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cstacks { display: inline-flex; align-items: flex-end; gap: 2px; }
.cstack { position: relative; width: 26px; height: calc(var(--n) * 3.5px + 13px); display: inline-block; }
.cstack i {
  position: absolute; left: 0; bottom: calc(var(--k) * 3.5px); width: 26px; height: 13px; border-radius: 50%;
  background: repeating-conic-gradient(from 10deg, #ffffffd9 0 14deg, var(--c) 14deg 45deg);
  box-shadow: 0 3px 0 var(--e), 0 4px 3px #0007;
}
.cstack i::after { content: ''; position: absolute; inset: 3px 5px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #ffffff55; }

/* ---------- Video ---------- */
.av-btn { display: inline-grid; place-items: center; color: var(--muted); border-color: var(--line); position: relative; }
.av-btn::after { content: ''; position: absolute; width: 22px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.av-btn.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.av-btn.on::after { display: none; }
.video-extras { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 4; }
.video-extras .avatar { position: relative; width: 112px; height: 70px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: #101916; cursor: pointer; }
.video-extras .avatar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-extras .vx-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; font: 600 12px var(--num); padding: 1px 5px; background: #000a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hinweise, Seitenleiste, Aktionsleiste ---------- */
/* Hinweise (Rebuy, Start, Zuschauen …) stehen in der Aktionsleiste, wo sonst die Buttons sind */
.banner { grid-area: buttons; justify-self: end; align-self: center; background: #1a2621; border: 1px solid #6b5a2c; border-radius: 12px; padding: 9px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 760px; }
.banner > span { color: var(--text); }
.requests { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 7; max-width: calc(100% - 24px); }
.req { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 12px; box-shadow: 0 8px 24px #000a; animation: resultIn .3s ease-out both; flex-wrap: wrap; }

/* Verlauf, Chat, Bilanz: Schublade über dem Tisch, der Tisch bekommt die volle Breite */
.side { border-left: 1px solid var(--line); background: #0e1714f2; display: flex; flex-direction: column; min-height: 0;
  position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 90vw); z-index: 20; transform: translateX(105%); transition: transform .2s; box-shadow: -10px 0 30px #000a; visibility: hidden; }
.side.open { transform: none; visibility: visible; }
#btnSide { position: relative; }
#btnSide .badge { position: absolute; top: -6px; right: -6px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: none; border: none; padding: 10px 4px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; }
.tab-body { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.log, .chat { list-style: none; margin: 0; padding: 10px 12px; font-size: 13px; flex: 1; }
.log li { padding: 2px 0; color: #c8d3ce; }
.log li.hand { margin-top: 10px; color: var(--muted); font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }
.log li.win { color: var(--ok); font-weight: 600; }
.log li.board { color: #fff; }
.log li.level { color: var(--accent); font-weight: 700; }
.log li.rebuy, .log li.move { color: var(--blue); }
.log li.bust { color: var(--danger); }
.chat li { margin-bottom: 6px; } .chat b { color: var(--accent); }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; padding: 8px 10px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); }
.ledger { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.ledger th:first-child, .ledger td:first-child { text-align: left; }
.ledger th { color: var(--muted); font-weight: 600; }
.pos { color: var(--ok); } .neg { color: var(--danger); }

/* Aktionsleiste: immer gleich hoch, damit der Tisch nicht springt */
.actions {
  border-top: 1px solid var(--line); background: #0d1613; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr minmax(0, 470px); grid-template-rows: 1fr auto; grid-template-areas: "info raise" "pre buttons";
  gap: 8px 24px; align-items: end; height: 136px; overflow: hidden;
}
@media (min-width: 1101px) {
  /* eine flache Leiste: Hinweis | Schnellsetzer + Betrag | Fold Call Raise. Verlauf und Chat stehen hinter ☰ */
  .actions {
    height: auto; min-height: 84px; grid-template-rows: minmax(62px, auto); align-items: center; gap: 0 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(150px, auto) auto minmax(0, 1fr); grid-template-areas: "side raise buttons";
  }
  .actions .action-info { grid-area: side; align-self: start; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actions .pre-actions { grid-area: side; align-self: end; flex-wrap: nowrap; }
  .actions:has(.raise-box:not(.hidden)) .action-info { display: none; }
  .actions .raise-box { grid-area: raise; display: flex; align-items: center; }
  .actions .raise-box.hidden { display: flex !important; }
  .actions .raise-box input[type=range] { display: none; }
  .actions .raise-row { gap: 8px; }
  .actions .presets { flex: none; gap: 8px; }
  .actions .presets button { flex: none; width: 86px; height: 58px; padding: 4px 2px; }
  .actions .presets button b { font-size: 21px; }
  .actions .presets button span { font-size: 16px; }
  .actions .raise-input { width: 130px; height: 58px; font-size: 26px; }
  .actions .action-buttons { grid-area: buttons; gap: 10px; justify-content: flex-end; }
  .actions .action-buttons .btn { flex: 1 1 0; max-width: 320px; min-width: 190px; height: 58px; padding: 0 18px; font-size: 27px; }
  .actions .action-buttons .btn small { font-size: 15px; }
  .actions .banner { grid-column: side / buttons; grid-row: 1; justify-self: end; flex-wrap: nowrap; padding: 6px 8px 6px 14px; }
  .actions .banner > span { line-height: 1.25; }
  .actions .banner .btn { flex: none; white-space: nowrap; }
  @media (max-width: 1499px) {
    .actions .presets button { width: 72px; }
    .actions .presets button b { font-size: 18px; }
    .actions .presets button span { font-size: 14px; }
    .actions .raise-input { width: 110px; font-size: 22px; }
    .actions .action-buttons .btn { min-width: 150px; font-size: 23px; }
  }
}
.action-info { grid-area: info; align-self: start; color: var(--muted); font-size: 17px; }
.action-info b { color: var(--text); }
.action-buttons { grid-area: buttons; display: flex; gap: 8px; }
.action-buttons .btn { flex: 1; min-width: 0; padding: 13px 10px; font-size: 18px; }
.btn.fold { background: #2a1917; border-color: #5a2d27; }
.btn.call { background: #18324a; border-color: #2e5a80; }
.btn.raise { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.raise-box { grid-area: raise; min-width: 0; }
.raise-box.hidden { display: block !important; visibility: hidden; }
.presets { display: flex; gap: 6px; flex: 1; min-width: 0; }
.presets button { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 4px 4px; min-width: 0; font-size: 13px; font-weight: 600; background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; }
.presets button b { font-size: 13px; }
.presets button span { font-size: 11px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.presets button:hover { border-color: #4d6b60; }
.presets button.active { border-color: var(--accent); background: #2b2a17; }
.presets button.active span { color: var(--accent); }
.presets.one-click button { border-color: #6b5a2c; }
.raise-row { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.raise-box input[type=range] { display: block; width: 100%; height: 14px; margin: 4px 0 0; accent-color: var(--accent); }
.raise-input { width: 92px; flex: none; padding: 6px 10px; font-size: 16px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); text-align: right; font-weight: 700; }
.pre-actions { grid-area: pre; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.pre-actions label { white-space: nowrap; display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); font-size: 13px; }
.pre-actions input { accent-color: var(--accent); }

/* ---------- Dialoge ---------- */
.dlg { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); padding: 0; width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 40px); }
.dlg.small { width: min(400px, calc(100% - 24px)); }
.dlg::backdrop { background: #000a; backdrop-filter: blur(2px); }
.dlg-inner { padding: 20px; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dlg h2 { margin: 0 0 10px; font-size: 18px; }
.dlg h3 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.owner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plist { list-style: none; padding: 0; margin: 0; }
.plist li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.rit-timer { height: 4px; background: #ffffff15; border-radius: 4px; overflow: hidden; margin: 14px 0; }
.rit-timer div { height: 100%; background: var(--accent); }
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: #2a1917; border: 1px solid #6a2f29; color: #ffd9d3; padding: 10px 16px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 20px #000a; max-width: calc(100% - 32px); }
.toast.info { background: var(--panel2); border-color: var(--line); color: var(--text); }

/* Meine Einstellungen */
.prefs .check { align-items: flex-start; margin-bottom: 10px; }
.prefs .check span small { display: block; color: var(--muted); font-size: 12px; }
.prefs .vol { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 14px; }
.prefs .vol input { flex: 1; accent-color: var(--accent); margin: 0; padding: 0; border: 0; background: none; }
.pref-label { font-size: 13px; color: var(--muted); margin: 6px 0; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.swatch { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 13px; }
.swatch span { width: 18px; height: 18px; border-radius: 50%; display: block; }
.swatch.active { border-color: var(--accent); }
.sw-felt-green span { background: #20684b; } .sw-felt-blue span { background: #1f5a86; } .sw-felt-red span { background: #7a2433; } .sw-felt-graphite span { background: #3b4245; }
.sw-back-bird span { border-radius: 4px; width: 14px; height: 20px; background: var(--bird, url(/backs/bird-1.webp)) center / 100% 100%; }
.sw-back-red span { background: #a73a35; } .sw-back-blue span { background: #2e63ab; } .sw-back-black span { background: #2c2c30; }

/* ---------- Tischfarben und Kartenrückseiten ---------- */
body[data-felt="blue"] { --felt1: #1f5a86; --felt2: #12344f; }
body[data-felt="red"] { --felt1: #7a2433; --felt2: #45121c; }
body[data-felt="graphite"] { --felt1: #3b4245; --felt2: #1d2224; }
/* Vogel des Spiels: eigene Rückseite als Bild (public/backs, erzeugt mit tools/birds.py) */
body[data-back="bird"] .card.back { background: var(--bird, url(/backs/bird-1.webp)) center / cover no-repeat; border: calc(var(--cw) * .05) solid #f4efe4; }
body[data-back="blue"] .card.back { background: repeating-linear-gradient(45deg, #23508f 0 5px, #2e63ab 5px 10px); }
body[data-back="black"] .card.back { background: repeating-linear-gradient(45deg, #1d1d1f 0 5px, #2c2c30 5px 10px); }

/* ---------- Animationen ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fly { position: absolute; display: flex; gap: 3px; will-change: transform, opacity; }
.fly .card { --cw: var(--sc); }
.fly-win .cstacks { filter: drop-shadow(0 0 6px #e7c46b90); }
.anim-deal { animation: dealFly .42s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes dealFly {
  from { transform: translate(var(--fx), var(--fy)) rotate(-30deg) scale(.55); opacity: 0; }
  20% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
.anim-flip { animation: flipIn .45s cubic-bezier(.2, .8, .25, 1) both; transform-origin: 50% 50%; }
@keyframes flipIn {
  from { transform: perspective(500px) rotateY(95deg) translateY(-8px); filter: brightness(.6); }
  60% { filter: brightness(1.15); }
  to { transform: none; filter: none; }
}
.anim-bet { animation: betIn .34s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes betIn {
  from { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.6); opacity: .3; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}
.seat .status.pop { animation: statusPop .4s ease-out both; }
@keyframes statusPop { from { transform: scale(1.35); color: var(--accent); } to { transform: none; } }
.seat .status { transform-origin: left top; }
.seat .won { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: translate(-50%, -40%) scale(.4); opacity: 0; } to { transform: translate(-50%, -40%) scale(1); opacity: 1; } }
.result.pop { animation: resultIn .5s ease-out both; }
@keyframes resultIn { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.seat.acting .box { animation: actPulse 1.6s ease-in-out infinite; }
@keyframes actPulse { 0%, 100% { box-shadow: 0 0 0 3px #e7c46b40, 0 6px 16px #0008; } 50% { box-shadow: 0 0 0 6px #e7c46b25, 0 6px 16px #0008; } }
.seat.hurry .box { border-color: var(--danger); animation: hurryPulse .5s ease-in-out infinite alternate; }
@keyframes hurryPulse { from { box-shadow: 0 0 0 3px #e2675a50, 0 6px 16px #0008; } to { box-shadow: 0 0 0 7px #e2675a20, 0 6px 16px #0008; } }
.seat .timer i.low { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }
.seat.winner .box { animation: winGlow 1.2s ease-in-out 2; }
@keyframes winGlow { 50% { box-shadow: 0 0 32px #58c48acc; } }

/* ---------- Turnier: Lobby ---------- */
#tourView { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.tour-page { overflow: auto; padding: 28px 16px 48px; }
.tp-lobby, .tp-results { max-width: 1040px; margin: 0 auto; }
.tp-hero { margin: 4px 0 24px; }
.tp-hero h1, .tp-winner h1 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(30px, 5vw, 46px); margin: 0 0 6px; letter-spacing: .01em; }
.tp-hero p { color: var(--muted); margin: 0; max-width: 62ch; }
.code-big { color: var(--accent); letter-spacing: 3px; font-size: 18px; }
.tp-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.tp-grid .hint { margin-top: 12px; }
.panel h2 .count { color: var(--accent); margin-left: 6px; font-variant-numeric: tabular-nums; }
.reg-list { list-style: none; margin: 0 0 14px; padding: 0; columns: 2; column-gap: 18px; }
.reg-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-weight: 600; }
.reg-list li .btn { margin-left: auto; }
.reg-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #4b5a54; flex: none; }
.reg-list .dot.on { background: var(--ok); }
.reg-list .lead, .reg-list .you { font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent); border-radius: 5px; padding: 0 5px; }
.reg-list .you { background: #2f4740; color: var(--text); }
.plan { margin: 0 0 16px; color: var(--text); }

/* Reiter „Turnier“ am Tisch */
.tour-side { padding: 10px 12px 20px; font-size: 13px; }
.tour-side h4 { margin: 16px 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-stats div { background: var(--panel2); border-radius: 10px; padding: 7px 9px; }
.ts-stats small { display: block; color: var(--muted); font-size: 11px; }
.ts-stats b { font-variant-numeric: tabular-nums; }
.ts-table { border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; margin-bottom: 8px; }
.ts-table.here { border-color: #5c7a6e; }
.ts-head { display: flex; align-items: center; gap: 8px; }
.ts-head span { color: var(--muted); font-size: 12px; }
.ts-head .btn, .ts-head .here-tag { margin-left: auto; }
.ts-head .here-tag { color: var(--accent); }
.ts-table ol { list-style: none; margin: 5px 0 0; padding: 0; }
.ts-table li { display: flex; justify-content: space-between; padding: 1px 0; font-variant-numeric: tabular-nums; }
.ranking tr.out td { color: var(--muted); }
.ranking tr.me td, .results tr.me td { color: var(--accent); }
.results th:nth-child(2), .results td:nth-child(2), .ranking th:nth-child(2), .ranking td:nth-child(2) { text-align: left; }

/* ---------- Turnier: Ergebnis ---------- */
.tp-winner { text-align: center; margin: 8px 0 26px; }
.tp-winner .trophy { color: var(--accent); display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a3218, #1b1a10); border: 1px solid #5e5326; margin-bottom: 10px; }
.tp-winner h1 { color: #f6e7b8; }
.tp-winner p { color: var(--muted); margin: 0; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 0 auto 28px; max-width: 640px; }
.pod { flex: 1; text-align: center; display: grid; gap: 2px; justify-items: center; }
.pod .pl { font-family: Georgia, serif; font-style: italic; font-size: 22px; color: var(--accent); }
.pod b { font-size: 17px; }
.pod small { color: var(--muted); font-size: 12px; }
.pod .step { width: 100%; margin-top: 8px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--felt1), var(--felt2)); border: 1px solid #2f5a49; border-bottom: 0; }
.pod.p1 .step { height: 110px; } .pod.p2 .step { height: 76px; } .pod.p3 .step { height: 52px; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.award { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.award small { color: var(--muted); font-size: 12px; }
.award b { font-size: 17px; }
.award span { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 13px; }
.tp-results .panel { margin-bottom: 20px; }
.table-scroll { overflow-x: auto; }
.results td, .results th { white-space: nowrap; }
.center-row { justify-content: center; }
@keyframes trophy-in { from { transform: scale(.4); opacity: 0; } }
@keyframes step-up { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .tp-winner .trophy { animation: trophy-in .7s cubic-bezier(.2, 1.4, .4, 1) both; }
  .pod .step { animation: step-up .6s ease-out both; transform-origin: bottom; }
  .pod.p2 .step { animation-delay: .1s; } .pod.p3 .step { animation-delay: .2s; }
}

/* Chipverlauf */
.chart { position: relative; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.chart .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart .legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart .legend i.other { background: #4b5a54; }
.chart svg { display: block; overflow: visible; touch-action: pan-y; }
.chart .gl { stroke: #22322c; stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.other { stroke: #4b5a54; stroke-width: 1.5; }
.chart .end { stroke: var(--panel); stroke-width: 2; }
.chart .lbl { fill: var(--text); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.chart .cross { stroke: #6f827a; stroke-dasharray: 3 3; }
.chart .tip { position: absolute; top: 34px; width: 160px; background: #0d1613f2; border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font-size: 12px; pointer-events: none; box-shadow: 0 8px 20px #0008; }
.chart .tip div { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-deal, .anim-flip, .anim-bet, .seat .status.pop, .seat .won, .result.pop, .seat.acting .box, .seat.hurry .box, .seat.winner .box { animation: none !important; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1100px) {
}

/* Handy */
@media (max-width: 760px) {
  .home-grid, .tp-grid, .grid2 { grid-template-columns: 1fr; }
  #home { padding-top: 24px; }
  .topbar { flex-wrap: wrap; padding: 6px 10px; }
  .tb-blinds { order: 3; width: 100%; text-align: left; }
  .tb-right .btn.ghost { display: none; }

  .table-wrap { width: min(100cqw - 8px, (100cqh - 8px) * .62); aspect-ratio: .62; }
  .cstack, .cstack i { width: 20px; }
  .cstack { height: calc(var(--n) * 3px + 10px); }
  .cstack i { height: 10px; bottom: calc(var(--k) * 3px); }
  .bet, .pot { font-size: 13px; }
  .video-extras .avatar { width: 64px; height: 40px; }

  .actions { grid-template-columns: 1fr; grid-template-rows: 18px auto auto 1fr; grid-template-areas: "info" "raise" "buttons" "pre"; gap: 6px; height: 206px; }
  .action-buttons { justify-content: stretch; }
  .action-buttons .btn { flex: 1; min-width: 0; padding: 12px 6px; }
  .raise-input { width: 66px; padding: 6px 8px; }
  .presets { gap: 4px; }
  .presets button b { font-size: 13px; white-space: nowrap; }

  .reg-list { columns: 1; }
  .awards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .award b { font-size: 15px; }
}

/* ---------- Zahlen in der Tisch-Schrift ---------- */
.tb-blinds b { font: 600 18px/1 var(--num); letter-spacing: .02em; }
.action-buttons .btn { font: 600 18px/1.1 var(--num); letter-spacing: .03em; }
.action-buttons .btn small { font-size: 12px; opacity: .65; letter-spacing: 0; }
.presets button b, .presets button span { font-family: var(--num); }
.presets button b { font-size: 15px; }
.presets button span { font-size: 12px; }
.raise-input { font: 700 18px var(--num); }
.action-info b { font: 600 19px var(--num); color: var(--text); }
.presets button b { white-space: nowrap; }
@media (max-width: 760px) { .presets button b { font-size: 13px; } .presets button span { font-size: 11px; } .raise-input { font-size: 16px; } }
.result:not(:empty) { background: #000a; border: 1px solid #e7c46b40; border-radius: 999px; padding: 6px 16px; max-width: 100%; }
.code-chip { white-space: nowrap; }
@media (max-width: 1100px) { .copy-label { display: none; } .tb-blinds { font-size: 12px; } }

/* Spielende */
.final-dlg { width: min(1080px, calc(100% - 24px)); }
.final-dlg .tp-winner { margin-top: 0; }
.final-dlg .tp-results { max-width: none; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

/* ---------- Marke in der Kopfzeile ---------- */
.tb-emblem { height: 38px; width: auto; flex: none; filter: drop-shadow(0 2px 4px #0009); }
@media (max-width: 760px) { .tb-emblem { display: none; } }

/* ---------- Blinderhöhung ---------- */
.level-flash {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 34px; border-radius: 18px;
  background: #1b1a10f2; border: 2px solid var(--accent); box-shadow: 0 0 0 6px #e7c46b30, 0 20px 50px #000d; text-align: center;
}
.level-flash small { font: 600 18px/1.2 var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.level-flash b { font: 700 46px/1.1 var(--num); color: #fff6dc; letter-spacing: .02em; }
.level-flash span { font: 600 20px/1.2 var(--num); color: #e8dcb8; }
.level-flash.go { animation: levelIn .5s cubic-bezier(.2, 1.4, .4, 1) both, levelBlink .6s ease-in-out .6s 3 alternate, levelOut .6s ease-in 4.6s forwards; }
@keyframes levelIn { from { opacity: 0; transform: translate(-50%, -20px) scale(.8); } }
@keyframes levelBlink { to { box-shadow: 0 0 0 14px #e7c46b00, 0 0 60px #e7c46bb0; border-color: #fff3c4; } }
@keyframes levelOut { to { opacity: 0; transform: translate(-50%, -10px); } }
.tb-blinds.flash b { animation: blindsFlash .5s ease-in-out 6 alternate; }
@keyframes blindsFlash { to { color: var(--accent); text-shadow: 0 0 12px #e7c46b; } }

/* ---------- Pause: Bildschirmschoner ---------- */
body.is-paused .table-wrap { filter: grayscale(1) brightness(.55); transition: filter .6s; }
body.is-paused .actions .raise-box, body.is-paused .actions .action-buttons, body.is-paused .actions .pre-actions { visibility: hidden; }
.pause-screen { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, #0b121000 0%, #050807b0 75%); overflow: hidden; }
.pause-card { position: relative; z-index: 2; text-align: center; padding: 26px 40px 30px; border-radius: 22px; background: #0b1210d9; border: 1px solid #e7c46b40; box-shadow: 0 30px 80px #000d; }
.pause-logo { width: min(250px, 50vw); height: auto; display: block; margin: 0 auto 6px; }
.pause-card h2 { margin: 0; font: italic 700 44px/1.1 Georgia, "Times New Roman", serif; color: #f6e7b8; }
.pause-card p { margin: 8px 0 16px; color: #c9d6cf; font-size: 19px; }
.pause-card .btn { font-size: 19px; padding: 12px 26px; }
.pause-birds { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pbird { position: absolute; left: 0; width: var(--s); animation: pfly var(--d) linear var(--delay) infinite; }
.pbird.rev { animation-name: pflyRev; }
.pbird-svg { width: 100%; height: auto; display: block; animation: pbob 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 6px 6px #0008); }
.pbird.rev .pbird-svg { transform: scaleX(-1); }
.pbird .wing { transform-box: view-box; transform-origin: 60px 44px; animation: pflap .3s ease-in-out infinite alternate; }
.pbird .wing.far { animation-delay: -.15s; }
@keyframes pfly { from { transform: translateX(-140px); } to { transform: translateX(calc(100cqw + 140px)); } }
@keyframes pflyRev { from { transform: translateX(calc(100cqw + 140px)); } to { transform: translateX(-140px); } }
@keyframes pbob { from { translate: 0 -10px; } to { translate: 0 12px; } }
@keyframes pflap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@media (prefers-reduced-motion: reduce) { .pbird, .pbird-svg, .pbird .wing, .level-flash.go, .tb-blinds.flash b { animation: none !important; } .pbird { left: calc(var(--s) * 3); } }

/* ---------- Große Schrift (gut lesbar am Rechner) ---------- */
@media (min-width: 761px) {
  body { font-size: 17px; }
  .tb-title { font-size: 20px; }
  .code-chip { font-size: 14px; }
  .tb-blinds { font-size: 17px; }
  .tb-blinds b { font-size: 24px; }
  .topbar .btn.small { font-size: 16px; padding: 8px 14px; }
  .bet { font-size: 22px; padding: 4px 13px 4px 5px; }
  .pot { font-size: 24px; padding: 5px 16px 5px 7px; }
  .pot small { font-size: 16px; }
  .result { font-size: 24px; }
  .result:not(:empty) { padding: 8px 22px; }
  .hole .equity span { font-size: 21px; padding: 4px 10px; }
  .seat .won { font-size: 22px; padding: 5px 13px; }
  .seat .name { font-size: clamp(14px, calc(var(--plate, 32px) * .44), 26px); }
  .seat .stack { font-size: clamp(16px, calc(var(--plate, 32px) * .52), 30px); }
  .seat .meta { font-size: clamp(11px, calc(var(--plate, 32px) * .3), 17px); }
  .seat .meta .status { font-size: clamp(10px, calc(var(--plate, 32px) * .28), 15px); }
  .action-info { font-size: 22px; }
  .action-info b { font-size: 26px; }
  .action-buttons .btn { font-size: 24px; padding: 15px 10px; }
  .action-buttons .btn small { font-size: 14px; }
  .presets button b { font-size: 19px; }
  .presets button span { font-size: 15px; }
  .presets button { padding: 6px 4px; }
  .raise-input { font-size: 22px; width: 104px; }
  .pre-actions, .pre-actions label { font-size: 18px; }
  .pre-actions input { width: 20px; height: 20px; }
  .banner { font-size: 16px; }
  .banner .btn, .req .btn { font-size: 16px; padding: 7px 14px; }
  .req { font-size: 16px; }
  .panel label, .mode-switch small, .hint { font-size: 15px; }
  .log, .chat { font-size: 17px; }
  .tabs button { font-size: 17px; }
  .ledger { font-size: 16px; }
  .toast { font-size: 18px; }
  .dlg { font-size: 17px; }
}