/* =============================================================================
   CULTURAL GAMES — games.css
   Styles specific to individual game pages and the shared game layout shell.
   Requires global.css and components.css to be loaded first.
   Each game's unique styles live in this file, organized by section.
============================================================================= */

/* =============================================================================
   GAME PAGE LAYOUT
============================================================================= */
.game-page {
  padding-block: var(--space-6) var(--space-10);
}

/* Breadcrumb / back nav */
.game-nav-bar {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}

/* Game header banner */
.game-header {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, #2d1810 100%);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.game-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(200, 155, 60, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.game-header__icon {
  font-size: 4rem;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.game-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  color: var(--color-accent-gold);
  margin-bottom: var(--space-1);
}

.game-header__origin {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

/* Two-column layout: game canvas + sidebar */
.game-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   ACCORDION — "How to Play" and "Cultural Context" sections
============================================================================= */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  margin-bottom: var(--space-3);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
  transition: background-color var(--transition-fast);
}

.accordion__trigger:hover {
  background-color: var(--color-surface-alt);
}

.accordion__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.accordion__icon {
  font-size: var(--text-xl);
  color: var(--color-accent-gold);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.accordion[open] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.accordion__body p + p {
  margin-top: var(--space-2);
}

.accordion__body ol,
.accordion__body ul {
  padding-left: var(--space-3);
  margin-top: var(--space-2);
}

.accordion__body ol {
  list-style: decimal;
}

.accordion__body ul {
  list-style: disc;
}

.accordion__body li {
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}

/* =============================================================================
   GAME CONTAINER — where the game canvas renders
============================================================================= */
.game-container {
  background-color: var(--color-surface-alt);
  border: 2px solid var(--color-accent-gold);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  position: relative;
}

.game-container__inner {
  padding: var(--space-4);
}

/* =============================================================================
   DISCLAIMER — "virtual coins only" notice
============================================================================= */
.game-disclaimer {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =============================================================================
   Bầu Cua Tôm Cá — Phase 2
============================================================================= */

/* Outer wrapper */
.bc-game {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Wallet bar ── */
.bc-wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  border: 2px solid rgba(200,155,60,0.3);
}

.bc-wallet-bar__label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.bc-wallet-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-gold);
  line-height: 1;
}

/* Coin mode toggle */
.bc-coin-mode-wrap {
  align-items: center;
  justify-content: center;
}
.bc-mode-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(200,155,60,0.12);
  border: 1px solid rgba(200,155,60,0.35);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bc-mode-btn:hover:not(:disabled) {
  background: rgba(200,155,60,0.25);
  border-color: var(--color-accent-gold);
  color: #fff;
}
.bc-mode-btn--active {
  background: rgba(200,155,60,0.25);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
}
.bc-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Bet input row ── */
.bc-bet-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}

.bc-bet-row label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bc-bet-input {
  width: 72px;
  padding: 6px 10px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  transition: border-color var(--transition-fast);
}

.bc-bet-input:focus {
  border-color: var(--color-accent-gold);
  outline: none;
}

.bc-quick-bets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bc-quick {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.bc-quick:hover:not(:disabled) {
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
  background: rgba(200,155,60,0.08);
}

.bc-quick:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Betting mat ── */
.bc-mat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  background: #7a0000;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  border: 4px solid #500000;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.5), var(--shadow-lg);
}

.bc-symbol-zone {
  background: #9a0000;
  border: 3px solid #c0392b;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  position: relative;
  min-height: 110px;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
}

.bc-symbol-zone:hover:not(:disabled) {
  background: #b83232;
  border-color: var(--color-accent-gold);
  transform: scale(1.03);
}

.bc-symbol-zone:disabled {
  cursor: default;
}

.bc-symbol-zone.selected {
  background: #145214;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 18px rgba(200,155,60,0.45);
}

.bc-symbol-zone.matched {
  background: #0f5c0f;
  border-color: #4ade80;
  animation: bc-pulse 0.5s ease;
}

.bc-symbol-zone.lost {
  background: #3d0f0f;
  border-color: #555;
  opacity: 0.65;
}

@keyframes bc-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.bc-symbol-emoji {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  pointer-events: none;
}

/* SVG symbol images on the betting mat — full colour */
.bc-symbol-img {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-1);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
  pointer-events: none;
}

/* SVG images inside dice — full colour */
.bc-die img {
  width: 62px;
  height: 62px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
  pointer-events: none;
}

/* SVG images in result rows */
.bc-result-img {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 4px;
}

.bc-symbol-vn {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: white;
  text-align: center;
  pointer-events: none;
}

.bc-symbol-en {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
  text-align: center;
  pointer-events: none;
}

/* Bet chip — top-right corner of a selected zone */
.bc-bet-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--color-accent-gold);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 28px;
  text-align: center;
  pointer-events: none;
  line-height: 1.5;
}

/* Match count chip — shown after roll */
.bc-match-chip {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #4ade80;
  color: #0a2e0a;
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  pointer-events: none;
  line-height: 1.5;
}

/* ── Dice area ── */
.bc-dice-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.bc-dice-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.bc-dice-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.bc-die {
  width: 84px;
  height: 84px;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: var(--shadow-md);
  transition: border-color 200ms;
  user-select: none;
}

.bc-die.rolling {
  border-color: var(--color-accent-gold);
  animation: bc-die-roll 100ms infinite;
}

@keyframes bc-die-roll {
  0%   { transform: rotate(-4deg) scale(0.94); }
  50%  { transform: rotate(4deg) scale(1.06); }
  100% { transform: rotate(-4deg) scale(0.94); }
}

.bc-die.settled {
  border-color: var(--color-accent-gold);
  animation: bc-die-land 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bc-die-land {
  0%   { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── Action buttons row ── */
.bc-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Status message ── */
.bc-status {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 1.4em;
  font-style: italic;
}

/* ── Results panel ── */
.bc-results {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: none;
  animation: bc-slide-in 0.25s ease;
}

.bc-results.visible {
  display: block;
}

@keyframes bc-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bc-results-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-align: center;
  margin-bottom: var(--space-2);
}

.bc-results-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.bc-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-surface-alt);
}

.bc-result-item.win {
  background: rgba(15, 92, 15, 0.1);
  color: #0f5c0f;
}

.bc-result-item.loss {
  background: rgba(184,50,50,0.08);
  color: #9e2b2b;
}

.bc-net {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.bc-net.positive { color: #0f5c0f; }
.bc-net.negative { color: var(--color-accent-red); }

/* ── Game Over ── */
.bc-gameover {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  display: none;
  animation: bc-slide-in 0.3s ease;
}

.bc-gameover.visible {
  display: block;
}

.bc-gameover__emoji {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.bc-gameover h2 {
  font-size: var(--text-3xl);
  color: var(--color-accent-red);
  margin-bottom: var(--space-1);
}

.bc-gameover p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.bc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.bc-stat {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-1);
  text-align: center;
}

.bc-stat__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-gold);
  line-height: 1;
}

.bc-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Group-play: leaderboard ─────────────────────────────────────────────── */
.bc-leaderboard {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.bc-leaderboard__title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-gold);
  margin: 0 0 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bc-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bc-lb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.bc-lb-item--me { background: rgba(255,255,255,0.08); }
.bc-lb-rank { font-size: 1rem; width: 26px; flex-shrink: 0; text-align: center; }
.bc-lb-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800; color: #000;
  flex-shrink: 0;
}
.bc-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-lb-coins { font-weight: 700; color: var(--color-accent-gold); white-space: nowrap; }

/* ── Group-play: peer bet chips on symbol zones ──────────────────────────── */
.bc-peer-bets {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: 4px;
  min-height: 20px;
}
.bc-peer-chip {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800;
  color: #000;
  cursor: default;
  border: 1px solid rgba(0,0,0,0.2);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .bc-die {
    width: 68px;
    height: 68px;
    font-size: 2rem;
  }
  .bc-symbol-emoji {
    font-size: 2rem;
  }
  .bc-symbol-img {
    width: 44px;
    height: 44px;
  }
  .bc-die img {
    width: 50px;
    height: 50px;
  }
  .bc-symbol-zone {
    min-height: 90px;
  }
  .bc-stats {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Ô Ăn Quan — Phase 3
   Traditional Vietnamese lacquerware aesthetic
============================================================================= */

.oaq-game {
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
  color: #f0d8b0;
  background: radial-gradient(ellipse at 50% 15%, #2e1008 0%, #150404 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(240,216,176,0.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  min-height: 420px;
}

/* ── Turn banner ── */
.oaq-turn-banner {
  text-align: center;
  padding: 10px var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
}

.oaq-turn-banner.p1 {
  background: rgba(44, 120, 115, 0.18);
  color: #6ed8d0;
  border: 1px solid rgba(44, 120, 115, 0.38);
  box-shadow: 0 0 16px rgba(44,120,115,0.12), inset 0 1px 0 rgba(110,216,208,0.08);
}

.oaq-turn-banner.p2 {
  background: rgba(192, 64, 64, 0.18);
  color: #f07070;
  border: 1px solid rgba(192, 64, 64, 0.38);
  box-shadow: 0 0 16px rgba(192,64,64,0.12), inset 0 1px 0 rgba(240,112,112,0.08);
}

.oaq-turn-banner.gameover {
  background: rgba(200, 149, 42, 0.18);
  color: #f5cc50;
  border: 1px solid rgba(200, 149, 42, 0.45);
  box-shadow: 0 0 16px rgba(200,149,42,0.15);
}

/* ── Score bar ── */
.oaq-score-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(240,216,176,0.06);
  border-radius: var(--radius-lg);
}

.oaq-score-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.oaq-score-player__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240,216,176,0.4);
  font-weight: 600;
}

.oaq-score-player__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.oaq-score-player.p1 .oaq-score-player__num {
  color: #5bc8c0;
  text-shadow: 0 0 18px rgba(91,200,192,0.45);
}
.oaq-score-player.p2 .oaq-score-player__num {
  color: #e06060;
  text-shadow: 0 0 18px rgba(224,96,96,0.45);
}

.oaq-score-divider {
  font-size: var(--text-xl);
  color: rgba(240,216,176,0.14);
}

/* ── Board — lacquered Vietnamese wood ── */
.oaq-board {
  display: grid;
  grid-template-columns: 88px repeat(5, 1fr) 88px;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  background: linear-gradient(170deg, #4a1208 0%, #220604 55%, #350a06 100%);
  padding: 14px;
  border-radius: 22px;
  border: 3px solid #7a2a14;
  border-top-color: #a03820;
  box-shadow:
    0 14px 42px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,120,60,0.06),
    inset 0 2px 0 rgba(255,160,80,0.14),
    inset 0 -4px 16px rgba(0,0,0,0.65);
}

/* ── Quan pits (carved end stores) ── */
.oaq-quan {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(ellipse at 50% 25%, #1e0804 0%, #080101 80%);
  border: 2px solid #8a3818;
  border-top-color: #b84a22;
  border-radius: 50px;
  padding: 16px 8px;
  min-height: 148px;
  position: relative;
  box-shadow:
    inset 0 8px 24px rgba(0,0,0,0.95),
    inset 0 2px 8px rgba(0,0,0,0.8),
    0 0 20px rgba(180,80,20,0.15),
    0 4px 12px rgba(0,0,0,0.5);
}

.oaq-quan--p2 { grid-column: 1; }
.oaq-quan--p1 { grid-column: 7; }

.oaq-quan__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(240,216,176,0.35);
  font-weight: 700;
}

/* Seeds inside the quan — shift below the label, fill the rest of the pit */
.oaq-quan-seeds {
  inset: 26px 0 0 0 !important;
}

/* ── Small pits (oval, carved) ── */
.oaq-pit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 28%, #200804 0%, #080101 80%);
  border: 2px solid #5a1808;
  border-radius: 50%;
  min-height: 74px;
  cursor: default;
  transition: border-color 150ms, box-shadow 150ms, transform 120ms;
  position: relative;
  box-shadow:
    inset 0 6px 22px rgba(0,0,0,0.95),
    inset 0 2px 8px rgba(0,0,0,0.8),
    0 2px 5px rgba(0,0,0,0.4);
}

/* Clickable (valid moves for current player) */
.oaq-pit.clickable {
  cursor: pointer;
  border-color: #c8871a;
  box-shadow:
    inset 0 6px 22px rgba(0,0,0,0.85),
    0 0 8px rgba(200,135,26,0.2),
    0 2px 5px rgba(0,0,0,0.4);
}

.oaq-pit.clickable:hover {
  border-color: #f0a830;
  box-shadow:
    inset 0 5px 18px rgba(0,0,0,0.55),
    0 0 22px rgba(240,168,48,0.55),
    0 0 8px rgba(240,168,48,0.3),
    0 2px 5px rgba(0,0,0,0.4);
  transform: scale(1.06);
}

.oaq-pit.active {
  border-color: #f5cc50;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.5),
    0 0 24px rgba(245,204,80,0.4);
}

/* ── Round pebble seeds (absolute, circular arrangement) ── */
.oaq-seeds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.oaq-seed {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  left: calc(50% + var(--x, 0px) - 5.5px);
  top:  calc(50% + var(--y, 0px) - 5.5px);
  background: radial-gradient(circle at 38% 32%, #e8c87a 0%, #b07828 40%, #6a3e10 72%, #3a1e06 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,220,120,0.18);
}

.oaq-seed-none {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(200,100,30,0.05);
}

.oaq-seed-overflow {
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: #f0ddb0;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 1px 5px;
  pointer-events: none;
  z-index: 1;
}

.oaq-pit__count {
  position: absolute;
  bottom: 7px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: rgba(240,216,176,0.65);
  pointer-events: none;
  z-index: 1;
}

/* Pit flash when a seed lands */
.oaq-pit.sow-flash {
  animation: oaq-sow 260ms ease;
}

@keyframes oaq-sow {
  0%   { box-shadow: inset 0 5px 18px rgba(0,0,0,0.4), 0 0 18px rgba(232,160,48,0.55); }
  100% { box-shadow: inset 0 5px 18px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.35); }
}

/* ── Flying seed cluster — circular pit-like bubble of scattered seeds ── */
.oaq-fly-cluster {
  width: 58px;
  height: 58px;
  /* position:fixed + left/top + transform set inline by JS */
  background: radial-gradient(ellipse at 50% 30%, #200804 0%, #080101 82%);
  border: 1.5px solid rgba(200,135,26,0.55);
  border-radius: 50%;
  box-shadow:
    0 0 22px rgba(200,135,26,0.4),
    0 4px 14px rgba(0,0,0,0.7),
    inset 0 3px 10px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 9999;
  /* Seeds inside use position:absolute relative to this fixed element */
}

/* ── Status ── */
.oaq-status {
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(240,216,176,0.45);
  font-style: italic;
  min-height: 1.4em;
}

/* ── Move log ── */
.oaq-log {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(240,216,176,0.07);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.oaq-log__title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240,216,176,0.28);
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.oaq-log__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.oaq-log__entry {
  font-size: 11px;
  color: rgba(240,216,176,0.42);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.oaq-log__entry:last-child { border-bottom: none; }
.oaq-log__entry.p1 { color: #5bc8c0; }
.oaq-log__entry.p2 { color: #e06060; }

/* ── Actions ── */
.oaq-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.oaq-actions .btn {
  border: 2px solid rgba(200,135,26,0.45);
  background: rgba(200,135,26,0.1);
  color: #f0d8b0;
  border-radius: var(--radius-md);
  padding: 9px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.oaq-actions .btn:hover {
  background: rgba(200,135,26,0.22);
  border-color: #c8871a;
}

/* ── Game over ── */
.oaq-gameover {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  display: none;
  animation: oaq-fadein 0.35s ease;
}

.oaq-gameover.visible { display: block; }

@keyframes oaq-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.oaq-gameover__icon { font-size: 3.5rem; line-height: 1; margin-bottom: var(--space-2); }

.oaq-gameover h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-display);
  color: #f0c050;
  margin-bottom: var(--space-1);
}

.oaq-gameover p { color: rgba(240,216,176,0.5); margin-bottom: var(--space-4); }

.oaq-final-scores {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.oaq-final-score { text-align: center; }

.oaq-final-score__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.oaq-final-score.p1 .oaq-final-score__num { color: #5bc8c0; }
.oaq-final-score.p2 .oaq-final-score__num { color: #e06060; }
.oaq-final-score__label { font-size: var(--text-xs); color: rgba(240,216,176,0.38); margin-top: 4px; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .oaq-board {
    grid-template-columns: 56px repeat(5, 1fr) 56px;
    gap: 5px;
    padding: 10px;
  }
  .oaq-quan { min-height: 100px; border-radius: 36px; padding: 12px 6px; }
  .oaq-quan__count { font-size: 2.4rem; }
  .oaq-score-player__num { font-size: var(--text-2xl); }
  .oaq-pit { min-height: 52px; }
  .oaq-seed { width: 8px; height: 8px; left: calc(50% + var(--x, 0px) - 4px); top: calc(50% + var(--y, 0px) - 4px); }
  .oaq-fly-cluster { width: 30px; height: 30px; font-size: 12px; }
}

/* =============================================================================
   Tiến Lên — Phase 4
============================================================================= */

/* ── Outer wrapper ── */
.tl-game {
  padding: var(--space-4);
  background: radial-gradient(ellipse at 50% 25%, #1d5c34 0%, #0a3018 100%);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ── Status bar ── */
.tl-status-bar {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(210,240,190,0.65);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 250ms, border-color 250ms, color 250ms;
}

.tl-status-bar.your-turn {
  background: rgba(28,105,52,0.45);
  border-color: rgba(100,220,120,0.3);
  color: #b4f0a0;
}

/* ── AI thinking dots ── */
.tl-thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.tl-thinking-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: tl-dot 1.2s ease-in-out infinite;
}

.tl-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.tl-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes tl-dot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Table grid: top | [left | center | right] ── */
.tl-table {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  gap: var(--space-2);
}

/* ── Opponent zones ── */
.tl-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tl-zone--top   { grid-column: 1 / 4; }
.tl-zone--left  { grid-column: 1;     }
.tl-center      { grid-column: 2;     }
.tl-zone--right { grid-column: 3;     }

.tl-zone__name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(200,230,175,0.48);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.tl-zone__name.active { color: #98ed6a; }

.tl-zone__count {
  font-size: 10px;
  color: rgba(200,220,175,0.38);
}

/* ── Card backs ── */
.tl-card-back {
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 7px),
    linear-gradient(140deg, #1e3d72, #0e2248);
  border: 1.5px solid rgba(110,155,230,0.28);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.tl-card-back--sm { width: 22px; height: 30px; border-radius: 4px; }
.tl-card-back--xs { width: 16px; height: 22px; border-radius: 3px; }

/* Top AI: horizontal row */
.tl-opp-cards--top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

/* Side AIs: vertical stack with overlap */
.tl-opp-cards--side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-opp-cards--side .tl-card-back--xs:not(:first-child) {
  margin-top: -10px;
}

/* ── Center play area ── */
.tl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 130px;
}

.tl-play-area {
  width: 100%;
  min-height: 94px;
  background: rgba(0,0,0,0.28);
  border: 2px dashed rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: var(--space-2) var(--space-3);
  transition: border-color 300ms;
}

.tl-play-area.has-cards { border-color: rgba(200,215,110,0.18); }

.tl-play-area-empty {
  font-size: 11px;
  color: rgba(200,220,175,0.22);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  pointer-events: none;
}

.tl-play-info {
  font-size: 10px;
  color: rgba(200,220,175,0.38);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Face-up cards ── */
.tl-card {
  width: 48px;
  height: 68px;
  border-radius: 7px;
  background: #fefefe;
  border: 1.5px solid rgba(0,0,0,0.13);
  box-shadow: 0 3px 9px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.95);
  position: relative;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tl-card--red   { color: #c81414; }
.tl-card--black { color: #111;    }

/* Card corners */
.tl-card__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.tl-card__corner--tl { top: 3px;    left: 4px;  }
.tl-card__corner--br { bottom: 3px; right: 4px; transform: rotate(180deg); }

.tl-card__rank   { font-size: 13px; font-weight: 700; line-height: 1.05; }
.tl-card__suit-s { font-size: 9px;  line-height: 1; }

/* Center suit glyph */
.tl-card__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

/* Play-area cards: slightly smaller, rotated like a card stack */
.tl-play-area .tl-card {
  width: 44px;
  height: 62px;
  transform: rotate(var(--rot, 0deg));
  transition: none;
}
.tl-play-area .tl-card__rank   { font-size: 12px; }
.tl-play-area .tl-card__center { font-size: 19px; }

/* ── Card states ── */
.tl-card.selected {
  transform: translateY(-10px);
  border-color: #58d838;
  box-shadow: 0 8px 22px rgba(55,200,35,0.55), inset 0 1px 0 rgba(255,255,255,0.95);
}

.tl-card.clickable { cursor: pointer; }

.tl-card.clickable:hover:not(.selected) {
  transform: translateY(-5px);
  border-color: #88d870;
  box-shadow: 0 6px 16px rgba(55,200,35,0.3), inset 0 1px 0 rgba(255,255,255,0.95);
}

/* ── Deal animation (first render only) ── */
.tl-card.dealing {
  animation: tl-deal 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--deal-i, 0) * 70ms);
}

@keyframes tl-deal {
  from { opacity: 0; transform: translateY(-30px) scale(0.84); }
  to   { opacity: 1; transform: none; }
}

/* ── Played-in animation (cards hitting the table) ── */
.tl-card.played-in {
  animation: tl-play-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--play-i, 0) * 80ms);
}

@keyframes tl-play-in {
  from { opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, -40px)) scale(0.65); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

/* ── 2× Speed overrides ── */
.tl-fast .tl-card.dealing {
  animation-duration: 300ms;
  animation-delay: calc(var(--deal-i, 0) * 45ms);
}
.tl-fast .tl-card.played-in {
  animation-duration: 230ms;
  animation-delay: calc(var(--play-i, 0) * 55ms);
}

/* ── Player hand ── */
.tl-player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tl-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.07);
  width: 100%;
  min-height: 90px;
  align-items: flex-end;
}

/* ── Hand-type hint ── */
.tl-hint {
  font-size: 11px;
  min-height: 1.6em;
  text-align: center;
  color: rgba(200,220,175,0.45);
  font-style: italic;
  transition: color 150ms;
}

.tl-hint.valid   { color: #88e058; font-style: normal; }
.tl-hint.invalid { color: #e06060; font-style: normal; }

/* ── Actions ── */
.tl-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tl-actions__main {
  display: flex;
  gap: var(--space-6);
}

.tl-actions__secondary {
  display: flex;
  gap: var(--space-2);
}

/* ── Game-specific buttons (visible on dark felt) ── */
.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.tl-btn:active { transform: translateY(1px); }

.tl-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

/* Play — solid green */
.tl-btn--play {
  background: #2a7a3a;
  color: #fff;
  border-color: #3caa52;
}
.tl-btn--play:not(:disabled):hover {
  background: #32914a;
  border-color: #5ccb70;
  transform: translateY(-2px);
}

/* Pass — outlined white */
.tl-btn--pass {
  background: transparent;
  color: rgba(220, 240, 210, 0.9);
  border-color: rgba(200, 230, 190, 0.45);
}
.tl-btn--pass:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(200, 230, 190, 0.8);
  transform: translateY(-2px);
}

/* Ghost — subtle, clearly boxed */
.tl-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(210, 230, 200, 0.75);
  border-color: rgba(200, 220, 190, 0.3);
  font-size: 12px;
  padding: 7px 14px;
}
.tl-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(200, 220, 190, 0.6);
  color: rgba(220, 240, 210, 0.95);
}

/* 2× Speed — active/on state */
.tl-speed-btn.active {
  background: rgba(255, 210, 50, 0.15);
  border-color: rgba(255, 210, 50, 0.55);
  color: #ffd232;
}

/* ── Game log ── */
.tl-log {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  max-height: 108px;
  overflow-y: auto;
}

.tl-log::-webkit-scrollbar { width: 4px; }
.tl-log::-webkit-scrollbar-track { background: transparent; }
.tl-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.tl-log__title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(200,220,175,0.36);
  margin-bottom: 4px;
  font-weight: var(--weight-semibold);
}

.tl-log__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-log__entry {
  font-size: 11px;
  color: rgba(180,210,155,0.52);
  padding: 1px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.tl-log__entry:last-child { border-bottom: none; }
.tl-log__entry.you { color: #84e84e; }
.tl-log__entry.sys { color: rgba(210,200,120,0.55); font-style: italic; }

/* ── Game over ── */
.tl-gameover {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-8);
  animation: tl-go-in 0.4s ease both;
}

.tl-gameover.visible { display: flex; }

@keyframes tl-go-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.tl-gameover__icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--space-3);
  animation: tl-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

@keyframes tl-icon-pop {
  from { transform: scale(0.15); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.tl-gameover h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent-gold);
  margin-bottom: var(--space-1);
}

.tl-gameover p {
  color: rgba(200,230,175,0.6);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .tl-table { grid-template-columns: 62px 1fr 62px; }

  .tl-card { width: 38px; height: 54px; }
  .tl-card__rank   { font-size: 11px; }
  .tl-card__suit-s { font-size: 8px;  }
  .tl-card__center { font-size: 17px; }

  .tl-play-area .tl-card { width: 36px; height: 50px; }
  .tl-play-area .tl-card__center { font-size: 15px; }

  .tl-card-back--sm { width: 17px; height: 23px; }
  .tl-card-back--xs { width: 13px; height: 18px; }

  .tl-play-area { min-height: 74px; }
  .tl-hand { min-height: 72px; }
}

/* =============================================================================
   Oware — Phase 5
============================================================================= */

.ow-game {
  background: radial-gradient(ellipse at 50% 20%, #3d1f0a 0%, #1a0b04 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 400px;
  color: #e8c898;
  font-family: var(--font-body);
}

/* ── Status bar ── */
.ow-status {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e8c898;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-full);
  padding: 8px var(--space-4);
}

/* ── AI thinking dots ── */
.ow-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8871a;
  margin: 0 2px;
  vertical-align: middle;
  animation: ow-dot 1.2s infinite;
}
.ow-dots span:nth-child(2) { animation-delay: 0.2s; }
.ow-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ow-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.3); }
}

/* ── Board layout ── */
.ow-board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ow-board {
  background: linear-gradient(170deg, #3d1f0a 0%, #1c0d03 55%, #2e1508 100%);
  border-radius: 24px;
  padding: var(--space-3) var(--space-4);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,200,100,0.1),
    inset 0 -3px 12px rgba(0,0,0,0.5),
    inset 4px 0 10px rgba(0,0,0,0.2),
    inset -4px 0 10px rgba(0,0,0,0.2);
  border: 2px solid #5c3015;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ow-row {
  display: flex;
  gap: 10px;
}

.ow-row-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(232,200,152,0.35);
  text-align: center;
}

.ow-divider {
  height: 2px;
  margin: 2px 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(180,100,30,0.45) 20%,
    rgba(180,100,30,0.45) 80%,
    transparent
  );
}

/* ── Score stores ── */
.ow-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}

.ow-store__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(232,200,152,0.5);
}

.ow-store__val {
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffd580;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255,200,80,0.4);
}

.ow-store__sub {
  font-size: 9px;
  color: rgba(232,200,152,0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Pits ── */
.ow-pit {
  width: 84px;
  height: 88px;
  background: #1e0e04;
  border-radius: 50%;
  border: 2px solid #5c3015;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.75),
    0 2px 4px rgba(0,0,0,0.45);
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Seeds container fills the pit; seeds are placed absolutely within it */
.ow-pit__seeds {
  position: absolute;
  inset: 0;
}

.ow-seed {
  position: absolute;
  width: 6px;
  height: 12px;
  border-radius: 50%;
  /* Offset from pit centre using --x / --y; rotate via --rot */
  left: calc(50% + var(--x, 0px) - 3px);
  top:  calc(50% + var(--y, 0px) - 6px);
  transform: rotate(var(--rot, 0deg));
  /* Warm dark-brown gradient — dried Ayo seed */
  background: linear-gradient(160deg, #c07818 0%, #7a3e08 45%, #4a2208 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,90,0.18);
}

/* The seed that just landed pops in */
.ow-seed--new {
  animation: ow-seed-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ow-seed-in {
  from { transform: rotate(var(--rot, 0deg)) scale(0); opacity: 0; }
  to   { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}

/* Count badge at the bottom of the pit */
.ow-pit__count {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: rgba(232,200,152,0.55);
  line-height: 1;
  pointer-events: none;
}

/* Clickable pits (valid player moves) */
.ow-pit--clickable {
  cursor: pointer;
  border-color: #8b5020;
}
.ow-pit--clickable:hover {
  border-color: #c8871a;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.5),
    0 0 18px rgba(200,135,26,0.45),
    0 2px 4px rgba(0,0,0,0.45);
}
.ow-pit--clickable .ow-pit__count { color: rgba(232,200,152,0.85); }

/* Last-sown pit — glows amber */
.ow-pit--lit {
  border-color: #e8a030;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.4),
    0 0 22px rgba(232,160,48,0.65),
    0 2px 4px rgba(0,0,0,0.45);
  animation: ow-receive 200ms ease-out;
}

@keyframes ow-receive {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

/* AI-selected pit — pulsing red-orange before sowing starts */
.ow-pit--ai-select {
  border-color: #e04020;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.4),
    0 0 22px rgba(224,64,32,0.7),
    0 2px 4px rgba(0,0,0,0.45);
  animation: ow-ai-select 0.55s ease-in-out infinite alternate;
}

@keyframes ow-ai-select {
  from { box-shadow: inset 0 4px 14px rgba(0,0,0,0.4), 0 0 12px rgba(224,64,32,0.45); }
  to   { box-shadow: inset 0 4px 14px rgba(0,0,0,0.25), 0 0 30px rgba(224,64,32,0.85); }
}

/* ── Actions ── */
.ow-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ow-difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ow-difficulty__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232,200,152,0.45);
}

.ow-diff-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(200,135,26,0.3);
  background: rgba(200,135,26,0.07);
  color: rgba(232,200,152,0.55);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ow-diff-btn:hover {
  background: rgba(200,135,26,0.18);
  border-color: rgba(200,135,26,0.55);
  color: rgba(232,200,152,0.9);
}
.ow-diff-btn.active {
  background: rgba(200,135,26,0.2);
  border-color: #c8871a;
  color: #ffd580;
}

.ow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 2px solid rgba(200,135,26,0.38);
  background: rgba(200,135,26,0.1);
  color: #e8c898;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.ow-btn:hover {
  background: rgba(200,135,26,0.22);
  border-color: rgba(200,135,26,0.7);
}

.ow-btn--primary {
  background: #7a3e10;
  border-color: #c8871a;
  color: #ffe8b0;
}
.ow-btn--primary:hover {
  background: #994e18;
  border-color: #e8a030;
  transform: translateY(-2px);
}

/* ── Game log ── */
.ow-log {
  background: rgba(0,0,0,0.22);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.ow-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 80px;
  overflow-y: auto;
}
.ow-log li {
  font-size: 11px;
  color: rgba(232,200,152,0.55);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ow-log li:first-child { color: rgba(232,200,152,0.9); }

/* ── Game over ── */
.ow-gameover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 360px;
  text-align: center;
}

.ow-gameover__icon {
  font-size: 4.5rem;
  animation: ow-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}

@keyframes ow-pop {
  from { transform: scale(0.1); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.ow-gameover h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: #ffd580;
  margin: 0;
}

.ow-gameover p {
  font-size: var(--text-sm);
  color: rgba(232,200,152,0.65);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .ow-pit { width: 54px; height: 58px; }
  .ow-seed { width: 5px; height: 10px; left: calc(50% + var(--x, 0px) - 2.5px); top: calc(50% + var(--y, 0px) - 5px); }
  .ow-pit__count { font-size: 10px; }
  .ow-row { gap: 5px; }
  .ow-board { padding: var(--space-2) var(--space-2); }
  .ow-store { min-width: 44px; }
  .ow-store__val { font-size: 1.7rem; }
}

/* =============================================================================
   Patolli — Phase 6
============================================================================= */

.pt-game-wrap {
  --pt-jade:       #1a4a2e;
  --pt-jade-mid:   #22593a;
  --pt-jade-light: #2d7a4f;
  --pt-gold:       #c9952a;
  --pt-gold-light: #f0c050;
  --pt-gold-dim:   rgba(240,192,80,0.55);
  --pt-terra:      #6b2505;
  --pt-terra-mid:  #8b3a10;
  --pt-player:     #2a8fb5;
  --pt-ai:         #c04a18;
  --pt-safe:       #4a8e28;
  --pt-bg:         #091e10;
  --pt-bg-mid:     #0d2615;

  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
  background: radial-gradient(ellipse at 50% 0%, #0f2e18 0%, var(--pt-bg) 70%);
  color: var(--pt-gold-light);
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid rgba(201,149,42,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* ── Board ──────────────────────────────────────────────────────────────── */
.pt-board {
  display: grid;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 1rem;
  gap: 3px;
  padding: 8px;
  background: #020c05;
  border-radius: 10px;
  border: 2px solid rgba(201,149,42,0.45);
  box-shadow:
    0 0 0 1px rgba(201,149,42,0.1),
    inset 0 0 50px rgba(0,0,0,0.9),
    0 8px 30px rgba(0,0,0,0.7);
}

.pt-cell {
  background: linear-gradient(150deg, #1d5230 0%, #112e1b 100%);
  border: 1px solid rgba(201,149,42,0.18);
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 3px rgba(0,0,0,0.4);
}

/* Safe zones: gold diamond marker */
.pt-cell--safe {
  background: linear-gradient(150deg, #1d5230 0%, #112e1b 100%);
  border-color: rgba(201,149,42,0.5);
  box-shadow:
    inset 0 0 0 1px rgba(240,192,80,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 3px rgba(0,0,0,0.4);
}

.pt-cell--safe::before {
  content: '';
  position: absolute;
  width: 32%;
  aspect-ratio: 1;
  background: rgba(201,149,42,0.55);
  border: 1px solid rgba(240,192,80,0.4);
  border-radius: 2px;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}

/* Safe cell with a piece: hide the diamond so piece is visible */
.pt-cell--safe:not(:empty) > .pt-cell--safe::before { display: none; }

/* ── Start cell (track index 0) ── */
.pt-cell--start {
  border-color: rgba(255,215,50,0.95) !important;
  background: linear-gradient(150deg, #2e7d45 0%, #1a4528 100%) !important;
  animation: pt-start-pulse 2.2s ease-in-out infinite;
}

@keyframes pt-start-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255,205,40,0.25), inset 0 0 0 1px rgba(255,215,50,0.3); }
  50%       { box-shadow: 0 0 16px rgba(255,205,40,0.65), inset 0 0 0 1px rgba(255,215,50,0.7); }
}

/* Hide the safe-zone diamond on the start cell */
.pt-cell--start.pt-cell--safe::before {
  display: none;
}

/* "▶ START" label — sits behind pieces (z-index 0) */
.pt-cell--start::after {
  content: 'START';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6px;
  font-weight: 800;
  color: rgba(255,215,50,0.92);
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.pt-cell--empty {
  background: transparent;
  border: none;
  pointer-events: none;
  box-shadow: none;
}

/* Valid: just cursor change, no persistent glow */
/* Landing preview: pulsing blue-white glow — only on hover */
@keyframes pt-pulse-preview {
  0%, 100% { box-shadow: 0 0 0 2px rgba(160,230,255,0.9), 0 0 10px rgba(160,230,255,0.4), inset 0 0 8px rgba(160,230,255,0.15); }
  50%      { box-shadow: 0 0 0 3px #ffffff, 0 0 20px rgba(200,240,255,0.7), inset 0 0 12px rgba(200,240,255,0.25); }
}

.pt-cell--preview {
  animation: pt-pulse-preview 0.75s ease infinite;
  background: linear-gradient(150deg, rgba(100,200,240,0.2) 0%, rgba(60,150,200,0.12) 100%) !important;
  border-color: rgba(160,230,255,0.6) !important;
}

/* Multiple pieces stacked */
.pt-cell--multi {
  flex-wrap: wrap;
  gap: 1px;
  padding: 3px;
}

.pt-cell--multi .pt-piece {
  width: 43%;
}

/* ── Pieces ─────────────────────────────────────────────────────────────── */
.pt-piece {
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
}

.pt-piece--player {
  background:
    radial-gradient(circle at 32% 28%, rgba(160,230,255,0.9) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #3ab0d8 0%, #1a6890 45%, #0d3d56 100%);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.7),
    0 0 0 1px rgba(100,200,255,0.25),
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.4);
}

.pt-piece--ai {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,180,120,0.9) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #e06030 0%, #952010 45%, #5a0e05 100%);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,130,60,0.25),
    inset 0 1px 2px rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.4);
}

.pt-piece--moving {
  transform: scale(1.4);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.8),
    0 0 0 2px rgba(255,255,255,0.4),
    inset 0 1px 2px rgba(255,255,255,0.5);
}

/* Hovered valid piece: bright ring + slight lift */
@keyframes pt-piece-hover {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,0.9), inset 0 1px 2px rgba(255,255,255,0.5); }
}

.pt-piece--hovered {
  transform: scale(1.2);
  cursor: pointer;
  animation: pt-piece-hover 0.8s ease infinite;
  z-index: 2;
}

.pt-cell--valid {
  cursor: pointer;
}

/* ── Beans ──────────────────────────────────────────────────────────────── */
.pt-dice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0.4rem;
  flex-wrap: wrap;
  min-height: 3rem;
}

.pt-bean {
  width: 2.6rem;
  height: 1.55rem;
  /* organic bean shape */
  border-radius: 55% 45% 48% 52% / 62% 58% 42% 38%;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(180,80,20,0.6) 0%, transparent 55%),
    linear-gradient(160deg, #8b3a10 0%, #5a1e06 55%, #3a0f03 100%);
  border: none;
  box-shadow:
    0 2px 5px rgba(0,0,0,0.7),
    inset 0 1px 1px rgba(255,160,60,0.15),
    inset 0 -1px 2px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease;
}

/* The white dot/line on the blank bean (natural bean marking) */
.pt-bean::before {
  content: '';
  position: absolute;
  width: 55%;
  height: 2px;
  background: rgba(255,200,120,0.18);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

/* Marked bean: gold face */
.pt-bean--marked {
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,240,150,0.8) 0%, transparent 55%),
    linear-gradient(160deg, #e8b030 0%, #c07818 50%, #8a4a08 100%);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.6),
    0 0 8px rgba(240,192,80,0.35),
    inset 0 1px 2px rgba(255,255,200,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.3);
}

/* The circle mark on a marked bean */
.pt-bean--marked::after {
  content: '';
  position: absolute;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(80,30,0,0.6);
  border: 1px solid rgba(80,30,0,0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pt-bean--marked::before { display: none; }

@keyframes pt-flip {
  0%   { transform: rotateY(0deg)   scaleX(1);   }
  40%  { transform: rotateY(80deg)  scaleX(0.2); }
  60%  { transform: rotateY(-80deg) scaleX(0.2); }
  100% { transform: rotateY(0deg)   scaleX(1);   }
}

.pt-bean--rolling {
  animation: pt-flip 0.4s ease;
}

.pt-roll-total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pt-gold-light);
  margin-left: 0.4rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(240,192,80,0.4);
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.pt-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.25rem;
}

.pt-btn {
  cursor: pointer;
  padding: 0.55rem 1.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  background: linear-gradient(160deg, #3d8a50 0%, #1e5230 100%);
  color: var(--pt-gold-light);
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.1s;
  outline-offset: 3px;
}

.pt-btn:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}

.pt-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.pt-btn--secondary {
  background: transparent;
  border: 1px solid rgba(201,149,42,0.35);
  color: var(--pt-gold-dim);
  box-shadow: none;
}

.pt-btn--secondary:hover:not(:disabled) {
  border-color: var(--pt-gold);
  color: var(--pt-gold-light);
  background: rgba(201,149,42,0.08);
  box-shadow: none;
}

.pt-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.pt-mode-row {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.pt-btn--mode {
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(201,149,42,0.3);
  color: rgba(201,149,42,0.5);
  box-shadow: none;
  letter-spacing: 0.05em;
}
.pt-btn--mode:hover:not(:disabled) {
  border-color: rgba(201,149,42,0.6);
  color: var(--pt-gold-dim);
  background: rgba(201,149,42,0.07);
  transform: none;
  box-shadow: none;
  filter: none;
}
.pt-btn--mode.active {
  border-color: var(--pt-gold);
  color: var(--pt-gold-light);
  background: rgba(201,149,42,0.12);
}

/* ── Status ─────────────────────────────────────────────────────────────── */
.pt-status {
  text-align: center;
  font-size: 1rem;
  min-height: 1.8em;
  color: var(--pt-gold-light);
  margin: 0.3rem 0;
  letter-spacing: 0.01em;
}

/* ── Score ──────────────────────────────────────────────────────────────── */
.pt-score {
  display: flex;
  gap: 0;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--pt-gold-dim);
  margin: 0.2rem 0 0.6rem;
  flex-wrap: wrap;
  border: 1px solid rgba(201,149,42,0.18);
  border-radius: 6px;
  overflow: hidden;
}

.pt-score > span {
  flex: 1;
  min-width: 180px;
  padding: 0.45rem 1rem;
  text-align: center;
  background: rgba(0,0,0,0.2);
}

.pt-score > span + span {
  border-left: 1px solid rgba(201,149,42,0.18);
}

.pt-score__label {
  font-weight: 700;
}

/* ── Log ────────────────────────────────────────────────────────────────── */
.pt-log {
  max-height: 110px;
  overflow-y: auto;
  font-size: 0.76rem;
  color: rgba(240,192,80,0.4);
  list-style: none;
  padding: 0.4rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(201,149,42,0.15);
}

.pt-log li {
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(201,149,42,0.06);
}

.pt-log li:first-child {
  color: rgba(240,192,80,0.85);
}

/* ── Game over ──────────────────────────────────────────────────────────── */
@keyframes pt-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1);   opacity: 1; }
}

.pt-gameover {
  text-align: center;
  padding: 0.75rem 1rem;
  animation: pt-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.pt-gameover__title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pt-gold-light);
  text-shadow: 0 0 20px rgba(240,192,80,0.5);
  margin-bottom: 0.2rem;
}

.pt-gameover__sub {
  color: var(--pt-gold-dim);
  font-size: 0.92rem;
}

/* ── Thinking dots ──────────────────────────────────────────────────────── */
.pt-thinking {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}

.pt-thinking span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pt-gold);
  animation: pt-dot 1s infinite;
}

.pt-thinking span:nth-child(2) { animation-delay: 0.2s; }
.pt-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pt-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1.2); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pt-bean        { width: 2rem; height: 1.2rem; }
  .pt-btn         { padding: 0.45rem 1rem; font-size: 0.88rem; }
  .pt-roll-total  { font-size: 1rem; }
  .pt-status      { font-size: 0.9rem; }
  .pt-board       { gap: 2px; padding: 4px; }
  .pt-score > span { min-width: 140px; font-size: 0.8rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PULUC — Maya / Mesoamerica
   Prefix: pu-
   Theme:  deep forest green · jade · raw linen
════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────────── */
.pu-game-wrap {
  --pu-bg:          #16270d;
  --pu-board-frame: #0c1a06;
  --pu-space:       #233f17;
  --pu-space-alt:   #1e3813;
  --pu-border:      rgba(120, 185, 70, 0.2);
  --pu-player:      #f0e0a0;
  --pu-ai:          #9b2c2c;
  --pu-selected:    #ffe066;
  --pu-stick:       #5a3e18;
  --pu-stick-1:     #ddb84a;
  --pu-gold:        #c8a050;
  --pu-gold-light:  #f0d080;
  --pu-gold-dim:    rgba(200, 160, 80, 0.55);
  --pu-text:        #cdc08a;
}

/* ── Outer wrap ──────────────────────────────────────────────────────── */
.pu-game-wrap {
  background: var(--pu-bg);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* let children fill the full width */
  gap: 0.9rem;
  color: var(--pu-text);
  font-family: var(--font-body, 'Inter', sans-serif);
  width: 100%;
  box-sizing: border-box;
}

/* ── Track outer shell (column: board + entry row) ───────────────────── */
.pu-track {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

/* ── Board strip — the 11 cells ──────────────────────────────────────── */
.pu-board {
  display: flex;
  gap: 4px;
  background: var(--pu-board-frame);
  border: 2px solid rgba(100, 160, 55, 0.28);
  border-radius: 12px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  /* subtle inner glow to suggest carved wood */
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}

/* ── Individual track spaces ─────────────────────────────────────────── */
.pu-space {
  flex: 1;
  min-width: 0;           /* allow shrinking below content size */
  height: 6rem;
  background: var(--pu-space);
  border: 1px solid rgba(90, 145, 45, 0.18);
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column-reverse;  /* pieces stack from bottom upward */
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px 18px;
  gap: 3px;
  box-sizing: border-box;
  /* inset shadow gives a "carved pit" feel */
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.45);
  transition: background 0.12s;
}

.pu-space:nth-child(even) { background: var(--pu-space-alt); }

/* Small space number at the bottom */
.pu-space__num {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  color: rgba(140, 200, 90, 0.28);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

/* First and last spaces — entry/exit accent */
.pu-space[data-pos="0"]  { border-color: rgba(200,240,120,0.25); }
.pu-space[data-pos="10"] { border-color: rgba(200,100,80,0.25); }

/* ── Pieces ──────────────────────────────────────────────────────────── */
.pu-piece {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.12s, box-shadow 0.12s;
}

.pu-piece--player {
  background: radial-gradient(circle at 35% 30%, #fff8d8 0%, #e8d080 45%, #b08830 100%);
  border: 2px solid rgba(200, 160, 50, 0.75);
  box-shadow: 0 2px 5px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,200,0.3);
}

.pu-piece--ai {
  background: radial-gradient(circle at 35% 30%, #d04040 0%, #8b1c1c 50%, #4a0a0a 100%);
  border: 2px solid rgba(160, 50, 50, 0.75);
  box-shadow: 0 2px 5px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,150,150,0.15);
}

/* Prisoner — smaller, dimmer, shown underneath lead piece */
.pu-piece--prisoner {
  width: 1.45rem;
  height: 1.45rem;
  opacity: 0.48;
  z-index: 0;
}

/* Waiting (off-board, not yet entered) */
.pu-piece--waiting {
  width: 1.55rem;
  height: 1.55rem;
  opacity: 0.72;
}

/* Scored (permanently exited) */
.pu-piece--scored {
  width: 1.55rem;
  height: 1.55rem;
  opacity: 0.28;
  border-style: dashed;
}

/* Selectable — gold glow + pointer */
.pu-piece--selectable {
  cursor: pointer;
  animation: pu-pulse 1.3s ease-in-out infinite;
}

@keyframes pu-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--pu-selected), 0 0 6px  rgba(255,220,80,0.4); }
  50%       { box-shadow: 0 0 0 4px var(--pu-selected), 0 0 16px rgba(255,220,80,0.7); }
}

/* ── Entry zones (below board) ───────────────────────────────────────── */
.pu-entry-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.pu-offboard {
  flex: 0 1 48%;
  max-width: 48%;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--pu-border);
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pu-offboard--selectable {
  cursor: pointer;
  border-color: rgba(255, 220, 80, 0.7);
  box-shadow: 0 0 0 2px rgba(255,220,80,0.3), 0 0 14px rgba(255,220,80,0.25);
  animation: pu-zone-pulse 1.3s ease-in-out infinite;
}

@keyframes pu-zone-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,220,80,0.35), 0 0 8px  rgba(255,220,80,0.2); }
  50%       { box-shadow: 0 0 0 3px rgba(255,220,80,0.55), 0 0 20px rgba(255,220,80,0.4); }
}

.pu-offboard__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pu-offboard--ai .pu-offboard__head { flex-direction: row-reverse; }

.pu-offboard__name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pu-gold-dim);
}

.pu-offboard__dir {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(140, 200, 90, 0.4);
}

.pu-offboard__pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ── Stick dice ──────────────────────────────────────────────────────── */
.pu-dice-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

/* The four sticks laid out in a row */
.pu-sticks {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

/* A single stick — tall narrow slab, like carved wood/bone */
.pu-stick {
  width: 1.05rem;
  height: 4rem;
  border-radius: 10px 10px 8px 8px;
  position: relative;
  /* blank side: dark, dense wood grain */
  background: linear-gradient(
    to right,
    #2c1a08 0%,
    #47300e 22%,
    #3a2409 44%,
    #512e0d 66%,
    #3a2409 80%,
    #2c1a08 100%
  );
  border: 1px solid rgba(30, 15, 5, 0.9);
  box-shadow:
    3px 4px 8px rgba(0,0,0,0.65),
    inset 1px 0 2px rgba(255,255,255,0.04),
    inset -1px 0 1px rgba(0,0,0,0.3);
  transition: background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

/* marked side: lighter heartwood, clearly painted/carved */
.pu-stick--marked {
  background: linear-gradient(
    to right,
    #8a5c18 0%,
    #c8902a 22%,
    #b07820 44%,
    #d4a030 66%,
    #b07820 80%,
    #8a5c18 100%
  );
  border-color: rgba(140, 90, 15, 0.85);
  box-shadow:
    3px 4px 8px rgba(0,0,0,0.5),
    inset 1px 0 3px rgba(255,220,140,0.18),
    0 0 10px rgba(200,155,40,0.25);
}

/* Carved stripe mark on the light face */
.pu-stick--marked::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 248, 210, 0.9);
  box-shadow: 0 0 5px rgba(255, 240, 180, 0.7);
}

/* Small dot at midpoint of blank face for symmetry with marked */
.pu-stick:not(.pu-stick--marked)::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.04);
}

.pu-roll-total {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pu-gold-light);
  letter-spacing: 0.05em;
  text-align: center;
}

/* ── Controls ────────────────────────────────────────────────────────── */
.pu-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pu-mode-row {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.pu-btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid var(--pu-gold);
  border-radius: 8px;
  background: rgba(200,160,80,0.13);
  color: var(--pu-gold-light);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.14s, border-color 0.14s, opacity 0.14s;
}

.pu-btn:hover:not(:disabled) { background: rgba(200,160,80,0.25); }
.pu-btn:disabled              { opacity: 0.35; cursor: not-allowed; }

.pu-btn--secondary {
  border-color: rgba(200,160,80,0.3);
  background: transparent;
  color: var(--pu-gold-dim);
}
.pu-btn--secondary:hover:not(:disabled) {
  border-color: var(--pu-gold);
  color: var(--pu-gold-light);
  background: rgba(200,160,80,0.1);
}

.pu-btn--mode {
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(200,160,80,0.22);
  color: rgba(200,160,80,0.42);
  box-shadow: none;
}
.pu-btn--mode.active {
  border-color: var(--pu-gold);
  color: var(--pu-gold-light);
  background: rgba(200,160,80,0.14);
}

/* ── Status ──────────────────────────────────────────────────────────── */
.pu-status {
  font-size: 0.95rem;
  color: var(--pu-gold-light);
  text-align: center;
  min-height: 1.4em;
  font-weight: 500;
}

/* ── Score ───────────────────────────────────────────────────────────── */
.pu-score {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pu-score > span {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pu-gold-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--pu-border);
  border-radius: 20px;
  padding: 3px 14px;
  min-width: 155px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Log ─────────────────────────────────────────────────────────────── */
.pu-log {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pu-log li {
  font-size: 0.78rem;
  color: rgba(205, 190, 145, 0.6);
  padding: 1px 6px;
  border-left: 2px solid rgba(200,160,80,0.18);
}

.pu-log li:first-child {
  color: rgba(205,190,145,0.9);
  border-left-color: var(--pu-gold);
}

/* ── Thinking dots ───────────────────────────────────────────────────── */
.pu-thinking {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}

.pu-thinking span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pu-gold);
  animation: pu-dot 1s infinite;
}

.pu-thinking span:nth-child(2) { animation-delay: 0.2s; }
.pu-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pu-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1.2); }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pu-game-wrap    { padding: 1rem 0.75rem; gap: 0.75rem; }
  .pu-board        { padding: 5px; gap: 3px; }
  .pu-space        { height: 4.6rem; padding: 3px 1px 16px; }
  .pu-piece        { width: 1.5rem;  height: 1.5rem; }
  .pu-piece--prisoner { width: 1.1rem; height: 1.1rem; }
  .pu-piece--waiting,
  .pu-piece--scored   { width: 1.2rem; height: 1.2rem; }
  .pu-stick        { width: 0.85rem; height: 3rem; }
  .pu-btn          { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
  .pu-score > span { min-width: 130px; font-size: 0.78rem; }
  .pu-offboard     { padding: 6px 8px; }
}


/* =============================================================================
   PALLANGUZHI (South India) — pg- prefix
   Carved sandalwood theme: warm amber, deep brown, cowrie shells
============================================================================= */

.pg-game {
  --pg-amber:    #e8a030;
  --pg-gold:     #ffd57a;
  --pg-text:     #f5e8c8;
  --pg-text-dim: rgba(245, 232, 200, 0.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(160deg, #3a1a00 0%, #200e00 100%);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

/* ── Status ──────────────────────────────────────────────────────── */
.pg-status {
  font-size: 0.92rem;
  color: var(--pg-text-dim);
  min-height: 1.4em;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── Board wrap (stores flanking the board) ──────────────────────── */
.pg-board-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* ── Board ───────────────────────────────────────────────────────── */
.pg-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  background: radial-gradient(ellipse at 50% 50%, #2a1105 0%, #180800 100%);
  border-radius: 18px;
  border: 2px solid rgba(160,90,30,0.5);
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,0.7),
    0 4px 14px rgba(0,0,0,0.5);
}

.pg-row-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-text-dim);
  text-align: center;
  padding: 2px 0;
}
.pg-row-label--ai     { margin-bottom: 2px; }
.pg-row-label--player { margin-top:    2px; }

.pg-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.pg-divider {
  height: 1px;
  background: rgba(160,90,30,0.3);
  margin: 4px 0;
}

/* ── Pit ─────────────────────────────────────────────────────────── */
.pg-pit {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    #2e1108 0%, #1a0a02 55%, #0d0400 100%);
  border: 2px solid #5c2e10;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.75),
    inset 0 -1px 4px rgba(255,180,60,0.05),
    0 2px 4px rgba(0,0,0,0.45);
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  user-select: none;
  overflow: hidden;
}

.pg-pit__shells {
  position: absolute;
  inset: 0;
}

.pg-pit__count {
  position: absolute;
  bottom: 3px;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,220,150,0.55);
  line-height: 1;
  pointer-events: none;
}

/* ── Pit states ──────────────────────────────────────────────────── */
.pg-pit--clickable {
  cursor: pointer;
  border-color: var(--pg-amber);
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.6),
    0 0 10px rgba(232,160,48,0.4),
    0 2px 4px rgba(0,0,0,0.45);
}
.pg-pit--clickable:hover {
  transform: scale(1.06);
  border-color: var(--pg-gold);
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.5),
    0 0 18px rgba(255,213,122,0.55),
    0 2px 6px rgba(0,0,0,0.5);
}

.pg-pit--lit {
  border-color: var(--pg-amber);
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,0.55),
    0 0 22px rgba(232,160,48,0.65),
    0 2px 4px rgba(0,0,0,0.45);
  animation: pg-receive 220ms ease-out;
}
@keyframes pg-receive {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.pg-pit--ai-select {
  border-color: #e05a3a;
  animation: pg-ai-select 0.55s ease-in-out infinite alternate;
}
@keyframes pg-ai-select {
  from { box-shadow: inset 0 4px 14px rgba(0,0,0,0.6), 0 0 10px rgba(224,90,58,0.4); }
  to   { box-shadow: inset 0 4px 14px rgba(0,0,0,0.4), 0 0 28px rgba(224,90,58,0.8); }
}

/* ── Shell sprite (cowrie oval) ──────────────────────────────────── */
.pg-shell {
  position: absolute;
  width: 11px;
  height: 7px;
  border-radius: 50%;
  left:  calc(50% + var(--x, 0px) - 5.5px);
  top:   calc(50% + var(--y, 0px) - 3.5px);
  transform: rotate(var(--rot, 0deg));
  background: radial-gradient(ellipse at 40% 30%,
    #fffbf0 0%, #f0e4c0 45%, #c8a870 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
  pointer-events: none;
}
.pg-shell--new {
  animation: pg-shell-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pg-shell-in {
  from { transform: rotate(var(--rot, 0deg)) scale(0); opacity: 0; }
  to   { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}

/* ── Flying cluster ──────────────────────────────────────────────── */
.pg-fly-cluster {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(50, 20, 5, 0.9) 0%, rgba(20, 8, 2, 0.94) 100%);
  border: 1.5px solid rgba(232, 160, 48, 0.7);
  box-shadow:
    0 0 14px rgba(232,160,48,0.4),
    0 2px 8px rgba(0,0,0,0.6);
}
.pg-cluster-shell {
  position: absolute;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  left:  calc(50% + var(--x, 0px) - 4px);
  top:   calc(50% + var(--y, 0px) - 2.5px);
  background: radial-gradient(ellipse at 40% 30%,
    #fffbf0 0%, #f0e4c0 50%, #c8a870 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

/* ── Stores (flanking the board) ─────────────────────────────────── */
.pg-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 62px;
  min-height: 120px;
  padding: 10px 6px;
  background: radial-gradient(ellipse at 50% 30%, #1c0b00 0%, #0a0400 100%);
  border-radius: 12px;
  border: 2px solid rgba(120,60,20,0.5);
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,0.7),
    0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.pg-store__label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-text-dim);
  text-align: center;
}
.pg-store__val {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pg-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pg-store__sub {
  font-size: 0.58rem;
  color: var(--pg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Log ─────────────────────────────────────────────────────────── */
.pg-log {
  width: 100%;
  max-width: 520px;
}
.pg-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--pg-text-dim);
  border-top: 1px solid rgba(160,90,30,0.2);
  padding-top: 0.5rem;
  max-height: 5.5em;
  overflow: hidden;
}
.pg-log li {
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(255,242,216,0.04);
}
.pg-log li:first-child { color: var(--pg-text); }

/* ── Controls ────────────────────────────────────────────────────── */
.pg-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.pg-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.pg-mode-label {
  font-size: 0.72rem;
  color: var(--pg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.pg-btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.pg-diff-btn {
  padding: 4px 14px;
  font-size: 0.78rem;
  border-radius: 20px;
  border: 1px solid rgba(200,135,26,0.3);
  background: rgba(200,135,26,0.07);
  color: rgba(255,213,122,0.45);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pg-diff-btn:hover {
  border-color: rgba(200,135,26,0.6);
  color: rgba(255,213,122,0.8);
  background: rgba(200,135,26,0.14);
}
.pg-diff-btn.active {
  border-color: var(--pg-amber);
  color: var(--pg-gold);
  background: rgba(200,135,26,0.2);
}

.pg-btn {
  padding: 0.5rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(160,90,30,0.55);
  background: rgba(90,40,10,0.55);
  color: var(--pg-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.pg-btn:hover {
  background: rgba(120,55,15,0.7);
  border-color: rgba(200,130,50,0.7);
}
.pg-btn--skip {
  padding: 0.5rem 1rem;
  border-color: rgba(232,160,48,0.4);
  background: rgba(232,160,48,0.1);
  color: var(--pg-gold);
}
.pg-btn--skip:hover {
  background: rgba(232,160,48,0.2);
  border-color: rgba(232,160,48,0.65);
}

/* ── Thinking dots ───────────────────────────────────────────────── */
.pg-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pg-text-dim);
  margin: 0 2px;
  vertical-align: middle;
  animation: pg-dot-bounce 1.2s ease-in-out infinite;
}
.pg-dots span:nth-child(2) { animation-delay: 0.2s; }
.pg-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pg-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1;   }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pg-board-wrap { gap: 6px; }
  .pg-store       { width: 48px; min-height: 90px; }
  .pg-store__val  { font-size: 1.4rem; }
  .pg-store__label,
  .pg-store__sub  { font-size: 0.55rem; }
  .pg-row         { gap: 4px; }
  .pg-board       { padding: 10px 8px; gap: 4px; }
  .pg-shell {
    width: 8px; height: 5px;
    left: calc(50% + var(--x,0px) - 4px);
    top:  calc(50% + var(--y,0px) - 2.5px);
  }
  .pg-pit__count { font-size: 0.58rem; }
}

/* =============================================================================
   Fanorona — Phase 6
   Madagascar strategy board game
============================================================================= */

.fn-game-container {
  background: #2a1606;
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block: var(--space-2);
}

/* HUD — score + status */
.fn-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
}

.fn-score {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.fn-score__you { color: #c8a060; }
.fn-score__ai  { color: #d0c8b8; }

.fn-status {
  font-size: var(--text-sm);
  color: #d0c8b8;
  margin: 0;
  flex: 1;
  text-align: right;
}

/* Board canvas */
.fn-board-wrap {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(200,155,60,0.25);
  cursor: pointer;
}
#fn-canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}

/* Controls */
.fn-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fn-ai-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #c8a060;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.fn-ai-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #C89B3C;
  cursor: pointer;
}

/* Ghost buttons on the dark Fanorona container background */
.fn-controls .btn-ghost {
  color: #c8a060;
  border-color: rgba(200,160,96,0.5);
}
.fn-controls .btn-ghost:hover,
.fn-controls .btn-ghost:focus-visible {
  background-color: rgba(200,160,96,0.12);
  border-color: #c8a060;
  color: #e8c87a;
}

/* Banner color for Fanorona cards */
.game-card__banner--ochre {
  background: linear-gradient(135deg, #3d1f04 0%, #8b5e2c 100%);
}

@media (max-width: 480px) {
  .fn-hud    { flex-direction: column; align-items: flex-start; }
  .fn-status { text-align: left; }
}

/* =============================================================================
   HNEFATAFL — ht- namespace
============================================================================= */
.ht-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: #1E1A14;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.ht-hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ht-captures {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ht-cap {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
}
.ht-cap--att   { color: #e07070; }
.ht-cap--def   { color: #d8c8a8; }
.ht-cap--moves { color: #a89070; }

.ht-status {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #D4A017;
  text-align: right;
  flex-shrink: 0;
}

.ht-board-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

#ht-canvas {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 32px rgba(0,0,0,0.6);
  cursor: pointer;
  touch-action: none;
}

.ht-controls { width: 100%; }

.ht-mode-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ht-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.ht-select {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: 2px 6px;
  cursor: pointer;
}

.ht-log-wrap {
  width: 100%;
}

.ht-log-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.ht-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 72px;
  overflow: hidden;
}

.ht-log li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: monospace;
}

/* Browse page banner color */
.game-card__banner--slate {
  background: linear-gradient(135deg, #1E1A14 0%, #4a3d2c 100%);
}

@media (max-width: 480px) {
  .ht-hud    { flex-direction: column; align-items: flex-start; }
  .ht-status { text-align: left; }
  .ht-mode-row { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   Online Multiplayer Panel (shared across games)
============================================================================= */
.mp-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mp-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.mp-code-input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  width: 7.5rem;
  outline: none;
  font-family: monospace;
}
.mp-code-input:focus {
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 2px rgba(200,155,60,0.18);
}
.mp-code-display {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mp-code-display strong {
  font-size: var(--text-xl);
  letter-spacing: 0.2em;
  color: var(--color-accent-gold);
  font-family: monospace;
}
.mp-status-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* =============================================================================
   HONG KONG MAHJONG — mj- prefix
   All rules scoped to .mj-wrap or the mj-overlay siblings.
   No rule bleeds outside this section.
============================================================================= */

/* ── Color tokens ── */
.mj-wrap {
  --mj-red:         #c0392b;
  --mj-red-light:   #e74c3c;
  --mj-gold:        #c8960c;
  --mj-gold-light:  #f2c94c;
  --mj-gold-dim:    #a07820;
  --mj-green:       #1a6b3a;
  --mj-green-mid:   #27ae60;
  --mj-ivory:       #fdf8ed;
  --mj-ivory-dark:  #e8dfc0;
  --mj-felt:        #14602e;
  --mj-felt-mid:    #1a7838;
  --mj-felt-dark:   #0a2e16;
  --mj-wood:        #2c1608;
  --mj-wood-light:  #4a2c14;
  --mj-tile-border: #b89040;
  --mj-char:        #c0392b;
  --mj-bamboo:      #1a6b3a;
  --mj-circle:      #1a3a6b;
  --mj-wind:        #1a1a1a;
  --mj-dragon-r:    #c0392b;
  --mj-dragon-g:    #1a6b3a;
  --mj-dragon-w:    #888;
}

/* ── Outer wrap — rich mahogany table frame ── */
.mj-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 920px;
  margin: 0 auto;
  padding: 0.85rem;
  /* Dark walnut/mahogany wood grain */
  background:
    repeating-linear-gradient(
      92deg,
      rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px,
      transparent 1px, transparent 18px
    ),
    linear-gradient(175deg, #3a1e0a 0%, #2c1608 35%, #3d2010 65%, #2a1406 100%);
  border: 3px solid #5a3010;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(200,150,12,0.25),        /* gold inner rim */
    0 12px 40px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,220,100,0.1);
  color: var(--mj-ivory);
  font-family: inherit;
  position: relative;
}

/* Gold inlay inner rim */
.mj-wrap::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  border: 1px solid rgba(200,150,12,0.18);
  pointer-events: none;
  z-index: 0;
}
.mj-wrap > * { position: relative; z-index: 1; }

.mj-start-area {
  padding: 3rem 1rem;
}

.mj-middle-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

/* ── Table center — deep casino felt with radial vignette ── */
.mj-table-center {
  flex: 1;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(ellipse at 50% 50%, #1e7a40 0%, #14602e 55%, #0a3c1c 100%);
  border-radius: 8px;
  padding: 0.35rem;
  min-height: 200px;
  border: 2px solid #0a3018;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.25);
}

/* ── Wall ring — ring of face-down tiles around the discard square ── */
.mj-wall-ring {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Top and bottom rows of wall tiles (landscape orientation) */
.mj-wall-top,
.mj-wall-bottom {
  display: flex;
  gap: 2px;
  justify-content: center;
  flex-shrink: 0;
}
/* Middle: left-wall | discard square | right-wall */
.mj-wall-middle-row {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: center;
}
/* Left and right columns of wall tiles */
.mj-wall-left,
.mj-wall-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  flex-shrink: 0;
}
/* Wall tiles: landscape for top/bottom, portrait for left/right */
.mj-wall-tile {
  width: 2.1rem;
  height: 1.5rem;
  box-shadow:
    1px 2px 0 #071e0f,
    2px 4px 0 rgba(0,0,0,0.3),
    3px 6px 8px rgba(0,0,0,0.6),
    inset 1px 1px 0 rgba(255,255,255,0.15);
  border-color: #0a3018;
  flex-shrink: 0;
}
.mj-wall-left  .mj-wall-tile,
.mj-wall-right .mj-wall-tile {
  width: 1.5rem;
  height: 2.1rem;
}
/* Empty slots (drawn tiles) — same dimensions, invisible */
.mj-wall-slot--hz { width: 2.1rem; height: 1.5rem; flex-shrink: 0; }
.mj-wall-slot--vt { width: 1.5rem; height: 2.1rem; flex-shrink: 0; }

/* ── Central discard square ── */
.mj-discard-square {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Top row: opp-across discards (tiles flow left-to-right toward viewer) */
.mj-ds-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-items: flex-end;      /* pile up from the top edge downward */
  min-height: 2.6rem;
  padding: 0 2px;
  direction: rtl;             /* newest discard nearest the center */
}
.mj-ds-top .mj-tile--sm { transform: rotate(180deg); }

/* Middle row: left discard | center info | right discard */
.mj-ds-middle {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: stretch;
}

/* Left opp discards — column, newest at the bottom (nearest center) */
.mj-ds-left {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  gap: 2px;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 2.2rem;
  padding: 2px 0;
}
.mj-ds-left .mj-tile--sm { transform: rotate(90deg); }

/* Centre info panel — lacquered dark wood with gold inlay */
.mj-ds-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 4px;
  background:
    linear-gradient(160deg, #2a1206 0%, #1a0a02 50%, #2a1206 100%);
  border-radius: 5px;
  border: 1px solid rgba(200,150,12,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,220,100,0.08),
    0 2px 8px rgba(0,0,0,0.5);
  min-width: 60px;
}

/* Right opp discards — mirror of left */
.mj-ds-right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  gap: 2px;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 2.2rem;
  padding: 2px 0;
}
.mj-ds-right .mj-tile--sm { transform: rotate(-90deg); }

/* Bottom row: human player discards */
.mj-ds-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-items: flex-start;    /* pile up from bottom edge upward */
  min-height: 2.6rem;
  padding: 0 2px;
}

/* ── Opponent areas ── */
.mj-opponent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  background:
    linear-gradient(180deg, rgba(60,30,10,0.85) 0%, rgba(30,12,4,0.9) 100%);
  border-radius: 6px;
  border: 1px solid rgba(200,150,12,0.2);
  box-shadow: inset 0 1px 0 rgba(255,220,100,0.06);
  min-width: 0;
}

.mj-opponent--top {
  flex-direction: column;
}

.mj-opponent--left,
.mj-opponent--right {
  flex: 0 0 130px;
  align-items: center;
}

.mj-opp-info {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.mj-opp-name {
  font-weight: 600;
  color: var(--mj-ivory);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.mj-opp-wind {
  color: var(--mj-gold-light);
  font-size: 1rem;
  text-shadow: 0 0 6px rgba(242,201,76,0.4);
}

.mj-opp-score {
  color: #9a8060;
  font-size: 0.75rem;
}

.mj-active-dot {
  color: var(--mj-gold);
  margin-left: 2px;
}

/* ── Player area — premium felt shelf with gold inlay border ── */
.mj-player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  background:
    radial-gradient(ellipse at 50% 0%, #1e7a40 0%, #14602e 60%, #0d4a22 100%);
  border-radius: 8px;
  border-top: 2px solid var(--mj-gold);
  border-left: 1px solid rgba(200,150,12,0.25);
  border-right: 1px solid rgba(200,150,12,0.25);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,100,0.08);
}

.mj-player-info {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  align-items: center;
}

.mj-player-wind {
  color: var(--mj-gold-light);
  text-shadow: 0 0 6px rgba(242,201,76,0.4);
  font-size: 1rem;
}

.mj-player-score {
  color: #9a8060;
}

/* ── Tile base — 3-D bevel, ivory face ── */
.mj-tile {
  width: 3rem;
  height: 4.1rem;
  background: linear-gradient(160deg, #fffef6 0%, #f8f0da 55%, #ede0bc 100%);
  border: 1.5px solid var(--mj-tile-border);
  border-radius: 4px 4px 5px 5px;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.88),
    inset -2px -2px 0 rgba(0,0,0,0.10),
    3px 4px 9px rgba(0,0,0,0.45),
    0 1px 0 rgba(0,0,0,0.18);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: default;
  position: relative;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  overflow: hidden;
}
/* Coloured top band — suit identity strip */
.mj-tile:not(.mj-tile--back)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 3px 3px 0 0;
}
/* Per-suit backgrounds and band colours */
.mj-tile--char {
  background: linear-gradient(160deg, #fff6f6 0%, #fde8e8 55%, #f5d0d0 100%);
  border-color: #b83030;
}
.mj-tile--char::before    { background: #c0392b; }
.mj-tile--bamboo {
  background: linear-gradient(160deg, #f4fff7 0%, #e4f8ea 55%, #ceecd6 100%);
  border-color: #1a6b3a;
}
.mj-tile--bamboo::before  { background: #1a6b3a; }
.mj-tile--circle {
  background: linear-gradient(160deg, #f4f7ff 0%, #e4eaf8 55%, #ccd4f0 100%);
  border-color: #1a3a6b;
}
.mj-tile--circle::before  { background: #1a3a6b; }
.mj-tile--wind {
  background: linear-gradient(160deg, #fdfcf7 0%, #f0ebda 55%, #e0d5b8 100%);
  border-color: #555;
}
.mj-tile--wind::before    { background: #3a3a3a; }
.mj-tile--dragon-r {
  background: linear-gradient(160deg, #fff6f6 0%, #fde8e8 55%, #f5d0d0 100%);
  border-color: #b83030;
}
.mj-tile--dragon-r::before { background: #c0392b; }
.mj-tile--dragon-g {
  background: linear-gradient(160deg, #f4fff7 0%, #e4f8ea 55%, #ceecd6 100%);
  border-color: #1a6b3a;
}
.mj-tile--dragon-g::before { background: #1a6b3a; }
.mj-tile--dragon-w {
  background: linear-gradient(160deg, #fffef6 0%, #f8f0da 55%, #ede0bc 100%);
  border-color: #888;
}
.mj-tile--dragon-w::before { background: #aaa; }

/* ── Tile back — jade green with diagonal weave ── */
.mj-tile--back {
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 0, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 0, transparent 6px),
    linear-gradient(160deg, #1a6b3a 0%, #0f4a27 45%, #1a6b3a 100%);
  border-color: #0a3018;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.12),
    inset -1px -1px 0 rgba(0,0,0,0.3),
    2px 3px 7px rgba(0,0,0,0.45);
}

/* ── Honour tile text ── */
.mj-hon {
  display: block;
  font-weight: 900;
  line-height: 1;
  font-size: 1.65rem;
  margin-top: 4px; /* clear the suit band */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.mj-hon--char     { color: var(--mj-char);     }
.mj-hon--wind     { color: var(--mj-wind);     font-size: 1.55rem; }
.mj-hon--dragon-r { color: var(--mj-dragon-r); font-size: 1.65rem; }
.mj-hon--dragon-g { color: var(--mj-dragon-g); font-size: 1.65rem; }
.mj-hon--dragon-w {
  color: #222;
  font-size: 1.65rem;
  /* white dragon gets a visible red border-box instead of grey */
  text-shadow: 0 0 0 #c0392b;
}

/* 萬 subscript under character numeral */
.mj-hon-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #600;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── SVG tile artwork (.mj-art) ── */
/* Fills the tile face below the suit band; SVG handles all bamboo + circle art */
.mj-art {
  position: absolute;
  left: 2px; right: 2px;
  top: 6px;   /* just below the 5px suit band */
  bottom: 2px;
  display: block;
  overflow: visible;
}

/* ── Tile states ── */
.mj-tile--selectable {
  cursor: pointer;
}
.mj-tile--selectable:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.88),
    inset -2px -2px 0 rgba(0,0,0,0.10),
    0 0 0 2px var(--mj-gold-light),
    4px 8px 14px rgba(0,0,0,0.4);
}
.mj-tile--selected {
  transform: translateY(-10px);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.88),
    0 0 0 2.5px var(--mj-gold),
    0 10px 18px rgba(0,0,0,0.5);
}
.mj-tile--latest {
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.88),
    0 0 0 2.5px var(--mj-green-mid),
    3px 4px 9px rgba(0,0,0,0.4);
}
/* ── Discard pop-in animation ── */
@keyframes mj-discard-in {
  from { transform: scale(0.45) translateY(-14px); opacity: 0; }
  to   { transform: scale(1);   translateY(0);    opacity: 1; }
}
.mj-tile--discard-last {
  box-shadow: 0 0 0 2.5px var(--mj-gold-light), 2px 3px 6px rgba(0,0,0,0.4);
  animation: mj-discard-in 0.22s ease-out both;
}

/* ── Claimable pulse (overrides discard-in once claim window opens) ── */
@keyframes mj-claim-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2.5px var(--mj-gold-light), 2px 3px 6px rgba(0,0,0,0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--mj-gold),
      0 0 18px rgba(212,160,23,0.7),
      2px 3px 6px rgba(0,0,0,0.4);
    transform: scale(1.08);
  }
}
.mj-tile--claimable {
  animation: mj-claim-pulse 0.75s ease-in-out infinite;
  z-index: 2;
}

/* ── Drag states ── */
.mj-tile[draggable="true"] { cursor: grab; touch-action: none; }
.mj-tile[draggable="true"].mj-tile--selectable { cursor: pointer; }
.mj-tile--dragging {
  opacity: 0.22;
  transform: scale(0.9);
  box-shadow: none;
}
.mj-tile--drag-over {
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.88),
    -4px 0 0 var(--mj-gold),
    3px 4px 9px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* ── Small tiles (discard pool) ── */
.mj-tile--sm {
  width: 1.75rem;
  height: 2.35rem;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}
.mj-tile--sm .mj-hon     { font-size: 0.85rem; margin-top: 2px; }
.mj-tile--sm .mj-hon-sub { font-size: 0.36rem; }
.mj-tile--sm .mj-art     { top: 3px; left: 1px; right: 1px; bottom: 1px; }
.mj-tile--sm::before     { height: 3px; }

/* ── Horizontal back-tile (left/right opponents) ── */
.mj-tile--hz {
  width: 2.5rem;
  height: 1.7rem;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.55);
}
.mj-tile--hz::before { height: 3px; }

/* ── Hand & meld containers ── */
.mj-player-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  min-height: 3.6rem;
}

.mj-player-melds {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 1rem;
}

.mj-meld {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  padding: 2px 4px;
  border: 1px solid rgba(200,150,12,0.2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.mj-opp-hand {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 1rem;
}

.mj-opp-melds {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}


/* ── Controls ── */
.mj-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Buttons — dark lacquer with gold border ── */
.mj-btn {
  padding: 0.45rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: 1.5px solid var(--mj-gold);
  background: linear-gradient(180deg, #2e1a08 0%, #1c0e04 100%);
  color: var(--mj-gold-light);
  transition: background 0.15s, box-shadow 0.15s;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,220,100,0.1);
  letter-spacing: 0.02em;
}

.mj-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3a2210 0%, #26140a 100%);
  box-shadow: 0 0 0 1px var(--mj-gold), 0 4px 10px rgba(0,0,0,0.5);
}

.mj-btn:focus-visible {
  outline: 2px solid var(--mj-gold-light);
  outline-offset: 2px;
}

.mj-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mj-btn--win {
  border-color: var(--mj-red-light);
  color: var(--mj-red-light);
}

.mj-btn--win:hover:not(:disabled) {
  background: var(--mj-red);
  color: #fff;
}

.mj-btn--secondary {
  border-color: #555;
  color: #999;
}

.mj-btn--secondary:hover:not(:disabled) {
  background: #2a2a2a;
  color: #ccc;
}

/* ── Center info ── */
.mj-wall-count {
  font-size: 0.8rem;
  color: #a08050;
  letter-spacing: 0.03em;
}

.mj-round-info {
  font-size: 1rem;
  color: var(--mj-gold-light);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
}

.mj-status {
  text-align: center;
  font-size: 0.9rem;
  min-height: 1.4em;
  color: var(--mj-gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── Claim buttons ── */
.mj-claim-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 2rem;
}

.mj-claim-btns-inner {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.mj-claim-btn {
  animation: mj-claim-flash 0.3s ease;
}

@keyframes mj-claim-flash {
  0%   { box-shadow: 0 0 0 0 var(--mj-gold); }
  50%  { box-shadow: 0 0 0 6px rgba(212,160,23,0.4); }
  100% { box-shadow: none; }
}

/* ── Log ── */
.mj-log {
  max-height: 100px;
  overflow-y: auto;
  font-size: 0.76rem;
  color: #8a7050;
  list-style: none;
  padding: 0.3rem 0.5rem;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(20,8,2,0.7) 0%, rgba(10,4,1,0.85) 100%);
  border-radius: 4px;
  border: 1px solid rgba(200,150,12,0.12);
  scrollbar-width: thin;
  scrollbar-color: #5a3010 transparent;
}

.mj-log .mj-log-latest {
  color: var(--mj-gold-light);
  font-weight: 500;
}

/* ── Win overlay ── */
.mj-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.mj-overlay[hidden] {
  display: none;
}

.mj-overlay-card {
  background:
    linear-gradient(175deg, #fdf8ed 0%, #f2e9cc 60%, #ede0bc 100%);
  color: #222;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 92%;
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(200,150,12,0.5),
    0 0 0 5px rgba(44,22,8,0.8),
    0 16px 50px rgba(0,0,0,0.8);
  border: 1px solid #c8960c;
}

.mj-overlay-card h2 {
  font-family: var(--font-display, serif);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.mj-overlay-card .mj-tile {
  background: var(--mj-tile-bg);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .mj-tile        { width: 1.8rem; height: 2.4rem; font-size: 0.82rem; }
  .mj-tile--sm    { width: 1.2rem; height: 1.6rem; font-size: 0.6rem; }
  .mj-opponent--left,
  .mj-opponent--right { flex: 0 0 72px; }
  .mj-btn         { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
  .mj-table-center { min-height: 140px; padding: 0.6rem; }
}

@media (max-width: 420px) {
  .mj-tile        { width: 1.5rem; height: 2rem; font-size: 0.7rem; }
  .mj-middle-row  { gap: 0.25rem; }
  .mj-opponent--left,
  .mj-opponent--right { flex: 0 0 58px; }
}

/* =============================================================================
   PACHISI — pc- namespace
============================================================================= */

/* Outer game container */
.pc-game-container {
  background:
    radial-gradient(ellipse at 15% 15%, rgba(240,120,20,0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(180,30,80,0.24) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(40,80,200,0.2)  0%, transparent 50%),
    radial-gradient(ellipse at 15% 85%, rgba(30,160,80,0.2)  0%, transparent 50%),
    radial-gradient(circle at center, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(145deg, #1a0820 0%, #2e0f12 35%, #0e1830 70%, #1a0820 100%);
  background-size: auto, auto, auto, auto, 22px 22px, auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,200,100,0.12);
}

/* ── Pre-game lobby ── */
.pc-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4);
  min-height: 420px;
}

.pc-lobby__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: #C8960C;
  margin: 0;
}

.pc-lobby__subtitle {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-base);
  margin: 0;
}

.pc-lobby__btns {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.pc-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-6);
  min-width: 140px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pc-mode-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.pc-mode-btn__icon {
  font-size: 2rem;
  line-height: 1;
}

.pc-mode-btn__label {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.pc-mode-btn__sub {
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* ── Main game area ── */
.pc-game {
  display: flex;
  flex-direction: column;
}

/* HUD bar */
.pc-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(200,150,12,0.3);
  gap: var(--space-2);
}

.pc-hud__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.pc-hud__label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pc-hud__val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #C8960C;
  line-height: 1;
}

.pc-hud__player {
  text-transform: capitalize;
}

.pc-status {
  flex: 1;
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin: 0;
  padding: 0 var(--space-2);
}

/* ── Board + sidebar layout ── */
.pc-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.pc-board-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

#pc-board {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  cursor: pointer;
}

/* Sidebar */
.pc-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  background: rgba(0,0,0,0.2);
  border-left: 1px solid rgba(200,150,12,0.2);
  min-height: 500px;
}

/* Cowrie panel */
.pc-cowrie-panel {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(200,150,12,0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}

.pc-cowrie-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2) 0;
}

.pc-cowries {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.pc-cowrie-shell {
  display: block;
  border-radius: 4px;
}

.pc-roll-result {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(200,150,12,0.2);
}

.pc-roll-result__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: #C8960C;
  line-height: 1;
}

.pc-roll-result__note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-snug);
}

/* Controls */
.pc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pc-roll-btn {
  width: 100%;
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
}

.pc-new-btn {
  width: 100%;
}

/* Score panel */
.pc-score-panel {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(200,150,12,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}

.pc-score-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2) 0;
}

.pc-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-score-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pc-score-name {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
  flex: 1;
  text-transform: capitalize;
}

.pc-score-val {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: #C8960C;
}

/* Teams panel */
.pc-teams-panel {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(200,150,12,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}

.pc-team-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}

.pc-team-row:last-child {
  margin-bottom: 0;
}

.pc-team-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pc-team-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: #C8960C;
  background: rgba(200,150,12,0.15);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .pc-layout {
    flex-direction: column;
  }

  .pc-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: unset;
    border-left: none;
    border-top: 1px solid rgba(200,150,12,0.2);
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .pc-cowrie-panel {
    flex: 1;
    min-width: 160px;
  }

  .pc-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .pc-roll-btn,
  .pc-new-btn {
    width: auto;
  }

  .pc-score-panel,
  .pc-teams-panel {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .pc-hud {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .pc-status {
    order: -1;
    width: 100%;
  }
}