/* ATELIER DU NAVIRE (js/atelier-ui.js) — barre d'amélioration façon moomoo.io, cartes « Nouvelle coque ».
   Même place que le bandeau d'évolution (#shipyard-bar). */

/* ---------- barre d'amélioration ---------- */
#atj-up { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); z-index: 13; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: auto; font-family: var(--ar-font, "Fredoka", "Segoe UI", system-ui, sans-serif);
  user-select: none; max-width: calc(100vw - 16px); }
#atj-up[hidden] { display: none !important; }
body.shop-open #atj-up { display: none !important; }
#atj-up .atj-title { display: flex; gap: 8px; align-items: baseline; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35); text-align: center; }
#atj-up .atj-n { font-size: 14px; color: #ffd96a; }
#atj-up .atj-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#atj-up .atj-tile { position: relative; width: 68px; height: 68px; border-radius: 8px; background: rgba(8,24,33,.72); cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, background .12s; box-shadow: inset 0 -4px 0 var(--sc, #e8b443);
  animation: atjpop .25s ease-out both; touch-action: manipulation; }
#atj-up .atj-tile:nth-child(2) { animation-delay: .04s; } #atj-up .atj-tile:nth-child(3) { animation-delay: .08s; } #atj-up .atj-tile:nth-child(4) { animation-delay: .12s; }
@keyframes atjpop { from { transform: scale(.6); opacity: 0; } }
#atj-up .atj-tile svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
#atj-up .atj-tile:hover, #atj-up .atj-tile.on { background: rgba(8,24,33,.9); transform: translateY(-3px); }
#atj-up .atj-tile.on { outline: 2px solid rgba(255,255,255,.8); }
#atj-up .atj-tier { position: absolute; top: 3px; right: 4px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 5px; background: var(--sc, #e8b443);
  color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
#atj-up .atj-fnt { background: rgba(31,79,134,.55); }
#atj-up .atj-hullc { width: 170px; height: auto; padding: 8px 10px 10px; display: grid; gap: 3px; justify-items: center; align-content: start; overflow: hidden;
  background: linear-gradient(180deg, rgba(60,42,8,.6), rgba(0,0,0,.5)); border: 2px solid rgba(232,180,67,.85);
  box-shadow: inset 0 -4px 0 #e8b443, 0 6px 18px rgba(0,0,0,.35); }
#atj-up .atj-hullc .atj-glow { position: absolute; left: 50%; top: 12px; width: 120px; height: 80px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,217,106,.45), rgba(255,217,106,0) 70%); pointer-events: none; }
#atj-up .atj-hullc canvas { position: relative; width: 150px; height: 100px; }
#atj-up .atj-hn { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.1; }
#atj-up .atj-hp { font-size: 11px; font-weight: 700; color: #ffd96a; text-align: center; line-height: 1.2; min-height: 13px; }
#atj-up .atj-bar { display: grid; grid-template-columns: 52px 1fr 12px; gap: 5px; align-items: center; width: 100%; font-size: 10.5px; color: #e6f2f6; }
#atj-up .atj-bar em { font-style: normal; opacity: .85; }
#atj-up .atj-bar > span { height: 6px; border-radius: 9px; background: rgba(255,255,255,.18); overflow: hidden; }
#atj-up .atj-bar b { display: block; height: 100%; border-radius: 9px; background: #ffd96a; }
#atj-up .atj-bar i { font-style: normal; font-size: 9px; } #atj-up .atj-bar i.up { color: #7fe0a0; } #atj-up .atj-bar i.dn { color: #ff9d8a; }
#atj-up { position: fixed; } /* (déjà fixe : repère de la bulle d'info absolue ci-dessous) */
/* BULLE D'INFO HORS FLUX (revue Simon 2026-10-21 : elle « apparaît et disparaît très vite ») : en absolu sous les cartes,
   elle ne change plus la hauteur de #atj-up — le HUD épuré ne déplace plus les cartes sous le pointeur (cf. atelier-ui.js) */
#atj-up .atj-info { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); pointer-events: none;
  width: 300px; max-width: calc(100vw - 24px); box-sizing: border-box; background: rgba(8,24,33,.86); border-radius: 8px; padding: 7px 10px; display: grid; gap: 2px;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
/* atelier calé en bas de l'écran : la bulle passe à DROITE des cartes (le navire au-dessus reste visible), sinon au-dessus */
#atj-up .atj-info.atj-side { top: auto; bottom: 0; left: calc(100% + 10px); transform: none; width: 280px; }
#atj-up .atj-info.atj-flip { top: auto; bottom: calc(100% + 6px); }
/* essayage au survol : plus de spot sombre circulaire autour du navire (revue Simon 2026-10-21 : « retire le rond ») */
html body.atj-pv #hepure-spot { opacity: 0 !important; }
/* coût en CRISTAL ATLANTE (lot C) : pastille ◆N sur la tuile, ligne « Nécessite » + où le trouver dans la bulle */
#atj-up .atj-tier.atj-cost { top: auto; bottom: 3px; background: #2f6f86; color: #fff; }
#atj-up .atj-ori { color: #9fe3f5; } #atj-up .atj-ori i { font-style: normal; color: #7fd8ef; }
#atj-up .atj-orih { font-size: 11.5px; line-height: 1.3; color: #d6eef5; }
#atj-up .atj-info b { font-size: 15px; }
#atj-up .atj-meta { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#atj-up .atj-d { font-size: 12.5px; line-height: 1.3; color: #eef5f8; }
#atj-up .atj-r { font-size: 11.5px; font-weight: 700; color: #ffb0a0; }
#atj-up .atj-info:empty { display: none; } /* pas de barre d'aide au repos */
#atj-up .atj-hint { font-size: 12px; color: #d6e6ec; text-align: center; }
#atj-up .atj-keep { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 11px; }
#atj-up .atj-keep em { font-style: normal; opacity: .85; margin-right: 2px; }
#atj-up .atj-mini { width: 26px; height: 26px; border-radius: 5px; background: rgba(0,0,0,.3); box-shadow: inset 0 -2px 0 var(--sc); display: grid; place-items: center; }
#atj-up .atj-mini svg { width: 20px; height: 20px; }
#atj-up .atj-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* cartes lisibles (2026-10-21) : nom + badge de catégorie visibles SANS survol ; synergie dans la bulle d'info */
#atj-up .atj-card { width: 96px; height: auto; min-height: 96px; padding: 6px 4px 8px; gap: 3px; align-content: start; justify-items: center; }
#atj-up .atj-card svg { width: 46px; height: 46px; }
#atj-up .atj-nm { font-size: 11.5px; font-weight: 700; line-height: 1.12; color: #fff; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 26px; overflow-wrap: anywhere; }
#atj-up .atj-bdg { display: inline-block; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.35; color: #0b1a22; text-shadow: none; background: #ffd96a; white-space: nowrap; }
#atj-up .atj-bdg[data-b="Dégâts"] { background: #ff9d8a; } #atj-up .atj-bdg[data-b="Contrôle"] { background: #cdb0ff; }
#atj-up .atj-bdg[data-b="Mobilité"] { background: #7fe0a0; } #atj-up .atj-bdg[data-b="Soutien"] { background: #8cc8ff; }
#atj-up .atj-bdg[data-b="Économie"] { background: #ffd96a; }
#atj-up .atj-meta .atj-bdg { vertical-align: middle; }
#atj-up .atj-syn { font-size: 12px; font-weight: 700; color: #9ff0b8; }
#atj-up .atj-syn::before { content: "✓ "; }
/* SYNERGIES (js/synergies.js, S70) : bandeau FUSION / COMBO / REMPLACE posé sur le haut de la carte (texte + couleur +
   liseré), icônes des éléments concernés, phrase courte. Tailles pensées pour la carte mobile (80 px). */
html body #atj-up .atj-row .atj-tile.atj-card.atj-hassy { padding-top: 14px; height: auto; }
html body #atj-up .atj-row .atj-tile.atj-card.atj-hasfig { height: auto; } /* la règle mobile `.atj-tile { height }` figeait la carte : la ligne de synergie débordait */
#atj-up .atj-card.atj-hassy { box-shadow: inset 0 -3px 0 var(--sc), 0 0 0 2px var(--syc, #ffd96a); }
#atj-up .atj-card.atj-hassy:has(.atj-sy[data-k="combo"]) { --syc: #7fe0a0; }
#atj-up .atj-card.atj-hassy:has(.atj-sy[data-k="replace"]) { --syc: #8cc8ff; }
#atj-up .atj-sy { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 900;
  letter-spacing: .06em; line-height: 1.4; color: #1a1205; background: #ffd96a; border: 2px solid #2a2017; white-space: nowrap; text-shadow: none; z-index: 1; }
#atj-up .atj-sy[data-k="combo"] { background: #7fe0a0; }
#atj-up .atj-sy[data-k="replace"] { background: #8cc8ff; }
#atj-up .atj-syl { display: flex; align-items: center; justify-content: center; gap: 1px; min-height: 18px; }
#atj-up .atj-syl em { font-style: normal; font-weight: 900; font-size: 11px; color: #ffe9a8; margin: 0 1px; }
#atj-up .atj-syi { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(0,0,0,.35); }
html body #atj-up .atj-row .atj-tile.atj-card .atj-syi svg { width: 20px; height: 20px; filter: none; } /* plus fort que les tailles d'icône de carte (hud-epure, paysage) */
#atj-up .atj-sys { font-size: 10px; font-weight: 800; line-height: 1.15; color: #ffe9a8; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
#atj-up .atj-bdg[data-b="Fusion"] { background: #ffd96a; }
#atj-up .atj-sy[data-k="trait"] { background: #ffb38a; font-size: 9px; letter-spacing: 0; padding: 1px 5px; }
#atj-up .atj-card.atj-hassy:has(.atj-sy[data-k="trait"]) { --syc: #ffb38a; }
#atj-up .atj-syx[data-k="trait"] b { background: #ffb38a; }
/* CHIFFRES (point 6a) : « Puissance de feu +13 % », « Canons 4 → 6 »… — compacts, lisibles à 80 px */
#atj-up .atj-figs { display: grid; gap: 1px; width: 100%; }
#atj-up .atj-fg { display: block; font-size: 10px; line-height: 1.15; color: #d8eef6; text-align: center; overflow-wrap: anywhere; }
#atj-up .atj-fg b { color: #9ff0b8; font-weight: 900; white-space: nowrap; }
#atj-up .atj-figi { margin: 3px 0; } #atj-up .atj-figi .atj-fg { text-align: left; font-size: 12px; }
html body.ui-arcade #atj-up .atj-fg { color: var(--an-ink, #2a2017); } html body.ui-arcade #atj-up .atj-fg b { color: var(--an-sage-text, #2f6b3f); }
#atj-up .atj-syx { font-size: 12px; font-weight: 700; color: #ffe9a8; }
#atj-up .atj-syx b { display: inline-block; padding: 0 5px; margin-right: 3px; border-radius: 6px; font-size: 10px; color: #1a1205; background: #ffd96a; }
#atj-up .atj-syx[data-k="combo"] b { background: #7fe0a0; } #atj-up .atj-syx[data-k="replace"] b { background: #8cc8ff; }
@media (max-width: 520px) {
  #atj-up { top: 56px; } /* sous les boutons menu / perles du coin haut-gauche (aucun chevauchement) */
  #atj-up .atj-info { width: 354px; } #atj-up .atj-row { min-width: min(354px, calc(100vw - 24px)); } /* assez large pour 4 cartes sur UNE ligne : l'atelier reste bas et ne touche plus l'emplacement d'objet */
  #atj-up .atj-tile.atj-card { width: 80px; min-height: 86px; } #atj-up .atj-tile.atj-card svg { width: 38px; height: 38px; } #atj-up .atj-nm { font-size: 10.5px; min-height: 24px; }
  #atj-up .atj-tile { width: 58px; height: 58px; } #atj-up .atj-tile svg { width: 44px; height: 44px; }
  #atj-up .atj-fg { font-size: 9.5px; } #atj-up .atj-sys { font-size: 9.5px; } html body #atj-up .atj-row .atj-tile.atj-card .atj-syi svg { width: 15px; height: 15px; } #atj-up .atj-syi { width: 17px; height: 17px; }
  #atj-up .atj-hullc { width: 140px; } #atj-up .atj-hullc canvas { width: 124px; height: 83px; }
  #atj-up .atj-title { font-size: 15px; }
}
/* paysage bas (mobile) : tuiles et texte CÔTE À CÔTE, pour laisser voir le navire au centre (essayage au survol) */
@media (max-height: 520px) and (min-width: 600px) {
  #atj-up { display: grid; grid-template-columns: auto auto; align-items: start; column-gap: 8px; }
  #atj-up .atj-title { grid-column: 1 / -1; justify-self: center; font-size: 15px; }
  #atj-up .atj-tile { width: 58px; height: 58px; } #atj-up .atj-tile svg { width: 44px; height: 44px; }
  #atj-up .atj-row { flex-wrap: nowrap; }
  #atj-up .atj-info { width: 260px; top: 28px; left: calc(100% + 8px); transform: none; bottom: auto; } /* à droite des cartes */
}
@media (prefers-reduced-motion: reduce) { #atj-up .atj-tile { animation: none; } }
/* thème arcade (fond de bulle clair) : coût atlante en encre contrastée (WCAG AA) */
html body.ui-arcade #atj-up .atj-info .atj-ori, html body.ui-arcade #atj-up .atj-info .atj-ori i { color: var(--an-teal-d, #1f5f6e); }
html body.ui-arcade #atj-up .atj-info .atj-orih { color: var(--an-ink, #2a2017); }
html body.ui-arcade #atj-up .atj-info .atj-syx { color: var(--an-ink, #2a2017); }
html body.ui-arcade #atj-up :is(.atj-sys, .atj-syl em) { color: var(--an-ink, #2a2017); }
html body.ui-arcade #atj-up .atj-syi { background: var(--an-marble-2, #e8dcc4); }
html body.ui-arcade #atj-up .atj-tile.atj-hassy { border-color: #c9962a; } html body.ui-arcade #atj-up .atj-tile.atj-hassy:has(.atj-sy[data-k="combo"]) { border-color: #4f9a63; } html body.ui-arcade #atj-up .atj-tile.atj-hassy:has(.atj-sy[data-k="replace"]) { border-color: #4f86b8; }