/* ==========================================================================
   UI CAMP — habillage commun « cozy-craft » (papier kraft, bois, cuir cousu,
   écussons brodés, tampons) pour les interfaces posées PAR-DESSUS un canvas 3D.

   Mode d'emploi rapide (détails dans socle/LISEZMOI.md, section « UI Camp ») :
     <link rel="stylesheet" href="../socle/vendor/polices.css">
     <link rel="stylesheet" href="../socle/ui-camp.css">
     <canvas id="scene"></canvas>                ← le moteur 3D, à part
     <div class="kr-ui"> … composants … </div>   ← la couche d'interface

   - Tout est préfixé « kr- » (kraft) : rien ne déborde sur les styles d'un jeu.
   - Les couleurs et matières sont des variables --kr-* : un jeu les surcharge
     sur .kr-ui (ex. --kr-lieu pour la couleur de son lieu).
   - Thème de nuit : ajouter la classe .kr-veillee sur .kr-ui (mêmes formes,
     autres couleurs).
   - Interfaces FIXES : chaque bloc a une taille donnée ; les textes longs sont
     coupés (…) ou défilent dans leur cadre, rien ne pousse rien.
   - Jauges sans JS : style="--kr-val:.72" (0 à 1).
   - Boussole : style="--kr-cap:45deg" sur .kr-carte.
   ========================================================================== */

/* ---------- 1. Jetons (variables) ----------
   .kr-peau : les mêmes jetons sur le <body> d'un jeu dont on repeint l'interface existante
   (sans la couche fixe .kr-ui). */
.kr-ui,.kr-peau{
  /* papier */
  --kr-papier:#F5E8C7;
  --kr-kraft:#E3D1B4;
  --kr-kraft-fonce:#C9AE85;
  /* encre / feutre */
  --kr-encre:#2C1E16;
  --kr-encre-douce:#3D2B1F;
  --kr-encre-pale:rgba(44,30,22,.55);
  /* bois, cuir, tissu */
  --kr-bois:#D29054;
  --kr-bois-clair:#E4AE76;
  --kr-bois-fonce:#A86A36;
  --kr-cuir:#8B5A2B;
  --kr-cuir-fonce:#6B4220;
  --kr-tissu:#5E7D4A;
  --kr-fil:#F5E8C7;
  /* accents */
  --kr-lieu:#4F7A3A;          /* couleur du lieu (chaque jeu la change) */
  --kr-sante:#C2493A;
  --kr-endurance:#D9A33A;
  --kr-eau:#4C86A8;
  --kr-tampon:#A5392B;
  --kr-lanterne:#F2B84B;
  /* textes posés sur le papier */
  --kr-texte:var(--kr-encre);
  --kr-texte-doux:var(--kr-encre-douce);
  /* polices (servies par socle/vendor/polices.css) */
  --kr-police:'Fredoka','Atkinson Hyperlegible',system-ui,sans-serif;
  --kr-police-titre:'Fredoka','Lilita One',system-ui,sans-serif;
  --kr-police-main:'Patrick Hand','Fredoka','Atkinson Hyperlegible',system-ui,sans-serif;
  /* formes */
  --kr-trait:2.5px;
  --kr-marge:clamp(10px,2vw,20px);
  --kr-bord-main:18px 7px 16px 9px / 9px 16px 7px 18px;   /* bord « dessiné à la main » */
  --kr-bord-main2:7px 16px 9px 18px / 16px 9px 18px 7px;
  --kr-ombre:0 6px 0 rgba(44,30,22,.18),0 10px 24px rgba(20,12,6,.28);
  --kr-vitesse:.18s;
  /* matières (textures en SVG intégré : aucune image à charger) */
  --kr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --kr-taches:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  --kr-veines:repeating-linear-gradient(93deg,transparent 0 9px,rgba(92,52,20,.16) 9px 10px,transparent 10px 17px,rgba(255,236,200,.10) 17px 18px,transparent 18px 26px);
  --kr-sergé:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px);
  --kr-usure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='u'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4.2 0 0 0 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23u)'/%3E%3C/svg%3E");

  font-family:var(--kr-police);
  color:var(--kr-texte);
  -webkit-font-smoothing:antialiased;
}

/* Thème de nuit : mêmes formes, papier passé à la lanterne. */
.kr-ui.kr-veillee,.kr-peau.kr-veillee{
  --kr-papier:#3A3026;
  --kr-kraft:#2E261F;
  --kr-kraft-fonce:#1F1A15;
  --kr-encre:#120D09;
  --kr-encre-douce:#120D09;
  --kr-encre-pale:rgba(245,232,199,.35);
  --kr-texte:#F5E8C7;
  --kr-texte-doux:#D9C6A0;
  --kr-bois:#A8703E;
  --kr-bois-clair:#BC8550;
  --kr-bois-fonce:#7E4F27;
  --kr-ombre:0 6px 0 rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.5);
}

/* ---------- 2. La couche d'interface au-dessus du canvas ---------- */
.kr-ui{
  position:fixed; inset:0; z-index:10;
  pointer-events:none;              /* la 3D reste cliquable… */
  font-size:16px; line-height:1.3;
}
.kr-ui > *{ pointer-events:auto; }  /* …sauf sur les composants */
.kr-ui *,.kr-ui *::before,.kr-ui *::after{ box-sizing:border-box; }

/* les quatre coins (avec les encoches des téléphones) */
.kr-ui .kr-hg{ position:absolute; top:calc(var(--kr-marge) + env(safe-area-inset-top,0px)); left:calc(var(--kr-marge) + env(safe-area-inset-left,0px)); }
.kr-ui .kr-hd{ position:absolute; top:calc(var(--kr-marge) + env(safe-area-inset-top,0px)); right:calc(var(--kr-marge) + env(safe-area-inset-right,0px)); }
.kr-ui .kr-bg{ position:absolute; bottom:calc(var(--kr-marge) + env(safe-area-inset-bottom,0px)); left:calc(var(--kr-marge) + env(safe-area-inset-left,0px)); }
.kr-ui .kr-bd{ position:absolute; bottom:calc(var(--kr-marge) + env(safe-area-inset-bottom,0px)); right:calc(var(--kr-marge) + env(safe-area-inset-right,0px)); }

/* ---------- 3. Matière : le papier ---------- */
.kr-papier{
  position:relative;
  color:var(--kr-texte);
  background:
    var(--kr-grain),
    var(--kr-taches),
    radial-gradient(120% 90% at 30% 20%,var(--kr-papier) 0 45%,var(--kr-kraft) 100%);
  border:var(--kr-trait) solid var(--kr-encre);
  border-radius:var(--kr-bord-main);
  box-shadow:inset 0 0 26px rgba(120,78,30,.28),var(--kr-ombre);
}
/* second trait de feutre, un peu décalé : le côté « dessiné » */
.kr-papier::before{
  content:""; position:absolute; inset:3px -2px -1px 2px;
  border:1.5px solid var(--kr-encre-pale);
  border-radius:var(--kr-bord-main2);
  pointer-events:none;
}
.kr-kraft{ /* variante plus brune, pour les fonds de panneaux */
  --kr-papier:var(--kr-kraft);
  --kr-kraft:var(--kr-kraft-fonce);
}
/* coin replié (en haut à droite) */
.kr-pli::after{
  content:""; position:absolute; top:-1px; right:-1px; width:34px; height:34px;
  background:linear-gradient(225deg,transparent 0 48%,var(--kr-encre) 48% 53%,var(--kr-kraft-fonce) 53% 100%);
  border-bottom-left-radius:6px;
  box-shadow:-3px 3px 4px rgba(44,30,22,.18);
  pointer-events:none;
}
/* pliure verticale au milieu (papier qu'on a déplié) */
.kr-pliure{ background-image:
    linear-gradient(90deg,transparent 49.4%,rgba(92,60,25,.16) 49.6%,rgba(255,250,235,.35) 50.2%,transparent 50.6%),
    var(--kr-grain),var(--kr-taches),
    radial-gradient(120% 90% at 30% 20%,var(--kr-papier) 0 45%,var(--kr-kraft) 100%); }
/* scotch dans un coin */
.kr-scotch{ position:absolute; width:62px; height:20px; top:-9px; left:22px; transform:rotate(-7deg);
  background:linear-gradient(rgba(255,250,225,.55),rgba(235,225,190,.55)); border-left:1px dashed rgba(44,30,22,.15); border-right:1px dashed rgba(44,30,22,.15);
  pointer-events:none; }

/* ---------- 4. Titres, textes ---------- */
.kr-titre{
  margin:0; font-family:var(--kr-police-titre); font-weight:600;
  font-size:1.5rem; line-height:1.1; letter-spacing:.01em; color:var(--kr-texte);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kr-sous-titre{ margin:0; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--kr-texte-doux); opacity:.85; }
.kr-main{ font-family:var(--kr-police-main); font-size:1.12em; }
.kr-trait-sep{ /* séparateur en cordelette */
  height:8px; border:0; margin:10px 0;
  background:repeating-linear-gradient(60deg,var(--kr-bois-fonce) 0 3px,var(--kr-bois-clair) 3px 6px);
  -webkit-mask:linear-gradient(#000,#000) center/100% 4px no-repeat; mask:linear-gradient(#000,#000) center/100% 4px no-repeat;
}

/* ---------- 5. Boutons : bois, cuir cousu, tissu ---------- */
.kr-btn{
  --fond:var(--kr-bois); --fond2:var(--kr-bois-fonce); --txt:var(--kr-encre);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:44px; padding:.5em 1.1em;
  font:600 1rem/1 var(--kr-police); color:var(--txt); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--kr-veines),var(--kr-grain),linear-gradient(180deg,var(--kr-bois-clair),var(--fond) 55%,var(--fond2));
  border:var(--kr-trait) solid var(--kr-encre);
  border-radius:12px 8px 13px 7px / 8px 12px 7px 13px;
  box-shadow:inset 0 2px 0 rgba(255,240,210,.45),inset 0 -3px 0 rgba(70,35,10,.22),0 4px 0 var(--kr-encre),0 7px 10px rgba(20,12,6,.25);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform var(--kr-vitesse) ease,box-shadow var(--kr-vitesse) ease,filter var(--kr-vitesse) ease;
}
.kr-btn:hover{ transform:translateY(-1px) rotate(-.6deg); filter:brightness(1.05); }
.kr-btn:active,.kr-btn.est-enfonce{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,240,210,.3),inset 0 -1px 0 rgba(70,35,10,.2),0 1px 0 var(--kr-encre),0 2px 4px rgba(20,12,6,.2);
}
.kr-btn:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:3px; }
.kr-btn:disabled{ filter:grayscale(.7) opacity(.6); cursor:not-allowed; transform:none; }
.kr-btn > svg{ width:1.2em; height:1.2em; flex:none; }

/* cuir cousu */
.kr-btn--cuir{
  --txt:var(--kr-fil);
  background:var(--kr-grain),radial-gradient(130% 120% at 30% 20%,#A06B37,var(--kr-cuir) 55%,var(--kr-cuir-fonce));
}
.kr-btn--cuir::after,.kr-btn--tissu::after{
  content:""; position:absolute; inset:4px; border:1.8px dashed rgba(245,232,199,.72);
  border-radius:9px 6px 10px 5px / 6px 9px 5px 10px; pointer-events:none;
}
/* étiquette en tissu (couleur du lieu) */
.kr-btn--tissu{
  --txt:var(--kr-fil);
  background:var(--kr-sergé),var(--kr-grain),linear-gradient(180deg,color-mix(in srgb,var(--kr-lieu) 80%,#fff),var(--kr-lieu));
}
/* bouton rond (icône seule) */
.kr-btn--rond{ width:46px; height:46px; min-height:0; padding:0; border-radius:50% 48% 52% 50%; }
/* tailles */
.kr-btn--grand{ min-height:54px; font-size:1.15rem; padding:.55em 1.4em; }
.kr-btn--plein{ width:100%; }

/* ---------- 6. Écussons brodés et tampons ---------- */
.kr-ecusson{
  --fond:var(--kr-lieu); --bord:var(--kr-encre);
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:var(--taille,58px); height:var(--taille,58px); border-radius:50%;
  color:var(--kr-fil); font:600 calc(var(--taille,58px)*.36)/1 var(--kr-police-titre);
  background:var(--kr-sergé),var(--kr-grain),radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fond) 70%,#fff),var(--fond) 65%);
  border:var(--kr-trait) solid var(--bord);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--fond) 55%,#000),0 0 0 calc(4px + var(--kr-trait)) var(--bord),0 5px 8px rgba(20,12,6,.3);
}
.kr-ecusson::before{ /* point de broderie */
  content:""; position:absolute; inset:4px; border-radius:50%;
  border:2px dashed rgba(245,232,199,.75); pointer-events:none;
}
.kr-ecusson > svg{ width:58%; height:58%; position:relative; }
.kr-ecusson--blason{ border-radius:12px 12px 50% 50% / 12px 12px 58% 58%; }
.kr-ecusson--blason::before{ border-radius:9px 9px 50% 50% / 9px 9px 58% 58%; }
.kr-ecusson--sante{ --fond:var(--kr-sante); }
.kr-ecusson--bois{ --fond:var(--kr-bois-fonce); }
.kr-ecusson--eau{ --fond:var(--kr-eau); }

.kr-tampon{
  display:inline-block; padding:.18em .55em;
  font:700 .9rem/1.1 var(--kr-police-titre); letter-spacing:.1em; text-transform:uppercase;
  color:var(--couleur,var(--kr-tampon));
  border:3px solid currentColor; border-radius:6px 9px 5px 8px;
  box-shadow:inset 0 0 0 2px transparent,inset 0 0 0 3.5px currentColor;
  transform:rotate(var(--angle,-6deg));
  -webkit-mask:var(--kr-usure); mask:var(--kr-usure);
  opacity:.9; white-space:nowrap;
}
.kr-tampon--rond{ width:var(--taille,64px); height:var(--taille,64px); padding:0; display:inline-grid; place-items:center; border-radius:50%; font-size:.72rem; text-align:center; line-height:1; }

/* ---------- 7. Champs, curseurs, interrupteurs, choix ---------- */
.kr-champ{
  width:100%; min-height:42px; padding:.45em .75em;
  font:500 1.05rem/1.2 var(--kr-police-main); color:var(--kr-encre);
  background:
    linear-gradient(transparent 0 calc(100% - 9px),rgba(76,134,168,.35) calc(100% - 9px) calc(100% - 8px),transparent calc(100% - 8px)),
    var(--kr-grain),#FBF3DE;
  border:2px solid var(--kr-encre); border-radius:10px 6px 11px 7px / 6px 10px 7px 11px;
  box-shadow:inset 0 2px 4px rgba(44,30,22,.15);
  transition:box-shadow var(--kr-vitesse);
}
.kr-champ::placeholder{ color:rgba(44,30,22,.45); }
.kr-champ:focus{ outline:none; box-shadow:inset 0 2px 4px rgba(44,30,22,.15),0 0 0 3px var(--kr-lanterne); }

/* curseur (input type=range) : un trait de feutre et une cheville en bois */
.kr-curseur{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:pointer; }
.kr-curseur::-webkit-slider-runnable-track{ height:8px; border:2px solid var(--kr-encre); border-radius:6px 3px 7px 4px; background:linear-gradient(90deg,var(--kr-lieu) 0 var(--kr-pos,50%),rgba(44,30,22,.12) var(--kr-pos,50%)); }
.kr-curseur::-moz-range-track{ height:4px; border:2px solid var(--kr-encre); border-radius:6px 3px 7px 4px; background:rgba(44,30,22,.12); }
.kr-curseur::-moz-range-progress{ height:4px; background:var(--kr-lieu); border-radius:4px; }
.kr-curseur::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; margin-top:-10px; border-radius:50%; border:2.5px solid var(--kr-encre); background:var(--kr-veines),radial-gradient(circle at 35% 30%,var(--kr-bois-clair),var(--kr-bois-fonce)); box-shadow:0 2px 0 var(--kr-encre); transition:transform var(--kr-vitesse); }
.kr-curseur::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--kr-encre); background:radial-gradient(circle at 35% 30%,var(--kr-bois-clair),var(--kr-bois-fonce)); box-shadow:0 2px 0 var(--kr-encre); }
.kr-curseur:active::-webkit-slider-thumb{ transform:scale(1.12); }
.kr-curseur:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:2px; border-radius:8px; }

/* interrupteur (input type=checkbox) */
.kr-interrupteur{
  -webkit-appearance:none; appearance:none; position:relative; flex:none;
  width:52px; height:28px; cursor:pointer;
  border:2.5px solid var(--kr-encre); border-radius:16px 13px 15px 14px;
  background:var(--kr-grain),rgba(44,30,22,.15);
  transition:background var(--kr-vitesse);
}
.kr-interrupteur::after{
  content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  border:2px solid var(--kr-encre); background:radial-gradient(circle at 35% 30%,var(--kr-bois-clair),var(--kr-bois-fonce));
  transition:transform var(--kr-vitesse) cubic-bezier(.3,1.4,.5,1);
}
.kr-interrupteur:checked{ background:var(--kr-sergé),var(--kr-lieu); }
.kr-interrupteur:checked::after{ transform:translateX(24px); }
.kr-interrupteur:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:2px; }

/* groupe de choix (radios) : étiquettes de tissu, le choix en cours est cousu */
.kr-choix{ display:flex; gap:6px; }
.kr-choix input{ position:absolute; opacity:0; pointer-events:none; }
.kr-choix label{
  flex:1; min-width:0; min-height:38px; display:grid; place-items:center; padding:0 .4em;
  font:600 .92rem/1 var(--kr-police); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  border:2px solid var(--kr-encre); border-radius:9px 6px 10px 5px / 6px 9px 5px 10px;
  background:rgba(44,30,22,.07); color:var(--kr-texte);
  transition:background var(--kr-vitesse),color var(--kr-vitesse),transform var(--kr-vitesse);
}
.kr-choix label:hover{ transform:translateY(-1px); }
.kr-choix input:checked + label{ color:var(--kr-fil); background:var(--kr-sergé),var(--kr-lieu); box-shadow:inset 0 0 0 3px var(--kr-lieu),inset 0 0 0 4.5px rgba(245,232,199,.7); }
.kr-choix input:focus-visible + label{ outline:3px solid var(--kr-lanterne); outline-offset:2px; }

/* touche de clavier : petit cube de bois */
.kr-touche{
  display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 .4em;
  font:700 .85rem/1 var(--kr-police); color:var(--kr-encre);
  background:var(--kr-veines),linear-gradient(var(--kr-bois-clair),var(--kr-bois));
  border:2px solid var(--kr-encre); border-radius:7px 5px 8px 4px; box-shadow:0 3px 0 var(--kr-encre);
}

/* ---------- 8. Menu latéral (instructions / réglages) ---------- */
.kr-menu{
  position:absolute; top:var(--kr-marge); bottom:var(--kr-marge); left:calc(var(--kr-marge) + env(safe-area-inset-left,0px));
  width:min(320px,calc(100vw - 2*var(--kr-marge) - 34px));
  display:flex; flex-direction:column;
  padding:18px 18px 16px;
  z-index:3;
  transition:transform .35s cubic-bezier(.3,1.25,.5,1),opacity .25s;
}
.kr-menu.est-ferme{ transform:translateX(calc(-100% - var(--kr-marge) - 6px)) rotate(-1.5deg); opacity:.0; pointer-events:none; }
.kr-menu__tete{ display:flex; align-items:center; gap:12px; padding-right:26px; height:62px; flex:none; }
.kr-menu__tete > div{ min-width:0; }
.kr-onglets{ display:flex; gap:6px; margin:12px 0 10px; flex:none; }
.kr-onglet{
  flex:1; min-width:0; height:38px; cursor:pointer;
  font:600 .95rem/1 var(--kr-police); color:var(--kr-texte); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(44,30,22,.07); border:2px solid var(--kr-encre); border-bottom-width:3.5px;
  border-radius:12px 9px 4px 4px / 10px 12px 4px 4px;
  transition:background var(--kr-vitesse),transform var(--kr-vitesse);
}
.kr-onglet:hover{ transform:translateY(-1px); }
.kr-onglet[aria-selected="true"]{ background:var(--kr-veines),linear-gradient(var(--kr-bois-clair),var(--kr-bois)); color:var(--kr-encre); }
.kr-onglet:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:2px; }
.kr-menu__corps{ flex:1; min-height:0; overflow:auto; padding:2px 4px 8px 2px; scrollbar-width:thin; scrollbar-color:var(--kr-bois-fonce) transparent; }
.kr-menu__corps[hidden]{ display:none; }
.kr-menu__pied{ flex:none; display:grid; gap:10px; padding-top:12px; }
.kr-ligne{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:4px 0; border-bottom:1.5px dashed var(--kr-encre-pale); }
.kr-ligne:last-child{ border-bottom:0; }
.kr-ligne > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.kr-ligne--col{ flex-direction:column; align-items:stretch; gap:4px; }
.kr-ligne--col > span{ display:flex; justify-content:space-between; }
.kr-ligne b{ font-variant-numeric:tabular-nums; min-width:3ch; text-align:right; }
.kr-liste-touches{ display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:center; margin:6px 0 4px; }
.kr-liste-touches > span:nth-child(odd){ display:flex; gap:4px; }
/* la languette qui dépasse pour rouvrir le menu */
.kr-languette{
  position:absolute; top:calc(var(--kr-marge) + 70px); left:calc(var(--kr-marge) + env(safe-area-inset-left,0px));
  width:46px; height:58px; display:grid; place-items:center; cursor:pointer;
  border-radius:6px 16px 16px 6px / 6px 20px 20px 6px; padding:0;
  transition:transform var(--kr-vitesse),opacity var(--kr-vitesse);
}
.kr-languette:hover{ transform:translateX(3px); }
.kr-languette svg{ width:26px; height:26px; }
.kr-menu:not(.est-ferme) ~ .kr-languette{ opacity:0; pointer-events:none; }

/* ---------- 9. HUD du joueur (en bas à gauche) ---------- */
.kr-hud{ display:flex; align-items:center; gap:14px; padding:12px 16px 12px 12px; width:310px; height:104px; }
.kr-hud__jauges{ flex:1; min-width:0; display:grid; gap:9px; }
.kr-hud__nom{ font:600 .95rem/1 var(--kr-police-titre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px; }
.kr-jauge{
  --couleur:var(--kr-sante);
  display:grid; grid-template-columns:24px 1fr 3.2ch; align-items:center; gap:7px;
}
.kr-jauge > svg{ width:24px; height:24px; color:var(--couleur); filter:drop-shadow(0 1.5px 0 var(--kr-encre)); }
.kr-jauge__tube{
  position:relative; height:17px; overflow:hidden;
  background:var(--kr-grain),rgba(44,30,22,.16);
  border:2.5px solid var(--kr-encre); border-radius:9px 5px 10px 6px / 6px 10px 5px 9px;
  box-shadow:inset 0 2px 3px rgba(20,12,6,.25);
}
.kr-jauge__tube::before{ /* le remplissage, hachuré au crayon */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,245,220,.35),transparent 55%),
    repeating-linear-gradient(-55deg,transparent 0 5px,rgba(44,30,22,.22) 5px 7px),
    var(--couleur);
  transform-origin:left center; transform:scaleX(var(--kr-val,1));
  transition:transform .45s cubic-bezier(.3,.9,.4,1);
}
.kr-jauge__tube::after{ /* encoches tous les 10 % */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),rgba(44,30,22,.45) calc(10% - 1.5px) 10%);
}
.kr-jauge__val{ font:600 .85rem/1 var(--kr-police); font-variant-numeric:tabular-nums; text-align:right; }
.kr-jauge--endurance{ --couleur:var(--kr-endurance); }
.kr-jauge--eau{ --couleur:var(--kr-eau); }

/* ---------- 10. Discussion / dialogue (en bas à droite) ---------- */
.kr-dialogue{
  width:340px; height:236px; display:flex; flex-direction:column;
  padding:12px 12px 12px;
  border-radius:26px 12px 24px 14px / 14px 24px 12px 26px;
}
.kr-dialogue::before{ border-radius:24px 12px 26px 12px / 12px 26px 12px 24px; }
.kr-dialogue__tete{ display:flex; align-items:center; gap:8px; height:30px; flex:none; padding:0 4px 6px; border-bottom:1.5px dashed var(--kr-encre-pale); }
.kr-dialogue__tete .kr-titre{ font-size:1.05rem; flex:1; }
.kr-dialogue__fil{ flex:1; min-height:0; overflow-y:auto; padding:6px 4px; display:flex; flex-direction:column; gap:3px; scrollbar-width:thin; scrollbar-color:var(--kr-bois-fonce) transparent; }
.kr-msg{ font:400 1.06rem/1.22 var(--kr-police-main); overflow-wrap:anywhere; }
.kr-msg b{ font:600 .9rem/1 var(--kr-police); color:var(--qui,var(--kr-lieu)); margin-right:.3em; }
.kr-veillee .kr-msg b{ filter:brightness(1.7) saturate(.8); }
.kr-msg--camp{ color:var(--kr-texte-doux); font-style:italic; opacity:.85; }
.kr-dialogue__saisie{ display:flex; gap:8px; flex:none; padding-top:6px; }
.kr-dialogue__saisie .kr-btn{ min-height:42px; padding:0 .9em; }
.kr-dialogue.est-replie{ height:56px; }
.kr-dialogue.est-replie .kr-dialogue__fil,.kr-dialogue.est-replie .kr-dialogue__saisie{ display:none; }
.kr-dialogue.est-replie .kr-dialogue__tete{ border-bottom:0; padding-bottom:0; }

/* bulle de personnage (dialogue PNJ, en bas au centre) */
.kr-bulle{
  position:absolute; left:50%; bottom:calc(var(--kr-marge) + 120px + env(safe-area-inset-bottom,0px));
  width:min(560px,calc(100vw - 2*var(--kr-marge))); min-height:0; height:168px;
  display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 18px;
  z-index:2; transform:translateX(-50%); transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .2s;
}
.kr-bulle.est-cache{ transform:translateX(-50%) translateY(20px) scale(.96); opacity:0; pointer-events:none; }
.kr-bulle__texte{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.kr-bulle__texte p{ margin:4px 0 6px; flex:1; min-height:0; font:400 1.2rem/1.25 var(--kr-police-main); overflow:auto; }
.kr-bulle__choix{ display:flex; gap:8px; flex:none; }
.kr-bulle__choix .kr-btn{ min-height:38px; font-size:.92rem; padding:0 .9em; }

/* ---------- 11. Carte (minimap, en haut à droite) ---------- */
.kr-carte{
  --taille:190px; --cap:0deg;
  position:relative; width:var(--taille); height:var(--taille); flex:none;
}
.kr-carte__fond{ /* le contenu de la carte : canvas ou image */
  position:absolute; inset:12%; border-radius:50%; overflow:hidden;
  background:var(--kr-grain),#CFC08F;
  box-shadow:inset 0 0 18px rgba(44,30,22,.55);
}
.kr-carte__fond > canvas,.kr-carte__fond > img{ width:100%; height:100%; display:block; }
.kr-carte__fond::after{ /* le scout au centre : une flèche à l'encre */
  content:""; position:absolute; left:50%; top:50%; width:16px; height:20px; margin:-11px 0 0 -8px;
  background:var(--kr-tampon); clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);
  filter:drop-shadow(0 0 1.5px var(--kr-fil));
}
/* le cadre en corde tressée (deux rangées de torons décalées) */
.kr-carte__cadre{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%237C5A30' stroke-width='11'/%3E%3Ccircle cx='50' cy='50' r='45.3' fill='none' stroke='%23C9A46A' stroke-width='5.2' stroke-linecap='round' stroke-dasharray='3.2 3.9'/%3E%3Ccircle cx='50' cy='50' r='42.7' fill='none' stroke='%23E1C58F' stroke-width='5.2' stroke-linecap='round' stroke-dasharray='3.2 3.6' stroke-dashoffset='3.4'/%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%232C1E16' stroke-opacity='.35' stroke-width='.7' stroke-dasharray='.7 6.4' stroke-dashoffset='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 8px rgba(20,12,6,.35));
}
.kr-carte__cadre-trait{ /* traits d'encre dedans et dehors */
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1.5px var(--kr-encre);
}
.kr-carte__cadre-trait::after{ content:""; position:absolute; inset:12%; border-radius:50%; box-shadow:0 0 0 var(--kr-trait) var(--kr-encre); }
/* variante : cadre en bois gravé */
.kr-carte--bois .kr-carte__cadre{
  background:radial-gradient(circle,transparent 0 37.5%,var(--kr-encre) 37.5% 38.6%,var(--kr-bois-fonce) 38.6% 40%,var(--kr-bois) 41%,var(--kr-bois-clair) 45%,var(--kr-bois) 48%,var(--kr-bois-fonce) 49.4%,var(--kr-encre) 49.5% 50%,transparent 50.2%);
}
/* repères N E S O gravés, qui tournent avec la carte */
.kr-carte__reperes{ position:absolute; inset:0; transform:rotate(calc(-1 * var(--cap))); transition:transform .12s linear; pointer-events:none; }
.kr-carte__reperes span{
  position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px;
  display:grid; place-items:center; border-radius:50%;
  font:700 .78rem/1 var(--kr-police-titre); color:var(--kr-fil);
  background:var(--kr-cuir); border:2px solid var(--kr-encre);
  transform:rotate(var(--a)) translateY(calc(var(--taille) * -.44)) rotate(calc(-1 * var(--a) + var(--cap)));
}
.kr-carte__reperes span:first-child{ background:var(--kr-tampon); }
/* boussole sculptée, posée sur le bord */
.kr-boussole{
  position:absolute; left:-10px; bottom:-10px; width:62px; height:62px; border-radius:50%;
  background:var(--kr-veines),radial-gradient(circle at 38% 32%,var(--kr-bois-clair),var(--kr-bois) 55%,var(--kr-bois-fonce));
  border:var(--kr-trait) solid var(--kr-encre);
  box-shadow:inset 0 0 0 5px rgba(92,52,20,.22),inset 0 0 0 6.5px rgba(44,30,22,.5),inset 0 3px 6px rgba(255,235,200,.35),0 5px 8px rgba(20,12,6,.35);
}
.kr-boussole::before{ /* rose des vents gravée (fixe) */
  content:""; position:absolute; inset:9px;
  background:conic-gradient(from 0deg,rgba(60,32,12,.45) 0 2deg,transparent 2deg 88deg,rgba(60,32,12,.45) 88deg 92deg,transparent 92deg 178deg,rgba(60,32,12,.45) 178deg 182deg,transparent 182deg 268deg,rgba(60,32,12,.45) 268deg 272deg,transparent 272deg 358deg,rgba(60,32,12,.45) 358deg);
  border-radius:50%;
}
.kr-boussole__aiguille{
  position:absolute; inset:10px; transform:rotate(calc(-1 * var(--cap))); transition:transform .12s linear;
}
.kr-boussole__aiguille::before,.kr-boussole__aiguille::after{
  content:""; position:absolute; left:50%; width:10px; margin-left:-5px; height:50%;
}
.kr-boussole__aiguille::before{ top:0; background:var(--kr-tampon); clip-path:polygon(50% 4%,100% 100%,0 100%); }
.kr-boussole__aiguille::after{ bottom:0; background:var(--kr-papier); clip-path:polygon(0 0,100% 0,50% 96%); }
.kr-boussole__axe{ position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:var(--kr-encre); box-shadow:inset 0 1px 0 rgba(255,235,200,.4); }

/* ---------- 12. Petits plus ---------- */
.kr-pastille{ /* compteur rond (timbres, objets) */
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px;
  font:700 .8rem/1 var(--kr-police); color:var(--kr-fil); background:var(--kr-tampon);
  border:2px solid var(--kr-encre); border-radius:12px; font-variant-numeric:tabular-nums;
}
.kr-ico{ width:1.3em; height:1.3em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 13. Écrans moyens et téléphones ---------- */
@media (max-width:900px){
  .kr-dialogue{ width:300px; height:206px; }
  .kr-carte{ --taille:160px; }
}
@media (max-width:640px){
  .kr-ui{ font-size:15px; }
  .kr-carte{ --taille:122px; }
  .kr-carte__reperes span{ width:18px; height:18px; margin:-9px; font-size:.65rem; }
  .kr-boussole{ width:46px; height:46px; left:-6px; bottom:-6px; }
  .kr-hud{ width:228px; height:88px; gap:10px; padding:9px 12px 9px 9px; }
  .kr-hud .kr-ecusson{ --taille:46px; }
  .kr-jauge{ grid-template-columns:20px 1fr; }
  .kr-jauge > svg{ width:20px; height:20px; }
  .kr-jauge__val{ display:none; }
  /* sur téléphone la discussion monte au-dessus du HUD, repliée par défaut côté jeu */
  .kr-dialogue{ width:calc(100vw - 2*var(--kr-marge)); height:178px; }
  .kr-ui .kr-bd.kr-dialogue{ bottom:calc(var(--kr-marge) + 100px + env(safe-area-inset-bottom,0px)); }
  .kr-bulle__texte p{ font-size:1.08rem; }
  .kr-bulle{ height:200px; bottom:calc(var(--kr-marge) + 98px + env(safe-area-inset-bottom,0px)); grid-template-columns:1fr; }
  .kr-bulle > .kr-ecusson{ display:none; }
  .kr-menu{ width:calc(100vw - 2*var(--kr-marge)); }
}
@media (max-height:520px) and (orientation:landscape){
  .kr-carte{ --taille:118px; }
  .kr-dialogue{ height:160px; }
  .kr-hud{ height:84px; }
  .kr-menu__tete{ height:48px; }
}

/* ---------- 14. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .kr-ui *,.kr-ui *::before,.kr-ui *::after{ transition-duration:.01ms!important; }
}

/* ---------- 15. Ajouts (21 oct. 2026, démo Coin Chill) : corde carrée et rose des vents d'un seul tenant ----------
   Pour habiller une interface existante sans ajouter d'éléments (pseudo-éléments, canvas déjà là) :
   - --kr-corde : la corde tressée en source de border-image ; .kr-cadre-corde l'applique à un bloc carré
     (une carte en <canvas>, un portrait…). Avec box-sizing:border-box le bloc garde sa taille.
   - --kr-rose : une boussole en bois (rose gravée + aiguille, nord en rouge) dans une seule image,
     à poser en background d'un pseudo-élément (::after) quand on ne peut pas ajouter .kr-boussole et ses enfants. */
.kr-ui,.kr-peau{
  --kr-corde:repeating-linear-gradient(45deg,#7C5A30 0 2px,#C9A46A 2px 5px,#E1C58F 5px 7px,#7C5A30 7px 9px);
  --kr-rose:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.38' cy='.32' r='.7'%3E%3Cstop offset='0' stop-color='%23E4AE76'/%3E%3Cstop offset='.55' stop-color='%23D29054'/%3E%3Cstop offset='1' stop-color='%23A86A36'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='29.5' fill='url(%23b)' stroke='%232C1E16' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='%232C1E16' stroke-opacity='.45' stroke-width='1.3'/%3E%3Cpath d='M32 9v6M32 49v6M9 32h6M49 32h6' stroke='%233C200C' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M32 12l5.5 20h-11z' fill='%23A5392B' stroke='%232C1E16' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M32 52l5.5-20h-11z' fill='%23F5E8C7' stroke='%232C1E16' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='32' r='3.2' fill='%232C1E16'/%3E%3C/svg%3E");
}
.kr-cadre-corde{
  box-sizing:border-box; border:8px solid #7C5A30; border-image:var(--kr-corde) 8;
  box-shadow:0 0 0 1.5px var(--kr-encre),0 6px 10px rgba(20,12,6,.3);
}

/* ---------- 16. Les fenêtres COMMUNES du socle en kraft, EN JEU (21 oct. 2026) ----------
   Une seule source pour tous les jeux : Réglages communs (socle/reglages.js, avec les onglets Son de
   sons.js et Touches de touches.js), inventaire commun (socle/inventaire-ui.js), focus des menus à la
   manette (socle/manette-menus.js). Ne s'applique qu'en jeu : html.kraft est posé par Socle.peau('jeu')
   (socle/peau.js) ; au menu d'entrée et au hub ces fenêtres gardent la DA de nuit.
   On repeint seulement (fonds, traits, polices de même gabarit) : mêmes tailles, mêmes places.
   (socle/aide-touches.js ne fait que fondre la bande d'aide du jeu, socle/tchat.js n'a pas d'affichage :
   rien à peindre ici, chaque jeu peint sa bande d'aide et son tchat.)
   Jetons ajoutés :
   - --kr-papier-grand : le papier des GRANDES fenêtres, taches douces en dégradés (la texture --kr-taches
     montre ses raccords sur une grande surface) ;
   - --kr-m-bois, --kr-m-cuir, --kr-m-tissu, --kr-m-clair, --kr-hachures : les matières prêtes à poser en background. */
.kr-ui,.kr-peau{
  --kr-papier-grand:var(--kr-grain),radial-gradient(38% 32% at 82% 84%,rgba(150,100,40,.16),transparent 70%),radial-gradient(30% 26% at 12% 18%,rgba(150,100,40,.11),transparent 70%),radial-gradient(26% 22% at 60% 30%,rgba(150,100,40,.07),transparent 70%),radial-gradient(120% 90% at 30% 20%,var(--kr-papier) 0 45%,var(--kr-kraft) 100%);
  --kr-m-clair:var(--kr-grain),#FBF3DE;
  --kr-m-bois:var(--kr-veines),var(--kr-grain),linear-gradient(180deg,var(--kr-bois-clair),var(--kr-bois) 55%,var(--kr-bois-fonce));
  --kr-m-cuir:var(--kr-grain),radial-gradient(130% 120% at 30% 20%,#A06B37,var(--kr-cuir) 55%,var(--kr-cuir-fonce));
  --kr-m-tissu:var(--kr-sergé),var(--kr-grain),linear-gradient(180deg,color-mix(in srgb,var(--kr-lieu) 80%,#fff),var(--kr-lieu));
  --kr-hachures:linear-gradient(rgba(255,245,220,.35),transparent 55%),repeating-linear-gradient(-55deg,transparent 0 4px,rgba(44,30,22,.25) 4px 6px);
}

/* 16a. Les Réglages (Échap) : une feuille de kraft, onglets intercalaires (l'ouvert en bois),
   choix en étiquettes (le choix en cours en tissu cousu), curseurs à cheville de bois. */
html.kraft .scVoile{ background:rgba(44,30,22,.5); }
html.kraft .scVoile .scFen{
  color:var(--kr-encre); font-family:var(--kr-police);
  background:var(--kr-papier-grand); border:var(--kr-trait) solid var(--kr-encre); border-radius:var(--kr-bord-main);
  box-shadow:inset 0 0 30px rgba(120,78,30,.28),var(--kr-ombre);
}
html.kraft .scVoile .scFen::before{ content:""; position:absolute; inset:3px -2px -1px 2px; border:1.5px solid var(--kr-encre-pale); border-radius:var(--kr-bord-main2); pointer-events:none; }
html.kraft .scVoile .scFen h2{ color:var(--kr-encre); font-family:var(--kr-police-titre); font-weight:600; }
html.kraft .scVoile .scX{
  color:var(--kr-fil); background:var(--kr-m-cuir); border:2px solid var(--kr-encre); box-shadow:0 3px 0 var(--kr-encre);
  outline:1.5px dashed rgba(245,232,199,.7); outline-offset:-6px;
}
html.kraft .scVoile .scX:hover{ background:var(--kr-m-cuir); filter:brightness(1.08); }
html.kraft .scVoile .scX:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--kr-encre); }
html.kraft .scVoile .scOng{
  color:var(--kr-encre); background:rgba(44,30,22,.08); font-family:var(--kr-police-titre); font-weight:600;
  border:2px solid var(--kr-encre); border-bottom-width:3.5px; border-radius:12px 9px 4px 4px / 10px 12px 4px 4px;
}
html.kraft .scVoile .scOng:hover{ background:rgba(44,30,22,.14); color:var(--kr-encre); }
html.kraft .scVoile .scOng[aria-selected="true"]{ background:var(--kr-m-bois); color:var(--kr-encre); }
html.kraft .scVoile .scOng:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:2px; }
html.kraft .scVoile .scCorps{ scrollbar-color:var(--kr-bois-fonce) transparent; }
html.kraft .scVoile .scCorps h3{ color:var(--kr-cuir-fonce); font-family:var(--kr-police-titre); font-weight:600; }
html.kraft .scVoile .scLigne button,html.kraft .scVoile .scBtn{
  color:var(--kr-encre); background:rgba(255,248,226,.55); font-family:var(--kr-police);
  border:2px solid var(--kr-encre); border-radius:9px 6px 10px 5px / 6px 9px 5px 10px;
}
html.kraft .scVoile .scLigne button:hover,html.kraft .scVoile .scBtn:hover{ background:rgba(255,248,226,.9); }
html.kraft .scVoile .scLigne button[aria-pressed="true"]{
  color:var(--kr-fil); background:var(--kr-m-tissu); border-color:var(--kr-encre);
  box-shadow:inset 0 0 0 2.5px var(--kr-lieu),inset 0 0 0 4px rgba(245,232,199,.7);
}
html.kraft .scVoile .scNote,html.kraft .scVoile .fsAide,html.kraft .scVoile .scTinfo,html.kraft .scVoile .fsGr{ color:var(--kr-encre-douce); }
html.kraft .scVoile .fsPan,html.kraft .scVoile .scTouches{ color:var(--kr-encre); font-family:var(--kr-police); }
/* l'onglet Son (sons.js) : roues de volume sur étiquettes de papier, puces de musique */
html.kraft .scVoile .fsRoue{ background:rgba(255,248,226,.6); border:2px solid var(--kr-encre); border-radius:12px 8px 13px 7px / 8px 12px 7px 13px; box-shadow:0 2px 0 var(--kr-encre); }
html.kraft .scVoile .fsRoue:focus-visible{ box-shadow:0 0 0 3px var(--kr-lanterne); }
html.kraft .scVoile .fsRoue span{ color:var(--kr-encre-douce); }
html.kraft .scVoile .fsRoue.zero span{ color:var(--kr-tampon); }
html.kraft .scVoile .fsRoue svg circle{ fill:var(--kr-kraft); stroke:var(--kr-encre); }
html.kraft .scVoile .fsRoue svg path:first-of-type{ stroke:rgba(44,30,22,.18); }
html.kraft .scVoile .fsRoue svg path:nth-of-type(2){ stroke:var(--kr-bois-fonce); }
html.kraft .scVoile .fsChips button,html.kraft .scVoile .fsCoupe,html.kraft .scVoile .scTreset{ color:var(--kr-encre); background:rgba(255,248,226,.55); border:2px solid var(--kr-encre); border-radius:9px 6px 10px 5px / 6px 9px 5px 10px; box-shadow:0 2px 0 var(--kr-encre); }
html.kraft .scVoile .fsChips button[aria-pressed="true"]{ color:var(--kr-fil); background:var(--kr-m-tissu); border-color:var(--kr-encre); }
html.kraft .scVoile .fsCoupe[aria-pressed="true"]{ color:var(--kr-fil); background:var(--kr-m-cuir); }
/* l'onglet Touches (touches.js) : chaque touche en cube de bois */
html.kraft .scVoile .scTbtn{ color:var(--kr-encre); background:var(--kr-m-bois); border:2px solid var(--kr-encre); border-radius:7px 5px 8px 4px; box-shadow:0 3px 0 var(--kr-encre); font-family:var(--kr-police); }
html.kraft .scVoile .scTbtn.attend{ background:var(--kr-lanterne); }
html.kraft .scVoile .scTbtn.double{ border-color:var(--kr-tampon); box-shadow:0 3px 0 var(--kr-tampon); }
html.kraft .scVoile .scTaide,html.kraft .scVoile .scTgrille span.double{ color:var(--kr-tampon); }
html.kraft .scVoile input:not([type]),html.kraft .scVoile input[type=text]{ color:var(--kr-encre); background:var(--kr-m-clair); border:2px solid var(--kr-encre); border-radius:8px 5px 9px 6px; }
/* curseurs : trait de feutre + cheville en bois (même hauteur que l'ancien curseur) */
html.kraft .scVoile input[type=range]{ -webkit-appearance:none; appearance:none; height:22px; background:transparent; cursor:pointer; }
html.kraft .scVoile input[type=range]::-webkit-slider-runnable-track{ height:8px; border:2px solid var(--kr-encre); border-radius:6px 3px 7px 4px; background:var(--kr-grain),rgba(44,30,22,.12); }
html.kraft .scVoile input[type=range]::-moz-range-track{ height:4px; border:2px solid var(--kr-encre); border-radius:6px 3px 7px 4px; background:rgba(44,30,22,.12); }
html.kraft .scVoile input[type=range]::-moz-range-progress{ height:4px; background:var(--kr-lieu); }
html.kraft .scVoile input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; border:2.5px solid var(--kr-encre); background:var(--kr-veines),radial-gradient(circle at 35% 30%,var(--kr-bois-clair),var(--kr-bois-fonce)); box-shadow:0 2px 0 var(--kr-encre); }
html.kraft .scVoile input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--kr-encre); background:radial-gradient(circle at 35% 30%,var(--kr-bois-clair),var(--kr-bois-fonce)); box-shadow:0 2px 0 var(--kr-encre); }
html.kraft .scVoile input[type=range]:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:2px; border-radius:8px; }
html.kraft .scVoile input[type=checkbox]{ accent-color:var(--kr-lieu); }

/* 16b. L'inventaire commun (touche I) : feuille de kraft, colonnes et barre en papier plus brun,
   cases en papier clair cerné d'encre, boutons en bois, filtres en étiquettes, poids hachuré. */
html.kraft .iv-voile{ background:rgba(44,30,22,.5); color:var(--kr-encre); font-family:var(--kr-police); }
html.kraft .iv-fen{
  position:relative; background:var(--kr-papier-grand); border:var(--kr-trait) solid var(--kr-encre); border-radius:var(--kr-bord-main);
  box-shadow:inset 0 0 30px rgba(120,78,30,.28),var(--kr-ombre);
}
html.kraft .iv-haut h2,html.kraft .iv-col h3,html.kraft .iv-info .nom,html.kraft .iv-barre .lb{ font-family:var(--kr-police-titre); font-weight:600; }
/* le nom de l'objet à l'encre (la couleur de rareté, grise pour « commun », se lit mal sur le papier ; elle reste sur le liseré) */
html.kraft .iv-info .nom{ color:var(--kr-encre)!important; }
html.kraft .iv-col,html.kraft .iv-barre{ background:var(--kr-grain),rgba(160,112,58,.16); border:2px solid var(--kr-encre); border-radius:12px 8px 13px 7px / 8px 12px 7px 13px; }
html.kraft .iv-col.actif{ box-shadow:inset 0 0 0 3px var(--kr-lanterne); }
html.kraft .iv-col h3 small,html.kraft .iv-info .gen,html.kraft .iv-sous,html.kraft .iv-barre .aide,html.kraft .iv-bcases .iv-case .no{ color:var(--kr-encre-douce); }
html.kraft .iv-case{ background:var(--kr-m-clair); border:2px solid rgba(44,30,22,.7); border-radius:8px 6px 9px 5px / 6px 8px 5px 9px; box-shadow:inset 0 -2px 0 rgba(120,78,30,.15); }
html.kraft .iv-case.vide{ background:rgba(251,243,222,.4); border-style:dashed; border-color:rgba(44,30,22,.4); box-shadow:none; }
html.kraft .iv-case.cur{ box-shadow:0 0 0 3px var(--kr-lanterne); border-color:var(--kr-encre); }
html.kraft .iv-case.cible{ box-shadow:0 0 0 3px var(--kr-lieu); }
html.kraft .iv-case .nf{ background:var(--kr-tampon); }
html.kraft .iv-case .n{ font-family:var(--kr-police); text-shadow:0 0 3px #FBF3DE; }
html.kraft .iv-case .px{ color:var(--kr-cuir-fonce); font-family:var(--kr-police); text-shadow:0 0 3px #FBF3DE; }
html.kraft .iv-btn{ color:var(--kr-encre); background:var(--kr-m-bois); border:2px solid var(--kr-encre); border-radius:9px 6px 10px 5px / 6px 9px 5px 10px; box-shadow:0 2px 0 var(--kr-encre); font-family:var(--kr-police); }
html.kraft .iv-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 0 0 var(--kr-encre); }
html.kraft .iv-x{ color:var(--kr-fil); background:var(--kr-m-cuir); outline:1.5px dashed rgba(245,232,199,.7); outline-offset:-5px; }
html.kraft .iv-btn:focus-visible,html.kraft .iv-case:focus-visible{ outline:3px solid var(--kr-lanterne); outline-offset:1px; }
html.kraft .iv-pas{ color:var(--kr-encre); background:rgba(255,248,226,.55); border:1.5px solid var(--kr-encre); border-radius:8px 5px 9px 4px; font-family:var(--kr-police); }
html.kraft .iv-pas.on{ color:var(--kr-fil); background:var(--kr-m-tissu); }
html.kraft .iv-cherche,html.kraft .iv-sel{ color:var(--kr-encre); background:var(--kr-m-clair); border:2px solid var(--kr-encre); border-radius:8px 5px 9px 6px / 5px 8px 6px 9px; }
html.kraft .iv-cherche{ font-family:var(--kr-police-main); }
html.kraft .iv-poids{ background:var(--kr-grain),rgba(44,30,22,.14); border:2px solid var(--kr-encre); border-radius:6px 4px 7px 5px; }
html.kraft .iv-poids i{ background:var(--kr-hachures),var(--kr-lieu); }
html.kraft .iv-poids.l1 i{ background:var(--kr-hachures),var(--kr-endurance); }
html.kraft .iv-poids.l2 i{ background:var(--kr-hachures),#C2622A; }
html.kraft .iv-poids.lourd i,html.kraft .iv-poids.l3 i{ background:var(--kr-hachures),var(--kr-sante); }
html.kraft .iv-poids b{ background:var(--kr-encre); }
html.kraft .iv-pal{ color:var(--kr-encre); background:var(--kr-m-clair); border:1.5px solid var(--kr-encre); border-radius:6px 4px 7px 5px; font-family:var(--kr-police); }
html.kraft .iv-pal.l1{ background:var(--kr-grain),#F3E2B3; } html.kraft .iv-pal.l2{ background:var(--kr-grain),#F0C9A0; }
html.kraft .iv-pal.l3{ color:var(--kr-fil); background:var(--kr-grain),var(--kr-tampon); }
html.kraft .iv-ptxt,html.kraft .iv-bourse{ font-family:var(--kr-police); }
html.kraft .iv-info{ background:var(--kr-m-clair); border:2px solid var(--kr-encre); border-radius:12px 8px 13px 7px / 8px 12px 7px 13px; }
html.kraft .iv-info .desc{ font-family:var(--kr-police-main); }
html.kraft .iv-stats .p{ color:var(--kr-lieu); } html.kraft .iv-stats .m{ color:var(--kr-tampon); }
html.kraft .iv-fant{ background:var(--kr-m-clair); border-color:var(--kr-encre); }
html.kraft .iv-menu input[type=range]{ accent-color:var(--kr-bois-fonce); }

/* 16c. Les menus à la manette (socle/manette-menus.js) : le focus en trait d'encre + halo de lanterne
   (sur le papier clair, l'anneau ambre seul se voyait mal). Même épaisseur qu'avant. */
html.kraft .mmFocus{ outline:3px solid var(--kr-encre)!important; outline-offset:2px!important; box-shadow:0 0 0 6px rgba(242,184,75,.6)!important; }