/* The trading post (shop.js), walking controls and the coin counter. The trading post wears the camp window
   (hub.css: frame, tabs, slots, buttons); this file lays out its grid and its pane and scales it to the screen. */

/* ---------- coin counter in the top bar ---------- */
/* The number gets room to breathe: a size up, a little tracking so the digits' 2px outlines don't run together, and
   a normal line height. */
.coin-chip { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 8px; margin-right: 8px; border: 0; border-radius: 0; clip-path: var(--notch);
  background: var(--chip-bg); box-shadow: var(--chip-ring); color: var(--gold); font: 700 1.15rem/1.25 var(--f-pixel);   /* the top bar's look: dig.css */ letter-spacing: 0.04em; text-shadow: var(--ol); }
.coin-chip .coin-ico { width: max(35px, calc(35px / var(--ui, 1))); height: max(30px, calc(30px / var(--ui, 1))); }
#app:not([data-screen="surface"]):not([data-screen="summary"]) .coin-chip { display: none; }
#app[data-screen="surface"] .hud { display: none; }   /* don't hold space for the dig HUD on the title screen */

/* ---------- controls ---------- */
kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; margin: 0 1px; border-radius: 5px; border: 2px solid #000; background: var(--slot);
  font: 700 0.75rem/1.2 var(--f-label); color: #fff; text-shadow: none; text-align: center; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
/* The coin (coin.js): a canvas that draws the winged Holy Ore crisply inside whatever box it's given, so every coin box
   needs both sizes. 18 x 15 is the small sprite's own size, 35 x 30 the big one's; a box never shrinks below that under
   a UI scale under 100% (its zoom would squeeze it), so the art always fits whole. */
.coin-ico { display: inline-block; flex: none; width: max(18px, calc(18px / var(--ui, 1))); height: max(15px, calc(15px / var(--ui, 1))); vertical-align: -2px; image-rendering: pixelated; }


/* ---------- the trading post (the Lantern UI, Colin's pick A) ---------- */
/* One column on the camp window's wood (hub.css): Barnaby and his bubble, the shelf, the card for the selected slot,
   and your bag. Slots and the card are parchment with dark ink; words on the wood are light with the game's outline.
   The colours are hub.css's warm tokens (--parch, --parch-ink, --amber, ...); the fallbacks here are the same values.
   The window grows with the screen, like a game's UI scale. shop.js (fit()) sets --k, the scale: 1 on a laptop,
   about 1.25 on a 1080-tall screen, about 1.75 on a 1440-tall ultrawide, and 1 on phones. It also sets --u (one art
   pixel of the chrome, kept whole) and the slot sizes, built around whole-number scales of the pixel art.
   The player's own UI scale (Settings, --ui) zooms the whole panel on top (settings.css); fit() leaves room for it.
   Numbers players read are set in --f-num and running sentences in --f-text; headings, labels and buttons stay in Mali. */
#shop { --k: 1;
  --sp: var(--parch, #f1d6a7); --sp-lit: var(--parch-lit, #f6daaf); --sp-edge: var(--parch-edge, #522919); --sp-ink: var(--parch-ink, #321007);
  --sp-dim: var(--parch-ink-dim, #7a4a2a); --sp-on-wood: var(--win-ink, #f4d995); --sp-dk: #e2bf8a;
  --sp-amber: var(--amber, #a25522); --sp-amber-hi: var(--amber-hi, #c47a42); --sp-amber-lo: var(--amber-lo, #5b2510);
  --sp-tex: var(--parch-tex, none);
  width: min(calc(980px * var(--k) * var(--ui, 1)), calc(100vw - 20px)); height: auto; max-height: calc(100dvh - 20px); }
/* the window is as tall as the stall, up to the screen; the stall scrolls past that */
#shop .hub-panel { display: flex; flex-direction: column; height: auto; max-height: calc(100dvh - 20px); padding-bottom: calc(var(--u) * 3); }
#shop .hub-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0 calc(var(--u) * 3); }
.shop-title { flex: none; margin: 0; padding: calc(14px * var(--k)) calc(64px * var(--k)) calc(10px * var(--k)) calc(20px * var(--k));
  font: 700 calc(1.35rem * var(--k))/1.1 var(--f-label); color: var(--sp-on-wood); text-shadow: var(--ol); }

/* the camp window's shared parts (hub.css) at the trading post's scale; phones keep hub.css's own sizes */
@media (min-width: 761px) {
  #shop .menu-close { top: calc(10px * var(--k)); right: calc(10px * var(--k)); width: calc(44px * var(--k)); height: calc(44px * var(--k)); font-size: calc(1.5rem * var(--k)); }
  #shop .coins { gap: calc(4px * var(--k)); }
  #shop .coins .coin-ico { width: max(calc(18px * var(--coin-k, 1)), calc(18px / var(--ui, 1))); height: max(calc(15px * var(--coin-k, 1)), calc(15px / var(--ui, 1))); }
  #shop .slot .badge { top: calc(4px * var(--k)); right: calc(5px * var(--k)); font-size: calc(0.85rem * var(--k)); }
}

.shop-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(10px * var(--k)); padding: calc(14px * var(--k)) calc(16px * var(--k)) calc(16px * var(--k)); }
.shop-scroll > * { flex: none; }

/* Barnaby behind his counter, and what he says: dark ink on parchment (an outline would smear it) */
.shop-counter { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.shop-face { flex: none; display: block; }
.shop-face .shop-av { display: block; }   /* Barnaby's doll portrait (Profile.render): its box needs a block to keep its size */
.shop-face.hop, .shop-balance.hop { animation: shop-hop .16s steps(2) 1; }
@keyframes shop-hop { 50% { translate: 0 calc(var(--u) * -1); } }
.shop-bubble { min-width: 0; display: grid; gap: calc(4px * var(--k)); margin: 0; padding: calc(9px * var(--k)) calc(14px * var(--k)) calc(10px * var(--k));
  clip-path: var(--notch); background: var(--sp-tex) 0 0 / 128px, var(--sp); box-shadow: inset 0 0 0 var(--u) var(--sp-edge);
  font: 700 calc(1.05rem * var(--k))/1.3 var(--f-label); color: var(--sp-ink); }
.shop-bubble, .shop-bubble * { text-shadow: none; }
.shop-bubble .shop-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(6px * var(--k)); font: 700 calc(0.95rem * var(--k))/1.3 var(--f-num, var(--f-label));
  color: var(--sp-dim); font-variant-numeric: tabular-nums; }
.shop-balance { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); color: var(--sp-ink); }

/* parchment slots: today's stock (eight to a shelf) and your bag. A piece's rarity is the colour of its inner ring; gold
   still means one thing, the slot the cursor is on. */
.slots { display: grid; gap: calc(8px * var(--k)); }
.slots.wares { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.slots.oregrid { grid-template-columns: repeat(auto-fill, var(--ore-slot, 60px)); }
#shop .slot.parch { --ring-c: var(--sp-dk); color: var(--sp-ink); background: var(--sp-tex) 0 0 / 128px, var(--sp);
  box-shadow: inset 0 0 0 var(--u) var(--sp-edge), inset 0 0 0 calc(var(--u) * 2.5) var(--ring-c); }
#shop button.slot.parch:hover { background-color: var(--sp-lit); background-image: none; }
#shop .slot.parch.sel, #shop .slot.parch:focus-visible, html[data-input="pad"] #shop .slot.parch:focus { box-shadow: inset 0 0 0 var(--u) var(--sp-edge), inset 0 0 0 calc(var(--u) * 2.5) var(--gold); }
#shop .slot.parch.mythic { --ring-c: color-mix(in srgb, var(--tc) 70%, var(--sp-edge)); animation: none; }
#shop .slot.r-uncommon { --ring-c: #6fae4a; } #shop .slot.r-rare { --ring-c: #6a8fd8; } #shop .slot.r-epic { --ring-c: #a678d8; } #shop .slot.r-legendary { --ring-c: #e3a12a; }
.slot.ware { width: 100%; aspect-ratio: 1; }
.slot.ore { width: var(--ore-slot, 60px); height: var(--ore-slot, 60px); }
/* a slot's count or price, bottom-left in dark ink, like a stack in an inventory */
#shop .slot .n { left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); padding: calc(1px * var(--k)) calc(3px * var(--k)); background: var(--sp); font: 700 calc(0.95rem * var(--k))/1 var(--f-num, var(--f-label)); color: var(--sp-ink); text-shadow: none; }
#shop .slot .n.price.short { color: #a3291f; }
#shop .slot .badge { color: #2f6b1c; text-shadow: none; }
.slot .star { position: absolute; top: calc(5px * var(--k)); left: calc(7px * var(--k)); font: 700 calc(0.95rem * var(--k))/1 var(--f-label); font-style: normal; color: var(--sp-amber);
  text-shadow: none; pointer-events: none; }

/* the card: the selected slot's art, its name and one line, and its buttons on the right */
#shop .shop-pane { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--k)) calc(18px * var(--k)); padding: calc(12px * var(--k)) calc(16px * var(--k));
  clip-path: var(--notch); background: var(--sp-tex) 0 0 / 128px, var(--sp); box-shadow: inset 0 0 0 var(--u) var(--sp-edge); color: var(--sp-ink); }
#shop .shop-pane *, #shop .shop-pane { text-shadow: none; }
#shop .shop-pane.empty { display: none; }
#shop .shop-pane.empty:has(.shop-note:not(:empty)) { display: flex; }
.pane-art { flex: none; display: grid; place-items: center; width: calc(var(--ore-slot, 60px) + 16px); height: calc(var(--ore-slot, 60px) + 16px); }
.pane-who { flex: 1 1 12em; display: grid; gap: calc(2px * var(--k)); min-width: 0; }
.pane-name { margin: 0; font: 700 calc(1.45rem * var(--k))/1.1 var(--f-label); color: var(--sp-ink); overflow-wrap: anywhere; }
.pane-sub { margin: 0; font: 700 calc(1rem * var(--k))/1.25 var(--f-label); color: var(--sp-dim); font-variant-numeric: tabular-nums; }
.pane-sums { font-family: var(--f-num, var(--f-label)); }
.pane-acts { display: flex; flex-wrap: wrap; gap: calc(6px * var(--k)); margin-left: auto; }
/* the try-on stage: you, wearing the selected piece, on a strip of ground. A wide pair of wings reaches past its sides,
   so it clips them sideways; a hat taller than the stage's headroom grows it instead (--over, profile.js). */
.pane-stage { flex: none; overflow-x: clip; display: flex; align-items: flex-end; justify-content: center; min-height: calc(110px * var(--k)); min-width: calc(84px * var(--k));
  padding: 0 calc(6px * var(--k)) calc(6px * var(--k)); clip-path: var(--notch);
  background: linear-gradient(to top, #c7883d 0 calc(10px * var(--k)), #7a4422 calc(10px * var(--k))); box-shadow: inset 0 0 0 var(--u) var(--sp-edge); }
.pane-av { position: relative; margin-top: var(--over, 0px); }
/* a piece you can't afford yet: what you need, what your bag would bring, and Sell everything & buy when that covers it */
.pane-short { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--k)) calc(14px * var(--k)); }
.pane-short p { margin: 0; font: 700 calc(1rem * var(--k))/1.4 var(--f-text, var(--f-label)); color: var(--sp-dim); }
.pane-short .coins.short b { color: #a3291f; }
.shop-pane .coins b { color: inherit; }

/* buttons in the stall: amber, green for the one that trades, red when it asks again, brown when you're short */
#shop .btn { gap: calc(6px * var(--k)); min-height: calc(44px * var(--k)); padding: calc(10px * var(--k)) calc(16px * var(--k)); clip-path: var(--notch);
  background: var(--sp-amber); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--sp-amber-lo), inset 0 calc(var(--u) * 1.5) 0 var(--sp-amber-hi), inset 0 0 0 var(--u) var(--win-edge);
  font: 700 calc(1.05rem * var(--k))/1 var(--f-label); color: #fff1d6; text-shadow: var(--ol1); }
#shop .btn .coins b { color: #fff1d6; }
#shop .btn.primary { background: #4f8f2a; box-shadow: inset 0 calc(var(--u) * -2) 0 #2b5a14, inset 0 calc(var(--u) * 1.5) 0 #78b84a, inset 0 0 0 var(--u) var(--win-edge); }
#shop .btn.small { min-height: calc(36px * var(--k)); padding: calc(6px * var(--k)) calc(12px * var(--k)); font-size: calc(0.95rem * var(--k)); }
#shop .btn:hover { color: var(--gold); }
#shop .btn:hover .coins b { color: var(--gold); }
#shop .btn:focus-visible, html[data-input="pad"] #shop .btn:focus { outline: none; box-shadow: inset 0 0 0 var(--u) var(--gold), inset 0 0 0 calc(var(--u) * 2) var(--win-edge); }
#shop .btn.arm { background: #b8322a; color: #fff; box-shadow: inset 0 calc(var(--u) * -2) 0 #6e1712, inset 0 0 0 var(--u) var(--win-edge); }
#shop .btn.short { background: #8b6a52; box-shadow: inset 0 calc(var(--u) * -2) 0 #5a4232, inset 0 0 0 var(--u) var(--win-edge); color: #f0dcc4; }
#shop .btn.short .coins b { color: #ffd3c4; }
#shop .btn.done { background: transparent; box-shadow: inset 0 0 0 var(--u) var(--sp-edge); color: #2f6b1c; text-shadow: none; cursor: default; }
#shop .btn.shake { animation: hub-shake .18s steps(3) 1; }

/* your bag: its name and Sell everything on the wood, the ores in a row under them */
.shop-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(6px * var(--k)) calc(12px * var(--k)); margin-top: calc(4px * var(--k)); }
.shop-h h3 { display: flex; align-items: baseline; gap: calc(10px * var(--k)); margin: 0; font: 700 calc(1.15rem * var(--k))/1.1 var(--f-label); color: var(--sp-on-wood); text-shadow: var(--ol1); }
.shop-h small { font: 700 calc(0.95rem * var(--k))/1.2 var(--f-num, var(--f-label)); color: var(--sp-on-wood); opacity: .8; }
.shop-h .every-why { flex: 1 1 100%; text-align: right; font-family: var(--f-text, var(--f-label)); }   /* under Sell everything */
.shop-tray { align-content: start; }

/* what the last trade said, under the card (after a sale only refusals: a sale speaks for itself) */
.shop-note { flex: 1 1 100%; margin: 0; font: 700 calc(0.95rem * var(--k))/1.3 var(--f-text, var(--f-label)); color: #2f6b1c; }
.shop-note:empty { display: none; }
.shop-note.bad { color: #a3291f; }
.shop-note.pop { animation: note-in .2s steps(2); }
@keyframes note-in { from { opacity: 0; } }
.shop-empty { display: flex; align-items: center; gap: calc(10px * var(--k)); margin: 0; font: 700 calc(1rem * var(--k))/1.4 var(--f-text, var(--f-label)); color: var(--sp-on-wood); text-shadow: var(--ol1); }
.shop-empty .px { width: calc(24px * var(--k)); height: calc(24px * var(--k)); flex: none; }
.shop-empty .px svg { display: block; width: 100%; height: 100%; }
.shop-shelf .shop-empty { grid-column: 1 / -1; }
/* tabs in the shop's style (the wardrobe borrows .shop-kind outside the window, hence --k, 1) */
.shop-kind { min-height: calc(36px * var(--k, 1)); padding: calc(6px * var(--k, 1)) calc(12px * var(--k, 1)); border: 0; clip-path: var(--notch); background: transparent; cursor: pointer;
  font: 700 calc(0.95rem * var(--k, 1))/1 var(--f-label); color: #fff; text-shadow: var(--ol1); }
.shop-kind:hover { color: var(--gold); }
.shop-kind.on { background: var(--amber); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); color: var(--win-ink); }
.shop-kind:focus-visible, html[data-input="pad"] .shop-kind:focus { outline: none; box-shadow: var(--ring-on); }

/* the hover tooltip: a small wood box with the name, what it is, and the price last */
.shop-tip { position: fixed; z-index: 10; display: grid; gap: 2px; max-width: calc(260px * var(--k)); padding: calc(8px * var(--k)) calc(12px * var(--k)) calc(9px * var(--k)); pointer-events: none;
  clip-path: var(--notch); background: var(--win); box-shadow: inset 0 0 0 var(--u) var(--win-edge); font: 700 calc(0.95rem * var(--k))/1.25 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.shop-tip[hidden] { display: none; }
.shop-tip b { font-size: 1.1em; }
.shop-tip .tp { color: var(--gold); font-family: var(--f-num, var(--f-label)); }
.shop-tip .tp.short { color: var(--short); }
html[data-input="touch"] .shop-tip, html[data-input="pad"] .shop-tip { display: none; }

/* a coin flying from what you sold to your balance (shop.js sizes it to the window's scale) */
.coin-fly { position: fixed; z-index: 11; pointer-events: none; }

/* ---------- phones: the whole screen; the shelf four to a row, the card's buttons a full row ---------- */
@media (max-width: 760px) {
  .shop-h .every-why { text-align: left; }   /* Sell everything wraps under the bag's name here */
  #shop { width: 100vw; height: 100dvh; max-height: none; }
  #shop .hub-panel { height: 100%; max-height: none; }
  #shop .hub-body { margin: 0 calc(var(--u) * 2); }
  .shop-title { padding: calc(env(safe-area-inset-top, 0px) + 14px) 60px 10px 14px; font-size: 1.2rem; }
  #shop .menu-close { width: 44px; height: 44px; }
  .shop-scroll { padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .slots.wares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-bubble { font-size: 1rem; }
  #shop .shop-pane { gap: 10px 12px; padding: 10px 12px; }
  .pane-acts { flex: 1 1 100%; margin-left: 0; }
  .pane-acts .btn, .pane-short .btn { flex: 1; }
  .pane-name { font-size: 1.25rem; }
  .pane-stage { min-height: 100px; min-width: 76px; }
  .shop-kind { flex: none; min-height: 44px; }
}

html[data-motion="reduce"] {
  .shop-face.hop, .shop-balance.hop, .shop-note.pop, #shop .btn.shake { animation: none !important; }
}