/* ---------- wallet pill ---------- */
#coinBtn{display:flex;align-items:center;gap:5px;padding:6px 12px 6px 9px;margin-left:2px;border-radius:999px;background:linear-gradient(180deg,#fff3c4,#ffe08a);font-weight:800;font-size:14px;color:#6a4a10;box-shadow:inset 0 0 0 1px rgba(160,110,20,.25);font-variant-numeric:tabular-nums}
#coinBtn:hover{filter:brightness(1.05)}

/* ---------- collection book tabs ---------- */
.dexTabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.dexTabs button{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--sub);background:rgba(60,40,20,.07)}
.dexTabs button.on{background:var(--ink);color:#fff}

/* ---------- class reward + catch price ---------- */
#done .reward{font-weight:800;color:#a8740f;margin:-6px 0 14px;font-size:15px}
#done .reward:empty{display:none}
#catchCard .price{font-size:13px;font-weight:800;color:#a8740f;margin-top:4px}

/* ---------- shop panel ---------- */
#shop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 140px);display:flex;flex-direction:column;border-radius:26px;padding:18px;animation:fadeIn .3s}
.sh-h{display:flex;align-items:center;gap:12px}
.sh-av{width:46px;height:46px;border-radius:50%;background:#ffe1cc;display:grid;place-items:center;font-size:24px;flex:none}
.sh-h h3{font-size:18px;font-weight:800}
.sh-h span{font-size:12.5px;color:var(--sub)}
.sh-h button{margin-left:auto;flex:none}
.sh-wallet{margin:12px 0 10px;padding:9px 14px;border-radius:14px;background:linear-gradient(180deg,#fff6d6,#ffe9a8);font-weight:700;color:#6a4a10;font-size:14px}
.sh-wallet b{font-size:18px}
.sh-tabs{align-self:flex-start;margin-bottom:12px}
#shopBody{overflow:auto;min-height:120px;padding:2px}
.sh-empty{text-align:center;color:var(--sub);font-size:13.5px;line-height:1.7;padding:28px 10px}
.sh-all{width:100%;padding:12px;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;margin-bottom:10px}
.sh-list{display:flex;flex-direction:column;gap:6px}
.sh-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.6);border-radius:14px;padding:6px 8px}
.sh-row img{width:52px;height:40px;object-fit:contain;flex:none}
.sh-n{flex:1;min-width:0}
.sh-n b{display:block;font-size:13.5px}
.sh-n span{font-size:11.5px;color:var(--sub)}
.sh-row button{padding:7px 12px;border-radius:999px;background:linear-gradient(180deg,#fff3c4,#ffe08a);font-weight:800;font-size:12.5px;color:#6a4a10;flex:none}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sh-card{background:rgba(255,255,255,.62);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:4px;text-align:center}
.sh-card .sh-ico{font-size:30px}
.sh-card b{font-size:14px}
.sh-card span{font-size:12px;color:var(--sub);flex:1;line-height:1.45}
.sh-card button{margin-top:6px;padding:8px;border-radius:12px;background:linear-gradient(180deg,#fff3c4,#ffe08a);font-weight:800;font-size:13px;color:#6a4a10}
.sh-card button:disabled{background:rgba(60,40,20,.08);color:var(--sub);cursor:default}
.sh-card button.on{background:var(--ink);color:#fff}
.sh-card.own{box-shadow:inset 0 0 0 2px rgba(60,207,122,.5)}
.sh-card.shake{animation:shake .4s}

@media (max-width:860px){
  #coinBtn{padding:5px 10px 5px 7px;font-size:13px}
  #shop{max-height:calc(100% - 110px);padding:14px}
  .sh-h h3{font-size:16px}.sh-h span{display:none}
  .sh-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .sh-card{padding:10px}.sh-card .sh-ico{font-size:26px}
}