/* overlays.css — modals, target banner, game over. */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 7, 9, 0.72); z-index: 160;
  display: none; align-items: center; justify-content: center;
}
/* Dock-left dialogs are centred in the space LEFT of the hover preview (which is
   pinned on the right), so the gap on the dialog's left equals the gap between the
   dialog and the preview. 690px = preview width (380) + its right offset (310). */
.modal-overlay.dock-left { justify-content: center; padding-right: 690px; }
.modal {
  position: relative;
  background: var(--bg-2); border: 1px solid var(--accent); border-radius: 14px;
  padding: 20px 24px; max-width: min(880px, 86vw); max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow);
}
/* Borderless cross, pinned to the modal's top-right corner. */
.modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: none; border-radius: 6px;
  color: var(--muted); font-size: 1.7rem; line-height: 1;
}
.modal-close:hover:not(:disabled) {
  background: transparent; border: none; color: var(--ink);
}
.modal-overlay.dock-left .modal { max-width: min(1040px, calc(100vw - 740px)); }
/* Small "click anywhere to close" hint, pinned to the dialog's bottom-right and kept
   visible while the card grid scrolls (text-shadow keeps it legible over cards). */
.modal-hint {
  position: sticky; bottom: 0; margin-top: 10px; text-align: right;
  font-size: 0.7rem; color: var(--muted); pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.modal.narrow { max-width: 420px; }
.modal.center { text-align: center; }
.modal h1, .modal h2 { margin-bottom: 8px; }
.modal p { color: var(--muted); margin-bottom: 14px; line-height: 1.4; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.modal.center .modal-actions { justify-content: center; }

.card-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.card-grid .card { width: 150px; height: 210px; cursor: pointer; }
#discard-grid { gap: 14px; }
#discard-grid .card { width: 240px; height: 336px; }
.card-grid .card.picked { outline: 3px solid var(--accent); box-shadow: 0 0 16px var(--accent); }
.pick-count { color: var(--accent-soft); font-weight: 700; }

/* Target banner — anchored to the BOTTOM over the player's own area, where their
   attention sits while choosing cards. Centred on the board column (the 290px right
   sidebar is excluded, so it sits over the player's cards rather than the whole
   window). Overlapping the player's cards here is intentional. */
#target-banner {
  position: fixed; bottom: 170px; left: calc((100vw - 290px) / 2); transform: translateX(-50%); z-index: 170;
  display: none; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #3a2310, var(--bg-2)); border: 2px solid var(--accent); border-radius: 24px;
  padding: 11px 24px; box-shadow: var(--shadow), 0 0 18px 2px rgba(var(--accent-glow), 0.55);
  animation: tb-glow 1.3s ease-in-out infinite alternate;
}
#target-banner .tb-text {
  font-weight: 700; font-size: 1.18rem; letter-spacing: 0.01em; color: #ffe9d6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
@keyframes tb-glow {
  from { box-shadow: var(--shadow), 0 0 12px 1px rgba(var(--accent-glow), 0.4); }
  to   { box-shadow: var(--shadow), 0 0 24px 4px rgba(var(--accent-glow), 0.85); }
}

/* Generic choice modal (confirm / choose-one) */
.choice-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; align-items: stretch; }
.choice-btn { padding: 12px 18px; font-size: 0.95rem; }

/* Expedition lane picker — click one of the two highlighted own lanes in place */
.exp-pick-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 9px;
  background: rgba(var(--accent-glow), 0.16);
  border: 2px dashed var(--accent);
  box-shadow: inset 0 0 22px rgba(var(--accent-glow), 0.34);
  animation: tpulse 0.9s infinite alternate;
  transition: background 0.12s;
}
.exp-pick-overlay:hover { background: rgba(var(--accent-glow), 0.34); }
.exp-pick-overlay .epo-name { font-weight: 800; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }
.exp-pick-overlay .epo-tot { font-size: 0.82rem; font-weight: 700; color: var(--accent-soft); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }

#gameover .modal { border-width: 2px; }
#gameover h1 { font-size: 2rem; color: var(--accent); }

/* Dice roll popup (LYRA) */
#dice-overlay {
  position: fixed; inset: 0; z-index: 180; display: none;
  align-items: center; justify-content: center; pointer-events: none;
}
#dice-overlay.show { display: flex; }
.dice-box { display: flex; gap: 18px; }
.dice-box .die {
  font-size: 92px; line-height: 1; color: var(--ink);
  background: var(--bg-2); border: 3px solid var(--accent); border-radius: 18px;
  padding: 4px 14px 12px; box-shadow: var(--shadow);
  animation: die-pop 0.34s cubic-bezier(.2, 1.3, .5, 1);
}
.dice-box .die.you { border-color: var(--good); }
.dice-box .die.opp { border-color: var(--opp); }
@keyframes die-pop {
  0%   { transform: scale(0.3) rotate(-28deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(9deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}