/* Forest Chronicle HUD. Generated ornament PNGs are decorative and never receive input. */
:root{
  --hud-leaf:url('/assets/ui/forest-chronicle/corner-v1.png');
  --hud-divider:url('/assets/ui/forest-chronicle/divider-v1.png');
  --hud-metal:#a48b59;
}
#hotbar,#char-hud,#hud-target,#menu-bar,#party-panel,#pvp-board,#portal-info{
  background-color:#15241e;border-color:var(--hud-metal);
  box-shadow:inset 0 0 0 2px #101a14,inset 0 0 0 3px #8d794344,0 4px 14px #0008;
  border-radius:5px;
}
#char-hud{position:relative;padding:15px 16px 16px;outline:none}
/* Opposing carved corners frame panels without painting over their content. */
:is(#hotbar,#char-hud,#hud-target,#menu-bar,#party-panel,#pvp-board,#portal-info)::before,
:is(#hotbar,#char-hud,#hud-target,#menu-bar,#party-panel,#pvp-board,#portal-info)::after{
  content:"";display:block;position:absolute;width:46px;height:46px;z-index:2;
  background:var(--hud-leaf) center/contain no-repeat;border:0;pointer-events:none;
}
:is(#hotbar,#char-hud,#hud-target,#menu-bar,#party-panel,#pvp-board,#portal-info)::before{top:-4px;left:-4px;transform:none}
:is(#hotbar,#char-hud,#hud-target,#menu-bar,#party-panel,#pvp-board,#portal-info)::after{bottom:-4px;right:-4px;left:auto;transform:scale(-1)}
#hotbar{box-sizing:border-box;width:780px;max-width:calc(100vw - 180px);padding:16px 20px 18px;background-image:linear-gradient(180deg,#283c2e,#132019);background-size:auto;background-repeat:no-repeat}
#hotbar:has(.hot-ability){width:900px}
#hotbar::before,#hotbar::after{width:65px;height:65px}
#hotbar .hb-modes{position:relative;padding-bottom:12px;margin-bottom:2px;border-bottom:0}
#hotbar .hb-modes::after{content:"";position:absolute;left:12%;right:12%;bottom:-4px;height:18px;background:var(--hud-divider) center/100% auto no-repeat;pointer-events:none}
#hotbar .hot-slot{border-color:#9c8657;background-image:radial-gradient(ellipse at 50% 15%,#344737,#101c16 75%);outline:1px solid #0a120c;box-shadow:inset 0 0 0 1px #ccb57826,0 2px 2px #0009}
#hotbar .hot-slot .key{border-color:#b39b64;background:#17241b;color:#f2dcab}
#hotbar .hb-mode{background-image:linear-gradient(#3c4d35,#223123);border-color:#947e52}
#hotbar .hotbar-key-edit{border-color:#9b8658;background:linear-gradient(#34472e,#17281c);box-shadow:inset 0 0 0 2px #0d1c13}
#hud-name{position:relative;padding:0 4px 9px;margin-bottom:1px}
#hud-name::after{content:"";position:absolute;height:12px;bottom:-3px;left:0;right:0;background:var(--hud-divider) center/100% auto no-repeat;pointer-events:none}
#hud-name .char-lvl{background:#203123;border-color:#ad9360;color:#f0dfb3;box-shadow:inset 0 0 0 1px #0b160f}
#char-hud .bar,#hud-target .bar{border-color:#b29c68;box-shadow:0 0 0 1px #0a120d,inset 0 2px 5px #000b;border-radius:3px}
#char-hud .bar.hp .fill,#hud-target .bar.hp .fill{background:linear-gradient(#d48169,#a5453c 48%,#703630);box-shadow:inset 0 1px #f6c69188,inset 0 -2px #481f2455}
#char-hud .bar.mp .fill{background:linear-gradient(#80b7c8,#417d9c 48%,#2b516e)}
#char-hud .bar.xp .fill{background:linear-gradient(#efd68e,#ba994b 48%,#7d632f)}
#hud-target{box-sizing:border-box;padding:15px 17px 17px;width:310px;max-width:calc(100vw - 24px)}
#hud-target #target-name{padding:0 23px 6px 4px;font:600 12px/1.4 'Outfit',system-ui,sans-serif;color:#f1e3c3}
#hud-target #target-clear{top:8px;right:8px;width:24px;height:24px;border-color:#af955c;background:#1e3023;color:#e8d7ac}
#menu-bar{box-sizing:border-box;max-height:calc(100% - 300px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#9d8752 #17271e;padding:17px 9px 19px;gap:5px;border:1px solid var(--hud-metal);background-image:linear-gradient(90deg,#253629,#132019)}
#menu-bar::before,#menu-bar::after{width:38px;height:38px}
#menu-bar .menu-btn{flex-shrink:0;border:1px solid #9a8354;border-bottom-width:2px;box-shadow:inset 0 0 0 2px #101e16,inset 0 0 0 3px #af97522b,0 2px 2px #0009;background:linear-gradient(#354b36,#203026);height:46px}
#menu-bar .menu-btn::after{content:"";position:absolute;bottom:2px;left:12px;right:12px;height:3px;background:linear-gradient(90deg,transparent,#be9f60,transparent);pointer-events:none}
#menu-bar .menu-btn:hover,#menu-bar .menu-btn.active{background:linear-gradient(#516749,#2d4634);border-color:#e0c385}
#menu-bar .menu-btn .mk{font-size:9px;color:#e1c88d}
#menu-bar .menu-btn .ic{display:grid;place-items:center;width:22px;height:22px;line-height:0}
#menu-bar .menu-btn .menu-asset{display:block;width:21px;height:21px;image-rendering:pixelated;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(225,199,120,.18));transition:none;}

#menu-bar .menu-btn[data-win="premium"] .menu-asset{filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 4px rgba(91,182,246,.52))}
#menu-bar .menu-btn[data-win="rewards"] .menu-asset{filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 4px rgba(238,191,72,.45))}

/* Editor HUD: clickul devine selector doar cât timp îl activezi din Setări grafică. */
#hud.hud-editing :is(#hud-top,#hud-target,#hotbar,#menu-bar,#chat,#minimap,#hud-yang,#hud-dc,#hud-ping){pointer-events:auto!important;cursor:crosshair}
#hud.hud-editing .hud-editable{outline:1px dashed rgba(224,194,112,.48);outline-offset:4px}
#hud.hud-editing .hud-editable:hover{outline-color:#f4d37f;}
#hud.hud-editing .hud-edit-selected{outline:2px solid #f2ce70;outline-offset:5px;box-shadow:0 0 0 2px #1a2017,0 0 18px rgba(244,199,90,.52)!important}
#hud-zone,#hud-dmod,#xp-boost-badge,#food-badge,#temper-badge,#torch-badge,#auto-ind,#dung-banner{
  border:1px solid #938355;border-radius:4px;box-shadow:inset 0 0 0 2px #101b13,inset 0 0 0 3px #af97522b;
  background-color:#192b20;background-image:var(--hud-leaf);background-position:-2px -2px;background-size:25px 25px;background-repeat:no-repeat;padding:5px 12px;color:#e6d6b1;
}
#hud-buffs .buff-icon{border-color:#b29a61;box-shadow:inset 0 0 0 1px #ddc68255,0 2px 3px #0009}
#hud-buffs .buff-icon.bad{border-color:#d57d67}
#hud-yang,#hud-dc{padding:1px 9px;background:#142219e8;border-left:2px solid #ab9159;border-right:1px solid #75633e;border-radius:3px}
#hud-ping{background:#13221bdd;border-top:1px solid #8d7849;border-bottom:1px solid #8d7849;padding:3px 0;border-radius:3px}
#minimap{border:2px solid #a38c59;outline:1px solid #172218;outline-offset:2px;box-shadow:0 0 0 5px #8b75432b,0 4px 15px #0007;border-radius:5px}
#chat{padding:9px 10px;border:1px solid #82724d88;border-radius:4px;background:linear-gradient(90deg,#13211acc,#13211a33);box-shadow:inset 0 0 0 2px #111a1344;box-sizing:border-box}
#chat::before{content:"";position:absolute;left:-3px;top:-3px;width:35px;height:35px;background:var(--hud-leaf) center/contain no-repeat;pointer-events:none}
#chat-filters .chat-filter{border-color:#8e7b4c;box-shadow:inset 0 -1px #bd9f5755}
#chat-input{border-color:#b09860;box-shadow:inset 0 0 0 2px #101b13}
#party-panel,#pvp-board{padding:12px}
/* Extensia de grupă își definește propriul padding, lipit de cardul personajului. */
#char-hud > #party-panel{padding:9px 10px 10px}
#portal-info .pi-hero{padding-top:20px;padding-left:20px;background-image:radial-gradient(ellipse at 12% 80%,#65705355,transparent 65%),linear-gradient(120deg,#26382f,#14201d)}
#portal-info .pi-hero::after{content:"";position:absolute;bottom:-9px;left:12%;right:12%;height:19px;background:var(--hud-divider) center/100% auto no-repeat;pointer-events:none}
#portal-info .pi-content{padding-top:17px}
#portal-info{overflow-x:hidden;scrollbar-color:#9d8752 #17271e}
#portal-info::before{top:0;left:0}
#portal-info::after{bottom:0;right:0}
#portal-info .pi-actions{padding-bottom:18px}
#portal-info .pi-enter{box-shadow:inset 0 0 0 2px #152518,inset 0 0 0 3px #c9ac6233}
/* Touch controls retain their hit areas; only their shell is decorated. */
.mobile :is(.act-btn,#mob-topbar button,.mob-sheet-panel){border-color:#aa935d;box-shadow:inset 0 0 0 2px #132219,inset 0 0 0 3px #c6a86b44,0 2px 6px #0006;background-image:var(--hud-leaf);background-position:-2px -2px;background-size:25px 25px;background-repeat:no-repeat}
.mobile #char-hud{padding:10px 12px}
.mobile #hud-target{padding:10px 12px;width:280px}
.mobile #hud-target #target-name{padding-right:29px}
#target-contributions{margin-top:8px;padding-top:7px;border-top:1px solid #85734a66}
.boss-top-heading{display:flex;justify-content:space-between;gap:5px;font:600 10px/1.4 'Outfit',sans-serif;color:#d6bd7c}
.boss-top-heading small{font-size:9px;font-weight:400;color:#acaa98}
.boss-top-row{display:grid;grid-template-columns:12px 26px minmax(0,1fr) 43px;align-items:center;gap:5px;min-height:27px;font:500 12px/1.2 'Outfit',sans-serif;color:#e7dfcf}
.boss-top-row img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;transform:scale(1.65)}
.boss-top-rank{color:#a6946b;font-size:10px}
.boss-top-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boss-top-row b{text-align:right;color:#ecd08a;font-variant-numeric:tabular-nums}
.boss-top-row.is-self{background:#c2ab5920}
.boss-top-empty{padding:6px 0;font:11px/1.4 'Outfit',sans-serif;color:#b6ad98}
#dung-banner{min-width:0;max-width:none;transform:none;box-sizing:border-box}
.mobile #hud-target #target-clear{width:30px;height:30px;top:4px;right:4px}
.mobile #char-hud::before,.mobile #char-hud::after,.mobile #hud-target::before,.mobile #hud-target::after{width:32px;height:32px}
@media(max-height:650px){body:not(.mobile) #menu-bar{gap:3px;padding-top:10px;padding-bottom:10px}body:not(.mobile) #menu-bar .menu-btn{height:40px}}
@media(max-width:1500px){body:not(.mobile) #chat{width:320px}}
@media(max-height:800px){
  body:not(.mobile) #menu-bar{display:grid;grid-template-columns:repeat(2,58px);gap:4px;padding:12px 8px}
  body:not(.mobile) #menu-bar .menu-btn{height:40px}
}