/* =====================================================================
   scenes.css — scènes HTML : connexion, hangar (base du joueur), barre du joueur, carte stellaire.
   Le HUD du jeu (zone) reste dans index.html. Thème : verre bleu sombre, liseré bleu vif, accents cyan / violet.
   ===================================================================== */
:root {
  --gl-bg: rgba(8, 20, 44, .74);
  --gl-line: rgba(84, 156, 255, .40);
  --gl-hi: #4fd6ff;
  --violet: #a35cff;
  --gl-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(120, 190, 255, .07) inset;
}
#scenes { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#scenes > * { pointer-events: auto; }
#scenes [hidden] { display: none !important; }
.scene { position: absolute; inset: 0; overflow: hidden; background: #040915; }
.scene .bgimg { position: absolute; inset: -4%; background-position: center; background-size: cover; will-change: transform; }
.scene .shade { position: absolute; inset: 0; pointer-events: none; }

/* ---------------------------------------------------------------- CONNEXION */
#login .bgimg { background-image: url(/login-bg.webp); animation: drift 70s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.10) translate(-1.6%, -1.2%); } }
/* filtre léger : la galaxie reste bien visible, mais assez sombre pour que le texte et les boutons ressortent */
#login .shade {
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgba(2, 7, 20, .50) 0%, rgba(2, 7, 20, .22) 62%, rgba(2, 7, 20, 0) 100%),
    linear-gradient(180deg, rgba(2, 6, 18, .30) 0%, rgba(2, 6, 18, .10) 45%, rgba(2, 6, 18, .50) 100%);
}
.loginBox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.logo { margin: 0; font-size: clamp(44px, 7.4vw, 92px); font-weight: 700; letter-spacing: .14em; line-height: 1; color: #eaf6ff;
  text-shadow: 0 0 24px rgba(80, 190, 255, .55), 0 0 64px rgba(40, 130, 255, .45), 0 3px 0 rgba(0, 0, 0, .35); }
  /* le 0 est la signature du jeu : même taille, en cyan lumineux */
.logo em { font-style: normal; color: var(--gl-hi); text-shadow: 0 0 22px rgba(79, 214, 255, .8), 0 0 60px rgba(40, 170, 255, .55), 0 3px 0 rgba(0, 0, 0, .35); }
.tag { margin: 18px 0 26px; font-size: clamp(15px, 1.5vw, 19px); color: #bcd4ee; letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.card { width: min(380px, 92vw); display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 16px; text-align: left; border-radius: 10px;
  background: rgba(6, 16, 38, .62); border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8fb3dd; }
.card input[type=text], .card input[type=password] { width: 100%; padding: 12px 14px; font: inherit; font-size: 17px; color: #eaf6ff; background: rgba(4, 12, 30, .8); border: 1px solid rgba(100, 165, 255, .35); border-radius: 6px; outline: none; }
.card input[type=text]:focus, .card input[type=password]:focus { border-color: var(--gl-hi); box-shadow: 0 0 0 3px rgba(79, 214, 255, .18); }
.card input::placeholder { color: #5f7ba0; }
.btn { padding: 12px 16px; font-size: 16px; letter-spacing: .05em; color: #dcebff; background: rgba(20, 44, 88, .7); border: 1px solid rgba(100, 165, 255, .42); border-radius: 6px; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { background: rgba(32, 66, 128, .85); border-color: var(--gl-hi); }
.btn:active { transform: translateY(1px); }
.btn.primary { color: #04101f; font-weight: 700; background: linear-gradient(180deg, #6fe0ff, #2fa4ff); border-color: #9be9ff; box-shadow: 0 0 22px rgba(60, 180, 255, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #8ae8ff, #48b4ff); box-shadow: 0 0 30px rgba(80, 200, 255, .55); }
.btn.small { padding: 8px 12px; font-size: 14px; width: 100%; }
.or { display: flex; align-items: center; gap: 12px; color: #6f89ad; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(110, 160, 230, .25); }
#loginMsg { min-height: 18px; font-size: 14px; color: #ff8a7a; }
.hint { margin-top: 14px; color: #8ea9cc; font-size: 13px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }

/* ---------------------------------------------------------------- BARRE DU JOUEUR */
#playerBar { position: fixed; top: 14px; right: 16px; z-index: 12; display: flex; align-items: flex-start; gap: 10px; }
/* (07/10) la boîte de la barre est aussi haute que le panneau Niveau : sous les onglets elle « avalait » les clics (bouton AMIS · CLAN de la page COMMUNAUTÉ) — seuls ses éléments captent la souris */
#playerBar { pointer-events: none; } #playerBar > * { pointer-events: auto; }
.acctCol { width: 248px; display: flex; flex-direction: column; gap: 8px; }
/* ---- onglets de scène (Hangar / Atelier / Carte stellaire), à gauche de la barre du compte ---- */
/* (11/10) icône + nom court en dessous (avant : icônes seules) */
#sceneTabs { display: flex; gap: 8px; }
#sceneTabs .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; height: 46px; padding: 0 6px; color: #9fc0e6; background: linear-gradient(180deg, rgba(18, 52, 86, .72), rgba(10, 30, 62, .78));
  border: 1px solid rgba(84, 156, 255, .30); border-radius: 6px; transition: border-color .15s, box-shadow .15s, color .15s, background .15s; }
#sceneTabs .tab svg { opacity: .85; flex: none; }
/* (11/10, demandé : interface plus claire) le NOM sous chaque icône — on ne devinait pas l'Atelier (flacon) ni la Communauté */
#sceneTabs .tab span { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
#sceneTabs .tab:hover { color: #eaf6ff; border-color: rgba(120, 190, 255, .55); }
#sceneTabs .tab.on { color: #eaf6ff; border-color: var(--gl-hi); background: linear-gradient(180deg, rgba(30, 90, 150, .65), rgba(14, 44, 88, .78)); box-shadow: 0 0 0 1px rgba(79, 214, 255, .25) inset, 0 0 16px rgba(79, 214, 255, .35); }
#sceneTabs .tab.on svg { opacity: 1; color: var(--gl-hi); }
@media (max-width: 900px) { #playerBar { flex-direction: column; align-items: flex-end; gap: 6px; } }
.glass { color: #d6ecff; background: linear-gradient(180deg, rgba(18, 52, 86, .82), rgba(10, 30, 62, .86)); border: 1px solid #2f7fd0;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(90, 180, 255, .22) inset, 0 0 14px rgba(40, 140, 255, .26), 0 6px 18px rgba(0, 0, 0, .4); }
.prow { display: flex; gap: 8px; align-items: stretch; }
.pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 12px; text-align: left; }
.pill svg { flex: none; color: #62c2ff; }
.pill b { font-size: 17px; font-weight: 700; color: #f2f9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.ico { flex: none; justify-content: center; padding: 7px 11px; } .pill.ico:hover { border-color: var(--gl-hi); box-shadow: 0 0 0 1px rgba(90, 180, 255, .3) inset, 0 0 16px rgba(79, 214, 255, .45); }
.xp { padding: 8px 10px 9px; }
.xp .lvl { font-size: 12px; letter-spacing: .04em; color: #56b6ff; margin-bottom: 5px; } .xp .lvl b { font-weight: 700; }
.xpbar { position: relative; height: 18px; border: 1px solid #2f5fa8; border-radius: 3px; background: #061430; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #0a2a9a 0%, #1f78e6 55%, #62c8ff 100%); transition: width .5s ease; }
.xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #e4f4ff; text-shadow: 0 1px 3px rgba(0, 8, 30, .9); }
.xpbar.max span { color: #05132e; text-shadow: 0 0 6px rgba(160, 220, 255, .55); } /* niveau max : barre pleine et claire, texte sombre */
.pop { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.pop .pt { font-size: 11px; letter-spacing: .16em; color: #7fa6d8; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #b9d0ee; cursor: pointer; }
.chk input { accent-color: var(--gl-hi); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- HANGAR */
#hangar .bgimg { background-image: url(/bg_base.webp); animation: none; } /* (27/09, demandé) fond de la BASE partout (vaisseau, atelier, carte) : coin clair en haut à droite de l'image fournie (bg_base.webp, 2560 × 1440) */
#hangar .shade { background: radial-gradient(ellipse at 50% 42%, rgba(3, 10, 26, .12), rgba(2, 6, 18, .50)); } /* léger voile sur les bords : le bleu reste bien visible, les panneaux ressortent */
/* page « Carte stellaire » (aperçu) : même fond galaxie que la connexion, plutôt que le bleu du hangar */
#hangar[data-bg="map"] .bgimg { background-image: url(/login-bg.webp); animation: drift 70s ease-in-out infinite alternate; } /* (28/09, demandé) la CARTE STELLAIRE garde le fond bleu de la connexion ; le reste de la base : bg_base.webp */
#hangar[data-bg="map"] .shade {
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgba(2, 7, 20, .50) 0%, rgba(2, 7, 20, .22) 62%, rgba(2, 7, 20, 0) 100%),
    linear-gradient(180deg, rgba(2, 6, 18, .30) 0%, rgba(2, 6, 18, .10) 45%, rgba(2, 6, 18, .50) 100%);
}
/* pages du hangar (Hangar / Atelier / Carte stellaire) : une seule visible à la fois, plein cadre sous la barre du compte */
#pageBase, .mapPreviewWrap { position: absolute; inset: 0; }
/* ATELIER : même colonne centrale que le Hangar (#centerHangar), mais un seul panneau qui prend toute la hauteur
   plutôt que le duo vaisseau/soute — cf. .center pour le grid-template-rows par défaut, écrasé ici. */
#centerAtelier { display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; }
#centerAtelier .panel.atelier { flex: 1; min-height: 0; }
.atelierHead .hn { grid-column: 1 / -1; } /* pas de flèches précédent/suivant ici : le titre reprend toute la largeur */
.panel.atelier .sub { margin: 10px 18px 4px; font-size: 13px; color: #8fb0d8; }
.panel.atelier .sub b { color: #e9f4ff; font-weight: 600; }
.mapPreviewWrap { display: grid; place-items: center; padding: clamp(14px, 2vw, 30px); }
.panel.mapPreview { width: min(620px, 92vw); max-height: 82vh; padding-bottom: 20px; }
.panel.mapPreview .sub { margin: 12px 16px 16px; font-size: 13.5px; color: #8fb0d8; }
.panel.mapPreview .sub b { color: #e9f4ff; font-weight: 600; }
.hgrid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(230px, 21%) minmax(430px, 1fr) minmax(250px, 24%); gap: clamp(12px, 1.6vw, 26px); padding: clamp(14px, 2vw, 30px); }
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--gl-bg); border: 1px solid var(--gl-line); border-radius: 8px; box-shadow: var(--gl-shadow);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: relative; }
.panel::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gl-hi), transparent); opacity: .65; border-radius: 2px; }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 14px 9px; font-size: 13px; letter-spacing: .2em; color: #a8cbf5; border-bottom: 1px solid rgba(90, 150, 240, .18); }
.panel > header em { font-style: normal; letter-spacing: .06em; font-size: 12px; color: #6f8fb8; } .panel > header em b { color: var(--gl-hi); font-weight: 600; }
.slots { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
#invSlots { grid-template-rows: repeat(12, minmax(0, 1fr)); }
#holdSlots { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.slot { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; user-select: none; border: 1px solid rgba(90, 150, 255, .22); background: rgba(8, 22, 50, .55); border-radius: 4px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .4); }
.slot:hover { border-color: rgba(120, 190, 255, .5); }
.center { display: grid; grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 26px); min-height: 0; min-width: 0; }

/* vaisseau : en-tête avec flèches, sprite + coloris à gauche, statistiques à droite */
.shipHead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px 8px; border-bottom: 1px solid rgba(90, 150, 240, .18); }
.hn { text-align: center; min-width: 0; }
.hn h2 { margin: 0; font-size: clamp(20px, 2vw, 27px); letter-spacing: .18em; text-transform: uppercase; color: #eef8ff; text-shadow: 0 0 14px rgba(79, 214, 255, .45); }
.hn p { margin: 3px 0 0; font-size: 12.5px; color: #8fb0d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow { width: 38px; height: 38px; display: grid; place-items: center; padding: 0 0 3px; font-size: 28px; line-height: 1; color: #cfe8ff; background: rgba(20, 46, 92, .65); border: 1px solid rgba(100, 165, 255, .4); border-radius: 6px; }
.arrow:hover { border-color: var(--gl-hi); background: rgba(32, 70, 132, .85); box-shadow: 0 0 14px rgba(79, 214, 255, .35); }
.shipBody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 46%) 1fr; gap: 6px; padding: 8px 10px 12px 8px; }
.viewer { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.viewer .glow { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(60, 140, 255, .32) 0%, rgba(40, 90, 200, .12) 45%, transparent 70%); pointer-events: none; }
#shipImg { position: relative; flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); animation: bob 6s ease-in-out infinite; }
#shipImg.swap { animation: swapIn .38s ease-out, bob 6s ease-in-out .38s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes swapIn { from { opacity: 0; transform: scale(.86) translateY(8px); } to { opacity: 1; transform: none; } }
.viewer .idx { position: absolute; left: 4px; top: 2px; font-size: 12px; letter-spacing: .12em; color: #6f8fb8; }
.chromaBox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 6px; }
#chromaName { font-size: 12px; letter-spacing: .08em; color: #8fb0d8; }
#chroma { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
/* (09/10) couleur des TIRS : petites barres lumineuses (comme un tir) sous les coloris */
#shotName { font-size: 12px; letter-spacing: .08em; color: #8fb0d8; margin-top: 2px; }
#shotColors { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.sw.tcw { width: 22px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.0), var(--c) 35%, #fff 80%, var(--c)); box-shadow: 0 0 6px var(--c), 0 0 0 1px rgba(0,0,0,.5); }
.sw { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .5); transition: transform .12s, box-shadow .12s, border-color .12s; }
.sw:hover { transform: scale(1.15); border-color: #fff; }
.sw.on { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 2px var(--gl-hi), 0 0 12px var(--c); }
.stats { min-height: 0; display: flex; flex-direction: column; padding: 4px 6px 0 10px; font-size: 13.5px; }
.statsScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
.statsPick { flex: none; } /* épinglé en bas : ne bouge pas quand le texte au-dessus change de longueur */
.st { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; margin-bottom: 8px; }
.st .k, .ln .k { color: #8fb0d8; } .st .v, .ln .v { color: #eaf6ff; text-align: right; }
.st .b { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(90, 140, 230, .16); position: relative; overflow: hidden; }
.st .b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--f); border-radius: 2px; background: linear-gradient(90deg, #2f6bff, #4fd6ff); }
.stats .sec { margin: 12px 0 5px; padding-top: 9px; border-top: 1px dashed rgba(100, 160, 240, .22); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7fa6d8; }
.stats .sec.ultSec { display: flex; align-items: center; gap: 8px; }
.stats .sec .ultIc { width: 26px; height: 26px; border-radius: 5px; flex: none; } /* (01/10) illustration des ultimes */
.ln { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.stats .note { margin: 9px 0 4px; font-size: 12px; line-height: 1.4; color: #7f9bc0; }
.shipPicker { display: flex; flex-wrap: wrap; gap: 7px; }
.shipPicker .spk { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 6px 4px 5px; background: rgba(20, 40, 86, .4); border: 1px solid rgba(110, 160, 240, .25); border-radius: 6px; transition: border-color .12s, background .12s, transform .1s; }
.shipPicker .spk:hover { border-color: rgba(140, 190, 255, .55); transform: translateY(-1px); }
.shipPicker .spk.on { border-color: var(--gl-hi); background: rgba(30, 90, 150, .38); box-shadow: 0 0 0 1px rgba(79, 214, 255, .3) inset, 0 0 10px rgba(79, 214, 255, .35); }
.shipPicker .spk img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.shipPicker .spk span { font-size: 10px; letter-spacing: .03em; color: #9fc0e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shipPicker .spk.on span { color: #eaf6ff; font-weight: 600; }

/* armes (à droite) + bouton de la carte stellaire */
/* mêmes proportions que la colonne centrale (VAISSEAU 1.6fr / SOUTE 1fr, cf. .center) : le repère ARMES/ITEMS suit VAISSEAU/SOUTE
   à toute hauteur d'écran, plutôt qu'un padding fixe qui ne tenait que par coïncidence à une seule taille de fenêtre. */
.right { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: clamp(10px, 1.4vw, 18px); padding-top: 88px; min-height: 0; min-width: 0; } /* (06/10) ARMES / CHAT / ITEMS / CARTE (avant : ARMES 1.6fr / ITEMS 1fr) */
/* compact et sans étirement : la liste s'arrête à sa hauteur naturelle (5 armes), pour s'aligner avec le bas de la fenêtre du
   vaisseau (colonne centrale) plutôt que de remplir tout le reste de la colonne — cet espace libéré accueillera plus tard
   le compartiment d'activation des items (voir le brainstorm en cours). */
.weapons { grid-row: 1; min-height: 0; max-height: 34vh; overflow-y: auto; }
#wpnList { display: grid; grid-auto-rows: min-content; gap: 5px; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
.wpn { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 5px 10px 5px 11px; text-align: left; color: #d6e8ff; background: rgba(12, 30, 66, .6); border: 1px solid rgba(90, 150, 240, .25); border-left: 4px solid var(--c); border-radius: 5px; transition: background .15s, border-color .15s, box-shadow .15s; }
.wpn:hover { background: rgba(22, 50, 104, .75); border-color: rgba(130, 190, 255, .55); border-left-color: var(--c); }
.wpn.on { background: rgba(26, 60, 124, .85); border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset, 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); }
.wpn .wt { display: flex; align-items: baseline; gap: 8px; } .wpn .wt b { font-size: 14px; color: #f2f9ff; letter-spacing: .04em; }
.wpn .wt em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7f9bc0; border: 1px solid rgba(120, 160, 220, .3); border-radius: 8px; padding: 0 6px; }
.wpn .wr { font-size: 11px; line-height: 1.2; color: #86a4cc; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wpn .wn { font-size: 11.5px; color: var(--c); font-weight: 600; }
.wpn.ro, .wpn.ro:hover { cursor: default; background: rgba(12, 30, 66, .6); border-color: rgba(90, 150, 240, .25); border-left-color: var(--c); } /* (10/10) panneau ARMES en lecture seule */

/* ---- compartiment d'items (aperçu, brainstorm en cours) : mêmes proportions que SOUTE en face, dans la colonne centrale ---- */
/* rangée fixe (2) : le placement automatique de la grille décale tout le monde d'un cran dès qu'un élément au-dessus est
   masqué (ARMES en Atelier) ; le bouton CARTE STELLAIRE hériterait alors de la rangée `1fr` au lieu de sa rangée `auto`
   fixe et changerait de taille. Rangées figées pour que le bouton garde TOUJOURS la même taille. */
.panel.items { grid-row: 3; min-height: 0; }
.right > .ghost { visibility: hidden; pointer-events: none; } /* (06/10) gardé à sa place mais invisible (pages Atelier, Boutique, Groupe) */
.panel.items > header em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7f9bc0; }
.itemSlots { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 10px 8px 12px; }
/* (27/09, demandé) emplacements A / Z / E en CASES CARRÉES, comme la barre d'items en zone (icône, touche en haut à gauche, nombre dans la soute en bas à droite) */
.islot { position: relative; flex: none; width: 76px; height: 76px; display: block; }
.islot .key { position: absolute; left: 5px; top: 3px; z-index: 3; font-size: 12px; font-weight: 800; color: #e8f4ff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.islot .isl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed rgba(110, 160, 240, .4); border-radius: 8px; background: rgba(8, 22, 50, .75); transition: border-color .12s, background .12s; }
.islot .isl.over { border-color: var(--gl-hi); background: rgba(30, 90, 150, .35); box-shadow: 0 0 12px rgba(79, 214, 255, .5); }
.islot .isl.has { border-style: solid; border-color: rgba(140, 190, 255, .55); }
.islot .isl .ic { position: absolute; inset: 7px; width: auto; height: auto; }
.islot .isl b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* (nom : dans l'infobulle) */
.islot .isl .ph { font-size: 26px; font-weight: 300; color: #5f7fa8; }
.islot .isl .clr { position: absolute; right: 2px; top: 2px; z-index: 4; width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 14px; color: #ffb3a8; background: rgba(40, 8, 12, .75); border: 1px solid rgba(255, 110, 90, .45); border-radius: 3px; opacity: 0; transition: opacity .12s; }
.islot .isl.has:hover .clr { opacity: 1; }
.islot .isl .qn { position: absolute; right: 5px; bottom: 3px; z-index: 3; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.islot .isl.empty .qn { color: #ff8a7a; } /* rien dans la soute : l'emplacement ne servira à rien en combat */
.islot .isl.empty .ic { opacity: .35; filter: grayscale(.8); }
.itemsHint { margin: 6px 12px 0; font-size: 11px; line-height: 1.35; color: #ffb4aa; }
.itemsHint[hidden] { display: none; }
.islot .isl .clr:hover { color: #fff; background: #b3261e; }
.itemsTip { margin: 0 12px 6px; font-size: 10px; line-height: 1.25; color: #5f7fa8; }
.mapBtn { grid-row: 4; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 18px; color: #f3e9ff; text-align: left;
  background: linear-gradient(135deg, rgba(126, 64, 210, .62), rgba(62, 32, 130, .7)); border: 1px solid var(--violet); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(200, 160, 255, .14) inset, 0 8px 26px rgba(90, 40, 180, .4); transition: box-shadow .15s, background .15s, transform .05s; }
.mapBtn:hover { background: linear-gradient(135deg, rgba(150, 84, 236, .78), rgba(80, 42, 160, .82)); box-shadow: 0 0 0 1px rgba(220, 190, 255, .3) inset, 0 0 32px rgba(163, 92, 255, .55); }
.mapBtn:active { transform: translateY(1px); }
.mapBtn svg { flex: none; color: #d9b8ff; }
.mapBtn b { display: block; font-size: 16px; letter-spacing: .14em; } .mapBtn small { display: block; margin-top: 2px; font-size: 12px; letter-spacing: .06em; color: #c4a6ee; }

/* ---------------------------------------------------------------- CARTE STELLAIRE */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(2, 5, 14, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mcard { width: min(460px, 94vw); max-height: 88vh; padding-bottom: 16px; border-color: rgba(163, 92, 255, .55); }
.mcard > header { position: relative; } .mcard .x { position: absolute; right: 8px; top: 5px; width: 30px; height: 30px; padding: 0; font-size: 22px; line-height: 1; color: #9fb4d4; background: none; border: 0; } .mcard .x:hover { color: #fff; }
.mcard .sub { margin: 12px 16px 6px; font-size: 13.5px; color: #8fb0d8; } .mcard .sub b { color: #e9f4ff; font-weight: 600; }
#mapZones { display: grid; gap: 8px; padding: 6px 16px 10px; overflow-y: auto; }
.zone { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; color: #dcebff; background: rgba(20, 40, 86, .6); border: 1px solid rgba(110, 160, 240, .32); border-radius: 6px; text-align: left; transition: background .15s, border-color .15s, box-shadow .15s; }
.zone b { font-size: 16.5px; } .zone span { font-size: 12px; color: #7f9bc0; letter-spacing: .06em; }
.zone:hover { background: rgba(50, 40, 110, .75); border-color: var(--violet); box-shadow: 0 0 20px rgba(163, 92, 255, .3); }
.mcard .chk { margin: 4px 16px 0; }
.empty { margin: 8px 0; color: #8fb0d8; font-size: 14px; }

button:focus-visible, input:focus-visible { outline: 2px solid var(--gl-hi); outline-offset: 2px; }
@media (max-height: 820px) { /* (11/10 : .right calée sur --acctB, plus de valeur fixe) */ .stats { font-size: 12.5px; } .st { margin-bottom: 6px; } } /* écran bas */
@media (prefers-reduced-motion: reduce) { #login .bgimg, #shipImg, #shipImg.swap { animation: none !important; } }

.card input:disabled, .card .btn:disabled { opacity: .6; cursor: default; }

/* objets de l'inventaire et de la soute */
.slot.has { cursor: grab; border-color: color-mix(in srgb, var(--ic) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 13%, rgba(8, 22, 50, .6)), rgba(8, 22, 50, .55)); }
.slot.has:hover { border-color: var(--ic); box-shadow: inset 0 0 12px rgba(0, 0, 0, .4), 0 0 12px color-mix(in srgb, var(--ic) 40%, transparent); }
.slot.has:active { cursor: grabbing; }
.slot .ic { width: 28px; height: 28px; flex: none; color: var(--ic); filter: drop-shadow(0 0 5px var(--ic)); pointer-events: none; }
.slot .q { position: absolute; right: 6px; bottom: 3px; font-size: 13px; font-weight: 700; color: #eaf6ff; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; }
.slot .nm { display: none; font-size: 14px; color: #cfe4ff; pointer-events: none; }
#holdSlots .slot .nm { display: block; }
.slot .fill { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--f); background: var(--ic); opacity: .8; pointer-events: none; }
.slot.sel { outline: 2px solid var(--gl-hi); outline-offset: -2px; }
.slot.over { border-color: var(--gl-hi) !important; background: rgba(40, 110, 200, .38) !important; }
.slot.drag { opacity: .35; }
.bagTip { padding: 0 14px 9px; font-size: 12px; color: #7f9bc2; letter-spacing: .02em; }

/* bandeau d'information du hangar (soute perdue, départ en cours…) */
#notice { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 14px; max-width: min(720px, 60vw); padding: 11px 14px 11px 18px; font-size: 15px; line-height: 1.35; color: #ffd9d3; background: rgba(50, 12, 16, .9); border: 1px solid #b04a44; border-radius: 8px; box-shadow: 0 0 24px rgba(255, 80, 60, .25); }
#notice[hidden] { display: none; }
#notice button { flex: none; width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; color: #ffb4aa; background: none; border: 0; cursor: pointer; }
#notice button:hover { color: #fff; }

/* soute (cases larges) : nom à gauche (tronqué si besoin), quantité à droite, jamais collés */
#holdSlots .slot { justify-content: flex-start; padding: 0 46px 0 10px; }
#holdSlots .slot .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#guestNote { max-width: 230px; margin: 2px 0 8px; font-size: 12px; line-height: 1.4; color: #9ab3d8; }
#guestNote[hidden] { display: none; }

/* ---------------------------------------------------------------- LABORATOIRE */
/* grille de cartes de fabrication (une par recette) : icône/nom/quantité du minerai brut, ratio, puis du produit, puis les boutons */
#centerAtelier .panel.atelier { display: flex; flex-direction: column; }
.labScroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.labSec { display: flex; align-items: baseline; gap: 10px; margin: 12px 18px 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #9fc6f2; }
.labSec span { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: #6f8fb8; }
#labRows { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 10px 18px 6px; align-content: start; }
/* items de combat : une carte par item — le produit en haut, les ingrédients (possédé / requis ; rouge s'il en manque), puis les boutons */
#labItems { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 10px 18px 6px; align-content: start; }
.craftCard.itemCard { gap: 8px; }
.craftCard.itemCard .cBtns { margin-top: auto; } /* boutons alignés en bas, quel que soit le nombre d'ingrédients */
.itemCard .cIngr { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; background: rgba(8, 20, 48, .5); border-radius: 6px; }
.itemCard .cIngr div { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #c9dcf5; text-align: left; }
.itemCard .cIngr .ic { width: 17px; height: 17px; flex: none; color: var(--ic); }
.itemCard .cIngr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemCard .cIngr b { font-weight: 700; color: #eaf4ff; } .itemCard .cIngr em { min-width: 34px; font-style: normal; font-weight: 700; text-align: right; color: #8fe0a8; }
.itemCard .cIngr div.miss em { color: #ff9a8c; } /* (11/10) requis, puis ✓ ou ce qui manque */
.craftCard { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 14px 14px; text-align: center;
  background: rgba(20, 40, 86, .55); border: 1px solid rgba(110, 160, 240, .28); border-radius: 10px; transition: border-color .15s; }
.craftCard:hover { border-color: rgba(140, 190, 255, .48); }
.craftCard .cSide { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ic); }
.craftCard .cSide .ic { width: 30px; height: 30px; }
.craftCard .cSide b { font-size: 13px; font-weight: 600; color: #eaf6ff; line-height: 1.2; }
.craftCard .cSide .cq { font-size: 15px; font-weight: 700; color: var(--ic); }
.craftCard .cArrow { font-size: 11.5px; letter-spacing: .04em; color: #7fa6d8; margin: 1px 0; } .craftCard .cArrow b { display: block; font-size: 15px; color: #d6ecff; line-height: 1.1; }
.craftCard .cBtns { display: flex; gap: 6px; margin-top: 6px; }
.craftCard .cBtns button { flex: 1; min-width: 0; padding: 7px 6px; font-size: 12.5px; font-weight: 600; color: #e4f4ff; background: rgba(26, 62, 122, .75); border: 1px solid rgba(100, 165, 255, .45); border-radius: 5px; cursor: pointer; }
.craftCard .cBtns button:hover:not(:disabled) { border-color: var(--gl-hi); box-shadow: 0 0 12px rgba(79, 214, 255, .35); }
.craftCard .cBtns button:disabled { opacity: .35; cursor: default; }
.labMsg { min-height: 20px; margin: 2px 18px 8px; font-size: 13.5px; color: #8fe0a8; } .labMsg.bad { color: #ffb4aa; }

/* ---------------------------------------------------------------- SOUTE / CAISSE EN ZONE (panneau du jeu) */
/* Icône de soute : en haut de la boîte « Portées d'attaque » (colonne gauche du HUD) ; le panneau glisse depuis la gauche et RESTE ancré à gauche, la caisse s'ouvre à sa droite */
#cargoPanel { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 12px; align-items: flex-end;   /* (30/09, 21 h 55) EN BAS À GAUCHE, à 14 px du bord comme la minimap (avant : top max(300px, 50% - 140px)) ; la caisse s'ouvre à sa droite, alignée en bas */ width: max-content; max-width: calc(100vw - 240px); z-index: 6; pointer-events: auto; animation: cargoIn .22s ease-out; }
@keyframes cargoIn { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
#crateCol { animation: crateIn .18s ease-out; } @keyframes crateIn { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
#cargoPanel[hidden], #cargoPanel [hidden] { display: none; }
#cargoPanel .cbox { width: 320px; flex: none; }
#cargoPanel .cbox > header { align-items: center; gap: 8px; } #cargoPanel .cbox > header > span { flex: 1; }
#cargoPanel .cbox > header em { display: flex; gap: 8px; align-items: baseline; } #cargoPanel .cbox > header em b { color: #ffcf6a; min-width: 30px; text-align: right; } #cargoPanel .cbox > header em b.low { color: #ff6a5a; animation: dry 1s ease-in-out infinite; }
#cargoPanel .cx { width: 26px; height: 26px; padding: 0; font-size: 20px; line-height: 1; color: #9fb4d4; background: none; border: 0; cursor: pointer; } #cargoPanel .cx:hover { color: #fff; }
.cslots { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40px; gap: 6px; padding: 10px; }
.cslots .slot { justify-content: flex-start; gap: 7px; padding: 0 38px 0 7px; }
.cslots .slot .ic { width: 22px; height: 22px; }
.cslots .slot .nm { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.1; }
.cslots .slot .q { right: 6px; bottom: 3px; font-size: 12.5px; }
.cdrop { margin: 0 10px 8px; padding: 9px; text-align: center; font-size: 13px; letter-spacing: .12em; color: #ffcf6a; border: 1px dashed rgba(255, 207, 106, .55); border-radius: 5px; background: rgba(255, 190, 60, .06); cursor: pointer; transition: background .12s, border-color .12s; }
.cdrop:hover, .cdrop.over { background: rgba(255, 190, 60, .2); border-color: #ffcf6a; }
.cdrop.dim { opacity: .45; }
.ctake { display: block; width: calc(100% - 20px); margin: 0 10px 10px; padding: 10px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #0a1a10; background: linear-gradient(#6dffa4, #33d676); border: 0; border-radius: 5px; cursor: pointer; box-shadow: 0 0 12px rgba(77, 255, 136, .35); transition: filter .12s, box-shadow .12s; }
.ctake:hover { filter: brightness(1.12); box-shadow: 0 0 18px rgba(77, 255, 136, .6); }
.ctake.dim { opacity: .4; pointer-events: none; }
.ctip { margin: 0 12px 10px; font-size: 11.5px; line-height: 1.35; color: #6f8fb8; }
@media (max-width: 900px) { #cargoPanel { left: 14px; top: 76px; bottom: auto; align-items: flex-start; transform: none; flex-direction: column; animation: none; max-width: none; } #cargoPanel .cbox { width: min(300px, 92vw); } }

#cargoPanel.dragging .cdrop { background: rgba(255, 190, 60, .16); border-color: #ffcf6a; animation: dropHint 1s ease-in-out infinite; }
@keyframes dropHint { 50% { box-shadow: 0 0 14px rgba(255, 207, 106, .55); } }

/* ---------- infobulle des objets (24/09) : 1,5 s de survol → la case grandit un peu + fiche soignée (src/client/itemtip.ts) ---------- */
.slot, .islot .isl, #itemBar .ib { transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), box-shadow .22s, border-color .22s; }
.slot .ic, .islot .isl .ic, #itemBar .ib .icw { transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), filter .22s; }
.slot.tipGrow, .islot .isl.tipGrow, #itemBar .ib.tipGrow { transform: scale(1.06); z-index: 3; border-color: var(--ic, #4fd6ff) !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .4), 0 0 0 1px color-mix(in srgb, var(--ic, #4fd6ff) 60%, transparent), 0 0 18px color-mix(in srgb, var(--ic, #4fd6ff) 55%, transparent) !important; }
.slot.tipGrow .ic, .islot .isl.tipGrow .ic { transform: scale(1.32); filter: drop-shadow(0 0 7px var(--ic)) brightness(1.12); }
#itemBar .ib.tipGrow .icw { transform: scale(1.12); }

.itemTip { position: fixed; z-index: 1000; width: 264px; padding: 12px 13px 11px; pointer-events: none; color: #d9ebff;
  font: 13px/1.35 inherit; font-family: inherit;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 16%, rgba(9, 20, 44, .96)) 0%, rgba(6, 14, 32, .97) 55%);
  border: 1px solid color-mix(in srgb, var(--ic) 55%, rgba(84, 156, 255, .3)); border-radius: 9px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .6), 0 0 22px color-mix(in srgb, var(--ic) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .16s ease-out, transform .2s cubic-bezier(.2, .9, .3, 1.2); }
.itemTip.on { opacity: 1; transform: none; }
.itemTip::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--ic), transparent); opacity: .9; }
.itemTip .itHead { display: flex; align-items: center; gap: 11px; }
.itemTip .itMed { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ic) 30%, transparent), rgba(4, 10, 24, .7) 70%);
  border: 1px solid color-mix(in srgb, var(--ic) 45%, transparent); }
.itemTip .itMed .ic { width: 34px; height: 34px; color: var(--ic); filter: drop-shadow(0 0 6px var(--ic)); }
.itemTip .itTtl { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.itemTip .itName { font-size: 15.5px; font-weight: 700; color: #f4faff; letter-spacing: .01em; text-shadow: 0 0 10px color-mix(in srgb, var(--ic) 45%, transparent); }
.itemTip .itFam { align-self: flex-start; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ic);
  padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--ic) 14%, transparent); }
.itemTip .itKey { flex: none; align-self: flex-start; min-width: 22px; padding: 2px 6px; text-align: center; font: 700 12px/1.3 inherit; font-family: inherit; color: #eaf6ff;
  border: 1px solid rgba(140, 190, 255, .45); border-bottom-width: 2px; border-radius: 4px; background: rgba(20, 40, 80, .6); }
.itemTip .itQty { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #bcd6f5; font-variant-numeric: tabular-nums; }
.itemTip .itBar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(90, 140, 230, .18); overflow: hidden; }
.itemTip .itBar i { position: absolute; inset: 0 auto 0 0; background: var(--ic); box-shadow: 0 0 6px var(--ic); border-radius: 2px; }
.itemTip .itDesc { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid rgba(120, 170, 255, .14); font-size: 12.5px; color: #a9c4e6; }
.itemTip .itLine { margin-top: 6px; font-size: 11.5px; color: #7f9fc8; padding-left: 10px; position: relative; }
.itemTip .itLine::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--ic); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .itemTip, .slot, .slot .ic, #itemBar .ib, #itemBar .ib .icw, .islot .isl { transition: none; } }

/* ---------- choix du côté d'arrivée (zones PvP « sides », 24/09) ---------- */
.zone .zsub { color: #ff9f7a !important; letter-spacing: .02em !important; }
.sidePick { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sidePick .spT { font-size: 17px; color: #eaf6ff; }
.sidePick .spS { margin: 0; font-size: 12.5px; line-height: 1.35; color: #8fb0d8; }
.sidePick .spGrid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; grid-template-rows: auto 1fr auto; gap: 8px; align-items: stretch; }
.sidePick .sp-n { grid-column: 2; grid-row: 1; } .sidePick .sp-o { grid-column: 1; grid-row: 2; } .sidePick .spMap { grid-column: 2; grid-row: 2; }
.sidePick .sp-e { grid-column: 3; grid-row: 2; } .sidePick .sp-s { grid-column: 2; grid-row: 3; }
.sidePick .spMap { display: grid; place-items: center; min-height: 78px; border: 1px solid rgba(110, 160, 240, .35); border-radius: 5px;
  background: radial-gradient(circle at 50% 50%, rgba(120, 140, 170, .35) 0 18%, transparent 19%), rgba(8, 20, 44, .6); }
.sidePick .spMap span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #5f7fa8; }
.sidePick .spB { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; font: inherit; font-size: 14px; font-weight: 600; color: #eaf6ff; cursor: pointer;
  background: rgba(255, 90, 60, .12); border: 1px solid rgba(255, 110, 80, .5); border-radius: 5px; transition: background .15s, box-shadow .15s, transform .12s; }
.sidePick .spB i { font-style: normal; color: #ff9f7a; }
.sidePick .spB:hover { background: rgba(255, 90, 60, .28); box-shadow: 0 0 14px rgba(255, 110, 80, .45); transform: translateY(-1px); }
.sidePick .spBack { align-self: flex-start; padding: 6px 10px; font: inherit; font-size: 12.5px; color: #9fc0e6; background: none; border: 1px solid rgba(110, 160, 240, .3); border-radius: 4px; cursor: pointer; }
/* (27/09) image de glisser-déposer d'un objet de la soute en zone : l'icône seule, 44 px, hors de l'écran le temps de la capturer */
.dragGhost { position: fixed; left: -200px; top: -200px; width: 44px; height: 44px; padding: 4px; border-radius: 7px; background: rgba(8, 22, 50, .85); border: 1px solid rgba(140, 190, 255, .6); }
.dragGhost svg { width: 100%; height: 100%; }
/* (27/09) croix « détruire » en haut à droite d'une pile (inventaire, soute) + fenêtre de confirmation */
.slot .del { position: absolute; top: 2px; right: 2px; z-index: 4; width: 20px; height: 20px; padding: 0; font: 700 16px/18px system-ui, sans-serif; color: #ffb3a8; background: rgba(40, 8, 12, .75); border: 1px solid rgba(255, 110, 90, .45); border-radius: 3px; cursor: pointer; opacity: .35; transition: opacity .12s, background .12s; }
.slot:hover .del { opacity: 1; }
.slot .del:hover { background: #b3261e; color: #fff; border-color: #ff8a7a; }
.cfmWrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 14, .6); }
.cfm { width: min(380px, 92vw); padding: 18px 20px 16px; background: rgba(9, 15, 30, .97); border: 1px solid rgba(255, 110, 90, .55); border-radius: 8px; box-shadow: 0 0 30px rgba(255, 80, 60, .25); color: #dbe6f7; }
.cfmT { display: block; font-size: 17px; letter-spacing: .04em; color: #ffcfc7; }
.cfmM { margin: 10px 0 16px; font-size: 14px; line-height: 1.4; color: #b8c7de; }
.cfmBtns { display: flex; justify-content: flex-end; gap: 10px; }
.cfmBtns button { padding: 8px 16px; font: inherit; font-size: 14px; border-radius: 5px; cursor: pointer; }
.cfmNo { color: #dbe6f7; background: #0b1630; border: 1px solid rgba(120, 160, 220, .35); }
.cfmYes { color: #fff; background: #b3261e; border: 1px solid #ff8a7a; font-weight: 700; }
.cfmYes:hover { background: #d0342a; }
/* (28/09) onglets de la soute (RESSOURCES / ITEMS), alignés sur le titre « SOUTE » */
.holdTabs { display: flex; gap: 6px; margin-left: auto; }
.holdTabs button { padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #8fa9cc; background: rgba(8, 22, 50, .6); border: 1px solid rgba(110, 160, 240, .3); border-radius: 5px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.holdTabs button b { margin-left: 6px; font-weight: 600; letter-spacing: 0; color: #6f8fb8; }
.holdTabs button:hover { color: #dbe6f7; border-color: rgba(140, 190, 255, .6); }
.holdTabs button.on { color: #fff; background: rgba(40, 90, 170, .55); border-color: #7fb0ff; box-shadow: 0 0 10px rgba(80, 150, 255, .35); }
.holdTabs button.on b { color: #cfe3ff; }

.holdTabs button { white-space: nowrap; }
#cargoPanel .holdTabs { gap: 4px; }
/* (06/10) pages de l'onglet RESSOURCES (soute du Linyx / du Bastion) et cases FERMÉES de la page 2 */
.holdPager { display: inline-flex; gap: 3px; }
.holdPager[hidden] { display: none; }
.holdTabs .holdPager button { padding: 4px 7px; letter-spacing: .04em; font-size: 10px; }
/* (11/10) pages de l'INVENTAIRE (la suivante s'achète) */
.invPager { display: flex; gap: 5px; padding: 8px 10px 0; } .invPager button { flex: 1; white-space: nowrap; padding: 5px 8px; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #9fb3d4; background: rgba(12, 28, 60, .7); border: 1px solid rgba(110, 160, 240, .3); border-radius: 4px; cursor: pointer; }
.invPager button.on { color: #fff; border-color: #7fe3ff; background: rgba(30, 80, 140, .8); }
.invPager button.lock { color: #ffcf5a; border-color: rgba(255, 207, 90, .5); background: rgba(60, 44, 10, .55); } .invPager button.lock:hover:not(:disabled) { background: rgba(90, 66, 14, .8); }
.invPager button.lock { flex: 2.2; } .invPager button.lock.far { color: #6f7f99; border-color: rgba(110, 130, 160, .25); background: rgba(12, 20, 40, .5); cursor: default; }
#cargoPanel .holdTabs .holdPager button { padding: 3px 5px; font-size: 9px; }
.slot.locked { background: repeating-linear-gradient(135deg, rgba(10, 16, 30, .75) 0 6px, rgba(30, 40, 60, .55) 6px 12px); border-color: rgba(120, 130, 150, .18); box-shadow: none; opacity: .55; }
.slot.locked::after { content: '🔒'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: .6; filter: grayscale(1); }
#cargoPanel .holdTabs button { padding: 3px 7px; font-size: 10px; letter-spacing: .06em; }
#cargoPanel .holdTabs button b { margin-left: 4px; }

/* (28/09, décidé : variante A) PASTILLE de catégorie : AMBRE + fiole = raffinage / ressources, VIOLET + épée = item de combat.
   En haut à gauche des cases (la croix « détruire » est en haut à droite) ; en bas à gauche dans les cases A / Z / E (la touche est en haut à gauche). */
:root { --k-res: #f5b83d; --k-cbt: #b36bff; }
[data-k=res] { --kc: var(--k-res); --kg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9.2%203h5.6M10.3%203v6.2L5.4%2018a2.2%202.2%200%200%200%201.9%203.3h9.4a2.2%202.2%200%200%200%201.9-3.3l-4.9-8.8V3%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E"); }
[data-k=cbt] { --kc: var(--k-cbt); --kg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2019%2019%205M14%205h5v5M4%2014l6%206M3%2021l3-3%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E"); }
.slot.has[data-k]::before, #itemBar .ib[data-k]::before, .islot .isl[data-k]::before { content: ''; position: absolute; left: 3px; top: 3px; z-index: 5; width: 15px; height: 15px; border-radius: 50%; background: var(--kc) var(--kg) center / 9px no-repeat; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 0 6px var(--kc); pointer-events: none; }
#itemBar .ib[data-k]::before, .islot .isl[data-k]::before { top: auto; bottom: 3px; width: 13px; height: 13px; background-size: 8px; }
.cslots .slot.has[data-k]::before { width: 13px; height: 13px; left: 2px; top: 2px; background-size: 8px; }
/* onglets de la soute aux mêmes couleurs */
.holdTabs button[data-t=res].on { background: rgba(245, 184, 61, .22); border-color: var(--k-res); box-shadow: 0 0 10px rgba(245, 184, 61, .35); color: #ffe2a6; }
.holdTabs button[data-t=items].on { background: rgba(179, 107, 255, .22); border-color: var(--k-cbt); box-shadow: 0 0 10px rgba(179, 107, 255, .35); color: #e6d2ff; }
.holdTabs button[data-t=res] { border-color: rgba(245, 184, 61, .35); }
.holdTabs button[data-t=items] { border-color: rgba(179, 107, 255, .35); }
.holdTabs button[data-t=res].on b { color: #ffe2a6; } .holdTabs button[data-t=items].on b { color: #e6d2ff; }

/* (28/09) bouton « RANGER » (rangement automatique) dans l'en-tête de l'inventaire et de la soute */
.sortBtn { margin-left: 10px; padding: 3px 9px; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #9fc0e6; background: rgba(8, 22, 50, .6); border: 1px solid rgba(110, 160, 240, .35); border-radius: 5px; cursor: pointer; white-space: nowrap; }
.sortBtn:hover { color: #fff; border-color: #7fb0ff; background: rgba(40, 90, 170, .45); }
.sortBtn.stashBtn { margin-left: 6px; color: #ffe2a6; border-color: rgba(255, 200, 100, .45); } /* (03/10) TOUT RANGER */
.sortBtn.stashBtn:hover { color: #fff; border-color: #ffcf6a; background: rgba(150, 100, 30, .45); }
.sortBtn.mini { margin-left: 6px; padding: 2px 6px; font-size: 12px; letter-spacing: 0; }

/* (28/09, demandé) titres de l'atelier aux couleurs des catégories (description au survol) */
.labSec.kRes { color: var(--k-res); cursor: help; }
.labSec.kCbt { color: var(--k-cbt); cursor: help; }

/* (28/09, demandé) indice « glisse tes items ici » : contour doré qui palpite autour des cases A / Z / E (hangar) et de la barre d'items (zone)
   quand l'onglet ITEMS de la soute est ouvert ou qu'un item de combat est en train d'être glissé */
.itemSlots.glow .islot .isl { border: 2px solid var(--k-cbt) !important; animation: azeGlow 1.1s ease-in-out infinite alternate; }
#itemBar.glow .ib { border: 2px solid var(--k-cbt) !important; animation: azeGlow 1.1s ease-in-out infinite alternate; }
@keyframes azeGlow { from { box-shadow: 0 0 8px rgba(179, 107, 255, .55), inset 0 0 8px rgba(179, 107, 255, .18); } to { box-shadow: 0 0 22px rgba(179, 107, 255, 1), inset 0 0 14px rgba(179, 107, 255, .35); } }
@media (prefers-reduced-motion: reduce) { .itemSlots.glow .islot .isl, #itemBar.glow .ib { animation: none; box-shadow: 0 0 12px rgba(179, 107, 255, .7); } }

/* (28/09) infobulle de texte (boutons, titres) : même fiche que les objets, plus étroite */
.itemTip.textTip { width: auto; max-width: 280px; padding: 9px 12px 8px; }
.itemTip.textTip .itName { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--ic); text-shadow: none; }
.itemTip.textTip .itDesc { margin: 0; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- (28/09) BASE DU JOUEUR : mini-zone derrière le hangar */
/* le hangar reste PAR-DESSUS la base : pas de fond d'image, voile léger, panneaux un peu transparents */
body.inBase #hangar:not([data-bg="map"]) { background: transparent; } /* (28/09) la scène était opaque (#040915) : la base n'était jamais visible derrière */
body.inBase #hangar:not([data-bg="map"]) .bgimg { display: none; } /* (la page carte stellaire garde son fond de la connexion) */
body.inBase #hangar:not([data-bg="map"]) .shade { background: radial-gradient(ellipse at 50% 45%, rgba(3, 10, 26, .0), rgba(2, 6, 18, .30)) !important; }
body.inBase #hangar .panel { background: rgba(9, 15, 30, .55) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* dans la base, pas d'interface de combat (seulement les messages, la fiche et l'infobulle des astéroïdes) */
body.inBase #hud > :not(#toast):not(#infoCard):not(#astTip) { display: none !important; }

/* (28/09) jeu FERMÉ temporairement : pas de compte invité ni de création de compte ; champ « code » discret (touche D) */
body.srvClosed #btnGuest, body.srvClosed #btnRegister, body.srvClosed #login .or, body.srvClosed #login .hint { display: none !important; }
#admKey { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: 150px; padding: 5px 8px; font: inherit; font-size: 12px; color: #9fb4d4; background: rgba(6, 12, 26, .7); border: 1px solid rgba(120, 160, 220, .25); border-radius: 5px; outline: none; z-index: 30; }
/* (28/09, demandé : « rends plus opaques les boutons, on voit trop à travers ») dans la base : panneaux plus couvrants, cases / cartes /
   boutons pleins ; les boutons grisés (×1, ×10, Tout…) ne sont plus transparents, seul leur texte est pâle */
body.inBase #hangar .panel { background: rgba(9, 15, 30, .72) !important; }
body.inBase #hangar .slot, body.inBase #hangar .islot .isl { background-color: rgba(8, 22, 50, .92); }
body.inBase #hangar .craftCard { background: rgba(16, 32, 70, .93); }
body.inBase #hangar .itemCard .cIngr { background: rgba(8, 20, 48, .92); }
body.inBase #hangar .wpn { background: rgba(12, 30, 66, .93); }
body.inBase #hangar .wpn.on { background: rgba(26, 60, 124, .95); }
body.inBase #hangar .craftCard .cBtns button { background-color: rgba(12, 28, 62, .95); }
body.inBase #hangar .craftCard .cBtns button:disabled { opacity: 1; color: rgba(228, 244, 255, .32); background: rgba(10, 22, 48, .95); border-color: rgba(110, 160, 240, .15); }
body.inBase #hangar .holdTabs button, body.inBase #hangar .sortBtn, body.inBase #hangar .arrow { background-color: rgba(8, 22, 50, .95); }

/* (28/09) CRÉDITS : solde à côté du pseudo, boutique, croix = vendre (à la base) */
:root { --cr: #ffd866; }
.pill.cred { flex: none; gap: 5px; padding: 7px 10px; cursor: default; position: relative; }
.pill.cred svg { color: var(--cr); }
.pill.cred b { font-size: 15px; color: #fff4cf; font-variant-numeric: tabular-nums; }
.pill.cred small { font-size: 11px; color: var(--cr); letter-spacing: .04em; }
.pill.cred.gain { border-color: var(--cr); box-shadow: 0 0 14px rgba(255, 216, 102, .45); transition: box-shadow .2s, border-color .2s; }
.crPop { position: absolute; right: 8px; top: 100%; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--cr); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); pointer-events: none; white-space: nowrap; animation: crPop 1.4s ease-out forwards; }
.crPop.minus { color: #ffb4aa; }
@keyframes crPop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(18px); } }
.slot .del.sell:hover { color: #1b1300; background: var(--cr); border-color: var(--cr); }
#centerShop .panel.shop { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.shopBal { margin: 8px 18px 0; font-size: 13px; color: #b9cde8; } .shopBal b { font-size: 16px; color: #fff4cf; font-variant-numeric: tabular-nums; }
.shopGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 10px 18px 6px; align-content: start; }
.shopCard .cPrice { font-size: 15px; font-weight: 700; color: var(--cr); } .shopCard .cPrice small { font-size: 11px; font-weight: 500; color: #b9a870; }
.shopCard .cSell { font-size: 11.5px; color: #7f9bc0; }
.shopCard .cBtns button { display: flex; flex-direction: column; align-items: center; gap: 1px; } .shopCard .cBtns button small { font-size: 10.5px; font-weight: 500; color: #ffe8a3; }
.shopCard .cBtns button:disabled small { color: inherit; }
body.inBase #hangar .shopBal { text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }

.slot .del.sell { color: #ffe39a; background: rgba(40, 30, 6, .78); border-color: rgba(255, 216, 102, .5); }
.cfm.sell { border-color: rgba(255, 216, 102, .55); box-shadow: 0 0 30px rgba(255, 216, 102, .2); } .cfm.sell .cfmT { color: #ffe39a; }
.cfm.sell .cfmYes { color: #1b1300; background: linear-gradient(180deg, #ffe08a, #e0b23c); border-color: #ffd866; }
.cfm.sell .cfmYes:hover { box-shadow: 0 0 14px rgba(255, 216, 102, .55); }
#centerShop { display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; }
/* (28/09) icône des crédits (fournie par l'utilisateur, annexe/icones/credits_original.png) */
.crIco { width: 22px; height: 22px; flex: none; vertical-align: -5px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.shopCard .cPrice .crIco { width: 20px; height: 20px; }
/* (28/09, demandé) la colonne du centre (Hangar / Atelier / Boutique) démarre SOUS les onglets en haut à droite (14 px + 38 px + marge),
   sinon ils passaient par-dessus le haut des fenêtres (flèche « vaisseau suivant », titres). */
/* (11/10) calées sur la VRAIE hauteur de la barre du haut (--tabsB : bas des onglets, --acctB : bas du cadre Niveau, mesurés par scenes.ts) :
   sur un écran de portable, le cadre Niveau recouvrait le titre du panneau ARMES */
.hgrid > .center { padding-top: max(0px, calc(var(--tabsB, 60px) + 10px - clamp(14px, 2vw, 30px))); }
.hgrid > .right { padding-top: max(0px, calc(var(--acctB, 116px) + 10px - clamp(14px, 2vw, 30px))); }
/* (28/09, demandé) TOUTES les barres de défilement au style du hangar : fines, bleues, sans flèches ni fond gris */
* { scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(90, 150, 240, .4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 180, 255, .6); }
::-webkit-scrollbar-button { display: none; }

/* ---------------------------------------------------------------- CARTE STELLAIRE (30/09, 22 h 01) : galaxie, secteurs, zones en viseurs (galaxy.ts) */
#hangar[data-bg="map"] .bgimg { display: none; }   /* la galaxie est dessinée par #galaxy (repères collés à l'image) */
#galaxy { position: absolute; inset: 0; overflow: hidden; background: #020612; }
#galaxy::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 55%, rgba(2, 6, 18, .55) 100%); }
#galStage { position: absolute; --iz: 1; }   /* (22 h 50) zoom fluide : transform pendant le mouvement, vraie taille à l'arrivée (galaxy.ts) */
#galImg { position: absolute; inset: 0; background: url(/galaxie.webp) center / cover no-repeat; }
#galCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* (22 h 59) la galaxie + les étoiles, dessinées par le jeu à chaque image (galaxy.ts) */
#galaxy.ready #galImg { display: none; }   /* image de secours (fond CSS) tant que la toile n'est pas prête */   /* image de la carte (galaxie.webp : la plus grande version disponible de la galaxie) */
/* secteur de combat : ellipse rouge qui pulse + onde qui s'élargit ; nom dessous */
.gSector { position: absolute; padding: 0; background: none; border: 0; cursor: pointer; transition: opacity .4s; }
.gSector .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 72, 56, .9); box-shadow: 0 0 16px rgba(255, 60, 40, .5), inset 0 0 16px rgba(255, 60, 40, .25); animation: gPulse 2.4s ease-in-out infinite; transition: opacity .4s; }
.gSector .ring.r2 { border-width: 1px; box-shadow: none; animation: gPing 2.4s ease-out infinite; }
.gSector .gsL { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4px 11px;   /* (22 h 33) nom du secteur AU CENTRE de l'orbite */
  white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; color: #ffd0c6; background: rgba(20, 6, 10, .55); border: 1px solid rgba(255, 80, 60, .45); border-radius: 4px; text-shadow: 0 0 6px #000; transition: opacity .3s; }
.gSector:hover .ring { border-color: #ffb09a; box-shadow: 0 0 26px rgba(255, 90, 60, .85), inset 0 0 22px rgba(255, 90, 60, .35); }
#galaxy.zoomed .gSector:not(.on) { opacity: 0; pointer-events: none; }
.gSector.on { pointer-events: none; } .gSector.on .gsL { opacity: 0; } .gSector.on .ring { opacity: .28; animation: none; } .gSector.on .ring.r2 { opacity: 0; }
@keyframes gPulse { 50% { box-shadow: 0 0 26px rgba(255, 60, 40, .8), inset 0 0 22px rgba(255, 60, 40, .35); } }
@keyframes gPing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
/* zones de combat : viseurs (anneaux qui tournent en sens contraires), visibles une fois zoomé */
.gZones { position: absolute; inset: 0; pointer-events: none; }
.gZone { position: absolute; width: 76px; height: 76px; padding: 0; color: #ff5b3d; background: none; border: 0; cursor: pointer; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.5); transition: opacity .14s ease, transform .22s cubic-bezier(.2, .8, .2, 1), color .15s;   /* (23 h 08 / 23 h 11 : « fais apparaître les zones plus rapidement ») */ filter: drop-shadow(0 0 6px rgba(255, 80, 50, .75)); }
#galaxy.settled .gZones.on .gZone { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }   /* (22 h 50) les viseurs apparaissent une fois le zoom arrivé */
#galaxy.moving .gSector .gsL { opacity: 0; }
/* (22 h 50) pendant le mouvement : scène confiée à la carte graphique, pas d'effet lumineux recalculé sur l'orbite (il revient à l'arrivée) */
#galaxy.moving #galStage { will-change: transform; }
#galStage { transform-origin: 0 0; }
#galaxy.moving .gSector .gsv, #galaxy.moving .gSector .orb { filter: none; animation-play-state: paused; }
#galaxy.moving .gSector .gsv { opacity: 0 !important; transition: opacity .18s; }   /* (22 h 59) l'orbite s'efface pendant le zoom (sinon ses traits grossissent puis s'affinent d'un coup) et revient à l'arrivée */
.gZone .ret { width: 100%; height: 100%; overflow: visible; }
.gZone .r1, .gZone .r2, .gZone .r3 { transform-origin: 50px 50px; }
.gZone .r1 { animation: gSpin 12s linear infinite; } .gZone .r2 { animation: gSpin 6s linear infinite reverse; } .gZone .r3 { animation: gSpin 3.6s linear infinite; }
.gZone .dot { transform-origin: 50px 50px; animation: gDot 1.4s ease-in-out infinite; }
.gZone:hover, .gZone:focus-visible { color: #ffc89a; filter: drop-shadow(0 0 10px rgba(255, 140, 80, .95)); outline: none; }
.gZone:hover .r1 { animation-duration: 5s; } .gZone:hover .r2 { animation-duration: 2.4s; } .gZone:hover .r3 { animation-duration: 1.4s; }
.gZone .gzL { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 3px 9px; white-space: nowrap; text-align: center; background: rgba(12, 6, 14, .62); border: 1px solid rgba(255, 90, 60, .4); border-radius: 4px; }
.gZone .gzL b { display: block; font-size: 12.5px; letter-spacing: .16em; color: #ffe6dc; text-shadow: 0 0 6px #000; }
.gZone .gzL small { display: block; font-size: 10px; letter-spacing: .03em; color: #ffae94; }
.gZone:hover .gzL { border-color: #ffb09a; }
@keyframes gSpin { to { transform: rotate(360deg); } }
@keyframes gDot { 50% { transform: scale(1.7); opacity: .55; } }
/* bandeau de la carte (haut à gauche) */
#galHud { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(440px, 60vw); pointer-events: none; z-index: 2; }
#galHud > * { pointer-events: auto; }
#galHud .gh { display: flex; flex-direction: column; gap: 4px; padding: 11px 16px 12px; }
#galHud .gh b { font-size: 13px; letter-spacing: .2em; color: #e9f4ff; } #galHud .gh span { font-size: 13px; color: #8fb0d8; }
#galBack { align-self: flex-start; margin-top: 6px; padding: 5px 12px; font: inherit; font-size: 12.5px; letter-spacing: .06em; color: #cfe3ff; background: rgba(20, 40, 86, .6); border: 1px solid rgba(110, 160, 240, .4); border-radius: 4px; cursor: pointer; }
#galBack:hover { border-color: var(--violet); background: rgba(50, 40, 110, .75); }
#galaxy:not(.zoomed) #galBack { display: none; }
#galHud .gShip { display: flex; flex-direction: column; gap: 6px; padding: 9px 16px; font-size: 13px; color: #8fb0d8; } #galHud .gShip b { color: #e9f4ff; font-weight: 600; }
#galOther { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: #6f8fb8; }
#galOther[hidden] { display: none; }
.gOther { padding: 3px 9px; font: inherit; font-size: 11.5px; color: #9fb4d4; background: rgba(10, 20, 44, .6); border: 1px solid rgba(110, 160, 240, .25); border-radius: 4px; cursor: pointer; }
.gOther:hover { color: #fff; border-color: rgba(110, 160, 240, .6); }
@media (prefers-reduced-motion: reduce) { #galStage { transition: none !important; } .gZone .r1, .gZone .r2, .gZone .r3, .gZone .dot, .gSector .ring { animation: none !important; } }
/* (30/09, 22 h 22) SECTEUR = ORBITES (proposition B choisie, sans la boule du milieu) ; au zoom elles restent visibles autour des 3 zones.
   Épaisseurs × --iz : même trait à l'écran quel que soit le zoom. */
.gSector .gsv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 70, 40, .6)); transition: opacity .4s; }
.gSector .gsv * { transform-box: view-box; transform-origin: 0 0; }
.gSector .orb.o1 { stroke-width: calc(2.6 * var(--iz)); stroke-dasharray: calc(9 * var(--iz)) calc(7 * var(--iz)); animation: gDash 7s linear infinite; }
.gSector .orb.o2 { stroke-width: calc(1.6 * var(--iz)); stroke-dasharray: calc(3 * var(--iz)) calc(6 * var(--iz)); animation: gDash 5s linear infinite reverse; }
.gSector .sat { transition: opacity .3s; }
.gSector:hover .gsv { filter: drop-shadow(0 0 11px rgba(255, 120, 80, .95)); }
.gSector.on .gsv { opacity: .55; } .gSector.on .sat { opacity: 0; }
@keyframes gDash { to { stroke-dashoffset: -160; } }

@media (prefers-reduced-motion: reduce) { .gSector .gsv * { animation: none !important; } }

/* ---------------------------------------------------------------- (03/10) CLAN → GROUPE */
#clanPanel .mcard { width: min(480px, 94vw); }
.gtabs { display: flex; gap: 6px; margin: 12px 16px 4px; }
.gtab { flex: 1; padding: 8px 10px; font-size: 13.5px; letter-spacing: .14em; color: #9fb4d4; background: rgba(14, 30, 64, .55); border: 1px solid rgba(110, 160, 240, .25); border-radius: 6px; }
.gtab.on { color: #fff; border-color: var(--violet, #a35cff); background: rgba(70, 40, 140, .55); box-shadow: 0 0 16px rgba(163, 92, 255, .25); }
.gtab:disabled { opacity: .55; cursor: default; } .gtab small { margin-left: 6px; font-size: 10.5px; letter-spacing: .06em; color: #8fa6c8; }
.gbody { padding: 6px 16px 4px; }
.ghead { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 6px; } .ghead b { font-size: 15px; letter-spacing: .08em; color: #e9f4ff; } .gcount { font-size: 12.5px; color: #8fb0d8; }
.gempty { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.45; color: #8fb0d8; }
.glist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.gm { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(16, 36, 76, .55); border: 1px solid rgba(110, 160, 240, .22); border-radius: 6px; }
.gm.me { border-color: rgba(255, 207, 90, .45); } .gm.off { opacity: .55; }
.gdot { width: 9px; height: 9px; border-radius: 50%; background: #4fe08a; box-shadow: 0 0 8px #4fe08a; flex: none; } .gm.off .gdot { background: #6b7a90; box-shadow: none; }
.gname { font-size: 15px; color: #eaf4ff; } .gcrown { margin-right: 6px; color: #ffcf5a; }
.gwhere { margin-left: auto; font-size: 12px; color: #8fb0d8; }
.gkick { margin-left: 8px; padding: 4px 9px; font-size: 12px; color: #ffb3ad; background: rgba(90, 20, 26, .5); border: 1px solid rgba(255, 110, 100, .35); border-radius: 5px; } .gkick:hover { background: rgba(130, 30, 36, .7); }
.ginv { display: flex; gap: 8px; margin-top: 4px; } .ginv input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; color: #eaf4ff; background: rgba(6, 18, 40, .8); border: 1px solid rgba(110, 160, 240, .35); border-radius: 6px; }
.ginv .btn { padding: 10px 16px; font-size: 15px; } .ginv .btn:disabled, .ginv input:disabled { opacity: .5; }
.gmsg { min-height: 18px; margin: 6px 0 2px; font-size: 13px; color: #9fe6b8; } .gmsg.bad { color: #ff9c94; }
.gleave { width: 100%; margin-top: 6px; padding: 9px 12px; font-size: 14px; color: #ffcfc9; background: rgba(70, 18, 24, .55); border-color: rgba(255, 110, 100, .35); }
#groupInvites { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: 8px; }
.ginvite { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; color: #e3eeff; background: linear-gradient(180deg, rgba(40, 22, 86, .94), rgba(18, 12, 46, .94)); border: 1px solid rgba(163, 92, 255, .6); border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(163, 92, 255, .25); font-size: 15px; }
.ginvite b { color: #ffe39a; } .ginvite .gbtns { display: flex; gap: 6px; } .ginvite .btn { padding: 7px 12px; font-size: 14px; }
.ginvBtn { display: block; width: calc(100% - 20px); margin: 6px 10px 2px; padding: 7px 10px; font-size: 13.5px; letter-spacing: .04em; color: #eadcff; background: rgba(70, 40, 140, .55); border: 1px solid rgba(163, 92, 255, .55); border-radius: 6px; cursor: pointer; }
.ginvBtn:hover { background: rgba(100, 56, 190, .7); } .ginvBtn:disabled { opacity: .6; cursor: default; }
#clanPanel[hidden], #groupInvites:empty { display: none; }

/* (03/10) zones « bientôt » de la carte stellaire : grisées, sans animation, pas d'entrée */
.gZone.soon { color: #6f7688; cursor: default; filter: grayscale(1); }
.gZone.soon .r1, .gZone.soon .r2, .gZone.soon .r3, .gZone.soon .dot { animation: none; }
.gZone.soon:hover, .gZone.soon:focus-visible { color: #8a92a6; filter: grayscale(1); }
.gZone.soon .gzL { border-color: rgba(140, 150, 170, .35); color: #9aa3b5; }
.gZone.soon .gzL small { display: block; margin-top: 1px; font-size: 10px; letter-spacing: .18em; color: #c9b77a; }

/* (03/10) profil d'un membre (clic droit) */
.gmenu { position: fixed; z-index: 60; min-width: 170px; padding: 4px; background: rgba(8, 16, 34, .97); border: 1px solid rgba(110, 160, 240, .45); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.gmenu .gmh { padding: 5px 9px 6px; font-size: 12px; letter-spacing: .08em; color: #9fb3d4; border-bottom: 1px solid rgba(110, 160, 240, .2); margin-bottom: 3px; }
.gmenu button { display: block; width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; text-align: left; color: #eaf4ff; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.gmenu button:hover { background: rgba(60, 110, 200, .35); }
.gprof { position: relative; display: flex; gap: 12px; align-items: center; margin: 4px 0 10px; padding: 10px 34px 10px 10px; background: rgba(40, 60, 110, .3); border: 1px solid rgba(110, 160, 240, .4); border-radius: 8px; }
.gprof img { width: 54px; height: 54px; object-fit: contain; }
.gprof .gpn { font-size: 17px; font-weight: 700; color: #fff; } .gprof .gpn small { margin-left: 6px; font-size: 10px; letter-spacing: .1em; color: #9fb3d4; border: 1px solid rgba(110, 160, 240, .35); border-radius: 3px; padding: 0 4px; vertical-align: 2px; }
.gprof .gpl { font-size: 13px; color: #ffcf5a; } .gprof .gpm { font-size: 13px; color: #cfe0f7; } .gprof .gpo { font-size: 12px; color: #8a9bb8; } .gprof .gpo.on { color: #6ef0a0; }
.gprof .gpx { position: absolute; top: 4px; right: 6px; font-size: 18px; color: #9fb3d4; background: none; border: 0; cursor: pointer; }
.glist li { cursor: context-menu; }

/* (03/10) salle d'attente du boss */
#bossLobby[hidden] { display: none; }
#bossLobby .blCard { width: min(460px, 94vw); border-color: rgba(255, 106, 90, .5); }
#bossLobby header span { color: #ffb0a6; }
.blBody { padding: 8px 18px 16px; }
.blTitle { font-size: 20px; font-weight: 800; letter-spacing: .2em; color: #ff6a5a; }
.blSub { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.45; color: #a9b8d2; }
.blList { list-style: none; margin: 0 0 6px; padding: 0; }
.blList li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 5px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(110, 160, 240, .2); border-radius: 6px; }
.blList li.me { border-color: rgba(127, 227, 255, .45); } .blList li.off { opacity: .55; }
.blName { flex: 1; font-size: 15px; color: #eaf4ff; } .blReady { font-size: 12px; letter-spacing: .1em; color: #6ef0a0; text-transform: uppercase; }
.blCount { font-size: 12px; color: #8a9bb8; margin-bottom: 8px; }
.blBtns { display: flex; gap: 8px; margin-top: 8px; } .blBtns .btn { flex: 1; padding: 11px; font-size: 15px; }
.blGo { background: #7a1e24 !important; border-color: #ff6a5a !important; color: #fff !important; letter-spacing: .1em; }
.bossInv { border-color: rgba(255, 106, 90, .65); background: linear-gradient(180deg, rgba(86, 22, 30, .94), rgba(40, 10, 18, .94)); }

/* (03/10, 23 h) AMIS */
.flist .fbtn { margin-left: 4px; color: #bfe3ff; border-color: rgba(110, 160, 240, .5); background: rgba(30, 60, 120, .35); }
.flist .fbtn:disabled { opacity: .4; cursor: default; }
.friendInv { border-color: rgba(110, 200, 255, .6); background: linear-gradient(180deg, rgba(20, 50, 96, .94), rgba(10, 22, 50, .94)); }
.pmchat { border-color: rgba(110, 200, 255, .4); background: rgba(10, 30, 60, .45); } .pmchat .gchT { color: #8fd8ff; }
.clog .cl.pm b { color: #8fd8ff; }
#chatBox .cform { display: flex; gap: 4px; } #chatBox .cform select { flex: none; max-width: 120px; padding: 4px; font: inherit; font-size: 12px; color: #eaf4ff; background: rgba(4, 10, 24, .8); border: 1px solid rgba(110, 160, 240, .3); border-radius: 4px; }
#chatBox .cform select[hidden] { display: none; }

/* ---- (06/10, 22 h 46) CHAT DU HANGAR : petit (colonne de droite, entre ARMES et ITEMS, même place sur toutes les pages) et grand (page GROUPE) ---- */
.chatPanel { grid-row: 2; min-height: 150px; display: flex; flex-direction: column; overflow: hidden; }
.chatv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chatv .ctabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid rgba(110, 160, 240, .18); }
.chatv .clog { flex: 1; height: auto; min-height: 0; }
.chatv .cform { display: flex; gap: 5px; padding: 6px; }
.chatv .cform input { flex: 1; min-width: 0; padding: 7px 9px; font: inherit; font-size: 13px; color: #eaf4ff; background: rgba(4, 10, 24, .7); border: 1px solid rgba(110, 160, 240, .3); border-radius: 4px; }
.chatv .cform input:focus { outline: none; border-color: #7fe3ff; }
.chatv .cform select { flex: none; max-width: 120px; padding: 4px; font: inherit; font-size: 12px; color: #eaf4ff; background: rgba(4, 10, 24, .8); border: 1px solid rgba(110, 160, 240, .3); border-radius: 4px; }
.chatv .cform select[hidden] { display: none; }
.chatv .csend { flex: none; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #e4f4ff; background: rgba(26, 62, 122, .75); border: 1px solid rgba(100, 165, 255, .45); border-radius: 4px; cursor: pointer; }
.chatv .csend:hover { background: rgba(40, 90, 170, .85); }
.clog .cl.all b { color: #ffcf6a; } .clog .cl.prox b { color: #9fe0a8; }
.chat-big .clog { padding: 10px 14px; font-size: 14.5px; line-height: 1.45; }
.chat-big .ctab { font-size: 12px; padding: 7px 8px; }
/* (07/10) canal CONTRAT en plus : 5 onglets en zone, 4 au hangar — on serre l'espacement pour que PRIVÉ ne soit plus coupé */
.ctab { white-space: nowrap; } #chatBox .ctab { flex: auto; padding: 4px 3px; letter-spacing: .05em; } .chat-small .ctab { padding: 4px 3px; letter-spacing: .06em; }
.chat-big .cform { padding: 10px; } .chat-big .cform input { padding: 10px 12px; font-size: 14.5px; }
/* (07/10) page COMMUNAUTÉ : UN panneau (bandeau GROUPE + grand chat) ; les CONTRATS sont dans la 1re colonne (#ctrPanel) */
.clanPage { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 0; }
.clanPage[hidden] { display: none; }
.clanSide, .clanChat { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.clanSide .gbody { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.clanChat > header em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7f9bc0; }

/* ---- (06/10, 23 h 06 : « quand je mets le curseur sur une caisse, c'est la main de Windows, pareil pour le chat ») CURSEURS DU JEU PARTOUT :
   chevron HUD sur toute l'interface (boutons, onglets, cases… : plus de main ni de « saisir »), curseur texte dans les champs de saisie,
   anneau de visée sur un vaisseau / un astéroïde / une caisse, et pendant la visée d'un item ---- */
html, body, body * { cursor: url(/sprites/curseur_chevron.svg) 3 3, default !important; }
body input:not([type]), body input[type="text"], body input[type="password"], body input[type="search"], body input[type="number"], body textarea { cursor: text !important; }
canvas#c.aim, body.aiming canvas#c { cursor: url(/sprites/curseur_visee.svg) 16 16, crosshair !important; }
/* (06/10, 23 h 06 : « le chat in game, remonte-le le plus haut, comme ça on pourra le faire défiler ») chat EN ZONE : plus haut (il grandit vers le
   haut, le bas reste au-dessus de la minicarte) ; les anciens messages se lisent en faisant défiler */
#chatBox.chatv .clog { flex: none; height: min(300px, 34vh); scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
/* (06/10, 23 h 14 : « le bouton ITEMS bug in game » — il sortait de la soute) en zone, la soute est étroite : pages « 1 » / « 2 » sans le mot PAGE,
   onglets serrés, le titre SOUTE cède la place */
#cargoPanel .holdPager .pl { display: none; }
#cargoPanel .holdPager button { min-width: 22px; }
#cargoPanel .cbox > header { flex-wrap: wrap; row-gap: 6px; }
#cargoPanel .cbox > header .holdTabs { flex: 1 0 100%; order: 9; margin-left: 0; justify-content: flex-start; } /* onglets sur leur propre ligne, sous « SOUTE » */
#cargoPanel .cbox > header .holdTabs button[data-t="items"] { margin-left: auto; }

/* ==================================================================================================================================
   (07/10) PAGE COMMUNAUTÉ — colonne CONTRATS (à la place de l'inventaire, plus large sur cette page) + panneau COMMUNAUTÉ (groupe + chat)
   ⚠ préfixe ctr… / gs… / commu… : `.right` et `.list` existent déjà dans ce fichier
   ================================================================================================================================== */
.hgrid.ctrWide { grid-template-columns: minmax(420px, 40%) minmax(380px, 1fr) minmax(250px, 24%); }
.ctrPanel { overflow: hidden; }
.ctrHead { padding: 0 !important; align-items: stretch !important; }
.ctrTabs { display: flex; width: 100%; }
.ctrTab { flex: 1; padding: 12px 6px 10px; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; color: #7f9bc0; background: none; border: 0; border-bottom: 2px solid transparent; }
.ctrTab.on { color: #eaf4ff; border-bottom-color: var(--gl-hi); text-shadow: 0 0 14px rgba(79, 214, 255, .5); }
.ctrTab:hover:not(.on) { color: #b9d4f5; }
.ctrBody { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
.ctrBar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ctrFilters { display: flex; gap: 4px; flex-wrap: wrap; }
.ctrF { padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #9fb7d8; background: rgba(10, 24, 52, .6); border: 1px solid rgba(110, 160, 240, .25); border-radius: 20px; }
.ctrF.on { color: #fff; border-color: var(--k, var(--gl-hi)); background: color-mix(in srgb, var(--k, #4fd6ff) 22%, transparent); }
.ctrEmitBtn { padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #241600; background: linear-gradient(180deg, #ffe08a, #f2a83a); border: 1px solid #ffe7a6; border-radius: 6px; box-shadow: 0 0 18px rgba(255, 190, 70, .3); }
.ctrEmitBtn:hover { background: linear-gradient(180deg, #ffe9a8, #ffb84f); } .ctrEmitBtn.on { color: #ffe39a; background: rgba(60, 40, 8, .6); border-color: rgba(255, 207, 90, .5); box-shadow: none; }
.ctrNote { font-size: 13px; color: #9fe6b8; } .ctrNote.bad { color: #ff9c94; }
.ctrSec { margin-top: 4px; font-size: 11px; letter-spacing: .2em; color: #6f8fb8; }
.ctrEmpty { margin: 4px 2px; font-size: 13.5px; line-height: 1.45; color: #8fb0d8; }
.ctrList { display: grid; gap: 8px; }
.ctrIco { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: color-mix(in srgb, currentColor 14%, transparent); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.ctrIco svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ctrCard { position: relative; padding: 10px 12px 10px 14px; background: rgba(12, 26, 56, .62); border: 1px solid rgba(110, 160, 240, .22); border-left: 3px solid var(--k); border-radius: 7px; display: grid; gap: 7px; }
.ctrCard:hover { border-color: color-mix(in srgb, var(--k) 55%, transparent); border-left-color: var(--k); }
.ctrTop, .ctrSHead { display: flex; align-items: center; gap: 10px; }
.ctrT { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ctrKind { font-size: 14.5px; font-weight: 800; letter-spacing: .14em; color: var(--k); }
.ctrBy { font-size: 12.5px; color: #9fb3d4; } .ctrBy::first-letter { text-transform: none; }
.ctrPrice { text-align: right; display: flex; flex-direction: column; } .ctrPrice b { font-size: 16px; color: #ffcf5a; text-shadow: 0 0 12px rgba(255, 190, 70, .35); white-space: nowrap; }
.ctrPrice small { font-size: 10.5px; color: #8a7ab8; letter-spacing: .04em; }
.ctrDet { font-size: 13px; color: #c3d4ee; } .ctrTarget { color: #ff8f8f; }
.ctrFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #8fa6c8; }
.ctrAccept { padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #fff; background: color-mix(in srgb, var(--k) 30%, rgba(10, 20, 40, .8)); border: 1px solid var(--k); border-radius: 5px; }
.ctrAccept:hover:not(:disabled) { background: color-mix(in srgb, var(--k) 48%, rgba(10, 20, 40, .8)); } .ctrAccept:disabled { opacity: .4; }
/* émettre */
.ctrEmit { display: grid; gap: 9px; padding: 12px; background: rgba(40, 30, 6, .28); border: 1px solid rgba(255, 207, 90, .35); border-radius: 8px; }
.ctrKinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ctrKindPick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; font: inherit; color: #cfe0f7; background: rgba(10, 22, 48, .7); border: 1px solid rgba(110, 160, 240, .25); border-radius: 7px; }
.ctrKindPick .ctrIco { width: 32px; height: 32px; } .ctrKindPick b { font-size: 12px; letter-spacing: .14em; color: var(--k); } .ctrKindPick small { font-size: 12px; color: #ffcf5a; }
.ctrKindPick.on { border-color: var(--k); background: color-mix(in srgb, var(--k) 16%, rgba(10, 22, 48, .8)); box-shadow: 0 0 14px color-mix(in srgb, var(--k) 30%, transparent); }
.ctrDesc { margin: 0; font-size: 13px; line-height: 1.4; color: #a9bddb; }
.ctrInp, .ctrSel { padding: 9px 11px; font: inherit; font-size: 14px; color: #eaf4ff; background: rgba(6, 18, 40, .85); border: 1px solid rgba(110, 160, 240, .35); border-radius: 6px; }
.ctrInp:focus, .ctrSel:focus { outline: none; border-color: var(--gl-hi); }
.ctrSum { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #9fb3d4; } .ctrBal { color: #ffcf5a; } .ctrBal.bad { color: #ff9c94; }
.ctrGo { padding: 10px 14px; font-size: 14px; font-weight: 800; letter-spacing: .1em; color: #241600; background: linear-gradient(180deg, #ffe08a, #f2a83a); border-color: #ffe7a6; }
.ctrGo:hover:not(:disabled) { background: linear-gradient(180deg, #ffe9a8, #ffb84f); } .ctrGo:disabled { opacity: .45; }
/* salon TON CONTRAT */
.ctrSalon { display: grid; gap: 9px; padding: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 12%, rgba(10, 22, 48, .85)), rgba(10, 22, 48, .7)); border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); border-radius: 9px; box-shadow: 0 0 22px color-mix(in srgb, var(--k) 15%, transparent); }
.ctrSTitle { font-size: 10.5px; letter-spacing: .24em; color: #9fb3d4; }
.ctrMembers { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ctrMembers li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(110, 160, 240, .2); border-radius: 6px; }
.ctrMembers li.me { border-color: rgba(127, 227, 255, .45); } .ctrMembers li.off { opacity: .55; } .ctrMembers li.off .gdot { background: #6b7a90; box-shadow: none; }
.ctrMembers li.free { justify-content: center; padding: 6px; font-size: 12px; letter-spacing: .1em; color: #5f7aa0; background: none; border-style: dashed; }
.ctrMName { flex: 1; font-size: 14.5px; color: #eaf4ff; }
.ctrSt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #8a9bb8; } .ctrSt.ok { color: #6ef0a0; text-shadow: 0 0 10px rgba(110, 240, 160, .4); } .ctrSt.wait { color: #ffcf5a; } .ctrSt.run { color: var(--k); }
.ctrActs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ctrActs .ctrSel { flex: 1; min-width: 140px; }
.ctrMap { font-size: 13px; color: #c9b0ff; }
.ctrReady { padding: 9px 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.ctrReady.on { color: #04150b; background: linear-gradient(180deg, #8af5b6, #3fcf7d); border-color: #b5ffd2; box-shadow: 0 0 16px rgba(80, 230, 140, .35); }
.ctrLaunch { padding: 11px; font-size: 15px; font-weight: 800; letter-spacing: .14em; color: #04101f; background: linear-gradient(180deg, #6fe0ff, #2fa4ff); border-color: #9be9ff; }
.ctrLaunch:disabled { color: #8fa6c8; background: rgba(20, 44, 88, .55); border-color: rgba(100, 165, 255, .3); box-shadow: none; }
.ctrCancel { justify-self: center; padding: 4px 8px; font: inherit; font-size: 12.5px; color: #ff9c94; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.ctrHint { margin: 0; font-size: 12.5px; line-height: 1.4; color: #8fa6c8; }
.ctrExp { font-size: 11.5px; color: #6f8fb8; text-align: center; }
.ctrRun { padding: 8px 10px; font-size: 13px; color: #dfe9ff; background: color-mix(in srgb, var(--k) 18%, transparent); border-radius: 6px; } .ctrRun b { color: var(--k); letter-spacing: .12em; }
.ctrResult { position: relative; padding: 10px 32px 10px 12px; background: rgba(70, 18, 24, .45); border: 1px solid rgba(255, 110, 100, .4); border-radius: 8px; }
.ctrResult.ok { background: rgba(14, 60, 34, .5); border-color: rgba(110, 240, 160, .45); }
.ctrResult .ctrRT { font-size: 12.5px; color: #cfe0f7; } .ctrResult .ctrRT b { letter-spacing: .14em; color: #ff9c94; } .ctrResult.ok .ctrRT b { color: #6ef0a0; }
.ctrResult p { margin: 4px 0 0; font-size: 13px; color: #dfe9ff; } .ctrRX { position: absolute; top: 4px; right: 8px; font-size: 18px; color: #9fb3d4; background: none; border: 0; }
/* classement (bientôt) */
.ctrCats { display: flex; flex-wrap: wrap; gap: 5px; }
.ctrCat { padding: 5px 10px; font: inherit; font-size: 12px; color: #9fb3d4; background: rgba(10, 24, 52, .6); border: 1px solid rgba(110, 160, 240, .22); border-radius: 20px; }
/* (07/10, 22 h 26) une COULEUR par catégorie (--k, data/influence.ts) */
.ctrCat { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--k) 70%, #dfe9ff); border-color: color-mix(in srgb, var(--k) 40%, transparent); }
.ctrCatDot { width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: 0 0 6px var(--k); }
.ctrCat:hover { color: #fff; border-color: color-mix(in srgb, var(--k) 70%, transparent); }
.ctrCat.on { color: #fff; border-color: var(--k); background: color-mix(in srgb, var(--k) 26%, rgba(10, 20, 44, .8)); box-shadow: 0 0 14px color-mix(in srgb, var(--k) 35%, transparent); }
/* (07/10) grade d'influence : cartes de contrat, fiche du vaisseau, profil */
.ctrGrade { color: #c9a2ff; }
#infoCard .grd { margin-top: 1px; font-size: 12px; letter-spacing: .06em; color: #c9a2ff; }
.gprof { flex-wrap: wrap; } .gprof .gpg { font-size: 12.5px; color: #c9a2ff; letter-spacing: .04em; }
.gpInfl { flex: 1 0 100%; display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid rgba(110, 160, 240, .2); }
.gpI { display: grid; grid-template-columns: 1fr auto 60px; gap: 8px; font-size: 12.5px; color: #9fb3d4; } .gpI b { font-weight: 600; color: color-mix(in srgb, var(--k, #c9a2ff) 80%, #fff); } .gpI span { color: color-mix(in srgb, var(--k, #9fb3d4) 55%, #9fb3d4); } .gpI em { font-style: normal; text-align: right; color: #dfe9ff; }
/* panneau COMMUNAUTÉ : bandeau GROUPE + grand chat */
.commu { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.commuView { padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #d6c4ff; background: rgba(70, 40, 140, .45); border: 1px solid rgba(163, 92, 255, .5); border-radius: 5px; }
.commuView:hover { background: rgba(100, 56, 190, .6); }
.gstrip { padding: 8px 12px 6px; border-bottom: 1px solid rgba(90, 150, 240, .18); display: grid; gap: 6px; }
.gstrip .gmsg:empty { display: none; } .gstrip .gmsg { margin: 0; } .gstrip .gprof { margin: 2px 0 0; }
.gsForm input { padding: 7px 10px; font-size: 14px; } .gsForm .btn { padding: 7px 12px; font-size: 14px; }
.commuChat { flex: 1; min-height: 0; display: flex; flex-direction: column; } .commuChat[hidden], .commuFriends[hidden] { display: none; }
.commuFriends { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px; }
.clog .cl.ctr b { color: #ffcf5a; } .clog .cl.sys { color: #ffe39a; background: rgba(255, 190, 70, .07); border-left: 2px solid rgba(255, 207, 90, .6); padding-left: 6px; } .clog .cl.sys b { color: #ffb84f; letter-spacing: .08em; }

/* (07/10) FIN DE SAISON + MÉMORIAL */
#seasonEnd[hidden] { display: none; }
.seCard { width: min(560px, 94vw); border-color: rgba(255, 207, 90, .55); box-shadow: 0 0 40px rgba(255, 190, 70, .18), var(--gl-shadow); }
.seCard > header span { color: #ffcf5a; }
.seBody { padding: 10px 20px 4px; display: grid; gap: 10px; overflow-y: auto; }
.seTitle { font-size: 22px; font-weight: 800; letter-spacing: .24em; color: #ffe39a; text-shadow: 0 0 18px rgba(255, 190, 70, .45); }
.seStory { margin: 0; padding: 12px 14px; font-size: 15.5px; line-height: 1.55; font-style: italic; color: #eef4ff; background: rgba(255, 207, 90, .06); border-left: 3px solid rgba(255, 207, 90, .6); border-radius: 4px; }
.seSec { font-size: 11px; letter-spacing: .2em; color: #8fa6c8; }
.seBadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sBadge { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; padding: 7px 9px; background: color-mix(in srgb, var(--k) 12%, rgba(10, 20, 44, .85)); border: 1px solid color-mix(in srgb, var(--k) 50%, transparent); border-radius: 7px; }
.sBadge .sbDot { grid-row: span 3; width: 9px; height: 9px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
.sbCat { font-size: 10.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--k) 60%, #9fb3d4); } .sbG { font-size: 13.5px; color: #fff; } .sbP { font-style: normal; font-size: 11px; color: #8fa6c8; }
.sBadge.top { border-color: #ffcf5a; box-shadow: 0 0 14px rgba(255, 190, 70, .3); } .sBadge.top .sbG { color: #ffcf5a; }
.seNote { margin: 0; font-size: 12px; color: #7f9bc0; } .seOk { justify-self: center; padding: 10px 28px; font-size: 14px; letter-spacing: .14em; }
.memo { flex: 1 0 100%; padding-top: 6px; border-top: 1px solid rgba(110, 160, 240, .2); }
.memo summary { font-size: 11.5px; letter-spacing: .18em; color: #ffcf5a; cursor: pointer; }
.memoS { margin-top: 8px; display: grid; gap: 5px; } .memoT { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #ffe39a; text-transform: uppercase; }
.memoStory { margin: 0; font-size: 12.5px; line-height: 1.45; font-style: italic; color: #cfdcf2; }
.seBadges.small { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .seBadges.small .sBadge { padding: 5px 7px; }

/* (07/10, 22 h 40) onglet MÉMORIAL (page COMMUNAUTÉ) */

/* (07/10, 23 h 13) émettre : nombre de places */
.ctrPlaces { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a9bddb; } .ctrPlaces span { margin-right: 4px; }
.ctrPlace { width: 34px; height: 30px; font: inherit; font-size: 14px; font-weight: 700; color: #cfe0f7; background: rgba(10, 22, 48, .7); border: 1px solid rgba(110, 160, 240, .3); border-radius: 6px; }
.ctrPlace.on { color: #241600; background: linear-gradient(180deg, #ffe08a, #f2a83a); border-color: #ffe7a6; }

/* ---------------------------------------------------------------- (07/10, 23 h 40) CLANS : onglet CLAN (src/client/clan.ts), TAG, blason */
.ctrTab .cun { margin-left: 6px; padding: 0 5px; font-style: normal; font-size: 10px; letter-spacing: 0; color: #fff; background: #c0392b; border-radius: 8px; }
.ctag { color: #9fc6ff; font-weight: 700; letter-spacing: .04em; }
.clog .cl.clan b { color: #8fd0ff; } .clog .cl b .ctag { color: #9fc6ff; }
.knEmb { display: inline-flex; flex: none; line-height: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.knIntro { padding: 12px 14px; background: linear-gradient(180deg, rgba(30, 50, 96, .45), rgba(12, 22, 48, .35)); border: 1px solid rgba(110, 160, 240, .25); border-radius: 8px; }
.knIntro b { font-size: 12px; letter-spacing: .25em; color: #8fd0ff; } .knIntro p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #cfe0f7; }
.knFound { align-self: flex-start; padding: 10px 16px; font-size: 13px; }
.knInv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(14, 26, 54, .7); border: 1px solid rgba(110, 160, 240, .3); border-radius: 8px; }
.knInvT { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .knInvT b { color: #fff; font-size: 15px; } .knInvT small { color: #9fb3d4; font-size: 12px; }
.knInvB { display: flex; gap: 6px; } .knInvB .btn { padding: 7px 12px; font-size: 13px; }
.knCreate { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: rgba(10, 20, 44, .65); border: 1px solid rgba(255, 207, 90, .3); border-radius: 8px; }
.knPrev { display: flex; align-items: center; gap: 14px; padding: 8px 6px; }
.knPrevT { display: flex; flex-direction: column; gap: 3px; } .knPrevT b { font-size: 19px; color: #fff; letter-spacing: .02em; } .knPrevT small { font-size: 11.5px; color: #7f9bc0; }
.knIds { display: flex; gap: 8px; } .knIds .ctrInp:first-child { flex: 1; min-width: 0; } .knTagInp { width: 86px; text-align: center; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; }
.knPick { display: flex; flex-direction: column; gap: 6px; }
.knRow { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 8px; }
.knLbl { font-size: 10.5px; letter-spacing: .18em; color: #6f8fb8; text-transform: uppercase; }
.knOpts { display: flex; flex-wrap: wrap; gap: 4px; }
.knOpt { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: rgba(6, 14, 32, .7); border: 1px solid rgba(110, 160, 240, .2); border-radius: 6px; cursor: pointer; }
.knOpt:hover { border-color: rgba(140, 190, 255, .6); } .knOpt.on { border-color: #ffcf5a; box-shadow: 0 0 0 1px #ffcf5a, 0 0 12px rgba(255, 207, 90, .35); background: rgba(60, 44, 10, .45); }
.knOpt.knSw { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0, 0, 0, .5); }
.knOpt.knSw.on { border-color: #fff; box-shadow: 0 0 0 2px #ffcf5a; }
.knRules { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #b9cbe6; }
.knHead { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: linear-gradient(180deg, rgba(34, 56, 104, .55), rgba(12, 22, 48, .45)); border: 1px solid rgba(110, 160, 240, .35); border-radius: 8px; }
.knHead.pre { border-color: rgba(255, 207, 90, .4); background: linear-gradient(180deg, rgba(70, 52, 14, .45), rgba(20, 18, 30, .45)); }
.knHT { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.knName { font-size: 19px; color: #fff; letter-spacing: .02em; }
.knState { font-size: 11.5px; letter-spacing: .14em; color: #ffcf5a; } .knState.on { color: #6ef0a0; }
.knBar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; } .knBar i { display: block; height: 100%; background: linear-gradient(90deg, #f2a83a, #ffe08a); }
.knHint { font-size: 11.5px; line-height: 1.4; color: #b8a676; }
.knEdit { padding: 4px 9px; font: inherit; font-size: 11.5px; letter-spacing: .08em; color: #9fc6ff; background: rgba(20, 40, 80, .5); border: 1px solid rgba(110, 160, 240, .35); border-radius: 5px; cursor: pointer; }
.knEdit:hover, .knEdit.on { color: #fff; border-color: #9fc6ff; }
.knHead > .knEdit { position: absolute; top: 8px; right: 8px; }
.knEmbEdit { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(10, 20, 44, .65); border: 1px solid rgba(110, 160, 240, .3); border-radius: 8px; }
.knActs { display: flex; align-items: center; gap: 12px; }
.knMotd { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 207, 90, .06); border-left: 2px solid rgba(255, 207, 90, .55); border-radius: 0 6px 6px 0; }
.knMotd p { margin: 0; font-size: 14px; color: #ffe9b8; } .knMotd p.knNone { color: #7f8ea8; font-style: italic; font-size: 13px; }
.knMotdF { display: flex; gap: 6px; grid-column: 2 / 4; } .knMotdF .ctrInp { flex: 1; min-width: 0; }
.knInvite { margin: 0; } .knInvited { font-size: 12px; color: #8fa6c8; }
.knMembers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.knMembers li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto 26px; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(12, 24, 50, .55); border: 1px solid rgba(110, 160, 240, .14); border-radius: 6px; }
.knMembers li.me { border-color: rgba(255, 207, 90, .45); } .knMembers li.off { opacity: .55; }
.knMName { font-size: 14px; color: #eaf4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .knMName .gcrown, .knOff { margin-right: 5px; color: #ffcf5a; }
.knOff { color: #9fc6ff; }
.knRank { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7f9bc0; } .knRank.r2 { color: #ffcf5a; } .knRank.r1 { color: #9fc6ff; }
.knMembers .gwhere { font-size: 12px; color: #8a9bb8; white-space: nowrap; }
.knMore { width: 26px; height: 24px; padding: 0; font: inherit; font-size: 16px; line-height: 1; color: #9fb3d4; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.knMore:hover { color: #fff; border-color: rgba(110, 160, 240, .4); }
.knCit { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; color: #8fa6c8; border: 1px dashed rgba(110, 160, 240, .3); border-radius: 8px; }
.knCit b { font-size: 11px; letter-spacing: .22em; color: #9fc6ff; }
.knLeave { align-self: center; } .knLeave.sure { color: #ff6a5e; font-weight: 700; }
.gmenu button.bad { color: #ff9c94; }
.gprof .gpc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9fc6ff; } .gprof .gpc small { color: #8a9bb8; }
.knPopRow { display: flex; align-items: center; gap: 10px; } .knPop .gtxt small { color: #9fb3d4; }
#infoCard .nm .ctag { font-size: .85em; }
/* (07/10, 23 h 40) 6 canaux en zone (+ CLAN) : onglets plus serrés pour tout faire tenir */
#chatBox .ctab, .chat-small .ctab { min-width: 0; font-size: 10px; letter-spacing: .02em; padding: 4px 2px; }
#chatBox .ctab .cun, .chat-small .ctab .cun { margin-left: 3px; padding: 0 4px; font-size: 9px; }
.knPop .btn { white-space: nowrap; }
/* (08/10) CITADELLE sur la carte stellaire : qui la tient (blason + TAG) sous son nom */
.gZone.gCit { color: #ffcf5a; }
.gZone .gzL .gzOwn { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; }
.gZone .gzL .gzOwn b { display: inline; font-size: 12px; letter-spacing: .08em; color: #9fc6ff; }
.gZone .gzL .gzOwn small { display: inline; color: #cfe0f7; }
.gZone .gzL .gzEmb { display: inline-flex; line-height: 0; }
/* (08/10, 20 h 29) refus du serveur affiché dans la fenêtre du choix du côté */
.sidePick .spErr { margin: 0 0 10px; padding: 8px 10px; font-size: 13.5px; color: #ffb4a8; background: rgba(160, 30, 20, .25); border: 1px solid rgba(255, 110, 90, .45); border-radius: 6px; }
/* (08/10, 21 h 33) VUE GLOBALE (TAB) : tous les panneaux du HUD s'effacent, la carte entière reste visible (sauf les messages) */
#hud.mv > *:not(#toast):not(#hyperBanner) { visibility: hidden !important; }
/* (08/10, 21 h 41) TIRETTE du chat de zone : rangé sur le bord droit de l'écran, la tirette reste visible */
#chatBox { transition: transform .28s ease, background .2s; }
#chatBox.tucked { transform: translateX(calc(100% + 14px)); }
#chatBox .chatPull { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); width: 22px; height: 58px; padding: 0; font: inherit; font-size: 18px; line-height: 1; color: #cfe3ff; background: rgba(9, 15, 30, .78); border: 1px solid rgba(120, 160, 220, .35); border-right: 0; border-radius: 6px 0 0 6px; cursor: pointer; }
#chatBox .chatPull:hover { color: #fff; background: rgba(30, 50, 90, .9); }
#chatBox .chatPull.new::after { content: ''; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ff6a4a; box-shadow: 0 0 6px #ff6a4a; }

/* (09/10, 21 h 33) BASE : seul le petit chat reste, à la même place que sur les autres pages ; tout le reste du hangar est invisible et laisse passer les clics */

/* (09/10, 21 h 51) CARTES DES ZONES sur la carte stellaire (esprit Arc Raiders) : capture de la map, nom, une ligne, difficulté — à côté du viseur */
.gZone:hover, .gZone:focus-visible { filter: none; }
.gZone:hover .ret, .gZone:focus-visible .ret { filter: drop-shadow(0 0 10px rgba(255, 140, 80, .95)); }
.gZone .gzCard { position: absolute; width: clamp(150px, 12vw, 196px); display: flex; flex-direction: column; text-align: left; white-space: normal;
  background: rgba(10, 8, 18, .86); border: 1px solid rgba(255, 110, 80, .38); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.gZone .gzCard.gz-l, .gZone .gzCard.gz-lu, .gZone .gzCard.gz-ld { right: calc(100% + 8px); }
.gZone .gzCard.gz-l { top: 50%; translate: 0 -50%; } .gZone .gzCard.gz-ru, .gZone .gzCard.gz-rd { left: calc(100% + 8px); }
.gZone .gzCard.gz-lu, .gZone .gzCard.gz-ru { bottom: 22%; } .gZone .gzCard.gz-ld, .gZone .gzCard.gz-rd { top: 22%; }   /* au-dessus / en dessous du centre du viseur */
.gZone:hover .gzCard, .gZone:focus-visible .gzCard { border-color: #ffb09a; box-shadow: 0 0 0 1px rgba(255, 160, 120, .5), 0 10px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 120, 70, .35); transform: scale(1.04); z-index: 3; }
.gZone .gzCard.gz-l, .gZone .gzCard.gz-lu, .gZone .gzCard.gz-ld { transform-origin: right center; } .gZone .gzCard.gz-ru, .gZone .gzCard.gz-rd { transform-origin: left center; }
.gZone { filter: none; } .gZone .ret { filter: drop-shadow(0 0 6px rgba(255, 80, 50, .75)); }   /* (la lueur rouge reste sur le viseur, pas sur la carte) */
.gZone .gzPic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; clip-path: ellipse(120% 100% at 50% 0%); }   /* bas de l'image arrondi, comme sur la référence */
.gZone .gzPic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gZone .gzDiff { position: absolute; left: 8px; top: 7px; display: flex; align-items: center; gap: 3px; padding: 2px 6px; background: rgba(0, 0, 0, .55); border-radius: 3px; }
.gZone .gzDiff i { font-style: normal; font-size: 9px; letter-spacing: .14em; color: #e8ecf4; margin-right: 3px; }
.gZone .gzDiff em { width: 8px; height: 5px; background: rgba(255, 255, 255, .25); border-radius: 1px; } .gZone .gzDiff em.on { background: #ffd25a; }
.gZone .gzL.inCard { position: static; transform: none; margin: 0; padding: 7px 11px 0; background: none; border: 0; text-align: left; }
.gZone .gzL.inCard b { font-size: 13px; letter-spacing: .1em; white-space: normal; line-height: 1.2; }
.gZone .gzL.inCard .gzOwn { justify-content: flex-start; }
.gZone .gzLine { display: block; padding: 3px 11px 9px; font-size: 11.5px; line-height: 1.35; color: #b9c3d6; }
.gZone.soon .gzCard { filter: grayscale(.9) brightness(.7); }

/* ---------------------------------------------------------------- (11/10, demandé : optimiser l'interface hors zone)
   ATELIER / BOUTIQUE en LARGE : le centre prend aussi la colonne de droite (ARMES / ITEMS y étaient invisibles, le petit chat est dans
   Communauté et la carte dans l'onglet « Carte »), cartes plus compactes → toutes les recettes et tous les objets visibles sans défiler */
#pageBase.labWide > .center { grid-column: 2 / 4; padding-top: max(0px, calc(var(--acctB, 116px) + 10px - clamp(14px, 2vw, 30px))); }
#pageBase.labWide > .right { display: none; }
#pageBase.labWide #labRows, #pageBase.labWide #labItems, #pageBase.labWide .shopGrid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; padding: 8px 16px 4px; }
#pageBase.labWide .craftCard { padding: 10px 10px 10px; gap: 4px; }
#pageBase.labWide .craftCard .cSide .ic { width: 26px; height: 26px; }
#pageBase.labWide .craftCard .cBtns { margin-top: 4px; }
#pageBase.labWide .craftCard .cBtns button { padding: 5px 4px; }
#pageBase.labWide .labSec { margin-top: 8px; }
#pageBase.labWide .atelierHead { padding: 6px 14px 7px; }
#pageBase.labWide .atelierHead .hn { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
#pageBase.labWide .atelierHead h2 { font-size: 21px; } #pageBase.labWide .atelierHead p { margin: 0; }
#pageBase.labWide .shopBal { display: none; } /* (le solde est déjà en haut à droite) */
/* raffinage : brut → produit CÔTE À CÔTE */
#pageBase.labWide #labRows .craftCard:not(.itemCard) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2px; }
#pageBase.labWide #labRows .craftCard:not(.itemCard) .cBtns { grid-column: 1 / -1; }
#pageBase.labWide #labRows .craftCard:not(.itemCard) .cArrow b { font-size: 18px; }
/* items / boutique : icône, nom et quantité sur UNE ligne ; ingrédients = icône + quantité requise + ✓ / manque (le nom est dans l'infobulle) */
#pageBase.labWide .itemCard .cSide.out, #pageBase.labWide .shopCard .cSide { flex-direction: row; justify-content: center; gap: 7px; flex-wrap: wrap; }
#pageBase.labWide .itemCard .cIngr { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px 6px; }
#pageBase.labWide .itemCard .cIngr div { flex: none; gap: 4px; }
#pageBase.labWide .itemCard .cIngr span { display: none; }
#pageBase.labWide .itemCard .cIngr em { min-width: 0; }
#pageBase.labWide .shopCard .cSell b { font-weight: 700; color: var(--ic, #cfe0ff); }
#pageBase.labWide .shopCard .cBtns button { white-space: nowrap; font-size: 12px; } #pageBase.labWide .shopCard .cBtns button small { font-size: 10px; }
#pageBase.labWide .shopCard .cPrice { font-size: 14px; }
/* (11/10) écran de portable (≤ 820 px de haut) : le panneau ARMES sans la ligne de description (elle reste dans l'infobulle) → le petit chat
   garde sa place entière (son champ de saisie passait sous le panneau ITEMS) */
@media (max-height: 820px) { .wpn .wr { display: none; } .wpn { padding-top: 4px; padding-bottom: 4px; } }

/* ---------------------------------------------------------------- (11/10, idée 1 validée) UN SEUL CHAT REPLIABLE : tiroir « Discussion »
   (le petit chat ne prend plus de place dans la colonne de droite du hangar ; ARMES / ITEMS / CARTE STELLAIRE s'y rangent) */
#chatPanel { display: none !important; }
.right { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.right > #itemsPanel { grid-row: 2; } .right > #btnMap { grid-row: 4; }
#hangar #chatDrawer.chatDrawer { background: #081428 !important; } /* (la scène du hangar rend les panneaux transparents : pas celui-ci) */
.chatDrawer { position: absolute; z-index: 25; top: calc(var(--acctB, 116px) + 10px); right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column;
  background: #081428 !important; border-color: rgba(110, 170, 255, .55); box-shadow: -10px 0 40px rgba(0, 0, 0, .55); }
.chatDrawer[hidden] { display: none; }
.chatDrawer > header { align-items: center; }
.chatDrawer .cdX { background: none; border: 0; color: #9fb3d4; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; } .chatDrawer .cdX:hover { color: #fff; }
.chatDrawer .chatv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chatDrawer .ctabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px; border-bottom: 0; }
.chatDrawer .ctab { flex: none; padding: 4px 9px; border: 1px solid rgba(110, 160, 240, .3); border-radius: 13px; font-size: 11px; letter-spacing: .03em; text-transform: none; background: none; color: #9fb3d4; }
.chatDrawer .ctab.on { color: #04101f; background: #5ab0ff; border-color: #5ab0ff; font-weight: 700; }
.chatDrawer .clog { flex: 1; min-height: 0; overflow-y: auto; }
#sceneTabs .tab.chatTab { position: relative; }
.cdBadge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff5a5a; color: #fff; font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 8px rgba(255, 90, 90, .6); }
.cdBadge[hidden] { display: none; }

/* ---------------------------------------------------------------- (11/10, idée 3 validée) HANGAR PLUS COMPACT : soute en cases carrées 6 × 2
   (comme l'inventaire ; le nom de l'objet reste dans l'infobulle) → le panneau du vaisseau gagne de la hauteur (l'ultime s'affiche en entier) */
#holdSlots { grid-template-columns: repeat(6, 1fr) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
#holdSlots .slot { justify-content: center !important; padding: 0 !important; }
#holdSlots .slot .nm { display: none !important; }
#centerHangar { grid-template-rows: minmax(0, 2.5fr) minmax(0, 1fr); }

/* ---------------------------------------------------------------- (11/10, idée 2 validée) COMMUNAUTÉ : UNE seule rangée d'onglets à gauche
   (Contrats, Groupe, Amis, Clan, Classement, Mémorial), la DISCUSSION seule à droite, dans la colonne qui était vide */
#pageBase.ctrWide { grid-template-columns: minmax(420px, 1fr) minmax(340px, 34%) 0; }
#pageBase.ctrWide > .right { display: none; }
#pageBase.ctrWide > .center { padding-top: max(0px, calc(var(--acctB, 116px) + 10px - clamp(14px, 2vw, 30px))); }
#pageBase.ctrWide #ctrPanel { margin-top: max(0px, calc(var(--tabsB, 60px) + 10px - clamp(14px, 2vw, 30px))); }
#ctrPanel .gstrip, #ctrPanel .commuFriends { padding: 6px 4px; }

/* ---------------------------------------------------------------- (11/10, 13 h 22) CLASSEMENT « épique » : médaillons + arbre des grades (Ascension) */
.rk3 { display: flex; flex-direction: column; gap: 6px; }
.rkSec { margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #8fb0dc; }
.rkMeds { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 4px 0 2px; }
.rkMed { display: flex !important; flex-direction: column !important; align-items: center; gap: 6px; min-width: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rkMd { position: relative; width: clamp(64px, 6.2vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: transform .15s, box-shadow .15s;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--k) 55%, #000) 0%, #0a1020 72%);
  border: 4px solid #b89a5a; box-shadow: 0 0 0 2px #2a2216, 0 0 0 5px #7d6840, inset 0 0 22px rgba(0, 0, 0, .85), 0 8px 18px rgba(0, 0, 0, .6); }
.rkMd svg { width: 54%; color: color-mix(in srgb, var(--k) 70%, #fff); filter: drop-shadow(0 0 8px var(--k)); }
.rkMed:hover .rkMd { transform: translateY(-2px); }
.rkMed.on .rkMd { border-color: #f0d590; box-shadow: 0 0 0 2px #2a2216, 0 0 0 5px #d9bd7a, 0 0 30px var(--k), inset 0 0 22px rgba(0, 0, 0, .85); }
.rkMed.dim:not(.on) .rkMd { filter: grayscale(.75) brightness(.7); }
.rkPlq { width: 100%; padding: 4px 4px; text-align: center; font: 700 10.5px Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #f3e6c4; line-height: 1.15;
  background: linear-gradient(180deg, #3a3020, #1d170e); border: 1px solid #a58a52; border-radius: 3px; box-shadow: 0 0 0 1px #000 inset; }
.rkMed.on .rkPlq { border-color: #f0d590; color: #fff; }
.rkMg { font-size: 11px; color: color-mix(in srgb, var(--k) 70%, #fff); text-align: center; min-height: 14px; }
.rkHd { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.rkHd h2 { margin: 0; font: 700 24px Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: var(--k); text-shadow: 0 0 18px color-mix(in srgb, var(--k) 50%, transparent); }
.rkHd span { margin-left: auto; font-size: 12px; color: #8fa6c8; }
.rkTree { position: relative; flex: none; height: 320px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 88% 32%, color-mix(in srgb, var(--k) 25%, transparent), transparent 45%), linear-gradient(180deg, #0b1630, #070d1c);
  border: 1px solid color-mix(in srgb, var(--k) 35%, rgba(240, 213, 144, .3)); box-shadow: inset 0 0 60px rgba(0, 0, 0, .7); }
.rkGhost { position: absolute; left: 10px; top: 10px; width: 300px; color: var(--k); opacity: .08; pointer-events: none; }
.rkLn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rkDot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--k), 0 0 3px #fff; }
.rkBdg { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 150px; text-align: center; }
.rkSh { width: var(--w); height: calc(var(--w) * 1.15); padding: 4px; clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%); background: var(--fr); filter: drop-shadow(0 6px 10px #000); }
.rkIn { position: relative; width: 100%; height: 100%; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--k) 55%, #000) 0%, #0a1020 70%); }
.rkIn > svg { width: 46%; margin-top: -14%; color: color-mix(in srgb, var(--k) 60%, #fff); filter: drop-shadow(0 0 8px var(--k)); }
.rkPip { position: absolute; bottom: 24%; display: flex; gap: 3px; } .rkPip i { width: 6px; height: 6px; transform: rotate(45deg); background: #f0d590; box-shadow: 0 0 4px #f0d590; }
.rkBn { margin-top: 6px; font: 700 12.5px Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #f3e6c4; text-shadow: 0 1px 3px #000; line-height: 1.2; }
.rkBt { font-size: 11px; color: #9fb3d4; }
.rkBdg.t1 { --w: 66px; --fr: linear-gradient(160deg, #f0c08a, #8a5a2b 50%, #3a2412); }
.rkBdg.t2 { --w: 70px; --fr: linear-gradient(160deg, #ffd9a0, #b0703a 45%, #4a2a12); }
.rkBdg.t3 { --w: 76px; --fr: linear-gradient(160deg, #ffffff, #9aa6b8 45%, #39445a); }
.rkBdg.t4 { --w: 82px; --fr: linear-gradient(160deg, #fff1b0, #c9962a 45%, #4a3410); }
.rkBdg.t5 { --w: 90px; --fr: linear-gradient(160deg, #fff6c8, #e0b04a 35%, var(--k) 70%, #3a1010); }
.rkWg { position: absolute; top: 4px; left: 50%; width: 190px; transform: translateX(-50%); z-index: -1; opacity: .9; filter: drop-shadow(0 0 8px rgba(240, 200, 110, .45)); }
.rkBdg.lock .rkSh, .rkBdg.lock .rkWg { filter: grayscale(.8) brightness(.55) drop-shadow(0 6px 10px #000); }
.rkBdg.lock .rkBn { color: #7d8aa3; }
.rkLk { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 22px; color: #c9d3e6; opacity: .9; }
.rkBdg.t4 .rkLk { top: 34px; } .rkBdg.t5 .rkLk { top: 38px; }
.rkBdg.ok .rkBn { color: color-mix(in srgb, var(--k) 45%, #fff); } .rkBdg.ok .rkBt { color: color-mix(in srgb, var(--k) 40%, #cfdcf2); }
.rkBdg.cur .rkSh { filter: drop-shadow(0 0 16px var(--k)) drop-shadow(0 0 4px #fff); }
.rkBdg.cur .rkBn { color: #fff; font-size: 14px; }
.rkMe { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #04101f; background: #7fe3ff; box-shadow: 0 0 10px #7fe3ff; z-index: 3; }
.rkEmb { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 210px; text-align: center; }
.rkRay { position: absolute; top: 45%; left: 50%; width: 270px; height: 270px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--k) 30%, transparent) 0 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); opacity: .7; }
.rkCrown { width: 60px; margin-bottom: -12px; z-index: 2; filter: drop-shadow(0 3px 4px #000) grayscale(.6) brightness(.75); }
.rkBig { position: relative; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; border: 6px solid #c9a95f;
  box-shadow: 0 0 0 3px #2a2216, 0 0 0 9px #7d6840, 0 0 0 11px #2a2216, 0 0 50px color-mix(in srgb, var(--k) 55%, transparent), inset 0 0 30px #000;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--k) 50%, #000), #0a1020 72%); }
.rkBig svg { width: 76px; color: color-mix(in srgb, var(--k) 60%, #fff); filter: drop-shadow(0 0 14px var(--k)); opacity: .55; }
.rkEmb .rkMe { top: 2px; }
.rkEmb.got .rkCrown { filter: drop-shadow(0 3px 4px #000) drop-shadow(0 0 10px #ffcf5a); } .rkEmb.got .rkBig svg { opacity: 1; }
.rkEmb.got .rkBig { border-color: #f0d590; box-shadow: 0 0 0 3px #2a2216, 0 0 0 9px #d9bd7a, 0 0 0 11px #2a2216, 0 0 70px var(--k), inset 0 0 30px #000; }
.rkEPlq { position: relative; margin-top: 12px; padding: 4px 10px; font: 700 13px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #f3e6c4; line-height: 1.2;
  background: linear-gradient(180deg, #3a3020, #1d170e); border: 1px solid #a58a52; border-radius: 3px; box-shadow: 0 0 0 1px #000 inset, 0 4px 10px #000; }
.rkEmb small { position: relative; margin-top: 4px; font-size: 11px; color: #c9b88e; line-height: 1.3; }
.rkInfo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.rkCol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rkBox { padding: 10px 12px; border-radius: 9px; background: rgba(10, 22, 48, .7); border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); }
.rkBox small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #7fe3ff; }
.rkHd .rkHow { font-size: 15px; font-weight: 700; color: #fff; }
.rkMeL { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; } .rkMeL b { font-size: 18px; color: color-mix(in srgb, var(--k) 70%, #fff); } .rkMeL span { color: #cfdcf2; font-size: 13px; }
.rkBar { height: 9px; margin: 8px 0 5px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); border-radius: 5px; overflow: hidden; }
.rkBar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 50%, #000), var(--k)); }
.rkNx { font-size: 12.5px; color: #cfdcf2; }
.rkTop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; }
.rkTop li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 9px; background: rgba(10, 22, 48, .6); border-radius: 5px; }
.rkTop .rkN { font-weight: 800; color: #7f9bc0; } .rkTop li:nth-child(-n+3) .rkN { color: #ffcf5a; }
.rkTop .rkName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eaf4ff; } .rkTop li.top .rkName { color: #ffcf5a; }
.rkTop .rkP { color: #eaf4ff; font-variant-numeric: tabular-nums; } .rkTop li.me { outline: 1px solid #7fe3ff; background: rgba(20, 60, 100, .5); }
/* ---------------------------------------------------------------- (11/10, 13 h 22) GROUPE en cartes */
#groupBody { display: flex; flex-direction: column; gap: 8px; }
.gcdHead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(79, 214, 255, .18), rgba(10, 20, 44, .8)); border: 1px solid rgba(79, 214, 255, .45); }
.gcdHead b { font-size: 18px; letter-spacing: .12em; } .gcdHead span { color: #9fd8f0; font-size: 13px; } .gcdHead .gcdSp { flex: 1; }
.gcdInv { padding: 8px 14px; font: inherit; font-weight: 700; color: #04101f; background: #4fd6ff; border: 0; border-radius: 6px; cursor: pointer; }
.gcdInv:hover:not(:disabled) { background: #8fe6ff; } .gcdInv:disabled { opacity: .45; cursor: default; } .gcdInv.on { color: #dfe9ff; background: rgba(26, 62, 122, .8); }
.gcdTip { margin: 0 2px; font-size: 12.5px; color: #9fb3d4; }
.gcdList { display: grid; gap: 8px; }
.gcdCard { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 9px; background: rgba(12, 26, 56, .75); border: 1px solid rgba(110, 160, 240, .25); cursor: context-menu; }
.gcdCard img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(79, 214, 255, .5)); }
.gcdCard.me { border-color: rgba(127, 227, 255, .6); } .gcdCard.off img { filter: grayscale(1) brightness(.6); } .gcdCard.off .gcdName { color: #9fb0c8; }
.gcdName { font-size: 16px; font-weight: 700; color: #fff; } .gcdName .gcrown { color: #ffcf5a; margin-right: 5px; } .gcdName small { font-size: 12px; font-weight: 500; color: #7fe3ff; }
.gcdSt { margin-top: 3px; font-size: 12.5px; color: #9fb3d4; } .gcdSt i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #5ad08a; box-shadow: 0 0 6px #5ad08a; } .gcdSt i.off { background: #6a7890; box-shadow: none; }
.gcdAc { display: flex; gap: 6px; }
.gcdBtn { padding: 6px 10px; font: inherit; font-size: 12px; color: #dfe9ff; background: rgba(26, 62, 122, .7); border: 1px solid rgba(100, 165, 255, .4); border-radius: 5px; cursor: pointer; }
.gcdBtn:hover:not(:disabled) { background: rgba(40, 90, 170, .85); } .gcdBtn:disabled { opacity: .45; cursor: default; }
.gcdEmpty { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 12px; font: inherit; font-size: 13px; text-align: left; color: #7f9bc0; background: none; border: 1px dashed rgba(110, 160, 240, .35); border-radius: 9px; cursor: pointer; }
.gcdEmpty:hover { color: #bfe9ff; border-color: rgba(127, 227, 255, .6); }
.gcdEmpty span:first-child { width: 60px; height: 60px; border-radius: 50%; border: 2px dashed rgba(110, 160, 240, .35); display: grid; place-items: center; font-size: 26px; color: rgba(110, 160, 240, .6); }
/* ---------------------------------------------------------------- (11/10, 13 h 22) MÉMORIAL : fiche de pilote */
.mf { display: flex; flex-direction: column; gap: 4px; }
.mfHero { --k: #7fa6d8; display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; padding: 18px; border-radius: 12px;
  background: radial-gradient(ellipse at 15% 50%, color-mix(in srgb, var(--k) 25%, transparent), transparent 55%), linear-gradient(120deg, #1a1426, #0a1020 70%);
  border: 1px solid rgba(240, 213, 144, .45); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.mfBig { width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; border: 6px solid #c9a95f;
  box-shadow: 0 0 0 3px #2a2216, 0 0 0 8px #7d6840, 0 0 50px color-mix(in srgb, var(--k) 60%, transparent), inset 0 0 30px #000;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--k) 55%, #000), #0a1020 72%); }
.mfBig svg { width: 90px; color: color-mix(in srgb, var(--k) 60%, #fff); filter: drop-shadow(0 0 14px var(--k)); }
.mfHero.none .mfBig { filter: grayscale(.8) brightness(.75); }
.mfName { font: 700 34px Georgia, serif; letter-spacing: .06em; color: #fff; overflow-wrap: anywhere; }
.mfTitle { margin-top: 2px; font: italic 600 18px Georgia, serif; color: color-mix(in srgb, var(--k) 65%, #fff); }
.mfSub { margin-top: 8px; font-size: 13px; color: #b9c8e2; } .mfSub b { color: #f0d590; }
.mfRings { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mfRing { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.mfRg { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--k) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.mfRg > div { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--k) 45%, #000), #0a1020 75%); }
.mfRg svg { width: 30px; color: color-mix(in srgb, var(--k) 65%, #fff); }
.mfRing b { font-size: 11px; color: color-mix(in srgb, var(--k) 70%, #fff); } .mfRing small { font-size: 10.5px; color: #8fa6c8; }
.mfRing.none .mfRg { filter: grayscale(.7) brightness(.7); } .mfRing.top .mfRg { box-shadow: 0 0 16px #ffcf5a; } .mfRing.top b { color: #ffcf5a; }
.mfTro { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mfTro article { padding: 12px 14px; border-radius: 10px; background: linear-gradient(160deg, #241c10, #0f0c07); border: 1px solid #8a7448; box-shadow: inset 0 0 20px rgba(0, 0, 0, .6); }
.mfTro h4 { margin: 0 0 4px; font: 700 15px Georgia, serif; letter-spacing: .08em; color: #f0d590; text-transform: uppercase; }
.mfTro p { margin: 0 0 8px; font: italic 13px Georgia, serif; color: #e3d6b4; line-height: 1.35; }
.mfBd { display: flex; gap: 6px; flex-wrap: wrap; }
.mfBd span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; font-size: 11px; background: rgba(0, 0, 0, .4); border: 1px solid var(--k); color: #fff; }
.mfBd span.top { border-color: #ffcf5a; box-shadow: 0 0 8px rgba(255, 207, 90, .4); } .mfBd svg { width: 14px; height: 14px; color: var(--k); }

/* (11/10, 14 h 41) écran de connexion : CONNEXION ou CRÉER UN COMPTE (d'abord le bouton, ensuite pseudo + mot de passe) */
#loginForm .lgTitle { margin: 0 0 4px; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: #eaf4ff; }
#loginForm[data-mode="login"] .rgOnly, #loginForm[data-mode="register"] .lgOnly { display: none; }
#loginForm .lgBack { margin-top: 4px; padding: 6px; font: inherit; font-size: 13px; color: #8fc6ff; background: none; border: 0; cursor: pointer; text-align: center; }
#loginForm .lgBack:hover { color: #fff; text-decoration: underline; }