#wn-hud { position: fixed; z-index: 3; left: 50%; top: calc(8.4rem + var(--sat, 0px)); transform: translateX(-50%); display: none; align-items: baseline; gap: 1.4rem; max-width: calc(100vw - 2rem);
padding: .5rem 1.6rem .55rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; color: var(--ink2); font: 600 max(11px, 1.3rem)/1.2 var(--sans); white-space: nowrap; pointer-events: none;
text-shadow: 0 1px 2px #000; }
#wn-hud.on { display: flex; }
body.patch-pending #wn-hud { top: calc(var(--patch-h, 0px) + 8.4rem + var(--sat, 0px)); }
#wn-hud b { font: 700 max(12px, 1.5rem)/1.2 var(--serif); letter-spacing: .02em; }
#wn-hud i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
#wn-hud small { font-size: .82em; color: var(--ink3); }
#wn-hud .wn-t i { font-size: 1.25em; }
#wn-hud.tear b { color: #7ff0e0; } #wn-hud.tear .wn-t i { color: #bffcf2; }
#wn-hud.tear.low .wn-t i { color: #ff8f7a; animation: wn-low .5s steps(2) infinite; }
#wn-hud.deep b { color: #a8f08a; }
#wn-hud.prism b { color: #d9c2ff; }
#wn-hud.done { color: var(--ink); }
@keyframes wn-low { 50% { opacity: .45; } }
body.touch #wn-hud { top: calc(5.6rem + var(--sat, 0px)); gap: .9rem; padding: .25rem 1rem .3rem; font-size: max(10px, 1.15rem); border-width: .6rem; }
body.touch #wn-hud b { font-size: max(11px, 1.3rem); }
body.touch #wn-hud .wn-g small { display: none; }
.itip .it-tune { display: flex; align-items: baseline; gap: .6rem; font: 600 max(10px, 1.15rem)/1.4 var(--sans); color: var(--ink2); }
.itip .it-tune b { color: var(--ink); } .itip .it-tune em { margin-left: auto; font-style: normal; font-weight: 700; color: #7ff0e0; }
.itip .it-tune.g-red b { color: #ff9a86; } .itip .it-tune.g-blue b { color: #8fc0ff; } .itip .it-tune.g-gold b { color: #ffd870; } .itip .it-tune.g-green b { color: #8fe8a8; }
.itip .it-tune.g-violet b { color: #c9a8ff; } .itip .it-tune.g-white b { color: #f2f6fc; } .itip .it-tune.g-grey b { color: #c2c8d2; }
.itip .it-m.tuned { text-shadow: 0 0 .5rem rgba(127, 240, 224, .55); }
.itip .it-aug { font: 600 max(10px, 1.15rem)/1.4 var(--sans); color: var(--ink3); }
.itip .it-aug.lit { color: #ffcf7a; text-shadow: 0 0 .6rem rgba(255, 170, 60, .7); }
.itip.augury .it-head b { color: #ffd9a0; }
.cell img.item-art[data-k="augury"][data-c$=":lit"], img.item-art[data-k="augury"][data-c$=":lit"] { filter: drop-shadow(0 0 .5rem rgba(255, 190, 90, .95)) drop-shadow(0 0 .2rem rgba(255, 230, 160, .9)) brightness(1.35) saturate(1.4); animation: wn-lit 1.6s ease-in-out infinite; }
@keyframes wn-lit { 50% { filter: drop-shadow(0 0 .9rem rgba(255, 190, 90, 1)) drop-shadow(0 0 .3rem rgba(255, 230, 160, 1)) brightness(1.6) saturate(1.5); } }
#wn-hud.wreck b { color: #ffc890; } #wn-hud.mist b { color: #ddd0ff; }
#wn-hud.act { align-items: center; }
#wn-hud button { pointer-events: auto; min-height: 2.8rem; padding: 0 1.1rem; border-radius: .4rem; border: 1px solid rgba(255, 200, 140, .55); background: rgba(40, 26, 14, .85); color: var(--ink); font: 600 max(11px, 1.2rem)/1 var(--sans); cursor: pointer; }
#wn-hud button.go { border-color: #ffb060; background: linear-gradient(#a8451c, #6e2408); color: #fff3e0; }
#wn-hud button:disabled { opacity: .45; cursor: default; }
#wn-hud button:not(:disabled):hover { filter: brightness(1.2); }
body.touch #wn-hud button { min-height: 2.6rem; padding: 0 .8rem; font-size: max(10px, 1.1rem); }
body.touch #wn-hud.act .wn-g { display: none; }
#skills .gw-dewrow small.warn { color: #ffcf7a; }
.itip.gtip .gt-dew { color: #ddd0ff; } .itip.gtip .gt-dew em { font-style: normal; font-weight: 700; color: #f1eaff; text-shadow: 0 0 .5rem rgba(190, 160, 255, .6); }
.itip.gtip .gt-dew.off { opacity: .55; text-decoration: line-through; }
.bn-tabs:has([data-tab="ore"]) { grid-template-columns: 1fr 1fr 1fr; }
#bench .bn-work.ore { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#bench .bn-work.ore ~ .bn-list { min-height: 6rem; }
.bn-orehave { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .6rem; } .bn-orehave .cell { width: 3.4rem; height: 3.4rem; pointer-events: none; }
.bn-orehave b { font: 600 max(11px, 1.3rem)/1.3 var(--sans); } .bn-orehave em { font: 700 max(12px, 1.4rem) var(--serif); font-style: normal; color: #9fd8ff; }
.bn-ores { display: grid; gap: .5rem; width: 100%; }
.win button.bn-go.bn-ore { justify-content: space-between; text-align: left; min-height: 3.8rem; padding: .3rem 1rem; flex-wrap: wrap; }
.bn-ore .bn-ore-l { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .bn-ore small { color: var(--ink3); font-weight: 400; }
.bn-ore .bn-ore-c { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; } .bn-ore .cell.sm { width: 2.4rem; height: 2.4rem; pointer-events: none; display: inline-block; }
.bn-ore i { flex: 1 0 100%; text-align: right; } .bn-ore .bn-ore-arm { display: none; color: #ffcf7a; } .bn-ore.armed .bn-ore-arm { display: block; }
body.touch .bn-ores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
body.touch .win button.bn-go.bn-ore { min-height: 3.6rem; padding: .2rem .3rem; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .1rem; }
body.touch .bn-ore small, body.touch .bn-ore .bn-ore-l .cell { display: none; } body.touch .bn-ore .bn-ore-l { white-space: normal; line-height: 1.2; }
body.touch .bn-ore .bn-ore-l, body.touch .bn-ore .bn-ore-c { margin-left: 0; justify-content: center; }
body.touch .bn-ore i { flex: none; text-align: center; font-size: max(9px, 1rem); line-height: 1.2; }
body.touch .bn-orehave { margin-bottom: .2rem; } body.touch .bn-orehave .cell { width: 2.8rem; height: 2.8rem; }