/* ============================================================
   Combat Redesign — jam glass-morphism applied to combat UI.
   Loaded AFTER style.css to override legacy skeuo-medieval look.
   Locked elements (combat-grid, combat-main, hero-panel anchors,
   sprite sizes, city4 offsets) are NEVER touched here.
   ============================================================ */

/* ── Sidebar shell + log panel + coop chat ───────────────────── */
.combat-sidebar {
  background: linear-gradient(180deg, rgba(13,8,5,0.92) 0%, rgba(8,5,3,0.96) 100%);
  border-right: 1px solid var(--gold-line, rgba(201,168,76,0.35));
  box-shadow: 2px 0 24px rgba(0,0,0,0.55);
}

.combat-log-panel,
.coop-chat-panel {
  background: linear-gradient(180deg, rgba(26,18,9,0.62), rgba(13,8,5,0.78));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-family: var(--font-body, 'Crimson Text', Georgia, serif);
  border: none;
}
.coop-chat-panel {
  border-top: 1px solid var(--gold-line, rgba(201,168,76,0.35));
}

.combat-log-header,
.coop-chat-header {
  padding: 12px 16px 10px;
  background: transparent;
  border-bottom: none;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--gold-light, #e8c96d);
  text-shadow: none;
  position: relative;
}
/* Tiny gold diamond divider beneath each header (uses .div-gold tokens) */
.combat-log-header::after,
.coop-chat-header::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-line, rgba(201,168,76,0.35)) 18%,
    var(--gold-line, rgba(201,168,76,0.35)) 82%,
    transparent);
}

.combat-log-body,
.coop-chat-body {
  font-family: var(--font-body, 'Crimson Text', Georgia, serif);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text, #e8e0c8);
  padding: 10px 14px;
}
.combat-log-entry {
  border-bottom: 1px solid rgba(201,168,76,0.06);
  padding: 3px 0;
  color: var(--text-dim, #8a7a60);
}
.combat-log-entry.log-player-action { color: #e8c96d; }
.combat-log-entry.log-enemy-action  { color: #d97a6a; }
.combat-log-entry.log-round-separator {
  color: rgba(201,168,76,0.6);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(201,168,76,0.18);
  padding: 4px 0;
  margin: 3px 0;
}

/* Coop chat input: glass field + gold-grad send button */
.coop-chat-input-row {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid var(--gold-line, rgba(201,168,76,0.35));
  padding: 8px 10px;
  gap: 6px;
}
.coop-chat-input {
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--gold-line, rgba(201,168,76,0.35));
  border-radius: 8px;
  color: var(--text, #e8e0c8);
  font-family: var(--font-body, 'Crimson Text', Georgia, serif);
  padding: 6px 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.coop-chat-input:focus {
  border-color: var(--gold-light, #e8c96d);
  box-shadow: 0 0 0 1px rgba(232,201,109,0.35);
}
.coop-chat-send {
  background: linear-gradient(180deg, #e8c96d 0%, #c9a84c 50%, #8a6f2e 100%);
  border: 1px solid #f0d27a;
  border-radius: 8px;
  color: #1a0f04;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  padding: 6px 14px;
  text-shadow: 0 1px 0 rgba(255,230,150,0.4);
  box-shadow: 0 4px 14px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s;
}
.coop-chat-send:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #f0d27a 0%, #d4b658 50%, #9a7d34 100%);
  box-shadow: 0 8px 20px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Custom scrollbars — slim gold */
.combat-log-body::-webkit-scrollbar,
.coop-chat-body::-webkit-scrollbar { width: 4px; }
.combat-log-body::-webkit-scrollbar-thumb,
.coop-chat-body::-webkit-scrollbar-thumb {
  background: var(--gold-line, rgba(201,168,76,0.35));
  border-radius: 2px;
}
.combat-log-body::-webkit-scrollbar-thumb:hover,
.coop-chat-body::-webkit-scrollbar-thumb:hover {
  background: rgba(232,201,109,0.55);
}