/* HUD Forge prototype: one framed stone-and-brass console instead of separate flat boxes.
   Loaded last; overrides presentation only. Layout areas, ids and behaviour stay unchanged. */
:root{
 --forge-stone-hi:#26302d;--forge-stone:#171e1c;--forge-stone-lo:#0b100f;--forge-recess:#050807;
 --forge-brass:#c9a85f;--forge-brass-hi:#f0d79a;--forge-brass-lo:#6e5a33;--forge-ivory:#efe4c4;
 --forge-teal:#8fd1c6;--forge-pip:#f0cf74;--forge-pip-off:#2c3633;
 --stat-ad:#f0923e;--stat-ap:#a98bff;--stat-armor:#f2c14e;--stat-mr:#6fb7ff;--stat-as:#e3dc5a;--stat-hp:#4fd06a;--stat-ms:#e8e4da;--stat-mana:#4aa3ff;--stat-crit:#ff6a55;--stat-ls:#e5486b;--stat-haste:#c5d3e6;
 --hud-base:#141a18;--hud-raised:#1e2724;--hud-recess:#060908;--hud-key:#070b0aee
}
#heroHud{
 gap:10px 8px;padding:13px 16px 8px;border:0;
 background:none;box-shadow:none;isolation:isolate;
 /* no filter: an animated child under a filtered ancestor re-rasterises the whole HUD every frame */
}
@media(min-width:1600px) and (min-height:900px){#heroHud{zoom:1.12}}
/* Frame drawn behind the children so tooltips, the level-up row and effects are never clipped. */
#heroHud::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 25V7l6-6h18' fill='none' stroke='%23050807' stroke-width='3.2'/%3E%3Cpath d='M1 25V7l6-6h18' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M5 25V10l5-5h15' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.75'/%3E%3Cpath d='M7 15c2-3 5-6 8-8' fill='none' stroke='%23f0d79a' stroke-width='.9' opacity='.8'/%3E%3Ccircle cx='7' cy='7' r='1.6' fill='%23f0d79a'/%3E%3C/svg%3E") left -1px top -1px/26px 26px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(26 0) scale(-1 1)'%3E%3Cpath d='M1 25V7l6-6h18' fill='none' stroke='%23050807' stroke-width='3.2'/%3E%3Cpath d='M1 25V7l6-6h18' fill='none' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M5 25V10l5-5h15' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.75'/%3E%3Cpath d='M7 15c2-3 5-6 8-8' fill='none' stroke='%23f0d79a' stroke-width='.9' opacity='.8'/%3E%3Ccircle cx='7' cy='7' r='1.6' fill='%23f0d79a'/%3E%3C/g%3E%3C/svg%3E") right -1px top -1px/26px 26px no-repeat,
  linear-gradient(90deg,transparent,#f0d79a55 18%,#f0d79a99 50%,#f0d79a55 82%,transparent) top/100% 1px no-repeat,
  radial-gradient(120% 140% at 50% 0,#2b3532 0,transparent 60%),
  linear-gradient(180deg,var(--forge-stone-hi),var(--forge-stone) 38%,var(--forge-stone-lo));
 box-shadow:inset 0 0 0 1px var(--forge-brass),inset 0 0 0 3px var(--forge-recess),inset 0 0 0 4px #9a7f4a99,inset 0 14px 22px -14px #fff3,inset 0 -10px 18px -10px #000
}
/* Corner ornaments: stepped brass brackets (LoL-like) drawn in the frame layer, no cut corners. */
#heroHud::after{
 content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,transparent,var(--forge-brass) 12%,var(--forge-brass-hi) 50%,var(--forge-brass) 88%,transparent);
 clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,3px 100%);opacity:.9
}

/* Stats: a recessed ledger rather than loose text with a divider line. */
#heroHud #heroNumbers{
 border-right:0;padding:6px 8px;margin-right:2px;border-radius:2px;color:var(--forge-ivory);font-size:11.5px;
 background:linear-gradient(180deg,#0a0f0e,#111816);box-shadow:inset 0 1px 3px #000,inset 0 0 0 1px #3a3a2a,0 1px 0 #ffffff0d
}
#heroHud #heroNumbers b{font-weight:700;text-shadow:0 1px 0 #000}
#heroHud #heroNumbers svg{color:var(--forge-brass)}
#heroHud #heroNumbers [data-number="attack"]{--c:var(--stat-ad)}#heroHud #heroNumbers [data-number="ap"]{--c:var(--stat-ap)}#heroHud #heroNumbers [data-number="armor"]{--c:var(--stat-armor)}#heroHud #heroNumbers [data-number="resist"]{--c:var(--stat-mr)}#heroHud #heroNumbers [data-number="rate"]{--c:var(--stat-as)}#heroHud #heroNumbers [data-number="regen"]{--c:var(--stat-hp)}#heroHud #heroNumbers [data-number="speed"]{--c:var(--stat-ms)}
#heroHud #heroNumbers [data-number] svg{color:var(--c);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--c) 45%,transparent))}

/* Portrait medallion breaks out of the top edge like a crest. */
#heroHud #portrait{
 transform:translateY(-9px) scale(1.14);border:2px solid var(--forge-brass);
 box-shadow:0 0 0 2px var(--forge-recess),0 0 0 4px var(--forge-brass-lo),0 6px 14px #000c,inset 0 0 10px #000a;z-index:3
}
#heroHud #experience .xpTrack{stroke:#141017;stroke-width:4}
#heroHud #experience .xpProgress{stroke:#c39be8;stroke-width:4;filter:drop-shadow(0 0 2px #b18ad4aa)}
#heroHud #portrait b{
 right:auto;left:50%;bottom:-11px;transform:translateX(-50%);
 background:radial-gradient(circle at 50% 35%,#2b2d27,#0b0d0b);border:1px solid var(--forge-brass-hi);
 color:#fff2c8;font-weight:800;font-size:12px;box-shadow:0 0 0 2px #000,0 2px 4px #000
}

/* Ability, passive and spell slots: bevelled brass bezels with depth. */
#heroHud .ability,#heroHud #passive,#heroHud .utilityButton,#heroHud #inventory .slot,#heroHud #recallButton{
 border:1px solid var(--forge-brass);border-radius:3px;
 background:radial-gradient(circle at 50% 30%,#22302d,#080c0b 75%);
 box-shadow:0 0 0 1px #000,0 0 0 2px #5a4a2b,0 3px 6px #000c,inset 0 0 0 1px #00000099,inset 0 6px 10px -6px #fff2
}
#heroHud .ability img,#heroHud .passiveImage,#heroHud .utilityImage{border-radius:2px}
/* Passive: a square slot so the painted art is not squeezed into a 32x38 box. */
#heroHud{grid-template-columns:108px 64px 38px 216px 36px 158px}
#heroHud #passive{width:38px;height:38px;padding:0;align-self:center}
#heroHud #passive .passiveImage{inset:0;width:100%;height:100%;background-repeat:no-repeat}
#heroHud #passive>svg{display:none}
#heroHud .ability{transition:box-shadow .12s,transform .12s}
#heroHud .abilitySlot:hover .ability:not(:disabled){
 transform:translateY(-1px);
 box-shadow:0 0 0 1px #000,0 0 0 2px var(--forge-brass-hi),0 0 12px #f0d79a66,0 4px 8px #000c,inset 0 0 0 1px #0009
}
/* Like LoL: unlearned abilities are grey; learned ones keep their colour and only dim while unavailable. */
#heroHud .ability img{background-color:#0b100f}
#heroHud .ability:disabled img{filter:brightness(.62) saturate(.85)}
#heroHud .abilitySlot[data-rank="0"] .ability img,#heroHud .abilitySlot[data-rank="0"] .ability:disabled img{filter:grayscale(1) brightness(.55) contrast(.9)}
#heroHud .abilitySlot[data-rank="0"] .ability{border-color:#6d6450}
#heroHud .ability kbd,#heroHud .utilityButton kbd,#heroHud #recallButton kbd{
 background:linear-gradient(#1c1f1a,#0a0c0a);color:var(--forge-brass-hi);font-weight:700;
 border:0;border-top:1px solid var(--forge-brass-lo);border-right:1px solid var(--forge-brass-lo);border-top-right-radius:3px
}
#heroHud .ability small{background:#04100fd9;color:#9fdcf0;font-weight:700;border-radius:2px;text-shadow:0 1px 0 #000}
#heroHud .ability .cd{font-weight:800;text-shadow:0 0 4px #000,0 1px 0 #000}

/* Rank pips under each ability (set by hud-forge.js from the existing snapshot). */
#heroHud .abilitySlot{position:relative}
#heroHud .abilitySlot[data-max]::after{
 content:"";position:absolute;left:50%;bottom:-8px;height:4px;transform:translateX(-50%);
 width:calc(var(--max) * 8px - 3px);
 background:linear-gradient(90deg,var(--forge-pip) calc(var(--rank) * 8px),var(--forge-pip-off) 0);
 -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px);
 filter:drop-shadow(0 0 2px #f0cf7466)
}
#heroHud .abilitySlot[data-rank="0"]::after{filter:none}

/* Level-up buttons above learnable abilities: brass tabs with a soft call-to-action glow. */
#heroHud #skillLearning button{
 border:1px solid var(--forge-brass-hi);border-radius:3px 3px 0 0;color:#fff0bf;font-weight:800;
 background:linear-gradient(180deg,#5a4a24,#2a2210);box-shadow:0 0 0 1px #000,0 0 10px #f0cf7455,inset 0 1px 0 #fff4;
 text-shadow:0 1px 0 #000
}
#heroHud #skillLearning button:not(:disabled):hover{background:linear-gradient(180deg,#7a6330,#3a2e14);box-shadow:0 0 0 1px #000,0 0 14px #f0cf7499,inset 0 1px 0 #fff5}

/* Health and mana: framed glass tubes with highlight and 10% notches. */
#heroHud #vitals .meter{
 position:relative;border:1px solid #000;border-radius:2px;background:linear-gradient(#050807,#0d1311);
 box-shadow:0 0 0 1px var(--forge-brass-lo),inset 0 2px 3px #000
}
#heroHud #vitals .meter i{border-radius:1px}
/* Like LoL: no segment notches in the HUD bars (those belong to the overhead bars). The fill reads as
   flowing liquid light: soft layered gradient, a bright leading edge and a slow sheen (compositor-only). */
#heroHud #vitals .meter i{overflow:hidden}
#heroHud #vitals .meter.hp i{
 background:radial-gradient(120% 90% at 20% 0,#b6f5a466,transparent 60%),radial-gradient(90% 120% at 75% 100%,#1c7a2a99,transparent 70%),linear-gradient(180deg,#8be486 0,#47b551 32%,#2a923a 68%,#1d6e2b);
 box-shadow:inset -2px 0 4px -1px #f0ffe0dd,inset 0 -2px 2px #0b3a1288
}
#heroHud #vitals .meter.mana i{
 background:radial-gradient(120% 90% at 20% 0,#b8e4ff66,transparent 60%),radial-gradient(90% 120% at 75% 100%,#1b4d9a99,transparent 70%),linear-gradient(180deg,#8fd0ff 0,#4392dc 35%,#2a68ae 75%,#1e4f87);
 box-shadow:inset -2px 0 4px -1px #e2f4ffdd,inset 0 -2px 2px #0b234588
}
#heroHud #vitals .meter i::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(100deg,transparent 0 35%,#ffffff2e 48%,#ffffff12 55%,transparent 68%);
 transform:translateX(-100%);animation:forgeFlow 3.8s linear infinite;will-change:transform
}
#heroHud #vitals .meter.mana i::after{animation-duration:4.6s;animation-delay:-1.7s}
@keyframes forgeFlow{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){#heroHud #vitals .meter i::after{animation:none;display:none}}
#heroHud #vitals .meter::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:1px;
 background:linear-gradient(180deg,#ffffff38,#ffffff0a 40%,transparent 55%,#0000002e)
}
#heroHud #vitals .meter strong{font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000;z-index:2}

/* Inventory and gold plaque. */
#heroHud #inventory .slot:empty,#heroHud #inventory .slot:not(:has(img)){background:linear-gradient(#070a09,#101614);box-shadow:0 0 0 1px #000,0 0 0 2px #3b3220,inset 0 2px 4px #000}
/* Gold: a small stacked coin replaces the diamond glyph; the label stays for screen readers. */
#heroHud #shopOpen>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Like LoL: recall (B) sits directly under the ward trinket (4); the control ward (5) moves beside it. */
#heroHud #gear .utility-5{display:none}
#heroHud{grid-template-columns:108px 64px 38px 216px 36px 126px}
#heroHud #gear{width:126px;grid-template-columns:92px 28px}
#heroHud #gear #shopOpen{grid-column:1/3}
#heroHud #gear #recallButton{grid-column:2;grid-row:1;align-self:end;width:28px;height:28px;padding:2px 2px 7px}
#heroHud #gear #recallButton svg{width:19px;height:19px}

/* Ability tooltip scaling block (hud-forge-scaling.js): LoL-style coloured ratios. */
#abilityTooltip .tipScaling{margin:8px 0 2px;padding:7px 8px;border-top:1px solid #6e5a3366;background:linear-gradient(180deg,#0e1413,#0a0f0e);border-radius:3px;font-size:12px}
#abilityTooltip .tipScalingTitle{display:block;margin-bottom:4px;color:var(--forge-brass);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
#abilityTooltip .tipScaling>div{display:flex;justify-content:space-between;gap:10px;line-height:18px}
#abilityTooltip .tipScaling>div>span:first-child{color:#bfb59a}
#abilityTooltip .tipScaling b{color:#fff3cf;font-weight:800}
#abilityTooltip .tipScaling span span:not(.forgeRatio),#abilityTooltip .tipScaling i{color:#8d8670;font-style:normal}
#abilityTooltip .forgeRatio{font-weight:700;color:#e8dcc0}
#abilityTooltip .forgeRatio.ad{color:var(--stat-ad)}
#abilityTooltip .forgeRatio.ap{color:var(--stat-ap)}
#abilityTooltip .forgeRatio.hp{color:var(--stat-hp)}

/* Shop stat chips: the same colour and icon per attribute as the HUD ledger. */
#shop .forgeStat{display:inline-flex;align-items:center;gap:3px;margin-right:8px;white-space:nowrap;color:#d9d0b8}
#shop .forgeStat svg{width:13px;height:13px;color:var(--c);flex:none}
#shop .forgeStat b{color:var(--c);font-weight:800}
#shop .forgeStat .forgeDot{width:7px;height:7px;transform:rotate(45deg);background:var(--c);flex:none;box-shadow:0 0 3px var(--c)}
#shop .forgeStat[data-stat="ad"]{--c:var(--stat-ad)}#shop .forgeStat[data-stat="ap"]{--c:var(--stat-ap)}#shop .forgeStat[data-stat="armor"]{--c:var(--stat-armor)}
#shop .forgeStat[data-stat="mr"]{--c:var(--stat-mr)}#shop .forgeStat[data-stat="as"]{--c:var(--stat-as)}#shop .forgeStat[data-stat="hp"]{--c:var(--stat-hp)}
#shop .forgeStat[data-stat="ms"]{--c:var(--stat-ms)}#shop .forgeStat[data-stat="mana"]{--c:var(--stat-mana)}#shop .forgeStat[data-stat="haste"]{--c:var(--stat-haste)}
#shop .forgeStat[data-stat="crit"]{--c:var(--stat-crit)}#shop .forgeStat[data-stat="ls"]{--c:var(--stat-ls)}

/* Gold: LoL-like notched plaque, stacked coins and the number only (hud-forge.js mirrors it into data-gold). */
#heroHud #shopOpen{border:7px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M6 1h18l5 5v18l-5 5H6l-5-5V6z' fill='%23070b0a' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6 1.5h18l4.5 4.5v18l-4.5 4.5H6L1.5 24V6z' fill='none' stroke='%23c9a85f' stroke-width='1'/%3E%3Cpath d='M7 4h16l3 3v16l-3 3H7l-3-3V7z' fill='none' stroke='%236e5a33' stroke-width='.8'/%3E%3C/svg%3E") 9 fill / 7px stretch;border-radius:0;background:none;box-shadow:none;padding:0 6px;height:26px}
#heroHud #shopOpen:hover{filter:brightness(1.18)}
#heroHud #gold{display:inline-flex;align-items:center;gap:7px;font-size:0;line-height:1}
#heroHud #gold::before{content:"";width:22px;height:17px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cdefs%3E%3CradialGradient id='c' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff4c7'/%3E%3Cstop offset='.35' stop-color='%23f3c95c'/%3E%3Cstop offset='.8' stop-color='%23b5801f'/%3E%3Cstop offset='1' stop-color='%236b4a10'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='17' cy='11' r='7.5' fill='url(%23c)' stroke='%234a3206' stroke-width='1'/%3E%3Ccircle cx='17' cy='11' r='5' fill='none' stroke='%23fff2b8' stroke-opacity='.45' stroke-width='.8'/%3E%3Ccircle cx='9' cy='9' r='8' fill='url(%23c)' stroke='%234a3206' stroke-width='1'/%3E%3Ccircle cx='9' cy='9' r='5.4' fill='none' stroke='%23fff2b8' stroke-opacity='.5' stroke-width='.8'/%3E%3Cpath d='M6 6.5q3-2 6 0' fill='none' stroke='%23fffbe6' stroke-opacity='.7' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px #000)}
#heroHud #gold::after{content:attr(data-gold);font-size:15px;font-weight:800;letter-spacing:.04em;color:#f3e3a6;text-shadow:0 1px 0 #000,0 0 6px #ffcf6a40;font-variant-numeric:tabular-nums}

/* Key labels: spells, items and trinket use the same bottom-left key badge as the abilities. */
#heroHud .utilityButton kbd,#heroHud #gear .utilityButton kbd,#heroHud #inventory .slot kbd,#heroHud #recallButton kbd{position:absolute;left:0;right:auto;bottom:0;top:auto;width:auto;min-width:0;margin:0;padding:1px 3px;font:700 9px/11px system-ui,sans-serif;background:linear-gradient(#1c1f1a,#0a0c0a);color:var(--forge-brass-hi);border:0;border-top:1px solid var(--forge-brass-lo);border-right:1px solid var(--forge-brass-lo);border-radius:0 3px 0 0;z-index:3}
#heroHud .utilityCount{right:2px;bottom:1px;font-weight:800;color:#fff;text-shadow:0 1px 0 #000,0 0 2px #000;z-index:3}
/* Like LoL: only activatable items get a bright frame; passive items sit in a quiet recess. */
#heroHud #inventory .slot:has(img):not(:has(kbd)){border-color:#2b2a22;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #00000099}
#heroHud #inventory .slot:has(kbd){border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 0 2px var(--forge-brass),0 0 8px #f0cf7466,inset 0 0 0 1px #0009}
/* Battleground buffs (2026-10-21): chips above the hero bar on the right (status effects use the left). */
#heroHud #buffChips{position:absolute;right:16px;bottom:calc(100% + 8px);display:flex;gap:6px;pointer-events:none}
#heroHud #buffChips[hidden]{display:none}
#heroHud .buffChip{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 6px;border-radius:12px;background:rgba(12,10,8,.82);border:1px solid var(--buff);box-shadow:0 0 10px color-mix(in srgb,var(--buff) 45%,transparent);font:600 12px/1 system-ui,sans-serif;color:#f4ead6}
#heroHud .buffChip b{font-weight:700;color:var(--buff);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
#heroHud .buffChip i{font-style:normal;font-variant-numeric:tabular-nums}