/* ASTRAVEX : Prélude · feuille commune (accueil, jeu, essai).
   Couleurs d'ASTRAVEX (cyan du vaisseau, or des bonus, violet de la grille, rose du vaisseau-mère)
   sur le noir spatial ; typographies de TRUvector (Orbitron, Sora, Share Tech Mono). */
:root {
  --espace: #04030E; --panneau: rgba(8, 7, 26, .82); --panneau-plein: #0C0A24; --trait: rgba(143, 107, 255, .32);
  --cyan: #3FE0F5; --or: #F2C14E; --violet: #8F6BFF; --rose: #FF5BD8; --vert: #5FE0A0; --rouge: #FF6B6B;
  --texte: #E8EAF6; --doux: #A3A6CC;
  --titre: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --corps: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--espace); color: var(--texte); font: 400 15px/1.55 var(--corps); }
a { color: var(--cyan); }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.cache { display: none !important; }
[hidden] { display: none !important; }

/* ---- boutons */
.btn { appearance: none; border: 1px solid var(--cyan); background: linear-gradient(180deg, rgba(63, 224, 245, .22), rgba(63, 224, 245, .06));
  color: #fff; font-family: var(--titre); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem;
  padding: .75em 1.4em; border-radius: 4px; cursor: pointer; box-shadow: 0 0 18px rgba(63, 224, 245, .25); }
.btn:hover { background: rgba(63, 224, 245, .3); }
.btn-sec { appearance: none; border: 1px solid var(--trait); background: transparent; color: var(--texte); font-family: var(--mono);
  letter-spacing: .08em; padding: .55em 1em; border-radius: 4px; cursor: pointer; }
.btn-sec:hover { border-color: var(--cyan); }
.btn-sec[aria-pressed="true"] { border-color: var(--vert); color: var(--vert); }
select { background: var(--panneau-plein); border: 1px solid var(--trait); border-radius: 4px; padding: .4em .5em; width: 100%; }
label.champ { display: grid; gap: 4px; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }

.marque { font-family: var(--titre); font-weight: 900; letter-spacing: .16em; }
.marque b { color: var(--cyan); font-weight: 900; }
.etiquette { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); }
kbd { font-family: var(--mono); font-size: .82em; border: 1px solid var(--trait); border-bottom-width: 2px; border-radius: 3px; padding: 0 .35em; background: rgba(255, 255, 255, .04); }

/* ---- plein écran (chargement, erreurs) */
.plein { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; gap: 10px; text-align: center; background: var(--espace);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.plein .titre { font-family: var(--titre); font-weight: 900; font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: .2em; margin: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 55%, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plein p { margin: 0; color: var(--doux); max-width: 46ch; }
.jauge { width: min(280px, 70vw); height: 3px; background: rgba(255, 255, 255, .08); margin: 10px auto 0; overflow: hidden; border-radius: 2px; }
.jauge i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: balayer 1.2s linear infinite; }
@keyframes balayer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .jauge i { animation: none; width: 100%; opacity: .5; } }