/* PC match HUD: neutral charcoal instruments; spell and resource colors carry meaning. */
:root{--hud-base:#121212;--hud-raised:#292929;--hud-recess:#090909;--hud-key:#101010ed;--hud-cooldown:#080808d9}
#heroHud{--spell:48px;grid-template-columns:108px 64px 32px 216px 36px 158px;grid-template-rows:48px 31px;grid-template-areas:"numbers portrait passive abilities utilities gear" "numbers portrait vitals vitals utilities gear";gap:4px 8px;left:50%;right:auto;bottom:0;transform:translateX(-50%);padding:10px 12px 7px;border-color:#a38a52;background:linear-gradient(110deg,var(--hud-base),var(--hud-raised) 44%,var(--hud-base));box-shadow:inset 0 2px #d7be7833,inset 0 0 0 3px var(--hud-recess);border-radius:0;max-width:none}
#heroNumbers{grid-area:numbers;display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;align-self:center;padding-right:6px;border-right:1px solid #53604c;color:#e6d6a4;font-size:11px;font-variant-numeric:tabular-nums}
#heroNumbers>span{display:flex;align-items:center;gap:4px;line-height:15px}#heroNumbers svg{width:15px;height:15px;color:#a8ccc0;flex:none}#heroNumbers b{font-weight:500}
#portrait{grid-area:portrait;width:64px;height:64px;border-radius:50%;margin:0;align-self:center;border:2px solid #bda06a;background:var(--hud-raised);box-shadow:0 0 0 3px var(--hud-recess)}
#portraitImage{width:100%;height:100%;object-fit:cover;clip-path:circle(48%);border-radius:50%}#portrait b{right:-4px;bottom:-3px;min-width:22px;height:22px;line-height:18px;padding:0 3px;font-size:11px;background:var(--hud-base);border:1px solid #ccb373;border-radius:50%}#portraitFallback{font-size:36px}
#abilities{grid-area:abilities;display:flex;justify-content:initial;gap:8px;height:48px}#abilities .ability{width:48px;height:48px;border-color:#a48b55}#abilities .ability img{width:100%;height:100%}#abilities .ability kbd{font-size:9px;padding:1px 3px}#abilities .ability small{font-size:8px;right:2px;bottom:1px}#abilities .ability .cd{font-size:20px}
#passive{grid-area:passive;position:relative;width:32px;height:38px;align-self:center;padding:5px 3px 9px;border:1px solid #79764d;background:var(--hud-raised);color:#d1bb79}#passive>svg{width:25px;height:25px}.passivePips{position:absolute;left:3px;right:3px;bottom:3px;display:flex;gap:2px}.passivePips i{height:3px;flex:1;background:#425550}.passivePips i.filled{background:#d9c17e}
#vitals{grid-area:vitals;width:auto;align-self:start}#vitals .stats,#combatStats{display:none}#vitals .meter{height:16px;margin:0 0 2px}#vitals .meter strong{font-size:10px;line-height:14px}#vitals .meter.mana{height:11px}#vitals .meter.mana strong{font-size:9px;line-height:9px}
#portrait #experience{position:absolute;inset:-7px;width:auto;height:auto;border:0;border-radius:50%;background:none;overflow:visible;grid-area:auto;z-index:1}
#experience svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(90deg)}
#experience .xpTrack{fill:none;stroke:#29252e;stroke-width:3}
#experience .xpProgress{fill:none;stroke:#b18ad4;stroke-width:3;stroke-linecap:butt;stroke-dasharray:100;stroke-dashoffset:100}
#experienceFill{display:none}#experienceText{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#portrait b{z-index:2}

#skillLearning{grid-area:abilities;position:relative;top:-36px;align-self:start;display:grid;grid-template-columns:repeat(4,48px);gap:8px;height:22px;z-index:2}
#skillLearning button{height:22px;min-height:22px;padding:0;font-size:14px;line-height:20px;background:var(--hud-raised);border:1px solid #c2a866;color:#f6df9e}#skillLearning button:disabled{visibility:hidden;pointer-events:none}#skillLearning button:not(:disabled):hover{background:#3b3b3b}
#gear{grid-area:gear;width:158px;height:86px;display:grid;grid-template-columns:92px 28px 28px;grid-template-rows:60px 22px;gap:4px 6px;padding:0;border:0;align-self:center}#inventory{display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(2,28px);gap:4px;margin:0;grid-column:1;grid-row:1}.slot{width:28px;height:28px;font-size:15px}.slot img{width:100%;height:100%;object-fit:cover}
#shopOpen{grid-column:1/4;grid-row:2;margin:0;height:22px;flex-direction:row;white-space:nowrap;line-height:20px;padding:0 8px;align-items:center;justify-content:center;gap:6px;border:1px solid #625b3e;background:var(--hud-base);color:#d2ba78}#shopOpen:hover{background:#353535;border-color:#c7ad6e}#gold{font-size:11px;white-space:nowrap}#shopOpen kbd{display:none}
#recallButton{position:relative;grid-column:3;grid-row:1;align-self:end;width:28px;height:35px;overflow:hidden;padding:3px 3px 9px;border:1px solid #6a7f73;background:var(--hud-base);color:#94c8ca}#recallButton svg{width:21px;height:21px;position:relative;z-index:1}#recallButton kbd{position:absolute;bottom:0;left:0;right:0;font-size:8px;padding:0;margin:0;border:0;background:var(--hud-base);color:#d4ddd1;z-index:2}.recallProgress{position:absolute;inset:0;background:#47a7b166;transform:scaleY(0);transform-origin:bottom}#recallButton.recalling{border-color:#80d6d6}
#activeEffects{position:absolute;bottom:calc(100% + 7px);left:178px;display:flex;gap:4px;pointer-events:auto}#heroHud:has(#skillLearning button:not(:disabled)) #activeEffects{bottom:calc(100% + 35px)}.activeEffect{position:relative;width:28px;height:31px;background:var(--hud-base);border:1px solid #7b9f90;color:#acdcd4;display:grid;place-items:center;padding-bottom:7px}.activeEffect svg{width:21px;height:21px}.activeEffect b{position:absolute;bottom:0;left:0;right:0;text-align:center;background:var(--hud-recess);font-size:8px;font-weight:500;color:#edf0d9}.activeEffect.stun{border-color:#dbbb6f;color:#ecd084}
#hint{display:none}#chargeHud{bottom:170px;width:280px}#topRight{top:8px;right:10px;gap:4px;align-items:center}#topRight button{width:28px;height:26px;padding:4px;font-size:15px;border-color:#625f45;background:#121212dc}#topRight svg{width:17px;height:17px}#matchNumbers{display:flex;align-items:center;gap:16px;padding:4px 10px;font-size:11px;color:#dddfc9;background:#121212dc;font-variant-numeric:tabular-nums}#matchNumbers #time{font-size:12px;min-width:35px}#score{padding:6px 12px;gap:18px;font-size:10px}#matchRoom{font-size:10px;top:9px}#matchRoom button{font-size:9px;padding:4px 6px}
#lane{bottom:7px;right:8px;width:192px;height:106px;padding:7px 8px}#lane svg{height:69px}#lane small{font-size:8px}#performanceHud{top:42px;right:10px}
@media(max-width:1100px){#heroHud{left:10px;transform:none}#score{left:18px;top:38px;transform:none}#matchNumbers{gap:8px}#lane{width:164px}#matchRoom{max-width:calc(100vw - 350px)}}
@media(max-height:740px){#heroHud{padding-top:8px;padding-bottom:5px}#chargeHud{bottom:153px}}

#utilitySpells{grid-area:utilities;display:flex;flex-direction:column;gap:6px;align-self:center}.utilityButton{position:relative;display:grid;place-items:center;padding:3px 3px 10px;width:36px;height:39px;border:1px solid #a58e59;background:var(--hud-raised);color:#edda9a}.utilityButton svg{width:25px;height:25px}.utilityButton kbd{position:absolute;left:1px;bottom:0;font-size:9px;background:var(--hud-recess);border:0;padding:0 3px}.utilityCount{position:absolute;right:2px;bottom:0;font-size:9px;color:#e9ddbe}.utilityCooldown:not(:empty){position:absolute;inset:0;display:grid;place-items:center;background:var(--hud-cooldown);color:#f0ead6;font-size:14px}.utilityButton:disabled{opacity:.8}.utilityButton:not(:disabled):hover{border-color:#99e0d8;background:#3b3b3b}
#gear .utilityButton{width:28px;height:28px;padding:2px 2px 7px;grid-row:1;grid-column:2}#gear .utilityButton svg{width:19px;height:19px}#gear .utility-4{align-self:start}#gear .utility-5{align-self:end}#gear .utilityButton kbd{font-size:8px;padding:0 2px}#gear .utilityCooldown{font-size:11px}
#visionShop{margin-top:24px;border-top:1px solid #536258;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;font-size:11px}#visionShop>strong{width:100%;font-size:10px;color:#cebd8d}#visionShop button{display:flex;align-items:center;gap:8px;padding:8px;text-align:left;background:#112c33;border:1px solid #67765e;color:#dfd9be;font-size:11px}#visionShop button svg{width:24px;height:24px}#visionShop small{display:block;font-size:9px;color:#aac4bd;margin-top:4px}#visionShop button[aria-pressed=true]{border-color:#81cfc5}#visionShop p{font-size:11px;line-height:1.5;color:#b8ccc4;margin:4px 0}#visionShop button:disabled{opacity:.65}
.bar.ward,.bar.controlWard{width:45px}.bar.ward .track,.bar.controlWard .track{height:5px}.bar.ward b,.bar.controlWard b{font-size:9px}

/* World-space nameplates: fixed HP units, rank badge and a quiet mana strip. */
.bar.hero{width:128px}.bar.hero .barName{font-size:10px;line-height:13px;margin:0 0 2px;text-align:center;font-weight:500;white-space:nowrap}
.bar.hero .barBody{width:100%;display:flex;align-items:stretch;gap:2px;padding:2px;background:var(--hud-recess);border:1px solid #9c9f83;box-shadow:0 1px 2px #0009}
.bar.hero .levelBadge{flex:none;width:18px;display:grid;place-items:center;background:linear-gradient(var(--hud-raised),var(--hud-base));border:1px solid #8d9b8c;color:#f4ecd6;font-size:10px;line-height:16px;font-variant-numeric:tabular-nums}
.bar.hero .barMeters{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bar.hero .track{height:10px;border:0;background:var(--hud-base);box-shadow:none;overflow:hidden}
.bar.hero .track i{height:100%;background:linear-gradient(#76c5c5,#479c9f 45%,#368084)}.bar.hero.self .track i{background:linear-gradient(#92ce70,#65ab48 45%,#40832e)}.bar.hero.enemy .track i{background:linear-gradient(#e58b7d,#c75850 45%,#a13b39)}
.bar.hero .track:after{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--health-major-step) - 2px),#061111 calc(var(--health-major-step) - 2px),#061111 var(--health-major-step)),repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--health-step) - 1px),#061111c9 calc(var(--health-step) - 1px),#061111c9 var(--health-step));background-size:100% 100%,100% 65%;background-repeat:no-repeat}
.bar.hero .resourceTrack{display:block;height:3px;width:100%;background:#111f29;overflow:hidden}.bar.hero .resourceTrack i{display:block;height:100%;background:linear-gradient(#83c9ef,#337fb1)}
#hpFill{background:linear-gradient(#79ba5d,#47913a 50%,#306c2b)}#manaFill{background:linear-gradient(#64aed8,#34779f)}

/* Painted spell art shares QWER's materials; all labels remain real UI. */
#passive{overflow:hidden}.passiveImage,.utilityImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.passivePips{z-index:1;left:0;right:0;bottom:0;padding:3px;background:var(--hud-key)}.passivePips i{box-shadow:0 0 0 1px var(--hud-recess)}
.utility-d,.utility-f{overflow:hidden}.utilityButton:has(.utilityImage) kbd{z-index:1;background:var(--hud-key);color:#f3e9c9}.utilityButton:has(.utilityImage) .utilityCooldown{z-index:2}

.utilitySlot{display:block;width:36px;height:39px;position:relative}.utilitySlot:focus-visible{outline:2px solid #edd99b;outline-offset:2px}
#summonerPicker{margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid #88734266}#summonerPicker header{display:flex;flex-direction:column;gap:4px}#summonerPicker header b{font-size:11px;letter-spacing:1.5px;color:#d4bd81}#summonerPicker header span{font-size:11px;color:#a9b8b9}.summonerSlots{display:flex;gap:8px;margin:10px 0}.summonerSlots button{display:flex;gap:8px;align-items:center;background:#141719;border:1px solid #555;padding:5px 8px;color:#e7ddc4;font-size:12px}.summonerSlots img{width:30px;height:30px}.summonerSlots [aria-pressed=true]{border-color:#e3c780}.summonerChoices{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.summonerChoices button{padding:3px;background:#101214;color:#bcbcbc;border:1px solid transparent;min-width:0}.summonerChoices img{width:100%;max-width:42px;aspect-ratio:1}.summonerChoices span{display:block;font-size:10px}.summonerChoices [aria-pressed=true]{border-color:var(--spell-color);color:var(--spell-color);box-shadow:0 0 9px color-mix(in srgb,var(--spell-color) 25%,transparent)}.summonerDescription{font-size:11px!important;line-height:1.5!important;min-height:48px;margin:8px 0 0}.activeEffect.ignite{color:#ed755b}

.activeEffect>img{width:19px;height:19px;object-fit:cover}

/* Neutral substrates also cover inherited QWER, empty slots and inspection UI. */
#heroHud .ability{background:var(--hud-recess)}
#heroHud .ability kbd,#heroHud .ability small{background:var(--hud-key)}
#heroHud .ability .cd{background:#08080888}
#heroHud .slot{background:radial-gradient(var(--hud-raised),var(--hud-recess));box-shadow:inset 0 0 0 2px var(--hud-recess)}
#heroHud .meter{background:var(--hud-recess);border-color:#080808}
#abilityTooltip{background:#161616f7}
#lane{background:linear-gradient(var(--hud-raised),var(--hud-base));box-shadow:inset 0 0 0 3px var(--hud-recess),0 0 0 2px #222}
#score{background:#121212e8}
#chargeHud{background:#121212eb}

#cameraLock{position:fixed;right:12px;bottom:120px;width:32px;height:30px;padding:0;z-index:20;background:#111a1d;color:#adaba2;border:1px solid #756443;font-size:20px;pointer-events:auto}#cameraLock[aria-pressed="true"]{color:#e6d39b;border-color:#c4ae72;background:#213538}

.meter[data-resource="stacks"]{position:relative}
.meter[data-resource="stacks"] #manaFill{background:linear-gradient(#efd8a3,#a17a37)}
.meter[data-resource="stacks"]::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#161817;pointer-events:none}
.activeEffect.breech{min-width:52px;color:#eed293}
.activeEffect.breech b{font-size:9px}

#abilities .abilityStock{position:absolute;right:1px;top:1px;min-width:14px;padding:1px 3px;background:var(--hud-key);color:#f2dfad;font:600 10px/12px system-ui;z-index:2}