/* =====================================================================
   ร้านค้า Supreme + ตลาด Coin (2026-09-29) - content of #premium-window.sup-window (js/supreme.js)
   The frame / titlebar / pw-panel / pw-btn / pw-chip come from main css + css/ui-sky-2.css (#premium-window rules).
   ===================================================================== */
html body #hud section#premium-window.sup-window { --pw-width: 600px !important; color: #10294f; }
html body #hud nav.toolbar.toolbar > button[data-toggle=premium-window]::after { content: "Supreme" !important; }
#hud #premium-window.sup-window .sup-body { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-tab { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-tab[hidden] { display: none !important; }
#hud #premium-window.sup-window b, #hud #premium-window.sup-window small, #hud #premium-window.sup-window em { font-size: inherit; }

/* ---- icons */
#hud #premium-window.sup-window :is(.sup-coin, .sup-zen) { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 0.2em;
  background: url(/ui/premium/gold.png) center/contain no-repeat; image-rendering: auto; }
#hud #premium-window.sup-window .sup-zen { background-image: url(/ui/profile/coin.png); }
#hud #premium-window.sup-window .pw-ico.sup-ico-crown { background-image: url(/ui/new_menu_icons/premium_64.png); }

/* ---- wallet + tabs */
#hud #premium-window.sup-window .sup-wallet { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); flex-wrap: wrap;
  padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: linear-gradient(90deg, #1f5fd0, #3d86e8); box-shadow: inset 0 calc(var(--u) * -3) 0 #164aa6; }
#hud #premium-window.sup-window .sup-status { padding: calc(var(--u) * 5) calc(var(--u) * 16); border-radius: calc(var(--u) * 30); border: calc(var(--u) * 2) solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: calc(var(--u) * 22) !important; }
#hud #premium-window.sup-window .sup-status.on { border-color: #9c7a36; background: linear-gradient(180deg, #ffe39a, #e2ab33); color: #3d2806; }
#hud #premium-window.sup-window .sup-purse { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 5) calc(var(--u) * 16); border-radius: calc(var(--u) * 30);
  background: #fff; color: #10294f; font-weight: 800; font-size: calc(var(--u) * 24) !important; font-variant-numeric: tabular-nums; }
#hud #premium-window.sup-window .sup-purse .sup-unit { margin: 0 calc(var(--u) * 12) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 17) !important; font-weight: 600; color: #5b7396; }
#hud #premium-window.sup-window .sup-purse .sup-unit:last-child { margin-right: 0; }
#hud #premium-window.sup-window .sup-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: calc(var(--u) * 3) solid #cfe2f5; }
#hud #premium-window.sup-window .sup-tabs .pw-chip { height: calc(var(--u) * 52); border: 0; border-bottom: calc(var(--u) * 5) solid transparent; border-radius: 0; background: none; box-shadow: none;
  color: #5b7396; font-size: calc(var(--u) * 24) !important; font-weight: 700; }
#hud #premium-window.sup-window .sup-tabs .pw-chip[aria-pressed="true"] { color: #1d4f9a; border-bottom-color: #e2ab33; background: linear-gradient(180deg, transparent, #eaf3fc); text-shadow: none; }

/* ---- perks */
#hud #premium-window.sup-window .sup-perks { margin: 0; padding: calc(var(--u) * 12) calc(var(--u) * 16); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8) calc(var(--u) * 14);
  font-size: calc(var(--u) * 21) !important; line-height: 1.35; }
#hud #premium-window.sup-window .sup-perks li { font-size: inherit !important; }
#hud #premium-window.sup-window .sup-perks li::before { content: "✦ "; color: #e2ab33; }
#hud #premium-window.sup-window .sup-perks b { color: #1f5fc4; }
#hud #premium-window.sup-window .sup-perks small { color: #6d7a8c; font-size: calc(var(--u) * 17) !important; }

/* ---- pack cards */
#hud #premium-window.sup-window .sup-packs, #hud #premium-window.sup-window .sup-gearpacks { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
#hud #premium-window.sup-window .sup-gear .sup-mine { margin-left: calc(var(--u) * 10); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 12); background: #e2ab33; color: #fff; font-size: calc(var(--u) * 16); font-style: normal; font-weight: 800; line-height: 1.5; }
#hud #premium-window.sup-window .sup-gear .sup-gear-items { display: block; line-height: 1.3; }
#hud #premium-window.sup-window .sup-gear-intro { padding: calc(var(--u) * 6) calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-card { display: grid; grid-template-columns: calc(var(--u) * 78) minmax(0, 1fr) auto calc(var(--u) * 190); align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 8) calc(var(--u) * 14); border: calc(var(--u) * 2) solid #9ec2e6; border-radius: calc(var(--u) * 14); background: linear-gradient(90deg, #fff, #e8f2fc);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, .15); }
#hud #premium-window.sup-window .sup-card.coin { border-color: #dfb758; background: linear-gradient(90deg, #fffdf4, #fff1cc); }
#hud #premium-window.sup-window .sup-card:not(.coin) { grid-template-columns: calc(var(--u) * 78) minmax(0, 1fr) calc(var(--u) * 190); }
#hud #premium-window.sup-window .sup-art { display: grid; place-items: center; width: calc(var(--u) * 74); height: calc(var(--u) * 74); border-radius: 50%;
  background: radial-gradient(circle, #fff4d6 40%, #ffe39a 70%, transparent 72%); }
#hud #premium-window.sup-window .sup-art i { display: block; width: var(--size, calc(var(--u) * 56)); height: var(--size, calc(var(--u) * 56)); background: url(/ui/new_menu_icons/premium_64.png) center/contain no-repeat; }
#hud #premium-window.sup-window .sup-art.chest i { background-image: url(/ui/mail/chest.png); }
#hud #premium-window.sup-window .sup-art.tier0 { --size: calc(var(--u) * 66); }
#hud #premium-window.sup-window .sup-art.tier1 { --size: calc(var(--u) * 60); }
#hud #premium-window.sup-window .sup-art.tier2 { --size: calc(var(--u) * 54); }
#hud #premium-window.sup-window .sup-art.tier3 { --size: calc(var(--u) * 48); }
#hud #premium-window.sup-window .sup-art.tier4 { --size: calc(var(--u) * 42); }
#hud #premium-window.sup-window .sup-card-text { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
#hud #premium-window.sup-window .sup-card h4 { margin: 0; display: flex; align-items: center; color: #1d3a78; font-size: calc(var(--u) * 30) !important; font-weight: 800; }
#hud #premium-window.sup-window .sup-card.coin h4 { color: #6b4a0e; }
#hud #premium-window.sup-window .sup-card small { color: #5b7396; font-size: calc(var(--u) * 18) !important; }
#hud #premium-window.sup-window .sup-card small b { color: #c07a0e; }
#hud #premium-window.sup-window .sup-thb { color: #8c5a06; font-size: calc(var(--u) * 26) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
#hud #premium-window.sup-window .sup-card .pw-btn { width: 100%; min-height: calc(var(--u) * 54); font-size: calc(var(--u) * 24) !important; white-space: nowrap; }
#hud #premium-window.sup-window .sup-card .pw-btn.short { filter: grayscale(.75); opacity: .7; }
#hud #premium-window.sup-window .sup-card .pw-btn.armed { filter: brightness(1.2) drop-shadow(0 0 calc(var(--u) * 6) #ffe27a); }
#hud #premium-window.sup-window .sup-hint { margin: 0; text-align: center; color: #3a5680; font-size: calc(var(--u) * 18) !important; line-height: 1.45; }
#hud #premium-window.sup-window .sup-hint b { color: #1d4f9a; }

/* ---- exchange: ticker */
#hud #premium-window.sup-window .sup-ticker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 8) calc(var(--u) * 16); padding: calc(var(--u) * 12) calc(var(--u) * 16); align-items: center; }
#hud #premium-window.sup-window .sup-price { display: flex; flex-direction: column; }
#hud #premium-window.sup-window .sup-price small { color: #5b7396; font-size: calc(var(--u) * 17) !important; }
#hud #premium-window.sup-window .sup-price b { font-size: calc(var(--u) * 46) !important; font-weight: 800; line-height: 1.1; color: #10294f; font-variant-numeric: tabular-nums; }
#hud #premium-window.sup-window .sup-price em { font-style: normal; font-weight: 800; font-size: calc(var(--u) * 20) !important; }
#hud #premium-window.sup-window .up { color: #17894a; }
#hud #premium-window.sup-window .down { color: #c9352f; }
#hud #premium-window.sup-window .sup-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
#hud #premium-window.sup-window .sup-stats span { display: flex; flex-direction: column; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #eaf3fc;
  color: #5b7396; font-size: calc(var(--u) * 16) !important; }
#hud #premium-window.sup-window .sup-stats b { color: #10294f; font-size: calc(var(--u) * 22) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hud #premium-window.sup-window .sup-demand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 10);
  font-size: calc(var(--u) * 18) !important; font-weight: 700; }
#hud #premium-window.sup-window .sup-demand .buy { color: #17894a; }
#hud #premium-window.sup-window .sup-demand .sell { color: #c9352f; }
#hud #premium-window.sup-window .sup-demand .bar { height: calc(var(--u) * 14); border-radius: calc(var(--u) * 10); background: #f3b1ad; overflow: hidden; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(0,0,0,.08); }
#hud #premium-window.sup-window .sup-demand .bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fb36a, #17894a); transition: width .4s; }

/* ---- exchange: chart */
#hud #premium-window.sup-window .sup-chart-panel { padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); gap: calc(var(--u) * 8); }
#hud #premium-window.sup-window .sup-chart-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 22) !important; }
#hud #premium-window.sup-window .sup-frames { display: flex; gap: calc(var(--u) * 6); }
#hud #premium-window.sup-window .sup-frames .pw-chip { height: calc(var(--u) * 38); font-size: calc(var(--u) * 18) !important; }
#hud #premium-window.sup-window .sup-chart { position: relative; height: calc(var(--u) * 300); border-radius: calc(var(--u) * 12); background: linear-gradient(180deg, #0f2447, #17335f);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #0b1a3a; overflow: hidden; display: grid; }
#hud #premium-window.sup-window .sup-chart svg { width: 100%; height: 100%; display: block; }
#hud #premium-window.sup-window .sup-chart .pw-empty { color: #aab8cb; }
#hud #premium-window.sup-window .sup-chart .grid { stroke: #2a4775; stroke-width: 1; stroke-dasharray: 3 4; }
#hud #premium-window.sup-window .sup-chart .axis { stroke: #3f5f92; stroke-width: 1; }
#hud #premium-window.sup-window .sup-chart text { font: 600 11px 'Noto Sans Thai', Tahoma, sans-serif; fill: #9fb3d1; }
#hud #premium-window.sup-window .sup-chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#hud #premium-window.sup-window .sup-chart .line.up { stroke: #3ddc84; }
#hud #premium-window.sup-window .sup-chart .line.down { stroke: #ff6b61; }
#hud #premium-window.sup-window .sup-chart .g0.up { stop-color: #3ddc84; stop-opacity: .35; }
#hud #premium-window.sup-window .sup-chart .g0.down { stop-color: #ff6b61; stop-opacity: .35; }
#hud #premium-window.sup-window .sup-chart .g1 { stop-color: #0f2447; stop-opacity: 0; }
#hud #premium-window.sup-window .sup-chart .vb { fill: #3ddc84; opacity: .75; }
#hud #premium-window.sup-window .sup-chart .vs { fill: #ff6b61; opacity: .75; }
#hud #premium-window.sup-window .sup-chart .now { stroke: #ffd75e; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#hud #premium-window.sup-window .sup-chart .tag.up { fill: #17894a; }
#hud #premium-window.sup-window .sup-chart .tag.down { fill: #c9352f; }
#hud #premium-window.sup-window .sup-chart .tagt { fill: #fff; font-weight: 800; }
#hud #premium-window.sup-window .sup-chart .hover-x { stroke: #cfe2f5; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
#hud #premium-window.sup-window .sup-chart .hover-d.up { fill: #3ddc84; stroke: #fff; stroke-width: 1.5; }
#hud #premium-window.sup-window .sup-chart .hover-d.down { fill: #ff6b61; stroke: #fff; stroke-width: 1.5; }
#hud #premium-window.sup-window .sup-chart .hit { fill: transparent; cursor: crosshair; }
#hud #premium-window.sup-window .sup-tip { position: absolute; top: calc(var(--u) * 8); display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 8px;
  background: rgba(8, 20, 42, .92); border: 1px solid #3f5f92; color: #e8f0ff; font-size: 11px !important; line-height: 1.35; pointer-events: none; white-space: nowrap; }
#hud #premium-window.sup-window .sup-tip b { color: #ffd75e; }
#hud #premium-window.sup-window .sup-tip .b { color: #3ddc84; }
#hud #premium-window.sup-window .sup-tip .s { color: #ff8a82; }

/* ---- exchange: trade panels */
#hud #premium-window.sup-window .sup-trade { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-side { gap: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 20) !important; }
#hud #premium-window.sup-window .sup-side > :not(.pw-ribbon) { margin-left: calc(var(--u) * 12); margin-right: calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-side.buy .pw-ribbon { background: linear-gradient(180deg, #2fb36a, #17894a) !important; }
#hud #premium-window.sup-window .sup-side.sell .pw-ribbon { background: linear-gradient(180deg, #ef6b5f, #c9352f) !important; }
#hud #premium-window.sup-window .sup-quote { margin: calc(var(--u) * 4) 0 0; font-size: inherit !important; }
#hud #premium-window.sup-window .sup-quote b { font-size: calc(var(--u) * 28) !important; color: #7a5a1c; font-variant-numeric: tabular-nums; }
#hud #premium-window.sup-window .sup-side label { display: grid; grid-template-columns: 1fr calc(var(--u) * 170); align-items: center; gap: calc(var(--u) * 6); font-weight: 600; font-size: inherit !important; }
#hud #premium-window.sup-window .sup-side input { width: 100%; min-width: 0; }
#hud #premium-window.sup-window .sup-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 5); }
#hud #premium-window.sup-window .sup-quick .pw-chip { height: calc(var(--u) * 34); padding: 0; font-size: calc(var(--u) * 17) !important; }
#hud #premium-window.sup-window .sup-est { min-height: calc(var(--u) * 48); margin: 0; font-size: calc(var(--u) * 17) !important; font-weight: 700; color: #1c7a3e; line-height: 1.35; }
#hud #premium-window.sup-window .sup-est.bad { color: #a02626; }
#hud #premium-window.sup-window .sup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); }
#hud #premium-window.sup-window .sup-actions .pw-btn { min-height: calc(var(--u) * 50); padding: 0; font-size: calc(var(--u) * 21) !important; }

/* ---- exchange: order book + my orders */
#hud #premium-window.sup-window .sup-lower { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-book { padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-depth { margin: 0; padding: 0; list-style: none; font-size: calc(var(--u) * 18) !important; font-variant-numeric: tabular-nums; }
#hud #premium-window.sup-window .sup-depth li { display: flex; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 6); border-radius: calc(var(--u) * 6); font-size: inherit !important; }
#hud #premium-window.sup-window .sup-depth li em { font-style: normal; }
#hud #premium-window.sup-window .sup-depth .head { color: #6d7a8c; font-size: calc(var(--u) * 15) !important; }
#hud #premium-window.sup-window .sup-depth .ask span { color: #c9352f; font-weight: 700; }
#hud #premium-window.sup-window .sup-depth .bid span { color: #17894a; font-weight: 700; }
#hud #premium-window.sup-window .sup-depth .mid { justify-content: center; margin: calc(var(--u) * 4) 0; background: #eaf3fc; color: #1d4f9a; font-weight: 700; }
#hud #premium-window.sup-window .sup-depth .none { justify-content: center; color: #93a3ba; font-size: calc(var(--u) * 15) !important; }
#hud #premium-window.sup-window .sup-orders-panel .pw-list { max-height: calc(var(--u) * 240); }
#hud #premium-window.sup-window .pw-note.bad { color: #a02626; }

@media (max-width: 720px) {
  #hud #premium-window.sup-window .sup-trade, #hud #premium-window.sup-window .sup-lower, #hud #premium-window.sup-window .sup-perks { grid-template-columns: 1fr; }
  #hud #premium-window.sup-window .sup-ticker { grid-template-columns: 1fr; }
  #hud #premium-window.sup-window .sup-card, #hud #premium-window.sup-window .sup-card:not(.coin) { grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr) calc(var(--u) * 200); }
  #hud #premium-window.sup-window .sup-card.coin .sup-thb { grid-column: 2; }
  #hud #premium-window.sup-window .sup-card.coin .pw-btn { grid-column: 3; grid-row: 1 / 3; }
}

/* ---- Coin top-up: Stripe PromptPay QR (2026-09-29) */
#hud #premium-window.sup-window .sup-qr { display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm8-2h3v3h-3zm3 3h3v3h-3zm-3 3h3v2h-3zm5-6h3v3h-3zm0 5h3v3h-3z'/%3E%3C/svg%3E") center/contain no-repeat; }
#hud #premium-window.sup-window .sup-pay-banner { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
#hud #premium-window.sup-window .sup-pay-banner span { padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); font-size: calc(var(--u) * 19) !important; font-weight: 700; }
#hud #premium-window.sup-window .sup-pay-banner .test { background: #fff4d6; border: calc(var(--u) * 2) dashed #e2ab33; color: #7a5a1c; }
#hud #premium-window.sup-window .sup-pay-banner .bonus { background: linear-gradient(90deg, #e3f7ea, #d2f0dc); border: calc(var(--u) * 2) solid #7cc79a; color: #17683a; }
#hud #premium-window.sup-window .sup-pay-banner .bonus b { color: #0e7a3c; }
#hud #premium-window.sup-window .sup-pay { padding-bottom: calc(var(--u) * 12); border-color: #2f7fe0 !important; }
#hud #premium-window.sup-window .sup-pay .pw-ribbon { background: linear-gradient(180deg, #1b5fbf, #10407f) !important; }
#hud #premium-window.sup-window .sup-pay-body { display: grid; grid-template-columns: calc(var(--u) * 250) minmax(0, 1fr); gap: calc(var(--u) * 16); padding: calc(var(--u) * 12) calc(var(--u) * 14) 0; align-items: start; }
#hud #premium-window.sup-window .sup-qr-box { display: grid; place-items: center; aspect-ratio: 1; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 14); background: #fff;
  border: calc(var(--u) * 3) solid #10407f; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(16, 64, 127, .25); }
#hud #premium-window.sup-window .sup-qr-box img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#hud #premium-window.sup-window .sup-pay-info { display: flex; flex-direction: column; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 20) !important; }
#hud #premium-window.sup-window .sup-pay-info p { margin: 0; font-size: inherit !important; }
#hud #premium-window.sup-window .sup-pay-info .amt { font-size: calc(var(--u) * 46) !important; font-weight: 800; color: #10407f; line-height: 1; }
#hud #premium-window.sup-window .sup-pay-info b { color: #7a5a1c; }
#hud #premium-window.sup-window .sup-pay-info .wait { color: #1d4f9a; font-weight: 700; }
#hud #premium-window.sup-window .sup-pay-info .wait span { color: #6d7a8c; font-weight: 500; font-size: calc(var(--u) * 17) !important; }
#hud #premium-window.sup-window .sup-pay-info ol { margin: 0; padding-left: 1.3em; color: #3a5680; font-size: calc(var(--u) * 17) !important; line-height: 1.5; }
#hud #premium-window.sup-window .sup-pay-info li { font-size: inherit !important; }
#hud #premium-window.sup-window .sup-spin { display: inline-block; width: .9em; height: .9em; margin-right: .4em; vertical-align: -.1em; border-radius: 50%;
  border: .16em solid #bcd3ee; border-top-color: #1d4f9a; animation: sup-spin 0.9s linear infinite; }
@keyframes sup-spin { to { transform: rotate(360deg); } }
#hud #premium-window.sup-window .sup-pay-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); }
#hud #premium-window.sup-window .sup-pay-actions .pw-btn { min-height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 12); display: inline-flex; align-items: center; text-decoration: none; font-size: calc(var(--u) * 19) !important; }
#hud #premium-window.sup-window .sup-pay-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: calc(var(--u) * 4) calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 14) calc(var(--u) * 16); }
#hud #premium-window.sup-window .sup-pay-result b { font-size: calc(var(--u) * 28) !important; }
#hud #premium-window.sup-window .sup-pay-result.ok b { color: #17894a; }
#hud #premium-window.sup-window .sup-pay-result.bad b { color: #a02626; }
#hud #premium-window.sup-window .sup-pay-result span { grid-row: 2; font-size: calc(var(--u) * 20) !important; color: #3a5680; }
#hud #premium-window.sup-window .sup-pay-result .pw-btn { grid-row: 1 / 3; grid-column: 2; }
@media (max-width: 720px) {
  #hud #premium-window.sup-window .sup-pay-body { grid-template-columns: 1fr; justify-items: center; }
  #hud #premium-window.sup-window .sup-qr-box { width: calc(var(--u) * 320); }
}

/* Supreme card under the FPS / ping strip (js/supreme.js syncStrip). Same palette as the character card (#mm-profile-card):
   sky gradient, gold frame with a dark outer ring, navy text. --su = HUD scale (strip height / 18 px). */
#hud .nv-sup-strip { --su: 1px; position: fixed; z-index: 31; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--su) * 3);
  pointer-events: auto;   /* #hud is pointer-events: none: without this the fold arrow / perks could not be tapped */
  padding: calc(var(--su) * 6) calc(var(--su) * 8) calc(var(--su) * 6); border: calc(var(--su) * 1.6) solid #dfb758; border-radius: calc(var(--su) * 8);
  background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, #f0f7ff 35%, #e1eefb 70%, #cbe3f8 100%); color: #10294f;
  box-shadow: 0 0 0 calc(var(--su) * .8) #734f0d, inset 0 0 0 calc(var(--su) * 1) #fff4cb, 0 3px 10px rgba(0,0,0,.35);
  font: 700 calc(var(--su) * 9)/1.15 'Noto Sans Thai', Tahoma, Arial, sans-serif; }
#hud .nv-sup-strip[hidden] { display: none; }
/* same frame as the character card (#mm-profile-card): gold filigree corners + top ornament */
#hud .nv-sup-strip .nss-corner { position: absolute; width: calc(var(--su) * 14); height: calc(var(--su) * 14); object-fit: contain; pointer-events: none; }
#hud .nv-sup-strip .nss-corner.tl { left: calc(var(--su) * -3); top: calc(var(--su) * -3); }
#hud .nv-sup-strip .nss-corner.tr { right: calc(var(--su) * -3); top: calc(var(--su) * -3); transform: scaleX(-1); }
#hud .nv-sup-strip .nss-corner.bl { left: calc(var(--su) * -3); bottom: calc(var(--su) * -3); transform: scaleY(-1); }
#hud .nv-sup-strip .nss-corner.br { right: calc(var(--su) * -3); bottom: calc(var(--su) * -3); transform: scale(-1); }
#hud .nv-sup-strip .nss-top { position: absolute; left: 50%; top: calc(var(--su) * -11); width: calc(var(--su) * 40); height: calc(var(--su) * 20); margin-left: calc(var(--su) * -20);
  object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
#hud .nv-sup-strip .nss-head { position: relative; z-index: 1; padding: calc(var(--su) * 1) 0; }
#hud .nv-sup-strip .nss-fold { display: inline-grid; place-items: center; min-width: calc(var(--su) * 14); height: calc(var(--su) * 14); border-radius: 50%;
  background: linear-gradient(180deg, #4f93f2, #1f5fd0); color: #fff !important; box-shadow: 0 0 0 1px #734f0d; }
#hud .nv-sup-strip .nss-head { all: unset; display: flex; align-items: center; gap: calc(var(--su) * 4); cursor: pointer; min-width: 0; }
#hud .nv-sup-strip .nss-crown { flex: none; width: calc(var(--su) * 14); height: calc(var(--su) * 14); background: url(/ui/new_menu_icons/premium_64.png) center/contain no-repeat;
  filter: drop-shadow(0 1px 0 #734f0d); animation: nss-shine 3s ease-in-out infinite; }
@keyframes nss-shine { 50% { filter: drop-shadow(0 0 calc(var(--su) * 3) #ffd24a); } }
#hud .nv-sup-strip .nss-head b { font-size: calc(var(--su) * 10) !important; font-weight: 900; letter-spacing: .08em; color: #1d3a78; text-shadow: 0 1px 0 #fff; }
#hud .nv-sup-strip .nss-head em { margin-left: auto; padding: 0 calc(var(--su) * 5); border-radius: calc(var(--su) * 8); background: linear-gradient(180deg, #ffe39a, #e2ab33);
  border: 1px solid #9c7a36; font-style: normal; font-size: calc(var(--su) * 8) !important; color: #3d2806; white-space: nowrap; }
#hud .nv-sup-strip .nss-fold { font-size: calc(var(--su) * 8) !important; color: #1d4f9a; }
#hud .nv-sup-strip .nss-bar { display: block; height: calc(var(--su) * 3.5); border-radius: 9px; background: #d6e5f5; overflow: hidden; box-shadow: inset 0 1px 1px rgba(16,41,79,.25); }
#hud .nv-sup-strip .nss-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #4f93f2, #1f5fd0); }
#hud .nv-sup-strip.warn .nss-bar i { background: linear-gradient(90deg, #ff8a65, #e53935); }
#hud .nv-sup-strip.warn .nss-head em { background: linear-gradient(180deg, #ffb4a8, #e53935); color: #fff; border-color: #8a1c14; }
#hud .nv-sup-strip .nss-perks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--su) * 2) calc(var(--su) * 3); cursor: pointer; }
#hud .nv-sup-strip .nss-perks li { display: flex; align-items: center; gap: calc(var(--su) * 2); min-width: 0; padding: calc(var(--su) * 1.5) calc(var(--su) * 3);
  border-radius: calc(var(--su) * 5); background: rgba(255,255,255,.85); border: 1px solid #b9d3ec; color: #10294f; font-size: calc(var(--su) * 7.5) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .nv-sup-strip .nss-perks li i { font-style: normal; font-size: calc(var(--su) * 8) !important; }
#hud .nv-sup-strip .nss-perks li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
#hud .nv-sup-strip.min { padding-bottom: calc(var(--su) * 4); gap: calc(var(--su) * 2); }
/* phone: one compact line (the perks open on tap), smaller type */
#hud .nv-sup-strip.phone { padding: calc(var(--su) * 3) calc(var(--su) * 5); border-radius: calc(var(--su) * 6); }
#hud .nv-sup-strip.phone .nss-crown { width: calc(var(--su) * 11); height: calc(var(--su) * 11); }
#hud .nv-sup-strip.phone .nss-head b { font-size: calc(var(--su) * 8) !important; letter-spacing: .04em; }
#hud .nv-sup-strip.phone .nss-head em { font-size: calc(var(--su) * 7) !important; }
#hud .nv-sup-strip.phone .nss-bar { height: calc(var(--su) * 2.5); }
#hud .nv-sup-strip.phone .nss-perks li { font-size: calc(var(--su) * 6.5) !important; padding: calc(var(--su) * 1) calc(var(--su) * 2); }

/* perks list in the shop: icon + text */
#hud #premium-window.sup-window .sup-perks li { display: flex; gap: calc(var(--u) * 8); align-items: baseline; }
#hud #premium-window.sup-window .sup-perks li::before { content: none; }
#hud #premium-window.sup-window .sup-perk-ico { flex: none; font-style: normal; }

/* gear pack images + purchase confirmation */
#hud #premium-window.sup-window .sup-card.sup-gear:not(.coin) { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 150); }
#hud #premium-window.sup-window .sup-gear-imgs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin: calc(var(--u) * 4) 0; }
#hud #premium-window.sup-window .sup-gear-img { display: inline-flex; flex-direction: column; align-items: center; width: calc(var(--u) * 56); height: calc(var(--u) * 56); justify-content: center;
  border: calc(var(--u) * 2) solid #cfe2f5; border-radius: calc(var(--u) * 10); background: #fff; box-sizing: border-box; }
#hud #premium-window.sup-window .sup-gear-img img { width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; }
#hud #premium-window.sup-window .sup-gear-imgs.big .sup-gear-img { width: calc(var(--u) * 84); height: calc(var(--u) * 96); }
#hud #premium-window.sup-window .sup-gear-imgs.big .sup-gear-img img { width: 62%; height: 62%; }
#hud #premium-window.sup-window .sup-gear-imgs.big .sup-gear-img em { font-style: normal; font-size: calc(var(--u) * 12); line-height: 1.1; color: #3a5680; text-align: center; padding: 0 2px; }
#hud #premium-window.sup-window .sup-confirm { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(12, 28, 58, .55); border-radius: inherit; }
#hud #premium-window.sup-window .sup-confirm[hidden] { display: none; }
#hud #premium-window.sup-window .sup-confirm-box { width: 86%; max-height: 92%; overflow: auto; box-sizing: border-box; padding: calc(var(--u) * 16); border: calc(var(--u) * 3) solid #dfb758; border-radius: calc(var(--u) * 16);
  background: linear-gradient(180deg, #fff, #eaf3fc); box-shadow: 0 8px 28px rgba(0,0,0,.45); text-align: center; color: #1d3a78; }
#hud #premium-window.sup-window .sup-confirm-box h3 { margin: 0 0 calc(var(--u) * 8); font-size: calc(var(--u) * 28) !important; }
#hud #premium-window.sup-window .sup-confirm-body { font-size: calc(var(--u) * 20) !important; }
#hud #premium-window.sup-window .sup-confirm-body p { margin: 0 0 calc(var(--u) * 6); }
#hud #premium-window.sup-window .sup-confirm-body .sup-gear-imgs { justify-content: center; }
#hud #premium-window.sup-window .sup-confirm-price { margin: calc(var(--u) * 10) 0; font-size: calc(var(--u) * 20) !important; }
#hud #premium-window.sup-window .sup-confirm-price b { color: #c07a0e; }
#hud #premium-window.sup-window .sup-confirm-actions { display: flex; gap: calc(var(--u) * 10); justify-content: center; }
#hud #premium-window.sup-window .sup-confirm-actions .pw-btn { min-width: calc(var(--u) * 150); min-height: calc(var(--u) * 50); font-size: calc(var(--u) * 22) !important; }

/* top-up history */
#hud #premium-window.sup-window .sup-hist { display: flex; flex-direction: column; gap: calc(var(--u) * 4); max-height: calc(var(--u) * 230); overflow: auto; }
#hud #premium-window.sup-window .sup-hist-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr .9fr; gap: calc(var(--u) * 8); align-items: center; padding: calc(var(--u) * 5) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8); background: #f3f8fd; font-size: calc(var(--u) * 18) !important; color: #1d3a78; }
#hud #premium-window.sup-window .sup-hist-row .s { text-align: right; font-weight: 800; color: #1f8f4a; }
#hud #premium-window.sup-window .sup-hist-row.bad .s { color: #b3372b; }
#hud #premium-window.sup-window .sup-hist-row .c { font-weight: 800; }
#hud #premium-window.sup-window .sup-pay[hidden], #hud #premium-window.sup-window .sup-pay-banner[hidden] { display: none !important; }

/* item details (click an item of a gear pack) - reuses the confirm dialog */
#hud #premium-window.sup-window button.sup-gear-img { padding: 0; font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
#hud #premium-window.sup-window button.sup-gear-img:hover { transform: translateY(-2px); border-color: #e2ab33; box-shadow: 0 2px 6px rgba(226,171,51,.45); }
#hud #premium-window.sup-window .sup-confirm.item .sup-confirm-box { text-align: left; }
#hud #premium-window.sup-window .sup-item-head { display: flex; gap: calc(var(--u) * 14); align-items: center; margin-bottom: calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-item-pic { flex: none; display: grid; place-items: center; width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: calc(var(--u) * 14);
  border: calc(var(--u) * 3) solid #dfb758; background: radial-gradient(circle, #fff, #eaf3fc); }
#hud #premium-window.sup-window .sup-item-pic img { width: 76%; height: 76%; object-fit: contain; image-rendering: pixelated; }
#hud #premium-window.sup-window .sup-item-head h4 { margin: 0 0 calc(var(--u) * 4); font-size: calc(var(--u) * 26) !important; color: #1d3a78; }
#hud #premium-window.sup-window .sup-item-ref { font-style: normal; color: #c07a0e; }
#hud #premium-window.sup-window .sup-item-head small { font-size: calc(var(--u) * 17) !important; color: #5b7396; }
#hud #premium-window.sup-window .sup-item-stats { margin: 0 0 calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); list-style: none; border-radius: calc(var(--u) * 10);
  background: #fff; border: 1px solid #cfe2f5; display: grid; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 20) !important; font-weight: 700; color: #1f5fc4; }
#hud #premium-window.sup-window .sup-item-stats li.ref { color: #c07a0e; }
#hud #premium-window.sup-window .sup-item-meta { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 4) calc(var(--u) * 12); margin: 0; font-size: calc(var(--u) * 18) !important; }
#hud #premium-window.sup-window .sup-item-meta dt { color: #5b7396; }
#hud #premium-window.sup-window .sup-item-meta dd { margin: 0; font-weight: 700; color: #10294f; }
#hud #premium-window.sup-window .sup-item-meta dd.bad { color: #b3372b; }

/* ---- COIN-SHOP-V1: Coin Shop sub tabs, single gear pieces, ETC (ore + lucky boxes) */
#hud #premium-window.sup-window .sup-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin: 0 0 calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-subtabs .pw-chip { height: calc(var(--u) * 44); border-radius: calc(var(--u) * 22); font-size: calc(var(--u) * 20) !important; font-weight: 800; color: #5b7396; background: #f3f8fe; border: calc(var(--u) * 2) solid #cfe2f5; box-shadow: none; }
#hud #premium-window.sup-window .sup-subtabs .pw-chip[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #f2c257, #e2ab33); border-color: #c98f1c; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
#hud #premium-window.sup-window .sup-pieces { gap: calc(var(--u) * 8); }
#hud #premium-window.sup-window .sup-piece { display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); }
#hud #premium-window.sup-window .sup-piece-buy { min-width: calc(var(--u) * 56); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 4); border: 0; border-radius: calc(var(--u) * 13);
  background: #2f7fe0; color: #fff; font-weight: 800; font-family: inherit; font-size: calc(var(--u) * 15) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#hud #premium-window.sup-window .sup-piece-buy:hover { background: #1d65bd; }
#hud #premium-window.sup-window .sup-piece-buy.short { filter: grayscale(.75); opacity: .7; }
#hud #premium-window.sup-window .sup-piece-buy img, #hud #premium-window.sup-window .sup-piece-buy i { max-height: calc(var(--u) * 16); }
#hud #premium-window.sup-window .sup-etc h4 { display: flex; align-items: center; gap: calc(var(--u) * 8); }
#hud #premium-window.sup-window .sup-etc-pic { display: inline-flex; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border: calc(var(--u) * 2) solid #cfe2f5; border-radius: calc(var(--u) * 8); background: #fff; align-items: center; justify-content: center; flex: none; }
#hud #premium-window.sup-window .sup-etc-pic img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
#hud #premium-window.sup-window .sup-etc-loot { display: block; line-height: 1.35; }
#hud #premium-window.sup-window .sup-etc-qty { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 17) !important; color: #3a5680; font-weight: 700; }
#hud #premium-window.sup-window .sup-etc-qty input { width: calc(var(--u) * 72); height: calc(var(--u) * 30); border: calc(var(--u) * 2) solid #cfe2f5; border-radius: calc(var(--u) * 8); text-align: center; font: inherit; font-size: calc(var(--u) * 18) !important; }
#hud #premium-window.sup-window .sup-etc .pw-btn small { font-size: calc(var(--u) * 13) !important; font-weight: 600; opacity: .85; }

/* ---- COIN-SPEC-V1: speculation panel */
#hud #premium-window.sup-window .sup-spec { margin-top: calc(var(--u) * 10); }
#hud #premium-window.sup-window .sup-spec h3 small { font-size: calc(var(--u) * 15) !important; font-weight: 600; opacity: .85; }
#hud #premium-window.sup-window .sup-spec-intro { padding: calc(var(--u) * 6) calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-spec-open { display: flex; gap: calc(var(--u) * 10); align-items: flex-end; padding: 0 calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-spec-open label { flex: 1; }
#hud #premium-window.sup-window .sup-spec .sup-est { padding: 0 calc(var(--u) * 12); }
#hud #premium-window.sup-window .sup-spec-row.up b { color: #1f9d55; }
#hud #premium-window.sup-window .sup-spec-row.down b { color: #d64545; }
#hud #premium-window.sup-window #sup-spec-list { padding: 0 calc(var(--u) * 8) calc(var(--u) * 8); }

/* ---- COIN-SELLBACK-V1: sell back to the game */
#hud #premium-window.sup-window .sup-sb { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 8); padding-top: calc(var(--u) * 8); border-top: calc(var(--u) * 2) dashed #cfe2f5; }
#hud #premium-window.sup-window .sup-sb-btn { width: 100%; background: linear-gradient(180deg, #f7d58a, #e2ab33); color: #5a3a07; }
#hud #premium-window.sup-window .sup-sb small { font-size: calc(var(--u) * 15) !important; line-height: 1.35; color: #5b7396; }
/* panels switched off by the server stay hidden (their display rules would otherwise win over [hidden]) */
#hud #premium-window.sup-window .sup-spec[hidden], #hud #premium-window.sup-window .sup-sb[hidden] { display: none !important; }