/* Separate bottom HUD surface, frame, groups, icons, keycaps and XP layers. */
.combat-dock{--dock-layer-surface:0;--dock-layer-content:2;--dock-layer-frame:4;width:676px;height:142px;background:none;filter:drop-shadow(0 6px 9px #0009)}
.combat-dock::before,.combat-dock .gem{display:none}
.dock-surface{position:absolute;inset:0;z-index:var(--dock-layer-surface);border-radius:7px;background:linear-gradient(#19231966,#08120bd9),url('hero-panel-leather-v1.png') center/320px 320px;box-shadow:inset 0 0 18px #0008;pointer-events:none}
.dock-frame{position:absolute;inset:0;z-index:var(--dock-layer-frame);border:1px solid #c1a267;border-radius:7px;box-shadow:inset 0 0 0 2px #071009,inset 0 0 0 3px #a38b4a66,0 0 0 1px #0b0d08;pointer-events:none}
.dock-frame::after{content:'';position:absolute;inset:6px;border:1px solid #b7985633;border-radius:3px;pointer-events:none}
.combat-dock .dock-main{position:absolute;inset:14px;z-index:var(--dock-layer-content)}
.combat-dock .action-row{position:relative;inset:auto;display:flex;align-items:start;justify-content:center;gap:12px;width:100%;height:90px}
.combat-dock #skills,.combat-dock .locked-slots,.combat-dock .dock-potions{position:relative;inset:auto;display:flex;gap:8px;pointer-events:auto}
.combat-dock #skills button,.combat-dock .locked-slots>span,.combat-dock #potion,.combat-dock #mana-potion{position:relative;inset:auto;left:auto;top:auto;width:70px;height:88px;border:1px solid #a58d5870;border-radius:4px;background:linear-gradient(145deg,#35402a99,#08110b);box-shadow:inset 0 0 0 2px #080d08,inset 0 1px 0 #d5bd7740;overflow:hidden}
.combat-dock #skills button:nth-child(n),.combat-dock .locked-slots>span:nth-child(n){left:auto}
.combat-dock .locked-slots>span::before{display:none}
.combat-dock .action-row .atlas{left:4px;top:4px;width:60px;height:60px;border-radius:2px}
.combat-dock #skills strong,.combat-dock .action-row kbd{top:auto;bottom:3px;left:50%;transform:translateX(-50%);width:28px;height:19px;font:15px/19px Georgia;color:#eedbb0;background:#10170deb;border:1px solid #93743d77;border-radius:2px;box-shadow:inset 0 1px 0 #d9b96c18}
.combat-dock .locked-slots .atlas{opacity:.75}
.combat-dock #potion-count,.combat-dock #resource-potion-count{left:auto;right:5px;top:45px;width:auto;height:18px;line-height:18px;padding:0 3px;border-radius:3px;background:#0b110bda;font-size:14px}
.combat-dock #mana-potion::after{display:none}
.combat-dock .cooldown{inset:4px auto auto 4px;width:60px;height:60px;line-height:60px;z-index:1}
.combat-dock .slot-lock{top:7px;right:7px;z-index:2}
.combat-dock .experience-track{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;height:17px;border:1px solid #a88b4f88;border-radius:3px;clip-path:none;background:#070e08;box-shadow:inset 0 0 0 1px #0008;isolation:isolate}
.combat-dock .experience-track i{position:relative;z-index:0;height:100%;background:linear-gradient(#e5c780,#b48d38 45%,#806021);box-shadow:inset 0 1px 0 #f4dda155}
.combat-dock .experience-track span{z-index:2;font:12px/15px Georgia;text-shadow:0 1px 3px #000}
.hint{bottom:calc(168px * var(--ui-fit))}
.combat-dock #skills button:hover,.combat-dock #potion:hover{border-color:#e0c181;filter:brightness(1.15);background:linear-gradient(145deg,#46503499,#152311)}

/* Generated metal frame matches the existing HUD atlas; no colored orbs. */
.combat-dock{bottom:calc(30px * var(--ui-fit))}
.dock-frame{inset:-22px -108px;width:calc(100% + 216px);height:186px;border:0;border-radius:0;box-shadow:none}
.dock-frame svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.dock-frame::after{display:none}
.dock-surface{inset:0 -3px;border-radius:0;background:linear-gradient(#161a14eb,#090f0bf2),url('hero-panel-leather-v1.png') center/320px 320px;box-shadow:none}
.hint{bottom:calc(207px * var(--ui-fit))}

.dock-frame{left:-96px;right:-96px;width:calc(100% + 192px)}
/* Compact independent end caps keep the frame close to its contents. */
.dock-frame{inset:-25px -42px;width:calc(100% + 84px);height:192px;display:flex}
.dock-frame svg{height:100%;flex:none}
.dock-frame .dock-frame-left,.dock-frame .dock-frame-right{width:64px}
.dock-frame .dock-frame-center{width:calc(100% - 128px)}
.combat-dock .dock-main{inset:18px 14px 21px}
.combat-dock .experience-track{height:15px}
.hint{bottom:calc(195px * var(--ui-fit))}
/* The backing follows the opening between the metal rails and end caps. */
.dock-surface{inset:22px 22px 15px}
.combat-dock .dock-main{inset:22px 14px 15px}
/* End caps hug the surface boundary instead of floating beside it. */
.dock-frame{left:5px;right:5px;width:calc(100% - 10px)}
.dock-frame .dock-frame-left,.dock-frame .dock-frame-right{width:44px}
.dock-frame .dock-frame-center{width:calc(100% - 88px)}
/* Regenerated frame has a narrow opening made for the action panel itself. */
.dock-frame{inset:-15px 0 auto;width:100%;height:182px;display:block}
.dock-frame svg{display:block;width:100%;height:100%}
.dock-surface{inset:22px 22px 15px}
.hint{bottom:calc(184px * var(--ui-fit))}
/* Inset XP and backing to the frame's inner opening; separate the lower rail. */
.combat-dock .dock-main{inset:22px 24px 15px}
.dock-surface{inset:22px 22px 0;background:linear-gradient(#171d16ed,#090e0bf5),url('hero-panel-leather-v1.png') center/320px 320px}
.dock-surface::after{content:'';position:absolute;left:6px;right:6px;bottom:8px;height:1px;background:linear-gradient(90deg,transparent,#ad8d4855 12%,#d5b16b77 50%,#ad8d4855 88%,transparent);box-shadow:0 2px 0 #020603;pointer-events:none}
.combat-dock .experience-track{box-shadow:inset 0 0 0 1px #0008,0 3px 0 #050a07;}

/* One eight-column grid owns every slot and hit area. */
.combat-dock .action-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:start;height:88px}
.combat-dock #skills,.combat-dock .locked-slots,.combat-dock .dock-potions{display:contents}
.combat-dock #skills button,.combat-dock .locked-slots>span,.combat-dock #potion,.combat-dock #mana-potion{position:relative;inset:auto;left:auto;top:auto;box-sizing:border-box;display:block;width:100%;min-width:0;height:88px;margin:0;padding:0;border:0;border-radius:4px;overflow:hidden;transform:none}
.combat-dock #skills button::before,.combat-dock .locked-slots>span::before,.combat-dock #potion::before,.combat-dock #mana-potion::before{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;box-sizing:border-box;border:1px solid #a58a58;border-radius:4px;background:linear-gradient(145deg,#30372a,#0b130e 70%);box-shadow:inset 0 0 0 2px #050b07,inset 0 1px #e6c48333;pointer-events:none;filter:none}
.combat-dock #skills button::after,.combat-dock #potion::after,.combat-dock #mana-potion::after{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;box-sizing:border-box;border:1px solid transparent;border-radius:4px;background:none;pointer-events:none}
.combat-dock #skills button:hover:enabled::after,.combat-dock #skills button:focus-visible::after,.combat-dock #potion:hover:enabled::after,.combat-dock #potion:focus-visible::after{border-color:#ecd096;box-shadow:inset 0 0 10px #edc77633}
.combat-dock #skills button:disabled::after{border-color:transparent;box-shadow:none}
.combat-dock .action-row .atlas{left:50%;top:4px;width:56px;height:56px;transform:translateX(-50%);border-radius:2px;clip-path:none}
.combat-dock #skills strong,.combat-dock .action-row kbd{position:absolute;inset:auto auto 3px 50%;display:grid;place-items:center;box-sizing:border-box;width:22px;height:22px;min-width:22px;margin:0;padding:0;transform:translateX(-50%);font:13px/1 Georgia,serif;text-align:center;border:1px solid #93743d99;border-radius:2px;background:linear-gradient(#20291b,#0c130d);color:#eedbb0;box-shadow:inset 0 1px #d9b96c22;z-index:5}
.combat-dock .cooldown{inset:4px auto auto 50%;width:56px;height:56px;line-height:56px;transform:translateX(-50%);border-radius:2px}
.combat-dock #potion-count,.combat-dock #resource-potion-count{inset:43px 5px auto auto;width:auto;height:17px;margin:0;padding:0 3px;font:12px/17px Georgia;z-index:3}
.combat-dock .slot-lock{top:10px;right:5px}

/* Square skill wells; keycaps sit beneath their own matching columns. */
.combat-dock .action-row{grid-template-columns:repeat(8,64px);justify-content:center;height:88px}
.combat-dock #skills button,.combat-dock .locked-slots>span,.combat-dock #potion,.combat-dock #mana-potion{width:64px;height:64px;aspect-ratio:1;overflow:visible}
.combat-dock .action-row .atlas{left:3px;top:3px;width:58px;height:58px;aspect-ratio:1;transform:none;border-radius:2px;clip-path:inset(0 round 2px)}
.combat-dock #skills strong,.combat-dock .action-row kbd{bottom:-24px}
.combat-dock .cooldown{inset:3px auto auto 3px;width:58px;height:58px;line-height:58px;transform:none}
.combat-dock #potion-count,.combat-dock #resource-potion-count{top:42px;right:4px}

/* Fit the frame to eight 64px wells, seven 8px gaps and symmetric trim. */
.combat-dock{width:628px}

/* Retire the old fixed-width backing; dock-surface owns the fitted background. */
.combat-dock .action-row::before{content:none;display:none}

/* Separate consumables from the eight ability wells. */
.combat-dock .dock-potions{position:absolute;left:-196px;top:0;width:184px;height:142px;display:block;isolation:isolate}
.combat-dock .dock-potions .action-row{position:absolute;inset:22px 24px auto;display:grid;grid-template-columns:repeat(2,64px);width:136px;height:88px;gap:8px;z-index:var(--dock-layer-content)}
.combat-dock .dock-potions .dock-surface::after{display:none}
.combat-dock .empty-skill-art{position:absolute;inset:3px;display:block;border-radius:2px;background:url('empty-skill-slot-v1.png') center/cover;pointer-events:none}
.combat-dock .locked-slots>span{cursor:default}
.combat-dock .locked-slots .empty-skill-art{left:3px;top:3px;right:auto;bottom:auto;width:58px;height:58px;z-index:1;background-size:cover}

.combat-dock .dock-potions{height:110px}
.combat-dock .dock-potions .dock-frame{height:150px}

.combat-dock .dock-potions{height:120px}
.combat-dock .dock-potions .dock-frame{height:160px}

/* Align both docks along their lower edge; keep keys clear of the trim. */
.combat-dock .dock-potions{top:22px;height:120px}
.combat-dock .dock-potions .dock-surface{inset:15px 22px 5px}

/* A dedicated generated frame: uniform scaling preserves its native proportions. */
.combat-dock .dock-potions .potion-frame{inset:4px 0 auto;width:184px;height:auto;display:block}
.combat-dock .potion-frame img{display:block;width:100%;height:auto;pointer-events:none}
.combat-dock .dock-potions .dock-surface{inset:20px 21px 0}

/* Fit the backing to the transparent opening of the potion frame. */
.combat-dock .dock-potions{background:none;border:0;box-shadow:none}
.combat-dock .dock-potions .dock-surface{inset:auto;left:19px;top:22px;width:146px;height:94px;border-radius:0;overflow:hidden}
.combat-dock .dock-potions .action-row{inset:24px 24px auto;height:88px}

/* Extend the main backing beneath the upper metal rail to seal its opening. */
.combat-dock > .dock-surface{top:14px}

/* Pre-filtered artwork at the actual 58px inner well size; no sharpening. */
.combat-dock .action-row .atlas{background-image:url('ability-icons-58-v1.png');image-rendering:auto}
.combat-dock #skills button[aria-label='Круговой удар'] .atlas{background-image:url('whirlwind-icon-58-v2.png');background-size:100% 100%;background-position:center}
.combat-dock .locked-slots .empty-skill-art{background-image:url('empty-skill-slot-58-v1.png');image-rendering:auto}

/* Drag targets glow without changing the slot geometry. */
.combat-dock #skills [data-slot]{touch-action:none;user-select:none}
.combat-dock #skills button{cursor:grab}
.combat-dock.skill-dragging #skills .locked-slots>span::before{border-color:#e3c378;box-shadow:inset 0 0 16px #dab65b45,0 0 9px #e2ba5d77;transition:box-shadow .15s,border-color .15s}
.combat-dock.skill-dragging #skills .locked-slots>span.drop-target::before{border-color:#fff0bb;box-shadow:inset 0 0 22px #eed48888,0 0 16px #efd082}
.combat-dock #skills .drag-source .atlas{opacity:.35}
.skill-drag-ghost{position:fixed;width:58px;height:58px;transform:translate(-50%,-50%);pointer-events:none;z-index:10000;background-repeat:no-repeat;border-radius:3px;box-shadow:0 0 0 1px #e7c578,0 5px 18px #000a}

/* Independent frame-matched lock control beside the top right corner. */
.combat-dock #skill-drag-lock{position:absolute;left:calc(100% + 5px);top:4px;width:30px;height:30px;padding:0;border:0;background:none!important;box-shadow:none!important;z-index:6;cursor:pointer;transition:filter .18s,transform .18s}
.combat-dock #skill-drag-lock img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.combat-dock #skill-drag-lock i{position:absolute;right:1px;bottom:1px;width:5px;height:5px;border-radius:50%;background:#90b38b;box-shadow:0 0 4px #8fba7c;pointer-events:none}
.combat-dock #skill-drag-lock[aria-pressed='true'] i{background:#edc66d;box-shadow:0 0 5px #edc66d}
.combat-dock #skill-drag-lock:hover{filter:brightness(1.2)!important;transform:translateY(-1px)}
.combat-dock #skill-drag-lock:focus-visible{outline:1px solid #e7c578;outline-offset:2px}
.combat-dock.skills-locked #skills button{cursor:pointer}

.combat-dock #skill-drag-lock img{position:absolute;left:-8px;top:-8px;width:46px;height:46px}
.combat-dock #skill-drag-lock i{display:none}

/* Footer ignores world clicks; this control must receive its own pointer events. */
.combat-dock #skill-drag-lock{pointer-events:auto}

/* Seat the lock beside the right corner ornament. */
.combat-dock #skill-drag-lock{left:calc(100% - 5px)}

.combat-dock #skill-drag-lock{left:calc(100% - 11px)}

/* A dropped skill trades places with the ability already in that well. */
.combat-dock.skill-dragging #skills button:not(.drag-source)::before{border-color:#e3c378;box-shadow:inset 0 0 12px #dab65b30,0 0 7px #e2ba5d55}
.combat-dock.skill-dragging #skills button.drop-target::before{border-color:#fff0bb;box-shadow:inset 0 0 22px #eed48888,0 0 16px #efd082}

#skill-tooltip{position:fixed;inset:auto;z-index:10001;width:280px;max-width:calc(100vw - 16px);padding:10px 12px;border:1px solid #a58b55;border-radius:5px;background:linear-gradient(145deg,#151a14f5,#080c09fa);box-shadow:0 7px 24px #000a,inset 0 0 0 2px #050805;color:#e0d6bd;font:13px/1.45 Georgia,serif;pointer-events:none;backdrop-filter:none;user-select:none}
#skill-tooltip[hidden]{display:none}
#skill-tooltip h3{margin:0 0 7px;font:17px/1.25 Georgia,serif;color:#efd18b}
#skill-tooltip .skill-tip-meta{color:#a9ada0}
#skill-tooltip .skill-tip-meta b{font-weight:normal;color:#ece1c7}
#skill-tooltip p{margin:10px 0;padding-top:9px;border-top:1px solid #b99a4d40;color:#e0d6bd;font:inherit}
#skill-tooltip .skill-tip-detail b{font-weight:normal;color:#abc0cf}
#skill-tooltip small{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #b99a4d30;color:#a5a797;letter-spacing:0;font:12px/1.4 Georgia,serif}
#skill-tooltip .skill-tip-recharge{margin-top:7px;color:#d7b86d}
.skill-energy-icon{display:inline-block;width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:5px;pointer-events:none}

/* New bronze leafwork shares the palette of the portrait HUD and minimap. */
.combat-dock>.dock-frame{inset:-8px -8px auto;width:644px;height:158px}
.combat-dock>.dock-surface{inset:14px 18px 7px;background:linear-gradient(#18241aed,#0b140ef5),url('hero-panel-leather-v1.png') center/320px 320px}
.combat-dock .dock-potions .potion-frame{left:-7px;top:4px;width:198px}
.combat-dock .dock-potions .dock-surface{left:11px;top:27px;width:162px;height:96px;background:linear-gradient(#18241aed,#0b140ef5),url('hero-panel-leather-v1.png') center/320px 320px}
.combat-dock .dock-potions .action-row{top:30px}
.combat-dock #skills button::before,.combat-dock .locked-slots>span::before,.combat-dock #potion::before,.combat-dock #mana-potion::before{border-color:#ad946a;background:linear-gradient(145deg,#263329,#0c160f 70%);box-shadow:inset 0 0 0 2px #08100b,inset 0 1px #e5d3ad33}
.combat-dock .experience-track{border-color:#ac946c;background:#09140e}
.combat-dock .experience-track i{background:linear-gradient(#e2c993,#b9995f 45%,#80643b)}
.combat-dock #skills strong,.combat-dock .action-row kbd{color:#ecdfc1;border-color:#a18a6299;background:linear-gradient(#243025,#101b13)}
.combat-dock #skill-drag-lock img{filter:saturate(.65)}
.combat-dock{height:158px}
.combat-dock>.dock-frame{height:174px}
.combat-dock .dock-main{inset:22px 24px 19px}
.combat-dock .dock-potions{top:38px}
.hint{bottom:calc(200px * var(--ui-fit))}
.combat-dock .experience-track{left:10px;right:10px;height:14px;box-sizing:border-box;border:1px solid #b69b6c;border-radius:5px;overflow:hidden;background:linear-gradient(#08110d,#18251b);box-shadow:0 0 0 3px #0b150e,inset 0 1px 3px #000c,0 4px 5px #0005}
.combat-dock .experience-track i{border-radius:3px;background:linear-gradient(#dfc99d,#b4955b 55%,#7a613a);box-shadow:inset 0 1px #fff0c677}
.combat-dock .experience-track span{font:11px/12px Georgia;color:#f5ead2;text-shadow:0 1px 2px #000,0 0 3px #000}
.combat-dock #skill-drag-lock{left:calc(100% - 8px);top:1px;width:32px;height:32px;border:1px solid #b69b6c!important;border-radius:50%;background:radial-gradient(circle at 35% 25%,#344437,#0c170f 75%)!important;box-shadow:inset 0 0 0 2px #101a12,inset 0 0 0 3px #8b745044,0 2px 5px #0009!important;display:grid;place-items:center}
.combat-dock #skill-drag-lock svg{width:20px;height:20px;fill:#aa8953;stroke:#ead9b4;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.combat-dock #skill-drag-lock .lock-shackle{fill:none;stroke-width:2}
.combat-dock #skill-drag-lock circle{fill:#142019;stroke:none}
.combat-dock #skill-drag-lock .lock-key{stroke:#142019}
.combat-dock #skill-drag-lock[aria-pressed='true']{box-shadow:inset 0 0 0 2px #101a12,inset 0 0 0 3px #bca16a66,0 0 6px #b89d6044!important}

/* Inventory quantity sits directly on the lower-right corner of the elixir. */
.combat-dock #potion-count,.combat-dock #resource-potion-count{inset:auto 6px 5px auto;width:auto;min-width:0;height:18px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#f4f4ed;font:400 18px/18px Georgia,serif;text-align:right;text-shadow:1px 0 1px #000,-1px 0 1px #000,0 1px 1px #000,0 -1px 1px #000;pointer-events:none;z-index:4}
.combat-dock #potion-count,.combat-dock #resource-potion-count{-webkit-text-stroke:1px #111813;paint-order:stroke fill;text-shadow:0 1px 2px #000}

/* Health elixir shares its artwork with the backpack item. */
.combat-dock #potion .potion-art{background-image:image-set(url('backpack/small-health-elixir-dock-v2.png') 1x,url('backpack/small-health-elixir-dock-v2@2x.png') 2x);background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.combat-dock #skills button[aria-label='Рывок'] .atlas{background-image:image-set(url('dash-icon-v3.png') 1x,url('dash-icon-v3@2x.png') 2x);background-size:100% 100%;background-position:center;background-repeat:no-repeat}

/* Resource elixirs use the same diagonal flask artwork as health. */
.combat-dock #mana-potion .mana-potion-art{background-image:image-set(url('backpack/small-mana-elixir-dock-v1.png') 1x,url('backpack/small-mana-elixir-dock-v1@2x.png') 2x,url('backpack/small-mana-elixir-dock-v1@3x.png') 3x);background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.combat-dock #mana-potion[data-resource="energy"] .mana-potion-art{background-image:image-set(url('backpack/small-energy-elixir-dock-v1.png') 1x,url('backpack/small-energy-elixir-dock-v1@2x.png') 2x,url('backpack/small-energy-elixir-dock-v1@3x.png') 3x)}

/* Opaque backing extends beneath all four inner frame corners. */
.combat-dock>.dock-surface{inset:4px 8px 0;border-radius:9px;background-color:#0b140e}

.combat-dock>.dock-frame>.dock-art{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}

/* Keep the full XP track and its label above the lower frame ornament. */
.combat-dock .experience-track{bottom:10px}