/* ══ SCROLL LOCK (modals) ══ */
html.scroll-locked { overflow:hidden !important; height:100vh; height:100dvh; }

/* ══ CONFIRM MODAL ══ */
.cfm-overlay {
  position:fixed; inset:0; z-index:var(--z-confirm-modal);
  display:flex; align-items:center; justify-content:center;
  background:var(--overlay-bg); backdrop-filter:var(--overlay-blur);
  animation:fadeIn 0.25s ease;
}
.cfm-modal {
  width:520px; max-width:94vw; max-height:90vh; overflow-y:auto;
  background:rgba(8,14,28,0.95); border-radius:var(--modal-radius);
  border:1px solid; padding:0;
  box-shadow:0 0 80px var(--shade-3); backdrop-filter:blur(20px);
  border-top:1px solid var(--tint-2);
  animation:evPop 0.3s ease;
}
.cfm-header {
  padding:28px 28px 18px; text-align:center;
  border-bottom:1px solid var(--tint-4);
}
.cfm-title {
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:900;
  letter-spacing:2px; text-shadow:0 0 20px currentColor;
}
.cfm-target {
  margin-top:10px; font-family:var(--font-display); font-size:18px;
  font-weight:700; letter-spacing:1.5px; color:var(--textbright);
}
.cfm-body { padding:18px 28px 10px; }
.cfm-troops {
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}
.cfm-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:var(--radius);
  background:var(--tint-2); border:1px solid var(--tint-3);
  font-family:var(--font-mono); font-size:var(--fs-lg);
}
.cfm-row-icon { font-size:var(--fs-2xl); flex-shrink:0; }
.cfm-row-name { flex:1; color:var(--textbright); font-size:var(--fs-lg); }
.cfm-row-qty { color:var(--accent); font-weight:700; min-width:36px; text-align:right; font-size:var(--fs-lg); }
.cfm-row-atk { color:var(--warn); font-size:var(--fs-md); min-width:70px; text-align:right; }
.cfm-travel {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin-bottom:10px; border-radius:var(--radius);
  background:rgba(var(--gold-rgb,240,192,64),0.06);
  border:1px solid rgba(240,192,64,0.2);
  font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--gold);
}
.cfm-power {
  text-align:center; padding:10px 0 6px;
  font-family:var(--font-display); font-size:20px; font-weight:700;
}
.cfm-rp {
  text-align:center; padding:10px 14px; margin:8px 0 4px;
  font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--textsoft); font-style:italic; line-height:1.6;
}
.cfm-actions {
  display:flex; gap:12px; padding:16px 28px 24px; justify-content:center;
}
.cfm-btn {
  flex:1; padding:14px 20px; border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:2px; transition:all 0.2s; text-align:center; max-width:220px;
}
.cfm-btn-cancel {
  border:1px solid var(--border); color:var(--textsoft); background:transparent;
}
.cfm-btn-cancel:hover { color:var(--textbright); border-color:var(--textmid); }
.cfm-btn-confirm { border:1px solid; background:var(--tint-4); }
.cfm-btn-confirm:hover { background:var(--tint-5); transform:translateY(-1px); }
.cfm-msg {
  text-align:center; padding:6px 14px;
  font-family:var(--font-mono); font-size:16px;
  color:var(--textbright); line-height:1.7; letter-spacing:0.5px;
}

/* ══ CRUSADE ACTIVE BANNER (in attack confirm popups) ══ */
.cfm-crusade-banner {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; margin-bottom:12px;
  background:linear-gradient(135deg, rgba(201,59,30,0.20) 0%, rgba(255,150,80,0.12) 50%, var(--tint-4) 100%);
  border:1px solid rgba(255,140,80,0.55);
  
  border-radius:var(--radius);
  box-shadow:inset 3px 0 0 0 #c93b1e, 0 0 24px rgba(201,59,30,0.30), inset 0 0 12px rgba(255,180,100,0.08);
  animation:cfmCrusadePulse 2.4s ease-in-out infinite;
}
@keyframes cfmCrusadePulse {
  0%,100% { box-shadow:0 0 24px rgba(201,59,30,0.30), inset 0 0 12px rgba(255,180,100,0.08); }
  50%     { box-shadow:0 0 38px rgba(255,150,80,0.55), inset 0 0 18px rgba(255,200,140,0.18); }
}
.cfm-crusade-banner-flame {
  font-size:34px; line-height:1; color:var(--textbright);
  text-shadow:0 0 12px #ff8c50, 0 0 24px #c93b1e;
  animation:cfmCrusadeFlame 1.6s ease-in-out infinite;
}
@keyframes cfmCrusadeFlame {
  0%,100% { transform:scale(1) rotate(-2deg); text-shadow:0 0 12px #ff8c50, 0 0 24px #c93b1e; }
  50%     { transform:scale(1.12) rotate(2deg); text-shadow:0 0 18px #ffaa66, 0 0 36px #ff5522; }
}
.cfm-crusade-banner-main { flex:1; min-width:0; }
.cfm-crusade-banner-title {
  font-family:var(--font-display); font-size:var(--fs-xl); font-weight:900;
  letter-spacing:5px; color:#ffd9b8; text-transform:uppercase;
  text-shadow:0 0 12px rgba(255,150,80,0.7), 0 0 28px rgba(201,59,30,0.45);
}
.cfm-crusade-banner-buffs {
  margin-top:3px;
  font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700;
  color:#ffe8d4; letter-spacing:0.5px;
}
.cfm-crusade-banner-scope {
  font-size:var(--fs-xs); font-weight:400; color:#ffb088; opacity:0.85;
  margin-left:4px;
}
.cfm-crusade-banner-time {
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:#ffd9b8; padding:4px 10px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,0.30); border:1px solid rgba(255,140,80,0.35);
  white-space:nowrap; flex-shrink:0;
}

/* ══ ORI CRUSADE ACTIVATION POPUP (used by sgcConfirm in activateOriCrusade) ══ */
.cfm-crusade-buffs {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:14px 0 12px;
}
.cfm-crusade-buff {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 10px; border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--tint-4) 0%, rgba(201,59,30,0.10) 100%);
  border:1px solid rgba(255,140,80,0.40);
  box-shadow:inset 0 0 12px rgba(255,180,100,0.06);
}
.cfm-crusade-buff-icon { font-size:var(--fs-2xl); line-height:1; }
.cfm-crusade-buff-val {
  font-family:var(--font-display); font-size:20px; font-weight:900;
  color:var(--textbright); text-shadow:0 0 10px #ff8c50;
  letter-spacing:1px;
}
.cfm-crusade-buff-lbl {
  font-family:var(--font-mono); font-size:var(--fs-xs);
  color:#ffd9b8; letter-spacing:1px; text-transform:uppercase;
}
.cfm-crusade-cost {
  text-align:center; padding:8px 14px;
  font-family:var(--font-mono); font-size:var(--fs-base);
  color:#ffaa66; letter-spacing:0.5px;
  border-top:1px dashed rgba(255,140,80,0.30);
  border-bottom:1px dashed rgba(255,140,80,0.30);
  margin:6px 0 12px;
}
.cfm-crusade-flavor {
  text-align:center; padding:6px 14px;
  font-family:var(--font-body); font-size:var(--fs-md); font-weight:500;
  color:#ffd9b8; font-style:italic; line-height:1.6;
  text-shadow:0 0 6px rgba(201,59,30,0.4);
}

@media (max-width:520px) {
  .cfm-crusade-banner { padding:10px 12px; gap:10px; }
  .cfm-crusade-banner-flame { font-size:var(--fs-3xl); }
  .cfm-crusade-banner-title { font-size:var(--fs-sm); letter-spacing:2px; }
  .cfm-crusade-banner-buffs { font-size:var(--fs-sm); }
  .cfm-crusade-banner-time { font-size:var(--fs-xs); padding:3px 8px; }
  .cfm-crusade-banner-scope { display:block; margin-left:0; margin-top:2px; }
  .cfm-crusade-buffs { gap:6px; }
  .cfm-crusade-buff { padding:10px 6px; }
  .cfm-crusade-buff-val { font-size:var(--fs-xl); }
  .cfm-crusade-buff-lbl { font-size:10px; letter-spacing:0.5px; }
}

/* ══ BEACON ATTACK TROOP CARDS (UI/UX feedback 27/05) ══════════════
   Cards layout pour la liste de troupes du modal Attaquer balise.
   Avant : lignes plates label/input/MAX. Apres : carte avec icone +
   nom + dispo + ATK chip + input + MAX dans un layout aere. */
.bcn-troop-card {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:6px 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border:1px solid rgba(var(--accent-rgb),0.12);
  border-radius:var(--radius-md);
  transition:border-color 0.18s, background 0.18s;
}
.bcn-troop-card:hover { border-color:rgba(var(--accent-rgb),0.35); background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.02)); }
.bcn-troop-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--shade-3); border-radius:var(--radius); overflow:hidden; }
.bcn-troop-ico img, .bcn-troop-ico svg { max-width:100%; max-height:100%; object-fit:contain; }
.bcn-troop-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bcn-troop-name { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--textbright); letter-spacing:1px; text-transform:uppercase; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bcn-troop-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bcn-troop-disp { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); letter-spacing:0.5px; }
.bcn-troop-atk { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; color:#ff8a6a; background:rgba(255,138,106,0.12); border:1px solid rgba(255,138,106,0.3); padding:2px 7px; border-radius:var(--radius-md); letter-spacing:0.5px; }
.bcn-troop-ctrl { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.bcn-troop-input { width:64px; padding:6px 8px; background:rgba(0,0,0,0.55); border:1px solid rgba(var(--accent-rgb),0.30); border-radius:6px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-base); font-weight:700; text-align:right; }
.bcn-troop-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.18); }
.bcn-troop-max { padding:5px 12px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:1px; color:var(--accent); background:rgba(var(--accent-rgb),0.10); border:1px solid rgba(var(--accent-rgb),0.4); border-radius:6px; cursor:pointer; transition:all 0.15s; }
.bcn-troop-max:hover { background:rgba(var(--accent-rgb),0.22); border-color:var(--accent); color:var(--textbright); }
.bcn-troop-max:active { transform:scale(0.96); }
@media (max-width:520px) {
  .bcn-troop-card { padding:8px 10px; gap:8px; }
  .bcn-troop-ico { width:36px; height:36px; }
  .bcn-troop-name { font-size:var(--fs-sm); }
  .bcn-troop-input { width:56px; font-size:var(--fs-sm); }
  .bcn-troop-max { padding:4px 10px; font-size:10px; }
}