@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

#novo-usuario-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.72);
    font-family: 'Roboto', system-ui, sans-serif;
}

#novo-usuario-overlay.is-open {
    display: flex;
}

/* Largura igual ao app (450px) — referência 2857 usa ~559px num viewport ~607px */
.nu-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92vw, 450px);
    --nu-base: min(92vw, 450px);
    max-height: calc(100vh - 24px);
}

#novo-usuario-popup {
    width: 100%;
    position: relative;
    overflow: visible;
    border-radius: calc(var(--nu-base) * 0.029);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/*
 * Header decorativo — clone exato 2857:
 * title-box 247px @559px, margin-top -97px
 * bg1 607px glow (100% 100%), bg2 521x247 rwdbzs2 (100% 100%)
 */
.nu-title-box {
    position: relative;
    width: 100%;
    height: calc(var(--nu-base) * 0.442);
    margin-top: calc(var(--nu-base) * -0.174);
    margin-bottom: calc(var(--nu-base) * -0.007);
    z-index: 3;
    pointer-events: none;
}

.nu-hero-bg1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--nu-base) * 1.086);
    height: calc(var(--nu-base) * 1.086);
    background: url('../img/novo-usuario/rwtc-bjgx.avif') center center / 100% 100% no-repeat;
}

.nu-hero-bg2 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(var(--nu-base) * 0.932);
    height: 100%;
    background: url('../img/novo-usuario/rwtc-header.avif') center center / 100% 100% no-repeat;
}

/* Corpo lavanda */
.nu-body {
    position: relative;
    z-index: 2;
    padding: calc(var(--nu-base) * 0.029) calc(var(--nu-base) * 0.029) calc(var(--nu-base) * 0.025);
    background: linear-gradient(180deg, #f6eeff 0%, #f2e5ff 48%, #f6eeff 100%);
    border-radius: calc(var(--nu-base) * 0.029);
}

.nu-tab-row {
    display: flex;
    align-items: center;
    gap: calc(var(--nu-base) * 0.014);
    margin-bottom: calc(var(--nu-base) * 0.014);
    padding: 0 calc(var(--nu-base) * 0.007);
}

.nu-tab-icon {
    width: calc(var(--nu-base) * 0.131);
    height: calc(var(--nu-base) * 0.104);
    object-fit: contain;
    flex-shrink: 0;
}

.nu-tab-title {
    margin: 0;
    font-size: calc(var(--nu-base) * 0.035);
    font-weight: 600;
    color: #872fea;
    line-height: 1.2;
}

/* Card missão — ref 526x109 @559px */
.nu-mission {
    background: #fff;
    border-radius: calc(var(--nu-base) * 0.02);
    overflow: hidden;
    min-height: calc(var(--nu-base) * 0.195);
    box-shadow: 0 1px 4px rgba(135, 47, 234, 0.08);
}

.nu-mission + .nu-mission {
    margin-top: calc(var(--nu-base) * 0.018);
}

.nu-mission-top {
    display: flex;
    align-items: center;
    gap: calc(var(--nu-base) * 0.014);
    padding: calc(var(--nu-base) * 0.014) calc(var(--nu-base) * 0.021) calc(var(--nu-base) * 0.011);
}

.nu-mission-icon {
    width: calc(var(--nu-base) * 0.064);
    height: calc(var(--nu-base) * 0.064);
    object-fit: contain;
    flex-shrink: 0;
}

.nu-mission-name {
    font-size: calc(var(--nu-base) * 0.035);
    font-weight: 400;
    color: #333;
    line-height: 1.25;
}

.nu-mission-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--nu-base) * 0.014);
    min-height: calc(var(--nu-base) * 0.129);
    padding: calc(var(--nu-base) * 0.014) calc(var(--nu-base) * 0.021) calc(var(--nu-base) * 0.018);
    background: #fff7ed;
}

.nu-rewards {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--nu-base) * 0.025);
    flex: 1;
    min-width: 0;
}

.nu-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--nu-base) * 0.005);
    min-width: 0;
}

.nu-reward-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--nu-base) * 0.039);
    height: calc(var(--nu-base) * 0.039);
    border-radius: 50%;
    font-size: calc(var(--nu-base) * 0.025);
    font-weight: 700;
    line-height: 1;
}

.nu-reward-icon--gold {
    background: linear-gradient(180deg, #ffd54f 0%, #ffaa09 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nu-reward-icon--green {
    background: transparent;
    color: #04be02;
    width: auto;
    height: auto;
}

.nu-reward-icon--green svg {
    width: calc(var(--nu-base) * 0.036);
    height: calc(var(--nu-base) * 0.036);
    display: block;
}

.nu-reward-val {
    font-size: calc(var(--nu-base) * 0.032);
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}

.nu-reward-val--gold {
    color: #ffaa09;
}

.nu-reward-val--green {
    color: #04be02;
}

/* Prosseguir — ref 121x49 */
.nu-proceed {
    flex-shrink: 0;
    min-width: calc(var(--nu-base) * 0.216);
    height: calc(var(--nu-base) * 0.088);
    padding: 0 calc(var(--nu-base) * 0.021);
    border: none;
    border-radius: calc(var(--nu-base) * 0.014);
    background: #1678ff;
    color: #fff;
    font-size: calc(var(--nu-base) * 0.032);
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 120, 255, 0.35);
}

.nu-proceed:active:not(:disabled) {
    transform: scale(0.98);
}

.nu-proceed:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nu-proceed--claim {
    background: linear-gradient(180deg, #4ade80 0%, #04be02 100%);
    box-shadow: 0 2px 6px rgba(4, 190, 2, 0.3);
}

/* Centro de Missões — ref 526x57 pill */
.nu-center-btn {
    display: block;
    width: 100%;
    margin-top: calc(var(--nu-base) * 0.025);
    height: calc(var(--nu-base) * 0.102);
    border: none;
    border-radius: 999px;
    background: #1678ff;
    color: #fff;
    font-size: calc(var(--nu-base) * 0.035);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(22, 120, 255, 0.35);
}

.nu-center-btn:active {
    transform: scale(0.99);
}

.nu-checks {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--nu-base) * 0.014);
    margin-top: calc(var(--nu-base) * 0.021);
    padding: 0 calc(var(--nu-base) * 0.004);
    font-size: calc(var(--nu-base) * 0.023);
    color: #8a7a9e;
}

.nu-checks label {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    line-height: 1.35;
    max-width: 48%;
}

.nu-checks input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: #872fea;
    width: calc(var(--nu-base) * 0.02);
    height: calc(var(--nu-base) * 0.02);
}

.nu-close-bottom {
    flex-shrink: 0;
    width: calc(var(--nu-base) * 0.064);
    height: calc(var(--nu-base) * 0.064);
    margin-top: calc(var(--nu-base) * 0.025);
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: calc(var(--nu-base) * 0.04);
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nu-close-bottom:hover {
    background: rgba(255, 255, 255, 0.1);
}

#novo-usuario-congrats {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.82);
    font-family: 'Roboto', sans-serif;
}

#novo-usuario-congrats.is-open {
    display: flex;
}

.nu-congrats-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92vw, 450px);
    --nu-base: min(92vw, 450px);
}

.nu-congrats-box {
    width: 100%;
    padding: calc(var(--nu-base) * 0.04) calc(var(--nu-base) * 0.032);
    border-radius: calc(var(--nu-base) * 0.029);
    background: linear-gradient(180deg, #f6eeff 0%, #f2e5ff 100%);
    text-align: center;
    color: #333;
}

.nu-congrats-box h3 {
    margin: 0 0 8px;
    font-size: calc(var(--nu-base) * 0.035);
    font-weight: 700;
    color: #872fea;
}

.nu-congrats-box p {
    margin: 0 0 16px;
    font-size: calc(var(--nu-base) * 0.029);
    line-height: 1.5;
    color: #444;
}

.nu-congrats-box .nu-proceed {
    min-width: calc(var(--nu-base) * 0.27);
    margin: 0 auto;
}

@media (max-width: 360px) {
    .nu-checks {
        flex-direction: column;
        gap: 6px;
    }

    .nu-checks label {
        max-width: 100%;
    }
}