/* GENERATED from the Supreme window styles (#premium-window -> #opt-window). Do not edit: rerun scripts/build_oremarket_css.py */ /* ---- assets/main-Dy4hVcVK.css: 59 rules */ #hud #opt-window{--pw-width:470px;--pw-aspect:.92} #hud #opt-window .prem-body,#hud #opt-window .prem-tab{display:flex;flex-direction:column;gap:calc(var(--u)*10)} #hud #opt-window .prem-tab[hidden]{display:none} #hud #opt-window .prem-wallet{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*10)} #hud #opt-window .prem-status{padding:calc(var(--u)*4) calc(var(--u)*14);border:calc(var(--u)*2) solid #b9a77f;border-radius:calc(var(--u)*20);background:#efe5cb;font-size:calc(var(--u)*22)!important;font-weight:700;color:#7d6a45} #hud #opt-window .prem-status.on{border-color:#c9a45c;background:linear-gradient(#7c1f2c,#4f0f1b);color:#ffe7a8;text-shadow:0 calc(var(--u)*1.5) #2a0509;box-shadow:inset 0 0 0 calc(var(--u)*1.5) #a8434f} #hud #opt-window .prem-purse{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*24)!important;font-weight:700;font-variant-numeric:tabular-nums} #hud #opt-window .prem-purse b{margin-right:calc(var(--u)*10)} #hud #opt-window :is(.prem-gold,.prem-silver){display:inline-block;flex:none;width:calc(var(--u)*30);height:calc(var(--u)*30);vertical-align:-.22em;background:url(/ui/premium/gold.png) center/contain no-repeat;image-rendering:auto} #hud #opt-window .prem-silver{background-image:url(/ui/profile/coin.png)} #hud #opt-window .pw-ico.crown{background-image:url(/ui/daily/crown.png)} #hud #opt-window .pw-ico.coin{background-image:url(/ui/premium/gold.png)} #hud #opt-window .prem-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*8)} #hud #opt-window .prem-tabs .pw-chip{height:calc(var(--u)*48);font-size:calc(var(--u)*24)!important} #hud #opt-window .prem-perks{margin:0;padding:calc(var(--u)*10) calc(var(--u)*16) calc(var(--u)*12) calc(var(--u)*40);font-size:calc(var(--u)*22)!important;line-height:1.5} #hud #opt-window .prem-perks li{font-size:inherit!important} #hud #opt-window .prem-perks b{color:#9a2233} #hud #opt-window .prem-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--u)*8)} #hud #opt-window .prem-card{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);min-width:0;padding:calc(var(--u)*8) calc(var(--u)*6);border:calc(var(--u)*2.5) solid #c9a45c;border-radius:calc(var(--u)*12);box-shadow:inset 0 0 0 calc(var(--u)*2) #0005,inset 0 0 0 calc(var(--u)*3.5) #e9cf8a55,0 calc(var(--u)*3) calc(var(--u)*5) #4a2c0655;color:#fff4d6;text-align:center} #hud #opt-window .prem-card.premium{background:radial-gradient(ellipse at 50% 28%,#8a2434,#57101d 55%,#3a0912)} #hud #opt-window .prem-card.gold{background:radial-gradient(ellipse at 50% 28%,#a66a16,#6b430c 55%,#43290a)} #hud #opt-window .prem-card h4{margin:0;display:flex;align-items:center;gap:calc(var(--u)*4);font-family:Cormorant Garamond,"Noto Serif Thai",Noto Sans Thai,serif;font-size:calc(var(--u)*30)!important;font-weight:700;line-height:1.1;color:#fff4d6;text-shadow:0 calc(var(--u)*2) #2a0509;white-space:nowrap} #hud #opt-window .prem-card small{min-height:calc(var(--u)*40);display:flex;align-items:center;font-size:calc(var(--u)*16)!important;line-height:1.2;color:#e9cf8a} #hud #opt-window .prem-card small b{margin-left:.3em;color:#ffd75e;font-size:inherit!important} #hud #opt-window .prem-card .pw-btn{width:100%;min-height:calc(var(--u)*46);padding:0;font-size:calc(var(--u)*22)!important;white-space:nowrap} #hud #opt-window .prem-card .pw-btn .prem-gold{width:calc(var(--u)*22);height:calc(var(--u)*22);margin-right:calc(var(--u)*3)} #hud #opt-window .prem-card .prem-price{font-size:calc(var(--u)*24)!important;font-weight:700;color:#ffe7a8;text-shadow:0 calc(var(--u)*1.5) #2a0509;font-variant-numeric:tabular-nums} #hud #opt-window .prem-card .pw-btn.prem-soon{font-size:calc(var(--u)*19)!important;filter:grayscale(.35);opacity:.85} #hud #opt-window .prem-card .pw-btn.short{filter:grayscale(.75);opacity:.7} #hud #opt-window .prem-card .pw-btn.armed{filter:brightness(1.2) drop-shadow(0 0 calc(var(--u)*5) #ffe27a)} #hud #opt-window .prem-art{display:grid;place-items:center;width:100%;height:calc(var(--u)*104);background:radial-gradient(closest-side,var(--glow,#ffc04a66),transparent)} #hud #opt-window .prem-art i{display:block;width:var(--size);height:var(--size);background:url(/ui/daily/crown.png) center/contain no-repeat;image-rendering:auto;filter:drop-shadow(0 calc(var(--u)*3) 0 #00000066)} #hud #opt-window .prem-art.chest i{background-image:url(/ui/mail/chest.png)} #hud #opt-window .prem-art.tier0{--size:calc(var(--u)*100);--glow:#ffd24acc} #hud #opt-window .prem-art.tier1{--size:calc(var(--u)*88);--glow:#ffc84aaa} #hud #opt-window .prem-art.tier2{--size:calc(var(--u)*76);--glow:#ffc04a88} #hud #opt-window .prem-art.tier3{--size:calc(var(--u)*64);--glow:#ffb84a55} #hud #opt-window .prem-art.tier4{--size:calc(var(--u)*52);--glow:#ffb04a33} #hud #opt-window .prem-hint{margin:0;font-size:calc(var(--u)*18)!important;text-align:center;color:#7d6a45} #hud #opt-window .prem-chart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u)*10);align-items:center;padding:calc(var(--u)*8) calc(var(--u)*10)} #hud #opt-window .prem-chart{min-height:calc(var(--u)*150);display:grid;border-radius:calc(var(--u)*8);background:#1c2f57;box-shadow:inset 0 0 0 calc(var(--u)*2) #0b1a3a} #hud #opt-window .prem-chart svg{width:100%;height:100%;display:block} #hud #opt-window .prem-chart text{font:600 9px Noto Sans Thai,sans-serif;fill:#aab8cb} #hud #opt-window .prem-chart .axis{stroke:#5673a0;stroke-width:1} #hud #opt-window .prem-chart .line{fill:none;stroke:#c0392b;stroke-width:2;stroke-linejoin:round} #hud #opt-window .prem-chart circle{fill:#ffc53a;stroke:#7a4a06;stroke-width:1} #hud #opt-window .prem-chart .pw-empty{color:#aab8cb} #hud #opt-window .prem-frames{display:flex;flex-direction:column;gap:calc(var(--u)*6)} #hud #opt-window .prem-trade{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10)} #hud #opt-window .prem-side{display:flex;flex-direction:column;gap:calc(var(--u)*6);padding:calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*10);font-size:calc(var(--u)*21)!important} #hud #opt-window .prem-side p{margin:0;font-size:inherit!important} #hud #opt-window .prem-side p b{font-size:calc(var(--u)*28)!important;color:#7a5a1c;font-variant-numeric:tabular-nums} #hud #opt-window .prem-side label{display:grid;grid-template-columns:1fr calc(var(--u)*160);align-items:center;gap:calc(var(--u)*6);font-size:inherit!important;font-weight:600} #hud #opt-window .prem-side input{width:100%;min-width:0} #hud #opt-window .prem-total{min-height:calc(var(--u)*26);font-size:calc(var(--u)*19)!important;font-weight:700;color:#1c7a3e} #hud #opt-window .prem-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6)} #hud #opt-window .prem-actions .pw-btn{min-height:calc(var(--u)*48);padding:0;font-size:calc(var(--u)*21)!important} #hud #opt-window .prem-orders-panel .pw-list{max-height:calc(var(--u)*150)} #hud #opt-window .pw-note.bad{color:#a02626} /* ---- css/ui-sky-2.css: 49 rules */ html body #hud section#opt-window.painted-window::before{ border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important; border-image: url('/ui/settings/frame-sky.webp?v=1') 492 0 145 0 fill / calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) stretch !important; filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important; } html body #hud section#opt-window.painted-window > .titlebar{ top: calc(var(--u) * 78) !important; height: calc(var(--u) * 74) !important; padding: 0 calc(var(--u) * 120) !important; } html body #hud section#opt-window.painted-window > .titlebar > span{ color: #ffffff !important; font-size: calc(var(--u) * 44) !important; text-shadow: -0.1em 0 #1b3a7a, 0.1em 0 #1b3a7a, 0 -0.08em #1b3a7a, 0 0.1em #1b3a7a, 0 0.15em 0.25em rgba(10, 30, 80, 0.6) !important; } html body #hud section#opt-window.painted-window > .titlebar button{ left: calc(var(--u) * 754) !important; top: calc(var(--u) * -3) !important; width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; border-radius: 50% !important; } html body #hud section#opt-window.painted-window .pw-body{ margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important; padding-left: calc(var(--u) * 40) !important; padding-right: calc(var(--u) * 36) !important; max-height: calc((100dvh - 16px) / var(--ui-zoom, 1) - var(--u) * 250) !important; } html body #hud section#opt-window.painted-window{ --pw-width: 540px !important; } html body #hud section#opt-window .pw-panel{ border-color: #9ec2e6 !important; background: linear-gradient(180deg, #ffffff, #eef6fe) !important; box-shadow: inset 0 0 0 calc(var(--u) * 3) #ffffff, inset 0 0 0 calc(var(--u) * 4.5) #cfe2f5, 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(20, 60, 120, 0.15) !important; } html body #hud section#opt-window .pw-ribbon{ background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #ffffff !important; } html body #hud section#opt-window .pw-body{ scrollbar-color: #7fa9d6 transparent !important; } html body #hud section#opt-window .prem-status{ border-color: #a9c6e2 !important; background: #eaf3fc !important; color: #3a5680 !important; } html body #hud section#opt-window .prem-status.on{ border-color: #dfb758 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important; box-shadow: none !important; } html body #hud section#opt-window .pw-chip[aria-pressed="true"]{ border-color: #9c7a36 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, 0.6) !important; color: #3d2806 !important; text-shadow: none !important; } html body #hud section#opt-window .prem-card.premium{ background: radial-gradient(ellipse at 50% 28%, #4f93f2, #1f5fd0 55%, #123a82) !important; border-color: #dfb758 !important; } html body #hud section#opt-window .prem-card h4{ text-shadow: 0 calc(var(--u) * 2) #0b2050 !important; } html body #hud section#opt-window .prem-card small{ color: #dbe9ff !important; } html body #hud section#opt-window .prem-card .prem-price{ text-shadow: 0 calc(var(--u) * 1.5) #0b2050 !important; } html body #hud section#opt-window .prem-perks b{ color: #1f5fc4 !important; } html body #hud section#opt-window .prem-hint{ color: #3a5680 !important; } html body #hud section#opt-window .prem-wallet{ padding: calc(var(--u) * 10) calc(var(--u) * 16) !important; border-radius: calc(var(--u) * 40) !important; background: linear-gradient(90deg, #1d58b0, #3f86e0 60%, #6fb0f5) !important; box-shadow: inset 0 0 0 calc(var(--u) * 2.5) #dfb758, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, 0.25) !important; } html body #hud section#opt-window .prem-status{ background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.55) !important; color: #ffffff !important; } html body #hud section#opt-window .prem-purse{ padding: calc(var(--u) * 4) calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 30) !important; background: #ffffff !important; color: #10294f !important; } html body #hud section#opt-window .prem-tabs{ gap: 0 !important; border-bottom: calc(var(--u) * 3) solid #cfe2f5 !important; } html body #hud section#opt-window .prem-tabs .pw-chip,html body #hud section#opt-window .prem-tabs .pw-chip[aria-pressed="true"]{ border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #5b7396 !important; text-shadow: none !important; margin-bottom: calc(var(--u) * -3) !important; border-bottom: calc(var(--u) * 5) solid transparent !important; font-weight: 700 !important; } html body #hud section#opt-window .prem-tabs .pw-chip[aria-pressed="true"]{ color: #1d4f9a !important; border-bottom-color: #e2ab33 !important; } html body #hud section#opt-window #premium-tab-premium > .pw-panel{ flex-direction: row !important; align-items: stretch !important; padding: calc(var(--u) * 10) !important; gap: calc(var(--u) * 12) !important; } html body #hud section#opt-window #premium-tab-premium > .pw-panel > .pw-ribbon{ flex: 0 0 calc(var(--u) * 150) !important; height: auto !important; flex-direction: column !important; justify-content: center !important; text-align: center !important; white-space: normal !important; border-radius: calc(var(--u) * 12) !important; padding: calc(var(--u) * 10) !important; background: radial-gradient(ellipse at 50% 30%, #fff4d6, #ffe39a 60%, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important; line-height: 1.2 !important; font-size: calc(var(--u) * 24) !important; } html body #hud section#opt-window #premium-tab-premium > .pw-panel > .pw-ribbon .pw-ico{ width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; filter: none !important; } html body #hud section#opt-window .prem-perks{ flex: 1 1 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: calc(var(--u) * 8) !important; padding: 0 !important; list-style: none !important; } html body #hud section#opt-window .prem-perks li{ display: block !important; padding: calc(var(--u) * 8) calc(var(--u) * 12) !important; border-radius: calc(var(--u) * 10) !important; background: #eef6fe !important; box-shadow: inset 0 0 0 calc(var(--u) * 2) #cfe2f5 !important; line-height: 1.25 !important; } html body #hud section#opt-window .prem-perks li::before{ content: "✦ "; color: #e2ab33; } html body #hud section#opt-window .prem-grid{ grid-template-columns: 1fr !important; gap: calc(var(--u) * 8) !important; } html body #hud section#opt-window .prem-card{ display: grid !important; grid-template-columns: calc(var(--u) * 84) minmax(0, 1fr) auto calc(var(--u) * 150) calc(var(--u) * 150) !important; grid-template-rows: auto auto !important; column-gap: calc(var(--u) * 14) !important; row-gap: 0 !important; align-items: center !important; padding: calc(var(--u) * 8) calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 16) !important; text-align: left !important; } html body #hud section#opt-window .prem-card.premium{ background: linear-gradient(90deg, #ffffff, #e8f2fc) !important; border-color: #9ec2e6 !important; color: #10294f !important; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, 0.15) !important; } html body #hud section#opt-window .prem-card.gold{ background: linear-gradient(90deg, #fffdf4, #fff1cc) !important; border-color: #dfb758 !important; color: #3d2806 !important; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(120, 90, 20, 0.15) !important; } html body #hud section#opt-window .prem-card .prem-art{ grid-row: 1 / 3 !important; grid-column: 1 !important; width: calc(var(--u) * 84) !important; height: calc(var(--u) * 84) !important; border-radius: 50% !important; background: radial-gradient(circle, #fff4d6 40%, #ffe39a 70%, transparent 72%) !important; } html body #hud section#opt-window .prem-card .prem-art i{ --size: calc(var(--u) * 58) !important; } html body #hud section#opt-window .prem-card h4{ grid-column: 2 !important; grid-row: 1 !important; color: #1d3a78 !important; text-shadow: none !important; font-size: calc(var(--u) * 30) !important; } html body #hud section#opt-window .prem-card.gold h4{ color: #6b4a0e !important; } html body #hud section#opt-window .prem-card small{ grid-column: 2 !important; grid-row: 2 !important; min-height: 0 !important; color: #5b7396 !important; font-size: calc(var(--u) * 19) !important; } html body #hud section#opt-window .prem-card small b{ color: #c07a0e !important; } html body #hud section#opt-window .prem-card .prem-price{ grid-column: 3 !important; grid-row: 1 / 3 !important; color: #1d4f9a !important; text-shadow: none !important; font-size: calc(var(--u) * 28) !important; } html body #hud section#opt-window .prem-card.gold .prem-price{ color: #8c5a06 !important; } html body #hud section#opt-window .prem-card .pw-btn{ grid-row: 1 / 3 !important; width: 100% !important; } html body #hud section#opt-window .prem-card .pw-btn.prem-soon{ grid-column: 4 !important; } html body #hud section#opt-window .prem-card .pw-btn[data-gold-pack]{ grid-column: 5 !important; } html body #hud section#opt-window .prem-card.gold .pw-btn.prem-soon{ grid-column: 4 / 6 !important; } html body #hud section.window:is(#status-window, #skill-window, #quest-window, #settings-window, #equipment-window, #opt-window, #bot-window, #inventory-window, #party-window, #world-window, #ranking-window, #mail-window, #daily-window){ --window-scale: 0.85; } @media (max-height: 520px), (max-width: 640px){html body #hud section.window:is(#opt-window, #bot-window, #settings-window){ --window-scale: 0.62; }} @media (max-height: 520px), (max-width: 640px){html body #hud section#opt-window.painted-window{ max-height: none !important; }html body #hud section#opt-window.painted-window .pw-body{ max-height: calc((100dvh - 16px) / (var(--ui-zoom, 1) * var(--window-scale, 1)) - var(--u) * 250) !important; overflow-y: auto !important; }} /* ---- css/premium-social.css: 0 rules */ /* ---- css/supreme.css: 192 rules */ html body #hud section#opt-window.sup-window{ --pw-width: 600px !important; color: #10294f; } #hud #opt-window.sup-window .sup-body{ display: flex; flex-direction: column; gap: calc(var(--u) * 12); } #hud #opt-window.sup-window .sup-tab{ display: flex; flex-direction: column; gap: calc(var(--u) * 12); } #hud #opt-window.sup-window .sup-tab[hidden]{ display: none !important; } #hud #opt-window.sup-window b,#hud #opt-window.sup-window small,#hud #opt-window.sup-window em{ font-size: inherit; } #hud #opt-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 #opt-window.sup-window .sup-zen{ background-image: url(/ui/profile/coin.png); } #hud #opt-window.sup-window .pw-ico.sup-ico-crown{ background-image: url(/ui/new_menu_icons/premium_64.png); } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-status.on{ border-color: #9c7a36; background: linear-gradient(180deg, #ffe39a, #e2ab33); color: #3d2806; } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-purse .sup-unit:last-child{ margin-right: 0; } #hud #opt-window.sup-window .sup-tabs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: calc(var(--u) * 3) solid #cfe2f5; } #hud #opt-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 #opt-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; } #hud #opt-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 #opt-window.sup-window .sup-perks li{ font-size: inherit !important; } #hud #opt-window.sup-window .sup-perks li::before{ content: "✦ "; color: #e2ab33; } #hud #opt-window.sup-window .sup-perks b{ color: #1f5fc4; } #hud #opt-window.sup-window .sup-perks small{ color: #6d7a8c; font-size: calc(var(--u) * 17) !important; } #hud #opt-window.sup-window .sup-packs,#hud #opt-window.sup-window .sup-gearpacks{ display: flex; flex-direction: column; gap: calc(var(--u) * 8); } #hud #opt-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 #opt-window.sup-window .sup-gear .sup-gear-items{ display: block; line-height: 1.3; } #hud #opt-window.sup-window .sup-gear-intro{ padding: calc(var(--u) * 6) calc(var(--u) * 12); } #hud #opt-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 #opt-window.sup-window .sup-card.coin{ border-color: #dfb758; background: linear-gradient(90deg, #fffdf4, #fff1cc); } #hud #opt-window.sup-window .sup-card:not(.coin){ grid-template-columns: calc(var(--u) * 78) minmax(0, 1fr) calc(var(--u) * 190); } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-art.chest i{ background-image: url(/ui/mail/chest.png); } #hud #opt-window.sup-window .sup-art.tier0{ --size: calc(var(--u) * 66); } #hud #opt-window.sup-window .sup-art.tier1{ --size: calc(var(--u) * 60); } #hud #opt-window.sup-window .sup-art.tier2{ --size: calc(var(--u) * 54); } #hud #opt-window.sup-window .sup-art.tier3{ --size: calc(var(--u) * 48); } #hud #opt-window.sup-window .sup-art.tier4{ --size: calc(var(--u) * 42); } #hud #opt-window.sup-window .sup-card-text{ min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); } #hud #opt-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 #opt-window.sup-window .sup-card.coin h4{ color: #6b4a0e; } #hud #opt-window.sup-window .sup-card small{ color: #5b7396; font-size: calc(var(--u) * 18) !important; } #hud #opt-window.sup-window .sup-card small b{ color: #c07a0e; } #hud #opt-window.sup-window .sup-thb{ color: #8c5a06; font-size: calc(var(--u) * 26) !important; font-weight: 800; font-variant-numeric: tabular-nums; } #hud #opt-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 #opt-window.sup-window .sup-card .pw-btn.short{ filter: grayscale(.75); opacity: .7; } #hud #opt-window.sup-window .sup-card .pw-btn.armed{ filter: brightness(1.2) drop-shadow(0 0 calc(var(--u) * 6) #ffe27a); } #hud #opt-window.sup-window .sup-hint{ margin: 0; text-align: center; color: #3a5680; font-size: calc(var(--u) * 18) !important; line-height: 1.45; } #hud #opt-window.sup-window .sup-hint b{ color: #1d4f9a; } #hud #opt-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 #opt-window.sup-window .sup-price{ display: flex; flex-direction: column; } #hud #opt-window.sup-window .sup-price small{ color: #5b7396; font-size: calc(var(--u) * 17) !important; } #hud #opt-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 #opt-window.sup-window .sup-price em{ font-style: normal; font-weight: 800; font-size: calc(var(--u) * 20) !important; } #hud #opt-window.sup-window .up{ color: #17894a; } #hud #opt-window.sup-window .down{ color: #c9352f; } #hud #opt-window.sup-window .sup-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); } #hud #opt-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 #opt-window.sup-window .sup-stats b{ color: #10294f; font-size: calc(var(--u) * 22) !important; font-variant-numeric: tabular-nums; white-space: nowrap; } #hud #opt-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 #opt-window.sup-window .sup-demand .buy{ color: #17894a; } #hud #opt-window.sup-window .sup-demand .sell{ color: #c9352f; } #hud #opt-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 #opt-window.sup-window .sup-demand .bar i{ display: block; height: 100%; background: linear-gradient(90deg, #2fb36a, #17894a); transition: width .4s; } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-frames{ display: flex; gap: calc(var(--u) * 6); } #hud #opt-window.sup-window .sup-frames .pw-chip{ height: calc(var(--u) * 38); font-size: calc(var(--u) * 18) !important; } #hud #opt-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 #opt-window.sup-window .sup-chart svg{ width: 100%; height: 100%; display: block; } #hud #opt-window.sup-window .sup-chart .pw-empty{ color: #aab8cb; } #hud #opt-window.sup-window .sup-chart .grid{ stroke: #2a4775; stroke-width: 1; stroke-dasharray: 3 4; } #hud #opt-window.sup-window .sup-chart .axis{ stroke: #3f5f92; stroke-width: 1; } #hud #opt-window.sup-window .sup-chart text{ font: 600 11px 'Noto Sans Thai', Tahoma, sans-serif; fill: #9fb3d1; } #hud #opt-window.sup-window .sup-chart .line{ fill: none; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #hud #opt-window.sup-window .sup-chart .line.up{ stroke: #3ddc84; } #hud #opt-window.sup-window .sup-chart .line.down{ stroke: #ff6b61; } #hud #opt-window.sup-window .sup-chart .g0.up{ stop-color: #3ddc84; stop-opacity: .35; } #hud #opt-window.sup-window .sup-chart .g0.down{ stop-color: #ff6b61; stop-opacity: .35; } #hud #opt-window.sup-window .sup-chart .g1{ stop-color: #0f2447; stop-opacity: 0; } #hud #opt-window.sup-window .sup-chart .vb{ fill: #3ddc84; opacity: .75; } #hud #opt-window.sup-window .sup-chart .vs{ fill: #ff6b61; opacity: .75; } #hud #opt-window.sup-window .sup-chart .now{ stroke: #ffd75e; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } #hud #opt-window.sup-window .sup-chart .tag.up{ fill: #17894a; } #hud #opt-window.sup-window .sup-chart .tag.down{ fill: #c9352f; } #hud #opt-window.sup-window .sup-chart .tagt{ fill: #fff; font-weight: 800; } #hud #opt-window.sup-window .sup-chart .hover-x{ stroke: #cfe2f5; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; } #hud #opt-window.sup-window .sup-chart .hover-d.up{ fill: #3ddc84; stroke: #fff; stroke-width: 1.5; } #hud #opt-window.sup-window .sup-chart .hover-d.down{ fill: #ff6b61; stroke: #fff; stroke-width: 1.5; } #hud #opt-window.sup-window .sup-chart .hit{ fill: transparent; cursor: crosshair; } #hud #opt-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 #opt-window.sup-window .sup-tip b{ color: #ffd75e; } #hud #opt-window.sup-window .sup-tip .b{ color: #3ddc84; } #hud #opt-window.sup-window .sup-tip .s{ color: #ff8a82; } #hud #opt-window.sup-window .sup-trade{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); } #hud #opt-window.sup-window .sup-side{ gap: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 20) !important; } #hud #opt-window.sup-window .sup-side > :not(.pw-ribbon){ margin-left: calc(var(--u) * 12); margin-right: calc(var(--u) * 12); } #hud #opt-window.sup-window .sup-side.buy .pw-ribbon{ background: linear-gradient(180deg, #2fb36a, #17894a) !important; } #hud #opt-window.sup-window .sup-side.sell .pw-ribbon{ background: linear-gradient(180deg, #ef6b5f, #c9352f) !important; } #hud #opt-window.sup-window .sup-quote{ margin: calc(var(--u) * 4) 0 0; font-size: inherit !important; } #hud #opt-window.sup-window .sup-quote b{ font-size: calc(var(--u) * 28) !important; color: #7a5a1c; font-variant-numeric: tabular-nums; } #hud #opt-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 #opt-window.sup-window .sup-side input{ width: 100%; min-width: 0; } #hud #opt-window.sup-window .sup-quick{ display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 5); } #hud #opt-window.sup-window .sup-quick .pw-chip{ height: calc(var(--u) * 34); padding: 0; font-size: calc(var(--u) * 17) !important; } #hud #opt-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 #opt-window.sup-window .sup-est.bad{ color: #a02626; } #hud #opt-window.sup-window .sup-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); } #hud #opt-window.sup-window .sup-actions .pw-btn{ min-height: calc(var(--u) * 50); padding: 0; font-size: calc(var(--u) * 21) !important; } #hud #opt-window.sup-window .sup-lower{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); } #hud #opt-window.sup-window .sup-book{ padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 10); } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-depth li em{ font-style: normal; } #hud #opt-window.sup-window .sup-depth .head{ color: #6d7a8c; font-size: calc(var(--u) * 15) !important; } #hud #opt-window.sup-window .sup-depth .ask span{ color: #c9352f; font-weight: 700; } #hud #opt-window.sup-window .sup-depth .bid span{ color: #17894a; font-weight: 700; } #hud #opt-window.sup-window .sup-depth .mid{ justify-content: center; margin: calc(var(--u) * 4) 0; background: #eaf3fc; color: #1d4f9a; font-weight: 700; } #hud #opt-window.sup-window .sup-depth .none{ justify-content: center; color: #93a3ba; font-size: calc(var(--u) * 15) !important; } #hud #opt-window.sup-window .sup-orders-panel .pw-list{ max-height: calc(var(--u) * 240); } #hud #opt-window.sup-window .pw-note.bad{ color: #a02626; } @media (max-width: 720px){#hud #opt-window.sup-window .sup-trade,#hud #opt-window.sup-window .sup-lower,#hud #opt-window.sup-window .sup-perks{ grid-template-columns: 1fr; }#hud #opt-window.sup-window .sup-ticker{ grid-template-columns: 1fr; }#hud #opt-window.sup-window .sup-card,#hud #opt-window.sup-window .sup-card:not(.coin){ grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr) calc(var(--u) * 200); }#hud #opt-window.sup-window .sup-card.coin .sup-thb{ grid-column: 2; }#hud #opt-window.sup-window .sup-card.coin .pw-btn{ grid-column: 3; grid-row: 1 / 3; }} #hud #opt-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 #opt-window.sup-window .sup-pay-banner{ display: flex; flex-direction: column; gap: calc(var(--u) * 6); } #hud #opt-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 #opt-window.sup-window .sup-pay-banner .test{ background: #fff4d6; border: calc(var(--u) * 2) dashed #e2ab33; color: #7a5a1c; } #hud #opt-window.sup-window .sup-pay-banner .bonus{ background: linear-gradient(90deg, #e3f7ea, #d2f0dc); border: calc(var(--u) * 2) solid #7cc79a; color: #17683a; } #hud #opt-window.sup-window .sup-pay-banner .bonus b{ color: #0e7a3c; } #hud #opt-window.sup-window .sup-pay{ padding-bottom: calc(var(--u) * 12); border-color: #2f7fe0 !important; } #hud #opt-window.sup-window .sup-pay .pw-ribbon{ background: linear-gradient(180deg, #1b5fbf, #10407f) !important; } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-qr-box img{ width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } #hud #opt-window.sup-window .sup-pay-info{ display: flex; flex-direction: column; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 20) !important; } #hud #opt-window.sup-window .sup-pay-info p{ margin: 0; font-size: inherit !important; } #hud #opt-window.sup-window .sup-pay-info .amt{ font-size: calc(var(--u) * 46) !important; font-weight: 800; color: #10407f; line-height: 1; } #hud #opt-window.sup-window .sup-pay-info b{ color: #7a5a1c; } #hud #opt-window.sup-window .sup-pay-info .wait{ color: #1d4f9a; font-weight: 700; } #hud #opt-window.sup-window .sup-pay-info .wait span{ color: #6d7a8c; font-weight: 500; font-size: calc(var(--u) * 17) !important; } #hud #opt-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 #opt-window.sup-window .sup-pay-info li{ font-size: inherit !important; } #hud #opt-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; } #hud #opt-window.sup-window .sup-pay-actions{ display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-pay-result b{ font-size: calc(var(--u) * 28) !important; } #hud #opt-window.sup-window .sup-pay-result.ok b{ color: #17894a; } #hud #opt-window.sup-window .sup-pay-result.bad b{ color: #a02626; } #hud #opt-window.sup-window .sup-pay-result span{ grid-row: 2; font-size: calc(var(--u) * 20) !important; color: #3a5680; } #hud #opt-window.sup-window .sup-pay-result .pw-btn{ grid-row: 1 / 3; grid-column: 2; } @media (max-width: 720px){#hud #opt-window.sup-window .sup-pay-body{ grid-template-columns: 1fr; justify-items: center; }#hud #opt-window.sup-window .sup-qr-box{ width: calc(var(--u) * 320); }} #hud #opt-window.sup-window .sup-perks li{ display: flex; gap: calc(var(--u) * 8); align-items: baseline; } #hud #opt-window.sup-window .sup-perks li::before{ content: none; } #hud #opt-window.sup-window .sup-perk-ico{ flex: none; font-style: normal; } #hud #opt-window.sup-window .sup-card.sup-gear:not(.coin){ grid-template-columns: minmax(0, 1fr) calc(var(--u) * 150); } #hud #opt-window.sup-window .sup-gear-imgs{ display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin: calc(var(--u) * 4) 0; } #hud #opt-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 #opt-window.sup-window .sup-gear-img img{ width: 82%; height: 82%; object-fit: contain; image-rendering: pixelated; } #hud #opt-window.sup-window .sup-gear-imgs.big .sup-gear-img{ width: calc(var(--u) * 84); height: calc(var(--u) * 96); } #hud #opt-window.sup-window .sup-gear-imgs.big .sup-gear-img img{ width: 62%; height: 62%; } #hud #opt-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 #opt-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 #opt-window.sup-window .sup-confirm[hidden]{ display: none; } #hud #opt-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 #opt-window.sup-window .sup-confirm-box h3{ margin: 0 0 calc(var(--u) * 8); font-size: calc(var(--u) * 28) !important; } #hud #opt-window.sup-window .sup-confirm-body{ font-size: calc(var(--u) * 20) !important; } #hud #opt-window.sup-window .sup-confirm-body p{ margin: 0 0 calc(var(--u) * 6); } #hud #opt-window.sup-window .sup-confirm-body .sup-gear-imgs{ justify-content: center; } #hud #opt-window.sup-window .sup-confirm-price{ margin: calc(var(--u) * 10) 0; font-size: calc(var(--u) * 20) !important; } #hud #opt-window.sup-window .sup-confirm-price b{ color: #c07a0e; } #hud #opt-window.sup-window .sup-confirm-actions{ display: flex; gap: calc(var(--u) * 10); justify-content: center; } #hud #opt-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; } #hud #opt-window.sup-window .sup-hist{ display: flex; flex-direction: column; gap: calc(var(--u) * 4); max-height: calc(var(--u) * 230); overflow: auto; } #hud #opt-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 #opt-window.sup-window .sup-hist-row .s{ text-align: right; font-weight: 800; color: #1f8f4a; } #hud #opt-window.sup-window .sup-hist-row.bad .s{ color: #b3372b; } #hud #opt-window.sup-window .sup-hist-row .c{ font-weight: 800; } #hud #opt-window.sup-window .sup-pay[hidden],#hud #opt-window.sup-window .sup-pay-banner[hidden]{ display: none !important; } #hud #opt-window.sup-window button.sup-gear-img{ padding: 0; font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; } #hud #opt-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 #opt-window.sup-window .sup-confirm.item .sup-confirm-box{ text-align: left; } #hud #opt-window.sup-window .sup-item-head{ display: flex; gap: calc(var(--u) * 14); align-items: center; margin-bottom: calc(var(--u) * 10); } #hud #opt-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 #opt-window.sup-window .sup-item-pic img{ width: 76%; height: 76%; object-fit: contain; image-rendering: pixelated; } #hud #opt-window.sup-window .sup-item-head h4{ margin: 0 0 calc(var(--u) * 4); font-size: calc(var(--u) * 26) !important; color: #1d3a78; } #hud #opt-window.sup-window .sup-item-ref{ font-style: normal; color: #c07a0e; } #hud #opt-window.sup-window .sup-item-head small{ font-size: calc(var(--u) * 17) !important; color: #5b7396; } #hud #opt-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 #opt-window.sup-window .sup-item-stats li.ref{ color: #c07a0e; } #hud #opt-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 #opt-window.sup-window .sup-item-meta dt{ color: #5b7396; } #hud #opt-window.sup-window .sup-item-meta dd{ margin: 0; font-weight: 700; color: #10294f; } #hud #opt-window.sup-window .sup-item-meta dd.bad{ color: #b3372b; }