/* =====================================================================================================
   AMÉLIORATIONS FAÇON DIEP.IO (2026-10-19, demande Simon)
   1. Panneau latéral des stats : libellé CENTRÉ dans la barre (comme diep), créneaux bien découpés,
      créneaux PLANIFIÉS (plan [U]) en hachures derrière la jauge, bouton « Plan d'améliorations [U] » en pied.
   2. #plan-am : le planificateur [U] (js/plan-ameliorations.js).
   3. Cartes d'évolution : rôle + aperçu d'arme + lignée (js/aide-coques.js).
   Feuille chargée APRÈS hud-marque-pages.css : les sélecteurs reprennent `html body … #hud` pour
   l'emporter sur les thèmes (arcade, marque-pages, pastel) sans toucher à leurs fichiers.
   ===================================================================================================== */

/* ---------- 1. PANNEAU LATÉRAL ---------- */
html body #hud #stats-panel .stat-row { --pal: calc(100% / var(--paliers, 10)); }
/* libellé centré dans la barre, la touche [N] reste collée à droite (lecture diep.io) */
html body #hud #stats-panel .stat-name { left: 22px !important; right: 22px !important; text-align: center !important; }
/* créneaux : fentes CLAIRES sur la jauge comme sur la piste vide → on compte les paliers d'un coup d'œil */
html body:not(.vtouch) #hud #stats-panel .stat-ticks {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(var(--pal) - 2px),
    rgba(255, 255, 255, 0.92) calc(var(--pal) - 2px) var(--pal)) !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-bar { background: #d5e1ea !important; }
/* créneaux PLANIFIÉS par [U] : hachures de la couleur de la stat, SOUS la jauge acquise */
html body #hud #stats-panel .stat-plan {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c, #5aa9e6) 60%, transparent) 0 3px, transparent 3px 6px);
  transition: width 0.2s ease; pointer-events: none;
}
/* bouton « Plan d'améliorations [U] » en pied de panneau, pleine largeur */
html body #hud #stats-panel #stat-plan-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  width: 100% !important; height: 28px !important; margin: 8px 0 0 !important; padding: 0 10px !important;
  max-width: none !important; min-width: 0 !important; flex: none !important;
  background: #ffffff !important; color: #2c333b !important;
  border: 2px solid #2c333b !important; border-radius: 999px !important; box-shadow: 0 3px 0 #2c333b !important;
  font: 800 12.5px/1 "Fredoka", "Segoe UI", system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; cursor: pointer; pointer-events: auto;
}
html body #hud #stats-panel #stat-plan-btn:hover { background: #fff3c4 !important; }
html body #hud #stats-panel #stat-plan-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2c333b !important; }
html body #hud #stats-panel #stat-plan-btn.on { background: #ffe9a3 !important; }
html body #hud #stats-panel #stat-plan-btn kbd {
  font: 900 10.5px/16px "Fredoka", system-ui, sans-serif; min-width: 16px; height: 16px; padding: 0 3px; text-align: center;
  background: #2c333b; color: #fff; border-radius: 4px;
}
html body #hud #stats-panel #stat-plan-btn .spb-n:empty { display: none; }
html body #hud #stats-panel #stat-plan-btn .spb-n {
  min-width: 18px; padding: 0 5px; border-radius: 999px; background: #2c333b; color: #ffe27a;
  font: 900 11px/16px "Fredoka", system-ui, sans-serif;
}
/* mobile portrait (bande « piano ») : pas de place pour le bouton — il reste dans l'overlay ouvert */
html body.vtouch.has-stat-pts:not(.mob-stats-open) #hud #stats-panel #stat-plan-btn { display: none !important; }

/* ---------- 2. PLANIFICATEUR [U] ---------- */
#plan-am {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 75; width: min(470px, calc(100vw - 16px)); max-height: calc(100vh - 120px); overflow: auto;
  padding: 12px 14px 12px;
  background: #fffaf0; color: #2c333b;
  border: 3px solid #2c333b; border-radius: 18px; box-shadow: 0 5px 0 #2c333b, 0 12px 30px rgba(0, 0, 0, 0.25);
  font: 600 13px/1.35 "Fredoka", "Segoe UI", system-ui, sans-serif;
  animation: paIn 0.18s ease-out;
}
#plan-am.hidden { display: none; }
@keyframes paIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }
@media (prefers-reduced-motion: reduce) { #plan-am { animation: none; } }
#plan-am .pa-head { display: flex; align-items: center; gap: 8px; }
#plan-am .pa-head b { font-size: 16px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
#plan-am .pa-count {
  margin-left: auto; padding: 1px 9px; border: 2px solid #2c333b; border-radius: 999px;
  background: #e8f1f6; font-weight: 900; font-size: 12px;
}
#plan-am .pa-x {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #2c333b;
  background: #fff; color: #2c333b; font: 900 18px/22px system-ui, sans-serif; cursor: pointer;
}
#plan-am .pa-help { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.45; color: #3a434d; }
#plan-am .pa-row {
  --pal: calc(100% / var(--paliers, 10));
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 128px 22px 26px 26px; align-items: center;
  gap: 6px; margin: 5px 0; padding: 3px 4px; border-radius: 10px;
}
#plan-am .pa-row:nth-child(odd) { background: rgba(44, 51, 59, 0.04); }
#plan-am .pa-row.pa-full { animation: paFull 0.35s ease; }
@keyframes paFull { 30% { background: #ffd2cc; } }
#plan-am .pa-key {
  width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 6px;
  background: #2c333b; color: #fff; font-weight: 900; font-size: 12px;
}
#plan-am .pa-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-row: 1; grid-column: 2; }
/* équivalent diep.io en petit sous le nom (même colonne, 2e ligne de la cellule) */
#plan-am .pa-diep { display: none; }
#plan-am .pa-bar {
  position: relative; height: 18px; border-radius: 999px; overflow: hidden;
  background: #e3ecf2; border: 2px solid #2c333b;
}
#plan-am .pa-got, #plan-am .pa-plan { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.15s ease; }
#plan-am .pa-plan {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c, #5aa9e6) 70%, transparent) 0 3px, transparent 3px 6px);
}
#plan-am .pa-got { background: var(--c, #5aa9e6); z-index: 1; }
#plan-am .pa-ticks {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--pal) - 2px), #ffffff calc(var(--pal) - 2px) var(--pal));
}
#plan-am .pa-n { text-align: center; font-weight: 900; font-size: 13px; }
#plan-am .pa-plus, #plan-am .pa-minus {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #2c333b; box-shadow: 0 2px 0 #2c333b;
  font: 900 17px/20px "Fredoka", system-ui, sans-serif;
}
#plan-am .pa-plus { background: var(--c, #5aa9e6); color: #fff; -webkit-text-stroke: 1px #2c333b; paint-order: stroke fill; }
#plan-am .pa-minus { background: #fff; color: #2c333b; }
#plan-am .pa-plus:disabled, #plan-am .pa-minus:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
#plan-am .pa-seq-head { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-weight: 900; }
#plan-am .pa-keys { font-weight: 600; font-size: 11.5px; color: #5a6470; }
#plan-am .pa-seq {
  display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; padding: 6px;
  border: 2px dashed rgba(44, 51, 59, 0.3); border-radius: 12px; background: #fff;
}
#plan-am .pa-empty { color: #5a6470; font-size: 12.5px; padding: 2px 4px; }
#plan-am .pa-chip {
  width: 22px; height: 22px; padding: 0; border-radius: 6px; cursor: pointer;
  background: var(--c, #5aa9e6); color: #fff; border: 2px solid #2c333b;
  font: 900 12px/18px "Fredoka", system-ui, sans-serif; -webkit-text-stroke: 0.8px #2c333b; paint-order: stroke fill;
}
#plan-am .pa-chip.done { opacity: 0.35; }
#plan-am .pa-chip.next { outline: 3px solid #ffd24a; outline-offset: 1px; }
#plan-am .pa-chip:hover { transform: translateY(-1px); filter: brightness(1.08); }
#plan-am .pa-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
#plan-am .pa-btn {
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 2px solid #2c333b; box-shadow: 0 3px 0 #2c333b; background: #fff; color: #2c333b;
  font: 800 13px/1.2 "Fredoka", system-ui, sans-serif;
}
#plan-am .pa-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2c333b; }
#plan-am .pa-reset { background: #ffe1dc; }
#plan-am .pa-ok { background: #ffd24a; }
#plan-am kbd {
  display: inline-block; min-width: 15px; padding: 0 3px; margin-left: 3px; border-radius: 4px;
  background: #2c333b; color: #fff; font: 900 10.5px/15px "Fredoka", system-ui, sans-serif; text-align: center;
}
/* petit écran / tactile : le plan prend le haut de l'écran (le joystick vit en bas) */
@media (max-width: 560px), (max-height: 520px) {
  #plan-am { top: 8px; bottom: auto; max-height: calc(100vh - 16px); padding: 10px; }
  #plan-am .pa-row { grid-template-columns: 20px minmax(0, 1fr) 84px 20px 28px 28px; }
  #plan-am .pa-help { font-size: 12.5px; }
}

/* ---------- 3. CARTES D'ÉVOLUTION : aide au choix ---------- */
html body #hud #shipyard-bar .sy-card.sy-has-help { width: 172px; }
html body #hud #shipyard-bar .sy-card.sy-has-help .hull-extra { display: none !important; }
html body #hud #shipyard-bar .sy-help { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 2px; text-align: left; }
html body #hud #shipyard-bar .sy-role { font: 600 11.5px/1.3 "Fredoka", "Segoe UI", system-ui, sans-serif; color: #2c333b; }
html body #hud #shipyard-bar .sy-tag {
  display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 999px;
  font: 900 10px/16px "Fredoka", system-ui, sans-serif; font-style: normal; letter-spacing: 0.03em; text-transform: uppercase;
  background: #2c333b; color: #ffffff; vertical-align: 1px;
}
/* couleur du rôle par famille d'arme : on repère « tank », « invocateur », « longue portée »… */
html body #hud #shipyard-bar .sy-tag-crab, html body #hud #shipyard-bar .sy-tag-fleet, html body #hud #shipyard-bar .sy-tag-swarm { background: #c9562c; }
html body #hud #shipyard-bar .sy-tag-broadside { background: #3e6a99; }
html body #hud #shipyard-bar .sy-tag-torpedo, html body #hud #shipyard-bar .sy-tag-rail, html body #hud #shipyard-bar .sy-tag-storm, html body #hud #shipyard-bar .sy-tag-rocket { background: #6a4fc0; }
html body #hud #shipyard-bar .sy-tag-ram { background: #a8323a; }
html body #hud #shipyard-bar .sy-tag-trap, html body #hud #shipyard-bar .sy-tag-wind { background: #2f7d5b; }
html body #hud #shipyard-bar .sy-tag-mortar { background: #8a5a1c; }
html body #hud #shipyard-bar .sy-weap {
  display: flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.7); border: 1.5px solid rgba(44, 51, 59, 0.25);
}
html body #hud #shipyard-bar .sy-card canvas.sy-wglyph { flex: 0 0 56px; width: 56px !important; height: 26px !important; border-radius: 0; }
html body #hud #shipyard-bar .sy-wname { font: 800 10.5px/1.2 "Fredoka", system-ui, sans-serif; color: #2c333b; }
html body #hud #shipyard-bar .sy-line { font: 700 10px/1.25 "Fredoka", system-ui, sans-serif; color: #4b5560; }
/* le titre de la carte est passé à l'encre blanche cerclée (arcade) : on garde l'aide à l'encre */
html body.ui-arcade #hud #shipyard-bar .sy-help * { -webkit-text-stroke: 0 !important; }
@media (max-width: 560px) {
  html body #hud #shipyard-bar .sy-card.sy-has-help { width: 140px; }
  html body #hud #shipyard-bar .sy-role { font-size: 10.5px; }
  html body #hud #shipyard-bar .sy-line { display: none; }
}

/* ---------- 4. CHOIX DU PROJECTILE (coques à munitions : Chalutier, Voilier, Trirème) ---------- */
.sy-mun { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 2px; text-align: left; }
.sy-mun-l { font: 800 10px/1.2 "Fredoka", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #2c333b; }
.sy-mun-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sy-mun-b {
  flex: 1 1 auto; min-height: 26px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  font: 800 10.5px/1.2 "Fredoka", system-ui, sans-serif; color: #2c333b;
  background: rgba(255, 255, 255, 0.75); border: 2px solid rgba(44, 51, 59, 0.35);
}
.sy-mun-b:hover { border-color: #2c333b; }
.sy-mun-b:focus-visible { outline: 3px solid #1d5fd1; outline-offset: 1px; }
.sy-mun-b.on { background: #2c333b; color: #ffffff; border-color: #2c333b; }
.sy-mun-d { font: 600 10.5px/1.3 "Fredoka", system-ui, sans-serif; color: #2c333b; }
@media (max-width: 560px) { .sy-mun-d { font-size: 10px; } }