/* Galaxies — portage de Galaxies / Tentai Show (Simon Tatham), id technique galaxies.
   Ambiance ciel de nuit : fond indigo presque noir,
   chaque cercle (étoile) a sa couleur vive et sa galaxie se peint de cette couleur ;
   une galaxie juste s'allume. Jost (OFL), auto-hébergée. */

@font-face{font-family:'GX Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/galaxies/jost-var.woff2') format('woff2')}

.gx{--nuit:#070b1c;--nuit2:#0d1330;--panneau:#141b3d;--trait:#2a3470;--texte:#e9ecff;--muted:#98a2d6;
 --or:#ffd36b;--astre:#8aa4ff;--astre2:#4c6bff;--erreur:#ff5f6d;--vide:#10163a;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:450 16px 'GX Jost',system-ui,sans-serif;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(60% 34% at 50% -4%,rgba(76,107,255,.30) 0%,transparent 70%),
  radial-gradient(46% 30% at 92% 104%,rgba(255,61,158,.16) 0%,transparent 70%),
  radial-gradient(42% 26% at 6% 100%,rgba(0,196,220,.14) 0%,transparent 70%),
  var(--nuit)}
.gx *{box-sizing:border-box}
.gx button{font:650 15px 'GX Jost',system-ui,sans-serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1px solid var(--trait);border-radius:10px;
 min-height:44px;padding:9px 12px 8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 rgba(0,0,0,.45)}
.gx button:active{transform:translateY(1px);filter:brightness(1.15)}
.gx button:disabled{opacity:.35;cursor:default}
.gx button:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.gx button.primary{background:linear-gradient(180deg,#5b78ff,#3249d6);border-color:#243aa8;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #1d2d86}

.gx header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:var(--nuit2);
 font:700 21px 'GX Jost',serif;letter-spacing:.8px;color:var(--texte)}
/* Bande d'étoiles sous l'en-tête : les couleurs des cercles. */
.gx header::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:4px;z-index:2;
 background:linear-gradient(90deg,#ff3d9e,#ffc400,#7fd400,#00c4dc,#4c6bff,#a334ff,#ff3d9e)}
.gx header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:700 26px/1 'GX Jost',sans-serif;color:var(--or)}
.gx header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--or);color:var(--or);font:800 17px/1 'GX Jost',sans-serif;box-shadow:none}
.gx main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:6px}

.gx .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.gx .pad{padding:16px}
.gx .eyebrow{font:750 11px 'GX Jost',sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--or)}
.gx .hero{display:flex;align-items:center;gap:14px}
.gx .hero img{width:74px;height:74px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(76,107,255,.55))}
.gx h1{margin:2px 0 0;white-space:nowrap;font:700 36px/1 'GX Jost',sans-serif;letter-spacing:.5px;color:var(--texte);text-shadow:0 0 18px rgba(138,164,255,.45)}
.gx .devise{margin-top:4px;color:var(--astre);font:italic 450 13px 'GX Jost',sans-serif}
.gx .pitch{margin:0;font-size:14px;line-height:1.4;color:#d4d9f5}
.gx .pitch b{color:var(--or)}
.gx .stats{display:flex;gap:8px}
.gx .stats span{flex:1;white-space:nowrap;padding:7px 9px 6px;background:var(--panneau);border:1px solid var(--trait);border-radius:10px;font:700 9px 'GX Jost',sans-serif;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.gx .stats b{display:block;font:700 20px 'GX Jost',sans-serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.gx button.grand{min-height:54px;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;white-space:nowrap;padding-left:6px;padding-right:6px}
.gx button.grand small{font:700 11px 'GX Jost',sans-serif;letter-spacing:.6px;opacity:.85}
.gx .row{display:flex;gap:8px}
.gx .row>*{flex:1}
.gx .note{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.4;border-top:1px solid var(--trait);padding-top:8px}
.gx .note.hors-ligne{color:var(--or)}

.gx .pagination{display:flex;align-items:center;gap:8px}
.gx .pagination h2{flex:1;text-align:center;margin:0;font:700 21px 'GX Jost',sans-serif}
.gx .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.gx .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.gx .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:750 11px 'GX Jost',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--or)}
.gx .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:6px;font:700 12px 'GX Jost',sans-serif;background:#0d1330;color:#4b5590;border-color:#1c2350;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.gx .carte-niveaux .case.faite{background:var(--teinte,#8aa4ff);color:#070b1c;border-color:#070b1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 8px color-mix(in srgb,var(--teinte,#8aa4ff) 55%,transparent)}
.gx .carte-niveaux .case.ouverte{background:linear-gradient(180deg,#5b78ff,#3249d6);color:#fff;border-color:#243aa8}
.gx .carte-niveaux .case:disabled{opacity:1}

.gx .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.gx .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.gx .hud .niv{font:700 26px/1 'GX Jost',sans-serif;color:var(--or)}
.gx .hud small{display:block;font:700 10px 'GX Jost',sans-serif;letter-spacing:1.6px;color:var(--muted);margin-top:4px;text-transform:uppercase}
.gx .hud .chrono{font:700 26px/1 'GX Jost',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.gx .plateau{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
.gx .cadre{padding:4px;border-radius:12px;background:linear-gradient(180deg,#1b2455,#0c1130);box-shadow:0 0 0 1px #2a3470,inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.6),0 0 40px rgba(76,107,255,.22)}
.gx svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.gx .grille .eclat{fill:#fff;opacity:0;pointer-events:none}
.gx .grille.gagne .eclat{animation:gx-eclat 1.3s ease-in-out both}
@keyframes gx-eclat{45%{opacity:.6}}
.gx .grille .astre{transform-box:fill-box;transform-origin:center}
.gx .grille.gagne .astre{animation:gx-pulse 1.1s ease-in-out 2}
@keyframes gx-pulse{50%{transform:scale(1.5)}}
.gx .plateau:has(.gagne) .cadre{box-shadow:0 0 0 2px var(--or),0 0 34px rgba(255,211,107,.55),0 10px 26px rgba(0,0,0,.6)}
.gx .plateau.suppose .cadre{background:linear-gradient(180deg,#5b78ff,#3249d6);box-shadow:0 0 0 2px var(--astre),0 10px 26px rgba(0,0,0,.6)}
.gx .plateau.gomme .cadre{box-shadow:0 0 0 2px #ff9f8f,0 10px 26px rgba(0,0,0,.6)}
.gx .message{flex:0 0 auto;height:40px;padding:5px 14px 0;overflow:hidden;text-align:center;font-size:13px;line-height:1.3;color:var(--muted)}
.gx .message.alerte{color:#ffb3a3}
.gx .message.conseil{color:var(--or)}
.gx .message.suppose{color:var(--astre)}
.gx .message.gagne{color:var(--or);font:700 15px/1.2 'GX Jost',sans-serif;padding-top:5px}
.gx .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 7px}
.gx .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.gx .outils button{min-height:42px;padding:9px 2px 7px;font-size:14px;white-space:nowrap;overflow:hidden}
.gx .outils button.large{grid-column:1/-1}
.gx .outils button.gomme.active{background:#8a2f3a;color:#fff;border-color:#ff9f8f}
.gx .outils button.what-if{color:var(--astre);border-color:#34478f}
.gx .outils button.what-if.active{background:var(--astre2);color:#fff;border-color:var(--astre)}

.gx .scores{gap:10px}
.gx h2.titre-scores{margin:0;font:700 26px 'GX Jost',sans-serif}
.gx .resultat{border-radius:12px;padding:10px;text-align:center;color:#070b1c;
 background:linear-gradient(160deg,#fff0b8,#ffd36b 60%,#e0a82c);box-shadow:0 0 0 3px #070b1c,0 0 0 5px #2a3470,0 0 26px rgba(255,211,107,.4)}
.gx .resultat .temps{font:700 40px 'GX Jost',sans-serif;font-variant-numeric:tabular-nums}
.gx .resultat p{margin:2px 0 0;font-size:14px}
.gx .resultat .record{color:#1d2f86;font-weight:750}
.gx .outils.bas{margin-top:auto;padding:0}
.gx .scores .note{margin-top:0}

.gx .tuto{gap:12px}
.gx h2.titre-tuto{margin:0;font:700 25px 'GX Jost',sans-serif;color:var(--or)}
.gx .tuto .cadre{align-self:center}
.gx svg.grille.illu{width:200px;height:200px}
.gx .points{display:flex;justify-content:center;gap:8px}
.gx .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.gx .points i.on{background:var(--or)}

.gx .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,8,22,.84);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.gx .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:14px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:var(--nuit2);border:1px solid var(--trait);box-shadow:0 0 0 3px #070b1c,0 0 0 5px #2a3470,0 12px 40px rgba(0,0,0,.7)}
.gx .fenetre h2{margin:0;font:700 25px 'GX Jost',sans-serif;color:var(--or)}
.gx .fenetre p{margin:0;font-size:14px;line-height:1.45;color:#d4d9f5}
.gx.compact header{height:44px;font-size:19px}
.gx.compact .hud{padding:5px 16px 3px}
.gx.compact .hud .niv{font-size:22px}
.gx.compact .hud .chrono{font-size:22px}
.gx.compact .hud small{margin-top:2px}
.gx.compact .message{height:35px;padding-top:3px;font-size:12px;line-height:1.25}
.gx.compact .message.gagne{font-size:14px}
.gx.compact .outils{padding-bottom:5px}