/* Reviens — wheel skin. La scène « bijou » (direction approuvée par maquette,
 * 2026-09-02) : la peinture canvas (quartiers biseautés, jante or, vedette)
 * ET le moyeu or/émail vivent dans wheel.js ; ici la SCÈNE — ombre portée
 * douce et profonde, halo doré qui respire au repos, embrasement + salve
 * d'étincelles au gain. Par-dessus scan.css. */
/* Mobile seulement : le halo (inset -14%) depasse la coquille — on le taille
   au bord de l'ecran pour que la page ne puisse jamais osciller lateralement.
   Sur le grand ecran (coquille-telephone sur fond letterbox, aucun debord
   mesure), tailler couperait la lueur en bande dure : on laisse respirer. */
@media(max-width:759px){ .m10k-shell{overflow-x:hidden;overflow-x:clip} }
.m10k-wheel-3d{
    position:relative;
    width:min(92vw,420px);aspect-ratio:1;
    margin:10px auto 30px;
}
/* Halo doré qui respire derrière la roue — l'attirance au repos. */
.m10k-wheel-3d::before{
    content:"";position:absolute;inset:-14%;border-radius:50%;z-index:0;
    background:radial-gradient(circle,
        color-mix(in srgb, #D9A441 42%, transparent) 0%,
        color-mix(in srgb, #D9A441 14%, transparent) 40%,
        transparent 66%);
    animation:m10k-halo 3.2s ease-in-out infinite;
    pointer-events:none;
}
@keyframes m10k-halo{
    0%,100%{opacity:.65;transform:scale(.97)}
    50%    {opacity:1;transform:scale(1.04)}
}
/* Grabbable: a touch-drag flings the wheel (see wheel.js) rather than scrolling
   the page; cursor signals it's draggable on desktop. */
.m10k-wheel-stage{position:relative;width:100%;height:100%;touch-action:none;cursor:grab;}
.m10k-wheel-stage:active{cursor:grabbing;}
/* L'assiette : disque d'appui encre sous le canvas, ombre DOUCE et profonde. */
.m10k-wheel-stage::before{
    content:"";position:absolute;inset:0;border-radius:50%;z-index:0;
    background:var(--m10k-ink);
    box-shadow:0 6px 14px rgba(20,15,8,.18),
               0 30px 60px rgba(20,15,8,.30),
               inset 0 2px 0 rgba(255,255,255,.06);
}
.m10k-wheel{
    position:absolute;inset:0;width:100%;height:100%;
    border-radius:50%;z-index:1;
}
/* Gain : l'anneau d'or sort une fois (existant)… */
.m10k-wheel-stage::after{
    content:"";position:absolute;inset:-3px;border-radius:50%;z-index:2;
    pointer-events:none;border:4px solid var(--m10k-gold);opacity:0;
}
.m10k-wheel-stage.is-won::after{ animation:m10k-pop-ring .8s ease-out; }
@keyframes m10k-pop-ring{
    0%  {opacity:0;transform:scale(.92)}
    22% {opacity:1}
    100%{opacity:0;transform:scale(1.16)}
}
/* … et le sol S'EMBRASE — bloom doré large, tenu par la durée de l'anneau. */
.m10k-wheel-stage.is-won::before{
    box-shadow:0 6px 14px rgba(20,15,8,.18),
               0 30px 60px rgba(20,15,8,.30),
               0 0 110px 40px color-mix(in srgb, #D9A441 60%, transparent),
               inset 0 2px 0 rgba(255,255,255,.06);
    transition:box-shadow .35s ease;
}
/* Pointer — base CSS (repli sans JS) ; wheel.js le remplace par son chevron SVG. */
.m10k-pointer{
    position:absolute;top:-7px;left:50%;z-index:5;
    transform:translateX(-50%);transform-origin:50% 22%;
    will-change:transform;
}
.m10k-pointer span{
    display:block;width:0;height:0;
    border-left:15px solid transparent;border-right:15px solid transparent;
    border-top:30px solid var(--rbw-pointer, var(--m10k-spot));
    filter:drop-shadow(2px 4px 0 rgba(30,23,18,.42));
}
.m10k-pointer.tick{ animation:m10k-tick .11s ease-out; }
@keyframes m10k-tick{
    0%  {transform:translateX(-50%) rotate(0)}
    45% {transform:translateX(-50%) rotate(-8deg)}
    100%{transform:translateX(-50%) rotate(0)}
}
/* Teeter — the pointer hangs bent on the peg edge during the suspense hold. */
.m10k-pointer.teeter{ animation:m10k-teeter .5s ease-in-out infinite; }
@keyframes m10k-teeter{
    0%,100%{transform:translateX(-50%) rotate(-6deg)}
    50%    {transform:translateX(-50%) rotate(-2deg)}
}

/* Center hub — « Frais » : disque blanc, jonc encre, point de marque assis
   (wheel.js repeint le tout en or/émail via sa feuille injectée). */
.m10k-hub{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:54px;height:54px;border-radius:50%;z-index:4;
    background:#fff;
    box-shadow:0 0 0 3px var(--m10k-ink), 3px 4px 0 rgba(30,23,18,.24);
    display:flex;align-items:center;justify-content:center;
}
.m10k-hub::after{
    content:"";width:15px;height:15px;border-radius:50%;
    background:var(--rbw-dot, var(--m10k-spot));
    box-shadow:0 0 0 3px #fff,0 0 0 5px var(--m10k-ink);
}

/* L'étiquette du lot (costume partagé .m10k-wintag, scan.css) : elle tombe du
   pointeur — dépassement, puis repos au cœur de la roue, halo tenu par
   l'embrasement is-won existant. */
.m10k-wheel-tag{left:11%;right:11%;top:33%;transform-origin:50% -28%}
.m10k-wheel-stage.is-won .m10k-wheel-tag{animation:m10k-wheel-tag .78s cubic-bezier(.24,1.06,.4,1) .18s both}
@keyframes m10k-wheel-tag{
    0%  {opacity:0;transform:translateY(-40%) scale(.62) rotate(-3deg)}
    45% {opacity:1;transform:translateY(2.5%) scale(1) rotate(1.6deg)}
    72% {transform:translateY(0) rotate(-1deg)}
    100%{opacity:1;transform:rotate(0)}
}
@keyframes m10k-wtag-fade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
    .m10k-wheel-3d::before{animation:none;opacity:.8}
    .m10k-pointer.tick{animation:none}
    .m10k-pointer.teeter{animation:none}
    .m10k-wheel-stage.is-won::after{animation:none}
    .m10k-wheel-stage.is-won .m10k-wheel-tag{animation:m10k-wtag-fade .25s ease both}
}