/* Biblinha v3 — design system unificado */
:root {
    --v3-green: #a8df78;
    --v3-green2: #7dcc58;
    --v3-green-dark: #248b3d;
    --v3-paper: #fffdf5;
    --v3-cream: #fff7df;
    --v3-turq: #1fc9bf;
    --v3-orange: #ff9b48;
    --v3-red: #d95432;
    --v3-yellow: #ffd747;
    --v3-purple: #8b4ad8;
    --v3-pink: #ef3d83;
    --v3-brown: #57463e;
    --v3-soft: #6e625c;
    --v3-card: 30px;
    --v3-shadow: 0 8px 0 rgba(62,109,47,.12),0 16px 30px rgba(66,89,47,.12)
}

body.bib-v3 {
    background: #a8df78 url('../img/backgrounds/bg-pattern.webp') center top/760px auto repeat-y;
    color: var(--v3-brown)
}

.bib-v3 .page-shell-v3 {
    max-width: 1080px;
    padding: 22px 18px 70px
}

.bib-v3 .topbar-v3 {
    height: 112px;
    background: linear-gradient(180deg,rgba(168,223,120,.98),rgba(168,223,120,.92));
    box-shadow: none
}

.bib-v3 .topbar-v3.scrolled {
    height: 88px;
    background: rgba(168,223,120,.97);
    box-shadow: 0 10px 24px rgba(55,93,39,.12)
}

.bib-v3 .topbar-v3.scrolled .mascot-top img {
    height: 52px
}

.bib-v3 .topbar-v3.scrolled .xp-mini {
    width: 118px;
    height: 13px
}

.bib-v3 .icon-button img {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 5px 0 rgba(80,70,35,.12))
}

.bib-v3 .mascot-top img {
    height: 62px
}

.bib-v3 .xp-mini {
    box-shadow: 0 3px 0 rgba(62,42,69,.14)
}

/* drawer versão aprovada A */
.drawer-v3 {
    width: min(calc(86 * var(--app-vw)),430px);
    /* Fundo em duas camadas: o jardim encerrando a base, sobre o turquesa.
       Como o drawer e o container rolavel, o background-attachment padrao
       (scroll) prende as duas camadas ao padding-box visivel: o jardim fica
       colado no bottom do menu e nao acompanha a rolagem da lista. Fundo nao
       ocupa espaco, nao empurra conteudo, fica atras de tudo e nao recebe
       clique - nada de elemento no fluxo.
       A arte tem folga transparente: a base so fica cheia a partir de ~25px do
       fim e as laterais desbotam nos ~14px das pontas (medido no alpha do
       1200x480). Dai a leve sangria: 104% de largura, centrada, sobra ~2% de
       cada lado fora da borda, e o empurrao para baixo tira a faixa vazia da
       base. Proporcao preservada (altura auto). */
    --drawer-v3-garden-w: 104%;
    --drawer-v3-garden-y: 10px;
    background: url('../img/backgrounds/bg-card-modal-garden.webp') no-repeat,linear-gradient(180deg,#2ec7bc 0%,#38c6bc 64%,#33b9aa 100%);
    /* Por camada: o jardim centrado e empurrado para baixo; o turquesa intacto. */
    background-position: center calc(100% + var(--drawer-v3-garden-y)),center top;
    background-size: var(--drawer-v3-garden-w) auto,auto;
    /* So o topo e arredondado; a lateral segue reta ate o fim do conteudo. */
    border-radius: 0 80px 0 0;
    padding: 38px 22px 28px;
    color: #fff;
    box-shadow: 20px 0 60px rgba(18,61,51,.26);
    /* Altura real disponivel: dvh acompanha a barra do navegador no celular.
       Com height definido, o bottom:0 herdado de .drawer ficaria redundante. */
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    /* O proprio drawer e a unica area rolavel: cabecalho, opcoes e
       decoracao ficam no mesmo fluxo e sobem juntos ao rolar. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Impede que a rolagem encadeie para a pagina de fundo. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Rola normalmente, mas sem barra visivel (Firefox / Edge legado). */
    scrollbar-width: none;
    -ms-overflow-style: none
}

/* Chrome, Safari e Edge: esconde a barra sem desligar a rolagem. */
.drawer-v3::-webkit-scrollbar {
    display: none
}

/* Apenas agrupa o nav; cresce com o conteudo, sem rolagem propria. */
.drawer-v3 .drawer-scroll {
    overflow: visible
}

.drawer-v3 .drawer-profile {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 0 12px 22px
}

.drawer-v3 .avatar-circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 0 rgba(0,0,0,.08)
}

.drawer-v3 .avatar-circle img {
    width: 68px;
    height: 68px;
    object-fit: contain
}

.drawer-v3 .drawer-profile small {
    display: block;
    opacity: .86;
    font-size: 14px
}

.drawer-v3 .drawer-profile strong {
    display: block;
    font-family: var(--font-display);
    font-size: 27px;
    color: #fff
}

.drawer-v3 nav {
    background: rgba(255,253,245,.97);
    border-radius: 34px;
    padding: 10px 16px;
    box-shadow: 0 10px 0 rgba(19,92,82,.12)
}

.drawer-v3 nav a,.drawer-v3 nav button {
    min-height: 66px;
    border: 0;
    border-bottom: 1px solid rgba(129,113,94,.14);
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 5px;
    text-decoration: none;
    color: #4d4039;
    font-size: 19px;
    text-align: left
}

.drawer-v3 nav a:last-child,.drawer-v3 nav form:last-child button {
    border-bottom: 0
}

.drawer-v3 nav img {
    width: 43px;
    height: 43px;
    object-fit: contain
}

.drawer-v3 nav span {
    margin-left: auto;
    color: #a59a86;
    font-size: 30px
}

.options-sheet {
    position: fixed;
    z-index: 90;
    right: 18px;
    top: 94px;
    width: min(330px,calc(100 * var(--app-vw) - 36px));
    background: #fffdf3;
    border: 3px solid #f3d998;
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(63,52,37,.22);
    text-align: center
}

.options-sheet[hidden] {
    display: none
}

.options-sheet>button {
    position: absolute;
    right: 12px;
    top: 8px;
    border: 0;
    background: none;
    font-size: 32px;
    color: #7d6a58
}

.options-sheet>img {
    width: 88px;
    height: 88px;
    object-fit: contain
}

.options-sheet h3 {
    font-family: var(--font-display);
    font-size: 25px;
    color: var(--v3-green-dark);
    margin: 4px 0 14px
}

.options-sheet div {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.options-sheet a {
    background: #f6f0e2;
    padding: 10px 4px;
    border-radius: 14px;
    color: #57463e;
    text-decoration: none;
    font-size: 13px
}

/* home */
.v3-home-hero,.v3-page-card {
    background: rgba(255,253,245,.94);
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 36px;
    box-shadow: var(--v3-shadow)
}

.v3-home-hero {
    min-height: 260px;
    padding: 28px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative
}

.v3-home-hero:before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: #fff6bb;
    right: 16%;
    top: -115px;
    opacity: .5
}

.v3-home-copy {
    position: relative;
    z-index: 2
}

.v3-home-copy>span {
    font-size: 23px
}

.v3-home-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(62px,11vw,92px);
    line-height: .9;
    margin: 4px 0 14px;
    color: #ffda45;
    -webkit-text-stroke: 2px #52371f;
    text-shadow: 0 5px 0 rgba(72,47,24,.12)
}

.v3-home-copy p {
    font-size: 20px;
    max-width: 500px;
    margin: 0;
    line-height: 1.4
}

.v3-home-hero>img {
    position: relative;
    z-index: 2;
    max-height: 230px;
    max-width: 40%;
    filter: drop-shadow(0 12px 12px rgba(65,58,33,.15));
    animation: v3Float 4s ease-in-out infinite
}

.v3-account-callout,.v3-player-bar {
    margin: 22px 0;
    background: #fff;
    border-radius: 28px;
    box-shadow: var(--v3-shadow);
    padding: 20px 24px
}

.v3-account-callout {
    display: flex;
    align-items: center;
    gap: 18px
}

.v3-account-callout>div {
    margin-right: auto
}

.v3-account-callout b {
    font-size: 19px;
    display: block
}

.v3-account-callout span {
    display: block;
    color: #74675f;
    margin-top: 4px
}

.v3-player-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.v3-player-main {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: auto
}

.v3-player-main img {
    width: 55px;
    height: 55px;
    object-fit: contain
}

.v3-player-main small,.v3-player-main b {
    display: block
}

.v3-player-main b {
    font-size: 21px
}

.v3-player-stat {
    padding: 10px 13px;
    border-radius: 16px;
    background: #f4f1e8
}

.v3-player-stat.bronze {
    background: #ffe1bf
}

.v3-player-stat.silver {
    background: #eef2f4
}

.v3-player-stat.gold {
    background: #fff3ad
}

.v3-btn {
    border: 0;
    border-radius: 24px;
    padding: 15px 24px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    box-shadow: 0 6px 0 rgba(67,76,42,.18);
    transition: .18s var(--ease-spring);
    cursor: pointer
}

.v3-btn:hover {
    transform: translateY(-3px)
}

.v3-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(67,76,42,.18)
}

.v3-btn-yellow {
    background: linear-gradient(#ffe65f,#ffd33f);
    color: #c3502d
}

.v3-btn-green {
    background: linear-gradient(#82df63,#54bf4b);
    color: #fff
}

.v3-section-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--v3-green-dark);
    margin: 32px 0 15px
}

.v3-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.v3-section-head>a {
    color: #bd4b2b
}

.v3-adventure-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px
}

.v3-adventure-card {
    background: #fff;
    border-radius: 27px;
    box-shadow: var(--v3-shadow);
    min-height: 104px;
    padding: 15px 18px;
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #4f443e;
    transition: .2s var(--ease-spring)
}

.v3-adventure-card:hover {
    transform: translateY(-5px)
}

.v3-adventure-card img {
    width: 58px;
    height: 58px;
    object-fit: contain
}

.v3-adventure-card b {
    font-size: 21px;
    display: block
}

.v3-adventure-card small {
    display: block;
    color: #82746a;
    margin-top: 3px
}

.v3-adventure-card i {
    font-style: normal;
    font-size: 33px;
    color: #b8aa98
}

.v3-book-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px
}

.v3-book-strip>a {
    position: relative;
    border-radius: 26px;
    aspect-ratio: 1/1;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--v3-shadow)
}

.v3-book-strip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.v3-book-strip>a:after {
    content: "";
    position: absolute;
    inset: 42% 0 0;
    background: linear-gradient(transparent,rgba(31,25,20,.78))
}

.v3-book-strip span {
    position: absolute;
    z-index: 2;
    left: 15px;
    right: 15px;
    bottom: 13px
}

.v3-book-strip b,.v3-book-strip small {
    display: block
}

.v3-book-strip b {
    font-family: var(--font-display);
    font-size: 23px;
    text-shadow: 0 2px 2px #000
}

.v3-book-strip small {
    text-shadow: 0 2px 2px #000
}

/* heading / catalog */
.v3-page-card {
    padding: 24px
}

.v3-page-intro {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-bottom: 22px
}

.v3-page-intro>img {
    width: 78px;
    height: 78px;
    object-fit: contain
}

.v3-page-intro h1 {
    font-family: var(--font-display);
    font-size: 39px;
    color: var(--v3-green-dark);
    margin: 0
}

.v3-page-intro p {
    font-size: 18px;
    margin: 4px 0 0
}

.books-intro-v3 {
    background: linear-gradient(110deg,#fffdf4,#fbfad6)
}

.v3-books-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 17px
}

.v3-books-grid>a {
    background: #fff;
    border-radius: 28px;
    padding: 9px 9px 13px;
    box-shadow: var(--v3-shadow);
    text-decoration: none;
    color: #55483f;
    transition: .22s var(--ease-spring)
}

.v3-books-grid>a:hover {
    transform: translateY(-6px) rotate(-.3deg)
}

.v3-book-cover {
    display: block;
    aspect-ratio: 1/1;
    border-radius: 22px;
    overflow: hidden;
    position: relative
}

.v3-book-cover:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: inherit
}

.v3-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.v3-book-meta {
    display: block;
    padding: 10px 6px 0
}

.v3-book-meta b {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    color: #c84f31
}

.v3-book-meta small {
    color: #6f625a
}

/* Páginas institucionais (Política de Privacidade): leitura longa, mesmo painel do auth. */
.v3-legal-shell {
    display: grid;
    place-items: start center;
    padding: 15px 12px 32px
}

.v3-legal {
    position: relative;
    width: min(760px,100%);
    padding: clamp(20px, 5vw, 36px) clamp(16px, 5vw, 44px) clamp(24px, 5vw, 40px);
    border-radius: clamp(26px, 6vw, 38px);
    background: rgba(255,253,245,.97);
    box-shadow: var(--v3-shadow);
    color: #4a3b31;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.65;
    overflow-wrap: anywhere
}

.v3-legal-back {
    position: absolute;
    left: clamp(16px, 4vw, 24px);
    top: clamp(14px, 3.5vw, 20px);
    color: #8a7465;
    text-decoration: none;
    font-weight: 700
}

.v3-legal-head {
    text-align: center;
    padding-top: 18px
}

.v3-legal-mascot {
    display: block;
    width: clamp(84px, 24vw, 110px);
    height: auto;
    margin: 0 auto 2px
}

.v3-legal h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.1;
    color: var(--v3-green-dark)
}

.v3-legal-date {
    margin: 6px 0 0;
    color: #8a7465;
    font-size: .9em;
    font-weight: 700
}

.v3-legal-intro {
    max-width: 580px;
    margin: 14px auto 0
}

.v3-legal-toc {
    margin: 22px 0 6px;
    padding: 14px clamp(14px, 4vw, 20px);
    border-radius: 20px;
    background: #f6ecd9
}

.v3-legal-toc ol {
    margin: 0;
    padding-left: 1.3em;
    columns: 2 220px;
    column-gap: 24px
}

.v3-legal-toc li {
    break-inside: avoid;
    line-height: 1.5
}

.v3-legal-toc a {
    color: #6a4a2f;
    font-weight: 700
}

.v3-legal section {
    scroll-margin-top: 16px;
    margin-top: 26px
}

.v3-legal h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(21px, 5.6vw, 26px);
    line-height: 1.2;
    color: #2f6d33
}

.v3-legal h3 {
    margin: 14px 0 4px;
    font-size: 1em;
    font-weight: 900;
    color: #5a4233
}

.v3-legal p {
    margin: 8px 0 0
}

.v3-legal ul {
    margin: 6px 0 0;
    padding-left: 1.2em
}

.v3-legal li + li {
    margin-top: 4px
}

.v3-legal code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #f1e7d3;
    font-size: .92em
}

.v3-legal p a {
    color: #a64d31;
    font-weight: 700
}

.v3-legal a:focus-visible {
    outline: 3px solid #2f7fd6;
    outline-offset: 2px;
    border-radius: 4px
}

/* auth */
.v3-auth-shell {
    min-height: calc(100vh - 160px);
    min-height: calc(100dvh - 160px);
    display: grid;
    place-items: center;
    padding: 15px
}

.v3-auth-panel {
    width: min(590px,100%);
    background: rgba(255,253,245,.96);
    border-radius: 38px;
    padding: 28px 34px;
    box-shadow: var(--v3-shadow);
    text-align: center;
    position: relative
}

.v3-auth-back {
    position: absolute;
    left: 22px;
    top: 20px;
    color: #8a7465;
    text-decoration: none
}

.v3-auth-mascot {
    width: 160px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto -2px
}

.v3-auth-mascot.small {
    width: 115px;
    height: 108px
}

/* "Boas-vindas à" do login: linha própria, para o leão (inline, acima) ficar
   sozinho na linha dele e centralizado pelo text-align do painel. */
.v3-auth-panel>span {
    display: block;
    font-size: 20px
}

.v3-auth-panel h1 {
    font-family: var(--font-display);
    font-size: 58px;
    color: #ffda45;
    -webkit-text-stroke: 2px #54361e;
    margin: 2px 0
}

/* Título verde menor do cadastro; .is-form: as telas de recuperação de senha. */
.v3-auth-panel.register h1,
.v3-auth-panel.is-form h1 {
    font-size: 34px;
    color: var(--v3-green-dark);
    -webkit-text-stroke: 0
}

.v3-auth-panel>p {
    max-width: 440px;
    margin: 0 auto 18px
}

.v3-auth-panel form {
    display: grid;
    gap: 13px;
    text-align: left
}

.v3-auth-panel label {
    font-size: 17px;
    color: #b04b2d
}

.v3-auth-panel input,.v3-auth-panel select {
    width: 100%;
    margin-top: 5px;
    border: 0;
    background: #fff;
    border-radius: 19px;
    padding: 16px 17px;
    font-size: 17px;
    color: #54473f;
    box-shadow: 0 5px 0 rgba(72,63,49,.12);
    outline: 2px solid transparent
}

.v3-auth-panel input:focus,.v3-auth-panel select:focus {
    outline-color: #8dd96c
}

.v3-auth-panel .v3-btn {
    width: 100%;
    margin-top: 6px
}

.v3-auth-alt {
    display: block;
    margin: 18px 0 0;
    font-weight: 700;
    color: #a64d31
}

/* Só a ação da frase é link ("Não tem uma conta? Crie uma"): mesma cor da linha. */
.v3-auth-alt a {
    color: inherit
}

/* Link discreto para a Política de Privacidade, logo abaixo do botão do cadastro. */
.v3-auth-panel .v3-auth-privacy {
    margin: 0;
    text-align: center
}

.v3-auth-privacy a {
    color: #a64d31;
    font-weight: 700
}

/* profile and utility pages */
.v3-profile-hero {
    display: flex;
    gap: 22px;
    align-items: center
}

.v3-profile-hero img {
    width: 130px
}

.v3-profile-hero small {
    color: #8f806f
}

.v3-profile-hero h1 {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--v3-green-dark);
    margin: 3px 0
}

.v3-profile-hero p {
    margin: 0
}

.v3-stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-top: 20px
}

.v3-stats-grid>div {
    background: #fff;
    border-radius: 25px;
    padding: 18px;
    text-align: center;
    box-shadow: var(--v3-shadow)
}

.v3-stats-grid span,.v3-stats-grid b,.v3-stats-grid small {
    display: block
}

.v3-stats-grid span {
    font-size: 28px
}

.v3-stats-grid b {
    font-family: var(--font-display);
    font-size: 30px;
    color: #4c433c
}

.v3-empty {
    text-align: center;
    margin-top: 20px
}

.v3-empty h2 {
    font-family: var(--font-display);
    color: var(--v3-green-dark)
}

.v3-game-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px
}

.v3-game-grid>a,.v3-game-grid>div {
    background: #fff;
    border-radius: 28px;
    box-shadow: var(--v3-shadow);
    padding: 25px;
    text-align: center;
    text-decoration: none;
    color: #56493f
}

.v3-game-grid span {
    font-size: 58px;
    display: block
}

.v3-game-grid b {
    font-family: var(--font-display);
    font-size: 25px;
    display: block;
    color: #c95335
}

.v3-game-grid small {
    display: block;
    color: #827267
}

.v3-daily-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    background: #fff;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: var(--v3-shadow);
    text-decoration: none;
    color: #53473f
}

.v3-daily-card>img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover
}

.v3-daily-card>div {
    padding: 35px;
    align-self: center
}

.v3-daily-card small {
    color: #56aa45;
    font-size: 18px
}

.v3-daily-card h2 {
    font-family: var(--font-display);
    font-size: 43px;
    color: #c85132;
    margin: 3px 0
}

.v3-daily-card p {
    font-size: 20px
}

.v3-daily-card span {
    color: #2e963c;
    font-size: 21px
}

.v3-prayer-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.v3-prayer-grid article {
    background: #fffdf5;
    border-radius: 28px;
    padding: 25px;
    box-shadow: var(--v3-shadow);
    text-align: center
}

.v3-prayer-grid span {
    font-size: 52px
}

.v3-prayer-grid h3 {
    font-family: var(--font-display);
    font-size: 25px;
    color: #c44f31;
    margin: 7px 0
}

.v3-prayer-grid p {
    line-height: 1.5
}

.v3-history-list {
    display: grid;
    gap: 12px
}

.v3-history-list article {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 23px;
    padding: 15px 18px;
    box-shadow: var(--v3-shadow)
}

.v3-history-list article>span {
    font-size: 32px
}

.v3-history-list b,.v3-history-list small {
    display: block
}

.v3-history-list small {
    color: #82746a
}

.v3-history-list time {
    font-size: 13px;
    color: #8f8178
}

/* Existing core screens harmonized */
.bib-v3 .immersive-content {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto
}

.bib-v3 .book-progress,.bib-v3 .reading-card,.bib-v3 .reading-progress {
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: var(--v3-shadow)
}

.bib-v3 .chapter-card-visual {
    border-radius: 28px;
    padding: 10px;
    background: #fffdf8;
    min-height: 112px
}

.bib-v3 .chapter-thumb {
    width: 92px;
    height: 92px;
    border-radius: 22px
}

.bib-v3 .chapter-card-visual b {
    font-family: var(--font-display);
    font-size: 24px;
    color: #cc5335
}

.bib-v3 .reading-card {
    background: rgba(255,253,248,.96);
    border-radius: 34px;
    padding: 30px 32px
}

.bib-v3 .reading-card h2 {
    font-size: 34px;
    color: #299541
}

.bib-v3 .reading-progress {
    background: #fffdf6;
    border-radius: 30px
}

/* game screens reuse the same art direction */
.bib-v3 .game-screen {
    border-radius: 38px;
    padding: 22px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
    overflow: hidden
}

.bib-v3 .roulette-screen {
    background: #b7ed54 url('../img/backgrounds/bg-roulette.webp') center top/cover no-repeat
}

.bib-v3 .collection-screen,.bib-v3 .store-screen {
    background: linear-gradient(rgba(197,239,151,.58),rgba(170,225,115,.65)),url('../img/backgrounds/bg-cards.webp') center/cover
}

.bib-v3 .envelope-screen {
    background: url('../img/backgrounds/bg-cards.webp') center/cover no-repeat
}

.bib-v3 .game-panel {
    border: 2px solid rgba(245,217,148,.85);
    box-shadow: var(--v3-shadow)
}

.bib-v3 .collect-card,.bib-v3 .shop-card,.bib-v3 .wallet-grid>div {
    box-shadow: var(--v3-shadow)
}

.bib-v3 .game-cta {
    border-radius: 28px;
    box-shadow: 0 7px 0 rgba(68,89,40,.18)
}

/* quiz */
.bib-v3 .quiz-v2,.bib-v3 .quiz-result-v2 {
    border-radius: 38px;
    background: linear-gradient(180deg,rgba(181,235,111,.98),rgba(145,216,91,.98));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
    padding: 24px;
    overflow: hidden
}

.bib-v3 .quiz-v2 h1 {
    font-family: var(--font-display);
    font-size: clamp(34px,calc(6 * var(--app-vw)),52px);
    color: #e35428;
    text-shadow: 0 3px 0 rgba(120,63,31,.12)
}

.bib-v3 .quiz-v2-options button {
    border: 2px solid #f5df9e;
    border-radius: 26px;
    background: #fffdf6;
    box-shadow: 0 7px 0 rgba(85,102,53,.15)
}

.bib-v3 .answer-letter {
    box-shadow: inset 0 2px rgba(255,255,255,.55),0 4px 0 rgba(52,45,39,.12)
}

/* loaders, flashes */
.bib-v3 .books-loading-bubble {
    border-radius: 34px;
    background: #fffdf4;
    box-shadow: var(--v3-shadow)
}

.bib-v3 .flash {
    border-radius: 18px;
    box-shadow: var(--v3-shadow)
}

@keyframes v3Float {
    50% {
        transform: translateY(-8px) rotate(1deg)
    }
}

/* mobile-first: base (era @media (max-width: 850px)) */
    .v3-books-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .v3-book-strip {
        grid-template-columns: repeat(3,1fr)
    }

    .v3-prayer-grid {
        grid-template-columns: 1fr
    }

    .v3-daily-card {
        grid-template-columns: 1fr
    }

    .v3-daily-card>img {
        min-height: 240px;
        max-height: 360px
    }

    .v3-stats-grid {
        grid-template-columns: repeat(2,1fr)
    }
/* fim: era @media (max-width: 850px) */

/* mobile-first: base (era @media (max-width: 600px)) */
    body.bib-v3 {
        background-size:520px auto
    }

    .bib-v3 .page-shell-v3 {
        padding: 14px 12px 54px
    }

    .bib-v3 .bib-body {
        padding-top: 106px
    }

    .v3-home-hero {
        min-height: 205px;
        padding: 20px 20px
    }

    .v3-home-copy>span {
        font-size: 17px
    }

    .v3-home-copy h1 {
        font-size: 54px
    }

    .v3-home-copy p {
        font-size: 15px;
        max-width: 220px
    }

    .v3-home-hero>img {
        max-height: 160px;
        max-width: 43%
    }

    .v3-account-callout {
        align-items: stretch;
        flex-direction: column
    }

    .v3-account-callout .v3-btn {
        width: 100%
    }

    .v3-player-bar {
        gap: 7px;
        padding: 14px
    }

    .v3-player-main {
        width: 100%
    }

    .v3-player-stat {
        font-size: 13px;
        padding: 8px 10px
    }

    .v3-adventure-grid {
        grid-template-columns: 1fr
    }

    .v3-adventure-card {
        min-height: 86px;
        grid-template-columns: 54px 1fr auto
    }

    .v3-adventure-card img {
        width: 50px;
        height: 50px
    }

    .v3-adventure-card b {
        font-size: 19px
    }

    .v3-section-title {
        font-size: 27px
    }

    .v3-book-strip {
        grid-template-columns: repeat(2,1fr);
        gap: 11px
    }

    .v3-books-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .v3-books-grid>a {
        border-radius: 22px;
        padding: 7px
    }

    .v3-book-cover {
        border-radius: 18px
    }

    .v3-book-meta b {
        font-size: 19px
    }

    .v3-page-card {
        border-radius: 28px;
        padding: 18px
    }

    .v3-page-intro>img {
        width: 58px;
        height: 58px
    }

    .v3-page-intro h1 {
        font-size: 30px
    }

    .v3-page-intro p {
        font-size: 15px
    }

    .v3-auth-shell {
        padding: 0
    }

    .v3-auth-panel {
        padding: 28px 18px;
        border-radius: 30px
    }

    .v3-auth-panel h1 {
        font-size: 48px
    }

    .v3-auth-back {
        position: static;
        display: block;
        text-align: left;
        margin-bottom: 4px
    }

    .v3-profile-hero img {
        width: 90px
    }

    .v3-profile-hero h1 {
        font-size: 32px
    }

    .v3-game-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 10px
    }

    .v3-game-grid>a,.v3-game-grid>div {
        padding: 16px
    }

    .v3-game-grid span {
        font-size: 42px
    }

    .v3-game-grid b {
        font-size: 19px
    }

    .v3-daily-card>div {
        padding: 22px
    }

    .v3-daily-card h2 {
        font-size: 34px
    }

    .v3-history-list article {
        grid-template-columns: 45px 1fr
    }

    .v3-history-list time {
        grid-column: 2
    }

    .bib-v3 .game-screen {
        margin-left: -4px;
        margin-right: -4px;
        padding: 12px;
        border-radius: 28px
    }

    .bib-v3 .quiz-v2,.bib-v3 .quiz-result-v2 {
        margin: 0 -4px;
        padding: 14px;
        border-radius: 28px
    }
/* fim: era @media (max-width: 600px) */

/* ========================================================================== */
/* Livros da Bíblia — rebuild v3.1 (layout aprovado)                          */
/* ========================================================================== */
.bib-v3 .page-shell-v3:has(.books-v4) {
    max-width: 980px;
    position: relative;
}

.bib-v3 .page-shell-v3:has(.books-v4)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(rgba(170,226,118,.88),rgba(154,216,99,.92)), url('../img/backgrounds/bg-pattern.webp') center top/760px auto repeat-y;
}

.books-v4 {
    position: relative;
    padding-bottom: 26px;
    isolation: isolate
}

.books-v4::before,.books-v4::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .35
}

.books-v4::before {
    width: 230px;
    height: 230px;
    left: -95px;
    top: 245px;
    background: radial-gradient(circle,#e9ffb4,transparent 68%)
}

.books-v4::after {
    width: 300px;
    height: 300px;
    right: -130px;
    top: 520px;
    background: radial-gradient(circle,#d5ff9a,transparent 68%)
}

.books-v4-intro {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 22px;
    padding: 27px 32px;
    margin: 6px 0 26px;
    overflow: hidden;
    background: linear-gradient(115deg,#fffdf2 0%,#fffbe7 60%,#f8f8d5 100%);
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 38px;
    box-shadow: 0 10px 0 rgba(77,129,51,.14),0 18px 36px rgba(69,101,43,.14)
}

.books-v4-intro::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: 9%;
    top: -114px;
    background: #fff4a9;
    opacity: .26
}

.books-v4-intro::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: 24%;
    bottom: -74px;
    background: #9ee0d8;
    opacity: .13
}

.books-v4-intro-icon {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 2
}

.books-v4-intro-icon img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 6px 2px rgba(92,66,35,.14))
}

.books-v4-intro-copy {
    position: relative;
    z-index: 2
}

.books-v4-intro-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(34px,5vw,48px);
    line-height: 1;
    color: #259443;
    margin: 0 0 6px;
    text-shadow: 0 2px 0 rgba(255,255,255,.8)
}

.books-v4-intro-copy p {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    color: #5b4b43;
    max-width: 530px
}

.books-v4-leaf {
    position: absolute;
    color: #5daa32;
    font-size: 48px;
    opacity: .85;
    z-index: 2;
    line-height: 1
}

.books-v4-leaf.leaf-a {
    left: 83px;
    bottom: -9px;
    transform: rotate(31deg)
}

.books-v4-leaf.leaf-b {
    right: 24px;
    bottom: 8px;
    transform: rotate(-24deg)
}

.books-v4-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px 20px
}

.books-v4-card {
    min-width: 0;
    position: relative;
    display: block;
    text-decoration: none;
    color: #58483e;
    background: #fffefa;
    border: 3px solid rgba(255,255,255,.95);
    border-radius: 34px;
    padding: 9px 9px 17px;
    overflow: hidden;
    box-shadow: 0 9px 0 rgba(79,129,52,.17),0 16px 28px rgba(65,94,42,.13);
    transform: translateZ(0);
    transition: transform .22s var(--ease-spring),box-shadow .22s ease
}

/* Revelação ao rolar de livros e capítulos (revealOnScroll no app.js):
   continuam no layout, só invisíveis. */
.books-v4-card.is-reveal-pending,
.book-v6-chapter.is-reveal-pending {
    opacity: 0;
    transform: translateY(26px)
}

.books-v4-card.is-revealing,
.book-v6-chapter.is-revealing {
    transition: opacity .48s cubic-bezier(.22,.8,.3,1),transform .48s cubic-bezier(.22,.8,.3,1)
}

.books-v4-card:hover {
    transform: translateY(-7px) rotate(-.35deg);
    box-shadow: 0 13px 0 rgba(79,129,52,.15),0 24px 36px rgba(65,94,42,.18)
}

.books-v4-card:active {
    transform: translateY(2px) scale(.985);
    box-shadow: 0 4px 0 rgba(79,129,52,.16),0 8px 14px rgba(65,94,42,.13)
}

.books-v4-cover {
    display: block;
    position: relative;
    aspect-ratio: 1.34/1;
    border-radius: 27px;
    overflow: hidden;
    background: #def1c6
}

.books-v4-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .38s var(--ease-spring)
}

.books-v4-card:hover .books-v4-cover img {
    transform: scale(1.045)
}

.books-v4-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,255,255,.62);
    border-radius: inherit;
    pointer-events: none
}

.books-v4-cover-shine {
    position: absolute;
    inset: -70% auto auto -35%;
    width: 45%;
    height: 240%;
    transform: rotate(22deg);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    opacity: 0;
    transition: .45s ease;
    pointer-events: none
}

.books-v4-card:hover .books-v4-cover-shine {
    left: 110%;
    opacity: 1
}

.books-v4-meta {
    display: block;
    padding: 13px 10px 0;
    position: relative;
    z-index: 2
}

.books-v4-meta b {
    display: block;
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1.05;
    color: #d45132;
    text-wrap: balance
}

.books-v4-meta small {
    display: block;
    margin-top: 5px;
    font-size: 17px;
    color: #5f5149
}

.books-v4-card-leaf {
    position: absolute;
    right: 10px;
    bottom: -6px;
    color: #6fba3f;
    font-size: 37px;
    line-height: 1;
    opacity: .78;
    transform: rotate(-23deg)
}

.books-v4-sparkles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden
}

.books-v4-sparkles i {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff7a9;
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 0 14px #fff8a4;
    animation: booksTwinkle 3.6s ease-in-out infinite
}

.books-v4-sparkles i:nth-child(1) {
    left: 8%;
    top: 21%;
    animation-delay: .2s
}

.books-v4-sparkles i:nth-child(2) {
    left: 90%;
    top: 29%;
    animation-delay: 1.1s
}

.books-v4-sparkles i:nth-child(3) {
    left: 4%;
    top: 62%;
    animation-delay: 2.2s
}

.books-v4-sparkles i:nth-child(4) {
    left: 94%;
    top: 70%;
    animation-delay: .8s
}

.books-v4-sparkles i:nth-child(5) {
    left: 16%;
    top: 86%;
    animation-delay: 1.8s
}

.books-v4-sparkles i:nth-child(6) {
    left: 82%;
    top: 91%;
    animation-delay: 2.8s
}

@keyframes booksTwinkle {
    0%,100% {
        opacity: .2;
        transform: rotate(45deg) scale(.55)
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) scale(1.3)
    }
}

/* mobile-first: base (era @media (max-width: 840px)) */
    .books-v4-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 18px 15px
    }
/* fim: era @media (max-width: 840px) */

/* mobile-first: base (era @media (max-width: 600px)) */
    .bib-v3 .page-shell-v3:has(.books-v4) {
        padding-left:14px;
        padding-right: 14px
    }

    .books-v4-intro {
        grid-template-columns: 70px 1fr;
        gap: 12px;
        padding: 19px 17px;
        margin-top: 3px;
        margin-bottom: 22px;
        border-radius: 29px
    }

    .books-v4-intro-icon {
        width: 65px;
        height: 65px
    }

    .books-v4-intro-icon img {
        width: 61px;
        height: 61px
    }

    .books-v4-intro-copy h1 {
        font-size: 32px
    }

    .books-v4-intro-copy p {
        font-size: 14px;
        line-height: 1.35
    }

    .books-v4-leaf.leaf-a {
        display: none
    }

    .books-v4-leaf.leaf-b {
        font-size: 33px;
        right: 8px;
        bottom: -4px
    }

    .books-v4-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 14px 11px
    }

    .books-v4-card {
        padding: 7px 7px 13px;
        border-radius: 25px;
        border-width: 2px;
        box-shadow: 0 7px 0 rgba(79,129,52,.16),0 12px 20px rgba(65,94,42,.12)
    }

    .books-v4-cover {
        border-radius: 20px;
        aspect-ratio: 1.26/1
    }

    .books-v4-meta {
        padding: 10px 7px 0
    }

    .books-v4-meta b {
        font-size: 21px
    }

    .books-v4-meta small {
        font-size: 14px;
        margin-top: 4px
    }

    .books-v4-card-leaf {
        display: none
    }
/* fim: era @media (max-width: 600px) */

@media(max-width: 370px) {
    .books-v4-grid {
        gap:11px 8px
    }

    .books-v4-meta b {
        font-size: 19px
    }

    .books-v4-meta small {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .books-v4-sparkles i,.books-v4-card,.books-v4-cover img,.books-v4-cover-shine {
        animation: none!important;
        transition: none!important
    }
}

/* ========================================================================== */
/* Home — rebuild v3.2 (layout aprovado)                                      */
/* ========================================================================== */
.bib-v3 .page-shell-v3:has(.home-v4) {
    max-width: 980px;
    position: relative;
}

.bib-v3 .page-shell-v3:has(.home-v4)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(rgba(170,226,118,.9),rgba(160,219,103,.92));
}

.home-v4 {
    position: relative;
    padding-bottom: 24px;
    isolation: isolate
}

.home-v4::before,.home-v4::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    opacity: .28;
    filter: blur(3px)
}

.home-v4::before {
    width: 280px;
    height: 280px;
    left: -110px;
    top: 190px;
    background: radial-gradient(circle,#f3ffbe,transparent 70%)
}

.home-v4::after {
    width: 360px;
    height: 360px;
    right: -150px;
    top: 580px;
    background: radial-gradient(circle,#d4f6b5,transparent 72%)
}

.home-v4-sparkles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden
}

.home-v4-sparkles i {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff6a6;
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(255,248,164,.95);
    animation: homeTwinkle 3.8s ease-in-out infinite
}

.home-v4-sparkles i:nth-child(1) {
    left: 6%;
    top: 17%;
    animation-delay: .15s
}

.home-v4-sparkles i:nth-child(2) {
    left: 89%;
    top: 13%;
    animation-delay: 1.1s
}

.home-v4-sparkles i:nth-child(3) {
    left: 12%;
    top: 49%;
    animation-delay: 2.2s
}

.home-v4-sparkles i:nth-child(4) {
    left: 92%;
    top: 60%;
    animation-delay: .7s
}

.home-v4-sparkles i:nth-child(5) {
    left: 8%;
    top: 78%;
    animation-delay: 1.7s
}

.home-v4-sparkles i:nth-child(6) {
    left: 84%;
    top: 86%;
    animation-delay: 2.8s
}

.home-v4-hero,.home-v4-callout,.home-v4-item {
    background: linear-gradient(180deg,rgba(255,254,246,.98),rgba(255,251,234,.96));
    border: 3px solid rgba(255,255,255,.92);
    box-shadow: 0 10px 0 rgba(94,146,58,.13),0 18px 34px rgba(79,111,51,.14);
}

.home-v4-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    align-items: center;
    gap: 16px;
    padding: 34px 38px 28px;
    margin: 8px 0 24px;
    border-radius: 42px;
    overflow: hidden;
}

.home-v4-hero::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    right: 21%;
    top: -118px;
    background: #fff4ab;
    opacity: .4
}

.home-v4-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    background: linear-gradient(180deg,transparent,rgba(171,223,118,.24));
    pointer-events: none
}

.home-v4-hero-copy {
    position: relative;
    z-index: 2
}

.home-v4-hero-copy span {
    display: block;
    font-size: 30px;
    color: #4d4038
}

.home-v4-hero-copy h1 {
    margin: 4px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(72px,10vw,102px);
    line-height: .88;
    color: #f4cf3c;
    -webkit-text-stroke: 2px #5b391f;
    text-shadow: 0 5px 0 rgba(83,58,30,.16)
}

.home-v4-hero-copy p {
    margin: 0;
    max-width: 460px;
    font-size: 24px;
    line-height: 1.34;
    color: #564840
}

.home-v4-hero>img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 290px;
    justify-self: end;
    filter: drop-shadow(0 10px 14px rgba(79,63,35,.16));
    animation: v3Float 4s ease-in-out infinite
}

.home-v4-leaves {
    position: absolute;
    bottom: 14px;
    font-size: 34px;
    color: #7bbe4a;
    opacity: .85;
    line-height: 1;
    z-index: 2
}

.home-v4-leaves.left {
    left: 28px;
    transform: rotate(-18deg)
}

.home-v4-leaves.right {
    right: 24px;
    transform: rotate(14deg)
}

.home-v4-callout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 240px;
    align-items: center;
    gap: 16px;
    border-radius: 38px;
    padding: 26px 32px;
    margin-bottom: 28px;
    overflow: hidden;
    position: relative
}

.home-v4-callout::before {
    content: "";
    position: absolute;
    inset: auto auto -44px 18%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #fff5b2;
    opacity: .22
}

.home-v4-callout-copy,.home-v4-player-copy {
    position: relative;
    z-index: 2
}

.home-v4-callout h2,.home-v4-player-copy h2 {
    margin: 0 0 18px;
    font-size: 31px;
    line-height: 1.28;
    color: #4d4038
}

.home-v4-callout img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 210px;
    justify-self: end;
    filter: drop-shadow(0 10px 14px rgba(79,63,35,.14))
}

.home-v4-player-card {
    grid-template-columns: minmax(0,1fr) 330px
}

.home-v4-player-copy p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.4;
    color: #6a5e57;
    max-width: 500px
}

.home-v4-wallet-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    position: relative;
    z-index: 2
}

.home-v4-wallet-grid>div {
    background: #fffef7;
    border: 2px solid rgba(239,227,184,.9);
    border-radius: 22px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 6px 0 rgba(107,146,63,.1)
}

.home-v4-wallet-grid b {
    display: block;
    font-size: 26px;
    color: #3e332d
}

.home-v4-wallet-grid small {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    color: #7a6d65
}

.home-v4-section {
    padding-top: 2px
}

.home-v4-title {
    margin: 0 0 18px;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(40px,7vw,62px);
    line-height: 1;
    color: #289242;
    text-shadow: 0 3px 0 rgba(255,255,255,.55)
}

.home-v4-list {
    display: grid;
    gap: 18px
}

.home-v4-item {
    position: relative;
    display: grid;
    grid-template-columns: 108px minmax(0,1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 126px;
    padding: 18px 26px;
    border-radius: 34px;
    text-decoration: none;
    color: #4f433d;
    overflow: hidden;
    transition: transform .2s var(--ease-spring),box-shadow .2s ease
}

.home-v4-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 0 rgba(94,146,58,.12),0 22px 36px rgba(79,111,51,.16)
}

.home-v4-item:active {
    transform: translateY(2px) scale(.99)
}

.home-v4-item img {
    width: 94px;
    height: 94px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 5px 8px rgba(83,65,35,.12));
    transition: transform .25s var(--ease-spring)
}

.home-v4-item:hover img {
    transform: scale(1.06) rotate(-4deg)
}

.home-v4-item span {
    display: block;
    min-width: 0
}

.home-v4-item b {
    display: block;
    font-size: clamp(30px,4.2vw,42px);
    line-height: 1.05;
    color: #4b4038
}

.home-v4-item small {
    display: block;
    margin-top: 7px;
    font-size: 22px;
    line-height: 1.28;
    color: #6d6158
}

.home-v4-item i {
    font-style: normal;
    font-size: 52px;
    line-height: 1;
    color: #5c4d45;
    opacity: .88;
    padding-left: 10px
}

.home-v4-item em {
    position: absolute;
    right: 84px;
    top: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffe8bc;
    color: #a85c22;
    font-size: 18px;
    font-style: normal;
    box-shadow: 0 4px 0 rgba(173,109,38,.08)
}

@keyframes homeTwinkle {
    0%,100% {
        opacity: .2;
        transform: rotate(45deg) scale(.55)
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) scale(1.25)
    }
}

/* mobile-first: base (era @media (max-width: 900px)) */
    .home-v4-hero {
        grid-template-columns:minmax(0,1fr) 240px
    }

    .home-v4-callout {
        grid-template-columns: minmax(0,1fr) 190px
    }

    .home-v4-player-card {
        grid-template-columns: 1fr
    }
/* fim: era @media (max-width: 900px) */

/* mobile-first: base (era @media (max-width: 600px)) */
    .bib-v3 .page-shell-v3:has(.home-v4) {
        padding-left:14px;
        padding-right: 14px
    }

    .home-v4-hero {
        grid-template-columns: minmax(0,1fr) 146px;
        gap: 10px;
        padding: 20px 16px 16px;
        border-radius: 32px;
        margin-top: 4px;
        margin-bottom: 18px
    }

    .home-v4-hero::before {
        width: 165px;
        height: 165px;
        right: 12%;
        top: -84px
    }

    .home-v4-hero::after {
        height: 58px
    }

    .home-v4-hero-copy span {
        font-size: 24px
    }

    .home-v4-hero-copy h1 {
        font-size: 72px;
        margin: 2px 0 10px
    }

    .home-v4-hero-copy p {
        font-size: 15px;
        max-width: 210px;
        line-height: 1.35
    }

    .home-v4-hero>img {
        max-width: 145px;
        align-self: end
    }

    .home-v4-leaves {
        font-size: 24px;
        bottom: 8px
    }

    .home-v4-leaves.left {
        left: 10px
    }

    .home-v4-leaves.right {
        right: 12px
    }

    .home-v4-callout {
        grid-template-columns: minmax(0,1fr) 120px;
        padding: 18px 16px;
        gap: 8px;
        border-radius: 28px;
        margin-bottom: 20px
    }

    .home-v4-callout h2,.home-v4-player-copy h2 {
        font-size: 20px;
        line-height: 1.35;
        margin-bottom: 12px
    }

    .home-v4-callout img {
        max-width: 112px
    }

    .home-v4-player-copy p {
        font-size: 14px;
        margin-bottom: 12px
    }

    .home-v4-wallet-grid {
        gap: 10px
    }

    .home-v4-wallet-grid>div {
        padding: 12px 8px;
        border-radius: 18px
    }

    .home-v4-wallet-grid b {
        font-size: 20px
    }

    .home-v4-wallet-grid small {
        font-size: 12px
    }

    .home-v4-title {
        font-size: 46px;
        margin-bottom: 14px
    }

    .home-v4-list {
        gap: 14px
    }

    .home-v4-item {
        grid-template-columns: 80px minmax(0,1fr) auto;
        gap: 12px;
        min-height: 96px;
        padding: 14px 16px;
        border-radius: 28px
    }

    .home-v4-item img {
        width: 70px;
        height: 70px
    }

    .home-v4-item b {
        font-size: 28px
    }

    .home-v4-item small {
        font-size: 16px;
        margin-top: 5px
    }

    .home-v4-item i {
        font-size: 38px;
        padding-left: 0
    }

    .home-v4-item em {
        right: 52px;
        top: 12px;
        font-size: 12px;
        padding: 5px 10px
    }
/* fim: era @media (max-width: 600px) */

@media(max-width: 390px) {
    .home-v4-hero-copy span {
        font-size:22px
    }

    .home-v4-hero-copy h1 {
        font-size: 62px
    }

    .home-v4-hero-copy p {
        max-width: 180px
    }

    .home-v4-item b {
        font-size: 24px
    }

    .home-v4-item small {
        font-size: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .home-v4-item,.home-v4-item img,.home-v4-sparkles i,.home-v4-hero>img {
        transition: none!important;
        animation: none!important
    }
}

/* ========================================================================== */
/* Home aprovada — reprodução do layout validado                              */
/* ========================================================================== */
.bib-v3 .page-shell-v3:has(.home-approved) {
    max-width: 760px;
    padding-top: 12px;
    position: relative
}

.bib-v3 .page-shell-v3:has(.home-approved)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: #a7df7d url('../img/backgrounds/bg-home.webp') center top/760px auto repeat-y
}

.bib-v3:has(.home-approved) .topbar-v3 {
    background: rgba(168,223,120,.70);
    backdrop-filter: blur(8px)
}

.home-approved {
    padding-bottom: 40px
}

.home-approved-hero,.home-approved-account,.home-approved-action,.home-approved-more>a {
    background: rgba(255,253,246,.97);
    border: 2px solid rgba(255,255,255,.94);
    box-shadow: 0 7px 0 rgba(75,119,49,.16),0 13px 24px rgba(63,91,40,.10)
}

.home-approved-hero {
    display: grid;
    grid-template-columns: minmax(0,1.28fr) minmax(145px,.72fr);
    align-items: center;
    min-height: 290px;
    padding: 30px 28px 20px;
    border-radius: 34px;
    overflow: hidden;
    position: relative;
    margin-bottom: 22px
}

.home-approved-hero:after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -28px;
    height: 92px;
    border-radius: 50% 50% 0 0/60% 60% 0 0;
    background: rgba(164,219,103,.42)
}

.home-approved-copy {
    position: relative;
    z-index: 2
}

.home-approved-copy>span {
    font-size: 27px;
    line-height: 1;
    color: #51443d
}

.home-approved-copy h1 {
    font-family: var(--font-display);
    font-size: 78px;
    line-height: .88;
    margin: 8px 0 20px;
    color: #ffdc49;
    -webkit-text-stroke: 2px #50331e;
    text-shadow: 0 4px 0 rgba(78,51,28,.15)
}

.home-approved-copy p {
    font-size: 21px;
    line-height: 1.42;
    margin: 0;
    max-width: 380px;
    color: #554943
}

.home-approved-hero>img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 235px;
    justify-self: end;
    align-self: end;
    filter: drop-shadow(0 10px 11px rgba(62,68,30,.13))
}

.home-approved-account {
    min-height: 178px;
    border-radius: 32px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 180px;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    overflow: hidden
}

.home-approved-account h2 {
    font-size: 24px;
    line-height: 1.35;
    margin: 0 0 18px;
    color: #50443e
}

.home-approved-account>img {
    width: 165px;
    height: 145px;
    object-fit: contain;
    justify-self: end
}

.home-approved-yellow {
    display: inline-block;
    background: linear-gradient(#ffe65b,#ffd13d);
    color: #c44d2d;
    text-decoration: none;
    border-radius: 23px;
    padding: 15px 28px;
    font-size: 22px;
    box-shadow: 0 5px 0 rgba(154,97,25,.16);
    transition: .16s var(--ease-spring)
}

.home-approved-yellow:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(154,97,25,.16)
}

.home-approved-account.is-logged {
    grid-template-columns: 1fr
}

.home-approved-account.is-logged p {
    margin: 0 0 16px;
    color: #6e625b;
    font-size: 16px
}

.home-approved-balances {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.home-approved-balances span {
    background: #fff7df;
    border-radius: 16px;
    padding: 10px;
    text-align: center
}

.home-approved-balances b,.home-approved-balances small {
    display: block
}

.home-approved-balances b {
    font-size: 21px
}

.home-approved-balances small {
    font-size: 12px;
    color: #756960
}

.home-approved-heading {
    font-family: var(--font-display);
    font-size: 41px;
    line-height: 1;
    margin: 0 0 18px;
    text-align: center;
    color: #268f40;
    text-shadow: 0 2px 0 rgba(255,255,255,.6)
}

.home-approved-actions {
    display: grid;
    gap: 14px
}

.home-approved-action {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) 28px;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    border-radius: 28px;
    padding: 13px 18px;
    text-decoration: none;
    color: #4e443f;
    transition: .18s var(--ease-spring)
}

.home-approved-action:hover {
    transform: translateY(-3px)
}

.home-approved-action:active {
    transform: translateY(2px) scale(.99)
}

.home-approved-action>img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 5px 4px rgba(77,62,38,.12))
}

.home-approved-action span {
    min-width: 0
}

.home-approved-action b {
    display: block;
    font-size: 27px;
    line-height: 1.05;
    color: #514640
}

.home-approved-action small {
    display: block;
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.25;
    color: #74675f
}

.home-approved-action i {
    font-style: normal;
    font-size: 40px;
    color: #5e5149
}

.home-approved-action em {
    position: absolute;
    right: 52px;
    top: 15px;
    background: #ffe2b6;
    color: #a85a22;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-style: normal
}

.home-approved-books {
    margin-top: 34px
}

.home-approved-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px
}

.home-approved-section-head h2 {
    font-family: var(--font-display);
    font-size: 35px;
    line-height: 1;
    color: #268f40;
    margin: 0
}

.home-approved-section-head a {
    color: #b84c2e;
    text-decoration: none;
    font-size: 15px
}

.home-approved-book-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

.home-approved-book {
    background: #fffdf7;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 22px;
    padding: 7px 7px 12px;
    text-decoration: none;
    color: #514640;
    box-shadow: 0 6px 0 rgba(75,119,49,.14),0 10px 20px rgba(63,91,40,.09);
    overflow: hidden
}

.home-approved-book>div {
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    background: #dfeccc
}

.home-approved-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.home-approved-book b {
    display: block;
    font-family: var(--font-display);
    font-size: 19px;
    color: #d05233;
    margin: 9px 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.home-approved-book small {
    display: block;
    margin: 3px 4px 0;
    color: #6f625a;
    font-size: 12px
}

.home-approved-more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 26px
}

.home-approved-more>a {
    display: grid;
    grid-template-columns: 70px 1fr 22px;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 12px 15px;
    border-radius: 25px;
    text-decoration: none;
    color: #514640
}

.home-approved-more img {
    width: 64px;
    height: 64px;
    object-fit: contain
}

.home-approved-more b {
    display: block;
    font-size: 20px
}

.home-approved-more small {
    display: block;
    font-size: 13px;
    color: #75685f;
    margin-top: 4px
}

.home-approved-more i {
    font-style: normal;
    font-size: 32px
}

/* mobile-first: base (era @media (max-width: 600px)) */
    .bib-v3 .page-shell-v3:has(.home-approved) {
        padding:10px 12px 48px
    }

    .bib-v3 .page-shell-v3:has(.home-approved)::before {
        background-size: 520px auto
    }

    .home-approved-hero {
        grid-template-columns: minmax(0,1.2fr) 132px;
        min-height: 205px;
        padding: 20px 18px 14px;
        border-radius: 28px;
        margin-bottom: 18px
    }

    .home-approved-hero:after {
        height: 64px;
        bottom: -23px
    }

    .home-approved-copy>span {
        font-size: 20px
    }

    .home-approved-copy h1 {
        font-size: 57px;
        margin: 4px 0 13px;
        -webkit-text-stroke: 1.5px #50331e
    }

    .home-approved-copy p {
        font-size: 14px;
        line-height: 1.38;
        max-width: 215px
    }

    .home-approved-hero>img {
        max-width: 132px;
        
        position: absolute
    }

    .home-approved-account {
        grid-template-columns: minmax(0,1fr) 105px;
        min-height: 138px;
        padding: 17px 17px;
        border-radius: 27px;
        gap: 5px;
        margin-bottom: 25px
    }

    .home-approved-account h2 {
        font-size: 17px;
        line-height: 1.36;
        margin-bottom: 13px
    }

    .home-approved-account>img {
        width: 55px;
        height: 55px
    }

    .home-approved-yellow {
        font-size: 17px;
        padding: 13px 18px;
        border-radius: 20px
    }

    .home-approved-balances {
        grid-template-columns: repeat(2,1fr)
    }

    .home-approved-heading {
        font-size: 32px;
        margin-bottom: 15px
    }

    .home-approved-actions {
        gap: 12px
    }

    .home-approved-action {
        grid-template-columns: 72px minmax(0,1fr) 20px;
        min-height: 92px;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 24px
    }

    .home-approved-action>img {
        width: 66px;
        height: 66px
    }

    .home-approved-action b {
        font-size: 22px
    }

    .home-approved-action small {
        font-size: 14px;
        margin-top: 4px
    }

    .home-approved-action i {
        font-size: 31px
    }

    .home-approved-action em {
        right: 42px;
        top: 11px;
        font-size: 9px;
        padding: 4px 7px
    }

    .home-approved-books {
        margin-top: 29px
    }

    .home-approved-section-head h2 {
        font-size: 29px
    }

    .home-approved-section-head a {
        font-size: 13px
    }

    .home-approved-book-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 11px
    }

    .home-approved-book {
        border-radius: 20px
    }

    .home-approved-book b {
        font-size: 19px
    }

    .home-approved-book small {
        font-size: 12px
    }

    .home-approved-more {
        grid-template-columns: 1fr;
        margin-top: 20px
    }

    .home-approved-more>a {
        min-height: 88px
    }
/* fim: era @media (max-width: 600px) */

@media(max-width: 370px) {
    .home-approved-copy h1 {
        font-size:51px
    }

    .home-approved-action b {
        font-size: 20px
    }

    .home-approved-book b {
        font-size: 17px
    }
}

/* ========================================================================== */
/* Home v3.4 — riqueza visual fiel ao layout aprovado                         */
/* ========================================================================== */
.bib-v3 .page-shell-v3:has(.home-rich) {
    max-width: 780px;
    padding-top: 12px;
    position: relative
}

.bib-v3 .page-shell-v3:has(.home-rich)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background: #a8df78 url('../img/backgrounds/bg-home.webp') center top/760px auto repeat-y;
}

.bib-v3:has(.home-rich) .topbar-v3 {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.bib-v3:has(.home-rich) .topbar-v3.scrolled {
    background: rgba(168,223,120,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(55,93,39,.12)
}

.home-rich {
    position: relative;
    padding-bottom: 56px
}

.home-rich .home-approved-hero, .home-rich .home-approved-account, .home-rich .home-approved-action, .home-rich .home-approved-more>a, .home-rich .home-approved-book {
    border: 2px solid rgba(246,214,116,.9);
    box-shadow: 0 8px 0 rgba(92,135,54,.16),0 15px 30px rgba(77,105,47,.13),inset 0 1px 0 rgba(255,255,255,.95);
}

.home-rich .home-approved-hero {
    min-height: 315px;
    padding: 32px 32px 20px;
    border-radius: 38px;
    background: linear-gradient(180deg,rgba(255,254,247,.98),rgba(255,251,236,.98));
    overflow: hidden;
}

.home-rich .home-approved-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background: radial-gradient(circle at 15% 12%,#fff8a9 0 5px,transparent 6px),radial-gradient(circle at 73% 28%,#f8d95a 0 4px,transparent 5px);
}

.home-rich .home-approved-hero:after {
    height: 115px;
    bottom: -46px;
    background: linear-gradient(180deg,rgba(170,224,114,.22),rgba(132,198,75,.42));
    border-radius: 50% 50% 0 0/58% 58% 0 0;
}

.home-decor {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    user-select: none
}

.home-decor-corner {
    width: 180px;
    height: 180px;
    object-fit: contain;
    opacity: .9
}

.hero-corner {
    left: -52px;
    bottom: -55px;
    transform: rotate(2deg)
}

.home-decor-spark {
    width: 92px;
    height: 92px;
    object-fit: contain;
    animation: homeDecorSparkle 3.2s ease-in-out infinite
}

.hero-spark {
    right: 29%;
    top: 30px;
    opacity: .85
}

.home-rich .home-approved-copy {
    z-index: 5
}

.home-rich .home-approved-copy>span {
    font-size: 31px;
    letter-spacing: .2px
}

.home-rich .home-approved-copy h1 {
    font-size: 88px;
    margin: 7px 0 18px;
    color: #ffda42;
    -webkit-text-stroke: 2px #54331e;
    text-shadow: 0 5px 0 rgba(96,57,25,.16),0 8px 20px rgba(229,173,31,.13)
}

.home-rich .home-approved-copy p {
    font-size: 22px;
    line-height: 1.38;
    max-width: 390px
}

.home-rich .home-hero-lion {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 255px;
    justify-self: end;
    align-self: end;
    filter: drop-shadow(0 12px 12px rgba(83,61,31,.18));
    animation: v3Float 4s ease-in-out infinite
}

.home-rich .home-approved-account {
    position: relative;
    min-height: 190px;
    padding: 25px 28px;
    border-radius: 34px;
    background: linear-gradient(180deg,#fffdf4,#fff9e8);
    overflow: hidden;
}

.home-rich .home-approved-account:after {
    content: "";
    position: absolute;
    right: -45px;
    top: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fff0a2;
    opacity: .17
}

.account-leaf {
    width: 82px;
    height: 82px;
    left: -25px;
    bottom: -17px;
    transform: rotate(28deg);
    opacity: .78
}

.account-spark {
    right: 22px;
    top: 12px;
    opacity: .65
}

.home-rich .home-account-reward {
    position: relative;
    z-index: 3;
    width: 176px;
    height: 154px;
    object-fit: contain;
    justify-self: end;
    filter: drop-shadow(0 10px 10px rgba(75,54,29,.16));
    animation: rewardFloat 3.7s ease-in-out infinite
}

.home-rich .home-approved-account h2 {
    font-size: 27px;
    line-height: 1.33;
    max-width: 455px
}

.home-rich .home-approved-yellow {
    border: 2px solid rgba(255,196,35,.85);
    padding: 16px 30px;
    font-size: 23px;
    background: linear-gradient(180deg,#ffe961,#ffd136);
    box-shadow: 0 6px 0 rgba(172,105,25,.16),0 10px 18px rgba(213,157,35,.12)
}

.home-rich .home-approved-heading {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    font-size: 45px;
    margin: 1px 0 20px
}

.home-rich .home-approved-heading:before, .home-rich .home-approved-heading:after, .home-rich .decorated-title h2:before, .home-rich .decorated-title h2:after, .home-rich .home-extra-title h2:before, .home-rich .home-extra-title h2:after {
    content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background: none;
    vertical-align: middle;
}

.home-rich .home-approved-heading:before {
    transform: rotate(-52deg)
}

.home-rich .home-approved-heading:after {
    transform: scaleX(-1) rotate(-52deg)
}

.home-rich .home-approved-actions {
    gap: 16px
}

.home-rich .home-approved-action {
    min-height: 124px;
    padding: 15px 20px;
    grid-template-columns: 102px minmax(0,1fr) 34px;
    gap: 17px;
    border-radius: 31px;
    background: linear-gradient(180deg,#fffef8,#fffaf0);
    overflow: hidden;
}

.home-rich .home-approved-action:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
    pointer-events: none
}

.home-rich .home-approved-action>img:first-child {
    width: 94px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 7px 6px rgba(78,60,34,.15));
    transition: transform .25s var(--ease-spring)
}

.home-rich .home-approved-action:hover>img:first-child {
    transform: scale(1.07) rotate(-4deg)
}

.home-rich .home-approved-action b {
    font-size: 30px
}

.home-rich .home-approved-action small {
    font-size: 18px;
    line-height: 1.3
}

.home-rich .home-approved-action em {
    right: 64px;
    top: 15px;
    padding: 6px 11px;
    font-size: 11px;
    border: 1px solid rgba(232,182,102,.4)
}

.home-chevron {
    width: 16px;
    height: 16px;
    border-right: 4px solid #594b43;
    border-top: 4px solid #594b43;
    transform: rotate(45deg);
    display: block;
    justify-self: center
}

.home-action-spark {
    position: absolute!important;
    right: 33px!important;
    bottom: 12px!important;
    width: 28px!important;
    height: 28px!important;
    object-fit: contain;
    opacity: .85;
    animation: homeDecorSparkle 3s ease-in-out infinite
}

.home-roleta-action {
    background: linear-gradient(180deg,#fffdf8,#fbf2ff)!important;
    border-color: #e8ccff!important
}

.home-roleta-action b {
    color: #7d3cc0!important
}

.home-rich .home-approved-books {
    margin-top: 38px;
    padding: 20px 17px 22px;
    border-radius: 34px;
    background: rgba(255,252,238,.82);
    border: 2px solid rgba(245,218,136,.68);
    box-shadow: 0 8px 0 rgba(91,135,53,.1)
}

.home-rich .home-approved-section-head {
    align-items: center;
    margin-bottom: 18px
}

.home-rich .home-approved-section-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 37px
}

.home-rich .decorated-title h2:before {
    transform: rotate(-52deg);
    width: 32px;
    height: 32px
}

.home-rich .decorated-title h2:after {
    transform: scaleX(-1) rotate(-52deg);
    width: 32px;
    height: 32px
}

.home-rich .home-approved-section-head>a {
    background: #43a64e;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(51,113,56,.16)
}

.home-rich .home-approved-book-grid {
    gap: 13px
}

.home-rich .home-approved-book {
    padding: 7px 7px 13px;
    border-radius: 24px;
    background: linear-gradient(#fffef9,#fff8e9);
    border-color: #efc74d;
    transition: .2s var(--ease-spring)
}

.home-rich .home-approved-book:hover {
    transform: translateY(-5px)
}

.home-rich .home-approved-book>div {
    border-radius: 17px;
    position: relative;
    overflow: hidden
}

.home-rich .home-approved-book>div:after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
    border-radius: inherit
}

.home-rich .home-approved-book b {
    font-size: 21px;
    color: #d45630
}

.home-rich .home-approved-book small {
    font-size: 13px
}

.home-extra-title {
    margin: 32px 0 14px;
    text-align: center
}

.home-extra-title h2 {
    font-family: var(--font-display);
    color: #268f40;
    font-size: 36px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.home-rich .home-extra-title h2:before {
    transform: rotate(-52deg);
    width: 30px;
    height: 30px
}

.home-rich .home-extra-title h2:after {
    transform: scaleX(-1) rotate(-52deg);
    width: 30px;
    height: 30px
}

.home-rich-more {
    gap: 16px
}

.home-rich-more>a {
    position: relative;
    min-height: 112px;
    padding: 14px 18px;
    grid-template-columns: 82px 1fr 28px;
    border-radius: 29px;
    background: linear-gradient(180deg,#fffef8,#fff9ed);
    overflow: hidden
}

.home-rich-more>a:after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 90px;
    height: 90px;
    background: none;
    opacity: .22
}

.home-rich-more img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(77,59,33,.13))
}

.home-rich-more b {
    font-size: 23px
}

.home-rich-more small {
    font-size: 14px
}

@keyframes homeDecorSparkle {
    0%,100% {
        transform: scale(.84) rotate(-4deg);
        opacity: .48
    }

    50% {
        transform: scale(1.08) rotate(4deg);
        opacity: 1
    }
}

@keyframes rewardFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-7px) rotate(1.5deg)
    }
}

/* mobile-first: base (era @media (max-width: 600px)) */
    .bib-v3 .page-shell-v3:has(.home-rich) {
        padding:10px 12px 54px
    }

    .bib-v3 .page-shell-v3:has(.home-rich)::before {
        background-size: 100% auto
    }

    .home-rich .home-approved-hero {
        grid-template-columns: minmax(0,1.25fr) 145px;
        min-height: 232px;
        padding: 21px 18px 16px;
        border-radius: 29px;
        margin-bottom: 20px
    }

    .home-rich .home-approved-copy>span {
        font-size: 22px
    }

    .home-rich .home-approved-copy h1 {
        font-size: 63px;
        margin: 4px 0 13px;
        -webkit-text-stroke: 1.6px #54331e
    }

    .home-rich .home-approved-copy p {
        font-size: 15px;
        max-width: 205px
    }

    .home-rich .home-hero-lion {
        max-width: 145px
    }

    .hero-corner {
        width: 120px;
        height: 120px;
        left: -37px;
        bottom: -38px
    }

    .hero-spark {
        width: 57px;
        height: 57px;
        right: 25%;
        top: 27px
    }

    .home-rich .home-approved-account {
        grid-template-columns: minmax(0,1fr) 112px;
        min-height: 152px;
        padding: 18px 17px;
        border-radius: 28px;
        margin-bottom: 27px
    }

    .home-rich .home-approved-account h2 {
        font-size: 19px;
        line-height: 1.36
    }

    .home-rich .home-account-reward {
        width: 112px;
        height: 104px
    }

    .home-rich .home-approved-yellow {
        font-size: 18px;
        padding: 13px 18px
    }

    .account-leaf {
        width: 56px;
        height: 56px
    }

    .home-rich .home-approved-heading {
        font-size: 34px;
        gap: 5px
    }

    .home-rich .home-approved-heading:before,.home-rich .home-approved-heading:after {
        width: 25px;
        height: 25px
    }

    .home-rich .home-approved-action {
        grid-template-columns: 76px minmax(0,1fr) 25px;
        min-height: 104px;
        gap: 11px;
        padding: 12px 14px;
        border-radius: 25px
    }

    .home-rich .home-approved-action>img:first-child {
        width: 72px;
        height: 72px
    }

    .home-rich .home-approved-action b {
        font-size: 24px
    }

    .home-rich .home-approved-action small {
        font-size: 14px
    }

    .home-rich .home-approved-action em {
        right: 47px;
        top: 11px;
        font-size: 9px;
        padding: 4px 7px
    }

    .home-chevron {
        width: 13px;
        height: 13px;
        border-width: 3px
    }

    .home-action-spark {
        right: 28px!important;
        bottom: 9px!important;
        width: 21px!important;
        height: 21px!important
    }

    .home-rich .home-approved-books {
        margin-top: 30px;
        padding: 15px 10px 17px;
        border-radius: 28px
    }

    .home-rich .home-approved-section-head h2 {
        font-size: 28px
    }

    .home-rich .decorated-title h2:before,.home-rich .decorated-title h2:after {
        width: 22px;
        height: 22px
    }

    .home-rich .home-approved-section-head>a {
        font-size: 11px;
        padding: 6px 10px
    }

    .home-rich .home-approved-book-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 10px
    }

    .home-rich .home-approved-book b {
        font-size: 19px
    }

    .home-rich .home-approved-book small {
        font-size: 12px
    }

    .home-extra-title {
        margin-top: 27px
    }

    .home-extra-title h2 {
        font-size: 30px
    }

    .home-rich-more {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .home-rich-more>a {
        min-height: 94px;
        grid-template-columns: 68px 1fr 24px;
        padding: 11px 14px
    }

    .home-rich-more img {
        width: 62px;
        height: 62px
    }

    .home-rich-more b {
        font-size: 21px
    }

    .home-rich-more small {
        font-size: 13px
    }
/* fim: era @media (max-width: 600px) */

@media(max-width: 380px) {
    .home-rich .home-approved-copy h1 {
        font-size:56px
    }

    .home-rich .home-approved-heading {
        font-size: 30px
    }

    .home-rich .home-approved-action b {
        font-size: 22px
    }
}

/* cadastro/login: validação e textos auxiliares */
.v3-field-help,
.v3-password-feedback {
    display: block;
    margin: 8px 4px 0;
    font-size: 13px;
    line-height: 1.35;
    color: #7b7168;
}

.v3-password-feedback.is-error {
    color: #b73535;
    font-weight: 700;
}

.v3-password-feedback.is-ok {
    color: #397a35;
    font-weight: 700;
}

.v3-auth-panel input.is-invalid,
.v3-auth-panel select.is-invalid {
    outline-color: #d95151;
    box-shadow: 0 5px 0 rgba(217,81,81,.14);
}

/* Cadastro e login: "Voltar" redondo (imagem) dentro do painel, no canto
   superior esquerdo, a 10px do topo e da esquerda do .v3-auth-panel
   (position:relative). Absoluto para não empurrar o leão para baixo; o leão é
   centralizado e não chega a esse canto.
   Seletor com > para vencer o .v3-auth-back{position:static} da base mobile
   sem depender da ordem do arquivo. 52px de alvo de toque. */
.v3-auth-panel > .v3-auth-back {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: block;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 50%;
    line-height: 0
}

.v3-auth-panel > .v3-auth-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.v3-auth-panel > .v3-auth-back:focus-visible {
    outline: 3px solid #2f7fd6;
    outline-offset: 2px
}

/* Cadastro: rótulo ligado ao campo por for/id (o olho não pode morar dentro do <label>). */
.v3-auth-field > label {
    display: block;
}

.v3-field-error {
    display: block;
    margin: 8px 4px 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    color: #b73535;
}

/* Enviar: o botão da Loja (.loja3-buy.is-small), que já vem com largura total.
   Aqui só o respiro que o .v3-btn tinha no formulário. */
.v3-auth-panel .v3-auth-submit {
    margin-top: 6px
}

/* Senha com botão de mostrar/ocultar dentro do campo. */
.v3-password-field {
    position: relative;
    display: block;
    margin-top: 5px
}

.v3-auth-panel .v3-password-field input {
    margin-top: 0;
    padding-right: 60px
}

/* O Edge desenha um olho nativo próprio: ficariam dois. */
.v3-password-field input::-ms-reveal {
    display: none
}

.v3-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #8a7465;
    cursor: pointer
}

.v3-password-toggle[hidden] {
    display: none
}

.v3-password-toggle:hover {
    background: #f4eee3;
    color: #b04b2d
}

.v3-password-toggle:focus-visible {
    outline: 3px solid #2f7fd6;
    outline-offset: 1px
}

.v3-password-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* Olho aberto = "mostrar"; olho cortado = senha visível, "ocultar". */
.v3-password-toggle [data-icon-hide],
.v3-password-toggle[data-visible="true"] [data-icon-show] {
    display: none
}

.v3-password-toggle[data-visible="true"] [data-icon-hide] {
    display: block
}

.v3-user-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 4px 0 8px;
}

.v3-user-identity span,
.v3-user-identity strong {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.v3-user-identity span {
    background: rgba(255,255,255,.72);
    color: #7b6355;
}

.v3-user-identity strong {
    background: #fff0a8;
    color: #75501d;
}


/* Biblinha v3.1 — Roleta diária final aprovada */
.bib-v3 .roulette-v4{
    width:min(100%,760px);
    margin:0 auto;
    min-height:100vh;
    min-height:100dvh;
    border-radius:0;
    padding:20px 18px 34px;
    box-shadow:none;
    background:url('../img/backgrounds/bg-roulette.webp') center top/cover no-repeat;
}

.bib-v3 .roulette-v4::before{
    display:none;
}

.bib-v3 .roulette-v4 .roulette-topbar-art{
    display:grid;
    grid-template-columns:72px 1fr 72px;
    align-items:start;
    gap:14px;
    margin-bottom:12px;
}

.bib-v3 .roulette-v4 .roulette-icon-button{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
}

.bib-v3 .roulette-v4 .roulette-icon-button img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 5px 0 rgba(107,84,25,.12));
}

.bib-v3 .roulette-v4 .roulette-top-center{
    position:relative;
    min-height:132px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-top:40px;
}

.bib-v3 .roulette-v4 .roulette-top-progress{
    width:min(100%,392px);
    height:auto;
    display:block;
}

.bib-v3 .roulette-v4 .roulette-top-mascot{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:112px;
    height:auto;
    filter:drop-shadow(0 6px 10px rgba(95,78,24,.18));
}

.bib-v3 .roulette-v4 .roulette-title-art{
    width:min(100%,690px);
    margin:0 auto 12px;
}

.bib-v3 .roulette-v4 .roulette-stage{
    width:min(calc(96 * var(--app-vw)),540px);
    margin:0 auto;
    aspect-ratio:1;
    position:relative;
    cursor:pointer;
    touch-action:manipulation;
    outline:none;
    isolation:isolate;
}

.bib-v3 .roulette-v4 .roulette-stage.is-locked{cursor:default;filter:saturate(.88)}
.bib-v3 .roulette-v4 .roulette-stage:focus-visible{filter:drop-shadow(0 0 .65rem rgba(255,255,255,.95))}
/* O rotor gira (transform do app.js) com a arte OFF e as luzes da Home dentro;
   o mesmo quadrado da roda de antes. Girando, as luzes da roda parada saem e
   fica só o pisca do giro (troca do src da OFF). */
.bib-v3 .roulette-v4 .roulette-wheel-rotor{position:relative;z-index:2;display:block;width:100%;height:100%;will-change:transform}
.bib-v3 .roulette-v4 .roulette-wheel{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:0;transition:none}
.bib-v3 .roulette-v4 .roulette-wheel-lights{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;pointer-events:none}
.bib-v3 .roulette-v4 .roulette-stage.is-spinning .roulette-wheel-lights{animation:none;opacity:0}
/* Pino em % da roda: acompanha a roda quando ela encolhe pela altura da tela. */
.bib-v3 .roulette-v4 .roulette-pin{position:absolute;top:-1%;left:50%;width:22.5%;transform:translateX(-50%);z-index:7;filter:drop-shadow(0 7px 6px rgba(91,58,18,.25))}
.bib-v3 .roulette-v4 .roulette-stage.is-spinning .roulette-pin{animation:roulettePinTick .16s ease-in-out infinite alternate}
.bib-v3 .roulette-v4 .roulette-stage.is-spinning .roulette-wheel{transform:none}
.bib-v3 .roulette-v4 .roulette-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,95,.62),rgba(255,230,58,.15) 46%,transparent 72%);opacity:.14;z-index:0;transition:.25s}
.bib-v3 .roulette-v4 .roulette-stage.is-spinning .roulette-glow{opacity:.9;animation:rouletteGlow 1s ease-in-out infinite alternate}
.bib-v3 .roulette-v4 .roulette-sparkles{position:absolute;inset:-8%;z-index:9;pointer-events:none;overflow:visible}
.bib-v3 .roulette-v4 .roulette-sparkles i{position:absolute;width:11px;height:11px;background:#fff7a7;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 0 6px #ffd51e);animation:rouletteSpark 1.25s ease-out forwards}

/* Rodapé logo abaixo da roda: o cronômetro da Home (.roulette-timer) quando
   já girou; nos outros estados, a faixa de aviso no mesmo lugar. */
.bib-v3 .roulette-v4 .roulette-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:12px;
}

.bib-v3 .roulette-v4 .roulette-footer-bar{
    width:min(94%,620px);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
}

.bib-v3 .roulette-v4 .roulette-footer-icon{
    width:48px;
    height:auto;
    flex:0 0 auto;
    filter:drop-shadow(0 4px 5px rgba(95,72,23,.18));
}

.bib-v3 .roulette-v4 .roulette-footer-bar[hidden]{display:none}

/* O cronômetro da Home (.roulette-timer) numa escala maior, para a composição
   da tela: mesmo desenho, relógio, rótulo e horário proporcionalmente maiores. */
.bib-v3 .roulette-v4 .roulette-timer{width:250px;gap:10px;padding:5px 16px 6px;border-radius:22px}
.bib-v3 .roulette-v4 .roulette-timer img{width:50px}
.bib-v3 .roulette-v4 .roulette-timer-copy span{font-size:15px}
.bib-v3 .roulette-v4 .roulette-timer time{font-size:29px}

/* Com giro disponível, o "Girar agora" da Home no lugar do cronômetro e com a
   mesma largura (a troca não mexe na composição). Faz o mesmo que tocar na
   roda: chama o spin() da tela. */
.bib-v3 .roulette-v4 .roulette-spin-cta{
    display:block;
    width:250px;
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
    background:none;
    line-height:0;
    cursor:pointer;
    touch-action:manipulation;
}
.bib-v3 .roulette-v4 .roulette-spin-cta img{display:block;width:100%;height:auto}
.bib-v3 .roulette-v4 .roulette-spin-cta:active:not(:disabled){transform:translateY(2px)}
.bib-v3 .roulette-v4 .roulette-spin-cta:disabled{cursor:default}
.bib-v3 .roulette-v4 .roulette-spin-cta:focus-visible{outline:3px solid #3f9b41;outline-offset:3px;border-radius:14px}
.bib-v3 .roulette-v4 .roulette-spin-cta[hidden]{display:none}

.bib-v3 .roulette-v4 .roulette-footer-label{
    font-family:var(--font-display);
    font-size:clamp(20px,calc(6 * var(--app-vw)),26px);
    line-height:1.05;
    color:#ef3d83;
    text-shadow:0 2px 0 rgba(255,255,255,.55);
}

.bib-v3 .roulette-v4 .roulette-footer-link{
    background:linear-gradient(#73db38,#3dad24);
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    padding:10px 18px;
    font-family:var(--font-display);
    box-shadow:0 4px 0 rgba(61,105,38,.2);
    white-space:nowrap;
}

.bib-v3 .roulette-v4 .roulette-status-sr{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* mobile-first: base (era @media (max-width: 640px)) */
    .bib-v3 .roulette-v4{padding:18px 12px 28px;}
    .bib-v3 .roulette-v4 .roulette-topbar-art{grid-template-columns:64px 1fr 64px;gap:8px;margin-bottom:8px;}
    .bib-v3 .roulette-v4 .roulette-icon-button{width:64px;height:64px;}
    .bib-v3 .roulette-v4 .roulette-top-center{min-height:116px;padding-top:34px;}
    .bib-v3 .roulette-v4 .roulette-top-mascot{width:100px;}
    .bib-v3 .roulette-v4 .roulette-footer-bar{gap:8px;}
    .bib-v3 .roulette-v4 .roulette-footer-icon{width:40px;}
/* fim: era @media (max-width: 640px) */


/* ========================================================================== */
/* Home v3.5 — composição final com fundo único fixo e banner em camadas      */
/* ========================================================================== */
body.bib-v3:has(.home-v5){
    background:#a8df78!important;
}

.bib-v3 .page-shell-v3:has(.home-v5){
    max-width:780px;
    padding:12px 18px 76px;
    position:relative;
}

.bib-v3 .page-shell-v3:has(.home-v5)::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-4;
    pointer-events:none;
    background:#a8df78 url('../img/backgrounds/bg-home.webp') center top/cover no-repeat;
}

.bib-v3:has(.home-v5) .topbar-v3{
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
}

.bib-v3:has(.home-v5) .topbar-v3.scrolled{
    background:rgba(166,219,113,.88);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 24px rgba(55,93,39,.12);
}

.home-v5{
    position:relative;
    padding-bottom:58px;
}

.home-v5 .home-v5-hero{
    position:relative;
    display:block;
    min-height:350px;
    margin-bottom:22px;
    padding:40px 36px 28px;
    border-radius:40px;
    overflow:hidden;
    background:linear-gradient(180deg,#fffef8 0%,#fffdf3 100%);
    border:3px solid rgba(248,219,116,.9);
    box-shadow:0 9px 0 rgba(94,126,55,.15),0 18px 34px rgba(78,105,46,.14),inset 0 0 0 3px rgba(255,255,255,.92);
}

.home-v5 .home-v5-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 54% 28%,#ffc928 0 7px,transparent 8px),
        radial-gradient(circle at 73% 17%,#78bd34 0 5px,transparent 6px);
    opacity:.8;
    pointer-events:none;
    z-index:1;
}

.home-v5-copy{
    position:relative;
    z-index:5;
    width:56%;
}

.home-v5 .home-v5-copy>span{
    display:block;
    color:#44342b;
    font-family:var(--font-display);
    font-size:32px;
    line-height:1;
}

.home-v5 .home-v5-copy h1{
    margin:12px 0 24px;
    color:#ffd63e;
    font-family:var(--font-display);
    font-size:88px;
    line-height:.88;
    -webkit-text-stroke:2px #55351e;
    text-shadow:0 5px 0 rgba(105,64,24,.18),0 10px 18px rgba(220,165,28,.12);
}

.home-v5 .home-v5-copy p{
    margin:0;
    color:#46362f;
    font-family:var(--font-display);
    font-size:24px;
    line-height:1.42;
}

.home-v5-garden{
    position:absolute;
    z-index:2;
    left:-2%;
    bottom:-5%;
    width:104%;
    height:49%;
    object-fit:cover;
    object-position:center bottom;
    pointer-events:none;
}

.home-v5-lion{
    position:absolute;
    z-index:4;
    right:5.5%;
    bottom:7%;
    width:34%;
    max-width:270px;
    height:auto;
    filter:drop-shadow(0 13px 12px rgba(74,58,28,.18));
    animation:v3Float 4.5s ease-in-out infinite;
}

.home-v5 .home-v5-account{
    border:3px solid rgba(246,219,137,.88);
    background:linear-gradient(180deg,#fffef8,#fffaf0);
    box-shadow:0 8px 0 rgba(91,126,52,.13),0 15px 28px rgba(73,99,43,.11),inset 0 0 0 3px rgba(255,255,255,.9);
}

.home-v5 .home-v5-register{
    grid-template-columns:minmax(0,1fr) 190px;
    min-height:205px;
    padding:26px 28px 22px;
    align-items:center;
}

.home-v5-register-copy{
    position:relative;
    z-index:3;
}

.home-v5 .home-v5-register h2{
    margin:0 0 14px;
    color:#46362f;
    font-size:29px;
    line-height:1.35;
}

.home-v5-register-btn{
    display:block;
    width:min(100%,410px);
    text-decoration:none;
    transition:transform .2s var(--ease-spring),filter .2s;
}

.home-v5-register-btn:hover{
    transform:translateY(-3px) scale(1.01);
    filter:brightness(1.03);
}

.home-v5-register-btn:active{
    transform:translateY(1px) scale(.985);
}

.home-v5-register-btn img{
    display:block;
    width:100%;
    height:auto;
}

.home-v5 .home-account-reward{
    width:185px;
    height:155px;
    object-fit:contain;
}

.home-v5 .home-approved-heading{
    margin:2px 0 20px;
    color:#2d873a;
    font-size:45px;
}

.home-v5 .home-approved-action{
    border:3px solid rgba(245,218,143,.85);
    background:linear-gradient(180deg,#fffef9,#fffaf1);
    box-shadow:0 7px 0 rgba(91,126,53,.13),0 14px 26px rgba(75,101,44,.1),inset 0 0 0 2px rgba(255,255,255,.9);
}

.home-v5 .home-approved-books.home-v5-books{
    margin-top:38px;
    padding:22px 18px 24px;
    border-radius:34px;
    background:rgba(255,252,238,.88);
    border:3px solid rgba(246,218,131,.72);
    box-shadow:0 8px 0 rgba(91,135,53,.1),0 16px 28px rgba(67,96,41,.09);
}

.home-v5 .home-approved-section-head h2{
    color:#2b873c;
}

.home-v5 .home-v5-book-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}

.home-v5 .home-v5-book{
    display:block;
    min-width:0;
    overflow:hidden;
    padding:7px 7px 12px;
    border-radius:24px;
    background:#fffdf6;
    border:2px solid rgba(241,195,67,.92);
    box-shadow:0 6px 0 rgba(119,120,47,.12),0 10px 20px rgba(75,95,47,.08),inset 0 1px 0 rgba(255,255,255,.9);
    text-decoration:none;
    transition:transform .22s var(--ease-spring),box-shadow .22s;
}

.home-v5 .home-v5-book:hover{
    transform:translateY(-5px) scale(1.01);
    box-shadow:0 8px 0 rgba(119,120,47,.11),0 16px 25px rgba(75,95,47,.11);
}

.home-v5 .home-v5-book-cover{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:18px;
    background:#e8edcf;
}

.home-v5 .home-v5-book-cover::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 -38px 50px rgba(37,48,22,.08);
}

.home-v5 .home-v5-book-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .45s var(--ease-smooth);
}

.home-v5 .home-v5-book:hover .home-v5-book-cover img{
    transform:scale(1.055);
}

.home-v5-book-info{
    padding:10px 5px 1px;
    text-align:center;
}

.home-v5 .home-v5-book-info b{
    display:block;
    color:#c95631;
    font-family:var(--font-display);
    font-size:22px;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.home-v5 .home-v5-book-info small{
    display:block;
    margin-top:5px;
    color:#6f6257;
    font-size:13px;
}

/* mobile-first: base (era @media (max-width:600px)) */
    .bib-v3 .page-shell-v3:has(.home-v5){
        padding:10px 12px 58px;
    }

    .bib-v3 .page-shell-v3:has(.home-v5)::before{
        background-position:center top;
        background-size:cover;
    }

    .home-v5 .home-v5-hero{
        min-height:285px;
        padding:28px 20px 20px;
        border-radius:31px;
    }

    .home-v5-copy{
        width:61%;
    }

    .home-v5 .home-v5-copy>span{
        font-size:24px;
    }

    .home-v5 .home-v5-copy h1{
        margin:8px 0 17px;
        font-size:64px;
        -webkit-text-stroke:1.6px #55351e;
    }

    .home-v5 .home-v5-copy p{
        font-size:17px;
        line-height:1.42;
    }

    .home-v5-garden{
        left:-6%;
        bottom:-2%;
        width:112%;
        height:47%;
    }

    .home-v5-lion{
        right:2.5%;
        bottom:8%;
        width:42%;
    }

    .home-v5 .home-v5-register{
        grid-template-columns:minmax(0,1fr) 118px;
        min-height:163px;
        padding:18px 17px;
    }

    .home-v5 .home-v5-register h2{
        font-size:20px;
        margin-bottom:10px;
    }

    .home-v5 .home-account-reward{
        width:118px;
        height:108px;
    }

    .home-v5-register-btn{
        width:min(100%,300px);
    }

    .home-v5 .home-approved-heading{
        font-size:34px;
    }

    .home-v5 .home-approved-books.home-v5-books{
        padding:16px 11px 18px;
    }

    .home-v5 .home-v5-book-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:11px;
    }

    .home-v5 .home-v5-book-info b{
        font-size:20px;
    }

    .home-v5 .home-v5-book-info small{
        font-size:12px;
    }
/* fim: era @media (max-width:600px) */

@media(max-width:380px){
    .home-v5 .home-v5-hero{min-height:265px;}
    .home-v5 .home-v5-copy h1{font-size:56px;}
    .home-v5 .home-v5-copy p{font-size:15px;}
    .home-v5 .home-v5-register{grid-template-columns:minmax(0,1fr) 100px;}
    .home-v5 .home-account-reward{width:100px;height:96px;}
}


/* ========================================================================== */
/* Home v6 — ajuste fiel ao exemplo, com fundo único fixo                     */
/* ========================================================================== */
.bib-v3:has(.home-v6){
    background: #dceeb8 url('../img/backgrounds/bg-home.webp') center top / cover fixed no-repeat;
}

.bib-v3:has(.home-v6) .topbar-v3{
    background: transparent;
    box-shadow: none;
}

.bib-v3:has(.home-v6) .topbar-v3.scrolled{
    background: rgba(190, 225, 157, .74);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(70,97,36,.14);
}

/* Topo estável na Home:
   - pageIn com fill "both" deixa transform (matriz identidade) no body após a entrada,
     o que torna o body contêiner do .topbar-v3 fixed e faz o header rolar junto;
     "backwards" só aplica o estado inicial e não retém transform ao terminar;
   - o body reserva a altura real do header (116px), e não os 98px do topbar antigo;
   - .scrolled só troca fundo/sombra: sem encolher altura, mascote ou barra. */
.bib-v3.page-enter:has(.home-v6){animation-fill-mode:backwards}
.bib-v3:has(.home-v6){padding-top:116px}
.bib-v3:has(.home-v6) .topbar-v3.scrolled{height:116px}
.bib-v3:has(.home-v6) .topbar-v3.scrolled .topbar-v3-center{min-height:88px;padding-top:26px}
.bib-v3:has(.home-v6) .topbar-v3.scrolled .topbar-v3-mascot{width:74px}
.bib-v3:has(.home-v6) .topbar-v3.scrolled .topbar-v3-progress{width:min(100%,244px)}


.bib-v3 .page-shell-v3:has(.home-v6){
    max-width: 760px;
    padding: 10px 14px 58px;
    position: relative;
}

.bib-v3 .page-shell-v3:has(.home-v6)::before,
.bib-v3 .page-shell-v3:has(.home-approved)::before,
.bib-v3 .page-shell-v3:has(.home-rich)::before{
    display: none !important;
}

.home-v6{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding-bottom: 26px;
}

.home-v6-hero-card,
.home-v6-progress-card,
.home-v6-roulette-card,
.home-v6-reading,
.home-v6-shortcuts>a,
.home-v6-more-card,
.home-v6-more-list>a{
    background: rgba(255, 252, 246, .96);
    border: 2px solid #efd27d;
    border-radius: 34px;
    box-shadow: 0 8px 0 rgba(125,172,88,.18), 0 16px 32px rgba(61,91,38,.10), inset 0 1px 0 rgba(255,255,255,.96);
}

.home-v6-hero-card{
    position:relative;
    min-height: 306px;
    overflow:hidden;
    padding: 28px 20px 18px;
}

.home-v6-hero-copy{
    position:relative;
    z-index:3;
    max-width: 56%;
    /* Reserva a faixa de plantas/flores do jardim abaixo do CTA.
       Em %, o padding acompanha a largura do card, que define a altura do jardim. */
    padding-bottom: 14%;
}

.home-v6-hero-copy span{
    display:block;
    font-weight:900;
    font-size: 30px;
    line-height:1;
    color:#4e3c32;
    margin-bottom:10px;
}

.home-v6-hero-copy h1{
    margin:0;
    font-family:var(--font-display);
    font-size: clamp(68px, 14vw, 106px);
    line-height:.92;
    color:#f3ca20;
    -webkit-text-stroke: 2px #633c16;
    text-shadow: 0 5px 0 rgba(92,58,18,.28);
}

.home-v6-hero-copy p{
    margin:18px 0 0;
    max-width: 280px;
    font-size: 20px;
    line-height: 1.34;
    font-weight:800;
    color:#4e3c32;
}

.home-v6-hero-garden{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:auto;
    z-index:1;
}

.home-v6-hero-lion{
    position:absolute;
    right:18px;
    bottom:14px;
    width:min(37%, 178px);
    height:auto;
    z-index:2;
    filter: drop-shadow(0 10px 12px rgba(96,76,24,.18));
}

.home-v6-signup-card{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) auto;
    align-items:center;
    gap:10px 10px;
    padding: 18px 20px 16px;
}

.home-v6-signup-copy p{
    margin:6px 0 0;
    font-size:16px;
    line-height:1.32;
    color:#7b6a5c;
}

/* Criar conta + entrar: linha própria, abaixo do texto e do baú, para os dois
   botões caberem lado a lado sem encostar na arte nem estourar o card.
   A ação principal é maior; a secundária acompanha em escala reduzida. */
.home-v6-signup-actions{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:10px;
}

.home-v6-signup-actions .home-v6-signup-button{
    min-width:0;
}

.home-v6-signup-actions .is-primary{
    flex:1.45 1 0;
}

.home-v6-signup-actions .is-secondary{
    flex:1 1 0;
}

.home-v6-signup-button img{
    width:100%;
    height:auto;
    display:block;
}

.home-v6-reward{
    width:min(34vw, 150px);
    height:auto;
    justify-self:end;
    filter: drop-shadow(0 10px 12px rgba(111,82,22,.16));
}

/* CTA do hero: arte pronta do botão "Ler a Bíblia" (folhas e sombra na própria imagem). */
.home-v6-hero-cta{
    display:inline-block;
    margin-top:14px;
    /* 96% preserva folga para o mascote no limite de 360px. */
    width:min(96%, 200px);
    line-height:0;
    text-decoration:none;
}
.home-v6-hero-cta img{
    display:block;
    width:100%;
    height:auto;
}
.home-v6-hero-cta:active{transform:translateY(2px)}
.home-v6-hero-cta:focus-visible{outline:3px solid #3f9b41;outline-offset:3px;border-radius:14px}

/* Card compacto de moedas: três grupos lado a lado com separadores sutis. */
.home-v6-wallets{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    padding:12px 4px;
    border-radius:26px;
}

.home-v6-coin{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(4px, 1.4vw, 8px);
    min-width:0;
    padding:2px clamp(3px, 1.2vw, 6px);
}
.home-v6-coin + .home-v6-coin{border-left:2px solid rgba(214,190,130,.45)}

.home-v6-coin img{
    flex:0 0 auto;
    width:clamp(28px, 8.4vw, 38px);
    height:clamp(28px, 8.4vw, 38px);
    object-fit:contain;
    filter: drop-shadow(0 3px 4px rgba(91,66,20,.14));
}

.home-v6-coin span{display:flex;flex-direction:column;min-width:0;line-height:1.1}

.home-v6-coin small{
    font-size:clamp(12px, 3.1vw, 13px);
    font-weight:800;
    color:#8a5a2b;
}
.home-v6-coin.is-silver small{color:#9a9da5}
.home-v6-coin.is-gold small{color:#9a6a12}

.home-v6-coin b{
    font-size:clamp(15px, 4.5vw, 20px);
    font-weight:900;
    color:#4e3c32;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Roleta diária: card de destaque com a roda à esquerda e CTA. */
.home-v6-roulette-card{
    position:relative;
    display:grid;
    grid-template-columns:clamp(112px, 34vw, 146px) minmax(0,1fr);
    align-items:center;
    gap:clamp(10px, 3vw, 16px);
    padding:14px clamp(14px, 4vw, 18px);
    border-radius:30px;
    background: linear-gradient(135deg, #fffaf0 0%, #fff1cf 100%);
    overflow:hidden;
}
.home-v6-roulette-wheel{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1/1;
    filter: drop-shadow(0 8px 12px rgba(111,82,22,.2));
}
/* OFF e ON sobrepostos; só a opacidade do ON pisca (a roda não gira). */
.home-v6-roulette-wheel img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
}
/* Luzes da roda — as mesmas no card da Home e na roda parada da /roleta: a arte
   ON (.roulette-wheel-lights) fica sobre a OFF e só a opacidade dela pisca.
   O pisca-pisca não depende de interação: hover/active/focus-within travavam a
   animação com as luzes acesas e, no toque, o estado ficava grudado depois do tap. */
.roulette-wheel-lights{animation:roulette-wheel-lights .4s ease-in-out infinite alternate}
@keyframes roulette-wheel-lights{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion: reduce){
    .roulette-wheel-lights{animation:none;opacity:1}
}
.home-v6-roulette-copy{min-width:0}
.home-v6-roulette-copy h2{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(26px, 7.4vw, 32px);
    line-height:1;
    color:var(--v3-purple);
}
.home-v6-roulette-copy p{
    margin:6px 0 12px;
    font-size:clamp(13px, 3.7vw, 15px);
    line-height:1.35;
    font-weight:700;
    color:#62554a;
}
/* CTA da roleta: arte pronta do botão "Girar agora!" (relevo e sombra na própria imagem). */
.home-v6-roulette-cta{
    display:inline-block;
    width:min(100%, 210px);
    line-height:0;
    text-decoration:none;
}
.home-v6-roulette-cta img{
    display:block;
    width:100%;
    height:auto;
}
.home-v6-roulette-cta:active{transform:translateY(2px)}
.home-v6-roulette-cta:focus-visible{outline:3px solid #3f9b41;outline-offset:3px;border-radius:14px}
/* "Próximo giro em" (partials/_roulette_timer.php): o mesmo cronômetro na Home
   e na /roleta. O tempo restante vem do servidor; o rouletteCountdown() do
   app.js só redesenha o relógio. */
.roulette-timer{
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    padding:3px 12px 4px;
    width:210px;
    max-width:100%;
    box-sizing:border-box;
    border-radius:18px;
    background:var(--v3-cream);
    border:2px solid rgba(139,74,216,.24);
    box-shadow:0 4px 0 rgba(139,74,216,.13);
}
/* No card da Home o cronômetro é um <p> da coluna de texto: sem a margem do parágrafo. */
.home-v6-roulette-copy .roulette-timer{margin:0}
/* Despertador à esquerda: evidente, mas bem menor que a roleta ao lado. */
.roulette-timer img{
    flex:none;
    width:clamp(32px, 9vw, 40px);
    height:auto;
}
.roulette-timer-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}
.roulette-timer-copy span{
    font-size:clamp(10px, 2.9vw, 12px);
    font-weight:800;
    line-height:1.15;
    color:#7b6a5c;
}
.roulette-timer time{
    font-size:clamp(19px, 5.4vw, 23px);
    font-weight:900;
    line-height:1.08;
    color:var(--v3-purple);
    font-variant-numeric:tabular-nums;
    letter-spacing:.5px;
}
/* Precisa vir depois — e com especificidade igual ou maior — que as regras de
   display acima, senão o [hidden] do navegador perde e os dois estados
   apareceriam juntos. */
.home-v6-roulette-cta[hidden],
.roulette-timer[hidden]{display:none}
.home-v6-roulette-spark{position:absolute;top:12px;right:14px;width:18px;height:auto;opacity:.9}

/* Continue sua leitura: fileira horizontal de cards pequenos com rolagem. */
.home-v6-reading{padding:16px 0 14px;border-radius:30px;min-width:0}
.home-v6-reading-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px;
    margin-bottom:12px;
}
.home-v6-reading-head h2,
.home-v6-signup-copy h2{margin:0;font-size:clamp(20px, 5.6vw, 24px);line-height:1.1;color:#4f3d34}
.home-v6-reading-head a{color:#3f9b41;font-weight:900;text-decoration:none;white-space:nowrap}
.home-v6-reading-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    padding:2px 16px 6px;
    scrollbar-width:none;
}
.home-v6-reading-row::-webkit-scrollbar{display:none}
.home-v6-reading-item{
    flex:0 0 clamp(96px, 27vw, 112px);
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px;
    border-radius:20px;
    background:#f9f4e7;
    border:2px solid rgba(237,214,137,.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(86,115,44,.08);
    text-decoration:none;
    scroll-snap-align:start;
}
.home-v6-reading-cover{display:block;aspect-ratio:1/1;margin-bottom:6px;border-radius:14px;overflow:hidden;background:#edf6d4}
.home-v6-reading-cover img{width:100%;height:100%;object-fit:cover;display:block}
.home-v6-reading-item b{font-size:14px;line-height:1.15;color:#4f3d34;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-v6-reading-item small{font-size:12px;color:#75675a;white-space:nowrap}
/* Indicadores do carrossel: gerados pelo v3.js conforme as páginas reais de rolagem. */
.home-v6-reading-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.home-v6-reading-dots[hidden]{display:none}
.home-v6-reading-dots span{width:8px;height:8px;border-radius:50%;background:#e8dfc9;transition:background-color .2s ease}
.home-v6-reading-dots span.is-active{background:#3f9b41}

/* Atalhos compactos: 4 lado a lado. */
.home-v6-shortcuts{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(6px, 2vw, 10px);
}
.home-v6-shortcuts>a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
    padding:12px 4px 10px;
    border-radius:22px;
    text-decoration:none;
    text-align:center;
    transition:transform .18s ease;
}
.home-v6-shortcuts>a:active{transform:translateY(1px) scale(.98)}
.home-v6-shortcuts img{
    width:clamp(40px, 12vw, 52px);
    height:clamp(40px, 12vw, 52px);
    object-fit:contain;
    filter: drop-shadow(0 5px 7px rgba(91,66,20,.12));
}
.home-v6-shortcuts span{
    font-size:clamp(11px, 3.2vw, 13px);
    font-weight:900;
    line-height:1.15;
    color:#4f3d34;
    overflow-wrap:anywhere;
}
.home-v6-shortcuts em{
    position:absolute;
    top:-7px;
    left:50%;
    transform:translateX(-50%);
    padding:2px 7px;
    border-radius:999px;
    background:#f9e7c2;
    color:#ac6d16;
    font-style:normal;
    font-weight:900;
    font-size:10px;
    white-space:nowrap;
}
.home-v6-chevron{display:inline-block;width:16px;height:16px;border-top:5px solid #5a4437;border-right:5px solid #5a4437;transform: rotate(45deg);border-radius:2px;margin-right:4px}

.home-v6-more-card{
    padding: 18px;
}

.home-v6-more-card h2{
    font-size:28px;
    color:#4f3d34;
    line-height:1.1;
    margin:0;
}

.home-v6-more-card h2{margin-bottom:14px}
.home-v6-more-list{display:flex;flex-direction:column;gap:12px}
.home-v6-more-list>a{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;text-decoration:none}
.home-v6-more-list img{width:58px;height:58px;object-fit:contain;filter: drop-shadow(0 7px 10px rgba(91,66,20,.12));}
.home-v6-more-list span{display:flex;flex-direction:column;min-width:0}
.home-v6-more-list b{font-size:22px;color:#4f3d34;line-height:1.06}
.home-v6-more-list small{margin-top:4px;font-size:15px;color:#75675a}

/* mobile-first: removido @media (min-width: 740px) (regras desktop) */

/* mobile-first: base (era @media (max-width: 520px)) */
    .bib-v3 .page-shell-v3:has(.home-v6){padding:8px 12px 52px;}
    .home-v6{gap:16px;}
    .home-v6-hero-card{min-height:286px;padding:22px 16px 16px;border-radius:30px;}
    .home-v6-hero-copy{max-width:59%;}
    .home-v6-hero-copy span{font-size:24px;}
    .home-v6-hero-copy h1{font-size:58px;-webkit-text-stroke:1.5px #633c16;}
    .home-v6-hero-copy p{margin-top:14px;font-size:17px;max-width:190px;}
    .home-v6-hero-lion{right:10px;bottom:12px;width:152px;max-width:42%;}
    .home-v6-signup-card{grid-template-columns:minmax(0,1fr) 115px;padding:15px 16px 13px;}
    .home-v6-signup-copy p{font-size:14.5px;}
    .home-v6-reward{width:112px;}
    .home-v6-more-card{padding:16px;}
    .home-v6-more-card h2{font-size:24px;}
    .home-v6-more-list>a{grid-template-columns:56px minmax(0,1fr) auto;padding:12px 14px;}
    .home-v6-more-list img{width:48px;height:48px;}
    .home-v6-more-list b{font-size:18px;}
    .home-v6-more-list small{font-size:13px;}
/* fim: era @media (max-width: 520px) */


/* ========================================================================== */
/* Refinos — topo reaproveitável + animações leves da Home                    */
/* ========================================================================== */
.bib-v3 .topbar-v3{
    height: 132px;
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 72px;
    align-items:start;
    gap:14px;
    padding:18px 18px 10px;
}

.bib-v3 .topbar-v3 .topbar-v3-side{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
}

.bib-v3 .topbar-v3 .topbar-v3-side img{
    width:100%;
    height:auto;
    filter: drop-shadow(0 5px 0 rgba(90,73,24,.12));
}

.bib-v3 .topbar-v3 .topbar-v3-center{
    position:relative;
    min-height:98px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    text-decoration:none;
    padding-top:30px;
}

.bib-v3 .topbar-v3 .topbar-v3-mascot{
    position:absolute;
    top: -10px;
    left:50%;
    transform:translateX(-50%);
    width:86px;
    height:auto;
    filter: drop-shadow(0 6px 10px rgba(95,78,24,.18));
}

.bib-v3 .topbar-v3 .topbar-v3-progress{
    width:min(100%,280px);
    height:auto;
    display:block;
}

.bib-v3 .topbar-v3.scrolled{
    height:106px;
}

.bib-v3 .topbar-v3.scrolled .topbar-v3-center{
    min-height:80px;
    padding-top:24px;
}

.bib-v3 .topbar-v3.scrolled .topbar-v3-mascot{
    width:70px;
}

.bib-v3 .topbar-v3.scrolled .topbar-v3-progress{
    width:min(100%,240px);
}

/* Desativa o topo antigo em telas novas */
.bib-v3 .topbar-v3 .mascot-top,
.bib-v3 .topbar-v3 .xp-mini{display:none !important;}

/* mobile-first: base (era @media (max-width: 520px)) */
    .bib-v3 .topbar-v3{
        height:116px;
        grid-template-columns:64px minmax(0,1fr) 64px;
        gap:10px;
        padding:16px 14px 8px;
    }
    .bib-v3 .topbar-v3 .topbar-v3-side{width:64px;height:64px;}
    .bib-v3 .topbar-v3 .topbar-v3-center{min-height:88px;padding-top:26px;}
    .bib-v3 .topbar-v3 .topbar-v3-mascot{width:74px;}
    .bib-v3 .topbar-v3 .topbar-v3-progress{width:min(100%,244px);}
    .bib-v3 .topbar-v3.scrolled{height:96px;}
    .bib-v3 .topbar-v3.scrolled .topbar-v3-center{min-height:72px;padding-top:20px;}
    .bib-v3 .topbar-v3.scrolled .topbar-v3-mascot{width:60px;}
    .bib-v3 .topbar-v3.scrolled .topbar-v3-progress{width:min(100%,220px);}
/* fim: era @media (max-width: 520px) */

@keyframes bibFloatSoft {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes bibFloatSoftX {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-1.2deg); }
}

.home-v6 .home-v6-hero-lion{
    width:min(41%, 202px);
    animation: bibFloatSoft 3.8s ease-in-out infinite;
}

.home-v6 .home-v6-reward{
    width:min(36vw, 166px);
    animation: bibFloatSoftX 3.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.home-v6 .home-v6-signup-button img{
    width:100%;
}

/* mobile-first: removido @media (min-width: 740px) (regras desktop) */

/* mobile-first: base (era @media (max-width: 520px)) */
    .home-v6 .home-v6-hero-lion{
        width:170px;
        max-width:46%;
        right:8px;
    }
    .home-v6 .home-v6-reward{
        width:120px;
    }
    .home-v6 .home-v6-signup-button img{
        width:100%;
    }
/* fim: era @media (max-width: 520px) */


/* Quiz v2.2 — erro mais evidente e penalidades */
.bib-v3 .quiz-result-v2.is-loss .quiz-loss-alert{
    width:min(94%,620px);
    margin:12px auto 22px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:16px;
    text-align:left;
    background:linear-gradient(145deg,#fff1ed,#ffd8cf);
    border:4px solid #f05a43;
    border-radius:28px;
    box-shadow:0 8px 0 rgba(163,55,37,.20),0 18px 30px rgba(123,44,31,.13),inset 0 2px 0 rgba(255,255,255,.9);
    animation:quizLossPop .52s cubic-bezier(.16,.84,.3,1.25),quizLossShake .38s .55s ease-in-out;
}
.bib-v3 .quiz-loss-alert-icon{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(#ff6e56,#df3b2a);
    border:5px solid #fff;
    color:#fff;
    font-family:var(--font-display);
    font-size:52px;
    line-height:1;
    box-shadow:0 5px 0 rgba(143,48,35,.18);
}
.bib-v3 .quiz-loss-alert strong{
    display:block;
    font-family:var(--font-display);
    font-size:32px;
    line-height:1;
    color:#d83e2d;
}
.bib-v3 .quiz-loss-alert p{
    margin:7px 0 0;
    font-size:18px;
    line-height:1.35;
    color:#64362e;
}
.bib-v3 .quiz-loss-alert b{color:#b52e20;font-size:20px}
.bib-v3 .quiz-result-v2.is-loss>h2{margin-top:5px}
@keyframes quizLossPop{0%{opacity:0;transform:scale(.76) translateY(-15px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes quizLossShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
/* mobile-first: base (era @media (max-width:520px)) */
    .bib-v3 .quiz-result-v2.is-loss .quiz-loss-alert{padding:14px 15px;gap:12px;border-radius:24px}
    .bib-v3 .quiz-loss-alert-icon{width:58px;height:58px;flex-basis:58px;font-size:42px}
    .bib-v3 .quiz-loss-alert strong{font-size:27px}
    .bib-v3 .quiz-loss-alert p{font-size:16px}
    .bib-v3 .quiz-loss-alert b{font-size:17px}
/* fim: era @media (max-width:520px) */


/* ========================================================================== */
/* Chapter v5 — fundo ilustrado + modal de erro forte                         */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.chapter-v5){
    background:#8fd0ff url('../img/backgrounds/bg-chapter.webp') center top / cover fixed no-repeat;
}

.bib-v3 .page-shell-v3:has(.chapter-v5){
    max-width: 820px;
    padding: 16px 14px 88px;
}

.bib-v3 .page-shell-v3:has(.chapter-v5)::before{display:none !important;}

.chapter-v5{
    min-height: calc(100vh - 32px);
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
}

.chapter-v5-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.chapter-v5-back img{
    width:74px;
    height:auto;
    display:block;
    filter: drop-shadow(0 8px 12px rgba(33,91,31,.22));
}

.chapter-v5-audio{
    border:2px solid rgba(255,255,255,.72);
    background:rgba(255,255,255,.34);
    color:#ffffff;
    backdrop-filter: blur(8px);
    border-radius:999px;
    padding:10px 14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font:inherit;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(20,90,126,.16);
}
.chapter-v5-audio img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}

.chapter-v5-hero{
    text-align:center;
    color:#fff;
    padding: 10px 12px 4px;
}

.chapter-v5-kicker{
    display:inline-block;
    margin-bottom:8px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.24);
    border:1px solid rgba(255,255,255,.58);
    backdrop-filter: blur(6px);
    font-size:18px;
    letter-spacing:.3px;
    text-shadow:0 2px 8px rgba(22,69,100,.28);
}

.chapter-v5-hero h1{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(42px,8vw,72px);
    line-height:.94;
    color:#fff7da;
    text-shadow:0 4px 0 rgba(59,94,121,.22), 0 12px 30px rgba(48,102,140,.24);
}
.chapter-v5-hero h1 em{font-style:normal;color:#fff}

.chapter-v5-hero p{
    margin:14px auto 0;
    max-width: 620px;
    font-size: clamp(18px,3.8vw,24px);
    line-height:1.35;
    color:#ffffff;
    text-shadow:0 2px 10px rgba(24,76,108,.22);
}

.chapter-v5-reader{
    margin-top: 6px;
    background: rgba(255, 252, 247, .87);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 14px 34px rgba(58,108,54,.12), inset 0 1px 0 rgba(255,255,255,.98);
    border-radius: 34px;
    padding: 24px 20px;
}

.chapter-v5-reader h2{
    margin:0 0 14px;
    text-align:center;
    font-family:var(--font-display);
    font-size: clamp(30px,5.7vw,46px);
    color:#4f3d34;
    line-height:1;
}

.chapter-v5-story-text{
    margin:0;
    font-size: clamp(20px,4.2vw,25px);
    line-height:1.72;
    color:#57463e;
    text-shadow:0 1px 0 rgba(255,255,255,.42);
}

.chapter-v5-reflection{
    margin-top:22px;
    background: linear-gradient(180deg, rgba(255,240,201,.92), rgba(255,230,171,.92));
    border: 2px solid #f1d585;
}
.chapter-v5-reflection p{margin-bottom:0}

.chapter-v5-progress{
    position:sticky;
    bottom:10px;
    margin-top: 2px;
    max-width: 720px;
    width:100%;
    background: rgba(255,255,255,.95);
    border:2px solid rgba(255,255,255,.85);
    border-radius: 28px;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 28px rgba(56,101,48,.14);
}
.chapter-v5-progress-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.chapter-v5-progress-head b{font-size:22px;color:#4f3d34}
.chapter-v5-progress-head span{font-size:17px;color:#6f6257;text-align:right}
.chapter-v5-progress .btn{min-width: 240px}

.chapter-wrong-modal{
    position:fixed;
    inset:0;
    z-index:120;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background: rgba(67,18,12,.45);
    backdrop-filter: blur(5px);
}

.chapter-wrong-modal-card{
    width:min(100%,560px);
    background: linear-gradient(180deg,#fff8f4,#fff2eb);
    border:3px solid #ff8f6d;
    border-radius:34px;
    padding:24px 22px 22px;
    box-shadow:0 18px 40px rgba(71,19,13,.22);
    text-align:center;
    animation:chapterWrongPop .34s cubic-bezier(.2,.8,.2,1.15) both;
}

.chapter-wrong-modal-badge{
    width:78px;
    height:78px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #ffbf9b, #ff714b 65%);
    color:#fff;
    font-family:var(--font-display);
    font-size:48px;
    box-shadow:0 10px 20px rgba(187,62,31,.28);
}

.chapter-wrong-modal h3{
    margin:0;
    font-family:var(--font-display);
    font-size: clamp(34px,calc(7 * var(--app-vw)),50px);
    color:#cf4d2f;
    line-height:.96;
}

.chapter-wrong-modal-copy{
    margin:12px auto 0;
    max-width:420px;
    font-size:20px;
    line-height:1.45;
    color:#5b453c;
}

.chapter-wrong-modal-losses{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin:16px 0 10px;
}

.chapter-wrong-modal-losses span{
    min-width:168px;
    padding:13px 16px;
    border-radius:18px;
    background:#ffe1d7;
    border:2px solid #ffb09a;
    font-size:22px;
    color:#a83a25;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.chapter-wrong-modal-tip{
    margin-top:10px;
    padding:14px 16px;
    border-radius:18px;
    background:#fff;
    border:2px solid #ffd9c9;
    color:#5b453c;
    text-align:left;
    font-size:18px;
    line-height:1.45;
}
.chapter-wrong-modal-tip b{color:#c85b2d}
.chapter-wrong-modal .btn{margin-top:16px;width:100%}

@keyframes chapterWrongPop{
    from{opacity:0;transform:translateY(18px) scale(.9)}
    to{opacity:1;transform:none}
}

/* mobile-first: base (era @media (max-width: 560px)) */
    .bib-v3 .page-shell-v3:has(.chapter-v5){padding:12px 10px 86px;}
    .chapter-v5-back img{width:64px;}
    .chapter-v5-audio{padding:8px 12px;font-size:16px}
    .chapter-v5-kicker{font-size:16px;padding:7px 14px;}
    .chapter-v5-hero p{margin-top:10px;max-width: 310px;}
    .chapter-v5-reader{padding:20px 16px;border-radius:28px;}
    .chapter-v5-story-text{font-size:21px;line-height:1.68}
    .chapter-v5-progress-head{flex-direction:column;align-items:center;text-align:center}
    .chapter-v5-progress-head span{text-align:center;font-size:16px}
    .chapter-v5-progress .btn{width:100%;min-width:0}
    .chapter-wrong-modal{padding:16px}
    .chapter-wrong-modal-card{padding:20px 16px 18px;border-radius:28px;}
    .chapter-wrong-modal-badge{width:68px;height:68px;font-size:42px}
    .chapter-wrong-modal-copy{font-size:18px}
    .chapter-wrong-modal-losses span{min-width:0;width:100%;font-size:20px}
    .chapter-wrong-modal-tip{font-size:17px}
/* fim: era @media (max-width: 560px) */


/* ========================================================================== */
/* Chapter v6 — layout aprovado com capa dinâmica e recompensa                */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.chapter-v6){
    background:#8fd0ff url('../img/backgrounds/bg-chapter.webp') center top / cover fixed no-repeat;
}
.bib-v3 .page-shell-v3:has(.chapter-v6){max-width:820px;padding:10px 10px 72px;}
.bib-v3 .page-shell-v3:has(.chapter-v6)::before{display:none!important;}
.chapter-v6{position:relative;display:flex;flex-direction:column;gap:16px;min-height:100vh;min-height:100dvh;}

.chapter-v6-cover{position:relative;}
.chapter-v6-cover-media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:46px 46px 72px 72px;border:4px solid rgba(255,221,143,.95);background:#dfeaf3;box-shadow:0 12px 30px rgba(34,82,105,.22),inset 0 0 0 3px rgba(255,255,255,.78);}
.chapter-v6-media{width:100%;height:100%;object-fit:cover;display:block;}
.chapter-v6-cover-media::after{content:"";position:absolute;inset:46% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(28,39,31,.06) 22%,rgba(24,40,30,.38));}
.chapter-v6-cover-nav{position:absolute;z-index:5;left:22px;right:22px;top:22px;display:flex;align-items:center;justify-content:space-between;}
.chapter-v6-back,.chapter-v6-options{width:76px;height:76px;border:0;padding:0;background:transparent;display:grid;place-items:center;cursor:pointer;}
.chapter-v6-back img,.chapter-v6-options img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 7px 9px rgba(37,58,23,.2));}
.chapter-v6-cover-title{position:absolute;z-index:4;left:20px;right:20px;bottom:26px;text-align:center;color:#fff;}
.chapter-v6-cover-title span{display:block;font-family:var(--font-display);font-size:clamp(25px,5vw,38px);line-height:1;color:#70d243;-webkit-text-stroke:1.5px #fff;text-shadow:0 3px 0 #38551f,0 5px 12px rgba(0,0,0,.28);}
.chapter-v6-cover-title strong{display:block;margin-top:8px;font-family:var(--font-display);font-size:clamp(54px,11vw,94px);line-height:.92;color:#fff;-webkit-text-stroke:2px #4f341f;text-shadow:0 5px 0 #7b561c,0 10px 20px rgba(0,0,0,.3);}

.chapter-v6-audio{position:absolute;z-index:10;right:22px;top:102px;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.36);backdrop-filter:blur(8px);border-radius:999px;padding:8px 12px;color:white;font:inherit;display:inline-flex;align-items:center;gap:7px;box-shadow:0 7px 18px rgba(20,70,100,.15);}
.chapter-v6-audio img{width:22px;height:22px;filter:brightness(0) invert(1)}

.chapter-v6-paper{margin:0 24px;background:rgba(255,253,247,.97);border:2px solid rgba(247,218,151,.95);border-radius:42px;padding:30px 28px 24px;box-shadow:0 10px 0 rgba(74,118,48,.09),0 18px 40px rgba(37,87,47,.12),inset 0 1px 0 #fff;font-family:var(--font-ui);}
.chapter-v6-story h1{margin:0 0 22px;text-align:center;font-family:var(--font-display);font-size:clamp(34px,6vw,52px);line-height:1;color:#168b42;text-shadow:0 2px 0 rgba(255,255,255,.8);}
.chapter-v6-story h1 i{font-style:normal;font-size:.56em;color:#f5ba16;margin:0 12px;vertical-align:middle;}
.chapter-v6-story>p{margin:0;font-size:clamp(21px,4.1vw,27px);line-height:1.62;color:#46362f;letter-spacing:.05px;}
.chapter-v6-reflection{margin-top:24px;padding:18px 20px;border-radius:24px;background:#fff2c9;border:2px solid #f0d27b;}
.chapter-v6-reflection b{font-family:var(--font-display);font-size:24px;color:#bd6329;}
.chapter-v6-reflection p{margin:8px 0 0;font-size:19px;line-height:1.5;}

.chapter-v6-reading-box{margin-top:30px;background:#fff;border:2px solid #efe3cd;border-radius:28px;padding:17px 18px 18px;box-shadow:0 8px 20px rgba(84,62,34,.10),inset 0 1px 0 #fff;}
.chapter-v6-reading-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;font-size:16px;color:#44382f;}
.chapter-v6-reading-head>span:last-child{text-align:right;}
.chapter-v6-reading-label{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.chapter-v6-reading-label img{width:36px;height:36px;object-fit:contain;}
.chapter-v6-reading-label b{font-size:17px;}
.chapter-v6-track{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 42px;align-items:center;gap:4px;min-height:54px;}
.chapter-v6-track-bg{height:34px;border-radius:999px;background:#f2eadf;border:2px solid #dcccb5;overflow:hidden;box-shadow:inset 0 3px 5px rgba(108,76,39,.09);}
.chapter-v6-track-bg i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#77df30,#30a814);box-shadow:inset 0 3px 0 rgba(255,255,255,.38);transition:width .35s var(--ease-smooth);position:relative;}
.chapter-v6-track-bg i::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.45) 45%,transparent 70%);animation:shine 2.2s linear infinite;}
.chapter-v6-sheep{width:52px;height:52px;object-fit:contain;z-index:2;filter:drop-shadow(0 4px 4px rgba(84,58,22,.15));}
.chapter-v6-track-star{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(145,89,5,.18));}
.chapter-v6-main-button{width:min(100%,510px);margin:16px auto 0;min-height:70px;border:0;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:14px 28px;text-decoration:none;text-align:center;font-family:var(--font-display);font-size:clamp(25px,4.7vw,36px);line-height:1;color:#fff;background:linear-gradient(180deg,#7fe33c 0%,#32b623 58%,#15931a 100%);border:2px solid #3e9d20;box-shadow:inset 0 3px 0 rgba(255,255,255,.42),0 7px 0 #187f22,0 12px 20px rgba(28,103,31,.18);text-shadow:0 2px 0 rgba(30,86,17,.32);cursor:pointer;}
.chapter-v6-main-button:disabled{filter:grayscale(.55);opacity:.55;cursor:default;box-shadow:0 5px 0 #668262;}
.chapter-v6-account-link{display:block;text-align:center;margin-top:12px;color:#9a5d24;font-size:16px;}

.chapter-v6-reward-preview{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 2px;padding-top:15px;border-top:1px solid #eadcc7;}
.chapter-v6-reward-label{width:100%;text-align:center;font-size:15px;color:#7b5d44;}
.chapter-v6-reward-item{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;background:#fff9ea;border:1px solid #efd7a6;border-radius:999px;box-shadow:0 3px 8px rgba(87,60,26,.06);}
.chapter-v6-reward-item img{width:34px;height:34px;object-fit:contain;}
.chapter-v6-reward-item b{font-size:16px;color:#64431e;}

.chapter-wrong-modal-v6 .chapter-wrong-modal-losses span{display:flex;align-items:center;justify-content:center;gap:8px;}
.chapter-wrong-modal-v6 .chapter-wrong-modal-losses img{width:34px;height:34px;object-fit:contain;}

/* mobile-first: base (era @media (max-width:560px)) */
  .bib-v3 .page-shell-v3:has(.chapter-v6){padding:6px 5px 58px;}
  .chapter-v6{gap:10px;}
  .chapter-v6-cover-media{border-radius:30px 30px 48px 48px;border-width:3px;}
  .chapter-v6-cover-nav{left:14px;right:14px;top:14px;}
  .chapter-v6-back,.chapter-v6-options{width:58px;height:58px;}
  .chapter-v6-cover-title{bottom:18px;left:10px;right:10px;}
  .chapter-v6-cover-title span{font-size:23px;-webkit-text-stroke:1px #fff;}
  .chapter-v6-cover-title strong{font-size:51px;-webkit-text-stroke:1.5px #4f341f;}
  .chapter-v6-audio{right:15px;top:77px;font-size:14px;padding:7px 10px;}
  .chapter-v6-paper{margin:0 10px;border-radius:30px;padding:24px 17px 18px;}
  .chapter-v6-story h1{font-size:34px;margin-bottom:18px;}
  .chapter-v6-story h1 i{margin:0 5px;}
  .chapter-v6-story>p{font-size:20px;line-height:1.58;}
  .chapter-v6-reading-box{padding:14px 12px 15px;border-radius:23px;margin-top:24px;}
  .chapter-v6-reading-head{font-size:13px;gap:7px;}
  .chapter-v6-reading-label{gap:5px;}
  .chapter-v6-reading-label img{width:28px;height:28px;}
  .chapter-v6-reading-label b{font-size:14px;}
  .chapter-v6-track{grid-template-columns:41px minmax(0,1fr) 35px;gap:2px;}
  .chapter-v6-track-bg{height:29px;}
  .chapter-v6-sheep{width:44px;height:44px;}
  .chapter-v6-track-star{width:32px;height:32px;}
  .chapter-v6-main-button{min-height:61px;font-size:27px;margin-top:14px;}
  .chapter-v6-reward-preview{gap:7px;margin-top:15px;}
  .chapter-v6-reward-label{font-size:13px;}
  .chapter-v6-reward-item{padding:5px 9px 5px 5px;gap:4px;}
  .chapter-v6-reward-item img{width:29px;height:29px;}
  .chapter-v6-reward-item b{font-size:14px;}
/* fim: era @media (max-width:560px) */


/* ========================================================================== */
/* Chapter v6.1 — refinamento fiel ao mock aprovado                           */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.chapter-v6){
    background:#86cff9 url('../img/backgrounds/bg-chapter.webp') center top / cover fixed no-repeat;
}

.bib-v3 .page-shell-v3:has(.chapter-v6){
    max-width:820px;
    width:100%;
    padding:0 0 72px;
}

.chapter-v6{
    gap:12px;
    width:100%;
}

.chapter-v6-cover{
    width:100%;
    padding:0;
}

.chapter-v6-cover-media{
    width:100%;
    aspect-ratio:1.06 / 1;
    border-radius:0 0 58px 58px;
    border:3px solid rgba(255,220,137,.98);
    border-top:0;
    box-shadow:0 12px 28px rgba(31,79,102,.21),inset 0 0 0 3px rgba(255,255,255,.76);
}

.chapter-v6-media{
    object-fit:cover;
    object-position:center center;
}

.chapter-v6-cover-media::after{
    inset:48% 0 0;
    background:linear-gradient(transparent,rgba(25,40,30,.03) 22%,rgba(20,34,28,.34));
}

.chapter-v6-cover-nav{
    left:22px;
    right:22px;
    top:20px;
}

.chapter-v6-back,.chapter-v6-options{
    width:72px;
    height:72px;
}

.chapter-v6-cover-title{
    bottom:22px;
}

.chapter-v6-cover-title span{
    font-size:clamp(23px,4.5vw,34px);
}

.chapter-v6-cover-title strong{
    margin-top:7px;
    font-size:clamp(52px,10vw,82px);
    line-height:.9;
}

.chapter-v6-paper{
    position:relative;
    margin:0 18px;
    padding:28px 26px 22px;
    border-radius:40px;
    background:
      radial-gradient(circle at 15% 8%,rgba(255,244,204,.32),transparent 22%),
      linear-gradient(180deg,#fffdf7 0%,#fffaf0 100%);
    border:2px solid #efd79c;
    box-shadow:0 8px 0 rgba(87,126,56,.07),0 18px 38px rgba(39,86,47,.11),inset 0 0 0 1px rgba(255,255,255,.95);
    overflow:hidden;
}

.chapter-v6-paper::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(235,215,169,.5);
    border-radius:32px;
    pointer-events:none;
}

.chapter-v6-story,
.chapter-v6-reading-box,
.chapter-v6-reward-preview{
    position:relative;
    z-index:1;
}

.chapter-v6-story h1{
    margin:2px 0 20px;
    font-size:clamp(30px,5vw,44px);
    line-height:1.04;
    color:#148b43;
}

.chapter-v6-story h1 i{
    font-size:.45em;
    margin:0 8px;
}

.chapter-v6-story>p{
    font-size:clamp(18px,3vw,22px);
    line-height:1.56;
    letter-spacing:0;
    color:#4b3931;
}

.chapter-v6-reflection{
    margin-top:22px;
    padding:17px 18px 18px;
    border-radius:22px;
    background:linear-gradient(180deg,#fff3cc 0%,#ffefc0 100%);
    border:2px solid #edc766;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.chapter-v6-reflection b{
    font-size:21px;
    color:#b85f28;
}

.chapter-v6-reflection p{
    margin:7px 0 0;
    font-size:clamp(16px,2.5vw,18px);
    line-height:1.48;
    color:#654e40;
}

.chapter-v6-reading-box{
    margin-top:24px;
    padding:15px 16px 17px;
    border-radius:24px;
    background:linear-gradient(180deg,#fffdfa,#fff9ef);
    border:2px solid #eadcc2;
    box-shadow:0 7px 18px rgba(84,62,34,.09),inset 0 1px 0 #fff;
}

.chapter-v6-reading-head{
    margin-bottom:10px;
    gap:10px;
    font-size:14px;
    line-height:1.2;
}

.chapter-v6-reading-label{
    gap:7px;
}

.chapter-v6-reading-label img{
    width:32px;
    height:32px;
}

.chapter-v6-reading-label b{
    font-size:15px;
}

.chapter-v6-reading-head>span:last-child{
    max-width:48%;
    color:#4c4038;
    font-size:14px;
}

.chapter-v6-track{
    grid-template-columns:46px minmax(0,1fr) 38px;
    gap:2px;
    min-height:48px;
}

.chapter-v6-track-bg{
    height:28px;
    border:2px solid #d8c8ae;
    background:#f4ede3;
    box-shadow:inset 0 2px 5px rgba(108,76,39,.08);
}

.chapter-v6-sheep{
    width:50px;
    height:50px;
    margin-right:-8px;
}

.chapter-v6-track-star{
    width:34px;
    height:34px;
    margin-left:2px;
}

.chapter-v6-main-button{
    width:min(100%,500px);
    min-height:64px;
    margin-top:14px;
    font-size:clamp(24px,4vw,33px);
    border-radius:999px;
}

.chapter-v6-reward-preview{
    margin:16px 0 0;
    padding:13px 0 2px;
    gap:9px;
    border-top:1px solid #eadcc8;
}

.chapter-v6-reward-label{
    font-size:13px;
    color:#7a604b;
}

.chapter-v6-reward-item{
    padding:5px 10px 5px 6px;
    gap:5px;
    background:#fff8e8;
    border:1px solid #e9c98c;
}

.chapter-v6-reward-item img{
    width:31px;
    height:31px;
}

.chapter-v6-reward-item b{
    font-size:14px;
}

/* mobile-first: base (era @media (max-width:560px)) */
    .bib-v3 .page-shell-v3:has(.chapter-v6){padding:0 0 54px;}
    .chapter-v6{gap:9px;}
    .chapter-v6-cover-media{
        aspect-ratio:1.04 / 1;
        border-radius:0 0 42px 42px;
        border-width:2px;
        border-top:0;
    }
    .chapter-v6-cover-nav{left:12px;right:12px;top:12px;}
    .chapter-v6-back,.chapter-v6-options{width:55px;height:55px;}
    .chapter-v6-cover-title{bottom:14px;left:8px;right:8px;}
    .chapter-v6-cover-title span{font-size:20px;}
    .chapter-v6-cover-title strong{font-size:47px;}
    .chapter-v6-audio{right:12px;top:69px;font-size:12px;padding:6px 9px;}

    .chapter-v6-paper{
        margin:0 11px;
        padding:22px 18px 18px;
        border-radius:28px;
    }
    .chapter-v6-paper::before{inset:6px;border-radius:22px;}
    .chapter-v6-story h1{
        font-size:28px;
        line-height:1.02;
        margin:0 0 17px;
    }
    .chapter-v6-story h1 i{margin:0 4px;}
    .chapter-v6-story>p{
        font-size:17px;
        line-height:1.52;
    }
    .chapter-v6-reflection{
        margin-top:20px;
        padding:15px 15px 16px;
        border-radius:20px;
    }
    .chapter-v6-reflection b{font-size:19px;}
    .chapter-v6-reflection p{
        font-size:15px;
        line-height:1.46;
    }
    .chapter-v6-reading-box{
        margin-top:20px;
        padding:13px 12px 14px;
        border-radius:21px;
    }
    .chapter-v6-reading-head{
        font-size:12px;
        gap:6px;
        margin-bottom:7px;
    }
    .chapter-v6-reading-label img{width:26px;height:26px;}
    .chapter-v6-reading-label b{font-size:12px;}
    .chapter-v6-reading-head>span:last-child{font-size:12px;max-width:52%;}
    .chapter-v6-track{grid-template-columns:38px minmax(0,1fr) 31px;min-height:42px;}
    .chapter-v6-track-bg{height:24px;}
    .chapter-v6-sheep{width:42px;height:42px;margin-right:-7px;}
    .chapter-v6-track-star{width:29px;height:29px;}
    .chapter-v6-main-button{min-height:57px;margin-top:12px;font-size:24px;}
    .chapter-v6-reward-preview{margin-top:13px;padding-top:11px;gap:6px;}
    .chapter-v6-reward-label{font-size:11px;}
    .chapter-v6-reward-item{padding:4px 8px 4px 4px;gap:3px;}
    .chapter-v6-reward-item img{width:27px;height:27px;}
    .chapter-v6-reward-item b{font-size:12px;}
/* fim: era @media (max-width:560px) */

/* ========================================================================== */
/* Chapter v6 — moldura de pergaminho sobre a capa do capítulo                */
/* Mesmo padrão da moldura da lista de capítulos (.book-v6-frame): largura da */
/* capa, altura pela proporção da arte (sem deformar), base presa ao pé da    */
/* capa e o excedente de cima saindo pelo topo da tela. Vale para todos os    */
/* livros. É só decoração: não recebe clique; título (z 4), botões (z 5) e    */
/* música (z 10) ficam por cima dela.                                         */
/* ========================================================================== */
.chapter-v6-frame{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    aspect-ratio:1024 / 1514;
    background:url('../img/decor/decor-reading-frame.webp') center bottom / 100% auto no-repeat;
    /* A faixa de baixo termina rente ao pé da capa; só as borlas descem no
       espaço antes do texto. */
    transform:translateY(1.3%);
    pointer-events:none;
}

/* A mídia só aparece dentro da moldura: o recorte segue o meio das hastes
   (que ondulam) e o meio da faixa inferior, medidos na própria arte com a
   capa em 1.04/1 e a moldura acima. Imagem, vídeo e fallback usam o mesmo
   recorte, sem mudar object-fit nem enquadramento. */
.chapter-v6-cover{
    --chapter-frame-clip:polygon(
        8.0% 0, 8.9% 3.0%, 9.2% 6.1%, 9.2% 9.2%, 8.3% 12.2%, 7.2% 15.4%,
        6.0% 18.4%, 6.0% 21.5%, 5.5% 24.5%, 5.5% 27.7%, 5.9% 30.7%, 4.7% 33.7%,
        5.6% 36.9%, 7.4% 39.9%, 7.9% 43.0%, 6.8% 46.0%, 7.9% 49.2%, 7.1% 52.2%,
        7.3% 55.3%, 5.5% 58.4%, 5.0% 61.5%, 5.5% 64.5%, 6.6% 67.6%, 7.0% 70.7%,
        6.5% 73.8%, 7.9% 76.8%, 9.8% 79.9%, 9.9% 80.5%, 18.0% 87.1%, 26.0% 90.9%,
        34.0% 93.2%, 42.0% 93.6%, 50.0% 94.2%, 57.9% 93.8%, 65.9% 92.7%, 73.9% 90.9%,
        81.9% 87.1%, 90.0% 80.5%, 90.1% 79.9%, 91.9% 76.8%, 93.8% 73.8%, 93.6% 70.7%,
        93.8% 67.6%, 94.0% 64.5%, 92.9% 61.5%, 92.1% 58.4%, 91.5% 55.3%, 91.5% 52.2%,
        91.8% 49.2%, 93.3% 46.0%, 94.2% 43.0%, 94.3% 39.9%, 94.9% 36.9%, 94.1% 33.7%,
        94.2% 30.7%, 94.5% 27.7%, 94.5% 24.5%, 93.0% 21.5%, 91.7% 18.4%, 91.3% 15.4%,
        90.5% 12.2%, 90.7% 9.2%, 91.0% 6.1%, 91.2% 3.0%, 92.4% 0
    );
}

/* A caixa da capa deixa de desenhar borda, fundo e sombra próprios: fora do
   recorte não aparece nada além do fundo da tela. Tamanho não muda
   (box-sizing: border-box). */
.chapter-v6-cover-media{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.chapter-v6-cover-media .chapter-v6-media{
    clip-path:var(--chapter-frame-clip);
}

/* O degradê de leitura do título passa a cobrir a capa toda (mesmas paradas
   de antes: começa em 48%) para usar o mesmo recorte da mídia. */
.chapter-v6-cover-media::after{
    inset:0;
    background:linear-gradient(transparent 48%,rgba(25,40,30,.03) 59.44%,rgba(20,34,28,.34));
    clip-path:var(--chapter-frame-clip);
}


/* ========================================================================== */
/* Book v5 — lista de capítulos do livro                                      */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.book-v5){
    background:#dcedb6 url('../img/backgrounds/bg-garden-frame.webp') center top / cover fixed no-repeat;
}

.bib-v3 .page-shell-v3:has(.book-v5){
    max-width:820px;
    padding:14px 12px 70px;
}
.bib-v3 .page-shell-v3:has(.book-v5)::before{display:none !important}

.book-v5{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.book-v5-topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}
.book-v5-back img{width:70px;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(44,95,32,.2));}
.book-v5-more,.book-v5-audio{
    min-height:52px;
    padding:0 16px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.86);
    background:rgba(255,255,255,.35);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 22px rgba(74,106,42,.12);
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font:inherit;
    font-size:17px;
}
.book-v5-more img{width:28px;height:28px;object-fit:contain}
.book-v5-audio img{width:22px;height:22px;filter:brightness(0) invert(1)}

.book-v5-hero{
    position:relative;
    overflow:hidden;
    border-radius:36px;
    min-height:345px;
    border:3px solid rgba(255,235,189,.95);
    box-shadow:0 12px 30px rgba(63,90,33,.12), inset 0 0 0 3px rgba(255,255,255,.25);
    background:#e5f0c8;
}
.book-v5-cover-media{width:100%;height:100%;min-height:345px;display:block;object-fit:cover}
.book-v5-hero-overlay{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:24px 20px 18px;
    background:linear-gradient(180deg, rgba(19,33,13,0) 0%, rgba(22,25,12,.12) 22%, rgba(27,17,7,.56) 100%);
    text-align:center;
}
.book-v5-hero-overlay span{
    display:inline-block;
    margin-bottom:8px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(124,220,77,.92);
    color:#fff7d1;
    font-family:var(--font-display);
    font-size:28px;
    line-height:1;
    text-shadow:0 2px 0 rgba(42,102,20,.35);
    box-shadow:0 6px 12px rgba(53,88,26,.18);
}
.book-v5-hero-overlay strong{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(48px,11vw,74px);
    line-height:.94;
    color:#fff;
    text-shadow:0 4px 0 rgba(70,43,17,.38), 0 14px 24px rgba(28,18,8,.3);
}

.book-v5-shell{
    background:rgba(255,252,246,.95);
    border:2px solid #efdca6;
    border-radius:34px;
    box-shadow:0 12px 30px rgba(72,100,41,.10), inset 0 1px 0 rgba(255,255,255,.98);
    padding:20px 18px 18px;
}
.book-v5-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:start;
    margin-bottom:16px;
}
.book-v5-heading h1{
    margin:0;
    font-family:var(--font-display);
    font-size:44px;
    line-height:.95;
    color:#2d9748;
}
.book-v5-heading p{
    margin:10px 0 0;
    color:#65574a;
    font-size:18px;
    line-height:1.45;
}
.book-v5-count{
    min-width:108px;
    border-radius:24px;
    background:#f6f0dc;
    border:2px solid #ecd698;
    padding:12px 10px;
    text-align:center;
}
.book-v5-count b{display:block;font-family:var(--font-display);font-size:38px;line-height:1;color:#cf8c1d}
.book-v5-count small{display:block;margin-top:2px;font-size:15px;color:#86674f;font-weight:800}

.book-v5-progress{
    margin-bottom:16px;
    padding:14px 14px 16px;
    border-radius:24px;
    background:#fffaf0;
    border:2px solid #efdfb3;
}
.book-v5-progress-head{display:flex;justify-content:space-between;align-items:end;gap:10px}
.book-v5-progress-head b{display:block;font-size:22px;color:#4f3d34}
.book-v5-progress-head small{display:block;margin-top:4px;font-size:14px;color:#88796d}
.book-v5-progress-head span{font-family:var(--font-display);font-size:30px;color:#2d9748}
.book-v5-progress-bar{margin-top:12px;height:18px;border-radius:999px;background:#ece4d3;border:2px solid #ead7a7;overflow:hidden}
.book-v5-progress-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(180deg,#83eb47,#41bf21)}

.book-v5-list{display:flex;flex-direction:column;gap:12px}
.book-v5-chapter{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto auto;
    gap:14px;
    align-items:center;
    padding:14px 14px 14px 12px;
    border-radius:24px;
    background:#fffdf8;
    border:2px solid #f0dfb0;
    text-decoration:none;
    box-shadow:0 7px 18px rgba(88,115,49,.08);
    transition:transform .16s ease, box-shadow .16s ease;
}
.book-v5-chapter:hover{transform:translateY(-2px)}
.book-v5-num{
    width:64px;height:64px;border-radius:20px;
    display:grid;place-items:center;
    font-family:var(--font-display);
    font-size:28px;
    color:#fff;
    background:linear-gradient(180deg,#76d53a,#2cab21);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 6px 12px rgba(77,126,36,.18);
}
.book-v5-copy{display:flex;flex-direction:column;min-width:0}
.book-v5-copy b{font-size:23px;color:#4f3d34;line-height:1.05}
.book-v5-copy small{margin-top:4px;font-size:15px;line-height:1.38;color:#78695c}
.book-v5-status{
    padding:8px 12px;
    border-radius:999px;
    background:#edf8d9;
    color:#4b932d;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
}
.book-v5-go{width:15px;height:15px;border-top:4px solid #5f483a;border-right:4px solid #5f483a;transform:rotate(45deg);margin-right:4px}
.book-v5-chapter.is-pending .book-v5-status{background:#fff1c9;color:#b77a12}
.book-v5-chapter.is-done .book-v5-status{background:#dff6dd;color:#2f9d3d}
.book-v5-chapter.is-done .book-v5-num{background:linear-gradient(180deg,#4fe389,#1ca84a)}

/* mobile-first: base (era @media (max-width: 560px)) */
    .bib-v3 .page-shell-v3:has(.book-v5){padding:12px 10px 60px}
    .book-v5-back img{width:64px}
    .book-v5-hero{min-height:290px;border-radius:30px}
    .book-v5-cover-media{min-height:290px}
    .book-v5-hero-overlay{padding:20px 16px 16px}
    .book-v5-hero-overlay span{font-size:22px;padding:7px 14px}
    .book-v5-hero-overlay strong{font-size:56px}
    .book-v5-shell{padding:18px 14px 16px;border-radius:28px}
    .book-v5-heading{grid-template-columns:minmax(0,1fr) 90px}
    .book-v5-heading h1{font-size:36px}
    .book-v5-heading p{font-size:16px;margin-top:8px}
    .book-v5-count{min-width:0;padding:10px 8px;border-radius:20px}
    .book-v5-count b{font-size:32px}
    .book-v5-count small{font-size:13px}
    .book-v5-progress-head b{font-size:18px}
    .book-v5-progress-head span{font-size:24px}
    .book-v5-chapter{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:12px}
    .book-v5-num{width:56px;height:56px;border-radius:18px;font-size:24px}
    .book-v5-copy b{font-size:19px}
    .book-v5-copy small{font-size:14px}
    .book-v5-status{grid-column:2/3;justify-self:start;margin-top:6px;font-size:12px;padding:7px 11px}
/* fim: era @media (max-width: 560px) */


/* ========================================================================== */
/* Book v6 — lista de capítulos fiel ao modelo aprovado                       */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.book-v6){
    background:#ddecad url('../img/backgrounds/bg-garden-frame.webp') center top / cover fixed no-repeat;
}

.bib-v3 .page-shell-v3:has(.book-v6){
    max-width:820px;
    padding:0 0 64px;
}
.bib-v3 .page-shell-v3:has(.book-v6)::before{display:none!important}

.book-v6{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
}

.book-v6-hero{
    position:relative;
    width:100%;
    aspect-ratio:1.58/1;
    min-height:360px;
    overflow:hidden;
    background:#dcebb7;
    border-radius:0 0 44px 44px;
    border:2px solid rgba(255,255,255,.95);
    border-top:0;
    box-shadow:0 8px 20px rgba(70,106,43,.16);
    isolation:isolate;
}

.book-v6-cover-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index:0;
}

.book-v6-nav{
    position:absolute;
    z-index:6;
    top:24px;
    left:28px;
    right:28px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.book-v6-nav-btn{
    width:82px;
    height:82px;
    padding:0;
    border:0;
    background:none;
    display:grid;
    place-items:center;
    cursor:pointer;
    filter:drop-shadow(0 7px 10px rgba(63,69,29,.18));
    transition:transform .16s ease;
}
.book-v6-nav-btn:hover{transform:translateY(-2px) scale(1.025)}
.book-v6-nav-btn img{width:100%;height:100%;object-fit:contain;display:block}
.book-v6-options img{width:82px;height:82px}

.book-v6-title{
    position:absolute;
    z-index:5;
    left:16px;
    right:16px;
    bottom:29px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    pointer-events:none;
}

.book-v6-title span{
    font-family:var(--font-display);
    font-size:clamp(22px,5vw,34px);
    line-height:1;
    color:#7ee34d;
    -webkit-text-stroke:1px rgba(41,95,23,.85);
    text-shadow:0 3px 0 rgba(40,86,24,.5),0 2px 8px rgba(25,38,10,.28);
    margin-bottom:6px;
}

.book-v6-title strong{
    font-family:var(--font-display);
    font-size:clamp(58px,14vw,104px);
    line-height:.82;
    color:#fff;
    -webkit-text-stroke:3px #3e2b1d;
    text-shadow:0 7px 0 rgba(66,43,25,.9),0 10px 16px rgba(39,28,16,.35);
    letter-spacing:-1px;
}

.book-v6-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px 20px 24px;
}

.book-v6-chapter{
    position:relative;
    display:grid;
    grid-template-columns:200px minmax(0,1fr) 30px;
    align-items:center;
    gap:22px;
    min-height:168px;
    padding:10px 24px 10px 10px;
    border-radius:34px;
    text-decoration:none;
    color:#4d4038;
    background:linear-gradient(180deg,rgba(255,254,249,.98),rgba(255,252,244,.98));
    border:3px solid rgba(242,218,159,.95);
    box-shadow:0 7px 0 rgba(105,146,63,.12),0 12px 25px rgba(69,96,41,.10),inset 0 1px 0 rgba(255,255,255,1);
    transition:transform .16s ease,box-shadow .16s ease;
    overflow:hidden;
}
.book-v6-chapter:hover{transform:translateY(-2px);box-shadow:0 9px 0 rgba(105,146,63,.12),0 16px 28px rgba(69,96,41,.13),inset 0 1px 0 #fff}

.book-v6-thumb{
    position:relative;
    width:200px;
    height:146px;
    display:block;
    overflow:hidden;
    border-radius:25px;
    border:3px solid #e4c681;
    background:#efe9d5;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.book-v6-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.book-v6-done{
    position:absolute;
    right:7px;
    top:7px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#38bd46;
    border:2px solid #fff;
    color:#fff;
    font-style:normal;
    font-size:18px;
    box-shadow:0 4px 8px rgba(38,114,42,.24);
}

.book-v6-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.book-v6-copy b{
    font-family:var(--font-display);
    font-size:clamp(30px,5.2vw,43px);
    line-height:1;
    color:#e45c39;
    margin-bottom:15px;
    text-shadow:0 2px 0 rgba(255,255,255,.7);
}

.book-v6-copy small{
    font-family:var(--font-ui);
    font-size:clamp(20px,3.7vw,29px);
    line-height:1.28;
    color:#4d4038;
}

.book-v6-arrow{
    width:19px;
    height:19px;
    border-top:6px solid #4d4038;
    border-right:6px solid #4d4038;
    transform:rotate(45deg);
    border-radius:2px;
    justify-self:center;
}

.book-v6-chapter.is-pending{border-color:#f0d68e}
.book-v6-chapter.is-done{border-color:#cfe9a3}

/* mobile-first: base (era @media (max-width:700px)) */
    .book-v6-hero{min-height:0;aspect-ratio:1.58/1;border-radius:0 0 34px 34px}
    .book-v6-nav{top:15px;left:17px;right:17px}
    .book-v6-nav-btn,.book-v6-options img{width:64px;height:64px}
    .book-v6-title{bottom:20px}
    .book-v6-title span{font-size:23px;margin-bottom:4px}
    .book-v6-title strong{font-size:64px;-webkit-text-stroke:2px #3e2b1d;text-shadow:0 5px 0 rgba(66,43,25,.9),0 8px 12px rgba(39,28,16,.3)}
    .book-v6-list{padding:15px 12px 22px;gap:10px}
    .book-v6-chapter{grid-template-columns:126px minmax(0,1fr) 22px;gap:14px;min-height:112px;padding:8px 14px 8px 8px;border-radius:25px;border-width:2px}
    .book-v6-thumb{width:126px;height:94px;border-radius:19px;border-width:2px}
    .book-v6-copy b{font-size:27px;margin-bottom:8px}
    .book-v6-copy small{font-size:17px;line-height:1.25}
    .book-v6-arrow{width:14px;height:14px;border-top-width:5px;border-right-width:5px}
    .book-v6-done{width:26px;height:26px;font-size:15px}
/* fim: era @media (max-width:700px) */

@media (max-width:420px){
    .book-v6-nav-btn,.book-v6-options img{width:58px;height:58px}
    .book-v6-title strong{font-size:56px}
    .book-v6-title span{font-size:20px}
    .book-v6-list{padding-left:9px;padding-right:9px}
    .book-v6-chapter{grid-template-columns:116px minmax(0,1fr) 18px;gap:11px;min-height:106px;border-radius:22px}
    .book-v6-thumb{width:116px;height:88px;border-radius:17px}
    .book-v6-copy b{font-size:24px;margin-bottom:6px}
    .book-v6-copy small{font-size:15px;line-height:1.24}
}


/* Book v6.2 — vídeo visível + entrada animada dos capítulos */
.book-v6-cover-media[hidden],
.book-v6-hero .is-video-fallback[hidden]{
    display:none !important;
}

.book-v6-hero video.book-v6-cover-media{
    display:block;
    visibility:visible;
    opacity:1;
}

/* ========================================================================== */
/* Book v5.4 — ajuste exclusivo da borda inferior da capa                    */
/* Curva externa, levemente irregular, com moldura em degradê                */
/* ========================================================================== */
.book-v5-hero{
    /* A moldura é o próprio container; não altera posição, conteúdo ou altura. */
    border:2px solid rgba(255,255,255,.92);
    border-radius:36px 36px 0 0;
    padding:4px;
    overflow:hidden;
    background:
      linear-gradient(118deg,
        #f7f4bf 0%,
        #dff27e 12%,
        #93d54f 30%,
        #d8f36c 49%,
        #78bf37 67%,
        #e7f48a 84%,
        #f7efb7 100%);
    clip-path:polygon(
        0 0,
        100% 0,
        100% 86.7%,
        97% 88.7%,
        92% 91.0%,
        86% 93.0%,
        79% 94.7%,
        71% 96.2%,
        63% 97.7%,
        55% 99.0%,
        49% 99.5%,
        42% 99.0%,
        34% 98.0%,
        27% 96.7%,
        19% 95.0%,
        12% 92.8%,
        6% 90.2%,
        0 87.5%
    );
    filter:drop-shadow(0 12px 15px rgba(67,102,38,.16));
    box-shadow:none;
}

.book-v5-cover-media,
.book-v5-hero .is-video-fallback{
    border-radius:31px 31px 0 0;
    clip-path:polygon(
        0 0,
        100% 0,
        100% 86.6%,
        97% 88.6%,
        92% 90.9%,
        86% 92.9%,
        79% 94.6%,
        71% 96.1%,
        63% 97.6%,
        55% 98.9%,
        49% 99.4%,
        42% 98.9%,
        34% 97.9%,
        27% 96.6%,
        19% 94.9%,
        12% 92.7%,
        6% 90.1%,
        0 87.4%
    );
}

/* Fio luminoso acompanhando a moldura, sem mudar o restante da capa. */
.book-v5-hero::before{
    content:"";
    position:absolute;
    inset:5px;
    z-index:6;
    pointer-events:none;
    border:1px solid rgba(255,255,229,.66);
    border-radius:30px 30px 0 0;
    clip-path:polygon(
        0 0,
        100% 0,
        100% 86.5%,
        97% 88.5%,
        92% 90.8%,
        86% 92.8%,
        79% 94.5%,
        71% 96.0%,
        63% 97.5%,
        55% 98.8%,
        49% 99.3%,
        42% 98.8%,
        34% 97.8%,
        27% 96.5%,
        19% 94.8%,
        12% 92.6%,
        6% 90.0%,
        0 87.3%
    );
}

/* mobile-first: base (era @media (max-width:560px)) */
    .book-v5-hero{
        border-radius:30px 30px 0 0;
        padding:3px;
    }
    .book-v5-cover-media,
    .book-v5-hero .is-video-fallback{
        border-radius:27px 27px 0 0;
    }
/* fim: era @media (max-width:560px) */

/* ========================================================================== */
/* Book v6 — acabamento final da capa                                         */
/* - remove as tentativas v6.3/v6.4/v6.6 conflitantes                         */
/* - recorte curvo na própria mídia                                           */
/* - borda verde fina seguindo EXATAMENTE o recorte                           */
/* - sombra acompanhando a borda                                              */
/* - background realmente fixo/cover, inclusive no Safari/iPhone              */
/* ========================================================================== */

/* O body fica neutro nessa tela. O fundo é desenhado por um pseudo-elemento
   FIXED da page-shell; assim o conteúdo rola e o cenário fica parado. */
body.bib-v3.is-immersive:has(.book-v6){
    background:#ddecad !important;
}

.bib-v3 .page-shell-v3:has(.book-v6){
    position:relative;
    z-index:0;
    max-width:820px;
    padding:0 0 64px;
    background:transparent;
}

.bib-v3 .page-shell-v3:has(.book-v6)::before{
    content:"" !important;
    display:block !important;
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:#ddecad url('../img/backgrounds/bg-garden-frame.webp') center center / cover no-repeat;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}

.book-v6{
    position:relative;
    z-index:1;
}

/* A hero não cria faixa, moldura ou recorte próprio. */
.book-v6-hero{
    position:relative;
    width:100%;
    aspect-ratio:1.58/1;
    min-height:360px;
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    isolation:isolate;
}

/* O RECORTE EXISTE NA PRÓPRIA FOTO/VÍDEO (vale para imagem, vídeo e fallback).
   Laterais: a mídia termina no meio das hastes da moldura (3,6% e 96,4% da
   largura; as hastes da arte vão de 2,7–4,6% e 95,4–97,3%), então nada dela
   aparece para fora. Base: curva escondida sob a faixa inferior da moldura.
   Só recorta: object-fit e enquadramento continuam os mesmos. */
.book-v6-cover-media,
.book-v6-hero .is-video-fallback{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;
    z-index:2;
    border:0;
    border-radius:0;
    clip-path:polygon(
        3.6% 0,
        96.4% 0,
        96.4% 88.2%,
        94.0% 91.2%,
        88.5% 94.6%,
        80.0% 97.0%,
        68.0% 98.8%,
        54.0% 99.6%,
        46.0% 99.6%,
        32.0% 98.8%,
        20.0% 97.0%,
        11.5% 94.6%,
        6.0% 91.2%,
        3.6% 88.2%
    );
}

/* O fallback só aparece se o vídeo realmente falhar. */
.book-v6-cover-media[hidden],
.book-v6-hero .is-video-fallback[hidden]{
    display:none !important;
}

.book-v6-hero video.book-v6-cover-media{
    display:block;
    visibility:visible;
    opacity:1;
}

/* MOLDURA: arte de trepadeiras (decor-chapters-frame) sobre a capa.
   Largura da capa, altura pela proporção da arte (sem deformar). A base fica
   presa ao pé da capa, com a faixa inferior cobrindo o recorte curvo da foto e
   terminando antes do primeiro card; o excedente de cima sai pelo topo da
   tela. É só decoração: não recebe clique, e o título e os botões (z-index 6)
   ficam por cima dela. */
.book-v6-frame{
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    bottom:0;
    aspect-ratio:1374 / 1097;
    background:url('../img/decor/decor-chapters-frame.webp') center bottom / 100% auto no-repeat;
    transform:translateY(4%);
    pointer-events:none;
}

/* Moldura própria por livro (data-book-slug na .book-v6). Só troca a arte:
   posição, tamanho e recorte da mídia são os de cima. Cada arte nova deve ser
   exportada no mesmo canvas da padrão (1374x1097, base alinhada embaixo, hastes
   cobrindo 3,6% e 96,4% da largura). Livro sem regra aqui usa a padrão. */
.book-v6[data-book-slug="exodo"] .book-v6-frame{
    background-image:url('../img/decor/decor-chapters-frame-exodo.webp');
}
.book-v6[data-book-slug="levitico"] .book-v6-frame{
    background-image:url('../img/decor/decor-chapters-frame-levitico.webp');
}

/* Título e botões continuam sobre a capa e não são engolidos pela borda. */
.book-v6-nav{
    z-index:6;
}

.book-v6-title{
    z-index:6;
    bottom:31px;
}

/* Dá um pouco de respiro para a sombra antes do primeiro card. */
.book-v6-list{
    padding-top:24px;
}

/* mobile-first: base (era @media (max-width:700px)) */
    .book-v6-hero{
        min-height:0;
        aspect-ratio:1.58/1;
    }

    .book-v6-title{
        bottom:25px;
    }

    .book-v6-list{
        padding-top:20px;
    }
/* fim: era @media (max-width:700px) */


/* ========================================================================== */
/* Book v6 — background fixo + cover                                          */
/* O fundo fica preso ao viewport e apenas o conteúdo da página rola.          */
/* ========================================================================== */
body.bib-v3.is-immersive:has(.book-v6){
    position: relative !important;
    isolation: isolate;
    background: transparent !important;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Fundo preso diretamente ao viewport.
   Esta abordagem evita os problemas de background-attachment:fixed no iPhone. */
body.bib-v3.is-immersive:has(.book-v6)::before{
    content: "";
    position: fixed;
    inset: 0;
    left: var(--app-gutter);
    right: var(--app-gutter);
    width: auto;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
    background-image: url('../img/backgrounds/bg-garden-frame.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ddecad;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Remove o pseudo-fundo anterior da page-shell para não haver dois fundos. */
.bib-v3 .page-shell-v3:has(.book-v6)::before{
    content: none !important;
    display: none !important;
}

/* O conteúdo permanece acima do fundo fixo. */
.bib-v3 .page-shell-v3:has(.book-v6){
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.book-v6{
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Loja v2 — mesmo acabamento de card da Home (claro, arredondado, sombra
   suave), com identidade própria: placa de madeira, mascote e banca.
   Nenhuma compra está liberada no backend, então todo botão aqui é um
   estado "Em breve": arte dessaturada, disabled e sem ação.
   ========================================================================== */
.store-v2{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* --- Topo: identidade da loja ------------------------------------------- */
.store-v2-hero{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
        "titulo titulo titulo"
        "mascote copy banca";
    align-items:center;
    justify-items:center;
    gap:8px 6px;
    padding:14px 12px 12px;
    border-radius:30px;
    background:linear-gradient(165deg,#fffdf5 0%,#fff1cd 100%);
    box-shadow:0 8px 0 rgba(62,109,47,.10),0 16px 30px rgba(66,89,47,.12);
}
.store-v2-hero-title{
    grid-area:titulo;
    margin:0;
    line-height:0;
    width:100%;
}
.store-v2-hero-title img{
    display:block;
    width:min(100%, 280px);
    height:auto;
    margin:0 auto;
    filter:drop-shadow(0 6px 10px rgba(96,76,24,.18));
}
.store-v2-hero-mascot{
    grid-area:mascote;
    width:clamp(66px, 20vw, 88px);
    height:auto;
}
.store-v2-hero-stand{
    grid-area:banca;
    width:clamp(58px, 17vw, 78px);
    height:auto;
    filter:drop-shadow(0 6px 8px rgba(111,82,22,.14));
}
.store-v2-hero-copy{
    grid-area:copy;
    margin:0;
    text-align:center;
    font-size:clamp(12px, 3.4vw, 14px);
    font-weight:700;
    line-height:1.32;
    color:#62554a;
}

/* --- Saldo: mesmos ícones de moeda da Home ------------------------------ */
.store-v2-wallet{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
    padding:10px;
    border-radius:26px;
    background:var(--v3-paper);
    box-shadow:0 6px 0 rgba(62,109,47,.09),0 12px 22px rgba(66,89,47,.10);
}
.store-v2-coin{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    padding:6px 4px;
    border-radius:18px;
    background:var(--v3-cream);
}
.store-v2-coin img{
    width:clamp(26px, 7.6vw, 34px);
    height:auto;
    flex:none;
}
.store-v2-coin span{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.store-v2-coin small{
    font-size:clamp(10px, 2.8vw, 12px);
    font-weight:800;
    line-height:1.15;
    color:#8a7a6a;
}
.store-v2-coin b{
    font-size:clamp(15px, 4.2vw, 18px);
    font-weight:900;
    line-height:1.1;
    color:#4f3d34;
    font-variant-numeric:tabular-nums;
}

/* --- Título de seção em placa ------------------------------------------- */
.store-v2-section-title{
    margin:2px 0 0;
    line-height:0;
    text-align:center;
}
.store-v2-section-title img{
    display:block;
    width:min(100%, 300px);
    height:auto;
    margin:0 auto;
    filter:drop-shadow(0 5px 8px rgba(96,76,24,.16));
}

/* --- Pacotes de cartas --------------------------------------------------- */
.store-v2-packs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}
.store-v2-pack{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:12px 10px 14px;
    row-gap:4px;
    border-radius:26px;
    background:var(--v3-paper);
    box-shadow:0 7px 0 rgba(62,109,47,.10),0 14px 24px rgba(66,89,47,.11);
    text-align:center;
}
.store-v2-pack.is-featured{
    outline:3px solid #ffd747;
    outline-offset:-3px;
}
.store-v2-pack-art{
    width:min(100%, 118px);
    height:auto;
    filter:drop-shadow(0 8px 10px rgba(111,82,22,.18));
}
.store-v2-pack h3{
    margin:6px 0 0;
    font-size:clamp(14px, 4vw, 17px);
    font-weight:900;
    line-height:1.15;
    color:#4f3d34;
}
.store-v2-pack p{
    margin:0;
    font-size:clamp(11px, 3.1vw, 13px);
    font-weight:700;
    line-height:1.3;
    color:#7b6a5c;
}
.store-v2-ribbon{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    padding:3px 10px;
    border-radius:999px;
    background:#ffd747;
    color:#7a5a12;
    font-size:10px;
    font-weight:900;
    line-height:1.3;
    white-space:nowrap;
    box-shadow:0 3px 0 rgba(122,90,18,.18);
}
.store-v2-pack.is-featured .store-v2-pack-art{
    margin-top:14px;
}
.store-v2-price{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:4px 0 0;
    padding:3px 10px;
    border-radius:999px;
    background:var(--v3-cream);
}
.store-v2-price img{
    width:clamp(18px, 5vw, 22px);
    height:auto;
}
.store-v2-price b{
    font-size:clamp(13px, 3.7vw, 15px);
    font-weight:900;
    color:#4f3d34;
    font-variant-numeric:tabular-nums;
}
.store-v2-price small{
    font-size:clamp(10px, 2.8vw, 11px);
    font-weight:800;
    color:#8a7a6a;
}

/* --- Baú surpresa: o produto de maior destaque -------------------------- */
.store-v2-chest{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:clamp(8px, 3vw, 14px);
    padding:14px clamp(12px, 4vw, 16px);
    border-radius:30px;
    background:linear-gradient(150deg,#fffdf5 0%,#ffeec2 100%);
    box-shadow:0 8px 0 rgba(62,109,47,.10),0 16px 28px rgba(66,89,47,.12);
    outline:3px solid #ffd747;
    outline-offset:-3px;
}
.store-v2-chest-art{
    width:clamp(104px, 30vw, 140px);
    height:auto;
    filter:drop-shadow(0 8px 12px rgba(111,82,22,.2));
}
.store-v2-chest-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
}
.store-v2-chest-copy h3{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(20px, 5.8vw, 26px);
    line-height:1.05;
    color:#4f3d34;
}
.store-v2-chest-copy p{
    margin:0;
    font-size:clamp(12px, 3.3vw, 14px);
    font-weight:700;
    line-height:1.3;
    color:#62554a;
}

/* --- Pix: continua apenas preparado ------------------------------------- */
.store-v2-pix{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px 12px;
    border-radius:30px;
    background:var(--v3-paper);
    box-shadow:0 8px 0 rgba(62,109,47,.10),0 16px 28px rgba(66,89,47,.12);
}
.store-v2-pix-icon{
    width:clamp(40px, 11vw, 50px);
    height:auto;
}
.store-v2-pix-banner{
    display:block;
    width:min(100%, 420px);
    height:auto;
}

/* --- Ação de compra: sempre bloqueada ----------------------------------- */
.store-v2-buy{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    /* auto: alinha a ação na base mesmo quando os cards da linha têm textos de
       alturas diferentes. */
    margin-top:auto;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    width:min(100%, 170px);
    cursor:not-allowed;
}
.store-v2-buy img{
    display:block;
    width:100%;
    height:auto;
    /* Dessaturado de propósito: o backend ainda não permite comprar, então a
       arte não pode parecer um botão ativo. */
    filter:grayscale(.42) opacity(.72);
}
.store-v2-soon{
    padding:2px 10px;
    border-radius:999px;
    background:var(--v3-cream);
    border:2px solid rgba(139,74,216,.18);
    color:#8a7a6a;
    font-size:clamp(10px, 2.7vw, 11px);
    font-weight:900;
    line-height:1.3;
    white-space:nowrap;
}
.store-v2-chest .store-v2-buy{
    width:min(100%, 160px);
    align-items:flex-start;
    margin-top:6px;
}
.store-v2-pix .store-v2-buy{
    margin-top:0;
    width:min(100%, 190px);
}

/* ==========================================================================
   Loja (/loja) — carteira, envelopes de cartas e pacotes de Ouro.
   O fundo continua vindo da camada fixa do app-shell (via .store-screen).
   A coluna do app tem no máximo 430px (--app-max): os dois cards de envelope
   ficam lado a lado só quando a área de conteúdo comporta (container query),
   e o seletor de moeda muda de horizontal para empilhado conforme a largura
   do próprio card. Só o Envelope Comum compra de verdade; Premium e Ouro são
   vitrine travada.
   ========================================================================== */
.loja3{
    display:flex;
    flex-direction:column;
    gap:34px;
}

/* --- Títulos em placa (imagem com alt) ----------------------------------- */
.loja3-title{
    position:relative;
    z-index:2;
    width:min(66%, 260px);
    margin:0 auto -48px;
    line-height:0;
}
.loja3-title img,
.loja3-section-title img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 5px 6px rgba(111,63,18,.22));
}
.loja3-section-title{
    width:min(94%, 380px);
    margin:-40px auto 4px;
    line-height:0;
}
.loja3-section-copy{
    max-width:30em;
    margin:0 auto 12px;
    font-size:clamp(12px, 3.5vw, 14px);
    font-weight:800;
    line-height:1.3;
    text-align:center;
    color:#6f5a48;
}

/* --- Painéis ------------------------------------------------------------- */
.loja3-panel{
    position:relative;
    /* Contêiner da vitrine: os cards de envelope decidem 1 ou 2 colunas por ele. */
    container-type:inline-size;
    padding:14px clamp(10px, 3.2vw, 14px) 16px;
    border-radius:26px;
    background:var(--v3-paper);
    box-shadow:0 7px 0 rgba(62,109,47,.10),0 14px 26px rgba(66,89,47,.11);
}
/* A placa "Loja" invade 14px do topo do painel: 26px deixam 12px de respiro até as moedas. */
.loja3-panel-wallet{padding-top:26px}

/* --- Carteira ------------------------------------------------------------ */
.loja3-wallet{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:8px;
}
/* Título com o ícone como apoio (mesma altura visual do texto, não um bloco). */
.loja3-wallet-label{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 2px 2px;
    font-size:clamp(15px, 4.2vw, 17px);
    font-weight:900;
    line-height:1.2;
    color:#5a4233;
}
.loja3-wallet-label img{width:28px;height:auto;flex:none}
.loja3-chip{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    padding:7px 6px;
    border-radius:18px;
    background:#fff;
    box-shadow:inset 0 0 0 2px rgba(214,190,150,.38),0 3px 0 rgba(120,90,50,.08);
}
.loja3-chip.is-coin{grid-column:span 2}
.loja3-chip img{width:clamp(24px, 7.4vw, 32px);height:auto;flex:none}
.loja3-chip span{display:flex;flex-direction:column;min-width:0}
/* Linha dos envelopes: mesma leitura das moedas (ícone à esquerda, rótulo e
   valor), ícones com a mesma altura para as duas pílulas alinharem. */
.loja3-chip.is-envelope{grid-column:span 3;gap:8px;padding:7px 10px}
.loja3-chip.is-envelope img{width:auto;height:clamp(24px, 7.4vw, 30px)}
.loja3-chip.is-soon{background:#faf6ff;box-shadow:inset 0 0 0 2px rgba(181,124,240,.28),0 3px 0 rgba(90,40,140,.06)}
.loja3-chip.is-soon img{opacity:.75}
.loja3-chip.is-soon span{align-items:flex-start;gap:2px}
.loja3-chip small{
    font-size:clamp(10px, 2.9vw, 12px);
    font-weight:800;
    line-height:1.15;
    color:#8a7a6a;
}
.loja3-chip b{
    font-size:clamp(16px, 4.6vw, 20px);
    font-weight:900;
    line-height:1.1;
    color:#4f3d34;
    font-variant-numeric:tabular-nums;
}
.loja3-chip em{
    padding:1px 7px;
    border-radius:999px;
    background:#efe3fd;
    font-style:normal;
    font-size:clamp(10px, 2.8vw, 11px);
    font-weight:900;
    line-height:1.35;
    color:#7b3fc4;
    white-space:nowrap;
}

/* --- Envelopes ----------------------------------------------------------- */
/* Comum e Premium sempre lado a lado (inclusive em 320px); o conteúdo do card
   escala pela largura do próprio card (unidades cqi). */
.loja3-envelopes{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(8px, 2.6vw, 10px);
}
.loja3-card{
    container-type:inline-size;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:4px solid var(--card-edge);
    border-radius:24px;
    background:#fff;
    box-shadow:0 6px 0 var(--card-shadow),0 14px 24px rgba(66,89,47,.14);
}
.loja3-card.is-common{--card-edge:#4cc9e2;--card-shadow:rgba(28,120,150,.30);--card-soft:#e3f7fb;--card-pick:#29a6d8}
.loja3-card.is-premium{--card-edge:#b57cf0;--card-shadow:rgba(110,50,170,.30);--card-soft:#f3e9fd;--card-pick:#9b5de5}
.loja3-card-art{
    position:relative;
    display:grid;
    place-items:center;
    /* Altura mínima de 80% da largura do card (o antigo aspect-ratio 1 / .8), em
       cqi: no Safari até o 16, aspect-ratio neste item de flex em coluna fazia a
       LARGURA seguir a altura do conteúdo, a área passava do card (cortada pelo
       overflow) e a arte saía para a direita. */
    min-height:80cqi;
    /* Respiro sob o envelope: o bloco de informações sobe 18px sobre a arte, então
       sobram ~16px livres entre a base do envelope e o bloco. */
    padding:8px 10px 34px;
    background:center / cover no-repeat;
}
/* Arte recortada rente ao desenho (618x518): a caixa continua o quadrado que a
   arte antiga, com margem transparente, ocupava (680x680), e o padding põe o
   desenho no mesmo lugar dela (x 31, y 77). O padding % segue a mesma largura
   do width, por isso o calc; contain preserva a proporção. */
.loja3-card-art > img{
    --art-w:min(74%, 232px);
    width:var(--art-w);
    max-height:100%;
    aspect-ratio:1;
    height:auto;
    box-sizing:border-box;
    padding:calc(var(--art-w) * .1132) calc(var(--art-w) * .0456) calc(var(--art-w) * .125);
    object-fit:contain;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.25));
    /* Chacoalhada sutil, como se houvesse algo dentro: ~0,7s de movimento e o
       resto do ciclo parado. Só transform: não mexe no layout do card. */
    transform-origin:50% 80%;
    animation:loja3-envelope-shake 4.8s ease-in-out infinite;
}
/* Os dois cards não chacoalham juntos. */
.loja3-card.is-premium .loja3-card-art > img{animation-delay:2.2s}
@keyframes loja3-envelope-shake{
    0%, 15%, 100%{transform:none}
    3%{transform:translateX(-2.5%) rotate(-3deg)}
    6%{transform:translateX(2.5%) rotate(3deg)}
    9%{transform:translateX(-1.5%) rotate(-2deg)}
    12%{transform:translateX(1%) rotate(1deg)}
}
@media (prefers-reduced-motion: reduce){
    .loja3-card-art > img{animation:none}
}
.loja3-soon-tag{
    position:absolute;
    top:8px;
    right:8px;
    padding:3px 10px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 3px 0 rgba(90,40,140,.22);
    color:#7b3fc4;
    font-size:12px;
    font-weight:900;
    line-height:1.3;
}
.loja3-card-body{
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(5px, 4cqi, 8px);
    margin-top:-18px;
    padding:clamp(9px, 7cqi, 12px) clamp(6px, 5cqi, 10px) clamp(9px, 7cqi, 12px);
    border-radius:22px 22px 0 0;
    background:linear-gradient(var(--card-soft), #fff 58%);
    /* Borda superior clara + sombra suave: o bloco se destaca da arte. */
    box-shadow:0 -3px 0 rgba(255,255,255,.85),0 -8px 16px rgba(0,0,0,.12);
    text-align:center;
}
.loja3-card-body h3{
    margin:0;
    font-family:var(--font-display);
    /* Sempre uma linha: "Envelope Premium" mede ~8,3em e o espaço útil é ~90% do
       card, então até ~10,9cqi cabe; 10,2cqi deixa folga. Sem piso em px de propósito. */
    font-size:min(24px, 10.2cqi);
    line-height:1.05;
    white-space:nowrap;
    color:#34305a;
}
.loja3-card-desc{
    margin:0;
    font-size:clamp(10px, 7cqi, 14px);
    font-weight:700;
    line-height:1.3;
    color:#6a5a4d;
    /* No máximo duas linhas, equilibradas nos cards estreitos (lado a lado no mobile). */
    text-wrap:balance;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
}

/* Seletor de moeda: uma opção por preço; só uma marcada (radio). */
.loja3-pay{
    width:100%;
    min-inline-size:0;
    margin:auto 0 0;
    padding:8px 6px 6px;
    border:0;
    border-radius:16px;
    background:rgba(255,255,255,.8);
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.05);
}
.loja3-pay legend{
    float:left;
    width:100%;
    padding:0 2px 6px;
    font-size:clamp(11px, 6.6cqi, 13px);
    font-weight:900;
    line-height:1.2;
    text-align:left;
    color:#5a4a3e;
}
.loja3-pay-options{
    clear:both;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:5px;
}
.loja3-coin-option{position:relative;display:block;min-width:0;cursor:pointer}
.loja3-coin-option input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:inherit;
}
.loja3-coin-face{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:56px;
    padding:6px 2px;
    border:2px solid transparent;
    border-radius:14px;
    background:#f4eee3;
    transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.loja3-coin-face img{width:24px;height:auto;flex:none}
.loja3-coin-face > span{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.05}
.loja3-coin-face b{
    font-size:16px;
    font-weight:900;
    color:#3f2f25;
    font-variant-numeric:tabular-nums;
}
.loja3-coin-face small{font-size:10px;font-weight:800;color:#7b6a5c}
/* Card largo: ícone ao lado do valor, como na referência. */
@container (min-width: 280px){
    .loja3-coin-face{flex-direction:row;gap:6px;min-height:52px}
    .loja3-coin-face img{width:30px}
    .loja3-coin-face > span{align-items:flex-start}
    .loja3-coin-face b{font-size:18px}
    .loja3-coin-face small{font-size:11px}
}
.loja3-coin-option input:checked + .loja3-coin-face{
    border-color:var(--card-pick);
    background:#fff;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--card-pick) 22%, transparent);
}
.loja3-coin-option input:focus-visible + .loja3-coin-face{outline:3px solid #2f7fd6;outline-offset:2px}
.loja3-coin-option:has(input:disabled){cursor:not-allowed}
.loja3-coin-option input:disabled + .loja3-coin-face{opacity:.48;filter:grayscale(.6)}
.loja3-pay-soon{
    flex:1;
    display:grid;
    place-items:center;
    padding:14px 8px;
    font-size:13px;
    font-weight:800;
    line-height:1.3;
    color:#7b5aa6;
}

/* --- Botões (HTML/CSS) --------------------------------------------------- */
.loja3-buy{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
    min-height:42px;
    padding:7px 8px;
    border:0;
    border-radius:18px;
    background:linear-gradient(#6bd443,#33a023);
    box-shadow:0 5px 0 #237614,0 9px 14px rgba(40,100,20,.22);
    color:#fff;
    font:inherit;
    font-family:var(--font-display);
    font-size:clamp(13px, 8.2cqi, 19px);
    line-height:1.1;
    text-align:center;
    text-decoration:none;
    text-shadow:0 2px 0 rgba(0,0,0,.2);
    cursor:pointer;
}
.loja3-buy:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #237614}
.loja3-buy:focus-visible{outline:3px solid #2f7fd6;outline-offset:3px}
.loja3-buy:disabled{
    background:linear-gradient(#cfc8bc,#aea696);
    box-shadow:0 4px 0 #8f887c;
    text-shadow:none;
    cursor:not-allowed;
}
.loja3-buy[aria-busy="true"]{opacity:.8}
/* Cards só com nome + botão: o botão fica na base, alinhado entre os cards. */
.loja3-card-body > .loja3-buy{margin-top:auto}
.loja3-buy.is-small{min-height:44px;padding:8px 4px;border-radius:15px;font-size:clamp(14px, 4vw, 17px)}
/* Variante azul: o mesmo botão, só troca a cor. */
.loja3-buy.is-blue{background:linear-gradient(#4cc3f5,#1f8ee0);box-shadow:0 5px 0 #15659f,0 9px 14px rgba(20,80,140,.22)}
.loja3-buy.is-blue:active:not(:disabled){box-shadow:0 2px 0 #15659f}
.loja3-cart{width:1.25em;height:1.25em;flex:none}
.loja3-status{
    margin:0;
    font-size:13px;
    font-weight:800;
    line-height:1.3;
    color:#2f7a22;
}
.loja3-status[data-kind="erro"]{color:#b0412e}

/* --- Comprar Ouro (vitrine; sem compra real) ----------------------------- */
.loja3-gold-soon{
    width:fit-content;
    margin:-6px auto 12px;
    padding:3px 12px;
    border-radius:999px;
    background:#fff1c7;
    color:#8a5a12;
    font-size:12px;
    font-weight:900;
    line-height:1.4;
}
.loja3-gold{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
}
.loja3-gold-pack{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:0;
    padding:12px 6px 10px;
    border-radius:20px;
    background:#fff;
    box-shadow:inset 0 0 0 2px rgba(214,190,150,.38),0 4px 0 rgba(120,90,50,.08);
    text-align:center;
}
/* Arte do pacote + reflexo de sol: uma faixa de luz atravessa o ouro, recortada
   pelo formato da própria imagem (--gold-art), e some.
   Um pacote por vez, num ciclo de 12s: 1º brilha (0–2,3s) -> pausa ~1s -> 2º
   (3,3–5,6s) -> pausa ~1s -> 3º (6,6–8,9s) -> pausa ~3s -> reinicia. */
.loja3-gold-art{
    position:relative;
    display:block;
    width:100%;
    height:clamp(54px, 16vw, 78px);
}
.loja3-gold-art img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 5px 6px rgba(140,90,10,.22));
    animation:loja3-gold-glow 12s ease-in-out infinite;
}
.loja3-gold-art::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg, transparent 38%, rgba(255,253,235,.85) 50%, transparent 62%) no-repeat;
    background-size:260% 100%;
    background-position:130% 0;
    -webkit-mask:var(--gold-art) center / contain no-repeat;
    mask:var(--gold-art) center / contain no-repeat;
    mix-blend-mode:screen;
    opacity:0;
    animation:loja3-gold-shine 12s ease-in-out infinite;
}
/* Um brilho por vez, cada um como evento separado. */
.loja3-gold-pack:nth-child(2) .loja3-gold-art img,.loja3-gold-pack:nth-child(2) .loja3-gold-art::after{animation-delay:3.3s}
.loja3-gold-pack:nth-child(3) .loja3-gold-art img,.loja3-gold-pack:nth-child(3) .loja3-gold-art::after{animation-delay:6.6s}
/* Mesma passagem de antes (2,28s: surge em 0,72s, fica até 1,56s, some); o resto
   do ciclo é pausa. */
@keyframes loja3-gold-shine{
    0%{background-position:130% 0;opacity:0}
    6%{opacity:1}
    13%{opacity:1}
    19%, 100%{background-position:-30% 0;opacity:0}
}
/* O ouro esquenta levemente enquanto a luz passa. */
@keyframes loja3-gold-glow{
    0%, 1%, 20%, 100%{filter:drop-shadow(0 5px 6px rgba(140,90,10,.22))}
    10%{filter:drop-shadow(0 5px 6px rgba(140,90,10,.22)) drop-shadow(0 0 8px rgba(255,214,90,.55)) brightness(1.08)}
}
.loja3-gold-pack h3{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(15px, 4.4vw, 19px);
    line-height:1.1;
    color:#3f2f25;
    white-space:nowrap;
}
.loja3-gold-price{
    width:100%;
    margin:0;
    padding:4px 2px;
    border-radius:12px;
    background:#ffe6a3;
    font-family:var(--font-display);
    font-size:clamp(13px, 4vw, 18px);
    line-height:1.2;
    color:#4a3218;
    white-space:nowrap;
}
/* Fita "Mais popular!" no topo do pacote: reta, centralizada (margin auto, sem
   transform) e sem animação. Metade dela fica acima da borda do card. */
.loja3-gold-ribbon{
    position:absolute;
    top:-14px;
    left:0;
    right:0;
    z-index:1;
    width:92%;
    max-width:150px;
    height:auto;
    margin-inline:auto;
    filter:drop-shadow(0 3px 2px rgba(150,40,20,.25));
    pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
    .loja3-gold-art img,
    .loja3-gold-art::after{animation:none}
}


/* --- Modal de compra de envelope (<dialog> + showModal) ------------------ */
/* Topo com fundo + arte do card, corpo creme com seletor de quantidade
   (pacotes), formas de pagamento e Comprar. O <dialog> cobre a viewport inteira
   (fixo, sem depender de 100dvh nem do margin:auto do navegador) e centraliza
   a moldura com flex: abre sempre no meio da tela, qualquer que seja o scroll.
   A caixa rola por dentro em telas baixas; o fechar fica fora dela (na
   moldura) e não some. */
html.loja3-modal-open{overflow:hidden}
.loja3-modal{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    box-sizing:border-box;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    margin:0;
    padding:12px;
    border:0;
    background:transparent;
    color:inherit;
    overflow:visible;
}
.loja3-modal[open]{
    display:flex;
    align-items:center;
    justify-content:center;
}
.loja3-modal::backdrop{background:rgba(35,28,18,.58)}
.loja3-modal[open] .loja3-modal-frame{animation:loja3-modal-in .18s ease-out}
.loja3-modal[open]::backdrop{animation:loja3-modal-fade .18s ease-out}
.loja3-modal-frame{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(100%, 400px);
    max-height:100%;
}
.loja3-modal-box{
    --card-pick:#3fb62f;
    position:relative;
    min-height:0;
    max-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:4px solid #fff;
    border-radius:32px;
    background:var(--v3-paper);
    box-shadow:0 8px 0 rgba(62,109,47,.18),0 24px 50px rgba(20,30,10,.35);
    text-align:center;
}
/* Fechar: mesmo botão e posição da modal de detalhes das cartas (.card-modal-close,
   app.css), no canto da moldura, fora da caixa que rola. */

/* Topo: o mesmo fundo e a mesma arte do card do Envelope Comum. */
.loja3-modal-hero{
    position:relative;
    display:grid;
    place-items:center;
    height:clamp(136px, 40vw, 176px);
    padding:16px 10px 32px;
    background:center / cover no-repeat;
}
/* Envelope por cima do topo do corpo: a base fica 8px acima do fim do topo e o
   corpo sobe 24px, então ele avança ~16px no corpo. O corpo reserva 26px antes do
   "Quantos você quer?" (~10px livres), em qualquer largura. Centralizado,
   proporção preservada. */
.loja3-modal-art{
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:8px;
    display:block;
    width:auto;
    /* Arte de 5 envelopes (larga): a altura manda; a largura só limita telas
       estreitas, sempre ancorada na base para manter a sobreposição. */
    max-width:78%;
    height:78%;
    margin-inline:auto;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
}
.loja3-modal-body{
    position:relative;
    margin-top:-24px;
    padding:26px clamp(12px, 4vw, 18px) clamp(14px, 4vw, 18px);
    border-radius:26px 26px 0 0;
    background:var(--v3-paper);
}
.loja3-modal-title{
    margin:0;
    padding:0 8px;
    font-family:var(--font-display);
    font-size:clamp(23px, 7vw, 30px);
    line-height:1.05;
    color:#26235f;
    text-shadow:0 2px 0 #fff;
}
.loja3-modal-copy{
    margin:6px 0 0;
    font-size:clamp(13px, 3.8vw, 15px);
    font-weight:700;
    line-height:1.35;
    color:#6a5a4d;
}

/* Quantos você quer? — pacotes da oferta (5, 10, 15... envelopes). Primeiro
   item do corpo: sobe logo abaixo da arte. */
.loja3-modal-qty{
    margin:0;
    padding:10px clamp(8px, 2.6vw, 12px) 10px;
    border-radius:20px;
    background:#f6ecd9;
}
.loja3-modal-qty-title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(17px, 5vw, 21px);
    line-height:1.15;
    color:#26235f;
}
.loja3-modal-qty-hint{
    margin:2px 0 0;
    font-size:clamp(12px, 3.4vw, 13px);
    font-weight:700;
    line-height:1.3;
    color:#6a5a4d;
}
.loja3-modal-stepper{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:clamp(6px, 2vw, 10px);
    margin-top:8px;
    padding:6px;
    border:2px solid #f2dc9e;
    border-radius:18px;
    background:#fff4d1;
}
.loja3-modal-step-btn{
    width:clamp(42px, 13vw, 54px);
    padding:0;
    border:0;
    border-radius:14px;
    background:none;
    line-height:0;
    cursor:pointer;
    filter:drop-shadow(0 3px 2px rgba(150,60,10,.25));
    transition:transform .1s,opacity .15s;
}
.loja3-modal-step-btn img{display:block;width:100%;height:auto}
.loja3-modal-step-btn:active:not(:disabled){transform:translateY(2px) scale(.97)}
.loja3-modal-step-btn:disabled{opacity:.4;filter:grayscale(.6);cursor:not-allowed}
.loja3-modal-step-btn:focus-visible{outline:3px solid #2f7fd6;outline-offset:2px}
.loja3-modal-qty-value{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:6px 4px;
    border:2px solid #f3e4bf;
    border-radius:14px;
    background:#fff;
}
.loja3-modal-qty-value b{
    font-family:var(--font-display);
    font-size:clamp(17px, 5.4vw, 24px);
    line-height:1.1;
    color:#3f2f25;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.loja3-modal-qty-value small{
    font-size:clamp(11px, 3.2vw, 13px);
    font-weight:800;
    line-height:1.3;
    color:#6a5a4d;
}

/* Formas de pagamento: seletor (radio), uma por preço do catálogo; o preço
   mostrado é o total (preço-base x pacotes). */
.loja3-modal-pay{
    display:grid;
    gap:8px;
    min-inline-size:0;
    margin:14px 0 0;
    padding:0;
    border:0;
}
.loja3-modal-pay legend{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    margin:0 0 8px;
    padding:0;
    font-size:clamp(15px, 4.4vw, 18px);
    font-weight:900;
    color:#5a4233;
}
.loja3-modal-pay legend::before,
.loja3-modal-pay legend::after{content:"";flex:1;height:2px;border-radius:2px;background:#e8dcc5}
.loja3-modal-option{position:relative;display:block;cursor:pointer}
.loja3-modal-option input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:inherit;
}
.loja3-modal-face{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:60px;
    padding:8px 14px;
    border:3px solid #eee3cf;
    border-radius:18px;
    background:#fff;
    text-align:left;
    transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.loja3-modal-face > img{width:clamp(36px, 11vw, 44px);height:auto;flex:none}
.loja3-modal-text{display:flex;flex:1;flex-direction:column;min-width:0}
.loja3-modal-text b{
    font-size:clamp(16px, 4.8vw, 19px);
    font-weight:900;
    line-height:1.15;
    color:#3f2f25;
    font-variant-numeric:tabular-nums;
}
.loja3-modal-text small{
    font-size:13px;
    font-weight:800;
    line-height:1.3;
    color:#8a7a6a;
}
.loja3-modal-tick{
    flex:none;
    width:26px;
    height:26px;
    border:3px solid #dccfb8;
    border-radius:50%;
    background:#fff;
}
.loja3-modal-option input:checked + .loja3-modal-face{
    border-color:var(--card-pick);
    background:#effbe8;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--card-pick) 20%, transparent);
}
.loja3-modal-option input:checked + .loja3-modal-face .loja3-modal-tick{
    border-color:var(--card-pick);
    background:radial-gradient(circle, var(--card-pick) 0 7px, #fff 8px);
}
.loja3-modal-option input:focus-visible + .loja3-modal-face{outline:3px solid #2f7fd6;outline-offset:2px}
.loja3-modal-option:has(input:disabled){cursor:not-allowed}
.loja3-modal-option input:disabled + .loja3-modal-face{background:#f6f2ea;opacity:.6;filter:grayscale(.5)}
.loja3-modal-option input:disabled + .loja3-modal-face small::after{content:" · sem saldo"}

.loja3-modal-message{
    margin:12px 0 0;
    padding:8px 12px;
    border-radius:14px;
    background:#fdece8;
    color:#a23b2a;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
}
/* Comprar: o mesmo botão dos cards (loja3-buy is-small); só o respiro. */
.loja3-modal-confirm{margin-top:14px}
/* Processando: continua verde (não parece recusa), sem aceitar outro toque. */
.loja3-modal-confirm[aria-busy="true"]:disabled{
    background:linear-gradient(#6bd443,#33a023);
    box-shadow:0 5px 0 #237614;
    text-shadow:0 2px 0 rgba(0,0,0,.2);
    opacity:.85;
    cursor:progress;
}

/* Sucesso: mesmo topo da compra (fundo + 5 envelopes), com o título por cima
   do fundo e brilhos em CSS; a arte avança no corpo como na escolha. */
.loja3-modal-done-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:clamp(200px, 60vw, 244px);
    padding:14px 34px 0;
}
.loja3-modal-done .loja3-modal-title{
    position:relative;
    z-index:1;
    flex:none;
    padding:0;
    font-size:clamp(24px, 7.6vw, 32px);
    line-height:1;
    color:#1f6a25;
    text-shadow:
        2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
        2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,
        0 5px 0 rgba(31,106,37,.22);
}
.loja3-modal-done-art{
    position:relative;
    z-index:1;
    flex:1 1 0;
    min-height:0;
    width:100%;
    height:auto;
    margin-top:6px;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
}
/* Brilhos: luz suave atrás da arte + estrelinhas de 4 pontas. */
.loja3-modal-sparkles{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse 55% 45% at 50% 68%, rgba(255,244,160,.6), rgba(255,244,160,0) 70%);
}
.loja3-modal-sparkles i{
    position:absolute;
    width:14px;
    height:14px;
    background:#fffbe0;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    filter:drop-shadow(0 0 4px rgba(255,236,120,.9));
    opacity:.9;
    animation:loja3-sparkle 2.6s ease-in-out infinite;
}
.loja3-modal-sparkles i:nth-child(1){left:9%;top:34%}
.loja3-modal-sparkles i:nth-child(2){right:10%;top:28%;width:18px;height:18px;animation-delay:.5s}
.loja3-modal-sparkles i:nth-child(3){left:15%;top:66%;width:10px;height:10px;animation-delay:1.1s}
.loja3-modal-sparkles i:nth-child(4){right:15%;top:64%;width:12px;height:12px;animation-delay:1.6s}
.loja3-modal-sparkles i:nth-child(5){left:6%;top:12%;width:10px;height:10px;animation-delay:.8s}
.loja3-modal-sparkles i:nth-child(6){right:5%;top:48%;width:10px;height:10px;animation-delay:2s}
.loja3-modal-done-body{padding-top:30px}
.loja3-modal-done .loja3-modal-copy{margin:0}
.loja3-modal-count{
    margin:10px 0 0;
    padding:9px 12px;
    border-radius:18px;
    background:#f6ecd9;
    font-family:var(--font-display);
    font-size:clamp(16px, 4.8vw, 19px);
    line-height:1.2;
    color:#5a4233;
}
.loja3-modal-count b{font-size:1.3em;color:#26235f;font-variant-numeric:tabular-nums}
/* Comprar mais | Abrir envelopes: lado a lado, mesma altura, botão dos cards. */
.loja3-modal-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(8px, 2.6vw, 12px);
    margin-top:14px;
}
.loja3-modal-actions .loja3-buy{padding-inline:6px}
@media (max-width: 340px){
    .loja3-modal-actions{gap:8px}
    .loja3-modal-actions .loja3-buy{padding-inline:4px;font-size:13px}
}
/* Premium: mesma modal, identidade roxa do card (.loja3-card.is-premium). */
.loja3-modal-box.is-premium{--card-pick:#9b5de5}
/* O topo do Premium usa o envelope fechado, recortado rente ao desenho: dentro da
   mesma caixa, ele volta ao tamanho que tinha no quadrado com margem (75%). */
.loja3-modal-box.is-premium .loja3-modal-art,
.loja3-modal-box.is-premium .loja3-modal-done-art{scale:.953}
.loja3-modal-box.is-premium .loja3-modal-qty,
.loja3-modal-box.is-premium .loja3-modal-count{background:#f3e9fd}
.loja3-modal-box.is-premium .loja3-modal-option input:checked + .loja3-modal-face{background:#f7f0fe}
.loja3-modal-box.is-premium .loja3-modal-done .loja3-modal-title{
    color:#5b2a9a;
    text-shadow:
        2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
        2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,
        0 5px 0 rgba(91,42,154,.22);
}
.loja3-modal.is-done .loja3-modal-done-art{animation:loja3-modal-pop .42s cubic-bezier(.2,1.4,.4,1)}
.loja3-modal-title[tabindex="-1"]:focus{outline:none}

@keyframes loja3-modal-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes loja3-modal-fade{from{opacity:0}}
@keyframes loja3-modal-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{transform:none}}
@keyframes loja3-sparkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
    .loja3-modal[open] .loja3-modal-frame,
    .loja3-modal[open]::backdrop,
    .loja3-modal-sparkles i,
    .loja3-modal.is-done .loja3-modal-done-art{animation:none}
    .loja3-modal-face,
    .loja3-modal-step-btn{transition:none}
}

/* --- Roleta: resultado do giro na mesma modal ------------------------------ */
/* Moldura, caixa, topo com brilhos, título de sucesso, corpo e o X são os da
   compra de envelopes acima. Aqui só o que é da Roleta: fundo escurecido e
   desfocado, o fundo da própria Roleta no topo, a arte do prêmio num tamanho
   fixo ancorada na base do topo (avança no corpo, como os envelopes) e o nome
   do prêmio em destaque. Moedas e XP são ícones de 128px: ficam menores que o
   envelope e as cartas, para não esticar. */
.roulette-prize-modal::backdrop{background:rgba(35,28,18,.58);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.roulette-prize-modal .loja3-modal-frame{width:min(100%, 360px)}
.roulette-prize-hero{
    height:clamp(184px, 54vw, 214px);
    background:#b7ed54 url('../img/backgrounds/bg-roulette.webp') center 42% / cover no-repeat;
}
.roulette-prize-modal .roulette-prize-art{
    flex:none;
    width:auto;
    max-width:72%;
    height:clamp(92px, 28vw, 112px);
    margin:auto auto 0;
}
.roulette-prize-modal[data-prize-type="bonus"] .roulette-prize-art,
.roulette-prize-modal[data-prize-type="carta"] .roulette-prize-art{height:clamp(104px, 32vw, 128px)}
.roulette-prize-name{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(30px, 9vw, 38px);
    line-height:1.05;
    color:#26235f;
    text-shadow:0 2px 0 #fff;
}
.roulette-prize-modal .loja3-modal-copy{margin:6px 0 0}


/* ========================================================================== */
/* Abrir envelope — rasgar para abrir (protótipo)                             */
/* A arte fechada é empilhada três vezes (corpo, faixa presa e faixa solta) e */
/* o app.js move só --tear (0 a 1). Com --tear 0 a pilha é idêntica à <img>   */
/* única de antes. Medidas em % da arte (680x680): a faixa dourada vai até    */
/* y≈185, então o rasgo passa em 28%.                                         */
/* ========================================================================== */
.bib-v3 .envelope-tear {
    /* Mesmo quadrado que a <img> ocupava: --env-w, a largura do envelope definida no palco. */
    width: var(--env-w);
    max-height: none;
    aspect-ratio: 1;
    --tear-y: 28%;
    --tear-x: calc(var(--tear) * 100%);
    /* Curva do movimento: quadrática, então quase nada no começo do gesto e um
       pouco mais de folga perto do limite. O destaque de verdade só acontece
       na conclusão (.is-torn). */
    --tear-ease: calc(var(--tear) * var(--tear));
    /* Encaixe da faixa rasgada (decor-envelope-torn-strip.webp) sobre a arte
       fechada: medido nas duas artes — a faixa dourada da arte fechada vai de
       x 38 a 645 e começa em y 80 (de 680). Assim o ouro da peça nova cai
       exatamente sobre o ouro do envelope e a franja sobra por baixo. */
    --strip-left: 5.6%;
    --strip-width: 89.3%;
    --strip-top: 11.8%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.bib-v3 .envelope-tear img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* A arte fechada vem recortada rente ao desenho (618x518; o roxo, 929x770).
   Toda a geometria desta tela é em % do quadrado de 680 da arte antiga, então
   o desenho volta ao lugar que ocupava nele (x 31, y 77, 618x518) por padding:
   os recortes em % seguem a caixa inteira e contain preserva a proporção. */
.bib-v3 .envelope-tear-body,
.bib-v3 .envelope-tear-strip {
    box-sizing: border-box;
    padding: 11.3235% 4.5588% 12.5% 4.5588%;
    object-fit: contain;
}

/* Corpo: tudo abaixo da linha do rasgo. A borda de cima é irregular para o
   que sobra no envelope também parecer rasgado, e não cortado a régua. Ela
   nunca passa de 28%, então a faixa ainda presa (que cobre de 0 a 28%) sempre
   a esconde: o recorte irregular só aparece onde o rasgo já passou. */
.bib-v3 .envelope-tear-body {
    clip-path: polygon(0 26.4%, 5% 27.8%, 9% 25.4%, 15% 27.4%, 21% 25.2%, 27% 27.6%,
        34% 25.6%, 41% 27.8%, 48% 25.4%, 55% 27.6%, 62% 25.2%, 69% 27.4%,
        76% 25.6%, 83% 27.8%, 90% 25.6%, 96% 27.6%, 100% 26.2%, 100% 100%, 0 100%);
}

/* Faixa ainda presa: da frente do rasgo até a direita. Desce 1px além da
   linha para não abrir fresta de antialias contra o corpo (é a mesma arte). */
.bib-v3 .envelope-tear-strip {
    clip-path: inset(0 0 calc(100% - var(--tear-y) - 1px) var(--tear-x));
}

/* Faixa arrancada: a arte própria, revelada só até a frente do rasgo. A janela
   de revelação fica aqui (sem transform, para a borda continuar vertical
   enquanto a peça se inclina). */
.bib-v3 .envelope-tear-flap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* A frente do rasgo não é uma linha vertical perfeita: ziguezague de ~1%
       da largura em volta de --tear-x, que anda junto com o dedo. */
    clip-path: polygon(0 0,
        calc(var(--tear-x) - 1.4%) 0,
        calc(var(--tear-x) + 1.3%) 12%,
        calc(var(--tear-x) - 1.5%) 15%,
        calc(var(--tear-x) + 1.4%) 18%,
        calc(var(--tear-x) - 1.2%) 21%,
        calc(var(--tear-x) + 1.5%) 24%,
        calc(var(--tear-x) - 1.4%) 27%,
        calc(var(--tear-x) + 1.2%) 30%,
        calc(var(--tear-x) - 1.5%) 33%,
        calc(var(--tear-x) - .4%) 100%,
        0 100%);
    filter: drop-shadow(1px 3px 3px rgba(84, 67, 26, .26));
    transition: filter .3s ease-out;
}

/* O que já saiu levanta de leve, girando no ponto onde a faixa ainda está presa. */
.bib-v3 .envelope-tear-flap-inner {
    position: absolute;
    inset: 0;
    transform-origin: var(--tear-x) var(--tear-y);
    transform: translateY(calc(var(--tear-ease) * -1.1%)) rotate(calc(var(--tear-ease) * -2.4deg));
}

/* Vinco logo atrás da frente do rasgo: escurece um fio da faixa onde o
   material está cedendo, então o olho vai para o ponto do dedo. Ocupa a mesma
   caixa da arte e usa a própria arte como máscara, para nunca pintar fora da
   silhueta da faixa. --tear-front converte a frente do rasgo (em % do
   envelope) para a posição correspondente dentro dessa caixa. */
.bib-v3 .envelope-tear-flap-inner::after {
    content: "";
    position: absolute;
    left: var(--strip-left);
    top: var(--strip-top);
    width: var(--strip-width);
    aspect-ratio: 960 / 219;
    --tear-front: calc((var(--tear-x) - var(--strip-left)) / .893);
    background: linear-gradient(90deg,
        rgba(74, 48, 12, 0) calc(var(--tear-front) - 4%),
        rgba(74, 48, 12, .32) var(--tear-front));
    -webkit-mask: url('../img/decor/decor-envelope-torn-strip.webp') 0 0/100% 100% no-repeat;
    mask: url('../img/decor/decor-envelope-torn-strip.webp') 0 0/100% 100% no-repeat;
}

.bib-v3 .envelope-tear img.envelope-tear-torn {
    position: absolute;
    inset: auto;
    left: var(--strip-left);
    top: var(--strip-top);
    width: var(--strip-width);
    height: auto;
}

/* Rasgo concluído: a faixa inteira sai para cima e some. */
.bib-v3 .envelope-tear.is-torn .envelope-tear-flap-inner {
    opacity: 0;
    transform: translate(11%, -34%) rotate(-15deg) scale(1.03);
    transition: transform .36s cubic-bezier(.32, .58, .4, 1), opacity .36s ease-in;
}

.bib-v3 .envelope-tear.is-torn .envelope-tear-flap {
    filter: drop-shadow(2px 9px 8px rgba(84, 67, 26, .3));
}

.bib-v3 .envelope-tear.is-torn .envelope-tear-flap-inner::after {
    opacity: 0;
}

/* Área do gesto na quina superior esquerda, com tamanho mínimo confortável
   em telas estreitas. pan-y: a rolagem vertical continua com o navegador. */
.bib-v3 .envelope-tear-grip {
    position: absolute;
    z-index: 2;
    left: -6%;
    top: 4%;
    width: max(38%, 72px);
    height: max(34%, 64px);
    touch-action: pan-y;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}

.bib-v3 .envelope-tear.is-dragging .envelope-tear-grip {
    cursor: grabbing;
}

.bib-v3 .envelope-tear.is-done .envelope-tear-grip {
    display: none;
}

/* Como abrir — "Rasgue para abrir!" e a mãozinha, sem fundo, na mesma caixa
   do envelope (quadrado de --env-w), então tudo acompanha o tamanho dele.
   Medidas em % dessa caixa, a partir da arte (680x680): a faixa dourada
   começa na quina (x ~6,5%, y ~12%) e a borda de cima desce até ~15,5% no meio.
   Nada aqui recebe toque: o dedo passa direto para a quina (.envelope-tear-grip).
   --hint-tip-*: onde a ponta do dedo repousa; --hint-hand: largura da mão;
   --hint-travel: quanto o dedo anda (tudo em % da caixa, sem unidade). */
.bib-v3 .envelope-tear-hint {
    --hint-tip-x: 7.5;
    --hint-tip-y: 13.5;
    --hint-hand: 19;
    --hint-travel: 40;
    position: absolute;
    width: var(--env-w);
    aspect-ratio: 1;
    pointer-events: none;
    transition: opacity .3s ease-out, visibility 0s linear 0s;
}

/* Some suave no primeiro rasgo e congela onde estava enquanto some. */
.bib-v3 .envelope-tear-hint.is-hidden,
.bib-v3 .envelope-screen.is-opened .envelope-tear-hint {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility 0s linear .3s;
}

.bib-v3 .envelope-tear-hint.is-hidden img {
    animation-play-state: paused;
}

.bib-v3 .envelope-tear-hint img {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Título centrado no envelope, logo acima dele (arte reta, 840x136, com 63,8%
   da largura: left = (100% - 63,8%) / 2). Fica na folga que o palco já reserva
   acima do envelope para a subida da carta, longe do saldo, e acima das
   faíscas da mão quando ela desliza. */
.bib-v3 .envelope-tear-hint-title {
    left: 18.1%;
    top: -6.5%;
    width: 63.8%;
    filter: drop-shadow(0 2px 2px rgba(84, 67, 26, .2));
    animation: envelopeHintPulse 2.5s ease-in-out infinite;
}

/* Pulsação discreta do título: normal -> 3,5% maior -> normal, sem mudar de lugar. */
@keyframes envelopeHintPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* Mão pequena, quase toda fora do envelope, com a ponta do dedo (92,5% x 44%
   da arte, 280x321) encostada na quina da faixa: o ponto onde o rasgo começa,
   dentro da área do gesto. */
.bib-v3 .envelope-tear-hint-hand {
    left: calc((var(--hint-tip-x) - var(--hint-hand) * .925) * 1%);
    top: calc((var(--hint-tip-y) - var(--hint-hand) * .507) * 1%);
    width: calc(var(--hint-hand) * 1%);
    filter: drop-shadow(0 2px 2px rgba(84, 67, 26, .2));
    animation: envelopeHintHand 5s ease-in-out infinite;
}

/* Ciclo de 5s, só na horizontal:
   0-16%   dedo parado na quina;
   16-46%  a mão desliza --hint-travel para a direita;
   46-54%  segura;
   54-66%  some;
   66-84%  pausa (a mão volta à quina invisível);
   84-100% a mão reaparece na quina.
   Parado (movimento reduzido), fica o estado da regra: dedo na quina. */
@keyframes envelopeHintHand {
    0%, 16% { opacity: 1; transform: translateX(0); }
    46%, 54% { opacity: 1; transform: translateX(calc(var(--hint-travel) / var(--hint-hand) * 100%)); }
    66% { opacity: 0; transform: translateX(calc(var(--hint-travel) / var(--hint-hand) * 100%)); }
    67%, 84% { opacity: 0; transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Sem envelopes do tipo selecionado (.is-empty): "Você não tem envelopes!" no
   lugar do "Rasgue para abrir!", na mesma caixa e com a mesma altura de letra
   (arte 965x136, a mesma altura da do título: 63,8% x 965/840 = 73,3% da
   largura, centrada). Parada: não há ação a sugerir. O envelope fechado fica
   só levemente apagado (guarda o turquesa/roxo do tipo), com a arte e a caixa de
   sempre. A opacidade vai na caixa, não nas <img>: corpo e faixa se sobrepõem
   ~1px na linha do rasgo, e duas cópias semitransparentes marcariam a emenda. */
.bib-v3 .envelope-empty {
    position: absolute;
    width: var(--env-w);
    aspect-ratio: 1;
    pointer-events: none;
}

.bib-v3 .envelope-empty-title {
    position: absolute;
    left: 13.35%;
    top: -6.5%;
    display: block;
    width: 73.3%;
    height: auto;
    filter: drop-shadow(0 2px 2px rgba(84, 67, 26, .2));
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.bib-v3 .envelope-screen:not(.is-empty) .envelope-empty,
.bib-v3 .envelope-screen.is-opened .envelope-empty {
    display: none;
}

.bib-v3 .envelope-screen.is-empty .envelope-tear img {
    filter: grayscale(.25) brightness(.92);
}

.bib-v3 .envelope-screen.is-empty:not(.is-opened) .envelope-tear {
    opacity: .9;
}

/* Movimento reduzido: a composição fica parada no repouso, e sai sem fade. */
@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-tear-hint img {
        animation: none;
    }

    .bib-v3 .envelope-tear-hint,
    .bib-v3 .envelope-tear-hint.is-hidden,
    .bib-v3 .envelope-screen.is-opened .envelope-tear-hint {
        transition: none;
    }
}

/* Troca para a arte aberta: a pilha fechada some rápido e a aberta entra com
   um pop curto (o .magic-burst existente pulsa atrás). A arte aberta sobe 7%
   para o corpo das duas coincidir (na aberta a cruz fica ~50px mais baixa). */
.bib-v3 .envelope-screen .envelope-pack.is-open {
    width: var(--env-w);
    max-height: none;
    /* Arte recortada (653x573) no lugar que ocupava no quadrado de 680 (x 14,
       y 56), como o fechado; o padding % seguiria o palco, por isso o calc. */
    aspect-ratio: 1;
    height: auto;
    box-sizing: border-box;
    padding: calc(var(--env-w) * .08235) calc(var(--env-w) * .01912) calc(var(--env-w) * .075) calc(var(--env-w) * .02059);
    object-fit: contain;
    /* Fica por cima da pilha fechada (invisível até abrir): não pode roubar o toque da quina. */
    pointer-events: none;
    transform: translateY(-7%) scale(.94);
    transition: opacity .18s ease-out, transform .38s cubic-bezier(.2, .85, .2, 1.25);
}

.bib-v3 .envelope-screen.is-opened .envelope-pack.is-open {
    opacity: 1;
    transform: translateY(-7%) scale(1);
}

.bib-v3 .envelope-screen.is-opened .envelope-tear {
    opacity: 0;
    transform: none;
    transition: opacity .18s ease-out;
}

/* Revelação da carta — o envelope aberto em três planos.
   1. .envelope-pack.is-open: a arte aberta inteira (interior dourado e abas);
   2. .envelope-reward: a carta sorteada;
   3. .envelope-open-front: a MESMA arte, na mesma caixa, recortada só na parede
      frontal verde (com a franja rasgada), que passa na frente da carta.
   As três caixas são idênticas (quadrado de --env-w, subida de 7%), então
   tudo acompanha o tamanho do envelope. Medidas em % da arte (680x680). */

/* Palco sob medida para o envelope (W = --env-w, a largura da caixa, que todas
   as camadas do palco usam: min(78%, 360px); na tela fixa do app-shell.css ela
   também fica limitada pela altura disponível).
   Os filhos são absolutos e centrados, então a altura vem só dos paddings, que
   em % seguem a largura: a caixa fica a --card-room do topo, exatamente o que
   a carta sobe além dela (topo final em -39,2% de W: 46% - 79% de 99%, mais a
   subida de 7%) + 14px de folga para o painel de resultado. Embaixo sobra o mesmo; a margem negativa
   devolve tudo abaixo do desenho (que termina em ~87% da caixa). A geometria
   do envelope e da carta dentro da caixa não muda. */
.bib-v3 .envelope-screen .envelope-stage {
    --env-w: min(78%, 360px);
    --card-room: calc(var(--env-w) * .392 + 14px);
    height: auto;
    margin-top: 0;
    padding: calc(var(--card-room) + var(--env-w) / 2) 0;
    margin-bottom: calc(-1 * (var(--card-room) + var(--env-w) * .13) + 6px);
}

/* A borda de cima da parede frontal, medida coluna a coluna na arte: ~21% nas
   laterais, descendo em V até ~43% no centro (subida de ~8px da arte sobre o
   verde, para a franja branca do rasgo ficar na frente da carta). Nas laterais
   e embaixo o recorte fica dentro da parte opaca da arte (x 12% a 88%, até y
   55%; a carta ocupa x 17% a 83% e é cortada em 50%), então nenhuma borda
   antialiasada se soma à de trás: a cópia coincide com ela e não há emenda. */
.bib-v3 .envelope-screen .envelope-pack.envelope-open-front {
    /* A sombra já vem da arte de trás; repetida aqui, escureceria o recorte. */
    filter: none;
    clip-path: polygon(12% 23.5%, 13.2% 24.6%, 16.2% 27.4%,
        19.1% 28.8%, 22.1% 29.4%, 25% 32.1%, 27.9% 32.6%, 30.9% 34.9%, 33.8% 35.7%,
        36.8% 36%, 39.7% 37.6%, 42.6% 39%, 45.6% 40.3%, 48.5% 42.1%, 50% 43.4%,
        51.5% 42.4%, 54.4% 40.9%, 57.4% 39.7%, 60.3% 38.4%, 63.2% 36.5%, 66.2% 35.4%,
        69.1% 35.9%, 72.1% 37.1%, 75% 33.7%, 77.9% 33%, 80.9% 29.9%, 83.8% 28.2%,
        86.8% 28.2%, 88% 27.6%, 88% 55%, 12% 55%);
}

/* A frente só entra junto com a carta: na troca fechado -> aberto as duas cópias
   semitransparentes somadas marcariam o recorte. Quando entra, a arte de trás
   já está opaca e as duas coincidem pixel a pixel. */
.bib-v3 .envelope-screen.is-opened .envelope-pack.is-open.envelope-open-front {
    opacity: 0;
}

.bib-v3 .envelope-screen.is-opened .envelope-reward.is-ready ~ .envelope-pack.is-open.envelope-open-front {
    opacity: 1;
}

/* Envelope Premium (/envelope?tipo=premium): a MESMA animação, com a arte roxa.
   Toda a geometria acima (linha do rasgo em 28%, encaixe da faixa rasgada, subida
   de 7%, carta, corte em 50%) é em % da caixa quadrada da arte turquesa.
   Fechado (decor-envelope-closed-purple.webp, 929x770, recortado rente): o
   padding + contain do Comum o põe na mesma silhueta da turquesa (x 35 a 646,
   topo em y 83 de 680), então usa as regras do Comum sem nenhum ajuste. Só o
   aberto tem outro enquadramento: a <img> continua ocupando a mesma caixa e o desenho é posicionado dentro dela por padding (os
   recortes em % seguem a caixa inteira). Medidas em px da caixa de 680. */

/* Faixa rasgada (decor-envelope-torn-strip-premium.webp, 1440x347): mesma regra de
   encaixe da do Comum (ouro sobre a faixa dourada do fechado, x 38 a 645, a partir
   de y 80), que no roxo cai a menos de 2px: --strip-left/--strip-width/--strip-top
   valem para as duas. Só o vinco da frente do rasgo muda, porque usa a própria
   faixa como máscara e a proporção dela. */
.bib-v3 .envelope-screen[data-envelope-type="premium"] .envelope-tear-flap-inner::after {
    aspect-ratio: 1440 / 347;
    -webkit-mask-image: url('../img/decor/decor-envelope-torn-strip-premium.webp');
    mask-image: url('../img/decor/decor-envelope-torn-strip-premium.webp');
}

/* Aberto (decor-envelope-open-purple.webp, 651x611): quadrado de --env-w como o
   turquesa (o padding % seguiria a largura do palco, por isso o calc). Encaixe
   espelhando a relação turquesa fechado -> aberto: depois da subida de 7%, o
   emblema (cruz e louros) coincide com o do fechado roxo (medido: a menos de
   2px, a mesma folga do par turquesa). */
.bib-v3 .envelope-screen[data-envelope-type="premium"] .envelope-pack.is-open {
    aspect-ratio: 1;
    height: auto;
    box-sizing: border-box;
    padding: calc(var(--env-w) * .06103) calc(var(--env-w) * .01882) calc(var(--env-w) * .04029) calc(var(--env-w) * .02412);
    object-fit: contain;
}

/* Parede frontal roxa: o polígono do Comum deslocado, coluna a coluna, pela
   diferença medida entre as bordas das duas paredes (a roxa fica ~1,75% mais
   alta), preservando a subida sobre a franja branca do rasgo. Fundo do V em
   42,1% (acima do topo da carta, 46%); a parede roxa é opaca em x 12-88% até 55%. */
.bib-v3 .envelope-screen[data-envelope-type="premium"] .envelope-pack.envelope-open-front {
    clip-path: polygon(12% 21.3%, 13.2% 23.4%, 16.2% 25%,
        19.1% 27.2%, 22.1% 27.8%, 25% 29.6%, 27.9% 31.1%, 30.9% 32.7%, 33.8% 34.4%,
        36.8% 34.5%, 39.7% 36.6%, 42.6% 37.1%, 45.6% 38.5%, 48.5% 40.6%, 50% 42.1%,
        51.5% 40.9%, 54.4% 39.3%, 57.4% 37.5%, 60.3% 37.1%, 63.2% 34.9%, 66.2% 33%,
        69.1% 34.3%, 72.1% 35.8%, 75% 32.1%, 77.9% 31.1%, 80.9% 28.9%, 83.8% 26.7%,
        86.8% 24.7%, 88% 25.4%, 88% 55%, 12% 55%);
}

/* A carta vive dentro do envelope: tudo abaixo de y 50% da arte é cortado. Na
   faixa da carta a parede verde é opaca de no máximo 43,4% até ~89%, então o
   corte cai sempre atrás dela e a base nunca aparece — nem abaixo do envelope. */
.bib-v3 .envelope-reward {
    position: absolute;
    width: var(--env-w);
    aspect-ratio: 1;
    transform: translateY(-7%);
    clip-path: inset(-100% -30% 50% -30%);
    pointer-events: none;
    visibility: hidden;
}

.bib-v3 .envelope-reward.is-ready {
    visibility: visible;
}

/* Guardada: 66% da largura do envelope (2:3, ~99% de altura), com o topo logo
   abaixo do fundo do V (43,4%): inteira atrás da parede frontal. */
.bib-v3 .envelope-reward-card {
    position: absolute;
    left: 17%;
    top: 46%;
    width: 66%;
    aspect-ratio: 2 / 3;
    transform: translateY(0) scale(.96);
    filter: drop-shadow(0 2px 3px rgba(84, 67, 26, .12));
}

.bib-v3 .envelope-reward-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

/* Empurrada de dentro: o topo nasce pelo V e a carta sobe reto, desacelerando,
   com a sombra crescendo. Sobe 79% da própria altura (~78% da largura do
   envelope): o topo para em ~-32%, e ~78% da carta fica acima da parede no
   centro (~60% nas bordas, onde a parede é mais alta). */
.bib-v3 .envelope-reward.is-rising .envelope-reward-card {
    transform: translateY(-79%) scale(1);
    filter: drop-shadow(0 12px 14px rgba(84, 67, 26, .3));
    transition: transform 1.3s cubic-bezier(.22, .61, .36, 1), filter 1.3s ease-out;
}

/* Movimento reduzido: direto para o lugar final. */
.bib-v3 .envelope-reward.is-settled .envelope-reward-card {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-tear.is-torn .envelope-tear-flap-inner,
    .bib-v3 .envelope-screen .envelope-pack.is-open,
    .bib-v3 .envelope-screen.is-opened .envelope-tear,
    .bib-v3 .envelope-reward.is-rising .envelope-reward-card {
        transition: none;
    }
}

/* ========================================================================== */
/* Revelação da carta — etapa 1: halo da raridade e painel de resultado.      */
/* Tudo começa em .is-revealed (envelope:revealed, depois que a carta chegou  */
/* ao fim da subida) e anima só opacity/transform. A mecânica da carta não é  */
/* tocada: o respiro é na <img>, nunca no bloco que faz o translateY.         */
/* ========================================================================== */

/* Identidade de cada raridade. As cores são as dos selos decor-rarity-*
   (medidas na arte); a intensidade do halo sobe com a raridade, na mesma
   linguagem. --reward-halo-rgb é a cor do halo em "r g b" para o gradiente. */
.bib-v3 .envelope-screen {
    --reward-rarity-color: #ffba00;
    --reward-pill-bottom: #ffa500;
    --reward-pill-border: #fff0a8;
    --reward-pill-text: #fff;
    --reward-halo-rgb: 255 214 102;
    --reward-halo-strength: .6;
    --reward-halo-scale: 1;
}

.bib-v3 .envelope-screen.rarity-muito_comum {
    --reward-rarity-color: #a3592c;
    --reward-pill-bottom: #8e4c25;
    --reward-pill-border: #e2b48e;
    --reward-halo-rgb: 163 89 44;
    --reward-halo-strength: .4;
    --reward-halo-scale: .9;
}

/* Comum: a ardósia do selo, clareada no halo. */
.bib-v3 .envelope-screen.rarity-comum {
    --reward-rarity-color: #697589;
    --reward-pill-bottom: #5c6c81;
    --reward-pill-border: #b6bfd1;
    --reward-halo-rgb: 150 166 192;
    --reward-halo-strength: .6;
    --reward-halo-scale: .95;
}

.bib-v3 .envelope-screen.rarity-rara {
    --reward-rarity-color: #00a2ff;
    --reward-pill-bottom: #008dff;
    --reward-pill-border: #8fe9ff;
    --reward-halo-rgb: 0 162 255;
    --reward-halo-strength: .75;
    --reward-halo-scale: 1;
}

.bib-v3 .envelope-screen.rarity-epica {
    --reward-rarity-color: #c918ff;
    --reward-pill-bottom: #a805ee;
    --reward-pill-border: #ff9cff;
    --reward-halo-rgb: 201 24 255;
    --reward-halo-strength: .88;
    --reward-halo-scale: 1.06;
}

/* Lendária: dourado forte e o halo mais amplo; texto escuro, porque branco
   sobre o amarelo do selo não tem contraste. */
.bib-v3 .envelope-screen.rarity-lendaria {
    --reward-rarity-color: #ffba00;
    --reward-pill-bottom: #ffa000;
    --reward-pill-border: #fff0a8;
    --reward-pill-text: #6b3a00;
    --reward-halo-rgb: 255 172 0;
    --reward-halo-strength: .95;
    --reward-halo-scale: 1.18;
}

/* Salvação: não é "lendária mais forte". O halo é luz branca com borda dourada
   (gradiente próprio, abaixo); a pílula mantém o vermelho do selo, com borda
   de ouro. */
.bib-v3 .envelope-screen.rarity-salvacao {
    --reward-rarity-color: #ff2a55;
    --reward-pill-bottom: #e0002a;
    --reward-pill-border: #ffd76a;
    --reward-halo-rgb: 255 226 140;
    --reward-halo-strength: 1;
    --reward-halo-scale: 1.12;
}

/* Halo: mesma caixa do envelope aberto e antes dele no HTML, então fica atrás
   do envelope inteiro e da carta. Centrado na parte da carta que fica à
   mostra (de ~-33% a ~43% da arte), mais largo que ela. */
.bib-v3 .envelope-halo {
    position: absolute;
    width: var(--env-w);
    aspect-ratio: 1;
    transform: translateY(-7%);
    pointer-events: none;
}

/* A carta cobre o centro do halo: o que aparece é o anel entre a borda dela
   (~45% a 55% do raio) e o fim do brilho, por isso a cor se mantém forte até
   ali e só depois se dissolve. */
.bib-v3 .envelope-halo::before {
    content: "";
    position: absolute;
    left: -28%;
    width: 156%;
    top: -64%;
    height: 138%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgb(var(--reward-halo-rgb) / 1) 0%,
        rgb(var(--reward-halo-rgb) / .92) 45%,
        rgb(var(--reward-halo-rgb) / .6) 62%,
        rgb(var(--reward-halo-rgb) / .2) 82%,
        rgb(var(--reward-halo-rgb) / 0) 100%);
    opacity: 0;
    transform: scale(.8);
}

/* Salvação: luz, não mais dourado. Um halo mais alto que largo, branco junto
   da carta e com a borda em ouro claro. */
.bib-v3 .envelope-screen.rarity-salvacao .envelope-halo::before {
    left: -18%;
    width: 136%;
    top: -86%;
    height: 164%;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 42%,
        rgba(255, 250, 222, .95) 56%,
        rgba(255, 216, 102, .7) 72%,
        rgba(255, 196, 60, .25) 88%,
        rgba(255, 196, 60, 0) 100%);
}

.bib-v3 .envelope-screen.is-revealed .envelope-halo::before {
    opacity: var(--reward-halo-strength);
    transform: scale(var(--reward-halo-scale));
    transition: opacity .45s ease-out .06s, transform .6s var(--ease-smooth) .06s;
}

/* Respiro de chegada: só a arte, 1 -> 1,025 -> 1, sem rotação. */
.bib-v3 .envelope-screen.is-revealed .envelope-reward-card img {
    transform-origin: 50% 60%;
    animation: envelopeCardSettle .22s cubic-bezier(.22, .61, .36, 1);
}

/* Topo, logo abaixo do header. Acima do palco: o halo pode subir até aqui sem
   pintar sobre ele. */
.bib-v3 .envelope-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Saldo de pacotes como recurso do jogo (moeda de HUD): pílula creme
   pequena, com o pacote à esquerda saindo um pouco dela (levemente inclinado)
   e o número à direita. Tamanhos acompanham a largura do app (--app-vw). */
.bib-v3 .envelope-hud {
    --hud-h: clamp(32px, calc(8.8 * var(--app-vw)), 38px);
    --hud-icon: clamp(48px, calc(13.6 * var(--app-vw)), 58px);
    position: relative;
    display: flex;
    align-items: center;
    min-width: calc(var(--hud-icon) * .78 + 74px);
    height: var(--hud-h);
    margin: 0 0 0 calc(var(--hud-icon) * .18);
    padding: 0 16px 0 calc(var(--hud-icon) * .78 + 10px);
    box-sizing: border-box;
    background: linear-gradient(#fffdf5, #fff3d6);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(90, 112, 57, .16), 0 6px 12px rgba(60, 90, 40, .12);
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease-out, filter .2s ease-out, transform .2s ease-out, border-color .2s ease-out;
}

/* Seletor Comum/Premium: as duas pílulas lado a lado. A não selecionada fica
   apagada; a selecionada ganha a borda da cor do tipo (a dos cards da Loja) e
   sobe um pouco. */
.bib-v3 .envelope-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, calc(3 * var(--app-vw)), 14px);
}

.bib-v3 .envelope-hud:not(.is-active) {
    opacity: .6;
    filter: saturate(.55);
}

.bib-v3 .envelope-hud.is-active {
    border-color: #4cc9e2;
    transform: translateY(-1px);
}

.bib-v3 .envelope-hud.is-premium.is-active {
    border-color: #b57cf0;
}

.bib-v3 .envelope-hud:focus-visible {
    outline: 3px solid #2f7fd6;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-hud {
        transition: none;
    }
}

.bib-v3 .envelope-hud-icon {
    position: absolute;
    left: calc(var(--hud-icon) * -.22);
    top: 50%;
    width: var(--hud-icon);
    height: auto;
    transform: translateY(-50%) rotate(-8deg);
    filter: drop-shadow(0 2px 2px rgba(84, 67, 26, .25));
    pointer-events: none;
}

.bib-v3 .envelope-hud-count {
    margin: 0 auto;
    color: #3d2410;
    font-family: var(--font-display);
    font-size: clamp(20px, calc(5.6 * var(--app-vw)), 24px);
    line-height: 1;
    white-space: nowrap;
}

/* Envelope Premium: mesma pílula, no tom roxo da Loja. */
.bib-v3 .envelope-hud.is-premium {
    border-color: #d9b8fb;
    background: linear-gradient(#fbf7ff, #f1e5fe);
    box-shadow: 0 3px 0 rgba(110, 50, 170, .18), 0 6px 12px rgba(110, 50, 170, .14);
}

/* Nome do tipo e "envelope(s)": só para leitores de tela (o ícone e o número
   sozinhos não diriam o que é). */
.bib-v3 .envelope-hud-name,
.bib-v3 .envelope-hud [data-envelope-balance-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Depois da revelação: "Abrir outro envelope" (principal, no verde dos CTAs do
   jogo) e "Ver na coleção" (secundário, creme com texto verde, como o saldo),
   botões compactos lado a lado logo abaixo do envelope. Entram depois do
   "Nova carta!"/"Repetida" (que entra em .58s). */
.bib-v3 .envelope-next {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(6px, calc(2.2 * var(--app-vw)), 10px);
    width: min(100%, 380px);
    margin: 8px auto 0;
    z-index: 2;
    animation: envelopeResultIn .3s ease-out .8s both;
}

.bib-v3 .envelope-next[hidden],
.bib-v3 .envelope-next [hidden] {
    display: none;
}

.bib-v3 .envelope-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(8px, calc(2.4 * var(--app-vw)), 10px) clamp(10px, calc(3.4 * var(--app-vw)), 16px);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(13px, calc(3.9 * var(--app-vw)), 17px);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s var(--ease-spring);
}

.bib-v3 .envelope-next-primary {
    background: linear-gradient(#7be33f, #38aa24);
    border: 2px solid #d8ff8a;
    box-shadow: 0 4px 0 rgba(61, 105, 38, .28);
    color: #fff;
    text-shadow: 0 1px 0 rgba(35, 91, 25, .4);
}

.bib-v3 .envelope-next-secondary {
    background: linear-gradient(#fffdf5, #fff3d6);
    border: 2px solid #fff;
    box-shadow: 0 4px 0 rgba(90, 112, 57, .2);
    color: #2f6f26;
}

.bib-v3 .envelope-next-btn:active {
    transform: translateY(2px) scale(.97);
}

.bib-v3 .envelope-next-btn:focus-visible {
    outline: 3px solid #2f8d3e;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-next {
        animation: none;
    }
}

/* Visitante: o convite para entrar, no mesmo lugar. */
.bib-v3 .envelope-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 14px 5px 8px;
    background: #fff8e2;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(90, 112, 57, .12);
    color: #5b3b1c;
    font-family: var(--font-display);
    font-size: clamp(15px, calc(4.2 * var(--app-vw)), 17px);
    line-height: 1.2;
    white-space: nowrap;
}

.bib-v3 a.envelope-balance-login {
    margin: 0 auto;
    padding: 8px 18px;
    color: #2f8d3e;
    text-decoration: none;
}

/* "Nova carta!" / repetida, entre o topo e a carta: uma faixa estreita, da
   altura dessa única linha, para ela aparecer sem empurrar o envelope.
   Invisível até a revelação. Fica acima do palco (que é z-index 1 pela regra
   geral dos filhos da .game-screen), então o halo nunca pinta sobre o texto. */
.bib-v3 .envelope-result-slot {
    position: relative;
    z-index: 2;
    height: 34px;
    margin-top: 8px;
}

.bib-v3 .envelope-result {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end center;
    pointer-events: none;
}

/* Recusa do servidor e falha de rede: no mesmo lugar do resultado. Absoluto, o
   aviso pode crescer para baixo sobre o espaço da carta (que no erro não sobe)
   sem mexer no envelope. */
.bib-v3 .envelope-screen .envelope-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.bib-v3 .envelope-result[hidden],
.bib-v3 .envelope-result [hidden] {
    display: none;
}

/* Estado da coleção: uma notificação pequena, sem painel. O fundo claro só
   garante a leitura sobre o halo. Repetida não é cinza nem apagada:
   continua sendo prêmio. */
.bib-v3 .envelope-result-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px 3px 8px;
    border-radius: 999px;
    background: rgba(255, 251, 234, .94);
    box-shadow: 0 3px 0 rgba(90, 112, 57, .12);
    font-family: var(--font-display);
    font-size: clamp(15px, calc(4.4 * var(--app-vw)), 19px);
    line-height: 1.2;
    white-space: nowrap;
}

.bib-v3 .envelope-result-status img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.bib-v3 .envelope-result-status.is-new {
    color: #e35428;
    animation: envelopeResultStamp .3s var(--ease-spring) .58s both;
}

.bib-v3 .envelope-result-status.is-repeated {
    color: #3a762f;
    animation: envelopeResultIn .28s ease-out .58s both;
}

@keyframes envelopeCardSettle {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.025); }
}

@keyframes envelopeResultIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* O checkPop, mais contido. */
@keyframes envelopeResultStamp {
    0% { opacity: 0; transform: scale(.5) rotate(-8deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: none; }
}

/* Movimento reduzido: o estado final direto. */
.bib-v3 .envelope-screen.is-reveal-instant .envelope-halo::before {
    transition: none;
}

.bib-v3 .envelope-screen.is-reveal-instant .envelope-reward-card img,
.bib-v3 .envelope-screen.is-reveal-instant .envelope-result-status {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-screen.is-revealed .envelope-halo::before {
        transition: none;
    }

    .bib-v3 .envelope-screen.is-revealed .envelope-reward-card img,
    .bib-v3 .envelope-result-status.is-new,
    .bib-v3 .envelope-result-status.is-repeated {
        animation: none;
    }
}

/* ========================================================================== */
/* Revelação da carta — etapa 2: celebração passageira por raridade.          */
/* A mesma linguagem crescendo: partículas (comum em diante), pulso do halo   */
/* (rara em diante), flash e shine (épica e lendária), magic-burst dourado    */
/* (lendária). A Salvação troca a explosão por luz: feixe, raios cônicos      */
/* lentos e poeira branca subindo. Tudo atrás da carta, exceto o shine, que é */
/* recortado pela própria arte. Só opacity/transform são animados; nada fica  */
/* rodando no fim. As camadas usam a caixa do envelope aberto (subida de 7%), */
/* centradas na parte da carta à mostra (x 50%, y ~5% da arte).               */
/* ========================================================================== */

.bib-v3 .envelope-screen {
    --reward-spark: #ffd966;
}

.bib-v3 .envelope-screen.rarity-comum { --reward-spark: #dfe6f2; }
.bib-v3 .envelope-screen.rarity-rara { --reward-spark: #6fd3ff; }
.bib-v3 .envelope-screen.rarity-epica { --reward-spark: #e58cff; }
.bib-v3 .envelope-screen.rarity-lendaria { --reward-spark: #ffc933; }

.bib-v3 .envelope-fx,
.bib-v3 .envelope-sparkles {
    position: absolute;
    width: var(--env-w);
    aspect-ratio: 1;
    transform: translateY(-7%);
    pointer-events: none;
}

.bib-v3 .envelope-fx > span {
    position: absolute;
    opacity: 0;
}

/* Partículas: estrela do rouletteSpark, sem o drop-shadow de cada uma (o
   brilho vem do próprio gradiente). Nascem na boca, atrás da carta. */
.bib-v3 .envelope-sparkles i {
    position: absolute;
    width: 17px;
    height: 17px;
    opacity: 0;
    background: radial-gradient(circle, #fff 0 14%, var(--reward-spark) 46%);
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    animation: envelopeSpark .8s cubic-bezier(.2, .7, .3, 1) both;
}

/* Salvação: poeira de luz, redonda e lenta. */
.bib-v3 .envelope-sparkles i.is-mote {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    clip-path: none;
    background: radial-gradient(circle, #fff 0 30%, rgba(255, 214, 102, .85) 55%, rgba(255, 214, 102, 0) 72%);
    animation-name: envelopeMote;
    animation-timing-function: cubic-bezier(.3, .4, .4, 1);
}

/* Pulso do halo (rara, épica, lendária): um anel na cor da raridade que se
   abre uma vez em volta da carta. */
.bib-v3 .envelope-halo::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    top: -50%;
    height: 110%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgb(var(--reward-halo-rgb) / 0) 55%,
        rgb(var(--reward-halo-rgb) / .85) 72%,
        rgb(var(--reward-halo-rgb) / 0) 90%);
    opacity: 0;
}

.bib-v3 .envelope-screen.is-revealed.rarity-rara .envelope-halo::after,
.bib-v3 .envelope-screen.is-revealed.rarity-epica .envelope-halo::after,
.bib-v3 .envelope-screen.is-revealed.rarity-lendaria .envelope-halo::after {
    animation: envelopePulse .7s ease-out .06s both;
}

/* Flash (épica e lendária): luz branca atrás da carta, curta, nunca a tela. */
.bib-v3 .envelope-fx-flash {
    left: -45%;
    width: 190%;
    top: -80%;
    height: 170%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .55) 45%,
        rgba(255, 255, 255, 0) 100%);
}

.bib-v3 .envelope-screen.is-revealed.rarity-epica .envelope-fx-flash {
    --flash-peak: .5;
    animation: envelopeFlash .32s ease-out .08s both;
}

.bib-v3 .envelope-screen.is-revealed.rarity-lendaria .envelope-fx-flash {
    --flash-peak: .75;
    animation: envelopeFlash .38s ease-out .08s both;
}

/* Lendária: o magic-burst que já existe atrás do envelope pulsa uma vez. */
.bib-v3 .envelope-screen.is-revealed.rarity-lendaria .magic-burst {
    animation: envelopeBurstGold 1.2s ease-out;
}

/* Shine (épica e lendária): uma passada de luz sobre a carta, criada pelo
   app.js com mask-image = a própria arte, então só pinta dentro dela. */
.bib-v3 .envelope-reward-shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.bib-v3 .envelope-reward-shine::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .45) 42%,
        rgba(255, 255, 255, .7) 50%,
        rgba(255, 255, 255, .45) 58%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-110%);
    animation: envelopeShine .75s cubic-bezier(.4, .1, .3, 1) .3s both;
}

/* Salvação: raios cônicos muito suaves girando devagar atrás da carta... */
.bib-v3 .envelope-fx-rays {
    left: -45%;
    width: 190%;
    aspect-ratio: 1;
    top: -90%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(255, 222, 130, 0) 0deg 6deg,
        rgba(255, 222, 130, .95) 10deg,
        rgba(255, 222, 130, 0) 14deg 20deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 45%, transparent 100%);
    mask-image: radial-gradient(closest-side, transparent 22%, #000 45%, transparent 100%);
}

/* ...e um feixe vertical de luz, mais largo que a carta, que desce sobre ela. */
.bib-v3 .envelope-fx-beam {
    left: 5%;
    width: 90%;
    top: -120%;
    height: 175%;
    border-radius: 50%;
    transform-origin: 50% 0;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 252, 232, .75) 45%,
        rgba(255, 240, 190, 0) 100%);
}

/* Estado final da Salvação: feixe e raios ficam, discretos e parados. */
.bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-rays {
    opacity: .4;
    transform: rotate(12deg);
}

.bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-beam {
    opacity: .5;
}

.bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-rays {
    animation: envelopeRays 1.8s cubic-bezier(.25, .6, .35, 1) both;
}

.bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-beam {
    animation: envelopeBeam 1.6s cubic-bezier(.25, .6, .35, 1) both;
}

/* will-change só enquanto a celebração dura. */
.bib-v3 .envelope-screen.is-celebrating .envelope-fx > span,
.bib-v3 .envelope-screen.is-celebrating .envelope-sparkles i,
.bib-v3 .envelope-screen.is-celebrating .envelope-halo::after {
    will-change: transform, opacity;
}

@keyframes envelopeSpark {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    20% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--s, 1)) rotate(var(--r, 0deg)); }
}

@keyframes envelopeMote {
    0% { opacity: 0; transform: translate(-50%, -50%); }
    30% { opacity: .95; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }
}

@keyframes envelopePulse {
    0% { opacity: 0; transform: scale(.7); }
    30% { opacity: .9; }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes envelopeFlash {
    0% { opacity: 0; transform: scale(.85); }
    30% { opacity: var(--flash-peak, .5); }
    100% { opacity: 0; transform: scale(1.1); }
}

@keyframes envelopeBurstGold {
    0%, 100% { opacity: 1; transform: scale(1.4); }
    35% { opacity: 1; transform: scale(1.9); }
}

@keyframes envelopeShine {
    from { transform: translateX(-110%); }
    to { transform: translateX(280%); }
}

@keyframes envelopeRays {
    0% { opacity: 0; transform: rotate(-10deg) scale(.9); }
    40% { opacity: .7; }
    100% { opacity: .4; transform: rotate(12deg) scale(1); }
}

@keyframes envelopeBeam {
    0% { opacity: 0; transform: scaleY(.35); }
    40% { opacity: .9; transform: scaleY(1); }
    100% { opacity: .5; transform: scaleY(1); }
}

/* Movimento reduzido: nada passageiro, só o estado final
   da raridade (na Salvação, feixe e raios já parados). */
.bib-v3 .envelope-screen.is-revealed.is-reveal-instant .envelope-fx > span,
.bib-v3 .envelope-screen.is-revealed.is-reveal-instant .envelope-halo::after,
.bib-v3 .envelope-screen.is-revealed.is-reveal-instant.rarity-lendaria .magic-burst {
    animation: none;
}

/* Os mesmos seletores das animações (vêm depois, então vencem). */
@media (prefers-reduced-motion: reduce) {
    .bib-v3 .envelope-screen.is-revealed.rarity-rara .envelope-halo::after,
    .bib-v3 .envelope-screen.is-revealed.rarity-epica .envelope-halo::after,
    .bib-v3 .envelope-screen.is-revealed.rarity-lendaria .envelope-halo::after,
    .bib-v3 .envelope-screen.is-revealed.rarity-epica .envelope-fx-flash,
    .bib-v3 .envelope-screen.is-revealed.rarity-lendaria .envelope-fx-flash,
    .bib-v3 .envelope-screen.is-revealed.rarity-lendaria .magic-burst,
    .bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-rays,
    .bib-v3 .envelope-screen.is-revealed.rarity-salvacao .envelope-fx-beam,
    .bib-v3 .envelope-sparkles i,
    .bib-v3 .envelope-reward-shine::before {
        animation: none;
    }

    .bib-v3 .envelope-sparkles,
    .bib-v3 .envelope-reward-shine {
        display: none;
    }
}

/* ========================================================================== */
/* Nível na decor-header-progress.webp (arte 960x195: moldura roxa com o       */
/* trilho vazio e a estrela). A estrela mostra o NÍVEL; a barra de código fica */
/* POR BAIXO da moldura (que recorta as bordas do preenchimento) e representa  */
/* XP dentro do nível / XP do nível; o texto "12 / 20 XP" fica por cima.       */
/* Medidas na arte: trilho vazio x 39..765, y 64..154; estrela no centro       */
/* 89,2% x 47,7%. A faixa da barra passa um pouco sob a moldura e a estrela.   */
/* ========================================================================== */
.bib-v3 .topbar-v3-progress-wrap{position:relative;display:block;width:min(100%,244px);line-height:0;container-type:inline-size;--track-left:3.75%;--track-right:19.6%;--track-top:31.8%;--track-height:48.2%}
.bib-v3 .topbar-v3 .topbar-v3-progress-wrap .topbar-v3-progress,
.bib-v3 .roulette-top-progress .topbar-v3-progress{width:100%;height:auto;display:block}
.bib-v3 .topbar-v3-progress-wrap .topbar-v3-progress{position:relative;z-index:1;pointer-events:none}
.bib-v3 .topbar-v3.scrolled .topbar-v3-progress-wrap{width:min(100%,220px)}
.bib-v3:has(.home-v6) .topbar-v3.scrolled .topbar-v3-progress-wrap{width:min(100%,244px)}
.bib-v3 .roulette-top-progress .topbar-v3-progress-wrap{width:100%}
.bib-v3 .topbar-v3-level-bar{display:block;position:absolute;z-index:0;left:var(--track-left);right:var(--track-right);top:var(--track-top);height:var(--track-height);border-radius:999px;overflow:hidden;background:#fff7fc;box-shadow:inset 0 3px 6px rgba(92,27,120,.18);pointer-events:none}
.bib-v3 .topbar-v3-level-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#ff9ccb 0%,#f0469a 55%,#d92f86 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.4);transition:width .45s var(--ease-smooth, ease);position:relative;overflow:hidden}
.bib-v3 .topbar-v3-level-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.45) 45%,transparent 70%);animation:shine 2.2s linear infinite}
.bib-v3 .topbar-v3-level-xp{position:absolute;z-index:2;left:41.9%;top:55.9%;transform:translate(-50%,-50%);font-size:4.8cqw;font-weight:900;line-height:1;letter-spacing:.01em;color:#4b1768;text-shadow:0 1px 0 #fff,0 0 3px rgba(255,255,255,.9);white-space:nowrap;pointer-events:none}
.bib-v3 .topbar-v3-level{position:absolute;z-index:2;left:89.2%;top:50%;transform:translate(-50%,-50%);font-size:8cqw;font-weight:900;line-height:1;letter-spacing:-.02em;color:#6a3d0a;text-shadow:0 1px 0 rgba(255,248,214,.85);white-space:nowrap;pointer-events:none}
.bib-v3 .topbar-v3-level[data-digits="2"]{font-size:7cqw}
.bib-v3 .topbar-v3-level[data-digits="3"]{font-size:5.6cqw}
.bib-v3 .level-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Modal de subida de nível (uma só, mesmo num salto de vários níveis). */
.bib-v3 .levelup-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:72px 16px 16px;background:rgba(40,28,8,.55);backdrop-filter:blur(3px)}
.bib-v3 .levelup-modal[hidden]{display:none}
.bib-v3 .levelup-card{width:100%;max-width:420px;position:relative;background:linear-gradient(180deg,#fffaf0,#fff1cf);border:3px solid #f2c75c;border-radius:28px;padding:64px 22px 22px;text-align:center;box-shadow:0 18px 40px rgba(70,45,5,.28);color:#5a3a0c}
.bib-v3 .levelup-star{position:absolute;left:50%;top:-52px;transform:translateX(-50%);width:112px;height:112px;display:grid;place-items:center}
.bib-v3 .levelup-star img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(145,89,5,.3))}
.bib-v3 .levelup-star span{position:relative;font-size:34px;font-weight:900;color:#6a3d0a;text-shadow:0 1px 0 rgba(255,248,214,.9)}
.bib-v3 .levelup-card h2{margin:0 0 6px;font-size:1.45rem}
.bib-v3 .levelup-subtitle{margin:0 0 14px;font-weight:700;opacity:.85}
.bib-v3 .levelup-rewards{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bib-v3 .levelup-rewards li{background:#fff;border:2px solid #f0d58f;border-radius:999px;padding:6px 12px;font-weight:800}
.bib-v3 .levelup-confirm{appearance:none;border:0;border-radius:999px;padding:12px 28px;font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,#77df30,#30a814);box-shadow:0 5px 0 #23800e;cursor:pointer}
.bib-v3 .levelup-confirm:disabled{opacity:.7}
@media (prefers-reduced-motion: reduce){.bib-v3 .topbar-v3-level-bar i::after{animation:none}}

/* ========================================================================== */
/* Perfil: card do usuário e estatísticas (ícones oficiais de XP e moedas,     */
/* como na Home).                                                              */
/* Cartões no mesmo papel creme com borda dourada da Home (home-v6).           */
/* ========================================================================== */
.bib-v3 .profile-v2{display:flex;flex-direction:column;gap:18px;width:100%;max-width:880px;margin:0 auto}
.bib-v3 .profile-v2 .v3-profile-hero{margin:0}
.bib-v3 .profile-stats{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bib-v3 .profile-stats .profile-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;background:rgba(255,252,246,.96);border:2px solid #efd27d;border-radius:26px;box-shadow:0 8px 0 rgba(125,172,88,.18),0 16px 32px rgba(61,91,38,.10),inset 0 1px 0 rgba(255,255,255,.96)}
.bib-v3 .profile-stat img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(91,66,20,.14))}
.bib-v3 .profile-stat b{font-family:var(--font-display);font-size:clamp(22px,6vw,28px);line-height:1.1;color:#4e3c32;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib-v3 .profile-stat small{font-size:13px;font-weight:800;color:#8a5a2b}
.bib-v3 .profile-stat.is-xp small{color:#b0621a}
.bib-v3 .profile-stat.is-silver small{color:#9a9da5}
.bib-v3 .profile-stat.is-gold small{color:#9a6a12}

@media (min-width: 640px){.bib-v3 .profile-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ========================================================================== */
/* Coleção de Relíquias (/reliquias): carrossel dos 25 baús e a pílula de     */
/* progresso da relíquia em foco. Mobile-first na coluna do app (--app-vw);    */
/* placa de título (decor-relics-title) e as cores do v3. Tela única no        */
/* celular (altura travada no app-shell.css, seção 8). Estados vêm do servidor */
/* (data-* e classes).                                                         */
/* ========================================================================== */
.bib-v3 .relics-screen{display:flex;flex-direction:column;gap:10px;width:100%;max-width:880px;margin:0 auto}
/* Placa: usa também 10px da margem lateral da página (18px) para ganhar leitura. */
.bib-v3 .relics-title{flex:none;margin:0 -10px;line-height:0}
.bib-v3 .relics-title img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(62,109,47,.18))}

/* Palco sem cartão: o fundo da própria tela aparece atrás dos baús e ilhas.
   Três blocos na vertical: placa -> ilhas + baús + "Relíquia X de 25" ->
   pílula de progresso. Quando a tela tem altura travada (celular), o palco
   ocupa o que sobra abaixo da placa e a sobra vira três vãos iguais: acima
   das ilhas (::before, peso 1), entre o título e a pílula e abaixo dela (o
   .relic-status cresce com peso 2 e a pílula centraliza nele com margens
   automáticas). Sem margem fixa: o vão é o que a tela deixar; sem altura
   travada a sobra é zero e nada se afasta. */
.bib-v3 .relics-stage{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding:0 0 8px;overflow:hidden;background:none;border:0;box-shadow:none}
.bib-v3 .relics-stage::before{content:"";flex:1 1 0}
/* Composição em V: a ilha central (baú atual) embaixo, maior; as laterais
   (anterior/próximo) nas pontas de cima, menores e mais distantes.
   Medidas do palco, todas a partir da largura útil da coluna (--relic-c):
   --relic-chest   largura do baú (escala 1.12 no atual, --relic-chest-s nos
                   laterais);
   --relic-base    linha de apoio do baú atual (base do corpo = 217/232 do
                   canvas); os laterais apoiam --relic-rise acima dela;
   ilhas (decor-relic-float-island-*): --relic-k é a escala da central (px de
   tela por px do recorte original de 948/481/516 de largura) e --relic-k-s,
   menor, a das laterais (profundidade); --relic-apoio-* é a fração da
   altura, perto da borda da frente do tampo de pedra, onde o baú se apoia;
   --relic-slide   distância entre baús = centro de cada ilha lateral,
                   calculada para a ilha lateral mais larga (direita) terminar
                   10px antes da borda da coluna: nada é cortado nas laterais.
   A separação entre as ilhas vem do degrau vertical do V (--relic-rise). */
.bib-v3 .relic-carousel-wrap{
  --relic-c:calc(100 * var(--app-vw) - 28px);
  --relic-chest:calc(var(--relic-c) * .28);
  --relic-chest-s:.44;
  --relic-slide-h:calc(var(--relic-chest) * .7733);
  --relic-rise:calc(var(--relic-c) * .16);
  --relic-top:14px;
  --relic-base:calc(var(--relic-top) + max(var(--relic-slide-h) * .935 * 1.12, var(--relic-rise) + var(--relic-slide-h) * .935 * var(--relic-chest-s)));
  --relic-k:calc(var(--relic-c) * .5 / 948);
  --relic-k-s:calc(var(--relic-k) * .85);
  --relic-island-c:calc(var(--relic-k) * 948);
  --relic-island-l:calc(var(--relic-k-s) * 481);
  --relic-island-r:calc(var(--relic-k-s) * 516);
  --relic-island-c-h:calc(var(--relic-k) * 666);
  --relic-island-l-h:calc(var(--relic-k-s) * 420);
  --relic-island-r-h:calc(var(--relic-k-s) * 415);
  --relic-slide:calc(var(--relic-c) / 2 - 10px - var(--relic-island-r) / 2);
  --relic-apoio-c:.43;
  --relic-apoio-l:.34;
  --relic-apoio-r:.32;
  --relic-island-c-top:calc(var(--relic-base) - var(--relic-island-c-h) * var(--relic-apoio-c));
  --relic-island-l-top:calc(var(--relic-base) - var(--relic-rise) - var(--relic-island-l-h) * var(--relic-apoio-l));
  --relic-island-r-top:calc(var(--relic-base) - var(--relic-rise) - var(--relic-island-r-h) * var(--relic-apoio-r));
  position:relative;
  flex:none
}
/* Flutuação: pertence à POSIÇÃO do carrossel (centro, esquerda, direita), não
   ao baú. O wrap anima, por @keyframes, um deslocamento vertical por posição;
   a ilha e o baú daquela posição leem a mesma variável, então sobem e descem
   juntos, no mesmo quadro. As três posições têm duração, amplitude e atraso
   diferentes (nunca em sincronia).
   --relic-float-c/-l/-r  deslocamento da ilha + baú do centro/esquerda/direita;
   --relic-shadow-c/-l/-r escala da sombra de cada ilha (1 = embaixo; menor =
                          ilha mais alta), animada no mesmo keyframe do
                          deslocamento: a sombra não sobe, só encolhe e clareia.
   Registradas com @property para poderem ser animadas. Ilhas e baús usam a
   propriedade `translate`, que soma com o `transform: scale()` do baú. */
@property --relic-float-c{syntax:'<length>';inherits:true;initial-value:0px}
@property --relic-float-l{syntax:'<length>';inherits:true;initial-value:0px}
@property --relic-float-r{syntax:'<length>';inherits:true;initial-value:0px}
@property --relic-shadow-c{syntax:'<number>';inherits:true;initial-value:1}
@property --relic-shadow-l{syntax:'<number>';inherits:true;initial-value:1}
@property --relic-shadow-r{syntax:'<number>';inherits:true;initial-value:1}
.bib-v3 .relic-carousel-wrap{animation:relic-float-c 5.2s ease-in-out infinite,relic-float-l 6.3s ease-in-out -2.4s infinite,relic-float-r 5.7s ease-in-out -4.1s infinite}
@keyframes relic-float-c{0%,100%{--relic-float-c:0px;--relic-shadow-c:1}50%{--relic-float-c:-6px;--relic-shadow-c:.88}}
@keyframes relic-float-l{0%,100%{--relic-float-l:0px;--relic-shadow-l:1}50%{--relic-float-l:-4px;--relic-shadow-l:.9}}
@keyframes relic-float-r{0%,100%{--relic-float-r:0px;--relic-shadow-r:1}50%{--relic-float-r:-5px;--relic-shadow-r:.89}}
/* Ilhas: camada fixa atrás do carrossel (não rolam). Leve realce de cor e
   contorno sutil na silhueta para destacar pedras e folhas do cenário, mais
   uma sombra curta de contato logo abaixo (a sombra difusa do chão vem dos
   pseudo-elementos abaixo). */
.bib-v3 .relic-islands{position:absolute;inset:0;z-index:0;pointer-events:none}
.bib-v3 .relic-island{position:absolute;display:block;height:auto;max-width:none;filter:saturate(1.08) contrast(1.05) drop-shadow(0 0 1.5px rgba(70,50,20,.38)) drop-shadow(0 5px 5px rgba(40,62,24,.24))}
.bib-v3 .relic-island.is-center{z-index:1;width:var(--relic-island-c);left:calc(50% - var(--relic-island-c) / 2);top:var(--relic-island-c-top);translate:0 var(--relic-float-c)}
.bib-v3 .relic-island.is-left{translate:0 var(--relic-float-l);width:var(--relic-island-l);top:var(--relic-island-l-top);left:calc(50% - var(--relic-slide) - var(--relic-island-l) / 2)}
.bib-v3 .relic-island.is-right{translate:0 var(--relic-float-r);width:var(--relic-island-r);top:var(--relic-island-r-top);left:calc(50% + var(--relic-slide) - var(--relic-island-r) / 2)}
/* Sombra difusa abaixo da ponta de pedra de cada ilha, uma elipse por ilha
   (só CSS, os PNGs seguem com transparência). Centro horizontal (--x) e
   vertical (--y, logo abaixo da ponta) e largura (--w). Não acompanham a
   flutuação: ficam paradas e só encolhem e clareiam com a escala da sua ilha
   (--k = --relic-shadow-c/-l/-r) quando ela sobe. A central fica
   no wrap (pintada antes da camada das ilhas); as laterais dentro da camada,
   com z-index -1. */
.bib-v3 .relic-carousel-wrap::before,.bib-v3 .relic-islands::before,.bib-v3 .relic-islands::after{content:"";position:absolute;pointer-events:none;width:var(--w);height:calc(var(--w) * .16);left:calc(var(--x) - var(--w) / 2);top:calc(var(--y) - var(--w) * .08);border-radius:50%;background:radial-gradient(closest-side,rgba(38,58,24,.34),rgba(38,58,24,.16) 55%,rgba(38,58,24,0));filter:blur(3px);transform:scale(var(--k));opacity:calc(var(--k) * 2 - 1)}
.bib-v3 .relic-carousel-wrap::before{z-index:0;--k:var(--relic-shadow-c);--w:calc(var(--relic-island-c) * .55);--x:50%;--y:calc(var(--relic-island-c-top) + var(--relic-island-c-h) * 1.02)}
.bib-v3 .relic-islands::before,.bib-v3 .relic-islands::after{z-index:-1}
.bib-v3 .relic-islands::before{--k:var(--relic-shadow-l);--w:calc(var(--relic-island-l) * .55);--x:calc(50% - var(--relic-slide));--y:calc(var(--relic-island-l-top) + var(--relic-island-l-h) * 1.02)}
.bib-v3 .relic-islands::after{--k:var(--relic-shadow-r);--w:calc(var(--relic-island-r) * .55);--x:calc(50% + var(--relic-slide));--y:calc(var(--relic-island-r-top) + var(--relic-island-r-h) * 1.02)}
/* Baús por cima das ilhas. Só as setas navegam: o carrossel não rola pelo
   dedo, roda ou trackpad (overflow hidden, sem scroll-snap); o app.js rola
   até o baú atual por scrollTo. Em cima, espaço para os baús laterais subirem
   (a base do baú no fluxo cai em --relic-base); embaixo, para a ilha central
   e sua sombra. */
.bib-v3 .relic-carousel{--relic-bottom:calc(var(--relic-island-c-h) * (1 - var(--relic-apoio-c)) - var(--relic-slide-h) * .065 + 16px);position:relative;z-index:1;display:flex;list-style:none;margin:0;padding:calc(var(--relic-base) - var(--relic-slide-h) * .935) calc(50% - var(--relic-slide) / 2) var(--relic-bottom);overflow:hidden;scrollbar-width:none;outline:none}
.bib-v3 .relic-carousel::-webkit-scrollbar{display:none}
.bib-v3 .relic-carousel:focus-visible{box-shadow:inset 0 0 0 3px rgba(36,139,61,.35);border-radius:24px}
.bib-v3 .relic-slide{flex:0 0 var(--relic-slide);display:flex;justify-content:center}
/* Anterior e próximo menores e erguidos (--relic-rise), sobre as ilhas
   laterais nas pontas do V; o atual maior, sobre a ilha central embaixo. A
   escala parte da base do baú (217/232): ele cresce ou encolhe sem sair de
   cima da ilha.
   Altura de cada baú = a da POSIÇÃO em que ele está, por pesos (0 ou 1):
   --w-c centro (flutuação central), --w-l/--w-r esquerda/direita (degrau do V
   + flutuação daquela ilha), --w-o fora da tela (só o degrau). Ao trocar de
   baú só os pesos mudam, com a mesma transição da escala: o baú passa da
   altura da posição antiga para a da nova sem salto e, ao fim dela, segue
   exatamente a flutuação da nova ilha (nada da posição anterior sobra). A
   flutuação em si não tem transição: acompanha a ilha quadro a quadro. */
@property --w-c{syntax:'<number>';inherits:false;initial-value:0}
@property --w-l{syntax:'<number>';inherits:false;initial-value:0}
@property --w-r{syntax:'<number>';inherits:false;initial-value:0}
@property --w-o{syntax:'<number>';inherits:false;initial-value:0}
.bib-v3 .relic-slide-button{--w-o:1;position:relative;display:block;flex:0 0 auto;width:var(--relic-chest);padding:0;border:0;background:none;transform:scale(var(--relic-chest-s));transform-origin:50% 93.5%;translate:0 calc(var(--relic-float-c) * var(--w-c) + (var(--relic-float-l) - var(--relic-rise)) * var(--w-l) + (var(--relic-float-r) - var(--relic-rise)) * var(--w-r) - var(--relic-rise) * var(--w-o));opacity:.95;transition:transform .28s cubic-bezier(.2,.8,.2,1),--w-c .28s cubic-bezier(.2,.8,.2,1),--w-l .28s cubic-bezier(.2,.8,.2,1),--w-r .28s cubic-bezier(.2,.8,.2,1),--w-o .28s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.bib-v3 .relic-slide:has(+ .relic-slide.is-current) .relic-slide-button{--w-o:0;--w-l:1}
.bib-v3 .relic-slide.is-current + .relic-slide .relic-slide-button{--w-o:0;--w-r:1}
.bib-v3 .relic-slide.is-current{position:relative;z-index:1}
.bib-v3 .relic-slide.is-current .relic-slide-button{--w-o:0;--w-c:1;transform:scale(1.12);opacity:1}
.bib-v3 .relic-slide-art{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(91,66,20,.22))}
/* Bloqueado: o mesmo asset, dessaturado e clareado (sem transparência, para a
   ilha não aparecer através do baú), com cadeado por cima. */
.bib-v3 .relic-slide.is-locked img.relic-slide-art{filter:grayscale(1) contrast(.72) brightness(1.18) drop-shadow(0 8px 8px rgba(91,66,20,.16))}
.bib-v3 .relic-slide-lock{position:absolute;left:50%;top:52%;width:32%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 6px rgba(62,45,20,.35))}
/* Completo (4/4, ainda fechado): brilho dourado, sem selo, e o baú chacoalha
   (abaixo, abertura do baú). Aberto (já resgatado): a arte do baú aberto, sem o
   brilho de "pronto para abrir". O canvas do aberto é 300x276 com a mesma base
   do fechado (300x232): os 44px a mais (a tampa levantada) sobem, e a margem
   negativa mantém o baú apoiado na ilha no mesmo lugar. */
.bib-v3 .relic-slide.is-complete:not(.is-open) .relic-slide-art{filter:drop-shadow(0 0 12px rgba(255,214,92,.95)) drop-shadow(0 10px 10px rgba(91,66,20,.2))}
.bib-v3 .relic-slide.is-open .relic-slide-art{margin-top:calc(-44 / 300 * 100%)}
.bib-v3 .relic-status-head{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
/* Setas: a própria arte (btn-arrow-prev/next, círculo e borda inclusos) é o
   botão inteiro; sem fundo, borda ou sombra de CSS. Tamanho pela largura da
   coluna, entre 40px e 48px. */
.bib-v3 .relic-nav{flex:0 0 auto;display:block;width:clamp(40px,calc(11.5 * var(--app-vw)),48px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bib-v3 .relic-nav img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.bib-v3 .relic-nav:active{transform:translateY(1px)}
/* Toques rápidos e seguidos: nenhum gesto do navegador (zoom por duplo toque,
   pan) nas setas; cada dedo chega ao app.js como evento de ponteiro. Vence o
   touch-action da tela inteira (abaixo). */
html:has(body.bib-v3 .relics-screen) .bib-v3 .relic-nav{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* O carrossel não rola pelo dedo, mas um swipe nele também não pode vazar
   para o navegador (o swipe para a direita virava "voltar página"): nenhum
   gesto começa ali. */
html:has(body.bib-v3 .relics-screen) .bib-v3 .relic-carousel,html:has(body.bib-v3 .relics-screen) .bib-v3 .relic-carousel *{touch-action:none}
.bib-v3 .relic-nav:disabled{opacity:.35;cursor:default}

.bib-v3 .relic-status{flex:2 1 auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 18px;text-align:center}
.bib-v3 .relic-status h2{margin:0;font-family:var(--font-display);font-size:clamp(22px,calc(6.4 * var(--app-vw)),28px);line-height:1.1;color:#fff;text-shadow:0 1px 2px rgba(40,28,18,.45),0 0 1px rgba(40,28,18,.35)}
/* Progresso numa pílula compacta: a chave da relíquia no meio e X/4 à direita
   (separado por um filete). Mesma linguagem das setas: creme, borda dourada e
   sombra verde embaixo. */
.bib-v3 .relic-progress-pill{flex:none;margin-block:auto;display:flex;align-items:center;gap:10px;width:auto;max-width:100%;height:38px;padding:0 14px;border:2px solid #efd27d;border-radius:999px;background:#fffdf5;box-shadow:0 4px 0 rgba(125,172,88,.22)}
/* Chave inteira (decor-relic-key, recorte de 1144x392) revelada em 4 trechos.
   Divisas nas partes naturais da arte, medidas no recorte: --relic-key-c1 fim
   da argola, -c2 meio da haste, -c3 início do palhetão. A base é a chave
   neutra (o que falta continua visível, apagado); por cima, a mesma imagem
   colorida, recortada por clip-path até a divisa das partes conquistadas
   (data-partes). As divisas (1 | 2 | 3 | 4) só aparecem no trecho que falta e
   ficam presas ao desenho da chave (mask). Com 4/4 sobra só a imagem
   original: sem recorte, sem base por baixo e sem divisa. A sombra é da chave
   inteira. */
.bib-v3 .relic-key{--relic-key-c1:33.57%;--relic-key-c2:51.57%;--relic-key-c3:69.67%;position:relative;flex:0 1 auto;min-width:0;max-width:100%;height:30px;aspect-ratio:1144 / 392;filter:drop-shadow(0 1px 0 rgba(122,75,22,.35));transition:filter .3s ease}
.bib-v3 .relic-key-art{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.bib-v3 .relic-key-base{filter:grayscale(1) brightness(1.45) contrast(.55);opacity:.34}
.bib-v3 .relic-key-fill{transition:clip-path .35s ease}
.bib-v3 .relic-key[data-partes="0"] .relic-key-fill{clip-path:inset(0 100% 0 0)}
.bib-v3 .relic-key[data-partes="1"] .relic-key-fill{clip-path:inset(0 calc(100% - var(--relic-key-c1)) 0 0)}
.bib-v3 .relic-key[data-partes="2"] .relic-key-fill{clip-path:inset(0 calc(100% - var(--relic-key-c2)) 0 0)}
.bib-v3 .relic-key[data-partes="3"] .relic-key-fill{clip-path:inset(0 calc(100% - var(--relic-key-c3)) 0 0)}
.bib-v3 .relic-key[data-partes="4"] .relic-key-fill{clip-path:none}
/* Divisórias 1 | 2 | 3 | 4: linhas verticais finas nos pontos de corte, de
   cima a baixo da altura interna da pílula (38px - 2 x 2px de borda = 34px;
   a chave tem 30px e fica centrada, então as linhas passam 2px acima e
   abaixo dela). Ficam ATRÁS da arte da chave (z-index), aparecendo no fundo
   da pílula e no vão da argola, sem riscar o desenho. */
.bib-v3 .relic-key-cuts{position:absolute;top:-2px;bottom:-2px;left:0;right:0;z-index:0}
.bib-v3 .relic-key-cuts i{position:absolute;top:0;bottom:0;display:block;width:1px;margin-left:-.5px;background:rgba(110,110,110,.28)}
.bib-v3 .relic-key-cuts i[data-cut="1"]{left:var(--relic-key-c1)}
.bib-v3 .relic-key-cuts i[data-cut="2"]{left:var(--relic-key-c2)}
.bib-v3 .relic-key-cuts i[data-cut="3"]{left:var(--relic-key-c3)}
.bib-v3 .relic-key[data-partes="4"] .relic-key-base,.bib-v3 .relic-key[data-partes="4"] .relic-key-cuts{display:none}
/* 4/4: a chave inteira ganha um brilho dourado. */
.bib-v3 .relic-key.is-complete{filter:drop-shadow(0 1px 0 rgba(122,75,22,.35)) drop-shadow(0 0 4px rgba(255,200,60,.85))}
.bib-v3 .relic-count{flex:0 0 auto;padding-left:10px;border-left:2px solid #efe6cf;font-family:var(--font-display);font-size:19px;line-height:1;color:var(--v3-green-dark)}
/* 4/4: completo e pronto para abrir (a abertura vem depois): a própria
   pílula ganha o brilho dourado. */
.bib-v3 .relics-stage.is-ready .relic-progress-pill{border-color:#ffd747;box-shadow:0 0 0 3px rgba(255,215,71,.45),0 4px 0 rgba(125,172,88,.22)}

/* --- Abertura do baú ------------------------------------------------------
   Pronto para abrir (4/4, fechado): além da flutuação da ilha (o translate do
   .relic-slide-button), a ARTE do baú chacoalha (transform da img, que não
   briga com o scale/translate do botão): um ciclo de 2,8s com uns 0,8s de
   balanço para os lados e uma pausa, como se algo lá dentro quisesse sair.
   Só o baú em foco é clicável (o botão dos demais fica disabled pelo app.js). */
.bib-v3 .relic-slide.is-complete:not(.is-open) .relic-slide-art{transform-origin:50% 93.5%;animation:relic-chest-rattle 2.8s ease-in-out infinite}
@keyframes relic-chest-rattle{
  0%,52%,100%{transform:none}
  56%{transform:translateY(-2%) rotate(-5deg)}
  61%{transform:translateY(-1%) rotate(4.5deg)}
  66%{transform:translateY(-2%) rotate(-4deg)}
  71%{transform:translateY(-.5%) rotate(3deg)}
  76%{transform:rotate(-1.5deg)}
  81%{transform:none}
}
.bib-v3 .relic-slide-button[data-relic-open]{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bib-v3 .relic-slide-button[data-relic-open]:disabled{cursor:default;color:inherit}
.bib-v3 .relic-slide-button[data-relic-open]:focus-visible{outline:3px solid rgba(255,215,71,.9);outline-offset:4px;border-radius:18px}
/* Clique: sacudida final mais forte (0,9s, uma vez) com o brilho aumentando;
   se o servidor ainda não respondeu, segue um tremor contínuo (is-waiting)
   até a confirmação. */
.bib-v3 .relic-slide.is-unlocking .relic-slide-art{animation:relic-chest-shake .9s cubic-bezier(.36,.07,.19,.97) both;filter:drop-shadow(0 0 20px rgba(255,226,120,1)) drop-shadow(0 10px 10px rgba(91,66,20,.2))}
.bib-v3 .relic-slide.is-waiting .relic-slide-art{animation:relic-chest-tremble .32s linear infinite;filter:drop-shadow(0 0 22px rgba(255,230,130,1)) drop-shadow(0 10px 10px rgba(91,66,20,.2))}
@keyframes relic-chest-shake{
  0%{transform:none}
  10%{transform:translate(-3%,-2%) rotate(-8deg) scale(1.03)}
  20%{transform:translate(3%,-3%) rotate(9deg) scale(1.05)}
  30%{transform:translate(-3%,-3%) rotate(-10deg) scale(1.06)}
  40%{transform:translate(3%,-4%) rotate(10deg) scale(1.07)}
  50%{transform:translate(-3%,-4%) rotate(-9deg) scale(1.08)}
  60%{transform:translate(3%,-5%) rotate(8deg) scale(1.09)}
  70%{transform:translate(-2%,-5%) rotate(-6deg) scale(1.1)}
  80%{transform:translate(2%,-6%) rotate(4deg) scale(1.11)}
  90%{transform:translate(-1%,-6%) rotate(-2deg) scale(1.12)}
  100%{transform:translateY(-6%) scale(1.12)}
}
@keyframes relic-chest-tremble{
  0%,100%{transform:translateY(-6%) scale(1.12) rotate(0)}
  25%{transform:translate(-1.5%,-6%) scale(1.12) rotate(-3deg)}
  75%{transform:translate(1.5%,-6%) scale(1.12) rotate(3deg)}
}
/* Mensagem de erro da abertura: flutua no topo do palco, fora do fluxo (não
   mexe nos vãos da tela). */
.bib-v3 .relic-message{position:absolute;left:50%;top:6px;z-index:3;width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 14px;transform:translateX(-50%);border:2px solid #efd27d;border-radius:16px;background:#fffdf5;box-shadow:0 4px 0 rgba(125,172,88,.22);font-weight:800;font-size:14px;line-height:1.3;text-align:center;color:#7a3c0c}
.bib-v3 .relic-message a{color:var(--v3-green-dark)}
/* Clarão dourado e branco a partir do baú (no <body>, fixo no centro do baú:
   --x/--y). Cobre a troca da arte fechada pela aberta no pico (~30%). Os
   raios (::after) giram por baixo do clarão. */
.bib-v3 .relic-flash{position:fixed;left:var(--x);top:var(--y);z-index:1300;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0,#fff 30%,rgba(255,244,196,.96) 42%,rgba(255,213,92,.8) 56%,rgba(255,196,60,0) 72%);animation:relic-flash 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.bib-v3 .relic-flash::after{content:"";position:absolute;inset:-60%;border-radius:50%;background:repeating-conic-gradient(rgba(255,236,160,.75) 0 6deg,rgba(255,236,160,0) 6deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:relic-flash-rays 1.1s linear forwards}
@keyframes relic-flash{
  0%{transform:scale(.2);opacity:0}
  12%{opacity:1}
  30%{transform:scale(16);opacity:1}
  55%{transform:scale(24);opacity:.9}
  100%{transform:scale(30);opacity:0}
}
@keyframes relic-flash-rays{from{transform:rotate(0)}to{transform:rotate(50deg)}}
/* Revelação (no <body>, por cima de tudo). O app.js mede, ao abrir (e em
   resize/rolagem), a posição-base do baú aberto na tela: --x (centro da boca do baú), --rim (borda da
   frente, onde a relíquia some), --w/--h (tamanho da arte do baú). A relíquia
   (--relic-size) nasce pequena, com só a pontinha acima da borda; sobe e
   cresce até flutuar --relic-lift acima dela. O recorte (.relic-reveal-clip)
   termina na borda: abaixo dela a relíquia fica "dentro" do baú. A camada
   inteira segura os toques: durante a revelação só o "Continuar" responde. */
/* A camada roda a mesma relic-float-c da ilha (5.2s ease-in-out), posta em
   fase pelo app.js (syncFloat). Recorte, facho e estrelinhas somam
   --relic-float-c por translate, como o baú: subpixel, sem layout por quadro.
   --rim já vem sem o deslocamento (place). */
.bib-v3 .relic-reveal{--relic-size:calc(var(--w) * .8);--relic-lift:calc(var(--h) * .42);position:fixed;inset:0;z-index:1250;animation:relic-float-c 5.2s ease-in-out infinite}
.bib-v3 .relic-reveal[hidden]{display:none}
.bib-v3 .relic-reveal-backdrop{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--x) calc(var(--rim) - var(--relic-lift)),rgba(255,236,170,.18) 0,rgba(30,20,6,0) calc(var(--w) * 1.1),rgba(30,20,6,.55) calc(var(--w) * 2.6));transition:opacity .4s ease}
/* Facho de luz saindo da boca do baú. A base segue o contorno da abertura na
   arte aberta (300x276; a caixa do facho vai de x=33 a 303): parede esquerda
   (~47,152), quina frontal esquerda (~102, na borda), quina frontal direita
   (~238,156) e topo da parede direita (~266,150). Assim a luz nasce de todo o
   interior, com as laterais mais altas que a frente (perspectiva). */
.bib-v3 .relic-reveal-backdrop::after{content:"";position:absolute;left:calc(var(--x) - var(--w) * .45);top:calc(var(--rim) - var(--h) * 2.2);width:calc(var(--w) * .9);height:calc(var(--h) * 2.2);background:linear-gradient(to top,rgba(255,236,150,.85),rgba(255,236,150,.25) 60%,rgba(255,236,150,0));clip-path:polygon(5.2% 97.7%,25.6% 110%,75.9% 98.4%,86.3% 97.5%,100% 0,0 0);filter:blur(4px);opacity:0;transform-origin:50% 100%;transform:scaleY(.2);translate:0 var(--relic-float-c);transition:opacity .5s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.bib-v3 .relic-reveal.is-shown .relic-reveal-backdrop{opacity:1}
.bib-v3 .relic-reveal.is-rising .relic-reveal-backdrop::after{opacity:1;transform:none}
.bib-v3 .relic-reveal.is-floating .relic-reveal-backdrop::after{opacity:.4;transform:none}
.bib-v3 .relic-reveal-clip{position:absolute;left:0;right:0;top:0;height:max(0px,var(--rim));overflow:hidden;translate:0 var(--relic-float-c)}
.bib-v3 .relic-reveal-item{position:absolute;left:var(--x);top:calc(var(--rim) - var(--relic-size));width:var(--relic-size);height:var(--relic-size);transform-origin:50% 100%;transform:translate(-50%,20%) scale(.32);opacity:0}
/* TESTE: subida com arranque suave, ritmo contínuo e frenagem curta (antes:
   cubic-bezier(.22,.8,.3,1), disparo e frenagem longa). A duração continua
   1.6s, em sincronia com RISE no app.js. */
.bib-v3 .relic-reveal.is-rising .relic-reveal-item{animation:relic-reveal-rise 1.6s cubic-bezier(.3,.1,.5,1) forwards}
/* TESTE: sem flutuação própria. Parada na pose final da subida, a relíquia só
   acompanha a flutuação da ilha/baú (relic-float-c), que a camada roda em fase
   com a ilha e o recorte soma por translate: um único movimento vertical. Para
   voltar: animation:relic-reveal-float 3.2s ease-in-out infinite. */
.bib-v3 .relic-reveal.is-floating .relic-reveal-item{transform:translate(-50%,calc(-1 * var(--relic-lift))) scale(1);opacity:1;animation:none}
@keyframes relic-reveal-rise{
  0%{transform:translate(-50%,20%) scale(.32);opacity:0}
  10%{opacity:1}
  100%{transform:translate(-50%,calc(-1 * var(--relic-lift))) scale(1);opacity:1}
}
@keyframes relic-reveal-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.bib-v3 .relic-reveal-glow{position:absolute;inset:-38%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,170,.95) 0,rgba(255,214,92,.55) 38%,rgba(255,196,60,0) 68%);animation:relic-reveal-glow 2.2s ease-in-out infinite}
@keyframes relic-reveal-glow{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.bib-v3 .relic-reveal-art{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,214,92,.9)) drop-shadow(0 8px 10px rgba(91,66,20,.3))}
.bib-v3 .relic-reveal-art[hidden],.bib-v3 .relic-reveal-placeholder[hidden]{display:none}
/* Marcador enquanto a relíquia não tem arte individual (RelicContent): uma
   esfera dourada, só CSS. */
.bib-v3 .relic-reveal-placeholder{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe3 0,#ffe27a 30%,#f2b532 62%,#b8730f 100%);box-shadow:0 0 18px rgba(255,214,92,.95),inset 0 -6px 12px rgba(140,80,8,.35)}
/* Estrelinhas da subida: nascem na boca do baú e se espalham para cima
   (--dx/--dy, atraso --d, tamanho --s, giro --r), uma vez só. */
.bib-v3 .relic-reveal-sparkles{position:absolute;left:var(--x);top:var(--rim);width:0;height:0;translate:0 var(--relic-float-c)}
.bib-v3 .relic-spark{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);background:radial-gradient(circle,#fff 0,#fff3b8 35%,#ffcf47 70%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:relic-spark 1.5s ease-out var(--d) forwards}
@keyframes relic-spark{
  0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:0}
}
/* "Nova Relíquia!": cartão embaixo, fora da frente do baú e da relíquia. */
.bib-v3 .relic-reveal-card{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100% - 32px));padding:16px 18px 18px;border:3px solid #f2c75c;border-radius:24px;background:linear-gradient(180deg,#fffaf0,#fff1cf);box-shadow:0 14px 30px rgba(70,45,5,.3);text-align:center;color:#5a3a0c;opacity:0;visibility:hidden;transform:translate(-50%,24px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .45s;pointer-events:none}
.bib-v3 .relic-reveal.is-revealed .relic-reveal-card{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2);pointer-events:auto}
.bib-v3 .relic-reveal-card h2{margin:0;font-family:var(--font-display);font-size:26px;line-height:1.1;color:#b06a00;text-shadow:0 1px 0 #fff6d6}
.bib-v3 .relic-reveal-name{margin:4px 0 14px;font-weight:800;font-size:17px}
.bib-v3 .relic-reveal-confirm{appearance:none;border:0;border-radius:999px;padding:12px 30px;font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,#77df30,#30a814);box-shadow:0 5px 0 #23800e;cursor:pointer}
.bib-v3 .relic-reveal-confirm:active{transform:translateY(2px);box-shadow:0 3px 0 #23800e}
.bib-v3 .relic-reveal.is-leaving{opacity:0;transition:opacity .35s ease}

/* Sem zoom por pinça ou duplo toque nesta tela (só rolagem/arrasto); as
   demais telas não são afetadas. O iOS completa isso no app.js. */
html:has(body.bib-v3 .relics-screen),html:has(body.bib-v3 .relics-screen) *{touch-action:pan-x pan-y}

@media (prefers-reduced-motion: reduce){
.bib-v3 .relic-carousel-wrap,.bib-v3 .relic-reveal{animation:none}
.bib-v3 .relic-slide-button,.bib-v3 .relic-key,.bib-v3 .relic-key-fill{transition:none}
/* Abertura sem balanço nem subida: o brilho do baú, um clarão curto e a
   relíquia já parada acima dele (o app.js pula direto para o estado final). */
.bib-v3 .relic-slide.is-complete:not(.is-open) .relic-slide-art,.bib-v3 .relic-slide.is-unlocking .relic-slide-art,.bib-v3 .relic-slide.is-waiting .relic-slide-art{animation:none}
.bib-v3 .relic-flash{animation:relic-flash-calm .5s ease forwards}
.bib-v3 .relic-flash::after,.bib-v3 .relic-spark{display:none}
.bib-v3 .relic-reveal.is-floating .relic-reveal-item,.bib-v3 .relic-reveal-glow{animation:none}
.bib-v3 .relic-reveal-backdrop,.bib-v3 .relic-reveal-backdrop::after,.bib-v3 .relic-reveal-card,.bib-v3 .relic-reveal.is-revealed .relic-reveal-card,.bib-v3 .relic-reveal.is-leaving{transition:none}
@keyframes relic-flash-calm{0%{transform:scale(30);opacity:0}40%{transform:scale(30);opacity:1}100%{transform:scale(30);opacity:0}}
}

/* ========================================================================== */
/* Palavras Cruzadas (/jogos/palavras-cruzadas): placa + contador do jogo,    */
/* tabuleiro, pista com anterior/próxima, teclado A-Z e Dica/Apagar.          */
/* Mobile-first na coluna do app (--app-vw). Header padrão do layout; o fundo */
/* (bg-crossword) fica na camada fixa do app-shell.css.                       */
/* ========================================================================== */
.bib-v3 .page-shell-v3:has(.crossword-screen){padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.bib-v3 .crossword-screen{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px;margin:0 auto;color:#5a3214}
.bib-v3 .crossword-screen button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Placa do jogo e contador próprio (palavras resolvidas / total), separado do XP. */
.bib-v3 .crossword-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:0 -6px}
.bib-v3 .crossword-title{margin:0;line-height:0}
.bib-v3 .crossword-title img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 7px rgba(62,109,47,.2))}
.bib-v3 .crossword-progress{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:calc(17 * var(--app-vw));margin:0;padding:6px 10px 7px;border:3px solid #a8652c;border-radius:18px;background:linear-gradient(180deg,#f8dfae,#e8b973);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #7c4519,0 8px 14px rgba(62,40,10,.22);line-height:1;text-align:center}
.bib-v3 .crossword-progress strong{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,calc(5.6 * var(--app-vw)),26px);color:#5a3214}
.bib-v3 .crossword-progress span{margin-top:2px;font-size:clamp(11px,calc(2.9 * var(--app-vw)),13px);font-weight:900;color:#7a4a1f}

/* Tabuleiro: a arte do painel na proporção dela (1200x881, sem distorcer) e a
   grade por cima, dentro da área de terra. Largura limitada pela altura da
   tela para o resto (pista e teclado) caber; nunca abaixo de 300px.
   Casa = o que couber da área útil (84% x 78% do painel) pelas colunas e
   linhas da grade (--cw-cols/--cw-rows, vindos da view), até 15% do painel:
   uma cruzadinha maior ou menor só muda o tamanho das casas. */
.bib-v3 .crossword-board{position:relative;width:100%;width:clamp(300px,calc((100svh - 480px) * 1.362),100%);max-width:100%;aspect-ratio:1200/881;margin:0 auto;background:url('../img/decor/decor-crossword-board.webp') center/100% 100% no-repeat;container-type:inline-size;filter:drop-shadow(0 8px 12px rgba(56,84,30,.22))}
.bib-v3 .crossword-grid{
  --cw-cell:min(calc(84cqw / var(--cw-cols)),calc(57cqw / var(--cw-rows)),15cqw);
  position:absolute;inset:11% 8%;display:grid;place-content:center;
  grid-template-columns:repeat(var(--cw-cols),var(--cw-cell));
  grid-template-rows:repeat(var(--cw-rows),var(--cw-cell));
}
/* Casa: estado no próprio botão.
   is-in-word  casas da palavra em foco (contorno azul, como na referência);
   is-active   a casa que recebe a próxima letra;
   is-solved   casa de palavra já resolvida (travada, também para a palavra cruzada);
   is-correct  acerto (toda palavra resolvida); is-wrong  palavra completa e errada;
   is-hinted   letra revelada pela Dica (travada). */
.bib-v3 .crossword-cell{position:relative;display:grid;place-items:center;min-width:0;margin:calc(var(--cw-cell) * .045);padding:0;border:max(1.5px,calc(var(--cw-cell) * .05)) solid #6d3f1d;border-radius:calc(var(--cw-cell) * .17);background:linear-gradient(180deg,#fffcf3,#f4e6cb);box-shadow:0 calc(var(--cw-cell) * .07) 0 #8a5a2b,inset 0 calc(var(--cw-cell) * -.07) 0 rgba(160,118,64,.18);color:#4a2a12;font-family:var(--font-display);cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease}
.bib-v3 .crossword-cell-number{position:absolute;top:5%;left:9%;font-family:var(--font-ui);font-weight:900;font-size:calc(var(--cw-cell) * .24);line-height:1;color:#4a2a12}
.bib-v3 .crossword-cell-letter{font-size:calc(var(--cw-cell) * .5);line-height:1;transform:translateY(8%)}
.bib-v3 .crossword-cell.is-in-word{border-color:#1f9fd6;background:linear-gradient(180deg,#fff7c2,#ffec92);box-shadow:0 0 0 2px rgba(78,205,247,.7),0 0 12px 2px rgba(78,205,247,.7),0 calc(var(--cw-cell) * .07) 0 #8a5a2b}
.bib-v3 .crossword-cell.is-active{background:linear-gradient(180deg,#ffe774,#ffd43b);transform:translateY(-1px)}
.bib-v3 .crossword-cell.is-active .crossword-cell-letter:empty::after{content:"";display:block;width:calc(var(--cw-cell) * .06);height:calc(var(--cw-cell) * .46);border-radius:2px;background:#6d3f1d;animation:crossword-caret 1s steps(1) infinite}
.bib-v3 .crossword-cell.is-correct{border-color:#3f9a2a;background:linear-gradient(180deg,#eefbe0,#c9efa6)}
.bib-v3 .crossword-cell.is-wrong{border-color:#d9452f;background:linear-gradient(180deg,#ffe6e1,#ffc6bb);color:#a32613;animation:crossword-shake .35s ease}
.bib-v3 .crossword-cell.is-hinted .crossword-cell-letter{color:#b06a00}
.bib-v3 .crossword-cell:focus-visible{outline:3px solid #fff;outline-offset:1px}
@keyframes crossword-caret{50%{opacity:0}}
@keyframes crossword-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* Pista em foco, entre as setas (as setas avançam um pouco sobre o cartão). */
.bib-v3 .crossword-clue-bar{display:grid;grid-template-columns:calc(12 * var(--app-vw)) minmax(0,1fr) calc(12 * var(--app-vw));align-items:center}
.bib-v3 .crossword-nav{position:relative;z-index:1;display:block;padding:0;border:0;background:none;line-height:0;cursor:pointer;transition:transform .12s ease}
.bib-v3 .crossword-nav img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 5px rgba(120,60,10,.25))}
.bib-v3 .crossword-nav:active{transform:scale(.92)}
.bib-v3 .crossword-nav.is-prev{margin-right:-10px}
.bib-v3 .crossword-nav.is-next{margin-left:-10px}
.bib-v3 .crossword-clue{display:flex;align-items:flex-start;gap:10px;min-height:calc(18 * var(--app-vw));padding:12px 16px 12px 18px;border:3px solid #fff;border-radius:24px;background:rgba(255,251,240,.97);box-shadow:0 6px 0 rgba(95,125,62,.18),0 12px 22px rgba(52,86,34,.16)}
.bib-v3 .crossword-clue-number{flex:none;min-width:34px;padding:5px 7px 4px;border-radius:10px;background:linear-gradient(180deg,#ffe878,#ffd23a);box-shadow:inset 0 -2px 0 rgba(176,106,0,.25);font-family:var(--font-display);font-size:18px;line-height:1;text-align:center;color:#6b3d12}
.bib-v3 .crossword-clue-text{margin:0;align-self:center;font-weight:800;font-size:clamp(14px,calc(4 * var(--app-vw)),17px);line-height:1.28;color:#5a3214}

/* Teclado A-Z em HTML/CSS (7 por linha, como na referência) e as ações. */
.bib-v3 .crossword-controls{display:grid;grid-template-columns:minmax(0,1fr) 25%;align-items:center;gap:8px;padding:10px;border:3px solid #fff;border-radius:24px;background:rgba(255,251,240,.94);box-shadow:0 6px 0 rgba(95,125,62,.18),0 12px 22px rgba(52,86,34,.16)}
.bib-v3 .crossword-keyboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.bib-v3 .crossword-key{position:relative;aspect-ratio:1/1.05;min-width:0;padding:0;border:2px solid #0d63c2;border-radius:10px;background:linear-gradient(180deg,#45b8ff 0%,#2196f0 52%,#1176d8 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(4,62,140,.3),0 3px 0 #0b4f9c,0 5px 8px rgba(8,60,120,.22);color:#fff;font-family:var(--font-display);font-size:clamp(17px,calc(5.2 * var(--app-vw)),24px);line-height:1;text-shadow:0 2px 0 rgba(4,62,140,.35);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}
/* Brilho do canto, como nas teclas da prancha. */
.bib-v3 .crossword-key::before{content:"";position:absolute;top:9%;left:12%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.75);transform:rotate(-30deg);pointer-events:none}
.bib-v3 .crossword-key:active,.bib-v3 .crossword-key.is-pressed{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(4,62,140,.3),0 1px 0 #0b4f9c,0 2px 4px rgba(8,60,120,.2)}
.bib-v3 .crossword-actions{display:flex;flex-direction:column;gap:10px}
.bib-v3 .crossword-action{display:block;padding:0;border:0;background:none;line-height:0;cursor:pointer;transition:transform .12s ease}
.bib-v3 .crossword-action img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 5px rgba(90,50,10,.22))}
.bib-v3 .crossword-action:active{transform:scale(.94)}

/* Conclusão: cartão simples sobre a tela (sem recompensa nesta etapa). */
.bib-v3 .crossword-done{position:fixed;z-index:60;inset:0;left:var(--app-gutter);right:var(--app-gutter);display:grid;place-items:center;padding:20px;background:rgba(30,52,20,.55);animation:crossword-done-in .25s ease}
.bib-v3 .crossword-done[hidden]{display:none}
.bib-v3 .crossword-done-card{width:min(320px,100%);padding:14px 20px 20px;border:3px solid #f2c75c;border-radius:26px;background:linear-gradient(180deg,#fffaf0,#fff1cf);box-shadow:0 14px 30px rgba(40,25,5,.35);text-align:center;color:#5a3a0c;animation:crossword-done-pop .4s cubic-bezier(.2,.9,.3,1.25)}
.bib-v3 .crossword-done-card img{display:block;width:110px;height:auto;margin:-50px auto 2px;filter:drop-shadow(0 6px 8px rgba(91,66,20,.25))}
.bib-v3 .crossword-done-card h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.1;color:#b06a00;text-shadow:0 1px 0 #fff6d6}
.bib-v3 .crossword-done-card p{margin:6px 0 16px;font-weight:800;font-size:17px;line-height:1.3}
.bib-v3 .crossword-done-close{appearance:none;border:0;border-radius:999px;padding:12px 34px;font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,#77df30,#30a814);box-shadow:0 5px 0 #23800e;cursor:pointer}
.bib-v3 .crossword-done-close:active{transform:translateY(2px);box-shadow:0 3px 0 #23800e}
@keyframes crossword-done-in{from{opacity:0}}
@keyframes crossword-done-pop{from{opacity:0;transform:scale(.8)}}

@media (prefers-reduced-motion: reduce){
.bib-v3 .crossword-cell,.bib-v3 .crossword-key,.bib-v3 .crossword-nav,.bib-v3 .crossword-action{transition:none}
.bib-v3 .crossword-cell.is-wrong,.bib-v3 .crossword-done,.bib-v3 .crossword-done-card,.bib-v3 .crossword-cell.is-active .crossword-cell-letter:empty::after{animation:none}
}

/* ========================================================================== */
/* Palavras Cruzadas com partidas (perfis liberados): escolha da dificuldade, */
/* cronômetro, casas pré-preenchidas, segunda dica, aviso de sincronização e  */
/* tempo esgotado. Mesma identidade e as mesmas peças da tela acima; só o que */
/* é novo fica aqui.                                                          */
/* ========================================================================== */

/* Tabuleiro um pouco menor que o da demonstração: a pista pode trazer a segunda dica. */
.bib-v3 .crossword-screen.is-attempt .crossword-board{width:clamp(300px,calc((100svh - 520px) * 1.362),100%)}

/* Cabeçalho: placa do jogo + cronômetro e contador lado a lado. */
.bib-v3 .crossword-plaques{display:flex;align-items:stretch;gap:6px}
.bib-v3 .crossword-timer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:calc(17 * var(--app-vw));margin:0;padding:6px 10px 7px;border:3px solid #1f7fc4;border-radius:18px;background:linear-gradient(180deg,#e6f6ff,#bfe6ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #165f96,0 8px 14px rgba(10,50,90,.22);line-height:1;text-align:center}
.bib-v3 .crossword-timer strong{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,calc(5.6 * var(--app-vw)),26px);font-variant-numeric:tabular-nums;color:#0f4f80}
.bib-v3 .crossword-timer span{margin-top:2px;font-size:clamp(11px,calc(2.9 * var(--app-vw)),13px);font-weight:900;color:#1f6aa5}
.bib-v3 .crossword-timer.is-ending{border-color:#d9452f;background:linear-gradient(180deg,#fff0ec,#ffcbc0);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #a32613,0 8px 14px rgba(120,30,10,.22);animation:crossword-timer-pulse 1s ease-in-out infinite}
.bib-v3 .crossword-timer.is-ending strong,.bib-v3 .crossword-timer.is-ending span{color:#a32613}
@keyframes crossword-timer-pulse{50%{transform:scale(1.05)}}

/* Casa pré-preenchida: já vem com a letra e não muda (sem cursor nem toque de edição). */
.bib-v3 .crossword-cell.is-prefilled{border-color:#a8652c;background:linear-gradient(180deg,#f8dfae,#e8b973);box-shadow:0 calc(var(--cw-cell) * .07) 0 #7c4519,inset 0 calc(var(--cw-cell) * .06) 0 rgba(255,255,255,.45);color:#6b3d12}
.bib-v3 .crossword-cell.is-prefilled.is-in-word{border-color:#1f9fd6;box-shadow:0 0 0 2px rgba(78,205,247,.7),0 0 12px 2px rgba(78,205,247,.7),0 calc(var(--cw-cell) * .07) 0 #7c4519}
.bib-v3 .crossword-cell.is-correct.is-in-word{border-color:#3f9a2a}
.bib-v3 .crossword-cell.is-wrong.is-in-word{border-color:#d9452f}

/* Pista com a segunda dica (aberta pelo botão Dica, fica visível na palavra). */
.bib-v3 .crossword-clue-body{display:flex;flex-direction:column;gap:6px;min-width:0;align-self:center}
.bib-v3 .crossword-clue-body .crossword-clue-text{align-self:auto}
.bib-v3 .crossword-hint-text{position:relative;margin:0;padding:6px 10px 6px 30px;border-radius:12px;background:#fff3c4;box-shadow:inset 0 0 0 2px #f2c75c;font-weight:800;font-size:clamp(13px,calc(3.6 * var(--app-vw)),15px);line-height:1.3;color:#7a4a00}
.bib-v3 .crossword-hint-text::before{content:"";position:absolute;top:50%;left:10px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7b0,#ffcf2e 60%,#e09a00);box-shadow:0 0 6px 2px rgba(255,207,46,.7);transform:translateY(-50%)}
.bib-v3 .crossword-hint-text[hidden]{display:none}
.bib-v3 .crossword-action.is-hint.is-open img{filter:drop-shadow(0 0 8px rgba(255,207,46,.95)) drop-shadow(0 4px 5px rgba(90,50,10,.22))}
.bib-v3 .crossword-action.is-busy{opacity:.6;pointer-events:none}

/* Aviso discreto quando a conexão falha (o jogo continua; o envio é refeito). */
.bib-v3 .crossword-sync{align-self:center;margin:0;padding:6px 14px;border-radius:999px;background:rgba(255,251,240,.95);box-shadow:0 3px 0 rgba(95,125,62,.18);font-weight:800;font-size:13px;color:#8a3b12;text-align:center}
.bib-v3 .crossword-sync[hidden]{display:none}

/* Partida encerrada: teclado e ações param. */
.bib-v3 .crossword-screen.is-over .crossword-controls{opacity:.55;pointer-events:none}

/* Avisos de fim: o botão principal é um link (volta para a escolha). */
.bib-v3 a.crossword-done-close{display:inline-block;text-decoration:none}
.bib-v3 .crossword-done-link{display:block;margin:12px auto 0;padding:4px 8px;border:0;background:none;font-weight:800;font-size:.95rem;color:#8a5a00;text-decoration:underline;cursor:pointer}
.bib-v3 .crossword-done.is-expired .crossword-done-card h2{color:#c0392b}

/* Escolha da dificuldade. */
.bib-v3 .crossword-head.is-single{grid-template-columns:minmax(0,1fr);justify-items:center;margin:0}
.bib-v3 .crossword-head.is-single .crossword-title{width:min(100%,420px)}
.bib-v3 .crossword-choose-card{position:relative;margin-top:44px;padding:56px 16px 18px;border:3px solid #fff;border-radius:26px;background:rgba(255,251,240,.97);box-shadow:0 6px 0 rgba(95,125,62,.18),0 12px 22px rgba(52,86,34,.16);text-align:center}
.bib-v3 .crossword-choose-mascot{position:absolute;top:-48px;left:50%;width:96px;height:auto;transform:translateX(-50%);filter:drop-shadow(0 6px 8px rgba(91,66,20,.25))}
.bib-v3 .crossword-choose-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,calc(6.6 * var(--app-vw)),30px);line-height:1.1;color:#b06a00;text-shadow:0 1px 0 #fff6d6}
.bib-v3 .crossword-choose-lead{margin:8px auto 14px;max-width:34ch;font-weight:800;font-size:clamp(14px,calc(3.9 * var(--app-vw)),16px);line-height:1.35;color:#5a3214}
.bib-v3 .crossword-choose-alert{margin:0 0 14px;padding:8px 12px;border-radius:14px;background:#ffe6e1;box-shadow:inset 0 0 0 2px #f2a090;font-weight:800;font-size:14px;color:#a32613}
.bib-v3 .crossword-levels{display:grid;gap:12px}
.bib-v3 .crossword-level{margin:0}
.bib-v3 .crossword-level-button{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:64px;padding:10px 16px 12px;border:3px solid #23800e;border-radius:22px;background:linear-gradient(180deg,#8be84a,#3db41c);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 5px 0 #23800e,0 9px 14px rgba(30,80,10,.25);color:#fff;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}
.bib-v3 .crossword-level-button b{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,calc(6.2 * var(--app-vw)),28px);line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.bib-v3 .crossword-level-button span{font-weight:800;font-size:clamp(13px,calc(3.6 * var(--app-vw)),15px);line-height:1.25;color:rgba(255,255,255,.95)}
.bib-v3 .crossword-level.is-medio .crossword-level-button{border-color:#c46a00;background:linear-gradient(180deg,#ffc94a,#f39200);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 5px 0 #b35f00,0 9px 14px rgba(120,60,0,.25)}
.bib-v3 .crossword-level.is-dificil .crossword-level-button{border-color:#a3241a;background:linear-gradient(180deg,#ff7b63,#e0402c);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #9c2216,0 9px 14px rgba(120,20,10,.25)}
.bib-v3 .crossword-level-button:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 rgba(0,0,0,.25)}
.bib-v3 .crossword-level-button:disabled{opacity:.7;cursor:progress}
.bib-v3 .crossword-level-button:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
.bib-v3 .crossword-timer.is-ending{animation:none}
.bib-v3 .crossword-level-button{transition:none}
}

/* ========================================================================== */
/* Jogos do Biblinha (/jogos): placa ilustrada e a grade de jogos em duas     */
/* colunas. Mobile-first na coluna do app (--app-vw). Header padrão do        */
/* layout; o fundo (bg-crossword) fica na camada fixa do app-shell.css.       */
/* ========================================================================== */
.bib-v3 .games-screen{width:100%;max-width:392px;margin:0 auto;color:#5a3214}

/* Placa do topo. */
.bib-v3 .games-head{display:flex;flex-direction:column;align-items:center;margin:0 0 14px}
.bib-v3 .games-title{width:min(100%,calc(86 * var(--app-vw)),372px);margin:0;line-height:0}
.bib-v3 .games-title img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 7px rgba(40,72,22,.3));animation:games-title-in .5s cubic-bezier(.2,.9,.3,1.2) backwards}

/* Grade: duas colunas e linhas da mesma altura (títulos e descrições que
   quebram em duas linhas não desalinham os cards). */
.bib-v3 .games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px 12px}

/* Card: a face colorida (::after) fica atrás do conteúdo dentro do próprio
   card (isolation); a ilustração sai um pouco da área colorida e fica por
   cima da etiqueta. */
.bib-v3 .games-card{--games-c1:#ffe873;--games-c2:#fecf34;--games-c3:#fbb21f;--games-edge:#df900f;--games-rim:rgba(255,246,190,.9);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;border-radius:20px;color:#665244;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .16s ease;animation:games-card-in .42s cubic-bezier(.2,.8,.2,1) backwards}
.bib-v3 .games-card:nth-child(2){animation-delay:.06s}
.bib-v3 .games-card:nth-child(3){animation-delay:.12s}
.bib-v3 .games-card:nth-child(4){animation-delay:.18s}
.bib-v3 .games-card::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 62%),linear-gradient(160deg,var(--games-c1) 0%,var(--games-c2) 52%,var(--games-c3) 100%);box-shadow:inset 0 0 0 2.5px var(--games-rim),inset 0 -12px 18px rgba(0,0,0,.06),0 4px 0 var(--games-edge),0 10px 18px rgba(36,64,18,.3)}

.bib-v3 .games-card.is-puzzle{--games-c1:#97f2ff;--games-c2:#5ccff6;--games-c3:#33ade6;--games-edge:#1d87c4;--games-rim:rgba(214,248,255,.9)}
.bib-v3 .games-card.is-crossword{--games-c1:#e4bcff;--games-c2:#b57af8;--games-c3:#d571f1;--games-edge:#8547cc;--games-rim:rgba(244,226,255,.9)}
.bib-v3 .games-card.is-challenges{--games-c1:#aaef6e;--games-c2:#7bd34d;--games-c3:#55b23a;--games-edge:#3d8f27;--games-rim:rgba(222,250,190,.9)}

/* Área da ilustração (proporção fixa: as quatro ficam alinhadas na linha),
   acima da etiqueta: a parte que sai da área colorida (a roleta, mais) passa
   por cima dela; o troféu termina logo antes. */
.bib-v3 .games-card.is-puzzle,.bib-v3 .games-card.is-crossword{--games-art-top:5%;--games-art-h:99%}
.bib-v3 .games-card.is-challenges{--games-art-top:4%;--games-art-h:93%}
.bib-v3 .games-card-art{position:relative;z-index:2;display:block;aspect-ratio:100/64}
.bib-v3 .games-card-art img{position:absolute;z-index:0;left:50%;top:var(--games-art-top,6%);width:auto;height:var(--games-art-h,104%);max-width:84%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 5px 5px rgba(40,30,10,.22));transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
/* Brilhos brancos (os mesmos da roleta em todos os cards), atrás da ilustração. */
.bib-v3 .games-card-art::before{content:"";position:absolute;z-index:-1;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M9 7Q9.8 11.2 14 12Q9.8 12.8 9 17Q8.2 12.8 4 12Q8.2 11.2 9 7Z' fill='%23fff'/%3E%3Cpath d='M91 10Q91.64 13.36 95 14Q91.64 14.64 91 18Q90.36 14.64 87 14Q90.36 13.36 91 10Z' fill='%23fff'/%3E%3Cpath d='M7 37.2Q7.448 39.552 9.8 40Q7.448 40.448 7 42.8Q6.552 40.448 4.2 40Q6.552 39.552 7 37.2Z' fill='%23fff'/%3E%3Cpath d='M94 38.8Q94.512 41.488 97.2 42Q94.512 42.512 94 45.2Q93.488 42.512 90.8 42Q93.488 41.488 94 38.8Z' fill='%23fff'/%3E%3Cpath d='M85 54.8Q85.352 56.648 87.2 57Q85.352 57.352 85 59.2Q84.648 57.352 82.8 57Q84.648 56.648 85 54.8Z' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}

/* Etiqueta clara com título e descrição. */
.bib-v3 .games-card-label{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:0 3px 3px;padding:7px 6px 9px;border-radius:15px 15px 17px 17px;background:linear-gradient(180deg,#fffdf6,#fdf8ec);box-shadow:inset 0 -3px 0 #f3d9b5,0 -3px 10px rgba(70,45,10,.16);text-align:center}
.bib-v3 .games-card-label b{display:block;max-width:100%;font-family:var(--font-display);font-weight:400;font-size:clamp(13.5px,calc(4.3 * var(--app-vw)),19px);line-height:1.08;color:#c94a26;text-shadow:0 1px 0 #fff;overflow-wrap:anywhere}
.bib-v3 .games-card-label small{display:block;max-width:100%;font-weight:800;font-size:clamp(11.5px,calc(3.2 * var(--app-vw)),13.5px);line-height:1.22;color:#665244;text-wrap:balance}

/* Toque e foco: só nos cards que levam a um jogo (Desafios é "em breve"). */
.bib-v3 a.games-card:active{transform:translateY(2px) scale(.98)}
.bib-v3 a.games-card:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (hover:hover){
.bib-v3 a.games-card:hover{transform:translateY(-3px)}
.bib-v3 a.games-card:hover .games-card-art img{transform:translateX(-50%) rotate(-3deg) scale(1.04)}
}
.bib-v3 .games-card.is-soon{cursor:default}

@keyframes games-title-in{from{opacity:0;transform:translateY(-10px) scale(.94)}}
@keyframes games-card-in{from{opacity:0;transform:translateY(14px) scale(.97)}}

@media (prefers-reduced-motion: reduce){
.bib-v3 .games-title img,.bib-v3 .games-card{animation:none}
.bib-v3 .games-card,.bib-v3 .games-card-art img{transition:none}
}

/* ========================================================================== */
/* Jornada do Quebra-cabeça (/jogos/quebra-cabeca): placa, lista de livros    */
/* (capa, nome, quebra-cabeças concluídos e barra; livro não alcançado em     */
/* cinza com cadeado) e, por livro (/jogos/quebra-cabeca/livro/{slug}), os    */
/* cards de capítulo de sempre. Header padrão do layout; o fundo              */
/* (bg-garden-frame) fica na camada fixa do app-shell.css.                    */
/* ========================================================================== */
/* --pzj-art: largura da capa nos cards de livro; o cadeado dos capítulos usa a
   mesma medida para ter o mesmo tamanho do cadeado da lista de livros. */
.bib-v3 .pzj-screen{--pzj-art:clamp(80px,calc(46 * var(--app-vw) - 62px),150px);width:100%;max-width:520px;margin:0 auto;color:#4a4f45}

/* Placa do topo. */
.bib-v3 .pzj-title{width:min(100%,calc(90 * var(--app-vw)),400px);margin:0 auto 12px;line-height:0}
.bib-v3 .pzj-title img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 7px rgba(60,90,30,.28))}

/* Livros: um card por linha (capa | nome, concluídos e barra | seta). */
.bib-v3 .pzj-books{display:flex;flex-direction:column;gap:12px}
.bib-v3 .pzj-book{position:relative;display:grid;grid-template-columns:var(--pzj-art) minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 10px;border:2px solid #e3ecdc;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f7faf3);box-shadow:0 6px 0 rgba(95,125,62,.12),0 12px 22px rgba(52,86,34,.12);color:#4a4f45;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .14s ease}
/* Livro liberado: contorno verde claro e seta, como na referência. */
.bib-v3 a.pzj-book{border-color:#bfe59f;box-shadow:0 0 0 3px rgba(178,226,138,.45),0 6px 0 rgba(95,125,62,.14),0 12px 22px rgba(52,86,34,.14)}
.bib-v3 a.pzj-book:active{transform:translateY(2px) scale(.99)}
.bib-v3 a.pzj-book:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bib-v3 .pzj-book-art{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#e7efe2}
.bib-v3 .pzj-book-art>img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.bib-v3 .pzj-book-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.bib-v3 .pzj-book-name{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(19px,calc(5.8 * var(--app-vw)),26px);line-height:1.05;color:#1f5a2e;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.bib-v3 .pzj-book-name.is-long{font-size:clamp(16px,calc(4.6 * var(--app-vw)),21px)}
.bib-v3 .pzj-book-count{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 6px;font-weight:800;font-size:clamp(11.5px,calc(3.2 * var(--app-vw)),14px);color:#6b6f66}
.bib-v3 .pzj-book-count span{white-space:nowrap}
.bib-v3 .pzj-book-count strong{margin-left:auto;font-family:var(--font-display);font-weight:400;font-size:clamp(16px,calc(4.6 * var(--app-vw)),21px);line-height:1;color:#333a33}
.bib-v3 .pzj-bar{display:block;height:12px;border-radius:999px;background:#e8ece6;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.bib-v3 .pzj-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff3fa4,#8a42ef)}
/* Seta verde: quadrado arredondado com chevron em CSS. */
.bib-v3 .pzj-book-go{position:relative;width:clamp(36px,calc(11 * var(--app-vw)),46px);aspect-ratio:1;border-radius:12px;background:linear-gradient(180deg,#7fe03f,#36a81a);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(20,100,10,.25),0 3px 0 #23800e,0 6px 10px rgba(30,90,10,.25)}
.bib-v3 .pzj-book-go::before{content:"";position:absolute;top:50%;left:40%;width:28%;height:28%;border:solid #fff;border-width:0 4px 4px 0;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg)}

/* Livro ainda não alcançado: cinza, cadeado sobre a capa e selo "Bloqueado". */
.bib-v3 .pzj-book.is-locked{grid-template-columns:var(--pzj-art) minmax(0,1fr);background:linear-gradient(180deg,#f8f8f7,#f0f1ef);box-shadow:0 4px 0 rgba(0,0,0,.05),0 10px 18px rgba(40,50,40,.08)}
.bib-v3 .pzj-book.is-locked .pzj-book-art>img:first-child{filter:grayscale(1) contrast(.92) brightness(1.04);opacity:.78}
.bib-v3 .pzj-book-lock{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.bib-v3 .pzj-book.is-locked .pzj-book-name{color:#5f625d}
.bib-v3 .pzj-book-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 12px;border-radius:12px;background:#ebecea;font-weight:800;font-size:clamp(11.5px,calc(3.2 * var(--app-vw)),14px);color:#6a6d68}

/* Capítulos de um livro (referência "Seleção de capítulos"): card do livro
   e a grade. Card: imagem com o indicador do estado no
   canto, número e título (até 5 linhas) e o selo do estado: Concluído (verde),
   Jogar (azul) e Bloqueado (cinza, com a imagem em cinza e o cadeado).
   Sempre 2 cards por linha (a coluna do app tem largura de celular); número,
   título e selo escalam pela largura do card (cqw). */
.bib-v3 .pzj-icons{position:absolute;width:0;height:0;overflow:hidden}
.bib-v3 .pzj-book-head{grid-template-columns:var(--pzj-art) minmax(0,1fr);margin:0 0 14px}
.bib-v3 .pzj-book-head .pzj-book-art{aspect-ratio:5/3}
.bib-v3 .pzj-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.bib-v3 .pzj-chapter{position:relative;display:flex;flex-direction:column;min-width:0;padding:4px 4px 9px;border:2px solid #e3ece4;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f7fbf8);box-shadow:0 5px 0 rgba(95,125,62,.10),0 10px 18px rgba(52,86,34,.12);color:#205050;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .14s ease;container-type:inline-size}
.bib-v3 a.pzj-chapter:active{transform:translateY(2px) scale(.98)}
.bib-v3 a.pzj-chapter:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (hover:hover){.bib-v3 a.pzj-chapter:hover{transform:translateY(-2px)}}
.bib-v3 .pzj-chapter.is-locked{cursor:default}
.bib-v3 .pzj-chapter-art{position:relative;display:block;aspect-ratio:37/20;border-radius:12px 12px 6px 6px;overflow:hidden;background:#e7efea}
.bib-v3 .pzj-chapter-art>img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.bib-v3 .pzj-chapter.is-locked .pzj-chapter-art>img:first-child{filter:grayscale(1) contrast(.95) brightness(1.03)}
.bib-v3 .pzj-chapter-lock{position:absolute;left:50%;top:50%;width:calc(var(--pzj-art) * .3);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
/* Indicador do canto: círculo verde com check (concluído) ou azul com play.
   O anel branco faz parte do SVG (concêntrico ao círculo colorido) e o tamanho
   é inteiro: o anel fica igual em todos os lados, em qualquer coluna. */
.bib-v3 .pzj-chapter-mark{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.28)}
.bib-v3 .pzj-chapter-mark svg{display:block;width:100%;height:100%}
.bib-v3 .pzj-chapter.is-done .pzj-chapter-mark{color:#1fae46}
.bib-v3 .pzj-chapter.is-play .pzj-chapter-mark{color:#1683f5}
/* Número em destaque ao lado do título. */
.bib-v3 .pzj-chapter-info{display:flex;align-items:center;gap:6px;flex:1 1 auto;padding:9px 4px 0}
.bib-v3 .pzj-chapter-number{flex:none;font-family:var(--font-display);font-weight:400;font-size:28px;font-size:clamp(22px,19cqw,32px);line-height:1;color:#0b4a36}
.bib-v3 .pzj-chapter-number.is-long{font-size:22px;font-size:clamp(17px,14cqw,25px)}
.bib-v3 .pzj-chapter-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;min-width:0;font-weight:800;font-size:12.5px;font-size:clamp(11.5px,9.2cqw,14px);line-height:1.2;color:#205050;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Selo do estado, sempre no pé do card (os da mesma linha ficam alinhados).
   Uma linha só: a fonte acompanha o card para "Montar quebra-cabeça" caber. */
.bib-v3 .pzj-chapter-action{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-width:72%;max-width:100%;margin-top:9px;padding:5px 8px;border-radius:999px;font-weight:800;font-size:12px;font-size:clamp(10.5px,8.2cqw,14px);line-height:1.1;white-space:nowrap}
.bib-v3 .pzj-chapter.is-done .pzj-chapter-action{background:#d9f7d4;color:#0b7a1c}
.bib-v3 .pzj-chapter.is-play .pzj-chapter-action{background:#d4effd;color:#0b5fe0}
.bib-v3 .pzj-chapter.is-locked .pzj-chapter-action{background:linear-gradient(180deg,#e2e3e4,#d2d4d6);color:#2b3b48}
/* Celulares estreitos: espaços e seta menores para nome e contador caberem. */
@media(max-width:359px){
.bib-v3 .pzj-book{gap:8px;padding:8px 10px 8px 8px}
.bib-v3 .pzj-book-go{width:32px;border-radius:10px}
.bib-v3 .pzj-book-go::before{border-width:0 3px 3px 0}
}

@media (prefers-reduced-motion: reduce){
.bib-v3 .pzj-book,.bib-v3 .pzj-chapter{transition:none}
}