/* board.css — player areas, bars, fields, ink, hand, sidebar, menu */

.player-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
/* Fields grow toward the centre so the action fills the middle of the board. */
.player-area.opp { justify-content: flex-start; }
.player-area.you { justify-content: flex-end; }

/* ── Player status bar ── */
.player-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(90deg, rgba(40, 49, 102, 0.55), rgba(27, 35, 80, 0.25));
  border: 1px solid rgba(233, 196, 106, 0.18);
  border-radius: 10px;
  padding: 6px 12px;
}
.who { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.name { font-size: 1.3rem; color: var(--gold-bright); }
.ink-pill {
  font-size: 1rem; color: var(--sapphire); font-weight: 700;
  background: rgba(74, 163, 232, 0.14); border-radius: 20px; padding: 3px 12px;
}
.lore-track {
  position: relative; flex: 1; height: 32px;
  background: rgba(0, 0, 0, 0.35); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(233, 196, 106, 0.25);
}
.lore-fill {
  position: absolute; inset: 0; width: 0;
  background: linear-gradient(90deg, #b98a2e, var(--gold-bright));
  transition: width 0.5s ease;
}
.lore-fill.you-fill { background: linear-gradient(90deg, #2e7bb9, #7ad0ff); }
.lore-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: 0.04em;
}
.piles { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--muted); }
.piles .pile, .piles .hand-pile { cursor: default; white-space: nowrap; }
.piles .pile[id] { cursor: pointer; }
.piles .pile[id]:hover { color: var(--gold-bright); }

.end-turn {
  background: linear-gradient(180deg, #d9a93c, #b07d1e);
  color: #2a1c00; border: none; border-radius: 9px;
  padding: 10px 22px; font-weight: 700; font-size: 1rem;
  box-shadow: var(--shadow);
}
.end-turn:not(:disabled):hover { background: linear-gradient(180deg, var(--gold-bright), #cd9326); }

.redo-turn {
  background: var(--ink-3); color: var(--gold-bright);
  border: 1px solid var(--gold); border-radius: 9px;
  padding: 10px 16px; font-weight: 700; font-size: 0.95rem;
  box-shadow: var(--shadow);
}
.redo-turn:not(:disabled):hover { background: var(--ink-2); border-color: var(--gold-bright); }

/* ── Ink row (face-down resource cards) ── */
.ink-row {
  display: flex; gap: 5px; align-items: center; min-height: 30px; padding: 0 6px;
  flex-wrap: wrap;
}
.player-area.opp .ink-row { justify-content: flex-start; }
.ink-card {
  width: 40px; height: 28px; border-radius: 5px;
  background: linear-gradient(135deg, #3a2c6b, #1c2a5e);
  border: 1px solid rgba(233, 196, 106, 0.45);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.ink-card.spent { opacity: 0.32; filter: saturate(0.3); }
.ink-empty { font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ── Play row: characters (≈70%) beside their items (≈30%) ── */
.play-row {
  flex: 1 1 auto;
  display: flex; gap: 14px; min-height: 0;
}

/* Items zone — its own ~30% column of full (portrait) item cards, shown like
   characters. Collapses to nothing when you control no items so the character
   field can use the whole row (e.g. the item-less Gateway decks). */
.items-zone {
  flex: 0 0 30%;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-content: center; justify-content: center; align-items: center;
  padding: 8px; min-height: 140px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(233, 196, 106, 0.20);
  border-radius: 12px;
  overflow: visible;
}
.items-zone:empty { display: none; }
.player-area.opp .items-zone { align-content: flex-end; }
.player-area.you .items-zone { align-content: flex-start; }

/* ── Character field — fills the rest of the row (~70%), cards centred ── */
.field {
  flex: 1 1 0;
  display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px; min-height: 140px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(233, 196, 106, 0.12);
  border-radius: 12px;
  overflow: visible;
}
.player-area.opp .field { align-items: flex-end; }   /* hug the centre strip */
.player-area.you .field { align-items: flex-start; }
.empty-zone {
  width: 100%; text-align: center; color: var(--muted);
  font-style: italic; font-size: 0.95rem; padding: 30px 0; align-self: center;
}

/* ── Hand ── */
.hand {
  display: flex; gap: 12px; justify-content: center; align-items: flex-end;
  min-height: 178px; padding: 4px; flex-wrap: nowrap; overflow: visible;
}

/* ── Center strip ── */
.center-strip {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 6px 0;
}
.turn-banner { font-size: 1.35rem; color: var(--gold-bright); }
.phase-label {
  font-size: 0.95rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em;
}

/* ── Sidebar / log ── */
#sidebar {
  background: linear-gradient(180deg, rgba(18, 23, 54, 0.9), rgba(10, 14, 31, 0.95));
  border-left: 1px solid rgba(233, 196, 106, 0.18);
  display: flex; flex-direction: column; min-height: 0;
}
.log-head {
  font-family: 'Cinzel', serif; color: var(--gold);
  padding: 12px 14px 8px; font-size: 0.95rem; border-bottom: 1px solid rgba(233, 196, 106, 0.15);
}
#log { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 0.82rem; line-height: 1.4; }
.log-entry { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: #cdd3ee; }
.log-phase { color: var(--gold); font-weight: 700; margin-top: 4px; }
.log-system { color: var(--gold-bright); font-style: italic; }
.log-lore { color: #7ad0ff; }
.log-damage { color: #ffb38a; }
.log-banish { color: var(--bad); font-weight: 600; }
.log-challenge { color: var(--amber); }
.log-play, .log-ink, .log-draw, .log-heal { color: #cdd3ee; }
.legend {
  padding: 10px 14px; font-size: 0.74rem; color: var(--muted);
  border-top: 1px solid rgba(233, 196, 106, 0.15); line-height: 1.5;
}
.legend b { color: var(--gold); }

/* ── Floating context menu ── */
#context-menu {
  position: fixed; display: none; flex-direction: column; gap: 2px;
  background: var(--ink-2); border: 1px solid var(--gold);
  border-radius: 8px; padding: 5px; box-shadow: var(--shadow); z-index: 60;
}
.menu-btn {
  background: transparent; color: var(--parch); border: none;
  padding: 7px 16px; text-align: left; border-radius: 5px; font-size: 0.86rem; white-space: nowrap;
}
.menu-btn:not(:disabled):hover { background: var(--ink-3); color: var(--gold-bright); }