:root{color-scheme:dark;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#e8e7df;background:#0a151a}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit}button{cursor:pointer;border:1px solid #c7b47a66;background:#d9c58f;color:#18252a;padding:14px 25px;letter-spacing:.12em;transition:.2s}button:hover{background:#f0dfb4}button:disabled{opacity:.4;cursor:wait}button.quiet{background:#14262ab0;color:#d7dbd4;border-color:#71817b55}button.quiet:hover{background:#304144}canvas{width:100vw;height:100vh;display:block;touch-action:none}header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header button{pointer-events:auto}.brand{font-size:27px;letter-spacing:.18em;font-weight:600}.brand>span{color:#d5bd81}.brand small{display:block;font-size:9px;letter-spacing:.26em;margin-top:4px;color:#9daea8}kbd{display:inline-flex;border:1px solid #a7b5a955;border-radius:4px;background:#1b2d30b3;justify-content:center;align-items:center;min-width:27px;height:27px;font:13px "Segoe UI";color:#e6dcc0}header kbd{margin-left:7px}#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05101750,transparent 27%,transparent 65%,#071114bb)}#hurt{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #9c162a;opacity:0}#hud{position:absolute;left:36px;top:112px;width:255px}.health-title{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;margin-bottom:9px}.health-track{height:5px;background:#203536;border:1px solid #75918644}.health-track i{display:block;height:100%;background:linear-gradient(90deg,#618c83,#d9dba4);transition:width .15s}.stats{display:flex;gap:20px;margin-top:10px;font-size:11px;color:#94aaa6}#objective{position:absolute;right:36px;top:118px;text-align:right;max-width:350px}#objective small{font-size:10px;letter-spacing:.2em;color:#c9b879}#objective h2{font-size:21px;font-weight:400;margin:10px 0}#objective p{font-size:12px;color:#a1b4b0;line-height:1.6}#bossHud{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:32%;text-align:center}#bossHud>span{font-size:12px;color:#dcc1ab}#bossHud>div{height:5px;margin:10px;background:#182d30}#bossFill{display:block;height:100%;background:#b95859}#bossState{font-size:10px;color:#a6b7b0}footer{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:26px;padding:15px 28px;border-top:1px solid #76958e40;background:linear-gradient(0deg,#071a1b99,transparent);white-space:nowrap;pointer-events:none}.move{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}.move small{position:absolute;bottom:-18px;font-size:9px;color:#819a96}.move span{display:flex;gap:3px}.skill{display:grid;grid-template-columns:30px auto;column-gap:9px;align-items:center;position:relative}.skill kbd{grid-row:span 2;height:35px;color:#e7d8ae}.skill b{font-size:12px;font-weight:400}.skill small{font-size:9px;color:#91a6a0;margin-top:5px}.skill.active:after{content:"";position:absolute;inset:-10px;border-bottom:2px solid #e1cb8c;background:#d6b36916}.rule{font-size:10px;letter-spacing:.08em;color:#b5b99f}.rule small{display:block;font-size:9px;color:#718c86;margin-top:6px}#notice{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-size:20px;letter-spacing:.12em;color:#ead9a4;text-shadow:0 2px 15px #000;transition:opacity .3s;pointer-events:none}#combo{position:absolute;left:36px;top:190px;color:#e6cb85;font-size:15px}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#07171beb,#07171b99 45%,#07171b30);display:flex;align-items:center;padding:50px 8vw}#overlay[hidden]{display:none}article{max-width:460px;width:100%}.eyebrow{color:#bda979;font-size:10px;letter-spacing:.28em}h1{font-weight:300;font-size:60px;letter-spacing:.12em;margin:23px 0}article p{font-size:14px;line-height:2;color:#a6bab3}article .hint{font-size:12px;line-height:2.2;margin:24px 0}.skin-select{display:flex;align-items:center;gap:20px;font-size:12px;color:#cbbd96;margin-top:22px}select{border:1px solid #81938c55;background:#12272c;color:#d7dfd5;padding:10px 15px;min-width:220px}#primary{display:block;width:100%;margin-top:25px}#secondary{width:100%;margin-top:10px}#loadStatus{font-size:10px;color:#7e9893}#resultStats{font-size:15px;line-height:2;color:#e3cd95}#touch{display:none}#touch button{padding:10px;border-radius:50%;background:#1d3c42a0;color:white;touch-action:none}body.reduced #hurt{box-shadow:none}@media(max-width:850px){header{left:18px;right:18px;top:18px}.brand{font-size:20px}#hud{left:18px;top:92px;width:185px}#objective{right:18px;top:90px;max-width:200px}#objective h2{font-size:16px}footer{gap:16px;padding:10px;bottom:20px}.rule{display:none}.skill small{display:none}.skill{gap:5px}.skill b{font-size:10px}h1{font-size:40px}#bossHud{top:57px;width:45%}header button{padding:8px}#overlay{padding:30px}#touch{display:flex;position:absolute;bottom:100px;left:15px;right:15px;justify-content:space-between}#combo{top:156px;left:18px}#notice{font-size:15px;width:90%;text-align:center}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:600px){footer{width:calc(100% - 16px);padding:10px 5px;gap:7px;justify-content:space-between}footer .move{display:none}.skill{grid-template-columns:24px auto;gap:4px}.skill kbd{min-width:24px}.skill b{font-size:10px}.brand small{font-size:8px}#objective{max-width:166px}#overlay{padding:24px}article{min-width:0}.skin-select{gap:10px}select{min-width:0;max-width:230px}#touch{gap:4px}#touch button{padding:8px;min-width:32px}}
@media(min-width:851px){footer{width:max-content;max-width:calc(100% - 24px);gap:20px;padding:15px 20px}.rule{flex:0 0 155px;white-space:normal;line-height:1.6}.skill{flex-shrink:0}}
@media(max-width:600px){.skill{display:flex;flex-direction:column;gap:5px}.skill b{font-size:9px}footer{bottom:15px}#touch{flex-wrap:wrap;justify-content:center;bottom:95px}#touch button{flex:0 0 8%;padding:7px 2px;min-width:28px}}
#objective button{max-width:100%;font-size:12px;letter-spacing:.04em;padding:10px 14px;margin-top:5px}
#enterHorde{border-color:#c8ac6b88;color:#e8d8aa}
#notice{display:none!important}
#bootLoading{display:none}
body.booting>#bootLoading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0a151a;color:#cbbd96;font-size:14px;letter-spacing:.08em}
body.booting>:not(#bootLoading):not(script){visibility:hidden!important;pointer-events:none!important}
body.immersive header,body.immersive #playerPanel,body.immersive #objective,body.immersive footer,body.immersive #touch{display:none!important}
body.immersive-all #bossHud,body.immersive-all .combat-hud-nameplates,body.immersive-all .combat-hud-floats{display:none!important}
body.boss-cinematic header,body.boss-cinematic #playerPanel,body.boss-cinematic #hud,body.boss-cinematic #objective,body.boss-cinematic footer,body.boss-cinematic #touch,body.boss-cinematic #bossHud,body.boss-cinematic #compactStatusHud,body.boss-cinematic .combat-hud-nameplates,body.boss-cinematic .combat-hud-floats{display:none!important}
.expansion-story-caption{position:fixed;z-index:25;bottom:9%;left:15%;right:15%;padding:16px 24px;text-align:center;color:#ece2c7;background:linear-gradient(90deg,transparent,#0b151ad9 12%,#0b151ad9 88%,transparent);font-size:clamp(14px,1.4vw,20px);line-height:1.65;pointer-events:none;text-shadow:0 2px 4px #000}body.immersive-all .expansion-story-caption{display:none!important}
#chapterExitBanner{position:fixed;z-index:7;top:95px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:10px 28px;text-align:center;background:linear-gradient(90deg,transparent,#082c2ce8 15%,#082c2ce8 85%,transparent);color:#caffeb;pointer-events:none;text-shadow:0 1px 4px #000}
#chapterExitBanner small,#chapterExitBanner strong,#chapterExitBanner span{display:block}#chapterExitBanner small{font-size:11px;letter-spacing:.16em}#chapterExitBanner strong{font-size:21px;line-height:1.6}#chapterExitBanner span{font-size:12px;color:#b1d8cd}
#chapterExitDirection{position:fixed;z-index:7;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;background:#08332ddd;color:#c8ffdf;border:1px solid #a7f9d89c;border-radius:20px;padding:6px 12px;pointer-events:none;white-space:nowrap;font-size:12px}#chapterExitDirection b{display:inline-block;font-size:22px;line-height:24px}
#chapterExitBanner[hidden],#chapterExitDirection[hidden],body.immersive-all #chapterExitBanner,body.immersive-all #chapterExitDirection{display:none!important}
body:has(#overlay:not([hidden]))>header,body:has(#overlay:not([hidden]))>#playerPanel,body:has(#overlay:not([hidden]))>#objective,body:has(#overlay:not([hidden]))>footer,body:has(#overlay:not([hidden]))>#touch,body:has(#overlay:not([hidden]))>#bossHud{visibility:hidden}
#exitBattle{display:block;width:100%;margin-top:10px}#exitBattle[hidden]{display:none}
#playerPanel{position:absolute;left:28px;top:94px;width:330px;padding:16px;background:#0b1c21db;border:1px solid #9caf9b26;border-radius:6px;pointer-events:none}
#playerPanel #appearanceControls{position:static;display:grid;grid-template-columns:1fr;gap:8px;pointer-events:auto}
#playerPanel #appearanceControls label{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;font-size:11px}
#playerPanel #appearanceControls select{width:100%;max-width:none;font-size:11px;padding:7px 8px;margin:0}
#playerPanel #heroLoadState:empty{display:none}
#playerPanel #hud{position:relative;inset:auto;width:100%;margin-top:16px}
#playerPanel #heroStatus,#playerPanel #combo{position:static;margin-top:10px;max-width:none}
#playerPanel #heroStatus:empty,#playerPanel #combo:empty{display:none}
#playerPanel .health-title{gap:12px;line-height:1.5;letter-spacing:0}
#hpText{flex-shrink:0}#skinName{overflow-wrap:anywhere}
header{top:24px;left:28px;right:28px}.brand{font-size:21px;letter-spacing:.08em}.brand small{font-size:9px;letter-spacing:.2em}
#objective{top:94px;right:28px;width:276px;max-width:none;padding:16px;text-align:left;background:#0b1c21db;border:1px solid #9caf9b26;border-radius:6px}
#objective h2{margin:8px 0;font-size:19px}#objective p{margin:8px 0 12px;font-size:12px;line-height:1.7}
#objective button{width:100%;margin:5px 0 0;padding:10px;font-size:12px}
#enterBattle{border-color:#d8c18788!important;color:#e9d39d!important}
#battlefieldEntry{margin-top:12px;border-top:1px solid #9caf9b26;padding-top:10px}
#battlefieldEntry summary{cursor:pointer;color:#b4c4be;font-size:11px;line-height:1.8}
#battlefieldEntry select{width:100%;min-width:0;margin-top:10px;font-size:12px}
#campaignEntry{display:block;margin:10px 0;color:#b4c4be;font-size:11px}#campaignEntry[hidden]{display:none}#campaignEntry select{display:block;width:100%;min-width:0;max-width:none;margin:6px 0 10px;padding:10px;font-size:12px}
#objective .entry-note{display:block;margin-top:8px;font-size:10px;line-height:1.6;color:#8fa49d;letter-spacing:0}
footer{width:calc(100% - 56px);max-width:1140px;bottom:20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(180px,1.5fr);gap:0;padding:10px 12px 8px;background:#0b1c21e8;border:1px solid #9caf9b33;border-radius:6px;white-space:normal;align-items:stretch}
footer .move{display:none}footer .skill{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 1fr;gap:5px 8px;padding:8px 10px;min-width:0;border-right:1px solid #9caf9b26;align-items:start}
footer .skill:last-of-type{border:0}footer .skill kbd{grid-row:1 / 3;min-width:28px;height:32px}footer .skill b{font-size:12px;line-height:1.6}footer .skill small{display:block;font-size:10px;line-height:1.65;margin:0;color:#a8bdb4;overflow-wrap:break-word}
footer .skill.active:after{inset:0;border-radius:3px;pointer-events:none}
footer .rule{grid-column:1 / -1;display:flex;justify-content:space-between;gap:12px;border-top:1px solid #9caf9b26;margin:8px 10px 0;padding-top:8px;font-size:10px;min-height:0;line-height:1.6}
footer .rule small{margin:0;font-size:10px;color:#a0b5ac}
#bossHud{top:30px;width:25%;max-width:360px}
#overlay{z-index:8;overflow:auto;padding:40px 8vw}article{max-width:510px}h1{font-size:clamp(32px,4vw,56px);line-height:1.12;letter-spacing:.015em;margin:18px 0}article .hint{margin:18px 0;line-height:1.85}article p{line-height:1.8}
#touch{display:none}
@media(max-width:1000px){
 footer{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}footer .skill{border-right:0}footer .skill:nth-of-type(4),footer .skill:nth-of-type(7){border:0}footer .skill{padding:7px 10px}
 #playerPanel{width:280px}#objective{width:250px}#bossHud{top:68px;width:30%}
}
@media(max-width:600px){
 header{left:14px;right:14px;top:15px}.brand{font-size:14px;max-width:240px}.brand small{font-size:8px;letter-spacing:.1em}header button{font-size:10px;padding:7px;letter-spacing:0}header kbd{display:none}
 #playerPanel{left:10px;top:69px;width:calc(51% - 15px);padding:10px}#objective{right:10px;top:69px;width:calc(49% - 15px);padding:10px}
 #playerPanel #appearanceControls{gap:6px}#playerPanel #appearanceControls label{display:block;font-size:9px}#playerPanel #appearanceControls select{font-size:10px;padding:6px 4px;margin-top:3px}#playerPanel #hud{margin-top:12px}
 #playerPanel .health-title{font-size:9px;gap:6px;margin-bottom:6px}#playerPanel .stats{font-size:9px;gap:10px}#playerPanel #heroStatus{font-size:10px}
 #objective small{font-size:8px;letter-spacing:.05em}#objective h2{font-size:15px;margin:6px 0}#objective p{font-size:10px;line-height:1.6;margin:6px 0}#objective button{font-size:10px;padding:8px 3px}#battlefieldEntry summary{font-size:10px}
 footer{width:calc(100% - 20px);bottom:10px;padding:6px;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:5px}footer .skill{padding:5px 4px;grid-template-columns:23px minmax(0,1fr);gap:3px 5px}footer .skill kbd{min-width:23px;height:27px;font-size:11px}footer .skill b{font-size:10px}footer .skill small{font-size:9px;line-height:1.5}footer .rule{margin:5px 4px 0;font-size:9px;gap:5px;flex-wrap:wrap}footer .rule small{font-size:9px}
 #overlay{padding:24px;align-items:flex-start}article{margin:auto 0}article .skin-select{display:block}article .skin-select select{display:block;margin-top:8px;width:100%;max-width:none}article .hint{font-size:11px}#primary{margin-top:18px}#bossHud{top:52px;width:40%}#bossHud>span{font-size:9px}#bossHud>div{margin:4px}
}
@media(pointer:coarse){#touch{display:flex;position:absolute;left:10px;right:10px;bottom:220px;gap:4px;justify-content:center;flex-wrap:wrap}#touch button{min-width:28px;flex:1;padding:8px 2px}}
@media(max-height:600px) and (min-width:601px){#playerPanel,#objective{top:70px;padding:10px}header{top:12px}#objective p{margin:4px 0}#objective button{padding:6px}#overlay{align-items:flex-start;padding:24px}article{margin:auto 0}article .hint{margin:10px 0}h1{font-size:32px}footer{bottom:8px}}

#hudSkinLabel[hidden],.skin-select[hidden]{display:none!important}
#heroLoadState{color:#d6c491;font-size:10px}#heroStatus{color:#d1c1dc;font-size:11px;line-height:1.7}.skill.unavailable{opacity:.35}.skill.cooling kbd{color:#718980}

/* Preserve title contrast above the bright cloud-city floor. */
body[data-act="2"] .brand{text-shadow:0 2px 6px #142331,0 0 14px #142331}
#damageBuffs{font-size:11px;line-height:1.7;color:#e1c6ff;padding-top:7px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#damageBuffs[hidden]{display:none}
#partyHealth{display:flex;gap:5px;margin-top:8px;font-size:10px;line-height:1.6}
#partyHealth span{flex:1;padding:3px 4px;border:1px solid #9caf9b26;border-radius:3px;text-align:center;color:#a8bdb4}
#partyHealth .active{color:#eee0b8;border-color:#d5bd8180}
#partyHealth .fallen{color:#8c797b;text-decoration:line-through}

/* Give the expanded Boss status its own row on narrow screens. */
@media(max-width:600px){
 #bossHud{top:58px;width:calc(100% - 20px);max-width:none;padding:7px 10px;background:#0b1c21e8;border:1px solid #9caf9b33;border-radius:5px}
 #bossHud>span{display:block;font-size:10px;line-height:1.3}
 #bossHud>div{margin:5px 0}
 #bossState{display:block;font-size:9px;line-height:1.5}
 body:has(#bossHud:not([hidden])) #playerPanel,body:has(#bossHud:not([hidden])) #objective{top:142px}
}

.skill{position:relative}.skill-cooldown{position:absolute;right:6px;top:4px;padding:2px 5px;border-radius:3px;background:#142228;color:#ecd89b;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}

/* Hub selection remains available in the first T mode. */
#objective[hidden],#campaignSelection[hidden],body.immersive-all #campaignSelection,body.boss-cinematic #campaignSelection{display:none!important}
#campaignSelection{position:absolute;top:94px;right:28px;width:276px;max-height:calc(100vh - 190px);overflow:auto;padding:16px;background:#0b1c21db;border:1px solid #9caf9b26;border-radius:6px;z-index:2}
#campaignSelection>summary{cursor:pointer;color:#e3d29d;font-size:15px;line-height:1.6}
#campaignSelection button{width:100%;padding:10px;margin-top:5px;font-size:12px;letter-spacing:.04em}
#campaignSelection select{max-width:none}#campaignSelection #battlefieldEntry[hidden]{display:none}
body:has(#overlay:not([hidden]))>#campaignSelection{visibility:hidden}
@media(max-width:600px){#campaignSelection{top:69px;right:10px;width:calc(49% - 15px);padding:10px}#campaignSelection button,#campaignSelection select{font-size:10px;padding:8px 4px}}
@media(max-height:600px) and (min-width:601px){#campaignSelection{top:70px;max-height:calc(100vh - 155px);padding:10px}}