#pc-hud .pc-skill .s3, #hotbar .skill .s3 { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#hotbar .skill .s3 { z-index: 4; }
.s3 .s3w { position: absolute; inset: 5%; clip-path: var(--cut); overflow: hidden; }
.s3 .s3w::before { content: ''; position: absolute; inset: 0; box-sizing: border-box; border-top: 2px solid #fff;
background: linear-gradient(to top, color-mix(in srgb, var(--c, #ffe9a0) 62%, transparent), color-mix(in srgb, var(--c, #ffe9a0) 34%, transparent));
transform: translateY(100%); animation: s3-rise var(--ms, 1000ms) linear var(--el, 0ms) both; }
.s3 .s3w::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: s3-flash 300ms ease-out calc(var(--ms, 1000ms) + var(--el, 0ms)) forwards; }
.s3.winding { animation: s3-hum .45s ease-in-out infinite alternate; }
@keyframes s3-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes s3-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes s3-hum { from { filter: none; } to { filter: drop-shadow(0 0 .5rem #fff3c8); } }
.s3 .s3p { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); padding: 2px 3px; border-radius: 3px; background: rgba(10, 8, 6, .86); box-shadow: 0 0 0 1px rgba(140, 111, 63, .85), 0 1px 3px #000; }
#pc-hud .pc-skill .s3 .s3p { bottom: 27%; }
.s3 .s3p .pr { display: flex; justify-content: center; gap: max(2px, .3rem); }
.s3 .s3p i { display: block; flex: none; box-sizing: border-box; width: max(6px, .8rem); height: max(6px, .8rem); background: #17130e; border: 1px solid #6a5632; }
.s3 .s3p i.d { background: #f0c860; border-color: #fff3c8; }
.s3 .s3p i.n { background: #5a4a2a; border-color: #ffe9a0; }
.s3 .s3p.run i.n { background: #fff; border-color: #fff; box-shadow: 0 0 .6rem .1rem #ffe9a0; animation: s3-next .32s ease-in-out infinite alternate; }
.s3 .s3p.full i { animation: s3-full .48s ease-out both; }
.s3 .s3p.st i { border-color: #8a4a22; }
.s3 .s3p.st i.d { background: #ff8a2a; border-color: #ffe0a8; box-shadow: 0 0 .5rem #ff6a10; }
.s3 .s3p.st.full i { animation: s3-full .32s ease-out both; }
@keyframes s3-next { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes s3-full { 0% { transform: scale(1.8); filter: brightness(2.2); } 100% { transform: scale(1); filter: none; } }
.s3 .s3p i.s3d { width: auto; height: 2px; margin-top: 2px; border: 0; background: #2a2218; overflow: hidden; position: relative; }
.s3 .s3d::before { content: ''; position: absolute; inset: 0; background: #ffe9a0; transform-origin: 0 50%; animation: s3-drain var(--ms, 1500ms) linear var(--el, 0ms) both; }
.s3 .s3p.st .s3d::before { background: #ffb060; }
@keyframes s3-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.s3.up::after { content: ''; position: absolute; inset: -10%; border-radius: 18%; box-shadow: 0 0 1.4rem .4rem #ffd86a, inset 0 0 1.2rem .2rem #fff6d0; animation: s3-up .55s ease-out both; }
@keyframes s3-up { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.25); } }
.s3hp { position: absolute; z-index: 6; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; font: 800 max(13px, 2.2rem)/1 var(--sans, system-ui); font-style: normal; color: #ff9a8a;
text-shadow: 0 1px 2px #000, 0 0 4px #5a0808, 0 0 2px #000; animation: s3-hp .95s ease-out both; }
.bar.hp .s3hp { left: auto; right: -.4rem; top: -1.4rem; font-size: max(12px, 1.5rem); transform-origin: 100% 50%; }
.orb.s3-paid::after { content: ''; position: absolute; inset: 7%; z-index: 5; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 70, 50, .45) 60%, transparent 72%); animation: s3-pay .5s ease-out both; }
#h-status .bar.hp.s3-paid::before { content: ''; position: absolute; inset: .2rem; z-index: 1; background: #fff; pointer-events: none; animation: s3-pay .5s ease-out both; }
@keyframes s3-hp { 0% { opacity: 0; transform: translateY(.6rem) scale(1.5); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1.6rem); } }
@keyframes s3-pay { 0% { opacity: .9; } 100% { opacity: 0; } }
#pc-hud .pc-skill .hc, #hotbar .skill .hc { z-index: 5; }
#buff-list .bf .wn { display: inline-flex; gap: max(2px, .25rem); margin: 0 max(2px, .3rem); vertical-align: middle; }
#buff-list .bf .wn i { width: max(6px, .8rem); height: max(7px, 1rem); box-sizing: border-box; border: 1px solid #5f7f9a; background: #0d1218; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
#buff-list .bf .wn i.on { background: linear-gradient(#e8f8ff, #6fc0ff); border-color: #e8f8ff; }
#buff-list .bf.pop { animation: s3-bf .4s ease-out; }
#buff-list .bf.pop .wn i { animation: s3-wn .4s ease-out both; }
@keyframes s3-bf { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes s3-wn { 0% { transform: scale(1.8); } 100% { transform: none; } }
#s3res { position: absolute; z-index: 3; display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap-reverse; gap: max(4px, .6rem) max(5px, .8rem); pointer-events: none; }
#s3res.hidden, #s3res .hidden { display: none; }
body.pc #s3res { left: 49.6rem; right: 88.6rem; bottom: 4.6rem; }
body.touch #s3res { right: calc(19.9rem + var(--sar)); bottom: calc(12.7rem + var(--sab)); max-width: 30rem; justify-content: flex-end; flex-wrap: wrap; }
#s3res .rc { position: relative; display: flex; align-items: center; gap: max(4px, .5rem); height: max(20px, 2.5rem); box-sizing: border-box; padding: 0 max(5px, .7rem) 3px; white-space: nowrap;
background: rgba(10, 8, 6, .84); box-shadow: 0 0 0 1px rgba(140, 111, 63, .8), 0 1px 3px #000; border-radius: 3px; font: 700 max(10px, 1.15rem)/1 var(--sans, system-ui); color: #8f8573; }
#s3res .rc small { font: inherit; letter-spacing: .02em; }
#s3res .rc.has small { color: var(--rc, #e9dcc0); }
#s3res .rc.focus { --rc: #8fe8ff; --rc2: #e8fbff; } #s3res .rc.fervor { --rc: #7fe07a; --rc2: #e2ffd8; } #s3res .rc.grit { --rc: #ff6a5a; --rc2: #ffe0d8; }
#s3res .pp { display: flex; gap: max(3px, .35rem); }
#s3res .pp i { display: block; width: max(9px, 1.15rem); height: max(10px, 1.3rem); background: #2c261d; }
#s3res .focus .pp i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#s3res .fervor .pp i { clip-path: polygon(50% 0, 78% 38%, 100% 26%, 88% 78%, 62% 100%, 38% 100%, 12% 78%, 0 26%, 22% 38%); }
#s3res .grit .pp i { clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); }
#s3res .pp i.on { background: linear-gradient(var(--rc2), var(--rc) 55%); }
#s3res .rc.has .pp { filter: drop-shadow(0 0 max(2px, .3rem) var(--rc)); }
#s3res .pp i.new { animation: s3r-new .42s ease-out both; }
@keyframes s3r-new { 0% { transform: scale(2.6); filter: brightness(2.4); } 100% { transform: none; filter: none; } }
#s3res .tl { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: none; overflow: hidden; }
#s3res .tl.run { background: #2a2218; }
#s3res .tl.run::before { content: ''; position: absolute; inset: 0; background: var(--rc, #ffe9a0); transform-origin: 0 50%; animation: s3-drain var(--ms, 4000ms) linear var(--el, 0ms) both; }
#s3res .rc.pop { animation: s3r-pop .3s ease-out; }
@keyframes s3r-pop { 0% { filter: brightness(2); transform: translateY(-2px); } 100% { filter: none; transform: none; } }
#s3res .rc.sp { animation: s3r-sp .5s ease-out; }
#s3res .rc.sp::after { content: attr(data-sp); position: absolute; left: 50%; top: -1.1em; transform: translateX(-50%); font: 800 max(11px, 1.4rem)/1 var(--sans, system-ui); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; animation: s3r-spn .6s ease-out both; }
@keyframes s3r-sp { 0% { background: #fff8e0; box-shadow: 0 0 0 1px #fff, 0 0 .9rem .2rem var(--rc, #ffe9a0); } 100% { background: rgba(10, 8, 6, .84); } }
@keyframes s3r-spn { 0% { opacity: 1; transform: translate(-50%, .4em); } 100% { opacity: 0; transform: translate(-50%, -.7em); } }
#s3res .combo { --rc: #ffd86a; }
#s3res .combo b { min-width: .7em; text-align: right; font: 800 max(15px, 2rem)/1 var(--serif, serif); color: #6e6452; font-variant-numeric: tabular-nums; }
#s3res .combo em { margin-left: max(-3px, -.3rem); font: 700 max(9px, 1.1rem)/1 var(--sans, system-ui); font-style: normal; color: #6e6452; }
#s3res .combo.has b { color: #f1e6cc; } #s3res .combo.ok b { color: #ffd86a; text-shadow: 0 0 .7rem #ffb020; } #s3res .combo.ok em { color: #ffd86a; }
#s3res .combo.ok { box-shadow: 0 0 0 1px #ffd86a, 0 0 .8rem rgba(255, 190, 60, .6), 0 1px 3px #000; }
#s3res .fury { --rc: #ff6a4a; }
#s3res .fury .fb { position: relative; width: max(60px, 9rem); height: max(8px, 1rem); background: #1a0d0a; box-shadow: 0 0 0 1px #5a2a20; overflow: hidden; }
#s3res .fury .ff { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ff9a6a, #d8301a 60%, #8a1408); }
#s3res .fury.mist .ff { background: linear-gradient(#ffd0a0, #ff3a1a 55%, #a80808); box-shadow: 0 0 .6rem #ff3a1a; }
#s3res .fury.fade .ff { box-shadow: inset -2px 0 0 #fff; }
#s3res .fury .fb u { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, .7); } #s3res .fury .fb u:nth-of-type(1) { left: 33.33%; } #s3res .fury .fb u:nth-of-type(2) { left: 66.66%; }
#s3res .fury b { min-width: 1.3em; text-align: right; font: 800 max(11px, 1.4rem)/1 var(--sans, system-ui); color: #6e6452; font-variant-numeric: tabular-nums; }
#s3res .fury.has b { color: #ffb49a; } #s3res .fury.mist.has b { color: #ffe0c8; text-shadow: 0 0 .5rem #ff3a1a; }
.s3 .s3v { position: absolute; inset: 5%; clip-path: var(--cut); overflow: hidden; display: grid; place-items: center; }
.s3 .s3v::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 0%); box-sizing: border-box; border-top: 2px solid #fff3c0;
background: linear-gradient(to top, rgba(255, 190, 50, .62), rgba(255, 232, 150, .36)); transition: height .25s; }
.s3 .s3v b { position: relative; font: 800 max(12px, 1.7rem)/1 var(--sans, system-ui); color: #fff3c8; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 5px #3a2400; font-variant-numeric: tabular-nums; }
.s3 .s3v.full { clip-path: none; inset: 0; box-shadow: inset 0 0 0 2px #ffe9a0, inset 0 0 .9rem .1rem #ffc23a; animation: s3-ready .7s ease-in-out infinite alternate; }
.s3.ready { filter: drop-shadow(0 0 .5rem #ffc23a); }
@keyframes s3-ready { from { opacity: .55; } to { opacity: 1; } }
.s3.spent::before { content: ''; position: absolute; inset: 0; background: #fff3c8; animation: s3-flash .5s ease-out both; }
#pc-hud .pc-skill.s3-lack .gi, #hotbar .skill.s3-lack .gi { filter: grayscale(.92) brightness(.52); }
.s3 .s3n { position: absolute; left: max(2px, .3rem); top: max(2px, .3rem); display: flex; align-items: center; gap: 2px; padding: 1px 3px; font: 800 max(9px, 1.1rem)/1 var(--sans, system-ui); font-style: normal; color: #8f8573;
background: rgba(10, 8, 6, .88); box-shadow: 0 0 0 1px #5a4a2e; border-radius: 2px; }
.s3 .s3n i { display: block; width: max(6px, .8rem); height: max(7px, .9rem); background: #5a5040; }
.s3 .s3n.combo i { clip-path: polygon(50% 0, 62% 38%, 100% 38%, 70% 60%, 82% 100%, 50% 76%, 18% 100%, 30% 60%, 0 38%, 38% 38%); }
.s3 .s3n.focus i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.s3 .s3n.fervor i { clip-path: polygon(50% 0, 78% 38%, 100% 26%, 88% 78%, 62% 100%, 38% 100%, 12% 78%, 0 26%, 22% 38%); }
.s3 .s3n.grit i { clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); }
.s3 .s3n.ok { color: #fff3c8; box-shadow: 0 0 0 1px var(--rc, #ffd86a), 0 0 .5rem var(--rc, #ffd86a); }
.s3 .s3n.ok i { background: var(--rc, #ffd86a); }
.s3 .s3n.combo { --rc: #ffd86a; } .s3 .s3n.focus { --rc: #8fe8ff; } .s3 .s3n.fervor { --rc: #7fe07a; } .s3 .s3n.grit { --rc: #ff6a5a; }
#pc-hud .pc-skill .hc:not(:empty) ~ .s3 .s3n, #hotbar .skill .hc:not(:empty) ~ .s3 .s3n { top: max(16px, 2rem); }
.s3 .s3p.us i { border-color: #5f7f9a; }
.s3 .s3p.us i.d { background: linear-gradient(#ffffff, #9fd0ff); border-color: #e8f8ff; box-shadow: 0 0 .4rem #6fb8ff; }
.s3 .s3p.us.none { box-shadow: 0 0 0 1px #8a3a2a, 0 1px 3px #000; }
.s3 .s3p i.s3d.up::before { background: #9fd0ff; animation-name: s3-fill; }
@keyframes s3-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.s3 .s3f { position: absolute; inset: 3%; box-shadow: inset 0 0 0 2px #9ff0b0, inset 0 0 .8rem #3ad06a; animation: s3-ready .28s ease-in-out infinite alternate, s3-gone 1ms linear calc(var(--ms, 2000ms) + var(--el, 0ms)) forwards; }
.s3 .s3f::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #d8ffe0; transform-origin: 0 50%; animation: s3-drain var(--ms, 2000ms) linear var(--el, 0ms) both; }
@keyframes s3-gone { to { visibility: hidden; } }
#s3why { position: fixed; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: min(72vw, 34rem); padding: max(4px, .5rem) max(8px, 1rem); pointer-events: none; text-align: center;
font: 600 max(11px, 1.3rem)/1.3 var(--sans, system-ui); color: #ffd9c8; background: rgba(12, 8, 6, .95); box-shadow: 0 0 0 1px #8a5a3a, 0 .4rem 1.2rem rgba(0, 0, 0, .7); border-radius: 3px; }
#s3why.hidden { display: none; }
#s3why b { font-weight: 700; }
#s3why small { font: 700 max(10px, 1.15rem)/1 var(--sans, system-ui); color: #ffd86a; font-variant-numeric: tabular-nums; }
#buff-list .bf.emp .bi { box-shadow: 0 0 0 1px #ffd86a, 0 0 .5rem rgba(255, 190, 60, .7); }
#buff-list .bf.emp .wn i { height: max(8px, 1.1rem); width: max(5px, .6rem); border: 0; background: #3a3020; clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
#buff-list .bf.emp .wn i.on { background: linear-gradient(#fff6d0, #ffc23a); }
#buff-list .bf .bv { margin: 0 max(2px, .3rem); font-weight: 700; color: #bfe9ff; font-variant-numeric: tabular-nums; }
#pc-hud .pc-skill .mt, #hotbar .skill .mt { display: none; position: absolute; left: 14%; bottom: 9%; z-index: 6; height: max(3px, .4rem); width: 72%; pointer-events: none;
background: linear-gradient(90deg, #7fe0ff calc(var(--mfill, 0) * 100%), rgba(10, 20, 30, .8) 0); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 0 .4rem rgba(127, 224, 255, .5); }
#pc-hud .pc-skill.metered .mt, #hotbar .skill.metered .mt { display: block; }
#skills .gw-meter { position: relative; box-sizing: border-box; width: 100%; align-self: stretch; display: flex; align-items: center; min-height: 3rem; margin: 0 0 .8rem; padding: 0 1.2rem .5rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem;
font: 500 max(10px, 1.15rem)/1 var(--sans); color: var(--ink2); }
#skills .gw-meter > i { position: absolute; left: 1rem; right: 1rem; bottom: .55rem; height: max(3px, .4rem); border-radius: 2px; background: linear-gradient(90deg, #7fe0ff calc(var(--f, 0) * 100%), rgba(255, 255, 255, .08) 0); box-shadow: 0 0 .5rem rgba(127, 224, 255, .35); }
#skills .gw-meter b { color: #bfefff; font-variant-numeric: tabular-nums; }
#skills .gw-rls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; align-self: stretch; box-sizing: border-box; }
#skills .gw-rls > .muted { grid-column: 1 / -1; }
.win #skills .row.gw-rl, #skills .row.gw-rl { justify-content: flex-start; gap: .8rem; min-height: 5rem; padding: .3rem .9rem; }
#skills .gw-rl .gw-lk { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
#skills .gw-rl .gw-lk b { font: 600 max(11px, 1.25rem)/1.2 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#skills .gw-rl .gw-lk small { font: 500 max(9px, 1.05rem)/1.2 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#skills .gw-rl .gw-lk-on { font-style: normal; font-weight: 700; color: #7fe0ff; }
#skills .gw-rl.on { border-image-source: url(../assets/ui/dark/row_on.png); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .55); }
#skills .gw-rl.off .gw-ic .gi { filter: grayscale(.9) brightness(.55); }
body.touch #skills .gw-rls { grid-template-columns: minmax(0, 1fr); }
body.touch #skills .row.gw-rl { min-height: 4.4rem; }
#pc-hud .pc-skill.linked::before, #hotbar .skill.linked::before { content: ''; position: absolute; inset: 9%; z-index: 4; pointer-events: none; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(127, 224, 255, .9), inset 0 0 .8rem rgba(127, 224, 255, .45); }
#skills .gw-slot small.lk { color: #7fe0ff; } #skills .gw-slot small.lk b { color: #bfefff; }
#hotbar .skill.ringlock { opacity: .5; }
#hotbar .skill.ringlock.empty .nm::after { content: ' ◎'; font-size: .8em; color: var(--brass, #c79d4c); }
#hotbar .skill.nosl { visibility: hidden; }
.gw-slot.ringlock { border-style: dashed; opacity: .78; }
.gw-slot.ringlock .gw-sl-m b { color: var(--brass, #c79d4c); }
.prun { display: flex; align-items: center; gap: 1rem; margin: 0 0 .8rem; padding: .6rem 1rem; border: 1px solid var(--brass, #c79d4c); background: rgba(199,157,76,.12); }
.prun > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.prun > span > b { color: var(--brass-hi, #f0d48c); font-size: 1.05em; }
.prun small { color: var(--ink2, #cfc6b4); }
.prun button { flex: none; min-width: 9rem; padding: .5rem 1.2rem; }
#dead em.tr-dead { display: none; font-style: normal; }
body.in-trial #dead em.tr-dead:not(:empty) { display: block; padding: .3rem 1.8rem; font: 600 max(13px, 1.7rem)/1.5 var(--sans); color: #ffe7b0; text-shadow: 0 1px 3px #000, 0 0 .8rem #000; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
#s3res .rc.tipped { pointer-events: auto; cursor: help; }
.rc-tip { box-sizing: border-box; width: max(26rem, 220px); max-width: 92vw; padding: .9rem 1.2rem 1rem; text-align: left; font: 400 max(11px, 1.25rem)/1.45 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,.95); box-shadow: 0 .8rem 2rem rgba(0,0,0,.7); }
.rc-tip h6 { margin: 0 0 .4rem; font: 600 max(13px, 1.6rem)/1.3 var(--serif); color: var(--brass-hi); }
.rc-tip h6 i { font-style: normal; color: var(--ink3); font-size: max(11px, 1.25rem); font-variant-numeric: tabular-nums; }
.rc-tip p { margin: 0; } .rc-tip p.rc-h { margin-top: .5rem; color: var(--ink3); font-size: max(10px, 1.1rem); letter-spacing: .03em; }
.rc-tip p.now { color: #9fe283; } .rc-tip p.rc-n { margin-top: .5rem; color: var(--ink3); font-size: max(10px, 1.1rem); }