/* ── Les vignettes des jeux de l'Arena ───────────────────────────────────
   Six formes sur une surface fixe de 104 × 88, composées d'images qui
   existent déjà : rien à dessiner pour un jeu nouveau. Partagées par la
   page de l'Arena (tuiles, sélecteur, historique) et par le hub du jeu
   (la carte « Arena du jour » des deux idées) — d'où ce fichier à part,
   et des replis sur les jetons de couleur : le hub n'a pas ceux de l'Arena. */
.vignette { position: relative; width: 104px; height: 88px; flex-shrink: 0; display: block; }
/* L'éventail : n cartes en arc, la dernière au-dessus */
.vignette-eventail img {
    position: absolute; left: 50%; bottom: 0; width: 46px; aspect-ratio: 500 / 728;
    border-radius: 7% / 4.8%;
    box-shadow: 0 4px 10px rgba(0,0,0,.55);
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(calc((var(--k) - (var(--n) - 1) / 2) * 16deg)) translateY(calc(var(--k) * -2px));
    z-index: var(--k);
}
/* Le cadran : quatre pictogrammes en 2 × 2, aux couleurs des enseignes */
.vignette-cadran { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 4px; }
.vignette-touche { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vignette-touche img { width: 60%; height: 60%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.vignette-touche:nth-child(1) { background: rgba(255,68,102,.45); border-top-left-radius: 100% 100%; }
.vignette-touche:nth-child(2) { background: rgba(68,119,255,.45); border-top-right-radius: 100% 100%; }
.vignette-touche:nth-child(3) { background: rgba(255,153,34,.45); border-bottom-left-radius: 100% 100%; }
.vignette-touche:nth-child(4) { background: rgba(34,204,102,.45); border-bottom-right-radius: 100% 100%; }
/* Le portrait quadrillé : l'image, et une grille 3 × 3 par-dessus */
.vignette-portrait img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.vignette-quadrillage {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 10px;
    background-image: linear-gradient(rgba(0,0,0,.55) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.55) 2px, transparent 2px);
    background-size: 28px 28px; background-position: -1px -1px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.55);
}

/* La question : un point d'interrogation, et les quatre lettres en dessous */
.vignette-question { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.vignette-point {
    font-size: 46px; line-height: 1; font-weight: 900; color: var(--gold, #ffd666);
    text-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 18px var(--gold-glow, rgba(255,214,102,.5));
}
.vignette-lettres { display: flex; gap: 5px; }
.vignette-lettres i {
    font-style: normal; font-weight: 900; font-size: .75rem; width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.vignette-lettres i:nth-child(2) { background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px var(--gold, #ffd666); color: var(--gold, #ffd666); }

/* Le mot à trous : une tuile par lettre, les cachées en creux */
/* La vignette fait 104 × 88 en bloc : la rangée de lettres (`vignette-trous`,
   à l'intérieur — `vignette-mot` est le bloc lui-même) se centre dedans. */
.vignette-trous { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.vignette-trous i {
    font-style: normal; font-weight: 900; font-size: .95rem; width: 18px; height: 26px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; color: var(--gold, #ffd666);
    background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.vignette-trous i.trou { background: rgba(0,0,0,.35); box-shadow: inset 0 -3px 0 var(--gold, #ffd666); }

/* La rangée : n images côte à côte, légèrement chevauchées */
.vignette-rangee { display: flex; align-items: center; justify-content: center; }
.vignette-rangee img { width: 34px; height: 34px; object-fit: contain; margin: 0 -4px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.vignette-rangee img:nth-child(odd) { transform: translateY(-6px); }