:root {
  --felt: #0e5a37;
  --felt-dark: #073a23;
  --felt-deep: #04261a;
  --gold: #e8c26a;
  --gold-deep: #b98b2d;
  --ink: #f4efe2;
  --muted: rgba(244, 239, 226, 0.62);
  --panel: rgba(4, 22, 14, 0.78);
  --line: rgba(232, 194, 106, 0.28);
  --red: #e0534a;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse 120% 90% at 50% 38%, #137046 0%, var(--felt) 35%, var(--felt-dark) 75%, var(--felt-deep) 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body::before { /* subtle felt grain */
  content: '';
  position: fixed; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; }

/* ---------- lobby ---------- */
#lobby { display: grid; place-items: center; padding: 16px; }
.lobby-card {
  width: min(420px, 100%);
  padding: 32px 28px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(5, 30, 19, 0.86), rgba(3, 20, 12, 0.92));
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: center;
}
.logo { display: flex; justify-content: center; gap: 0; margin-bottom: 8px; height: 78px; }
.logo-card {
  width: 54px; height: 76px; border-radius: 8px;
  background: #fbf8f1; color: #16161a;
  font: 900 30px/1 'Playfair Display', Georgia, serif;
  display: grid; place-content: center; gap: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transform: rotate(-9deg) translateX(8px);
}
.logo-card small { font-size: 22px; }
.logo-card.red { color: #c62f2a; transform: rotate(8deg) translate(-8px, 4px); }
h1 {
  font: 900 44px/1 'Playfair Display', Georgia, serif;
  letter-spacing: 0.5px; margin: 8px 0 6px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.tag { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.field { display: block; text-align: left; margin-bottom: 14px; }
.field span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 6px; }
input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--ink);
  outline: none; font-size: 16px;
}
input:focus { border-color: var(--gold); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 18px 0 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; text-align: center; }
.join-row .btn { flex: 0 0 96px; }
.error { color: #ff8b80; min-height: 18px; font-size: 13px; margin: 10px 0 0; }
.rules { color: var(--muted); font-size: 11.5px; margin: 10px 0 0; line-height: 1.5; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #23463a, #142c23);
  padding: 12px 18px; border-radius: 12px;
  font-weight: 800; letter-spacing: 0.3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, filter 0.15s, opacity 0.15s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.btn-gold { width: 100%; background: linear-gradient(180deg, #f2d48a, var(--gold-deep)); color: #2a1c05; border-color: #f7e2a8; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); }
kbd { font: 600 10px Inter, sans-serif; opacity: 0.55; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
@media (hover: none) { kbd { display: none; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 12px; font-size: 13px;
  backdrop-filter: blur(6px);
}
.pill.small { padding: 6px 10px; font-size: 12px; font-weight: 600; }
.pill b { letter-spacing: 2px; color: var(--gold); }
.muted { color: var(--muted); }
.copy { opacity: 0.6; }

/* ---------- game ---------- */
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(10px + var(--safe-t)) 12px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.top-right { display: flex; gap: 6px; }
.host-tools { display: flex; gap: 6px; }
.status { font-size: 13px; color: var(--muted); text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
#timerFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #fff3cf); box-shadow: 0 0 10px var(--gold); }
#timerFill.urgent { background: var(--red); box-shadow: 0 0 10px var(--red); }

#controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px calc(12px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(2, 16, 10, 0.75) 40%);
}
.msg { font-size: 14px; min-height: 20px; text-align: center; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.msg b { color: var(--gold); }
.panel { display: flex; gap: 8px; width: min(560px, 100%); justify-content: center; align-items: center; flex-wrap: wrap; }
#actionPanel .btn { flex: 1 1 0; min-width: 0; padding: 14px 6px; font-size: 15px; }
#actionPanel .btn[data-act='hit'] { background: linear-gradient(180deg, #2f7a55, #1b5a3b); }
#actionPanel .btn[data-act='stand'] { background: linear-gradient(180deg, #8a3a33, #5e221d); }
#actionPanel .btn[data-act='double'] { background: linear-gradient(180deg, #f2d48a, var(--gold-deep)); color: #2a1c05; }
#actionPanel .btn[data-act='split'] { background: linear-gradient(180deg, #3b5d8f, #233c63); }

.chips { display: flex; gap: 10px; justify-content: center; }
.chip {
  --c: #2b62c9;
  width: 54px; height: 54px; border-radius: 50%;
  border: none; font-weight: 800; font-size: 14px; color: #fff;
  background:
    radial-gradient(circle, var(--c) 0 52%, transparent 53%),
    repeating-conic-gradient(#fff 0 12deg, var(--c) 12deg 45deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s;
}
.chip:active { transform: translateY(3px) scale(0.96); }
.chip:disabled { opacity: 0.3; }
.chip.c10 { --c: #2b62c9; }
.chip.c25 { --c: #1f8a4c; }
.chip.c100 { --c: #1b1b1f; }
.chip.c500 { --c: #6f3bb3; }
.bet-actions { display: flex; gap: 8px; width: 100%; }
.bet-actions .btn { flex: 1; }
.bet-actions .btn-gold { flex: 2; }

#toasts { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; z-index: 5; }
.toast {
  background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px;
  font-size: 13px; animation: toast 3s forwards;
}
.toast.err { border-color: rgba(224, 83, 74, 0.6); }
.toast.big { font: 900 22px 'Playfair Display', Georgia, serif; color: var(--gold); padding: 10px 20px; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 520px) {
  .chip { width: 50px; height: 50px; font-size: 13px; }
  .status { display: none; }
  #actionPanel .btn { font-size: 14px; padding: 13px 4px; }
  .bet-actions .btn { white-space: nowrap; padding: 12px 8px; font-size: 14px; }
}