/* =================== v3 : personnages en pointillé, scène plein cadre =================== */
/* netteté : pas de will-change, le navigateur re-rastérise la 3D à la bonne taille */
#cam,#world{will-change:auto}
.hud-right{display:flex;gap:10px}

/* personnages : silhouettes complètes faites de petits points, transparentes */
.ppl,.walker{pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 5px hsl(var(--h,200) 100% 65% / .75))}
.ppl{
  -webkit-mask-image:var(--m-seated);mask-image:var(--m-seated);
  background:
    radial-gradient(circle at center,hsl(var(--h,200) 95% 78%) 0 1.5px,transparent 2.1px) 0 0/5px 5px,
    linear-gradient(180deg,hsl(var(--h,200) 90% 65% / .20),hsl(var(--h,200) 90% 60% / .06));
  animation:shimmer 3.4s ease-in-out infinite}
.ppl.flip{-webkit-mask-image:var(--m-seated-r);mask-image:var(--m-seated-r)}
.walker{
  background:
    radial-gradient(circle at center,hsl(var(--h,200) 100% 82%) 0 .85px,transparent 1.3px) 0 0/3px 3px,
    linear-gradient(180deg,hsl(var(--h,200) 90% 70% / .22),hsl(var(--h,200) 90% 60% / .05));
  -webkit-mask-image:var(--m-walk-a);mask-image:var(--m-walk-a);
  animation:walk .62s steps(1,end) infinite,shimmer 2.6s ease-in-out infinite}
@keyframes walk{0%{-webkit-mask-image:var(--m-walk-a);mask-image:var(--m-walk-a)}50%{-webkit-mask-image:var(--m-walk-b);mask-image:var(--m-walk-b)}}
@keyframes shimmer{0%,100%{opacity:.78}50%{opacity:1}}
.ppl:nth-of-type(2n){animation-delay:-1.1s}

/* repères de profondeur : toujours lisibles, plus gros */
.depth{right:30px;gap:18px}
.depth button{width:14px;height:14px}
.depth button::before{width:13px;height:13px}
.depth button span{opacity:.82;right:28px;font-size:13px;color:#c4d2ea;text-shadow:0 1px 8px rgba(5,8,15,.95),0 0 14px rgba(5,8,15,.9)}
.depth button.on span{opacity:1;color:#fff;font-weight:600}
.depth::before{right:6px}
.depth{padding:14px 12px 14px 18px;border-radius:18px;background:rgba(8,13,28,.55);backdrop-filter:blur(6px);border:1px solid rgba(138,155,184,.18)}

@media (prefers-reduced-motion:reduce){.ppl,.walker{animation:none}}