/* El mercado del jugador, animado.
 *
 * Es el fondo de la diapositiva del modelo de negocio: cuatro columnas de
 * creaciones que suben sin parar, para que "el catálogo no tiene techo" se vea
 * en vez de leerse. Va en la página, no en un vídeo: pesa una fracción, se
 * proyecta nítido a cualquier resolución y se edita cambiando una línea.
 */

.market{position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;background:#0d0c08;
        --mk-line:#2e2b1f; --mk-acc:#e8ab34; --mk-card:#171610; --mk-ink:#d8d3c2}

/* La barra superior es la del juego, reconstruida para poder animar el contador. */
.mk-bar{position:absolute;top:0;left:0;right:0;height:clamp(34px,4.6vh,52px);z-index:2;
        background:linear-gradient(180deg,#f0b53f,#d99b2a);
        display:flex;align-items:center;justify-content:space-between;
        padding:0 clamp(14px,2vw,28px);
        font:800 clamp(13px,1.5vw,21px)/1 "JetBrains Mono",ui-monospace,monospace;
        letter-spacing:.06em;color:#141209}
.mk-cr{font-weight:600;font-size:.72em;letter-spacing:.1em;display:flex;gap:.5em;align-items:baseline}
.mk-cr b{font-weight:800;font-size:1.24em;font-variant-numeric:tabular-nums}

/* Cuatro columnas a velocidades distintas: sin ese desfase el conjunto se lee
   como una sola imagen deslizándose y pierde la sensación de catálogo. */
.mk-grid{position:absolute;inset:clamp(34px,4.6vh,52px) 0 0;display:grid;
         grid-template-columns:repeat(6,1fr);gap:clamp(6px,.8vw,14px);
         padding:clamp(6px,.8vw,14px)}
.mk-col{position:relative;overflow:hidden;min-height:0}
.mk-track{display:flex;flex-direction:column;gap:clamp(6px,.8vw,14px);
          animation:mk-rise linear infinite;will-change:transform}
.mk-col:nth-child(1) .mk-track{animation-duration:44s}
.mk-col:nth-child(2) .mk-track{animation-duration:36s}
.mk-col:nth-child(3) .mk-track{animation-duration:52s}
.mk-col:nth-child(4) .mk-track{animation-duration:40s}
.mk-col:nth-child(5) .mk-track{animation-duration:48s}
.mk-col:nth-child(6) .mk-track{animation-duration:33s}
/* La pista lleva el contenido duplicado, así que a mitad de recorrido la
   imagen es idéntica al inicio y el bucle no tiene costura. */
@keyframes mk-rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.mk-card{background:var(--mk-card);border:1px solid var(--mk-line);position:relative;
         display:flex;flex-direction:column;
         clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.mk-card.hot{border-color:var(--mk-acc);box-shadow:0 0 0 1px rgba(232,171,52,.25)}
/* height:auto es obligatorio: sin él, el atributo height del <img> gana al
   aspect-ratio y cada tarjeta se estira a la altura del PNG original. */
.mk-card img{width:100%;height:auto;aspect-ratio:5/4;object-fit:contain;display:block;
             filter:saturate(.88) brightness(.92)}
.mk-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;
         padding:clamp(5px,.6vw,9px) clamp(7px,.8vw,12px);
         font:600 clamp(8px,.85vw,12px)/1.2 "JetBrains Mono",ui-monospace,monospace;
         letter-spacing:.04em;color:var(--mk-ink)}
.mk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8}
.mk-price{color:var(--mk-acc);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-up{position:absolute;top:clamp(5px,.6vw,9px);right:clamp(5px,.6vw,9px);
       background:rgba(13,12,8,.82);color:var(--mk-ink);
       padding:2px 6px;font:600 clamp(7px,.75vw,11px)/1 "JetBrains Mono",monospace;
       letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mk-new{position:absolute;top:clamp(5px,.6vw,9px);left:0;background:var(--mk-acc);color:#141209;
        padding:2px 8px 2px 6px;font:800 clamp(7px,.75vw,11px)/1 "JetBrains Mono",monospace;
        letter-spacing:.1em}

@media (prefers-reduced-motion:reduce){
  .mk-track{animation:none}
}