.masteryPanel{display:flex;align-items:center;gap:8px;padding:9px;margin:8px 0;background:#09101c;border:1px solid #35405a;border-left:4px solid #35405a;font-size:10px;line-height:1.5;min-width:0}
.masteryTier1{border-color:#976239;background:linear-gradient(90deg,#352619,#09101c 75%)}
.masteryTier2{border-color:#9caecb;background:linear-gradient(90deg,#26344c,#09101c 75%)}
.masteryTier3{border-color:#e8bc48;background:linear-gradient(90deg,#43371a,#09101c 75%)}
.masteryCopy{display:flex;flex-direction:column;min-width:0;flex:1;overflow-wrap:anywhere}
.masteryCopy b{color:#e3eaf8;font-size:10px}.masteryCopy span{color:#c0c9de;font-size:9px}.masteryCopy small{color:#a0abc4;font-size:8px}.masteryCopy strong{color:#ffe08b;font-size:9px}
.masteryCopy progress{width:100%;height:5px;margin:5px 0;accent-color:#73d7df;background:#263147}
.masterySprite,.masteryUnranked{display:block;position:relative;width:48px;height:48px;flex:0 0 48px;text-align:center;line-height:48px;color:#d9e4fc;font-size:25px;image-rendering:pixelated}
.masterySprite:after{content:'';position:absolute;inset:0;background-image:url('../assets/mastery/mastery-tiers.png');background-size:300% 100%;background-repeat:no-repeat;image-rendering:pixelated}
.masterySprite1:after{background-position:0 50%}.masterySprite2:after{background-position:50% 50%}.masterySprite3:after{background-position:100% 50%}
@media(max-width:600px){.masteryPanel{padding:6px;gap:5px}.masterySprite,.masteryUnranked{width:36px;height:36px;flex-basis:36px;line-height:36px}}
.masterySkin{display:flex;align-items:center;gap:8px;padding:8px;margin:8px 0;border:1px solid #a37c32;background:#17180fec;color:#ffe1a0;font:11px/1.4 Arial,sans-serif;min-width:0}
.masterySkinArt{width:72px;height:72px;flex:0 0 72px;background-repeat:no-repeat;image-rendering:pixelated}
.masterySkinCopy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.masterySkinCopy b{font-size:11px}.masterySkinCopy span{color:#fff0cc}.masterySkinCopy small{color:#cfc4ac;font-size:10px}
.masterySkinCopy progress{display:block;width:100%;height:7px;accent-color:#efbd4a}.masterySkinCopy .btn{align-self:flex-start;margin-top:4px;font-size:10px}.masterySkinCopy .btn:disabled{opacity:.65;cursor:default}
#masterySkinHud[hidden]{display:none}.masterySkin.compact{padding:4px 5px;margin:5px 0 0;gap:5px}.compact .masterySkinArt{width:36px;height:36px;flex-basis:36px}.compact .masterySkinCopy{gap:1px}.compact .masterySkinCopy b{font-size:9px}.compact .masterySkinCopy span,.compact .masterySkinCopy small{font-size:10px}.compact .masterySkinCopy progress{height:5px;margin:1px 0}
@media(max-width:600px),(max-height:500px){.masterySkin.compact{padding:3px;margin-top:3px}.compact .masterySkinArt{width:28px;height:28px;flex-basis:28px}.compact .masterySkinCopy b{font-size:8px}.compact .masterySkinCopy span,.compact .masterySkinCopy small{font-size:9px}}
.masterySkinCopy{overflow-wrap:anywhere}
.masterySkinMobile{display:none;}
/* Cosmetics remain readable without turning combat vitals into a reward card. */
body.touch #masterySkinHud .masterySkin{padding:3px;margin:0;gap:5px;}
body.touch #masterySkinHud .masterySkinArt{width:24px;height:24px;flex-basis:24px;}
body.touch #masterySkinHud .masterySkinCopy>b,
body.touch #masterySkinHud .masterySkinCopy>span:not(.masterySkinMobile),
body.touch #masterySkinHud .masterySkinCopy>small{display:none;}
body.touch #masterySkinHud .masterySkinMobile{display:block;font-size:10px;white-space:nowrap;}
body.touch #masterySkinHud progress{height:4px;margin:2px 0 0;}
.masteryMatchReward{margin:10px 0;border:2px solid #a37c32;text-align:left}
.masteryMatchReward .masterySkinCopy b{font-size:15px;color:#ffe08b}
.masteryMatchReward .masterySkinCopy strong{font-size:11px;color:#ffe08b}
@media(max-width:600px){.masteryMatchReward .masterySkinArt{width:48px;height:48px;flex-basis:48px}.masteryMatchReward .masterySkinCopy b{font-size:13px}}
@media(max-width:900px),(max-height:560px){body.touch #heroDetail .masterySkin{flex-direction:column;align-items:stretch}body.touch #heroDetail .masterySkinArt{align-self:center}body.touch #heroDetail .masterySkinCopy .btn{max-width:100%;white-space:normal}}