/* sgc-effects.css — Visual polish & sci-fi FX overlay
   Pure additive layer — no existing file modified */

/* ===== A. Hover glow on interactive cards ===== */
.unit-card,
.ship-card,
.tc-card.tc-avail,
.pog-bld-row {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.unit-card:hover,
.ship-card:hover,
.tc-card.tc-avail:hover,
.pog-bld-row:hover {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45), 0 0 40px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.6);
}

/* ===== B. Scanlines overlay on main panels ===== */
.pog-content,
.tr-panel,
.tr-center {
  position: relative;
}
.pog-content::after,
.tr-panel::after,
.tr-center::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(180, 220, 255, 0.06) 2px,
    rgba(180, 220, 255, 0.06) 3px
  );
  z-index: 999;
  border-radius: inherit;
}

/* ===== C. Neon text-shadow on section titles ===== */
.pog-section-title,
.tr-section-lbl,
.trc-header,
.tpb-title,
.sf-name {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7), 0 0 25px rgba(var(--accent-rgb), 0.3);
}

/* ===== D. Progress bar glow during construction ===== */
.bld-prog-fill {
  box-shadow: 0 0 8px var(--warn), 0 0 20px rgba(240, 160, 48, 0.5);
  animation: progGlow 1.8s ease-in-out infinite;
}
@keyframes progGlow {
  0%, 100% { box-shadow: 0 0 8px var(--warn), 0 0 20px rgba(240, 160, 48, 0.5); }
  50%      { box-shadow: 0 0 14px var(--warn), 0 0 35px rgba(240, 160, 48, 0.7); }
}

/* ===== E. Notification & alert effects — REDESIGN ===== */
.notif-toast {
  --nt-col: var(--accent);
  --nt-rgb: var(--accent-rgb);
  display:flex; align-items:center; gap:14px; position:relative; overflow:hidden;
  padding:12px 18px 12px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(var(--nt-rgb), 0.45) !important;
  
  background:
    linear-gradient(135deg,
      rgba(var(--nt-rgb), 0.18) 0%,
      rgba(8, 12, 22, 0.92) 35%,
      rgba(0, 0, 0, 0.96) 100%) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    inset 3px 0 0 0 var(--nt-col) !important, 0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(var(--nt-rgb), 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: toastIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  min-width:280px;
  font-family:var(--font-mono) !important;
  letter-spacing:0.5px !important;
  color:var(--textbright) !important;
  will-change:transform, opacity;
  transform:translateZ(0);
}
/* Fix 31/05 : sans backdrop-filter (perf-medium/lowfx auto sur mobile, ou navigateur
   sans support), la zone gauche du toast (tint 0.18 alpha) laissait transparaître
   l'arrière-plan → texte illisible ("bleed-through", signalé en prod). On force alors
   un fond opaque ; le glassmorphism (blur) reste sur les appareils capables. */
.perf-medium .notif-toast,
.lowfx .notif-toast {
  background:
    linear-gradient(135deg,
      rgba(var(--nt-rgb), 0.22) 0%,
      rgba(8, 12, 22, 0.97) 30%,
      rgba(0, 0, 0, 0.98) 100%),
    rgba(8, 12, 22, 0.98) !important;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .notif-toast {
    background:
      linear-gradient(135deg,
        rgba(var(--nt-rgb), 0.22) 0%,
        rgba(8, 12, 22, 0.97) 30%,
        rgba(0, 0, 0, 0.98) 100%),
      rgba(8, 12, 22, 0.98) !important;
  }
}
.notif-toast::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(var(--nt-rgb), 0.85) 50%, transparent 100%);
  animation: toastTopPulse 2s ease-in-out infinite;
}
@keyframes toastTopPulse {
  0%, 100% { opacity:0.4; transform:scaleX(0.6); }
  50%      { opacity:1;   transform:scaleX(1); }
}
.nt-ico-wrap {
  flex-shrink:0;
  width:38px; height:38px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(var(--nt-rgb), 0.35) 0%,
      rgba(var(--nt-rgb), 0.08) 100%);
  border:1px solid rgba(var(--nt-rgb), 0.4);
  box-shadow:
    inset 0 0 12px rgba(var(--nt-rgb), 0.25),
    0 0 14px rgba(var(--nt-rgb), 0.35);
  animation: ntIcoGlow 2.4s ease-in-out infinite;
}
.nt-ico {
  font-size:18px; line-height:1;
  color:var(--nt-col);
  filter: drop-shadow(0 0 6px var(--nt-col));
}
.nt-ico svg { width:20px; height:20px; }
@keyframes ntIcoGlow {
  0%, 100% { box-shadow: inset 0 0 12px rgba(var(--nt-rgb), 0.25), 0 0 14px rgba(var(--nt-rgb), 0.35); }
  50%      { box-shadow: inset 0 0 16px rgba(var(--nt-rgb), 0.40), 0 0 22px rgba(var(--nt-rgb), 0.55); }
}
.nt-msg {
  flex:1; line-height:1.45;
  font-size:var(--fs-base); font-weight:500;
  font-family:var(--font-mono);
}
.nt-msg svg { vertical-align:-3px; }
.nt-msg small {
  display:block; margin-top:3px;
  font-size:var(--fs-xs); opacity:0.78;
  letter-spacing:0.3px;
}
.nt-msg b { font-family:var(--font-display); font-weight:700; letter-spacing:0.5px; }
/* Portrait commandant ou unité dans le message */
.nt-cmd-portrait,
.nt-unit-portrait {
  display:inline-block;
  width:26px; height:26px;
  border-radius:6px;
  object-fit:cover;
  vertical-align:-9px;
  margin-right:6px;
  border:1px solid rgba(var(--nt-rgb), 0.55);
  box-shadow:0 0 8px rgba(var(--nt-rgb), 0.5);
}
.nt-cmd-portrait { border-radius:50%; }
.nt-msg img.res-ico { vertical-align:-4px; }
/* Icône-image : illustration d'unité dans le slot icône du toast (au lieu d'un portrait
   inline minuscule et décalé). Plus grande (46px) et centrée verticalement comme l'icône. 31/05. */
.nt-ico-wrap.nt-ico-img { width:46px !important; height:46px !important; padding:0 !important; overflow:hidden; }
.nt-ico-wrap.nt-ico-img .nt-ico { display:block; width:100%; height:100%; filter:none; }
.nt-ico-pic { display:block; width:100%; height:100%; object-fit:cover; border-radius:9px; }
.nt-timer {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--nt-col), rgba(var(--nt-rgb), 0.4));
  opacity:0.85; transform-origin:left;
  animation:ntTimer 5s linear forwards;
}
@keyframes ntTimer { from{transform:scaleX(1)} to{transform:scaleX(0)} }
.notif-toast.nt-exit {
  animation: toastOut 0.4s cubic-bezier(0.55, 0, 0.55, 1) forwards;
}
@keyframes toastIn {
  0%   { opacity:0; transform:translate3d(0,-12px,0) scale(0.94); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes toastOut {
  0%   { opacity:1; transform:translate3d(0,0,0) scale(1); }
  100% { opacity:0; transform:translate3d(60px,0,0) scale(0.85); }
}

/* Variantes par type — couleurs sémantiques */
.notif-toast.nt-success { --nt-col:#6cffaa; --nt-rgb:108, 255, 170; }
.notif-toast.nt-info    { --nt-col:#6ad9ff; --nt-rgb:106, 217, 255; }
.notif-toast.nt-warn    { --nt-col:#ffb44a; --nt-rgb:255, 180, 74; }
.notif-toast.nt-danger  { --nt-col:#ff7575; --nt-rgb:255, 117, 117; }
.notif-toast.nt-info .nt-msg { color:#dff3ff; }
.notif-toast.nt-success .nt-msg { color:#dcffe9; }

/* Bloc "completion" : icône bouge légèrement à l'apparition (build/research/recruit) */
.notif-toast.nt-success .nt-ico-wrap {
  animation: ntIcoGlow 2.4s ease-in-out infinite, ntCompletePop 0.6s cubic-bezier(0.16, 1.3, 0.3, 1);
}
@keyframes ntCompletePop {
  0%   { transform:scale(0.6) rotate(-12deg); }
  60%  { transform:scale(1.15) rotate(8deg); }
  100% { transform:scale(1) rotate(0); }
}

.def-alert-bar {
  animation: alertPulse 1.5s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 60, 60, 0.4); }
  50%      { box-shadow: 0 0 25px rgba(255, 60, 60, 0.7); }
}

/* ===== F. Loading spinner ===== */
@keyframes sgcSpin {
  to { transform: rotate(360deg); }
}
.sgc-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sgcSpin 0.8s linear infinite;
}

/* ===== G. Min font-size bumps (8-10px → 11px) ===== */
.cdx-tab,
.cdx-back,
.cdx-rarity-badge,
.art-discovery-btn {
  font-size: max(11px, inherit);
}

/* ===== K. ARTIFACT section — bigger fonts & stronger effects ===== */

/* Titles & labels bumped up */
.art-bonus-summary .art-bonus-summary-title { font-size:var(--fs-md); letter-spacing: 2px; text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); }
.art-progress .art-progress-lbl        { font-size:var(--fs-md); letter-spacing: 2px; }
.cdx-wrap .art-rarity-badge        { font-size:var(--fs-md); padding: 4px 12px; }
.cdx-wrap .art-bonus-tag           { font-size:var(--fs-md); padding: 6px 14px; }
.art-discovery-popup .art-discovery-btn       { font-size:var(--fs-md); padding: 12px 28px; }
.art-discovery-popup .art-discovery-title     { font-size: 18px; letter-spacing: 10px; }
.art-discovery-popup .art-discovery-name      { font-size: 24px; }
.art-discovery-popup .art-discovery-rarity    { font-size:var(--fs-lg); }
.art-discovery-popup .art-discovery-fx        { font-size:var(--fs-md); }

/* Codex cards — bigger text */
.cdx-card .cdx-card-icon { font-size: 36px; margin-bottom: 10px; }
.cdx-card .cdx-card-name { font-size:var(--fs-lg); }
.cdx-card .cdx-card-sub  { font-size:var(--fs-md); }
.cdx-wrap .cdx-tab       { font-size:var(--fs-md); padding: 14px 20px; }
.cdx-wrap .cdx-back      { font-size:var(--fs-md); }
.cdx-wrap .cdx-title     { font-size:var(--fs-2xl); }

/* Progress bar — thicker + glow */
.art-progress .art-progress-bar {
  height: 10px;
  border-radius: 5px;
}
.art-progress .art-progress-fill {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), 0 0 30px rgba(var(--accent-rgb), 0.3);
}

/* Bonus summary — stronger border glow */
.cdx-wrap .art-bonus-summary {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.12), inset 0 0 30px rgba(var(--accent-rgb), 0.04);
}

/* ===== L. Rarity Accordion (collapsible) ===== */
.art-accordion {
  margin-bottom: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius:var(--radius-md);
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.02);
}
.art-accordion-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s;
  border-bottom: 1px solid transparent;
}
.art-accordion-hdr:hover {
  background: rgba(var(--accent-rgb), 0.06);
}
.art-accordion-arrow {
  font-size:var(--fs-md);
  transition: transform 0.3s ease;
  opacity: 0.5;
}
.art-acc-open > .art-accordion-hdr .art-accordion-arrow {
  transform: rotate(90deg);
}
.art-accordion-count {
  margin-left: auto;
  font-family:var(--font-mono);
  font-size:var(--fs-md);
  opacity: 0.6;
  letter-spacing: 1px;
}
.art-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.art-acc-open > .art-accordion-body {
  max-height: 2000px;
}
.art-accordion-body > .cdx-grid {
  padding: 12px 14px 16px;
}

/* Rarity-colored left border on accordion */
.art-accordion[data-rarity="common"]   {   box-shadow:inset 3px 0 0 0 rgba(124,201,124,0.5); }
.art-accordion[data-rarity="rare"]     {   box-shadow:inset 3px 0 0 0 rgba(110,170,255,0.5); }
.art-accordion[data-rarity="legendary"]{   box-shadow:inset 3px 0 0 0 rgba(255,187,51,0.5); }
.art-accordion[data-rarity="ancient"]  {   box-shadow:inset 3px 0 0 0 rgba(0,229,255,0.5); }

/* Header text glow by rarity */
.art-accordion-hdr.art-rarity-common    { color: #7cc97c; text-shadow: 0 0 12px rgba(124,201,124,0.5); }
.art-accordion-hdr.art-rarity-rare      { color: #6eaaff; text-shadow: 0 0 12px rgba(110,170,255,0.5); }
.art-accordion-hdr.art-rarity-legendary { color: #ffbb33; text-shadow: 0 0 14px rgba(255,187,51,0.5); }
.art-accordion-hdr.art-rarity-ancient   { color: var(--ancient); text-shadow: 0 0 14px rgba(0,229,255,0.6); }

/* Open state — glow border */
.art-acc-open.art-accordion[data-rarity="common"]   { box-shadow: 0 0 15px rgba(124,201,124,0.12); }
.art-acc-open.art-accordion[data-rarity="rare"]     { box-shadow: 0 0 15px rgba(110,170,255,0.12); }
.art-acc-open.art-accordion[data-rarity="legendary"]{ box-shadow: 0 0 15px rgba(255,187,51,0.15); }
.art-acc-open.art-accordion[data-rarity="ancient"]  { box-shadow: 0 0 18px rgba(0,229,255,0.15); }

/* Rarity cards — stronger hover glow */
.cdx-card[data-rarity="common"]:hover  { box-shadow: 0 0 20px rgba(124,201,124,0.3), 0 4px 20px rgba(124,201,124,0.15); }
.cdx-card[data-rarity="rare"]:hover    { box-shadow: 0 0 20px rgba(110,170,255,0.35), 0 4px 20px rgba(110,170,255,0.18); }
.cdx-card[data-rarity="legendary"]:hover { box-shadow: 0 0 25px rgba(255,187,51,0.4), 0 4px 20px rgba(255,187,51,0.2); }
.cdx-card[data-rarity="ancient"]:hover { box-shadow: 0 0 25px rgba(0,229,255,0.4), 0 4px 20px rgba(0,229,255,0.2); }

/* Rarity left accent bar — thicker + glow */
.cdx-card[data-rarity]::after { width: 4px; opacity: 0.85; }
.cdx-card[data-rarity="common"]::after  { box-shadow: 0 0 8px rgba(124,201,124,0.4); }
.cdx-card[data-rarity="rare"]::after    { box-shadow: 0 0 8px rgba(110,170,255,0.4); }
.cdx-card[data-rarity="legendary"]::after { box-shadow: 0 0 8px rgba(255,187,51,0.5); }
.cdx-card[data-rarity="ancient"]::after { box-shadow: 0 0 10px rgba(0,229,255,0.5); }

/* Discovery popup — stronger glow ring */
.art-discovery-popup[data-rarity] {
  box-shadow: 0 0 80px rgba(var(--accent-rgb), 0.15), 0 0 160px color-mix(in srgb, var(--art-color) 30%, transparent);
}
.art-discovery-popup .art-discovery-glow {
  border-width: 3px;
  opacity: 0.7;
}

/* Codex detail overlay — bigger fonts */
.cdx-detail .cdx-detail-icon  { font-size: 52px; }
.cdx-detail .cdx-detail-name  { font-size: 18px; }
.cdx-detail .cdx-detail-sub   { font-size:var(--fs-md); }
.cdx-detail .cdx-detail-row   { font-size:var(--fs-lg); }
.cdx-detail .cdx-detail-desc  { font-size:var(--fs-lg); }
.cdx-detail .cdx-detail-close { font-size:var(--fs-md); }

/* ===== M. Section accordion — bigger titles ===== */
.section-accordion.section-accordion {
  font-size: 16px;
  letter-spacing: 2px;
  padding: 14px 18px;
}
.section-accordion.section-accordion .chevron {
  font-size: 18px;
}

/* ===== H. Active state press feedback ===== */
.pog-bld-btn:active,
.uc-train:active,
.sc-build:active,
.tc-btn:active {
  transform: scale(0.95);
  transition: transform 0.08s ease;
}

/* ===== I. Ambient glow on accent borders ===== */
.pog-section-title {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
  padding-bottom: 4px;
}

/* ===== J. Button hover glow ===== */
.pog-bld-btn:hover,
.uc-train:hover,
.sc-build:hover,
.tc-btn:hover {
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.2);
  filter: brightness(1.15);
}

/* ===== N. Resource image icons ===== */
.rb-ico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 4px var(--tint-10));
  margin-right: 1px;
}
.rp-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 4px var(--tint-10));
}
img.res-ico {
  vertical-align: middle;
  object-fit: contain;
  margin-right: 3px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
}
/* Per-resource colored glows on icons */
img.res-ico.metal  { filter: drop-shadow(0 0 5px rgba(91,141,217,0.6)) drop-shadow(0 0 10px rgba(91,141,217,0.25)); }
img.res-ico.naq    { filter: drop-shadow(0 0 5px rgba(240,192,64,0.6)) drop-shadow(0 0 10px rgba(240,192,64,0.25)); }
img.res-ico.naqria { filter: drop-shadow(0 0 5px rgba(72,202,228,0.6)) drop-shadow(0 0 10px rgba(72,202,228,0.25)); }
img.res-ico.energy { filter: drop-shadow(0 0 5px rgba(240,192,64,0.6)) drop-shadow(0 0 10px rgba(240,192,64,0.25)); }
img.res-ico.pop    { filter: drop-shadow(0 0 5px rgba(46,204,136,0.6)) drop-shadow(0 0 10px rgba(46,204,136,0.25)); }

/* Resource value text next to icons — enhanced visibility */
.bld-cost-item       { font-weight:700; font-size:var(--fs-md); color:var(--textbright); }
.bld-stat-badge-label img.res-ico { width:18px; height:18px; }
.tc-cost img.res-ico  { width:14px; height:14px; }
.res-tech-cost img.res-ico { width:14px; height:14px; }

/* Resource-colored text for inline values */
span.metal, .metal > span  { color:#7ab3ff; text-shadow:0 0 6px rgba(91,141,217,0.3); font-weight:700; }
span.naq, .naq > span      { color:#f0c040; text-shadow:0 0 6px rgba(212,146,10,0.3); font-weight:700; }
span.naqria, .naqria > span { color:#5ee8ff; text-shadow:0 0 6px rgba(72,202,228,0.3); font-weight:700; }

/* Notification toasts — allow img inside */
.notif-toast img.res-ico { width:16px; height:16px; vertical-align:-3px; }

/* Topbar resource items — alignment */
.rb-lbl { display: inline-flex; align-items: center; line-height: 1; }

/* ===== O. Resource storage warnings ===== */
/* Right-panel bar: amber glow when >90%, red pulse when full */
.rp-bar-fill.res-warn {
  background: linear-gradient(90deg, rgba(var(--rc-rgb,var(--accent-rgb)),0.6), #f0a030);
  box-shadow: 0 0 8px rgba(240,160,48,0.6), 0 0 16px rgba(240,160,48,0.2);
}
.rp-bar-fill.res-full {
  background: linear-gradient(90deg, #cc3030, #ff5555);
  box-shadow: 0 0 10px rgba(255,60,60,0.7), 0 0 24px rgba(255,60,60,0.3);
  animation: resFullPulse 1.8s ease-in-out infinite;
}
/* Right-panel card warnings */
.rp-res-card:has(.res-warn) { border-color: rgba(240,160,48,0.35); }
.rp-res-card:has(.res-full) { border-color: rgba(255,60,60,0.4); animation: rpCardFullPulse 2s ease-in-out infinite; }
@keyframes rpCardFullPulse {
  0%, 100% { box-shadow: inset 0 0 6px rgba(255,60,60,0.05), 0 0 4px rgba(255,60,60,0.1); }
  50%      { box-shadow: inset 0 0 12px rgba(255,60,60,0.12), 0 0 10px rgba(255,60,60,0.2); }
}
@keyframes resFullPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,60,60,0.5), 0 0 16px rgba(255,60,60,0.15); }
  50%      { box-shadow: 0 0 14px rgba(255,60,60,0.9), 0 0 30px rgba(255,60,60,0.35); }
}
/* Topbar item: subtle border glow when approaching max */
.rb-item.res-warn {
  border-color: rgba(240,160,48,0.5);
  box-shadow: inset 0 0 8px rgba(240,160,48,0.1), 0 0 6px rgba(240,160,48,0.15);
}
.rb-item.res-full {
  border-color: rgba(255,60,60,0.6);
  box-shadow: inset 0 0 10px rgba(255,60,60,0.12), 0 0 8px rgba(255,60,60,0.2);
  animation: rbFullPulse 2s ease-in-out infinite;
}
@keyframes rbFullPulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(255,60,60,0.08), 0 0 6px rgba(255,60,60,0.15); }
  50%      { box-shadow: inset 0 0 14px rgba(255,60,60,0.18), 0 0 12px rgba(255,60,60,0.3); }
}
/* Resource value flash when a big gain arrives */
.rb-val.res-flash, .rp-res-val.res-flash {
  animation: resFlash 0.6s ease-out;
}
@keyframes resFlash {
  0%   { filter: brightness(2.2); transform: scale(1.15); }
  100% { filter: brightness(1);   transform: scale(1);    }
}

/* ===== P. Page transition fade between sections ===== */
#planetSection,
.sec-full {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
#planetSection.sec-fading,
.sec-full.sec-fading {
  opacity: 0;
  transform: translateY(-6px);
}

/* ===== Q. Stagger fade-in on grid cards ===== */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bld-grid > .bld-card,
.bld-grid > .res-tech-card,
.og-bld-grid > .og-bld-card {
  animation: cardFadeIn 0.3s ease-out both;
}
.bld-grid > :nth-child(1)  { animation-delay: 0ms; }
.bld-grid > :nth-child(2)  { animation-delay: 40ms; }
.bld-grid > :nth-child(3)  { animation-delay: 80ms; }
.bld-grid > :nth-child(4)  { animation-delay: 120ms; }
.bld-grid > :nth-child(5)  { animation-delay: 160ms; }
.bld-grid > :nth-child(6)  { animation-delay: 200ms; }
.bld-grid > :nth-child(7)  { animation-delay: 240ms; }
.bld-grid > :nth-child(8)  { animation-delay: 280ms; }
.bld-grid > :nth-child(9)  { animation-delay: 320ms; }
.bld-grid > :nth-child(10) { animation-delay: 360ms; }
.bld-grid > :nth-child(n+11) { animation-delay: 400ms; }
.og-bld-grid > :nth-child(1)  { animation-delay: 0ms; }
.og-bld-grid > :nth-child(2)  { animation-delay: 35ms; }
.og-bld-grid > :nth-child(3)  { animation-delay: 70ms; }
.og-bld-grid > :nth-child(4)  { animation-delay: 105ms; }
.og-bld-grid > :nth-child(5)  { animation-delay: 140ms; }
.og-bld-grid > :nth-child(6)  { animation-delay: 175ms; }
.og-bld-grid > :nth-child(7)  { animation-delay: 210ms; }
.og-bld-grid > :nth-child(8)  { animation-delay: 245ms; }
.og-bld-grid > :nth-child(n+9) { animation-delay: 280ms; }
.res-tech-grid > .res-tech-card {
  animation: cardFadeIn 0.3s ease-out both;
}
.res-tech-grid > :nth-child(1) { animation-delay: 0ms; }
.res-tech-grid > :nth-child(2) { animation-delay: 50ms; }
.res-tech-grid > :nth-child(3) { animation-delay: 100ms; }
.res-tech-grid > :nth-child(4) { animation-delay: 150ms; }
.res-tech-grid > :nth-child(5) { animation-delay: 200ms; }
.res-tech-grid > :nth-child(6) { animation-delay: 250ms; }
.res-tech-grid > :nth-child(n+7) { animation-delay: 300ms; }

/* ===== R. Ripple effect on buttons — DISABLED 09/05 (user feedback : "truc orange qui pop chiant") ===== */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ring { display: none !important; }
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ===== S. Particle trail on active progress bars ===== */
.og-slot.building .og-slot-fill::after,
.bld-card .bld-prog-fill::after {
  content: '';
  position: absolute;
  top: -1px; right: -2px;
  width: 8px; height: calc(100% + 2px);
  background: radial-gradient(circle, rgba(255,220,120,0.95) 0%, rgba(240,160,48,0.6) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,200,60,0.7), 0 0 14px 4px rgba(240,160,48,0.3);
  animation: progParticle 1.2s ease-in-out infinite;
}
@keyframes progParticle {
  0%, 100% { opacity: 0.6; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
/* Flowing dots along the bar */
.og-slot.building .og-slot-fill::before,
.bld-card .bld-prog-fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 12px,
    rgba(255,255,255,0.3) 12px,
    rgba(255,255,255,0.3) 16px
  );
  animation: progFlow 0.8s linear infinite;
}
@keyframes progFlow {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
/* Ensure fill is positioned for pseudo-elements */
.og-slot-fill,
.bld-prog-fill {
  position: relative;
  overflow: visible;
}

/* ===== T. Star sparkles behind planet ===== */
#rpPlanetView { position:relative; }
#rpPlanetView::before {
  content:'';
  position:absolute; top:-10px; left:-10px; right:-10px; height:180px;
  pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 18% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 42% 45%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 92% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 62% 4%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 55%, var(--tint-10), transparent),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(var(--accent-rgb),0.5), transparent),
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(var(--accent-rgb),0.35), transparent),
    radial-gradient(1px 1px at 55% 60%, rgba(var(--accent-rgb),0.3), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 25% 32%, rgba(255,255,255,0.3), transparent);
  animation: starTwinkle 5s ease-in-out 1;
}
@keyframes starTwinkle {
  0%,100% { opacity:0.35; }
  33%     { opacity:0.9; }
  66%     { opacity:0.5; }
}

/* ===== T2. Light rays emanating from planet ===== */
#rpPlanetView::after {
  content:'';
  position:absolute;
  top:-40px; left:50%; width:280px; height:280px;
  transform:translateX(-50%);
  pointer-events:none; z-index:0;
  background:conic-gradient(
    from 0deg at 50% 46%,
    transparent 0deg,
    rgba(var(--accent-rgb),0.06) 8deg,
    transparent 18deg,
    transparent 40deg,
    rgba(var(--accent-rgb),0.04) 50deg,
    transparent 60deg,
    transparent 85deg,
    rgba(var(--accent-rgb),0.07) 92deg,
    transparent 102deg,
    transparent 128deg,
    rgba(var(--accent-rgb),0.04) 138deg,
    transparent 148deg,
    transparent 170deg,
    rgba(var(--accent-rgb),0.06) 178deg,
    transparent 188deg,
    transparent 215deg,
    rgba(var(--accent-rgb),0.05) 222deg,
    transparent 232deg,
    transparent 260deg,
    rgba(var(--accent-rgb),0.07) 268deg,
    transparent 278deg,
    transparent 305deg,
    rgba(var(--accent-rgb),0.04) 312deg,
    transparent 322deg,
    transparent 345deg,
    rgba(var(--accent-rgb),0.05) 353deg,
    transparent 360deg
  );
  animation:raysSpin 45s linear infinite;
  mask-image:radial-gradient(circle, transparent 25%, black 40%, black 80%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle, transparent 25%, black 40%, black 80%, transparent 100%);
}

/* ===== U. Faction ambient edge vignette ===== */
/* Subtle faction-colored glow at the edges of the main content */
[class*="faction-"] .center-content { position: relative; }
[class*="faction-"] .center-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at top center, rgba(var(--accent-rgb),0.06) 0%, transparent 50%),
              radial-gradient(ellipse at bottom center, rgba(var(--accent-rgb),0.04) 0%, transparent 45%);
}

/* ===== GLOBAL FACTION AMBIENT — fixed to viewport (follows scroll) ===== */
/* Ensures theme glow stays visible regardless of scroll position or container bounds */
.app[class*="faction-"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(var(--accent-rgb),0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(var(--accent-rgb),0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb),0.04) 0%, transparent 70%);
  mix-blend-mode: screen;
}
/* Put main content above the ambient overlay */
.main-layout { position:relative; z-index:1; }

/* Safety: ensure key containers fill their parent vertically */
.main-layout, .left-nav, .right-panel, .center-content, .planet-frame, .sec-full {
  min-height: 0;
}
.sec-full.active { min-height: 100%; }
/* Topbar resource items — faction styling handled in layout.css */

/* ===== WARP TRANSITION BETWEEN SECTIONS ===== */
.warp-overlay {
  position:fixed; inset:0; z-index:99998; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.warp-flash {
  position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(var(--accent-rgb),0.25) 0%, transparent 60%);
  animation:warpFlash 0.4s ease-out forwards;
}
@keyframes warpFlash {
  0%   { opacity:0; transform:scale(0.3); }
  40%  { opacity:1; transform:scale(1.2); }
  100% { opacity:0; transform:scale(2); }
}
.warp-lines {
  position:absolute; inset:-20%; border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg, rgba(var(--accent-rgb),0.08) 4deg, transparent 8deg,
    transparent 20deg, rgba(var(--accent-rgb),0.06) 24deg, transparent 28deg,
    transparent 45deg, rgba(var(--accent-rgb),0.1) 48deg, transparent 52deg,
    transparent 70deg, rgba(var(--accent-rgb),0.07) 74deg, transparent 78deg,
    transparent 90deg, rgba(var(--accent-rgb),0.08) 94deg, transparent 98deg,
    transparent 120deg, rgba(var(--accent-rgb),0.06) 124deg, transparent 128deg,
    transparent 150deg, rgba(var(--accent-rgb),0.09) 154deg, transparent 158deg,
    transparent 180deg, rgba(var(--accent-rgb),0.07) 184deg, transparent 188deg,
    transparent 210deg, rgba(var(--accent-rgb),0.08) 214deg, transparent 218deg,
    transparent 240deg, rgba(var(--accent-rgb),0.06) 244deg, transparent 248deg,
    transparent 270deg, rgba(var(--accent-rgb),0.1) 274deg, transparent 278deg,
    transparent 300deg, rgba(var(--accent-rgb),0.07) 304deg, transparent 308deg,
    transparent 330deg, rgba(var(--accent-rgb),0.08) 334deg, transparent 338deg,
    transparent 360deg
  );
  animation:warpSpin 0.4s linear forwards;
}
@keyframes warpSpin { from{transform:rotate(0) scale(0.5);opacity:1} to{transform:rotate(90deg) scale(2);opacity:0} }

/* ===== ACHIEVEMENT EPIC POPUP ===== */
.ach-flash {
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,60,0.35) 0%, transparent 60%);
  animation:achFlash 0.6s ease-out forwards;
}
@keyframes achFlash { 0%{opacity:1;transform:scale(0.5)} 50%{opacity:0.8;transform:scale(1.5)} 100%{opacity:0;transform:scale(2)} }
.ach-epic { position:relative; overflow:visible; }
.ach-pop-label { animation:achLabelIn 0.6s ease-out; }
@keyframes achLabelIn { from{letter-spacing:12px;opacity:0} to{letter-spacing:2px;opacity:1} }
.ach-badge-glow { animation:achBadgeGlow 2s ease-in-out infinite; }
@keyframes achBadgeGlow {
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,200,60,0.5));transform:scale(1)}
  50%{filter:drop-shadow(0 0 20px rgba(255,200,60,0.9));transform:scale(1.05)}
}
.ach-particles { position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none; }
.ach-particle {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--gold); opacity:0;
  animation:achParticle 1.2s ease-out calc(var(--i) * 0.08s) forwards;
}
@keyframes achParticle {
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(calc(cos(calc(var(--i) * 45deg)) * 80px), calc(sin(calc(var(--i) * 45deg)) * 80px)) scale(0);opacity:0}
}

/* ===== GAME STARFIELD (deep space background) ===== */
.game-stars.stars-layer {
  position:fixed;
  inset:-50%; width:200%; height:200%;
  z-index:0; opacity:0.5;
}

/* ===== Z. Universal rarity glow (cmd-card + dist-card) =====
   Apply via data-rarity="common|rare|epic|legendary|ancient"
   v2 — boosted visibility (6px strip + border tint + permanent outer glow) */
.cmd-card[data-rarity],
.dist-card[data-rarity] {
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  overflow: visible;
}
.cmd-card[data-rarity]::after,
.dist-card[data-rarity]::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  pointer-events: none;
  opacity: 1;
  transition: box-shadow 0.25s ease, width 0.25s ease;
  z-index: 2;
}
.cmd-card[data-rarity]:hover::after,
.dist-card[data-rarity]:hover::after {
  width: 8px;
}

/* common — soft green */
.cmd-card[data-rarity="common"]           { border-color: rgba(124,201,124,0.45) !important; box-shadow: 0 0 10px rgba(124,201,124,0.15); }
.cmd-card[data-rarity="common"]::after    { background: linear-gradient(180deg, var(--rarity-common), rgba(124,201,124,0.5)); box-shadow: 0 0 10px rgba(124,201,124,0.55); }
.cmd-card[data-rarity="common"]:hover     { box-shadow: 0 0 22px rgba(124,201,124,0.4), 0 4px 18px rgba(124,201,124,0.2); border-color: rgba(124,201,124,0.7) !important; }

/* rare — blue */
.cmd-card[data-rarity="rare"],
.dist-card[data-rarity="rare"]            { border-color: rgba(110,170,255,0.55) !important; box-shadow: 0 0 12px rgba(110,170,255,0.18); }
.cmd-card[data-rarity="rare"]::after,
.dist-card[data-rarity="rare"]::after     { background: linear-gradient(180deg, var(--rarity-rare), rgba(110,170,255,0.6)); box-shadow: 0 0 12px rgba(110,170,255,0.7); }
.cmd-card[data-rarity="rare"]:hover,
.dist-card[data-rarity="rare"]:hover      { box-shadow: 0 0 26px rgba(110,170,255,0.45), 0 4px 20px rgba(110,170,255,0.25); border-color: rgba(110,170,255,0.8) !important; }

/* epic — purple */
.cmd-card[data-rarity="epic"],
.dist-card[data-rarity="epic"]            { border-color: rgba(204,136,255,0.6) !important; box-shadow: 0 0 14px rgba(204,136,255,0.22); }
.cmd-card[data-rarity="epic"]::after,
.dist-card[data-rarity="epic"]::after     { background: linear-gradient(180deg, var(--rarity-epic), rgba(204,136,255,0.65)); box-shadow: 0 0 14px rgba(204,136,255,0.75); }
.cmd-card[data-rarity="epic"]:hover,
.dist-card[data-rarity="epic"]:hover      { box-shadow: 0 0 28px rgba(204,136,255,0.5), 0 4px 20px rgba(204,136,255,0.28); border-color: rgba(204,136,255,0.85) !important; }

/* legendary — gold */
.cmd-card[data-rarity="legendary"],
.dist-card[data-rarity="legendary"]       { border-color: rgba(255,187,51,0.65) !important; box-shadow: 0 0 16px rgba(255,187,51,0.25); }
.cmd-card[data-rarity="legendary"]::after,
.dist-card[data-rarity="legendary"]::after{ background: linear-gradient(180deg, var(--rarity-legendary), rgba(255,187,51,0.7)); box-shadow: 0 0 16px rgba(255,187,51,0.85); }
.cmd-card[data-rarity="legendary"]:hover,
.dist-card[data-rarity="legendary"]:hover { box-shadow: 0 0 32px rgba(255,187,51,0.55), 0 4px 22px rgba(255,187,51,0.3); border-color: rgba(255,187,51,0.9) !important; }

/* ancient — cyan */
.cmd-card[data-rarity="ancient"],
.dist-card[data-rarity="ancient"]         { border-color: rgba(0,229,255,0.65) !important; box-shadow: 0 0 18px rgba(0,229,255,0.28); }
.cmd-card[data-rarity="ancient"]::after,
.dist-card[data-rarity="ancient"]::after  { background: linear-gradient(180deg, var(--rarity-ancient), rgba(0,229,255,0.7)); box-shadow: 0 0 18px rgba(0,229,255,0.9); }
.cmd-card[data-rarity="ancient"]:hover,
.dist-card[data-rarity="ancient"]:hover   { box-shadow: 0 0 34px rgba(0,229,255,0.55), 0 4px 22px rgba(0,229,255,0.3); border-color: rgba(0,229,255,0.9) !important; }

/* Reduced motion: disable all custom animations */
@media (prefers-reduced-motion: reduce) {
  .bld-grid > *, .og-bld-grid > *, .res-tech-grid > * { animation: none !important; }
  #planetSection, .sec-full { transition: none !important; }
  .ripple-ring { animation: none !important; }
  .og-slot-fill::after, .og-slot-fill::before,
  .bld-prog-fill::after, .bld-prog-fill::before { animation: none !important; content: none !important; }
  .warp-overlay, .lo-ring, .lo-stars { animation: none !important; }
  .nt-timer { animation: none !important; }
  .game-stars { animation: none !important; }
}