/* Le Cosmodrome — ton de la page (rouille et acier de l'Ancienne Russie), bascule d'époque
   « sans SIVA / crise SIVA » (classe era-siva sur <body>, voir js/era.js), voile et canevas
   des nanites, couleurs de la coupe, quarantaine et pastilles propres au Cosmodrome. */

.cosmodrome {
  --rust: #e0a05a;
  --rust-hi: #f4cf9a;
  --steel: #8fb4d8;
  --siva: #ff3b2f;
  --siva-hi: #ff8a73;
  --page-accent: var(--rust);
  --page-accent-hi: var(--rust-hi);
}
.cosmodrome.era-siva { --page-accent: var(--siva); --page-accent-hi: var(--siva-hi); }
.cosmodrome ::selection { background: rgba(224, 160, 90, .35); }
.cosmodrome.era-siva ::selection { background: rgba(255, 59, 47, .4); }

/* ---------- Les deux époques ---------- */
.cosmodrome:not(.era-siva) [data-era="siva"], .cosmodrome.era-siva [data-era="calm"] { display: none !important; }

/* canevas des nanites : par-dessus la page, sans jamais gêner un clic */
#nanites { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
#nanites.on { opacity: 1; }
/* voile anguleux qui balaie l'écran à chaque bascule */
.cosmodrome.era-shift::after { content: ''; position: fixed; inset: 0; z-index: 41; pointer-events: none; background: linear-gradient(115deg, transparent 0 30%, rgba(255, 59, 47, .5) 46%, rgba(40, 4, 4, .75) 52%, rgba(255, 59, 47, .4) 58%, transparent 74%); background-size: 260% 100%; animation: era-veil .9s ease-in-out forwards; }
.cosmodrome.era-shift:not(.era-siva)::after { filter: grayscale(1) brightness(1.6); }
@keyframes era-veil { from { background-position: 130% 0; } to { background-position: -30% 0; } }
/* pendant la crise, la page se refroidit et rougit */
.cosmodrome.era-siva main { background: radial-gradient(ellipse 70% 30% at 85% 12%, rgba(255, 59, 47, .09), transparent 70%), radial-gradient(ellipse 60% 26% at 10% 58%, rgba(255, 59, 47, .07), transparent 70%); }
.cosmodrome.era-siva .section { position: relative; }
.cosmodrome.era-siva .sec-title { text-shadow: 0 0 28px rgba(255, 59, 47, .35); }
.cosmodrome.era-siva .quarter, .cosmodrome.era-siva .now-card, .cosmodrome.era-siva .game, .cosmodrome.era-siva .room { border-color: rgba(255, 59, 47, .32); }
.cosmodrome.era-siva .photo.same { filter: saturate(.55) contrast(1.08) brightness(.86) sepia(.25) hue-rotate(-18deg); }

/* interrupteur d'époque */
.era-switch { display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: pointer; background: rgba(6, 10, 22, .6); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: inherit; color: var(--ink); transition: border-color .3s, box-shadow .3s; }
.era-switch:hover, .era-switch:focus-visible { border-color: #fff; outline: 0; }
.era-switch .era-label { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .3s; }
.era-switch .era-track { position: relative; flex: none; width: 46px; height: 22px; border: 1px solid var(--line-strong); background: #0a1124; }
.era-switch .era-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: var(--rust); transition: transform .35s var(--ease), background .35s, box-shadow .35s; }
.era-switch[aria-checked="false"] .era-label--calm { color: var(--rust-hi); }
.era-switch[aria-checked="true"] .era-label--siva { color: var(--siva-hi); }
.era-switch[aria-checked="true"] { border-color: rgba(255, 59, 47, .7); box-shadow: 0 0 26px rgba(255, 59, 47, .3); }
.era-switch[aria-checked="true"] .era-track::after { transform: translateX(24px) rotate(45deg) scale(.86); background: var(--siva); box-shadow: 0 0 14px var(--siva); }
/* le même, épinglé en bas de l'écran pendant toute la lecture */
.era-dock { position: fixed; left: 16px; bottom: 16px; z-index: 45; padding: 8px 12px; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease), visibility .35s, border-color .3s, box-shadow .3s; }
.past-hero .era-dock { opacity: 1; visibility: visible; transform: none; }
.era-dock .era-label { font-size: .58rem; }
.era-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.era-note b { color: var(--page-accent-hi); font-weight: 700; }

/* ---------- Héros ---------- */
.cosmodrome .hero-title span:last-child { margin-top: .18em; font-size: .36em; font-weight: 500; letter-spacing: .3em; color: var(--page-accent-hi); transition: color .6s; }
.hero-siva { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.era-siva .hero-siva { opacity: 1; }
/* filigrane cyrillique : « Cosmodrome », comme sur les panneaux du Bureau d'aéronautique */
.cyr { position: absolute; right: -1%; top: 16%; z-index: 2; margin: 0; pointer-events: none; font-size: clamp(3rem, 13vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); user-select: none; -webkit-user-select: none; }
.era-siva .cyr { -webkit-text-stroke-color: rgba(255, 59, 47, .3); }

/* ---------- Coupe (brique commune : css/components/depths.css) ---------- */
.depths-sec { background: linear-gradient(180deg, transparent, rgba(224, 160, 90, .04) 40%, transparent); }
.stratum--ciel { background: linear-gradient(180deg, #0b1630, #22386a); }
.stratum--surface { background: linear-gradient(180deg, #22386a 0%, #57719c 60%, #b9a98a 96%, #6a5a44 100%); }
.stratum--sous { background: linear-gradient(180deg, #4a3d2e 0%, #2a2520 30%, #1a1a1c 100%); }
.stratum--bunkers { background: radial-gradient(ellipse 30% 70% at 22% 90%, rgba(255, 179, 71, .12), transparent 70%), linear-gradient(180deg, #1a1a1c, #08090c); }
.era-siva .stratum--ciel { background: linear-gradient(180deg, #0c0f1c, #2a3147); }
.era-siva .stratum--surface { background: radial-gradient(ellipse 34% 70% at 82% 70%, rgba(255, 59, 47, .3), transparent 70%), linear-gradient(180deg, #2a3147 0%, #6d7689 60%, #dfe6ee 96%, #8a94a3 100%); }
.era-siva .stratum--sous { background: radial-gradient(ellipse 34% 80% at 82% 30%, rgba(255, 59, 47, .22), transparent 70%), linear-gradient(180deg, #56606e 0%, #23262d 30%, #16171b 100%); }
.era-siva .stratum--bunkers { background: radial-gradient(ellipse 30% 80% at 82% 70%, rgba(255, 59, 47, .3), transparent 70%), linear-gradient(180deg, #16171b, #070709); }
.colony-ship { fill: rgba(16, 22, 38, .75); stroke: rgba(244, 207, 154, .55); stroke-width: 1; }
/* tours de lancement en treillis */
.gantry { fill: none; stroke: rgba(244, 207, 154, .45); stroke-width: 1; }
.gantry--brace { stroke: rgba(244, 207, 154, .28); }
.wall { fill: #1b2233; stroke: rgba(207, 216, 232, .7); stroke-width: 1; }
.cosmodrome .stratum--surface .stratum-name { color: rgba(255, 255, 255, .85); }
.cosmodrome .stratum--surface .stratum-note { color: rgba(255, 255, 255, .55); }
.way-line { stroke: rgba(231, 235, 245, .34); }
.way-line--cave { stroke: rgba(127, 214, 194, .45); }
.way-line--fallen { stroke: rgba(183, 156, 255, .45); }
.way-line--rasputin { stroke: rgba(255, 179, 71, .5); stroke-dasharray: 4 4; }
.way-line--ship { stroke: rgba(244, 207, 154, .5); }
.way-line--siva, .way-line--iron { stroke: rgba(255, 255, 255, .16); stroke-dasharray: 2 5; }
.era-siva .way-line--siva { stroke: rgba(255, 59, 47, .7); stroke-dasharray: none; }
.room-node--zone { color: #f3eee4; }
.room-node--ship { color: var(--rust-hi); }
.room-node--cave { color: #7fd6c2; }
.room-node--fallen { color: #b79cff; }
.room-node--rasputin { color: #ffb347; }
.room-node--rasputin i, .room-node--iron i { transform: none; }
.room-node--iron { color: #cfd8e8; }
/* au-delà du Mur : scellé hors de la crise */
.room-node--siva { color: rgba(255, 255, 255, .34); }
.room-node--siva i { border-style: dashed; }
.room-node--siva .room-label { color: rgba(231, 235, 245, .42); }
.era-siva .room-node--siva { color: var(--siva); }
.era-siva .room-node--siva i { border-style: solid; box-shadow: 0 0 12px rgba(255, 59, 47, .6); }
.era-siva .room-node--siva .room-label { color: rgba(255, 220, 214, .92); }

/* ---------- Pastilles du Cosmodrome ---------- */
.spot[data-secret="clusters"] { color: #ffd0c8; border-color: rgba(255, 59, 47, .75); box-shadow: 0 0 14px rgba(255, 59, 47, .55); animation: cluster-pulse 2.2s ease-in-out infinite; }
.spot[data-secret="clusters"].found { animation: none; box-shadow: none; }
@keyframes cluster-pulse { 50% { box-shadow: 0 0 4px rgba(255, 59, 47, .3); } }
.spot[data-secret="pod"] { color: #b8ffcf; border-color: rgba(120, 220, 150, .6); }
.spot--randal { width: 40px; height: 40px; color: #ffd9a8; border-color: rgba(224, 160, 90, .8); }
.spot--randal svg { width: 22px; height: 22px; }
.spot--randal.hit { animation: randal-hit .25s; }
@keyframes randal-hit { 30% { transform: translate(-46%, -52%) scale(1.08); } 70% { transform: translate(-54%, -48%); } }
.randal-hp { position: absolute; left: var(--x); top: calc(var(--y) - 30px); z-index: 2; width: 86px; height: 6px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .6); background: rgba(6, 10, 22, .7); pointer-events: none; }
.randal-hp[hidden] { display: none; }
.randal-hp::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); background: var(--exotic); transition: transform .2s; }

/* ---------- Zone en quarantaine / Terres pestiférées ---------- */
.quarantine { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line-strong); background: repeating-linear-gradient(135deg, rgba(224, 160, 90, .09) 0 18px, transparent 18px 36px), var(--panel-solid); }
.quarantine figure { position: relative; margin: 0; min-height: 260px; }
.quarantine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.7); }
.quarantine-body { padding: clamp(24px, 4vw, 44px); }
.quarantine-body h3 { margin: 8px 0 12px; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.quarantine-body p:not(.tag) { margin: 0 0 18px; font-size: .98rem; line-height: 1.7; color: var(--muted); }
.cosmodrome .quarters + .raid, .cosmodrome .steps + .quarters { margin-top: 0; }
.cosmodrome #siva .quarters { margin-bottom: clamp(36px, 5vw, 56px); }
.item-card.secret .item-head { background: linear-gradient(135deg, #2f6b46, #1b3f2a); }

@media (max-width: 1020px) {
  .quarantine { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .era-dock { left: 10px; bottom: 10px; }
  .era-dock .era-label--calm { display: none; }
  .spot--randal { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmodrome.era-shift::after { animation: none; display: none; }
}