/* ===================================================================
   Board-specific styles
   =================================================================== */

/* ---------- Crests (tic-tac-toe) ---------- */

.crests-board {
  display: grid; grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px); gap: 6px;
}
.crests-cell {
  background: #fffdf6; border: 2px solid var(--panel-border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s;
  position: relative;
}
.crests-cell.playable:hover { background: color-mix(in srgb, var(--accent) 15%, #fffdf6); }
.crests-cell:not(.playable) { cursor: default; }
.crests-cell svg { width: 52px; height: 52px; }
.crests-cell.win-cell { background: color-mix(in srgb, var(--accent) 30%, #fffdf6); }

/* ---------- Siege (connect four) ---------- */

.siege-board-outer { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.siege-cols { display: grid; gap: 6px; margin-bottom: 4px; }
.siege-col-btn {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 4px;
  padding: 6px 0; cursor: pointer; font-size: 15px; width: 100%;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.siege-col-btn:disabled { opacity: .25; cursor: not-allowed; }
.siege-col-btn:hover:not(:disabled) { filter: brightness(1.15); }

.siege-frame {
  background: linear-gradient(180deg, #4a2f18, #2c1a0d);
  border: 4px solid #1c1006; border-radius: 8px; padding: 10px;
  display: grid; gap: 6px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.4);
}
.siege-cell {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e9dcbf, #cbb98f 70%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.4);
}
.siege-cell.filled {
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.35), 0 0 0 2px rgba(0,0,0,.2);
}
.siege-cell.win-cell { outline: 3px solid #fff; outline-offset: -3px; }

@media (max-width: 560px) {
  .siege-cell { width: 34px; height: 34px; }
}

/* ---------- Duel (sword/shield/torch) ---------- */

.duel-board { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 480px; }

.duel-score-track { display: flex; align-items: center; gap: 18px; font-family: 'Cinzel', serif; }
.duel-score-track .pips { display: flex; gap: 5px; }
.duel-score-track .pip { width: 12px; height: 12px; border-radius: 50%; background: var(--panel-border); }
.duel-score-track .pip.filled { background: var(--accent); }
.duel-score-track .score-num { font-size: 22px; color: var(--ink); }
.duel-score-track .vs { color: var(--ink-soft); font-size: 13px; }

.duel-reveal { display: flex; align-items: center; gap: 24px; min-height: 90px; }
.duel-reveal .rev-icon-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duel-reveal svg { width: 64px; height: 64px; }
.duel-reveal .rev-label { font-size: 12px; color: var(--ink-soft); font-family: 'Cinzel', serif; text-transform: uppercase; }
.duel-reveal .rev-vs { font-family: 'Cinzel Decorative', serif; font-size: 20px; color: var(--accent-2); }
.duel-round-text { font-size: 15px; color: var(--ink); min-height: 22px; text-align: center; }

.duel-choices { display: flex; gap: 16px; }
.duel-choice-btn {
  background: var(--bg-panel-2); border: 2px solid var(--panel-border); border-radius: 8px;
  padding: 14px 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .12s, border-color .12s;
}
.duel-choice-btn svg { width: 42px; height: 42px; }
.duel-choice-btn span { font-family: 'Cinzel', serif; font-size: 12px; text-transform: uppercase; }
.duel-choice-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.duel-choice-btn:disabled { opacity: .35; cursor: not-allowed; }
.duel-choice-btn.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel-2)); }

.duel-waiting { font-size: 13.5px; color: var(--ink-soft); font-style: italic; }

/* ---------- Kingdom (dots and boxes) ---------- */

.kingdom-svg-wrap { display: flex; justify-content: center; }
.kingdom-dot { fill: var(--ink); }
.kingdom-edge { stroke: transparent; stroke-width: 14; cursor: pointer; }
.kingdom-edge-line { stroke: #cbb98f; stroke-width: 4; stroke-linecap: round; }
.kingdom-edge-line.drawn { stroke-width: 6; }
.kingdom-edge.playable:hover + .kingdom-edge-line { stroke: var(--accent); }
.kingdom-box-fill { opacity: .55; }
.kingdom-box-mark { opacity: .9; }

.kingdom-score-row { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; font-family: 'Cinzel', serif; font-size: 14px; flex-wrap: wrap; }

.tomes-grid { display: grid; grid-template-columns: repeat(9, 60px); gap: 8px; }
.tomes-card {
  width: 60px; height: 60px; border-radius: 6px; border: 2px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center; cursor: default; padding: 0;
  transition: transform .12s;
}
.tomes-card svg { width: 26px; height: 26px; }
.tomes-card.face-down { background: linear-gradient(160deg, #4a2f18, #2c1a0d); color: #cbb98f; }
.tomes-card.face-down.playable { cursor: pointer; }
.tomes-card.face-down.playable:hover { transform: translateY(-2px); border-color: var(--accent); }
.tomes-card.face-up { background: #fffdf6; color: var(--ink); }
.tomes-card.matched { opacity: .92; }

@media (max-width: 900px) {
  .tomes-grid { grid-template-columns: repeat(8, 48px); gap: 6px; }
  .tomes-card { width: 48px; height: 48px; }
  .tomes-card svg { width: 22px; height: 22px; }
}

@media (max-width: 560px) {
  .tomes-grid { grid-template-columns: repeat(6, 42px); gap: 5px; }
  .tomes-card { width: 42px; height: 42px; }
  .tomes-card svg { width: 18px; height: 18px; }
}

.torch-board { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.torch-row { display: flex; gap: 6px; align-items: center; min-height: 34px; }
.torch-flame-btn { background: none; border: none; padding: 2px; cursor: pointer; }
.torch-flame-btn svg { width: 28px; height: 28px; transition: transform .12s; }
.torch-flame-btn:disabled { cursor: default; }
.torch-flame-btn:not(:disabled):hover svg { transform: translateY(-3px) scale(1.1); }
.torch-row-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.kingdom-score-row .kscore { display: flex; align-items: center; gap: 8px; }

.card {
  width: 52px; height: 74px; border-radius: 6px; border: 1.5px solid var(--panel-border);
  background: #fffdf6; display: flex; flex-direction: column; justify-content: space-between;
  padding: 5px 6px; box-shadow: 0 3px 6px rgba(0,0,0,.3); flex-shrink: 0;
}
.card-rank { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; line-height: 1; }
.card-suit { font-size: 18px; line-height: 1; align-self: flex-end; }
.card-red { color: #8f1f1f; }
.card-black { color: #201812; }
.card-back {
  background: linear-gradient(160deg, #4a2f18, #2c1a0d);
  border-color: #1c1006;
  background-image: repeating-linear-gradient(45deg, rgba(203,185,143,.12) 0 4px, transparent 4px 8px);
}

.blackjack-board { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 640px; }
.bj-players-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bj-section { border: 1.5px solid var(--panel-border); border-radius: 8px; padding: 10px 12px; background: var(--bg-panel-2); min-width: 0; }
.bj-section.bj-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

@media (max-width: 520px) {
  .bj-players-grid { grid-template-columns: 1fr; }
}
.bj-label { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-size: 13.5px; color: var(--ink); margin-bottom: 8px; }
.bj-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.bj-actions { display: flex; gap: 10px; margin-top: 16px; }
.bj-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; background: var(--ink-soft); color: var(--bg-panel); border-radius: 10px; padding: 2px 8px; }
.bj-tag-win, .bj-tag-blackjack { background: #3c6b3c; color: #eafbe6; }
.bj-tag-lose { background: #7a1f1f; color: #fbe6e6; }

.war-board { display: flex; flex-direction: column; gap: 18px; align-items: center; width: 100%; }
.war-status-slot { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.war-banner {
  font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 60%, black));
  padding: 8px 20px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: war-pulse 1.1s ease-in-out infinite;
}
.war-pot-note { font-family: 'Cinzel', serif; font-size: 12.5px; color: var(--ink-soft); }
@keyframes war-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.war-reveal { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.war-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; }
.war-slot.war-winner { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.war-slot.war-sitting-out { opacity: .4; }
.war-slot-label { font-family: 'Cinzel', serif; font-size: 12px; }

.checkers-board { display: grid; grid-template-columns: repeat(8, 44px); grid-template-rows: repeat(8, 44px); border: 3px solid #1c1006; border-radius: 4px; overflow: hidden; }
.checkers-square { display: flex; align-items: center; justify-content: center; position: relative; }
.checkers-square.light { background: #e9dcbf; }
.checkers-square.dark { background: #6b4226; }
.checkers-square.possible-target { cursor: pointer; }
.checkers-square.possible-target::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.2); }
.checkers-piece {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.35), inset 0 3px 3px rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.checkers-piece svg { width: 16px; height: 16px; color: rgba(255,255,255,.85); }
.checkers-piece.selectable { cursor: pointer; }
.checkers-piece.selected { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 480px) {
  .checkers-board { grid-template-columns: repeat(8, 34px); grid-template-rows: repeat(8, 34px); }
  .checkers-piece { width: 26px; height: 26px; }
}

.chess-board { display: grid; grid-template-columns: repeat(8, 48px); grid-template-rows: repeat(8, 48px); border: 3px solid #1c1006; border-radius: 4px; overflow: hidden; }
.chess-square { display: flex; align-items: center; justify-content: center; position: relative; }
.chess-square.light { background: #e9dcbf; }
.chess-square.dark { background: #6b4226; }
.chess-square.selected { box-shadow: inset 0 0 0 3px var(--accent); }
.chess-square.last-move { background-image: linear-gradient(rgba(184,134,11,.35), rgba(184,134,11,.35)); }
.chess-square.in-check { background-image: linear-gradient(rgba(139,31,31,.55), rgba(139,31,31,.55)); }
.chess-square.selectable, .chess-square.last-move { cursor: pointer; }
.chess-piece { font-size: 32px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.4); cursor: pointer; user-select: none; }

@media (max-width: 480px) {
  .chess-board { grid-template-columns: repeat(8, 36px); grid-template-rows: repeat(8, 36px); }
  .chess-piece { font-size: 24px; }
}

/* ---------- Pilgrim's Path (snakes & ladders) ---------- */

.pilgrim-board { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.pilgrim-grid {
  display: grid; grid-template-columns: repeat(10, 34px); grid-template-rows: repeat(10, 34px); gap: 2px;
  background: #1c1006; border: 4px solid #1c1006; border-radius: 6px; padding: 4px;
}
.pilgrim-cell {
  position: relative; background: #e9dcbf; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.pilgrim-cell-num { font-size: 9px; color: var(--ink-soft); position: absolute; top: 2px; left: 3px; }
.pilgrim-cell-icon { font-size: 14px; }
.pilgrim-cell.pilgrim-ladder { background: color-mix(in srgb, var(--success) 30%, #e9dcbf); }
.pilgrim-cell.pilgrim-chute { background: color-mix(in srgb, var(--danger) 30%, #e9dcbf); }
.pilgrim-cell-tokens {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  display: flex; gap: 1px; justify-content: center; flex-wrap: wrap;
}
.pilgrim-token-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 -2px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
}
.pilgrim-controls { display: flex; gap: 10px; margin-top: 4px; }

@media (max-width: 520px) {
  .pilgrim-grid { grid-template-columns: repeat(10, 26px); grid-template-rows: repeat(10, 26px); }
  .pilgrim-cell-num { font-size: 7.5px; }
}

/* ---------- Crown's Race (Ludo-like) ---------- */

.crown-board { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 640px; }

.crown-ludo-grid {
  display: grid; grid-template-columns: repeat(15, 24px); grid-template-rows: repeat(15, 24px);
  gap: 1px; background: #1c1006; border: 5px solid #1c1006; border-radius: 8px; padding: 5px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4);
}

.crown-yard { border: 3px solid var(--panel-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.crown-yard-inner {
  width: 68%; height: 68%; border: 2px dashed var(--panel-border); border-radius: 6px;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6%;
  align-items: center; justify-items: center; padding: 6%; background: rgba(255,253,246,.4);
}
.crown-yard-slot { width: 60%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--panel-border); background: transparent; }
.crown-yard-slot.filled { border-color: transparent; box-shadow: inset 0 -2px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5); }

.crown-ring-cell {
  background: #e9dcbf; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1px;
}
.crown-ring-cell.crown-start-cell { border: 2px solid var(--panel-border); }

.crown-lane-cell { display: flex; align-items: center; justify-content: center; }

.crown-hub {
  background: radial-gradient(circle, #fffdf6, #e9dcbf 70%); display: flex; align-items: center; justify-content: center; color: var(--accent-2);
}
.crown-hub svg { width: 16px; height: 16px; }

.crown-token-dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
}

.crown-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.crown-dice-face {
  width: 36px; height: 36px; border-radius: 6px; background: #fffdf6; border: 2px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; color: var(--ink);
}
.crown-token-btn:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 560px) {
  .crown-ludo-grid { grid-template-columns: repeat(15, 17px); grid-template-rows: repeat(15, 17px); }
  .crown-token-dot { width: 7px; height: 7px; }
  .crown-hub svg { width: 12px; height: 12px; }
}

/* ---------- Heraldry (Uno-like) ---------- */

.heraldry-board { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }

.heraldry-table { display: flex; align-items: center; justify-content: center; gap: 34px; }
.heraldry-deck-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.heraldry-deck-count, .heraldry-current-color {
  font-family: 'Cinzel', serif; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.heraldry-current-color { font-weight: 700; }

.heraldry-card {
  width: 64px; height: 92px; border-radius: 8px; border: 2px solid rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); color: #fff; flex-shrink: 0;
}
.heraldry-card-glyph { font-size: 26px; font-family: 'Cinzel', serif; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.heraldry-card-label { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; opacity: .9; }
.heraldry-wild-face { background: conic-gradient(#8f1f1f 0deg 90deg, #3d6a8a 90deg 180deg, #b8860b 180deg 270deg, #2f6b3f 270deg 360deg); }
.heraldry-card-back {
  background: linear-gradient(160deg, #4a2f18, #2c1a0d); color: #cbb98f;
  background-image: repeating-linear-gradient(45deg, rgba(203,185,143,.12) 0 4px, transparent 4px 8px), linear-gradient(160deg, #4a2f18, #2c1a0d);
}
.heraldry-card.playable { cursor: pointer; transition: transform .12s; }
.heraldry-card.playable:hover { transform: translateY(-4px); }
.heraldry-card.drawn-highlight { box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(0,0,0,.35); }
.heraldry-deck-pile.playable:hover { transform: translateY(-4px) scale(1.03); }

.heraldry-hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 620px; }

.heraldry-color-picker { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.heraldry-color-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(0,0,0,.3); cursor: pointer;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.25);
}
.heraldry-color-btn:hover { transform: scale(1.1); }

@media (max-width: 480px) {
  .heraldry-card { width: 48px; height: 70px; }
  .heraldry-card-glyph { font-size: 20px; }
  .heraldry-card-label { font-size: 7.5px; }
  .heraldry-table { gap: 20px; }
}

/* ---------- The Cursed Crone (Old Maid-like) ---------- */

.crone-board { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }

.crone-opponents { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.crone-opp-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; max-width: 260px; }
.crone-opp-slot.crone-opp-turn { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.crone-opp-slot.crone-opp-target { box-shadow: 0 0 0 2px var(--accent); }
.crone-opp-label { display: flex; align-items: center; gap: 6px; font-family: 'Cinzel', serif; font-size: 12.5px; color: var(--ink); }

.crone-opp-cards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.crone-mini-card {
  width: 30px; height: 42px; border-radius: 4px; border: 1.5px solid var(--panel-border);
  background: linear-gradient(160deg, #4a2f18, #2c1a0d); color: #cbb98f;
  display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.crone-mini-card svg { width: 14px; height: 14px; }
.crone-mini-card.playable { cursor: pointer; }
.crone-mini-card.playable:hover { transform: translateY(-4px); border-color: var(--accent); }

.crone-card {
  width: 46px; height: 64px; border-radius: 6px; border: 2px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center; background: #fffdf6; color: var(--ink);
}
.crone-card svg { width: 24px; height: 24px; }
.crone-card-cursed { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, #fffdf6); }

.crone-hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 620px; }

@media (max-width: 480px) {
  .crone-card { width: 38px; height: 54px; }
  .crone-card svg { width: 20px; height: 20px; }
  .crone-mini-card { width: 24px; height: 34px; }
  .crone-mini-card svg { width: 11px; height: 11px; }
}