.phone-screen { cursor: zoom-in; }
.background-gallery { padding: 0 0 60px; }
.background-gallery .micro { display: block; margin-bottom: 10px; color: #bda0ef; }
.gallery-hint { color: #a7aec3; font-size: 12px; white-space: nowrap; }
.background-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; }
.background-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff20; border-radius: 14px; background: #141620; cursor: zoom-in; transition: border-color .2s, transform .2s; }
.background-card:hover { border-color: #a473ff; transform: translateY(-4px); }
.background-card img { width: 100%; height: auto; aspect-ratio: 300/533; object-fit: cover; }
.background-card > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; font-size: 12px; line-height: 1.4; }
.background-card > span > span { color: #bda0ef; }
.background-collection { margin-top: 24px; border-top: 1px solid #ffffff20; }
.background-collection summary { padding: 20px 4px; cursor: pointer; color: #d8c6ff; font-size: 15px; }
.collection-summary-note { margin-left: 12px; font-size: 12px; color: #a7aec3; }
.background-collection[open] summary { margin-bottom: 8px; }
.sticker-gallery { padding: 0 0 60px; }
.sticker-gallery .micro { display: block; margin-bottom: 10px; color: #bda0ef; }
.sticker-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.sticker-card { background: radial-gradient(ellipse at 50% 25%,#49316c55,#141620 75%); }
.sticker-card:nth-child(even) { background: radial-gradient(ellipse at 50% 25%,#28477566,#141620 75%); }
.sticker-card img { aspect-ratio: 1; object-fit: contain; padding: 18px; }
.viewer-figure img[data-kind="sticker"] { box-shadow: none; border-radius: 0; filter: drop-shadow(0 16px 25px #0006); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 76px 76px 58px; border: 0; color: #f7f8ff; background: #070910f5; overflow: hidden; overscroll-behavior: contain; }
.image-viewer:not([open]) { display: none; }
.image-viewer[open] { display: flex; align-items: center; justify-content: center; }
.image-viewer::backdrop { background: #070910; }
.viewer-figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; min-height: 0; }
.viewer-figure img { display: block; max-width: 100%; max-height: calc(100% - 42px); width: auto; height: auto; object-fit: contain; border-radius: 8px; cursor: zoom-out; box-shadow: 0 15px 70px #0008; }
.viewer-figure figcaption { display: flex; justify-content: center; gap: 20px; font-size: 13px; text-align: center; }
.viewer-counter { color: #b6a3da; white-space: nowrap; }
.image-viewer button { position: absolute; z-index: 1; border: 1px solid #ffffff30; border-radius: 999px; color: white; background: #252334; cursor: pointer; }
.image-viewer button:hover { background: #503b72; border-color: #bda0ef; }
.viewer-close { top: max(18px,env(safe-area-inset-top)); right: max(20px,env(safe-area-inset-right)); min-height: 44px; padding: 7px 18px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.viewer-close span { font-size: 27px; line-height: 1; }
.viewer-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 56px; font-size: 36px; line-height: 1; }
.viewer-prev { left: 16px; }
.viewer-next { right: 16px; }
.viewer-hint { position: absolute; bottom: max(16px,env(safe-area-inset-bottom)); left: 12px; right: 12px; margin: 0; text-align: center; font-size: 11px; color: #a7aec3; }
@media(max-width:1080px) { .background-grid,.sticker-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .background-gallery { padding-bottom: 34px; }
  .sticker-gallery { padding-bottom: 34px; }
  .sticker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .collection-summary-note { display: block; margin: 5px 0 0 18px; }
  .background-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .gallery-hint { display: none; }
  .image-viewer { padding: 74px 12px 98px; }
  .viewer-arrow { top: auto; bottom: max(40px,env(safe-area-inset-bottom)); transform: none; width: 44px; height: 44px; }
  .viewer-prev { left: calc(50% - 54px); }
  .viewer-next { right: calc(50% - 54px); }
  .viewer-hint { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .background-card { transition: none; } .background-card:hover { transform: none; } }