Corrige les pièces qui débordaient du bac à droite/en bas

La bordure était posée directement sur le conteneur aux coordonnées
physiques (300x420) : à cause du box-sizing, la bordure mangeait sur
l'espace intérieur réel (292x416) sans que matter-js le sache, donc les
pièces pouvaient visuellement dépasser le cadre. La bordure vit
maintenant sur un conteneur externe non dimensionné, qui s'ajuste
automatiquement autour du conteneur physique sans réduire sa zone utile.

Ajoute aussi l'échelle de repère (ordre de fusion, taille proportionnelle
au rayon) et le second aperçu de la pièce suivante, travaillés en même
temps.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/corne/melon-game.tsx

@@ -390,14 +390,22 @@ export function MelonGame({ citizens, onFinish }: { citizens: MemberRow[]; onFin
         </div>
       </div>
 
-      <div
-        ref={containerRef}
-        onPointerDown={updateDropXFromEvent}
-        onPointerMove={updateDropXFromEvent}
-        onPointerUp={handlePointerUp}
-        className="relative touch-none overflow-visible rounded-b-2xl border-x-4 border-b-4 border-gold/50 bg-ink-2/40 select-none"
-        style={{ width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT }}
-      >
+      {/* La bordure vit sur ce conteneur externe (sans largeur/hauteur
+          fixées : il s'ajuste automatiquement autour de l'enfant). La
+          bordure participant au box-sizing, la mettre directement sur le
+          conteneur aux coordonnées physiques (300×420) réduisait sa zone
+          intérieure réelle à 292×416 sans que la physique le sache — les
+          pièces pouvaient donc s'empiler jusqu'à x=300 alors que le cadre
+          visible s'arrêtait à 292, d'où le débordement à droite/en bas. */}
+      <div className="rounded-b-2xl border-x-4 border-b-4 border-gold/50">
+        <div
+          ref={containerRef}
+          onPointerDown={updateDropXFromEvent}
+          onPointerMove={updateDropXFromEvent}
+          onPointerUp={handlePointerUp}
+          className="relative touch-none overflow-visible rounded-b-2xl bg-ink-2/40 select-none"
+          style={{ width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT }}
+        >
         <div
           className="pointer-events-none absolute inset-x-0 border-t border-dashed border-oxblood/50"
           style={{ top: DANGER_LINE_Y }}
@@ -483,11 +491,38 @@ export function MelonGame({ citizens, onFinish }: { citizens: MemberRow[]; onFin
             </div>
           </div>
         )}
+        </div>
       </div>
 
       <p className="text-center text-xs text-marble/50">
         Touche/clique pour viser et lâche — deux avatars de même taille fusionnent.
       </p>
+
+      {/* Échelle de repère : ordre de fusion complet, du plus petit au plus
+          grand — taille d'affichage proportionnelle au vrai rayon du
+          palier (mais réduite et plafonnée) pour que la progression se
+          voie d'un coup d'œil, sans dépendre du nombre de Citoyens. Une
+          seule ligne défilante (pas de flex-wrap). items-center (pas
+          items-end) : aligner sur le bas avec des tailles très variables
+          donnait un décalage qui grandissait avec la taille (la flèche,
+          à décalage fixe, n'était plus au bon endroit pour les gros
+          ronds) — centrer chaque rond sur son propre milieu reste
+          symétrique quelle que soit sa taille. */}
+      <div
+        className="marble-surface flex w-full items-center gap-x-1 gap-y-2 overflow-x-auto rounded-lg border border-gold/25 p-2"
+        style={{ maxWidth: CONTAINER_WIDTH }}
+      >
+        {citizens.map((citizen, tier) => (
+          <div key={citizen.id} className="flex shrink-0 items-center gap-1">
+            <Avatar
+              pseudo={citizen.pseudo}
+              avatarUrl={citizen.avatar_url}
+              size={Math.round(16 + (tierRadii[tier] / tierRadii[maxTier]) * 24)}
+            />
+            {tier < citizens.length - 1 && <span className="text-xs text-text-mut">→</span>}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }