:root {
  --felt: #0f5132;
  --felt-dark: #0a3a24;
  --bg: #07170f;
  --panel: #10261b;
  --panel-2: #163323;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f3efe4;
  --muted: #a8b8ad;
  --gold: #e8c46a;
  --red: #e5534b;
  --green: #3ccf7a;
  --blue: #5aa9ff;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.35 "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button {
  font: inherit; color: inherit; border: 0; cursor: pointer; border-radius: 12px;
  min-height: 48px; padding: 0 16px; background: var(--panel-2); font-weight: 600;
  touch-action: manipulation; transition: transform 0.08s, filter 0.15s, opacity 0.15s;
}
button:active:not(:disabled) { transform: scale(0.96); }
button:disabled { opacity: 0.35; cursor: default; }
button.primary { background: var(--gold); color: #1d1606; }
button.danger { background: #5a1d1a; color: #ffd9d6; }
button.ghost { background: transparent; border: 1px solid var(--line); }
button.go { background: var(--green); color: #052512; }
input, select {
  font: inherit; font-size: 16px; color: var(--text); background: #0b1d14;
  border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 0 14px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.row { display: flex; gap: 8px; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }

/* fichas */
.chip {
  --c: #eee; --e: #999;
  width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, var(--c) 0 46%, transparent 47%),
    repeating-conic-gradient(var(--c) 0 20deg, var(--e) 20deg 40deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(0, 0, 0, 0.15);
  font-weight: 800; font-size: 15px; color: var(--ink, #111);
}
.chip span { background: var(--c); border-radius: 50%; width: 64%; height: 64%; display: grid; place-items: center; border: 2px dashed rgba(0, 0, 0, 0.25); }
.c1 { --c: #f4f1ea; --e: #3b6fd1; --ink: #1d2a44; }
.c5 { --c: #d63a3a; --e: #f6e9e9; --ink: #fff; }
.c25 { --c: #2f9e5b; --e: #f3f3f3; --ink: #fff; }
.c100 { --c: #1e1e1e; --e: #e8c46a; --ink: #fff; }
.c500 { --c: #7b3fc4; --e: #f1e6ff; --ink: #fff; }

.piles { display: inline-flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.pile { position: relative; display: inline-flex; flex-direction: column-reverse; align-items: center; }
.pile b { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; order: -1; }
.disc {
  display: block; width: 26px; height: 7px; border-radius: 50%;
  background: var(--c); border: 1px solid var(--e); margin-top: -3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.piles-lg .disc { width: 38px; height: 10px; margin-top: -4px; }
.piles-sm .disc { width: 18px; height: 5px; margin-top: -2px; }
.piles-sm b { font-size: 9px; }

.badge { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 11px; font-weight: 800; margin-left: 4px; }
.badge.d { background: #fff; color: #111; }
.badge.sb { background: var(--blue); color: #04213f; }
.badge.bb { background: var(--gold); color: #2a1e00; }

#toast {
  position: fixed; left: 50%; top: 14px; transform: translate(-50%, -140%); z-index: 99;
  background: #2b0f0d; color: #ffd9d6; padding: 12px 18px; border-radius: 12px; font-weight: 600;
  transition: transform 0.25s; max-width: calc(100vw - 32px); text-align: center;
}
#toast.ok { background: #0d2b19; color: #c9f5da; }
#toast.show { transform: translate(-50%, 0); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #555; flex: none; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }

/* ---------- entrada ---------- */
.join {
  min-height: 100%; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 0%, #165c3a 0%, var(--bg) 70%);
}
.join form { width: min(420px, 100%); display: grid; gap: 14px; text-align: center; }
.join h1 { margin: 0; font-size: 34px; letter-spacing: -0.5px; }
.join .suits { font-size: 28px; letter-spacing: 8px; color: var(--gold); }

/* ---------- mesa (tablet e dealer) — medidas relativas à largura da mesa ---------- */
.felt {
  position: relative; aspect-ratio: 1.75; border-radius: 50% / 50%; container-type: inline-size;
  background: radial-gradient(ellipse at 50% 40%, #17774a 0%, var(--felt) 45%, var(--felt-dark) 100%);
}
.felt .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 0.7cqw; justify-items: center; width: 46%; }
.felt .phase { font-size: 1.7cqw; letter-spacing: 0.3cqw; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); font-weight: 700; }
.felt .pot { font-size: 5cqw; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0.3cqw 1cqw rgba(0, 0, 0, 0.5); }
.felt .pot small { display: block; font-size: 1.45cqw; font-weight: 600; color: var(--gold); letter-spacing: 0.2cqw; text-transform: uppercase; }
.felt .tobet { font-size: 1.9cqw; color: rgba(255, 255, 255, 0.85); }
.felt .tobet b { color: var(--gold); }
.felt .pots { display: flex; gap: 0.7cqw; flex-wrap: wrap; justify-content: center; font-size: 1.4cqw; }
.felt .pots span { background: rgba(0, 0, 0, 0.3); padding: 0.3cqw 0.9cqw; border-radius: 1.4cqw; }
.felt .note { font-size: 1.6cqw; color: var(--gold); font-weight: 600; }
.seat {
  position: absolute; width: 16cqw;
  background: rgba(5, 20, 12, 0.9); border: 0.2cqw solid rgba(255, 255, 255, 0.12); border-radius: 1.15cqw;
  padding: 0.6cqw 0.9cqw; text-align: center; transition: box-shadow 0.3s, opacity 0.3s, border-color 0.3s;
}
.seat .nm { font-weight: 700; font-size: 1.65cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; gap: 0.3cqw; }
.seat .stk { font-size: 2cqw; font-weight: 800; color: var(--gold); line-height: 1.15; }
.seat .stt { font-size: 1.2cqw; color: var(--muted); min-height: 1.6cqw; text-transform: uppercase; letter-spacing: 0.1cqw; }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 0 0.3cqw var(--gold), 0 0 3cqw rgba(232, 196, 106, 0.55); animation: pulse 1.3s ease-in-out infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 0.3cqw var(--gold), 0 0 1cqw rgba(232, 196, 106, 0.2); } }
.seat.fold { opacity: 0.4; }
.seat.out { opacity: 0.25; }
.seat.win { border-color: var(--green); box-shadow: 0 0 0 0.3cqw var(--green), 0 0 3.5cqw rgba(60, 207, 122, 0.6); }
.seat .off { position: absolute; top: 0.6cqw; right: 0.6cqw; width: 0.8cqw; height: 0.8cqw; }
.seat .badge { font-size: 1cqw; height: 1.75cqw; min-width: 1.9cqw; padding: 0 0.35cqw; margin-left: 0.3cqw; }
.bet { position: absolute; text-align: center; display: grid; justify-items: center; gap: 0.2cqw; }
.bet b { background: rgba(0, 0, 0, 0.55); padding: 0.15cqw 0.7cqw; border-radius: 1cqw; font-size: 1.45cqw; }
/* versão pequena (telemóvel do dealer): letras maiores em proporção */
.felt.compact { aspect-ratio: 1.5; }
.felt.compact .seat { width: 22cqw; padding: 0.8cqw 1cqw; border-radius: 2cqw; }
.felt.compact .seat .nm { font-size: 3.3cqw; }
.felt.compact .seat .stk { font-size: 3.6cqw; }
.felt.compact .seat .stt { font-size: 2.4cqw; min-height: 2.8cqw; }
.felt.compact .seat .badge { font-size: 2.2cqw; height: 3.4cqw; min-width: 3.6cqw; }
.felt.compact .seat .off { width: 1.6cqw; height: 1.6cqw; top: 1cqw; right: 1cqw; }
.felt.compact .bet b { font-size: 3cqw; }
.felt.compact .bet .piles { display: none; }
.felt.compact .center { width: 50%; gap: 1cqw; }
.felt.compact .pot { font-size: 8cqw; }
.felt.compact .pot small { font-size: 2.6cqw; }
.felt.compact .tobet, .felt.compact .note { font-size: 3cqw; }