/* Illustrated faces and the same worn metal frames as the lobby/shop. */
#combat-stack-layer{position:absolute;inset:0;z-index:95;pointer-events:auto;isolation:isolate}
#combat-stack-layer>.combat-stack-overlay{width:100%;height:100%;overflow:hidden;touch-action:pan-y}
#combat-stack-layer .combat-stack-panel{max-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding-block:15px}
.hud-top:has(.combat-status){display:grid;grid-template-columns:minmax(0,360px) minmax(74px,1fr) 90px;gap:12px;align-items:start}
.hud-top:has(.combat-status) .hud-right{flex-direction:column-reverse;align-items:flex-end;gap:4px}
.hud-top:has(.combat-status) .kill-count{white-space:nowrap;font-size:12px}
.hud .combat-status{width:100%;max-width:none;min-width:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;color:#eee1c1}
.combat-vital-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:9px;align-items:start}
.combat-face-frame{width:76px;height:96px;overflow:hidden;border:3px solid #777154;border-image:var(--ui-frame) 16 / 12px / 2px stretch;background:var(--ui-recess-surface);padding:3px;box-shadow:0 3px 10px #0005}
.combat-face-frame canvas{width:100%;height:100%;display:block;object-fit:cover;image-rendering:auto;border:1px solid #71694e;box-shadow:0 0 0 1px #10140d}
.combat-vitals{min-width:0}.combat-name{font-size:12px;line-height:15px;color:#e8dbb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 3px;text-shadow:0 1px 3px #000,0 1px 6px #000}
.hud .combat-health{height:25px;border:2px solid #817553;border-image:var(--ui-frame) 16 / 9px / 1px stretch;background:var(--ui-recess-surface);position:relative;overflow:hidden;padding:4px 6px;box-shadow:0 2px 5px #0004}
.hud .combat-health #health,.hud .combat-health #health-lag{position:absolute;left:0;top:0;height:100%;transform-origin:left center}
.hud .combat-health #health{background:var(--ui-grain) 0 0 / 180px 180px repeat,linear-gradient(#b6654f,#a1493d 22%,#87382e 75%,#a1513b);box-shadow:inset 0 1px #ecb07a66,inset 0 -2px #3f201a77}
.hud .combat-health #health-lag{background:#bfa16a}
.combat-health #hp-label{position:absolute;inset:0;z-index:1;text-align:center;color:#fff0d0;text-shadow:1px 1px #1c100d,-1px -1px #1c100d;font-size:11px;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud .combat-xp{height:5px;margin-top:4px;border:1px solid #686746;background:#11180e;box-shadow:0 1px 3px #0008}.hud .combat-xp #xp{background:linear-gradient(#bdd297,#809b58)}
.combat-status-notices{display:flex;gap:5px;flex-wrap:wrap;min-height:0;margin-left:85px}.combat-status-notices:has(>[hidden]):not(:has(>:not([hidden]))){display:none}
.combat-status-notices .health-warning,.combat-status-notices .ultimate-shield{font-size:10px;line-height:13px;margin:3px 0 0;max-width:100%;overflow-wrap:anywhere;text-shadow:0 1px 3px #000}
.combat-status.is-critical .combat-health{box-shadow:0 0 0 1px #ed9b71,0 0 10px #a543344d}.combat-status.is-critical .combat-name{color:#ffd8b2}
.combat-stack-ribbon{position:relative;margin-top:5px;min-width:0}
.hud .combat-stacks.equipment{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;scroll-padding-inline:2px;min-height:46px;pointer-events:auto;padding:0 1px 2px;mask-image:none}
.combat-stacks::-webkit-scrollbar{display:none}
.hud .combat-stack{position:relative;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:5px;border:2px solid #7f7950;border-image:var(--ui-frame) 16 / 8px / 0 stretch;border-radius:0;background:var(--ui-slot-surface);color:#eedfaf;box-shadow:inset 0 0 0 1px #0a1008;display:grid;place-items:center;touch-action:pan-x;cursor:pointer}
.combat-stack>.game-icon{width:29px;height:29px}.combat-stack-glyph{font-family:Georgia,serif;font-size:26px;line-height:1;color:#dfc68b}
.combat-stack>small{position:absolute;right:1px;bottom:0;min-width:13px;padding:0 2px;background:#0a100ced;color:#fff1bd;font-size:11px;line-height:14px;text-align:center;font-variant-numeric:tabular-nums}
.combat-stack.is-evolved{box-shadow:inset 0 0 0 1px #cbad6980}.combat-stack.is-risk{background:var(--ui-grain) 0 0 / 224px 224px repeat,linear-gradient(120deg,#382a20,#201910 58%,#322419)}
.combat-stack-evolved,.combat-stack-risk{position:absolute;top:0;left:2px;font:10px/12px system-ui;color:#f3d18d;text-shadow:1px 1px #201509;font-style:normal}.combat-stack-risk{color:#ffc093;font-weight:800}
.combat-stack:focus-visible{outline:2px solid #f3d798;outline-offset:-3px}.combat-stack:active{filter:brightness(1.25)}
.combat-stack-scroll-hint{display:none;position:absolute;right:0;top:1px;bottom:3px;padding:7px 1px 0 9px;background:linear-gradient(90deg,transparent,#11160eef);font-size:22px;line-height:26px;pointer-events:none;color:#ebd398}.can-scroll>.combat-stack-scroll-hint{display:block}
.combat-stack-empty{font-size:10px;color:#c8c3a7;white-space:nowrap;text-shadow:0 1px 3px #000}
.combat-stack-overlay{background:var(--ui-grain) 0 0 / 256px 256px repeat,#090b08e8;z-index:85;pointer-events:auto}
.combat-stack-overlay>.combat-stack-panel{max-width:430px;text-align:left;padding:19px;border:3px solid #756f52;border-image:var(--ui-frame) 16 / 16px / 2px stretch;background:var(--ui-panel-surface);color:#e5d9b9;box-shadow:0 22px 72px #000a,inset 0 0 54px #c5b98b12,inset 0 0 5px #b1a6782b}
.combat-detail-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #8a79544a;padding-bottom:10px;margin-bottom:16px;color:#b8b393;font-size:12px;background:var(--ui-panel-surface)}
.combat-detail-top .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px;border:2px solid #817553;border-image:var(--ui-frame) 16 / 8px / 0 stretch;background:var(--ui-recess-surface);color:#efdcb0;font-size:25px}
.combat-detail-top .icon-btn:focus-visible{outline:2px solid #f3d798;outline-offset:2px}
.combat-detail-heading{display:flex;gap:13px;align-items:center}.combat-detail-heading>.game-icon,.combat-detail-heading>.combat-stack-glyph{width:56px;height:56px;flex:none;border:2px solid #7f7950;border-image:var(--ui-frame) 16 / 9px / 0 stretch;background:var(--ui-slot-surface);padding:5px}.combat-detail-heading>.combat-stack-glyph{display:grid;place-items:center;font-size:38px}
.combat-detail-heading small{color:#c3b582;font-size:11px}.combat-stack-panel .combat-detail-heading h2{font-size:22px;line-height:1.35;letter-spacing:0;margin:3px 0 4px;overflow-wrap:anywhere}.combat-detail-heading p{font-size:12px;color:#bdc1a3;margin:0}
.combat-detail-description,.combat-detail-effect p,.combat-detail-tradeoff p,.combat-detail-context{font-size:13px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.combat-detail-description{color:#c3c4a8;margin:17px 0}.combat-detail-effect,.combat-detail-tradeoff{padding:12px 0;border-top:1px solid #8273474d}.combat-detail-effect b,.combat-detail-tradeoff b{font-size:12px;color:#e8d297;font-weight:600}.combat-detail-effect p,.combat-detail-tradeoff p{margin:5px 0 0}.combat-detail-tradeoff b,.combat-detail-tradeoff p{color:#e3b191}
.combat-detail-context,.combat-detail-condition{color:#bdc2a3;font-size:12px;line-height:1.65}.combat-detail-footer{border-top:1px solid #8273474d;padding-top:12px;margin:15px 0 0;font-size:11px;color:#aaa98f;line-height:1.65}
.combat-weapon-milestones{border-top:1px solid #8273474d;padding-top:10px}.combat-weapon-milestones>div+div{margin-top:10px}.combat-weapon-milestones b{font-size:12px;font-weight:600;color:#d6c28e}.combat-weapon-milestones p{font-size:12px;line-height:1.7;color:#bdc2a3;margin:4px 0 0;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:600px){.hud-top:has(.combat-status){grid-template-columns:minmax(0,1fr) 68px 48px;gap:6px}.combat-vital-row{grid-template-columns:52px minmax(0,1fr);gap:6px}.combat-face-frame{width:52px;height:70px;padding:2px;border-image-width:9px}.combat-name{font-size:10px;line-height:13px;margin-bottom:3px}.hud .combat-health{height:23px;border-image-width:8px}.combat-health #hp-label{font-size:10px;line-height:19px}.combat-status-notices{margin-left:58px}.hud-top:has(.combat-status) .time-value{font-size:24px;line-height:1.25}.hud-top:has(.combat-status) .wave-label{font-size:10px;line-height:1.3;max-width:68px;word-break:keep-all}.hud-top:has(.combat-status) .timer{min-width:0}.hud-top:has(.combat-status) .hud-right{gap:4px}.hud-top:has(.combat-status) .kill-count{font-size:10px}.combat-stack-overlay>.combat-stack-panel{padding:15px}}
@media(min-width:601px){.hud:has(.combat-status)>.quest-strip{top:calc(max(12px,var(--safe-top)) + 132px)}.hud:has(.combat-status)>.objective-guide{top:calc(max(12px,var(--safe-top)) + 171px)}}
@media(max-height:540px) and (min-width:601px){.hud-top:has(.combat-status){grid-template-columns:minmax(240px,330px) minmax(74px,1fr) 90px}.hud:has(.combat-status)>.quest-strip{top:calc(max(10px,var(--safe-top)) + 132px)}.hud:has(.combat-status)>.objective-guide{top:calc(max(10px,var(--safe-top)) + 168px)}.combat-stack-overlay>.combat-stack-panel{max-height:100%;padding:14px}.combat-detail-top{margin-bottom:10px;padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){.combat-health i{transition:none!important}}

/* Keep the translated name and keyboard hint inside the existing desktop button. */
.hud>.combat-actions .ultimate-btn{width:96px;height:104px;min-height:104px;padding:6px 4px;gap:2px}
.hud>.combat-actions .ultimate-btn b{max-width:100%;font-size:12px;line-height:1.2;overflow-wrap:anywhere;white-space:normal;text-align:center}
.hud>.combat-actions .ultimate-btn small{max-width:100%;font-size:11px;line-height:1.2;overflow-wrap:anywhere;text-align:center}
.hud>.combat-actions .ultimate-btn kbd{position:absolute;top:5px;right:5px;margin:0}
/* Keep touch actions in the right thumb arc; the empty area remains draggable. */
@media(pointer:coarse),(max-width:600px),(max-height:500px) and (min-width:601px){
 .hud>.combat-actions{right:max(18px,calc(var(--safe-right) + 12px));bottom:max(24px,calc(var(--safe-bottom) + 12px));display:flex;gap:10px;align-items:flex-end;pointer-events:none}
 .hud>.combat-actions .dash-btn{width:64px;height:64px;min-height:64px;margin-bottom:26px;pointer-events:auto;touch-action:none}
 .hud>.combat-actions .ultimate-btn{width:88px;height:96px;min-height:96px;padding:6px 4px;border-radius:20px;gap:2px;pointer-events:auto;touch-action:none}
 .hud>.combat-actions .ultimate-btn .game-icon{--icon-size:32px}
 .hud>.combat-actions .ultimate-btn b{max-width:100%;font-size:12px;line-height:1.2;overflow-wrap:anywhere;white-space:normal;text-align:center}
 .hud>.combat-actions .ultimate-btn small{max-width:100%;font-size:11px;line-height:1.2;overflow-wrap:anywhere;text-align:center}
 .hud>.combat-actions .ultimate-btn kbd{display:none}
}

/* Approved opening/HUD design: light portrait edge, thin vitals and compact acquired art. */
.hud-top:has(.combat-status){display:flex;gap:30px;align-items:flex-start;justify-content:space-between}
.hud .combat-status{flex:1 1 0%;width:auto;max-width:560px}
.combat-vital-row{grid-template-columns:76px minmax(0,1fr);gap:12px}
.combat-face-frame{width:76px;height:91px;padding:1px;border:0;border-image:none;border-radius:10px;background:#a99d704f;box-shadow:0 1px 4px #0003}
.combat-face-frame canvas{border:0;border-radius:9px;box-shadow:none}
.combat-caption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px;min-width:0}
.combat-name{margin:0;font-size:16px;line-height:20px;min-width:0;color:#eee7d4;font-weight:500}
.combat-hp-readout{flex:none;font:12px/1.2 Georgia,serif;color:#e7dbc1;white-space:nowrap;text-shadow:0 2px 3px #000}
.combat-hp-readout #hp-label{position:static;line-height:inherit;font:inherit;color:inherit}
.hud .combat-health{height:12px;padding:0;border:1px solid #8e7858;border-image:none;background:#170d0ded;box-shadow:0 1px 0 #070908;overflow:visible}
.hud .combat-health:before,.hud .combat-health:after{content:'';position:absolute;top:-3px;width:4px;height:16px;background:linear-gradient(#d7c795,#64583f 50%,#b49d6e);z-index:2;transform:skew(-20deg);pointer-events:none}
.hud .combat-health:before{left:-2px}.hud .combat-health:after{right:-2px}
.hud .combat-health #health,.hud .combat-health #health-lag{left:0;top:0;height:100%;max-width:100%}
.hud .combat-health #health{background:linear-gradient(#ed9c83,#c65141 23%,#94322d 72%,#511e1c);box-shadow:inset 0 1px #f6bf9570,0 0 5px #d56b4150}
.combat-experience-row{display:flex;align-items:center;gap:9px;margin-top:6px}
.hud .combat-xp{flex:1;min-width:0;height:5px;margin:0;border:1px solid #72796770;background:#07130fd9;box-shadow:0 1px 0 #030907}
.hud .combat-xp #xp{background:linear-gradient(90deg,#527966,#a4bba0)}
.combat-experience-row>span{font-size:10px;line-height:1;color:#b2b6a0;white-space:nowrap}
.combat-stack-ribbon{margin-top:2px}
.hud .combat-stacks.equipment{gap:0;padding:0;min-height:44px;align-items:flex-start}
.hud .combat-stack{display:flex;align-items:flex-start;justify-content:flex-start;flex:0 0 32px;width:32px;min-width:32px;height:44px;min-height:44px;padding:3px 0 0;border:0;border-image:none;background:none;box-shadow:none}
.combat-stack>.game-icon{--icon-size:22px;width:22px;height:22px}.combat-stack-glyph{font-size:22px}
.combat-stack>small{top:21px;left:20px;bottom:auto;right:auto;min-width:0;padding:0;background:none;font:10px/1 Georgia,serif;color:#f5e2b1;text-shadow:0 1px 2px #000,1px 1px 3px #000}
.combat-stack-evolved,.combat-stack-risk{display:none}
.combat-stack-scroll-hint{background:none;font-size:16px;top:0;bottom:auto;padding:0;line-height:24px;text-shadow:0 1px 3px #000}
.combat-run-status{display:grid;grid-template-columns:auto 44px;gap:4px 16px;flex:none;margin-left:auto;max-width:40%;text-align:right;text-shadow:0 2px 5px #000}
.hud-top:has(.combat-status) .combat-run-status .timer,.hud-top:has(.combat-status) .combat-run-status .hud-right{display:contents}
.combat-run-status #timer{grid-column:1;grid-row:1;font:27px/44px Georgia,serif;letter-spacing:.02em;white-space:nowrap}
.combat-run-status #pause{grid-column:2;grid-row:1;width:44px;min-width:44px;height:44px;min-height:44px;border:1px solid #9b8d6259;border-image:none;background:#151a15b8;color:#ddc28e;box-shadow:none}
.combat-run-status #wave{grid-column:1 / 3;grid-row:2;max-width:180px;margin:0;font-size:11px;line-height:1.35;text-align:right;overflow-wrap:anywhere}
.combat-run-status #kills{grid-column:1 / 3;grid-row:3;font-size:10px;color:#b6b19f;line-height:1.3}
.hud>.combat-actions .ultimate-btn{border:1px solid #9c916e;border-image:none;border-radius:20px;background:#131a15cc;box-shadow:inset 0 0 0 3px #2c3129,0 4px 8px #0005}
.hud>.combat-actions .dash-btn{border:1px solid #9c916e;border-image:none;border-radius:50%;box-shadow:inset 0 0 0 3px #2c3129,0 4px 8px #0005}
/* A charged vow stays legible over the dark control skin; light stays local to the button. */
.hud>.combat-actions .ultimate-btn.ready{border-color:#f4d68d;background:radial-gradient(ellipse at 50% 24%,color-mix(in srgb,var(--ult-color) 27%,#293023),#19231bec 72%);color:#fff0c9;box-shadow:inset 0 0 0 2px #b293554d,inset 0 0 18px #d8ae4824,0 0 12px #e9be5338,0 4px 8px #0007}
.hud>.combat-actions .ultimate-btn.ready b,.hud>.combat-actions .ultimate-btn.ready small{color:#fff0c9;text-shadow:0 1px 3px #000}
.hud>.combat-actions .ultimate-btn.ready .ult-icon{color:#ffe8b0;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ult-color) 70%,#ffe7ad))}
.hud>.combat-actions .ultimate-btn.ready:before,.hud>.combat-actions .ultimate-btn.ready:after{content:"";position:absolute;inset:-3px;border:1px solid #f7d68ca6;border-radius:inherit;pointer-events:none}
.hud>.combat-actions .ultimate-btn.ready:before{box-shadow:0 0 9px #ebc25a66,inset 0 0 5px #e2b54a33;animation:ultimate-ready-breathe 2.8s ease-in-out infinite}
.hud>.combat-actions .ultimate-btn.ready:after{opacity:0;animation:ultimate-ready-arrive .85s ease-out 1}
.hud>.combat-actions .ultimate-btn.active{border-color:#fff3ce;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--ult-color) 35%,#283025),#172119ed 80%);color:#fff3d2;box-shadow:inset 0 0 0 2px #d8c89788,inset 0 0 20px #edce7736,0 0 10px #e7cd8a4d}
.hud>.combat-actions .ultimate-btn.active b,.hud>.combat-actions .ultimate-btn.active small{color:#fff3d2}
@keyframes ultimate-ready-breathe{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes ultimate-ready-arrive{0%{opacity:.85;transform:scale(.98)}100%{opacity:0;transform:scale(1.1)}}
.reduced-effects .hud>.combat-actions .ultimate-btn.ready:before{animation:none;opacity:.7}
.reduced-effects .hud>.combat-actions .ultimate-btn.ready:after{animation:none;display:none}
@media(prefers-reduced-motion:reduce){.hud>.combat-actions .ultimate-btn.ready:before{animation:none;opacity:.7}.hud>.combat-actions .ultimate-btn.ready:after{animation:none;display:none}}
@media(max-width:600px){
 .hud-top:has(.combat-status){display:flex;gap:12px}
 .hud .combat-status{max-width:none}.combat-vital-row{grid-template-columns:61px minmax(0,1fr);gap:9px}
 .combat-face-frame{width:61px;height:81px;padding:1px}.combat-caption{gap:5px}.combat-name{font-size:13px;line-height:17px}
 .combat-hp-readout{font-size:11px}.hud .combat-health{height:11px}.hud .combat-health:before,.hud .combat-health:after{height:15px}
 .combat-experience-row{gap:6px}.combat-experience-row>span{font-size:9px}
 .combat-run-status{grid-template-columns:auto 36px;gap:4px 7px;width:90px;max-width:90px}
 .combat-run-status #timer{font-size:18px;line-height:36px}.combat-run-status #pause{width:36px;min-width:36px}
 .combat-run-status #wave,.combat-run-status #kills{font-size:10px;max-width:100%}
 .combat-status-notices{margin-left:70px}
}
@media(max-width:360px){.combat-vital-row{grid-template-columns:52px minmax(0,1fr);gap:7px}.combat-face-frame{width:52px;height:68px}.combat-name{font-size:11px}.combat-hp-readout{font-size:10px}.combat-status-notices{margin-left:59px}}
@media(max-height:520px) and (min-width:601px){.hud .combat-status{max-width:500px}.combat-vital-row{grid-template-columns:58px minmax(0,1fr);gap:8px}.combat-face-frame{width:58px;height:77px}.combat-name{font-size:13px;line-height:17px}.combat-run-status #timer{font-size:24px}.combat-status-notices{margin-left:66px}}
@media(max-width:600px){
 .hud:has(.combat-status)>.objective-guide{justify-self:start;max-width:calc(100% - 110px);margin-left:0;margin-right:0}
 html[dir=rtl] .hud:has(.combat-status)>.objective-guide{justify-self:end}
}