/* Hoshi TCG — cloche de notifications (header) : cartes favorites apparues sur le marché. */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(360px, 88vw); max-height: 70vh; overflow-y: auto;
  background: color-mix(in srgb, var(--bg-panel, #0c1220) 94%, #000);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); animation: popIn 0.12s ease-out;
}
.notif-panel-head { padding: var(--s3) var(--s4); font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.notif-empty { padding: var(--s4); font-size: 0.82rem; color: var(--ink-dim); }
.notif-item {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border); color: var(--ink-dim); font-size: 0.82rem;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--accent-soft); color: var(--ink); }
.notif-item.unread { color: var(--ink); background: rgba(188, 215, 255, 0.06); }
.notif-item img { width: 32px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.notif-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.notif-when { font-size: 0.68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
/* Croix de suppression (retour Noé 2026-07-28) : cachée par défaut, apparaît au survol/tap de la
   ligne pour ne pas surcharger visuellement le panneau au repos. */
.notif-delete {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.notif-item:hover .notif-delete, .notif-item:focus-within .notif-delete { opacity: 1; }
.notif-delete:hover { background: rgba(255, 143, 160, 0.15); color: var(--danger); }
@media (hover: none) { .notif-delete { opacity: 1; } }
@media (max-width: 480px) { .notif-panel { position: fixed; top: 64px; left: var(--s3); right: var(--s3); width: auto; } }