@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,
ul {
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

body {
    font-family: "Nunito", system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn {
    display: block;
    font-family: inherit;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

/* quiz/index */
:root {
            --home-purple: #7c3aed;
            --home-purple-dark: #5b21b6;
            --home-purple-soft: #f4f1fb;
            --home-purple-line: #e6e0f5;
            --home-ink: #2a2540;
            --home-muted: #756f8f;
            --home-gold: #f59e0b;
            --home-gold-dark: #c77c06;
            --home-error: #a72b45;
            --home-error-soft: #fff1f4;
        }

        body {
            min-height: 100dvh;
            height: auto;
            padding: 0;
            justify-content: flex-start;
            background: #ece9f3;
            background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, .10) 1px, transparent 0);
            background-size: 26px 26px;
            color: var(--home-ink);
            font-family: "Nunito", system-ui, sans-serif;
        }

        .home-scope {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .home-phone {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #fff;
            color: var(--home-ink);
        }

        main.home-phone {
            width: 100%;
        }

        .home-status {
            flex: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .85rem 1.55rem .25rem;
            color: var(--home-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .9rem;
            font-weight: 800;
        }

        .home-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1.25rem;
            padding: 1.35rem;
        }

        .home-badge {
            width: fit-content;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .45rem .95rem;
            border-radius: 999px;
            background: var(--home-purple);
            box-shadow: 0 5px 0 var(--home-purple-dark);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .85rem;
            font-weight: 800;
            letter-spacing: .04em;
        }

        .home-title {
            margin: 0;
            color: var(--home-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 2.6rem;
            font-weight: 800;
            line-height: 1.02;
        }

        .home-copy {
            margin: 0;
            max-width: 30rem;
            color: var(--home-muted);
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.5;
            text-align: left;
        }

        .home-hero {
            display: flex;
            align-items: flex-end;
            gap: .8rem;
            padding: 1rem;
            border: 2px solid var(--home-purple-line);
            border-radius: 22px;
            background: var(--home-purple-soft);
        }

        .home-mascot {
            width: 4.8rem;
            flex: none;
            animation: home-bob 3.2s ease-in-out infinite;
        }

        .home-mascot svg,
        .home-mascot img {
            display: block;
            width: 100%;
            height: auto;
        }

        .home-mascot img {
            user-select: none;
        }

        .home-hero-text {
            min-width: 0;
            color: var(--home-ink);
            font-size: .95rem;
            font-weight: 900;
            line-height: 1.4;
        }

        .home-form {
            display: grid;
            gap: 1rem;
            width: 100%;
            margin: 0;
        }

        .home-field {
            display: grid;
            gap: .45rem;
            text-align: left;
        }

        .home-field label {
            color: var(--home-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }

        .home-field input {
            width: 100%;
            min-height: 3.35rem;
            border: 2px solid var(--home-purple-line);
            border-bottom-width: 4px;
            border-radius: 16px;
            padding: .8rem 1rem;
            background: #fff;
            color: var(--home-ink);
            font: inherit;
            font-weight: 800;
            outline: none;
        }

        .home-field input:focus {
            border-color: var(--home-purple);
        }

        .home-error {
            padding: .7rem .85rem;
            border: 2px solid #f3b6c2;
            border-radius: 14px;
            background: var(--home-error-soft);
            color: var(--home-error);
            font-size: .85rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .home-action {
            width: 100%;
            min-height: 3.55rem;
            border: 0;
            border-radius: 16px;
            background: var(--home-purple);
            box-shadow: 0 5px 0 var(--home-purple-dark);
            color: #fff;
            cursor: pointer;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: .06em;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .home-action:active {
            transform: translateY(4px);
            box-shadow: 0 1px 0 var(--home-purple-dark);
        }

        .home-note {
            margin: 0;
            color: var(--home-muted);
            font-size: .82rem;
            font-weight: 800;
            line-height: 1.4;
        }

        @keyframes home-bob {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-7px);
            }
        }

        @media (min-width: 760px) {
            body {
                padding: 2rem;
                justify-content: center;
            }

            .home-scope {
                min-height: calc(100dvh - 4rem);
            }

            .home-phone {
                width: min(100%, 392px);
                height: min(812px, calc(100dvh - 4rem));
                min-height: 700px;
                border-radius: 44px;
                box-shadow:
                    0 34px 70px -24px rgba(76, 29, 149, .5),
                    0 0 0 11px #fff,
                    0 0 0 13px #ded6f2;
            }

            main.home-phone {
                width: min(100%, 392px);
            }

            .home-content {
                padding: 1.75rem;
            }
        }

/* quiz/show */
:root {
            --lg-purple: #7c3aed;
            --lg-purple-dark: #5b21b6;
            --lg-purple-soft: #f4f1fb;
            --lg-purple-line: #e6e0f5;
            --lg-ink: #2a2540;
            --lg-muted: #756f8f;
            --lg-green: #16a34a;
            --lg-green-dark: #0f7a37;
            --lg-green-soft: #d8f5e3;
            --lg-red: #d43f5f;
            --lg-red-dark: #a72b45;
            --lg-red-soft: #ffe4ea;
            --lg-gold: #f59e0b;
            --lg-gold-dark: #c77c06;
        }

        body {
            min-height: 100dvh;
            height: auto;
            padding: 0;
            justify-content: flex-start;
            background: #ece9f3;
            background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, .10) 1px, transparent 0);
            background-size: 26px 26px;
            color: var(--lg-ink);
            font-family: "Nunito", system-ui, sans-serif;
        }

        .quiz-public-scope {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .quiz-public-scope [hidden] {
            display: none !important;
        }

        .quiz-stage {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .quiz-phone {
            width: 100%;
            min-height: 100dvh;
            position: relative;
            background: #fff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            color: var(--lg-ink);
            animation: lg-fade-in .25s ease-out both;
        }

        #quiz-container.quiz-phone,
        #conclusion.quiz-phone {
            width: 100%;
            max-width: none;
            display: flex;
            grid-template-columns: none;
            gap: 0;
            place-items: stretch;
            justify-items: stretch;
        }

        .quiz-phone.off {
            animation: lg-fade-out .25s ease-in both;
        }

        .quiz-intro {
            padding: 1.25rem;
            justify-content: center;
            gap: 1.5rem;
        }

        .quiz-intro-badge,
        .lg-level {
            width: fit-content;
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
        }

        .quiz-intro-badge {
            gap: .5rem;
            background: var(--lg-purple);
            color: #fff;
            padding: .45rem .95rem;
            font-size: .85rem;
            box-shadow: 0 5px 0 var(--lg-purple-dark);
            letter-spacing: .04em;
        }

        .quiz-intro h1,
        .lg-prompt-title,
        .quiz-summary h1 {
            margin: 0;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
            line-height: 1.05;
            color: var(--lg-ink);
        }

        .quiz-intro h1 {
            font-size: 2.3rem;
        }

        .quiz-intro p {
            margin: 0;
            max-width: 32rem;
            color: var(--lg-muted);
            font-size: 1rem;
            line-height: 1.55;
            text-align: left;
        }

        .quiz-intro-meta {
            display: grid;
            gap: .45rem;
            padding: 1rem;
            border: 2px solid var(--lg-purple-line);
            border-radius: 18px;
            background: var(--lg-purple-soft);
            color: var(--lg-muted);
            font-size: .9rem;
            font-weight: 800;
            word-break: break-word;
        }

        .quiz-intro-meta strong {
            color: var(--lg-ink);
        }

        .quiz-empty-message {
            margin: 0;
            padding: .75rem .9rem;
            border: 2px solid var(--lg-red-soft);
            border-radius: 14px;
            background: #fff6f8;
            color: var(--lg-red-dark);
            font-size: .9rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .lg-primary-action,
        .lg-sound-button,
        .lg-icon-button,
        .lg-word-chip,
        .lg-answer-chip {
            font: inherit;
            border: 0;
            cursor: pointer;
        }

        .lg-primary-action {
            width: 100%;
            min-height: 3.55rem;
            border-radius: 16px;
            background: var(--lg-purple);
            box-shadow: 0 5px 0 var(--lg-purple-dark);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
            font-size: 1rem;
            letter-spacing: .06em;
            transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
        }

        .lg-primary-action:active {
            transform: translateY(4px);
            box-shadow: 0 1px 0 var(--lg-purple-dark);
        }

        .lg-app-bar {
            display: flex;
            align-items: center;
            gap: .85rem;
            padding: 1rem 1.25rem .55rem;
            flex: none;
        }

        .lg-icon-button {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 14px;
            background: #f8f6fc;
            color: #b4adc9;
        }

        .lg-icon-button:hover {
            color: var(--lg-purple);
        }

        .lg-progress {
            flex: 1;
            height: 1rem;
            overflow: hidden;
            position: relative;
            border-radius: 999px;
            background: #ece8f4;
        }

        .lg-progress-bar {
            display: block;
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(180deg, #9b6cf0, var(--lg-purple));
            transition: width .25s ease;
        }

        .lg-progress::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 8px;
            width: 35%;
            height: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .45);
        }

        .lg-streak {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            flex: none;
            color: #ff8a3d;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
            font-size: 1rem;
        }

        .lg-timer {
            min-width: 4.15rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .25rem;
            flex: none;
            padding: .35rem .5rem;
            border-radius: 999px;
            background: var(--lg-purple-soft);
            color: var(--lg-purple);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .95rem;
            font-weight: 800;
            line-height: 1;
            transition: background .2s ease, color .2s ease;
        }

        .lg-timer svg {
            width: 1rem;
            height: 1rem;
        }

        .lg-timer.is-warning {
            background: #fff4d5;
            color: var(--lg-gold-dark);
        }

        .lg-timer.is-expired {
            background: var(--lg-red-soft);
            color: var(--lg-red-dark);
        }

        .lg-timer.is-unlimited {
            color: var(--lg-muted);
        }

        .quiz-activity-body {
            flex: 1;
            min-height: 0;
            position: relative;
            overflow-y: auto;
            padding: .9rem 1.35rem 1rem;
        }

        .lg-prompt-head {
            display: grid;
            gap: .45rem;
            margin-bottom: 1.1rem;
        }

        .lg-level {
            padding: .25rem .7rem;
            background: #fff7df;
            color: var(--lg-gold-dark);
            border: 2px solid #f6dfab;
            font-size: .8rem;
        }

        .lg-prompt-title {
            font-size: 1.45rem;
        }

        .lg-dialogue {
            display: flex;
            align-items: flex-end;
            gap: .75rem;
        }

        .lg-mascot {
            flex: none;
            width: 4.7rem;
            animation: lg-bob 3.2s ease-in-out infinite;
        }

        .lg-mascot svg,
        .lg-mascot-img {
            display: block;
            width: 100%;
            height: auto;
        }

        .lg-mascot-img {
            filter: drop-shadow(0 .45rem .45rem rgba(42, 37, 64, .12));
            user-select: none;
        }

        .lg-abduction-scene {
            display: none;
            position: relative;
            width: min(100%, 18rem);
            height: 9.5rem;
            margin: .85rem auto 0;
            pointer-events: none;
            overflow: visible;
        }

        .quiz-activity.is-wrong .lg-abduction-scene {
            display: block;
        }

        .lg-abduction-ufo {
            position: absolute;
            z-index: 3;
            top: -.35rem;
            left: 50%;
            width: 7.6rem;
            height: auto;
            transform: translateX(-50%);
            filter: drop-shadow(0 .45rem .4rem rgba(42, 37, 64, .18));
            user-select: none;
        }

        .lg-abduction-beam {
            position: absolute;
            z-index: 1;
            top: 3.45rem;
            left: 50%;
            width: 6.8rem;
            height: 5.8rem;
            transform: translateX(-50%);
            clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
            background: linear-gradient(180deg, rgba(139, 92, 246, .34), rgba(216, 245, 227, .2) 58%, rgba(255, 255, 255, 0));
            opacity: 0;
        }

        .lg-abduction-human {
            position: absolute;
            z-index: 2;
            bottom: .25rem;
            left: 50%;
            width: 3.8rem;
            height: auto;
            transform: translateX(-50%);
            filter: drop-shadow(0 .35rem .28rem rgba(42, 37, 64, .18));
            user-select: none;
        }

        .lg-abduction-scene.is-running .lg-abduction-ufo {
            animation: lg-ufo-arrive 1.1s ease-out both, lg-ufo-hover 1.9s ease-in-out 1.1s infinite;
        }

        .lg-abduction-scene.is-running .lg-abduction-beam {
            animation: lg-beam-pulse 1.45s ease-in-out .28s both;
        }

        .lg-abduction-scene.is-running .lg-abduction-human {
            animation: lg-human-abduct 1.45s ease-in-out .22s both;
        }

        .lg-speech {
            position: relative;
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .85rem .9rem;
            border: 2px solid var(--lg-purple-line);
            border-radius: 18px;
            background: var(--lg-purple-soft);
        }

        .lg-speech::before {
            content: "";
            position: absolute;
            left: -9px;
            bottom: 1rem;
            width: 16px;
            height: 16px;
            border-left: 2px solid var(--lg-purple-line);
            border-bottom: 2px solid var(--lg-purple-line);
            background: var(--lg-purple-soft);
            transform: rotate(45deg);
        }

        .lg-sound-button {
            width: 2.85rem;
            height: 2.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 14px;
            background: var(--lg-purple);
            box-shadow: 0 4px 0 var(--lg-purple-dark);
            color: #fff;
        }

        #atividade,
        #pergunta {
            grid-column: auto;
            margin: 0;
            padding: 0;
            min-width: 0;
            position: static;
            border-radius: 0;
            background: transparent;
            color: var(--lg-ink);
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.35;
            text-align: left;
            overflow-wrap: anywhere;
        }

        #atividade::before,
        #pergunta::before {
            content: none;
        }

        .lg-media {
            margin-top: 1rem;
            overflow: hidden;
            border: 2px solid var(--lg-purple-line);
            border-radius: 18px;
            background: #fff;
        }

        .lg-media audio {
            display: block;
            width: 100%;
            padding: .75rem;
        }

        .lg-media img {
            display: block;
            width: 100%;
            max-height: 15rem;
            object-fit: contain;
            background: #faf8ff;
        }

        .lg-answer-area {
            padding-top: 1.65rem;
        }

        .lg-text-answer {
            width: 100%;
            min-height: 8rem;
            resize: vertical;
            border: 2px solid var(--lg-purple-line);
            border-bottom-width: 4px;
            border-radius: 16px;
            padding: .85rem 1rem;
            background: #fff;
            color: var(--lg-ink);
            font: inherit;
            font-weight: 800;
            line-height: 1.4;
            outline: none;
        }

        .lg-text-answer:focus {
            border-color: var(--lg-purple);
        }

        .lg-recording-area {
            display: grid;
            gap: .85rem;
            padding: 1rem;
            border: 2px solid var(--lg-purple-line);
            border-radius: 18px;
            background: var(--lg-purple-soft);
        }

        .lg-recording-status {
            margin: 0;
            color: var(--lg-muted);
            font-size: .92rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .lg-record-preview {
            width: 100%;
            min-height: 2.7rem;
            border: 2px solid var(--lg-purple-line);
            border-radius: 14px;
            background: #fff;
        }

        .lg-record-button {
            width: 100%;
            min-height: 3.1rem;
            border: 0;
            border-radius: 14px;
            background: var(--lg-purple);
            box-shadow: 0 4px 0 var(--lg-purple-dark);
            color: #fff;
            cursor: pointer;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
            letter-spacing: .05em;
        }

        .lg-record-button:disabled {
            cursor: wait;
            opacity: .72;
        }

        .lg-record-file {
            width: 100%;
            border: 2px solid var(--lg-purple-line);
            border-radius: 12px;
            padding: .7rem;
            background: #fff;
            color: var(--lg-ink);
            font-weight: 800;
        }

        .lg-answer-list,
        .lg-word-bank,
        .quiz-summary-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .lg-answer-list {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: .55rem;
            min-height: 3.1rem;
            padding-bottom: .8rem;
            border-bottom: 2px solid #ece8f4;
        }

        .lg-answer-line {
            height: 3.1rem;
            border-bottom: 2px solid #ece8f4;
        }

        .lg-word-bank {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .65rem;
            padding-top: 1.55rem;
        }

        .lg-word-chip,
        .lg-answer-chip {
            display: inline-flex;
            align-items: center;
            min-height: 2.75rem;
            padding: .55rem .95rem;
            border: 2px solid #e3def0;
            border-bottom-width: 4px;
            border-radius: 13px;
            background: #fff;
            color: #3f3a57;
            font-weight: 900;
            font-size: 1rem;
            line-height: 1;
            transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
        }

        #alternatives.lg-word-bank .lg-word-chip {
            margin-bottom: 0;
            padding: .55rem .95rem;
            border-radius: 13px;
            background: #fff;
            box-shadow: none;
            font-size: 1rem;
        }

        .lg-word-chip:hover,
        .lg-answer-chip:hover {
            transform: translateY(-2px);
            border-color: #c9bff0;
        }

        .lg-word-chip.choice,
        .lg-word-chip:disabled {
            color: #aaa3bb;
            background: #f1eef7;
            opacity: .65;
            cursor: default;
            transform: none;
        }

        #alternatives.lg-word-bank .lg-word-chip.choice,
        #alternatives.lg-word-bank .lg-word-chip:disabled {
            color: #aaa3bb;
            background: #f1eef7;
        }

        .quiz-activity.is-correct .lg-answer-chip {
            color: #15803d;
            border-color: #34d36b;
            background: #eafaf0;
        }

        .quiz-activity.is-wrong .lg-answer-chip {
            color: var(--lg-red-dark);
            border-color: #f1a8b8;
            background: #fff1f4;
        }

        .lg-footer {
            flex: none;
            margin-top: auto;
            padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
            background: #fff;
            transition: background .2s ease;
        }

        .lg-feedback {
            display: none;
            align-items: center;
            gap: .75rem;
            margin-bottom: 1rem;
            color: var(--lg-muted);
            font-size: .9rem;
            font-weight: 800;
            line-height: 1.3;
        }

        .lg-feedback-icon {
            width: 2.75rem;
            height: 2.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 999px;
            background: var(--lg-purple);
            color: #fff;
        }

        .lg-feedback-title {
            display: block;
            margin-bottom: .1rem;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.3rem;
            font-weight: 800;
            line-height: 1;
            color: var(--lg-purple);
        }

        .lg-footer.is-success {
            background: var(--lg-green-soft);
        }

        .lg-footer.is-success .lg-feedback {
            display: flex;
            color: #1c8a47;
        }

        .lg-footer.is-success .lg-feedback-icon,
        .lg-footer.is-success .lg-primary-action {
            background: var(--lg-green);
        }

        .lg-footer.is-success .lg-feedback-title {
            color: #15803d;
        }

        .lg-footer.is-success .lg-primary-action {
            box-shadow: 0 5px 0 var(--lg-green-dark);
        }

        .lg-footer.is-error {
            background: var(--lg-red-soft);
        }

        .lg-footer.is-error .lg-feedback {
            display: flex;
            color: var(--lg-red-dark);
        }

        .lg-footer.is-error .lg-feedback-icon,
        .lg-footer.is-error .lg-primary-action {
            background: var(--lg-red);
        }

        .lg-footer.is-error .lg-feedback-title {
            color: var(--lg-red-dark);
        }

        .lg-footer.is-error .lg-primary-action {
            box-shadow: 0 5px 0 var(--lg-red-dark);
        }

        .quiz-summary {
            padding: 1.25rem;
            justify-content: center;
            gap: 1.25rem;
        }

        .quiz-summary h1 {
            font-size: 2.25rem;
        }

        .quiz-summary-list {
            display: grid;
            gap: .75rem;
        }

        .quiz-summary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: .85rem 1rem;
            border-radius: 18px;
            background: var(--lg-purple-soft);
            color: var(--lg-muted);
            font-weight: 900;
        }

        .quiz-summary-item span {
            color: var(--lg-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.35rem;
            font-weight: 800;
        }

        .save-status {
            margin: 0;
            color: var(--lg-muted);
            font-weight: 800;
        }

        @keyframes lg-bob {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-7px);
            }
        }

        @keyframes lg-ufo-arrive {
            0% {
                opacity: 0;
                transform: translateX(38%) translateY(.45rem) rotate(-8deg) scale(.82);
            }

            62% {
                opacity: 1;
                transform: translateX(-56%) translateY(-.2rem) rotate(3deg) scale(1.04);
            }

            100% {
                opacity: 1;
                transform: translateX(-50%) translateY(0) rotate(0) scale(1);
            }
        }

        @keyframes lg-ufo-hover {
            0%, 100% {
                transform: translateX(-50%) translateY(0) rotate(0);
            }

            50% {
                transform: translateX(-50%) translateY(-.35rem) rotate(2deg);
            }
        }

        @keyframes lg-beam-pulse {
            0% {
                opacity: 0;
                transform: translateX(-50%) scaleY(.35);
            }

            28% {
                opacity: .95;
                transform: translateX(-50%) scaleY(1);
            }

            100% {
                opacity: .25;
                transform: translateX(-50%) scaleY(.94);
            }
        }

        @keyframes lg-human-abduct {
            0% {
                opacity: 1;
                transform: translateX(-50%) translateY(0) scale(1) rotate(-4deg);
            }

            58% {
                opacity: .95;
                transform: translateX(-50%) translateY(-3.25rem) scale(.68) rotate(8deg);
            }

            100% {
                opacity: .18;
                transform: translateX(-50%) translateY(-5.15rem) scale(.42) rotate(0);
            }
        }

        @keyframes lg-fade-in {
            from {
                opacity: 0;
                transform: translateY(.75rem);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes lg-fade-out {
            to {
                opacity: 0;
                transform: translateX(-1rem);
                visibility: hidden;
            }
        }

        @media (min-width: 760px) {
            body {
                padding: 2rem;
                justify-content: center;
            }

            .quiz-public-scope {
                align-items: flex-start;
                min-height: calc(100dvh - 4rem);
            }

            .quiz-stage {
                min-height: calc(100dvh - 4rem);
            }

            .quiz-phone {
                width: min(100%, 392px);
                min-height: 0;
                height: min(812px, calc(100dvh - 4rem));
                min-height: 700px;
                border-radius: 44px;
                box-shadow:
                    0 34px 70px -24px rgba(76, 29, 149, .5),
                    0 0 0 11px #fff,
                    0 0 0 13px #ded6f2;
            }

            #quiz-container.quiz-phone,
            #conclusion.quiz-phone {
                width: min(100%, 392px);
                max-width: 392px;
            }

            .quiz-intro,
            .quiz-summary {
                padding: 1.75rem;
            }

            .quiz-intro h1,
            .quiz-summary h1 {
                font-size: 2.6rem;
            }

            .lg-mascot {
                width: 5.25rem;
            }

            .lg-abduction-scene {
                height: 10.5rem;
                width: min(100%, 20rem);
            }

            .lg-abduction-ufo {
                width: 8.4rem;
            }

            .lg-abduction-human {
                width: 4.2rem;
            }
        }

/* quiz/estagios */
:root {
            --stage-purple: #7c3aed;
            --stage-purple-dark: #5b21b6;
            --stage-purple-soft: #f3f0fb;
            --stage-ink: #2a2540;
            --stage-muted: #8b82a8;
            --stage-line: #e3ddf1;
            --stage-gold: #f59e0b;
            --stage-gold-dark: #c77c06;
            --stage-green: #16a34a;
            --stage-green-soft: #e7f8ee;
            --stage-locked: #e4e0ee;
            --stage-locked-dark: #cdc7dd;
        }

        body {
            min-height: 100dvh;
            height: auto;
            padding: 0;
            justify-content: flex-start;
            background: #ece9f3;
            background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, .10) 1px, transparent 0);
            background-size: 26px 26px;
            color: var(--stage-ink);
            font-family: "Nunito", system-ui, sans-serif;
        }

        .stage-scope {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .stage-phone {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--stage-purple-soft);
            color: var(--stage-ink);
        }

        .stage-status {
            flex: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .85rem 1.55rem .25rem;
            color: var(--stage-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .9rem;
            font-weight: 800;
        }

        .stage-top {
            flex: none;
            padding: .85rem 1.35rem 1rem;
        }

        .stage-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .stage-kicker,
        .stage-progress-label,
        .unit-subtitle {
            color: var(--stage-muted);
            font-size: .8rem;
            font-weight: 900;
        }

        .stage-title,
        .unit-title {
            margin: 0;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
            line-height: 1.05;
        }

        .stage-title {
            margin-top: .15rem;
            font-size: 1.9rem;
            color: var(--stage-ink);
        }

        .stage-email {
            margin: .2rem 0 0;
            max-width: 15rem;
            color: var(--stage-muted);
            font-size: .8rem;
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stage-avatar {
            width: 3.4rem;
            height: 3.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 50%;
            background: var(--stage-purple);
            box-shadow: 0 4px 0 var(--stage-purple-dark);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.45rem;
            font-weight: 800;
        }

        .stage-progress {
            margin-top: 1rem;
        }

        .stage-progress-label {
            display: flex;
            justify-content: space-between;
            gap: .75rem;
            margin-bottom: .4rem;
        }

        .stage-progress-track {
            height: .9rem;
            overflow: hidden;
            border-radius: 999px;
            background: var(--stage-line);
        }

        .stage-progress-bar {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: 0;
            border-radius: inherit;
            appearance: none;
            background: transparent;
        }

        .stage-progress-bar::-webkit-progress-bar {
            border-radius: inherit;
            background: transparent;
        }

        .stage-progress-bar::-webkit-progress-value {
            border-radius: inherit;
            background: linear-gradient(180deg, #9b6cf0, var(--stage-purple));
        }

        .stage-progress-bar::-moz-progress-bar {
            border-radius: inherit;
            background: linear-gradient(180deg, #9b6cf0, var(--stage-purple));
        }

        .stage-alert {
            margin: 0 1.35rem 1rem;
            padding: .85rem 1rem;
            border: 2px solid #f3b6c2;
            border-radius: 16px;
            background: #fff1f4;
            color: #a72b45;
            font-weight: 900;
            line-height: 1.35;
        }

        .stage-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 0 1.35rem 1.25rem;
        }

        .stage-rule {
            margin: 0 0 1rem;
            padding: .85rem 1rem;
            border-radius: 18px;
            background: #fff;
            color: var(--stage-muted);
            box-shadow: 0 8px 22px -16px rgba(76, 29, 149, .35);
            font-size: .86rem;
            font-weight: 800;
            line-height: 1.4;
        }

        .unit-card {
            margin-bottom: 1rem;
            padding: 1rem 1.1rem 1.1rem;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 8px 22px -12px rgba(76, 29, 149, .35);
        }

        .unit-card.is-current {
            border: 2px solid var(--stage-gold);
            box-shadow: 0 10px 26px -10px rgba(245, 158, 11, .5);
        }

        .unit-card.is-locked {
            background: #fbfaff;
            opacity: .72;
        }

        .unit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .85rem;
            margin-bottom: .9rem;
        }

        .unit-info {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: .65rem;
        }

        .unit-icon {
            width: 2.15rem;
            height: 2.15rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 10px;
            background: var(--stage-purple);
            color: #fff;
        }

        .unit-card.is-current .unit-icon {
            background: var(--stage-gold);
        }

        .unit-card.is-locked .unit-icon {
            background: #d7d1e6;
        }

        .unit-title {
            color: var(--stage-ink);
            font-size: 1.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .unit-subtitle {
            margin-top: .1rem;
        }

        .unit-percent {
            flex: none;
            padding: .35rem .7rem;
            border-radius: 999px;
            background: var(--stage-green-soft);
            color: var(--stage-green);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .85rem;
            font-weight: 800;
        }

        .unit-card.is-current .unit-percent {
            background: #fdf0d9;
            color: var(--stage-gold-dark);
        }

        .unit-card.is-locked .unit-percent {
            background: #f1eef7;
            color: var(--stage-muted);
        }

        .quiz-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .65rem;
        }

        .quiz-node-form {
            display: flex;
            justify-content: center;
        }

        .quiz-node {
            position: relative;
            width: 100%;
            max-width: 3.45rem;
            aspect-ratio: 1;
            border: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            background: var(--stage-locked);
            box-shadow: 0 4px 0 var(--stage-locked-dark);
            color: #a9a2c0;
            cursor: default;
        }

        button.quiz-node {
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        button.quiz-node:hover {
            transform: translateY(-2px);
        }

        button.quiz-node:active {
            transform: translateY(3px);
            box-shadow: 0 1px 0 currentColor;
        }

        .quiz-node.is-completed {
            background: var(--stage-purple);
            box-shadow: 0 4px 0 var(--stage-purple-dark);
            color: #fff;
        }

        .quiz-node.is-current {
            background: var(--stage-gold);
            box-shadow: 0 4px 0 var(--stage-gold-dark);
            color: #fff;
        }

        .quiz-node.is-current::before {
            content: "";
            position: absolute;
            inset: -5px;
            border: 3px solid var(--stage-gold);
            border-radius: inherit;
            animation: stage-pulse 1.6s ease-out infinite;
        }

        .quiz-node.is-empty {
            background: #ffe9b8;
            box-shadow: 0 4px 0 #e9cf86;
            color: #cbb277;
        }

        .quiz-node svg {
            position: relative;
            z-index: 1;
            width: 1.25rem;
            height: 1.25rem;
        }

        .stage-empty {
            padding: 1.25rem;
            border-radius: 22px;
            background: #fff;
            color: var(--stage-muted);
            font-weight: 900;
            line-height: 1.4;
            box-shadow: 0 8px 22px -12px rgba(76, 29, 149, .35);
        }

        .stage-bottom-nav {
            flex: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: .85rem 0 calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid #efeaf8;
            background: #fff;
        }

        .stage-nav-item {
            width: 3rem;
            height: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            color: #c2bcd4;
            text-decoration: none;
        }

        .stage-nav-item.is-active {
            color: var(--stage-purple);
            background: #f1ecfc;
        }

        .stage-nav-item svg {
            width: 1.75rem;
            height: 1.75rem;
        }

        @keyframes stage-pulse {
            0% {
                transform: scale(.88);
                opacity: .7;
            }

            100% {
                transform: scale(1.35);
                opacity: 0;
            }
        }

        @media (min-width: 760px) {
            body {
                padding: 2rem;
                justify-content: center;
            }

            .stage-scope {
                min-height: calc(100dvh - 4rem);
            }

            .stage-phone {
                width: min(100%, 392px);
                height: min(812px, calc(100dvh - 4rem));
                min-height: 700px;
                border-radius: 44px;
                box-shadow:
                    0 34px 70px -24px rgba(76, 29, 149, .5),
                    0 0 0 11px #fff,
                    0 0 0 13px #ded6f2;
            }
        }

/* quiz/perfil */
:root {
            --profile-purple: #7c3aed;
            --profile-purple-dark: #5b21b6;
            --profile-purple-soft: #f4f1fb;
            --profile-line: #e6e0f5;
            --profile-ink: #2a2540;
            --profile-muted: #756f8f;
            --profile-green: #16a34a;
            --profile-green-soft: #d8f5e3;
            --profile-red: #a72b45;
            --profile-red-soft: #fff1f4;
        }

        .profile-scope {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .profile-phone {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #faf8ff;
            color: var(--profile-ink);
        }

        .profile-status {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .85rem 1.35rem .25rem;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .9rem;
            font-weight: 800;
        }

        .profile-top {
            flex: none;
            padding: 1rem 1.25rem 1.1rem;
        }

        .profile-hero {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border: 2px solid var(--profile-line);
            border-radius: 22px;
            background: #fff;
        }

        .profile-avatar {
            width: 4rem;
            height: 4rem;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--profile-purple);
            box-shadow: 0 5px 0 var(--profile-purple-dark);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.55rem;
            font-weight: 800;
        }

        .profile-kicker {
            color: var(--profile-muted);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .82rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .profile-title {
            margin: 0;
            color: var(--profile-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.55rem;
            font-weight: 800;
            line-height: 1.05;
            overflow-wrap: anywhere;
        }

        .profile-email {
            margin: .15rem 0 0;
            color: var(--profile-muted);
            font-size: .92rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .profile-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: grid;
            align-content: start;
            gap: 1rem;
            padding: 0 1.25rem 1.25rem;
        }

        .profile-success,
        .profile-error {
            border-radius: 14px;
            font-size: .86rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .profile-success {
            padding: .75rem .9rem;
            border: 2px solid #a9e6bd;
            background: var(--profile-green-soft);
            color: #0f7a37;
        }

        .profile-error {
            padding: .65rem .8rem;
            border: 2px solid #f3b6c2;
            background: var(--profile-red-soft);
            color: var(--profile-red);
        }

        .profile-form {
            display: grid;
            gap: 1rem;
            margin: 0;
        }

        .profile-field {
            display: grid;
            gap: .45rem;
        }

        .profile-field label {
            color: var(--profile-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }

        .profile-field input {
            width: 100%;
            min-height: 3.35rem;
            border: 2px solid var(--profile-line);
            border-bottom-width: 4px;
            border-radius: 16px;
            padding: .8rem 1rem;
            background: #fff;
            color: var(--profile-ink);
            font: inherit;
            font-weight: 800;
            outline: none;
        }

        .profile-field input:focus {
            border-color: var(--profile-purple);
        }

        .profile-field input:disabled {
            background: var(--profile-purple-soft);
            color: var(--profile-muted);
            opacity: 1;
        }

        .profile-action {
            width: 100%;
            min-height: 3.55rem;
            border: 0;
            border-radius: 16px;
            background: var(--profile-purple);
            box-shadow: 0 5px 0 var(--profile-purple-dark);
            color: #fff;
            cursor: pointer;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: .06em;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .profile-action:active {
            transform: translateY(4px);
            box-shadow: 0 1px 0 var(--profile-purple-dark);
        }

        .profile-bottom-nav {
            flex: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: .85rem 0 calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--profile-line);
            background: #fff;
        }

        .profile-nav-item {
            width: 3rem;
            height: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            color: #c2bcd4;
            text-decoration: none;
        }

        .profile-nav-item.is-active {
            color: var(--profile-purple);
            background: var(--profile-purple-soft);
        }

        .profile-nav-item svg {
            width: 1.75rem;
            height: 1.75rem;
        }

        @media (min-width: 760px) {
            .profile-scope {
                min-height: calc(100dvh - 4rem);
            }

            .profile-phone {
                width: min(100%, 392px);
                height: min(812px, calc(100dvh - 4rem));
                min-height: 700px;
                border-radius: 44px;
                box-shadow:
                    0 34px 70px -24px rgba(76, 29, 149, .5),
                    0 0 0 11px #fff,
                    0 0 0 13px #ded6f2;
            }

            .profile-top,
            .profile-body {
                padding-inline: 1.75rem;
            }
        }

/* quiz/ranking */
:root {
            --rank-purple: #7c3aed;
            --rank-purple-dark: #5b21b6;
            --rank-purple-soft: #f1ecfc;
            --rank-ink: #2a2540;
            --rank-muted: #8b82a8;
            --rank-line: #efeaf8;
            --rank-gold: #ffd24d;
            --rank-gold-dark: #e0a800;
            --rank-silver: #cdd3dd;
            --rank-bronze: #e8a973;
        }

        body {
            min-height: 100dvh;
            height: auto;
            padding: 0;
            justify-content: flex-start;
            background: #ece9f3;
            background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, .10) 1px, transparent 0);
            background-size: 26px 26px;
            color: var(--rank-ink);
            font-family: "Nunito", system-ui, sans-serif;
        }

        .rank-scope {
            width: 100%;
            min-height: 100dvh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .rank-phone {
            width: 100%;
            min-height: 100dvh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #faf8ff;
            color: var(--rank-ink);
        }

        .rank-status {
            flex: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .85rem 1.55rem .25rem;
            background: #fff;
            color: var(--rank-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .9rem;
            font-weight: 800;
        }

        .rank-header {
            flex: none;
            padding: .6rem 1.45rem 1rem;
            border-bottom: 1px solid var(--rank-line);
            background: #fff;
        }

        .rank-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .rank-title {
            margin: 0;
            color: var(--rank-ink);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.55rem;
            font-weight: 800;
            line-height: 1.05;
        }

        .rank-subtitle {
            margin-top: .2rem;
            color: var(--rank-muted);
            font-size: .82rem;
            font-weight: 900;
        }

        .rank-pill {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            flex: none;
            padding: .45rem .75rem;
            border-radius: 999px;
            background: #fdf0d9;
            color: #c77c06;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .8rem;
            font-weight: 800;
        }

        .rank-podium {
            flex: none;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: .65rem;
            padding: 1.55rem 1.35rem 1.3rem;
        }

        .podium-card {
            width: 31%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .podium-crown {
            height: 1.45rem;
            margin-bottom: .15rem;
            color: var(--rank-gold);
        }

        .podium-avatar-wrap {
            position: relative;
            margin-bottom: .6rem;
        }

        .podium-avatar {
            width: 3.45rem;
            height: 3.45rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--rank-purple);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1.2rem;
            font-weight: 800;
            box-shadow: 0 0 0 3px var(--rank-silver);
        }

        .podium-card.is-first .podium-avatar {
            width: 4.25rem;
            height: 4.25rem;
            font-size: 1.55rem;
            box-shadow: 0 0 0 4px var(--rank-gold);
        }

        .podium-card.is-third .podium-avatar {
            width: 3.25rem;
            height: 3.25rem;
            box-shadow: 0 0 0 3px var(--rank-bronze);
        }

        .podium-position {
            position: absolute;
            left: 50%;
            bottom: -.45rem;
            width: 1.55rem;
            height: 1.55rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translateX(-50%);
            background: var(--rank-silver);
            color: #5b6472;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .78rem;
            font-weight: 800;
        }

        .podium-card.is-first .podium-position {
            background: var(--rank-gold);
            color: #9a6b00;
        }

        .podium-card.is-third .podium-position {
            background: var(--rank-bronze);
            color: #8a4f25;
        }

        .podium-name {
            max-width: 100%;
            margin-top: .2rem;
            overflow: hidden;
            color: var(--rank-ink);
            font-size: .85rem;
            font-weight: 900;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .podium-score {
            color: var(--rank-purple);
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: .95rem;
            font-weight: 800;
        }

        .podium-step {
            width: 100%;
            margin-top: .45rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            border-radius: 14px 14px 0 0;
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-weight: 800;
        }

        .podium-card.is-second .podium-step {
            height: 4.6rem;
            padding-top: .45rem;
            background: linear-gradient(180deg, var(--rank-silver), #aeb6c4);
            font-size: 1.55rem;
        }

        .podium-card.is-first .podium-step {
            height: 6.5rem;
            padding-top: .55rem;
            background: linear-gradient(180deg, #ffd860, #f0a800);
            font-size: 1.9rem;
        }

        .podium-card.is-third .podium-step {
            height: 3.65rem;
            padding-top: .4rem;
            background: linear-gradient(180deg, var(--rank-bronze), #c0794a);
            font-size: 1.4rem;
        }

        .rank-list {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: .35rem 1.1rem 0;
            border-top: 1px solid var(--rank-line);
            background: #fff;
        }

        .rank-row {
            display: flex;
            align-items: center;
            gap: .8rem;
            padding: .75rem .35rem;
            border-bottom: 1px solid #f4f0fa;
        }

        .rank-row.is-current {
            margin: .35rem 0;
            padding: .75rem .6rem;
            border: 2px solid #c9bcf0;
            border-radius: 16px;
            background: var(--rank-purple-soft);
        }

        .rank-pos {
            width: 1.4rem;
            flex: none;
            color: #9a92b4;
            text-align: center;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }

        .rank-row.is-current .rank-pos,
        .rank-row.is-current .rank-score,
        .rank-row.is-current .rank-name {
            color: var(--rank-purple);
        }

        .rank-avatar {
            width: 2.75rem;
            height: 2.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            border-radius: 50%;
            background: var(--rank-purple);
            color: #fff;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }

        .podium-avatar.avatar-color-1,
        .rank-avatar.avatar-color-1 {
            background: #ec4899;
        }

        .podium-avatar.avatar-color-2,
        .rank-avatar.avatar-color-2 {
            background: #0ea5e9;
        }

        .podium-avatar.avatar-color-3,
        .rank-avatar.avatar-color-3 {
            background: #22c55e;
        }

        .podium-avatar.avatar-color-4,
        .rank-avatar.avatar-color-4 {
            background: #f59e0b;
        }

        .podium-avatar.avatar-color-5,
        .rank-avatar.avatar-color-5 {
            background: #14b8a6;
        }

        .podium-avatar.avatar-color-6,
        .rank-avatar.avatar-color-6 {
            background: #8b5cf6;
        }

        .podium-avatar.avatar-color-7,
        .rank-avatar.avatar-color-7 {
            background: #64748b;
        }

        .podium-avatar.avatar-color-empty,
        .rank-avatar.avatar-color-empty {
            background: #d7d1e6;
        }

        .rank-row.is-current .rank-avatar {
            box-shadow: 0 0 0 3px #ddcffb;
        }

        .rank-person {
            min-width: 0;
            flex: 1;
        }

        .rank-name {
            overflow: hidden;
            color: var(--rank-ink);
            font-size: .95rem;
            font-weight: 900;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rank-meta {
            margin-top: .1rem;
            color: #9a92b4;
            font-size: .75rem;
            font-weight: 800;
        }

        .rank-score {
            color: var(--rank-purple);
            text-align: right;
            font-family: "Baloo 2", "Nunito", sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }

        .rank-empty {
            margin: 1rem 0;
            padding: 1rem;
            border-radius: 18px;
            background: #faf8ff;
            color: var(--rank-muted);
            font-weight: 900;
            line-height: 1.4;
        }

        .rank-bottom-nav {
            flex: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: .85rem 0 calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--rank-line);
            background: #fff;
        }

        .rank-nav-item {
            width: 3rem;
            height: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            color: #c2bcd4;
            text-decoration: none;
        }

        .rank-nav-item.is-active {
            color: var(--rank-purple);
            background: var(--rank-purple-soft);
        }

        .rank-nav-item svg {
            width: 1.75rem;
            height: 1.75rem;
        }

        @media (min-width: 760px) {
            body {
                padding: 2rem;
                justify-content: center;
            }

            .rank-scope {
                min-height: calc(100dvh - 4rem);
            }

            .rank-phone {
                width: min(100%, 392px);
                height: min(812px, calc(100dvh - 4rem));
                min-height: 700px;
                border-radius: 44px;
                box-shadow:
                    0 34px 70px -24px rgba(76, 29, 149, .5),
                    0 0 0 11px #fff,
                    0 0 0 13px #ded6f2;
            }
        }