/* =========================================================================
   Steal a Dragon Egg — cosmetics Shop panel (js/ui/shop.js)
   "Dragon Keeper's Guild": the try-on stage is a little sky theatre with a
   stone pedestal (3D), the catalogue is a parchment grid of rarity-framed
   cards, tabs reuse the gem-tab look of css/panels.css.
   Layout is chosen by shop.js from the panel body size:
     .shop[data-layout=land]  stage + actions left, tabs + grid right
     .shop[data-layout=port]  stage on top (compact), actions, tabs, grid
     .shop[data-layout=mid]   square / small windows: stage + actions in one row, tabs, grid
     [data-size=s|m|l]        density steps (phones → desktop)
     [data-tabs=full|label|icon|scroll|wrap]  tab faces measured by shop.js (fitTabs): the first that fits
   ========================================================================= */

.panel-shop.panel-l { width: min(1120px, 100%); }
.panel-shop .panel-body { padding: 0; overflow: hidden; }

.shop {
  --rc: #4f9a2a; --rc-l: #b9e3a0; --rc-d: #2b5717;
  --gem-c: #8a5cf0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 41%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  width: 100%; height: 100%;
  padding: 12px;
  font-family: var(--font, 'Nunito', sans-serif);
  color: var(--parch-ink, #4a2a10);
  -webkit-tap-highlight-color: transparent;
}
.shop[data-layout="port"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px; padding: 8px;
}

/* ------------------------------------------------------------------ show */
.shop-show { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.shop[data-layout="port"] .shop-show { gap: 6px; }

.shop-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  border: 3px solid var(--ink, #2a1407); border-radius: 18px;
  overflow: hidden; isolation: isolate;
  background: #9fd3ff;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 4px 0 var(--ink, #2a1407), 0 10px 18px rgba(60, 30, 5, .35);
  touch-action: none;
}
.shop[data-layout="port"] .shop-stage { flex: 0 0 auto; height: clamp(170px, 34vh, 300px); width: min(100%, calc(2.2 * clamp(170px, 34vh, 300px))); align-self: center; }
.shop[data-layout="port"][data-size="s"] .shop-stage { height: clamp(150px, 30vh, 230px); width: min(100%, calc(2.2 * clamp(150px, 30vh, 230px))); }
/* mid (square / small windows): the stage (4:3) and the actions share the top row, the wallet moves to the tab bar */
.shop[data-layout="mid"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px; }
.shop[data-layout="mid"] .shop-show { flex-direction: row; align-items: center; gap: 10px; }
.shop[data-layout="mid"] .shop-stage { flex: 0 0 auto; height: clamp(100px, 24vh, 190px); aspect-ratio: 4 / 3; max-width: 56%; }
.shop[data-layout="mid"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.shop[data-layout="mid"] .shop-card-name { font-size: 12px; }
/* small grids: a slightly wider-than-tall thumbnail, so a whole card row fits */
.shop[data-layout="mid"] .shop-card-thumb, .shop.shop--short .shop-card-thumb, .shop[data-layout="port"][data-size="s"] .shop-card-thumb { aspect-ratio: 1.2; }
/* small land (short landscape windows): compact chips fit the narrow stage, the big button shrinks with its
   column, two card columns keep names on whole words */
.shop[data-layout="land"][data-size="s"] .shop-stage-top { left: 6px; right: 6px; top: 6px; gap: 6px; }
.shop[data-layout="land"][data-size="s"] .shop-rarity { height: 22px; font-size: 11px; padding: 0 6px; letter-spacing: 0; }
.shop[data-layout="land"][data-size="s"] .shop-wallet { height: 28px; font-size: 14px; gap: 2px; padding: 0 6px 0 2px; }
.shop[data-layout="land"][data-size="s"] .shop-wallet-gem { width: 22px; height: 22px; }
.shop[data-layout="land"][data-size="s"] .shop-btn { min-width: 0; font-size: 18px; padding: 4px 10px 7px; gap: 6px; }
.shop[data-layout="land"][data-size="s"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.shop[data-layout="land"][data-size="s"] .shop-card-thumb { aspect-ratio: 1.2; }
/* the shortest windows: wide, low thumbnails, so a whole card row fits the scroller and names keep their words */
.shop.shop--short[data-layout] .shop-card-thumb { aspect-ratio: 1.9; }
.shop.shop--short .shop-card-name { font-size: 11px; min-height: 2.2em; }
.shop.shop--short .shop-card { padding: 4px 4px 5px; }
/* small land (short landscape phones): a narrower stage column leaves the tabs and the grid more room */
.shop[data-layout="land"][data-size="s"] { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); }
/* small portrait phones: a lower stage, no note line, three card columns */
.shop[data-layout="port"][data-size="s"] { padding: 6px; gap: 6px; }
.shop[data-layout="port"][data-size="s"] .shop-stage { height: clamp(124px, 24vh, 210px); width: min(100%, calc(2.2 * clamp(124px, 24vh, 210px))); }
.shop[data-layout="port"][data-size="s"] .shop-note:empty { display: none; }
.shop[data-layout="port"][data-size="s"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(max(98px, calc((100% - 12px) / 3)), 1fr)); gap: 6px; }
.shop[data-layout="port"][data-size="s"] .shop-card-name { font-size: 11.5px; }
.shop[data-size="s"] .shop-rarity { height: 24px; font-size: 12px; padding: 0 9px; }
.shop[data-size="s"] .shop-wallet { height: 32px; font-size: 17px; gap: 4px; padding: 0 10px 0 4px; }
.shop[data-size="s"] .shop-wallet-gem { width: 26px; height: 26px; }
.shop[data-layout="mid"] .shop-actions { flex: 1 1 0; min-width: 0; }
.shop[data-layout="mid"] .shop-act-row { flex-direction: column; }
.shop[data-layout="mid"] .shop-btn { min-height: 50px; font-size: 19px; padding: 4px 10px 7px; gap: 8px; }
.shop[data-layout="mid"] .shop-btn--sub { min-height: 44px; font-size: 16px; }
.shop[data-layout="mid"] .shop-note { font-size: 12px; }
.shop[data-layout="mid"] .shop-stage-name { font-size: 16px; bottom: 6px; }
.shop[data-layout="mid"] .shop-rarity { height: 22px; font-size: 11px; padding: 0 8px; }
.shop[data-layout="mid"] .shop-stage-top { left: 6px; right: 6px; top: 6px; }
.shop[data-layout="mid"] .shop-wallet--stage { display: none; }
.shop[data-layout="mid"] .shop-wallet--bar { display: inline-flex; flex: 0 0 auto; height: 32px; font-size: 16px; }
.shop[data-layout="mid"] .shop-wallet--bar .shop-wallet-gem { width: 24px; height: 24px; }

.shop-stage-sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 72%, var(--rc-l) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #7cc6ff 0%, #bfe6ff 46%, #fff1cf 74%, #e7c98d 100%);
}
.shop-stage[data-rarity="epic"] .shop-stage-sky { background:
    radial-gradient(ellipse 70% 55% at 50% 72%, rgba(196, 150, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #6a7cf0 0%, #b7b8ff 46%, #f6e6ff 74%, #d9bde8 100%); }
.shop-stage[data-rarity="legendary"] .shop-stage-sky { background:
    radial-gradient(ellipse 70% 55% at 50% 72%, rgba(255, 220, 110, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffb347 0%, #ffd98a 42%, #fff4cf 72%, #e9c47a 100%); }
.shop-stage[data-rarity="rare"] .shop-stage-sky { background:
    radial-gradient(ellipse 70% 55% at 50% 72%, rgba(255, 196, 120, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #5fb8ff 0%, #b9e2ff 46%, #fff0d2 74%, #e8c48c 100%); }
.shop-rays {
  position: absolute; left: 50%; top: 62%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .26) 0deg 9deg, rgba(255, 255, 255, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 32%, transparent 62%);
          mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 32%, transparent 62%);
  animation: shop-rays 40s linear infinite;
}
@keyframes shop-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.shop-spot {
  position: absolute; left: 50%; bottom: 6%; width: 64%; height: 18%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
}
.shop-motes { position: absolute; inset: 0; }
.shop-motes b {
  position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8); opacity: 0;
  animation: shop-mote 7s linear infinite;
}
.shop-motes b:nth-child(1) { left: 14%; animation-delay: 0s; }
.shop-motes b:nth-child(2) { left: 31%; animation-delay: 2.2s; animation-duration: 8s; }
.shop-motes b:nth-child(3) { left: 52%; animation-delay: 4.1s; }
.shop-motes b:nth-child(4) { left: 68%; animation-delay: 1.3s; animation-duration: 9s; }
.shop-motes b:nth-child(5) { left: 83%; animation-delay: 3.4s; }
.shop-motes b:nth-child(6) { left: 92%; animation-delay: 5.6s; animation-duration: 6.5s; }
@keyframes shop-mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-340px); opacity: 0; } }

.shop-stage-slot { position: absolute; inset: 0; z-index: 1; }
.shop-stage-gl { position: absolute; inset: 0; cursor: grab; }
.shop-stage-gl.is-dragging { cursor: grabbing; }
.shop-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shop-stage-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.shop-stage-gl.is-fallback .shop-stage-fallback { display: flex; }
.shop-stage-gl.is-fallback .shop-stage-canvas { visibility: hidden; }
.shop-stage-fallback img { width: min(78%, 260px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(40, 20, 5, .35)); }
.shop-stage-fallback.is-loading::after {
  content: ''; width: 46px; height: 46px; border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, .5); border-top-color: var(--rc); animation: shop-spin .8s linear infinite;
}

.shop-stage-top {
  position: absolute; z-index: 3; left: 10px; right: 10px; top: 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none;
}
.shop-rarity {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 3px solid var(--ink, #2a1407); border-radius: 999px;
  background: linear-gradient(180deg, var(--rc-l), var(--rc) 55%, var(--rc-d));
  color: #fff; font: 900 14px/1 var(--font); text-shadow: var(--ts-sm); letter-spacing: .02em;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ink, #2a1407);
  text-transform: uppercase;
}
.shop-stage[data-rarity="legendary"] .shop-rarity { animation: shop-glint 2.6s ease-in-out infinite; }
@keyframes shop-glint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) saturate(1.2); } }

.shop-wallet {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px;
  border: 3px solid var(--ink, #2a1407); border-radius: 999px;
  background: linear-gradient(180deg, #b993ff, #7b4fe0 60%, #5a33b8);
  color: #fff; font: 900 19px/1 var(--font); text-shadow: var(--ts-sm);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(40, 10, 90, .4), 0 3px 0 var(--ink, #2a1407);
  pointer-events: auto;
}
.shop-wallet-gem { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(42, 20, 7, .6)); }
.shop-wallet.is-down { animation: shop-wallet-down .5s ease; }
.shop-wallet.is-up { animation: shop-wallet-up .5s ease; }
@keyframes shop-wallet-down { 30% { transform: scale(.9); filter: brightness(.85); } }
@keyframes shop-wallet-up { 30% { transform: scale(1.12); filter: brightness(1.2); } }
.shop-wallet--bar { display: none; }

.shop-drag-hint {
  /* top-left corner under the rarity chip: the model is framed in the middle of the stage (its narrow head at
     the top), its name at the bottom — the hint never covers it at any turntable angle */
  position: absolute; z-index: 3; left: 10px; top: 48px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 7px;
  border-radius: 14px;
  border-radius: 999px; background: rgba(42, 20, 7, .55); color: #fff;
  font: 900 13px/1 var(--font); pointer-events: none; transition: opacity .4s ease;
}
.shop-drag-hint i { width: 26px; height: 12px; position: relative; }
.shop-drag-hint i::before, .shop-drag-hint i::after {
  content: ''; position: absolute; top: 2px; width: 0; height: 0; border: 4px solid transparent;
}
.shop-drag-hint i::before { left: 0; border-right: 7px solid #fff; border-left: 0; }
.shop-drag-hint i::after { right: 0; border-left: 7px solid #fff; border-right: 0; }
.shop--dragged .shop-drag-hint { opacity: 0; }

.shop-stage-name {
  position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px;
  display: flex; justify-content: center; pointer-events: none;
  font: 900 22px/1.1 var(--font); color: #fff; text-shadow: var(--ts); text-align: center;
}
.shop[data-size="s"] .shop-stage-name { font-size: 18px; bottom: 8px; }
.shop[data-size="s"] .shop-drag-hint, .shop[data-layout="mid"] .shop-drag-hint { display: none; }

/* celebration overlay */
.shop-burst { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.shop-burst.is-on { display: block; }
.shop-burst-rays {
  position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.3);
  background: repeating-conic-gradient(rgba(255, 236, 140, .75) 0deg 8deg, rgba(255, 236, 140, 0) 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 60%); mask: radial-gradient(circle, #000 0%, transparent 60%);
  animation: shop-burst-rays 1.5s ease-out both;
}
@keyframes shop-burst-rays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(40deg); } }
.shop-stamp {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg);
  padding: 6px 18px; border: 4px solid var(--ink, #2a1407); border-radius: 14px;
  background: linear-gradient(180deg, #ffe36b, #f2ad14); color: #fff; white-space: nowrap;
  font: 900 30px/1.1 var(--font); text-shadow: var(--ts);
  box-shadow: 0 5px 0 var(--ink, #2a1407), 0 10px 20px rgba(0, 0, 0, .35);
  animation: shop-stamp 1.6s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes shop-stamp { 0% { transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) rotate(-6deg) scale(.95); } }
.shop-confetti {
  position: absolute; left: 50%; top: 45%; width: 10px; height: 14px; border-radius: 2px; background: var(--c);
  animation: shop-confetti 1.3s cubic-bezier(.15, .7, .4, 1) var(--d) both;
}
@keyframes shop-confetti { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 60px)) rotate(var(--r)); opacity: 0; } }

/* ---------------------------------------------------------------- actions */
.shop-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.shop-act-row { display: flex; gap: 8px; align-items: stretch; }
.shop-note {
  font: 800 13px/1.25 var(--font); color: rgba(74, 42, 16, .85); text-align: center; min-height: 0;
}
.shop-note .is-warn { color: #b0391b; }
.shop-link {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-left: 4px; vertical-align: middle;
  border: 2px solid var(--ink, #2a1407); border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #d9a8ff, #9a5cf0); color: #fff; font: 900 13px/1 var(--font); text-shadow: var(--ts-sm);
  box-shadow: 0 2px 0 var(--ink, #2a1407);
}

.shop-btn {
  --c1: #78e64a; --c2: #3fae1f; --c3: #23720f;
  position: relative; flex: 1 1 auto; min-height: 60px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 16px 9px;
  border: 3px solid var(--ink, #2a1407); border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, var(--c1), var(--c2) 58%, var(--c3));
  color: #fff; font: 900 23px/1 var(--font); text-shadow: var(--ts);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 var(--c3), 0 5px 0 var(--ink, #2a1407), 0 9px 14px rgba(40, 20, 5, .3);
  transition: transform .08s ease, filter .15s ease;
  -webkit-user-select: none; user-select: none;
}
.shop-btn:hover:not(:disabled) { filter: brightness(1.07); }
.shop-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 var(--c3), 0 1px 0 var(--ink, #2a1407); }
.shop-btn:disabled { cursor: default; }
.shop-btn--ad { --c1: #c08bff; --c2: #7b3fd0; --c3: #4a1f8c; }
.shop-btn--equip { --c1: #ffe36b; --c2: #f2ad14; --c3: #a26600; }
.shop-btn--equipped { --c1: #9ee98a; --c2: #59b941; --c3: #367a24; font-size: 20px; filter: saturate(.75); }
.shop-btn--sub { --c1: #ffb199; --c2: #e0583f; --c3: #8c2a17; flex: 0 0 auto; min-width: 110px; font-size: 17px; }
.shop-btn.is-short, .shop-btn--ad:disabled:not(.is-busy) { --c1: #c9c2b6; --c2: #9b9183; --c3: #6a6155; filter: none; }
.shop-btn.is-short { font-size: 18px; }
.shop-btn.is-busy { filter: saturate(.7); }
.shop-btn.is-fresh { animation: shop-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.shop-btn.is-shake { animation: shop-shake .4s ease; }
@keyframes shop-pop { 0% { transform: scale(.85); } 100% { transform: none; } }
@keyframes shop-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shop-btn-ic { width: 34px; height: 34px; object-fit: contain; margin: -6px 0; filter: drop-shadow(0 2px 0 rgba(42, 20, 7, .6)); }
.shop-btn-price {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 4px;
  border: 3px solid var(--ink, #2a1407); border-radius: 999px;
  background: linear-gradient(180deg, #b993ff, #6f42d6); font-size: 21px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
.shop-btn-price img { width: 28px; height: 28px; object-fit: contain; }
.shop-btn.is-short .shop-btn-price { background: linear-gradient(180deg, #a59ab8, #6e6585); }
.shop-btn-prog { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; }
.shop-ic-check { width: 24px; height: 14px; border: solid #fff; border-width: 0 0 5px 5px; transform: rotate(-45deg) translate(2px, -3px); filter: drop-shadow(0 2px 0 var(--ink, #2a1407)); }
.shop-spin { width: 26px; height: 26px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: shop-spin .8s linear infinite; }
@keyframes shop-spin { to { transform: rotate(360deg); } }

/* ad progress pips */
.shop-pips { display: inline-flex; gap: 3px; }
.shop-pips i {
  width: 14px; height: 9px; border-radius: 3px;
  background: rgba(42, 20, 7, .35); border: 2px solid rgba(42, 20, 7, .7);
}
.shop-pips i.on { background: linear-gradient(180deg, #ffe36b, #f2ad14); border-color: var(--ink, #2a1407); }
.shop-btn .shop-pips i { background: rgba(255, 255, 255, .25); border-color: rgba(42, 20, 7, .8); }
.shop-btn .shop-pips i.on { background: linear-gradient(180deg, #fff6b0, #ffd23a); }

/* ----------------------------------------------------------------- browse */
.shop-browse { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 8px; }
.shop-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shop-tabs {
  display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 4px 2px 6px;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab.gem-tab { min-width: 0; flex: 1 1 0; height: 54px; }
.shop-tab .gt-face { gap: 5px; padding: 0 14px 2px; flex-direction: row; }
.shop-tab .gt-ic { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; margin-left: -4px; }
.shop-tab .shop-tab-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 0; }
.shop-tab .shop-tab-label { font: 900 15px/1.05 var(--font); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shop-tab .shop-tab-count { font: 900 12px/1.1 var(--font); opacity: .95; }
.shop-tab .shop-dot { position: absolute; right: 12px; top: 3px; }
.shop[data-size="s"] .shop-tab.gem-tab { height: 48px; }
.shop[data-size="s"] .shop-tab .gt-face { padding: 0 10px 2px; gap: 3px; }
.shop[data-size="s"] .shop-tab .gt-ic { width: 26px; height: 26px; margin-left: 0; }

.shop-grid-wrap {
  position: relative;   /* the cards' offsetTop is measured from the scroller (shop.js scrollSelIntoView) */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 8px 6px 10px 4px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: #a86d2a rgba(120, 70, 20, .15);
}
.shop-grid-wrap::-webkit-scrollbar { width: 10px; }
.shop-grid-wrap::-webkit-scrollbar-track { background: rgba(120, 70, 20, .12); border-radius: 6px; }
.shop-grid-wrap::-webkit-scrollbar-thumb { background: linear-gradient(#c58337, #8a4b1f); border-radius: 6px; border: 2px solid rgba(255, 243, 214, .7); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.shop[data-size="m"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.shop[data-layout="port"][data-size="l"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.shop[data-size="s"] .shop-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 7px; }
.shop-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; font: 900 18px/1.3 var(--font); opacity: .7; }

/* ------------------------------------------------------------------ cards */
.shop-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; padding: 5px 5px 6px;
  border: 3px solid var(--ink, #2a1407); border-radius: 14px; cursor: pointer;
  background:
    radial-gradient(ellipse 80% 60% at 50% 34%, #fffdf4 0%, rgba(255, 253, 244, 0) 70%),
    linear-gradient(180deg, var(--rc-l), #f6e4ba 55%, #ecd09a);
  box-shadow: inset 0 0 0 3px var(--rc), inset 0 0 0 5px rgba(255, 255, 255, .5), 0 4px 0 var(--ink, #2a1407), 0 6px 10px rgba(60, 30, 5, .22);
  font-family: var(--font); color: var(--parch-ink, #4a2a10); text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-user-select: none; user-select: none;
}
.shop-card:hover { transform: translateY(-3px); }
.shop-card:focus-visible { outline: 3px solid #39a6ff; outline-offset: 2px; }
.shop-card.is-sel {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 4px var(--rc), inset 0 0 0 7px #fff, 0 0 0 3px #ffd23a, 0 6px 0 var(--ink, #2a1407), 0 0 18px 4px rgba(255, 210, 58, .65);
}
.shop-card-frame { position: absolute; inset: 0; border-radius: 11px; pointer-events: none; }
.shop-r-epic .shop-card-frame { box-shadow: inset 0 0 14px rgba(123, 63, 208, .45); }
.shop-r-legendary .shop-card-frame {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 246, 190, .75) 45%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 260% 100%; animation: shop-sheen 3.6s ease-in-out infinite;
  box-shadow: inset 0 0 16px rgba(224, 164, 0, .55);
}
@keyframes shop-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }

.shop-card-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden;
}
.shop-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-card-thumb.is-loading::before {
  content: ''; position: absolute; inset: 8%; border-radius: 12px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 70%) 0 0 / 220% 100%, rgba(150, 100, 40, .16);
  animation: shop-shimmer 1.2s linear infinite;
}
.shop-card-thumb.is-loading img { visibility: hidden; }
@keyframes shop-shimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
.shop-card-thumb.is-missing img { inset: 22%; width: 56%; height: 56%; opacity: .75; }
.shop-card--locked .shop-card-thumb img { filter: saturate(.9); }

.shop-card-name {
  /* never clamped: a long name takes a third line (the row grows) instead of being cut */
  display: block; overflow-wrap: break-word; hyphens: auto;
  margin: 3px 2px 4px; min-height: 2.2em;
  font: 900 13px/1.1 var(--font); color: var(--parch-ink, #4a2a10);
}
.shop[data-size="s"] .shop-card-name { font-size: 12px; }

.shop-price {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 28px; padding: 2px 6px; margin-top: auto;
  border: 2px solid var(--ink, #2a1407); border-radius: 10px;
  font: 900 clamp(11px, 12.5cqw, 15px)/1 var(--font); color: #fff; text-shadow: var(--ts-sm);
}
.shop-price--gems { background: linear-gradient(180deg, #b993ff, #6f42d6); }
.shop-price--gems img { width: 22px; height: 22px; object-fit: contain; margin-left: -2px; }
.shop-price--gems.is-short { background: linear-gradient(180deg, #a59ab8, #6e6585); }
.shop-price--ads { flex-direction: column; gap: 3px; padding: 3px 4px 4px; background: linear-gradient(180deg, #5cc1ff, #1f7fe6); }
.shop-card { container-type: inline-size; }
.shop-rw-txt { font-size: clamp(9px, 10.5cqw, 12px); white-space: nowrap; }
.shop-price--ads .shop-pips i { width: 11px; height: 7px; }
.shop[data-size="s"] .shop-rw-txt { font-size: 11px; }
.shop-price--own { background: linear-gradient(180deg, #9ee98a, #3fae1f); }
.shop-price--eq { background: linear-gradient(180deg, #ffe36b, #f2ad14); }
.shop-price--free { background: linear-gradient(180deg, #9ee98a, #3fae1f); }

.shop-badge {
  /* inside the card's top-right corner (over the thumbnail corner): never cut by the scroller, never on a neighbour */
  position: absolute; z-index: 2; right: 5px; top: 5px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--ink, #2a1407); border-radius: 50%;
  box-shadow: 0 2px 0 rgba(42, 20, 7, .45);
}
.shop-badge--lock { background: linear-gradient(180deg, #8a7a66, #5a4c3c); }
.shop-badge--lock img { width: 17px; height: 17px; object-fit: contain; }
.shop-badge--own { background: linear-gradient(180deg, #9ee98a, #3fae1f); }
.shop-badge--eq { background: linear-gradient(180deg, #ffe36b, #f2ad14); }
.shop-badge--own::after, .shop-badge--eq::after {
  content: ''; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 3.5px 3.5px; transform: rotate(-45deg) translate(1px, -2px);
}
/* MYTHIC / Exclusive ribbon: inside the thumbnail, on its bottom edge; the font follows the thumbnail width
   (container units) so the longest word always fits */
.shop-card-thumb { container-type: inline-size; }
.shop-card-excl {
  position: absolute; z-index: 3; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 2px 7px 3px; white-space: nowrap;
  max-width: calc(100% - 6px);
  border: 2px solid var(--ink, #2a1407); border-radius: 999px;
  background: linear-gradient(180deg, #ffe36b, #e0a400); color: #fff; font: 900 min(11px, calc((100cqw - 20px) / 6.2))/1 var(--font); text-shadow: var(--ts-sm);
}
.shop-dot {
  position: absolute; z-index: 3; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: #ff4b3a; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink, #2a1407);
  animation: shop-dot 1.4s ease-in-out infinite;
}
@keyframes shop-dot { 50% { transform: scale(1.25); } }

.shop-card.is-won { animation: shop-won .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes shop-won { 0% { transform: scale(.8) rotate(-4deg); } 60% { transform: scale(1.08) rotate(2deg); } 100% { transform: translateY(-3px); } }
.shop-card.is-pulse .shop-pips i.on:last-of-type { animation: shop-pip .6s ease 2; }
@keyframes shop-pip { 50% { transform: scale(1.5); filter: brightness(1.4); } }

/* -------------------------------------------------------- portrait tweaks */
.shop[data-layout="port"] .shop-btn { min-height: 54px; font-size: 21px; }
.shop[data-layout="port"][data-size="s"] .shop-btn { min-height: 50px; font-size: 19px; padding: 4px 10px 7px; }
.shop[data-layout="port"] .shop-note { font-size: 12px; }

/* ---------------------------------------------------- short landscape (phones) */
.shop.shop--short { gap: 8px; padding: 8px; }
.shop.shop--short .shop-show { gap: 6px; }
.shop.shop--short .shop-btn { min-height: 46px; font-size: 18px; padding: 3px 10px 6px; border-radius: 13px; }
.shop.shop--short .shop-btn-price { height: 30px; font-size: 17px; }
.shop.shop--short .shop-btn-price img { width: 22px; height: 22px; }
.shop.shop--short .shop-btn-ic { width: 26px; height: 26px; }
.shop.shop--short .shop-note { display: none; }
.shop.shop--short .shop-stage-name { font-size: 16px; }
.shop.shop--short .shop-rarity { height: 22px; font-size: 11px; padding: 0 8px; }
.shop.shop--short .shop-wallet { height: 30px; font-size: 16px; }
.shop.shop--short .shop-wallet-gem { width: 24px; height: 24px; }
.shop.shop--short .shop-tab.gem-tab { height: 44px; }
.shop.shop--short .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.shop.shop--short .shop-card-name { font-size: 11px; min-height: 2.2em; margin: 2px 1px 3px; }
.shop.shop--short .shop-price { min-height: 24px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .shop-rays, .shop-motes b, .shop-r-legendary .shop-card-frame, .shop-dot { animation: none; }
}

/* ------------------------------------------------------------- mythic (6th tab) */
.shop-tab[data-tab="mythic"] .gt-face {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .6) 0 22%, rgba(255, 255, 255, .14) 23% 48%, rgba(0, 0, 0, 0) 49% 70%, rgba(0, 0, 0, .18) 71%),
    linear-gradient(90deg, #ff3fb4, #b45cff, #3fc8ff, #ffd23a, #ff3fb4);
  background-size: 100% 100%, 300% 100%;
  animation: shop-myth-tab 4s linear infinite;
}
@keyframes shop-myth-tab { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 300% 0; } }
.shop-tab[data-tab="mythic"]::after {
  content: '\2726'; position: absolute; right: 16px; top: 2px; z-index: 2;
  font: 900 15px/1 var(--font); color: #fff; text-shadow: 0 0 6px #fff, 0 0 10px #ff3fb4;
  animation: shop-twinkle 1.4s ease-in-out infinite;
}
.shop-tab[data-tab="mythic"] { filter: saturate(.8) brightness(.95); flex-grow: 1.5; }
.shop-tab[data-tab="mythic"].on { filter: none; }
@keyframes shop-twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(30deg); } }

.shop-card.shop-r-mythic {
  background:
    radial-gradient(ellipse 80% 60% at 50% 34%, #fff6fd 0%, rgba(255, 246, 253, 0) 70%),
    linear-gradient(180deg, #ffc9ec, #f9dcff 55%, #e8c6ff);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), 0 4px 0 var(--ink, #2a1407), 0 0 14px 2px rgba(255, 63, 180, .55);
  animation: shop-myth-glow 2.2s ease-in-out infinite;
}
.shop-r-mythic .shop-card-frame {
  inset: -3px; border-radius: 14px; padding: 4px;
  background: conic-gradient(#ff3fb4, #ffd23a, #6bff7a, #3fc8ff, #b45cff, #ff3fb4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shop-hue 3s linear infinite;
}
@keyframes shop-hue { to { filter: hue-rotate(360deg); } }
@keyframes shop-myth-glow { 0%, 100% { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), 0 4px 0 var(--ink, #2a1407), 0 0 10px 1px rgba(255, 63, 180, .45); } 50% { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), 0 4px 0 var(--ink, #2a1407), 0 0 20px 5px rgba(255, 63, 180, .75); } }
.shop-card.shop-r-mythic.is-sel { box-shadow: inset 0 0 0 5px #fff, 0 0 0 3px #ffd23a, 0 6px 0 var(--ink, #2a1407), 0 0 24px 6px rgba(255, 63, 180, .8); }
.shop-card-myth {
  position: absolute; z-index: 3; left: 50%; bottom: 3px; transform: translateX(-50%);
  padding: 2px 6px 3px; white-space: nowrap; max-width: calc(100% - 6px);
  border: 2px solid var(--ink, #2a1407); border-radius: 999px;
  background: linear-gradient(90deg, #ff3fb4, #b45cff, #3fc8ff, #ff3fb4); background-size: 300% 100%;
  color: #fff; font: 900 min(10px, calc((100cqw - 18px) / 7.4))/1 var(--font); letter-spacing: .03em; text-shadow: var(--ts-sm);
  animation: shop-myth-tab 3s linear infinite;
}
.shop-stage[data-rarity="mythic"] .shop-stage-sky { background:
    radial-gradient(ellipse 70% 55% at 50% 72%, rgba(255, 140, 220, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #7a3fe0 0%, #ff6ac8 45%, #ffd6f2 74%, #e8b0e0 100%); }
.shop-stage[data-rarity="mythic"] .shop-rarity {
  background: linear-gradient(90deg, #ff3fb4, #b45cff, #3fc8ff, #ffd23a, #ff3fb4); background-size: 300% 100%;
  animation: shop-myth-tab 3s linear infinite;
}

/* six tabs: tighter faces so the labels fit */
.shop-tab.gem-tab { padding: 3px; }
.shop-tab .gt-face { padding: 0 11px 2px; }
.shop-tab .gt-ic { width: 28px; height: 28px; margin-left: 0; }
.shop-tab .shop-tab-label { font-size: 13px; letter-spacing: -.01em; }

/* tab faces (shop.js fitTabs picks the first that fits without truncation):
   full  = icon + name + count · label = name + count · icon = icon over the count · wrap = icon tabs, two rows */
.shop[data-tabs="label"] .shop-tab .gt-ic { display: none; }
.shop[data-tabs="icon"] .shop-tab .shop-tab-label,
.shop[data-tabs="wrap"] .shop-tab .shop-tab-label { display: none; }
.shop[data-tabs="icon"] .shop-tab .gt-face,
.shop[data-tabs="wrap"] .shop-tab .gt-face { flex-direction: column; justify-content: center; gap: 1px; padding: 2px 6px 3px; }
.shop[data-tabs="icon"] .shop-tab .shop-tab-txt,
.shop[data-tabs="wrap"] .shop-tab .shop-tab-txt { align-items: center; }
.shop[data-tabs="icon"] .shop-tab .gt-ic,
.shop[data-tabs="wrap"] .shop-tab .gt-ic { width: 24px; height: 24px; margin: 0; }
.shop[data-tabs="icon"] .shop-tab .shop-tab-count,
.shop[data-tabs="wrap"] .shop-tab .shop-tab-count { font-size: 11px; }
.shop[data-tabs="icon"] .shop-tab[data-tab="mythic"],
.shop[data-tabs="wrap"] .shop-tab[data-tab="mythic"] { flex-grow: 1; }
.shop[data-tabs="icon"] .shop-tab[data-tab="mythic"]::after,
.shop[data-tabs="wrap"] .shop-tab[data-tab="mythic"]::after { right: 10px; font-size: 12px; }
.shop[data-tabs="icon"] .shop-tab.gem-tab, .shop[data-tabs="wrap"] .shop-tab.gem-tab { min-width: 44px; height: 48px; }
.shop[data-tabs="wrap"] .shop-tabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
.shop[data-tabs="scroll"] .shop-tab .shop-tab-label { display: none; }
.shop[data-tabs="scroll"] .shop-tab .gt-face { flex-direction: column; justify-content: center; gap: 1px; padding: 2px 6px 3px; }
.shop[data-tabs="scroll"] .shop-tab .shop-tab-txt { align-items: center; }
.shop[data-tabs="scroll"] .shop-tab .gt-ic { width: 24px; height: 24px; margin: 0; }
.shop[data-tabs="scroll"] .shop-tab .shop-tab-count { font-size: 11px; }
.shop[data-tabs="scroll"] .shop-tab.gem-tab { flex: 0 0 50px; min-width: 50px; height: 48px; }
.shop[data-tabs="scroll"] .shop-tab[data-tab="mythic"]::after { right: 10px; font-size: 12px; }
.shop[data-tabs="wrap"] .shop-tab.gem-tab { flex: 1 1 calc(33.333% - 4px); }