/* ============================================================
   ASTRA GENESIS, 02-BASE.CSS
   v0.2.0, reset, corps de page, texture d'ambiance, écran de boot.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:calc(16px * var(--text-scale) * var(--ui-scale));} /* le texte suit --text-scale (fixe), pas --scale, voir 01-tokens.css */
body{
  margin:0;min-height:100vh;
  background:var(--void);color:var(--ink-1);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button{font-family:inherit;}
::selection{background:var(--cyan);color:#03110f;}

/* ---------- sélection de texte scopée (additif v0.51.1) ----------
   `body{user-select:none}` ci-dessus reste la règle par défaut, demande
   explicite : contrôles (boutons, nav, cartes, sliders) jamais
   sélectionnables, cohérent avec un jeu (éviter la sélection accidentelle
   au clic/drag). Les zones de LECTURE listées ci-dessous redeviennent
   sélectionnables (curseur texte, pour le signaler) : corps des rapports
   et modales, panneau latéral, citations lore, tableaux (production
   façon OGame, admin), overlay admin, dumps d'introspection dev,
   tooltip riche. */
#modal-body, #sp-body,
.lore-box, .bld-sheet-lore, .palier-complete-lore,
.bld-ptable, .admin-table,
#admin-overlay, .admin-json-view, .admin-json-editor,
.admin-introspect-output{
  user-select:text;cursor:text;
}
/* les contrôles qui peuvent apparaître À L'INTÉRIEUR de ces zones de
   lecture (ex. modale "Gérer toutes les planètes", overlay admin)
   restent non sélectionnables, cursor déjà géré par leurs propres
   règles (`.pill-tab`, `.btn`...), on ne touche ici qu'au user-select. */
#modal-body button, #modal-body select, #modal-body input[type="range"],
#modal-body .pill-tab, #modal-body .ship-row, #modal-body .bcard,
#sp-body button, #sp-body select, #sp-body input[type="range"], #sp-body .pill-tab,
#admin-overlay button, #admin-overlay select, #admin-overlay input[type="range"],
#admin-overlay .pill-tab, #admin-overlay .admin-nav-item{
  user-select:none;
}
/* v0.14 : icônes SVG line arrondies (référence test.html), la
   propriété CSS stroke-width/-linecap/-linejoin prime sur l'attribut
   présentation posé sur chaque <svg> (AG.ICONS, js/00-data.js), donc
   un seul endroit pour uniformiser les ~25 icônes du jeu plutôt que
   de toucher chaque définition. */
svg{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- scrollbar thématisée globale (v0.42.0) ----------
   Remplace toute scrollbar native du navigateur sur toute la page (fenêtre,
   panneaux, modales, graphe Usines...) par une version fine (8px) et
   thématisée, un seul endroit plutôt qu'une règle dupliquée par écran
   (consolide les anciennes règles éparpillées de .screen/.sp-body/
   #sidepanel/admin, toutes retirées au profit de celle-ci). */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#0B1020;border-radius:8px;}
::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan);}
*{scrollbar-width:thin;scrollbar-color:var(--cyan-dim) #0B1020;}

/* grain léger, casse l'effet "glassmorphism trop propre" */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.45;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:8999;
  background:radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,0,.45) 100%);
}

canvas#starfield{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(ellipse 120% 90% at 18% -10%, #0d1c2c 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 85% 110%, #150e26 0%, transparent 50%),
    var(--void);
}

a:focus-visible,button:focus-visible,.hex:focus-visible,.nav-btn:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;
}

/* ---------- BOOT ----------
   v0.71.3 : le loader reste monté jusqu'à AG.ready (js/99-boot.js). Carte
   centrale (marque, orbite SVG animée en CSS, étapes réelles horodatées,
   barre, statut, écran d'erreur) posée sur un squelette grisé de
   l'interface. Aucun WebGL ; animations coupées par prefers-reduced-motion
   et par le réglage « Effets réduits ». */
#boot{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:var(--void);
  transition:opacity .9s ease, filter .9s ease;
}
#boot.hide{opacity:0;filter:blur(6px);pointer-events:none;}
.boot-card{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:calc(20px*var(--scale));
  padding:calc(28px*var(--scale)) calc(36px*var(--scale));
  background:rgba(10,15,22,.82);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  max-width:calc(100vw - 32px);
}
.boot-mark{
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;letter-spacing:.35em;
  color:var(--ink-1);text-shadow:0 0 26px rgba(45,212,191,.45);text-align:center;
}
.boot-mark small{
  display:block;text-align:center;margin-top:10px;
  font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.5em;color:var(--amber);
}
.boot-orbit{width:calc(84px*var(--scale));height:calc(84px*var(--scale));overflow:visible;}
.boot-orbit-track{fill:none;stroke:rgba(45,212,191,.38);stroke-width:2;}
.boot-orbit-track.inner{stroke:rgba(245,158,11,.38);stroke-dasharray:5 7;}
.boot-orbit-core{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(45,212,191,.8));animation:boot-pulse 1.8s ease-in-out infinite;transform-origin:60px 60px;}
.boot-orbit-a,.boot-orbit-b{transform-origin:60px 60px;will-change:transform;}
.boot-orbit-a{fill:var(--cyan);animation:spin 2.4s linear infinite;}
.boot-orbit-b{fill:var(--amber);animation:spin 3.6s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes boot-pulse{50%{transform:scale(.8);opacity:.7;}}
.boot-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:calc(8px*var(--scale)) calc(18px*var(--scale));}
.boot-step{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:.08em;color:var(--ink-3);transition:color .2s ease;}
.boot-step::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;transition:all .2s ease;}
.boot-step.active{color:var(--ink-1);}
.boot-step.active::before{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(45,212,191,.18);animation:boot-pulse 1.2s ease-in-out infinite;}
.boot-step.done{color:var(--ink-2);}
.boot-step.done::before{background:var(--cyan);border-color:var(--cyan);}
.boot-step.skipped::before{border-style:dashed;}
.boot-step.failed{color:var(--rose);}
.boot-step.failed::before{background:var(--rose);border-color:var(--rose);}
.boot-step-ms{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-3);min-height:1em;}
.boot-status{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.08em;min-height:1.2em;text-align:center;}
.boot-bar{width:calc(280px*var(--scale));max-width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.boot-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));transition:width .25s ease;}
.boot-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.boot-error[hidden]{display:none;}
.boot-error-title{font-family:var(--font-head);font-weight:700;font-size:1.1rem;letter-spacing:.12em;color:var(--rose);}
.boot-error-body{margin:0;color:var(--ink-1);font-size:.9rem;}
.boot-error-detail{margin:0;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);}
.boot-error-detail:empty{display:none;}
#boot.failed .boot-bar,#boot.failed .boot-status{display:none;}
#boot.failed .boot-orbit *{animation:none;}
#boot.failed .boot-orbit-core{fill:var(--rose);filter:none;}
/* squelette : blocs grisés à l'emplacement du HUD et des panneaux, pour
   qu'aucune valeur provisoire ("-") ne soit jamais visible */
.boot-skel{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:12px 16px;opacity:.55;pointer-events:none;}
.boot-skel i,.boot-skel-main{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.075) 50%,rgba(255,255,255,.035) 100%);background-size:200% 100%;animation:boot-shimmer 1.6s linear infinite;}
.boot-skel-hud{display:flex;gap:12px;height:44px;}
.boot-skel-hud i{flex:1;}
.boot-skel-hud i:first-child{flex:0 0 180px;}
.boot-skel-body{flex:1;display:flex;gap:14px;min-height:0;}
.boot-skel-col{flex:0 0 min(300px,24%);display:flex;flex-direction:column;gap:14px;}
.boot-skel-col i{flex:1;max-height:180px;}
.boot-skel-main{flex:1;opacity:.6;}
@keyframes boot-shimmer{to{background-position:-200% 0;}}
@media (max-width:700px){
  .boot-skel-col{display:none;}
  .boot-steps{grid-template-columns:repeat(2,auto);}
  .boot-mark{font-size:1.7rem;letter-spacing:.25em;}
}
@media (prefers-reduced-motion: reduce){
  #boot *, #boot *::before{animation:none !important;}
}
html.fx-reduced #boot *, html.fx-reduced #boot *::before{animation:none !important;}

/* ---------- APP SHELL ---------- */
#app{position:fixed;inset:0;z-index:1;display:none;}
#app.on{display:block;}
#viewport{position:absolute;top:calc(var(--hud-h) + var(--ribbon-h));left:0;right:0;bottom:0;overflow:hidden;transition:top .2s ease;}
.screen{
  position:absolute;inset:0;padding:var(--pad-lg) var(--pad-lg) var(--nav-gap);overflow-y:auto;
  opacity:0;transform:translateY(10px) scale(.995);pointer-events:none;
  transition:opacity .32s ease, transform .32s ease;
}
.screen.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

.screen-head{display:flex;align-items:baseline;gap:calc(14px*var(--scale));margin-bottom:calc(18px*var(--scale));flex-wrap:wrap;}
.screen-head h1{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.14em;
  margin:0;color:var(--ink-1);text-transform:uppercase;
}
.screen-head .eyebrow{font-family:var(--font-mono);font-size:.68rem;color:var(--amber);letter-spacing:.12em;}
.screen-head p{margin:0;color:var(--ink-3);font-size:.85rem;flex-basis:100%;}