:root {
    --color-bg-dark: #0a0a1a;
    --color-bg-mid: #1a0a2e;
    --color-bg-light: #0a1a2a;
    --color-primary: #f0f;
    --color-secondary: #a0f;
    --color-accent: #0ff;
    --color-heart: #f55;
    /* Polices Système - Zéro importation */
    --font-heading: system-ui, -apple-system, sans-serif;
    --font-body:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --trans-normal: 300ms ease;
    --trans-slow: 500ms ease;
}

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

body {
    background: linear-gradient(
        135deg,
        var(--color-bg-dark),
        var(--color-bg-mid),
        var(--color-bg-light)
    );
    font-family: var(--font-body);
    min-height: 100dvh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1px 1px at 20px 30px, #fff3, transparent),
        radial-gradient(1px 1px at 150px 80px, #fff2, transparent);
    background-size: 200px 200px;
    animation: twinkle 8s infinite;
    z-index: 0;
}

.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: inherit;
    z-index: 9999;
    transition:
        opacity var(--trans-slow),
        visibility var(--trans-slow);
}

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

.loading-spinner {
    width: 40px;
    aspect-ratio: 1;
    border: 3px solid #fff1;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#btn-start {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-secondary)
    );
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    z-index: 3000;
    animation: pulse 2s infinite;
}

.compliment {
    position: absolute;
    padding: 10px 20px;
    font-weight: 800;
    border-radius: 50px;
    border: 2px solid currentColor;
    background: #ffffff1a;
    backdrop-filter: blur(8px);
    color: #fff;
    z-index: 100;
    will-change: transform;
}

#final-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 95%;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#final-message.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.message-text {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 12vw, 7.5rem); /* TEXTE XXL */
    line-height: 1;
    font-weight: 900;
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-heart),
        var(--color-accent)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 3s linear infinite;
    display: block;
}

.message-emoji {
    font-size: 5rem;
    display: block;
    margin-top: 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes twinkle {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
@keyframes pulse {
    0%,
    100% {
        box-shadow: 0 0 20px #f0f6;
    }
    50% {
        box-shadow: 0 0 40px #f0fa;
    }
}

.heart {
    position: fixed;
    pointer-events: none;
    animation: heartFloat 2s ease-out forwards;
}
@keyframes heartFloat {
    to {
        opacity: 0;
        transform: translateY(-150px) rotate(360deg) scale(0.5);
    }
}