/* Brass, painted spell art and restrained glass; mobile never stretches maps. */
.touch-ui,.touch-nav{display:none!important}
.area-loading{position:fixed;z-index:35;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;gap:15px;max-width:85vw;padding:20px 26px;border:1px solid #ddc088;border-radius:8px;background:#183b3df5;color:#f3e3bc;text-align:center;box-shadow:0 12px 35px #071a2955}
.area-loading button{padding:12px 20px;border:1px solid #a79062;border-radius:4px;background:#e4cea0;color:#27483f}
.touch-active{--touch-left:max(14px,env(safe-area-inset-left));--touch-right:max(14px,env(safe-area-inset-right));--touch-bottom:max(16px,env(safe-area-inset-bottom));--touch-top:env(safe-area-inset-top);overscroll-behavior:none}
.touch-active body{overscroll-behavior:none}
.touch-active .game{user-select:none;-webkit-user-select:none}
.touch-active .game-top{height:calc(52px + var(--touch-top));padding:var(--touch-top) var(--touch-right) 0 var(--touch-left);z-index:12}
.touch-active .brand{gap:4px}
.touch-active .brand>span:last-child,.touch-active .top-status,.touch-active #sound-button{display:none}
.touch-active .brand-mark{font-size:30px}
.touch-active .game-top nav{gap:5px}
.touch-active .game-top nav button{width:44px;height:44px;padding:11px;border-radius:7px}
.touch-active .touch-nav{display:block!important}
.touch-active #touch-command[hidden]{display:none!important}
.touch-active .map{display:none}
.touch-active .vitals{top:calc(58px + var(--touch-top));left:var(--touch-left);bottom:auto;width:192px;gap:7px;padding:5px 9px 5px 5px;pointer-events:none;z-index:8}
.touch-active .health-orb{width:46px;height:46px;flex:none}
.touch-active .health-orb svg{width:46px;height:46px}
.touch-active .health-orb strong{font-size:18px;top:12px}
.touch-active .health-orb small{display:none}
.touch-active .resource-bars{min-width:0;flex:1}
.touch-active .resource-title{gap:5px;margin-bottom:4px}
.touch-active .resource-title button{font-size:9px;pointer-events:auto;padding:0;min-height:18px}
.touch-active .mana{height:13px}
.touch-active .mana span{font-size:9px;line-height:13px}
.touch-active .experience{margin-top:4px;height:3px}
.touch-active .resource-bottom{font-size:8px;margin-top:4px;gap:4px}
.touch-active .quest{left:var(--touch-left);top:calc(120px + var(--touch-top));width:min(270px,62vw);max-height:calc(100dvh - 180px);overflow:auto;z-index:11;touch-action:pan-y}
.touch-active .quest.collapsed{width:auto;max-height:none}
.touch-active .quest-toggle{min-width:44px;min-height:44px}
.touch-active .quest.collapsed .quest-toggle{min-height:40px}
.touch-active .quest h1{font-size:19px}
.touch-active .quest p{font-size:12px;line-height:1.5}
.touch-active .boss-hud{top:calc(60px + var(--touch-top));width:min(300px,38vw);z-index:9}
.touch-active .boss-hud>span{font-size:12px;letter-spacing:.03em}
.touch-active .boss-hud b{font-size:9px}
.touch-active .trial-hud{right:var(--touch-right);top:calc(60px + var(--touch-top));width:118px;padding:8px;font-size:10px}
.touch-active .trial-hud strong{font-size:21px}
.touch-active .hotbar{display:contents;border:0;background:none;box-shadow:none}
.touch-active .hotbar:before,.touch-active .bar-divider{display:none}
.touch-active .element-slots{display:contents}
.touch-active .element-slots button{position:absolute;bottom:calc(180px + var(--touch-bottom));z-index:14}
.touch-active .element-slots [data-slot="0"]{left:var(--touch-left);right:auto}
.touch-active .element-slots [data-slot="1"]{left:calc(62px + var(--touch-left));right:auto}
.touch-active .element-slots [data-slot="2"]{left:calc(124px + var(--touch-left));right:auto}
.touch-active .element-slots [data-slot="3"]{right:calc(124px + var(--touch-right));left:auto}
.touch-active .element-slots [data-slot="4"]{right:calc(62px + var(--touch-right));left:auto}
.touch-active .element-slots [data-slot="5"]{right:var(--touch-right);left:auto}
.touch-active .hotbar button,.touch-active .hotbar .element-slots button{width:56px;min-width:0;min-height:0;height:60px;padding:3px;border-radius:8px;touch-action:none;box-shadow:inset 0 0 0 2px #183238,0 3px 9px #071b2940}
.touch-active .hotbar button>span,.touch-active .hotbar>button:not(#special-button)>span,.touch-active .hotbar .element-slots button>span{width:34px;height:34px;margin:0}
.touch-active .hotbar button>kbd{font-size:10px;z-index:4}
.touch-active .hotbar button>b{font-size:8px;letter-spacing:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.touch-active .hotbar button>small{font-size:9px;line-height:12px;white-space:nowrap;margin:0}
.touch-active .hotbar>button{position:absolute;z-index:14}
.touch-active .hotbar>button>kbd{display:none}
.touch-active #special-button{right:calc(140px + var(--touch-right));bottom:calc(18px + var(--touch-bottom))}
.touch-active #ultimate-button{left:calc(50% + 34px);right:auto;bottom:calc(18px + var(--touch-bottom))}
.touch-active #dash-button{left:calc(130px + var(--touch-left));bottom:calc(18px + var(--touch-bottom))}
.touch-active #heal-button{left:calc(50% - 94px);bottom:calc(18px + var(--touch-bottom))}
.touch-active #antidote-button{left:calc(50% - 30px);bottom:calc(18px + var(--touch-bottom))}
.touch-active .hotbar button.low-mana .slot-icon{opacity:.45}
.touch-active .hotbar button.low-mana small{color:#eeaf98}
.touch-active .hotbar .empty>span{margin:0!important;width:30px!important;height:30px!important}
.touch-active.touch-playing .touch-ui{display:block!important;position:absolute;inset:0;z-index:13;pointer-events:none}
.touch-active .touch-ui .touch-stick{position:absolute;width:112px;height:112px;display:grid;place-items:center;border:2px solid #d8bb7cb5;border-radius:50%;background:radial-gradient(circle,#527b7666 0 32%,#173a3b75 33% 66%,#bba06b24 67%);box-shadow:inset 0 0 0 5px #112c3544,0 3px 16px #10283555;pointer-events:auto;touch-action:none;overflow:visible}
.touch-active .touch-ui #joystick,.touch-active .touch-ui #touch-fire{width:112px;height:112px;background:radial-gradient(circle,#527b7666 0 32%,#173a3b75 33% 66%,#bba06b24 67%);border-color:#d8bb7cb5;box-shadow:inset 0 0 0 5px #112c3544,0 3px 16px #10283555}
.touch-active .touch-ui #joystick{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 38px)}
.touch-active .touch-ui #touch-fire{right:calc(12px + var(--touch-right));bottom:calc(var(--touch-bottom) + 38px);padding:0}
.touch-active .touch-ui .touch-stick>i{display:grid;place-items:center;width:49px;height:49px;border:1px solid #f3dfad;border-radius:50%;background:radial-gradient(circle at 40% 30%,#799e87d9,#305b55dd);box-shadow:0 3px 7px #071a2750,inset 0 0 0 3px #193d4166;pointer-events:none;font-style:normal}
.touch-active .touch-ui #touch-fire>i{width:60px;height:60px;border:0;background:none;box-shadow:none}
.touch-active .touch-ui #touch-fire{background:radial-gradient(circle at 40% 30%,#a89461d9,#3e5d49e6);border-color:#e4c787}
.touch-active .touch-ui #touch-fire span{width:38px;height:38px}
.touch-active .touch-ui #touch-fire span{width:26px;height:26px;color:#ffe5aa}
.touch-active .touch-stick>small{position:absolute;bottom:7px;font-size:8px;letter-spacing:.12em;color:#f3dfb6;pointer-events:none;text-shadow:0 1px 3px #071925}
.touch-active .touch-held{border-color:#ffe6ae!important;box-shadow:inset 0 0 0 2px #c4ac7055,0 0 10px #e9ce7b45!important}
.touch-active #touch-cast-hint{position:absolute;bottom:calc(280px + var(--touch-bottom));right:var(--touch-right);max-width:210px;margin:0;padding:7px 10px;border:1px solid #c9b67a80;border-radius:5px;color:#ffeac0;background:#183b3de8;font-size:11px;text-align:center}
.touch-active .aim-cursor{display:block!important;z-index:10;box-shadow:0 0 0 2px #132e38,0 0 14px #f7dda966}
.touch-active .aim-cursor[hidden]{display:none!important}
.touch-active .interaction{bottom:auto;top:52%;max-width:38vw;min-height:48px;padding:8px 14px;font-size:14px;text-align:center;border-radius:6px;z-index:12;touch-action:manipulation}
.touch-active .interaction kbd{font-size:9px;padding:5px;flex:none}
.touch-active .tutorial{left:50%;right:auto;top:calc(60px + var(--touch-top));bottom:auto;transform:translateX(-50%);max-width:40vw;width:280px;padding:9px 25px 9px 10px;z-index:10}
.touch-active .tutorial>span{display:none}
.touch-active .tutorial p{font-size:11px}
.touch-active .tutorial button{width:32px;height:32px}
.touch-active .notices{top:34%;left:50%;max-width:40vw;pointer-events:none}
.touch-active .notices>div{font-size:11px;padding:7px 10px}
.touch-active .poison-status{left:var(--touch-left);right:auto;top:calc(174px + var(--touch-top));bottom:auto;width:180px;padding:8px 10px;pointer-events:none}
.touch-active .poison-status b{font-size:11px}
.touch-active .poison-status span,.touch-active .poison-status small{font-size:10px}
.touch-active .loot-announcement{top:25%;right:auto;left:50%;transform:translateX(-50%);max-width:42vw;padding:7px;animation:none}
.touch-active .loot-announcement img{width:42px;height:42px}
.touch-active .loot-announcement strong{font-size:15px}
.touch-active .loot-announcement small{font-size:10px}
.touch-active .loot-announcement-change{font-size:10px}
.touch-active .level-announcement{top:26%;min-width:220px;padding:10px 16px}
.touch-active .level-announcement strong{font-size:22px}
.touch-active .level-announcement small,.touch-active .level-announcement span{font-size:12px}
.touch-active .coop-hud{top:calc(54px + var(--touch-top));padding:5px 9px;max-width:35vw;font-size:10px}
.touch-active .modal-backdrop{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));backdrop-filter:none;touch-action:pan-y;overscroll-behavior:contain}
.touch-active .modal-backdrop .modal{max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:min(1040px,100%);border-width:3px;touch-action:pan-y;overscroll-behavior:contain}
.touch-active .journal-heading{padding:14px 18px}
.touch-active .modal h2{font-size:25px;margin:6px 40px 0 0}
.touch-active .modal-body{padding:16px 18px 0;font-size:14px}
.touch-active #modal-close{width:44px;height:44px;top:8px;right:8px}
.touch-active .modal-actions{padding:12px 18px;gap:8px;margin-top:15px}
.touch-active .modal-actions button{min-height:44px;padding:10px 14px;font-size:14px}
.touch-active .modal-body button{touch-action:manipulation;min-height:44px}
.touch-active .modal select,.touch-active .modal input{min-height:44px;font-size:16px}
.touch-active .loadout-spells{grid-template-columns:repeat(2,minmax(0,1fr))}
.touch-active .modal-backdrop[data-kind="equipment"] .equipment-workspace{grid-template-columns:1fr}
.touch-active .equipment-character{position:static;width:min(420px,100%);margin:auto}
.touch-active .equipment-bag .bag-grid{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.touch-active .equipment-bag{min-width:0}
.touch-active .cover-copy{width:min(600px,75%);padding:35px max(28px,env(safe-area-inset-left));min-height:100dvh}
.touch-active .cover-copy h2{font-size:clamp(42px,7vw,72px)}
.touch-active .cover-actions button,.touch-active .cover-copy>.text-button,.touch-active .lan-launch{min-height:44px}
.touch-active .cover-footer{font-size:9px;bottom:max(10px,env(safe-area-inset-bottom))}
@media(orientation:portrait){
 .touch-active .vitals{top:calc(58px + var(--touch-top))}
 .touch-active .quest{top:calc(134px + var(--touch-top))}
 .touch-active .quest.collapsed{left:50%;transform:translateX(-50%);top:calc(134px + var(--touch-top))}
 .touch-active .boss-hud{top:calc(192px + var(--touch-top));width:calc(100vw - 172px);max-width:240px}
 .touch-active .trial-hud{top:calc(58px + var(--touch-top));width:106px}
 .touch-active .touch-ui #joystick,.touch-active .touch-ui #touch-fire{width:96px;height:96px}
 .touch-active .touch-ui #touch-fire{right:var(--touch-right)}
 .touch-active{--touch-pad-lift:clamp(72px,12vh,108px);--touch-utility-size:clamp(44px,13.3vw,56px);--touch-utility-step:calc((100vw - var(--touch-left) - var(--touch-right) - var(--touch-utility-size))/4)}
 .touch-active .touch-ui #joystick,.touch-active .touch-ui #touch-fire{bottom:calc(var(--touch-bottom) + var(--touch-pad-lift))}
 .touch-active .hotbar>#dash-button,.touch-active .hotbar>#heal-button,.touch-active .hotbar>#antidote-button,.touch-active .hotbar>#special-button,.touch-active .hotbar>#ultimate-button{width:var(--touch-utility-size);height:64px;bottom:var(--touch-bottom);right:auto}
 .touch-active .hotbar>#heal-button{left:var(--touch-left)}
 .touch-active .hotbar>#antidote-button{left:calc(var(--touch-left) + var(--touch-utility-step))}
 .touch-active .hotbar>#dash-button{left:calc(var(--touch-left) + var(--touch-utility-step)*2)}
 .touch-active .hotbar>#special-button{left:calc(var(--touch-left) + var(--touch-utility-step)*3)}
 .touch-active .hotbar>#ultimate-button{left:calc(var(--touch-left) + var(--touch-utility-step)*4)}
 .touch-active .hotbar button,.touch-active .hotbar .element-slots button{width:56px;height:64px}
 .touch-active .element-slots [data-slot="0"],.touch-active .element-slots [data-slot="1"],.touch-active .element-slots [data-slot="2"]{left:var(--touch-left);right:auto}
 .touch-active .element-slots [data-slot="3"],.touch-active .element-slots [data-slot="4"],.touch-active .element-slots [data-slot="5"]{right:var(--touch-right);left:auto}
 .touch-active .element-slots [data-slot="0"],.touch-active .element-slots [data-slot="3"]{bottom:calc(354px + var(--touch-bottom))}
 .touch-active .element-slots [data-slot="1"],.touch-active .element-slots [data-slot="4"]{bottom:calc(282px + var(--touch-bottom))}
 .touch-active .element-slots [data-slot="2"],.touch-active .element-slots [data-slot="5"]{bottom:calc(210px + var(--touch-bottom))}
 .touch-active #dash-button{left:calc(50% - 28px);bottom:calc(22px + var(--touch-bottom))}
 .touch-active #special-button{right:calc(62px + var(--touch-right));bottom:calc(116px + var(--touch-bottom))}
 .touch-active #ultimate-button{right:var(--touch-right);left:auto;bottom:calc(116px + var(--touch-bottom))}
 .touch-active #heal-button{left:var(--touch-left);bottom:calc(116px + var(--touch-bottom))}
 .touch-active #antidote-button{left:calc(62px + var(--touch-left));bottom:calc(116px + var(--touch-bottom))}
 .touch-active .interaction{max-width:calc(100vw - 172px);top:36%;font-size:14px}
 .touch-active .tutorial{top:30%;max-width:calc(100vw - 172px);width:250px}
 .touch-active .poison-status{left:50%;right:auto;transform:translateX(-50%);top:calc(264px + var(--touch-top));width:calc(100vw - 172px);max-width:220px}
 .touch-active .notices{top:27%;max-width:calc(100vw - 172px)}
 .touch-active .loot-announcement{top:28%;max-width:calc(100vw - 172px)}
 .touch-active .level-announcement{top:28%;min-width:0;width:calc(100vw - 172px)}
 .touch-active #touch-cast-hint{bottom:calc(168px + var(--touch-bottom));left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 172px);width:max-content;font-size:10px;pointer-events:none}
 .touch-active .cover-copy{width:100%;padding:55px 26px 65px;justify-content:center}
 .touch-active .cover-copy h2{font-size:58px}
 .touch-active .cover-copy p{font-size:19px}
 .touch-active .equipment-bag .bag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .touch-active .loadout-spells,.touch-active .specialization-options,.touch-active .shop-layout{grid-template-columns:1fr}
 .touch-active .coop-hud{top:calc(120px + var(--touch-top));left:auto;right:var(--touch-right);transform:none;max-width:56vw}
}
@media(orientation:portrait) and (max-width:340px){.touch-active .brand{display:none}.touch-active .game-top{justify-content:flex-end}.touch-active .vitals{width:168px}}
@media(orientation:landscape){
 .touch-active .quest{left:calc(208px + var(--touch-left));top:calc(60px + var(--touch-top))}
 .touch-active .boss-hud{top:calc(112px + var(--touch-top))}
 .touch-active .poison-status{left:50%;transform:translateX(-50%);top:calc(175px + var(--touch-top));width:190px}
}
@media(orientation:landscape) and (max-height:430px){
 .touch-active .cover-copy{padding-top:22px;padding-bottom:35px}
 .touch-active .cover-copy p{font-size:17px;margin:12px 0}
 .touch-active .cover-description{font-size:12px;line-height:1.5}
 .touch-active .cover-actions{margin-top:14px}
 .touch-active .cover-copy>.text-button{margin-top:2px;font-size:12px;min-height:32px}
 .touch-active .lan-launch{margin-top:7px;min-height:38px}
 .touch-active .prologue-scene{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:center}
 .touch-active .prologue-scene img{height:160px;margin:0}
 .touch-active .prologue-scene p{font-size:14px;line-height:1.55;margin:0}
 .touch-active .prologue-goal{font-size:13px;padding:10px 14px}
}