/* p3_vend.css — the my-shop window #vend and someone's shop #vbuy (mockup p3_vend A, js/p3_vend.js). Sizes in --m = one
   pixel of the mockup (its window is 1312 x 847 px) so the parts keep the mockup's proportions; --m follows --u. The
   stall painting is positioned in --bh (its height) so the counter, the sign and the slots stay on the painted wood.
   ID selectors: this loads after css/shop.css and css/kskin.css and wins over both. */

#vend, #vbuy { --m: calc(1.14 * var(--u)); }
#vend > .card.p3v-win, #vbuy > .card.p3v-win {
  --bh: calc(780 * var(--m)); --bs: calc(var(--bh) * 1.05); --by: calc(var(--bh) * -0.05); /* (the painting a little bigger and lifted: the counter higher) */
  width: min(97vw, calc(1312 * var(--m))); max-height: 97vh; padding: 0; overflow-x: hidden; overflow-y: auto;
  border-width: calc(5 * var(--m)); border-radius: calc(26 * var(--m));
  box-shadow: inset 0 0 0 calc(4 * var(--m)) #74b6ec, 0 calc(10 * var(--m)) 0 rgba(0, 0, 0, 0.3);
}
#vend > .card.p3v-win > .vd-body, #vbuy > .card.p3v-win > .vd-body { margin: 0; padding: 0; display: block; }

/* ---------- the title bar: the name in the middle, the coins and the close at the right ---------- */
#vend .p3v-win .ptitle, #vbuy .p3v-win .ptitle {
  position: sticky; height: calc(67 * var(--m)); margin: 0; padding: 0 calc(12 * var(--m)) 0 calc(60 * var(--m)); gap: calc(22 * var(--m)); justify-content: flex-end;
  border-bottom-width: calc(4 * var(--m)); font-size: calc(42 * var(--m)); -webkit-text-stroke-width: calc(8 * var(--m));
}
#vend .p3v-win .ptitle::before, #vbuy .p3v-win .ptitle::before { left: calc(20 * var(--m)); width: calc(20 * var(--m)); height: calc(20 * var(--m)); margin-top: calc(-10 * var(--m)); border-width: calc(3 * var(--m)); }
#vend .p3v-win .ptitle .vd-t, #vbuy .p3v-win .ptitle .vd-t {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); max-width: 46%; margin: 0; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
#vend .p3v-win .sh-coins, #vbuy .p3v-win .sh-coins {
  display: flex; align-items: center; gap: calc(12 * var(--m)); min-width: calc(190 * var(--m)); height: calc(48 * var(--m)); padding: 0 calc(22 * var(--m)) 0 calc(5 * var(--m));
  border-radius: calc(24 * var(--m)); border-width: calc(3.5 * var(--m));
}
#vend .p3v-win .sh-coins img, #vbuy .p3v-win .sh-coins img { width: calc(40 * var(--m)); height: calc(40 * var(--m)); }
#vend .p3v-win .sh-coins b, #vbuy .p3v-win .sh-coins b { font-size: calc(27 * var(--m)); margin-left: auto; }
#vend .p3v-win .vd-x, #vbuy .p3v-win .vd-x { width: calc(48 * var(--m)); height: calc(48 * var(--m)); border-width: calc(4 * var(--m)); font-size: calc(24 * var(--m)); -webkit-text-stroke-width: calc(3.5 * var(--m)); }

/* ---------- two halves: the bag on the left, the stall on the right ---------- */
#vend .p3v, #vbuy .p3v { display: grid; grid-template-columns: calc(592 * var(--m)) minmax(0, 1fr); height: var(--bh); font: 400 calc(18 * var(--m)) / 1.35 'Mitr', sans-serif; color: var(--ink); }
#vend .p3v-left, #vbuy .p3v-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: calc(13 * var(--m)) calc(16 * var(--m)) calc(20 * var(--m)) calc(28 * var(--m)); box-sizing: border-box; }
#vend .p3v-name { display: flex; align-items: center; gap: calc(12 * var(--m)); }
#vend .p3v-name label { flex: none; font: 700 calc(24 * var(--m)) / 1 'Mitr', sans-serif; color: var(--ink); }
#vend .p3v-name input {
  flex: 1; min-width: 0; height: calc(48 * var(--m)); padding: 0 calc(14 * var(--m)); box-sizing: border-box; border-radius: calc(14 * var(--m));
  border: calc(3 * var(--m)) solid var(--ink); background: #fffdf6; color: var(--ink); font: 400 calc(23 * var(--m)) / 1 'Mitr', sans-serif; outline: none;
}
#vend .p3v-name input:focus { box-shadow: 0 0 0 calc(3 * var(--m)) #7fcaf8; }
#vend .p3v-h, #vbuy .p3v-h { display: flex; align-items: baseline; gap: calc(12 * var(--m)); margin: calc(16 * var(--m)) 0 calc(8 * var(--m)); font: 700 calc(31 * var(--m)) / 1.15 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; }
#vend .p3v-h small, #vbuy .p3v-h small { font-size: calc(17 * var(--m)); font-weight: 400; color: #6a6078; overflow: hidden; text-overflow: ellipsis; }

/* the folder tabs */
#vend .p3v-tabs { display: flex; gap: calc(6 * var(--m)); padding: 0 calc(4 * var(--m)); border-bottom: calc(4 * var(--m)) solid var(--ink); }
#vend .p3v-tabs button {
  flex: 1 1 auto; height: calc(48 * var(--m)); margin-bottom: calc(-4 * var(--m)); padding: 0 calc(12 * var(--m)); cursor: pointer; white-space: nowrap;
  border: calc(3.5 * var(--m)) solid var(--ink); border-bottom-width: calc(4 * var(--m)); border-radius: calc(14 * var(--m)) calc(14 * var(--m)) 0 0;
  background: linear-gradient(#fffaf0, #efe4c9); color: var(--ink); font: 700 calc(21 * var(--m)) / 1 'Mitr', sans-serif;
}
#vend .p3v-tabs button.on { background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--m)) var(--ink); paint-order: stroke fill; border-bottom-color: #3b8fdc; }

/* the bag's grid */
#vend .p3v-grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, calc(122 * var(--m)))); grid-auto-rows: calc(114 * var(--m)); align-content: start; justify-content: space-evenly; overflow-x: hidden;
  gap: calc(15 * var(--m)) calc(10 * var(--m)); margin-top: calc(6 * var(--m)); padding: calc(16 * var(--m)) calc(8 * var(--m)); overflow-y: auto; box-sizing: border-box;
  background: #efe4c9; border: calc(3 * var(--m)) solid #d4c6a6; border-radius: calc(18 * var(--m)); scrollbar-width: thin; scrollbar-color: #74b6ec transparent;
}
#vend .p3v-cell {
  position: relative; display: grid; place-items: center; padding: 0; cursor: pointer; box-sizing: border-box; border-radius: calc(14 * var(--m));
  border: calc(3.5 * var(--m)) solid var(--ink); background: linear-gradient(#fffaf0, #f1e5c7); box-shadow: inset 0 calc(-4 * var(--m)) 0 rgba(42, 36, 53, 0.1);
}
#vend .p3v-cell.t-blue { background: linear-gradient(#e6f4ff, #a9d3f5); }
#vend .p3v-cell.t-lav { background: linear-gradient(#f3eaff, #cdb6f2); }
#vend .p3v-cell.t-gold { background: linear-gradient(#fff6d6, #f7cf6b); }
#vend .p3v-cell.t-pink { background: linear-gradient(#fff0f3, #f6b9c8); }
#vend .p3v-cell.t-mint { background: linear-gradient(#ecfaee, #b5e6be); }
#vend .p3v-cell img { width: calc(80 * var(--m)); height: calc(80 * var(--m)); object-fit: contain; filter: drop-shadow(0 calc(2 * var(--m)) 0 rgba(42, 36, 53, 0.25)); }
#vend .p3v-cell > b {
  position: absolute; right: calc(6 * var(--m)); bottom: calc(6 * var(--m)); min-width: calc(34 * var(--m)); padding: 0 calc(8 * var(--m)); box-sizing: border-box;
  border-radius: calc(13 * var(--m)); background: #2a2a44; color: #fff; text-align: center; font: 700 calc(18 * var(--m)) / calc(26 * var(--m)) 'Baloo 2', 'Mitr', sans-serif;
}
#vend .p3v-cell.sel { box-shadow: 0 0 0 calc(3 * var(--m)) #fff, 0 0 0 calc(6.5 * var(--m)) #3b8fdc; }
#vend .p3v-cell .p3v-in {
  position: absolute; left: calc(5 * var(--m)); top: calc(5 * var(--m)); width: calc(28 * var(--m)); height: calc(28 * var(--m)); box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(#5fb3f2, #2f7fd0); border: calc(2.5 * var(--m)) solid #fff; box-shadow: 0 0 0 calc(2 * var(--m)) var(--ink);
}
#vend .p3v-cell .p3v-in::after { content: ''; position: absolute; left: 30%; top: 14%; width: 26%; height: 46%; border: solid #fff; border-width: 0 calc(3.5 * var(--m)) calc(3.5 * var(--m)) 0; transform: rotate(40deg); }
#vend .p3v-cell:hover { filter: brightness(1.05); }
/* account-bound items (vend.js isBound: founder packs): shown locked, a click only says why */
#vend .p3v-cell.bd { cursor: not-allowed; background: linear-gradient(#ece6da, #cfc6b4); }
#vend .p3v-cell.bd img { filter: grayscale(0.7) opacity(0.6); }
#vend .p3v-cell.bd:hover { filter: none; }
#vend .p3v-note.warn { color: #c0392b; font-weight: 600; }
#vend .p3v-cell .p3v-bd {
  position: absolute; left: 50%; bottom: calc(5 * var(--m)); transform: translateX(-50%); padding: 0 calc(8 * var(--m)); border-radius: calc(10 * var(--m)); white-space: nowrap;
  background: #6b4a8a; color: #fff; border: calc(2 * var(--m)) solid var(--ink); font: 600 calc(14 * var(--m)) / calc(22 * var(--m)) 'Mitr', sans-serif; font-style: normal;
}
#vend .p3v-empty, #vbuy .p3v-empty { grid-column: 1 / -1; padding: calc(30 * var(--m)) calc(10 * var(--m)); text-align: center; color: #6a6078; font: 500 calc(20 * var(--m)) / 1.5 'Mitr', sans-serif; }
#vbuy .p3v-empty.big { flex: 1; display: grid; place-items: center; font-size: calc(26 * var(--m)); }

/* ---------- the stall ---------- */
#vend .p3v-stall, #vbuy .p3v-stall { position: relative; min-width: 0; height: var(--bh); overflow: hidden; border-left: calc(4 * var(--m)) solid var(--ink); background: #2a2440; }
#vend .p3v-back, #vbuy .p3v-back, #vend .p3v-front, #vbuy .p3v-front {
  position: absolute; left: 0; right: 0; background: url('../assets/p3/vend/stall.jpg') no-repeat 50% var(--by) / auto var(--bs);
}
#vend .p3v-back, #vbuy .p3v-back { top: 0; bottom: 0; }
/* the counter's top edge is at 47.6% of the painting */
#vend .p3v-front, #vbuy .p3v-front { top: calc(var(--bs) * 0.476 + var(--by)); bottom: 0; background-position: 50% calc(var(--bs) * -0.476); }
#vend .p3v-hero, #vbuy .p3v-hero { position: absolute; left: 50%; top: calc(var(--bh) * 0.17); width: calc(var(--bh) * 0.6); height: calc(var(--bh) * 0.55); transform: translateX(-50%); }
#vend .p3v-sign, #vbuy .p3v-sign {
  position: absolute; left: 50%; top: calc(var(--bs) * 0.128 + var(--by)); width: calc(var(--bs) * 0.36); height: calc(var(--bs) * 0.078); transform: translateX(-50%);
  display: grid; place-items: center; color: var(--ink); font: 600 calc(26 * var(--m)) / 1 'Mitr', sans-serif; text-align: center;
}
#vend .p3v-sign span, #vbuy .p3v-sign span { max-width: 100%; padding: 0 calc(10 * var(--m)); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 calc(1.5 * var(--m)) 0 rgba(255, 240, 210, 0.6); }
#vend .p3v-sign b, #vbuy .p3v-sign b { font-family: 'Baloo 2', 'Mitr', sans-serif; font-weight: 800; }
#vend .p3v-lower, #vbuy .p3v-lower {
  position: absolute; left: calc(22 * var(--m)); right: calc(22 * var(--m)); top: calc(var(--bs) * 0.54 + var(--by)); bottom: calc(8 * var(--m));
  display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--m));
}
#vend .p3v-slots, #vbuy .p3v-slots { align-self: stretch; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc(112 * var(--m)); gap: calc(9 * var(--m)) calc(10 * var(--m)); }

/* a sale slot on the counter: cream card, a paper price tag, a little x to take it back */
#vend .p3v-slot, #vbuy .p3v-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: calc(4 * var(--m)) calc(4 * var(--m)) calc(5 * var(--m)); box-sizing: border-box;
  border-radius: calc(12 * var(--m)); border: calc(3 * var(--m)) solid #4a3322; background: linear-gradient(#fbf3df, #efe1c0);
  box-shadow: inset 0 0 0 calc(2 * var(--m)) rgba(255, 255, 255, 0.55), 0 calc(3 * var(--m)) 0 rgba(30, 18, 10, 0.35);
}
#vend .p3v-slot.empty, #vbuy .p3v-slot.empty { background: rgba(251, 243, 223, 0.86); box-shadow: inset 0 0 0 calc(5 * var(--m)) rgba(251, 243, 223, 0.86), inset 0 0 0 calc(7 * var(--m)) rgba(150, 120, 80, 0.55); }
#vend .p3v-slot.empty::after, #vbuy .p3v-slot.empty::after { content: ''; position: absolute; inset: calc(8 * var(--m)); border: calc(2 * var(--m)) dashed rgba(140, 110, 70, 0.6); border-radius: calc(8 * var(--m)); }
#vend .p3v-slot.full, #vbuy .p3v-slot.full { cursor: pointer; }
#vend .p3v-slot.ro { cursor: default; }
#vend .p3v-slot.sel, #vbuy .p3v-slot.sel { border-color: var(--ink); box-shadow: 0 0 0 calc(3 * var(--m)) #fff, 0 0 0 calc(6.5 * var(--m)) #3b8fdc, 0 calc(3 * var(--m)) 0 rgba(30, 18, 10, 0.35); }
#vend .p3v-slot > img, #vbuy .p3v-slot > img { flex: none; width: calc(58 * var(--m)); height: calc(58 * var(--m)); object-fit: contain; filter: drop-shadow(0 calc(2 * var(--m)) 0 rgba(42, 36, 53, 0.25)); }
#vend .p3v-slot > b, #vbuy .p3v-slot > b { max-width: 100%; font: 700 calc(16 * var(--m)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vend .p3v-line, #vbuy .p3v-line { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--m)); max-width: 100%; margin-top: auto; }
#vend .p3v-line em, #vbuy .p3v-line em { flex: none; font: 600 calc(14 * var(--m)) / 1 'Mitr', sans-serif; font-style: normal; color: #5d4a3a; }
#vend .p3v-tag, #vbuy .p3v-tag {
  display: inline-flex; align-items: center; gap: calc(2 * var(--m)); min-width: 0; padding: calc(1 * var(--m)) calc(6 * var(--m)) calc(1 * var(--m)) calc(3 * var(--m));
  background: #fffaf0; border: calc(1.5 * var(--m)) solid #b89a6a; border-radius: calc(3 * var(--m)) calc(8 * var(--m)) calc(8 * var(--m)) calc(3 * var(--m));
  transform: rotate(-3deg); box-shadow: 0 calc(1.5 * var(--m)) 0 rgba(60, 40, 20, 0.3);
  font: 800 calc(15 * var(--m)) / 1.2 'Baloo 2', 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden;
}
#vend .p3v-tag img, #vbuy .p3v-tag img { flex: none; width: calc(17 * var(--m)); height: calc(17 * var(--m)); }
#vend .p3v-x {
  position: absolute; right: calc(-8 * var(--m)); top: calc(-8 * var(--m)); z-index: 1; width: calc(28 * var(--m)); height: calc(28 * var(--m)); padding: 0; cursor: pointer;
  border-radius: 50%; border: calc(2.5 * var(--m)) solid #fff; box-shadow: 0 0 0 calc(2 * var(--m)) var(--ink); background: linear-gradient(#ff9d9d, #d6424f);
  color: #fff; font: 800 calc(14 * var(--m)) / 1 'Baloo 2', sans-serif;
}
#vend .p3v-slot.full:hover, #vbuy .p3v-slot.full:hover { filter: brightness(1.05); }

/* the note and the big button under the counter */
#vend .p3v-note, #vbuy .p3v-note {
  align-self: stretch; display: grid; place-items: center; min-height: calc(54 * var(--m)); padding: calc(4 * var(--m)) calc(16 * var(--m)); box-sizing: border-box; text-align: center;
  border-radius: calc(12 * var(--m)); background: rgba(251, 245, 230, 0.95); border: calc(2.5 * var(--m)) solid #b89a6a; color: #3a3350; font: 500 calc(17 * var(--m)) / 1.25 'Mitr', sans-serif;
}
#vbuy .p3v-note.ok { color: #2f8a36; font-weight: 600; }
#vbuy .p3v-note.warn { color: #c8323d; font-weight: 600; }
#vend .p3v-go, #vbuy .p3v-go {
  position: relative; flex: none; min-width: calc(392 * var(--m)); max-width: 100%; height: calc(60 * var(--m)); padding: 0 calc(24 * var(--m)); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: calc(20 * var(--m)); border: calc(4.5 * var(--m)) solid var(--ink); background: linear-gradient(#ffe98d 0%, #ffcf3f 50%, #f0a522 100%); color: var(--ink);
  font: 700 calc(32 * var(--m)) / 1 'Mitr', sans-serif; box-shadow: inset 0 calc(4 * var(--m)) 0 rgba(255, 255, 255, 0.55), inset 0 calc(-5 * var(--m)) 0 rgba(150, 80, 0, 0.25), 0 calc(5 * var(--m)) 0 rgba(0, 0, 0, 0.35);
}
#vend .p3v-go small, #vbuy .p3v-go small { font-size: calc(19 * var(--m)); font-weight: 500; }
#vend .p3v-go.grey, #vbuy .p3v-go.grey { background: linear-gradient(#e6e4ee, #b9b6c8); }
#vend .p3v-go:disabled, #vbuy .p3v-go:disabled { cursor: default; filter: grayscale(0.7) brightness(0.92); }
#vend .p3v-go:not(:disabled):hover, #vbuy .p3v-go:not(:disabled):hover { filter: brightness(1.06); }

/* the card of a picked slot: how many, the price, take it back */
#vend .p3v-pop {
  position: absolute; z-index: 3; left: calc(var(--px) * var(--m)); bottom: calc(var(--bh) - var(--bs) * 0.54 - var(--by) + 6 * var(--m)); width: calc(340 * var(--m)); box-sizing: border-box;
  padding: calc(10 * var(--m)) calc(14 * var(--m)) calc(12 * var(--m)); border-radius: calc(16 * var(--m)); border: calc(3.5 * var(--m)) solid var(--ink); background: #fffaf0;
  box-shadow: 0 calc(6 * var(--m)) 0 rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: calc(8 * var(--m));
}
#vend .p3v-pop-h { display: flex; align-items: center; gap: calc(10 * var(--m)); }
#vend .p3v-pop-h img { flex: none; width: calc(48 * var(--m)); height: calc(48 * var(--m)); object-fit: contain; }
#vend .p3v-pop-h div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#vend .p3v-pop-h b { font: 700 calc(20 * var(--m)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vend .p3v-pop-h small { font: 400 calc(15 * var(--m)) / 1.3 'Mitr', sans-serif; color: #6a6078; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#vend .p3v-pop-x { flex: none; align-self: flex-start; width: calc(32 * var(--m)); height: calc(32 * var(--m)); padding: 0; cursor: pointer; border-radius: 50%; border: calc(3 * var(--m)) solid var(--ink); background: linear-gradient(#ff9d9d, #e0525e); color: #fff; font: 800 calc(15 * var(--m)) / 1 'Baloo 2', sans-serif; }
#vend .p3v-pop-r { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--m)); font: 600 calc(19 * var(--m)) / 1.2 'Mitr', sans-serif; }
#vend .p3v-pop-r em { font-style: normal; font-weight: 500; color: #6a6078; font-size: calc(16 * var(--m)); }
#vend .p3v-step, #vbuy .p3v-step { display: inline-flex; align-items: center; gap: calc(5 * var(--m)); }
#vend .p3v-step button, #vbuy .p3v-step button {
  width: calc(36 * var(--m)); height: calc(36 * var(--m)); padding: 0; cursor: pointer; border-radius: calc(10 * var(--m)); border: calc(3 * var(--m)) solid var(--ink);
  background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; font: 800 calc(22 * var(--m)) / 1 'Baloo 2', sans-serif; -webkit-text-stroke: calc(3 * var(--m)) var(--ink); paint-order: stroke fill;
}
#vend .p3v-step input, #vend .p3v-price input {
  width: calc(76 * var(--m)); height: calc(38 * var(--m)); padding: 0 calc(8 * var(--m)); box-sizing: border-box; text-align: center; border-radius: calc(10 * var(--m));
  border: calc(3 * var(--m)) solid var(--ink); background: #fff; color: var(--ink); font: 700 calc(20 * var(--m)) / 1 'Baloo 2', 'Mitr', sans-serif; outline: none;
}
#vend .p3v-step input:focus, #vend .p3v-price input:focus { box-shadow: 0 0 0 calc(3 * var(--m)) #7fcaf8; }
#vend .p3v-price { display: inline-flex; align-items: center; gap: calc(6 * var(--m)); }
#vend .p3v-price img { width: calc(28 * var(--m)); height: calc(28 * var(--m)); }
#vend .p3v-price input { width: calc(130 * var(--m)); text-align: right; }
#vend .p3v-pop-f { display: flex; gap: calc(10 * var(--m)); justify-content: space-between; margin-top: calc(2 * var(--m)); }
#vend .p3v-pop-f button {
  height: calc(40 * var(--m)); padding: 0 calc(16 * var(--m)); cursor: pointer; border-radius: calc(12 * var(--m)); border: calc(3 * var(--m)) solid var(--ink);
  font: 700 calc(18 * var(--m)) / 1 'Mitr', sans-serif;
}
#vend .p3v-pop-del { background: linear-gradient(#ffd6d6, #f39a9f); color: var(--ink); }
#vend .p3v-pop-ok { min-width: calc(110 * var(--m)); background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--m)) var(--ink); paint-order: stroke fill; }

/* ---------- lists (my open shop, someone's shop) ---------- */
#vend .p3v-openbox, #vbuy .p3v-seller {
  display: flex; flex-direction: column; gap: calc(6 * var(--m)); padding: calc(12 * var(--m)) calc(16 * var(--m)); border-radius: calc(16 * var(--m));
  background: #fffaf0; border: calc(3 * var(--m)) solid var(--ink); font: 500 calc(20 * var(--m)) / 1.35 'Mitr', sans-serif; color: #4a4258;
}
#vend .p3v-openbox b, #vbuy .p3v-seller b { color: var(--ink) !important; }
#vend .p3v-openbox em { font-style: normal; font-weight: 700; color: #c98a00; }
#vend .p3v-live { align-self: flex-start; padding: 0 calc(14 * var(--m)); border-radius: calc(12 * var(--m)); background: linear-gradient(#9fe39a, #43ad52); border: calc(2.5 * var(--m)) solid var(--ink); color: #fff; -webkit-text-stroke: calc(3.5 * var(--m)) var(--ink); paint-order: stroke fill; font: 700 calc(19 * var(--m)) / 1.5 'Mitr', sans-serif; }
#vend .p3v-rows, #vbuy .p3v-rows {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(10 * var(--m)); padding: calc(12 * var(--m)); box-sizing: border-box;
  background: #efe4c9; border: calc(3 * var(--m)) solid #d4c6a6; border-radius: calc(18 * var(--m)); scrollbar-width: thin; scrollbar-color: #74b6ec transparent;
}
#vend .p3v-row, #vbuy .p3v-row {
  flex: none; display: grid; grid-template-columns: calc(62 * var(--m)) minmax(0, 1fr) auto auto; align-items: center; column-gap: calc(12 * var(--m)); row-gap: calc(6 * var(--m));
  padding: calc(8 * var(--m)) calc(12 * var(--m)); border-radius: calc(14 * var(--m)); background: #fffaf0; border: calc(3 * var(--m)) solid var(--ink);
}
#vbuy .p3v-row { grid-template-columns: calc(62 * var(--m)) minmax(0, 1fr) auto; cursor: pointer; }
#vbuy .p3v-row.sel { box-shadow: 0 0 0 calc(3 * var(--m)) #fff, 0 0 0 calc(6.5 * var(--m)) #3b8fdc; background: #f2f9ff; }
#vend .p3v-row > img, #vbuy .p3v-row > img { width: calc(58 * var(--m)); height: calc(58 * var(--m)); object-fit: contain; }
#vbuy .p3v-row > img { grid-row: span 2; }
#vend .p3v-rn, #vbuy .p3v-rn { display: flex; flex-direction: column; min-width: 0; }
#vend .p3v-rn b, #vbuy .p3v-rn b { font: 700 calc(20 * var(--m)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vend .p3v-rn small, #vbuy .p3v-rn small { font: 400 calc(15 * var(--m)) / 1.3 'Mitr', sans-serif; color: #6a6078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vend .p3v-row .p3v-tag, #vbuy .p3v-row .p3v-tag { font-size: calc(19 * var(--m)); padding: calc(2 * var(--m)) calc(10 * var(--m)) calc(2 * var(--m)) calc(5 * var(--m)); }
#vend .p3v-row .p3v-tag img, #vbuy .p3v-row .p3v-tag img { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }
#vend .p3v-left-n, #vbuy .p3v-left-n { font: 500 calc(17 * var(--m)) / 1 'Mitr', sans-serif; color: #5d5470; white-space: nowrap; }
#vbuy .p3v-rb { grid-column: 2 / -1; display: flex; align-items: center; gap: calc(12 * var(--m)); }
#vbuy .p3v-step span { min-width: calc(34 * var(--m)); text-align: center; font: 700 calc(20 * var(--m)) / 1 'Baloo 2', sans-serif; }
#vbuy .p3v-step.one { font: 500 calc(16 * var(--m)) / 1 'Mitr', sans-serif; color: #6a6078; }
#vbuy .p3v-buy {
  margin-left: auto; height: calc(40 * var(--m)); padding: 0 calc(16 * var(--m)); cursor: pointer; white-space: nowrap; border-radius: calc(12 * var(--m)); border: calc(3 * var(--m)) solid var(--ink);
  background: linear-gradient(#ffe68d, #f5bb3a); color: var(--ink); font: 700 calc(18 * var(--m)) / 1 'Mitr', sans-serif;
}
#vbuy .p3v-buy:disabled { cursor: default; background: linear-gradient(#e2dfe8, #c3bfcd); color: #7d7890; }
/* the picked row's details (js/p3_vend.js more(), js/vend.js NC.Vend.detail): what it is before buying it */
#vbuy .p3v-more { grid-column: 1 / -1; cursor: default; }
#vbuy .vd-detail {
  display: flex; flex-direction: column; gap: calc(4 * var(--m)); padding: calc(10 * var(--m)) calc(12 * var(--m));
  background: #fff; border: calc(2.5 * var(--m)) solid #c9d9ea; border-radius: calc(12 * var(--m)); font: 400 calc(15.5 * var(--m)) / 1.35 'Mitr', sans-serif; color: #4a4260;
}
#vbuy .vd-dl { display: grid; grid-template-columns: calc(132 * var(--m)) minmax(0, 1fr); column-gap: calc(10 * var(--m)); align-items: baseline; }
#vbuy .vd-dl > span { color: #8a7f99; }
#vbuy .vd-dl > b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
#vbuy .vd-dl .bad { color: #d2453a; }
#vbuy .vd-dd { color: #5d5470; font-style: italic; }
#vbuy .vd-drows { font-size: calc(15 * var(--m)); }

/* ---------- a phone held upright: the bag on top, the stall under it (taller, so the slots stay big) ---------- */
html.mob-port #vend, html.mob-port #vbuy { --m: calc(0.9 * var(--u)); }
html.mob-port #vend > .card.p3v-win, html.mob-port #vbuy > .card.p3v-win { --bh: calc(1080 * var(--m)); width: 100vw; max-width: 100vw; max-height: none; border-radius: 0; }
html.mob-port #vend .p3v-win .ptitle, html.mob-port #vbuy .p3v-win .ptitle { height: calc(62 * var(--m) + env(safe-area-inset-top)); font-size: calc(32 * var(--m)); justify-content: flex-end; }
html.mob-port #vend .p3v-win .ptitle .vd-t, html.mob-port #vbuy .p3v-win .ptitle .vd-t { position: static; transform: none; margin-right: auto; max-width: none; text-align: left; }
html.mob-port #vend .p3v-win .sh-coins, html.mob-port #vbuy .p3v-win .sh-coins { min-width: 0; }
html.mob-port #vend .p3v, html.mob-port #vbuy .p3v { grid-template-columns: minmax(0, 1fr); height: auto; }
html.mob-port #vend .p3v-left, html.mob-port #vbuy .p3v-left { padding: calc(12 * var(--m)) calc(14 * var(--m)); }
html.mob-port #vend .p3v-grid { flex: none; max-height: calc(520 * var(--m)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.mob-port #vend .p3v-rows, html.mob-port #vbuy .p3v-rows { flex: none; max-height: calc(560 * var(--m)); }
html.mob-port #vend .p3v-tabs { overflow-x: auto; scrollbar-width: none; }
html.mob-port #vend .p3v-tabs button { flex: none; }
html.mob-port #vend .p3v-stall, html.mob-port #vbuy .p3v-stall { border-left: 0; border-top: calc(4 * var(--m)) solid var(--ink); }
html.mob-port #vend .p3v-lower, html.mob-port #vbuy .p3v-lower { left: calc(16 * var(--m)); right: calc(16 * var(--m)); }
html.mob-port #vend .p3v-slots, html.mob-port #vbuy .p3v-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: calc(118 * var(--m)); }
html.mob-port #vend .p3v-slot > b, html.mob-port #vbuy .p3v-slot > b { font-size: calc(18 * var(--m)); }
html.mob-port #vend .p3v-tag, html.mob-port #vbuy .p3v-tag, html.mob-port #vend .p3v-line em, html.mob-port #vbuy .p3v-line em { font-size: calc(17 * var(--m)); }
html.mob-port #vend .p3v-note, html.mob-port #vbuy .p3v-note { font-size: calc(18 * var(--m)); }
html.mob-port #vend .p3v-go, html.mob-port #vbuy .p3v-go { min-width: 0; width: 100%; }
html.mob-port #vend .p3v-pop { left: 50%; transform: translateX(-50%); width: calc(420 * var(--m)); }
html.mob-port #vend .p3v-hero, html.mob-port #vbuy .p3v-hero { top: calc(var(--bh) * 0.17); height: calc(var(--bh) * 0.45); }
html.mob-port #vend .p3v-slot > img, html.mob-port #vbuy .p3v-slot > img { width: calc(50 * var(--m)); height: calc(50 * var(--m)); }
html.mob-port #vbuy .p3v-row { grid-template-columns: calc(54 * var(--m)) minmax(0, 1fr) auto; }