:root{
  --bg:#2b2a33; --panel:#fdf6ec; --panel2:#f3e7d3; --ink:#3a3230; --soft:#8a7a6e;
  --green:#7fae6f; --green2:#5d8a4e; --rose:#e8a0a8; --gold:#e9c46a; --blue:#8fb6c9;
  --mask:#b08bbb; --auth:#7fae6f; --shadow:0 6px 24px rgba(40,30,20,.25);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  font-family:"Atkinson Hyperlegible","Verdana","Trebuchet MS",sans-serif; color:var(--ink);
  overflow:hidden; overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
#wrap{position:relative; width:min(96vw, calc(96vh * 1.6)); aspect-ratio:16/10;}
canvas{width:100%; height:100%; display:block; border-radius:18px; box-shadow:var(--shadow);
  image-rendering:auto; touch-action:none;
  transition:filter .6s ease, transform .6s ease; transform-origin:center center;}
.reduceMotion *{transition:none !important; animation:none !important;}

/* Contraste élevé (option d'accessibilité) : textes plus foncés, bordures nettes, fonds plus opaques */
.hiContrast{--ink:#241f1d; --soft:#5c5048; --green2:#3f6a32;}
.hiContrast .hudBox{background:rgba(253,246,236,1); border:2px solid var(--ink);}
.hiContrast .overlay{background:rgba(28,27,33,.94);}
.hiContrast .card{background:#fffdf8; border:2px solid var(--ink);}
.hiContrast .card button{border:2px solid var(--ink);}
.hiContrast .card .muted{color:var(--soft);}
.hiContrast #panelTabs button{border:2px solid var(--ink);}
.hiContrast #panelClose{background:#fff; border:2px solid var(--ink);}

/* Palette plus douce (option de confort) : la teinte sépia chaude est appliquée en ligne sur le canvas
   pendant le rendu (voir le bloc du voile sensoriel), afin de coexister avec le feutrage sans être écrasée.
   Désactivée par défaut, et neutralisée quand le contraste élevé est actif (qui prime). */

/* HUD épuré (option) : masque la ligne d'ambiance et le rappel des touches, ne laisse que l'essentiel. */
.simpleHud #hudEnv{display:none;}
.simpleHud #keysHint{display:none;}

/* Dialogue plus lisible (option) : interligne aéré et texte un peu plus grand dans la bulle. */
.readableDlg #dlgText{line-height:1.7; letter-spacing:.01em; font-size:18px;}
.readableDlg.fontL #dlgText{font-size:20px;} .readableDlg.fontXL #dlgText{font-size:23px;}

/* Police adaptée à la lecture (option) : famille plus régulière, espacement doux. Aucune dépendance externe. */
.dysFont, .dysFont .card, .dysFont #dlgText, .dysFont .hudBox{
  font-family:Verdana,Tahoma,'Trebuchet MS',sans-serif; letter-spacing:.02em; word-spacing:.06em;}

/* Panneaux opaques (option) : moins de transparence/flou pour une meilleure lisibilité. */
.solidPanels .overlay{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(28,27,33,.97);}
.solidPanels .card{background:#fffdf7;}
.solidPanels .hudBox{background:rgba(253,246,236,1);}

/* Lisibilité au clavier : anneau de focus net sur les contrôles des menus (jamais à la souris/tap). */
.card button:focus-visible, .card input:focus-visible, .card select:focus-visible,
#panelTabs button:focus-visible{outline:3px solid var(--green2,#3f6a32); outline-offset:2px; border-radius:8px;}

/* Transitions de menu douces (#30) : léger fondu + scale à l'ouverture, désactivé si mouvement réduit */
/* #79 — léger flou d'arrière-plan des overlays : la carte « flotte » au-dessus de la scène (profondeur AC). */
.overlay{opacity:0; transition:opacity .3s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.overlay.show{opacity:1;}
.reduceMotion .overlay{-webkit-backdrop-filter:none; backdrop-filter:none;}
.overlay .card{transform:scale(.96) translateY(8px); transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .3s ease; opacity:.6;}
.overlay.show .card{transform:scale(1) translateY(0); opacity:1;}

/* ---------- HUD ---------- */
#hud{position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; gap:10px;}
/* #56 — boîtes du HUD : liseré clair et léger relief « papier » AC, fondu d'arrivée doux. */
.hudBox{background:rgba(253,246,236,.93); border-radius:14px; padding:8px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, var(--shadow);
  border:1px solid rgba(0,0,0,.04); pointer-events:auto;
  animation:hudIn .4s ease both;}
@keyframes hudIn{0%{opacity:0; transform:translateY(-6px);}100%{opacity:1; transform:translateY(0);}}
.reduceMotion .hudBox{animation:none;}
#spoonsBox:focus-visible{outline:3px solid var(--green2); outline-offset:2px;}
#spoons{display:flex; flex-direction:column; gap:4px; line-height:1;}
/* Cuillères (théorie des cuillères) : nombre lisible + jauge segmentée colorée */
.spNum{font-size:14px; font-weight:bold; color:var(--ink); letter-spacing:.3px; white-space:nowrap;
  font-variant-numeric:tabular-nums; transition:color .3s ease;}
/* #57 — la couleur du nombre suit le niveau (vert/ambre/rose doux), comme la jauge. */
#spoons.lv-high .spNum{color:var(--green2);}
#spoons.lv-mid  .spNum{color:#a3702f;}
#spoons.lv-low  .spNum{color:#c06a72;}
.hiContrast #spoons .spNum{color:var(--ink);}
/* #47 — jauge de cuillères affinée : segments plus fins et hauts, coins plus doux,
   léger sheen vertical et halo discret sur les segments actifs (style uniquement —
   nombre, valeurs et logique inchangés). */
.spGauge{display:flex; gap:3px; align-items:flex-end;}
.spGauge .spSeg{width:6px; height:13px; border-radius:4px;
  background:linear-gradient(180deg, rgba(138,122,110,.16), rgba(138,122,110,.30));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.spGauge .spSeg.on{transform:translateY(-1px);}
.spGauge.lv-high .spSeg.on{background:linear-gradient(180deg, color-mix(in srgb, var(--green) 78%, #fff), var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 5px color-mix(in srgb, var(--green) 55%, transparent);}
.spGauge.lv-mid  .spSeg.on{background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 78%, #fff), var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent);}
.spGauge.lv-low  .spSeg.on{background:linear-gradient(180deg, color-mix(in srgb, var(--rose) 78%, #fff), var(--rose));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 5px color-mix(in srgb, var(--rose) 55%, transparent);}
.spGauge.spPulse{animation:spPulse .5s ease;}
@keyframes spPulse{0%{transform:scale(1);}40%{transform:scale(1.09);}100%{transform:scale(1);}}
.hiContrast .spGauge .spSeg{border:1px solid var(--ink);}
#spoonsBox{cursor:pointer;}
#energyLabel{font-size:10px; color:var(--soft); opacity:.72; margin-top:2px;}
/* HUD allégé : on replie le détail secondaire (énergie/jour/pièces/météo). */
#spoonsBox.lite #energyLabel, #spoonsBox.lite #statusIcons{display:none;}
#objBox{max-width:46%;}
#objTitle{font-size:11px; color:var(--soft); text-transform:uppercase; letter-spacing:1px;}
#objText{font-size:14px; font-weight:bold; margin-top:2px;}
/* HUD 2.0 — environnement discret (heure/jour/saison/météo) au-dessus de l'objectif */
#hudEnv{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--soft);
  opacity:.85; margin-bottom:3px; line-height:1.3;}
#hudEnv .envItem{display:inline-flex; align-items:center; gap:3px; white-space:nowrap;}
#hudEnv .envSep{opacity:.4;}
#hudEnv .envClock{font-variant-numeric:tabular-nums; font-weight:bold; color:var(--ink);}
/* #59 — total de pièces : petite pastille dorée discrète, chiffres alignés. */
#hudEnv .envCoins{font-variant-numeric:tabular-nums; font-weight:bold; color:#a3702f;
  background:rgba(233,196,106,.18); padding:0 6px; border-radius:999px;}
.hiContrast #hudEnv .envCoins{color:var(--ink); background:rgba(233,196,106,.4);}
.hiContrast #hudEnv{color:var(--soft); opacity:1;}
/* Objectif courant : petit point qui « bat » doucement pour le repérer d'un coup d'œil */
#objLine{display:flex; align-items:flex-start; gap:6px; margin-top:2px;}
#objDot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--green);
  margin-top:5px; box-shadow:0 0 0 0 rgba(127,174,111,.55); animation:objPulse 2.4s ease-in-out infinite;}
@keyframes objPulse{0%,100%{box-shadow:0 0 0 0 rgba(127,174,111,.45);}50%{box-shadow:0 0 0 4px rgba(127,174,111,0);}}
.reduceMotion #objDot{animation:none;}
.hiContrast #objDot{background:var(--green2); box-shadow:0 0 0 1px var(--ink);}
/* Icônes d'état : petites pastilles lisibles (casque / surcharge avec niveau / stim en cooldown) */
#statusIcons{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; font-size:13px;}
#statusIcons:empty{display:none;}
/* #58 — pastilles d'état : apparition douce, micro-relief, transition de fond lisible. */
.stChip{display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:999px;
  background:rgba(138,122,110,.16); line-height:1.5; white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset; transition:background-color .25s ease;
  animation:stChipIn .28s ease both;}
@keyframes stChipIn{0%{opacity:0; transform:scale(.9);}100%{opacity:1; transform:scale(1);}}
.reduceMotion .stChip{animation:none;}
.stChip .stLab{font-size:10px; font-weight:bold; letter-spacing:.2px; color:var(--soft);}
.stChip.st-head{background:rgba(143,182,201,.22);}
.stChip.st-head .stLab{color:var(--green2);}
.stChip.st-sens{background:rgba(232,160,168,.22);}
.stChip.st-sens .stLab{color:var(--rose);}
.stChip.st-sens.lvl3{background:rgba(232,160,168,.4);}
.stChip.st-stim{background:rgba(233,196,106,.26);}
.stChip.st-stim .stLab{color:var(--gold);}
.hiContrast .stChip{border:1px solid var(--ink); background:#fff;}
.hiContrast .stChip .stLab{color:var(--ink);}
/* #81 — bulle d'aide : pilule plus douce (liseré clair + ombre enveloppante), petite montée à l'apparition. */
#hint{position:absolute; bottom:12px; left:50%; transform:translateX(-50%) translateY(4px);
  background:rgba(58,50,48,.85); color:#fff; padding:7px 16px; border-radius:20px; font-size:14px;
  box-shadow:0 4px 14px rgba(28,22,40,.3), 0 1px 0 rgba(255,255,255,.12) inset;
  pointer-events:none; opacity:0; transition:opacity .25s ease, transform .25s ease;}
#hint.show{opacity:1; transform:translateX(-50%) translateY(0);}
.reduceMotion #hint{transition:opacity .25s ease;}
/* Barre du mode aménagement (placement des meubles + murs/sol) */
#placeBar{position:absolute; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:none; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px;
  background:rgba(58,50,48,.92); color:#fff; padding:8px 12px; border-radius:16px;
  box-shadow:var(--shadow); z-index:40; max-width:94%; font-size:13px;}
#placeBar.show{display:flex;}
#placeTitle{font-weight:700;}
#placeLabel{opacity:.92; font-style:italic; min-width:60px;}
#placeBtns{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
/* #80 — boutons d'aménagement : transition douce + pulsation tactile au toucher (cohérence AC). */
#placeBtns button{background:rgba(127,174,111,.96); color:#fff; border:none; cursor:pointer;
  padding:7px 11px; border-radius:12px; font-size:13px; font-family:inherit; box-shadow:var(--shadow);
  transition:transform .15s cubic-bezier(.2,.8,.3,1), background .2s ease;}
#placeBtns button:active{transform:scale(.92);}
#placeBtns button:focus-visible{outline:3px solid #fff; outline-offset:2px;}
#pbDone{background:rgba(110,158,94,.99); font-weight:700;}
#toasts{position:absolute; left:50%; bottom:54px; transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; align-items:center; gap:6px;
  pointer-events:none; max-width:80%; z-index:24;}
.toast{background:rgba(127,174,111,.96); color:#fff; padding:9px 18px; border-radius:20px;
  font-size:14px; text-align:center; box-shadow:var(--shadow); white-space:pre-line;
  text-shadow:0 1px 1px rgba(54,74,42,.35); line-height:1.4;
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .34s ease, transform .34s ease;}
.toast.show{opacity:1; transform:translateY(0) scale(1);}
/* #66 — toasts : icône avec ombre douce, ombre du toast plus enveloppante, liseré clair. */
.toast{box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(40,30,20,.28); border:1px solid rgba(255,255,255,.12);}
.toast .tIco{display:inline-block; margin-right:6px; opacity:.96; filter:drop-shadow(0 1px 1px rgba(54,74,42,.4));}
/* Petites étincelles de feedback (DOM, jamais brusque, annulées si mouvement réduit) */
#sparkles{position:absolute; inset:0; pointer-events:none; z-index:23; overflow:hidden;}
.sparkle{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,240,190,.9) 45%, rgba(255,240,190,0) 70%);
  opacity:0; will-change:transform,opacity; animation:sparklePop 1s ease-out forwards;}
@keyframes sparklePop{
  0%{opacity:0; transform:translate(0,0) scale(.4);}
  18%{opacity:.95;}
  100%{opacity:0; transform:translate(var(--sdx,0), var(--sdy,-16px)) scale(1.15);}
}
.reduceMotion #sparkles{display:none;}
/* ---------- Se poser : respiration guidée (douce) ---------- */
@keyframes regBreath{
  0%{transform:scale(.62); box-shadow:0 0 0 0 rgba(125,155,106,.18);}
  40%{transform:scale(1); box-shadow:0 0 38px 10px rgba(125,155,106,.22);}
  55%{transform:scale(1); box-shadow:0 0 38px 10px rgba(125,155,106,.22);}
  100%{transform:scale(.62); box-shadow:0 0 0 0 rgba(125,155,106,.18);}
}
.regBreathBox{display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0 4px;}
.regOrb{width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #cfe3c0, #9ec384 70%, #7d9b6a);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:14px; color:#3a4a30; transform:scale(.62);}
.regOrb.run{animation:regBreath 11s ease-in-out infinite;}
.reduceMotion .regOrb{animation:none !important; transform:scale(.82);}
.regOrbLabel{font-weight:600; letter-spacing:.5px;}
.regCount{font-size:13px;}
#sensoryVeil{position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0) 35%, rgba(255,255,255,.95) 100%);
  opacity:0; transition:opacity .4s;}

/* ---------- Dialogue ---------- */
/* #48 — boîte de dialogue : coins plus doux, ombre douce multi-couche, liseré léger. UI only. */
#dlg{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); width:86%;
  background:var(--panel); border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 28px rgba(28,22,40,.22), 0 2px 8px rgba(28,22,40,.14);
  border:1px solid rgba(0,0,0,.05);
  padding:16px 20px 14px; display:none; z-index:25;}
#dlg.show{display:block;}
/* #50 — apparition « pop » douce de la boîte de dialogue (style AC) : petit fondu + montée
   discrète à l'ouverture. Bornée par .reduceMotion. N'altère ni la logique, ni le contenu. */
#dlg.show{animation:dlgPop .26s cubic-bezier(.2,.85,.3,1.05) both;}
@keyframes dlgPop{0%{opacity:0; transform:translateX(-50%) translateY(10px) scale(.985);}100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}}
.reduceMotion #dlg.show{animation:none;}
/* Pendant un dialogue, le déplacement est verrouillé : on masque TOUS les contrôles
   tactiles (y compris le bouton E) pour qu'ils ne recouvrent pas le texte.
   Double classe = spécificité suffisante pour battre « .touch #touchUI ». */
.touch.dlgOpen #touchUI{display:none;}
/* #51 — nom du PNJ stylé « étiquette » AC : petit liseré clair, ombre douce, léger relief. */
#dlgName{display:inline-block; font-weight:bold; font-size:15px; background:var(--panel2);
  padding:3px 14px; border-radius:999px; margin-bottom:8px; letter-spacing:.2px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 5px rgba(28,22,40,.12);
  border:1px solid rgba(0,0,0,.05);}
.hiContrast #dlgName{border:2px solid var(--ink);}
/* Portrait expressif du locuteur (Wave 3). Flotte en haut-gauche de la boîte ;
   masqué par défaut, affiché via .hasFace quand n.sp est un PNJ. */
/* #48 — portrait mieux cadré : un peu plus grand, cadre net + ombre douce, contenu non rogné. */
#dlgFace{display:none; float:left; width:58px; height:58px; margin:0 14px 6px 0;
  border-radius:16px; background:var(--panel2); object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.7), 0 0 0 3px rgba(0,0,0,.06), 0 3px 8px rgba(28,22,40,.16);}
/* #73 — portrait : petite apparition douce quand un PNJ parle (bornée par mouvement réduit). */
#dlg.hasFace #dlgFace{display:block; animation:facePop .3s cubic-bezier(.2,.85,.3,1.05) both;}
@keyframes facePop{0%{opacity:0; transform:scale(.86);}100%{opacity:1; transform:scale(1);}}
.reduceMotion #dlg.hasFace #dlgFace{animation:none;}
@media (max-width:520px){ #dlgFace{width:48px; height:48px; margin:0 11px 4px 0;} }
#dlgText{font-size:16px; line-height:1.55; min-height:52px; white-space:pre-wrap;}
#dlgChoices{display:flex; flex-direction:column; gap:7px; margin-top:12px;}
#dlgChoices button{
  font-family:inherit; font-size:15px; text-align:left; padding:9px 14px; border-radius:12px;
  border:2px solid var(--panel2); background:#fff; cursor:pointer; line-height:1.4;}
/* #54 — transitions douces des choix + sélection : liseré qui s'anime, léger relief au survol/focus. */
#dlgChoices button{transition:border-color .18s ease, background .18s ease, transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;}
#dlgChoices button:hover, #dlgChoices button.sel{border-color:var(--green); background:#f2f8ee;
  box-shadow:0 2px 8px rgba(127,174,111,.18);}
#dlgChoices button.sel{transform:translateX(2px);}
#dlgChoices button:active{transform:scale(.985);}
#dlgChoices button:focus-visible{outline:3px solid var(--green2); outline-offset:2px;}
/* #55 — apparition échelonnée des choix (douce, jamais clignotante) */
#dlgChoices button{animation:choiceIn .26s ease both;}
@keyframes choiceIn{0%{opacity:0; transform:translateY(6px);}100%{opacity:1; transform:translateY(0);}}
.reduceMotion #dlgChoices button{animation:none;}
/* #82 — cibles tactiles des choix garanties ≥44px de haut (accessibilité motrice). */
#dlgChoices button{min-height:44px;}
#dlgChoices button .tag{font-size:12px; color:var(--soft); margin-left:6px;}
#dlgChoices button.mask{border-left:6px solid var(--mask);}
#dlgChoices button.auth{border-left:6px solid var(--auth);}
/* #52 — invite « continuer » : petite flèche qui rebondit doucement (chevron animé) pour
   signaler qu'on peut avancer. Apparition en fondu. Bornée par .reduceMotion. */
#dlgNext{margin-top:10px; text-align:right; font-size:13px; color:var(--soft);
  animation:dlgNextIn .3s ease both;}
#dlgNext::before{content:'▾'; display:inline-block; margin-right:5px; color:var(--green2);
  animation:dlgNextBob 1.3s ease-in-out infinite;}
@keyframes dlgNextIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes dlgNextBob{0%,100%{transform:translateY(0);}50%{transform:translateY(2px);}}
.reduceMotion #dlgNext, .reduceMotion #dlgNext::before{animation:none;}
.hiContrast #dlgNext{color:var(--ink);}

/* ---------- Panels & overlays ---------- */
#fade{position:absolute; inset:0; border-radius:18px; background:#1f2228; opacity:0;
  pointer-events:none; transition:opacity .2s ease; z-index:28;
  transform-origin:center center;}
/* #49 — transition d'arrivée : léger fondu + zoom d'entrée doux. Le voile sombre se retire
   en s'agrandissant très peu (1 -> 1.06), ce qui « ouvre » la scène derrière. Bornée par
   .reduceMotion (annulée). Ne touche jamais le transform du canvas (réservé au voile sensoriel). */
#fade.fadeZoom{animation:fadeZoomIn .46s cubic-bezier(.2,.78,.32,1) both;}
/* #75 — arrivée de carte peaufinée : le voile se retire en s'ouvrant légèrement, avec une
   toute fin de course plus lente (l'opacité s'éteint avant l'échelle pour un fondu « doux »). */
@keyframes fadeZoomIn{
  0%{opacity:.84; transform:scale(1);}
  60%{opacity:.22;}
  100%{opacity:0; transform:scale(1.05);}
}
.reduceMotion #fade.fadeZoom{animation:none;}
.overlay{position:absolute; inset:0; border-radius:18px; background:rgba(43,42,51,.88);
  display:none; align-items:center; justify-content:center; z-index:30;}
.overlay.show{display:flex;}
.card{background:var(--panel); border-radius:20px; padding:30px 36px; max-width:640px; width:88%;
  max-height:86%; overflow-y:auto; box-shadow:var(--shadow);}
/* #62 — scroll feutré : barre fine, douce, discrète (WebKit + Firefox). */
.card{scrollbar-width:thin; scrollbar-color:rgba(138,122,110,.4) transparent;}
.card::-webkit-scrollbar{width:8px;}
.card::-webkit-scrollbar-track{background:transparent;}
.card::-webkit-scrollbar-thumb{background:rgba(138,122,110,.35); border-radius:8px; border:2px solid transparent; background-clip:content-box;}
.card::-webkit-scrollbar-thumb:hover{background:rgba(138,122,110,.55); background-clip:content-box;}
/* #63 — focus clavier/manette visibles partout dans les cartes (accessibilité). */
.card button:focus-visible, .card select:focus-visible, .card input:focus-visible{outline:3px solid var(--green2); outline-offset:2px;}
#panelClose{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right));
  width:46px; height:46px; border-radius:50%; border:none; background:rgba(253,246,236,.96); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer; z-index:6; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; margin:0; padding:0; touch-action:manipulation;}
#panelClose:hover{background:#fff;}
#panelClose:active{transform:scale(.92);}
/* #74 — bouton fermer : focus clavier/manette visible + transition douce (accessibilité, ≥44px). */
#panelClose{transition:transform .16s cubic-bezier(.2,.8,.3,1), background .2s ease;}
#panelClose:focus-visible{outline:3px solid var(--green2); outline-offset:3px;}
/* Taille de police de l'interface (option d'accessibilité) */
.fontL #dlgText{font-size:18px;} .fontXL #dlgText{font-size:21px;}
.fontL .card p, .fontL .card .muted, .fontL .questStep, .fontL .kv, .fontL #objText{font-size:16px;}
.fontXL .card p, .fontXL .card .muted, .fontXL .questStep, .fontXL .kv, .fontXL #objText{font-size:18px;}
.fontL #hint{font-size:16px;} .fontXL #hint{font-size:17px;}
/* Boutons tactiles plus grands (option confort moteur) — cibles plus généreuses. */
.touchBig .card button, .touchBig #dlgChoices button, .touchBig #panelTabs button{padding:14px 26px; font-size:16px;}
.touchBig label.opt{font-size:16px; margin:14px 0;}
.touchBig label.opt select{font-size:15px; padding:7px 12px;}
.touchBig #panelClose{width:48px; height:48px; font-size:22px;}
.touchBig label.opt input[type=checkbox], .touchBig label.opt input[type=radio]{transform:scale(1.3);}
.card h1{font-size:26px; margin-bottom:6px;}
.card h2{font-size:19px; margin:14px 0 6px;}
.card p{font-size:15px; line-height:1.6; margin:8px 0;}
.card .muted{color:var(--soft); font-size:13px;}
.card button{font-family:inherit; font-size:15px; padding:10px 22px; border-radius:14px; border:none;
  background:var(--green); color:#fff; cursor:pointer; margin:10px 8px 0 0;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background .2s ease, box-shadow .2s ease;}
.card button:hover{background:var(--green2);}
.card button:active{transform:scale(.95) translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.14);}
.card button.ghost{background:var(--panel2); color:var(--ink);}
.flash{background:#3d3428; color:#f0e3cb;}
.flash h2{color:#e9c46a;}
.flash p{color:#f0e3cb;}
.kv{display:flex; gap:8px; align-items:center; margin:6px 0; font-size:15px;}
/* #76 — barres de progression : remplissage en transition douce + léger dégradé/sheen AC. */
.bar{flex:1; height:10px; background:var(--panel2); border-radius:6px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.bar i{display:block; height:100%; border-radius:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--green) 80%, #fff), var(--green));
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
  transition:width .5s cubic-bezier(.2,.8,.3,1);}
.reduceMotion .bar i{transition:none;}
.npcDot{width:22px; height:22px; min-width:22px; border-radius:50%; display:inline-block; position:relative; overflow:hidden; box-shadow:0 0 0 2px #fff, 1px 1px 0 rgba(0,0,0,.08); vertical-align:middle;}
.npcDot b{position:absolute; left:0; right:0; bottom:0; height:52%; display:block;}
.npcDot i{position:absolute; left:22%; right:22%; top:6%; height:40%; border-radius:50% 50% 40% 40%; display:block;}
.actFrise{display:flex; gap:6px; margin:2px 0 12px;}
.actFrise span{flex:1; text-align:center; font-size:11px; padding:5px 4px; border-radius:9px; background:var(--panel2); color:var(--soft);}
/* #78 — frise des actes : acte courant nettement surligné, transition douce entre états. */
.actFrise span{transition:background .25s ease, color .25s ease, box-shadow .25s ease;}
.actFrise span.on{background:#f2f8ee; color:var(--green2); font-weight:bold;
  box-shadow:inset 0 0 0 2px var(--green), 0 2px 6px rgba(127,174,111,.18);}
.softStats{font-size:12px; color:var(--soft); margin:2px 0 10px;}
/* #60 — onglets style AC : rangée arrondie, défilement horizontal feutré si trop d'onglets,
   onglet actif surligné (relief + liseré), transitions douces. */
#panelTabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
#panelTabs button{margin:0; border-radius:999px; padding:8px 16px;
  transition:transform .15s cubic-bezier(.2,.8,.3,1), background .2s ease, box-shadow .2s ease, color .2s ease;}
#panelTabs button:not(.off){box-shadow:0 2px 8px rgba(127,174,111,.28), 0 1px 0 rgba(255,255,255,.4) inset;}
#panelTabs button.off{background:var(--panel2); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.5) inset;}
#panelTabs button.off:hover{background:#ece0cd;}
#panelTabs button:focus-visible{outline:3px solid var(--green2); outline-offset:2px;}
/* #61 — panneau : transition douce d'entrée du contenu d'onglet + scroll feutré. */
.card{scroll-behavior:smooth;}
#panelCard{animation:panelFade .26s ease both;}
@keyframes panelFade{0%{opacity:.4; transform:translateY(4px);}100%{opacity:1; transform:translateY(0);}}
.reduceMotion #panelCard{animation:none;}
.questStep{padding:6px 10px; border-radius:10px; margin:4px 0; font-size:15px;}
.questStep.done{color:var(--soft); text-decoration:line-through;}
/* #77 — étape de quête en cours : liseré vert net + petit point qui « bat » doucement. */
.questStep.now{background:#f2f8ee; border-left:4px solid var(--green); font-weight:bold; position:relative;}
.questStep.now::after{content:''; position:absolute; right:10px; top:50%; width:8px; height:8px; margin-top:-4px;
  border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(127,174,111,.5);
  animation:objPulse 2.4s ease-in-out infinite;}
.reduceMotion .questStep.now::after{animation:none;}
.colItem{display:inline-block; background:var(--panel2); border-radius:12px; padding:8px 12px; margin:4px; font-size:14px;}
.colGrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(70px,1fr)); gap:8px; margin:10px 0;}
.colTile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--panel2); border:2px solid transparent; border-radius:12px; padding:8px 4px;
  font-family:inherit; min-height:62px; cursor:pointer;}
.colTile .ce{font-size:24px; line-height:1;}
.colTile .cn{font-size:10px; color:var(--soft); line-height:1.1; text-align:center;}
.colTile.locked{opacity:.4; cursor:default;}
/* #64 — tuiles de collection : transition douce, relief au survol/focus. */
.colTile{transition:transform .15s cubic-bezier(.2,.8,.3,1), border-color .18s ease, box-shadow .18s ease;}
.colTile:not(.locked):hover{box-shadow:0 3px 10px rgba(40,30,20,.12);}
.colTile:not(.locked):focus-visible{outline:3px solid var(--green2); outline-offset:2px;}
.colTile:active{border-color:var(--green); transform:scale(.96);}
.legend{font-size:13px; background:var(--panel2); border-radius:10px; padding:8px 12px; margin-top:10px; line-height:1.6;}
label.opt{display:flex; justify-content:space-between; align-items:center; margin:10px 0; font-size:15px; gap:14px;}
label.opt select{font-family:inherit; font-size:14px; padding:4px 8px; border-radius:8px;}

/* ---------- Boutique ---------- */
/* #65 — articles d'échoppe : carte douce, liseré qui s'éclaire au survol, relief discret. */
.shopItem{display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--panel2); border-radius:12px; padding:9px 12px; margin:7px 0;
  transition:border-color .18s ease, box-shadow .18s ease;}
.shopItem:hover{border-color:color-mix(in srgb, var(--green) 50%, var(--panel2)); box-shadow:0 3px 10px rgba(40,30,20,.08);}
.shopItem .em{font-size:24px;}
.shopItem .nm{flex:1; font-size:14px; line-height:1.35;}
.shopItem .nm b{font-size:15px;}
.shopItem button{margin:0; padding:7px 14px; font-size:14px; white-space:nowrap;}
.shopItem.owned{opacity:.65; border-color:var(--green);}
.price{font-weight:bold; color:#a3702f; white-space:nowrap;}
/* #84 — fiches de réputation : carte douce, liseré qui s'éclaire au survol (cohérence avec l'échoppe). */
.repItem{background:#fff; border:2px solid var(--panel2); border-radius:12px; padding:10px 12px; margin:7px 0;
  transition:border-color .18s ease, box-shadow .18s ease;}
.repItem:hover{border-color:color-mix(in srgb, var(--green) 45%, var(--panel2)); box-shadow:0 3px 10px rgba(40,30,20,.08);}
.repItem b{font-size:15px;}
.repItem p{margin:5px 0 0; font-size:14px; line-height:1.4;}

/* ---------- Contrôles tactiles ---------- */
#touchUI{display:none; position:absolute; inset:0; pointer-events:none; z-index:20;}
.touch #touchUI{display:block;}
.touch #keysHint{display:none;}
/* #72 — joystick : socle plus « doux » (léger dégradé radial), pouce avec petit relief AC. */
#joy{position:absolute; left:calc(20px + env(safe-area-inset-left)); bottom:calc(26px + env(safe-area-inset-bottom));
  width:136px; height:136px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(253,246,236,.26), rgba(253,246,236,.14));
  border:2px solid rgba(253,246,236,.55); pointer-events:auto; touch-action:none;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.12);}
#joyKnob{position:absolute; left:46px; top:46px; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff, rgba(253,246,236,.92) 70%);
  box-shadow:0 2px 8px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.7) inset; will-change:left,top;}
#btnA{position:absolute; right:calc(24px + env(safe-area-inset-right)); bottom:calc(40px + env(safe-area-inset-bottom));
  width:88px; height:88px; border-radius:50%;
  background:rgba(127,174,111,.94); color:#fff; font-size:30px; font-weight:bold;
  display:flex; align-items:center; justify-content:center; pointer-events:auto; touch-action:manipulation;
  box-shadow:0 4px 14px rgba(0,0,0,.3); user-select:none;
  transition:transform .17s cubic-bezier(.2,.8,.3,1), background .2s ease, box-shadow .17s ease;}
#btnRow{position:absolute; right:calc(20px + env(safe-area-inset-right)); bottom:calc(146px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; pointer-events:auto;}
.tbtn{width:54px; height:54px; border-radius:50%; background:rgba(253,246,236,.9); font-size:23px;
  display:flex; align-items:center; justify-content:center; touch-action:manipulation; user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .17s cubic-bezier(.2,.8,.3,1), background .2s ease, box-shadow .17s ease;}
#btnA:active{transform:scale(.9) translateY(1px); background:rgba(110,158,94,.98);
  box-shadow:0 2px 8px rgba(0,0,0,.32), inset 0 2px 8px rgba(0,0,0,.18);}
/* Le bouton d'action s'estompe quand il n'y a rien à faire, et s'allume près d'une cible. */
#btnA{opacity:.5; transition:opacity .15s;}
/* #71 — quand une action devient disponible, le bouton « respire » un instant (anneau doux,
   une seule pulsation, jamais clignotant). Bornée par .reduceMotion. */
#btnA.ready{opacity:1; animation:btnAReady .55s ease-out;}
@keyframes btnAReady{0%{box-shadow:0 4px 14px rgba(0,0,0,.3), 0 0 0 0 rgba(127,174,111,.5);}100%{box-shadow:0 4px 14px rgba(0,0,0,.3), 0 0 0 12px rgba(127,174,111,0);}}
.reduceMotion #btnA.ready{animation:none;}
.tbtn:active{transform:scale(.88) translateY(1px); background:rgba(245,238,226,.98);
  box-shadow:0 1px 4px rgba(0,0,0,.28), inset 0 2px 7px rgba(0,0,0,.14);}
/* État « actif » sobre pour courir 👟 / vélo 🚲 (maintien ou monté). */
.tbtn.on{background:rgba(110,158,94,.92); box-shadow:0 2px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(110,158,94,.45);}
/* #83 — focus clavier/manette visible sur les boutons tactiles (accessibilité). */
#btnA:focus-visible, .tbtn:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.touch #dlg{bottom:calc(10px + env(safe-area-inset-bottom)); width:94%; padding:12px 14px 10px;}
/* pendant un dialogue : on masque joystick + boutons secondaires, on garde E (btnA) pour avancer */
.touch.dlgOpen #joy, .touch.dlgOpen #btnRow{display:none;}
@media (max-width:760px){
  #wrap{width:100vw; height:100dvh; aspect-ratio:auto;}
  canvas{height:100%; border-radius:0;}
  #sensoryVeil{border-radius:0;}
  .overlay{border-radius:0;}
  #hud{top:calc(8px + env(safe-area-inset-top)); left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right));}
  #hud .hudBox{padding:5px 9px; border-radius:10px;}
  #spoons .spNum{font-size:12px;}
  #spoons .spGauge .spSeg{width:5px; height:12px;}
  #objText{font-size:11px;} #objTitle{font-size:9px;}
  #hudEnv{font-size:10px; gap:5px;} #statusIcons{gap:4px; font-size:12px;}
  .stChip{padding:1px 6px;} .stChip .stLab{font-size:9px;}
  #objBox{max-width:52%;}
  #keysHint{display:none;}
  #toasts{max-width:88%;}
  .toast{font-size:13px;}
  #dlgText{font-size:15px; min-height:40px;}
  #dlgName{font-size:14px;}
  #dlgChoices button{font-size:14px; padding:11px 12px;}
  #dlgNext{font-size:12px;}
  .card{padding:18px 18px; width:94%; max-height:90%;}
  .card h1{font-size:21px;} .card p{font-size:14px;}
  .card button{padding:12px 20px; font-size:15px;}
  #panelTabs{flex-wrap:wrap;}
  #panelTabs button{font-size:13px; padding:8px 11px;}
}
/* écrans très étroits : on resserre encore les commandes */
@media (max-width:420px){
  #joy{width:122px; height:122px;}
  #joyKnob{left:39px; top:39px; width:44px; height:44px;}
  #btnA{width:80px; height:80px; font-size:27px;}
  .tbtn{width:50px; height:50px; font-size:21px;}
}

/* ===================================================================
   VISU-AAA — POLISH HUD / DIALOGUE (additif, cosy, lisible, mobile-first)
   Couches très douces qui s'ajoutent au style existant sans rien remplacer.
   Toutes les animations sont annulées par .reduceMotion.
   =================================================================== */
/* VISU-AAA #7 — relief « papier vergé » des boîtes du HUD : fin liseré chaud en haut
   + très légère lueur intérieure, pour un rendu vélin AC plus premium. */
.hudBox{position:relative; isolation:isolate;}
.hudBox::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(255,250,240,.55), rgba(255,250,240,0) 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
.hiContrast .hudBox::before{display:none;}
/* VISU-AAA #8 — accent supérieur doux de la boîte de dialogue : un fin dégradé vélin en
   haut qui « pose » l'étiquette du nom, et une lueur chaude intérieure très discrète. */
#dlg{position:absolute;}
#dlg::before{content:''; position:absolute; left:0; right:0; top:0; height:46px; border-radius:22px 22px 0 0;
  pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,251,242,.7), rgba(255,251,242,0));}
#dlg > *{position:relative; z-index:1;}
.hiContrast #dlg::before{display:none;}
/* VISU-AAA #9 — étiquette de nom : fine barre d'accent verte à gauche (ancrage visuel doux). */
#dlgName{position:relative; overflow:hidden;}
#dlgName::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--green), var(--green2)); opacity:.85;}
.hiContrast #dlgName::before{background:var(--green2); opacity:1;}
/* VISU-AAA #10 — la pastille « énergie sociale » respire très doucement (repère calme, jamais
   clignotant) ; bornée par mouvement réduit. Touche vivante sans surcharge. */
#objDot{will-change:box-shadow;}
@keyframes hudBreath{0%,100%{opacity:.85;}50%{opacity:1;}}
#hudEnv .envClock{animation:hudBreath 6s ease-in-out infinite;}
.reduceMotion #hudEnv .envClock{animation:none;}
/* VISU-AAA #11 — boutons de choix de dialogue : fin chevron d'invite à droite au survol/focus,
   et liseré gauche qui s'épaissit en douceur quand sélectionné (lecture plus claire au tactile). */
#dlgChoices button{position:relative;}
#dlgChoices button.sel::after, #dlgChoices button:hover::after{content:'›';
  position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--green2);
  font-weight:bold; font-size:17px; opacity:.7;}
/* VISU-AAA #12 — toasts : fin halo supérieur clair (relief vélin cohérent avec le HUD). */
.toast{position:relative; overflow:hidden;}
.toast::before{content:''; position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none;}
/* VISU-AAA #13 — bouton d'action tactile : très léger dégradé vertical + liseré clair pour
   un galet plus « moelleux » (cohérent avec le joystick). Style uniquement. */
.touch #btnA{background:radial-gradient(circle at 50% 38%, rgba(143,189,127,.98), rgba(110,158,94,.96));
  border:1.5px solid rgba(255,255,255,.28);}