/* Quizz Master V3 — socle commun au jeu et à l'atelier : jetons, boutons, icônes, notifications. */

:root {
    --lagoon: #0b5560;
    --lagoon-deep: #073a42;
    --bone: #f4ebdd;
    --bone-soft: #d8ccb8;
    --ink: #151413;
    --ink-soft: #3a3632;
    --sunset: #ff6b35;
    --sunset-deep: #e0521d;
    --flamingo: #ff5c9e;
    --alert: #b81d0e;
    --spot: var(--flamingo);

    --face-display: 'Anton', 'Archivo', sans-serif;
    --face-script: 'Shrikhand', 'Anton', sans-serif;
    /* Le wordmark a sa propre police : le z bouclé de Shrikhand faisait lire « Quixx Master ». */
    --face-wordmark: 'Caprasimo', 'Shrikhand', 'Anton', serif;
    --face-ui: 'Archivo', system-ui, sans-serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-stamp: cubic-bezier(0.22, 1, 0.36, 1);
    --radius: 6px;
    --gutter: clamp(1rem, 3.5vw, 3rem);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --halftone: radial-gradient(circle at center, rgb(21 20 19 / 0.5) 0.9px, transparent 1.4px);

    color-scheme: dark;
    accent-color: var(--flamingo);
}

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

/* Un élément masqué l'est toujours, quel que soit son style d'affichage. */
[hidden] { display: none !important; }

::selection { background: var(--flamingo); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--flamingo);
    outline-offset: 3px;
    border-radius: 4px;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--bone);
    color: var(--ink);
    font-weight: 700;
    border-radius: var(--radius);
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.4em;
    border: 1.5px solid currentColor;
    border-bottom-width: 3px;
    border-radius: 5px;
    font-family: var(--face-ui);
    font-weight: 700;
    font-size: 0.85em;
    text-align: center;
}

/* ---------- Boutons ---------- */

/* Le tampon orange : réservé à ce qui fait partir la musique. */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 3rem;
    padding: 0.55em 1.2em 0.5em;
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    background: var(--sunset);
    color: var(--ink);
    font-family: var(--face-display);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
    transform: rotate(-1.2deg);
    transition: transform 0.18s var(--ease-out), background-color 0.18s;
}
.stamp:hover { background: #ff7d4d; transform: rotate(-1.2deg) translateY(-2px); }
.stamp:active { transform: rotate(-1.2deg) scale(0.96); }

.button-ink {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.75rem;
    padding: 0.5em 1em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--bone);
    font-weight: 700;
}
.button-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.button-quiet, .button-quiet-light {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.75rem;
    padding: 0.5em 0.9em;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    background: transparent;
    font-weight: 600;
}
.button-quiet { color: var(--ink); }
.button-quiet:hover { background: rgb(21 20 19 / 0.08); }
.button-quiet-light { color: inherit; }
.button-quiet-light:hover { background: rgb(21 20 19 / 0.08); }

/* ---------- Notifications ---------- */

.toasts {
    position: fixed;
    z-index: 50;
    top: calc(1rem + env(safe-area-inset-top));
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    width: min(32rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;
}
.toast {
    padding: 0.7rem 1.1rem;
    background: var(--bone);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    font-weight: 700;
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.35);
    animation: toast-in 0.35s var(--ease-stamp);
}
.toast.is-error { background: var(--alert); color: var(--bone); border-color: var(--alert); }
.toast.is-leaving { animation: toast-out 0.3s ease-in forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-0.8rem) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes toast-out { to { opacity: 0; transform: translateY(-0.6rem); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}