/* CryptiCrew — Wild Site v1 */
:root{
  --ink:#0e0e10;
  --paper:#fffefa;
  --glass:rgba(255,255,255,.65);
  --chip:#111;
  --gradA:#ff6dae; --gradB:#ffd34a; --gradC:#6ee7ff; --gradD:#7cf27c; --gradE:#b084ff;
  --popShadow:0 12px 28px rgba(0,0,0,.22);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background: var(--paper);
  overflow-x:hidden;
}

/* ---------- Starburst background ---------- */
.burst{
  position:fixed; inset:-55vmax; z-index:-1;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(255,255,255,.6), transparent 45%),
    radial-gradient(60% 60% at 80% 10%, rgba(255,255,255,.4), transparent 55%),
    conic-gradient(from 0turn,
      #ff6dae, #ffd34a, #7cf27c, #6ee7ff, #b084ff, #ff6dae);
  filter:saturate(1.2) contrast(1.05);
  animation: spin 28s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(1turn); }
}
.burst__rings::before, .burst__rings::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 6deg, transparent 6deg 12deg);
  mask: radial-gradient(circle at center, black 40%, transparent 70%);
  animation: pulse 6s ease-in-out infinite alternate;
}
@keyframes pulse{ to{transform:scale(1.06)} }
.burst__sparkles::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px);
  background-size: 12px 12px;
  mix-blend-mode:overlay; opacity:.35;
  animation: twinkle 14s linear infinite;
}
@keyframes twinkle{ to{ background-position: 800px 400px; } }

/* ---------- Runic background overlay ---------- */
.runes-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/svg/patterns-runes2.svg');
  background-repeat: no-repeat;           /* one centered instance */
  background-position: center center;     /* lock to middle of viewport */
  background-size: cover;                 /* fill the entire screen */
  background-attachment: fixed;           /* keep it stationary */
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* ---------- Header chips ---------- */
.site-head{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px;
  padding:12px 16px; backdrop-filter: blur(10px); background: rgba(255,255,255,.35);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.5px; }
/*.brand__logo{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background: conic-gradient(from .25turn, var(--gradA), var(--gradB), var(--gradC), var(--gradD), var(--gradE), var(--gradA));
  box-shadow: var(--popShadow);
  color:#fff; font-weight:900;
}*/

/* Let the header act as a positioning context */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;          /* align items to the top edge */
  gap: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  overflow: visible;                /* allow logo overflow! */
}

/* Keep the brand container relatively positioned so its children can overflow */
.brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .5px;
  overflow: visible;
}

.chip-nav{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-block; padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none; color:#fff;
  background:linear-gradient(120deg, var(--gradA), var(--gradB));
  box-shadow:0 6px 12px rgba(0,0,0,.18);
  transform:translateY(0); transition:.25s transform, .25s box-shadow;
}
.chip:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.22);}
/* Logo pairing */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__logo {
  height: 48px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.brand__word {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}



/* Make logo and wordmark larger, and let them “hang” below the frosted area */
.brand__logo,
.brand__word {
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
  position: relative;
  top: 0;
  transform-origin: top left;
}

/* Icon scaling */
.brand__logo {
  width: clamp(100px, 7vw, 145px);         /* larger, but scales with screen */
  margin-bottom: -62px;                  /* pulls the bottom below header band */
}

/* Wordmark scaling */
.brand__word {
  width: clamp(250px, 20vw, 350px);
  margin-bottom: -40px;                  /* similar dip below the frosted area */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}








/* Keep the nav aligned right */
.chip-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
/* ---------- Hero ---------- */
.hero{ position:relative; min-height:78vh; display:grid; place-items:center; padding:8vmin 4vmin; }
.hero__art{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__glyphs{ width:100%; height:100%; opacity:.2; mix-blend-mode:multiply; animation: drift 40s linear infinite; }
@keyframes drift{ to{ transform: translate3d(-10%, -3%, 0) rotate(-.5deg);} }
.hero__content{ position:relative; z-index:1; padding:28px 28px 32px; max-width:980px; }
.card{ border-radius:var(--radius); box-shadow: var(--popShadow); }
.glass{ background:var(--glass); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.55); }
h1{ font-size:clamp(40px, 7vw, 84px); line-height:.95; margin:0 0 12px; text-shadow: 0 3px 0 rgba(0,0,0,.08); }
h1 .pop{ display:block; letter-spacing:2px; background:linear-gradient(90deg, var(--gradA), var(--gradB), var(--gradC), var(--gradD), var(--gradE));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
h1 .sub{ display:block; font-size:.42em; letter-spacing:1px; opacity:.9; }
.lede{ font-size:clamp(16px, 2.4vw, 22px); margin:0 0 16px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ --bg:linear-gradient(120deg, var(--gradA), var(--gradB)); display:inline-block; text-decoration:none; color:#fff; font-weight:800; padding:14px 18px; border-radius:16px; border:0; cursor:pointer; background:var(--bg); box-shadow: var(--popShadow); transition: transform .2s, box-shadow .2s; }
.btn.small{ padding:10px 14px; font-weight:700; }
.btn:hover{ transform: translateY(-1px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,.24); }
.btn--primary{ --bg:linear-gradient(120deg, #ff6dae, #b084ff); }
.btn--ghost{ --bg:linear-gradient(120deg,#6ee7ff, #7cf27c); color:#0f1020; }

.hero__confetti{ position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 3px, transparent 3px); background-size: 22px 22px; mix-blend-mode:overlay; animation: confetti 18s linear infinite;}
@keyframes confetti{ to{ background-position: 1200px 600px; }}

/* ---------- Sections ---------- */
.section{ padding:6vmin 4vmin; }
.section__head{ text-align:center; margin-bottom:16px; }
.section__head h2{ font-size:clamp(28px, 5vw, 56px); margin:0 0 6px; }

/* ---------- Carousel ---------- */
.carousel{ position:relative; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px; }
.reel{ list-style:none; padding:0; margin:0; display:grid; grid-auto-flow:column; grid-auto-columns: clamp(160px, 26vmin, 260px); gap:14px; overflow:hidden; }
.reel .card{ background:rgba(255,255,255,.8); padding:12px; display:grid; place-items:center; }
.bubble{
  --tone:#ffd34a; width:100%; aspect-ratio:1; border-radius:28px; display:grid; place-items:center; font-weight:900; letter-spacing:.8px; color:#111;
  background:
    radial-gradient(80% 80% at 25% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 40%),
    radial-gradient(60% 60% at 70% 80%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, color-mix(in oklab, var(--tone), white 20%), color-mix(in oklab, var(--tone), black 14%));
  border: 4px solid color-mix(in oklab, var(--tone), black 25%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 20px 30px rgba(0,0,0,.25);
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.glow{ position:relative; }
.glow::after{
  content:""; position:absolute; inset:-8px; border-radius:calc(var(--radius) + 8px);
  background: conic-gradient(from .2turn, var(--gradA), var(--gradB), var(--gradC), var(--gradD), var(--gradE), var(--gradA));
  filter: blur(14px) saturate(1.2); opacity:.6; z-index:-1;
}
.car-btn{ border:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.9); box-shadow: var(--popShadow); cursor:pointer; font-size:18px; }
.car-btn:active{ transform: translateY(1px); }

/* ---------- Split ---------- */
.split{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pane{ padding:18px; }

/* ---------- Merch ---------- */
.shop__grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.merch{ padding:12px; }
.merch__art{ height:150px; border-radius:14px; margin-bottom:10px; background: #eee; }
.merch .price{ font-weight:900; }
.gloss{ position:relative; background:rgba(255,255,255,.9); }
.gloss::before{
  content:""; position:absolute; left:10%; top:-20%; width:80%; height:40%; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  filter: blur(4px); transform: rotate(-8deg);
}
.dotbg{ background-image: radial-gradient(circle at 14px 14px, rgba(255,255,255,.9) 0 6px, transparent 7px), url('../svg/patterns-runes2.svg'); background-size: cover; background-blend-mode:overlay; }
.raybg{ background-image: conic-gradient(from 90deg, var(--gradA), var(--gradB), var(--gradC), var(--gradD), var(--gradE)); }
.wavebg{ background-image: repeating-conic-gradient(from .2turn, rgba(255,255,255,.3) 0 10deg, transparent 10deg 20deg), linear-gradient(90deg, var(--gradC), var(--gradE)); }

/* ---------- Footer ---------- */
.site-foot{ text-align:center; padding:20px 12px 40px; position:relative; }
.runes-band{
  height:800px; margin-bottom:14px;
  background: url('../svg/patterns-runes2.svg?v=2025100') repeat;
  animation: slideband 30s linear infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.2));
}
@keyframes slideband{ to{ background-position: 1000px 0; }}

/* Small helpers */
.pop-shadow{ text-shadow:0 3px 0 rgba(0,0,0,.12); }
/* ===== Character Carousel (HC) ===== */
.hero-carousel{
  position: relative;
  margin: clamp(18px, 3vw, 28px) auto 0;
  max-width: 1200px;
  padding: 0 clamp(8px, 2vw, 16px);
}
.hc-viewport{ overflow:hidden; border-radius:22px; }
.hc-track{
  display:flex; gap: clamp(12px,1.6vw,16px);
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  padding: clamp(10px,2vw,14px);
}
.hc-track > li{ list-style:none; flex:0 0 calc((100% - 4 * clamp(12px,1.6vw,16px))/5); position:relative; }
@media (max-width:1024px){ .hc-track > li{ flex-basis: calc((100% - 2 * clamp(12px,1.6vw,16px))/3); } }
@media (max-width:640px){  .hc-track > li{ flex-basis: 80%; } }

/* ---------- Character Carousel (from .hc-card to end) ---------- */
/* ---------- Character Carousel (from .hc-card to end) ---------- */
/* ---------- Character Carousel (from .hc-card to before Footer) ---------- */
.hc-card{
  --hc-radius: 24px;
  --hc-border: 4px;

  position: relative;
  display: flex;                     /* normalize layout height */
  flex-direction: column;
  justify-content: flex-end;         /* stack title/sub at bottom consistently */
  box-sizing: border-box;

  overflow: visible;                 /* art can pop out; doesn't change height */
  background: #fff;
  border: var(--hc-border) solid #000;
  border-radius: var(--hc-radius);
  box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 10px 18px rgba(255,255,255,.5);

  padding: clamp(14px, 2.2vw, 18px);
  min-height: clamp(180px, 26vw, 260px);   /* single source of truth */
}

/* kill any older glossy overlay that may still exist in the sheet */
.hc-card::after{ display:none !important; }

.hc-art{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - clamp(90px, 14vw, 180px));
  height: clamp(120px, 18vw, 220px);
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
  pointer-events: none;
}

.hc-name{
  margin: calc(clamp(90px, 14vw, 180px) - 20px) 0 .35rem;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}
.hc-sub{ font-size:13px; opacity:.75; }

/* nav buttons unchanged */
.hc-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:50%; z-index:2;
  border:3px solid #000; background:#fff; cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.22); display:grid; place-items:center; font-size:22px; font-weight:900;
}
.hc-nav.prev{ left:8px; } 
.hc-nav.next{ right:8px; }
.hc-nav:active{ transform: translateY(-50%) scale(.96); }

/* === Unie (rainbow) — same height, edge-perfect radius === */
/* Unie — rainbow border that matches the card exactly */
/* Unie — reliable rainbow ring that matches the 24px radius */
/* Unie — same technique as your example tabs */
/* FINAL: Unie rainbow ring (edge-perfect, same size as others) */
/* === UNIE CARD: clean rainbow ring, same size as others === */
.hero-carousel .hc-card[data-rainbow="true"]{
  /* same base style as normal cards */
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 10px 18px rgba(255,255,255,.5);

  /* the trick: white interior as padding-box, rainbow ring as border-box */
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)) padding-box,
    conic-gradient(#ff3e3e,#ff7a00,#ffd400,#49ff00,#00ffd1,#0080ff,#7a00ff,#ff00d0,#ff3e3e) border-box;
  border: 4px solid transparent;  /* transparent border lets gradient show */
}
/* Chip themes (keeps size, wobble, alignment) */
.site-head .chip{
  /* default look stays the same; themed chips below override */
}

/* Home */
.site-head .chip[data-thread="home"]{
  background:#ffffff;
  color:#111;
  box-shadow: inset 0 0 0 2px #000, 0 6px 12px rgba(0,0,0,.18);
}

/* Books */
.site-head .chip[data-thread="books"]{
  background:#FFE8A3;
  color:#3B2A00;
  box-shadow: inset 0 0 0 2px #FFB300, 0 6px 12px rgba(0,0,0,.18);
}

/* Characters */
.site-head .chip[data-thread="characters"]{
  background:#CFF2FF;
  color:#003844;
  box-shadow: inset 0 0 0 2px #00B7D8, 0 6px 12px rgba(0,0,0,.18);
}

/* Blog */
/* Blog */
.site-head .chip[data-thread="blog"]{
  background:#FFD3C2;          /* light coral-peach */
  color:#3B1000;               /* deep ember brown for contrast */
  box-shadow: inset 0 0 0 2px #FF642E, 0 6px 12px rgba(0,0,0,.18);
}

/* Merch */
.site-head .chip[data-thread="merch"]{
  background:#FFD4F4;
  color:#3E0030;
  box-shadow: inset 0 0 0 2px #FF4FC7, 0 6px 12px rgba(0,0,0,.18);
}

/* Game */
.site-head .chip[data-thread="games"]{
  background:#D9FFD1;
  color:#113800;
  box-shadow: inset 0 0 0 2px #43C000, 0 6px 12px rgba(0,0,0,.18);
}

/* About */
.site-head .chip[data-thread="about"]{
  background:#E2D9FF;
  color:#1C0E4A;
  box-shadow: inset 0 0 0 2px #7A54FF, 0 6px 12px rgba(0,0,0,.18);
}

/* Keep your existing hover pop without changing layout */
.site-head .chip:hover{
  filter: saturate(130%) brightness(1.02);
}/* --- eliminate excessive gap before footer --- */

/* Remove extra space between the shop and footer */
#shop.section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Make sure the footer hugs the bottom of the shop */
#shop + .site-foot {
  margin-top: 0 !important;
  padding-top: clamp(16px, 3vw, 28px);
}

/* If the runes band is adding invisible space, neutralize it */
.site-foot .runes-band {
  display: block;
  height: clamp(40px, 6vw, 80px); /* slim down */
  margin-bottom: 0;
}/* --- eliminate excessive gap before footer --- */

/* Remove extra space between the shop and footer */
#shop.section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Make sure the footer hugs the bottom of the shop */
#shop + .site-foot {
  margin-top: 0 !important;
  padding-top: clamp(16px, 3vw, 28px);
}

/* If the runes band is adding invisible space, neutralize it */
.site-foot .runes-band {
  display: block;
  height: clamp(40px, 6vw, 80px); /* slim down */
  margin-bottom: 0;
}

/* --- Fix merch gloss highlight spilling outside cards --- */

/* 1) Keep the shine inside the card bounds */
.merch.card.gloss,
.gloss{
  position: relative;
  overflow: hidden;          /* <-- key: clip pseudo-element to card */
  border-radius: 14px;       /* match your .merch__art/merch radius */
}

/* 2) Reposition + soften the shine INSIDE the card */
.gloss::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;                      /* was -20% (outside); now start inside */
  height:56%;                 /* only cover the upper half-ish */
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  filter: blur(8px);          /* a touch softer */
  transform: none;            /* remove the rotate that pushed it out */
  pointer-events: none;       /* no accidental hit target */
  mix-blend-mode: screen;     /* keeps the nice glossy feel */
}

/* --- Tap/click sparkle effects --- */
.spark-burst,
.spark-trail{
  position: fixed;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity, filter;
}

/* bright pop stars */
.spark-burst{
  background: radial-gradient(circle, #fff 0 35%, rgba(255,255,255,.2) 36% 100%);
  box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 24px rgba(255,255,255,.6);
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  animation: spark-pop .7s ease-out forwards;
  filter: saturate(160%);
}

/* tiny trailing glitter */
.spark-trail{
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff 0 40%, rgba(255,255,255,.0) 41% 100%);
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(.9);
  animation: spark-fade .45s ease-out forwards;
  opacity: .95;
}

@keyframes spark-pop{
  to{
    transform:
      translate(calc(var(--x) - 50% + var(--dx)),
                calc(var(--y) - 50% + var(--dy))) scale(0.2);
    opacity: 0;
    filter: blur(1px) saturate(120%);
  }
}
@keyframes spark-fade{
  to{
    transform:
      translate(calc(var(--x) - 50% + var(--dx)*.4),
                calc(var(--y) - 50% + var(--dy)*.4)) scale(0.2);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .spark-burst, .spark-trail{ display:none !important; }
}


/* === tap/click sparkle visuals (drop-in, reliable) === */
.spark-burst,
.spark-trail{
  position: fixed;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);  /* center on the pointer */
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity, filter;
}

/* burst dots that fly out and fade */
.spark-burst{
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.95);
  animation: spark-burst-move .7s ease forwards;
}
@keyframes spark-burst-move{
  to{
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity: 0;
    filter: blur(1px);
  }
}

/* tiny glitter crumbs that trail the pointer */
.spark-trail{
  background: radial-gradient(circle, #fff 0 40%, rgba(255,255,255,0) 41% 100%);
  opacity: .95;
  animation: spark-trail-fade .45s ease-out forwards;
}
@keyframes spark-trail-fade{
  to{
    transform: translate(calc(-50% + calc(var(--dx)*.4)),
                         calc(-50% + calc(var(--dy)*.4))) scale(.2);
    opacity: 0;
    filter: blur(1px);
  }
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .spark-burst, .spark-trail { display:none !important; }
}

/* Make the card allow overflow so sticker can float above the gloss */
.merch.card.gloss { position: relative; overflow: visible; }



/* Keep the gloss highlight inside the card and *under* the sticker */
.gloss{ position: relative; overflow: hidden; }
.gloss::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:56%;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  filter: blur(8px);
  pointer-events:none;
  mix-blend-mode: screen;
  z-index: 0;                       /* stay beneath sticker */
}

/* allow stickers to poke out of the card */
.merch.sticker-card{ position:relative; overflow:visible; }

/* keep the glossy shine clipped INSIDE, and behind the sticker */
.merch.sticker-card.gloss::before{ z-index:1; }
.merch__art{ position:relative; overflow:visible; }

/* the sticker itself */
.merch__art .sticker{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -58%); /* lifts a bit above the block */
  width: clamp(180px, 70%, 200px);  /* scales nicely with the block */
  height:auto;
  z-index:2;                        /* above the gloss shine */
  pointer-events:none;              /* taps go to the button/card */
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* a touch of breathing room so the sticker bottom doesn't collide with text */
.merch .merch__art{ margin-bottom: 16px; } /* was 10px */