#pc-hud .pc-flask .fl-fill { position: absolute; left: 18%; right: 18%; bottom: 13%; top: auto; height: calc(var(--fill, 0) * 62%); z-index: 1; border-radius: 0 0 .9rem .9rem; pointer-events: none; mix-blend-mode: screen; opacity: .55; }
#pc-hud #pf-1 .fl-fill { background: linear-gradient(#ff8a7a, #c8202c); }
#pc-hud #pf-2 .fl-fill { background: linear-gradient(#8fc8ff, #2a5fd8); }
#pc-hud .pc-flask.empty .dk-disc { opacity: .18; filter: grayscale(1); }
.orb.has-es::before { content: ''; position: absolute; inset: 2.5%; border-radius: 50%; z-index: 3; pointer-events: none;
background: conic-gradient(from 180deg, #bfe9ff calc(var(--es, 0) * 360deg), rgba(120, 170, 210, .16) 0);
-webkit-mask: radial-gradient(circle, transparent 63%, #000 64.5%, #000 68%, transparent 69.5%); mask: radial-gradient(circle, transparent 63%, #000 64.5%, #000 68%, transparent 69.5%); filter: drop-shadow(0 0 .4rem #7fd0ff); }
.orb .esv { position: absolute; left: 0; right: 0; top: 19%; z-index: 4; text-align: center; font: 700 1.5rem/1 var(--sans); font-style: normal; color: #cfeeff; text-shadow: 0 1px 2px #000, 0 0 4px #0a2a44; pointer-events: none; }
#pc-hud .pc-skill.spirit-on .gi, #hotbar .slot.spirit-on .gi { filter: drop-shadow(0 0 .5rem #9fe8ff) drop-shadow(0 0 .9rem #4ab8ff); }
#hotbar .slot.spirit-on { box-shadow: 0 0 0 .2rem #7fd8ff inset; }
#belt .pot.none { opacity: .45; }
:root:not([lang="th"]) #hud #chat-tabs button[data-ch] { flex: 1 1 auto; }
.hud-charms { display: flex; gap: .1rem; pointer-events: auto; }
.hud-charms .charm { position: relative; width: 3rem; height: 3rem; flex: none; background: url(../assets/ui/dark/socket.png) center / 100% 100% no-repeat; --c: #e3b873; --fill: 1; }
.hud-charms .ci { position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--c) 34%, #0d0b09), #0d0b09 85%); }
.hud-charms .ci > * { width: 100%; height: 100%; object-fit: contain; }
.hud-charms .cf { position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
background: conic-gradient(var(--c) calc(var(--fill) * 360deg), rgba(0, 0, 0, .55) 0);
-webkit-mask: radial-gradient(circle, transparent 60%, #000 63%, #000 71%, transparent 74%); mask: radial-gradient(circle, transparent 60%, #000 63%, #000 71%, transparent 74%); }
.hud-charms .cr { position: absolute; inset: -6%; width: 112%; height: 112%; transform: rotate(-90deg); pointer-events: none; opacity: 0; }
.hud-charms .cr circle { fill: none; stroke: #fff; stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 2px var(--c)); }
.hud-charms .charm b { position: absolute; right: -.1rem; bottom: -.5rem; z-index: 2; font: 700 max(9px, 1.15rem)/1 var(--sans); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.hud-charms .charm.none .ci { filter: grayscale(1) brightness(.5); }
.hud-charms .charm.none .cf { opacity: .45; }
.hud-charms .charm.none b { color: #a59b86; }
.hud-charms .charm.fire { animation: charm-flash .5s ease-out; z-index: 1; }
.hud-charms .charm.fire .ci { box-shadow: 0 0 .7rem var(--c), 0 0 .2rem #fff inset; filter: brightness(1.35); }
.hud-charms .charm.fire .cr { opacity: 1; }
.hud-charms .charm.fire .cr circle { animation: charm-run var(--ms, 3000ms) linear forwards; }
@keyframes charm-flash { 0% { transform: scale(1.7); filter: brightness(2.6); } 60% { transform: scale(.94); filter: brightness(1.2); } 100% { transform: none; filter: none; } }
@keyframes charm-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
#pc-hud #pc-charms { position: absolute; left: 34rem; bottom: 4.3rem; }
#h-charms { display: none; position: absolute; z-index: 3; right: calc(10.6rem + var(--sar)); bottom: calc(12.6rem + var(--sab)); justify-content: flex-end; pointer-events: none; }
body.touch #h-charms { display: flex; }
body.touch #h-charms.hidden { display: none; }
#h-charms { gap: .4rem; }
#h-charms .charm { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)); }
#h-charms.c4 { gap: .22rem; }
#h-charms.c4 .charm { width: 2.2rem; height: 2.2rem; }
#h-charms.c4 .charm b { font-size: max(9px, 1rem); bottom: -.4rem; }
#pc-hud .pc-wset { position: absolute; left: 5rem; bottom: 9.5rem; height: 3.1rem; padding: 0 3rem 0 .5rem; display: flex; align-items: center; gap: .2rem; pointer-events: auto;
background: linear-gradient(#2a241c, #100d0a); border: 1px solid var(--brass); border-bottom-color: var(--brass-lo); border-radius: .5rem .5rem 0 0; box-shadow: 0 0 0 1px #000, 0 -.2rem .6rem rgba(0, 0, 0, .5); }
#pc-hud .pc-wset b { min-width: 2.5rem; height: 2.2rem; display: grid; place-items: center; font: 700 max(10px, 1.55rem)/1 var(--serif); color: var(--ink3); border-radius: .3rem; transition: color .12s, background .12s; }
#pc-hud .pc-wset:not(.two) b:nth-of-type(1), #pc-hud .pc-wset.two b:nth-of-type(2) { color: #1a1206; background: linear-gradient(#f3d98d, #b8893a); box-shadow: 0 0 .6rem rgba(243, 208, 120, .55); }
#pc-hud .pc-wset kbd { left: auto; right: .3rem; bottom: .6rem; transform: none; }
#pc-hud .pc-wset:hover { filter: brightness(1.25); }
#pc-hud .pc-wset.flash, #hotbar #b-swap.flash { animation: wset-flash .4s ease-out; }
@keyframes wset-flash { 0% { filter: brightness(2.4); } 100% { filter: brightness(1); } }
#pc-hud .pc-skill .ws, #hotbar .skill .ws { position: absolute; right: .3rem; top: .3rem; z-index: 3; padding: .1rem .35rem; font: 700 max(9px, 1.1rem)/1.1 var(--serif); font-style: normal; color: #ffe7a6;
background: rgba(16, 11, 4, .88); border: 1px solid var(--brass); border-radius: .25rem; pointer-events: none; }
#pc-hud .pc-skill .ws:empty, #hotbar .skill .ws:empty { display: none; }
#hotbar .skill .ws { z-index: 4; }
#hotbar #b-roll { --x: -.3rem; --y: -12.3rem; width: 5.2rem; height: 5.2rem; background-image: url(../assets/ui/dark/round_small.png); }
#hotbar #b-roll svg.hi { width: 58%; height: 58%; position: relative; z-index: 1; }
#hotbar #b-swap { --x: -16.5rem; --y: -4.3rem; width: 4.4rem; height: 4.4rem; background-image: url(../assets/ui/dark/round_small.png); }
#hotbar #b-swap b { font: 700 max(12px, 1.7rem)/1 var(--serif); color: var(--brass-hi); text-shadow: 0 1px 2px #000; margin-top: -.5rem; }
#hotbar #b-swap small { position: absolute; bottom: .6rem; font: 600 max(8px, .9rem)/1 var(--serif); color: var(--ink3); }
#hud #h-net { height: 3rem; padding: 0 .5rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; color: var(--ink2); font: 600 max(10px, 1.15rem)/1 var(--sans); white-space: nowrap; }
#hud #h-net.on { color: var(--ink); }
#h-net i, #ch-pop i { font-style: normal; font-variant-numeric: tabular-nums; }
#h-net .nb-ch { color: var(--brass-hi); font-weight: 700; } #h-net .nb-ch u { text-decoration: none; margin-left: .3rem; font-size: .9rem; color: var(--ink3); }
#h-net.off .nb-ch { color: var(--ink3); } #h-net.off .nb-ch u { visibility: hidden; }
#h-net .nb-on { display: inline-flex; align-items: center; gap: .35rem; } #h-net .nb-on svg { width: 1.5rem; height: 1.2rem; fill: var(--ink3); }
#h-net .nb-on em { font-style: normal; font-weight: 500; color: var(--ink3); display: inline-flex; gap: .3rem; } #h-net .nb-on > i { color: var(--ink); font-weight: 700; }
body:not(.touch) #hud #h-net { height: auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "on on" "ch ping"; row-gap: .45rem; padding: .25rem .5rem .2rem; }
body:not(.touch) #h-net .nb-ch { grid-area: ch; justify-self: start; } body:not(.touch) #h-net .nb-ping { grid-area: ping; }
body:not(.touch) #h-net .nb-on { grid-area: on; display: flex; padding-bottom: .45rem; border-bottom: 1px solid rgba(201, 162, 88, .22); } body:not(.touch) #h-net .nb-on > i { margin-left: auto; font-size: 1.3rem; color: var(--brass-hi); }
body.touch #h-net .nb-on .nb-w { display: none; }
#h-net .nb-ping { display: inline-flex; align-items: baseline; gap: .25rem; } #h-net .nb-ping small { font-size: .9rem; color: var(--ink3); }
#h-net .nb-ping s { align-self: center; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ink3); box-shadow: 0 0 .5rem currentColor; }
#h-net .nb-ping.good s { background: #6fd27c; color: #6fd27c; } #h-net .nb-ping.fair s { background: #e6c14e; color: #e6c14e; } #h-net .nb-ping.bad s { background: #e2533f; color: #e2533f; }
#h-net .nb-ping.fair i { color: #e6c14e; } #h-net .nb-ping.bad i { color: #ef7a68; }
#ch-pop { position: absolute; z-index: 7; top: calc(100% + .6rem); right: 0; width: 35rem; pointer-events: auto; padding: .4rem .6rem .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; color: var(--ink); box-shadow: 0 .8rem 2rem rgba(0,0,0,.6); }
#ch-pop.hidden { display: none; }
#ch-pop:not(.hidden) { display: flex; flex-direction: column; }
#ch-pop header { flex: none; }
#ch-pop .ch-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
#hud #ch-pop .ch-row { flex: none; }
#ch-pop header { display: flex; align-items: center; gap: .8rem; padding: .2rem .2rem .6rem; }
#ch-pop header b { font: 700 max(12px, 1.4rem)/1.2 var(--serif); color: var(--brass-hi); }
#ch-pop .ch-all { margin-left: auto; font: 600 max(10px, 1.15rem)/1.2 var(--sans); color: var(--ink2); } #ch-pop .ch-all i { color: var(--ink); }
#hud #ch-pop .x { width: 2.6rem; height: 2.6rem; color: var(--ink3); font-size: 1.3rem; }
#ch-pop .ch-list { display: flex; flex-direction: column; gap: .3rem; }
#hud #ch-pop .ch-row { display: grid; grid-template-columns: 5.4rem 1fr auto; align-items: center; gap: .6rem; min-height: 4rem; padding: 0 1rem; text-align: left; border: .8rem solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; color: var(--ink); }
#hud #ch-pop .ch-row:not(:disabled):hover, #hud #ch-pop .ch-row:not(:disabled):active { border-image-source: url(../assets/ui/dark/row_on.png); }
#hud #ch-pop .ch-row:disabled { cursor: default; } #hud #ch-pop .ch-row.cur { border-image-source: url(../assets/ui/dark/row_on.png); }
#ch-pop .ch-row b { font: 700 max(12px, 1.4rem)/1 var(--serif); color: var(--brass-hi); }
#ch-pop .ch-n { font: 500 max(10px, 1.1rem)/1.2 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ch-pop .ch-n i { color: var(--ink2); font-weight: 700; }
#ch-pop .ch-st { font: 700 max(10px, 1.1rem)/1 var(--sans); font-style: normal; }
#ch-pop .ch-st.calm { color: #6fd27c; } #ch-pop .ch-st.mid { color: #c9d27c; } #ch-pop .ch-st.busy { color: #e6c14e; } #ch-pop .ch-st.full { color: #ef7a68; } #ch-pop .ch-st.here { color: var(--teal); }
#ch-pop .ch-row.wait .ch-st { color: var(--ink2); }
#ch-pop .ch-priv { margin: .5rem 1.8rem 0; display: flex; justify-content: space-between; font: 500 max(10px, 1.1rem)/1.2 var(--sans); color: var(--ink3); } #ch-pop .ch-priv i { color: var(--ink2); font-weight: 700; }
#ch-pop .ch-hint { margin: .6rem .2rem 0; font: 400 max(9px, 1.05rem)/1.4 var(--sans); color: var(--ink3); }
body.touch #hud #h-net { align-self: flex-end; width: max-content; height: 2.6rem; padding: 0 .3rem; gap: .5rem; font-size: max(9px, 1.05rem); border-width: .6rem; }
body.touch #h-mapwrap { gap: .3rem; }
body.touch #ch-pop { width: min(34rem, calc(100vw - 12rem)); top: 0; right: calc(100% + .6rem); }
#hotbar #b-loot { --x: -5.6rem; --y: -12.5rem; width: 4.6rem; height: 4.6rem; background-image: url(../assets/ui/dark/round_small.png); }
#hotbar #b-loot svg.hi { width: 58%; height: 58%; position: relative; z-index: 1; }
#hotbar #b-loot.off { filter: grayscale(.9) brightness(.62); }
#hotbar #b-loot.on { filter: drop-shadow(0 0 .8rem var(--brass-hi)) brightness(1.15); }
#hotbar #b-loot .n { position: absolute; z-index: 2; right: -.5rem; top: -.5rem; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; display: grid; place-items: center; border-radius: 1rem; border: 1px solid var(--brass); background: rgba(8,9,12,.92); font: 700 max(9px, 1.05rem)/1 var(--sans); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
#hotbar #b-loot .n:empty { display: none; }
#loot-list { position: absolute; z-index: 4; right: calc(13.2rem + var(--sar)); bottom: calc(15.6rem + var(--sab)); width: 25rem; max-width: calc(100vw - 30rem); pointer-events: auto; padding: .2rem .4rem .4rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; color: var(--ink); box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.55); }
#loot-list.hidden { display: none; }
#loot-list header { display: flex; align-items: center; gap: .6rem; padding: 0 .2rem .3rem; font: 700 max(11px, 1.2rem)/1.2 var(--serif); color: var(--brass-hi); }
#loot-list header i { font: 700 max(10px, 1.1rem)/1 var(--sans); font-style: normal; color: var(--ink2); }
#hud #loot-list .x { margin-left: auto; width: 2.8rem; height: 2.6rem; color: var(--ink3); font-size: 1.3rem; }
#loot-list .ll-rows { display: flex; flex-direction: column; gap: .25rem; max-height: 12.8rem; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
#hud #loot-list .ll-row { flex: none; display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: 0 .2rem; text-align: left; }
#loot-list .ll-nm { flex: 1 1 auto; min-width: 0; padding: .45rem .8rem; border: 1px solid transparent; font: 600 max(11px, 1.25rem)/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#loot-list .ll-row small { flex: none; min-width: 4.6rem; text-align: right; font: 500 max(9px, 1rem)/1 var(--sans); color: var(--ink3); }
#loot-list .ll-row.go .ll-nm { outline: 2px solid #fff4c8; outline-offset: -2px; } #loot-list .ll-row.go small { color: var(--brass-hi); }
#hud #loot-list .ll-row:active .ll-nm { filter: brightness(1.35); }
body.touch #hud #ch-pop .ch-row { min-height: 4.4rem; }
#h-boss { position: absolute; z-index: 3; left: 50%; top: calc(1.4rem + var(--sat)); transform: translateX(-50%); width: 58rem; max-width: 46vw; display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
#h-boss.hidden { display: none; }
body.patch-pending #h-boss { top: calc(var(--patch-h, 0px) + .8rem + var(--sat)); }
#h-boss .bb-top { display: flex; align-items: baseline; justify-content: center; gap: .8rem; max-width: 100%; }
#h-boss .bb-name { font: 700 max(14px, 2.2rem)/1.15 var(--serif); letter-spacing: .03em; color: #ff9c4a; text-shadow: 0 1px 0 #000, 0 0 .5rem rgba(0,0,0,.9), 0 0 1.4rem rgba(255,110,40,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#h-boss .bb-lv { font: 600 max(10px, 1.2rem)/1 var(--sans); color: var(--ink2); text-shadow: 0 1px 2px #000; white-space: nowrap; }
#h-boss .bb-el { align-self: center; padding: .15rem .7rem; border-radius: 1rem; border: 1px solid rgba(20,14,24,.85); font: 700 max(9px, 1rem)/1.3 var(--sans); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.6); white-space: nowrap; }
#h-boss .bb-el.hidden { display: none; }
#h-boss .bb-bar { position: relative; width: 100%; height: 2.3rem; background: linear-gradient(#0b0807, #1a100d); border: 1px solid #050403; box-shadow: 0 0 0 1px var(--brass-lo), 0 0 0 2px #050403, 0 .3rem 1rem rgba(0,0,0,.6); clip-path: polygon(.9rem 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, .9rem 100%, 0 50%); }
#h-boss .bb-bar u, #h-boss .bb-bar i { position: absolute; left: 0; top: 0; bottom: 0; text-decoration: none; }
#h-boss .bb-bar u { background: linear-gradient(#f4d8a8, #c98f52); opacity: .85; }
#h-boss .bb-bar i { background: linear-gradient(#e2443a 0%, #b81f1c 45%, #7c1010 100%); box-shadow: inset 0 1px 0 rgba(255,190,170,.45), inset 0 -.4rem .6rem rgba(40,0,0,.45); transition: width .12s linear; }
#h-boss .bb-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 max(9px, 1.1rem)/1 var(--sans); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
#h-boss .bb-mods { min-height: 1.3rem; font: 600 max(9px, 1.05rem)/1.2 var(--sans); color: #ffd27a; text-shadow: 0 1px 2px #000, 0 0 3px #000; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.touch #h-boss { width: 30rem; max-width: calc(100vw - 52rem - var(--sal) - var(--sar)); min-width: 20rem; top: calc(.6rem + var(--sat)); gap: .15rem; }
body.touch #h-boss .bb-name { font-size: max(11px, 1.4rem); } body.touch #h-boss .bb-bar { height: 1.5rem; }
#h-boss .bb-mv { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 0; }
#h-boss .bb-mv:empty { display: none; }
#h-boss .bb-mi { pointer-events: auto; position: relative; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%; border: 1px solid rgba(255,214,140,.5); background: radial-gradient(#2a1a12, #0b0706); box-shadow: 0 0 0 1px #050403, 0 .2rem .5rem rgba(0,0,0,.6); overflow: hidden; cursor: help; opacity: .8; transition: transform .15s, opacity .15s, box-shadow .15s; }
#h-boss .bb-mi img { width: 100%; height: 100%; display: block; pointer-events: none; }
#h-boss .bb-mi.on { opacity: 1; transform: scale(1.28); box-shadow: 0 0 0 1px #050403, 0 0 0 2px #ff9c4a, 0 0 1rem rgba(255,120,60,.95); }
#h-boss .bb-say { order: 9; font: 700 max(10px, 1.2rem)/1 var(--sans); color: #ffd9a8; text-shadow: 0 1px 2px #000, 0 0 3px #000; opacity: 0; transition: opacity .35s; white-space: nowrap; }
#h-boss .bb-say.on { opacity: 1; }
body.touch #h-boss .bb-mi { width: 2.3rem; height: 2.3rem; } body.touch #h-boss .bb-say { font-size: max(9px, 1rem); }
.fk { position: relative; }
.fk img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.7)); }
.fk .fk-f { clip-path: inset(var(--lv, 0%) 0 0 0); transition: clip-path .45s cubic-bezier(.3, .7, .3, 1); filter: none; }
.fk .fk-s { clip-path: inset(var(--lv, 0%) 0 calc(100% - var(--lv, 0%) - 2.4%) 0); transition: clip-path .45s cubic-bezier(.3, .7, .3, 1); filter: brightness(1.9) saturate(1.15); opacity: .85; }
.fk.dry .fk-s, .fk.full .fk-s { display: none; }
#pc-hud .pc-flask .dk-disc.fk { display: block; inset: 9% 6% 7%; }
#pc-hud .pc-flask.has-art .fl-fill { display: none; }
#pc-hud .pc-flask.none .dk-disc.fk { opacity: 1; filter: none; }
#belt .pot .fk-box { position: absolute; inset: 7% 8% 8%; display: none; }
#belt .pot.has-art .fk-box { display: block; } #belt .pot.has-art > img.hi { display: none; }
#belt .pot.has-art.none { opacity: 1; }