/* ══════════════════════════════════════════════════════════════════
   DESTINY — Console Ancienne (cuivre/or/bleu Ancien)
   Scope : #destinyHub uniquement.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Orbitron:wght@400;500;700&display=swap');

#destinyHub {
  --dst-gold:        #d4b483;
  --dst-gold-bright: #f0d9a8;
  --dst-gold-dim:    #8a7250;
  --dst-bronze:      #6b5a3a;
  --dst-bronze-dim:  #3a2f1e;
  --dst-blue:        #5fb4d4;
  --dst-blue-deep:   #1a5a82;
  --dst-bg:          #04060a;
  --dst-glow:        rgba(212, 180, 131, 0.45);
  --dst-glow-blue:   rgba(95, 180, 212, 0.35);

  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  color: var(--dst-gold);
  letter-spacing: 0.02em;
}

/* ── Scanline subtile + ambient grain ── */
#destinyHub::before {
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:5;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      rgba(255,255,255,0.014) 2px 3px
    );
  mix-blend-mode:overlay;
}
#destinyHub::after {
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:6;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ── Header (top-left) ── */
#destinyHubHeader {
  text-shadow: 0 0 18px var(--dst-glow);
  z-index:7;
}
#destinyHubHeader .dst-h1 {
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:22px !important;
  letter-spacing:6px !important;
  color: var(--dst-gold-bright);
  filter: drop-shadow(0 0 8px var(--dst-glow));
}
#destinyHubHeader .dst-h2 {
  font-family:'Orbitron',monospace;
  font-size:9.5px;
  letter-spacing:3px;
  color: var(--dst-blue);
  opacity:0.9;
  /* Pas d'uppercase sur le subline : "Cmdr Tariel" reste lisible (sinon "CMDR" ressemble à "CMOR" en Orbitron) */
  text-transform: none;
}

/* ── Boutons console ── */
.dst-btn {
  background: linear-gradient(180deg, #2a1e10 0%, #14100a 100%);
  color: var(--dst-gold);
  border: 1px solid var(--dst-bronze);
  padding: 9px 18px;
  cursor: pointer;
  font-family:'Orbitron',monospace;
  font-size: 10.5px;
  font-weight:500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: all 0.18s ease;
  border-radius: 1px;
  position:relative;
  overflow:hidden;
}
.dst-btn::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(212,180,131,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.45s ease;
}
.dst-btn:hover {
  border-color: var(--dst-gold);
  color: var(--dst-gold-bright);
  box-shadow: 0 0 14px var(--dst-glow), inset 0 0 8px rgba(212,180,131,0.08);
}
.dst-btn:hover::before { transform: translateX(100%); }
.dst-btn:active { transform: translateY(1px); }
.dst-btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* C1 audit 28/05 : 0.32→0.55 pour contraste WCAG AA */

.dst-btn-primary {
  background: linear-gradient(180deg, #5a3f1a 0%, #2a1810 100%);
  border-color: var(--dst-gold);
  color: #fff5d8;
  padding: 12px 32px;
  letter-spacing: 4px;
  font-weight: 700;
}
.dst-btn-primary:hover { box-shadow: 0 0 22px var(--dst-glow), 0 0 40px var(--dst-glow-blue); }
.dst-btn-primary:not([disabled]) { box-shadow: 0 0 12px var(--dst-glow); } /* PERF Sprint 1 : pulse box-shadow animee retiree (repaint/frame x N boutons) */
@keyframes dstBtnPulse {
  0%,100% { box-shadow: 0 0 0 var(--dst-glow); }
  50%     { box-shadow: 0 0 16px var(--dst-glow); }
}

/* ── Modal overlay : laisser voir la 3D derriere ── */
.dst-modal-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(2,4,8,0.35) 0%, rgba(0,0,0,0.78) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  opacity: 1 !important;
}

/* ── Panel Ancien ── */
.dst-panel {
  background: linear-gradient(160deg, rgba(20,16,10,0.93) 0%, rgba(10,8,6,0.96) 100%);
  border: 1px solid var(--dst-bronze);
  position: relative;
  box-shadow:
    0 0 60px var(--shade-7),
    inset 0 0 80px var(--shade-5),
    0 0 0 1px var(--shade-5),
    inset 0 0 1px var(--dst-gold-dim);
}

/* Angles cuivres aux 4 coins */
.dst-panel::before, .dst-panel::after {
  content:'';
  position:absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--dst-gold);
  filter: drop-shadow(0 0 6px var(--dst-glow));
}
.dst-panel::before { top: -2px; left: -2px;   border-right: 0; border-bottom: 0; }
.dst-panel::after  { bottom: -2px; right: -2px; border-left: 0;  border-top: 0; }

/* PERF Sprint 1 : drop-shadow ANIME retire — re-rasterisation par frame d'un grand
   panneau filtre = cause majeure du lag menu sur GPU/compositing modeste (Lab 23 FPS).
   Glow statique conserve (rasterise une fois, look identique au repos). */
.dst-modal-body {
  filter: drop-shadow(0 0 26px var(--dst-glow-blue));
}

.dst-modal-body {
  max-width: 920px; width: 94%;
  max-height: 92vh; overflow-y: auto;
  padding: 36px 50px;
  position:relative;
}

/* Runes Ancient verticales dans les marges du panel */
.dst-modal-body::before {
  content:'⌬◈◉◇⌬◈◉◇⌬◈◉◇';
  position:absolute;
  left: 8px; top: 36px; bottom: 36px;
  width: 14px;
  display:flex; flex-direction:column; justify-content:space-around;
  color: var(--dst-gold-dim);
  opacity:0.32;
  font-size: 10px;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events:none;
}
.dst-modal-body::after {
  content:'◇◉◈⌬◇◉◈⌬◇◉◈⌬';
  position:absolute;
  right: 8px; top: 36px; bottom: 36px;
  width: 14px;
  display:flex; flex-direction:column; justify-content:space-around;
  color: var(--dst-gold-dim);
  opacity:0.32;
  font-size: 10px;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events:none;
}

/* ── Titres ── */
.dst-h1 {
  font-family:'Cinzel',serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--dst-gold-bright);
  margin: 0;
  text-shadow: 0 0 26px var(--dst-glow), 0 0 4px rgba(0,0,0,0.9);
  filter: drop-shadow(0 2px 0 #000);
}
.dst-h2 {
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dst-blue);
  margin: 0;
  opacity:0.92;
}
.dst-mono { font-family:'Orbitron',monospace; letter-spacing:1px; }

/* ── Input ── */
.dst-input {
  background: rgba(0,0,0,0.55);
  color: var(--dst-gold-bright);
  border: 1px solid var(--dst-bronze);
  padding: 10px 14px;
  font-family:'Orbitron',monospace;
  font-size:var(--fs-base);
  letter-spacing: 2px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 1px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dst-input::placeholder { color: var(--dst-gold-dim); opacity:0.55; letter-spacing:1.5px; }
.dst-input:focus { border-color: var(--dst-gold); box-shadow: 0 0 12px var(--dst-glow), inset 0 0 18px var(--shade-4); }

/* ── Cards archetype ── */
.dst-arch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .dst-arch-grid { grid-template-columns: repeat(2, 1fr); } }

.dst-arch-card {
  background: linear-gradient(180deg, rgba(28,22,14,0.92) 0%, rgba(10,8,6,0.92) 100%);
  border: 1px solid var(--dst-bronze);
  padding: 20px 8px 16px;
  cursor: pointer;
  transition: all 0.22s ease;
  border-radius: 1px;
  text-align: center;
  position:relative;
  overflow:hidden;
  min-width: 0;
}
.dst-arch-card::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 40%, var(--dst-glow) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events:none;
}
.dst-arch-card:hover {
  border-color: var(--dst-gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px var(--shade-5), 0 0 20px var(--dst-glow);
}
.dst-arch-card:hover::before { transform: translateX(100%); }
.dst-arch-card.selected {
  border-color: var(--dst-gold-bright);
  background: linear-gradient(180deg, rgba(60,42,20,0.95) 0%, rgba(28,20,10,0.95) 100%);
  box-shadow: 0 0 24px var(--dst-glow), inset 0 0 20px rgba(212,180,131,0.12);
  animation: dstCardSelected 1.8s ease-in-out infinite;
}
@keyframes dstCardSelected {
  0%,100% { box-shadow: 0 0 18px var(--dst-glow), inset 0 0 14px rgba(212,180,131,0.08); }
  50%     { box-shadow: 0 0 32px var(--dst-glow), inset 0 0 26px rgba(212,180,131,0.16); }
}

.dst-arch-icon {
  font-size: 44px;
  color: var(--dst-gold-bright);
  display: block;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 14px var(--dst-glow));
  line-height:1;
  animation: dstIconFloat 4s ease-in-out infinite; /* revert hotfix freeze : 2.5s→4s */
}
@keyframes dstIconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
.dst-arch-card.selected .dst-arch-icon { color: var(--dst-gold-bright); filter: drop-shadow(0 0 22px var(--dst-glow)); }

.dst-arch-label {
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dst-gold-bright);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.dst-arch-desc {
  font-family:'Cinzel',serif;
  font-weight:400;
  font-size:var(--fs-xs);
  color: var(--dst-gold);
  opacity:0.78;
  line-height: 1.5;
  font-style:italic;
}

/* ── Journal entries (refonte timeline grouped 26/05 P10) ── */
.dst-journal-list { padding: 8px 0; }
.dst-journal-empty { text-align:center; color:var(--dst-gold-dim); font-size:var(--fs-sm); padding:30px; font-style:italic; }

/* Filter chips bar */
.dst-journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
  padding: 0;
}
.dst-journal-chip {
  background: rgba(20,15,8,0.6);
  border: 1px solid var(--dst-bronze);
  color: var(--dst-gold-dim);
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius:var(--radius-lg);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dst-journal-chip-icon { font-size:var(--fs-xs); }
.dst-journal-chip:hover {
  color: var(--dst-gold-bright);
  border-color: var(--dst-gold);
}
.dst-journal-chip-active {
  background: linear-gradient(180deg, rgba(60,40,15,0.8), rgba(30,20,10,0.9));
  color: var(--dst-gold-bright);
  border-color: var(--dst-gold-bright);
  box-shadow: 0 0 12px rgba(212,180,131,0.3);
}

/* Group collapsible (per Chapter / FTL / Pierres etc.) */
.dst-journal-group {
  margin: 14px 0;
  
  background: rgba(14,10,6,0.3);
  border-radius: 0 2px 2px 0;
 box-shadow:inset 3px 0 0 0 var(--group-accent, var(--dst-gold)); }
.dst-journal-group-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--group-accent, var(--dst-gold));
  list-style: none;
  user-select: none;
  border-bottom: 1px solid rgba(212,180,131,0.1);
}
.dst-journal-group-header::-webkit-details-marker { display: none; }
.dst-journal-group-header::after {
  content: '▾';
  margin-left: auto;
  font-size:var(--fs-sm);
  opacity: 0.7;
  transition: transform 0.18s;
}
.dst-journal-group[open] > .dst-journal-group-header::after { transform: rotate(180deg); }
.dst-journal-group-icon {
  font-size:var(--fs-md);
  width: 22px;
  text-align: center;
}
.dst-journal-group-name { flex: 1; }
.dst-journal-group-count {
  background: var(--shade-3);
  padding: 1px 7px;
  border-radius:var(--radius);
  font-size: 9px;
  color: var(--dst-gold);
  margin-right: 6px;
}
.dst-journal-group-body { padding: 6px 14px 12px; }

/* Entry compact avec icon par type */
.dst-journal-entry {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-left: none;
  margin: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  border-bottom: 1px solid rgba(212,180,131,0.06);
}
.dst-journal-entry:last-child { border-bottom: none; }
.dst-journal-entry::before { display: none; }
.dst-journal-entry-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--fs-md);
  border: 1px solid currentColor;
  margin-top: 2px;
}
.dst-journal-entry-body { flex: 1; min-width: 0; }
.dst-journal-meta {
  font-family:'Orbitron',monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dst-gold-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dst-journal-meta b { color: var(--dst-gold); }
.dst-journal-text {
  font-family:'Cinzel',serif;
  font-size:var(--fs-base);
  line-height: 1.6;
  color: #f0e0c0;
  font-style:italic;
}

/* ── PA shipboard ── */
.dst-pa {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(20,16,8,0.96) 0%, rgba(8,6,4,0.96) 100%);
  border: 1px solid var(--dst-gold);
  color: var(--dst-gold-bright);
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 4;
  animation: dstPaFade 3s ease forwards; /* A2 audit 28/05 : 4s→3s (toast standard, aligné avec timeout JS) */
  box-shadow: 0 0 24px var(--dst-glow), 0 4px 18px var(--shade-5);
}
@keyframes dstPaFade {
  0%   { opacity: 0; transform: translate(-50%, -16px); }
  10%, 78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* ── Loading state ── */
#destinyHubLoading {
  z-index:2;
  pointer-events:none;
}
#destinyHubLoading::before {
  content:'';
  position:absolute;
  width:120px; height:120px;
  border: 1px solid var(--dst-bronze);
  border-radius:50%;
  animation: dstLoadRotate 8s linear infinite;
  box-shadow: 0 0 30px var(--dst-glow), inset 0 0 30px var(--dst-glow);
}
#destinyHubLoading::after {
  content:'';
  position:absolute;
  width:160px; height:160px;
  border: 1px dashed var(--dst-gold-dim);
  border-radius:50%;
  animation: dstLoadRotate 12s linear infinite reverse;
  opacity:0.6;
}
@keyframes dstLoadRotate {
  to { transform: rotate(360deg); }
}

/* ── Controls bas droit ── */
#destinyHubControls .dst-btn {
  padding: 7px 14px;
  font-size: 10px;
}
#destinyHubControls {
  z-index:7;
}
#destinyHubClose { z-index:7; }

/* ── Badges 3D : chiffres flottants au-dessus des hotspots ── */
.dst-badge-3d {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dst-gold-bright);
  background: linear-gradient(180deg, rgba(20,16,8,0.94) 0%, rgba(10,8,4,0.94) 100%);
  border: 1px solid var(--dst-gold);
  padding: 3px 8px;
  border-radius: 1px;
  box-shadow: 0 0 10px var(--dst-glow), 0 2px 4px var(--shade-6);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dst-badge-3d.dst-badge-full {
  color: #fff5d8;
  border-color: var(--dst-gold-bright);
  background: linear-gradient(180deg, rgba(80,60,20,0.95) 0%, rgba(40,28,10,0.95) 100%);
  box-shadow: 0 0 22px var(--dst-glow), 0 0 40px var(--dst-glow);
  animation: dstBadgeFull 1.5s ease-in-out infinite;
}
.dst-badge-3d.dst-badge-empty {
  color: var(--dst-gold-dim);
  border-color: var(--dst-bronze-dim);
  opacity: 0.55;
}
@keyframes dstBadgeFull {
  0%,100% { transform: translate(-50%, -50%) scale(1.0); }
  50%     { transform: translate(-50%, -50%) scale(1.08); }
}

/* ── Panel piece (D4) ── */
.dst-room-panel { max-width: 720px !important; padding: 38px 44px !important; }
.dst-room-close {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px !important; font-size: 10px !important;
}
.dst-room-header {
  display: flex; gap: 18px; align-items: center;
  margin-bottom: 14px;
}
.dst-room-icon {
  font-size: 56px;
  color: var(--dst-gold-bright);
  filter: drop-shadow(0 0 16px var(--dst-glow));
  line-height: 1;
  animation: dstIconFloat 4s ease-in-out infinite; /* revert hotfix freeze : 2.5s→4s */
}
.dst-room-title { font-size: 28px !important; letter-spacing: 6px !important; }
.dst-room-lore {
  font-style: italic;
  font-size:var(--fs-base);
  color: var(--dst-gold);
  opacity: 0.78;
  line-height: 1.6;
  margin: 8px 0 22px;
  padding-left: 14px;
  border-left: 1px solid var(--dst-bronze);
}
.dst-room-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.dst-room-stat {
  background: rgba(20,16,8,0.7);
  border: 1px solid var(--dst-bronze);
  padding: 10px 12px;
  border-radius: 1px;
  text-align: center;
}
.dst-room-stat-lbl {
  font-family:'Orbitron',monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--dst-blue);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dst-room-stat-val {
  font-family:'Cinzel',serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--dst-gold-bright);
}
.dst-room-output { font-size: 12px !important; line-height: 1.3; }

.dst-room-stockwrap {
  margin-bottom: 22px;
}
.dst-room-stockbar {
  height: 12px;
  background: var(--shade-5);
  border: 1px solid var(--dst-bronze);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.dst-room-stockfill {
  height: 100%;
  background: linear-gradient(90deg, var(--dst-bronze) 0%, var(--dst-gold) 50%, var(--dst-gold-bright) 100%);
  transition: width 0.6s ease;
  box-shadow: 0 0 12px var(--dst-glow);
}
.dst-room-stocktxt {
  font-family:'Orbitron',monospace;
  font-size:var(--fs-sm);
  letter-spacing: 1.5px;
  color: var(--dst-gold);
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dst-room-stockcur { font-weight: 700; color: var(--dst-gold-bright); }
.dst-room-stockcap { opacity: 0.55; }
.dst-room-fullbadge {
  margin-left: auto;
  color: #fff5d8;
  padding: 2px 8px;
  border: 1px solid var(--dst-gold);
  background: rgba(80,60,20,0.4);
  font-size: 10px;
  letter-spacing: 2px;
  animation: dstBadgeFull 1.5s ease-in-out infinite;
}
.dst-room-stockwrap.dst-room-full .dst-room-stockfill {
  box-shadow: 0 0 22px var(--dst-glow), 0 0 40px var(--dst-glow);
}

.dst-room-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.dst-room-upgnote {
  text-align: center;
  font-family:'Orbitron',monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--dst-gold-dim);
  margin-top: 8px;
}

/* ── Panel Equipage (D5) ── */
.dst-crew-panel { max-width: 1080px !important; padding: 32px 38px !important; }
.dst-crew-close {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px !important; font-size: 10px !important;
}
.dst-crew-header { text-align:center; margin-bottom:24px; }
.dst-crew-header .dst-h1 { font-size: 30px !important; letter-spacing: 8px !important; margin: 4px 0 12px; }
.dst-crew-sub {
  font-style: italic;
  font-size:var(--fs-sm);
  color: var(--dst-gold-dim);
  line-height: 1.5;
}
.dst-crew-howto {
  background: linear-gradient(180deg, rgba(20,16,8,0.55) 0%, rgba(8,6,4,0.65) 100%);
  border: 1px solid var(--dst-bronze);
  
  border-radius:var(--radius-sm);
  padding: 14px 18px;
  margin: 16px auto 8px;
  max-width: 760px;
  text-align: left;
  font-style: normal;
 box-shadow:inset 3px 0 0 0 var(--dst-gold); }
.dst-crew-howto-title {
  font-family: 'Cinzel', serif;
  font-size:var(--fs-base);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dst-gold-bright);
  margin-bottom: 8px;
}
.dst-crew-howto-list {
  margin: 0;
  padding-left: 18px;
  font-family: 'Share Tech Mono', monospace;
  font-size:var(--fs-sm);
  color: var(--dst-gold-dim);
  line-height: 1.7;
}
.dst-crew-howto-list li { margin-bottom: 4px; }
.dst-crew-howto-list b { color: var(--dst-gold-bright); }
.dst-crew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .dst-crew-grid { grid-template-columns: repeat(2, 1fr); } }
.dst-crew-card {
  background: linear-gradient(180deg, rgba(28,22,14,0.92) 0%, rgba(10,8,6,0.94) 100%);
  border: 1px solid var(--dst-bronze);
  border-radius: 1px;
  padding: 18px 16px 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.dst-crew-card:hover {
  border-color: var(--dst-gold);
  box-shadow: 0 0 18px var(--dst-glow);
}
.dst-crew-wounded { opacity: 0.6; }
.dst-crew-portrait {
  --spec-tint: var(--dst-gold);
  position: relative;
  width: 78px; height: 78px;
  margin: 0 auto 12px;
  border: 1px solid var(--spec-tint);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, var(--tint-5) 0%, transparent 60%), linear-gradient(180deg, rgba(20,16,8,0.95) 0%, rgba(8,6,4,0.95) 100%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--spec-tint) 35%, transparent), inset 0 0 18px rgba(0,0,0,0.65);
}
.dst-crew-portrait-glow {
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--spec-tint);
  opacity: 0.35;
  animation: dstCrewPortraitPulse 3.5s ease-in-out infinite;
}
@keyframes dstCrewPortraitPulse {
  0%,100% { transform: scale(1.0); opacity: 0.35; }
  50%     { transform: scale(1.15); opacity: 0; }
}
.dst-crew-icon {
  font-size: 38px;
  color: var(--spec-tint);
  filter: drop-shadow(0 0 10px var(--spec-tint));
  line-height: 1;
}
.dst-crew-name {
  text-align: center;
  font-family:'Cinzel',serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--dst-gold-bright);
  margin-bottom: 2px;
}
.dst-crew-role {
  text-align: center;
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs);
  letter-spacing: 2px;
  color: var(--dst-blue);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dst-crew-traits {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px;
}
.dst-crew-trait {
  font-family:'Orbitron',monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dst-gold-dim);
  background: rgba(20,16,8,0.7);
  border: 1px solid var(--dst-bronze-dim);
  padding: 2px 7px;
  border-radius: 1px;
}
.dst-crew-bio {
  font-family:'Cinzel',serif;
  font-style: italic;
  font-size:var(--fs-base);
  line-height: 1.55;
  color: var(--dst-gold);
  opacity: 0.95;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--dst-bronze-dim);
}
.dst-crew-status {
  font-family:'Orbitron',monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: #f0a0a0; /* C2 audit 28/05 : #e08a8a→#f0a0a0 pour contraste WCAG AA */
  text-align: center;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.dst-crew-assign-lbl {
  font-family:'Orbitron',monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--dst-blue);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.dst-crew-assign-sel.dst-input {
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs);
  padding: 6px 8px;
}
.dst-crew-boost-tag {
  margin-top: 6px;
  font-family:'Orbitron',monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-align: center;
  color: var(--dst-gold-bright);
  background: linear-gradient(90deg, transparent, rgba(80,60,20,0.4), transparent);
  padding: 3px 6px;
  border-top: 1px solid var(--dst-bronze);
  border-bottom: 1px solid var(--dst-bronze);
}
.dst-crew-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--dst-gold-dim);
  font-style: italic;
}

/* ── Panel Laboratoire Ancien (D7) ── */
.dst-lab-panel { max-width: 1100px !important; padding: 32px 38px !important; }
.dst-lab-close {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px !important; font-size: 10px !important;
}
.dst-lab-header { text-align:center; margin-bottom:22px; }
.dst-lab-header .dst-h1 { font-size: 30px !important; letter-spacing: 7px !important; }
.dst-lab-sub {
  font-style: italic;
  font-size:var(--fs-sm);
  color: var(--dst-gold-dim);
  line-height: 1.6;
  margin-top: 8px;
}
.dst-lab-sub b { color: var(--dst-gold-bright); font-style: normal; }
.dst-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .dst-lab-grid { grid-template-columns: 1fr; } }
.dst-lab-card {
  background: linear-gradient(180deg, rgba(20,16,8,0.92) 0%, rgba(10,8,4,0.94) 100%);
  border: 1px solid var(--dst-bronze);
  padding: 12px 14px 10px;
  border-radius: 1px;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.dst-lab-card:hover { border-color: var(--dst-gold); box-shadow: 0 0 14px var(--dst-glow); }
.dst-lab-active {
  border-color: var(--dst-gold-bright);
  box-shadow: 0 0 22px var(--dst-glow);
  background: linear-gradient(180deg, rgba(50,40,20,0.95) 0%, rgba(20,14,8,0.95) 100%);
}
.dst-lab-active::before {
  content:'';
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--dst-gold-bright), transparent);
  animation: dstLabScan 2.5s linear infinite;
}
@keyframes dstLabScan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.dst-lab-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.dst-lab-name {
  font-family:'Cinzel',serif;
  font-weight: 600;
  font-size:var(--fs-md);
  letter-spacing: 1.5px;
  color: var(--dst-gold-bright);
}
.dst-lab-dots {
  display: flex; gap: 3px;
}
.dst-lab-dot {
  width: 7px; height: 7px;
  border: 1px solid var(--dst-bronze);
  border-radius: 50%;
}
.dst-lab-dot-on {
  background: var(--dst-gold-bright);
  border-color: var(--dst-gold);
  box-shadow: 0 0 6px var(--dst-glow);
}
.dst-lab-desc {
  font-family:'Cinzel',serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--dst-gold);
  opacity: 0.92;
  line-height: 1.5;
  margin-bottom: 6px;
}
.dst-lab-effect {
  font-family:'Orbitron',monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: var(--dst-blue);
  margin-bottom: 6px;
}
.dst-lab-meta {
  font-family:'Orbitron',monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: var(--dst-gold);
  opacity: 0.85;
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
}
.dst-lab-action .dst-btn { width: 100%; padding: 6px 10px; font-size: 10px; }
.dst-lab-progress {
  background: linear-gradient(90deg, rgba(80,60,20,0.5), rgba(40,28,10,0.5)) !important;
  border-color: var(--dst-gold-bright) !important;
  color: var(--dst-gold-bright) !important;
}

/* ── Panel Pierres (D6) ── */
.dst-stones-panel { max-width: 760px !important; padding: 32px 38px !important; }
.dst-stones-close { position: absolute; top: 14px; right: 14px; padding:6px 12px !important; font-size:10px !important; }
.dst-stones-header { text-align: center; margin-bottom: 22px; }
.dst-stones-note { font-style: italic; color: var(--dst-gold-dim); font-size:var(--fs-sm); text-align: center; margin-bottom: 18px; }
.dst-stones-note b { color: var(--dst-gold-bright); font-style: normal; }
.dst-stones-list { display: flex; flex-direction: column; gap: 10px; }
.dst-stones-hero {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(20,16,8,0.86) 0%, rgba(10,8,4,0.92) 100%);
  border: 1px solid var(--dst-bronze);
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.18s ease;
  align-items: center;
}
.dst-stones-hero:hover { border-color: var(--dst-gold); transform: translateX(4px); box-shadow: 0 0 14px var(--dst-glow); }
.dst-stones-hero-icon {
  --spec-tint: var(--dst-gold);
  width: 60px; height: 60px;
  border: 1px solid var(--spec-tint);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--spec-tint);
  filter: drop-shadow(0 0 10px var(--spec-tint));
  background: radial-gradient(circle at 35% 25%, var(--tint-5) 0%, transparent 60%), rgba(8,6,4,0.95);
  box-shadow: 0 0 18px color-mix(in srgb, var(--spec-tint) 30%, transparent);
}
.dst-stones-hero-name-sm { font-family:'Cinzel',serif; font-weight:600; font-size:var(--fs-lg); letter-spacing:1.5px; color:var(--dst-gold-bright); margin-bottom:2px; }
.dst-stones-hero-role { font-family:'Orbitron',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--dst-blue); margin-bottom:6px; }
.dst-stones-hero-desc { font-family:'Cinzel',serif; font-style:italic; font-size:11.5px; line-height:1.5; color:var(--dst-gold); opacity:0.82; }
.dst-stones-hero-buff { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:1.2px; color:var(--dst-gold-bright); margin-top:6px; padding:4px 8px; border:1px solid var(--dst-bronze); background:rgba(212,180,131,0.08); border-radius:1px; display:inline-block; }
.dst-stones-active, .dst-stones-cooldown {
  text-align: center;
  padding: 14px 0;
}
.dst-stones-active-icon, .dst-stones-cooldown-icon {
  --spec-tint: var(--dst-gold-bright);
  font-size: 64px;
  color: var(--spec-tint);
  filter: drop-shadow(0 0 22px var(--spec-tint));
  margin-bottom: 14px;
  animation: dstIconFloat 4s ease-in-out infinite; /* revert hotfix freeze : 2.5s→4s */
}
.dst-stones-hero-name { font-family:'Cinzel',serif; font-size: 24px; letter-spacing: 4px; color: var(--dst-gold-bright); margin: 4px 0 12px; }
.dst-stones-desc { font-family:'Cinzel',serif; font-style:italic; font-size:var(--fs-base); line-height:1.6; color:var(--dst-gold); opacity:0.85; margin: 0 30px 18px; }
.dst-stones-eta {
  font-family:'Orbitron',monospace; font-size:var(--fs-2xl); font-weight:700; letter-spacing: 4px;
  color: var(--dst-gold-bright); margin-bottom: 18px;
  text-shadow: 0 0 14px var(--dst-glow);
}

/* Cinematic fade overlay */
.dst-stones-cinematic {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(80,60,30,0.4) 0%, rgba(0,0,0,1) 70%);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  /* iPhone notch / home indicator : centrer le texte dans la safe-area */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
  opacity: 0;
  animation: dstStonesCineIn 1.2s ease forwards;
}
.dst-stones-cinematic.dst-stones-cine-out {
  animation: dstStonesCineOut 1.2s ease forwards;
}
@keyframes dstStonesCineIn  { from{opacity:0} to{opacity:1} }
@keyframes dstStonesCineOut { from{opacity:1} to{opacity:0} }
.dst-stones-cine-text {
  font-family:'Cinzel',serif;
  font-size: 36px;
  letter-spacing: 12px;
  color: var(--dst-gold-bright);
  text-shadow: 0 0 24px var(--dst-glow);
  animation: dstStonesCineText 1.5s ease-in-out infinite;
}
@keyframes dstStonesCineText {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}

/* ── Panel Window / Porte des Etoiles (D9) ── */
.dst-win-panel {
  max-width: 1000px !important;
  padding: 0 !important;
  /* Fix scroll 31/05 : en drawer height:100vh, overflow:hidden empêchait de scroller
     jusqu'à la 3e mission. On garde le clip horizontal mais on autorise le scroll vertical. */
  overflow-x: hidden;
  overflow-y: auto;
}
.dst-win-hero {
  position: relative;
  height: 220px;
  /* Overlay vignette : transparent en haut (image visible) → sombre en bas (legibilite titre) */
  background:
    linear-gradient(180deg, rgba(8,6,4,0) 0%, rgba(8,6,4,0) 45%, rgba(8,6,4,0.75) 100%),
    url('/img/destiny/gate.jpg') center 38% / cover no-repeat;
  border-bottom: 1px solid var(--dst-bronze);
}
.dst-win-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 14px;
}
.dst-win-hero-title {
  font-family:'Cinzel',serif; font-weight:600;
  font-size: 36px; letter-spacing: 12px;
  color: var(--dst-gold-bright);
  text-shadow: 0 0 26px var(--dst-glow), 0 0 8px var(--shade-8);
}
.dst-win-hero-sub {
  font-family:'Orbitron',monospace; font-size: 10px; letter-spacing: 4px;
  color: var(--dst-blue); margin-top: 4px;
}
.dst-win-body { padding: 24px 36px 32px; }
.dst-win-close { position: absolute; top: 14px; right: 14px; padding: 6px 12px !important; font-size: 10px !important; z-index: 4; }
.dst-win-header { text-align: center; margin-bottom: 18px; }
.dst-win-phase-badge {
  font-family:'Orbitron',monospace;
  font-size:var(--fs-base); letter-spacing: 3px; text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid var(--dst-bronze);
  margin-bottom: 14px;
  border-radius: 1px;
}
.dst-win-phase-window {
  background: linear-gradient(90deg, rgba(80,60,20,0.4), rgba(20,14,8,0.4), rgba(80,60,20,0.4));
  border-color: var(--dst-gold-bright);
  color: var(--dst-gold-bright);
  box-shadow: 0 0 18px var(--dst-glow);
  animation: dstWinPhasePulse 2.6s ease-in-out infinite;
}
.dst-win-phase-ftl {
  background: linear-gradient(90deg, rgba(15,30,55,0.4), rgba(8,14,28,0.4), rgba(15,30,55,0.4));
  border-color: var(--dst-blue);
  color: var(--dst-blue);
}
@keyframes dstWinPhasePulse {
  0%,100% { box-shadow: 0 0 10px var(--dst-glow); }
  50%     { box-shadow: 0 0 28px var(--dst-glow); }
}
.dst-win-sub { text-align: center; font-style: italic; font-size:var(--fs-sm); color: var(--dst-gold-dim); line-height: 1.6; margin-bottom: 18px; }
/* Hotfix 28/05 : auto-fit avec minmax 380px = side-drawer (≤700px) → 1-col stack (préférence user).
   Desktop wide (≥780px) → 2 cards. Desktop full (≥1170px) → 3 cards. */
.dst-win-missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 800px) { .dst-win-missions { grid-template-columns: 1fr; } }
.dst-win-mission {
  background: linear-gradient(180deg, rgba(20,16,8,0.94) 0%, rgba(10,8,4,0.96) 100%);
  border: 1px solid var(--dst-bronze);
  padding: 16px 14px;
  border-radius: 1px;
  text-align: center;
  position: relative;
  /* P1.4 — Egalise les hauteurs (REPLI/VICTOIRE sans CTA = aussi haut que cards LANCER) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.dst-win-planet-name {
  font-family:'Cinzel',serif; font-weight: 600;
  font-size: 18px; letter-spacing: 2px;
  color: var(--dst-gold-bright); margin-bottom: 4px;
}
.dst-win-biome {
  font-family:'Cinzel',serif; font-style: italic;
  font-size:var(--fs-xs); color: var(--dst-gold); opacity: 0.78;
  margin-bottom: 10px;
}
.dst-win-threat {
  font-family:'Orbitron',monospace;
  font-size: 10px; letter-spacing: 2px;
  margin-bottom: 8px;
}
.dst-win-rewards { font-size: 16px; margin-bottom: 14px; color: var(--dst-gold); letter-spacing: 4px; }
.dst-win-launch { width: 100%; }
.dst-win-mission-done { opacity: 0.75; }
.dst-win-tag {
  font-family:'Orbitron',monospace; font-size: 10px; letter-spacing: 2px;
  padding: 4px 10px; border: 1px solid; border-radius: 1px; display: inline-block;
  margin: 6px 0;
}
/* T3 audit 28/05 : saturation + drop-shadow pour meilleure lisibilité fond sombre */
.dst-win-tag-victory { color: #a0ff90; border-color: #80e090; background: rgba(40,80,40,0.45); text-shadow: 0 0 6px rgba(128,224,144,0.5); }
.dst-win-tag-partial { color: #ffe080; border-color: #e0c060; background: rgba(80,60,20,0.45); text-shadow: 0 0 6px rgba(224,192,96,0.5); }
.dst-win-tag-defeat  { color: #ff8868; border-color: #e07060; background: rgba(80,30,20,0.45); text-shadow: 0 0 6px rgba(224,112,96,0.5); }
.dst-win-drops { font-family:'Orbitron',monospace; font-size: 10px; color: var(--dst-gold); opacity: 0.9; margin-top: 6px; }
.dst-win-ftlfx {
  height: 60px; margin-top: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(95,180,212,0.18) 8px 10px);
  animation: dstFtlScroll 0.6s linear infinite;
  border-top: 1px solid var(--dst-blue-deep);
  border-bottom: 1px solid var(--dst-blue-deep);
}
@keyframes dstFtlScroll {
  from { background-position-x: 0; }
  to   { background-position-x: 40px; }
}

/* Briefing */
.dst-win-brief { max-width: 720px !important; }
.dst-win-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; }
@media (max-width: 700px) { .dst-win-spec-grid { grid-template-columns: 1fr; } }
.dst-win-spec {
  display: flex; gap: 8px; align-items: center;
  padding: 10px;
  background: rgba(15,12,8,0.84);
  border: 1px solid var(--dst-bronze);
  cursor: pointer;
  border-radius: 1px;
  transition: all 0.15s;
}
.dst-win-spec:hover { border-color: var(--dst-gold); }
.dst-win-spec.selected {
  border-color: var(--dst-gold-bright);
  background: rgba(60,42,20,0.5);
  box-shadow: 0 0 14px var(--dst-glow);
}
.dst-win-spec-wounded { opacity: 0.45; cursor: not-allowed; }
.dst-win-spec-ic { font-size:var(--fs-2xl); }
.dst-win-spec-nm { font-family:'Cinzel',serif; font-size:var(--fs-sm); color: var(--dst-gold-bright); }
.dst-win-spec-w { font-family:'Orbitron',monospace; font-size: 9px; color: #e08a8a; margin-left: auto; }

/* Result modal */
.dst-win-result { max-width: 720px !important; text-align: center; }

/* ── Hero-zone 3D plein écran (P11 26/05 audit Senior) ──
   UI floats deviennent semi-transparents avec backdrop blur pour laisser
   respirer le vaisseau 3D. Le hub passe de "dashboard" à "vous êtes à bord". */

/* Stocks panel gauche : glass + backdrop blur */
#destinyHubStocks {
  background: linear-gradient(180deg, rgba(20,16,10,0.5), rgba(8,6,4,0.65));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 12px;
  border: 1px solid rgba(212,180,131,0.15);
  border-radius: 3px;
}

/* Header phase badge : plus subtil */
#destinyHubPhaseBadge {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(15,12,8,0.6) !important;
  border-color: rgba(212,180,131,0.35) !important;
  /* D7 audit 28/05 : éviter overflow sur petit écran (libellé long en FTL) */
  max-width: calc(100vw - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dock : container glass */
#destinyHubDock {
  background: linear-gradient(180deg, rgba(20,16,10,0.45), rgba(8,6,4,0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cards COLLECTER P13 — voir .dst-res-card plus bas (holos diegetic).
   Le P11 override solide a été remplacé par la refonte hologramme. */

/* Header subline + karma : background semi-transparent autour */
#destinyHubHeader {
  background: linear-gradient(180deg, rgba(15,12,8,0.55), rgba(15,12,8,0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 14px 18px 18px;
  border-radius: 0 0 4px 0;
}

/* Bottom-left "VOIR STATS & CITÉ" — plus subtil */
.dst-empire-stats {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════════
   PERF 29/05 — backdrop-filter RETIRÉ du hub Destiny.
   ~8 éléments en verre dépoli (réserves, dock, header, badge phase, cartes,
   empire-stats, panneaux) sont EMPILÉS au-dessus du canvas WebGL qui se
   redessine en continu. Chaque frame, le navigateur doit recomposer le flou
   de CHACUN → coût de compositing massif sur GPU intégré/mobile (quasi
   invisible sur GPU dédié). C'est la cause principale du lag. On retire le
   flou et on solidifie les fonds : le look "verre sombre" est conservé,
   sans le coût par frame.
   ════════════════════════════════════════════════════════════════════ */
#destinyHub, #destinyHub * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#destinyHubStocks     { background: linear-gradient(180deg, rgba(18,14,9,0.93), rgba(8,6,4,0.96)) !important; }
#destinyHubDock       { background: linear-gradient(180deg, rgba(18,14,9,0.9), rgba(8,6,4,0.97)) !important; }
#destinyHubHeader     { background: linear-gradient(180deg, rgba(13,10,7,0.88), rgba(13,10,7,0)) !important; }
#destinyHubPhaseBadge { background: rgba(13,10,7,0.93) !important; }

/* ── Side-drawer panels (P10 #5 26/05) ──
   Refonte modals centrés → drawer right-side 540px pour les panels du dock.
   Garde le vaisseau 3D visible 60% gauche = sensation "command station".
   Modals narratifs (chapters, QTE, result) restent centrés.
   Utilise :has() — fallback gracieux si non supporté (modal centré standard). */
.dst-modal-overlay:has(.dst-crew-panel),
.dst-modal-overlay:has(.dst-lab-panel),
.dst-modal-overlay:has(.dst-stones-panel),
.dst-modal-overlay:has(.dst-sig-panel),
.dst-modal-overlay:has(.dst-win-panel),
.dst-modal-overlay:has(.dst-kr-panel),
.dst-modal-overlay:has(.dst-journal-panel),
.dst-modal-overlay:has(.dst-room-panel) {
  justify-content: flex-end !important;
  align-items: stretch !important;
  background: linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,0.45) 60%, rgba(2,4,8,0.85) 100%);
}
.dst-modal-overlay:has(.dst-crew-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-lab-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-stones-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-sig-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-win-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-kr-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-journal-panel) > .dst-panel.dst-modal-body,
.dst-modal-overlay:has(.dst-room-panel) > .dst-panel.dst-modal-body {
  max-width: 560px !important;
  width: 560px !important;
  max-height: 100vh !important;
  height: 100vh !important;
  padding: 28px 32px !important;
  border-left: 2px solid var(--dst-gold);
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  animation: dstDrawerSlideIn 320ms cubic-bezier(0.25, 0.8, 0.35, 1) !important;
}
@keyframes dstDrawerSlideIn {
  from { transform: translateX(100%); opacity: 0.4; }
  to   { transform: translateX(0); opacity: 1; }
}
/* A1 audit — Slide-out coordonné quand on switch de panel.
   Anime translateX(0) -> translateX(100%) opacité 1 -> 0.3 sur 220ms.
   Dock.js ajoute cette classe avant remove(), avec setTimeout 230ms. */
.dst-modal-body.dst-panel-slide-out {
  animation: dstDrawerSlideOut 220ms cubic-bezier(0.55, 0, 0.85, 0.45) forwards !important;
}
@keyframes dstDrawerSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0.3; }
}

/* A2 audit — Page-tabs intra-panel (Cristaux, Porte) */
.dst-pnl-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(212,180,131,0.18);
  margin-bottom: 16px;
  padding: 0;
}
.dst-pnl-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dst-gold-dim);
  font-family: 'Orbitron', monospace;
  font-size:var(--fs-xs);
  letter-spacing: 2px;
  padding: 8px 14px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 120ms, border-color 120ms;
  position: relative;
  bottom: -1px;
}
.dst-pnl-tab:hover {
  color: var(--dst-gold);
}
.dst-pnl-tab-active {
  color: var(--dst-gold-bright) !important;
  border-bottom-color: var(--dst-gold-bright) !important;
}
.dst-pnl-tab-content {
  /* contenu visible */
}
/* Pas de breathing glow en drawer (trop fort sur 100vh) */
.dst-modal-overlay:has(.dst-crew-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-lab-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-stones-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-sig-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-win-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-kr-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-journal-panel) > .dst-modal-body,
.dst-modal-overlay:has(.dst-room-panel) > .dst-modal-body {
  animation: dstDrawerSlideIn 320ms cubic-bezier(0.25, 0.8, 0.35, 1);
}

/* C2 fix audit UI/UX — Header collision : les titres Cinzel grands débordaient
   sous les boutons FERMER + GIZMO (top-right absolute). Padding-right réserve
   la place. Cible le premier .dst-h1 de chaque side-drawer panel. */
.dst-modal-overlay:has(.dst-crew-panel)    .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-lab-panel)     .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-stones-panel)  .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-sig-panel)     .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-win-panel)     .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-kr-panel)      .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-journal-panel) .dst-modal-body .dst-h1:first-of-type,
.dst-modal-overlay:has(.dst-room-panel)    .dst-modal-body .dst-h1:first-of-type {
  padding-right: 110px;  /* FERMER (80px) + buffer */
}

/* C1 fix — Active state du dock-btn courant (feedback visuel quand panel ouvert) */
.dst-dock-btn-active {
  background: linear-gradient(180deg, rgba(212,180,131,0.32), rgba(212,180,131,0.12)) !important;
  border-color: var(--dst-gold-bright) !important;
  box-shadow: 0 0 18px rgba(255,212,128,0.45), inset 0 0 12px rgba(255,212,128,0.20) !important;
}
.dst-dock-btn-active .dst-dock-glyph {
  color: var(--dst-gold-bright) !important;
  text-shadow: 0 0 12px var(--dst-glow);
}

/* ── Cinematic Collect Tout (P10 #9 26/05) ── */
.dst-collect-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,235,170,0.35) 0%, rgba(255,235,170,0) 70%);
  pointer-events: none;
  z-index: 8;
  animation: dstCollectFlash 600ms ease-out forwards;
}
@keyframes dstCollectFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}
.dst-collect-floater {
  position: absolute;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  pointer-events: none;
  z-index: 12;
  animation: dstCollectFloat 1500ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes dstCollectFloat {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.7); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(1); }
}
.dst-res-card-pulse {
  animation: dstResCardPulse 600ms ease-out;
}
@keyframes dstResCardPulse {
  0%   { box-shadow: 0 0 0 rgba(212,180,131,0); }
  30%  { box-shadow: 0 0 30px rgba(212,180,131,0.7), inset 0 0 18px rgba(212,180,131,0.4); }
  100% { box-shadow: 0 0 0 rgba(212,180,131,0); }
}

/* ── Mini-jeu QTE Window combat (refonte 26/05 : interactif) ── */
.dst-qte-overlay {
  background: radial-gradient(ellipse at center, rgba(20,15,8,0.85) 0%, rgba(5,3,2,0.96) 100%);
  cursor: crosshair;
  /* Fix 10/06 : tout l'overlay est cliquable (timing-only) — bloque scroll /
     double-tap zoom / sélection pendant le mini-jeu sur mobile et tablette. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dst-qte-header {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  text-align: center; color: var(--dst-gold);
  font-family: 'Orbitron', monospace;
  z-index: 10; pointer-events: none;
}
.dst-qte-header .dst-h2 { font-size: 18px; letter-spacing: 4px; color: var(--dst-gold-bright); margin-bottom: 6px; }
.dst-qte-score { font-size:var(--fs-md); letter-spacing: 2px; margin-bottom: 6px; }
.dst-qte-hint { font-size: 10px; opacity: 0.65; letter-spacing: 1.5px; text-transform: uppercase; }
.dst-qte-stage { position: absolute; inset: 0; pointer-events: none; }
.dst-qte-stage > * { pointer-events: auto; }
.dst-qte-ring {
  position: absolute; transform: translate(-50%, -50%);
  width: 200px; height: 200px;
}
.dst-qte-ring-target {
  position: absolute; left: 50%; top: 50%;
  /* Resync 31/05 : la zone dorée = taille du cercle blanc au CENTRE de la fenêtre de hit
     (t=0.5 → scale 0.5 → 50% du ring). Avant 65% → croisement visuel au bord du timing = injouable. */
  width: 50%; height: 50%;
  margin: -25% 0 0 -25%;
  border: 2px solid var(--dst-gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(212, 180, 131, 0.4), inset 0 0 12px rgba(212, 180, 131, 0.18);
}
.dst-qte-ring-shrink {
  position: absolute; inset: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  /* Fix 10/06 : shrink piloté en JS (rAF, transform/opacity inline) — les
     kill-rules lowfx/perf-medium/no-anim/reduced-motion (animation-duration:
     0.01ms !important) figeaient l'animation CSS = cercle immobile, QTE injouable. */
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.55);
}
.dst-qte-ring.dst-qte-hit .dst-qte-ring-target {
  background: rgba(120, 255, 120, 0.18);
  border-color: #80ff80;
  box-shadow: 0 0 30px rgba(128, 255, 128, 0.6);
  animation: dstQtePulse 350ms ease;
}
.dst-qte-ring.dst-qte-off .dst-qte-ring-target {
  background: rgba(255, 120, 120, 0.18);
  border-color: #ff8080;
}
.dst-qte-ring.dst-qte-miss { opacity: 0.35; }
@keyframes dstQtePulse {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1.0); }
}
.dst-qte-final {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; font-family: 'Orbitron', monospace;
}
.dst-qte-final-title {
  font-size:var(--fs-4xl); letter-spacing: 8px; color: var(--dst-gold-bright);
  text-shadow: 0 0 20px rgba(212, 180, 131, 0.6);
  margin-bottom: 12px;
}
.dst-qte-final-bonus {
  font-size: 18px; letter-spacing: 3px; color: var(--dst-gold);
}
.dst-win-verdict { font-size: 36px !important; letter-spacing: 8px !important; margin: 8px 0 14px !important; }
.dst-win-narr {
  font-family:'Cinzel',serif; font-style: italic;
  font-size:var(--fs-base); line-height: 1.7;
  color: var(--dst-gold);
  margin: 0 30px 14px;
  padding: 10px;
  border-top: 1px solid var(--dst-bronze);
  border-bottom: 1px solid var(--dst-bronze);
}
.dst-win-stats {
  font-family:'Orbitron',monospace;
  font-size:var(--fs-xs); letter-spacing: 1.5px;
  color: var(--dst-blue);
  margin: 10px 0 14px;
}
.dst-win-drops-list { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dst-win-drop {
  font-family:'Orbitron',monospace; font-size:var(--fs-sm);
  color: var(--dst-gold); padding: 4px 10px;
}
.dst-win-drop-rare {
  color: var(--dst-gold-bright);
  border: 1px solid var(--dst-gold);
  border-radius: 1px;
  background: rgba(80,60,20,0.4);
  animation: dstBadgeFull 1.6s ease-in-out infinite;
}

/* ── Signal / Observatoire (D12) ── */
.dst-sig-panel { max-width: 720px !important; padding: 32px 38px !important; text-align: center; }
.dst-sig-close { position: absolute; top: 14px; right: 14px; padding: 6px 12px !important; font-size: 10px !important; }
.dst-sig-cycle {
  font-family:'Orbitron',monospace; font-size:var(--fs-base); letter-spacing: 6px;
  color: var(--dst-blue); margin-top: 4px;
}
.dst-sig-intro { font-style: italic; color: var(--dst-gold); font-size: 12.5px; line-height: 1.6; margin: 16px 30px; }
.dst-sig-ring {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 24px 0;
}
.dst-sig-dot {
  width: 18px; height: 18px;
  border: 1px solid var(--dst-bronze);
  border-radius: 50%;
  background: rgba(8,6,4,0.95);
  transition: all 0.3s;
}
.dst-sig-dot-on {
  background: radial-gradient(circle, var(--dst-gold-bright) 30%, var(--dst-gold) 70%);
  border-color: var(--dst-gold-bright);
  box-shadow: 0 0 14px var(--dst-glow), inset 0 0 6px rgba(255,255,255,0.5);
  animation: dstSigDotPulse 2.5s ease-in-out infinite;
}
@keyframes dstSigDotPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); box-shadow: 0 0 24px var(--dst-glow); }
}
.dst-sig-bar {
  height: 8px;
  background: var(--shade-5);
  border: 1px solid var(--dst-bronze);
  border-radius: 1px;
  overflow: hidden;
}
.dst-sig-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dst-bronze) 0%, var(--dst-gold-bright) 100%);
  box-shadow: 0 0 18px var(--dst-glow);
  transition: width 0.6s ease;
}
.dst-sig-count {
  font-family:'Orbitron',monospace; font-size:var(--fs-base); letter-spacing: 2px;
  color: var(--dst-gold); margin-top: 6px;
}
.dst-sig-count b { color: var(--dst-gold-bright); font-weight: 700; }
.dst-sig-action { margin-top: 22px; }
.dst-sig-hint { font-style: italic; font-size: 11.5px; color: var(--dst-gold-dim); margin-top: 10px; }

/* Cinematic decodage */
.dst-sig-cinematic {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(60,40,90,0.5) 0%, rgba(0,0,0,1) 70%);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  /* iPhone notch / home indicator : centrer le texte dans la safe-area */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
  opacity: 0;
  animation: dstStonesCineIn 1.2s ease forwards;
}
.dst-sig-cine-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 80% 20%, rgba(212,180,131,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, rgba(95,180,212,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 70% 80%, rgba(212,180,131,0.6) 50%, transparent 100%);
  animation: dstSigStarsRot 18s linear infinite;
}
@keyframes dstSigStarsRot { from { transform: scale(1); } to { transform: scale(2.5); opacity: 0; } }
.dst-sig-cine-text { text-align: center; position: relative; z-index: 2; }
.dst-sig-cine-title {
  font-family:'Cinzel',serif; font-size: 48px; letter-spacing: 14px;
  color: var(--dst-gold-bright);
  text-shadow: 0 0 32px var(--dst-glow), 0 0 60px var(--dst-glow);
  animation: dstSigCineTitle 3s ease-in-out infinite;
}
@keyframes dstSigCineTitle {
  0%,100% { letter-spacing: 14px; }
  50%     { letter-spacing: 22px; }
}
.dst-sig-cine-sub {
  font-family:'Cinzel',serif; font-style: italic;
  font-size: 16px; color: var(--dst-gold);
  margin-top: 16px;
}
.dst-sig-cinematic.dst-sig-cine-out { animation: dstStonesCineOut 1.5s ease forwards; }

/* Victory modal */
.dst-sig-victory { max-width: 640px !important; text-align: center; padding: 36px !important; }
.dst-sig-vict-icon { font-size: 80px; color: var(--dst-gold-bright); filter: drop-shadow(0 0 30px var(--dst-glow)); margin-bottom: 8px; animation: dstIconFloat 4s ease-in-out infinite; }
.dst-sig-vict-title { font-size: 42px !important; letter-spacing: 14px !important; margin: 4px 0 18px !important; color: var(--dst-gold-bright) !important; text-shadow: 0 0 24px var(--dst-glow); }
.dst-sig-vict-text { font-family:'Cinzel',serif; font-style: italic; font-size:var(--fs-md); line-height: 1.7; color: var(--dst-gold); margin: 0 20px 18px; padding: 12px; border-top: 1px solid var(--dst-bronze); border-bottom: 1px solid var(--dst-bronze); }
.dst-sig-vict-text b { color: var(--dst-gold-bright); font-style: normal; }
.dst-sig-title-grant {
  font-family:'Orbitron',monospace; font-size:var(--fs-sm); letter-spacing: 3px;
  color: var(--dst-gold-bright); padding: 8px; border: 1px solid var(--dst-gold);
  background: rgba(60,42,20,0.4); margin: 14px 30px;
}
.dst-sig-reward { display: flex; flex-direction: column; gap: 5px; align-items: center; font-family:'Orbitron',monospace; font-size:var(--fs-base); color: var(--dst-gold); margin-bottom: 22px; }
.dst-sig-reward b { color: var(--dst-gold-bright); }

/* ════════════════════════════════════════════════
   D-UX : Bottom Dock premium + Piles + Holo badges
   ════════════════════════════════════════════════ */

#destinyHubDock {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(20,16,8,0.55) 0%, rgba(8,6,4,0.65) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--dst-bronze);
  border-radius: 38px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 0 1px var(--dst-gold-dim);
}
@media (prefers-reduced-motion: no-preference) {
  #destinyHubDock {
    /* A1 audit 28/05 : both→forwards (évite UI invisible si paused, cf lesson_css_animation_fill_mode_both_opacity_0) */
    animation: dstDockSlideUp 700ms cubic-bezier(0.2, 0.7, 0.3, 1.05) forwards;
  }
}
@keyframes dstDockSlideUp {
  from { transform: translateX(-50%) translateY(80px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.dst-dock-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--dst-bronze);
  background: radial-gradient(circle at 35% 25%, rgba(60,42,20,0.95) 0%, rgba(15,12,8,0.95) 100%);
  color: var(--dst-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s, box-shadow 0.18s, background 0.18s;
  padding: 0;
  font-family:'Cinzel', serif;
  box-shadow: 0 4px 12px var(--shade-4), inset 0 0 12px var(--shade-3);
}
@media (prefers-reduced-motion: no-preference) {
  /* A1 audit 28/05 : both→forwards (cf dstDockSlideUp ci-dessus) */
  .dst-dock-btn { animation: dstDockBtnIn 500ms ease forwards; }
}
@keyframes dstDockBtnIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.dst-dock-btn:hover {
  transform: translateY(-8px) scale(1.10);
  border-color: var(--dst-gold-bright);
  background: radial-gradient(circle at 35% 25%, rgba(90,62,28,0.95) 0%, rgba(30,20,10,0.95) 100%);
  box-shadow: 0 10px 24px var(--shade-5), 0 0 20px var(--dst-glow), inset 0 0 12px var(--shade-2);
}
.dst-dock-btn:active { transform: translateY(-4px) scale(1.05); }
.dst-dock-glyph {
  font-size: 24px;
  color: var(--dst-gold-bright);
  filter: drop-shadow(0 0 6px var(--dst-glow));
  line-height: 1;
}
/* ── Help collapsibles (Quick win UI/UX #6 26/05) — replace les wall-of-text par <details> ── */
.dst-help {
  margin: 8px 0;
  font-size:var(--fs-xs);
  color: var(--dst-gold-dim);
}
.dst-help > summary {
  cursor: pointer;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--dst-gold);
  padding: 4px 8px;
  border: 1px solid var(--dst-bronze);
  background: rgba(15,12,8,0.4);
  border-radius: 2px;
  display: inline-block;
  list-style: none;
  user-select: none;
  transition: color 0.18s, border-color 0.18s;
}
.dst-help > summary::-webkit-details-marker { display: none; }
.dst-help > summary:hover { color: var(--dst-gold-bright); border-color: var(--dst-gold-bright); }
.dst-help[open] > summary { color: var(--dst-gold-bright); border-color: var(--dst-gold-bright); }
.dst-help-list, .dst-help p {
  margin: 8px 0 0;
  font-style: italic;
  line-height: 1.55;
  padding-left: 18px;
}
.dst-help-list li { margin-bottom: 4px; }

/* Labels TOUJOURS visibles sous les boutons dock (Quick win UI/UX #7 26/05) */
.dst-dock-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--dst-gold-bright);
  font-family:'Orbitron', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 0;
  opacity: 0.95;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  white-space: nowrap;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: opacity 0.18s, color 0.18s;
}
.dst-dock-btn:hover .dst-dock-label {
  opacity: 1;
  color: var(--dst-gold-bright);
  transform: translateX(-50%) translateY(4px);
}
.dst-dock-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff4848 0%, #802020 100%);
  border: 1px solid #ff6060;
  box-shadow: 0 0 8px rgba(255, 72, 72, 0.7);
  display: none;
  animation: dstDockBadgePulse 1.4s ease-in-out infinite;
}
/* Badge texte (count specialists libres, cooldown timer) */
.dst-dock-badge.dst-dock-badge-text {
  width: auto;
  min-width: 18px;
  height: 16px;
  border-radius:var(--radius);
  padding: 0 5px;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.5px;
  animation: none;
}

/* ── Karma anneaux radial concentriques (Quick win UI/UX #3 26/05) ──
   3 anneaux SVG empilés (Pragma extérieur / Soli milieu / Curio intérieur).
   Plus visible que les anciennes mini-bars 60px illisibles. */
.dst-kr-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  color: var(--dst-gold-dim);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: color 0.18s;
}
.dst-kr-mini:hover { color: var(--dst-gold-bright); }
.dst-kr-mini-svg {
  display: block;
  width: 56px;
  height: 56px;
}
.dst-kr-mini-arc-track {
  fill: none;
  stroke: rgba(60, 50, 30, 0.45);
  stroke-width: 3;
}
.dst-kr-mini-arc-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 400ms ease, stroke 400ms ease;
}
.dst-kr-mini-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 8px;
}
.dst-kr-mini-legend-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dst-kr-mini-legend-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.dst-kr-mini-legend-val {
  font-weight: 700;
  color: var(--dst-gold-bright);
  min-width: 22px;
  text-align: right;
}
@keyframes dstDockBadgePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.25); opacity: 0.7; }
}

/* Piles holo badges (au-dessus des piles 3D au plancher) */
.dst-pile-badge {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,8,0.95) 0%, rgba(10,8,4,0.96) 100%);
  border: 1px solid var(--dst-gold);
  color: var(--dst-gold-bright);
  padding: 4px 10px;
  border-radius: 2px;
  font-family:'Orbitron', monospace;
  font-size:var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
  box-shadow: 0 0 14px var(--dst-glow), 0 2px 6px var(--shade-6);
  display: none;
}
.dst-pile-badge.dst-pile-rich {
  border-color: var(--dst-gold-bright);
  box-shadow: 0 0 22px var(--dst-glow), 0 0 40px var(--dst-glow);
  animation: dstBadgeFull 1.6s ease-in-out infinite;
}

/* HUD stocks sticky-left */
#destinyHubStocks {
  user-select: none;
}
#destinyHubStocks > div {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Bloc explicatif intro de panel */
.dst-stones-explain {
  font-family:'Cinzel', serif;
  font-size:var(--fs-base);
  font-style: italic;
  line-height: 1.7;
  color: var(--dst-gold);
  opacity: 0.92;
  background: linear-gradient(180deg, rgba(20,16,8,0.6) 0%, rgba(8,6,4,0.7) 100%);
  
  padding: 12px 16px;
  border-radius: 0 2px 2px 0;
  margin-bottom: 14px;
 box-shadow:inset 3px 0 0 0 var(--dst-gold); }
.dst-stones-explain b { color: var(--dst-gold-bright); font-style: normal; font-weight: 700; }

/* Override : sub-text des sections explicatives (Lab/Crew/Window) */
.dst-lab-sub, .dst-crew-sub, .dst-win-sub {
  line-height: 1.7 !important;
}
.dst-lab-sub b, .dst-crew-sub b, .dst-win-sub b {
  color: var(--dst-gold-bright) !important;
  font-style: normal !important;
  font-weight: 700;
}

/* Empire Unit Detail Panel */
.dst-empire-panel { max-width: 820px !important; padding: 28px 34px !important; }
.dst-empire-close { position: absolute; top: 14px; right: 14px; padding: 6px 12px !important; font-size: 10px !important; }
.dst-empire-grid { display: flex; flex-direction: column; gap: 12px; }
.dst-empunit-card {
  background: linear-gradient(180deg, rgba(20,16,8,0.92) 0%, rgba(10,8,4,0.94) 100%);
  border: 1px solid var(--dst-bronze);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Variante avec illustration de fond (28/05) */
.dst-empunit-card-illus {
  min-height: 280px;
  position: relative;
  overflow: hidden;
  background-color: rgba(8,6,4,0.92);
}
.dst-empunit-card-illus .dst-empunit-desc {
  color: var(--dst-gold);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.dst-empunit-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dst-empunit-icon {
  font-size: 34px;
  color: var(--dst-gold-bright);
  filter: drop-shadow(0 0 10px var(--dst-glow));
}
.dst-empunit-name { font-family:'Cinzel', serif; font-size:var(--fs-xl); letter-spacing: 2px; color: var(--dst-gold-bright); }
.dst-empunit-type { font-family:'Orbitron', monospace; font-size: 9.5px; letter-spacing: 2px; color: var(--dst-blue); text-transform: uppercase; margin-top: 3px; }
.dst-empunit-count {
  margin-left: auto;
  font-family:'Orbitron', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--dst-gold-bright);
  background: rgba(40,28,12,0.6);
  border: 1px solid var(--dst-bronze);
  padding: 4px 14px;
  border-radius: 2px;
  min-width: 80px;
  text-align: center;
}
.dst-empunit-desc {
  font-family:'Cinzel', serif;
  font-style: italic;
  font-size:var(--fs-sm);
  line-height: 1.55;
  color: var(--dst-gold);
  opacity: 0.85;
  margin-bottom: 10px;
}
.dst-empunit-stats {
  display: flex; gap: 14px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.dst-empunit-stats > div {
  background: rgba(15,12,8,0.7);
  border: 1px solid var(--dst-bronze-dim);
  padding: 6px 12px;
  border-radius: 2px;
  display: flex; gap: 8px; align-items: center;
}
.dst-empunit-stats span {
  font-family:'Orbitron', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  color: var(--dst-blue);
  text-transform: uppercase;
}
.dst-empunit-stats b {
  font-family:'Orbitron', monospace;
  font-size:var(--fs-md);
  font-weight: 700;
  color: var(--dst-gold-bright);
}
.dst-empunit-cost {
  font-family:'Orbitron', monospace;
  font-size: 10px;
  color: var(--dst-gold-dim);
  letter-spacing: 1px;
  line-height: 1.5;
}
.dst-empunit-cost span { margin-right: 6px; }
.dst-empunit-cost b { color: var(--dst-gold); font-weight: 700; }

/* Badge "Mode Destinée" pour les unités non recrutables en cité */
.uc-destiny-badge {
  font-family:'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #d4b483;
  background: linear-gradient(180deg, rgba(60,42,20,0.85) 0%, rgba(20,14,8,0.95) 100%);
  border: 1px solid #6b5a3a;
  padding: 6px 12px;
  border-radius: 2px;
  text-align: center;
  cursor: help;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(212,180,131,0.25), inset 0 0 8px var(--shade-3);
}
.unit-card.uc-destiny, .ship-card.uc-destiny {
  border: 1px solid #6b5a3a !important;
  background: linear-gradient(180deg, rgba(28,22,14,0.6) 0%, rgba(10,8,6,0.7) 100%) !important;
  position: relative;
}
.unit-card.uc-destiny::after, .ship-card.uc-destiny::after {
  content: 'Collectable uniquement via le mode Destinée';
  position: absolute;
  bottom: 4px; right: 8px;
  font-family:'Orbitron', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #8a7250;
  opacity: 0.6;
  font-style: italic;
  pointer-events: none;
}

/* ── Bouton DESTINEE inline dans la topbar (remplace recherche, dev-gate Merlin) ── */
.logo-wrap-compact .logo-sub { display: none; }
.logo-mark {
  font-size: 26px !important;
  color: var(--gold, #d4b483);
  text-shadow: 0 0 10px rgba(212,180,131,0.55);
  letter-spacing: 0 !important;
  padding: 0 6px !important;
}
.tb2-destiny-slot {
  display: inline-flex; align-items: center;
  margin-left: 12px;
}
.tb2-destiny-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  /* T1 — Pictogramme circulaire compact (audit UI/UX) :
     avant 140x42 texte+icon, maintenant 42x42 icon-only → -100px topbar.
     Label DESTINEE déplacé en tooltip via title="". */
  width: 42px;
  height: 42px;
  padding: 0;
  background: linear-gradient(135deg, rgba(60,42,20,0.92) 0%, rgba(20,14,8,0.96) 100%);
  border: 1px solid #6b5a3a;
  border-radius: 50%;
  color: #f0d9a8;
  font-family:'Cinzel', serif;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-shadow: 0 0 16px rgba(212,180,131,0.25), inset 0 0 8px var(--shade-2);
  overflow: hidden;
}
.tb2-destiny-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(212,180,131,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.tb2-destiny-btn:hover {
  transform: translateY(-1px);
  border-color: #d4b483;
  background: linear-gradient(135deg, rgba(90,62,28,0.95) 0%, rgba(30,20,10,0.98) 100%);
  box-shadow: 0 0 22px rgba(212,180,131,0.55), 0 4px 14px var(--shade-4), inset 0 0 10px var(--shade-2);
}
.tb2-destiny-btn:hover::before { transform: translateX(100%); }
.tb2-dst-icon {
  font-size:var(--fs-2xl); line-height: 1;
  color: #f0d9a8;
  text-shadow: 0 0 10px rgba(212,180,131,0.7);
  filter: drop-shadow(0 0 6px rgba(212,180,131,0.6));
  animation: dstTbIconPulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .tb2-dst-icon { animation: dstTbIconPulse 3s ease-in-out infinite; }
}
@keyframes dstTbIconPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(212,180,131,0.7); }
  50%      { text-shadow: 0 0 18px rgba(212,180,131,1.0), 0 0 28px rgba(212,180,131,0.5); }
}
/* T1 — Label DESTINEE caché : pictogramme-only avec tooltip (title="").
   Plus de display:flex — toujours hidden, mobile et desktop. */
.tb2-dst-label { display: none !important; }
.tb2-dst-name {
  font-family:'Cinzel', serif;
  font-size:var(--fs-base);
  letter-spacing: 3px;
  font-weight: 600;
  color: #f0d9a8;
  text-shadow: 0 0 6px rgba(212,180,131,0.4);
}
.tb2-dst-sub {
  font-family:'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #b08a55;
  text-transform: uppercase;
  opacity: 0.85;
}
.tb2-dst-pulse {
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f0d9a8;
  box-shadow: 0 0 8px #f0d9a8, 0 0 14px rgba(212,180,131,0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .tb2-dst-pulse { animation: dstTbPulse 1.8s ease-in-out infinite; }
}
@keyframes dstTbPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1.0;  transform: scale(1.2); }
}
@media (max-width: 900px) {
  .tb2-dst-label { display: none; }
  .tb2-destiny-btn { padding: 6px 10px; gap: 0; }
}

/* Carte d'unite (bld-card) destinee-only — utilise par renderSoldatsContent/Defense */
.bld-card.uc-destiny {
  border: 1px solid #6b5a3a !important;
  position: relative;
  overflow: hidden;
}
.bld-card.uc-destiny::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,14,8,0.45), rgba(60,42,20,0.25));
  pointer-events: none;
  z-index: 0;
}
.bld-card.uc-destiny > * { position: relative; z-index: 1; }
.bld-destiny-ribbon {
  position: absolute;
  /* Hotfix 28/05 : déplacé bottom-right (était top-right, conflit avec illustration + clip card) */
  bottom: 10px; right: 10px;
  top: auto;
  z-index: 3;
  font-family: 'Orbitron', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f0d9a8;
  background: linear-gradient(135deg, rgba(107,79,26,0.95) 0%, rgba(181,138,58,0.92) 50%, rgba(107,79,26,0.95) 100%);
  padding: 3px 9px;
  border: 1px solid #d4b483;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(212,180,131,0.55), inset 0 0 6px rgba(0,0,0,0.35);
  display: inline-flex; align-items: center; gap: 4px;
  pointer-events: none;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.bld-destiny-only {
  text-align: center;
  padding: 8px 6px;
  cursor: help;
}
.bld-destiny-only-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', monospace;
  font-size:var(--fs-sm);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #f0d9a8;
  background: linear-gradient(180deg, rgba(60,42,20,0.95) 0%, rgba(20,14,8,0.98) 100%);
  border: 1px solid #d4b483;
  padding: 8px 18px;
  border-radius:var(--radius-sm);
  text-shadow: 0 0 8px rgba(212,180,131,0.6);
  box-shadow: 0 0 18px rgba(212,180,131,0.35), inset 0 0 10px var(--shade-3);
  margin-bottom: 6px;
}
.bld-destiny-only-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size:var(--fs-xs);
  color: #b08a55;
  letter-spacing: 0.5px;
  opacity: 0.85;
  font-style: italic;
}

/* Mobile-friendly : dock compacte */
@media (max-width: 900px) {
  #destinyHubDock { gap: 8px; padding: 8px 12px; border-radius: 32px; }
  .dst-dock-btn { width: 46px; height: 46px; }
  .dst-dock-glyph { font-size: 20px; }
  .dst-dock-label { display: none; }
  #destinyHubStocks { display: none !important; }
}

/* C3 fix audit QA — iPhone <600px : le dock et les cards COLLECTER
   doivent rester dans le viewport. Cards scrollables horizontalement,
   dock compacté + remonté pour safe-area iOS. */
@media (max-width: 600px) {
  #destinyHubDock {
    bottom: 12px;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 28px;
    z-index: 9;
    /* L'animation dstDockSlideUp se retrouve "paused" sur mobile emulator
       et laisse le dock à translateY(80px) = hors viewport. Override total. */
    animation: none !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  /* Pareil sur cards animation : si elles ont un slideIn ça pourrait coincer */
  .dst-dock-btn {
    animation: none !important;
  }
  .dst-dock-btn { width: 42px; height: 42px; }
  .dst-dock-glyph { font-size:var(--fs-xl); }
  .dst-dock-badge { right: -2px; top: -2px; transform: scale(0.85); }
  /* Cards COLLECTER : remontées + scrollables horizontalement */
  #destinyResourcesPanel {
    bottom: 78px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* fade-out cue indiquant le scroll */
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .dst-res-card {
    width: 86px !important;
    flex-shrink: 0;
    padding: 6px 4px !important;
  }
  .dst-res-icon { width: 26px !important; height: 26px !important; font-size:var(--fs-md); }
  .dst-res-label { font-size: 9px !important; letter-spacing: 0.4px; line-height: 1.4; font-weight: 600; } /* T1 audit 28/05 : 7px→8px (seuil retina) ; 31/05 lisibilité 8→9px */
  .dst-res-count { font-size: 14px !important; }
  /* Header phase badge centré (sinon il colle SORTIR/GIZMO) */
  #destinyHubPhaseBadge {
    font-size: 9px !important;
    letter-spacing: 1.5px;
    padding: 4px 8px !important;
  }
  /* Side-drawer plein écran sur mobile (au lieu de 560px largeur fixe) */
  .dst-modal-overlay:has(.dst-crew-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-lab-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-stones-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-sig-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-win-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-kr-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-journal-panel) > .dst-panel.dst-modal-body,
  .dst-modal-overlay:has(.dst-room-panel) > .dst-panel.dst-modal-body {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 18px 18px 90px !important;  /* 90px bottom = room pour dock */
  }
}

/* ── Event scripte (visual-novel) + Karma (D8) ── */
.dst-evt-panel { max-width: 760px !important; padding: 32px 40px !important; position: relative; }
.dst-evt-dismiss {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: transparent;
  color: var(--dst-gold-dim);
  border: 1px solid rgba(212,180,131,0.25);
  font-family: 'Orbitron', monospace;
  font-size:var(--fs-base);
  cursor: pointer;
  border-radius: 2px;
  transition: color 120ms, border-color 120ms;
  z-index: 5;
}
.dst-evt-dismiss:hover { color: var(--dst-gold); border-color: var(--dst-gold); }

/* P15 — Réactions équipage + Tendance Karma dans outcome */
.dst-evt-reactions {
  margin: 16px 0 4px;
  border-top: 1px solid rgba(212,180,131,0.2);
  padding-top: 14px;
}
.dst-evt-reactions-h {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--dst-blue);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.dst-evt-react {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 12px;
  margin-bottom: 7px;
  border-radius: 2px;
  border-left: 2px solid;
  background: linear-gradient(180deg, rgba(20,16,8,0.4), rgba(8,6,4,0.55));
}
.dst-evt-react-pos { border-color: #80e090; }
.dst-evt-react-neg { border-color: #e08070; }
.dst-evt-react-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,180,131,0.35);
  font-size:var(--fs-md);
  color: var(--dst-gold);
  flex-shrink: 0;
}
.dst-evt-react-body { flex: 1; min-width: 0; }
.dst-evt-react-name {
  font-family: 'Orbitron', monospace;
  font-size: 10px; letter-spacing: 1.8px;
  color: var(--dst-gold-bright);
  margin-bottom: 3px;
}
.dst-evt-react-text {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size:var(--fs-base);
  line-height: 1.55;
  color: var(--dst-gold);
}
.dst-evt-trend {
  margin-top: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(30,40,60,0.45), rgba(10,16,24,0.55));
  border: 1px solid rgba(120,180,224,0.30);
  border-radius: 2px;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-family: 'Orbitron', monospace;
  font-size:var(--fs-xs);
}
.dst-evt-trend-lbl { color: var(--dst-blue); letter-spacing: 2px; text-transform: uppercase; }
.dst-evt-trend-val { color: var(--dst-gold-bright); font-size:var(--fs-md); font-weight: 700; }
.dst-evt-trend-dir { color: var(--dst-gold); font-family: 'Cinzel', serif; font-style: italic; font-size:var(--fs-base); letter-spacing: 0; }
.dst-evt-trend-dir b { color: var(--dst-gold-bright); font-style: normal; }
.dst-evt-chap { font-family:'Orbitron',monospace; font-size: 10px; letter-spacing: 4px; color: var(--dst-blue); text-align: center; margin-bottom: 4px; }
.dst-evt-title { font-size: 32px !important; letter-spacing: 6px !important; text-align: center; margin: 4px 0 22px !important; }
.dst-evt-scene { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: flex-start; margin-bottom: 20px; }
.dst-evt-portrait {
  --spec-tint: var(--dst-gold);
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid var(--spec-tint);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, var(--tint-6) 0%, transparent 60%), rgba(8,6,4,0.95);
  box-shadow: 0 0 22px color-mix(in srgb, var(--spec-tint) 35%, transparent);
  position: relative;
}
.dst-evt-portrait::before {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border: 1px solid var(--spec-tint); opacity: 0.5;
  animation: dstCrewPortraitPulse 3.5s ease-in-out infinite;
}
.dst-evt-portrait-icon { font-size: 48px; color: var(--spec-tint); filter: drop-shadow(0 0 12px var(--spec-tint)); }
.dst-evt-author { font-family:'Orbitron',monospace; font-size:var(--fs-xs); letter-spacing: 2.5px; text-transform: uppercase; color: var(--dst-blue); margin-bottom: 6px; }
.dst-evt-line { font-family:'Cinzel',serif; font-style: italic; font-size:var(--fs-lg); line-height: 1.7; color: var(--dst-gold); }
.dst-evt-progress { display: flex; gap: 6px; justify-content: center; margin: 16px 0; }
.dst-evt-dot { width: 8px; height: 8px; border: 1px solid var(--dst-bronze); border-radius: 50%; }
.dst-evt-dot-on { background: var(--dst-gold-bright); border-color: var(--dst-gold); box-shadow: 0 0 6px var(--dst-glow); }
.dst-evt-actions { text-align: center; }
.dst-evt-prompt { font-family:'Cinzel',serif; font-style: italic; font-size: 16px; color: var(--dst-gold-bright); text-align: center; margin: 14px 0 18px; }
.dst-evt-choices { display: flex; flex-direction: column; gap: 10px; }
.dst-evt-choice {
  background: linear-gradient(180deg, rgba(20,16,8,0.95) 0%, rgba(10,8,4,0.96) 100%);
  border: 1px solid var(--dst-bronze);
  padding: 12px 18px;
  cursor: pointer;
  text-align: left;
  font-family:'Cinzel',serif;
  color: var(--dst-gold);
  transition: all 0.18s;
  border-radius: 1px;
}
.dst-evt-choice:hover:not(:disabled) { border-color: var(--dst-gold-bright); background: linear-gradient(180deg, rgba(40,28,12,0.95) 0%, rgba(20,14,8,0.96) 100%); box-shadow: 0 0 14px var(--dst-glow); transform: translateX(4px); }
.dst-evt-choice:disabled { opacity: 0.4; cursor: not-allowed; }
.dst-evt-choice-lbl { font-size:var(--fs-md); letter-spacing: 1px; margin-bottom: 4px; color: var(--dst-gold-bright); }
.dst-evt-choice-fx { display: flex; gap: 6px; flex-wrap: wrap; }
.dst-evt-fx {
  font-family:'Orbitron',monospace; font-size: 9px; letter-spacing: 1.5px;
  padding: 2px 8px; border-radius: 1px;
}
.dst-evt-fx-pos { color: #80e090; border: 1px solid #80e090; background: rgba(30,80,30,0.3); }
.dst-evt-fx-neg { color: #e08070; border: 1px solid #e08070; background: rgba(80,30,20,0.3); }
.dst-evt-outcome { font-family:'Cinzel',serif; font-style: italic; font-size: 14.5px; line-height: 1.7; color: var(--dst-gold); padding: 14px; border-top: 1px solid var(--dst-bronze); border-bottom: 1px solid var(--dst-bronze); margin: 0 16px 14px; }
.dst-evt-deltas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }

/* Karma panel */
.dst-kr-panel { max-width: 680px !important; padding: 32px 38px !important; }
.dst-kr-close { position: absolute; top: 14px; right: 14px; padding: 6px 12px !important; font-size: 10px !important; }
.dst-kr-axes { display: flex; flex-direction: column; gap: 22px; margin: 18px 0; }
.dst-kr-axis-lbl { font-family:'Orbitron',monospace; font-size:var(--fs-xs); letter-spacing: 2.5px; color: var(--dst-blue); text-align: center; margin-bottom: 6px; text-transform: uppercase; }
.dst-kr-bar { position: relative; height: 8px; background: var(--shade-5); border: 1px solid var(--dst-bronze); border-radius: 1px; }
.dst-kr-bar-zero {
  position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
  background: var(--dst-gold-dim);
}
.dst-kr-bar-marker {
  position: absolute; top: -4px; width: 14px; height: 14px;
  background: var(--dst-gold-bright);
  border: 1px solid var(--dst-gold);
  border-radius: 50%; transform: translateX(-50%);
  box-shadow: 0 0 12px var(--dst-glow);
}
.dst-kr-axis-ends {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family:'Cinzel',serif; font-size:var(--fs-xs); font-style: italic; color: var(--dst-gold-dim);
}
.dst-kr-val { font-family:'Orbitron',monospace; font-style: normal; font-weight: 700; color: var(--dst-gold-bright); letter-spacing: 1px; }
.dst-kr-hist { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; margin-top: 8px; }
.dst-kr-hist-line {
  display: grid; grid-template-columns: 50px 1fr 1fr; gap: 10px; align-items: center;
  padding: 6px 10px; background: rgba(20,16,8,0.6); 
 box-shadow:inset 3px 0 0 0 var(--dst-bronze); }
.dst-kr-hist-chap { font-family:'Orbitron',monospace; font-size: 10px; color: var(--dst-blue); letter-spacing: 1px; }
.dst-kr-hist-title { font-family:'Cinzel',serif; font-size:var(--fs-sm); color: var(--dst-gold-bright); }
.dst-kr-hist-choice { font-family:'Cinzel',serif; font-style: italic; font-size:var(--fs-xs); color: var(--dst-gold); }

/* ════════════════════════════════════════════════════════════════
   PANNEAU RESSOURCES HTML — refonte idle game 26/05
   Remplace les piles 3D au sol. Cartes alignees centre-bas hub.
   ════════════════════════════════════════════════════════════════ */
/* P13 26/05 — Cards COLLECTER refonte holos diegetic.
   Style : sci-fi HUD hologram (Dead Space / Mass Effect omni-tool).
   - bg quasi-transparent → on voit la 3D derrière
   - corner brackets via ::before/::after
   - inner scanlines subtiles
   - glow émissif autour de la card */
.dst-res-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 120px; padding: 10px 8px;
  background:
    linear-gradient(180deg, rgba(20,28,42,0.28) 0%, rgba(10,18,28,0.42) 100%),
    repeating-linear-gradient(0deg, rgba(180,212,255,0.04) 0px, rgba(180,212,255,0.04) 1px, transparent 1px, transparent 3px);
  border: 1px solid rgba(180,212,255,0.18);
  border-radius: 2px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    0 0 14px rgba(120,180,224,0.10),
    inset 0 0 14px rgba(120,180,224,0.06);
  font-family: 'Orbitron', monospace;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  user-select: none;
}
/* Corner brackets HUD — ::before = top-left + top-right, ::after = bottom-left + bottom-right */
.dst-res-card::before,
.dst-res-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 12px; height: 12px;
  border-color: rgba(180,212,255,0.55);
  border-style: solid;
  transition: border-color 0.18s ease;
}
.dst-res-card::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
  box-shadow: 12px 0 0 -11px rgba(180,212,255,0.55), 0 0 0 0 transparent;
}
.dst-res-card::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
  box-shadow: -12px 0 0 -11px rgba(180,212,255,0.55);
}
.dst-res-card:hover {
  transform: translateY(-2px);
  border-color: rgba(180,212,255,0.55);
  background:
    linear-gradient(180deg, rgba(40,58,80,0.35) 0%, rgba(20,32,48,0.50) 100%),
    repeating-linear-gradient(0deg, rgba(180,212,255,0.06) 0px, rgba(180,212,255,0.06) 1px, transparent 1px, transparent 3px);
  box-shadow:
    0 0 24px rgba(180,212,255,0.30),
    0 6px 18px var(--shade-5),
    inset 0 0 20px rgba(180,212,255,0.10);
}
.dst-res-card:hover::before,
.dst-res-card:hover::after { border-color: rgba(220,235,255,0.95); }
/* Stock plein : flicker doré pour signaler urgence */
.dst-res-card-full {
  border-color: rgba(255,212,128,0.65);
  box-shadow:
    0 0 22px rgba(255,212,128,0.40),
    inset 0 0 14px rgba(255,212,128,0.12);
  animation: dstResCardFull 1.6s ease-in-out infinite;
}
.dst-res-card-full::before,
.dst-res-card-full::after { border-color: rgba(255,212,128,0.85); }
@keyframes dstResCardFull {
  0%,100% { box-shadow: 0 0 22px rgba(255,212,128,0.40), inset 0 0 14px rgba(255,212,128,0.12); }
  50%     { box-shadow: 0 0 32px rgba(255,212,128,0.75), inset 0 0 20px rgba(255,212,128,0.22); }
}
.dst-res-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin-bottom: 4px;
}
.dst-res-icon svg { width: 100% !important; height: 100% !important; }
.dst-res-label {
  font-size:var(--fs-xs); letter-spacing: 1px;
  font-weight: 600;
  color: var(--dst-gold-bright);
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 3px var(--shade-7);
}
.dst-res-count {
  font-size: 18px; font-weight: 700;
  color: var(--dst-gold-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.dst-res-cap {
  font-size: 10px; opacity: 0.75;
  font-weight: 400;
  margin-left: 2px;
}
.dst-res-bar {
  width: 100%; height: 4px;
  background: rgba(60,42,18,0.85);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.dst-res-bar-fill {
  height: 100%;
  transition: width 0.5s ease;
}
.dst-res-collect {
  width: 100%;
  padding: 5px 8px;
  background: linear-gradient(180deg, rgba(40,28,14,0.95), rgba(20,14,8,0.98));
  border: 1px solid var(--dst-bronze);
  border-radius: 2px;
  color: var(--dst-gold);
  font-family: 'Orbitron', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dst-res-collect:not(:disabled):hover {
  background: linear-gradient(180deg, var(--dst-gold), var(--dst-bronze));
  color: #0a0804;
  box-shadow: 0 0 14px rgba(212,180,131,0.45);
}
.dst-res-collect:disabled {
  opacity: 0.35; cursor: not-allowed;
}
@media (max-width: 1100px) {
  .dst-res-card { width: 100px; padding: 8px 6px; }
  .dst-res-icon { width: 30px; height: 30px; }
  .dst-res-label { font-size: 8px; }
  .dst-res-count { font-size:var(--fs-md); }
}

/* ════════════════════════════════════════════════
   P1 audit fixes 26/05 — readability + confirmations
   ════════════════════════════════════════════════ */

/* P1.3 — Body explainers : Cinzel rend tout en faux small-caps illisible
   sur des paragraphes longs. Sans-serif système pour le body, Cinzel
   reste sur les titres + 1-liners. */
.dst-room-lore,
.dst-room-explain,
.dst-win-sub,
.dst-sig-explain,
.dst-stones-desc,
.dst-stones-active .dst-stones-desc,
.dst-stones-cooldown .dst-stones-desc {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  letter-spacing: 0.01em !important;
  font-style: normal !important;
  color: var(--dst-gold) !important;
}
.dst-room-lore i, .dst-room-explain i, .dst-win-sub i {
  font-style: italic;
  color: var(--dst-gold-dim);
}
.dst-room-lore b, .dst-room-explain b, .dst-win-sub b, .dst-sig-explain b {
  color: var(--dst-gold-bright);
  font-weight: 600;
}

/* P1.5a — Cards COLLECTER disabled : grise + dotted border + label inactif */
.dst-res-card:has(.dst-res-collect:disabled) {
  opacity: 0.42 !important;
  filter: grayscale(0.55);
  border-style: dashed !important;
  border-color: rgba(180,212,255,0.10) !important;
  box-shadow: none !important;
}
.dst-res-card:has(.dst-res-collect:disabled)::before,
.dst-res-card:has(.dst-res-collect:disabled)::after {
  border-color: rgba(180,212,255,0.18) !important;
}
.dst-res-card:has(.dst-res-collect:disabled) .dst-res-collect {
  background: transparent !important;
  border: 1px dashed rgba(180,212,255,0.18) !important;
  color: rgba(180,212,255,0.35) !important;
  cursor: not-allowed !important;
}

/* P1.5b — Phase badge sur mobile : compacter pour ne pas chevaucher DESTINEE
   Fix audit 28/05 : bottom:168 chevauche les resource cards (cards bottom:78 +
   h=133 → top 211). Repositionne en haut sous le header DESTINEE (top:80) où
   l'espace est libre. */
@media (max-width: 600px) {
  #destinyHubPhaseBadge {
    top: 80px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px);
    text-align: center;
  }
}

/* P1.1 — Modal confirmation pour actions destructives (Pierre swap / AMELIORER) */
.dst-confirm-pop {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(2, 4, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1; /* base : visible immédiatement (animation paused-friendly) */
}
/* Fade-in seulement si motion OK (sinon apparition instantanée robuste) */
@media (prefers-reduced-motion: no-preference) {
  .dst-confirm-pop {
    animation: dstConfirmFade 180ms ease-out;
  }
}
@keyframes dstConfirmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dst-confirm-box {
  max-width: 440px;
  width: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(28,22,14,0.98), rgba(12,10,6,0.99));
  border: 1px solid var(--dst-gold);
  border-radius: 2px;
  padding: 22px 24px;
  box-shadow: 0 18px 48px var(--shade-6), 0 0 32px rgba(212,180,131,0.25);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.dst-confirm-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--dst-gold-bright);
  margin-bottom: 12px;
  text-align: center;
}
.dst-confirm-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dst-gold);
  margin-bottom: 18px;
}
.dst-confirm-body b { color: var(--dst-gold-bright); font-weight: 600; }
.dst-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.dst-confirm-cancel { padding: 8px 16px !important; }

/* ════════════════════════════════════════════════════════════════════
   Audit 28/05/2026 — Vague 2 UI/UX
   ════════════════════════════════════════════════════════════════════ */

/* C3 — Accessibilité clavier : focus-visible sur tous les interactifs Destiny.
   Y1 audit 28/05 : étendu aux chips (journal/crew/stones-scope) + boutons heal-now. */
.dst-btn:focus-visible,
.dst-arch-card:focus-visible,
.dst-dock-btn:focus-visible,
.dst-crew-card:focus-visible,
.dst-stones-hero:focus-visible,
.dst-win-mission:focus-visible,
.dst-lab-card:focus-visible,
.dst-res-card:focus-visible,
.dst-choice-btn:focus-visible,
.dst-journal-chip:focus-visible,
.dst-crew-chip:focus-visible,
.dst-crew-heal-now:focus-visible,
.dst-evt-choice:focus-visible,
.dst-pnl-tab:focus-visible,
.dst-win-spec:focus-visible {
  outline: 2px solid var(--dst-gold-bright);
  outline-offset: 2px;
}

/* D9 polish — press-feedback sur cards (au-delà de .dst-btn:active déjà géré) */
.dst-arch-card:active,
.dst-crew-card:active,
.dst-stones-hero:active,
.dst-win-mission:active,
.dst-lab-card:active,
.dst-res-card:active {
  transform: scale(0.98);
  transition: transform 60ms ease;
}

/* D4 — Breakpoint mid-tier (iPhone SE 1, 12 Pro 414, iPhone 13 mini 375 portrait).
   Hérite du @max-width:600px ; resserre encore typographie + paddings. */
@media (max-width: 480px) {
  .dst-modal-body { padding: 14px 12px !important; }
  .dst-modal-header h2 { font-size: 14px !important; letter-spacing: 2px; }
  .dst-modal-header .dst-modal-subtitle,
  .dst-modal-header .dst-modal-sub { font-size: 10.5px !important; }
  /* D6 — crew portraits plus petits */
  .dst-crew-portrait { width: 64px; height: 64px; }
  .dst-crew-name { font-size:var(--fs-base); }
  .dst-crew-card { padding: 10px; }
  /* D3 — dock label en dessous du seuil retina : masqué */
  .dst-dock-label { display: none !important; }
  /* D2 — Hero gate banner moins haut */
  .dst-win-hero { height: min(180px, 28vh); }
  /* Stones grid : 1 col sur très petit */
  .dst-stones-grid { grid-template-columns: 1fr; }
  /* Karma bars : labels plus compacts */
  .dst-karma-axis { padding: 8px; }
  .dst-karma-axis-label { font-size:var(--fs-xs); }
}

/* D5 — Landscape phone (iPhone 13 landscape 812×375, iPad portrait gain de hauteur).
   Hauteur viewport < 600px : padding ↓ pour éviter scroll vertical sur drawers. */
@media (max-height: 600px) {
  .dst-modal-body { padding: 14px 18px !important; max-height: 95vh; overflow-y: auto; }
  .dst-win-hero { height: min(160px, 35vh); }
  .dst-modal-header { padding: 10px 16px !important; }
  /* Cinematic overlay : texte plus petit sur faible hauteur */
  .dst-stones-cine-text,
  .dst-sig-cine-text { font-size: 24px !important; letter-spacing: 8px !important; }
  /* Dock plus bas + override animation (sinon opacity:0 stuck en landscape iPhone,
     même trap que @max-width:600px portrait — cf lesson_css_animation_fill_mode_both_opacity_0). */
  #destinyHubDock {
    bottom: 8px !important;
    padding: 5px 10px !important;
    animation: none !important;
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
  }
  .dst-dock-btn { animation: none !important; opacity: 1 !important; }
}

/* D11 helper — orientation change déjà géré côté JS via matchMedia(). */

/* B1/B2 audit 28/05 — chip scope (Destiny only / Global) sur stones + lab */
.dst-stones-scope-chip {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius:var(--radius);
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.dst-scope-destiny {
  background: rgba(95, 180, 212, 0.12);
  border: 1px solid rgba(95, 180, 212, 0.45);
  color: #8ecae6;
}
.dst-scope-global {
  background: rgba(212, 180, 131, 0.18);
  border: 1px solid var(--dst-gold-bright);
  color: var(--dst-gold-bright);
  text-shadow: 0 0 6px rgba(212,180,131,0.4);
}

/* C1 audit 28/05 — host overlay (anciennement h.style.cssText dans hub.js).
   Extrait en classe pour permettre override responsive via media queries. */
.dst-hub-host {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  overflow: hidden;
}

/* D10 audit 28/05 — scroll cue chevron sur resource cards mobile @<600px.
   Élément séparé `#destinyResScrollCue` injecté par JS, position:fixed à droite.
   Masqué quand panel scrollé en bout (.dst-res-cue-hide). */
#destinyResScrollCue {
  display: none;
  position: fixed;
  right: 4px;
  z-index: 8;
  color: var(--dst-gold-bright);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
  background: radial-gradient(ellipse at center, rgba(20,16,8,0.7) 0%, transparent 70%);
  text-shadow: 0 0 12px var(--dst-gold-bright), 0 0 4px rgba(0,0,0,0.9);
  pointer-events: none;
  animation: dstResScrollCue 1.4s ease-in-out infinite;
  user-select: none;
}
#destinyResScrollCue.dst-res-cue-hide { display: none !important; }
@media (max-width: 600px) {
  #destinyResScrollCue { display: block; }
}
@keyframes dstResScrollCue {
  0%,100% { transform: translateX(0); opacity: 0.85; }
  50%     { transform: translateX(5px); opacity: 1; }
}

/* C7 audit 28/05 — chips d'affectation crew (remplace <select> natif iOS/Android).
   Layout flex-wrap : auto-fit 2-4 par ligne selon largeur. Active = doré.
   ★ best_room = badge inline. ✕ Aucune = chip clear séparé. */
.dst-crew-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.dst-crew-chip {
  flex: 0 1 auto;
  padding: 4px 9px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dst-gold-dim);
  background: rgba(20, 16, 8, 0.7);
  border: 1px solid rgba(212, 180, 131, 0.25);
  border-radius:var(--radius-lg);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
  user-select: none;
}
.dst-crew-chip:hover:not(:disabled) {
  border-color: var(--dst-gold-bright);
  color: var(--dst-gold-bright);
}
.dst-crew-chip:active:not(:disabled) {
  transform: scale(0.96);
}
.dst-crew-chip-active {
  background: linear-gradient(180deg, rgba(212, 180, 131, 0.32), rgba(180, 140, 80, 0.22));
  border-color: var(--dst-gold-bright);
  color: #0a0804;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(212, 180, 131, 0.45);
}
.dst-crew-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dst-crew-chip-star {
  margin-left: 4px;
  color: #f0d9a8;
  font-size:var(--fs-xs);
  text-shadow: 0 0 4px rgba(240, 217, 168, 0.7);
}
.dst-crew-chip-clear {
  margin-left: 6px;
  border-color: rgba(212, 100, 100, 0.4);
  color: #d48383;
}
.dst-crew-chip-clear:hover:not(:disabled) {
  border-color: #d46060;
  color: #ff9090;
}

/* Audit 28/05 — bouton "Soigner maintenant" (50 Medikits) sur card crew blessé.
   Évite l'orphan currency Medikits — l'Infirmerie a maintenant une utilité. */
.dst-crew-heal-now {
  display: block;
  margin-top: 6px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(224, 138, 138, 0.18), rgba(80, 30, 30, 0.4));
  border: 1px solid #e08a8a;
  border-radius: 3px;
  color: #ffb0b0;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}
.dst-crew-heal-now:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(224, 138, 138, 0.32), rgba(120, 50, 50, 0.5));
  color: #fff;
  box-shadow: 0 0 12px rgba(224, 138, 138, 0.45);
}
.dst-crew-heal-now:active:not(:disabled) { transform: scale(0.97); }
.dst-crew-heal-now:disabled { opacity: 0.5; cursor: not-allowed; }

/* C8 audit 28/05 — banner persistant Pierres : push au-dessus du dock + safe-area.
   Default desktop : bottom:0 (pas de dock à esquiver). @<900px : remonté à 72px
   pour ne pas chevaucher le dock (~56px+gap). iPhone home indicator : safe-area. */
.dst-stones-active-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(50,38,18,0.95) 0%, rgba(20,14,8,0.96) 100%);
  border-top: 1px solid var(--dst-gold);
  color: var(--dst-gold-bright);
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  text-align: center;
  padding: 6px 16px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  /* 09/06 — report Lord Varro : à z:9999 le bandeau passait AU-DESSUS des modales
     (offline report #offlineModal z:9250 + son bouton « REPRENDRE LE COMMANDEMENT » ;
     registre des modales 9000-9990) → bouton intapable sur mobile, le bandeau couvrait
     le bas du backdrop. Descendu SOUS toutes les modales : reste visible en jeu normal,
     s'efface dès qu'une modale/feuille s'ouvre (qui prend alors tout le bas). */
  z-index: 8900;
  box-shadow: 0 -4px 20px var(--shade-6);
}
@media (max-width: 900px) {
  .dst-stones-active-banner {
    bottom: 72px; /* au-dessus du dock compact */
    font-size: 11.5px;
    padding: 5px 10px;
  }
}
@media (max-width: 600px) {
  .dst-stones-active-banner {
    bottom: 64px; /* dock ultra-compact à bottom:12 + h~42 */
  }
}
/* 31/05 — Pierre active : réserve la hauteur du bandeau pour ne pas masquer les
   boutons du jeu (ex. METTRE EN FILE). .app est un grid height:100dvh → padding
   bottom rétrécit la zone scrollable, le bandeau fixe occupe la bande libérée. */
body.dst-stone-banner-on .app { padding-bottom: 46px; box-sizing: border-box; }


.dst-confirm-ok { padding: 8px 18px !important; }

/* ════════════════════════════════════════════════════════════════════
   Audit UI/UX polish 28/05/2026 — T4 + L4 + L3 inner ellipsis + spinner
   ════════════════════════════════════════════════════════════════════ */

/* T4 audit 28/05 — clamp crew bio + stones hero desc (sinon longue bio désaligne grid) */
.dst-crew-bio {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dst-stones-hero-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* L4 audit 28/05 — runes décoratives `width:14px` ne scalent pas en mobile.
   Sur ≤600px on les cache pour éviter de bouffer 28px de padding latéral. */
@media (max-width: 600px) {
  .dst-modal-body::before,
  .dst-modal-body::after { display: none; }
}

/* L3 audit 28/05 — phase badge contient un inner div flex avec span enfants ;
   le ellipsis ne s'applique pas aux spans → force min-width:0 + overflow sur inner. */
#destinyHubPhaseBadge > div {
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}
#destinyHubPhaseBadge > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* E1 audit 28/05 — loading spinner animé (journal + autres async panels) */
.dst-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 12px;
  color: var(--dst-gold-dim);
  font-size:var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Orbitron', monospace;
}
.dst-loading-spinner::before {
  content: '';
  width: 36px;
  height: 36px;
  border: 2px solid rgba(212,180,131,0.18);
  border-top-color: var(--dst-gold-bright);
  border-radius: 50%;
  animation: dstSpinnerSpin 900ms linear infinite;
  box-shadow: 0 0 12px rgba(212,180,131,0.3);
}
@keyframes dstSpinnerSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dst-loading-spinner::before { animation: none; }
}

/* A4 audit 28/05 — fade subtle pour filter switch journal */
.dst-journal-list { transition: opacity 120ms ease; }
.dst-journal-list.dst-journal-list-fading { opacity: 0.3; }

/* C3 audit 28/05 — resource cards utilisent --res-color (CSS var) au lieu de gradient inline */
.dst-res-card { --res-color: var(--dst-gold-bright); } /* fallback safe */
.dst-res-icon-tinted {
  color: var(--res-color);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--res-color) 40%, transparent));
}
.dst-res-count-tinted { color: var(--res-color); }
.dst-res-bar-fill-tinted {
  background: linear-gradient(90deg, color-mix(in srgb, var(--res-color) 70%, transparent), var(--res-color));
}

/* Illus 28/05 — resource cards Soldats/Navettes/Tourelles avec illustration de fond.
   Background-image set via inline style depuis JS. Border doré + hauteur plus généreuse
   pour donner du poids visuel à l'unité Ancienne. */
.dst-res-card-illus {
  border-color: var(--dst-bronze) !important;
  height: auto;
  min-height: 180px;
  justify-content: flex-end;
  background-color: rgba(8,6,4,0.5) !important;
  box-shadow: 0 0 16px rgba(212,180,131,0.18), inset 0 0 14px var(--shade-3) !important;
  /* Padding bottom léger pour aérer le compteur + COLLECTER de l'image */
  padding-top: 4px;
  padding-bottom: 10px;
}
.dst-res-card-illus:hover {
  border-color: var(--dst-gold-bright) !important;
  box-shadow: 0 0 22px rgba(212,180,131,0.45), inset 0 0 14px var(--shade-3) !important;
}
.dst-res-card-illus .dst-res-icon-tinted {
  /* Hide emoji icon — l'illustration suffit (user feedback 28/05) */
  display: none;
}
.dst-res-card-illus .dst-res-label {
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.dst-res-card-illus .dst-res-count-tinted {
  text-shadow: 0 0 8px var(--res-color), 0 1px 3px rgba(0,0,0,0.9);
}

/* Ligne "Sert à" sous la barre — indique au joueur l'utilité de la ressource */
.dst-res-usage {
  font-family: 'Orbitron', monospace;
  font-size: 9.5px;
  letter-spacing: 0.4px;
  color: var(--dst-gold);
  text-align: center;
  margin: 4px 0 6px;
  opacity: 0.95;
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 1px 3px var(--shade-7);
}
.dst-res-card-illus .dst-res-usage {
  color: var(--dst-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  opacity: 0.95;
}

/* Hero banner illustration en haut des panels Destiny (stones, lab, etc.) */
.dst-panel-hero {
  position: relative;
  width: calc(100% + 48px);
  margin: -24px -24px 18px;
  height: 200px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--dst-bronze);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  box-sizing: border-box;
}
.dst-panel-hero-overlay {
  position: relative;
  z-index: 2;
  text-align: left;
}
.dst-panel-hero .dst-h2 {
  color: var(--dst-gold-bright);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.dst-panel-hero .dst-h1 {
  color: var(--dst-gold-bright);
  text-shadow: 0 0 16px rgba(212,180,131,0.6), 0 2px 8px rgba(0,0,0,0.9);
  margin: 4px 0 0;
}
@media (max-width: 600px) {
  .dst-panel-hero {
    height: 140px;
    margin: -18px -18px 14px;
    width: calc(100% + 36px);
    padding: 18px;
  }
}