/* ONLY STREAM — pages des créations (compteur, roulette, chrono, décompte,
 * texte, objectif), chargées en source navigateur par OBS / TikTok LIVE
 * Studio, et aperçu de l'éditeur. Repris du bridge (public/widget/index.html,
 * os-render.js, wheel-render.js) : au bridge, ces règles étaient injectées en
 * <style> par le script — la politique de sécurité du site l'interdit, elles
 * vivent donc ici. */

/* Page : fond transparent, rien ne dépasse. */
html.page-widget, html.page-widget body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
html.page-widget #creation { position: absolute; inset: 0; }
/* Page cadrée sur le format de son overlay (OnlyStreamWidget.cadrer). */
body.osw-cadre { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; }

.osw-scene { position: absolute; inset: 0; overflow: hidden; }
.osw-abs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ── Compteur ─────────────────────────────────────────────────────────── */
.osw-val, .osw-sep { font-weight: 800; line-height: 1; white-space: nowrap; user-select: none; }
.osw-fond { border-radius: 16px; }
@keyframes osw-pop { 50% { scale: 1.18; } }
.osw-val.osw-pop { animation: osw-pop .18s ease-out; }

/* ── Roulette ─────────────────────────────────────────────────────────── */
.osw-roue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
.osw-roue.osw-cachee { display: none; }
.osw-roue.osw-disparait { opacity: 0; transition: opacity .45s ease; }
.osw-roue-interieur { position: relative; display: inline-block; }
.osw-roue canvas { display: block; }
/* Détrompeur : SVG (widget-render.js, detrompeur), haut réglé par le script. */
.osw-pointeur { position: absolute; left: 50%; z-index: 2; display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); transform: translateX(-50%); }
.osw-resultat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 18px 30px;
  border: 2px solid #a855f7;
  border-radius: 14px;
  background: rgba(13, 13, 20, .92);
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.osw-resultat.osw-montre { transform: translate(-50%, -50%) scale(1); }

/* Pop-up du gagnant : un calque positionné (transform posé par le script) ;
   la boîte, dedans, porte l'animation d'apparition. */
.osw-popup { position: absolute; left: 50%; top: 50%; z-index: 5; visibility: hidden; }
.osw-popup.osw-popup--visible { visibility: visible; }
.osw-popup__boite { padding: .35em .8em .4em; text-align: center; white-space: nowrap; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.osw-popup__titre { margin-bottom: .15em; font-size: .42em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.osw-popup__texte { font-weight: 800; line-height: 1.1; }
/* Modèles de la pop-up du gagnant (popupModele). Les réglages arrivent en
 * variables : --pop-fond (fond et son opacité), --pop-fond-plein, --pop-c
 * (bordure, ou couleur du segment gagnant), --pop-bord, --pop-rayon,
 * --pop-titre. */
.osw-popup--classique { background: var(--pop-fond); border: var(--pop-bord) solid var(--pop-c); border-radius: var(--pop-rayon); }
.osw-popup--neon { background: var(--pop-fond); border: var(--pop-bord) solid var(--pop-c); border-radius: var(--pop-rayon); box-shadow: 0 0 .25em var(--pop-c), 0 0 .6em var(--pop-c), inset 0 0 .35em var(--pop-c); }
.osw-popup--neon .osw-popup__texte { text-shadow: 0 0 .08em #fff, 0 0 .25em var(--pop-c), 0 0 .5em var(--pop-c); }
.osw-popup--neon .osw-popup__titre { text-shadow: 0 0 .3em var(--pop-titre); }
.osw-popup--verre { background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)), var(--pop-fond); border: var(--pop-bord) solid rgba(255, 255, 255, .45); border-radius: var(--pop-rayon); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px var(--pop-c); }
.osw-popup--verre .osw-popup__texte { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.osw-popup--or { position: relative; border: max(4px, var(--pop-bord)) solid transparent; border-radius: var(--pop-rayon); background: linear-gradient(var(--pop-fond-plein), var(--pop-fond-plein)) padding-box, linear-gradient(135deg, #fff4c2, #d4a017 30%, #8a6d1a 50%, #ffe08a 70%, #b8860b) border-box; overflow: hidden; }
.osw-popup--or .osw-popup__texte { background: linear-gradient(180deg, #fff8dc, #ffd56a 45%, #c8901a 55%, #ffe9a8); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 .04em 0 #5c4710); }
.osw-popup--or .osw-popup__titre { color: #ffe08a !important; }
.osw-popup--or::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: rotate(20deg); animation: osw-pop-reflet 2.6s ease-in-out .3s infinite; pointer-events: none; }
@keyframes osw-pop-reflet { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.osw-popup--ruban { position: relative; padding: .3em 1.6em .38em; background: var(--pop-c); background: linear-gradient(180deg, color-mix(in srgb, var(--pop-c) 70%, #fff), var(--pop-c) 55%, color-mix(in srgb, var(--pop-c) 70%, #000)); clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%); filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .5)); }
.osw-popup--ruban .osw-popup__titre { color: rgba(255, 255, 255, .9) !important; }
.osw-popup--ruban .osw-popup__texte { text-shadow: 0 .05em 0 rgba(0, 0, 0, .35); }
.osw-popup--bd { position: relative; background: var(--pop-fond-plein); border: max(5px, var(--pop-bord)) solid #111; border-radius: max(18px, var(--pop-rayon)); box-shadow: .12em .12em 0 #111; }
.osw-popup--bd::after { content: ''; position: absolute; left: 22%; bottom: -.48em; width: .6em; height: .55em; background: var(--pop-fond-plein); border-right: max(5px, var(--pop-bord)) solid #111; border-bottom: max(5px, var(--pop-bord)) solid #111; transform: skewX(-25deg) rotate(35deg); }
.osw-popup--bd .osw-popup__texte { -webkit-text-stroke: .04em #111; paint-order: stroke fill; text-shadow: .05em .05em 0 #111; }
.osw-popup--ticket { position: relative; padding: .4em 1.3em .45em; background: radial-gradient(circle at 0 50%, transparent .32em, var(--pop-fond-plein) .33em) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .32em, var(--pop-fond-plein) .33em) right / 51% 100% no-repeat; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .45)); }
.osw-popup--ticket::before { content: ''; position: absolute; inset: .14em .5em; border: max(2px, calc(var(--pop-bord) / 2)) dashed var(--pop-c); border-radius: .12em; pointer-events: none; }
.osw-popup--arcade { padding: .4em .9em .45em; background: var(--pop-fond-plein); border-radius: 0; box-shadow: 0 -.1em 0 var(--pop-c), 0 .1em 0 var(--pop-c), -.1em 0 0 var(--pop-c), .1em 0 0 var(--pop-c), 0 0 0 .1em #000, .14em .14em 0 .1em rgba(0, 0, 0, .55); image-rendering: pixelated; }
.osw-popup--arcade .osw-popup__titre { animation: osw-pop-clignote 1s steps(1) infinite; }
.osw-popup--arcade .osw-popup__texte { text-shadow: .05em .05em 0 var(--pop-c); }
@keyframes osw-pop-clignote { 50% { opacity: .25; } }
.osw-popup--carte { padding: 0 0 .35em; overflow: hidden; background: var(--pop-fond); border: var(--pop-bord) solid var(--pop-c); border-radius: var(--pop-rayon); }
.osw-popup--carte .osw-popup__titre { margin: 0 0 .25em; padding: .35em 1em .3em; background: var(--pop-c); color: #fff !important; font-size: .38em; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.osw-popup--carte .osw-popup__texte { padding: 0 .7em; }
.osw-popup--eclat { position: relative; padding: .6em 1em; background: transparent; }
.osw-popup--eclat::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 5em; height: 5em; margin: -2.5em 0 0 -2.5em; border-radius: 50%; background: repeating-conic-gradient(var(--pop-c) 0 7deg, transparent 7deg 15deg); -webkit-mask: radial-gradient(circle closest-side, #000 40%, transparent 100%); mask: radial-gradient(circle closest-side, #000 40%, transparent 100%); animation: osw-pop-rayons 14s linear infinite; }
.osw-popup--eclat::after { content: ''; position: absolute; inset: .2em .3em; z-index: -1; border-radius: 999px; background: var(--pop-fond); }
.osw-popup--eclat { isolation: isolate; box-shadow: none; }
@keyframes osw-pop-rayons { to { transform: rotate(360deg); } }
.osw-popup--minimal { background: transparent; box-shadow: none; }
.osw-popup--minimal .osw-popup__texte { -webkit-text-stroke: .035em rgba(0, 0, 0, .8); paint-order: stroke fill; text-shadow: 0 .06em .18em rgba(0, 0, 0, .7), 0 0 .4em var(--pop-c); }
.osw-popup--minimal .osw-popup__titre { text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }

/* Éditeur : les calques de l'aperçu se saisissent à la souris ou au doigt. */
.apercu__scene [data-calque] { cursor: move; touch-action: none; }
.apercu__scene [data-calque]:hover { outline: 6px dashed rgba(34, 211, 238, .55); outline-offset: 10px; }

@keyframes osw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes osw-zoom { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes osw-slide-left { from { opacity: 0; transform: translateX(-120vw); } to { opacity: 1; transform: translateX(0); } }
@keyframes osw-slide-right { from { opacity: 0; transform: translateX(120vw); } to { opacity: 1; transform: translateX(0); } }
@keyframes osw-slide-up { from { opacity: 0; transform: translateY(120vh); } to { opacity: 1; transform: translateY(0); } }
@keyframes osw-slide-down { from { opacity: 0; transform: translateY(-120vh); } to { opacity: 1; transform: translateY(0); } }
@keyframes osw-drop { 0% { opacity: 0; transform: translateY(-120vh); } 60% { opacity: 1; transform: translateY(0); } 78% { transform: translateY(-24px); } 90% { transform: translateY(0); } 96% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes osw-flip { from { opacity: 0; transform: perspective(900px) rotateY(90deg); } to { opacity: 1; transform: perspective(900px) rotateY(0); } }
@keyframes osw-spin { from { opacity: 0; transform: scale(.1) rotate(-220deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
/* Ajoutées le 15/10/2026 : même principe (état final = identité). */
@keyframes osw-zoom-out { from { opacity: 0; transform: scale(3); } to { opacity: 1; transform: scale(1); } }
@keyframes osw-bounce { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.08); } 70% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes osw-elastic { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.25); } 70% { transform: scale(.85); } 82% { transform: scale(1.08); } 92% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes osw-jelly { 0% { opacity: 0; transform: scale(.4, .4); } 30% { opacity: 1; transform: scale(1.25, .75); } 45% { transform: scale(.75, 1.25); } 60% { transform: scale(1.15, .85); } 75% { transform: scale(.95, 1.05); } 90% { transform: scale(1.04, .96); } 100% { opacity: 1; transform: scale(1, 1); } }
@keyframes osw-heartbeat { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.15); } 35% { transform: scale(.95); } 50% { transform: scale(1.12); } 70% { transform: scale(.98); } 100% { opacity: 1; transform: scale(1); } }
@keyframes osw-pop-rotate { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 70% { opacity: 1; transform: scale(1.1) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes osw-stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-12deg); } 60% { opacity: 1; transform: scale(.92) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes osw-blur { from { opacity: 0; filter: blur(24px); transform: scale(1.15); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes osw-neon { 0% { opacity: 0; } 10% { opacity: .8; } 14% { opacity: 0; } 26% { opacity: 1; } 30% { opacity: .2; } 42% { opacity: 1; } 48% { opacity: .5; } 60%, 100% { opacity: 1; } }
@keyframes osw-glitch { 0% { opacity: 0; transform: translate(-30px, 0) skewX(25deg); } 15% { opacity: 1; transform: translate(20px, 0) skewX(-20deg); } 30% { transform: translate(-12px, 4px) skewX(12deg); } 45% { transform: translate(8px, -3px) skewX(-6deg); } 60% { opacity: .6; transform: translate(-4px, 0); } 75% { opacity: 1; transform: translate(3px, 0); } 100% { opacity: 1; transform: none; } }
@keyframes osw-shake-in { 0% { opacity: 0; transform: none; } 10% { opacity: 1; transform: translateX(-25px); } 25% { transform: translateX(22px); } 40% { transform: translateX(-16px); } 55% { transform: translateX(10px); } 70% { transform: translateX(-5px); } 85% { transform: translateX(2px); } 100% { opacity: 1; transform: none; } }
@keyframes osw-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes osw-fall { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: none; } }
@keyframes osw-swoop-left { from { opacity: 0; transform: translate(-80vw, 40vh) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes osw-swoop-right { from { opacity: 0; transform: translate(80vw, 40vh) rotate(30deg); } to { opacity: 1; transform: none; } }
@keyframes osw-roll-left { from { opacity: 0; transform: translateX(-120vw) rotate(-540deg); } to { opacity: 1; transform: none; } }
@keyframes osw-roll-right { from { opacity: 0; transform: translateX(120vw) rotate(540deg); } to { opacity: 1; transform: none; } }
@keyframes osw-flip-x { from { opacity: 0; transform: perspective(900px) rotateX(90deg); } to { opacity: 1; transform: perspective(900px) rotateX(0); } }
@keyframes osw-swing { 0% { opacity: 0; transform: perspective(900px) rotateX(-90deg); } 60% { opacity: 1; transform: perspective(900px) rotateX(20deg); } 80% { transform: perspective(900px) rotateX(-8deg); } 100% { opacity: 1; transform: perspective(900px) rotateX(0); } }
@keyframes osw-tilt { from { opacity: 0; transform: perspective(900px) rotateY(-70deg) rotateX(25deg) scale(.6); } to { opacity: 1; transform: perspective(900px) rotateY(0) rotateX(0) scale(1); } }
@keyframes osw-spiral { from { opacity: 0; transform: rotate(-720deg) scale(0); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes osw-unfold { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes osw-expand { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes osw-curtain { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes osw-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes osw-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }

/* Animations en boucle de tout le widget (OnlyStreamWidget, réglage « boucle »). */
.osw-boucle { position: absolute; inset: 0; }
@keyframes osw-boucle-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes osw-boucle-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes osw-boucle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes osw-boucle-battement { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.14); } 20% { transform: scale(1); } 30% { transform: scale(1.09); } }
@keyframes osw-boucle-balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes osw-boucle-rebondit { 0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 45% { transform: translateY(-28px); animation-timing-function: cubic-bezier(.4, 0, .7, 1); } 55% { transform: translateY(-28px); } }
@keyframes osw-boucle-tremble { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -3px); } 80% { transform: translate(2px, 3px); } }
@keyframes osw-boucle-vague { 0%, 100% { transform: skewX(0) rotate(0); } 25% { transform: skewX(-6deg) rotate(-1deg); } 75% { transform: skewX(6deg) rotate(1deg); } }
@keyframes osw-boucle-tourne { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes osw-boucle-brille { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .9)) drop-shadow(0 0 32px rgba(34, 211, 238, .6)); } }
@keyframes osw-boucle-arc-en-ciel { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes osw-boucle-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes osw-boucle-neon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7)); } 20%, 24%, 55% { opacity: .35; filter: none; } }
@keyframes osw-boucle-zoom-lent { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ── Chrono, décompte, texte, objectif ───────────────────────────────── */
.osr-stage { position: absolute; inset: 0; transition: opacity .4s; }
.osr-clock, .osr-text { font-weight: 800; line-height: 1.15; white-space: nowrap; user-select: none; }
.osr-fx-pulse { animation: osr-pulse var(--osr-speed, 3s) ease-in-out infinite; }
@keyframes osr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.osr-fx-blink, .osr-blink { animation: osr-blink var(--osr-speed, 1s) steps(1) infinite; }
@keyframes osr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: var(--osr-blink-min, .15); } }
.osr-fx-glow { animation: osr-glow var(--osr-speed, 3s) ease-in-out infinite; }
@keyframes osr-glow {
  0%, 100% { text-shadow: 0 0 6px var(--osr-fx-color, currentColor); }
  50% { text-shadow: 0 0 22px var(--osr-fx-color, currentColor), 0 0 44px var(--osr-fx-color, currentColor); }
}
.osr-fx-rainbow { animation: osr-rainbow var(--osr-speed, 3s) linear infinite; }
@keyframes osr-rainbow { to { filter: hue-rotate(360deg); } }
.osr-fx-shake { animation: osr-shake var(--osr-speed, .5s) linear infinite; }
@keyframes osr-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(calc(-1 * var(--osr-shake-amp, 3px)), calc(.66 * var(--osr-shake-amp, 3px))); }
  40% { transform: translate(var(--osr-shake-amp, 3px), calc(-.66 * var(--osr-shake-amp, 3px))); }
  60% { transform: translate(calc(-.66 * var(--osr-shake-amp, 3px)), calc(-.66 * var(--osr-shake-amp, 3px))); }
  80% { transform: translate(calc(.66 * var(--osr-shake-amp, 3px)), calc(.66 * var(--osr-shake-amp, 3px))); }
}
.osr-marquee-box { overflow: hidden; }
.osr-marquee { display: inline-block; white-space: nowrap; animation: osr-marquee var(--osr-speed, 8s) linear infinite; }
@keyframes osr-marquee {
  from { transform: translate(var(--osr-mq-x0, 100%), var(--osr-mq-y0, 0px)); }
  to { transform: translate(var(--osr-mq-x1, -100%), var(--osr-mq-y1, 0px)); }
}
.osr-goal { text-align: center; }
.osr-goal-label { margin-bottom: 8px; }
.osr-goal-track { position: relative; margin: 0 auto; overflow: hidden; }
.osr-goal-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.osr-goal-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.osr-goal-done .osr-goal-fill { animation: osr-goaldone 1.2s ease-in-out infinite; }
@keyframes osr-goaldone { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }

/* ── Top donateurs, dernier évènement ────────────────────────────────── */
.osw-classement { text-align: center; }
.osw-classement__titre { margin-bottom: .2em; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.osw-classement__lignes { display: grid; gap: .1em; }
.osw-classement__ligne { font-weight: 800; line-height: 1.2; white-space: nowrap; }
.osr-text.osw-pop { animation: osw-pop .35s ease-out; }
@keyframes osw-apparait { from { opacity: 0; } to { opacity: 1; } }
.osw-fondu { animation: osw-apparait .6s ease-out; }

/* ── Alertes ─────────────────────────────────────────────────────────── */
/* Centrée par left: 50 %, la boîte n'aurait que la moitié de la scène pour
   s'étaler : on lui donne la largeur de son contenu (bornée par le texte). */
.osw-alerte { width: max-content; }
.osw-alerte__boite { display: flex; flex-direction: column; align-items: center; gap: .25em; text-align: center; }
.osw-alerte__image { object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)); }
.osw-alerte__texte { font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }

/* ── Match PK ────────────────────────────────────────────────────────── */
.osw-match {
  display: grid;
  gap: .35em;
  padding: .6em .8em .8em;
  border: 3px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(10, 10, 18, .78);
  box-sizing: border-box;
  transition: border-color .3s, box-shadow .3s;
}
.osw-match--mene { border-color: #ef4444; box-shadow: 0 0 40px rgba(239, 68, 68, .45); }
.osw-match__tete, .osw-match__noms, .osw-match__scores { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.osw-match__titre, .osw-match__nom, .osw-match__score, .osw-match__chrono { font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osw-match__nom--eux, .osw-match__score--eux { text-align: right; }
.osw-match__chrono { font-variant-numeric: tabular-nums; }
.osw-match--fin .osw-match__chrono { color: #ef4444 !important; -webkit-text-fill-color: #ef4444; }
.osw-match__barre { display: flex; height: 28px; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .12); }
.osw-match__part { height: 100%; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.osw-match__part--nous { background: var(--osw-nous); }
.osw-match__part--eux { background: var(--osw-eux); }
.osw-match__ecart { font-weight: 800; opacity: .9; }
.osw-match__soutiens { display: grid; gap: .1em; }
.osw-match__soutien { font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osw-match__resultat { display: none; text-align: center; font-weight: 900; line-height: 1.1; }
.osw-match--resultat .osw-match__resultat { display: block; animation: osw-pop .45s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .osr-fx-pulse, .osr-fx-shake, .osr-fx-rainbow { animation: none; }
}

/* ── Widgets ajoutés le 15/10/2026 (widgets-plus.js) ─────────────────── */
.osw-plus__message { position: absolute; left: -50%; right: -50%; bottom: 100%; margin-bottom: .2em; text-align: center; white-space: nowrap; line-height: 1.1; z-index: 3; }
.osw-plus--eclat { animation: osw-eclat 900ms ease-out; }
@keyframes osw-eclat { 0% { filter: brightness(1); } 25% { filter: brightness(1.9) drop-shadow(0 0 24px rgba(255, 255, 255, .9)); } 100% { filter: brightness(1); } }

/* Barre de likes */
.osw-likes { display: grid; justify-items: center; gap: .25em; }
.osw-likes__titre { line-height: 1.1; white-space: nowrap; }
.osw-likes__barre { position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .15); }
.osw-likes__rempli { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transition: width .6s cubic-bezier(.2, .9, .3, 1); box-shadow: 0 0 20px rgba(255, 45, 85, .6); }
.osw-likes__valeur { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; line-height: 1; }

/* Fil de commentaires, mur des cadeaux : une colonne de bulles. */
.osw-colonne { display: flex; flex-direction: column; gap: 10px; }
.osw-colonne--bas { transform: translate(-50%, -100%); justify-content: flex-end; }
.osw-colonne--haut { transform: translate(-50%, 0); }
.osw-bulle { display: block; align-self: flex-start; max-width: 100%; padding: .35em .7em .4em; line-height: 1.25; overflow-wrap: anywhere; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.osw-bulle__pseudo { display: block; margin-bottom: .1em; font-size: .78em; font-weight: 800; -webkit-text-stroke: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.osw-bulle--cadeau { display: flex; align-items: center; gap: .5em; padding: .25em .9em .25em .3em; white-space: nowrap; }
.osw-cadeau__image { flex: none; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.osw-cadeau__goutte { position: absolute; top: -12%; object-fit: contain; animation: osw-pluie 3s linear both; pointer-events: none; }
@keyframes osw-pluie { from { transform: translateY(0) rotate(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(125vh) rotate(var(--tour, 180deg)); opacity: 0; } }

/* Sondage */
.osw-sondage { display: grid; gap: 12px; }
.osw-sondage__question { line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.osw-sondage__lignes { display: grid; gap: 10px; }
.osw-sondage__ligne { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 2.2em; padding: .2em .8em; overflow: hidden; border: 2px solid rgba(255, 255, 255, .18); border-radius: 14px; background: rgba(10, 10, 20, .55); }
.osw-sondage__rempli { position: absolute; left: 0; top: 0; bottom: 0; opacity: .85; transition: width .5s cubic-bezier(.2, .9, .3, 1); }
.osw-sondage__nom, .osw-sondage__chiffre { position: relative; paint-order: stroke fill; white-space: nowrap; line-height: 1.1; }
.osw-sondage__nom { overflow: hidden; text-overflow: ellipsis; }
.osw-sondage__ligne--gagnant { box-shadow: 0 0 24px rgba(250, 204, 21, .55); }
.osw-sondage__pied { text-align: center; line-height: 1.2; }

/* Boss fight */
.osw-boss { display: grid; justify-items: center; gap: .15em; }
.osw-boss__visage { line-height: 1; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); transition: filter .4s, transform .6s; }
.osw-boss--touche { animation: osw-touche 380ms ease-out; }
@keyframes osw-touche { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-14px, 4px) rotate(-6deg); filter: brightness(2) drop-shadow(0 0 20px #ff4d4d); } 45% { transform: translate(12px, -3px) rotate(5deg); } 70% { transform: translate(-6px, 2px); } }
.osw-boss--ko .osw-boss__visage { filter: grayscale(1) brightness(.6); transform: rotate(-90deg) translateY(10%); }
.osw-boss__nom { line-height: 1.1; white-space: nowrap; }
.osw-boss__barre { position: relative; overflow: hidden; border-radius: 999px; background: rgba(10, 10, 20, .7); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .2), 0 8px 20px rgba(0, 0, 0, .5); }
.osw-boss__rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; transition: width .45s cubic-bezier(.2, .9, .3, 1), background .45s; }
.osw-boss__pv { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; white-space: nowrap; }
.osw-boss__ko { line-height: 1.1; text-align: center; white-space: nowrap; }
.osw-boss__degat { position: absolute; top: 10%; line-height: 1; white-space: nowrap; animation: osw-degat 1.1s ease-out forwards; pointer-events: none; }
@keyframes osw-degat { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -20px) scale(1.25); opacity: 1; } to { transform: translate(-50%, -120px) scale(1); opacity: 0; } }

/* Bienvenue */
.osw-bienvenue { white-space: nowrap; line-height: 1.15; }

/* Machine à sous */
.osw-slots { display: grid; justify-items: center; gap: .3em; }
.osw-slots__cadre { display: flex; gap: 10px; padding: 14px; border: 6px solid; border-radius: 26px; }
.osw-slots__fenetre { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .08) 50%, rgba(0, 0, 0, .55)); box-shadow: inset 0 0 18px rgba(0, 0, 0, .8); }
.osw-slots__bande { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.osw-slots__symbole { display: grid; place-items: center; line-height: 1; }
.osw-slots__message { min-height: 1.1em; line-height: 1.1; white-space: nowrap; }

/* Course des donateurs */
.osw-course { display: grid; gap: 10px; }
.osw-course__titre { text-align: center; line-height: 1.1; }
.osw-course__pistes { display: grid; gap: 8px; }
.osw-course__ligne { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); align-items: center; gap: 12px; }
.osw-course__nom { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.osw-course__piste { position: relative; height: 2.2em; border-right: 6px dashed; border-radius: 999px 0 0 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.osw-course__coureur { position: absolute; top: 50%; left: 0; line-height: 1; transform: translate(0, -50%); transition: left .9s cubic-bezier(.2, .9, .3, 1), transform .9s cubic-bezier(.2, .9, .3, 1); }
.osw-course__banniere { text-align: center; line-height: 1.15; }

/* Carte défi */
.osw-carte { perspective: 1400px; }
.osw-carte__interieur { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .8, .3, 1.15); }
.osw-carte--retournee .osw-carte__interieur { transform: rotateY(180deg); }
.osw-carte__face { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; border-radius: 24px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; white-space: normal; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(255, 255, 255, .25); }
.osw-carte__recto { transform: rotateY(180deg); }

/* Enchère */
.osw-enchere { display: grid; justify-items: center; gap: .1em; text-align: center; }
.osw-enchere__titre, .osw-enchere__meneur, .osw-enchere__banniere { line-height: 1.15; white-space: nowrap; }
.osw-enchere__temps { line-height: 1; font-variant-numeric: tabular-nums; }

/* Bandeau défilant */
.osw-ticker { display: flex; align-items: center; overflow: hidden; }
.osw-ticker--large { width: 100%; }
.osw-ticker__piste { display: flex; flex: none; white-space: nowrap; will-change: transform; }
.osw-ticker__texte { flex: none; line-height: 1; white-space: pre; }
@keyframes osw-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cadre néon */
.osw-contour { box-sizing: border-box; }
.osw-contour--neon { box-shadow: 0 0 var(--halo) var(--c1), inset 0 0 calc(var(--halo) / 2) var(--c1); }
@property --osw-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.osw-contour--degrade { padding: var(--ep); background: conic-gradient(from var(--osw-angle), var(--c1), var(--c2), var(--c1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: osw-contour-tourne 4s linear infinite; }
@keyframes osw-contour-tourne { to { --osw-angle: 360deg; } }
.osw-contour--flash { animation: osw-contour-flash 900ms ease-out; }
.osw-contour--degrade.osw-contour--flash { animation: osw-contour-flash 900ms ease-out, osw-contour-tourne 4s linear infinite; }
@keyframes osw-contour-flash { 0% { opacity: 1; } 20% { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 40px #fff); } 100% { opacity: 1; } }

/* Horloge */
.osw-horloge { display: grid; justify-items: center; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.osw-horloge__date { margin-top: .15em; white-space: nowrap; }
.osw-horloge__heure { white-space: nowrap; }

/* Image */
.osw-image__img { display: block; height: auto; }
.osw-image__vide { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 3px dashed rgba(255, 255, 255, .45); border-radius: 18px; color: rgba(255, 255, 255, .7); font: 600 28px system-ui, sans-serif; text-align: center; }

/* Podium */
.osw-podium { display: grid; gap: 10px; }
.osw-podium__titre { text-align: center; line-height: 1.1; white-space: nowrap; }
.osw-podium__marches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
.osw-podium__colonne { display: grid; justify-items: center; gap: 4px; text-align: center; }
.osw-podium__nom, .osw-podium__diamants { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.osw-podium__marche { position: relative; width: 100%; border-radius: 14px 14px 4px 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .35); }
.osw-podium__rang { position: absolute; top: 8px; left: 0; right: 0; color: rgba(0, 0, 0, .55); font: 900 46px 'Anton', sans-serif; text-align: center; }

/* Musique en cours (29/10/2026) : pochette, titre, artiste, égaliseur. */
.osw-musique { display: flex; align-items: center; gap: .55em; box-sizing: border-box; transition: opacity .5s ease, transform .5s ease; }
.osw-musique--carte { padding: 14px; border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.osw-musique--bandeau { padding: 8px 18px 8px 8px; border-radius: 999px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
/* Le centrage d'.osw-abs (translate -50 %) reste dans la transformation :
   sans lui, le widget vide glisse d'une demi-taille (cadre décalé). */
.osw-musique--vide { opacity: 0; transform: translate(-50%, -50%) translateY(12px); }
.osw-musique__pochette { position: relative; flex: none; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #22d3ee); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.osw-musique--bandeau .osw-musique__pochette { border-radius: 50%; }
.osw-musique__img { display: none; width: 100%; height: 100%; object-fit: cover; }
.osw-musique__pochette--image .osw-musique__img { display: block; }
.osw-musique__note { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 50px system-ui, sans-serif; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.osw-musique--bandeau .osw-musique__note { font-size: 26px; }
.osw-musique__pochette--image .osw-musique__note { display: none; }
.osw-musique__textes { display: grid; flex: 1; min-width: 0; gap: .1em; }
.osw-musique--bandeau .osw-musique__textes { display: flex; align-items: baseline; gap: .5em; }
.osw-musique__entete, .osw-musique__titre, .osw-musique__artiste { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.osw-musique__entete { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.osw-musique__egaliseur { display: flex; flex: none; align-items: flex-end; gap: 4px; height: 36px; }
.osw-musique__egaliseur span { width: 6px; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: bottom; animation: osw-egaliseur 1s ease-in-out infinite alternate; }
.osw-musique__egaliseur span:nth-child(2) { animation-delay: -.35s; animation-duration: .8s; }
.osw-musique__egaliseur span:nth-child(3) { animation-delay: -.7s; animation-duration: 1.15s; }
.osw-musique__egaliseur span:nth-child(4) { animation-delay: -.2s; animation-duration: .9s; }
@keyframes osw-egaliseur { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .osw-musique__egaliseur span { animation: none; transform: scaleY(.6); } }

/* ── Jeux (24/10/2026) : bocal, Plinko, tirage, fusée, ballon, corde, gages,
   hype, aquarium — public/widget/widgets-jeux.js ─────────────────────────── */
.osw-jeu { display: grid; justify-items: center; gap: 12px; }
.osw-jeu__titre { text-align: center; white-space: nowrap; line-height: 1.1; z-index: 2; }
.osw-jeu__toile { display: block; }
.osw-jeu__voile { position: absolute; pointer-events: none; z-index: 5; }
.osw-jeu__message { position: absolute; left: -60%; right: -60%; bottom: 100%; margin-bottom: .25em; transform-origin: 50% 100%; text-align: center; white-space: nowrap; line-height: 1.1; z-index: 6; }
.osw-jeu__pastille { display: inline-flex; align-items: center; gap: .6em; padding: .3em .9em; border-radius: 999px; background: rgba(10, 8, 22, .72); box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .12); white-space: nowrap; z-index: 2; }
.osw-jeu__jauge { position: relative; width: 4.5em; height: .45em; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.osw-jeu__jauge-rempli { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #a855f7, #ff3d81); transition: width .5s cubic-bezier(.2, .9, .3, 1.2); }
.osw-jeu--secoue { animation: osw-jeu-secoue .7s cubic-bezier(.36, .07, .19, .97); }
.osw-jeu--secoue-leger { animation: osw-jeu-secoue-leger .35s ease-out; }
.osw-jeu--rebond { animation: osw-jeu-rebond .55s cubic-bezier(.2, 1.6, .4, 1); }
.osw-jeu--pop { animation: osw-jeu-pop .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes osw-jeu-secoue { 10%, 90% { transform: translate(-2px, 0) rotate(-1deg); } 20%, 80% { transform: translate(5px, -2px) rotate(1.5deg); } 30%, 50%, 70% { transform: translate(-8px, 2px) rotate(-2deg); } 40%, 60% { transform: translate(8px, -1px) rotate(2deg); } }
@keyframes osw-jeu-secoue-leger { 25% { transform: translateY(3px); } 50% { transform: translate(-2px, -2px); } 75% { transform: translate(2px, 1px); } }
@keyframes osw-jeu-rebond { 0% { transform: scale(1); } 35% { transform: scale(1.06, .94); } 65% { transform: scale(.97, 1.03); } 100% { transform: scale(1); } }
@keyframes osw-jeu-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Bocal, Plinko, fusée, aquarium : une toile, un cadre. */
.osw-bocal__cadre, .osw-plinko__cadre, .osw-fusee__cadre, .osw-hype__cadre { position: relative; }
.osw-bocal__compte { margin-top: -6px; }
.osw-plinko__cadre { border-radius: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.osw-plinko--neon .osw-plinko__cadre { box-shadow: 0 0 60px rgba(168, 85, 247, .35); }
.osw-fusee__cadre { overflow: hidden; border-radius: 28px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .5); }
.osw-fusee--neon .osw-fusee__cadre { box-shadow: 0 0 0 3px #a855f7, 0 0 50px rgba(168, 85, 247, .55); }
.osw-fusee--retro .osw-fusee__cadre { box-shadow: 0 0 0 6px #6b7280, 0 0 0 10px #374151, 0 24px 70px rgba(0, 0, 0, .5); }
.osw-aquarium__vitre { position: relative; overflow: hidden; border-radius: 26px; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 0 0 6px rgba(15, 23, 42, .85), 0 30px 70px rgba(0, 0, 0, .5); }
.osw-aquarium__vitre canvas { border-radius: 26px; }
.osw-aquarium--abysses .osw-aquarium__vitre { box-shadow: inset 0 0 0 3px rgba(124, 58, 237, .7), 0 0 50px rgba(124, 58, 237, .45); }

/* Tirage au sort. */
.osw-tirage__info { padding: .35em 1.1em; border-radius: 999px; background: rgba(10, 8, 22, .75); box-shadow: inset 0 0 0 2px var(--c1, #a855f7); white-space: nowrap; }
.osw-tirage--ouvert .osw-tirage__info { animation: osw-tirage-appel 1.6s ease-in-out infinite; }
@keyframes osw-tirage-appel { 50% { box-shadow: inset 0 0 0 2px var(--c2, #facc15), 0 0 28px var(--c1, #a855f7); } }
.osw-tirage__plateau { position: relative; width: 100%; overflow: hidden; border-radius: 26px; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(160deg, #1a1033, #07060f); box-shadow: inset 0 0 0 3px var(--c1, #a855f7), 0 0 45px rgba(0, 0, 0, .45); transition: background .4s; }
.osw-tirage__plateau--nuit { background: #04030a; }
.osw-tirage__repos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .15em; }
.osw-tirage__ticket { line-height: 1; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); animation: osw-tirage-repos 2.4s ease-in-out infinite; }
.osw-tirage__appel { white-space: nowrap; animation: osw-tirage-clin 1.6s ease-in-out infinite; }
@keyframes osw-tirage-clin { 50% { opacity: .55; } }
@keyframes osw-tirage-repos { 50% { transform: scale(1.12) rotate(-6deg); } }
.osw-tirage__nuage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; min-height: 1em; }
.osw-tirage__pseudo { padding: .25em .85em; border-radius: 999px; background: hsl(var(--h, 270) 75% 45% / .9); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); white-space: nowrap; }
.osw-tirage__fenetre { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }
.osw-tirage__bande { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.osw-tirage__item { display: grid; place-items: center; white-space: nowrap; }
.osw-tirage__ligne { position: absolute; left: 4%; right: 4%; top: 50%; transform: translateY(-50%); border-radius: 18px; box-shadow: inset 0 0 0 3px var(--c2, #facc15), 0 0 30px var(--c2, #facc15); pointer-events: none; }
.osw-tirage__item--elu { animation: osw-tirage-elu 1.2s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes osw-tirage-elu { 0% { transform: scale(1); } 40% { transform: scale(1.35); filter: drop-shadow(0 0 22px var(--c2, #facc15)); } 100% { transform: scale(1.18); filter: drop-shadow(0 0 14px var(--c2, #facc15)); } }
.osw-tirage__grille { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 12px; padding: 22px; }
.osw-tirage__case { overflow: hidden; padding: .5em .4em; border-radius: 14px; background: rgba(255, 255, 255, .07); text-align: center; text-overflow: ellipsis; white-space: nowrap; opacity: .55; transition: transform .14s, background .14s, opacity .14s, box-shadow .14s; }
.osw-tirage__case--vise { opacity: 1; background: var(--c1, #a855f7); transform: scale(1.08); box-shadow: 0 0 26px var(--c1, #a855f7); }
.osw-tirage__case--elu { position: relative; z-index: 2; opacity: 1; background: var(--c2, #facc15); animation: osw-tirage-case 1s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes osw-tirage-case { 0% { transform: scale(1.08); } 50% { transform: scale(1.6); } 100% { transform: scale(1.4); box-shadow: 0 0 50px var(--c2, #facc15); } }
.osw-tirage__spot { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 45%, transparent 68%); transform: translate(-50%, -50%); transition: left .12s ease-out, top .12s ease-out; mix-blend-mode: screen; pointer-events: none; }
.osw-tirage__table { position: absolute; inset: 0; perspective: 1200px; }
.osw-tirage__carte { position: absolute; left: 50%; top: 50%; transition: transform .3s cubic-bezier(.3, .8, .3, 1.15), opacity .5s; }
.osw-tirage__recto { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .9, .3, 1.15); }
.osw-tirage__dos, .osw-tirage__face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 8%; border-radius: 14px; backface-visibility: hidden; text-align: center; overflow-wrap: anywhere; }
.osw-tirage__dos { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 8px, transparent 8px 16px), linear-gradient(135deg, var(--c1, #a855f7), var(--c2, #facc15)); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 10px 22px rgba(0, 0, 0, .45); }
.osw-tirage__face { background: linear-gradient(160deg, #ffffff, #fef3c7); box-shadow: inset 0 0 0 4px var(--c2, #facc15), 0 0 40px var(--c2, #facc15); transform: rotateY(180deg); }
.osw-tirage__carte--ecartee { opacity: 0; }
.osw-tirage__carte--retournee { z-index: 3; }
.osw-tirage__carte--retournee .osw-tirage__recto { transform: rotateY(180deg) scale(1.75); }

/* Ballon. */
.osw-ballon__boite { position: relative; }
.osw-ballon__svg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; overflow: visible; transition: opacity .05s; }
.osw-ballon__ficelle { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2.2; }
.osw-ballon__info { margin-top: 4px; }

/* Tir à la corde. */
.osw-corde { gap: 10px; }
.osw-corde__score { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.osw-corde__equipe { display: grid; justify-items: center; gap: 2px; min-width: 30%; padding: .25em .8em; border-radius: 18px; }
.osw-corde__equipe--a { background: linear-gradient(135deg, var(--ca), rgba(0, 0, 0, .35)); box-shadow: 0 0 24px var(--ca); }
.osw-corde__equipe--b { background: linear-gradient(225deg, var(--cb), rgba(0, 0, 0, .35)); box-shadow: 0 0 24px var(--cb); }
.osw-corde__manches { min-height: 1em; font-size: 22px; }
.osw-corde__arene { position: relative; width: 100%; overflow: hidden; border-radius: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.osw-corde__sol { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
.osw-corde__milieu { position: absolute; left: 50%; bottom: 0; height: 36%; width: 0; border-left: 4px dashed rgba(255, 255, 255, .8); }
.osw-corde__groupe { position: absolute; inset: 0; will-change: transform; }
.osw-corde__svg { position: absolute; left: -20%; top: 48%; overflow: visible; }
.osw-corde__fil { fill: none; stroke: #92400e; stroke-width: 12; stroke-linecap: round; }
.osw-corde__fil2 { fill: none; stroke: #fbbf24; stroke-width: 12; stroke-dasharray: 6 9; stroke-linecap: round; opacity: .55; }
.osw-corde__joueurs { position: absolute; bottom: 25%; display: flex; justify-content: space-around; width: 33%; }
.osw-corde__joueurs--a { left: 13%; flex-direction: row; }
.osw-corde__joueurs--b { right: 13%; flex-direction: row-reverse; }
.osw-corde__joueur { display: inline-block; line-height: 1; transform-origin: 50% 100%; animation: osw-corde-effort 1.1s ease-in-out infinite; }
.osw-corde__joueurs--a .osw-corde__joueur { --sens: -1; --face: -1; }
.osw-corde__joueurs--b .osw-corde__joueur { --sens: 1; --face: 1; }
@keyframes osw-corde-effort { 0%, 100% { transform: scaleX(var(--face)) rotate(calc(var(--sens) * -16deg)); } 50% { transform: scaleX(var(--face)) rotate(calc(var(--sens) * -22deg)) translateY(-3px); } }
.osw-corde--tire .osw-corde__joueur { animation: osw-corde-tire .45s cubic-bezier(.3, 1.6, .4, 1), osw-corde-effort 1.1s ease-in-out .45s infinite; }
@keyframes osw-corde-tire { 0% { transform: scaleX(var(--face)) rotate(calc(var(--sens) * -16deg)); } 40% { transform: scaleX(var(--face)) rotate(calc(var(--sens) * -34deg)) translateX(calc(var(--sens) * -10px)); } 100% { transform: scaleX(var(--face)) rotate(calc(var(--sens) * -16deg)); } }
.osw-corde--fin-a .osw-corde__joueurs--a .osw-corde__joueur, .osw-corde--fin-b .osw-corde__joueurs--b .osw-corde__joueur { animation: osw-corde-joie .6s ease-in-out infinite alternate; }
.osw-corde--fin-a .osw-corde__joueurs--b .osw-corde__joueur, .osw-corde--fin-b .osw-corde__joueurs--a .osw-corde__joueur { animation: none; transition: transform .6s cubic-bezier(.5, 0, .7, .4); transform: scaleX(var(--face)) rotate(calc(var(--sens) * 75deg)) translateY(20%); }
@keyframes osw-corde-joie { 0% { transform: scaleX(var(--face)) translateY(0) rotate(0); } 100% { transform: scaleX(var(--face)) translateY(-30%) rotate(calc(var(--sens) * 10deg)); } }
.osw-corde--cartoon .osw-corde__arene { background: linear-gradient(180deg, #7dd3fc, #e0f2fe 70%); }
.osw-corde--cartoon .osw-corde__sol { background: radial-gradient(ellipse 14% 40% at 50% 70%, #7c4a1e 60%, transparent 62%), linear-gradient(180deg, #4ade80, #15803d); }
.osw-corde--neon .osw-corde__arene { background: radial-gradient(circle at 50% 120%, rgba(168, 85, 247, .35), transparent 60%), #05040d; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15), 0 0 40px rgba(168, 85, 247, .35); }
.osw-corde--neon .osw-corde__sol { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .12) 46px 48px), linear-gradient(90deg, var(--ca), transparent 45%, transparent 55%, var(--cb)); opacity: .55; }
.osw-corde--neon .osw-corde__fil { stroke: #ffffff; filter: drop-shadow(0 0 8px #ffffff); }
.osw-corde--neon .osw-corde__fil2 { stroke: #22d3ee; }
.osw-corde--plage .osw-corde__arene { background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 50%, #38bdf8 50%, #0ea5e9 66%); }
.osw-corde--plage .osw-corde__sol { height: 38%; background: radial-gradient(ellipse 12% 30% at 50% 60%, #b45309 0 30%, transparent 32%), linear-gradient(180deg, #fde68a, #f59e0b); }

/* Compteur de gages. */
.osw-gages__carte { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 26px 22px 22px; border-radius: 20px; text-align: center; }
.osw-gages__ligne { display: flex; align-items: center; justify-content: center; gap: .3em; flex-wrap: wrap; }
.osw-gages__chiffre { min-width: 1.2ch; line-height: 1; font-variant-numeric: tabular-nums; }
.osw-gages__mot { line-height: 1.05; }
.osw-gages__emoji { line-height: 1; animation: osw-gages-emoji 1.6s ease-in-out infinite; }
@keyframes osw-gages-emoji { 50% { transform: translateY(-6%) rotate(-8deg) scale(1.06); } }
.osw-gages--zero .osw-gages__emoji { animation: none; filter: grayscale(.4); }
.osw-gages__batons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.osw-gages__paquet { width: 60px; height: 44px; }
.osw-gages__craie { fill: none; stroke: rgba(248, 250, 252, .9); stroke-width: 4; stroke-linecap: round; }
.osw-gages__volant { position: absolute; left: 0; right: 0; top: 10%; text-align: center; white-space: nowrap; pointer-events: none; animation: osw-gages-arrive 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }
.osw-gages__volant--monte { animation-name: osw-gages-part; }
@keyframes osw-gages-arrive { 0% { opacity: 0; transform: translateY(-160%) scale(1.8); } 35% { opacity: 1; } 75% { opacity: 1; transform: translateY(40%) scale(1); } 100% { opacity: 0; transform: translateY(60%) scale(.6); } }
@keyframes osw-gages-part { 0% { opacity: 0; transform: translateY(40%) scale(.7); } 25% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-180%) scale(1); } }
.osw-gages--postit .osw-gages__carte { background: linear-gradient(180deg, #fde047, #facc15 85%, #eab308); border-radius: 4px 4px 22px 4px; transform: rotate(-2.5deg); box-shadow: 0 18px 30px rgba(0, 0, 0, .35), inset 0 -18px 30px rgba(161, 98, 7, .25); }
.osw-gages__scotch { position: absolute; top: -14px; left: 33%; width: 34%; height: 30px; transform: rotate(2deg); background: rgba(255, 255, 255, .55); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.osw-gages--ardoise .osw-gages__carte { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .06), transparent 50%), #1f3b2c; border: 14px solid #8b5a2b; border-radius: 10px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 20px 40px rgba(0, 0, 0, .45); }
.osw-gages--led .osw-gages__carte { background: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 8px 8px, #050505; border: 6px solid #27272a; border-radius: 16px; box-shadow: 0 0 0 3px #3f3f46, 0 20px 40px rgba(0, 0, 0, .5); }
.osw-gages--led .osw-gages__chiffre, .osw-gages--led .osw-gages__mot, .osw-gages--led .osw-gages__titre { filter: drop-shadow(0 0 10px var(--c1)); letter-spacing: .06em; }
.osw-gages--neon .osw-gages__carte { background: rgba(8, 5, 20, .82); border-radius: 24px; box-shadow: inset 0 0 0 3px var(--c1), 0 0 30px var(--c1), inset 0 0 30px rgba(168, 85, 247, .25); }
.osw-gages--neon .osw-gages__chiffre { filter: drop-shadow(0 0 14px var(--c2)); }

/* Jauge de hype. */
.osw-hype__niveau { white-space: nowrap; transition: transform .2s; }
.osw-hype__cadre { filter: brightness(calc(1 + var(--flash, 0))); }
.osw-hype--max .osw-hype__niveau { animation: osw-hype-max .5s ease-in-out infinite alternate; }
@keyframes osw-hype-max { to { transform: scale(1.08); filter: drop-shadow(0 0 16px #ff2d55); } }
.osw-hype--barre .osw-hype__cadre { padding: 6px; border-radius: 18px; background: rgba(8, 5, 20, .78); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }