/* ════════════════════════════════════════════════════════════════════════
   LE LOGO MANETTE VIVANT — notre « mascotte » sans illustration
   Maquette validée : brandnew/drafts/juice-02-app-vivante.html (§ ③).
   Le disque pixel vient du logo (img/logo-socle.png = logo.png sans sa
   croix ni ses boutons) ; la croix grise et les 4 boutons sont reposés ici,
   à leur place exacte (mesurée sur logo.png 512 px), pour pouvoir bouger.
   Construit par juice.js › JUICE.mano(). États : .repos (défaut), .joie,
   .triste, .chaud, .charge. Rayon 0, aplats, aucune lueur ni flou.
   ════════════════════════════════════════════════════════════════════════ */
.mano-lg { position: relative; display: inline-block; width: 40px; height: 40px; flex: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mano-lg .ms { position: absolute; inset: 0; background: url(/img/logo-socle.png) center / 100% 100% no-repeat; }
.mano-lg .mp { position: absolute; background: #6E6B6F; }
.mano-lg .mp.v { left: 24.2%; top: 34.4%; width: 10%; height: 30.9%; }
.mano-lg .mp.h { left: 16.4%; top: 44.5%; width: 25.4%; height: 10.5%; }
.mano-lg .mb { position: absolute; width: 11.3%; height: 11.3%; transition: transform 80ms ease-out; }
.mano-lg .mb::before, .mano-lg .mb::after { content: ''; position: absolute; background: var(--c); }
.mano-lg .mb::before { left: 33%; top: 0; width: 34%; height: 100%; }
.mano-lg .mb::after { left: 0; top: 33%; width: 100%; height: 34%; }
.mano-lg .mb.kg { --c: #8CC63F; left: 64.3%; top: 31.1%; }
.mano-lg .mb.kb { --c: #4FC3E8; left: 52.9%; top: 44%; }
.mano-lg .mb.kr { --c: #F0504A; left: 75.8%; top: 44%; }
.mano-lg .mb.ko { --c: #F7931E; left: 64.3%; top: 56.4%; }
.mano-lg .mb.hit { transform: translateY(12%) scale(.8); }
.mano-lg .feu { position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); display: flex; align-items: flex-end;
  gap: 8%; width: 60%; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.mano-lg .feu i { width: 22%; height: 38%; min-height: 6px; aspect-ratio: auto; background: #FF9F45; border: 2px solid #0A0A0A; }
.mano-lg .feu i:nth-child(2) { height: 58%; min-height: 10px; background: #FF5252; }
.mano-lg .feu i:nth-child(3) { height: 46%; min-height: 8px; background: #FFD600; }

/* REPOS : la manette respire, ses boutons s'allument chacun leur tour */
.mano-lg.repos { animation: mano-respire 2.4s ease-in-out infinite; }
@keyframes mano-respire { 50% { transform: translateY(-2px); } }
.mano-lg.repos .mb { animation: mano-tour 2.4s steps(1) infinite; }
.mano-lg.repos .kg { animation-delay: 0s; } .mano-lg.repos .kr { animation-delay: .6s; }
.mano-lg.repos .ko { animation-delay: 1.2s; } .mano-lg.repos .kb { animation-delay: 1.8s; }
@keyframes mano-tour { 0%, 24% { transform: scale(1.3); } 25%, 100% { transform: scale(1); } }
/* JUSTE : saut, les boutons clignotent */
.mano-lg.joie { animation: mano-saut 450ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mano-saut { 30% { transform: translateY(-40%) rotate(-6deg) scale(1.08); } 60% { transform: scale(1.1, .86); } 80% { transform: scale(.97, 1.04); } }
.mano-lg.joie .mb { animation: mano-lit 300ms steps(2) 2; }
@keyframes mano-lit { 50% { transform: scale(1.4); } }
/* RATÉ : elle tremble, les boutons s'éteignent */
.mano-lg.triste { animation: mano-non 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes mano-non { 15% { transform: translateX(-18%) rotate(-4deg); } 35% { transform: translateX(16%) rotate(4deg); } 55% { transform: translateX(-10%); } 75% { transform: translateX(6%); } }
.mano-lg.triste .mb::before, .mano-lg.triste .mb::after { background: #9A9A9A; }
/* EN FEU (série) : des flammes pixel au-dessus, elle chauffe */
.mano-lg.chaud .feu { opacity: 1; }
.mano-lg.chaud .feu i { animation: mano-flamme .5s steps(2) infinite; }
.mano-lg.chaud .feu i:nth-child(2) { animation-delay: .15s; } .mano-lg.chaud .feu i:nth-child(3) { animation-delay: .3s; }
@keyframes mano-flamme { 50% { transform: translateY(-20%) scaleY(1.2); } }
.mano-lg.chaud { animation: mano-vibre .12s steps(2) infinite; }
@keyframes mano-vibre { 50% { transform: translate(1px, -1px); } }
/* CHARGEMENT : le jeu de Simon */
.mano-lg.charge .mb { animation: mano-simon 1.2s steps(1) infinite; }
.mano-lg.charge .kg { animation-delay: 0s; } .mano-lg.charge .kr { animation-delay: .3s; }
.mano-lg.charge .ko { animation-delay: .6s; } .mano-lg.charge .kb { animation-delay: .9s; }
@keyframes mano-simon { 0%, 20% { transform: scale(1.4); opacity: 1; } 21%, 100% { transform: scale(.8); opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .mano-lg, .mano-lg * { animation: none !important; transition: none !important; }
}

/* le cadre du logo garde son fond blanc d'origine (logo.png) : la manette bouge dessus sans laisser voir le magenta */
[data-s2] .s2-logo .body:has(> .mano-lg) { background: #fff; }

/* CHARGEMENT : la manette joue au Simon à la place du texte « CHARGEMENT… » */
.mano-chg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; text-align: center; }
.mano-chg .mano-lg { width: 56px; height: 56px; cursor: default; }
.mano-chg .t { font-family: var(--font-m, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink, #0A0A0A); opacity: .7; }

/* LE CHRONO SOUS TENSION : les bords de l'écran claquent en rouge (un cadre, pas une lueur) */
.juice-cadre { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; border: 0 solid var(--red, #FF5252); transition: border-width 120ms; }
.juice-cadre.flash { border-width: 8px; }
/* la manette dans la barre du jeu, à côté du chrono */
.mano-lg.jeu { width: 30px; height: 30px; margin-right: 6px; }

/* LA BANNIÈRE DU BAS, à la Duolingo (juice-01 ①/②) : verte si juste, rouge si raté ; elle monte et se pose */
.juice-ban { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2002; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 4px solid #0A0A0A; transform: translateY(110%); pointer-events: none; }
.juice-ban.show { transform: translateY(0); transition: transform var(--dur-m, 450ms) var(--ease-back, cubic-bezier(.3, 1.6, .5, 1)); }
.juice-ban:not(.show) { transition: transform var(--dur-s, 240ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
.juice-ban.g { background: var(--green, #5BE885); color: #0A0A0A; }
.juice-ban.r { background: var(--red, #FF5252); color: #FFFEF7; }
.juice-ban .tx { min-width: 0; }
.juice-ban .t { font-family: var(--font-d, 'Anton', sans-serif); font-size: 26px; line-height: 1; }
.juice-ban .d { font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.juice-ban .pts { margin-left: auto; font-family: var(--font-d, 'Anton', sans-serif); font-size: 30px; flex: none; }
.juice-ban .pts b { font-weight: 400; }
@media (min-width: 1024px) {
  .juice-ban { left: 50%; right: auto; width: 640px; margin-left: -320px; bottom: 24px; border: 4px solid #0A0A0A; box-shadow: 6px 6px 0 #0A0A0A; transform: translateY(160%); }
}
@media (prefers-reduced-motion: reduce) { .juice-ban, .juice-ban.show { transition: none; } }
/* SOLO : la barre aligne le chrono à droite (margin-left:auto) ; la manette se colle à lui */
.ghdr > .mano-lg.jeu { margin-left: auto; align-self: center; }
.ghdr > .mano-lg.jeu + .timer { margin-left: 0; }

/* L'XP QUI VOLE vers la jauge, et LE PASSAGE DE NIVEAU tamponné (juice-01 ④) */
.juice-fly { position: fixed; z-index: 2147483001; pointer-events: none; font-family: var(--font-d, 'Anton', sans-serif); font-size: 28px; padding: 4px 10px;
  background: var(--yellow, #FFD600); color: #0A0A0A; border: 3px solid #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A; white-space: nowrap; }
.juice-lvl { position: fixed; left: 50%; top: 42%; z-index: 2147483001; pointer-events: none; transform: translate(-50%, -50%);
  font-family: var(--font-d, 'Anton', sans-serif); font-size: clamp(22px, 7.6vw, 34px); line-height: 1.05; padding: 10px 22px; white-space: nowrap; text-align: center;
  background: var(--magenta, #FF2E93); color: #FFFEF7; border: 4px solid #0A0A0A; box-shadow: 6px 6px 0 #0A0A0A; }
html[data-skin="neon"] .juice-lvl { box-shadow: 6px 6px 0 var(--yellow, #FFD600); }

/* LE RÉCAP DE FIN (juice-01 ⑥) : trois tuiles en aplat, chiffres qui défilent */
.juice-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.juice-recap .tile { border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; padding: 7px 6px; text-align: center; color: #0A0A0A; min-width: 0; }
.juice-recap .tile .k { font-family: var(--font-d, 'Anton', sans-serif); font-size: 11px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.juice-recap .tile .v { font-family: var(--font-d, 'Anton', sans-serif); font-size: 26px; line-height: 1; margin-top: 3px; }
.juice-recap .tile.ta { background: var(--yellow, #FFD600); } .juice-recap .tile.tb { background: var(--green, #5BE885); } .juice-recap .tile.tc { background: var(--cyan, #5BD8E5); }
html[data-skin="neon"] .juice-recap .tile { box-shadow: 5px 5px 0 var(--magenta, #FF2E93); }
/* SOLO : l'écran de fin centre ses éléments (align-items:center) — le récap prend toute la largeur */
#sec-solo .juice-recap { align-self: stretch; width: 100%; }