/* REV25-10: integration of approved responsive prototype; no gameplay overlays obstruct input. */
:root{--r-gold:#d6b477;--r-ink:#101629}
body{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
#hud{align-items:flex-start}
.hud-left{display:flex;align-items:center;gap:9px!important;width:clamp(245px,32vw,370px)!important;padding:7px!important;border:1px solid #c6a77999!important;border-radius:11px!important;background:linear-gradient(110deg,#0c162de9,#14152cdd)!important;box-shadow:0 4px 14px #0a0716aa}
.hud-vitals{flex:1;min-width:0}.champion-portrait{display:block;width:60px;height:60px;object-fit:cover;border:2px solid var(--r-gold);border-radius:9px;box-shadow:0 0 8px #b98eff55}
.hud-left .hud-top{font-size:12px}.hud-left .hud-foot{font-size:10px}.hud-left .track{border:1px solid #61485a;position:relative;height:14px;border-radius:4px!important;background:#3e2030;overflow:hidden}
.hud-left .track.health>i{position:absolute;top:0;bottom:0;left:0;height:auto}
#hpghost{width:100%;background:linear-gradient(#ffe1ac,#ef9b73);transition:width .9s ease .22s;z-index:0}
#hpfill{z-index:1;background:linear-gradient(#ff9ca6,#de3a68 65%,#a71744);transition:width .16s linear}
.hud-left.critical #hpfill{background:linear-gradient(#fa6e62,#c51833);animation:criticalhp .6s ease-in-out infinite alternate}
@keyframes criticalhp{to{filter:brightness(1.55)}}
.hud-left .track.mana{height:9px;border-color:#3a80b3;background:#172d4c}.hud-left .track.mana i{background:linear-gradient(90deg,#247ede,#74d8ff);transition:width .14s linear}
.hud-left .track.xp{height:3px!important;border:0;margin-top:4px}
.hud-left .mana-label{margin-top:1px;font-size:9px}
#controls{right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:grid!important;grid-template-columns:repeat(3,clamp(53px,5vw,67px));grid-template-rows:repeat(2,clamp(53px,5vw,67px));gap:7px;align-items:center;pointer-events:none}
#controls .skill{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;position:relative;border:2px solid #b497d5;border-radius:50%!important;padding:2px!important;box-shadow:0 2px 11px #04020cb8;background:#1c1436;overflow:hidden;pointer-events:auto;touch-action:none}
#controls .skill .ability-icon{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;pointer-events:none}
#controls .skill .ability-key{position:absolute;left:1px;bottom:0;font-weight:900;color:#fff;font-size:10px;background:#111b37e8;border-radius:8px;padding:0 4px;text-shadow:0 1px 3px black}
#controls .skill small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06091aab;color:white;text-shadow:0 1px 3px black;font-size:11px!important;font-weight:bold;opacity:0;pointer-events:none}
#controls .skill.cooling small{opacity:1}#controls .skill.ready{border-color:#7fe5eb;box-shadow:0 0 9px #72dafa88}#controls .skill.ready small{opacity:0}
#controls .skill.insufficient{border-color:#ff5d78!important;filter:grayscale(.5)}
#controls .skill.aiming{box-shadow:0 0 15px #ffe09e}
#skillQ{grid-column:1;grid-row:2}#skillW{grid-column:2;grid-row:1}#skillE{grid-column:2;grid-row:2}#skillR{grid-column:3;grid-row:1;border-color:#e0bc75!important}
#build-hud{border:1px solid #a98d70a1;border-radius:11px;padding:5px;background:#0b1427df;backdrop-filter:blur(7px)}
#build-hud .item-slot{border-radius:6px!important;width:36px!important;height:36px!important;overflow:hidden}
#build-hud .item-slot img,.item-option .item-art{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
#build-hud .boot-slot{border-color:#dbb568!important}#build-hud .bag-open{border:1px solid #e0bc78bb;background:#342953!important;border-radius:8px}
#item-panel .item-option .item-art{width:50px;height:50px;margin-bottom:4px}
#item-panel .item-option .emoji{display:block;min-height:36px}
#item-panel .boot-heading{margin:15px 0 6px;color:#f6ddb1}
#item-panel .boot-list{display:flex;flex-wrap:wrap;gap:6px}.boot-choice{display:flex;gap:5px;align-items:center;font-size:12px!important}.boot-choice img{width:32px;height:32px;object-fit:cover}
@media(max-width:820px),(pointer:coarse){
 .hud-left{width:clamp(210px,45vw,300px)!important;gap:5px!important;padding:4px!important}.champion-portrait{width:44px;height:44px}.hud-left .hud-top{font-size:10px}.hud-left .hud-foot{font-size:9px}.hud-left .track{height:11px}.hud-left .track.mana{height:7px}.hud-left .mana-label{font-size:8px}
 #build-hud{bottom:max(84px,env(safe-area-inset-bottom) + 68px)!important;left:auto!important;right:max(6px,env(safe-area-inset-right))!important;padding:3px;max-width:130px}
 #build-hud .equip,#build-hud .boot-slot,#build-hud .consumables{display:none!important}
 #build-hud .bag-open{font-size:12px;padding:9px!important}
 #controls{grid-template-columns:repeat(3,clamp(48px,13vw,59px));grid-template-rows:repeat(2,clamp(48px,13vw,59px));gap:5px;bottom:max(9px,env(safe-area-inset-bottom))}
 #hud .chip{font-size:10px;padding:7px 5px}
}
@media(max-height:450px) and (orientation:landscape){.champion-portrait{width:42px;height:42px}#build-hud{bottom:90px!important}}
#controls.hidden{display:none!important}

#transform .skins button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
#transform .skins .transform-icon{width:64px;height:64px;object-fit:cover;border:2px solid #d9b87c;border-radius:8px;box-shadow:0 4px 12px #0007}
#chooseClassic .transform-icon{width:45px;height:45px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:10px}