/* ============================================================
 *  Draco LMS — Módulo Streaming: trilhos + pôster 2:3
 *
 *  Carregado apenas quando o layout selecionado é "streaming".
 *  Usa somente as variáveis de cor do draco.css, então funciona
 *  com qualquer paleta ativa.
 *
 *  Escopo: as regras de .draco-tag e .draco-progress ficam dentro
 *  de .draco-poster de propósito. Essas classes já existem no
 *  layout clássico com outro tamanho — sem o escopo, ativar o
 *  streaming encolheria os selos do card clássico junto.
 * ============================================================ */

.draco-app {
    --draco-poster-ratio: 2 / 3;
    --draco-poster-w:     176px;
    --draco-poster-w-sm:  132px;
    --draco-progress-c:   var(--draco-accent);
}

/* ------------------------------------------------------------
 *  Trilho
 * ------------------------------------------------------------ */

.draco-rail {
    position: relative;
    margin-bottom: var(--draco-gap-6);
}

.draco-rail-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--draco-gap-3);
    margin-bottom: var(--draco-gap-3);
}

.draco-rail-header h2 {
    font-size: var(--draco-fs-lg);
    font-weight: 600;
}

/* O "Ver todos" só aparece no hover do trilho: reduz ruído numa
   tela que pode ter seis ou sete seções empilhadas. No toque não
   existe hover, então o media query abaixo o deixa sempre visível. */
.draco-rail-link {
    color: var(--draco-text-muted);
    font-size: var(--draco-fs-xs);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s, color .15s;
}

.draco-rail:hover .draco-rail-link,
.draco-rail:focus-within .draco-rail-link {
    opacity: 1;
}

.draco-rail-link:hover,
.draco-rail-link:focus-visible {
    color: var(--draco-accent);
}

.draco-rail-viewport {
    position: relative;
}

.draco-rail-track {
    display: flex;
    gap: var(--draco-gap-3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* O padding vertical dá espaço para o hover do pôster crescer
       sem ser cortado pelo overflow do próprio trilho. */
    padding: 6px 2px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.draco-rail-track::-webkit-scrollbar {
    display: none;
}

.draco-rail-track > * {
    scroll-snap-align: start;
}

.draco-rail-track:focus-visible {
    outline: 2px solid var(--draco-accent);
    outline-offset: 4px;
    border-radius: var(--draco-radius-sm);
}

/* Setas. O degradê usa --draco-bg em vez de cor fixa, senão a faixa
   escura apareceria por cima das paletas claras. */
.draco-rail-nav {
    position: absolute;
    top: 6px;
    bottom: 14px;
    width: 44px;
    z-index: 3;
    border: none;
    border-radius: var(--draco-radius-sm);
    color: var(--draco-text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s, color .18s;
}

.draco-rail-nav.is-prev {
    left: -6px;
    background: linear-gradient(90deg, var(--draco-bg) 15%, transparent);
}

.draco-rail-nav.is-next {
    right: -6px;
    background: linear-gradient(270deg, var(--draco-bg) 15%, transparent);
}

.draco-rail:hover .draco-rail-nav:not([hidden]),
.draco-rail:focus-within .draco-rail-nav:not([hidden]) {
    opacity: 1;
}

.draco-rail-nav:hover {
    color: var(--draco-accent);
}

.draco-rail-nav:focus-visible {
    opacity: 1;
    outline: 2px solid var(--draco-accent);
    outline-offset: -2px;
}

.draco-rail-nav[hidden] {
    display: none;
}

/* ------------------------------------------------------------
 *  Grade de pôsteres (página de Cursos)
 *
 *  auto-fill com minmax: a coluna nunca fica menor que o pôster e
 *  o número de colunas se ajusta à largura, sem breakpoint fixo.
 * ------------------------------------------------------------ */

.draco-poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--draco-poster-w), 1fr));
    gap: var(--draco-gap-4) var(--draco-gap-3);
    margin-bottom: var(--draco-gap-6);
}

/* Na grade o pôster ocupa a coluna inteira — o flex-basis fixo é do
   trilho, onde a largura precisa ser previsível para o scroll. */
.draco-poster-grid .draco-poster-card {
    flex: none;
    width: 100%;
}

/* ------------------------------------------------------------
 *  Pôster 2:3
 * ------------------------------------------------------------ */

.draco-poster-card {
    flex: 0 0 var(--draco-poster-w);
    width: var(--draco-poster-w);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease;
}

.draco-poster-card:hover,
.draco-poster-card:focus-visible {
    transform: scale(1.045);
    position: relative;
    z-index: 2;
    outline: none;
}

.draco-poster {
    position: relative;
    aspect-ratio: var(--draco-poster-ratio);
    border-radius: var(--draco-radius-sm);
    overflow: hidden;
    background: var(--draco-bg-elevated);
    border: 1px solid var(--draco-border-soft);
    transition: border-color .18s, box-shadow .18s;
}

.draco-poster-card:hover .draco-poster,
.draco-poster-card:focus-visible .draco-poster {
    border-color: var(--draco-accent);
    box-shadow: var(--draco-shadow-card);
}

.draco-poster-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draco-poster-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desenho de fundo. Sobe 12%: a metade de baixo é ocupada pelo scrim
   e pelo título, então o centro óptico do pôster fica acima do meio. */
.draco-poster-pattern {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center 38%;
    background-size: 62%;
    opacity: .16;
}

/* Scrim: garante contraste do título sobre qualquer arte. Cor fixa
   porque o texto do pôster é sempre branco, em qualquer paleta. */
.draco-poster::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(
        0deg,
        rgba(10, 13, 18, .94) 0%,
        rgba(10, 13, 18, .62) 42%,
        rgba(10, 13, 18, 0) 100%
    );
    pointer-events: none;
}

.draco-poster-badges {
    position: absolute;
    top: var(--draco-gap-2);
    left: var(--draco-gap-2);
    right: var(--draco-gap-2);
    z-index: 2;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.draco-poster .draco-tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .4px;
    line-height: 1.4;
}

.draco-poster .draco-tag-free      { background: var(--draco-success-bg); color: var(--draco-success); }
.draco-poster .draco-tag-new       { background: var(--draco-accent-soft); color: var(--draco-accent); }
.draco-poster .draco-tag-progress  { background: rgba(255, 255, 255, .16); color: #fff; }
.draco-poster .draco-tag-completed { background: var(--draco-success); color: #06210c; }
.draco-poster .draco-badge-right   { margin-left: auto; }

.draco-poster-info {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: var(--draco-gap-2) 10px 10px;
}

/* O draco.css já força --draco-font em tudo dentro do .draco-app, com
   !important. Temas que declaram font-family em h1-h6 também com
   !important empatam na especificidade e ganham por carregarem depois.
   Como este arquivo entra na sequência seguinte, a declaração aqui fecha
   a brecha — para o app inteiro, não só para o pôster, porque a causa
   não tem nada de específico do layout streaming. */
.draco-app,
.draco-app *,
.draco-app h1, .draco-app h2, .draco-app h3,
.draco-app h4, .draco-app h5, .draco-app h6 {
    font-family: var(--draco-font) !important;
}

.draco-poster-title {
    margin: 0;
    font-size: var(--draco-fs-xs);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.draco-poster-meta {
    margin: 3px 0 0;
    font-size: 10px;
    color: rgba(255, 255, 255, .66);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draco-poster-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    background: rgba(255, 255, 255, .22);
}

.draco-poster-progress > i {
    display: block;
    height: 100%;
    background: var(--draco-progress-c);
}

/* ------------------------------------------------------------
 *  Responsivo
 * ------------------------------------------------------------ */

@media (max-width: 640px) {
    .draco-app { --draco-poster-w: var(--draco-poster-w-sm); }

    /* Sem hover no toque: as setas somem e o "Ver todos" fica fixo. */
    .draco-rail-nav  { display: none; }
    .draco-rail-link { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .draco-rail-track { scroll-behavior: auto; }
    .draco-poster-card:hover,
    .draco-poster-card:focus-visible { transform: none; }
}

/* ------------------------------------------------------------
 *  Slider de destaques
 *
 *  Não passa sozinho: a troca é sempre por ação do aluno.
 * ------------------------------------------------------------ */

/* display e padding declarados de propósito, não por estilo: sem eles, uma
   regra homônima carregada antes (foi o que aconteceu com .draco-hero, que
   já existia no draco.css como grid) continua valendo e o layout absoluto
   aqui dentro colapsa. Declarar o que se espera é mais barato que caçar a
   colisão depois. */
.draco-spotlight {
    display: block;
    position: relative;
    padding: 0;
    margin-bottom: var(--draco-gap-6);
    border-radius: var(--draco-radius);
    overflow: hidden;
    background: var(--draco-bg-elevated);
}

.draco-spotlight-viewport {
    display: block;
    position: relative;
    /* Largo no desktop; mais alto no celular, senão o texto não cabe. */
    aspect-ratio: 8 / 3;
    /* min-height cobre navegador sem aspect-ratio: sem ela, o bloco de
       filhos absolutos teria altura zero. */
    min-height: 220px;
}

.draco-spotlight-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}

.draco-spotlight-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.draco-spotlight-img {
    position: absolute;
    inset: 0;
    width: 100%;
    /* !important porque temas costumam forçar height:auto em img, o que
       aqui deixaria a imagem com a altura original e fora do lugar. */
    height: 100% !important;
    max-width: none;
    object-fit: cover;
}

/* Véu da esquerda: garante contraste do texto sobre qualquer arte, sem
   escurecer a imagem inteira. Por isso o admin pede pouco detalhe
   nesse lado. */
.draco-spotlight-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Mais forte e mais longo que a versão anterior: arte clara ou com
       texto próprio no lado esquerdo vencia o véu antigo. */
    background: linear-gradient(
        90deg,
        rgba(6, 8, 12, .97) 0%,
        rgba(6, 8, 12, .90) 34%,
        rgba(6, 8, 12, .58) 58%,
        rgba(6, 8, 12, .12) 82%,
        rgba(6, 8, 12, 0) 100%
    );
}

.draco-spotlight-body {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: min(52%, 560px);
    padding: var(--draco-gap-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--draco-gap-2);
}

/* Escopado e !important porque o draco.css reseta cor e margem de todos
   os h1-h6 dentro do app. Sem isso o título do destaque herda a cor de
   texto do tema, que não tem contraste garantido sobre a arte. */
.draco-app .draco-spotlight-title {
    margin: 0 !important;
    font-size: clamp(24px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff !important;
    /* A arte de fundo pode ter texto próprio. A sombra separa as camadas
       para o título do destaque não competir de igual para igual. */
    text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}

.draco-spotlight-sub {
    margin: 0;
    font-size: var(--draco-fs-base);
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Escopado sob .draco-app de propósito. O draco.css tem
   `.draco-app a { background: transparent; }`, que tem especificidade
   maior que uma classe sozinha e apagaria o fundo do botão — foi o que
   deixou o CTA parecendo texto. Os estados vêm juntos porque a regra
   original também cobre :hover, :focus e :visited. */
.draco-app .draco-spotlight-cta,
.draco-app .draco-spotlight-cta:visited {
    align-self: flex-start;
    margin-top: var(--draco-gap-2);
    padding: 12px 26px;
    border-radius: var(--draco-radius-sm);
    background: var(--draco-accent);
    color: #fff;
    font-size: var(--draco-fs-sm);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
    transition: background .15s, transform .15s;
}

.draco-app .draco-spotlight-cta:hover,
.draco-app .draco-spotlight-cta:focus {
    background: var(--draco-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.draco-spotlight-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    z-index: 3;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s, background .18s;
}

.draco-spotlight-nav.is-prev { left: 0; }
.draco-spotlight-nav.is-next { right: 0; }

.draco-spotlight:hover .draco-spotlight-nav,
.draco-spotlight:focus-within .draco-spotlight-nav {
    opacity: 1;
}

.draco-spotlight-nav:hover { background: rgba(0, 0, 0, .28); }

.draco-spotlight-nav:focus-visible {
    opacity: 1;
    outline: 2px solid var(--draco-accent);
    outline-offset: -3px;
}

.draco-spotlight-dots {
    position: absolute;
    right: var(--draco-gap-4);
    bottom: var(--draco-gap-3);
    z-index: 3;
    display: flex;
    gap: 7px;
}

.draco-spotlight-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.draco-spotlight-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

.draco-spotlight-dot:focus-visible {
    outline: 2px solid var(--draco-accent);
    outline-offset: 2px;
}

@media (max-width: 782px) {
    .draco-spotlight-viewport { aspect-ratio: 4 / 3; }

    /* No celular o texto ocupa a largura toda e o véu passa a vir de
       baixo — véu lateral em tela estreita cobriria a imagem inteira. */
    .draco-spotlight-body {
        inset: auto 0 0 0;
        width: 100%;
        padding: var(--draco-gap-4);
        justify-content: flex-end;
    }

    .draco-spotlight-slide::after {
        background: linear-gradient(
            0deg,
            rgba(8, 11, 16, .94) 0%,
            rgba(8, 11, 16, .62) 46%,
            rgba(8, 11, 16, 0) 100%
        );
    }

    /* Sem hover no toque: navegação fica pelos marcadores. */
    .draco-spotlight-nav { display: none; }
    .draco-spotlight-dots { left: var(--draco-gap-4); right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .draco-spotlight-slide { transition: none; }
    .draco-spotlight-cta:hover { transform: none; }
}

/* ------------------------------------------------------------
 *  Slide de retomada e faixa de gamificação
 * ------------------------------------------------------------ */

/* Slide sem imagem cai na mesma arte gerada do trilho, para nunca
   aparecer vazio. */
.draco-spotlight-art {
    position: absolute;
    inset: 0;
    display: block;
}

/* Retomada é sobre o curso, não sobre campanha: a área de texto é mais
   larga porque há progresso e próxima aula para mostrar. */
.draco-spotlight-slide.is-resume .draco-spotlight-body {
    width: min(62%, 640px);
}

.draco-spotlight-eyebrow {
    margin: 0;
    font-size: var(--draco-fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--draco-accent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.draco-spotlight-meta {
    margin: 0;
    font-size: var(--draco-fs-xs);
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

.draco-spotlight-progress {
    display: flex;
    align-items: center;
    gap: var(--draco-gap-2);
    margin-top: 2px;
}

.draco-spotlight-bar {
    flex: 1 1 auto;
    max-width: 300px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .24);
    overflow: hidden;
}

.draco-spotlight-bar > i {
    display: block;
    height: 100%;
    background: var(--draco-accent);
}

.draco-spotlight-progress-label {
    font-size: var(--draco-fs-xs);
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.draco-spotlight-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--draco-gap-2);
    margin-top: var(--draco-gap-2);
}

/* A próxima aula é informação, não ação: fica ao lado do botão sem
   parecer um segundo botão concorrendo com "Continuar". */
.draco-spotlight-next {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 14px;
    border-radius: var(--draco-radius-sm);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    max-width: 320px;
}

.draco-spotlight-next-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.draco-spotlight-next-title {
    font-size: var(--draco-fs-xs);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Escopado sob .draco-app pelo mesmo motivo do CTA: o draco.css força
   background transparent em todo <a> dentro do app. */
.draco-app .draco-spotlight-ghost,
.draco-app .draco-spotlight-ghost:visited {
    padding: 10px 18px;
    border-radius: var(--draco-radius-sm);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: var(--draco-fs-xs);
    font-weight: 600;
}

.draco-app .draco-spotlight-ghost:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ---- Faixa de gamificação ---- */

.draco-xp-strip {
    display: flex;
    align-items: center;
    gap: var(--draco-gap-3);
    flex-wrap: wrap;
    padding: 10px var(--draco-gap-4);
    margin: calc(var(--draco-gap-6) * -1 + var(--draco-gap-3)) 0 var(--draco-gap-6);
    border: 1px solid var(--draco-border-soft);
    border-radius: var(--draco-radius-sm);
    background: var(--draco-bg-elevated);
    font-size: var(--draco-fs-xs);
}

.draco-xp-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    color: var(--draco-xp-color, var(--draco-accent));
    background: color-mix(in srgb, var(--draco-xp-color, var(--draco-accent)) 16%, transparent);
}

.draco-xp-icon { font-size: 13px; line-height: 1; }

.draco-xp-total {
    font-weight: 700;
    color: var(--draco-text);
}

.draco-xp-bar {
    flex: 1 1 160px;
    max-width: 320px;
    height: 5px;
    border-radius: 3px;
    background: var(--draco-border-soft);
    overflow: hidden;
}

.draco-xp-bar > i {
    display: block;
    height: 100%;
    background: var(--draco-accent);
}

.draco-xp-hint { color: var(--draco-text-muted); }

.draco-app .draco-xp-link {
    margin-left: auto;
    color: var(--draco-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.draco-app .draco-xp-link:hover { color: var(--draco-accent); }

@media (max-width: 782px) {
    .draco-spotlight-slide.is-resume .draco-spotlight-body { width: 100%; }

    /* Empilhado no celular: botão e próxima aula lado a lado espremeriam
       o título da aula até virar reticências. */
    .draco-spotlight-actions { flex-direction: column; align-items: stretch; }
    .draco-spotlight-next { max-width: none; }

    .draco-xp-strip { gap: var(--draco-gap-2); }
    .draco-xp-bar { flex-basis: 100%; order: 5; }
    .draco-app .draco-xp-link { margin-left: 0; }
}

/* ------------------------------------------------------------
 *  "Sua jornada": ranking e conquistas
 *
 *  Dois cartões lado a lado, no fluxo — não em coluna lateral. O
 *  streaming precisa da largura inteira para os trilhos.
 * ------------------------------------------------------------ */

.draco-journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--draco-gap-3);
    margin-bottom: var(--draco-gap-6);
}

.draco-journey-card {
    padding: var(--draco-gap-4);
    border: 1px solid var(--draco-border-soft);
    border-radius: var(--draco-radius-sm);
    background: var(--draco-bg-elevated);
}

.draco-journey-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--draco-gap-2);
    margin-bottom: var(--draco-gap-3);
}

.draco-journey-head h2 {
    font-size: var(--draco-fs-base);
    font-weight: 600;
    margin: 0 !important;
}

.draco-app .draco-journey-link {
    color: var(--draco-text-muted);
    font-size: var(--draco-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.draco-app .draco-journey-link:hover { color: var(--draco-accent); }

.draco-journey-foot {
    margin: var(--draco-gap-3) 0 0;
    padding-top: var(--draco-gap-2);
    border-top: 1px solid var(--draco-border-soft);
    font-size: var(--draco-fs-xs);
    color: var(--draco-text-muted);
}

/* ---- Ranking ---- */

.draco-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.draco-rank-row {
    display: flex;
    align-items: center;
    gap: var(--draco-gap-2);
    padding: 6px 8px;
    border-radius: var(--draco-radius-sm);
    font-size: var(--draco-fs-xs);
}

/* A própria linha destacada: sem isso o aluno precisa procurar o próprio
   nome, que é a única coisa que ele quer ver aqui. */
.draco-rank-row.is-me {
    background: var(--draco-accent-soft);
}

.draco-rank-pos {
    flex: 0 0 20px;
    font-weight: 700;
    color: var(--draco-text-muted);
    text-align: center;
}

.draco-rank-row.is-me .draco-rank-pos { color: var(--draco-accent); }

.draco-rank-avatar {
    flex: 0 0 auto;
    width: 24px;
    height: 24px !important;
    border-radius: 50%;
    object-fit: cover;
}

.draco-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--draco-text);
}

.draco-rank-xp {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--draco-text-muted);
}

/* ---- Conquistas ---- */

.draco-badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draco-badge-row {
    display: flex;
    align-items: center;
    gap: var(--draco-gap-2);
    padding: 8px 10px;
    border-radius: var(--draco-radius-sm);
    background: var(--draco-bg-card);
    /* Barra lateral na cor de destaque: dá peso de "prêmio" sem precisar
       de arte própria por conquista. */
    border-left: 3px solid var(--draco-accent);
}

.draco-badge-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }

.draco-badge-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.draco-badge-name {
    font-size: var(--draco-fs-xs);
    font-weight: 600;
    color: var(--draco-text);
}

.draco-badge-desc {
    font-size: 11px;
    color: var(--draco-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------
 *  Blindagem dos controles
 *
 *  Quarta ocorrência do mesmo padrão nesta série (.draco-tag,
 *  .draco-hero, o CTA do slider e agora as setas): regra ampla de
 *  terceiro vencendo o módulo novo. Aqui o tema pinta <button> com
 *  cor própria, e a seta do slider saía como uma faixa vermelha de
 *  altura inteira.
 *
 *  Em vez de corrigir um controle por vez conforme aparecem, este
 *  bloco cobre todos os botões do módulo de uma só vez. O !important
 *  é deliberado: não se sabe qual seletor o tema do cliente usa, e
 *  controle de navegação pintado de vermelho é pior que um !important
 *  no CSS.
 * ------------------------------------------------------------ */

.draco-app .draco-rail-nav,
.draco-app .draco-spotlight-nav,
.draco-app .draco-spotlight-dot {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Seta neutra: branca sobre transparente, escurecendo de leve só no
   hover. A navegação não deve competir com o conteúdo do slide. */
.draco-app .draco-spotlight-nav {
    width: 48px;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

.draco-app .draco-spotlight-nav:hover {
    color: #fff !important;
    background: rgba(0, 0, 0, .22) !important;
}

.draco-app .draco-rail-nav {
    color: var(--draco-text) !important;
}

/* O degradê das setas do trilho volta aqui: a blindagem acima zera o
   background de todos os controles, e este é o único que depende dele
   para o pôster não aparecer cortado atrás da seta. */
.draco-app .draco-rail-nav.is-prev {
    background: linear-gradient(90deg, var(--draco-bg) 15%, transparent) !important;
}

.draco-app .draco-rail-nav.is-next {
    background: linear-gradient(270deg, var(--draco-bg) 15%, transparent) !important;
}

.draco-app .draco-rail-nav:hover {
    color: var(--draco-accent) !important;
}

/* Marcadores: a cor volta depois da blindagem. */
/* Forma e tamanho também precisam de !important: a blindagem acima zera
   borda e fundo, mas o tema continuava impondo o padding e o raio dos
   seus próprios botões — e o marcador saía retangular em vez de redondo. */
.draco-app .draco-spotlight-dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .38) !important;
    line-height: 0 !important;
}

.draco-app .draco-spotlight-dot.is-active {
    background: #fff !important;
}