/* =========================================================
   BIRTHDAY DREAM ARCADE
   STYLE.CSS
========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Press+Start+2P&display=swap'
);


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --pink: #f49cbb;
    --pink-light: #ffe3ee;
    --pink-bright: #ff71a8;

    --orange: #fbb02d;
    --orange-light: #ffe5ad;

    --plum: #3d2645;
    --plum-light: #6d4b72;

    --blue: #89c2d9;
    --blue-light: #dff5fc;

    --sage: #bacdb0;
    --sage-light: #edf3e9;

    --berry: #c9184a;
    --navy: #03045e;

    --cream: #fff9fb;
    --white: #ffffff;

    --shadow: rgba(61, 38, 69, .16);

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    font-family: "DM Sans", sans-serif;

    color: var(--plum);

    overflow-x: hidden;

    background:

        radial-gradient(
            circle at 13% 10%,
            rgba(255,255,255,.75) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 80% 16%,
            rgba(255,255,255,.8) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 73% 73%,
            rgba(255,255,255,.6) 0 3px,
            transparent 4px
        ),

        linear-gradient(
            135deg,
            #75b7d0 0%,
            #9dcde0 16%,
            #d2b8dc 35%,
            #f49cbb 55%,
            #ffdde9 73%,
            #fbb02d 100%
        );

    background-attachment: fixed;

}


button,
input {

    font-family: inherit;

}


button {

    border: 0;

}


.hidden {

    display: none !important;

}


svg {

    width: 100%;

    height: 100%;

    display: block;

}


/* =========================================================
   BACKGROUND
========================================================= */

.background-decoration {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 0;

}


.cosmic-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    opacity: .35;

}


.orb-one {

    width: 340px;

    height: 340px;

    top: -120px;

    left: -80px;

    background:
        radial-gradient(
            circle,
            #ffffff,
            #f49cbb 55%,
            transparent 72%
        );

}


.orb-two {

    width: 420px;

    height: 420px;

    right: -160px;

    top: 20%;

    background:
        radial-gradient(
            circle,
            #ffffff,
            #89c2d9 55%,
            transparent 72%
        );

}


.orb-three {

    width: 300px;

    height: 300px;

    left: 20%;

    bottom: -160px;

    background:
        radial-gradient(
            circle,
            #fff5bd,
            #fbb02d 55%,
            transparent 72%
        );

}


.sparkle {

    position: absolute;

    color: #fff8c7;

    animation:
        sparkleFloat
        4s
        ease-in-out
        infinite;

}


.sparkle svg {

    width: 24px;

    height: 24px;

}


.sparkle-one {

    top: 8%;

    left: 8%;

}


.sparkle-two {

    top: 17%;

    right: 8%;

    animation-delay: 1s;

}


.sparkle-three {

    bottom: 14%;

    left: 11%;

    animation-delay: 1.8s;

}


.sparkle-four {

    bottom: 22%;

    right: 13%;

    animation-delay: 2.6s;

}


@keyframes sparkleFloat {

    0%,
    100% {

        opacity: .35;

        transform:
            translateY(0)
            rotate(0);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-15px)
            rotate(15deg);

    }

}


/* =========================================================
   START SCREEN
========================================================= */

#startScreen {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    position: relative;

    z-index: 2;

}


.start-card {

    width: min(840px, 95vw);

    padding:
        clamp(40px, 7vw, 75px)
        clamp(25px, 6vw, 70px);

    text-align: center;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.87),
            rgba(255,227,238,.75)
        );

    border:
        2px solid rgba(61,38,69,.38);

    border-radius: 42px;

    box-shadow:
        0 20px 60px rgba(61,38,69,.14);

    backdrop-filter: blur(18px);

    animation:
        startAppear
        .8s
        ease;

}


@keyframes startAppear {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


.player-label {

    display: inline-block;

    padding:
        9px
        15px;

    border:
        1px solid var(--plum);

    border-radius: 999px;

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

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.planet-decoration {

    width: 88px;

    height: 88px;

    margin:
        25px
        auto;

    position: relative;

}


.planet-core {

    position: absolute;

    width: 58px;

    height: 58px;

    left: 15px;

    top: 15px;

    border-radius: 50%;

    background:

        linear-gradient(
            145deg,
            #f49cbb,
            #ffcfdf
        );

    box-shadow:
        inset -8px -8px 0 rgba(201,24,74,.10);

}


.planet-ring {

    position: absolute;

    width: 95px;

    height: 32px;

    left: -4px;

    top: 28px;

    border:
        4px solid var(--navy);

    border-radius: 50%;

    transform:
        rotate(-18deg);

    opacity: .65;

}


.eyebrow {

    margin: 0;

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--plum-light);

    font-weight: 700;

}


.start-card h1 {

    margin:
        18px 0
        20px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    line-height: 1.2;

}


.title-small {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        clamp(14px, 2vw, 19px);

    color: var(--berry);

}


.title-big {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        clamp(28px, 6vw, 58px);

    color: var(--plum);

    text-shadow:
        3px 3px 0 rgba(255,255,255,.8);

}


.subtitle {

    margin:
        0 auto
        34px;

    color: var(--plum-light);

    font-size: 17px;

    line-height: 1.6;

}


.primary-button {

    min-width: 190px;

    padding:
        15px
        23px;

    border:
        2px solid var(--plum);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--berry),
            var(--pink-bright)
        );

    color: white;

    font-weight: 800;

    letter-spacing: .5px;

    cursor: pointer;

    box-shadow:
        0 7px 20px rgba(201,24,74,.22);

    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}


.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 11px 26px rgba(201,24,74,.28);

}


.primary-button:active {

    transform:
        translateY(1px);

}


.press-text {

    margin-top: 20px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;

    color: var(--plum-light);

    opacity: .55;

}


/* =========================================================
   MAIN ARCADE
========================================================= */

#arcade {

    min-height: 100vh;

    padding:
        24px
        24px
        60px;

    position: relative;

    z-index: 2;

    animation:
        pageFade
        .6s
        ease;

}


@keyframes pageFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    width:
        min(
            1160px,
            100%
        );

    margin:
        0 auto
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.small-label {

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;

    color: var(--berry);

    margin-bottom: 7px;

}


.topbar h2 {

    margin: 0;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        clamp(10px, 2vw, 16px);

}


.score-box {

    padding:
        11px
        14px;

    border:
        1px solid rgba(61,38,69,.4);

    border-radius: 14px;

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

    backdrop-filter:
        blur(10px);

    display: flex;

    gap: 10px;

    align-items: center;

}


.score-label {

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;

}


.score-number {

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;

    color: var(--berry);

}


/* =========================================================
   ARCADE ROOM
========================================================= */

.arcade-room {

    width:
        min(
            1160px,
            100%
        );

    margin: auto;

    padding:
        clamp(22px, 4vw, 48px);

    position: relative;

    border:
        2px solid rgba(61,38,69,.35);

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.84),
            rgba(255,228,239,.74)
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 70px rgba(61,38,69,.15);

    overflow: hidden;

}


.arcade-room::before {

    content: "";

    position: absolute;

    width: 340px;

    height: 340px;

    top: -170px;

    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137,194,217,.45),
            transparent 70%
        );

}


.arcade-room::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    left: -120px;

    bottom: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244,156,187,.4),
            transparent 70%
        );

}


.room-header {

    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 32px;

}


.arcade-sign {

    display: inline-block;

    padding:
        13px
        22px;

    border-radius: 999px;

    background:
        var(--navy);

    color: white;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;

    letter-spacing: 1px;

    box-shadow:
        0 7px 18px rgba(3,4,94,.18);

}


.room-header p {

    margin:
        16px 0 0;

    color: var(--plum-light);

    font-size: 13px;

}


/* =========================================================
   MACHINES
========================================================= */

.machines {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 17px;

}


.machine {

    position: relative;

    min-height: 335px;

    padding:
        11px;

    border:
        1.5px solid rgba(61,38,69,.58);

    border-radius: 25px;

    color: var(--plum);

    cursor: pointer;

    box-shadow:
        0 10px 22px var(--shadow);

    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    will-change: transform, box-shadow;

    overflow: hidden;

}


.machine:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 32px rgba(61,38,69,.18);

}


.machine::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.35),
            transparent 45%
        );

}


.machine-claw {

    background:
        linear-gradient(
            160deg,
            #f49cbb,
            #ffe1ec
        );

}


.machine-mystery {

    background:
        linear-gradient(
            160deg,
            #89c2d9,
            #e0f7ff
        );

}


.machine-photo {

    background:
        linear-gradient(
            160deg,
            #fbb02d,
            #fff0ce
        );

}


.machine-jukebox {

    background:
        linear-gradient(
            160deg,
            #bacdb0,
            #eff5eb
        );

}


.machine-letter {

    background:
        linear-gradient(
            160deg,
            #caa8bf,
            #f0e2ed
        );

}


.machine-name {

    position: relative;

    z-index: 2;

    padding:
        9px
        6px;

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

    border:
        1px solid rgba(61,38,69,.4);

    border-radius: 12px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 6.5px;

    text-align: center;

}


.machine-window {

    height: 185px;

    margin-top: 9px;

    position: relative;

    overflow: hidden;

    border:
        1.5px solid rgba(61,38,69,.55);

    border-radius: 17px;

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

}


.machine-controls {

    margin:
        10px auto
        5px;

    display: flex;

    min-height: 34px;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


.joystick {

    width: 17px;

    height: 27px;

    border-radius: 12px;

    background:
        var(--berry);

    position: relative;

}


.joystick::before {

    content: "";

    width: 13px;

    height: 13px;

    position: absolute;

    left: 2px;

    top: -6px;

    border-radius: 50%;

    background:
        #ff5d91;

}


.control-button {

    width: 27px;

    height: 27px;

    border-radius: 50%;

    background:
        var(--orange);

    border:
        1px solid var(--plum);

}


.round-button {

    min-width: 62px;

    padding:
        7px
        8px;

    border-radius: 999px;

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

    border:
        1px solid rgba(61,38,69,.45);

    font-size: 7px;

    font-family:
        "Press Start 2P",
        monospace;

}


.machine-title {

    position: relative;

    z-index: 2;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7.5px;

    line-height: 1.6;

}


.machine-description {

    margin-top: 6px;

    font-size: 10px;

    color: var(--plum-light);

}


/* =========================================================
   CLAW PREVIEW
========================================================= */

.claw-arm-preview {

    position: absolute;

    top: 7px;

    left: 50%;

    transform:
        translateX(-50%);

}


.claw-rope {

    width: 3px;

    height: 65px;

    margin: auto;

    background:
        var(--plum);

}


.claw-hand-preview {

    width: 39px;

    height: 30px;

    display: flex;

    justify-content: center;

    gap: 2px;

}


.claw-hand-preview span {

    width: 5px;

    height: 21px;

    border-radius: 4px;

    background:
        var(--plum);

    transform:
        rotate(
            calc(
                (var(--i) - 2) * 12deg
            )
        );

}


.toy {

    position: absolute;

    bottom: 14px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--berry);

    animation:
        littleFloat
        2.8s
        ease-in-out
        infinite;

}


.toy svg {

    width: 34px;

    height: 34px;

}


.toy-a {

    left: 15px;

}


.toy-b {

    left: 90px;

    color: var(--orange);

    animation-delay: .5s;

}


.toy-c {

    right: 18px;

    animation-delay: 1s;

}


.plush-head {

    width: 39px;

    height: 36px;

    border-radius: 43%;

    background:
        #f6a9c5;

    position: relative;

    border:
        1px solid rgba(61,38,69,.55);

}


.plush-ear {

    position: absolute;

    top: -5px;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background:
        #f6a9c5;

    border:
        1px solid rgba(61,38,69,.55);

}


.plush-ear.left {

    left: 1px;

}


.plush-ear.right {

    right: 1px;

}


.plush-eye {

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        var(--plum);

    top: 16px;

}


.plush-eye.left {

    left: 11px;

}


.plush-eye.right {

    right: 11px;

}


.plush-mouth {

    position: absolute;

    width: 8px;

    height: 4px;

    left: 50%;

    bottom: 8px;

    transform:
        translateX(-50%);

    border-bottom:
        1.5px solid var(--plum);

    border-radius:
        0 0 10px 10px;

}


@keyframes littleFloat {

    50% {

        transform:
            translateY(-7px)
            rotate(3deg);

    }

}


/* =========================================================
   CAPSULE
========================================================= */

.mystery-window {

    display: flex;

    justify-content: center;

    align-items: center;

}


.capsule {

    width: 90px;

    height: 116px;

    position: relative;

    filter:
        drop-shadow(
            0 10px 10px
            rgba(61,38,69,.14)
        );

}


.capsule-top,
.capsule-bottom {

    position: absolute;

    left: 0;

    width: 100%;

    height: 58px;

    border:
        2px solid var(--plum);

}


.capsule-top {

    top: 0;

    border-radius:
        50px
        50px
        12px
        12px;

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

}


.capsule-bottom {

    bottom: 0;

    border-radius:
        12px
        12px
        50px
        50px;

    background:
        var(--pink);

}


.question-mark {

    position: absolute;

    left: 50%;

    top: 50%;

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

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 27px;

    color: var(--berry);

}


/* =========================================================
   PHOTO MACHINE
========================================================= */

.photo-window {

    display: flex;

    align-items: center;

    justify-content: center;

}


.photo-screen {

    width: 100px;

    height: 88px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #c9f0fb,
            #ffe1ec
        );

    border:
        2px solid var(--plum);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--berry);

}


.photo-screen svg {

    width: 42px;

    height: 42px;

}


.photo-flash {

    position: absolute;

    width: 25px;

    height: 25px;

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

    clip-path:
        polygon(
            50% 0,
            61% 36%,
            100% 50%,
            61% 61%,
            50% 100%,
            39% 61%,
            0 50%,
            39% 36%
        );

    animation:
        flashMove
        3s
        ease-in-out
        infinite;

}


@keyframes flashMove {

    0%,
    75% {

        opacity: 0;

        transform:
            scale(.4);

    }

    82% {

        opacity: 1;

        transform:
            scale(1);

    }

    90%,
    100% {

        opacity: 0;

        transform:
            scale(.4);

    }

}


/* =========================================================
   JUKEBOX
========================================================= */

.jukebox-window {

    display: flex;

    justify-content: center;

    align-items: center;

}


.vinyl {

    width: 105px;

    height: 105px;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            #30305e 0 3px,
            #1b1b4b 4px 7px
        );

    border:
        2px solid var(--plum);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 10px 18px rgba(61,38,69,.16);

}


.vinyl-center {

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background:
        var(--pink);

    border:
        3px solid var(--cream);

}


/* =========================================================
   LETTER MACHINE
========================================================= */

.letter-window {

    display: flex;

    align-items: center;

    justify-content: center;

}


.envelope-art {

    width: 88px;

    height: 72px;

    color: var(--berry);

}


.locked-machine {

    cursor: not-allowed;

}


.lock-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background:
        rgba(61,38,69,.32);

    backdrop-filter:
        blur(2px);

    color: white;

    border-radius: 25px;

}


.lock-circle {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: var(--plum);

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;

}


.lock-overlay > span {

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;

}


/* =========================================================
   COLLECTION
========================================================= */

.collection-panel {

    width: min(500px, 100%);

    margin:
        40px
        auto
        0;

    padding:
        17px
        20px;

    border:
        1px solid rgba(61,38,69,.32);

    border-radius: 20px;

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

    position: relative;

    z-index: 2;

}


.collection-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;

}


.collection-items {

    margin-top: 14px;

    display: grid;

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

    gap: 9px;

}


.collection-item {

    min-height: 55px;

    border:
        1px dashed rgba(61,38,69,.45);

    border-radius: 14px;

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

    display: flex;

    justify-content: center;

    align-items: center;

    font-family:
        "Press Start 2P",
        monospace;

    color:
        rgba(61,38,69,.35);

    transition:
        .35s ease;

}


.collection-item.unlocked {

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #ffe1ec
        );

    border:
        1px solid var(--pink);

    color:
        var(--berry);

    transform:
        translateY(-3px);

    box-shadow:
        0 7px 16px rgba(244,156,187,.16);

}


/* =========================================================
   MODAL
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(3,4,94,.35);

    backdrop-filter:
        blur(9px);

}


.modal-card {

    width:
        min(
            710px,
            100%
        );

    max-height:
        91vh;

    overflow-y:
        auto;

    position: relative;

    padding:
        38px
        28px
        32px;

    border:
        2px solid rgba(61,38,69,.45);

    border-radius:
        30px;

    background:
        var(--cream);

    box-shadow:
        0 28px 65px rgba(61,38,69,.2);

    animation:
        modalIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;

}


@keyframes modalIn {

    from {

        opacity: 0;

        transform:
            scale(.93)
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


.close-button {

    position: absolute;

    top: 13px;

    right: 13px;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background:
        rgba(61,38,69,.07);

    color: var(--plum);

    cursor: pointer;

}


.close-button svg {

    width: 16px;

    height: 16px;

    margin: auto;

}


/* =========================================================
   GAME GENERAL
========================================================= */

.game-screen {

    text-align: center;

}


.game-label {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--berry);

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;

    letter-spacing: 1px;

}


.game-screen h2 {

    margin:
        0
        0
        9px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 16px;

    line-height: 1.6;

}


.game-screen > p {

    margin-top: 0;

    color: var(--plum-light);

    font-size: 13px;

}


.game-message {

    min-height: 20px;

    margin-top: 16px;

    color: var(--berry);

    font-weight: 700;

    font-size: 12px;

}


/* =========================================================
   CLAW GAME
========================================================= */

.claw-game {

    height: 320px;

    margin:
        22px
        0;

    position: relative;

    overflow: hidden;

    border:
        1.5px solid rgba(61,38,69,.5);

    border-radius:
        21px;

    background:
        linear-gradient(
            180deg,
            #dff5fc,
            #a9d8e7
        );

}


.game-claw {

    position: absolute;

    top: 10px;

    left: 42%;

    width: 48px;

    transition:
        left 0.3s ease-in-out,
        top 0.7s cubic-bezier(.2,.8,.2,1);

}


.game-rope {

    width: 3px;

    height: 95px;

    margin:
        0 auto;

    background:
        var(--plum);

}


.game-claw-hand {

    width: 48px;

    height: 40px;

    display: flex;

    justify-content: center;

    gap: 3px;

}


.game-claw-hand span {

    width: 7px;

    height: 28px;

    background:
        var(--plum);

    border-radius:
        4px;

}


.game-claw-hand span:nth-child(1) {

    transform:
        rotate(-22deg);

}


.game-claw-hand span:nth-child(3) {

    transform:
        rotate(22deg);

}


.game-prizes {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 26px;

    display: flex;

    justify-content:
        space-around;

    align-items:
        flex-end;

}


.game-prize {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

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

}


.game-prize svg {

    width: 38px;

    height: 38px;

}


.prize-one {

    color: var(--berry);

}


.prize-two {

    color: var(--orange);

}


.prize-four {

    color: var(--navy);

}


.mini-plush {

    width: 44px;

    height: 40px;

    position: relative;

    border-radius: 43%;

    background:
        #f49cbb;

    border:
        1px solid var(--plum);

}


.mini-plush::before,
.mini-plush::after {

    content: "";

    width: 14px;

    height: 14px;

    position: absolute;

    top: -4px;

    border-radius: 50%;

    background:
        #f49cbb;

    border:
        1px solid var(--plum);

}


.mini-plush::before {

    left: 2px;

}


.mini-plush::after {

    right: 2px;

}


.game-controls {

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    gap: 10px;

}


.secondary-button {

    width: 48px;

    height: 44px;

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid var(--plum);

    border-radius:
        12px;

    background:
        white;

    color:
        var(--plum);

    cursor:
        pointer;

}


.secondary-button svg {

    width: 20px;

    height: 20px;

}


.small-button {

    min-width:
        110px;

}


/* =========================================================
   MYSTERY CAPSULE
========================================================= */

.mystery-capsule-big {

    width:
        130px;

    height:
        170px;

    margin:
        24px
        auto;

    position:
        relative;

    transition:
        transform .2s ease;

}


.mystery-capsule-big.shake {

    animation:
        capsuleShake
        .45s
        infinite;

}


@keyframes capsuleShake {

    0%,
    100% {

        transform:
            rotate(0);

    }

    25% {

        transform:
            translateX(-7px)
            rotate(-5deg);

    }

    75% {

        transform:
            translateX(7px)
            rotate(5deg);

    }

}


.mystery-capsule-big .capsule-top,
.mystery-capsule-big .capsule-bottom {

    width: 100%;

    height: 85px;

}


.mystery-capsule-big .capsule-top {

    border-radius:
        80px
        80px
        15px
        15px;

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

}


.mystery-capsule-big .capsule-bottom {

    border-radius:
        15px
        15px
        80px
        80px;

    background:
        linear-gradient(
            135deg,
            #f49cbb,
            #ff71a8
        );

}


.big-question {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        36px;

    color:
        var(--berry);

}


.rarity-list {

    display:
        grid;

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

    gap:
        8px;

    width:
        min(
            420px,
            100%
        );

    margin:
        0
        auto
        23px;

}


.rarity {

    padding:
        10px
        6px;

    border-radius:
        13px;

    border:
        1px solid rgba(61,38,69,.28);

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.rarity span {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

}


.rarity strong {

    font-size:
        11px;

}


.common {

    background:
        #ffffff;

}


.rare {

    background:
        #dff5fc;

}


.ssr {

    background:
        #ffe1ec;

}


.reward-result {

    margin-top:
        25px;

    padding:
        20px;

    border:
        1px solid rgba(61,38,69,.25);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #ffe8f0
        );

    animation:
        rewardReveal
        .6s
        ease;

}


@keyframes rewardReveal {

    from {

        opacity: 0;

        transform:
            scale(.85);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


.reward-rarity {

    display:
        inline-block;

    padding:
        7px
        11px;

    border-radius:
        999px;

    background:
        var(--navy);

    color:
        white;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

}


.reward-art {

    width:
        100px;

    height:
        100px;

    margin:
        16px auto;

    color:
        var(--berry);

}


.reward-art svg {

    width:
        100%;

    height:
        100%;

}


.reward-result h3 {

    margin:
        10px
        0 5px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        10px;

    line-height:
        1.6;

}


.reward-result p {

    margin: 0;

    font-size:
        12px;

    color:
        var(--plum-light);

}


/* =========================================================
   PHOTO BOOTH
========================================================= */

.frame-selector {

    margin:
        22px
        auto
        15px;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        7px;

}


.frame-option {

    padding:
        9px
        11px;

    border:
        1px solid rgba(61,38,69,.3);

    border-radius:
        999px;

    background:
        white;

    color:
        var(--plum);

    font-size:
        9px;

    cursor:
        pointer;

}


.frame-option.active {

    background:
        var(--berry);

    color:
        white;

}


.upload-button {

    display:
        inline-block;

    padding:
        11px
        15px;

    border:
        1px solid var(--plum);

    border-radius:
        999px;

    background:
        var(--blue);

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

}


.upload-button input {

    display:
        none;

}


.photo-strip {

    width:
        285px;

    min-height:
        335px;

    margin:
        22px
        auto;

    padding:
        12px
        12px
        42px;

    position:
        relative;

    border:
        1px solid var(--plum);

    background:
        white;

    box-shadow:
        0 12px 25px rgba(61,38,69,.11);

    overflow:
        hidden;

}


.photo-strip.cotton {

    background:
        linear-gradient(
            180deg,
            #fff6fa,
            #ffd9e7
        );

}


.photo-strip.cosmic {

    background:
        linear-gradient(
            180deg,
            #dff5fc,
            #d8c4e9
        );

}


.photo-strip.birthday {

    background:
        linear-gradient(
            180deg,
            #fff7de,
            #ffe0eb
        );

}


.photo-placeholder {

    width:
        100%;

    height:
        275px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #fbe3ed,
            #dff6fc
        );

    color:
        var(--plum-light);

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

}


.photo-strip img {

    display:
        none;

    width:
        100%;

    height:
        275px;

    object-fit:
        cover;

}


.photo-caption {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        12px;

    text-align:
        center;

    font-family:
        "Press Start 2P",
        monospace;

    color:
        var(--berry);

    font-size:
        7px;

}


.photo-decoration {

    position:
        absolute;

    width:
        24px;

    height:
        24px;

}


.photo-decoration svg {

    width:
        100%;

    height:
        100%;

}


.photo-star-one {

    top:
        17px;

    left:
        17px;

    color:
        var(--orange);

}


.photo-star-two {

    top:
        17px;

    right:
        17px;

    color:
        var(--pink-bright);

}


.photo-heart {

    bottom:
        28px;

    right:
        16px;

    color:
        var(--berry);

}


/* =========================================================
   JUKEBOX
========================================================= */

.jukebox-player {

    width:
        min(
            500px,
            100%
        );

    margin:
        23px
        auto;

    padding:
        25px;

    border:
        1px solid rgba(61,38,69,.27);

    border-radius:
        23px;

    background:
        linear-gradient(
            135deg,
            #dff6fc,
            #ffe5ef
        );

}


.record {

    width:
        132px;

    height:
        132px;

    margin:
        0
        auto
        20px;

    border-radius:
        50%;

    background:
        repeating-radial-gradient(
            circle,
            #34345f 0 3px,
            #1c1c4f 4px 7px
        );

    border:
        3px solid var(--plum);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    animation:
        spinRecord
        4s
        linear
        infinite;

    animation-play-state:
        paused;

}


.record.playing {

    animation-play-state:
        running;

}


.record-center {

    width:
        33px;

    height:
        33px;

    border-radius:
        50%;

    background:
        var(--pink);

    border:
        3px solid white;

}


@keyframes spinRecord {

    to {

        transform:
            rotate(
                360deg
            );

    }

}


.now-playing {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.now-playing span {

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        6px;

    color:
        var(--berry);

}


.now-playing strong {

    font-size:
        17px;

}


.now-playing small {

    font-size:
        11px;

    color:
        var(--plum-light);

}


.music-controls {

    margin-top:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

}


.music-controls button {

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--plum);

    border-radius:
        50%;

    background:
        white;

    color:
        var(--plum);

    cursor:
        pointer;

}


.music-controls button svg {

    width:
        15px;

    height:
        15px;

    margin:
        auto;

}


.music-controls .play-button {

    background:
        var(--berry);

    color:
        white;

}


.playlist {

    width:
        min(
            500px,
            100%
        );

    margin:
        0
        auto;

    display:
        grid;

    gap:
        8px;

}


.song {

    width:
        100%;

    padding:
        12px;

    border:
        1px solid rgba(61,38,69,.3);

    border-radius:
        12px;

    background:
        white;

    color:
        var(--plum);

    text-align:
        left;

    font-size:
        9px;

    cursor:
        pointer;

}


.song:hover {

    background:
        var(--pink-light);

}


.active-song {

    border-color:
        var(--berry);

    color:
        var(--berry);

}


.locked-song {

    opacity:
        .45;

    cursor:
        not-allowed;

}


/* =========================================================
   LETTER
========================================================= */

.letter-paper {

    width:
        min(
            560px,
            100%
        );

    margin:
        25px auto
        0;

    padding:
        35px 30px;

    position:
        relative;

    background:
        #fffdf8;

    border:
        1px dashed var(--pink);

    text-align:
        left;

    line-height:
        1.8;

    box-shadow:
        0 12px 25px rgba(61,38,69,.08);

}


.letter-sticker {

    position:
        absolute;

    right:
        20px;

    top:
        17px;

    width:
        28px;

    height:
        28px;

    color:
        var(--berry);

}


.letter-small {

    margin-top:
        0;

}


.signature {

    margin-top:
        30px;

    color:
        var(--berry);

}


/* =========================================================
   FINAL
========================================================= */

.completion-stars {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        var(--orange);

}


.completion-stars svg {

    width:
        25px;

    height:
        25px;

}


.final-card {

    width:
        min(
            320px,
            100%
        );

    margin:
        25px
        auto;

    padding:
        20px;

    display:
        grid;

    gap:
        20px;

    border:
        1px solid rgba(61,38,69,.3);

    border-radius:
        18px;

    background:
        white;

}


.final-card > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size:
        7px;

}


.final-card strong {

    font-size:
        16px;

    color:
        var(--berry);

}


.final-illustration {

    width:
        130px;

    height:
        120px;

    margin:
        20px auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.final-plush {

    width:
        85px;

    height:
        76px;

    position:
        relative;

    border-radius:
        46%;

    background:
        linear-gradient(
            145deg,
            #f49cbb,
            #ffbed4
        );

    border:
        2px solid var(--plum);

    animation:
        finalFloat
        2.3s
        ease-in-out
        infinite;

}


.ear {

    position:
        absolute;

    width:
        28px;

    height:
        28px;

    top:
        -10px;

    border-radius:
        50%;

    background:
        #f49cbb;

    border:
        2px solid var(--plum);

}


.ear-left {

    left:
        4px;

}


.ear-right {

    right:
        4px;

}


.eye {

    position:
        absolute;

    top:
        31px;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--plum);

}


.eye-left {

    left:
        22px;

}


.eye-right {

    right:
        22px;

}


.mouth {

    width:
        12px;

    height:
        7px;

    position:
        absolute;

    left:
        50%;

    bottom:
        19px;

    transform:
        translateX(-50%);

    border-bottom:
        2px solid var(--plum);

    border-radius:
        0 0 20px 20px;

}


@keyframes finalFloat {

    50% {

        transform:
            translateY(-9px)
            rotate(3deg);

    }

}


.final-message {

    color:
        var(--berry) !important;

    font-weight:
        800;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .machines {

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

    }

}


@media (max-width: 760px) {

    #arcade {

        padding:
            14px
            14px
            40px;

    }


    .machines {

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

        gap:
            12px;

    }


    .machine {

        min-height:
            300px;

    }


    .machine-window {

        height:
            155px;

    }


    .topbar {

        align-items:
            flex-start;

    }


    .score-box {

        padding:
            9px
            11px;

    }

}


@media (max-width: 470px) {

    .start-card {

        padding:
            35px
            20px;

        border-radius:
            30px;

    }


    .title-small {

        font-size:
            11px;

    }


    .title-big {

        font-size:
            22px;

    }


    .subtitle {

        font-size:
            14px;

    }


    .primary-button {

        min-width:
            160px;

        font-size:
            12px;

    }


    .arcade-room {

        padding:
            20px
            12px;

        border-radius:
            25px;

    }


    .arcade-sign {

        font-size:
            7px;

        padding:
            11px
            14px;

    }


    .room-header p {

        font-size:
            11px;

    }


    .machines {

        gap:
            9px;

    }


    .machine {

        min-height:
            255px;

        padding:
            7px;

        border-radius:
            18px;

    }


    .machine-window {

        height:
            125px;

    }


    .machine-name {

        font-size:
            5.5px;

    }


    .machine-title {

        font-size:
            6px;

    }


    .machine-description {

        font-size:
            8px;

    }


    .toy-a {

        left:
            8px;

    }


    .toy-b {

        left:
            44px;

    }


    .toy-c {

        right:
            9px;

    }


    .toy svg {

        width:
            28px;

        height:
            28px;

    }


    .collection-panel {

        margin-top:
            25px;

    }


    .modal-card {

        padding:
            35px
            17px
            25px;

        border-radius:
            24px;

    }


    .game-screen h2 {

        font-size:
            12px;

    }


    .claw-game {

        height:
            260px;

    }


    .game-prize {

        width:
            43px;

        height:
            43px;

    }


    .photo-strip {

        width:
            250px;

    }

}