/* =========================================================
   CONQUISTAS.CSS — BAÚ DE CONQUISTAS / MURAL DE MÓDULOS
========================================================= */

#tela-conquistas {
    width: 100%;
    max-width: 406px;
    min-height: auto;

    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;
    text-align: center;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.conquistas-box {
    position: relative;

    width: min(390px, 96vw);
    min-height: 560px;

    padding: 22px 18px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    border-radius: 34px;

    background: rgba(255, 250, 239, 0.86);
    border: 5px solid #2f87df;

    box-shadow:
        0 10px 0 rgba(47, 135, 223, 0.22),
        0 22px 38px rgba(92, 61, 26, 0.18),
        inset 0 0 0 4px rgba(255, 255, 255, 0.58);

    overflow: hidden;
}

.conquistas-box::before {
    content: "";
    position: absolute;
    inset: 12px;

    border-radius: 26px;
    border: 2px solid rgba(231, 195, 123, 0.42);

    pointer-events: none;
}

.banner-conquistas,
.conquistas-divisor,
.conquistas-subtitulo,
.mural-conquistas-modulos,
.btn-voltar-conquistas {
    position: relative;
    z-index: 1;
}

.banner-conquistas {
    display: block;

    width: min(285px, 78vw);
    height: auto;

    object-fit: contain;

    margin: 0 auto -2px;

    filter: drop-shadow(0 5px 6px rgba(92, 61, 26, 0.18));
}

.conquistas-divisor {
    width: min(250px, 78%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: -2px auto 0;
}

.conquistas-divisor span {
    height: 3px;
    flex: 1;

    border-radius: 999px;
    background: rgba(218, 151, 39, 0.72);
}

.conquistas-divisor strong {
    color: #d89122;
    font-size: 1.35rem;
    line-height: 1;
}

.conquistas-subtitulo {
    max-width: 310px;
    margin: 0 auto 4px;

    color: #4a2b16;

    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 900;
}

.mural-conquistas-modulos {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 2px auto 6px;
}

.card-conquista-modulo {
    width: 100%;
    min-height: 104px;

    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;

    padding: 10px;

    border-radius: 22px;

    background: rgba(255, 253, 248, 0.86);
    border: 3px solid rgba(222, 174, 91, 0.72);

    box-shadow:
        0 5px 0 rgba(184, 107, 47, 0.16),
        0 10px 18px rgba(92, 61, 26, 0.10),
        inset 0 0 0 2px rgba(255, 255, 255, 0.52);

    text-align: left;
}

.card-conquista-img-area {
    width: 76px;
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
    background: rgba(255, 244, 219, 0.76);

    overflow: hidden;
}

.card-conquista-img-area img {
    width: 68px;
    height: 68px;

    display: block;
    object-fit: contain;

    filter: drop-shadow(0 4px 5px rgba(92, 61, 26, 0.15));
}

.card-conquista-info {
    min-width: 0;
}

.card-conquista-info h3 {
    margin: 0 0 7px;

    color: #1f6fc2;

    font-size: 1rem;
    line-height: 1.04;
    font-weight: 900;

    text-shadow: 1px 1px 0 #ffffff;
}

.barra-conquista {
    width: 100%;
    height: 13px;

    margin: 0 0 6px;

    border-radius: 999px;

    background: rgba(255, 248, 235, 0.94);
    border: 2px solid rgba(222, 174, 91, 0.62);

    overflow: hidden;
}

.barra-conquista-fill {
    height: 100%;
    width: 0%;

    border-radius: 999px;

    background: linear-gradient(90deg, #2c90f0, #56c8ff);
}

.card-conquista-info p {
    margin: 0;

    color: #6c411c;

    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 900;
}

.btn-ver-estante {
    min-height: 78px;
    padding: 8px 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    border: 0;
    border-left: 2px dashed rgba(222, 174, 91, 0.52);
    border-radius: 0 16px 16px 0;

    background: rgba(255, 248, 231, 0.64);
    color: #4a2b16;

    font-family: inherit;
    font-size: 0.80rem;
    line-height: 1.05;
    font-weight: 900;

    cursor: pointer;
}

.btn-ver-estante span {
    display: block;
    max-width: 42px;
    text-align: center;
}

.btn-ver-estante strong {
    color: #e46817;
    font-size: 1.9rem;
    line-height: 1;
}

.btn-ver-estante:active {
    transform: scale(0.97);
}

.aquario-vazio {
    margin: 12px auto;
    padding: 18px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.72);
    color: #143f79;

    font-weight: 900;
    font-size: 0.96rem;
    line-height: 1.35;
}

.btn-voltar-conquistas {
    min-width: 230px;
    min-height: 60px;

    margin-top: auto;
    padding: 13px 28px;

    border-radius: 999px;
    border: 4px solid #d26816;

    background: linear-gradient(180deg, #ff9f2e, #f07813);
    color: #ffffff;

    font-family: inherit;
    font-size: 1.08rem;
    line-height: 1;
    font-weight: 900;

    box-shadow:
        0 8px 0 #b9550e,
        0 12px 20px rgba(0, 0, 0, 0.14);

    cursor: pointer;
}

.btn-voltar-conquistas:active {
    transform: translateY(3px);
    box-shadow:
        0 4px 0 #b9550e,
        0 7px 12px rgba(0, 0, 0, 0.14);
}

/* =========================================================
   CONQUISTAS — TELAS MUITO ESTREITAS
========================================================= */

@media (max-width: 380px) {
    .conquistas-box {
        width: min(360px, 96vw);
        padding: 20px 14px 22px;
        gap: 10px;
    }

    .banner-conquistas {
        width: min(255px, 76vw);
    }

    .conquistas-subtitulo {
        font-size: 0.94rem;
    }

    .card-conquista-modulo {
        min-height: 96px;
        grid-template-columns: 72px minmax(0, 1fr) 62px;
        gap: 8px;
        padding: 9px;
        border-radius: 20px;
    }

    .card-conquista-img-area {
        width: 66px;
        height: 66px;
        border-radius: 18px;
    }

    .card-conquista-img-area img {
        width: 60px;
        height: 60px;
    }

    .card-conquista-info h3 {
        font-size: 0.90rem;
    }

    .card-conquista-info p {
        font-size: 0.76rem;
    }

    .btn-ver-estante {
        min-height: 70px;
        font-size: 0.72rem;
    }

    .btn-ver-estante strong {
        font-size: 1.55rem;
    }

    .btn-voltar-conquistas {
        min-width: 210px;
        min-height: 54px;
        font-size: 0.95rem;
    }
}

/* =========================================================
   ESTANTE DE SELOS — POR MÓDULO
========================================================= */

#tela-estante-selos {
    width: 100%;
    max-width: 406px;
    min-height: auto;

    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;
    text-align: center;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.estante-selos-box {
    position: relative;

    width: min(390px, 96vw);
    min-height: 620px;

    padding: 20px 16px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    border-radius: 34px;

    background: rgba(255, 250, 239, 0.88);
    border: 5px solid #2f87df;

    box-shadow:
        0 10px 0 rgba(47, 135, 223, 0.22),
        0 22px 38px rgba(92, 61, 26, 0.18),
        inset 0 0 0 4px rgba(255, 255, 255, 0.58);

    overflow: hidden;
}

.estante-selos-box::before {
    content: "";
    position: absolute;
    inset: 12px;

    border-radius: 26px;
    border: 2px solid rgba(231, 195, 123, 0.42);

    pointer-events: none;
}

.banner-estante-modulo,
#titulo-estante-selos,
.estante-topo,
.lista-estante-ilhas,
.btn-voltar-estante {
    position: relative;
    z-index: 1;
}

.banner-estante-modulo {
    display: block;

    width: min(285px, 78vw);
    height: auto;

    object-fit: contain;

    margin: 0 auto -2px;

    filter: drop-shadow(0 5px 6px rgba(92, 61, 26, 0.18));
}

#titulo-estante-selos {
    margin: -4px 0 0;

    color: #1f6fc2;

    font-size: 1.35rem;
    line-height: 1.05;
    font-weight: 900;

    text-shadow: 1px 1px 0 #ffffff;
}

.estante-topo {
    width: 100%;

    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    margin: 2px auto 0;
}

.estante-tutor-img {
    width: 112px;
    height: 112px;

    object-fit: contain;

    filter: drop-shadow(0 8px 10px rgba(92, 61, 26, 0.16));
}

.estante-balao {
    position: relative;

    padding: 14px 12px;

    border-radius: 20px;

    background: rgba(255, 247, 222, 0.92);
    border: 3px solid rgba(222, 174, 91, 0.64);

    box-shadow:
        0 5px 0 rgba(184, 107, 47, 0.14),
        0 10px 18px rgba(92, 61, 26, 0.10);

    text-align: center;
}

.estante-balao::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 45%;

    width: 16px;
    height: 16px;

    background: rgba(255, 247, 222, 0.92);
    border-left: 3px solid rgba(222, 174, 91, 0.64);
    border-bottom: 3px solid rgba(222, 174, 91, 0.64);

    transform: rotate(45deg);
}

.estante-balao p {
    margin: 0;

    color: #1f5f9f;

    font-size: 0.86rem;
    line-height: 1.28;
    font-weight: 900;
}

.lista-estante-ilhas {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 4px auto 8px;
}

.prateleira-ilha {
    position: relative;

    width: 100%;
    min-height: 150px;

    padding: 20px 14px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 24px;

    background-color: rgba(255, 244, 216, 0.88);
    background-image: url("../assets/banners/conquistas/mural_conquistas.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 6px 0 rgba(184, 107, 47, 0.16),
        0 12px 20px rgba(92, 61, 26, 0.10);

    overflow: hidden;
}

.prateleira-ilha-titulo {
    position: relative;
    z-index: 2;

    max-width: 92%;

    margin: 0 auto 10px;
    padding: 6px 16px;

    border-radius: 999px;

    background: linear-gradient(180deg, #2d9af2, #176bc4);
    color: #ffffff;

    font-size: 0.92rem;
    line-height: 1.1;
    font-weight: 900;

    box-shadow:
        0 4px 0 #0d4e99,
        0 8px 12px rgba(0, 0, 0, 0.12);

    text-align: center;
}

.prateleira-selos-grid {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    align-items: start;
}

.slot-rota {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.slot-rota-label {
    color: #4a2b16;

    font-size: 0.86rem;
    line-height: 1;
    font-weight: 900;
}

.selo-slot {
    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(169, 137, 91, 0.30);
    border: 4px solid rgba(121, 92, 54, 0.20);

    box-shadow:
        inset 0 5px 10px rgba(76, 52, 26, 0.16),
        0 6px 10px rgba(92, 61, 26, 0.10);
}

.selo-slot.com-selo {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.selo-slot img {
    width: 82px;
    height: 82px;

    display: block;
    object-fit: contain;

    filter: drop-shadow(0 7px 8px rgba(92, 61, 26, 0.22));
}

.selo-slot-vazio {
    width: 68px;
    height: 68px;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 30%, rgba(255, 245, 220, 0.52), rgba(125, 95, 56, 0.20));

    border: 3px dashed rgba(116, 86, 49, 0.22);

    opacity: 0.82;
}

.prateleira-madeira {
    position: relative;
    z-index: 1;

    width: 92%;
    height: 16px;

    margin-top: 10px;

    border-radius: 999px;

    background: linear-gradient(180deg, #b97832, #7f431d);

    box-shadow:
        0 5px 0 #5d2c13,
        0 9px 12px rgba(73, 42, 20, 0.20);
}

.btn-voltar-estante {
    min-width: 230px;
    min-height: 60px;

    margin-top: auto;
    padding: 13px 28px;

    border-radius: 999px;
    border: 4px solid #d26816;

    background: linear-gradient(180deg, #ff9f2e, #f07813);
    color: #ffffff;

    font-family: inherit;
    font-size: 1.08rem;
    line-height: 1;
    font-weight: 900;

    box-shadow:
        0 8px 0 #b9550e,
        0 12px 20px rgba(0, 0, 0, 0.14);

    cursor: pointer;
}

.btn-voltar-estante:active {
    transform: translateY(3px);
    box-shadow:
        0 4px 0 #b9550e,
        0 7px 12px rgba(0, 0, 0, 0.14);
}

/* =========================================================
   ESTANTE — TELAS MUITO ESTREITAS
========================================================= */

@media (max-width: 380px) {
    .estante-selos-box {
        width: min(360px, 96vw);
        padding: 18px 13px 22px;
        gap: 10px;
    }

    .banner-estante-modulo {
        width: min(255px, 76vw);
    }

    #titulo-estante-selos {
        font-size: 1.18rem;
    }

    .estante-topo {
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 8px;
    }

    .estante-tutor-img {
        width: 94px;
        height: 94px;
    }

    .estante-balao {
        padding: 12px 10px;
        border-radius: 18px;
    }

    .estante-balao p {
        font-size: 0.78rem;
    }

    .prateleira-ilha {
        min-height: 138px;
        padding: 18px 12px 14px;
        border-radius: 22px;
    }

    .prateleira-ilha-titulo {
        font-size: 0.80rem;
        padding: 6px 12px;
    }

    .selo-slot {
        width: 72px;
        height: 72px;
    }

    .selo-slot img {
        width: 72px;
        height: 72px;
    }

    .selo-slot-vazio {
        width: 58px;
        height: 58px;
    }

    .slot-rota-label {
        font-size: 0.78rem;
    }

    .btn-voltar-estante {
        min-width: 210px;
        min-height: 54px;
        font-size: 0.95rem;
    }
}