@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0d141a;--panel:#151e25;--line:#28343a;--text:#e5e7df;--muted:#8c9b9f;--gold:#d8bd80;--green:#8bc3a6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px Manrope,system-ui,sans-serif}button,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);padding:12px 18px;border-radius:4px;transition:background .15s,border-color .15s}button:hover{background:#243139;border-color:#647575}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--gold);border-color:var(--gold);color:#19211f;font-weight:800;padding:15px 22px}button.primary:hover{background:#ebd6a6}.outline{border-color:#3b5149}.textBtn{border:0;padding:8px;color:var(--gold)}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}h1{font-size:clamp(42px,4.5vw,65px);line-height:1.03;letter-spacing:-1.5px}h1 em{color:var(--gold);font-weight:400}h2{font-size:36px}h3{font-size:15px}p{color:var(--muted);line-height:1.8}small{font-size:10px;letter-spacing:1px;color:var(--muted)}header{height:89px;display:flex;align-items:center;justify-content:space-between;padding:0 4.6vw;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:4px;font-size:22px;font-family:Georgia,serif}.brandmark{width:38px;height:43px;border:1px solid #7b795e;clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%);display:grid;place-items:center;background:#2d3430;color:var(--gold);font-size:30px;letter-spacing:-3px}.brand small{display:block;font:8px Manrope,sans-serif;letter-spacing:2.2px;margin-top:6px;color:#9aab9f}nav{display:flex;align-items:center;height:100%;gap:24px}nav button{height:100%;border:0;border-radius:0;padding:0 4px;position:relative;color:#9fa8a8;font-size:12px}nav button.active{color:var(--gold)}nav button.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}nav button:hover{background:transparent;color:#e5d6af}#vaultCount{font-size:9px;padding:2px 5px;border:1px solid #405049;margin-left:4px}.currencies{display:flex;align-items:center;gap:10px;color:var(--gold)}.currencies button{border:0;font-size:20px;margin-left:16px}.coin{font-size:22px}.subnav{padding:15px 4.6vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.1px;color:#a5b1ad;border-bottom:1px solid #202d32}.statusDot{display:inline-block;background:#8bc3a6;width:5px;height:5px;margin-right:7px;border-radius:50%}.muted{color:#4c6267;margin:0 10px}main{max-width:1500px;margin:auto;padding:40px 4.6vw 20px}.tab{display:none}.tab.active{display:block}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:37px}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold);margin-bottom:15px;font-weight:700}.intro p{margin-top:16px;font-size:12px}.intro .outline{display:flex;align-items:center;gap:20px;background:#121d22;padding:17px 20px;text-align:left;font-size:12px}.outline small{display:block;margin-top:5px;letter-spacing:0;font-size:10px}.partyIcon{font-size:27px;color:var(--green)}.expeditionLayout{display:grid;grid-template-columns:1fr 300px;gap:25px}.sectionTitle{display:flex;justify-content:space-between;color:#b0bbb6;font-size:9px;letter-spacing:1.4px;margin-bottom:16px}.sectionTitle span:last-child{color:#647873}.dungeonCards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.dungeon{position:relative;padding:0;text-align:left;overflow:hidden;border-color:#354441;border-radius:5px;background:#162423}.dungeon.selected{border-color:var(--gold)}.dungeon.selected:before{content:'SELECTED';position:absolute;top:14px;left:14px;z-index:2;border:1px solid #79765d;background:#16231ddb;color:var(--gold);font-size:8px;letter-spacing:1.8px;padding:5px 8px}.dungeon .art{height:210px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--tint),#102022 80%)}.dungeon .art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#101c22,transparent 60%)}.art svg{width:100%;height:100%}.dungeon .copy{padding:0 19px 21px;background:#101c22}.dungeon .copy small{color:var(--accent);font-size:8px;letter-spacing:1.6px}.dungeon h2{font-size:25px;line-height:1.1;margin:12px 0 14px;min-height:54px}.dungeon .cardFoot{display:flex;justify-content:space-between;align-items:center;color:#899b9b;font-size:10px;border-top:1px solid #293635;padding-top:14px}.cardFoot strong{color:var(--accent);font-weight:500}.expeditionDetail{border:1px solid #394439;border-radius:5px;background:linear-gradient(130deg,#1b2927,#131e24);padding:23px;display:flex;flex-direction:column}.expeditionDetail .eyebrow{margin-bottom:11px;font-size:8px}.expeditionDetail h2{font-size:30px;line-height:1.1}.expeditionDetail p{font-size:11px;margin:12px 0 18px;line-height:1.7}.detailRule{height:1px;background:#34423b;margin:15px 0}.labelRow{display:flex;justify-content:space-between;font-size:10px;margin-bottom:11px;color:#9caea5}.labelRow strong{color:#d4d9c9;font-weight:500}.relicTease{display:flex;align-items:center;justify-content:center;gap:10px;margin:5px 0 16px}.relicTease img{width:62px;height:62px;object-fit:contain;background:#122022;border:1px solid #3d4b3a;border-radius:3px}.expeditionDetail .primary{width:100%;margin-top:auto}.detailNote{margin-top:10px;text-align:center;font-size:9px;color:#8a9e91}.activeHero{margin-top:20px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;gap:15px;background:#141e23;padding:9px 18px}.activeHero canvas{width:60px;height:60px;image-rendering:pixelated}.activeHero h3{margin:5px 0;font-family:Georgia,serif;font-weight:400;font-size:19px}.activeHero span{font-size:10px;color:var(--muted)}.activeHero button{margin-left:auto;font-size:10px}.activeHero small{font-size:8px;letter-spacing:1.5px}.bottomNotes{display:flex;align-items:center;gap:45px;font-size:10px;color:#a5afa8;padding:25px 0}.bottomNotes b{font-family:Georgia,serif;color:#657e72;font-size:15px;margin-right:10px;font-weight:400}.bottomNotes .alpha{font-size:8px;letter-spacing:1.5px;margin-left:auto;color:#60766c}footer{max-width:1500px;margin:auto;padding:19px 4.6vw;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #263230;font-size:9px;color:#687c77}footer button{border:0;font-size:10px;padding:3px}.pageTitle{display:flex;justify-content:space-between;align-items:center;margin:15px 0 35px}.pageTitle h1{font-size:48px;margin-bottom:12px}.pageTitle p{font-size:12px}.heroCards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.heroCard{background:#162126;border:1px solid var(--line);border-radius:5px;padding:20px;text-align:left}.heroCard.active{border-color:var(--gold)}.heroCard.dead{opacity:.5}.heroCard canvas{display:block;width:100px;height:100px;margin:auto;image-rendering:pixelated}.heroCard h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:10px 0}.heroCard p{font-size:11px}.heroCard .pill{margin-top:14px;display:inline-block}.pill{padding:7px 10px;border:1px solid #40514a;border-radius:3px;color:var(--gold);font-size:10px}.itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}.itemCard{text-align:left;background:linear-gradient(150deg,#1b242b,#111c22);border:1px solid #2f3b41;border-bottom:2px solid var(--rarity);padding:15px;border-radius:4px;position:relative}.itemCard img{width:100%;height:115px;object-fit:contain;margin:0 0 12px}.itemCard h3{font-size:12px;min-height:33px;line-height:1.4;margin:5px 0}.itemCard small{color:var(--rarity);font-size:9px;letter-spacing:.6px}.itemCard.locked img{opacity:.25;filter:grayscale(1)}.itemCard.locked h3{color:#7e8d91}.itemCount{position:absolute;top:12px;right:12px;font-size:10px;color:#acb8b9}.stat{font-size:10px;color:#a1b5ad;margin-top:7px}.empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:6px;color:var(--muted)}select,input{background:#142128;border:1px solid #46544d;color:#e5e7df;padding:13px;border-radius:4px}input{width:100%;margin:12px 0}label{font-size:11px;color:#adbbb5}.loadoutBox{padding:24px;border:1px solid var(--line);margin:25px 0;border-radius:5px;background:#121e24}.loadoutBox h2{font-size:28px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.slot{border:1px dashed #42514c;padding:14px;display:flex;align-items:center;gap:12px;font-size:11px;text-align:left}.slot img{width:50px;height:50px;object-fit:contain}.slot small{display:block;margin-bottom:5px}.modalBox{position:relative;background:linear-gradient(130deg,#1b282c,#111b22);border:1px solid #556354;max-width:660px;width:calc(100% - 36px);max-height:90vh;overflow:auto;padding:38px;border-radius:8px;box-shadow:0 30px 100px #0008}#modal{position:fixed;inset:0;z-index:50;background:#050b11db;display:flex;align-items:center;justify-content:center}#modal[hidden],[hidden]{display:none!important}.close{position:absolute;top:10px;right:12px;border:0;font-size:25px;padding:2px 10px;color:#a7b4ac}.modalBox h2{margin-bottom:12px}.modalBox p{font-size:12px}.modalBox .actions{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap}.modalBox .actions button{flex:1}.classOptions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.classOption{text-align:left;font-size:11px;padding:15px}.classOption.active{border-color:var(--gold)}.classOption strong{display:block;font-family:Georgia,serif;font-size:22px;font-weight:400;margin-bottom:6px}.classOption span{font-size:10px;color:#98aaa6}.check{display:flex;align-items:center;gap:10px;font-size:11px}.check input{width:auto;margin:0}.controls{display:grid;grid-template-columns:90px 1fr;gap:12px;margin:23px 0;font-size:12px;color:#abbab2}.controls kbd{font:11px Manrope,sans-serif;color:var(--gold)}.roomCode{font:32px monospace;letter-spacing:7px;background:#0d1820;border:1px solid #44564c;padding:20px;text-align:center;margin:20px 0;color:var(--gold)}.partyMember{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.partyMember span{color:var(--green);font-size:10px}.lootStage{text-align:center}.lootStage .crate{width:160px;height:160px;object-fit:contain;margin:20px auto;display:block;animation:float 3s ease-in-out infinite}.lootStage .rewardItem{width:180px;height:180px;object-fit:contain;animation:reveal .6s ease-out}.lootStage .rarity{color:var(--rarity);letter-spacing:3px;font-size:10px;margin-bottom:8px}.lootStage h2{font-size:37px}.lootStage p{max-width:380px;margin:10px auto}.lootStage .statsRow{display:flex;justify-content:center;gap:28px;margin:22px 0;font-size:11px}.statsRow strong{display:block;color:var(--gold);font-size:22px;margin-bottom:6px}@keyframes float{50%{transform:translateY(-6px)}}@keyframes reveal{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:100;padding:13px 22px;background:#233c31;border:1px solid #719981;color:#e5ecdb;border-radius:5px;max-width:90vw;opacity:0;pointer-events:none;font-size:12px;transition:opacity .15s}#toast.visible{opacity:1}#gameScreen{position:fixed;inset:0;background:#0b1319;z-index:10;overflow:hidden}#arena{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}.gameTop{position:absolute;top:20px;left:25px;right:25px;display:flex;align-items:start;justify-content:space-between;gap:20px;pointer-events:none}.zoneHud{background:#101b22e8;padding:14px 20px;border:1px solid #34453e;min-width:210px}.zoneHud strong{display:block;font:24px Georgia,serif;margin:6px 0}.zoneHud small{font-size:8px;letter-spacing:2px;color:var(--gold)}.zoneHud span{font-size:10px;color:#a0b3a9}#pauseBtn{pointer-events:auto;background:#122126e8}.gameBottom{position:absolute;left:25px;bottom:23px;right:25px;display:flex;justify-content:space-between;align-items:end;gap:20px;pointer-events:none}.playerHud{width:270px;background:#101b22e8;border:1px solid #35483c;padding:15px}.playerHud>div:first-child{display:flex;justify-content:space-between;font-size:12px}.playerHud span{color:var(--gold);font-size:10px}.playerHud small{display:block;margin-top:10px;letter-spacing:0;font-size:9px}.bar{height:7px;background:#34242c;overflow:hidden;margin-top:9px;border-radius:1px}.bar i{height:100%;display:block;width:100%;background:#c57f6e}.bar.health{background:#273b31}.health i{background:#81c6a1;transition:width .12s}.abilities{display:flex;gap:9px;pointer-events:auto}.abilities button{background:#102027ee;border:1px solid #445349;min-width:75px;height:63px;padding:9px 13px}.abilities b{display:block;color:var(--gold);font-size:12px}.abilities span{display:block;margin-top:7px;font-size:9px;color:#a6b7ac}#bossHud{width:min(38vw,440px);text-align:center;background:#101921db;padding:12px 20px}#bossHud small{color:#e4ccb1;font:18px Georgia,serif;letter-spacing:1px}#teamHud{position:absolute;top:125px;left:25px;display:grid;gap:8px}#teamHud .teammate{background:#101a21d9;padding:8px 12px;width:145px;font-size:10px}.teammate .bar{height:3px}#touchPad{position:absolute;bottom:140px;left:20px;right:20px;pointer-events:none;display:flex;justify-content:space-between;align-items:center}#joystick{width:110px;height:110px;border-radius:50%;background:#67847833;border:1px solid #9cbaa94d;pointer-events:auto;touch-action:none;position:relative}#joystick span{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#d8d9b84d}#touchFire{border-radius:50%;width:76px;height:76px;background:#86644b77;pointer-events:auto;touch-action:none}.warning{padding:12px;border-left:2px solid #d6b77c;background:#51402733;margin:16px 0;color:#c2b89d;font-size:11px;line-height:1.7}.settingRow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}.settingRow input{width:auto}.xpBar{margin:12px 0 5px;height:3px;background:#303c37}.xpBar i{display:block;height:100%;background:var(--gold)}
@media(min-width:1550px){.dungeon .art{height:265px}.dungeon h2{font-size:29px}}@media(max-width:1100px){header{gap:15px;padding:0 25px}.brand{font-size:17px;letter-spacing:3px}nav{gap:15px}.expeditionLayout{grid-template-columns:1fr 255px;gap:16px}.dungeon h2{font-size:23px}.dungeon .copy{padding:0 13px 18px}.expeditionDetail{padding:18px}.relicTease img{width:54px;height:54px}.bottomNotes{gap:20px}.dungeon .art{height:190px}.heroCards{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){header{height:auto;flex-wrap:wrap;padding:18px 22px 0;gap:20px}.brand{font-size:20px}nav{order:3;width:100%;justify-content:space-between;height:48px;gap:0}.currencies{margin-left:auto}.subnav{padding:13px 22px}.subnav #saveStatus{max-width:140px;text-align:right;font-size:8px}.expeditionLayout{grid-template-columns:1fr}.expeditionDetail{display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.expeditionDetail .detailMain{grid-row:span 2}.expeditionDetail .detailLoot{grid-column:2}.expeditionDetail .primary{grid-column:2}.detailNote{grid-column:2}.dungeon .art{height:210px}.bottomNotes .alpha{display:none}.intro{gap:20px}main{padding:30px 22px 15px}.pageTitle h1{font-size:39px}.slots{grid-template-columns:repeat(2,1fr)}.heroCards{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.intro{align-items:start}.intro h1{font-size:44px}.intro p{font-size:11px;max-width:240px}.intro .outline{padding:10px;gap:7px;font-size:10px;margin-top:24px}.intro .outline .partyIcon,.intro .outline>span:last-child{display:none}.outline small{font-size:8px}.eyebrow{font-size:8px}.dungeonCards{gap:8px}.dungeon .art{height:140px}.dungeon .copy{padding:0 10px 13px}.dungeon h2{font-size:19px;min-height:63px}.dungeon .copy small{font-size:6px;letter-spacing:.7px}.dungeon .cardFoot{display:block;font-size:8px}.cardFoot strong{display:block;margin-bottom:5px}.dungeon.selected:before{font-size:6px;left:7px;top:9px;padding:4px}.sectionTitle{font-size:8px;letter-spacing:.5px}.expeditionDetail{display:block;padding:20px}.expeditionDetail h2{font-size:30px}.expeditionDetail p{max-width:none}.relicTease{justify-content:start}.relicTease img{width:64px;height:64px}.detailRule{margin:12px 0}.activeHero{padding:8px;gap:5px}.activeHero h3{font-size:16px}.activeHero button{font-size:8px}.activeHero canvas{width:48px;height:48px}.bottomNotes{font-size:8px;gap:14px}.bottomNotes b{margin-right:4px;font-size:12px}footer{font-size:8px;padding:16px 22px}footer>span:first-child{max-width:140px}.pageTitle{align-items:start;gap:15px}.pageTitle h1{font-size:35px}.pageTitle button{font-size:10px;padding:10px}.pageTitle p{font-size:10px}.heroCard{padding:12px}.heroCard h3{font-size:20px}.modalBox{padding:30px 22px}.gameTop{top:10px;left:10px;right:10px}.zoneHud{padding:10px 12px;min-width:0}.zoneHud strong{font-size:17px}.zoneHud small{font-size:7px}.gameBottom{left:10px;right:10px;bottom:10px;gap:10px;flex-wrap:wrap}.playerHud{width:100%;padding:10px}.playerHud small{display:none}.abilities{width:100%;justify-content:space-between;gap:5px}.abilities button{min-width:0;flex:1;height:54px;padding:7px 4px}.abilities b{font-size:10px}.abilities span{font-size:8px}.gameBottom .bar{height:5px}#teamHud{left:10px;top:90px}#bossHud{position:absolute;top:75px;left:25%;width:65%;padding:8px}#bossHud small{font-size:13px}.itemGrid{grid-template-columns:repeat(2,1fr)}.slots{grid-template-columns:repeat(2,1fr)}.slot{padding:10px;gap:5px;font-size:9px}.slot img{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.reliquary{position:relative;margin:22px auto 0;width:240px;height:160px;background:radial-gradient(ellipse at center,var(--chest),transparent 65%);background-blend-mode:soft-light}.reliquary svg{width:240px;height:150px;position:relative;filter:drop-shadow(0 7px 18px #0008)}.lootStage .crate.keyArt{width:65px;height:65px;margin:-28px auto 15px;position:relative;transform:rotate(-18deg)}
/* Expedition update */
#arena:focus{outline:none}#focusHint{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);background:#101b22e8;border:1px solid var(--gold);padding:16px 24px;pointer-events:none;font-size:13px}#contracts{margin-top:29px}.contractGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.contract{padding:18px;background:#141f24;border:1px solid #293c36;border-radius:4px}.contract small{color:var(--gold);font-size:8px;letter-spacing:1.2px}.contract h3{font:19px Georgia,serif;margin:8px 0}.contract p{font-size:10px}.contractFoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;color:#859e8f}.contractFoot button{font-size:10px;padding:7px 12px}.contractFoot button:not(:disabled){background:#334e3d;border-color:#7aab87;color:#dcecd4}.contract.claimed{opacity:.6}.contract .xpBar{height:2px}.masteryPanel{margin:18px 0;border:1px solid #425146;background:linear-gradient(120deg,#242d25,#142129);padding:26px;border-radius:5px}.masteryPanel h2{font-size:30px}.masteryPanel p{font-size:11px;margin-top:9px}.masterySlots{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:24px}.masterySlot{padding:15px;border:1px solid #3d4d43;background:#142127}.masterySlot small{font-size:8px;letter-spacing:1px}.masterySlot button{font-size:10px;width:100%;padding:10px 5px}.rankPips{display:flex;gap:6px;margin:15px 0}.rankPips i{display:block;height:5px;flex:1;background:#34433c}.rankPips i.lit{background:var(--gold)}.boonCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.boonCard{padding:22px 15px;text-align:left;background:#152329;border-color:#344840;transition:border-color .15s,transform .15s}.boonCard:hover{border-color:var(--boon);transform:translateY(-3px);background:#23312f}.boonCard svg{display:block;width:50px;height:50px;color:var(--boon);margin:0 0 25px}.boonCard small{color:var(--boon);font-size:8px}.boonCard h3{font:23px/1.1 Georgia,serif;margin:12px 0;min-height:50px}.boonCard p{font-size:10px!important;line-height:1.7;min-height:65px}.boonCard span{display:block;font-size:9px;color:var(--boon);margin-top:20px}.boonNote{font-size:9px!important;margin-top:20px}.trait{color:#c8bb8b!important;font-size:11px!important;padding:10px;border:1px solid #71664166;background:#6e5e2622}.runRecap{border-top:1px solid #33493e;margin-top:25px;padding-top:20px;text-align:left}.recapNumbers{display:flex;justify-content:space-between;gap:12px;text-align:center;color:#899f92;font-size:8px;letter-spacing:.5px}.recapNumbers strong{display:block;color:#dcdcc1;font-size:22px;letter-spacing:0;margin-bottom:8px;font-family:Georgia,serif;font-weight:400}.boonTokens{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.boonTokens span{font-size:8px;border:1px solid #3c5145;padding:5px 8px;color:#c6c5a0}.boonHudToken{display:inline-block;padding:5px 8px;font-size:8px;background:#142522df;border:1px solid #475a49;color:#ddc995;margin:3px}#boonHud{position:absolute;bottom:113px;left:25px;max-width:400px;pointer-events:none}.abilities button:active{border-color:#f0d9a0;background:#415444}.abilities button.cooling{opacity:.55}.gameTop,.gameBottom{user-select:none}.itemCard:hover{transform:translateY(-2px);border-color:var(--rarity)}.itemCard{transition:transform .15s,border-color .15s}.modalBox{max-width:720px}.brandmark{font-size:29px}
@media(max-width:850px){.contractGrid{grid-template-columns:repeat(2,1fr)}.masterySlots{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.boonCards{grid-template-columns:1fr;gap:9px}.boonCard{position:relative;min-height:100px;padding:14px 14px 14px 82px}.boonCard svg{position:absolute;left:17px;top:22px;width:45px;height:45px;margin:0}.boonCard h3{font-size:22px;min-height:0;margin:6px 0}.boonCard p{min-height:0;font-size:10px!important}.boonCard span{margin-top:9px}.contract{padding:13px}.contract h3{font-size:17px}.contractFoot button{padding:6px;font-size:8px}.masteryPanel{padding:18px}.masterySlots{gap:9px}.masterySlot{padding:12px}.rankPips{gap:3px}#boonHud{bottom:147px;left:10px;max-width:220px}.boonHudToken{font-size:7px;padding:4px;margin:2px}}

/* The sanctuary and expeditions share one continuous full-screen canvas. */
body{overflow:hidden;background:#091510}#gameScreen{position:fixed;inset:0}#app{position:fixed;inset:38px 4vw 30px;z-index:20;overflow:auto;border:1px solid #506253;border-radius:10px;background:rgba(14,24,27,.98);box-shadow:0 24px 100px #000b}#app header{position:sticky;top:0;background:#101d20;z-index:2}#app .journalClose{display:block;width:100%;border:0;border-bottom:1px solid #405245;border-radius:0;background:#20332c;text-align:right;padding:12px 24px;color:#ddd7be}#app .intro{display:none}#app .expeditionLayout{display:none}#app .bottomNotes{display:none}#app #contracts{margin-top:0}#app .subnav{padding:15px 24px}#app header{padding:18px 24px}#app .brand small{display:none}#app #lobby{padding:24px}#app h1{font-size:32px}#app footer{padding:20px 24px}#app .currencies{margin-left:auto}#app nav button[data-tab=expeditions]{font-size:0}#app nav button[data-tab=expeditions]::after{content:'Contracts';font-size:12px}.worldDock{position:absolute;left:25px;top:108px;display:flex;gap:6px}.worldDock button,.cameraDock button{background:#101d22e8;border-color:#42584a;padding:9px 12px;color:#c4ccb7;font-size:11px}.worldDock kbd{color:#82937f;margin-left:8px;font-size:9px}.cameraDock{position:absolute;right:25px;top:275px;display:flex;gap:3px}.cameraDock button{padding:8px}.cameraDock #resetCamera{min-width:65px;color:#d7c99d}#interaction{position:absolute;left:50%;top:79%;transform:translateX(-50%);z-index:5}#interactBtn{background:#17291ff2;color:#ede1b9;border:1px solid #a4ac79;box-shadow:0 6px 30px #0008;padding:13px 22px;font-size:12px;white-space:nowrap}#interactBtn kbd{display:inline-block;background:#c7bb8e;color:#1b2823;border-radius:3px;padding:3px 6px;margin-right:9px}.portalPreview{max-width:270px;height:185px;overflow:hidden;margin:0 auto}.portalPreview svg{width:100%;height:210px}#teamHud{top:160px}.gameBottom{pointer-events:none}.gameBottom button{pointer-events:auto}.abilities button:disabled{opacity:.48}#arena{touch-action:none;outline:none}#focusHint{display:none}
@media(max-width:700px){#app{inset:10px}#app header{flex-wrap:wrap;gap:10px;padding:12px}#app .brand{display:none}#app nav{display:flex;flex-wrap:wrap;gap:6px}#app #lobby{padding:16px}#app .subnav{font-size:9px;padding:10px}#app footer{display:none}.worldDock{left:12px;top:93px}.worldDock button{padding:7px 9px}.worldDock kbd{display:none}.cameraDock{right:12px;top:230px}.cameraDock button{padding:7px;font-size:9px}#interaction{top:76%}#interactBtn{font-size:10px;padding:10px}.gameBottom .abilities button{min-width:46px}#teamHud{top:136px}}

#packPanel{position:absolute;right:24px;top:321px;width:244px;background:#101d22ed;border:1px solid #3f544b;border-radius:6px;box-shadow:0 8px 30px #0007;user-select:none}#packToggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border:0;border-bottom:1px solid #33463e;font-size:10px}#packToggle strong{color:#d9cfac;font-weight:600}#packCount{color:#839686}#packBody{padding:10px}.packLabel{font-size:8px;letter-spacing:1.5px;color:#849582;margin:0 0 6px;display:flex;justify-content:space-between}.packGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}.packSlot{position:relative;aspect-ratio:1;padding:3px;background:linear-gradient(145deg,#22302c,#101a20);border:1px solid #34493f;border-radius:3px;min-width:0;overflow:hidden}.packSlot.filled{border-color:color-mix(in srgb,var(--rarity) 55%,#233039)}.packSlot img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #0007)}.packSlot:hover,.packSlot.picked,.packSlot.dropHover{background:#34483e;border-color:var(--rarity);outline:1px solid var(--rarity)}.emptySlot{font-size:8px;color:#647a6d}.rarityDot{position:absolute;bottom:3px;left:4px;width:4px;height:4px;background:var(--rarity);transform:rotate(45deg)}#equipSlots .packSlot{background:linear-gradient(145deg,#3c412f,#1b2720)}#itemDetail{min-height:32px;border-top:1px solid #344439;padding-top:6px;display:grid;gap:3px;font-size:9px;color:#9da99b;line-height:1.4}#itemDetail strong{font-size:11px}#itemDetail small{font-size:8px}.packActions{display:flex;gap:4px;margin-top:8px}.packActions button{padding:5px 4px;font-size:8px;flex:1}#wardrobeBtn{display:block;width:100%;padding:7px 2px;margin-top:5px;border-color:#5c506b;font-size:10px;color:#c4b4d7}#cosmeticCount{display:block;font-size:8px;color:#988aa8;margin-top:3px}#groundLoot{position:absolute;left:24px;top:300px;width:258px;padding:14px 14px 12px;background:#0d1a21f2;border:1px solid var(--chest-color);border-radius:7px;box-shadow:0 0 24px color-mix(in srgb,var(--chest-color) 15%,transparent)}#chestArt{height:138px;margin-top:-2px;margin-bottom:4px}#chestArt svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--chest-color) 25%,transparent))}#groundLoot>small{font-size:7px;letter-spacing:1.5px;color:var(--chest-color)}#groundLoot h3{font-family:Georgia,serif;font-size:19px;margin:3px 0 7px}#groundLoot p{font-size:10px;margin-bottom:10px}#groundSlots{grid-template-columns:repeat(4,1fr)}#takeAllLoot{font-size:10px;width:100%;padding:8px}#bossReturn{position:absolute;top:150px;left:50%;transform:translateX(-50%);background:#2e3b29;border-color:#b9b27b;color:#eee4bd;font-size:12px;z-index:3}.cosmeticChest{height:150px}.cosmeticChest svg{width:100%;height:100%}.cosmeticBalance{text-align:center;color:#d6bcf0;padding:10px}.oddsText{font-size:11px;text-align:center}.paletteGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0}.paletteGrid button{display:flex;gap:10px;align-items:center;font-size:10px;text-align:left}.paletteGrid i{width:17px;height:17px;flex-shrink:0;background:var(--swatch);border:2px solid #d9d4ba;border-radius:4px}.classOption small{display:block;font-size:9px;color:#b3b9a4;margin-top:6px}
@media(max-height:790px) and (min-width:701px){#packPanel{top:305px;width:210px}#packBody{padding:8px}.packGrid{gap:4px;margin-bottom:7px}#itemDetail{font-size:8px}#itemDetail strong{font-size:9px}.packActions{margin-top:4px}#groundLoot{top:285px}}
@media(max-width:700px){#packPanel{right:10px;top:273px;width:160px}#packBody{padding:6px}.packGrid{gap:3px;margin-bottom:5px}.packSlot{padding:2px}.emptySlot{font-size:6px}#packToggle{padding:7px 5px;font-size:8px}.packLabel{font-size:7px;letter-spacing:.7px}#itemDetail{font-size:7px;min-height:24px}#itemDetail strong{font-size:8px}.packActions{flex-wrap:wrap}.packActions button{font-size:7px}#wardrobeBtn{font-size:8px}#groundLoot{left:10px;top:265px;width:150px;padding:8px}#chestArt{height:85px}#groundLoot h3{font-size:15px}#groundLoot p{font-size:8px}#groundLoot>small{font-size:6px;letter-spacing:.3px}#bossReturn{top:140px;font-size:10px;padding:8px}.paletteGrid{gap:4px}.paletteGrid button{padding:8px;font-size:9px}}

@media(min-width:701px){.cameraDock{top:250px}#packPanel{top:290px;width:210px}#packBody{padding:8px}#itemDetail{max-height:67px;overflow:auto}.packGrid{gap:4px}.packActions button{padding:5px 2px}#wardrobeBtn{padding:5px 2px}}
@media(max-height:650px){#packPanel{top:135px;width:172px;max-height:calc(100vh - 225px);overflow:auto}.cameraDock{top:96px;right:195px}.packGrid{gap:3px}.packLabel{margin-bottom:4px}#itemDetail{max-height:36px}#groundLoot{top:190px}#packPanel #packToggle{padding:6px}}

#mechanicHud{position:absolute;top:142px;left:50%;transform:translateX(-50%);width:min(420px,44vw);padding:10px 15px;border-top:1px solid #a6ac79;border-bottom:1px solid #53654b;background:linear-gradient(90deg,#0a171bb8,#14251def,#0a171bb8);text-align:center;pointer-events:none;display:grid;gap:4px}#encounterName{font-family:Georgia,serif;font-size:17px;color:#e4dab6;font-weight:normal}#encounterTask{font-size:10px;color:#ccdcc0}#encounterHint{font-size:9px;color:#97a88f;line-height:1.5}#classResource{display:block;color:#d9c99b;font-size:9px;margin-top:7px;letter-spacing:.4px}#chestArt{height:88px}#chestArt svg{width:170px;margin:auto}.cosmeticChest{height:120px}
@media(max-width:700px){#mechanicHud{top:151px;width:calc(100% - 210px);min-width:180px;padding:7px}#encounterName{font-size:13px}#encounterTask{font-size:8px}#encounterHint{font-size:7px}#classResource{font-size:7px}#chestArt{height:70px}#chestArt svg{width:120px}}
/* v0.6: fixed UI regions keep controls clear of the player's aiming space. */
.worldDock{top:116px;left:18px;max-width:280px;flex-wrap:wrap}.worldDock button{padding:7px 9px;font-size:10px}.gameTop{left:18px;right:18px;top:16px}.zoneHud{max-width:330px}.zoneHud strong{font-size:22px}.zoneHud span{display:block;line-height:1.5}.cameraDock{top:282px;right:18px}#packPanel{top:322px;right:18px;width:210px;max-height:calc(100dvh - 428px);overflow:auto}#packToggle{position:sticky;top:0;z-index:1;background:#14241f}#storeSelected{width:100%;font-size:9px;margin-top:8px;padding:7px;color:#c8d7b9}.gameBottom{left:18px;right:18px;bottom:16px}.abilities{gap:6px}.abilities button{width:88px;min-width:0}.playerHud{width:295px}#teamHud{top:198px;left:18px;max-height:100px;overflow:auto}#mechanicHud{top:136px;width:min(390px,calc(100% - 620px));min-width:220px}#bossHud{max-width:390px;margin-right:55px}#groundLoot{top:320px;left:18px;width:225px;max-height:calc(100dvh - 445px);overflow:auto}#bossReturn{top:220px}#itemDetail{max-height:58px}#interaction{top:auto;bottom:125px;max-width:calc(100% - 470px)}#interactBtn{white-space:normal;line-height:1.5}#toast{bottom:108px;max-width:min(560px,85vw)}.modalBox{max-height:calc(100dvh - 48px);overflow:auto}.actions{flex-wrap:wrap;gap:10px}.actions button{max-width:100%}.statGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}.statCard{padding:14px;background:#142721;border:1px solid #3b5145;border-top:2px solid var(--stat);border-radius:5px}.statCard header{display:flex;justify-content:space-between;padding:0!important;height:auto!important;background:none!important;position:static!important;gap:10px}.statCard b{font:17px Georgia;color:var(--stat)}.statCard strong{font-size:18px;color:#e4e4ce}.statCard small{display:block;font-size:10px;margin:7px 0;color:#a4b8a5}.statBreakdown,.statCard>span{font-size:9px;color:#b4c0a8;line-height:1.6}.statCard .xpBar i{background:var(--stat)}.afterbloom{margin-top:28px;padding-top:24px;border-top:1px solid #615376}.afterbloom h2{color:#d4b5e5}.treeHeadings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:9px;letter-spacing:1.5px;color:#bea7cf;text-align:center;margin:25px 0 10px}.skillTree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.skillNode{position:relative;display:flex;flex-direction:column;gap:9px;align-items:start;text-align:left;min-height:150px;padding:15px;border:1px solid #6b5877;background:linear-gradient(140deg,#2c2c37,#162727)}.skillNode:nth-child(n+4):before{content:'';position:absolute;top:-21px;left:50%;width:1px;height:20px;background:#816b92}.skillNode small{font-size:8px;color:#b79fc5}.skillNode strong{font:19px Georgia;color:#e0d2c0}.skillNode span{font-size:10px;line-height:1.6;color:#acb9a9}.skillNode em{font-style:normal;font-size:8px;color:#94869e}.skillNode:disabled{opacity:.55}.skillNode.learned{opacity:1;border-color:#c3b686;background:linear-gradient(140deg,#3b3c2a,#19312a)}.progressionPanel{padding:26px;border:1px solid #46594a;margin:20px 0;background:#12221f;border-radius:6px}#app header .brand{flex-shrink:0}#autoFireBtn{border-color:#658469}
@media(max-width:1100px){#mechanicHud{top:188px;width:calc(100% - 530px);min-width:230px}#bossReturn{top:279px}.gameBottom .abilities button{width:76px}#interaction{max-width:calc(100% - 420px)}}
@media(max-width:700px){.gameTop{left:10px;right:10px;top:10px}.zoneHud{max-width:calc(100vw - 80px);padding:9px 12px}.zoneHud strong{font-size:18px}.worldDock{left:10px;top:106px;max-width:calc(100% - 20px)}.worldDock button{font-size:9px;padding:6px}.cameraDock{top:209px;right:10px}#packPanel{top:250px;right:10px;width:150px;max-height:calc(100dvh - 410px)}#packBody{padding:6px}#bossHud{top:142px;left:10px;width:calc(100vw - 20px);max-width:none;margin:0;padding:7px}#mechanicHud{top:186px;left:10px;transform:none;width:calc(100% - 185px);min-width:0;padding:7px}#encounterName{font-size:12px}#encounterHint{font-size:8px}#teamHud{display:none}#groundLoot{top:295px;left:10px;width:150px;max-height:calc(100dvh - 455px)}#bossReturn{top:250px;left:10px;transform:none;width:150px;font-size:9px;padding:8px}#interaction{left:10px;transform:none;bottom:170px;max-width:calc(100% - 175px)}#interactBtn{font-size:9px;padding:7px}.gameBottom{bottom:8px;left:10px;right:10px;display:flex;flex-direction:column;gap:7px;align-items:stretch}.playerHud{width:100%;padding:8px}.playerHud .bar{display:none}.playerHud>div:first-child{font-size:10px}.abilities{width:100%}.abilities button{height:49px;flex:1}.gameBottom .playerHud small{display:none}.statGrid{gap:6px}.statCard{padding:10px}.statCard b{font-size:14px}.statCard strong{font-size:15px}.skillTree{gap:18px 6px}.skillNode{padding:9px;min-height:175px}.skillNode strong{font-size:15px}.skillNode span{font-size:9px}.progressionPanel{padding:14px}.treeHeadings{font-size:7px;letter-spacing:.3px}#toast{bottom:125px}.modalBox{max-height:calc(100dvh - 24px)}#touchPad{bottom:135px}.paletteGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:620px) and (min-width:701px){#packPanel{top:195px;max-height:calc(100dvh - 290px);width:178px}.cameraDock{top:151px}.worldDock{max-width:330px}#mechanicHud{top:129px}#groundLoot{top:215px;max-height:calc(100dvh - 320px)}#bossReturn{top:198px}.zoneHud strong{font-size:18px}.playerHud{padding:9px}.playerHud small{font-size:8px;margin-top:5px}.abilities button{height:55px}}
/* Ashen Oath: restrained HUD, character creation and expanded inventories. */
#pauseBtn{min-width:92px;white-space:nowrap;font-size:11px;padding:11px 14px;border:1px solid #71816a;background:#15271fee}.worldDock{max-width:305px;gap:5px}.worldDock kbd{display:none}.cameraDock,.abilities{display:none!important}.gameBottom{right:auto;max-width:300px}.playerHud{width:290px;background:linear-gradient(130deg,#10221fe8,#182523d9);border-color:#596550}.playerHud #runHint{display:none}#packPanel{top:284px;right:18px;max-height:calc(100dvh - 308px);width:210px;border-color:#626950;background:linear-gradient(145deg,#182a27f5,#0c1a1ef2)}#packBody{padding:9px}.packGrid{margin-bottom:8px}.packSlot{background:linear-gradient(135deg,#293b32,#132524);border-color:#4b5e49;box-shadow:inset 0 1px #b4ba8230}#itemDetail{max-height:45px;min-height:0;font-size:8px}#expansionPanel{margin-top:12px;padding-top:10px;border-top:1px solid #79684977}#expansionPanel .packLabel{color:#c4b88e}#expansionHint{height:134px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;background:repeating-linear-gradient(135deg,#152522,#152522 8px,#192925 8px,#192925 9px);border:1px dashed #657052;border-radius:4px;padding:10px}.bagOutline{font:32px Georgia;color:#bfb18a}#expansionHint strong{font:15px Georgia;color:#cbbb92}#expansionHint small{font-size:9px;line-height:1.65;color:#91a389}#expansionPanel.unlocked{border-color:#b9a16b}#extraBagSlots{margin-top:8px}.onboardingSigil{font:58px Georgia;color:#d4c391;width:85px;height:85px;display:grid;place-items:center;border:1px solid #b3b187;transform:rotate(-4deg);margin:0 auto 30px;background:radial-gradient(#7a836144,#162822);box-shadow:0 0 65px #b8b48419}.modeOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.modeOption{display:flex;flex-direction:column;text-align:left;align-items:start;gap:12px;padding:20px;background:linear-gradient(140deg,#24392d,#101e24);border:1px solid #54604a}.modeOption[data-mode=hard]{background:linear-gradient(140deg,#3b2a32,#191d29);border-color:#71505c}.modeOption.active{outline:2px solid #d4c595;outline-offset:2px}.modeOption small{font-size:8px;letter-spacing:1.6px;color:#b9b18e}.modeOption strong{font:27px Georgia;color:#e6dec4}.modeOption span{font-size:11px;line-height:1.7;color:#b4bda9}.classOption canvas{display:block;width:76px;height:76px;margin:0 auto 10px;image-rendering:pixelated}.classOptions{gap:12px}.classOption{min-width:0;padding:15px}.classOption strong{font:23px Georgia}.inputHint{font-size:10px!important;line-height:1.6}#accountError,#characterError{min-height:20px;color:#efb3a5;font-size:12px}#createAccount,#chooseFirstClass{width:100%;padding:15px;margin-top:10px}#accountName{font:24px Georgia;letter-spacing:1.5px;padding:16px;margin-top:8px}.oathPanel{margin-top:30px;padding-top:25px;border-top:1px solid #806171}.oathPanel h2{color:#e5c1ac}.oathGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.oathGrid article{padding:15px;background:linear-gradient(135deg,#342a30,#182825);border:1px solid #5f5654}.oathGrid small{font-size:9px;color:#c7b280}.oathGrid h3{font:21px Georgia;color:#dfd4bd;margin:10px 0}.oathGrid p{font-size:11px}.oathGrid span{display:block;font-size:10px;color:#d5b98a;margin-top:12px}.realmMeter{height:5px;background:#202c28;overflow:hidden;margin-top:9px}.realmMeter i{height:100%;display:block;background:linear-gradient(90deg,#9da986,#dbb98f,#c293b0);transition:width .5s}#realmState{font-size:9px;color:#cdb8d7;margin-top:5px}.sceneVeil{position:absolute;inset:0;pointer-events:none;background:#16132a;opacity:0;z-index:9}.sceneVeil.entering{animation:rift-entry 1.1s ease-out}@keyframes rift-entry{0%{opacity:.98}40%{opacity:.75}100%{opacity:0}}.touchActions{display:flex;gap:8px;pointer-events:auto}.touchActions button{width:52px;height:52px;padding:4px;border-radius:50%;font-size:9px;background:#1b2e28cc;border-color:#9baf8b}#groundLoot{top:300px;max-height:calc(100dvh - 400px)}#storeSelected{margin-top:6px;padding:5px}
@media(max-width:700px){.modeOptions{grid-template-columns:1fr;gap:10px}.modeOption{padding:14px;gap:7px}.modeOption strong{font-size:24px}.modeOption span{font-size:10px}.classOptions{gap:5px}.classOption{padding:10px 6px}.classOption strong{font-size:17px}.classOption span{font-size:9px}.classOption small{font-size:8px}.classOption canvas{width:66px;height:66px}.gameBottom{left:10px;bottom:8px;width:calc(100% - 20px);max-width:none}.playerHud{width:100%}#packPanel{top:258px;right:10px;width:149px;max-height:calc(100dvh - 315px)}#packBody{padding:6px}#expansionHint{height:102px;padding:6px;gap:3px}#expansionHint strong{font-size:12px}#expansionHint small{font-size:8px}.bagOutline{font-size:23px}#extraBagSlots{margin-top:5px}#expansionPanel{margin-top:8px;padding-top:7px}#pauseBtn{min-width:68px;font-size:9px;padding:8px}#groundLoot{top:290px;max-height:calc(100dvh - 370px)}#touchPad{bottom:74px}.oathGrid{grid-template-columns:1fr}.worldDock{top:117px;max-width:calc(100% - 20px)}#mechanicHud{top:188px}#bossReturn{top:255px}#toast{bottom:70px}#realmState{font-size:8px}}
@media(max-height:600px) and (min-width:701px){#packPanel{top:205px;max-height:calc(100dvh - 226px);width:182px}.worldDock{top:105px}#groundLoot{top:210px;max-height:calc(100dvh - 300px)}}

/* Phase thresholds share the actual encounter health breakpoints. */
#bossHud .bar{position:relative;height:7px;overflow:visible}#bossHud .bar:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(var(--phase-stop-a) - 1px),#f8ebce var(--phase-stop-a),transparent calc(var(--phase-stop-a) + 1px)),linear-gradient(to right,transparent calc(var(--phase-stop-b) - 1px),#f8ebce var(--phase-stop-b),transparent calc(var(--phase-stop-b) + 1px)),linear-gradient(to right,transparent calc(var(--phase-stop-c) - 1px),#f8ebce var(--phase-stop-c),transparent calc(var(--phase-stop-c) + 1px))}#bossHud[data-phase="3"] .bar i{background:#ce91ca}#bossHud[data-phase="4"] .bar i{background:linear-gradient(90deg,#cd7dab,#f4dba0)}#bossHud[data-phase="4"]{border-color:#dbba8b}#respawnNow{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 17px;font:inherit;color:#f8ebce;background:linear-gradient(#3a2818f2,#24180ff2);border:2px solid #c49a6c;border-radius:4px;cursor:pointer;box-shadow:0 0 0 2px #0e0b17,0 6px 22px #000a}#respawnNow:hover{border-color:#fde89a;box-shadow:0 0 0 2px #0e0b17,0 0 18px #fde89a55}#respawnNow .rsLabel{font-size:13px;letter-spacing:.14em;line-height:1}#respawnNow .rsKey{font-size:9px;letter-spacing:.12em;line-height:1;padding:4px 6px;color:#2a1d14;background:#f2e7c9;border-radius:3px;box-shadow:inset 0 -2px 0 #bba88c}body.fallen #toast{bottom:36px}/* v0.33.10 · ascendant phases: one tick per phase, colour climbs through the late phases */#bossHud.ascendant .bar:after{background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / var(--phase-n) - 1px),#f8ebce calc(100% / var(--phase-n) - 1px),#f8ebce calc(100% / var(--phase-n)))}#bossHud[data-phase="5"] .bar i{background:linear-gradient(90deg,#e0a35c,#f4dba0)}#bossHud[data-phase="5"]{border-color:#e0b37a}#bossHud[data-phase="6"] .bar i{background:linear-gradient(90deg,#d96a6a,#f2b48a)}#bossHud[data-phase="6"]{border-color:#e39a86}#bossHud[data-phase="7"] .bar i{background:linear-gradient(90deg,#b45fd1,#ef9ac4)}#bossHud[data-phase="7"]{border-color:#d79ad9}#bossHud[data-phase="8"] .bar i{background:linear-gradient(90deg,#7a8cf0,#d8c4ff)}#bossHud[data-phase="8"]{border-color:#b6b4ff}#bossHud[data-phase="9"] .bar i{background:linear-gradient(90deg,#fdd17a,#fffaea)}#bossHud[data-phase="9"]{border-color:#fde89a;box-shadow:0 0 14px #fde89a55}#encounterTask{line-height:1.5}#encounterHint{line-height:1.4}
/* v0.9: one responsive HUD rail; location, navigation and objectives flow together. */
#gameHeader{position:absolute;inset:var(--hud-gap) auto auto var(--hud-gap);width:var(--hud-left-width);display:flex;flex-direction:column;align-items:stretch;gap:10px;max-height:calc(100dvh - 230px);overflow:auto;pointer-events:none}
#gameHeader>*{pointer-events:auto}.zoneHud{width:100%;max-width:none;box-sizing:border-box;padding:12px}.zoneHud strong{font-size:clamp(15px,2vw,23px);overflow-wrap:anywhere}.zoneHud span{font-size:10px}
#zoneContainer .worldDock{position:static;max-width:none;display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.worldDock button{flex:1 1 42%;white-space:normal;padding:7px;font-size:10px}
#gameHeader #pauseBtn{position:fixed;top:var(--hud-gap);right:var(--hud-gap);width:var(--hud-rail);height:32px;padding:5px;min-width:0}
#gameHeader #bossHud,#gameHeader #mechanicHud{position:static;transform:none;width:100%;min-width:0;max-width:none;margin:0;padding:10px;box-sizing:border-box}#bossName{display:block;line-height:1.5}#encounterName{font-size:15px}
#packPanel{top:var(--hud-pack-top);right:var(--hud-gap);width:var(--hud-rail);max-height:var(--hud-pack-height);overflow:auto;box-sizing:border-box}#packToggle{gap:8px;align-items:flex-start}#packName{min-width:0;overflow-wrap:anywhere;line-height:1.5;text-align:left}#packCount{flex-shrink:0;font-size:8px;margin-top:2px}
#packVitals{padding:10px;border-bottom:1px solid #566448}.packLevelRow{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#b5c0a7;margin-bottom:6px;flex-wrap:wrap}.packLevelRow strong{font-weight:500;color:#dfd4ad}#packVitals .xpBar{height:4px;margin:0 0 9px}#packXPFill{background:linear-gradient(90deg,#a399cd,#e4cc9a)}
#packVitals .playerHud{position:static;width:auto;padding:0;border:0;background:none;box-shadow:none}#packVitals .playerHud>div:first-child{font-size:9px;gap:6px;flex-wrap:wrap}#packVitals .bar{display:block;height:4px;margin-top:6px}#packVitals #classResource{display:block;font-size:8px;line-height:1.5;margin-top:6px}.gameBottom{display:none}#teamHud{display:none}
#chatPanel{position:absolute;left:var(--hud-gap);bottom:var(--hud-gap);width:min(330px,var(--hud-left-width));box-sizing:border-box;background:#0d1b20e8;border:1px solid #465b4c;border-radius:5px;overflow:hidden;z-index:3}#chatToggle{display:flex;justify-content:space-between;gap:6px;width:100%;padding:8px;border:0;border-radius:0;font-size:8px;letter-spacing:.5px;color:#c6c4a5}#chatMessages{height:112px;overflow:auto;overscroll-behavior:contain;padding:7px;font-size:10px;line-height:1.5}.chatLine{margin-bottom:6px;overflow-wrap:anywhere}.chatLine strong{color:#afcbb6;margin-right:6px}.chatLine span{color:#dae0cc}.loreLine strong{color:#dfb586}.loreLine span{color:#e2c9e7;font-family:Georgia,serif;font-size:12px}.chatCompose{display:flex;gap:4px;padding:5px}.chatCompose input{width:0;min-width:0;flex:1;padding:7px;font-size:10px}.chatCompose button{padding:5px;font-size:9px}#chatStatus{display:block;padding:0 7px 6px;font-size:8px;color:#8eab96}.equipReason{color:#dbc594;line-height:1.5}
#groundLoot{left:var(--hud-gap);top:auto;bottom:220px;width:var(--hud-left-width);max-width:250px;max-height:calc(100dvh - 430px);box-sizing:border-box}#bossReturn{top:auto;bottom:var(--hud-gap);left:50%;transform:translateX(-50%);max-width:calc(100% - var(--hud-rail) - var(--hud-left-width) - 64px);white-space:normal}#interaction{bottom:70px;max-width:calc(100% - var(--hud-rail) - var(--hud-left-width) - 48px);left:50%;transform:translateX(-50%)}
@media(max-width:700px){#gameHeader{gap:6px}.zoneHud{padding:8px}.worldDock button{font-size:8px;padding:5px}#packVitals{padding:7px}#gameHeader #mechanicHud{padding:7px}#encounterName{font-size:12px}#encounterTask,#encounterHint{font-size:8px}#chatMessages{height:90px;font-size:9px}.loreLine span{font-size:10px}#chatToggle{font-size:7px}#chatStatus{font-size:7px}#bossReturn{left:var(--hud-gap);bottom:207px;transform:none;width:var(--hud-left-width);max-width:none;font-size:9px}#interaction{left:var(--hud-gap);transform:none;bottom:206px;max-width:var(--hud-left-width)}#groundLoot{bottom:247px;max-height:calc(100dvh - 420px)}.classOption strong{font-size:15px;overflow-wrap:anywhere}}
@media(max-height:550px){#chatMessages{height:48px}#chatStatus{display:none}#gameHeader{max-height:calc(100dvh - 145px)}#groundLoot{bottom:150px;max-height:calc(100dvh - 250px)}#expansionHint{height:auto;min-height:70px}#bossReturn{bottom:145px}#interaction{bottom:145px}}
@media(max-width:700px),(max-height:550px){#gameScreen:has(#groundLoot:not([hidden])) #chatPanel{display:none}#gameScreen:has(#groundLoot:not([hidden])) #gameHeader{max-height:135px}#gameScreen:has(#groundLoot:not([hidden])) .worldDock{display:none}#gameScreen:has(#groundLoot:not([hidden])) #groundLoot{top:195px;bottom:auto;max-height:calc(100dvh - 203px)}#gameScreen:has(#groundLoot:not([hidden])) #bossReturn{top:150px;bottom:auto;left:var(--hud-gap);transform:none;max-width:var(--hud-left-width);width:var(--hud-left-width)}#gameScreen:has(#groundLoot:not([hidden])) #interaction{display:none}}
/* Chat stays out of combat until Enter opens history and composition. */
#chatFeed{position:absolute;left:var(--hud-gap);bottom:var(--hud-gap);width:min(370px,var(--hud-left-width));pointer-events:none;display:flex;flex-direction:column;gap:5px;z-index:3}#chatFeed[hidden],#chatPanel[hidden]{display:none!important}.chatToast{padding:7px 9px;background:linear-gradient(90deg,#101d24de,#101d2455);border-left:2px solid #9bab83;border-radius:2px;animation:chat-expire var(--chat-remaining,8000ms) linear forwards}.chatToast .chatLine{margin:0;font-size:11px;line-height:1.45;text-shadow:0 1px 2px #000}.chatToast .loreLine span{font-size:12px}#chatPanel{z-index:8;background:#0d1b20f5}#chatMessages{height:clamp(110px,24vh,230px)}#chatToggle{cursor:pointer}#chatInput{font-size:12px}.chatCompose{padding:8px}#gameScreen:has(#groundLoot:not([hidden])) #chatPanel{display:block}#gameScreen:has(#groundLoot:not([hidden])) #chatPanel[hidden]{display:none!important}@keyframes chat-expire{0%,75%{opacity:1}100%{opacity:0}}@media(max-width:700px){.chatToast{padding:5px}.chatToast .chatLine,.chatToast .loreLine span{font-size:9px}#chatMessages{height:150px}}@media(prefers-reduced-motion:reduce){.chatToast{animation:none}}

/* Native 32px sprites, integer scaling in the prominent item views. */
.packSlot img,.slot img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.itemCard img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.lootStage img,.detail img{image-rendering:pixelated}
.lootStage svg{image-rendering:pixelated}
/* THE GILDED NIGHT — ink, oxidized brass, moonstone and warm parchment. */
:root{--bg:#0a141e;--panel:#14232d;--line:#3b5158;--text:#ede8d8;--muted:#93abae;--gold:#e2c58f;--green:#96cbbb}
body{background:#07121b;color:var(--text)}button,input,select{border-radius:3px}button{transition:background .16s,border-color .16s,color .16s}button:hover{border-color:#c2aa77;background-color:#253942}button:focus-visible{outline:2px solid #f1d29c;outline-offset:2px}kbd{background:#101a23;border:1px solid #627071;border-bottom:2px solid #8c9b8c;color:#f1dbad;border-radius:3px}
#app{background:linear-gradient(135deg,#182b34f8,#0c1923fc 58%,#1b2634fa);border:1px solid #97825c;border-radius:6px;box-shadow:0 0 0 5px #09141dd9,0 20px 80px #000b}#app header{background:#0d1b24d9;border-bottom:1px solid #77684e}.brand{color:#f1d7a4;letter-spacing:4px}.brandmark{border-color:#ac9568;box-shadow:inset 0 0 0 3px #172730;color:#f1d7a4}.brand small{letter-spacing:2.5px;color:#9caeac}.subnav{background:#182731;border-bottom-color:#3a4c51}.eyebrow,.sectionTitle{color:#beaa81;letter-spacing:2px}h1,h2,h3,.zoneHud strong,#encounterName{font-family:Georgia,'Times New Roman',serif;font-weight:400}h1 em{color:#edd1a1}.primary{background:linear-gradient(#dfc59a,#bfa475);color:#18232a;border:1px solid #f2dcac;box-shadow:inset 0 1px #fff4d6}.primary:hover{background:#eddbb6;color:#142129}.modalBox{background:linear-gradient(150deg,#1d303b,#101d29 70%);border:1px solid #aa9167;box-shadow:0 0 0 5px #101b24c9,0 24px 100px #000c;border-radius:5px}.modalBox:before{content:'';display:block;position:absolute;top:7px;left:7px;right:7px;height:12px;border-top:1px solid #b59b6255;pointer-events:none}.dungeon,.heroCard,.expeditionDetail,.loadoutBox,.contract{background:linear-gradient(145deg,#1b2d36,#111e28);border-color:#506065;border-radius:5px}.dungeon:hover,.dungeon.selected{border-color:#d3b883;box-shadow:inset 0 0 0 1px #c7ad6833,0 7px 20px #0004}.dungeon .art{border-bottom:1px solid #827151}.itemCard{position:relative;background:radial-gradient(ellipse at 50% 33%,color-mix(in srgb,var(--rarity) 12%,#192832),#101e29 70%);border-color:color-mix(in srgb,var(--rarity) 42%,#253741);border-radius:4px}.itemCard:hover{background-color:#20333d;border-color:var(--rarity);box-shadow:inset 0 0 0 1px #fff1cc18}.itemCard img{margin:15px auto 12px;filter:drop-shadow(0 4px 0 #07121b)}.itemCard small{letter-spacing:1.1px;font-size:9px}.itemCard h3{font-size:17px}.itemCard.locked{opacity:.48}
.zoneHud,#gameHeader #bossHud,#gameHeader #mechanicHud,#packPanel,#groundLoot{background:linear-gradient(120deg,#142630f5,#0e1c27f5);border:1px solid #75806a;border-radius:4px;box-shadow:0 4px 22px #0005,inset 0 0 0 3px #07141c66}.zoneHud{border-top:2px solid #c4ac7a}.zoneHud small{color:#c8b88e;letter-spacing:1.8px}.zoneHud strong{color:#f0e1c4;letter-spacing:.3px}.zoneHud span{color:#9bb2b1}.worldDock button{background:#1d303a;border-color:#485b5d;color:#c4d1c8}.worldDock button:hover{background:#32454b;border-color:#bda67b}#gameHeader #bossHud{border-color:#af8761;background:linear-gradient(100deg,#332930f2,#18242ef5)}#bossName{font-family:Georgia,serif;color:#f0d8b0;font-size:12px}#bossHealth{background:linear-gradient(90deg,#964f5a,#d99981)!important;box-shadow:inset 0 1px #f1c6a0}.bar{background:#08141d;border:1px solid #465253;border-radius:1px}.bar.health i{background:linear-gradient(90deg,#4b9c8c,#b1d7b2)}#mechanicHud{border-left:2px solid #9ba88a!important}#encounterTask{color:#e7dac0}#encounterHint{color:#a0b8ba;line-height:1.6}#pauseBtn{background:#132530f5!important;border-color:#69745f!important;color:#d2c8ae}
#packPanel{display:flex;flex-direction:column;overflow:hidden;border-top:2px solid #b49c72}#packToggle{padding:10px;background:#1d3039;border:0;border-bottom:1px solid #50615b}#packName{color:#e7d6b4;font-family:Georgia,serif;font-size:12px}#packCount{color:#a7b9b7}#packVitals{flex:none;background:#101e29;padding:9px 10px;border-bottom:1px solid #425450}#packBody{overflow:auto;min-height:0;padding:10px;scrollbar-width:thin;scrollbar-color:#677772 #12232d}.packLabel{font-size:8px;color:#acb8a5;letter-spacing:1.5px;margin:0 0 7px}.packGrid{gap:4px;margin-bottom:9px}.packSlot{position:relative;aspect-ratio:1;border-radius:2px;border:1px solid #455a5e;background:linear-gradient(145deg,#243640,#111f2a);box-shadow:inset 0 1px #62726a22;padding:3px}.packSlot.filled{border-color:color-mix(in srgb,var(--rarity) 45%,#31464d);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--rarity) 11%,#1b2c38),#0f1d28)}.packSlot:hover,.packSlot.picked{border-color:#efd2a2;background:#30444b}.packSlot img{width:32px;height:32px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px #06121a)}.rarityDot{height:2px!important;bottom:2px!important;left:5px!important;right:5px!important;width:auto!important;border-radius:0!important}.emptySlot{color:#788f94;font-size:7px;letter-spacing:.5px}.packTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0 7px}.packTabs button{display:flex;align-items:center;justify-content:space-between;gap:3px;border:1px solid #485957;padding:7px 5px;background:#10212d;color:#96adaa;font-size:9px}.packTabs button[aria-selected="true"]{color:#f0d6a7;border-color:#bda578;background:linear-gradient(100deg,#3a3b32,#283734);box-shadow:inset 0 -2px #d5b77e}.packTabs button[aria-disabled="true"]{color:#73898d}.packTabs span{font-family:Georgia,serif;font-size:10px;color:#ad9a72}#itemDetail{min-height:35px;max-height:70px;font-size:9px;padding:7px 0 1px;border-top:1px solid #3b5056;line-height:1.5}#itemDetail strong{font-family:Georgia,serif;font-size:12px}#expansionPanel{display:none!important}
#nearbyPanel{flex:none;border-top:1px solid #6f765f;padding:10px;background:linear-gradient(#1b2d36,#101f2a);max-height:165px;overflow:auto}#nearbyHeading{color:#c3b38d;margin-bottom:8px}#nearbyPlayers{display:flex;flex-direction:column;gap:8px}#nearbyPlayers[hidden]{display:none}.nearbyPerson{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid #42535455}.nearbyPerson>i{width:7px;height:7px;background:var(--person-color);transform:rotate(45deg);flex:none}.nearbyPerson>span:nth-child(2){flex:1;min-width:0}.nearbyPerson strong{display:block;font-size:10px;color:#e2dfce;overflow-wrap:anywhere}.nearbyPerson small{display:block;font-size:8px;color:#8ea8aa;margin-top:3px}.nearbyHealth{font-size:9px;color:#8ac4b0}.nearbyEmpty{margin:4px 0;color:#8fa5a9;font:italic 11px/1.6 Georgia,serif}
#nearbyPanel #interaction{position:static!important;transform:none!important;display:flex;align-items:center;gap:9px;width:100%;max-width:none!important;margin:0;padding:10px 7px;background:linear-gradient(115deg,#394338,#243539);border:1px solid #c2aa78;border-radius:3px;box-shadow:none;text-align:left;white-space:normal;font-size:11px;color:#f0dfbc}#nearbyPanel #interaction[hidden]{display:none!important}#interaction kbd{font:13px Georgia,serif;min-width:21px;padding:5px;text-align:center}#interactText{overflow-wrap:anywhere}#gameScreen:has(#groundLoot:not([hidden])) #nearbyPanel #interaction:not([hidden]){display:flex!important}#groundLoot{border-color:#ac966d;background:radial-gradient(ellipse at 50% 10%,#344044,#13232eef 66%)}#chestArt svg{width:126px;height:126px;filter:drop-shadow(0 5px #09151b)}#lootTitle{font-family:Georgia,serif;color:#e9d5b1}#lootDescription{color:#a7b9b6}#takeAllLoot{background:#38483e;border-color:#af986b;color:#eed7ac}#chatPanel{border-color:#687666;background:#12232df5}.chatToast{background:linear-gradient(90deg,#10242aee,#10242a66);border-left-color:#d2b582}
@media(max-width:700px){#packBody,#nearbyPanel{padding:7px}.packTabs button{font-size:8px;padding:6px 3px}.packTabs span{display:none}#packName{font-size:10px}.packGrid{gap:3px}.packSlot{padding:1px}#nearbyPanel{max-height:125px}#nearbyPanel #interaction{padding:7px 4px;font-size:9px}.nearbyPerson small{font-size:7px}.nearbyEmpty{font-size:10px}#itemDetail{max-height:45px;font-size:8px}}
@media(max-height:550px){#packVitals{padding:5px 8px}#packVitals #classResource{display:none}#nearbyPanel{max-height:88px;padding:6px}#packToggle{padding:6px}.packTabs{margin-top:5px}#itemDetail{max-height:35px;min-height:20px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Mythic gear has a setting worthy of the object, without obscuring its pixels. */
.itemCard[data-tier="3"],.packSlot[data-tier="3"]{background:radial-gradient(ellipse at 50% 45%,#75523650,#241f2c 75%);border-color:#b59358}.itemCard[data-tier="4"],.packSlot[data-tier="4"]{background:radial-gradient(ellipse at 50% 45%,#70639160,#1c2337 75%);border-color:#b2a1d1}.itemCard[data-tier="3"]:before,.itemCard[data-tier="4"]:before{content:'';position:absolute;inset:5px;border:1px solid #e3cfa52a;pointer-events:none;clip-path:polygon(0 0,18% 0,18% 3%,3% 3%,3% 18%,0 18%,0 0,100% 0,100% 18%,97% 18%,97% 3%,82% 3%,82% 0,100% 0,100% 100%,82% 100%,82% 97%,97% 97%,97% 82%,100% 82%,100% 100%,0 100%,0 82%,3% 82%,3% 97%,18% 97%,18% 100%,0 100%)}.itemCard[data-tier="4"] h3{color:#e5d6fa}.itemCard[data-tier="3"] h3{color:#f1d39a}

#nearbyPanel #interactBtn{display:flex;align-items:center;gap:7px;width:100%;padding:0;border:0;box-shadow:none;background:none;color:inherit;font:inherit;text-align:left;white-space:normal}#nearbyPanel #interactBtn:hover{color:#fff4d8}#nearbyPanel #interactBtn kbd{flex:none}

/* Ever Ruin: bone, antique brass, deep petrol. Art remains behind semantic UI. */
#titleScreen{position:fixed;inset:0;z-index:60;overflow:hidden;background:#081719 url('/assets/ever-ruin-moonwell.webp') 64% center/cover no-repeat;color:#f6e8ca}#titleScreen[hidden]{display:none}.titleVignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,14,18,.88),rgba(4,17,21,.3) 48%,transparent 75%),linear-gradient(0deg,#050f17 0%,transparent 28%)}.titleCopy{position:absolute;top:50%;left:8%;transform:translateY(-50%);width:min(430px,80vw)}.titleEyebrow{font-size:10px;letter-spacing:.32em;color:#d5b57d}.titleCopy h1{font:500 clamp(64px,8vw,118px)/.84 Georgia,serif;letter-spacing:.06em;margin:28px 0 22px;text-shadow:0 4px 28px #0008}.titleCopy h1 span{display:block;font-size:1.12em;letter-spacing:.105em;color:#dbbf87;margin-top:14px}.titleRule{color:#d7ad69;display:flex;gap:16px;align-items:center;width:220px}.titleRule:before,.titleRule:after{content:'';height:1px;background:linear-gradient(90deg,transparent,#c29c64);flex:1}.titleRule:after{transform:rotate(180deg)}.titleLore{font:italic 21px/1.5 Georgia,serif;color:#d1d3c6;margin:20px 0 30px}.titlePlay{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:260px;padding:17px 26px;border:1px solid #e2bd7c;border-radius:2px;background:linear-gradient(135deg,#ead09a,#b38a4c);box-shadow:0 5px 26px #0008,inset 0 0 0 3px #67512f55;color:#17262b;font:600 17px Georgia,serif;letter-spacing:.12em;text-decoration:none;cursor:pointer;transition:filter .2s,transform .2s}.titlePlay:hover{filter:brightness(1.15);transform:translateY(-2px)}.titlePlay:focus-visible{outline:3px solid #92e1db;outline-offset:5px}#titleStatus{font-size:11px;line-height:1.6;color:#bac5c2;max-width:300px}.titleFooter{position:absolute;bottom:25px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.23em;color:#a0b3b5}#modal{z-index:80}#modal:has(#accountName) .modalBox{background:linear-gradient(145deg,#142e35f5,#071921fa);border:1px solid #b5915d;box-shadow:0 24px 100px #000c,inset 0 0 60px #56857b12}#modal:has(#accountName){background:#04101788;backdrop-filter:blur(4px)}.onboardingSigil{color:#e2c58d!important;border-color:#b99360!important}#accountName{background:#05181e;border-color:#536f70;color:#f0dfba}#packPanel{background:linear-gradient(150deg,#163038ee,#091a25f5);border-color:#846f49}#packPanel .packLabel{color:#cbb780}@media(max-width:600px){#titleScreen{background-position:58% center}.titleVignette{background:linear-gradient(90deg,#041218ce,#04121855),linear-gradient(0deg,#041218,transparent 65%)}.titleCopy{left:8%;top:53%}.titleCopy h1{font-size:72px}.titleFooter{font-size:8px;gap:20px}.titleFooter span:last-child{display:none}.titleLore{font-size:18px}}@media(prefers-reduced-motion:reduce){.titlePlay{transition:none}}

/* v0.14.3 – Art-centered inventory: every pixel item is centered on both axes.
   Earlier .packSlot img rules forced a 32px inline image into a shrinking grid
   cell, leaving the image on a text baseline. The dimensions are now bounded by
   its own slot, with no transform/hover motion that could blur sprite pixels. */
.packGrid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.packSlot{display:grid!important;place-items:center!important;isolation:isolate;line-height:1;min-width:0;min-height:0;text-align:center;vertical-align:middle;padding:3px!important;overflow:hidden}
.packSlot img{display:block!important;grid-area:1/1!important;width:min(100%,34px)!important;height:min(100%,34px)!important;min-width:0;min-height:0;margin:0!important;object-fit:contain!important;object-position:50% 50%!important;image-rendering:pixelated;pointer-events:none;transform:none!important;filter:drop-shadow(0 2px 0 #050d13a8)}
.packSlot .emptySlot{grid-area:1/1;align-self:center;justify-self:center;line-height:1.15;max-width:100%;overflow-wrap:anywhere}
.packSlot .rarityDot{display:none!important}
.packSlot .raritySigil{position:absolute;z-index:2;top:2px;right:2px;width:13px;height:13px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--rarity) 45%,#111d27);background:#101820e6;border-radius:2px;color:var(--rarity);pointer-events:none;box-shadow:0 1px 2px #0009}
.raritySigil svg{display:block;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.packSlot[data-tier="3"] .raritySigil,.packSlot[data-tier="4"] .raritySigil{width:14px;height:14px;box-shadow:0 0 6px color-mix(in srgb,var(--rarity) 33%,transparent),0 1px 2px #000a}
@media(max-width:700px){.packSlot{padding:2px!important}.packSlot img{width:min(100%,29px)!important;height:min(100%,29px)!important}.packSlot .raritySigil{width:11px;height:11px;top:1px;right:1px}.raritySigil svg{width:9px;height:9px}}
@media(prefers-reduced-motion:reduce){.packSlot,.packSlot img,.packSlot .raritySigil{transition:none!important;animation:none!important}}

/* v0.14.4 — Vault workshop. Compact, static item art; no costly blur effects. */
.vaultTitle{gap:24px;align-items:flex-end;flex-wrap:wrap}
.vaultTitle>div:first-child{max-width:580px}
.vaultFilters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.vaultFilters label{display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.08em;color:#bcbdad}
.vaultFilters select{min-width:125px;padding:10px 11px;font-size:11px;background:#12262b;border-color:#53645c}
.vaultWorkbench{display:grid;grid-template-columns:minmax(265px,330px) minmax(0,1fr);align-items:start;gap:17px;min-height:420px}
.vaultBag,.vaultStorage{border:1px solid #4a625d;background:linear-gradient(140deg,#172931,#111d26);border-radius:6px;padding:19px;min-width:0}
.vaultStorage{border-color:#746d53;background:linear-gradient(140deg,#1b2d32,#0f1e28)}
.vaultSectionHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:19px;min-width:0}
.vaultSectionHead h2{font:25px Georgia,serif;color:#ebdcc0;margin:6px 0 0}
.vaultSectionHead h2 span{font:11px system-ui;color:#99afa4;margin-left:5px}
.vaultSectionHead small{color:#c2a97c;letter-spacing:.18em;font-size:9px}
.vaultPager{display:flex;gap:3px}.vaultPager button{width:36px;height:34px;border:1px solid #4b6669;background:#1a3037;color:#a4b7b6}
.vaultPager button.active{border-color:#dec18b;color:#f8dbab;background:#2c3733}.vaultPager button:disabled{opacity:.35}
.vaultSlots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vaultTile{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;border:1px solid #405963;background:#162830;overflow:hidden;cursor:pointer;padding:4px;isolation:isolate;color:#80989b;border-radius:3px}
.vaultTile img{display:block;object-fit:contain;object-position:center;width:75%;height:75%;max-width:56px;max-height:56px;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 3px 1px #071115)}
.vaultTile.hasItem{border-color:color-mix(in srgb,var(--rarity) 42%,#3d4e55);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--rarity) 48%,transparent)}
.vaultTile.chosen,.vaultTile:focus-visible{outline:2px solid #f7dca0;outline-offset:1px}
.vaultTile.sealed{opacity:.68;cursor:default}.vaultTile.sealed img{filter:grayscale(.38) brightness(.72)}
.vaultTile .raritySigil{position:absolute;top:3px;right:3px;width:15px;height:15px;color:var(--rarity);border:1px solid currentColor;background:#102129;display:grid;place-items:center;pointer-events:none}
.vaultTile .raritySigil svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.4;fill:none}
.vaultTile .vaultSeal{position:absolute;bottom:3px;right:3px;font-size:12px;color:#ebbc85;pointer-events:none}
.vaultVacant{font:11px system-ui;color:#789198}
.vaultHint{font-size:11px;color:#a6b9b4;line-height:1.6;margin:14px 0}
.vaultAction,.vaultWithdraw{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:13px 17px}
.vaultAction:disabled,.vaultWithdraw:disabled{opacity:.46;cursor:default}
.vaultSelection{border:1px solid #33494b;padding:12px;min-height:78px;margin-top:15px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:#8da8a6}
.vaultSelection strong{font:16px Georgia,serif}.vaultSelection span{font-size:10px}.vaultSelection small{font-size:10px;line-height:1.5;color:#9baea8}
.vaultLegend{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#9cb9ac;white-space:nowrap}
.vaultDropzone{border:1px dashed #62746a;background:#0b19213d;padding:12px;min-height:260px;border-radius:4px;transition:border-color .12s,background-color .12s}
.vaultDropzone.receiving{border-color:#e7cf91;background:#a2bd6e15}
.vaultDropHint{font-size:10px;letter-spacing:.07em;text-align:center;color:#c5ba99;border:1px dashed #344e4a;margin-bottom:13px;padding:12px}
.vaultGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;align-content:start}
.vaultEmpty{grid-column:1/-1;text-align:center;color:#819d9f;font-size:12px;line-height:1.8;margin:35px 6px}
.vaultWithdraw{background:#263734;border:1px solid #8a8067;color:#ebd7a9}.vaultWithdraw:not(:disabled):hover{background:#354941}
.vaultTile.dropHover{border:2px solid #e7cf91}
@media(max-width:950px){.vaultWorkbench{grid-template-columns:1fr}.vaultBag{max-width:none}.vaultSlots{grid-template-columns:repeat(6,minmax(0,1fr))}.vaultTile{max-height:90px}}
@media(max-width:600px){.vaultTitle{margin-bottom:20px}.vaultFilters{width:100%}.vaultFilters label{flex:1;min-width:110px}.vaultFilters select{width:100%;min-width:0}.vaultBag,.vaultStorage{padding:12px}.vaultSlots{grid-template-columns:repeat(4,minmax(0,1fr))}.vaultGrid{grid-template-columns:repeat(auto-fill,minmax(53px,1fr))}.vaultLegend{display:none}}

/* Storage keepers are separate destinations: top-level navigation is unavailable
   while the world journal is open. Return to the world to visit another. */
#nav button:disabled{opacity:.28!important;cursor:not-allowed!important;pointer-events:none!important;text-decoration:none!important}
#nav button:disabled:hover{background:transparent!important}

/* v0.14.6 · Reserve a dedicated badge rail ABOVE the artwork in every slot. */
.packSlot,.vaultTile { box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; padding:18px 3px 3px; overflow:hidden; }
.packSlot { aspect-ratio:auto; min-height:60px; }
.packSlot img,.vaultTile img { display:block; width:calc(100% - 2px); height:calc(100% - 19px); max-width:100%; max-height:none; min-height:0; object-fit:contain; object-position:center; margin:0; flex:1 1 auto; image-rendering:pixelated; }
.packSlot .raritySigil,.vaultTile .raritySigil { top:2px; right:3px; width:14px; height:14px; background:#101a21f2; z-index:3; }
.packSlot.filled::before,.vaultTile.hasItem::before {content:''; position:absolute; top:0; left:0; right:0; height:17px; pointer-events:none; background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 8%,#14232a),#14232a 83%); border-bottom:1px solid #ffffff0c;}
#equipSlots .packSlot::before{content:'';position:absolute;top:0;left:0;right:0;height:17px;pointer-events:none;background:linear-gradient(90deg,#413b24,#262518 85%);border-bottom:1px solid #ffffff10;z-index:0;}
#equipSlots .packSlot.filled::before{background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 10%,#4a4023),#2a2618 82%);}
.vaultTile{aspect-ratio:0.92; min-height:70px;}
.vaultTile .vaultSeal {bottom:2px; left:3px; right:auto;}
@media(max-width:700px){.packSlot{min-height:55px}.vaultTile{min-height:59px}}

/* v0.14.6: the character-sheet equipment slots use the same protected rarity rail. */
.loadoutBox .slot{position:relative;box-sizing:border-box;min-height:88px;padding-top:26px;overflow:hidden;background:linear-gradient(145deg,#3c412f,#1b2720)}
.loadoutBox .slot .raritySigil{position:absolute;right:5px;top:4px;width:16px;height:16px;display:grid;place-items:center;line-height:1;color:var(--rarity);border:1px solid currentColor;background:#111e27;pointer-events:none}
.loadoutBox .slot .raritySigil svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.4;fill:none}
.loadoutBox .slot>img{flex:0 0 auto;max-width:calc(100% - 75px);object-fit:contain;image-rendering:pixelated}
@media(max-width:560px){.loadoutBox .slot{min-height:78px;padding-top:23px}.loadoutBox .slot>img{max-width:35px}}

/* v0.14.8 — Final HUD geometry. Older media queries above used to silently
   reduce the actual inventory width to 210px after the previous sizing patch.
   Reserve the rarity rail inside each cell, without stretching the 34px art. */
#gameScreen #packPanel { width:266px; }
#gameScreen #packPanel #packBody { padding-inline:10px; }
#gameScreen #packPanel .packGrid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
#gameScreen #packPanel .packSlot {
  box-sizing:border-box;
  display:grid!important;
  place-items:center!important;
  width:100%;
  min-width:0;
  min-height:60px;
  aspect-ratio:auto;
  padding:19px 3px 3px!important;
}
#gameScreen #packPanel .packSlot > img {
  display:block!important;
  width:min(100%,34px)!important;
  height:min(100%,34px)!important;
  max-width:34px!important;
  max-height:34px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
/* The equipment's original olive-gold gradient runs from top to bottom;
   the previous overlay used a mismatching brown color in the 17px badge rail. */
#gameScreen #packPanel #equipSlots .packSlot,
#gameScreen #packPanel #equipSlots .packSlot.filled {
  background:linear-gradient(145deg,#343a2d,#17231f);
}
#gameScreen #packPanel #equipSlots .packSlot::before { display:none; }
@media (max-width:700px) {
  #gameScreen #packPanel { width:min(190px,45vw); }
  #gameScreen #packPanel #packBody { padding-inline:7px; }
  #gameScreen #packPanel .packGrid { gap:4px; }
  #gameScreen #packPanel .packSlot { min-height:54px; padding:17px 2px 2px!important; }
  #gameScreen #packPanel .packSlot > img { width:min(100%,29px)!important; height:min(100%,29px)!important; max-width:29px!important; max-height:29px!important; }
}
@media (max-height:650px) and (min-width:701px) {
  #gameScreen #packPanel { width:248px; }
  #gameScreen #packPanel .packSlot { min-height:56px; padding-top:17px!important; }
}


/* v0.14.9: rarity space is *layout*, not a second colored surface.
   No top stripe can overlay either an inventory or a vault tile. */
#gameScreen #packPanel .packSlot::before,
#gameScreen #packPanel .packSlot.filled::before,
.vaultTile::before,
.vaultTile.hasItem::before {
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
}

/* EXALTED RIFTS · editorial dark fantasy treatment. Hover-only movement,
   lightweight gradients, and static artwork avoid adding to combat costs. */
.dungeonCards .dungeon{isolation:isolate;box-shadow:0 8px 28px #03080d48;transition:border-color .16s,transform .16s,box-shadow .16s}
.dungeonCards .dungeon:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 14px 40px #0008,0 0 18px color-mix(in srgb,var(--accent) 13%,transparent)}
.dungeonCards .dungeon .art{background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--accent) 17%,#101a25),var(--tint) 65%,#090d16 100%)}
.dungeonCards .dungeon .copy{position:relative;background:linear-gradient(175deg,#142029,#10171f);padding-top:15px}
.dungeonCards .dungeon .copy:before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 75%,white),transparent);opacity:.7}
.dungeonCards .dungeon .art:after{background:linear-gradient(0deg,#101820 0%,#121b2800 50%)}
.dungeonCards .dungeon .cardFoot{border-top-color:color-mix(in srgb,var(--accent) 20%,#243038)}
.dungeonCards .dungeon.selected{border-color:color-mix(in srgb,var(--accent) 75%,#e6cfac);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 12px 35px #0006}
.dungeonCards .dungeon.selected:before{background:#0d1829e8;color:#f2e3d2;border-color:color-mix(in srgb,var(--accent) 50%,#5f676b)}
@media(prefers-reduced-motion:reduce){.dungeonCards .dungeon,.dungeonCards .dungeon:hover:not(:disabled){transform:none;transition:none}}

/* v0.15.9 LUMINOUS RUIN — ONE ART DIRECTION THROUGH EQUIPMENT, HUD AND MENUS */
:root{--bg:#0b151b;--panel:#162329;--line:#3b5153;--text:#f0e8d5;--muted:#9eb0a8;--gold:#dfc68e;--green:#8abbaa;--cold:#8bbbc1;--ink:#07141a}
body{background:radial-gradient(ellipse at 52% -18%,#2a3d4038,transparent 62%),repeating-linear-gradient(90deg,transparent 0 41px,#d1b78105 42px 43px),var(--bg)}
header,.subnav,footer{background:linear-gradient(110deg,#122328,#101b24 80%);border-color:#46544a}
.dungeon,.expeditionDetail,.heroCard,.itemCard,.loadoutBox,.modalBox,.activeHero{box-shadow:inset 0 1px 0 #c4caa715,0 12px 35px #0002;position:relative}
.dungeon:after,.expeditionDetail:after,.itemCard:after,.heroCard:after,.loadoutBox:after,.modalBox:after{content:'';pointer-events:none;position:absolute;inset:5px;border:1px solid #cad9c00b;border-radius:2px}
.dungeon .art{background:radial-gradient(ellipse at 54% 66%,var(--tint),#0b1b23 82%)}
.dungeon .art:after{background:linear-gradient(0deg,#07151c,transparent 60%)}
.itemCard{background:linear-gradient(140deg,#243039,#101c24 70%);border-bottom-width:3px}
.itemCard img,.relicTease img,.slot img,.inventorySlot img,.cosmeticChest img{image-rendering:pixelated;image-rendering:crisp-edges}
.itemCard:hover{border-color:#8c9b89;transform:translateY(-1px);box-shadow:inset 0 1px 0 #d8d9b72a,0 14px 32px #0006}
.heroCard.active,.dungeon.selected{box-shadow:0 0 0 1px #dac28e44,inset 0 0 20px #ddc08007}
.modalBox{border-color:#778476;box-shadow:0 24px 80px #000a,0 0 0 5px #d0b77b0a,inset 0 0 70px #c6b88606}
.modalBox h2,.pageTitle h1,.intro h1{color:#f0e5ca;text-shadow:0 2px 12px #090f1980}
button.primary{background:linear-gradient(140deg,#ead8a9,#c5a870);color:#152124;border:1px solid #e4c78d;box-shadow:inset 0 1px 0 #fff7d663,0 4px 18px #0003}
button.primary:hover{background:linear-gradient(140deg,#f1e2c0,#d9bb81)}
button:focus-visible,a:focus-visible{outline-offset:3px}
#toast{box-shadow:0 8px 24px #0007}
@media(prefers-reduced-motion:reduce){.itemCard:hover{transform:none}}

/* 0.16.0 Moonwell: left-hand typography is composed against the original image's dark forest. */
#titleScreen{background-position:52% center}
.titleVignette{background:linear-gradient(90deg,#041219a6 0%,#071b1c33 37%,transparent 62%),linear-gradient(0deg,#05121bc9,transparent 24%)}
.titleCopy{left:clamp(28px,6.8vw,125px);width:min(480px,72vw)}
.titleCopy h1{font-size:clamp(65px,8.5vw,128px);letter-spacing:.09em;text-shadow:0 5px 30px #001019}
.titleCopy h1 span{color:#f0d49e;text-shadow:0 5px 31px #050f13}
.titlePlay{border:1px solid #ffe2ab;background:linear-gradient(135deg,#f1d9a7,#bf9961);box-shadow:0 14px 42px #000b,inset 0 0 0 2px #fff4cf25}
/* Full-height moonwell atelier; wardrobe scrolls independently from the fitting room. */
#modal:has(.atelierShell) .modalBox{max-width:min(1120px,calc(100vw - 35px));width:min(1120px,calc(100vw - 35px));padding:27px 30px;border-color:#a48e62;background:linear-gradient(135deg,#142c32,#0b1c26 62%,#122931);box-shadow:0 35px 100px #000c,inset 0 0 75px #9cd5b00d}
.atelierShell>h2{font:normal clamp(25px,3vw,37px)/1.2 Georgia,serif;letter-spacing:.015em;margin:11px 0}
.atelierShell>p{color:#b4c9c5;line-height:1.6;max-width:800px;margin-bottom:20px}
.atelierLayout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);gap:22px}
.atelierPreview{border:1px solid #8f94725c;background:#0a1c24;box-shadow:inset 0 0 45px #79b9be0a;min-width:0;padding:14px;display:flex;flex-direction:column;align-items:stretch}
.atelierPreviewHead{display:flex;justify-content:space-between;gap:8px;color:#d6bd8a;letter-spacing:.13em;font-size:10px}
#atelierOwnership{color:#a9d3c5}
#atelierCanvas{width:100%;height:auto;max-height:316px;object-fit:contain;image-rendering:pixelated;margin:10px 0 0;border:1px solid #657c7044;background:#0d2026}
.atelierSelected{text-align:center;padding:12px 8px 9px;display:flex;flex-direction:column;gap:4px}
.atelierSelected strong{font:22px Georgia,serif;color:#efe1bf}.atelierSelected small,.atelierNotice{font-size:10px;color:#a6baba;letter-spacing:.04em}
.atelierControls{display:flex;gap:6px}.atelierControls button{flex:1;min-width:0;padding:10px 6px;font-size:11px;border-color:#4b6866;background:#1d3237}.atelierControls button:hover{border-color:#d4bc85}
.atelierEquip{margin-top:10px;min-height:39px}.atelierNotice{text-align:center;margin-top:10px}
.atelierCollection{min-width:0;display:flex;flex-direction:column;gap:12px}
.atelierVault{display:grid;grid-template-columns:126px 1fr;grid-template-rows:auto auto auto;column-gap:18px;border:1px solid #77705178;padding:12px 15px;background:radial-gradient(ellipse at 15% 40%,#b9a37420,#152b315c 67%)}
.atelierCrate{position:relative;grid-row:1/4;display:grid;place-items:center;min-height:126px}.atelierCrate svg{width:130px;height:110px;position:relative;z-index:1;filter:drop-shadow(0 7px 12px #0009);animation:atelierFloat 4s ease-in-out infinite}.atelierCrateGlow{position:absolute;inset:16px;background:radial-gradient(circle,#e7d8a866,transparent 68%);animation:atelierBreathe 3s ease-in-out infinite}
.atelierWallet{font:24px Georgia,serif;color:#edd8a9;align-self:end}.atelierWallet span{font:10px system-ui,sans-serif;letter-spacing:.15em;color:#aebdb2}
.atelierOpen{align-self:center;white-space:normal;font-size:12px;min-height:43px;padding:8px 10px}.atelierVault>small{font-size:9px;line-height:1.5;color:#a2bab6}
.atelierCollectionTitle{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #77917d70;padding:7px 0}.atelierCollectionTitle b{font-size:11px;letter-spacing:.16em;color:#e2cc9e}.atelierCollectionTitle small{color:#8faaa5;font-size:9px}
.atelierSwatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:284px;overflow:auto;padding:3px}
.atelierSwatch{border:1px solid #485f5e;background:#13262d;padding:9px;display:flex;text-align:left;align-items:center;gap:9px;min-width:0;transition:border-color .13s,background .13s}
.atelierSwatch i{width:29px;height:29px;flex:none;border-radius:50%;background:radial-gradient(circle at 32% 23%,#ffffff94,var(--swatch) 45%,#101d21 100%);border:2px solid #e9d7ad66;box-shadow:0 0 13px var(--swatch)}
.atelierSwatch span{font-size:11px;min-width:0;white-space:normal}.atelierSwatch small{font-size:8px;display:block;color:#8baca8;margin-top:4px;letter-spacing:.11em}.atelierSwatch.locked i{opacity:.57}.atelierSwatch.selected,.atelierSwatch:hover{border-color:#ddbb80;background:#304147}
.atelierSwatch.selected{box-shadow:inset 0 0 0 1px #e1c18655}
.atelierReset{font-size:11px;padding:10px 15px;align-self:flex-start;color:#d6c49a;border-color:#697469}
.atelierReveal{grid-column:1/-1;padding:11px;border:1px solid #d5bc82a0;background:#d5b67e1c;color:#ffebbd;font:16px Georgia,serif;animation:atelierRevealIn .75s ease-out both}
.atelierCrateOpened svg{animation:atelierFloat .7s ease-out 1,atelierFloat 4s ease-in-out .7s infinite}
@keyframes atelierFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes atelierBreathe{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
@keyframes atelierRevealIn{0%{opacity:0;transform:scale(.94)}70%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}
@media(max-width:780px){#modal:has(.atelierShell) .modalBox{padding:19px 12px}.atelierLayout{grid-template-columns:1fr}.atelierPreview{padding:10px}.atelierVault{grid-template-columns:110px 1fr}.atelierSwatches{max-height:none}.atelierShell>p{font-size:11px}#titleScreen{background-position:57% center}.titleCopy{left:6%;top:53%}.titleCopy h1{font-size:clamp(55px,13vw,82px)}}
@media(prefers-reduced-motion:reduce){.atelierCrate svg,.atelierCrateGlow,.atelierReveal{animation:none!important}}

/* Illuminated manuscript frames: decorative overlay never changes slot geometry. */
.zoneHud,#packPanel,#mechanicHud,#bossHud,.modalBox,#groundLoot{
 border-color:#ad8b50;background-color:#0a1923;
 box-shadow:0 10px 35px #0007,inset 0 0 26px #050b12a0;
}
.zoneHud::after,#packPanel::after,#mechanicHud::after,#bossHud::after,.modalBox::after,#groundLoot::after{
 content:'';position:absolute;inset:-5px;pointer-events:none;z-index:5;
 border:18px solid transparent;border-image:url('/assets/painted-world/scroll-frame.svg') 40 stretch;
 border-radius:0;background:none;
}
.zoneHud h2,#packName,.modalBox h2{color:#f0d8a0;text-shadow:0 2px 5px #0008}
.packSlot{box-shadow:inset 0 0 12px #0005,0 1px 0 #c8a56322}
#packToggle{background:linear-gradient(90deg,#152b36,#0c1a26);border-bottom:1px solid #b58c4b88}
#packPanel .packLabel{color:#d3b57a;letter-spacing:.13em}
@media(max-width:700px){.zoneHud::after,#packPanel::after,#mechanicHud::after,#bossHud::after,.modalBox::after,#groundLoot::after{border-width:12px;inset:-3px}}

/* Painted assets use smooth sampling; inventory layout and hit targets are unchanged. */
#gameCanvas,canvas,.packSlot img,.vaultTile img,.itemCard img,.slot img,.inventorySlot img,.lootStage img,.detail img,.cosmeticChest img,.classOption canvas,#atelierCanvas{image-rendering:auto!important}
.atelierCrate svg{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.atelierCrate,.atelierCrateGlow{animation:none!important}}

/* ==========================================================================
   v0.20 "Nocturne" pixel UI layer — shares the world's palette, fonts and
   9-slice pixel frames (scripts/pixel-forge/ui.py). Visual overrides only.
   ========================================================================== */
@font-face{font-family:'Ruin Script';src:url('/assets/pixel/font/ruin-script.woff?v=0.74.2') format('woff');font-display:block}
@font-face{font-family:'Ruin Gothic';src:url('/assets/pixel/font/ruin-gothic.woff?v=0.74.2') format('woff');font-display:block}
:root{--ink:#0e0b17;--ink2:#171327;--ink3:#221c38;--slate:#262a46;--slate2:#323a5c;--slate3:#435078;--ivory:#f2e7c9;--ivory2:#ddcdab;--gold:#ecc25a;--gold2:#cc9235;--gold3:#9c6527;--teal:#79d3c2;--rose:#ec8f8c;--violet:#c8a2ec;--moss:#86b35f;
 --frame:url('/assets/pixel/ui/frame-panel.png?v=0.74.2');--frame-btn:url('/assets/pixel/ui/frame-button.png?v=0.74.2');--frame-slot:url('/assets/pixel/ui/frame-slot.png?v=0.74.2');--frame-hot:url('/assets/pixel/ui/frame-hot.png?v=0.74.2');
 --pixel:'Ruin Script',ui-monospace,monospace;--gothic:'Ruin Gothic','Ruin Script',Georgia,serif}
body{background:var(--ink)}
canvas,img{image-rendering:pixelated}
/* typography ------------------------------------------------------------- */
h1,h2,.zoneHud strong,#bossHud small,.brand,.titleCopy h1,.pageTitle h1,.dungeon h2,.expeditionDetail h2,.heroCard h3,.classOption strong,.modeOption strong,.activeHero h3,.lootStage h2,.oathGrid h3,#expansionHint strong{font-family:var(--gothic)!important;font-weight:400!important;letter-spacing:1px!important;-webkit-font-smoothing:none;font-smooth:never;text-shadow:2px 2px 0 var(--ink)}
h1{font-size:56px!important;line-height:1.05}
h2,.lootStage h2{font-size:28px!important;line-height:1.15}
.zoneHud strong,.dungeon h2,.expeditionDetail h2,.heroCard h3,.classOption strong,.modeOption strong,.activeHero h3,.oathGrid h3{font-size:28px!important;line-height:1.1!important}
button,kbd,small,label,.eyebrow,.pill,nav button,.packLabel,.subnav,.sectionTitle,.labelRow,.cardFoot,.statsRow,.zoneHud span,.zoneHud small,#realmState,.playerHud,.abilities,#packPanel,#nearbyPanel,#groundLoot,.vaultTile,.itemCard,.settingRow,#toast,.teammate,#chatPanel,#chatFeed,#interaction,footer,.bottomNotes,.titleEyebrow,.titleFooter,#titleStatus{font-family:var(--pixel)!important;-webkit-font-smoothing:none;letter-spacing:.5px}
button{font-size:18px}
small,.eyebrow,.titleEyebrow,.titleFooter,.packLabel,.zoneHud small,.sectionTitle,.subnav,kbd{font-size:9px!important;letter-spacing:1px!important}
p{font-family:Manrope,system-ui,sans-serif}
/* frames ----------------------------------------------------------------- */
.zoneHud,.playerHud,#packPanel,#groundLoot,#bossHud,.modalBox,.expeditionDetail,.dungeon,.heroCard,.itemCard,.activeHero,.loadoutBox,.intro .outline,#chatPanel,.teammate,#mechanicHud,.vaultBag,.vaultStorage,.oathGrid article,.modeOption,.classOption,#interaction button,#toast,#boonHud>*{border:16px solid transparent!important;border-image:var(--frame) 8 fill / 16px / 0 stretch!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;image-rendering:pixelated}
.zoneHud{padding:2px 6px!important}
.playerHud{padding:2px 4px!important}
.modalBox{padding:22px!important}
.classOption.active,.modeOption.active,.heroCard.active,.dungeon.selected{border-image:var(--frame-hot) 8 fill / 16px / 0 stretch!important;outline:none!important}
button:not(.packSlot):not(.vaultTile):not([data-tab]):not(.close):not(.textBtn){border:8px solid transparent!important;border-image:var(--frame-btn) 8 fill / 8px / 0 stretch!important;border-radius:0!important;background:transparent!important;color:var(--ivory);image-rendering:pixelated}
button:not(.packSlot):not(.vaultTile):not([data-tab]):not(.close):not(.textBtn):hover{filter:brightness(1.25)}
button.primary,.titlePlay{border:8px solid transparent!important;border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important;color:var(--gold)!important;background:transparent!important;font-family:var(--pixel)!important;font-size:18px!important;font-weight:400!important}
.packSlot,.vaultTile,.slot{border:8px solid transparent!important;border-image:var(--frame-slot) 8 fill / 8px / 0 stretch!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.packSlot.selected,.vaultTile.selected,.packSlot.dropHover,.vaultTile.dropHover{border-image:var(--frame-hot) 8 fill / 8px / 0 stretch!important}
.packSlot img,.vaultTile img,.itemCard img,.slot img,.relicTease img{image-rendering:pixelated!important;filter:drop-shadow(1px 1px 0 var(--ink))!important}
.bar{background:var(--ink2)!important;border:1px solid var(--ink);border-radius:0!important;height:8px!important}
.bar i,.health i{background:repeating-linear-gradient(90deg,var(--moss) 0 6px,#558c4a 6px 7px)!important}
#bossHud .bar i{background:repeating-linear-gradient(90deg,#cf5a64 0 6px,#a3304a 6px 7px)!important}
.xpBar{background:var(--ink2)!important;border:1px solid var(--ink);height:5px!important}.xpBar i{background:var(--gold)!important}
.realmMeter{background:var(--ink2)!important;border:1px solid var(--ink)}.realmMeter i{background:repeating-linear-gradient(90deg,var(--violet) 0 6px,#9c6ccf 6px 7px)!important}
#modal{background:#07060cd9!important}
select,input{border-radius:0!important;background:var(--ink2)!important;border:2px solid var(--slate2)!important;color:var(--ivory)!important;font-family:var(--pixel)!important}
kbd{color:var(--gold)!important}
.eyebrow,.titleEyebrow,.zoneHud small{color:var(--gold)!important}
nav button.active{color:var(--gold)!important}nav button.active:after{background:var(--gold)!important;height:3px!important}
header,.subnav,footer{border-color:var(--slate)!important;background:var(--ink)!important}
#app{background:var(--ink) url('/assets/pixel/ui/title-morrow.png?v=0.74.2') center top/cover no-repeat fixed;image-rendering:pixelated}
#app>main{background:linear-gradient(#0e0b17d9,#0e0b17f2)}
/* title screen ----------------------------------------------------------- */
#titleScreen{background:#07060c url('/assets/pixel/ui/title-moonwell.png?v=0.74.2') 62% center/cover no-repeat!important;image-rendering:pixelated}
.titleVignette{background:linear-gradient(90deg,#07060cf0 0%,#07060cc0 30%,#07060c10 62%),linear-gradient(0deg,#07060ccc,transparent 30%)!important}
.titleCopy h1{font-size:112px!important;line-height:.98!important;letter-spacing:4px!important;background:linear-gradient(180deg,#fde89a 0 34%,#ecc25a 34% 58%,#cc9235 58% 80%,#9c6527 80%);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(4px 4px 0 #0e0b17) drop-shadow(0 0 18px #ecc25a33);text-shadow:none!important}
.titleCopy h1 span{display:block}
.titleRule{color:var(--gold)!important;font-family:var(--pixel)}
.titleLore{font-family:var(--pixel)!important;font-size:18px!important;line-height:1.6!important;color:var(--ivory)!important;font-style:normal!important}
.titlePlay{min-width:260px;padding:10px 18px!important;font-size:27px!important;display:flex;justify-content:space-between;align-items:center;animation:titleGlow 2.4s steps(6) infinite}
@keyframes titleGlow{50%{filter:brightness(1.3) drop-shadow(0 0 10px #ecc25a55)}}
#titleStatus{font-size:9px!important;color:var(--ivory2)!important;margin-top:10px}
.titleFooter{color:#9a93a0!important}
@media (max-width:700px){.titleCopy h1{font-size:72px!important}}
/* in-game hud ------------------------------------------------------------ */
.zoneHud strong{color:var(--ivory)!important}
.zoneHud span{color:#b4c3db!important;font-size:9px!important}
#pauseBtn{font-size:18px!important}
.worldDock button{font-size:9px!important;padding:2px 6px!important}
#packToggle strong,#packName{font-family:var(--pixel)!important;color:var(--ivory)}
.packLabel{color:var(--gold)!important}
#itemDetail strong{font-family:var(--pixel)!important;font-size:18px!important}
#toast{color:var(--ivory)!important}
.teammate{color:var(--ivory)}
#interaction button{color:var(--gold)!important;font-size:18px!important}
#chatPanel,#chatFeed{color:var(--ivory)}
.titleCopy .titleRule{font-size:18px}
.chestArt,#chestArt img{width:96px;height:auto;image-rendering:pixelated}
/* v0.20 phone scale: the pixel fonts are drawn on a 9px grid, so phones use the
   1x size and 8px frames; desktop keeps the 2x look */
@media (max-width:700px){
 button{font-size:9px}
 button.primary,.titlePlay,#pauseBtn,#interaction button,#itemDetail strong{font-size:9px!important}
 .titlePlay{font-size:18px!important;min-width:200px}
 h1{font-size:44px!important}
 h2,.lootStage h2{font-size:22px!important}
 .zoneHud strong,.dungeon h2,.expeditionDetail h2,.heroCard h3,.classOption strong,.modeOption strong,.activeHero h3,.oathGrid h3{font-size:22px!important}
 .zoneHud,.playerHud,#packPanel,#groundLoot,#bossHud,.modalBox,.expeditionDetail,.dungeon,.heroCard,.itemCard,.activeHero,.loadoutBox,.intro .outline,#chatPanel,.teammate,#mechanicHud,.vaultBag,.vaultStorage,.oathGrid article,.modeOption,.classOption,#interaction button,#toast,#boonHud>*{border-width:8px!important;border-image-width:8px!important}
 .modalBox{padding:12px!important}
 .titleLore{font-size:9px!important}
 .titleCopy .titleRule{font-size:9px}
 .titleCopy h1{font-size:64px!important}
 .slot{font-size:9px!important;overflow-wrap:normal;word-break:normal}
}
@media (max-width:700px){.emptySlot{overflow-wrap:normal!important;word-break:keep-all;writing-mode:vertical-rl;font-size:9px!important;letter-spacing:0!important}}
/* v0.20.1 relic icons are native 32px: show them at 1x or 2x only */
.vaultTile img{width:32px!important;height:32px!important;max-width:none!important;max-height:none!important}
.itemCard img,.lootStage img{width:64px!important;height:64px!important}
.relicTease img{width:64px!important;height:64px!important}
@media (max-width:700px){.relicTease img{width:32px!important;height:32px!important}}
/* the v0.19 painted scroll overlay is retired: the 9-slice pixel frames carry the border */
.zoneHud::after,#packPanel::after,#mechanicHud::after,#bossHud::after,.modalBox::after,#groundLoot::after{content:none!important;border-image:none!important;display:none!important}
/* ==========================================================================
   v0.22 Reliquary pack panel — Lilyglass-style relic tiles with the pixel fonts.
   Big rarity-framed tiles, smooth HD relic art, gold corner ornaments, no scrollbar.
   ========================================================================== */
#packPanel{border:1px solid #b58c4b!important;border-image:none!important;border-radius:3px!important;
 background:linear-gradient(155deg,#16303af2 0%,#0e2029f5 55%,#091a25f8 100%)!important;
 box-shadow:0 12px 36px #0008,inset 0 0 0 1px #0b1820,inset 0 0 30px #050b12a8!important;
 scrollbar-width:none;overflow-x:hidden!important}
#packPanel::-webkit-scrollbar{display:none}
#packPanel::before{content:'';position:absolute;inset:-4px;pointer-events:none;z-index:6;
 background:
  linear-gradient(#ecc25a,#ecc25a) 0 0/12px 2px no-repeat,linear-gradient(#ecc25a,#ecc25a) 0 0/2px 12px no-repeat,
  linear-gradient(#ecc25a,#ecc25a) 100% 0/12px 2px no-repeat,linear-gradient(#ecc25a,#ecc25a) 100% 0/2px 12px no-repeat,
  linear-gradient(#ecc25a,#ecc25a) 0 100%/12px 2px no-repeat,linear-gradient(#ecc25a,#ecc25a) 0 100%/2px 12px no-repeat,
  linear-gradient(#ecc25a,#ecc25a) 100% 100%/12px 2px no-repeat,linear-gradient(#ecc25a,#ecc25a) 100% 100%/2px 12px no-repeat}
#packPanel::after{content:none!important}
#packToggle{background:linear-gradient(90deg,#173440,#0d1d28)!important;border:0!important;border-image:none!important;border-bottom:1px solid #b58c4b66!important;padding:12px 14px!important;display:flex;justify-content:space-between;align-items:center}
#packToggle #packName{color:#f2e7c9!important;font-size:18px!important}
#packToggle #packCount{color:#b4c3db;font-family:var(--pixel);font-size:9px}
#packVitals{padding:10px 14px!important;border-bottom:1px solid #4b626655;background:transparent!important}
#packVitals .xpBar{height:6px!important;border:0!important;background:#0b1820!important}
#packVitals .xpBar i{background:linear-gradient(90deg,#c8a2ec,#79d3c2)!important}
#packBody{padding:10px 12px 8px!important}
#packPanel .packLabel{color:#d3b57a!important;letter-spacing:1px!important;margin:2px 0 7px!important}
#packPanel .packGrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;margin-bottom:9px!important}
#packPanel .packSlot{position:relative;aspect-ratio:1/1;height:auto!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center;
 border:1px solid #455a5e!important;border-image:none!important;border-radius:2px!important;
 background:linear-gradient(145deg,#243640,#111f2a)!important;box-shadow:inset 0 0 12px #0006,0 1px 0 #c8a56322!important;transition:border-color .15s,box-shadow .15s,transform .15s}
#packPanel .packSlot:hover{border-color:#8fa6a0!important;box-shadow:inset 0 0 14px #0007,0 0 10px #79d3c222!important}
#packPanel .packSlot[data-tier="0"].filled{border-color:#6b7d84!important}
#packPanel .packSlot[data-tier="1"].filled{border-color:#4f9a74!important;background:radial-gradient(ellipse at 50% 42%,#2d5143,#132029 72%)!important}
#packPanel .packSlot[data-tier="2"].filled{border-color:#4f80b8!important;background:radial-gradient(ellipse at 50% 42%,#29466a,#131d2c 72%)!important}
#packPanel .packSlot[data-tier="3"].filled{border-color:#c9a160!important;background:radial-gradient(ellipse at 50% 42%,#6b4d2c,#211b23 72%)!important;box-shadow:inset 0 0 14px #0007,0 0 9px #ecc25a26!important}
#packPanel .packSlot[data-tier="4"].filled{border-color:#a988dc!important;background:radial-gradient(ellipse at 50% 42%,#4c3670,#1a1630 72%)!important;box-shadow:inset 0 0 14px #0007,0 0 11px #c8a2ec33!important}
#packPanel .packSlot.picked,#packPanel .packSlot.selected,#packPanel .packSlot.dropHover{border-color:#fde89a!important;box-shadow:0 0 0 1px #fde89a66,0 0 14px #ecc25a55!important}
#packPanel .packSlot img{width:78%!important;height:78%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;image-rendering:auto!important;
 filter:drop-shadow(0 3px 2px #000a)!important;grid-area:1/1!important;transition:transform .15s}
#packPanel .packSlot:hover img{transform:translateY(-2px) scale(1.04)!important}
#packPanel .packSlot .raritySigil{top:4px!important;right:4px!important;width:16px!important;height:16px!important;font-size:10px;border:1px solid color-mix(in srgb,var(--rarity) 55%,#0b1820)!important;background:#0b1820e8!important;color:var(--rarity)!important}
#packPanel .emptySlot{color:#6f8790!important;font-family:var(--pixel);font-size:9px!important;writing-mode:horizontal-tb!important}
#packPanel .packTabs{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 9px!important}
#packPanel .packTabs button{border:1px solid #4b6266!important;border-image:none!important;border-radius:2px!important;background:linear-gradient(100deg,#1b2c33,#14232b)!important;
 color:#b4c3db!important;font-family:var(--pixel)!important;font-size:18px!important;padding:8px 10px!important;display:flex;justify-content:space-between;align-items:center}
#packPanel .packTabs button[aria-selected="true"]{border-color:#c9a160!important;color:#fde89a!important;background:linear-gradient(100deg,#3a3b32,#28373a)!important;box-shadow:inset 0 0 0 1px #0b1820}
#packPanel .packTabs button span{display:inline!important;color:inherit;opacity:.8;font-size:9px}
#packPanel #itemDetail{max-height:none!important;overflow:visible!important;color:#c6d0cc;border-top:1px solid #4b626655;padding-top:8px}
#packPanel #nearbyPanel{background:#0b1a2299!important;border-top:1px solid #b58c4b44!important;padding:10px 14px!important;max-height:none!important}
/* desktop: fixed under Options; width from hud-layout (fits the window height) */
#gameScreen.hudDesktop #packPanel{top:var(--hud-pack-top)!important;right:var(--hud-gap)!important;width:var(--hud-rail)!important;max-height:var(--hud-pack-height)!important}
#gameScreen.hudDesktop #packPanel .packSlot img{width:76%!important;height:76%!important}
#gameScreen.hudDesktop .cameraDock{right:calc(var(--hud-rail) + var(--hud-gap)*2)!important}
/* the vault workbench gets the same relic tiles */
.vaultTile{border:1px solid #455a5e!important;border-image:none!important;border-radius:2px!important;background:linear-gradient(145deg,#243640,#111f2a)!important}
.vaultTile img{width:72%!important;height:72%!important;image-rendering:auto!important;filter:drop-shadow(0 3px 2px #000a)!important}
.itemCard img,.lootStage img,.relicTease img,.slot img,#groundSlots img{image-rendering:auto!important}
@media (max-width:700px){#packPanel .packTabs button{font-size:9px!important;padding:5px!important}#packToggle #packName{font-size:9px!important}#packPanel .packGrid{gap:4px!important}}
#packPanel .packSlot{aspect-ratio:1/1!important}
#packPanel .packGrid{grid-template-rows:none!important;grid-auto-rows:auto!important}
#gameScreen #packPanel .packSlot > img{width:78%!important;height:78%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;image-rendering:auto!important;filter:drop-shadow(0 3px 2px #000a)!important}
#gameScreen #packPanel .packSlot,#gameScreen #packPanel #equipSlots .packSlot,#gameScreen #packPanel #equipSlots .packSlot.filled{padding:0!important}
#gameScreen #packPanel .packSlot > img{position:absolute!important;left:11%!important;top:11%!important;width:78%!important;height:78%!important;margin:0!important}
#gameScreen #packPanel .packSlot .raritySigil{z-index:3}
#gameScreen #packPanel .packSlot{position:relative!important;overflow:hidden}
#gameScreen #packPanel .packSlot > img{grid-area:auto!important}
#packPanel .playerHud{border:0!important;border-image:none!important;background:transparent!important;box-shadow:none!important;padding:10px 14px 12px!important;margin:0!important;border-bottom:1px solid #4b626655!important}
#packPanel .playerHud .bar{height:5px!important;border:0!important;background:#0b1820!important}
#packPanel .playerHud .bar i,#packPanel #healthBar{background:linear-gradient(90deg,#3daaa0,#79d3c2 70%,#c4f1e3)!important}
/* v0.22 reliquary showcase in the loot panel */
#chestArt{display:flex;justify-content:center;height:auto!important;margin:4px 0 6px}
.chestStage{position:relative;width:176px;height:150px;display:grid;place-items:center;overflow:visible;isolation:isolate}
.chestStage .chestArt{position:relative;z-index:2;width:176px!important;height:160px!important;object-fit:contain;image-rendering:pixelated!important;animation:chestFloat 2.6s ease-in-out infinite,chestGlow 2.4s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--chest))}
.chestStage .chestRays{position:absolute;inset:-34px;z-index:0;border-radius:50%;pointer-events:none;opacity:.55;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--chest) 55%,transparent) 0deg 7deg,transparent 7deg 22deg);
 -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:chestSpin 18s linear infinite}
.chestStage.tier0 .chestRays{opacity:.18}.chestStage.tier1 .chestRays{opacity:.3}.chestStage.tier2 .chestRays{opacity:.42}.chestStage.tier4 .chestRays{opacity:.7}
.chestStage::before{content:'';position:absolute;left:50%;bottom:4px;width:150px;height:30px;transform:translateX(-50%);border-radius:50%;z-index:1;
 background:radial-gradient(ellipse,color-mix(in srgb,var(--chest) 60%,transparent),transparent 70%);animation:chestPulse 2.4s ease-in-out infinite}
.chestStage .chestShine{position:absolute;inset:20px 18px 30px;z-index:3;pointer-events:none;overflow:hidden;-webkit-mask:url('/assets/pixel/chest-ui-0.png') center/contain no-repeat}
.chestStage .chestShine::after{content:'';position:absolute;top:-20%;bottom:-20%;width:26%;left:-40%;background:linear-gradient(100deg,transparent,#ffffffb0,transparent);animation:chestSweep 3.2s ease-in-out infinite}
.chestStage .chestSparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.chestStage .chestSparks i{position:absolute;bottom:26%;left:var(--x);width:4px;height:4px;background:var(--chest);box-shadow:0 0 6px var(--chest);opacity:0;animation:chestSpark 2.4s linear infinite;animation-delay:calc(var(--i) * -.37s)}
.chestStage .chestSparks i:nth-child(3n){background:#fffaea}
@keyframes chestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes chestGlow{0%,100%{filter:drop-shadow(0 0 4px var(--chest))}50%{filter:drop-shadow(0 0 14px var(--chest)) brightness(1.08)}}
@keyframes chestPulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.12)}}
@keyframes chestSpin{to{transform:rotate(360deg)}}
@keyframes chestSweep{0%,55%{left:-40%}85%,100%{left:120%}}
@keyframes chestSpark{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(-110px)}}
@media(prefers-reduced-motion:reduce){.chestStage *,.chestStage::before{animation:none!important}}
@media(max-width:700px){.chestStage{width:120px;height:104px}.chestStage .chestArt{width:120px!important;height:110px!important}}
/* the arena canvas may be rendered below device resolution on 2x/3x screens: always upscale it crisp */
#arena,#gameScreen canvas,.classOption canvas,#atelierCanvas{image-rendering:pixelated!important}


/* v0.24 - The cartographer's rail. Desktop only; small-screen HUD remains intact.
   A narrow 340px maximum holds the minimap, compact satchel and proximity ledger. */
#gameScreen.hudDesktop #pauseBtn{width:var(--hud-rail)!important;right:var(--hud-gap)!important;top:20px!important;height:32px!important;font-size:11px!important}
#gameScreen.hudDesktop #packPanel{
 top:var(--hud-pack-top)!important;right:var(--hud-gap)!important;width:var(--hud-rail)!important;
 height:var(--hud-pack-height)!important;max-height:var(--hud-pack-height)!important;
 min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;
}
#gameScreen.hudDesktop #packToggle{flex:0 0 auto;padding:8px 10px!important;min-height:36px!important}
#gameScreen.hudDesktop #packToggle #packName{font-size:11px!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}
#gameScreen.hudDesktop #packVitals{padding:6px 10px!important;flex:0 0 auto}
#gameScreen.hudDesktop #packVitals .packLevelRow{font-size:9px;line-height:1.5}
#gameScreen.hudDesktop #packBody{padding:7px 10px 5px!important;flex:1 1 auto;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;scrollbar-color:#705f49 transparent}
#gameScreen.hudDesktop #packPanel .packLabel{font-size:8px!important;margin:0 0 4px!important}
#gameScreen.hudDesktop #packPanel .packGrid{gap:4px!important;margin-bottom:6px!important}
#gameScreen.hudDesktop #equipSlots{grid-template-columns:repeat(4,minmax(0,63px))!important;justify-content:center}
#gameScreen.hudDesktop #bagSlots{grid-template-columns:repeat(6,minmax(0,1fr))!important}
#gameScreen.hudDesktop #packPanel .packSlot{aspect-ratio:1!important;min-height:0!important;height:auto!important}
#gameScreen.hudDesktop #packPanel .packSlot .raritySigil{width:12px!important;height:12px!important;font-size:7px!important;top:2px!important;right:2px!important}
#gameScreen.hudDesktop #packPanel .packTabs{gap:5px!important;margin:3px 0 5px!important}
#gameScreen.hudDesktop #packPanel .packTabs button{font-size:10px!important;padding:5px 7px!important;min-height:25px}
#gameScreen.hudDesktop #packPanel #itemDetail{font-size:8px!important;line-height:1.35!important;padding-top:4px!important;max-height:39px!important;overflow:auto!important}
#gameScreen.hudDesktop #packPanel #itemDetail strong{font-size:9px!important}
#gameScreen.hudDesktop #packPanel #itemDetail small{font-size:7px!important}
#gameScreen.hudDesktop #storeSelected{font-size:8px!important;padding:5px!important}
#gameScreen.hudDesktop #nearbyPanel{
 position:absolute;z-index:11;right:var(--hud-gap);top:var(--hud-nearby-top);width:var(--hud-rail);
 height:var(--hud-nearby-height);max-height:none!important;min-height:0;
 padding:8px 10px!important;overflow-y:auto;overflow-x:hidden;background:linear-gradient(160deg,#13303af0,#091923f8)!important;
 border:1px solid #ae8b58!important;border-radius:2px;box-shadow:0 10px 25px #0007;scrollbar-width:thin;scrollbar-color:#705f49 transparent;
}
#gameScreen.hudDesktop #nearbyHeading{font-size:9px!important;margin:0 0 5px!important;color:#d3b57a!important}
#gameScreen.hudDesktop #nearbyPlayers{gap:0!important;}
#gameScreen.hudDesktop .nearbyPerson{position:relative;padding:2px 5px!important;min-height:18px!important;gap:7px!important;border-bottom:1px solid #4a626333;outline-offset:-1px}
#gameScreen.hudDesktop .nearbyPerson:hover,#gameScreen.hudDesktop .nearbyPerson:focus-visible{background:#2a4048b8;outline:1px solid #b49a65}
#gameScreen.hudDesktop .nearbyPerson>i{display:none}
#gameScreen.hudDesktop .nearbyPerson canvas{width:20px;height:23px;object-fit:contain;image-rendering:pixelated;flex:none}
#gameScreen.hudDesktop .nearbyPerson strong{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gameScreen.hudDesktop .nearbyPerson small{font-size:7px!important;margin-top:0!important;line-height:1.5}
#gameScreen.hudDesktop .nearbyHealth{font-size:8px!important}
#gameScreen.hudDesktop .nearbyEmpty{font-size:11px!important;padding:9px 3px}
#gameScreen.hudDesktop #nearbyPanel #interaction{padding:5px!important;margin-bottom:5px!important;font-size:9px!important}
#nearbyInspect{position:fixed;z-index:30;width:248px;max-width:calc(100vw - 24px);padding:12px 13px;background:linear-gradient(145deg,#172b35f9,#091721fc);border:1px solid #b99765;box-shadow:0 14px 45px #000c,inset 0 0 0 2px #233f47;pointer-events:none;font-family:var(--pixel),monospace;color:#eadfc5}
#nearbyInspect[hidden]{display:none!important}
#nearbyInspect .inspectName{font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:#f3e5c3}
#nearbyInspect .inspectRole{font-size:9px;color:#a7c5c3;margin:3px 0 10px}
#nearbyInspect .inspectGear{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
#nearbyInspect .inspectSlot{width:49px;height:52px;padding:3px;border:1px solid #496365;background:#132630;display:grid;place-items:center;position:relative}
#nearbyInspect .inspectSlot img{width:40px;height:40px;object-fit:contain;image-rendering:auto}
#nearbyInspect .inspectSlot span{font-size:7px;color:#90acac}
#nearbyInspect .inspectCaption{font-size:8px;color:#d2b582;margin-top:6px}
@media(max-height:650px) and (min-width:900px){
 #gameScreen.hudDesktop #packPanel #packBody{padding:4px 8px!important}
 #gameScreen.hudDesktop #equipSlots{grid-template-columns:repeat(4,minmax(0,48px))!important}
 #gameScreen.hudDesktop #packPanel .packGrid{gap:3px!important}
 #gameScreen.hudDesktop #packPanel .packTabs button{padding:3px!important}
}
/* Eight proximity portraits fit at once on a standard 864px-tall desktop. */
#gameScreen.hudDesktop .nearbyPerson{min-height:20px!important;padding:0 3px!important;gap:6px!important}
#gameScreen.hudDesktop .nearbyPerson canvas{width:17px!important;height:19px!important}
#gameScreen.hudDesktop .nearbyPerson small{display:none!important}
#gameScreen.hudDesktop .nearbyPerson strong{font-size:9px!important;line-height:1.4!important}
#gameScreen.hudDesktop .nearbyPerson .nearbyHealth{font-size:8px!important}
#gameScreen.hudDesktop #nearbyPanel{padding:7px 9px!important}
#gameScreen.hudDesktop #packVitals .playerHud{width:100%!important;max-width:none!important;min-height:0!important;margin:3px 0 0!important;padding:2px 0!important;flex:none!important}
#gameScreen.hudDesktop #packVitals .playerHud>div:first-child{font-size:9px!important;line-height:1.3!important;white-space:nowrap}
#gameScreen.hudDesktop #packVitals .playerHud small{display:none!important}
#gameScreen.hudDesktop #packVitals .playerHud .bar{height:3px!important;margin-top:2px}
/* Only change small-screen behavior enough to keep the expanded list scrollable,
   rather than squeezing out the item grid or hiding it behind the safe-haven HUD. */
#gameScreen:not(.hudDesktop) #nearbyPanel{max-height:120px!important;flex:0 0 auto!important;overflow:auto!important;min-height:0!important}
@media(max-width:699px){
 #gameScreen:not(.hudDesktop) #packPanel{top:clamp(165px,30vh,255px)!important;max-height:calc(100dvh - clamp(165px,30vh,255px) - 10px)!important;height:auto!important;min-height:0!important}
 #gameScreen:not(.hudDesktop) #packBody{overflow-y:auto!important;min-height:0!important}
}

/* The actual names are readable without moving the cursor off the portrait. */
#nearbyInspect .inspectNames{margin-top:9px;display:grid;gap:4px}
#nearbyInspect .inspectLine{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font-size:8px;line-height:1.55}
#nearbyInspect .inspectLine strong{flex:0 0 61px;font-size:7px;color:#a6aaa5;font-weight:normal}
#nearbyInspect .inspectLine span{flex:1;min-width:0;color:#e9dbc4;text-align:right;overflow-wrap:anywhere}
#gameScreen.hudDesktop #packPanel .packSlot > img{width:75%!important;height:75%!important;max-width:none!important;max-height:none!important}
#gameScreen.hudDesktop #packPanel .packSlot:hover > img{transform:translateY(-2px) scale(1.04)!important}

/* v0.24.1 — Return of the sanctuary frame. Only the in-game right rail.
   Uses the EXACT same 9-slice panel sprite as the Wayrest plaque at top left. */
#gameScreen.hudDesktop #packPanel,
#gameScreen.hudDesktop #nearbyPanel{
 border:12px solid transparent!important;
 border-image:var(--frame) 8 fill / 12px / 0 stretch!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
 image-rendering:pixelated;
 box-sizing:border-box!important;
}
#gameScreen.hudDesktop #packPanel::before{display:none!important}
#gameScreen.hudDesktop #packPanel{
 overflow:visible!important;
 height:var(--hud-pack-height)!important;
 max-height:none!important;
 min-height:var(--hud-pack-height)!important;
}
#gameScreen.hudDesktop #packToggle{
 background:transparent!important;
 border:0!important;border-image:none!important;
 border-bottom:1px solid #71608366!important;
 min-height:31px!important;padding:5px 5px!important;
}
#gameScreen.hudDesktop #packToggle #packName{color:var(--ivory)!important}
#gameScreen.hudDesktop #packVitals{background:transparent!important;border-color:#5e517a88!important;padding:4px 5px!important}
#gameScreen.hudDesktop #packBody{
 background:transparent!important;
 padding:5px 5px 5px!important;
 overflow:visible!important;
 flex:0 0 auto!important;
 min-height:0!important;
 scrollbar-width:none!important;
}
#gameScreen.hudDesktop #packPanel .packLabel,
#gameScreen.hudDesktop #nearbyHeading{color:var(--gold)!important}
#gameScreen.hudDesktop #packPanel .packGrid{margin-bottom:6px!important;gap:4px!important}
#gameScreen.hudDesktop #equipSlots{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#gameScreen.hudDesktop #packPanel .packSlot{border-color:#675477!important;background:#1d1c35b7!important;box-shadow:inset 0 2px 7px #0a071e9c!important}
#gameScreen.hudDesktop #packPanel .packSlot:hover{border-color:#bb995a!important;background:#322747!important}
#gameScreen.hudDesktop #packPanel .packTabs button{background:#1d1931b8!important;color:#c5b5cf!important;border-color:#74618a!important}
#gameScreen.hudDesktop #packPanel .packTabs button[aria-selected="true"]{background:#3d2c4d!important;border-color:#d5a853!important;color:#ffe7ac!important}
#gameScreen.hudDesktop #packPanel #itemDetail{
 max-height:none!important;min-height:20px!important;
 height:auto!important;overflow:visible!important;
 white-space:normal!important;
 border-color:#74618a77!important;padding-top:5px!important;
 line-height:1.4!important;color:#d8cce0!important;
}
#gameScreen.hudDesktop #nearbyPanel{
 top:var(--hud-nearby-top)!important;
 height:var(--hud-nearby-height)!important;
 max-height:var(--hud-nearby-height)!important;
 padding:3px 5px!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 scrollbar-color:#75588a #171327;
}
#gameScreen.hudDesktop #nearbyHeading{margin:2px 0 3px!important;line-height:1.2!important}
#gameScreen.hudDesktop .nearbyPerson{min-height:16px!important;padding:0 2px!important;border-bottom-color:#74618a44!important}
#gameScreen.hudDesktop .nearbyPerson canvas{width:15px!important;height:17px!important}
#gameScreen.hudDesktop .nearbyEmpty{font-size:10px!important;padding:3px 2px!important}
#gameScreen.hudDesktop #pauseBtn{
 width:var(--hud-map-width)!important;
 right:calc(var(--hud-gap) + (var(--hud-rail) - var(--hud-map-width))/2)!important;
 top:18px!important;height:32px!important;font-size:10px!important;
}
/* Interaction is a separate, readable action plaque just outside the rail.
   It never steals rows, occludes a character portrait, or overlaps the inventory. */
#gameScreen.hudDesktop > #interaction:not([hidden]){
 position:absolute!important;
 top:auto!important;left:auto!important;transform:none!important;
 right:calc(var(--hud-rail) + 2*var(--hud-gap))!important;
 bottom:28px!important;
 width:min(270px,calc(100vw - var(--hud-rail) - var(--hud-left-width) - 4*var(--hud-gap)))!important;
 min-width:188px!important;
 max-width:270px!important;
 padding:0!important;
 z-index:16!important;
 background:transparent!important;
 box-shadow:none!important;
 border:none!important;
}
#gameScreen.hudDesktop > #interaction #interactBtn{
 display:flex!important;align-items:center!important;gap:7px;
 width:100%;height:auto;min-height:52px;padding:7px 10px!important;
 border:12px solid transparent!important;
 border-image:var(--frame-btn) 8 fill / 12px / 0 stretch!important;
 border-radius:0!important;
 color:var(--gold)!important;font-size:10px!important;
 white-space:normal!important;text-align:left;overflow-wrap:anywhere;
}
#gameScreen.hudDesktop > #interaction #interactText{font-size:10px!important;line-height:1.5!important}
#gameScreen.hudDesktop #nearbyPanel:has(.nearbyPerson){overflow-y:auto!important}
@media(min-width:900px) and (max-height:690px){
 #gameScreen.hudDesktop #packPanel .packGrid{gap:2px!important;margin-bottom:3px!important}
 #gameScreen.hudDesktop #packPanel .packTabs button{padding:2px 4px!important}
 #gameScreen.hudDesktop #packToggle{min-height:25px!important}
 #gameScreen.hudDesktop #packPanel .packSlot .emptySlot{font-size:7px!important}
}

/* Keep all eight 15px portraits visible at standard 864px desktop heights. */
@media (min-width:900px){
 #gameScreen.hudDesktop #nearbyPanel{border-width:8px!important;border-image-width:8px!important;padding:2px 5px!important}
 #gameScreen.hudDesktop #nearbyHeading{font-size:8px!important;line-height:11px!important;margin:0 0 2px!important}
 #gameScreen.hudDesktop .nearbyPerson{min-height:15px!important;height:15px!important;line-height:1!important;padding:0 1px!important}
 #gameScreen.hudDesktop .nearbyPerson canvas{width:13px!important;height:15px!important}
 #gameScreen.hudDesktop .nearbyPerson strong{font-size:8px!important;line-height:1!important}
 #gameScreen.hudDesktop .nearbyPerson .nearbyHealth{font-size:7px!important}
}

/* Screenshot-matched 0.23.x correction. The Options tab belongs to the
   WAYREST header, not to the right-side minimap. All right-hand elements
   have their own vertical lanes: cartography / pack / players / action. */
@media (min-width:900px){
 #gameScreen.hudDesktop #gameHeader #pauseBtn{
  position:fixed!important;top:4px!important;
  left:calc(var(--hud-gap) + 52px)!important;right:auto!important;
  width:clamp(160px,calc(var(--hud-left-width) - 100px),230px)!important;
  height:32px!important;min-width:0!important;max-width:230px!important;
  z-index:18!important;padding:4px 9px!important;
  font-size:10px!important;
 }
 #gameScreen.hudDesktop #packPanel{
  top:var(--hud-pack-top)!important;right:var(--hud-gap)!important;
  width:var(--hud-rail)!important;
  height:var(--hud-pack-height)!important;max-height:none!important;
  min-height:0!important;overflow:visible!important;
 }
 #gameScreen.hudDesktop #packBody{
  flex:0 0 auto!important;overflow:visible!important;max-height:none!important;
  scrollbar-width:none!important;
 }
 #gameScreen.hudDesktop #nearbyPanel{
  position:absolute!important;top:var(--hud-nearby-top)!important;
  right:var(--hud-gap)!important;width:var(--hud-rail)!important;
  height:var(--hud-nearby-height)!important;max-height:var(--hud-nearby-height)!important;
  overflow-y:auto!important;overflow-x:hidden!important;
 }
 #gameScreen.hudDesktop > #interaction:not([hidden]){
  position:absolute!important;top:var(--hud-action-top)!important;
  bottom:auto!important;left:auto!important;
  right:calc(var(--hud-gap) + 40px)!important;
  width:calc(var(--hud-rail) - 80px)!important;
  max-width:none!important;min-width:0!important;
  padding:0!important;transform:none!important;
  z-index:16!important;
 }
 #gameScreen.hudDesktop > #interaction #interactBtn{
  width:100%!important;height:var(--hud-action-height)!important;
  min-height:var(--hud-action-height)!important;
  padding:5px 10px!important;
 }
}

/* The global ornamental button border should never frame individual roster
   rows: it wasted 16px per row and clipped the eighth player. */
#gameScreen.hudDesktop #nearbyPanel button.nearbyPerson{
 border:0!important;border-bottom:1px solid #70587877!important;
 border-image:none!important;border-radius:0!important;
 box-shadow:none!important;background:transparent!important;
 box-sizing:border-box!important;
 display:flex!important;align-items:center!important;
 height:14px!important;min-height:14px!important;
 padding:0 2px!important;
}
#gameScreen.hudDesktop #nearbyPanel button.nearbyPerson:hover,
#gameScreen.hudDesktop #nearbyPanel button.nearbyPerson:focus-visible{background:#45335799!important;}
@media (min-width:900px) and (max-height:810px){
 #gameScreen.hudDesktop #packPanel #packToggle{min-height:27px!important;padding:3px 5px!important}
 #gameScreen.hudDesktop #packVitals{padding:2px 5px!important}
 #gameScreen.hudDesktop #packPanel #packBody{padding:3px 5px!important}
 #gameScreen.hudDesktop #packPanel .packLabel{margin:0 0 2px!important}
 #gameScreen.hudDesktop #packPanel .packGrid{gap:2px!important;margin-bottom:3px!important}
 #gameScreen.hudDesktop #packPanel .packTabs{margin:2px 0 3px!important}
 #gameScreen.hudDesktop #packPanel .packTabs button{min-height:20px!important;padding:2px 4px!important}
 #gameScreen.hudDesktop #packPanel #itemDetail{padding-top:2px!important;line-height:1.2!important;min-height:18px!important}
 #gameScreen.hudDesktop #nearbyPanel button.nearbyPerson{height:12px!important;min-height:12px!important}
 #gameScreen.hudDesktop #nearbyPanel .nearbyPerson canvas{width:11px!important;height:12px!important}
}
/* ---------------------------------------------------------------- v0.24 Legendary / Divine fanfare */
#lootFanfare{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
#lootFanfare.on{display:block}
#lootFanfare canvas{position:absolute;left:50%;top:21%;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges}
#lootFanfare .fanfareFlash{position:absolute;inset:0;opacity:0}
#lootFanfare.on .fanfareFlash{animation:fanfareFlash .9s ease-out}
#lootFanfare[data-tier="3"] .fanfareFlash{background:radial-gradient(ellipse at 50% 24%,#fde89a88,#ecc25a33 35%,transparent 70%)}
#lootFanfare[data-tier="4"] .fanfareFlash{background:radial-gradient(ellipse at 50% 24%,#ffffffaa,#c8a2ec55 35%,transparent 72%)}
@keyframes fanfareFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chatLine.divineLine{background:linear-gradient(90deg,#3a215c99,#12202a00);border-left:2px solid #c8a2ec;padding-left:6px}
.chatLine.divineLine strong{color:#ecd9fb}
.chatLine.divineLine span{color:#f3e9ff}
.chatLine.divineLine b{color:#c8a2ec;font-weight:700;text-shadow:0 0 6px #9c6ccf}
/* ---------------------------------------------------------------- v0.24 overlays: fishing, capture, crate opening */
#fishingOverlay,#captureOverlay{position:fixed;inset:0;z-index:55;background:#05060b;display:flex;align-items:center;justify-content:center}
#fishingOverlay canvas,#captureOverlay canvas,#crateOverlay canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:pointer;touch-action:none}
#crateOverlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:transparent}
.fishClose,#captureOverlay .fishClose{position:absolute;top:14px;right:14px;background:#101a24e8;border:1px solid #6b5f45;color:#f2e7c9;font-size:11px;padding:8px 12px}
.fishHud{position:absolute;inset:0;pointer-events:none}.fishHud button{pointer-events:auto}
/* Old Wick */
.wickTalk{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
.wickTalk canvas{width:80px;height:92px;image-rendering:pixelated;background:radial-gradient(circle at 50% 70%,#ffcf7a33,#0000 70%);border:1px solid #6b5132;border-radius:4px}
.wickTalk h2{font-size:24px;line-height:1.25;color:#f6e6c8}
.wickAside{color:#ffcf7a!important;font-style:italic}.wickMeta,.wickHint{font-size:11px!important;color:#9a8a76!important}
/* echo pets */
.petGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0}
.petCard{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;text-align:center;border-color:#3c4a44;background:linear-gradient(160deg,#172129,#101a20)}
.petCard canvas{width:64px;height:64px;image-rendering:pixelated}
.petCard strong{font:17px Georgia,serif;color:var(--pet)}.petCard small{font-size:9px;line-height:1.5;letter-spacing:0;min-height:40px}
.petCard span{font-size:8px;letter-spacing:1.5px;color:#9db0a6}.petCard.active{border-color:var(--pet);box-shadow:0 0 0 1px var(--pet) inset}.petCard.active span{color:var(--pet)}
.petCard.locked{opacity:.7}.petCard.locked strong{color:#6c7a77}
.bellList{display:grid;gap:8px;margin-top:16px}.bellList button{display:flex;align-items:center;gap:12px;text-align:left;border-color:var(--rarity)}.bellList img{width:40px;height:40px;image-rendering:pixelated}
.petLegend{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;margin-top:16px;font-size:10px;color:#a4b2ad}.petLegend b{color:var(--pet);font-weight:600}
/* the Chronicle */
.chronicle h2{margin-bottom:18px}.chapter{border-left:2px solid #c6b48c;padding:4px 0 4px 16px;margin:0 0 18px}
.chapter small{font-size:8px;letter-spacing:2px;color:#c6b48c}.chapter h3{font:21px Georgia,serif;margin:4px 0 8px;color:#f2e7c9}
.chapter p{font-size:12px;margin:0 0 8px;color:#b9c3bd}.chapter.sealed{border-color:#3a4642;opacity:.6}.chapter.sealed h3{color:#6c7a77}.chapter .hint{font-style:italic;color:#7f8c88}
@media(max-width:700px){.wickTalk{grid-template-columns:1fr}.wickTalk canvas{margin:auto}.petGrid{grid-template-columns:repeat(2,1fr)}.petLegend{grid-template-columns:1fr}}
/* v0.26 tester workbench */
.modalBox:has(.testerShell){max-width:980px}
.testerShell h2{margin:4px 0 14px}
.testerBar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.testerBar input{flex:1 1 260px;min-width:0;padding:10px 12px;background:#0b1419;border:1px solid #3b5158;color:var(--text);border-radius:4px;font:inherit}
.testerBar select{padding:9px 8px;background:#0b1419;border:1px solid #3b5158;color:var(--text);border-radius:4px;font:inherit;font-size:12px}
.testerMeta{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin:4px 0 10px}
.testerGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px;max-height:48vh;overflow:auto;padding:2px 4px 2px 0}
.testerItem{display:flex;align-items:center;gap:9px;text-align:left;padding:6px 8px;background:linear-gradient(160deg,#162129,#0f181e);border:1px solid color-mix(in srgb,var(--rarity) 45%,#26343a);border-left:3px solid var(--rarity);border-radius:4px;color:var(--text);font-size:12px;line-height:1.2}
.testerItem:hover,.testerItem:focus-visible{background:linear-gradient(160deg,#1e2d36,#131f26);border-color:var(--rarity)}
.testerItem img{width:34px;height:34px;image-rendering:pixelated;flex:none}
.testerItem span{display:flex;flex-direction:column;gap:2px;min-width:0}
.testerItem small{font-size:9px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testerEmpty{color:var(--muted);padding:20px;text-align:center;grid-column:1/-1}
.testerTools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid #2b3b41}
.testerTools b{font-size:10px;letter-spacing:.14em;color:var(--gold);margin-right:4px}
.testerTools button{padding:7px 10px;font-size:11px}
.testerDungeons{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.testerDungeons button{min-width:34px;padding:7px 8px}
#testerDock{border-color:#8a6a3c;color:#f0ca80}
/* v0.26 class skins in the atelier */
.atelierSkins{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 14px}
.atelierSkin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:linear-gradient(160deg,#172129,#101a20);border:1px solid #3c4a44;border-radius:4px;color:var(--text);font-size:10px;line-height:1.2;text-align:center}
.atelierSkin canvas{width:64px;height:68px;image-rendering:pixelated}
.atelierSkin small{display:block;font-size:8px;color:var(--muted);letter-spacing:.08em}
.atelierSkin.selected{border-color:#e2c58f;box-shadow:0 0 0 1px #e2c58f inset}
.atelierSkin:hover{border-color:#8a7a5a}
@media (max-width:600px){.atelierSkins{grid-template-columns:repeat(2,1fr)}}
/* v0.27 · the chosen class / mode always carries a lit gold frame (border-image alone could be lost to later frame rules) */
.classOption,.modeOption{position:relative;transition:box-shadow .15s,transform .15s,filter .15s}
.classOption:hover,.modeOption:hover{filter:brightness(1.08)}
.classOption.active,.modeOption.active{box-shadow:0 0 0 2px #ecc25a,0 0 0 4px #3c2414,0 0 22px 2px #ecc25a66,inset 0 0 24px #ecc25a26!important;transform:translateY(-1px)}
.classOption.active::after,.modeOption.active::after{content:'✦ CHOSEN';position:absolute;top:8px;right:10px;font:11px var(--pixel,monospace);letter-spacing:.12em;color:#fde89a;text-shadow:0 1px 0 #3c2414}
.sessionActions{margin-top:10px}.sessionActions .danger{color:#f9c7b8;border-color:#a3304a!important}.sessionActions .danger:hover{background:#4a1328}
/* v0.27 · reliquary opening: a full-screen soft dim (no hard rectangle) and crisp integer pixels */
#crateOverlay{background:radial-gradient(ellipse at 50% 58%,rgba(29,16,48,.62),rgba(7,6,12,.9) 70%);opacity:0;transition:opacity .18s}
#crateOverlay.on{opacity:1}
#crateOverlay canvas{image-rendering:pixelated!important;background:transparent}
/* v0.27 · the Atelier reliquary sits inside its own column instead of spilling over the wallet */
.atelierVault{grid-template-columns:140px 1fr!important}
.atelierCrate{min-height:124px;overflow:visible}
.atelierCrate .chestStage{width:136px!important;height:124px!important}
.atelierCrate .chestStage .chestArt{width:128px!important;height:120px!important;object-fit:none;image-rendering:pixelated!important}
.atelierCrate .chestRays{inset:-6px!important}
/* v0.27 · item art is always sampled as crisp pixels (earlier rules smoothed some slots) */
.packSlot img,.vaultTile img,.itemCard img,.slot img,.inventorySlot img,.lootStage img,.detail img,.relicTease img,#groundSlots img,#nearbyInspect .inspectSlot img,#packPanel .packSlot img,#gameScreen #packPanel .packSlot>img,.testerItem img{image-rendering:pixelated!important}
/* v0.30.0 · tester live-run tools */
.testerLive{border-top:1px solid #2b3b41}
.testerTag{font-size:10px;letter-spacing:.1em;color:#b4c3db}
.testerTools select{padding:6px 8px;font-size:11px;background:#171327;color:#f2e7c9;border:1px solid #3e3946;border-radius:6px;max-width:190px}
.testerTools button.testerDim{opacity:.45}
/* v0.29 · one 40px pixel relic per item, shared by bag, vault, cards, tooltips and the floor.
   The v0.23 smooth-HD override is retired for item art: relics render pixel-crisp at 1x
   (bag/vault) or whole multiples (cards 2x, reward reveal 4x). */
.packSlot img,.vaultTile img,.itemCard img,.slot img,.inventorySlot img,.lootStage img,.detail img,.relicTease img,.inspectSlot img,.cosmeticChest img{image-rendering:pixelated!important}
.packSlot img,.vaultTile img{width:40px!important;height:40px!important;max-width:100%!important;max-height:100%!important;flex:0 0 auto!important;object-fit:contain!important}
.itemCard img{width:80px!important;height:80px!important}
.lootStage .rewardItem{width:160px!important;height:160px!important}
.slot img{width:40px!important;height:40px!important}
/* v0.30 · guardian reliquary panel: anchored low on the left (hud-layout.js layoutLoot sizes it),
   whole-pixel chest scale, never scrolls, never covers the menu or party list */
#gameScreen #groundLoot{top:auto!important;bottom:14px!important;left:var(--hud-gap,12px)!important;max-height:var(--loot-max,calc(100dvh - 190px))!important;overflow:hidden!important;scrollbar-width:none!important}
#gameScreen #groundLoot::-webkit-scrollbar{display:none}
#gameScreen #groundLoot #chestArt{height:var(--loot-art,160px)!important;margin:2px 0 4px!important;display:flex;justify-content:center;overflow:visible}
#gameScreen #groundLoot .chestStage{width:calc(var(--loot-art,160px) * 1.2)!important;height:var(--loot-art,160px)!important}
#gameScreen #groundLoot .chestStage .chestArt{width:calc(var(--loot-art,160px) * 1.2)!important;height:var(--loot-art,160px)!important}
/* v0.30 · the satchel scrolls: a visible gold scrollbar, and an item's full description is shown */
#gameScreen #packPanel #packBody,#gameScreen.hudDesktop #packPanel #packBody{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important;scrollbar-color:#b49c72 #0b1820!important;scrollbar-gutter:stable}
#gameScreen #packPanel #packBody::-webkit-scrollbar{display:block!important;width:7px}
#gameScreen #packPanel #packBody::-webkit-scrollbar-track{background:#0b1820}
#gameScreen #packPanel #packBody::-webkit-scrollbar-thumb{background:#b49c72;border:1px solid #0b1820;border-radius:0}
#gameScreen #packPanel #itemDetail,#gameScreen.hudDesktop #packPanel #itemDetail{max-height:none!important;overflow:visible!important}
#gameScreen.hudDesktop #packPanel{overflow:hidden!important}
/* v0.31 · chat beside the reliquary: placed by placeChat() in hud-layout.js */
#gameScreen.chatBesideLoot #chatPanel,#gameScreen.chatBesideLoot #chatFeed{left:var(--chat-left)!important;bottom:var(--chat-bottom)!important;width:var(--chat-width)!important;max-width:none!important;transform:none!important}
#gameScreen.chatBesideLoot #chatPanel:not([hidden]){display:block!important}
#gameScreen.chatBesideLoot #chatFeed:not([hidden]){display:flex!important}
#groundLoot #lootDetail{display:flex;flex-direction:column;gap:2px;font-size:8px;line-height:1.35;color:#c6d0cc;border-top:1px solid #4b626655;padding-top:5px;margin-top:5px;text-align:left}
#groundLoot #lootDetail[hidden]{display:none!important}
#groundLoot #lootDetail strong{font-size:9px}
#groundLoot #lootDetail small{font-size:7px;color:#a7b9b7}

/* v0.32.1 · Proximity ledger now belongs to the left-side location/loot stack.
   This overrides the older right-rail coordinates without touching the satchel,
   minimap or separate interaction button. Geometry is measured in placeNearby(). */
#gameScreen.hudDesktop #nearbyPanel{
 left:var(--hud-gap)!important;
 right:auto!important;
 width:min(var(--hud-left-width),250px)!important;
 top:var(--hud-left-nearby-top,220px)!important;
 height:var(--hud-left-nearby-height,170px)!important;
 max-height:var(--hud-left-nearby-height,170px)!important;
 min-height:0!important;
 overflow-y:auto!important;
}

/* v0.32.2 · the full-height right-hand satchel. The roster moved left in
   v0.32.1, so the satchel now grows down to the interaction plaque with a
   10px breathing space; the tall Wayrest minimap clears its top edge. */
#gameScreen.hudDesktop #packPanel{
 height:var(--hud-pack-height)!important;
 max-height:var(--hud-pack-height)!important;
 min-height:0!important;
 overflow:visible!important;
}
#gameScreen.hudDesktop #packPanel #packBody{
 flex:1 1 auto!important;
 min-height:0!important;
 overflow:visible!important;
 overflow-y:visible!important;
 overflow-x:visible!important;
 scrollbar-width:none!important;
 scrollbar-gutter:auto!important;
 padding:6px 8px 7px!important;
}
#gameScreen.hudDesktop #packPanel #packBody::-webkit-scrollbar,
#gameScreen.hudDesktop #packPanel #itemDetail::-webkit-scrollbar{display:none!important;width:0!important}
#gameScreen.hudDesktop #equipSlots,
#gameScreen.hudDesktop #bagSlots{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,var(--hud-slot-size,66px)))!important;
 grid-auto-rows:auto!important;
 justify-content:center!important;
 column-gap:5px!important;
 row-gap:5px!important;
}
#gameScreen.hudDesktop #packPanel .packSlot{
 width:100%!important;
 aspect-ratio:1 / 1!important;
 height:auto!important;
 min-width:0!important;
 min-height:0!important;
}
#gameScreen.hudDesktop #packPanel .packTabs{margin:4px 0 6px!important}
#gameScreen.hudDesktop #packPanel #itemDetail{
 display:grid!important;
 gap:3px!important;
 overflow:visible!important;
 max-height:none!important;
 height:auto!important;
 min-height:24px!important;
 white-space:normal!important;
 overflow-wrap:anywhere!important;
}
#gameScreen.hudDesktop > #interaction:not([hidden]){top:var(--hud-action-top)!important}
@media(min-width:900px) and (max-height:810px){
 #gameScreen.hudDesktop #packPanel #packBody{padding:4px 6px 5px!important}
 #gameScreen.hudDesktop #equipSlots,#gameScreen.hudDesktop #bagSlots{gap:3px!important}
 #gameScreen.hudDesktop #packPanel .packTabs{margin:2px 0 3px!important}
}

/* v0.33.1 · the satchel scrolls again. Tiles keep their full size; when a
   selected item's description doesn't fit, the satchel body shows the gold
   scrollbar instead of shrinking every slot. */
#gameScreen.hudDesktop #packPanel{overflow:hidden!important}
#gameScreen.hudDesktop #packPanel #packBody{
 overflow-y:auto!important;
 overflow-x:hidden!important;
 scrollbar-width:thin!important;
 scrollbar-color:#b49c72 #0b1820!important;
 scrollbar-gutter:stable!important;
 padding:6px 8px 7px!important;
}
#gameScreen.hudDesktop #packPanel #packBody::-webkit-scrollbar{display:block!important;width:7px!important}
#gameScreen.hudDesktop #packPanel #packBody::-webkit-scrollbar-track{background:#0b1820}
#gameScreen.hudDesktop #packPanel #packBody::-webkit-scrollbar-thumb{background:#b49c72;border:1px solid #0b1820;border-radius:0}

/* v0.33.11: keep the farewell banner visible and its action ten pixels above it. */
body.fallen #toast{opacity:1!important;transform:translateX(-50%)!important;pointer-events:none}
#respawnNow[hidden]{display:none!important}

/* v0.33.13 · default chat home is bottom-left UNDER the nearby ledger; placeChat() shrinks the
   history (and caps the closed-chat feed) on short windows so it never covers the ledger. */
#gameScreen.hudDesktop:not(.chatBesideLoot) #chatMessages{height:var(--chat-messages-height,clamp(110px,24vh,230px))!important}
#gameScreen.hudDesktop:not(.chatBesideLoot) #chatFeed{max-height:var(--chat-feed-max,none);overflow:hidden;justify-content:flex-end}

/* v0.37 · waystone card (opened from a diamond on the minimap or the atlas) */
#wayPop{position:fixed;z-index:45;width:236px;padding:13px 15px 12px;color:#f8ebce;background:linear-gradient(#24182ef4,#150f1ef4);border:2px solid var(--way,#c8a2ec);border-radius:4px;box-shadow:0 0 0 2px #0e0b17,0 10px 28px #000b,0 0 22px color-mix(in srgb,var(--way,#c8a2ec) 30%,transparent);font-size:11px;animation:wayIn .16s ease-out}
#wayPop .wayEyebrow{font-size:8px;letter-spacing:.28em;color:var(--way,#c8a2ec);margin-bottom:5px}
#wayPop strong{display:block;font:20px 'Cormorant Garamond',Georgia,serif;line-height:1.1;color:#fffaea}
#wayPop p{font-size:10px;line-height:1.5;margin:6px 0 8px;color:#b9aec9}
#wayPop .wayState{font-size:10px;padding:6px 8px;border-left:2px solid #6e5f78;background:#0e0b1799;color:#a99fb6;margin-bottom:10px}
#wayPop .wayState.ok{border-color:var(--way,#c8a2ec);color:#fffaea}#wayPop .wayState.wait{border-color:#cc9235;color:#fde89a}
#wayPop .wayActions{display:flex}#wayPop .wayGo{flex:1;font-size:15px!important;padding:6px 10px!important}
#wayPop .wayX{position:absolute;top:6px;right:10px;font-size:18px;line-height:1;color:#9a93a0;cursor:pointer}#wayPop .wayX:hover{color:#fffaea}
@keyframes wayIn{from{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:none}}
/* v0.42 · seven classes: the recruit screen lays them out as a gallery */
.classOptions{grid-template-columns:repeat(4,minmax(0,1fr))}
.classOptions .classOption{padding:12px 10px}
.classOptions .classOption canvas{width:72px;height:72px}
#startingDesc{min-height:4.2em}
@media(max-width:900px){.classOptions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.classOptions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.atelierSkins{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.classOptions .classOption strong{font-size:15px!important;line-height:1.2!important;letter-spacing:0!important;white-space:nowrap;display:block}
.classOptions .classOption span{font-size:10px}
.classOptions .classOption small{font-size:9px}
@media(max-width:700px){.classOptions .classOption strong{font-size:16px!important}}

/* v0.46 · living portraits: canvases are drawn at their exact box size (whole art pixels), never rescaled */
.heroCard canvas{width:102px!important;height:102px!important}@media(min-width:701px){.activeHero canvas{width:68px!important;height:68px!important}}.classOption canvas,.heroCard canvas,.activeHero canvas,.atelierSkin canvas{image-rendering:pixelated!important}
/* v0.49 · the roster's selected adventurer wears the recruit menu's selection border: the gold ring, the dark keyline and the warm glow */
.heroCard.active{box-shadow:0 0 0 2px #ecc25a,0 0 0 4px #3c2414,0 0 22px 2px #ecc25a66,inset 0 0 24px #ecc25a26!important;transform:translateY(-1px)}

/* v0.50.1 · storage keepers open one framed window each, centred between the
   left HUD and the right rail (recruit-menu frame), with no tab strip. */
#app.journalDocked{inset:auto!important;left:var(--journal-left)!important;width:var(--journal-width)!important;max-height:var(--journal-max)!important;top:50%!important;bottom:auto!important;right:auto!important;transform:translateY(-50%);height:auto;overflow:auto;border:16px solid transparent!important;border-image:var(--frame) 8 fill / 16px / 0 stretch!important;border-radius:0!important;background:transparent!important;box-shadow:0 24px 80px #000a!important;image-rendering:pixelated;padding:4px 6px}
#app.journalDocked header,#app.journalDocked>main,#app.journalDocked .subnav,#app.journalDocked footer{background:transparent!important;border-color:#b58c4b44!important}
#app.journalDocked .journalClose{background:transparent!important;border:0!important;border-image:none!important;padding:6px 8px!important;font-size:12px;color:#ddd7be}
#app.journalDocked header{position:static;padding:8px 14px!important}
#app.journalDocked .brand,#app.journalDocked footer{display:none!important}
#app.journalDocked #lobby{padding:12px 14px!important}
#app nav{display:none!important}
/* inventory header: class name + stats button (maxed stats / 10) */
#packToggle{cursor:default}
#packToggle .statsBtn{display:inline-flex!important;align-items:center;gap:6px;flex:0 0 auto;margin:0!important;padding:3px 7px!important;min-height:0!important;border:1px solid #b58c4b88!important;border-image:none!important;border-radius:2px!important;background:#0c1a26!important;color:#b4c3db;font-family:var(--pixel);font-size:9px;line-height:1;cursor:pointer}
#packToggle .statsBtn:hover,#packToggle .statsBtn.active{color:var(--gold,#ecc25a);border-color:var(--gold,#ecc25a)!important;filter:none}
#packToggle .statsBtn svg{display:block;flex:0 0 auto}
#packToggle .statsBtn #packCount{color:inherit!important;font-size:9px!important;margin:0}
/* character stats panel, left of the minimap and clear of the inventory */
#statsPanel{position:fixed;z-index:30;top:30px;right:400px;width:560px;display:flex;flex-direction:column}
#statsPanel[hidden]{display:none!important}
#statsPanel .statsPanelBox{width:100%!important;max-width:none!important;max-height:inherit!important;overflow:auto}
#statsPanel .statsPanelBox .close{z-index:2}
@media(max-width:899px){#statsPanel{left:8px!important;right:8px!important;width:auto!important;top:8px!important}}

/* v0.55 · Legendary and Divine tiles come alive with the icons: a gold sheen glides across Legendary tiles
   at rest, and Divine tiles wear a slow aureole that circles the frame in two pale beams. */
@property --relic-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard):is([data-tier="3"],[data-tier="4"])::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit}
:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard)[data-tier="3"]::after{
 background:linear-gradient(112deg,transparent 40%,#ffe9a826 46%,#fff8e055 50%,#ffe9a826 54%,transparent 60%) 0 0/300% 100% no-repeat;
 mix-blend-mode:screen;animation:relic-sheen 4.6s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes relic-sheen{0%,62%{background-position:100% 0}100%{background-position:0 0}}
:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard)[data-tier="4"]::after{
 padding:1px;background:conic-gradient(from var(--relic-spin),transparent 0deg,#c8a2ec66 24deg,#ffffff 52deg,#ecd9fb 64deg,transparent 104deg,transparent 180deg,#9fd8ff66 204deg,#ffffff 232deg,#cfe9ff 244deg,transparent 284deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 filter:drop-shadow(0 0 3px #d9b8ff);animation:relic-spin 6s linear infinite}
@keyframes relic-spin{to{--relic-spin:360deg}}
@media(prefers-reduced-motion:reduce){:is(#packPanel .packSlot.filled,.vaultTile.hasItem,.itemCard):is([data-tier="3"],[data-tier="4"])::after{animation:none}}
/* v0.58.1 · inventory item art sits 10% smaller inside its slot, leaving the top-right corner clear for
   the rarity sigil. `scale` is independent of the many width/height/transform rules above, so it
   composes with them (and with the hover lift) instead of fighting their !important sizes. */
.packSlot>img,.vaultTile>img,.loadoutBox .slot>img{scale:.9}
/* v0.61 · Mystery Vault openings: the crate reel and the wishing lantern */
#reelOverlay,#lanternOverlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
#reelOverlay{background:radial-gradient(ellipse at 50% 44%,rgba(16,46,54,.9),rgba(7,6,12,.97) 70%)}
#lanternOverlay{background:#07060c}
#reelOverlay.on,#lanternOverlay.on{opacity:1}
#reelOverlay canvas,#lanternOverlay canvas{image-rendering:pixelated!important;image-rendering:crisp-edges;display:block;cursor:pointer;touch-action:none;background:transparent}
/* v0.61 · The Mystery Vault in the atelier: three containers, the selected one on the stage */
.mysteryVault{display:flex;flex-direction:column;gap:9px}
.vaultTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.vaultTab{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;text-align:left;border:1px solid #485f5e;background:linear-gradient(160deg,#172129,#101a20);transition:border-color .13s,background .13s,transform .13s}
.vaultTab img{width:32px;height:30px;flex:none;object-fit:contain;image-rendering:pixelated!important;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--chest) 55%,transparent))}
.vaultTab span{font-size:10px;line-height:1.25;min-width:0;white-space:normal;color:#e8dcc0}
.vaultTab small{display:block;margin-top:3px;font-size:8px;letter-spacing:.12em;color:#8baca8}
.vaultTab::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--chest);opacity:0;transition:opacity .13s}
.vaultTab:hover{border-color:#8a7a5a}
.vaultTab.selected{border-color:var(--chest);background:linear-gradient(160deg,color-mix(in srgb,var(--chest) 16%,#172129),#101a20);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chest) 35%,transparent)}
.vaultTab.selected::after{opacity:1}
.vaultTab.empty img{opacity:.55;filter:grayscale(.5)}
.mysteryVault .atelierVault{grid-template-rows:auto auto auto auto;background:radial-gradient(ellipse at 15% 40%,color-mix(in srgb,var(--chest) 16%,transparent),#152b315c 67%);border-color:color-mix(in srgb,var(--chest) 38%,#77705178)}
.mysteryVault .atelierCrate{grid-row:1/6}
.mysteryVault .atelierCrateGlow{background:radial-gradient(circle,color-mix(in srgb,var(--chest) 45%,transparent),transparent 68%)}
.vaultName{display:flex;flex-direction:column;gap:3px;align-self:end}
.vaultName strong{font:18px Georgia,serif;color:#efe1bf}
.vaultName small{font-size:10px;color:#a6baba;letter-spacing:.03em}
.mysteryVault .atelierWallet{font-size:20px;align-self:center}
.mysteryVault .atelierOpen{margin:4px 0 2px}
.mysteryVault .atelierOpen:disabled{font-size:11px}
@media(max-width:780px){.vaultTabs{grid-template-columns:1fr}.vaultTab{padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.vaultTab{transition:none}}
/* v0.63 · Tier sigils: a tiered Common shows its tier (T1–T5) in the rarity corner.
   v0.71 · the mark keeps the T1 pewter ink at every tier: only the numeral changes, never the colour. */
.raritySigil.graded,.raritySigil.graded.g1,.raritySigil.graded.g2,.raritySigil.graded.g3,.raritySigil.graded.g4,.raritySigil.graded.g5{--tierInk:#b8c0c4}
.raritySigil.graded{color:var(--tierInk)!important;border-color:color-mix(in srgb,var(--tierInk) 55%,#0b1820)!important}
.raritySigil.graded svg.tierMark{stroke:currentColor;stroke-width:1!important;stroke-linecap:butt;fill:none;shape-rendering:crispEdges}
/* v0.63 · Oath seal: a wax seal on a Hardmode relic resting in Normal hands */
.oathSeal{position:absolute;z-index:3;left:2px;bottom:2px;width:12px;height:12px;pointer-events:auto;filter:drop-shadow(0 1px 1px #000c)}
.oathSeal svg{display:block;width:12px;height:12px}
.oathSeal svg path{fill:#a3304a;stroke:#ffb3c0;stroke-width:.6}
.oathSeal svg path.tick{fill:none;stroke:#ffe3e8;stroke-width:1.1;stroke-linecap:square}
#gameScreen #packPanel .packSlot .raritySigil.graded,#packPanel .packSlot .raritySigil.graded,#modal .vaultTile .raritySigil.graded,.vaultTile .raritySigil.graded,.loadoutBox .slot .raritySigil.graded{color:var(--tierInk)!important;border-color:color-mix(in srgb,var(--tierInk) 55%,#0b1820)!important}

/* v0.71 · the wardrobe: kind filters, sculpted hat icons and trail sparkles */
.atelierFilters{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 7px}
.atelierFilters button{padding:4px 9px!important;font-size:10px!important;letter-spacing:.06em;opacity:.7}
.atelierFilters button.on{opacity:1;filter:brightness(1.35)}
.atelierSwatches{max-height:330px}
.atelierSwatch i.hatIcon{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--swatch) 35%,#101d21),#0b161b 75%);display:grid;place-items:center;overflow:hidden}
.atelierSwatch i.hatIcon img{max-width:26px;max-height:26px;image-rendering:pixelated;transform:scale(1.15)}
.atelierSwatch i.trailDot{background:radial-gradient(circle,var(--swatch) 0 2px,transparent 3px) 6px 7px/9px 9px,radial-gradient(circle at 50% 50%,#13262d,#0b161b);border-style:dashed}
.atelierSwatch[hidden]{display:none!important}
/* v0.71.2 · THE KEEPERS' WINDOWS · the storage keepers open the same kind of window as the menus under Options
   (Ledger, Chronicle, Raids): one gold-cornered frame, an opaque night-ink body, a pixel eyebrow and title, and the
   small × in the corner. The keeper's animated portrait and their words ARE the window's header, so the old
   "Return to world" bar, the gold/settings strip, the breadcrumb row and each page's giant title are gone. */
#app.journalDocked{background:radial-gradient(ellipse at 12% 0%,#2a2350 0%,transparent 52%),linear-gradient(140deg,#17142c,#0e0b17 60%,#151a30)!important;background-clip:padding-box!important;border-image:var(--frame) 8 / 16px / 0 stretch!important;padding:14px 18px 16px!important;scrollbar-width:thin;scrollbar-color:#435078 #0e0b17}
#app.journalDocked>header,#app.journalDocked>.subnav,#app.journalDocked footer{display:none!important}
#app.journalDocked>main,#app.journalDocked #lobby{background:transparent!important;padding:0!important}
#app.journalDocked .journalClose,#app .journalClose.close{position:absolute!important;top:6px!important;right:8px!important;z-index:5;width:auto;padding:2px 10px!important;border:0!important;border-image:none!important;background:transparent!important;font-size:25px!important;line-height:1;color:#a7b4ac!important;font-family:inherit!important}
#app.journalDocked .journalClose:hover{color:#fffaea!important}
/* the page titles say what the keeper already said: keep only their buttons and filters, on one compact row */
#app.journalDocked .pageTitle,#app.journalDocked #expeditions .intro{display:flex!important;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 12px!important;padding:0!important;min-height:0!important}
#app.journalDocked .pageTitle>div:first-child,#app.journalDocked #expeditions .intro>div:first-child{display:none!important}
#app.journalDocked .pageTitle h1,#app.journalDocked .intro h1{display:none!important}
#app.journalDocked #recruitBtn{font-size:13px!important;padding:6px 12px!important}
#app.journalDocked .vaultTitle{justify-content:flex-start}
#app.journalDocked .vaultFilters{margin:0!important}
/* the greeting: portrait | eyebrow, name and purse | the line, typing */
:is(#app,#modal) .npcGreeting{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin:0 26px 14px 0;padding:0 0 14px;border-bottom:1px solid #2b2733}
:is(#app,#modal) .npcGreeting[hidden]{display:none}
:is(#app,#modal) .npcFrame{position:relative;padding:3px;background:#0e0b17;border:2px solid color-mix(in srgb,var(--npcGlow,#ecc25a) 70%,#5c4a2a);box-shadow:0 0 16px color-mix(in srgb,var(--npcGlow,#ecc25a) 28%,transparent);cursor:pointer}
:is(#app,#modal) .npcFrame canvas{display:block;width:110px;height:95px;image-rendering:pixelated}
:is(#app,#modal) .npcHead{min-width:0;display:flex;flex-direction:column;gap:8px}
:is(#app,#modal) .npcTitleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
:is(#app,#modal) .npcRole{color:var(--npcGlow,#ecc25a)!important;font-size:9px!important;letter-spacing:1.4px!important}
:is(#app,#modal) .npcName{margin:6px 0 0;font:normal clamp(22px,2.4vw,30px)/1.1 var(--pixel,monospace);color:#fffaea;text-shadow:0 2px 0 #0e0b17;letter-spacing:.02em}
:is(#app,#modal) .npcPurse{flex:none;text-align:right;padding:6px 10px;background:#0e0b17;border:1px solid #5c4a2a}:is(#app,#modal) .npcPurse small{display:block;color:#9a93a0}:is(#app,#modal) .npcPurse b{font:normal 16px var(--pixel,monospace);color:#fde89a}
:is(#app,#modal) .npcSpeech{position:relative;display:flex;align-items:flex-end;gap:10px;padding:9px 12px;background:#0e0b17b3;border:1px solid #2b2733;border-left:3px solid var(--npcGlow,#ecc25a);min-height:54px}
:is(#app,#modal) .npcSpeech:before{content:'';position:absolute;left:-11px;top:14px;border:7px solid transparent;border-right-color:var(--npcGlow,#ecc25a)}
:is(#app,#modal) .npcLine{flex:1;margin:0;color:#e6dccb;font:14px/1.45 Georgia,serif;font-style:italic;min-height:2.9em}
:is(#app,#modal) .npcLine:before{content:'“';color:var(--npcGlow,#ecc25a)}:is(#app,#modal) .npcLine[data-done="1"]:after{content:'”';color:var(--npcGlow,#ecc25a)}:is(#app,#modal) .npcLine[data-done="0"]:after{content:'▍';color:var(--npcGlow,#ecc25a);animation:npcCaret .5s steps(2) infinite}
@keyframes npcCaret{to{opacity:0}}
:is(#app,#modal) .npcMore{flex:none;padding:4px 10px!important;border:1px solid #435078!important;background:#171327!important;color:#f2e7c9;font:10px var(--pixel,monospace)!important;letter-spacing:.8px;cursor:pointer}:is(#app,#modal) .npcMore:hover{border-color:var(--npcGlow,#ecc25a)!important;color:#fffaea}
/* v0.72 · the camp shows the roster, the adventurer's gear, the ten stats and the Afterbloom (Orrin's forge has its own benches now) */
#loadout .masteryPanel{display:none!important}
#app[data-npc] #heroCards{gap:10px}
/* the codex: compact tiles instead of 647 tall cards, and a filter */
#app #codex .itemGrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))!important;gap:6px!important}
#app #codex .itemCard{min-height:0!important;padding:4px 6px!important;text-align:center}
#app #codex .itemCard img{width:48px!important;height:48px!important;margin:4px auto 2px!important;display:block}
#app #codex .itemCard h3{font-size:12px!important;line-height:1.2!important;margin:2px 0 0!important}
#app #codex .itemCard small{font-size:8px!important;line-height:1.3;display:block}
#app #codex .itemCard .stat{display:none}
#app #codex .itemCard .itemCount{position:static!important;display:block;font-size:8px!important;opacity:.8}
#app #codex .itemCard.locked h3,#app #codex .itemCard.locked small{opacity:.55}
#app #codexGrid[data-show="found"] .itemCard.locked,#app #codexGrid[data-show="lost"] .itemCard:not(.locked){display:none}
#app .codexFilter{display:flex;gap:4px}#app .codexFilter button{font-size:10px!important;padding:2px 8px!important}#app .codexFilter button.on{color:#fde89a;filter:brightness(1.3)}
/* contracts: no dead air above or between the cards */
#app.journalDocked #contracts{margin-top:0!important}
@media(max-width:700px){:is(#app,#modal) .npcGreeting{grid-template-columns:auto 1fr;gap:10px;margin-right:30px}:is(#app,#modal) .npcFrame canvas{width:77px;height:66px}:is(#app,#modal) .npcLine{font-size:13px}:is(#app,#modal) .npcPurse{display:none}}
@media(prefers-reduced-motion:reduce){:is(#app,#modal) .npcFrame{box-shadow:none}:is(#app,#modal) .npcLine[data-done="0"]:after{animation:none}}
#app .journalClose:focus{outline:none!important;box-shadow:none!important}#app .journalClose:focus-visible{outline:1px solid #ecc25a!important}
#app.journalDocked .npcTitleRow{padding-right:34px}
#app #codex .itemCard.locked small{display:none}
/* v0.71.2 · Old Wick's window: the keepers' layout in lamplight */
#modal .wickShell{--npcGlow:#ffcf7a}
#modal .wickTalk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
#modal .wickFrame{padding:3px;background:#0e0b17;border:2px solid #c49a6c;box-shadow:0 0 18px #ffcf7a40}
#modal .wickFrame canvas,#modal .wickTalk canvas{display:block;width:130px!important;height:110px!important;image-rendering:pixelated;border:0!important;background:none!important;border-radius:0!important}
#modal .wickHead{min-width:0;display:flex;flex-direction:column;gap:8px}
#modal .wickHead h2{margin:4px 0 0;font:normal clamp(24px,2.6vw,32px)/1.1 var(--pixel,monospace);color:#fffaea;text-shadow:0 2px 0 #0e0b17}
#modal .wickSpeech{position:relative;display:flex;align-items:flex-end;gap:10px;padding:10px 12px;background:#2a1d14cc;border:1px solid #6b5132;border-left:3px solid #ffcf7a;min-height:64px}
#modal .wickSpeech:before{content:'';position:absolute;left:-11px;top:16px;border:7px solid transparent;border-right-color:#ffcf7a}
#modal .wickLine{flex:1;margin:0!important;color:#f6e6c8!important;font:15px/1.45 Georgia,serif!important;font-style:italic!important}
#modal .wickLine:before{content:'“';color:#ffcf7a}#modal .wickLine[data-done="1"]:after{content:'”';color:#ffcf7a}#modal .wickLine[data-done="0"]:after{content:'▍';color:#ffcf7a;animation:npcCaret .5s steps(2) infinite}
#modal .wickMore{flex:none;padding:4px 10px!important;border:1px solid #6b5132!important;background:#171327!important;color:#f6e6c8;font:10px var(--pixel,monospace)!important;cursor:pointer}
#modal .wickActions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
#modal .wickShell .wickHint,#modal .wickShell .warning{margin:10px 0 4px}
@media(max-width:700px){#modal .wickTalk{grid-template-columns:1fr}#modal .wickFrame{justify-self:center}}
:is(#app,#modal) .npcLine[data-done="0"]:after,#modal .wickLine[data-done="0"]:after{content:''!important;display:inline-block;width:.45em;height:1em;margin-left:2px;vertical-align:-2px;background:var(--npcGlow,#ffcf7a);animation:npcCaret .5s steps(2) infinite}
#modal .wickActions button{font-size:14px!important;padding:2px 8px!important}
#modal .atelierShell .npcGreeting{margin-right:30px}