/* Etapa 38: informações diretamente sobre a asa esquerda do dragão. */
body > .header > .container { position: relative; }
body > .header .rl38-dragon-info {
    position: absolute;
    z-index: 6;
    top: 148px;
    left: 0;
    width: min(510px, 43vw);
    color: #f5eee5;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: "Noto Sans", Arial, sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
body > .header .rl38-description { font-size: 16px; line-height: 1.7; font-weight: 500; margin: 0 0 24px; max-width: 510px; }
body > .header .rl38-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
body > .header .rl38-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 7px; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; text-shadow: none; }
body > .header .rl38-btn:hover { color: #fff; filter: brightness(1.13); }
body > .header .rl38-btn-primary { background: #a52d26; border: 1px solid #c64b3d; }
body > .header .rl38-btn-secondary { background: rgba(30,22,19,.68); border: 1px solid rgba(201,166,106,.55); }
body > .header .rl38-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
body > .header .rl38-stat { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 5px; background: rgba(22,17,17,.78); border: 1px solid rgba(185,150,101,.28); border-radius: 7px; text-decoration: none; text-shadow: none; }
body > .header .rl38-stat small { font-size: 11px; font-weight: 700; color: #c1b4aa; }
body > .header .rl38-stat strong { font-size: 23px; line-height: 1.1; font-family: Georgia,serif; color: #f4d4a3; }
@media (max-width: 1199px) {
    body > .header .rl38-dragon-info { left: 0; top: 145px; width: min(440px, 45vw); }
    body > .header .rl38-description { font-size: 14px; }
    body > .header .rl38-btn { padding: 11px 12px; font-size: 12px; }
}
@media (max-width: 767px) {
    body > .header .rl38-dragon-info { top: 120px; left: 12px; width: min(340px, calc(100% - 24px)); }
    body > .header .rl38-description { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
    body > .header .rl38-actions { gap: 6px; margin-bottom: 12px; }
    body > .header .rl38-btn { font-size: 10px; padding: 9px; }
    body > .header .rl38-stat { padding: 10px; }
    body > .header .rl38-stat strong { font-size: 18px; }
}

/* Etapa 39: estilo do hero de referência, restrito ao painel do dragão. */
body > .header .rl38-dragon-info {
    max-width: 700px;
    font-family: "Noto Sans", system-ui, sans-serif;
}
body > .header .rl38-dragon-info .rl38-description,
body > .header .rl38-dragon-info .rl38-btn,
body > .header .rl38-dragon-info .rl38-stat {
    font-family: "Noto Sans", system-ui, sans-serif;
}
body > .header .rl38-dragon-info .rl38-stat strong {
    font-family: "Noto Sans", system-ui, sans-serif;
    font-weight: 700;
}
body > .header .rl38-dragon-info.reveal-on-scroll {
    opacity: 1;
    transform: translateY(0);
}
body.reveal-ready > .header .rl38-dragon-info.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
body.reveal-ready > .header .rl38-dragon-info.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    body.reveal-ready > .header .rl38-dragon-info.reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Etapa 41: alinhar o bloco do dragao com a borda esquerda do Painel do Jogador.
   A etapa anterior alterou o bloco rl35, mas o bloco visivel e rl38. */
@media (min-width: 1200px) {
    body > .header .rl38-dragon-info {
        left: 54px !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    body > .header .rl38-dragon-info {
        left: 4% !important;
    }
}

/* Etapa 42: o alinhamento exato e calculado pela borda do login.
   Mantem fallback ate o JS carregar. */
@media (min-width: 768px) {
    body > .header .rl38-dragon-info {
        left: 0;
    }
}

/* Etapa 43: descer o painel sem modificar o alinhamento horizontal. */
body > .header .rl38-dragon-info { top: 193px; }
@media (max-width: 1199px) { body > .header .rl38-dragon-info { top: 190px; } }
@media (max-width: 767px) { body > .header .rl38-dragon-info { top: 165px; } }