/* La Carte Miracle (client/miracle.ts) : l'offre, sa feuille de paiement, le tirage plein écran. Les couleurs sont les
   jetons du jeu (styles.css), définis dans les deux thèmes ; l'or reste au seul bouton qui joue. */

.mir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; margin-inline: auto; }
.mir-head { display: flex; align-items: center; gap: 8px; }
.mir-head .mir-title { flex: 1; min-width: 0; white-space: nowrap; }
/* EN DIRECT : une pastille rouge à côté du titre ; la ligne dessous dit la règle en quatre mots. */
.mir-onair { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(229, 72, 77, .14); color: #e5484d; font-size: 12px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.mir-onair i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; animation: mir-ping 1.6s infinite; }
.mir-info { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px -6px 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.mir-info span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font: italic 800 15px/1 Georgia, serif; }
@media (hover: hover) { .mir-info:hover { color: var(--text); } }
.mir-sub { margin: -12px 0 0; font-size: 13px; font-weight: 800; line-height: 1.4; color: var(--muted); }
.mir-sub b { color: var(--text); }
@keyframes mir-ping { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); } }
.mir-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; color: var(--heading); }
.mir-spark { width: 26px; height: 26px; fill: var(--gold); flex: none; }

/* L'offre : un seul bloc, l'horloge, les trois cartes (le jackpot au milieu), le prix, qui regarde. */
.mir-offer { position: relative; display: grid; gap: 14px; padding: 14px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mir-offer::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, var(--hero-glow), transparent); pointer-events: none; }
.mir-offer > * { position: relative; }
.mir-top { display: flex; align-items: center; gap: 8px; }
.mir-top .mir-timer { margin-right: auto; }
/* Qui regarde (un œil et un chiffre) et, seulement s'il y en a, qui paie : la seule nouvelle qui presse. */
.mir-live { display: inline-flex; align-items: center; gap: 6px; }
.mir-eye { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); }
.mir-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mir-hot { padding: 4px 10px; border-radius: 999px; background: rgba(229, 72, 77, .15); color: #e5484d; font-size: 13px; font-weight: 900; white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; animation: mir-hot 1.2s ease-in-out infinite; }
@keyframes mir-hot { 50% { background: rgba(229, 72, 77, .3); } }
.mir-music { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.mir-music svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mir-music[aria-pressed="true"] { color: var(--text); }
.mir-timer { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.mir-timer b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--heading); }
.mir-timer.is-low b { color: #e5484d; }
.mir-new { padding: 4px 10px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .04em; }

/* Les trois cartes côte à côte, en grand, le jackpot au milieu, cerné d'or. */
/* The columns align at the top, not at the bottom: the jackpot's gold label is two lines tall where « Moyenne » and
   « Nulle » are one, so a bottom alignment sat its card ~16 px above the other two — and it stayed higher face down
   during the shuffle, which let a player follow the jackpot by eye. */
.mir-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.mir-slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; min-width: 0; --coll-w: 100%; }
.mir-slot:nth-child(2) { z-index: 2; }
/* The glow follows the face itself, not the end of the demo: it shows and goes at the very frame the face does
   (same delay as its visibility, below), where waiting for is-playing to lift lit it a third of a second late. */
.mir-slot:nth-child(2) .mir-fl:not(.is-down) .mir-fl-f { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 45%, transparent)); }
/* Sous le jackpot : son étiquette et sa valeur en un seul bloc doré, la raison de tenter sa chance. */
.mir-jpk { display: grid; justify-items: center; gap: 0; padding: 3px 12px 4px; border-radius: 14px; background: var(--gold-grad); color: var(--on-gold); white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent); transition: opacity .3s; }
.mir-jpk small { white-space: nowrap; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mir-jpk b { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mir-jpk img { width: 16px; height: 16px; }
.mir-trio.is-playing .mir-jpk { opacity: 0; }
.mir-tier { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; color: var(--muted); white-space: nowrap; transition: opacity .3s; }
.mir-tier--jackpot { background: var(--gold-grad); color: var(--on-gold); }
.mir-trio.is-playing .mir-tier { opacity: 0; }
/* Une carte de l'offre : sa face et son dos dos à dos, pour la démo qui les retourne et les mélange. */
/* The box is fixed to the cards' own ratio (--card-aspect, public/styles.css) so the three stay identical whatever
   fills them — a graded slab, a bare card, or the back. */
.mir-fl { position: relative; width: 100%; aspect-ratio: .7466; transition: transform .3s cubic-bezier(.5, 0, .3, 1); }
.mir-fl-in { position: relative; height: 100%; transition: transform .55s cubic-bezier(.3, .1, .2, 1); }
.mir-fl-b { position: absolute; inset: 0; }
/* A card turns over flat, without 3D: it folds (its width goes almost to zero), face and back swap halfway through
   (visibility, below), it unfolds. The 3D flip (rotateY + backface-visibility) let Safari show one face through the
   other while a card was moving; flat, there is no back left to see through.
   client/miracle.ts turn() sets is-down and restarts is-turn.
   The fold stops at 2 % of the width, never at 0: after a fold down to zero, the owner's browser drew the back's
   wordmark shifted or not at all (Chrome did not), and of the fixes the owner tried, only this one kept it in place. */
.mir-fl.is-turn .mir-fl-in { animation: mir-turn .55s cubic-bezier(.45, 0, .55, 1); }
@keyframes mir-turn { 50% { scale: .02 1; } }
.mir-fl.is-lift .mir-fl-in { transform: translateY(-6px) scale(1.06); }
/* Safari laisse voir une face à travers l'autre quand la carte bouge : un filtre posé sur la carte aplatit son
   retournement 3D, et backface-visibility ne cache pas les calques des reflets de la face. Donc : la carte écartée
   s'assombrit par un voile posé dessus, jamais par un filtre ; chaque face disparaît pour de vrai à mi-retournement
   (.55 s / 2) ; et pendant la démo, les reflets de la face s'arrêtent, eux qui recomposaient la carte à chaque image. */
.mir-fl::after { content: ""; position: absolute; inset: 0; border-radius: 4.6% / 3.4%; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mir-fl.is-dim::after { opacity: .55; }
.mir-fl-f, .mir-fl-b { transition: visibility 0s linear .27s, filter 0s linear .27s; }
.mir-fl.is-down .mir-fl-f, .mir-fl:not(.is-down) .mir-fl-b { visibility: hidden; }
.mir-trio.is-playing .mir-fl { will-change: transform; }
.mir-trio.is-playing .mir-fl-f *, .mir-trio.is-playing .mir-fl-f *::before, .mir-trio.is-playing .mir-fl-f *::after { animation-play-state: paused !important; }
.mir-back { width: 100%; height: 100%; aspect-ratio: .7466; border-radius: 4.6% / 3.4%; }
.mir-tap { position: absolute; left: 50%; bottom: 30%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; z-index: 2; }
.mir-fl.is-tapping .mir-tap { animation: mir-tap .9s ease-out; }
@keyframes mir-tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: .95; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.3); } }

.mir-ico { position: relative; display: grid; place-items: center; height: 44px; }
.mir-ico img { max-width: 44px; max-height: 44px; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
.mir-ico-n { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: #d1242f; color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; border: 2px solid var(--surface); }

/* La barre collée en bas : la mise à gauche, le bouton à droite, toujours visibles sans défiler. */
.mir-cta { position: sticky; bottom: calc(var(--tabbar-h, 0px) + 8px); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 -10px 24px var(--page); }
.mir-cta .btn { margin: 0; width: auto; min-height: 52px; padding-inline: 20px; white-space: nowrap; }
.mir-bet { display: grid; gap: 1px; min-width: 0; }
.mir-bet small { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mir-bet-p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 20px; font-weight: 900; line-height: 1.15; color: var(--heading); }
.mir-bet-p span { display: inline-flex; align-items: center; gap: 4px; }
.mir-bet-p img { width: 20px; height: 20px; }
.mir-bet-p i { font-style: normal; color: var(--muted); font-size: 16px; }
.mir-bet-st { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; }
.mir-bet-st img { width: 13px; height: 13px; }
.mir-bet-st.is-ok { color: #2fbf71; }
.mir-bet-st.is-no { color: #e5484d; }
@media (min-width: 899px) { .mir-cta { bottom: 12px; } }

/* Le bandeau des derniers jackpots : il défile en boucle sous le titre (la liste deux fois, translateX -50 %). */
.mir-jp { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; padding: 0; }
.mir-jp[hidden] { display: none; }
/* « 🏆 Jackpots » en pastille dorée fixe à gauche, les bulles défilent à sa droite : une seule ligne. */
.mir-jp-h { flex: none; margin: 0; padding: 6px 10px; border-radius: 999px; background: var(--gold-grad); color: var(--on-gold); font-size: 12px; font-weight: 900; white-space: nowrap; }
.mir-jp-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mir-jp-track { margin: 0; padding: 0; list-style: none; display: flex; width: max-content; animation: mir-jp calc(var(--n, 4) * 5s) linear infinite; }
@media (hover: hover) { .mir-jp-win:hover .mir-jp-track { animation-play-state: paused; } }
@keyframes mir-jp { to { transform: translateX(-50%); } }
.mir-jp-i { display: flex; align-items: center; gap: 7px; margin-right: 8px; padding: 3px 11px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.mir-jp-i img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.mir-jp-i b { color: var(--heading); }
.mir-jp-gap { width: 0; }

/* Les derniers tirages : une ligne chacun, l'étiquette de ce qui est sorti, qui, quoi, l'heure. */
.mir-feed { display: grid; gap: 4px; padding: 0; }
.mir-feed h2 { margin: 6px 0 0; font-size: 17px; font-weight: 900; color: var(--heading); }
.mir-feed ol { margin: 0; padding: 0; list-style: none; display: grid; }
.mir-ev { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--text); }
.mir-ev time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mir-ev-tier { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 900; color: var(--muted); }
.mir-ev-tier--jackpot { background: var(--gold-grad); border-color: transparent; color: var(--on-gold); }
.mir-ev-t { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.mir-ev-t b { display: block; color: var(--heading); }
.mir-ev.is-jackpot .mir-ev-t { color: var(--gold); }

/* Le mode d'emploi, derrière le (i). */
.mir-help { display: grid; gap: 14px; }
.mir-help h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--heading); }
.mir-help ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); }
.mir-help ol b { color: var(--heading); }

/* ---------- la feuille de paiement ---------- */
.mir-pay { display: grid; gap: 16px; }
.mir-sheet-title { margin: 0; font-size: 22px; font-weight: 900; color: var(--heading); }
.mir-race { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; font-weight: 800; color: var(--muted); }
.mir-race.is-hot { color: #e5484d; }
.mir-sec { display: grid; gap: 10px; }
.mir-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mir-sec-h b { font-size: 16px; font-weight: 900; color: var(--heading); }
.mir-sec-h span { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.mir-sec-h .is-done::after { content: " ✓"; }
.mir-coinline { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.mir-coinline img { width: 20px; height: 20px; vertical-align: -4px; }
.mir-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mir-bar i { display: block; height: 100%; background: var(--gold-grad); transition: width .2s; }
.mir-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mir-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.mir-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.mir-loading { height: 120px; margin: 0; border-radius: 14px; background: var(--surface-2); }
.mir-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mir-tile { position: relative; display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; }
.mir-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; }
.mir-tile-n { font-size: 12px; font-weight: 800; line-height: 1.15; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; }
.mir-tile-h { font-size: 12px; font-weight: 700; color: var(--muted); }
.mir-tile.is-on { border-color: var(--gold); }
.mir-tile[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-2); }
.mir-tile[aria-disabled="true"] img { filter: grayscale(1) brightness(.6); }
.mir-tile[aria-disabled="true"] .mir-tile-n { color: var(--muted); }
.mir-badge { position: absolute; top: 2px; right: 2px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: var(--gold-grad); color: var(--on-gold); display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.mir-minus { position: absolute; top: 0; left: 0; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: start; }
.mir-minus::before { content: "−"; display: grid; place-items: center; width: 26px; height: 26px; margin: 2px; border-radius: 50%; background: var(--surface-2); color: var(--text); font-weight: 900; }
.mir-minus { font-size: 0; }
.mir-minus::before { font-size: 18px; line-height: 1; }
.mir-slabs { display: grid; gap: 8px; }
.mir-slab { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 70px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mir-slab img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.mir-slab b { display: block; font-size: 15px; font-weight: 900; }
.mir-slab small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.mir-why { color: #e5484d; }
.mir-ck { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); font-weight: 900; }
.mir-slab.is-on { border-color: var(--gold); }
.mir-slab.is-on .mir-ck { background: var(--gold-grad); border-color: transparent; color: var(--on-gold); }
.mir-slab[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-2); }
.mir-slab[aria-disabled="true"] img { filter: grayscale(1) brightness(.6); }
.mir-slab[aria-disabled="true"] b { color: var(--muted); }
.mir-foot { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 12px 0 4px; background: var(--surface); }
.mir-foot .btn { margin: 0; }
.mir-foot-hint { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
/* La dernière vérification : ce qui part à gauche, ce qui vient à droite, et la seule action dorée dessous. */
.mir-sheet .sheet-body > .close { display: none; }
.mir-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.mir-deal-side { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; }
.mir-deal-h { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mir-gives { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; justify-items: center; }
.mir-gives li { display: grid; justify-items: center; gap: 6px; }
.mir-gives b, .mir-deal-get { font-size: 19px; font-weight: 900; color: var(--heading); line-height: 1.15; overflow-wrap: anywhere; }
.mir-deal-side small { font-size: 13px; font-weight: 700; color: var(--muted); }
.mir-deal-arrow { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--gold); }
.mir-deal-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mir-fan { position: relative; width: 92px; height: 58px; }
.mir-fan .mir-back { position: absolute; left: 50%; top: 2px; width: 38px; height: auto; margin-left: -19px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.mir-fan .mir-back:nth-child(1) { transform: translateX(-26px) rotate(-12deg); }
.mir-fan .mir-back:nth-child(3) { transform: translateX(26px) rotate(12deg); }
.mir-fan .mir-back:nth-child(2) { z-index: 1; transform: translateY(-3px); }
.mir-final { margin: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--text); }
.mir-race--line { padding: 0; background: none; text-align: center; text-wrap: balance; }
.mir-race--line i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.mir-race--line.is-hot i { background: #e5484d; }
.mir-pay > .btn { margin: 0; }
.mir-text-btn { justify-self: center; min-height: 44px; padding: 0 18px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
@media (hover: hover) { .mir-text-btn:hover { color: var(--text); } }
.mir-sum { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--text); }
.mir-sum p { margin: 0; }
.mir-sum b { color: var(--heading); }
.mir-two { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.mir-two .btn { margin: 0; font-size: 17px; }
.mir-verdict { display: grid; gap: 12px; justify-items: center; padding: 30px 0; font-size: 19px; font-weight: 900; color: var(--heading); text-align: center; }
.mir-verdict p { margin: 0; }
.mir-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--gold); animation: mir-rot .8s linear infinite; }
@keyframes mir-rot { to { transform: rotate(360deg); } }

/* ---------- le tirage plein écran : une scène sombre dans les deux thèmes ---------- */
.mir-draw { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(22px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(ellipse at 50% 40%, #241550, #08090d 70%); color: #fff; text-align: center; }
.mir-draw-head h2 { margin: 0; font-size: 24px; font-weight: 900; color: #fff; }
.mir-draw-sub { margin: 4px 0 0; min-height: 1.4em; font-weight: 800; color: #d9d4ef; }
.mir-stage { position: relative; width: min(100%, 520px); margin: 0 auto; align-self: center; height: min(62vh, 60vw + 40px); }
.mir-pick { position: absolute; top: 50%; left: 50%; width: min(28vw, 150px); aspect-ratio: .7466; margin: 0; padding: 0; border: 0; background: none; cursor: default; --coll-w: 100%; transition: transform .4s cubic-bezier(.5, 0, .3, 1); }
.mir-pick-in { position: relative; display: block; width: 100%; height: 100%; }
.mir-pick-f, .mir-pick-b { position: absolute; inset: 0; display: block; }
.mir-pick.is-turn .mir-pick-in { animation: mir-turn .6s cubic-bezier(.45, 0, .55, 1); }
.mir-pick::after { content: ""; position: absolute; inset: 0; border-radius: 4.6% / 3.4%; background: #000; opacity: 0; pointer-events: none; transition: opacity .4s; }
.mir-pick-f, .mir-pick-b { transition: visibility 0s linear .3s; }
.mir-pick.is-down .mir-pick-f, .mir-pick:not(.is-down) .mir-pick-b { visibility: hidden; }
.mir-stage.is-choosing .mir-pick { cursor: pointer; animation: mir-bob 1.6s ease-in-out infinite; }
.mir-stage.is-choosing .mir-pick:nth-child(2) { animation-delay: .2s; }
.mir-stage.is-choosing .mir-pick:nth-child(3) { animation-delay: .4s; }
@keyframes mir-bob { 50% { translate: 0 -8px; } }
@media (hover: hover) { .mir-stage.is-choosing .mir-pick:hover .mir-pick-b { filter: drop-shadow(0 0 14px rgba(255, 216, 74, .8)); } }
.mir-pick:focus-visible { outline: 3px solid #ffd84a; outline-offset: 4px; border-radius: 8px; }
.mir-pick.is-dim::after { opacity: .65; }
.mir-pick.is-win .mir-pick-f { filter: drop-shadow(0 0 22px rgba(255, 216, 74, .85)); }
.mir-result { display: grid; gap: 10px; justify-items: center; min-height: 120px; align-content: end; }
.mir-result p { margin: 0; color: #d9d4ef; font-weight: 700; max-width: 34ch; }
.mir-result .mir-big { font-size: 30px; font-weight: 900; color: #fff; }
.mir-big--jackpot { background: linear-gradient(180deg, #fff3cc, #ffd84a 55%, #f2b53a); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.mir-result .mir-two { width: min(100%, 520px); }
@media (min-width: 560px) { .mir-result .mir-two .btn { white-space: nowrap; padding-inline: 16px; } }
.mir-result .btn.ghost { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

@media (prefers-reduced-motion: reduce) {
  .mir-fl, .mir-fl-in, .mir-pick, .mir-pick-in { transition-duration: .01s; }
  .mir-fl-f, .mir-fl-b, .mir-pick-f, .mir-pick-b { transition: none; }
  .mir-fl.is-turn .mir-fl-in, .mir-pick.is-turn .mir-pick-in { animation: none; }
  .mir-hot, .mir-onair i, .mir-stage.is-choosing .mir-pick { animation: none; }
  .mir-jp-track { animation: none; }
  .mir-jp-win { overflow-x: auto; }
  .mir-jp-track > [aria-hidden] { display: none; }
}

/* ---------- téléphone : l'en-tête, le bandeau et l'offre tiennent au-dessus de la barre de la mise ---------- */
@media (max-width: 560px) {
  .mir { gap: 10px; }
  .mir-title { font-size: 21px; gap: 6px; }
  .mir-spark { width: 20px; height: 20px; }
  .mir-head .mir-info { width: 36px; height: 36px; margin: -4px -6px -4px 0; }
  .mir-sub { margin-top: -8px; font-size: 12px; }
  .mir-jp { margin-top: -2px; }
  .mir-jp-i { font-size: 13px; }
  .mir-offer { gap: 4px; padding: 8px 10px 10px; border-radius: 20px; }
  .mir-top { min-height: 28px; }
  .mir-timer { font-size: 12px; }
  .mir-timer b { font-size: 16px; }
  .mir-music { width: 36px; height: 36px; margin: -4px -4px -4px 0; }
  .mir-trio { gap: 8px; }
  .mir-cta { padding: 8px 8px 8px 14px; gap: 10px; border-radius: 18px; }
  .mir-cta .btn { min-height: 48px; padding-inline: 18px; font-size: 18px; }
  .mir-bet small { font-size: 10px; }
  .mir-bet-p { font-size: 18px; }
}