/* =====================================================================
   Le fil des découvertes (ui/hud.js feedCard) : en bas à gauche, une seule
   sorte de carte pour les mots scannés, les phrases, les objets, les astuces,
   les portes, les pouvoirs. Haut-centre = scanner, haut-droite = quêtes.
   ===================================================================== */
.feed {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  width: min(330px, 42vw); pointer-events: none;
  transition: bottom 0.25s ease;
}
/* une boîte de dialogue ouverte en bas : le fil monte au-dessus */
#ui:has(.dialogue:not(.hidden)) .feed { bottom: 210px; }
#ui.panel-open .feed { display: none; }

.feed-card {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px;
  border-radius: 9px; color: var(--ink);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: inset 5px 0 0 var(--accent), var(--card-frame);
  font-family: var(--pixel); word-spacing: 0.15em;
  opacity: 0; transform: translateX(-24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.feed-card.in { opacity: 1; transform: none; }
.feed-card.out { opacity: 0; transform: translateX(-24px); }
.feed-pic { flex: none; width: 34px; height: 34px; margin-left: 4px; display: grid; place-items: center; border-radius: 7px; background: rgba(120, 85, 50, 0.1); }
.feed-pic canvas, .feed-pic img { width: 32px; height: 32px; image-rendering: pixelated; }
.feed-ico { font-size: 1.25em; line-height: 1; }
.feed-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feed-title { font-weight: normal; font-size: 1em; line-height: 1.25; overflow-wrap: anywhere; }
.feed-sub { font-size: 0.74em; line-height: 1.35; color: var(--ink-soft); }
.feed-combo { flex: none; font-style: normal; font-size: 0.8em; padding: 2px 7px; border-radius: 9px; background: var(--accent); color: #fff; }
.feed-card.k-gold .feed-pic { background: rgba(224, 160, 48, 0.2); }
.feed-card.k-locked .feed-pic { background: rgba(192, 64, 58, 0.14); }

/* tactile : le joystick est en bas à gauche → le fil passe au-dessus */
body.touch .feed { bottom: calc(190px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); width: min(300px, 60vw); }
body.touch #ui:has(.dialogue:not(.hidden)) .feed { bottom: calc(250px + env(safe-area-inset-bottom)); }
/* écran bas (téléphone à l'horizontale) : 2 cartes au plus, 1 seule pendant un dialogue */
@media (max-height: 520px) {
  .feed { width: min(280px, 40vw); font-size: 0.82em; gap: 5px; }
  .feed .feed-card:nth-last-child(n+3) { display: none; }
  #ui:has(.dialogue:not(.hidden)) .feed .feed-card:not(:last-child) { display: none; }
  body.touch .feed { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.touch #ui:has(.dialogue:not(.hidden)) .feed { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

/* Échap (réglages) en haut à gauche ; le nom du lieu s'affiche juste en dessous */
.hud-esc { top: 14px; bottom: auto; left: 14px; }
.place-banner { top: 62px; left: 14px; }
body.touch .place-banner { top: calc(56px + env(safe-area-inset-top)); }