/* New casino games — Keno, HiLo, Limbo, Tower, Baccarat, Video Poker.
   Cohesive with .game-stage / games.css neon aesthetic; reuses root CSS vars. */

/* ── Shared card + status primitives ── */
.c2-card {
  width: 64px;
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6f3ff, #d8d2f0);
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #1a1430;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-family: 'Instrument Serif', serif;
  animation: c2Flip 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.c2-card .rank { font-size: 24px; font-weight: 700; line-height: 1; }
.c2-card .suit { font-size: 22px; line-height: 1; }
.c2-card.red { color: #be123c; }
.c2-card.back {
  background: linear-gradient(135deg, var(--bg-4), var(--bg-5));
  border: 1px solid var(--border-mid);
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
}
@keyframes c2Flip {
  from { transform: rotateY(80deg) scale(0.9); opacity: 0; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}

.c2-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.c2-status {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-1);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 18px;
}
.c2-status.win { color: var(--success); text-shadow: 0 0 20px rgba(52, 211, 153, 0.4); }
.c2-status.lose { color: var(--danger); }

/* ── KENO ── */
#keno-stage { width: 100%; display: flex; flex-direction: column; align-items: center; }
.keno-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 460px;
}
.keno-cell {
  aspect-ratio: 1;
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keno-cell:hover { background: var(--bg-5); transform: scale(1.06); box-shadow: 0 0 12px var(--amber-glow); }
.keno-cell.selected {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  border-color: var(--amber-soft);
  color: white;
  box-shadow: 0 0 14px var(--amber-glow);
}
.keno-cell.result { cursor: default; }
.keno-cell.result:hover { transform: none; box-shadow: none; }
.keno-cell.drawn {
  background: linear-gradient(135deg, var(--bg-5), var(--bg-4));
  border-color: var(--violet-glow);
  color: var(--violet-soft);
}
.keno-cell.hit {
  background: linear-gradient(135deg, var(--success-bg), var(--bg-3));
  border-color: var(--success-border);
  color: var(--success);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.4);
  animation: c2Flip 0.3s ease;
}
.keno-info {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-2);
  text-align: center;
  font-weight: 600;
}
.keno-info b { color: var(--amber-soft); }
.keno-info.win { color: var(--success); font-size: 15px; }
.keno-info.lose { color: var(--danger); }

/* ── HI-LO ── */
.hilo-cards { display: flex; align-items: center; gap: 16px; justify-content: center; }
.hilo-vs {
  font-family: 'Instrument Serif', serif;
  font-size: 30px;
  color: var(--text-2);
  min-width: 28px;
  text-align: center;
}

/* ── LIMBO ── */
.limbo-display {
  font-family: 'Instrument Serif', serif;
  font-size: 88px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-0);
  line-height: 1;
  text-shadow: 0 0 40px var(--amber-glow);
  transition: color 0.2s;
}
.limbo-display .x { font-size: 44px; color: var(--text-2); margin-left: 4px; }
.limbo-display.win { color: var(--success); text-shadow: 0 0 48px rgba(52, 211, 153, 0.5); }
.limbo-display.lose { color: var(--danger); text-shadow: 0 0 48px rgba(244, 63, 94, 0.4); }

/* ── TOWER ── */
.tower-grid { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
.tower-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  padding: 3px;
  border-radius: 10px;
  transition: all 0.15s;
}
.tower-row.current {
  background: var(--amber-glow);
  box-shadow: 0 0 16px var(--amber-glow);
}
.tower-row.cleared { opacity: 0.85; }
.tower-mult {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.tower-tile {
  height: 42px;
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border: 1px solid var(--border-mid);
  border-radius: 9px;
  color: var(--text-1);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tower-tile:not(:disabled):hover {
  background: var(--bg-5);
  transform: translateY(-2px);
  box-shadow: 0 0 12px var(--amber-glow);
}
.tower-tile:disabled { cursor: default; }
.tower-tile.picked {
  background: linear-gradient(135deg, var(--success-bg), var(--bg-3));
  border-color: var(--success-border);
  color: var(--success);
}
.tower-tile.trap {
  background: linear-gradient(135deg, var(--danger-bg), var(--bg-3));
  border-color: var(--danger-border);
  color: var(--danger);
}
.tower-tile.safe-r { opacity: 0.4; }

/* ── BACCARAT ── */
.bac-table { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.bac-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(16, 13, 31, 0.5);
  transition: all 0.2s;
}
.bac-hand.win {
  border-color: var(--success-border);
  background: linear-gradient(180deg, var(--success-bg), rgba(16, 13, 31, 0.5));
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.25);
}
.bac-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-2);
  font-weight: 700;
}
.bac-hand.win .bac-label { color: var(--success); }

/* baccarat side-bet buttons (in controls) */
#bac-player.active, #bac-banker.active, #bac-tie.active {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  border-color: var(--amber-soft);
  color: white;
  box-shadow: 0 0 14px var(--amber-glow);
}

/* ── VIDEO POKER ── */
.vp-hand { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.vp-slot.held .c2-card {
  box-shadow: 0 0 18px var(--amber-glow), 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}
.vp-hold {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--bg-3);
  border: 1px solid var(--border-mid);
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.vp-hold:not(:disabled):hover { color: var(--text-0); background: var(--bg-4); }
.vp-hold.on {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  border-color: var(--amber-soft);
  color: white;
  box-shadow: 0 0 12px var(--amber-glow);
}
.vp-hold:disabled { opacity: 0.55; cursor: default; }

/* responsive */
@media (max-width: 720px) {
  .c2-card { width: 52px; height: 74px; }
  .c2-card .rank { font-size: 20px; }
  .c2-card .suit { font-size: 18px; }
  .keno-grid { max-width: 100%; }
  .bac-table { gap: 16px; }
}