/* ══════════════════════════════════════════════
   MAIN BOARD
   ══════════════════════════════════════════════ */
.board-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* ── Bot hand (top) ── */
.bot-hand-row {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 4px;
  overflow: hidden;
  position: relative;
}
.bot-hand-fan {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.deck-back-card {
  width: 100px;
  height: 140px;
  border-radius: 4px;
  background: url('../assets/cards/cardback.webp') center/cover no-repeat;
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transform: rotate(180deg);
}

/* ── Board halves ── */
.board-half {
  height: 34vh;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 0;
  transition: background 0.3s ease;
}
.board-half.active-turn-player {
  background: rgba(180,140,40,0.14);
}
.board-half.active-turn-bot {
  background: rgba(60,100,160,0.16);
}
.bot-hand-row,
.player-hand-row {
  transition: background 0.3s ease;
}
.bot-hand-row.active-turn-bot {
  background: rgba(60,100,160,0.16);
}
.player-hand-row.active-turn-player {
  background: rgba(180,140,40,0.14);
}

.edge-pile {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pile-card {
  width: 100px;
  height: 140px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 10px 20px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.1);
}
.pile-card.deck-card {
  background: url('../assets/cards/cardback.webp') center/cover no-repeat;
  border: none;
}
.pile-card.deck-card.player-deck-card {
  box-shadow: 0 10px 20px rgba(0,0,0,0.7), 0 0 10px rgba(201,168,76,0.3);
}
.pile-card.discard-card {
  background: #0f1225;
  border: 1px solid rgba(123,142,160,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pile-card.discard-card.player-discard-card { border-color: rgba(201,168,76,0.3); }

.discard-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  display: block;
}

.pile-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  background: #0f1225;
  border: 1px solid var(--bot-blue);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.pile-badge.player-badge {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(201,168,76,0.3);
}
.pile-badge.discard-badge {
  top: auto; left: auto; bottom: 5px; right: 6px;
  width: auto; height: auto;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 22px;
  background: rgba(5,7,20,0.88);
  border-color: var(--gold);
  color: var(--gold);
  line-height: 1.3;
}

/* ── Deck count: dark pill centered on card ── */
.deck-card .pile-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 4px 14px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--f-heading);
  font-size: 30px;
  font-weight: 700;
  color: #4caf50;
  text-shadow: 0 0 12px rgba(76,175,80,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.deck-card .pile-badge.deck-warning {
  color: #f5c518;
  text-shadow: 0 0 10px rgba(245,197,24,0.7);
}
.deck-card .pile-badge.deck-danger {
  color: #e53935;
  text-shadow: 0 0 10px rgba(229,57,53,0.7);
}

.zone-title {
  position: absolute;
  top: -10px;
  left: 3px;
  font-family: var(--f-heading);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(201,168,76,0.75);
  padding: 0 5px;
  white-space: nowrap;
}

.board-zones-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  height: 130px;
}
.board-zones-center .board-zone {
  flex: 1;
  min-height: 0;
}

/* Character zone: sized to hug the char-card */
.char-zone {
  flex-shrink: 0;
  padding: 16px 12px 12px;
  align-self: center;
}
.board-zone {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 1px solid rgba(201,168,76,0.1);
  position: relative;
  display: flex;
  gap: 10px;
  padding: 16px 14px 12px;
  min-width: 100px;
  min-height: 100px;
  align-items: center;
}

/* ── Card thumbnail (creatures on board) ── */
.card-thumb {
  width: 100px;
  height: 140px;
  border-radius: 4px;
  position: relative;
  background: #1a2035;
  border: 2px solid #444;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25,0.8,0.25,1);
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-thumb:hover {
  transform: translateY(-5px) scale(1.05);
  z-index: 50;
  box-shadow: 0 8px 16px rgba(0,0,0,0.7), 0 0 10px rgba(201,168,76,0.3);
}
.card-thumb.target-available {
  border-color: var(--damage) !important;
  box-shadow: 0 0 14px rgba(192,57,43,0.7);
  animation: pulse-red 1s infinite;
  cursor: crosshair;
}

/* ── Character card ── */
.char-card {
  width: 100px;
  height: 140px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: linear-gradient(135deg, #1a2035 0%, #0a0e17 100%);
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.char-card:hover { box-shadow: 0 0 24px rgba(201,168,76,0.5); }
.char-card.player-char {
  border: 2px solid var(--gold);
  box-shadow: 0 0 20px rgba(201,168,76,0.4);
}
.char-card.bot-char {
  border: 2px solid var(--bot-blue);
  box-shadow: 0 0 20px rgba(123,142,160,0.4);
}

/* ── Stat badges on creature thumbnails ── */
.stat-badge {
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 8px;
  padding: 1px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--f-mono);
  background: rgba(5,7,20,0.88);
  border: 1px solid rgba(255,255,255,0.3);
  z-index: 10;
  line-height: 1.3;
  white-space: nowrap;
}
.cost-badge        { top: 4px; left: 4px; color: #f1c40f; border-color: rgba(241,196,15,0.6); }
.dmg-badge         { bottom: 4px; left: 4px; color: #e74c3c; border-color: rgba(231,76,60,0.6); }
.hp-badge          { bottom: 4px; right: 4px; color: #5b9fdb; border-color: rgba(91,159,219,0.6); }
.dmg-counter-badge { top: 4px; right: 4px; color: #e74c3c; border-color: rgba(231,76,60,0.5); }

/* ── Lessons icon panel (compact, next to char card) ── */
.lessons-panel {
  width: 64px;
  height: 130px;
  align-self: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(201,168,76,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 6px 10px;
  position: relative;
}

.lesson-icon-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lesson-icon-item:hover { opacity: 0.85; }

.lesson-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
  flex-shrink: 0;
}

.lesson-icon-count {
  font-family: var(--f-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
/* Lesson type colors */
.lesson-type-c { color: #2763a0; text-shadow: 0 0 6px rgba(39,99,160,0.5); }   /* Charms — blue */
.lesson-type-t { color: #b04248; text-shadow: 0 0 6px rgba(176,66,72,0.5); }   /* Transfiguration — orange/red */
.lesson-type-f { color: #886b49; text-shadow: 0 0 6px rgba(136,107,73,0.5); }  /* CoMC — brown/green */
.lesson-type-p { color: #43965b; text-shadow: 0 0 6px rgba(67,150,91,0.5); }  /* Potions — purple */
.lesson-type-q { color: #deb347; text-shadow: 0 0 6px rgba(222,179,71,0.5); } /* Quidditch — gold */

/* ── Center strip: just the dividing line ── */
.center-strip {
  height: 0;
  position: relative;
  border-top: 1px solid rgba(201,168,76,0.25);
  overflow: visible;
  z-index: 15;
}
.action-indicator {
  position: absolute;
  left: 122px;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 16px;
  z-index: 20;
  pointer-events: none;
}
.big-action-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15,18,37,0.9);
  border: 2px solid rgba(201,168,76,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}
.big-action-dot.filled {
  background: radial-gradient(circle at 35% 30%, #ffe59b, #c9a84c 55%, #7a5a1a);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 24px rgba(232,163,23,0.75), 0 6px 18px rgba(0,0,0,0.7);
}
.big-action-dot.bot-filled {
  background: radial-gradient(circle at 35% 30%, #c2d5e6, #7b8ea0 55%, #3a4a5c);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 22px rgba(123,142,160,0.7), 0 6px 18px rgba(0,0,0,0.7);
}
.big-action-dot.spent {
  opacity: 0.25;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

/* ── Player hand (bottom) ── */
.player-hand-row {
  height: 20vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}
.player-hand-fan { display: flex; align-items: flex-end; gap: 8px; }

.play-area-deck-name {
  position: absolute;
  left: 16px;
  max-width: 200px;
  font-family: var(--f-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
  pointer-events: none;
  z-index: 10;
}
.bot-area-name {
  top: 8px;
  color: var(--bot-blue);
  text-shadow: 0 0 16px rgba(100,160,220,0.5);
}
.player-area-name {
  bottom: 16px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(201,168,76,0.5);
}

.hand-card {
  width: 100px;
  height: 140px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
  position: relative;
  background: #1a2035;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 20px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.hand-card:hover {
  transform: translateY(-14px) scale(1.05);
  z-index: 100;
  box-shadow: 0 16px 32px rgba(0,0,0,0.9), 0 0 16px rgba(232,163,23,0.3);
}
.hand-card.unaffordable { opacity: 0.45; filter: grayscale(0.8); cursor: not-allowed; }
.hand-card.highlighted  { border-color: var(--gold-glow) !important; box-shadow: 0 0 30px rgba(232,163,23,0.6) !important; }

@keyframes pulse-red {
  0%,100% { box-shadow: 0 0 10px rgba(192,57,43,0.5); }
  50%     { box-shadow: 0 0 22px rgba(192,57,43,0.9); }
}