/* ===== Casino War — 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 lays out
   the two battling hands, chips and the action row. */

:root {
  /* Big-2 green felt chrome: green app background, green buttons and
     green-tinted text. The card back keeps this game's war crimson deck. */
  --accent-1: #2ba25f;
  --accent-2: #3fbf7a;
  --on-accent: #06210f;
  --back-1: #b83232;
  --back-2: #5a1010;
  --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 ---------- */
.cw-board {
  --cw: clamp(74px, 22vw, 116px);
  --ch: calc(var(--cw) * 1.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.2vh, 30px);
  max-width: 640px;
  margin: 0 auto;
}
.cw-row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 6vw, 48px); }
.cw-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cw-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;
}
.cw-vs {
  align-self: center;
  font-size: clamp(18px, 5vw, 26px); font-weight: 900; letter-spacing: .04em;
  color: var(--gold); opacity: .8; text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Card well: fits one card, slides a second in during a war. */
.cw-well {
  position: relative;
  min-width: calc(var(--cw) + 4px);
  height: var(--ch);
}
.cw-well .c-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--card-edge);
}
.cw-well .c-card.cw-new { animation: cwDeal .32s ease; }
@keyframes cwDeal {
  from { transform: translateY(-46px) rotate(-8deg); opacity: 0; }
}

/* Rank tag beside each side's label. */
.cw-count {
  min-width: 30px; padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: #fff; font-size: 13px; font-weight: 800;
  text-align: center; letter-spacing: 0;
}
.cw-count:empty { display: none; }

/* ---------- Center status ---------- */
.cw-mid { min-height: 34px; display: flex; align-items: center; }
.cw-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;
}
.cw-status--win   { color: #7ef0a4; border-color: rgba(126, 240, 164, .5); }
.cw-status--lose  { color: #ff8b94; border-color: rgba(255, 139, 148, .5); }
.cw-status--push  { color: #ffd97a; border-color: rgba(255, 217, 122, .5); }

/* ---------- Betting chips ---------- */
.cw-chips { display: flex; gap: 12px; align-items: center; }
.cw-chip {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .75);
  /* Plain value first: if color-mix() is unsupported the chip still reads as
     a solid-colour disc. */
  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;
}
.cw-chip:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }
.cw-chip:active:not(:disabled) { transform: translateY(0) scale(.97); }
.cw-chip:focus-visible { outline: none; box-shadow: var(--ring), 0 4px 10px rgba(0, 0, 0, .4); }
.cw-chip:disabled { opacity: .35; cursor: default; }
.cw-chip--clear {
  background: var(--glass);
  border-style: solid;
  border-color: var(--glass-line);
  color: var(--c-muted);
  font-size: 20px;
}
.cw-chip--clear:hover { color: #fff; }

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

@media (max-width: 430px) {
  .cw-chip { width: 40px; height: 40px; }
}

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