.ob-btn:hover:not(:disabled) { border-image-source: url(../assets/ui/dark/btn_hover.png); }
.ob-btn.on { border-image-source: url(../assets/ui/dark/btn_down.png); color: var(--brass-hi); }
.d-act button.armed, .win button.armed { border-image-source: url(../assets/ui/dark/btn_primary_hover.png) !important; color: #8a0f08 !important; }
.cell > i, .wslot i { pointer-events: none; }
.cell img.item-art, .wslot img.item-art { transform: translateX(var(--dx, 0)) scale(var(--sc, 1)); }
img.item-art.k-mace { clip-path: inset(0 0 0 20%); --dx: -12%; --sc: 1.16; --fit: .68; }
img.item-art.k-coin { clip-path: inset(0 0 0 14%); --dx: -10%; --sc: 1.18; }
img.item-art.k-belt { object-fit: cover; }
img.item-art.k-quiver { --fit: .7; }
.cell img.item-art.art, .wslot img.item-art.art, #shop .shop-row .cell img.item-art.art { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; object-position: center; transform: none; clip-path: none; }
.row .cell img.item-art.art.long, .mk-ask .cell img.item-art.art.long, #shop .shop-row .cell img.item-art.art.long { inset: -13%; width: 126%; height: 126%; transform: rotate(45deg); }
.cell.tall img.item-art.diag, .wslot.s0 img.item-art.diag, .wslot.s1 img.item-art.diag { inset: auto; left: 50%; top: 50%; width: calc(var(--ch) * var(--fit, .78)); height: calc(var(--ch) * var(--fit, .78));
transform: translate(-50%, -50%) rotate(-45deg) translateX(var(--dx, 0)) scale(var(--sc, 1)); }
.cell i.lv, .wslot i.lv { top: .2rem; }
.cell i.lv.q, .wslot i.lv.q { color: var(--teal); }
.cell i.unid, .wslot i.unid { position: absolute; right: .4rem; top: .1rem; z-index: 1; font: 700 max(10px, 1.3rem)/1.2 var(--sans); font-style: normal; color: #ff6a5a; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cell.unid img.item-art, .wslot.unid img.item-art { filter: grayscale(.6) brightness(.78) drop-shadow(0 .2rem .2rem rgba(0,0,0,.7)); }
.cell.cant::before, .wslot.off::before { content: ''; position: absolute; inset: .3rem; background: rgba(170, 28, 18, .34); pointer-events: none; }
.wslot.off img.item-art { filter: grayscale(.9) brightness(.55); }
.wslot.blocked { opacity: .4; cursor: default; }
.wslot.off::after { border-image: none; inset: auto .3rem .1rem auto; content: '!'; font: 700 max(11px, 1.5rem)/1.2 var(--sans); color: #ff6a5a; text-shadow: 0 1px 2px #000; }
.bagwin .ob-panel { display: none; }
.bagwin.show-bag .ob-bag, .bagwin.show-char .ob-char { display: flex; }
body.shopping .bagwin .ob-char, body.appraising .bagwin .ob-char { display: none; }
.ob-bag { right: 2rem; top: 1.4rem; width: 63rem; height: auto; max-height: calc(100vh - 2.8rem); }
.ob-bag .ob-body { gap: .9rem; }
.inv-eq { --u: 1rem; position: relative; flex: none; align-self: center; width: calc(47 * var(--u)); height: calc(39.6 * var(--u)); }
.inv-niche { position: absolute; left: calc(16.5 * var(--u)); top: calc(7.3 * var(--u)); width: calc(14 * var(--u)); height: calc(14.7 * var(--u)); background: url(../assets/ui/dark/doll_niche.png) center / 100% 100% no-repeat; }
.inv-hero { position: absolute; left: calc(17.7 * var(--u)); top: calc(8.3 * var(--u)); width: calc(11.6 * var(--u)); height: calc(13.2 * var(--u)); pointer-events: none; }
.inv-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .4rem .6rem rgba(0,0,0,.8)); image-rendering: pixelated; }
.inv-eq .wslot { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); --ch: calc(var(--h) * var(--u)); }
.inv-eq .wslot.s0 { --x: 0; --y: 3.8; --w: 9.2; --h: 13.7; }
.inv-eq .wslot.s1 { --x: 37.8; --y: 3.8; --w: 9.2; --h: 13.7; }
.inv-eq .wslot.s2 { --x: 20.1; --y: 0; --w: 6.8; --h: 6.8; }
.inv-eq .wslot.s3 { --x: 20.1; --y: 22.5; --w: 6.8; --h: 6.8; }
.inv-eq .wslot.s4 { --x: .8; --y: 18.5; --w: 7.6; --h: 7.6; }
.inv-eq .wslot.s5 { --x: 38.6; --y: 18.5; --w: 7.6; --h: 7.6; }
.inv-eq .wslot.s6 { --x: 19.3; --y: 29.9; --w: 8.4; --h: 4.5; }
.inv-eq .wslot.s7 { --x: 28.1; --y: .9; --w: 5; --h: 5; }
.inv-eq .wslot.s8 { --x: 10.6; --y: 12.2; --w: 5; --h: 5; }
.inv-eq .wslot.s9 { --x: 31.4; --y: 12.2; --w: 5; --h: 5; }
.inv-eq .wslot.s10 { --x: 2.2; --y: 27.1; --w: 4.8; --h: 7.2; }
.inv-eq .wslot.s11 { --x: 40; --y: 27.1; --w: 4.8; --h: 7.2; }
.inv-eq .wslot.s12 { --x: 16.5; --y: 35.2; --w: 4.4; --h: 4.4; }
.inv-eq .wslot.s13 { --x: 21.3; --y: 35.2; --w: 4.4; --h: 4.4; }
.inv-eq .wslot.s14 { --x: 26.1; --y: 35.2; --w: 4.4; --h: 4.4; }
.inv-eq .wslot.s17 { --x: 30.9; --y: 35.2; --w: 4.4; --h: 4.4; }
.inv-eq.c4 .wslot.s12 { --x: 14.1; } .inv-eq.c4 .wslot.s13 { --x: 18.9; } .inv-eq.c4 .wslot.s14 { --x: 23.7; } .inv-eq.c4 .wslot.s17 { --x: 28.5; }
.inv-eq .wslot svg.ph { position: absolute; inset: 18%; width: 64%; height: 64%; opacity: .9; }
.inv-eq .wslot.s0 .ph, .inv-eq .wslot.s1 .ph { inset: 28% 12%; width: 76%; height: 44%; }
.inv-eq .wslot.filled .ph { display: none; }
.wslot.s6 img.item-art { inset: 6% 4%; width: 92%; height: 88%; }
.inv-eq .wslot.s0 img.item-art.diag:not(.k-mace):not(.k-quiver), .inv-eq .wslot.s1 img.item-art.diag:not(.k-mace):not(.k-quiver) { --fit: .7; }
.inv-wset, .ws-swap { position: absolute; top: 0; height: calc(3.3 * var(--u)); box-sizing: border-box; }
.inv-wset { left: 0; width: calc(9.2 * var(--u)); display: flex; gap: .2rem; }
.ob-panel .ws-tab { position: relative; flex: 1; min-width: 0; display: grid; place-items: center; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem;
font: 700 max(11px, 1.5rem)/1 var(--serif); letter-spacing: .06em; color: var(--ink3); }
.ob-panel .ws-tab b { font: inherit; }
.ob-panel .ws-tab.on { border-image-source: url(../assets/ui/dark/tab_on.png); color: var(--brass-hi); text-shadow: 0 0 .8rem rgba(216, 184, 113, .55); }
.ob-panel .ws-tab.on::after { content: ''; position: absolute; left: -.3rem; right: -.3rem; bottom: -.45rem; height: .2rem; background: var(--brass-hi); box-shadow: 0 0 .6rem var(--brass-hi); }
body.pc .ob-panel .ws-tab:not(.on):hover { color: var(--ink); }
.ws-tab i { display: none; position: absolute; right: -.35rem; top: -.35rem; width: .8rem; height: .8rem; min-width: 5px; min-height: 5px; border-radius: 50%; }
.ws-tab.hand i { display: block; background: #7fe08a; box-shadow: 0 0 0 1px #0d2a12, 0 0 .6rem #7fe08a; }
.ob-panel .ws-swap { left: calc(37.8 * var(--u)); width: calc(9.2 * var(--u)); display: flex; align-items: center; justify-content: center; gap: .5rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / .8rem;
font: 600 max(10px, 1.15rem)/1 var(--sans); color: var(--ink2); white-space: nowrap; }
body.pc .ob-panel .ws-swap:hover { border-image-source: url(../assets/ui/dark/btn_hover.png); color: var(--ink); }
.ob-panel .ws-swap:active { border-image-source: url(../assets/ui/dark/btn_down.png); }
.ws-swap svg { flex: none; width: 1.7rem; height: 1.7rem; fill: currentColor; }
.ws-swap kbd { flex: none; min-width: 1.7rem; padding: .15rem .3rem; box-sizing: border-box; text-align: center; font: 700 max(9px, 1.05rem)/1.2 var(--sans); color: var(--brass-hi); background: #0b0a08; box-shadow: 0 0 0 1px var(--brass-lo); }
body.touch .ws-swap kbd { display: none; }
.inv-eq.wait .wslot.s0, .inv-eq.wait .wslot.s1 { outline: .2rem solid rgba(95, 140, 200, .5); outline-offset: -.2rem; }
.inv-eq.wait .wslot.s0:not(.filled) .ph, .inv-eq.wait .wslot.s1:not(.filled) .ph { opacity: .55; }
.wslot i.wno { position: absolute; right: .7rem; top: .45rem; z-index: 1; font: 700 max(9px, 1.1rem)/1 var(--serif); font-style: normal; letter-spacing: .04em; color: var(--brass); text-shadow: 0 1px 2px #000, 0 0 3px #000; opacity: .9; }
.inv-eq.wait .wslot i.wno { color: #8fc4ee; }
.inv-eq .wslot.charm .ph.lock { display: none; }
.inv-eq .wslot.charm.locked { cursor: help; }
.inv-eq .wslot.charm.locked:not(.filled) { filter: brightness(.7); }
.inv-eq .wslot.charm.locked .ph:not(.lock) { display: none; }
.inv-eq .wslot.charm.locked .ph.lock { display: block; }
.inv-eq .wslot.charm.locked.filled .ph.lock { inset: auto 2% 2% auto; width: 50%; height: 50%; z-index: 3; opacity: 1; filter: brightness(2.6) drop-shadow(0 0 .2rem #000); }
.cell i.chg, .wslot i.chg { position: absolute; left: 16%; right: 16%; bottom: .5rem; z-index: 1; height: .35rem; min-height: 2px; background: #060504; box-shadow: 0 0 0 1px #000; }
i.chg u { display: block; height: 100%; background: linear-gradient(#bff0ff, #3fa6d8); }
.cell i.chg + i.cnt, .wslot i.chg + i.cnt { bottom: .75rem; }
.cell i.socks, .wslot i.socks { position: absolute; left: .6rem; bottom: .55rem; z-index: 1; display: flex; gap: .25rem; }
.wslot i.socks { left: .9rem; bottom: .85rem; }
i.socks u { width: .85rem; height: .85rem; min-width: 5px; min-height: 5px; box-sizing: border-box; border-radius: 50%; text-decoration: none; background: #070605; border: 1px solid #a48a56; box-shadow: 0 0 0 1px #000; }
i.socks u.f { background: radial-gradient(circle at 35% 30%, #fff 0, var(--k) 45%, var(--k) 100%); border-color: #000; box-shadow: 0 0 .5rem var(--k); }
.inv-bar { position: relative; flex: none; display: flex; align-items: center; min-height: 3.8rem; }
.inv-bar .cb-h { align-items: baseline; }
.inv-bar .bag-count b { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.inv-sort { flex: none; margin-left: auto; display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; border-width: .8rem; font-size: max(11px, 1.3rem); }
.inv-sort svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.inv-sort:disabled { opacity: .55; }
.inv-apply { position: absolute; inset: 0; display: flex; align-items: center; gap: .8rem; padding: 0 .4rem 0 .6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row_on.png) 16 fill / .8rem; }
.inv-apply.hidden { display: none; }
.inv-apply .ap-ic { position: relative; flex: none; width: 3rem; height: 3rem; }
.inv-apply .ap-ic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-apply .ap-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.inv-apply .ap-t b { font: 600 max(12px, 1.4rem)/1.25 var(--sans); color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-apply .ap-t small { font-size: max(10px, 1.1rem); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-apply .ap-t small.warn { color: #ff8a7a; font-weight: 600; white-space: normal; line-height: 1.25; }
.inv-apply .ob-btn { flex: none; min-height: 3rem; padding: 0 1rem; border-width: .8rem; }
.inv-apply .ap-aug { flex: none; display: flex; align-items: center; gap: .3rem; }
.inv-apply .ap-aug:empty { display: none; }
.inv-apply .ap-au { position: relative; width: 2.8rem; height: 2.8rem; border-radius: 50%; box-shadow: 0 0 .7rem rgba(255, 207, 122, .75), inset 0 0 0 1px rgba(255, 207, 122, .55); animation: ap-au 1.6s ease-in-out infinite; }
.inv-apply .ap-au img, .inv-apply .ap-au svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-apply .ap-t small.aug { color: #ffcf7a; font-weight: 600; }
.inv-apply .ap-t small.aug u { text-decoration: none; opacity: .7; }
@keyframes ap-au { 50% { box-shadow: 0 0 1.2rem rgba(255, 207, 122, 1), inset 0 0 0 1px rgba(255, 207, 122, .9); } }
body.pc .inv-apply [data-apply="keep"] { display: none; }
#cur-float { position: fixed; left: 0; top: 0; z-index: 61; width: 3.6rem; height: 3.6rem; pointer-events: none; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.8)); }
#cur-float img { width: 100%; height: 100%; }
.inv-gridwrap { position: relative; flex: none; display: flex; justify-content: center; }
.inv-grid { --bc: 4.6rem; --gap: .3rem; position: relative; flex: none; display: grid; grid-template-columns: repeat(var(--cols), var(--bc)); grid-template-rows: repeat(var(--rows), var(--bc)); gap: var(--gap); isolation: isolate; }
.inv-grid .cell { z-index: 1; min-width: 0; min-height: 0; --ch: calc(var(--h, 1) * var(--bc) + (var(--h, 1) - 1) * var(--gap)); }
.inv-grid .cell.empty { z-index: 0; }
.inv-grid .cell.tall { overflow: hidden; }
.inv-grid .cell.dragging { opacity: .3; }
.inv-drop { z-index: 2; pointer-events: none; border: .2rem solid #7fe08a; background: rgba(96, 200, 116, .2); }
.inv-drop.no { border-color: #ff6a5a; background: rgba(220, 60, 44, .22); }
.wslot.drop-ok { box-shadow: inset 0 0 0 .3rem #7fe08a, 0 0 1.2rem rgba(127, 224, 138, .5); }
.wslot.drop-no { box-shadow: inset 0 0 0 .3rem #ff6a5a; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: .92; filter: drop-shadow(0 .6rem 1rem rgba(0,0,0,.7)); }
.bagwin.is-drag, .bagwin.is-drag .cell, .bagwin.is-drag .wslot { cursor: grabbing; }
.bagwin.applying .cell.unfit, .bagwin.applying .wslot.unfit { filter: brightness(.42) saturate(.5); }
.bagwin.applying .cell.fit::after, .bagwin.applying .wslot.fit::after { border-image: url(../assets/ui/dark/cell_hover.png) 16 / .8rem; }
.bagwin.applying .cell.inhand::after { border-image: url(../assets/ui/dark/cell_sel.png) 16 / .8rem; }
.bagwin.applying .cell.fit, .bagwin.applying .wslot.fit { cursor: copy; }
.cell.flash, .wslot.flash { animation: inv-flash .7s ease-out; }
.cell.deny, .wslot.deny { animation: inv-deny .45s ease-out; }
@keyframes inv-flash { 0% { filter: brightness(3) saturate(.4); box-shadow: 0 0 1.6rem .4rem rgba(255, 236, 170, .9); } 100% { filter: none; box-shadow: 0 0 1.6rem 0 rgba(255, 236, 170, 0); } }
@keyframes inv-deny { 0%, 100% { transform: none; } 20% { transform: translateX(-.4rem); } 45% { transform: translateX(.4rem); } 70% { transform: translateX(-.2rem); } }
.inv-pick { position: absolute; z-index: 6; left: 50%; top: 0; transform: translateX(-50%); box-sizing: border-box; width: min(100%, 46rem); min-height: 100%; display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.2rem 1.1rem;
background: #110e0b url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 / .8rem; box-shadow: 0 0 0 1px #000, 0 0 0 100vmax rgba(0, 0, 0, .45), 0 0 1.6rem rgba(0,0,0,.8); }
.inv-pick.hidden { display: none; }
.bagwin.picking .inv-gridwrap { z-index: 6; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pk-head > b { font: 600 max(13px, 1.6rem)/1.2 var(--serif); letter-spacing: .04em; color: var(--brass-hi); }
.pk-new { min-width: 0; display: flex; align-items: center; gap: .6rem; text-align: left; }
.inv-pick .cell { flex: none; width: 3.6rem; height: 3.6rem; cursor: default; pointer-events: none; }
.pk-m { min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.pk-m > b { font: 600 max(12px, 1.35rem)/1.3 var(--sans); color: #e2b58a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-m > b u { text-decoration: none; color: var(--ink); }
.pk-m > small { font: 400 max(10px, 1.15rem)/1.35 var(--sans); color: var(--r1); }
.pk-m > small b { font-weight: 700; }
.pk-ask { font-size: max(11px, 1.25rem); line-height: 1.4; color: var(--ink2); }
.pk-list { display: flex; flex-direction: column; gap: .4rem; }
.ob-panel .pk-row { display: flex; align-items: center; gap: .8rem; min-height: 4.4rem; padding: .3rem .8rem .3rem .4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; text-align: left; }
.ob-panel .pk-row.sel { border-image-source: url(../assets/ui/dark/row_on.png); box-shadow: inset .3rem 0 0 var(--k, var(--brass-hi)); }
body.pc .ob-panel .pk-row:not(.sel):hover { filter: brightness(1.25); }
.pk-warn { font-size: max(10px, 1.15rem); line-height: 1.35; color: #ff8a7a; }
.pk-act { display: flex; justify-content: flex-end; gap: .6rem; margin-top: auto; }
.pk-act .ob-btn:not(.ghost):not(:disabled) { border-image-source: url(../assets/ui/dark/btn_primary.png); color: #1a1206; }
.pk-act .ob-btn:disabled { border-image-source: url(../assets/ui/dark/btn_disabled.png); color: var(--ink3); cursor: default; }
.inv-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.8rem; }
.inv-gold { position: relative; flex: none; display: inline-flex; align-items: center; gap: .6rem; }
.inv-gold img.item-art { width: 2.6rem; height: 2.6rem; }
.inv-gold b { font: 700 max(13px, 1.7rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.inv-gold small { font-size: max(10px, 1.2rem); color: var(--ink3); }
.inv-card { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.inv-pages { flex: none; display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.ob-panel .inv-pages button { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; box-sizing: border-box; min-width: 4rem; height: 3.6rem; padding: 0 .2rem;
border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; background: none; font: 700 max(12px, 1.6rem)/1 var(--serif); color: var(--ink3); cursor: pointer; }
.ob-panel .inv-pages .pg-arr { min-width: 3.4rem; font-size: max(10px, 1.15rem); color: var(--ink2); }
.ob-panel .inv-pages .pg-arr:disabled { opacity: .35; cursor: default; }
.ob-panel .inv-pages b { font: inherit; }
.ob-panel .inv-pages .pg-tab.on { border-image-source: url(../assets/ui/dark/tab_on.png); color: var(--brass-hi); text-shadow: 0 0 .8rem rgba(216, 184, 113, .55); }
body.pc .ob-panel .inv-pages button:not(.on):not(:disabled):hover { color: var(--ink); }
.inv-pages .pg-lk { display: none; flex: none; width: 1.4rem; height: 1.4rem; margin-right: -.3rem; }
.inv-pages .pg-lk svg { display: block; width: 100%; height: 100%; }
.inv-pages .pg-tab.shut .pg-lk { display: block; }
.inv-pages .pg-tab.shut b { opacity: .6; }
.inv-pages .pg-new { display: none; position: absolute; right: -.5rem; top: -.5rem; width: .8rem; height: .8rem; min-width: 5px; min-height: 5px; border-radius: 50%; background: #f2c76a; box-shadow: 0 0 0 1px #2a1d06, 0 0 .6rem #f2c76a; }
.inv-pages .pg-tab.fresh .pg-new { display: block; }
.inv-pages .pg-tab.drop-ok { box-shadow: inset 0 0 0 .25rem #7fe08a, 0 0 1rem rgba(127, 224, 138, .5); }
.inv-pages .pg-tab.drop-no { box-shadow: inset 0 0 0 .25rem #ff6a5a; }
.inv-grid.shut .cell.empty { opacity: .45; }
.inv-lock { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .4rem;
padding: 1.2rem 2.4rem; text-align: center; background: rgba(12, 9, 6, .88); border: 1px solid rgba(201, 160, 98, .45); box-shadow: 0 0 2rem rgba(0, 0, 0, .7); }
.inv-lock svg { width: 3.6rem; height: 3.6rem; opacity: .9; }
.inv-lock b { font: 600 max(12px, 1.5rem)/1.25 var(--serif); color: var(--brass-hi); }
.inv-lock small { font-size: max(10px, 1.15rem); color: var(--ink3); }
.inv-card .muted { margin: 0; font-size: max(10px, 1.15rem); }
.inv-card .d-act { display: flex; gap: .6rem; }
.inv-card .d-act button b { font-weight: 700; font-variant-numeric: tabular-nums; }
body.pc .inv-card .d-tip, body.pc .inv-card .d-close { display: none; }
.ob-char { height: 65.4rem; }
.ob-char .ob-body { gap: .8rem; }
.rg-who { align-items: center; }
.rg-exp .exp { margin-top: .3rem; }
.rg-exp small b { font-weight: 400; }
.cs-core { flex: none; display: flex; flex-direction: column; gap: .6rem; }
.cs-attrs, .cs-pools { display: grid; gap: .6rem; }
.cs-attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-pools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: .5rem .3rem .6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; line-height: 1.15; }
.cs-tile small { max-width: 100%; font: 600 max(10px, 1.15rem)/1.3 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tile b { font: 700 max(15px, 2.2rem)/1.15 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-tile b em { font: 600 max(10px, 1.3rem) var(--sans); font-style: normal; color: var(--ink3); }
.cs-tile i { font: 400 max(9px, 1.05rem)/1.3 var(--sans); font-style: normal; color: var(--ink3); } .cs-tile i u { text-decoration: none; }
.cs-attrs .cs-tile small { font: 600 max(11px, 1.3rem)/1.3 var(--serif); letter-spacing: .1em; color: var(--brass); }
.cs-tile.a0 b { color: #ff9c86; } .cs-tile.a1 b { color: #a6e58c; } .cs-tile.a2 b { color: #9cc0ff; }
.cs-tile i.cs-give { color: var(--ink2); white-space: nowrap; } .cs-tile i.cs-give span { color: var(--ink3); }
.cs-tile.life b { color: #ff8f80; } .cs-tile.mana b { color: #8fb8ff; } .cs-tile.es b { color: #c6ecff; } .cs-tile.spirit b { color: #f0dfa8; }
.cs-pools .cs-tile b { font-size: max(14px, 1.9rem); }
.cs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; padding-right: .5rem; }
.cs-cols { display: flex; flex-direction: column; gap: 1.2rem; }
.cs-sec { flex: none; }
.cs-sec h3 { margin: 0 0 .3rem; padding-bottom: .3rem; font: 600 max(12px, 1.35rem)/1.3 var(--serif); letter-spacing: .12em; color: var(--brass-hi); border-bottom: 1px solid rgba(140,111,63,.5); }
.cs-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .6rem 0 .4rem; font: 600 max(11px, 1.2rem)/1.3 var(--sans); color: var(--ink2); }
.cs-sub small { font: 400 max(10px, 1.1rem) var(--sans); color: var(--ink3); } .cs-sub small b { font-weight: 600; color: var(--ink2); }
.cs-sub .pen { margin-left: .8rem; } .cs-sub .pen b { color: #ff6a5a; }
.cs-dmgs { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-dmg { display: flex; align-items: baseline; gap: .7rem; padding: .3rem 1rem .3rem .8rem; background: rgba(0,0,0,.35); border-left: .3rem solid var(--c, var(--ink3)); font-size: max(11px, 1.3rem); }
.cs-dmg span { color: var(--c, var(--ink3)); } .cs-dmg b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; margin-top: .3rem; }
.cs-row { min-width: 0; display: flex; align-items: baseline; gap: .5rem; padding: .45rem .1rem; border-bottom: 1px solid rgba(140,111,63,.16); font-size: max(11px, 1.3rem); }
.cs-row > span { flex: 1; min-width: 0; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row > b { flex: none; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cs-row > small { flex: none; font-size: max(10px, 1.1rem); color: var(--ink3); } .cs-row small u { text-decoration: none; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cs-row.hl > b { color: var(--brass-hi); }
.cs-row.wide { grid-column: 1 / -1; }
.cs-sets { margin: 0 0 -.4rem; padding: .1rem .8rem; background: rgba(0, 0, 0, .35); border-left: .3rem solid var(--brass); }
.cs-sets .cs-row { border-bottom: 0; }
.cs-sets .cs-row > b .ws { font: 700 max(12px, 1.5rem)/1 var(--serif); letter-spacing: .06em; color: var(--brass-hi); }
.cs-sets .cs-row > b em { font: 600 max(10px, 1.2rem) var(--sans); font-style: normal; color: var(--ink3); }
.cs-sets .cs-row.none > b { color: var(--ink3); }
.cs-list .cs-row { flex-wrap: wrap; }
.cs-list .cs-row > small { flex: 0 0 100%; }
.cs-resgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cs-res { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .4rem .8rem; background: rgba(0,0,0,.35); border-left: .3rem solid var(--c); font-size: max(11px, 1.3rem); color: var(--ink2); }
.cs-res .ic { display: grid; width: 1.8rem; height: 1.8rem; } .cs-res .ic svg { width: 100%; height: 100%; }
.cs-res > span:not(.ic) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-res b { font: 700 max(12px, 1.4rem) var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .cs-res b.max { color: var(--r2); } .cs-res b.neg { color: #ff6a5a; }
.cs-res small { font-size: max(9px, 1rem); color: var(--ink3); }
.cs-boss { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .3rem 1rem; padding: .3rem .1rem .2rem; font-size: max(11px, 1.3rem); color: var(--ink2); }
.cs-boss b { font: 700 max(13px, 1.6rem) var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .cs-boss b em { font: 600 max(10px, 1.2rem) var(--sans); font-style: normal; color: var(--ink3); }
.cs-boss .bar { grid-column: 1 / -1; display: block; height: .6rem; background: #080706; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.cs-boss .bar u { display: block; height: 100%; background: linear-gradient(#f2d463, #b98a2a); }
.cs-perm { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: .5rem; font-size: max(11px, 1.3rem); color: var(--r1); }
.cs-perm b { font-weight: 700; } .cs-perm .muted { font-size: max(10px, 1.15rem); }
.cs-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid rgba(140,111,63,.3); }
.cs-pts { min-width: 0; display: flex; align-items: baseline; gap: .8rem; font: 600 max(11px, 1.3rem) var(--sans); color: var(--ink2); white-space: nowrap; }
.cs-pts b { font: 700 max(14px, 1.9rem)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .cs-pts b em { font: 600 max(10px, 1.3rem) var(--sans); font-style: normal; color: var(--ink3); }
.cs-pts i { font-style: normal; color: var(--ink3); } .cs-pts i u { text-decoration: none; font-weight: 700; }
.cs-pts.has i u { color: var(--r2); text-shadow: 0 0 .8rem rgba(242,212,99,.5); }
.cs-foot .ob-btn { flex: none; }
.itip { width: max(34.4rem, 272px); }
.itip.cur { --rc: #d9c391; } .itip.raw { --rc: #9fe3d6; }
.itip .it-head b { overflow-wrap: anywhere; }
.itip .it-kind { margin-bottom: .1rem; }
.itip .it-p span { color: var(--ink2); }
.itip .it-req { line-height: 1.6; }
.itip .it-req i { font-style: normal; } .itip .it-req u { text-decoration: none; }
.itip .it-req b { font-weight: 700; color: var(--ink); }
.itip .it-req .bad, .itip .it-req .bad b { color: #ff5a4a; }
.itip .it-m b { font-weight: 700; }
.itip .it-m.imp { color: #a9bdea; font-weight: 500; }
.itip .it-m .tier { margin-left: .7rem; font: 400 max(9px, 1rem) var(--sans); font-style: normal; color: var(--ink3); white-space: nowrap; }
.itip .it-m .tier u { margin-right: .3rem; text-decoration: none; font-weight: 700; }
.itip .it-m .tier.p u { color: var(--brass-hi); } .itip .it-m .tier.s u { color: var(--teal); }
.itip .it-unid { color: #ff5a4a; font-weight: 700; }
.itip .it-cor { margin-top: .35rem; color: #e0403a; font-weight: 700; letter-spacing: .04em; }
.itip .it-m.cimp { color: #d9608a; font-weight: 600; }
.itip .it-m .tier.cor { color: #b0507a; font-weight: 700; }
.itip .it-desc { color: var(--ink); }
.itip .it-fee { color: #e8c877; font-size: .92em; } .itip .it-fee b { color: #ffe08a; } .itip .it-fee small { display: block; color: var(--ink3); font-size: .9em; } .itip .it-fee .coin svg { width: 1em; height: 1em; vertical-align: -.12em; }
.itip .it-hint { margin-top: .3rem; font-size: max(10px, 1.15rem); line-height: 1.45; color: var(--ink3); }
.itip .it-price { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.itip .it-price b { font-variant-numeric: tabular-nums; }
.itip .it-price.bad, .itip .it-price.bad b { color: #ff5a4a; }
.itip.rune { --rc: #e2b58a; }
.itip .it-socks { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.itip .it-sk-h { color: var(--ink3); font-size: max(10px, 1.2rem); }
.itip .it-sk-h b { font-weight: 700; color: var(--ink2); }
.itip .it-sk { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .6rem; }
.itip .it-sk .pip { flex: none; width: .9rem; height: .9rem; min-width: 6px; min-height: 6px; box-sizing: border-box; margin: 0; border-radius: 50%; background: #070605; border: 1px solid #a48a56; }
.itip .it-sk.f .pip { background: radial-gradient(circle at 35% 30%, #fff 0, var(--k) 45%, var(--k) 100%); border-color: #000; box-shadow: 0 0 .5rem var(--k); }
.itip .it-sk .nm { color: #e2b58a; font-weight: 600; }
.itip .it-sk.e .nm { color: var(--ink3); font-weight: 400; }
.itip .it-sk .it-m { flex: 0 0 100%; }
.itip .it-rn { color: var(--ink2); }
.itip .it-rn u { text-decoration: none; }
.itip .it-rn .it-m { color: var(--r1); }
.itip.cs-tip .it-kind { margin-bottom: .3rem; }
.itip.cs-tip.locked { --rc: #c9a08a; }
.itip .coin { position: relative; display: inline-block; width: 1.8rem; height: 1.8rem; }
.itip .coin img { position: absolute; inset: 0; width: 100%; height: 100%; }
body.touch .ob-views button { min-width: 6.4rem; }
body.touch .ob-bag .ob-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'eq bar' 'eq grid' 'gold card'; gap: .5rem 1.4rem; }
body.touch .inv-eq { --u: .62rem; grid-area: eq; align-self: center; }
body.touch .inv-bar { grid-area: bar; min-height: 3.2rem; }
body.touch .inv-bar .cb-h { font-size: 0; gap: 0; }
body.touch .inv-bar .cb-h .bag-count { font-size: max(10px, 1.15rem); }
body.touch .inv-sort { min-height: 3.2rem; padding: 0 .9rem; font-size: max(11px, 1.2rem); }
body.touch .inv-gridwrap { grid-area: grid; min-width: 0; min-height: 0; container-type: inline-size; align-items: flex-start; }
body.touch .inv-grid { --bc: 3.2rem; }
@supports (width: 1cqw) { body.touch .inv-grid { --bc: clamp(2.4rem, calc((100cqw - 3.4rem) / 12), 4.4rem); } }
body.touch .inv-foot { display: contents; }
body.touch .inv-gold { grid-area: gold; justify-self: center; align-self: center; }
body.touch .inv-card { grid-area: card; min-height: 3.6rem; }
body.touch .ob-bag:has(.inv-pages) .ob-body { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'eq bar bar' 'eq grid grid' 'gold pages card'; }
body.touch .inv-pages { grid-area: pages; align-self: center; margin: 0; }
body.touch .ob-panel .inv-pages .pg-arr { display: none; }
body.touch .ob-panel .inv-pages button { min-width: 4.6rem; height: 3.8rem; font-size: max(13px, 1.6rem); }
body.touch .bagwin.has-sel .inv-card { grid-area: auto; position: absolute; z-index: 5; left: -.6rem; top: -.5rem; bottom: -.4rem; width: 31.4rem; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .6rem; padding: .8rem;
background: #110e0b url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 / .8rem; box-shadow: 0 0 0 1px #000, 0 0 1.6rem rgba(0,0,0,.7); }
body.touch .bagwin.has-sel.card-right .inv-card { left: auto; right: -.6rem; }
body.touch .inv-card .d-tip { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
body.touch .inv-card .itip { width: auto; max-width: none; box-shadow: none; font-size: max(11px, 1.25rem); }
body.touch .inv-card .itip .it-head { min-height: 4rem; padding: .4rem 3.6rem; }
body.touch .inv-card .itip .it-head b { font-size: max(13px, 1.5rem); }
body.touch .inv-card .itip .it-body { padding: .6rem .8rem .8rem; }
body.touch .inv-card .d-act { flex: none; flex-wrap: wrap; }
body.touch .inv-card .d-act button { flex: 1 1 30%; min-height: 4rem; padding: 0 .6rem; }
body.touch .inv-card .d-act .d-close { position: absolute; z-index: 2; right: .3rem; top: .3rem; flex: none; width: 3.6rem; height: 3.6rem; min-height: 0; padding: 0; font-size: 0; color: transparent; border: 0; border-image: none; background: url(../assets/ui/dark/btn_close.png) center / 100% 100% no-repeat; }
body.touch .inv-apply .ap-t small { display: none; }
body.touch .inv-apply .ap-t small.aug { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; font-size: max(10px, 1.05rem); line-height: 1.2; }
body.touch .inv-apply.auged .ap-t b { display: none; }
body.touch .inv-apply .ap-t small.warn { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: max(10px, 1.05rem); line-height: 1.2; }
body.touch .inv-apply.noted .ap-t b { display: none; }
body.touch .inv-eq { height: calc(41 * var(--u)); }
body.touch .inv-wset, body.touch .ws-swap { height: calc(5.9 * var(--u)); width: calc(11.9 * var(--u)); }
body.touch .ob-panel .ws-swap { left: calc(35.1 * var(--u)); }
body.touch .ob-panel .ws-tab { font-size: max(13px, 1.6rem); }
body.touch .ws-swap svg { width: 2rem; height: 2rem; }
body.touch .inv-eq .wslot.s0, body.touch .inv-eq .wslot.s1 { --y: 6.4; --h: 11.1; }
body.touch .inv-eq .wslot.s12 { --x: 14.4; --y: 35.1; --w: 5.9; --h: 5.9; }
body.touch .inv-eq .wslot.s13 { --x: 20.55; --y: 35.1; --w: 5.9; --h: 5.9; }
body.touch .inv-eq .wslot.s14 { --x: 26.7; --y: 35.1; --w: 5.9; --h: 5.9; }
body.touch .inv-eq .wslot.s17 { --x: 32.85; --y: 35.1; --w: 5.9; --h: 5.9; }
body.touch .inv-eq.c4 .wslot.s12 { --x: 11.3; } body.touch .inv-eq.c4 .wslot.s13 { --x: 17.45; } body.touch .inv-eq.c4 .wslot.s14 { --x: 23.6; } body.touch .inv-eq.c4 .wslot.s17 { --x: 29.75; }
body.touch .inv-pick { width: 100%; gap: .4rem; padding: .7rem .9rem .8rem; }
body.touch .inv-pick .pk-ask { display: none; }
body.touch .ob-panel .pk-row { min-height: 4rem; }
body.touch .pk-act .ob-btn { min-height: 3.8rem; min-width: 8rem; }
body.touch .ob-char .ob-body { display: grid; grid-template-columns: 27rem minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'who sheet' 'core sheet' '. sheet' 'foot sheet'; gap: .7rem 1.6rem; }
body.touch .ob-char .rg-who { grid-area: who; }
body.touch .ob-char .cs-core { grid-area: core; }
body.touch .ob-char .cs-foot { grid-area: foot; }
body.touch .ob-char .cs { grid-area: sheet; touch-action: pan-y; }
body.touch .ob-char .cs-cols { display: block; columns: 2; column-gap: 1.8rem; }
body.touch .ob-char .cs-sec { break-inside: avoid; margin-bottom: 1rem; }
body.touch .cs-grid { grid-template-columns: minmax(0, 1fr); }
body.touch .cs-sets { margin: 0 0 .8rem; break-inside: avoid; }
body.touch .cs-res { grid-template-columns: minmax(0, 1fr) auto auto; padding: .3rem .7rem; }
body.touch .cs-res .ic { display: none; }
body.touch .bag-name { font-size: max(15px, 2.1rem); }
body.touch .rg-exp .lv { font-size: max(16px, 2.2rem); }
body.touch .cs-tile { padding: .3rem .2rem .4rem; }
body.touch .cs-tile b { font-size: max(14px, 1.8rem); } body.touch .cs-pools .cs-tile b { font-size: max(12px, 1.5rem); }
body.touch .cs-foot { flex-wrap: wrap; }
.coin { position: relative; flex: none; display: inline-block; width: 1.8rem; height: 1.8rem; vertical-align: -.35rem; }
.coin img.item-art { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(#shop, #appraise, #market) .bad, :is(#shop, #appraise, #market) .bad b { color: #ff5a4a; }
#shop .shop-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
#shop .shop-list .muted { padding: 2.4rem 0; text-align: center; }
.win .row.shop-row { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: 1.1rem; min-height: 6.4rem; padding: .5rem 1.3rem .5rem .7rem; cursor: pointer; }
.win .row.shop-row.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
.shop-row .cell { width: 4.8rem; height: 4.8rem; pointer-events: none; }
.shop-info { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.win .row .shop-info > b { font: 600 max(12px, 1.4rem)/1.3 var(--sans); white-space: nowrap; }
.win .row .shop-nums { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: max(10px, 1.15rem); line-height: 1.35; color: var(--ink2); white-space: normal; }
.shop-nums i { font-style: normal; color: var(--ink3); } .shop-nums span b, .shop-nums .mod b { font-weight: 600; color: var(--ink); overflow: visible; }
.shop-nums .mod { color: #a9bdea; }
.shop-nums .mod u, .mk-kind { text-decoration: none; }
.shop-nums .shop-kind { color: var(--brass); font-weight: 600; }
.mk-nm small u.mk-kind { color: var(--brass); }
.win .row .shop-req { display: flex; flex-wrap: wrap; gap: 0 .9rem; font-size: max(9px, 1.05rem); line-height: 1.35; color: var(--ink3); }
.shop-req b { font-weight: 600; color: var(--ink2); overflow: visible; }
.shop-price { display: flex; align-items: center; gap: .4rem; font: 700 max(13px, 1.5rem)/1 var(--serif); font-style: normal; color: var(--r2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.win .row .shop-price b { font-weight: 700; overflow: visible; }
#shop .inv-act .shop-sel i { font-style: normal; font-size: max(10px, 1.15rem); }
#shop footer { gap: 1.4rem; }
.shop-gold { flex: none; display: inline-flex; align-items: center; gap: .5rem; }
.shop-gold small { text-align: left; }
.win footer .shop-note b { font: 600 max(10px, 1.1rem) var(--sans); color: var(--ink2); }
#appraise { left: 2rem; top: 1.4rem; width: 43rem; height: 63.6rem; max-height: calc(100vh - 2.8rem); }
.ap-say { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.2rem; margin-bottom: .9rem !important; font-size: max(11px, 1.25rem); line-height: 1.5; color: var(--ink2); }
.ap-n b { color: var(--r2); font-weight: 700; }
.ap-shards { flex: none; display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.ap-shard { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .5rem 1rem .5rem .6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.ap-shard .cell { width: 4rem; height: 4rem; cursor: default; }
.ap-nm { min-width: 0; display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.ap-nm b { font: 600 max(12px, 1.4rem)/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-nm small { font: 400 max(10px, 1.1rem)/1.3 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-shard .ap-nm b { color: #d9c391; }
.ap-shard .bar { display: block; height: .7rem; background: #080706; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.ap-shard .bar u { display: block; height: 100%; background: linear-gradient(#9cc4ff, #2f62cc); }
.ap-shard.k-ascend .bar u { background: linear-gradient(#f6dc78, #b98a2a); }
.ap-shard em { font: 600 max(11px, 1.3rem) var(--sans); font-style: normal; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ap-shard em b { font: 700 max(14px, 1.9rem) var(--serif); color: var(--ink); }
.ap-orb { display: flex; align-items: center; gap: .3rem; padding-left: 1rem; border-left: 1px solid rgba(140,111,63,.35); }
.ap-orb .cell { width: 3.4rem; height: 3.4rem; border-image: none; cursor: default; }
.ap-orb b { min-width: 1.6rem; font: 700 max(12px, 1.5rem) var(--serif); color: var(--ink2); font-variant-numeric: tabular-nums; }
#appraise h5 { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
#appraise h5 small { font: 400 max(10px, 1.1rem) var(--sans); letter-spacing: 0; color: var(--ink3); } #appraise h5 small b { font-weight: 600; color: var(--ink2); }
.ap-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .4rem; padding: .7rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
.ap-list .muted { padding: 2.4rem 1rem; text-align: center; }
.win .row.ap-row { min-height: 5.4rem; padding: .3rem .7rem .3rem .5rem; gap: .9rem; justify-content: flex-start; cursor: default; }
.ap-row > .cell { flex: none; width: 4.6rem; height: 4.6rem; pointer-events: none; }
.ap-row .ap-nm { flex: 1; gap: 0; }
.ap-get { flex: none; display: flex; align-items: center; }
.ap-get .cell { width: 3rem; height: 3rem; border-image: none; pointer-events: none; }
.win .row .ap-get b { font: 700 max(11px, 1.3rem) var(--sans); color: #d9c391; overflow: visible; }
.win .ap-row button { flex: none; min-width: 6.4rem; min-height: 3.4rem; padding: 0 1rem; }
.ap-note { flex: none; margin-top: .7rem !important; font-size: max(10px, 1.15rem); line-height: 1.5; color: var(--ink3); }
.ap-note b { font-weight: 600; color: var(--ink2); }
.mk-row em { display: flex; align-items: center; gap: .4rem; }
.mk-row em b { font: inherit; }
.mk-nm small.mk-p { display: flex; align-items: center; gap: .4rem; }
.mk-p b { font: 700 max(11px, 1.3rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.mk-cost { display: flex; flex-direction: column; gap: .2rem; }
.mk-cost > span { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.mk-cost > span:last-child b { font-size: max(12px, 1.4rem); }
.mk-buy b { font-variant-numeric: tabular-nums; }
.mk-purse { display: flex; align-items: center; gap: 1.8rem; }
.mk-purse > span { display: flex; align-items: center; gap: .5rem; }
.mk-box .coin, .mk-ask .coin { width: 2.2rem; height: 2.2rem; }
.mk-box > div:only-child { flex: 1; }
.mk-box > div:only-child b { flex: 1; }
.mk-ask input { flex: 0 1 9rem; }
.mk-nm small b { font-weight: 600; }
body.touch #appraise { left: calc(.8rem + var(--sal)); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; }
body.touch.shopping #shop, body.touch.appraising #appraise { right: calc(58% + .2rem); }
body.touch.shopping .ob-bag, body.touch.appraising .ob-bag { left: calc(42% + .2rem); }
body.touch.mk-mine #market { right: calc(58% + .2rem); }
body.touch #shop > header, body.touch #appraise > header { justify-content: flex-start; padding: 0 4.6rem 0 1.2rem; }
body.touch #shop > header b, body.touch #appraise > header b { font-size: max(13px, 1.7rem); letter-spacing: .04em; }
body.touch #tip .itip { width: max(31rem, 272px); font-size: max(11px, 1.25rem); }
body.touch #tip .itip .it-head { min-height: 4rem; }
body.touch #tip .itip .it-head b { font-size: max(13px, 1.5rem); }
body.touch #tip .itip .it-head b + b { font-size: max(11px, 1.3rem); }
body.touch.appraising .ob-views { display: none; }
body.touch.appraising .ob-head { justify-content: center; padding: 0 5rem; }
body.touch.appraising .ob-head h2 { display: block; }
body.touch.shopping .inv-eq, body.touch.appraising .inv-eq { display: none; }
body.touch.shopping .ob-bag .ob-body, body.touch.appraising .ob-bag .ob-body { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'bar bar' 'grid grid' 'gold card'; }
body.touch.shopping .ob-bag:has(.inv-pages) .ob-body, body.touch.appraising .ob-bag:has(.inv-pages) .ob-body { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'bar bar bar' 'grid grid grid' 'gold pages card'; }
body.touch.shopping .ob-bag:has(.inv-pages) .ob-body { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'bar bar' 'grid grid' 'pages card'; }
body.touch.shopping .ob-bag:has(.inv-pages) .inv-gold { display: none; }
body.touch.shopping .bagwin.has-sel .inv-card, body.touch.appraising .bagwin.has-sel .inv-card { grid-area: card; position: static; width: auto; padding: 0; flex-direction: row; align-items: center; justify-content: flex-end; background: none; border-image: none; box-shadow: none; }
body.touch.shopping .inv-card .d-act, body.touch.appraising .inv-card .d-act { flex-wrap: nowrap; }
body.touch.shopping .inv-card .d-act button, body.touch.appraising .inv-card .d-act button { flex: none; min-width: 6.6rem; min-height: 3.8rem; padding: 0 .8rem; }
body.touch.shopping .inv-card .d-act .d-close, body.touch.appraising .inv-card .d-act .d-close { display: none; }
body.touch .win .row.shop-row { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .7rem; min-height: 5.4rem; padding: .3rem .8rem .3rem .5rem; }
body.touch .shop-row .cell { width: 4rem; height: 4rem; }
body.touch #shop .inv-act { margin-top: .6rem; }
body.touch #shop .inv-act .shop-sel { display: none; }
body.touch #shop .inv-act button { flex: 1; min-width: 0; padding: 0 .6rem; }
body.touch #shop footer .shop-note { display: none; }
body.touch #shop .shop-list, body.touch .ap-list { touch-action: pan-y; }
body.touch .ap-shard { grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .6rem; padding: .3rem .7rem .3rem .4rem; }
body.touch .ap-shard .cell { width: 3.2rem; height: 3.2rem; }
body.touch .ap-shard .ap-orb { display: none; }
body.touch .ap-say { margin-bottom: .5rem !important; } body.touch .ap-say > span:first-child { display: none; }
body.touch .ap-shards { margin-bottom: .6rem; gap: .3rem; }
body.touch #appraise h5, body.touch .ap-note { display: none; }
body.touch .win .row.ap-row { min-height: 4.6rem; gap: .6rem; }
body.touch .ap-row > .cell { width: 3.8rem; height: 3.8rem; }
body.touch .ap-row .ap-get { display: none; }
body.touch .win .ap-row button { min-width: 5.4rem; }
body.touch #market.find { display: grid; grid-template-columns: minmax(0, 1fr) 31rem; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: .8rem; }
body.touch #market.find .mk-tabs, body.touch #market.find .mk-filter { grid-column: 1; min-width: 0; }
body.touch #market.find .mk-body { display: contents; }
body.touch #market.find .mk-list { grid-column: 1; grid-row: 3; }
body.touch #market.find .mk-detail { grid-column: 2; grid-row: 1 / 4; touch-action: pan-y; }
body.touch #market.find footer { grid-column: 1 / -1; }
body.touch #market .mk-detail .itip { width: 100%; }
body.touch .mk-buy { background: #0d0b09; }
body.touch.mk-mine .mk-ask .mk-nm { flex: 1 1 calc(100% - 6rem); }
body.touch.mk-mine .mk-ask input { flex: 1 1 6rem; }
body.touch.mk-mine .mk-ask button { flex: 1 1 6rem; padding: 0 .6rem; }
:root:not([lang="th"]) .cs-pools .cs-tile { justify-content: space-between; }
:root:not([lang="th"]) .cs-pools .cs-tile small { white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: break-word; }
:root[lang="vi"] .cs-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[lang="vi"] .cs-grid, :root[lang="fil"] .cs-grid { grid-template-columns: minmax(0, 1fr); }
:root:not([lang="th"]) .win .row.ap-row { gap: .6rem; }
:root:not([lang="th"]) .win .ap-row button { min-width: 0; padding: 0 .6rem; }
:root:not([lang="th"]) .mk-ask { flex-wrap: wrap; gap: .6rem; }
:root:not([lang="th"]) .mk-ask .mk-nm { flex: 1 1 calc(100% - 6rem); }
:root:not([lang="th"]) .mk-ask input { flex: 1 1 6rem; }
:root:not([lang="th"]) .mk-ask button { flex: 1 1 6rem; min-width: 0; padding: 0 .8rem; }
:root:not([lang="th"]) .mk-my button { padding: 0 .7rem !important; }
:root:not([lang="th"]) body:not(.touch) #shop.storage .inv-act { flex-wrap: wrap; }
:root:not([lang="th"]) body:not(.touch) #shop.storage .inv-act .shop-sel { flex: 1 0 100%; }
:root:not([lang="th"]) body:not(.touch) #shop.storage .inv-act button { flex: 1; min-width: 0; }
:root:not([lang="th"]) .cs-res { gap: .4rem; padding: .4rem .5rem; }
:root:not([lang="th"]) .cs-res small:empty { display: none; }
:root:not([lang="th"]) .ap-row .ap-nm > b, :root:not([lang="th"]) .mk-row .mk-nm > b, :root:not([lang="th"]) .win .row .shop-info > b {
white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.2; }
.itip .it-m i.tier.uq { font-style: normal; }
.itip .it-flavor { margin-top: .5rem; color: var(--r3); opacity: .85; font-style: italic; line-height: 1.35; text-align: center; }
.cs-cps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; margin-top: .6rem; }
.cs-cp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem .6rem; font-size: max(10px, 1.15rem); color: var(--ink2); min-width: 0; }
.cs-cp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cp b { font: 700 max(11px, 1.3rem) var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .cs-cp b em { font-style: normal; font-weight: 600; color: var(--ink3); }
.cs-cp .bar { grid-column: 1 / -1; display: block; height: .4rem; background: #080706; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.cs-cp .bar u { display: block; height: 100%; background: linear-gradient(#8fd0ff, #3a7ac0); }
.cs-cp.wsp .bar u { background: linear-gradient(#f2d463, #b98a2a); } .cs-cp.life .bar u { background: linear-gradient(#ff8a7a, #b8322a); }
.cs-cp.spirit .bar u { background: linear-gradient(#d8f0ff, #7aa8d8); } .cs-cp.r0 .bar u { background: linear-gradient(#ffb06a, #c0501a); }
.cs-cp.r1 .bar u { background: linear-gradient(#bfeaff, #3a9cd8); } .cs-cp.r2 .bar u { background: linear-gradient(#fff27a, #b0a020); }
.cs-cp.full b { color: #9fe07a; }
.cs-next { margin-top: .7rem; padding: .35rem .6rem; font-size: max(11px, 1.25rem); color: var(--ink2); background: rgba(242, 212, 99, .07); box-shadow: inset 2px 0 0 #f2d463; }
.cs-next b { color: #f2d463; } .cs-next small { color: var(--ink3); } .cs-next.done { box-shadow: inset 2px 0 0 #9fe07a; color: #9fe07a; }
.cs-cbs { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .15rem; }
.cs-cb { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: start; gap: .5rem; padding: .25rem .3rem; font-size: max(10px, 1.15rem); color: var(--ink3); }
.cs-cb > i { font-style: normal; text-align: center; color: var(--ink3); } .cs-cb div { min-width: 0; display: flex; flex-direction: column; }
.cs-cb div b { color: var(--ink2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-cb div small { color: var(--ink3); font-size: .9em; }
.cs-cb em { font-style: normal; color: var(--ink3); font-size: .9em; }
.cs-cb.got > i { color: #9fe07a; } .cs-cb.got div b { color: var(--ink); } .cs-cb.got em { color: var(--r1); }
.cs-cb.next { background: rgba(242, 212, 99, .07); } .cs-cb.next > i, .cs-cb.next div b { color: #f2d463; } .cs-cb.next em { color: var(--ink2); }
.win .mk-xbtn i { font-style: normal; margin-left: .3rem; padding: 0 .6rem; border-radius: 1rem; background: rgba(72,194,176,.25); color: #8ff0dc; font-variant-numeric: tabular-nums; }
.win .mk-xbtn.on { border-image-source: url(../assets/ui/dark/btn_down.png); color: var(--brass-hi); }
.mk-xsum { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mk-xsum small { font-size: max(10px, 1.1rem); color: var(--ink3); }
.win .mk-xsum button.mk-xbtn { color: #8ff0dc; }
.mk-xsum span { max-width: 100%; box-sizing: border-box; padding: .2rem .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 max(10px, 1.15rem)/1.5 var(--sans); color: var(--ink2);
background: rgba(72,194,176,.08); border: 1px solid rgba(110,240,215,.35); border-radius: .3rem; }
.win .mk-xsum button { min-height: 2.8rem; padding: 0 .9rem; border-width: .7rem; font-size: max(11px, 1.2rem); }
.mk-list.mk-advw { position: relative; display: block; padding: 0; overflow: hidden; }
#market.find.adv { height: min(96rem, calc(100vh - 2.8rem)); }
.mk-adv { box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .8rem;
padding: .8rem 1rem; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
.mk-adv fieldset { min-width: 0; margin: 0; padding: .5rem 1rem .8rem; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .5rem; border: 1px solid rgba(140,111,63,.35); }
.mk-adv fieldset.mk-stats, .mk-adv .mk-xact { grid-column: 1 / -1; }
.mk-adv legend { padding: 0 .6rem; font: 600 max(11px, 1.3rem)/1.4 var(--serif); letter-spacing: .06em; color: var(--brass); }
.mk-fr { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; }
.mk-fr > span { flex: 0 0 12rem; font-size: max(11px, 1.2rem); line-height: 1.25; color: var(--ink2); }
.mk-fr > i, .mk-mm > i { font-style: normal; color: var(--ink3); }
.mk-adv select, .mk-adv input { box-sizing: border-box; height: 3.2rem; min-height: 26px; padding: 0 .9rem; color: var(--ink); background: none; border: 0 solid transparent;
border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; font: 400 max(12px, 1.3rem)/1 var(--sans); outline: none; user-select: text; -webkit-user-select: text; }
.mk-adv select { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; }
.mk-adv select option, .mk-adv select optgroup { background: #15120e; color: var(--ink); }
.mk-fr > input { flex: 1; min-width: 0; }
.mk-mm { flex: 1; min-width: 14rem; display: flex; align-items: center; gap: .3rem; }
.mk-mm input { flex: 1 1 0; width: 0; min-width: 6.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.mk-mm input::placeholder, .mk-adv input::placeholder { color: var(--ink3); font-size: max(10px, 1.1rem); }
.mk-adv input.mk-cnt { flex: 0 0 5rem; width: 5rem; text-align: right; }
.win .mk-adv button.mk-me { flex: none; min-height: 3rem; padding: 0 .8rem; border-width: .7rem; font-size: max(10px, 1.15rem); }
.mk-fnote { grid-column: 1 / -1; margin: 0; font-size: max(10px, 1.1rem); color: var(--ink3); }
.mk-adv fieldset.mk-stats { grid-template-columns: minmax(0, 1fr); }
.mk-st { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.win .mk-st button.mk-sk { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; text-align: left; min-height: 3.2rem; padding: 0 1rem; border-width: .7rem; font-weight: 600; color: var(--ink); }
.win .mk-st button.mk-sk.empty { color: var(--teal); }
.mk-st .mk-mm { flex: 0 0 17rem; }
.win .mk-st button.mk-not, .win .mk-st button.mk-del { flex: none; min-height: 3.2rem; padding: 0 .8rem; border-width: .7rem; font-size: max(10px, 1.15rem); }
.win .mk-st button.mk-not.on { color: #ff8672; border-image-source: url(../assets/ui/dark/btn_down.png); }
.mk-st.not .mk-sk { color: #ff8672 !important; text-decoration: line-through; }
.win .mk-adv button.mk-add { justify-self: start; min-height: 3.2rem; border-width: .7rem; color: var(--teal); }
.mk-xact { flex: none; position: sticky; bottom: -.8rem; display: flex; justify-content: flex-end; gap: .6rem; margin: 0 -1rem -.8rem; padding: .6rem 1rem .8rem; background: linear-gradient(transparent, #0d0b09 30%); }
.win .mk-xact button { min-width: 11rem; }
.mk-pick { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: .5rem; padding: .8rem; background: rgba(11,10,8,.98); }
.mk-ph { flex: none; display: flex; gap: .5rem; } .mk-ph input { flex: 1; min-width: 0; height: 3.6rem; }
.mk-pl { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: .2rem; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
.win .row.mk-pk { min-height: 3.4rem; padding: .3rem 1rem; justify-content: flex-start; white-space: normal; font: 400 max(11px, 1.25rem)/1.35 var(--sans); color: var(--ink2); cursor: pointer; }
.win .row.mk-pk.ps { color: #8ff0dc; }
body.touch .mk-adv { gap: .5rem; padding: .5rem .6rem; }
body.touch .mk-adv fieldset { padding: .3rem .6rem .6rem; gap: .4rem; }
body.touch #market.find.adv { grid-template-columns: minmax(0, 1fr); height: auto; }
body.touch #market.find.adv .mk-list { grid-column: 1; }
body.touch .mk-fr > span { flex-basis: 9.6rem; }
body.touch .mk-adv input { font-size: 16px; }
body.touch .mk-st { flex-wrap: wrap; } body.touch .mk-st button.mk-sk { flex: 1 1 100%; }
body.touch .mk-st .mk-mm { flex: 1 1 12rem; }
body.touch .mk-xact { bottom: -.5rem; margin: 0 -.6rem -.5rem; padding: .5rem .6rem; }
body.touch .mk-xsum { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body.touch .mk-xsum span { flex: none; max-width: 24rem; }
body.touch #market.adv .mk-tabs, body.touch #market.adv .mk-cats, body.touch #market.adv .mk-search, body.touch #market.adv footer { display: none; }
body.touch #market.find.adv { grid-template-rows: auto minmax(0, 1fr); }
#sellbox { left: 2rem; top: 1.4rem; width: 43rem; max-width: calc(100vw - 4rem); height: 63.6rem; max-height: calc(100vh - 2.8rem); z-index: 7; display: flex; flex-direction: column; }
#sellbox.hidden { display: none; }
.sb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.sb-hint { margin: 0; font: 400 max(11px, 1.2rem)/1.45 var(--sans); color: var(--ink3); }
.sb-rate { font-weight: 700; color: var(--ink); } .sb-rate.far { color: #ffd76a; }
.sb-tools { display: flex; gap: .8rem; } .sb-tools button { flex: 1; min-width: 0; min-height: 3.8rem; }
.sb-note { display: block; font: 400 max(10px, 1.1rem)/1.4 var(--sans); color: var(--ink3); }
.sb-list { flex: 1; min-height: 8rem; display: flex; flex-direction: column; gap: .4rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; touch-action: pan-y; }
.win .row.sb-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 1rem; min-height: 5rem; padding: .3rem 1.2rem .3rem .6rem; cursor: pointer; }
.sb-row .cell { width: 4rem; height: 4rem; pointer-events: none; }
.win .row .sb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 max(12px, 1.3rem)/1.3 var(--sans); }
.sb-row em { display: flex; align-items: center; gap: .4rem; font: 700 max(12px, 1.35rem)/1 var(--serif); font-style: normal; color: var(--r2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.win .row.sb-row em b { overflow: visible; }
.sb-empty { margin: 0; padding: 2rem 0; text-align: center; color: var(--ink3); font-size: max(11px, 1.25rem); }
.sb-sum { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: 0; font: 600 max(12px, 1.35rem)/1.3 var(--sans); color: var(--ink2); }
.sb-sum b { font: 700 max(14px, 1.7rem)/1 var(--serif); color: #ffd76a; font-variant-numeric: tabular-nums; }
.sb-btns { flex: none; display: flex; gap: 1rem; padding-top: 1rem; }
.sb-btns button { min-height: 4.2rem; } .sb-btns .primary { flex: 1; min-width: 0; } .sb-btns .ghost { flex: none; min-width: 9rem; }
.sb-btns .primary.armed:not(:disabled) { filter: hue-rotate(-28deg) saturate(1.5); }
.inv-grid .cell.sbox { box-shadow: inset 0 0 0 .25rem rgba(255, 205, 80, .9), inset 0 0 1.6rem rgba(255, 196, 64, .4); }
.inv-grid .cell.sbox::before { content: '✓'; position: absolute; inset: auto; left: .25rem; top: .25rem; z-index: 3; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #e3b53e; color: #1a1206; font: 800 max(11px, 1.3rem)/1 var(--sans); box-shadow: 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; }
.inv-grid .cell.sbox::after { border-image: url(../assets/ui/dark/cell_sel.png) 16 / .8rem; }
body.sboxing .inv-grid .cell:not(.empty) { cursor: copy; }
.inv-sellbox { flex: none; margin-left: auto; display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; border-width: .8rem; font-size: max(11px, 1.3rem); }
.inv-sellbox :is(svg, img.item-art) { position: static; flex: none; width: 1.8rem; height: 1.8rem; }
.inv-sellbox + .inv-sort { margin-left: .6rem; }
.inv-idall { flex: none; margin-left: auto; display: flex; align-items: center; gap: .45rem; min-height: 3rem; padding: 0 .9rem; border-width: .8rem; font-size: max(11px, 1.3rem); color: #9fe0ff; }
.inv-idall svg { width: 1.7rem; height: 1.7rem; fill: currentColor; }
.inv-idall .idn { min-width: 1.6em; padding: .1rem .35rem; font: 700 max(10px, 1.1rem)/1 var(--sans); color: #08141c; background: #8fd8ff; border-radius: .8rem; text-align: center; }
.inv-idall:disabled { opacity: .55; }
.inv-idall:not(.hidden) + .inv-sellbox { margin-left: .6rem; }
body.touch .inv-idall { min-height: 3.2rem; padding: 0 .7rem; font-size: max(11px, 1.2rem); }
body.sboxing .inv-sellbox { color: #ffd76a; }
#shop footer .shop-box { flex: none; margin-left: auto; min-height: 3.4rem; padding: 0 1.2rem; }
body.touch #sellbox { left: calc(.8rem + var(--sal)); right: calc(58% + .2rem); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; padding: 4.2rem 1rem .8rem; }
body.touch #sellbox > header { height: 3.4rem; } body.touch #sellbox .x { top: .2rem; width: 3rem; height: 3rem; }
body.touch .sb-body { gap: .4rem; } body.touch .sb-note { display: none; } body.touch .sb-hint { font-size: max(10px, 1.1rem); line-height: 1.3; }
body.touch .sb-tools button { min-height: 3.4rem; } body.touch .sb-btns { padding-top: .5rem; gap: .6rem; } body.touch .sb-btns button { min-height: 3.8rem; } body.touch .sb-btns .ghost { min-width: 6.4rem; }
body.touch .win .row.sb-row { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .6rem; min-height: 4.2rem; padding: .2rem .8rem .2rem .4rem; }
body.touch .sb-row .cell { width: 3.4rem; height: 3.4rem; }
body.touch .inv-sellbox { min-height: 3.2rem; padding: 0 .8rem; font-size: max(11px, 1.2rem); }