/* Janela do Passe de Batalha (src/ui/pass-ui.js). Reaproveita as classes .bp-* da trilha (theme.css); aqui só o que é novo: missões e barra de XP. */
.pz { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pz-xpbar { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--x-000000) 40%, transparent); border: 1px solid color-mix(in srgb, var(--c-ink-light) 13.3%, transparent); overflow: hidden; margin: 4px 0 2px; }
.pz-xpbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--type-ground), var(--c-warn)); border-radius: 999px; transition: width .4s; }
.pz-xptxt { margin: 0 0 6px; }
.pz-msg { margin: 6px 0 0; font-size: 13px; color: var(--green-text, var(--x-9be36b)); }
.pz-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pz-group { min-width: 0; background: color-mix(in srgb, var(--x-000000) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c-ink-light) 6.7%, transparent); border-radius: 10px; padding: 10px 12px; }
.pz-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-m { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--x-000000) 26.7%, transparent); border: 1px solid color-mix(in srgb, var(--c-ink-light) 6.7%, transparent); }
.pz-m.done { border-color: color-mix(in srgb, var(--type-ground) 53.3%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--type-ground) 20%, transparent) inset; }
.pz-m.claimed { opacity: .6; }
.pz-m-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pz-m-txt b { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.pz-m-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--x-000000) 46.7%, transparent); overflow: hidden; }
.pz-m-bar > i { display: block; height: 100%; background: var(--c-xp); border-radius: 999px; transition: width .4s; }
.pz-m.done .pz-m-bar > i { background: var(--type-ground); }
.pz-xp { flex: none; font-weight: 700; font-size: 12px; color: var(--gold-text, var(--type-ground)); white-space: nowrap; }
.pz-done { flex: none; font-size: 12px; color: var(--green-text, var(--x-9be36b)); white-space: nowrap; }
.pz-m .pz-take.dshop-btn { flex: none; width: auto; min-width: 112px; padding: 6px 10px; white-space: nowrap; }
.bp-col.ready .bp-col-day { color: var(--gold-text, var(--type-ground)); font-weight: 800; }
.bp-col.ready { outline: 2px solid color-mix(in srgb, var(--type-ground) 60%, transparent); outline-offset: -2px; border-radius: 8px; }
@media (max-width: 760px) {
  .pz-groups { grid-template-columns: minmax(0, 1fr); }
  .pz-m { flex-wrap: wrap; }
  .pz-m .pz-take.dshop-btn { width: 100%; min-height: 40px; }
}