/* Media10K — mystery-box skin. Loaded on top of scan.css.
 * « Frais » gift art: the box is an illustrated SVG present (dimensional brand
 * body, satin cross-ribbon, lid with a real lip, wrap pattern) — the CSS here
 * only does layout, states and motion; the ART lives in the template's SVG.
 * Soft, premium/salon aesthetic — deliberately not a casino look. */
.m10k-boxes{
    display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
    margin:10px auto 26px;width:100%;
}
.m10k-box{
    position:relative;
    width:122px;aspect-ratio:104/130;
    border:none;background:transparent;padding:0;cursor:pointer;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s ease,opacity .3s ease;
}
/* Phones: BIG boxes stacked one over the other (owner call — the grid still
   read small). Choosing scrolls a little; fine for a full-page game moment. */
@media (max-width:599px){
    .m10k-boxes{flex-direction:column;align-items:center;gap:18px}
    .m10k-box{width:min(52vw,200px)}
}
@media (min-width:600px){
    /* Bigger boxes, kept on one line, centered under the title/button. */
    .m10k-boxes{gap:30px;flex-wrap:nowrap}
    .m10k-box{width:178px}
}
.m10k-box:disabled{cursor:default}
@media (hover:hover){ .m10k-box:not(:disabled):hover{transform:translateY(-6px)} }
.m10k-box:not(:disabled):active{transform:translateY(-2px) scale(.98)}

/* Box body — the SVG carries the art; the span carries place + paper shadow. */
.m10k-box__body{
    position:absolute;left:4%;right:4%;bottom:0;height:62%;
    filter:drop-shadow(0 8px 16px rgba(20,15,8,.20));
}
/* Lid — slides/rotates open; the SVG carries the art. */
.m10k-box__lid{
    position:absolute;left:0;right:0;top:21%;height:21%;z-index:3;
    transform-origin:50% 100%;
    filter:drop-shadow(0 4px 8px rgba(20,15,8,.16));
    transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .5s ease;
}
.m10k-box__lid svg,.m10k-box__body svg{display:block;width:100%;height:100%}

/* Bow on top — gold cut-paper, the single warm accent. Fades when it opens. */
.m10k-box__bow{
    position:absolute;left:50%;top:22%;z-index:4;
    width:58%;
    transform:translate(-50%,-62%);
    transition:opacity .3s ease;
    filter:drop-shadow(0 3px 6px rgba(20,15,8,.16));
    pointer-events:none;
}
.m10k-box__bow svg{display:block;width:100%;height:auto;overflow:visible}

/* Light burst behind the opening — gold rays + glow, on-brand (not neon). */
.m10k-box__burst{
    position:absolute;left:50%;top:28%;width:118%;aspect-ratio:1;z-index:2;
    transform:translate(-50%,-50%) scale(.3) rotate(0);
    opacity:0;pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--m10k-gold) 78%,transparent) 0%, color-mix(in srgb,var(--m10k-gold) 30%,transparent) 26%, transparent 52%),
        repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--m10k-gold) 55%,transparent) 0deg 4deg, transparent 4deg 15deg);
    border-radius:50%;
    -webkit-mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 34%, transparent 66%);
    mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 34%, transparent 66%);
}
.m10k-box.is-open .m10k-box__burst{ animation:m10k-burst .95s ease-out forwards; }
@keyframes m10k-burst{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
    28% {opacity:.95}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(24deg)}
}

/* Rising sparkles (emitted by mystery.js on open). */
.m10k-spark{
    position:absolute;top:24%;width:7px;height:7px;z-index:5;pointer-events:none;
    background:var(--m10k-gold);border-radius:1px;
    box-shadow:0 0 4px color-mix(in srgb,var(--m10k-gold) 70%,transparent);
    animation:m10k-spark 1s ease-out forwards;
}
@keyframes m10k-spark{
    0%  {opacity:0;transform:translateY(6px) scale(.3) rotate(45deg)}
    25% {opacity:1}
    100%{opacity:0;transform:translateY(-58px) translateX(var(--dx,0)) scale(1) rotate(120deg)}
}
/* un tiers des éclats RETOMBE et reste posé sur le couvercle (#4) */
.m10k-spark--rest{animation:m10k-spark-rest 1.15s ease-out forwards}
@keyframes m10k-spark-rest{
    0%  {opacity:0;transform:translateY(6px) scale(.3) rotate(45deg)}
    28% {opacity:1}
    62% {transform:translateY(-34px) translateX(var(--dx,0)) rotate(100deg)}
    100%{opacity:.95;transform:translateY(-13px) translateX(var(--dx,0)) scale(.85) rotate(150deg)}
}

/* Prize — la carte de lot (costume partagé, ajusté à la boîte) qui SURGIT de
   l'ouverture : crème, jonc d'or double, kick + serif, halo d'or tenu. */
.m10k-box__prize{
    position:absolute;left:-16%;right:-16%;top:22%;z-index:6;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:42%;
    padding:9px 6px;box-sizing:border-box;
    background:#F6EFDF;
    border:2px solid #2C2318;border-radius:10px;
    box-shadow:
        inset 0 0 0 2px #F6EFDF,
        inset 0 0 0 3.5px #D9A441,
        0 6px 14px rgba(20,15,8,.18),
        0 0 38px 8px color-mix(in srgb, #D9A441 30%, transparent);
    text-align:center;color:#2C2318;
    opacity:0;transform:translateY(80%) scale(.66);
    transition:opacity .4s ease,transform .55s cubic-bezier(.2,1.5,.4,1);
    pointer-events:none;
}
.m10k-box__prize .m10k-wintag__kick{font-size:9px;letter-spacing:.13em}
.m10k-box__prize .m10k-wintag__prize{font-size:16.5px;line-height:1.12}

/* States */
.m10k-box.is-dim{opacity:.4}
.m10k-box.is-opening .m10k-box__lid{transform:translateY(-100%) rotate(-14deg);opacity:.9}
.m10k-box.is-opening{animation:m10k-box-wobble .5s ease}
.m10k-box.is-open .m10k-box__lid{transform:translateY(-165%) rotate(-22deg);opacity:0}
.m10k-box.is-open .m10k-box__bow{opacity:0}
.m10k-box.is-open .m10k-box__prize{opacity:1;transform:translateY(0) scale(1);transition-delay:.12s}
.m10k-box.is-open .m10k-box__body{ animation:m10k-box-win 1s ease-out forwards; }
@keyframes m10k-box-win{
    0%  {filter:drop-shadow(0 8px 16px rgba(20,15,8,.20))}
    40% {filter:drop-shadow(0 8px 16px rgba(20,15,8,.20)) drop-shadow(0 0 34px color-mix(in srgb,#D9A441 62%,transparent))}
    /* le halo ne s'éteint pas : l'or reste sur la boîte gagnante (#11) */
    100%{filter:drop-shadow(0 10px 20px rgba(20,15,8,.24)) drop-shadow(0 0 24px color-mix(in srgb,#D9A441 42%,transparent))}
}
@keyframes m10k-box-wobble{
    0%,100%{transform:translateY(-6px) rotate(0)}
    25%{transform:translateY(-6px) rotate(-3deg)}
    75%{transform:translateY(-6px) rotate(3deg)}
}
/* Idle attract — an unopened box rattles until one is chosen. */
.m10k-box.is-tease{animation:m10k-box-tease .6s ease}
@keyframes m10k-box-tease{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-2.5deg) translateY(-2px)}
    55%{transform:rotate(2.5deg) translateY(-1px)}
    80%{transform:rotate(-1deg)}
}
@media(prefers-reduced-motion:reduce){
    .m10k-box.is-tease{animation:none}
    .m10k-box.is-opening{animation:none}
    .m10k-box.is-open .m10k-box__body{animation:none}
}

/* boîte étroite : le serif du lot se calibre pour tenir sur deux lignes */
.m10k-box .m10k-wintag__prize{font-size:16px;line-height:1.12;text-wrap:balance;overflow-wrap:break-word}
.m10k-box .m10k-wintag__kick{font-size:9.5px}