* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #090d18;
    color: #f7f8ff;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

button,
input,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.hidden {
    display: none !important;
}

#app {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -20%,
            #27345c 0,
            #10172a 30%,
            #090d18 58%
        );
}

.topbar {
    height: 62px;

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

    padding:
        env(safe-area-inset-top)
        16px
        0;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(9,13,24,.78);

    backdrop-filter:
        blur(14px);

    position:
        sticky;

    top: 0;

    z-index: 40;
}

.brand-mini {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1.4px;
}

.brand-gs {
    display: inline-flex;

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

    width: 31px;
    height: 31px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #7487ff,
            #5368e8
        );

    color: white;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.connection {
    min-width: 66px;

    text-align: center;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.1px;

    padding:
        6px 8px;

    border-radius:
        999px;
}

.connection.online {
    background:
        rgba(50,220,143,.12);

    color:
        #65e0aa;
}

.connection.offline {
    background:
        rgba(255,87,99,.12);

    color:
        #ff8993;
}

.sound-button {
    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 10px;

    background:
        rgba(255,255,255,.07);

    color: white;
}

.view {
    width:
        min(
            100% - 24px,
            760px
        );

    margin:
        0 auto;

    padding:
        22px 0
        calc(
            32px +
            env(safe-area-inset-bottom)
        );
}

.home-view {
    width:
        min(
            100% - 28px,
            520px
        );
}

.hero {
    padding:
        28px 8px 22px;

    text-align: center;
}

.brand-caption,
.section-caption {
    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        3.5px;

    color:
        #91a1ff;
}

.hero h1 {
    margin:
        8px 0 11px;

    font-size:
        clamp(
            43px,
            13vw,
            65px
        );

    line-height:
        .92;

    letter-spacing:
        -3px;
}

.hero h1 span {
    display:
        block;

    color:
        #8192ff;
}

.hero p {
    max-width:
        320px;

    margin:
        0 auto;

    color:
        #9fa9bf;

    line-height:
        1.5;

    font-size:
        14px;
}

.home-card,
.lobby-card,
.final-card {
    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        26px;

    background:
        rgba(18,25,44,.92);

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.28);

    padding:
        22px;
}

.field {
    display:
        block;

    margin-bottom:
        16px;
}

.field > span {
    display:
        block;

    margin:
        0 0 7px 4px;

    color:
        #9ca7be;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}

.field input,
.field select {
    width:
        100%;

    min-height:
        53px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        15px;

    padding:
        0 15px;

    outline:
        none;

    background:
        #0d1425;

    color:
        white;

    font-size:
        16px;
}

.field input:focus,
.field select:focus {
    border-color:
        #7589ff;

    box-shadow:
        0 0 0 3px
        rgba(117,137,255,.12);
}

.room-code-input {
    text-align:
        center;

    font-size:
        25px !important;

    font-weight:
        900;

    letter-spacing:
        9px;
}

.main-button {
    width:
        100%;

    min-height:
        57px;

    border: 0;

    border-radius:
        16px;

    font-size:
        14px;

    font-weight:
        950;

    letter-spacing:
        .4px;

    color:
        white;

    transition:
        transform .08s ease,
        opacity .15s ease;
}

.main-button:active {
    transform:
        scale(.985);
}

.main-button:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}

.create-button {
    background:
        linear-gradient(
            135deg,
            #6379ff,
            #7e65ee
        );

    box-shadow:
        0 12px 30px
        rgba(91,111,255,.22);
}

.join-button {
    background:
        #28334f;
}

.button-icon {
    margin-right:
        5px;
}

.divider {
    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        12px;

    margin:
        20px 0;
}

.divider span {
    height:
        1px;

    background:
        rgba(255,255,255,.08);
}

.divider b {
    color:
        #66718b;

    font-size:
        10px;

    letter-spacing:
        1.5px;
}

.resume-button {
    width:
        100%;

    margin-top:
        12px;

    border:
        1px solid
        rgba(115,135,255,.32);

    border-radius:
        14px;

    min-height:
        45px;

    background:
        transparent;

    color:
        #9eacff;

    font-size:
        11px;

    font-weight:
        900;
}

.lobby-card {
    text-align:
        center;

    margin-top:
        18px;
}

.big-room-code {
    margin:
        6px 0 10px;

    font-size:
        clamp(
            42px,
            15vw,
            68px
        );

    font-weight:
        950;

    letter-spacing:
        8px;

    line-height:
        1;
}

.copy-button {
    border:
        0;

    border-radius:
        999px;

    min-height:
        35px;

    padding:
        0 15px;

    background:
        rgba(113,133,255,.13);

    color:
        #aebaff;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.category-chip {
    display:
        inline-flex;

    margin:
        18px auto 0;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.055);

    color:
        #bac4da;

    font-size:
        11px;

    font-weight:
        800;
}

.versus {
    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        13px;

    margin:
        30px 0 24px;
}

.player-side {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}

.avatar {
    width:
        67px;

    height:
        67px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        22px;

    margin-bottom:
        10px;

    background:
        linear-gradient(
            145deg,
            #2d3a60,
            #202a46
        );

    font-size:
        25px;

    font-weight:
        950;
}

.player-side strong {
    width:
        100%;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        13px;
}

.player-status {
    margin-top:
        5px;

    color:
        #758199;

    font-size:
        10px;
}

.player-status.online {
    color:
        #65dfa9;
}

.vs-circle {
    width:
        49px;

    height:
        49px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f4f6ff;

    color:
        #11172a;

    font-weight:
        950;

    font-size:
        13px;
}

.waiting-message {
    color:
        #a3aec4;

    font-size:
        13px;
}

.waiting-dots {
    display:
        flex;

    justify-content:
        center;

    gap:
        6px;

    margin:
        12px 0 19px;
}

.waiting-dots span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #8192ff;

    animation:
        waiting 1.1s infinite;
}

.waiting-dots span:nth-child(2) {
    animation-delay:
        .16s;
}

.waiting-dots span:nth-child(3) {
    animation-delay:
        .32s;
}

@keyframes waiting {

    0%,
    100% {
        opacity:
            .25;

        transform:
            translateY(0);
    }

    50% {
        opacity:
            1;

        transform:
            translateY(-4px);
    }

}

.text-button {
    border:
        0;

    background:
        transparent;

    color:
        #7f8aa2;

    padding:
        11px;

    font-size:
        11px;

    font-weight:
        900;
}

.game-view {
    padding-top:
        12px;
}

.scoreboard {
    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        15px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        19px;

    background:
        rgba(18,25,44,.87);
}

.score-player.right {
    text-align:
        right;
}

.score-name {
    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    color:
        #9ea9bf;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .4px;
}

.score-value {
    margin-top:
        1px;

    font-size:
        28px;

    font-weight:
        950;
}

.score-center {
    text-align:
        center;
}

.question-progress {
    min-width:
        52px;

    font-size:
        11px;

    font-weight:
        900;

    color:
        #a7b2ca;
}

.sudden-badge {
    margin-top:
        3px;

    color:
        #ffd96c;

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .8px;
}

.timer-section {
    margin-bottom:
        14px;
}

.timer-top {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin:
        0 3px 6px;
}

.timer-top span {
    color:
        #8793aa;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.3px;
}

.timer-top strong {
    font-size:
        15px;
}

.timer-track {
    height:
        8px;

    border-radius:
        999px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.07);
}

.timer-bar {
    width:
        100%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #667cff,
            #8c78ff
        );

    transform-origin:
        left center;
}

.timer-bar.urgent {
    background:
        linear-gradient(
            90deg,
            #ff7e62,
            #ff4f68
        );
}

.question-card {
    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        22px 18px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        22px;

    background:
        rgba(18,25,44,.94);

    margin-bottom:
        13px;
}

.question-card h2 {
    margin:
        10px 0 0;

    font-size:
        clamp(
            19px,
            5.6vw,
            27px
        );

    line-height:
        1.25;
}

.answers-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        10px;
}

.answer-button {
    position:
        relative;

    min-height:
        104px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        20px;

    padding:
        16px 12px;

    background:
        #151f36;

    color:
        #f7f8ff;

    font-size:
        15px;

    font-weight:
        850;

    line-height:
        1.25;

    transition:
        transform .07s ease,
        border-color .15s ease,
        background .15s ease;
}

.answer-button:active:not(:disabled) {
    transform:
        scale(.975);
}

.answer-button:disabled {
    cursor:
        default;
}

.answer-button.selected {
    border-color:
        #7d8fff;

    background:
        #25325a;
}

.answer-button.correct {
    border-color:
        #43dc9a;

    background:
        #153c31;
}

.answer-button.wrong {
    border-color:
        #ff6270;

    background:
        #4a1d28;
}

.answer-letter {
    position:
        absolute;

    top:
        9px;

    left:
        10px;

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.07);

    color:
        #9da9c2;

    font-size:
        9px;

    font-weight:
        950;
}

.answer-status {
    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px 4px 0;

    text-align:
        center;

    color:
        #96a1b8;

    font-size:
        12px;

    font-weight:
        800;
}

.answer-status.good {
    color:
        #64dda8;
}

.answer-status.bad {
    color:
        #ff8490;
}

.final-card {
    margin-top:
        22px;

    text-align:
        center;
}

.winner-icon {
    font-size:
        65px;

    margin-bottom:
        7px;
}

.final-card h2 {
    margin:
        6px 0 3px;

    font-size:
        34px;

    line-height:
        1;
}

.winner-score {
    color:
        #98a5bd;

    font-weight:
        900;

    font-size:
        13px;
}

.sudden-final {
    display:
        inline-flex;

    margin:
        14px auto;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(255,216,86,.12);

    color:
        #ffdb6e;

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        .8px;
}

.stats-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        10px;

    margin:
        22px 0;
}

.stats-player {
    padding:
        16px 12px;

    border-radius:
        17px;

    background:
        rgba(255,255,255,.035);

    text-align:
        left;
}

.stats-player h3 {
    margin:
        0 0 11px;

    font-size:
        14px;
}

.stat-line {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        8px;

    padding:
        5px 0;

    color:
        #9ba7bd;

    font-size:
        11px;
}

.stat-line strong {
    color:
        #f5f7ff;
}

.rematch-message {
    min-height:
        27px;

    margin-top:
        10px;

    color:
        #9ca8bf;

    font-size:
        11px;
}

.overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(7,10,20,.94);

    backdrop-filter:
        blur(10px);

    padding:
        30px;
}

.overlay-text {
    text-align:
        center;

    font-size:
        clamp(
            80px,
            30vw,
            170px
        );

    line-height:
        .9;

    font-weight:
        950;

    letter-spacing:
        -7px;
}

.overlay-text.go {
    font-size:
        clamp(
            50px,
            17vw,
            100px
        );

    letter-spacing:
        -3px;

    color:
        #7f92ff;
}

.overlay-text.sudden {
    font-size:
        clamp(
            42px,
            13vw,
            80px
        );

    letter-spacing:
        -2px;

    color:
        #ffdb72;
}

.overlay-subtext {
    margin-top:
        18px;

    color:
        #99a4bb;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        calc(
            22px +
            env(safe-area-inset-bottom)
        );

    z-index:
        200;

    transform:
        translateX(-50%);

    width:
        min(
            calc(100% - 30px),
            430px
        );

    border-radius:
        15px;

    padding:
        13px 16px;

    text-align:
        center;

    background:
        #222d47;

    color:
        white;

    box-shadow:
        0 16px 50px
        rgba(0,0,0,.36);

    font-size:
        12px;

    font-weight:
        800;
}

.toast.error {
    background:
        #5b2430;
}

@media (
    max-width: 480px
) {

    .view {
        width:
            calc(100% - 18px);

        padding-top:
            12px;
    }

    .home-view {
        width:
            calc(100% - 22px);
    }

    .home-card,
    .lobby-card,
    .final-card {
        padding:
            18px;
    }

    .hero {
        padding-top:
            17px;
    }

    .answers-grid {
        gap:
            8px;
    }

    .answer-button {
        min-height:
            108px;

        padding:
            15px 8px;

        font-size:
            14px;
    }

}

@media (
    max-width: 355px
) {

    .answers-grid {
        grid-template-columns:
            1fr;
    }

    .answer-button {
        min-height:
            72px;
    }

}


/* ==========================================================
   GS DESAFIO - FASE 14B
   QUESTION IMAGE
   ========================================================== */

.question-media-wrap {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        4px
        auto
        18px;

}


.question-media-wrap[hidden] {

    display: none !important;

}


.question-media {

    display: block;

    width: auto;

    max-width: min(
        100%,
        420px
    );

    max-height: 240px;

    object-fit: contain;

    border-radius: 18px;

    background:
        #ffffff;

    padding: 16px;

    box-sizing:
        border-box;

}


@media (
    max-width: 600px
) {

    .question-media {

        max-width: 100%;

        max-height: 210px;

        border-radius: 15px;

        padding: 12px;

    }

}


@media (
    max-height: 700px
) {

    .question-media {

        max-height: 165px;

    }

}