/* public/shared/design-system.css
   Single source of truth for all design tokens and reusable components.
   Import this on every page. Never duplicate these rules in per-page CSS. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Raleway:wght@200;300;400&display=swap');

:root {
  /* Colour */
  --gold:          #C39B5A;
  --gold-light:    #E8C97A;
  --gold-dim:      rgba(195,155,90,0.28);
  --gold-faint:    rgba(195,155,90,0.10);
  --bg-deep:       #07090A;
  --bg-mid:        #0D1410;
  --bg-nav:        rgba(5,7,8,0.94);
  --bg-card:       rgba(255,255,255,0.03);
  --felt:          #1B4332;
  --felt-light:    #2D6A4F;
  --felt-dark:     #0D2B1F;
  --rail:          #3D1F0A;
  --text:          #EDE0C4;
  --text-mid:      rgba(237,224,196,0.55);
  --text-dim:      rgba(237,224,196,0.35);
  --red:           #C0392B;
  --red-dim:       rgba(192,57,43,0.18);
  --green-live:    #4CAF50;
  --blue-call:     #6BA3E8;

  /* Typography */
  --font-display:  'Cinzel', serif;
  --font-serif:    'Cormorant Garamond', serif;
  --font-body:     'Raleway', sans-serif;

  /* Spacing */
  --nav-h:         58px;
}

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

html, body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  min-height: 100vh;
}

/* ── Noise texture overlay ────────────────────────────── */
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  opacity: 0.55;
}

/* ── Navigation bar ───────────────────────────────────── */
.top-nav {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 24px;
  background: var(--bg-nav);
  border-bottom: 1px solid rgba(195,155,90,0.12);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.nav-back {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-dim); text-decoration: none;
  transition: color 0.2s;
  padding: 6px 0;
}
.nav-back:hover { color: var(--gold); }

.nav-title {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-pre   { font-family: var(--font-body); font-weight: 200; font-size: 8px; letter-spacing: 0.45em; color: var(--gold); }
.nav-game  { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.2em; }

.nav-right { display: flex; align-items: center; gap: 10px; }

/* Chip badge */
.chip-badge {
  display: flex; align-items: center; gap: 5px;
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 12px; color: var(--gold);
}

/* Player pill */
.player-pill {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(195,155,90,0.12);
  border-radius: 100px;
  padding: 4px 12px 4px 4px;
}
.pill-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #1a3a22, #2a5a38);
  border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; color: var(--gold);
  overflow: hidden;
}
.pill-av img { width: 100%; height: 100%; object-fit: cover; }
.pill-name  { font-family: var(--font-serif); font-size: 13px; }
.pill-action { font-size: 9px; color: var(--text-dim); cursor: pointer; letter-spacing: 0.1em; transition: color 0.2s; font-weight: 200; }
.pill-action:hover { color: var(--gold); }

/* Online indicator */
.online-dot {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-dim); letter-spacing: 0.05em;
}
.dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-live);
  box-shadow: 0 0 6px var(--green-live);
  animation: livePulse 2s ease infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.75); }
}

/* ── Gold divider ─────────────────────────────────────── */
.gold-rule {
  display: flex; align-items: center; gap: 12px;
}
.rule-line   { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
.rule-diamond { font-size: 7px; color: var(--gold); opacity: 0.5; }

/* ── Eyebrow label ────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 0.45em;
  color: var(--gold); text-transform: uppercase;
}

/* ── Stat card ────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid rgba(195,155,90,0.12);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.stat-label { font-family: var(--font-display); font-size: 8px; letter-spacing: 0.25em; color: var(--text-dim); }
.stat-value { font-family: var(--font-display); font-size: 15px; color: var(--text); }
.stat-sub   { font-family: var(--font-serif); font-style: italic; font-size: 11px; color: var(--text-dim); }

/* ── Action buttons ───────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.22em;
  padding: 10px 22px; border: 1px solid; cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  background: transparent;
}
.btn:hover   { filter: brightness(1.25); transform: translateY(-1px); }
.btn:active  { transform: scale(0.97); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; filter: none; }

.btn-gold    { border-color: var(--gold-dim);              color: var(--gold);       background: var(--gold-faint); }
.btn-danger  { border-color: rgba(192,57,43,0.45);         color: #E05050;            background: rgba(192,57,43,0.10); }
.btn-success { border-color: rgba(60,180,90,0.4);          color: var(--green-live);  background: rgba(30,120,60,0.10); }
.btn-call    { border-color: rgba(60,120,200,0.4);         color: var(--blue-call);   background: rgba(30,80,150,0.10); }
.btn-ghost   { border-color: rgba(195,155,90,0.15);        color: var(--text-dim);    background: transparent; }
.btn-allin   { border-color: rgba(150,0,200,0.4);          color: #C084E8;            background: rgba(100,0,150,0.10); }

/* ── Playing card ─────────────────────────────────────── */
.card {
  width: 52px; height: 76px;
  border-radius: 5px;
  background: #fafaf5;
  box-shadow: 0 5px 16px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; font-weight: 700;
  animation: cardDeal 0.38s cubic-bezier(0.16,1,0.3,1) both;
  user-select: none;
}
@keyframes cardDeal {
  from { opacity: 0; transform: scale(0.6) rotate(-12deg) translateY(-20px); }
  to   { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}
.card .c-rank { font-size: 1rem; font-family: 'Georgia', serif; line-height: 1; }
.card .c-suit { font-size: 1.5rem; font-family: 'Georgia', serif; line-height: 1; }
.card .c-corner {
  position: absolute; top: 3px; left: 5px;
  font-size: 0.58rem; font-family: 'Georgia', serif;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.card .c-corner-b {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 0.58rem; font-family: 'Georgia', serif;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  transform: rotate(180deg);
}
.card.red   { color: var(--red); }
.card.black { color: #111; }
.card.back  { background: linear-gradient(135deg, #1a3a8f, #0d2060); }
.card.back::before {
  content: '◈';
  position: absolute; inset: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  color: rgba(255,255,255,0.1);
  font-size: 1.2rem;
}

/* ── Casino chips ─────────────────────────────────────── */
.chip {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  border: 3px solid; cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  user-select: none;
}
.chip:hover  { transform: translateY(-4px) scale(1.08); filter: brightness(1.2); }
.chip:active { transform: scale(0.93); }
.chip.c5   { background: #C0392B; border-color: #E74C3C; color: #fff; }
.chip.c10  { background: #2980B9; border-color: #3498DB; color: #fff; }
.chip.c25  { background: #27AE60; border-color: #2ECC71; color: #fff; }
.chip.c100 { background: #1a1a1a; border-color: #555;    color: #fff; }
.chip.c250 { background: #7D3C98; border-color: #9B59B6; color: #fff; }

/* ── Status pills ─────────────────────────────────────── */
.pill-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 100px; padding: 3px 9px;
  font-family: var(--font-display); font-size: 9px; letter-spacing: 0.1em; border: 1px solid;
}
.pill-gold-b  { background: var(--gold-faint);           border-color: var(--gold-dim);              color: var(--gold); }
.pill-green-b { background: rgba(76,175,80,0.1);         border-color: rgba(76,175,80,0.3);           color: var(--green-live); }
.pill-red-b   { background: rgba(224,80,80,0.1);         border-color: rgba(224,80,80,0.3);           color: #E05050; }
.pill-blue-b  { background: rgba(107,163,232,0.1);       border-color: rgba(107,163,232,0.3);         color: var(--blue-call); }

/* ── Toast notification ───────────────────────────────── */
.toast {
  position: fixed; bottom: 6rem; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,12,0.96);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  padding: 0.65rem 1.75rem; z-index: 500;
  animation: toastIn 0.3s ease both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast.win  { border-color: rgba(76,175,80,0.5); color: var(--green-live); }
.toast.lose { border-color: rgba(224,80,80,0.4); color: #E05050; }
.toast.err  { border-color: rgba(224,80,80,0.4); }