:root{
    --sb-card-bg: #ffffff;
    --sb-stage-bg: #ffffff;
    --sb-card-fg: #0f172a;
    --sb-muted:   #6b7280;
    --sb-border: rgba(0,0,0,.06);
  }
  [data-bs-theme="dark"],
  [data-pc-theme="dark"],
  .dark, .theme-dark, .pc-dark {
    --sb-card-bg: #0b1020;
    --sb-stage-bg: #0b1020;
    --sb-card-fg: #e5e7eb;
    --sb-muted:   #9ca3af;
    --sb-border: rgba(255,255,255,.10);
  }

  /* ===== layout ===== */
  .showcase-grid{
    display:grid;
    gap:12px;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  }
  @media (min-width: 576px){ .showcase-grid{ gap:14px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); } }
  @media (min-width: 992px){ .showcase-grid{ gap:16px; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); } }

  .showcase-grid.smaller{
    gap:10px;
    grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  }
  @media (min-width: 576px){ .showcase-grid.smaller{ gap:12px; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); } }
  @media (min-width: 992px){ .showcase-grid.smaller{ gap:14px; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); } }

  /* ===== card ===== */
  .showcase-card{
    position:relative;
    border-radius:14px;
    background: var(--sb-card-bg);
    border:1px solid var(--sb-border);
    overflow:hidden;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    transform:translateZ(0);
    transition: box-shadow .24s ease;
  }
  .showcase-card:hover{ box-shadow:0 18px 36px rgba(0,0,0,.18); }
  .tilt{ border-radius:inherit; } /* wrapper kept for structure (no tilt JS now) */

  /* stage */
  .sprite-stage{
    position:relative;
    aspect-ratio:1/1;
    display:grid;
    place-items:center;
    padding:10px;
    border-radius:12px;
    background: var(--sb-stage-bg);
    box-shadow: inset 0 0 0 1px var(--sb-border);
    z-index:2;
  }

  /* image grows on hover (smooth & slightly slower) */
  .sprite-stage img{
    /* width:92%; */
    /* height:92%; */
    object-fit:contain;
    /* image-rendering: revert; */
    display:block;
    transform: scale(1.01);
    transition: transform .28s cubic-bezier(.2,.6,.2,1);
    will-change: transform;
  }
  .showcase-card:hover .sprite-stage img{ transform: scale(1.12); }

  /* favorite ribbon */
  .ribbon-fav{
    position:absolute; top:.5rem; right:.5rem;
    background:#f59e0b; color:#111827;
    font-weight:700; font-size:.75rem;
    padding:.25rem .5rem; border-radius:.5rem;
    box-shadow:0 6px 16px rgba(245,158,11,.25);
    z-index:3;
  }

  .sb-pill{ cursor:pointer; user-select:none; }
  .sb-pill.active{ outline:2px solid rgba(99,102,241,.35); outline-offset:1px; }

  .donor-star{
    position:absolute; top:4px; right:4px;
    width:24px; height:24px;
    background:#fde68a; color:#7c2d12;
    border-radius:999px; font-size:14px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    cursor:pointer;
  }

  /* Custom docked popup */
  .shiny-pop{
    position: fixed;
    z-index: 1055;
    max-width: 280px;
    background: var(--sb-card-bg);
    color: var(--sb-card-fg);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
    padding: .6rem .7rem;
    font-size: .9rem;
    line-height: 1.25rem;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 14px)) scale(.96);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }
  .shiny-pop.visible{
    opacity: 1;
    transform: translate(-50%, calc(-100% - 14px)) scale(1);
  }
  .shiny-pop::after{
    content:"";
    position:absolute; left:50%; bottom:-6px;
    transform: translateX(-50%);
    width:12px; height:12px;
    background: var(--sb-card-bg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
  .shiny-pop.below{
    transform: translate(-50%, 14px) scale(.96);
  }
  .shiny-pop.below.visible{
    transform: translate(-50%, 14px) scale(1);
  }
  .shiny-pop.below::after{
    top:-6px; bottom:auto; transform: translateX(-50%) rotate(180deg);
  }
  .shiny-pop .rowline{ display:flex; gap:.5rem; margin:.15rem 0; }
  .shiny-pop .rowline i{ opacity:.8; }
  .shiny-pop .title{ font-weight:700; display:flex; align-items:center; gap:.35rem; margin-bottom:.2rem; }
  .shiny-pop .title .mini-star{
    width:12px; height:12px; background: #ffd54a;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
  }