/* =====================================================================
   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; }
.acctCol { width: 248px; display: flex; flex-direction: column; gap: 8px; }
/* ---- onglets de scène (Hangar / Atelier / Carte stellaire), à gauche de la barre du compte ---- */
/* icônes seules (pas de texte : ça débordait) — l'infobulle (title) et aria-label portent le nom de la scène */
#sceneTabs { display: flex; gap: 8px; }
#sceneTabs .tab { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; 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; }
#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(/hangar-bg.webp); } /* carte bleue fournie (2048 px, WebP) */
#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; }
#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; }
.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; overflow-y: auto; padding: 4px 6px 0 10px; font-size: 13.5px; scrollbar-width: thin; scrollbar-color: rgba(90, 150, 240, .4) transparent; }
.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; }
.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: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: clamp(10px, 1.4vw, 18px); padding-top: 88px; min-height: 0; min-width: 0; }
/* 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; overflow-y: auto; align-self: center; }
#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; }

/* ---- 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: 2; min-height: 0; }
.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: column; gap: 5px; padding: 8px; }
.islot { flex: 1; min-height: 22px; display: flex; align-items: stretch; gap: 6px; }
.islot .key { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #9fc0e6; background: rgba(20, 40, 86, .55); border: 1px solid rgba(110, 160, 240, .3); border-radius: 5px; }
.islot .isl { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; border: 1px dashed rgba(110, 160, 240, .32); border-radius: 5px; background: rgba(8, 22, 50, .4); transition: border-color .12s, background .12s; }
.islot .isl.over { border-color: var(--gl-hi); background: rgba(30, 90, 150, .3); }
.islot .isl.has { border-style: solid; border-color: rgba(140, 190, 255, .4); }
.islot .isl .ic { flex: none; width: 17px; height: 17px; }
.islot .isl b { font-size: 11px; font-weight: 600; color: #eaf6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.islot .isl .ph { font-size: 10px; color: #5f7fa8; }
.islot .isl .clr { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 14px; color: #9fb4d4; background: none; border: 0; opacity: 0; transition: opacity .12s; }
.islot .isl.has:hover .clr { opacity: 1; }
.islot .isl .qn { margin-left: auto; padding-right: 18px; flex: none; font-size: 11px; font-weight: 700; color: #8fe0a8; }
.islot .isl.empty .qn { font-weight: 500; color: #ff9a8c; } /* rien dans la soute : l'emplacement ne servira à rien en combat */
.islot .isl.empty .ic { opacity: .5; }
.itemsHint { margin: 6px 12px 0; font-size: 11px; line-height: 1.35; color: #ffb4aa; }
.itemsHint[hidden] { display: none; }
.islot .isl .clr:hover { color: #fff; }
.itemsTip { margin: 0 12px 6px; font-size: 10px; line-height: 1.25; color: #5f7fa8; }
.mapBtn { grid-row: 3; 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) { .right { padding-top: 56px; } .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: #8fe0a8; } .itemCard .cIngr div.miss b { color: #ff9a8c; }
.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 */
#cargoTab { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; margin-bottom: 4px; color: #ffcf6a; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
#cargoTab span { flex: 1; text-align: left; font-size: 13px; letter-spacing: .14em; color: var(--text); }
#cargoTab kbd { margin: 0; }
#cargoTab:hover { border-color: #ffcf6a; box-shadow: 0 0 12px rgba(255, 207, 106, .35); }
#cargoTab.on { border-color: #ffcf6a; background: rgba(255, 190, 60, .14); }
#cargoTab[hidden] { display: none; }
#cargoPanel { position: absolute; left: 226px; top: 50%; transform: translateY(-50%); display: flex; gap: 12px; align-items: flex-start; 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: translate(-46px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
#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: 300px; 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; }
.ctip { margin: 0 12px 10px; font-size: 11.5px; line-height: 1.35; color: #6f8fb8; }
@media (max-width: 900px) { #cargoPanel { left: 14px; top: 76px; 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; }