/* The icon positions remain tied to the skillbar artwork. Keys live above that layer. */
.skills{height:calc(var(--bar-width)*.27 + 47px);margin:0}
.skills button kbd{top:calc(var(--bar-width)*.087);z-index:6;font:15px Jua,sans-serif;padding:2px 7px;border-radius:9px;border:1px solid #f4e0b2;background:#38274be8;color:#fff2bd;box-shadow:0 2px 4px #10142680}
.skills button span{top:calc(var(--bar-width)*.205);font-size:14px}
.skills button em{top:calc(var(--bar-width)*.205 + 20px);font-size:12px}
.bottomHud{bottom:0}.bottomHud>small{display:none}#elementSelect{margin-bottom:0}
html,body,#world,button,a,input{cursor:url('assets/overhaul/cursor.png') 20 20,auto}
#menuButton{display:none}
.minimapFrame{position:absolute;top:73px;right:18px;width:208px;height:190px;pointer-events:none;background:none}
.minimapFrame::after{content:'';position:absolute;inset:0;z-index:2;background:url('assets/overhaul/minimap-frame.webp') center/100% 100% no-repeat;pointer-events:none}
#minimap{position:absolute;inset:23px 27px 24px;width:154px;height:143px;border:0;border-radius:18px;box-shadow:none;background:#122236cc;clip-path:inset(0 round 14px)}
#bossHud{top:7px;left:50%;transform:translateX(-50%);width:min(560px,44vw);height:155px;text-align:center;background:none}
.bossTitle{display:block;width:330px;max-width:85%;height:88px;object-fit:contain;margin:0 auto;position:relative;z-index:2}
#bossHud .bar{position:absolute;left:0;right:0;top:54px;height:106px;border:0;overflow:visible;background:url('assets/overhaul/boss-frame.webp') center/100% 100% no-repeat;border-radius:0;box-shadow:none}
#bossHud .bar::before{content:'';position:absolute;left:32%;right:9%;top:39%;height:19%;background:#28233deb;border-radius:20px}
#bossHud .bar i{position:absolute;left:32%;top:39%;height:19%;max-width:59%;transform-origin:left;background:linear-gradient(#ffdca7,#ee99bf 45%,#a487e2);border-radius:20px;transition:width .15s;box-shadow:inset 0 1px 2px #fff9}
#hud.shrineHud .location{left:25px;top:185px;transform:none;text-align:left;max-width:310px}
#hud.shrineHud .location strong{font-size:23px}
.menuLogo{display:block;width:240px;height:70px;object-fit:contain;object-position:left center}
#menuTitle{margin:0;height:85px}#menuTitle img{width:340px;height:100%;max-width:60vw;object-fit:contain;object-position:left center}
.book{color:#654d77}.book header{align-items:center;margin-bottom:4px}.book header>div{display:flex;align-items:center;gap:16px}
.book .tabs{gap:10px;border:0;padding:0 8px 8px}.book .tabs button{min-height:48px;padding:12px 26px;background:url('assets/overhaul/button-frame.webp') center/100% 100% no-repeat;border:0;box-shadow:none;color:#725286;font:17px Jua}
.book .tabs button.active{color:#ac688f;filter:brightness(1.05)}
.buildTabs button{border:0;background:url('assets/overhaul/card-frame.webp') center/100% 100% no-repeat;border-radius:0;box-shadow:none;padding:28px 20px 24px;min-height:118px;color:#70518a!important}
.buildTabs button.active{outline:2px solid #b999db;outline-offset:-13px;border-radius:24px}.buildTabs small{color:#7e698b}
.summaryLine{color:#705781;padding:9px 12px;margin:6px 0 10px}.summaryLine strong{color:#a46c9f}
.skillGrid{gap:12px}.skillCard{background:url('assets/overhaul/card-frame.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;padding:38px 28px 33px;min-height:245px;color:#665079}
.skillCard h3{font:20px Jua;color:#78558f;margin:7px 0}.skillCard p{color:#726080;font:15px Jua;line-height:1.5;min-height:52px}.skillCard small,.skillCard .rank{color:#897393;font-size:13px}.skillCard .skillArt{width:58px;height:58px;border:2px solid #cbb3df;border-radius:15px;margin:0 0 5px 8px}
.skillCard button,.settings button,.wishPage button,.relicCard,.summaryLine button{background:url('assets/overhaul/button-frame.webp') center/100% 100% no-repeat;border:0;border-image:none;box-shadow:none;border-radius:0;color:#775785;padding:14px 27px;font:15px Jua;min-height:45px}
.slots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin-bottom:18px}.slot{position:relative;height:78px;border:0;background:none;box-shadow:none;border-radius:0;padding:12px;isolation:isolate}.slot::after{content:'';position:absolute;inset:0;background:url('assets/overhaul/relic-frame.webp') center/100% 100% no-repeat;z-index:2;pointer-events:none}.slot img{border-radius:50%;position:relative;z-index:1}.slot em{z-index:3;color:#76538a;bottom:0;font:11px Jua}.slot:disabled{opacity:.55}
.relicCard{background:url('assets/overhaul/card-frame.webp') center/100% 100% no-repeat;min-height:155px;padding:25px 21px;color:#765b88}.relicCard small{color:#776580;font-size:13px}.relicCard strong{font-size:15px}.relicCard.equipped{outline:2px solid #bb8fd2;outline-offset:-10px;border-radius:20px}
.settings{max-width:660px;padding:6px 14px}.settingRow{padding:13px 8px;color:#795e8b;border-color:#c7afda55}.settingRow label{font:18px Jua}.settingRow p{color:#9580a5;font:14px Jua}.settings .controls{color:#816d91}.testTools{margin:12px 0;text-align:center}.testTools small{display:block;color:#9a7fa8;font:14px Jua;margin-top:4px}
.wishPage p,.rates{color:#81688f;font:16px Jua}.wishPage h3{color:#a46fa9}.wishActions{display:flex;justify-content:center;gap:16px}.wishActions button{background:url('assets/overhaul/button-frame.webp') center/100% 100% no-repeat;color:#75518c;border:0;box-shadow:none;padding:18px 40px;font:18px Jua}
.book footer{color:#9b83ac;font-size:12px;margin-top:12px}.emptyNote{color:#8c739e}
@media(max-width:1000px){.menuLogo{width:175px;height:52px}#menuTitle{height:68px}#menuTitle img{width:280px}.book header>div{gap:8px}.book .tabs button{padding:10px 17px;font-size:16px}.skillCard{padding:30px 22px 25px}.skillCard h3{font-size:18px}.slots{gap:3px}.slot{height:64px;padding:10px}}
@media(max-width:800px){.skills button kbd{top:calc(var(--bar-width)*.087);font-size:12px;padding:1px 5px}.skills button span{top:calc(var(--bar-width)*.205);font-size:11px}.skills button em{top:calc(var(--bar-width)*.205 + 17px);font-size:11px}.bottomHud{bottom:0}.minimapFrame{width:142px;height:130px;right:8px;top:63px}#minimap{inset:16px 19px;width:104px;height:98px}#bossHud{width:52vw;left:61%;top:6px;height:116px}.bossTitle{height:64px}#bossHud .bar{top:39px;height:80px}#hud.shrineHud .location{top:140px;left:12px;max-width:200px}#hud.shrineHud .location strong{font-size:18px}.menuLogo{display:none}#menuTitle{height:64px}.book .tabs{gap:3px;padding:0 0 7px}.book .tabs button{font-size:14px;padding:8px 12px;min-height:42px}.slot{height:45px;padding:8px}.skillCard{padding:30px 20px 23px}.skillCard .skillArt{width:42px;height:42px}.wishActions{gap:6px}.wishActions button{padding:15px 23px;font-size:16px}}

.relicCard strong{color:#79558e!important}.skillCard button:disabled{opacity:.55}.wishPage button:disabled{opacity:.55}
/* Do not create a stacking context on slot buttons: keycaps must sit over the frame. */
.skills button{left:calc(var(--slot-x) - var(--ring-width)/2);top:calc(var(--bar-width)*.0946 - var(--ring-height)/2);transform:none!important;filter:none!important;z-index:auto}
@media(max-width:800px){.skills button{left:calc(var(--slot-x) - var(--ring-width)/2);top:calc(var(--bar-width)*.0946 - var(--ring-height)/2);transform:none!important}}