/* ===== Three Card Poker — game-specific styles =====
   Generic glass chrome comes from shared/css/glass.css (cards reuse .c-card
   wholesale; the rules modal uses the shared .c-modal, which scrolls the
   full-screen overlay, never a boxed inner scrollbar). This file stacks
   dealer over player, then the bet circles, chips and action row. */

:root {
  /* Big-2 green felt chrome. The old royal-purple card deck is swapped for a
     crimson house deck so nothing fights the green felt. */
  --accent-1: #2ba25f;
  --accent-2: #3fbf7a;
  --on-accent: #06210f;
  --back-1: #b83232;
  --back-2: #6a1414;
  --bg-1: #12764c;
  --bg-2: #083f29;
  --bg-glow-a: rgba(18, 118, 76, .55);
  --bg-glow-b: rgba(63, 191, 122, .22);
  --c-text: #eaf3ee;
  --c-muted: #b7d3c2;
}

/* Letterbox behind the felt and the frosted Rules modal follow the same green
   (the primary buttons are already green via .c-btn--primary -> --accent-1/2). */
body { background: #083f29; }
.c-modal__backdrop { background: rgba(3, 22, 14, .5); }
.c-modal__panel { background: rgba(9, 44, 29, .72); }

.c-app { --fpad: clamp(12px, 4vw, 36px); }

/* ---------- Table stack ---------- */
.tc-board {
  --cw: clamp(54px, 15vw, 82px);
  --ch: calc(var(--cw) * 1.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.4vh, 22px);
  max-width: 640px;
  margin: 0 auto;
}
.tc-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tc-side__label {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
  display: flex; align-items: center; gap: 8px;
}
.tc-count {
  min-width: 30px; padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: #fff; font-size: 12px; font-weight: 800;
  text-align: center; letter-spacing: .01em; text-transform: none;
}
.tc-count:empty { display: none; }
.tc-side--player .tc-count { color: #bff0c8; border-color: rgba(126, 240, 164, .45); }

/* Card well: absolute fan, height fits a card plus slide-in room. */
.tc-well {
  position: relative;
  min-width: calc(var(--cw) + 4px);
  height: var(--ch);
}
.tc-well .c-card {
  transform: rotate(calc(var(--i, 0) * -1.4deg));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--card-edge);
}
.tc-well .c-card.tc-new { animation: tcDeal .28s ease; }
@keyframes tcDeal {
  from { transform: translateY(-42px) rotate(-7deg); opacity: 0; }
}

/* ---------- Center status ---------- */
.tc-mid { min-height: 34px; display: flex; align-items: center; }
.tc-status {
  padding: 7px 22px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: var(--c-text);
  text-align: center;
  transition: color .2s ease, border-color .2s ease;
}
.tc-status--win   { color: #7ef0a4; border-color: rgba(126, 240, 164, .5); }
.tc-status--lose  { color: #ff8b94; border-color: rgba(255, 139, 148, .5); }
.tc-status--push  { color: #ffd97a; border-color: rgba(255, 217, 122, .5); }

/* ---------- Bet circles ---------- */
.tc-bets { display: flex; gap: clamp(8px, 2.6vw, 18px); }
.tc-bet {
  appearance: none; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: clamp(72px, 21vw, 96px); padding: 12px 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tc-bet__name { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tc-bet__stake {
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.tc-bet--ante .tc-bet__name { color: #ffd97a; }
.tc-bet--pp   .tc-bet__name { color: #7fe0a6; }
.tc-bet--play .tc-bet__name { color: #8fc0ff; }
.tc-bet--ante:hover, .tc-bet--pp:hover { border-color: rgba(255, 255, 255, .4); }
.tc-bet--ante:active, .tc-bet--pp:active { transform: translateY(1px); }
.tc-bet--ante:focus-visible, .tc-bet--pp:focus-visible { outline: none; box-shadow: var(--ring); }
/* The Play circle is matched automatically, so it is inert chrome. */
.tc-bet--play { cursor: default; opacity: .9; }
.tc-bet.is-active {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 2px rgba(240, 180, 41, .5), 0 0 18px rgba(240, 180, 41, .22);
}
.tc-bet:disabled { opacity: .5; cursor: default; }

/* ---------- Betting chips ---------- */
.tc-chips { display: flex; gap: 12px; align-items: center; }
.tc-chip {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .75);
  background: var(--chip);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--chip) 78%, #fff), var(--chip) 70%);
  color: #fff;
  font: 800 13px/1 var(--gc-font, system-ui);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tc-chip:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }
.tc-chip:active:not(:disabled) { transform: translateY(0) scale(.97); }
.tc-chip:focus-visible { outline: none; box-shadow: var(--ring), 0 4px 10px rgba(0, 0, 0, .4); }
.tc-chip:disabled { opacity: .35; cursor: default; }
.tc-chip--clear {
  background: var(--glass);
  border-style: solid;
  border-color: var(--glass-line);
  color: var(--c-muted);
  font-size: 20px;
}
.tc-chip--clear:hover { color: #fff; }

/* ---------- Action row ---------- */
.tc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tc-actions .c-btn { min-width: 88px; text-align: center; font-size: 14px; padding: 9px 16px; }

@media (max-width: 430px) {
  .tc-chip { width: 40px; height: 40px; }
  .tc-actions .c-btn { min-width: 74px; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-well .c-card.tc-new { animation: none; }
  .tc-chip:hover:not(:disabled) { transform: none; }
}