/* ============================================================================ * The vendor counter — #shopWin. * * Diablo IV's shop screen: the vendor on the LEFT with a crest, a priced list * and a buyback tab; your bag on the RIGHT as the same board the character * window draws. The split is not decoration — it is the two halves of the only * question a shop asks, and putting your bag anywhere but beside their counter * makes you compare prices from memory. * * Everything is scoped to #shopWin so none of it can leak into the character * window, whose grid rules this deliberately MIRRORS rather than shares: * items-window.css owns a board that can be dragged into, and this one is a * board you can only click. Two boards with one set of rules would mean the * shop inheriting drag affordances it does not implement. * * Depends on theme.css for the tokens and the .nw / .rr / .btn primitives. * ========================================================================= */ /* --cell is the bag square. The bag is TEN wide (BAG_COLS), so at 52px the board alone was 565px in a column the counter left 560 for: the whole right-hand side overflowed the window and the "Click a stack to sell it" hint and the note under the board were cut off at every size. 46 puts the board at 505 with the paddings, and the window is a little wider besides. */ #shopWin{--cell:46px;position:fixed;inset:0;z-index:130;pointer-events:none} #shopWin.hidden{display:none} #shopWin .box{ pointer-events:auto;position:absolute;left:50%;top:56px;transform:translateX(-50%); width:min(940px,calc(var(--vw) * 95));height:min(620px,calc(var(--vh) * 86)); display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(#17122af7,#100b20f9); box-shadow:0 26px 70px -18px #000,0 0 0 1px #ffffff10} #shopWin .winbar{display:flex;align-items:center;gap:9px;padding:9px 14px;flex:none; border-bottom:1px solid var(--edge);cursor:grab;user-select:none; background:linear-gradient(#21183a,#150f26);border-radius:11px 11px 0 0} #shopWin .winbar:active{cursor:grabbing} #shopWin .winbar .wt{font-size:12px;letter-spacing:.14em;text-transform:uppercase; font-weight:800;color:var(--gold2)} #shopWin .winbar .wsub{margin-left:auto;font-size:11px;color:var(--dim);letter-spacing:.04em} #shopWin .winbar .wx{margin-left:10px;width:24px;height:24px;border-radius:7px;display:grid; place-items:center;background:#0f0a1d;border:1px solid var(--edge);color:var(--faint); cursor:pointer;font-size:12px} #shopWin .winbar .wx:hover{color:#fff;border-color:var(--gold3)} /* Their half is fixed and yours takes the rest: the counter is a known number of rows and the bag is a known number of cells, but only one of them grows when the window is widened, and it should be the one you are hunting in. */ #shopWin .shopbody{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr;gap:0} /* ---------------------------------------------------------------- their side */ #shopWin .shopside{display:flex;flex-direction:column;min-height:0; padding:12px 12px 10px;border-right:1px solid var(--edge); background:linear-gradient(180deg,#150f26,#0f0a1c)} #shopWin .shopcrest{display:flex;align-items:center;gap:10px} /* Stands in for the vendor portrait D4 has and this game does not — yet. A framed glyph rather than a blank rectangle, because an empty portrait frame reads as a missing asset and a sigil reads as a shop sign. */ #shopWin .shopsigil{flex:none;width:46px;height:46px;display:grid;place-items:center; font-size:22px;color:var(--gold2); background:radial-gradient(circle at 50% 35%,#2b2039,#140e22); border:1px solid var(--gold3);border-radius:10px; box-shadow:inset 0 0 18px #0009,0 6px 16px -10px #000} #shopWin .shopid{min-width:0} #shopWin .shopid b{display:block;font-size:14px;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #shopWin .shopid span{display:block;font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--gold3)} #shopWin .shoppitch{margin:9px 0 10px;font-size:11.5px;line-height:1.4; color:var(--dim);font-style:italic} #shopWin .shoptabs{display:flex;gap:6px;flex:none;margin-bottom:8px} #shopWin .shoptabs button{flex:1;padding:5px 0;font:inherit;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--faint); background:#120c22;border:1px solid var(--edge);border-radius:7px;cursor:pointer} #shopWin .shoptabs button:hover{color:var(--ink);border-color:var(--line2)} #shopWin .shoptabs button.on{color:var(--gold2);border-color:var(--gold3); background:#241b10} #shopWin .shoplist{flex:1;min-height:0;overflow-y:auto; display:flex;flex-direction:column;gap:4px;padding-right:2px} #shopWin .shopempty{margin:14px 4px;font-size:11.5px;line-height:1.5;color:var(--faint)} /* One line on the counter. The price is the right-hand column at a fixed position down the whole list, so a column of them can be read as a column. */ #shopWin .shoprow{display:grid;grid-template-columns:auto 1fr auto auto; align-items:center;gap:9px;padding:5px 8px;cursor:pointer; background:#120c22;border:1px solid var(--edge);border-radius:8px; transition:border-color .12s,background .12s} #shopWin .shoprow:hover{border-color:var(--gold3);background:#1c1430} #shopWin .shoprow.poor{opacity:.42;cursor:not-allowed} #shopWin .shoprow.poor:hover{border-color:var(--edge);background:#120c22} #shopWin .shopcell{position:relative;width:36px;height:36px;flex:none; background:#0f0b1c;border:1px solid var(--line);border-radius:7px; display:grid;place-items:center} #shopWin .shopcell img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated} #shopWin .shopmeta{min-width:0} #shopWin .shopmeta b{display:block;font-size:12px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #shopWin .shopmeta span{display:block;font-size:9.5px;color:var(--faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #shopWin .shopqty{font-size:11px;color:var(--dim)} #shopWin .shopprice{display:inline-flex;align-items:center;gap:4px; font-size:12px;font-weight:700;color:var(--gold2);white-space:nowrap} #shopWin .coin{width:13px;height:13px;object-fit:contain;image-rendering:pixelated} #shopWin .shopfoot{flex:none;margin-top:9px;padding-top:9px; border-top:1px solid var(--edge);display:flex;justify-content:flex-end} #shopWin .shoppurse{display:inline-flex;align-items:center;gap:6px; font-size:14px;font-weight:800;color:var(--ink)} #shopWin .shoppurse .coin{width:16px;height:16px} /* The name colours are the bag's own rarity ramp, so a Rare on the counter is the same blue as the Rare already in your pack. */ #shopWin .r-common{color:var(--r-common)} #shopWin .r-uncommon{color:var(--r-uncommon)} #shopWin .r-rare{color:var(--r-rare)} #shopWin .r-epic{color:var(--r-epic)} #shopWin .r-legend{color:var(--r-legend)} /* ----------------------------------------------------------------- your side */ #shopWin .bagside{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;padding:12px 14px 10px} #shopWin .baghdr{flex:none;display:flex;align-items:baseline;gap:10px;margin-bottom:9px} #shopWin .bagtitle{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold3);font-weight:800} #shopWin .baghint{margin-left:auto;font-size:10.5px;color:var(--faint)} #shopWin .baginset{flex:1;min-height:0;overflow:auto;padding:9px; background:#0b0716;border:1px solid var(--edge);border-radius:10px; box-shadow:inset 0 2px 10px #000a} /* The Diablo board, mirrored from items-window.css: a fixed cols x rows grid with empty cells underneath and the stacks laid over them by explicit column/row, so an occupied square still has a cell behind it. */ #shopWin .baggrid{display:grid;grid-template-columns:repeat(var(--cols,6),var(--cell)); grid-auto-rows:var(--cell);gap:5px;justify-content:start;align-content:start} #shopWin .bagcell{background:#0f0b1c;border:1px dashed #30264c;border-radius:8px} #shopWin .bagitem{position:relative;background:#141024;border:1px solid var(--line); border-radius:8px;display:grid;place-items:center;cursor:pointer; transition:border-color .12s,box-shadow .12s,transform .08s} #shopWin .bagitem:hover{border-color:var(--gold);box-shadow:0 0 14px -4px var(--gold)} #shopWin .bagitem:active{transform:translateY(1px)} #shopWin .bagitem img{width:100%;height:100%;object-fit:contain;padding:12%; image-rendering:pixelated} #shopWin .bagitem .q{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:700; text-shadow:0 0 4px #000,0 1px 0 #000} /* What they will pay, on the item, in the gold it will become. Top-left so it never collides with the stack count in the bottom-right. */ #shopWin .bagprice{position:absolute;left:2px;top:1px;z-index:2; padding:0 3px;border-radius:4px;font-size:9.5px;font-weight:800; color:var(--gold2);background:#0a0714cc;text-shadow:0 1px 0 #000} #shopWin .bagitem.unsellable{cursor:default;opacity:.45} #shopWin .bagitem.unsellable:hover{border-color:var(--line);box-shadow:none} /* An unplaced overflow stack: still sellable, and arguably the thing most in need of selling, so it flows in after the board rather than being hidden. */ #shopWin .bagitem.loose{outline:1px solid #c07a55;outline-offset:-1px} #shopWin .bagnote{flex:none;margin:9px 2px 0;font-size:11px;color:var(--faint)} /* A media query would test the REAL viewport, and the interface is laid out in a virtual one and scaled into the real one by `zoom` (ui/uiscale.ts). The six layout breakpoints are published as tokens on against the virtual width instead, and w900 is the narrowest screen that still has to fit both halves of a counter side by side. */ :root[data-vp~="w900"] #shopWin .shopbody{ grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto} :root[data-vp~="w900"] #shopWin .shopside{ border-right:none;border-bottom:1px solid var(--edge)} :root[data-vp~="w900"] #shopWin .shoplist{max-height:200px} :root[data-vp~="w900"] #shopWin{--cell:46px}