/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #07111f;
  --surface:    #0e1f35;
  --surface2:   #152840;
  --felt:       #1a4a2e;
  --felt-dark:  #133820;
  --gold:       #c8a84b;
  --gold-light: #f0d080;
  --green:      #3ac467;
  --red:        #e04040;
  --text:       #e8e8e8;
  --text-dim:   #7a8fa8;
  --border:     #1e3350;
  --chip:       #f0c040;
  --radius:     12px;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen { display: none; width: 100%; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* ── Shared buttons ──────────────────────────────────────────────────────── */
.btn {
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn:active { opacity: .8; transform: scale(.97); }
.btn-primary { background: var(--gold); color: #000; }
.btn-cancel  { background: var(--surface2); color: var(--text-dim); }

/* ── Chip icon ───────────────────────────────────────────────────────────── */
.chip-icon { color: var(--chip); }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  background: var(--surface2);
}
.avatar-sm { width: 36px; height: 36px; }
.avatar-seat { width: 44px; height: 44px; }

/* ── Loading screen ─────────────────────────────────────────────────────── */
#loading-screen {
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--bg);
}
.loading-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spin-card { width: 80px; border-radius: 8px; animation: spin 1.5s linear infinite; }
@keyframes spin { to { transform: rotateY(360deg); } }
.logo-text { font-size: 42px; font-weight: 900; letter-spacing: 6px; color: var(--gold); }
.logo-sub  { font-size: 13px; letter-spacing: 8px; color: var(--text-dim); }

.loading-bar-wrap { width: 200px; height: 4px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.loading-bar { height: 100%; background: var(--gold); border-radius: 4px; animation: load 1.8s ease-out forwards; }
@keyframes load { from { width: 0 } to { width: 100% } }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px; width: 300px;
}
.modal-title { font-size: 20px; font-weight: 800; color: var(--gold); margin-bottom: 12px; }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }