/* Player badges (src/pbadges_view.js): the tier medals, the cards, the bars */
.pbv-med {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  font: 900 10px/1 var(--sans, sans-serif); letter-spacing: 0; color: #1a1206;
  background: #5a6675; border: 2px solid var(--ink, #0d1b2a); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
.pbv-none { background: #3a4452; color: #aab4c0; }
.pbv-bronze { background: #d08a45; }
.pbv-silver { background: #d6dde6; }
.pbv-gold { background: #f6c945; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 8px rgba(246,201,69,.6); }
.pbv-hof { background: #a66bff; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 8px rgba(166,107,255,.7); }
.pbv-legend {
  background: linear-gradient(90deg, #ff4f8b, #ffb13b, #3be3ff, #a66bff, #ff4f8b); background-size: 300% 100%;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: pbv-leg 2s linear infinite;
}
@keyframes pbv-leg { from { background-position: 0 0; } to { background-position: 300% 0; } }
.pbv-chips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pbv-chips .pbv-med { width: 18px; height: 18px; font-size: 8px; border-width: 1.5px; }
.pf-sub .pbv-chips .pbv-med { width: 24px; height: 24px; font-size: 9px; }

.pbv { display: grid; gap: 10px; }
.pbv-top { display: flex; flex-wrap: wrap; gap: 14px; font: 700 13px var(--sans, sans-serif); color: #e8eef6; }
.pbv-sub, .pbv-lm { color: #e8eef6; }
.pbv-top b { font-size: 15px; }
.pbv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pbv-card {
  display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--card, #16263a); color: var(--card-ink, #fff);
  border: 2px solid var(--ink, #0d1b2a); border-left: 6px solid var(--pbc, #5a6675);
}
.pbv-c-bronze { --pbc: #d08a45; } .pbv-c-silver { --pbc: #d6dde6; } .pbv-c-gold { --pbc: #f6c945; }
.pbv-c-hof { --pbc: #a66bff; } .pbv-c-legend { --pbc: #ff9a3b; box-shadow: 0 0 14px rgba(255,170,60,.45); }
.pbv-card.pbv-new { animation: pbv-flash 1s ease-out 1; }
@keyframes pbv-flash { 0% { transform: scale(1.03); box-shadow: 0 0 24px rgba(246,201,69,.9); } 100% { transform: none; } }
.pbv-h { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pbv-nm { display: grid; min-width: 0; flex: 1; }
.pbv-nm b { font: 900 15px/1.15 var(--sans, sans-serif); }
.pbv-nm span { font: 600 12px/1.25 var(--sans, sans-serif); opacity: .75; }
.pbv-does { margin: 0; font: 500 13px/1.35 var(--sans, sans-serif); opacity: .9; }
.pbv-next { display: grid; gap: 6px; }
.pbv-nt { display: grid; gap: 2px; font: 600 12px/1.3 var(--sans, sans-serif); }
.pbv-nt b { font-size: 13px; }
.pbv-bar { height: 8px; border-radius: 999px; background: rgba(127,127,127,.3); overflow: hidden; }
.pbv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fb3ff, #f6c945); border-radius: 999px; }
.pbv-prog { font: 700 12px var(--sans, sans-serif); opacity: .85; }
.pbv-prog.ok, .pbv-need.ok { color: #2fbf71; opacity: 1; }
.pbv-need { font: 700 12px var(--sans, sans-serif); color: #e0a33a; }
.pbv-leg-on { font: 700 13px/1.35 var(--sans, sans-serif); color: #ffb13b; }
.pbv-lad summary { cursor: pointer; font: 700 12px var(--sans, sans-serif); opacity: .8; }
.pbv-lad ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pbv-lad li { font: 500 12px/1.3 var(--sans, sans-serif); opacity: .55; padding-left: 8px; border-left: 3px solid currentColor; background: none; color: inherit; animation: none; box-shadow: none; text-shadow: none; }
.pbv-lad li.on { opacity: 1; }
.pbv-lad li.pbv-bronze { border-color: #d08a45; } .pbv-lad li.pbv-silver { border-color: #d6dde6; }
.pbv-lad li.pbv-gold { border-color: #f6c945; } .pbv-lad li.pbv-hof { border-color: #a66bff; } .pbv-lad li.pbv-legend { border-color: #ff9a3b; }
.pbv-drop { margin-left: auto; }
.pbv-sub { font: 900 14px var(--sans, sans-serif); margin-top: 4px; }
.pbv-sub small { font-weight: 600; opacity: .7; margin-left: 6px; }
.pbv-open { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pbv-mini { display: grid; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--card, #16263a); color: var(--card-ink, #fff); border: 2px dashed rgba(127,127,127,.5); }
.pbv-mini.ok { border-style: solid; border-color: #2fbf71; }
.pbv-mini .pbv-nm span { font-size: 11px; }
.pbv-lm { font: 700 13px var(--sans, sans-serif); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbv-lm.on { color: #ffb13b; }
.pbv-rlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.pbv-ritem { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: var(--card, #16263a); color: var(--card-ink, #fff); text-decoration: none; }
.pbv-ritem .pbv-med { grid-row: 1 / 4; }
.pbv-ritem b { font: 900 13px var(--sans, sans-serif); }
.pbv-ritem span { font: 600 12px var(--sans, sans-serif); opacity: .8; }
.pbv-ritem em { font: 800 11px var(--sans, sans-serif); font-style: normal; color: #e0a33a; }
.pbv-ritem em.ok { color: #2fbf71; }
@media (prefers-reduced-motion: reduce) { .pbv-legend, .pbv-card.pbv-new { animation: none; } }