/* MoonTik — aperçus catalogue + widgets (alerte texte, level up, records, timer, jeux, médias) */

@font-face { font-family: "LG"; src: url("/static/fonts/LuckiestGuy-Regular.ttf"); }
@font-face { font-family: "BG"; src: url("/static/fonts/Bangers-Regular.ttf"); }
@font-face { font-family: "LI"; src: url("/static/fonts/LilitaOne-Regular.ttf"); }

/* —— Canon : affût à roue, fût conique, pas de silhouette « tube + deux boules » —— */
.ov-prev-canon { --accent: #fbbf24; --wood: #8b5a2b; --wood-dk: #3f2a12; --iron: #4b5563; background: radial-gradient(circle at 70% 30%, rgba(251,191,36,.12), transparent 55%); }
.ov-cn-stage { position: absolute; inset: 0; overflow: hidden; }
.ov-cn-cannon { position: absolute; left: 4px; bottom: 14px; width: 118px; height: 86px; transform-origin: 36% 80%; animation: ovCnRecoil 1.8s ease-out infinite; z-index: 3; }
.ov-cn-frame { display: none; position: absolute; inset: -10px -8px -6px -10px; border-radius: 14px; border: 2px solid #e8c56b; box-shadow: 0 0 0 1px #8a5a07, inset 0 0 0 1px rgba(255,215,120,.4); pointer-events: none; z-index: 0; }
.ov-cn-cannon.has-cadre .ov-cn-frame { display: block; }
.ov-cn-carriage {
  position: absolute; left: 8px; bottom: 14px; width: 58px; height: 18px; z-index: 1;
  background: linear-gradient(180deg, #a8743b 0%, #6b4018 55%, #3f2a12 100%);
  clip-path: polygon(2% 45%, 22% 0, 96% 18%, 88% 100%, 10% 100%);
  box-shadow: 1px 2px 0 #1a0c04;
}
.ov-cn-carriage::after { /* essieu */
  content:""; position:absolute; left: 22px; bottom: 2px; width: 22px; height: 6px; background: #2a1608; border-radius: 2px;
}
.ov-cn-wheel {
  position: absolute; left: 24px; bottom: 0; width: 38px; height: 38px; border-radius: 50%; z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #d7b07a 0 16%, transparent 17%),
    repeating-conic-gradient(#2a1608 0 11deg, #c4a574 11deg 16deg, #5c3a1a 16deg 28deg);
  border: 3px solid #2a1608;
  box-shadow: inset 0 0 0 3px #8b5a2b, 1px 2px 0 rgba(0,0,0,.4);
}
.ov-cn-wheel::before { /* rayons plus lisibles */
  content:""; position:absolute; inset: 5px; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, transparent 0 14deg, #2a1608 14deg 16deg);
}
.ov-cn-wheel::after {
  content:""; position:absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0d9a8, #8b5a2b 70%);
  border: 2px solid #2a1608;
}
.ov-cn-barrel {
  position: absolute; left: 18px; bottom: 28px; width: 86px; height: 24px; z-index: 3;
  transform: rotate(-30deg); transform-origin: 18px 50%;
}
.ov-cn-tube {
  position: absolute; left: 0; top: 3px; width: 72px; height: 18px;
  background: linear-gradient(180deg, #8b93a3 0%, #3d4553 42%, #161920 100%);
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 2px 3px 0 rgba(0,0,0,.35);
  border: 2px solid #0b0b12; border-right: 0;
  box-sizing: border-box;
}
.ov-cn-band {
  position: absolute; left: 22px; top: 1px; width: 7px; height: 22px;
  background: linear-gradient(180deg, #cfd5de, #3a404c);
  border: 2px solid #0b0b12; border-radius: 1px; z-index: 2;
}
.ov-cn-muzzle {
  position: absolute; right: 0; top: 0; width: 12px; height: 24px; z-index: 3;
  background: linear-gradient(180deg, #c5ccd6, #2d3340 55%, #0d0f14);
  border: 2px solid #0b0b12; border-radius: 3px;
  box-shadow: inset 2px 0 0 rgba(0,0,0,.45);
}
.ov-cn-muzzle::after {
  content:""; position:absolute; left: 3px; top: 5px; bottom: 5px; width: 4px;
  background: #0b0b12; border-radius: 1px;
}
.ov-cn-flash { position: absolute; left: 108px; bottom: 58px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff7, var(--accent) 45%, transparent 70%); animation: ovCnFlash 1.8s ease-out infinite; pointer-events: none; z-index: 4; }
.ov-cn-shot { position: absolute; left: 108px; bottom: 48px; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 4px 4px #0008); z-index: 2; animation: ovCnFly 1.8s ease-out infinite; }
.ov-cn-shot.s2 { animation-delay: .55s; width: 24px; height: 24px; }
.ov-cn-shot.s3 { animation-delay: 1.1s; width: 22px; height: 22px; }
.ov-cn-donor { position: absolute; left: 50%; bottom: 8px; transform: translateX(-30%); color: #fff; font: 700 11px/1 LI, sans-serif; text-shadow: 0 2px 0 #000, 0 0 8px #000; z-index: 4; white-space: nowrap; }
@keyframes ovCnRecoil { 0%, 18% { transform: rotate(0); } 22% { transform: rotate(-8deg) translateX(-2px); } 36%, 100% { transform: rotate(0); } }
@keyframes ovCnFlash { 0%, 16% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; transform: scale(1.4); } 40%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ovCnFly { 0% { transform: translate(0,0) rotate(0) scale(.6); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(120px,-78px) rotate(200deg) scale(1); opacity: 0; } }

.ov-prev-canon.skin-cirque .ov-cn-tube {
  background: repeating-linear-gradient(90deg, var(--stripe, #e11d48) 0 8px, #fff7e8 8px 16px);
  box-shadow: 0 0 0 1px #b45309, 2px 3px 0 rgba(0,0,0,.3);
}
.ov-prev-canon.skin-cirque .ov-cn-muzzle, .ov-prev-canon.skin-cirque .ov-cn-band {
  background: linear-gradient(180deg, #fff1a8, #e0a92a 50%, #8a5a07); border-color: #b45309;
}
.ov-prev-canon.skin-cirque .ov-cn-carriage { background: repeating-linear-gradient(135deg, #e11d48 0 8px, #fff7ed 8px 16px); }
.ov-prev-canon.skin-cirque .ov-cn-wheel { border-color: #b45309; box-shadow: inset 0 0 0 3px #f5d78e, 0 0 0 1px #b45309; }
.ov-prev-canon.skin-cirque .ov-cn-frame { border-color: #f5d78e; box-shadow: 0 0 0 1px #b45309, inset 0 0 0 1px #fff3; }
.ov-prev-canon.skin-arcade .ov-cn-tube,
.ov-prev-canon.skin-arcade .ov-cn-muzzle,
.ov-prev-canon.skin-arcade .ov-cn-band,
.ov-prev-canon.skin-arcade .ov-cn-carriage {
  background: #0b1220 !important;
  border-color: #22d3ee;
  box-shadow: 0 0 8px #22d3ee, 0 0 16px #ff2bd688;
}
.ov-prev-canon.skin-arcade .ov-cn-wheel {
  background: radial-gradient(circle, #22d3ee 0 14%, transparent 15%), repeating-conic-gradient(#0b1220 0 16deg, #22d3ee 16deg 18deg);
  border-color: #ff2bd6; box-shadow: 0 0 8px #22d3ee;
}
.ov-prev-canon.skin-arcade .ov-cn-wheel::after { background: #0b1220; border-color: #22d3ee; }
.ov-prev-canon.skin-arcade .ov-cn-frame { border-color: #22d3ee; box-shadow: 0 0 0 1px #0b1220, 0 0 10px #22d3ee88; }

/* —— Feux d'artifice —— */
.ov-prev-feux { background: radial-gradient(circle at 50% 45%, rgba(251,113,133,.18), transparent 60%); }
.ov-fx-core { position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 6px var(--accent, #fb7185); animation: ovFxCore 1.6s ease-out infinite; }
.ov-fx-burst { position: absolute; left: 50%; top: 42%; }
.ov-fx-burst i { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: center/contain no-repeat; animation: ovFxBoom 1.6s ease-out infinite; filter: drop-shadow(0 0 4px var(--accent, #fb7185)); }
.ov-fx-burst i:nth-child(odd) { animation-duration: 1.85s; }
.ov-fx-burst i:nth-child(3n) { animation-delay: .15s; width: 16px; height: 16px; }
.ov-prev-feux.skin-spirale .ov-fx-burst i { animation-name: ovFxSpiral; }
.ov-prev-feux.skin-etoile .ov-fx-burst i { animation-name: ovFxStar; }
.ov-prev-feux.skin-cercle .ov-fx-burst i { animation-timing-function: cubic-bezier(.1,.7,.3,1); }
.ov-fx-donor { position: absolute; left: 50%; top: 68%; transform: translateX(-50%); color: #fff; font: 700 12px/1 LI, sans-serif; text-shadow: 0 2px 0 #000, 0 0 8px #000; white-space: nowrap; }
@keyframes ovFxCore { 0% { opacity: 1; transform: scale(.4); } 40% { opacity: .8; transform: scale(1.6); } 100% { opacity: 0; transform: scale(.2); } }
@keyframes ovFxBoom { 0% { transform: translate(0,0) scale(.25) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.55) rotate(180deg); opacity: 0; } }
@keyframes ovFxSpiral { 0% { transform: rotate(0) translate(0) scale(.3); opacity: 1; } 100% { transform: rotate(280deg) translate(var(--dx), var(--dy)) scale(.5); opacity: 0; } }
@keyframes ovFxStar { 0% { transform: translate(0,0) scale(.2); opacity: 1; } 55% { transform: translate(calc(var(--dx) * .7), calc(var(--dy) * .7)) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

/* —— Timer (4 styles) —— */
.ov-prev-tm { display: grid; place-items: center; height: 100%; }
.ov-tm { position: relative; display: flex; flex-direction: column; align-items: center; --acc: #facc15; }
.ov-tm-num { font-family: LG, sans-serif; font-size: 28px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ov-tm-delta { font-size: 10px; margin-top: 3px; color: #fff; }
.ov-tm-bar { width: 100%; height: 8px; margin-top: 6px; overflow: hidden; }
.ov-tm-bar i { display: block; height: 100%; width: 55%; background: var(--acc); }
.ov-tm-md { position: absolute; font-size: 9px; line-height: 1.05; text-align: center; font-family: LG, sans-serif; }
.ov-tm.skin-classique .ov-tm-num { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.4), 0 2px 0 #000; }
.ov-tm.skin-classique .ov-tm-delta { color: #fff; }
.ov-tm.skin-contour .ov-tm-num { color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
.ov-tm.skin-contour .ov-tm-bar { border-radius: 99px; background: #222; border: 2px solid #000; }
.ov-tm.skin-contour .ov-tm-md { left: -18px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #111; border: 2px solid var(--acc); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #000; }
.ov-tm.skin-manga { background: #f4efe2; border: 3px solid #111; padding: 8px 12px 10px; transform: rotate(var(--tilt, -2.2deg)); box-shadow: 5px 5px 0 #111; background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 2px, transparent 2px 8px); }
.ov-tm.skin-manga .ov-tm-num { font-family: BG, sans-serif; color: #111; font-size: 30px; }
.ov-tm.skin-manga .ov-tm-bar { border: 2px solid #111; background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px); }
.ov-tm.skin-manga .ov-tm-bar i { background: #e11d2e; }
.ov-tm.skin-manga .ov-tm-md { left: -12px; top: -12px; background: #e11d2e; color: #fff; font-family: BG, sans-serif; font-size: 11px; padding: 2px 5px; border: 2px solid #111; transform: rotate(-8deg); }
.ov-tm.skin-sticker { background: #fff; border-radius: 16px; padding: 10px 14px 12px; box-shadow: 0 0 0 3px #fff, 0 8px 16px #0007; transform: rotate(1.5deg); }
.ov-tm.skin-sticker .ov-tm-num { color: #111; }
.ov-tm.skin-sticker .ov-tm-bar { border-radius: 99px; background: #ffe4ea; }
.ov-tm.skin-sticker .ov-tm-bar i { background: #ff2d55; border-radius: 99px; }
.ov-tm.skin-sticker .ov-tm-md { left: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; background: #22d3ee; border: 3px solid #fff; color: #083344; display: grid; place-items: center; box-shadow: 0 3px 8px #0006; }

/* —— Alerte texte —— */
.ov-prev-at { display: grid; place-items: center; height: 100%; padding: 8px; box-sizing: border-box; }
.ov-at { max-width: 92%; text-align: center; animation: ovAtIn 2.4s ease-in-out infinite; }
.ov-at-txt { font-family: LI, sans-serif; font-size: 16px; line-height: 1.15; color: #fff; }
.ov-at.skin-classique .ov-at-txt { text-shadow: 0 0 12px var(--accent, #c4b5fd), 0 2px 0 #000; }
.ov-at.skin-contour .ov-at-txt { font-family: LG, sans-serif; font-size: 15px; color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
.ov-at.skin-manga { background: #f4efe2; border: 3px solid #111; padding: 8px 10px; transform: rotate(-2deg); box-shadow: 4px 4px 0 #111; background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 2px, transparent 2px 8px); }
.ov-at.skin-manga .ov-at-txt { font-family: BG, sans-serif; color: #111; font-size: 17px; }
.ov-at.skin-sticker { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 0 0 3px #fff, 0 8px 16px #0006; transform: rotate(1.2deg); }
.ov-at.skin-sticker .ov-at-txt { color: #111; }
.ov-at.has-frame.skin-classique, .ov-at.has-frame.skin-contour { padding: 8px 12px; border: 2px solid var(--accent, #c4b5fd); border-radius: 12px; background: rgba(8,6,20,.55); }
@keyframes ovAtIn { 0%, 12% { opacity: 0; transform: translateY(8px) scale(.96); } 28%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* —— Level up —— */
.ov-prev-lu { display: grid; place-items: center; height: 100%; }
.ov-lu { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #fff; }
.ov-lu-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #38bdf8); border: 2px solid #fff; display: grid; place-items: center; font: 800 13px/1 Outfit, sans-serif; flex-shrink: 0; }
.ov-lu-kind { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #c4b5fd); }
.ov-lu-user { font: 700 11px/1.1 Outfit, sans-serif; }
.ov-lu-lv { font-family: LI, sans-serif; font-size: 16px; display: flex; align-items: baseline; gap: 4px; }
.ov-lu-lv b { animation: ovLuPop 1.8s ease-in-out infinite; color: var(--accent, #fbbf24); }
.ov-lu.skin-classique { }
.ov-lu.skin-contour { background: #0b1220; border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 8px; }
.ov-lu.skin-contour .ov-lu-lv { font-family: LG, sans-serif; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; }
.ov-lu.skin-manga { background: #f4efe2; border: 3px solid #111; transform: rotate(-2deg); box-shadow: 4px 4px 0 #111; color: #111; }
.ov-lu.skin-manga .ov-lu-kind { color: #e11d2e; font-family: BG, sans-serif; font-size: 10px; }
.ov-lu.skin-manga .ov-lu-lv { font-family: BG, sans-serif; color: #111; }
.ov-lu.skin-sticker { background: #fff; color: #111; border-radius: 16px; box-shadow: 0 0 0 3px #fff, 0 8px 16px #0006; transform: rotate(1deg); }
.ov-lu.skin-sticker .ov-lu-kind { color: #7c3aed; }
@keyframes ovLuPop { 0%, 40% { transform: scale(1); } 55% { transform: scale(1.25); } 70%, 100% { transform: scale(1); } }

/* —— Records de campagne —— */
.ov-prev-rc { display: grid; place-items: center; height: 100%; padding: 8px; box-sizing: border-box; }
.ov-rc { width: 92%; max-width: 220px; background: #111118; border-radius: 10px; padding: 8px 8px 10px; box-shadow: 0 8px 18px #0007; }
.ov-rc-title { display: block; margin: -14px auto 8px; width: fit-content; background: var(--accent, #ff7a00); color: #fff; font: 800 8px/1 Outfit, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.ov-rc.skin-contour .ov-rc-title { -webkit-text-stroke: 0; border: 2px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 6px; }
.ov-rc.skin-manga { background: #f4efe2; transform: rotate(-1.5deg); box-shadow: 5px 5px 0 #111; border: 3px solid #111; }
.ov-rc.skin-manga .ov-rc-title { font-family: BG, sans-serif; font-size: 10px; letter-spacing: 0; border-radius: 0; transform: rotate(-2deg); }
.ov-rc.skin-sticker { background: transparent; box-shadow: none; }
.ov-rc-row { display: flex; align-items: center; gap: 6px; background: #fff; color: #111; border-radius: 12px; padding: 5px 8px; margin: 5px 0; font: 700 11px/1 Outfit, sans-serif; }
.ov-rc.skin-sticker.is-pill .ov-rc-row, .ov-rc.is-pill .ov-rc-row { border-radius: 99px; }
.ov-rc.skin-sticker .ov-rc-row { box-shadow: 0 3px 8px #0005; transform: rotate(var(--sticker-tilt, 1.8deg)); }
.ov-rc.skin-sticker .ov-rc-row:nth-child(odd) { transform: rotate(calc(var(--sticker-tilt, 1.8deg) * -1)); }
.ov-rc.skin-manga .ov-rc-row { border: 2px solid #111; border-radius: 8px; background: #fff; }
.ov-rc.skin-contour .ov-rc-row { border: 2px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 8px; }
.ov-rc-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #a78bfa); color: #fff; display: grid; place-items: center; font-size: 9px; flex-shrink: 0; }
.ov-rc-flag { font-size: 11px; }
.ov-rc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-rc-val { font-family: LI, sans-serif; font-size: 13px; }
.ov-rc.is-invert .ov-rc-row { flex-direction: row-reverse; }

/* —— Multi alerte cadeau+follow+abonné (4 styles) —— */
.ov-prev-multi { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; height: 100%; box-sizing: border-box; }
.ov-mu { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; color: #fff; font: 700 10px/1.1 Outfit, sans-serif; animation: ovMuPop 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .28s); }
.ov-mu i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; }
.ov-mu.gift i { background: #fb7185; }
.ov-mu.follow i { background: #38bdf8; }
.ov-mu.sub i { background: #fbbf24; color: #3b1d00; }
.ov-prev-multi.skin-classique .ov-mu { background: rgba(15,10,30,.78); border: 1px solid rgba(196,181,253,.4); box-shadow: 0 0 8px rgba(167,139,250,.2); }
.ov-prev-multi.skin-classique .ov-mu span { font-family: LG, sans-serif; font-size: 10px; letter-spacing: .02em; }
.ov-prev-multi.skin-contour .ov-mu { background: #0b1220; border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 8px; }
.ov-prev-multi.skin-contour .ov-mu span { font-family: LG, sans-serif; font-size: 10px; color: #fff; -webkit-text-stroke: 1.4px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 #000; }
.ov-prev-multi.skin-manga { background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px); }
.ov-prev-multi.skin-manga .ov-mu { background: #f4efe2; color: #111; border: 2px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111; transform: rotate(-2deg); }
.ov-prev-multi.skin-manga .ov-mu:nth-child(2) { transform: rotate(1.5deg); }
.ov-prev-multi.skin-manga .ov-mu:nth-child(3) { transform: rotate(-1deg); }
.ov-prev-multi.skin-manga .ov-mu span { font-family: BG, sans-serif; font-size: 12px; }
.ov-prev-multi.skin-sticker { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 6px; }
.ov-mu-stk { display: flex; align-items: center; gap: 6px; }
.ov-stk-hero { position: relative; width: 42px; height: 42px; flex: none; }
.ov-stk-hero > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 3px 2px #0006); transform: rotate(-8deg); position: relative; z-index: 2; }
.ov-stk-trail { position: absolute; left: 18px; top: 8px; display: flex; gap: 0; z-index: 1; }
.ov-stk-trail img { width: 16px; height: 16px; object-fit: contain; opacity: .7; filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff); }
.ov-stk-trail img:nth-child(2) { transform: translate(8px, 4px) scale(.85); opacity: .5; }
.ov-stk-trail img:nth-child(3) { transform: translate(16px, 8px) scale(.7); opacity: .35; }
.ov-stk-bubs { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ov-stk-b { display: inline-block; border: 2px solid #fff; border-radius: 10px; padding: 2px 7px; font: 800 10px/1 LI, "Lilita One", sans-serif; box-shadow: 1px 2px 0 #0004; }
.ov-stk-b.name { background: #fff; color: #111; transform: rotate(-6deg); }
.ov-stk-b.gift { background: #22d3ee; color: #083344; transform: rotate(3deg); }
.ov-stk-b.coins { background: #fb7185; color: #fff; transform: rotate(-2deg); }
.ov-stk-b.thanks { background: #22d3ee; color: #fff; transform: rotate(3deg); }
.ov-stk-b.thanks.sub { background: #a78bfa; }
.ov-stk-av { width: 36px; height: 36px; border-radius: 50%; background: #ff8fab; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px #0005; display: grid; place-items: center; font: 800 16px/1 LI, sans-serif; flex: none; }
.ov-stk-av.sub { background: #fbbf24; color: #3b1d00; }
@keyframes ovMuPop { 0%, 12% { opacity: 0; transform: translateX(-8px); } 28%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* —— Mode élimination —— */
.ov-prev-elim { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.ov-elim-grid { display: grid; grid-template-columns: repeat(3, 28px); gap: 5px; }
.ov-elim-p { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #312e81, #1e1b4b); color: #fff; display: grid; place-items: center; font: 800 11px/1 Outfit, sans-serif; position: relative; box-shadow: 0 0 0 1px #a78bfa55; }
.ov-elim-p.out { filter: grayscale(1) brightness(.5); }
.ov-elim-p.out::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #ef4444; font-size: 18px; text-shadow: 0 0 6px #ef4444; animation: ovElimX .9s ease-out infinite alternate; }
.ov-elim-tag { font: 800 8px/1 Outfit, sans-serif; letter-spacing: .08em; color: #ef4444; }
@keyframes ovElimX { to { transform: scale(1.15); } }

/* —— Bocal —— */
.ov-prev-jar { display: grid; place-items: center; height: 100%; }
.ov-jar { position: relative; width: 70px; height: 86px; }
.ov-jar-glass { position: absolute; left: 8px; top: 14px; width: 54px; height: 68px; border-radius: 8px 8px 18px 18px; background: linear-gradient(180deg, #dff1ffaa, #9ec5ff44 40%, #7dd3fc33); border: 3px solid #f5d77a; box-shadow: inset 0 0 12px #fff8, 0 8px 16px #0005; overflow: hidden; }
.ov-jar-lid { position: absolute; left: 14px; top: 4px; width: 42px; height: 14px; border-radius: 6px; background: linear-gradient(#ffe9a0, #d4a017); border: 2px solid #b45309; z-index: 2; }
.ov-jar-glass img { position: absolute; width: 18px; height: 18px; object-fit: contain; animation: ovJarFloat 2.4s ease-in-out infinite; }
.ov-jar-glass img:nth-child(1) { left: 6px; bottom: 10px; }
.ov-jar-glass img:nth-child(2) { left: 22px; bottom: 22px; animation-delay: .4s; }
.ov-jar-glass img:nth-child(3) { left: 14px; bottom: 36px; animation-delay: .8s; }
.ov-prev-jar.skin-neon .ov-jar-glass { border-color: #5eead4; box-shadow: 0 0 14px #5eead4aa, inset 0 0 10px #5eead466; }
.ov-prev-jar.skin-candy .ov-jar-glass { border-color: #fb7185; background: linear-gradient(180deg, #ffe4eecc, #fb718544); }
@keyframes ovJarFloat { 50% { transform: translateY(-5px) rotate(12deg); } }

/* —— Bingo —— */
.ov-prev-bingo { display: grid; place-items: center; height: 100%; }
.ov-bingo { display: grid; grid-template-columns: repeat(3, 24px); gap: 3px; padding: 8px; border-radius: 8px; background: #f4e6c3; box-shadow: 0 0 0 3px #e8d5a3, 0 6px 12px #0005; }
.ov-bingo b { width: 24px; height: 24px; border-radius: 4px; background: #fffdf6; display: grid; place-items: center; font-size: 11px; border: 1px solid #d6c394; }
.ov-bingo b.on { background: #22c55e; color: #fff; border-color: #15803d; animation: ovBingoPop 1.6s ease-in-out infinite; }
.ov-prev-bingo.skin-neon .ov-bingo { background: #0b1220; box-shadow: 0 0 0 2px #22d3ee, 0 0 12px #22d3ee66; }
.ov-prev-bingo.skin-neon b { background: #111827; color: #e0f2fe; border-color: #164e63; }
.ov-prev-bingo.skin-or .ov-bingo { background: #1c1408; box-shadow: 0 0 0 2px #f5d78e; }
.ov-prev-bingo.skin-arcade .ov-bingo { background: #1a1030; box-shadow: 0 0 0 2px #e879f9; }
@keyframes ovBingoPop { 50% { transform: scale(1.08); } }

/* —— Tableau battle —— */
.ov-prev-bs { display: grid; place-items: center; height: 100%; }
.ov-bs { display: flex; align-items: stretch; gap: 0; width: 90%; background: #0b1020; border-radius: 10px; overflow: hidden; border: 1px solid #7c3aed66; }
.ov-bs div { flex: 1; padding: 8px 6px; text-align: center; color: #fff; }
.ov-bs div:first-child { background: linear-gradient(180deg, #1d4ed8, #1e3a8a); }
.ov-bs div:last-child { background: linear-gradient(180deg, #be185d, #9d174d); }
.ov-bs small { display: block; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ov-bs b { font-family: LI, sans-serif; font-size: 18px; }

/* —— Jeux (mini scènes) —— */
.ov-prev-game { position: relative; height: 100%; overflow: hidden; }
.ov-snake { position: absolute; inset: 0; background: #050814; }
.ov-snake .s1, .ov-snake .s2 { position: absolute; height: 8px; border-radius: 4px; }
.ov-snake .s1 { left: 10%; top: 40%; width: 42%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: ovSnk 2s ease-in-out infinite; }
.ov-snake .s2 { right: 8%; top: 58%; width: 38%; background: #f472b6; box-shadow: 0 0 8px #f472b6; animation: ovSnk 2s ease-in-out infinite reverse; }
.ov-snake .orb { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 6px #fbbf24; top: 48%; left: 48%; }
@keyframes ovSnk { 50% { transform: translateX(8px) rotate(-6deg); } }

.ov-punch { position: absolute; inset: 0; background: linear-gradient(#2a1060, #0b0520); }
.ov-punch .hp { position: absolute; top: 8px; height: 6px; border-radius: 3px; background: #22c55e; }
.ov-punch .hp.a { left: 8px; width: 38%; }
.ov-punch .hp.b { right: 8px; width: 30%; background: #ef4444; }
.ov-punch .f { position: absolute; bottom: 14px; width: 22px; height: 36px; border-radius: 6px 6px 4px 4px; }
.ov-punch .f.a { left: 22%; background: #38bdf8; animation: ovPunchL 1.2s ease-in-out infinite; }
.ov-punch .f.b { right: 22%; background: #f472b6; animation: ovPunchR 1.2s ease-in-out infinite; }
@keyframes ovPunchL { 40% { transform: translateX(10px) rotate(12deg); } }
@keyframes ovPunchR { 40% { transform: translateX(-10px) rotate(-12deg); } }

.ov-cubes { position: absolute; inset: 0; background: linear-gradient(#7dd3fc, #38bdf8 40%, #86efac); }
.ov-cubes i { position: absolute; width: 16px; height: 16px; background: #fb7185; border: 2px solid #9d174d; left: 50%; margin-left: -8px; animation: ovCube 2.4s ease-in-out infinite; }
.ov-cubes i:nth-child(1) { bottom: 12px; }
.ov-cubes i:nth-child(2) { bottom: 28px; background: #a78bfa; border-color: #5b21b6; animation-delay: .2s; }
.ov-cubes i:nth-child(3) { bottom: 44px; background: #fbbf24; border-color: #b45309; animation-delay: .4s; }
.ov-cubes i:nth-child(4) { bottom: 60px; background: #22d3ee; border-color: #0e7490; animation-delay: .6s; }
@keyframes ovCube { 0%, 70% { transform: translateY(0); } 85% { transform: translateY(-10px); } }

.ov-clash { position: absolute; inset: 6%; background: #030712; border: 2px solid #14532d; border-radius: 12px; overflow: hidden; }
.ov-clash .board { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #052e16, #030712 70%); display: block; }
.ov-clash .sn { position: absolute; height: 14px; border-radius: 8px; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.ov-clash .sn.s1 { left: 12%; top: 46%; width: 42%; animation: ovSnk 1.6s ease-in-out infinite; }
.ov-clash .sn.s2 { left: 48%; top: 40%; width: 16%; transform: rotate(-28deg); }
.ov-clash .sn.s3 { left: 58%; top: 34%; width: 12%; transform: rotate(-50deg); }
.ov-clash .orb { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #e879f9; box-shadow: 0 0 8px #e879f9; top: 28%; right: 16%; animation: ovLuPop 1.4s ease-in-out infinite; }
.ov-clash .worm { position: absolute; width: 28px; height: 10px; border-radius: 8px; background: #fb7185; box-shadow: 0 0 8px #fb7185; left: 22%; bottom: 22%; transform: rotate(18deg); }

/* —— Jumpscare / Media / Spotify —— */
.ov-prev-js { display: grid; place-items: center; height: 100%; background: #000; }
.ov-js { font: 900 28px/1 BG, sans-serif; color: #fff; text-shadow: 0 0 16px #ef4444; animation: ovJs 1.2s steps(2) infinite; }
.ov-js span { display: block; font-size: 28px; }
@keyframes ovJs { 50% { transform: scale(1.2) rotate(-4deg); filter: invert(1); } }

.ov-prev-media { display: grid; place-items: center; height: 100%; }
.ov-media { width: 72px; height: 52px; border-radius: 8px; background: #111; border: 3px solid #c4b5fd; box-shadow: 0 8px 16px #0006; display: grid; place-items: center; position: relative; overflow: hidden; }
.ov-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #312e81, #0f172a); }
.ov-media i { position: relative; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 6px #fff); }

.ov-prev-sp { display: grid; place-items: center; height: 100%; }
.ov-sp { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #121212; color: #fff; width: 86%; max-width: 200px; box-shadow: 0 8px 16px #0006; }
.ov-sp-cover { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #1db954, #065f46); flex-shrink: 0; }
.ov-sp-title { font: 700 11px/1.1 Outfit, sans-serif; }
.ov-sp-art { font-size: 9px; opacity: .7; }
.ov-sp-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 3px; }
.ov-sp-eq i { width: 3px; background: #1db954; border-radius: 1px; animation: ovEq 0.8s ease-in-out infinite; }
.ov-sp-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.ov-sp-eq i:nth-child(2) { height: 80%; animation-delay: .15s; }
.ov-sp-eq i:nth-child(3) { height: 55%; animation-delay: .3s; }
.ov-sp-eq i:nth-child(4) { height: 90%; animation-delay: .1s; }
.ov-prev-sp.skin-cover .ov-sp { flex-direction: column; text-align: center; }
.ov-prev-sp.skin-cover .ov-sp-cover { width: 48px; height: 48px; }
.ov-prev-sp.skin-neon .ov-sp { background: #0b0520; border: 1px solid #1db954; box-shadow: 0 0 12px #1db95466; }
@keyframes ovEq { 50% { transform: scaleY(.4); } }

/* Widgets plein écran */
.mtom-widget { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; display: grid; place-items: center; }
.mtom-widget .ov-live-preview { width: min(520px, 94vw); height: auto; min-height: 120px; }
.mtom-widget .ov-prev-rc, .mtom-widget .ov-prev-at, .mtom-widget .ov-prev-lu, .mtom-widget .ov-prev-tm { min-height: 160px; }
.mtom-widget .ov-tm-num { font-size: 64px; }
.mtom-widget .ov-at-txt { font-size: 36px; }
.mtom-widget .ov-lu-lv { font-size: 32px; }
.mtom-widget .ov-rc { max-width: 360px; }
.mtom-widget .ov-rc-title { font-size: 13px; padding: 6px 16px; }
.mtom-widget .ov-rc-row { font-size: 18px; padding: 10px 14px; }
.mtom-widget .ov-rc-av { width: 36px; height: 36px; font-size: 14px; }
.mtom-widget .ov-js { font-size: 96px; }

/* Raccourcis dans l'éditeur */
.ov-keys-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(196,181,253,.12); font-size: 13px; }
.ov-keys-row button { font-size: 12px; }
.ov-keys-row button.is-wait { outline: 2px solid #c4b5fd; }

/* Repli : plus de boule bleue si un type n'a pas encore d'aperçu dédié */
.ov-prev-fallback { display:grid; place-items:center; height:100%; padding:10px; box-sizing:border-box; }
.ov-fb-card { padding:10px 12px; border-radius:12px; background:linear-gradient(145deg,#1e1b4b,#312e81); border:1px solid #a78bfa88; color:#fff; font:700 11px/1.2 Outfit,sans-serif; text-align:center; box-shadow:0 8px 16px #0005; }

/* Dans les cartes du catalogue / choix de style : tout reste visible */
.ov-cat-preview .ov-mu,
.ov-cat-preview .ov-at,
.ov-cat-preview .ov-lu-lv b { animation: none !important; opacity: 1 !important; transform: none !important; }
.ov-cat-preview .ov-prev-multi { gap: 4px; padding: 6px; justify-content: center; }
.ov-cat-preview .ov-mu { padding: 4px 7px; font-size: 9px; }
.ov-cat-preview .ov-mu span { font-size: 9px !important; }
.ov-cat-preview .ov-at { animation: none !important; opacity: 1 !important; }
.ov-skin-card .ov-prev-multi,
.ov-type-card .ov-prev-multi { transform: scale(.95); transform-origin: center; }

.ov-egg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, #2a1a4a, #12081f); }
.ov-egg .shell { position: absolute; left: 50%; bottom: 16px; width: 36px; height: 48px; margin-left: -18px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 30%, #fff7, #f4d7a8 40%, #d4a574); border: 2px solid #fde68a; box-shadow: 0 0 12px #fbbf24;
  animation: ovEgg 2s ease-in-out infinite; }
.ov-egg .shine { position: absolute; left: 50%; bottom: 42px; width: 10px; height: 8px; margin-left: -12px; border-radius: 50%; background: #fff8; }
.ov-egg b { position: absolute; top: 8px; right: 8px; font-size: 11px; filter: drop-shadow(0 0 4px #fde68a); }
@keyframes ovEgg { 40% { transform: translateY(-3px) rotate(-4deg); } 70% { transform: translateY(0) rotate(3deg); } }

.ov-vault { position: absolute; inset: 0; background: linear-gradient(#3b2a12, #1a1024 60%, #0b0814); }
.ov-vault .p { position: absolute; bottom: 14px; left: 30%; width: 12px; height: 20px; border-radius: 4px 4px 2px 2px; background: #a78bfa; animation: ovRun 1.6s ease-in-out infinite; }
.ov-vault .c, .ov-vault .c2, .ov-vault .c3 { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 6px #fbbf24; animation: ovCoin 1.8s linear infinite; }
.ov-vault .c { left: 48%; top: 10%; }
.ov-vault .c2 { left: 62%; top: 0; animation-delay: .4s; }
.ov-vault .c3 { left: 38%; top: -6%; animation-delay: .9s; }
@keyframes ovRun { 50% { left: 55%; } }
@keyframes ovCoin { to { top: 80%; } }

.ov-wash { position: absolute; inset: 0; background: linear-gradient(#7dd3fc, #a5b4fc 45%, #86efac); }
.ov-wash .van { position: absolute; left: 22%; bottom: 18px; width: 48px; height: 26px; border-radius: 6px; background: #7c3aed; box-shadow: 10px 4px 0 -6px #6d28d9; }
.ov-wash .van::after, .ov-wash .van::before { content: ""; position: absolute; bottom: -5px; width: 8px; height: 8px; border-radius: 50%; background: #1e1b4b; }
.ov-wash .van::before { left: 6px; } .ov-wash .van::after { right: 6px; }
.ov-wash .dirt { position: absolute; left: 28%; bottom: 22px; width: 22px; height: 16px; border-radius: 40%; background: rgba(70,50,30,.55); animation: ovDirt 1.6s ease-in-out infinite; }
.ov-wash .jet { position: absolute; left: 8%; bottom: 20px; width: 36px; height: 3px; background: linear-gradient(90deg, #67e8f9, transparent); transform: rotate(-18deg); transform-origin: left; animation: ovJet 0.8s linear infinite; }
.ov-wash b { position: absolute; top: 6px; left: 6px; font-size: 10px; color: #fff; background: #1e1b4b; border: 1.5px solid #67e8f9; border-radius: 99px; padding: 2px 6px; }
@keyframes ovDirt { 50% { opacity: .3; transform: scale(.8); } }
@keyframes ovJet { 50% { width: 44px; opacity: .7; } }