/* Le banc d'essai 3D (/labo-3d). Aucune couleur en dur : tout vient de
   tokens.css, sauf les pastilles et marques de joueur, dont la couleur EST la
   donnée (posée en style par labo-3d.js, comme la couleur d'un joueur du
   Studio). Les composants (curseur, panneau, frise) sont ceux du design
   system (components.css, 33-35) : ici, seulement la mise en page. */

.labo-page{background:var(--bg);color:var(--ink);}

/* La scène domine : elle prend tout ce que le panneau laisse. */
.labo{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr);gap:14px 18px;height:100vh;height:100dvh;padding:14px 18px 18px;box-sizing:border-box;}
.labo-barre{grid-column:1/-1;display:flex;align-items:center;gap:14px;}
.labo-retour{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:transform .15s ease,border-color .15s ease;}
.labo-retour:hover{transform:translateX(-2px);border-color:var(--line-2);}
.labo-retour svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.labo-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);}
.labo-titre h1{margin:0;font-family:Fraunces,serif;font-size:24px;font-weight:600;line-height:1.15;}

.labo-scene-carte{position:relative;min-height:0;border-radius:var(--r-lg);overflow:hidden;background:var(--card-2);border:1px solid var(--line);}
/* `touch-action:none` : sans lui, un glissé au doigt fait défiler la page
   au lieu de tourner le court (même compromis que regles.css). */
.labo-scene{position:absolute;inset:0;cursor:grab;touch-action:none;}
.labo-scene canvas{display:block;width:100%;height:100%;}
.labo-scene.court-tourne{cursor:grabbing;}
.labo-repli{margin:0;padding:48px 16px;text-align:center;color:var(--ink-soft);font-size:14px;}

/* Ce qui flotte sur la scène : la phase du geste et la légende en haut, la
   frise en bas. Le verre dépoli garde le court lisible dessous. */
.labo-hud{position:absolute;left:14px;right:14px;display:flex;gap:10px;pointer-events:none;}
.labo-hud>*{pointer-events:auto;}
.labo-hud-haut{top:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.labo-hud-bas{bottom:14px;}
.labo-hud-bas .frise{flex:1;}
/* En partie (mode Jouer), ni piste ni temps : la frise se réduit à la pause et aux vitesses. */
.labo-hud-bas .frise:has(.frise-piste[hidden]){flex:0 0 auto;grid-template-columns:auto auto;}
.labo-phase{margin:0;padding:8px 14px;border-radius:var(--pill);background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;font-weight:700;color:var(--ink);max-width:min(100%,560px);}
.labo-phase:empty{display:none;}
.labo-phase small{margin-left:6px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.labo-legende{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.labo-legende span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--pill);background:color-mix(in srgb,var(--card) 86%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;font-weight:700;color:var(--ink-soft);}
.labo-legende i{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* Le panneau : pleine hauteur à côté de la scène. */
.labo-panneau{grid-row:2;grid-column:2;}
.labo-modes{grid-template-columns:repeat(4,1fr);}
/* Le mode Jouer (lot H) : le score, les cinq coups, le bouton de frappe. */
.labo-score{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;}
.labo-coups{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.labo-coups button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.labo-coups button kbd{font:inherit;font-size:12px;color:var(--ink-muted);}
.labo-coups button.selected{border-color:var(--sage);background:var(--sage-soft);color:var(--ink);}
.labo-frapper{width:100%;justify-content:center;gap:8px;}
.labo-frapper kbd{font:inherit;font-size:12px;opacity:.75;}
.labo-exercice-titre{margin:0;font-family:Fraunces,serif;font-size:17px;font-weight:600;line-height:1.25;color:var(--ink);overflow-wrap:anywhere;}
.labo-exercice-titre:empty{display:none;}
.labo-ecarts{margin:0;padding:0 0 0 18px;display:grid;gap:4px;font-size:12px;line-height:1.4;color:var(--ink-soft);}
.labo-ecarts:empty{display:none;}
.labo-ecarts small{font-size:12px;font-weight:700;color:var(--ink-muted);}
.labo-modes button{padding:6px 2px;}
.labo-nouvel{gap:8px;}
.labo-nouvel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.labo-resume{font-weight:700;color:var(--ink);}
.labo-resume:empty{display:none;}
.labo-legende small{font-weight:600;color:var(--ink-muted);}
.labo-seg-2{grid-template-columns:repeat(2,1fr);}
.labo-techniques .chip{min-height:34px;}
.labo-techniques .chip.active,.labo-suivis .chip.active{--cs:var(--sage-badge);--c:var(--sage-2);}
.labo-lien svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.labo-lien{flex:none;gap:6px;}
.labo-lien.est-fait{border-color:var(--sage);color:var(--sage-2);}

.labo-raccourcis{display:grid;gap:6px;margin:0;padding:12px 14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line);}
.labo-raccourcis div{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.labo-raccourcis dt,.labo-raccourcis dd{margin:0;font-size:12px;}
.labo-raccourcis dd{color:var(--ink-soft);}
.labo-raccourcis kbd{display:inline-block;min-width:22px;padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--card);font:inherit;font-size:12px;font-weight:700;text-align:center;color:var(--ink);}

/* Tablette et téléphone : la scène d'abord, le panneau en feuille. */
@media (max-width:900px){
  .labo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:auto;min-height:100dvh;padding:12px 12px 80px;}
  .labo-scene-carte{height:calc(100dvh - 140px);min-height:380px;}
  .labo-panneau{grid-row:auto;grid-column:auto;}
  .labo-raccourcis{display:none;}
}
@media (max-width:640px){
  .labo-hud{left:10px;right:10px;}
  .labo-hud-haut{top:10px;}
  .labo-hud-bas{bottom:10px;}
  .labo-titre h1{font-size:20px;}
}