/* ===========================================================================
   PASSE DE TEMPORADA — estilo de jogo
   ---------------------------------------------------------------------------
   Brasão da temporada com runas, barra de progresso que cresce, trilha
   horizontal de recompensas (fileira gratuita + fileira premium) e missões
   em cartões de runa.

   Funciona nos três temas (claro, escuro, neon) porque toda cor sai dos
   tokens de theme.css. As cores próprias da página são derivadas com
   color-mix a partir de --accent, --success e --danger.
   ======================================================================== */

.bp-page {
    --bp-gold: #E8B33C;
    --bp-gold-deep: #A9741A;
    --bp-steel: color-mix(in srgb, var(--text) 16%, var(--surface));
    --bp-premium: color-mix(in srgb, var(--bp-gold) 70%, var(--accent));
    --bp-node-w: 172px;
    --bp-radius: var(--radius-lg);
    padding-block: 22px 64px;
}

/* ===========================================================================
   1. Brasão da temporada
   ======================================================================== */
.bp-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: clamp(22px, 3.5vw, 38px);
    border: 1px solid var(--border);
    border-radius: var(--bp-radius);
    background:
        radial-gradient(1100px 380px at 12% -40%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
        linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
    box-shadow: var(--shadow);
}

.bp-hero--premium {
    border-color: color-mix(in srgb, var(--bp-gold) 48%, var(--border));
    background:
        radial-gradient(1100px 380px at 12% -40%, color-mix(in srgb, var(--bp-gold) 26%, transparent), transparent 70%),
        linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
}

/* Faixa de runas decorativa no topo */
.bp-hero-runes {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    display: flex;
    justify-content: space-around;
    padding-block: 6px;
    font-size: 1.05rem;
    line-height: 1;
    color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-bottom: 1px solid var(--border);
    user-select: none;
    pointer-events: none;
}

.bp-hero-runes span { opacity: .55; }
.bp-hero-runes span:nth-child(odd) { opacity: .85; }

.bp-hero-body {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    margin-top: 18px;
}

/* --------------------------- escudo da temporada ------------------------ */
.bp-hero-crest {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 128px;
    padding-top: 6px;
    color: #1A1407;
    background: linear-gradient(165deg, var(--bp-gold), var(--bp-gold-deep));
    clip-path: polygon(50% 0%, 100% 14%, 100% 66%, 50% 100%, 0% 66%, 0% 14%);
    box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--bp-gold) 80%, transparent);
}

.bp-crest-label {
    font-size: .64rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 800;
    opacity: .75;
}

.bp-crest-number {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.04em;
}

.bp-crest-axes .icon {
    width: 18px;
    height: 18px;
    opacity: .7;
}

/* ------------------------------ texto ---------------------------------- */
.bp-hero-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-text, var(--accent));
}

.bp-hero-kicker .icon { width: 15px; height: 15px; }

.bp-hero-text h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1rem + 2.6vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.bp-hero-desc {
    margin: 0 0 12px;
    max-width: 62ch;
    color: var(--text-soft);
    line-height: 1.6;
}

.bp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: .86rem;
    color: var(--muted);
}

.bp-hero-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.bp-hero-meta .icon { width: 15px; height: 15px; flex: none; }

.bp-countdown {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-3, var(--surface-2));
    border: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-soft);
}

.bp-countdown.is-urgent {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.bp-hero-link { color: var(--text-soft); text-decoration: none; font-weight: 600; }
.bp-hero-link:hover { color: var(--accent); }

/* --------------------------- escudo de nível --------------------------- */
.bp-level-shield {
    display: grid;
    place-items: center;
    gap: 0;
    width: 104px;
    padding: 14px 10px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: 18px 18px 40% 40%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
    text-align: center;
}

.bp-level-cap {
    font-size: .64rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 800;
    color: var(--muted);
}

.bp-level-shield strong {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent-text, var(--accent));
}

.bp-level-max { font-size: .74rem; color: var(--muted); }

/* ===========================================================================
   2. Barra de progresso (o "drakkar" que avança)
   ======================================================================== */
.bp-track-wrap { position: relative; margin-top: 22px; }

.bp-track {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background: var(--bp-steel);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .22);
}

.bp-track-fill {
    position: relative;
    height: 100%;
    width: var(--bp-pct, 0%);
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 70%, var(--bp-gold)),
            var(--accent));
    box-shadow: 0 0 18px -2px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: width .9s cubic-bezier(.22, .8, .3, 1);
}

/* Brilho que escorre pela barra, sugerindo avanço */
.bp-track-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent);
    background-size: 180px 100%;
    background-repeat: no-repeat;
    animation: bp-sheen 2.6s linear infinite;
}

@keyframes bp-sheen {
    from { background-position: -180px 0; }
    to   { background-position: 130% 0; }
}

/* Ponta da barra, como a proa do navio */
.bp-track-ship {
    position: absolute;
    inset-inline-end: -2px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    color: var(--accent-text, var(--accent));
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent) 80%, transparent);
}

.bp-track-ship .icon { width: 14px; height: 14px; }

.bp-track-ticks { position: absolute; inset: 0; pointer-events: none; }
.bp-track-ticks i {
    position: absolute;
    inset-block: 4px;
    width: 1px;
    background: color-mix(in srgb, var(--text) 18%, transparent);
}

.bp-track-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: .86rem;
    color: var(--muted);
}

.bp-track-legend strong { color: var(--text); font-variant-numeric: tabular-nums; }
.bp-track-total { display: inline-flex; align-items: center; gap: 6px; }
.bp-track-total .icon { width: 15px; height: 15px; color: var(--accent); }

.bp-login-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-soft);
}

.bp-login-note a { color: var(--accent-text, var(--accent)); font-weight: 700; }

/* ===========================================================================
   3. Painel de estatísticas
   ======================================================================== */
.bp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.bp-stat {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.bp-stat--premium {
    border-color: color-mix(in srgb, var(--bp-gold) 45%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--bp-gold) 12%, transparent), var(--surface) 70%);
}

.bp-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

.bp-stat-label .icon { width: 15px; height: 15px; }

.bp-stat-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.bp-stat-note { font-size: .8rem; color: var(--muted); }

.bp-stat-bar {
    height: 7px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--bp-steel);
    overflow: hidden;
}

.bp-stat-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--bp-gold)));
    transition: width .8s cubic-bezier(.22, .8, .3, 1);
}

.bp-stat form { margin: 0; }

/* ===========================================================================
   4. Seções
   ======================================================================== */
.bp-section { margin-bottom: 38px; }

.bp-section-head { margin-bottom: 16px; }

.bp-section-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.bp-section-head h2 .icon { width: 20px; height: 20px; color: var(--accent); }

.bp-section-head p {
    margin: 0;
    max-width: 78ch;
    color: var(--text-soft);
    font-size: .92rem;
    line-height: 1.55;
}

/* ===========================================================================
   5. Trilha de recompensas
   ======================================================================== */
.bp-rail-labels {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.bp-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.bp-rail-label .icon { width: 13px; height: 13px; }

.bp-rail-label--premium {
    color: color-mix(in srgb, var(--bp-gold-deep) 70%, var(--text));
    border-color: color-mix(in srgb, var(--bp-gold) 50%, var(--border));
    background: color-mix(in srgb, var(--bp-gold) 14%, transparent);
}

/* Faixa rolável com os níveis */
.bp-rail {
    display: flex;
    gap: 12px;
    padding: 14px 4px 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    border-block: 1px solid var(--border);
    background:
        repeating-linear-gradient(90deg,
            transparent 0 86px,
            color-mix(in srgb, var(--text) 4%, transparent) 86px 87px);
}

.bp-node {
    flex: 0 0 var(--bp-node-w);
    display: grid;
    grid-template-rows: auto 1fr 1fr;
    gap: 10px;
    scroll-snap-align: start;
}

/* ------------------------- marcador do nível --------------------------- */
.bp-node-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-weight: 800;
}

.bp-node.is-unlocked .bp-node-mark {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent-text, var(--accent));
}

.bp-node.is-next .bp-node-mark {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    animation: bp-pulse 2s ease-in-out infinite;
}

@keyframes bp-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 8%, transparent); }
}

.bp-node-level { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.02em; }

.bp-node-state { display: inline-flex; color: var(--muted); }
.bp-node-state .icon { width: 14px; height: 14px; }
.bp-node-state--on { color: var(--success); }

/* ----------------------------- cartões -------------------------------- */
.bp-card {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    justify-items: center;
    padding: 14px 12px;
    min-height: 136px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bp-card.is-unlocked:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -18px rgb(0 0 0 / .5);
}

.bp-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-soft);
}

.bp-card-icon .icon { width: 20px; height: 20px; }

.bp-card-title {
    font-size: .86rem;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.bp-card-amount {
    font-size: .78rem;
    font-weight: 800;
    color: var(--accent-text, var(--accent));
    font-variant-numeric: tabular-nums;
}

.bp-card form { margin: 0; }

.bp-card-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
}

.bp-card-flag .icon { width: 12px; height: 12px; }

.bp-card-flag--done {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.bp-card-flag--locked {
    color: color-mix(in srgb, var(--bp-gold-deep) 70%, var(--text));
    border-color: color-mix(in srgb, var(--bp-gold) 48%, var(--border));
    background: color-mix(in srgb, var(--bp-gold) 12%, transparent);
}

/* Bloqueado: esmaecido e com textura de aço */
.bp-card:not(.is-unlocked):not(.is-claimed) { opacity: .62; }

.bp-card.is-claimed {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: linear-gradient(170deg, color-mix(in srgb, var(--success) 10%, transparent), var(--surface) 70%);
    opacity: 1;
}

.bp-card.is-claimed .bp-card-icon {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}

/* Fileira premium: moldura dourada */
.bp-card--premium {
    border-color: color-mix(in srgb, var(--bp-gold) 40%, var(--border));
    background: linear-gradient(170deg, color-mix(in srgb, var(--bp-gold) 10%, transparent), var(--surface) 70%);
}

.bp-card--premium .bp-card-icon {
    color: color-mix(in srgb, var(--bp-gold-deep) 70%, var(--text));
    border-color: color-mix(in srgb, var(--bp-gold) 45%, var(--border));
    background: color-mix(in srgb, var(--bp-gold) 14%, transparent);
}

.bp-card--premium.is-empty {
    place-items: center;
    background: var(--surface-2);
    border-style: dashed;
    opacity: .5;
}

.bp-card-empty { color: var(--muted); font-size: 1.2rem; }

.bp-rail-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0 0;
    font-size: .82rem;
}

.bp-rail-hint .icon { width: 14px; height: 14px; }

/* ===========================================================================
   6. Missões
   ======================================================================== */
.bp-missions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}

.bp-mission {
    position: relative;
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}

/* Runa de fundo, bem discreta */
.bp-mission::before {
    content: "ᛟ";
    position: absolute;
    inset-inline-end: 10px;
    inset-block-start: -14px;
    font-size: 5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--text) 5%, transparent);
    pointer-events: none;
}

.bp-mission:hover { transform: translateY(-2px); border-color: var(--border-strong); }

.bp-mission.is-complete {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--success) 9%, transparent), var(--surface) 70%);
}

.bp-mission.is-claimed { opacity: .72; }

.bp-mission-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.bp-chip .icon { width: 12px; height: 12px; }

.bp-chip--daily {
    color: var(--info, var(--accent));
    border-color: color-mix(in srgb, var(--info, var(--accent)) 42%, var(--border));
    background: color-mix(in srgb, var(--info, var(--accent)) 12%, transparent);
}

.bp-chip--weekly {
    color: var(--accent-text, var(--accent));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.bp-chip--seasonal {
    color: color-mix(in srgb, var(--bp-gold-deep) 70%, var(--text));
    border-color: color-mix(in srgb, var(--bp-gold) 48%, var(--border));
    background: color-mix(in srgb, var(--bp-gold) 13%, transparent);
}

.bp-chip--premium {
    color: #1A1407;
    border-color: transparent;
    background: linear-gradient(165deg, var(--bp-gold), var(--bp-gold-deep));
}

.bp-mission-xp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--accent-text, var(--accent));
    font-variant-numeric: tabular-nums;
}

.bp-mission-xp .icon { width: 14px; height: 14px; }

.bp-mission-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.04rem;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.bp-mission-desc {
    margin: 0;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.5;
}

.bp-mission-bar {
    height: 9px;
    border-radius: 999px;
    background: var(--bp-steel);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .2);
}

.bp-mission-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--bp-gold)));
    transition: width .8s cubic-bezier(.22, .8, .3, 1);
}

.bp-mission.is-complete .bp-mission-bar i {
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 60%, var(--bp-gold)));
}

.bp-mission-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bp-mission-count {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.bp-mission form { margin: 0; }

/* ===========================================================================
   7. Responsivo
   ======================================================================== */
@media (max-width: 900px) {
    .bp-hero-body { grid-template-columns: auto 1fr; }
    .bp-hero-level { grid-column: 1 / -1; justify-self: start; }
    .bp-level-shield { width: 92px; }
}

@media (max-width: 640px) {
    .bp-page { --bp-node-w: 148px; padding-block: 14px 48px; }
    .bp-hero { padding: 20px 16px; }
    .bp-hero-body { grid-template-columns: 1fr; text-align: left; }
    .bp-hero-crest { width: 92px; height: 106px; }
    .bp-crest-number { font-size: 2.3rem; }
    .bp-hero-runes { font-size: .9rem; }
    .bp-track { height: 18px; }
    .bp-track-ship { width: 24px; height: 24px; }
    .bp-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .bp-stat { padding: 13px 14px; }
    .bp-stat-value { font-size: 1.4rem; }
    .bp-card { min-height: 124px; padding: 12px 10px; }
    .bp-missions { grid-template-columns: 1fr; }
}

/* ===========================================================================
   8. Movimento reduzido
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bp-track-fill,
    .bp-stat-bar i,
    .bp-mission-bar i { transition: none; }
    .bp-track-fill::after { animation: none; }
    .bp-node.is-next .bp-node-mark { animation: none; }
    .bp-card.is-unlocked:hover,
    .bp-mission:hover { transform: none; }
}

/* ===========================================================================
   9. Telas de temporada e detalhe (/passe/temporadas e /passe/{slug})
   ---------------------------------------------------------------------------
   Essas views usam uma marcação própria, mais antiga. Os estilos abaixo as
   mantêm no mesmo acabamento da tela principal.
   ======================================================================== */

/* -------------------------- barras genéricas -------------------------- */
.bp-progress-bar {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: var(--bp-steel, color-mix(in srgb, var(--text) 16%, var(--surface)));
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 1px 4px rgb(0 0 0 / .2);
}

.bp-progress-bar--sm { height: 9px; border: 0; }

.bp-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #E8B33C));
    transition: width .8s cubic-bezier(.22, .8, .3, 1);
}

.bp-progress-panel { padding: 20px 22px; margin-bottom: 20px; }

.bp-progress-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bp-progress-info h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.bp-progress-badges { display: flex; align-items: center; gap: 8px; }
.bp-progress-badges form { margin: 0; }
.bp-progress-label { display: block; margin-top: 8px; font-size: .84rem; }

.bp-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 26px;
    font-size: .86rem;
}

.bp-dates span { display: inline-flex; align-items: center; gap: 6px; }
.bp-dates .icon { width: 15px; height: 15px; }

/* ------------------------- grade de níveis ---------------------------- */
.bp-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 34px;
}

.bp-tier {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    opacity: .66;
    transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.bp-tier--unlocked { opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bp-tier--unlocked:hover { transform: translateY(-2px); }

.bp-tier--claimed {
    opacity: 1;
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--success) 9%, transparent), var(--surface) 70%);
}

.bp-tier-level {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bp-tier--unlocked .bp-tier-level {
    color: var(--accent-text, var(--accent));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.bp-tier-info { display: grid; gap: 2px; min-width: 0; }
.bp-tier-info strong { font-size: .95rem; line-height: 1.3; }
.bp-tier-info .comm-muted { font-size: .8rem; }
.bp-tier form { margin: 0; grid-column: 1 / -1; }

/* ----------------------- lista de missões ---------------------------- */
.bp-missions-list { display: grid; gap: 12px; }

.bp-mission-info { display: grid; gap: 4px; min-width: 0; }
.bp-mission-info strong { font-size: .98rem; line-height: 1.3; }
.bp-mission-info .comm-muted { font-size: .86rem; line-height: 1.5; }

.bp-mission-progress { display: grid; gap: 5px; min-width: 140px; }
.bp-mission-progress .comm-muted { font-size: .8rem; font-variant-numeric: tabular-nums; }

.bp-mission-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-mission-reward form { margin: 0; }

/* Na lista (show.php) a missão vira três colunas */
.bp-missions-list .bp-mission {
    grid-template-columns: minmax(0, 1fr) 180px auto;
    align-items: center;
    gap: 16px;
}

.bp-mission--complete {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: linear-gradient(165deg, color-mix(in srgb, var(--success) 9%, transparent), var(--surface) 70%);
}

.bp-mission--claimed { opacity: .72; }

/* ------------------------ temporadas anteriores ----------------------- */
.bp-seasons-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.bp-season-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    transition: transform .18s ease, border-color .18s ease;
}

.bp-season-card:hover { transform: translateY(-3px); border-color: var(--accent); }

.bp-season-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bp-season-info { display: grid; gap: 3px; }
.bp-season-desc { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }

.bp-season-hero {
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 300px at 10% -40%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
        linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
}

.bp-season-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.bp-season-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: .86rem;
    color: var(--muted);
}

.bp-season-hero-progress { margin-top: 16px; }

.bp-back { margin-top: 26px; }

@media (max-width: 640px) {
    .bp-missions-list .bp-mission { grid-template-columns: 1fr; }
    .bp-mission-progress { min-width: 0; }
    .bp-tiers-grid { grid-template-columns: 1fr; }
}