/* ═══ PASS COMMANDANT — PREMIUM ═══ */
.pass-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:var(--z-overlay-fullscreen);display:flex;align-items:flex-start;justify-content:center;animation:passReveal .4s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(14px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 0; }
@keyframes passReveal { from{opacity:0;transform:scale(0.9) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes passShine { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes passFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.05)} }
@keyframes passGlow { 0%,100%{box-shadow:0 0 40px rgba(212,146,10,0.08),0 0 100px rgba(212,146,10,0.03)} 50%{box-shadow:0 0 60px rgba(212,146,10,0.16),0 0 140px rgba(212,146,10,0.06)} }
@keyframes passBorderFlow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes passCtaPulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,146,10,0.4)} 50%{box-shadow:0 0 0 8px rgba(212,146,10,0)} }
@keyframes passRays { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.pass-card { background:linear-gradient(170deg,#101520 0%,#141c2e 30%,#18223a 55%,#141a2a 100%);border:1px solid rgba(212,146,10,0.2);border-radius:22px;max-width:460px;width:94%;overflow:hidden;animation:passGlow 5s ease-in-out infinite;position:relative;margin:auto; }
.pass-card::before { content:'';position:absolute;inset:-1px;border-radius:23px;padding:1.5px;background:linear-gradient(135deg,rgba(212,146,10,0.7),transparent 20%,rgba(255,213,79,0.4) 50%,transparent 80%,rgba(212,146,10,0.6));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:passBorderFlow 8s ease infinite;background-size:300% 300%; }

/* ── Header hero ── */
.pass-hero { position:relative;padding:40px 24px 30px;text-align:center;overflow:hidden; }
.pass-hero::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 160% 100% at 50% -30%,rgba(212,146,10,0.22) 0%,rgba(212,146,10,0.04) 40%,transparent 65%);pointer-events:none; }
.pass-hero::after { content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,146,10,0.4),transparent);pointer-events:none; }
.pass-hero-rays { position:absolute;top:-60px;left:50%;width:200px;height:200px;margin-left:-100px;background:conic-gradient(from 0deg,transparent,rgba(212,146,10,0.04) 10%,transparent 20%);animation:passRays 20s linear infinite;pointer-events:none;opacity:0.7; }
.pass-hero-star { font-size:52px;filter:drop-shadow(0 0 24px rgba(212,146,10,0.7)) drop-shadow(0 0 48px rgba(212,146,10,0.3));margin-bottom:10px;display:block;animation:passFloat 3.5s ease-in-out infinite;position:relative;z-index:1; }
.pass-hero-title { font-family:var(--font-display);font-size:24px;font-weight:900;letter-spacing:6px;background:linear-gradient(90deg,#a06e06,#ffd54f,#fff8e1,#ffd54f,#a06e06);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:passShine 3s linear 1;position:relative;z-index:1; }
.pass-hero-sub { font-family:var(--font-body);font-size:var(--fs-base);letter-spacing:4px;color:rgba(212,146,10,0.4);margin-top:6px;text-transform:uppercase;font-weight:600;position:relative;z-index:1; }
.pass-close { position:absolute;top:14px;right:14px;background:var(--tint-2);border:1px solid var(--tint-4);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:16px;cursor:pointer;transition:all 0.2s;line-height:1;z-index:2; }
.pass-close:hover { color:var(--textbright);background:var(--tint-5);border-color:var(--tint-10);transform:scale(1.1); }

/* ── Separator line ── */
.pass-divider { height:1px;margin:0 32px;background:linear-gradient(90deg,transparent,rgba(212,146,10,0.25),transparent); }

/* ── Active badge ── */
.pass-active-badge { display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;margin:16px 22px 0;background:linear-gradient(135deg,rgba(76,175,80,0.1),rgba(76,175,80,0.03));border:1px solid rgba(76,175,80,0.3);border-radius:var(--radius-md);color:#66bb6a;font-family:var(--font-mono);font-size:var(--fs-base);letter-spacing:0.5px; }

/* ── Benefits grid ── */
.pass-benefits { display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:18px 22px 16px; }
.pass-benefit { display:flex;align-items:center;gap:11px;padding:11px 13px;background:linear-gradient(135deg,rgba(212,146,10,0.035),rgba(255,255,255,0.008));border:1px solid rgba(212,146,10,0.08);border-radius:11px;transition:all 0.25s;position:relative; }
.pass-benefit:hover { background:linear-gradient(135deg,rgba(212,146,10,0.08),rgba(212,146,10,0.025));border-color:rgba(212,146,10,0.22);transform:translateY(-2px);box-shadow:0 4px 16px var(--shade-1); }
.pass-benefit-ico { font-size:var(--fs-2xl);flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(212,146,10,0.1),rgba(212,146,10,0.03));border:1px solid rgba(212,146,10,0.15);border-radius:var(--radius-md); }
.pass-benefit-val { color:#ffd54f;font-weight:700;font-size:var(--fs-md);display:block;font-family:var(--font-body);letter-spacing:0.2px; }
.pass-benefit-txt { font-family:var(--font-body);font-size:var(--fs-sm);color:rgba(255,255,255,0.35);line-height:1.3;font-weight:400; }

/* ── Daily chest button ── */
.pass-daily-btn { display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 44px);margin:0 22px 16px;padding:13px;border:1px solid rgba(212,146,10,0.3);border-radius:11px;background:linear-gradient(135deg,rgba(212,146,10,0.1),rgba(212,146,10,0.03));color:var(--gold);font-family:var(--font-body);font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all 0.25s;letter-spacing:0.5px;position:relative;overflow:hidden; }
.pass-daily-btn:hover:not(:disabled) { background:linear-gradient(135deg,rgba(212,146,10,0.18),rgba(212,146,10,0.06));transform:translateY(-2px);box-shadow:0 6px 24px rgba(212,146,10,0.12); }
.pass-daily-btn:disabled { opacity:0.4;cursor:default;filter:grayscale(0.5); }
.pass-daily-btn .pass-daily-ico { font-size:20px; }

/* ── Section title ── */
.pass-section-title { font-family:var(--font-display);font-size:9px;font-weight:600;letter-spacing:3px;color:rgba(212,146,10,0.35);text-transform:uppercase;text-align:center;padding:16px 22px 12px; }

/* ── Pricing cards ── */
.pass-plans { display:flex;gap:12px;padding:0 22px 18px;align-items:stretch; }
.pass-plan { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 12px 18px;border:1px solid var(--tint-3);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.005));text-decoration:none;transition:all 0.3s cubic-bezier(.22,1,.36,1);cursor:pointer;position:relative;overflow:hidden; }
.pass-plan:hover { border-color:rgba(212,146,10,0.35);background:linear-gradient(180deg,rgba(212,146,10,0.07),rgba(212,146,10,0.015));transform:translateY(-4px);box-shadow:0 12px 36px var(--shade-3); }
.pass-plan-price { font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--gold);line-height:1; }
.pass-plan-period { font-family:var(--font-body);font-size:var(--fs-md);color:rgba(255,255,255,0.4);margin-top:6px;font-weight:500; }
.pass-plan-save { font-family:var(--font-body);font-size:var(--fs-sm);color:#66bb6a;margin-top:8px;padding:3px 10px;background:rgba(76,175,80,0.1);border:1px solid rgba(76,175,80,0.18);border-radius:6px;font-weight:700; }
.pass-plan-cta { display:inline-block;font-family:var(--font-display);font-size:8px;letter-spacing:2px;color:rgba(212,146,10,0.7);margin-top:12px;text-transform:uppercase;padding:5px 14px;border:1px solid rgba(212,146,10,0.2);border-radius:6px;transition:all 0.25s; }
.pass-plan:hover .pass-plan-cta { border-color:rgba(212,146,10,0.5);color:#ffd54f;background:rgba(212,146,10,0.1); }

/* Popular plan highlight */
.pass-plan.popular { border-color:rgba(212,146,10,0.3);background:linear-gradient(180deg,rgba(212,146,10,0.07),rgba(212,146,10,0.01)); }
.pass-plan.popular::before { content:'MEILLEURE OFFRE';position:absolute;top:0;left:0;right:0;padding:4px 0;font-family:var(--font-display);font-size:7px;font-weight:700;letter-spacing:2px;color:#080b12;background:linear-gradient(90deg,#a06e06,#ffd54f,#f0c040);text-align:center; }
.pass-plan.popular .pass-plan-price { font-size:34px; }
.pass-plan.popular .pass-plan-cta { animation:passCtaPulse 2.5s ease-in-out infinite; }
.pass-plan.popular:hover { box-shadow:0 14px 44px rgba(212,146,10,0.14),0 0 60px rgba(212,146,10,0.05); }

/* ── Info PayPal ── */
.pass-info { margin:0 22px 16px;padding:18px 20px;background:linear-gradient(135deg,rgba(212,146,10,0.04),rgba(255,152,0,0.015));border:1px solid rgba(212,146,10,0.1);border-radius:14px;position:relative; }
.pass-info::before { content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,rgba(212,146,10,0.6),rgba(212,146,10,0.1));border-radius:3px 0 0 3px; }
.pass-info-title { font-family:var(--font-display);font-size:9px;font-weight:600;letter-spacing:2.5px;color:rgba(212,146,10,0.5);text-transform:uppercase;margin-bottom:12px;padding-left:8px; }
.pass-info-steps { display:flex;flex-direction:column;gap:8px;padding-left:8px; }
.pass-info-step { display:flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:var(--fs-md);color:rgba(255,255,255,0.55);font-weight:500; }
.pass-info-step strong { color:#ffd54f;font-weight:700; }
.pass-info-num { width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,rgba(212,146,10,0.12),rgba(212,146,10,0.04));border:1px solid rgba(212,146,10,0.25);color:var(--gold);font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;flex-shrink:0; }
.pass-info-note { margin-top:12px;padding:10px 12px;background:rgba(255,152,0,0.05);border:1px solid rgba(255,152,0,0.12);border-radius:9px;font-family:var(--font-body);font-size:var(--fs-base);color:rgba(255,180,80,0.8);line-height:1.5;margin-left:8px; }
.pass-info-note strong { color:#ffd54f; }

/* ── Footer — trust badge ── */
.pass-footer { display:flex;align-items:center;justify-content:center;gap:12px;margin:0 22px 20px;padding:14px 20px;background:var(--tint-2);border:1px solid var(--tint-4);border-radius:var(--radius-lg); }
.pass-footer-lock { font-size:20px;flex-shrink:0; }
.pass-footer-txt { font-family:var(--font-body);font-size:var(--fs-lg);font-weight:700;color:rgba(255,255,255,0.85);letter-spacing:0.3px; }
.pass-footer-pp { font-family:var(--font-display);font-size:var(--fs-md);font-weight:900;letter-spacing:1.5px;color:#009cde; }

/* ── Utility ── */
.pass-gold-name { color:var(--gold) !important; }
.pass-badge { color:var(--gold);font-size:var(--fs-sm);margin-left:4px; }

/* ── Responsive ── */
@media(max-width:480px) {
  .pass-card { max-width:100%;width:96%;border-radius:var(--radius-xl); }
  .pass-benefits { grid-template-columns:1fr;gap:5px;padding:14px 16px 10px; }
  .pass-plans { padding:0 16px 14px;gap:8px; }
  .pass-plan { padding:18px 8px 14px; }
  .pass-plan-price { font-size:var(--fs-2xl); }
  .pass-plan.popular .pass-plan-price { font-size:28px; }
  .pass-hero { padding:30px 18px 24px; }
  .pass-hero-title { font-size:19px;letter-spacing:3px; }
  .pass-hero-star { font-size:40px; }
  .pass-daily-btn { width:calc(100% - 32px);margin:0 16px 12px; }
  .pass-info { margin:0 16px 12px;padding:14px 16px; }
  .pass-footer { margin:0 16px 16px; }
}

/* Sprint M7-A — Pass : plans 2 col entre 540-900 + CTA lisible tablette portrait */
@media (min-width: 540px) and (max-width: 899px) {
  .pass-plans { flex-direction:row; flex-wrap:wrap; gap:12px; }
  .pass-plan { flex:1 1 calc(50% - 6px); min-width:0; }
}
@media (min-width: 540px) and (max-width: 767px) {
  .pass-plan-cta { font-size:11px !important; padding:10px 14px !important; min-height:44px !important; }
}

/* ═══ COMBAT SIMULATOR v3 ═══ */
.sim-section { background:var(--tint-1);border:1px solid var(--tint-3);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:12px; }
.sim-section-hdr { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2.5px;color:var(--accent);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(var(--accent-rgb),0.15); }
.sim-cat-hdr { font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:2px;color:var(--gold);margin:10px 0 4px;padding:4px 8px;background:rgba(212,146,10,0.06);border-radius:var(--radius-sm);  box-shadow:inset 3px 0 0 0 var(--gold); }
.sim-row { display:flex;align-items:center;gap:8px;padding:6px 8px;margin:2px 0;border-radius:6px;background:var(--tint-1);border:1px solid var(--tint-2);transition:all 0.15s; }
.sim-row:hover { background:rgba(var(--accent-rgb),0.04);border-color:rgba(var(--accent-rgb),0.12); }
.sim-ico { font-size:16px;width:40px;min-width:40px;text-align:center;flex-shrink:0; }
.sim-info { flex:1;min-width:0; }
.sim-name { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600; }
.sim-stat { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:1px; }
.sim-max-btn { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid rgba(212,146,10,0.35);color:var(--gold);background:rgba(212,146,10,0.1);flex-shrink:0;transition:all 0.15s;letter-spacing:0.5px; }
.sim-max-btn:hover { background:rgba(212,146,10,0.22);border-color:var(--gold);box-shadow:0 0 8px rgba(212,146,10,0.15); }
.sim-empty { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);padding:16px 0;text-align:center;font-style:italic; }
.sim-loading { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--accent);padding:12px 0;text-align:center;animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.5} }
.sim-atk-list { max-height:220px;overflow-y:auto;margin-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),0.3) transparent; }
.sim-input { width:64px;background:rgba(12,18,36,0.95);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:5px;color:var(--textbright);font-family:var(--font-mono);font-size:var(--fs-md);padding:5px 8px;text-align:right;transition:all 0.2s; }
.sim-input:focus { border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),0.15);outline:none; }

/* ── Mode tabs PvE / PvP ── */
.sim-mode-tabs { display:flex;gap:6px;margin-bottom:12px; }
.sim-mode-tab { flex:1;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;padding:8px 12px;border-radius:6px;cursor:pointer;border:1px solid var(--tint-7);color:var(--textsoft);background:var(--tint-2);transition:all 0.2s;text-align:center; }
.sim-mode-tab:hover { border-color:rgba(var(--accent-rgb),0.3);color:var(--textmid); }
.sim-mode-tab.active { border-color:rgba(var(--accent-rgb),0.5);color:var(--accent);background:rgba(var(--accent-rgb),0.08);box-shadow:0 0 12px rgba(var(--accent-rgb),0.1); }

/* ── NPC Grid ── */
.sim-npc-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-bottom:10px; }
.sim-npc-btn { display:flex;flex-direction:column;align-items:center;padding:8px 6px;border-radius:6px;cursor:pointer;border:1px solid var(--tint-4);background:var(--tint-1);transition:all 0.2s;text-align:center; }
.sim-npc-btn:hover { border-color:rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.06);transform:translateY(-1px); }
.sim-npc-btn.selected { border-color:var(--accent);background:rgba(var(--accent-rgb),0.12);box-shadow:0 0 12px rgba(var(--accent-rgb),0.15); }
.sim-npc-name { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);font-weight:600; }
.sim-npc-val { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:2px; }
.sim-npc-easy .sim-npc-val { color:var(--success); }
.sim-npc-mid .sim-npc-val { color:var(--warn); }
.sim-npc-hard .sim-npc-val { color:var(--danger); }
.sim-npc-elite .sim-npc-val { color:#c850c0; }
.sim-npc-easy:hover,.sim-npc-easy.selected { border-color:rgba(46,204,136,0.4); }
.sim-npc-mid:hover,.sim-npc-mid.selected { border-color:rgba(241,196,15,0.4); }
.sim-npc-hard:hover,.sim-npc-hard.selected { border-color:rgba(231,76,60,0.4); }
.sim-npc-elite:hover,.sim-npc-elite.selected { border-color:rgba(200,80,192,0.4); }

/* ── PvP list ── */
.sim-pvp-list { max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-bottom:8px;scrollbar-width:thin; }
.sim-pvp-btn { display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;border:1px solid var(--tint-3);background:var(--tint-1);transition:all 0.15s;text-align:left; }
.sim-pvp-btn:hover { border-color:rgba(var(--accent-rgb),0.25);background:rgba(var(--accent-rgb),0.05); }
.sim-pvp-btn.selected { border-color:var(--accent);background:rgba(var(--accent-rgb),0.1);box-shadow:0 0 10px rgba(var(--accent-rgb),0.1); }
.sim-pvp-rank { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--gold);min-width:28px; }
.sim-pvp-name { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);flex:1; }
.sim-pvp-score { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--accent);flex-shrink:0; }
.sim-load-pvp-btn { width:100%;font-family:var(--font-mono);font-size:var(--fs-md);padding:6px;border-radius:5px;cursor:pointer;border:1px solid rgba(var(--accent-rgb),0.2);color:var(--accent);background:rgba(var(--accent-rgb),0.05);transition:all 0.15s;margin-bottom:8px; }
.sim-load-pvp-btn:hover { background:rgba(var(--accent-rgb),0.12);border-color:rgba(var(--accent-rgb),0.4); }

/* ── Force + type ── */
.sim-force-row { display:flex;align-items:center;gap:10px;margin:10px 0 8px;padding:8px 10px;background:var(--tint-2);border-radius:6px;border:1px solid var(--tint-3); }
.sim-force-label { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;color:var(--textmid);white-space:nowrap; }
.sim-force-input-wrap { flex:1; }
.sim-force-input { width:100%;background:rgba(12,18,36,0.95);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:5px;color:var(--textbright);font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;padding:6px 10px;text-align:center;transition:all 0.2s; }
.sim-force-input:focus { border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),0.15);outline:none; }
.sim-type-section { margin-top:6px; }
.sim-type-label { font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:1.5px;color:var(--textsoft); }
.sim-type-row { display:flex;gap:4px;margin-top:6px;flex-wrap:wrap; }
.sim-type-btn { font-family:var(--font-mono);font-size:var(--fs-md);padding:5px 10px;border-radius:5px;cursor:pointer;border:1px solid var(--tint-7);color:var(--textmid);background:var(--tint-2);transition:all 0.15s; }
.sim-type-btn:hover { border-color:rgba(var(--accent-rgb),0.3);color:var(--textbright); }
.sim-type-btn.active { border-color:rgba(var(--accent-rgb),0.5);color:var(--accent);background:rgba(var(--accent-rgb),0.1);font-weight:600; }

/* ── Bonus panel ── */
.sim-bonus-panel { padding:8px 10px;margin-top:8px;border-top:1px solid rgba(var(--accent-rgb),0.1);background:rgba(var(--accent-rgb),0.02);border-radius:0 0 6px 6px; }
.sim-bonus-hdr { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-bottom:4px; }
.sim-bonus-mult { color:var(--gold);font-weight:700; }
.sim-bonus-tags { display:flex;flex-wrap:wrap;gap:4px; }
.sim-bonus-tag { font-family:var(--font-mono);font-size:var(--fs-md);padding:2px 6px;border-radius:3px;background:var(--tint-2);border:1px solid var(--tint-3); }
.sim-bonus-pos { color:var(--success);border-color:rgba(46,204,136,0.2);background:rgba(46,204,136,0.06); }
.sim-bonus-neg { color:var(--danger);border-color:rgba(231,76,60,0.2);background:rgba(231,76,60,0.06); }

/* ── Result ── */
.sim-result { border:1px solid rgba(var(--accent-rgb),0.15);border-radius:var(--radius-md);padding:14px 16px;background:linear-gradient(180deg,rgba(var(--accent-rgb),0.03),rgba(0,0,0,0.1));margin-top:12px; }
.sim-verdict { font-family:var(--font-display);font-size:18px;font-weight:700;text-align:center;margin-bottom:10px;letter-spacing:2px;text-shadow:0 0 20px currentColor; }
.sim-bar-wrap { height:14px;background:rgba(255,255,255,0.07);border-radius:7px;margin:8px 0;overflow:hidden;display:flex;box-shadow:inset 0 1px 3px var(--shade-1); }
.sim-res-atk { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.6),rgba(var(--accent-rgb),0.9));height:100%;transition:width 0.4s;border-radius:7px 0 0 7px; }
.sim-res-def { background:linear-gradient(90deg,rgba(192,57,43,0.6),rgba(192,57,43,0.9));height:100%;transition:width 0.4s;border-radius:0 7px 7px 0; }
.sim-bar-labels { display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);margin-top:4px; }
.sim-base-note { font-size:var(--fs-md);color:var(--textsoft); }
.sim-res-type { font-family:var(--font-mono);font-size:var(--fs-md);text-align:center;margin-top:6px; }
.sim-res-mult { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold);text-align:center;margin-top:4px;font-weight:600; }
.sim-losses { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:8px;text-align:center;line-height:1.6; }

/* Active commanders indicator */
.gcmd-wrap { margin:0 0 6px; }
.gcmd-list { display:flex;flex-direction:column;gap:3px; }
.gcmd-item { display:flex;align-items:center;gap:7px;padding:4px 7px;background:rgba(var(--accent-rgb),0.05);border:1px solid rgba(var(--accent-rgb),0.12);border-radius:5px; }
.gcmd-item.villain { background:rgba(220,60,60,0.05);border-color:rgba(220,60,60,0.18); }
.gcmd-av { font-size:var(--fs-lg); }
.gcmd-body { flex:1;min-width:0; }
.gcmd-nm { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.gcmd-bns { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--success); }
.gcmd-lv { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--gold2);flex-shrink:0; }
.gcmd-tokens { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold2);text-align:center;padding:4px;background:rgba(212,146,10,0.06);border:1px solid rgba(212,146,10,0.12);border-radius:var(--radius-sm);margin-top:3px; }
.gcmd-empty { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);padding:5px 0;text-align:center;line-height:1.6; }
/* Mission rewards preview */
.gmt.sim-tab { color:var(--success); border-color:rgba(46,204,136,0.35); }
.gmt.sim-tab:hover { background:rgba(46,204,136,0.1); border-color:var(--success); }
/* ══ Profile Modal — redesigned ══ */
@keyframes profBorderSpin { to{--prof-angle:360deg} }
@property --prof-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.profile-modal-border {
  width:560px; max-width:95vw; border-radius:var(--radius-xl); padding:2px;
  background:conic-gradient(from var(--prof-angle,0deg), rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.6));
  animation:profBorderSpin 5s linear infinite, evPop 0.3s ease;
  box-shadow:0 0 60px rgba(var(--accent-rgb),0.12), 0 20px 60px var(--shade-5);
}
.profile-modal-inner {
  background:rgba(6,10,22,0.98); border-radius:14px; overflow:hidden;
  max-height:85vh; display:flex; flex-direction:column;
  position:relative;
}
.profile-modal-inner::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(var(--accent-rgb),0.015) 2px, rgba(var(--accent-rgb),0.015) 3px);
}
.profile-tab-bar {
  display:flex; border-bottom:1px solid rgba(var(--accent-rgb),0.2);
  flex-shrink:0; position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), transparent);
}
/* Profile title */
.player-title { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold);letter-spacing:1px; }
.player-motto { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);font-style:italic; }
/* Profile edit — title list */
.pe-title-list { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.pe-title-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 10px; border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent; transition:all 0.2s;
  background:rgba(var(--accent-rgb),0.02);
}
.pe-title-row:hover { background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.2); }
.pe-title-row.pe-title-active { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.4); box-shadow:0 0 12px rgba(var(--accent-rgb),0.08); }
.pe-title-row.pe-title-locked { opacity:0.35; cursor:default; }
.pe-title-row.pe-title-locked:hover { background:var(--tint-1); border-color:transparent; }
.pe-title-name { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textbright); }
.pe-title-active .pe-title-name { color:var(--accent); text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.pe-title-locked .pe-title-name { color:var(--textsoft); }
.pe-title-cond { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); }
.pe-title-cond.pe-title-ok { color:var(--success); }
.pe-title-locked .pe-title-cond { color:var(--danger); opacity:0.7; }
/* Profile KPIs */
.pe-kpi {
  background:rgba(var(--accent-rgb),0.04); border:1px solid rgba(var(--accent-rgb),0.12);
  border-radius:var(--radius-md); padding:12px 6px; text-align:center; transition:all 0.2s;
}
.pe-kpi:hover { background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.25); box-shadow:0 0 14px rgba(var(--accent-rgb),0.06); }
.pe-kpi-val { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--gold); text-shadow:0 0 8px rgba(var(--gold-rgb,218,165,32),0.3); }
.pe-kpi-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
/* Profile section headers */
.pe-section-hdr {
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px;
  color:var(--textmid); padding:10px 14px; cursor:pointer; list-style:none;
  background:rgba(var(--accent-rgb),0.04); border-bottom:1px solid rgba(var(--accent-rgb),0.08);
  transition:all 0.2s;
}
.pe-section-hdr:hover { background:rgba(var(--accent-rgb),0.08); }
.pe-section-hdr::-webkit-details-marker { display:none; }
.pe-section-hdr::before { content:'▸ '; color:var(--accent); transition:transform 0.2s; }
details[open] > .pe-section-hdr::before { content:'▾ '; }
/* Profile buildings grid */
.pe-bld-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:8px 10px; }
.pe-bld {
  display:flex; align-items:center; gap:5px; padding:6px 8px;
  background:rgba(var(--accent-rgb),0.03); border-radius:6px;
  font-family:var(--font-mono); font-size:var(--fs-md);
  border:1px solid rgba(var(--accent-rgb),0.06); transition:all 0.15s;
}
.pe-bld:hover { background:rgba(var(--accent-rgb),0.07); border-color:rgba(var(--accent-rgb),0.15); }
.pe-bld-ico { font-size:var(--fs-md); flex-shrink:0; }
.pe-bld-name { flex:1; color:var(--textmid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-bld-lv { color:var(--gold); font-weight:bold; font-size:var(--fs-md); }
/* ── Offline report ── */
.offline-modal-box {
  width:min(480px,92vw);max-height:min(85vh,700px);background:var(--surface);border:1px solid rgba(var(--accentRgb,.67),0.5);
  border-radius:var(--radius-xl);overflow-y:auto;overflow-x:hidden;animation:evPop .3s ease;
  box-shadow:0 0 60px rgba(var(--accentRgb,.67),0.25),0 0 120px rgba(var(--accentRgb,.67),0.08),inset 0 1px 0 var(--tint-4);
  overscroll-behavior:contain;
}
.offline-header {
  position:relative;padding:24px 24px 18px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--accentRgb,.67),0.12) 0%,transparent 100%);
  border-bottom:1px solid rgba(var(--accentRgb,.67),0.2);
}
.offline-header::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(var(--accentRgb,.67),0.15),transparent 70%);
  pointer-events:none;
}
.offline-emblem { width:64px;height:64px;margin:0 auto 8px;filter:drop-shadow(0 0 12px rgba(var(--accentRgb,.67),0.5));position:relative;z-index:1; }
.offline-emblem svg { width:100%;height:100%; }
.offline-title {
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;letter-spacing:2px;
  color:var(--accent,var(--gold2));text-shadow:0 0 20px rgba(var(--accentRgb,.67),0.4);
  position:relative;z-index:1;
}
.offline-subtitle {
  font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);
  margin-top:4px;position:relative;z-index:1;font-style:italic;
}
.offline-time {
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 14px;
  border-radius:20px;background:rgba(var(--accentRgb,.67),0.08);
  border:1px solid rgba(var(--accentRgb,.67),0.15);
  font-family:var(--font-mono);font-size:var(--fs-md);color:var(--accent,var(--gold2));
  position:relative;z-index:1;
}
.offline-section-title {
  font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;
  color:var(--accent,var(--gold2));text-transform:uppercase;
  margin:0 0 8px;padding-bottom:6px;
  border-bottom:1px solid rgba(var(--accentRgb,.67),0.15);
  display:flex;align-items:center;gap:8px;
}
.offline-section-title::before {
  content:'';flex:0 0 3px;height:12px;border-radius:2px;background:var(--accent,var(--gold2));
}
.offline-body { padding:16px 22px 8px; }
.offline-row {
  display:flex;align-items:center;gap:12px;padding:8px 10px;margin-bottom:4px;
  border-radius:var(--radius);background:rgba(var(--accentRgb,.67),0.04);
  border:1px solid rgba(var(--accentRgb,.67),0.06);
  transition:background .2s;
}
.offline-row:hover { background:rgba(var(--accentRgb,.67),0.08); }
.offline-row.offline-summary {
  background:rgba(var(--accentRgb,.67),0.10);
  border:1px solid rgba(var(--accentRgb,.67),0.20);
  margin-bottom:8px;
}
.offline-row.offline-summary .offline-lbl strong { color:var(--accent); }
.offline-rest { margin-top:6px; }
.offline-rest > summary {
  cursor:pointer;font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--textmid);text-transform:uppercase;letter-spacing:1.2px;
  padding:6px 10px;border-radius:6px;transition:color .2s;list-style:none;
  display:flex;align-items:center;gap:6px;
}
.offline-rest > summary::before { content:'▸';transition:transform .2s; }
.offline-rest[open] > summary::before { transform:rotate(90deg); }
.offline-rest > summary:hover { color:var(--accent); }
.offline-rest > summary::-webkit-details-marker { display:none; }
.offline-ico { font-size:20px;width:32px;text-align:center;flex-shrink:0; }
.offline-ico img { filter:drop-shadow(0 0 4px rgba(var(--accentRgb,.67),0.3)); }
.offline-lbl {
  font-family:var(--font-body);font-size:var(--fs-md);font-weight:500;
  color:var(--textmid);flex:1;letter-spacing:0.3px;
}
.offline-val {
  font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;
  color:var(--accent,var(--gold2));text-shadow:0 0 8px rgba(var(--accentRgb,.67),0.3);
}
.offline-combat {
  margin-top:8px;padding:12px 22px 8px;
  border-top:1px solid rgba(var(--accentRgb,.67),0.15);
}
.offline-combat .offline-row { background:rgba(255,60,60,0.04);border-color:rgba(255,60,60,0.08); }
.offline-footer {
  padding:12px 22px 18px;text-align:center;position:sticky;bottom:0;background:var(--surface);
  border-top:1px solid rgba(var(--accentRgb,.67),0.15);
}
.offline-btn {
  padding:10px 32px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;
  letter-spacing:1.5px;border-radius:var(--radius);cursor:pointer;
  border:1px solid rgba(var(--accentRgb,.67),0.5);
  color:var(--accent,var(--gold2));
  background:linear-gradient(180deg,rgba(var(--accentRgb,.67),0.15),rgba(var(--accentRgb,.67),0.05));
  transition:all .25s;text-shadow:0 0 10px rgba(var(--accentRgb,.67),0.3);
}
.offline-btn:hover {
  background:linear-gradient(180deg,rgba(var(--accentRgb,.67),0.3),rgba(var(--accentRgb,.67),0.12));
  box-shadow:0 0 20px rgba(var(--accentRgb,.67),0.25);
  transform:translateY(-1px);
}

/* ── SG-1 member selection ── */
.sg1-member { cursor:pointer; transition:all 0.2s; border:1px solid transparent; border-radius:6px; padding:2px; }
.sg1-member:hover { background:rgba(var(--accent2-rgb),0.06); border-color:rgba(var(--accent2-rgb),0.2); }
.sg1-member.selected { background:rgba(212,146,10,0.12); border-color:var(--gold); box-shadow:0 0 10px rgba(212,146,10,0.2); }
.sg1-member.selected .ts-ok { color:var(--gold2); font-size:var(--fs-md); }
.ts-bonus { font-size:var(--fs-md); color:var(--accent3); font-family:var(--font-mono); }
.sg1-member.selected .ts-bonus { color:var(--gold2); }

/* ── PvP target buttons (glassmorphism) ── */
.pvp-target-btn {
  cursor:pointer; padding:8px 12px; margin-bottom:4px;
  background:rgba(8,12,30,0.70); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,60,60,0.12); border-radius:var(--radius-md);
  transition:all 0.18s;
}
.pvp-target-btn:hover { border-color:rgba(255,60,60,0.35); background:rgba(255,60,60,0.08); }
.pvp-target-btn.active { border-color:rgba(255,60,60,0.5); background:rgba(255,60,60,0.12); box-shadow:0 0 12px rgba(255,60,60,0.2); }
.pvp-target-btn .pb-name { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--danger); letter-spacing:1px; }
.pvp-target-btn .pb-code { font-size:var(--fs-sm); color:var(--textsoft); margin-top:2px; font-family:var(--font-mono); }
.pvp-target-btn.pvp-target-protected { opacity:.55; cursor:not-allowed; }
.pvp-target-btn.pvp-target-protected:hover { border-color:rgba(255,60,60,0.12); background:rgba(8,12,30,0.70); }

/* ── Gate spark particles ── */
.ovw-layout { display:flex; flex-direction:column; gap:0; }
/* Compact slots row */
.ovw-slots-row {
  display:flex; gap:8px; padding:8px 14px;
  background:rgba(4,8,15,0.70); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ovw-slot-hdr { font-family:var(--font-display); font-size:var(--fs-md); letter-spacing:1.5px; color:var(--textsoft); text-transform:uppercase; margin-bottom:2px; }
.ovw-slot {
  flex:1; background:rgba(10,18,32,0.85); border:1px solid var(--border);
  border-radius:6px; padding:7px 10px; box-shadow:var(--inset);
  backdrop-filter:blur(4px);
}
.ovw-slot.active-build { border-color:var(--warn); background:rgba(224,144,32,0.08); }
.ovw-slot-bld { display:flex; align-items:center; gap:7px; }
.ovw-slot-icon { font-size:18px; }
.ovw-slot-name { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); }
.ovw-slot-eta { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--warn); }
.ovw-slot-bar { height:6px; background:var(--tint-4); border-radius:3px; overflow:hidden; margin-top:5px; }
.ovw-slot-fill { height:100%; background:linear-gradient(90deg,var(--warn),var(--gold)); border-radius:2px; }
.ovw-slot-empty { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); font-style:italic; display:flex; align-items:center; gap:5px; }
/* OGame-style building grid */
.ovw-bld-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
  gap:6px; padding:10px 14px;
}
.ovw-bld-card {
  background:rgba(10,18,32,0.85); border:1px solid var(--border);
  border-radius:6px; padding:8px 6px; text-align:center; cursor:pointer;
  transition:all 0.15s; position:relative; backdrop-filter:blur(4px);
}
.ovw-bld-card:hover { background:rgba(var(--accent-rgb),0.10); border-color:var(--border2); transform:translateY(-1px); }
.ovw-bld-card-icon { font-size:20px; margin-bottom:3px; }
.ovw-bld-card-name { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--textmid); line-height:1.3; margin-bottom:3px; }
.ovw-bld-card-lv { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:bold; color:var(--accent2); }
.ovw-bld-card-prog { position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--warn),var(--gold)); border-radius:0 0 4px 4px; }

/* Institut Altérien */
.gap-wrap { display:flex; flex-direction:column; gap:8px; }
.gap-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textmid); }
.gap-threat-badge { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-md); letter-spacing:1px; padding:2px 7px; border-radius:3px; margin-left:6px; }
.gap-threat-badge.n,.gap-threat-badge.l { color:var(--success); background:rgba(46,204,136,0.1); border:1px solid rgba(46,204,136,0.3); }
.gap-threat-badge.m { color:var(--warn); background:rgba(240,160,40,0.1); border:1px solid rgba(240,160,40,0.3); }
.gap-threat-badge.h { color:var(--danger); background:rgba(220,60,60,0.1); border:1px solid rgba(220,60,60,0.3); }
.gap-units-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); letter-spacing:1.5px; text-transform:uppercase; margin:4px 0 2px; }
.gap-unit-row { display:flex; align-items:center; gap:5px; padding:3px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.12); }
.gap-unit-ico { font-size:var(--fs-md); width:40px; min-width:40px; text-align:center; flex-shrink:0; }
.gap-unit-name { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textmid); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gap-unit-avail { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); min-width:24px; text-align:right; }
.gap-unit-inp { width:44px; background:rgba(18,24,42,0.9); border:1px solid rgba(var(--accent-rgb),0.3); color:#c8dcf0; font-family:var(--font-mono); font-size:var(--fs-md); text-align:center; padding:3px 4px; border-radius:3px; transition:border-color 0.2s; }
.gap-unit-inp:focus { outline:none; border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25), 0 0 4px rgba(var(--accent-rgb),0.15); background:rgba(var(--accent-rgb),0.04); }
.gap-max-btn { font-size:var(--fs-md); padding:2px 5px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.3); color:var(--accent); border-radius:3px; cursor:pointer; }
.gap-stats { background:rgba(4,8,20,0.65); border-radius:var(--radius-sm); padding:6px 8px; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); display:flex; justify-content:space-between; }
.gap-stats span { color:#c8dcf0; }
.gap-launch-btn { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; padding:9px; background:rgba(180,40,40,0.12); border:1px solid rgba(200,60,60,0.45); color:var(--danger); border-radius:var(--radius-sm); cursor:pointer; letter-spacing:1px; transition:all 0.15s; width:100%; }
.gap-launch-btn:hover:not(:disabled) { background:rgba(200,50,50,0.25); border-color:var(--danger); }
.gap-launch-btn:disabled { opacity:0.35; cursor:not-allowed; }
.gap-back-link { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); cursor:pointer; text-align:center; }
.gap-back-link:hover { color:var(--accent); }
.gap-no-troops { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); font-style:italic; text-align:center; padding:8px; }

/* ══ OVERVIEW DASHBOARD ══ */
.ov-queues-block { padding:10px 12px 4px; }
.ov-queues-title { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:3px; color:var(--accent2); text-transform:uppercase; margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid rgba(var(--accent-rgb),0.28); text-shadow:0 0 10px rgba(var(--accent-rgb),0.2); }
.ov-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:12px 12px 8px; }
.ov-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px 8px; }
.ov-card { background:linear-gradient(180deg,rgba(10,18,40,0.92),rgba(6,12,28,0.95)); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:var(--radius-md); padding:14px 18px; box-shadow:0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(var(--accent-rgb),0.05); backdrop-filter:blur(6px); transition:border-color .2s; }
.ov-card-inner { padding:8px 14px; }
.ov-card-title { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--accent2); letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(var(--accent-rgb),0.25); text-shadow:0 0 10px rgba(var(--accent-rgb),0.2); }
.def-status-badge { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;letter-spacing:0.5px; }
.def-status-badge.active { background:rgba(0,220,120,0.1);border:1px solid rgba(0,220,120,0.3);color:var(--success); }
.def-status-badge.inactive { background:var(--tint-2);border:1px solid var(--tint-7);color:var(--textsoft); }
.def-alert-active { padding:8px 12px;margin-bottom:10px;border-radius:6px;background:rgba(0,220,120,0.08);border:1px solid rgba(0,220,120,0.3);font-family:var(--font-mono);font-size:var(--fs-md);color:var(--success);animation:ovAlertPulse 2s ease-in-out infinite; }
.def-sec-lbl { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--textsoft);margin:12px 0 6px;text-transform:uppercase; }
.def-garrison-row { display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--tint-2);font-family:var(--font-mono);font-size:var(--fs-md); }
.def-garrison-unit { flex:1;display:flex;align-items:center;gap:6px;color:var(--textbright); }
.def-garrison-count { color:var(--textmid);min-width:50px;text-align:right; }
.def-garrison-stat { color:var(--textmid);min-width:90px;text-align:right;font-size:var(--fs-md); }
.def-stat-label { color:var(--textsoft);font-size:var(--fs-md); }
.def-garrison-total { color:var(--accent2);min-width:80px;text-align:right;font-weight:700;font-size:var(--fs-md); }
.def-bonus-block { margin-top:10px;padding:8px 12px;background:var(--tint-2);border:1px solid var(--tint-3);border-radius:6px; }
.def-bonus-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--textsoft);margin-bottom:4px;text-transform:uppercase; }
.def-bonus-line { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);padding:2px 0; }
.def-total { display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 14px;background:linear-gradient(135deg,rgba(80,180,255,0.08),rgba(80,180,255,0.02));border:1px solid rgba(80,180,255,0.2);border-radius:var(--radius); }
.def-total span:first-child { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;color:var(--textmid); }
.def-total-val { font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--accent2);text-shadow:0 0 10px rgba(80,180,255,0.3); }

.ov-stat-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.ov-stat-lbl { font-family:var(--font-body); font-size:var(--fs-md); font-weight:500; color:var(--text); }
.ov-stat-val { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold2); font-weight:bold; }
.ov-stat-val.good { color:var(--success); text-shadow:0 0 6px rgba(68,255,170,0.3); }
.ov-stat-val.dim  { color:var(--textmid); }
/* Faction bonus card */
.fac-bonus-header { display:flex;align-items:center;gap:10px;padding:0 0 10px;border-bottom:1px solid rgba(var(--accent-rgb),0.12);margin-bottom:4px; }
.fac-bonus-list { display:flex;flex-direction:column;gap:2px; }
.fac-bonus-row { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;transition:background 0.15s; }
.fac-bonus-row:hover { background:rgba(var(--accent-rgb),0.05); }
.fac-bonus-ico { font-size:18px;width:24px;text-align:center;flex-shrink:0; }
.fac-bonus-lbl { font-family:var(--font-body);font-size:var(--fs-lg);font-weight:600;color:var(--text);flex:1; }
.fac-bonus-val { font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;white-space:nowrap; }
/* Artifact bonus overview rows */
.art-ov-list { display:flex;flex-direction:column;gap:2px; }
.art-ov-row { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;transition:background 0.15s; }
.art-ov-row:hover { background:rgba(var(--accent-rgb),0.05); }
.art-ov-ico { font-size:18px;width:24px;text-align:center;flex-shrink:0; }
.art-ov-lbl { font-family:var(--font-body);font-size:var(--fs-lg);font-weight:600;color:var(--text);flex:1; }
.art-ov-val { font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;color:var(--success);white-space:nowrap; }
.ov-events { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 12px 8px; }
.ov-event-card {
  --card-glow-rgb:68,170,255;
  background:linear-gradient(180deg,rgba(10,16,34,0.92),rgba(6,11,26,0.95)); border:1px solid rgba(var(--accent-rgb),0.28); border-radius:var(--radius-md);
  padding:14px 16px; min-height:88px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 2px 12px var(--shade-1), inset 0 1px 0 rgba(var(--accent-rgb),0.06); position:relative; overflow:hidden;
  transition:transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  backdrop-filter:blur(6px);
}
.ov-event-card:hover {
  transform:translateY(-3px); filter:brightness(1.12);
  box-shadow:0 6px 24px var(--shade-3), 0 0 16px 2px rgba(var(--card-glow-rgb),0.2);
}
/* Active glow pulse */
.ov-event-card.ov-active {
  border-color:rgba(var(--card-glow-rgb),0.5);
  animation:cardGlow 2.8s ease-in-out infinite;
}
/* Empty state */
.ov-event-card.ov-empty {
  border-style:dashed; border-color:rgba(var(--accent-rgb),0.25);
  background:rgba(6,11,26,0.5);
  cursor:pointer; transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ov-event-card.ov-empty:hover {
  border-color:rgba(var(--accent-rgb),0.55);
  background:rgba(var(--accent-rgb),0.06);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(var(--accent-rgb),0.18);
}
.ov-event-card.ov-empty:hover .ov-empty-event { opacity:0.9; }
.ov-event-card.ov-empty:hover .ov-empty-event-cta { opacity:1; }
.ov-empty-event-cta {
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px;
  color:var(--accent); margin-top:6px; opacity:0.6; transition:opacity 0.2s ease;
}
/* Background illustration overlay — full cover */
.ov-event-card.has-bg-illus { background-size:cover; background-position:center 30%; background-repeat:no-repeat; }
.ov-event-card.has-bg-illus::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,8,20,0.72) 0%, rgba(4,8,20,0.65) 40%, rgba(4,8,20,0.88) 100%);
}
.ov-event-card.has-bg-illus > *:not(.ov-pct-badge) { position:relative; z-index:1; }
.ov-event-card.has-bg-illus > .ov-pct-badge { z-index:3; }
.ov-event-card.has-bg-illus .ov-event-title { text-shadow:0 1px 8px rgba(0,0,0,0.9), 0 0 16px var(--shade-5); }
.ov-event-card.has-bg-illus .ov-event-name { text-shadow:0 1px 8px rgba(0,0,0,0.9), 0 0 24px var(--shade-5); }
.ov-event-card.has-bg-illus .ov-event-eta  { text-shadow:0 1px 6px rgba(0,0,0,0.9), 0 0 16px var(--shade-2); }
/* Title with colored glow */
.ov-event-title { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:6px; padding-right:64px; color:var(--textsoft); }
.ov-active .ov-event-title { text-shadow:0 0 10px rgba(var(--card-glow-rgb),0.6); }
/* Name & ETA */
.ov-event-name { font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--textbright); line-height:1.15; }
.ov-event-eta  { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--warn); margin-top:5px; text-shadow:0 0 6px rgba(255,204,85,0.25); }
.ov-active .ov-event-eta { animation:timerPulse 2s ease-in-out infinite; }
/* Progress bar — enhanced */
.ov-prog-bg {
  height:10px; background:rgba(255,255,255,0.07); border-radius:5px; overflow:hidden; margin-top:7px; position:relative;
}
.ov-prog-fill {
  height:100%; border-radius:5px; position:relative; overflow:hidden;
  box-shadow:0 0 8px 1px rgba(var(--card-glow-rgb),0.35);
  background-image:repeating-linear-gradient(
    -45deg, transparent, transparent 4px, var(--tint-4) 4px, var(--tint-4) 8px
  );
  background-size:30px 30px;
  animation:barStripes 1.2s linear infinite;
}
.ov-prog-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  animation:shimmerSweep 2s ease-in-out 1;
}
/* Percentage badge */
.ov-pct-badge {
  position:absolute; top:8px; right:10px; z-index:2;
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright);
  background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:3px 8px; border-radius:var(--radius-sm); border:1px solid rgba(var(--card-glow-rgb),0.35);
  animation:badgeFadeIn 0.3s ease-out;
}
/* Empty state */
.ov-empty-event { text-align:center; opacity:0.40; }
.ov-empty-event-ico { font-size:24px; margin-bottom:5px; filter:grayscale(0.6) opacity(0.6); }
.ov-empty-event-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); }
.ov-report-row { background:rgba(6,11,26,0.75); border:1px solid rgba(var(--accent-rgb),0.18);  border-radius:5px; padding:8px 12px; display:flex; align-items:center; gap:12px;  box-shadow:inset 3px 0 0 0 var(--success); }
.ov-report-planet { font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; color:var(--text); flex:1; }
.ov-report-loot { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold2); font-weight:bold; }
.ov-report-date { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); }

/* ══ ALLIANCE / RANKINGS ══ */
.rnk-layout { display:flex; height:100%; gap:0; overflow:hidden; }
.rnk-main   { flex:1; display:flex; flex-direction:column; overflow:hidden; }
/* 22/05/2026 — refonte v2 compacte : header 1 ligne, total badge inline, podium slim, controls fusionnés */
.rnk-header { padding:12px 24px; border-bottom:1px solid rgba(var(--accent-rgb),0.22); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:14px; flex-wrap:wrap; background:radial-gradient(ellipse at center top, rgba(var(--accent-rgb),0.14), transparent 70%), linear-gradient(180deg, rgba(10,16,32,0.5), transparent); position:relative; }
.rnk-header::before { content:''; position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.5); }
.rnk-head-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rnk-title  { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--accent2); letter-spacing:3px; text-transform:uppercase; text-shadow:0 0 14px rgba(var(--accent-rgb),0.45); margin:0; line-height:1; }
.rnk-subtitle { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textmid); letter-spacing:0.5px; }
.rnk-my-rank  { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold2); background:linear-gradient(180deg,rgba(212,146,10,0.18),rgba(212,146,10,0.08)); border:1px solid rgba(212,146,10,0.4); border-radius:5px; padding:6px 12px; box-shadow:0 0 14px rgba(212,146,10,0.15); }
/* Total joueurs : pastille inline dans le header (plus de bloc séparé) */
.rnk-total-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.08));
  border:1px solid rgba(var(--accent-rgb),0.45);
  border-radius:5px;
}
.rnk-total-badge-ico { display:flex; align-items:center; color:var(--accent2); }
.rnk-total-badge-ico svg { width:14px; height:14px; }
.rnk-total-badge-num { font-family:var(--font-display); font-size:var(--fs-md); font-weight:900; color:var(--accent); letter-spacing:1px; }
.rnk-total-badge-lbl { font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; color:var(--textmid); letter-spacing:1px; text-transform:uppercase; }
@media (max-width:600px) {
  .rnk-total-badge-lbl { display:none; }
}
/* Sticky "Mon rang" — slim band 40px au lieu de 70px */
.rnk-sticky-me { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:44px minmax(120px,1fr) auto auto; gap:10px; align-items:center; padding:7px 14px; margin:6px 18px; background:linear-gradient(90deg,rgba(212,146,10,0.18),rgba(212,146,10,0.06)); border:1px solid rgba(212,146,10,0.45); border-radius:var(--radius); box-shadow:0 2px 12px var(--shade-3), 0 0 12px rgba(212,146,10,0.18); backdrop-filter:blur(6px); }
.rnk-sticky-rank { font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--gold); text-align:center; letter-spacing:1px; text-shadow:0 0 10px rgba(212,146,10,0.5); }
.rnk-sticky-name { font-family:var(--font-body); font-size:var(--fs-md); font-weight:700; color:var(--textbright); letter-spacing:0.4px; }
.rnk-sticky-score { font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:700; color:var(--gold2); white-space:nowrap; }
.rnk-sticky-cmp { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textmid); display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.rnk-cmp-delta { color:var(--accent2); font-weight:600; }
.rnk-cmp-target { color:var(--textbright); cursor:pointer; }
.rnk-cmp-target:hover { color:var(--accent); text-decoration:underline; }
@media (max-width:720px) {
  .rnk-sticky-me { grid-template-columns:50px 1fr auto; }
  .rnk-sticky-cmp { grid-column:1 / -1; justify-content:flex-start; font-size:var(--fs-sm); }
}
.rnk-table-wrap { flex:1; overflow-y:auto; padding:0 0 10px; }
.rnk-table { width:100%; border-collapse:collapse; }
.rnk-th { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; color:var(--accent2); letter-spacing:2.5px; text-transform:uppercase; padding:14px 16px; border-bottom:2px solid rgba(var(--accent-rgb),0.35); text-align:left; position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(6,10,22,0.98), rgba(4,8,15,0.98)); backdrop-filter:blur(10px); }
.rnk-th.num { text-align:right; }
/* Search dans la barre controls fusionnée (plus de margin externe) */
.rnk-search { flex:1; min-width:160px; padding:7px 12px 7px 28px; font-family:var(--font-mono); font-size:var(--fs-base); color:var(--text); background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.2); border-radius:5px; outline:none; transition:border-color 0.2s; }
.rnk-search:focus { border-color:var(--accent); background:rgba(var(--accent-rgb),0.1); }
/* Barre controls fusionnée : filtres + recherche en 1 ligne */
.rnk-controls { display:flex; align-items:center; gap:8px; padding:6px 18px 8px; flex-wrap:wrap; }
.rnk-controls .rnk-filter-bar { padding:0; gap:8px; }
.rnk-search-wrap { position:relative; flex:1; min-width:160px; display:flex; align-items:center; }
.rnk-search-wrap::before { content:'🔍'; position:absolute; left:9px; font-size:var(--fs-sm); color:var(--textmid); pointer-events:none; }
.rnk-search-clear { position:absolute; right:8px; display:flex; align-items:center; justify-content:center; width:18px; height:18px; border:none; background:transparent; color:var(--textmid); cursor:pointer; }
.rnk-tr { border-bottom:1px solid rgba(var(--accent-rgb),0.08); cursor:pointer; transition:background 0.15s ease; }
.rnk-tr:nth-child(even) { background:rgba(var(--accent-rgb),0.03); }
.rnk-tr:hover { background:rgba(var(--accent-rgb),0.10); }
.rnk-tr.active { background:rgba(var(--accent-rgb),0.12); box-shadow:inset 3px 0 0 var(--accent); }
.rnk-tr.is-me  { background:rgba(212,146,10,0.07); }
.rnk-tr.is-me:hover { background:rgba(212,146,10,0.12); }
.rnk-tr.is-me.active { background:rgba(212,146,10,0.14); box-shadow:inset 3px 0 0 var(--gold); }
.rnk-td { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--text); padding:14px 16px; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rnk-td.num { text-align:right; color:var(--gold2); font-weight:700; font-size:var(--fs-lg); }
.rnk-td.num:first-of-type { color:var(--gold); font-weight:900; font-size:16px; text-shadow:0 0 6px rgba(212,146,10,0.3); }
/* Nom du joueur : taille +2 pour lisibilité */
.rnk-td:nth-child(2) { font-size:var(--fs-lg); font-weight:600; }
.rnk-medal { font-size:16px; font-weight:900; text-align:center; min-width:44px; }
.rnk-td.dim { color:var(--textmid); }
.rnk-medal { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; text-align:center; width:72px; }
.rnk-medal.gold { color:var(--gold2); }
.rnk-faction { text-align:center; font-size:16px; }
.rnk-rank { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; }
.rnk-rank.gold   { color:var(--gold2); text-shadow:0 0 8px rgba(240,176,48,0.5); }
.rnk-rank.silver { color:#a0b0c0; }
.rnk-rank.bronze { color:#c07040; }
.rnk-rank.dim    { color:var(--textsoft); }

/* ═══════════════════════════════════════════════════════
   POLISH RANKINGS v3 (22/05/2026)
   - Couleurs par catégorie de score (bld bleu, tech violet, mil rouge, autre gris)
   - Top 10 premium : gradient or/argent/bronze sur top 3, halo doré subtil 4-10
   - Bordure gauche faction (3px) — scan rapide par race
   - Mini stacked-bar par ligne sous le SCORE (breakdown visuel)
   ═══════════════════════════════════════════════════════ */

/* (3) Couleurs par catégorie — colonnes du tableau global
   Ordre cols : rang(1) | nom(2) | race(3) | alliance(4) | SCORE(5) | ÉCON(6) | RECH(7) | MIL(8) | AUTRE(9) */
.rnk-table tbody .rnk-td:nth-child(5) { color:var(--gold);   font-weight:900; font-size:16px; text-shadow:0 0 6px rgba(212,146,10,0.35); }
.rnk-table tbody .rnk-td:nth-child(6) { color:#67a3ff; font-weight:700; }  /* écon → bleu */
.rnk-table tbody .rnk-td:nth-child(7) { color:#b88dff; font-weight:700; }  /* rech → violet */
.rnk-table tbody .rnk-td:nth-child(8) { color:#ff8580; font-weight:700; }  /* mil → rouge */
.rnk-table tbody .rnk-td:nth-child(9) { color:#9aa4b2; font-weight:600; }  /* autre → gris */
.rnk-table .rnk-th:nth-child(5) { color:var(--gold2); }
.rnk-table .rnk-th:nth-child(6) { color:#67a3ff; }
.rnk-table .rnk-th:nth-child(7) { color:#b88dff; }
.rnk-table .rnk-th:nth-child(8) { color:#ff8580; }
.rnk-table .rnk-th:nth-child(9) { color:#9aa4b2; }

/* (2) Top 10 treatment — fonds dégradés premium */
.rnk-table tbody .rnk-tr:nth-child(1):not(.is-me) { background:linear-gradient(90deg, rgba(212,146,10,0.18), rgba(212,146,10,0.04) 50%, transparent);  box-shadow:inset 3px 0 0 0 #d4920a, inset 0 0 22px rgba(212,146,10,0.08); }
.rnk-table tbody .rnk-tr:nth-child(2):not(.is-me) { background:linear-gradient(90deg, rgba(192,192,210,0.13), rgba(192,192,210,0.03) 50%, transparent);   box-shadow:inset 3px 0 0 0 #c0c0d2; }
.rnk-table tbody .rnk-tr:nth-child(3):not(.is-me) { background:linear-gradient(90deg, rgba(205,127,50,0.13), rgba(205,127,50,0.03) 50%, transparent);   box-shadow:inset 3px 0 0 0 #cd7f32; }
.rnk-table tbody .rnk-tr:nth-child(n+4):nth-child(-n+10):not(.is-me) { background:linear-gradient(90deg, rgba(212,146,10,0.07), transparent 60%); }
.rnk-table tbody .rnk-tr:nth-child(1) .rnk-medal { color:#d4920a; text-shadow:0 0 12px rgba(212,146,10,0.65); font-size:18px; }
.rnk-table tbody .rnk-tr:nth-child(2) .rnk-medal { color:#c0c0d2; text-shadow:0 0 10px rgba(192,192,210,0.5); font-size:var(--fs-xl); }
.rnk-table tbody .rnk-tr:nth-child(3) .rnk-medal { color:#cd7f32; text-shadow:0 0 10px rgba(205,127,50,0.5); font-size:var(--fs-xl); }

/* (4) Bordure gauche faction — couleur par race (override top 3 conservée si top) */
.rnk-table tbody .rnk-tr[data-faction="tauri"]:not(:nth-child(-n+3))   { box-shadow:inset 3px 0 0 #5baaff; }
.rnk-table tbody .rnk-tr[data-faction="goauld"]:not(:nth-child(-n+3))  { box-shadow:inset 3px 0 0 #d4af37; }
.rnk-table tbody .rnk-tr[data-faction="anciens"]:not(:nth-child(-n+3)) { box-shadow:inset 3px 0 0 #6dd5ff; }
.rnk-table tbody .rnk-tr[data-faction="wraith"]:not(:nth-child(-n+3))  { box-shadow:inset 3px 0 0 #b04ad8; }
.rnk-table tbody .rnk-tr[data-faction="tokra"]:not(:nth-child(-n+3))   { box-shadow:inset 3px 0 0 #4ed9b5; }
.rnk-table tbody .rnk-tr[data-faction="ori"]:not(:nth-child(-n+3))     { box-shadow:inset 3px 0 0 #ff7a4a; }

/* (1) Mini stacked-bar par ligne — affiché sous SCORE col, dans la même td */
.rnk-mini-bar { display:flex; height:4px; margin-top:6px; border-radius:2px; overflow:hidden; background:var(--tint-5); }
.rnk-mini-bar > span { display:block; height:100%; transition:width 0.3s; }
.rnk-mini-bar > .seg-bld  { background:linear-gradient(90deg,#67a3ff,#4d8de0); }
.rnk-mini-bar > .seg-tech { background:linear-gradient(90deg,#b88dff,#9a6bff); }
.rnk-mini-bar > .seg-mil  { background:linear-gradient(90deg,#ff8580,#e85a55); }
.rnk-mini-bar > .seg-oth  { background:linear-gradient(90deg,#9aa4b2,#7a8290); }

/* is-me reste prioritaire visuellement */
.rnk-table tbody .rnk-tr.is-me { background:linear-gradient(90deg, rgba(212,146,10,0.18), rgba(212,146,10,0.06)) !important;  box-shadow:inset 3px 0 0 0 var(--gold) !important, inset 0 0 18px rgba(212,146,10,0.12) !important; }

/* ═══════════════════════════════════════════════════════
   REFONTE v3 "FICHE COMMANDANT" (22/05/2026)
   Rangées 80px avec avatar circulaire 48px, nom + meta sur 2 lignes,
   score 24px, stacked-bar épaisse 8px. Top 3 avec couronne + halo.
   Fix spécificité : couleurs par catégorie via .rnk-table-v3
   ═══════════════════════════════════════════════════════ */

/* Table v3 — colonnes : RANG | COMMANDANT | SCORE | ÉCON | RECH | MIL | AUTRE */
.rnk-table-v3 tbody .rnk-tr { height:80px; transition:transform 0.15s ease, box-shadow 0.2s ease; }
.rnk-table-v3 tbody .rnk-tr:hover { transform:translateX(2px); box-shadow:inset 0 0 24px rgba(var(--accent-rgb),0.15), 0 4px 16px var(--shade-3); }
.rnk-table-v3 .rnk-medal { font-size:18px; font-weight:900; min-width:54px; text-align:center; }
.rnk-table-v3 tbody .rnk-tr:nth-child(1) .rnk-medal { font-size:24px; }
.rnk-table-v3 tbody .rnk-tr:nth-child(2) .rnk-medal,
.rnk-table-v3 tbody .rnk-tr:nth-child(3) .rnk-medal { font-size:var(--fs-2xl); }

/* Layout v3.6 : table sizes-to-content + centrée dans son parent. Vide symétrique L+R, plus de trou à droite */
.rnk-table-v3 { table-layout:fixed; width:auto; min-width:780px; max-width:100%; margin:0 auto; }
.rnk-table-v3 thead th:first-child,
.rnk-table-v3 tbody .rnk-medal { width:44px; min-width:44px; max-width:44px; text-align:center; padding:6px 2px; }
.rnk-fiche-cell { padding:10px 16px !important; width:280px; }
.rnk-table-v3 .rnk-th:nth-child(3),
.rnk-table-v3 tbody .rnk-td:nth-child(3) { width:120px; padding:14px 14px; }                /* SCORE */
.rnk-table-v3 .rnk-th:nth-child(n+4),
.rnk-table-v3 tbody .rnk-td:nth-child(n+4) { width:95px; padding:14px 10px; white-space:nowrap; } /* catégories compactes */
.rnk-fiche { display:flex; align-items:center; gap:14px; }
/* Réduit les médailles top 3 (déjà larges) — la cellule est seulement 50px */
.rnk-table-v3 tbody .rnk-tr:nth-child(1) .rnk-medal { font-size:18px; }
.rnk-table-v3 tbody .rnk-tr:nth-child(2) .rnk-medal,
.rnk-table-v3 tbody .rnk-tr:nth-child(3) .rnk-medal { font-size:16px; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+4) .rnk-medal { font-size:var(--fs-base); color:var(--textmid); font-weight:700; }
.rnk-avatar {
  flex-shrink:0; position:relative;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:900;
  color:var(--textbright);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.25), rgba(var(--accent-rgb),0.05));
  border:2px solid rgba(var(--accent-rgb),0.35);
  box-shadow:0 2px 10px var(--shade-3), inset 0 1px 3px var(--tint-6);
  transition:transform 0.2s, box-shadow 0.2s;
}
.rnk-avatar.gold {
  background:linear-gradient(135deg, #ffd86b, #c89432 40%, #8a5e1c);
  border-color:#ffe28a;
  box-shadow:0 0 18px rgba(212,146,10,0.6), inset 0 1px 4px rgba(255,255,255,0.3);
  color:#3a2510;
  animation:rnkAvatarGold 2.8s ease-in-out infinite;
}
.rnk-avatar.silver {
  background:linear-gradient(135deg, #f0f0f8, #c0c0d2 40%, #8a8aa0);
  border-color:#e8e8f0;
  box-shadow:0 0 14px rgba(192,192,210,0.45), inset 0 1px 4px rgba(255,255,255,0.4);
  color:#2a2a3a;
}
.rnk-avatar.bronze {
  background:linear-gradient(135deg, #e8a878, #cd7f32 40%, #8a4f1c);
  border-color:#f0b888;
  box-shadow:0 0 14px rgba(205,127,50,0.4), inset 0 1px 4px var(--tint-10);
  color:#3a1f0a;
}
.rnk-avatar-crown {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:18px; line-height:1;
  filter:drop-shadow(0 0 6px rgba(212,146,10,0.8));
  pointer-events:none;
}
.rnk-avatar.silver .rnk-avatar-crown,
.rnk-avatar.bronze .rnk-avatar-crown { font-size:var(--fs-md); top:-10px; filter:drop-shadow(0 0 4px rgba(192,192,210,0.6)); }
.rnk-avatar-init { line-height:1; }

/* Avatar = logo de faction (refonte v3.1) */
.rnk-avatar-fac { background:radial-gradient(circle at 30% 30%, var(--tint-6), rgba(0,0,0,0.45)); }
.rnk-avatar-logo { display:flex; align-items:center; justify-content:center; width:44px; height:44px; }
/* Override image-rendering:pixelated des .fac-png (designed pour 22px), pas adapté à 44px */
.rnk-avatar-logo img,
.rnk-avatar-logo .fac-png {
  width:44px; height:44px; object-fit:contain;
  image-rendering:auto !important;
  image-rendering:-webkit-optimize-contrast !important;
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),0.4));
}
.rnk-avatar-fac.gold .rnk-avatar-logo img { filter:drop-shadow(0 0 14px rgba(255,200,80,0.85)); }
.rnk-avatar-fac.silver .rnk-avatar-logo img { filter:drop-shadow(0 0 10px rgba(192,192,210,0.7)); }
.rnk-avatar-fac.bronze .rnk-avatar-logo img { filter:drop-shadow(0 0 10px rgba(205,127,50,0.65)); }
/* Couleur du ring de bordure par faction */
.rnk-avatar-fac[data-faction="tauri"]   { border-color:rgba(91,170,255,0.55); }
.rnk-avatar-fac[data-faction="goauld"]  { border-color:rgba(212,175,55,0.55); }
.rnk-avatar-fac[data-faction="anciens"] { border-color:rgba(109,213,255,0.55); }
.rnk-avatar-fac[data-faction="wraith"]  { border-color:rgba(176,74,216,0.55); }
.rnk-avatar-fac[data-faction="tokra"]   { border-color:rgba(78,217,181,0.55); }
.rnk-avatar-fac[data-faction="ori"]     { border-color:rgba(255,122,74,0.6); }
/* Top 3 garde le ring or/argent/bronze qui override la faction */
.rnk-avatar-fac.gold   { border-color:#ffe28a !important; }
.rnk-avatar-fac.silver { border-color:#e8e8f0 !important; }
.rnk-avatar-fac.bronze { border-color:#f0b888 !important; }

@keyframes rnkAvatarGold {
  0%, 100% { box-shadow:0 0 18px rgba(212,146,10,0.6), inset 0 1px 4px rgba(255,255,255,0.3); }
  50% { box-shadow:0 0 28px rgba(255,200,80,0.9), 0 0 50px rgba(255,200,80,0.4), inset 0 1px 4px rgba(255,255,255,0.45); }
}

.rnk-fiche-info { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; flex:1; }
.rnk-fiche-name-line { font-family:var(--font-body); font-size:var(--fs-xl); font-weight:700; color:var(--textbright); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:0.3px; }
.rnk-fiche-meta-line { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textmid); }
.rnk-fiche-fac { display:inline-flex; align-items:center; width:18px; height:18px; }
.rnk-fiche-fac svg, .rnk-fiche-fac img { width:18px; height:18px; }
.rnk-fiche-fac-lbl { color:var(--textmid); }
.rnk-fiche-sep { color:var(--textsoft); opacity:0.5; }
.rnk-fiche-meta-line .rnk-tag { color:var(--accent); font-weight:600; }

/* SCORE column — même famille mono que les catégories, juste plus gros/gras/glow */
.rnk-table-v3 tbody .rnk-td:nth-child(3) {
  color:var(--gold) !important; font-family:var(--font-mono);
  font-size:19px !important; font-weight:900 !important;
  text-shadow:0 0 8px rgba(212,146,10,0.4);
  letter-spacing:0.5px;
  vertical-align:middle;
}
.rnk-table-v3 tbody .rnk-tr:nth-child(1) .rnk-td:nth-child(3) {
  font-size:22px !important;
  background:linear-gradient(90deg, transparent, rgba(212,146,10,0.05), transparent);
}

/* Stacked-bar épaisse 8px sous le score */
.rnk-mini-bar { display:flex; height:8px; margin-top:8px; border-radius:var(--radius-sm); overflow:hidden; background:rgba(0,0,0,0.45); border:1px solid var(--tint-3); width:140px; max-width:100%; }
.rnk-mini-bar > span { display:block; height:100%; transition:width 0.3s; min-width:1px; }
.rnk-mini-bar > .seg-bld  { background:linear-gradient(180deg,#82b6ff,#4d8de0); box-shadow:inset 0 1px 0 var(--tint-10); }
.rnk-mini-bar > .seg-tech { background:linear-gradient(180deg,#c9a8ff,#9a6bff); box-shadow:inset 0 1px 0 var(--tint-10); }
.rnk-mini-bar > .seg-mil  { background:linear-gradient(180deg,#ff9d99,#e85a55); box-shadow:inset 0 1px 0 var(--tint-10); }
.rnk-mini-bar > .seg-oth  { background:linear-gradient(180deg,#aab4c2,#7a8290); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2); }

/* Catégories — même famille mono que SCORE, taille 15px (proche du score 19px), couleur par catégorie */
.rnk-table-v3 tbody .rnk-td:nth-child(4) { color:#82b6ff !important; font-family:var(--font-mono); font-weight:700; font-size:var(--fs-lg); letter-spacing:0.3px; }  /* écon */
.rnk-table-v3 tbody .rnk-td:nth-child(5) { color:#c9a8ff !important; font-family:var(--font-mono); font-weight:700; font-size:var(--fs-lg); letter-spacing:0.3px; }  /* rech */
.rnk-table-v3 tbody .rnk-td:nth-child(6) { color:#ff9d99 !important; font-family:var(--font-mono); font-weight:700; font-size:var(--fs-lg); letter-spacing:0.3px; }  /* mil */
.rnk-table-v3 tbody .rnk-td:nth-child(7) { color:#aab4c2 !important; font-family:var(--font-mono); font-weight:600; font-size:var(--fs-lg); letter-spacing:0.3px; }  /* autre */
.rnk-table-v3 .rnk-th:nth-child(3) { color:var(--gold2); }
.rnk-table-v3 .rnk-th:nth-child(4) { color:#82b6ff; }
.rnk-table-v3 .rnk-th:nth-child(5) { color:#c9a8ff; }
.rnk-table-v3 .rnk-th:nth-child(6) { color:#ff9d99; }
.rnk-table-v3 .rnk-th:nth-child(7) { color:#aab4c2; }

/* Top 3 backgrounds — re-override pour v3 (col index différents) */
.rnk-table-v3 tbody .rnk-tr:nth-child(1):not(.is-me) { background:linear-gradient(90deg, rgba(212,146,10,0.22), rgba(212,146,10,0.05) 60%, transparent) !important; box-shadow:inset 4px 0 0 #d4920a, inset 0 0 30px rgba(212,146,10,0.1) !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(2):not(.is-me) { background:linear-gradient(90deg, rgba(192,192,210,0.16), rgba(192,192,210,0.04) 60%, transparent) !important; box-shadow:inset 4px 0 0 #c0c0d2 !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(3):not(.is-me) { background:linear-gradient(90deg, rgba(205,127,50,0.16), rgba(205,127,50,0.04) 60%, transparent) !important; box-shadow:inset 4px 0 0 #cd7f32 !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+4):nth-child(-n+10):not(.is-me) { background:linear-gradient(90deg, rgba(212,146,10,0.08), transparent 70%) !important; }

/* Bordure faction pour rang #11+ (override le inset 3px précédent qui ne supporte qu'un box-shadow) */
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="tauri"]   { box-shadow:inset 4px 0 0 #5baaff !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="goauld"]  { box-shadow:inset 4px 0 0 #d4af37 !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="anciens"] { box-shadow:inset 4px 0 0 #6dd5ff !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="wraith"]  { box-shadow:inset 4px 0 0 #b04ad8 !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="tokra"]   { box-shadow:inset 4px 0 0 #4ed9b5 !important; }
.rnk-table-v3 tbody .rnk-tr:nth-child(n+11)[data-faction="ori"]     { box-shadow:inset 4px 0 0 #ff7a4a !important; }

@media (max-width:720px) {
  .rnk-table-v3 .rnk-th:nth-child(n+4),
  .rnk-table-v3 tbody .rnk-td:nth-child(n+4) { display:none; }
  .rnk-table-v3 tbody .rnk-tr { height:auto; }
  .rnk-fiche { gap:10px; }
  .rnk-avatar { width:40px; height:40px; font-size:18px; }
  .rnk-fiche-name-line { font-size:var(--fs-lg); }
  .rnk-mini-bar { width:100px; }
}

/* ═══════════════════════════════════════════════════════
   REFONTE v4 — GRILLE DE CARDS (22/05/2026)
   Pas de table : grille responsive auto-fill. Chaque joueur = 1 card.
   ═══════════════════════════════════════════════════════ */
.rnk-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
  padding:14px 18px 20px;
}
.rnk-cardv4 {
  position:relative;
  background:linear-gradient(180deg, rgba(20,30,48,0.75), rgba(8,12,24,0.92));
  border:1px solid rgba(var(--accent-rgb), 0.18);
  border-radius:var(--radius-lg);
  padding:14px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
  overflow:hidden;
}
.rnk-cardv4:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(var(--accent-rgb), 0.18);
  border-color:rgba(var(--accent-rgb), 0.42);
}
/* Top 3 traitement premium */
.rnk-cardv4.rnk-rank-1 {
  border-color:rgba(212,146,10,0.65);
  background:linear-gradient(180deg, rgba(212,146,10,0.22), rgba(8,12,24,0.94));
  box-shadow:0 0 22px rgba(212,146,10,0.25);
}
.rnk-cardv4.rnk-rank-1::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, #ffd86b, #c89432, #ffd86b, transparent);
  box-shadow:0 0 12px rgba(255,200,80,0.6);
}
.rnk-cardv4.rnk-rank-2 {
  border-color:rgba(192,192,210,0.55);
  background:linear-gradient(180deg, rgba(192,192,210,0.14), rgba(8,12,24,0.93));
}
.rnk-cardv4.rnk-rank-2::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #e8e8f0, #a0a0b0, transparent);
}
.rnk-cardv4.rnk-rank-3 {
  border-color:rgba(205,127,50,0.55);
  background:linear-gradient(180deg, rgba(205,127,50,0.14), rgba(8,12,24,0.93));
}
.rnk-cardv4.rnk-rank-3::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #f0b888, #cd7f32, transparent);
}
/* is-me */
.rnk-cardv4.is-me {
  border-color:var(--gold) !important;
  background:linear-gradient(180deg, rgba(212,146,10,0.20), rgba(8,12,24,0.94)) !important;
  box-shadow:0 0 18px rgba(212,146,10,0.3) !important;
}

/* Head : rang + médaille */
.rnk-cardv4-head {
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-size:var(--fs-base); font-weight:700;
  letter-spacing:2px; color:var(--accent2);
}
.rnk-cardv4-rank { letter-spacing:1.5px; }
.rnk-cardv4.rnk-rank-1 .rnk-cardv4-rank { color:#ffd86b; }
.rnk-cardv4.rnk-rank-2 .rnk-cardv4-rank { color:#e8e8f0; }
.rnk-cardv4.rnk-rank-3 .rnk-cardv4-rank { color:#f0b888; }
.rnk-cardv4-medal { font-size:20px; line-height:1; }

/* Avatar centré (84px) avec logo de faction 72px — plus de présence visuelle */
.rnk-cardv4-avatar {
  width:84px; height:84px; margin:4px auto 2px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2px solid rgba(var(--accent-rgb), 0.35);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), var(--shade-4));
  position:relative;
}
.rnk-cardv4-avatar img,
.rnk-cardv4-avatar .fac-png {
  width:72px; height:72px; object-fit:contain;
  image-rendering:auto !important;
  image-rendering:-webkit-optimize-contrast !important;
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),0.45));
}
.rnk-cardv4-avatar[data-faction="tauri"]   { border-color:rgba(91,170,255,0.6); }
.rnk-cardv4-avatar[data-faction="goauld"]  { border-color:rgba(212,175,55,0.6); }
.rnk-cardv4-avatar[data-faction="anciens"] { border-color:rgba(109,213,255,0.6); }
.rnk-cardv4-avatar[data-faction="wraith"]  { border-color:rgba(176,74,216,0.6); }
.rnk-cardv4-avatar[data-faction="tokra"]   { border-color:rgba(78,217,181,0.6); }
.rnk-cardv4-avatar[data-faction="ori"]     { border-color:rgba(255,122,74,0.65); }
.rnk-cardv4.rnk-rank-1 .rnk-cardv4-avatar { border-color:#ffe28a !important; box-shadow:0 0 18px rgba(212,146,10,0.5); }
.rnk-cardv4.rnk-rank-1 .rnk-cardv4-avatar img { filter:drop-shadow(0 0 14px rgba(255,200,80,0.85)); }
.rnk-cardv4.rnk-rank-2 .rnk-cardv4-avatar { border-color:#e8e8f0 !important; }
.rnk-cardv4.rnk-rank-3 .rnk-cardv4-avatar { border-color:#f0b888 !important; }

/* Nom centré */
.rnk-cardv4-name {
  text-align:center;
  font-family:var(--font-body); font-size:16px; font-weight:700;
  color:var(--textbright); letter-spacing:0.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.2;
}
.rnk-cardv4-prem { color:var(--gold2); margin-right:3px; }

/* Meta : faction + alliance */
.rnk-cardv4-meta {
  text-align:center;
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--textmid); letter-spacing:0.4px;
}
.rnk-cardv4-meta .rnk-tag { color:var(--accent); font-weight:600; cursor:pointer; }

/* Score gros au centre, entouré de pointillés */
.rnk-cardv4-score {
  text-align:center;
  font-family:var(--font-mono); font-size:var(--fs-3xl); font-weight:900;
  color:var(--gold);
  text-shadow:0 0 12px rgba(212,146,10,0.45);
  letter-spacing:0.5px;
  padding:6px 0;
  margin-top:2px;
  border-top:1px dashed rgba(var(--accent-rgb), 0.22);
  border-bottom:1px dashed rgba(var(--accent-rgb), 0.22);
}
.rnk-cardv4.rnk-rank-1 .rnk-cardv4-score { font-size:30px; }

/* Breakdown 4 catégories en grille 4 cols */
.rnk-cardv4-breakdown {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  margin-top:2px;
}
.rnk-cardv4-breakdown .bd-cell {
  display:flex; flex-direction:column; gap:2px;
  text-align:center;
  padding:4px 2px;
}
.rnk-cardv4-breakdown .bd-cell .lbl {
  font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:1px; opacity:0.7;
}
.rnk-cardv4-breakdown .bd-cell .val {
  font-family:var(--font-mono); font-size:var(--fs-base); font-weight:700;
  letter-spacing:0.2px;
}
.rnk-cardv4-breakdown .bd-cell[data-cat="econ"] .val,
.rnk-cardv4-breakdown .bd-cell[data-cat="econ"] .lbl { color:#82b6ff; }
.rnk-cardv4-breakdown .bd-cell[data-cat="rech"] .val,
.rnk-cardv4-breakdown .bd-cell[data-cat="rech"] .lbl { color:#c9a8ff; }
.rnk-cardv4-breakdown .bd-cell[data-cat="mil"]  .val,
.rnk-cardv4-breakdown .bd-cell[data-cat="mil"]  .lbl { color:#ff9d99; }
.rnk-cardv4-breakdown .bd-cell[data-cat="autre"].val,
.rnk-cardv4-breakdown .bd-cell[data-cat="autre"].lbl { color:#aab4c2; }

/* 27/05/2026 — Highlight de la cellule breakdown active (onglet sélectionné). */
.rnk-cardv4-breakdown .bd-cell.bd-cell-active {
  background:rgba(255,180,80,0.10);
  border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,180,80,0.40);
}
.rnk-cardv4-breakdown .bd-cell.bd-cell-active .val {
  font-size:var(--fs-md);
}

/* Mobile : 1 card par ligne, padding réduit, logo gardé généreux */
@media (max-width:600px) {
  .rnk-grid { grid-template-columns:1fr; padding:10px 12px; gap:10px; }
  .rnk-cardv4 { padding:12px 14px 10px; }
  .rnk-cardv4-avatar { width:72px; height:72px; }
  .rnk-cardv4-avatar img, .rnk-cardv4-avatar .fac-png { width:62px; height:62px; }
  .rnk-cardv4-score { font-size:var(--fs-2xl); }
  .rnk-cardv4.rnk-rank-1 .rnk-cardv4-score { font-size:var(--fs-3xl); }
}



.rnk-name { font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; color:var(--textbright); }
.rnk-name.is-me { color:var(--gold2); }
.rnk-me-tag { font-size:var(--fs-md); background:rgba(212,146,10,0.2); border:1px solid rgba(212,146,10,0.4); color:var(--gold); padding:1px 4px; border-radius:2px; margin-left:5px; vertical-align:middle; }
.rnk-bar-wrap { width:80px; height:4px; background:var(--tint-3); border-radius:2px; display:inline-block; vertical-align:middle; }
.rnk-bar { height:100%; border-radius:2px; }
/* Profile panel */
.rnk-profile { width:240px; flex-shrink:0; border-left:1px solid rgba(var(--accent-rgb),0.18); display:flex; flex-direction:column; overflow-y:auto; background:rgba(4,8,20,0.6); }
.rnk-profile.hidden { display:none; }
.rnk-prof-head { padding:16px 14px 10px; border-bottom:1px solid rgba(var(--accent-rgb),0.15); }
.rnk-prof-icon { font-size:28px; text-align:center; margin-bottom:6px; }
.rnk-prof-name { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); text-align:center; letter-spacing:2px; margin-bottom:2px; }
.rnk-prof-sub  { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); text-align:center; }
.rnk-prof-section { padding:10px 14px 4px; }
.rnk-prof-lbl { font-family:var(--font-display); font-size:var(--fs-xs); color:var(--textmid); letter-spacing:1.5px; margin-bottom:5px; }
.rnk-prof-stat { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.12); }
.rnk-prof-stat-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); }
.rnk-prof-stat-val { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold2); font-weight:bold; }
.rnk-diplo-btn { margin:10px 14px; padding:8px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.4); color:var(--accent2); border-radius:var(--radius-sm); cursor:pointer; text-align:center; transition:all 0.2s; }
.rnk-diplo-btn:hover { background:rgba(var(--accent-rgb),0.22); border-color:var(--accent); }
/* ── Galactic Market ── */
.mkt-layout { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.mkt-header { padding:16px 22px 12px; border-bottom:1px solid var(--tint-4); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background:linear-gradient(180deg,rgba(4,8,15,0.7),rgba(4,8,15,0.35)); }
.mkt-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--textbright); letter-spacing:3px; text-transform:uppercase; text-shadow:0 0 10px rgba(var(--accent-rgb),0.25); }
.mkt-tabs { display:flex; gap:8px; }
.mkt-tab { padding:9px 18px; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-radius:var(--radius); border:1px solid var(--tint-5); color:var(--textsoft); background:var(--tint-1); transition:all 0.2s; position:relative; overflow:hidden; }
.mkt-tab:hover { border-color:rgba(var(--accent-rgb),0.45); color:var(--textbright); transform:translateY(-1px); box-shadow:0 0 10px rgba(var(--accent-rgb),0.14); }
.mkt-tab.active { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.2),rgba(var(--accent-rgb),0.08)); border-color:rgba(var(--accent-rgb),0.55); color:var(--accent2); text-shadow:0 0 8px rgba(var(--accent-rgb),0.4); box-shadow:0 0 14px rgba(var(--accent-rgb),0.22), inset 0 0 6px rgba(var(--accent-rgb),0.08); }
.mkt-body { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
/* Offer table */
.mkt-table { width:100%; border-collapse:collapse; }
.mkt-th { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:2.5px; color:var(--textsoft); padding:12px 12px; border-bottom:1px solid var(--tint-7); text-align:left; text-transform:uppercase; background:linear-gradient(180deg,rgba(4,8,15,0.8),rgba(4,8,15,0.4)); }
.mkt-tr { border-bottom:1px solid var(--tint-4); transition:all 0.18s; border-left:3px solid transparent; }
.mkt-tr:hover { background:var(--tint-2); border-left-color:rgba(var(--accent-rgb),0.4); }
.mkt-tr.mine { background:linear-gradient(90deg,rgba(212,146,10,0.08),rgba(212,146,10,0.015)); border-left-color:var(--gold); }
.mkt-td { padding:10px; font-family:var(--font-mono); font-size:var(--fs-md); color:#a8c0d8; vertical-align:middle; }
.mkt-res-stack { display:flex; flex-direction:column; gap:5px; }
.mkt-res-line { display:flex; align-items:center; gap:8px; font-size:var(--fs-lg); font-weight:600; color:var(--textbright); }
.mkt-res-line .metal { color:#b0c8e8; } .mkt-res-line .naq { color:#f0b030; } .mkt-res-line .naqria { color:#60c8ff; }
.mkt-res-line img, .mkt-res-line svg { width:22px !important; height:22px !important; flex-shrink:0; }
.mkt-seller { font-size:var(--fs-lg); color:var(--textbright); font-family:var(--font-body); font-weight:700; letter-spacing:0.5px; }
.mkt-time { font-size:var(--fs-md); color:var(--textsoft); margin-top:2px; }
.mkt-accept-btn { padding:9px 18px; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-radius:7px; border:1px solid rgba(46,204,136,0.5); background:linear-gradient(180deg,rgba(46,204,136,0.22),rgba(46,204,136,0.08)); color:var(--success); transition:all 0.22s; box-shadow:0 0 8px rgba(46,204,136,0.12); }
.mkt-accept-btn:hover { background:linear-gradient(180deg,rgba(46,204,136,0.38),rgba(46,204,136,0.15)); border-color:rgba(46,204,136,0.7); transform:translateY(-1px); box-shadow:0 0 16px rgba(46,204,136,0.3); }
.mkt-cancel-btn { padding:9px 18px; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-radius:7px; border:1px solid rgba(255,80,80,0.4); background:linear-gradient(180deg,rgba(255,80,80,0.15),rgba(255,80,80,0.05)); color:var(--danger); transition:all 0.22s; }
.mkt-cancel-btn:hover { background:linear-gradient(180deg,rgba(255,80,80,0.3),rgba(255,80,80,0.1)); border-color:rgba(255,80,80,0.6); transform:translateY(-1px); box-shadow:0 0 14px rgba(255,80,80,0.25); }
/* Create offer form */
.mkt-form { background:linear-gradient(180deg,rgba(8,14,28,0.8),rgba(6,10,22,0.8)); border:1px solid var(--tint-7); border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:14px; backdrop-filter:blur(6px); }
.mkt-form-title { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--accent2); letter-spacing:2.5px; text-transform:uppercase; text-shadow:0 0 8px rgba(var(--accent-rgb),0.25); }
.mkt-form-row { display:flex; gap:16px; flex-wrap:wrap; }
.mkt-form-col { flex:1; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.mkt-form-lbl { font-family:var(--font-display); font-size:var(--fs-md); color:var(--textsoft); letter-spacing:1px; }
.mkt-form-inputs { display:flex; flex-direction:column; gap:5px; }
.mkt-inp-row { display:flex; align-items:center; gap:6px; }
.mkt-inp-icon { font-size:16px; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.mkt-inp-icon img, .mkt-inp-icon svg { width:20px !important; height:20px !important; }
.mkt-inp { flex:1; background:var(--tint-3); border:1px solid var(--tint-5); border-radius:3px; color:#d0e8ff; font-family:var(--font-mono); font-size:var(--fs-md); padding:5px 7px; }
.mkt-inp:focus { outline:none; border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25), 0 0 4px rgba(var(--accent-rgb),0.15); background:rgba(var(--accent-rgb),0.04); }
.mkt-submit-btn { padding:11px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; border-radius:var(--radius); border:1px solid rgba(var(--accent-rgb),0.55); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.22),rgba(var(--accent-rgb),0.08)); color:var(--accent2); transition:all 0.22s; box-shadow:0 0 12px rgba(var(--accent-rgb),0.15); }
.mkt-submit-btn:hover { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.35),rgba(var(--accent-rgb),0.14)); transform:translateY(-1px); box-shadow:0 0 18px rgba(var(--accent-rgb),0.3); }
.mkt-empty { padding:32px; text-align:center; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); }
/* Market filter bar */
.mkt-filter-bar { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
.mkt-filter-btn { padding:4px 10px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1px; cursor:pointer; border-radius:var(--radius-sm); border:1px solid var(--tint-7); color:var(--textsoft); background:transparent; transition:all 0.2s; }
.mkt-filter-btn.active { background:rgba(var(--accent-rgb),0.15); border-color:var(--accent); color:var(--accent); }
.mkt-filter-stack { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; padding:12px 14px; background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12)); border:1px solid var(--tint-3); border-radius:6px; }
.mkt-filter-hint { font-family:var(--font-body); font-size:12.5px; color:var(--textsoft); line-height:1.45; padding-bottom:4px; border-bottom:1px dashed var(--tint-4); }
.mkt-filter-hint b { color:var(--textbright); font-weight:600; }
.mkt-filter-line { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mkt-filter-tools { gap:14px; margin-top:2px; padding-top:10px; border-top:1px dashed var(--tint-4); }
.mkt-filter-lbl { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--textmid); letter-spacing:1.5px; min-width:80px; text-transform:uppercase; }
.mkt-chip { padding:7px 14px; font-family:var(--font-mono); font-size:var(--fs-md); cursor:pointer; border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,0.14); color:var(--textmid); background:var(--tint-1); transition:all 0.15s; display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.mkt-chip:hover { border-color:var(--accent); color:var(--textbright); background:rgba(var(--accent-rgb),0.08); transform:translateY(-1px); }
.mkt-chip.active { background:rgba(var(--accent-rgb),0.22); border-color:var(--accent); color:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),0.25); }
.mkt-sort-wrap { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:var(--fs-base); color:var(--textmid); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.mkt-sort-sel, .mkt-dur-sel { font-family:var(--font-mono); font-size:var(--fs-md); background:var(--shade-2); color:var(--textbright); border:1px solid rgba(255,255,255,0.18); border-radius:5px; padding:6px 10px; cursor:pointer; }
.mkt-sort-sel:hover, .mkt-dur-sel:hover { border-color:var(--accent); }
.mkt-search-inline { flex:1; min-width:180px; max-width:320px; font-size:14px !important; padding:7px 12px !important; }
.mkt-stats-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding:10px 14px; background:linear-gradient(90deg, rgba(0,190,255,0.08), var(--shade-1));  border-radius:var(--radius-sm); align-items:center;  box-shadow:inset 3px 0 0 0 var(--cyan); }
.mkt-stats-chip { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); padding:5px 12px; background:var(--tint-4); border:1px solid var(--tint-4); border-radius:var(--radius-sm); }
.mkt-stats-chip b { color:var(--gold); font-size:var(--fs-lg); }
.mkt-ratio-badge { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-base); padding:3px 8px; border-radius:var(--radius-sm); white-space:nowrap; cursor:help; font-weight:600; }
.mkt-ratio-good { background:rgba(46,204,113,0.15); color:var(--success); border:1px solid rgba(46,204,113,0.4); }
.mkt-ratio-fair { background:rgba(255,185,60,0.12); color:var(--gold); border:1px solid rgba(255,185,60,0.3); }
.mkt-ratio-bad { background:rgba(231,76,60,0.15); color:var(--danger); border:1px solid rgba(231,76,60,0.4); }
.mkt-ratio-complex, .mkt-ratio-unknown { color:var(--textsoft); border:1px solid var(--tint-7); background:var(--tint-2); }
.mkt-dur-row { display:flex; gap:10px; align-items:center; margin-top:8px; font-family:var(--font-mono); font-size:var(--fs-base); }
.mkt-prev-box { margin-top:10px; padding:10px 12px; background:var(--shade-1); border:1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:var(--fs-base); }
.mkt-prev-empty { color:var(--textsoft); font-style:italic; text-align:center; }
.mkt-prev-ratio { font-size:var(--fs-md); color:var(--textbright); margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed var(--tint-4); }
.mkt-prev-ratio b { color:var(--gold); }
.mkt-prev-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:3px 0; color:var(--textmid); }
.mkt-prev-lbl { color:var(--textsoft); font-size:var(--fs-sm); }
/* ── Mobile : form Create + preview ratio + history table ── */
@media (max-width: 600px) {
  .mkt-form-col { flex:1 1 100%; min-width:0; }
  .mkt-prev-ratio,
  .mkt-prev-tax { word-break:break-word; font-size:var(--fs-base); overflow-wrap:break-word; }
  .mkt-prev-box { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width: 768px) {
  .mkt-td[data-label-empty="1"] { display:none; }
}
/* ── Distinctions / Achievements ── */
.dist-layout { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.dist-header { padding:28px 28px 18px; border-bottom:1px solid var(--tint-4); flex-shrink:0; background:radial-gradient(ellipse at center top, rgba(212,146,10,0.12), transparent 70%), linear-gradient(180deg, rgba(10,16,32,0.5), transparent); position:relative; }
.dist-header::before { content:''; position:absolute; top:0; left:28px; right:28px; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow:0 0 12px rgba(212,146,10,0.45); }
.dist-title { font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:700; color:var(--gold); letter-spacing:5px; text-transform:uppercase; text-shadow:0 0 16px rgba(212,146,10,0.45), 0 0 32px rgba(212,146,10,0.22); text-align:center; }
.dist-subtitle { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--textmid); margin-top:10px; text-align:center; letter-spacing:1px; }
.dist-progress-bar { height:7px; background:var(--tint-4); border-radius:var(--radius-sm); margin:14px auto 0; overflow:hidden; max-width:520px; border:1px solid rgba(212,146,10,0.2); }
.dist-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:3px; transition:width 0.6s ease; box-shadow:0 0 10px rgba(212,146,10,0.5); }
.dist-body { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:22px; }
.dist-cat-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--gold2); letter-spacing:3px; text-transform:uppercase; padding:6px 0 10px; border-bottom:1px solid rgba(212,146,10,0.18); margin-bottom:4px; }
.dist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.dist-card { background:linear-gradient(180deg,rgba(8,14,28,0.75),rgba(6,10,22,0.75)); border:1px solid var(--tint-7); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:7px; transition:all 0.25s; position:relative; overflow:hidden; backdrop-filter:blur(8px); }
.dist-card:hover { transform:translateY(-2px); }
.dist-card.unlocked { background:linear-gradient(180deg,rgba(40,30,10,0.7),rgba(20,16,8,0.7)); border-color:rgba(212,146,10,0.38); }
.dist-card.unlocked:hover { background:linear-gradient(180deg,rgba(50,36,12,0.8),rgba(28,22,10,0.8)); border-color:rgba(212,146,10,0.65); box-shadow:0 6px 24px rgba(212,146,10,0.18); }
.dist-card.locked { opacity:0.5; filter:grayscale(0.55); }
.dist-card.is-new { animation:achUnlock 0.6s ease; }
.dist-card-icon { font-size:30px; line-height:1; margin-bottom:2px; }
.dist-card-name { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--textbright); letter-spacing:0.8px; }
.dist-card.unlocked .dist-card-name { color:var(--gold2); text-shadow:0 0 8px rgba(212,146,10,0.3); }
.dist-card-desc { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textmid); line-height:1.55; }
.dist-card-reward { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.dist-reward-chip { font-family:var(--font-mono); font-size:var(--fs-xs); padding:2px 6px; border-radius:var(--radius-md); background:var(--tint-3); color:var(--gold2); }
.dist-claim-btn { margin-top:4px; padding:5px 8px; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1px; cursor:pointer; border-radius:var(--radius-sm); border:1px solid rgba(212,146,10,0.4); background:rgba(212,146,10,0.12); color:var(--gold); transition:all 0.2s; text-align:center; }
.dist-claim-btn:hover { background:rgba(212,146,10,0.28); }
.dist-claim-btn.claimed { border-color:var(--tint-7); background:transparent; color:var(--textsoft); cursor:default; }
.dist-lock-icon { position:absolute; top:10px; right:10px; font-size:var(--fs-md); opacity:0.3; }
/* Sprint 16 — filters, tiers, soon, batch */
.dist-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center; }
.dist-pill { font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; padding:6px 14px; border-radius:14px; cursor:pointer; border:1px solid rgba(255,255,255,0.14); color:var(--textmid); background:var(--tint-2); letter-spacing:0.8px; transition:all .15s; display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; }
.dist-pill:hover { background:var(--tint-7); border-color:var(--tint-10); color:var(--textbright); }
.dist-pill.active { border-color:var(--gold); color:var(--gold); background:rgba(212,146,10,0.14); box-shadow:0 0 12px rgba(212,146,10,0.2); }
.dist-pill-cnt { font-size:var(--fs-sm); background:var(--tint-7); padding:1px 7px; border-radius:var(--radius-md); color:var(--textsoft); font-family:var(--font-mono); }
.dist-pill.active .dist-pill-cnt { background:rgba(212,146,10,0.3); color:var(--gold2); }
.dist-claimall-bar { display:flex; justify-content:space-between; align-items:center; padding:14px 28px; background:linear-gradient(90deg,rgba(212,146,10,0.14),rgba(212,146,10,0.06),rgba(212,146,10,0.14)); border-bottom:1px solid rgba(212,146,10,0.35); color:var(--gold2); font-family:var(--font-body); font-size:var(--fs-lg); font-weight:600; letter-spacing:0.5px; animation:distClaimPulse 2.5s ease-in-out infinite; }
@keyframes distClaimPulse { 0%,100% { box-shadow:inset 0 0 0 rgba(212,146,10,0); } 50% { box-shadow:inset 0 0 24px rgba(212,146,10,0.12); } }
.dist-claimall-btn { padding:9px 22px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border-radius:5px; border:1px solid var(--gold); background:linear-gradient(180deg,rgba(212,146,10,0.25),rgba(212,146,10,0.12)); color:var(--gold); transition:all .2s; }
.dist-claimall-btn:hover { background:linear-gradient(180deg,rgba(212,146,10,0.42),rgba(212,146,10,0.25)); box-shadow:0 0 18px rgba(212,146,10,0.55), inset 0 0 8px rgba(212,146,10,0.2); transform:translateY(-1px); }
.dist-tier-badge { position:absolute; top:10px; left:10px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--textsoft); letter-spacing:1px; opacity:.7; }
.dist-card.tier-rare   { border-color:rgba(100,180,255,0.3); }
.dist-card.tier-rare   .dist-tier-badge { color:#88c8ff; }
.dist-card.tier-rare.unlocked { border-color:rgba(100,180,255,0.5); background:rgba(100,180,255,0.06); }
.dist-card.tier-epic   { border-color:rgba(200,120,255,0.35); }
.dist-card.tier-epic   .dist-tier-badge { color:#cc88ff; }
.dist-card.tier-epic.unlocked { border-color:rgba(200,120,255,0.55); background:rgba(200,120,255,0.08); }
.dist-card.tier-legend { border-color:rgba(255,200,80,0.45); box-shadow:inset 0 0 20px rgba(255,200,80,0.05); }
.dist-card.tier-legend .dist-tier-badge { color:#ffd666; }
.dist-card.tier-legend.unlocked { border-color:rgba(255,200,80,0.65); background:rgba(255,200,80,0.1); box-shadow:0 0 18px rgba(255,200,80,0.12), inset 0 0 24px rgba(255,200,80,0.08); }
.dist-soon-block { background:linear-gradient(180deg,rgba(46,204,113,0.1),rgba(46,204,113,0.02)); border:1px solid rgba(46,204,113,0.3); border-radius:var(--radius-md); padding:16px 18px; box-shadow:inset 0 0 24px rgba(46,204,113,0.04); }
.dist-soon-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--success); letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; text-shadow:0 0 10px rgba(46,204,113,0.3); }
.dist-soon-card { animation:distSoonPulse 2.5s ease-in-out infinite; }
@keyframes distSoonPulse { 0%,100% { box-shadow:0 0 0 rgba(46,204,113,0); } 50% { box-shadow:0 0 14px rgba(46,204,113,0.25); } }
.dist-prog-pct { color:var(--success); font-weight:700; margin-left:6px; }
.dist-unlock-date { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); opacity:.75; letter-spacing:.5px; }
.dist-empty { text-align:center; padding:40px 20px; color:var(--textsoft); font-family:var(--font-body); font-size:var(--fs-md); }
/* ── PvP Attack panel ── */
.rnk-atk-btn { margin:4px 14px 0; padding:8px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; background:rgba(255,60,60,0.12); border:1px solid rgba(255,80,80,0.4); color:var(--danger); border-radius:var(--radius-sm); cursor:pointer; text-align:center; transition:all 0.2s; }
.rnk-atk-btn:hover { background:rgba(255,60,60,0.28); border-color:var(--danger); }
.atk-panel { padding:14px 16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; max-height:75vh; }
.atk-panel-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--danger); letter-spacing:2px; border-bottom:1px solid rgba(255,80,80,0.3); padding-bottom:8px; }
.atk-unit-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.07), rgba(var(--accent-rgb),0.02) 60%, rgba(255,255,255,0.015));
  border:1px solid rgba(var(--accent-rgb),0.18);
  
  transition:all 0.18s; flex-wrap:wrap;
  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.55), 0 1px 3px rgba(0,0,0,0.18), inset 0 0 16px rgba(var(--accent-rgb),0.03);
}
.atk-unit-row:hover {
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.13), rgba(var(--accent-rgb),0.04) 60%, var(--tint-1));
  border-color:rgba(var(--accent-rgb),0.35);
  border-left-color:var(--accent);
  transform:translateX(2px);
  box-shadow:0 2px 8px rgba(0,0,0,0.25), inset 0 0 20px rgba(var(--accent-rgb),0.06);
}
.atk-unit-left { display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; }
.atk-unit-icon {
  font-size:24px; flex-shrink:0;
  width:56px; height:56px; min-width:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  background:radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.18), rgba(0,0,0,0.35));
  border:1px solid rgba(var(--accent-rgb),0.25);
  overflow:hidden;
}
.atk-unit-icon img {
  width:54px; height:54px; object-fit:cover;
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),0.35));
}
.atk-unit-name {
  font-size:16px; color:var(--textbright);
  font-family:var(--font-display); font-weight:700;
  letter-spacing:0.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px;
  text-shadow:0 1px 2px var(--shade-2);
}
.atk-unit-avail {
  font-size:var(--fs-base); color:var(--textsoft);
  font-family:var(--font-mono); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.atk-unit-avail svg { vertical-align:middle; }
.atk-unit-controls { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.atk-unit-input {
  width:56px; background:rgba(10,20,50,0.9); border:1px solid rgba(var(--accent-rgb),0.4);
  border-radius:5px; color:var(--textbright); font-family:var(--font-mono);
  font-size:var(--fs-lg); font-weight:700; text-align:center; padding:7px 4px; flex-shrink:0;
}
.atk-unit-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25), 0 0 4px rgba(var(--accent-rgb),0.15); background:rgba(var(--accent-rgb),0.04); }
.atk-power {
  display:flex; justify-content:center; align-items:center;
  background:rgba(8,14,32,0.7); border:1px solid rgba(var(--accent-rgb),0.25);
  border-radius:6px; padding:10px 14px; font-family:var(--font-mono); font-size:var(--fs-md);
}
.atk-actions { display:flex; gap:8px; }
.atk-btn {
  flex:1; padding:10px 8px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:1.5px; cursor:pointer; border-radius:5px; border:1px solid;
  text-align:center; transition:all 0.2s;
}
.atk-btn-go { background:rgba(255,60,60,0.15); border-color:rgba(255,80,80,0.5); color:var(--danger); }
.atk-btn-go:hover { background:rgba(255,60,60,0.35); }
.atk-btn-cancel { background:var(--tint-2); border-color:var(--tint-9); color:var(--textsoft); }
.atk-btn-cancel:hover { background:rgba(255,255,255,0.10); }
.atk-result { padding:14px; display:flex; flex-direction:column; gap:10px; }
.atk-result-banner { text-align:center; padding:12px; border-radius:5px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:2px; }
.atk-result-banner.victory { background:rgba(46,204,136,0.10); border:1px solid rgba(46,204,136,0.35); color:var(--success); }
.atk-result-banner.defeat  { background:rgba(255,60,60,0.10); border:1px solid rgba(255,80,80,0.35); color:var(--danger); }
.atk-result-section { background:var(--tint-2); border-radius:var(--radius-sm); padding:8px 10px; }
.atk-result-lbl { font-family:var(--font-display); font-size:var(--fs-xs); color:var(--textsoft); letter-spacing:1px; margin-bottom:5px; }
.atk-result-val { font-family:var(--font-mono); font-size:var(--fs-md); color:#b8cce0; }
.atk-result-good { color:var(--success); } .atk-result-bad { color:var(--danger); }
/* ── Spy panel ── */
.rnk-spy-btn { margin:4px 14px 8px; padding:8px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; background:rgba(46,204,136,0.10); border:1px solid rgba(46,204,136,0.35); color:var(--success); border-radius:var(--radius-sm); cursor:pointer; text-align:center; transition:all 0.2s; }
.rnk-spy-btn:hover { background:rgba(46,204,136,0.22); }
.spy-panel { padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.spy-panel-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--success); letter-spacing:1.5px; border-bottom:1px solid rgba(46,204,136,0.2); padding-bottom:8px; }
.spy-unit-row { display:flex; align-items:center; justify-content:space-between; padding:12px; background:rgba(46,204,136,0.05); border:1px solid rgba(46,204,136,0.15); border-radius:6px; cursor:pointer; transition:all 0.2s; }
.spy-unit-row:hover,.spy-unit-row.sel { background:rgba(46,204,136,0.15); border-color:rgba(46,204,136,0.4); box-shadow:0 0 10px rgba(46,204,136,0.15); transform:translateX(2px); }
.spy-unit-name { font-family:var(--font-body); font-size:var(--fs-lg); font-weight:700; color:#b8ffd8; }
.spy-unit-stat { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); margin-top:2px; }
.spy-count-row { display:flex; align-items:center; gap:10px; }
.spy-count-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); flex:1; }
.spy-count-inp { width:50px; height:34px; background:var(--tint-3); border:1px solid var(--tint-9); border-radius:5px; color:#d0e8ff; font-family:var(--font-mono); font-size:var(--fs-lg); text-align:center; padding:4px; }
.spy-detect-bar { background:rgba(8,14,32,0.6); border:1px solid rgba(46,204,136,0.2); border-radius:6px; padding:10px 14px; font-family:var(--font-mono); font-size:var(--fs-md); }
/* Intel report — legacy */
.intel-report { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.intel-banner { text-align:center; padding:12px 14px; border-radius:var(--radius); font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:2.5px; }
.intel-banner.success { background:rgba(46,204,136,0.10); border:1px solid rgba(46,204,136,0.3); color:var(--success); }
.intel-banner.caught  { background:rgba(255,60,60,0.10);  border:1px solid rgba(255,80,80,0.3); color:var(--danger); }
.intel-section { background:var(--tint-2); border-radius:var(--radius-sm); padding:8px 10px; }
.intel-lbl { font-family:var(--font-display); font-size:var(--fs-xs); color:var(--textsoft); letter-spacing:1px; margin-bottom:4px; }
.intel-val { font-family:var(--font-mono); font-size:var(--fs-md); color:#b8cce0; line-height:1.7; }
.intel-troop-row { display:flex; justify-content:space-between; font-size:var(--fs-md); }
/* Intel report v2 — redesign */
.ir-v2 { gap:10px; }
.ir-banner-sub { font-size:var(--fs-md); font-weight:400; margin-top:6px; letter-spacing:1px; color:inherit; opacity:0.8; }
.ir-section { background:rgba(255,255,255,0.025); border:1px solid var(--tint-4); border-radius:var(--radius-md); padding:12px 14px; }
.ir-section-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--accent2); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--tint-3); }
/* Resources grid */
.ir-res-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ir-res-card { text-align:center; background:var(--tint-2); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:10px 6px 8px; }
.ir-res-card.ir-res-naq { border-color:rgba(46,204,136,0.15); }
.ir-res-card.ir-res-nqr { border-color:rgba(160,80,255,0.15); }
.ir-res-ico { font-size:16px; margin-bottom:4px; }
.ir-res-ico svg { width:18px; height:18px; }
.ir-res-val { font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:700; color:var(--textbright); line-height:1.2; }
.ir-res-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
/* Power badges */
.ir-power-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.ir-pow-card { text-align:center; border-radius:var(--radius); padding:10px 6px 8px; }
.ir-pow-atk { background:rgba(224,80,80,0.08); border:1px solid rgba(224,80,80,0.25); }
.ir-pow-def { background:rgba(46,204,136,0.08); border:1px solid rgba(46,204,136,0.25); }
.ir-pow-ico { font-size:16px; margin-bottom:2px; }
.ir-pow-val { font-family:var(--font-mono); font-size:16px; font-weight:700; line-height:1.2; }
.ir-pow-atk .ir-pow-val { color:var(--danger); }
.ir-pow-def .ir-pow-val { color:var(--success); }
.ir-pow-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.ir-pow-bar { display:flex; height:4px; border-radius:2px; overflow:hidden; }
.ir-pow-bar-atk { background:linear-gradient(90deg,var(--danger),rgba(224,80,80,0.4)); transition:width .4s; }
.ir-pow-bar-def { background:linear-gradient(90deg,rgba(46,204,136,0.4),var(--success)); transition:width .4s; }
/* Troop categories */
.ir-cat { margin-bottom:6px; }
.ir-cat-hdr { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; padding:6px 8px; border-radius:6px; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.ir-cat-total { margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); }
.ir-cat-def  .ir-cat-hdr { background:rgba(46,204,136,0.08); color:var(--success); border:1px solid rgba(46,204,136,0.15); }
.ir-cat-off  .ir-cat-hdr { background:rgba(224,80,80,0.08); color:var(--danger); border:1px solid rgba(224,80,80,0.15); }
.ir-cat-spy  .ir-cat-hdr { background:rgba(46,204,136,0.06); color:#7dd8a8; border:1px solid rgba(46,204,136,0.12); }
.ir-cat-asc  .ir-cat-hdr { background:rgba(255,200,60,0.06); color:var(--gold); border:1px solid rgba(255,200,60,0.15); }
.ir-cat-ship .ir-cat-hdr { background:rgba(80,160,255,0.06); color:var(--accent); border:1px solid rgba(80,160,255,0.15); }
.ir-cat-civil .ir-cat-hdr { background:var(--tint-2); color:var(--textmid); border:1px solid var(--tint-4); }
.ir-troop-row { display:flex; justify-content:space-between; align-items:center; padding:3px 10px; font-family:var(--font-mono); font-size:var(--fs-md); border-bottom:1px solid var(--tint-2); }
.ir-troop-row:last-child { border-bottom:none; }
.ir-troop-name { color:var(--textmid); }
.ir-troop-count { color:var(--gold); font-weight:700; min-width:40px; text-align:right; }
.ir-caught-msg { text-align:center; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--danger); padding:20px 0; }
/* ── Galaxy system overview ── */
.intel-res-bar-wrap { margin:3px 0; }
.intel-res-bar-label { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); margin-bottom:2px; }
.intel-res-bar-track { background:var(--tint-3); border-radius:2px; height:5px; overflow:hidden; }
.intel-res-bar-fill { height:100%; border-radius:2px; transition:width 0.4s ease; }
.intel-power-badges { display:flex; gap:6px; margin-top:4px; }
.intel-power-badge { flex:1; text-align:center; padding:5px; border-radius:var(--radius-sm); font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; }
.intel-power-badge.atk { background:rgba(255,60,60,0.12); border:1px solid rgba(255,80,80,0.35); color:var(--danger); }
.intel-power-badge.def-weak { background:rgba(46,204,136,0.12); border:1px solid rgba(46,204,136,0.4); color:var(--success); }
.intel-power-badge.def-strong { background:rgba(255,60,60,0.08); border:1px solid rgba(255,80,80,0.3); color:var(--danger); }
/* ── Attack panel intel band ── */
.atk-intel-band { padding:6px 10px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:var(--fs-md); display:flex; align-items:center; gap:6px; }
.atk-intel-band.favorable { background:rgba(46,204,136,0.10); border:1px solid rgba(46,204,136,0.35); color:var(--success); }
.atk-intel-band.unfavorable { background:rgba(255,60,60,0.08); border:1px solid rgba(255,80,80,0.3); color:var(--danger); }
/* ── Attack mode choice buttons ── */
.atk-mode-choice { display:flex; flex-direction:column; gap:12px; padding:16px 0; }
.atk-mode-btn { border:1px solid var(--tint-9); border-radius:var(--radius); padding:18px 20px; cursor:pointer; transition:all .2s; background:var(--tint-2); text-align:left; }
.atk-mode-btn:hover { background:var(--tint-4); border-color:var(--accent); }
.atk-mode-btn .atk-mode-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; }
.atk-mode-btn .atk-mode-desc { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin-top:4px; }
.atk-mode-btn.gate .atk-mode-title { color:var(--accent); }
.atk-mode-btn.fleet .atk-mode-title { color:var(--gold); }
.atk-mode-btn.gate:hover { border-color:var(--accent); box-shadow:0 0 12px rgba(0,150,255,0.15); }
.atk-mode-btn.fleet:hover { border-color:var(--gold); box-shadow:0 0 12px rgba(255,200,0,0.15); }
.atk-mode-rp { font-family:var(--font-body); font-size:var(--fs-md); font-style:italic; color:var(--textsoft); text-align:center; padding:8px 0 4px; }
/* ── Attack colony selectors ── */
.atk-section-lbl { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textmid); letter-spacing:1.5px; text-transform:uppercase; }
.atk-target-section { padding:8px 0 4px; }
.atk-target-list { display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:6px 8px; border:1px solid var(--tint-7); border-radius:6px; background:var(--tint-1); }
.atk-target-opt { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); transition:all .15s; }
.atk-target-opt:hover { background:rgba(var(--accent-rgb),0.08); color:var(--textbright); }
.atk-target-opt.atk-target-active { background:rgba(var(--accent-rgb),0.12); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.3); }
.atk-target-opt input[type="radio"] { accent-color:var(--accent); margin:0; }
.atk-source-section { display:flex; align-items:center; gap:10px; padding:8px 0; }
.atk-source-select { flex:1; padding:6px 10px; font-family:var(--font-mono); font-size:var(--fs-md); background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.25); border-radius:6px; color:var(--textbright); outline:none; }
.atk-source-select:focus { border-color:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
/* ── Battle report (improved) ── */
.br-report { gap:8px !important; }
.br-rp-quote { font-family:var(--font-body); font-size:var(--fs-md); font-style:italic; color:var(--textsoft); text-align:center; padding:4px 8px 2px; line-height:1.4; }
.br-banner { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:6px; }
.br-banner.victory { background:linear-gradient(135deg,rgba(46,204,136,0.12),rgba(46,204,136,0.04)); border:1px solid rgba(46,204,136,0.35); }
.br-banner.defeat { background:linear-gradient(135deg,rgba(255,60,60,0.12),rgba(255,60,60,0.04)); border:1px solid rgba(255,80,80,0.35); }
.br-banner-icon { font-size:28px; flex-shrink:0; }
.br-banner-text { flex:1; min-width:0; }
.br-banner-result { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:2px; }
.br-banner.victory .br-banner-result { color:var(--success); }
.br-banner.defeat .br-banner-result { color:var(--danger); }
.br-banner-sub { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin-top:2px; }
.br-banner-faction { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); text-align:right; flex-shrink:0; }
.br-power-section { background:var(--tint-2); border-radius:6px; padding:10px 14px; }
.br-power-header { font-family:var(--font-display); font-size:var(--fs-md); color:var(--textsoft); letter-spacing:2px; margin-bottom:8px; text-align:center; }
.br-power-numbers { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:700; }
.br-pwr-atk { color:var(--danger); }
.br-pwr-vs { color:var(--textsoft); font-size:var(--fs-md); letter-spacing:2px; }
.br-pwr-def { color:var(--success); }
.br-power-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; margin:8px 0 4px; }
.br-bar-atk { background:linear-gradient(90deg,var(--danger),rgba(255,80,80,0.5)); transition:width .4s; }
.br-bar-def { background:linear-gradient(90deg,rgba(46,204,136,0.5),var(--success)); transition:width .4s; }
.br-power-pct { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-md); }
.br-iris-section { display:flex; align-items:center; gap:10px; background:rgba(0,150,255,0.06); border:1px solid rgba(0,150,255,0.2); border-radius:6px; padding:10px 14px; }
.br-iris-icon { font-size:var(--fs-2xl); flex-shrink:0; }
.br-iris-name { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--accent); letter-spacing:1px; }
.br-iris-status { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin-top:2px; }
.br-loot-section { background:rgba(46,204,136,0.06); border:1px solid rgba(46,204,136,0.2); border-radius:6px; padding:10px 14px; }
.br-section-lbl { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; margin-bottom:6px; }
.br-loot-grid { display:flex; gap:16px; flex-wrap:wrap; }
.br-loot-item { display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--success); font-weight:700; }
.br-losses-section { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.br-losses-col { background:var(--tint-2); border-radius:6px; padding:10px 12px; }
.br-losses-list { display:flex; flex-direction:column; gap:3px; }
.br-loss-row { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textbright); }
.br-loss-icon { font-size:var(--fs-md); width:18px; text-align:center; flex-shrink:0; }
.br-loss-qty { color:var(--danger); font-weight:700; min-width:28px; }
.br-loss-name { color:var(--textsoft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.br-no-loss { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--success); font-style:italic; }
/* Battle report defeat variant */
.battle-report.defeat { border-left-color:var(--danger); }
.battle-report.pvp    { border-left-color:var(--warn); }
.br-result.defeat { color:var(--danger); } .br-result.pvp { color:var(--warn); }
/* Attack reports zone */
.fleet-reports-header { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textsoft); letter-spacing:2px; padding:10px 4px 6px; border-top:1px solid var(--tint-3); margin-top:8px; }
/* Commanders section */
/* — Reassignment Pack banner (premium CTA) — */
.cmd-reassign-banner {
  position:relative; flex-shrink:0; margin:14px 18px 12px;
  padding:22px 24px 20px 100px;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255,180,80,0.22) 0%, transparent 50%),
    linear-gradient(135deg, #2a1408 0%, #321806 35%, #1e0e04 75%, #0c0602 100%);
  border:1px solid rgba(255,200,120,0.55);
  box-shadow:
    0 0 0 1px rgba(255,200,120,0.10) inset,
    0 8px 24px -10px var(--shade-5),
    0 0 30px rgba(255,140,80,0.18);
  animation: cmdReassignPulse 5s ease-in-out infinite;
}
.cmd-reassign-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,220,140,0.45) 0%, transparent 25%, transparent 75%, rgba(255,200,120,0.30) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; border-radius:14px;
}
.cmd-reassign-aurora {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, rgba(255,140,80,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(255,220,140,0.18) 0%, transparent 55%);
  opacity:0.9;
}
.cmd-reassign-headline {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:6px;
}
.cmd-reassign-badge {
  display:inline-block; flex-shrink:0;
  padding:3px 10px; border-radius:var(--radius-lg);
  background:rgba(255,200,120,0.16); border:1px solid rgba(255,200,120,0.55);
  color:#fff2cd; font-family:var(--font-display,'Orbitron',monospace);
  font-size:10px; font-weight:700; letter-spacing:3px;
  text-shadow:0 0 6px rgba(255,200,120,0.5);
}
.cmd-reassign-row {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.cmd-reassign-medal {
  position:absolute; left:-78px; top:50%; transform:translateY(-50%);
  width:80px; height:80px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cmd-reassign-medal-halo {
  position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,120,0.55) 0%, rgba(255,140,80,0.20) 40%, transparent 70%);
  animation: cmdReassignHalo 3.5s ease-in-out infinite;
}
.cmd-reassign-medal-icon {
  position:relative; font-size:54px; line-height:1;
  filter:drop-shadow(0 0 18px rgba(255,200,80,0.85)) drop-shadow(0 0 32px rgba(255,140,80,0.45));
  animation: cmdReassignFloat 4s ease-in-out infinite;
}
.cmd-reassign-info { flex:1; min-width:220px; }
.cmd-reassign-title {
  font-family:var(--font-display,'Orbitron',monospace);
  font-size:18px; font-weight:900; letter-spacing:3px;
  background:linear-gradient(135deg, #fff7e0 0%, #ffd770 50%, #ffb080 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,200,120,0.3));
}
.cmd-reassign-desc {
  font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:13.5px; color:#e8dcc0; line-height:1.55; letter-spacing:0.2px;
}
.cmd-reassign-state {
  margin-top:8px; padding:4px 10px; display:inline-block;
  border-radius:6px; font-family:var(--font-mono,'Share Tech Mono',monospace);
  font-size:12.5px; letter-spacing:1px;
}
.cmd-reassign-state-ready { color:#a5f0a0; background:rgba(80,250,123,0.10); border:1px solid rgba(80,250,123,0.40); }
.cmd-reassign-state-cool  { color:#ffd770; background:rgba(255,200,80,0.10); border:1px solid rgba(255,200,80,0.40); }
.cmd-reassign-cta-wrap { flex-shrink:0; }
.cmd-reassign-cta {
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:var(--radius-md); min-height:48px;
  background:linear-gradient(135deg, #ff9550 0%, #d85a20 60%, #a83a10 100%);
  border:1px solid rgba(255,220,140,0.75); text-decoration:none;
  color:#fff8e8; font-family:var(--font-display,'Orbitron',monospace);
  font-size:var(--fs-base); font-weight:800; letter-spacing:2px; text-transform:uppercase;
  text-shadow:0 1px 2px var(--shade-4), 0 0 12px rgba(255,220,140,0.5);
  box-shadow:
    0 4px 18px rgba(255,140,80,0.45),
    0 0 0 1px rgba(255,220,140,0.30) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset;
  overflow:hidden; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cmd-reassign-cta:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 28px rgba(255,140,80,0.65),
    0 0 0 1px rgba(255,220,140,0.50) inset,
    0 0 36px rgba(255,180,80,0.50);
  filter:brightness(1.08);
}
.cmd-reassign-cta-glow {
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: cmdReassignShimmer 2.8s ease-in-out infinite;
  pointer-events:none;
}
.cmd-reassign-cta-text { position:relative; z-index:1; }
.cmd-reassign-cta-price {
  position:relative; z-index:1;
  padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.30);
  font-size:var(--fs-md); font-weight:900; letter-spacing:1px;
  text-shadow:0 0 8px rgba(255,255,255,0.4);
}
@keyframes cmdReassignPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,200,120,0.10) inset, 0 8px 24px -10px var(--shade-5), 0 0 30px rgba(255,140,80,0.18); }
  50%     { box-shadow: 0 0 0 1px rgba(255,200,120,0.18) inset, 0 8px 24px -10px var(--shade-5), 0 0 55px rgba(255,140,80,0.35); }
}
@keyframes cmdReassignHalo {
  0%,100% { transform:scale(1); opacity:0.7; }
  50%     { transform:scale(1.12); opacity:1; }
}
@keyframes cmdReassignFloat {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%     { transform:translateY(-4px) rotate(2deg); }
}
@keyframes cmdReassignShimmer {
  0%   { left:-100%; }
  60%  { left:200%; }
  100% { left:200%; }
}
@media (max-width:720px) {
  .cmd-reassign-banner { margin:10px 12px; padding:14px 14px 14px 80px; }
  .cmd-reassign-medal { left:-58px; width:64px; height:64px; }
  .cmd-reassign-medal-icon { font-size:44px; }
  .cmd-reassign-title { font-size:var(--fs-lg); letter-spacing:2px; }
  .cmd-reassign-desc { font-size:12.5px; }
  .cmd-reassign-cta { padding:11px 14px; font-size:var(--fs-xs); letter-spacing:1.5px; }
  .cmd-reassign-cta-price { font-size:var(--fs-sm); padding:3px 8px; }
  .cmd-reassign-badge { font-size:9px; letter-spacing:2px; padding:3px 9px; }
}
@media (max-width:480px) {
  .cmd-reassign-banner { padding:14px 14px 16px 14px; padding-top:78px; }
  .cmd-reassign-headline { justify-content:center; }
  .cmd-reassign-medal { left:50%; top:14px; transform:translateX(-50%); }
  .cmd-reassign-row { justify-content:center; text-align:center; }
  .cmd-reassign-info { min-width:0; text-align:center; }
  .cmd-reassign-state { display:block; }
  .cmd-reassign-cta-wrap { width:100%; }
  .cmd-reassign-cta { width:100%; justify-content:center; }
}
/* ─── « Envoyer à un proche » : alerte obligatoire pour le pack 5€ ─── */
.cmd-proches-warn {
  display:flex; align-items:center; gap:14px;
  margin:14px 0 4px; padding:16px 18px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(255,184,74,0.22),rgba(255,107,60,0.14));
  border:2px solid #ffb84a;
  box-shadow:0 0 26px rgba(255,184,74,0.32), inset 0 0 14px rgba(255,184,74,0.08);
  animation:cmdProchesPulse 2.4s ease-in-out infinite;
  position:relative;
}
@keyframes cmdProchesPulse {
  0%,100% { box-shadow:0 0 18px rgba(255,184,74,0.24), inset 0 0 12px rgba(255,184,74,0.06); }
  50%     { box-shadow:0 0 34px rgba(255,184,74,0.55), inset 0 0 16px rgba(255,184,74,0.12); }
}
.cmd-proches-warn-ico {
  font-size:36px; line-height:1; color:#ffb84a; flex-shrink:0;
  text-shadow:0 0 14px rgba(255,184,74,0.8);
  animation:cmdProchesIcoShake 3s ease-in-out infinite;
}
@keyframes cmdProchesIcoShake {
  0%,100% { transform:rotate(0deg); }
  20%     { transform:rotate(-8deg); }
  40%     { transform:rotate(8deg); }
  60%     { transform:rotate(-4deg); }
  80%     { transform:rotate(4deg); }
}
.cmd-proches-warn-body { flex:1; min-width:0; }
.cmd-proches-warn-title {
  font-family:Orbitron,monospace; font-size:var(--fs-md); font-weight:900;
  letter-spacing:2px; color:#ffd5a0; text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,184,74,0.55);
  margin-bottom:4px;
}
.cmd-proches-warn-txt {
  font-family:'Share Tech Mono',monospace; font-size:var(--fs-base);
  color:#ffe4c0; line-height:1.5;
}
.cmd-proches-warn-txt b { color:#ffb84a; text-shadow:0 0 6px rgba(255,184,74,0.5); }
@media (max-width:520px) {
  .cmd-proches-warn { padding:12px 14px; gap:10px; }
  .cmd-proches-warn-ico { font-size:28px; }
  .cmd-proches-warn-title { font-size:var(--fs-sm); letter-spacing:1.5px; }
  .cmd-proches-warn-txt { font-size:11.5px; line-height:1.45; }
}
.cmd-tokens-bar  { display:flex; align-items:center; gap:12px; padding:16px 22px 12px; border-bottom:1px solid var(--tint-7); background:linear-gradient(180deg,rgba(4,8,15,0.6),rgba(4,8,15,0.2)); font-family:var(--font-mono); font-size:var(--fs-base); letter-spacing:1px; }
.cmd-section-hdr { padding:18px 22px 8px; font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; letter-spacing:3px; text-transform:uppercase; text-shadow:0 0 10px rgba(var(--accent-rgb),0.2); }
.cmd-grid        { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:12px 18px; }
.cmd-card        { background:linear-gradient(180deg,rgba(12,20,36,0.92),rgba(8,14,24,0.92)); border:1px solid var(--tint-5); border-radius:var(--radius-lg); display:flex; flex-direction:column; cursor:pointer; transition:all 0.25s ease; position:relative; overflow:hidden; aspect-ratio:2/3; backdrop-filter:blur(6px); }
.cmd-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, var(--tint-2), transparent); transition:left 0.5s; pointer-events:none; z-index:3; }
.cmd-card:hover::before { left:100%; }
.cmd-card.has-img { background-size:cover; background-position:center top; padding:0; justify-content:flex-end; }
.cmd-card:not(.has-img) { padding:16px 12px; gap:8px; justify-content:center; }
.cmd-card:hover  { border-color:rgba(var(--accent-rgb),0.6); box-shadow:0 6px 24px var(--shade-3), 0 0 14px rgba(var(--accent-rgb),0.15); transform:translateY(-3px); }
.cmd-card.villain:hover { border-color:rgba(220,60,60,0.6); box-shadow:0 0 12px rgba(220,60,60,0.15); }
.cmd-card.owned  { border-color:rgba(var(--accent-rgb),0.6); }
.cmd-card.villain.owned { border-color:rgba(220,60,60,0.6); }
/* CM3 audit UI/UX 27/05 — chip Lv. top-right pour heros owned */
.cmd-level-chip {
  position:absolute; top:8px; right:8px; z-index:4;
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
  color:var(--textbright); letter-spacing:0.5px;
  padding:3px 8px; border-radius:var(--radius-md);
  background:rgba(0,0,0,0.72);
  border:1px solid rgba(var(--accent-rgb),0.45);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 6px var(--shade-3);
  pointer-events:none;
}
.cmd-info        { background:linear-gradient(transparent, var(--shade-7) 30%, var(--shade-8)); padding:28px 10px 10px; display:flex; flex-direction:column; gap:4px; }
.cmd-avatar      { font-size:36px; text-align:center; line-height:1.1; }
.cmd-name        { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:#eef6ff; text-align:center; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.cmd-faction     { font-size:var(--fs-md); font-weight:700; text-align:center; padding:2px 8px; border-radius:var(--radius-md); margin:0 auto; letter-spacing:1px; }
.cmd-faction.hero    { background:rgba(var(--accent-rgb),0.2); color:var(--accent2); border:1px solid rgba(var(--accent-rgb),0.35); }
.cmd-faction.villain { background:rgba(220,60,60,0.2); color:#ff9999; border:1px solid rgba(220,60,60,0.35); }
.cmd-effect      { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700; color:var(--success); text-align:center; text-shadow:0 0 6px rgba(80,250,123,0.4); }
.cmd-xp-bar      { height:5px; background:var(--tint-7); border-radius:3px; overflow:hidden; }
.cmd-xp-fill     { height:100%; background:linear-gradient(90deg,var(--accent),var(--success)); border-radius:3px; }
.cmd-xp-lbl      { font-size:var(--fs-md); color:var(--textmid); text-align:center; font-family:var(--font-mono); }
.cmd-btn         { font-family:var(--font-body); font-size:var(--fs-base); font-weight:700; padding:9px 8px; border-radius:7px; cursor:pointer; border:1px solid rgba(var(--accent-rgb),0.5); color:var(--accent2); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.15),rgba(var(--accent-rgb),0.05)); text-align:center; margin-top:auto; transition:all 0.18s; letter-spacing:1px; text-transform:uppercase; }
.cmd-btn:hover:not(:disabled) { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.28),rgba(var(--accent-rgb),0.12)); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25); transform:translateY(-1px); }
.cmd-btn:disabled { opacity:0.4; cursor:not-allowed; border-color:var(--tint-5); color:var(--textsoft); background:none; }
.cmd-detail-overlay { position:fixed; inset:0; z-index:var(--z-overlay-event); background:rgba(0,0,0,0.78); display:flex; align-items:center; justify-content:center; }
.cmd-detail-box { background:#070f1c; border:1px solid rgba(var(--accent-rgb),0.45); border-radius:var(--radius-xl); padding:30px; max-width:460px; width:92%; position:relative; max-height:90vh; overflow-y:auto; }
.cmd-detail-lvl-row { display:flex; justify-content:space-between; gap:4px; margin:8px 0 2px; }
.cmd-stars { color:var(--gold); font-size:var(--fs-md); margin-right:4px; text-shadow:0 0 6px rgba(240,192,64,0.5); }
.cmd-detail-stars { text-align:center; font-size:var(--fs-2xl); color:var(--gold); letter-spacing:4px; margin:6px 0 10px; text-shadow:0 0 10px rgba(240,192,64,0.5); }
.cmd-tab-bar { display:flex; gap:8px; padding:14px 22px 8px; background:linear-gradient(180deg,rgba(4,8,15,0.8),transparent); }
.cmd-tab { flex:1; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; padding:11px 8px; border-radius:var(--radius); cursor:pointer; border:1px solid var(--tint-4); color:var(--textsoft); background:var(--tint-1); text-align:center; transition:all 0.2s; }
.cmd-tab:hover { border-color:rgba(var(--accent-rgb),0.35); color:var(--textmid); transform:translateY(-1px); }
.cmd-tab.active { border-color:rgba(var(--accent-rgb),0.55); color:var(--accent2); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.18),rgba(var(--accent-rgb),0.06)); box-shadow:0 0 14px rgba(var(--accent-rgb),0.22), inset 0 0 6px rgba(var(--accent-rgb),0.08); }
.cmd-btn-ascend { border-color:var(--gold)!important; color:var(--gold)!important; background:rgba(240,192,64,0.1)!important; animation:pulse 2s infinite; }
.cmd-ability-badge { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-sm); color:#b9d9f0; background:rgba(120,180,255,0.1); border:1px solid rgba(120,180,255,0.25); border-radius:5px; padding:3px 8px; margin:4px 0; letter-spacing:0.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; cursor:help; }
.cmd-ascension-block { background:rgba(240,192,64,0.06); border:1px solid rgba(240,192,64,0.2); border-radius:var(--radius); padding:14px; margin:10px 0; }
.cmd-overflow-indicator { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold); text-align:center; padding:8px 18px; background:rgba(240,192,64,0.06); border-bottom:1px solid rgba(240,192,64,0.15); }
.cmd-shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:12px 18px; }
.cmd-shop-card { background:linear-gradient(180deg,rgba(12,20,36,0.9),rgba(8,14,24,0.9)); border:1px solid var(--tint-7); border-radius:var(--radius-md); padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all 0.22s; backdrop-filter:blur(6px); }
.cmd-shop-card:hover { border-color:rgba(var(--accent-rgb),0.45); transform:translateY(-2px); box-shadow:0 6px 18px var(--shade-1), 0 0 14px rgba(var(--accent-rgb),0.12); }
.cmd-shop-icon { font-size:28px; }
.cmd-shop-name { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700; color:#eef6ff; text-align:center; }
.cmd-shop-desc { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); text-align:center; line-height:1.4; min-height:32px; }
.cmd-shop-cost { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold); }
.cmd-shop-preview { display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--font-mono); padding:6px 10px; background:rgba(80,250,123,0.08); border:1px solid rgba(80,250,123,0.25); border-radius:6px; width:100%; box-sizing:border-box; }
.cmd-shop-preview-lbl { font-size:10px; letter-spacing:1.5px; color:var(--success); text-transform:uppercase; }
.cmd-shop-preview-val { font-size:var(--fs-base); color:#eef6ff; text-align:center; }
.cmd-shop-select { width:100%; margin-bottom:6px; background:#0a1220; color:var(--textbright); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:var(--radius-sm); padding:5px 6px; font-family:var(--font-mono); font-size:var(--fs-base); }
.cmd-shop-active { padding:12px 18px; }
.cmd-shop-boost-badge { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--success); background:rgba(80,250,123,0.1); border:1px solid rgba(80,250,123,0.25); border-radius:var(--radius-sm); padding:3px 8px; margin:2px 4px; }
@media (max-width:900px) { .cmd-shop-grid { grid-template-columns:1fr; } }
/* Sprint M7-A — Commandants shop : 2 col tablette portrait 540-899 (override règle 900px) */
@media (min-width: 540px) and (max-width: 899px) {
  .cmd-shop-grid { grid-template-columns:repeat(2,1fr); }
}
.rnk-loading { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); text-align:center; padding:40px; }

/* Alliance section (legacy placeholder styles kept for compat) */
.alliance-layout { display:flex; align-items:center; justify-content:center; flex:1; padding:40px; }
.alliance-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 40px; max-width:460px; width:100%; text-align:center; }
.alc-icon { font-size:40px; margin-bottom:12px; }
.alc-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); letter-spacing:2px; margin-bottom:6px; }
.alc-sub { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); letter-spacing:1px; margin-bottom:12px; }
.alc-desc { font-size:var(--fs-md); color:var(--textmid); line-height:1.7; margin-bottom:20px; }
.alc-btns { display:flex; gap:10px; justify-content:center; }
.alc-btn { padding:10px 24px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px; border-radius:6px; cursor:pointer; transition:all 0.2s; border:1px solid; }
.alc-btn.create { border-color:var(--gold); color:var(--gold); background:rgba(224,168,48,0.08); }
.alc-btn.create:hover { background:rgba(224,168,48,0.16); }
.alc-btn.join { border-color:var(--accent); color:var(--accent2); background:rgba(var(--accent2-rgb),0.08); }
.alc-btn.join:hover { background:rgba(var(--accent2-rgb),0.16); }

/* ══ QUESTS ══ */
.quest-tabs { display:flex; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(4,8,15,0.9),rgba(4,8,15,0.55)); flex-shrink:0; padding:0 8px; }
.quest-tab { padding:14px 24px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--textsoft); border:none; border-bottom:3px solid transparent; cursor:pointer; background:none; transition:all 0.2s; }
.quest-tab.active { color:var(--gold); border-bottom-color:var(--gold); text-shadow:0 0 10px rgba(224,168,48,0.4); background:linear-gradient(180deg,transparent,rgba(224,168,48,0.06)); }
.quest-tab:hover { color:var(--textbright); }
/* Audit UI/UX #3 PR1 — tints distincts par type de quête (Daily/Weekly/Alliance) */
.quest-tab-daily.active     { color:#7dd3fc; border-bottom-color:#38bdf8; text-shadow:0 0 10px rgba(56,189,248,0.35); background:linear-gradient(180deg,transparent,rgba(56,189,248,0.06)); }
.quest-tab-weekly.active    { color:var(--gold); border-bottom-color:var(--gold); }
.quest-tab-alliance.active  { color:#c4b5fd; border-bottom-color:#a78bfa; text-shadow:0 0 10px rgba(167,139,250,0.35); background:linear-gradient(180deg,transparent,rgba(167,139,250,0.06)); }
.quest-grid { display:flex; flex-direction:column; gap:14px; padding:20px; }
/* Sprint M7-A — Quêtes multi-col tablette/desktop (M11 fix : 768 inclus pour iPad mini) */
@media (min-width: 768px) {
  .quest-grid { display:grid !important; grid-template-columns:repeat(2,1fr); gap:14px; flex-direction:initial; }
  .quest-claimall-bar { grid-column:1 / -1; }
}
@media (min-width: 1280px) {
  .quest-grid { grid-template-columns:repeat(3,1fr); }
}
.quest-card { background:linear-gradient(180deg,rgba(8,14,28,0.8),rgba(6,10,22,0.8)); border:1px solid var(--tint-7); border-radius:var(--radius-lg); padding:16px 20px; display:flex; align-items:center; gap:16px; transition:all 0.2s; backdrop-filter:blur(6px); }
.quest-card:hover { border-color:rgba(255,255,255,0.22); transform:translateY(-1px); box-shadow:0 6px 20px var(--shade-1); }
.quest-card.completed { border-color:rgba(0,220,120,0.35); background:linear-gradient(180deg,rgba(0,220,120,0.08),rgba(0,220,120,0.02)); box-shadow:inset 0 0 16px rgba(0,220,120,0.05); }
.quest-ico { font-size:28px; flex-shrink:0; line-height:1; }
.quest-info { flex:1; min-width:0; }
.quest-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; letter-spacing:1.5px; color:var(--textbright); }
.quest-desc { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textmid); margin-top:4px; line-height:1.5; }
.quest-prog-bar { height:6px; background:var(--tint-7); border-radius:3px; overflow:hidden; flex:1; }
.quest-prog-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width 0.4s; box-shadow:0 0 8px rgba(var(--accent-rgb),0.4); }
/* Q2 audit UI/UX 27/05 — compteur X/Y a cote de la barre pour clarte */
.quest-prog-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.quest-prog-count { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; color:var(--textmid); letter-spacing:0.5px; min-width:max-content; }
.quest-rewards { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--gold2); margin-top:6px; letter-spacing:0.5px; }
.quest-claim-btn { padding:10px 18px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:6px; cursor:pointer; border:1px solid var(--gold); color:var(--gold); background:linear-gradient(180deg,rgba(224,168,48,0.18),rgba(224,168,48,0.06)); white-space:nowrap; flex-shrink:0; transition:all 0.2s; }
.quest-claim-btn:disabled { opacity:0.4; cursor:default; }
.quest-claim-btn.ready { background:rgba(224,168,48,0.18); animation:pulseGold 1.5s 1; }
.quest-claim-btn.claimed { border-color:var(--success); color:var(--success); background:rgba(0,220,120,0.08); cursor:default; }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 6px rgba(224,168,48,0.3)} 50%{box-shadow:0 0 14px rgba(224,168,48,0.7)} }

/* ══ QUESTS v2 — header, countdown, pills, claim-all, tags ══ */
.quest-header { display:flex; flex-direction:column; gap:14px; padding:22px 24px 16px; border-bottom:1px solid var(--tint-4); background:radial-gradient(ellipse at center top, rgba(224,168,48,0.1), transparent 70%), linear-gradient(180deg, rgba(10,16,32,0.5), transparent); position:relative; }
.quest-header::before { content:''; position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow:0 0 12px rgba(224,168,48,0.45); }
.quest-header-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.quest-header-title { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gold); text-shadow:0 0 14px rgba(224,168,48,0.4), 0 0 28px rgba(224,168,48,0.2); }
.quest-header-sub { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:400; color:var(--textmid); margin-left:14px; letter-spacing:0.5px; }
.quest-reset { display:flex; flex-direction:column; gap:4px; align-items:center; padding:8px 18px; border-radius:var(--radius-md); background:linear-gradient(180deg,rgba(224,168,48,0.10),rgba(224,168,48,0.04)); border:1px solid rgba(224,168,48,0.35); box-shadow:0 0 14px rgba(224,168,48,0.10), inset 0 0 8px rgba(224,168,48,0.05); }
.quest-reset-lbl { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:2px; color:var(--textsoft); text-transform:uppercase; }
.quest-reset-val { font-family:var(--font-display); font-size:24px; font-weight:900; color:var(--gold); letter-spacing:1px; text-shadow:0 0 12px rgba(224,168,48,0.45); }
.quest-cat-grouped { display:flex; flex-direction:column; gap:18px; padding:8px 24px 24px; }
.quest-cat-group-title { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2.5px; color:var(--accent2); text-transform:uppercase; padding:8px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.20); margin-bottom:6px; }
.quest-cat-group-count { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); margin-left:auto; font-weight:400; letter-spacing:0; }
.quest-pill-row { display:flex; flex-wrap:wrap; gap:8px; }
.quest-pill { padding:7px 16px; border-radius:14px; background:var(--tint-2); border:1px solid var(--tint-5); color:var(--textmid); font-family:var(--font-body); font-size:var(--fs-base); font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; }
.quest-pill:hover { background:var(--tint-7); color:var(--textbright); border-color:var(--tint-10); }
.quest-pill.active { background:rgba(224,168,48,0.2); border-color:var(--gold); color:var(--gold); box-shadow:0 0 12px rgba(224,168,48,0.22); }
.quest-claimall-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 20px 0; padding:14px 20px; border-radius:var(--radius-md); background:linear-gradient(90deg, rgba(224,168,48,0.14), rgba(224,168,48,0.05), rgba(224,168,48,0.14)); border:1px solid rgba(224,168,48,0.4); font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; color:var(--gold2); letter-spacing:0.5px; animation:questClaimPulse 2.5s ease-in-out infinite; }
@keyframes questClaimPulse { 0%,100% { box-shadow:inset 0 0 0 rgba(224,168,48,0); } 50% { box-shadow:inset 0 0 24px rgba(224,168,48,0.12); } }
.quest-claimall-btn { padding:10px 22px; font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:6px; cursor:pointer; border:1px solid var(--gold); color:var(--gold); background:linear-gradient(180deg,rgba(224,168,48,0.25),rgba(224,168,48,0.12)); animation:pulseGold 1.8s 1; }
.quest-claimall-btn:disabled { opacity:0.5; cursor:default; animation:none; }
.quest-alldone { text-align:center; padding:12px 16px 0; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--success); }
.quest-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quest-tag { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:1px; padding:1px 8px; border-radius:var(--radius-md); text-transform:uppercase; }
.quest-tag.tag-eco     { background:rgba(224,168,48,0.15); color:var(--gold); border:1px solid rgba(224,168,48,0.3); }
.quest-tag.tag-combat  { background:rgba(215,76,60,0.15); color:#ff7b6b;       border:1px solid rgba(215,76,60,0.3); }
.quest-tag.tag-explore { background:rgba(80,160,240,0.15); color:#7bb7ff;       border:1px solid rgba(80,160,240,0.3); }
.quest-card.cat-eco     .quest-prog-fill { background:linear-gradient(90deg,#e0a830,#f4c659); }
.quest-card.cat-combat  .quest-prog-fill { background:linear-gradient(90deg,#c0392b,#ff7b6b); }
.quest-card.cat-explore .quest-prog-fill { background:linear-gradient(90deg,#4080e0,#7bb7ff); }
.quest-card.completed .quest-prog-fill { background:var(--success) !important; }
.quest-card.ready { border-color:rgba(224,168,48,0.45); box-shadow:0 0 10px rgba(224,168,48,0.08); }
/* T6 — XP + Tokens rewards */
.quest-rew-bonus { color:#b98cff; font-weight:600; text-shadow:0 0 6px rgba(185,140,255,0.25); }
/* Alliance coop — top contributors */
.quest-ally-top { margin-top:6px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.quest-ally-contrib { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:var(--radius-md); background:rgba(80,160,240,0.12); border:1px solid rgba(80,160,240,0.25); color:#7bb7ff; font-weight:600; font-size:var(--fs-xs); }
.quest-ally-empty { font-style:italic; opacity:0.7; }

/* ───────────── Campaign (narrative story missions) ───────────── */
.camp-header { padding:18px 20px 14px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, rgba(224,168,48,0.08), rgba(80,160,240,0.04)); }
.camp-header-title { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; color:var(--gold); letter-spacing:1px; margin-bottom:6px; }
.camp-header-sub { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
.camp-header-bar { height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; }
.camp-header-fill { height:100%; background:linear-gradient(90deg, var(--gold), var(--accent)); transition:width .4s ease; box-shadow:0 0 8px rgba(224,168,48,0.4); }
/* Hero parallax — Sprint refonte */
.camp-hero { position:relative; padding:56px 36px 40px; min-height:200px; border-bottom:1px solid var(--border); overflow:hidden; isolation:isolate; }
.camp-hero-stars { position:absolute; inset:0; z-index:1; background:
  radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent),
  radial-gradient(1px 1px at 60% 70%, #fff 50%, transparent),
  radial-gradient(2px 2px at 80% 20%, #fff 50%, transparent),
  radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.65) 50%, transparent),
  radial-gradient(1px 1px at 95% 50%, #fff 50%, transparent),
  radial-gradient(2px 2px at 12% 65%, rgba(255,255,255,0.8) 50%, transparent);
  background-size:240px 240px; animation:campStarsDrift 60s linear infinite; opacity:0.7; }
.camp-hero-overlay { position:absolute; inset:0; z-index:2; background:radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 70%, var(--shade-7) 100%); }
.camp-hero-content { position:relative; z-index:3; max-width:720px; }
.camp-hero-title { font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:900; letter-spacing:6px; text-transform:uppercase; color:var(--textbright); text-shadow:0 0 18px rgba(255,255,255,0.6), 0 0 36px rgba(var(--accent-rgb),0.6); display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.camp-hero-sub { font-family:var(--font-mono); font-size:var(--fs-lg); color:rgba(255,255,255,0.78); letter-spacing:0.6px; margin-bottom:22px; max-width:560px; line-height:1.5; }
.camp-hero-progress { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.camp-hero-progress-text { font-family:var(--font-display); font-size:var(--fs-base); letter-spacing:2px; color:rgba(255,255,255,0.85); text-transform:uppercase; }
.camp-hero-progress-text b { color:var(--gold); font-size:var(--fs-lg); }
/* CP1 audit UI/UX 27/05 — séparation progress par arc */
.camp-hero-progress-line { font-family:var(--font-display); font-size:var(--fs-base); letter-spacing:1.5px; color:rgba(255,255,255,0.85); text-transform:uppercase; }
.camp-hero-progress-line b { color:var(--gold); font-size:var(--fs-md); }
.camp-hero-bar { height:8px; border:1px solid var(--tint-5); }
@keyframes campStarsDrift { from { background-position:0 0; } to { background-position:-240px -240px; } }
/* Faction-specific hero backgrounds */
.camp-hero-tauri   { background:linear-gradient(180deg, #082244 0%, #051022 60%, #030814 100%); }
.camp-hero-goauld  { background:linear-gradient(180deg, #2c1d05 0%, #1a0f02 60%, #0a0703 100%); }
.camp-hero-anciens { background:linear-gradient(180deg, #0a2a4a 0%, #051528 60%, #030a14 100%); }
.camp-hero-wraith  { background:linear-gradient(180deg, #1a0832 0%, #0e0420 60%, #050310 100%); }
.camp-hero-tokra   { background:linear-gradient(180deg, #0a3030 0%, #04181a 60%, #020c0d 100%); }
.camp-hero-ori     { background:linear-gradient(180deg, #2a0f08 0%, #18060c 60%, #0a0306 100%); }
.camp-grid { display:flex; flex-direction:column; gap:10px; padding:14px 16px; }
/* Ascended arc (F9) */
.camp-arc-divider { margin:24px 16px 8px; padding:32px 20px 24px; border-radius:var(--radius-md); background:linear-gradient(135deg, rgba(180,140,255,0.12), rgba(80,200,255,0.06)); border:1px solid rgba(180,140,255,0.25); text-align:center; position:relative; display:block; }
.camp-arc-divider::before { content:''; position:absolute; inset:0; border-radius:var(--radius-md); background:radial-gradient(ellipse at 50% 0%, rgba(200,170,255,0.15), transparent 60%); pointer-events:none; z-index:0; }
.camp-arc-title { display:block; font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:2px; color:#d4b8ff; text-shadow:0 0 10px rgba(180,140,255,0.5); position:relative; z-index:1; line-height:1.8; padding:8px 0 4px; overflow:visible; }
.camp-arc-sub { display:block; font-family:var(--font-mono); font-size:var(--fs-sm); color:rgba(210,190,255,0.7); text-transform:uppercase; letter-spacing:1.5px; margin-top:12px; position:relative; z-index:1; line-height:1.5; }
.camp-grid-ascended .camp-card { background:linear-gradient(135deg, rgba(30,20,50,0.45), rgba(10,15,30,0.3)); border-color:rgba(180,140,255,0.2); }
.camp-grid-ascended .camp-card.active { border-color:rgba(180,140,255,0.45); box-shadow:0 0 10px rgba(180,140,255,0.12); }
.camp-grid-ascended .camp-card.ready  { border-color:rgba(200,170,255,0.65); box-shadow:0 0 14px rgba(180,140,255,0.25); }
.camp-grid-ascended .camp-card.done   { border-color:rgba(180,140,255,0.3); }
.camp-grid-ascended .camp-ico { filter:drop-shadow(0 0 6px rgba(200,170,255,0.5)); }
.camp-arc-teaser { margin:16px; padding:16px 20px; text-align:center; border:1px dashed rgba(180,140,255,0.3); border-radius:var(--radius-md); background:rgba(30,20,50,0.2); color:rgba(210,190,255,0.75); font-family:var(--font-mono); font-size:var(--fs-base); letter-spacing:1px; }
.camp-card { display:flex; align-items:stretch; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .2s, transform .2s; }
.camp-card.active { border-color:rgba(80,160,240,0.4); }
.camp-card.ready  { border-color:rgba(224,168,48,0.5); box-shadow:0 0 10px rgba(224,168,48,0.1); }
.camp-card.done   { opacity:0.65; border-color:rgba(48,200,90,0.3); }
.camp-card.locked { opacity:0.55; filter:grayscale(0.4); }
.camp-card-num { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--gold); min-width:46px; display:flex; align-items:flex-start; justify-content:center; opacity:0.7; }
.camp-card-body { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.camp-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.camp-ico { font-size:24px; }
.camp-title { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--text); flex:1; min-width:0; }
.camp-badge { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600; padding:3px 10px; border-radius:var(--radius-lg); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.camp-badge-done     { background:rgba(48,200,90,0.15);  color:var(--success); border:1px solid rgba(48,200,90,0.3); }
.camp-badge-locked   { background:var(--tint-4); color:var(--textsoft); border:1px solid var(--border); }
.camp-badge-ready    { background:rgba(224,168,48,0.18); color:var(--gold); border:1px solid rgba(224,168,48,0.4); }
.camp-badge-progress { background:rgba(80,160,240,0.12); color:#7bb7ff; border:1px solid rgba(80,160,240,0.3); }
.camp-desc { font-size:var(--fs-lg); color:var(--textsoft); line-height:1.45; }
.camp-briefing { font-size:var(--fs-md); color:#b8c8dc; font-style:italic; padding:7px 12px;  background:rgba(80,160,240,0.05); border-radius:0 4px 4px 0;  box-shadow:inset 3px 0 0 0 rgba(80,160,240,0.5); }
.camp-prog-bar { height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; margin-top:2px; }
.camp-prog-fill { height:100%; background:linear-gradient(90deg, #4080e0, #7bb7ff); transition:width .3s ease; }
.camp-rewards { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px; }
.camp-rew-bonus { color:#b98cff; font-weight:600; text-shadow:0 0 6px rgba(185,140,255,0.25); }
.camp-card-action { display:flex; align-items:center; }
.camp-btn { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700; padding:10px 18px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .2s; white-space:nowrap; }
.camp-btn.ready { background:linear-gradient(135deg, rgba(224,168,48,0.25), rgba(224,168,48,0.1)); border-color:rgba(224,168,48,0.5); color:var(--gold); }
.camp-btn.ready:hover { background:linear-gradient(135deg, rgba(224,168,48,0.4), rgba(224,168,48,0.2)); transform:translateY(-1px); }
.camp-btn.claimed { background:rgba(48,200,90,0.1); border-color:rgba(48,200,90,0.3); color:var(--success); cursor:default; }
.camp-btn.locked  { cursor:not-allowed; opacity:0.6; }
.camp-btn.progress { background:rgba(80,160,240,0.08); border-color:rgba(80,160,240,0.25); color:#7bb7ff; cursor:default; }

/* ═══════════════════════════════════════════════════════════
   BATTLE PASS
   ═══════════════════════════════════════════════════════════ */
#battlepassContainer > * { max-width:960px; margin-left:auto; margin-right:auto; width:100%; box-sizing:border-box; }
.bp-header { padding:18px 20px 14px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, rgba(80,160,240,0.08), rgba(224,168,48,0.05)); overflow:visible; }
.bp-header-title { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--gold); letter-spacing:0.5px; margin-bottom:8px; white-space:normal; word-break:break-word; line-height:1.25; }
@media (max-width:560px) { .bp-header-title { font-size:var(--fs-lg); letter-spacing:0; } }
.bp-header-sub { display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.bp-header-sub b { color:var(--text); }
.bp-countdown { color:var(--accent); }
.bp-prem-badge { padding:3px 10px; border-radius:var(--radius-lg); background:linear-gradient(135deg, rgba(224,168,48,0.2), rgba(255,200,80,0.15)); border:1px solid var(--gold); color:var(--gold); font-weight:700; transition:all .15s ease; }
.bp-prem-badge:hover { box-shadow:0 0 12px rgba(224,168,48,0.5); }
.bp-prem-off { padding:3px 10px; border-radius:var(--radius-lg); background:var(--surface2); border:1px dashed var(--gold); color:var(--gold); transition:all .15s ease; }
.bp-prem-off:hover { background:rgba(224,168,48,0.1); box-shadow:0 0 8px rgba(224,168,48,0.3); }
.bp-claim-all-btn { margin-left:auto; padding:6px 14px; border-radius:var(--radius); background:linear-gradient(135deg, var(--gold), #ffd54f); border:1px solid var(--gold); color:#1a1208; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:800; letter-spacing:0.5px; cursor:pointer; transition:all .2s ease; box-shadow:0 0 12px rgba(224,168,48,0.4); animation:bpClaimPulse 2s ease-in-out infinite; }
.bp-claim-all-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 0 20px rgba(224,168,48,0.7); }
.bp-claim-all-btn:disabled { opacity:0.6; cursor:wait; animation:none; }
@keyframes bpClaimPulse { 0%,100% { box-shadow:0 0 12px rgba(224,168,48,0.4); } 50% { box-shadow:0 0 24px rgba(224,168,48,0.75); } }
.bp-xp-bar { height:8px; border-radius:var(--radius-sm); background:var(--surface2); overflow:hidden; box-shadow:inset 0 1px 3px var(--shade-3); }
.bp-xp-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--gold)); transition:width .4s ease; box-shadow:0 0 8px rgba(80,160,240,0.5); }
/* Barre saisonnière globale (palier 6/20) — visible avant l'XP du palier courant */
.bp-season-bar {
  position:relative;
  height:24px;
  border-radius:6px;
  background:var(--surface2);
  border:1px solid rgba(var(--accent-rgb), 0.25);
  overflow:hidden;
  margin:8px 0 6px;
  box-shadow:inset 0 1px 4px var(--shade-2);
}
.bp-season-bar-fill {
  height:100%;
  background:linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.85) 0%,
    var(--gold) 60%,
    #ffd285 100%);
  transition:width .5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position:relative;
}
.bp-season-bar-fill::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  animation:bpSeasonShimmer 3s linear infinite;
}
@keyframes bpSeasonShimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.bp-season-bar-label {
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:2.5px;
  color:var(--textbright);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(0, 0, 0, 0.65);
  z-index:2;
}
.bp-xp-label { margin-top:5px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); text-align:right; }
.bp-xp-hint { margin-top:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); padding:6px 10px; background:var(--surface2); border-radius:6px;   box-shadow:inset 3px 0 0 0 var(--accent); }
.bp-xp-hint b { color:var(--gold); }

/* Marketing banner — grid robuste (gauche info | droite CTAs) */
.bp-promo-banner { max-width:960px; margin:14px auto; padding:16px 20px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(224,168,48,0.18), rgba(80,160,240,0.1));
  border:1px solid var(--gold);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  transition:all .2s ease; position:relative; }
.bp-promo-banner:hover { box-shadow:0 4px 16px rgba(224,168,48,0.25); border-color:#ffd56b; }
.bp-promo-left { min-width:0; }
.bp-promo-title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--gold); margin-bottom:6px; letter-spacing:0.5px; line-height:1.25; }
.bp-promo-sub { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text); margin-bottom:8px; line-height:1.45; }
.bp-promo-sub b { color:var(--gold); }
.bp-promo-items { display:flex; gap:8px; flex-wrap:wrap; }
.bp-promo-item { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; font-size:var(--fs-xl);
  background:var(--surface2); border:1px solid var(--border); border-radius:7px; cursor:help; transition:all .15s ease; }
.bp-promo-item:hover { transform:scale(1.15); border-color:var(--gold); box-shadow:0 0 8px rgba(224,168,48,0.4); }
.bp-promo-legend { background:linear-gradient(135deg, #ffd56b, #e0a830); border-color:#ffd56b; box-shadow:0 0 10px rgba(255,213,107,0.4); animation:bpLegendPulse 2s ease-in-out infinite; }
@keyframes bpLegendPulse { 0%,100% { box-shadow:0 0 10px rgba(255,213,107,0.4); } 50% { box-shadow:0 0 18px rgba(255,213,107,0.7); } }

.bp-promo-ctas { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.bp-promo-or { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--textsoft); letter-spacing:2px; flex-shrink:0; }
.bp-promo-cta-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 18px; border-radius:var(--radius-md); border:none; cursor:pointer; text-decoration:none; font-family:inherit; transition:all .15s ease; min-width:150px; text-align:center; }
.bp-promo-cta-btn.primary { background:linear-gradient(135deg, #ffd56b, #e0a830); color:#000; box-shadow:0 2px 10px rgba(224,168,48,0.45); }
.bp-promo-cta-btn.primary:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(224,168,48,0.7); }
.bp-promo-cta-btn.secondary { background:linear-gradient(135deg, rgba(126,59,199,0.25), rgba(80,40,140,0.15)); border:1px solid #9d5cd7; color:#e3b5ff; }
.bp-promo-cta-btn.secondary:hover { background:linear-gradient(135deg, rgba(157,92,215,0.35), rgba(126,59,199,0.2)); transform:translateY(-2px); box-shadow:0 6px 18px rgba(157,92,215,0.5); color:#f5dfff; }
.bp-promo-cta-label { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:0.5px; white-space:nowrap; }
.bp-promo-cta-price { font-family:var(--font-mono); font-size:var(--fs-sm); white-space:nowrap; }
.bp-promo-cta-btn.primary .bp-promo-cta-price { color:#3a2a00; }
.bp-promo-cta-btn.primary .bp-promo-cta-price b { color:#000; font-size:var(--fs-md); font-weight:900; }
.bp-promo-cta-btn.secondary .bp-promo-cta-price b { color:#ffd56b; font-size:var(--fs-md); font-weight:900; }
.bp-promo-cta-hint { font-family:var(--font-mono); font-size:10px; opacity:0.85; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }

@media (max-width:900px) {
  .bp-promo-banner { grid-template-columns:1fr; }
  .bp-promo-ctas { justify-content:center; }
}
@media (max-width:520px) {
  .bp-promo-ctas { flex-wrap:wrap; }
  .bp-promo-or { width:100%; text-align:center; }
  .bp-promo-cta-btn { flex:1 1 100%; min-width:0; }
}
/* Track headers — aligned with grid */
.bp-tracks-head { display:grid; grid-template-columns:48px 1fr 1fr; gap:10px; padding:10px 20px 8px; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px; border-bottom:1px solid var(--border); background:var(--surface1); position:sticky; top:0; z-index:3; }
.bp-tracks-head .bp-track-col { text-align:center; padding:4px 0; border-radius:var(--radius-sm); }
.bp-tracks-head .bp-track-col-num { }
.bp-tracks-head .bp-track-free { color:var(--textsoft); background:rgba(80,160,240,0.08); }
.bp-tracks-head .bp-track-prem { color:var(--gold); background:linear-gradient(135deg, rgba(224,168,48,0.15), rgba(224,168,48,0.05)); }

/* BP1 audit UI/UX 27/05 — palier nav pills (1-10 / 11-20 / etc.) */
.bp-palier-nav {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:10px 20px 8px;
  background:rgba(0,0,0,0.22);
  border-bottom:1px solid var(--border);
  position:sticky; top:36px; z-index:2;
}
.bp-palier-lbl { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px; color:var(--textsoft); text-transform:uppercase; margin-right:4px; }
.bp-palier-pill {
  font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600;
  padding:5px 12px; border-radius:14px; cursor:pointer; transition:all 0.18s;
  background:var(--tint-3);
  border:1px solid rgba(var(--accent-rgb),0.22);
  color:var(--textmid);
}
.bp-palier-pill:hover { background:rgba(var(--accent-rgb),0.10); border-color:rgba(var(--accent-rgb),0.45); color:var(--textbright); transform:translateY(-1px); }
.bp-palier-pill.active { background:linear-gradient(135deg, rgba(224,168,48,0.22), rgba(224,168,48,0.08)); border-color:var(--gold); color:var(--gold); box-shadow:0 0 12px rgba(224,168,48,0.25); }

/* Grid rows */
.bp-grid { display:flex; flex-direction:column; padding:10px 20px 20px; gap:8px; max-height:62vh; overflow-y:auto; scroll-snap-type:y proximity; scroll-padding:80px; }
.bp-row { display:grid; grid-template-columns:48px 1fr 1fr; gap:10px; align-items:stretch; scroll-snap-align:center; scroll-margin-top:60px; transition:all 0.3s; }
.bp-row.is-current { box-shadow:0 0 0 2px var(--gold), 0 0 20px rgba(224,168,48,0.35); border-radius:var(--radius-md); animation:bpCurrentPulse 2.6s ease-in-out infinite; }
.bp-row.is-next { box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.55); border-radius:var(--radius-md); }
@keyframes bpCurrentPulse {
  0%,100% { box-shadow:0 0 0 2px var(--gold), 0 0 14px rgba(224,168,48,0.30); }
  50%     { box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(224,168,48,0.55); }
}
.bp-row-num { display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--textsoft); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); min-height:62px; }
.bp-row:has(.cos-wrap) .bp-cell-prem.has-cosmetic { min-height:118px; }
.bp-cell-prem.has-cosmetic .bp-cell-rewards { flex-direction:column; align-items:flex-start; gap:6px; }
.bp-row.unlocked .bp-row-num { color:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 10px rgba(80,160,240,0.2); }
.bp-cell { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--surface1); border:1px solid var(--border); border-radius:var(--radius); min-height:62px; min-width:0; overflow:hidden; }
.bp-cell-rewards { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1; min-width:0; }
.bp-cell-prem { background:linear-gradient(135deg, rgba(224,168,48,0.05), rgba(224,168,48,0.02)); border-color:rgba(224,168,48,0.25); }
.bp-cell-prem.has-cosmetic { border-color:var(--gold); box-shadow:inset 0 0 12px rgba(224,168,48,0.08); }
.bp-cell.claimed { opacity:0.55; }
.bp-cell.locked-prem { opacity:0.55; }
.bp-rw { display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:var(--fs-base); color:var(--text); }
.bp-rw span { cursor:help; }
/* Cellules de récompense — petite carte avec icône ressource bien lisible */
.bp-rw-cell {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:var(--radius);
  background:rgba(0, 0, 0, 0.32);
  border:1px solid rgba(var(--accent-rgb), 0.20);
  font-weight:600;
  transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bp-rw-cell:hover {
  transform:translateY(-1px);
  border-color:rgba(var(--accent-rgb), 0.50);
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.35);
}
.bp-rw-resico {
  width:18px; height:18px; object-fit:contain;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5));
}
.bp-rw-metal  { border-color:rgba(255, 200, 95, 0.40); color:#ffd285; }
.bp-rw-metal  .bp-rw-resico { filter: drop-shadow(0 0 5px rgba(255, 200, 95, 0.75)); }
.bp-rw-naq    { border-color:rgba(106, 217, 255, 0.40); color:#85e2ff; }
.bp-rw-naq    .bp-rw-resico { filter: drop-shadow(0 0 5px rgba(106, 217, 255, 0.75)); }
.bp-rw-naqria { border-color:rgba(192, 128, 255, 0.40); color:#d5a8ff; }
.bp-rw-naqria .bp-rw-resico { filter: drop-shadow(0 0 5px rgba(192, 128, 255, 0.75)); }
.bp-rw-men    { border-color:rgba(108, 255, 170, 0.40); color:#9bffc8; }
.bp-rw-men    .bp-rw-resico { filter: drop-shadow(0 0 5px rgba(108, 255, 170, 0.75)); }
.bp-rw-token  { color:var(--gold); border-color:rgba(212, 175, 55, 0.50); }
.bp-rw-xp     { color:#c080ff; border-color:rgba(192, 128, 255, 0.50); }

/* Cosmetic — shown as highlighted pill */
.bp-cosmetic { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.2), rgba(255,213,107,0.1));
  border:1px solid var(--gold); border-radius:14px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--gold); font-weight:700; cursor:help; }
.bp-cosmetic-ico { font-size:16px; filter:drop-shadow(0 0 4px rgba(224,168,48,0.5)); }
.bp-cosmetic.legend { background:linear-gradient(135deg, #e0a830, #ffd56b); color:#1a1a2e; border-color:#ffd56b;
  animation:bpLegendPulse 2s ease-in-out infinite; }
.bp-cosmetic.legend .bp-cosmetic-ico { filter:drop-shadow(0 0 6px rgba(255,255,255,0.8)); }

/* Buttons */
.bp-btn {
  position:relative; overflow:hidden;
  padding:8px 18px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface2); color:var(--text);
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px;
  cursor:pointer; transition:all .15s ease; white-space:nowrap; flex-shrink:0;
}
.bp-btn.ready {
  background:linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  color:#0a0e1c; border-color:transparent;
  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: bpReadyPulse 2.4s ease-in-out infinite;
}
@keyframes bpReadyPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(212, 175, 55, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.40); }
}
.bp-btn.ready::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform:translateX(-100%);
  animation: bpShine 3s ease-in-out infinite;
}
@keyframes bpShine {
  0%   { transform:translateX(-100%); }
  60%  { transform:translateX(100%); }
  100% { transform:translateX(100%); }
}
.bp-btn.ready:hover {
  transform:translateY(-2px) scale(1.04);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.bp-btn.done {
  background:linear-gradient(135deg, rgba(108, 255, 170, 0.18), rgba(108, 255, 170, 0.06));
  border-color:rgba(108, 255, 170, 0.45); color:#9bffc8;
  cursor:default;
  box-shadow:inset 0 0 10px rgba(108, 255, 170, 0.15);
}
.bp-btn.locked { cursor:not-allowed; opacity:0.55; }
/* Animation pendant le claim — bouton "absorbé" */
.bp-btn.bp-claiming {
  animation: bpClaimPulse 0.6s ease-in-out infinite !important;
  pointer-events:none;
}
@keyframes bpClaimPulse {
  0%, 100% { transform:scale(1); filter:brightness(1); }
  50%      { transform:scale(0.96); filter:brightness(1.4); }
}
.bp-claim-spin { display:inline-block; animation: bpSpin 0.8s linear infinite; }
@keyframes bpSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
/* Burst de succès quand reçu — flash gold + scale */
.bp-btn.bp-claimed-burst {
  animation: bpBurstFlash 0.55s cubic-bezier(0.16, 1.3, 0.3, 1) forwards !important;
}
@keyframes bpBurstFlash {
  0%   { transform:scale(1);   filter:brightness(1); }
  40%  { transform:scale(1.25); filter:brightness(2.2); box-shadow:0 0 40px rgba(212, 175, 55, 1); }
  100% { transform:scale(1);   filter:brightness(1); opacity:0.6; }
}
/* Particules sparkle qui jaillissent du bouton claim */
.bp-sparkle {
  animation: bpSparkleFly 0.7s ease-out forwards;
}
@keyframes bpSparkleFly {
  0%   { transform:translate(0, 0) scale(0.8); opacity:1; }
  60%  { opacity:1; }
  100% { transform:translate(var(--dx), var(--dy)) scale(0.2); opacity:0; }
}

.bp-err { padding:40px 20px; text-align:center; color:var(--danger); font-family:var(--font-mono); }

@media (max-width:720px) {
  .bp-promo-banner { flex-direction:column; align-items:flex-start; padding:12px 14px; }
  .bp-promo-right { width:100%; text-align:left; }
  .bp-cell { flex-direction:column; align-items:flex-start; gap:6px; padding:8px 10px; }
  .bp-tracks-head { grid-template-columns:38px 1fr 1fr; padding:8px 12px 6px; }
  .bp-grid { padding:8px 12px 16px; }
  .bp-row { grid-template-columns:38px 1fr 1fr; gap:4px; }
  .bp-row-num { font-size:var(--fs-lg); min-height:auto; }
  .bp-rw { font-size:var(--fs-xs); gap:6px; }
  .bp-btn { padding:4px 8px; font-size:10px; width:100%; }
  .bp-cosmetic-txt { display:none; }
}

/* Streak chip */
.quest-streak { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:linear-gradient(135deg, rgba(255,80,40,0.15), rgba(255,160,40,0.1)); border:1px solid rgba(255,100,40,0.45); cursor:help; }
.quest-streak-fire { font-size:18px; filter:drop-shadow(0 0 6px rgba(255,100,40,0.7)); animation:questFireFlicker 1.6s ease-in-out infinite; }
.quest-streak-val { font-family:var(--font-display); font-size:16px; font-weight:700; color:#ff7b3c; text-shadow:0 0 8px rgba(255,100,40,0.4); }
.quest-streak-lbl { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; }
@keyframes questFireFlicker { 0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 6px rgba(255,100,40,0.7))} 50%{transform:scale(1.08) rotate(2deg);filter:drop-shadow(0 0 12px rgba(255,160,40,0.9))} }
/* T7 — Perfect day celebration */
.quest-perfect { position:relative; margin:14px 16px 4px; padding:16px 18px; display:flex; align-items:center; gap:14px; border-radius:var(--radius-md); overflow:hidden; border:1px solid rgba(224,168,48,0.5); background:linear-gradient(135deg, rgba(224,168,48,0.18), rgba(80,160,240,0.08)); animation:questPerfectIn 0.6s cubic-bezier(0.2,0.9,0.3,1.2); }
.quest-perfect-glow { position:absolute; inset:-40%; background:radial-gradient(circle at 50% 50%, rgba(224,168,48,0.22), transparent 60%); animation:questPerfectPulse 3s ease-in-out infinite; pointer-events:none; }
.quest-perfect-icon { font-size:36px; filter:drop-shadow(0 0 12px rgba(224,168,48,0.6)); z-index:1; }
.quest-perfect-body { flex:1; z-index:1; }
.quest-perfect-title { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:3px; color:var(--gold); text-shadow:0 0 12px rgba(224,168,48,0.5); }
.quest-perfect-sub { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textmid); margin-top:2px; }
.quest-spark { position:absolute; top:50%; width:6px; height:6px; border-radius:50%; background:var(--gold); pointer-events:none; box-shadow:0 0 8px var(--gold); animation:questSpark 1.6s ease-out forwards; }
@keyframes questPerfectIn { 0%{opacity:0;transform:translateY(-8px) scale(0.96)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes questPerfectPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes questSpark { 0%{opacity:0;transform:translate(0,0) scale(0.5)} 30%{opacity:1} 100%{opacity:0;transform:translate(0,-40px) scale(1.2)} }
/* T8 — Overview quests widget */
.ovq-widget { display:flex; flex-direction:column; gap:6px; padding:10px 14px; margin:0 0 6px; border:1px solid rgba(var(--accent-rgb),0.22); border-radius:var(--radius); background:linear-gradient(180deg, rgba(var(--accent-rgb),0.05), rgba(0,0,0,0.15)); }
.ovq-row { display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 6px; min-height:36px; border-radius:5px; transition:background 0.15s; }
.ovq-row:hover { background:var(--tint-2); }
.ovq-ico { font-size:16px; width:22px; text-align:center; }
.ovq-lbl { font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:1.5px; text-transform:uppercase; color:var(--textsoft); min-width:110px; }
.ovq-bar { flex:1; height:6px; background:var(--tint-4); border-radius:3px; overflow:hidden; }
.ovq-fill { height:100%; border-radius:3px; transition:width 0.4s, background 0.3s; }
.ovq-count { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textbright); min-width:48px; text-align:right; }
.ovq-badge-ready { padding:2px 8px; border-radius:var(--radius-md); background:rgba(224,168,48,0.2); border:1px solid rgba(224,168,48,0.5); color:var(--gold); font-family:var(--font-mono); font-size:var(--fs-xs); animation:pulseGold 1.8s 1; }
@media (max-width:640px) { .ovq-lbl { min-width:70px; font-size:10px; } }

/* ══ ALLIANCE REDESIGN v2 ══ */
@keyframes alPulseOnline { 0%,100%{box-shadow:0 0 4px rgba(0,200,100,0.4)} 50%{box-shadow:0 0 12px rgba(0,200,100,0.8)} }
@keyframes warPulseGlow { 0%,100%{box-shadow:0 0 8px rgba(192,57,43,0.2),inset 0 0 8px rgba(192,57,43,0.05)} 50%{box-shadow:0 0 20px rgba(192,57,43,0.5),inset 0 0 15px rgba(192,57,43,0.08)} }
@keyframes alTabPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.2)} }
@keyframes rosterSlide { from{max-height:0;opacity:0} to{max-height:600px;opacity:1} }
.al-layout { display:flex;flex-direction:column;height:100%; }
.al-body { flex:1;overflow-y:auto;padding:16px; }
/* Tab bar pills */
.al-tab-bar { display:flex;gap:8px;padding:14px 20px;background:linear-gradient(180deg,rgba(4,8,15,0.92),rgba(4,8,15,0.6));border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:center; }
.al-tab-pill { font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;border-radius:22px;border:1px solid rgba(255,255,255,0.14);cursor:pointer;color:var(--textmid);background:var(--tint-2);transition:all .22s;display:flex;align-items:center;gap:7px;position:relative; }
.al-tab-pill:hover { transform:translateY(-1px);filter:brightness(1.2);background:var(--tint-4);border-color:var(--tint-10);color:var(--textbright); }
.al-tab-pill[data-tab="members"].active { background:rgba(var(--accent-rgb),0.18);color:var(--accent);border-color:rgba(var(--accent-rgb),0.5);box-shadow:0 0 12px rgba(var(--accent-rgb),0.15); }
.al-tab-pill[data-tab="chat"].active { background:rgba(var(--accent-rgb),0.18);color:var(--accent);border-color:rgba(var(--accent-rgb),0.5);box-shadow:0 0 12px rgba(var(--accent-rgb),0.15); }
.al-tab-pill[data-tab="diplo"].active { background:rgba(0,220,120,0.12);color:var(--success);border-color:rgba(0,220,120,0.4);box-shadow:0 0 12px rgba(0,220,120,0.12); }
.al-tab-pill[data-tab="wars"].active { background:rgba(192,57,43,0.18);color:var(--danger);border-color:rgba(192,57,43,0.5);box-shadow:0 0 12px rgba(192,57,43,0.2); }
.al-tab-pill[data-tab="rankings"].active { background:rgba(212,175,55,0.12);color:var(--gold2);border-color:rgba(212,175,55,0.4);box-shadow:0 0 12px rgba(212,175,55,0.12); }
.al-tab-pill[data-tab="hq"].active { background:rgba(140,100,255,0.15);color:#b388ff;border-color:rgba(140,100,255,0.5);box-shadow:0 0 12px rgba(140,100,255,0.15); }
/* ── Alliance HQ Styles — Pro Redesign ────────────────────── */

/* === Empty state (no HQ) === */
.alhq-empty { text-align:center;padding:60px 24px;background:radial-gradient(ellipse at center,rgba(140,100,255,0.08) 0%,transparent 70%); }
.alhq-empty-icon { font-size:64px;margin-bottom:16px;filter:drop-shadow(0 0 20px rgba(140,100,255,0.5));animation:alhqFloat 3s ease-in-out infinite; }
@keyframes alhqFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.alhq-empty-title { font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:900;color:#e0d0ff;letter-spacing:3px;margin-bottom:10px;text-shadow:0 0 20px rgba(140,100,255,0.4); }
.alhq-empty-desc { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);line-height:1.8;margin-bottom:24px;max-width:380px;margin-inline:auto; }
.alhq-found-btn { padding:16px 40px;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:900;letter-spacing:3px;border:2px solid #b388ff;color:var(--textbright);background:linear-gradient(135deg,rgba(140,100,255,0.25),rgba(140,100,255,0.08));border-radius:var(--radius-lg);cursor:pointer;transition:all .3s;text-shadow:0 0 10px rgba(140,100,255,0.5);box-shadow:0 0 20px rgba(140,100,255,0.15); }
.alhq-found-btn:hover { background:linear-gradient(135deg,rgba(140,100,255,0.4),rgba(140,100,255,0.15));transform:translateY(-3px);box-shadow:0 8px 30px rgba(140,100,255,0.3); }

/* === Header banner === */
.alhq-header { display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(140,100,255,0.15),rgba(90,60,200,0.06),rgba(10,14,28,0.95));border:1px solid rgba(140,100,255,0.35);border-radius:14px;padding:18px 22px;margin-bottom:16px;flex-wrap:wrap;box-shadow:0 4px 24px rgba(140,100,255,0.1),inset 0 1px 0 var(--tint-3); }
.alhq-hdr-left { display:flex;align-items:center;gap:16px; }
.alhq-hdr-icon { font-size:40px;filter:drop-shadow(0 0 12px rgba(140,100,255,0.5)); }
.alhq-hdr-title { font-family:var(--font-display);font-size:18px;font-weight:900;color:#e8e0ff;letter-spacing:2px;text-shadow:0 0 16px rgba(140,100,255,0.3); }
.alhq-hdr-coords { font-family:var(--font-mono);font-size:var(--fs-sm);color:rgba(180,170,220,0.7);margin-top:3px;letter-spacing:0.5px; }
.alhq-hdr-res { display:flex;gap:16px;flex-wrap:wrap; }
.alhq-res-block { min-width:140px;background:rgba(0,0,0,0.25);border:1px solid rgba(140,100,255,0.15);border-radius:var(--radius);padding:8px 12px; }
.alhq-res-label { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);margin-bottom:5px;display:flex;align-items:center;gap:4px; }
.alhq-res-bar { height:6px;background:var(--tint-3);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px var(--shade-1); }
.alhq-res-fill { height:100%;background:linear-gradient(90deg,#7c4dff,#b388ff);border-radius:3px;transition:width .4s ease;box-shadow:0 0 8px rgba(140,100,255,0.4); }
.alhq-res-fill.overcap { background:linear-gradient(90deg,#ffa726,#ffd54f);box-shadow:0 0 10px rgba(255,167,38,0.55); }
.alhq-res-block.overcap { border-color:rgba(255,167,38,0.45); }
.alhq-res-over { color:#ffd54f;font-weight:700;margin-left:4px; }

/* === Tax row === */
.alhq-tax-row { display:flex;align-items:center;gap:14px;padding:12px 18px;background:linear-gradient(135deg,rgba(212,175,55,0.06),rgba(10,14,28,0.7));border:1px solid rgba(212,175,55,0.2);border-radius:var(--radius-md);margin-bottom:16px;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid); }
.alhq-tax-btn { padding:8px 18px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:1px;border:1px solid var(--gold);color:var(--gold);background:rgba(212,175,55,0.08);border-radius:var(--radius);cursor:pointer;transition:all .25s; }
.alhq-tax-btn:hover { background:rgba(212,175,55,0.18);box-shadow:0 0 12px rgba(212,175,55,0.2);transform:translateY(-1px); }

/* === Section title === */
.alhq-section-title { font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;letter-spacing:3px;color:#c8b8ff;text-transform:uppercase;padding:10px 0 8px;margin:20px 0 12px;position:relative; }
.alhq-section-title::after { content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(140,100,255,0.6),rgba(140,100,255,0.05));border-radius:1px; }

/* === Building grid === */
.alhq-bld-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:18px; }
.alhq-bld-card { background:linear-gradient(160deg,rgba(140,100,255,0.08),rgba(20,16,40,0.9));border:1px solid rgba(140,100,255,0.18);border-radius:var(--radius-lg);padding:16px 10px 14px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden; }
.alhq-bld-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(140,100,255,0.4),transparent);opacity:0;transition:opacity .3s; }
.alhq-bld-card:hover { transform:translateY(-4px);box-shadow:0 8px 24px rgba(140,100,255,0.2);border-color:rgba(140,100,255,0.4); }
.alhq-bld-card:hover::before { opacity:1; }
.alhq-bld-card.alhq-selected { border-color:#b388ff;background:linear-gradient(160deg,rgba(140,100,255,0.2),rgba(40,20,80,0.9));box-shadow:0 0 24px rgba(140,100,255,0.25),inset 0 0 20px rgba(140,100,255,0.06); }
.alhq-bld-card.alhq-selected::before { opacity:1;background:linear-gradient(90deg,transparent,#b388ff,transparent); }
.alhq-bld-card.alhq-locked { opacity:0.35;cursor:not-allowed;filter:grayscale(0.5); }
.alhq-bld-card.alhq-locked:hover { transform:none;box-shadow:none;border-color:rgba(140,100,255,0.18); }
.alhq-bld-card.alhq-building { border-color:rgba(224,168,48,0.5);background:linear-gradient(160deg,rgba(224,168,48,0.1),rgba(20,16,40,0.9)); }
.alhq-bld-card.alhq-building::before { opacity:1;background:linear-gradient(90deg,transparent,rgba(224,168,48,0.6),transparent);animation:alhqScanline 2s linear infinite; }
@keyframes alhqScanline { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.alhq-bld-ico { font-size:var(--fs-4xl);margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(140,100,255,0.3)); }
.alhq-bld-name { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textbright);line-height:1.4;margin-bottom:6px;min-height:30px;font-weight:600; }
.alhq-bld-lv { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:#b388ff;letter-spacing:1px;text-shadow:0 0 8px rgba(140,100,255,0.3); }
.alhq-bld-lock { position:absolute;top:8px;right:8px;font-size:var(--fs-sm);opacity:0.6; }
.alhq-bld-prog { position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--tint-4);overflow:hidden; }
.alhq-bld-prog-fill { height:100%;width:50%;background:linear-gradient(90deg,var(--gold),#ffcc00);animation:alhqProg 2s ease-in-out infinite;box-shadow:0 0 8px rgba(224,168,48,0.5); }
@keyframes alhqProg { 0%{width:20%;margin-left:0} 50%{width:60%;margin-left:20%} 100%{width:20%;margin-left:80%} }

/* === Detail panel === */
.alhq-detail { background:linear-gradient(145deg,rgba(140,100,255,0.1),rgba(20,14,40,0.95),rgba(140,100,255,0.03));border:1px solid rgba(140,100,255,0.3);border-radius:14px;padding:22px 24px;margin-bottom:18px;box-shadow:0 4px 20px rgba(140,100,255,0.08),inset 0 1px 0 var(--tint-4); }
.alhq-det-header { display:flex;align-items:center;gap:16px;margin-bottom:14px; }
.alhq-det-ico { font-size:38px;filter:drop-shadow(0 0 12px rgba(140,100,255,0.4)); }
.alhq-det-name { font-family:var(--font-display);font-size:var(--fs-xl);font-weight:900;color:#e8e0ff;letter-spacing:1.5px;text-shadow:0 0 12px rgba(140,100,255,0.2); }
.alhq-det-lv { font-family:var(--font-mono);font-size:var(--fs-base);color:#b388ff;margin-top:2px; }
.alhq-det-desc { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);padding:10px 14px;background:rgba(140,100,255,0.04);border-radius:0 8px 8px 0;margin-bottom:16px;line-height:1.6;  box-shadow:inset 3px 0 0 0 rgba(140,100,255,0.5); }
.alhq-det-building { font-family:var(--font-display);font-size:var(--fs-md);font-weight:900;color:var(--gold);padding:14px 18px;background:linear-gradient(135deg,rgba(224,168,48,0.12),rgba(224,168,48,0.03));border:1px solid rgba(224,168,48,0.35);border-radius:var(--radius-md);text-align:center;letter-spacing:1px;box-shadow:0 0 16px rgba(224,168,48,0.1); }
.alhq-det-cost-title { font-family:var(--font-display);font-size:var(--fs-xs);color:rgba(180,170,220,0.6);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px; }
.alhq-det-cost-grid { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
.alhq-cost-row { display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-base); }
.alhq-cost-bar-wrap { flex:1; }
.alhq-cost-bar { height:8px;background:var(--tint-3);border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 1px 3px var(--shade-1); }
.alhq-cost-fill { height:100%;background:linear-gradient(90deg,#7c4dff,#b388ff);border-radius:var(--radius-sm);transition:width .4s ease;box-shadow:0 0 6px rgba(140,100,255,0.3); }
.alhq-cost-fill.full { background:linear-gradient(90deg,#00c853,#69f0ae);box-shadow:0 0 8px rgba(0,200,100,0.4); }
.alhq-cost-nums { font-size:var(--fs-sm);color:var(--textmid);white-space:nowrap;min-width:120px;text-align:right; }
.alhq-cost-nums.full { color:#69f0ae;font-weight:700; }

/* === Fund row === */
.alhq-fund-row { display:flex;align-items:end;gap:10px;margin-bottom:14px;flex-wrap:wrap; }
.alhq-fund-row input { padding:10px;font-size:var(--fs-base);font-family:var(--font-mono);background:rgba(140,100,255,0.06);border:1px solid rgba(140,100,255,0.25);border-radius:var(--radius);color:var(--textbright);text-align:center;transition:all .2s; }
.alhq-fund-row input:focus { border-color:#b388ff;box-shadow:0 0 12px rgba(140,100,255,0.2);outline:none; }
.alhq-fund-btn { padding:10px 20px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:1px;border:1px solid #b388ff;color:#e0d0ff;background:linear-gradient(135deg,rgba(140,100,255,0.15),rgba(140,100,255,0.05));border-radius:var(--radius);cursor:pointer;transition:all .25s;white-space:nowrap; }
.alhq-fund-btn:hover { background:linear-gradient(135deg,rgba(140,100,255,0.3),rgba(140,100,255,0.1));box-shadow:0 4px 16px rgba(140,100,255,0.2);transform:translateY(-1px); }
.alhq-upgrade-btn { width:100%;padding:14px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:900;letter-spacing:3px;border:2px solid #00e676;color:var(--textbright);background:linear-gradient(135deg,rgba(0,230,118,0.2),rgba(0,230,118,0.05));border-radius:var(--radius-md);cursor:pointer;transition:all .3s;text-shadow:0 0 10px rgba(0,230,118,0.4);box-shadow:0 0 20px rgba(0,230,118,0.1); }
.alhq-upgrade-btn:hover { background:linear-gradient(135deg,rgba(0,230,118,0.35),rgba(0,230,118,0.1));transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,230,118,0.25); }

/* === Action buttons row === */
.alhq-actions { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px; }
.alhq-action-btn { padding:10px 18px;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;border:1px solid rgba(140,100,255,0.25);color:rgba(200,185,255,0.8);background:linear-gradient(135deg,rgba(140,100,255,0.08),rgba(140,100,255,0.02));border-radius:var(--radius);cursor:pointer;transition:all .25s; }
.alhq-action-btn:hover { background:linear-gradient(135deg,rgba(140,100,255,0.18),rgba(140,100,255,0.06));border-color:rgba(140,100,255,0.4);transform:translateY(-2px);box-shadow:0 4px 16px rgba(140,100,255,0.12); }

/* === Contributions === */
.alhq-contrib-list { display:flex;flex-direction:column;gap:4px; }
.alhq-contrib-row { display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(135deg,rgba(140,100,255,0.05),rgba(10,14,28,0.7));border:1px solid rgba(140,100,255,0.12);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-base);transition:all .2s; }
.alhq-contrib-row:hover { background:rgba(140,100,255,0.08);border-color:rgba(140,100,255,0.25); }
.alhq-contrib-rank { color:var(--gold2);font-family:var(--font-display);font-weight:900;width:36px;font-size:var(--fs-md);text-shadow:0 0 8px rgba(212,175,55,0.3); }
.alhq-contrib-name { color:var(--textbright);flex:1; }
.alhq-contrib-val { color:#b388ff;white-space:nowrap;font-weight:700; }

/* === Logs === */
.alhq-log-list { display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(140,100,255,0.3) transparent; }
.alhq-log-row { display:flex;align-items:center;gap:12px;padding:8px 12px;font-family:var(--font-mono);font-size:var(--fs-sm);border-bottom:1px solid rgba(140,100,255,0.06);transition:background .15s; }
.alhq-log-row:hover { background:rgba(140,100,255,0.04); }
.alhq-log-when { color:var(--textsoft);min-width:85px;font-size:var(--fs-xs); }
.alhq-log-who { color:#b388ff;min-width:85px;font-weight:700; }
.alhq-log-action { color:var(--textbright);flex:1; }
.alhq-log-detail { color:var(--textmid);font-size:var(--fs-xs); }

/* === Donate / Withdraw row === */
.alhq-donate-row { display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:12px 0; }
.alhq-withdraw-row { display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:12px 0; }
/* Sticky CTA mobile pour donate/withdraw — bouton toujours visible (M7-E) */
@media (max-width:768px) {
  .alhq-donate-row, .alhq-withdraw-row {
    position:sticky; bottom:0;
    background:linear-gradient(180deg, transparent 0%, rgba(8,12,22,0.96) 30%);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index:4;
    margin-top:12px;
    border-top:1px solid rgba(140,100,255,0.25);
    backdrop-filter:blur(8px);
  }
  .alhq-donate-row .alhq-fund-btn,
  .alhq-withdraw-row .alhq-fund-btn { min-height:44px; flex:1 1 100%; margin-top:6px; }
}

/* === Generator info === */
.alhq-gen-info { display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(135deg,rgba(255,200,0,0.08),rgba(10,14,28,0.7));border:1px solid rgba(255,200,0,0.25);border-radius:var(--radius-md);margin-bottom:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);box-shadow:0 0 16px rgba(255,200,0,0.05); }
.alhq-gen-info span { color:#ffd54f;font-weight:700;text-shadow:0 0 8px rgba(255,200,0,0.3); }

/* === Research grid === */
.alhq-research-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:18px; }
.alhq-research-card { background:linear-gradient(155deg,rgba(140,100,255,0.1),rgba(15,12,30,0.95));border:1px solid rgba(140,100,255,0.2);border-radius:14px;padding:18px;transition:all .3s;position:relative;overflow:hidden; }
.alhq-research-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(140,100,255,0.3),transparent);opacity:0;transition:opacity .3s; }
.alhq-research-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(140,100,255,0.15);border-color:rgba(140,100,255,0.4); }
.alhq-research-card:hover::before { opacity:1; }
.alhq-research-card.building { border-color:rgba(224,168,48,0.5);background:linear-gradient(155deg,rgba(224,168,48,0.1),rgba(15,12,30,0.95)); }
.alhq-research-card.building::before { opacity:1;background:linear-gradient(90deg,transparent,rgba(224,168,48,0.5),transparent);animation:alhqScanline 2s linear infinite; }
.alhq-res-head { display:flex;align-items:center;gap:12px;margin-bottom:10px; }
.alhq-res-ico { font-size:30px;filter:drop-shadow(0 2px 8px rgba(140,100,255,0.3)); }
.alhq-res-name { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:#e0d0ff;letter-spacing:1px; }
.alhq-res-lv { font-family:var(--font-mono);font-size:var(--fs-sm);color:#b388ff;margin-left:auto;white-space:nowrap; }
.alhq-res-desc { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);line-height:1.6;margin-bottom:12px; }
.alhq-res-bonus { font-family:var(--font-mono);font-size:var(--fs-base);color:#69f0ae;padding:8px 12px;background:rgba(0,220,120,0.08);border:1px solid rgba(0,220,120,0.2);border-radius:var(--radius);margin-bottom:10px;font-weight:700; }
.alhq-res-cost { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);margin-bottom:8px; }
.alhq-res-cost span { color:#b388ff;font-weight:700; }
.alhq-res-status { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;text-align:center;padding:10px;border-radius:var(--radius);letter-spacing:1.5px; }
.alhq-res-status.building { color:var(--gold);background:rgba(224,168,48,0.1);border:1px solid rgba(224,168,48,0.35);box-shadow:0 0 12px rgba(224,168,48,0.1); }
.alhq-res-status.maxed { color:#69f0ae;background:rgba(0,220,120,0.1);border:1px solid rgba(0,220,120,0.25);text-shadow:0 0 8px rgba(0,220,120,0.3); }
.alhq-res-status.locked { color:var(--textsoft);background:var(--tint-2);border:1px solid var(--tint-4); }
.alhq-res-launch-btn { width:100%;padding:12px;font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;letter-spacing:2px;border:1px solid #b388ff;color:#e0d0ff;background:linear-gradient(135deg,rgba(140,100,255,0.15),rgba(140,100,255,0.05));border-radius:var(--radius-md);cursor:pointer;transition:all .3s; }
.alhq-res-launch-btn:hover { background:linear-gradient(135deg,rgba(140,100,255,0.3),rgba(140,100,255,0.1));transform:translateY(-2px);box-shadow:0 6px 20px rgba(140,100,255,0.25); }
.alhq-bonus-summary { display:flex;flex-wrap:wrap;gap:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(0,220,120,0.06),rgba(10,14,28,0.7));border:1px solid rgba(0,220,120,0.18);border-radius:var(--radius-md);margin-bottom:16px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid); }
.alhq-bonus-summary strong { color:#69f0ae; }
.alhq-bonus-item { display:flex;align-items:center;gap:6px; }
.alhq-bonus-item span { color:#69f0ae;font-weight:700; }
.alhq-as-note { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);font-style:italic;margin-top:6px; }

/* === Shield section === */
.alhq-shield-info { display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:18px 22px;background:linear-gradient(135deg,rgba(100,180,255,0.08),rgba(10,14,28,0.7));border:1px solid rgba(100,180,255,0.25);border-radius:var(--radius-lg);margin-bottom:16px;box-shadow:0 0 20px rgba(100,180,255,0.05); }
.alhq-shield-stat { display:flex;flex-direction:column;gap:4px;min-width:160px; }
.alhq-shield-label { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);text-transform:uppercase;letter-spacing:1px; }
.alhq-shield-val { font-family:var(--font-display);font-size:18px;font-weight:900;color:#82b1ff;letter-spacing:1px;text-shadow:0 0 10px rgba(100,180,255,0.3); }
.alhq-shield-iris { font-family:var(--font-mono);font-size:var(--fs-sm);color:#ffd54f;padding:10px 14px;background:linear-gradient(135deg,rgba(224,168,48,0.1),rgba(224,168,48,0.03));border:1px solid rgba(224,168,48,0.3);border-radius:var(--radius);margin-top:4px;flex-basis:100%;box-shadow:0 0 12px rgba(224,168,48,0.08); }

/* === Barracks / troops === */
.alhq-train-status { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:var(--gold);padding:14px 18px;background:linear-gradient(135deg,rgba(224,168,48,0.12),rgba(224,168,48,0.03));border:1px solid rgba(224,168,48,0.35);border-radius:var(--radius-md);text-align:center;margin-bottom:12px;letter-spacing:1px;box-shadow:0 0 16px rgba(224,168,48,0.08); }
.alhq-troop-cap { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);margin-bottom:10px;padding:6px 12px;background:rgba(140,100,255,0.04);border-radius:6px;display:inline-block; }
.alhq-troop-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:18px; }
.alhq-troop-card { background:linear-gradient(155deg,rgba(140,100,255,0.08),rgba(15,12,30,0.95));border:1px solid rgba(140,100,255,0.18);border-radius:var(--radius-lg);padding:16px;transition:all .3s;overflow:hidden;position:relative; }
.alhq-troop-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(140,100,255,0.3),transparent);opacity:0;transition:opacity .3s; }
.alhq-troop-card:hover { border-color:rgba(140,100,255,0.35);transform:translateY(-3px);box-shadow:0 6px 20px rgba(140,100,255,0.12); }
.alhq-troop-card:hover::before { opacity:1; }
.alhq-troop-head { display:flex;align-items:center;gap:12px;margin-bottom:8px; }
.alhq-troop-ico { font-size:28px;filter:drop-shadow(0 2px 6px rgba(140,100,255,0.3)); }
.alhq-troop-name { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:#e0d0ff;letter-spacing:1px; }
.alhq-troop-stats { font-family:var(--font-mono);font-size:var(--fs-sm);color:#b388ff; }
.alhq-troop-count { font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:900;color:#ffd54f;margin-left:auto;text-shadow:0 0 12px rgba(212,175,55,0.3); }
.alhq-troop-desc { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);margin-bottom:8px;line-height:1.5; }
.alhq-troop-cost { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textsoft);margin-bottom:10px; }
.alhq-troop-train-row { display:flex;align-items:center;gap:10px; }
.alhq-train-btn { padding:9px 18px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:1px;border:1px solid #b388ff;color:#e0d0ff;background:linear-gradient(135deg,rgba(140,100,255,0.15),rgba(140,100,255,0.05));border-radius:var(--radius);cursor:pointer;transition:all .25s; }
.alhq-train-btn:hover { background:linear-gradient(135deg,rgba(140,100,255,0.3),rgba(140,100,255,0.1));transform:translateY(-1px);box-shadow:0 4px 14px rgba(140,100,255,0.2); }

/* === Garrison === */
.alhq-garrison-list { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
.alhq-garrison-owner { background:linear-gradient(135deg,rgba(140,100,255,0.06),rgba(10,14,28,0.7));border:1px solid rgba(140,100,255,0.15);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:6px; }
.alhq-garrison-owner-name { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:#e0d0ff;margin-bottom:8px;letter-spacing:0.5px; }
.alhq-garrison-row { display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);border-bottom:1px solid rgba(140,100,255,0.06); }
.alhq-garrison-row:last-child { border-bottom:none; }
.alhq-garrison-troop { color:#b388ff;font-weight:700; }
.alhq-recall-btn { padding:5px 12px;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:0.5px;border:1px solid rgba(255,180,0,0.45);color:#ffd54f;background:rgba(255,180,0,0.08);border-radius:6px;cursor:pointer;transition:all .2s; }
.alhq-recall-btn:hover { background:rgba(255,180,0,0.18);box-shadow:0 0 10px rgba(255,180,0,0.15); }
.alhq-garrison-send { padding:16px 18px;background:linear-gradient(135deg,rgba(140,100,255,0.06),rgba(10,14,28,0.7));border:1px solid rgba(140,100,255,0.18);border-radius:var(--radius-md);margin-bottom:16px; }
.alhq-garrison-send-title { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:#c8b8ff;margin-bottom:10px;letter-spacing:1.5px;text-transform:uppercase; }
.alhq-garrison-send-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }

/* === Council section === */
.alhq-council-info { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);padding:14px 18px;background:linear-gradient(135deg,rgba(224,168,48,0.08),rgba(10,14,28,0.7));border:1px solid rgba(224,168,48,0.25);border-radius:var(--radius-md);margin-bottom:12px;box-shadow:0 0 14px rgba(224,168,48,0.05); }
.alhq-council-info strong { color:#ffd54f;text-shadow:0 0 6px rgba(212,175,55,0.2); }
.alhq-roles-title { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:#c8b8ff;letter-spacing:1.5px;margin-bottom:10px;text-transform:uppercase; }
.alhq-roles-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px; }
.alhq-role-card { background:linear-gradient(155deg,rgba(224,168,48,0.06),rgba(15,12,30,0.9));border:1px solid rgba(224,168,48,0.2);border-radius:var(--radius-md);padding:12px 16px;transition:all .2s; }
.alhq-role-card:hover { border-color:rgba(224,168,48,0.35);box-shadow:0 4px 14px rgba(224,168,48,0.08); }
.alhq-role-head { display:flex;align-items:center;gap:10px;margin-bottom:6px; }
.alhq-role-ico { font-size:20px; }
.alhq-role-name { font-family:var(--font-display);font-size:var(--fs-base);font-weight:900;color:#ffd54f;flex:1;letter-spacing:0.5px; }
.alhq-role-del { background:none;border:1px solid rgba(255,60,60,0.3);color:var(--danger);font-size:var(--fs-md);cursor:pointer;padding:3px 8px;border-radius:var(--radius-sm);transition:all .2s; }
.alhq-role-del:hover { background:rgba(255,60,60,0.12);border-color:rgba(255,60,60,0.5); }
.alhq-role-edit { background:none;border:1px solid rgba(224,168,48,0.35);color:#ffd54f;font-size:var(--fs-md);cursor:pointer;padding:3px 8px;border-radius:var(--radius-sm);transition:all .2s;margin-right:4px; }
.alhq-role-edit:hover { background:rgba(224,168,48,0.14);border-color:rgba(224,168,48,0.6); }

/* ── Alliance Beacons (Sprint D-1) ─────────────────────────── */
/* Gating cards : 3 conditions side-by-side avec progress bars */
.alhq-gate-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:14px 0 10px;
}
.alhq-gate-card {
  position:relative;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--tint-3), var(--shade-2));
  border:1px solid var(--tint-6);
  
  border-radius:var(--radius);
  transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
 box-shadow:inset 3px 0 0 0 var(--danger); }
.alhq-gate-card:hover { transform:translateY(-1px); border-color:var(--tint-8); }
.alhq-gate-card.ok { border-left-color:var(--success); box-shadow:0 0 18px -10px rgba(80,220,120,0.6); }
.alhq-gate-card.ko { box-shadow:0 0 18px -10px rgba(255,60,60,0.4); }
.alhq-gate-card-head {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:1px; text-transform:uppercase;
}
.alhq-gate-card-ico { font-size:var(--fs-lg); line-height:1; }
.alhq-gate-card-lbl { flex:1; color:var(--textbright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alhq-gate-card-badge {
  width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--fs-base); font-weight:700;
}
.alhq-gate-card.ok .alhq-gate-card-badge { background:rgba(80,220,120,0.15); color:var(--success); border:1px solid rgba(80,220,120,0.5); }
.alhq-gate-card.ko .alhq-gate-card-badge { background:rgba(255,60,60,0.12); color:var(--danger); border:1px solid rgba(255,60,60,0.45); }
.alhq-gate-card-bar { height:5px; background:var(--shade-3); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.alhq-gate-card-fill {
  height:100%; border-radius:3px; transition:width 0.4s ease;
  background:linear-gradient(90deg, var(--danger), #ff8888);
}
.alhq-gate-card.ok .alhq-gate-card-fill { background:linear-gradient(90deg, var(--success), #a8f0c0); }
.alhq-gate-card-fill.ok { background:linear-gradient(90deg, var(--success), #a8f0c0); }
.alhq-gate-card-val { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textbright); }
.alhq-gate-card-val span { color:var(--textsoft); }

/* Quota cards */
.alhq-quota-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin:6px 0 16px;
}
.alhq-quota-card {
  padding:10px 14px;
  background:var(--shade-1);
  border:1px solid var(--tint-5);
  border-radius:var(--radius);
}
.alhq-quota-head {
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:1px; text-transform:uppercase;
  color:var(--textsoft); margin-bottom:6px;
}
.alhq-quota-val { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textbright); }
.alhq-quota-val span { color:var(--textsoft); font-size:var(--fs-sm); }
.alhq-quota-hint { font-family:var(--font-body); font-size:var(--fs-xs); color:var(--textsoft); font-style:italic; margin-top:5px; }

/* Responsive : mobile = 1 col */
@media (max-width: 720px) {
  .alhq-gate-grid, .alhq-quota-grid { grid-template-columns:1fr; }
}

/* Legacy classes (gardées si utilisées ailleurs) */
.alhq-beacons-gate { display:flex;flex-wrap:wrap;gap:8px;margin:10px 0; }
.alhq-gate-pill { font-family:var(--font-mono);font-size:var(--fs-sm);padding:4px 10px;border-radius:14px;border:1px solid; }
.alhq-gate-pill.ok { color:var(--success);border-color:rgba(80,220,120,0.4);background:rgba(80,220,120,0.08); }
.alhq-gate-pill.ko { color:var(--danger);border-color:rgba(255,60,60,0.4);background:rgba(255,60,60,0.08); }
.alhq-beacons-quota { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textsoft);margin:6px 0 14px; }
.alhq-beacons-list { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:10px 0; }
.alhq-beacon-card { padding:14px;background:linear-gradient(135deg,rgba(120,180,255,0.05),rgba(10,14,28,0.7));border:1px solid rgba(120,180,255,0.22);border-radius:var(--radius-md); }
.alhq-beacon-card.alhq-beacon-enemy { border-color:rgba(255,80,80,0.3);background:linear-gradient(135deg,rgba(255,80,80,0.05),rgba(10,14,28,0.7)); }
.alhq-beacon-head { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.alhq-beacon-ico { font-size:18px; }
.alhq-beacon-name { font-family:var(--font-display);font-weight:900;color:#ffd54f;font-size:var(--fs-base);letter-spacing:0.5px;flex:1; }
.alhq-beacon-lv, .alhq-beacon-tag { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft); }
.alhq-beacon-coords, .alhq-beacon-hp, .alhq-beacon-upkeep { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textbright);margin:2px 0; }
.alhq-beacon-inactive { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--danger);margin:4px 0;font-weight:bold; }
.alhq-beacon-desc { font-family:var(--font-mono);font-size:10px;color:var(--textsoft);margin-top:6px;line-height:1.4; }
.alhq-beacon-actions { display:flex;gap:6px;margin-top:8px;flex-wrap:wrap; }
.alhq-beacon-form-row { display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;align-items:center;font-family:var(--font-mono);font-size:var(--fs-sm); }
.alhq-beacon-form-row input, .alhq-beacon-form-row select { padding:6px 8px;background:rgba(var(--accent-rgb),0.06);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:5px;color:var(--textbright);font-family:var(--font-mono);font-size:var(--fs-sm); }
@media (max-width: 600px) {
  .alhq-beacon-form-row { flex-direction:column; gap:8px; align-items:stretch; }
  .alhq-beacon-form-row label,
  .alhq-beacon-form-row > * { width:100%; max-width:none; box-sizing:border-box; }
  .alhq-beacon-form-row input,
  .alhq-beacon-form-row select { width:100%; box-sizing:border-box; }
}
.alhq-beacon-cost { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);margin:6px 0; }
.gal-beacon-bar { display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;align-items:center; }
.gal-beacon-pill { font-family:var(--font-mono);font-size:var(--fs-xs);padding:3px 10px;border-radius:14px;border:1px solid;display:inline-flex;align-items:center;gap:6px;position:relative;transition:transform 0.2s; }
.gal-beacon-pill:hover { transform:scale(1.04); }
.gal-beacon-mine  { color:var(--success);border-color:rgba(80,220,120,0.45);background:rgba(80,220,120,0.08);animation:beaconPulseMine  2.6s ease-in-out infinite; }
.gal-beacon-enemy { color:var(--danger); border-color:rgba(255,80,80,0.45); background:rgba(255,80,80,0.08); animation:beaconPulseEnemy 1.8s ease-in-out infinite; }
.gal-beacon-pill.gal-beacon-critical { animation-duration:0.8s; } /* HP < 30% — pulsation accélérée */
@keyframes beaconPulseMine {
  0%, 100% { box-shadow:0 0 0 0 rgba(80,220,120,0); }
  50%      { box-shadow:0 0 12px 2px rgba(80,220,120,0.32); }
}
@keyframes beaconPulseEnemy {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,80,80,0); }
  50%      { box-shadow:0 0 14px 3px rgba(255,80,80,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .gal-beacon-mine, .gal-beacon-enemy { animation:none; }
}
.gal-beacon-attack { background:rgba(255,60,60,0.18);border:1px solid rgba(255,60,60,0.5);color:#fff;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;cursor:pointer;margin-left:4px; }
.gal-beacon-attack:hover { background:rgba(255,60,60,0.32); }
.alhq-role-perms { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);line-height:1.6; }
.alhq-role-form,.alhq-motd-form { padding:16px 18px;background:linear-gradient(135deg,rgba(224,168,48,0.06),rgba(10,14,28,0.7));border:1px solid rgba(224,168,48,0.18);border-radius:var(--radius-md);margin-bottom:14px; }
.alhq-role-form-title { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:#c8b8ff;letter-spacing:1.5px;margin-bottom:10px;text-transform:uppercase; }
.alhq-role-form-row { display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap; }
.alhq-perm-checks { display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px; }
.alhq-perm-check { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textmid);display:flex;align-items:center;gap:5px;cursor:pointer;transition:color .15s; }
.alhq-perm-check:hover { color:var(--textbright); }
.alhq-perm-check input[type=checkbox] { accent-color:#b388ff;width:16px;height:16px; }

/* === MOTD === */
.alhq-motd { padding:14px 18px;background:linear-gradient(135deg,rgba(140,100,255,0.08),rgba(10,14,28,0.7));border:1px solid rgba(140,100,255,0.25);border-radius:var(--radius-md);margin-bottom:14px;display:flex;align-items:center;gap:12px;box-shadow:0 0 14px rgba(140,100,255,0.05); }
.alhq-motd-label { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:900;color:#b388ff;white-space:nowrap;letter-spacing:1px; }
.alhq-motd-text { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textbright);flex:1; }

/* === Relay section === */
.alhq-relay-info { display:flex;flex-direction:column;gap:10px;padding:18px 22px;background:linear-gradient(135deg,rgba(0,200,255,0.07),rgba(10,14,28,0.7));border:1px solid rgba(0,200,255,0.25);border-radius:var(--radius-lg);margin-bottom:16px;box-shadow:0 0 20px rgba(0,200,255,0.05); }
.alhq-relay-stat { display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid); }
.alhq-relay-stat strong { color:#82b1ff;text-shadow:0 0 6px rgba(100,180,255,0.3); }
.alhq-relay-ico { font-size:20px;width:28px;text-align:center;flex-shrink:0; }
.alhq-relay-active { color:#69f0ae;background:rgba(0,220,120,0.06);padding:8px 12px;border-radius:var(--radius);border:1px solid rgba(0,220,120,0.18); }
.alhq-relay-active strong { color:#69f0ae;text-shadow:0 0 8px rgba(0,220,120,0.3); }

/* === Audit UI additions === */
.alhq-coords-link { cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;color:rgba(180,170,220,0.9);transition:color .2s; }
.alhq-coords-link:hover { color:#b388ff;text-shadow:0 0 8px rgba(140,100,255,0.4); }

.alhq-summary-bar { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px; }
/* — HQ sub-tabs (T3) — */
.alhq-subtab-bar { display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid rgba(140,100,255,0.22);padding-bottom:0;flex-wrap:wrap; }
.alhq-subtab-pill { position:relative;padding:10px 16px;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:1.1px;color:var(--textsoft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;display:flex;align-items:center;gap:6px; }
.alhq-subtab-pill:hover { color:var(--textbright);background:rgba(140,100,255,0.08); }
.alhq-subtab-pill.active { color:var(--accent);border-bottom-color:var(--accent); }
.alhq-subtab-badge { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:var(--warn);color:var(--bg);border-radius:9px;font-size:10px;font-weight:900; }
.alhq-empty-hint { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textsoft);padding:24px;text-align:center;background:rgba(10,18,32,0.4);border:1px dashed var(--tint-7);border-radius:var(--radius);margin:12px 0;font-style:italic; }
@media (max-width: 680px) { .alhq-subtab-pill { padding:8px 10px;font-size:10px; } }
.alhq-sum-item { display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 16px;background:linear-gradient(145deg,rgba(140,100,255,0.1),rgba(10,14,28,0.8));border:1px solid rgba(140,100,255,0.2);border-radius:var(--radius-md);min-width:80px;transition:all .2s; }
.alhq-sum-item:hover { border-color:rgba(140,100,255,0.4);transform:translateY(-2px);box-shadow:0 4px 14px rgba(140,100,255,0.12); }
.alhq-sum-item.alhq-sum-active { border-color:rgba(224,168,48,0.4);background:linear-gradient(145deg,rgba(224,168,48,0.1),rgba(10,14,28,0.8)); }
.alhq-sum-val { font-family:var(--font-display);font-size:var(--fs-lg);font-weight:900;color:#e0d0ff;letter-spacing:0.5px;text-shadow:0 0 8px rgba(140,100,255,0.2); }
.alhq-sum-active .alhq-sum-val { color:#ffd54f;text-shadow:0 0 8px rgba(224,168,48,0.3); }
.alhq-sum-label { font-family:var(--font-mono);font-size:10px;color:var(--textsoft);text-transform:uppercase;letter-spacing:1px; }

.alhq-bld-prereq { font-family:var(--font-mono);font-size:9px;color:var(--textsoft);margin-top:4px;line-height:1.4;padding:0 4px; }

.alhq-src-label { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textsoft);margin-bottom:8px;padding:8px 12px;background:rgba(140,100,255,0.04);border:1px solid rgba(140,100,255,0.1);border-radius:6px; }

.alhq-fill-btn { padding:10px 16px;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:1px;border:1px solid rgba(0,230,118,0.4);color:#69f0ae;background:rgba(0,230,118,0.08);border-radius:var(--radius);cursor:pointer;transition:all .25s;white-space:nowrap; }
.alhq-fill-btn:hover { background:rgba(0,230,118,0.18);box-shadow:0 0 12px rgba(0,230,118,0.2);transform:translateY(-1px); }

.alhq-max-btn { padding:6px 12px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.5px;border:1px solid rgba(255,200,0,0.4);color:#ffd54f;background:rgba(255,200,0,0.08);border-radius:6px;cursor:pointer;transition:all .2s;white-space:nowrap; }
.alhq-max-btn:hover { background:rgba(255,200,0,0.18);box-shadow:0 0 10px rgba(255,200,0,0.15); }

/* === Merveille d'Alliance === */
.alhq-wonder-hero { display:flex;align-items:center;gap:18px;padding:18px 20px;margin:4px 0 12px;border:1px solid rgba(212,175,55,0.28);border-radius:14px;background:linear-gradient(135deg,rgba(8,22,46,0.92),rgba(20,40,72,0.7) 55%,rgba(60,46,12,0.5));box-shadow:inset 0 1px 0 rgba(120,200,255,0.12),0 0 24px rgba(40,120,200,0.12); }
.alhq-wonder-sigil { font-size:46px;line-height:1;filter:drop-shadow(0 0 14px rgba(120,200,255,0.55));flex-shrink:0; }
.alhq-wonder-meta { display:flex;flex-direction:column;gap:4px;min-width:0; }
.alhq-wonder-tier { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:1.5px;color:#7fdbff;text-transform:uppercase; }
.alhq-wonder-bonus { font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:900;color:var(--gold2);text-shadow:0 0 16px rgba(212,175,55,0.4);line-height:1.05; }
.alhq-wonder-sub { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft); }
.alhq-wonder-desc { font-size:var(--fs-base);color:var(--textmid);line-height:1.55;margin-bottom:14px;padding:0 2px; }
.alhq-wonder-maxed { margin:14px 0;padding:14px 16px;text-align:center;font-family:var(--font-display);font-weight:700;letter-spacing:1px;color:#69f0ae;border:1px solid rgba(0,230,118,0.35);border-radius:var(--radius-md);background:rgba(0,230,118,0.07); }
@media (max-width:560px){ .alhq-wonder-hero{gap:14px;padding:14px;}.alhq-wonder-sigil{font-size:36px;}.alhq-wonder-bonus{font-size:21px;} }

.alhq-recall-inline { display:flex;align-items:center;gap:6px; }
.alhq-recall-input { width:55px;padding:4px 6px;font-size:var(--fs-sm);font-family:var(--font-mono);background:rgba(255,180,0,0.06);border:1px solid rgba(255,180,0,0.25);border-radius:5px;color:var(--textbright);text-align:center; }
.alhq-recall-input:focus { border-color:rgba(255,180,0,0.5);outline:none;box-shadow:0 0 8px rgba(255,180,0,0.15); }

.alhq-contrib-res { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textmid);white-space:nowrap;display:flex;align-items:center;gap:3px; }
.alhq-contrib-bar-wrap { height:4px;background:var(--tint-2);border-radius:2px;overflow:hidden;margin:-2px 14px 6px 48px; }
.alhq-contrib-bar { height:100%;background:linear-gradient(90deg,#7c4dff,#b388ff);border-radius:2px;transition:width .4s ease;box-shadow:0 0 6px rgba(140,100,255,0.3); }

.al-tab-badge { position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger);animation:alTabPulse 1.5s infinite; }
/* Header card */
.al-header-card { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.1),rgba(10,18,32,0.95));border:1px solid rgba(var(--accent-rgb),0.25);border-radius:var(--radius-lg);padding:18px 22px;display:flex;align-items:center;gap:18px;margin-bottom:16px;box-shadow:0 4px 20px var(--shade-1); }
/* — Alliance Dashboard (T1) — */
.al-dash-head { display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:radial-gradient(ellipse at 0% 0%,rgba(var(--accent-rgb),0.15),transparent 60%),linear-gradient(135deg,rgba(var(--accent-rgb),0.08),rgba(10,18,32,0.95));border:1px solid rgba(var(--accent-rgb),0.3);border-radius:14px;padding:20px 24px;margin-bottom:16px;position:relative;overflow:hidden; }
.al-dash-head::before { content:''; position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 10px rgba(var(--accent-rgb),0.4); }
.al-dash-tag { font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--gold);padding:10px 16px;border:2px solid var(--gold);border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(224,168,48,0.15),rgba(224,168,48,0.05));letter-spacing:2px;text-shadow:0 0 12px rgba(224,168,48,0.4);box-shadow:0 0 16px rgba(224,168,48,0.15),inset 0 0 10px rgba(224,168,48,0.05); }
.al-dash-title { flex:1 1 200px;min-width:min(200px,100%); }
.al-dash-name { font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--textbright);letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px rgba(var(--accent-rgb),0.3); }
.al-dash-sub { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textmid);margin-top:5px;letter-spacing:0.5px; }
.al-dash-edit-btn { background:rgba(var(--accent-rgb),0.14);border:1px solid rgba(var(--accent-rgb),0.45);color:var(--accent);padding:10px 16px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:all .18s; }
.al-dash-edit-btn:hover { background:rgba(var(--accent-rgb),0.24);box-shadow:0 0 14px rgba(var(--accent-rgb),0.35);transform:translateY(-1px); }
.al-motd-banner { background:linear-gradient(90deg,rgba(224,168,48,0.14),rgba(10,18,32,0.6));border:1px solid rgba(224,168,48,0.4);border-radius:var(--radius-md);padding:16px 22px;margin-bottom:16px;box-shadow:inset 3px 0 0 0 var(--gold), 0 0 16px rgba(224,168,48,0.08); }
.al-motd-banner.al-motd-empty { border-color:var(--tint-5);border-left-color:rgba(255,255,255,0.3);background:rgba(20,28,44,0.6);box-shadow:none; }
.al-motd-label { font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px; }
.al-motd-banner.al-motd-empty .al-motd-label { color:var(--textsoft); }
.al-motd-text { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);line-height:1.6;white-space:pre-wrap;word-break:break-word; }
.al-motd-banner.al-motd-empty .al-motd-text { color:var(--textsoft);font-style:italic; }
/* ── Stratégie & Conseils — bannière secondaire (accent rouge tactique) ── */
.al-strategy-banner { background:linear-gradient(90deg,rgba(229,80,57,0.14),rgba(10,18,32,0.6));border:1px solid rgba(229,80,57,0.4);border-radius:var(--radius-md);padding:16px 22px;margin-bottom:16px;box-shadow:inset 3px 0 0 0 #e55039, 0 0 16px rgba(229,80,57,0.10); }
.al-strategy-banner.al-motd-empty { border-color:var(--tint-5);border-left-color:rgba(255,255,255,0.3);background:rgba(20,28,44,0.6);box-shadow:none; }
.al-strategy-banner .al-motd-label { color:#ff7a5c; }
.al-strategy-banner.al-motd-empty .al-motd-label { color:var(--textsoft); }
.al-strategy-banner.al-motd-empty .al-motd-text { color:var(--textsoft);font-style:italic; }
.al-dash-edit-group { display:flex;gap:8px;flex-wrap:wrap; }
.al-dash-edit-btn.al-dash-edit-strat { background:rgba(229,80,57,0.16);border-color:rgba(229,80,57,0.45);color:#ff7a5c; }
.al-dash-edit-btn.al-dash-edit-strat:hover { background:rgba(229,80,57,0.26);box-shadow:0 0 14px rgba(229,80,57,0.4); }
.al-strategy-modal { border-color:rgba(229,80,57,0.4); }
.al-motd-btn.al-motd-btn-primary.al-strategy-save { background:linear-gradient(135deg,#e55039,#c0392b);border-color:#e55039; }
.al-kpi-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px; }
.al-kpi-tile { background:linear-gradient(180deg,rgba(8,14,28,0.8),rgba(6,10,22,0.8));border:1px solid rgba(var(--accent-rgb),0.22);border-radius:var(--radius-md);padding:16px 10px;text-align:center;transition:all 0.2s;backdrop-filter:blur(6px); }
.al-kpi-tile:hover { border-color:rgba(var(--accent-rgb),0.45);transform:translateY(-2px);box-shadow:0 6px 18px var(--shade-1), 0 0 14px rgba(var(--accent-rgb),0.1); }
.al-kpi-val { font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:900;color:var(--accent2);text-shadow:0 0 10px rgba(var(--accent-rgb),0.25);letter-spacing:0.5px; }
.al-kpi-lbl { font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--textsoft);margin-top:6px;letter-spacing:1.5px;text-transform:uppercase; }
@media (max-width: 900px) { .al-kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 540px) { .al-kpi-grid { grid-template-columns:repeat(2,1fr); } .al-dash-head { flex-wrap:wrap; } }
.al-kpi-bar { margin-top:6px;height:4px;background:rgba(10,18,32,0.8);border-radius:2px;overflow:hidden; }
.al-kpi-bar-fill { height:100%;transition:width 0.3s ease; }
.al-dash-roles-sec { margin-top:14px; }
.al-dash-roles-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px; }
.al-dash-role-card { background:rgba(10,18,32,0.6);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:var(--radius);padding:10px 12px; }
.al-dash-role-card:hover { border-color:rgba(var(--accent-rgb),0.4); }
.al-dash-role-head { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.al-dash-role-ico { font-size:18px; }
.al-dash-role-name { flex:1;font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;color:var(--textbright); }
.al-dash-role-count { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);background:rgba(var(--accent-rgb),0.15);padding:2px 7px;border-radius:var(--radius-md); }
.al-dash-role-holders { display:flex;flex-wrap:wrap;gap:4px; }
.al-dash-role-holder { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);background:rgba(var(--accent-rgb),0.1);padding:2px 7px;border-radius:var(--radius-sm);cursor:pointer; }
.al-dash-role-holder:hover { background:rgba(var(--accent-rgb),0.22); }
.al-dash-role-empty { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);font-style:italic; }
.alhq-role-ico-preview { display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;font-size:20px;background:rgba(var(--accent-rgb),0.12);border:1px solid rgba(var(--accent-rgb),0.3);border-radius:6px; }
.alhq-role-ico-picker { display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;max-width:360px; }
.alhq-role-ico-btn { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:16px;background:rgba(10,18,32,0.7);border:1px solid rgba(var(--accent-rgb),0.2);border-radius:5px;cursor:pointer;color:var(--textbright);transition:all 0.15s; }
.alhq-role-ico-btn:hover { background:rgba(var(--accent-rgb),0.15);border-color:rgba(var(--accent-rgb),0.5); }
.alhq-role-ico-btn.active { background:rgba(var(--accent-rgb),0.25);border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.2); }
.al-dash-feed-sec { margin-top:8px; }
.al-feed-list { display:flex;flex-direction:column;gap:6px;max-height:460px;overflow-y:auto; }
.al-feed-item { display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(10,18,32,0.5);border:1px solid rgba(var(--accent-rgb),0.12);border-radius:6px;padding:8px 12px; }
.al-feed-item:hover { border-color:rgba(var(--accent-rgb),0.3);background:rgba(10,18,32,0.7); }
.al-feed-txt { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textbright);flex:1;line-height:1.4; }
.al-feed-txt b { color:var(--accent);font-weight:700; }
.al-feed-time { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);white-space:nowrap; }
.al-feed-empty { font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textsoft);padding:24px;text-align:center;background:rgba(10,18,32,0.4);border-radius:6px; }
.al-feed-scroll { display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto;padding-right:4px; }
.al-feed-day-sep { font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:2.5px;color:var(--accent2);text-transform:uppercase;padding:10px 0 6px;border-bottom:1px solid rgba(var(--accent-rgb),0.18);margin-top:4px;position:sticky;top:0;background:linear-gradient(180deg,rgba(8,14,28,0.95),rgba(8,14,28,0.6));backdrop-filter:blur(4px);z-index:1; }
.al-feed-day-sep:first-child { margin-top:0; }
.al-feed-toggle { margin-top:10px;padding:10px;text-align:center;font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:2px;color:var(--accent2);background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:6px;cursor:pointer;transition:all 0.18s; }
.al-feed-toggle:hover { background:rgba(var(--accent-rgb),0.16);border-color:rgba(var(--accent-rgb),0.4); }
/* — MOTD Modal — */
.al-motd-modal-overlay { position:fixed;inset:0;background:rgba(5,10,18,0.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:var(--z-overlay-fullscreen);animation:alMotdFadeIn .18s ease-out; }
@keyframes alMotdFadeIn { from { opacity:0; } to { opacity:1; } }
.al-motd-modal { width:min(560px,92vw);background:linear-gradient(145deg,rgba(20,28,44,0.98),rgba(10,18,32,0.98));border:1px solid rgba(var(--accent-rgb),0.4);border-radius:var(--radius-lg);box-shadow:0 12px 48px var(--shade-3),0 0 30px rgba(var(--accent-rgb),0.15);overflow:hidden;animation:alMotdSlideIn .22s ease-out; }
@keyframes alMotdSlideIn { from { transform:translateY(20px) scale(0.96); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.al-motd-modal-head { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(var(--accent-rgb),0.2);background:linear-gradient(90deg,rgba(var(--accent-rgb),0.12),transparent); }
.al-motd-modal-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);letter-spacing:1px; }
.al-motd-modal-close { background:transparent;border:none;color:var(--textsoft);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s; }
.al-motd-modal-close:hover { color:var(--danger);background:rgba(230,60,60,0.12); }
.al-motd-modal-body { padding:18px; }
.al-motd-modal-hint { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textsoft);margin-bottom:10px; }
.al-motd-modal-ta { width:100%;min-height:120px;max-height:240px;resize:vertical;background:rgba(5,10,18,0.8);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:6px;padding:10px 12px;color:var(--textbright);font-family:var(--font-mono);font-size:var(--fs-md);line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box; }
.al-motd-modal-ta:focus { border-color:rgba(var(--accent-rgb),0.7);box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.15); }
.al-motd-modal-counter { text-align:right;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);margin-top:6px; }
.al-motd-modal-foot { display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid rgba(var(--accent-rgb),0.15);background:rgba(5,10,18,0.4); }
.al-motd-btn { padding:8px 16px;border-radius:6px;font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:1px;cursor:pointer;transition:all .15s;border:1px solid transparent; }
.al-motd-btn-ghost { background:transparent;border-color:rgba(255,255,255,0.2);color:var(--textsoft); }
.al-motd-btn-ghost:hover { border-color:rgba(255,255,255,0.4);color:var(--textbright); }
.al-motd-btn-primary { background:rgba(var(--accent-rgb),0.18);border-color:rgba(var(--accent-rgb),0.6);color:var(--accent); }
.al-motd-btn-primary:hover { background:rgba(var(--accent-rgb),0.3);box-shadow:0 0 14px rgba(var(--accent-rgb),0.4); }
/* — Role groups (T2) — */
.al-role-group { margin-bottom:18px; }
.al-role-group-head { display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid rgba(var(--accent-rgb),0.25);margin-bottom:6px; }
.al-role-group-icon { font-size:16px; }
.al-role-group-title { font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:var(--accent);letter-spacing:1.2px;text-transform:uppercase;flex:1; }
.al-role-group-count { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);background:rgba(var(--accent-rgb),0.12);padding:2px 8px;border-radius:var(--radius-md); }
.al-role-group-empty { font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--textsoft);padding:8px 14px;font-style:italic;opacity:0.7; }
/* — No Alliance tabs (T6) — */
.al-nt-bar { display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid rgba(var(--accent-rgb),0.2);padding-bottom:0; }
.al-nt-pill { position:relative;padding:10px 18px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:1.2px;color:var(--textsoft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;display:flex;align-items:center;gap:6px; }
.al-nt-pill:hover { color:var(--textbright); }
.al-nt-pill.active { color:var(--accent);border-bottom-color:var(--accent); }
.al-nt-pill.highlight:not(.active) { color:var(--gold); }
.al-nt-pill.highlight:not(.active)::after { content:'';position:absolute;top:8px;right:6px;width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 6px var(--gold);animation:alNtPulse 1.8s ease-in-out infinite; }
@keyframes alNtPulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.al-nt-count { display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;background:rgba(var(--accent-rgb),0.18);color:var(--accent);border-radius:var(--radius-md);font-size:10px; }
.al-nt-pill.active .al-nt-count { background:var(--accent);color:var(--bg); }
.al-nt-empty { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);padding:30px 20px;text-align:center;background:rgba(10,18,32,0.4);border-radius:var(--radius);border:1px dashed var(--tint-4); }
.al-nt-invites { padding:6px 0; }
.al-nt-inv-item { display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(10,18,32,0.5);border:1px solid rgba(224,168,48,0.25);border-radius:var(--radius);margin-bottom:8px;  box-shadow:inset 3px 0 0 0 var(--gold); }
.al-nt-inv-info { flex:1;min-width:0; }
.al-nt-inv-name { font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;color:var(--textbright); }
.al-nt-inv-sub { font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--textsoft);margin-top:2px; }
.al-nt-inv-btn { font-size:var(--fs-sm);padding:6px 12px; }
.al-hc-tag { font-family:var(--font-display);font-size:18px;font-weight:900;color:var(--gold);padding:8px 14px;border:2px solid var(--gold);border-radius:var(--radius);background:rgba(224,168,48,0.08);text-shadow:0 0 10px rgba(224,168,48,0.3); }
.al-hc-info { flex:1; }
.al-hc-name { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);letter-spacing:1px; }
.al-hc-meta { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:4px; }
.al-hc-desc { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);margin-top:6px;padding:6px 10px;background:var(--tint-2);border-radius:0 4px 4px 0;  box-shadow:inset 3px 0 0 0 var(--accent); }
.al-leave-btn { padding:8px 16px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;border-radius:6px;cursor:pointer;border:1px solid var(--danger);color:var(--danger);background:rgba(255,60,60,0.06);transition:all .2s; }
.al-leave-btn:hover { background:rgba(255,60,60,0.15);transform:translateY(-1px); }
/* Member cards */
.al-member-list { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.al-member-card { display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--tint-2),rgba(255,255,255,0.01));border:1px solid var(--tint-3);border-radius:var(--radius);padding:10px 14px;transition:all .25s; }
.al-member-card:hover { transform:translateY(-2px);box-shadow:0 4px 15px rgba(var(--accent-rgb),0.12);border-color:rgba(var(--accent-rgb),0.25); }
.al-mc-icon { font-size:var(--fs-md);width:20px;text-align:center;flex-shrink:0; }
.al-mc-name { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);flex:1; }
.al-mc-role { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;color:var(--textsoft);padding:3px 8px;border:1px solid var(--tint-7);border-radius:var(--radius-md);background:var(--tint-2); }
.al-mc-act { min-height:36px;padding:8px 12px;font-size:var(--fs-md);border:1px solid var(--tint-9);color:var(--textmid);background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s; }
.al-mc-act:hover { background:var(--tint-4); }
.al-mc-kick { border-color:rgba(255,60,60,0.4);color:var(--danger); }
.al-mc-kick:hover { background:rgba(255,60,60,0.12); }
.al-mc-role-sel { padding:4px 8px;font-family:var(--font-mono);font-size:var(--fs-sm);background:rgba(140,100,255,0.08);border:1px solid rgba(140,100,255,0.3);border-radius:6px;color:#b388ff;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;min-width:120px; }
.al-mc-role-sel:hover { border-color:rgba(140,100,255,0.5);background:rgba(140,100,255,0.12); }
.al-mc-role-sel option { background:var(--surface2);color:var(--text); }
.al-mc-pts { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold2);white-space:nowrap;margin-left:auto; }
.al-mc-afk { font-family:var(--font-mono);font-size:var(--fs-xs);white-space:nowrap;padding:2px 7px;border-radius:var(--radius);letter-spacing:0.3px; }
.al-afk-ok { color:var(--textsoft);background:var(--tint-2);border:1px solid var(--tint-4); }
.al-afk-warn { color:#ffbb44;background:rgba(255,187,68,0.08);border:1px solid rgba(255,187,68,0.25); }
.al-afk-danger { color:#ff5555;background:rgba(255,85,85,0.08);border:1px solid rgba(255,85,85,0.25);animation:alAfkPulse 2s ease-in-out infinite; }
@keyframes alAfkPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.al-hc-online { color:var(--success);font-weight:bold; }
/* Presence dot */
.al-presence-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s; }
.al-presence-dot.al-online { background:var(--success);box-shadow:0 0 6px rgba(0,200,100,0.6);animation:alPulseOnline 2s infinite; }
.al-presence-dot.al-offline { background:var(--tint-9); }
/* Invite card */
.al-invite-card { margin-top:14px;padding:14px 16px;border-top:1px solid rgba(255,255,255,0.07);background:var(--tint-1);border-radius:0 0 8px 8px; }
/* Chat */
.al-chat-container { background:linear-gradient(180deg,rgba(4,8,15,0.8),rgba(4,8,15,0.55));border:1px solid var(--border);border-radius:var(--radius-lg);height:calc(100dvh - 360px);height:calc(var(--vvh, 100dvh) - 360px);min-height:280px;max-height:880px;overflow-y:auto;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 30px rgba(0,0,0,0.25); }
@media (max-width:760px){ .al-chat-container { height:calc(100dvh - 280px); height:calc(var(--vvh, 100dvh) - 280px); min-height:280px; } }
@media (max-width:480px){ .al-chat-container { height:calc(100dvh - 240px); height:calc(var(--vvh, 100dvh) - 240px); min-height:240px; } }
/* ── Chat compact mobile/tablette (lisibilité — refonte) ──
   Sélecteurs scopés sous .al-chat-container pour passer devant les règles
   de base (.al-chat-msg…) déclarées PLUS BAS dans ce fichier — les media
   queries n'ajoutent pas de spécificité, seul l'ordre/spécificité tranche. */
@media (max-width:760px){
  .al-chat-container { gap:3px; padding:10px; }
  .al-chat-container .al-chat-msg { gap:8px; padding:6px 8px; font-size:13.5px; margin-bottom:0; }
  .al-chat-container .al-chat-line1 { flex-wrap:nowrap; min-width:0; gap:5px; }
  .al-chat-container .al-chat-name { min-width:0; font-size:var(--fs-base); letter-spacing:0.3px; text-shadow:none; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .al-chat-container .al-chat-name .chat-cos-title { letter-spacing:0.5px; font-size:8px; font-weight:700; padding:1px 5px; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; flex:0 1 auto; }
  .al-chat-container .al-chat-ts { font-size:10px; flex:none; margin-left:auto; }
  .al-chat-container .al-chat-body { font-size:13.5px; }
  .al-chat-container .al-chat-msg.al-chat-bundled { padding:1px 8px 1px 50px; }
  .al-chat-container .al-chat-msg.al-chat-bundled .al-chat-body { font-size:var(--fs-base); }
}
@media (max-width:480px){
  .al-chat-container { gap:2px; padding:8px; }
  .al-chat-container .al-chat-av, .al-chat-container .al-chat-av.cos-frame, .al-chat-container .sgc-avatar-cosmetic > .al-chat-av { width:30px !important; height:30px !important; }
  .al-chat-container .sgc-avatar-cosmetic::before { filter:blur(4px) !important; opacity:0.6; }
  .al-chat-container .sgc-avatar-cosmetic::after { box-shadow:none !important; }
  .al-chat-container .al-chat-name .chat-cos-title { max-width:34vw; }
  .al-chat-container .al-chat-msg.al-chat-bundled { padding:1px 8px 1px 42px; }
}
.al-chat-msg { display:flex; gap:10px; font-family:var(--font-body);font-size:var(--fs-lg);font-weight:500;color:var(--textmid);padding:9px 12px;border-radius:var(--radius-md);line-height:1.5;margin-bottom:2px;transition:all .18s; align-items:flex-start; border-left:2px solid transparent; }
/* CH3 audit Major 27/05 — top margin sur non-bundled = visual breathing entre senders */
.al-chat-msg:not(.al-chat-bundled) { margin-top:6px; }
.al-chat-msg.al-chat-bundled + .al-chat-msg:not(.al-chat-bundled) { margin-top:10px; }
.al-chat-msg:hover { background:rgba(255,255,255,0.035); border-left-color:rgba(var(--accent-rgb),0.3); }
.al-chat-msg.self { background:linear-gradient(90deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.02)); border-left-color:var(--accent); }
.al-chat-msg.self:hover { background:linear-gradient(90deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05)); }
.al-chat-av { border-radius:50%; overflow:hidden; background:var(--shade-1); }
.al-chat-av img, .al-chat-av canvas, .al-chat-av svg { width:100%; height:100%; object-fit:cover; }
.al-chat-bubble { flex:1; min-width:0; }
.al-chat-line1 { display:flex; align-items:center; gap:6px; margin-bottom:2px; flex-wrap:wrap; }
.al-chat-name { color:var(--accent2);font-family:var(--font-body);font-weight:700;font-size:var(--fs-md);letter-spacing:0.8px;cursor:pointer;text-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.al-chat-name:hover { text-decoration:underline; color:var(--accent); }
.al-chat-body { color:var(--textmid); word-wrap:break-word; word-break:break-word; font-size:var(--fs-lg); font-weight:500; }
.al-chat-ts { color:var(--textsoft);font-size:var(--fs-xs);margin-left:auto;font-family:var(--font-mono);opacity:0.7; white-space:nowrap; }
.al-chat-msg .chat-del { opacity:0; color:var(--danger); cursor:pointer; font-size:var(--fs-base); transition:opacity .15s; }
.al-chat-msg:hover .chat-del { opacity:0.7; }
.al-chat-msg .chat-del:hover { opacity:1; color:#ff6666; }
.al-chat-msg.al-chat-pending { opacity:0.55; }
.al-chat-msg.al-chat-bundled { padding:2px 12px 2px 58px; margin-bottom:0; border-left:2px solid transparent; }
.al-chat-msg.al-chat-bundled:hover { background:rgba(255,255,255,0.025); border-left-color:rgba(var(--accent-rgb),0.2); }
.al-chat-msg.al-chat-bundled.self { padding-left:58px; }
.al-chat-msg.al-chat-bundled .al-chat-body { font-size:var(--fs-md); line-height:1.45; }
.chat-day-sep { display:flex; align-items:center; gap:12px; margin:14px 8px 8px; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:2.5px; color:var(--textsoft); text-transform:uppercase; }
.chat-day-sep::before, .chat-day-sep::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.25),transparent); }
.chat-day-sep:first-child { margin-top:4px; }
.al-chat-msg.al-chat-pending .al-chat-ts::before { content:'⏳ '; }
.al-chat-msg.al-chat-failed {   box-shadow:inset 3px 0 0 0 var(--danger); }
.al-chat-msg.al-chat-failed .al-chat-ts::before { content:'⚠ '; color:var(--danger); }
.chat-mention { color:var(--accent); font-weight:600; background:rgba(var(--accent-rgb),0.08); padding:0 4px; border-radius:3px; }
.chat-mention-me { color:var(--gold); background:rgba(255,200,60,0.15); box-shadow:0 0 0 1px rgba(255,200,60,0.3); }
.al-chat-input-row { display:flex;gap:8px;position:sticky;bottom:0;background:var(--panel-bg, var(--surface1, #0a0a14));padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));z-index:5; }
.al-chat-inp { flex:1;background:linear-gradient(180deg,var(--tint-4),var(--tint-1));border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;color:var(--textbright);font-size:var(--fs-lg);font-family:var(--font-body);font-weight:500;outline:none;transition:all .2s; }
.al-chat-inp:focus { border-color:rgba(var(--accent-rgb),0.55); box-shadow:0 0 14px rgba(var(--accent-rgb),0.15); }
.al-chat-send { padding:12px 22px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--accent);color:var(--accent2);background:linear-gradient(180deg,rgba(var(--accent-rgb),0.2),rgba(var(--accent-rgb),0.08));transition:all .22s;box-shadow:0 0 10px rgba(var(--accent-rgb),0.15); }
.al-chat-send:hover { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.32),rgba(var(--accent-rgb),0.14));transform:translateY(-1px);box-shadow:0 0 18px rgba(var(--accent-rgb),0.3); }
/* ============ Mention autocomplete popover (Sprint M9) ============ */
.chat-mention-pop {
  position: absolute;
  bottom: 100%;
  left: 8px;
  margin-bottom: 6px;
  background: rgba(8, 12, 30, 0.96);
  border: 1px solid rgba(120, 160, 200, 0.4);
  border-radius:var(--radius);
  padding: 4px;
  max-width: calc(100vw - 24px);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 1060;
  min-width: 200px;
}
.chat-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius:var(--radius-sm);
  cursor: pointer;
  min-height: 36px;
  color: var(--text, #ccd8e8);
  font-size:var(--fs-base);
}
.chat-mention-item:hover,
.chat-mention-item.active {
  background: rgba(120, 160, 200, 0.18);
}
.chat-mention-item .mention-tag {
  color: rgba(180, 200, 230, 0.6);
  font-size:var(--fs-xs);
}
.chat-mention-empty {
  padding: 12px;
  font-size:var(--fs-sm);
  color: rgba(180, 200, 230, 0.6);
  text-align: center;
}
@media (max-width: 600px) {
  .chat-mention-pop {
    left: 4px;
    right: 4px;
    max-width: calc(100vw - 8px);
  }
}
/* Diplomacy */
.al-diplo-section { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
.al-diplo-card { display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--tint-2),rgba(255,255,255,0.01));border:1px solid var(--tint-4);border-radius:var(--radius);padding:10px 14px;transition:all .2s; }
.al-diplo-card:hover { transform:translateY(-1px);background:var(--tint-3);box-shadow:0 3px 10px var(--shade-1); }
.al-diplo-sec-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--textbright);text-transform:uppercase;border-bottom:2px solid rgba(var(--accent-rgb),0.25);padding-bottom:6px;margin:16px 0 10px; }
.al-diplo-tag { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--gold2);background:rgba(224,168,48,0.1);border-radius:var(--radius-sm);padding:2px 8px;flex-shrink:0; }
.al-diplo-name { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);flex:1; }
.al-diplo-status { font-family:var(--font-mono);font-size:var(--fs-md);white-space:nowrap; }
.al-diplo-empty { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);padding:12px 4px; }
.al-diplo-btn { padding:6px 12px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.2);color:var(--textmid);background:var(--tint-2);white-space:nowrap;transition:all .2s; }
.al-diplo-btn:hover { transform:translateY(-1px); }
.al-diplo-btn-cancel { border-color:rgba(255,60,60,0.4);color:var(--danger);background:rgba(255,60,60,0.08); }
.al-diplo-btn-cancel:hover { background:rgba(255,60,60,0.15); }
.al-diplo-btn-war { border-color:rgba(255,60,60,0.5);color:var(--danger);background:rgba(255,60,60,0.08); }
.al-diplo-btn-nap { border-color:rgba(0,220,120,0.4);color:var(--success);background:rgba(0,220,120,0.06); }
.al-diplo-btn-nap:hover { background:rgba(0,220,120,0.12); }
.al-diplo-actions { background:linear-gradient(135deg,var(--tint-2),rgba(255,255,255,0.01));border:1px solid var(--tint-4);border-radius:var(--radius-md);padding:14px 16px;margin-top:10px; }
.al-diplo-select { width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--textbright);font-size:var(--fs-md);font-family:var(--font-mono);outline:none;appearance:none;-webkit-appearance:none; }
.al-diplo-select option { background:var(--surface2);color:var(--text); }
/* Rankings */
.al-rnk-table { width:100%;border-collapse:collapse; }
.al-rnk-row { transition:all .2s;cursor:pointer; }
.al-rnk-row:hover { transform:translateX(4px);background:var(--tint-2); }
.al-rnk-medal { font-size:20px; }
/* No-alliance view */
.al-no-alliance { display:flex;gap:24px;flex-wrap:wrap; }
.al-create-form { background:linear-gradient(135deg,var(--tint-2),rgba(255,255,255,0.01));border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;min-width:280px;flex:1; }
.al-form-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--textbright);margin-bottom:16px; }
.al-field { display:flex;flex-direction:column;gap:4px;margin-bottom:12px; }
.al-field label { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);letter-spacing:1px; }
.al-field input,.al-field textarea { background:var(--tint-4);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--textbright);font-size:var(--fs-md);font-family:var(--font-mono);outline:none;transition:border-color .2s; }
.al-field input:focus,.al-field textarea:focus { border-color:rgba(var(--accent-rgb),0.5); }
.al-field textarea { resize:vertical;min-height:60px; }
.al-submit-btn { padding:12px 20px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--gold);color:var(--gold);background:rgba(224,168,48,0.1);margin-top:8px;width:100%;transition:all .2s; }
.al-submit-btn:hover { background:rgba(224,168,48,0.2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(224,168,48,0.15); }
.al-list-panel { flex:1;min-width:240px; }
.al-list-head { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--textbright);margin-bottom:10px; }
.al-list-item { background:linear-gradient(135deg,var(--tint-2),rgba(255,255,255,0.01));border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:all .2s; }
.al-list-item:hover { transform:translateY(-1px);border-color:rgba(var(--accent-rgb),0.3); }
.al-list-tag { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--gold2);background:rgba(224,168,48,0.1);border-radius:var(--radius-sm);padding:2px 8px;flex-shrink:0; }
.al-list-info { flex:1; }
.al-list-name { font-family:var(--font-display);font-size:var(--fs-md);color:var(--textbright); }
.al-list-meta { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);margin-top:2px; }
.al-join-btn { padding:8px 16px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;border-radius:6px;cursor:pointer;border:1px solid var(--accent);color:var(--accent2);background:rgba(var(--accent-rgb),0.08);white-space:nowrap;transition:all .2s; }
.al-join-btn:hover { background:rgba(var(--accent-rgb),0.18);transform:translateY(-1px); }
/* Pending invites */
.al-pending-inv { display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--tint-4);font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright); }
.al-pending-inv button { font-family:var(--font-display);font-size:var(--fs-md);padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--tint-9);background:var(--tint-4);color:var(--textmid);cursor:pointer; }
.al-pending-inv-date { font-size:var(--fs-md);color:var(--textsoft);margin-left:6px; }

/* ══ DEFENSE ALERT ══ */
.def-alert-bar { display:flex; align-items:center; gap:12px; border-radius:var(--radius); padding:10px 14px; margin-bottom:14px; border:1px solid rgba(255,60,60,0.3); background:rgba(255,60,60,0.06); }
.def-alert-bar.active { border-color:rgba(0,220,120,0.4); background:rgba(0,220,120,0.06); }
.def-alert-ico { font-size:18px; }
.def-alert-txt { flex:1; }
.def-alert-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); letter-spacing:1.5px; }
.def-alert-sub { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin-top:2px; }
.def-alert-btn { padding:7px 14px; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1px; border-radius:6px; cursor:pointer; border:1px solid var(--danger); color:var(--danger); background:transparent; white-space:nowrap; }
.def-alert-btn.active { border-color:var(--success); color:var(--success); background:rgba(0,220,120,0.08); }
.def-alert-btn:hover { background:rgba(255,60,60,0.1); }
.def-alert-btn.active:hover { background:rgba(0,220,120,0.12); }

/* ══ NEW PLAYER GUIDE ══ */
.npg-card { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.08),rgba(10,18,32,0.95)); border:1px solid rgba(var(--accent-rgb),0.4); border-radius:var(--radius-md); padding:18px 20px; margin-bottom:14px; box-shadow:0 2px 16px var(--shade-1); }
.npg-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:2.5px; color:var(--accent2); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.npg-steps { display:flex; flex-direction:column; gap:8px; }
.npg-step { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius); background:var(--tint-2); cursor:pointer; transition:background 0.2s; }
.npg-step:hover { background:rgba(var(--accent-rgb),0.1); }
.npg-step-num { width:26px; height:26px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; flex-shrink:0; }
.npg-step-num.done { background:var(--success); border-color:var(--success); color:#000; }
.npg-step-num.todo { border-color:rgba(var(--accent-rgb),0.5); color:var(--accent); }
.npg-step-txt { flex:1; }
.npg-step-lbl { font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; color:var(--textbright); }
.npg-step-sub { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); margin-top:2px; }
.npg-step-action { font-family:var(--font-display); font-size:var(--fs-md); color:var(--accent); white-space:nowrap; }
/* ══ EVENT POPUP ══ */
/* ══ OVERVIEW QUEST MINI ══ */
.ov-quest-mini { background:var(--surface2); border:1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,0.25); }
.oqm-title { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:2.5px; color:var(--textbright); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.oqm-row { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.oqm-ico { font-size:16px; width:20px; text-align:center; }
.oqm-lbl { font-family:var(--font-body); font-size:var(--fs-md); font-weight:500; color:var(--text); flex:1; }
.oqm-pct { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold2); font-weight:bold; }
.oqm-bar { height:7px; background:var(--tint-4); border-radius:var(--radius-sm); margin:2px 0 6px 30px; }
.oqm-bfill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--gold)); }
.msg-bar         { display:flex; align-items:center; gap:10px; padding:14px 22px; border-bottom:1px solid var(--tint-7); background:linear-gradient(180deg,rgba(4,8,15,0.85),rgba(4,8,15,0.45)); }
.msg-tab         { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:10px 20px; border-radius:var(--radius); border:1px solid var(--tint-5); cursor:pointer; color:var(--textmid); background:var(--tint-1); transition:all .2s; }
.msg-tab:hover   { background:var(--tint-3); color:var(--textbright); transform:translateY(-1px); }
.msg-tab.active  { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.2),rgba(var(--accent-rgb),0.08)); color:var(--accent2); border-color:rgba(var(--accent-rgb),0.55); box-shadow:0 0 14px rgba(var(--accent-rgb),0.22), inset 0 0 6px rgba(var(--accent-rgb),0.08); }
.msg-compose-btn { margin-left:auto; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:10px 20px; background:linear-gradient(180deg,rgba(var(--accent-rgb),0.22),rgba(var(--accent-rgb),0.08)); border:1px solid var(--accent); border-radius:var(--radius); color:var(--accent2); cursor:pointer; transition:all .22s; box-shadow:0 0 10px rgba(var(--accent-rgb),0.15); }
.msg-compose-btn:hover { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.35),rgba(var(--accent-rgb),0.15)); box-shadow:0 0 16px rgba(var(--accent-rgb),0.3); transform:translateY(-1px); }
.msg-compose-panel { padding:20px; border-bottom:1px solid var(--tint-7); display:flex; flex-direction:column; gap:12px; }
.msg-compose-panel input,.msg-compose-panel textarea { background:var(--tint-4); border:1px solid var(--tint-9); border-radius:6px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-lg); padding:12px 14px; width:100%; box-sizing:border-box; }
.msg-compose-panel textarea { resize:vertical; min-height:120px; }
.msg-compose-actions { display:flex; gap:10px; justify-content:flex-end; align-items:center; margin-top:4px; }
.msg-char-counter { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); margin-right:auto; }
.msg-draft-tag { color:var(--gold); font-size:var(--fs-xs); font-family:var(--font-mono); opacity:0.85; margin-left:6px; }
.msg-reply-right { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.msg-reply-right .msg-char-counter { margin:0; }
.msg-list        { overflow-y:auto; flex:1; }
.msg-row         { padding:14px 22px; border-bottom:1px solid var(--tint-3); cursor:pointer; transition:all .18s; border-left:3px solid transparent; }
.msg-row:hover   { background:var(--tint-2); border-left-color:rgba(var(--accent-rgb),0.4); }
.msg-row.unread  { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.1),rgba(var(--accent-rgb),0.02)); border-left-color:var(--accent); }
.msg-row-head    { display:flex; align-items:center; gap:12px; }
.msg-dot         { width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.msg-row.read .msg-dot { background:transparent; border:1px solid rgba(255,255,255,0.2); }
.msg-from        { font-family:var(--font-body); font-size:16px; color:var(--textbright); font-weight:700; letter-spacing:0.5px; flex:1; }
.msg-subject     { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--textmid); flex:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-time        { font-size:var(--fs-md); color:var(--textsoft); flex-shrink:0; font-family:var(--font-mono); }
.msg-del         { font-size:16px; color:var(--danger); cursor:pointer; padding:0 8px; flex-shrink:0; }
.msg-del:hover   { color:#ff6666; }
.msg-body-expand { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--textmid); padding:14px 16px 10px 32px; line-height:1.7; white-space:pre-wrap; border-top:1px solid var(--tint-3); margin-top:8px; }
.msg-empty       { padding:50px; text-align:center; font-family:var(--font-mono); font-size:16px; color:var(--textsoft); }

/* ── Messages : vue conversations ── */
.msg-conv-row    { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--tint-3); cursor:pointer; transition:all .18s; border-left:3px solid transparent; }
.msg-conv-row:hover { background:var(--tint-2); border-left-color:rgba(var(--accent-rgb),0.4); }
.msg-conv-row.unread { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.1),rgba(var(--accent-rgb),0.02)); border-left-color:var(--accent); }
.msg-conv-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,rgba(var(--accent-rgb),0.28),rgba(var(--accent-rgb),0.12)); color:var(--accent2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:var(--fs-xl); flex-shrink:0; border:1px solid rgba(var(--accent-rgb),0.5); box-shadow:0 0 10px rgba(var(--accent-rgb),0.18), inset 0 0 4px rgba(var(--accent-rgb),0.1); letter-spacing:1px; }
.msg-conv-body   { flex:1; min-width:0; }
.msg-conv-head   { display:flex; align-items:center; gap:10px; }
.msg-conv-name   { font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--textbright); font-weight:bold; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-conv-snippet{ font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textmid); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-conv-row.unread .msg-conv-snippet { color:var(--textbright); }
.msg-conv-badge  { background:var(--accent); color:#000; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; padding:2px 8px; border-radius:var(--radius-md); min-width:18px; text-align:center; }
/* Sprint M7-A — Messages tablette landscape : limiter largeur thread pour lecture confortable
   (split-pane vrai nécessiterait refactor JS — les vues conv-list/thread sont exclusives) */
@media (min-width: 1024px) and (orientation: landscape) {
  .msg-list { max-width:900px; margin:0 auto; width:100%; }
  .msg-thread { max-width:900px; margin:0 auto; width:100%; box-sizing:border-box; }
  .msg-bubble { max-width:75%; }
}

/* ── Messages : vue thread (bulles) ── */
.msg-thread      { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble      { max-width:70%; padding:11px 16px; border-radius:var(--radius-lg); font-family:var(--font-body); font-size:var(--fs-lg); font-weight:500; line-height:1.55; word-wrap:break-word; box-shadow:0 2px 8px var(--shade-1); }
.msg-bubble.mine { align-self:flex-end; background:linear-gradient(135deg,rgba(var(--accent-rgb),0.25),rgba(var(--accent-rgb),0.12)); border:1px solid rgba(var(--accent-rgb),0.45); color:var(--textbright); box-shadow:0 2px 10px rgba(var(--accent-rgb),0.15); }
.msg-bubble.theirs { align-self:flex-start; background:linear-gradient(135deg,rgba(255,255,255,0.07),var(--tint-2)); border:1px solid rgba(255,255,255,0.14); color:var(--textbright); }
.msg-bubble-subj { font-size:var(--fs-sm); color:var(--accent); font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:1px; }
.msg-bubble-body { white-space:pre-wrap; }
.msg-bubble-time { font-size:var(--fs-xs); color:var(--textsoft); margin-top:6px; display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.msg-reply       { display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--tint-7); align-items:flex-end; position:sticky; bottom:0; background:var(--panel-bg, var(--surface1, #0a0a14)); z-index:4; }
.msg-reply textarea { flex:1; background:var(--tint-4); border:1px solid var(--tint-9); border-radius:6px; color:var(--textbright); font-family:var(--font-mono); font-size:16px; padding:8px 10px; resize:vertical; min-height:40px; }
.msg-reply .msg-compose-btn { margin:0; padding:10px 16px; }
.msg-search { flex:1; max-width:260px; background:var(--tint-4); border:1px solid var(--tint-9); border-radius:6px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-md); padding:7px 12px; outline:none; }
.msg-search:focus { border-color:var(--accent); }

/* ── Beginner Shield + Vacation banners ── */
.shield-banner   { display:flex;align-items:center;gap:14px;background:rgba(0,200,100,0.07);border:1px solid rgba(0,200,100,0.3);border-radius:var(--radius);padding:14px 18px;margin-bottom:12px;width:100%;box-sizing:border-box;min-width:0; }
.vacation-banner { display:flex;align-items:center;gap:14px;background:rgba(var(--accent-rgb),0.07);border:1px solid rgba(var(--accent-rgb),0.35);border-radius:var(--radius);padding:14px 18px;margin-bottom:12px;width:100%;box-sizing:border-box;min-width:0; }
.shield-banner.post-atk-shield { border-color:rgba(0,180,255,0.35); background:rgba(0,180,255,0.06); }
.shield-banner .banner-title, .vacation-banner .banner-title { white-space:normal; line-height:1.3; }
.shield-banner .banner-sub, .vacation-banner .banner-sub { white-space:normal; line-height:1.4; }
.banner-chip {
  flex-shrink:0; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-display); font-size:var(--fs-base); font-weight:700;
  letter-spacing:1px; color:#4db8ff;
  background:rgba(0,180,255,0.12); border:1px solid rgba(0,180,255,0.35);
  border-radius:6px; padding:6px 12px;
  text-shadow:0 0 6px rgba(0,180,255,0.35);
}
/* Compact banners when multiple are active (desktop) */
.ov-banner-wrap { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.ov-banner-wrap > * { margin-bottom:0 !important; padding-top:10px !important; padding-bottom:10px !important; }
@media (min-width:1100px) {
  .ov-banner-wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:8px; }
  .ov-banner-wrap > .ev-gbl-card, .ov-banner-wrap > .post-atk-shield { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .shield-banner, .vacation-banner { flex-wrap:wrap; padding:10px 12px; gap:10px; }
  .shield-banner .banner-title, .vacation-banner .banner-title,
  .shield-banner .banner-sub, .vacation-banner .banner-sub { white-space:normal; }
  .banner-chip { font-size:var(--fs-sm); padding:4px 9px; }
}
/* Harmonize global event banner inside ov-banner-wrap */
.ov-banner-wrap > .ev-gbl-card { border-radius:var(--radius); border-width:1px; margin-bottom:0 !important; animation:none; }
.ov-banner-wrap > .ev-gbl-card::before { display:none; }
/* ── Overview 2-col dashboard (desktop ≥1200px) ── */
.ov-dashboard { display:flex; flex-direction:column; gap:10px; }
.ov-dash-col  { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ov-block     { display:flex; flex-direction:column; margin-bottom:0; }
@media (min-width:1200px) {
  .ov-dashboard { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:18px; align-items:start; }
  .ov-dash-col  { gap:12px; }
}
.banner-ico      { font-size:24px;flex-shrink:0; }
.banner-txt      { flex:1;min-width:0; }
.banner-title    { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;color:var(--textbright); }
.banner-sub      { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);margin-top:4px; }
.banner-btn      { font-family:var(--font-mono);font-size:var(--fs-md);padding:7px 16px;border-radius:5px;border:1px solid rgba(255,255,255,0.18);background:var(--tint-3);color:var(--textmid);cursor:pointer;flex-shrink:0;white-space:nowrap; }
.banner-btn:hover{ color:var(--textbright);border-color:rgba(255,255,255,0.35); }
.banner-btn.danger{ border-color:rgba(192,57,43,0.4);color:var(--danger); }

/* ── Reports section — REDESIGN v2 ── */
@keyframes repSlideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes repPulseGlow { 0%,100%{box-shadow:0 0 8px rgba(var(--rep-rgb,255,255,255),0.15)} 50%{box-shadow:0 0 18px rgba(var(--rep-rgb,255,255,255),0.35)} }
@keyframes repDotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* ═══════════════════════════════════════════════════════
   PHASE 1 — Catégories sémantiques + sticky toolbar (22/05/2026)
   4 catégories (Défense/Offensive/Renseignement/Logistique)
   pilotent l'affichage des sous-onglets (subtabs).
   ═══════════════════════════════════════════════════════ */
/* Conteneur tab bar — devient sticky pour rester visible au scroll. */
.rep-bar         { position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:0; padding:0; border-bottom:1px solid rgba(var(--accent-rgb),0.2); background:linear-gradient(180deg, rgba(8,14,28,0.96), rgba(8,14,28,0.92)); backdrop-filter:blur(12px); }

/* Rangée 1 : 4 catégories en cards (largeur égale) */
.rep-cat-row     { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:10px 14px 6px; border-bottom:1px solid rgba(var(--accent-rgb),0.08); }
.rep-cat         { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-radius:var(--radius); border:1px solid rgba(var(--accent-rgb),0.15); background:rgba(0,0,0,0.18); color:var(--textmid); font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all 0.22s ease; position:relative; }
.rep-cat .rep-cat-lbl  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-cat .rep-cat-count{ flex-shrink:0; min-width:24px; padding:2px 7px; border-radius:11px; background:var(--tint-5); color:var(--textsoft); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:0; text-align:center; }
.rep-cat:hover   { background:rgba(0,0,0,0.32); border-color:var(--cat-col); color:var(--textbright); transform:translateY(-1px); }
.rep-cat.active  { background:linear-gradient(135deg, color-mix(in srgb, var(--cat-col) 22%, transparent), color-mix(in srgb, var(--cat-col) 8%, transparent)); border-color:var(--cat-col); color:var(--cat-col); box-shadow:0 0 16px color-mix(in srgb, var(--cat-col) 25%, transparent), inset 0 0 22px color-mix(in srgb, var(--cat-col) 6%, transparent); }
.rep-cat.active .rep-cat-count { background:color-mix(in srgb, var(--cat-col) 28%, transparent); color:var(--textbright); }
.rep-cat.rep-cat-empty:not(.active) { opacity:0.48; }
.rep-cat.rep-cat-empty:not(.active):hover { opacity:0.85; }

/* Rangée 2 : sous-onglets de la catégorie active */
.rep-subtab-row  { display:flex; align-items:center; gap:8px; padding:8px 14px 10px; flex-wrap:wrap; }

/* Fallback pour viewports étroits : catégories en 2 colonnes */
@media (max-width:640px) {
  .rep-cat-row { grid-template-columns:repeat(2, 1fr); gap:5px; padding:8px 10px 5px; }
  .rep-cat { padding:8px 10px; font-size:var(--fs-xs); letter-spacing:1px; }
  .rep-cat .rep-cat-count { min-width:20px; font-size:10px; padding:2px 5px; }
  .rep-subtab-row { padding:6px 10px 8px; gap:6px; }
}
.rep-tab         { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;padding:10px 22px;border-radius:var(--radius);border:1px solid var(--tint-7);cursor:pointer;color:var(--textmid);background:var(--tint-1);transition:all .25s ease;letter-spacing:1px;text-transform:uppercase;position:relative;overflow:hidden; }
/* Onglets sans contenu : grisés et désaturés pour mettre en valeur ceux pleins */
.rep-tab.rep-tab-empty:not(.active) { opacity:0.42; }
.rep-tab.rep-tab-empty:not(.active) .rep-tab-count { color:var(--textsoft); }
.rep-tab.rep-tab-empty:not(.active):hover { opacity:0.75; }
.rep-tab::after  { content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:currentColor;transition:all .25s;transform:translateX(-50%); }
.rep-tab:hover   { background:var(--tint-3);color:var(--textbright);transform:translateY(-1px); }
.rep-tab:hover::after { width:60%; }
.rep-tab.active  { background:rgba(192,57,43,0.2);color:var(--danger);border-color:rgba(192,57,43,0.6);box-shadow:0 0 15px rgba(192,57,43,0.2),inset 0 0 15px rgba(192,57,43,0.05); }
.rep-tab.active::after { width:80%;background:var(--danger); }
.rep-tab[data-tab="spy"].active   { background:rgba(0,200,100,0.15);color:var(--success);border-color:rgba(0,200,100,0.5);box-shadow:0 0 15px rgba(0,200,100,0.15),inset 0 0 15px rgba(0,200,100,0.05); }
.rep-tab[data-tab="spy"].active::after { background:var(--success); }
.rep-tab[data-tab="mission"].active { background:rgba(212,175,55,0.15);color:var(--gold2);border-color:rgba(212,175,55,0.5);box-shadow:0 0 15px rgba(212,175,55,0.15),inset 0 0 15px rgba(212,175,55,0.05); }
.rep-tab[data-tab="mission"].active::after { background:var(--gold2); }
.rep-tab[data-tab="orbital"].active { background:rgba(100,160,255,0.15);color:var(--accent);border-color:rgba(100,160,255,0.5);box-shadow:0 0 15px rgba(100,160,255,0.15),inset 0 0 15px rgba(100,160,255,0.05); }
.rep-tab[data-tab="orbital"].active::after { background:var(--accent); }
.rep-tab[data-tab="event"].active { background:rgba(255,140,0,0.15);color:#ff8c00;border-color:rgba(255,140,0,0.5);box-shadow:0 0 15px rgba(255,140,0,0.15),inset 0 0 15px rgba(255,140,0,0.05); }
.rep-tab[data-tab="event"].active::after { background:#ff8c00; }
.rep-tab[data-tab="raid"].active  { background:rgba(220,50,50,0.15);color:#e74c3c;border-color:rgba(220,50,50,0.5);box-shadow:0 0 15px rgba(220,50,50,0.15),inset 0 0 15px rgba(220,50,50,0.05); }
.rep-tab[data-tab="raid"].active::after { background:#e74c3c; }

/* ═══════════════════════════════════════════════════════
   PHASE 4 — Layout 2 colonnes desktop + sidebar (22/05/2026)
   ≥1024 px : sidebar 280 px avec catégories + stats 7j à gauche
   <1024 px : sidebar masquée, catégories restent dans la tab bar
   ═══════════════════════════════════════════════════════ */
.rep-layout { display:grid; grid-template-columns:280px 1fr; grid-template-rows:1fr; height:100%; overflow:hidden; gap:0; }
.rep-main { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.rep-sidebar {
  display:flex; flex-direction:column; gap:14px;
  padding:18px 14px;
  border-right:1px solid rgba(var(--accent-rgb),0.18);
  background:linear-gradient(180deg, rgba(6,12,28,0.55), rgba(8,14,28,0.30));
  overflow-y:auto;
}
.rep-sidebar-head {
  display:flex; flex-direction:column; gap:6px;
  padding:0 4px 12px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.18);
  margin-bottom:2px;
}
.rep-side-head-title {
  font-family:var(--font-display);
  font-size:var(--fs-md); font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent2);
}
.rep-side-head-meta {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap;
}
.rep-side-head-unread {
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
  color:var(--textsoft);
  letter-spacing:0.5px;
}
.rep-side-head-unread.has { color:var(--warn); }
.rep-side-markall {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  background:rgba(0,180,80,0.10);
  border:1px solid rgba(0,180,80,0.30);
  border-radius:6px;
  color:#7be6a8;
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer;
  transition:all 0.18s ease;
}
.rep-side-markall:hover {
  background:rgba(0,180,80,0.22);
  border-color:rgba(0,180,80,0.55);
  color:#a8f1c4;
  transform:translateY(-1px);
}
.rep-sidebar-cats { display:flex; flex-direction:column; gap:6px; }
.rep-side-cat {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  border-radius:var(--radius); border:1px solid rgba(var(--accent-rgb),0.15);
  background:rgba(0,0,0,0.20);
  color:var(--textmid);
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all 0.22s ease;
  width:100%; text-align:left;
}
.rep-side-cat .rep-side-cat-lbl { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-side-cat .rep-side-cat-count { flex-shrink:0; min-width:28px; padding:3px 9px; border-radius:11px; background:var(--tint-5); color:var(--textsoft); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:0; text-align:center; }
.rep-side-cat:hover { background:rgba(0,0,0,0.35); border-color:var(--cat-col); color:var(--textbright); transform:translateX(2px); }
.rep-side-cat.active {
  background:linear-gradient(135deg, color-mix(in srgb, var(--cat-col) 24%, transparent), color-mix(in srgb, var(--cat-col) 8%, transparent));
  border-color:var(--cat-col);
  color:var(--cat-col);
  box-shadow:0 0 16px color-mix(in srgb, var(--cat-col) 25%, transparent), inset 3px 0 0 var(--cat-col);
}
.rep-side-cat.active .rep-side-cat-count { background:color-mix(in srgb, var(--cat-col) 30%, transparent); color:var(--textbright); }
.rep-side-cat.rep-cat-empty:not(.active) { opacity:0.50; }
.rep-side-cat.rep-cat-empty:not(.active):hover { opacity:0.90; }

/* Bloc stats 7j dans la sidebar */
.rep-sidebar-stats {
  display:flex; flex-direction:column; gap:6px;
  padding:14px 12px;
  border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:var(--radius);
  background:rgba(0,0,0,0.18);
}
.rep-side-stats-title {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--accent2);
  padding-bottom:4px; margin-bottom:4px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.18);
}
.rep-side-stat-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--textmid);
}
.rep-side-stat-row > b { color:var(--textbright); font-family:var(--font-mono); font-weight:700; }
.rep-side-stats-empty {
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft);
  text-align:center; padding:8px 0; font-style:italic;
}

/* <1024 px : sidebar cachée, catégories restent dans .rep-cat-row de la tab bar */
@media (max-width:1023px) {
  .rep-layout { grid-template-columns:1fr; }
  .rep-sidebar { display:none; }
}
/* ≥1024 px : tab bar n'affiche QUE les sous-onglets (catégories dans sidebar) */
@media (min-width:1024px) {
  .rep-bar .rep-cat-row { display:none; }
}

/* ═══════════════════════════════════════════════════════
   Mobile rework Rapports (22/05/2026) — 821px de chrome
   au-dessus de la liste avant fix (stats+bonus+toolbar+
   tab bar) ne laissaient que 23px utiles sur 844px viewport.
   Fix : on remonte le tab bar en haut (ordre flex), on coupe
   le sticky du toolbar (chevauchement), on compacte tout.
   ═══════════════════════════════════════════════════════ */
@media (max-width:1023px) {
  /* Ordre — onglets > liste > stats/bonus/toolbar (filtres relégués sous la liste) */
  .rep-main { display:flex; flex-direction:column; }
  .rep-main > .rep-bar         { order:1; }
  .rep-main > #repBody         { order:2; }
  .rep-main > #repCityBonus    { order:3; }
  .rep-main > .rep-stats-zone  { order:4; }
  .rep-main > .rep-toolbar     { order:5; }

  /* Toolbar : on retire le sticky (collision avec rep-bar) + on compacte */
  .rep-toolbar { position:static; top:auto; padding:8px 10px; gap:6px; }
  .rep-toolbar-row { gap:6px; flex-wrap:wrap; }
  .rep-toolbar .rep-search { font-size:var(--fs-base); padding:7px 10px; }

  /* Tab bar : moins de padding + sous-onglets en scroll horizontal (plus de wrap) */
  .rep-bar { backdrop-filter:none; }
  .rep-subtab-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 10px 8px; scrollbar-width:none; }
  .rep-subtab-row::-webkit-scrollbar { display:none; }
  .rep-subtab-row .rep-tab { flex-shrink:0; padding:7px 14px; font-size:var(--fs-xs); letter-spacing:0.5px; }

  /* Stats bar : grille horizontale compacte (auto-fit pour gérer 4 ou 5 stats sans wrap moche).
     Spécificité bumpée via `.rep-layout .rep-stats-bar` car règle de base déclarée plus bas
     dans le fichier sans media (cascade order tie-breaker à la perte). */
  .rep-layout .rep-stats-bar { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow:column; gap:4px; padding:8px 10px; }
  .rep-layout .rep-stats-bar .rep-stat { min-width:0; padding:4px 6px; border-right:none; gap:1px; }
  .rep-layout .rep-stats-bar .rep-stat-lbl { font-size:9px; letter-spacing:0.5px; }
  .rep-layout .rep-stats-bar .rep-stat-val { font-size:var(--fs-base); }

  /* Marge basse pour ne pas être recouvert par le bottom nav (60px + safe-area) */
  #repBody { padding-bottom:80px; }
}

/* Sprint 13 — stats header + toolbar (search/filters/sort) — anciennes définitions */
.rep-layout-legacy { display:flex; flex-direction:column; height:100%; overflow:hidden; }
/* Rapports réutilise .msg-list (partagé Messagerie) → annuler le plafond
   max-width:900px;margin:0 auto du @media chat (sinon timeline centrée + vide
   à droite sur desktop large). Spécificité 0,2,0 > 0,1,0 → override OK. */
.rep-layout .msg-list { flex:1; overflow-y:auto; max-width:none; margin:0; width:100%; }
.rep-stats-bar { display:flex; gap:14px; padding:12px 18px; flex-wrap:wrap; border-bottom:1px solid var(--tint-3); background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.1)); }
.rep-stat { display:flex; flex-direction:column; gap:3px; min-width:80px; padding:6px 14px; border-right:1px dashed var(--tint-4); }
.rep-stat:last-child { border-right:none; }
.rep-stat-lbl { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px; color:var(--textsoft); text-transform:uppercase; }
.rep-stat-val { font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--textbright); }
/* Toolbar sticky juste sous le bar de catégories (toujours visible au scroll) */
.rep-toolbar { padding:10px 18px 8px; display:flex; flex-direction:column; gap:8px; position:sticky; top:120px; z-index:4; background:linear-gradient(180deg, rgba(8,14,28,0.92), rgba(8,14,28,0.75)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(var(--accent-rgb),0.10); }
@media (max-width:640px) { .rep-toolbar { top:100px; } }
/* ≥1024 px : seul le subtab-row est sticky en haut → toolbar sous lui à ~60px */
@media (min-width:1024px) { .rep-toolbar { top:60px; } }
.rep-toolbar-row { display:flex; gap:10px; align-items:center; }
.rep-search { flex:1; background:var(--tint-2); border:1px solid var(--tint-5); border-radius:6px; padding:8px 12px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-md); outline:none; transition:border-color .2s; }
.rep-search:focus { border-color:rgba(var(--accent-rgb),0.5); }
.rep-sort { background:var(--tint-2); border:1px solid var(--tint-5); border-radius:6px; padding:8px 10px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-base); cursor:pointer; }
.rep-pill-row { display:flex; gap:8px; flex-wrap:wrap; }
.rep-pill { padding:6px 14px; font-family:var(--font-mono); font-size:var(--fs-base); border-radius:14px; border:1px solid var(--tint-7); background:var(--tint-2); color:var(--textmid); cursor:pointer; transition:all .2s; }
.rep-pill:hover { border-color:var(--accent); color:var(--textbright); transform:translateY(-1px); }
.rep-pill.active { background:rgba(var(--accent-rgb),0.2); border-color:var(--accent); color:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.rep-pill-sep { display:inline-block; width:1px; height:20px; background:var(--tint-5); margin:0 4px; align-self:center; }
.rep-pill.rep-period { font-family:var(--font-display); font-size:var(--fs-xs); padding:5px 11px; letter-spacing:0.5px; }
.rep-pill.rep-period.active { background:rgba(255,200,0,0.18); border-color:rgba(255,200,0,0.55); color:var(--gold); }
.rep-mark-all { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--success); background:rgba(0,200,100,0.08); border:1px solid rgba(0,200,100,0.35); border-radius:6px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.rep-mark-all:hover { background:rgba(0,200,100,0.18); border-color:rgba(0,200,100,0.6); }

/* Day separator (audit créatif 09/05 — option A grouping par jour) */
.rep-day-sep {
  display:flex; align-items:center; gap:12px;
  padding:18px 16px 8px;
  margin:6px 10px 0;
}
.rep-day-sep::before {
  content:''; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:rgba(var(--accent-rgb),0.55);
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
  flex-shrink:0;
}
.rep-day-sep::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),0.25), transparent);
}
.rep-day-label {
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--textmid);
  text-shadow:0 0 8px rgba(var(--accent-rgb),0.25);
  white-space:nowrap;
}
/* Phase 2 (22/05/2026) : row anatomy unifiée — hauteur min 72 px, bordure 6 px,
   color system résultat UNIVERSEL (vert/rouge/ambre/cyan) indépendant du tab.
   - row-vic : Victoire / Récupéré / Découvert → vert (success)
   - row-def : Défaite / Pillé / Détecté    → rouge (danger)
   - row-eva : Évasion / Mitigé / Partiel   → ambre (warn)
   - row-pve / row-event / row-spy : Info / Activité / Mission → cyan (accent2) */
.rep-row         { min-height:72px; box-sizing:border-box; margin:6px 12px; padding:14px 18px; border-radius:var(--radius-md); border-left:6px solid transparent; cursor:pointer; transition:transform .2s ease, background .25s ease, box-shadow .25s ease; background:linear-gradient(135deg,var(--tint-1),rgba(255,255,255,0.005)); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.rep-row > .rep-row-head { width:100%; }
.rep-row::before { content:''; position:absolute; inset:0; border-radius:var(--radius-md); opacity:0; transition:opacity .3s; pointer-events:none; background:radial-gradient(ellipse at 0% 50%, rgba(var(--rep-rgb,255,255,255),0.08), transparent 70%); }
.rep-row::after  { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg, transparent, var(--tint-2), transparent); transition:left 0.5s; pointer-events:none; }
.rep-row:hover::after { left:120%; }
.rep-row:hover   { background:linear-gradient(135deg, color-mix(in srgb, rgba(var(--rep-rgb,255,255,255),0.10) 100%, transparent), var(--tint-1)); transform:translateX(4px); box-shadow:0 4px 16px var(--shade-3); }
.rep-row:hover::before { opacity:1; }
.rep-row.row-vic   { border-left-color:var(--success); --rep-rgb:0,200,100; }
.rep-row.row-def   { border-left-color:var(--danger);  --rep-rgb:192,57,43; }
.rep-row.row-eva   { border-left-color:var(--warn);    --rep-rgb:255,180,40; }
.rep-row.row-spy   { border-left-color:var(--accent2); --rep-rgb:0,180,220; }
.rep-row.row-pve   { border-left-color:var(--accent2); --rep-rgb:0,180,220; }
.rep-row.row-event { border-left-color:var(--accent2); --rep-rgb:0,180,220; }
.rep-row.unread    { background:linear-gradient(135deg, rgba(var(--rep-rgb,192,57,43),0.10), var(--tint-1)); }
.rep-row.expanded  { background:linear-gradient(135deg, color-mix(in srgb, rgba(var(--rep-rgb,255,255,255),0.14) 100%, transparent), var(--tint-1)); border-left-width:6px; }
.rep-row.expanded::before { opacity:1; }

.rep-row-head    { display:flex;align-items:center;gap:10px; }
/* ═══════════════════════════════════════════════════════
   PHASE 3 — Onglets internes expand (Récap/Unités/Pertes/Butin)
   Remplace l'empilage vertical de banners par 4 panneaux à onglets
   ═══════════════════════════════════════════════════════ */
.rep-exp-tabs { width:100%; }
.rep-exp-tab-bar {
  display:flex; gap:4px;
  padding:6px 6px 0;
  border-bottom:1px solid rgba(var(--accent-rgb),0.18);
  margin-bottom:14px;
  flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
}
.rep-exp-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--textsoft);
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
}
.rep-exp-tab:hover { color:var(--textbright); background:rgba(var(--accent-rgb),0.06); }
.rep-exp-tab.active {
  color:var(--accent2);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.04));
  border-color:rgba(var(--accent-rgb),0.30);
  box-shadow:inset 0 -2px 0 var(--accent2);
}
.rep-exp-tab-ico { display:inline-flex; align-items:center; }
.rep-exp-tab-lbl { white-space:nowrap; }
.rep-exp-panel { display:none; animation:repSlideIn .25s ease; }
.rep-exp-panel.active { display:block; }
@media (max-width:600px) {
  .rep-exp-tab { padding:7px 10px; font-size:10px; letter-spacing:1px; }
  .rep-exp-tab-lbl { display:none; }
  .rep-exp-tab.active .rep-exp-tab-lbl { display:inline; }
}

/* Color system résultat unifié (Phase 2) — même 4 couleurs partout */
.rep-dot         { width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:all .3s; }
.rep-dot.vic     { background:var(--success);box-shadow:0 0 10px rgba(0,200,100,0.6),0 0 20px rgba(0,200,100,0.2);animation:repDotPulse 2s ease-in-out 1; }
.rep-dot.def     { background:var(--danger); box-shadow:0 0 10px rgba(192,57,43,0.6),0 0 20px rgba(192,57,43,0.2);animation:repDotPulse 2s ease-in-out 1; }
.rep-dot.eva     { background:var(--warn);   box-shadow:0 0 10px rgba(255,180,40,0.6),0 0 20px rgba(255,180,40,0.2);animation:repDotPulse 2s ease-in-out 1; }
.rep-dot.spy     { background:var(--accent2);box-shadow:0 0 10px rgba(0,180,220,0.6),0 0 20px rgba(0,180,220,0.2);animation:repDotPulse 2.5s ease-in-out 1; }
.rep-dot.pve     { background:var(--accent2);box-shadow:0 0 10px rgba(0,180,220,0.6),0 0 20px rgba(0,180,220,0.2); }
.rep-dot.event   { background:var(--accent2);box-shadow:0 0 10px rgba(0,180,220,0.6),0 0 20px rgba(0,180,220,0.2); }
.rep-dot.read    { background:transparent;border:2px solid var(--tint-9);box-shadow:none;animation:none; }
.rep-ico         { font-size:20px;flex-shrink:0; }
.rep-vs          { font-family:var(--font-mono);font-size:16px;color:var(--textbright);flex:1;letter-spacing:0.3px; }
.rep-result      { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;padding:5px 14px;border-radius:6px;letter-spacing:1px;text-transform:uppercase; }
.rep-result.vic  { color:var(--success);background:rgba(0,200,100,0.12);border:1px solid rgba(0,200,100,0.3);box-shadow:0 0 10px rgba(0,200,100,0.1); }
.rep-result.def  { color:var(--danger); background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.3);box-shadow:0 0 10px rgba(192,57,43,0.1); }
.rep-result.eva  { color:var(--warn);   background:rgba(255,180,40,0.12);border:1px solid rgba(255,180,40,0.3);box-shadow:0 0 10px rgba(255,180,40,0.1); }
.rep-time        { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);flex-shrink:0;opacity:0.7; }

.rep-detail      { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);padding:10px 16px 8px 30px;line-height:1.7; }
/* Bannière info "Garnison de colonie" — clarifie le rôle des troupes
   sur une colonie (qui n'a pas de Gate). Affichée en haut du tab Soldats
   en vue colonie uniquement. */
.colony-troops-info {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px; margin:0 0 14px;
  background:linear-gradient(135deg,
    rgba(108, 217, 255, 0.10) 0%,
    rgba(8, 12, 22, 0.55) 35%,
    rgba(0, 0, 0, 0.55) 100%);
  border:1px solid rgba(106, 217, 255, 0.32);
  
  border-radius:var(--radius-md);
  box-shadow:inset 3px 0 0 0 rgba(106, 217, 255, 0.85), 0 0 16px rgba(106, 217, 255, 0.08) inset;
}
.cti-icon {
  flex-shrink:0;
  font-size:24px; color:#7ee5ff;
  filter: drop-shadow(0 0 6px rgba(106, 217, 255, 0.6));
  margin-top:2px;
}
.cti-body { flex:1; min-width:0; }
.cti-title {
  font-family:var(--font-display); font-size:var(--fs-base); font-weight:700;
  letter-spacing:2px; color:#9eecff;
  text-transform:uppercase; margin-bottom:8px;
}
.cti-roles {
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--font-mono); font-size:var(--fs-sm);
  color:var(--textmid); line-height:1.55;
}
.cti-roles b { color:var(--textbright); font-weight:700; }
.cti-roles svg { vertical-align:-2px; margin-right:3px; }
.cti-foot {
  margin-top:10px; padding-top:8px;
  border-top:1px dashed rgba(106, 217, 255, 0.20);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--textsoft); font-style:italic;
}
@media (max-width:768px) {
  .colony-troops-info { padding:12px 14px; gap:10px; }
  .cti-icon { font-size:20px; }
  .cti-title { font-size:var(--fs-sm); letter-spacing:1.5px; }
  .cti-roles { font-size:var(--fs-xs); }
}

/* Empty state amélioré — illustration + soft glow + look pro */
.rep-empty {
  padding:80px 24px 70px;
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:1.5px;
  color:var(--textsoft);
  position:relative;
  background:radial-gradient(ellipse at center,
    rgba(var(--accent-rgb), 0.05) 0%,
    transparent 70%);
}
.rep-empty::before {
  content:'📭';
  font-size:64px;
  display:block;
  margin-bottom:14px;
  opacity:0.55;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.4));
  animation: repEmptyFloat 4s ease-in-out infinite;
}
@keyframes repEmptyFloat {
  0%, 100% { transform:translateY(0); opacity:0.5; }
  50%      { transform:translateY(-4px); opacity:0.7; }
}
.rep-empty::after {
  content:'';
  display:block;
  width:60px; height:1px; margin:14px auto 0;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}

/* Phase 4 polish (22/05/2026) — empty state contextuel : illustration + titre + sub + CTA */
.rep-empty-pro { padding:72px 24px 64px; }
.rep-empty-pro::before { content:none; }
.rep-empty-pro::after  { margin-top:18px; }
.rep-empty-ill {
  font-size:60px; line-height:1;
  margin:0 auto 18px;
  filter:drop-shadow(0 0 24px rgba(var(--accent-rgb),0.4));
  animation:repEmptyFloat 4s ease-in-out infinite;
}
.rep-empty-ttl {
  font-family:var(--font-display);
  font-size:var(--fs-lg); font-weight:700;
  letter-spacing:1.8px;
  color:var(--textbright);
  text-transform:uppercase;
  margin-bottom:10px;
}
.rep-empty-sub {
  font-family:var(--font-mono);
  font-size:var(--fs-base); font-weight:500;
  letter-spacing:0;
  color:var(--textsoft);
  max-width:460px;
  margin:0 auto 22px;
  line-height:1.55;
  text-transform:none;
}
.rep-empty-cta {
  display:inline-block;
  padding:11px 26px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.08));
  border:1px solid rgba(var(--accent-rgb),0.55);
  border-radius:var(--radius);
  color:var(--textbright);
  font-family:var(--font-display);
  font-size:var(--fs-sm); font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s ease;
  min-height:40px;
}
.rep-empty-cta:hover {
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0.15));
  border-color:var(--accent);
  color:var(--textbright);
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(var(--accent-rgb),0.30);
}
.rep-empty-cta:active { transform:translateY(0); }

.rep-card        { background:linear-gradient(145deg,rgba(6,12,28,0.85),rgba(10,18,35,0.65));border:1px solid var(--tint-4);border-radius:14px;padding:22px 24px;margin-top:12px;backdrop-filter:blur(6px);animation:repSlideIn .3s ease-out;box-shadow:0 4px 20px var(--shade-1),inset 0 1px 0 var(--tint-2); }
/* FIX CRITIQUE MOBILE : sous body.lowfx + prefers-reduced-motion les
   animations sont mises en pause à 0% → repSlideIn (0→1) figeait TOUTE
   carte de détail de rapport à opacity:0 (invisible). La visibilité ne
   doit jamais dépendre d'un keyframe. Desktop garde le slide-in. */
@media (prefers-reduced-motion: reduce) { .rep-card { animation:none; opacity:1; } }
body.lowfx .rep-card { animation:none; opacity:1; }

.rep-ratio-row   { display:flex;align-items:center;gap:12px;margin-bottom:6px;padding:8px 0; }
.rep-r-atk       { font-family:var(--font-display);font-size:var(--fs-md);color:var(--success);white-space:nowrap;flex-shrink:0;font-weight:700;text-shadow:0 0 8px rgba(0,200,100,0.3); }
.rep-r-def       { font-family:var(--font-display);font-size:var(--fs-md);color:var(--danger);white-space:nowrap;flex-shrink:0;font-weight:700;text-shadow:0 0 8px rgba(192,57,43,0.3); }
.rep-ratio-bar   { flex:1;height:12px;background:var(--tint-3);border-radius:6px;overflow:hidden;display:flex;box-shadow:inset 0 1px 3px var(--shade-3); }
.rep-ratio-fill-a{ background:linear-gradient(90deg,rgba(0,200,100,0.9),rgba(0,200,100,0.4));height:100%;transition:width .6s ease;box-shadow:0 0 8px rgba(0,200,100,0.4); }
.rep-ratio-fill-d{ background:linear-gradient(90deg,rgba(192,57,43,0.4),rgba(192,57,43,0.9));height:100%;transition:width .6s ease;box-shadow:0 0 8px rgba(192,57,43,0.4); }
.rep-ratio-pct   { font-family:var(--font-mono);font-size:var(--fs-lg);color:var(--textmid);margin-bottom:10px;padding:10px 14px;background:linear-gradient(135deg,var(--tint-2),var(--tint-1));border:1px solid var(--tint-3);border-radius:var(--radius);text-align:center;letter-spacing:0.5px; }

.rep-analysis { margin:10px 0;padding:10px 16px;background:var(--tint-2);border:1px solid var(--tint-3);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-md); }
.rep-analysis-row { display:flex;justify-content:space-between;align-items:center;padding:4px 0;color:var(--textmid);border-bottom:1px solid var(--tint-2); }
.rep-analysis-row:last-child { border-bottom:none; }

.rep-sec-lbl     { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2.5px;color:var(--textsoft);margin:14px 0 8px;text-transform:uppercase;border-bottom:1px solid var(--tint-4);padding-bottom:6px;position:relative; }
.rep-sec-lbl::after { content:'';position:absolute;bottom:-1px;left:0;width:40px;height:2px;background:rgba(var(--accent-rgb),0.5);border-radius:1px; }

.rep-troop-tbl   { width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-md);margin:4px 0; }
.rep-troop-tbl th{ font-family:var(--font-display);color:var(--textsoft);font-size:var(--fs-md);letter-spacing:1.5px;text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--tint-7);text-transform:uppercase; }
.rep-troop-tbl td{ color:var(--textmid);padding:10px 14px 10px 0;border-bottom:1px solid var(--tint-2);transition:background .15s; }
.rep-troop-tbl tr:last-child td { border-bottom:none; }
.rep-troop-tbl tr:hover td { background:var(--tint-2); }
.rep-troop-ico   { font-size:18px;vertical-align:middle;margin-right:6px; }
.rep-t-lost      { color:var(--danger) !important;font-weight:700;text-shadow:0 0 6px rgba(192,57,43,0.3); }
.rep-t-surv      { color:var(--success) !important;font-weight:700;text-shadow:0 0 6px rgba(0,200,100,0.3); }
.rep-t-zero      { color:var(--textsoft) !important; }

.rep-loot        { font-family:var(--font-mono);font-size:16px;color:var(--gold2);margin-top:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(212,175,55,0.03));border:1px solid rgba(212,175,55,0.2);border-radius:var(--radius-md);box-shadow:0 0 12px rgba(212,175,55,0.08);text-shadow:0 0 8px rgba(212,175,55,0.2); }
.rep-loot-none   { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:12px;padding:10px 16px;border:1px solid var(--tint-2);border-radius:var(--radius);font-style:italic;background:rgba(255,255,255,0.015); }
.rep-loot-inline { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold2);margin-left:auto;white-space:nowrap;text-shadow:0 0 6px rgba(212,175,55,0.3); }

.rep-rp          { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);font-style:italic;padding:12px 18px;margin-bottom:16px;background:linear-gradient(90deg,var(--tint-2),transparent);border-radius:0 8px 8px 0;line-height:1.6;  box-shadow:inset 3px 0 0 0 var(--textsoft); }
.rep-divider     { height:1px;background:linear-gradient(90deg,var(--tint-4),var(--tint-1));margin:14px 0; }

.rep-chevron     { font-size:16px;color:var(--textsoft);transition:transform .3s ease,opacity .3s;opacity:0.4;flex-shrink:0; }
.rep-row:hover .rep-chevron { opacity:0.8; }
.rep-row.expanded .rep-chevron { transform:rotate(180deg);opacity:1;color:var(--textbright); }

.rep-faction-badge { font-family:var(--font-mono);font-size:var(--fs-md);padding:5px 12px;border-radius:6px;background:var(--tint-2);border:1px solid var(--tint-7);display:inline-block;margin:3px 4px;transition:all .2s; }
.rep-faction-badge:hover { background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2); }
.rep-faction-row { display:flex;flex-wrap:wrap;gap:6px;margin:10px 0; }

.rep-bonus-card  { margin:12px 0;padding:14px 18px;background:linear-gradient(135deg,rgba(100,160,255,0.08),rgba(100,160,255,0.02));border:1px solid rgba(100,160,255,0.2);border-radius:var(--radius-md);box-shadow:0 0 10px rgba(100,160,255,0.05); }
.rep-bonus-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--accent);margin-bottom:8px;letter-spacing:1.5px;text-shadow:0 0 8px rgba(100,160,255,0.3); }
.rep-bonus-line  { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);padding:3px 0; }

.rep-def-mult    { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin:6px 0 8px;text-align:center;padding:6px;background:var(--tint-1);border-radius:6px; }
.rep-recovery    { margin:10px 0;padding:12px 18px;background:linear-gradient(135deg,rgba(80,200,120,0.1),rgba(80,200,120,0.03));border:1px solid rgba(80,200,120,0.25);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--fs-md);color:var(--success);box-shadow:0 0 10px rgba(80,200,120,0.08); }
.rep-recovery span { color:var(--textsoft); }

.rep-chips       { display:flex;flex-wrap:wrap;gap:8px;margin:8px 0; }
.rep-chip        { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);background:var(--tint-2);border:1px solid var(--tint-7);border-radius:var(--radius);padding:6px 14px;transition:all .2s; }
.rep-chip:hover  { background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2);transform:translateY(-1px); }
.rep-chip-lost   { color:var(--danger);border-color:rgba(192,57,43,0.3);background:rgba(192,57,43,0.08); }
.rep-chip-enemy  { color:var(--warn);border-color:rgba(255,140,0,0.25);background:rgba(255,140,0,0.06);font-family:var(--font-mono);font-size:var(--fs-md);display:inline-block;padding:4px 10px;border-radius:6px;margin:2px; }

.rep-banner      { font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:2px;text-align:center;padding:14px;margin:14px 0 4px;border-radius:var(--radius-md);text-transform:uppercase; }
.rep-banner.vic  { color:var(--success);background:linear-gradient(135deg,rgba(0,200,100,0.12),rgba(0,200,100,0.04));border:1px solid rgba(0,200,100,0.3);box-shadow:0 0 20px rgba(0,200,100,0.1);text-shadow:0 0 15px rgba(0,200,100,0.4); }
.rep-banner.def  { color:var(--danger);background:linear-gradient(135deg,rgba(192,57,43,0.12),rgba(192,57,43,0.04));border:1px solid rgba(192,57,43,0.3);box-shadow:0 0 20px rgba(192,57,43,0.1);text-shadow:0 0 15px rgba(192,57,43,0.4); }

.rep-phase       { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;color:var(--textbright);margin:8px 0 4px;display:flex;align-items:center;gap:10px;text-transform:uppercase; }
.rep-phase-num   { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(var(--accent-rgb),0.15);border:1px solid rgba(var(--accent-rgb),0.35);color:var(--accent);font-size:var(--fs-md);font-weight:700;flex-shrink:0; }
.rep-meta-row    { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);display:flex;justify-content:space-between;gap:12px;padding:6px 0;flex-wrap:wrap; }

.rep-counter-btn { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;padding:8px 16px;border-radius:var(--radius);border:1px solid rgba(var(--accent-rgb),0.35);background:rgba(var(--accent-rgb),0.08);color:var(--accent);cursor:pointer;transition:all .2s; }
.rep-counter-btn:hover { background:rgba(var(--accent-rgb),0.15);border-color:rgba(var(--accent-rgb),0.5);transform:translateY(-1px);box-shadow:0 4px 12px var(--shade-1); }

.rep-spy-res     { font-family:var(--font-mono);font-size:16px;color:var(--textmid);display:flex;gap:20px;flex-wrap:wrap;padding:8px 0; }
.rep-spy-power   { font-family:var(--font-mono);font-size:16px;color:var(--textmid);margin-top:8px;display:flex;gap:20px; }
.rep-spy-tech    { font-family:var(--font-mono);font-size:var(--fs-lg);color:var(--purple);margin-top:12px;padding:10px 16px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(160,80,255,0.08),rgba(160,80,255,0.02));border:1px solid rgba(160,80,255,0.2); }
.rep-spy-info    { font-family:var(--font-mono);font-size:16px;color:var(--textmid); }
.rep-spy-actions { margin-top:14px;display:flex;gap:8px; }

/* Wrapper scrollable horizontalement pour le tableau de troupes
   (P0-7 Play Store : utilisé si markup JS l'enveloppe — follow-up M7). */
.rep-troop-tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── P0-7 Play Store : Reports mobile overflow fix ── */
@media (max-width: 600px) {
  .rep-card {
    padding: 14px 12px;
  }
  .rep-spy-power,
  .rep-spy-res,
  .rep-ratio-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size:var(--fs-base);
  }
  .rep-banner {
    font-size:var(--fs-md);
    letter-spacing: 1px;
    padding: 10px;
  }
  .rep-tab {
    padding: 8px 12px;
    font-size:var(--fs-xs);
  }
  .rep-troop-tbl {
    font-size:var(--fs-sm);
  }
  .rep-troop-tbl th,
  .rep-troop-tbl td {
    padding: 6px 4px;
  }
}
@media (max-width: 480px) {
  .rep-banner {
    font-size:var(--fs-base);
    letter-spacing: 0.5px;
  }
}

/* ── Alliance Wars v2 ── */
.war-card { background:linear-gradient(135deg,rgba(192,57,43,0.1),rgba(192,57,43,0.03));border:1px solid rgba(192,57,43,0.35);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;transition:all .3s;position:relative; }
.war-card:not(.peace):not(.pending) { animation:warPulseGlow 3s infinite; }
.war-card.peace { background:linear-gradient(135deg,rgba(0,200,100,0.06),rgba(0,200,100,0.02));border-color:rgba(0,200,100,0.25); }
.war-card.pending { background:linear-gradient(135deg,rgba(212,175,55,0.08),rgba(212,175,55,0.02));border-color:rgba(212,175,55,0.35); }
.war-vs { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);margin-bottom:6px; }
.war-score { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);margin-bottom:8px; }
.war-actions { display:flex;gap:8px;flex-wrap:wrap; }
.war-btn { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s; }
.war-btn:hover { transform:translateY(-1px); }
.war-btn.declare { background:rgba(192,57,43,0.15);border:1px solid rgba(192,57,43,0.5);color:var(--danger); }
.war-btn.declare:hover { background:rgba(192,57,43,0.25); }
.war-btn.accept { background:rgba(0,200,100,0.12);border:1px solid rgba(0,200,100,0.4);color:var(--success); }
.war-btn.accept:hover { background:rgba(0,200,100,0.2); }
.war-btn.reject { background:var(--tint-4);border:1px solid var(--tint-9);color:var(--textmid); }
.war-btn.reject:hover { background:var(--tint-7); }
.war-btn.surr { background:rgba(212,146,10,0.1);border:1px solid rgba(212,146,10,0.35);color:var(--gold); }
.war-btn.surr:hover { background:rgba(212,146,10,0.2); }
.war-sub-bar { display:flex;gap:6px;padding-bottom:10px; }
.war-sub-pill { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;padding:6px 14px;border-radius:14px;border:1px solid var(--tint-5);cursor:pointer;color:var(--textmid);background:var(--tint-2);transition:all .2s; }
.war-sub-pill:hover { background:var(--tint-3);transform:translateY(-1px); }
.war-sub-pill.active { background:rgba(192,57,43,0.18);color:var(--danger);border-color:rgba(192,57,43,0.5); }
.war-score-bar-wrap { display:flex;height:24px;border-radius:6px;overflow:hidden;margin:8px 0;box-shadow:inset 0 1px 3px var(--shade-1); }
.war-sb-us { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.6),rgba(var(--accent-rgb),0.35));display:flex;align-items:center;padding:0 8px;min-width:0;transition:width .5s ease; }
.war-sb-them { background:linear-gradient(90deg,rgba(192,57,43,0.35),rgba(192,57,43,0.6));display:flex;align-items:center;justify-content:flex-end;padding:0 8px;min-width:0;transition:width .5s ease; }
.war-sb-us span,.war-sb-them span { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px var(--shade-2); }
.war-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.war-status { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--danger);text-transform:uppercase;text-shadow:0 0 8px rgba(192,57,43,0.3); }
.war-card.pending .war-status { color:var(--gold2);text-shadow:0 0 8px rgba(212,175,55,0.3); }
.war-bonus-badge { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:var(--radius-sm);background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.35);color:var(--danger); }
.war-milestone-badge { font-family:var(--font-mono);font-size:var(--fs-xs);padding:2px 8px;border-radius:3px;margin-left:4px; }
.war-milestone-badge.notif { background:rgba(52,152,219,0.15);border:1px solid rgba(52,152,219,0.35);color:#3498db; }
.war-milestone-badge.atk { background:rgba(231,76,60,0.15);border:1px solid rgba(231,76,60,0.35);color:#e74c3c; }
.war-milestone-badge.loot { background:rgba(241,196,15,0.15);border:1px solid rgba(241,196,15,0.35);color:#f1c40f; }
.war-card-versus { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.war-vs-side { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .2s; }
.war-vs-side:hover { color:var(--accent);text-shadow:0 0 8px rgba(var(--accent-rgb),0.4); }
.war-vs-side.us { text-align:left; }
.war-vs-side.them { text-align:right;color:var(--danger); }
.war-vs-side.them:hover { color:#ff6666; }
@media (max-width: 480px) {
  .war-vs-side { font-size:var(--fs-sm); }
}
.war-vs-divider { font-family:var(--font-display);font-size:16px;font-weight:900;color:var(--textsoft);flex-shrink:0;letter-spacing:2px;text-shadow:0 0 10px var(--tint-7); }
.war-rp-text { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);font-style:italic;line-height:1.6;margin-bottom:8px;padding:8px 12px;background:linear-gradient(90deg,rgba(192,57,43,0.06),transparent);border-radius:0 6px 6px 0;  box-shadow:inset 3px 0 0 0 rgba(192,57,43,0.4); }
.war-card.pending .war-rp-text { border-left-color:rgba(212,175,55,0.4);background:linear-gradient(90deg,rgba(212,175,55,0.06),transparent); }
.war-card-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap; }
.war-duration { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft); }
.war-expire-timer { font-family:var(--font-display);font-size:var(--fs-md);color:var(--warn);letter-spacing:0.5px; }
.war-declare-zone { margin-top:14px;padding:14px 16px;border-top:1px solid rgba(255,255,255,0.07);background:var(--tint-1);border-radius:0 0 8px 8px; }
/* War roster (enemy targets) */
.war-roster-btn { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;padding:10px 20px;border-radius:6px;border:1px solid rgba(192,57,43,0.5);background:linear-gradient(135deg,rgba(192,57,43,0.15),rgba(192,57,43,0.06));color:var(--danger);cursor:pointer;transition:all .2s;width:100%;margin-top:10px;text-shadow:0 0 6px rgba(192,57,43,0.3); }
.war-roster-btn:hover { background:linear-gradient(135deg,rgba(192,57,43,0.25),rgba(192,57,43,0.1));transform:translateY(-1px);box-shadow:0 4px 12px rgba(192,57,43,0.2); }
.war-roster { overflow:hidden;animation:rosterSlide .3s ease-out;background:var(--shade-1);border:1px solid rgba(192,57,43,0.2);border-radius:var(--radius);margin-top:10px;padding:12px; }
.war-target-row { display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--tint-2);transition:background .15s; }
.war-target-row:last-child { border-bottom:none; }
.war-target-row:hover { background:var(--tint-2); }
.war-atk-btn { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:1px;padding:6px 14px;border-radius:var(--radius-sm);border:1px solid rgba(192,57,43,0.6);background:rgba(192,57,43,0.15);color:var(--danger);cursor:pointer;transition:all .2s;white-space:nowrap; }
.war-atk-btn:hover { background:rgba(192,57,43,0.3);transform:translateY(-1px);box-shadow:0 2px 8px rgba(192,57,43,0.2); }
/* Rankings tabs */
.rnk-tab-bar     { display:flex;gap:8px;padding:14px 20px 8px;flex-wrap:wrap;justify-content:center; }
.rnk-tab-btn     { font-family:var(--font-body);font-size:var(--fs-base);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;border-radius:6px;border:1px solid rgba(255,255,255,0.14);cursor:pointer;color:var(--textmid);background:var(--tint-1);transition:all 0.18s; }
.rnk-tab-btn:hover { background:rgba(255,255,255,0.07); color:var(--textbright); border-color:var(--tint-10); }
.rnk-tab-btn.active { background:linear-gradient(180deg,rgba(var(--accent-rgb),0.22),rgba(var(--accent-rgb),0.1));color:var(--accent);border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25), inset 0 0 8px rgba(var(--accent-rgb),0.1); }

/* ── Rankings podium (Sprint 17) ── */
.rnk-podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px; padding:14px 14px 8px; align-items:end; }
.rnk-podium-card { position:relative; border:1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--radius-md); background:linear-gradient(180deg,rgba(var(--accent-rgb),0.05),rgba(4,8,18,0.8)); padding:14px 10px 12px; text-align:center; cursor:pointer; transition:transform .2s, box-shadow .2s; overflow:hidden; }
.rnk-podium-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(var(--accent-rgb),0.15); }
.rnk-podium-card.rnk-pod-1 { border-color:rgba(212,146,10,0.55); background:linear-gradient(180deg,rgba(212,146,10,0.12),rgba(4,8,18,0.85)); padding-top:18px; }
.rnk-podium-card.rnk-pod-2 { border-color:rgba(192,192,192,0.4); }
.rnk-podium-card.rnk-pod-3 { border-color:rgba(205,127,50,0.4); }
.rnk-podium-trophy { font-size:var(--fs-3xl); line-height:1; margin-bottom:4px; text-shadow:0 0 12px currentColor; }
.rnk-podium-card.rnk-pod-1 .rnk-podium-trophy { font-size:34px; animation:rnkTrophyPulse 2.4s ease-in-out infinite; }
@keyframes rnkTrophyPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
.rnk-podium-avatar { width:42px; height:42px; border-radius:50%; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; font-weight:900; color:var(--text); border:1px solid rgba(var(--accent-rgb),0.3); }
.rnk-podium-name { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--text); font-weight:700; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rnk-podium-prem { color:var(--gold2); margin-right:2px; }
.rnk-podium-meta { font-size:var(--fs-sm); color:var(--textmid); margin-bottom:6px; }
.rnk-podium-tag { color:var(--accent); opacity:0.85; cursor:pointer; }
.rnk-podium-score { font-family:var(--font-display); font-size:16px; color:var(--gold2); font-weight:700; }

/* ── Rankings filters ── */
.rnk-filter-bar { display:flex; gap:8px; padding:4px 14px 8px; flex-wrap:wrap; }
.rnk-filter-select { font-family:var(--font-mono); font-size:var(--fs-md); padding:6px 10px; background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.22); border-radius:var(--radius-sm); color:var(--text); cursor:pointer; outline:none; }
.rnk-filter-select:hover { border-color:var(--accent); }
.rnk-filter-select option { background:#0a111f; color:var(--text); }

/* ── Rankings search clear button ── */
.rnk-search-wrap { position:relative; display:flex; align-items:center; }
.rnk-search-wrap .rnk-search { padding-right:32px; }
.rnk-search-clear { position:absolute; right:24px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; border:none; background:rgba(var(--accent-rgb),0.2); color:var(--text); font-size:var(--fs-md); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.rnk-search-clear:hover { background:rgba(var(--accent-rgb),0.4); }

/* ── Rankings "me" tag + no results ── */
.rnk-me-tag { color:var(--gold2); font-weight:700; }
.rnk-prem-star { color:var(--gold2); margin-right:3px; }
.rnk-tag { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--accent); opacity:0.85; }
.rnk-tag.player-link:hover { opacity:1; text-decoration:underline; }
.rnk-al-cell { text-align:center; }
.rnk-no-results { padding:40px 20px; text-align:center; font-family:var(--font-mono); color:var(--textsoft); font-size:var(--fs-md); }

/* ── Mobile cards (Sprint 17 T4) ── */
.rnk-cards { display:none; }
@media (max-width:600px) {
  .rnk-table { display:none; }
  .rnk-cards { display:block; padding:0 10px 10px; }
  .rnk-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(var(--accent-rgb),0.08); cursor:pointer; transition:background .15s; }
  .rnk-card:hover { background:rgba(var(--accent-rgb),0.06); }
  .rnk-card.is-me { background:rgba(212,146,10,0.08); }
  .rnk-card-rank { font-family:var(--font-display); font-weight:700; color:var(--accent2); min-width:38px; }
  .rnk-card-main { flex:1; min-width:0; overflow:hidden; }
  .rnk-card-name { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--text); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rnk-card-sub { font-size:var(--fs-sm); color:var(--textmid); }
  .rnk-card-score { font-family:var(--font-display); font-size:var(--fs-md); color:var(--gold2); font-weight:700; }
  .rnk-podium { grid-template-columns:1fr 1fr 1fr; gap:6px; padding:10px; }
  .rnk-podium-card { padding:10px 6px; }
  .rnk-podium-trophy { font-size:var(--fs-2xl); }
  .rnk-podium-card.rnk-pod-1 .rnk-podium-trophy { font-size:28px; }
  .rnk-filter-bar { gap:6px; }
  .rnk-filter-select { font-size:var(--fs-base); padding:5px 8px; flex:1; }
}

/* Profil joueur overlay */
.prof-loading    { padding:40px; text-align:center; font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); }

/* ═══════════════════════════════════════════════════════════
   PROFILE v2 — 2026 Redesign
   ═══════════════════════════════════════════════════════════ */

/* Card wrapper */
.prof2-card { position:relative; }
.prof2-card-pass { --pass-gold:rgba(255,192,64,1); }

/* Close button */
.prof2-close { position:absolute; top:12px; right:14px; z-index:5; background:var(--shade-2); border:1px solid var(--tint-7); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--textsoft); cursor:pointer; font-size:var(--fs-md); transition:all 0.2s; backdrop-filter:blur(4px); }
.prof2-close:hover { color:var(--danger); border-color:var(--danger); background:rgba(255,70,70,0.15); }

/* ── Hero header ── */
.prof2-hero { position:relative; padding:24px 20px 20px; display:flex; align-items:center; gap:18px; overflow:hidden; }
.prof2-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg, rgba(var(--fc),0.12) 0%, rgba(var(--fc),0.03) 50%, transparent 100%); z-index:0; }
.prof2-hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%, rgba(var(--fc),0.08) 0%, transparent 60%); }

/* Avatar */
.prof2-avatar { position:relative; z-index:1; width:80px; height:80px; border-radius:50%; overflow:hidden; flex-shrink:0; border:3px solid rgba(var(--fc),0.5); background:radial-gradient(circle at center, rgba(var(--fc),0.18), rgba(4,8,15,0.55) 100%); box-shadow:0 0 16px rgba(var(--fc),0.3), 0 0 32px rgba(var(--fc),0.12), inset 0 0 12px rgba(var(--fc),0.1); display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.prof2-avatar:hover { box-shadow:0 0 22px rgba(var(--fc),0.45), 0 0 40px rgba(var(--fc),0.18); transform:scale(1.03); }
.prof2-avatar img, .prof2-avatar svg, .prof2-avatar canvas { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Pass avatar: golden ring + shimmer */
.prof2-avatar-pass { border-color:rgba(255,192,64,0.7); box-shadow:0 0 24px rgba(255,192,64,0.3), 0 0 48px rgba(255,192,64,0.12), inset 0 0 12px rgba(255,192,64,0.1); }
.prof2-avatar-pass::before { content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid transparent; background:conic-gradient(from 0deg, rgba(255,192,64,0.6), rgba(255,220,100,0.2), rgba(255,192,64,0.6), rgba(255,220,100,0.2), rgba(255,192,64,0.6)) border-box; -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; animation:profPassRing 4s linear infinite; z-index:2; pointer-events:none; }
@keyframes profPassRing { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Identity */
.prof2-identity { position:relative; z-index:1; flex:1; min-width:0; }
.prof2-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prof2-name { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--textbright); letter-spacing:1.5px; text-shadow:0 0 16px rgba(var(--fc),0.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prof2-pass-badge { font-family:var(--font-display); font-size:10px; font-weight:700; color:#ffc040; background:linear-gradient(135deg,rgba(255,192,64,0.2),rgba(255,220,100,0.08)); border:1px solid rgba(255,192,64,0.4); border-radius:var(--radius-sm); padding:2px 7px; letter-spacing:1.5px; text-shadow:0 0 8px rgba(255,192,64,0.5); animation:profPassGlow 2s ease-in-out infinite alternate; white-space:nowrap; }
@keyframes profPassGlow { 0% { box-shadow:0 0 4px rgba(255,192,64,0.2); } 100% { box-shadow:0 0 12px rgba(255,192,64,0.4); } }
.prof2-title { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:600; color:var(--fcolor); letter-spacing:2px; margin-top:4px; text-shadow:0 0 10px rgba(var(--fc),0.3); text-transform:uppercase; }
.prof2-motto { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); font-style:italic; margin-top:3px; line-height:1.4; }
.prof2-faction { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--fcolor); letter-spacing:1.5px; margin-top:6px; opacity:0.8; }
.prof2-faction-ico { margin-right:2px; }

/* Alliance */
.prof2-alliance { display:inline-flex; align-items:center; gap:5px; margin-top:5px; cursor:pointer; transition:opacity 0.15s; }
.prof2-alliance:hover { opacity:0.8; }
.prof2-al-tag { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--gold); background:rgba(255,192,64,0.1); border:1px solid rgba(255,192,64,0.25); border-radius:3px; padding:1px 5px; }
.prof2-al-name { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textmid); }
.prof2-al-none { cursor:default; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); }

/* ── Rank bar ── */
.prof2-rank-bar { display:flex; align-items:center; justify-content:center; gap:0; padding:10px 16px; background:var(--shade-1); border-top:1px solid rgba(var(--fc),0.1); border-bottom:1px solid rgba(var(--fc),0.1); }
.prof2-rank-item { flex:1; text-align:center; padding:2px 0; }
.prof2-rank-val { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--textbright); }
.prof2-rank-lbl { font-family:var(--font-mono); font-size:10px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
.prof2-rank-sep { width:1px; height:28px; background:linear-gradient(180deg,transparent,rgba(var(--fc),0.25),transparent); flex-shrink:0; }

/* ── KPI grid ── */
.prof2-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:2px 16px 0; }
.prof2-kpi { display:flex; align-items:center; gap:6px; padding:10px 4px; border-radius:var(--radius); background:rgba(var(--fc),0.03); transition:background 0.2s; }
.prof2-kpi:hover { background:rgba(var(--fc),0.07); }
.prof2-kpi-ico { font-size:16px; flex-shrink:0; }
.prof2-kpi-data { min-width:0; }
.prof2-kpi-val { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color:var(--textbright); }
.prof2-kpi-lbl { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; }

/* ── Sections ── */
.prof2-section { padding:8px 16px; }
.prof2-sec-hdr { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:2.5px; color:var(--textsoft); text-transform:uppercase; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid rgba(var(--fc),0.1); }

/* Building grid */
.prof2-bld-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.prof2-bld { display:flex; flex-direction:column; align-items:center; padding:8px 4px 6px; background:rgba(var(--fc),0.03); border:1px solid rgba(var(--fc),0.08); border-radius:var(--radius); transition:all 0.2s; }
.prof2-bld:hover { background:rgba(var(--fc),0.07); border-color:rgba(var(--fc),0.2); transform:translateY(-1px); }
.prof2-bld-ico { font-size:16px; line-height:1; margin-bottom:3px; }
.prof2-bld-lv { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--fcolor); text-shadow:0 0 8px rgba(var(--fc),0.3); }
.prof2-bld-name { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }

/* Fauteuil highlight */
.prof2-fauteuil { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-top:8px; background:linear-gradient(135deg,rgba(255,192,64,0.08),rgba(255,220,100,0.03)); border:1px solid rgba(255,192,64,0.2); border-radius:var(--radius); }
.prof2-fauteuil-ico { font-size:20px; flex-shrink:0; }
.prof2-fauteuil-body { flex:1; }
.prof2-fauteuil-name { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--gold); letter-spacing:1.5px; }
.prof2-fauteuil-val { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--gold2); font-weight:700; margin-top:1px; }

/* ── Actions ── */
.prof2-actions { display:flex; gap:6px; padding:12px 16px 14px; border-top:1px solid var(--tint-3); }
.prof2-btn { flex:1; font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700; padding:9px 6px; border-radius:var(--radius); border:1px solid; cursor:pointer; text-align:center; transition:all 0.2s; letter-spacing:0.5px; background:transparent; text-transform:uppercase; }
.prof2-btn:hover { transform:translateY(-1px); }
.prof2-btn-msg { border-color:rgba(var(--accent-rgb),0.4); color:var(--accent); background:rgba(var(--accent-rgb),0.08); }
.prof2-btn-msg:hover { background:rgba(var(--accent-rgb),0.15); box-shadow:0 0 12px rgba(var(--accent-rgb),0.2); }
.prof2-btn-spy { border-color:rgba(255,192,64,0.4); color:var(--gold); background:rgba(255,192,64,0.06); }
.prof2-btn-spy:hover { background:rgba(255,192,64,0.12); box-shadow:0 0 12px rgba(255,192,64,0.2); }
.prof2-btn-atk { border-color:rgba(255,100,100,0.4); color:var(--danger); background:rgba(255,100,100,0.06); }
.prof2-btn-atk:hover { background:rgba(255,100,100,0.12); box-shadow:0 0 12px rgba(255,100,100,0.2); }
.prof2-btn-warn { border-color:var(--warn)!important; color:var(--warn)!important; }
.prof2-btn-friend { border-color:rgba(var(--accent-rgb),0.3); color:var(--accent); }
.prof2-btn-friend:hover { background:rgba(var(--accent-rgb),0.1); }
.prof2-btn-friend-ok { border-color:rgba(var(--success),0.3); color:var(--success); opacity:0.6; cursor:default; }
.prof2-btn-disabled { opacity:0.4; cursor:not-allowed; border-color:var(--textsoft); color:var(--textsoft); }

/* Anti-farm messages */
.prof2-af-msg { font-family:var(--font-mono); font-size:var(--fs-xs); padding:8px 16px 10px; line-height:1.5; }
.prof2-af-block { color:var(--danger); background:rgba(255,119,119,0.06); border-top:1px solid rgba(255,119,119,0.15); }
.prof2-af-warn  { color:var(--warn);   background:rgba(255,204,85,0.06);  border-top:1px solid rgba(255,204,85,0.15); }

/* ═══════════════════════════════════════════════════════════
   PROFILE v2 — Refonte « dossier de commandement » 31/05/2026
   Carte élargie (640px) : hero cinématique + double panneau
   Production|Militaire + cadre HUD. Calque posé APRÈS les
   règles de base (l'emporte par ordre de cascade).
   ═══════════════════════════════════════════════════════════ */
.prof2-card { overflow:hidden; }
/* Cadre HUD : crochets d'angle */
.prof2-card::before, .prof2-card::after {
  content:''; position:absolute; width:24px; height:24px; z-index:6; pointer-events:none;
  border:2px solid rgba(var(--fc),0.5); filter:drop-shadow(0 0 6px rgba(var(--fc),0.4));
}
.prof2-card::before { top:9px; left:9px; border-width:2px 0 0 2px; }
.prof2-card::after  { bottom:9px; right:9px; border-width:0 2px 2px 0; }

/* Hero plus ample + texture scanline faction */
.prof2-hero { padding:30px 28px 24px; gap:22px; min-height:128px; }
.prof2-hero-bg::before {
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(var(--fc),0.06) 0 1px, transparent 1px 5px);
  opacity:0.45;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 45%, transparent);
}
.prof2-avatar { width:104px; height:104px; }
.prof2-name { font-size:25px; letter-spacing:2px; }
.prof2-title { font-size:var(--fs-base); }
.prof2-faction { font-size:var(--fs-sm); opacity:0.95; }

/* Ruban de stats héroïque */
.prof2-rank-bar { padding:14px 18px; background:linear-gradient(180deg, rgba(var(--fc),0.10), rgba(var(--fc),0.02)); }
.prof2-rank-val { font-size:23px; letter-spacing:0.5px; text-shadow:0 0 14px rgba(var(--fc),0.4); }
.prof2-rank-lbl { font-size:10px; }
.prof2-rank-sep { height:34px; }

/* KPI : tuiles verticales */
.prof2-kpis { gap:8px; padding:12px 16px 6px; }
.prof2-kpi { flex-direction:column; align-items:center; text-align:center; gap:3px; padding:13px 6px; border:1px solid rgba(var(--fc),0.10); }
.prof2-kpi-ico { font-size:var(--fs-2xl); }
.prof2-kpi-val { font-size:18px; }
.prof2-kpi-lbl { font-size:9.5px; }

/* Double panneau Production | Militaire */
.prof2-panels { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 16px 4px; }
.prof2-panel { padding:12px 12px 10px; border:1px solid rgba(var(--fc),0.14); border-radius:var(--radius-md); background:linear-gradient(180deg, rgba(var(--fc),0.05), rgba(0,0,0,0.18)); }
.prof2-panel .prof2-sec-hdr { margin-bottom:10px; }
.prof2-panels .prof2-bld-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
.prof2-bld { padding:13px 6px 9px; }
.prof2-bld-ico { font-size:20px; margin-bottom:5px; }
.prof2-bld-lv { font-size:20px; }
.prof2-bld-name { font-size:10px; letter-spacing:0.6px; }

/* En-têtes + actions */
.prof2-sec-hdr { font-size:var(--fs-sm); }
.prof2-actions { gap:7px; padding:14px 16px 16px; }
.prof2-btn { font-size:12.5px; padding:11px 6px; }

/* Mobile : panneaux empilés, crochets HUD masqués */
@media (max-width:640px) {
  .prof2-panels { grid-template-columns:1fr; }
  .prof2-hero { padding:22px 16px 16px; gap:14px; min-height:0; }
  .prof2-avatar { width:84px; height:84px; }
  .prof2-name { font-size:21px; }
  .prof2-rank-val { font-size:19px; }
  .prof2-card::before, .prof2-card::after { display:none; }
}

/* ══ FACTION CLICKABLE ICON + PREVIEW MODAL ══ */
.fac-clickable { display:inline-flex; align-items:center; cursor:zoom-in; transition:transform 0.15s; border-radius:50%; padding:0; line-height:0; }
.fac-clickable:hover { transform:scale(1.18); filter:drop-shadow(0 0 8px rgba(255,255,255,0.4)); }

.fac-preview-overlay { position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; background:rgba(2,5,12,0.92); backdrop-filter:blur(12px); padding:20px; animation:facPreviewFadeIn 0.2s ease; }
@keyframes facPreviewFadeIn { from { opacity:0; } to { opacity:1; } }
.fac-preview-card { position:relative; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; background:linear-gradient(180deg, rgba(20,24,40,0.96), rgba(8,12,22,0.98)); border:1px solid var(--fc); border-radius:var(--radius-xl); box-shadow:0 0 60px var(--fc), 0 0 120px rgba(0,0,0,0.8); padding:24px 28px 26px; text-align:center; animation:facPreviewPop 0.25s cubic-bezier(.2,1,.4,1.1); }
@keyframes facPreviewPop { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } }
.fac-preview-close { position:absolute; top:10px; right:12px; background:var(--shade-3); border:1px solid var(--tint-9); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--textsoft); cursor:pointer; transition:all 0.2s; padding:0; }
.fac-preview-close:hover { background:rgba(255,80,80,0.18); border-color:var(--danger); color:var(--danger); transform:rotate(90deg); }
.fac-preview-img-wrap { display:flex; align-items:center; justify-content:center; padding:8px; margin-bottom:14px; }
.fac-preview-img { width:380px; max-width:88vw; height:auto; max-height:60vh; filter:drop-shadow(0 0 30px var(--fc)) drop-shadow(0 0 60px var(--shade-5)); }
.fac-preview-name { font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--fc); letter-spacing:3px; text-transform:uppercase; text-shadow:0 0 16px var(--fc); margin-bottom:10px; }
.fac-preview-lore { font-family:var(--font-mono); font-size:var(--fs-base); line-height:1.55; color:var(--textmid); font-style:italic; margin-bottom:16px; padding:0 4px; }
.fac-preview-bonuses-hdr { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--textsoft); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:8px; padding-top:12px; border-top:1px solid var(--tint-5); }
.fac-preview-bonuses { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.fac-preview-bonus { font-family:var(--font-mono); font-size:11.5px; color:var(--textbright); background:var(--tint-3); border:1px solid var(--fc); border-radius:14px; padding:4px 12px; letter-spacing:0.4px; }

@media (max-width:600px) {
  .fac-preview-card { padding:18px 16px 20px; }
  .fac-preview-img { width:280px; }
  .fac-preview-name { font-size:18px; letter-spacing:2px; }
  .fac-preview-lore { font-size:var(--fs-sm); }
}

/* ══ ALLIANCE PROFILE (ally2-*) — Redesign 2026 ══ */
.ally2-card { --fc:255,192,64; --fcolor:#ffc040; }
.ally2-hero { padding:22px 22px 18px; gap:16px; }
.ally2-avatar { width:72px; height:72px; color:var(--fcolor); }
.ally2-avatar svg { width:46px; height:46px; filter:drop-shadow(0 0 8px rgba(var(--fc),0.5)); }
.ally2-tag { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--fcolor); letter-spacing:1.2px; text-shadow:0 0 12px rgba(var(--fc),0.5); }
.ally2-name { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--textbright); letter-spacing:1.2px; text-shadow:none; }
.ally2-desc { font-family:var(--font-mono); font-size:12.5px; font-style:italic; color:var(--textmid); margin-top:8px; line-height:1.5; padding:8px 12px;  background:rgba(var(--fc),0.04); border-radius:0 4px 4px 0; word-wrap:break-word; overflow-wrap:break-word; white-space:normal;  box-shadow:inset 3px 0 0 0 rgba(var(--fc),0.4); }
.ally2-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); letter-spacing:0.4px; }
.ally2-meta-item { display:inline-flex; align-items:center; gap:4px; }
.ally2-meta-item b { color:var(--textbright); font-weight:600; }
.ally2-meta-item svg { opacity:0.7; }
.ally2-meta-sep { opacity:0.4; }

.ally2-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 16px; border-top:1px solid rgba(var(--fc),0.12); border-bottom:1px solid rgba(var(--fc),0.12); background:linear-gradient(180deg,rgba(var(--fc),0.04),transparent); }
.ally2-kpi { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:var(--radius); background:rgba(var(--fc),0.05); border:1px solid rgba(var(--fc),0.1); transition:all 0.2s; }
.ally2-kpi:hover { background:rgba(var(--fc),0.1); border-color:rgba(var(--fc),0.25); transform:translateY(-1px); }
.ally2-kpi-ico { color:var(--fcolor); opacity:0.85; line-height:1; margin-bottom:2px; }
.ally2-kpi-val { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--textbright); line-height:1.1; letter-spacing:0.5px; }
.ally2-kpi-sub { font-size:var(--fs-xs); color:var(--textsoft); font-weight:500; }
.ally2-kpi-lbl { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; margin-top:1px; text-align:center; }

.ally2-relation { font-family:var(--font-mono); font-size:11.5px; padding:9px 16px; display:flex; align-items:center; gap:8px; line-height:1.4; }
.ally2-relation b { font-family:var(--font-display); letter-spacing:1.5px; text-transform:uppercase; font-size:var(--fs-sm); }
.ally2-relation-war { background:rgba(255,80,80,0.08); border-bottom:1px solid rgba(255,80,80,0.25); color:var(--danger); }
.ally2-relation-nap { background:rgba(80,220,140,0.06); border-bottom:1px solid rgba(80,220,140,0.2); color:var(--success); }

.ally2-section { padding:12px 16px 4px; }
.ally2-sec-hdr { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:2.5px; color:var(--textsoft); text-transform:uppercase; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid rgba(var(--fc),0.12); }
.ally2-sec-hdr > span:first-child { display:inline-flex; align-items:center; gap:6px; }
.ally2-sec-count { font-family:var(--font-display); font-size:var(--fs-xs); color:var(--fcolor); background:rgba(var(--fc),0.1); padding:2px 8px; border-radius:var(--radius-md); letter-spacing:1px; }

.ally2-members-list { max-height:230px; overflow-y:auto; padding-right:4px; }
.ally2-members-list::-webkit-scrollbar { width:5px; }
.ally2-members-list::-webkit-scrollbar-thumb { background:rgba(var(--fc),0.3); border-radius:3px; }
.ally2-member { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:all 0.15s; border:1px solid transparent; margin-bottom:3px; }
.ally2-member:hover { background:rgba(var(--fc),0.06); border-color:rgba(var(--fc),0.18); transform:translateX(2px); }
.ally2-member-role { font-size:var(--fs-md); line-height:1; flex-shrink:0; width:18px; text-align:center; }
.ally2-member-name { font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textbright); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ally2-member-score { font-family:var(--font-display); font-size:var(--fs-base); font-weight:600; color:var(--fcolor); white-space:nowrap; letter-spacing:0.5px; display:flex; align-items:baseline; gap:3px; }
.ally2-member-pts { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); font-weight:400; text-transform:uppercase; }

@media (max-width:600px) {
  .ally2-hero { padding:18px 14px 14px; gap:12px; }
  .ally2-avatar { width:60px; height:60px; }
  .ally2-avatar svg { width:38px; height:38px; }
  .ally2-tag, .ally2-name { font-size:var(--fs-lg); }
  .ally2-kpis { grid-template-columns:repeat(2,1fr); gap:5px; padding:10px 12px; }
  .ally2-kpi-val { font-size:var(--fs-lg); }
  .ally2-section { padding:10px 12px 4px; }
  .ally2-members-list { max-height:200px; }
}

/* ══ PROFILE EDIT (peEdit-*) — Redesign 2026 ══ */
.peEdit-card { background:var(--surface); border:1px solid rgba(var(--fc),0.3); border-radius:14px; box-shadow:0 0 80px rgba(var(--fc),0.18), 0 0 160px var(--shade-5); overflow:hidden; }
.peEdit-hero { padding:24px 22px 18px; gap:18px; }
.peEdit-avatar { width:90px; height:90px; }
.peEdit-name { font-size:20px; }
.peEdit-title { font-size:var(--fs-base); letter-spacing:2.5px; }
.peEdit-faction { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--fcolor); letter-spacing:2px; margin-top:8px; opacity:0.9; }
.peEdit-faction span { text-shadow:0 0 8px rgba(var(--fc),0.4); }
.peEdit-alliance { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:3px 9px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.2); border-radius:14px; cursor:pointer; transition:all 0.15s; }
.peEdit-alliance:hover { background:rgba(var(--accent-rgb),0.15); transform:translateY(-1px); }
.peEdit-al-tag { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--accent); letter-spacing:1px; }
.peEdit-al-name { font-family:var(--font-mono); font-size:11.5px; color:var(--textmid); }
.peEdit-al-none { display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--textsoft); font-style:italic; opacity:0.7; }

.peEdit-rank-bar { display:flex; align-items:center; justify-content:center; gap:0; padding:12px 16px; background:linear-gradient(180deg, rgba(var(--fc),0.08), rgba(var(--fc),0.02)); border-top:1px solid rgba(var(--fc),0.15); border-bottom:1px solid rgba(var(--fc),0.15); }
.peEdit-rank-item { flex:1; text-align:center; min-width:0; }
.peEdit-rank-val { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--textbright); letter-spacing:0.5px; line-height:1.1; text-shadow:0 0 12px rgba(var(--fc),0.3); }
.peEdit-rank-lbl { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1.5px; margin-top:3px; }
.peEdit-rank-sep { width:1px; height:32px; background:linear-gradient(180deg, transparent, rgba(var(--fc),0.25), transparent); margin:0 4px; }

.peEdit-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 16px; }
.peEdit-kpi { display:flex; align-items:center; gap:8px; padding:10px; border-radius:var(--radius); background:rgba(var(--fc),0.04); border:1px solid rgba(var(--fc),0.08); transition:all 0.2s; }
.peEdit-kpi:hover { background:rgba(var(--fc),0.08); border-color:rgba(var(--fc),0.18); }
.peEdit-kpi-ico { color:var(--fcolor); flex-shrink:0; line-height:1; opacity:0.85; }
.peEdit-kpi-data { min-width:0; }
.peEdit-kpi-val { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); line-height:1.1; }
.peEdit-kpi-lbl { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; margin-top:1px; }

.peEdit-body { padding:6px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.peEdit-section { border:1px solid rgba(var(--fc),0.12); border-radius:var(--radius-md); overflow:hidden; background:rgba(var(--fc),0.02); transition:border-color 0.2s; }
.peEdit-section:hover { border-color:rgba(var(--fc),0.22); }
.peEdit-section[open] { border-color:rgba(var(--fc),0.28); background:rgba(var(--fc),0.04); }
.peEdit-sum { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; cursor:pointer; user-select:none; list-style:none; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; color:var(--textmid); letter-spacing:1.5px; text-transform:uppercase; transition:all 0.15s; }
.peEdit-sum::-webkit-details-marker { display:none; }
.peEdit-sum:hover { color:var(--fcolor); background:rgba(var(--fc),0.04); }
.peEdit-section[open] .peEdit-sum { color:var(--fcolor); border-bottom:1px solid rgba(var(--fc),0.12); }
.peEdit-sum-l { display:inline-flex; align-items:center; gap:8px; }
.peEdit-sum-ico { font-size:var(--fs-md); line-height:1; }
.peEdit-sum-chev { font-size:var(--fs-xs); opacity:0.6; transition:transform 0.2s; }
.peEdit-section[open] .peEdit-sum-chev { transform:rotate(180deg); opacity:1; color:var(--fcolor); }
.peEdit-sum-count { font-family:var(--font-display); font-size:var(--fs-xs); color:var(--fcolor); background:rgba(var(--fc),0.12); padding:2px 9px; border-radius:11px; letter-spacing:1px; font-weight:700; }
.peEdit-sum-body { padding:12px; }
/* FIX scroll modale profil (13/06/2026, v2) : le scroll INTERNE flex échouait
   (contenu coupé sous Bâtiments clés / Devise perso ; min-height:0 insuffisant).
   On bascule sur un scroll d'OVERLAY, fiable partout : l'overlay #profileEditModal
   devient le conteneur scrollable et la modale prend sa hauteur naturelle. */
#profileEditModal { align-items:flex-start !important; overflow-y:auto !important; padding:3dvh 0 !important; }
.profile-modal-inner { max-height:none !important; overflow:visible !important; }
#profileEditContent { max-height:none !important; min-height:0; overflow-y:visible !important; }

.peEdit-bld-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.peEdit-bld { display:flex; flex-direction:column; align-items:center; padding:9px 4px 7px; background:rgba(var(--fc),0.04); border:1px solid rgba(var(--fc),0.08); border-radius:var(--radius); transition:all 0.2s; }
.peEdit-bld:hover { background:rgba(var(--fc),0.09); border-color:rgba(var(--fc),0.22); transform:translateY(-1px); }
.peEdit-bld-ico { font-size:var(--fs-md); line-height:1; margin-bottom:4px; color:var(--fcolor); }
.peEdit-bld-lv { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--fcolor); text-shadow:0 0 8px rgba(var(--fc),0.3); }
.peEdit-bld-name { font-family:var(--font-mono); font-size:9px; color:var(--textsoft); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }

.peEdit-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:all 0.15s; border:1px solid transparent; margin-bottom:3px; }
.peEdit-title-row:hover { background:rgba(var(--fc),0.06); border-color:rgba(var(--fc),0.18); }
.peEdit-title-active { background:rgba(var(--fc),0.12) !important; border-color:rgba(var(--fc),0.4) !important; box-shadow:inset 0 0 8px rgba(var(--fc),0.15); }
.peEdit-title-name { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; color:var(--textbright); letter-spacing:1.5px; }
.peEdit-title-cond { font-family:var(--font-mono); font-size:10px; color:var(--textsoft); }
.peEdit-title-ok { color:var(--fcolor); }
.peEdit-title-locked { opacity:0.45; cursor:not-allowed; }
.peEdit-title-locked-hdr { font-family:var(--font-display); font-size:10px; color:var(--textsoft); letter-spacing:2px; padding:8px 0 4px; text-transform:uppercase; opacity:0.7; border-top:1px dashed var(--tint-5); margin-top:6px; }

.peEdit-motto-block { padding:4px 0 0; }
.peEdit-motto-label { display:block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; color:var(--textsoft); letter-spacing:2.5px; margin-bottom:6px; text-transform:uppercase; }
.peEdit-motto-ta { width:100%; background:rgba(var(--fc),0.04); border:1px solid rgba(var(--fc),0.18); border-radius:var(--radius); color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-base); padding:10px 12px; resize:vertical; box-sizing:border-box; min-height:54px; line-height:1.45; transition:all 0.2s; outline:none; }
.peEdit-motto-ta:focus { border-color:rgba(var(--fc),0.5); background:rgba(var(--fc),0.06); box-shadow:0 0 12px rgba(var(--fc),0.12); }
.peEdit-motto-ta::placeholder { color:var(--textsoft); opacity:0.6; font-style:italic; }

.peEdit-actions { padding:14px 16px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid rgba(var(--fc),0.12); background:rgba(0,0,0,0.15); }
.peEdit-btn-cancel, .peEdit-btn-save { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700; padding:9px 22px; border-radius:var(--radius); cursor:pointer; border:1px solid; transition:all 0.2s; letter-spacing:1.5px; text-transform:uppercase; flex:0 0 auto; }
.peEdit-btn-cancel { color:var(--textmid); background:transparent; border-color:var(--tint-8); }
.peEdit-btn-cancel:hover { color:var(--textbright); border-color:rgba(255,255,255,0.28); background:var(--tint-4); }
.peEdit-btn-save { color:var(--fcolor); background:linear-gradient(135deg, rgba(var(--fc),0.18), rgba(var(--fc),0.06)); border-color:rgba(var(--fc),0.5); text-shadow:0 0 8px rgba(var(--fc),0.4); display:inline-flex; align-items:center; gap:6px; }
.peEdit-btn-save:hover { background:linear-gradient(135deg, rgba(var(--fc),0.28), rgba(var(--fc),0.1)); border-color:rgba(var(--fc),0.8); box-shadow:0 0 16px rgba(var(--fc),0.25); transform:translateY(-1px); }

@media (max-width:600px) {
  .peEdit-hero { padding:18px 14px 14px; gap:14px; }
  .peEdit-avatar { width:72px; height:72px; }
  .peEdit-name { font-size:16px; }
  .peEdit-rank-bar { padding:10px 12px; }
  .peEdit-rank-val { font-size:var(--fs-lg); }
  .peEdit-kpis { grid-template-columns:repeat(2,1fr); gap:5px; padding:10px 12px; }
  .peEdit-kpi-val { font-size:var(--fs-base); }
  .peEdit-body { padding:6px 12px 14px; }
  .peEdit-bld-grid { grid-template-columns:repeat(2,1fr); }
  .peEdit-actions { padding:12px; }
  .peEdit-btn-cancel, .peEdit-btn-save { padding:9px 14px; font-size:var(--fs-xs); letter-spacing:1px; flex:1; }
}

/* Legacy compat */
.player-link     { color:var(--textbright); cursor:pointer; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,0.3); padding-bottom:1px; transition:color 0.15s, border-color 0.15s; }
.player-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ══ TOOLTIP EDGE FIX ══ */
.gap-xs { gap:4px; } .gap-sm { gap:8px; }
.font-mono { font-family:var(--font-mono); }
.font-orb { font-family:var(--font-display); }
.text-gold { color:var(--gold2); } .text-success { color:var(--success); }
.text-danger { color:var(--danger); } .text-soft { color:var(--textsoft); }
.mt-xs { margin-top:4px; } .mt-sm { margin-top:8px; }
.mb-xs { margin-bottom:4px; } .mb-sm { margin-bottom:8px; }
.p-sm { padding:8px; } .p-md { padding:14px; }

/* ══ SKIP LINK (accessibility) ══ */
.skip-link {
  position:absolute; top:-100%; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#05090f; padding:8px 16px; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:var(--fs-sm); z-index:var(--z-confirm-modal);
  text-decoration:none;
}
.skip-link:focus { top:8px; }

/* ══ UPGRADE SUGGESTIONS ══ */
.ov-suggest-block { padding:10px 16px; }
.ov-suggest-title {
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:2px; color:var(--gold); margin-bottom:10px;
  text-shadow:0 0 12px rgba(212,146,10,0.3);
}
.ov-suggest-grid { display:flex; gap:10px; flex-wrap:wrap; }
.ov-suggest-card {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),0.06),rgba(var(--accent-rgb),0.02));
  border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:var(--radius-md); transition:all 0.25s; flex:1; min-width:160px;
  position:relative; overflow:hidden;
}
.ov-suggest-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:0.5; transition:opacity 0.25s;
}
.ov-suggest-card:hover {
  border-color:rgba(var(--accent-rgb),0.5);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),0.12),rgba(var(--accent-rgb),0.04));
  transform:translateY(-2px);
  box-shadow:0 4px 16px var(--shade-1), 0 0 12px rgba(var(--accent-rgb),0.08);
}
.ov-suggest-card:hover::before { opacity:1; }
.ov-suggest-ico { font-size:28px; filter:drop-shadow(0 2px 6px var(--shade-3)); flex-shrink:0; }
.ov-suggest-name {
  font-family:var(--font-mono); font-size:var(--fs-md); font-weight:600;
  color:var(--textbright); letter-spacing:0.5px;
}
.ov-suggest-cost {
  font-family:var(--font-mono); font-size:var(--fs-md); color:var(--gold);
  margin-top:2px; display:flex; align-items:center; gap:4px;
}
.ov-suggest-lv {
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  color:var(--accent); background:rgba(var(--accent-rgb),0.12);
  padding:2px 8px; border-radius:var(--radius-sm); letter-spacing:1px;
}

/* ══════════════════════════════════════
   SECTION BACKGROUNDS — Themed per section
   ══════════════════════════════════════ */
.sec-full { position:relative; }
#sf_fleet {
  background: rgba(6,10,22,0.30);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#sf_galaxy {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#sf_galaxy > canvas#galBg { display: none; }
#sf_fleet::before, #sf_alliance::before, #sf_market::before,
#sf_reports::before, #sf_commanders::before, #sf_rankings::before,
#sf_codex::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
}
#sf_fleet::before {
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 38% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 72% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 55% 75%, rgba(255,255,255,0.45), transparent),
    radial-gradient(2px 2px at 88% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 22% 85%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 65% 12%, rgba(var(--accent-rgb),0.5), transparent),
    radial-gradient(1.5px 1.5px at 30% 42%, rgba(var(--accent-rgb),0.35), transparent),
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(140,200,255,0.04) 4px, rgba(140,200,255,0.04) 5px);
  animation:loStarTwinkle 6s ease-in-out 1;
}
#sf_alliance::before {
  background:radial-gradient(ellipse at 30% 20%, rgba(120,80,200,0.2) 0%, transparent 55%),
             radial-gradient(ellipse at 70% 75%, rgba(60,120,220,0.15) 0%, transparent 50%),
             radial-gradient(ellipse at 50% 50%, rgba(90,60,180,0.08) 0%, transparent 70%);
}
#sf_market::before {
  background:radial-gradient(ellipse at 50% 25%, rgba(255,192,64,0.12) 0%, transparent 50%),
             radial-gradient(ellipse at 30% 80%, rgba(255,192,64,0.08) 0%, transparent 40%),
             radial-gradient(ellipse at 80% 60%, rgba(255,220,80,0.06) 0%, transparent 45%);
}
#sf_reports::before {
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,70,70,0.04) 3px, rgba(255,70,70,0.04) 4px),
             radial-gradient(ellipse at 50% 30%, rgba(255,60,60,0.06) 0%, transparent 60%);
}
#sf_commanders::before {
  background:radial-gradient(ellipse at 40% 30%, rgba(255,200,60,0.12) 0%, transparent 50%),
             radial-gradient(2px 2px at 18% 20%, rgba(255,200,60,0.6), transparent),
             radial-gradient(2px 2px at 78% 35%, rgba(255,200,60,0.5), transparent),
             radial-gradient(1.5px 1.5px at 45% 65%, rgba(255,200,60,0.4), transparent),
             radial-gradient(2px 2px at 62% 80%, rgba(255,200,60,0.35), transparent);
}
#sf_rankings::before {
  background:repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(var(--accent-rgb),0.04) 30px, rgba(var(--accent-rgb),0.04) 31px),
             repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(var(--accent-rgb),0.03) 30px, rgba(var(--accent-rgb),0.03) 31px);
}
#sf_codex::before {
  background:radial-gradient(ellipse at 50% 35%, rgba(0,229,255,0.1) 0%, transparent 50%),
             radial-gradient(ellipse at 20% 70%, rgba(0,229,255,0.06) 0%, transparent 40%);
}
/* Grid background for planet sections (overview/infra) */
#planetSection {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(var(--accent-rgb),0.06) 40px, rgba(var(--accent-rgb),0.06) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(var(--accent-rgb),0.04) 40px, rgba(var(--accent-rgb),0.04) 41px);
}

/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════ */

/* ══ FRIENDS ══ */
.fr-header { font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--gold);letter-spacing:4px;text-transform:uppercase;padding:20px 8px 16px;border-bottom:1px solid rgba(212,146,10,0.22);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:14px;text-shadow:0 0 14px rgba(212,146,10,0.4), 0 0 28px rgba(212,146,10,0.18);position:relative; }
.fr-header::before { content:''; position:absolute; top:0; left:12%; right:12%; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow:0 0 10px rgba(212,146,10,0.4); }
.fr-header-count { font-family:var(--font-mono);font-size:var(--fs-md);font-weight:400;color:var(--success);letter-spacing:1px;opacity:.9; }
.fr-list { display:flex;flex-direction:column;gap:8px; }
.fr-row { display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(8,14,28,0.7),rgba(6,10,22,0.7));border:1px solid rgba(255,255,255,0.09);transition:all .2s;backdrop-filter:blur(6px);  box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.35); }
.fr-row:hover { background:linear-gradient(180deg,rgba(14,22,40,0.8),rgba(10,16,30,0.8));border-color:rgba(255,255,255,0.18);border-left-color:var(--accent);transform:translateX(3px); }
.fr-row-online { border-left-color:var(--success);box-shadow:inset 0 0 20px rgba(46,204,113,0.04); }
.fr-dot { width:11px;height:11px;border-radius:50%;flex-shrink:0;background:var(--textsoft);transition:box-shadow .3s; }
.fr-dot.online { background:var(--success);box-shadow:0 0 8px rgba(46,204,113,0.75);animation:frPulse 2s ease-in-out infinite; }
@keyframes frPulse { 0%,100%{box-shadow:0 0 6px rgba(46,204,113,0.7)} 50%{box-shadow:0 0 12px rgba(46,204,113,1)} }
.fr-name { font-family:var(--font-body);font-size:16px;font-weight:700;color:var(--textbright);cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0.3px; }
.fr-name:hover { color:var(--accent);text-decoration:underline; }
.fr-faction-tag { font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;padding:3px 10px;border-radius:var(--radius-lg);border:1px solid;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;opacity:.9; }
.fr-actions { display:flex;gap:6px;flex-shrink:0; }
.fr-btn { font-family:var(--font-body);font-size:var(--fs-base);font-weight:700;padding:7px 14px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.18);color:var(--textmid);background:var(--tint-3);transition:all .18s;letter-spacing:0.5px;text-transform:uppercase; }
.fr-btn:hover { background:rgba(255,255,255,0.14);color:var(--textbright); }
.fr-btn-accept { border-color:rgba(46,204,113,0.45);color:var(--success);background:rgba(46,204,113,0.12); }
.fr-btn-accept:hover { background:rgba(46,204,113,0.25);box-shadow:0 0 10px rgba(46,204,113,0.2); }
.fr-btn-danger { border-color:rgba(231,76,60,0.45);color:var(--danger);background:rgba(231,76,60,0.12); }
.fr-btn-danger:hover { background:rgba(231,76,60,0.25);box-shadow:0 0 10px rgba(231,76,60,0.2); }
.fr-section-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;text-transform:uppercase;letter-spacing:3px;padding:8px 0 8px 14px;margin:14px 0 10px;border-left:3px solid; }
.fr-empty { text-align:center;padding:24px 12px;color:var(--textsoft);opacity:.7;font-family:Rajdhani,sans-serif;font-size:var(--fs-md); }
.fr-time { font-family:Rajdhani,sans-serif;font-size:var(--fs-md);color:var(--textsoft);flex-shrink:0; }
.fr-search-input { width:100%;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--tint-5);background:var(--tint-2);color:var(--textbright);font-family:Rajdhani,sans-serif;font-size:var(--fs-md);outline:none;transition:border-color .2s;margin-bottom:10px; }
.fr-search-input:focus { border-color:var(--accent); }
.fr-search-input::placeholder { color:var(--textsoft); }
/* Sprint 16 */
.fr-search-wrap { padding:8px 0; position:relative; }
.fr-search-clear { display:none; position:absolute; right:10px; top:16px; width:22px; height:22px; border-radius:50%; border:none; background:var(--tint-7); color:var(--textsoft); font-size:var(--fs-sm); cursor:pointer; line-height:22px; text-align:center; padding:0; }
.fr-search-clear:hover { background:rgba(231,76,60,0.25); color:var(--danger); }
.fr-tab-cnt { display:inline-block; font-size:var(--fs-xs); padding:1px 6px; margin-left:4px; border-radius:var(--radius); background:var(--tint-4); color:var(--textsoft); font-weight:600; }
.fr-sec-cnt { display:inline-block; font-size:var(--fs-sm); padding:0 6px; margin-left:6px; border-radius:var(--radius); background:var(--tint-4); color:var(--textbright); letter-spacing:0; }
.fr-sec-hint { font-size:var(--fs-xs); color:var(--textsoft); margin-left:8px; letter-spacing:0.5px; font-weight:400; text-transform:none; }
.fr-lastseen { opacity:.6; font-size:var(--fs-xs); }
.fr-empty-title { font-family:var(--font-display); font-size:var(--fs-lg); color:var(--textmid); letter-spacing:1.5px; margin-bottom:6px; }
.fr-empty-sub   { font-family:var(--font-body); font-size:var(--fs-base); color:var(--textsoft); margin-bottom:14px; }
.fr-empty .fr-btn { display:inline-block; padding:8px 18px; font-size:var(--fs-md); }

/* ═══ CHAT SECTION ═══ */
.chat-layout { display:flex;flex-direction:column;height:100%;overflow:hidden; }
.chat-tab-bar { display:flex;gap:8px;padding:14px 20px 4px;flex-shrink:0;justify-content:center;background:linear-gradient(180deg,var(--shade-1),transparent);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; }
.chat-tab-bar::-webkit-scrollbar { display:none; }
.chat-tab-pill { font-family:var(--font-display);font-size:var(--fs-base);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:10px 22px;border-radius:22px;cursor:pointer;border:1px solid rgba(255,255,255,0.14);color:var(--textmid);background:var(--tint-2);transition:all 0.2s;position:relative; }
.chat-tab-pill:hover { border-color:rgba(var(--accent-rgb),0.4);color:var(--textbright);background:var(--tint-4); }
.chat-tab-pill.active { border-color:var(--accent);color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),0.18),rgba(var(--accent-rgb),0.06));box-shadow:0 0 14px rgba(var(--accent-rgb),0.25), inset 0 0 6px rgba(var(--accent-rgb),0.1); }
.chat-tab-pill.disabled { opacity:0.4;pointer-events:none; }
.chat-tab-unread { position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:var(--radius);background:var(--danger);color:var(--textbright);font-size:var(--fs-md);font-family:var(--font-display);display:flex;align-items:center;justify-content:center;padding:0 4px; }
.chat-body { flex:1;overflow-y:auto;padding:10px 14px; }
.chat-body .al-chat-container { height:auto;min-height:280px;max-height:calc(100dvh - 240px);max-height:calc(var(--vvh, 100dvh) - 240px); }
/* Mobile/tablette — chat GLOBAL/ALLIANCE uniquement (scopé via
   :has(> .al-chat-input-row) car .chat-body est partagé avec MESSAGES).
   Le conteneur garde une max-height bornée → il scrolle en interne (comme
   avant). On supprime le position:sticky de l'input (trop fragile selon la
   hauteur d'écran : il flottait au milieu et laissait des messages dessous) :
   input static = toujours juste sous les messages. max-height = vvh - chrome
   haut (~232) - input (59) - nav fixe (60) - marge → input AU-DESSUS de la nav,
   quelle que soit la hauteur d'écran. */
@media (max-width:760px){
  .chat-body:has(> .al-chat-input-row) > .al-chat-container{
    max-height:calc(var(--vvh, 100dvh) - 364px - env(safe-area-inset-bottom,0px));
    min-height:200px;
  }
  .chat-body:has(> .al-chat-input-row) > .al-chat-input-row{
    position:static;
  }
}

/* Mobile/tablette — chat du menu ALLIANCE (renderAllianceChatTab).
   Même solution que v203 (.chat-body) mais scopé .al-body car .al-body
   est partagé par les autres onglets Alliance (members/diplo/...).
   Conteneur borné (scroll interne) + input static (plus de sticky flottant).
   Breakpoint 768 (≠ 760 du chat-section) pour couvrir la tablette portrait :
   c'est la largeur où le bottom-nav s'affiche et où sgc-responsive.css:1990
   force déjà bottom!important sur .al-chat-input-row. */
@media (max-width:768px){
  .app .al-layout .al-body:has(> .al-chat-input-row) > .al-chat-container{
    height:auto;
    max-height:calc(var(--vvh, 100dvh) - 450px - env(safe-area-inset-bottom,0px));
    min-height:200px;
  }
  /* `.app .al-layout` ajouté : sgc-alliance.css force `.app .al-layout .al-body > *
     { position:relative }` (même spécificité, chargé après) → l'input restait
     positionné et le `bottom:60px !important` de sgc-responsive le faisait
     remonter par-dessus les derniers messages. On gagne en spécificité +
     !important + bottom:auto pour le remettre en flux normal. */
  .app .al-layout .al-body:has(> .al-chat-input-row) > .al-chat-input-row{
    position:static !important;
    bottom:auto !important;
  }
}

/* Vue conversation MP : hauteur portée par la classe (plus dans le style
   inline) pour que l'override mobile ci-dessous puisse s'appliquer — un
   height inline battrait toute règle de feuille de style. */
.msg-conv-wrap{ height:100%; }
/* Mobile — borne le wrapper pour que .msg-thread scrolle en interne et que
   la .msg-bar (← Retour) reste épinglée en haut. Sinon tout le conteneur
   grandit et le bouton Retour part hors écran. */
@media (max-width:760px){
  .msg-conv-wrap{
    height:calc(var(--vvh, 100dvh) - 304px - env(safe-area-inset-bottom,0px));
    min-height:300px;
  }
}

/* ═══ CONVERSION NAQUADRIA MODAL ═══ */
.conv-overlay { position:fixed;inset:0;z-index:var(--z-overlay-fullscreen);background:var(--shade-3);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
.conv-card { background:var(--panelbg,#0d1117);border:1px solid rgba(46,204,136,0.25);border-radius:var(--radius-lg);padding:20px 24px;min-width:320px;max-width:400px;box-shadow:0 8px 32px var(--shade-2); }
.conv-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--accent);margin-bottom:12px;text-align:center; }
.conv-tabs { display:flex;gap:4px;margin-bottom:14px; }
.conv-tab { flex:1;padding:8px;border:1px solid var(--tint-4);border-radius:6px;background:var(--tint-2);color:var(--textsoft);font-family:var(--font-mono);font-size:var(--fs-md);cursor:pointer;transition:all .15s; }
.conv-tab.active { background:rgba(46,204,136,0.12);border-color:rgba(46,204,136,0.35);color:var(--accent); }
.conv-info { text-align:center;font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);margin-bottom:12px;padding:8px;background:var(--tint-2);border-radius:6px; }
.conv-balance { display:flex;justify-content:space-around;margin-bottom:12px;font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft); }
.conv-lbl { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-bottom:4px;display:block; }
.conv-input-row { margin-bottom:10px; }
.conv-inp { width:100px;padding:6px 8px;border:1px solid rgba(46,204,136,0.25);border-radius:6px;background:var(--shade-1);color:var(--textbright);font-family:var(--font-mono);font-size:var(--fs-md);text-align:center; }
.conv-max-btn { padding:4px 10px;border:1px solid rgba(46,204,136,0.3);border-radius:6px;background:rgba(46,204,136,0.1);color:var(--success);font-family:var(--font-display);font-size:var(--fs-md);cursor:pointer; }
.conv-preview { text-align:center;font-family:var(--font-mono);font-size:var(--fs-md);margin:10px 0;min-height:18px; }
.conv-actions { display:flex;gap:8px;justify-content:center;margin-top:14px; }
.conv-btn { padding:8px 18px;border-radius:6px;font-family:var(--font-display);font-size:var(--fs-md);cursor:pointer;border:1px solid var(--tint-7);transition:all .15s; }
.conv-btn.cancel { background:var(--tint-4);color:var(--textsoft); }
.conv-btn.confirm { background:rgba(46,204,136,0.15);border-color:rgba(46,204,136,0.4);color:var(--success); }
.conv-btn.confirm:disabled { opacity:0.5;cursor:not-allowed; }

/* ═══ PONT INTERGALACTIQUE — Bridge Transfer Panel ═══ */
.brd-overlay { position:fixed;inset:0;z-index:var(--z-overlay-fullscreen);background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px); }
.brd-card {
  background:linear-gradient(170deg, rgba(6,14,30,0.98), rgba(4,8,18,0.99));
  border:1px solid rgba(var(--accent-rgb),0.3);
  border-radius:var(--radius-xl); padding:0; width:480px; max-width:92vw;
  box-shadow:0 0 40px rgba(var(--accent-rgb),0.08), 0 12px 40px var(--shade-5);
  overflow:hidden;
}
.brd-header {
  text-align:center; padding:24px 24px 16px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06), transparent);
  border-bottom:1px solid rgba(var(--accent-rgb),0.12);
}
.brd-icon { font-size:36px; margin-bottom:6px; filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),0.4)); }
.brd-title {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:2px; color:var(--textbright);
  text-shadow:0 0 14px rgba(var(--accent-rgb),0.3);
}
.brd-subtitle {
  font-family:var(--font-mono); font-size:var(--fs-md);
  color:var(--textsoft); letter-spacing:1px; margin-top:4px;
}
.brd-cooldown {
  text-align:center; padding:10px 16px; margin:12px 20px 0;
  font-family:var(--font-mono); font-size:var(--fs-md);
  color:var(--warn); background:rgba(255,180,0,0.06);
  border:1px solid rgba(255,180,0,0.2); border-radius:var(--radius);
}
.brd-tabs { display:flex; gap:6px; padding:16px 20px 0; }
.brd-tab {
  flex:1; padding:12px 8px; border:1px solid rgba(var(--accent-rgb),0.15);
  border-radius:var(--radius-md); background:rgba(var(--accent-rgb),0.03);
  color:var(--textsoft); cursor:pointer; transition:all 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.brd-tab.active {
  background:rgba(var(--accent-rgb),0.10); border-color:rgba(var(--accent-rgb),0.4);
  color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.1);
}
.brd-tab:hover:not(.active) { background:rgba(var(--accent-rgb),0.06); }
.brd-tab-icon { font-size:16px; }
.brd-tab-arrow { font-size:var(--fs-md); color:var(--textsoft); }
.brd-tab-label { font-family:var(--font-mono); font-size:var(--fs-md); letter-spacing:0.5px; }
.brd-section { padding:12px 20px 0; }
.brd-label {
  font-family:var(--font-body); font-size:var(--fs-md); font-weight:600;
  color:var(--textmid); letter-spacing:1.5px; text-transform:uppercase;
  display:block; margin-bottom:6px;
}
.brd-select {
  width:100%; padding:10px 14px; appearance:none; -webkit-appearance:none;
  background:var(--shade-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(100,200,255,0.5)'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(var(--accent-rgb),0.2); border-radius:var(--radius);
  color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-md);
  cursor:pointer; transition:border-color 0.2s;
}
.brd-select:focus { border-color:rgba(var(--accent-rgb),0.5); outline:none; box-shadow:0 0 10px rgba(var(--accent-rgb),0.15); }
.brd-select option { background:#0a1428; color:var(--textbright); }
.brd-balance {
  display:flex; align-items:center; gap:8px;
  padding:16px 20px;
}
.brd-planet-card {
  flex:1; padding:12px; border-radius:var(--radius-md);
  background:rgba(var(--accent-rgb),0.04);
  border:1px solid rgba(var(--accent-rgb),0.12);
  text-align:center;
}
.brd-planet-card.brd-source { border-color:rgba(224,80,80,0.2); background:rgba(224,80,80,0.04); }
.brd-planet-card.brd-dest { border-color:rgba(46,204,136,0.2); background:rgba(46,204,136,0.04); }
.brd-planet-icon { font-size:24px; margin-bottom:4px; }
.brd-planet-name {
  font-family:var(--font-body); font-size:var(--fs-md); font-weight:700;
  color:var(--textbright); letter-spacing:0.5px; margin-bottom:4px;
}
.brd-planet-pop { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); margin-bottom:6px; }
.brd-planet-bar {
  height:4px; background:var(--tint-3); border-radius:2px; overflow:hidden;
}
.brd-bar-fill { height:100%; border-radius:2px; transition:width 0.3s; }
.brd-source .brd-bar-fill { background:linear-gradient(90deg, rgba(224,80,80,0.6), rgba(224,80,80,0.3)); }
.brd-dest .brd-bar-fill { background:linear-gradient(90deg, rgba(46,204,136,0.3), rgba(46,204,136,0.6)); }
.brd-arrow-col {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brd-transfer-arrow {
  font-size:var(--fs-2xl); color:var(--accent); opacity:0.6;
  animation:brdArrowPulse 1.5s ease-in-out infinite;
}
@keyframes brdArrowPulse {
  0%,100% { opacity:0.4; transform:translateX(0); }
  50% { opacity:1; transform:translateX(4px); }
}
.brd-input-row { display:flex; gap:8px; align-items:center; }
.brd-input {
  flex:1; padding:10px 14px;
  border:1px solid rgba(var(--accent-rgb),0.2); border-radius:var(--radius);
  background:var(--shade-1); color:var(--textbright);
  font-family:var(--font-mono); font-size:var(--fs-lg); font-weight:700;
  text-align:center; transition:border-color 0.2s;
}
.brd-input:focus { border-color:rgba(var(--accent-rgb),0.5); outline:none; box-shadow:0 0 10px rgba(var(--accent-rgb),0.15); }
.brd-max-btn {
  padding:10px 18px; border:1px solid rgba(var(--accent-rgb),0.3); border-radius:var(--radius);
  background:rgba(var(--accent-rgb),0.08); color:var(--accent);
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:all 0.2s;
}
.brd-max-btn:hover { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.5); }
.brd-preview {
  text-align:center; padding:12px 20px; min-height:20px;
  font-family:var(--font-mono); font-size:var(--fs-md);
}
.brd-pv-src { color:var(--danger); }
.brd-pv-arrow { color:var(--accent); margin:0 8px; font-size:16px; }
.brd-pv-dst { color:var(--success); }
.brd-actions {
  display:flex; gap:10px; padding:8px 20px 20px; justify-content:center;
}
.brd-btn {
  flex:1; padding:12px 20px; border-radius:var(--radius-md);
  font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  letter-spacing:1px; cursor:pointer; border:1px solid; transition:all 0.2s;
}
.brd-btn-cancel {
  background:var(--tint-2); border-color:var(--tint-7);
  color:var(--textsoft);
}
.brd-btn-cancel:hover { background:var(--tint-4); }
.brd-btn-confirm {
  background:linear-gradient(135deg, rgba(46,204,136,0.15), rgba(46,204,136,0.08));
  border-color:rgba(46,204,136,0.4); color:var(--success);
  text-shadow:0 0 10px rgba(46,204,136,0.3);
}
.brd-btn-confirm:hover:not(:disabled) {
  background:linear-gradient(135deg, rgba(46,204,136,0.25), rgba(46,204,136,0.12));
  box-shadow:0 0 16px rgba(46,204,136,0.15);
}
.brd-btn-confirm:disabled { opacity:0.4; cursor:not-allowed; }
.brd-direction-label { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px 4px; font-family:var(--font-mono); font-size:var(--fs-lg); color:var(--textmid); letter-spacing:0.5px; }
.brd-direction-label .brd-transfer-arrow { font-size:18px; }
.brd-troop-list { padding:8px 20px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.brd-troop-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--tint-2); border:1px solid var(--tint-3); border-radius:var(--radius); }
.brd-troop-icon { font-size:18px; flex:0 0 34px; min-height:32px; display:flex; align-items:center; justify-content:center; }
.brd-troop-icon img { width:32px; height:32px; object-fit:cover; border-radius:6px; }
.brd-troop-name { flex:1; font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textbright); letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brd-troop-avail { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--textsoft); flex:0 0 auto; min-width:50px; text-align:right; }
.brd-troop-input { width:70px; padding:4px 6px; background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.15); border-radius:6px; color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-base); text-align:center; }
.brd-troop-input:focus { border-color:rgba(var(--accent-rgb),0.5); outline:none; box-shadow:0 0 8px rgba(var(--accent-rgb),0.15); }
.brd-no-troops { text-align:center; padding:20px; color:var(--textsoft); font-family:var(--font-mono); font-size:var(--fs-md); }
.brd-all-row { display:flex; gap:8px; justify-content:center; padding:4px 20px 8px; }
.brd-all-btn { padding:5px 14px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.2); border-radius:6px; color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-sm); cursor:pointer; transition:all .15s; }
.brd-all-btn:hover { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.4); }
.brd-reset-btn { color:var(--textsoft); border-color:var(--tint-7); background:var(--tint-2); }
.brd-reset-btn:hover { background:var(--tint-3); }
@media(max-width:480px) {
  .brd-card { max-width:100vw; border-radius:var(--radius-lg); }
  .brd-arrow-col { transform:rotate(90deg); }
  .brd-header { padding:18px 16px 12px; }
  .brd-title { font-size:var(--fs-md); }
  .brd-troop-name { font-size:var(--fs-xs); }
  .brd-troop-input { width:55px; }
}

/* Expedition tabs */
.exp-tab { flex:0 0 auto;padding:5px 8px;border:1px solid var(--tint-4);border-radius:6px;background:var(--tint-2);color:var(--textsoft);font-family:var(--font-mono);font-size:var(--fs-md);cursor:pointer;transition:all .15s;white-space:nowrap; }
.exp-tab.active { background:rgba(255,120,50,0.12);border-color:rgba(255,120,50,0.35);color:#ff8844; }
.exp-tab:disabled { opacity:0.4;cursor:not-allowed; }

/* ═══ QUICK ACTIONS HUB v2 ═══ */
.qa-sec-hdr { display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2.5px;color:var(--accent);margin:8px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(var(--accent-rgb),0.12);text-transform:uppercase; }
.qa-sec-dot { width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex-shrink:0; }
.qa-sec-dot.tool { background:var(--gold);box-shadow:0 0 8px var(--gold); }
.qa-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px; }
.qa-card { display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid rgba(var(--accent-rgb),0.12);background:linear-gradient(160deg,rgba(var(--accent-rgb),0.04) 0%,rgba(0,0,0,0.15) 100%);transition:all .25s;position:relative;overflow:hidden; }
.qa-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .25s; }
.qa-card.ready { border-color:rgba(46,204,136,0.25); }
.qa-card.ready::before { background:linear-gradient(90deg,rgba(46,204,136,0.6),rgba(46,204,136,0.1)); }
.qa-card.ready:hover { border-color:rgba(46,204,136,0.45);box-shadow:0 4px 20px rgba(46,204,136,0.08);transform:translateY(-1px); }
.qa-card.active { border-color:rgba(var(--accent-rgb),0.4);box-shadow:0 0 16px rgba(var(--accent-rgb),0.1); }
.qa-card.active::before { background:linear-gradient(90deg,rgba(var(--accent-rgb),0.8),rgba(var(--accent-rgb),0.1));animation:qaBarPulse 2s infinite; }
.qa-card.cooldown,.qa-card.spent { border-color:var(--tint-3);opacity:0.55; }
.qa-card.locked { border-color:var(--tint-4);opacity:0.7;cursor:pointer; }
.qa-card.locked:hover { opacity:0.9;border-color:var(--gold); }
.qa-ico { font-size:24px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.12);flex-shrink:0; }
.qa-card.ready .qa-ico { background:rgba(46,204,136,0.08);border-color:rgba(46,204,136,0.2); }
.qa-card.active .qa-ico { background:rgba(var(--accent-rgb),0.12);border-color:rgba(var(--accent-rgb),0.3);animation:qaGlow 2s 1; }
.qa-ico.has-portrait { padding:0;overflow:hidden;background:rgba(0,0,0,0.25); }
.qa-ico-img { width:100%;height:100%;object-fit:cover;display:block; }
.qa-info { flex:1;min-width:0; }
.qa-name { font-family:var(--font-body);font-size:var(--fs-md);font-weight:700;color:var(--textbright);display:flex;align-items:center;gap:6px; }
.qa-uses { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;padding:1px 6px;border-radius:var(--radius);background:rgba(46,204,136,0.12);border:1px solid rgba(46,204,136,0.25);color:var(--success);letter-spacing:0.5px; }
.qa-desc { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.qa-btn { min-height:34px;padding:6px 12px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:0.8px;border:1px solid var(--tint-7);background:var(--tint-2);color:var(--textmid);transition:all .2s;width:100%; }
.qa-btn.ready { border-color:rgba(46,204,136,0.5);color:var(--textbright);background:linear-gradient(135deg,rgba(46,204,136,0.2),rgba(46,204,136,0.08));text-shadow:0 0 10px rgba(46,204,136,0.4); }
.qa-btn.ready:hover { background:linear-gradient(135deg,rgba(46,204,136,0.35),rgba(46,204,136,0.15));box-shadow:0 0 18px rgba(46,204,136,0.2);transform:scale(1.02); }
.qa-btn.active { border-color:rgba(var(--accent-rgb),0.45);color:var(--accent);background:rgba(var(--accent-rgb),0.1);animation:qaGlow 2s 1; }
.qa-btn.cooldown,.qa-btn.spent { border-color:var(--tint-3);color:var(--textsoft);background:var(--tint-1);cursor:not-allowed; }
.qa-btn.locked { border-color:rgba(255,200,60,0.35);color:var(--gold);background:rgba(255,200,60,0.06);cursor:pointer; }
.qa-bench-hint { display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 14px;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-base);color:var(--textsoft);background:rgba(var(--accent-rgb),0.04);border:1px dashed rgba(var(--accent-rgb),0.18);transition:all .2s; }
.qa-bench-hint:hover { border-color:rgba(var(--accent-rgb),0.4);color:var(--textbright);background:rgba(var(--accent-rgb),0.07); }
.qa-bench-ico { font-size:16px;flex-shrink:0; }
.qa-bench-link { margin-left:auto;color:var(--accent);font-weight:700;white-space:nowrap; }
@keyframes qaBarPulse { 0%,100%{opacity:1}50%{opacity:0.4} }
@keyframes qaGlow { 0%,100%{box-shadow:0 0 6px rgba(var(--accent-rgb),0.12)}50%{box-shadow:0 0 16px rgba(var(--accent-rgb),0.3)} }
@media(max-width:480px) { .qa-grid{grid-template-columns:1fr} .qa-btn{min-height:44px;font-size:14px} .qa-card{padding:14px} }

/* ═══ AVATAR PICKER ═══ */
.avatar-picker-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px; }
.avatar-picker-item { width:52px;height:52px;border-radius:50%;overflow:hidden;cursor:pointer;border:2px solid var(--tint-7);transition:all .2s;position:relative; }
.avatar-picker-item:hover { border-color:rgba(var(--accent-rgb),0.5);transform:scale(1.1);box-shadow:0 0 12px rgba(var(--accent-rgb),0.2); }
.avatar-picker-active { border-color:var(--accent)!important;box-shadow:0 0 16px rgba(var(--accent-rgb),0.4)!important;transform:scale(1.1); }
.avatar-picker-active::after { content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);color:var(--textbright);font-size:18px;font-weight:700; }
.avatar-picker-locked { cursor:not-allowed; }
.avatar-picker-locked > img, .avatar-picker-locked > .avatar-abstract { filter:grayscale(0.85) brightness(0.55); }
.avatar-picker-locked:hover { transform:none;border-color:rgba(255,180,71,0.6);box-shadow:none; }
.avatar-picker-lock { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,0.9),0 0 2px rgba(0,0,0,1); }
.avatar-abstract { border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1; }

/* ═══ SOS MISSIONS (glassmorphism) ═══ */
.sos-card { background:rgba(8,12,30,0.70);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,180,0,0.15);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;transition:border-color .2s; }
.sos-card:hover { border-color:rgba(255,180,0,0.45); }
.sos-header { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.sos-icon { font-size:var(--fs-2xl); }
.sos-type { font-weight:700;color:var(--warn);font-size:16px;flex:1; }
.sos-timer { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--accent3);font-weight:700; }
.sos-planet { font-size:var(--fs-md);color:var(--textsoft);margin-bottom:6px; }
.sos-rewards { display:flex;align-items:center;gap:10px;font-size:var(--fs-md);color:var(--textmid);flex-wrap:wrap;margin-bottom:8px; }
.sos-accept-btn { width:100%;padding:10px;background:linear-gradient(135deg,rgba(255,180,0,0.15),rgba(255,180,0,0.05));border:1px solid rgba(255,180,0,0.3);border-radius:var(--radius);color:var(--warn);font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:1px; }
.sos-accept-btn:hover:not(:disabled) { background:rgba(255,180,0,0.2);border-color:rgba(255,180,0,0.6); }
.sos-accept-btn:disabled { opacity:0.4;cursor:not-allowed; }
.gate-badge { display:inline-block;min-width:16px;height:16px;line-height:16px;text-align:center;background:var(--danger);color:var(--textbright);border-radius:50%;font-size:var(--fs-xs);font-weight:700;margin-left:4px;padding:0 4px; }

/* F8 — Epic SOS styling */
.sos-card-epic {
  border:1px solid rgba(255,215,96,0.55)!important;
  background:linear-gradient(135deg, rgba(80,50,10,0.35), rgba(30,20,5,0.75))!important;
  box-shadow:0 0 18px rgba(255,200,60,0.22), inset 0 0 14px rgba(255,200,60,0.08);
  position:relative; overflow:hidden;
}
.sos-card-epic::before {
  content:''; position:absolute; inset:-2px; border-radius:var(--radius-md); pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,215,96,0.25), transparent 70%);
  background-size:200% 100%;
  animation:sosEpicShimmer 3s linear infinite;
  z-index:0;
}
.sos-card-epic > * { position:relative; z-index:1; }
@keyframes sosEpicShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
/* P1.B3 — alerte visuelle SOS expire <= 15 min (toggle JS sgc-gate-sos.js _startSosTimer) */
.sos-card-urgent {
  border-color:rgba(255,80,80,0.65)!important;
  animation:sosUrgentPulse 1.6s ease-in-out infinite;
}
@keyframes sosUrgentPulse {
  0%,100% { box-shadow:0 0 0 rgba(255,80,80,0); }
  50%      { box-shadow:0 0 18px rgba(255,80,80,0.45); }
}
.sos-card-urgent .sos-timer { color:var(--danger)!important; font-weight:800; }
.sos-epic-banner {
  margin:-4px -4px 10px -4px; padding:6px 10px;
  background:linear-gradient(90deg, rgba(255,215,96,0.22), rgba(255,180,40,0.10));
  border:1px solid rgba(255,215,96,0.45); border-radius:6px;
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700;
  color:#ffd860; letter-spacing:0.6px; text-align:center;
  text-shadow:0 0 6px rgba(255,215,96,0.5);
}
.sos-accept-btn.sos-accept-epic {
  background:linear-gradient(135deg, rgba(255,215,96,0.22), rgba(255,140,20,0.12))!important;
  border-color:rgba(255,215,96,0.55)!important;
  color:#ffd860!important;
  text-shadow:0 0 6px rgba(255,215,96,0.4);
}
.sos-accept-btn.sos-accept-epic:hover:not(:disabled) {
  background:rgba(255,215,96,0.28)!important;
  border-color:rgba(255,215,96,0.8)!important;
}

/* ═══ ÉVÉNEMENT PvE (P4, 24/05/2026 — refonte design) ═══ */
/* Bouton fermer : flotte au-dessus du coin haut-droit de la card, ne chevauche
   plus le bandeau biome. Fond opaque pour rester lisible sur toutes les sections. */
.evt-close-btn { position:absolute; top:-14px; right:-14px; z-index:5;
  width:36px; height:36px; padding:0; border-radius:50%;
  background:#1a1f30; border:1px solid rgba(255,255,255,0.30); color:#fff;
  cursor:pointer; font-family:inherit; font-size:var(--fs-md); font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.50); transition:all .15s ease; }
.evt-close-btn:hover { background:#ff5555; border-color:#ff5555; transform:rotate(90deg); }
@media (max-width: 480px) { .evt-close-btn { top:-10px; right:-10px; width:32px; height:32px; } }

/* Bandeau biome — chip cyan en haut, sobre mais distinctif */
.evt-biome { display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:18px;
  background:linear-gradient(135deg, rgba(80,180,255,0.10), rgba(80,180,255,0.04));
  border:1px solid rgba(140,200,255,0.30); border-radius:var(--radius-md);
  box-shadow:inset 0 0 14px rgba(80,180,255,0.08); }
.evt-biome-ico { font-size:28px; line-height:1; filter:drop-shadow(0 0 6px rgba(140,200,255,0.6)); }
.evt-biome-body { flex:1; min-width:0; }
.evt-biome-title { font-family:'Orbitron',monospace;font-size:var(--fs-xs);letter-spacing:2px;color:#8bcfff;font-weight:700; }
.evt-biome-name { color:#fff; text-shadow:0 0 8px rgba(140,200,255,0.6); margin-left:4px; }
.evt-biome-desc { font-size:12.5px; color:rgba(255,255,255,0.78); margin-top:3px; line-height:1.5; }

/* HERO boss : IMAGE EN BACKGROUND plein rectangle, texte par-dessus avec overlay sombre */
.evt-hero { position:relative; padding:60px 24px 22px; margin-bottom:18px; border-radius:var(--radius-lg);
  min-height:220px; overflow:hidden;
  background-size:cover; background-position:50% 30%; background-repeat:no-repeat;
  border:1px solid rgba(255,140,80,0.45);
  box-shadow:inset 0 0 32px rgba(255,80,40,0.10), 0 6px 24px var(--shade-4); }
.evt-hero-text { position:relative; z-index:2; }
.evt-hero-eyebrow { font-family:'Orbitron',monospace; font-size:var(--fs-xs); letter-spacing:3px; color:#ffaa66; font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,0.9); }
.evt-hero-name { font-family:'Orbitron',monospace; font-size:var(--fs-4xl); font-weight:900; letter-spacing:1px; line-height:1.1; margin:6px 0 12px;
  background:linear-gradient(90deg, #ff9966, #ffcc88); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 12px rgba(0,0,0,0.9); filter:drop-shadow(0 0 18px rgba(255,140,80,0.5)); }
.evt-hero-lore { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.92); font-style:italic;
  text-shadow:0 1px 6px var(--shade-8); max-width:560px; }
.evt-mech { display:inline-flex; align-items:flex-start; gap:8px; margin-top:14px; padding:8px 14px;
  background:linear-gradient(90deg, rgba(35,15,5,0.85), rgba(35,15,5,0.65));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,140,80,0.55); border-radius:6px;
  font-size:12.5px; color:#ffd6b0; font-weight:500; letter-spacing:0.3px; line-height:1.45;
  text-shadow:0 1px 4px var(--shade-6); }
.evt-mech-ico { color:#ffaa55; font-size:var(--fs-md); flex-shrink:0; line-height:1.4; }
.evt-mech-txt { flex:1; min-width:0; }
@media (max-width: 480px) {
  .evt-hero { padding:50px 18px 18px; min-height:180px; background-position:50% 25%; }
  .evt-hero-name { font-size:24px; }
}

/* Sections génériques */
.evt-section { margin-bottom:16px; }
.evt-section-title { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:2.5px; color:#8bcfff;
  font-weight:700; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid rgba(140,200,255,0.15); }
.evt-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width: 640px) { .evt-grid-2col { grid-template-columns:1fr; } }

/* Garnison — grid 2-col, count XL aligné à gauche, nom à droite (anti-débordement) */
.evt-garr-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.evt-garr-cell { display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--tint-2); border:1px solid var(--tint-6); border-radius:6px;
  min-width:0; }
.evt-garr-count { font-family:'Orbitron',monospace; font-size:18px; font-weight:800; color:#ff9966;
  flex-shrink:0; min-width:60px; text-align:right; line-height:1; }
.evt-garr-name { font-size:var(--fs-sm); color:rgba(255,255,255,0.85); line-height:1.25;
  flex:1; min-width:0; overflow:hidden; }
/* Compact pour mobile : column si écran étroit */
@media (max-width: 380px) { .evt-garr-cell { flex-direction:column; align-items:flex-start; gap:2px; }
  .evt-garr-count { min-width:auto; text-align:left; }
}

/* Butin — 4 tuiles ressources */
.evt-loot-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
@media (max-width: 480px) { .evt-loot-row { grid-template-columns:repeat(2,1fr); } }
.evt-loot-cell { display:flex; flex-direction:column; align-items:center; padding:10px 6px;
  background:var(--tint-2); border:1px solid var(--tint-6); border-radius:6px;
  transition:transform .15s ease, border-color .15s ease; }
.evt-loot-cell:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.18); }
.evt-loot-ico { line-height:1; margin-bottom:4px; display:flex; align-items:center; justify-content:center; height:28px; }
.evt-loot-ico img.res-ico { width:28px !important; height:28px !important; }
.evt-loot-val { font-family:'Orbitron',monospace; font-size:var(--fs-lg); font-weight:700; color:#fff; }
.evt-loot-lbl { font-size:9px; letter-spacing:1px; color:var(--textsoft); margin-top:2px; text-transform:uppercase; }
.evt-loot-energy .evt-loot-val { color:#ffd766; }

/* Stats joueur — 3 tuiles */
.evt-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
@media (max-width: 640px) { .evt-stats { grid-template-columns:1fr; } }
.evt-stat-card { padding:12px; background:var(--tint-3); border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius); text-align:center; }
.evt-stat-lbl { font-size:10px; letter-spacing:1.5px; color:var(--textsoft); text-transform:uppercase; margin-bottom:6px; }
.evt-stat-val { font-family:'Orbitron',monospace; font-size:24px; font-weight:800; color:#fff; line-height:1; }
.evt-stat-val-soft { color:var(--textsoft); font-weight:500; font-size:18px; }
.evt-stat-suffix { font-size:var(--fs-xs); color:var(--textsoft); margin-left:2px; }
.evt-stat-attempts .evt-stat-val { color:var(--gold); }
.evt-stat-score .evt-stat-val { color:#8bcfff; }
.evt-stat-result .evt-stat-val { color:var(--textsoft); font-size:18px; }
.evt-stat-result.won .evt-stat-val { color:#50fa7b; }
.evt-attempts-bar { display:flex; gap:5px; justify-content:center; margin-top:8px; }
.evt-attempt-dot { width:14px; height:6px; border-radius:3px; background:var(--tint-8); }
.evt-attempt-dot.used { background:linear-gradient(90deg, var(--gold), #ffaa55); box-shadow:0 0 6px rgba(255,180,60,0.5); }

/* Bouton ENGAGE — hero, gradient prononcé + hover glow */
.evt-engage-btn { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%;
  padding:16px; margin-bottom:18px; border-radius:var(--radius-md); cursor:pointer; transition:all .2s ease;
  background:linear-gradient(135deg, #ff8855, #c04020); border:1px solid #ff8855;
  font-family:'Orbitron',monospace; color:#fff;
  box-shadow:0 4px 16px rgba(255,80,40,0.20), inset 0 1px 0 var(--tint-9); }
.evt-engage-btn:hover:not(.disabled) { transform:translateY(-2px); box-shadow:0 6px 24px rgba(255,80,40,0.45), inset 0 1px 0 rgba(255,255,255,0.20);
  background:linear-gradient(135deg, #ff9966, #d04030); }
.evt-engage-btn.disabled { background:var(--tint-3); border-color:rgba(255,255,255,0.10); color:var(--textsoft); cursor:not-allowed; box-shadow:none; }
.evt-engage-ico { font-size:var(--fs-2xl); line-height:1; margin-bottom:2px; }
.evt-engage-txt { font-size:16px; font-weight:800; letter-spacing:3px; }
.evt-engage-sub { font-size:10.5px; letter-spacing:1px; color:rgba(255,255,255,0.75); margin-top:3px; font-weight:500; }

/* Leaderboard — rank badges + tie-breakers (24/05) */
.evt-lb { background:var(--tint-2); border:1px solid var(--tint-6); border-radius:var(--radius); overflow:hidden; }
.evt-lb-empty { padding:18px; text-align:center; color:var(--textsoft); font-size:var(--fs-base); font-style:italic;
  background:var(--tint-1); border:1px dashed rgba(255,255,255,0.10); border-radius:var(--radius); }
/* 5 colonnes : rang / nom / score / pertes / tentatives */
.evt-lb-header { display:grid; grid-template-columns:36px 1fr 80px 60px 50px; align-items:center; gap:8px;
  padding:8px 12px; background:rgba(140,200,255,0.06); border-bottom:1px solid rgba(140,200,255,0.15);
  font-family:'Orbitron',monospace; font-size:10px; letter-spacing:1.5px; color:#8ca0c0; }
.evt-lb-rank-h, .evt-lb-name-h { text-align:left; }
.evt-lb-score-h, .evt-lb-loss-h, .evt-lb-att-h { text-align:right; cursor:help; }
.evt-lb-row { display:grid; grid-template-columns:36px 1fr 80px 60px 50px; align-items:center; gap:8px;
  padding:8px 12px; transition:background .15s ease; }
.evt-lb-row:not(:last-child) { border-bottom:1px solid var(--tint-3); }
.evt-lb-row:hover { background:var(--tint-3); }
.evt-lb-top { background:rgba(255,200,80,0.04); }
.evt-lb-rank { font-size:var(--fs-2xl); line-height:1; text-align:center; }
.evt-lb-rank-num { font-family:'Orbitron',monospace; font-size:var(--fs-md); color:var(--textsoft); font-weight:700; }
.evt-lb-name { font-size:var(--fs-base); color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evt-lb-score { font-family:'Orbitron',monospace; font-size:var(--fs-lg); color:#8bcfff; font-weight:700; text-align:right; }
.evt-lb-loss { font-family:'Orbitron',monospace; font-size:var(--fs-base); color:#bdd9ff; font-weight:600; text-align:right; }
.evt-lb-loss.evt-loss-clean { color:#a0e0a0; }
.evt-lb-loss.evt-loss-perfect { color:#ffd860; text-shadow:0 0 8px rgba(255,216,96,0.4); }
.evt-lb-att { font-family:'Orbitron',monospace; font-size:var(--fs-base); color:#a8b8d0; font-weight:600; text-align:right; }
.evt-lb-att.evt-att-first { color:#ffd860; text-shadow:0 0 8px rgba(255,216,96,0.4); }
.evt-lb-loss-na, .evt-lb-att-na { font-size:var(--fs-sm); color:#5a7090; text-align:right; }
.evt-lb-legend { margin-top:8px; padding:8px 12px; font-size:var(--fs-xs); color:#8ca0c0; line-height:1.5;
  background:rgba(140,200,255,0.04); border:1px solid rgba(140,200,255,0.10); border-radius:6px; }
.evt-stat-sub { font-size:10.5px; color:#8ca0c0; margin-top:4px; line-height:1.3; }
@media (max-width:560px) {
  .evt-lb-header, .evt-lb-row { grid-template-columns:30px 1fr 60px 50px 40px; gap:4px; padding:7px 8px; font-size:var(--fs-xs); }
  .evt-lb-name { font-size:var(--fs-sm); }
  .evt-lb-score { font-size:var(--fs-base); }
}

/* ═══ PÉGASE — 8th Chevron ═══ */
.pegasus-tab.active { border-color:rgba(168,85,247,0.6)!important;color:#c17aff!important;background:rgba(168,85,247,0.08)!important; }
.pegasus-row { border-left:2px solid transparent; }
.pegasus-row.sel { border-left-color:#c17aff;background:rgba(168,85,247,0.08); }
.pegasus-row.on-cd { opacity:0.5; }
.pegasus-chev { background:rgba(168,85,247,0.15)!important;border-color:rgba(168,85,247,0.4)!important;color:#c17aff; }
.pegasus-chev.active { background:rgba(168,85,247,0.3)!important;color:#e0b0ff!important;box-shadow:0 0 8px rgba(168,85,247,0.5); }
.pegasus-chev.lit, .pegasus-chev.active { text-shadow:0 0 6px #c17aff; }

/* ═══ 8th Chevron Splash Animation ═══ */
.chev8-splash {
  position:fixed;inset:0;z-index:var(--z-overlay-survival);display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);animation:chev8BgIn .3s ease-out forwards;pointer-events:none;
}
@keyframes chev8BgIn { to { background:rgba(10,0,30,0.85); } }
.chev8-splash-inner { text-align:center;animation:chev8ZoomIn .5s cubic-bezier(.17,.67,.29,1.4) forwards;opacity:0;transform:scale(0.1); }
@keyframes chev8ZoomIn { to { opacity:1;transform:scale(1); } }
.chev8-splash-flash {
  position:fixed;inset:0;background:radial-gradient(circle,rgba(168,85,247,0.6) 0%,rgba(168,85,247,0) 70%);
  animation:chev8Flash .8s ease-out forwards;pointer-events:none;
}
@keyframes chev8Flash { 0%{opacity:1;transform:scale(0.5)} 50%{opacity:1;transform:scale(1.5)} 100%{opacity:0;transform:scale(2)} }
.chev8-splash-symbol {
  font-size:120px;font-family:var(--font-mono);font-weight:900;
  color:#e0b0ff;text-shadow:0 0 40px #a855f7,0 0 80px #7c3aed,0 0 120px #6d28d9;
  animation:chev8Pulse 1.5s ease-in-out infinite;
}
@keyframes chev8Pulse { 0%,100%{text-shadow:0 0 40px #a855f7,0 0 80px #7c3aed} 50%{text-shadow:0 0 60px #c17aff,0 0 120px #a855f7,0 0 160px #7c3aed} }
.chev8-splash-label {
  font-family:var(--font-mono);font-size:24px;font-weight:700;
  color:var(--textbright);letter-spacing:6px;margin-top:12px;
  text-shadow:0 0 20px rgba(168,85,247,0.8);
  animation:chev8LabelIn .6s .2s ease-out both;
}
@keyframes chev8LabelIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ═══ EXPLORATION (glassmorphism) ═══ */
.explore-panel { padding:16px;text-align:center;background:rgba(8,12,30,0.70);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(var(--accent-rgb),0.12);border-radius:var(--radius-md); }
.explore-icon { font-size:36px;margin-bottom:10px; }
.explore-desc { font-size:var(--fs-lg);color:var(--textmid);margin-bottom:10px;line-height:1.5; }
.explore-counter { font-family:var(--font-mono);font-size:16px;color:var(--accent3);margin-bottom:6px;font-weight:700; }
.explore-cost { font-size:var(--fs-md);color:var(--textsoft);margin-bottom:12px; }
.explore-launch-btn { width:100%;padding:12px;background:linear-gradient(135deg,rgba(42,143,255,0.15),rgba(42,143,255,0.05));border:1px solid rgba(42,143,255,0.3);border-radius:var(--radius-md);color:var(--accent);font-family:var(--font-mono);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:1px; }
.explore-launch-btn:hover:not(:disabled) { background:rgba(42,143,255,0.2);border-color:rgba(42,143,255,0.6);box-shadow:0 0 12px rgba(42,143,255,0.2); }
.explore-launch-btn:disabled { opacity:0.4;cursor:not-allowed; }

/* ═══ EXPLORATION RESULT POPUP ═══ */
.exr-card {
  background: radial-gradient(ellipse at top, rgba(var(--glow),0.10) 0%, rgba(8,12,30,0.95) 70%);
  border: 1px solid rgba(var(--glow),0.35);
  border-radius:var(--radius-xl);
  padding: 32px 36px 24px;
  max-width: 400px;
  width: 90vw;
  text-align: center;
  font-family:var(--font-mono);
  box-shadow: 0 0 40px rgba(var(--glow),0.12), 0 8px 32px var(--shade-2);
  animation: exrSlideIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes exrSlideIn { from { opacity:0; transform:scale(0.92) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
.exr-icon { font-size: 52px; margin-bottom: 6px; filter: drop-shadow(0 0 12px rgba(var(--glow),0.5)); }
.exr-planet { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight: 800; color: var(--text); letter-spacing: 2px; margin-bottom: 4px; text-shadow: 0 0 16px rgba(var(--glow),0.4); }
.exr-label { font-size:var(--fs-md); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.exr-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--glow),0.3), transparent); margin: 0 20px 12px; }
.exr-section-title { font-size:var(--fs-xs); text-transform: uppercase; letter-spacing: 3px; color: var(--textsoft); margin-bottom: 10px; }
.exr-loot-grid { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.exr-loot-item { display: flex; align-items: center; gap: 6px; background: var(--tint-2); border: 1px solid var(--tint-4); border-radius:var(--radius); padding: 8px 14px; }
.exr-loot-icon { font-size: 18px; }
.exr-loot-val { font-size: 16px; font-weight: 700; color: var(--text); }
.exr-extras { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.exr-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size:var(--fs-base); font-weight: 700; }
.exr-tag-token { background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.3); color: var(--gold); }
.exr-tag-xp { background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3); color: var(--purple); }
.exr-bonus { font-size:var(--fs-base); color: var(--accent3); margin-bottom: 8px; }
.exr-fragments { font-size:var(--fs-base); color: var(--accent3); margin-bottom: 8px; }
.exr-losses { font-size:var(--fs-base); color: var(--danger); margin-bottom: 10px; padding: 6px 12px; background: rgba(255,40,40,0.08); border: 1px solid rgba(255,40,40,0.2); border-radius:var(--radius); }
.exr-remaining { font-size:var(--fs-sm); color: var(--textsoft); margin-bottom: 16px; }
.exr-ok { padding: 10px 40px; background: linear-gradient(135deg, rgba(var(--glow),0.18), rgba(var(--glow),0.06)); border: 1px solid rgba(var(--glow),0.35); border-radius:var(--radius-md); color: var(--text); font-family:var(--font-display); font-size:var(--fs-md); font-weight: 700; cursor: pointer; letter-spacing: 2px; transition: all .2s; }
.exr-ok:hover { background: rgba(var(--glow),0.25); box-shadow: 0 0 16px rgba(var(--glow),0.25); }

/* ═══ FACTION ICON PNGs (pixel-art, rendered via fIcon()) ═══ */
.fac-png { display:inline-block; vertical-align:middle; object-fit:contain; image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; user-select:none; -webkit-user-drag:none; filter: drop-shadow(0 0 3px var(--fac-glow, transparent)) drop-shadow(0 0 6px var(--fac-glow-soft, transparent)); transition: filter .25s ease; }
.fac-png-tauri   { --fac-glow:var(--accent); --fac-glow-soft:rgba(68,204,68,.45); }
.fac-png-goauld  { --fac-glow:#ffd000; --fac-glow-soft:rgba(255,208,0,.45); }
.fac-png-anciens { --fac-glow:var(--ancient); --fac-glow-soft:rgba(0,229,255,.45); }
.fac-png-wraith  { --fac-glow:#bb66ff; --fac-glow-soft:rgba(187,102,255,.45); }
.fac-png-tokra   { --fac-glow:#ff4040; --fac-glow-soft:rgba(255,64,64,.45); }
/* Ori PNG : refonte 09/05 — abandon recolorisation prismatique.
   PNG natif conservé, juste un halo flamme autour comme les autres factions. */
.fac-png-ori,
.ori-sigil,
img[src$="factions/ori.png"] {
  --fac-glow:#ff7a00;
  --fac-glow-soft:rgba(255,122,0,.45);
  transform: scale(1.22);
  transform-origin: center;
}
/* Scale Ori emblem in larger contexts (popup, offline report, patch notes) to match other factions' visual size */
img[src$="factions/ori.png"]:not(.fac-png) { transform: scale(1.22); transform-origin:center; }
.fac-png-asgard  { --fac-glow:#c0d0e0; --fac-glow-soft:rgba(192,208,224,.45); }
.fac-png:hover   { filter: drop-shadow(0 0 5px var(--fac-glow, transparent)) drop-shadow(0 0 10px var(--fac-glow-soft, transparent)); }
/* SVG insignia (factionIconSVG) — currentColor-driven glow */
.fac-ico { filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px currentColor); transition: filter .25s ease; }
.fac-ico:hover { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 9px currentColor); }

/* ═══ MODE SURVIE (F4) ═══ */
#sf_survival {
  position: relative;
  background: linear-gradient(180deg, rgba(5,8,14,0.45) 0%, rgba(5,8,14,0.30) 40%, rgba(5,8,14,0.55) 100%),
              url('../img/survie.png') center top / cover no-repeat fixed;
}
#sf_survival > * { position: relative; z-index: 1; }
.surv-wrap { padding: 24px 28px 40px; max-width: 1200px; margin: 0 auto; }
.surv-header { text-align: center; margin-bottom: 28px; padding: 32px 20px 28px; background: radial-gradient(ellipse at center top, rgba(var(--accent-rgb),0.14), transparent 70%), linear-gradient(180deg, rgba(12,18,32,0.55), transparent); border-bottom: 1px solid rgba(var(--accent-rgb),0.22); position: relative; }
.surv-header::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:180px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 14px rgba(var(--accent-rgb),0.6); }
.surv-title { font-family:var(--font-display); font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: 5px; margin: 0 0 12px; text-shadow: 0 0 20px rgba(var(--accent-rgb),0.55), 0 0 40px rgba(var(--accent-rgb),0.3); text-transform: uppercase; }
.surv-subtitle { font-size:var(--fs-md); color: rgba(255,255,255,0.72); letter-spacing: 2px; text-transform: uppercase; font-family:var(--font-mono); max-width: 640px; margin: 0 auto; line-height: 1.5; }
.surv-loading { padding: 40px; text-align: center; font-family:var(--font-display); color: rgba(255,255,255,0.6); letter-spacing: 2px; }
.surv-empty { padding: 20px; text-align: center; color: rgba(255,255,255,0.5); font-style: italic; }

.surv-locked { background: linear-gradient(180deg, rgba(255,80,80,0.08), rgba(255,80,80,0.02)); border: 1px solid rgba(255,80,80,0.3); border-radius:var(--radius-md); padding: 40px 30px; text-align: center; }
.surv-locked-ico { font-size: 48px; margin-bottom: 12px; }
.surv-locked-title { font-family:var(--font-display); color: #ff8a8a; font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; }
.surv-locked-desc { color: rgba(255,255,255,0.7); font-size:var(--fs-md); max-width: 520px; margin: 0 auto; line-height: 1.5; }

.surv-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.surv-stat { background: linear-gradient(180deg, rgba(12,18,32,0.86), rgba(8,14,28,0.9)); border: 1px solid rgba(var(--accent-rgb),0.3); border-radius:var(--radius-md); padding: 20px 16px; text-align: center; position: relative; overflow: hidden; transition: all 0.25s; }
.surv-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0.6; }
.surv-stat:hover { border-color: rgba(var(--accent-rgb),0.5); box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.18); transform: translateY(-2px); }
.surv-stat-lbl { font-size:var(--fs-sm); color: rgba(255,255,255,0.7); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; font-family:var(--font-mono); }
.surv-stat-val { font-family:var(--font-display); font-size: 28px; color: var(--accent2); font-weight: 700; letter-spacing: 1px; text-shadow: 0 0 14px rgba(var(--accent-rgb),0.35); line-height: 1; }

.surv-idle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 900px) { .surv-idle-grid { grid-template-columns: 1fr; } .surv-statgrid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .surv-title { font-size:var(--fs-2xl); letter-spacing: 3px; } .surv-stat-val { font-size:var(--fs-2xl); } .surv-stat { padding: 14px 10px; } }

.surv-rules, .surv-milestones { background: linear-gradient(180deg, rgba(12,18,32,0.85), rgba(8,14,28,0.85)); border: 1px solid rgba(var(--accent-rgb),0.28); border-radius:var(--radius-lg); padding: 22px 24px; position: relative; }
.surv-rules::before, .surv-milestones::before { content:''; position:absolute; top:0; left:20px; right:20px; height:1px; background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent); }
.surv-rules-title, .surv-milestones-title { font-family:var(--font-display); color: var(--accent); font-size: 16px; letter-spacing: 3px; margin: 0 0 16px; text-transform: uppercase; font-weight: 700; text-shadow: 0 0 10px rgba(var(--accent-rgb),0.3); }
.surv-rules-list { padding-left: 0; margin: 0; list-style: none; }
.surv-rules-list li { color: rgba(255,255,255,0.9); font-size:var(--fs-md); line-height: 1.65; margin-bottom: 10px; padding-left: 20px; position: relative; }
.surv-rules-list li::before { content:'▸'; position:absolute; left:0; top:0; color: var(--accent); font-weight: 700; font-size:var(--fs-base); }

.surv-milestones-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.surv-ms { background: linear-gradient(180deg, var(--tint-2), rgba(255,255,255,0.01)); border: 1px solid var(--tint-5); border-radius:var(--radius-md); padding: 14px 10px; text-align: center; opacity: 0.55; transition: all 0.25s; position: relative; }
.surv-ms.earned { background: linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05)); border-color: rgba(var(--accent-rgb),0.5); opacity: 1; box-shadow: 0 0 18px rgba(var(--accent-rgb),0.25), inset 0 0 20px rgba(var(--accent-rgb),0.08); }
.surv-ms.earned::after { content:'✓'; position:absolute; top:6px; right:8px; font-size:var(--fs-base); color: var(--accent); font-weight: 700; text-shadow: 0 0 8px rgba(var(--accent-rgb),0.6); }
.surv-ms:hover { opacity: 0.85; transform: translateY(-2px); }
.surv-ms.earned:hover { opacity: 1; }
.surv-ms-ico { font-size: 28px; margin-bottom: 6px; }
.surv-ms-preview { display:flex; align-items:center; justify-content:center; min-height:86px; margin-bottom:8px; }
.surv-ms-preview .cos-wrap { margin:0; padding:0; background:transparent; border:none; box-shadow:none; }
.surv-ms-preview .cos-wrap-label { display:none; }
.surv-ms-preview .cos-title { font-size:10px; padding:2px 6px; letter-spacing:1px; margin-top:2px; }
.surv-ms-preview > .cos-wrap { gap:2px; }
.surv-ms-wave { font-family:var(--font-display); font-size:var(--fs-md); color: var(--accent2); letter-spacing: 2px; margin-bottom: 3px; font-weight: 700; }
.surv-ms-name { font-size:var(--fs-sm); color: rgba(255,255,255,0.85); letter-spacing: 0.5px; }

.surv-cta-row { text-align: center; margin: 28px 0 10px; }
.surv-btn-launch { padding: 18px 72px; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-rgb),0.5)); border: 1px solid rgba(var(--accent-rgb),0.6); border-radius:var(--radius-md); color: var(--accent); font-family:var(--font-display); font-size:var(--fs-xl); font-weight: 700; letter-spacing: 3px; cursor: pointer; transition: all 0.25s; text-transform: uppercase; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.2), inset 0 1px 0 var(--tint-7); }
.surv-btn-launch::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, var(--tint-9), transparent); transition: left 0.6s; }
.surv-btn-launch:hover:not(.disabled)::before { left:100%; }
.surv-btn-launch:hover:not(.disabled) { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0.2)); box-shadow: 0 0 32px rgba(var(--accent-rgb),0.55), 0 6px 24px rgba(var(--accent-rgb),0.3); transform: translateY(-2px); color: var(--accent2); }
.surv-btn-launch.disabled { background: linear-gradient(135deg, rgba(12,18,32,0.96), rgba(8,14,28,0.96)); border-color: var(--tint-9); color: rgba(255,255,255,0.62); box-shadow: none; cursor: not-allowed; }

/* Picker (composition figée) */
.surv-picker { margin-top: 14px; background: linear-gradient(180deg, rgba(12,18,32,0.9), rgba(8,14,28,0.9)); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius:var(--radius-md); padding: 16px 18px; }
.surv-picker-title { font-family:var(--font-display); color: var(--accent); font-size:var(--fs-md); letter-spacing: 2px; margin-bottom: 4px; }
.surv-pick-hint { font-size:var(--fs-sm); color: rgba(255,255,255,0.5); margin-bottom: 12px; font-style: italic; }
.surv-pick-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding-right: 4px; }
.surv-pick-row { display: grid; grid-template-columns: 1fr 100px 60px; gap: 8px; align-items: center; padding: 8px 10px; background: var(--tint-2); border-radius: 6px; }
.surv-pick-name { font-size:var(--fs-base); color: var(--text); }
.surv-pick-avail { color: rgba(255,255,255,0.45); font-size:var(--fs-xs); }
.surv-pick-inp { width: 100%; background: var(--shade-1); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--radius-sm); color: var(--text); padding: 4px 8px; font-family:var(--font-mono); text-align: right; }
.surv-pick-max { background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius:var(--radius-sm); color: var(--accent2); font-family:var(--font-display); font-size:var(--fs-xs); padding: 4px; cursor: pointer; letter-spacing: 1px; }
.surv-pick-max:hover { background: rgba(var(--accent-rgb),0.3); }
.surv-pick-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--tint-4); }
.surv-pick-total { font-size:var(--fs-base); color: rgba(255,255,255,0.7); }
.surv-pick-btns { display: flex; gap: 8px; }
.surv-btn-cancel, .surv-btn-confirm { padding: 8px 18px; border-radius: 6px; font-family:var(--font-display); font-size:var(--fs-sm); letter-spacing: 1.5px; cursor: pointer; transition: all 0.18s; }
.surv-btn-cancel { background: var(--tint-4); border: 1px solid var(--tint-9); color: rgba(255,255,255,0.7); }
.surv-btn-cancel:hover { background: var(--tint-7); }
.surv-btn-confirm { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.25), rgba(var(--accent-rgb),0.08)); border: 1px solid rgba(var(--accent-rgb),0.5); color: var(--accent); font-weight: 700; }
.surv-btn-confirm:not(:disabled):hover { background: rgba(var(--accent-rgb),0.4); box-shadow: 0 0 14px rgba(var(--accent-rgb),0.3); }
.surv-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

/* Active view */
.surv-active-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1000px) { .surv-active-grid { grid-template-columns: 1fr; } }
.surv-panel { background: linear-gradient(180deg, rgba(12,18,32,0.85), rgba(8,14,28,0.85)); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--radius-md); padding: 20px 24px; }
.surv-panel-title { font-family:var(--font-display); color: var(--accent); font-size: 18px; letter-spacing: 2.5px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--accent-rgb),0.15); }
.surv-g-list, .surv-t-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.surv-g-row, .surv-t-row { display: flex; justify-content: space-between; padding: 5px 8px; background: var(--tint-2); border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.surv-g-name, .surv-t-name { color: rgba(255,255,255,0.82); }
.surv-g-qty, .surv-t-qty { color: var(--accent2); font-family:var(--font-mono); font-weight: 700; }
.surv-g-row.muted, .surv-t-row.muted { color: rgba(255,255,255,0.4); font-style: italic; justify-content: center; }

.surv-loot-box { display: flex; flex-direction: column; gap: 6px; }
.surv-loot-box.compact .surv-loot-row { padding: 9px 14px; font-size: 16px; }
.surv-loot-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(255,215,0,0.05);  border-radius:var(--radius-sm); font-size: 16px;  box-shadow:inset 3px 0 0 0 rgba(255,215,0,0.3); }
.surv-loot-row > span { display: inline-flex; align-items: center; gap: 10px; }
.surv-loot-row b { color: #ffd700; font-family:var(--font-mono); font-size: 16px; }
.surv-preview { margin-top: 12px; padding: 12px 16px; background: rgba(var(--accent-rgb),0.08); border-radius: 6px; font-size: 16px; color: rgba(255,255,255,0.82); font-style: italic; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; box-sizing: border-box; }
.surv-preview img.res-ico { vertical-align: middle; margin: 0 2px; }
.surv-preview b { color: #ffd700; font-family: var(--font-mono); font-style: normal; }

/* Decision buttons */
.surv-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .surv-decisions { grid-template-columns: 1fr; } }
.surv-dec { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px; background: linear-gradient(180deg, rgba(30,40,60,0.7), rgba(20,26,42,0.7)); border: 1px solid var(--tint-7); border-radius:var(--radius-lg); cursor: pointer; transition: all 0.2s; color: var(--text); }
.surv-dec:disabled { opacity: 0.4; cursor: not-allowed; }
.surv-dec:not(:disabled):hover { transform: translateY(-2px); }
.surv-dec-continue { border-color: rgba(var(--accent-rgb),0.35); }
.surv-dec-continue:not(:disabled):hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),0.15), rgba(var(--accent-rgb),0.05)); box-shadow: 0 4px 18px rgba(var(--accent-rgb),0.25); }
.surv-dec-retreat { border-color: rgba(120,200,255,0.3); }
.surv-dec-retreat:not(:disabled):hover { background: linear-gradient(180deg, rgba(120,200,255,0.12), rgba(120,200,255,0.04)); box-shadow: 0 4px 18px rgba(120,200,255,0.2); }
.surv-dec-reinforce { border-color: rgba(255,180,80,0.3); }
.surv-dec-reinforce:not(:disabled):hover { background: linear-gradient(180deg, rgba(255,180,80,0.12), rgba(255,180,80,0.04)); box-shadow: 0 4px 18px rgba(255,180,80,0.2); }
.surv-dec-ico { font-size:var(--fs-4xl); margin-bottom: 6px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.surv-dec-ico svg { width: 1em; height: 1em; }
.surv-dec-label { font-family:var(--font-display); font-size: 16px; letter-spacing: 2px; font-weight: 700; color: var(--accent); }
.surv-dec-hint { font-size:var(--fs-base); color: rgba(255,255,255,0.68); text-align: center; line-height: 1.4; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 3px; }
.surv-dec-hint img.res-ico { vertical-align: middle; margin: 0 1px; }
.surv-dec-hint-num { color: var(--accent2); font-family: var(--font-mono); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.surv-dec-hint-warn { color: #ff6b6b; display: inline-flex; align-items: center; gap: 4px; }

/* Previous wave result banner */
.surv-prev {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 24px; margin: 0 0 18px;
  border-radius:var(--radius-lg);
  font-size: 16px;
  position: relative; overflow: hidden;
  animation: survSlide 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.surv-prev::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 0% 50%, var(--prev-glow, rgba(90,220,120,0.18)), transparent 60%);
  pointer-events: none;
}
.surv-prev.won {
  --prev-glow: rgba(90,220,120,0.28);
  background: linear-gradient(90deg, rgba(90,220,120,0.22), rgba(90,220,120,0.04));
  border: 1px solid rgba(90,220,120,0.55);
  box-shadow: 0 0 24px rgba(90,220,120,0.15), inset 0 1px 0 var(--tint-4);
}
.surv-prev.lost {
  --prev-glow: rgba(255,100,100,0.28);
  background: linear-gradient(90deg, rgba(255,100,100,0.22), rgba(255,100,100,0.04));
  border: 1px solid rgba(255,100,100,0.55);
  box-shadow: 0 0 24px rgba(255,100,100,0.15), inset 0 1px 0 var(--tint-4);
}
.surv-prev-ico {
  font-family: var(--font-display);
  font-size:var(--fs-3xl); font-weight: 800;
  letter-spacing: 2px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius:var(--radius);
  background: rgba(0,0,0,0.25);
  position: relative;
}
.surv-prev.won .surv-prev-ico {
  color: #6dff8e;
  text-shadow: 0 0 18px rgba(90,220,120,0.7);
  border: 1px solid rgba(90,220,120,0.5);
}
.surv-prev.lost .surv-prev-ico {
  color: #ff8080;
  text-shadow: 0 0 18px rgba(255,100,100,0.7);
  border: 1px solid rgba(255,100,100,0.5);
}
.surv-prev-label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--textbright);
  font-weight: 700;
  position: relative;
}
.surv-prev-loss { color: #ff9090; font-family: var(--font-mono); font-size:var(--fs-md); font-weight: 700; position: relative; }
.surv-prev-arts {
  color: #ffd700; font-family: var(--font-mono); font-size:var(--fs-md); font-weight: 700;
  margin-left: auto;
  padding: 5px 14px;
  background: rgba(255,215,0,0.08);
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.3);
  position: relative;
}
@keyframes survSlide {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Panneau pertes détaillé (sous le banner victoire) */
.surv-prev-wrap { margin: 0 0 18px; }
.surv-prev-wrap .surv-prev { margin: 0; }
.surv-losses-panel {
  margin-top: 8px;
  padding: 0;
  border: 1px solid rgba(255,100,100, 0.4);
  border-radius:var(--radius-md);
  background: linear-gradient(180deg, rgba(20,8,8, 0.92), rgba(8,4,4, 0.96));
  overflow: hidden;
  animation: survSlide 0.35s ease-out;
  backdrop-filter: blur(6px);
}
.surv-losses-panel > summary {
  cursor: pointer;
  padding: 13px 18px;
  font-family: var(--font-display); font-size: 16px;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255, 0.85);
  list-style: none;
  user-select: none;
  display: flex; align-items: center; gap: 10px;
}
.surv-losses-panel > summary::-webkit-details-marker { display: none; }
.surv-losses-panel > summary::after {
  content: '▼'; margin-left: auto;
  font-size: 10px; color: rgba(255,255,255, 0.4);
  transition: transform 0.18s;
}
.surv-losses-panel[open] > summary::after { transform: rotate(180deg); }
.surv-losses-panel > summary b { color: #ff9090; font-family: var(--font-mono); font-weight: 700; }
.surv-losses-list {
  padding: 10px 18px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 18px;
  border-top: 1px solid rgba(255,100,100, 0.12);
}
.surv-losses-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px;
  background: rgba(255,100,100, 0.04);
  border-radius: 5px;
  font-family: var(--font-mono); font-size:var(--fs-lg);
}
.surv-losses-name { color: rgba(255,255,255, 0.85); }
.surv-losses-qty  { color: #ff9090; font-weight: 700; }
@media (max-width: 700px) {
  .surv-losses-list { grid-template-columns: 1fr; }
}

/* Bannières spéciales — affichées quand une carte mythique/rare déclenche un effet visible */
.surv-special-banner {
  margin-top: 10px;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 180, 60, 0.55);
  border-radius:var(--radius-md);
  background: linear-gradient(135deg, rgba(40,40,40,0.6), rgba(20,20,20,0.85));
  animation: survSpecialPulse 2s ease-in-out infinite, survSlide 0.45s ease-out;
  backdrop-filter: blur(6px);
}
.surv-special-ico {
  font-size:var(--fs-2xl);
  animation: survSpecialFlicker 1.4s ease-in-out infinite;
}
.surv-special-label {
  font-family: var(--font-display, var(--font-mystic, 'Orbitron', sans-serif));
  font-size:var(--fs-lg); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
@keyframes survSpecialPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--banner-rgb, 255,130,50), 0.30), inset 0 0 10px rgba(var(--banner-rgb, 255,200,80), 0.14); }
  50%      { box-shadow: 0 0 32px rgba(var(--banner-rgb, 255,160,60), 0.55), inset 0 0 16px rgba(var(--banner-rgb, 255,220,110), 0.24); }
}
@keyframes survSpecialFlicker {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Phénix — flamme dorée/orange */
.surv-special-banner.phoenix {
  --banner-rgb: 255, 150, 50;
  border-color: rgba(255, 180, 60, 0.55);
  background: linear-gradient(135deg, rgba(201, 59, 30, 0.28), rgba(255, 180, 60, 0.18) 60%, rgba(40, 14, 6, 0.85));
}
.surv-special-banner.phoenix .surv-special-ico { filter: drop-shadow(0 0 6px rgba(255, 130, 30, 0.85)); }
.surv-special-banner.phoenix .surv-special-label { color: #ffd9a8; text-shadow: 0 0 10px rgba(255, 150, 50, 0.7); }

/* Frappe Asgard — éclair argent/cyan */
.surv-special-banner.asgard {
  --banner-rgb: 180, 220, 255;
  border-color: rgba(180, 220, 255, 0.6);
  background: linear-gradient(135deg, rgba(140, 200, 255, 0.22), rgba(80, 130, 200, 0.18) 60%, rgba(8, 18, 35, 0.88));
}
.surv-special-banner.asgard .surv-special-ico { filter: drop-shadow(0 0 8px rgba(180, 220, 255, 0.95)); }
.surv-special-banner.asgard .surv-special-label { color: #d8eaff; text-shadow: 0 0 10px rgba(140, 200, 255, 0.7); }

/* Code Réplicateur — vert mécanique */
.surv-special-banner.replicator {
  --banner-rgb: 120, 220, 130;
  border-color: rgba(120, 220, 130, 0.55);
  background: linear-gradient(135deg, rgba(60, 180, 90, 0.22), rgba(80, 140, 70, 0.18) 60%, rgba(10, 25, 14, 0.88));
}
.surv-special-banner.replicator .surv-special-ico { filter: drop-shadow(0 0 6px rgba(120, 220, 130, 0.9)); }
.surv-special-banner.replicator .surv-special-label { color: #d4ffd9; text-shadow: 0 0 10px rgba(120, 220, 130, 0.7); }

/* Dernière Tenue — bleu froid résigné */
.surv-special-banner.lastditch {
  --banner-rgb: 130, 170, 220;
  border-color: rgba(130, 170, 220, 0.55);
  background: linear-gradient(135deg, rgba(70, 110, 170, 0.22), rgba(50, 80, 130, 0.18) 60%, rgba(8, 14, 28, 0.88));
}
.surv-special-banner.lastditch .surv-special-ico { filter: drop-shadow(0 0 6px rgba(130, 170, 220, 0.85)); }
.surv-special-banner.lastditch .surv-special-label { color: #dce8fa; text-shadow: 0 0 10px rgba(130, 170, 220, 0.6); }

@media (max-width: 480px) {
  .surv-special-banner { padding: 10px 12px; gap: 8px; }
  .surv-special-label  { font-size:var(--fs-base); letter-spacing: 1.5px; }
}

/* ═══ MODE SURVIE — Active view amélioré ═══ */
/* Fallback Safari iOS 15-16.3 : --fac-c default #5a8db5 → rgba(90,141,181,X) */
.surv-hero { --fac-c: #5a8db5; position: relative; margin-bottom: 18px; padding: 18px 22px; background: linear-gradient(135deg, rgba(12,18,32,0.95) 0%, rgba(8,14,28,0.9) 40%, rgba(90,141,181,0.14) 100%); border: 1px solid rgba(90,141,181,0.40); border-radius:var(--radius-lg); overflow: hidden; box-shadow: 0 0 30px rgba(90,141,181,0.15); background: linear-gradient(135deg, rgba(12,18,32,0.95) 0%, rgba(8,14,28,0.9) 40%, color-mix(in srgb, var(--fac-c) 14%, rgba(8,14,28,0.9)) 100%); border: 1px solid color-mix(in srgb, var(--fac-c) 40%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--fac-c) 15%, transparent); }
.surv-hero.boss { border-color: rgba(90,141,181,0.65); box-shadow: 0 0 46px rgba(90,141,181,0.30); border-color: color-mix(in srgb, var(--fac-c) 65%, transparent); box-shadow: 0 0 46px color-mix(in srgb, var(--fac-c) 30%, transparent); animation: survBossGlow 2.5s ease-in-out infinite; }
@keyframes survBossGlow { 0%,100% { box-shadow: 0 0 30px rgba(90,141,181,0.20); box-shadow: 0 0 30px color-mix(in srgb, var(--fac-c) 20%, transparent); } 50% { box-shadow: 0 0 55px rgba(90,141,181,0.40); box-shadow: 0 0 55px color-mix(in srgb, var(--fac-c) 40%, transparent); } }
.surv-hero-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fac-c), transparent); animation: survScanLine 3.5s linear infinite; opacity: 0.6; }
@keyframes survScanLine { 0% { top: 0; } 100% { top: 100%; } }
.surv-hero-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 14px; position: relative; z-index: 1; }
/* Fallback Safari iOS 15-16.3 */
.surv-hero-wave { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.35); border: 1px solid rgba(90,141,181,0.40); border: 1px solid color-mix(in srgb, var(--fac-c) 40%, transparent); border-radius:var(--radius); min-width: 80px; }
.surv-hero-wave-lbl { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.5); font-family:var(--font-display); }
.surv-hero-wave-num { font-family:var(--font-display); font-size: 28px; font-weight: 900; color: var(--fac-c); text-shadow: 0 0 12px var(--fac-c); line-height: 1; margin-top: 2px; }
.surv-hero-mid { flex: 1; }
.surv-hero-fac { font-family:var(--font-display); font-size:var(--fs-lg); color: rgba(255,255,255,0.85); letter-spacing: 1.5px; margin-bottom: 4px; }
.surv-hero-boss { display: inline-block; margin-left: 8px; padding: 2px 8px; background: rgba(255,80,80,0.2); border: 1px solid rgba(255,80,80,0.5); color: #ff9090; font-size:var(--fs-xs); letter-spacing: 2px; border-radius:var(--radius-sm); animation: survPulseBoss 1.2s ease-in-out infinite; }
@keyframes survPulseBoss { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.surv-hero-stats { font-size:var(--fs-sm); color: rgba(255,255,255,0.6); font-family:var(--font-mono); }
.surv-hero-stats b { color: var(--accent2); }
.surv-hero-cooldown { font-size:var(--fs-xs); color: rgba(255,255,255,0.5); font-family:var(--font-mono); letter-spacing: 1.5px; }

.surv-power-bars { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.surv-pb-row { display: grid; grid-template-columns: 60px 1fr 90px; gap: 10px; align-items: center; font-size:var(--fs-xs); }
.surv-pb-lbl { font-family:var(--font-display); letter-spacing: 1.5px; color: rgba(255,255,255,0.7); }
.surv-pb-track { height: 14px; background: var(--shade-3); border: 1px solid var(--tint-4); border-radius: 3px; overflow: hidden; position: relative; }
.surv-pb-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; position: relative; }
.surv-pb-fill.atk { background: linear-gradient(90deg, rgba(90,220,120,0.6), rgba(90,220,120,0.9)); box-shadow: 0 0 8px rgba(90,220,120,0.4); }
.surv-pb-fill.def { background: linear-gradient(90deg, rgba(255,100,100,0.6), rgba(255,100,100,0.9)); box-shadow: 0 0 8px rgba(255,100,100,0.4); }
.surv-pb-val { font-family:var(--font-mono); text-align: right; color: var(--accent2); font-weight: 700; font-size:var(--fs-sm); }

/* Regle de victoire (modele 2/3 secteurs) sous les barres ATK/DEF */
.surv-victory-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; padding: 8px 12px; background: rgba(0,0,0,0.30); border: 1px solid var(--tint-4);  border-radius: 6px; position: relative; z-index: 1;  box-shadow:inset 3px 0 0 0 var(--fac-c); }
.surv-victory-rule.at-risk { border-left-color: rgba(255,100,100,0.85); }
.surv-vr-text { font-family:var(--font-display); font-size:var(--fs-sm); letter-spacing: 1px; color: rgba(255,255,255,0.78); display: inline-flex; align-items: center; gap: 6px; }
.surv-victory-rule.at-risk .surv-vr-text { color: #ffb0b0; }
.surv-vr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.surv-vr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing: 0.5px; border: 1px solid var(--tint-4); background: var(--shade-3); }
.surv-vr-chip-name { color: rgba(255,255,255,0.65); text-transform: uppercase; }
.surv-vr-chip-mark { font-weight: 700; }
.surv-vr-chip.hold { border-color: rgba(80,220,140,0.55); background: rgba(80,220,140,0.12); }
.surv-vr-chip.hold .surv-vr-chip-mark { color: #4fe08a; }
.surv-vr-chip.fail { border-color: rgba(255,100,100,0.55); background: rgba(255,100,100,0.12); }
.surv-vr-chip.fail .surv-vr-chip-mark { color: #ff7a7a; }
.surv-vr-chip.calm { opacity: 0.55; }
.surv-vr-chip.calm .surv-vr-chip-mark { color: rgba(255,255,255,0.5); }
@media (max-width: 640px) {
  .surv-victory-rule { flex-direction: column; align-items: flex-start; gap: 7px; }
  .surv-vr-chips { width: 100%; }
  .surv-vr-chip { flex: 1; justify-content: center; }
}

.surv-panel-enemy { border-color: rgba(255,100,100,0.3); }
.surv-panel-ally { border-color: rgba(90,220,120,0.3); }
.surv-panel-loot { border-color: rgba(255,215,0,0.3); }

.surv-defeat-hero { text-align: center; padding: 40px 20px; background: linear-gradient(180deg, rgba(255,80,80,0.1), rgba(255,80,80,0.02)); border: 1px solid rgba(255,80,80,0.3); border-radius:var(--radius-lg); margin-bottom: 18px; }
.surv-defeat-ico { font-size: 64px; margin-bottom: 10px; filter: drop-shadow(0 0 16px rgba(255,80,80,0.6)); animation: survDefeatPulse 2s ease-in-out infinite; }
@keyframes survDefeatPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.surv-defeat-title { font-family:var(--font-display); color: #ff8a8a; font-size:var(--fs-3xl); letter-spacing: 4px; margin: 0 0 8px; text-shadow: 0 0 20px rgba(255,100,100,0.5); }
.surv-defeat-sub { font-size:var(--fs-md); color: rgba(255,255,255,0.7); letter-spacing: 1px; }
.surv-defeat-wave { color: var(--accent2); font-family:var(--font-display); font-size: 16px; }

/* ═══ COMBAT ANIMATION 3D overlay (Itération 1) ═══ */
.surv-combat-3d-host {
  position: fixed; inset: 0; z-index: 10500;
  background: radial-gradient(ellipse at center, rgba(0,5,20,0.92) 0%, rgba(0,0,10,0.98) 70%);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: opacity 0.25s ease-out;
}
/* Vignette cinéma : assombrit les coins, focus naturel au centre */
.surv-combat-3d-host::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 75% 70% at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}
/* Letterbox cinéma : 2 bandes noires top/bot pour cachet cinémascope */
.surv-combat-3d-letterbox-top,
.surv-combat-3d-letterbox-bot {
  position: absolute; left: 0; right: 0;
  height: 7%;
  background: #000;
  z-index: 100;
  pointer-events: none;
  animation: sc3dLetterboxIn 0.5s ease-out;
}
.surv-combat-3d-letterbox-top { top: 0; }
.surv-combat-3d-letterbox-bot { bottom: 0; }
@keyframes sc3dLetterboxIn {
  from { height: 0; }
  to   { height: 7%; }
}
/* Boss intro overlay */
.surv-combat-3d-boss-intro {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 60% at center, rgba(200,30,30,0.18), transparent 70%);
  animation: sc3dBossIntroIn 0.35s cubic-bezier(0.2,0.8,0.2,1);
  transition: opacity 0.5s ease-out;
}
.surv-combat-3d-boss-intro.out { opacity: 0; }
.sc3d-boss-text {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 900;
  letter-spacing: 10px;
  color: #ff5050;
  text-shadow: 0 0 40px rgba(255,80,80,0.85), 0 0 80px rgba(200,30,30,0.6);
  text-align: center;
  text-transform: uppercase;
  animation: sc3dBossPulse 1.2s ease-in-out;
}
.sc3d-boss-text span {
  display: block;
  font-size: 28px; letter-spacing: 6px;
  color: #ff8080;
  margin-top: 8px;
}
.sc3d-boss-flash {
  position: absolute; inset: 0;
  background: rgba(255,40,40,0.35);
  animation: sc3dBossFlash 0.45s ease-out;
}
@keyframes sc3dBossIntroIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sc3dBossPulse {
  0%   { transform: scale(0.6); opacity: 0; }
  20%  { transform: scale(1.15); opacity: 1; }
  60%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.02); opacity: 0.9; }
}
@keyframes sc3dBossFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
/* #3 Compteur WAVE géant intro */
.surv-combat-3d-wave-intro {
  position: absolute; top: 9%; left: 0; right: 0; bottom: auto;
  pointer-events: none; z-index: 8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  text-align: center; padding: 0 14px; overflow: hidden;
  transition: opacity 0.5s ease-out;
}
.surv-combat-3d-wave-intro.out { opacity: 0; }
.sc3d-wave-num {
  font-family: var(--font-display);
  font-size: clamp(34px, 8.5vw, 92px); font-weight: 900;
  letter-spacing: clamp(2px, 1vw, 8px);
  max-width: 100%;
  color: rgba(255,255,255, 0.9);
  text-shadow: 0 0 60px rgba(var(--accent-rgb), 0.6), 0 4px 12px var(--shade-7);
  animation: sc3dWaveIn 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.sc3d-wave-sub {
  font-family: var(--font-display);
  font-size: clamp(13px, 3vw, 22px); letter-spacing: clamp(3px, 1.2vw, 8px);
  max-width: 100%;
  color: rgba(255,200,140, 0.85);
  margin-top: 8px;
  text-shadow: 0 0 25px rgba(255,200,140,0.6);
  animation: sc3dWaveIn 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes sc3dWaveIn {
  from { opacity: 0; transform: scale(0.5); letter-spacing: 30px; }
  to   { opacity: 1; transform: scale(1); }
}
/* Boss nommé (Anubis, etc.) — wave intro rouge sang dramatique */
.surv-combat-3d-wave-intro-namedboss {
  background: radial-gradient(ellipse 60% 60% at center, rgba(160,20,20,0.45), transparent 75%);
}
.sc3d-wave-num-boss {
  font-size: clamp(38px, 10vw, 110px) !important;
  color: #ff3030 !important;
  text-shadow: 0 0 60px rgba(255,40,40,0.85), 0 0 120px rgba(160,20,20,0.6), 0 4px 12px rgba(0,0,0,0.9) !important;
  letter-spacing: clamp(3px, 1.3vw, 10px) !important;
  animation: sc3dBossWaveIn 0.8s cubic-bezier(0.2,0.8,0.2,1) !important;
}
.sc3d-wave-sub-boss {
  color: rgba(255,180,180, 0.95) !important;
  font-size: clamp(12px, 3vw, 20px) !important;
  letter-spacing: clamp(3px, 1.4vw, 10px) !important;
  text-shadow: 0 0 30px rgba(255,80,80,0.7) !important;
}
@keyframes sc3dBossWaveIn {
  0% { opacity: 0; transform: scale(0.4); letter-spacing: 50px; filter: blur(20px); }
  60% { transform: scale(1.08); filter: blur(0px); }
  100% { opacity: 1; transform: scale(1); letter-spacing: 16px; }
}
.surv-combat-3d-host canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.surv-combat-3d-host .survc-skip,
.surv-combat-3d-host .survc-pause,
.surv-combat-3d-host .survc-camreset {
  position: absolute; bottom: 24px;
  z-index: 200;
  font-family: var(--font-display); font-size:var(--fs-xs); letter-spacing: 2px;
  text-transform: uppercase; font-weight: 700;
  padding: 9px 16px;
  border-radius:var(--radius);
  background: rgba(255,255,255, 0.06);
  border: 1px solid rgba(255,255,255, 0.18);
  color: rgba(255,255,255, 0.7);
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.surv-combat-3d-host .survc-skip      { right: 24px; }
.surv-combat-3d-host .survc-pause     { right: 130px; }
.surv-combat-3d-host .survc-camreset  { right: 248px; }
.surv-combat-3d-host .survc-skip:hover,
.surv-combat-3d-host .survc-pause:hover,
.surv-combat-3d-host .survc-camreset:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.surv-combat-3d-host .survc-camreset[hidden] { display: none; }
@media (max-width: 700px) {
  .surv-combat-3d-host .survc-skip      { right: 12px;  bottom: 16px; padding: 8px 12px; }
  .surv-combat-3d-host .survc-pause     { right: 100px; bottom: 16px; padding: 8px 12px; }
  .surv-combat-3d-host .survc-camreset  { right: 12px;  bottom: 62px; padding: 8px 12px; }
}
.surv-combat-3d-host .survc-pause.is-paused {
  background: rgba(46,204,113, 0.18);
  border-color: rgba(46,204,113, 0.6);
  color: #5adc78;
}
/* Damage numbers volants */
.surv-3d-damage-host {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.surv-3d-damage {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 800;
  color: #ff9090;
  text-shadow: 0 0 8px rgba(255,80,80,0.8), 0 2px 4px var(--shade-5);
  pointer-events: none;
  animation: surv3dDmg 1.2s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.surv-3d-damage-player { color: #88c8ff; text-shadow: 0 0 8px rgba(120,180,255,0.8), 0 2px 4px var(--shade-5); }
.surv-3d-damage-enemy  { color: #ff9090; text-shadow: 0 0 8px rgba(255,80,80,0.8), 0 2px 4px var(--shade-5); }
.surv-3d-damage-big { font-size: 28px; font-weight: 900; }
@keyframes surv3dDmg {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  15%  { transform: translate(-50%, -65%) scale(1.15); opacity: 1; }
  35%  { transform: translate(-50%, -75%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(0.85); opacity: 0; }
}
/* Labels secteurs 3D — projetés en JS, positionnés via transform */
.surv-combat-3d-labels {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.surv-combat-3d-label {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px;
  border-radius:var(--radius-md);
  background: rgba(8,14,28,0.78);
  border: 1px solid currentColor;
  backdrop-filter: blur(6px);
  transition: opacity 0.18s ease-out;
  white-space: nowrap;
  will-change: transform, opacity;
}
.sc3d-lbl-name {
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  text-shadow: 0 0 12px currentColor;
}
.sc3d-lbl-forces {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size:var(--fs-sm); font-weight: 700;
}
.sc3d-lbl-pl { color: #5adc78; }
.sc3d-lbl-vs { color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.sc3d-lbl-en { color: #ff8080; }

/* ═══ COMBAT ANIMATION overlay (fallback CSS) ═══ */
/* opacity:1 de repos OBLIGATOIRE : sur mobile (body.lowfx) + prefers-reduced-motion,
   les animations sont neutralisées (animation-duration:0.01ms) → si la visibilité
   dépendait du keyframe survAnimIn (0→1), l'overlay restait invisible. Fix critique mobile. */
#survCombatAnim { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 1; animation: survAnimIn 0.3s ease-out; }
#survCombatAnim.survc-fade-out { animation: survAnimOut 0.28s ease-in forwards; }
/* survAnimIn ne doit PLUS piloter l'opacity : sur mobile (body.lowfx) l'animation
   est mise en PAUSE à 0% → opacity figée à 0 = overlay invisible. On garde le
   keyframe (nom référencé) mais neutralisé. L'entrée animée vient de .survc-core. */
@keyframes survAnimIn { from { opacity: 1; } to { opacity: 1; } }
@keyframes survAnimOut { from { opacity: 1; } to { opacity: 0; } }
.survc-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,5,20,0.85) 0%, rgba(0,0,10,0.96) 70%); backdrop-filter: blur(8px); }
.survc-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.survc-part { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: survcPart 1.4s ease-out calc(var(--d,0s)) both; }
@keyframes survcPart { 0% { transform: translate(-50%, -50%) rotate(calc(var(--i) * 25.7deg)) translateX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(calc(var(--i) * 25.7deg)) translateX(400px); opacity: 0; } }
.survc-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; animation: survcCore 0.8s cubic-bezier(.22,1,.36,1); }
@keyframes survcCore { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* FIX CRITIQUE MOBILE : sous body.lowfx (perf mobile du jeu) + prefers-reduced-motion,
   toutes les animations sont neutralisées/paused à 0% → #survCombatAnim ET surtout
   .survc-core (porte + texte WAVE) restent opacity:0 = "rien à l'écran". Un !important
   auteur bat une animation même en pause → on force la visibilité. Desktop garde les fades. */
@media (prefers-reduced-motion: reduce) {
  #survCombatAnim, #survCombatAnim .survc-core { opacity: 1 !important; }
  #survCombatAnim .survc-core { transform: none !important; }
}
body.lowfx #survCombatAnim, body.lowfx #survCombatAnim .survc-core { opacity: 1 !important; }
body.lowfx #survCombatAnim .survc-core { transform: none !important; }
.survc-gate { position: relative; width: 180px; height: 180px; }
.survc-gate-ring { position: absolute; inset: 0; border: 4px solid var(--accent); border-radius: 50%; box-shadow: 0 0 40px var(--accent), inset 0 0 30px rgba(var(--accent-rgb),0.3); animation: survcGateSpin 3s linear infinite; }
.survc-gate-ring::before, .survc-gate-ring::after { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(var(--accent-rgb),0.5); border-radius: 50%; }
.survc-gate-ring::after { inset: 20px; animation: survcGateSpin 4s linear reverse infinite; }
@keyframes survcGateSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.survc-gate-inner { position: absolute; inset: 30px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.8) 0%, rgba(var(--accent-rgb),0.2) 60%, transparent 100%); border-radius: 50%; animation: survcGateGlow 1.2s ease-in-out infinite; }
@keyframes survcGateGlow { 0%,100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
.survc-gate-flash { position: absolute; inset: 40px; background: radial-gradient(circle, #fff 0%, transparent 70%); border-radius: 50%; opacity: 0; animation: survcFlash 1.8s ease-in-out infinite; }
@keyframes survcFlash { 0%,40%,100% { opacity: 0; } 50% { opacity: 0.8; } 60% { opacity: 0; } }
.survc-labels { text-align: center; }
.survc-label-sup { font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing: 4px; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.survc-label-wave { font-family:var(--font-display); font-size: 46px; font-weight: 900; color: var(--accent); text-shadow: 0 0 30px var(--accent); letter-spacing: 4px; line-height: 1; }
.survc-label-fac { font-family:var(--font-display); font-size: 16px; letter-spacing: 3px; margin-top: 6px; text-shadow: 0 0 14px currentColor; }
.survc-progress { margin: 14px auto 0; width: 240px; height: 4px; background: var(--tint-7); border-radius: 2px; overflow: hidden; }
.survc-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 8px var(--accent); animation: survcProg 1.7s linear; }
@keyframes survcProg { from { width: 0; } to { width: 100%; } }
.survc-label-status { font-family:var(--font-mono); font-size:var(--fs-base); letter-spacing: 3px; color: rgba(255,255,255,0.75); margin-top: 10px; animation: survcBlink 0.8s ease-in-out infinite; }
@keyframes survcBlink { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Victory/defeat flash */
.survc-flash { position: fixed; inset: 0; z-index: 10600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; pointer-events: none; animation: survcFlashIn 0.45s cubic-bezier(.22,1,.36,1); }
.survc-flash.out { animation: survcFlashOut 0.35s ease-in forwards; }
@keyframes survcFlashIn { 0% { opacity: 0; transform: scale(0.6); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes survcFlashOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.95); } }
.survc-flash.win  { background: radial-gradient(ellipse 70% 50% at center, rgba(90,220,120,0.55) 0%, transparent 70%); }
.survc-flash.loss { background: radial-gradient(ellipse 70% 50% at center, rgba(255,80,80,0.55) 0%, transparent 70%); }
.survc-flash-ico {
  font-family: var(--font-display); font-size: 110px; font-weight: 900; line-height: 1;
  width: 1.5em; height: 1.5em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(8,14,28,0.72);
  border: 3px solid currentColor;
  box-shadow: 0 0 60px currentColor, inset 0 0 30px var(--shade-4);
  backdrop-filter: blur(4px);
  animation: survcFlashIcoPulse 1s ease-in-out;
}
.survc-flash.win  .survc-flash-ico { color: #6dff8e; text-shadow: 0 0 30px currentColor; }
.survc-flash.loss .survc-flash-ico { color: #ff8080; text-shadow: 0 0 30px currentColor; }
.survc-flash-txt {
  font-family: var(--font-display);
  font-size: 44px; letter-spacing: 8px; font-weight: 800; text-transform: uppercase;
  padding: 14px 38px;
  border-radius:var(--radius-lg);
  background: rgba(8,14,28,0.72);
  border: 1px solid currentColor;
  box-shadow: 0 0 50px currentColor, inset 0 0 30px var(--shade-3);
  backdrop-filter: blur(6px);
  text-shadow: 0 0 40px currentColor;
}
.survc-flash.win  .survc-flash-txt { color: #6dff8e; }
.survc-flash.loss .survc-flash-txt { color: #ff8080; }
@keyframes survcFlashIcoPulse {
  0%, 100% { box-shadow: 0 0 40px currentColor, inset 0 0 30px var(--shade-4); }
  50%      { box-shadow: 0 0 80px currentColor, inset 0 0 30px var(--shade-4); }
}

@media (max-width: 700px) {
  .surv-hero-head { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .surv-hero-cooldown { grid-column: 1 / -1; text-align: right; }
  .survc-gate { width: 140px; height: 140px; }
  .survc-label-wave { font-size: 36px; }
}

/* ── 5-card stats grid (best wave, runs, season, tokens, next ms) ── */
.surv-statgrid.surv-statgrid-5 { grid-template-columns: repeat(5, 1fr); }
.surv-stat-sub { font-size:var(--fs-sm); color: rgba(255,255,255,0.55); margin-left: 4px; font-family:var(--font-mono); }
.surv-stat-next { font-size:var(--fs-2xl); }

/* ── Resume card (warning : next session starts at WX) ── */
.surv-resume {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 20px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(255,180,80,0.16) 0%, rgba(255,140,40,0.08) 100%), linear-gradient(0deg, rgba(10,14,26,0.88), rgba(10,14,26,0.88));
  border: 1px solid rgba(255,180,80,0.40);
  
  border-radius:var(--radius-md);
  position: relative;
 box-shadow:inset 3px 0 0 0 var(--warn); }
.surv-resume-ico { font-size: 24px; color: var(--warn); flex-shrink: 0; padding-top: 2px; }
.surv-resume-body { flex: 1; }
.surv-resume-title { font-family:var(--font-display); color: var(--warn); font-size:var(--fs-lg); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.surv-resume-title b { color: var(--accent2); font-size: 18px; margin-left: 4px; text-shadow: 0 0 12px rgba(var(--accent-rgb),0.5); }
.surv-resume-desc { font-size:var(--fs-base); color: rgba(255,255,255,0.7); margin-bottom: 6px; line-height: 1.45; }
.surv-resume-stats { font-family:var(--font-mono); font-size:var(--fs-sm); color: rgba(255,255,255,0.65); letter-spacing: 0.5px; }
.surv-resume-stats b { color: var(--danger); font-weight: 700; }
.surv-rule-resume { color: var(--warn) !important; font-style: italic; }

/* ── Leaderboard ── */
.surv-lb-wrap { margin-bottom: 22px; }
.surv-lb {
  background: linear-gradient(180deg, rgba(12,18,32,0.85), rgba(8,14,28,0.85));
  border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius:var(--radius-lg);
  padding: 18px 22px;
}
.surv-lb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.surv-lb-title { font-family:var(--font-display); color: var(--accent); font-size: 16px; letter-spacing: 3px; margin: 0; text-transform: uppercase; font-weight: 700; }
.surv-lb-meta { font-family:var(--font-mono); font-size:var(--fs-sm); color: rgba(255,255,255,0.55); }
.surv-lb-loading { animation: spin 1s linear infinite; color: var(--accent); display: inline-block; }
.surv-lb-empty { padding: 24px 12px; text-align: center; color: rgba(255,255,255,0.5); font-style: italic; }
.surv-lb-list { display: flex; flex-direction: column; gap: 4px; }
.surv-lb-row {
  display: grid; grid-template-columns: 50px 1fr 90px 70px 80px;
  gap: 10px; align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.025);
  border-radius: 6px;
  font-size:var(--fs-base);
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.surv-lb-row:hover { background: rgba(var(--accent-rgb),0.05); }
.surv-lb-row.surv-lb-me {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.04));
  border-left-color: var(--accent2);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),0.2);
}
.surv-lb-rk { font-family:var(--font-display); font-weight: 700; font-size:var(--fs-base); color: var(--accent); }
.surv-lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surv-lb-fac { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing: 1px; opacity: 0.85; }
.surv-lb-best { font-family:var(--font-display); font-weight: 700; color: var(--accent2); text-align: right; }
.surv-lb-runs { font-family:var(--font-mono); font-size:var(--fs-xs); color: rgba(255,255,255,0.5); text-align: right; }
.surv-lb-me-strip {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 6px;
  font-family:var(--font-mono);
  font-size:var(--fs-base);
  color: var(--accent2);
  text-align: center;
  letter-spacing: 0.8px;
}
.surv-lb-me-strip b { color: var(--accent); font-family:var(--font-display); }
.surv-lb-me-strip.muted { color: rgba(255,255,255,0.5); border-color: var(--tint-7); background: transparent; }

/* ── Picker enrichments : header presets + summary + verdict ── */
.surv-picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.surv-picker-presets { display: flex; gap: 6px; }
.surv-pick-preset {
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  border-radius: 5px;
  color: var(--accent2);
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing: 1.5px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.surv-pick-preset:hover { background: rgba(var(--accent-rgb),0.22); border-color: var(--accent); }
.surv-picker-summary {
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius:var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.surv-pp-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size:var(--fs-base); color: rgba(255,255,255,0.75); }
.surv-pp-row b { color: var(--accent2); font-family:var(--font-mono); font-weight: 700; }
.surv-pp-verdict { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tint-3); display: flex; align-items: center; gap: 10px; }
.surv-pp-verdict:empty { display: none; }
.surv-pp-bar { flex: 1; height: 8px; background: var(--shade-3); border-radius:var(--radius-sm); overflow: hidden; position: relative; }
.surv-pp-bar-fill { height: 100%; transition: width 0.3s ease, background 0.3s; border-radius:var(--radius-sm); }
.surv-pp-verdict-weak .surv-pp-bar-fill { background: linear-gradient(90deg, var(--danger), #ffaa44); }
.surv-pp-verdict-ok .surv-pp-bar-fill   { background: linear-gradient(90deg, var(--warn), var(--success)); }
.surv-pp-verdict-strong .surv-pp-bar-fill { background: linear-gradient(90deg, var(--success), #88ffcc); box-shadow: 0 0 10px rgba(68,255,170,0.4); }
.surv-pp-verdict-lbl { font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing: 1px; min-width: 110px; text-align: right; }
.surv-pp-verdict-weak .surv-pp-verdict-lbl { color: var(--danger); }
.surv-pp-verdict-ok .surv-pp-verdict-lbl { color: var(--warn); }
.surv-pp-verdict-strong .surv-pp-verdict-lbl { color: var(--success); }
.surv-pick-utype {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; font-size: 10px; font-weight: 700;
  background: rgba(var(--accent-rgb),0.20); color: var(--accent2);
  border-radius: 3px; margin-right: 6px;
  font-family:var(--font-display);
}

/* ── Defeat recap ── */
.surv-defeat-record { color: var(--gold); font-family:var(--font-display); font-size:var(--fs-base); letter-spacing: 2px; margin-left: 10px; text-shadow: 0 0 12px rgba(255,192,64,0.6); animation: survPulseBoss 1.6s ease-in-out infinite; }
.surv-recap {
  background: linear-gradient(180deg, rgba(12,18,32,0.85), rgba(8,14,28,0.85));
  border: 1px solid rgba(var(--accent-rgb),0.28);
  border-radius:var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.surv-recap-title { font-family:var(--font-display); color: var(--accent); font-size:var(--fs-md); letter-spacing: 2.5px; margin: 0 0 14px; text-transform: uppercase; font-weight: 700; }
.surv-recap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.surv-recap-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 10px;
  background: var(--tint-2); border-radius: 6px;
  text-align: center;
}
.surv-recap-lbl { font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 1.5px; text-transform: uppercase; font-family:var(--font-mono); margin-bottom: 6px; }
.surv-recap-cell b { font-family:var(--font-display); font-size:var(--fs-2xl); color: var(--accent2); font-weight: 700; line-height: 1; }
.surv-recap-unlock {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(var(--accent-rgb),0.18);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.surv-recap-unlock-lbl { font-family:var(--font-display); font-size:var(--fs-sm); letter-spacing: 1.5px; color: var(--gold); }
.surv-recap-unlock-tag {
  padding: 5px 10px; border-radius: 14px;
  background: rgba(255,192,64,0.15); border: 1px solid rgba(255,192,64,0.4);
  font-family:var(--font-mono); font-size:var(--fs-sm); color: var(--gold);
  letter-spacing: 0.5px;
}
.surv-cta-row-multi { display: flex; gap: 12px; justify-content: center; }

/* ── Decision hints (cost preview) ── */
.surv-dec-hint-warn { color: var(--danger); font-family:var(--font-mono); }
.surv-dec-hint-num { color: var(--gold); font-family:var(--font-mono); display: block; margin-top: 2px; font-size: 10px; }
.surv-dec[disabled] .surv-dec-hint-warn { color: rgba(255,119,119,0.5); }

/* ── Skip button on combat anim ── */
.survc-skip {
  position: absolute; bottom: 28px; right: 32px; z-index: 3;
  background: rgba(0,0,0,0.55); border: 1px solid var(--tint-10);
  color: rgba(255,255,255,0.85); padding: 8px 16px; border-radius: 6px;
  font-family:var(--font-display); font-size:var(--fs-sm); letter-spacing: 2px;
  cursor: pointer; pointer-events: auto;
  transition: all 0.15s;
}
.survc-skip:hover { background: rgba(0,0,0,0.8); border-color: var(--accent); color: var(--accent2); }

/* ── Responsive : 5-card grid + leaderboard + recap ── */
@media (max-width: 1100px) {
  .surv-statgrid.surv-statgrid-5 { grid-template-columns: repeat(3, 1fr); }
  .surv-statgrid.surv-statgrid-5 .surv-stat:nth-child(4),
  .surv-statgrid.surv-statgrid-5 .surv-stat:nth-child(5) { grid-column: span 1; }
  .surv-recap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .surv-statgrid.surv-statgrid-5 { grid-template-columns: repeat(2, 1fr); }
  .surv-stat-lbl { letter-spacing: 1px !important; font-size: 11px !important; }
  .surv-stat-val { font-size:var(--fs-2xl); }
  .surv-resume { flex-direction: column; gap: 8px; }
  .surv-lb-row { grid-template-columns: 40px 1fr 60px 60px; gap: 8px; padding: 8px 10px; font-size:var(--fs-sm); }
  .surv-lb-runs { display: none; }
  .surv-picker-head { flex-direction: column; }
  .surv-picker-presets { width: 100%; justify-content: stretch; }
  .surv-pick-preset { flex: 1; }
  .surv-cta-row-multi { flex-direction: column; }
  .survc-skip { bottom: 16px; right: 16px; padding: 10px 14px; }
}

/* ═══ RANKINGS PvE (F5) ═══ */
.rnk-subtab-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid rgba(var(--accent-rgb),0.14); background: linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.12)); justify-content:center; }
.rnk-subtab { padding: 8px 18px; font-size:var(--fs-base); letter-spacing: 1.5px; font-weight:600; }
.rnk-pve-exp-selector { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: linear-gradient(180deg,rgba(var(--accent-rgb),0.08),rgba(var(--accent-rgb),0.02)); border-bottom: 1px solid rgba(var(--accent-rgb),0.14); justify-content:center; }
.rnk-pve-exp-lbl { font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; color: var(--accent2); letter-spacing: 2px; text-transform: uppercase; }
.rnk-pve-body, #rnkMonBody, .rnk-monument-body {
  padding: 14px 20px 20px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Fix scroll molette PvE/Monuments — le double overflow imbriqué
   (#rnkMonBody + .rnk-table-wrap) interceptait les events wheel.
   Le parent scrolle seul, la table-wrap reste statique. */
#rnkMonBody .rnk-table-wrap,
.rnk-pve-body .rnk-table-wrap {
  flex: none;
  overflow: visible;
  padding: 0;
}
.rnk-pve-empty { padding: 60px 20px; text-align: center; color: rgba(255,255,255,0.55); font-family:var(--font-mono); font-size:var(--fs-lg); font-style: italic; letter-spacing:1px; }
.rnk-my-rank-inline { margin-top: 18px; padding: 14px 20px; background: linear-gradient(180deg,rgba(212,146,10,0.14),rgba(212,146,10,0.05)); border: 1px solid rgba(212,146,10,0.35); border-radius:var(--radius); text-align: center; font-family:var(--font-mono); font-size:var(--fs-md); color: var(--textbright); letter-spacing:0.5px; box-shadow:0 0 16px rgba(212,146,10,0.1); }
.rnk-my-rank-inline b { color: var(--gold); font-family:var(--font-display); font-size:var(--fs-lg); }

/* F11 — Exploits PvE dashboard */
.exploits-wrap { padding: 14px 18px; }
.exp-header { margin-bottom: 18px; }
.exp-header h2 {
  margin: 0 0 4px; font-family:var(--font-display);
  font-size: 20px; letter-spacing: 1px;
  color: #ffd860; text-shadow: 0 0 10px rgba(255,215,96,0.4);
}
.exp-header-sub { margin: 0; font-size:var(--fs-base); color: var(--textmid); }
.exp-grid {
  display: grid; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.exp-tile {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px;
  background: rgba(8,12,30,0.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius:var(--radius-md);
  transition: border-color .2s, transform .2s;
}
.exp-tile:hover { border-color: rgba(var(--accent-rgb),0.45); transform: translateY(-1px); }
.exp-tile-ico { font-size:var(--fs-3xl); line-height: 1; }
.exp-tile-val { font-family:var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent2); }
.exp-tile-lbl { font-size:var(--fs-xs); color: var(--textmid); text-transform: uppercase; letter-spacing: 0.5px; }
.exp-tile-sub { margin-top: 2px; font-size:var(--fs-xs); color: var(--textsoft); }
.exp-section { margin-bottom: 18px; padding: 14px 16px; background: rgba(8,12,30,0.5); border: 1px solid rgba(var(--accent-rgb),0.12); border-radius:var(--radius-md); }
.exp-section h3 {
  margin: 0 0 10px; font-family:var(--font-display);
  font-size:var(--fs-md); letter-spacing: 0.8px; color: var(--accent2);
}
.exp-badges-row { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-badge {
  display: inline-flex; align-items: center; padding: 4px 10px;
  font-family:var(--font-mono); font-size:var(--fs-sm);
  background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius:var(--radius-lg); color: var(--text);
}
.exp-badge-gold {
  background: linear-gradient(135deg, rgba(255,215,96,0.2), rgba(255,160,40,0.1));
  border-color: rgba(255,215,96,0.55); color: #ffd860;
  text-shadow: 0 0 6px rgba(255,215,96,0.4);
}
.exp-badge-locked { opacity: 0.4; }
.exp-detail { margin-top: 6px; font-size:var(--fs-sm); color: var(--textsoft); }
.exp-ms-block { margin-bottom: 10px; }
.exp-ms-title { font-family:var(--font-mono); font-size:var(--fs-sm); color: var(--text); margin-bottom: 4px; }
.exp-ms-bar {
  height: 8px; background: var(--tint-4);
  border: 1px solid rgba(var(--accent-rgb),0.15); border-radius:var(--radius-sm);
  overflow: hidden;
}
.exp-ms-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), #ffd860);
  transition: width .6s ease-out;
}
.exp-ms-next { margin-top: 3px; font-size:var(--fs-xs); color: var(--textsoft); }
.exp-milestone-max {
  display: inline-block; padding: 2px 8px;
  background: rgba(255,215,96,0.18); border: 1px solid rgba(255,215,96,0.5);
  border-radius:var(--radius-md); color: #ffd860; font-size:var(--fs-xs); font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   PLANIFICATEUR v2 — page dédiée (onglet Infra)
   Hero header · Stats · 5 sections cards · Empty states · Anims
   ════════════════════════════════════════════════════════════ */
.qp2-page {
  display:flex; flex-direction:column; gap:16px;
  font-family:var(--font-mono);
  --qp-asgard:#7ed3ff;
  --qp-gold:#ffc85a;
  --qp-success:#2ecc88;
  --qp-danger:#ff4d6d;
  --qp-ancient:#c9a3ff;
}

/* ── HERO HEADER ──────────────────────────────────────────── */
.qp2-hero {
  position:relative;
  padding:20px 24px;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255,200,90,0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(126,211,255,0.08), transparent 70%),
    linear-gradient(135deg, rgba(8,14,28,0.85), rgba(12,20,38,0.7));
  border:1px solid rgba(255,200,90,0.25);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 24px var(--shade-3), inset 0 1px 0 var(--tint-2);
}
.qp2-hero-bar {
  position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--qp-gold) 30%, var(--qp-asgard) 70%, transparent);
  opacity:0.7;
}
.qp2-hero::after {
  content:''; position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,90,0.10), transparent 65%);
  filter:blur(8px);
}
.qp2-hero-row {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; position:relative; z-index:1;
}
.qp2-hero-l { display:flex; align-items:center; gap:14px; min-width:0; }
.qp2-hero-icowrap {
  width:48px; height:48px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,200,90,0.22), rgba(255,200,90,0.05));
  border:1px solid rgba(255,200,90,0.5);
  border-radius:var(--radius-lg);
  color:var(--qp-gold);
  box-shadow:0 0 14px rgba(255,200,90,0.25), inset 0 1px 0 var(--tint-4);
}
.qp2-hero-txt { display:flex; flex-direction:column; gap:4px; min-width:0; }
.qp2-hero-title {
  margin:0;
  font-family:var(--font-display); font-size:24px; font-weight:900;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--textbright);
  text-shadow:0 0 12px rgba(255,200,90,0.3);
  line-height:1;
}
.qp2-hero-sub {
  font-size:var(--fs-sm); color:var(--textsoft); font-style:italic;
  display:inline-flex; align-items:center; gap:6px; max-width:60ch;
}
.qp2-hero-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.qp2-stat {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:62px; padding:6px 12px;
  background:rgba(0,0,0,0.35); border:1px solid var(--tint-4);
  border-radius:var(--radius-md);
  transition:all 0.2s;
}
.qp2-stat:hover { transform:translateY(-1px); border-color:rgba(255,255,255,0.18); }
.qp2-stat-num {
  font-family:var(--font-display); font-size:20px; font-weight:900; line-height:1;
  letter-spacing:1px;
}
.qp2-stat-lbl {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--textsoft); font-family:var(--font-display);
}
.qp2-stat-total .qp2-stat-num   { color:var(--qp-asgard); }
.qp2-stat-ready .qp2-stat-num   { color:var(--qp-success); }
.qp2-stat-blocked .qp2-stat-num { color:var(--qp-danger); }
.qp2-stat-total   { border-color:rgba(126,211,255,0.3); }
.qp2-stat-ready   { border-color:rgba(46,204,136,0.3); }
.qp2-stat-blocked { border-color:rgba(255,77,109,0.3); }

.qp2-hero-clear {
  background:rgba(255,77,109,0.1); border:1px solid rgba(255,77,109,0.4);
  color:var(--qp-danger); font-family:var(--font-display); font-size:var(--fs-xs);
  letter-spacing:1.5px; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--radius); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all 0.2s;
}
.qp2-hero-clear:hover {
  background:rgba(255,77,109,0.22); border-color:var(--qp-danger);
  box-shadow:0 0 12px rgba(255,77,109,0.4);
}

/* ── GRID ─────────────────────────────────────────────────── */
.qp2-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.qp2-grid > .qp2-section:nth-child(5) { grid-column:1 / -1; } /* Défenses pleine largeur */

/* ── SECTION CARD ─────────────────────────────────────────── */
.qp2-section {
  position:relative;
  background:linear-gradient(180deg, rgba(12,20,38,0.6), rgba(8,14,28,0.7));
  border:1px solid var(--qp-acc-border, rgba(126,211,255,0.18));
  border-radius:var(--radius-lg);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
  min-height:170px;
  transition:border-color 0.2s, box-shadow 0.2s;
  overflow:hidden;
}
.qp2-section::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--qp-acc, var(--qp-asgard));
  opacity:0.7;
  border-radius:12px 0 0 12px;
}
.qp2-section:hover {
  border-color:var(--qp-acc-border-hover, rgba(126,211,255,0.4));
  box-shadow:0 6px 24px rgba(0,0,0,0.35), 0 0 12px var(--qp-acc-glow, rgba(126,211,255,0.1));
}
.qp2-acc-asgard  { --qp-acc:var(--qp-asgard);  --qp-acc-border:rgba(126,211,255,0.22); --qp-acc-border-hover:rgba(126,211,255,0.5); --qp-acc-glow:rgba(126,211,255,0.18); }
.qp2-acc-gold    { --qp-acc:var(--qp-gold);    --qp-acc-border:rgba(255,200,90,0.22);  --qp-acc-border-hover:rgba(255,200,90,0.5);  --qp-acc-glow:rgba(255,200,90,0.18); }
.qp2-acc-success { --qp-acc:var(--qp-success); --qp-acc-border:rgba(46,204,136,0.22);  --qp-acc-border-hover:rgba(46,204,136,0.5);  --qp-acc-glow:rgba(46,204,136,0.18); }
.qp2-acc-danger  { --qp-acc:var(--qp-danger);  --qp-acc-border:rgba(255,77,109,0.22);  --qp-acc-border-hover:rgba(255,77,109,0.5);  --qp-acc-glow:rgba(255,77,109,0.18); }
.qp2-acc-ancient { --qp-acc:var(--qp-ancient); --qp-acc-border:rgba(201,163,255,0.22); --qp-acc-border-hover:rgba(201,163,255,0.5); --qp-acc-glow:rgba(201,163,255,0.18); }

/* Section header */
.qp2-sec-hdr {
  display:flex; align-items:center; gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--tint-3);
}
.qp2-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0; transition:all 0.3s;
}
.qp2-dot-idle   { background:var(--tint-9); }
.qp2-dot-active { background:var(--qp-success); box-shadow:0 0 8px var(--qp-success); animation:qp2DotPulse 2s ease-in-out 1; }
.qp2-dot-warn   { background:var(--qp-danger); box-shadow:0 0 8px var(--qp-danger); animation:qp2DotPulse 1.4s ease-in-out 1; }
@keyframes qp2DotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }
.qp2-sec-ico { color:var(--qp-acc); display:inline-flex; }
.qp2-sec-title {
  flex:1;
  font-family:var(--font-display); font-size:var(--fs-md);
  letter-spacing:2.5px; text-transform:uppercase; color:var(--textbright);
}
.qp2-sec-count {
  background:var(--shade-3); color:var(--qp-acc);
  border:1px solid var(--qp-acc-border, rgba(126,211,255,0.3));
  padding:2px 10px; border-radius:var(--radius-md);
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700;
  min-width:26px; text-align:center;
}
.qp2-clear {
  background:transparent; border:1px solid rgba(255,77,109,0.3);
  color:var(--qp-danger); width:28px; height:26px;
  border-radius:5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.qp2-clear:hover { background:rgba(255,77,109,0.15); border-color:var(--qp-danger); }

/* List */
.qp2-list { display:flex; flex-direction:column; gap:8px; }

/* ── ROW (item planifié) ──────────────────────────────────── */
.qp2-row {
  display:grid;
  grid-template-columns:30px 56px minmax(0,1fr) auto auto;
  gap:12px; align-items:center;
  position:relative;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  border:1px solid var(--tint-4);
  border-radius:var(--radius);
  transition:transform 0.18s, border-color 0.18s, box-shadow 0.18s, background 0.18s;
  animation:qp2RowFadeIn 0.3s ease-out;
}
@keyframes qp2RowFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.qp2-row:hover {
  transform:translateY(-2px);
  border-color:var(--qp-acc-border-hover, rgba(126,211,255,0.3));
  box-shadow:0 6px 16px var(--shade-3);
  background:linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.22));
}
.qp2-row.qp2-first {
  background:linear-gradient(180deg, var(--qp-acc-glow, rgba(126,211,255,0.06)), rgba(0,0,0,0.28));
  border-color:var(--qp-acc-border-hover, rgba(126,211,255,0.4));
}
.qp2-row.qp2-blocked {
  background:linear-gradient(180deg, rgba(255,77,109,0.1), rgba(0,0,0,0.25));
  border-color:rgba(255,77,109,0.4);
}
.qp2-pos {
  font-family:var(--font-display);
  font-size:var(--fs-xs); font-weight:900;
  color:var(--qp-acc, var(--qp-asgard));
  background:var(--shade-2);
  border:1.5px solid var(--qp-acc, var(--qp-asgard));
  border-radius:50%;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 6px var(--shade-2);
}
.qp2-thumb {
  width:56px; height:56px;
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg, rgba(126,211,255,0.08), var(--shade-3));
  border:1px solid var(--tint-3);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.qp2-thumb.has-illus {
  background-size:cover;
  background-position:center;
  position:relative;
}
.qp2-thumb.has-illus::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, var(--shade-3) 100%);
}
.qp2-thumb-emoji { font-size:24px; opacity:0.85; }
.qp2-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.qp2-name {
  font-family:var(--font-display);
  font-size:var(--fs-base); font-weight:700;
  letter-spacing:1px;
  color:var(--textbright);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qp2-sub { display:inline-flex; align-items:center; gap:6px; min-height:18px; }
.qp2-tag {
  display:inline-flex; align-items:center;
  font-family:var(--font-display);
  font-size:9px; letter-spacing:1.5px; font-weight:700;
  padding:2px 8px; border-radius:var(--radius-md);
  text-transform:uppercase;
}
.qp2-tag-next {
  background:linear-gradient(90deg, rgba(46,204,136,0.25), rgba(46,204,136,0.05));
  color:var(--qp-success);
  border:1px solid rgba(46,204,136,0.5);
  box-shadow:0 0 8px rgba(46,204,136,0.2);
  animation:qp2NextPulse 2.4s ease-in-out infinite;
}
@keyframes qp2NextPulse { 0%,100%{box-shadow:0 0 8px rgba(46,204,136,0.2)} 50%{box-shadow:0 0 14px rgba(46,204,136,0.4)} }
.qp2-status {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-base); min-width:22px; height:20px;
  padding:0 6px; border-radius:5px;
  background:rgba(0,0,0,0.45);
  animation:qp2StatusPulse 1.6s ease-in-out infinite;
}
.qp2-status.qp2-lock { color:var(--warn); border:1px solid rgba(255,180,30,0.4); }
.qp2-status.qp2-busy { color:var(--qp-asgard); border:1px solid rgba(126,211,255,0.4); }
.qp2-status.qp2-res  { color:var(--qp-gold); border:1px solid rgba(255,200,90,0.4); }
@keyframes qp2StatusPulse { 0%,100%{opacity:0.85} 50%{opacity:1} }

.qp2-meta {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:56px; padding:0 4px;
}
.qp2-meta-lbl {
  font-size:9px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--textsoft); font-family:var(--font-display);
}
.qp2-lv {
  font-family:var(--font-mono);
  font-size:var(--fs-md); font-weight:700; color:var(--textbright);
  letter-spacing:0.5px;
}
.qp2-qty {
  width:54px; background:var(--shade-2);
  border:1px solid var(--qp-acc-border, rgba(126,211,255,0.3));
  color:var(--textbright); font-family:var(--font-mono);
  font-size:var(--fs-base); font-weight:700;
  padding:3px 4px; border-radius:5px; text-align:center;
}
.qp2-qty:focus {
  outline:none;
  border-color:var(--qp-acc, var(--qp-asgard));
  box-shadow:0 0 6px var(--qp-acc-glow, rgba(126,211,255,0.3));
}

.qp2-actions { display:inline-flex; gap:4px; }
.qp2-act {
  background:var(--shade-3);
  border:1px solid var(--tint-7);
  color:var(--textmid);
  width:28px; height:28px; border-radius:6px;
  cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.qp2-act:hover:not([disabled]) {
  background:var(--qp-acc-glow, rgba(126,211,255,0.15));
  border-color:var(--qp-acc, var(--qp-asgard));
  color:var(--qp-acc, var(--qp-asgard));
  transform:translateY(-1px);
}
.qp2-act[disabled] { opacity:0.25; cursor:not-allowed; }
.qp2-act-del { border-color:rgba(255,77,109,0.3); color:var(--qp-danger); }
.qp2-act-del:hover:not([disabled]) {
  background:rgba(255,77,109,0.18);
  border-color:var(--qp-danger);
  color:var(--qp-danger);
}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.qp2-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:24px 16px;
  text-align:center;
}
.qp2-empty-ico {
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, var(--qp-acc-glow, rgba(126,211,255,0.12)), transparent 70%);
  color:var(--qp-acc, var(--qp-asgard));
  opacity:0.7;
}
.qp2-empty-msg {
  font-size:var(--fs-base); color:var(--textsoft); font-style:italic;
  letter-spacing:0.5px;
}
.qp2-empty-cta {
  background:transparent; border:1px solid var(--qp-acc-border-hover, rgba(126,211,255,0.4));
  color:var(--qp-acc, var(--qp-asgard));
  font-family:var(--font-display); font-size:var(--fs-xs);
  letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 14px; border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all 0.18s;
}
.qp2-empty-cta:hover {
  background:var(--qp-acc-glow, rgba(126,211,255,0.15));
  box-shadow:0 0 12px var(--qp-acc-glow, rgba(126,211,255,0.3));
  transform:translateY(-1px);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
/* Tablette : passe en 1 colonne dès 1280px pour laisser respirer les rows */
@media (max-width: 1280px) {
  .qp2-grid { grid-template-columns:1fr; gap:10px; }
  .qp2-grid > .qp2-section:nth-child(5) { grid-column:1; }
}
/* Tablette portrait & étroit : hero compact, stats wrap mais alignées */
@media (max-width: 1100px) {
  .qp2-hero { padding:16px 20px; }
  .qp2-hero-row { gap:14px; }
  .qp2-hero-title { font-size:20px; letter-spacing:4px; }
  .qp2-hero-sub { font-size:var(--fs-xs); max-width:48ch; }
  .qp2-hero-icowrap { width:42px; height:42px; }
  .qp2-stat { min-width:58px; padding:5px 10px; }
  .qp2-stat-num { font-size:18px; }
  .qp2-stat-lbl { font-size:8.5px; }
}
/* Mobile portrait : actions sur ligne séparée + hero stack */
@media (max-width: 700px) {
  .qp2-hero { padding:14px 14px; }
  .qp2-hero-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .qp2-hero-r { width:100%; justify-content:space-between; }
  .qp2-hero-title { font-size:18px; letter-spacing:3px; }
  .qp2-hero-clear { padding:6px 10px; font-size:10px; }
  .qp2-row { grid-template-columns:26px 44px minmax(0,1fr) auto; gap:8px; padding:8px 10px; }
  .qp2-row .qp2-actions { grid-column:1 / -1; justify-content:flex-end; padding-top:4px; }
  .qp2-thumb { width:44px; height:44px; }
  .qp2-name { font-size:var(--fs-sm); }
  .qp2-meta { min-width:48px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Bannière "Sieges of Ascension" + Archive S1
   ═══════════════════════════════════════════════════════════ */

/* ── Bannière S2 — full premium ── */
.surv-s2-banner {
  position: relative;
  margin: 4px 0 22px;
  padding: 28px 32px 26px;
  border-radius:var(--radius-xl);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(165deg, rgba(8,14,30,0.92), rgba(4,10,22,0.96));
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 32px rgba(var(--accent-rgb), 0.06),
    0 14px 40px var(--shade-3),
    inset 0 1px 0 var(--tint-3);
}
/* Couche animée de fond (orbital glow) */
.surv-s2-banner-bg {
  position: absolute; inset: -40%;
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 50% at 18% 28%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(ellipse 32% 44% at 82% 70%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    radial-gradient(ellipse 28% 36% at 50% 50%, rgba(255,255,255, 0.04), transparent 70%);
  animation: survS2Orbit 22s ease-in-out infinite alternate;
  filter: blur(2px);
}
@keyframes survS2Orbit {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
/* Trait shimmer en haut */
.surv-s2-banner::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
/* Glow doux au survol — la card "respire" */
.surv-s2-banner::after {
  content: ''; position: absolute; inset: 0; border-radius:var(--radius-xl);
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(var(--accent-rgb), 0.04);
  transition: box-shadow 0.6s;
}
.surv-s2-banner:hover::after { box-shadow: inset 0 0 80px rgba(var(--accent-rgb), 0.10); }

.surv-s2-banner-head { text-align: center; margin-bottom: 24px; }

.surv-s2-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  margin-bottom: 14px;
}
.surv-s2-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 18px rgba(var(--accent-rgb), 0.5);
  animation: survS2BadgePulse 1.6s ease-in-out infinite;
}
@keyframes survS2BadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.surv-s2-banner-title {
  font-family: var(--font-display);
  font-size:var(--fs-4xl); font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--textbright);
  margin: 0 0 8px;
  text-shadow:
    0 0 20px rgba(var(--accent-rgb), 0.4),
    0 0 40px rgba(var(--accent-rgb), 0.18);
  background: linear-gradient(180deg, var(--textbright) 0%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.surv-s2-banner-sub {
  font-family: var(--font-mono); font-size:var(--fs-base);
  color: rgba(255,255,255,0.65);
  letter-spacing: 1px; max-width: 580px; margin: 0 auto;
  line-height: 1.55;
}

.surv-s2-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 4px;
}
.surv-s2-pillar {
  position: relative;
  padding: 18px 16px 16px;
  border-radius:var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}
.surv-s2-pillar::before {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
  opacity: 0.5; transition: opacity 0.3s;
}
.surv-s2-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.04));
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.12);
}
.surv-s2-pillar:hover::before { opacity: 1; }
.surv-s2-pillar-ico {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  line-height: 1;
}
.surv-s2-pillar-name {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textbright);
  margin-bottom: 6px;
}
.surv-s2-pillar-desc {
  font-family: var(--font-body); font-size:var(--fs-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

/* ── Archive S1 — style légacy doré ── */
.surv-s1-archive {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 18px 14px 22px;
  border-radius:var(--radius-lg);
  border: 1px solid rgba(212, 146, 10, 0.22);
  background:
    linear-gradient(135deg, rgba(28,22,8,0.6), rgba(18,14,6,0.7));
  overflow: hidden;
  transition: all 0.25s;
}
.surv-s1-archive:hover {
  border-color: rgba(212, 146, 10, 0.4);
  box-shadow: 0 4px 24px rgba(212, 146, 10, 0.10);
}
/* Bande latérale dorée */
.surv-s1-archive-stripe {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(212,146,10,0.7), rgba(212,146,10,0.2));
  box-shadow: 0 0 8px rgba(212, 146, 10, 0.3);
}
.surv-s1-archive-head { flex: 0 0 auto; }
.surv-s1-archive-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 146, 10, 0.10);
  border: 1px solid rgba(212, 146, 10, 0.28);
  opacity: 0.9;
}
.surv-s1-archive-body {
  flex: 1; display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
}
.surv-s1-archive-stat { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.surv-s1-archive-stat-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(212, 146, 10, 0.65);
}
.surv-s1-archive-stat-val {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px; line-height: 1;
  text-shadow: 0 0 10px rgba(212, 146, 10, 0.25);
}
.surv-s1-archive-divider {
  width: 1px; height: 28px;
  background: linear-gradient(180deg, transparent, rgba(212,146,10,0.25), transparent);
}
.surv-s1-archive-desc {
  font-family: var(--font-body); font-size:var(--fs-sm);
  color: rgba(255,255,255, 0.55);
  letter-spacing: 0.3px; font-style: italic;
  max-width: 280px; line-height: 1.4;
  flex: 1; min-width: 180px;
}
.surv-s1-archive-cta {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  padding: 8px 16px;
  border-radius:var(--radius);
  background: rgba(212, 146, 10, 0.08);
  border: 1px solid rgba(212, 146, 10, 0.3);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-s1-archive-cta:hover {
  background: rgba(212, 146, 10, 0.18);
  border-color: rgba(212, 146, 10, 0.5);
  color: var(--textbright);
  box-shadow: 0 0 14px rgba(212, 146, 10, 0.2);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Widget Secteurs Tactiques (Front / Centre / Arrière)
   ═══════════════════════════════════════════════════════════ */

.surv-sectors-panel {
  position: relative;
  margin: 18px 0 16px;
  padding: 22px 22px 18px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  background: linear-gradient(180deg, rgba(8,14,28,0.85), rgba(6,12,24,0.85));
  backdrop-filter: blur(6px);
}
.surv-sectors-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.surv-sectors-title {
  font-family: var(--font-display);
  font-size:var(--fs-xl); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.surv-sectors-profile {
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255, 0.05);
  border: 1px solid rgba(255,255,255, 0.15);
  color: var(--textmid);
}
.surv-sectors-profile.surv-prof-boss {
  color: #ff6b6b;
  background: rgba(255,107,107, 0.08);
  border-color: rgba(255,107,107, 0.35);
  text-shadow: 0 0 10px rgba(255,107,107, 0.5);
  animation: survProfPulse 2s ease-in-out infinite;
}
.surv-sectors-profile.surv-prof-blitz {
  color: #ffce5b;
  background: rgba(255,206,91, 0.08);
  border-color: rgba(255,206,91, 0.35);
  text-shadow: 0 0 10px rgba(255,206,91, 0.5);
}
@keyframes survProfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107, 0.4); }
  50%      { box-shadow: 0 0 16px 2px rgba(255,107,107, 0.18); }
}
.surv-sectors-reassign {
  margin-left: auto;
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 9px 18px;
  border-radius:var(--radius);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 7px;
}
.surv-sectors-reassign:hover {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
  transform: translateY(-1px);
}

.surv-sectors-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.surv-sec-col {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 11px;
  border: 1px solid var(--sec-soft, var(--tint-7));
  background: linear-gradient(180deg, var(--sec-soft, var(--tint-3)), rgba(0,0,0,0.18));
  transition: all 0.25s;
  overflow: hidden;
  isolation: isolate;
}
.surv-sec-col::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sec-col), transparent);
  opacity: 0.7;
}
.surv-sec-col:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--shade-2),
              0 0 18px var(--sec-soft);
  border-color: var(--sec-col);
}
/* États : weak / risk / strong / calm */
.surv-sec-col.surv-sec-weak { box-shadow: inset 0 0 22px rgba(231,76,60,0.08); }
.surv-sec-col.surv-sec-risk { box-shadow: inset 0 0 22px rgba(255,180,0,0.08); }
.surv-sec-col.surv-sec-strong::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(46,204,113,0.6), transparent);
  pointer-events: none;
}

.surv-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.surv-sec-name {
  font-family: var(--font-display);
  font-size:var(--fs-lg); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--textbright);
  display: flex; align-items: center; gap: 8px;
}
.surv-sec-ico {
  font-size:var(--fs-2xl); color: var(--sec-col);
  text-shadow: 0 0 12px var(--sec-col);
  line-height: 1;
}
.surv-sec-status {
  font-family: var(--font-mono);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255, 0.06);
  color: var(--textsoft);
  border: 1px solid rgba(255,255,255, 0.1);
}
.surv-sec-weak  .surv-sec-status { color: var(--danger);  background: rgba(231,76,60,0.12);  border-color: rgba(231,76,60,0.3); }
.surv-sec-risk  .surv-sec-status { color: var(--warn);    background: rgba(255,180,0,0.12);  border-color: rgba(255,180,0,0.3); }
.surv-sec-strong .surv-sec-status { color: var(--success); background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.3); }
.surv-sec-calm   .surv-sec-status { color: var(--textsoft); }

.surv-sec-bars { margin-bottom: 14px; }
.surv-sec-bar-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size:var(--fs-base);
  color: var(--textmid);
  margin-bottom: 5px;
}
.surv-sec-bar-lbl { display: flex; align-items: center; gap: 5px; letter-spacing: 0.5px; }
.surv-sec-bar-val { font-weight: 700; color: var(--textbright); }
.surv-sec-bar-track {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255, 0.06);
  overflow: hidden; margin: 4px 0 8px;
  position: relative;
}
.surv-sec-bar-fill {
  height: 100%; border-radius: 999px;
  /* Fallback Safari iOS 15-16.3 : éclaircissement par mélange avec blanc → ton clair plausible */
  background: linear-gradient(90deg, var(--sec-col), #b8c8d8);
  background: linear-gradient(90deg, var(--sec-col), color-mix(in srgb, var(--sec-col) 60%, white));
  box-shadow: 0 0 8px var(--sec-col);
  transition: width 0.4s ease;
}

.surv-sec-troops {
  background: rgba(0,0,0, 0.18);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.surv-sec-troops-enemy { background: rgba(231,76,60, 0.04); }
.surv-sec-troops-lbl {
  font-family: var(--font-mono);
  font-size:var(--fs-xs); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 6px;
}
.surv-sec-troops-list { display: flex; flex-direction: column; gap: 3px; }
.surv-sec-troop {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size:var(--fs-base);
  color: var(--textmid);
}
.surv-sec-troop-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.surv-sec-troop-qty { color: var(--textbright); font-weight: 600; }
.surv-sec-troop-empty { color: var(--textsoft); font-size:var(--fs-base); font-style: italic; }
.surv-sec-troop-more { color: var(--accent); opacity: 0.7; font-style: italic; }

.surv-sectors-hint {
  margin-top: 12px;
  font-family: var(--font-body); font-size:var(--fs-md);
  color: var(--textsoft);
  line-height: 1.5;
  padding: 11px 16px;
  background: rgba(255,255,255, 0.03);
  border-radius:var(--radius);
  
 box-shadow:inset 3px 0 0 0 var(--accent); }

/* ── Modal de réassignation ── */
.surv-reassign-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay-fullscreen, 1000);
  background: rgba(0,0,0, 0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: survReassignFade 0.2s ease-out both;
}
@keyframes survReassignFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.surv-reassign-modal {
  width: 880px; max-width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(6,14,30,0.98), rgba(4,8,18,0.99));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.08), 0 12px 40px rgba(0,0,0, 0.5);
  overflow: hidden;
  animation: survReassignSlide 0.25s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes survReassignSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.surv-reassign-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.surv-reassign-title {
  font-family: var(--font-display);
  font-size:var(--fs-xl); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.surv-reassign-close {
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.2s;
}
.surv-reassign-close:hover {
  color: var(--danger);
  background: rgba(231,76,60, 0.15);
  border-color: rgba(231,76,60, 0.3);
}
.surv-reassign-body {
  flex: 1; overflow-y: auto;
  padding: 22px 28px;
}
.surv-reassign-empty {
  text-align: center; padding: 40px 20px;
  color: var(--textsoft); font-style: italic;
}
.surv-reassign-table {
  width: 100%; border-collapse: collapse;
}
.surv-reassign-table thead th {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--textsoft);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255, 0.1);
  text-align: center;
}
.surv-reassign-table thead .ra-sec-h { text-align: center; }
.surv-reassign-table thead th:first-child { text-align: left; }
.surv-reassign-table tbody tr { border-bottom: 1px solid rgba(255,255,255, 0.04); }
.surv-reassign-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.03); }
.surv-reassign-table .ra-name {
  font-family: var(--font-body); font-size:var(--fs-md);
  color: var(--textbright);
  padding: 10px;
}
.surv-reassign-table .ra-total {
  font-family: var(--font-mono); font-size:var(--fs-md);
  color: var(--accent2); font-weight: 700;
  text-align: center;
  padding: 10px;
}
.ra-cell { padding: 8px 6px; vertical-align: middle; }
.ra-cell-inner {
  display: flex; align-items: center; gap: 5px;
  justify-content: center;
}
.ra-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255, 0.12);
  background: rgba(255,255,255, 0.04);
  color: var(--textbright);
  font-size:var(--fs-lg); font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.ra-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.ra-minus:hover { color: var(--danger); border-color: rgba(231,76,60,0.4); background: rgba(231,76,60, 0.1); }
.ra-plus:hover  { color: var(--success); border-color: rgba(46,204,113,0.4); background: rgba(46,204,113, 0.1); }
.ra-input {
  width: 64px; height: 30px;
  text-align: center;
  font-family: var(--font-mono); font-size:var(--fs-base);
  background: var(--shade-1);
  border: 1px solid rgba(255,255,255, 0.12);
  border-radius: 6px;
  color: var(--textbright);
  outline: none;
  transition: border-color 0.15s;
}
.ra-input:focus { border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25); }
.ra-input::-webkit-inner-spin-button, .ra-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.surv-reassign-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
  background: rgba(0,0,0, 0.2);
}
.surv-reassign-preset {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  color: var(--textmid);
  cursor: pointer;
  transition: all 0.15s;
}
.surv-reassign-preset:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.surv-reassign-actions {
  margin-left: auto; display: flex; gap: 8px;
}
.surv-reassign-cancel {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.15s;
}
.surv-reassign-cancel:hover {
  color: var(--danger);
  background: rgba(231,76,60, 0.1);
  border-color: rgba(231,76,60, 0.3);
}
.surv-reassign-confirm {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 6px;
  background: rgba(46,204,113, 0.15);
  border: 1px solid rgba(46,204,113, 0.4);
  color: var(--success);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-shadow: 0 0 10px rgba(46,204,113, 0.3);
}
.surv-reassign-confirm:hover {
  background: rgba(46,204,113, 0.28);
  box-shadow: 0 0 16px rgba(46,204,113, 0.25);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Cartes de Bataille (Draft Modal + Active Bar)
   ═══════════════════════════════════════════════════════════ */

/* ── Modal de draft ── */
.surv-draft-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay-fullscreen, 1000);
  background: rgba(0,0,0, 0.82);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: survDraftFade 0.3s ease-out both;
}
@keyframes survDraftFade {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}
.surv-draft-modal {
  position: relative;
  width: 900px; max-width: 100%;
  padding: 36px 32px 28px;
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(8,14,30,0.96), rgba(4,10,22,0.98));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow:
    0 0 50px rgba(var(--accent-rgb), 0.1),
    0 18px 60px rgba(0,0,0, 0.6),
    inset 0 1px 0 rgba(255,255,255, 0.04);
  overflow: hidden;
  isolation: isolate;
}
/* Orbe magique en arrière-plan */
.surv-draft-orb {
  position: absolute; inset: -40% -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    radial-gradient(ellipse 26% 20% at 25% 30%, rgba(var(--accent-rgb), 0.10), transparent 65%),
    radial-gradient(ellipse 26% 20% at 75% 70%, rgba(var(--accent-rgb), 0.10), transparent 65%);
  filter: blur(2px);
  animation: survDraftOrb 18s ease-in-out infinite alternate;
}
@keyframes survDraftOrb {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.surv-draft-head { text-align: center; margin-bottom: 26px; }
.surv-draft-title {
  font-family: var(--font-display);
  font-size:var(--fs-2xl); font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
  display: inline-flex; align-items: center; gap: 10px;
}
.surv-draft-sub {
  font-family: var(--font-mono);
  font-size:var(--fs-base);
  color: var(--textsoft);
  letter-spacing: 1.5px;
}

.surv-draft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Carte individuelle */
.surv-draft-card {
  position: relative;
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(8,14,28,0.6), rgba(4,8,18,0.8));
  border: 1px solid rgba(255,255,255, 0.10);
  transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(20px) rotateX(-10deg);
}
.surv-draft-card.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
.surv-draft-card:hover {
  transform: translateY(-8px) rotateX(0) scale(1.02);
  box-shadow:
    0 18px 50px rgba(0,0,0, 0.55),
    0 0 38px var(--rar-glow, rgba(var(--accent-rgb), 0.45)),
    inset 0 0 0 1px var(--rar-border);
  border-color: var(--rar-border, rgba(var(--accent-rgb), 0.7));
}
.surv-draft-card-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, var(--rar-glow, rgba(var(--accent-rgb), 0.18)), transparent 60%);
  opacity: 0.6;
  z-index: -1;
}
.surv-draft-card-frame {
  position: relative;
  display: flex; flex-direction: column;
  padding: 18px 16px 14px;
  height: 100%; min-height: 280px;
}
.surv-draft-card-rar {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--rar-bg, rgba(255,255,255, 0.06));
  border: 1px solid var(--rar-border, rgba(255,255,255, 0.15));
  color: var(--rar-col, var(--textsoft));
}
.surv-draft-card-ico {
  font-size: 56px;
  text-align: center;
  color: var(--rar-col, var(--accent));
  text-shadow: 0 0 20px var(--rar-glow, rgba(var(--accent-rgb), 0.5));
  margin: 20px 0 18px;
  line-height: 1;
}
.surv-draft-card-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textbright);
  text-align: center;
  margin-bottom: 12px;
  padding: 0 4px;
}
.surv-draft-card-desc {
  flex: 1;
  font-family: var(--font-body);
  font-size:var(--fs-md);
  color: var(--textbright);
  line-height: 1.5;
  text-align: center;
  padding: 0 6px;
  opacity: 0.92;
}
.surv-draft-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255, 0.08);
  display: flex; justify-content: center;
}
.surv-draft-card-dur {
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  color: var(--textsoft);
  letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 5px;
}

/* Rarités : common / rare / mythic */
.surv-draft-rar-common {
  --rar-col: #7ed5d8;
  --rar-bg: rgba(126,213,216, 0.12);
  --rar-border: rgba(126,213,216, 0.45);
  --rar-glow: rgba(126,213,216, 0.32);
}
.surv-draft-rar-rare {
  --rar-col: #6fb2ff;
  --rar-bg: rgba(111,178,255, 0.14);
  --rar-border: rgba(111,178,255, 0.55);
  --rar-glow: rgba(111,178,255, 0.45);
}
.surv-draft-rar-mythic {
  --rar-col: #ffce5b;
  --rar-bg: rgba(255,206,91, 0.14);
  --rar-border: rgba(255,206,91, 0.60);
  --rar-glow: rgba(255,206,91, 0.55);
}
/* Backplate plus vibrante pour chaque rarité */
.surv-draft-card {
  background: linear-gradient(180deg, var(--rar-bg), rgba(4,8,18,0.92)) !important;
}
.surv-draft-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--rar-glow), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.surv-draft-card-frame > * { position: relative; z-index: 1; }
.surv-draft-rar-common .surv-draft-card-frame::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(126,213,216, 0.06) 50%, transparent 60%);
  pointer-events: none;
}
.surv-draft-rar-mythic .surv-draft-card-ico {
  animation: survDraftMythicPulse 2.5s ease-in-out infinite;
}
@keyframes survDraftMythicPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,206,91, 0.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,206,91, 0.8)); }
}
.surv-draft-rar-mythic .surv-draft-card-frame::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,206,91, 0.06) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: survDraftShimmer 3s linear infinite;
  pointer-events: none;
}
@keyframes survDraftShimmer {
  0%   { background-position: -100% -100%; }
  100% { background-position: 100% 100%; }
}

.surv-draft-foot {
  margin-top: 24px;
  text-align: center;
}
.surv-draft-skip {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 22px;
  border-radius:var(--radius);
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.18s;
}
.surv-draft-skip:hover {
  background: rgba(255,255,255, 0.08);
  color: var(--textbright);
  border-color: rgba(255,255,255, 0.25);
}

/* ── Bandeau Cartes Actives ── */
.surv-actcards-bar {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 4px 0 12px;
  padding: 12px 18px;
  border-radius:var(--radius-md);
  background: linear-gradient(180deg, rgba(8,14,28, 0.92), rgba(6,10,22, 0.96));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  backdrop-filter: blur(6px);
}
.surv-actcards-lbl {
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding-top: 8px;
}
.surv-actcards-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  flex: 1 1 0; min-width: 0;
}
.surv-actcard {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius:var(--radius-lg);
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.10);
  font-family: var(--font-mono);
  font-size:var(--fs-sm);
  color: var(--textmid);
  flex: 0 1 280px; min-width: 0;
}
.surv-actcard-ico {
  font-size:var(--fs-lg);
  color: var(--accent);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  flex-shrink: 0;
}
.surv-actcard-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.surv-actcard-name {
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size:var(--fs-md);
  color: var(--textbright);
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surv-actcard-desc {
  font-size:var(--fs-base);
  color: var(--textsoft);
  line-height: 1.35;
  max-width: 280px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.surv-actcard-dur {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent2);
  font-weight: 700;
  font-size:var(--fs-base);
  flex-shrink: 0;
}
.surv-actcard-dur.surv-actcard-applied {
  background: rgba(46,204,113, 0.18);
  color: var(--success);
  border: 1px solid rgba(46,204,113, 0.35);
}
.surv-actcard-applied-card {
  border-color: rgba(46,204,113, 0.25);
  background: rgba(46,204,113, 0.06);
}
.surv-actcard-common { --acc: #c8d2e0; }
.surv-actcard-rare {
  border-color: rgba(91,170,255, 0.35);
  background: rgba(91,170,255, 0.08);
}
.surv-actcard-rare .surv-actcard-ico { color: #5baaff; text-shadow: 0 0 8px rgba(91,170,255, 0.5); }
.surv-actcard-mythic {
  border-color: rgba(255,206,91, 0.40);
  background: rgba(255,206,91, 0.10);
}
.surv-actcard-mythic .surv-actcard-ico { color: #ffce5b; text-shadow: 0 0 10px rgba(255,206,91, 0.6); }

/* Responsive cards */
@media (max-width: 900px) {
  .surv-draft-modal { padding: 24px 18px 22px; }
  .surv-draft-title { font-size: 18px; letter-spacing: 3px; }
  .surv-draft-grid { grid-template-columns: 1fr; gap: 12px; }
  .surv-draft-card-frame { min-height: 0; padding: 14px; }
  .surv-draft-card-ico { font-size: 40px; margin: 12px 0 10px; }
  .surv-draft-card-name { font-size:var(--fs-md); letter-spacing: 1.5px; }
  .surv-actcards-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Arbre de Talents (modal méta-progression)
   ═══════════════════════════════════════════════════════════ */

.surv-tree-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay-fullscreen, 1000);
  background: rgba(0,0,0, 0.82);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: survDraftFade 0.3s ease-out both;
}
.surv-tree-modal {
  width: 1280px; max-width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(8,14,30,0.97), rgba(4,10,22,0.99));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius:var(--radius-xl);
  box-shadow: 0 0 50px rgba(var(--accent-rgb), 0.1), 0 18px 60px rgba(0,0,0, 0.6);
  overflow: hidden;
  animation: survReassignSlide 0.25s cubic-bezier(0.2,0.8,0.2,1) both;
}
.surv-tree-head {
  position: relative;
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 20px;
  padding: 24px 30px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.surv-tree-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
  display: inline-flex; align-items: center; gap: 10px;
}
.surv-tree-sub {
  font-family: var(--font-body);
  font-size:var(--fs-md);
  color: var(--textsoft);
  line-height: 1.5;
  max-width: 680px;
}
.surv-tree-points {
  text-align: center;
  padding: 12px 24px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.30);
}
.surv-tree-points-lbl {
  font-family: var(--font-mono);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 6px;
}
.surv-tree-points-val {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  color: var(--accent2);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55);
  line-height: 1;
}
.surv-tree-close {
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  border-radius: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.2s;
}
.surv-tree-close:hover {
  color: var(--danger);
  background: rgba(231,76,60, 0.15);
  border-color: rgba(231,76,60, 0.3);
}
.surv-tree-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  scroll-padding-bottom: 48px;
  /* iOS/iPad : scroll tactile fiable. Le translateZ promeut le conteneur
     dans sa propre couche → le découple de l'ancêtre fixed+backdrop-filter
     (bug WebKit où le scroll interne ne reçoit pas le touch). */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateZ(0);
}
.surv-tree-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 16px;
  padding: 22px 26px 48px;
}
.surv-tree-branch {
  display: flex; flex-direction: column;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--br-soft), rgba(0,0,0, 0.18));
  /* Fallback Safari iOS 15-16.3 : --br-col couleur faction, bleu médian */
  border: 1px solid rgba(109,163,212,0.25);
  border: 1px solid color-mix(in srgb, var(--br-col) 25%, transparent);
  overflow: hidden;
}
.surv-tree-branch-head {
  padding: 14px 18px;
  /* Fallback Safari iOS 15-16.3 */
  border-bottom: 1px solid rgba(109,163,212,0.18);
  background: rgba(109,163,212,0.08);
  border-bottom: 1px solid color-mix(in srgb, var(--br-col) 18%, transparent);
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--br-col) 8%, transparent);
}
.surv-tree-branch-ico {
  font-size: 24px;
  color: var(--br-col);
  text-shadow: 0 0 14px var(--br-col);
}
.surv-tree-branch-name {
  font-family: var(--font-display);
  font-size:var(--fs-lg); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--textbright);
}
.surv-tree-branch-list {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.surv-tree-tal {
  position: relative;
  padding: 14px 14px 12px;
  border-radius:var(--radius-md);
  background: rgba(0,0,0, 0.22);
  border: 1px solid rgba(255,255,255, 0.08);
  transition: all 0.2s;
}
.surv-tree-tal:hover {
  /* Fallback Safari iOS 15-16.3 */
  border-color: rgba(109,163,212,0.50);
  border-color: color-mix(in srgb, var(--br-col) 50%, transparent);
  background: rgba(0,0,0, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0, 0.25);
}
.surv-tree-tal.maxed {
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(40,60,84,0.32);
  border-color: rgba(109,163,212,0.45);
  background: color-mix(in srgb, var(--br-col) 10%, rgba(0,0,0, 0.25));
  border-color: color-mix(in srgb, var(--br-col) 45%, transparent);
}
.surv-tree-tal.maxed::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 9px; pointer-events: none;
  /* Fallback Safari iOS 15-16.3 */
  box-shadow: inset 0 0 18px rgba(109,163,212,0.25);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--br-col) 25%, transparent);
}
.surv-tree-tal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.surv-tree-tal-name {
  font-family: var(--font-display);
  font-size:var(--fs-md); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--textbright);
  line-height: 1.25;
  flex: 1; padding-right: 8px;
}
.surv-tree-tal-lvl {
  font-family: var(--font-mono);
  font-size:var(--fs-lg); font-weight: 700;
  color: var(--br-col);
  flex-shrink: 0;
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 8px rgba(109,163,212,0.50);
  text-shadow: 0 0 8px color-mix(in srgb, var(--br-col) 50%, transparent);
}
.surv-tree-tal-lvl-sep { color: var(--textsoft); margin: 0 2px; opacity: 0.6; font-weight: 400; }
.surv-tree-tal-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--textmid);
  line-height: 1.5;
  margin-bottom: 10px;
}
.surv-tree-tal-pips {
  display: flex; gap: 4px; margin-bottom: 11px;
}
.surv-tree-pip {
  flex: 1; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255, 0.06);
  border: 1px solid rgba(255,255,255, 0.08);
}
.surv-tree-pip.filled {
  background: var(--br-col);
  box-shadow: 0 0 8px var(--br-col);
  border-color: transparent;
}
.surv-tree-tal-foot {
  display: flex; justify-content: flex-end;
}
.surv-tree-tal-buy {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 7px;
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(109,163,212,0.12);
  border: 1px solid rgba(109,163,212,0.35);
  background: color-mix(in srgb, var(--br-col) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--br-col) 35%, transparent);
  color: var(--br-col);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-tree-tal-buy:hover:not(.disabled) {
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(109,163,212,0.25);
  box-shadow: 0 0 14px rgba(109,163,212,0.35);
  background: color-mix(in srgb, var(--br-col) 25%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--br-col) 35%, transparent);
  transform: translateY(-1px);
}
.surv-tree-tal-buy.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.surv-tree-tal-max {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--success);
  display: inline-flex; align-items: center; gap: 5px;
  text-shadow: 0 0 8px rgba(46,204,113, 0.4);
}

/* Barre d'actions secondaires page idle */
.surv-actions-bar {
  display: flex; gap: 10px;
  justify-content: center;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}
.surv-act-btn {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(12,18,32,0.86), rgba(8,14,28,0.9));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.surv-act-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.22);
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.surv-act-badge {
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent2);
  font-weight: 700;
  letter-spacing: 0.3px;
}

@media (max-width: 1320px) {
  .surv-tree-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 720px) {
  .surv-tree-modal { max-height: 100vh; border-radius: 0; }
  .surv-tree-head { grid-template-columns: 1fr auto; padding: 14px 16px; gap: 12px; }
  .surv-tree-sub { display: none; }
  .surv-tree-grid { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .surv-tree-tal-name { font-size:var(--fs-base); }
  .surv-tree-tal-desc { font-size:var(--fs-base); }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Doctrines (sélecteur de spécialisation)
   ═══════════════════════════════════════════════════════════ */

.surv-doctrines-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay-fullscreen, 1000);
  background: rgba(0,0,0, 0.82);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: survDraftFade 0.3s ease-out both;
}
.surv-doctrines-modal {
  width: 1060px; max-width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(8,14,30,0.97), rgba(4,10,22,0.99));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius:var(--radius-xl);
  box-shadow: 0 0 50px rgba(var(--accent-rgb), 0.1), 0 18px 60px rgba(0,0,0, 0.6);
  overflow: hidden;
  animation: survReassignSlide 0.25s cubic-bezier(0.2,0.8,0.2,1) both;
}
.surv-doctrines-head {
  position: relative;
  padding: 26px 32px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.surv-doctrines-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
  display: inline-flex; align-items: center; gap: 10px;
}
.surv-doctrines-sub {
  font-family: var(--font-body);
  font-size:var(--fs-md);
  color: var(--textsoft);
  letter-spacing: 0.5px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.55;
}
.surv-doctrines-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  border-radius: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.2s;
}
.surv-doctrines-close:hover {
  color: var(--danger);
  background: rgba(231,76,60, 0.15);
  border-color: rgba(231,76,60, 0.3);
}
.surv-doctrines-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  scroll-padding-bottom: 40px;
  /* iOS/iPad : voir .surv-tree-scroll (découplage couche compositing). */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateZ(0);
}
.surv-doctrines-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 16px;
  padding: 22px 26px 40px;
}
.surv-doctrine-card {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: 13px;
  /* Fallback Safari iOS 15-16.3 : --doc-col default #5baaff → rgba(91,170,255,X) */
  background: linear-gradient(180deg, rgba(91,170,255,0.08), rgba(0,0,0, 0.20));
  border: 1px solid rgba(91,170,255,0.30);
  background: linear-gradient(180deg, color-mix(in srgb, var(--doc-col, #5baaff) 8%, transparent), rgba(0,0,0, 0.20));
  border: 1px solid color-mix(in srgb, var(--doc-col, #5baaff) 30%, transparent);
  cursor: pointer;
  transition: all 0.25s;
  overflow: hidden;
}
.surv-doctrine-card:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: var(--doc-col, #5baaff);
  /* Fallback Safari iOS 15-16.3 */
  box-shadow: 0 12px 30px rgba(91,170,255,0.18);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--doc-col, #5baaff) 18%, transparent);
}
.surv-doctrine-card.selected {
  border-color: var(--doc-col, #5baaff);
  /* Fallback Safari iOS 15-16.3 */
  box-shadow:
    0 0 0 2px rgba(91,170,255,0.50),
    0 12px 30px rgba(91,170,255,0.20);
  background: linear-gradient(180deg, rgba(91,170,255,0.15), rgba(0,0,0, 0.16));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--doc-col, #5baaff) 50%, transparent),
    0 12px 30px color-mix(in srgb, var(--doc-col, #5baaff) 20%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--doc-col, #5baaff) 15%, transparent), rgba(0,0,0, 0.16));
}
.surv-doctrine-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.4);
}
.surv-doctrine-card.surv-doctrine-none {
  --doc-col: #888da3;
}
.surv-doctrine-name {
  font-family: var(--font-display);
  font-size:var(--fs-xl); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--textbright);
  margin-bottom: 10px;
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 14px rgba(91,170,255,0.45);
  text-shadow: 0 0 14px color-mix(in srgb, var(--doc-col, #5baaff) 45%, transparent);
  line-height: 1.25;
}
.surv-doctrine-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--textmid);
  line-height: 1.55;
}
.surv-doctrine-lock {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--textsoft);
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-doctrine-tag {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(91,170,255,0.22);
  border: 1px solid rgba(91,170,255,0.55);
  background: color-mix(in srgb, var(--doc-col, #5baaff) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--doc-col, #5baaff) 55%, transparent);
  color: var(--doc-col, #5baaff);
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 10px rgba(91,170,255,0.50);
  text-shadow: 0 0 10px color-mix(in srgb, var(--doc-col, #5baaff) 50%, transparent);
}

/* Hint sur l'idle */
.surv-doctrine-hint {
  display: flex; align-items: center; gap: 10px;
  margin: 6px auto 14px; padding: 8px 16px;
  max-width: 460px;
  border-radius: 999px;
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(10,14,26,0.9);
  border: 1px solid rgba(91,170,255,0.35);
  background: color-mix(in srgb, var(--doc-col, #5baaff) 32%, rgba(10,14,26,0.9));
  border: 1px solid color-mix(in srgb, var(--doc-col, #5baaff) 35%, transparent);
  justify-content: center;
}
.surv-doctrine-hint-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--textsoft);
  display: inline-flex; align-items: center; gap: 5px;
}
.surv-doctrine-hint-name {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--doc-col, #5baaff);
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 10px rgba(91,170,255,0.50);
  text-shadow: 0 0 10px color-mix(in srgb, var(--doc-col, #5baaff) 50%, transparent);
}
.surv-doctrine-hint-change {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255, 0.16);
  border: 1px solid rgba(255,255,255, 0.15);
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.15s;
}
.surv-doctrine-hint-change:hover {
  color: var(--doc-col, #5baaff);
  /* Fallback Safari iOS 15-16.3 */
  border-color: rgba(91,170,255,0.40);
  background: rgba(91,170,255,0.10);
  border-color: color-mix(in srgb, var(--doc-col, #5baaff) 40%, transparent);
  background: color-mix(in srgb, var(--doc-col, #5baaff) 10%, transparent);
}

@media (max-width: 720px) {
  .surv-doctrines-modal { max-height: 100vh; border-radius: 0; }
  .surv-doctrines-grid { grid-template-columns: 1fr; padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Siège d'Alliance (bannière + progress + claim)
   ═══════════════════════════════════════════════════════════ */

.surv-siege-banner {
  position: relative;
  margin: 4px 0 22px;
  padding: 22px 26px 18px;
  border-radius:var(--radius-xl);
  border: 1px solid rgba(231,76,60, 0.30);
  background:
    linear-gradient(165deg, rgba(28,12,8,0.92), rgba(14,6,4,0.96)),
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(231,76,60, 0.16), transparent 60%);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 32px rgba(231,76,60, 0.08),
    0 12px 36px rgba(0,0,0, 0.4);
}
.surv-siege-banner::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(231,76,60, 0.8), transparent);
  opacity: 0.7;
}
.surv-siege-banner.ended {
  border-color: rgba(255,255,255, 0.18);
  background: linear-gradient(165deg, rgba(14,14,22,0.92), rgba(8,8,14,0.96));
}
.surv-siege-banner.won {
  border-color: rgba(212,146,10, 0.4);
  background: linear-gradient(165deg, rgba(28,22,8,0.92), rgba(14,12,4,0.96));
  box-shadow: 0 0 32px rgba(212,146,10, 0.12), 0 12px 36px rgba(0,0,0, 0.4);
}

.surv-siege-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(231,76,60, 0.18);
  flex-wrap: wrap; gap: 8px;
}
.surv-siege-banner.ended .surv-siege-header { border-bottom-color: rgba(255,255,255, 0.10); }
.surv-siege-title {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.surv-siege-title h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--textbright);
  margin: 0;
  text-shadow: 0 0 14px rgba(231,76,60, 0.4);
}
.surv-siege-banner.won .surv-siege-title h3 { text-shadow: 0 0 14px rgba(212,146,10, 0.45); }
.surv-siege-ico {
  font-size: 18px;
  color: rgba(231,76,60, 1);
  text-shadow: 0 0 12px rgba(231,76,60, 0.6);
}
.surv-siege-state {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.15);
  color: var(--textsoft);
}
.siege-state-active {
  background: rgba(231,76,60, 0.12);
  border-color: rgba(231,76,60, 0.4);
  color: rgba(231,76,60, 1);
  animation: survSiegeStatePulse 2s ease-in-out infinite;
}
@keyframes survSiegeStatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60, 0.4); }
  50%      { box-shadow: 0 0 12px 2px rgba(231,76,60, 0.18); }
}
.siege-state-win {
  background: rgba(212,146,10, 0.15);
  border-color: rgba(212,146,10, 0.5);
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212,146,10, 0.5);
}
.siege-state-loss {
  background: rgba(255,255,255, 0.05);
  border-color: rgba(255,255,255, 0.18);
  color: var(--textsoft);
}
.surv-siege-time {
  font-family: var(--font-mono); font-size:var(--fs-sm);
  color: var(--textsoft); letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 5px;
}
.surv-siege-time b { color: var(--accent2); font-weight: 700; }

.surv-siege-progress {
  margin-bottom: 16px;
}
.surv-siege-progress-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size:var(--fs-sm);
  color: var(--textsoft);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.surv-siege-hp-vals b {
  color: var(--textbright); font-weight: 700;
  margin-right: 4px;
}
.surv-siege-progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(231,76,60, 0.08);
  border: 1px solid rgba(231,76,60, 0.25);
  overflow: hidden;
  position: relative;
}
.surv-siege-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(231,76,60, 0.8), rgba(255,140,60, 0.9));
  box-shadow: 0 0 14px rgba(231,76,60, 0.6);
  transition: width 0.6s ease;
  border-radius: 999px;
}
.surv-siege-banner.won .surv-siege-progress-fill {
  background: linear-gradient(90deg, rgba(212,146,10, 0.9), rgba(255,200,50, 1));
  box-shadow: 0 0 16px rgba(212,146,10, 0.7);
}
.surv-siege-progress-pct {
  text-align: right;
  font-family: var(--font-mono); font-size:var(--fs-xs);
  color: var(--textsoft); letter-spacing: 0.5px;
  margin-top: 4px;
}

.surv-siege-body {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 16px; margin-bottom: 8px;
}
.surv-siege-me {
  padding: 12px 14px;
  border-radius:var(--radius-md);
  background: rgba(231,76,60, 0.06);
  border: 1px solid rgba(231,76,60, 0.20);
}
.surv-siege-banner.won .surv-siege-me {
  background: rgba(212,146,10, 0.06);
  border-color: rgba(212,146,10, 0.25);
}
.surv-siege-me-lbl {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 8px;
}
.surv-siege-me-vals {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size:var(--fs-base);
  color: var(--textbright);
}
.surv-siege-me-dmg {
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--textbright);
}
.surv-siege-me-waves {
  color: var(--textsoft);
}

.surv-siege-top {
  padding: 12px 14px;
  border-radius:var(--radius-md);
  background: rgba(0,0,0, 0.22);
  border: 1px solid rgba(255,255,255, 0.08);
}
.surv-siege-top-lbl {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
.surv-siege-top-list {
  display: flex; flex-direction: column; gap: 4px;
}
.surv-siege-top-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size:var(--fs-sm);
  color: var(--textmid);
  padding: 3px 8px;
  border-radius: 6px;
}
.surv-siege-top-row.me {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--textbright);
}
.surv-siege-top-rk {
  color: var(--textsoft);
  font-weight: 700;
}
.surv-siege-top-row.me .surv-siege-top-rk { color: var(--accent2); }
.surv-siege-top-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surv-siege-top-dmg {
  font-weight: 700;
  color: var(--textbright);
}
.surv-siege-top-empty {
  font-style: italic;
  color: var(--textsoft);
  font-size:var(--fs-sm);
  padding: 4px;
}

.surv-siege-claim {
  display: block;
  margin: 14px auto 0;
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 11px 28px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(212,146,10, 0.20), rgba(212,146,10, 0.08));
  border: 1px solid rgba(212,146,10, 0.5);
  color: var(--gold);
  cursor: pointer;
  transition: all 0.22s;
  text-shadow: 0 0 12px rgba(212,146,10, 0.5);
  display: inline-flex; align-items: center; gap: 8px;
}
.surv-siege-claim:hover {
  background: linear-gradient(180deg, rgba(212,146,10, 0.32), rgba(212,146,10, 0.14));
  box-shadow: 0 0 20px rgba(212,146,10, 0.3);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .surv-siege-banner { padding: 16px 16px 14px; }
  .surv-siege-title h3 { font-size:var(--fs-md); letter-spacing: 2px; }
  .surv-siege-body { grid-template-columns: 1fr; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Placard "En reconstruction" (Mode développement)
   Affiché aux joueurs non whitelist pendant la phase de tests.
   ═══════════════════════════════════════════════════════════ */

.surv-dev-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 40px 20px;
}
.surv-dev-card {
  position: relative;
  width: 720px; max-width: 100%;
  padding: 50px 60px 40px;
  border-radius:var(--radius-sm);
  background:
    linear-gradient(170deg, rgba(8,14,30,0.96), rgba(4,10,22,0.99)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(var(--accent-rgb), 0.02) 6px 7px);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  box-shadow:
    0 0 60px rgba(var(--accent-rgb), 0.08),
    0 20px 60px rgba(0,0,0, 0.55),
    inset 0 1px 0 rgba(255,255,255, 0.04);
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

/* Orbe atmosphérique en arrière-plan */
.surv-dev-orb {
  position: absolute; inset: -30%;
  z-index: -1;
  background:
    radial-gradient(ellipse 45% 35% at 30% 25%, rgba(var(--accent-rgb), 0.16), transparent 65%),
    radial-gradient(ellipse 40% 28% at 70% 70%, rgba(var(--accent-rgb), 0.10), transparent 65%);
  filter: blur(2px);
  animation: survDevOrb 26s ease-in-out infinite alternate;
}
@keyframes survDevOrb {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.08); }
}

/* Coins décoratifs façon scellé ancien */
.surv-dev-corner {
  position: absolute; width: 26px; height: 26px;
  border-color: rgba(var(--accent-rgb), 0.6);
  border-style: solid; border-width: 0;
  pointer-events: none;
}
.surv-dev-corner-tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.surv-dev-corner-tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.surv-dev-corner-bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.surv-dev-corner-br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

/* Tampon "CLASSIFIÉ" en biais — comme un dossier secret */
.surv-dev-stamp {
  position: absolute;
  top: 22px; right: -42px;
  transform: rotate(34deg);
  padding: 5px 50px;
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 800;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(231, 76, 60, 0.85);
  background: rgba(231, 76, 60, 0.07);
  border-top: 1.5px solid rgba(231,76,60, 0.7);
  border-bottom: 1.5px solid rgba(231,76,60, 0.7);
  text-shadow: 0 0 8px rgba(231,76,60, 0.45);
  opacity: 0.9;
  pointer-events: none;
}

/* Header sigil + titre */
.surv-dev-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  position: relative;
}
.surv-dev-head::before {
  content: ''; position: absolute; top: 0; left: 30%; right: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
.surv-dev-sigil {
  font-size: 48px;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.6), 0 0 48px rgba(var(--accent-rgb), 0.25);
  line-height: 1; margin-bottom: 16px;
  animation: survDevSigilPulse 4s ease-in-out infinite;
}
@keyframes survDevSigilPulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.45)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.75)); transform: scale(1.04); }
}
.surv-dev-title {
  font-family: var(--font-display);
  font-size:var(--fs-2xl); font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--textbright);
  margin: 0 0 10px;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(180deg, var(--textbright) 0%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
}
.surv-dev-subtitle {
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  color: var(--textsoft);
  letter-spacing: 2px; text-transform: uppercase;
}

/* Corps du message (déclaration role-play) */
.surv-dev-body { margin-bottom: 32px; }
.surv-dev-msg {
  font-family: var(--font-body);
  font-size: 16px; font-style: italic;
  color: rgba(255,255,255, 0.85);
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 540px; margin-left: auto; margin-right: auto;
}
.surv-dev-signature {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

/* Méta-infos : Phase / État / Ouverture prévue */
.surv-dev-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
}
.surv-dev-meta-cell {
  padding: 12px 10px;
  border-radius:var(--radius);
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.surv-dev-meta-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 6px;
}
.surv-dev-meta-val {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent2);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25);
  line-height: 1.3;
}

@media (max-width: 720px) {
  .surv-dev-card { padding: 30px 24px 24px; }
  .surv-dev-title { font-size: 16px; letter-spacing: 2.5px; }
  .surv-dev-sigil { font-size: 36px; }
  .surv-dev-msg { font-size:var(--fs-md); }
  .surv-dev-meta { grid-template-columns: 1fr; gap: 8px; }
  .surv-dev-stamp { font-size: 10px; padding: 4px 38px; top: 18px; right: -38px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Hologramme de Reconnaissance (Maître Tacticien)
   Aperçu de la prochaine vague — style holographique futuriste.
   ═══════════════════════════════════════════════════════════ */

.surv-reveal-panel {
  position: relative;
  margin-top: 16px;
  padding: 18px 20px 16px;
  border-radius:var(--radius-lg);
  border: 1px dashed rgba(91, 170, 255, 0.40);
  background:
    linear-gradient(165deg, rgba(8, 22, 40, 0.85), rgba(4, 14, 30, 0.92)),
    radial-gradient(ellipse 45% 70% at 100% 50%, rgba(91, 170, 255, 0.10), transparent 70%);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 30px rgba(91, 170, 255, 0.06),
    0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Variante "boss" — teinte rouge sang */
.surv-reveal-panel.surv-reveal-boss {
  border-color: rgba(255, 107, 107, 0.45);
  background:
    linear-gradient(165deg, rgba(28, 12, 14, 0.88), rgba(14, 6, 8, 0.94)),
    radial-gradient(ellipse 45% 70% at 100% 50%, rgba(255, 107, 107, 0.10), transparent 70%);
  box-shadow:
    inset 0 0 30px rgba(255, 107, 107, 0.06),
    0 6px 24px rgba(0, 0, 0, 0.4);
}
.surv-reveal-panel.surv-reveal-blitz {
  border-color: rgba(255, 206, 91, 0.45);
}

/* Ligne de scan horizontale animée */
.surv-reveal-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(91, 170, 255, 0.8), transparent);
  box-shadow: 0 0 8px rgba(91, 170, 255, 0.6);
  pointer-events: none;
  animation: survRevealScan 4s linear infinite;
}
.surv-reveal-panel.surv-reveal-boss .surv-reveal-scan {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.85), transparent);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.65);
}
@keyframes survRevealScan {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Grille technique d'arrière-plan (effet hologramme) */
.surv-reveal-grid-bg {
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(91, 170, 255, 0.04) 22px, rgba(91, 170, 255, 0.04) 23px),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(91, 170, 255, 0.04) 22px, rgba(91, 170, 255, 0.04) 23px);
  opacity: 0.6;
}
.surv-reveal-panel.surv-reveal-boss .surv-reveal-grid-bg {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(255, 107, 107, 0.04) 22px, rgba(255, 107, 107, 0.04) 23px),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(255, 107, 107, 0.04) 22px, rgba(255, 107, 107, 0.04) 23px);
}

/* Header : sigil + titre + sous-titre + profil */
.surv-reveal-head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(91, 170, 255, 0.20);
}
.surv-reveal-panel.surv-reveal-boss .surv-reveal-head { border-bottom-color: rgba(255, 107, 107, 0.25); }

.surv-reveal-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(91, 170, 255, 1);
  text-shadow: 0 0 12px rgba(91, 170, 255, 0.5);
}
.surv-reveal-panel.surv-reveal-boss .surv-reveal-title {
  color: rgba(255, 107, 107, 1);
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.5);
}
.surv-reveal-sigil {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 8px currentColor);
  animation: survRevealSigil 3s ease-in-out infinite;
}
@keyframes survRevealSigil {
  0%, 100% { opacity: 0.9; transform: rotate(0deg); }
  50%      { opacity: 1;   transform: rotate(180deg); }
}

.surv-reveal-sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.surv-reveal-sub-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--textsoft);
  letter-spacing: 1.2px; text-transform: uppercase;
  opacity: 0.85;
}
.surv-reveal-prof {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(91, 170, 255, 0.10);
  border: 1px solid rgba(91, 170, 255, 0.35);
  color: rgba(91, 170, 255, 1);
}
.surv-reveal-prof-boss {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.45);
  color: rgba(255, 107, 107, 1);
}
.surv-reveal-prof-blitz {
  background: rgba(255, 206, 91, 0.12);
  border-color: rgba(255, 206, 91, 0.45);
  color: rgba(255, 206, 91, 1);
}

/* Colonnes secteurs (mini version compacte) */
.surv-reveal-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.surv-reveal-col {
  padding: 9px 10px;
  border-radius:var(--radius);
  background: rgba(0, 0, 0, 0.20);
  /* Fallback Safari iOS 15-16.3 : --sec-col couleur section, bleu neutre */
  border: 1px solid rgba(122,144,184,0.25);
  border: 1px solid color-mix(in srgb, var(--sec-col) 25%, transparent);
  transition: all 0.2s;
}
.surv-reveal-col:hover {
  background: rgba(0, 0, 0, 0.32);
  border-color: var(--sec-col);
  box-shadow: 0 0 14px var(--sec-soft);
}
.surv-reveal-col-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.surv-reveal-col-ico {
  font-size:var(--fs-base);
  color: var(--sec-col);
  text-shadow: 0 0 8px var(--sec-col);
  line-height: 1;
}
.surv-reveal-col-name {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--textbright);
}
.surv-reveal-col-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--textsoft);
  letter-spacing: 0.3px;
}
.surv-reveal-col-list {
  display: flex; flex-direction: column; gap: 1px;
}
.surv-reveal-col-list .surv-sec-troop {
  font-size: 10px;
}
.surv-reveal-col-list .surv-sec-troop-name {
  max-width: 90px;
}

/* Responsive */
@media (max-width: 720px) {
  .surv-reveal-cols { grid-template-columns: 1fr; gap: 6px; }
  .surv-reveal-col-head { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Sélection des Forces (Picker pro refondu)
   Carte premium : titre + provenance, stats avec ratio gradient,
   onglets filtres par type, cards troupes avec badge coloré.
   ═══════════════════════════════════════════════════════════ */

.surv-pickr {
  margin: 18px 0 4px;
  border-radius:var(--radius-xl);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  background:
    linear-gradient(170deg, rgba(8, 14, 30, 0.96), rgba(4, 10, 22, 0.99));
  box-shadow:
    0 0 40px rgba(var(--accent-rgb), 0.08),
    0 18px 48px rgba(0, 0, 0, 0.40);
  overflow: hidden;
  isolation: isolate;
}

/* Header : titre + provenance + actions */
.surv-pickr-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent);
}
.surv-pickr-head-text { flex: 1; min-width: 260px; }
.surv-pickr-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.4);
  display: inline-flex; align-items: center; gap: 8px;
}
.surv-pickr-origin {
  font-family: var(--font-mono);
  font-size:var(--fs-sm);
  color: var(--accent2);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.surv-pickr-note {
  font-family: var(--font-body);
  font-size:var(--fs-base);
  color: var(--warn);
  background: rgba(255, 180, 0, 0.06);
  
  padding: 6px 12px;
  border-radius:var(--radius-sm);
  line-height: 1.4;
  max-width: 540px;
 box-shadow:inset 3px 0 0 0 var(--warn); }

.surv-pickr-head-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}
.surv-pickr-preset {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 16px;
  border-radius:var(--radius);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-pickr-preset:hover {
  background: rgba(var(--accent-rgb), 0.20);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
  transform: translateY(-1px);
}
.surv-pickr-preset-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--textsoft);
}
.surv-pickr-preset-ghost:hover {
  background: rgba(231, 76, 60, 0.10);
  border-color: rgba(231, 76, 60, 0.30);
  color: var(--danger);
}

/* Bilan d'engagement — Combat Forecast HUD */
.surv-pickr-summary {
  padding: 18px 28px 20px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.30)),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--accent-rgb), 0.06), transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.surv-pickr-summary-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap; gap: 8px;
}
.surv-pickr-summary-title {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textsoft);
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-pickr-summary-meta {
  font-family: var(--font-mono);
  font-size:var(--fs-sm);
  color: var(--textsoft);
  letter-spacing: 0.5px;
}
.surv-pickr-summary-meta b {
  color: var(--accent2); font-weight: 700;
  margin-left: 4px;
}

/* Duel ATK vs DEF */
.surv-pickr-duel {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 0;
  border-radius:var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.surv-pickr-side {
  padding: 14px 18px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  position: relative;
}
.surv-pickr-side-atk {
  background:
    linear-gradient(135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.04) 70%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.surv-pickr-side-def {
  background:
    linear-gradient(225deg, rgba(231, 76, 60, 0.16), rgba(231, 76, 60, 0.04) 70%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.surv-pickr-side-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--textsoft);
  display: inline-flex; align-items: center; gap: 5px;
}
.surv-pickr-side-val {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.surv-pickr-side-atk .surv-pickr-side-val {
  color: var(--success);
  text-shadow: 0 0 18px rgba(46, 204, 113, 0.55), 0 0 4px rgba(46, 204, 113, 0.4);
}
.surv-pickr-side-def .surv-pickr-side-val {
  color: var(--danger);
  text-shadow: 0 0 18px rgba(231, 76, 60, 0.55), 0 0 4px rgba(231, 76, 60, 0.4);
}

/* Cercle VS au centre */
.surv-pickr-duel-vs {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(8, 14, 30, 0.8), rgba(4, 10, 22, 0.95));
  padding: 0 4px;
  position: relative;
}
.surv-pickr-duel-vs-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
  border: 1.5px solid rgba(var(--accent-rgb), 0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.20);
  position: relative;
}
.surv-pickr-duel-vs-circle::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--accent-rgb), 0.30);
  animation: survPickrVsRing 8s linear infinite;
}
@keyframes survPickrVsRing {
  to { transform: rotate(360deg); }
}

/* Forecast (barre de ratio + chip verdict) */
.surv-pickr-forecast {
  display: flex; align-items: center; gap: 14px;
}
.surv-pickr-ratio-track {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(231, 76, 60, 0.18) 0%, rgba(255, 180, 0, 0.18) 50%, rgba(46, 204, 113, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  position: relative;
}
.surv-pickr-ratio-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
  transition: width 0.4s ease, background 0.25s;
}
.surv-pickr-ratio-fill.surv-pickr-ratio-weak {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.75), rgba(255, 100, 70, 1));
  box-shadow: 0 0 16px rgba(231, 76, 60, 0.55);
}
.surv-pickr-ratio-fill.surv-pickr-ratio-ok {
  background: linear-gradient(90deg, rgba(255, 180, 0, 0.75), rgba(255, 220, 50, 1));
  box-shadow: 0 0 16px rgba(255, 180, 0, 0.5);
}
.surv-pickr-ratio-fill.surv-pickr-ratio-strong {
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.75), rgba(70, 230, 130, 1));
  box-shadow: 0 0 16px rgba(46, 204, 113, 0.55);
}
/* Marker 50% (seuil de victoire) */
.surv-pickr-ratio-marker {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform: translateX(-1px);
}

/* Chip verdict */
.surv-pickr-verdict-chip {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--textsoft);
  flex-shrink: 0;
  min-width: 170px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.surv-pickr-verdict-pct {
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.surv-pickr-verdict-chip-weak {
  background: rgba(231, 76, 60, 0.12);
  border-color: rgba(231, 76, 60, 0.40);
  color: var(--danger);
  text-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.12);
}
.surv-pickr-verdict-chip-weak .surv-pickr-verdict-pct {
  background: rgba(231, 76, 60, 0.22);
  color: var(--danger);
}
.surv-pickr-verdict-chip-ok {
  background: rgba(255, 180, 0, 0.12);
  border-color: rgba(255, 180, 0, 0.40);
  color: var(--warn);
  text-shadow: 0 0 10px rgba(255, 180, 0, 0.4);
  box-shadow: 0 0 14px rgba(255, 180, 0, 0.12);
}
.surv-pickr-verdict-chip-ok .surv-pickr-verdict-pct {
  background: rgba(255, 180, 0, 0.22);
  color: var(--warn);
}
.surv-pickr-verdict-chip-strong {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.45);
  color: var(--success);
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.5);
  box-shadow: 0 0 16px rgba(46, 204, 113, 0.20);
  animation: survPickrVerdictStrong 2.5s ease-in-out infinite;
}
.surv-pickr-verdict-chip-strong .surv-pickr-verdict-pct {
  background: rgba(46, 204, 113, 0.25);
  color: var(--success);
}
@keyframes survPickrVerdictStrong {
  0%, 100% { box-shadow: 0 0 14px rgba(46, 204, 113, 0.18); }
  50%      { box-shadow: 0 0 24px rgba(46, 204, 113, 0.40); }
}

/* Onglets filtres par type */
.surv-pickr-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.surv-pickr-tab {
  font-family: var(--font-display);
  font-size:var(--fs-xs); font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.surv-pickr-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--textbright);
}
.surv-pickr-tab.active {
  /* Fallback Safari iOS 15-16.3 : --tab-col variable, bleu neutre */
  background: rgba(122,158,196,0.18);
  border-color: rgba(122,158,196,0.50);
  box-shadow: 0 0 14px rgba(122,158,196,0.30);
  background: color-mix(in srgb, var(--tab-col) 18%, transparent);
  border-color: color-mix(in srgb, var(--tab-col) 50%, transparent);
  color: var(--tab-col);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tab-col) 30%, transparent);
}
.surv-pickr-tab-ico { font-size:var(--fs-sm); line-height: 1; }
.surv-pickr-tab-cnt {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--textsoft);
}
.surv-pickr-tab.active .surv-pickr-tab-cnt {
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(122,158,196,0.25);
  background: color-mix(in srgb, var(--tab-col) 25%, transparent);
  color: var(--tab-col);
}

/* Liste de cards troupes */
.surv-pickr-list {
  max-height: 480px;
  overflow-y: auto;
  padding: 16px 24px 20px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  scroll-padding-bottom: 20px;
}
.surv-pickr-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius:var(--radius-md);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.30));
  border: 1px solid rgba(255, 255, 255, 0.08);
  
  transition: all 0.2s;
 box-shadow:inset 3px 0 0 0 var(--type-col); }
.surv-pickr-card:hover {
  /* Fallback Safari iOS 15-16.3 : --type-col variable, gris-bleu neutre */
  border-color: rgba(138,156,181,0.50);
  border-color: color-mix(in srgb, var(--type-col) 50%, transparent);
  border-left-color: var(--type-col);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.40));
  transform: translateX(2px);
  /* Fallback Safari iOS 15-16.3 */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), 0 0 18px rgba(138,156,181,0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), 0 0 18px color-mix(in srgb, var(--type-col) 12%, transparent);
}
.surv-pickr-card-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}
.surv-pickr-card-badge {
  width: 52px; height: 52px;
  border-radius:var(--radius-md);
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(58,72,90,0.40);
  border: 1px solid rgba(138,156,181,0.45);
  background: color-mix(in srgb, var(--type-col) 15%, rgba(0,0,0, 0.30));
  border: 1px solid color-mix(in srgb, var(--type-col) 45%, transparent);
  color: var(--type-col);
  font-size:var(--fs-2xl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 0 10px var(--type-col);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.surv-pickr-card-badge.has-illus {
  /* Fallback Safari iOS 15-16.3 */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(138,156,181,0.30);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 14px color-mix(in srgb, var(--type-col) 30%, transparent);
}
.surv-pickr-card-badge.has-illus::after {
  content: ''; position: absolute; inset: 0;
  /* Fallback Safari iOS 15-16.3 */
  background: linear-gradient(180deg, transparent 40%, rgba(138,156,181,0.35) 100%);
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--type-col) 35%, transparent) 100%);
  pointer-events: none;
}
.surv-pickr-card:hover .surv-pickr-card-badge {
  transform: scale(1.05);
  /* Fallback Safari iOS 15-16.3 */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(138,156,181,0.50);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 22px color-mix(in srgb, var(--type-col) 50%, transparent);
}
.surv-pickr-card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.surv-pickr-card-name {
  font-family: var(--font-body);
  font-size:var(--fs-md); font-weight: 700;
  color: var(--textbright);
  letter-spacing: 0.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surv-pickr-card-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  color: var(--textsoft);
  letter-spacing: 0.3px;
}
.surv-pickr-card-type {
  color: var(--type-col);
  font-weight: 600;
}
.surv-pickr-card-sep { opacity: 0.5; }
.surv-pickr-card-atk { display: inline-flex; align-items: center; gap: 3px; color: var(--textmid); }
.surv-pickr-card-avail { color: var(--accent2); }

.surv-pickr-card-right {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.surv-pickr-card-input {
  width: 84px; height: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size:var(--fs-base); font-weight: 600;
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  color: var(--textbright);
  outline: none;
  transition: border-color 0.15s;
}
.surv-pickr-card-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
}
.surv-pickr-card-input::-webkit-inner-spin-button,
.surv-pickr-card-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.surv-pickr-card-max {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 6px;
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(138,156,181,0.12);
  border: 1px solid rgba(138,156,181,0.38);
  background: color-mix(in srgb, var(--type-col) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-col) 38%, transparent);
  color: var(--type-col);
  cursor: pointer;
  transition: all 0.15s;
}
.surv-pickr-card-max:hover {
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(138,156,181,0.25);
  box-shadow: 0 0 10px rgba(138,156,181,0.30);
  background: color-mix(in srgb, var(--type-col) 25%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--type-col) 30%, transparent);
}

/* Footer fixe : Annuler + Lancer */
.surv-pickr-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.14);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.20));
}
.surv-pickr-cancel {
  font-family: var(--font-display);
  font-size:var(--fs-sm); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 22px;
  border-radius:var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--textsoft);
  cursor: pointer;
  transition: all 0.18s;
}
.surv-pickr-cancel:hover {
  color: var(--danger);
  background: rgba(231, 76, 60, 0.10);
  border-color: rgba(231, 76, 60, 0.30);
}
.surv-pickr-launch {
  font-family: var(--font-display);
  font-size:var(--fs-base); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 11px 28px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.22), rgba(46, 204, 113, 0.10));
  border: 1px solid rgba(46, 204, 113, 0.50);
  color: var(--success);
  cursor: pointer;
  transition: all 0.22s;
  display: inline-flex; align-items: center; gap: 8px;
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
}
.surv-pickr-launch:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.36), rgba(46, 204, 113, 0.18));
  box-shadow: 0 0 22px rgba(46, 204, 113, 0.30);
  transform: translateY(-2px);
}
.surv-pickr-launch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.4);
}

@media (max-width: 900px) {
  .surv-pickr-head { padding: 18px 18px 14px; }
  .surv-pickr-summary { padding: 14px 18px 16px; }
  .surv-pickr-side-val { font-size:var(--fs-2xl); }
  .surv-pickr-duel-vs-circle { width: 38px; height: 38px; font-size:var(--fs-xs); }
  .surv-pickr-tabs { padding: 12px 18px; }
  .surv-pickr-list { grid-template-columns: 1fr; padding: 12px 16px 16px; }
  .surv-pickr-footer { padding: 14px 18px; }
  .surv-pickr-forecast { flex-direction: column; align-items: stretch; gap: 10px; }
  .surv-pickr-verdict-chip { min-width: auto; }
}
@media (max-width: 520px) {
  .surv-pickr-card { flex-wrap: wrap; }
  .surv-pickr-card-right { width: 100%; justify-content: flex-end; padding-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   SURVIE S2 — Règles d'engagement (panneau refondu)
   Mini-cards thématiques avec icône colorée + titre + description.
   ═══════════════════════════════════════════════════════════ */

.surv-rules-pro {
  position: relative;
  padding: 22px 24px 24px;
  border-radius: 14px;
  background:
    linear-gradient(168deg, rgba(8, 14, 30, 0.90), rgba(4, 10, 22, 0.96));
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  box-shadow:
    0 0 30px rgba(var(--accent-rgb), 0.06),
    0 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  isolation: isolate;
}
.surv-rules-pro::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
.surv-rules-pro-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.surv-rules-pro-title {
  font-family: var(--font-display);
  font-size:var(--fs-lg); font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
  display: inline-flex; align-items: center; gap: 8px;
}
.surv-rules-pro-sub {
  font-family: var(--font-mono);
  font-size:var(--fs-xs);
  color: var(--textsoft);
  letter-spacing: 1.5px; text-transform: uppercase;
  opacity: 0.85;
}

.surv-rules-pro-grid {
  display: flex; flex-direction: column; gap: 10px;
}

.surv-rule-card {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 18px;
  border-radius:var(--radius-md);
  /* Fallback Safari iOS 15-16.3 : --rule-col variable, gris-bleu neutre */
  background:
    linear-gradient(90deg,
      rgba(154,168,192,0.12),
      rgba(40,48,60,0.22) 60%,
      rgba(0, 0, 0, 0.22)
    );
  border: 1px solid rgba(154,168,192,0.22);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rule-col) 12%, transparent),
      color-mix(in srgb, var(--rule-col) 3%, rgba(0, 0, 0, 0.20)) 60%,
      rgba(0, 0, 0, 0.22)
    );
  border: 1px solid color-mix(in srgb, var(--rule-col) 22%, transparent);
  
  transition: all 0.22s;
 box-shadow:inset 3px 0 0 0 var(--rule-col); }
.surv-rule-card:hover {
  transform: translateX(3px);
  /* Fallback Safari iOS 15-16.3 */
  border-color: rgba(154,168,192,0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30), 0 0 22px rgba(154,168,192,0.16);
  border-color: color-mix(in srgb, var(--rule-col) 45%, transparent);
  border-left-color: var(--rule-col);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30), 0 0 22px color-mix(in srgb, var(--rule-col) 16%, transparent);
}

.surv-rule-card-ico {
  width: 44px; height: 44px;
  border-radius:var(--radius-md);
  /* Fallback Safari iOS 15-16.3 */
  background: rgba(54,64,80,0.55);
  border: 1px solid rgba(154,168,192,0.45);
  box-shadow: inset 0 0 10px rgba(154,168,192,0.18);
  background: color-mix(in srgb, var(--rule-col) 15%, rgba(0, 0, 0, 0.40));
  border: 1px solid color-mix(in srgb, var(--rule-col) 45%, transparent);
  color: var(--rule-col);
  font-size:var(--fs-2xl); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 0 12px var(--rule-col);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--rule-col) 18%, transparent);
}

.surv-rule-card-body {
  flex: 1; min-width: 0;
}
.surv-rule-card-title {
  font-family: var(--font-display);
  font-size:var(--fs-md); font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--textbright);
  margin-bottom: 4px;
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 8px rgba(154,168,192,0.30);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rule-col) 30%, transparent);
}
.surv-rule-card-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--textmid);
  line-height: 1.5;
}
.surv-rule-card-desc b {
  color: var(--rule-col);
  font-weight: 700;
  /* Fallback Safari iOS 15-16.3 */
  text-shadow: 0 0 8px rgba(154,168,192,0.50);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rule-col) 50%, transparent);
}

.surv-rule-card-num {
  font-family: var(--font-display);
  font-size:var(--fs-3xl); font-weight: 800;
  /* Fallback Safari iOS 15-16.3 */
  color: rgba(154,168,192,0.25);
  text-shadow: 0 0 14px rgba(154,168,192,0.20);
  color: color-mix(in srgb, var(--rule-col) 25%, transparent);
  letter-spacing: 1px;
  flex-shrink: 0;
  text-shadow: 0 0 14px color-mix(in srgb, var(--rule-col) 20%, transparent);
  line-height: 1;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .surv-rules-pro { padding: 18px 16px 18px; }
  .surv-rule-card { padding: 12px 12px 12px 14px; gap: 12px; }
  .surv-rule-card-ico { width: 38px; height: 38px; font-size: 18px; }
  .surv-rule-card-title { font-size:var(--fs-base); letter-spacing: 1.5px; }
  .surv-rule-card-desc { font-size: 12.5px; }
  .surv-rule-card-num { font-size: 20px; }
}

/* Loot summary central (au lieu d'un panel large) */
.surv-loot-summary {
  display: flex; justify-content: center;
  margin: 0 0 16px;
}
.surv-loot-summary .surv-panel-loot {
  max-width: 560px; width: 100%;
}

/* Responsive secteurs */
@media (max-width: 900px) {
  .surv-sectors-head { flex-wrap: wrap; gap: 8px; }
  .surv-sectors-reassign { margin-left: 0; }
  .surv-sectors-grid { grid-template-columns: 1fr; gap: 10px; }
  .surv-sec-col { padding: 12px 12px 10px; }
  .surv-reassign-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .surv-reassign-table .ra-sec-h { letter-spacing: 0.5px; }
  .ra-input { width: 38px; }
  .ra-btn { width: 18px; height: 22px; }
}
@media (max-width: 520px) {
  .surv-reassign-footer { flex-direction: column; align-items: stretch; }
  .surv-reassign-actions { margin-left: 0; }
  .surv-reassign-actions button { flex: 1; }
}

/* ── Leaderboard legacy mode ── */
.surv-lb-legacy {
  border-color: rgba(212, 146, 10, 0.28) !important;
  background: linear-gradient(180deg, rgba(28,22,8,0.6), rgba(18,14,6,0.5)) !important;
}
.surv-lb-legacy .surv-lb-title { color: var(--gold) !important; text-shadow: 0 0 10px rgba(212,146,10,0.3) !important; }
.surv-lb-back {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--textsoft);
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(255,255,255, 0.04);
  border: 1px solid rgba(255,255,255, 0.12);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.surv-lb-back:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── Responsive S2 banner + S1 archive ── */
@media (max-width: 900px) {
  .surv-s2-banner { padding: 22px 20px 20px; border-radius:var(--radius-lg); }
  .surv-s2-banner-title { font-size: 24px; letter-spacing: 3px; }
  .surv-s2-pillars { grid-template-columns: 1fr; gap: 10px; }
  .surv-s2-pillar { padding: 14px 14px 12px; }
  .surv-s2-pillar-ico { font-size:var(--fs-2xl); }
  .surv-s1-archive { gap: 10px; padding: 12px 14px 12px 18px; flex-direction: column; align-items: flex-start; }
  .surv-s1-archive-body { width: 100%; }
  .surv-s1-archive-desc { max-width: 100%; }
  .surv-s1-archive-cta { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .surv-s2-banner { padding: 18px 14px 16px; }
  .surv-s2-banner-title { font-size: 20px; letter-spacing: 2px; }
  .surv-s2-banner-sub { font-size:var(--fs-sm); }
  .surv-s2-badge { font-size: 10px; letter-spacing: 2px; padding: 5px 10px; }
  .surv-s1-archive-divider { display: none; }
  .surv-s1-archive-body { gap: 12px; }
}

/* ═══ Partage de rapport de combat (report Aion 28/06) ═══ */
.rep-share-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: flex-end; }
.rep-share-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: .04em;
  background: rgba(90,170,250,0.10); border: 1px solid rgba(90,170,250,0.35); border-radius: 7px; color: #9fd0ff;
  transition: background .15s, border-color .15s;
}
.rep-share-btn:hover { background: rgba(90,170,250,0.20); border-color: rgba(90,170,250,0.55); }

.rep-share-overlay {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,16,0.72); backdrop-filter: blur(3px); padding: 16px;
}
.rep-share-modal {
  width: 100%; max-width: 440px; background: #0e1626; background: linear-gradient(180deg,#101a2e,#0b1220);
  border: 1px solid rgba(90,170,250,0.30); border-radius: 14px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}
.rep-share-title { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron','Share Tech Mono',monospace; font-size: 16px; letter-spacing: .06em; color: #cfe6ff; margin-bottom: 14px; }
.rep-share-link { display: flex; gap: 8px; }
.rep-share-link input {
  flex: 1; min-width: 0; padding: 9px 11px; font-family: 'Share Tech Mono', monospace; font-size: 13px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(90,170,250,0.25); border-radius: 7px; color: #d8e6ff;
}
.rep-share-copy {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  font-family: 'Share Tech Mono', monospace; font-size: 13px;
  background: rgba(90,170,250,0.16); border: 1px solid rgba(90,170,250,0.40); border-radius: 7px; color: #9fd0ff;
}
.rep-share-copy:hover { background: rgba(90,170,250,0.28); }
.rep-share-hint { font-size: 12px; color: var(--textsoft); margin: 8px 2px 14px; line-height: 1.45; }
.rep-share-channels, .rep-share-pm { display: flex; gap: 8px; margin-bottom: 10px; }
.rep-share-pm input {
  flex: 1; min-width: 0; padding: 9px 11px; font-family: 'Share Tech Mono', monospace; font-size: 13px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; color: #d8e6ff;
}
.rep-share-chan {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  font-family: 'Share Tech Mono', monospace; font-size: 13px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; color: var(--textbright);
  transition: background .15s, border-color .15s;
}
.rep-share-channels .rep-share-chan { flex: 1; justify-content: center; }
.rep-share-chan:hover { background: rgba(90,170,250,0.14); border-color: rgba(90,170,250,0.35); }
.rep-share-chan:disabled { opacity: .5; cursor: default; }
.rep-share-close {
  width: 100%; margin-top: 6px; padding: 9px; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 13px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: var(--textsoft);
}
.rep-share-close:hover { color: var(--textbright); border-color: rgba(255,255,255,0.25); }

/* Puce cliquable d'un lien de rapport partagé dans le chat / MP */
.chat-report-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; margin: 1px 0;
  font-family: 'Share Tech Mono', monospace; font-size: .92em; text-decoration: none;
  background: rgba(90,170,250,0.14); border: 1px solid rgba(90,170,250,0.40); border-radius: 6px; color: #9fd0ff;
}
.chat-report-chip:hover { background: rgba(90,170,250,0.26); }

/* Page publique /r/<token> (sans login) */
body.pubrep-active > *:not(#publicReportPage):not(script) { display: none !important; }
.pubrep-page {
  position: fixed; inset: 0; z-index: 100000; overflow-y: auto; padding: 28px 16px 48px;
  background: radial-gradient(1200px 700px at 50% -10%, #15233f 0%, #0a0f1c 60%, #070b14 100%);
}
.pubrep-shell { max-width: 760px; margin: 0 auto; }
.pubrep-brand { text-align: center; font-family: 'Orbitron','Share Tech Mono',monospace; font-size: 20px; letter-spacing: .12em; color: #9fd0ff; margin-bottom: 18px; }
.pubrep-head { text-align: center; font-family: 'Share Tech Mono', monospace; font-size: 17px; color: #e6f0ff; margin-bottom: 16px; }
.pubrep-head .pubrep-vs { color: var(--textsoft); margin: 0 6px; }
.pubrep-head .pubrep-when { color: var(--textsoft); font-size: 14px; }
.pubrep-card-wrap { background: rgba(10,16,28,0.6); border: 1px solid rgba(90,170,250,0.18); border-radius: 14px; padding: 8px; }
.pubrep-loading, .pubrep-empty { text-align: center; padding: 40px 16px; color: var(--textsoft); font-family: 'Share Tech Mono', monospace; }
.pubrep-cta {
  display: block; max-width: 380px; margin: 22px auto 10px; padding: 13px 20px; text-align: center; text-decoration: none;
  font-family: 'Orbitron','Share Tech Mono',monospace; font-size: 15px; letter-spacing: .05em; font-weight: 700;
  background: linear-gradient(180deg,#3a7bd5,#2a5bb0); border: 1px solid rgba(120,180,255,0.5); border-radius: 10px; color: #fff;
}
.pubrep-cta:hover { filter: brightness(1.1); }
.pubrep-foot { text-align: center; font-size: 12px; color: var(--textsoft); margin-top: 8px; }

/* Tablet: ≤1024px — see sgc-layout.css */