/* ============================================================================
   PIXELCLUB — La tienda, por dentro
   ============================================================================
   Esta hoja va SIEMPRE la última y todo lo que hay dentro cuelga de
   `.page-shop`. No es manía de orden: la tienda es la única pantalla del sitio
   con decorado, y encerrarla aquí es lo que garantiza que rehacerla no mueva
   ni un píxel del catálogo, del pase o de Social. Si algún día hay que
   deshacer esto, se quita el `<link>` y la tienda vuelve a como estaba.

   Las reglas de `polish.css` siguen mandando en lo que no se toca; aquí solo
   está lo que convierte la lista de tarjetas en un local con expositores.

   ÍNDICE
     1. La sala
     2. Cabecera y contador de monedas
     3. Paneles de cristal
     4. El dependiente
     5. La barra de progreso
     6. Los expositores
     7. El panel lateral
     8. Movimiento
     9. Pantallas pequeñas
   ========================================================================== */

.page-shop {
  /* El respiro de arriba lo usan DOS reglas: el relleno de la página y el
     margen con el que el decorado sube a taparlo. Si se tocan por separado,
     entre la barra de navegación y el techo del local aparece una franja del
     color de la zona. Una sola variable y no hay forma de descuadrarlo. */
  --tienda-respiro: var(--space-sm);

  position: relative;
  isolation: isolate;
  /* El decorado ya trae su propia oscuridad; el padding de arriba deja que se
     vea el techo antes de que empiece el texto. Poco: la tienda tiene que
     caber de un vistazo, y cada píxel de aire aquí arriba empuja los
     expositores fuera de la primera pantalla. */
  padding-top: var(--tienda-respiro);
}

/* ── 1. La sala ───────────────────────────────────────────────────────────
   El decorado se queda quieto mientras la página pasa por delante. Es un
   `sticky` con margen negativo, no un `fixed`: así el local existe SOLO
   mientras se está en la tienda y no se cuela por debajo del pie de página ni
   de ninguna otra pantalla.

   El ancho se estira más allá del contenedor (`calc(50% - 50vw)`) porque una
   habitación que se corta a 1200 px y deja franjas negras a los lados no es
   una habitación. */
.tienda-escena {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Arriba sube exactamente lo que mide el respiro de la página. */
  margin: calc(-1 * var(--tienda-respiro)) calc(50% - 50vw) calc(var(--tienda-respiro) - 100vh);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* El local está a oscuras: lo que ilumina son los neones y los expositores. */
  background: #0a0a12;
}

/* El local.
   Ni `object-fit` ni porcentajes: el tamaño y la posición se los pone
   `tienda/mostrador.js` con la misma cuenta que usa para el dependiente. Así
   los dos salen del mismo número y no hay forma de que se descuadren entre
   ellos. Los valores de aquí son solo el punto de partida antes de que corra
   el guion. */
.tienda-escena-foto {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 42%;
  /* Sin esto el navegador suaviza los bordes al agrandar y el pixel art se
     convierte en una acuarela. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* La niebla del local.
   El decorado tiene que NOTARSE y no LEERSE: en cuanto las estanterías se ven
   con detalle, el ojo se va a ellas y los productos —que son lo que se viene a
   mirar— pasan a segundo plano. Esta capa las deja en penumbra y reserva el
   poco contraste que queda para el centro, que es por donde baja el texto. */
.tienda-escena::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(135% 90% at 50% 34%, rgba(8, 8, 16, .05) 0%, rgba(8, 8, 16, .48) 55%, rgba(8, 8, 16, .84) 100%),
    linear-gradient(180deg, rgba(8, 8, 16, .3) 0%, rgba(8, 8, 16, .18) 28%, rgba(8, 8, 16, .32) 62%, rgba(8, 8, 16, .7) 100%);
}

/* La capa del dependiente.
   Misma caja pegajosa que el decorado —para que compartan coordenadas— pero
   con el z-index por ENCIMA del contenido: el encargado tiene que verse
   delante de los paneles, igual que en el mockup de Rubén, no asomando por
   detrás. No intercepta el ratón salvo su bocadillo. */
.tienda-mostrador-capa {
  position: sticky;
  top: 0;
  height: 100vh;
  margin: calc(-1 * var(--tienda-respiro)) calc(50% - 50vw) calc(var(--tienda-respiro) - 100vh);
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .25s linear;
}

/* El hueco que se le reserva a la derecha. Los paneles del contenido se
   quedan cortos justo antes de donde cae, para que no se pisen: en el mockup
   la ficha del socio también termina antes de llegar a él. */
.page-shop {
  --tienda-hueco: 33%;
}

.page-shop .shop-aviso-retiro,
.page-shop .shop-preview {
  max-width: calc(100% - var(--tienda-hueco));
}

/* Todo el contenido va por delante del decorado. Se excluyen las DOS capas
   del local —el dibujo y el dependiente—, que traen su propio apilado: sin
   esta excepción, esta regla le quitaba el `sticky` a la capa del dependiente
   y lo dejaba clavado a la página en vez de al mostrador. */
.page-shop > *:not(.tienda-escena):not(.tienda-mostrador-capa) {
  position: relative;
  z-index: 1;
}

/* ── 2. Cabecera y contador de monedas ───────────────────────────────────── */

.page-shop .shop-header {
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.page-shop .shop-title {
  font-size: var(--pixel-2xl);
  text-shadow: 0 0 12px rgba(0, 245, 212, .55), 0 3px 0 rgba(0, 0, 0, .6);
}

.page-shop .shop-sub {
  color: #b9c6e0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}

/* La caja registradora: un panel de oro con doble borde, como el marcador de
   créditos de una recreativa. */
.page-shop .shop-saldo {
  position: relative;
  align-items: center;
  gap: 2px;
  padding: 12px 22px 10px;
  background: linear-gradient(180deg, #241a08 0%, #14100a 100%);
  border: 3px solid var(--accent-series, #ffd60a);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, .75),
    inset 0 0 18px rgba(255, 214, 10, .18),
    0 0 22px rgba(255, 214, 10, .35);
}

.page-shop .shop-saldo-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pixel-xl);
  text-shadow: 0 0 10px rgba(255, 214, 10, .7);
}

.page-shop .shop-saldo-num b { font-weight: 400; }

.tienda-icono-svg {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tienda-pila-monedas {
  flex: 0 0 auto;
  height: 1.5em;
  /* El alto manda y el ancho sale de la proporción de la propia matriz. */
  width: calc(1.5em * 14 / 12);
  filter: drop-shadow(0 0 6px rgba(255, 214, 10, .55));
}

.page-shop .shop-saldo-lbl {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: #c9a83a;
  letter-spacing: 2px;
}

/* La hucha del mostrador: la caja donde acaban las monedas. Su sitio y su
   tamaño los pone tienda/mostrador.js, igual que con el dependiente. */
.tienda-hucha {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5));
}

.tienda-hucha-svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Las monedas caen DENTRO de la hucha: antes llovían del techo y no llegaban a
   ninguna parte, que es lo que las hacía parecer un adorno pegado. */
.tienda-lluvia {
  position: absolute;
  inset: -120px 12% auto;
  height: 124px;
  pointer-events: none;
}

.tienda-moneda {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  /* Un canto de ocho lados: redonda del todo desentona con el pixel art de la
     sala, y cuadrada no parece una moneda. */
  clip-path: polygon(31% 0, 69% 0, 100% 31%, 100% 69%, 69% 100%, 31% 100%, 0 69%, 0 31%);
  background: linear-gradient(135deg, #ffe98a 0%, #ffd60a 45%, #c08b06 100%);
  /* El resplandor va en `filter` porque el `clip-path` recorta las sombras. */
  filter: drop-shadow(0 0 6px rgba(255, 214, 10, .85));
  opacity: 0;
}

/* El brillo del cuño. */
.tienda-moneda::after {
  content: '';
  position: absolute;
  left: 25%;
  top: 22%;
  width: 26%;
  height: 26%;
  background: #fff6c8;
  opacity: .8;
}

.tienda-moneda-0 { left: 12%; animation: tienda-caer 3.4s linear infinite; }
.tienda-moneda-1 { left: 32%; animation: tienda-caer 4.1s linear .7s infinite; }
.tienda-moneda-2 { left: 52%; animation: tienda-caer 3.8s linear 1.5s infinite; }
.tienda-moneda-3 { left: 71%; animation: tienda-caer 4.6s linear 2.2s infinite; }
.tienda-moneda-4 { left: 88%; animation: tienda-caer 3.2s linear 2.9s infinite; }

/* La moneda gira mientras cae: el `scaleX` es el canto de la moneda al pasar
   de perfil, que es como se anima una moneda en cualquier plataformas de 16
   bits y cuesta cero pintarlo. */
@keyframes tienda-caer {
  0%   { transform: translateY(-14px) scaleX(1);   opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translateY(58px) scaleX(.25);  opacity: 1; }
  92%  { transform: translateY(112px) scaleX(1);   opacity: 1; }
  /* Al final se apaga justo en la boca de la ranura, no antes: así se ve que
     entra, en vez de esfumarse a medio camino. */
  100% { transform: translateY(124px) scaleX(.5);  opacity: 0; }
}

/* ── 3. Paneles de cristal ────────────────────────────────────────────────
   Los paneles de la tienda son cristales sobre el local, no cartulinas: se ve
   la sala detrás, atenuada. Es lo que hace que el contenido pertenezca al
   sitio en vez de estar pegado encima. */
.page-shop .shop-aviso-retiro,
.page-shop .shop-preview,
.page-shop .shop-ganar,
.page-shop .shop-historial {
  background: rgba(17, 22, 42, .88);
  border: 1px solid rgba(0, 245, 212, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 10px 30px rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
}

/* El aviso lleva la moldura de neón ARRIBA, como el canto iluminado de una
   estantería del local — no un filete a la izquierda, que es lenguaje de web. */
.page-shop .shop-aviso-retiro {
  border-left: 1px solid rgba(0, 245, 212, .28);
  border-top: 2px solid var(--accent-games, #00f5d4);
  box-shadow: inset 0 1px 0 rgba(0, 245, 212, .35), 0 10px 30px rgba(0, 0, 0, .55);
  padding: 10px 16px;
  margin-bottom: var(--space-sm);
  color: #cfe6ea;
  line-height: 1.45;
}

/* El mostrador: la ficha del socio a la izquierda y el dependiente a la
   derecha, como en el local.

   El margen de abajo es NEGATIVO a propósito: adelanta la barra de progreso
   hasta meterla debajo del personaje, para que su antebrazo aterrice encima.
   El padding-bottom de la misma medida es lo que evita que ese solape le robe
   sitio a nada más — sin él, la barra invadía el primer título de familia. */
/* Ya solo lleva la ficha del socio: el dependiente se mudó al decorado. */
.tienda-mostrador {
  position: relative;
  margin-bottom: var(--space-sm);
}

/* La ficha del socio: panel de perfil con moldura de neón cian, esquinas
   doradas y un entramado de circuito muy tenue detrás. El tramado va al 4 % a
   propósito — a más se lee como una rejilla y se come el nombre. */
.page-shop .shop-preview {
  position: relative;
  margin: 0;
  padding: var(--space-md);
  min-height: 108px;
  align-items: center;
  border: 2px solid rgba(0, 245, 212, .75);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 245, 212, .04) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg,  rgba(0, 245, 212, .04) 0 1px, transparent 1px 14px),
    linear-gradient(155deg, rgba(72, 26, 46, .92) 0%, rgba(24, 14, 40, .94) 60%, rgba(14, 10, 26, .96) 100%);
  box-shadow:
    inset 0 0 24px rgba(0, 245, 212, .12),
    0 0 22px rgba(0, 245, 212, .22),
    0 10px 30px rgba(0, 0, 0, .6);
}

/* Las escuadras doradas de las esquinas de arriba. */
.page-shop .shop-preview::before,
.page-shop .shop-preview::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 20px;
  height: 20px;
  border-top: 3px solid var(--accent-series, #ffd60a);
  pointer-events: none;
}

.page-shop .shop-preview::before { left: -2px;  border-left: 3px solid var(--accent-series, #ffd60a); }
.page-shop .shop-preview::after  { right: -2px; border-right: 3px solid var(--accent-series, #ffd60a); }

/* El retrato va en un marco grueso de cuadro, no en un borde de 1 px. */
.page-shop .shop-preview-avatar {
  box-shadow:
    0 0 0 3px #0a0a12,
    0 0 0 9px #c99a1e,
    0 0 0 12px #7a5a0c,
    0 0 28px rgba(255, 214, 10, .45);
  margin: 6px 10px 6px 6px;
}

.page-shop .shop-preview-name {
  font-size: var(--pixel-lg);
  color: var(--accent-games, #00f5d4);
  text-shadow: 0 0 12px rgba(0, 245, 212, .6), 0 3px 0 rgba(0, 0, 0, .8);
}

/* El renglón dorado bajo el nombre es el título QUE LLEVA PUESTO, no una
   etiqueta decorativa: sale de lo que tenga equipado en la tienda. */
.page-shop .shop-preview-title {
  color: var(--accent-series, #ffd60a);
  font-style: normal;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 214, 10, .5);
}

.page-shop .perfil-carnet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  align-self: flex-start;
}

.tienda-icono-carnet {
  flex: 0 0 auto;
  height: 1.25em;
  width: calc(1.25em * 10 / 8);
}

/* ── 4. El dependiente ───────────────────────────────────────────────────── */

/* Quien atiende. El ancho es el mismo sea quien sea: cada personaje trae su
   propia proporción en el `viewBox` y se planta sobre la misma línea de suelo
   (`xMidYMax`), así que cambiar de dependiente no mueve nada de la página.

   NO hay ningún mostrador dibujado aquí. El apoyo lo da la barra de progreso
   de más abajo (`.shop-progreso`): el personaje se ESTIRA hacia ella con un
   margen negativo (ver `.tienda-mostrador`) hasta que el antebrazo del sprite
   —que ocupa sus últimas filas— cae encima del raíl. Es el mismo truco que la
   referencia de Rubén: usar una pieza que YA existe como superficie, en vez de
   inventar un mueble nuevo que se nota postizo. */
.tienda-personaje {
  /* Sitio y tamaño los pone `tienda/mostrador.js`: dependen de dónde haya
     caído el mostrador del dibujo, que cambia con cada tamaño de ventana. */
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(-6px 0 14px rgba(0, 0, 0, .35));
  /* Sin flotar: alguien acodado en un mostrador no sube y baja. Si lo hiciera,
     el brazo se despegaría del tablero en cada ciclo de la animación. */
}



.tienda-personaje-arte {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 244px;
  /* Vale igual para el `<svg>` de los dibujados y para el `<img>` del que
     viene pintado: los dos son pixel art y los dos se agrandan igual. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

/* El bocadillo: caja negra, borde blanco duro y pico apuntando a quien habla. */
.tienda-bocadillo {
  /* Como el personaje: lo coloca el guion, a su izquierda y a la altura de la
     cabeza. No se escala con la sala — es texto, y el texto se lee al tamaño
     al que se lee. `box-sizing` explícito porque el guion le pone un ancho en
     píxeles y el borde de 3 px no puede salirse de esa cuenta. */
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  pointer-events: auto;
  padding: 11px 13px;
  background: #0d1120;
  border: 3px solid #e8ecf7;
  box-shadow: 0 0 0 3px #0a0a12, 0 8px 24px rgba(0, 0, 0, .6);
}

.tienda-bocadillo p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.3;
  color: #eef2ff;
}

.tienda-bocadillo b {
  color: var(--accent-series, #ffd60a);
  font-weight: 400;
  text-shadow: 0 0 8px rgba(255, 214, 10, .5);
}

/* El pico, en dos capas para que conserve el borde blanco. */
.tienda-bocadillo::before,
.tienda-bocadillo::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: 18px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left-color: #e8ecf7;
}

.tienda-bocadillo::after {
  right: -8px;
  border-left-color: #0d1120;
}

/* ── 5. La barra de progreso ──────────────────────────────────────────────
   La barra del local: raíl remachado y relleno de cian a oro. */
/* Se le sube el `z-index` a la propia franja de progreso: sin eso, la niebla
   del decorado (que también flota por encima con z-index 1) la tapaba justo
   donde el brazo debía posarse. */
.page-shop .shop-progreso {
  position: relative;
  z-index: 2;
  /* Por la derecha se queda corta: ahí está el dependiente, y el recuento de
     objetos tiene que poder leerse sin que se lo tape el hombro. El raíl sí
     pasa por detrás de él, que es lo que da la sensación de profundidad. */
  padding: 6px var(--tienda-hueco) 6px 10px;
  background: rgba(10, 12, 24, .8);
  border: 1px solid rgba(0, 245, 212, .22);
  margin-bottom: var(--space-lg);
}

.page-shop .shop-progreso-barra {
  height: 12px;
  background: #090c18;
  border: 1px solid rgba(0, 245, 212, .35);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .9);
  position: relative;
}

/* Los remaches de arriba y abajo del raíl. */
.page-shop .shop-progreso-barra::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 245, 212, .5) 0 2px, transparent 2px 7px) top / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 245, 212, .5) 0 2px, transparent 2px 7px) bottom / 100% 2px no-repeat;
  pointer-events: none;
  z-index: 1;
}

.page-shop .shop-progreso-barra span {
  background: linear-gradient(90deg, var(--accent-games, #00f5d4) 0%, #7de3a0 55%, var(--accent-series, #ffd60a) 100%);
  box-shadow: 0 0 14px rgba(0, 245, 212, .55);
}

.page-shop .shop-progreso-txt {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: #8fa4c4;
  letter-spacing: 1px;
}

/* ── 6. Los expositores ───────────────────────────────────────────────────
   Cada objeto es un mueble del local: la vitrina de cristal, el haz de luz que
   la ata al suelo y la peana con la chapa de la rareza. `--acento` lo pone el
   JavaScript con el color del propio objeto. */

.page-shop .shop-familia-titulo {
  font-size: var(--pixel-base);
  text-shadow: 0 0 10px rgba(0, 245, 212, .35), 0 3px 0 rgba(0, 0, 0, .7);
}

.page-shop .shop-familia-desc {
  color: #a8b6d2;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
}

.page-shop .shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  /* Filas casi pegadas: en el local los expositores están en hilera, y un
     hueco de 24 px entre ellos los devolvía al aspecto de rejilla de tarjetas. */
  gap: 10px var(--space-sm);
  align-items: stretch;
}

.page-shop .shop-item {
  --acento: #00f5d4;
  --acento-rgb: 0, 245, 212;
  display: flex;
  flex-direction: column;
  /* `polish.css` centra los hijos de la tarjeta vieja. Aquí el haz y la peana
     tienen que ocupar TODO el ancho: sin esto el haz se queda en 0 px (no
     tiene contenido) y la peana se encoge a lo que mida su chapa. */
  align-items: stretch;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform .18s ease;
}

.page-shop .shop-item:hover { transform: translateY(-6px); }

/* La vitrina */
.page-shop .shop-item-vitrina {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 10px 12px;
  text-align: center;
  border: 2px solid rgba(var(--acento-rgb), .55);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, rgba(13, 17, 32, .96) 0%, rgba(17, 22, 43, .92) 60%,
                    rgba(var(--acento-rgb), .16) 100%);
  box-shadow:
    inset 0 0 26px rgba(var(--acento-rgb), .14),
    0 0 18px rgba(var(--acento-rgb), .22);
}

.page-shop .shop-item:hover .shop-item-vitrina {
  border-color: var(--acento);
  box-shadow:
    inset 0 0 30px rgba(var(--acento-rgb), .22),
    0 0 28px rgba(var(--acento-rgb), .45);
}

/* La rareza también manda en el marco, como en la referencia: el legendario y
   el épico se distinguen a distancia sin leer una sola letra. */
.page-shop .shop-item[data-rareza="epico"] .shop-item-vitrina      { border-color: rgba(247, 37, 133, .6); }
.page-shop .shop-item[data-rareza="legendario"] .shop-item-vitrina { border-color: rgba(255, 214, 10, .7); }
.page-shop .shop-item.es-puesto .shop-item-vitrina                 { border-color: rgba(255, 214, 10, .8); }

/* La muestra del objeto, flotando dentro de la vitrina. */
.page-shop .shop-item-muestra {
  height: 74px;
  margin-bottom: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .65));
}

.page-shop .shop-item-swatch { width: 56px; height: 56px; }

/* El marco con el retrato dentro. El fondo se quita: lo pone el propio marco
   o, si no lo trae, el negro del local. */
.page-shop .shop-item-swatch.es-marco {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.page-shop .shop-item-retrato {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.page-shop .shop-item-nombre {
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, .28), 0 3px 0 rgba(0, 0, 0, .75);
}

.page-shop .shop-item-rareza {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px currentColor;
}

.page-shop .shop-item-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: #9fb0cd;
  min-height: 38px;
  margin: 3px 0 8px;
}

/* El haz de luz: la tapa iluminada de la peana, que es lo que ata la vitrina
   al suelo del local. Se estrecha hacia abajo porque se ve desde arriba. */
.page-shop .shop-item-haz {
  height: 22px;
  margin-top: -2px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: linear-gradient(180deg, var(--acento) 0%, rgba(var(--acento-rgb), .55) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acento) 92%, #fff) 0%,
    var(--acento) 42%,
    color-mix(in srgb, var(--acento) 55%, #000) 100%);
  /* El resplandor va en `filter`, no en `box-shadow`: el `clip-path` recorta la
     sombra de caja y el haz se quedaba sin luz alrededor, que es justo lo que
     lo ata al suelo. El filtro se aplica DESPUÉS del recorte y sigue su forma. */
  filter:
    drop-shadow(0 0 18px rgba(var(--acento-rgb), .9))
    drop-shadow(0 10px 34px rgba(var(--acento-rgb), .55));
}

/* La peana: un cajón visto de frente, con sus dos caras laterales en sombra. */
.page-shop .shop-item-peana {
  height: 98px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20px;
  clip-path: polygon(14% 0, 86% 0, 82% 100%, 18% 100%);
  /* Las tres caras del cajón. Los cortes van DENTRO de lo que deja el recorte
     (14 %–86 %): puestos en 0 % y 100 % las caras laterales se iban enteras por
     el recorte y la peana quedaba plana como una pegatina. */
  background:
    linear-gradient(180deg, rgba(var(--acento-rgb), .26) 0%, transparent 60%),
    linear-gradient(90deg,
      #17102c 0%, #17102c 24%,
      #2a1b4a 24%, #2a1b4a 76%,
      #120c22 76%, #120c22 100%);
}

/* La chapa de la rareza, atornillada a la peana. */
.page-shop .shop-item-placa {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(6, 8, 18, .8);
  border: 1px solid currentColor;
  text-shadow: 0 0 8px currentColor;
  box-shadow: 0 0 12px -2px currentColor;
}

/* Los botones: rótulos de neón, no botones de formulario. */
.page-shop .shop-btn {
  width: 100%;
  min-height: 38px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: .5px;
  background: rgba(6, 10, 20, .75);
  border: 2px solid rgba(var(--acento-rgb), .7);
  color: var(--acento);
  text-shadow: 0 0 8px rgba(var(--acento-rgb), .7);
  box-shadow: inset 0 0 14px rgba(var(--acento-rgb), .12);
  border-radius: 0;
}

.page-shop .shop-btn:hover:not(:disabled) {
  background: var(--acento);
  color: #06121a;
  text-shadow: none;
  box-shadow: 0 0 22px rgba(var(--acento-rgb), .65);
}

.page-shop .shop-btn-comprar {
  border-color: rgba(255, 214, 10, .8);
  color: #ffd60a;
  text-shadow: 0 0 8px rgba(255, 214, 10, .6);
  box-shadow: inset 0 0 14px rgba(255, 214, 10, .12);
}

.page-shop .shop-btn-comprar:hover:not(:disabled) {
  background: var(--accent-series, #ffd60a);
  color: #06121a;
}

.page-shop .shop-btn-eq {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
  text-shadow: 0 0 8px rgba(74, 222, 128, .6);
}

.page-shop .shop-btn.sin-saldo {
  /* Los colores los fija `accesibilidad.css`: ese botón es justo el que hay
     que poder leer («te faltan N monedas»). Aquí solo se quita el neón. */
  text-shadow: none;
  box-shadow: none;
}

/* ── 7. El panel lateral ──────────────────────────────────────────────────── */

.page-shop .shop-ganar,
.page-shop .shop-historial { border-radius: 6px; }

.page-shop .shop-ganar h3,
.page-shop .shop-historial h3 {
  font-size: var(--pixel-sm);
  text-shadow: 0 0 10px rgba(0, 245, 212, .5);
}

.page-shop .shop-ganar-label,
.page-shop .shop-historial li { color: #b7c4de; }

.page-shop .shop-ganar-coins { text-shadow: 0 0 8px rgba(255, 214, 10, .5); }

/* ── 8. Movimiento ────────────────────────────────────────────────────────
   Un neón de verdad no está quieto del todo. Muy poco y muy lento: la tienda
   se mira mucho rato y un parpadeo marcado cansa en un minuto. */
.page-shop .shop-item.es-puesto .shop-item-haz {
  animation: tienda-latido 2.8s ease-in-out infinite;
}

@keyframes tienda-latido {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(var(--acento-rgb), .7))
                     drop-shadow(0 6px 26px rgba(var(--acento-rgb), .4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(var(--acento-rgb), .95))
                     drop-shadow(0 8px 36px rgba(var(--acento-rgb), .65)); }
}

/* Quien pide menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  .tienda-moneda,
  .page-shop .shop-item.es-puesto .shop-item-haz {
    animation: none !important;
  }
  .tienda-moneda { display: none; }
  .page-shop .shop-item:hover { transform: none; }
  /* El dependiente se sigue retirando al bajar —si no, taparía las tarjetas—
     pero de golpe en vez de con desvanecido. */
  .tienda-mostrador-capa { transition: none; }
}

/* ── Pantallas sin sitio para el mostrador ────────────────────────────────
   Por debajo de 1000 px el dibujo se recorta tanto que el mostrador se sale, y
   la columna de contenido ocupa el ancho entero: no hay hueco donde plantar al
   dependiente sin que caiga encima de algo. Aquí baja al flujo, justo debajo
   de la ficha del socio, y deja de estar anclado.

   El orden se toca con `order` en vez de mover el marcado: en el HTML tiene que
   ir pegado al decorado —comparten geometría— y aquí interesa que salga más
   abajo. Cambiar el sitio en el marcado rompería lo primero para arreglar lo
   segundo. */
@media (max-width: 999px) {
  .page-shop { display: flex; flex-direction: column; }
  .page-shop > .tienda-escena        { order: 0; }
  .page-shop > .shop-header          { order: 1; }
  .page-shop > .shop-aviso-retiro    { order: 2; }
  .page-shop > .tienda-mostrador     { order: 3; }
  .page-shop > .tienda-mostrador-capa { order: 4; }
  .page-shop > .shop-progreso        { order: 5; }
  .page-shop > .shop-cols            { order: 6; }

  .page-shop { --tienda-hueco: 0px; }

  /* Sin mostrador donde apoyarla, la hucha sobra: sería una caja flotando. */
  .tienda-hucha { display: none; }

  .tienda-mostrador-capa {
    /* La regla base es `sticky` con `top: 0`, y este `static` lo ignora en
       silencio. Si algún día pasa a `relative`, añade `top: auto` en la
       misma regla — si no, hereda ese `top` y se desplaza sin que nadie lo
       pida (pasó de verdad en pc-035, editor de avatar). */
    position: static;
    height: auto;
    margin: 0 0 var(--space-sm);
    overflow: visible;
    display: flex;
    /* Al revés que en el marcado: el pico del bocadillo apunta a la derecha, o
       sea que él tiene que quedar a la derecha para que le esté hablando a
       alguien. */
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
  }

  /* `relative`, NO `static`: los dos llevan hijos absolutos —las monedas y el
     pico del bocadillo— y sin un ancestro posicionado se anclan a la página
     entera. El pico, con su `right: -14px`, se iba 14 px por fuera y dejaba la
     tienda con desplazamiento lateral en el móvil. */
  .tienda-personaje {
    position: relative;
    /* 156 px: el ancho real del sprite, para que no haya que reducirlo. */
    flex: 0 0 156px;
    width: 156px;
    height: auto;
  }

  .tienda-personaje-arte { height: auto; }

  .tienda-bocadillo {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    max-width: 320px;
    /* Sin esto un elemento flexible no baja de su ancho mínimo de contenido y
       la fila entera se sale por la derecha: 14 px de desplazamiento lateral en
       una pantalla de 430. */
    min-width: 0;
    margin-bottom: 18px;
  }
}

/* ── 9. Pantallas pequeñas ────────────────────────────────────────────────
   La composición no se rompe, se recoge: el local sigue detrás, el dependiente
   se pone debajo de la ficha en vez de al lado, y los expositores adelgazan
   antes que perder la peana. Quitarles la peana sería quitarles el sitio. */

@media (max-width: 1100px) {
  .tienda-bocadillo { max-width: none; }
}

@media (max-width: 900px) {
  .page-shop .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .page-shop .shop-item-peana { height: 76px; padding-top: 16px; }
  .page-shop .shop-item-muestra { height: 78px; }
}

@media (max-width: 640px) {
  .page-shop { padding-top: var(--space-lg); }
  /* En el móvil el decorado se queda de fondo fijo y muy atenuado: a este
     tamaño compite con el contenido y gana él, que no es lo que se busca. */
  .tienda-escena::after {
    background:
      radial-gradient(120% 80% at 50% 40%, rgba(10, 10, 18, .2) 0%, rgba(10, 10, 18, .66) 62%, rgba(10, 10, 18, .87) 100%);
  }
  .page-shop .shop-saldo { width: auto; padding: 10px 16px 8px; }
  .tienda-lluvia { display: none; }
  /* 156 px clavados: es el ancho real del sprite. Cualquier otra cifra obliga
     al navegador a reducirlo, y reducir pixel art se salta filas enteras — en
     una cara se nota al momento. Mejor que se lleve su sitio. */
  .tienda-personaje { flex-basis: 156px; width: 156px; }
  /* pixel-lg, no pixel-xl: a 18px "🛍️ Tienda del Videoclub" se parte en dos
     líneas y el emoji queda pisando la palabra "Videoclub". El original
     rondaba 16px en este ancho (clamp con mínimo 16); 14 es el escalón de
     abajo que sí cabe en una sola línea. */
  .page-shop .shop-title { font-size: var(--pixel-lg); }
  .page-shop .shop-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .page-shop .shop-item-nombre { font-size: var(--pixel-sm); }
  .page-shop .shop-item-desc { min-height: 40px; }
  .page-shop .shop-item-peana { height: 62px; padding-top: 12px; }
  .page-shop .shop-item-haz { height: 18px; }
}

@media (max-width: 420px) {
  .page-shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   EL ENCARGADO, VIVO
   ==========================================================================
   Dos reglas que se siguieron aquí y conviene mantener:

   1. El estado lo pone JavaScript, el gesto lo pone el CSS. El personaje lleva
      un `data-animo` y todo lo demás son animaciones de aquí. Cambiar cómo se
      ve un gesto no toca ni una línea de lógica.

   2. Se anima el SPRITE, no su caja. La caja la coloca `mostrador.js` con la
      cuenta del mostrador; si se le aplicara la animación encima, el brazo se
      despegaría del tablero en cada ciclo. Por eso todo va sobre
      `.tienda-personaje-arte`, que vive dentro y no manda en la posición.
   ========================================================================== */

.tienda-personaje {
  cursor: pointer;
  pointer-events: auto;
}

.tienda-personaje-arte {
  /* Respira desde donde se apoya, como alguien de pie detrás de un mostrador,
     no desde el centro como un globo. */
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Reposo: respira, y nada más. Un 1 % de recorrido y cinco segundos de ciclo:
   se nota que está vivo sin que se note la animación, que es el punto. */
@keyframes tienda-respirar {
  0%, 100% { transform: scaleY(1)     translateY(0); }
  50%      { transform: scaleY(1.012) translateY(-1px); }
}
.tienda-personaje[data-animo="reposo"] .tienda-personaje-arte {
  animation: tienda-respirar 5s ease-in-out infinite;
}

/* Atento: levanta la vista y se inclina hacia ti. */
@keyframes tienda-atender {
  0%   { transform: translateY(0)    rotate(0deg); }
  100% { transform: translateY(-3px) rotate(-1deg); }
}
.tienda-personaje[data-animo="atento"] .tienda-personaje-arte {
  animation: tienda-atender .22s ease-out forwards;
}

/* Sorpresa: el respingo de cuando le tocas el hombro. */
@keyframes tienda-respingo {
  0%   { transform: translateY(0)    scale(1); }
  35%  { transform: translateY(-7px) scale(1.03); }
  70%  { transform: translateY(1px)  scale(.995); }
  100% { transform: translateY(0)    scale(1); }
}
.tienda-personaje[data-animo="sorpresa"] .tienda-personaje-arte {
  animation: tienda-respingo .5s cubic-bezier(.3, 1.6, .5, 1);
}

/* Pensando: se balancea despacio, como quien repasa el género. */
@keyframes tienda-pensar {
  0%, 100% { transform: rotate(-1.2deg) translateY(-1px); }
  50%      { transform: rotate(1.2deg)  translateY(0); }
}
.tienda-personaje[data-animo="pensando"] .tienda-personaje-arte {
  animation: tienda-pensar 1.5s ease-in-out infinite;
}

/* Hablando: el cabeceo corto de quien está soltando una frase. */
@keyframes tienda-hablar {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-2px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-1px); }
}
.tienda-personaje[data-animo="hablando"] .tienda-personaje-arte {
  animation: tienda-hablar .38s ease-in-out 4;
}

/* Contento: el saltito de cuando le compras algo. */
@keyframes tienda-celebrar {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  20%      { transform: translateY(-10px) rotate(-3deg); }
  45%      { transform: translateY(0)     rotate(2deg); }
  70%      { transform: translateY(-5px)  rotate(-1deg); }
}
.tienda-personaje[data-animo="contento"] .tienda-personaje-arte {
  animation: tienda-celebrar 1.1s ease-in-out 2;
}

/* Dormido: a los dos minutos sin nadie, cabezada. */
@keyframes tienda-dormir {
  0%, 100% { transform: scaleY(1)     rotate(0deg)   translateY(0); }
  50%      { transform: scaleY(1.022) rotate(1.5deg) translateY(2px); }
}
.tienda-personaje[data-animo="dormido"] .tienda-personaje-arte {
  animation: tienda-dormir 4.5s ease-in-out infinite;
  filter: saturate(.8) brightness(.9);
}

/* La zeta de la siesta: aparece sola y no ocupa sitio. */
.tienda-personaje[data-animo="dormido"]::after {
  content: "z";
  position: absolute;
  right: 6%;
  top: 4%;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  color: #cfd6ee;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
  animation: tienda-zeta 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tienda-zeta {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.7); }
  30%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(10px, -22px) scale(1.25); }
}

/* --- El bocadillo, plegado y desplegado -----------------------------------
   Es el MISMO elemento: plegado enseña una frase, desplegado es la charla. Por
   eso no aparece ni desaparece nada: crece. */

.tienda-bocadillo { transition: width .18s ease, padding .18s ease; }
.tienda-bocadillo[data-abierta="true"] { padding: 12px; }
.tienda-bocadillo[data-abierta="true"] .tienda-bocadillo-frase { display: none; }
.tienda-bocadillo-frase { margin: 0; }

.tienda-charla {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tienda-charla-hilo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: min(46vh, 300px);
  overflow-y: auto;
  padding-right: 4px;
  /* Discreta: en una caja pequeña la barra del sistema ocupa más que el texto. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 245, 212, .45) transparent;
}

.tienda-linea p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.3;
  padding: 6px 9px;
  border: 2px solid transparent;
}

.tienda-linea.es-encargado p {
  color: #eef2ff;
  background: rgba(0, 245, 212, .08);
  border-color: rgba(0, 245, 212, .35);
}

.tienda-linea.es-socio p {
  color: #12161f;
  background: var(--accent-series, #ffd60a);
  border-color: #b8930a;
  margin-left: 22px;
}

.tienda-linea b { color: var(--accent-series, #ffd60a); font-weight: 400; }
.tienda-linea.es-socio b { color: #7a5c00; }

/* Los atajos: lo que se puede preguntar sin escribir nada. */
.tienda-charla-atajos { display: flex; flex-wrap: wrap; gap: 5px; }

.tienda-atajo {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1;
  padding: 6px 9px;
  color: #bfe9e2;
  background: rgba(0, 245, 212, .09);
  border: 2px solid rgba(0, 245, 212, .4);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tienda-atajo:hover,
.tienda-atajo:focus-visible { background: var(--accent-games, #00f5d4); color: #06121a; }

/* La caja de escribir. */
.tienda-charla-caja { display: flex; gap: 6px; }

.tienda-charla-texto {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 7px 9px;
  color: #eef2ff;
  background: #070a14;
  border: 2px solid rgba(0, 245, 212, .4);
}
.tienda-charla-texto::placeholder { color: #6d7fa0; }
.tienda-charla-texto:focus-visible { outline: 2px solid var(--accent-games, #00f5d4); outline-offset: 1px; }

.tienda-charla-enviar {
  flex: 0 0 auto;
  width: 40px;
  font-size: var(--text-sm);
  color: #06121a;
  background: var(--accent-games, #00f5d4);
  border: 2px solid #0a1f1c;
  cursor: pointer;
}
.tienda-charla-enviar:hover { background: #6ffbe4; }

.tienda-charla-cerrar {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 26px;
  height: 26px;
  font-size: var(--text-sm);
  line-height: 1;
  color: #cfd6ee;
  background: #0d1120;
  border: 2px solid #e8ecf7;
  cursor: pointer;
}
.tienda-charla-cerrar:hover { color: #fff; background: #23283c; }

/* Sin movimiento: se queda quieto. La conversación funciona igual; lo único
   que se pierde es el gesto, que es justo lo que se pide quitar. */
@media (prefers-reduced-motion: reduce) {
  .tienda-personaje .tienda-personaje-arte { animation: none !important; }
  .tienda-personaje[data-animo="dormido"]::after { animation: none; opacity: .8; }
  .tienda-bocadillo { transition: none; }
}