/* Tienda (shop). Raíz: .screen.ui.s-shop. Spec 8.8: pestañas arriba (con «Pago seguro» a la derecha
   en Ofertas y Billetes) y una rejilla que ocupa todo el alto libre. Cada producto es un .pnl
   (.shop-card) con el arte sobre un halo; el pack de bienvenida es el único .pnl.gold.
   Todo lo que gasta monedas, billetes o dinero va en .btn.y. */

.s-shop .shop-body {
  display: flex; flex-direction: column; width: 100%; max-width: 1180px; max-height: 480px;
  align-self: center; margin: auto 0; padding: 12px;
}
.s-shop .shop-head { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.s-shop .shop-head .tabs { margin: 0; }
.s-shop .secure { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.s-shop .secure svg { flex: none; color: var(--c-green-hi); }
.s-shop .shop-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.s-shop .iap-note { flex: none; margin-top: 8px; text-align: center; }

/* ---- Tarjeta de producto ------------------------------------------------------------------- */
.s-shop .shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 12px; text-align: center; }
.s-shop .sc-title {
  position: relative; z-index: 2; flex: none; max-width: 100%; font-size: 19px; line-height: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 0 2px 2px;
}
.s-shop .sc-art { position: relative; z-index: 1; flex: 1 1 auto; align-self: stretch; min-height: 64px; }
.s-shop .sc-art .halo {
  left: 50%; top: 50%; width: calc(150px * var(--art-k)); height: calc(150px * var(--art-k));
  margin: calc(-75px * var(--art-k)) 0 0 calc(-75px * var(--art-k));
}
.s-shop .sc-art img {
  position: absolute; left: 5%; top: 0; width: 90%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.s-shop .sc-amt { position: relative; z-index: 2; flex: none; max-width: 100%; font-size: 27px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px 2px; }
.s-shop .sc-amt:not(.gold-t) { color: #fff; text-shadow: 0 2px 0 rgba(0,8,30,.55), 0 0 1px rgba(0,8,30,.6); }
.s-shop .sc-sub { flex: none; max-width: 100%; margin: -2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx-3); }
.s-shop .sc-sub.c-green { color: var(--c-green-hi); }
.s-shop .shop-card .btn { flex: none; width: 100%; padding: 0 8px; }
.s-shop .sc-art .corner { top: 2px; right: -14px; }
/* Los montones (lienzo 360×280: el dibujo ocupa hasta el 91 % de ancho y la mitad de abajo) pueden
   asomar un poco al relleno de la tarjeta, nunca salirse de ella (el .pnl recorta): 116 % de ancho.
   La caja de la imagen sube por encima de la zona (-22 %) para que el montón, que está abajo en el
   lienzo, quede centrado y no pegado al pie; en las zonas altas (844×475) lo centra object-position. */
.s-shop .sc-art img.k-pile { left: -8%; width: 116%; top: -22%; height: 122%; object-position: 50% 62%; }
.s-shop .sc-art img.k-box { left: -6%; width: 112%; }
.s-shop .sc-art img.pile1 { left: -30%; top: -30%; width: 160%; height: 130%; }

/* ---- Pack de bienvenida (.pnl.gold) -------------------------------------------------------- */
.s-shop .shop-starter { display: flex; flex-direction: column; min-height: 0; padding: 14px 14px 14px; isolation: isolate; }
.s-shop .shop-starter .rays-l {
  --ray: rgba(255,222,150,.09); z-index: -1; left: 50%; top: 46%; width: 460px; height: 460px; margin: -230px 0 0 -230px;
}
.s-shop .shop-starter::after { /* charco cálido detrás del arte */
  content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 22%; height: 60%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,196,64,.26), rgba(255,196,64,0));
}
.s-shop .st-title { position: relative; z-index: 2; flex: none; font-size: 30px; line-height: .95; text-align: left; padding-right: 120px; }
.s-shop .shop-starter .corner { top: 14px; }
.s-shop .st-art { position: relative; z-index: 1; flex: 1 1 auto; min-height: 60px; margin: -10px 0 4px; }
.s-shop .st-art img { position: absolute; }
.s-shop .st-cue {
  left: 4%; top: 46%; width: 88%; height: 3.5%; min-height: 6px; transform: rotate(-18deg);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,210,40,.45));
}
.s-shop .st-bills { left: 40%; top: -14%; height: 104%; width: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.s-shop .st-coins { left: -3%; top: -10%; height: 124%; width: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.s-shop .st-incs { position: relative; z-index: 2; flex: none; display: flex; gap: 6px; margin-bottom: 10px; }
.s-shop .st-inc { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px 0 4px; }
.s-shop .st-inc > img { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.s-shop .st-cueic { position: relative; width: 24px; height: 24px; flex: none; }
.s-shop .st-cueic img { position: absolute; left: -6px; top: 10px; width: 36px; height: 4px; transform: rotate(-42deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.s-shop .st-inc-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s-shop .st-inc-t b { font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-shop .st-inc-t span { font-size: 9.5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-shop .shop-starter > .btn { flex: none; width: 100%; font-size: 24px; }