:root {
    --game-width: 960px;
    --game-bg: #FF4A51;
    --white: #fff;
    --muted: rgba(255, 255, 255, 0.65);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--game-bg);
    color: var(--white);

    font-family:
        Inter Tight,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    display: flex;
    justify-content: center;
}

button {
    font: inherit;
}

.game-shell {
    width: 100%;
    max-width: var(--game-width);
    min-height: 100dvh;

    position: relative;
    overflow: hidden;

    background-color: #FF4A51;
}

#game-screen {
    position: relative;
    width: 100%;
    min-height: 100dvh;

    overflow: hidden;
}

#stickers-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#game-header {
    position: absolute;
    z-index: 1000;

    top: max(18px, env(safe-area-inset-top));
    left: 50%;

    transform: translateX(-50%);

    padding: 10px 18px;
    border-radius: 999px;

    background: #F6FF6E;
    color: #FF4A51;
    font-size: 24px;

    font-weight: 700;

    letter-spacing: 0.02em;

    pointer-events: none;
    user-select: none;
}

.sticker {
    position: absolute;
    left: 0;
    top: 0;

    width: var(--size);
    height: var(--size);

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    will-change: transform, opacity;
}

.sticker img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.sticker.caught {
    animation:
        sticker-caught 300ms cubic-bezier(.2, .8, .3, 1) forwards;

    pointer-events: none;
}

.sticker.collapsing {
    animation:
        sticker-collapse 550ms cubic-bezier(.2, .8, .3, 1) forwards;

    pointer-events: none;
}

@keyframes sticker-caught {
    0% {
        opacity: 1;
        transform-origin: center;
    }

    25% {
        opacity: 1;
        scale: 0.75 1.15;
    }

    55% {
        opacity: 1;
        scale: 1.15 0.25;
    }

    100% {
        opacity: 0;
        scale: 0 0;
    }
}

@keyframes sticker-collapse {
    0% {
        opacity: 1;
        scale: 1;
        rotate: 0deg;
    }

    40% {
        opacity: 1;
        scale: 1.08 0.18;
    }

    100% {
        opacity: 0;
        scale: 0 0;
    }
}

#keyboard-zones {
    display: none;

    position: absolute;
    z-index: 900;

    left: 0;
    right: 0;
    bottom: 0;

    height: 200px;

    pointer-events: none;
}

.keyboard-zone {
    position: absolute;
    top: 0;
    bottom: 0;

    width: 25%;

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

    padding-bottom: 22px;

    background:
        linear-gradient(to top,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.015));

    border-top: 2px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.08);

    transition:
        background 80ms ease,
        border-color 80ms ease,
        box-shadow 80ms ease;
}

.keyboard-zone:first-child {
    left: 0;
}

.keyboard-zone:nth-child(2) {
    left: 25%;
}

.keyboard-zone:nth-child(3) {
    left: 50%;
}

.keyboard-zone:nth-child(4) {
    left: 75%;
}

.keyboard-zone:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.keyboard-zone.pressed {
    background:
        linear-gradient(to top,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.055));

    border-top-color: rgba(255, 255, 255, 0.55);

    box-shadow:
        inset 0 0 40px rgba(255, 255, 255, 0.06),
        0 -8px 35px rgba(255, 255, 255, 0.07);
}

.keyboard-label {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;

    background: rgba(92, 5, 5, 0.3);

    font-size: 25px;
    font-weight: 700;

    transition:
        transform 80ms ease,
        background 80ms ease;
}

.keyboard-zone.pressed .keyboard-label {
    transform: translateY(4px) scale(0.94);

    background: rgba(255, 255, 255, 0.16);

    border-color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    #keyboard-zones {
        display: block;
    }
}

#start-screen {
    position: absolute;
    z-index: 2000;
    inset: 0;

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

    padding: 32px;

    background-color: #FF4A51;

    transition:
        opacity 400ms ease,
        visibility 400ms ease;
}

#start-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.start-card {
    width: min(100%, 520px);
    text-align: center;
}

.start-title {
    margin: 0 0 56px;

    font-size: clamp(60px, 14vw, 116px);
    line-height: 0.9;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.primary-button {
    border: 0;
    border-radius: 999px;

    padding: 16px 28px;

    color: #FF4A51;
    background: #F6FF6E;

    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0px 21px 100px rgba(201, 35, 41, 1);
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

.primary-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(106, 3, 3, 0.35),
        0 0 0 1px rgba(65, 21, 21, 0.141);
}

.primary-button:active {
    transform: scale(.97);
}

#invite-screen {
    position: absolute;
    z-index: 3000;
    inset: 0;

    display: flex;
    justify-content: center;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        max(40px, env(safe-area-inset-top)) 24px max(50px, env(safe-area-inset-bottom));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background-color: #FF4A51;
}

#invite-screen.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.invite-content {
    width: min(100%, 680px);

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

    padding: 40px 0 80px;
}

.invite-logo {
    width: min(62vw, 250px);
    margin-bottom: 42px;

    opacity: 0;
    transform: translateY(20px) scale(.96);

    transition:
        opacity 500ms ease,
        transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.invite-logo.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.invite-line {
    width: 100%;
    margin: 0 0 16px;

    text-align: left;

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 550ms ease,
        transform 550ms cubic-bezier(.2, .8, .2, 1);
}

.invite-line.show {
    opacity: 1;
    transform: translateY(0);
}

.invite-main {
    font-size: clamp(60px, 14vw, 116px);
    line-height: 0.9;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    color: #F6FF6E;
    letter-spacing: -0.04em;

    margin-top: 40px;
    margin-bottom: 40px;
}

.invite-subheader {
    font-size: clamp(20px, 5vw, 31px);
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -0.04em;

    margin-top: 40px;
}

.invite-logo {
    font-size: 24px;
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -0.04em;

    text-align: center;
}


.invite-date {
    line-height: 1.1;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #F6FF6E;
    font-size: clamp(50px, 14vw, 100px);
    font-weight: 700;
}

.invite-time {
    line-height: 1.1;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #F6FF6E;
    font-size: clamp(50px, 14vw, 100px);
    font-weight: 700;
}

.invite-address {
    line-height: 1.1;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #F6FF6E;
    font-size: clamp(32px, 8vw, 60px);
    font-weight: 700;
}

#calendar-button {
    margin-top: 34px;
    margin-bottom: 34px;

    opacity: 0;
    transform: translateY(18px);

    pointer-events: none;

    transition:
        opacity 550ms ease,
        transform 550ms cubic-bezier(.2, .8, .2, 1);
}

#calendar-button.show {
    opacity: 1;
    transform: translateY(0);

    pointer-events: auto;
}

@media (max-width: 500px) {
    .start-card {
        padding: 0 10px;
    }

    #start-screen {
        padding: 24px;
    }

    .invite-content {
        padding-top: 24px;
    }

    .invite-logo {
        margin-bottom: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}