/******************************************************************************
* Shared badge display — used identically by home.html and game.html.        *
* Markup is generated by static/js/badgeUI.js; the detail/favorite-picker    *
* dialog is a self-mounting widget in static/js/badgeDetailDialog.js.        *
* Both consumers wire clicks via a delegated listener on [data-badge-id].    *
******************************************************************************/

/* ── Prominent favourite badge ── */
.badge-fav-section {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  padding: 4px 0 14px;
}
.badge-fav-large {
  width: 64px; height: 64px; border-radius: 10px;
  border: 1px solid rgba(232,200,112,0.35);
  background: rgba(232,200,112,0.10);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.badge-fav-large:hover {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(232,200,112,0.3);
}
.badge-fav-large img { width: 52px; height: 52px; display: block; }
.badge-fav-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; color: #E8C870;
  letter-spacing: 0.05em; text-align: center; line-height: 1.3;
}

.badges-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--muted, #888);
  text-transform: uppercase; margin-bottom: 10px;
}

/* ── Flat badge grid — no overlapping/stacking, just tiles that wrap.
   auto-fill lets wider containers (game.html's sidebar) fit more per row
   than narrower ones (home.html's), without needing separate breakpoints. ── */
.badge-ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}
.badge-ui-tile {
  width: 44px; height: 44px; border-radius: 6px;
  cursor: pointer; overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.badge-ui-tile:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(0,255,184,0.25);
}
.badge-ui-tile img { display: block; width: 100%; height: 100%; }

/* ── Badge earned notification ──────────────────────────────────────────────
   Self-mounting widget in static/js/badgeAwardNotif.js — same "fly to panel"
   dismiss animation used by both pages, just pointed at each page's own
   badge display (game.html's #badges-panel HUD, home.html's sidebar badge
   grid). */
#badge-notif {
  display: none;
  position: fixed;
  align-items: flex-start;
  gap: 14px;
  background: rgba(17,17,17,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(232,200,112,0.4);
  border-radius: 12px;
  padding: 16px 22px;
  pointer-events: none;
  z-index: 1100; /* above #swap-modal-overlay's z-index:1000 (gameplay.js) */
  transform-origin: center center;
  color: var(--text, #e8e8e8);
  max-width: 320px;
}
#badge-notif .bn-icon { font-size: 40px; line-height: 1; flex-shrink: 0; padding-top: 2px; }
#badge-notif .bn-body { display: flex; flex-direction: column; }
#badge-notif .bn-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  color: #E8C870; text-transform: uppercase;
}
#badge-notif .bn-name {
  font-family: 'Syne', sans-serif;
  font-size: 15px; font-weight: 700; margin-top: 2px;
}
#badge-notif .bn-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--muted, #888); margin-top: 3px; font-style: italic;
}
#badge-notif .bn-guest {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--accent, #00FFB8); margin-top: 3px;
}
#badge-notif .bn-unlock-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--accent, #00FFB8); text-transform: uppercase;
  margin-top: 10px; margin-bottom: 4px;
}
#badge-notif .bn-ai-list { display: flex; flex-direction: column; gap: 5px; }
#badge-notif .bn-ai-item {
  display: flex; align-items: center; gap: 8px;
}
#badge-notif .bn-ai-svg { display: inline-flex; flex-shrink: 0; }
#badge-notif .bn-ai-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--text, #e8e8e8); flex: 1;
}
#badge-notif .bn-ai-diff {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
#badge-notif .bn-ai-diff--easy   { color: #4ADE80; }
#badge-notif .bn-ai-diff--medium { color: #FACC15; }
#badge-notif .bn-ai-diff--hard   { color: #F87171; }
#badge-notif .bn-dismiss {
  pointer-events: auto;
  margin-top: 12px;
  align-self: flex-start;
  background: rgba(232,200,112,0.12);
  border: 1px solid rgba(232,200,112,0.45);
  color: #E8C870;
  border-radius: 4px;
  padding: 5px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  transition: background 140ms;
}
#badge-notif .bn-dismiss:hover { background: rgba(232,200,112,0.25); }

#badge-notif .bn-deck-list { display: flex; flex-direction: column; gap: 8px; }
#badge-notif .bn-deck-item { display: flex; align-items: center; gap: 10px; }
#badge-notif .bn-deck-preview { display: flex; gap: 4px; flex-shrink: 0; }
#badge-notif .bn-deck-preview img {
  width: 34px; height: auto; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15); background: #fff;
}
#badge-notif .bn-deck-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--text, #e8e8e8); flex: 1;
}
#badge-notif .bn-switch-btn {
  pointer-events: auto;
  background: rgba(0,255,184,0.12);
  border: 1px solid rgba(0,255,184,0.45);
  color: var(--accent, #00FFB8);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
  white-space: nowrap;
  transition: background 140ms;
}
#badge-notif .bn-switch-btn:hover { background: rgba(0,255,184,0.25); }