.shop-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.shop-balance{background:#FFE27A;color:var(--ink);border:3px solid var(--bark);border-radius:999px;padding:6px 14px;font-weight:800;box-shadow:3px 3px 0 var(--bark)}
.shop-balance b{font-family:var(--font-display);font-weight:400;font-size:1.1rem}
.shop-note{margin:8px 0 12px;color:var(--on-bg-soft);font-weight:800}

.shop-stage{border:4px solid var(--bark);border-radius:20px;overflow:hidden;box-shadow:6px 6px 0 var(--bark);max-width:460px;margin:0 auto}
.shop-stage svg{display:block;width:100%;height:auto}
.shop-dino .rexy-tail{transform-box:fill-box;transform-origin:100% 50%;animation:wag 3s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}70%{transform:rotate(-3deg)}}

.shop-action{text-align:center;margin:14px auto 18px;min-height:64px;max-width:460px}
.shop-action p{margin:0 0 10px;font-size:1.1rem}
.shop-need{color:#FFB4A2;font-weight:800}
.shop-off{background:var(--card);color:var(--ink)}

.shop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.shop-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);border:3px solid var(--bark);border-radius:12px;
  background:var(--card);color:var(--ink);font-family:var(--font-display);font-size:.9rem}
.shop-tab span{font-size:1.1rem}
.shop-tab.on{background:var(--leaf)}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.shop-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border:3px solid var(--bark);border-radius:16px;
  background:var(--card);color:var(--ink);box-shadow:4px 4px 0 var(--bark);text-align:center}
.shop-card svg{width:76px;height:76px;border-radius:50%;background:#DCEFF4;border:2px solid var(--bark)}
.shop-name{font-weight:800;font-size:.9rem;line-height:1.15}
.shop-tag{font-weight:800;font-size:.85rem;color:var(--bark);background:#FFE27A;border-radius:999px;padding:1px 8px}
.shop-card.wearing{background:#dff3c4}
.shop-card.wearing .shop-tag{background:var(--leaf)}
.shop-card.sel{box-shadow:0 0 0 4px var(--lava),4px 4px 0 var(--bark)}
.shop-card.pricey .shop-tag{background:#e9dfc8;color:#8a7457}

/* your dino in the top bar */
.me-badge{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#DCEFF4;border:3px solid var(--sand);display:block}
.me-badge svg{width:100%;height:100%;display:block}

/* naming */
.shop-stage{position:relative}
.shop-dino-name{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;
  background:var(--card);color:var(--fern);border:3px solid var(--bark);border-radius:999px;padding:4px 14px;
  font-family:var(--font-display);font-size:1.05rem;box-shadow:3px 3px 0 var(--bark)}
.shop-naming{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px auto 0;max-width:460px}
.shop-naming-label{font-weight:800;color:var(--on-bg)}
.shop-select{min-height:var(--tap);padding:0 10px;border:3px solid var(--bark);border-radius:12px;background:var(--card);
  color:var(--ink);font:inherit;font-weight:800;max-width:42%}
.shop-dice{width:var(--tap);height:var(--tap);border:3px solid var(--bark);border-radius:12px;background:#FFE27A;font-size:1.3rem;box-shadow:3px 3px 0 var(--bark)}

/* paint / skin color swatches */
.shop-paint{max-width:460px;margin:-4px auto 18px;text-align:center}
.shop-paint-label{display:block;font-weight:800;color:var(--on-bg);margin-bottom:8px}
.shop-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.shop-swatch{width:var(--tap);height:var(--tap);border-radius:50%;border:3px solid var(--bark);padding:0;
  box-shadow:2px 2px 0 var(--bark);font-size:1rem;display:grid;place-items:center;color:#fff}
.shop-swatch.on{box-shadow:0 0 0 4px var(--leaf),2px 2px 0 var(--bark)}
.shop-swatch.locked{opacity:.75;font-size:.85rem}
.shop-swatch.reset{background:var(--card);color:var(--ink);font-weight:800;font-size:1.2rem}