/* Emberfall status frame (3fb9c13b): compact player frame + 3D portrait + buff/debuff row. Active when statusframe.js adds body.sfx */
@property --sfp{syntax:'<number>';inherits:false;initial-value:0}
body.sfx #hud{width:220px!important;height:auto!important;box-sizing:border-box;grid-template-columns:66px 1fr!important;column-gap:8px!important;row-gap:3px!important;align-content:start;
 padding:7px 9px 7px 7px!important;border:1px solid #a8843e!important;border-image:none!important;border-radius:8px!important;
 background:radial-gradient(120% 90% at 0% 0%,rgba(78,54,30,.55),transparent 60%),linear-gradient(#2b1e12f5,#150e08f7)!important;
 box-shadow:0 0 0 1px #0b0704,inset 0 0 0 1px rgba(240,200,120,.16),inset 0 0 0 3px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.6)!important}
body.sfx.aefixed #hud>.aet{display:none!important}
body.sfx #hud>*:not(.aet):not(#portrait):not(#sfpor):not(#sfbuffs){grid-column:2!important;margin:0!important;min-width:0}
/* portrait: the old 2D canvas stays underneath as the fallback; the 3D snapshot sits on top in the same cell */
body.sfx #hud #portrait,body.sfx #hud #sfpor{grid-column:1!important;grid-row:1/6!important;align-self:center;justify-self:center;width:62px!important;height:62px!important;margin:0!important}
body.sfx #hud #portrait{border-radius:50%!important;border:0!important;box-shadow:none!important}
body.sf3d #hud #portrait{visibility:hidden}
#sfpor{position:relative;z-index:1;border-radius:50%;pointer-events:none}
#sfpor canvas{display:none;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#6a5038,#2a1c12 62%,#120c08)}
body.sf3d #sfpor canvas{display:block}
#sfpor::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
 box-shadow:0 0 0 2px #d2ad58,0 0 0 3px #4a3412,inset 0 0 0 1px #000,inset 0 0 10px rgba(0,0,0,.75);background:radial-gradient(circle at 30% 18%,rgba(255,240,200,.14),transparent 40%)}
#sflv{position:absolute;z-index:2;left:-5px;bottom:-4px;min-width:19px;height:19px;padding:0 3px;box-sizing:border-box;border-radius:10px;
 font:700 11px/17px Georgia,serif;color:#2a1a06;text-align:center;background:radial-gradient(circle at 40% 30%,#ffe9a8,#d4a43c 60%,#8a6418);border:1px solid #3a2608;box-shadow:0 1px 3px rgba(0,0,0,.7)}
#sflv:empty{display:none}
/* name / level line */
body.sfx #hud #who{display:flex;align-items:baseline;gap:5px;white-space:nowrap;overflow:hidden;font:700 12px/15px Georgia,"Times New Roman",serif!important;color:#f1d58e!important;text-shadow:0 1px 1px #000;letter-spacing:.02em}
body.sfx #hud #who #pname{overflow:hidden;text-overflow:ellipsis;min-width:0}
body.sfx #hud #who #clv{margin-left:auto;font:400 10px/15px Verdana,sans-serif!important;color:#cdbf9e!important;flex:none}
/* bars: inset track, glossy fill, gold-brown rim */
body.sfx #hud .bar{position:relative;height:14px!important;border-radius:3px!important;border:1px solid #060403!important;background:linear-gradient(#0c0806,#21170f)!important;
 box-shadow:0 0 0 1px rgba(200,160,90,.28),inset 0 1px 2px rgba(0,0,0,.8)!important;overflow:hidden}
body.sfx #hud .bar.mp{height:12px!important}
body.sfx #hud .bar.st{height:10px!important}
body.sfx #hud .bar i{border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.35)}
body.sfx #hud .bar.hp i{background:linear-gradient(#f06a4c,#b52a1c 55%,#6e150d)!important}
body.sfx #hud .bar.mp i{background:linear-gradient(#6c9cf0,#2c56b8 55%,#162f70)!important}
body.sfx #hud .bar.st i{background:linear-gradient(#f0cf5c,#b88e26 55%,#6c5212)!important}
body.sfx #hud .bar span{font:700 10px/13px Verdana,sans-serif!important;color:#fff!important;text-shadow:0 0 2px #000,0 1px 1px #000!important;letter-spacing:.02em}
body.sfx #hud .bar.mp span{font-size:9px!important;line-height:11px!important}
body.sfx #hud .bar.st span{font-size:8.5px!important;line-height:9px!important}
body.sfx #hud #gold{font:10px/13px Verdana,sans-serif!important;color:#e9cf78!important;text-shadow:0 1px 1px #000}
/* buff / debuff row */
#sfbuffs{grid-column:1/-1!important;display:flex;flex-wrap:wrap;gap:4px 4px;padding:4px 0 11px 1px;margin-top:2px!important;border-top:1px solid rgba(200,160,90,.2)}
#sfbuffs[hidden]{display:none!important}
.sfb{position:relative;width:24px;height:24px;box-sizing:border-box;border-radius:4px;pointer-events:auto;cursor:default;background:radial-gradient(circle at 40% 30%,#3e3122,#120c07);
 border:2px solid #d2b04a;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(110,190,70,.75),0 1px 3px rgba(0,0,0,.6)}
.sfb.debuff{border-color:#d43a26;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(90,10,6,.9),0 0 5px rgba(220,40,20,.35)}
.sfb+.sfb.debuff:not(.debuff+.debuff){margin-left:5px}
.sfb svg,.sfb img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.sfb .sw{position:absolute;inset:0;border-radius:2px;background:conic-gradient(rgba(0,0,0,.62) calc(var(--sfp)*360deg),transparent 0);animation:sfsweep linear forwards;pointer-events:none}
@keyframes sfsweep{from{--sfp:0}to{--sfp:1}}
.sfb .st{position:absolute;right:-1px;bottom:-2px;font:700 10px/10px Verdana,sans-serif;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.sfb .tm{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;font:700 8.5px/9px Verdana,sans-serif;color:#efe4c8;white-space:nowrap;text-shadow:0 0 2px #000,0 1px 1px #000}
.sfb.debuff .tm{color:#ffb8a8}
/* tooltip (lives on body so the HUD zoom does not apply; scale with the UI factor instead) */
#sftip{position:fixed;z-index:10050;max-width:calc(230px*var(--hk,1));padding:calc(6px*var(--hk,1)) calc(9px*var(--hk,1));pointer-events:none;
 font:calc(12px*var(--hk,1))/1.35 Verdana,sans-serif;color:#eee3c8;background:linear-gradient(#24190fF7,#140d08F7);border:1px solid #a8843e;border-radius:5px;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.7)}
#sftip[hidden]{display:none}
#sftip .n{display:block;font:700 calc(13px*var(--hk,1))/1.3 Georgia,serif;color:#f3dc8a}
#sftip .sx{color:#fff;font-family:Verdana,sans-serif;font-size:.85em}
#sftip .k{display:inline-block;margin:1px 0 3px;font-size:.78em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#sftip .k.buff{color:#9ee070}#sftip .k.debuff{color:#ff7a62}
#sftip .d{color:#efe8d6}
#sftip .t{margin-top:3px;font-size:.85em;color:#bfae88}