:root {
--ob0: #060504; --ob1: #0d0b09; --ob2: #15120e; --ob3: #1e1a15;
--iron: #383129; --iron-hi: #5d5346;
--brass: #8c6f3f; --brass-hi: #d8b871; --brass-lo: #4a391d;
--ink: #e9dfc6; --ink2: #b3a88f; --ink3: #7d7462;
--life: #c8281c; --mana: #2e6fdc; --teal: #48c2b0;
--r0: #ddd6c4; --r1: #8fb0ff; --r2: #f2d463; --r3: #e8853c;
--fire: #ff8a4a; --ice: #8ad8ff; --light: #ffe46b; --dark: #c09cff; --poison: #a6e45a;
--serif: Trirong, 'Noto Serif Thai', Georgia, serif;
--sans: 'Noto Sans Thai', system-ui, sans-serif;
--sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
--cut: polygon(11% 0, 89% 0, 100% 11%, 100% 89%, 89% 100%, 11% 100%, 0 89%, 0 11%);
--oct: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}
html { font-size: calc(10px * var(--s, 1)); }
body { font-size: 16px; }
html, body, #world, #hud { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: 16px; }
.touch-only, .pc-only { display: none !important; }
body.touch .touch-only { display: block !important; }
body.pc #pc-hud { display: block !important; }
body.pc #world { cursor: default; }
body.pc #world.over-mon { cursor: crosshair; }
body.pc #world.over-npc, body.pc #world.over-item { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.ob-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
img.painted, img.item-art { object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gem-ic { display: block; width: 100%; height: 100%; }
.gi { display: inline-grid; place-items: center; flex: none; }
.gi img.skic { width: 100%; height: 100%; object-fit: cover; display: block; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
.orb { position: absolute; --ow: 18rem; width: var(--ow); height: var(--ow); --p: 1; transition: --p .3s ease-out; }
.orb .clip { position: absolute; inset: 7.03125%; border-radius: 50%; overflow: hidden; }
.orb .liquid { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background-size: 50% auto; animation: orb-flow 14s linear infinite; }
.orb.life .liquid { background-image: url(../assets/ui/dark/orb_liquid_life.png); }
.orb.mana .liquid { background-image: url(../assets/ui/dark/orb_liquid_mana.png); animation-duration: 18s; animation-direction: reverse; }
.orb .surface { position: absolute; left: 0; width: 100%; height: 9.375%; top: calc((1 - var(--p)) * 100%); transform: translateY(-50%); pointer-events: none; }
.orb .value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; pointer-events: none;
font-family: var(--serif); color: #fff; text-shadow: 0 .2rem .2rem #000, 0 0 .6rem #000; font-variant-numeric: tabular-nums; }
.orb .value b { font-size: 2.6rem; line-height: 1; font-weight: 700; }
.orb .value small { font-size: 1.5rem; line-height: 1; color: #f1e3c4; }
.orb.low .clip { animation: orb-low 1s ease-in-out infinite; }
@keyframes orb-flow { to { background-position: calc(var(--ow) / 2) 0; } }
@keyframes orb-low { 50% { filter: brightness(1.7) saturate(1.3); } }
#hud kbd { position: absolute; left: 50%; bottom: -.9rem; transform: translateX(-50%); z-index: 4; min-width: 2.4rem; height: 1.8rem; padding: 0 .1rem; text-align: center; pointer-events: none;
border: .5rem solid transparent; border-image: url(../assets/ui/dark/key_plate.png) 10 fill / .5rem; font: 700 1.1rem/.8rem var(--sans); color: var(--ink); white-space: nowrap; }
#hud .badge { position: absolute; right: -.5rem; top: -.5rem; z-index: 3; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; display: grid; place-items: center; font: 700 1.1rem/1 var(--sans); font-style: normal;
color: #1a1206; background: linear-gradient(#f0d48c, #b98f42); border: 1px solid #000; border-radius: 1rem; box-shadow: 0 0 .6rem rgba(240,212,140,.7); }
#hud { position: fixed; inset: 0; pointer-events: none; color: var(--ink); font-family: var(--sans); font-size: 1.3rem; line-height: 1.35; }
#hud button { pointer-events: auto; font-family: inherit; font-weight: 600; cursor: pointer; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; }
#hud img.hi, #hud svg.hi { display: block; pointer-events: none; }
#h-status { display: none; }
#h-target { position: absolute; top: calc(2rem + var(--sat)); left: 50%; transform: translateX(-50%); width: 44rem; max-width: 46vw; padding: .6rem 1rem .8rem; pointer-events: auto; cursor: pointer;
border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#tg-name { display: block; font: 700 max(12px, 1.4rem)/1.3 var(--sans); color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
#h-target .tgbar { position: relative; height: 2.2rem; margin-top: .3rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/bar_frame.png) 16 fill / .8rem; }
#h-target .tgbar i { position: absolute; left: -.6rem; top: -.6rem; bottom: -.6rem; width: 100%; max-width: calc(100% + 1.2rem); background: url(../assets/ui/dark/bar_fill_hp.png) repeat-x 0 0 / 12.8rem 100%; transition: width .2s; }
#tg-el { display: block; margin-top: .2rem; font: 600 max(10px, 1.1rem)/1.3 var(--sans); text-shadow: 0 1px 2px #000; }
body.patch-pending #h-target { top: calc(var(--patch-h, 0px) + 1rem + var(--sat)); }
#h-buffs { position: absolute; top: calc(2rem + var(--sat)); left: calc(2rem + var(--sal)); max-width: 46rem; padding: .2rem .6rem; font: 600 max(11px, 1.2rem)/1.5 var(--sans); color: var(--ink);
border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#h-buffs:has(#buff-list:empty) { display: none; }
#h-mapwrap { position: absolute; top: calc(2rem + var(--sat)); right: calc(2rem + var(--sar)); width: var(--mm); display: flex; flex-direction: column-reverse; align-items: stretch; gap: .6rem; --mm: 23.6rem; }
#minimap-box { position: relative; width: var(--mm); height: var(--mm); pointer-events: auto; cursor: pointer; }
#minimap { display: block; width: 100%; height: 100%; background: rgba(10,14,9,.72); clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); filter: brightness(.62) saturate(.8) contrast(1.1); }
#minimap-box::after { content: ''; position: absolute; inset: 0; background: url(../assets/ui/dark/minimap_frame.png) center / 100% 100% no-repeat; pointer-events: none; }
#minimap-box.hidden { display: none; }
#minimap-box.big { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 82vh, 82vw); height: min(560px, 82vh, 82vw); z-index: 6; }
#minimap-box.big #minimap { background: rgba(10,14,9,.9); filter: brightness(.8) saturate(.9); }
#hud #h-map { height: 3.4rem; padding: 0 .4rem; display: flex; align-items: center; justify-content: center; gap: .4rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; color: var(--ink2); }
#h-map span { font: 600 max(10px, 1.2rem)/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#h-map i { font-style: normal; font-size: 1rem; color: var(--ink3); }
#chatbox { position: absolute; z-index: 3; left: calc(2rem + var(--sal)); bottom: 25rem; width: 44rem; pointer-events: auto; display: flex; flex-direction: column; gap: .3rem; padding: .2rem;
border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#chatbox.moved { bottom: auto; }
#chatbox.dragging { opacity: .9; outline: 1px dashed var(--brass-hi); outline-offset: 2px; }
#chat-row { display: none; gap: .4rem; }
#chatbox.typing #chat-row { display: flex; }
#chat-row input { flex: 1; min-width: 0; height: 3.4rem; min-height: 28px; padding: 0 1rem; font: 400 14px/1 var(--sans); color: var(--ink); background: none; border: .8rem solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; border-radius: 0; outline: none; user-select: text; -webkit-user-select: text; }
#chat-input::placeholder { color: var(--ink3); }
#hud #chat-row button { min-width: 5.6rem; padding: 0 1rem; font: 700 max(11px, 1.3rem)/1 var(--sans); color: #1a1206; border: 1rem solid transparent; border-image: url(../assets/ui/dark/btn_primary.png) 20 fill / 1rem; }
#chat-tabs { display: flex; gap: .3rem; align-items: center; }
#chat-grip { flex: 0 0 2rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--brass); cursor: grab; touch-action: none; }
#chatbox.dragging #chat-grip { cursor: grabbing; }
#hud #b-chat { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
#b-chat img.hi { width: 100%; height: 100%; }
#hud #chat-tabs button[data-ch] { flex: 1; height: 2.4rem; padding: 0 .2rem; font: 600 max(10px, 1.1rem)/1 var(--sans); color: var(--ink3); border: 0 solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; white-space: nowrap; overflow: hidden; }
#hud #chat-tabs button[data-ch].on { color: var(--brass-hi); border-image-source: url(../assets/ui/dark/tab_on.png); }
#chat-log { height: 11rem; overflow-y: auto; padding: .2rem .6rem; font-size: max(11px, 1.3rem); line-height: 1.5; color: var(--ink2); text-shadow: 0 1px 2px #000; scrollbar-width: thin; scrollbar-color: var(--brass-lo) transparent; user-select: text; -webkit-user-select: text; }
#chat-log .sys { color: var(--brass-hi); }
#chat-log .me { color: var(--ink); }
#chat-log .party { color: #8fd8a8; }
#chat-log .guild { color: #c9a8ff; }
#chat-log .trade { color: #ffcf7a; }
#chat-row { position: relative; }
#hud #chat-row #chat-to { flex: none; min-width: 6.4rem; padding: 0 .8rem; font: 600 max(11px, 1.25rem)/1 var(--sans); color: var(--ink); border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; white-space: nowrap; }
#hud #chat-row #chat-to::after { content: ''; display: inline-block; margin-left: .5rem; border: .4rem solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: .15rem; }
#chat-to.ct-party, #chat-tomenu .ct-party { color: #8fd8a8 !important; } #chat-to.ct-guild, #chat-tomenu .ct-guild { color: #c9a8ff !important; } #chat-to.ct-trade, #chat-tomenu .ct-trade { color: #ffcf7a !important; }
#chat-tomenu { position: absolute; left: 0; bottom: calc(100% + .4rem); z-index: 5; display: flex; flex-direction: column; min-width: 12rem; padding: .4rem; background: #120f0c; border: 1px solid var(--brass-lo); box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.6); }
#chat-tomenu.hidden { display: none; }
#hud #chat-row #chat-tomenu button { min-width: 0; height: 3.4rem; padding: 0 1rem; text-align: left; font: 600 max(12px, 1.35rem)/1 var(--sans); color: var(--ink2); border: 0; border-image: none; background: none; }
#hud #chat-row #chat-tomenu button:hover, #hud #chat-row #chat-tomenu button.on { background: rgba(216,184,113,.12); }
#hud #chat-row #chat-tomenu button.on::before { content: '✓ '; }
#chat-log .rar1 { color: var(--r1); font-weight: 600; }
#chat-log .rar2 { color: var(--r2); font-weight: 700; }
#chat-log .cl-it { font-weight: 700; cursor: pointer; pointer-events: auto; text-shadow: 0 1px 2px #000, 0 0 .6rem rgba(0,0,0,.8); }
#chat-log .cl-it:hover { text-decoration: underline; }
#chat-log .cl-dev { margin-left: .3em; font-size: 1.12em; line-height: 1; vertical-align: -0.08em; font-style: normal; font-weight: 400; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; text-shadow: none; cursor: default; pointer-events: auto;
filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 2px rgba(255,255,255,.55)); }
#hud #chat-log .cl-tr { display: inline-block; margin-left: .6rem; padding: 0 .6rem; min-width: 0; height: auto; font: 600 max(9px, 1rem)/1.5 var(--sans); color: var(--brass-hi); background: rgba(0,0,0,.42); border: 1px solid var(--brass-lo); border-radius: 3px; cursor: pointer; vertical-align: baseline; text-shadow: none; user-select: none; -webkit-user-select: none; }
#hud #chat-log .cl-tr:hover, #hud #chat-log .cl-tr.on { color: var(--ink); border-color: var(--brass-hi); }
#hud #chat-log .cl-tr:disabled { opacity: .6; cursor: default; }
#chat-log .cl-o { margin: 0 0 .1rem 1.2rem; padding-left: .6rem; border-left: 2px solid var(--brass-lo); color: var(--ink); font-style: italic; opacity: .92; }
#chat-log .cl-o[hidden] { display: none; }
body.touch #hud #chat-log .cl-tr { padding: .1rem .8rem; font-size: max(9px, .95rem); }
#hud .expbar { position: absolute; left: 0; right: 0; bottom: 0; height: .4rem; background: #000; }
#hud .expbar i { display: block; height: 100%; width: 0; background: url(../assets/ui/dark/xp_fill.png) repeat-x 0 0 / 12.8rem 100%; transition: width .3s; }
#hud .expbar span { position: absolute; font: 600 max(10px, 1.1rem)/1 var(--sans); color: var(--ink3); text-shadow: 0 1px 2px #000; white-space: nowrap; }
#f-fps { display: none; }
#toast { position: fixed; z-index: 30; pointer-events: none; top: 22%; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(92vw, 62rem); padding: .4rem 1.4rem; text-align: center; white-space: normal; transition: opacity .4s;
font: 600 max(12px, 1.4rem)/1.4 var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#toast:empty { display: none; }
#pick-list { position: absolute; z-index: 4; min-width: 18rem; padding: .2rem; pointer-events: auto; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; }
#hud #pick-list button { display: block; width: 100%; margin: .2rem 0; padding: .4rem 1rem; min-height: 3.4rem; text-align: left; font: 600 max(12px, 1.3rem)/1.3 var(--sans); color: var(--ink); border: .8rem solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
#hud #pick-list button:hover { border-image-source: url(../assets/ui/dark/row_on.png); }
#pick-list button small { margin-left: .6rem; font-weight: 400; color: var(--ink3); }
#dead { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: radial-gradient(ellipse, rgba(60,0,0,.35), rgba(6,5,4,.86)); }
#dead b { font: 700 max(30px, 5rem)/1.2 var(--serif); color: #e0443a; letter-spacing: .06em; text-shadow: 0 .3rem 1.4rem #000; }
#dead span { padding: .2rem 1.6rem; font: 600 max(12px, 1.5rem)/1.5 var(--sans); color: var(--ink2); border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#rotate-hint { background: var(--ob1) !important; color: var(--ink); font-family: var(--sans); }
#rotate-hint b { color: var(--brass-hi) !important; }
#patch-note { background: rgba(13,11,9,.94); border: 1px solid var(--brass); border-radius: 0; box-shadow: 0 3px 12px rgba(0,0,0,.6); color: var(--ink); font-family: var(--sans); }
#patch-note .pn-title b { color: var(--brass-hi); }
#patch-note .pn-title i { color: var(--ink3); }
#patch-note .pn-dot { background: var(--brass-hi); box-shadow: 0 0 6px var(--brass-hi); }
#patch-note .pn-ok { border: 1px solid #000; border-radius: 0; background: linear-gradient(#f0d48c, #c79d4c 55%, #8c6a2c); color: #1a1206; box-shadow: inset 0 0 0 1px rgba(255,236,170,.5); }
#patch-note .pn-list { background: rgba(13,11,9,.97); border: 1px solid var(--brass-lo); border-radius: 0; color: var(--ink2); }
body.pc #belt, body.pc #hotbar, body.pc #h-menu, body.pc #joyzone { display: none !important; }
#pc-hud { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
#pc-hud button { position: relative; }
#pc-hud .ph-base { position: absolute; left: 0; right: 0; bottom: 0; height: 3.4rem; background: url(../assets/ui/dark/slab_base.png) repeat-x 0 0 / 12.8rem 100%; }
#pc-hud .ph-left { position: absolute; left: 0; bottom: 0; width: 48rem; height: 0; }
#pc-hud .ph-right { position: absolute; right: 0; bottom: 0; width: 87rem; height: 0; }
#pc-hud .ph-slab, #pc-hud .ph-slope { position: absolute; bottom: 0; height: 9.8rem; }
#pc-hud .ph-slab { background: url(../assets/ui/dark/slab_fill.png) repeat-x 0 0 / 12.8rem 100%; }
#pc-hud .ph-slope { width: 4.8rem; background: url(../assets/ui/dark/slab_slope.png) no-repeat 0 0 / 100% 100%; }
#pc-hud .ph-left .ph-slab { left: 0; width: 43.2rem; }
#pc-hud .ph-left .ph-slope { left: 43.2rem; }
#pc-hud .ph-right .ph-slope { left: 0; transform: scaleX(-1); }
#pc-hud .ph-right .ph-slab { left: 4.8rem; right: 0; }
#pc-hud .ph-left .orb { left: 2rem; bottom: 1.6rem; }
#pc-hud .ph-right .orb { right: 2rem; bottom: 1.6rem; }
#pc-hud .orb { pointer-events: auto; }
#pc-hud .ph-flasks { position: absolute; left: 21.8rem; bottom: 2.2rem; display: flex; gap: .8rem; pointer-events: auto; }
#pc-hud .pc-flask { width: 5.2rem; height: 7.2rem; }
#pc-hud .pc-flask .dk-disc { position: absolute; inset: 6%; display: grid; place-items: center; }
#pc-hud .pc-flask .dk-disc img { width: 100%; height: 86%; object-fit: contain; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.7)); }
#pc-hud .pc-flask .fr, #pc-hud .pc-skill .fr { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#pc-hud .pc-flask i { position: absolute; right: .5rem; bottom: .6rem; z-index: 3; font: 700 1.3rem/1 var(--sans); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
#pc-hud .pc-flask.none .dk-disc { opacity: .3; filter: grayscale(.8); }
#pc-hud .pc-flask.empty { cursor: default; }
#pc-hud .dk-skills { position: absolute; left: 5rem; bottom: 2.6rem; display: flex; gap: .5rem; pointer-events: auto; }
#pc-hud .pc-skill { width: 5.6rem; height: 5.6rem; transition: filter .1s; }
#pc-hud .pc-skill .gi { position: absolute; inset: 5%; clip-path: var(--cut); background: var(--ob0); }
#pc-hud .pc-skill .gi img, #pc-hud .pc-skill .gi svg { width: 100%; height: 100%; object-fit: cover; }
#pc-hud .pc-skill.atk .gi img { width: 72%; height: 72%; object-fit: contain; margin: auto; }
#pc-hud .pc-skill .cd { position: absolute; inset: 5%; clip-path: var(--cut); pointer-events: none; z-index: 1; }
#pc-hud .pc-skill .nm { display: none; }
#pc-hud .pc-skill.empty .gi { background: none; }
#pc-hud .pc-skill.off .gi { filter: grayscale(1) brightness(.6); }
#pc-hud .pc-skill.nomp .gi { filter: saturate(.25) brightness(.55) sepia(.3) hue-rotate(190deg); }
#pc-hud .pc-skill:hover, #pc-hud .pc-flask:not(.empty):hover, #pc-hud .pc-menu:hover { filter: brightness(1.25); }
#pc-hud .pc-skill.down::after { content: ''; position: absolute; inset: -16.6%; background: url(../assets/ui/dark/slot_skill_glow.png) center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
#pc-hud .pc-flask.down { filter: brightness(1.5); }
#pc-hud .pc-skill.picking { filter: brightness(1.35); }
#bindpick { position: fixed; z-index: 7; min-width: 21rem; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; padding: .5rem; pointer-events: auto;
border: 0 solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; background: rgba(9,8,6,.94); box-shadow: 0 .8rem 2rem rgba(0,0,0,.65); scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
#bindpick .bp-h { padding: .2rem .8rem .5rem; font: 600 max(11px, 1.2rem)/1.2 var(--serif); letter-spacing: .1em; color: var(--brass); }
#hud #bindpick button { display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding: .2rem 1.4rem .2rem .6rem; text-align: left; font: 600 max(12px, 1.35rem)/1.2 var(--sans); color: var(--ink); white-space: nowrap;
border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
#hud #bindpick button:hover, #hud #bindpick button.on { border-image-source: url(../assets/ui/dark/row_on.png); }
#hud #bindpick button.on { color: var(--brass-hi); }
#bindpick .gi { width: 3.2rem; height: 3.2rem; }
#bindpick .gi img, #bindpick .gi svg { width: 100%; height: 100%; object-fit: contain; }
#pc-hud .ph-tab { position: absolute; left: 25.6rem; bottom: 9.7rem; width: 41.8rem; height: 5.4rem; }
#pc-hud .ph-tabslope { position: absolute; left: 0; top: 0; width: 3rem; height: 100%; background: url(../assets/ui/dark/slab_tab_slope.png) no-repeat 0 0 / 100% 100%; }
#pc-hud .ph-tabfill { position: absolute; left: 3rem; right: 0; top: 0; height: 100%; background: url(../assets/ui/dark/slab_tab_fill.png) repeat-x 0 0 / 12.8rem 100%; }
#pc-hud .dk-menu { position: absolute; left: 2rem; top: .6rem; display: flex; gap: .4rem; pointer-events: auto; }
#pc-hud .pc-menu { width: 3.8rem; height: 3.8rem; background: url(../assets/ui/dark/btn_oct.png) center / 100% 100% no-repeat; display: grid; place-items: center; }
#pc-hud .pc-menu:hover { background-image: url(../assets/ui/dark/btn_oct_hover.png); }
#pc-hud .pc-menu:active, #pc-hud .pc-menu.down { background-image: url(../assets/ui/dark/btn_oct_down.png); }
#pc-hud .pc-menu img.hi { width: 60%; height: 60%; object-fit: contain; }
#pc-hud .pc-menu.on img.hi { filter: drop-shadow(0 0 .5rem var(--teal)) brightness(1.3); }
#pc-hud .pc-menu.on { background-image: url(../assets/ui/dark/btn_oct_down.png); }
#pc-hud #pm-portal .cd { position: absolute; inset: 8%; clip-path: var(--oct); pointer-events: none; z-index: 2; }
#pc-hud #pm-portal.off { filter: grayscale(.9) brightness(.6); }
#pc-hud .ph-exp { position: absolute; left: 49.6rem; right: 88.6rem; bottom: .5rem; height: 1rem; }
#pc-hud .expbar { position: absolute; inset: 0; height: auto; background: none; border: 0 solid transparent; border-width: 0 .8rem; border-image: url(../assets/ui/dark/xp_frame.png) 0 16 fill / 0 .8rem; }
#pc-hud .expbar i { position: absolute; left: -.6rem; top: .2rem; bottom: .2rem; height: auto; max-width: calc(100% + 1.2rem); }
#pc-hud .expbar span { bottom: 1.6rem; }
#pc-hud #f-exp { left: 0; }
#pc-hud #f-fps { right: 0; }
.ob-panel, .win { position: fixed; z-index: 6; box-sizing: border-box; display: flex; flex-direction: column; color: var(--ink); font-family: var(--sans); font-size: max(12px, 1.3rem); line-height: 1.4; user-select: none;
border: 0 solid transparent; border-image: url(../assets/ui/dark/panel.png) 64 / 3.2rem; background: #110e0b url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.6); padding: 5.2rem 0 0; }
.ob-head, .win > header { position: absolute; left: .3rem; right: .3rem; top: .3rem; height: 4.9rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 0; padding: 0 5rem;
border: 0 solid transparent; border-image: url(../assets/ui/dark/panel_header.png) 0 96 fill / 0 4.8rem; }
.ob-head h2, .win > header b { flex: 0 1 auto; min-width: 0; margin: 0; font: 600 max(15px, 2rem)/1 var(--serif); letter-spacing: .08em; color: var(--brass-hi); text-shadow: 0 .2rem 0 #000, 0 0 1.4rem rgba(216,184,113,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-head .orn, .win > header::before, .win > header::after { content: ''; flex: 1 1 0; min-width: 0; max-width: 7.4rem; height: .9rem; background: url(../assets/ui/dark/title_ornament.png) center / 100% 100% no-repeat; }
.ob-head .orn.r, .win > header::after { transform: scaleX(-1); }
.win > header b { order: 1; } .win > header::after { order: 2; }
.ob-panel .x, .win .x { position: absolute; right: .7rem; top: .6rem; width: 3.4rem; height: 3.4rem; min-width: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 0; font-size: 0; color: transparent; cursor: pointer; order: 3;
background: url(../assets/ui/dark/btn_close.png) center / 100% 100% no-repeat; }
.ob-panel .x:hover, .win .x:hover { background-image: url(../assets/ui/dark/btn_close_hover.png); }
.ob-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 2rem 1.8rem; }
.ob-views { display: none; }
:where(.ob-panel, .win) button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-family: var(--sans); cursor: pointer; }
:where(.ob-panel, .win) :is(h2, h3, h4, h5, h6, p) { margin: 0; }
.ob-btn, .win button:not(.x):not(.row):not(.cell):not(.swatch):not(.sw-slot):not(.sw-chip):not(.st-plus):not(.st-minus), .d-act button {
min-height: 3.6rem; padding: 0 1.4rem; border: 1rem solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / 1rem; border-radius: 0; background: none;
font: 700 max(12px, 1.3rem)/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.win button:not(.x):not(.row):not(.cell):not(.swatch):not(.sw-slot):not(.sw-chip):not(.st-plus):not(.st-minus):not(.ghost):not(:disabled), .d-act button:not(.ghost) { border-image-source: url(../assets/ui/dark/btn_primary.png); color: #1a1206; }
.win button:not(.x):not(.row):not(.cell):not(.swatch):not(.sw-slot):not(.sw-chip):not(.st-plus):not(.st-minus):not(.ghost):not(:disabled):hover, .d-act button:not(.ghost):hover { border-image-source: url(../assets/ui/dark/btn_primary_hover.png); }
.win button:not(.x):not(.row):not(.cell):not(.swatch):not(.sw-slot):not(.sw-chip):not(.st-plus):not(.st-minus):not(.ghost):not(:disabled):active, .d-act button:not(.ghost):active { border-image-source: url(../assets/ui/dark/btn_primary_down.png); }
.win button.ghost:hover, .d-act button.ghost:hover { border-image-source: url(../assets/ui/dark/btn_hover.png); }
.win button:disabled, .d-act button:disabled { border-image-source: url(../assets/ui/dark/btn_disabled.png) !important; color: var(--ink3) !important; cursor: default; opacity: 1; }
.win button.armed { border-image-source: url(../assets/ui/dark/btn_primary_down.png) !important; color: #5a0c08 !important; }
.ob-tabs, .bag-tabs { display: flex; gap: .3rem; }
.ob-tabs button, .bag-tabs button { flex: 1; min-height: 3.4rem; padding: 0 .6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; border-radius: 0; background: none;
font: 600 max(11px, 1.3rem)/1 var(--sans); color: var(--ink3); white-space: nowrap; }
.ob-tabs button.on, .bag-tabs button.on { border-image-source: url(../assets/ui/dark/tab_on.png); color: var(--brass-hi); }
.muted { color: var(--ink3); }
.ob-panel ::-webkit-scrollbar, .win ::-webkit-scrollbar, .win::-webkit-scrollbar { width: 6px; height: 6px; }
.ob-panel ::-webkit-scrollbar-thumb, .win ::-webkit-scrollbar-thumb, .win::-webkit-scrollbar-thumb { background: linear-gradient(var(--brass-hi), var(--brass)); }
.ob-panel ::-webkit-scrollbar-track, .win ::-webkit-scrollbar-track, .win::-webkit-scrollbar-track { background: #090807; }
.cell, .wslot { position: relative; box-sizing: border-box; display: grid; place-items: center; padding: 0; border: 0 solid transparent; border-image: url(../assets/ui/dark/cell.png) 16 fill / .8rem; border-radius: 0; background: none; color: var(--ink); cursor: pointer; }
.cell.r1, .wslot.filled.r1 { border-image-source: url(../assets/ui/dark/cell_magic.png); }
.cell.r2, .wslot.filled.r2 { border-image-source: url(../assets/ui/dark/cell_rare.png); }
.cell.r3, .wslot.filled.r3 { border-image-source: url(../assets/ui/dark/cell_unique.png); }
.cell::after, .wslot::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 0 solid transparent; z-index: 2; }
body.pc .cell:not(.empty):hover::after, body.pc .wslot.filled:hover::after { border-image: url(../assets/ui/dark/cell_hover.png) 16 / .8rem; }
.cell.sel::after, .wslot.sel::after, body.pc .cell.sel:hover::after { border-image: url(../assets/ui/dark/cell_sel.png) 16 / .8rem; }
.cell.empty { cursor: default; pointer-events: none; }
.cell img.item-art, .wslot img.item-art { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.7)); }
.cell svg, .wslot svg { width: 62%; height: 62%; }
.cell svg.gem-ic, .wslot svg.gem-ic { position: absolute; inset: 13%; width: 74%; height: 74%; }
.cell i.cnt, .wslot i.cnt { position: absolute; right: .4rem; bottom: .1rem; z-index: 1; font: 700 max(10px, 1.2rem)/1.2 var(--sans); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.cell i.lv, .wslot i.lv { position: absolute; left: .4rem; top: .1rem; z-index: 1; font: 700 max(10px, 1.1rem)/1.2 var(--sans); font-style: normal; color: var(--r2); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cell i.lv.gl { color: var(--teal); }
.cell i.pr { position: absolute; left: 0; right: 0; bottom: .1rem; text-align: center; font: 700 max(10px, 1rem)/1 var(--sans); font-style: normal; color: var(--r2); text-shadow: 0 1px 2px #000; }
.bagwin { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.bagwin.hidden { display: none; }
.bagwin .ob-panel { pointer-events: auto; }
.ob-char { left: 2rem; top: 1.4rem; width: 43rem; height: 63.6rem; max-height: calc(100vh - 2.8rem); }
.ob-bag { right: 2rem; top: 1.4rem; width: 46rem; height: 84.8rem; max-height: calc(100vh - 2.8rem); }
body.shopping .ob-char { display: none; }
.rg-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .2rem 1rem; }
.rg-name { display: flex; flex-direction: column; min-width: 0; }
.bag-name { font: 700 max(18px, 2.8rem)/1.15 var(--serif); color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .2rem 0 #000; }
.cb-cls { font-size: max(11px, 1.3rem); color: var(--ink2); }
.rg-exp { display: contents; }
.rg-exp .lv { grid-column: 2; grid-row: 1; align-self: end; text-align: right; font: 700 max(20px, 3rem)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.rg-exp .exp { grid-column: 1 / 3; height: 1rem; margin-top: .6rem; position: relative; border: 0 solid transparent; border-width: 0 .8rem; border-image: url(../assets/ui/dark/xp_frame.png) 0 16 fill / 0 .8rem; }
.rg-exp .exp i { position: absolute; left: -.6rem; top: .2rem; bottom: .2rem; max-width: calc(100% + 1.2rem); background: url(../assets/ui/dark/xp_fill.png) repeat-x 0 0 / 12.8rem 100%; }
.rg-exp small { grid-column: 1 / 3; font-size: max(10px, 1.1rem); color: var(--ink3); }
.cb-pane { display: none; flex: 1; min-height: 0; flex-direction: column; gap: .8rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; padding-right: .2rem; }
.cb-pane.on { display: flex; }
.cb-pane .cb-h { display: none; }
.st-list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.st-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ic l l' 'v v pm'; align-items: center; gap: .2rem .8rem; padding: .8rem 1rem; min-height: 7.2rem;
border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.st-ic { grid-area: ic; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; }
.st-ic svg { width: 100%; height: 100%; }
.st-l { grid-area: l; display: flex; align-items: baseline; gap: .6rem; min-width: 0; line-height: 1.1; white-space: nowrap; }
.st-l b { font: 600 max(11px, 1.2rem)/1.1 var(--serif); letter-spacing: .12em; color: var(--brass); }
.st-l small { font-size: max(10px, 1.1rem); color: var(--ink3); overflow: hidden; text-overflow: ellipsis; }
.st-v { grid-area: v; font: 700 max(16px, 2.2rem)/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-v .gear { margin-left: .4rem; font: 600 max(10px, 1.2rem) var(--sans); color: var(--r1); }
.st-pm { grid-area: pm; display: flex; align-items: center; gap: .4rem; }
.st-plus, .st-pm .st-minus { width: 2.6rem; height: 2.6rem; min-width: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 0; font-size: 0; color: transparent; cursor: pointer;
background: url(../assets/ui/dark/btn_plus.png) center / 100% 100% no-repeat; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st-pm .st-minus { background: linear-gradient(#3a2f25, #17120e); box-shadow: inset 0 0 0 1px var(--brass-lo), inset 0 0 0 2px #000; position: relative; }
.st-pm .st-minus::after { content: ''; position: absolute; left: 28%; right: 28%; top: calc(50% - 1px); height: 2px; background: var(--brass-hi); }
.st-plus:disabled { background-image: url(../assets/ui/dark/btn_plus_disabled.png); cursor: default; }
.st-pm .st-minus:disabled { opacity: .35; cursor: default; }
.st-plus:hover:not(:disabled), .st-pm .st-minus:hover:not(:disabled) { filter: brightness(1.3); }
.st-sp, .st-pm .st-sp-m { display: none; }
.st-points { margin-top: auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 0 0; font: 600 max(12px, 1.3rem) var(--sans); color: var(--ink2); }
.st-points > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-points b { order: 2; margin-right: auto; font: 700 max(14px, 1.8rem)/1 var(--serif); color: var(--ink3); }
.st-points.has b { color: var(--r2); text-shadow: 0 0 .8rem rgba(242,212,99,.5); }
.st-points > span { order: 1; }
.st-points .st-reset { order: 3; min-height: 3.6rem; padding: 0 1.2rem; border: 1rem solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / 1rem; border-radius: 0; background: none; font: 700 max(11px, 1.3rem)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.st-points .st-reset:hover:not(:disabled) { border-image-source: url(../assets/ui/dark/btn_hover.png); }
.st-points .st-reset.armed { border-image-source: url(../assets/ui/dark/btn_primary.png); color: #5a0c08; }
.st-points .st-reset:disabled { border-image-source: url(../assets/ui/dark/btn_disabled.png); color: var(--ink3); cursor: default; }
.dt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dt-card { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.dt-card .st-ic, .dt-res .st-ic { grid-area: auto; }
.dt-card .st-ic { width: 2.4rem; height: 2.4rem; }
.dt-card small { font-size: max(10px, 1.1rem); color: var(--ink3); }
.dt-card b { font: 700 max(13px, 1.6rem)/1.1 var(--serif); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-sub { margin: .4rem 0 0; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.dt-sub small { font: 400 max(10px, 1.1rem) var(--sans); letter-spacing: 0; color: var(--ink3); }
.dt-resgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dt-res { display: grid; grid-template-columns: 2rem 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); }
.dt-res .st-ic { width: 1.8rem; height: 1.8rem; }
.dt-res span:not(.st-ic) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-res b { font: 700 max(12px, 1.4rem) var(--sans); color: var(--ink); } .dt-res b.max { color: var(--r2); } .dt-res b.neg { color: #ff6a5a; }
.dt-res small { font-size: 1rem; color: var(--ink3); }
.dt-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .2rem; font-size: max(11px, 1.3rem); border-bottom: 1px solid rgba(140,111,63,.18); }
.dt-row span { color: var(--ink2); } .dt-row b { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .dt-row.hl b { color: #ff6a5a; }
.rg-ring { position: relative; flex: none; align-self: center; width: 38.8rem; height: 29.8rem; }
.rg-halo { position: absolute; left: 11rem; top: 6rem; width: 16.8rem; height: 17.6rem; background: url(../assets/ui/dark/doll_niche.png) center / 100% 100% no-repeat; }
.bag-hero { position: absolute; left: 12.4rem; top: 7rem; width: 14rem; height: 16.2rem; }
.bag-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .4rem .6rem rgba(0,0,0,.8)); image-rendering: pixelated; }
.wslot { position: absolute; }
.wslot .ph { position: absolute; inset: 18%; width: 64%; height: 64%; object-fit: contain; opacity: .9; pointer-events: none; }
.wslot.filled .ph { display: none; }
.wslot .ic { display: contents; }
.wslot.s7 { left: 10.4rem; top: .2rem; width: 5.2rem; height: 5.2rem; }
.wslot.s2 { left: 16.6rem; top: 0; width: 5.6rem; height: 5.6rem; }
.wslot.s9 { left: 23.2rem; top: .5rem; width: 4.6rem; height: 4.6rem; }
.wslot.s0 { left: 1.8rem; top: 5.8rem; width: 6.8rem; height: 11.2rem; }
.wslot.s1 { left: 30.2rem; top: 5.8rem; width: 6.8rem; height: 11.2rem; }
.wslot.s5 { left: 2.4rem; top: 17.8rem; width: 5.6rem; height: 5.6rem; }
.wslot.s6 { left: 30.8rem; top: 17.8rem; width: 5.6rem; height: 5.6rem; }
.wslot.s10 { left: 2.9rem; top: 24.2rem; width: 4.6rem; height: 4.6rem; }
.wslot.s11 { left: 31.3rem; top: 24.2rem; width: 4.6rem; height: 4.6rem; }
.wslot.s3 { left: 10.8rem; top: 24.4rem; width: 5.2rem; height: 5.2rem; }
.wslot.s4 { left: 16.8rem; top: 24.4rem; width: 5.2rem; height: 5.2rem; }
.wslot.s8 { left: 22.8rem; top: 24.4rem; width: 5.2rem; height: 5.2rem; }
.bag-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cb-h { margin: 0; min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: .6rem; font: 600 max(11px, 1.2rem)/1.2 var(--serif); letter-spacing: .12em; color: var(--brass); white-space: nowrap; }
.cb-h .bag-count { font: 400 max(10px, 1.1rem) var(--sans); letter-spacing: 0; color: var(--ink3); }
.bag-bar .bag-tabs button { flex: none; min-height: 2.6rem; padding: 0 .4rem; font-size: max(10px, 1.2rem); }
.bag-gridwrap { flex: none; display: flex; justify-content: center; }
.bag-grid { flex: none; align-self: center; display: grid; grid-template-columns: repeat(8, 4.6rem); grid-template-rows: repeat(8, 4.6rem); gap: .3rem; isolation: isolate; }
.bag-grid .cell { z-index: 1; min-width: 0; min-height: 0; }
.bag-grid .cell.empty { z-index: 0; }
.bag-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; }
.bag-zen { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.bag-zen img.item-art, .bag-zen svg { width: 2.4rem; height: 2.4rem; }
.bag-zen b { font: 700 max(13px, 1.6rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.bag-zen small { font-size: max(10px, 1.1rem); color: var(--ink3); }
.bag-detail { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; }
.bag-detail .muted { margin: 0; font-size: max(10px, 1.1rem); }
.d-act { display: flex; gap: .6rem; }
body.pc .bag-detail .d-tip, body.pc .bag-detail .muted, body.pc .d-act .d-close { display: none; }
#tip { position: fixed; z-index: 40; pointer-events: none; }
.itip { --rc: var(--r0); box-sizing: border-box; width: 34.4rem; max-width: 94vw; text-align: center; font: 400 max(11px, 1.3rem)/1.5 var(--sans); color: var(--ink2);
border: 0 solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; background: rgba(9,8,6,.93); box-shadow: 0 1rem 2.4rem rgba(0,0,0,.7); padding: .3rem; }
.itip.r1 { --rc: var(--r1); } .itip.r2 { --rc: var(--r2); } .itip.r3 { --rc: var(--r3); }
.itip .it-head { display: flex; flex-direction: column; justify-content: center; min-height: 4.8rem; padding: .5rem 1.4rem; color: var(--rc);
border: 0 solid transparent; border-image: url(../assets/ui/dark/tip_head_normal.png) 24 fill / 1.2rem; }
.itip.r1 .it-head { border-image-source: url(../assets/ui/dark/tip_head_magic.png); }
.itip.r2 .it-head { border-image-source: url(../assets/ui/dark/tip_head_rare.png); }
.itip.r3 .it-head { border-image-source: url(../assets/ui/dark/tip_head_unique.png); }
.itip .it-head b { font: 600 max(14px, 1.8rem)/1.25 var(--serif); letter-spacing: .02em; text-shadow: 0 .2rem 0 #000; }
.itip .it-head b + b { font-size: max(12px, 1.4rem); opacity: .85; }
.itip .it-body { padding: .8rem 1.4rem 1rem; }
.itip hr { border: 0; height: .6rem; width: 20rem; max-width: 86%; margin: .7rem auto; background: url(../assets/ui/dark/sep.png) center / 100% 100% no-repeat; }
.itip .it-kind { color: var(--ink3); }
.itip .it-p em { font-style: normal; font-weight: 700; color: var(--ink); }
.itip .it-p em.up { color: var(--r1); }
.itip .it-req { color: var(--ink3); font-size: max(10px, 1.2rem); }
.itip .it-req .bad { color: #ff5a4a; font-weight: 700; }
.itip .it-m { color: var(--r1); font-weight: 600; }
.itip .it-m i { margin-left: .6rem; font: 400 max(9px, 1rem) var(--sans); color: var(--ink3); }
.itip .it-price { color: var(--r2); font-size: max(10px, 1.2rem); font-weight: 600; }
.win { padding: 6.4rem 2rem 1.8rem; }
.win.hidden { display: none; }
.win footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--ink2); }
.win footer b { font: 700 max(13px, 1.6rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.win footer small { font-size: max(10px, 1.1rem); color: var(--ink3); text-align: right; }
.list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
.win .row { box-sizing: border-box; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 4.4rem; padding: .4rem 1.4rem; text-align: left;
border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; font: 600 max(12px, 1.4rem)/1.3 var(--sans); color: var(--ink); }
.win .row:hover:not(.off):not(:disabled) { border-image-source: url(../assets/ui/dark/row_on.png); }
.win .row b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win .row small { flex: none; font: 400 max(10px, 1.2rem) var(--sans); color: var(--ink3); white-space: nowrap; }
.win .row.off { opacity: .45; cursor: default; }
.win .row.ghost { justify-content: center; color: var(--ink3); }
.win .muted { font-size: max(11px, 1.3rem); }
#skillpick, #travel { left: 50%; top: 8rem; transform: translateX(-50%); width: 42rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 12rem); }
#travel .wp-hint { margin: 0 .4rem .8rem; font-size: max(10px, 1.2rem); color: var(--ink3); }
#travel.mentor .wp-hint { font-size: max(11px, 1.3rem); line-height: 1.5; color: var(--ink2); }
#travel.mentor .row.wp small b { color: var(--r2); }
#travel.mentor .row.wp small .free { color: #8ff0dc; }
#travel.mentor .row.wp small i { font-style: normal; margin: 0 .3rem; }
#travel .wp-group { flex: none; margin: .8rem .4rem .1rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .12em; color: var(--brass); }
#travel .wp-group:first-child { margin-top: 0; }
#travel .row.wp.here { border-image-source: url(../assets/ui/dark/row_on.png); opacity: 1; }
#travel .row.wp.here small { color: var(--teal); }
#travel .row.wp.locked b { color: var(--ink3); }
.salon-colors { display: grid; grid-template-columns: repeat(3, 5.6rem); gap: 1.6rem; justify-content: center; padding: 1rem 0 1.4rem; }
.salon-colors .swatch { width: 5.6rem; height: 5.6rem; border-radius: 50%; border: .3rem solid #000; background: var(--c); box-shadow: 0 0 0 .2rem var(--brass), 0 .3rem .8rem rgba(0,0,0,.6); }
.salon-colors .swatch.cur { box-shadow: 0 0 0 .3rem var(--teal), 0 0 1.4rem var(--teal); cursor: default; }
.salon-colors .swatch.off { opacity: .4; cursor: not-allowed; }
#settings { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; }
.set { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .6rem; }
.set h4 { margin: 1.4rem 0 .4rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .12em; color: var(--brass); }
.set h4:first-child { margin-top: 0; }
.srow2 { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1.4rem; min-height: 4.2rem; padding: .3rem .2rem; font-size: max(12px, 1.35rem); color: var(--ink); border-bottom: 1px solid rgba(140,111,63,.18); }
.srow2 span { display: flex; align-items: center; gap: .6rem; }
.srow2 b { min-width: 2.6rem; text-align: right; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.srow2 input[type=checkbox] { flex: none; appearance: none; -webkit-appearance: none; width: 2.6rem; height: 2.6rem; min-width: 22px; min-height: 22px; margin: 0; cursor: pointer; background: url(../assets/ui/dark/check_off.png) center / 100% 100% no-repeat; }
.srow2 input[type=checkbox]:checked { background-image: url(../assets/ui/dark/check_on.png); }
.srow2 input[type=range] { appearance: none; -webkit-appearance: none; width: 17rem; height: 2.6rem; min-height: 22px; margin: 0; padding: 0; background: none; cursor: pointer; }
.srow2 input[type=range]::-webkit-slider-runnable-track { height: .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/slider_track.png) 0 8 fill / 0 .4rem; }
.srow2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 2.4rem; height: 2.4rem; margin-top: -.8rem; border: 0; background: url(../assets/ui/dark/slider_knob.png) center / 100% 100% no-repeat; }
.srow2 input[type=range]::-moz-range-track { height: .8rem; background: #000; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.srow2 input[type=range]::-moz-range-thumb { width: 2.4rem; height: 2.4rem; border: 0; background: url(../assets/ui/dark/slider_knob.png) center / 100% 100% no-repeat; }
.srow2 select { appearance: none; -webkit-appearance: none; height: 3.6rem; min-height: 28px; max-width: 55%; padding: 0 1.2rem; 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 14px var(--sans); cursor: pointer; outline: none; }
.srow2 select option { background: #15120e; color: var(--ink); }
#settings .set-acts { gap: .8rem; border-bottom: 0; flex-wrap: wrap; padding-top: .8rem; }
#settings .set-acts button { flex: 1; min-width: 15rem; white-space: normal; }
#settings .set-pass { display: none; flex-direction: column; gap: .6rem; padding: .8rem 0 0; }
body.id-acc #settings .set-pass { display: flex; }
#settings .set-pass b { color: var(--ink); font-size: 1.35rem; }
#settings .set-pass input { height: 3.8rem; min-height: 30px; padding: 0 1.2rem; color: var(--ink); background: none; border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; outline: none; user-select: text; -webkit-user-select: text; }
#settings .set-pass button { align-self: flex-start; }
#settings .set-pass-msg { min-height: 1.4em; color: #ff9b86; font-size: 1.25rem; } #settings .set-pass-msg.good { color: #9ff0b0; }
#botwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 9; }
.bot-top { border-bottom: 0; }
.bot-top .bot-state { font: 700 max(13px, 1.6rem)/1.2 var(--serif); color: var(--ink3); }
.bot-top .bot-state.on { color: var(--teal); text-shadow: 0 0 1rem rgba(72,194,176,.5); }
.bot-top button { min-width: 15rem; }
.bot-note { margin: .2rem .2rem .4rem !important; font-size: max(10px, 1.2rem); line-height: 1.5; color: var(--ink3); }
.srow2 i { font-style: normal; color: var(--ink3); }
.set p.keys-help { margin: .2rem .2rem .4rem !important; font-size: max(11px, 1.25rem); line-height: 1.6; color: var(--ink2); }
body.touch .keys-help { display: none; }
.srow2.two span { gap: .6rem; min-width: 0; }
.srow2.two select { max-width: 17rem; }
.srow2 select:disabled { opacity: .4; cursor: default; }
#shop { left: 2rem; top: 1.4rem; width: 43rem; height: 63.6rem; max-height: calc(100vh - 2.8rem); }
#shop .shopgrid { flex: 1; min-height: 0; align-self: stretch; display: flex; flex-direction: column; gap: .5rem; grid-template: none; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
#shop .shop-row { flex: none; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; justify-items: start; min-height: 6rem; padding: .5rem 1.4rem .5rem .8rem; text-align: left; border-image-source: url(../assets/ui/dark/row.png); }
#shop .shop-row.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
#shop .shop-row::after, .sw-slot::after, .sw-chip::after { display: none; }
#shop .shop-art { position: relative; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/cell.png) 16 fill / .8rem; }
#shop .shop-row img.item-art { position: static; width: 84%; height: 84%; }
#shop .shop-art svg.gem-ic { position: static; width: 78%; height: 78%; }
#shop .shop-item-name { font: 600 max(12px, 1.4rem)/1.3 var(--sans); color: var(--rar, var(--ink)); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#shop .shop-row i.pr { position: static; font: 700 max(11px, 1.3rem) var(--sans); color: var(--r2); white-space: nowrap; text-shadow: none; }
#shop.storage .pr { display: none; }
.inv-act { flex: none; display: none; gap: .8rem; align-items: center; margin-top: 1rem; font-size: max(11px, 1.3rem); color: var(--ink2); }
.inv-act.on { display: flex; }
.inv-act span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-act button { min-width: 10rem; }
#skills { left: 50%; top: 4rem; transform: translateX(-50%); width: 112rem; max-width: calc(100vw - 1.6rem); height: 76rem; max-height: calc(100vh - 5rem); z-index: 8; gap: 1rem; }
#skills header .sw-job { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); font: 600 max(11px, 1.3rem) var(--sans); color: var(--ink3); white-space: nowrap; }
#skills header .sw-job em { font-style: normal; color: var(--brass-hi); }
.sw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.4rem; }
.sw-slots { min-height: 0; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
.sw-colhead, .sw-slot { display: grid; grid-template-columns: 2.6rem 4.4rem minmax(0, 1fr) 13.2rem 6.4rem; gap: 1rem; align-items: center; }
.sw-colhead { flex: none; padding: 0 1.2rem; font: 600 max(10px, 1.1rem) var(--serif); letter-spacing: .12em; color: var(--brass); }
.sw-colhead span:first-child { grid-column: 1 / 4; } .sw-colhead span:last-child { text-align: right; }
.sw-slot { flex: none; box-sizing: border-box; width: 100%; justify-items: stretch; min-height: 5.6rem; padding: .4rem 1.2rem; text-align: left; border-image-source: url(../assets/ui/dark/row.png); }
.sw-slot:hover { border-image-source: url(../assets/ui/dark/row_on.png); filter: brightness(1.12); }
.sw-slot.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
.sw-slot.off .gi, .sw-slot.off .sw-info { filter: grayscale(.9) brightness(.65); }
.sw-slot.empty { grid-template-columns: 2.6rem 1fr; color: var(--ink3); font-size: max(11px, 1.25rem); }
.sw-key { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: url(../assets/ui/dark/badge_oct.png) center / 100% 100% no-repeat; font: 700 max(10px, 1.2rem)/1 var(--sans); color: var(--brass-hi); }
.sw-slot .gi { width: 4.4rem; height: 4.4rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--brass-lo); }
.sw-info { display: grid; gap: .2rem; min-width: 0; }
.sw-info b { font: 600 max(13px, 1.6rem)/1.15 var(--serif); color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-info small { font-size: max(10px, 1.1rem); color: var(--ink3); }
.sw-xp { display: block; width: 100%; max-width: 12rem; height: .3rem; background: #000; box-shadow: 0 0 0 1px #2a231b; }
.sw-xp > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); }
.sw-socks { display: flex; gap: .3rem; align-items: center; }
.sw-socks i, .sw-sock i.sk-hole { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: url(../assets/ui/dark/socket.png) center / 100% 100% no-repeat; }
.sw-socks .sk-lock { opacity: .28; filter: grayscale(1); }
.sw-socks .sk-s svg, .sw-socks .sk-s img.skic { display: block; width: 66%; height: 66%; border-radius: 50%; }
.sw-socks .sk-s.bad { filter: grayscale(1) brightness(.7); }
.sw-dps { display: grid; justify-items: end; line-height: 1.05; }
.sw-dps b { font: 700 max(15px, 2rem)/1 var(--serif); color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.sw-dps small { font: 600 max(9px, 1rem)/1.3 var(--sans); letter-spacing: .1em; color: var(--ink3); }
.sw-detail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem 1.6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; font-size: max(11px, 1.3rem); color: var(--ink2); }
.sw-dhead { display: flex; gap: 1.2rem; align-items: center; margin-bottom: .8rem; }
.sw-dhead .gi.big { width: 6.4rem; height: 6.4rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--brass); }
.sw-dhead > div { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.sw-dhead b { font: 700 max(18px, 2.6rem)/1.1 var(--serif); color: var(--brass-hi); text-shadow: 0 .2rem 0 #000; }
.sw-dhead small { font-size: max(10px, 1.2rem); color: var(--ink3); }
.sw-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }
.itip .sw-tags { justify-content: center; }
.sw-tags i { font-style: normal; font-size: max(10px, 1.1rem); padding: .1rem .8rem; background: rgba(0,0,0,.45); color: var(--ink2); border: 1px solid var(--brass-lo); }
.sw-desc { margin: .6rem 0 1rem !important; line-height: 1.5; color: var(--ink); }
.sw-stats, .sw-tip .it-body { display: grid; gap: .2rem; }
.sw-bigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.sw-big { display: grid; gap: .1rem; padding: .8rem .6rem; text-align: center; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.sw-big small { font: 600 max(9px, 1.05rem) var(--sans); color: var(--ink3); }
.sw-big b { font: 700 max(15px, 2rem)/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.sw-big b i { font-style: normal; font-size: max(10px, 1.2rem); margin-left: .2rem; color: var(--ink3); }
.sw-big.dps b { color: var(--brass-hi); font-size: max(17px, 2.4rem); }
.sw-secs { display: grid; gap: 1rem; }
.sw-sec h6 { margin: 0 0 .2rem; padding-bottom: .3rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); border-bottom: 1px solid rgba(140,111,63,.45); }
.sw-r { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid rgba(140,111,63,.14); font-size: max(11px, 1.25rem); text-align: left; }
.sw-r > span { color: var(--ink2); }
.sw-r > b { color: var(--ec, var(--ink)); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sw-r > b small, .sw-r > b span { font-weight: 500; color: var(--ink3); }
.sw-warn { margin: .6rem 0; padding: .5rem .8rem; background: rgba(120,20,12,.35); border: 1px solid #7a2a20; color: #ff9a8a; font-weight: 600; }
.sw-detail h5 { margin: 1.4rem 0 .5rem; font: 600 max(12px, 1.3rem) var(--serif); letter-spacing: .06em; color: var(--brass-hi); }
.sw-detail h5 small { font: 400 max(10px, 1.1rem) var(--sans); letter-spacing: 0; color: var(--ink3); }
.sw-socklist { display: grid; gap: .5rem; }
.sw-sock { display: flex; align-items: flex-start; gap: .8rem; padding: .6rem .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.sw-sock .gi { width: 2.8rem; height: 2.8rem; }
.sw-sock > div { flex: 1; min-width: 0; }
.sw-sock b { color: var(--ink); font-weight: 600; } .sw-sock small { color: var(--ink3); }
.sw-sock > div p { margin: .1rem 0 0; font-size: max(10px, 1.15rem); line-height: 1.35; color: var(--ink3); }
.sw-sock.hole { align-items: center; } .sw-sock.hole span { flex: 1; color: var(--ink3); }
.sw-sock.bad { opacity: .6; filter: grayscale(.6); }
.sw-sock button, .sw-acts button { min-height: 3.4rem !important; padding: 0 1.2rem !important; }
.sw-picks { display: grid; gap: .5rem; margin-top: .6rem; }
.sw-picks .row { justify-content: flex-start; min-height: 4rem; }
.sw-picks .row .gi { width: 2.8rem; height: 2.8rem; flex: none; }
.sw-picks .row b { flex: 1; }
.sw-acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; align-items: center; }
.sw-acts.eight { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; }
.sw-acts.eight button { min-width: 0; padding: 0 !important; font-size: max(13px, 1.6rem); }
.sw-hint { margin: .8rem 0 .4rem !important; color: var(--ink); font-weight: 600; }
.sw-wait { padding: 1rem 0; }
.sw-detail .itip { width: auto; max-width: none; box-shadow: none; margin-bottom: .6rem; }
.sw-tip .it-head { flex-direction: row; align-items: center; gap: .8rem; text-align: left; }
.sw-tip .it-head .gi { width: 3.2rem; height: 3.2rem; }
.sw-tip .it-head b { color: var(--brass-hi); }
.sw-tip .it-head .sw-lv { margin-left: auto; font: 600 max(11px, 1.2rem) var(--sans); color: var(--ink3); filter: none; }
.sw-tip .it-body { text-align: left; }
.sw-xprow { margin-top: .4rem; } .sw-xprow .sw-xp { max-width: none; }
.sw-bag { flex: none; max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; }
.sw-bag h4 { margin: 0 0 .6rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .12em; color: var(--brass); }
.sw-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.sw-chip { display: flex; align-items: center; gap: .6rem; min-height: 3.8rem; padding: .3rem 1.2rem .3rem .5rem; border-image-source: url(../assets/ui/dark/row.png); font: 600 max(11px, 1.25rem) var(--sans); color: var(--ink); }
.sw-chip .gi { width: 2.8rem; height: 2.8rem; }
.sw-chip svg.gem-ic, .sw-slot svg.gem-ic { position: static; width: 100%; height: 100%; }
.sw-chip i { font-style: normal; font-size: max(10px, 1.1rem); color: var(--ink3); }
.sw-chip.sel, .sw-chip:hover { border-image-source: url(../assets/ui/dark/row_on.png); }
.sw-chip.star > span:not(.gi) { color: var(--r2); }
#jobs { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 124rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; }
.jw-hint { flex: none; margin: 0 .4rem 1rem !important; color: var(--ink2); font-weight: 600; }
.jw-cards { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.jw-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.jw-card.cur { border-image-source: url(../assets/ui/dark/row_on.png); }
.jw-card h4 { margin: 0; font: 700 max(14px, 1.8rem)/1.2 var(--serif); color: var(--brass-hi); }
.jw-wt { color: var(--ink2); font-weight: 600; }
.jw-bars { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: center; font-size: max(10px, 1.2rem); }
.jw-bars label { color: var(--ink3); }
.jw-bar { display: flex; gap: .3rem; }
.jw-bar i { flex: 1; height: .8rem; background: #000; box-shadow: inset 0 0 0 1px #2a231b; }
.jw-bar i.on { background: linear-gradient(var(--brass-hi), var(--brass)); box-shadow: inset 0 0 0 1px #000; }
.jw-card p { margin: 0; flex: 1; font-size: max(11px, 1.25rem); line-height: 1.45; color: var(--ink2); }
.jw-skills, .jw-bonus { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: max(11px, 1.25rem); }
.jw-skills li { display: flex; align-items: center; gap: .6rem; }
.jw-skills svg { width: 1.8rem; height: 1.8rem; flex: none; }
.jw-bonus li b { color: var(--teal); }
.jw-card button { margin-top: .4rem; min-height: 4rem; padding: .3rem .6rem !important; white-space: normal !important; line-height: 1.25 !important; }
.jw-cur { display: block; text-align: center; padding: .9rem 0; font-weight: 700; color: var(--teal); }
body.touch #hud #h-map, body.touch #belt kbd, body.touch #hotbar kbd { display: none; }
body.touch #h-status { display: flex; position: absolute; z-index: 2; top: calc(.8rem + var(--sat)); left: calc(.8rem + var(--sal)); align-items: center; gap: .9rem; padding: .5rem 1.2rem .7rem .6rem;
pointer-events: auto; cursor: pointer; border: 0 solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#h-status .portrait { position: relative; flex: none; width: 5.6rem; height: 5.6rem; }
#h-status .portrait canvas { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border-radius: 50%; }
#h-status .portrait::after { content: ''; position: absolute; inset: 0; background: url(../assets/ui/dark/round_frame.png) center / 100% 100% no-repeat; pointer-events: none; }
#h-level { position: absolute; z-index: 1; left: 50%; bottom: -.7rem; transform: translateX(-50%); min-width: 3.6rem; padding: 0 .3rem; text-align: center; white-space: nowrap; font: 700 max(9px, 1rem)/1.7rem var(--sans); color: var(--brass-hi);
border: 0 solid transparent; border-image: url(../assets/ui/dark/key_plate.png) 10 fill / .5rem; }
#h-status .st-info { display: flex; flex-direction: column; gap: .3rem; width: 15.4rem; }
#h-status .st-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.6rem; }
#h-name { font: 700 max(11px, 1.3rem)/1.15 var(--serif); color: var(--brass-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; }
#h-cls, #hud #h-saver { display: none; }
#h-status .bars { display: flex; flex-direction: column; gap: .3rem; }
#h-status .bar { position: relative; height: 1.6rem; background: #050403; }
#h-status .bar::after { content: ''; position: absolute; inset: 0; border: 0 solid transparent; border-image: url(../assets/ui/dark/bar_frame.png) 16 / .8rem; pointer-events: none; }
#h-status .bar i { position: absolute; left: .2rem; top: .2rem; bottom: .2rem; width: 100%; max-width: calc(100% - .4rem); background: url(../assets/ui/dark/bar_fill_hp.png) repeat-x 0 0 / 12.8rem 100%; transition: width .25s; }
#h-status .bar.hp i { filter: brightness(1.25) saturate(1.15); }
#h-status .bar.mp i { filter: hue-rotate(222deg) saturate(1.25) brightness(1.3); }
#h-status .bar.ag { height: .6rem; } #h-status .bar.ag i { filter: hue-rotate(45deg) brightness(1.3); } #h-status .bar.ag span { display: none; }
#h-status .bar span { position: relative; z-index: 1; display: block; text-align: center; font: 700 max(9px, 1rem)/1.6rem var(--sans); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
#h-status.low .bar.hp { animation: orb-low 1s ease-in-out infinite; }
#belt { position: absolute; z-index: 3; right: calc(10.3rem + var(--sar)); bottom: calc(7.4rem + var(--sab)); display: flex; gap: .6rem; pointer-events: auto; }
#belt .pot { position: relative; width: 4rem; height: 4.6rem; display: grid; place-items: center; touch-action: none; background: url(../assets/ui/dark/slot_flask.png) center / 100% 100% no-repeat; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.55)); }
#belt .pot.empty { background-image: url(../assets/ui/dark/slot_flask_empty.png); }
#belt .pot img.hi { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.7)); }
#belt .pot.empty .hi { display: none; }
#belt .pot i { position: absolute; right: .3rem; bottom: .2rem; font: 700 max(9px, 1.1rem)/1 var(--sans); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#belt .pot.down { filter: brightness(1.5); }
#joyzone { position: absolute; left: 0; bottom: 0; width: 34vw; height: 62vh; pointer-events: auto; }
#joy { position: absolute; left: calc(2.4rem + var(--sal)); bottom: calc(2rem + var(--sab)); width: 12.4rem; height: 12.4rem; display: grid; place-items: center; background: url(../assets/ui/dark/joy_ring.png) center / 100% 100% no-repeat; }
#joy.float { transition: none; }
#joy .knob { width: 5.2rem; height: 5.2rem; pointer-events: none; background: url(../assets/ui/dark/joy_knob.png) center / 100% 100% no-repeat; filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.6)); }
#hotbar { position: absolute; z-index: 3; width: 0; height: 0; right: calc(5.4rem + var(--sar)); bottom: calc(5.4rem + var(--sab)); }
#hotbar .hb-row { display: contents; }
#hotbar button { position: absolute; left: var(--x, 0); top: var(--y, 0); display: grid; place-items: center; touch-action: none; transform: translate(-50%, -50%); transition: filter .1s; background: center / 100% 100% no-repeat; filter: drop-shadow(0 .2rem .4rem rgba(0,0,0,.55)); }
#hotbar button.down { filter: brightness(1.35); }
#b-atk { width: 8.6rem; height: 8.6rem; background-image: url(../assets/ui/dark/round_attack.png) !important; }
#b-atk img.hi { width: 50%; height: 50%; object-fit: contain; }
#b-atk span { position: absolute; left: 50%; bottom: -.4rem; transform: translateX(-50%); display: none; padding: 0 .7rem; font: 700 max(9px, 1rem)/1.5 var(--sans); color: #10240a; background: linear-gradient(#b6f08a, #58a83a); border: 1px solid #000; }
#b-atk.auto span { display: block; }
#b-atk.auto { filter: drop-shadow(0 0 .8rem #7fe08a); }
#hotbar .skill { width: 5.6rem; height: 5.6rem; font: 700 max(12px, 1.5rem)/1 var(--sans) !important; color: var(--ink3) !important; }
#hotbar .skill::after { content: ''; position: absolute; inset: 0; background: url(../assets/ui/dark/slot_skill.png) center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
#hotbar .skill.empty { background-image: url(../assets/ui/dark/slot_skill_empty.png) !important; }
#hotbar .skill.empty::after { display: none; }
#hotbar .skill .gi { position: absolute; inset: 5%; clip-path: var(--cut); overflow: hidden; background: var(--ob0); z-index: 1; pointer-events: none; }
#hotbar .skill .gi img, #hotbar .skill .gi svg { width: 100%; height: 100%; object-fit: cover; }
#hotbar .skill .cd { position: absolute; inset: 5%; clip-path: var(--cut); pointer-events: none; z-index: 2; }
#hotbar .skill .nm { position: relative; z-index: 2; pointer-events: none; }
#hotbar .skill.has .nm { display: none; }
#hotbar .skill.off .gi { filter: grayscale(1) brightness(.6); }
#hotbar .skill.nomp .gi { filter: saturate(.25) brightness(.55) sepia(.3) hue-rotate(190deg); }
#hotbar #sk-1 { --x: -26.3rem; --y: 1.6rem; } #hotbar #sk-2 { --x: -20.1rem; --y: 1.6rem; } #hotbar #sk-3 { --x: -13.9rem; --y: 1.6rem; } #hotbar #sk-4 { --x: -7.7rem; --y: 1.6rem; }
#hotbar #b-aim, #hotbar #b-page, #hotbar #b-portal, #hotbar #b-bot { width: 4.4rem; height: 4.4rem; background-image: url(../assets/ui/dark/round_small.png); }
#hotbar #b-page { --x: -25.5rem; --y: -4.3rem; } #hotbar #b-aim { --x: -2.7rem; --y: -7.1rem; } #hotbar #b-portal { --x: 2.1rem; --y: -7.1rem; }
#hotbar .mini img.hi { width: 56%; height: 56%; object-fit: contain; position: relative; z-index: 1; }
#hotbar #b-portal .cd { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; z-index: 2; }
#hotbar #b-portal.off { filter: grayscale(.9) brightness(.6); }
#hotbar #b-bot { --x: -.3rem; --y: -11.9rem; }
#b-bot b { font: 700 max(8px, .95rem)/1 var(--sans); letter-spacing: .04em; color: var(--ink2); }
#hotbar #b-bot.on { filter: drop-shadow(0 0 .8rem var(--teal)) brightness(1.2); }
#b-bot.on b { color: var(--teal); }
#b-page b { font: 700 max(11px, 1.4rem)/1 var(--serif); color: var(--brass-hi); margin-top: -.6rem; }
#b-page small { position: absolute; bottom: .7rem; font: 600 max(8px, .9rem)/1 var(--sans); color: var(--ink3); }
#h-menu { position: absolute; z-index: 4; top: calc(.8rem + var(--sat)); right: calc(9.8rem + var(--sar)); display: flex; gap: .4rem; }
#hud #h-menu > button { position: relative; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; background: url(../assets/ui/dark/btn_oct.png) center / 100% 100% no-repeat; }
#hud #h-menu > button:active, #hud #h-menu:not(.closed) > #m-toggle { background-image: url(../assets/ui/dark/btn_oct_down.png); }
#h-menu > button img.hi { width: 60%; height: 60%; object-fit: contain; }
#h-menu .icons { position: absolute; right: 0; top: 5rem; min-width: 16rem; display: flex; flex-direction: column; gap: .2rem; padding: .3rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/tip.png) 16 fill / .8rem; background: rgba(9,8,6,.93); box-shadow: 0 .8rem 2rem rgba(0,0,0,.6); }
#h-menu.closed .icons { display: none; }
#hud #h-menu .icons button { display: flex; align-items: center; gap: 1rem; min-height: 4.2rem; padding: 0 1.2rem 0 .8rem; text-align: left; font: 600 max(12px, 1.4rem)/1 var(--sans); color: var(--ink); border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
#hud #h-menu .icons button:active, #hud #h-menu .icons button.on { border-image-source: url(../assets/ui/dark/row_on.png); color: var(--brass-hi); }
#h-menu .icons img.hi { width: 2.8rem; height: 2.8rem; object-fit: contain; }
body.touch #h-mapwrap { --mm: 7.8rem; top: calc(.8rem + var(--sat)); right: calc(.8rem + var(--sar)); }
body.touch #h-target { top: calc(.8rem + var(--sat)); width: 26rem; max-width: none; padding: .1rem .6rem .3rem; }
body.touch #tg-name { font-size: max(10px, 1.2rem); }
body.touch #h-target .tgbar { height: 1.8rem; margin-top: .1rem; }
body.touch #tg-el { position: absolute; right: 1.4rem; top: .5rem; margin: 0; font-size: max(9px, 1rem); }
body.touch.patch-pending #h-target { top: calc(var(--patch-h, 0px) + .6rem + var(--sat)); }
body.touch #chatbox { left: calc((100vw + var(--sal) - var(--sar) - 19.7rem) / 2); top: auto; bottom: calc(1rem + var(--sab)); transform: translateX(-50%); width: min(30rem, calc(100vw - var(--sal) - var(--sar) - 51.3rem)); min-width: 18rem; gap: .1rem; padding: 0; border-width: 0; border-image-source: none; background: linear-gradient(90deg, rgba(8,7,5,.55), rgba(8,7,5,.3) 70%, transparent) no-repeat; }
body.touch #chatbox.moved { transform: none; bottom: auto; }
body.touch #chatbox.typing { border-width: .8rem; border-image-source: url(../assets/ui/dark/glass.png); background: none; padding: .2rem; width: 34rem; max-width: calc(100vw - var(--sal) - var(--sar) - 1.6rem); z-index: 5; }
body.touch #chat-grip { flex: 0 0 2.8rem; height: 2.6rem; font-size: 1.7rem; color: var(--brass-hi); }
body.touch #chat-log { height: 4.6rem; padding: 0 .4rem; font-size: max(10px, 1.1rem); line-height: 1.45; scrollbar-width: none; }
body.touch #chat-log::-webkit-scrollbar { display: none; }
body.touch #hud #chat-tabs button[data-ch] { height: 2.2rem; font-size: max(9px, 1rem); }
body.touch #hud #b-chat { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; }
body.touch #chat-row input { height: 3.6rem; }
body.touch #h-buffs { top: calc(8.4rem + var(--sat)); left: calc(.8rem + var(--sal)); max-width: 27rem; font-size: max(10px, 1.1rem); }
body.touch #hud .expbar span { left: calc(.8rem + var(--sal)); bottom: .6rem; font-size: max(9px, 1rem); }
body.touch #toast { top: 26%; }
body.touch #minimap-box.big { width: min(82vh, 82vw); height: min(82vh, 82vw); }
body.touch .ob-panel, body.touch #skills, body.touch #jobs, body.touch #shop { 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 .win > header::before, body.touch .win > header::after { display: none; }
body.touch .ob-panel { padding-top: 4.6rem; }
body.touch .win { padding: 5.6rem 1.4rem 1.2rem; }
body.touch .ob-head, body.touch .win > header { height: 4.2rem; }
body.touch .ob-panel .x, body.touch .win .x { right: .6rem; top: .5rem; width: 3.6rem; height: 3.6rem; }
body.touch .ob-body { padding: 1rem 1.4rem 1.2rem; }
body.touch .bagwin { pointer-events: auto; background: rgba(0,0,0,.35); }
body.touch .ob-head { justify-content: flex-start; padding: 0 5rem 0 .8rem; }
body.touch .ob-head h2, body.touch .ob-head .orn { display: none; }
body.touch .ob-views { display: flex; gap: .4rem; }
body.touch .ob-views button { min-width: 7rem; height: 3.2rem; padding: 0 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; font: 600 max(11px, 1.3rem)/1 var(--sans); color: var(--ink3); white-space: nowrap; }
body.touch .ob-views button.on { border-image-source: url(../assets/ui/dark/tab_on.png); color: var(--brass-hi); }
body.touch .bagwin[data-view="bag"] .ob-char, body.touch .bagwin[data-view="char"] .ob-bag { display: none; }
body.touch .ob-bag .ob-body { position: relative; display: grid; grid-template-columns: 25.6rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'ring bar' 'ring grid'; gap: .8rem 1.6rem; }
body.touch .rg-ring { grid-area: ring; align-self: start; transform: scale(.66); transform-origin: 0 0; margin: 0 -13.2rem -10.1rem 0; }
body.touch .bag-bar { grid-area: bar; flex-direction: row-reverse; }
body.touch .bag-bar .bag-tabs { flex: none; gap: .4rem; }
body.touch .bag-bar .bag-tabs button { min-width: 6.2rem; min-height: 3.2rem; padding: 0 .8rem; font-size: max(11px, 1.25rem); }
body.touch .bag-bar .cb-h { font-size: 0; gap: 0; }
body.touch .bag-bar .cb-h .bag-count { font-size: max(10px, 1.15rem); overflow: hidden; text-overflow: ellipsis; }
body.touch .bag-gridwrap { grid-area: grid; min-width: 0; min-height: 0; container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
body.touch .bag-grid { --bc: 4.4rem; flex: none; align-self: flex-start; grid-template-columns: repeat(8, var(--bc)); grid-template-rows: repeat(8, var(--bc)); gap: .4rem; }
@supports (width: 1cqw) { body.touch .bag-grid { --bc: clamp(3rem, calc((100cqw - 3.6rem) / 8), 5rem); } }
body.touch .bag-foot { display: contents; }
body.touch .bag-zen { grid-column: 1; grid-row: 2; align-self: end; }
body.touch .bag-detail { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 3.8rem; display: block; text-align: center; }
body.touch .bag-detail .muted { line-height: 1.5; }
body.touch .bagwin.has-sel .bag-detail { grid-column: 1 / -1; grid-row: 1 / -1; align-self: stretch; position: absolute; z-index: 4; left: -.6rem; top: -.5rem; bottom: -.3rem; width: 27rem; margin: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .6rem; padding: .8rem; text-align: left;
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, .6rem 0 1.6rem rgba(0,0,0,.6); }
body.touch .bag-detail .d-tip { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
body.touch .bag-detail .itip { width: auto; box-shadow: none; font-size: max(11px, 1.25rem); }
body.touch .bag-detail .itip .it-head { min-height: 4rem; padding: .4rem .8rem; }
body.touch .bag-detail .itip .it-head b { font-size: max(13px, 1.5rem); }
body.touch .bag-detail .itip .it-body { padding: .6rem .8rem .8rem; }
body.touch .bag-detail .d-act { flex: none; flex-wrap: wrap; }
body.touch .bag-detail .d-act button { flex: 1 1 40%; min-height: 4.2rem; padding: 0 .6rem; }
body.touch .bag-detail .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 .ob-char .ob-body { display: grid; grid-template-columns: 24rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1rem 1.8rem; }
body.touch .ob-char .rg-who { grid-column: 1; grid-row: 1; }
body.touch .ob-char .rg-chips { grid-column: 1; grid-row: 2; flex-direction: column; align-self: start; gap: .5rem; }
body.touch .ob-char .rg-chips button { min-height: 4rem; }
body.touch .ob-char .cb-pane { grid-column: 2; grid-row: 1 / 3; touch-action: pan-y; }
body.touch .st-row { min-height: 6.6rem; padding: .6rem 1rem; }
body.touch .st-plus, body.touch .st-pm .st-minus { width: 3.4rem; height: 3.4rem; }
body.touch.shopping #shop { right: calc(50% + .2rem); }
body.touch.shopping .ob-bag { left: calc(50% + .2rem); }
body.touch.shopping .ob-views { display: none; }
body.touch.shopping .ob-head { justify-content: center; padding: 0 5rem; }
body.touch.shopping .ob-head h2 { display: block; }
body.touch.shopping .rg-ring, body.touch.shopping .bag-detail .d-tip, body.touch.shopping .bag-detail .muted, body.touch.shopping .d-act .d-close { display: none; }
body.touch.shopping .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' 'zen detail'; }
body.touch.shopping .bag-zen { grid-area: zen; align-self: center; }
body.touch.shopping .bag-detail, body.touch.shopping .bagwin.has-sel .bag-detail { position: static; grid-area: detail; width: auto; margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: flex-end; background: none; border-image: none; box-shadow: none; min-height: 4rem; }
body.touch.shopping .bag-detail .d-act button { flex: none; min-width: 8rem; min-height: 4rem; }
body.touch.shopping .bag-bar .cb-h .bag-count { display: none; }
body.touch #shop .shop-row { min-height: 5.2rem; grid-template-columns: 4.2rem minmax(0, 1fr) auto; }
body.touch #shop .shop-art { width: 4.2rem; height: 4.2rem; }
body.touch #shop footer small { display: none; }
body.touch #settings, body.touch #travel, body.touch #skillpick, body.touch #botwin { left: 50%; right: auto; top: calc(.8rem + var(--sat)); bottom: auto; width: 48rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem - var(--sat) - var(--sab)); transform: translateX(-50%); }
body.touch .salon-colors { grid-template-columns: repeat(5, 5rem); gap: 1.4rem; }
body.touch .salon-colors .swatch { width: 5rem; height: 5rem; }
body.touch .srow2 { min-height: 4.4rem; }
body.touch .list, body.touch .set, body.touch .sw-slots, body.touch .sw-detail, body.touch .sw-bag, body.touch #shop .shopgrid, body.touch .jw-cards { touch-action: pan-y; }
body.touch #skills { gap: .6rem; }
body.touch .sw-body { gap: 1rem; }
body.touch .sw-colhead { display: none; }
body.touch .sw-slot { grid-template-columns: 2.4rem 3.8rem minmax(0, 1fr) auto 5rem; gap: .7rem; min-height: 5rem; padding: .3rem .9rem; }
body.touch .sw-slot .gi { width: 3.8rem; height: 3.8rem; }
body.touch .sw-socks i { width: 2rem; height: 2rem; }
body.touch .sw-detail { padding: 1rem 1.2rem; }
body.touch .sw-bag { max-height: 4.6rem; }
body.touch .sw-bag h4 { display: none; }
body.touch .sw-chips { flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; padding-bottom: .2rem; }
body.touch .sw-chip { flex: none; }
body.touch .jw-cards { grid-template-columns: repeat(5, 19rem); touch-action: pan-x pan-y; }
#chat-log .ann { color: #ffd98a; font-weight: 700; }
#pc-hud .ph-tab { left: 20.8rem; width: 46.6rem; }
#pc-hud .pc-menu svg.hi, #h-menu > button svg.hi { width: 62%; height: 62%; }
#h-menu .icons svg.hi { width: 2.8rem; height: 2.8rem; }
#refine { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78rem; height: 60rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; }
.rf { flex: 1; min-height: 0; display: grid; grid-template-columns: 30.4rem minmax(0, 1fr); gap: 1.6rem; }
.rf-list { display: flex; flex-direction: column; min-height: 0; gap: .6rem; }
.rf-list h5, .rf-rule b { font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .12em; color: var(--brass); }
.rf-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(4, 6.4rem); grid-auto-rows: 6.4rem; gap: .6rem; align-content: start; justify-content: center; padding: 1rem .6rem;
border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.rf-grid .muted { grid-column: 1 / -1; text-align: center; padding: 2rem 0; }
.rf-grid .cell i.worn { position: absolute; left: 0; right: 0; bottom: .1rem; text-align: center; font: 600 max(9px, .95rem)/1.2 var(--sans); font-style: normal; color: var(--teal); text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 1; }
.rf-anvil { position: relative; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.4rem 1.6rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.win button.rf-slot { flex: none; width: 10.4rem; height: 10.4rem; min-height: 0; padding: 0; border: 0 solid transparent; border-image: url(../assets/ui/dark/cell.png) 16 fill / 1rem; position: relative; display: grid; place-items: center; color: var(--ink3); }
.win button.rf-slot.r1 { border-image-source: url(../assets/ui/dark/cell_magic.png); } .win button.rf-slot.r2 { border-image-source: url(../assets/ui/dark/cell_rare.png); } .win button.rf-slot.r3 { border-image-source: url(../assets/ui/dark/cell_unique.png); }
.win button.rf-slot:hover { border-image-source: url(../assets/ui/dark/cell.png); }
.rf-slot.empty span { font: 600 max(11px, 1.25rem)/1.3 var(--sans); color: var(--ink3); white-space: normal; }
.rf-slot.empty { box-shadow: inset 0 0 0 .2rem rgba(140,111,63,.25); animation: rf-wait 2.2s ease-in-out infinite; }
.rf-slot img.item-art { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.7)); }
.rf-slot svg { width: 60%; height: 60%; }
.rf-slot i.lv { position: absolute; left: .7rem; top: .3rem; font: 700 max(12px, 1.6rem)/1.2 var(--sans); font-style: normal; color: var(--r2); text-shadow: 0 1px 2px #000, 0 0 4px #000; z-index: 1; }
.rf-slot i.cnt { display: none; }
.rf-slot.hit { animation: rf-hit .32s ease-out; }
.rf-slot.ok { animation: rf-ok .9s ease-out; }
.rf-slot.fail { animation: rf-fail .6s ease-out; }
@keyframes rf-wait { 50% { box-shadow: inset 0 0 0 .2rem rgba(216,184,113,.55), 0 0 1.4rem rgba(216,184,113,.2); } }
@keyframes rf-hit { 0% { transform: scale(1); } 35% { transform: scale(.9) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes rf-ok { 0% { box-shadow: 0 0 0 0 rgba(242,212,99,.9); filter: brightness(2.2); transform: scale(1.12); } 100% { box-shadow: 0 0 3rem 1.6rem rgba(242,212,99,0); filter: none; transform: none; } }
@keyframes rf-fail { 0% { filter: brightness(.5) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(0); } 20% { transform: translateX(-.7rem); } 40% { transform: translateX(.6rem); } 60% { transform: translateX(-.4rem); } 80% { transform: translateX(.2rem); } 100% { filter: none; transform: none; } }
.rf-name { font: 600 max(13px, 1.7rem)/1.25 var(--serif); text-align: center; text-shadow: 0 .2rem 0 #000; }
.rf-note { font: 700 max(13px, 1.6rem)/1.2 var(--sans); padding: .2rem 1.4rem; }
.rf-note.ok { color: var(--r2); text-shadow: 0 0 1.2rem rgba(242,212,99,.6); } .rf-note.fail { color: #ff8a78; }
.rf-lv { display: flex; align-items: baseline; gap: 1.2rem; font: 700 max(18px, 2.8rem)/1 var(--serif); color: var(--ink); }
.rf-lv i, .rf-stats i { font-style: normal; font-size: .7em; color: var(--brass); }
.rf-lv b.up, .rf-stats b.up { color: #8fe08a; }
.rf-stats { align-self: stretch; display: flex; flex-direction: column; gap: .2rem; }
.rf-stats > div { display: flex; align-items: baseline; justify-content: center; gap: .8rem; font-size: max(12px, 1.4rem); }
.rf-stats span { color: var(--ink2); margin-right: .4rem; } .rf-stats b { font-variant-numeric: tabular-nums; }
.rf-rate { align-self: stretch; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .3rem 1rem; }
.rf-rate span { color: var(--ink2); } .rf-rate > b { font: 700 max(15px, 2rem)/1 var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.rf-rate.safe > b { color: #8fe08a; } .rf-rate.risk > b { color: #ff8a78; }
.rf-rate .bar { grid-column: 1 / -1; height: 1rem; background: #080706; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.rf-rate .bar i { display: block; height: 100%; background: linear-gradient(#f2d463, #b98a2a); }
.rf-rate.safe .bar i { background: linear-gradient(#a8f0a0, #3f9a4a); } .rf-rate.risk .bar i { background: linear-gradient(#ff9a88, #b03a26); }
.rf-rate small { grid-column: 1 / -1; font-size: max(10px, 1.15rem); color: var(--ink3); }
.rf-cost { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.rf-cost > div { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .5rem 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.rf-cost span { color: var(--ink2); font-size: max(11px, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rf-cost b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-cost .bad b { color: #ff8a78; }
.rf-acts { align-self: stretch; display: flex; gap: .8rem; margin-top: auto; }
.rf-acts .rf-go { flex: 1.4; min-height: 4.4rem; font-size: max(14px, 1.7rem); letter-spacing: .08em; }
.rf-acts .ghost { flex: 1; }
.rf-hint { max-width: 34rem; text-align: center; color: var(--ink2); font-size: max(12px, 1.35rem); line-height: 1.6; }
.rf-rule { align-self: stretch; margin-top: auto; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem; border-top: 1px solid rgba(140,111,63,.3); }
.rf-rule span { color: var(--ink3); font-size: max(11px, 1.25rem); line-height: 1.5; }
#quests { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; }
.q-hint { display: flex; justify-content: space-between; gap: 1.6rem; margin: 0 .4rem .8rem !important; font-size: max(11px, 1.25rem); color: var(--ink3); }
.q-hint b { color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.q-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7rem; padding-right: .2rem; }
.q-card { flex: none; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 15rem 13.6rem; align-items: center; gap: 1.2rem; min-height: 8rem; padding: .8rem 1.4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.q-card.done { border-image-source: url(../assets/ui/dark/row_on.png); }
.q-card.got { opacity: .55; }
.q-ic { width: 5.2rem; height: 5.2rem; display: grid; place-items: center; color: var(--brass-hi); background: url(../assets/ui/dark/btn_oct.png) center / 100% 100% no-repeat; }
.q-ic svg { width: 56%; height: 56%; }
.q-ic.k-boss { color: #ff9a88; } .q-ic.k-zen { color: var(--r2); } .q-ic.k-magic { color: var(--r1); } .q-ic.k-bonus { color: var(--r2); } .q-ic.k-refine { color: #9fd0f0; }
.q-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.q-main b { font: 600 max(13px, 1.6rem)/1.25 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-main small { font-size: max(11px, 1.2rem); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-bar { position: relative; height: 1.7rem; margin-top: .2rem; background: #080706; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.q-bar i { display: block; height: 100%; background: linear-gradient(#58c8b6, #23786c); }
.q-card.bonus .q-bar i { background: linear-gradient(#f2d463, #b98a2a); }
.q-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 max(10px, 1.15rem)/1 var(--sans); color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.q-rw { display: flex; flex-direction: column; gap: .1rem; font-size: max(11px, 1.2rem); color: var(--ink2); }
.q-rw b { color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.q-card button { min-width: 0; }
.q-state { justify-self: center; font: 600 max(12px, 1.4rem) var(--serif); font-style: normal; color: var(--teal); }
#hud #qtrack { position: absolute; z-index: 2; top: calc(31.2rem + var(--sat)); right: calc(2rem + var(--sar)); width: 23.6rem; box-sizing: border-box; display: flex; flex-direction: column; gap: .15rem; padding: .5rem .9rem .6rem; text-align: left; pointer-events: auto; cursor: pointer;
border: 0 solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; color: var(--ink2); font: 500 max(10px, 1.15rem)/1.45 var(--sans); }
#hud #qtrack.hidden { display: none; }
#qtrack > b { display: flex; justify-content: space-between; font: 600 max(10px, 1.15rem)/1.5 var(--serif); letter-spacing: .08em; color: var(--brass-hi); }
#qtrack > b em { font-style: normal; color: var(--ink2); }
#qtrack.ready > b em { color: var(--r2); }
#qtrack span { display: flex; justify-content: space-between; gap: .8rem; }
#qtrack span i { font-style: normal; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#qtrack span u { flex: none; text-decoration: none; font-variant-numeric: tabular-nums; color: var(--ink); }
#qtrack span.done i, #qtrack span.done u { color: var(--r2); }
#qtrack span.got { opacity: .5; }
#qtrack.ready { animation: q-ready 2s ease-in-out infinite; }
@keyframes q-ready { 50% { filter: brightness(1.35); } }
body.touch #hud #qtrack { top: calc(9.4rem + var(--sat)); right: calc(.8rem + var(--sar)); width: auto; min-width: 7.8rem; padding: .2rem .7rem; }
body.touch #qtrack span { display: none; }
body.touch #qtrack > b { gap: .6rem; font-size: max(9px, 1rem); letter-spacing: 0; }
body.touch #refine, body.touch #quests { 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 .rf { grid-template-columns: 23rem minmax(0, 1fr); gap: 1rem; }
body.touch .rf-grid { grid-template-columns: repeat(4, 4.8rem); grid-auto-rows: 4.8rem; gap: .4rem; padding: .6rem .4rem; }
body.touch .rf-list h5 { display: none; }
body.touch .rf-anvil { display: grid; grid-template-columns: 9rem minmax(0, 1fr); grid-auto-rows: min-content; align-items: center; justify-items: stretch; gap: .4rem 1.2rem; padding: .8rem 1rem; }
body.touch .win button.rf-slot { grid-column: 1; grid-row: 1 / span 3; justify-self: center; width: 8rem; height: 8rem; }
body.touch .rf-name { grid-column: 2; text-align: left; font-size: max(12px, 1.5rem); }
body.touch .rf-lv { grid-column: 2; font-size: max(15px, 2.2rem); }
body.touch .rf-note { grid-column: 2; padding: 0; text-align: left; font-size: max(12px, 1.4rem); }
body.touch .rf-stats { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .2rem 1.6rem; }
body.touch .rf-rate, body.touch .rf-cost, body.touch .rf-acts, body.touch .rf-rule, body.touch .rf-hint { grid-column: 1 / -1; }
body.touch .rf-hint { grid-column: 2; text-align: left; font-size: max(11px, 1.25rem); }
body.touch .rf-rule { margin-top: 0; padding: .6rem .4rem 0; }
body.touch .rf-rule span { font-size: max(10px, 1.1rem); line-height: 1.4; }
body.touch #refine footer { margin-top: .5rem; }
body.touch .q-card { grid-template-columns: 4.2rem minmax(0, 1fr) 12.5rem 11rem; gap: .9rem; min-height: 6.2rem; padding: .4rem 1rem; }
body.touch .q-ic { width: 4.2rem; height: 4.2rem; }
body.touch .q-main b { font-size: max(12px, 1.4rem); } body.touch .q-bar { height: 1.4rem; }
body.touch .q-rw { font-size: max(10px, 1.05rem); line-height: 1.3; }
body.touch .q-hint { margin-bottom: .5rem !important; }
.q-hint i { font-style: normal; }
#guild { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88rem; height: 60rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; }
.g-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 32rem; gap: 1.6rem; }
.g-col, .g-side { min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.g-wrap h5 { flex: none; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.g-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .5rem; padding: .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.g-list .muted { text-align: center; padding: 2.4rem 0; }
.g-row { flex: none; display: flex; align-items: center; gap: 1.2rem; min-height: 5.6rem; padding: .5rem 1.2rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.g-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-info b { font: 600 max(13px, 1.6rem)/1.3 var(--serif); color: var(--brass-hi); }
.g-info small { font-size: max(10px, 1.15rem); color: var(--ink2); } .g-info small i { font-style: normal; color: var(--ink); }
.g-info em { font-style: normal; font-size: max(10px, 1.15rem); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row button { flex: none; min-width: 10rem; }
.g-side { padding: 1.2rem 1.4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; overflow-y: auto; }
.g-side input, .g-notice input { box-sizing: border-box; width: 100%; height: 4rem; min-height: 30px; padding: 0 1.2rem; 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); outline: none; user-select: text; -webkit-user-select: text; }
.g-side input:disabled { opacity: .45; }
.g-cost { display: flex; justify-content: space-between; color: var(--ink2); } .g-cost b { color: var(--r2); font-variant-numeric: tabular-nums; }
.g-side > button[type=submit] { min-height: 4.4rem; font-size: max(13px, 1.6rem); }
.g-side .muted { line-height: 1.5; }
.g-notice { display: flex; gap: .6rem; } .g-notice input { flex: 1; min-width: 0; } .g-notice button { flex: none; }
.g-note { padding: .8rem 1rem; color: var(--ink); line-height: 1.5; border-left: .3rem solid var(--brass-lo); background: rgba(0,0,0,.25); user-select: text; }
.g-apps { display: flex; flex-direction: column; gap: .4rem; max-height: 17rem; overflow-y: auto; }
.g-app { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; gap: 0 .6rem; padding: .5rem .9rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.g-app b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-app small { grid-row: 2; color: var(--ink3); font-size: max(10px, 1.1rem); }
.g-app button { grid-row: 1 / span 2; min-height: 3.2rem !important; padding: 0 1rem !important; }
.g-tip { margin-top: auto !important; font-size: max(10px, 1.15rem) !important; }
.g-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid rgba(140,111,63,.3); color: var(--ink2); font-size: max(11px, 1.25rem); }
.g-foot b { color: var(--brass-hi); }
.g-mem { flex: none; position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 .9rem; padding: .5rem 1.2rem; cursor: pointer; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.g-mem.sel, .g-mem:hover { border-image-source: url(../assets/ui/dark/row_on.png); }
.g-mem .dot { grid-row: 1 / span 2; width: 1rem; height: 1rem; border-radius: 50%; background: #4a443a; }
.g-mem.on .dot { background: #6fe08a; box-shadow: 0 0 .8rem rgba(111,224,138,.7); }
.g-mem b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-mem small { grid-column: 2; grid-row: 2; color: var(--ink3); font-size: max(10px, 1.1rem); }
.g-mem em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font: 600 max(11px, 1.25rem) var(--serif); color: var(--ink2); }
.g-mem.r2 em { color: var(--r2); } .g-mem.r1 em { color: var(--r1); }
.g-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; }
.g-acts button { flex: 1; min-height: 3.4rem !important; padding: 0 .8rem !important; }
.bug-form { gap: .6rem; } .bug-form input { flex: 1; min-width: 0; height: 3.8rem; min-height: 30px; padding: 0 1.2rem; color: var(--ink); background: none; border: 0 solid transparent; border-image: url(../assets/ui/dark/input.png) 16 fill / .8rem; outline: none; user-select: text; -webkit-user-select: text; }
.bug-form button { flex: none; }
body.touch #guild { 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 .g-wrap { grid-template-columns: minmax(0, 1fr) 27rem; gap: 1rem; }
body.touch .g-side { padding: .8rem 1rem; gap: .5rem; }
body.touch .g-list { padding: .5rem; }
body.touch .g-row { min-height: 4.8rem; }
body.touch .g-apps { max-height: 9rem; }
.g-foot i { font-style: normal; }
.g-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.g-head h5 { flex: 1 1 auto; min-width: 0; } .g-head h5 i { font-style: normal; color: var(--ink); letter-spacing: 0; }
.g-find, .g-inv { flex: none; display: flex; gap: .6rem; }
.g-find { flex: 1 1 26rem; min-width: 0; max-width: 40rem; }
.g-find input, .g-inv input { flex: 1; min-width: 0; box-sizing: border-box; height: 3.8rem; min-height: 30px; padding: 0 1.2rem; 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); outline: none; user-select: text; -webkit-user-select: text; }
.g-find input::-webkit-search-decoration { -webkit-appearance: none; }
.g-find input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.5); cursor: pointer; }
.g-inv input:disabled { opacity: .45; }
.g-find button, .g-inv button { flex: none; min-width: 8rem; }
.g-head .g-browse { flex: none; min-height: 3.2rem !important; padding: 0 1.2rem !important; }
.g-list .g-more { flex: none; align-self: center; min-width: 16rem; margin: .4rem 0; }
.g-row em.g-mine { flex: none; font-style: normal; font: 600 max(11px, 1.2rem) var(--serif); color: var(--brass-hi); white-space: nowrap; }
.g-wrap.browse .g-side > button { min-height: 4rem; }
body.touch .g-find input, body.touch .g-inv input { height: 3.4rem; }
#market { left: 2rem; top: 1.4rem; width: 62rem; height: 63.6rem; max-height: calc(100vh - 2.8rem); max-width: calc(100vw - 4rem); z-index: 7; }
#market.find { width: 88rem; }
.mk-tabs { flex: none; margin-bottom: .8rem; } .mk-tabs button i { font-style: normal; color: var(--ink3); margin-left: .4rem; font-variant-numeric: tabular-nums; }
.mk-tabs button:disabled { opacity: .4; cursor: default; }
.mk-filter { flex: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.mk-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.win .mk-cats button { min-height: 3.2rem; padding: 0 1rem; border-width: .8rem; font-weight: 600; color: var(--ink2); }
.win .mk-cats button.on { border-image-source: url(../assets/ui/dark/btn_down.png); color: var(--brass-hi); }
.mk-search { display: flex; gap: .6rem; }
.mk-search input, .mk-search select, .mk-ask input { box-sizing: border-box; height: 3.8rem; min-height: 30px; padding: 0 1.1rem; 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); outline: none; }
.mk-search input, .mk-ask input { flex: 1; min-width: 0; user-select: text; -webkit-user-select: text; }
.mk-search select { appearance: none; -webkit-appearance: none; max-width: 16rem; font-size: max(12px, 1.3rem); }
.mk-search select option { background: #15120e; color: var(--ink); }
.mk-search button { flex: none; }
.mk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 36.4rem; gap: 1rem; }
.mk-body.one { grid-template-columns: minmax(0, 1fr); }
.mk-list { 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; }
.mk-list .muted, .mk-detail .muted { text-align: center; padding: 2.4rem 1rem; line-height: 1.6; }
.win .row.mk-row { min-height: 5.4rem; padding: .3rem 1rem .3rem .5rem; gap: .9rem; justify-content: flex-start; }
.win .row.mk-row.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
.mk-row .cell, .mk-ask .cell { flex: none; width: 4.6rem; height: 4.6rem; pointer-events: none; }
.mk-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.mk-nm b { font: 600 max(12px, 1.4rem)/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-nm small { font: 400 max(10px, 1.15rem)/1.3 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-nm small i { font-style: normal; color: var(--ink2); } .mk-nm small u { text-decoration: none; color: var(--teal); }
.mk-row em { flex: none; font: 700 max(13px, 1.5rem)/1 var(--serif); font-style: normal; color: var(--r2); font-variant-numeric: tabular-nums; }
.mk-row em small { margin-left: .4rem; font: 400 max(9px, 1rem) var(--sans); color: var(--ink3); }
.mk-row em.bad { color: #c98a7a; }
.mk-detail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: .7rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.mk-detail .itip { width: 100%; max-width: 34.4rem; flex: none; }
.mk-buy { align-self: stretch; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; }
.mk-buy i { font-style: normal; color: var(--ink2); } .mk-buy b { font: 700 max(14px, 1.7rem) var(--serif); color: var(--r2); }
.mk-buy button { min-width: 13rem; min-height: 4.2rem; font-size: max(13px, 1.6rem); }
.mk-page { display: flex; align-items: center; gap: .8rem; } .mk-page i { font-style: normal; }
.win .mk-page button { min-height: 3rem; padding: 0 .9rem; border-width: .8rem; }
.mk-box { flex: none; display: flex; gap: .8rem; margin-bottom: .8rem; }
.mk-box > div { flex: 1; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.mk-box > div:last-child { flex: 0 0 auto; }
.mk-box span { color: var(--ink2); } .mk-box b { flex: 1; font: 700 max(13px, 1.6rem) var(--serif); color: var(--r2); font-variant-numeric: tabular-nums; }
.mk-box b.cash { color: #8fe0ff; }
.mk-ask { flex: none; display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; padding: .6rem .9rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row_on.png) 16 fill / .8rem; }
.mk-ask input { flex: 0 1 14rem; text-align: right; font-variant-numeric: tabular-nums; }
.win .row.mk-my { cursor: default; } .mk-my button { flex: none; min-height: 3.4rem !important; padding: 0 1rem !important; }
.mk-hint { flex: none; margin-top: .7rem !important; font-size: max(10px, 1.15rem); line-height: 1.5; color: var(--ink3); }
.inv-act .to-market { flex: none; }
body.touch #market { 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; }
body.touch.mk-mine #market { right: calc(50% + .2rem); }
body.touch .mk-body { grid-template-columns: minmax(0, 1fr) 30rem; gap: .6rem; }
body.touch .mk-body.one { grid-template-columns: minmax(0, 1fr); }
body.touch .mk-filter { gap: .4rem; margin-bottom: .5rem; } body.touch .mk-tabs { margin-bottom: .5rem; }
body.touch .mk-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body.touch .win .mk-cats button { flex: none; }
body.touch .mk-search select { max-width: 12rem; }
body.touch .win .row.mk-row { min-height: 4.6rem; } body.touch .mk-row .cell, body.touch .mk-ask .cell { width: 3.8rem; height: 3.8rem; }
body.touch .mk-detail .itip { font-size: max(10px, 1.15rem); }
body.touch.mk-mine .mk-box { flex-direction: column; gap: .3rem; margin-bottom: .4rem; } body.touch.mk-mine .mk-box > div { padding: .2rem 1rem; }
body.touch.mk-mine .mk-hint { display: none; }
body.touch.mk-mine .mk-ask { flex-wrap: wrap; } body.touch.mk-mine .mk-ask input { flex: 1 1 8rem; }
body.touch.mk-mine .mk-my button { padding: 0 .6rem !important; }
.win .mk-tabs button { min-height: 3.6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem !important; color: var(--ink3) !important; font-weight: 600; }
.win .mk-tabs button.on { border-image-source: url(../assets/ui/dark/tab_on.png) !important; color: var(--brass-hi) !important; }
.win .mk-cats button.on { border-image-source: url(../assets/ui/dark/btn_down.png) !important; color: var(--brass-hi) !important; box-shadow: inset 0 0 0 1px rgba(216,184,113,.5); }
.mk-buy { position: sticky; bottom: -.7rem; margin-bottom: -.7rem; padding: .6rem .2rem .7rem; background: linear-gradient(rgba(13,11,9,0), #0d0b09 30%); z-index: 1; }
body.touch .mk-buy button { min-width: 9rem; min-height: 3.8rem; }
body.touch #market footer { margin-top: .4rem; }