/* selection.css — Brick ZR : un bâtiment choisi dans Ma ville (selection.js) : sa petite rangée de boutons ronds au-dessus de lui,
   sa fenêtre « Infos » ; la Mairie qui peut monter (la flèche dorée de sa rangée, son signe dans la ville, la lueur de « Améliorer la
   Mairie ») ; et pendant un déplacement (city.js) : la barre fine sur une seule ligne, le bac des cartes replié.
   Le style « Brick ZR, les briques » (skill brikz-ui) : les jetons de :root (styles.css). */

/* ── La rangée : une petite tuile avec une pointe vers le bâtiment, des boutons ronds (icône et libellé court) ── */
.sel-rang {
  position: absolute; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 5px 4px; border-radius: var(--r-tuile); background: var(--plaque);
  box-shadow: var(--ombre-tuile), 0 8px 16px rgba(0,0,0,.32); will-change: transform; transform-origin: 50% 100%;
}
.sel-rang.hidden { display: none; }
.sel-rang.sel-arrive { animation: sel-pop .16s var(--ease-out); }
@keyframes sel-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.sel-rang::after {
  content: ''; position: absolute; left: var(--sel-pointe, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; z-index: -1;
  background: var(--plaque); transform: rotate(45deg); border-radius: 0 0 3px 0; box-shadow: 3px 3px 0 var(--plaque-bord);
}
/* dessous le bâtiment (le haut de l'écran est pris) : la pointe en haut */
.sel-rang.sel-dessous { transform-origin: 50% 0; }
.sel-rang.sel-dessous::after { bottom: auto; top: -6px; transform: rotate(225deg); box-shadow: none; }
.city-touring .sel-rang, .city-fullscreen:not(.active) .sel-rang { display: none !important; }
.sel-nom { max-width: 236px; padding: 1px 6px 0; font-size: 12px; font-weight: 700; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-niv { color: var(--jaune); font-variant-numeric: tabular-nums; }
.sel-boutons { display: flex; gap: 2px; }
/* un bouton : un rond (une tuile ronde, sans tenons) et son libellé ; toute la colonne se touche (60 × 58 px) */
.sel-b {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; min-height: 58px; padding: 2px 0 1px;
  border: 0; border-radius: var(--r-brique); background: none; color: var(--texte); font: 700 11.5px/1.1 var(--font); cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.sel-rond {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: linear-gradient(180deg, #415491 0 3px, var(--plaque-vive) 3px); box-shadow: 0 3px 0 var(--plaque-bord);
  transition: transform var(--appui) var(--ease-out), box-shadow var(--appui) var(--ease-out);
}
.sel-rond .ico { width: 30px; height: 30px; }
.sel-b:active .sel-rond { transform: translateY(3px); box-shadow: 0 0 0 var(--plaque-bord); }
.sel-b:focus-visible { outline: none; }
.sel-b:focus-visible .sel-rond { outline: 3px solid var(--jaune); outline-offset: 2px; }
/* Ramasser : une pièce d'or (le jaune de l'or), son nombre de pièces en pastille */
.sel-ramasser .sel-rond { background: linear-gradient(180deg, var(--jaune-face) 0 3px, var(--jaune) 3px); box-shadow: 0 3px 0 var(--jaune-ombre); }
.sel-ramasser:active .sel-rond { box-shadow: 0 0 0 var(--jaune-ombre); }
.sel-n {
  position: absolute; top: -7px; right: -11px; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rouge); color: #fff; font: 800 11px/18px var(--font); text-align: center; box-shadow: 0 2px 0 var(--rouge-ombre);
  font-variant-numeric: tabular-nums;
}
/* Terminer un chantier : son prix en or dans une pastille dorée (un prix à payer, pas de l'or à ramasser) */
.sel-n.sel-prix { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 5px; background: var(--jaune); color: var(--jaune-txt); box-shadow: 0 2px 0 var(--jaune-ombre); }
.sel-n.sel-prix .pg-or { width: 11px; height: 11px; vertical-align: 0; }
@media (hover: hover) and (pointer: fine) { .sel-b:hover .sel-rond { filter: brightness(1.12); } }
/* La Mairie peut monter tout de suite (l'or, l'attractivité, une équipe libre) : une petite flèche dorée sur son « Améliorer » */
.sel-pret {
  position: absolute; top: -6px; right: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--jaune-face) 0 2px, var(--jaune) 2px); box-shadow: 0 2px 0 var(--jaune-ombre);
}
.sel-pret svg { width: 11px; height: 11px; fill: var(--jaune-txt); }
/* … et un petit signe au-dessus d'elle, dans la ville : il ne se touche pas (les touchers passent à la ville) et reste sous les
   bulles d'or ; il sautille de temps en temps, comme une caisse pleine */
.sel-signe { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transform-origin: 50% 100%; will-change: transform; }
.sel-signe.hidden { display: none; }
.city-touring .sel-signe, .city-fullscreen:not(.active) .sel-signe { display: none !important; }
.sel-signe-rond {
  display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 3px; border-radius: 50%;
  background: linear-gradient(180deg, var(--jaune-face) 0 3px, var(--jaune) 3px);
  box-shadow: 0 3px 0 var(--jaune-ombre), 0 5px 8px rgba(10,16,34,.4);
  animation: sel-sautille 2.4s var(--ease-out) infinite;
}
.sel-signe-rond svg { width: 13px; height: 13px; fill: var(--jaune-txt); }
@keyframes sel-sautille { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } 95% { transform: translateY(-2px); } }
/* « Améliorer » de la Mairie touché dans sa rangée : dans sa fenêtre, « Améliorer la Mairie » luit deux fois (une lueur d'or) */
.pg-ameliorer-m.sel-lueur { animation: sel-lueur .9s ease-in-out .22s 2; }
@keyframes sel-lueur {
  0%, 100% { box-shadow: 0 var(--relief) 0 var(--c-ombre), 0 calc(var(--relief) + 4px) 6px rgba(0,0,0,.28), 0 0 0 0 rgba(255,224,122,0), 0 0 0 0 rgba(255,197,46,0); }
  40% { box-shadow: 0 var(--relief) 0 var(--c-ombre), 0 calc(var(--relief) + 4px) 6px rgba(0,0,0,.28), 0 0 0 3px rgba(255,224,122,.95), 0 0 22px 8px rgba(255,197,46,.55); }
}

/* ── La fenêtre « Infos » : une ligne par sujet, son bouton à droite ; elle tient sans défiler (375 × 667 compris) ── */
.fen-infos { max-width: 400px; }
.fen-infos .fen-titre { padding: 12px 58px 11px 14px; font-size: 18px; }
.fen-infos .fen-corps { padding: 12px 12px 0; }
.fen-infos .fen-boutons { padding: 10px 12px 14px; }
.inf-liste { list-style: none; margin: 0 0 7px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.inf-l {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 9px 7px 10px; border-radius: var(--r-tuile);
  background: var(--plaque-haut); box-shadow: var(--ombre-ligne); font-size: 14px; line-height: 1.3; color: var(--texte-2);
}
.inf-l b { color: var(--texte); font-variant-numeric: tabular-nums; }
.inf-ico { flex: none; width: 22px; display: flex; justify-content: center; line-height: 1; }
.inf-ico .ico { width: 20px; height: 20px; }
.inf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.inf-txt small { font-size: 12.5px; color: var(--texte-3); }
.inf-l .cb-btn { flex: none; height: 38px; padding: 3px 11px 0; font-size: 14px; }
.inf-l .cb-btn .pg-or { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; }
/* « Terminer » : son prix comme sur le bouton or des fenêtres de la progression (objectifs.css, .btn-prix) : la pièce, le nombre en gras */
.inf-terminer .bp-cout { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.inf-terminer .bp-cout .ico { width: 17px; height: 17px; }
.inf-terminer .bp-cout b { color: inherit; font-weight: 900; }
/* le niveau : une petite brique jaune carrée */
.inf-pastille {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-brique); display: grid; place-items: center; font-size: 18px; font-weight: 900;
  color: var(--jaune-txt); background: linear-gradient(180deg, var(--jaune-face) 0 3px, var(--jaune) 3px); box-shadow: 0 3px 0 var(--jaune-ombre);
  font-variant-numeric: tabular-nums;
}
.inf-niv .pg-etoiles { letter-spacing: -1px; }
.inf-max { flex: none; color: var(--jaune); font-size: 13px; font-weight: 700; }
.inf-travaux { box-shadow: var(--ombre-ligne), inset 4px 0 0 #ff8a1f; }
.inf-ameliorer { --c: var(--bleu); }
/* les lignes de l'économie (economie.js) : la caisse et sa jauge, Récolter, les vendeurs, Embaucher, la concurrence */
.inf-eco .inf-txt > span { display: block; }
.inf-eco .ef-jauge { height: 6px; }
.inf-eco .ef-jauge > i { background: linear-gradient(180deg, var(--jaune-clair) 0 2px, var(--jaune) 2px); }
.inf-eco .ef-pleine { color: var(--jaune) !important; }
.inf-eco .ef-ferme { color: var(--rouge-clair); font-weight: 600; }
.inf-eco .ef-recolter { --c: var(--vert); --c-face: var(--vert-face); --c-clair: var(--vert-clair); --c-ombre: var(--vert-ombre); }
.inf-eco .ef-embaucher.ef-dim { --c: var(--eteint); --c-face: var(--eteint-face); --c-clair: var(--eteint-clair); --c-ombre: var(--eteint-ombre); color: var(--eteint-txt); }
.inf-eco .et-or { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.inf-eco .pg-or { width: 13px; height: 13px; vertical-align: 0; }
.inf-concur .inf-txt { font-size: 13px; }

/* ── Déplacer, poser (city.js) : une barre fine sur une seule ligne (le nom en petit, tourner, ranger, annuler, OK), le bac replié ── */
.city-bar.cb-fin { flex-wrap: nowrap; gap: 6px; margin-bottom: 0; padding: 8px 8px 8px 12px; }
.city-bar.cb-fin .cb-text.cb-fine { flex: 1 1 auto; flex-basis: auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.2; }
/* le nom : trois lignes au plus (« Les / Jardins / Menthe » à côté de Tourner, Ranger, Annuler et OK sur 360 px), au-dessus d'un compte,
   d'un chantier ou de ce qui ne va pas ; rien n'est coupé (un nom long sur une ligne perdait sa fin) */
.cb-fine b { font-size: 13.5px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cb-fine b:not(:last-child) { font-size: 13px; }
.cb-fine .cb-hint, .cb-fine .cb-bad {
  margin: 0; font-size: 11.5px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* ce qu'il dit et ce qui ne va pas se lisent en entier (« chantier de 45 s · 4 bâtisseurs », « Ta Mairie (niveau 2) permet
   14 communes : améliore-la pour en poser plus. »), sur trois lignes au plus */
.cb-fine .cb-hint, .cb-fine .cb-bad { -webkit-line-clamp: 3; }
.city-bar.cb-fin .cb-ranger { padding: 3px 10px 0; font-size: 14px; }
.city-deplace .city-tray { display: none; }

/* Moins d'animations : la rangée apparaît sans pop, les ronds ne s'enfoncent plus (ils foncent) ; le signe de la Mairie ne
   sautille pas ; « Améliorer la Mairie » est cerclé d'or un instant, sans lueur qui bat */
@media (prefers-reduced-motion: reduce) {
  .sel-rang.sel-arrive { animation: none; }
  .sel-rond { transition: none; }
  .sel-b:active .sel-rond { transform: none; filter: brightness(.85); }
  .sel-signe-rond { animation: none; }
  .pg-ameliorer-m.sel-lueur { animation: none; box-shadow: 0 var(--relief) 0 var(--c-ombre), 0 calc(var(--relief) + 4px) 6px rgba(0,0,0,.28), 0 0 0 3px var(--jaune-clair); }
}
/* la fiche du modèle qu'on va poser : sur sa propre ligne, au-dessus du nom et des boutons */
body:not(.tuto-en-cours) .city-bar.cb-fin:has(> .cb-fiche) { flex-wrap: wrap; }
.city-bar.cb-fin .cb-fiche { flex: 1 1 100%; }
.cb-puce { white-space: nowrap; }
body.tuto-en-cours .cb-fiche { display: none; }
body:not(.tuto-en-cours) .city-bar:has(> .cb-fiche) .cb-ch { display: none; } /* (le chantier est déjà dans la fiche) */