#pc-hud .ph-tab { left: 10.2rem; width: 57.2rem; }
#pc-hud .dk-menu { gap: .3rem; }
#pc-hud .pc-menu { width: 3.55rem; height: 3.55rem; }
#hotbar #b-bot { --x: -10.7rem; --y: -12.5rem; }
#botwin .bot-note + h4 { margin-top: .4rem; }
#hud #h-event { height: 2.8rem; padding: 0 .6rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem;
font: 600 max(10px, 1.15rem)/1 var(--sans); color: var(--ink2); white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: 0 0 1.2rem rgba(243, 196, 92, .28); }
#h-event b { font: 800 max(11px, 1.35rem)/1 var(--sans); letter-spacing: .03em; color: #ffd66b; text-shadow: 0 0 .8rem rgba(255, 196, 70, .65), 0 1px 1px #000; }
#h-event span { font-variant-numeric: tabular-nums; color: var(--ink); }
body.touch #hud #h-event { align-self: flex-end; width: max-content; height: 2.4rem; padding: 0 .3rem; gap: .5rem; font-size: max(9px, 1.05rem); border-width: .6rem; }
body.touch #h-event b { font-size: max(10px, 1.2rem); }
@media (prefers-reduced-motion: no-preference) { #h-event b { animation: ev-glow 2.4s ease-in-out infinite; } }
@keyframes ev-glow { 50% { text-shadow: 0 0 1.4rem rgba(255, 214, 107, .95), 0 1px 1px #000; } }
body.touch .inv-grid, body.touch .inv-eq .wslot { touch-action: none; }
body.touch .bagwin.carry .inv-grid .cell.sel { z-index: 3; transform: translate(-.2rem, -.5rem) scale(1.08); filter: drop-shadow(0 .6rem .5rem rgba(0, 0, 0, .8)) brightness(1.15); transition: transform .12s ease-out; outline: .2rem solid #8fe89b; outline-offset: .1rem; }
body.touch .bagwin.carry .inv-grid .cell.empty { box-shadow: inset 0 0 0 1px rgba(127, 224, 138, .34); }
.drag-ghost.finger { opacity: .97; filter: drop-shadow(0 .9rem 1rem rgba(0, 0, 0, .8)); }
body.touch .inv-card .d-move { flex: none; margin: 0; padding: .4rem .6rem; text-align: center; font-size: max(10px, 1.15rem); line-height: 1.35; color: #a9e6b3; border: 1px dashed rgba(127, 224, 138, .42); background: rgba(40, 90, 52, .18); }
#settings .set-note { margin: -.2rem .2rem .2rem; font-size: max(10px, 1.1rem); color: var(--ink3); }
#hud #loot-list header .ll-names { margin-left: auto; min-height: 2.6rem; padding: 0 .8rem; font: 600 max(10px, 1.1rem)/1 var(--sans); color: var(--ink3); white-space: nowrap; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
#hud #loot-list header .ll-names.on { color: var(--brass-hi); border-image-source: url(../assets/ui/dark/row_on.png); }
#hud #loot-list header .ll-names + .x { margin-left: 0; }
#h-menu .icons { display: grid; grid-template-columns: repeat(2, auto); max-height: calc(100vh - 6.4rem - var(--sat, 0px) - var(--sab, 0px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#hud #h-menu .icons button > span { white-space: nowrap; }
.drag-ghost .dg-out { display: none; position: absolute; left: 50%; top: 100%; transform: translate(-50%, .3rem); padding: .2rem .7rem; font: 700 max(10px, 1.15rem)/1.3 var(--sans); font-style: normal; white-space: nowrap; color: #ffd9d2; background: rgba(120, 22, 12, .92); border: 1px solid #ff7a66; }
.drag-ghost.out .dg-out { display: block; }
.drag-ghost.out { filter: drop-shadow(0 0 .8rem rgba(255, 90, 70, .9)); }
body.touch .inv-card .d-bin { flex: 1; margin: 0; padding: .7rem 1rem; text-align: center; font: 600 max(11px, 1.25rem)/1.3 var(--sans); color: #ffb9ae; border: 1px dashed rgba(255, 122, 102, .7); background: rgba(120, 22, 12, .28); }
body.touch .inv-card .d-bin.on { color: #fff; background: rgba(170, 34, 20, .75); border-style: solid; }
.mk-ask { flex-wrap: wrap; row-gap: .5rem; }
.mk-orbs { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.mk-orbs > p { margin: 0; font-size: max(10px, 1.15rem); line-height: 1.3; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-orbs > p b { font-weight: 600; color: var(--r2); }
.mk-orbrow { display: flex; gap: .3rem; }
.win .mk-orbrow button { box-sizing: border-box; flex: 1 1 0; max-width: 4.6rem; height: 3.8rem; min-width: 0; min-height: 0; padding: 0; border-width: .6rem; display: grid; place-items: center; }
.win .mk-orbrow button.on { border-image-source: url(../assets/ui/dark/btn_down.png) !important; box-shadow: inset 0 0 0 1px rgba(216, 184, 113, .8), 0 0 .9rem rgba(216, 184, 113, .4); }
.mk-ask .mk-orbrow .coin { width: 2.5rem; height: 2.5rem; pointer-events: none; }
.mk-boxes { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.4rem; }
.mk-boxes > span { display: flex; align-items: center; gap: .4rem; }
.mk-box .mk-boxes b { flex: none; }
.mk-hsum > div:last-child { flex: 1; }
.mk-boxes small { color: var(--ink3); font-size: max(10px, 1.1rem); } .mk-boxes small i { font-style: normal; }
.mk-hrow time { font-variant-numeric: tabular-nums; color: var(--ink2); }
.mk-hdet .mk-cost > span b { font-size: max(12px, 1.4rem); } .mk-hdet .mk-cost u { text-decoration: none; color: var(--ink3); font-size: max(10px, 1.15rem); }
.mk-p u { text-decoration: none; font-weight: 400; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cost .mk-orbn { gap: .4rem; font-size: max(10px, 1.15rem); color: var(--ink3); }
.mk-orbn u { text-decoration: none; color: var(--r2); } .mk-buy .mk-orbn b { font: 700 max(11px, 1.3rem) var(--serif); }
.mk-purse { flex-wrap: wrap; gap: .2rem 1.4rem; }
.mk-search select.mk-cur { max-width: 15rem; }
body.touch .mk-search select.mk-cur { max-width: 11rem; }
body.touch .win .mk-orbrow button { height: 3.4rem; min-width: 0 !important; padding: 0 !important; border-width: .4rem; }
body.touch .mk-ask .mk-orbrow .coin { width: 2.2rem; height: 2.2rem; }
#tip .tip-cmp { display: flex; align-items: flex-start; gap: .6rem; }
#tip.side-r .tip-cmp:not(.only) { flex-direction: row-reverse; }
.itip .it-worn { padding: .25rem 1rem; text-align: center; font: 700 max(10px, 1.1rem)/1.4 var(--sans); letter-spacing: .08em; color: #17120a; background: linear-gradient(#ecd392, #b0843a); }
.itip.worn { filter: saturate(.92); }
.itip .it-cmp { font-size: max(10px, 1.2rem); }
.itip .cmp-h { margin-bottom: .2rem; font-weight: 600; color: var(--brass-hi, #e7c97f); }
.itip .cmp-h b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itip .it-cmp .cmp-n b { margin-left: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.itip .it-cmp b.up { color: #7fe08a; } .itip .it-cmp b.dn { color: #ff8f7a; } .itip .it-cmp b.eq { color: var(--ink3); }
.itip .cmp-g { margin-top: .4rem; }
.itip .cmp-gh { font: 700 max(9px, 1.05rem)/1.5 var(--sans); letter-spacing: .1em; }
.itip .cmp-g.up .cmp-gh, .itip .cmp-g.up .it-m { color: #7fe08a; }
.itip .cmp-g.dn .cmp-gh, .itip .cmp-g.dn .it-m { color: #ff8f7a; }
.itip .cmp-same, .itip .cmp-note { color: var(--ink3); }
.inv-card .d-cmp { display: none; }
body.touch .bagwin.has-sel .inv-card .d-cmp { display: block; position: absolute; z-index: 2; left: .4rem; top: .4rem; box-sizing: border-box; min-width: 3.6rem; height: 3.4rem; min-height: 0; padding: 0 .5rem; font: 700 max(10px, 1.1rem)/1 var(--sans); color: var(--ink2); border: 1px solid rgba(216, 184, 113, .55); border-image: none; border-radius: .4rem; background: rgba(18, 15, 11, .92); }
body.touch .bagwin.has-sel .inv-card .d-cmp.on { color: #17120a; border-color: #f0dba0; background: linear-gradient(#ecd392, #b0843a); }
body.touch.shopping .inv-card .d-cmp, body.touch.appraising .inv-card .d-cmp { display: none !important; }
#party .pf-row { padding-right: 2.6rem; cursor: pointer; }
.pf-more { position: absolute; right: 0; top: 0; bottom: 0; width: 2.2rem; display: grid; place-items: center; font: 700 max(13px, 1.7rem)/1 var(--sans); font-style: normal; color: var(--ink2); border-left: 1px solid rgba(216, 184, 113, .22); border-radius: 0 .3rem .3rem 0; }
.pf-more:hover { color: var(--brass-hi); background: rgba(216, 184, 113, .14); }
.pf-fol { display: none; flex: none; margin-left: auto; padding: 0 .5rem; font: 700 max(9px, 1.05rem)/1.45 var(--sans); font-style: normal; color: #10210f; background: #8fe39b; border-radius: .3rem; }
.pf-row.follow { border-color: #8fe39b; box-shadow: 0 0 .9rem rgba(127, 224, 138, .5), inset 0 0 0 1px rgba(127, 224, 138, .35); }
.pf-row.follow .pf-fol { display: inline-block; }
body.touch #party .pf-row { padding-right: 3rem; }
body.touch .pf-more { width: 2.7rem; }
.pf-row.follow .pf-n small { display: none; }
#filterwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104rem; height: 66rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 10; }
body.touch #filterwin { left: calc(.6rem + var(--sal)); right: calc(.6rem + var(--sar)); top: calc(.6rem + var(--sat)); bottom: calc(.6rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; transform: none; }
.fw { flex: 1; min-height: 0; display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: 1.2rem; }
.fw-list { min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.fw-list h4, .fw-form h5, .fw-intro h5 { margin: 0; font: 600 max(11px, 1.25rem)/1.4 var(--serif); letter-spacing: .1em; color: var(--brass); }
.fw-list h4 small { font: 400 max(10px, 1.1rem) var(--sans); color: var(--ink3); letter-spacing: 0; }
.fw-items { flex: 1; min-height: 4rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.fw-items .muted { margin: 0; padding: 1rem .6rem; text-align: center; line-height: 1.5; font-size: max(10px, 1.15rem); }
.win .row.fw-f { min-height: 4rem; padding: .3rem 1rem; }
.win .row.fw-f.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
.win .row.fw-f small.on { color: #8fe39b; font-weight: 700; }
.fw-new { flex: none; display: flex; flex-direction: column; gap: .5rem; }
.fw-new > span { font-size: max(10px, 1.15rem); color: var(--ink2); }
#filterwin select, #filterwin input[type=text], #filterwin input[type=number], #filterwin textarea, #botwin .bot-fl select {
box-sizing: border-box; min-height: 3.6rem; padding: 0 1rem; color: var(--ink); background: none; border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; font: 500 max(12px, 1.3rem) var(--sans); outline: none; }
#filterwin select { appearance: none; -webkit-appearance: none; }
#filterwin select option { background: #15120e; color: var(--ink); }
#filterwin textarea { width: 100%; padding: .6rem 1rem; min-height: 0; resize: none; font: 400 max(10px, 1.1rem)/1.35 ui-monospace, monospace; word-break: break-all; user-select: text; -webkit-user-select: text; }
#filterwin input { user-select: text; -webkit-user-select: text; }
.fw-paste { flex: none; display: flex; flex-direction: column; gap: .5rem; }
.fw-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.fw-head { flex: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fw-head .fw-name { flex: 1 1 16rem; min-width: 10rem; font-weight: 700; font-size: max(13px, 1.5rem) !important; }
.fw-head.rule b { font: 700 max(13px, 1.6rem) var(--serif); color: var(--brass-hi); }
.fw-head .fw-prev { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; min-height: 3.6rem; overflow: hidden; }
.fw-on { padding: 0 1rem; font-weight: 700; color: #8fe39b; white-space: nowrap; }
.fw-hint { flex: none; margin: 0; font-size: max(10px, 1.15rem); line-height: 1.5; color: var(--ink3); }
.fw-rules { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.fw-rule { flex: none; display: flex; align-items: center; gap: .5rem; min-height: 4.2rem; padding: .2rem .5rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.fw-rule.hid .fw-what { color: var(--ink3); text-decoration: line-through; text-decoration-color: rgba(255, 120, 100, .5); }
.fw-rule.rest { border-image-source: url(../assets/ui/dark/row_on.png); opacity: .92; }
.fw-no { flex: none; width: 2.2rem; text-align: center; font: 700 max(11px, 1.3rem) var(--serif); color: var(--ink3); }
#filterwin .fw-rule button { min-height: 3.2rem; padding: 0 .8rem; border-width: .7rem; font-size: max(11px, 1.2rem); }
#filterwin .fw-vis { flex: none; min-width: 5.6rem; color: #8fe39b; }
.fw-rule.hid .fw-vis { color: #ff8f7a; }
#filterwin .fw-rule .fw-sum, .fw-rule span.fw-sum { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; text-align: left; font-weight: 500; white-space: normal; }
#filterwin .fw-rule button.fw-sum { border-image: none; border: 0; padding: 0 .4rem; }
.fw-what { min-width: 0; font-size: max(11px, 1.25rem); line-height: 1.35; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fw-what i { font-style: normal; color: var(--ink3); }
#filterwin .fw-bot { flex: none; color: var(--ink3); }
#filterwin .fw-bot.on { color: #17120a; border-image-source: url(../assets/ui/dark/btn_primary.png); }
.fw-mv { flex: none; display: flex; gap: .2rem; min-width: 10.4rem; }
#filterwin .fw-mv button { min-width: 3.2rem; padding: 0; }
.fw-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fw-foot small { color: var(--ink3); font-size: max(10px, 1.15rem); }
.fw-plate { flex: none; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .15em .6em; border: 1px solid transparent; font: 600 max(11px, 1.3rem)/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-plate.sm { max-width: 46%; font-size: max(10px, 1.15rem) !important; }
.fw-plate .fw-bell, .fw-plate .fw-ray { flex: none; font-style: normal; font-size: .85em; color: #ffe9a8; }
.fw-plate .fw-ray { width: .35em; height: 1.2em; background: linear-gradient(transparent, currentColor); border-radius: .2em; }
.fw-hidden { padding: .1em .8em; color: #ff8f7a; border: 1px dashed rgba(255, 143, 122, .6); font-weight: 700; }
.fw-form { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: .5rem; padding: .8rem 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.fw-form h5 { margin-top: .4rem; } .fw-form h5:first-child { margin-top: 0; }
.fw-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: .3rem 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(140, 111, 63, .16); }
.fw-row > label { font-size: max(11px, 1.25rem); color: var(--ink2); }
.fw-row > .fw-tip { grid-column: 2; font-size: max(9px, 1.05rem); color: var(--ink3); }
.fw-row > .fw-tip:empty { display: none; }
.fw-chips, .fw-sws, .fw-ids { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.fw-ids { max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: .4rem; background: rgba(0, 0, 0, .25); }
#filterwin .fw-chip, #botwin .bot-chip { min-height: 3.2rem; padding: 0 .9rem; border-width: .7rem; font: 600 max(11px, 1.2rem) var(--sans); color: var(--ink3); }
#filterwin .fw-chip.on, #botwin .bot-chip.on { border-image-source: url(../assets/ui/dark/btn_down.png) !important; color: var(--brass-hi); box-shadow: inset 0 0 0 1px rgba(216, 184, 113, .65); }
#filterwin .fw-chips.rar .fw-chip.on { color: inherit; }
#filterwin .fw-chips.rar .fw-chip:not(.on) { filter: saturate(.35) brightness(.7); }
#filterwin .fw-chip.hide.on { color: #ff8f7a; box-shadow: inset 0 0 0 1px rgba(255, 143, 122, .7); }
#filterwin .fw-sw { width: 3rem; height: 3rem; min-height: 0; padding: 0; border: 2px solid #000; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(216, 184, 113, .45); }
#filterwin .fw-sw.on { box-shadow: 0 0 0 2px #8fe39b, 0 0 .9rem rgba(127, 224, 138, .7); }
.fw-own { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .5rem; min-height: 3.2rem; font-size: max(10px, 1.15rem); color: var(--ink3); cursor: pointer; }
.fw-own input { width: 3rem; height: 3rem; padding: 0; border: 0; background: none; cursor: pointer; }
.fw-own.on { color: #8fe39b; }
.fw-nums { display: inline-flex; align-items: center; gap: .6rem; } .fw-nums i { font-style: normal; color: var(--ink3); }
#filterwin .fw-nums input { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }
#filterwin .fw-text { width: min(100%, 30rem); }
.fw-intro { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.fw-intro p { margin: 0; line-height: 1.6; color: var(--ink2); } .fw-intro b { color: var(--brass-hi); }
body.touch .fw { grid-template-columns: 21rem minmax(0, 1fr); gap: .8rem; }
body.touch .fw.in-rule { grid-template-columns: minmax(0, 1fr); } body.touch .fw.in-rule .fw-list { display: none; }
body.touch .fw-row { grid-template-columns: 11rem minmax(0, 1fr); }
body.touch .fw-mv { min-width: 0; } body.touch .fw-hint { display: none; }
body.touch #filterwin .fw-rule .fw-bot { padding: 0 .5rem; }
body.touch .fw-plate.sm { display: none; }
.set-loot { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.set-loot select { min-width: 0; max-width: 22rem; }
.bot-pk { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .2rem .2rem; }
.bot-pk[hidden], .bot-fl[hidden] { display: none; }
#botwin .bot-orbs { margin: .2rem 0 .3rem 1rem; padding: .3rem .5rem; border-left: 2px solid rgba(216, 184, 113, .35); }
#botwin .bot-orbs[hidden] { display: none; }
#botwin .bot-sub { font: 600 max(11px, 1.15rem) var(--sans); color: var(--ink2); }
#botwin .bot-sub small { color: var(--ink3); font-weight: 400; }
#botwin .bot-orbk .bot-chip { min-height: 2.8rem; padding: 0 .7rem; font-size: max(10.5px, 1.1rem); }
#botwin .bot-at { align-items: center; gap: .8rem; }
#botwin .bot-at .bot-pk { flex-wrap: nowrap; padding: 0; }
#botwin .bot-at .bot-chip { min-width: 5.2rem; }
#botwin .bot-at[hidden], #botwin .bot-note[hidden] { display: none; }
.bot-fl > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); } .bot-fl b { color: var(--r2); }
.bot-sl { display: flex; flex-direction: column; gap: .4rem; padding: .3rem .2rem .2rem; }
.bot-row { display: grid; grid-template-columns: 1.6rem 4.8rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .3rem .6rem;
border: 1px solid rgba(216, 184, 113, .14); border-radius: .3rem; background: rgba(0, 0, 0, .28); }
.bot-row.turn { border-color: rgba(72, 194, 176, .65); box-shadow: inset 0 0 1.4rem rgba(72, 194, 176, .16); }
.bot-n { font: 700 max(12px, 1.4rem)/1 var(--serif); color: var(--ink3); text-align: center; }
.bot-row.turn .bot-n { color: var(--teal); }
.win button.bot-ic { position: relative; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; min-width: 0; min-height: 0; padding: 0;
border: 1px solid var(--iron-hi) !important; border-image: none !important; border-radius: .3rem; background: #0b0908 !important; overflow: hidden; }
.win button.bot-ic img, .win button.bot-ic svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win button.bot-ic.has svg { inset: 18%; width: 64%; height: 64%; }
.win button.bot-ic.on { border-color: var(--brass-hi) !important; box-shadow: 0 0 0 1px var(--brass-hi), 0 0 1rem rgba(216, 184, 113, .45); }
.bot-plus { font: 400 max(18px, 2.6rem)/1 var(--sans); color: var(--ink3); }
.bot-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.bot-empty { color: var(--ink3); font-weight: 400; }
.bot-row select { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 21rem; max-width: 100%; min-width: 0; height: 3.6rem; min-height: 28px; padding: 0 2.6rem 0 1.1rem;
color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d8b871' stroke-width='1.4'/%3E%3C/svg%3E") right 1rem center / 1rem auto no-repeat;
border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; border-radius: 0; font: 600 max(12px, 1.3rem) var(--sans); cursor: pointer; outline: none; text-overflow: ellipsis; }
.bot-row select option { background: #15120e; color: var(--ink); }
.bot-row select option:disabled { color: var(--brass-hi); font-weight: 700; }
.bot-row select:disabled { opacity: .4; cursor: default; }
.bot-pal { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.1rem .2rem .3rem; padding: .6rem; border: 1px solid rgba(216, 184, 113, .4); border-radius: .3rem; background: rgba(8, 6, 5, .94); }
.bot-pal[hidden] { display: none; }
.win button.bot-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; width: 8.6rem; min-height: 0; padding: .5rem .3rem;
border: 1px solid var(--iron) !important; border-image: none !important; border-radius: .3rem; background: rgba(255, 255, 255, .03) !important; color: var(--ink2) !important; }
.win button.bot-pick:hover { border-color: var(--brass) !important; }
.win button.bot-pick.on { border-color: var(--brass-hi) !important; background: rgba(216, 184, 113, .12) !important; }
.bot-pi { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; font-size: max(16px, 2rem); color: var(--ink3); }
.bot-pi img, .bot-pi svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .2rem; }
.bot-pn { max-width: 100%; font: 600 max(10px, 1.1rem)/1.25 var(--sans); text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.bot-pick em { position: absolute; top: .2rem; right: .4rem; font: 700 max(10px, 1.1rem) var(--sans); font-style: normal; color: var(--teal); }
body.touch .bot-row { grid-template-columns: 1.4rem 4.4rem minmax(0, 1fr) auto; gap: .6rem; }
body.touch .win button.bot-ic { width: 4.4rem; height: 4.4rem; }
body.touch .bot-row select { width: 17rem; }
#shop.stash { width: auto; height: auto; max-width: calc(100vw - 4rem); }
#shop.stash .shop-list, #shop.stash > .inv-act, #shop.stash > footer { display: none; }
#shop .stash-box[hidden] { display: none; }
#shop .stash-box { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; }
.st-tabs { flex: none; display: flex; gap: .3rem; }
.win button.st-tab { position: relative; flex: 1; min-width: 0; min-height: 3.4rem; padding: 0 .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem !important;
background: none !important; color: var(--ink2) !important; font: 600 max(11px, 1.3rem) var(--sans); }
.win button.st-tab.on { border-image-source: url(../assets/ui/dark/tab_on.png) !important; color: var(--brass-hi) !important; text-shadow: 0 0 .8rem rgba(216, 184, 113, .55); }
.st-tab b { font: inherit; }
.st-tab i { margin-left: .5rem; font: 600 max(10px, 1.1rem) var(--sans); font-style: normal; color: var(--ink3); }
.st-wrap { flex: none; min-height: 0; }
body.touch .st-wrap { container-type: inline-size; }
.inv-grid.st-grid { --bc: var(--bcw, min(4.4rem, calc((100vh - 30rem) / 12.6))); --gap: .25rem; }
.st-act { flex: none; display: flex; align-items: center; gap: .8rem; }
.st-act .st-sel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); }
.st-note { flex: none; max-width: 50rem; margin: 0; font-size: max(10px, 1.15rem); line-height: 1.45; color: var(--ink3); }
.st-note b { color: var(--ink2); }
.st-tools { flex: none; display: flex; align-items: center; gap: .6rem; }
.st-q { flex: 1 1 18rem; width: 18rem; min-width: 0; box-sizing: border-box; height: 3.4rem; min-height: 28px; padding: 0 1.1rem; color: var(--ink); background: none; border: 0 solid transparent;
border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; border-radius: 0; font: 500 16px var(--sans); outline: none; user-select: text; -webkit-user-select: text; -webkit-appearance: none; appearance: none; }
.st-q::placeholder { color: var(--ink3); }
.st-q::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }
.st-found { flex: none; font-size: max(10px, 1.2rem); color: var(--ink3); white-space: nowrap; }
.st-found b { color: var(--teal); }
.win button.st-sort, .win button.st-all { flex: none; min-height: 3.4rem; white-space: nowrap; }
.st-tab i.st-hit { color: var(--teal); }
.win button.st-tab.nohit { opacity: .5; }
.st-grid .cell.st-dim { opacity: .2; filter: grayscale(.85); }
.st-grid .cell.st-hit { outline: 2px solid var(--teal); outline-offset: -2px; }
body.touch .st-found { display: none; }
body.touch.shopping #shop.stash { right: calc(50% + .2rem); max-width: none; }
body.touch.shopping:has(#shop.stash:not(.hidden)) .ob-bag { left: calc(50% + .2rem); }
body.touch #shop .stash-box { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
body.touch .inv-grid.st-grid { --bc: 2.6rem; --gap: .2rem; touch-action: pan-y; }
@supports (width: 1cqw) { body.touch .inv-grid.st-grid { --bc: clamp(2.2rem, calc((100cqw - 2.2rem) / 12), 3.6rem); } }
.cs-foot:has(.cs-share) { flex-wrap: wrap; }
.cs-share { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .6rem; border-top: 1px solid rgba(140, 111, 63, .2); font-size: max(10px, 1.15rem); line-height: 1.4; color: var(--ink3); }
.cs-share > span { flex: 1 1 16rem; min-width: 0; }
.cs-share > b { color: var(--teal); font-weight: 700; }
.cs-share > a { color: var(--brass-hi); text-decoration: underline; text-underline-offset: .2em; }
.cs-share .ob-btn { flex: none; }
.cs-share.on .ob-btn:first-of-type { margin-left: auto; }
body.touch .cs-share { gap: .4rem .6rem; padding-top: .4rem; flex-wrap: nowrap; }
body.touch .cs-share > b, body.touch .cs-share > span { display: none; }
body.touch .cs-share .ob-btn { min-height: 3.2rem; padding: 0 .8rem; font-size: 11px; }
body.touch .cs-share.on .ob-btn:first-of-type { margin-left: auto; }
#chat-size { position: absolute; right: -.6rem; bottom: -.6rem; z-index: 2; width: max(18px, 2.2rem); height: max(18px, 2.2rem); cursor: nwse-resize; touch-action: none; pointer-events: auto;
background: linear-gradient(135deg, transparent 52%, var(--brass) 52%, var(--brass) 60%, transparent 60%, transparent 70%, var(--brass) 70%, var(--brass) 78%, transparent 78%); opacity: .75; }
#chat-size:hover, #chatbox.dragging #chat-size { opacity: 1; }
body.touch #chat-size { right: -.2rem; bottom: -.2rem; width: max(22px, 2.8rem); height: max(22px, 2.8rem); }
#chatbox.sized #chat-log { max-height: none; }
body:not(.touch) #settings .set-touch { display: none; }
body.touch #hotbar { right: calc(5.4rem * var(--ctl, 1) + var(--sar)); bottom: calc(5.4rem * var(--ctl, 1) + var(--sab)); transform: scale(var(--ctl, 1)); transform-origin: 0 0; }
body.touch #belt { right: calc(10.3rem * var(--ctl, 1) + var(--sar)); bottom: calc(7.4rem * var(--ctl, 1) + var(--sab)); transform: scale(var(--ctl, 1)); transform-origin: 100% 100%; }
body.touch #h-charms { right: calc(10.6rem * var(--ctl, 1) + var(--sar)); bottom: calc(12.6rem * var(--ctl, 1) + var(--sab)); transform: scale(var(--ctl, 1)); transform-origin: 100% 100%; }
body.touch #joy { width: calc(12.4rem * var(--joy, 1)); height: calc(12.4rem * var(--joy, 1)); }
body.touch #joy .knob { width: calc(5.2rem * var(--joy, 1)); height: calc(5.2rem * var(--joy, 1)); }
#ovmap { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; pointer-events: none; }
body.ingame #ovmap.on { display: block; }
#minimap-box #b-ovmap { position: absolute; left: -.5rem; bottom: -.5rem; z-index: 2; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
background: url(../assets/ui/dark/round_small.png) center / 100% 100% no-repeat; color: var(--ink3); cursor: pointer; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.6)); }
#minimap-box #b-ovmap svg { width: 55%; height: 55%; fill: currentColor; }
#minimap-box #b-ovmap.on { color: #9fd0ff; filter: drop-shadow(0 0 .6rem rgba(120,180,255,.8)); }
#minimap-box.big #b-ovmap { display: none; }
body.touch #minimap-box #b-ovmap { left: -1.2rem; bottom: -1.2rem; width: 3.6rem; height: 3.6rem; }
body.touch #chatbox:not(.moved) { left: calc((100vw + var(--sal) - var(--sar) - 35.5rem * var(--ctl, 1) + 15.8rem * var(--joy, 1)) / 2); }
body.touch #chatbox:not(.sized) { width: min(30rem, calc(100vw - var(--sal) - var(--sar) - 35.5rem * var(--ctl, 1) - 15.8rem * var(--joy, 1))); }
.bot-mode { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bot-row .bot-mode select { width: 18rem; }
.bot-sec { display: flex; align-items: center; gap: .3rem; color: var(--ink3); font-size: max(11px, 1.2rem); }
.bot-sec[hidden] { display: none; }
.bot-sec input { box-sizing: border-box; width: 6.4rem; height: 3.6rem; min-height: 28px; padding: 0 .6rem; text-align: center; color: var(--ink); background: none;
border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; border-radius: 0; font: 600 max(12px, 1.3rem) var(--sans); outline: none; -moz-appearance: textfield; }
.bot-sec input::-webkit-outer-spin-button, .bot-sec input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bot-sec input:disabled { opacity: .4; }
body.touch .bot-row .bot-mode select { width: 13.5rem; }
body.touch .bot-sec input { width: 5.6rem; }
.cl-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.cl-art { --c: max(44px, 6.4rem); display: grid; place-items: center; padding: .6rem; border: 1px solid rgba(216, 184, 113, .35); border-radius: .3rem;
background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .55) 70%), #0c0a08; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .6); }
.cl-art.r1 { border-color: rgba(136, 136, 255, .55); } .cl-art.r2 { border-color: rgba(255, 220, 90, .6); } .cl-art.r3 { border-color: rgba(214, 128, 50, .75); }
.cl-art .cell { position: relative; display: grid; place-items: center; width: calc(var(--w) * var(--c)); height: calc(var(--h) * var(--c)); }
.cl-art .cell img.item-art, .cl-art .cell > svg { width: 100%; height: 100%; object-fit: contain; }
.cl-art .cell i { display: none; }
#bosswin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; }
#bosswin .set { overflow-y: auto; }
.bw-list { display: flex; flex-direction: column; gap: .4rem; padding: .3rem .2rem .2rem; }
.bw-row { display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem; border: 1px solid rgba(216, 184, 113, .14); border-radius: .3rem; background: rgba(0, 0, 0, .28); }
.bw-row.here { border-color: rgba(72, 194, 176, .55); box-shadow: inset 0 0 1.2rem rgba(72, 194, 176, .14); }
.bw-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.bw-who b { color: var(--ink); font: 600 max(12px, 1.4rem)/1.3 var(--sans); }
.bw-who small { color: var(--ink3); font-size: max(10px, 1.15rem); }
.bw-chs { flex: none; display: flex; gap: .4rem; }
.bw-ch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 7.4rem; min-height: 4rem; padding: .3rem .2rem; border-radius: .3rem;
border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); font-size: max(10px, 1.1rem); }
.bw-ch b { color: var(--ink3); font-weight: 600; }
.bw-ch i { font-style: normal; color: #7fe08a; font-weight: 600; }
.bw-ch em { font-style: normal; color: #ff9a7a; font: 700 max(12px, 1.4rem) var(--sans); font-variant-numeric: tabular-nums; }
.bw-ch.dead { border-color: rgba(255, 120, 90, .45); background: rgba(120, 30, 20, .25); }
.bw-ch.me { box-shadow: 0 0 0 1px var(--teal); }
body.touch #bosswin { left: 50%; right: auto; top: calc(.8rem + var(--sat)); bottom: auto; width: 62rem; max-height: calc(100vh - 1.6rem - var(--sat) - var(--sab)); transform: translateX(-50%); }
body.touch .bw-ch { width: 6.6rem; }
.inv-card .d-split { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.inv-card .d-split .sp-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.inv-card .d-split .sp-head .cell { width: 3.6rem; height: 3.6rem; flex: none; position: relative; }
.inv-card .d-split .sp-head b { color: #f3d9a0; font-size: 1.3rem; }
.inv-card .d-split .sp-head small { color: #b9ad97; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card .d-split .sp-head small u { text-decoration: none; color: #e9e1cf; font-variant-numeric: tabular-nums; }
.inv-card .d-split .sp-row { display: flex; align-items: center; gap: .5rem; }
.inv-card .d-split .sp-row button { width: 3.2rem; height: 3.2rem; padding: 0; font-size: 1.6rem; line-height: 1; }
.inv-card .d-split .sp-row input { width: 6rem; height: 3.2rem; text-align: center; font: 600 1.4rem/1 inherit; font-variant-numeric: tabular-nums; color: #f4ead6; background: rgba(8, 7, 6, .7); border: 1px solid rgba(196, 160, 98, .45); border-radius: 3px; }
.inv-card .d-split .sp-of { color: #b9ad97; font-variant-numeric: tabular-nums; }
.inv-card .d-split .sp-range { width: 100%; accent-color: #d9a54a; }
body.touch .inv-card .d-split .sp-row button { width: 4.4rem; height: 4rem; }
body.touch .inv-card .d-split .sp-row input { height: 4rem; width: 7rem; }
#premwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; }
#premwin .set { overflow-y: auto; display: grid; gap: .8rem; }
#premwin .pw-card { border: 1px solid var(--line, #4a3a24); border-radius: .6rem; padding: .7rem .9rem; background: rgba(0, 0, 0, .18); }
#premwin h4 { margin: 0 0 .4rem; font-size: 1.5rem; display: flex; align-items: center; gap: .4rem; }
#premwin .pw-crown { color: #f5c64a; font-size: 1.8rem; line-height: 1; }
#premwin .pw-state { margin: 0 0 .5rem; color: var(--ink3, #b9ab90); font-size: 1.3rem; }
#premwin .pw-state.on { color: #8fe08a; font-weight: 700; }
#premwin .pw-perks { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .3rem .8rem; }
#premwin .pw-perks li { font-size: 1.25rem; line-height: 1.35; padding-left: 1.2rem; position: relative; }
#premwin .pw-perks li::before { content: '\265B'; position: absolute; left: 0; color: #f5c64a; font-size: 1rem; top: .15rem; }
#premwin .pw-perks small { display: block; color: var(--ink3, #b9ab90); font-size: 1.1rem; }
#premwin .pw-buy { width: 100%; }
#premwin .pw-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.3rem; }
#premwin .pw-confirm span { flex: 1 1 14rem; }
#premwin .pw-row { display: flex; gap: .5rem; margin-top: .5rem; }
#premwin .pw-row .btn { flex: 1; }
#premwin .pw-link { display: flex; gap: .4rem; margin: .3rem 0 .5rem; }
#premwin .pw-link input { flex: 1; min-width: 0; font-size: 1.25rem; padding: .35rem .5rem; background: rgba(0, 0, 0, .35); color: inherit; border: 1px solid var(--line, #4a3a24); border-radius: .4rem; }
#premwin .pw-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 1.25rem; color: var(--ink3, #b9ab90); }
#premwin .pw-stats b { color: #f2e2b6; }
#premwin .pw-stats span { color: #e6d6ad; }
#premwin .pw-bonus { color: #f2d27a; }
body.touch #premwin { top: calc(.8rem + var(--sat)); transform: translateX(-50%); max-height: calc(100vh - 1.6rem - var(--sat) - var(--sab)); width: 60rem; }
.cl-pr { color: #f5c64a; margin-right: .15rem; }
.qs-hide { display: none !important; }
#journal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70rem; max-width: calc(100vw - 1.6rem); height: 52rem; max-height: calc(100vh - 1.6rem); z-index: 9; display: flex; flex-direction: column; }
#journal .jr-tabs { flex: none; display: flex; gap: .3rem; }
.win button.jr-tab { flex: 1; min-width: 0; min-height: 3.4rem; padding: 0 .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem !important;
background: none !important; color: var(--ink2) !important; font: 600 max(11px, 1.3rem) var(--sans); }
.win button.jr-tab.on { border-image-source: url(../assets/ui/dark/tab_on.png) !important; color: var(--brass-hi) !important; }
.jr-tab i { margin-left: .4rem; font-style: normal; color: var(--ink3); }
#journal .jr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: .8rem; margin-top: .6rem; }
#journal .jr-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding-right: .3rem; }
.win button.jr-row { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 3.6rem; padding: .4rem .7rem; text-align: left; border: 1px solid var(--line, #4a3a24); border-radius: .5rem;
background: rgba(0, 0, 0, .22); color: var(--ink2); font: 600 max(11px, 1.3rem)/1.25 var(--sans); }
.win button.jr-row.on { border-color: var(--brass-hi); background: rgba(216, 184, 113, .12); color: var(--ink); }
.jr-row b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-row.wait b { color: var(--ink3); }
.jr-row .jr-tr { font-style: normal; color: var(--teal); font-size: 1rem; }
.jr-row .jr-rdy { font-style: normal; color: #8fe08a; font-size: max(10px, 1.05rem); }
.jr-line { flex: none; font-style: normal; font-size: max(9px, 1rem); font-weight: 700; padding: .1rem .45rem; border-radius: .4rem; background: #3a2d1a; color: #e7cf9a; }
.jr-line.core { background: #5a3d12; color: #ffd98a; } .jr-line.extra { background: #24384a; color: #a8d4ff; } .jr-line.side { background: #2c3a26; color: #b5e0a0; } .jr-line.trial { background: #44233f; color: #f0b0e6; }
#journal .jr-detail { min-height: 0; overflow-y: auto; padding: .2rem .6rem 1rem; border-left: 1px solid var(--line, #4a3a24); }
#journal .jr-detail h3 { margin: .2rem 0 .3rem; font: 600 max(14px, 1.9rem)/1.2 var(--serif); color: var(--brass-hi); }
#journal .jr-detail h4 { margin: 1rem 0 .3rem; font-size: max(11px, 1.25rem); letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; }
.jr-from { margin: 0; color: var(--ink3); font-size: max(11px, 1.25rem); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.jr-from b { color: var(--ink2); }
.jr-steps, .jr-rw, .jr-op { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: max(12px, 1.35rem); line-height: 1.4; }
.jr-steps li { position: relative; padding-left: 1.8rem; color: var(--ink2); }
.jr-steps li::before { content: '◇'; position: absolute; left: .2rem; color: var(--ink3); }
.jr-steps li.cur { color: var(--ink); } .jr-steps li.cur::before { content: '◆'; color: var(--brass-hi); }
.jr-steps li.ok { color: var(--ink3); } .jr-steps li.ok::before { content: none; }
.jr-steps li.later { opacity: .55; }
.jr-ck { position: absolute; left: .2rem; font-style: normal; color: #8fe08a; }
.jr-n { color: var(--teal); font-variant-numeric: tabular-nums; }
.jr-rw li, .jr-op li { padding-left: 1.2rem; position: relative; } .jr-rw li::before { content: '•'; position: absolute; left: .2rem; color: var(--brass-hi); }
.jr-op li::before { content: '›'; position: absolute; left: .2rem; color: var(--teal); }
.jr-rw i { font-style: normal; color: var(--ink3); }
.jr-act { margin-top: 1.2rem; display: flex; gap: .6rem; }
.jr-empty { color: var(--ink3); font-size: 1.25rem; }
body.touch #journal { width: calc(100vw - 1.2rem); height: calc(100vh - 1.2rem); }
body.touch #journal .jr-body { grid-template-columns: 20rem minmax(0, 1fr); }
#hud #qs-track { display: block; width: 100%; padding: .5rem .8rem; text-align: left; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; background: rgba(10, 9, 8, .62); background-clip: padding-box; text-shadow: 0 1px 2px #000;
color: var(--ink2); font: 600 max(10px, 1.2rem)/1.35 var(--sans); cursor: pointer; pointer-events: auto; }
#hud #qs-track.hidden { display: none; }
#hud #qs-track b { display: block; color: var(--brass-hi); font: 600 max(11px, 1.3rem)/1.25 var(--serif); margin-bottom: .2rem; }
#hud #qs-track p { margin: 0; color: var(--ink); } #hud #qs-track p::before { content: '◆ '; color: var(--brass-hi); font-size: .8em; }
body.touch #hud #qs-track { width: 18rem; align-self: flex-end; font-size: max(9px, 1.05rem); padding: .3rem .5rem; }
#qsdlg { position: fixed; left: 50%; bottom: calc(16rem + var(--sab, 0px));  transform: translateX(-50%); z-index: 12; width: 60rem; max-width: calc(100vw - 1.6rem);
padding: 1.2rem 1.6rem 1rem; border: 1.2rem solid transparent; border-image: url(../assets/ui/dark/panel.png) 24 fill / 1.2rem; background: rgba(13, 11, 9, .93); background-clip: padding-box; color: var(--ink);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55); pointer-events: auto; }
#qsdlg.hidden { display: none; }
#qsdlg header { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; font-size: max(12px, 1.35rem); color: var(--ink3); }
#qsdlg header b { font: 600 max(14px, 1.8rem)/1.2 var(--serif); color: var(--brass-hi); }
#qsdlg .qd-pg { margin-left: auto; padding-right: .2rem; flex: none; font-style: normal; color: var(--ink3); font-size: max(10px, 1.1rem); white-space: nowrap; }
#qsdlg .qd-text { margin: 0; font-size: max(13px, 1.55rem); line-height: 1.6; cursor: pointer; }
#qsdlg.msg .qd-text { font-style: italic; color: #f0e3c4; }
#qsdlg .qd-gift { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: max(12px, 1.3rem); }
#qsdlg .qd-gift i { font-style: normal; color: var(--ink3); }
#qsdlg .qd-act { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .6rem; }
body.touch #qsdlg { bottom: calc(10.5rem + var(--sab, 0px)); width: min(64rem, calc(100vw - 20rem)); padding: .6rem 1rem .6rem; }
body.touch #qsdlg .qd-text { font-size: max(12px, 1.35rem); line-height: 1.45; }
#qs-ban { position: fixed; left: 50%; top: calc(9rem + var(--sat, 0px)); transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
#qs-ban .qs-b { padding: .7rem 2.4rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; color: var(--brass-hi);
font: 600 max(14px, 1.9rem)/1.2 var(--serif); letter-spacing: .05em; text-shadow: 0 .2rem 0 #000, 0 0 1.2rem rgba(216,184,113,.45); animation: qsIn .5s ease-out; transition: opacity .6s, transform .6s; }
#qs-ban .qs-b.act { font-size: max(16px, 2.4rem); color: #ffe7a8; }
#qs-ban .qs-b.out { opacity: 0; transform: translateY(-1rem); }
@keyframes qsIn { from { opacity: 0; transform: translateY(1rem) scale(.96); } to { opacity: 1; transform: none; } }
.pc-free { color: #8fe08a; } .pc-freenote { margin: .2rem 0 .4rem; font-size: max(11px, 1.25rem); color: var(--ink2); } .pc-freenote b { color: #8fe08a; }
.st-tabs { flex-wrap: wrap; }
.win button.st-tab { min-width: 5.6rem; }
.win button.st-tab.bought b { color: #f2d27a; }
.win button.st-tab.st-ctab { color: #f2d27a !important; }
.win button.st-tab.st-buy { flex: none; min-width: 3.6rem; padding: 0 .4rem; color: #8fe08a !important; font: 800 max(13px, 1.6rem) var(--sans); }
.st-cur { --bc: min(4.4rem, calc((100vh - 30rem) / 12.6)); box-sizing: border-box; width: calc(var(--bc) * 12 + 2.75rem); height: calc(var(--bc) * 12 + 2.75rem); overflow-y: auto; overscroll-behavior: contain;
display: grid; grid-template-columns: repeat(auto-fill, calc(var(--bc) * 1.45)); grid-auto-rows: calc(var(--bc) * 1.45); gap: .4rem; align-content: start; padding: .4rem;
border: 1px solid rgba(196, 160, 98, .28); background: rgba(0, 0, 0, .28); }
.st-cur[hidden], .st-wrap[hidden], .win button.st-sort[hidden], .win button.st-takeall[hidden] { display: none; }
.st-cur.drop { outline: 2px solid var(--teal); outline-offset: -2px; }
.win button.st-ctile { position: relative; width: 100%; height: 100%; padding: 0; }
.win button.st-ctile.sel { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
.st-ctile.st-dim { opacity: .2; filter: grayscale(.85); }
.st-ctile.st-hit { outline: 2px solid var(--teal); outline-offset: -2px; }
.st-cempty { grid-column: 1 / -1; margin: .6rem; color: var(--ink3); font-size: max(10px, 1.25rem); line-height: 1.55; }
.st-cempty b { color: #f2d27a; }
.st-ctip { margin-top: .4rem; color: var(--ink3); font-size: max(10px, 1.1rem); }
#tip > .st-ctip { box-sizing: border-box; max-width: 34rem; padding: .5rem .8rem; border: 1px solid rgba(196, 160, 98, .45); border-radius: .4rem; background: rgba(14, 10, 7, .95); color: var(--ink2); line-height: 1.45; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .6); }
body.touch .st-cur { width: 100%; height: calc(100vh - 26rem - var(--sat, 0px) - var(--sab, 0px)); }
#cshopwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64rem; max-width: calc(100vw - 1.6rem); height: 60rem; max-height: calc(100vh - 1.6rem); z-index: 9; display: flex; flex-direction: column; }
#cshopwin .cs-cash { position: absolute; left: 3.2rem; top: 50%; transform: translateY(-50%); color: var(--ink2); font: 600 max(11px, 1.35rem) var(--sans); white-space: nowrap; }
#cshopwin .cs-cash b { color: #f2d27a; font-variant-numeric: tabular-nums; }
#cshopwin .cs-tabs { flex: none; display: flex; gap: .3rem; }
.win button.cs-tab { flex: 1; min-width: 0; min-height: 3.4rem; padding: 0 .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem !important;
background: none !important; color: var(--ink2) !important; font: 600 max(11px, 1.3rem) var(--sans); }
.win button.cs-tab.on { border-image-source: url(../assets/ui/dark/tab_on.png) !important; color: var(--brass-hi) !important; }
#cshopwin .cs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: .8rem; margin-top: .6rem; padding-right: .2rem; }
#cshopwin h4 { margin: 0 0 .2rem; font-size: 1.5rem; color: var(--brass-hi); }
#cshopwin .cs-sec .bot-note { margin: 0 0 .5rem; }
#cshopwin .cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
#cshopwin .cs-item { display: grid; gap: .35rem; justify-items: stretch; padding: .5rem; border: 1px solid var(--line, #4a3a24); border-radius: .5rem; background: rgba(0, 0, 0, .2); }
#cshopwin .cs-item.has { border-color: rgba(143, 224, 138, .35); }
#cshopwin .cs-item.worn { border-color: #8fe08a; box-shadow: inset 0 0 0 1px rgba(143, 224, 138, .45); }
#cshopwin .cs-prev { width: 100%; height: auto; aspect-ratio: 168 / 96; border-radius: .35rem; display: block; }
#cshopwin .cs-name { font-size: 1.35rem; color: var(--ink); }
#cshopwin .cs-state { font-size: 1.2rem; color: var(--ink3); }
#cshopwin .cs-state b { color: #f2d27a; }
#cshopwin .cs-state.on, #cshopwin .cs-item.worn .cs-state { color: #8fe08a; font-weight: 700; }
#cshopwin .cs-card { border: 1px solid var(--line, #4a3a24); border-radius: .6rem; padding: .7rem .9rem; background: rgba(0, 0, 0, .18); display: grid; gap: .5rem; }
#cshopwin .cs-card.cs-bundle { border-color: rgba(232, 196, 120, .7); background: linear-gradient(135deg, rgba(120, 84, 30, .32), rgba(0, 0, 0, .25)); box-shadow: 0 0 1rem rgba(232, 196, 120, .12); }
#cshopwin .cs-off { margin-left: .5rem; padding: .1rem .55rem; border-radius: .4rem; background: #c8452e; color: #fff4e0; font-size: .85em; font-variant-numeric: tabular-nums; }
#cshopwin .cs-parts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
#cshopwin .cs-parts li { padding: .2rem .6rem; border: 1px solid rgba(196, 160, 98, .35); border-radius: .4rem; font-size: max(11px, 1.2rem); color: var(--ink2); }
#cshopwin .cs-parts li b { color: #f2d27a; font-variant-numeric: tabular-nums; }
#cshopwin .cs-parts li.has { opacity: .55; } #cshopwin .cs-parts li.has b { text-decoration: line-through; } #cshopwin .cs-parts li i { font-style: normal; color: #8fe08a; }
#cshopwin .cs-save { margin: 0; font-size: max(12px, 1.35rem); color: var(--ink2); }
#cshopwin .cs-save s { color: var(--ink3); } #cshopwin .cs-save b { color: #f2d27a; font-size: 1.15em; font-variant-numeric: tabular-nums; }
#cshopwin .cs-card.cs-big { border-color: rgba(159, 224, 208, .45); } #cshopwin .cs-card.cs-mk { border-color: rgba(143, 176, 255, .45); }
#cshopwin .cs-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 1.25rem; }
#cshopwin .cs-ask span { flex: 1 1 12rem; }
#cshopwin .cs-ask b, #cshopwin .cs-buy b { color: #f2d27a; }
#cshopwin .cs-gend { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
#cshopwin .cs-gend .btn.on { outline: 1px solid #f2d27a; }
#cshopwin .cs-gend .btn:nth-child(3) { grid-column: 1 / -1; }
#cshopwin .cs-rate { margin: 0; font-size: 1.6rem; } #cshopwin .cs-rate b { color: #f2d27a; }
#cshopwin .cs-steps { margin: 0; padding-left: 2rem; font-size: 1.3rem; line-height: 1.6; }
#cshopwin .cs-msg { flex: none; min-height: 1.6rem; margin: .4rem 0 0; font-size: 1.25rem; color: #f2d27a; }
body.touch #cshopwin { top: calc(.8rem + var(--sat)); transform: translateX(-50%); max-height: calc(100vh - 1.6rem - var(--sat) - var(--sab)); width: 70rem; }
body.touch #cshopwin .cs-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
body.pc.fxcur, body.pc.fxcur #world, body.pc.fxcur #world.over-npc, body.pc.fxcur #world.over-item, body.pc.fxcur button, body.pc.fxcur .win, body.pc.fxcur a, body.pc.fxcur [data-act], body.pc.fxcur [data-menu] { cursor: var(--fxcur), default; }
body.pc.fxcur #world.over-mon { cursor: var(--fxcur-aim), crosshair; }
#cshopwin .cs-ev { border: 1px solid rgba(255, 143, 192, .45); background: rgba(80, 20, 44, .25); padding: .4rem .6rem .6rem; }
#cshopwin .cs-ev h4 { color: #ffb8d4; }
#cshopwin .cs-top .cs-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
#cshopwin .cs-top .cs-quick .btn.on { color: var(--brass-hi); box-shadow: inset 0 0 0 1px rgba(216, 184, 113, .7); }
#cshopwin .cs-top .cs-amt { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
#cshopwin .cs-top .cs-amt input { width: 12rem; min-height: 3.2rem; padding: 0 .7rem; font: 600 max(12px, 1.3rem) var(--sans); color: var(--ink); background: rgba(0, 0, 0, .45); border: 1px solid rgba(216, 184, 113, .4); }
#cshopwin .cs-pay { display: grid; gap: .4rem; padding: .6rem; margin: .4rem 0 .6rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 184, 113, .3); }
#cshopwin .cs-pay p { margin: 0; } #cshopwin .cs-pay .btn { justify-self: start; text-decoration: none; }
#cshopwin .cs-payq { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1.2rem; }
#cshopwin .cs-payq.stack { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#cshopwin .cs-payq.stack .btn { justify-self: center; }
#cshopwin .cs-payinfo { display: grid; gap: .5rem; min-width: 0; }
#cshopwin .cs-payinfo .cs-paytitle { font: 600 max(11px, 1.3rem)/1.3 var(--serif); letter-spacing: .04em; color: var(--brass-hi); } #cshopwin .cs-payinfo .cs-paytitle b { color: var(--ink); }
#cshopwin .cs-top .cs-payq { margin-top: 0; }
#cshopwin .cs-payinfo .cs-ref { font-size: max(11px, 1.25rem); color: var(--ink2); overflow-wrap: anywhere; }
#cshopwin .cs-payinfo .cs-baht { font-size: max(14px, 2rem); color: var(--ink); } #cshopwin .cs-payinfo .cs-baht b { font-family: var(--serif); color: #f2d27a; }
#cshopwin .cs-payq .cs-qrbox { justify-self: center; min-width: 0; min-height: 0; }
#cshopwin .cs-qrbox { justify-self: center; display: grid; place-items: center; gap: .4rem; min-width: 236px; min-height: 236px; padding: 8px; background: #fff; border-radius: 6px; }
#cshopwin .cs-qrbox .bot-note { color: #333; } #cshopwin .cs-qr { display: block; width: 220px; height: 220px; image-rendering: auto; -webkit-touch-callout: default; user-select: auto; }
#cshopwin .cs-rows { display: grid; gap: .25rem; margin-bottom: .5rem; }
#cshopwin .cs-row { display: grid; grid-template-columns: minmax(0, 1.6fr) .8fr 1.2fr auto; gap: .5rem; align-items: center; font: 400 max(10.5px, 1.15rem) var(--sans); color: var(--ink2); }
#cshopwin .cs-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
#cshopwin .cs-row .on { color: #8ff0a8; }
body.touch #h-buffs { max-width: min(25rem, 42vw); padding: .15rem .3rem; pointer-events: auto; }
body.touch #buff-list { gap: .3rem; }
body.touch #buff-list .bf { gap: 0; }
body.touch #buff-list .bf > span:not(.wn), body.touch #buff-list .bf .wn, body.touch #buff-list .bf .bv { display: none; }
body.touch #buff-list .bf .bi { width: max(19px, 2.3rem); height: max(19px, 2.3rem); }
body.touch #buff-list .bf b { position: absolute; right: -.3rem; bottom: -.3rem; padding: 0 .15rem; font: 700 max(8px, .85rem)/1.2 var(--sans); color: #fff3c8; background: rgba(8, 6, 4, .8); border-radius: .2rem; pointer-events: none; }
body.touch #buff-list .bf b.inf { display: none; }
body.touch #buff-list .bf.run::after { bottom: -.25rem; }
@property --bf-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bf-ring { to { --bf-a: 360deg; } }
#buff-list { gap: .5rem; }
#buff-list .bf { gap: 0; pointer-events: auto; cursor: help; }
#buff-list .bf > span:not(.wn), #buff-list .bf .wn, #buff-list .bf .bv { display: none; }
#buff-list .bf .bi { position: relative; width: max(30px, 3.5rem); height: max(30px, 3.5rem); padding: 3px; box-sizing: border-box; border-radius: .5rem;
background: conic-gradient(from var(--bf-a, 0deg), rgba(140, 255, 190, 0) 0 8%, rgba(140, 255, 190, .55) 16%, #fbfff4 21%, rgba(140, 255, 190, 0) 27% 58%, rgba(140, 255, 190, .55) 66%, #fbfff4 71%, rgba(140, 255, 190, 0) 77%), #0d120e;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 0 .55rem rgba(120, 255, 170, .28), 0 .15rem .4rem rgba(0, 0, 0, .55); animation: bf-ring 2.2s linear infinite; animation-delay: calc(var(--i, 0) * -.37s); }
#buff-list .bf .bi img, #buff-list .bf .bi svg { border-radius: .32rem; }
#buff-list .bf b { position: absolute; right: -.35rem; bottom: -.35rem; padding: 0 .18rem; font: 700 max(8px, .85rem)/1.15 var(--sans); color: #fff3c8; background: rgba(8, 6, 4, .85); border-radius: .2rem; pointer-events: none; }
#buff-list .bf b.inf { display: none; }
#buff-list .bf.run::after { bottom: -.3rem; }
body.touch #buff-list .bf .bi { width: max(24px, 2.6rem); height: max(24px, 2.6rem); padding: 2px; }
@media (prefers-reduced-motion: reduce) { #buff-list .bf .bi { animation: none; } }
body.touch #party { flex-flow: row wrap; align-items: flex-start; align-content: flex-start; }
body.touch #party .pf-row { flex: 1 0 100%; box-sizing: border-box; }
body.touch #party header, body.touch .pf-loot > button { line-height: 1.6; }
body.touch #party header { padding: 0 .5rem; } body.touch .pf-loot > button { padding: 0 .5rem; } body.touch .pf-loot > button > span { display: none; }
body.touch .pf-lopts { width: 15.5rem; }
body.touch #party.mini .pf-at { display: none; }
body.touch #party.mini .pf-row { padding-top: .1rem; padding-bottom: .15rem; gap: .1rem; }
body.touch #party.mini .pf-bar { height: max(3px, .5rem); }
body.touch #party.scroll { overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; }
#buff-list .bf[data-k="prem"] { pointer-events: auto; cursor: pointer; }
#buff-list .bf[data-k="prem"] .bi { background: conic-gradient(from var(--bf-a, 0deg), rgba(255, 215, 106, 0) 0 8%, rgba(255, 215, 106, .6) 16%, #fff6d0 21%, rgba(255, 215, 106, 0) 27% 58%, rgba(255, 215, 106, .6) 66%, #fff6d0 71%, rgba(255, 215, 106, 0) 77%), radial-gradient(circle, rgba(255, 215, 106, .28), rgba(60, 40, 8, .6)); box-shadow: 0 0 0 1px #c9a24a, 0 0 .55rem rgba(255, 200, 90, .35); }
#buff-list .bf[data-k="prem"] > span { color: #ffe3a3; }
.st-cur { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .7rem; grid-template-columns: none; grid-auto-rows: auto;
background: linear-gradient(180deg, rgba(34, 26, 18, .55), rgba(8, 6, 4, .55)); }
.kshelf { flex: 0 1 auto; display: flex; flex-direction: column; gap: .3rem; padding: .45rem .55rem .55rem; border: 1px solid rgba(196, 160, 98, .2); border-radius: .5rem;
background: linear-gradient(180deg, rgba(70, 52, 30, .3), rgba(14, 10, 7, .55)); box-shadow: inset 0 1px 0 rgba(255, 228, 170, .07), 0 .2rem .5rem rgba(0, 0, 0, .35); }
.kshelf h5 { margin: 0 0 .1rem .1rem; font: 700 max(10px, 1.15rem)/1.2 var(--sans); color: #d6bb80; letter-spacing: .03em; }
.krow { display: flex; gap: .3rem; }
.win button.ksock { --s: calc(var(--bc) * 1.15); position: relative; flex: none; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: .55rem;
background: radial-gradient(circle at 50% 38%, rgba(48, 38, 26, .95), rgba(9, 7, 5, .98) 72%); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .22), inset 0 .35rem .7rem rgba(0, 0, 0, .65); }
.win button.ksock.has { box-shadow: inset 0 0 0 1px rgba(236, 200, 122, .6), inset 0 .3rem .6rem rgba(0, 0, 0, .5), 0 0 .5rem rgba(236, 196, 110, .18); }
.ksock.zero img.item-art, .ksock.zero > svg { opacity: .32; filter: grayscale(1) brightness(.8) drop-shadow(0 0 0 transparent); }
.ksock.zero i.lv { opacity: .35; }
.ksock i.cnt { display: none; }
.ksock .kn { position: absolute; right: .1rem; bottom: .1rem; z-index: 2; padding: 0 .3rem; border-radius: .3rem; font: 800 max(9px, 1.05rem)/1.35 var(--sans); color: #20160a;
background: linear-gradient(#f5dc9a, #c89b48); box-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.win button.ksock.sel { outline: 2px solid var(--brass-hi); outline-offset: 1px; }
.ksock.st-dim { opacity: .25; } .ksock.st-hit { outline: 2px solid var(--teal); outline-offset: 1px; }
.win button.st-tab.st-spc span { white-space: nowrap; }
.win button.st-tab.st-ctab.kr { color: #b9d8ff !important; } .win button.st-tab.st-ctab.kv { color: #c8f0b8 !important; } .win button.st-tab.st-jtab { color: #f0b8e8 !important; }
.st-jw { --bc: min(4.4rem, calc((100vh - 30rem) / 12.6)); box-sizing: border-box; width: calc(var(--bc) * 12 + 2.75rem); display: flex; flex-direction: column; gap: .5rem; padding: .4rem;
border: 1px solid rgba(196, 160, 98, .28); background: linear-gradient(180deg, rgba(40, 22, 40, .35), rgba(8, 6, 8, .55)); }
.st-jw[hidden] { display: none; }
.st-jw.drop { outline: 2px solid var(--teal); outline-offset: -2px; }
.st-jwk { display: flex; flex-wrap: wrap; gap: .3rem; }
.win button.jwk { position: relative; min-height: 0; height: calc(var(--bc) * .82); min-width: calc(var(--bc) * .82); padding: 0 .45rem; display: inline-flex; align-items: center; gap: .3rem;
border: 1px solid rgba(196, 160, 98, .3) !important; border-image: none !important; border-radius: .4rem; background: rgba(0, 0, 0, .4) !important; color: var(--ink2) !important; font: 600 max(10px, 1.1rem) var(--sans); box-shadow: none; }
.win button.jwk img.item-art, .win button.jwk > svg { position: static; width: calc(var(--bc) * .62); height: calc(var(--bc) * .62); }
.win button.jwk i.lv, .win button.jwk i.cnt { display: none; }
.win button.jwk b { color: #f2d27a; font: inherit; }
.win button.jwk.on { border-color: var(--brass-hi) !important; background: rgba(216, 184, 113, .2) !important; color: var(--brass-hi) !important; }
.win button.jwk.none { opacity: .45; }
.st-jwg { display: grid; grid-template-columns: repeat(12, var(--bc)); grid-auto-rows: var(--bc); gap: .25rem; }
.st-jwg .cell { width: var(--bc); height: var(--bc); padding: 0; }
.st-jwg .cell.st-dim { opacity: .2; filter: grayscale(.85); } .st-jwg .cell.st-hit { outline: 2px solid var(--teal); outline-offset: -2px; }
.win .st-jwg button.cell.sel { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
body.touch .st-jw { width: 100%; container-type: inline-size; }
body.touch .st-jwg { --bc: 2.6rem; }
@supports (width: 1cqw) { body.touch .st-jwg { --bc: clamp(2rem, calc((100cqw - 3.2rem) / 12), 3.4rem); } }
body.touch .win button.ksock { --s: 3.3rem; }
.krl { flex: none; align-self: center; width: 2.4rem; font: 600 max(9px, 1rem)/1 var(--sans); font-style: normal; color: var(--ink3); text-align: right; padding-right: .2rem; }
#shop .st-tabs { width: 0; min-width: 100%; }
#shop .st-tabs .st-tab { flex: 1 0 auto; white-space: nowrap; }
#shop .st-tabs .st-tab.st-buy { flex: 0 0 auto; }
body.touch.shopping #shop.stash { padding: 4.2rem 1rem .8rem; }
body.touch.shopping #shop.stash > header, body.touch.shopping .ob-bag > .ob-head { height: 3.4rem; }
body.touch.shopping .ob-bag { padding-top: 3.6rem; }
body.touch.shopping .ob-bag .ob-body { padding: .6rem 1rem .8rem; }
body.touch.shopping #shop.stash .x, body.touch.shopping .ob-bag .x { top: .2rem; width: 3rem; height: 3rem; }
body.touch #shop .stash-box { gap: .35rem; overflow: hidden; }
body.touch #shop .st-tabs { gap: .2rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
body.touch #shop .st-tabs::-webkit-scrollbar { display: none; }
body.touch #shop .st-tabs .st-tab, body.touch #shop .st-tabs .st-tab.st-buy { flex: 0 0 auto; }
body.touch #shop .st-tabs .st-tab { flex: 1 0 auto; min-height: 2.6rem; min-width: 0; padding: 0 .3rem; border-width: .45rem; font-size: max(10px, 1.05rem); }
body.touch .st-tab i { margin-left: .25rem; font-size: max(9px, .95rem); }
body.touch .st-tools { gap: .35rem; }
body.touch .st-q { height: 2.8rem; min-height: 24px; padding: 0 .7rem; }
body.touch .win button.st-sort, body.touch .win button.st-all, body.touch .st-act button { min-height: 2.8rem; padding: 0 .6rem; font-size: 11px; }
body.touch .st-note { display: none; }
body.touch .st-cur, body.touch .st-jw { flex: 1 1 auto; height: auto; min-height: 8rem; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
body.touch .st-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.touch .kshelf { padding: .3rem .4rem .4rem; gap: .2rem; }
body.touch .kshelf h5 { font-size: max(9px, 1rem); }
body.touch .krow { gap: .2rem; }
body.touch .st-cur { gap: .4rem; padding: .3rem; }
body.touch .st-act .st-sel { display: none; }
body.touch .st-jw { --bc: 3rem; }
.st-bigmode .inv-grid.st-grid { --bc: var(--bcw, calc(min(4.4rem, calc((100vh - 30rem) / 12.6)) / 2)); --gap: .12rem; }
body.touch .st-bigmode .inv-grid.st-grid { --bc: 1.3rem; --gap: .1rem; }
@supports (width: 1cqw) { body.touch .st-bigmode .inv-grid.st-grid { --bc: clamp(1.1rem, calc((100cqw - 2.6rem) / 24), 1.8rem); } }
.st-bigmode .st-grid .cell i.lv, .st-bigmode .st-grid .cell i.cnt { font-size: max(7px, .8rem); line-height: 1; }
.st-bigmode .st-grid .cell i.socks, .st-bigmode .st-grid .cell i.chg, .st-bigmode .st-grid .cell i.unid { display: none; }
.win button.st-tab.st-big b { color: #9fe0d0; }
.win button.st-tab.st-gtab { color: #9fd0ff !important; } .win button.st-tab.st-utab { color: #e8a060 !important; }
.st-jw .st-jwg { max-height: calc(var(--bc) * 10.5 + 2.6rem); overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.st-uq { --bc: min(4.4rem, calc((100vh - 30rem) / 12.6)); box-sizing: border-box; width: calc(var(--bc) * 12 + 2.75rem); height: calc(var(--bc) * 12 + 2.75rem); display: flex; flex-direction: column; gap: .45rem; padding: .4rem;
border: 1px solid rgba(232, 133, 60, .35); background: linear-gradient(180deg, rgba(56, 30, 14, .4), rgba(8, 6, 4, .6)); }
.st-uq[hidden] { display: none; }
.st-uq.drop { outline: 2px solid var(--teal); outline-offset: -2px; }
.st-uqh { flex: none; display: flex; align-items: center; gap: .4rem; font: 600 max(10px, 1.2rem) var(--sans); color: var(--ink2); }
.st-uqh b { color: #e8853c; font-variant-numeric: tabular-nums; }
.st-uqh .uqbar { flex: 1; height: .5rem; min-height: 4px; margin-left: .6rem; border-radius: .3rem; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(232, 133, 60, .3); overflow: hidden; }
.st-uqh .uqbar u { display: block; height: 100%; background: linear-gradient(90deg, #a8521e, #f0a060); }
.st-uqg { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .45rem; }
.uqsec { display: flex; flex-direction: column; gap: .25rem; }
.uqsec h5 { margin: 0 .1rem; display: flex; align-items: baseline; gap: .4rem; font: 700 max(10px, 1.15rem)/1.2 var(--sans); color: #e0a874; letter-spacing: .03em; }
.uqsec h5 small { font: 600 max(9px, 1rem) var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; }
.uqrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; padding-right: .2rem; }
.uqrow .cell { width: auto; height: auto; aspect-ratio: 1; padding: 0; }
.uqrow .cell img.item-art.art.long { inset: -13%; width: 126%; height: 126%; transform: rotate(45deg); }
.uqrow .cell i.socks, .uqrow .cell i.lv, .uqrow .cell i.cnt { display: none; }
.uqrow .cell.zero { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(196, 160, 98, .15); }
.uqrow .cell.zero img.item-art, .uqrow .cell.zero > svg { opacity: .38; filter: grayscale(1) brightness(1.05); }
.uqrow .cell.zero i { display: none; }
.uqrow .cell.st-dim { opacity: .25; } .uqrow .cell.st-hit { outline: 2px solid var(--teal); outline-offset: -2px; }
.uqrow .cell.zero.st-hit img.item-art { opacity: .5; }
.win .uqrow button.cell.sel { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
body.touch .st-uq { width: 100%; height: auto; flex: 1 1 auto; min-height: 8rem; container-type: inline-size; }
#hud #b-talk { position: absolute; z-index: 4; left: 50%; bottom: calc(14rem + var(--sab)); transform: translateX(-50%); pointer-events: auto; display: inline-flex; align-items: center; gap: .5rem;
min-height: 3.6rem; padding: 0 1.6rem 0 1.1rem; border: 1px solid rgba(232, 196, 120, .75) ; border-image: none ; border-radius: 1.8rem; cursor: pointer;
background: linear-gradient(180deg, rgba(58, 42, 22, .94), rgba(18, 13, 8, .94)) ; color: var(--ink); font: 600 max(12px, 1.4rem) var(--sans);
box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .18); animation: talkIn .25s ease-out; }
#hud #b-talk[hidden] { display: none; }
#hud #b-talk:hover { border-color: #ffe0a0; color: #fff3d0; }
#hud #b-talk span { color: var(--ink2); }
#hud #b-talk b { color: #f6dc9a; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #b-talk i { width: 1.8rem; height: 1.6rem; flex: none; background: #f2d27a; clip-path: polygon(0 0, 100% 0, 100% 70%, 45% 70%, 18% 100%, 22% 70%, 0 70%); }
@keyframes talkIn { from { opacity: 0; transform: translate(-50%, .6rem); } to { opacity: 1; transform: translate(-50%, 0); } }
body.touch #hud #b-talk { bottom: calc(10.6rem + var(--sab)); min-height: 3.4rem; font-size: max(12px, 1.35rem); }
body.shopping #hud #b-talk { display: none; }
body.touch #settings .set-pc { display: none; }
#settings .set-social { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-start; }
#settings .set-social .soc { display: inline-flex; flex-direction: column; justify-content: center; min-width: 14rem; min-height: 4.2rem; padding: .5rem 1.4rem;
border-radius: .6rem; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
#settings .set-social .soc b { font: 700 max(12px, 1.4rem) var(--sans); letter-spacing: .02em; }
#settings .set-social .soc small { font: 500 max(10px, 1.1rem) var(--sans); opacity: .85; }
#settings .set-social .soc-facebook { background: linear-gradient(180deg, #2f6fd8, #1d4ea3); }
#settings .set-social .soc-discord { background: linear-gradient(180deg, #6170e8, #434fc0); }
#settings .set-social .soc:hover { filter: brightness(1.12); }
#hotbar #b-names { --x: -15.7rem; --y: -12.4rem; width: 4.2rem; height: 4.2rem; background-image: url(../assets/ui/dark/round_small.png); display: none; }
body.touch #hotbar #b-names { display: grid; place-items: center; }
#hotbar #b-names b { font: 700 max(10px, 1.2rem)/1 var(--sans); color: var(--brass-hi); text-shadow: 0 1px 2px #000; margin-top: -.5rem; }
#hotbar #b-names small { position: absolute; bottom: .55rem; font: 600 max(8px, .85rem)/1 var(--sans); color: var(--ink3); }
#hotbar #b-names.off { filter: grayscale(.9) brightness(.6); }
#hotbar #b-names.off b { text-decoration: line-through; }
.st-modes { display: flex; gap: .4rem; margin: 0 0 .5rem; }
.st-modes[hidden] { display: none; }
.st-modes button { flex: 1 1 0; min-height: 3.2rem; border: 1px solid var(--brass-lo); border-radius: .4rem; background: rgba(0, 0, 0, .35); color: var(--ink2); font: 600 max(11px, 1.25rem) var(--sans); cursor: pointer; }
.st-modes button.on { border-color: var(--brass-hi); color: #f6dc9a; background: linear-gradient(180deg, rgba(90, 66, 30, .85), rgba(40, 28, 12, .85)); }
.st-gbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .3rem 0 .4rem; font: 500 max(10px, 1.15rem)/1.3 var(--sans); color: var(--ink2); }
.st-gbar[hidden], .st-glog[hidden] { display: none; }
.st-gbar .st-grule b { color: #f6dc9a; }
.st-gbar .st-grule.all span:last-child { color: #8fe0a0; }
.st-gbar .st-grule.off span:last-child { color: #e9b26a; }
.st-gbar button { min-height: 2.8rem; padding: 0 .9rem; font-size: max(10px, 1.1rem); }
.st-gbar button.armed { border-color: #ffd36a; color: #ffd36a; }
.st-gbar .st-gnote { flex-basis: 100%; color: var(--ink3); font-size: max(9px, 1rem); }
.st-glog { max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 .5rem; padding: .3rem .5rem; border: 1px solid var(--brass-lo); border-radius: .4rem; background: rgba(0, 0, 0, .35); }
.st-glr { display: grid; grid-template-columns: 7.4rem minmax(0, 9rem) 3.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .2rem 0; font: 500 max(10px, 1.1rem)/1.3 var(--sans); color: var(--ink2); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.st-glr time { color: var(--ink3); font-variant-numeric: tabular-nums; }
.st-glr b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-glr.put span { color: #8fe0a0; } .st-glr.take span { color: #e9b26a; }
.st-glr i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-glr i.r1 { color: #9aa6ff; } .st-glr i.r2 { color: #ffe36e; } .st-glr i.r3 { color: #ff9c4a; }
.st-modes button:not(.on) { opacity: .5; filter: saturate(.4); }
.st-modes button.on { box-shadow: 0 0 .8rem rgba(246, 220, 154, .35); }
body.touch .st-modes { margin-bottom: .3rem; } body.touch .st-modes button { min-height: 2.6rem; font-size: max(10px, 1.1rem); }
body.touch .st-gbar { gap: .3rem; margin: .2rem 0; } body.touch .st-gbar .st-gnote { display: none; }
body.touch .st-gbar button { min-height: 2.4rem; padding: 0 .6rem; font-size: max(9px, 1rem); }
body.touch .st-glog { max-height: 10rem; }
#exchwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; display: flex; flex-direction: column; }
#exchwin .ex-body { margin-top: -.6rem; padding: .4rem .2rem .4rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7rem; }
#exchwin .ex-body > * { flex-shrink: 0; }
#exchwin h4 { margin: .4rem 0 0; font: 600 max(12px, 1.4rem) var(--serif); color: var(--brass-hi); }
#exchwin h5 { margin: 0 0 .3rem; font: 600 max(10px, 1.15rem) var(--sans); color: var(--ink2); }
.ex-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: stretch; }
#exchwin .ex-kind { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 .7rem; padding: .5rem .8rem; min-height: 5.6rem; text-align: left;
border: 1px solid var(--brass-lo); border-radius: .5rem; background: rgba(0, 0, 0, .35); color: var(--ink); cursor: pointer; }
#exchwin .ex-kind.on { border-color: var(--brass-hi); box-shadow: 0 0 .8rem rgba(246, 220, 154, .3); }
.ex-kind small { grid-column: 2; font: 500 max(9px, 1rem) var(--sans); color: var(--ink3); }
.ex-kind .ex-ic { grid-row: 1 / span 2; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; }
.ex-kind .ex-ic > * { max-width: 100%; max-height: 100%; }
.ex-kind .ex-nm { grid-column: 2; font: 600 max(11px, 1.3rem)/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-kind:not(.set) .ex-nm { color: var(--ink3); }
#exchwin .ex-swap { align-self: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid var(--brass-lo); background: rgba(0, 0, 0, .4); color: var(--brass-hi); font-size: 1.8rem; cursor: pointer; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); gap: .3rem; max-height: 22rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--brass-lo); border-radius: .5rem; background: rgba(0, 0, 0, .45); }
.ex-grid[hidden] { display: none; }
#exchwin .ex-k { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: .3rem; border: 1px solid rgba(255, 255, 255, .06); border-radius: .4rem; background: rgba(255, 255, 255, .03); cursor: pointer; opacity: .55; }
#exchwin .ex-k.has { opacity: 1; } #exchwin .ex-k.on { border-color: var(--brass-hi); }
.ex-k > :not(b) { max-width: 100%; max-height: 100%; }
.ex-k b { position: absolute; right: .2rem; bottom: .1rem; font: 700 max(9px, 1rem)/1 var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
.ex-book { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ex-book > .bot-note { grid-column: 1 / -1; }
.ex-col { min-width: 0; padding: .5rem .6rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .5rem; background: rgba(0, 0, 0, .3); }
.ex-row { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: .3rem; align-items: baseline; padding: .2rem 0; font: 500 max(10px, 1.1rem)/1.3 var(--sans); color: var(--ink2); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.ex-row b { color: var(--ink); font-variant-numeric: tabular-nums; } .ex-row i { font-style: normal; color: var(--ink3); }
.ex-row small { grid-column: 1 / -1; color: var(--ink3); font-size: max(9px, 1rem); }
.ex-row.ask b { color: #8fe0a0; } .ex-row.bid b { color: #e9c46a; }
.ex-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; padding: .7rem .8rem; border: 1px solid var(--brass-lo); border-radius: .5rem; background: rgba(0, 0, 0, .3); }
.ex-order label { display: flex; align-items: center; gap: .5rem; min-width: 0; font: 500 max(11px, 1.2rem) var(--sans); color: var(--ink2); }
.ex-order input { width: 12rem; min-width: 0; height: 3.4rem; padding: 0 .8rem; border: 1px solid var(--brass-lo); border-radius: .3rem; background: rgba(0, 0, 0, .5); color: var(--ink); font: 600 max(12px, 1.35rem) var(--sans); font-variant-numeric: tabular-nums; }
.ex-order label i { font-style: normal; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ex-calc { grid-column: 1 / -1; margin: 0; font: 500 max(10px, 1.15rem)/1.5 var(--sans); color: var(--ink2); }
.ex-calc b { color: var(--ink); } .ex-calc b.no { color: #ef7a68; } .ex-now { color: #8fe0a0; } .ex-wait { color: #e9c46a; }
.ex-btns { grid-column: 1 / -1; display: flex; gap: .6rem; justify-content: flex-end; }
.ex-btns button { min-width: 12rem; min-height: 3.6rem; }
.ex-mine { display: flex; flex-direction: column; gap: .4rem; }
.ex-ord { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .4rem .6rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .5rem; background: rgba(0, 0, 0, .3); }
.ex-ord.done { opacity: .85; }
.ex-oi { display: flex; align-items: center; gap: .2rem; } .ex-oi > :not(i) { width: 3.2rem; height: 3.2rem; } .ex-oi i { font-style: normal; color: var(--ink3); }
#exchwin i.cnt { display: none; }
.ex-ot { display: flex; flex-direction: column; min-width: 0; font: 500 max(10px, 1.15rem)/1.35 var(--sans); }
.ex-ot b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-ot small { color: var(--ink3); }
.ex-ob { display: flex; gap: .4rem; } .ex-ob button { min-height: 3rem; padding: 0 1rem; }
.ex-ob button.armed { border-color: #ef7a68; color: #ef7a68; }
#exchwin .ex-gold { display: grid; place-items: center; width: 100%; height: 100%; } #exchwin .ex-gold svg { width: 70%; height: 70%; }
#exchwin h4 small { margin-left: .5rem; font: 500 max(10px, 1.05rem) var(--sans); color: var(--ink3); }
.ex-gshop { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.ex-gs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .35rem .6rem; border: 1px solid rgba(255, 215, 120, .12); border-radius: .5rem; background: rgba(40, 30, 10, .35); }
.ex-gs.done { opacity: .6; }
.ex-gi > * { width: 3.2rem; height: 3.2rem; }
.ex-gt { display: flex; flex-direction: column; min-width: 0; font: 500 max(10px, 1.15rem)/1.35 var(--sans); }
.ex-gt > b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-gt small { color: var(--ink3); } .ex-gt small b { color: var(--ink); } .ex-gt small .coin svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; } .ex-gt b.no { color: #ef7a68; }
.ex-gb { display: flex; gap: .3rem; align-items: center; } .ex-gb input { width: 4.2rem; min-height: 3rem; } .ex-gb button { min-height: 3rem; padding: 0 1rem; } .ex-gb i { font-style: normal; color: var(--ink3); }
body.touch #exchwin { top: calc(.8rem + var(--sat)); transform: translateX(-50%); max-height: calc(100vh - 1.6rem - var(--sat) - var(--sab)); }
body.touch .ex-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body.touch .ex-book .ex-tr { display: none; }
@media (max-width: 560px) { .ex-book { grid-template-columns: minmax(0, 1fr); } .ex-order { grid-template-columns: minmax(0, 1fr); } }
.rg-who .cs-gloss { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1rem; font-size: max(11px, 1.25rem); }
.rg-who .rg-exp small { grid-column: 1; align-self: center; }
body.touch .ob-char .rg-who { grid-template-columns: minmax(0, 1fr) auto auto; }
body.touch .rg-who .cs-gloss { grid-column: 2; grid-row: 1; align-self: end; min-height: 2.4rem; padding: 0 .7rem; margin-bottom: .2rem; }
body.touch .rg-who .rg-exp .lv { grid-column: 3; }
body.touch .rg-who .rg-exp .exp, body.touch .rg-who .rg-exp small { grid-column: 1 / -1; }
body.touch .cs-attrs .cs-tile { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; column-gap: .5rem; }
body.touch .cs-attrs .cs-tile > small { grid-column: 1; grid-row: 1; }
body.touch .cs-attrs .cs-tile > i:not(.cs-give) { grid-column: 2; grid-row: 1; align-self: center; }
body.touch .cs-attrs .cs-tile > b, body.touch .cs-attrs .cs-tile > i.cs-give { grid-column: 1 / -1; }
.rg-who .cs-gloss i { font-style: normal; font-weight: 700; color: var(--teal); }
#glosswin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96rem; max-width: calc(100vw - 2rem); height: 76rem; max-height: calc(100vh - 2rem); z-index: 30; display: flex; flex-direction: column; }
#glosswin.hidden { display: none; }
#glosswin .gl-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .4rem 1.2rem 1rem; font: 400 max(11px, 1.3rem)/1.55 var(--sans); color: var(--ink2); user-select: text; -webkit-user-select: text; touch-action: pan-y; }
#glosswin .gl-lead { margin: .2rem 0 .8rem; color: var(--ink3); }
#glosswin .gl-wait { padding: 3rem 0; text-align: center; color: var(--ink3); }
#glosswin .gl-sec h3 { margin: 1.4rem 0 .6rem; padding-bottom: .3rem; font: 600 max(13px, 1.55rem) var(--serif); color: var(--brass-hi); border-bottom: 1px solid rgba(140, 111, 63, .4); }
#glosswin .gl-ul { margin: 0 0 .8rem; padding-left: 1.8rem; } #glosswin .gl-ul li { margin: .2rem 0; }
#glosswin .gl-tw { overflow-x: auto; margin: .4rem 0 .8rem; }
#glosswin .gl-tbl { width: 100%; border-collapse: collapse; font-size: max(10px, 1.2rem); }
#glosswin .gl-tbl th { text-align: left; font-weight: 600; color: var(--ink3); padding: .4rem .6rem; border-bottom: 1px solid rgba(140, 111, 63, .4); white-space: nowrap; }
#glosswin .gl-tbl td { padding: .45rem .6rem; border-bottom: 1px solid rgba(140, 111, 63, .15); vertical-align: top; }
#glosswin .gl-tbl td b { color: var(--ink); } #glosswin .gl-it { color: var(--r2); }
#glosswin .gl-foot { flex: none; display: flex; justify-content: flex-end; padding: .5rem 1.2rem .8rem; }
#glosswin .gl-wiki { color: var(--teal); font-size: max(11px, 1.25rem); }
body.touch #glosswin { width: auto; height: auto; left: calc(.8rem + var(--sal)); right: calc(.8rem + var(--sar)); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); transform: none; max-width: none; max-height: none; }
body.touch #h-status { gap: .6rem; padding: .35rem .9rem .5rem .45rem; }
body.touch #h-status .portrait { width: 4.2rem; height: 4.2rem; }
body.touch #h-level { bottom: -.55rem; min-width: 2.9rem; font-size: max(8px, .85rem); line-height: 1.4rem; }
body.touch #h-status .st-info { width: 11.6rem; gap: .2rem; }
body.touch #h-status .st-top { min-height: 1.3rem; }
body.touch #h-name { font-size: max(10px, 1.1rem); }
body.touch #h-status .bars { gap: .2rem; }
body.touch #h-status .bar { height: 1.3rem; }
body.touch #h-status .bar span { font-size: max(8px, .85rem); line-height: 1.3rem; }
body.touch #h-status .bar.ag { height: .45rem; }
body.touch #h-buffs { top: calc(6.4rem + var(--sat)); }
body.touch #voyage-hud, body.touch #dg-hud, body.touch #trial-hud { transform: translateX(-50%) scale(.8); transform-origin: 50% 0; }
body.touch #voyage-banner, body.touch #dg-banner, body.touch #trial-banner { top: calc(50% + 2.4rem); }
body.touch #trial-hud.bannered .tr-affs, body.touch #trial-hud.bannered .tr-tip { visibility: visible; }
body.touch #voyage-banner small, body.touch #dg-banner small { font-size: max(8px, .9rem); letter-spacing: .06em; }
body.touch #voyage-banner .vb-name, body.touch #dg-banner .vb-name { font-size: max(14px, 2rem); padding: 0 2.4rem; letter-spacing: .04em; }
body.touch #voyage-banner .vb-goal, body.touch #dg-banner .vb-goal { font-size: max(9px, 1rem); letter-spacing: 0; }
body.touch #trial-banner.boss .tb-name { font-size: max(16px, 2.4rem); padding: 0 3rem; }
#hud #qs-track { position: relative; }
#hud #qs-track b { padding-right: 2rem; }
#hud #qs-track .qs-fold { position: absolute; top: -.2rem; right: -.3rem; width: 2.6rem; height: 2.4rem; display: grid; place-items: center; font-style: normal; color: var(--brass-hi); }
#hud #qs-track .qs-fold::before { content: '\25B4'; font: 700 max(11px, 1.3rem)/1 var(--sans); }
#hud #qs-track.folded, body.touch #hud #qs-track.folded { width: auto; align-self: flex-end; display: flex; align-items: center; gap: .3rem; padding: .15rem .5rem; }
#hud #qs-track.folded .qs-fold { position: static; width: auto; height: auto; }
#hud #qs-track.folded .qs-fold::before { content: '\25BE'; }
#hud #qs-track .qs-tab { color: var(--brass-hi); font: 600 max(10px, 1.1rem)/1.3 var(--serif); }
body.touch #hud #qs-track { width: 16.5rem; font-size: max(9px, 1rem); }
body.touch #hud #qs-track b { font-size: max(10px, 1.15rem); }
#hud #chat-fold { position: relative; flex: 0 0 2.6rem; width: 2.6rem; height: 2.4rem; display: grid; place-items: center; padding: 0; color: var(--brass-hi);
border: 0 solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; }
#hud #chat-fold::before { content: '\25BE'; font: 700 max(11px, 1.3rem)/1 var(--sans); }
#hud #chatbox.folded #chat-fold::before { content: '\25B4'; }
#hud #chat-fold.unread::after { content: ''; position: absolute; top: .1rem; right: .1rem; width: .8rem; height: .8rem; border-radius: 50%; background: #e0443a; box-shadow: 0 0 0 1px #000; }
#chatbox.folded:not(.typing) #chat-log, #chatbox.folded:not(.typing) #chat-size, #hud #chatbox.folded:not(.typing) #chat-tabs button[data-ch] { display: none; }
#chatbox.folded:not(.typing) { width: auto !important; min-width: 0 !important; }
body.touch #hud #chat-fold { flex-basis: 2.6rem; width: 2.6rem; height: 2.2rem; }
#h-status .portrait.fxf::after { inset: -17.5%; background: var(--pfr) center / 100% 100% no-repeat; }
body:not(.touch) #h-status.pfr { display: flex; position: absolute; z-index: 2; top: 1.4rem; left: 1.4rem; pointer-events: none; }
body:not(.touch) #h-status.pfr .st-info { display: none; }
body:not(.touch) #h-status.pfr .portrait { width: 9.6rem; height: 9.6rem; }
#cshopwin.fxw { width: 90rem; height: 72rem; }
body.touch #cshopwin.fxw { width: 92rem; }
#cshopwin .cs-body.cs-fxbody { overflow: hidden; display: flex; flex-direction: column; padding-right: 0; }
#cshopwin .cs-fxwrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: .8rem; }
body.touch #cshopwin .cs-fxwrap { grid-template-columns: 22rem minmax(0, 1fr); }
#cshopwin .cs-fxlist { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: .8rem; padding-right: .2rem; }
#cshopwin .cs-fit { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: .45rem; padding: .5rem; border: 1px solid rgba(216, 184, 113, .45); border-radius: .6rem; background: rgba(14, 11, 8, .6); }
#cshopwin .cs-fit h4 { margin: 0; }
#cshopwin .cs-fit .bot-note { margin: 0; font-size: 1.15rem; }
#cshopwin .cs-fitc { width: 100%; height: auto; aspect-ratio: 240 / 300; border-radius: .4rem; display: block; }
#cshopwin .cs-fitbar { display: flex; flex-wrap: wrap; gap: .3rem; }
#cshopwin .cs-fitbar .btn { flex: 1 1 auto; min-width: 0; padding-inline: .4rem; }
#cshopwin .cs-fitbar .btn.on { outline: 1px solid #f2d27a; color: #f2d27a; }
#cshopwin .cs-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
#cshopwin .cs-chip { font: 600 max(10px, 1.1rem) var(--sans); padding: .15rem .55rem; border-radius: 1rem; border: 1px solid rgba(242, 210, 122, .55); background: rgba(242, 210, 122, .1); color: var(--ink); cursor: pointer; text-align: left; }
#cshopwin .cs-pv { position: relative; }
#cshopwin .cs-try { position: absolute; right: .35rem; bottom: .35rem; font: 700 max(10px, 1.15rem) var(--sans); padding: .2rem .65rem; border-radius: 1rem; border: 1px solid rgba(242, 210, 122, .75); background: rgba(14, 11, 8, .85); color: #f2d27a; cursor: pointer; }
#cshopwin .cs-try:hover { background: rgba(60, 44, 20, .95); }
#cshopwin .cs-try.on { background: #f2d27a; color: #1a120a; }
#cshopwin .cs-item.tried { border-color: rgba(242, 210, 122, .75); box-shadow: inset 0 0 0 1px rgba(242, 210, 122, .35); }
#cshopwin .cs-item.tried .cs-state { color: #f2d27a; font-weight: 700; }
#trybar { position: fixed; left: 50%; top: calc(6.2rem + var(--sat, 0px)); transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); padding: .4rem .5rem .4rem .9rem; border: 1px solid rgba(242, 210, 122, .6); border-radius: .6rem; background: rgba(16, 12, 8, .9); color: var(--ink); font: 600 max(11px, 1.25rem) var(--sans); box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .5); }
#trybar.hidden { display: none; }
#trybar .tb-l { color: var(--ink3); white-space: nowrap; }
#trybar .tb-n { color: #f2d27a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30rem; }
#trybar .tb-t { color: var(--ink2); font-variant-numeric: tabular-nums; }
#trybar button { font: 700 max(11px, 1.2rem) var(--sans); padding: .25rem .8rem; border-radius: .4rem; border: 1px solid rgba(242, 210, 122, .7); background: rgba(242, 210, 122, .14); color: #f2d27a; cursor: pointer; white-space: nowrap; }
#trybar button.ghost { background: transparent; color: var(--ink2); border-color: rgba(216, 184, 113, .35); }
body.touch #trybar { top: calc(.6rem + var(--sat, 0px)); }
body.touch #trybar .tb-l { display: none; }
body.touch #cshopwin .cs-fitc { aspect-ratio: 240 / 210; object-fit: cover; object-position: 50% 38%; }
body.touch #trybar { max-width: min(48rem, 54vw); }
body.touch #trybar .tb-n { max-width: 22rem; }
.gw-sp-l.gw-lr { color: #ff9a8a; }
.gw-bar.gw-lr > i { background: linear-gradient(90deg, #7a1c1c, #ff6a5a); box-shadow: 0 0 .6rem rgba(255, 90, 80, .45); }
body.touch .gw-spirit .gw-sp-l.gw-lr { grid-row: 3; grid-column: 1 / -1; white-space: nowrap; font-size: max(10px, 1.15rem); }
body.touch .gw-spirit .gw-sp-n.gw-lr { grid-row: 4; grid-column: 1 / -1; }
body.touch .gw-spirit .gw-bar.gw-lr { grid-row: 5; }
#hud #qs-track .qs-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .25rem .7rem; border-radius: 1rem; border: 1px solid rgba(242, 210, 122, .65); background: rgba(242, 210, 122, .14); color: #f2d27a; font: 700 max(10px, 1.15rem)/1.2 var(--sans); cursor: pointer; }
#hud #qs-track .qs-go i { font-style: normal; font-size: .85em; }
#hud #qs-track .qs-go:hover { background: rgba(242, 210, 122, .26); }
#hud #qs-track .qs-go.on { border-color: rgba(255, 140, 120, .7); background: rgba(255, 120, 100, .14); color: #ffb3a3; }
body.touch #hud #qs-track .qs-go { position: absolute; top: -.15rem; right: 2.3rem; margin: 0; padding: .15rem .6rem; font-size: max(10px, 1.1rem); }
body.touch #hud #qs-track .qs-go span { display: none; }
body.touch #hud #qs-track > b { padding-right: 5rem; }
#journal .jr-act .jr-go { border-color: rgba(242, 210, 122, .8); }
#aq-bar { position: fixed; left: 50%; top: calc(6.2rem + var(--sat, 0px)); transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); padding: .4rem .5rem .4rem .9rem; border: 1px solid rgba(242, 210, 122, .6); border-radius: .6rem; background: rgba(16, 12, 8, .9); color: var(--ink); font: 600 max(11px, 1.25rem) var(--sans); box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .5); }
#aq-bar[hidden] { display: none; }
#aq-bar .aq-ic { font-style: normal; color: #f2d27a; font-size: .85em; animation: aqPulse 1.2s ease-in-out infinite; }
#aq-bar .aq-l { color: var(--ink3); white-space: nowrap; }
#aq-bar .aq-t { color: #f2d27a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34rem; }
#aq-bar button { font: 700 max(11px, 1.2rem) var(--sans); padding: .25rem .8rem; border-radius: .4rem; border: 1px solid rgba(216, 184, 113, .45); background: transparent; color: var(--ink2); cursor: pointer; white-space: nowrap; }
@keyframes aqPulse { 50% { opacity: .35; } }
body.touch #aq-bar { top: calc(.6rem + var(--sat, 0px)); max-width: 60vw; }
body.touch #aq-bar .aq-t { max-width: 24vw; }
#trybar:not(.hidden) ~ #aq-bar { top: calc(9.4rem + var(--sat, 0px)); }
#hud #qs-track .qs-run { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .25rem; color: #9fe6a8; font: 700 max(10px, 1.1rem)/1.2 var(--sans); }
#hud #qs-track .qs-dot { flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: #7ee08c; box-shadow: 0 0 .5rem #7ee08c; animation: aqPulse 1.2s ease-in-out infinite; }
#hud #qs-track.folded .qs-dot { display: inline-block; }
#aq-bar .aq-n { color: #fff3c8; font: 700 max(11px, 1.2rem) var(--sans); white-space: nowrap; }
#aq-bar .aq-n:empty { display: none; }
#aq-bar.fight { border-color: rgba(126, 224, 140, .7); }
#aq-bar.fight .aq-ic { color: #7ee08c; }
body.touch #hud #qs-track .qs-run { font-size: max(9px, 1rem); margin: 0 0 .15rem; }
#journal .jr-nogo { margin: 1rem 0 -.4rem; color: #c9b38a; font-size: max(10px, 1.15rem); }
.orb .clip::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rs, 0) * 100%); pointer-events: none;
background: repeating-linear-gradient(135deg, rgba(30, 9, 11, .94) 0 .5rem, rgba(78, 22, 26, .94) .5rem 1rem); box-shadow: inset 0 -.2rem 0 rgba(255, 128, 112, .45); }
.orb:not(.rsv) .clip::after { display: none; }
#h-status .bar.hp::before { content: ''; position: absolute; top: .2rem; bottom: .2rem; right: .2rem; width: calc(var(--rs, 0) * (100% - .4rem)); pointer-events: none;
background: repeating-linear-gradient(135deg, rgba(30, 9, 11, .95) 0 .35rem, rgba(90, 26, 30, .95) .35rem .7rem); }
#buff-list .bf[data-k="lowlife"] .bi { color: #ff8a7a; box-shadow: 0 0 0 1px rgba(255, 110, 96, .55); animation: llPulse 1.6s ease-in-out infinite; }
#buff-list .bf[data-k="lowlife"] b { display: none; }
@keyframes llPulse { 50% { box-shadow: 0 0 .5rem 1px rgba(255, 90, 80, .8); } }
.trd-yours .cell.unseen > * { filter: brightness(.25) grayscale(.8) blur(1px); transition: filter .2s; }
.trd-yours .cell.unseen::after { content: '?'; position: absolute; inset: .3rem; z-index: 2; display: grid; place-items: center; pointer-events: none;
background: repeating-linear-gradient(135deg, rgba(10, 8, 6, .82) 0 .45rem, rgba(40, 30, 18, .82) .45rem .9rem); border: 1px solid rgba(216, 184, 113, .35);
font: 700 max(14px, 2.2rem)/1 var(--serif); color: rgba(246, 220, 154, .9); text-shadow: 0 1px 2px #000; }
.trd-yours .cell:not(.unseen) > * { transition: filter .2s; }
body.touch #h-status .bar.ag { height: 1.3rem; }
body.touch #h-status .bar.ag span { display: block; }
#h-status .bar.ag i { filter: hue-rotate(185deg) saturate(.8) brightness(1.75); }
body.touch:has(#h-status .bar.ag:not(.hidden)) #h-buffs { top: calc(7.25rem + var(--sat)); }
body.touch:has(#h-status .bar.ag:not(.hidden)) #party { top: calc(9.45rem + var(--sat)); }
#cshopwin .cs-note { flex: none; margin: .5rem 0 0; padding: .45rem .8rem .45rem 2.6rem; position: relative; border: 1px solid rgba(216, 184, 113, .45); border-radius: .4rem;
background: linear-gradient(90deg, rgba(120, 86, 24, .38), rgba(40, 30, 14, .25)); font: 600 max(11px, 1.2rem)/1.4 var(--sans); color: #f6dc9a; }
#cshopwin .cs-note::before { content: '★'; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #ffd76a; font-size: 1.3em; }
body.touch #cshopwin .cs-note { margin-top: .3rem; padding: .25rem .6rem .25rem 2.2rem; font-size: max(10px, 1.05rem); }
#cshopwin .cs-free { margin: 0; padding: .35rem .6rem; border: 1px dashed rgba(143, 227, 155, .55); border-radius: .3rem; font: 600 max(10px, 1.1rem)/1.35 var(--sans); color: #8fe39b; text-align: center; }
#botwin .bot-pets { display: flex; flex-direction: column; gap: .6rem; }
#botwin .bot-pet { padding: .5rem .7rem; border: 1px solid rgba(216, 184, 113, .3); border-radius: .4rem; background: rgba(0, 0, 0, .22); }
#botwin .bot-pet.off { opacity: .55; }
#botwin .bot-pet .srow2 { margin: 0; }
#botwin .bot-petn { font-style: normal; color: var(--brass-hi); margin-left: .3rem; }
#botwin .bot-pet .bot-pk { margin-top: .4rem; }
#dpsmeter { position: fixed; z-index: 6; left: 50%; top: calc(1.4rem + var(--sat, 0px)); transform: translateX(-50%); width: 28rem; max-width: calc(100vw - 2rem); box-sizing: border-box;
display: flex; flex-direction: column; gap: .35rem; padding: .5rem .9rem .7rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem;
font: 500 max(10px, 1.15rem)/1.3 var(--sans); color: var(--ink2); box-shadow: 0 0 1.2rem rgba(243, 196, 92, .22); pointer-events: auto; }
#dpsmeter header { display: flex; align-items: center; gap: .6rem; }
#dpsmeter header b { font: 700 max(11px, 1.3rem)/1.2 var(--serif); color: var(--brass-hi, #f3d58e); }
#dpsmeter header small { flex: 1; min-width: 0; color: var(--ink3); font-size: max(9px, 1.05rem); }
#dpsmeter header .x { flex: none; min-height: 0; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; background: none; color: var(--ink3); font-size: max(11px, 1.3rem); cursor: pointer; }
#dpsmeter p { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .45rem; }
#dpsmeter b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
#dpsmeter .dm-big span { color: var(--ink2); }
#dpsmeter .dm-big b { font: 800 max(15px, 2.2rem)/1.1 var(--sans); color: #ffd66b; text-shadow: 0 0 .8rem rgba(255, 196, 70, .55), 0 1px 1px #000; margin-left: auto; }
#dpsmeter.end .dm-big b { color: #9fe3a9; text-shadow: 0 0 .8rem rgba(120, 220, 140, .45), 0 1px 1px #000; }
body.touch #dpsmeter { width: 24rem; top: calc(.6rem + var(--sat, 0px)); padding: .3rem .6rem .5rem; gap: .2rem; font-size: max(9px, 1.05rem); }
body.touch #dpsmeter .dm-big b { font-size: max(13px, 1.8rem); }
#wb-banner { position: absolute; z-index: 6; left: 50%; top: 24%; transform: translateX(-50%); width: max-content; max-width: min(92vw, 72rem); padding: 1.6rem 4.4rem 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; cursor: pointer;
background: radial-gradient(ellipse at 50% 0%, rgba(120, 30, 8, .78), rgba(18, 6, 4, .9) 70%); border: 1px solid rgba(255, 150, 60, .55); box-shadow: 0 0 0 1px #050302, 0 0 3rem rgba(255, 90, 20, .35), inset 0 0 2.4rem rgba(255, 110, 30, .18);
clip-path: polygon(2.2rem 0, calc(100% - 2.2rem) 0, 100% 50%, calc(100% - 2.2rem) 100%, 2.2rem 100%, 0 50%); animation: wbb-in .45s ease-out; }
#wb-banner.hidden { display: none; }
#wb-banner .wbb-fire { width: 9rem; height: .35rem; background: linear-gradient(90deg, transparent, #ffb347, #ff5a1f, #ffb347, transparent); box-shadow: 0 0 1.2rem rgba(255, 120, 40, .9); border-radius: .3rem; }
#wb-banner .wbb-title { font: 800 max(18px, 3.4rem)/1.1 var(--serif); letter-spacing: .04em; color: #ffcf6a; text-shadow: 0 2px 0 #2a0800, 0 0 1.6rem rgba(255, 120, 30, .8); }
#wb-banner .wbb-line { font: 700 max(13px, 1.9rem)/1.3 var(--sans); color: #ffe9cf; text-shadow: 0 1px 2px #000; }
#wb-banner .wbb-sub { font: 600 max(11px, 1.45rem)/1.3 var(--sans); color: #ffb98a; font-variant-numeric: tabular-nums; }
#wb-banner .wbb-sub:empty { display: none; }
#wb-banner.wbb-dead { background: radial-gradient(ellipse at 50% 0%, rgba(110, 80, 10, .8), rgba(16, 10, 2, .9) 70%); border-color: rgba(255, 214, 110, .6); }
#wb-banner.wbb-dead .wbb-sub { color: #ffe36e; font-size: max(13px, 1.8rem); }
#wb-banner.wbb-gone { background: radial-gradient(ellipse at 50% 0%, rgba(50, 30, 40, .82), rgba(10, 8, 12, .9) 70%); border-color: rgba(200, 170, 190, .4); }
#wb-banner.wbb-gone .wbb-title { color: #d9c4d0; text-shadow: 0 2px 0 #000; }
@keyframes wbb-in { from { opacity: 0; transform: translateX(-50%) scale(.86); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
body.touch #wb-banner { top: 20%; padding: 1rem 2.6rem .9rem; }
#hud #h-wb { height: 2.8rem; padding: 0 .6rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; pointer-events: auto; cursor: pointer; color: var(--ink); }
#hud #h-wb.hidden { display: none; }
#h-wb b { font: 800 max(11px, 1.35rem)/1 var(--sans); letter-spacing: .03em; color: #ff9c4a; text-shadow: 0 0 .8rem rgba(255, 120, 40, .7), 0 1px 1px #000; }
#h-wb span { font-variant-numeric: tabular-nums; font-size: max(10px, 1.2rem); }
#h-wb.up b { animation: wb-pulse 1.4s ease-in-out infinite; }
@keyframes wb-pulse { 50% { color: #ffd66b; text-shadow: 0 0 1.2rem rgba(255, 170, 60, .95), 0 1px 1px #000; } }
body.touch #hud #h-wb { align-self: flex-end; width: max-content; height: 2.4rem; padding: 0 .3rem; gap: .5rem; font-size: max(9px, 1.05rem); border-width: .6rem; }
#h-boss .bb-gate { padding: .15rem 1rem; border-radius: 1rem; font: 700 max(10px, 1.25rem)/1.3 var(--sans); color: #ffe0b0; background: rgba(40, 20, 6, .7); text-shadow: 0 1px 1px #000; white-space: nowrap; }
#h-boss .bb-gate.shut { color: #ffb070; background: rgba(90, 20, 6, .78); box-shadow: 0 0 .8rem rgba(255, 90, 30, .45); }
#h-boss .bb-gate.hidden { display: none; }
#travel.wpm { width: 130rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 4rem); top: 2rem; display: flex; flex-direction: column; }
#travel.wpm > header { display: flex; align-items: center; gap: 1.2rem; }
#travel.wpm .wpm-tabs { display: flex; gap: .4rem; margin-left: auto; }
#travel.wpm .wpm-tabs button { padding: .3rem 1.1rem; border: 1px solid var(--iron); background: var(--ob2); color: var(--ink2); font: 600 max(11px, 1.2rem)/1.4 var(--sans); cursor: pointer; }
#travel.wpm .wpm-tabs button.on { color: var(--brass-hi); border-color: var(--brass); background: var(--ob3); }
#travel.wpm .wpm-body { display: flex; gap: 1rem; min-height: 0; flex: 1; }
#travel.wpm .wpm-map { flex: 1; min-width: 0; }
#travel.wpm .wpm-map.hidden, #travel.wpm .wpm-rows.hidden, #travel.wpm .wpm-info.hidden { display: none; }
#travel.wpm .wpm-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #2a2014 url(../assets/ui/wpmap/world.webp) center / 100% 100% no-repeat; border: 1px solid var(--brass-lo); overflow: hidden; }
#travel.wpm .wpm-roads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#travel.wpm .wpm-roads line { stroke: rgba(70, 44, 22, .45); stroke-width: 2px; stroke-dasharray: 3 5; }
#travel.wpm .wpm-roads line.lit { stroke: rgba(92, 52, 20, .9); stroke-width: 3px; stroke-dasharray: 5 4; }
#travel.wpm .wpm-n { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 10rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
#travel.wpm .wpm-n i { display: block; width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden; background: #1a1612; box-shadow: 0 0 0 2px #3a2614, 0 0 0 4px #c9a466, 0 0 0 5px #3a2614, 0 .3rem .7rem rgba(0, 0, 0, .55); transition: transform .12s, box-shadow .12s; }
#travel.wpm .wpm-n i img { width: 100%; height: 100%; display: block; }
#travel.wpm .wpm-n b { margin-top: .15rem; padding: .1rem 1.1rem; font: 700 max(9px, 1.05rem)/1.2 var(--serif); color: #3a2410; white-space: nowrap; background: linear-gradient(#f6e8c4, #dcc28c); box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
clip-path: polygon(0 0, 100% 0, calc(100% - .55rem) 50%, 100% 100%, 0 100%, .55rem 50%); }
#travel.wpm .wpm-n small { font: 700 max(9px, .95rem)/1 var(--sans); color: #2a1a0c; text-shadow: 0 0 3px rgba(255, 244, 214, .95), 0 0 6px rgba(255, 244, 214, .8); }
#travel.wpm .wpm-n.town i { width: 5.6rem; height: 5.6rem; box-shadow: 0 0 0 2px #2a2216, 0 0 0 3px var(--brass-hi), 0 0 1rem rgba(255, 214, 120, .45); }
#travel.wpm .wpm-n.town b { background: linear-gradient(#fff2c8, #e8c770); color: #4a2a06; padding: .15rem 1.3rem; }
#travel.wpm .wpm-n:hover i, #travel.wpm .wpm-n.pick i { transform: scale(1.1); box-shadow: 0 0 0 2px #2a2216, 0 0 0 3px #ffe39a, 0 0 1.4rem rgba(255, 220, 140, .7); }
#travel.wpm .wpm-n.here i { box-shadow: 0 0 0 2px #0c2a26, 0 0 0 3px var(--teal), 0 0 1.4rem rgba(72, 194, 176, .8); animation: wpm-here 1.8s ease-in-out infinite; }
#travel.wpm .wpm-n.here b { background: linear-gradient(#d8f6ee, #9fd9cc); color: #0b3a32; }
@keyframes wpm-here { 50% { box-shadow: 0 0 0 2px #0c2a26, 0 0 0 4px var(--teal), 0 0 2.2rem rgba(72, 194, 176, .95); } }
#travel.wpm .wpm-n.locked i img { filter: grayscale(1) brightness(.35); }
#travel.wpm .wpm-n.locked b { background: linear-gradient(#cfc6b2, #a99d86); color: #5d5444; }
#travel.wpm .wpm-n.lair i { box-shadow: 0 0 0 2px #2a0a04, 0 0 0 3px #ff7a3a, 0 0 1.2rem rgba(255, 90, 30, .6); }
#travel.wpm .wpm-n.lair b { background: linear-gradient(#ffd2a8, #e98b52); color: #4a1004; }
#travel.wpm .wpm-n.wbon i { animation: wpm-wb 1.1s ease-in-out infinite; }
@keyframes wpm-wb { 50% { box-shadow: 0 0 0 2px #2a0a04, 0 0 0 4px #ffb347, 0 0 2.6rem rgba(255, 110, 30, 1); } }
#travel.wpm .wpm-side { flex: none; width: 22rem; display: flex; flex-direction: column; gap: .6rem; min-height: 0; overflow-y: auto; }
#travel.wpm .wpm-info { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .8rem; border: 1px solid var(--iron); background: rgba(10, 8, 6, .6); text-align: center; }
#travel.wpm .wpm-big { width: 12rem; height: 12rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #2a2216, 0 0 0 3px var(--brass); }
#travel.wpm .wpm-big img { width: 100%; height: 100%; display: block; }
#travel.wpm .wpm-name { font: 700 max(13px, 1.7rem)/1.2 var(--serif); color: var(--brass-hi); }
#travel.wpm .wpm-sub { font: 600 max(10px, 1.15rem)/1.3 var(--sans); color: var(--ink2); }
#travel.wpm .wpm-wb { margin: .2rem 0; display: flex; flex-direction: column; gap: .2rem; padding: .4rem .7rem; border: 1px solid rgba(255, 120, 50, .45); background: rgba(70, 16, 4, .55); font: 600 max(10px, 1.15rem)/1.35 var(--sans); }
#travel.wpm .wpm-wb b { color: #ffab6e; }
#travel.wpm .wpm-wb span { color: #ffe0c4; font-variant-numeric: tabular-nums; }
#travel.wpm .wpm-go { width: 100%; padding: .7rem 0; border: 1px solid var(--brass); background: linear-gradient(#3a2c16, #1f170c); color: var(--brass-hi); font: 700 max(12px, 1.4rem)/1.2 var(--sans); cursor: pointer; }
#travel.wpm .wpm-go.off { border-color: var(--iron); background: var(--ob2); color: var(--ink3); cursor: default; }
#travel.wpm .wpm-side .list { display: flex; flex-direction: column; gap: .3rem; }
#travel.wpm .wpm-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
#travel.wpm .wpm-wbrow b { color: #ffab6e; }
body.touch #travel.wpm { width: 100%; max-width: calc(100vw - 1.2rem); top: calc(.6rem + var(--sat)); max-height: calc(100vh - 1.2rem - var(--sat) - var(--sab)); }
body.touch #travel.wpm .wpm-body { flex-direction: column; overflow-y: auto; }
body.touch #travel.wpm .wpm-side { width: auto; overflow: visible; }
body.touch #travel.wpm .wpm-info { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: left; }
body.touch #travel.wpm .wpm-big { width: 6rem; height: 6rem; }
body.touch #travel.wpm .wpm-n { width: 7rem; }
body.touch #travel.wpm .wpm-n i { width: 3.6rem; height: 3.6rem; }
body.touch #travel.wpm .wpm-n.town i { width: 4.2rem; height: 4.2rem; }
body.touch #travel.wpm .wpm-n b { padding: .05rem .7rem; }
body.touch #travel.wpm .wpm-n small { display: none; }
@media (max-width: 900px) { #travel.wpm .wpm-body { flex-direction: column; } #travel.wpm .wpm-side { width: auto; } }
@media (orientation: landscape) {
body.touch #travel.wpm { height: calc(100vh - 1.2rem - var(--sat) - var(--sab)); }
body.touch #travel.wpm .wpm-body { flex-direction: row; overflow: hidden; }
body.touch #travel.wpm .wpm-map { flex: none; height: 100%; aspect-ratio: 16 / 10; max-width: calc(100% - 17rem); }
body.touch #travel.wpm .wpm-map .wpm-stage { width: 100%; height: 100%; aspect-ratio: auto; }
body.touch #travel.wpm .wpm-side { flex: 1; width: auto; min-width: 0; overflow-y: auto; }
body.touch #travel.wpm .wpm-info { flex-direction: column; text-align: center; }
}
.itip .it-boon-h { margin-top: .45rem; border-top: 1px solid rgba(255, 140, 60, .35); }
.itip .it-boon1 b { color: #ffcf8a; }
.itip .it-boon { margin-top: .2rem; }
.itip .it-boon > b { display: block; text-align: center; font: 700 max(10px, 1.1rem)/1.3 var(--sans); color: #ffcf8a; }
.itip .it-boon-d { margin-top: .25rem; text-align: center; font-size: max(9px, 1rem); color: var(--ink2); }
body:not(.touch) .win > header, body:not(.touch) .ob-panel > header.ob-head { cursor: move; }
body:not(.touch) .win > header button, body:not(.touch) .ob-panel > header.ob-head button { cursor: pointer; }
body.win-dragging, body.win-dragging * { user-select: none !important; cursor: move !important; }
body:not(.touch) > .win:not(#ascwin):not(#treewin):not(#cairns):not(.wpm)::after, body:not(.touch) #inv > .ob-panel::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; pointer-events: none; opacity: .5;
background: linear-gradient(135deg, transparent 0 46%, #d8b871 46% 54%, transparent 54% 68%, #d8b871 68% 76%, transparent 76% 88%, #d8b871 88% 96%, transparent 96%); }
body > .win[data-grip="1"]::after, #inv > .ob-panel[data-grip="1"]::after { opacity: 1; }
body.win-grip-hot, body.win-grip-hot *, body.win-sizing, body.win-sizing * { cursor: nwse-resize !important; }
body.win-sizing, body.win-sizing * { user-select: none !important; }
.win button.st-spcall, .win button.st-arrange { flex: none; min-height: 3.4rem; white-space: nowrap; }
.win button.st-spcall { color: #f2d27a !important; }
.win button.st-tab.named span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.stash-box.st-editing .st-wrap, .stash-box.st-editing .st-cur, .stash-box.st-editing .st-jw, .stash-box.st-editing .st-uq, .stash-box.st-editing .st-act,
.stash-box.st-editing .st-q, .stash-box.st-editing .st-found, .stash-box.st-editing .st-sort, .stash-box.st-editing .st-all, .stash-box.st-editing .st-spcall { display: none !important; }
.st-edit[hidden] { display: none; }
.st-edit { flex: 1 1 auto; min-height: 12rem; max-height: 52rem; display: flex; flex-direction: column; gap: .6rem; min-width: 36rem; }
.st-edh { margin: 0; font-size: max(10px, 1.2rem); color: var(--ink3); line-height: 1.4; }
.st-edl { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.st-edl li { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(216, 184, 113, .14); }
.st-edn { flex: none; width: 2.2rem; text-align: right; color: var(--ink3); font: 600 max(10px, 1.2rem) var(--sans); font-variant-numeric: tabular-nums; }
.win .st-edl button { flex: none; min-width: 3rem; min-height: 3rem; padding: 0; font-size: max(11px, 1.2rem); }
.st-edd { flex: 0 0 13rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); font: 600 max(11px, 1.25rem) var(--sans); }
.st-edd.spc { color: #f2d27a; }
.st-edl input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 3rem; padding: 0 .8rem; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 184, 113, .25); font: 500 16px var(--sans); user-select: text; -webkit-user-select: text; }
.st-edl input::placeholder { color: var(--ink3); }
.st-edb { flex: none; display: flex; justify-content: flex-end; gap: .6rem; }
.win .st-edb button { min-height: 3.4rem; padding: 0 1.4rem; }
.st-spcall .st-sm { display: none; }
body.touch .st-spcall .st-lg { display: none; }
body.touch .st-spcall .st-sm { display: inline; }
body.touch .st-q { flex: 1 1 0; min-width: 5rem; }
body.touch .win button.st-spcall, body.touch .win button.st-arrange { min-height: 2.8rem; padding: 0 .45rem; font-size: 11px; }
body.touch .st-tools .st-all { padding: 0 .45rem !important; }
body.touch .st-edit { min-width: 0; max-height: none; }
body.touch .st-edd { flex-basis: 8.5rem; font-size: 11px; }
body.touch .win .st-edl button { min-width: 2.6rem; min-height: 2.6rem; }
body.touch .st-edl input { height: 2.6rem; }
#wb-rank { position: absolute; z-index: 6; left: calc(1.2rem + var(--sal, 0px)); top: 34%; width: 32rem; max-width: calc(100vw - 2rem); padding: .4rem .8rem .5rem; background: rgba(14, 8, 4, .78);
border: 1px solid rgba(216, 150, 80, .35); border-radius: .4rem; box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .5); pointer-events: none; box-sizing: border-box; }
#wb-rank.hidden { display: none; }
#wb-rank .bb-rh { display: flex; align-items: baseline; gap: .6rem; width: 100%; color: #ffcf8a; cursor: grab; pointer-events: auto; user-select: none; -webkit-user-select: none; touch-action: none; }
#wb-rank .bb-rh:active { cursor: grabbing; }
#wb-rank .bb-rh b { font: 700 max(11px, 1.3rem)/1.3 var(--sans); white-space: nowrap; }
#wb-rank .bb-rh small { flex: 1; min-width: 0; font: 500 max(9px, 1.05rem)/1.3 var(--sans); color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wb-rank .bb-rh u { text-decoration: none; color: var(--ink3); }
#wb-rank.fold .bb-rh u { display: inline-block; transform: rotate(-90deg); }
#wb-rank ol { margin: .3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .1rem; }
#wb-rank.fold ol, #wb-rank.fold .bb-me { display: none; }
#wb-rank li { display: flex; align-items: baseline; gap: .5rem; min-width: 0; font: 600 max(10px, 1.2rem)/1.35 var(--sans); color: var(--ink2); text-shadow: 0 1px 1px #000; }
#wb-rank li i { flex: none; width: 1.8rem; font-style: normal; text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; }
#wb-rank li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wb-rank li b { flex: none; font: inherit; color: #ffe0b0; font-variant-numeric: tabular-nums; }
#wb-rank li.t1 i, #wb-rank li.t1 b { color: #ffd34d; }
#wb-rank li.t2 i { color: #d8dde6; }
#wb-rank li.t3 i { color: #e0a070; }
#wb-rank li.me, #wb-rank li.me span { color: #9ff0b0; }
#wb-rank .bb-me { margin: .25rem 0 0; font: 600 max(10px, 1.15rem)/1.3 var(--sans); color: #9ff0b0; text-align: center; }
#wb-rank .bb-me.hidden { display: none; }
body.touch #wb-rank { top: calc(17% + var(--sat, 0px)); width: 19rem; padding: .25rem .5rem .3rem; background: rgba(14, 8, 4, .62); }
body.touch #wb-rank .bb-rh small { display: none; }
body.touch #wb-rank li { font-size: 10px; line-height: 1.15; }
.trd-gold .trd-fee { flex-basis: 100%; font: 500 max(10px, 1.1rem)/1.3 var(--sans); color: #f2d27a; }
.trd-gold { flex-wrap: wrap; }
#gbuff { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94rem; height: 62rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; display: flex; flex-direction: column; }
#gbuff > header b span + span { color: var(--ink); }
.gb-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 1.4rem; }
.gb-col, .gb-side { min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.gb-wrap h5 { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.gb-wrap h5 small { font: 500 max(10px, 1.1rem) var(--sans); letter-spacing: 0; color: var(--ink3); }
.gb-cards { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.gb-card { --gc: var(--brass-hi); flex: none; display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1.2rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.gb-card.live { border-image-source: url(../assets/ui/dark/row_on.png); box-shadow: inset 0 0 2.4rem color-mix(in srgb, var(--gc) 16%, transparent); }
.gb-exp { --gc: #9be37a; } .gb-rar { --gc: #ffc65a; } .gb-pow { --gc: #ff7a5c; } .gb-grd { --gc: #7cc4ff; }
.gb-head { display: flex; align-items: center; gap: 1rem; }
.gb-mk { flex: none; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; font: 700 1.8rem/1 var(--sans); font-style: normal; color: var(--gc); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); background: rgba(0,0,0,.35); text-shadow: 0 0 .8rem var(--gc); }
.gb-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.gb-nm b { font: 600 max(12px, 1.45rem)/1.25 var(--serif); color: var(--ink); }
.gb-card.live .gb-nm b { color: var(--gc); }
.gb-nm small { font-size: max(10px, 1.1rem); color: var(--ink3); font-variant-numeric: tabular-nums; }
.gb-head em { flex: none; font-style: normal; font-size: max(10px, 1.15rem); color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb-card.live .gb-head em { color: var(--gc); font-weight: 700; }
.gb-act { display: flex; align-items: center; gap: .6rem; padding-left: 4.4rem; }
.gb-u { flex: none; font-size: max(10px, 1.1rem); color: var(--ink3); }
.gb-times { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .2rem; }
.win .gb-times button.gb-t { min-height: 3rem; min-width: 0; padding: 0 !important; border-width: .55rem !important; font-size: max(11px, 1.2rem); font-variant-numeric: tabular-nums; }
.win .gb-times button.gb-t.on { border-image-source: url(../assets/ui/dark/btn_primary.png); color: #1a1206; }
.gb-cost { flex: none; min-width: 7rem; text-align: right; font-size: max(10px, 1.1rem); color: var(--ink3); white-space: nowrap; }
.gb-cost b { font-size: max(12px, 1.35rem); color: var(--r2); font-variant-numeric: tabular-nums; } .gb-cost b.no { color: #ff6a55; }
.gb-act button[data-act=on] { flex: none; min-width: 8.6rem; padding: 0 .8rem !important; }
.gb-tip { flex: none; font-size: max(10px, 1.1rem) !important; line-height: 1.5; }
.gb-side { padding: 1.1rem 1.3rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; overflow-y: auto; overscroll-behavior: contain; gap: .55rem; }
.gb-fund { flex: none; display: flex; align-items: baseline; gap: .8rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(140,111,63,.3); color: var(--ink2); }
.gb-fund b { margin-left: auto; font: 700 max(18px, 2.6rem)/1 var(--serif); color: var(--brass-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 1.2rem rgba(216,184,113,.3); }
.gb-fund small { color: var(--ink3); }
.gb-msg { flex: none; padding: .5rem .9rem; color: var(--ink); font-size: max(10px, 1.1rem); line-height: 1.4; border-left: .3rem solid var(--brass); background: rgba(0,0,0,.28); }
.gb-msg.hidden { display: none; }
.gb-give { flex: none; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .2rem; }
.gb-noorb { font-size: max(9px, 1.05rem) !important; line-height: 1.4; padding: .2rem 0 .2rem 3.7rem; }
.gb-orb { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 10.5rem; align-items: center; gap: .7rem; min-height: 3.5rem; }
.gb-orb.none { opacity: .5; }
.gb-oi { width: 3rem; height: 3rem; display: grid; place-items: center; }
.gb-oi > * { max-width: 100%; max-height: 100%; } .gb-oi .coin svg { width: 2.2rem; height: 2.2rem; }
.gb-on { min-width: 0; display: flex; flex-direction: column; }
.gb-on b { font-weight: 600; font-size: max(11px, 1.2rem); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-on small { font-size: max(9px, 1.05rem); color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-on u { text-decoration: underline dotted; text-underline-offset: .2em; color: var(--ink2); cursor: pointer; }
.gb-on u:hover { color: var(--brass-hi); }
.gb-orb input { box-sizing: border-box; width: 100%; height: 3.3rem; min-height: 28px; padding: 0 .8rem; color: var(--ink); background: none; border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; font: 500 16px var(--sans); text-align: right; font-variant-numeric: tabular-nums; outline: none; user-select: text; -webkit-user-select: text; -moz-appearance: textfield; }
.gb-orb input::-webkit-outer-spin-button, .gb-orb input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gb-orb input:disabled { opacity: .45; }
.gb-sumrow { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .5rem; border-top: 1px solid rgba(140,111,63,.3); }
.gb-sum { min-width: 0; color: var(--ink2); } .gb-sum b { font: 700 max(13px, 1.6rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.gb-sum em { display: block; font-style: normal; font-size: max(10px, 1.05rem); color: #ff6a55; }
.gb-sumrow button { flex: none; min-width: 12rem; min-height: 4rem; }
.gb-today { flex: none; font-size: max(10px, 1.15rem); color: var(--ink2); } .gb-today b { color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.gb-note { flex: none; font-size: max(9px, 1.05rem) !important; line-height: 1.45; }
.gb-donors { flex: none; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; font-size: max(10px, 1.15rem); }
.gb-donors li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .6rem; padding: .2rem .4rem; color: var(--ink2); }
.gb-donors li:nth-child(odd) { background: rgba(0,0,0,.2); }
.gb-donors li i { font-style: normal; color: var(--ink3); text-align: right; }
.gb-donors li b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-donors li span { color: var(--r2); font-variant-numeric: tabular-nums; }
.gb-donors li.muted { display: block; text-align: center; }
.win button.g-buff { flex: none; display: flex; flex-direction: column; align-items: center; gap: .2rem; min-height: 5rem; white-space: normal; }
.win button.g-buff small { font: 500 max(9px, 1.05rem)/1.2 var(--sans); }
#hud #h-gbuff { height: 2.8rem; padding: 0 .6rem; display: flex; align-items: center; gap: .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem;
font: 600 max(10px, 1.15rem)/1 var(--sans); color: var(--ink2); white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: 0 0 1.2rem rgba(140, 200, 255, .18); }
#hud #h-gbuff.hidden { display: none; }
#h-gbuff i { display: flex; gap: .2rem; font-style: normal; }
#h-gbuff i em { font-style: normal; font-weight: 800; color: var(--gc); text-shadow: 0 0 .6rem var(--gc); }
#h-gbuff b { font: 700 max(10px, 1.2rem)/1 var(--sans); color: var(--brass-hi); }
#h-gbuff span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
body.touch #hud #h-gbuff { align-self: flex-end; width: max-content; height: 2.4rem; padding: 0 .3rem; gap: .4rem; font-size: max(9px, 1.05rem); border-width: .6rem; }
body.touch #gbuff { left: calc(.8rem + var(--sal)); right: calc(.8rem + var(--sar)); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; transform: none; }
body.touch .gb-wrap { grid-template-columns: minmax(0, 1fr) 30rem; gap: 1rem; }
body.touch .gb-side { padding: .8rem 1rem; gap: .45rem; }
body.touch .gb-cards { padding: .5rem; gap: .4rem; }
body.touch .gb-card { padding: .6rem .9rem; gap: .5rem; }
body.touch .gb-act { padding-left: 0; }
body.touch .gb-orb { grid-template-columns: 2.8rem minmax(0, 1fr) 9rem; min-height: 3.2rem; }
#scr-login label.login-lang { flex-direction: row; width: auto; font-size: 13px; line-height: 1; }
#scr-login .login-lang { position: absolute; top: var(--login-safe-top); right: var(--login-safe-right); z-index: 3; display: flex; align-items: center; gap: 6px;
margin: 0; padding: 3px 6px 3px 10px; border: 1px solid rgba(227, 184, 115, .45); border-radius: 999px; background: rgba(14, 10, 8, .66); color: #ecd2a6; cursor: pointer; }
#scr-login .login-lang svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
#scr-login .login-lang select { width: auto; appearance: auto; height: auto; min-height: 30px; margin: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
color: #ecd2a6; font: 600 13px/1.4 "Noto Sans Thai", system-ui, sans-serif; cursor: pointer; }
#scr-login .login-lang select:focus-visible { outline: 1px solid var(--login-gold); }
#scr-login .login-lang select option { color: #1a1410; background: #f4ead6; }
#scr-login .login-lang:hover { border-color: var(--login-gold); color: var(--login-gold); }
#settings .set-social .soc-wiki { background: linear-gradient(180deg, #b8862c, #7d5618); }
#filterwin a.fw-labl { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
#filterwin a.fw-labl:hover { border-image-source: url(../assets/ui/dark/btn_hover.png); }
#filterwin .fw-intro a.fw-labl2 { color: var(--brass-hi); font-weight: 700; }
#ui-size { position: fixed; left: 50%; top: calc(1.2rem + var(--sat, 0px)); z-index: 60; transform: translate(-50%, -.6rem); display: flex; flex-direction: column; align-items: center; gap: .2rem;
padding: .8rem 1.8rem; border: 1px solid rgba(216, 184, 113, .6); border-radius: .4rem; background: rgba(12, 10, 7, .92); box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .6);
color: var(--ink); pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; font-family: var(--sans); white-space: nowrap; }
#ui-size.on { opacity: 1; transform: translate(-50%, 0); }
#ui-size b { font: 700 max(15px, 2rem)/1.2 var(--serif); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
#ui-size small { font-size: max(11px, 1.2rem); color: var(--ink2); }
body:not(.touch) .inv-grid.st-grid { width: max-content; margin-inline: auto; }
body.touch #chatbox:not(.typing) { border-image: none; border-color: transparent; background: none; box-shadow: none; }
body.touch #hud #chatbox:not(.typing) #chat-tabs > :not(#b-chat), body.touch #chatbox:not(.typing) #chat-size { display: none; }
body.touch #chatbox:not(.typing) #chat-tabs { position: absolute; left: -.4rem; top: -2.6rem; pointer-events: auto; }
body.touch #hud #chatbox:not(.typing) #b-chat { width: 2.4rem; height: 2.4rem; opacity: .55; }
body.touch #chatbox:not(.typing) #chat-log { text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 6px rgba(0, 0, 0, .9); }
body.touch #chatbox.folded:not(.typing) { width: auto !important; }
#bosswin .bw-tabs { flex: none; display: flex; gap: .4rem; padding: 0 .2rem .4rem; }
#bosswin .set.hidden { display: none; }
.bw-wk { display: flex; flex-direction: column; gap: .6rem; padding: .2rem; }
.bw-wk .bw-me { margin: 0; padding: .5rem .8rem; font-size: max(11px, 1.3rem); color: var(--ink2); background: rgba(232, 200, 112, .08); border: 1px solid rgba(232, 200, 112, .3); border-radius: .3rem; }
.bw-wk .bw-me b { color: var(--brass-hi); }
.bw-wk u { text-decoration: none; color: var(--ink3); }
.bw-boards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bw-boards > div { min-width: 0; padding: .6rem .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.bw-boards h5 { margin: .2rem 0 .4rem; font: 600 max(12px, 1.45rem) var(--serif); color: var(--brass-hi); }
.bw-boards ol, .bw-prizes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.bw-boards li { display: flex; align-items: baseline; gap: .7rem; padding: .3rem .6rem; font-size: max(11px, 1.3rem); background: rgba(255, 255, 255, .03); }
.bw-boards li u { flex: none; width: 2.2rem; font: 700 max(11px, 1.3rem) var(--serif); color: var(--brass); text-align: right; }
.bw-boards li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bw-boards li small { flex: none; color: var(--ink3); font-size: max(9px, 1.05rem); }
.bw-boards li em { flex: none; font-style: normal; font-weight: 700; color: #ffcf7a; }
.bw-boards li.first b { color: var(--r3); }
.bw-boards li.me { background: rgba(72, 194, 176, .14); box-shadow: inset 0 0 0 1px rgba(72, 194, 176, .5); }
.bw-boards li.none { color: var(--ink3); }
.bw-prizes li { display: flex; align-items: baseline; gap: .7rem; font-size: max(10px, 1.2rem); color: var(--ink2); }
.bw-prizes li u { flex: none; width: 3.4rem; font-weight: 700; color: var(--brass); }
.bw-u { color: var(--r3); }
body.touch .bw-boards { grid-template-columns: 1fr; }
.bw-prizes .bw-pz { flex: 1; min-width: 0; }