/* /ce2-mots/jeux.css — styles de la salle de jeux des dictées (/ce1-fr/jeux.js),
   COPIÉS de /ce1-fr/styles.css (variables + règles .jx-*, .arcade-*) pour ne pas
   charger toute la feuille des dictées. À resynchroniser si les jeux changent. */
.hm{
  color-scheme:light;
  --bg:#EAF7FF; --mat:#E5EEF6; --card:#FFFFFF; --card-hi:#F6FBFF;
  --ink:#2B2D42; --ink-soft:#6B7280; --line:#D5E2EE; --line-soft:#E8EFF6;
  --accent:#1CB0F6; --accent-dk:#1899D6; --accent-ink:#fff;
  --ok:#46A302; --ok-vif:#58CC02; --ok-dk:#46A302; --ok-bg:#E3F8CF; --oups:#E07B00; --oups-bg:#FFEBD1;
  --faux:#EA2B2B; --star:#FFB800;
  --surligne:#FFE45C; --surligne-ink:#4A3800;
  --jaune:#FFC800; --bleu:#1CB0F6; --vert:#58CC02;
  --lift:0 5px 0 var(--line), 0 10px 20px rgba(30,60,90,.08);
  --lift-sm:0 3px 0 var(--line), 0 5px 10px rgba(30,60,90,.06);
  --r:22px;
  --titre:"Baloo 2",Quicksand,system-ui,sans-serif;
}
.arcade-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.arcade-grille{grid-template-columns:repeat(3,1fr)}}
.jx-tuile{border:0;border-radius:24px;padding:14px 10px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 50%),var(--c);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 62%,#000)}
.jx-tuile:active{transform:translateY(3px);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 62%,#000)}
.jx-tuile .jt-ic{font-size:44px;line-height:1.1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.jx-tuile b{font-family:var(--titre);font-weight:800;font-size:19px;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.jx-tuile span{font-size:13px;opacity:.95;line-height:1.2}
.jx-tuile small{margin-top:4px;background:rgba(0,0,0,.18);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.jx-intro .grand-ic{font-size:72px;line-height:1.1}
.jx-intro p{font-size:17px;margin:8px 0 0}
.jx-record{color:#B07800;font-size:17px}
.jx-go{font-size:22px;padding:14px 30px}
.jx{display:flex;flex-direction:column;gap:10px;align-items:stretch;user-select:none;-webkit-user-select:none}
.jx-hud{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 var(--line)}
.jx-coeurs{font-size:18px;letter-spacing:1px}
.jx-score{font-family:var(--titre);font-weight:800;font-size:20px;white-space:nowrap}
.jx-temps{flex:1;height:12px;background:#E3EBF2;border-radius:999px;overflow:hidden}
.jx-temps i{display:block;height:100%;background:var(--ok-vif);border-radius:999px;transition:width .2s linear}
.jx-temps i.urgent{background:var(--faux)}
.jx-consigne{display:flex;align-items:center;gap:10px;justify-content:center;font-size:17px;font-weight:700;text-align:center}
.jx-oreille{border:0;background:var(--accent);color:#fff;border-radius:50%;width:48px;height:48px;font-size:22px;box-shadow:0 4px 0 var(--accent-dk);flex:none}
.jx-oreille:active{transform:translateY(3px)}
.jx-zone{position:relative;height:min(58vh,440px);border-radius:24px;overflow:hidden;border:3px solid #fff;box-shadow:var(--lift)}
.jx-ciel{background:linear-gradient(180deg,#7FD3FF,#D8F3FF)}
.jx-ballon{position:absolute;left:0;top:0;border:0;padding:0;background:none;will-change:transform;touch-action:manipulation}
.jx-ballon span{display:block;min-width:96px;padding:16px 14px 20px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6),transparent 38%),var(--b);
  color:#fff;font-family:Andika,Quicksand,sans-serif;font-size:21px;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap;position:relative}
.jx-ballon span::after{content:"";position:absolute;left:50%;bottom:-22px;width:2px;height:22px;background:rgba(0,0,0,.25)}
.jx-ballon.eclate span{animation:eclate .35s forwards}
.jx-ballon.rate span{background:#888;animation:secoue .35s}
@keyframes eclate{to{transform:scale(1.6);opacity:0}}
.jx-tuiles{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:flex-end;min-height:44px}
.jx-t{min-width:30px;height:40px;border-radius:9px;border:3px solid var(--line);background:#fff;display:grid;place-items:center;font-family:Andika,Quicksand,sans-serif;font-size:24px}
.jx-t.ok{border-color:var(--ok-vif);background:var(--ok-bg)}
.jx-t.ici{border-color:var(--accent);border-style:dashed}
.jx-t.sep{border:0;background:none;min-width:10px}
.jx-art{font-family:Andika,Quicksand,sans-serif;font-size:22px;color:var(--ink-soft);margin-right:6px;align-self:center}
.jx-canvas{display:block;margin:0 auto;border-radius:16px;border:4px solid #fff;box-shadow:var(--lift);touch-action:none}
.jx-pad{display:flex;flex-direction:column;align-items:center;gap:6px}
.jx-pad div{display:flex;gap:6px}
.jx-pad button{width:64px;height:54px;border:2px solid var(--line);border-radius:16px;background:#fff;font-size:26px;box-shadow:0 4px 0 var(--line);touch-action:manipulation}
.jx-pad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.jx-plaine{height:200px;background:linear-gradient(180deg,#9EDCFF 0,#D8F3FF 55%,#7ED957 55%,#58CC02 100%)}
.jx-chateau{position:absolute;left:4px;bottom:24px;font-size:52px}
.jx-monstre{position:absolute;left:0;bottom:30px;display:flex;flex-direction:column;align-items:center;will-change:transform}
.jx-bete{font-size:50px;line-height:1;animation:sautille .5s ease-in-out infinite alternate}
.jx-bulle-m{position:absolute;top:-24px;right:-16px;background:#fff;border-radius:12px;padding:0 6px;font-size:16px;box-shadow:var(--lift-sm)}
.jx-monstre.boum .jx-bete{animation:eclate .4s forwards}
@keyframes sautille{to{transform:translateY(-8px)}}
.jx-info{min-height:26px;text-align:center;font-weight:700;font-size:17px}
.jx-ok{color:#3A8A00;font-family:Andika,Quicksand,sans-serif}
.jx-ko{color:var(--faux)}
.jx-ko b{font-family:Andika,Quicksand,sans-serif;font-size:20px}
.jx-saisie{display:flex;gap:8px;align-items:center}
.jx-saisie input{flex:1;min-width:0;font-family:Andika,Quicksand,sans-serif;font-size:26px;padding:8px 12px;border-radius:16px;border:3px solid var(--line);background:#fff}
.jx-saisie input:focus{border-color:var(--accent);outline:none}
.jx-zap{border:0;width:58px;height:52px;border-radius:16px;background:#FFC800;font-size:26px;box-shadow:0 4px 0 #D9A400;flex:none}
.jx-espace{display:flex;gap:12px;align-items:stretch}
.jx-piste{position:relative;flex:none;width:76px;min-height:400px;border-radius:24px;background:linear-gradient(180deg,#0B1033,#2C3E7A 70%,#4C6FBF);overflow:hidden;
  background-image:radial-gradient(circle at 20% 30%,#fff 1px,transparent 2px),radial-gradient(circle at 70% 60%,#fff 1px,transparent 2px),radial-gradient(circle at 40% 80%,#fff 1px,transparent 2px),linear-gradient(180deg,#0B1033,#2C3E7A 70%,#4C6FBF);background-size:38px 52px,46px 64px,30px 44px,100% 100%}
.jx-lune{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:40px}
.jx-fusee{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(-45deg);font-size:42px;transition:bottom .45s cubic-bezier(.3,1.4,.6,1)}
.jx-fusee.alunit{animation:sautille .3s 4 alternate}
.jx-q{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:0}
.jx-choix{display:grid;gap:10px}
.jx-opt{border:2px solid var(--line-soft);background:#fff;border-radius:18px;padding:14px 10px;font-family:Andika,Quicksand,sans-serif;font-size:clamp(22px,6.5vw,30px);box-shadow:var(--lift);overflow-wrap:anywhere}
.jx-opt.juste{background:var(--ok-bg);border-color:var(--ok-vif);box-shadow:0 5px 0 var(--ok-vif)}
.jx-opt.faux{background:var(--oups-bg);border-color:#FF9600;text-decoration:line-through;text-decoration-color:var(--faux)}
.jx-memory{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:560px){.jx-memory{grid-template-columns:repeat(4,1fr)}}
.jx-carte{position:relative;height:96px;border:0;border-radius:18px;background:linear-gradient(135deg,#FF9600,#FFC800);box-shadow:0 5px 0 #D97E00;font-family:Andika,Quicksand,sans-serif;font-size:20px;padding:4px;overflow:hidden}
.jx-carte .jx-dos{font-size:34px}
.jx-carte .jx-face{display:none;color:var(--ink);line-height:1.15;overflow-wrap:anywhere}
.jx-carte .jx-face small{display:block;font-size:13px;color:var(--ink-soft)}
.jx-carte.vue,.jx-carte.trouve{background:#fff;box-shadow:0 5px 0 var(--line)}
.jx-carte.vue .jx-dos,.jx-carte.trouve .jx-dos{display:none}
.jx-carte.vue .jx-face,.jx-carte.trouve .jx-face{display:block}
.jx-carte.trouve{background:var(--ok-bg);box-shadow:0 5px 0 var(--ok-vif)}
.jx-secoue{animation:secoue .35s}
@keyframes secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}