.page-game .main {
    justify-content: center;
    padding: calc(var(--u) * 45) 0 calc(var(--u) * 82);
}

.game-rules {
    position: relative;
    z-index: 2;
    width: calc(var(--u) * 205);
    animation: rules-in .6s both cubic-bezier(.3, 1.4, .5, 1);
}

/*
 * Carte à gratter : le résultat est sous la gourde, découpé à sa silhouette
 * (mask) tant que le grattage n'est pas terminé.
 */
.scratch {
    position: relative;
    width: calc(var(--u) * 375);
    aspect-ratio: 1000 / 1025;
    margin-top: calc(var(--u) * -8);
    animation: gourde-in .7s .15s both cubic-bezier(.3, 1.3, .5, 1);
}

.scratch-result,
.scratch-under,
.scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* L'image complète du résultat n'apparaît qu'à la révélation */
.scratch-result {
    view-transition-name: resultat;
}

.scratch:not(.is-revealed) .scratch-result {
    visibility: hidden;
}

.scratch-canvas {
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.scratch-canvas:active {
    cursor: grabbing;
}

.scratch-canvas:focus-visible {
    outline: none;
}

.scratch.is-ready:not(.is-started) .scratch-under,
.scratch.is-ready:not(.is-started) .scratch-canvas {
    animation: wobble 2.6s 1s ease-in-out infinite;
}

.scratch-hint {
    position: absolute;
    left: 50%;
    bottom: 14%;
    padding: calc(var(--u) * 4) calc(var(--u) * 14);
    border-radius: calc(var(--u) * 20);
    background: rgb(113 129 74 / .92);
    color: var(--cream);
    font-size: calc(var(--u) * 17);
    font-weight: 600;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    animation: hint 1.6s 1.2s ease-in-out infinite both;
    transition: opacity .3s;
}

.scratch.is-started .scratch-hint,
.scratch:not(.is-ready) .scratch-hint {
    opacity: 0;
}

.scratch.is-revealed .scratch-result {
    animation: reveal .7s both cubic-bezier(.3, 1.6, .5, 1);
}

.scratch.is-revealed .scratch-under,
.scratch.is-revealed .scratch-canvas {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}

.game-noscript {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 18);
    font-weight: 600;
}

@keyframes rules-in {
    from { opacity: 0; transform: translateY(calc(var(--u) * -40)); }
    to { opacity: 1; transform: none; }
}

@keyframes gourde-in {
    from { opacity: 0; transform: translateY(calc(var(--u) * 80)) scale(.85); }
    to { opacity: 1; transform: none; }
}

@keyframes wobble {
    0%, 70%, 100% { transform: rotate(0); }
    76% { transform: rotate(-2deg); }
    82% { transform: rotate(2deg); }
    88% { transform: rotate(-1.5deg); }
    94% { transform: rotate(1deg); }
}

@keyframes hint {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(calc(var(--u) * -6)); }
}

@keyframes reveal {
    0% { transform: scale(1); }
    40% { transform: scale(1.08) rotate(-2deg); }
    100% { transform: scale(1); }
}