/* Blackjack · BlueGames — „Mitternachtstisch": Petrol-Filz, Messing-Gold, Creme-Karten */
:root {
  --bg: #06090b;
  --felt-1: #0e3b34;
  --felt-2: #08231f;
  --felt-edge: #052019;
  --gold: #d3aa5e;
  --gold-dim: #8f7440;
  --cream: #f2e9d8;
  --cream-dim: #cbc0a8;
  --ink: #20262c;
  --suit-red: #c8503c;
  --win: #6fc48a;
  --lose: #d97862;
  --card-w: clamp(52px, 11vw, 74px);
  --radius: 12px;
  font-size: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.hidden { display: none !important; }

/* ── Typo-Rollen ─────────────────────────── */
h1, .zone-label, .arc text, .code-badge {
  font-family: Georgia, "Times New Roman", serif;
}

/* ── Lobby ──────────────────────────────── */
.screen { min-height: 100dvh; display: flex; flex-direction: column; }
#lobby { align-items: center; justify-content: center; padding: 1.5rem;
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, #0c2f29 0%, transparent 60%),
    var(--bg);
}
.lobby-card {
  width: min(400px, 100%);
  background: linear-gradient(170deg, var(--felt-1), var(--felt-2) 70%);
  border: 1px solid var(--gold-dim);
  border-radius: 18px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 0 0 6px var(--felt-edge), 0 30px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 1rem;
}
.brand { text-align: center; margin-bottom: .6rem; }
.brand-suits { color: var(--gold); letter-spacing: .8em; margin-left: .8em; font-size: .9rem; }
.brand h1 {
  font-size: 2.6rem; font-weight: 400; color: var(--gold);
  letter-spacing: .12em; text-transform: uppercase; margin-top: .3rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.brand-sub { color: var(--cream-dim); font-size: .85rem; letter-spacing: .06em; }
.field span { display: block; font-size: .8rem; color: var(--cream-dim); margin-bottom: .3rem; }
input {
  width: 100%; padding: .7rem .9rem;
  background: rgba(0,0,0,.35); color: var(--cream);
  border: 1px solid rgba(211,170,94,.35); border-radius: 10px;
  font-size: 1rem; outline: none;
}
input:focus-visible { border-color: var(--gold); }
#codeInput { text-transform: uppercase; letter-spacing: .35em; text-align: center; font-size: 1.2rem; width: 8.5rem; }
.btn {
  padding: .75rem 1.1rem; border-radius: 10px;
  background: rgba(242,233,216,.1); color: var(--cream);
  border: 1px solid rgba(242,233,216,.25);
  transition: transform .08s, background .15s;
}
.btn:hover { background: rgba(242,233,216,.18); }
.btn:active { transform: scale(.97); }
.btn.gold {
  background: linear-gradient(180deg, #e0bb70, #b98f43);
  color: #241c0c; font-weight: 600; border: none;
}
.btn.gold:hover { filter: brightness(1.07); }
.btn.tiny { padding: .35rem .7rem; font-size: .8rem; border-radius: 8px; }
.btn.ghost { background: none; border-color: rgba(242,233,216,.2); color: var(--cream-dim); }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.or { display: flex; align-items: center; gap: .8rem; color: var(--cream-dim); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(242,233,216,.15); }
.join-row { display: flex; gap: .6rem; justify-content: center; }
.join-row .btn { flex: 1; }
.lobby-rules { text-align: center; font-size: .75rem; color: var(--cream-dim); line-height: 1.6; margin-top: .4rem; }

/* ── Tisch-Layout ───────────────────────── */
#table { background: var(--bg); }
.table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; gap: .6rem;
}
.code-badge {
  color: var(--gold); letter-spacing: .1em; font-size: .95rem;
  padding: .3rem .8rem; border: 1px solid var(--gold-dim); border-radius: 999px;
}
.code-badge b { letter-spacing: .25em; margin-left: .2em; }
.shoe-info { color: var(--cream-dim); font-size: .85rem; }

.felt {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  margin: 0 .6rem;
  padding: 1.2rem .8rem 1.4rem;
  background:
    radial-gradient(ellipse 140% 100% at 50% -20%, rgba(255,255,255,.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  border: 1px solid var(--gold-dim);
  border-radius: 26px 26px 60px 60px / 26px 26px 90px 90px;
  box-shadow: inset 0 0 0 5px var(--felt-edge), inset 0 0 90px rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.5);
}

/* Signatur: Bogenschrift wie Tisch-Beschriftung */
.arc { width: min(680px, 96%); margin: .4rem 0 .8rem; }
.arc text {
  fill: none; stroke: var(--gold); stroke-width: .45;
  font-size: 21px; letter-spacing: .34em;
}

.dealer-zone { text-align: center; }
.zone-label {
  color: var(--gold); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: .5rem;
}
.total-badge {
  display: inline-block; min-width: 1.8em; padding: .05em .4em; margin-left: .4em;
  background: rgba(0,0,0,.45); border-radius: 6px;
  color: var(--cream); letter-spacing: 0; font-family: ui-monospace, monospace; font-size: .85rem;
}

/* ── Karten ─────────────────────────────── */
.cards { display: flex; justify-content: center; min-height: calc(var(--card-w) * 1.45); }
.card {
  width: var(--card-w); aspect-ratio: 5 / 7.2;
  background: linear-gradient(160deg, #fdf7ea, #ece1c8);
  border-radius: 9px;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
  position: relative; color: var(--ink);
  margin-left: calc(var(--card-w) * -0.42);
  animation: dealIn .3s ease-out;
  flex-shrink: 0;
}
.card:first-child { margin-left: 0; }
@keyframes dealIn {
  from { transform: translate(30px, -34px) rotate(6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.card .corner {
  position: absolute; top: 5px; left: 6px; line-height: 1.02;
  font-size: calc(var(--card-w) * 0.24); font-weight: 700; text-align: center;
  font-family: Georgia, serif;
}
.card .pip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-w) * 0.52); opacity: .9;
}
.card.red { color: var(--suit-red); }
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(211,170,94,.25) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(211,170,94,.25) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #123a44, #0a222a);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 3px #0a222a, inset 0 0 0 4px rgba(211,170,94,.4);
}

/* ── Sitze ──────────────────────────────── */
.seats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  width: 100%; margin-top: .4rem;
}
.seat {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(211,170,94,.22);
  border-radius: var(--radius);
  padding: .6rem .7rem .7rem;
  min-width: 150px; max-width: 210px; flex: 1 1 150px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.seat.me { border-color: rgba(211,170,94,.55); }
.seat.turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(211,170,94,.25);
}
.seat.away { opacity: .5; }
.seat-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-name .you-tag { color: var(--gold); font-size: .75em; }
.seat-chips { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--cream-dim); margin: .15rem 0 .35rem; }
.seat-chips b { color: var(--gold); }
.seat .cards { min-height: calc(var(--card-w) * .9); --card-w: clamp(40px, 8vw, 56px); }
.hand { margin-top: .35rem; position: relative; }
.hand.active-hand { outline: 1px dashed rgba(211,170,94,.5); outline-offset: 4px; border-radius: 8px; }
.hand-total { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--cream-dim); margin-top: .25rem; }
.bet-plate {
  display: inline-block; margin-top: .3rem; padding: .1rem .6rem;
  border: 1px dashed rgba(211,170,94,.5); border-radius: 999px;
  font-family: ui-monospace, monospace; font-size: .78rem; color: var(--gold);
}
.result-badge {
  display: inline-block; margin-top: .35rem; padding: .12rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  animation: pop .35s cubic-bezier(.3,1.6,.5,1);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.result-badge.win  { background: rgba(111,196,138,.18); color: var(--win); border: 1px solid rgba(111,196,138,.4); }
.result-badge.lose { background: rgba(217,120,98,.15); color: var(--lose); border: 1px solid rgba(217,120,98,.4); }
.result-badge.push { background: rgba(242,233,216,.12); color: var(--cream-dim); border: 1px solid rgba(242,233,216,.3); }

/* ── Aktionsleiste ──────────────────────── */
.action-bar {
  position: sticky; bottom: 0;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(6,9,11,.92) 30%);
}
.controls { display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.hint { color: var(--cream-dim); font-size: .85rem; }
.bet-status { width: 100%; display: flex; justify-content: center; gap: 1.2rem; font-size: .85rem; color: var(--cream-dim); }
.bet-status b { color: var(--gold); font-family: ui-monospace, monospace; }
.chip {
  width: 56px; height: 56px; border-radius: 50%;
  font-weight: 700; font-size: .95rem; color: #fff;
  border: 3px dashed rgba(255,255,255,.75);
  box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.18);
  transition: transform .1s;
}
.chip:hover { transform: translateY(-3px); }
.chip:active { transform: translateY(0); }
.chip.c10  { background: radial-gradient(circle at 35% 30%, #4d7ea8, #2c5375); }
.chip.c50  { background: radial-gradient(circle at 35% 30%, #c2703d, #8d4a22); }
.chip.c100 { background: radial-gradient(circle at 35% 30%, #3f3f46, #1c1c21); }
.chip.c500 { background: radial-gradient(circle at 35% 30%, #7a4d9e, #4e2c6e); }
.btn.act { min-width: 108px; font-weight: 600; background: rgba(242,233,216,.12); }
.timer {
  font-family: ui-monospace, monospace; font-size: .85rem; color: var(--gold);
  min-width: 3.2em; text-align: center;
}

/* ── Toasts ─────────────────────────────── */
.toasts {
  position: fixed; top: .9rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .4rem; z-index: 50; pointer-events: none;
  width: min(92vw, 420px);
}
.toast {
  background: rgba(8,20,18,.95); border: 1px solid var(--gold-dim);
  color: var(--cream); border-radius: 10px; padding: .55rem .9rem;
  font-size: .85rem; text-align: center;
  animation: toastIn .25s ease-out;
}
.toast.err { border-color: var(--lose); color: var(--lose); }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } }

@media (max-width: 480px) {
  .arc { display: none; }
  .seat { min-width: 130px; }
  .btn.act { min-width: 0; flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .result-badge, .toast { animation: none; }
  .chip, .btn { transition: none; }
}