/* Reviens — scratch-card skin. « Le petit théâtre » cut-paper: cream prize card
 * with a dashed frame under a brand foil, hard offset shadow, gold pop on win. */
.m10k-scratch{
    position:relative;
    width:min(90vw,360px);height:210px;
    margin:12px auto 28px;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    /* vraies perforations : le fond passe a travers, quel qu'il soit.
       L'ombre decalee suit la decoupe (drop-shadow epouse la silhouette). */
    filter:drop-shadow(0 6px 10px rgba(20,15,8,.16)) drop-shadow(0 22px 40px rgba(20,15,8,.24));
    -webkit-mask:radial-gradient(circle at 0 50%,transparent 10px,#000 10.6px),
        radial-gradient(circle at 100% 50%,transparent 10px,#000 10.6px);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle at 0 50%,transparent 10px,#000 10.6px),
        radial-gradient(circle at 100% 50%,transparent 10px,#000 10.6px);
    mask-composite:intersect;
}
/* l'anneau encre vit AU-DESSUS du contenu (une ombre interne passait SOUS le
   canvas et ne surgissait qu'a moitie gratte — le contour clignotait) ; le
   masque le decoupe aux perforations comme le reste. */
.m10k-scratch::after{
    content:"";position:absolute;inset:0;border:3px solid #2C2318;
    border-radius:16px;pointer-events:none;z-index:40;
}
.m10k-scratch.is-won{ animation:m10k-scr-win .9s ease-out forwards; }
@keyframes m10k-scr-win{
    0%  {box-shadow:0 0 0 3px #2C2318}
    40% {box-shadow:0 0 0 3px #D9A441,0 0 60px 20px color-mix(in srgb,#D9A441 55%,transparent)}
    /* le halo ne s'éteint pas : l'or reste sur la carte gagnante (#11) */
    100%{box-shadow:0 0 0 3px #D9A441,0 0 34px 8px color-mix(in srgb,#D9A441 38%,transparent)}
}
/* au gain, le liseré pointillé passe à l'or (#3/#5) */
.m10k-scratch.is-won .m10k-scratch__prize{
    border-color:#D9A441;
    box-shadow:inset 0 0 0 2.5px color-mix(in srgb, #D9A441 45%, transparent);
    transition:border-color .3s ease, box-shadow .4s ease;
    text-wrap:balance;overflow-wrap:break-word;
}
.m10k-scratch__prize{
    position:absolute;inset:10px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    padding:12px;
    border:2px dashed var(--m10k-brand-text,var(--m10k-brand));border-radius:10px;
    font-family:var(--m10k-fd);
    font-size:25px;font-weight:700;line-height:1.2;
    color:#2C2318;
    background:#fff;
}
.m10k-scratch__prize.is-long{font-size:20px}
.m10k-scratch__prize::before{
    content:"Vous avez gagné";
    font-family:var(--m10k-fb);font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--m10k-brand-text,#6E5D45);margin-bottom:8px;
}
.m10k-scratch__prize.is-q::before{content:none}   /* hide eyebrow before reveal */
.m10k-scratch__q{
    font-family:var(--m10k-fd);
    font-size:66px;color:#C9B896;
}
.m10k-scratch__canvas{
    position:absolute;inset:0;width:100%;height:100%;
    display:block;cursor:grab;
    touch-action:none;
    -webkit-user-select:none;user-select:none;
}
.m10k-scratch__canvas:active{cursor:grabbing}
.m10k-btn--reveal{margin-top:4px}

/* Foil shavings that fall from under the finger (emitted by scratch.js). */
.m10k-shaving{
    position:absolute;width:5px;height:5px;border-radius:1px;z-index:6;
    background:var(--m10k-brand);opacity:.9;pointer-events:none;
    animation:m10k-shaving .6s ease-in forwards;
}
@keyframes m10k-shaving{
    0%  {transform:translateY(0) rotate(0);opacity:.9}
    100%{transform:translate(var(--dx,0),46px) rotate(140deg);opacity:0}
}
/* à la révélation, une rangée de copeaux TOMBE et RESTE au pied de la carte —
   les traces du grattage, pas l'évaporation (#4) */
.m10k-shaving--rest{animation:m10k-shaving-rest .85s ease-in forwards}
@keyframes m10k-shaving-rest{
    0%  {transform:translateY(0) rotate(0);opacity:.9}
    78% {transform:translate(var(--dx,0),var(--dy,42px)) rotate(120deg)}
    88% {transform:translate(var(--dx,0),calc(var(--dy,42px) - 5px)) rotate(135deg)}
    100%{opacity:.85;transform:translate(var(--dx,0),var(--dy,42px)) rotate(130deg)}
}
/* Light sweep across the foil — idle attract + the "almost there" cue. */
.m10k-glint{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:16px}
.m10k-glint::before{
    content:"";position:absolute;top:-40%;bottom:-40%;width:34%;left:-45%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
    transform:skewX(-18deg);
}
.m10k-glint.is-run::before{animation:m10k-glint 1s ease}
@keyframes m10k-glint{to{left:125%}}
@media(prefers-reduced-motion:reduce){
    .m10k-shaving{animation:none;display:none}
    .m10k-glint.is-run::before{animation:none}
    .m10k-scratch.is-won{animation:none;box-shadow:0 0 0 3px #D9A441,0 0 34px 8px color-mix(in srgb,#D9A441 38%,transparent)}
}