:root {
    --font-body:
        "Nunito",
        sans-serif;

    --font-display:
        "Playfair Display",
        serif;

    --purple-dark:
        #180828;

    --purple-deep:
        #2e1250;

    --purple-main:
        #6d28d9;

    --purple-light:
        #c084fc;

    --purple-pale:
        #f3e8ff;

    --text-main:
        #ffffff;

    --text-muted:
        rgba(255, 255, 255, .78);

    --glass-background:
        rgba(255, 255, 255, .09);

    --glass-border:
        rgba(255, 255, 255, .17);
}


* {
    box-sizing: border-box;
}


html {
    font-family:
        var(--font-body);
}


body {
    margin: 0;

    font-family:
        var(--font-body);

    color:
        var(--text-main);
}


h1,
h2,
h3 {
    font-family:
        var(--font-display);

    line-height: 1.15;
}


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


.story-ending h2 {
    font-family:
        var(--font-display);

    font-weight: 700;

    letter-spacing: -.02em;
}

.story-home-button,
.page-return-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: fit-content;

    margin-top: 50px;

    padding:
        13px
        20px;

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

    border-radius:
        999px;

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

    color:
        #ffffff;

    font-family:
        var(--font-body);

    font-size:
        .95rem;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .18);

    backdrop-filter:
        blur(12px);

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.story-home-button:hover,
.page-return-button:hover {
    transform:
        translateY(-3px);

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

    border-color:
        rgba(255, 255, 255, .4);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .24);
}


.story-home-button:focus-visible,
.page-return-button:focus-visible {
    outline:
        3px solid
        var(--purple-light);

    outline-offset:
        4px;
}

.page-return-button {
    margin-left: auto;
    margin-right: auto;
}

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

body {
    font-family: "Nunito", sans-serif;

    background: linear-gradient(
        135deg,
        #2a1648,
        #4a2574,
        #8f5fd780
    );

    color: white;

    min-height: 100vh;

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

}

.hero {
    text-align: center;
    max-width: 700px;
    padding: 40px;
}

h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 1.4rem;
    opacity: .9;
    line-height: 1.7;
    margin-bottom: 50px;
}

button{

    background:#ffffff;

    color:#542D91;

    font-weight:700;

    box-shadow:
        0 0 30px rgba(255,255,255,.25);

}

button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 40px rgba(255,255,255,.5);

}

.stars {

    position: fixed;
    inset: 0;

    background-image:
        radial-gradient(white 1px, transparent 1px);

    background-size: 40px 40px;

    opacity: .15;

    animation: drift 60s linear infinite;

    pointer-events: none;
}

@keyframes drift {

    from {

        transform: translateY(0px);

    }

    to {

        transform: translateY(-300px);

    }

}

.hero h1,
.subtitle,
button {

    opacity: 0;

    transform: translateY(25px);

    animation: fadeUp .8s forwards;

}

.subtitle{

    animation-delay:.6s;

}

button{

    animation-delay:1.2s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-out{

    animation:fadeOut .8s forwards;

}

@keyframes fadeOut{

    to{

        opacity:0;

    }

}

.letter-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:30px;

}

.envelope{

    font-size:7rem;

    transition:.4s;

}

.envelope.open{

    transform:
        rotate(-12deg)
        scale(1.15);

}

.letter{

    width:700px;

    max-width:90%;

    background:white;

    color:#333;

    padding:45px;

    border-radius:20px;

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

    line-height:1.8;

}

.hidden{

    display:none;

}

.letter h2{

    color:#6b38a5;

    margin-bottom:20px;

    font-family:"Playfair Display", cursive;

    font-size:2.5rem;

}

.hub{
    max-width:1100px;
    margin:auto;
    padding:60px;
    text-align:center;
}

.card-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

    margin-top:50px;

}

.card{

    background:white;

    color:#5b2fa5;

    padding:35px;

    border-radius:20px;

    text-decoration:none;

    transition:.25s;

}

.card:hover{

    transform:
        translateY(-8px)
        scale(1.03);

}

.chaos-page{

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

    min-height:100vh;

    gap:20px;

    text-align:center;
}

.progress-container{

    width:350px;
    height:12px;

    background:#3b3b3b;

    border-radius:20px;

    overflow:hidden;
}

#progressBar{

    width:0%;

    height:100%;

    background:white;

    transition:width .08s linear;

}

.result-card{

    margin-top:30px;

    background:white;

    color:#333;

    width:450px;

    max-width:90%;

    border-radius:18px;

    padding:30px;

    transition:.3s;
}

.emoji{

    font-size:4rem;

    margin-bottom:15px;
}

#bootScreen{

    position:fixed;
    inset:0;

    background:#000;

    color:#00ff66;

    font-family:monospace;

    padding:40px;

    display:flex;
    align-items:flex-start;

    z-index:999;
}

#bootTedxt{

    white-space:pre-wrap;

    line-height:1.8;

}

.boot-fade{

    animation:bootFade .8s forwards;

}

@keyframes bootFade{

    to{

        opacity:0;

    }

}

.cursor{

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

.crash-screen {

    background: #0066cc;

    color: white;

    font-family: "Segoe UI", sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

}

.crash-content {

    width: 70%;

    max-width: 700px;

}

.crash-content h1 {

    font-size: 7rem;

    margin-bottom: 20px;

}

.crash-content h2 {

    margin-bottom: 40px;

}

.crash-content p {

    font-size: 1.3rem;

    line-height: 1.8;

}

.system-crash {
    animation: crashAnimation 1.5s forwards;
}

@keyframes crashAnimation {

    0% {
        transform: translate(0);
        filter: none;
    }

    10% {
        transform: translate(-5px, 3px);
    }

    20% {
        transform: translate(5px, -3px);
        filter: brightness(2);
    }

    30% {
        transform: translate(-8px, 4px);
    }

    40% {
        transform: translate(8px, -4px);
        filter: contrast(3);
    }

    100% {
        opacity: 0;
        background: white;
    }
}

html,
body{

    width:100%;
    height:100%;
    margin:0;
}

#game{

    width:100%;
    height:100%;

}

.room{

    width:100%;
    height:100%;

    position:relative;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

#game{

    transition:opacity .25s;

}

.room-transition {

    animation: roomFlicker .35s;

}

@keyframes roomFlicker {

    0%{
        opacity:1;
    }

    15%{
        opacity:.2;
    }

    25%{
        opacity:1;
    }

    35%{
        opacity:.1;
    }

    100%{
        opacity:1;
    }

}

#flashlight {

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 999;

    background:
        radial-gradient(
            circle 160px at var(--mouse-x, 50%) var(--mouse-y, 50%),
            transparent 0,
            transparent 100px,
            rgba(0,0,0,.90) 180px
        );

}

.room {

    animation: flicker 7s infinite;

}

@keyframes flicker {

    0%, 97%, 100% {
        filter: brightness(1);
    }

    98% {
        filter: brightness(.85);
    }

    99% {
        filter: brightness(.65);
    }

}

.game-object[data-type="memory"] {
    width: 18px;
    height: 18px;

    background: #c084fc;

    border: 2px solid rgba(255,255,255,.7);

    box-shadow:
        0 0 8px #c084fc,
        0 0 20px #c084fc,
        0 0 40px rgba(192,132,252,.7);

    border-radius: 50%;

    cursor: pointer;

    animation: memoryPulse 2s ease-in-out infinite;
}

.game-object {
    position: absolute;

    transform: translate(-50%, -50%);

    z-index: 10;
}

@keyframes memoryPulse {

    0%, 100% {
        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: .65;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.35);

        opacity: 1;
    }
}
#journal {
    position: fixed;

    top: 0;
    right: 0;

    width: 360px;
    max-width: 90vw;
    height: 100vh;

    background: #1b1b1b;
    color: white;

    padding: 25px;

    overflow-y: auto;

    z-index: 10000;

    transition: transform 0.35s ease;

    transform: translateX(0);
}

#journal.hidden {
    transform: translateX(100%);
}

.journal-entry {
    margin-top: 15px;

    padding: 15px;

    background: #303030;

    border-radius: 10px;
}

.memory-fragment {
    margin-top: 20px;
    color: #c084fc;
    letter-spacing: 1px;
}

.memory-fragment strong {
    font-size: 1.3rem;
    text-shadow: 0 0 12px rgba(192,132,252,.8);
}

.ending-room {
    width: 100vw;
    height: 100vh;

    position: relative;

    overflow-y: auto;

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

    background:
        radial-gradient(
            circle at center,
            #6d28d9,
            #2e1065 50%,
            #12051f
        );

    color: white;
}

.ending-content {
    position: relative;
    z-index: 2;

    width: min(750px, 90%);

    padding: 60px 20px;

    text-align: center;
}

.ending-small {
    opacity: .65;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.assembled-message {
    margin: 30px 0 50px;

    font-size: clamp(
        2.2rem,
        6vw,
        5rem
    );

    color: #e9d5ff;

    text-shadow:
        0 0 25px rgba(216,180,254,.8);
}

.ending-letter {
    background:
        rgba(255,255,255,.10);

    padding: 35px;

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

    border-radius: 20px;

    backdrop-filter: blur(10px);

    font-family:
        "Caveat",
        cursive;

    font-size: 1.7rem;

    line-height: 1.7;
}

.ending-letter p {
    margin-bottom: 20px;
}

.signature {
    margin-top: 40px;

    font-size: 2rem;
}

.story-page {
    width: min(1100px, 92%);

    margin: 0 auto;

    padding: 80px 0 100px;

    min-height: 100vh;

    color: white;
}

.story-header {
    max-width: 700px;

    margin:
        0 auto
        80px;

    text-align: center;
}

.story-kicker {
    text-transform: uppercase;
    letter-spacing: 4px;

    font-size: .8rem;

    opacity: .65;
}

.story-header h1 {
    margin: 15px 0;

    font-size:
        clamp(
            3rem,
            8vw,
            5rem
        );
}

.timeline {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 55px;
}

.timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 2px;

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

    transform:
        translateX(-50%);
}

.timeline-event {
    position: relative;

    width: 50%;

    display: flex;
}

.timeline-event.left {
    align-self: flex-start;

    justify-content: flex-end;

    padding-right: 55px;
}

.timeline-event.right {
    align-self: flex-end;

    padding-left: 55px;
}

.timeline-marker {
    position: absolute;

    top: 30px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #5b21b6;

    box-shadow:
        0 0 20px
        rgba(192,132,252,.6);

    z-index: 2;
}

.timeline-event.left
.timeline-marker {

    right: -24px;
}

.timeline-event.right
.timeline-marker {

    left: -24px;
}

.timeline-card {
    width: min(430px, 100%);

    padding: 28px;

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

    border-radius: 22px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        background .25s ease;
}

.timeline-card:hover {
    transform:
        translateY(-6px);

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

.timeline-date {
    display: block;

    margin-bottom: 10px;

    color: #d8b4fe;

    font-size: .85rem;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.timeline-card h2 {
    margin-bottom: 12px;

    font-size: 1.6rem;
}

.timeline-card p {
    line-height: 1.7;

    opacity: .85;
}

@media (max-width: 750px) {

    .timeline::before {
        left: 24px;
    }

    .timeline-event,
    .timeline-event.left,
    .timeline-event.right {

        width: 100%;

        padding:
            0
            0
            0
            65px;

        justify-content:
            flex-start;

        align-self:
            stretch;
    }

    .timeline-event.left
    .timeline-marker,

    .timeline-event.right
    .timeline-marker {

        left: 0;
        right: auto;
    }

    .timeline-card {
        width: 100%;
    }
}

.timeline-image {
    display: block;

    width: 100%;

    max-height: 280px;

    margin-bottom: 20px;

    object-fit: cover;

    border-radius: 14px;
}

.timeline-event {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.timeline-event.visible {
    opacity: 1;

    transform:
        translateY(0);
}

.story-ending {
    margin-top: 100px;

    text-align: center;

    font-family:
        "Caveat",
        cursive;

    font-size:
        clamp(
            2rem,
            6vw,
            3.5rem
        );
}

.story-ending span {
    display: block;

    margin-top: 20px;

    font-size: 3rem;
}

html {
    min-height: 100%;
}

body.story-body {
    display: block !important;

    width: 100%;
    height: auto !important;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    align-items: initial !important;
    justify-content: initial !important;
}

.backrooms-body {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.meals-body {
    display: block;

    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        radial-gradient(
            circle at top,
            #7c3aed,
            #3b1766 48%,
            #190b2b
        );

    color: white;
}


.meals-page {
    position: relative;
    z-index: 1;

    width: min(850px, 92%);

    margin: 0 auto;

    padding: 80px 0;
}


.meals-header {
    max-width: 680px;

    margin:
        0 auto
        45px;

    text-align: center;
}


.meals-kicker {
    color: #d8b4fe;

    font-size: .8rem;

    letter-spacing: 3px;
}


.meals-header h1 {
    margin: 15px 0;

    font-size:
        clamp(
            2.5rem,
            7vw,
            4.5rem
        );
}


.meals-header p {
    line-height: 1.7;

    opacity: .85;
}

.meal-options {
    display: grid;

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

    gap: 16px;
}


.meal-option {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 110px;

    padding: 20px;

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

    border-radius: 20px;

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

    color: white;

    text-align: left;

    cursor: pointer;

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


.meal-option:hover {
    transform:
        translateY(-4px);

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


.meal-option.selected {
    border-color: #c084fc;

    background:
        rgba(192,132,252,.22);
}


.meal-option-icon {
    margin-right: 15px;

    font-size: 2.5rem;
}


.meal-option-text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.meal-option-text small {
    opacity: .7;
}


.meal-check {
    margin-left: auto;

    font-size: 1.5rem;

    color: #86efac;
}

.meal-progress {
    margin-top: 30px;

    padding: 25px;

    border-radius: 20px;

    background:
        rgba(0,0,0,.18);

    text-align: center;
}


.meal-progress-track {
    height: 12px;

    margin: 18px 0;

    overflow: hidden;

    border-radius: 999px;

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


.meal-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #c084fc,
            #f0abfc
        );

    transition:
        width .4s ease;
}


.meal-reward {
    margin-top: 35px;

    padding: 30px;

    border-radius: 24px;

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

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

    text-align: center;
}


.meal-reward.hidden {
    display: none;
}


.reward-icon {
    display: block;

    font-size: 4rem;
}


.reward-image {
    display: block;

    width: min(450px, 100%);

    max-height: 450px;

    margin:
        20px auto;

    object-fit: cover;

    border-radius: 20px;
}


.reward-label {
    color: #d8b4fe;

    letter-spacing: 3px;

    font-size: .8rem;
}


@media (max-width: 650px) {

    .meal-options {
        grid-template-columns: 1fr;
    }

}

.reward-celebration {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 10000;
}

.reward-celebration span {
    position: absolute;
    bottom: -40px;

    font-size: 1.8rem;

    animation:
        rewardFloat
        2.5s
        ease-out
        forwards;
}

@keyframes rewardFloat {
    from {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0);
    }

    to {
        opacity: 0;

        transform:
            translateY(-110vh)
            rotate(360deg);
    }
}

.reward-large-emoji {
    margin: 20px 0;

    font-size: 6rem;
}

.reward-coupon {
    padding: 35px;

    border:
        2px dashed
        rgba(255,255,255,.45);

    border-radius: 20px;

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

.coupon-reference {
    margin-top: 25px;

    font-family: monospace;

    font-size: .8rem;

    letter-spacing: 1px;

    opacity: .65;
}

.love-body {
    display: block;

    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        radial-gradient(
            circle at top,
            #7c3aed,
            #3b1766 48%,
            #180828
        );

    color: white;
}


.love-page {
    position: relative;
    z-index: 1;

    width: min(1000px, 92%);

    margin: 0 auto;

    padding: 80px 0;
}


.love-header {
    max-width: 720px;

    margin:
        0 auto
        55px;

    text-align: center;
}


.love-kicker {
    color: #e9d5ff;

    font-size: .8rem;

    letter-spacing: 4px;
}


.love-header h1 {
    margin: 15px 0;

    font-size:
        clamp(
            2.8rem,
            8vw,
            5rem
        );
}


.love-header p {
    line-height: 1.7;
    opacity: .85;
}

.love-machine {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.love-card {
    width: min(680px, 100%);

    min-height: 330px;

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

    padding: 45px;

    text-align: center;

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

    border-radius: 30px;

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

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

    backdrop-filter:
        blur(14px);
}


.love-card.empty {
    opacity: .8;
}


.love-card.revealing {
    animation:
        revealLove
        .65s
        ease;
}


@keyframes revealLove {

    0% {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.96);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.love-emoji {
    margin-bottom: 20px;

    font-size: 5rem;
}


.love-card h2 {
    margin-bottom: 18px;

    font-size:
        clamp(
            1.8rem,
            5vw,
            2.7rem
        );
}


.love-card p {
    max-width: 550px;

    line-height: 1.8;

    font-size: 1.15rem;

    opacity: .9;
}

.reveal-love-button {
    margin-top: 28px;

    padding:
        15px
        28px;

    border: 0;

    border-radius: 999px;

    background: white;

    color: #5b21b6;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.reveal-love-button:hover {
    transform:
        translateY(-3px);

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


.love-progress {
    margin-top: 18px;

    opacity: .65;

    font-size: .9rem;
}

.love-collection {
    margin-top: 90px;
}


.love-collection > h2 {
    margin-bottom: 25px;

    text-align: center;
}


.love-collection-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 18px;
}


.love-mini-card {
    padding: 24px;

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

    border-radius: 20px;

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


.love-mini-card span {
    font-size: 2rem;
}


.love-mini-card h3 {
    margin:
        12px 0
        8px;
}


.love-mini-card p {
    line-height: 1.6;

    opacity: .8;
}


.love-empty-message {
    grid-column: 1 / -1;

    text-align: center;

    opacity: .6;
}

.mexico-body {
    display: block;

    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        radial-gradient(
            circle at top,
            #294f3a,
            #182e24 50%,
            #0d1712
        );

    color: #fff8e7;
}


.mexico-page {
    width: min(900px, 92%);

    margin: 0 auto;

    padding: 75px 0;

    text-align: center;
}


.mexico-header {
    max-width: 750px;

    margin:
        0 auto
        45px;
}


.mexico-kicker {
    color: #f4d58d;

    font-size: .8rem;

    letter-spacing: 4px;
}


.mexico-header h1 {
    margin: 14px 0;

    font-size:
        clamp(
            2.5rem,
            7vw,
            4.8rem
        );
}


.mexico-header > p:last-child {
    opacity: .75;
}

.mexico-intro,
.mexico-question-card,
.mexico-result {
    padding: 40px;

    border:
        1px solid
        rgba(244, 213, 141, .25);

    border-radius: 25px;

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

    backdrop-filter:
        blur(12px);
}


.mexico-seal,
.mexico-question-emoji {
    margin-bottom: 18px;

    font-size: 5rem;
}


.mexico-primary-button,
.mexico-secondary-button {
    margin-top: 25px;

    padding:
        14px
        26px;

    border: 0;

    border-radius: 999px;

    background: #f4d58d;

    color: #17251d;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease;
}


.mexico-primary-button:hover,
.mexico-secondary-button:hover {
    transform:
        translateY(-3px);
}


.mexico-quiz.hidden,
.mexico-intro.hidden,
.mexico-result.hidden {
    display: none;
}

.mexico-progress {
    margin-bottom: 25px;
}


.mexico-progress-track {
    height: 10px;

    margin-top: 12px;

    overflow: hidden;

    border-radius: 999px;

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


.mexico-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #198754,
            #f4d58d,
            #c9413b
        );

    transition:
        width .4s ease;
}


.mexico-answers {
    display: grid;

    gap: 14px;

    margin-top: 30px;
}


.mexico-answer {
    padding: 18px;

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

    border-radius: 16px;

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

    color: #fff8e7;

    font-size: 1rem;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.mexico-answer:hover:not(:disabled) {
    transform:
        translateX(5px);

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


.mexico-answer.selected {
    border-color: #f4d58d;

    background:
        rgba(244,213,141,.2);
}

.mexico-certificate {
    padding:
        45px
        35px;

    border:
        8px double
        #b58a3c;

    background:
        #f3e6c8;

    color: #332817;

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.35);
}


.certificate-country,
.certificate-label {
    letter-spacing: 3px;

    font-size: .75rem;
}


.certificate-emblem {
    margin: 20px 0;

    font-size: 5rem;
}


.mexico-certificate h2 {
    margin: 15px 0;

    font-family: Georgia, serif;

    font-size:
        clamp(
            2.8rem,
            7vw,
            5rem
        );
}


.mexico-certificate h3 {
    color: #7f1d1d;

    font-size:
        clamp(
            1.5rem,
            4vw,
            2.3rem
        );
}


.certificate-message {
    max-width: 600px;

    margin:
        25px auto;

    line-height: 1.7;
}


.certificate-score {
    margin:
        25px auto;

    font-family: monospace;

    font-weight: 700;
}


.certificate-signatures {
    display: flex;
    justify-content: space-around;

    gap: 30px;

    margin-top: 45px;
}


.certificate-signatures span {
    width: 45%;

    padding-top: 12px;

    border-top:
        1px solid
        #332817;
}


.certificate-signatures small {
    opacity: .7;
}

.mexico-celebration {
    position: fixed;
    inset: 0;

    z-index: 10000;

    overflow: hidden;

    pointer-events: none;
}


.mexico-celebration span {
    position: absolute;
    top: -60px;

    font-size: 2rem;

    animation:
        mexicoConfetti
        3s
        ease-in
        forwards;
}


@keyframes mexicoConfetti {

    from {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0);
    }

    to {
        opacity: 0;

        transform:
            translateY(110vh)
            rotate(540deg);
    }

}


@media (max-width: 600px) {

    .mexico-intro,
    .mexico-question-card,
    .mexico-result {
        padding: 25px 18px;
    }


    .certificate-signatures {
        flex-direction: column;
        align-items: center;
    }


    .certificate-signatures span {
        width: 85%;
    }

}

.mobile-controls {
    display: none;
}

@media (max-width: 800px) {

    .mobile-controls {
        position: fixed;
        right: 20px;
        bottom: 20px;

        z-index: 100;

        display: grid;

        grid-template-columns:
            repeat(3, 52px);

        grid-template-rows:
            repeat(2, 52px);

        gap: 7px;
    }

    .mobile-controls button {
        border:
            1px solid
            rgba(255,255,255,.25);

        border-radius: 12px;

        background:
            rgba(0,0,0,.55);

        color: white;

        font-size: 1.4rem;

        backdrop-filter:
            blur(8px);
    }

    .mobile-controls
    [data-direction="up"] {
        grid-column: 2;
    }

    .mobile-controls
    [data-direction="left"] {
        grid-column: 1;
    }

    .mobile-controls
    [data-direction="down"] {
        grid-column: 2;
    }

    .mobile-controls
    [data-direction="right"] {
        grid-column: 3;
    }

}