#skills { --bad: #ff6a58; --ok: #8fd88a; --soon: #e8c860; top: 2.4rem; width: 152rem; height: 88rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 18.5rem); gap: 0; }
#skills u { text-decoration: none; color: var(--ink3); }
#skills .bad { color: var(--bad); }
#skills .row small { white-space: normal; }
#skills .row b { overflow: visible; text-overflow: clip; }
#skills .muted { margin: .4rem 0; line-height: 1.5; }
#skills .gi svg { width: 78%; height: 78%; }
#skills .gi img.skic { width: 100%; height: 100%; }
.gw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 40rem minmax(0, 1fr) 38rem; grid-template-rows: minmax(0, 1fr); gap: 1.4rem; }
#skills.picking .gw-body { visibility: hidden; }
.gw-left { min-height: 0; display: flex; flex-direction: column; gap: .8rem; }
.gw-slots, .gw-detail, .gw-bag, .gw-pk-list, .gw-pk-info { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--brass) #090807; }
.gw-spirit { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; min-height: 4rem; padding: 0 1.4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.gw-sp-l { font: 600 max(12px, 1.4rem)/1 var(--serif); letter-spacing: .08em; color: #9fe0ff; }
.gw-sp-n { font: 600 max(11px, 1.3rem)/1 var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; }
.gw-sp-n b { color: var(--ink); }
.gw-bar { display: block; height: 1rem; background: #000; box-shadow: inset 0 0 0 1px var(--brass-lo); }
.gw-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #2a7fb0, #8fe6ff); box-shadow: 0 0 .6rem rgba(120, 210, 255, .5); transition: width .25s; }
.gw-ic { position: relative; flex: none; display: block; width: 5.2rem; height: 5.2rem; }
.gw-ic .gi { position: absolute; inset: 6%; clip-path: var(--cut); background: var(--ob0); }
.gw-ic::after { content: ''; position: absolute; inset: 0; background: url(../assets/ui/dark/slot_skill.png) center / 100% 100% no-repeat; pointer-events: none; }
.gw-ic.e::after { background-image: url(../assets/ui/dark/slot_skill_empty.png); }
.gw-ic.big { width: 8.4rem; height: 8.4rem; }
.gw-ic.sm { width: 4.2rem; height: 4.2rem; }
.gw-lvb { display: none; }
#skills .gw-cell { flex: none; width: 4.2rem; height: 4.2rem; cursor: inherit; }
#skills .gw-cell::after { display: none; }
.gw-slots { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; padding-right: .2rem; }
#skills .gw-slot { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: 4.4rem 5.2rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; min-height: 6.6rem; max-height: 9rem; padding: .4rem 1.2rem .4rem .9rem; cursor: pointer; }
#skills .gw-slot.sel { border-image-source: url(../assets/ui/dark/row_on.png); }
#skills .gw-slot.sel::before { content: ''; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: .3rem; background: var(--gem, var(--brass-hi)); box-shadow: 0 0 .8rem var(--gem, var(--brass-hi)); }
#skills .sw-key { box-sizing: border-box; justify-self: center; width: auto; min-width: 2.8rem; height: 2.2rem; padding: 0 .2rem; background: none; border: .5rem solid transparent; border-image: url(../assets/ui/dark/key_plate.png) 10 fill / .5rem;
font: 700 max(9px, 1.1rem)/1 var(--sans); color: var(--ink); white-space: nowrap; }
.gw-sl-m { min-width: 0; display: grid; gap: .1rem; }
#skills .gw-sl-m > b { font: 600 max(13px, 1.6rem)/1.25 var(--serif); color: var(--brass-hi); }
#skills .gw-sl-m > small { font: 400 max(10px, 1.15rem)/1.4 var(--sans); color: var(--ink3); }
#skills .gw-sl-m > small b { font-weight: 700; color: var(--ink2); }
#skills .gw-sl-m > small.bad { color: var(--bad); font-weight: 600; }
.gw-slot.empty .gw-sl-m > b { color: var(--ink3) !important; font-weight: 500 !important; }
.gw-slot.empty .gw-sl-m > small { color: var(--brass) !important; }
.gw-pips { display: inline-flex; gap: .3rem; margin-left: .8rem; vertical-align: middle; }
.gw-pips i { width: .8rem; height: .8rem; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px var(--brass); }
.gw-pips i.f { background: var(--brass-hi); }
.gw-dps { display: grid; justify-items: end; line-height: 1.05; }
.gw-dps b { font: 700 max(14px, 1.9rem)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
#skills .gw-dps small { font: 600 max(9px, 1rem)/1.4 var(--sans); letter-spacing: .1em; color: var(--ink3); }
#skills .gw-slot.off { opacity: 1; cursor: pointer; }
.gw-slot.off .gw-ic .gi { filter: grayscale(.9) brightness(.55); }
#skills .gw-slot.off .gw-sl-m > b, .gw-slot.off .gw-dps b { color: var(--ink3); }
.gw-slot.off .gw-ic::before { content: '!'; position: absolute; z-index: 2; right: -.3rem; top: -.3rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #b3261c; box-shadow: 0 0 0 1px #000; color: #fff; font: 700 max(10px, 1.2rem)/1 var(--sans); }
.gw-slot.on .gw-ic { filter: drop-shadow(0 0 .5rem #9fe8ff) drop-shadow(0 0 .9rem #4ab8ff); }
#skills.holding .gw-slot.can { outline: 1px dashed var(--teal); outline-offset: -1px; animation: gw-can 1.1s ease-in-out infinite; }
#skills.holding .gw-slot.cant { opacity: .4; }
.gw-slot.flash { animation: gw-flash 1.3s ease-out; }
@keyframes gw-can { 50% { filter: brightness(1.3); } }
@keyframes gw-flash { 0% { filter: brightness(2.4) drop-shadow(0 0 1.2rem var(--brass-hi)); } 100% { filter: none; } }
#skills .gw-sw { position: relative; flex: none; display: block; width: 7.4rem; height: 3.4rem; border-image: none; border-radius: 1.7rem; background: #0a0908; box-shadow: inset 0 0 0 1px var(--iron-hi), inset 0 .2rem .5rem #000; color: var(--ink3); }
#skills .gw-sw::after { display: none; }
.gw-sw i { position: absolute; left: .4rem; top: .4rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a8172, #3a342b); box-shadow: 0 0 0 1px #000; transition: transform .15s; }
.gw-sw span { position: absolute; right: 1rem; top: 0; line-height: 3.4rem; font: 700 max(10px, 1.2rem)/3.4rem var(--sans); }
.gw-sw.on { box-shadow: inset 0 0 0 1px #4ab8ff, inset 0 0 1rem rgba(74, 184, 255, .45); color: #bfeaff; }
.gw-sw.on i { transform: translateX(4rem); background: radial-gradient(circle at 35% 30%, #e6f8ff, #4ab8ff); box-shadow: 0 0 0 1px #000, 0 0 .8rem #7fd8ff; }
.gw-sw.on span { right: auto; left: 1rem; }
.gw-sw:disabled { opacity: .4; cursor: default; }
.gw-detail { min-height: 0; overflow-y: auto; padding: 1.6rem 1.8rem 1.8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; font-size: max(11px, 1.3rem); color: var(--ink2); }
.gw-head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: .8rem; }
.gw-hd { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.gw-name { font: 700 max(18px, 2.6rem)/1.2 var(--serif); color: var(--gem, var(--brass-hi)); text-shadow: 0 .2rem 0 #000; }
@supports (color: color-mix(in srgb, red, blue)) { .gw-name, .gw-sup b, .gw-it[style] .gw-it-m > b, .itip.gtip .it-head { color: color-mix(in srgb, var(--gem, #d8b871) 55%, #fff) !important; } }
#skills .gw-en { font: 400 max(10px, 1.2rem)/1.4 var(--sans); letter-spacing: .03em; color: var(--ink3); }
.gw-lv { font-size: max(11px, 1.35rem); color: var(--ink2); }
.gw-lv b { color: var(--ink); }
.gw-lv em { margin-left: .6rem; font-style: normal; color: var(--r1); }
.gw-lv em b { color: var(--r1); }
.gw-keyb { flex: none; display: grid; justify-items: center; gap: .2rem; }
.gw-keyb small { font-size: max(9px, 1rem); color: var(--ink3); }
#skills .gw-desc { margin: .8rem 0 1rem; line-height: 1.55; color: var(--ink); }
.gw-req { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.gw-req-h { margin-right: .4rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.gw-req i { font-style: normal; padding: .1rem .9rem; border: 1px solid var(--iron-hi); background: rgba(0, 0, 0, .4); font-size: max(10px, 1.15rem); color: var(--ink2); white-space: nowrap; }
.gw-req i b { color: var(--ink); }
.gw-req i.bad { border-color: #7a2a20; background: rgba(120, 20, 12, .35); }
#skills .gw-req i.bad, #skills .gw-req i.bad b { color: var(--bad); }
.gw-req i.alt { border-color: #3f6a8a; background: rgba(40, 90, 130, .25); }
em.alt { font-style: normal; font-weight: 500; color: #8fc4ee; white-space: nowrap; }
em.alt b { font-weight: 700; font-family: var(--serif); letter-spacing: .04em; color: #c6e4ff !important; }
#skills .gw-sl-m > small.alt { color: #8fc4ee; } #skills .gw-sl-m > small.alt b { font-family: var(--serif); color: #c6e4ff; }
.gw-altnote { margin: -.2rem 0 .8rem; padding: .4rem .8rem; border-left: .3rem solid #3f6a8a; background: rgba(40, 90, 130, .18); font-size: max(10px, 1.15rem); line-height: 1.45; color: #a9cfee; }
.sw-r > b em.alt { margin-left: .6rem; font-size: max(10px, 1.1rem); }
.itip .it-req em.alt { font-size: max(10px, 1.1rem); }
#skills .gw-h { margin: 1.6rem 0 .7rem; padding-bottom: .3rem; font: 600 max(12px, 1.35rem) var(--serif); letter-spacing: .08em; color: var(--brass-hi); border-bottom: 1px solid rgba(140, 111, 63, .4); }
#skills .gw-h b { font-family: var(--sans); color: var(--ink); letter-spacing: 0; }
#skills .gw-h:first-child { margin-top: 0; }
.gw-spbox { display: flex; align-items: center; gap: 1.4rem; margin: 1rem 0; padding: .8rem 1.2rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.gw-spbox.on { border-image-source: url(../assets/ui/dark/row_on.png); }
.gw-spbox > div { min-width: 0; display: grid; gap: .1rem; }
.gw-spbox > div > b { color: var(--ink); }
.gw-spbox small { font-size: max(10px, 1.15rem); color: var(--ink3); }
.gw-spbox small b { color: var(--ink2); }
.gw-socks { display: flex; align-items: center; margin: .2rem 0 1rem; }
.gw-socks.plain { opacity: .4; }
#skills .gw-sock { flex: none; display: grid; place-items: center; width: 5.4rem; height: 5.4rem; border-image: none; border-radius: 50%; background: url(../assets/ui/dark/socket.png) center / 100% 100% no-repeat; }
#skills .gw-sock::after { display: none; }
.gw-sock .gi { width: 74%; height: 74%; border-radius: 50%; overflow: hidden; }
#skills .gw-sock .gi svg { width: 100%; height: 100%; }
.gw-sock.e i { font: 300 max(16px, 2.6rem)/1 var(--sans); font-style: normal; color: var(--brass); }
body.pc .gw-sock.e:hover i, .gw-sock.e.can i { color: var(--brass-hi); text-shadow: 0 0 .8rem var(--brass-hi); }
body.pc .gw-sock.f:hover { filter: brightness(1.25); }
.gw-sock.e.can { animation: gw-can 1.1s ease-in-out infinite; }
.gw-sock.f.bad .gi { filter: grayscale(1) brightness(.6); }
#skills .gw-sock.lock { opacity: .32; filter: grayscale(1); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b871' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='12' height='9' rx='1.5'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") center / 42% 42% no-repeat, url(../assets/ui/dark/socket.png) center / 100% 100% no-repeat; }
.gw-link { flex: none; width: 1.8rem; height: .9rem; background: url(../assets/ui/dark/socket_link.png) center / 100% 100% no-repeat; }
.gw-link:has(+ .lock) { background-image: url(../assets/ui/dark/socket_link_off.png); opacity: .5; }
.gw-sups { display: grid; gap: .5rem; }
.gw-sup { display: flex; align-items: flex-start; gap: 1rem; padding: .7rem 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/row.png) 16 fill / .8rem; }
.gw-sup > .gi { width: 3.8rem; height: 3.8rem; }
.gw-sup > div { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.gw-sup b { font-weight: 600; color: var(--gem, var(--ink)); }
.gw-sup small { font-size: max(10px, 1.1rem); }
.gw-sup small.ok { color: var(--ok); }
.gw-sup p { font-size: max(10px, 1.15rem); line-height: 1.4; color: var(--ink3); }
.gw-sup.bad > .gi { filter: grayscale(1) brightness(.6); }
#skills .gw-sup button { align-self: center; min-height: 3.4rem; padding: 0 1.2rem; }
.gw-lockhint { margin: .7rem 0 .5rem !important; font-size: max(10px, 1.15rem); line-height: 1.5; color: var(--ink3); }
#skills .gw-chis, #skills .gw-up { white-space: normal; line-height: 1.25; }
#skills .gw-chis { margin: 0 .6rem .4rem 0; }
.gw-suppick { margin-top: .6rem; }
#skills .sw-secs { grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap: 1.2rem 2.4rem; align-items: start; }
#skills .sw-r.bad > span, #skills .sw-r.bad > b { color: var(--bad); }
#skills .sw-r > span { min-width: 0; }
#skills .sw-r > b { flex: none; max-width: 64%; }
.gw-wait { padding: .6rem 0; }
.gw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 1.2rem 0 .4rem; }
.gw-acts > small { font-size: max(10px, 1.1rem); }
.gw-bag { min-height: 0; overflow-y: auto; padding: 1.4rem 1.2rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.gw-list { display: grid; gap: .5rem; }
#skills .gw-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 5.2rem; padding: .4rem .8rem; cursor: default; }
#skills .gw-it[data-a] { cursor: pointer; }
#skills .gw-it.sel { border-image-source: url(../assets/ui/dark/row_on.png); outline: 1px solid var(--teal); outline-offset: -1px; }
#skills .gw-it:disabled, #skills .gw-it.off { opacity: .5; cursor: default; }
.gw-it > .gi { width: 3.8rem; height: 3.8rem; margin: 0 .2rem; }
.gw-it-m { min-width: 0; display: grid; gap: .1rem; text-align: left; }
#skills .gw-it-m > b { font: 600 max(12px, 1.4rem)/1.3 var(--sans); color: var(--gem, var(--ink)); }
#skills .gw-it-m > small { font: 400 max(10px, 1.1rem)/1.4 var(--sans); color: var(--ink3); }
#skills .gw-it-m > small b { color: var(--ink2); font-weight: 700; }
#skills .gw-it button { min-height: 3.4rem; max-width: 14rem; padding: 0 1rem; white-space: normal; line-height: 1.2; }
.gw-peek .itip { width: auto; max-width: none; box-shadow: none; font-size: max(10px, 1.15rem); }
.gw-peek .itip .it-head { min-height: 3.6rem; }
.gw-peek .itip .it-head b { font-size: max(12px, 1.5rem); }
.gw-peek .itip .it-body { padding: .6rem .8rem .8rem; }
.gw-holdbar { position: absolute; z-index: 2; left: 50%; top: .5rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; height: 4.4rem; max-width: calc(100% - 11rem); box-sizing: border-box; padding: 0 .6rem 0 1.6rem; white-space: nowrap; font-size: max(11px, 1.3rem); color: var(--ink2);
background: #14110d; box-shadow: 0 0 0 1px var(--teal), 0 0 1.4rem rgba(72, 194, 176, .45); }
.gw-holdbar b { color: var(--brass-hi); overflow: hidden; text-overflow: ellipsis; }
#skills .gw-holdbar button { min-height: 3.2rem; margin-left: .6rem; padding: 0 1rem; }
.gw-note { position: absolute; z-index: 6; left: 50%; bottom: 2.4rem; transform: translateX(-50%); max-width: 80%; padding: .7rem 2rem; text-align: center; pointer-events: none; font: 600 max(12px, 1.4rem)/1.4 var(--sans); color: var(--ink);
border: 0 solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; background: rgba(9, 8, 6, .95); box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .7); }
.gw-pick { position: absolute; z-index: 3; left: 2rem; right: 2rem; top: 6.4rem; bottom: 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
.gw-pk-top { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) 36rem; grid-template-areas: 'back title q' 'f f f'; align-items: center; gap: .8rem 1.4rem; }
#skills .gw-pk-back { grid-area: back; min-width: 8rem; }
.gw-pk-title { grid-area: title; min-width: 0; display: flex; align-items: center; gap: 1rem; }
.gw-pk-title > div { min-width: 0; display: grid; gap: .1rem; }
.gw-pk-title > div > b { font: 600 max(14px, 1.9rem)/1.25 var(--serif); color: var(--brass-hi); }
.gw-pk-title > div > b b { color: var(--ink); }
.gw-pk-title small { font: 400 max(10px, 1.2rem)/1.4 var(--sans); color: var(--ink3); }
.gw-pk-title small b { color: var(--ink2); }
.gw-pk-q { grid-area: q; box-sizing: border-box; width: 100%; 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; border-radius: 0; font: 500 16px var(--sans); outline: none; user-select: text; -webkit-user-select: text; -webkit-appearance: none; appearance: none; }
.gw-pk-q::placeholder { color: var(--ink3); }
.gw-pk-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.gw-pk-f { grid-area: f; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
#skills .gw-chip { flex: none; width: auto; min-height: 3.4rem; padding: 0 1.4rem; gap: .6rem; justify-content: center; border-image: url(../assets/ui/dark/tab.png) 16 fill / .8rem; font: 600 max(11px, 1.3rem)/1 var(--sans); color: var(--ink3); cursor: pointer; white-space: nowrap; }
#skills .gw-chip.on { border-image-source: url(../assets/ui/dark/tab_on.png); color: var(--brass-hi); }
#skills .gw-chip b { font-weight: 700; color: inherit; opacity: .8; }
.gw-pk-main { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 38rem; grid-template-rows: minmax(0, 1fr); gap: 1.4rem; }
.gw-pk-list { min-height: 0; overflow-y: auto; padding: 1.2rem 1.2rem 1.4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
#skills .gw-pk-g:not(:first-child) { margin-top: 2rem; }
#skills .sw-tags.sm { margin: 0; gap: .3rem; }
#skills .sw-tags.sm i { padding: 0 .6rem; font-size: max(9px, 1.02rem); }
.gw-req.sm { margin: 0; gap: .3rem; }
.gw-req.sm i { padding: 0 .6rem; font-size: max(9px, 1.02rem); }
.gw-tier { font-style: normal; font-size: max(9px, 1.05rem); color: var(--ink3); white-space: nowrap; }
.gw-tier b { color: var(--ink2); }
.gw-pk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; font-size: max(10px, 1.2rem); color: var(--ink3); }
#skills .gw-pk-more button { margin-left: .8rem; min-height: 3.2rem; }
.gw-pk-none { padding: 2rem 0; text-align: center; }
.gw-pk-info { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.gw-pk-info .itip { flex: none; width: auto; max-width: none; box-shadow: none; }
.gw-pk-hint { padding: 1rem; text-align: center; display: grid; gap: .8rem; }
.gw-pk-hint b { font: 600 max(14px, 1.8rem) var(--serif); color: var(--brass-hi); }
.gw-pk-hint p { line-height: 1.5; color: var(--ink2); }
.gw-ask { position: sticky; bottom: 0; flex: none; margin-top: auto; display: grid; gap: .6rem; padding: 1.2rem; text-align: center; background: #15120e; box-shadow: 0 0 0 1px var(--brass), 0 -.6rem 1.4rem rgba(0, 0, 0, .6); }
.gw-ask p { font-size: max(12px, 1.45rem); line-height: 1.5; color: var(--ink); }
.gw-ask p b { color: var(--brass-hi); }
.gw-ask small { font-size: max(10px, 1.15rem); line-height: 1.4; color: var(--ink3); }
.gw-ask-b { display: flex; gap: .8rem; margin-top: .4rem; }
#skills .gw-ask-b button { flex: 1; white-space: normal; }
#gw-tip { position: fixed; z-index: 40; pointer-events: none; }
.itip.gtip { --rc: var(--gem, var(--r0)); }
.itip.gtip .it-kind b, .itip.gtip .it-req b { color: inherit; }
.itip.gtip .it-kind b { color: var(--ink); }
.itip.gtip .sw-tags { margin: .5rem 0; }
.itip.gtip .sw-tags.no i { border-color: #7a2a20; color: #ff9a8a; }
.itip.gtip .gt-desc { margin: 0; line-height: 1.5; color: var(--ink); }
.itip.gtip .it-m { margin-top: .5rem; }
.itip.gtip .it-price b { color: inherit; }
body.touch #skills { padding: 5rem 1rem 1rem; }
body.touch .gw-slots, body.touch .gw-detail, body.touch .gw-bag, body.touch .gw-pk-list, body.touch .gw-pk-info { touch-action: pan-y; }
body.touch .gw-body { grid-template-columns: 10.6rem minmax(0, 1fr) 24rem; gap: .8rem; }
body.touch .gw-left { gap: .6rem; }
body.touch .gw-spirit { grid-template-columns: 1fr auto; gap: .3rem .4rem; min-height: 0; padding: .5rem .8rem .7rem; }
body.touch .gw-spirit .gw-bar { grid-column: 1 / -1; grid-row: 2; height: .6rem; }
body.touch .gw-sp-l, body.touch .gw-sp-n { font-size: max(10px, 1.1rem); }
body.touch .gw-slots { flex: 1; display: grid; grid-template-columns: 4.8rem 4.8rem; grid-auto-rows: 4.8rem; justify-content: space-evenly; align-content: start; gap: .4rem 0; padding: .2rem 0 0; }
body.touch #skills .gw-slot { display: block; width: 4.8rem; height: 4.8rem; min-height: 0; max-height: none; padding: 0; border-image: none; }
body.touch #skills .gw-slot :is(.sw-key, .gw-sl-m, .gw-dps, .gw-sw) { display: none; }
body.touch .gw-slot .gw-ic { width: 4.8rem; height: 4.8rem; }
body.touch #skills .gw-slot.sel::before { left: -.1rem; right: -.1rem; top: -.1rem; bottom: -.1rem; width: auto; background: none; box-shadow: 0 0 0 .2rem var(--brass-hi), 0 0 1rem var(--brass-hi); clip-path: none; }
body.touch .gw-lvb { display: block; position: absolute; z-index: 2; right: .4rem; bottom: .2rem; font: 700 max(10px, 1.1rem)/1.2 var(--sans); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
body.touch .gw-slot.empty .gw-ic::before { content: '+'; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 300 2.6rem/1 var(--sans); color: var(--brass); }
body.touch .gw-detail { padding: 1rem 1.2rem 1.2rem; }
body.touch .gw-ic.big { width: 6.2rem; height: 6.2rem; }
body.touch .gw-name { font-size: max(16px, 2.1rem); }
body.touch .gw-head { gap: 1rem; margin-bottom: .5rem; }
body.touch #skills .gw-h { margin: 1.2rem 0 .6rem; }
body.touch #skills .gw-sock { width: 4.6rem; height: 4.6rem; }
body.touch .gw-link { width: 1.2rem; }
body.touch #skills .sw-secs { grid-template-columns: minmax(0, 1fr); }
body.touch #skills .sw-bigs { grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; }
body.touch #skills .sw-big { padding: .5rem .4rem; }
body.touch #skills :is(.gw-sup, .gw-acts, .gw-it, .gw-ask-b, .gw-pk-more, .gw-holdbar) button, body.touch #skills :is(.gw-chis, .gw-up, .gw-pk-back) { min-height: 3.6rem; }
body.touch #skills .gw-sw { height: 3.6rem; border-radius: 1.8rem; }
body.touch .gw-sw i { top: .5rem; }
body.touch .gw-sw span { line-height: 3.6rem; }
body.touch .gw-bag { padding: 1rem .8rem; }
body.touch #skills .gw-it { gap: .7rem; min-height: 4.6rem; padding: .3rem .6rem; }
body.touch #skills .gw-cell, body.touch .gw-ic.sm { width: 3.6rem; height: 3.6rem; }
body.touch .gw-it > .gi { width: 3.2rem; height: 3.2rem; }
body.touch #skills .gw-it button { max-width: 8.4rem; padding: 0 .6rem; border-width: .8rem; }
body.touch .gw-holdbar { top: .3rem; height: 4rem; max-width: calc(100% - 5.4rem); }
body.touch .gw-note { bottom: 1.2rem; }
body.touch .gw-pick { left: 0; right: 0; top: 0; bottom: 0; z-index: 4; gap: .6rem; padding: .8rem 1rem 1rem; background: #110e0b url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; }
body.touch .gw-pk-top { grid-template-columns: auto minmax(0, 1fr) 26rem; gap: .5rem .8rem; }
body.touch #skills .gw-pk-back { min-width: 6.4rem; }
body.touch .gw-pk-title > div > b { font-size: max(13px, 1.5rem); }
body.touch .gw-pk-q { height: 3.8rem; }
body.touch .gw-pk-f { flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; }
body.touch .gw-pk-main { position: static; grid-template-columns: minmax(0, 1fr); }
body.touch .gw-pk-list { padding: .8rem; }
body.touch .gw-pk-info { display: none; position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: 42rem; max-width: 100%; box-sizing: border-box; padding: .8rem; background: #110e0b; box-shadow: 0 0 0 1px var(--brass), -1rem 0 2.4rem rgba(0, 0, 0, .7); }
body.touch .gw-pick.has-sel .gw-pk-info { display: flex; }
body.touch .gw-pk-info .itip { font-size: max(11px, 1.2rem); }
:root:not([lang="th"]) body.touch #skills .gw-it { gap: .5rem; padding: .3rem .4rem; }
:root:not([lang="th"]) body.touch #skills .gw-it button { padding: 0 .2rem; }
:root:not([lang="th"]) body.touch #skills .gw-it-m > b { font-size: 11px; }
#skills .gw-h.gw-lnh { margin: .9rem 0 .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
#skills .gw-h.gw-lnh small { font: 400 max(10px, 1.1rem)/1.3 var(--sans); color: var(--ink3); letter-spacing: 0; }
#skills .gw-slot.lnk .sw-key { color: var(--teal); }
#skills .gw-slot.lnk.empty { opacity: .85; }
body.touch #skills .gw-h.gw-lnh { grid-column: 1 / -1; margin: 0; align-self: end; justify-content: center; text-align: center; padding-bottom: .3rem; border-bottom: 1px solid rgba(201, 162, 90, .35); }
body.touch #skills .gw-h.gw-lnh small { display: none; }
.gw-req.nx { margin-top: -.3rem; opacity: .85; }
.gw-req.nx .gw-req-h { font-size: max(10px, 1.1rem); color: var(--ink3); letter-spacing: .04em; }
.gw-upreq { flex-basis: 100%; font-size: max(10px, 1.15rem); line-height: 1.45; color: var(--ink2); }
.gw-upreq b { color: var(--ink); }
.gw-upreq .bad, .gw-upreq .bad b { color: var(--bad, #ff6a5a); font-weight: 700; }
.gw-upreq small { font-size: inherit; color: var(--ink3); }
.gw-upreq em { font-style: normal; color: var(--bad, #ff6a5a); }
.itip .it-req.gt-next { color: var(--ink3); font-size: .95em; }
.itip .it-req.gt-next small { font-size: inherit; }