/* ============================================================
   Growtopia-world shop ad designs (2026-09-20) — extra .sa-box--<id> styles
   for the Vending Shop Spotlight boxes, built from the repo's own Growtopia
   background sprites, tiled at 64px (2x, pixel-crisp). The 6 classic colour
   designs stay in style.css. Loaded after style.css on every page that
   renders shop boxes: index.html, item.html, advertise.html.
   Design ids are mirrored in featured-api SHOP_DESIGNS, the js/shop-ads.js
   whitelist and the js/advertise.js DESIGNS picker — keep all four in sync.
   A darkening tint layer sits over each texture so the world name, label and
   tagline stay readable. With an uploaded screenshot (.sa-box--img) the
   screenshot replaces the texture, so every texture rule is :not(.sa-box--img).
   ============================================================ */

/* Sunny World — the classic Growtopia sky over a grass + dirt ground line */
.sa-box--sunny { background-color: #3d9be9; color: #f0f9ff; }
.sa-box--sunny:not(.sa-box--img) {
  background-image:
    radial-gradient(rgba(58, 30, 10, 0.55) 1.2px, transparent 1.7px),
    linear-gradient(180deg, #62d948 0 4px, #3aa62f 4px 8px, #2c8a25 8px 10px, #9a6333 10px 100%),
    url(../images/clouds_background.png),
    url(../images/clouds_background.png),
    linear-gradient(120deg, rgba(3, 10, 30, 0.44) 0%, rgba(3, 10, 30, 0.18) 58%, rgba(3, 10, 30, 0.02) 100%),
    linear-gradient(180deg, #2b86dc 0%, #6ec0fa 78%, #a5dcff 100%);
  background-size: 9px 7px, 100% 24px, 44px 44px, 30px 30px, 100% 100%, 100% 100%;
  background-position: 0 calc(100% - 3px), 0 100%, 62% 10px, 88% 58%, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  image-rendering: pixelated;
}

/* Bling Bling — gems + gold coins, for the big-money shops */
.sa-box--bling { background-color: #92400e; color: #fef3c7; }
.sa-box--bling:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(24, 12, 2, 0.78) 0%, rgba(24, 12, 2, 0.5) 62%, rgba(24, 12, 2, 0.34) 100%),
    url(../images/bling_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Lava Pit — glowing lava blocks */
.sa-box--lava { background-color: #b91c1c; color: #ffedd5; }
.sa-box--lava:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(40, 6, 0, 0.76) 0%, rgba(40, 6, 0, 0.46) 65%, rgba(40, 6, 0, 0.28) 100%),
    url(../images/lava.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Wooden Shack — plank wall, the cosy starter-shop look */
.sa-box--wood { background-color: #7c4a1e; color: #fef3c7; }
.sa-box--wood:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(30, 14, 2, 0.62) 0%, rgba(30, 14, 2, 0.3) 65%, rgba(30, 14, 2, 0.12) 100%),
    url(../images/wooden_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Magic Prism — blue crystal tiles */
.sa-box--prism { background-color: #1e3a8a; color: #dbeafe; }
.sa-box--prism:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(3, 8, 30, 0.74) 0%, rgba(3, 8, 30, 0.44) 65%, rgba(3, 8, 30, 0.26) 100%),
    url(../images/magic_prism_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Neon Party — party-machine lights */
.sa-box--neon { background-color: #111827; color: #f0f9ff; }
.sa-box--neon:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(4, 4, 12, 0.85) 0%, rgba(4, 4, 12, 0.62) 65%, rgba(4, 4, 12, 0.5) 100%),
    url(../images/neon_party_machine_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Lucky Clover — green + gold four-leaf pattern */
.sa-box--clover { background-color: #166534; color: #ecfccb; }
.sa-box--clover:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(2, 24, 8, 0.78) 0%, rgba(2, 24, 8, 0.5) 65%, rgba(2, 24, 8, 0.32) 100%),
    url(../images/lucky_clover_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Cotton Candy — pink + blue swirls */
.sa-box--candy { background-color: #9d4edd; color: #fce7f3; }
.sa-box--candy:not(.sa-box--img) {
  background-image:
    linear-gradient(100deg, rgba(40, 6, 40, 0.66) 0%, rgba(40, 6, 40, 0.36) 65%, rgba(40, 6, 40, 0.14) 100%),
    url(../images/cotton_candy_swirl_background.png);
  background-size: 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* Dark Castle — dungeon stone with a violet glow */
.sa-box--castle { background-color: #1e1b2e; color: #ede9fe; }
.sa-box--castle:not(.sa-box--img) {
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 92, 246, 0.34), transparent 60%),
    linear-gradient(100deg, rgba(6, 4, 14, 0.45) 0%, rgba(6, 4, 14, 0.22) 70%, rgba(6, 4, 14, 0.06) 100%),
    url(../images/dark_castle_stone_background.png);
  background-size: 100% 100%, 100% 100%, 64px 64px;
  image-rendering: pixelated;
}

/* ============================================================
   Item sponsorship card (2026-09-25) — .ipin, rendered by
   gpShopBox.pinHtml() in js/shop-ads.js. The shop's own design
   (.sa-box--<id> above / in style.css, or its uploaded screenshot via
   .sa-box--img) stretched into a banner that js/featured.js pins at the
   top of an item's "Where to buy" list; advertise.html previews the same
   markup. Namespaced `ipin-` (not "ad"/"sponsor" — ad blockers hide those
   class names). The world lettering reuses .sa-box-world from style.css.
   ============================================================ */
.ipin {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 12px 18px;
  min-height: 118px;
  padding: 14px 16px 15px 18px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  /* the same GT-block bevel as the Spotlight box */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.22),
    inset 3px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 0 rgba(0, 0, 0, 0.28),
    inset -3px 0 0 rgba(0, 0, 0, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.35);
  background-size: cover;
  background-position: center;
  text-align: left;
}
/* periodic shine sweep, like the paid boxes */
.ipin::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: ipinShine 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ipinShine {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  24%  { transform: translateX(480%) skewX(-18deg); }
  100% { transform: translateX(480%) skewX(-18deg); }
}
.ipin > .ipin-sprite {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.ipin-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding-right: 46px; /* clear the corner sprite */
}
.ipin-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ipin .ipin-world { margin: 2px 0 2px; }
.ipin-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.ipin-sub strong { color: #fff; font-weight: 800; }
.ipin-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ipin-unit { width: 15px; height: 15px; object-fit: contain; }
.ipin-tag {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.ipin-copy {
  position: relative;
  z-index: 3;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font: 700 0.84rem/1.2 Inter, system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ipin-copy:hover { background: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.45); }
.ipin-copy:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
.ipin-copy.is-copied { background: #15803d; border-color: #4ade80; }
.ipin-copy .sa-box-wl { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .ipin { flex-direction: column; align-items: stretch; padding: 13px 14px 14px; }
  .ipin-copy { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ipin::after { display: none; }
}