* {
    box-sizing: border-box;
}


:root {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #291a34;

    background: #f5f1f8;

}


body {

    margin: 0;

    min-height: 100vh;

}


a {

    text-decoration: none;

}


.auth-body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #32105d,
            #7b2cbf
        );

}


.auth-card {

    width: min(
        430px,
        100%
    );

    background: #fff;

    padding: 30px;

    border-radius: 24px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.25);

}


.logo-game {

    text-align: center;

    font-size: 58px;

}


.auth-card h1 {

    text-align: center;

    margin: 5px 0;

}


.subtitle {

    text-align: center;

    color: #777;

    line-height: 1.5;

}


label {

    display: block;

    font-weight: 700;

    margin:
        15px
        0
        7px;

}


input {

    width: 100%;

    padding: 13px;

    border:
        1px solid
        #d8d0df;

    border-radius: 12px;

    font-size: 16px;

}


input:focus {

    outline:
        2px solid
        #cba7e9;

}


.btn {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    border: 0;

    border-radius: 12px;

    padding: 13px 16px;

    margin-top: 12px;

    font-weight: 800;

    font-size: 15px;

    cursor: pointer;

}


.primary {

    background: #6a1bb1;

    color: #fff;

}


.secondary {

    background: #eee7f3;

    color: #40116b;

}


.big {

    font-size: 19px;

    padding: 16px;

}


.link {

    display: block;

    text-align: center;

    margin-top: 18px;

    color: #6a1bb1;

    font-weight: 700;

}


.separator {

    text-align: center;

    margin: 18px 0;

    color: #999;

    font-size: 12px;

}


.alert {

    padding: 12px;

    border-radius: 10px;

    margin: 15px 0;

}


.error {

    background: #ffe5e5;

    color: #a11d2d;

}


.topbar {

    background: #3b1768;

    color: #fff;

    padding:
        14px 5%;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 15px;

}


.topbar nav {

    display: flex;

    gap: 15px;

    align-items: center;

    flex-wrap: wrap;

}


.topbar a {

    color: #fff;

}


.game-container,
.content {

    max-width: 1000px;

    margin:
        25px auto;

    padding:
        0 15px;

}


.hud {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 10px;

    margin-bottom: 15px;

}


.hud-box {

    background: #fff;

    border-radius: 15px;

    padding: 14px;

    text-align: center;

    box-shadow:
        0 5px 18px
        rgba(36,27,47,.08);

}


.hud-box small,
.stats small {

    display: block;

    color: #777;

}


.hud-box strong,
.stats strong {

    display: block;

    font-size: 23px;

    margin-top: 5px;

}


.timer-box strong {

    color: #b21f4b;

}


.game-card,
.panel {

    background: #fff;

    border-radius: 20px;

    padding: 25px;

    box-shadow:
        0 8px 30px
        rgba(36,27,47,.08);

}


.game-card {

    text-align: center;

}


.game-icon {

    font-size: 60px;

}


.hidden {

    display: none !important;

}


.customer-card {

    display: flex;

    text-align: left;

    gap: 15px;

    align-items: flex-start;

    background: #faf7fc;

    padding: 18px;

    border-radius: 15px;

}


.customer-avatar {

    font-size: 45px;

}


.customer-card p {

    margin:
        5px 0;

}


.pedido {

    font-size: 18px;

    color: #4d177d;

}


.builder {

    max-width: 750px;

    margin:
        25px auto;

    text-align: left;

}


.builder h2 {

    text-align: center;

}


.choices {

    display: flex;

    gap: 9px;

    flex-wrap: wrap;

    margin:
        8px 0
        20px;

}


.choice {

    border:
        2px solid
        #ddd3e5;

    background: #fff;

    border-radius: 12px;

    padding:
        11px
        14px;

    font-weight: 700;

    cursor: pointer;

}


.choice.selected {

    background: #eadbfa;

    border-color: #6a1bb1;

    color: #4b127b;

}


.feedback {

    min-height: 25px;

    font-weight: 800;

    margin-top: 10px;

}


.feedback.ok {

    color: #16894b;

}


.feedback.bad {

    color: #b51f36;

}


.result-grid,
.stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    margin:
        20px 0;

}


.result-grid > div,
.stats > div {

    background: #f7f3fa;

    border-radius: 12px;

    padding: 15px;

    text-align: center;

}


.result-grid strong {

    display: block;

    font-size: 24px;

    margin-top: 5px;

}


.table-wrap {

    overflow-x: auto;

}


table {

    width: 100%;

    border-collapse:
        collapse;

    margin-top: 15px;

}


th,
td {

    padding:
        12px 9px;

    border-bottom:
        1px solid
        #eee;

    text-align: left;

    white-space: nowrap;

}


th {

    background: #f7f3fa;

}


.mine {

    background: #f1e7fa;

}


@media (max-width: 700px) {

    .topbar {

        flex-direction: column;

        align-items:
            flex-start;

    }


    .hud {

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

    }


    .timer-box {

        grid-column:
            span 2;

    }


    .result-grid,
    .stats {

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

    }


    .game-card,
    .panel {

        padding: 18px;

    }


    .topbar nav {

        gap: 10px;

    }

}