/* shop.css — the coin counter (js/materials.js) and the trade window / material pouch (js/shop.js). Sizes in --u like
   style.css. */

/* ---------- the coin counter (above the menu buttons) ---------- */
.coins {
  position: absolute; right: calc(20 * var(--u)); bottom: calc(92 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(16 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(16 * var(--u));
  background: linear-gradient(#3d3848, #2e2a38); border: calc(4 * var(--u)) solid var(--ink);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55, 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}
.coins img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.coins b, .sh-coins b {
  font: 800 calc(26 * var(--u)) / 1.3 'Baloo 2', sans-serif; color: #ffd873; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
}
.coins.bump, .sh-coins.bump { animation: coinbump 0.35s ease; }
@keyframes coinbump { 40% { transform: scale(1.14); } }
.coins-pop {
  position: absolute; right: calc(10 * var(--u)); top: calc(-8 * var(--u)); pointer-events: none; white-space: nowrap;
  font: 800 calc(24 * var(--u)) 'Baloo 2', sans-serif; color: #ffe28a; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
  animation: coinpop 1.25s ease forwards;
}
@keyframes coinpop { 0% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-40 * var(--u))); } }
@media (max-aspect-ratio: 7/5) { .coins { bottom: calc(246 * var(--u)); } }

/* ---------- the trade window (B) ---------- */
.card.shop { width: min(96vw, calc(1120 * var(--u))); }
.card.shop .ptitle { gap: calc(14 * var(--u)); }
#sh-title { margin-right: auto; }
.sh-coins {
  display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(6 * var(--u)); border-radius: calc(14 * var(--u));
  background: rgba(20, 18, 30, 0.5); border: calc(3 * var(--u)) solid var(--ink);
}
.sh-coins img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.sh-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.sh-tabs button {
  cursor: pointer; padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #4a4555; color: #f4efe6; font: 500 calc(19 * var(--u)) / 1.7 'Mitr', sans-serif;
}
.sh-tabs button.on { background: #ffd873; color: var(--ink); }
.sh-tabs button:disabled { opacity: 0.4; cursor: default; }
.sh-where { margin-left: auto; font-size: calc(16 * var(--u)); color: #cfc6b8; }
.sh-wrap { display: grid; grid-template-columns: 1fr calc(360 * var(--u)); gap: calc(18 * var(--u)); }
.sh-left { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(82 * var(--u)), 1fr)); gap: calc(8 * var(--u)); max-height: calc(440 * var(--u)); overflow-y: auto; padding: calc(6 * var(--u)); }
.sh-cell {
  position: relative; aspect-ratio: 1; padding: calc(6 * var(--u)); cursor: pointer; border-radius: calc(12 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#56617f, #414b66); box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55;
}
.sh-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sh-cell b {
  position: absolute; right: calc(4 * var(--u)); bottom: calc(-4 * var(--u)); font: 800 calc(20 * var(--u)) 'Baloo 2', sans-serif; color: #fff;
  -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
}
.sh-cell:hover { transform: translateY(calc(-3 * var(--u))); }
.sh-cell.none { background: linear-gradient(#45485e, #363a4f); }
.sh-cell.none img { opacity: 0.55; }
.sh-cell.locked { background: #2b2836; box-shadow: inset 0 0 0 calc(3 * var(--u)) #4a4555; }
.sh-cell.locked img, .sh-ihead img.locked { filter: brightness(0); opacity: 0.35; }
.sh-cell.rare { box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffd873, 0 0 calc(10 * var(--u)) rgba(255, 216, 115, 0.45); }
.sh-cell.sel { outline: calc(3 * var(--u)) solid #fff3cf; outline-offset: calc(2 * var(--u)); }
.sh-total { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(17 * var(--u)); color: #cfc6b8; }
.sh-total em { font-style: normal; color: #ffd873; font-weight: 600; }
.sh-total .big { margin: 0 0 0 auto; padding: calc(2 * var(--u)) calc(22 * var(--u)); font-size: calc(19 * var(--u)); white-space: nowrap; }
.big:disabled { opacity: 0.4; cursor: default; }
.sh-info {
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(20, 18, 30, 0.45);
  border: calc(3 * var(--u)) solid var(--ink); font-size: calc(18 * var(--u)); line-height: 1.5; display: flex; flex-direction: column; gap: calc(6 * var(--u));
}
.sh-ihead { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.sh-ihead img { width: calc(84 * var(--u)); height: calc(84 * var(--u)); flex: none; }
.sh-iname { font: 700 calc(26 * var(--u)) / 1.25 'Mitr', sans-serif; color: #fff3cf; }
.sh-iname.rare { color: #ffd873; }
.sh-from { font-size: calc(16 * var(--u)); color: #9fe0ff; }
.sh-desc { color: #cfc6b8; font-style: italic; }
.sh-line b { color: #ffd873; font-weight: 600; }
.sh-hint { color: #ffd873; }
.sh-btns { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.sh-btns button {
  cursor: pointer; flex: 1; padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #ffd873; color: var(--ink); font: 700 calc(18 * var(--u)) / 1.6 'Mitr', sans-serif; white-space: nowrap;
}
.sh-btns button:disabled { opacity: 0.4; cursor: default; }
.sh-buy { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.sh-pot {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'img t' 'img price' 'btns btns'; gap: calc(6 * var(--u)) calc(14 * var(--u));
  align-items: center; padding: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: linear-gradient(#4a4555, #37323f); box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55;
}
.sh-pot > img { grid-area: img; width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
.sh-pot-t { grid-area: t; display: flex; flex-direction: column; font-size: calc(16 * var(--u)); line-height: 1.45; color: #cfc6b8; }
.sh-pot-t b { font: 700 calc(24 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff3cf; }
.sh-price { grid-area: price; display: flex; align-items: center; gap: calc(4 * var(--u)); font: 800 calc(24 * var(--u)) 'Baloo 2', sans-serif; color: #ffd873; }
.sh-price img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.sh-pot .sh-btns { grid-area: btns; }
@media (max-aspect-ratio: 7/5) {
  .sh-wrap { grid-template-columns: 1fr; }
  .sh-buy { grid-template-columns: 1fr; }
}
/* the skill reset at the merchant */
.sh-reset {
  display: grid; grid-template-columns: auto 1fr auto; gap: calc(14 * var(--u)); align-items: center; padding: calc(16 * var(--u));
  border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#4a4555, #37323f);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55;
}
.sh-reset > img { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
.sh-reset > div { display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.45; color: #cfc6b8; }
.sh-reset b { font: 700 calc(24 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff3cf; }
.sh-reset em { font-style: normal; font-weight: 700; color: #ffd873; }
.sh-reset .big:disabled { opacity: 0.4; cursor: default; }