/* ============================================================
   FISS - jeux.css : Espace Jeux (avatars animés, place partagée, jeux en salle)
   ============================================================ */

/* ── Avatars : animations (dessin dans js/jeux-avatar.js) ── */
.av-wrap { display: inline-block; line-height: 0; }
.av-svg { display: block; overflow: visible; }
.av-haut, .av-yeux, .av-arm, .av-leg, .av-corps { transform-box: fill-box; }
.av-haut { transform-origin: 50% 100%; }
.av-yeux { transform-origin: 50% 50%; animation: avClin 5s infinite; }
.av-arm { transform-origin: 50% 10%; }
.av-leg { transform-origin: 50% 0%; }
.av-corps { transform-origin: 50% 100%; }
.av-idle .av-haut { animation: avRespire 3.2s ease-in-out infinite; }
.av-walk .av-haut { animation: avPas .42s ease-in-out infinite; }
.av-walk .av-leg-l { animation: avJambe .42s ease-in-out infinite; }
.av-walk .av-leg-r { animation: avJambe .42s ease-in-out infinite reverse; }
.av-walk .av-arm-l { animation: avBras .42s ease-in-out infinite; }
.av-walk .av-arm-r { animation: avBras .42s ease-in-out infinite reverse; }
.av-jump .av-corps { animation: avSaut .7s ease-out infinite; }
.av-wave .av-arm-r { animation: avSalut .55s ease-in-out infinite; }
.av-wave .av-haut { animation: avRespire 3.2s ease-in-out infinite; }
@keyframes avRespire { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes avClin { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes avPas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes avJambe { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes avBras { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes avSaut { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-20px); } 65% { transform: translateY(0); } 80% { transform: translateY(-5px); } }
@keyframes avSalut { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(-75deg); } }
@media (prefers-reduced-motion: reduce) { .av-svg *, .jx-joueur, .jx-piste-av { animation: none !important; transition: none !important; } }

/* ── Page ── */
.jx-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jx-pieces { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #FFF4CC, #FFE08A); border: 2px solid #F5B700; color: #7A5A00; padding: 8px 16px; border-radius: 24px; font-weight: 800; font-size: 16px; }
.jx-pieces small { font-weight: 600; font-size: 11px; opacity: .8; }
.jx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.jx-tab { border: 2px solid var(--border); background: var(--surface); color: var(--ink2); border-radius: 22px; padding: 9px 16px; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; }
.jx-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.jx-panel { display: none; }
.jx-panel.on { display: block; }
.jx-carte { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.jx-btn { border: 0; border-radius: 14px; padding: 12px 20px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; background: var(--primary); color: #fff; }
.jx-btn.sec { background: var(--bg2); color: var(--ink2); }
.jx-btn.or { background: #F5B700; color: #4A3500; }
.jx-btn:disabled { opacity: .5; cursor: default; }
.jx-vide { text-align: center; color: var(--ink3); padding: 26px 10px; font-size: 14px; }

/* ── La place ── */
.jx-place { position: relative; width: 100%; height: clamp(300px, 52vw, 440px); border-radius: 20px; overflow: hidden; border: 3px solid #fff; box-shadow: var(--shadow);
  background: linear-gradient(#9AD7FF 0%, #CDEEFF 34%, #9BDB7A 34%, #7CC85B 100%); cursor: pointer; user-select: none; touch-action: manipulation; }
.jx-place .decor { position: absolute; pointer-events: none; font-size: 34px; }
.jx-joueur { position: absolute; transform: translate(-50%, -100%); text-align: center; pointer-events: none; will-change: left, top; }
.jx-joueur.moi { z-index: 5; }
.jx-joueur .nom { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.88); color: #24304A; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.jx-joueur.moi .nom { background: #FFE08A; }
.jx-joueur .bulle { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); font-size: 26px; background: #fff; border-radius: 16px; padding: 2px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); animation: jxBulle .35s ease-out; }
@keyframes jxBulle { from { opacity: 0; transform: translate(-50%, -60%) scale(.6); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.jx-place-aide { text-align: center; font-size: 13px; color: var(--ink3); margin: 8px 0 12px; }
.jx-emotes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.jx-emotes button { font-size: 26px; border: 2px solid var(--border); background: var(--surface); border-radius: 14px; width: 52px; height: 52px; cursor: pointer; }
.jx-emotes button:active { transform: scale(.92); }
.jx-emotes .sep { width: 2px; background: var(--border); margin: 0 4px; }

/* ── Avatar (éditeur) ── */
.jx-editeur { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
@media (max-width: 720px) { .jx-editeur { grid-template-columns: 1fr; } }
.jx-apercu { background: linear-gradient(#CDEEFF, #A5DE87); border-radius: 18px; padding: 16px 10px; text-align: center; position: sticky; top: 8px; }
.jx-apercu .actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.jx-apercu .actions button { border: 0; background: rgba(255,255,255,.85); border-radius: 12px; padding: 6px 10px; font-size: 18px; cursor: pointer; }
.jx-cat-titre { font-weight: 800; font-size: 14px; color: var(--ink2); margin: 14px 0 6px; }
.jx-tuiles { display: flex; gap: 8px; flex-wrap: wrap; }
.jx-tuile { position: relative; width: 78px; border: 3px solid var(--border); border-radius: 14px; background: var(--surface); padding: 4px 2px 6px; cursor: pointer; text-align: center; font-family: inherit; }
.jx-tuile.on { border-color: var(--primary); background: #EEF4FB; }
.jx-tuile .nom { display: block; font-size: 10px; font-weight: 700; color: var(--ink2); margin-top: 2px; line-height: 1.1; }
.jx-tuile.verrou { opacity: .8; }
.jx-tuile .prix { position: absolute; top: 3px; right: 3px; background: #F5B700; color: #4A3500; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 1px 6px; }
.jx-tuile .prix.ok { background: #2E9E68; color: #fff; }
.jx-couleur { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--border); cursor: pointer; position: relative; }
.jx-couleur.on { box-shadow: 0 0 0 3px var(--primary); }
.jx-couleur .prix { position: absolute; bottom: -6px; right: -8px; background: #F5B700; color: #4A3500; font-size: 9px; font-weight: 800; border-radius: 8px; padding: 0 4px; }

/* ── Boutique ── */
.jx-boutique-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.jx-article { border: 2px solid var(--border); border-radius: 16px; background: var(--surface); text-align: center; padding: 8px 6px 10px; }
.jx-article .nom { font-size: 12px; font-weight: 800; margin: 2px 0 6px; }
.jx-article .jx-btn { padding: 7px 12px; font-size: 13px; border-radius: 12px; }
.jx-article .possede { font-size: 12px; font-weight: 800; color: #1A6B45; }

/* ── Cartes de jeux ── */
.jx-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.jx-jeu-carte { border-radius: 20px; padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.jx-jeu-carte .ico { font-size: 44px; line-height: 1; }
.jx-jeu-carte h3 { margin: 0; font-size: 19px; }
.jx-jeu-carte p { margin: 0; font-size: 13px; opacity: .92; flex: 1; }
.jx-jeu-carte .boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.jx-jeu-carte .jx-btn { background: rgba(255,255,255,.95); color: #24304A; padding: 9px 14px; font-size: 14px; }
.jx-jeu-carte.calcul { background: linear-gradient(135deg, #1A4A8A, #4A90D9); }
.jx-jeu-carte.memory { background: linear-gradient(135deg, #8A4A90, #D96AB0); }
.jx-jeu-carte.quiz   { background: linear-gradient(135deg, #1A6B45, #4DBF8A); }
.jx-jeu-carte.mots   { background: linear-gradient(135deg, #C9860A, #F2B84B); }

/* ── Salle de jeu (plein écran) ── */
.jx-salle { position: fixed; inset: 0; z-index: 3000; background: linear-gradient(#DDF3FF, #F7FBFF); overflow-y: auto; display: none; }
.jx-salle.on { display: block; }
.jx-salle-in { max-width: 860px; margin: 0 auto; padding: 14px 14px 40px; }
.jx-salle-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.jx-salle-haut h2 { margin: 0; font-size: 20px; }
.jx-chrono { font-size: 22px; font-weight: 900; background: #fff; border: 3px solid var(--primary); color: var(--primary); border-radius: 16px; padding: 4px 14px; min-width: 80px; text-align: center; }
.jx-chrono.urgent { border-color: #D4001A; color: #D4001A; }
.jx-lobby { text-align: center; }
.jx-lobby-joueurs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; min-height: 110px; }
.jx-lobby-joueurs .j { text-align: center; }
.jx-lobby-joueurs .j .nom { font-size: 12px; font-weight: 800; }
.jx-decompte { font-size: 96px; font-weight: 900; color: var(--primary); text-align: center; animation: jxBulle .4s ease-out; line-height: 1.1; }

.jx-piste { background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 6px 10px 2px; margin-bottom: 14px; }
.jx-voie { position: relative; height: 74px; border-bottom: 2px dashed #D9E4F2; }
.jx-voie:last-child { border-bottom: 0; }
.jx-voie .arrivee { position: absolute; right: 0; top: 4px; font-size: 26px; }
.jx-voie .prenom { position: absolute; right: 44px; top: 6px; font-size: 11px; font-weight: 800; color: var(--ink3); }
.jx-piste-av { position: absolute; bottom: -2px; transition: left .7s ease-out; transform: translateX(-50%); }
.jx-piste-av.moi .av-wrap { filter: drop-shadow(0 0 6px #F5B700); }

.jx-zone { background: #fff; border: 2px solid var(--border); border-radius: 18px; padding: 18px 16px; min-height: 240px; }
.jx-question { font-size: clamp(26px, 6vw, 40px); font-weight: 900; text-align: center; margin: 6px 0 12px; color: #24304A; }
.jx-reponse { font-size: 34px; font-weight: 900; text-align: center; min-height: 52px; border-bottom: 4px solid var(--primary); width: 160px; margin: 0 auto 12px; color: var(--primary); }
.jx-clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.jx-clavier button { font-size: 26px; font-weight: 800; padding: 14px 0; border: 0; border-radius: 14px; background: #EEF4FB; color: #24304A; cursor: pointer; font-family: inherit; }
.jx-clavier button.ok { background: #2E9E68; color: #fff; }
.jx-clavier button:active { transform: scale(.94); }
.jx-retour { text-align: center; font-weight: 800; min-height: 26px; margin-top: 8px; }
.jx-retour.bon { color: #1A6B45; } .jx-retour.mauvais { color: #D4001A; }
.jx-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; }
.jx-mem-carte { aspect-ratio: 1; border: 0; border-radius: 16px; font-size: clamp(28px, 8vw, 44px); background: linear-gradient(135deg, #8A4A90, #D96AB0); color: #fff; cursor: pointer; transition: transform .25s; font-family: inherit; }
.jx-mem-carte.ouverte { background: #fff; border: 3px solid #D96AB0; }
.jx-mem-carte.trouvee { background: #E6F4EC; border: 3px solid #2E9E68; }
.jx-choix { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; }
.jx-choix button { font-size: 19px; font-weight: 800; padding: 16px 14px; border: 3px solid var(--border); border-radius: 16px; background: #fff; color: #24304A; cursor: pointer; text-align: left; font-family: inherit; }
.jx-choix button.bon { background: #E6F4EC; border-color: #2E9E68; }
.jx-choix button.mauvais { background: #FDECEE; border-color: #D4001A; }
.jx-lettres, .jx-mot-cases { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.jx-lettres button { width: 50px; height: 56px; font-size: 26px; font-weight: 900; border: 0; border-radius: 12px; background: #FFE08A; color: #4A3500; cursor: pointer; text-transform: uppercase; font-family: inherit; }
.jx-lettres button:disabled { opacity: .25; }
.jx-mot-cases span { width: 44px; height: 52px; border-bottom: 4px solid var(--primary); font-size: 28px; font-weight: 900; text-align: center; text-transform: uppercase; color: var(--primary); }
.jx-podium { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.jx-rang { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 8px 14px; }
.jx-rang.moi { border-color: #F5B700; background: #FFFAE6; }
.jx-rang .n { font-size: 24px; font-weight: 900; width: 34px; text-align: center; }
.jx-rang .info { flex: 1; font-weight: 800; }
.jx-rang .info small { display: block; font-weight: 600; color: var(--ink3); }
.jx-rang .gain { font-weight: 900; color: #7A5A00; background: #FFE08A; border-radius: 12px; padding: 4px 10px; }

/* ── Classement / admin ── */
.jx-classement { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.jx-classement ol { margin: 6px 0 0; padding-left: 20px; }
.jx-classement li { padding: 3px 0; font-size: 14px; }

/* ── Décors de la place (dessin dans js/jeux-decors.js) ── */
.dc-svg { display: block; width: 100%; height: 100%; }
.jx-place > .dc-svg { position: absolute; inset: 0; pointer-events: none; }
.dc-svg * { transform-box: fill-box; }
.dc-svg .dc-drift { animation: dcDrift 90s linear infinite alternate; }
.dc-svg .dc-spin { animation: dcSpin 120s linear infinite; transform-box: view-box; }
.dc-svg .dc-cabine { animation: dcSpinInv 40s linear infinite; transform-box: view-box; }
.dc-svg .dc-sway { animation: dcSway 5s ease-in-out infinite; transform-origin: 50% 100%; }
.dc-svg .dc-twinkle { animation: dcTwinkle 3s ease-in-out infinite; }
.dc-svg .dc-glow { animation: dcGlow 3.4s ease-in-out infinite; }
.dc-svg .dc-halo { animation: dcHalo 3.4s ease-in-out infinite; }
.dc-svg .dc-blink, .dc-svg .dc-ampoule { animation: dcTwinkle 1.6s ease-in-out infinite; }
.dc-svg .dc-luciole { animation: dcLuciole 4s ease-in-out infinite; }
.dc-svg .dc-rayon { animation: dcRayon 9s ease-in-out infinite; }
.dc-svg .dc-jet { stroke-dasharray: 30 110; animation: dcJet 1.1s linear infinite; }
.dc-svg .dc-eau { stroke-dasharray: 14 22; animation: dcJet 2.4s linear infinite; }
.dc-svg .dc-wave { animation: dcWave 6s linear infinite; }
.dc-svg .dc-mousse { animation: dcTwinkle 4s ease-in-out infinite; }
.dc-svg .dc-bateau { animation: dcBateau 40s ease-in-out infinite alternate; }
.dc-svg .dc-mouette { animation: dcMouette 20s linear infinite; }
.dc-svg .dc-butterfly { animation: dcPapillon 14s ease-in-out infinite; }
.dc-svg .dc-flap { animation: dcFlap .35s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.dc-svg .dc-flag { animation: dcFlag 1.6s ease-in-out infinite alternate; transform-origin: 0% 50%; }
.dc-svg .dc-flamme { animation: dcFlamme .18s ease-in-out infinite alternate; transform-origin: 50% 0%; }
.dc-svg .dc-etoile-filante { animation: dcFilante 9s linear infinite; }
.dc-svg .dc-neige { animation: dcNeige 8s linear infinite; }
.dc-svg .dc-aurore { animation: dcAurore 12s ease-in-out infinite alternate; }
.dc-svg .dc-bulle { animation: dcBulle 7s linear infinite; }
.dc-svg .dc-algue { animation: dcAlgue 3.6s ease-in-out infinite alternate; transform-box: view-box; }
.dc-svg .dc-nage { animation: dcNage 40s linear infinite; }
.dc-svg .dc-nage-r { animation: dcNageR 40s linear infinite; }
.dc-svg .dc-feu { animation: dcFeu 4.6s ease-out infinite; opacity: 0; transform-box: view-box; }
.dc-svg .dc-ballon { animation: dcBallon 4s ease-in-out infinite alternate; }
@keyframes dcDrift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes dcSpin { to { transform: rotate(360deg); } }
@keyframes dcSpinInv { to { transform: rotate(-360deg); } }
@keyframes dcSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes dcHalo { 0%, 100% { opacity: .1; } 50% { opacity: .38; } }
@keyframes dcTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dcGlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dcLuciole { 0%, 100% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 50% { opacity: .3; transform: translate(14px, -18px); } 75% { opacity: 1; transform: translate(-8px, -8px); } }
@keyframes dcRayon { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes dcJet { to { stroke-dashoffset: -140; } }
@keyframes dcWave { from { transform: translateX(0); } to { transform: translateX(-50px); } }
@keyframes dcBateau { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
@keyframes dcMouette { from { transform: translate(-120px, 10px); } 50% { transform: translate(300px, -20px); } to { transform: translate(720px, 10px); } }
@keyframes dcPapillon { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(60px, -30px); } 50% { transform: translate(120px, 10px); } 75% { transform: translate(50px, 30px); } }
@keyframes dcFlap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes dcFlag { from { transform: skewY(-6deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.86); } }
@keyframes dcFlamme { from { transform: scaleY(.8); } to { transform: scaleY(1.25); } }
@keyframes dcFilante { 0% { transform: translate(140px, -40px); opacity: 0; } 4% { opacity: 1; } 12% { transform: translate(-180px, 120px); opacity: 0; } 100% { transform: translate(-180px, 120px); opacity: 0; } }
@keyframes dcNeige { 0% { transform: translate(0, -10px); } 50% { transform: translate(24px, 270px); } 100% { transform: translate(-6px, 570px); } }
@keyframes dcAurore { from { transform: translateX(-30px); opacity: .7; } to { transform: translateX(30px); opacity: 1; } }
@keyframes dcBulle { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(14px, -600px); opacity: 0; } }
@keyframes dcAlgue { from { transform: skewX(-9deg); } to { transform: skewX(9deg); } }
@keyframes dcNage { from { transform: translateX(-80px); } to { transform: translateX(1080px); } }
@keyframes dcNageR { from { transform: translateX(1080px); } to { transform: translateX(-80px); } }
@keyframes dcFeu { 0% { transform: scale(.05); opacity: 1; } 35% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes dcBallon { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .dc-svg * { animation: none !important; } .dc-svg .dc-feu { opacity: .8; } }

/* Sélecteur de décor sous la place + tuiles de la boutique */
.jx-decors { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin-top: 4px; }
.jx-decor { flex: 0 0 auto; width: 148px; border: 3px solid var(--border); border-radius: 14px; background: var(--surface); padding: 0; overflow: hidden; cursor: pointer; text-align: center; font-family: inherit; position: relative; }
.jx-decor.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.jx-decor .vue { display: block; height: 78px; overflow: hidden; }
.jx-decor .nom { display: block; font-size: 12px; font-weight: 800; padding: 5px 4px 6px; color: var(--ink2); }
.jx-decor .prix { position: absolute; top: 6px; right: 6px; background: #F5B700; color: #4A3500; font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 8px; }
.jx-decor.verrou .vue { filter: saturate(.75); }
.jx-boutique-grille.decors { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.jx-article.decor .vue { height: 118px; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.jx-article.decor .desc { font-size: 12px; color: var(--ink3); margin: -2px 0 8px; }