/* ─── overlays.css ─────────────────────────────────────────────────────────────
   Connection-lost overlay and the game-over overlay (incl. confetti area).
   Split out of the old style.css as a pure ordered slice. The <link> order
   in index.html (base → menu → online → board → folks → war → overlays →
   mobile → free-mode) preserves the original cascade — do not reorder. ─── */

/* CONNECTION overlay — reuses the same shape as game-over but with a red accent */
#connection-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100; /* above game-over so a disconnect-during-gameover still surfaces */
}
#connection-overlay.hidden { display: none; }
#connection-box {
  background: #16213e;
  border: 2px solid #e63946;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  animation: box-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#connection-title  { font-size: 1.3rem; font-weight: bold; color: #e63946; }
#connection-message { color: #aaa; font-size: 0.95rem; }
#connection-buttons { display: flex; gap: 0.5rem; }
#connection-buttons button { flex: 1; }
/* Quit abandons the session — destructive red */
#btn-connection-quit { background: #a32733; color: #fff; }
#btn-connection-quit:hover { background: #c1121f; }

/* GAMEOVER overlay */
#eow-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  pointer-events: none;
}
#eow-popup.hidden { display: none; }
#eow-popup-box {
  background: #1a2a1a;
  border: 2px solid #7a5c00;
  border-radius: 10px;
  padding: 1.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: all;
  animation: box-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#eow-popup-title { font-size: 1.2rem; font-weight: bold; color: #f0c040; }
#eow-popup-msg   { color: #ccc; font-size: 0.9rem; }
#btn-eow-ok      { align-self: center; padding: 0.4rem 1.5rem; background: #2a4a7c; }
#btn-eow-ok:hover { background: #3a6298; }

#game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#game-over-overlay.hidden { display: none; }
#game-over-box {
  background: #16213e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: box-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

@keyframes box-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Reference overlay: swipeable rulebook pages / creature-card scans */
.ref-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  width: min(94vw, 720px); max-height: 94vh; padding: 0.8rem;
  background: #16161f; border: 1px solid #2a3a5c; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.ref-head { display: flex; align-items: center; gap: 8px; }
.ref-title { font-weight: bold; color: #eee; flex: 1; }
#ref-folk-select {
  background: #1a1a2a; color: #eee; border: 1px solid #444;
  border-radius: 4px; padding: 3px 6px; font-size: 0.85rem;
}
#ref-pdf-link {
  flex: 0 0 auto; padding: 0.2rem 0.6rem; font-size: 0.8rem;
  color: #9ab8e0; background: #2a2a3a; border: 1px solid #3a3a4a;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
}
#ref-pdf-link:hover { background: #3a3a4a; color: #cde; }
#btn-ref-close { padding: 0.2rem 0.6rem; }
.ref-body { display: flex; align-items: center; gap: 6px; min-height: 0; }
#ref-img {
  flex: 1; min-width: 0; max-height: calc(94vh - 7rem);
  object-fit: contain; border-radius: 6px;
  user-select: none; touch-action: pan-y;   /* horizontal swipes page; vertical still scrolls */
}
.ref-nav {
  flex: 0 0 auto; width: 38px; height: 64px; padding: 0;
  font-size: 1.6rem; line-height: 1; border-radius: 6px;
}
.ref-nav:disabled { opacity: 0.35; }
.ref-caption { text-align: center; color: #aaa; font-size: 0.85rem; }

.confetti {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
  pointer-events: none;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.8; }
}
#gameover-title { font-size: 2.2rem; color: #e63946; font-weight: bold; }
#gameover-scores { font-size: 1.1rem; color: #ddd; }
#gameover-buttons { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.25rem; }
#gameover-buttons button { flex: 1; }
#btn-restart { background: #2a4a7c; }
#btn-restart:hover { background: #3a6298; }