/* Écran de chargement Kouiz'in « Le Buzzer » (redesign §4.5). Valeurs : design-system/project/tokens.json. */

@font-face {
    font-family: "Unbounded";
    src: url("fonts/unbounded-latin.woff2") format("woff2");
    font-weight: 500 900;
    font-display: swap;
}

:root {
    --canvas: #F3F1FA;
    --ink: #17142B;
    --ink-muted: #5B5675;
    --shadow: #17142B;
    --slot-a: #4B2BD6;
    --slot-b: #ED7118;
    --slot-c: #00A3A3;
    --slot-d: #E0398C;
    --radius-sm: 10px;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #110E22;
        --ink: #F1EFFA;
        --ink-muted: #A9A3C4;
        --shadow: rgba(0, 0, 0, 0.6);
    }
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--canvas);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
}

#compose-root {
    position: fixed;
    inset: 0;
}

#app-loader {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: var(--canvas);
    color: var(--ink);
}

.loader-wordmark {
    width: 220px;
    height: auto;
}

.loader-slots {
    display: flex;
    gap: 12px;
    /* Réserve la place de l'ombre pour que l'enfoncement ne décale rien. */
    padding-bottom: 4px;
}

.loader-slot {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 0 0 var(--shadow);
    color: #FFFFFF;
    font: 700 20px/1 "Unbounded", system-ui, sans-serif;
    animation: kouizin-buzz 1.2s ease-in-out infinite;
}

.loader-slot--a { background: var(--slot-a); }
.loader-slot--b { background: var(--slot-b); animation-delay: 0.15s; }
.loader-slot--c { background: var(--slot-c); animation-delay: 0.3s; }
.loader-slot--d { background: var(--slot-d); animation-delay: 0.45s; }

.loader-text {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-muted);
}

#unsupported {
    display: none;
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

/* Le buzzer s'enfonce de 4 px et l'ombre disparaît, puis il remonte (redesign §2.4). */
@keyframes kouizin-buzz {
    0%, 30%, 100% {
        transform: translateY(0);
        box-shadow: 0 4px 0 0 var(--shadow);
    }
    10%, 20% {
        transform: translateY(4px);
        box-shadow: 0 0 0 0 var(--shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader-slot {
        animation: none;
    }
}