/* Jeux et révision : vignettes animées (les 3 étapes de l'exemple défilent en boucle, façon GIF)
   + badge « ce que tu fais » qui distingue les jeux d'un coup d'œil. Badge en couleurs fixes : lisible dans tous les thèmes. */
.rv-tile .rv-thumb { height: 9.6rem; }
.rv-thumb > .rv-anim { zoom: .55; position: relative; height: 17rem; }
.rv-af { position: absolute; inset: 0; opacity: 0; animation: rv-cycle 9s infinite; }
.rv-af:nth-child(2) { animation-delay: 3s; }
.rv-af:nth-child(3) { animation-delay: 6s; }
@keyframes rv-cycle { 0% { opacity: 0; transform: translateX(16px); } 4% { opacity: 1; transform: none; } 31% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateX(-10px); } }
.rv-thumb > .rv-does { zoom: 1; position: absolute; left: .4rem; bottom: .3rem; max-width: calc(100% - 5.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #1d2433; color: #ffffff; font: 700 .74rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding: 0 .5rem; border-radius: 999px; }
.rv-thumb > .rv-dots { zoom: 1; position: absolute; top: .35rem; right: .45rem; display: flex; gap: 4px; }
.rv-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b2; animation: rv-dot 9s infinite; }
.rv-dots i:nth-child(2) { animation-delay: 3s; }
.rv-dots i:nth-child(3) { animation-delay: 6s; }
@keyframes rv-dot { 0%, 33% { background: #1d2433; transform: scale(1.3); } 34%, 100% { background: #9aa3b2; transform: none; } }
.rv-tile:hover .rv-af, .rv-thumb:focus-within .rv-af { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .rv-af, .rv-dots i { animation: none; }
  .rv-af:first-child { opacity: 1; }
}

/* ---- Lien surlignages → jeux, visible sans lire (couleurs fixes : lisible dans tous les thèmes) ---- */
/* Fenêtre des jeux : tes passages ➜ la manette */
.rv-pipe { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; margin: .2rem 0 .7rem; border-radius: 14px; background: #fffbea; border: 2px solid #f2d36b; color: #1d2433; }
.rv-pipe * { color: #1d2433; }
.rv-pchips { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 14rem; min-width: 0; }
.rv-pchip { display: block; padding: .25rem .6rem; border-radius: 8px; background: var(--c); color: #1d2433 !important; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.rv-pmore { font-size: .85rem; font-weight: 700; color: #4a5365 !important; }
.rv-parrow { font-size: 1.9rem; font-weight: 800; color: #b07d00 !important; animation: rv-nudge 1.4s ease-in-out infinite; }
@keyframes rv-nudge { 50% { transform: translateX(6px); } }
.rv-pgame, .rv-pstep { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; min-width: 6rem; }
.rv-pbig { font-size: 2.4rem; line-height: 1; }
.rv-pipe.empty { justify-content: center; }
.rv-pipe.empty .rv-pstep strong { font-size: .9rem; max-width: 8rem; }
/* Échelle des jeux : allumés quand il y a assez de passages, sinon cadenas + ce qu'il manque */
.rv-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .5rem; margin: 0 0 .7rem; }
.rv-rung { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .3rem; border-radius: 12px; border: 2px dashed #b9b4a5; background: #f3f1ea; color: #4a5365; font: inherit; cursor: not-allowed; }
.rv-rung * { color: #4a5365 !important; }
.rv-rung .rv-rico { font-size: 1.7rem; line-height: 1; filter: grayscale(1); opacity: .55; }
.rv-rung small { font-size: .78rem; font-weight: 700; }
.rv-rung.ok { border: 2px solid #1d6b3a; background: #e3f6e8; cursor: pointer; }
.rv-rung.ok * { color: #14532d !important; }
.rv-rung.ok .rv-rico { filter: none; opacity: 1; }
.rv-rung.ok:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.rv-playnow { display: block; width: 100%; margin: 0 0 1rem; padding: .85rem 1rem !important; font-size: 1.1rem !important; font-weight: 800 !important; border-radius: 14px !important; background: #1d6b3a !important; color: #ffffff !important; border: 0 !important; animation: rv-glow 2s ease-in-out infinite; }
@keyframes rv-glow { 50% { box-shadow: 0 0 0 6px rgba(29,107,58,.25); } }

/* Lecteur : « → 🎮 » dans la pastille de couleurs */
.uh-pop .uh-pop-go { font-weight: 800; font-size: .95rem; padding: 0 .3rem; white-space: nowrap; }
/* le passage surligné s'envole vers la manette */
.uh-fly { position: fixed; z-index: 2000; pointer-events: none; padding: .2rem .55rem; border-radius: 999px; background: var(--c); color: #1d2433; font: 800 .95rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }
.annot-rail .rail-game { position: relative; }
.annot-rail .rail-game .rail-n { background: #1d6b3a; color: #ffffff; }
.annot-rail .rail-game.empty { opacity: .75; }
.annot-rail .rail-game.bump { animation: uh-bump .55s ease; }
@keyframes uh-bump { 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(.95); } }
/* bulle à côté de la manette : première fois, puis jeux débloqués */
.uh-bubble { position: fixed; z-index: 2001; max-width: 19rem; padding: .8rem .9rem; border-radius: 14px; background: #ffffff; color: #1d2433; border: 2px solid #1d6b3a; box-shadow: 0 8px 24px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: .5rem; animation: uh-in .3s ease; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.uh-bubble * { color: #1d2433; }
.uh-bubble::after { content: ''; position: absolute; right: -9px; top: 1.2rem; border: 8px solid transparent; border-left-color: #1d6b3a; border-right: 0; }
.uh-bubble.out { opacity: 0; transform: translateX(10px); transition: .3s; }
@keyframes uh-in { from { opacity: 0; transform: translateX(14px) scale(.95); } }
.uh-bstrip { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: 1.9rem; }
.uh-bstrip b { font-size: 1.3rem; color: #b07d00 !important; }
.uh-bmark { background: #fde047; border-radius: 8px; padding: 0 .2rem; }
.uh-bunlock { display: flex; align-items: center; gap: .6rem; }
.uh-bunlock .uh-bico { font-size: 2.2rem; line-height: 1; }
.uh-bunlock small { display: block; font-weight: 700; color: #1d6b3a !important; }
.uh-bubble .primary { background: #1d6b3a !important; color: #ffffff !important; border: 0 !important; font-weight: 800 !important; }
.uh-bubble .link { color: #1f5f8b !important; background: none !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { .rv-parrow, .rv-playnow, .annot-rail .rail-game.bump, .uh-bubble { animation: none !important; } }
@media (max-width: 760px) { .uh-bubble { right: 8px !important; left: 8px; max-width: none; top: auto !important; bottom: 5rem; } .uh-bubble::after { display: none; } }
.uh-pop .uh-pop-go, .rv-pbig, .rv-rico, .uh-bstrip, .uh-bico, .uh-fly { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif; }
.uh-pop .uh-pop-go { font-size: 1.15rem; }
@media (max-width: 560px) { .rv-pipe:not(.empty) { flex-direction: column; align-items: stretch; } .rv-pipe:not(.empty) .rv-parrow { align-self: center; transform: rotate(90deg); animation: none; } .rv-pipe.empty { gap: .3rem; } .rv-pipe.empty .rv-pbig { font-size: 1.8rem; } }