/* Spieltisch: Karten, Chips, Einsatzfeld, Steuerung */
/* Table */
.table { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 0 8px; min-height: 0; }
.zone { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hands { display: flex; justify-content: center; gap: 14px; width: 100%; }
.hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 16px; border: 2px solid transparent; transition: border-color .2s, opacity .2s; }
.hands.multi .hand { --cw: min(13vw, 58px); }
.hand.active { border-color: var(--accent); }
.hands.multi .hand.waiting { opacity: .55; }
.cards { display: flex; height: calc(var(--cw) * 1.42); min-width: var(--cw); }
.cards .card + .card { margin-left: calc(var(--cw) * -0.58); }

.badge { min-width: 38px; text-align: center; padding: 3px 10px; border-radius: 999px; background: #00000059; border: 1px solid var(--line); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.badge.bust { background: #d33a3a; border-color: #d33a3a; }
.badge.win, .badge.bj { background: #22a55b; border-color: #22a55b; }
.badge.push { background: #8a8f99; border-color: #8a8f99; }
.badge.lose { background: #00000080; color: var(--muted); }
.betchip { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Cards */
.card {
  position: relative; width: var(--cw); height: calc(var(--cw) * 1.42); flex: none;
  border-radius: calc(var(--cw) * .1);
  background: #fff; color: #16161a;
  box-shadow: 0 4px 14px #0000004d, 0 0 0 1px #0000001a;
  font-weight: 700;
}
.card.red { color: #d7263d; }
.card .c { position: absolute; top: 6%; left: 9%; line-height: .95; text-align: center; font-size: calc(var(--cw) * .26); }
.card .c i { display: block; font-style: normal; font-size: .8em; }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); padding-top: 18%; }
.card.back {
  background: var(--back1);
  border: calc(var(--cw) * .06) solid #fff;
  box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--back2), 0 4px 14px #0000004d;
}
.card.back::after { content: "♠"; position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff59; font-weight: 900; font-size: calc(var(--cw) * .42); }
.card.deal { animation: deal .5s cubic-bezier(.22,1,.36,1) both; }
.card.flip { animation: flip .45s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes deal { from { transform: translate(30vw, -45vh) rotate(-30deg) scale(.8); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes flip { from { transform: perspective(600px) rotateY(90deg); } to { transform: perspective(600px) rotateY(0); } }

/* Middle */
.mid { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 64px; justify-content: center; }
.msg { font-size: 22px; font-weight: 800; text-align: center; min-height: 28px; }
.msg.pos { color: #4ee08b; } .msg.neg { color: #ff7b7b; }
.count { font-size: 12px; color: var(--muted); background: #00000040; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rules { font-size: 11px; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; opacity: .8; }

/* Bet spot */
.spot { width: 92px; height: 92px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; position: relative; }
.spot .amt { position: absolute; bottom: -24px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Chips */
.chip {
  --c: #d33a3a;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; position: relative;
  background: var(--c);
  border: 5px dashed #fff;
  box-shadow: 0 4px 10px #00000066;
  color: #fff; font-weight: 900; font-size: 14px;
  transition: transform .12s, opacity .2s;
}
.chip::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid #ffffff99; }
.chip.small, .chip.mini { border-width: 4px; }
.chip span { position: relative; }
.chip:active { transform: scale(.92); }
.chip:disabled { opacity: .3; cursor: default; }
.chip[data-v="5"]   { --c: #d33a3a; }
.chip[data-v="25"]  { --c: #1e9e57; }
.chip[data-v="100"] { --c: #24242b; }
.chip[data-v="500"] { --c: #8a3fd1; }
.chip.small { width: 46px; height: 46px; font-size: 12px; }
.chip.stacked { position: absolute; left: calc(50% - 23px); top: calc(50% - 23px); }

/* Controls */
.controls { display: flex; flex-direction: column; gap: 12px; min-height: 132px; justify-content: flex-end; }
.chips { display: flex; justify-content: space-between; gap: 8px; }

/* Kleine und niedrige Fenster (Handy quer, Tastatur offen): der Tisch scrollt, die Knöpfe bleiben immer unten bedienbar */
.app > .controls { flex: none; position: sticky; bottom: 0; z-index: 5; background: var(--felt1); box-shadow: 0 30px 0 var(--felt1); }
.table, .pk-table { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 560px) {
  :root { --cw: min(19vw, 84px, 12vh); }
  .pk-board { --cw: min(15vw, 60px, 11vh); }
  .onseat { --cw: min(40px, 9vh); } .onseat.me { --cw: min(52px, 11vh); }
  .app { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .controls { min-height: 0; gap: 6px; }
  .controls .btn { height: 44px; }
  .controls .chip { width: 40px; height: 40px; font-size: 11px; }
  .table, .pk-table { padding: 6px 0 4px; }
  .app { overflow-y: auto; }
  #roulette .rl-board { flex: none; }
  .rl-head .rl-wheel { flex-basis: min(42vw, 184px, 30vh); }
  .rl-head { padding: 4px 0; }
}
@media (max-height: 360px) {
  .rules, .rl-hist, .pk-log { display: none; }
  .iconbtn { width: 30px; height: 30px; font-size: 14px; }
  .rl-num { width: 48px; height: 48px; font-size: 22px; }
  .pk-slide input[type=range] { display: none; }
}

/* Lesbarkeit: Dealer-Punkte mit Abstand zu den Karten, deaktivierte Knöpfe klar erkennbar */
#dealerTotal, #onDealerTotal { margin-top: 4px; }
.btn:disabled { border-style: dashed; }