/* Labo : système commun des jeux (13 nov. 2026). Chargé en dernier sur chaque page de jeu (tools/patch.py, étape 7).
   Une seule définition pour : le retour (croix ronde), le bouton son, le bouton principal du bas, les boutons secondaires,
   l'écran de fin, les transitions entre l'appli et les jeux. Les jeux en gelée (thème clair) gardent leurs couleurs. */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.26s; animation-timing-function:cubic-bezier(.23,1,.32,1); }
@media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none; } }
:root{ --lb-cta-h:58px; --lb-ic:44px; --lb-ease:cubic-bezier(.23,1,.32,1); }

/* --- retour : la même croix ronde partout, en haut à gauche --- */
.lb-back{ display:grid !important; place-items:center; width:var(--lb-ic) !important; height:var(--lb-ic) !important; min-height:0 !important; padding:0 !important; gap:0 !important; flex:none;
  border-radius:50% !important; background:var(--raised, #131313); border:1px solid var(--line, rgba(255,255,255,.08)); color:var(--fg, #FAFAFA); text-decoration:none;
  transition:transform .16s var(--lb-ease), background-color .2s ease; }
.lb-back svg{ width:20px; height:20px; }
.lb-back > span, .lb-back > img{ display:none !important; }
.lb-back:active{ transform:scale(.92); }
@media (hover:hover) and (pointer:fine){ .lb-back:hover{ background:var(--raised-2, #1A1A1A); } }

/* --- boutons ronds (son, fermer) : 44 px, même fond --- */
.iconbtn, .iconbtn--sm{ width:var(--lb-ic) !important; height:var(--lb-ic) !important; }
.iconbtn:active{ transform:scale(.92); }

/* --- bouton principal : même hauteur, même lettre, même pression --- */
.cta, #validate, .nextbtn, .fin__btn{ height:var(--lb-cta-h) !important; font-size:17px !important; font-weight:600 !important; letter-spacing:-.01em !important; text-transform:lowercase; }
.cta:active:not(:disabled), #validate:active, .fin__btn:active{ transform:scale(.97); }
.cta:disabled, .cta[disabled]{ text-transform:none; }
.ghost{ height:52px !important; font-size:15px !important; font-weight:560 !important; text-transform:lowercase; }
.ghost:active{ transform:scale(.97); }

/* --- écran de fin : même hiérarchie (jeu, « fin de partie », score, verdict, actions) --- */
.end__title{ text-transform:lowercase; }
.end__total, .fin__s b{ font-variant-numeric:tabular-nums; }
.badge, .fin__rec, .tag--u{ text-transform:lowercase; }
.end__credits a, .fin__link{ text-transform:lowercase; }

/* --- textes trop petits (Espace : graduations et légendes) --- */
.ruler text{ font-size:12px !important; }
.tile__name{ font-size:12px !important; }

/* --- Le Chiffre : le « ? » se touche sur 44 px --- */
#edit, #num{ min-width:44px; min-height:44px; }

/* --- arrivée d'un écran de jeu : fondu court, une seule fois --- */
@media (prefers-reduced-motion: no-preference){
  .screen.is-active, .screen:not([hidden]){ animation:lb-in .32s var(--lb-ease) both; }
  @keyframes lb-in{ from{ opacity:0; transform:translateY(8px); } }
}

/* --- dans une manche (Espace-Temps, Éducatif) : croix et son dans le même rond que partout --- */
.rbar .iconbtn{ background:var(--raised, #131313) !important; border:1px solid var(--line, rgba(255,255,255,.08)) !important; }

/* --- Le Pays mystère : tout tient dans l'écran du téléphone, sans défilement --- */
@media (max-width:699px){
  [data-lb-game="pays"] h1{ font-size:26px !important; line-height:1.1 !important; }
  [data-lb-game="pays"] .map{ height:calc(100svh - 268px) !important; min-height:340px !important; }   /* 15 nov. 2026 : la carte prend tout le reste de l écran */
  [data-lb-game="pays"] .foot{ display:none; }
}

/* --- sélecteur de jeux (13 nov. 2026) : la grille de toutes les icônes, ouverte par le bouton rond en haut à gauche --- */
.lbsw{ position:fixed; inset:0; z-index:2147483000; display:none; overflow-y:auto; overscroll-behavior:contain;
  background:rgba(8,8,8,.72); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
  font-family:Geist, ui-sans-serif, system-ui, sans-serif; color:#F5F5F5; letter-spacing:-.01em; }
.lbsw.is-on{ display:block; animation:lbsw-bg .28s ease both; }
.lbsw.is-out{ animation:lbsw-bg .2s ease reverse both; }
@keyframes lbsw-bg{ from{ opacity:0; } }
html.lbsw-open, html.lbsw-open body{ overflow:hidden; }
.lbsw__in{ max-width:760px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14px) 20px calc(env(safe-area-inset-bottom) + 40px); }
.lbsw__top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:52px; margin-bottom:22px; }
.lbsw__home{ justify-self:start; display:inline-flex; align-items:center; gap:4px; height:40px; padding:0 14px 0 8px; border-radius:999px; background:#FAFAFA; color:#0A0A0A;
  font-size:15px; font-weight:500; text-decoration:none; transition:transform .16s var(--lb-ease); }
.lbsw__home svg{ width:20px; height:20px; }
.lbsw__t{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.03em; }
.lbsw__x{ justify-self:end; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#F5F5F5; cursor:pointer;
  transition:transform .16s var(--lb-ease), background-color .2s ease; }
.lbsw__x svg{ width:20px; height:20px; }
.lbsw__g{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px 12px; }
.lbsw__g a{ display:flex; flex-direction:column; align-items:center; gap:9px; color:#F5F5F5; text-decoration:none; border-radius:20px; outline-offset:4px;
  -webkit-tap-highlight-color:transparent; }
.lbsw__ic{ position:relative; display:grid; place-items:center; width:68px; height:68px; border-radius:19px; color:#0B0B0B;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%), var(--c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.14), 0 12px 24px -12px color-mix(in srgb, var(--c) 80%, transparent);
  transition:transform .3s cubic-bezier(.32,1.4,.5,1); }
.lbsw__ic svg{ width:34px; height:34px; stroke-width:2.1; }
.lbsw__n{ max-width:12ch; font-size:12.5px; line-height:1.25; font-weight:500; text-align:center; color:rgba(245,245,245,.86); }
.lbsw__g a[aria-current] .lbsw__ic{ box-shadow:0 0 0 3px #0E0E0E, 0 0 0 5px #F5F5F5, inset 0 1px 0 rgba(255,255,255,.38); }
.lbsw__g a[aria-current] .lbsw__n{ color:#FFF; }
.lbsw__g a:active .lbsw__ic{ transform:scale(.9); transition-duration:.1s; }
.lbsw__home:active, .lbsw__x:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .lbsw__g a:hover .lbsw__ic{ transform:translateY(-4px) scale(1.06); } .lbsw__x:hover{ background:rgba(255,255,255,.16); } }
@media (min-width:700px){ .lbsw__g{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:34px 16px; } .lbsw__in{ padding-top:48px; } }
@media (prefers-reduced-motion:no-preference){
  .lbsw.is-on:not(.is-out) .lbsw__g li{ animation:lbsw-pop .5s cubic-bezier(.32,1.45,.5,1) both; animation-delay:calc(var(--i) * 18ms + 40ms); }
  @keyframes lbsw-pop{ from{ opacity:0; transform:translateY(14px) scale(.7); } }
}

/* --- 15 nov. 2026 : récompense GuessLab en fin de partie, étoiles 3D --- */
.lb-reward{ display:block; width:128px; height:128px; margin:0 auto 10px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));
  animation:lb-rw .9s cubic-bezier(.34,1.56,.64,1) both; }
.lb-reward--cup{ width:150px; height:150px; filter:drop-shadow(0 0 28px rgba(255,201,60,.45)) drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
@keyframes lb-rw{ 0%{ opacity:0; transform:translateY(24px) scale(.6) rotate(-10deg); } 60%{ opacity:1; transform:translateY(-4px) scale(1.06) rotate(3deg); } 100%{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .lb-reward{ animation:none; } }
/* étoiles des jeux en gelée : les étoiles 3D de la DA */
.stars i{ background:url('/brand/gl/items/star-0.webp') center / contain no-repeat; }
.stars i svg{ display:none !important; }
.stars i.on{ background-image:url('/brand/gl/items/star-full.webp'); animation:lb-star .55s cubic-bezier(.34,1.7,.6,1) both; }
@keyframes lb-star{ 0%{ transform:scale(.2) rotate(-40deg); } 60%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:none; } }

/* grille des jeux : pictos 3D GuessLab (15 nov. 2026) */
.lbsw__ic--gl{ background:none !important; box-shadow:0 12px 24px -12px rgba(0,0,0,.6) !important; overflow:hidden; }
.lbsw__ic--gl img{ width:100%; height:100%; object-fit:cover; display:block; }
.lbsw{ background:rgba(8,8,13,.78); }
.lb-reward--chiot{ width:150px; height:150px; border-radius:34px; }

/* le joueur dans le jeu (15 nov. 2026) : son chiot dans le bouton rond, et sa signature sur l'écran de fin */
.lb-back.has-me, #quitBtn.has-me{ padding:0 !important; overflow:hidden; border:2px solid #FF2DAA !important; }
.lb-back.has-me .lb-x{ display:none !important; }
.lb-me{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.lb-who{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 14px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.lb-who .lb-me{ width:34px; height:34px; }
.lb-back > img.lb-me, #quitBtn > img.lb-me{ display:block !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; border-radius:50%; }