/* Collectible badges (js/badges.js): home panel, board, toast, printing. Uses css/jeu.css variables. */
.badge-svg { display: block; width: 100%; height: auto; }
.bdg-barre { height: 12px; background: #eee6da; border-radius: 999px; overflow: hidden; width: 100%; }
.bdg-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--jaune), var(--bon)); border-radius: 999px; min-width: 6px; }
.bdg-pip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9c0b2; background: #fff; vertical-align: middle; }
.bdg-pip.ok { background: var(--c); border-color: color-mix(in srgb, var(--c) 65%, black); }

/* ---------- home panel ---------- */
.bdg-panneau { margin-top: 26px; background: var(--carte); border-radius: var(--rayon); padding: 14px 18px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.bdg-panneau:empty { display: none; }
.bdg-p-entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu .bdg-p-entete h2 { margin: 0; font-size: 1.15rem; color: var(--texte); }
.bdg-p-points { color: var(--doux); font-weight: 600; }
.bdg-p-voir { margin-left: auto; }
.bdg-p-nouveau { display: block; width: 100%; margin-top: 12px; background: #fff3c4; box-shadow: 0 4px 0 #e6c96a; font-weight: 700; animation: bdg-brille 1.6s ease-in-out 3; }
.bdg-p-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.bdg-p-item { display: flex; gap: 12px; align-items: center; }
.bdg-p-item .badge-svg { width: 58px; flex: none; }
.bdg-p-item > div { flex: 1; display: grid; gap: 4px; min-width: 0; }
.bdg-p-item small { color: var(--doux); }
.badge-svg.a-venir { filter: grayscale(.55) opacity(.8); }
@keyframes bdg-brille { 50% { transform: scale(1.02); background: #ffe58a; } }

/* ---------- board ---------- */
.badges .bdg-resume { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 6px; align-items: stretch; }
.bdg-resume > div { background: var(--carte); border-radius: 16px; padding: 10px 18px; display: grid; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.bdg-resume b { font-size: 1.6rem; }
.bdg-resume span { color: var(--doux); font-size: .9rem; }
.bdg-legende { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; }
.bdg-legende > span { display: flex; align-items: center; gap: 6px; }
.bdg-invite { font-size: 1.15rem; font-weight: 600; background: #fff3c4; border-radius: 14px; padding: 10px 16px; margin: 12px 0 0; }
.bdg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.bdg-carte { position: relative; background: var(--carte); border-radius: var(--rayon); padding: 14px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: 0 3px 0 var(--bord), 0 6px 14px rgba(0,0,0,.05); }
.bdg-carte .badge-svg { width: 120px; }
.bdg-carte.verrou .badge-svg { filter: grayscale(1) opacity(.55); }
.bdg-carte.nouveau { outline: 4px solid var(--jaune); }
.bdg-nouveau { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 10px; padding: 2px 8px; animation: bdg-brille 1.4s ease-in-out infinite; }
.bdg-nom { font-size: 1rem; }
.bdg-titre { font-size: .9rem; color: var(--texte); min-height: 2.5em; }
.bdg-carte.verrou .bdg-titre { color: var(--doux); }
.bdg-pips { display: flex; gap: 6px; }
.bdg-compte { color: var(--doux); font-size: .8rem; }
.bdg-plus-tard { margin-top: 28px; }
.bdg-plus-tard summary { cursor: pointer; color: var(--doux); font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; }

/* ---------- toast (over any screen, the game end too; never blocks) ---------- */
#bdg-toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 10px; width: min(560px, calc(100vw - 24px)); pointer-events: none; }
.bdg-toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; background: #fff; border: 4px solid var(--jaune); border-radius: 20px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(30,25,50,.25); animation: bdg-entre .45s cubic-bezier(.2,1.4,.5,1); }
.bdg-toast.sort { animation: bdg-sort .4s forwards; }
.bdg-toast-svgs { display: flex; flex: none; }
.bdg-toast-svgs .badge-svg { width: 62px; }
.bdg-toast-svgs .badge-svg + .badge-svg { margin-left: -22px; }
.bdg-toast-texte { display: grid; gap: 6px; }
.bdg-toast-texte b { font-size: 1.2rem; }
@keyframes bdg-entre { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
@keyframes bdg-sort { to { transform: translateY(-30px); opacity: 0; } }

/* ---------- printing (Imprimer / Imprimer tous mes badges) ---------- */
#badges-impression { display: none; }
@media print {
  @page { margin: 12mm; }
  body.imprime-badges { background: #fff; }
  body.imprime-badges > *:not(#badges-impression) { display: none !important; }
  body.imprime-badges #badges-impression { display: block; }
  .bi-badge { break-inside: avoid; height: 122mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; border: 1.5px dashed #999; border-radius: 8mm; margin-bottom: 6mm; position: relative; text-align: center; font-family: "Segoe UI", system-ui, sans-serif; color: #222; }
  .bi-badge::before { content: "✂"; position: absolute; top: -3.2mm; left: 10mm; background: #fff; padding: 0 1.5mm; font-size: 12pt; color: #777; }
  .bi-badge:nth-child(2n) { break-after: page; }
  .bi-badge .badge-svg { width: auto; height: 78mm; }
  .bi-badge h2 { font-size: 19pt; margin: 1mm 8mm 0; }
  .bi-nom { font-size: 11pt; margin: 0; color: #555; }
  .bi-qui { font-size: 13pt; margin: 0; font-weight: 700; }
  .bi-consigne { font-size: 12pt; margin: 0; }
  #badges-impression.seul .bi-badge { height: 250mm; gap: 5mm; }
  #badges-impression.seul .bi-badge .badge-svg { height: 165mm; }
  #badges-impression.seul .bi-badge h2 { font-size: 28pt; }
  #badges-impression.seul .bi-qui { font-size: 18pt; }
  #badges-impression.seul .bi-consigne { font-size: 16pt; }
}
@media (max-width: 520px) {
  .bdg-grille { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bdg-carte .badge-svg { width: 96px; }
  .bdg-resume > div { padding: 8px 12px; }
}