/* board.css — the two playmats, the shared Tumult track, and the sidebar. */

/* Game background — the ice-sky landscape behind the whole board. Scoped to the
   game page (deck selection has its own image). A dark scrim over the photo keeps
   the slate panels and log text legible. */
body {
  background:
    linear-gradient(rgba(8, 12, 20, 0.45), rgba(8, 12, 20, 0.62)),
    url('../assets/backgrounds/game_background.jpg') center center / cover no-repeat fixed;
}

#board { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }

/* ── Player areas ─────────────────────────────────────────────── */
/* opponent = [resources, expeditions]; you = [expeditions, resources] — the
   Expedition band always hugs the centre. Mana / Reserve / distances / First
   Player are all read directly off the board, so there is no HUD bar. */
.player-area { display: flex; flex-direction: column; gap: 4px; padding: 4px 12px; flex: 0 0 auto; }

/* ── Zones ────────────────────────────────────────────────────── */
/* Each play zone is a softly-shadowed rounded box. A faint label sits dead-centre
   so a new player can read what the box is; as cards fill the box they cover it
   (cards are z-index:1, the label z-index:0). No bracket frames, no edge text. */
.zone { position: relative; border-radius: 14px; }
.zone.expedition, .zone.reserve, .zone.landmarks {
  background: rgba(18, 22, 30, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.zone-label {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(233, 230, 223, 0.15);
}
.zone .card { z-index: 1; }

/* ── Expedition row: [Hero lane] [central terrain totals] [Companion lane] ── */
/* Fixed centre column (must match .res-band) so the Expedition boxes line up
   vertically with the Reserve / Landmark boxes below. 120px fits the spaced
   terrain totals; the Hero card centres in the same width on the row below. */
.exp-band { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 10px; align-items: stretch; }
/* overflow:clip (not auto) so a boosted card's badge can poke past the lane edge
   without triggering a scrollbar; the clip-margin keeps all badges fully visible. */
.expedition { display: flex; gap: 6px; padding: 6px 10px; min-height: 138px; align-items: flex-start; overflow: clip; overflow-clip-margin: 16px; }
/* Cards fill from the centre outward: the Hero lane (left) packs toward its right
   edge, the Companion lane (right) packs toward its left edge — both hugging the
   terrain column between them, with the first-played card nearest the centre. */
.hero-lane { flex-direction: row-reverse; justify-content: flex-start; }
.comp-lane { flex-direction: row; justify-content: flex-start; }
.expedition.drop-ok { box-shadow: inset 0 0 0 2px var(--accent); }
/* Bot cards hug the bottom edge (toward the track); player cards hug the top. */
.opp-area .expedition { align-items: flex-end; }

/* ── Central terrain totals (F / M / W) ─────────────────────────── */
/* One icon per terrain, shared between the two lanes. The Hero-lane total sits on
   the left of the icon, the Companion-lane total on the right, so the two
   Expeditions can be compared terrain-by-terrain in a single central column. */
.terrain-center { display: flex; flex-direction: column; justify-content: center; gap: 8px; align-self: center; padding: 0 4px; }
.tc-row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.tc-row img { width: 30px; height: 30px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.tc-num { min-width: 20px; font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-num.hero { text-align: right; }
.tc-num.comp { text-align: left; }
.tc-num.zero { opacity: 0.3; }
/* Lane-pick preview: the hovered side recolours to the player's faction accent and
   the growing terrains brighten + glow, showing the total they'd reach. */
.tc-num.preview { color: var(--accent); transition: color 0.12s, text-shadow 0.12s; }
.tc-num.preview.up { color: var(--accent-soft); text-shadow: 0 0 11px rgba(var(--accent-glow), 0.85); }

/* ── Resource row: [Reserve] [Hero card] [Landmarks + piles] ────── */
.res-band { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 10px; align-items: stretch; min-height: 142px; }
.res-band .zone { display: flex; gap: 6px; padding: 8px 10px; align-items: flex-start; overflow: clip; overflow-clip-margin: 16px; }
.opp-area .res-band .zone { align-items: flex-end; }
/* Reserve (left of Hero) packs right, Landmarks (right of Hero) packs left — both
   grow from the centre outward, like the Expedition lanes above. */
.zone.reserve { justify-content: flex-end; }
.zone.landmarks { justify-content: flex-start; }
.res-right { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.res-right .zone.landmarks { flex: 1 1 0; }
.zone.piles { flex: 0 0 auto; gap: 7px; margin-left: auto; padding: 8px 0; }

.hero-slot { display: flex; align-items: center; justify-content: center; padding: 4px; position: relative; }
.hero-slot.empty { min-width: 96px; }
.hero-slot.empty::after { content: 'HERO'; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; }
/* First Player indicator: a glowing blue-gold frame that wraps the Hero card.
   The PNG's transparent window is the central ~74%×80%, so the overlay is sized
   a touch larger than the 96×134 card and centred on it, letting the window line
   up with the card edges and the swirl medallion peek at the top like a badge.
   Centred on the slot (= on the card) so it stays just inside the board even for
   the opponent's Hero, which sits flush against the top edge. */
.fp-frame {
  position: absolute; left: 50%; top: 50%; width: 122px; height: 156px;
  transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(90, 170, 255, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Mana orbs — punch-board chips above (opponent) and below (you) the Tumult track.
   Ready = mana_full art with a white ring; spent = mana_empty art with a grey ring. */
/* Short rows so the orbs tuck into the gap between the Tumult track and the
   Expedition bands instead of spilling onto the cards. The track-stack is centred
   on the track, so shrinking these rows pulls the bot orbs down and the player orbs
   up (both toward the track), keeping a small gap to the Expeditions on either side. */
.center-mana { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; min-height: 20px; }
.orb {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  border: 2px solid #888; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); flex: 0 0 auto;
}
.orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orb.full { border-color: #fff; }
.orb.empty { border-color: #888; }

/* Deck / discard piles */
.pile {
  width: 64px; height: 90px; border-radius: var(--card-radius); border: 1px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; gap: 3px; position: relative;
}
.pile.has-cards { border-style: solid; background: linear-gradient(160deg, #2a2f3a, #20242c); color: var(--ink); cursor: pointer; }
.pile.info-pile, .pile.info-pile.has-cards { cursor: default; }   /* Hand count is display-only */
.pile .pile-count { font-size: 1.1rem; font-weight: 700; }

.empty-hint { color: var(--muted); font-size: 0.68rem; opacity: 0.6; margin: auto; }

/* ── Centre: Tumult track + banner ────────────────────────────── */
.center-strip {
  position: relative;
  flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 14px; padding: 4px 14px; min-height: 0;
  background: radial-gradient(600px 150px at 45% 50%, rgba(var(--accent-glow), 0.08), transparent 70%);
}
/* Game info on the LEFT of the centre band: the Day title and the phase list,
   with the current phase highlighted. Taken out of flow so the track-stack stays
   centred on the board (middle tumult card + middle mana orb align with the Hero). */
.game-info { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 5; width: 150px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.day-title { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.phase-list { display: flex; flex-direction: column; gap: 5px; }
.phase-item {
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); opacity: 0.55; transition: color 0.15s, opacity 0.15s;
}
.phase-item.active { color: var(--accent-soft); opacity: 1; font-weight: 700; }

/* Player action buttons — bottom-right corner, near the hand. */
#player-controls {
  position: absolute; right: 16px; bottom: 14px; z-index: 20;
  width: 150px; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
#btn-pass { width: 100%; padding: 11px; background: var(--accent); border-color: var(--accent); color: #1a0f06; font-weight: 700; }
#btn-pass:disabled { background: var(--bg-3); color: var(--ink); }
#btn-afteryou { width: 100%; padding: 9px; font-weight: 700; background: var(--bg-2); border-color: var(--accent-soft); color: var(--accent-soft); }
#btn-afteryou:hover { background: var(--accent-soft); color: #160c04; }

/* Quick-action bar (exhaust / support abilities before play-or-pass) */
#quick-actions { display: flex; flex-direction: column; gap: 6px; }
#quick-actions:empty { display: none; }
.qa-btn { width: 100%; padding: 8px 10px; font-size: 0.78rem; font-weight: 600; line-height: 1.2; background: var(--bg-2); border-color: var(--accent-soft); color: var(--accent-soft); }
.qa-btn:hover:not(:disabled) { background: var(--accent); color: #160c04; }
/* Support abilities (discard-from-Reserve quick actions) read in a cooler hue. */
.qa-support { border-color: #6fa8dc; color: #9ec9ee; }
.qa-support:hover:not(:disabled) { background: #6fa8dc; color: #0b1422; }

/* Adventure line: real landscape Hero / Tumult / Companion cards, all one size.
   Expedition markers rest ON the cards; terrain chips sit at the top of each region. */
.track-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.track { position: relative; display: flex; justify-content: center; align-self: stretch; flex: 0 0 auto; min-width: 0; }
.adv-line { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0; }
.adv-card { position: relative; width: 194px; height: 138px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); flex: 0 0 auto; }
.adv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-card.flip img { transform: rotate(180deg); }   /* flipped Tumult: icons match the assigned half order */

.marker-layer { position: absolute; inset: 0; pointer-events: none; }
.trk-marker {
  position: absolute; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid; background: #0c0d10; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); z-index: 3;
}
.trk-marker img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* Faction-coloured ring + glow (--fac is set per marker to its player's hue),
   so each Hero/Companion token matches its faction and pops off the track art. */
.trk-marker { border-color: var(--fac, var(--accent)); box-shadow: 0 0 11px 2px var(--fac, var(--accent)), 0 2px 5px rgba(0, 0, 0, 0.7); }
.trk-marker.meet { box-shadow: 0 0 0 2px #fff, 0 0 11px var(--accent); }

/* ── Hand ─────────────────────────────────────────────────────── */
.hand-zone {
  flex: 0 0 auto; display: flex; gap: 6px; justify-content: center; align-items: flex-end;
  /* overflow-x:auto makes the browser clip the *top* too, so a card that lifts on
     hover would get its top cut. Reserve headroom up top (padding-top > the hover
     lift) so the enlarged card stays inside the scrollport. */
  padding: 16px 12px 4px; min-height: 154px; overflow-x: auto;
}
/* Opponent's hand: face-down card backs fanned out and peeking from the top edge.
   Absolutely placed over the board (no layout height); the board's overflow:hidden
   clips the tops. Centred over the right side — ~2/3 across the Landmark area — and
   fanned via a per-card rotation (set in renderOppHand) about the bottom pivot. */
.opp-hand {
  position: absolute; top: -70px; left: 76%; transform: translateX(-50%) rotate(180deg); z-index: 3;
  display: flex; align-items: flex-start;
  pointer-events: none;
}
.card.cardback { width: 96px; height: 134px; flex: 0 0 auto; transform-origin: 50% 0%; }
.card.cardback + .card.cardback { margin-left: -46px; }   /* overlap into a fan (pivots at the top) */

/* ── Sidebar ──────────────────────────────────────────────────── */
/* The board background extends behind the log; a light scrim keeps text legible.
   Dividers are 2px white lines (matching the playmat zone borders). */
#sidebar { background: rgba(8, 12, 20, 0.4); border-left: 2px solid rgba(255, 255, 255, 0.75); display: flex; flex-direction: column; height: 100vh; }
.log-head { padding: 10px 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.log-head button { padding: 3px 9px; font-size: 0.75rem; }
#log { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; }
.log-entry { line-height: 1.3; color: var(--muted); }
.log-phase { color: var(--accent-soft); font-weight: 700; margin-top: 4px; }
.log-system { color: #c9b489; font-style: italic; }
.log-dusk { color: var(--good); }
.log-play, .log-draw, .log-mana, .log-action { color: var(--ink); }
/* Log font-size steppers in the header */
.log-zoom { display: flex; gap: 6px; }
.log-zoom button { width: 26px; padding: 2px 0; font-size: 1rem; line-height: 1; font-weight: 700; text-align: center; }

/* Footer actions under the log — no divider, just buttons. */
.log-foot { padding: 10px 14px; display: flex; gap: 8px; }
.log-foot button { flex: 1 1 0; font-size: 0.8rem; }

/* How-to-play help list */
.howto-list { color: var(--muted); font-size: 0.86rem; line-height: 1.5; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.howto-list b { color: var(--ink); }

#board.locked .expedition, #board.locked .hand-zone { /* hint only; gating is in JS */ }