@layer components {
  .sheet[data-tab='shop'] {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .shop__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 12px 8px;
    scrollbar-width: none;
  }

  .shop__chips::-webkit-scrollbar {
    display: none;
  }

  .shop__chip {
    flex: none;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }

  .shop__chip:active {
    background: #fff;
    color: #c2358f;
  }

  .shop__scroll {
    gap: 22px;
  }

  .shop__sec {
    width: min(760px, 100%);
    justify-self: center;
    display: grid;
    gap: 12px;
  }

  .shop__h {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-left: 26px;
  }

  .shop__h .ribbon {
    font-size: 22px;
    padding: 8px 22px 10px;
  }

  .shop__h .ribbon::before,
  .shop__h .ribbon::after {
    display: none;
  }

  .shop__ends,
  .shop__note {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  }

  .shop__ends .ico {
    width: 16px;
    height: 16px;
  }

  .shop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 12px;
  }

  .shop__grid--daily {
    grid-template-columns: 1fr;
  }

  .scard {
    --edge: #c2358f;
    --glow: rgba(255, 95, 181, 0.4);
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff9fd 0%, #ffe6f3 100%);
    border: 5px solid var(--edge);
    box-shadow: 0 0 0 3px #fff, 0 10px 22px rgba(10, 0, 30, 0.4), 0 0 26px var(--glow);
    color: var(--ink);
    overflow: hidden;
    animation: mm-rise 0.4s var(--ease-pop) both;
  }

  .scard--red { --edge: #e0282a; --glow: rgba(255, 60, 60, 0.35); }
  .scard--blue { --edge: #1a70d4; --glow: rgba(60, 150, 255, 0.35); }
  .scard--green { --edge: #2f9d0d; --glow: rgba(90, 220, 60, 0.35); }
  .scard--gold { --edge: #e0a21a; --glow: rgba(255, 200, 60, 0.45); }
  .scard--purple { --edge: #7a22c4; --glow: rgba(160, 90, 255, 0.4); }
  .scard--violet { --edge: #4a0f80; --glow: rgba(120, 60, 220, 0.5); }

  .scard--legend {
    --edge: #b87a00;
    --glow: rgba(255, 210, 60, 0.7);
    background: linear-gradient(160deg, #fffbe6 0%, #ffe9a8 45%, #ffd65a 100%);
  }

  .scard--legend::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    animation: mm-shine 3.2s ease-in-out infinite;
    pointer-events: none;
  }

  .scard--featured {
    background: linear-gradient(160deg, #fff9fd 0%, #ffd6ec 60%, #ffb3dc 100%);
  }

  .scard.is-sold {
    filter: grayscale(0.7);
    opacity: 0.75;
  }

  .scard__off {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    background: radial-gradient(circle at 50% 35%, #fff08a, #ffc21a 60%, #f08a00);
    clip-path: polygon(50% 0%, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 90% 41%, 100% 54%, 86% 63%, 88% 80%, 72% 80%, 63% 95%, 50% 86%, 37% 95%, 28% 80%, 12% 80%, 14% 63%, 0% 54%, 10% 41%, 4% 26%, 20% 22%, 23% 6%, 39% 12%);
    rotate: 12deg;
    animation: mm-pulse 1.6s ease-in-out infinite;
  }

  .scard__off b {
    font-size: 17px;
    color: #c41414;
  }

  .scard__head {
    display: grid;
    gap: 2px;
    padding-right: 60px;
  }

  .scard__tag {
    justify-self: start;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--edge);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .scard__head h4 {
    font-size: 22px;
    color: #3b0d4a;
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 0 rgba(194, 53, 143, 0.22);
  }

  .scard__contents {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    justify-content: center;
    padding: 10px 6px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
  }

  .scard__item {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 64px;
    text-align: center;
  }

  .scard__item small {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: #7a3a8e;
  }

  .scard__value,
  .scard__timer,
  .scard__left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    color: #7a3a8e;
  }

  .scard__value .ico,
  .scard__value img {
    width: 18px;
    height: 18px;
  }

  .scard__timer .ico {
    width: 16px;
    height: 16px;
  }

  .scard__left {
    font-weight: 700;
    color: #c41414;
  }

  .scard__buy,
  .single__buy {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .sbtn {
    min-height: 42px;
    padding: 0 14px;
    font-size: 18px;
    border-radius: 14px;
  }

  .sbtn .btn__icon {
    width: 22px;
    height: 22px;
  }

  .shop__singles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;
  }

  .single {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff9fd, #ffe6f3);
    border: 4px solid #c2358f;
    box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(10, 0, 30, 0.35);
    color: var(--ink);
  }

  .single__art {
    grid-row: span 2;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
  }

  .single__art img,
  .single__art .ico,
  .single__art .rart-stack {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .single__text h4 {
    font-size: 18px;
    color: #3b0d4a;
  }

  .single__text p {
    font-size: 13px;
    color: #7a3a8e;
  }

  .single__owned,
  .single__left {
    display: inline-block;
    margin-top: 4px;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #3b0d4a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  .single__left {
    background: #1a70d4;
  }

  .single__buy {
    justify-content: flex-start;
  }
}

@layer components {
  .single.is-locked .single__art {
    filter: grayscale(0.85) brightness(0.8);
    opacity: 0.6;
  }

  .single__lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    margin-right: 6px;
    padding: 2px 10px 2px 6px;
    border-radius: 99px;
    background: #463a63;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  .single__lock .ico {
    width: 14px;
    height: 14px;
  }

  @media (min-width: 900px) {
    .sheet__head--shop .sheet__title {
      font-size: 48px;
    }

    .shop__chips {
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 4px 24px 14px;
    }

    .shop__chip {
      padding: 8px 14px;
      font-size: 15px;
    }

    .shop__scroll {
      gap: 34px;
      padding: 10px 32px 40px;
    }

    .shop__sec {
      width: min(1240px, 100%);
      gap: 18px;
    }

    .shop__h {
      padding-left: 30px;
    }

    .shop__h .ribbon {
      font-size: 30px;
      padding: 10px 30px 12px;
    }

    .shop__ends,
    .shop__note {
      gap: 6px;
      font-size: 17px;
    }

    .shop__ends .ico {
      width: 20px;
      height: 20px;
    }

    .shop__grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 22px;
    }

    .shop__grid.shop__grid--daily {
      grid-template-columns: 1fr;
    }

    .scard {
      gap: 14px;
      padding: 20px 22px;
      border-radius: 30px;
    }

    .scard__head {
      padding-right: 84px;
    }

    .scard__head h4 {
      font-size: 30px;
    }

    .scard__tag {
      padding: 3px 12px;
      font-size: 13px;
    }

    .scard__contents {
      gap: 22px 16px;
      padding: 20px 12px 24px;
      border-radius: 20px;
    }

    .scard__item {
      width: 100px;
      gap: 12px;
    }


    .scard__item small {
      font-size: 14px;
    }

    .scard__value,
    .scard__timer,
    .scard__left {
      gap: 6px;
      font-size: 17px;
    }

    .scard__value .ico,
    .scard__value img {
      width: 22px;
      height: 22px;
    }

    .scard__off {
      top: 12px;
      right: 12px;
      width: 84px;
      height: 84px;
    }

    .scard__off b {
      font-size: 23px;
    }

    .sbtn {
      min-height: 56px;
      padding: 0 24px;
      font-size: 25px;
      border-radius: 18px;
    }

    .sbtn .btn__icon {
      width: 30px;
      height: 30px;
    }

    .shop__grid--daily .scard {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
      align-items: center;
      column-gap: 26px;
      padding: 24px 28px;
    }

    .shop__grid--daily .scard__head {
      grid-column: 1 / -1;
    }

    .shop__grid--daily .scard__contents {
      grid-column: 1;
      grid-row: 2 / span 4;
      padding: 26px 16px 30px;
    }

    .shop__grid--daily .scard__value,
    .shop__grid--daily .scard__timer,
    .shop__grid--daily .scard__left,
    .shop__grid--daily .scard__buy {
      grid-column: 2;
    }

    .shop__grid--daily .scard__item {
      width: 128px;
    }


    .shop__grid--daily .scard__item small {
      font-size: 16px;
    }

    .shop__grid--daily .sbtn {
      min-height: 64px;
      font-size: 28px;
    }

    .shop__singles {
      grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
      gap: 18px;
    }

    .single {
      gap: 10px 20px;
      padding: 20px 22px;
      border-radius: 26px;
    }

    .single__art {
      width: 104px;
      height: 104px;
    }

    .single__text h4 {
      font-size: 26px;
    }

    .single__text p {
      font-size: 16px;
      line-height: 1.35;
    }

    .single__owned,
    .single__left,
    .single__lock {
      padding: 3px 12px;
      font-size: 13px;
    }

    .sheet__foot {
      font-size: 16px;
    }
  }

  @media (min-width: 1600px) {
    .shop__sec {
      width: min(1440px, 100%);
    }

    .shop__grid:not(.shop__grid--daily) {
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    }
  }
}

@layer overlays {
  @media (min-width: 900px) {
    .scard__item .rchip {
      width: 76px;
      height: 76px;
    }

    .scard__item .rchip__amt {
      bottom: -9px;
      font-size: 21px;
    }

    .shop__grid--daily .scard__item .rchip {
      width: 104px;
      height: 104px;
    }

    .shop__grid--daily .scard__item .rchip__amt {
      font-size: 26px;
    }
  }
}