/* port.css — Brick ZR : le port de Ma ville (port.js) : le bouton « Port » et sa pastille, la fenêtre du port (le bateau en
   briques, ses 3 commandes, le bonus, le prochain bateau). Le style « Brick ZR, les briques » (skill brikz-ui) : uniquement les
   jetons de :root (styles.css). */

/* ── Le bouton de Ma ville : une tuile du tableau de bord ; la pastille rouge compte les commandes à remplir ── */
.city-pill.city-port { padding-right: 13px; }
.city-port .cp-n {
  position: absolute; top: -8px; right: -8px; pointer-events: none;
  box-shadow: 0 2px 0 var(--rouge-ombre), 0 0 0 2px var(--plaque-nuit);
}
/* un bateau pas encore regardé : bordé de jaune, il appelle doucement */
.city-pill.city-port.nouveau { box-shadow: 0 3px 0 var(--plaque-bord), inset 0 0 0 2px var(--jaune); animation: cp-appel 2.4s ease-in-out infinite; }
@keyframes cp-appel {
  0%, 100% { box-shadow: 0 3px 0 var(--plaque-bord), inset 0 0 0 2px var(--jaune); }
  50% { box-shadow: 0 3px 0 var(--plaque-bord), inset 0 0 0 2px var(--jaune), 0 0 0 5px rgba(255,197,46,.22); }
}

/* ── La fenêtre : serrée, elle tient sans défiler (390 × 844 avec les zones sûres, 360 × 780, 375 × 667) ── */
.fen-port { max-width: 400px; }
.fen-port .fen-titre { padding: 12px 58px 11px 14px; font-size: 18px; }
.fen-port .fen-corps { padding: 10px 14px 0; }
.fen-port .port { padding-bottom: 12px; }

/* le bateau à quai, sur une tuile du soir (la scène garde ses proportions : au plus 100 px de haut, centrée) */
.port-quai {
  margin: 0 0 10px; border-radius: var(--r-tuile); overflow: hidden;
  background: linear-gradient(180deg, var(--plaque-haut), var(--plaque-vive) 85%); box-shadow: var(--ombre-ligne);
}
.port-scene { display: block; width: 100%; height: auto; max-height: 100px; }
.fen-port .port-nom {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 12px 8px;
  background: var(--plaque-haut); font-size: 14px; line-height: 1.3; color: var(--texte-2);
}
.port-nom b { color: var(--texte); }
.port-nom .port-nom-n { flex: none; color: var(--jaune); font-weight: 800; font-variant-numeric: tabular-nums; }
.port-scene .ps-mer { fill: var(--bleu); opacity: .88; }
.port-scene .ps-vague { fill: none; stroke: var(--bleu-clair); stroke-width: 2; opacity: .75; }
.port-scene .ps-quai { fill: var(--eteint-face); }
.port-scene .ps-quai-haut, .port-scene .ps-quai-tenon { fill: var(--eteint-clair); }
.port-scene .ps-bitte { fill: var(--plaque-bord); }
.port-scene .ps-amarre { fill: none; stroke: var(--texte-3); stroke-width: 1.6; }
.port-scene .ps-mat { stroke: var(--texte-3); stroke-width: 2; }
.port-scene .ps-fanion { fill: var(--jaune); }
.port-scene .ps-mouette { fill: none; stroke: var(--texte); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.port-scene .ps-coque { fill: var(--rouge); }
.port-scene .ps-coque-bas { fill: var(--rouge-ombre); }
.port-scene .ps-bande { fill: var(--texte); }
.port-scene .ps-pont, .port-scene .ps-toit { fill: var(--eteint-clair); }
.port-scene .ps-cabine { fill: var(--texte); }
.port-scene .ps-hublot { fill: var(--bleu); }
.port-scene .ps-cheminee { fill: var(--jaune); }
.port-scene .ps-cheminee-bande { fill: var(--rouge); }
.port-scene .ps-cheminee-haut { fill: var(--jaune-ombre); }
/* un conteneur par commande, de la couleur de sa rareté : en pointillés tant qu'elle attend, une brique posée quand elle est remplie */
.port-scene .ps-c-vide { fill: rgba(255,255,255,.04); stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.port-scene .ps-c-haut { fill: rgba(255,255,255,.3); }
.port-scene .ps-c-bas { fill: rgba(0,0,0,.28); }
.port-scene .ps-c-raies { fill: none; stroke: rgba(0,0,0,.2); stroke-width: 1.5; }
.port-scene .r-C .ps-c-corps, .port-scene .r-C .ps-c-tenon { fill: var(--rarity-c); }
.port-scene .r-PC .ps-c-corps, .port-scene .r-PC .ps-c-tenon { fill: var(--rarity-pc); }
.port-scene .r-R .ps-c-corps, .port-scene .r-R .ps-c-tenon { fill: var(--rarity-r); }
.port-scene .r-SR .ps-c-corps, .port-scene .r-SR .ps-c-tenon { fill: var(--rarity-sr); }
.port-scene .r-C .ps-c-vide { stroke: var(--rarity-c); }
.port-scene .r-PC .ps-c-vide { stroke: var(--rarity-pc); }
.port-scene .r-R .ps-c-vide { stroke: var(--rarity-r); }
.port-scene .r-SR .ps-c-vide { stroke: var(--rarity-sr); }

/* les commandes : des lignes dans la fenêtre ; celle qu'on peut remplir est bordée de jaune, celle qui attend est terne */
.port-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.port-cmd {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px 8px 12px; border-radius: var(--r-tuile); background: var(--plaque-haut); box-shadow: var(--ombre-ligne);
}
/* en haut : le thème, ce qu'il faut, ce que ça rapporte ; en bas : combien de doubles tu as, « Donner » */
.port-cmd-haut, .port-cmd-bas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.port-cmd-haut { align-items: flex-start; }
.port-cmd-bas { padding-left: 40px; min-height: 34px; }
.port-cmd-bas > .btn-sm { min-height: 34px; padding-top: 5px; padding-bottom: 3px; }
.port-cmd-ico { flex: none; width: 30px; padding-top: 1px; line-height: 1; text-align: center; }
.port-cmd-ico .ico { width: 28px; height: 28px; }
.port-cmd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.port-cmd-titre { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; line-height: 1.25; }
.port-cmd-theme { font-size: 13.5px; line-height: 1.3; color: var(--texte-2); }
.port-cmd-gain { flex: none; display: flex; gap: 6px; padding-top: 1px; }
.port-cmd-gain .obj-gain { font-size: 13.5px; }
.port-cmd-gain .obj-ico { width: 16px; height: 16px; }
.port-cmd-etat { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--texte-3); }
.port-cmd-etat b { font-weight: 800; }
.port-nw { white-space: nowrap; }
.port-cmd-bas > .btn, .port-cmd-bas > .obj-ok { flex: none; }
.port-cmd.pret { box-shadow: var(--ombre-ligne), inset 0 0 0 2px var(--jaune); }
.port-cmd.pret .port-cmd-etat { color: var(--vert-clair); }
.port-cmd.non .port-cmd-ico { filter: grayscale(1); opacity: .55; }
.port-cmd.non .port-cmd-titre { color: var(--texte-2); }
.port-cmd.non .fen-rarete, .port-cmd.non .port-cmd-gain { opacity: .6; }
.port-cmd.faite { box-shadow: var(--ombre-ligne), inset 4px 0 0 var(--vert); }
.port-cmd.faite .port-cmd-etat { color: var(--texte-2); }
.port-cmd.faite .port-cmd-gain { opacity: .6; }

/* le bonus des 3 commandes : un emplacement en pointillés, 3 plots qui se remplissent ; reçu : une ligne verte */
.port-bonus {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 6px 12px; border-radius: var(--r-tuile);
  border: 2px dashed var(--plaque-vive);
}
.port-bonus.proche { border-color: var(--jaune); }
.port-bonus.recu { border: 0; padding: 8px 14px; background: var(--plaque-haut); box-shadow: var(--ombre-ligne), inset 4px 0 0 var(--vert); }
.port-plots { flex: none; display: flex; gap: 4px; }
.port-plots i { width: 12px; height: 12px; border-radius: 3px; background: var(--plaque-bord); box-shadow: inset 0 2px 0 rgba(0,0,0,.4); }
.port-plots i.on { background: linear-gradient(180deg, var(--jaune-face) 0 2px, var(--jaune) 2px); box-shadow: 0 2px 0 var(--jaune-ombre); }
.port-bonus-txt { flex: 1 0 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.port-bonus-gain { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; }

/* le prochain bateau */
.fen-port .port-prochain { margin: 10px 0 1px; text-align: center; font-size: 14.5px; line-height: 1.35; }
.port-prochain b { color: var(--jaune); font-variant-numeric: tabular-nums; white-space: nowrap; }
.port-prochain span { color: var(--texte-2); white-space: nowrap; }
.fen-port .port-note { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--texte-3); }
.fen-port p.port-notifs { margin: 6px 0 0; text-align: center; font-size: 13px; line-height: 1.35; color: var(--texte-2); }
.fen-port .btn.port-notifs { margin: 0 auto; font-size: 14px; }

/* une commande remplie : le conteneur se pose sur le bateau, la ligne bat une fois, le gain monte, des pièces d'or s'envolent */
.port-gagne {
  position: absolute; right: 10px; top: -12px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 4px 9px;
  border-radius: var(--r-brique); background: var(--plaque-bord); color: var(--jaune); pointer-events: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--jaune); animation: port-monte 1.5s var(--ease-out) both;
}
.port-gagne .obj-gain { font-size: 14px; }
@keyframes port-monte {
  0% { transform: translateY(10px); opacity: 0; }
  14% { transform: none; opacity: 1; }
  70% { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}
.port-bonus.arrive { animation: port-ok .5s var(--ease-out); }
.port-scene .ps-cont.arrive { animation: ps-charge .62s var(--ease-out) both; }
@keyframes ps-charge {
  0% { transform: translateY(-42px); opacity: 0; }
  55% { transform: translateY(2px); opacity: 1; }
  75% { transform: translateY(-3px); }
  100% { transform: none; }
}
.port-cmd.arrive { animation: port-ok .5s var(--ease-out); }
@keyframes port-ok { 0%, 100% { transform: none; } 35% { transform: scale(1.03); } }
.port-cmd .port-piece { position: absolute; right: 34px; top: 62%; z-index: 2; pointer-events: none; animation: port-vole .8s var(--ease-out) both; }
@keyframes port-vole {
  from { transform: translate(0, 0) scale(.6); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
/* les écrans bas (360 × 740, 375 × 667) : la scène et les lignes encore un peu plus serrées */
@media (max-height: 780px) {
  .port-scene { max-height: 88px; }
  .fen-port .port-prochain { margin-top: 8px; }
  .fen-port .port-nom { padding: 6px 12px 7px; }
  .port-liste { gap: 7px; }
  .port-cmd { padding: 7px 10px 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .city-pill.city-port.nouveau, .port-scene .ps-cont.arrive, .port-cmd.arrive, .port-bonus.arrive { animation: none; }
  .port-cmd .port-piece { display: none; }
  .port-gagne { animation: none !important; }
}
/* les écrans très bas (375 × 667 : iPhone SE, 8) : la scène plus petite, les titres des commandes sur une ligne */
@media (max-height: 700px) {
  .port-scene { max-height: 66px; }
  .fen-port .fen-titre { padding-top: 9px; padding-bottom: 8px; }
  .port-liste { gap: 6px; }
  .port-cmd { padding: 6px 10px 6px 12px; }
  .fen-port .port-prochain { margin-top: 6px; font-size: 13.5px; }
  .fen-port .port-note { font-size: 12px; }
  .port-cmd-titre { white-space: nowrap; font-size: 14px; }
}