/* Visuels dessinés partagés : sol quadrillé animé et vignettes de vêtements. */

/* ---------- Sol quadrillé en perspective, qui défile ---------- */
.grid-floor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; perspective: 520px; border-radius: inherit; }
.grid-plane {
  position: absolute; left: -50%; right: -50%; bottom: -30%; height: 90%;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 64px 64px; transform: rotateX(70deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grid-run 3.5s linear infinite;
}
.grid-floor.slow .grid-plane { animation-duration: 7s; opacity: .7; }
@keyframes grid-run { to { background-position: 0 64px; } }
.frame::before { display: none; }
.frame > *:not(.grid-floor) { position: relative; z-index: 1; }

/* ---------- Vignettes de vêtements dessinées ---------- */
.tile { position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -14px rgba(0,0,0,.9);
  background: linear-gradient(180deg, var(--wall, #e9e2d6) 0 70%, var(--floor, #b98a5e) 70% 100%); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.35), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18)); }
.tile svg { position: absolute; left: 12%; top: 6%; width: 76%; height: 88%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.tile .rail { fill: none; stroke: rgba(40,40,40,.6); stroke-width: 2.4; stroke-linecap: round; }
.tile .cloth { stroke: rgba(0,0,0,.14); stroke-width: 1; }
.tile .detail { fill: none; stroke: var(--detail, rgba(255,255,255,.55)); stroke-width: 1.6; stroke-linecap: round; }
.tile .cap { position: absolute; left: 6px; bottom: 6px; z-index: 2; font: 500 9px var(--mono); color: rgba(255,255,255,.92); background: rgba(0,0,0,.55); padding: 2px 5px; border-radius: 4px; }
.tile.label { --floor: var(--wall); }
.tile.label .lbl { position: absolute; z-index: 2; left: 24%; top: 28%; width: 52%; height: 36%; background: #fbf8f2; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 5px; padding: 9% 9%; transform: rotate(-6deg); }
.tile.label .lbl i { height: 2px; background: #b5aea3; border-radius: 2px; }
.tile.label .lbl i:first-child { height: 4px; width: 70%; background: #3a3530; }
.tile.worn { --wall: #e3dbcf; }