.shop-page { gap: 12px; }

/* ---- Kepala kedai ---- */
.shop-hero {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px;
  padding: 22px 14px 16px; text-align: center; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 214, 102, .35), transparent 60%),
    linear-gradient(160deg, #3a2a12, #2a1d3d 60%, #1d1730);
  border: 1px solid rgba(255, 194, 61, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.shop-hero-title {
  position: relative; margin: 0; font-size: clamp(30px, 10vw, 44px); font-weight: 900; font-style: italic; letter-spacing: .02em; line-height: 1;
  color: transparent; background: linear-gradient(180deg, #fff3b0, #ffc23d 45%, #e08a00); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 #6b3f00) drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}
.shop-hero-sub { position: relative; margin: 0; color: #f3e3c0; font-size: 13px; font-weight: 700; }
.shop-wallet {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 16px 7px 8px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 194, 61, .55); border-radius: 999px;
}
.shop-wallet strong { color: var(--sun); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.shop-wallet small { color: #f3e3c0; font-size: 13px; font-weight: 800; }
.shop-coin {
  display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd34d 40%, #e39a00 75%, #a86400);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 10px rgba(255, 194, 61, .55);
  position: relative;
}
.shop-coin::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #a86400; font-size: 14px; }
.shop-coin.small { width: 16px; height: 16px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
.shop-coin.small::after { font-size: 9px; }
.shop-hero-coins { position: absolute; inset: 0; pointer-events: none; }
.shop-hero-coins i {
  position: absolute; top: -20px; width: 14px; height: 14px; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd34d 45%, #c27b00);
  animation: shop-jatuh 6s linear infinite;
}
.shop-hero-coins i:nth-child(1) { left: 8%; animation-delay: 0s; }
.shop-hero-coins i:nth-child(2) { left: 26%; animation-delay: 2.4s; transform: scale(.7); }
.shop-hero-coins i:nth-child(3) { left: 70%; animation-delay: 1.2s; }
.shop-hero-coins i:nth-child(4) { left: 86%; animation-delay: 3.6s; transform: scale(.8); }
.shop-hero-coins i:nth-child(5) { left: 50%; animation-delay: 4.8s; transform: scale(.6); }
@keyframes shop-jatuh {
  0% { transform: translateY(0) rotateY(0); opacity: 0; }
  10% { opacity: .8; }
  100% { transform: translateY(240px) rotateY(720deg); opacity: 0; }
}

/* ---- Rupa anda & koleksi ---- */
.shop-me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(35, 30, 49, .7); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }
.shop-me-avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; font-size: 30px; line-height: 1; background: rgba(255, 255, 255, .06); border-radius: 50%; }
.shop-me-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.shop-me-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.shop-me-text b { font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.shop-me-text small { color: var(--muted); font-size: 12px; }
.shop-collection { display: grid; gap: 6px; padding: 10px 12px; background: rgba(35, 30, 49, .7); border-radius: 12px; }
.shop-collection-head { display: flex; justify-content: space-between; font-size: 13px; }
.shop-collection-head span { color: var(--sun); font-weight: 900; font-variant-numeric: tabular-nums; }
.shop-collection .progress i { background: linear-gradient(90deg, #ffc23d, #ff7a36); }

/* ---- Pilihan hari ini ---- */
.shop-daily {
  position: relative; overflow: hidden; display: grid; gap: 8px; padding: 12px; cursor: pointer;
  background: linear-gradient(135deg, rgba(180, 140, 255, .18), rgba(255, 194, 61, .14));
  border: 1px solid rgba(255, 194, 61, .5); border-radius: 16px;
}
.shop-daily::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 230, 150, .16) 80%, transparent 90%);
  animation: shop-putar 7s linear infinite;
}
@keyframes shop-putar { to { transform: rotate(1turn); } }
.shop-daily-label { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.shop-daily-label b { color: var(--sun); font-size: 15px; font-weight: 900; }
.shop-daily-label small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.shop-daily-body { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
.shop-daily-body .shop-preview { min-height: 104px; }
.shop-daily-info { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.shop-daily-info > b { font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.shop-daily-info .btn { width: 100%; }

/* ---- Tab kategori (boleh diseret ke tepi) ---- */
.shop-tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; margin: 0 -4px; padding: 6px 4px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  background: linear-gradient(180deg, var(--night) 70%, transparent);
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center;
  min-height: 48px; padding: 6px 12px 6px 8px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: center;
  background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
  transition: border-color .15s, transform .15s, background-color .15s;
}
.shop-tab-ico { grid-row: 1 / 3; font-size: 22px; line-height: 1; }
.shop-tab b { font-size: 13px; font-weight: 900; white-space: nowrap; }
.shop-tab small { color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-tab.on { color: var(--sun); background: rgba(255, 194, 61, .12); border-color: var(--sun); transform: translateY(-1px); }
.shop-tab:active { transform: scale(.96); }

.shop-status { margin: 0; min-height: 1.3em; color: #7ef0c8; font-size: 14px; font-weight: 700; }
.shop-status.bad { color: #ff9b85; }

/* ---- Kad item ---- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-card {
  --c: #8c86a0; --glow: transparent;
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; padding: 9px;
  text-align: center; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--panel)), var(--panel) 55%);
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 14px;
  box-shadow: 0 0 14px var(--glow);
  transition: transform .15s;
  animation: shop-muncul .35s ease-out both;
}
.shop-card:active { transform: scale(.97); }
.shop-card:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.shop-card.biasa { --c: #8c86a0; }
.shop-card.jarang { --c: #4fa3ff; }
.shop-card.epik { --c: #b56bff; --glow: rgba(181, 107, 255, .28); }
.shop-card.legenda { --c: #ffb42a; --glow: rgba(255, 180, 42, .38); }
.shop-card.epik::after, .shop-card.legenda::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg); animation: shop-kilau 3.6s ease-in-out infinite;
}
.shop-card.legenda::after { animation-duration: 2.6s; }
@keyframes shop-kilau { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes shop-muncul { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shop-card.owned { border-style: solid; }
.shop-card.worn { box-shadow: 0 0 0 2px var(--sun), 0 0 16px rgba(255, 194, 61, .4); }
.shop-card.fresh { animation: shop-baru .9s ease-out; }
@keyframes shop-baru { 0% { transform: scale(.9); } 40% { transform: scale(1.06); } 100% { transform: none; } }
.shop-card-top { display: flex; justify-content: space-between; align-items: center; min-height: 18px; }
.shop-card-name { font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }

.shop-rarity {
  display: inline-block; padding: 2px 7px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; color: #fff; background: #6d6780;
}
.shop-rarity.jarang { background: #2f7fe0; }
.shop-rarity.epik { background: linear-gradient(90deg, #8b3dff, #c46bff); }
.shop-rarity.legenda { color: #3b2200; background: linear-gradient(90deg, #ffd34d, #ff9d1c); box-shadow: 0 0 8px rgba(255, 180, 42, .6); }
.shop-owned { display: grid; place-items: center; width: 20px; height: 20px; font-size: 12px; font-weight: 900; color: #10301f; background: #7ef0c8; border-radius: 50%; }

.shop-preview {
  display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 6px; font-size: 18px; font-weight: 900;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 70%); border-radius: 10px; overflow-wrap: anywhere;
}
.shop-preview.big { font-size: 42px; line-height: 1; }
.shop-preview .title-tag { margin-left: 0; }
.shop-preview.sticker { min-height: 96px; }
.shop-preview.sticker img { width: 84px; height: 84px; }
.shop-card:hover .shop-preview.big, .shop-card:focus-visible .shop-preview.big { transform: scale(1.08); transition: transform .2s; }

.shop-buy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #1d0f0a; font-weight: 900; background: linear-gradient(180deg, #ffd65c, var(--sun)); border-color: var(--sun); }
.shop-buy:disabled { color: var(--muted); background: var(--line); border-color: var(--line); }
.shop-buy.short:disabled { color: #ffb3a3; background: rgba(255, 90, 54, .12); border-color: rgba(255, 90, 54, .35); font-size: 12px; }
.shop-on { color: var(--sun); border-color: var(--sun); }

/* ---- Helaian pratonton ---- */
.shop-sheet-bg {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .6); animation: shop-pudar .2s ease-out;
}
.shop-sheet {
  --c: #8c86a0;
  position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 460px); max-height: 92vh; overflow-y: auto;
  padding: 18px 16px max(18px, env(safe-area-inset-bottom)); text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--panel)), var(--panel) 45%);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: shop-naik .28s cubic-bezier(.2, 1.2, .4, 1);
}
.shop-sheet.jarang { --c: #4fa3ff; }
.shop-sheet.epik { --c: #b56bff; }
.shop-sheet.legenda { --c: #ffb42a; }
.shop-sheet h2 { margin: 0; font-size: 22px; font-weight: 900; }
.shop-sheet-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; font: inherit; font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, .08); border: 0; border-radius: 50%; cursor: pointer; }
.shop-sheet-kind { margin: 0; color: var(--muted); font-size: 13px; }
.shop-sheet-label { justify-self: start; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.shop-preview.huge { width: 100%; min-height: 130px; }
.shop-preview.huge.big { font-size: 76px; }
.shop-preview.huge.sticker img { width: 120px; height: 120px; }
.shop-sheet-action { width: 100%; min-height: 48px; font-size: 16px; }
.shop-chat { display: flex; gap: 10px; width: 100%; padding: 10px; text-align: left; background: rgba(0, 0, 0, .25); border-radius: 12px; }
.shop-chat-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; font-size: 24px; background: rgba(255, 255, 255, .07); border-radius: 50%; }
.shop-chat-body { display: grid; gap: 4px; min-width: 0; }
.shop-chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.shop-chat-head b { font-size: 15px; font-weight: 900; }
.shop-chat-body p { margin: 0; padding: 7px 11px; font-size: 14px; background: #3a3150; border-radius: 4px 14px 14px 14px; justify-self: start; }
.shop-chat-body img { width: 96px; height: 96px; }
@keyframes shop-pudar { from { opacity: 0; } }
@keyframes shop-naik { from { transform: translateY(100%); } }

/* ---- Letupan syiling & konfeti ---- */
.shop-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.shop-burst i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 12px; border-radius: 2px;
  animation: shop-letup 1.1s cubic-bezier(.15, .8, .35, 1) forwards;
}
.shop-burst i.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd34d 45%, #c27b00); }
@keyframes shop-letup {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 80px)) rotate(var(--r)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero-coins, .shop-daily::before, .shop-card::after { display: none; }
  .shop-card, .shop-card.fresh, .shop-sheet, .shop-sheet-bg { animation: none; }
}

/* Pembetulan: gaya h2 umum dan bar kemajuan (common.css tidak menyediakan .progress) */
.shop-sheet h2 { color: var(--ink); text-transform: none; letter-spacing: 0; }
.shop-collection .progress { height: 8px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 999px; }
.shop-collection .progress i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .4s; }