/* Compact HUD: portrait cards, target frame, buff row, action rail, belt, minis, gold and messages. Linked after ui-windows.css. */
/* Compact HUD: portrait cards and one low action rail. */
:root { --hud-height:calc(64px * var(--ui-zoom,1)); --hud-bottom:12px; }
.unit-card { position:fixed; top:16px; left:16px; width:330px; height:86px; transform:scale(var(--ui-zoom,1)); transform-origin:top left; pointer-events:auto; filter:drop-shadow(0 5px 8px #0009); font-variant-numeric:tabular-nums; }
.unit-plate { position:absolute; inset:8px 0 0 49px; padding:7px 21px 9px 36px; background:linear-gradient(115deg,#574129,#ac8448 45%,#59432c); clip-path:polygon(0 0,100% 0,96% 100%,0 100%); }
.unit-plate::before { content:''; position:absolute; inset:2px; background:linear-gradient(130deg,#30241c,#171312 70%); clip-path:polygon(0 0,100% 0,96% 100%,0 100%); z-index:-1; }
.unit-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#f2d297; font:700 14px/20px Cinzel,Georgia,serif; text-shadow:0 2px 2px #000; }
.unit-portrait { position:absolute; z-index:2; left:0; top:0; width:82px; height:82px; border:3px solid #b18c48; border-radius:50%; background:radial-gradient(circle,#776039,#211a13 66%); box-shadow:0 0 0 2px #211509,inset 0 0 0 2px #49321b; }
.unit-portrait > img,.unit-portrait > canvas { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; border-radius:50%; }
.unit-badge { position:absolute; right:-3px; top:-5px; display:grid; place-items:center; width:25px; height:25px; border:2px solid #bd934c; border-radius:50%; background:#191313; color:#f2d297; font:700 12px Georgia,serif; box-shadow:0 2px 4px #000; }
.unit-badge[hidden] { display:none; }
#pointsPip { position:absolute; z-index:4; left:83px; top:-11px; width:40px; height:40px; min-height:40px; margin:0; padding:0; border:0; background:none; color:#ffe098; font:700 24px Georgia,serif; text-shadow:0 0 8px #eaa52e; }
#pointsPip::before { content:''; position:absolute; inset:8px; z-index:-1; border:1px solid #ffd273; border-radius:50%; background:#49300f; box-shadow:0 0 8px #e8a63288; }
#pointsPip:hover::before { background:#76501a; }
.unit-bar { position:relative; isolation:isolate; height:19px; margin-top:3px; border:1px solid #6e5034; background:#080606; box-shadow:inset 0 1px 4px #000; overflow:hidden; }
.unit-fill,.unit-trail { position:absolute; left:0; top:0; bottom:0; width:100%; transition:width .22s ease-out; }
.life .unit-fill { background:linear-gradient(#b93834,#7e131b 48%,#a32125 85%,#dd675145); box-shadow:inset 0 1px #ffb5a73b; }
.mana .unit-fill { background:linear-gradient(#285c9f,#132e69 55%,#255397); box-shadow:inset 0 1px #b9ddff3b; }
.unit-trail { background:#eea582; transition:width .6s ease-out; }
.mana .unit-trail { background:#87b5d7; }
.unit-bar > span { position:absolute; inset:0; display:grid; place-items:center; z-index:2; color:#f8eede; font:600 12px/1 Georgia,serif; font-variant-numeric:lining-nums tabular-nums; text-shadow:0 1px 3px #000,0 0 2px #000; }
.unit-bar.poisoned .unit-fill { background:linear-gradient(#5e8e35,#284312 60%,#54812c); }
.unit-bar.chilled:not(.poisoned) .unit-fill { background:linear-gradient(#639da6,#315b70 60%,#4d879d); }
.unit-bar.low { animation:life-warning 1.8s ease-in-out infinite; }
@keyframes life-warning { 50% { box-shadow:inset 0 0 8px #ffbc7c77,0 0 7px #f6594455; border-color:#ed9872; } }
#topbar.unit-card { top:16px; left:50%; width:320px; height:86px; padding:0; border:0; background:none; text-align:left; transform:translateX(-50%) scale(var(--ui-zoom,1)); transform-origin:top center; }
#topbar .unit-portrait { width:72px; height:72px; top:5px; }
#targetPortrait { filter:brightness(.12) sepia(.6) drop-shadow(0 0 2px #eab669); }
#topbar .unit-plate { inset:8px 0 3px 43px; padding:7px 21px 8px 34px; }
#tbName { font-size:14px; }
#tbMods { flex:1; min-width:0; height:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:12px/17px Georgia,serif; color:#c7bba6; }
/* Debuffs heroes put on the target (src/ui/targetDebuffs.js): small icons, a shade drains as time runs out. */
#tbLine { display:flex; align-items:center; gap:4px; height:17px; }
#tbDebuffs { display:flex; flex-wrap:wrap; gap:2px; flex:none; max-width:72%; height:16px; overflow:hidden; } /* extra icons wrap out of sight whole, never cut */
#tbDebuffs[hidden] { display:none; }
.tb-debuff { position:relative; width:16px; height:16px; flex:none; overflow:hidden; border-radius:2px; box-shadow:0 0 0 1px #000c; background:#17130f; }
.tb-debuff img { display:block; width:100%; height:100%; }
.tb-debuff b { display:grid; place-items:center; height:100%; font:700 10px/1 Georgia,serif; color:#f0c890; }
.tb-debuff i { position:absolute; inset:0; background:#000a; transform:scaleY(0); transform-origin:top; animation:tb-debuff-drain linear forwards; }
.tb-debuff em { position:absolute; right:0; bottom:-1px; padding:0 1px; background:#120e0ae6; color:#f7ead0; font:700 9px/10px Georgia,serif; font-style:normal; }
#tbMods.debuff { color:#f0c890; }
@keyframes tb-debuff-drain { to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) { .tb-debuff i { animation:none; } }
#tbBar { height:18px; margin:3px 0 0; background:#100706; border:1px solid #6e5034; }
#tbFill { z-index:0; }
#tbTicks { position:absolute; inset:0; z-index:3; pointer-events:none; }
#topbar.npc .unit-plate { display:flex; align-items:center; }
#topbar.npc #tbMods,#topbar.npc #tbBar { display:none; }
#topbar.npc .unit-portrait { display:none; }
#topbar.npc .unit-plate { inset:8px 0 22px; padding:8px 20px; justify-content:center; }
#buffs { left:16px; top:calc(16px + 94px * var(--ui-zoom,1)); gap:5px; max-width:330px; transform:scale(var(--ui-zoom,1)); transform-origin:top left; pointer-events:auto; }
.hud-chip { position:relative; width:34px; height:36px; min-height:0; padding:2px; border:1px solid #81613b; border-radius:4px; display:grid; place-items:center; background:#17130feb; color:#e3ce93; box-shadow:0 2px 5px #0007; }
.hud-chip img { width:27px; height:27px; object-fit:contain; }
.hud-chip b { font-size:22px; font-weight:400; }
.hud-chip i { position:absolute; right:1px; bottom:-4px; padding:0 2px; background:#120e0a; color:#f3e6ce; font:11px Georgia,serif; }
#comboPips { position:absolute; top:88px; left:83px; right:auto; bottom:auto; width:auto; transform:none; display:flex; gap:5px; }
#comboPips i { width:8px; height:8px; }
#hud { position:fixed; inset:auto 0 0; height:calc(var(--hud-height) + var(--hud-bottom)); overflow:visible; pointer-events:none; }
#hudCluster { position:absolute; left:50%; bottom:var(--hud-bottom); width:min(66vw,1100px); height:var(--hud-height); aspect-ratio:auto; transform:translateX(-50%); padding:calc(11px * var(--ui-zoom,1)) 8px 6px; display:grid; grid-template-columns:9fr 1fr 4.2fr; gap:5px; background:none; border:1px solid transparent; border-radius:3px; box-shadow:none; } /* no panel: the slots stand on the world like the square menu buttons */
#hudCluster::before { display:none; }
#hudCluster > :not(.hud-fallback) { position:relative; inset:auto; z-index:1; pointer-events:auto; }
#hudCluster #xpbar { position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(6px * var(--ui-zoom,1)); min-height:6px; border:1px solid #5d4426; margin:0; border-radius:3px 3px 0 0; }
#xpfill { transition:width .35s ease-out; }
#hudCluster #abar,#hudCluster #belt { width:auto; height:100%; display:grid; column-gap:4px; }
#hudCluster #abar { grid-template-columns:repeat(9,minmax(0,1fr)); }
#hudCluster #belt { grid-template-columns:repeat(4,minmax(0,1fr)); padding-left:9px; }
#hudCluster .aslot,#hudCluster .bslot,#hudCluster #tpBtn { position:relative; width:100%; height:100%; border:1px solid #765938; border-radius:2px; background:linear-gradient(135deg,#241c16,#0e0b09); box-shadow:inset 0 0 8px #0009,0 3px 8px #0008; opacity:1; overflow:hidden; }
#hudCluster .aslot:hover,#hudCluster .bslot:hover,#hudCluster #tpBtn:hover,#hudCluster .aslot.rmb { border-color:#d5ad60; background-color:#33291c; filter:none; }
#hudCluster .aslot::after,#hudCluster .bslot::after,#hudCluster #tpBtn::after { display:none; }
#hudCluster img { padding:3px; object-fit:contain; border-radius:0; }
#hudCluster .akey,#hudCluster .bkey { z-index:3; left:3px; top:2px; font:700 12px/1 Georgia,serif; color:#f1dfba; text-shadow:0 1px 3px #000,0 0 3px #000; }
#hudCluster .amouse,#hudCluster .bcnt,#hudCluster #tpBtn .tp-count { z-index:3; right:3px; bottom:2px; font:12px/1 Georgia,serif; }
.cooldown-sweep { position:absolute; inset:0; pointer-events:none; background:conic-gradient(#090706bc var(--cooldown,0%),transparent 0); }
#minis { position:fixed; inset:auto 16px calc(var(--hud-height) + 24px) auto; width:auto; display:grid; grid-template-columns:repeat(6,40px); gap:4px; transform:scale(var(--ui-zoom,1)); transform-origin:bottom right; pointer-events:auto; }
#minis .mini { width:40px; height:40px; min-height:40px; aspect-ratio:1; margin:0; padding:4px; border:1px solid #725333; border-radius:3px; background:#1b1510ec; box-shadow:inset 0 1px #f5d08a15,0 3px 8px #0008; animation:none; filter:none; }
#minis .mini img { display:block; width:100%; height:100%; object-fit:contain; }
#minis .mini:hover { border-color:#e2bd78; filter:brightness(1.15); }
#minis .mini::after { display:none; }
#minis .mini[data-badge]::after { display:grid; place-items:center; top:-7px; right:-5px; min-width:18px; width:auto; height:18px; font:700 11px/1 Georgia,serif; border-width:1px; }
#minis .mini span { display:none; }
#hudGold { position:fixed; inset:auto 18px 17px auto; transform:none; width:auto; min-width:0; padding:0; background:none; color:#d4b673; font:14px Georgia,serif; }

#msgs { bottom:calc(var(--hud-height) + 28px); max-width:min(640px,60vw); width:max-content; padding:4px 12px; border-radius:4px; background:#100c0877; }
#msgs:empty { display:none; }
#picker { bottom:calc(var(--hud-height) + 26px); max-width:min(480px,calc(100vw - 24px)); }
#ui #voiceSubtitle { bottom:calc(var(--hud-height) + 30px); max-width:min(300px,25vw); }
.combat-level { top:auto; bottom:calc(var(--hud-height) + 95px); }
#areaTitle { top:23%; }
/* Compact vitals card: a round portrait with the level on a pill below it, then name, life, mana and experience in one
   tidy panel. Unspent points light the portrait (tap it to spend them) instead of a separate plus button. */
#playerCard { width:268px; height:78px; }
#playerCard .unit-portrait { width:68px; height:68px; top:2px; border-width:2px; }
#playerCard .unit-badge { right:auto; top:auto; left:50%; bottom:-8px; transform:translateX(-50%); width:auto; min-width:26px; height:17px; padding:0 7px; border-width:1px; border-radius:9px; font:700 11px/15px Georgia,serif; }
#playerCard .unit-plate { inset:6px 0 auto 38px; padding:5px 10px 7px 38px; clip-path:none; border:1px solid #6e5034; border-radius:10px; background:linear-gradient(180deg,#2b211aee,#130f0ce6); box-shadow:inset 0 1px 0 #ffe2a41f,0 4px 10px #0009; }
#playerCard .unit-plate::before { display:none; }
#playerCard .unit-name { font-size:13px; line-height:16px; }
#playerCard .unit-bar { height:14px; margin-top:3px; border-radius:3px; }
#playerCard .unit-bar > span { font-size:10.5px; }
#playerCard .unit-bar.mana { height:13px; margin-top:3px; }
#playerCard .unit-bar.mana > span { font-size:10px; }
#playerCard .unit-xp { height:4px; margin-top:4px; border-radius:2px; background:#0b0806; box-shadow:0 0 0 1px #5d4426; overflow:hidden; }
#playerCard .unit-xp > i { display:block; width:0; height:100%; background:linear-gradient(90deg,#b88a2c,#f2cf6c); box-shadow:0 0 6px #e3ab4580; transition:width .35s ease-out; }
#pointsPip { left:2px; top:2px; width:68px; height:68px; min-height:0; border-radius:50%; font-size:0; color:transparent; text-shadow:none; cursor:pointer; }
#pointsPip::before { display:none; }
#playerCard:has(#pointsPip:not(.hidden)) .unit-portrait { border-color:#ffd273; animation:points-glow 2.2s ease-in-out infinite; }
#playerCard:has(#pointsPip:not(.hidden)) .unit-badge { border-color:#ffd273; color:#ffe7a8; }
@keyframes points-glow { 0%,100% { box-shadow:0 0 0 2px #211509,0 0 8px #f0b54a99,inset 0 0 0 2px #49321b; } 50% { box-shadow:0 0 0 2px #211509,0 0 18px #ffcf6b,inset 0 0 0 2px #49321b; } }
@media (prefers-reduced-motion:reduce) { #playerCard:has(#pointsPip:not(.hidden)) .unit-portrait { animation:none; box-shadow:0 0 0 2px #211509,0 0 14px #ffcf6b,inset 0 0 0 2px #49321b; } }
/* Phones (heat, art/production/reports/heat.md): the same glow and period, but its brighter half is a layer of its own that
   the compositor fades in and out, instead of a shadow the page repaints every frame. */
body.mobile #playerCard:has(#pointsPip:not(.hidden)) .unit-portrait { animation:none; box-shadow:0 0 0 2px #211509,0 0 8px #f0b54a99,inset 0 0 0 2px #49321b; }
body.mobile #playerCard:has(#pointsPip:not(.hidden)) .unit-portrait::after { content:''; position:absolute; inset:-2px; border-radius:50%; pointer-events:none; box-shadow:0 0 18px #ffcf6b; opacity:0; animation:points-glow-fade 2.2s ease-in-out infinite; }
@keyframes points-glow-fade { 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { body.mobile #playerCard:has(#pointsPip:not(.hidden)) .unit-portrait { box-shadow:0 0 0 2px #211509,0 0 14px #ffcf6b,inset 0 0 0 2px #49321b; } body.mobile #playerCard:has(#pointsPip:not(.hidden)) .unit-portrait::after { display:none; } }
.quest-reduced-motion body.mobile #playerCard .unit-portrait::after, body.mobile.quest-reduced-motion #playerCard .unit-portrait::after { display:none; }
/* Experience now lives in the vitals card. */
#hudCluster #xpbar { display:none; }