/* ─── online.css ─────────────────────────────────────────────────────────────
   Online UI: in-game info panel, reconnect indicator, host/join panels, save/load cards, P2 perspective flip, undo-request banners.
   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. ─── */

/* In-game online status (zone ⑥): a slim strip that expands into details */
#online-info-panel {
  background: rgba(42,74,124,0.12);
  border: 1px solid #2a3a5c;
  border-radius: 4px;
  font-size: 0.8rem;
  overflow: hidden;
}
#oi-strip {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 8px;
  background: transparent; border: none; border-radius: 0;
  color: #9aa7bd; font-size: 0.75rem; text-align: left; cursor: pointer;
}
#oi-strip:hover { background: rgba(255,255,255,0.05); color: #d6deeb; }
#oi-strip .oi-strip-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#oi-strip .oi-strip-caret { flex: 0 0 auto; color: #667; font-size: 0.7rem; }
#oi-details { display: flex; flex-direction: column; padding: 1px 8px 7px; }
#online-info-panel .oi-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; color: #cfd6e4; font-size: 0.78rem;
}
#online-info-panel .oi-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
#online-info-panel .oi-dot.connected    { background: #4caf50; }
#online-info-panel .oi-dot.disconnected { background: #f55;    }
#online-info-panel .oi-dot.waiting      { background: #8a93a8; animation: oi-wait 1.6s ease-in-out infinite; }
@keyframes oi-wait { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
#online-info-panel .oi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "you" / "host" as small uppercase pills (host in the panel's gold) */
#online-info-panel .oi-tag {
  flex: 0 0 auto; font-size: 0.6rem; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #8a93a8; border: 1px solid #3a4156; border-radius: 999px; padding: 0 6px;
}
#online-info-panel .oi-tag.oi-host { color: #f0c040; border-color: #6b5a26; }
#online-info-panel .oi-waiting { color: #888; font-style: italic; }

/* Share block: ONE group for everything invite-code related — divider on top,
   label + the rehost link in its header, then the code with the copy/QR
   buttons attached as a single input-group. */
#online-info-panel .oi-share {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid #252c40;
}
#online-info-panel .oi-share-head { display: flex; align-items: baseline; }
#online-info-panel .oi-share-label {
  flex: 1; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7c87a0;
}
#online-info-panel #btn-oi-rehost {
  background: none; border: none; border-radius: 0; padding: 0;
  color: #6fa8dc; font-size: 0.68rem; cursor: pointer;
}
#online-info-panel #btn-oi-rehost:hover { background: none; color: #9cc3e8; text-decoration: underline; }
#online-info-panel .oi-code-group {
  display: flex; align-items: stretch;
  background: #10131d; border: 1px solid #2a3450; border-radius: 5px; overflow: hidden;
}
#online-info-panel .oi-code {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 0.95rem; color: #f0c040; letter-spacing: 0.18em;
  padding: 5px 0 5px 8px;
}
#online-info-panel .oi-code-group button {
  background: transparent; border: none; border-left: 1px solid #2a3450; border-radius: 0;
  padding: 0 8px; cursor: pointer; line-height: 0; display: flex; align-items: center;
}
#online-info-panel .oi-code-group button:hover { background: rgba(255,255,255,0.07); }
#online-info-panel .oi-code-group button img { width: 14px; height: 14px; display: block; opacity: 0.75; }
#online-info-panel .oi-code-group button:hover img { opacity: 1; }

/* Footnote caption + bail-out at the very bottom */
#online-info-panel .oi-conn-type { font-size: 0.62rem; color: #5e6577; margin-top: 5px; }
#online-info-panel .oi-conn-type:empty { display: none; }
#online-info-panel #btn-oi-cancel {
  display: block; width: 100%; margin-top: 5px;
  background: #38222a; color: #e2a9b3; border: 1px solid #5a3340; border-radius: 4px;
  padding: 4px 6px; cursor: pointer; font-size: 0.75rem;
}
#online-info-panel #btn-oi-cancel:hover { background: #4a2c31; color: #f5c6cc; }

/* Reconnecting indicator: letter-pop + cycling dots + glowing pulse */
#reconnecting-banner {
  text-align: center;
  font-weight: bold;
  color: #f0c040;
  padding: 4px 0;
  letter-spacing: 0.05em;
  animation: rc-glow 1.6s ease-in-out infinite;
}
#reconnecting-banner.hidden { display: none; }
#reconnecting-banner .rc-text span {
  display: inline-block;
  animation: rc-pop 1.6s ease-in-out infinite;
}
#reconnecting-banner .rc-text span:nth-child(1)  { animation-delay: 0.00s; }
#reconnecting-banner .rc-text span:nth-child(2)  { animation-delay: 0.08s; }
#reconnecting-banner .rc-text span:nth-child(3)  { animation-delay: 0.16s; }
#reconnecting-banner .rc-text span:nth-child(4)  { animation-delay: 0.24s; }
#reconnecting-banner .rc-text span:nth-child(5)  { animation-delay: 0.32s; }
#reconnecting-banner .rc-text span:nth-child(6)  { animation-delay: 0.40s; }
#reconnecting-banner .rc-text span:nth-child(7)  { animation-delay: 0.48s; }
#reconnecting-banner .rc-text span:nth-child(8)  { animation-delay: 0.56s; }
#reconnecting-banner .rc-text span:nth-child(9)  { animation-delay: 0.64s; }
#reconnecting-banner .rc-text span:nth-child(10) { animation-delay: 0.72s; }
#reconnecting-banner .rc-text span:nth-child(11) { animation-delay: 0.80s; }
#reconnecting-banner .rc-text span:nth-child(12) { animation-delay: 0.88s; }
#reconnecting-banner .rc-dots {
  display: inline-block;
  width: 1.2em;
  text-align: left;
}
#reconnecting-banner .rc-dots::after {
  content: '';
  animation: rc-dots 1.6s steps(4, end) infinite;
}
@keyframes rc-pop {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
  20%           { transform: translateY(-4px); opacity: 1;   }
}
@keyframes rc-dots {
  0%   { content: '';    }
  25%  { content: '.';   }
  50%  { content: '..';  }
  75%  { content: '...'; }
  100% { content: '';    }
}
@keyframes rc-glow {
  0%, 100% { text-shadow: 0 0 0  rgba(240,192,64,0);   }
  50%      { text-shadow: 0 0 8px rgba(240,192,64,0.7); }
}

/* "or resume a save" divider */
.menu-divider {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0.5rem 0 0.1rem;
}
.menu-divider::before, .menu-divider::after { content: ''; flex: 1; border-top: 1px solid #2a2a3a; }
.menu-divider span { padding: 0 0.6rem; }

/* Online host/join panels: appear inside the menu after clicking Host/Join */
.btn-online { background: #2a4a7c; }
.btn-online:hover { background: #3a6298; }
.btn-lan      { background: #2e7d4f; }
.btn-lan:hover      { background: #3f9966; }
.btn-lan:disabled, .btn-lan:disabled:hover { background: #555; cursor: default; }
#lan-status { font-size: 0.9rem; color: #ddd; text-align: center; min-height: 1.2em; }
.online-panel {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a3a5c;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  width: 300px;
}
.online-panel-title { font-size: 0.95rem; color: #aaa; }
#join-code-input {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: 1px solid #2a3a5c;
  border-radius: 4px;
}
#join-status { font-size: 0.85rem; color: #aaa; text-align: center; min-height: 1.2em; }
/* The join panel's primary action — online-blue like the mode buttons */
#btn-join-connect { background: #2a4a7c; }
#btn-join-connect:hover { background: #3a6298; }

/* ── QR overlay: shared by the host's "Show QR" and the joiner's scanner ── */
.qr-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) 1rem calc(env(safe-area-inset-bottom) + 1rem);
  background: rgba(0,0,0,0.72);
}
.qr-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem;
  width: min(92vw, 360px); padding: 1.1rem;
  background: #16161f; border: 1px solid #2a3a5c; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.qr-title { font-size: 1.05rem; font-weight: bold; color: #eee; text-align: center; }
.qr-body { display: flex; justify-content: center; }
/* White quiet-zone card so the dark modules scan reliably on any screen. */
.qr-svg {
  width: min(72vw, 280px); aspect-ratio: 1 / 1;
  background: #fff; padding: 12px; border-radius: 8px;
}
.qr-svg svg { display: block; width: 100%; height: 100%; }
/* Live camera preview while scanning (object-fit so it fills the square). */
.qr-video {
  width: min(72vw, 280px); aspect-ratio: 1 / 1;
  object-fit: cover; background: #000; border-radius: 8px;
}
.qr-note {
  font-family: 'Courier New', monospace; font-size: 1.5rem; font-weight: bold;
  letter-spacing: 0.25rem; text-align: center; color: #4cc9f0;
}

/* Save / load section on menu */
#save-load-section { width: 100%; }
#save-drop-zone {
  position: relative;
  border: 2px dashed #2a2a3a;
  border-radius: 6px;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: #666;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#save-drop-zone:hover, #save-drop-zone.dragover {
  border-color: #555;
  background: rgba(255,255,255,0.03);
  color: #999;
}
#save-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
/* Loaded-save confirmation */
#save-load-status { display: flex; flex-direction: column; gap: 0.35rem; }
#save-load-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(46,204,113,0.12);
  border: 1px solid #2ecc71;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: #d6f5e3;
}
#save-load-card.error { background: rgba(230,57,70,0.12); border-color: #e63946; color: #f5d6d9; }
#save-load-info { flex: 1; text-align: left; }
#save-load-info::before { content: '✓ '; color: #2ecc71; font-weight: bold; }
#save-load-card.error #save-load-info::before { content: '⚠ '; color: #e63946; }
#btn-clear-save {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  flex: 0 0 auto;
}
#btn-clear-save:hover { background: rgba(255,255,255,0.1); color: #fff; }
#save-load-hint { font-size: 0.78rem; color: #6fa8dc; text-align: center; }
#save-load-card.error ~ #save-load-hint { display: none; }

/* P2 online perspective: JS flips the cell rendering order in renderBoard
   so P2's supply zone (row 6) appears at the bottom. No CSS rotation needed;
   all images and buttons stay upright. */

/* History controls stay visible in online mode now — undo/redo navigate the
   local view only. A "Latest" button snaps the view back to the agreed-on tip;
   making new moves from past states requires an explicit Request Undo. */

/* Request Undo button: shows when exploring (future.length > 0) in online mode.
   Quiet chrome with an orange text accent — the loud orange belongs to the
   REQUEST BANNERS (something pending), not to this session-footer button. */
.btn-request {
  background: #2a2a3a;
  color: #f0b27a;
  border: 1px solid #5a4632;
  font-weight: bold;
  padding: 0.35rem 0.5rem;   /* footer-row height, like .btn-history */
  font-size: 0.85rem;
}
.btn-request:hover { background: #3a3a4a; }

/* Undo-request banners (both sender's "waiting..." and receiver's accept/deny) */
.undo-banner {
  background: rgba(244,162,97,0.12);
  border: 1px solid #f4a261;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.undo-banner button { width: 100%; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.undo-banner-actions { display: flex; gap: 0.3rem; }
.undo-banner-actions button { flex: 1; }
#btn-accept-undo { background: #2ecc71; color: #1a1a2e; font-weight: bold; }
#btn-accept-undo:hover { background: #28b765; }

/* Request compose: optional message to send along with the request */
#request-compose-title { font-weight: bold; }
/* One-shot attention pulse when the compose form opens — the trigger (e.g. the
   free-mode toggle) can be far away, so flash so the form isn't missed. */
.request-attention { animation: request-pulse 0.7s ease-in-out 3; }
@keyframes request-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,162,97,0);   border-color: #f4a261; }
  50%      { box-shadow: 0 0 0 3px rgba(244,162,97,0.55); border-color: #ffd9a0; }
}
#request-message {
  width: 100%; resize: vertical; min-height: 2.6em;
  background: #1a1a2a; color: #eee; border: 1px solid #444; border-radius: 4px;
  font: inherit; font-size: 0.8rem; line-height: 1.35; padding: 4px 6px;
}
/* Received message: 2-line preview; "Show more" opens the full-text overlay */
.req-msg {
  font-style: italic; color: #ead9c4; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.undo-banner .req-show-more { width: auto; align-self: flex-start; padding: 2px 8px; font-size: 0.72rem; }
#msg-overlay-body {
  color: #ddd; font-size: 0.95rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  max-height: 60vh; overflow-y: auto;
}

/* The base button look lives in base.css (button hierarchy). Player-identity
   variant: P2's black (used when a control belongs to a specific player). */
button.btn-p2 { background: #111; border: 1px solid #666; }
button.btn-p2:hover { background: #333; }