/* ตลาดแร่ (js/oremarket.js) - extras on top of css/oremarket-frame.css (the Supreme window look).
   Only what the Supreme window does not have: toolbar button, ore icons, pair price chips, portfolio. */
html body #hud section#ore-window.sup-window { --pw-width: 640px !important; }
html body #hud nav.toolbar.toolbar > button[data-toggle=ore-window]::after { content: var(--ore-label, "ตลาดแร่") !important; }
#hud .toolbar [data-toggle=ore-window] .ore-menu-icon { display: block; width: 44px; height: 44px; margin: 0 auto;
  background: url(/items/oridecon.png) center/78% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#hud #ore-window .ore-ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); image-rendering: pixelated; vertical-align: middle; }
#hud #ore-window .sup-tabs .pw-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
#hud #ore-window .ore-chip-px { font-style: normal; font-size: .85em; font-weight: 700; }
#hud #ore-window .up { color: #1f9d55 !important; }
#hud #ore-window .down { color: #d23c3c !important; }
#hud #ore-window .pw-row img { image-rendering: pixelated; }
#hud #ore-window .ore-pf-row { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 4) 0; border-bottom: 1px solid rgba(16, 41, 79, .1); }
#hud #ore-window .ore-pf-row img { width: calc(var(--u) * 56); height: calc(var(--u) * 56); image-rendering: pixelated; }
#hud #ore-window .ore-pf-row > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
#hud #ore-window .ore-pf-row small { opacity: .75; font-size: .85em; }
#hud #ore-window .ore-pf-row .pnl { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
#hud #ore-window .ore-real { margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
#hud #ore-window .ore-trades { list-style: none; margin: calc(var(--u) * 4) 0 0; padding: 0; font-size: .9em; }
#hud #ore-window .ore-trades li { display: flex; gap: calc(var(--u) * 8); padding: 1px 0; }
#hud #ore-window .ore-trades li span { opacity: .6; width: calc(var(--u) * 40); }
#hud #ore-window .ore-trades li b { flex: 1; font-weight: 600; }
#hud #ore-window .ore-trades li.buy b { color: #1f9d55; }
#hud #ore-window .ore-trades li.sell b { color: #d23c3c; }
#hud #ore-window .ore-pf-hint { font-size: .8em; opacity: .7; margin: calc(var(--u) * 4) 0 0; }
/* portfolio text in the same scale as the other panels */
#hud #ore-window #ore-pf { font-size: calc(var(--u) * 17); line-height: 1.35; }
#hud #ore-window #ore-pf .ore-pf-row b { font-size: calc(var(--u) * 19) !important; }
#hud #ore-window #ore-pf .ore-pf-row small, #hud #ore-window #ore-pf .ore-trades { font-size: calc(var(--u) * 15) !important; }
#hud #ore-window #ore-pf .ore-pf-hint { font-size: calc(var(--u) * 13) !important; }
#hud #ore-window #ore-pf .ore-real, #hud #ore-window #ore-pf .ore-real b { font-size: calc(var(--u) * 17) !important; }
/* tabs ซื้อขายด่วน / ตลาดเทรด, trading wallet panel */
#hud #ore-window .ore-modes .pw-chip { flex: 1; justify-content: center; font-weight: 700; }
#hud #ore-window .ore-purse-label { font-size: calc(var(--u) * 13); opacity: .75; margin-right: calc(var(--u) * 2); }
#hud #ore-window [data-ore-pane][hidden] { display: none !important; }
#hud #ore-window .ore-mode-hint { font-size: calc(var(--u) * 15); line-height: 1.35; margin: 0 0 calc(var(--u) * 6); opacity: .85; }
#hud #ore-window p.pw-panel.ore-mode-hint { padding: calc(var(--u) * 8) calc(var(--u) * 12); opacity: 1; }
#hud #ore-window .ore-vault-panel { font-size: calc(var(--u) * 16); }
#hud #ore-window .ore-vault-row { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) 0; border-bottom: 1px solid rgba(16, 41, 79, .1); }
#hud #ore-window .ore-vault-row:last-child { border-bottom: 0; }
#hud #ore-window .ore-vault-row img { width: calc(var(--u) * 56); height: calc(var(--u) * 56); image-rendering: pixelated; }
#hud #ore-window .ore-vault-row > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#hud #ore-window .ore-vault-row small { font-size: calc(var(--u) * 13) !important; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud #ore-window .ore-vault-row input { width: calc(var(--u) * 70); min-width: 0; }
#hud #ore-window .ore-vault-row .pw-btn { padding-inline: calc(var(--u) * 10); white-space: nowrap; }
/* OPT: reference line from the central market (ตลาดกลาง) under the buy / sell pressure bar */
#hud #ore-window .ore-ref { grid-column: 1 / -1; width: 100%; margin: calc(var(--u) * 8) 0 0; font-size: calc(var(--u) * 15); line-height: 1.4; color: #3b5374; }
#hud #ore-window .ore-ref b { color: #10294f; }
#hud #ore-window .ore-ref[hidden], #hud #ore-window [data-ore-pair][hidden] { display: none !important; }

/* ORE-ICONS-V2: the ore pictures were too small to read - bigger icons everywhere + a large one next to the market price */
#hud #ore-window.sup-window .sup-price { display: grid !important; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 14); align-items: center; }
#hud #ore-window.sup-window .sup-price > :not(.ore-px-img) { grid-column: 2; }
#hud #ore-window .ore-px-img { grid-column: 1; grid-row: 1 / span 3; width: calc(var(--u) * 84); height: calc(var(--u) * 84); image-rendering: pixelated;
  padding: calc(var(--u) * 6); border-radius: calc(var(--u) * 14); background: radial-gradient(circle at 50% 40%, #ffffff, #dcebfb 70%); box-shadow: inset 0 0 0 calc(var(--u) * 2) #dfb758; }
#hud #ore-window #ore-pair-nav .ore-ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-right: calc(var(--u) * 2); }
#hud #ore-window .pw-row > img { width: calc(var(--u) * 46); height: calc(var(--u) * 46); image-rendering: pixelated; flex: none; }