/* Personal control deliberately has its own chrome; board editing remains intact. */
body.personal-control-mode .left,body.personal-control-mode .right,body.personal-control-mode .tools,body.personal-control-mode .board-header,body.personal-control-mode .director-action-dock,body.personal-control-mode #directorActionDock,body.personal-control-mode #floatingSkills,body.personal-control-mode .hero-level-hotspot,body.personal-control-mode #heroBarEditor,body.personal-control-mode .canvas-label,body.personal-control-mode .timeline{display:none!important}
body.personal-control-mode .header-actions{visibility:hidden;pointer-events:none}
body.personal-control-mode .board-wrap{inset:0!important}
body.personal-control-mode .minimap-wrap{right:12px!important;bottom:12px!important;width:clamp(220px,15vw,300px)!important;pointer-events:none}
body.personal-control-mode #minimap{height:auto!important;aspect-ratio:1;}
body.personal-control-mode #board{touch-action:none}
#personalControl[hidden],#personalControl [hidden]{display:none!important}
#personalControl{position:absolute;inset:0;z-index:25;pointer-events:none;color:#eaf0f5;font-family:Inter,"Microsoft YaHei",sans-serif}
#personalControl button{pointer-events:auto;cursor:pointer}
.personal-top{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:40px;padding:10px 12px 10px 18px;background:rgba(8,17,26,.94);border:1px solid #46525c;border-radius:10px;box-shadow:0 8px 28px #0005;max-width:calc(100% - 28px);white-space:nowrap}
.personal-top>div,.personal-top nav{display:flex;align-items:center;gap:12px}
.personal-top b{font-size:14px;color:#efd6a3;letter-spacing:1px}
#personalHeroName{font-size:12px;color:#a9b9c8}
.personal-top button{font-size:12px;background:transparent;border:1px solid #34434f;padding:7px 10px;border-radius:6px;color:#d5e0e9}
.personal-top button:hover{background:#243846;border-color:#cbb17c}
.personal-top kbd{margin-left:5px;color:#d4b77c;font:11px monospace}
.personal-dot{width:6px;height:6px;display:inline-block;background:#7de6b6;border-radius:50%;box-shadow:0 0 8px #7de6b666}
.personal-portrait{display:block;width:48px;height:48px;flex-shrink:0;background-color:#1a2935;background-size:480px auto;border:1px solid #c1a671;border-radius:5px}
#personalCommand{position:absolute;left:50%;bottom:157px;transform:translateX(-50%);padding:7px 14px;background:#07111bc9;border-radius:5px;font-size:12px;color:#e2d5b5;text-align:center;max-width:90%;text-shadow:0 1px 2px #000}
#personalHud{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:780px;max-width:calc(100% - 40px);padding:17px 18px 32px;border:1px solid #8e7a53;border-top:2px solid #cab388;border-radius:12px 12px 5px 5px;background:linear-gradient(150deg,#142431f5,#07121bf7);box-shadow:0 12px 40px #0009,inset 0 0 0 4px #0710198c;pointer-events:auto}
.personal-identity{position:relative;margin-left:1px}
.personal-identity .personal-portrait{width:48px;height:48px;background-size:480px auto;border:2px solid #c5ab75;border-radius:50%;transform:scale(1.2);margin:8px}
.personal-level{position:absolute;bottom:0;right:-3px;background:#121c24;border:1px solid #c5ab75;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;color:#f2dfae;font-size:12px}
.personal-vitals{min-width:160px;flex:1}
.personal-vitals>b{font-size:12px;color:#eee1c6;display:block;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.personal-health,.personal-resource{height:17px;position:relative;background:#050c13;border:1px solid #071019;overflow:hidden;border-radius:2px}
.personal-health i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#75d877,#278748);box-shadow:inset 0 1px #fff3}
.personal-health span,.personal-resource span{position:relative;display:block;text-align:center;font-size:10px;line-height:15px;text-shadow:0 1px 2px #000;color:#fff}
.personal-resource{height:13px;background:linear-gradient(#408cbb,#205375);margin-top:3px}
.personal-resource span{line-height:11px;font-size:9px}
.personal-vitals small{display:block;margin-top:6px;font-size:9px;color:#9cabbc;white-space:nowrap}
.personal-actions{width:248px;flex-shrink:0}
.personal-skills{display:flex;gap:6px}
#personalHud .skill-choice{display:flex;align-items:center;justify-content:center;position:relative;width:55px;height:51px;min-width:0;padding:2px;border:1px solid #776847;border-radius:4px;background:#091824;transition:border-color .12s,box-shadow .12s}
#personalHud .skill-copy{display:none}
#personalHud .skill-icon-clip{width:44px;height:44px;transform:scale(.9)}
#personalHud .skill-choice.active{border-color:#9ae4ff;box-shadow:0 0 0 1px #9ae4ff,0 0 16px #6bd2f133}
#personalHud .skill-choice:hover{border-color:#e8c987}
.personal-actions>small{display:block;font-size:9px;color:#a4b6c6;margin-top:7px;white-space:nowrap}
.personal-equipment{display:grid;grid-template-columns:repeat(3,28px);gap:4px;position:relative;padding-right:31px}
.personal-equipment>span{display:block;width:28px;height:28px;background:#07111b;border:1px solid #4e4937;border-radius:3px;overflow:hidden}
.personal-equipment>span:last-child{position:absolute;right:0;top:16px}
.personal-equipment img{width:100%;height:100%;object-fit:cover}
.personal-footnote{position:absolute;bottom:8px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:9px;color:#8898a6;gap:10px}
@media(max-width:1100px){#personalHud{left:14px;transform:none;width:700px;max-width:calc(100% - 255px);gap:10px}.personal-vitals{min-width:115px}.personal-equipment{display:none}.personal-top{gap:18px}.personal-vitals small{font-size:8px}.personal-actions{width:232px}#personalHud .skill-choice{width:51px}#personalCommand{bottom:160px}}
@media(max-width:820px){#personalHud{left:10px;right:10px;bottom:10px;width:auto;max-width:none;padding:12px 12px 30px;gap:10px}.personal-top{top:10px;width:calc(100% - 20px);max-width:none;gap:8px;flex-wrap:wrap;padding:9px 12px}.personal-top>div{gap:8px}.personal-top nav{gap:5px}.personal-top button{font-size:10px;padding:5px 7px}#personalHeroName{font-size:10px}.personal-actions{width:208px}#personalHud .skill-choice{width:46px;height:46px}.personal-vitals{min-width:70px}.personal-vitals small{white-space:normal;line-height:1.5}.personal-actions>small{white-space:normal;line-height:1.5}.personal-footnote{font-size:8px}body.personal-control-mode .minimap-wrap{bottom:165px!important;width:clamp(170px,27vw,220px)!important}#personalCommand{bottom:165px;left:10px;transform:none;max-width:calc(100% - 180px);font-size:10px}.personal-identity{display:none}}
@media(prefers-reduced-motion:reduce){#personalHud .skill-choice{transition:none}}
.personal-wards{display:flex;gap:5px;margin-top:7px}
.personal-wards button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;flex:1;padding:3px;background:#152a35;border:1px solid #3d5664;border-radius:4px;color:#bbd1df;font-size:10px}
.personal-wards img{width:20px;height:20px;object-fit:contain}
.personal-wards kbd{font:10px monospace;color:#e6d7ae}
.personal-wards button.active{border-color:#9ae4ff;background:#244c59;box-shadow:0 0 8px #76dfff33}
body.personal-control-mode.personal-camera-free .minimap-wrap{pointer-events:auto}
#personalKeyHelp{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:460px;max-width:calc(100% - 24px);padding:18px;border:1px solid #586776;border-radius:10px;background:#091722f5;box-shadow:0 15px 50px #0008;pointer-events:auto}
#personalKeyHelp>div{display:flex;align-items:center;justify-content:space-between;color:#e9d4a4}
#personalKeyHelp button{font-size:11px;padding:5px 9px}
#personalKeyHelp dl{display:grid;grid-template-columns:156px 1fr;gap:10px 12px;margin:18px 0;font-size:11px}
#personalKeyHelp dt{color:#e6d9ba;font-family:monospace}
#personalKeyHelp dd{margin:0;color:#bbcad7}
#personalKeyHelp p{font-size:10px;line-height:1.7;color:#8fa5b5;margin:0}
#personalCommand{bottom:193px}
@media(max-width:820px){#personalCommand{bottom:200px}.personal-wards button{font-size:9px;gap:3px}.personal-wards img{width:16px;height:16px}body.personal-control-mode .minimap-wrap{bottom:200px!important}#personalKeyHelp{top:145px;padding:14px}#personalKeyHelp dl{grid-template-columns:123px 1fr;font-size:10px}}

.view-modes{display:flex;gap:3px;align-items:center}.camera-controls{z-index:30;white-space:nowrap;max-width:calc(100% - 24px)}.camera-controls .view-modes button{font-size:12px;padding:6px 9px;border-radius:5px;white-space:nowrap}.view-modes kbd{font:10px monospace;color:#8fa7b7;margin-left:5px}.view-modes button[aria-pressed=true]{background:#234453;border-color:#719993;color:#f1dfb4}.view-modes button[aria-pressed=true] kbd{color:#e2c383}.camera-extra{position:relative;font-size:11px}.camera-extra summary{list-style:none;cursor:pointer;padding:7px;color:#adbfcc}.camera-extra>div{position:absolute;bottom:38px;right:0;display:flex;flex-direction:column;gap:4px;min-width:130px;padding:7px;background:#0c1d2bf5;border:1px solid #40586b;border-radius:7px;box-shadow:0 8px 25px #0008}.camera-extra:not([open])>div{display:none}.camera-controls>span{min-width:32px}.personal-control-mode .camera-controls{display:flex!important}.personal-control-mode .camera-controls>button,.personal-control-mode .camera-controls>span,.personal-control-mode .camera-extra{display:none}.personal-control-mode #personalHud{bottom:64px}.personal-control-mode #personalCommand{bottom:243px}
@media(max-width:820px){.camera-controls{flex-wrap:wrap;justify-content:center;gap:2px;padding:4px;max-width:calc(100% - 16px)}.camera-controls .view-modes button{font-size:10px;padding:6px}.view-modes kbd{font-size:9px;margin-left:2px}.personal-control-mode .camera-controls{bottom:10px}.personal-control-mode #personalHud{bottom:59px}body.personal-control-mode .minimap-wrap{bottom:249px!important}.personal-control-mode #personalCommand{bottom:249px}}
/* Shared champion HUD: all board perspectives use the same game-style layout. */
#personalHud.champion-hud[hidden],#personalHud.champion-hud [hidden]{display:none!important}
body #personalHud.champion-hud,body.personal-control-mode #personalHud.champion-hud{position:absolute;z-index:28;bottom:4px;left:50%;right:auto;transform:translateX(-50%);display:grid;grid-template-columns:104px 72px minmax(0,1fr) 130px;gap:10px;align-items:center;width:760px;max-width:calc(100% - 32px);padding:9px 12px 24px;border:1px solid #76643f;border-top:2px solid #b09b64;border-radius:5px 5px 0 0;background:linear-gradient(115deg,#0b171cfa,#071218fc 45%,#101c21fc);box-shadow:0 0 0 2px #040b0f,0 -5px 20px #0004,inset 0 0 0 3px #1b2a2c;pointer-events:auto;color:#e1dfce;font-family:Inter,"Microsoft YaHei",sans-serif}
.hud-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#personalHud .hud-combat-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px 9px;padding:0 9px 0 0;margin:0;border-right:1px solid #66593680;font-size:11px;font-variant-numeric:tabular-nums}
.hud-combat-stats>div{display:flex;align-items:center;gap:5px;min-width:0}.hud-combat-stats dt{display:flex;align-items:center}.hud-combat-stats svg{width:12px;height:12px;stroke:#bfaa72;stroke-width:1.7}.hud-combat-stats dd{margin:0;white-space:nowrap}.hud-combat-stats>div:nth-child(2) svg{stroke:#82bce2}.hud-combat-stats>div:nth-child(3) svg{stroke:#d2ad6d}.hud-combat-stats>div:nth-child(4) svg{stroke:#76b3d9}.hud-combat-stats>div:nth-child(5) svg{stroke:#d5c575}.hud-combat-stats>div:nth-child(8) svg{stroke:#94cbb5}
#personalHud .personal-identity{position:relative;align-self:center;width:68px;height:77px;margin:0;display:block}#personalHud .personal-portrait{position:absolute;left:4px;top:3px;display:block;width:48px;height:48px;background-size:480px auto;border:1px solid #ad9763;border-radius:50%;transform:scale(1.24);transform-origin:top left;margin:0;box-shadow:0 0 0 3px #0a1519,0 0 0 4px #6c613d}
#personalHud .personal-level{position:absolute;right:0;bottom:15px;display:grid;place-items:center;width:23px;height:23px;min-width:0;min-height:0;padding:0;border:1px solid #c0a66c;border-radius:50%;background:#09151a;color:#f6e0aa;font-size:11px;line-height:1;box-shadow:0 0 0 2px #061015;cursor:pointer}#personalHud .personal-level:disabled{opacity:1;cursor:default}.hud-champion-name{position:absolute;bottom:0;left:-3px;right:-3px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:10px;color:#d8c799}
#personalHud .hud-core{min-width:0;display:grid;gap:3px}.hud-ability-row{display:flex;gap:7px;align-items:center;padding-bottom:7px;min-width:0}#personalHud .personal-skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0;flex:1}
#personalHud .skill-choice{display:block;position:relative;min-width:0;width:auto;height:46px;padding:0;border:1px solid #8d7b4f;border-radius:1px;background:#060e16;box-shadow:inset 0 0 0 2px #111f29;overflow:visible}#personalHud .skill-choice:hover{border-color:#eed9a6}#personalHud .skill-copy{display:none}#personalHud .skill-icon-clip{position:absolute;width:44px;height:44px;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(.9);transform-origin:center}#personalHud .skill-choice.active{border-color:#9bdcde;box-shadow:0 0 0 1px #9bdcde,0 0 9px #60bac455}
.hud-skill-ranks{display:flex;position:absolute;bottom:-6px;left:4px;right:4px;gap:3px;justify-content:center;height:3px}.hud-skill-ranks i{display:block;flex:1;max-width:7px;background:#273236;border:1px solid #4d503c}.hud-skill-ranks .learned{background:#d8bc72;border-color:#a58c4e}
.hud-summoners{display:grid;gap:3px;align-self:stretch;width:24px;flex-shrink:0}.hud-summoners span{display:grid;place-items:center;background:#101c22;border:1px solid #465153;color:#70818c;font:10px monospace;border-radius:1px}
#personalHud .personal-health{position:relative;height:17px;border:1px solid #253b29;border-top-color:#5b8244;border-radius:0;background:#030c08;overflow:hidden}#personalHud .personal-health i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#a3dc57,#5a9c32 45%,#376b20);box-shadow:inset 0 1px #d4ef9955}#personalHud .personal-health span{display:block;position:relative;text-align:center;font-size:10px;font-weight:600;line-height:15px;text-shadow:0 1px 2px #000;color:#f8f8e8}
#personalHud .personal-resource{height:13px;margin:0;border:1px solid #294957;border-radius:0;background:linear-gradient(#347fa5,#1d526e);overflow:hidden}#personalHud .personal-resource span{display:block;text-align:center;font-size:9px;line-height:11px;color:#d7e7ed;text-shadow:0 1px #000}#personalHud .personal-resource.energy{background:linear-gradient(#b7ab35,#777027);border-color:#706a31}#personalHud .personal-resource.rage{background:linear-gradient(#9b4d3b,#582722);border-color:#7f4c3d}#personalHud .personal-resource.none{background:#162027;border-color:#2e3a3d;color:#8b9a9e}
.hud-inventory{min-width:0;align-self:center}#personalHud .personal-equipment{display:grid;grid-template-columns:repeat(3,29px) 29px;grid-template-rows:repeat(2,29px);gap:3px;padding:0;position:relative}#personalHud .personal-equipment button{display:block;position:relative;min-width:0;width:29px;height:29px;min-height:0;aspect-ratio:1;padding:0;border:1px solid #6b623e;border-radius:1px;background:#030c12;overflow:hidden}#personalHud .personal-equipment button:nth-child(4){grid-column:1;grid-row:2}#personalHud .personal-equipment button:nth-child(5){grid-column:2;grid-row:2}#personalHud .personal-equipment button:nth-child(6){grid-column:3;grid-row:2}#personalHud .personal-equipment button:last-child{position:relative;right:auto;top:auto;grid-column:4;grid-row:1 / 3;align-self:center;border-radius:50%}#personalHud .personal-equipment img{display:block;width:100%;height:100%;object-fit:cover}#personalHud .personal-equipment kbd{position:absolute;right:1px;bottom:0;color:#c5b794;background:#071017c4;padding:0 1px;font:8px monospace;line-height:10px}.hud-inventory-meta{display:flex;align-items:center;justify-content:center;gap:5px;color:#cbb676;height:17px;font-size:10px;border:1px solid #514b32;background:#09141b;margin-top:3px}.hud-inventory-meta svg{width:12px;height:12px;stroke-width:1.7}
#personalHud .personal-footnote{position:absolute;bottom:5px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;color:#8b9b9e;font-size:9px;line-height:12px}#personalHud .personal-footnote>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.personal-control-mode #personalHud .personal-footnote{right:126px}body.personal-control-mode #personalHud .personal-footnote>span:last-child{display:none}
#personalHud .personal-wards{position:absolute;right:12px;bottom:3px;display:flex;gap:3px;margin:0;width:104px;height:20px}#personalHud .personal-wards button{height:20px;padding:1px 3px;gap:3px;border-radius:2px;border-color:#435552;background:#112429;font-size:9px}#personalHud .personal-wards img{width:14px;height:14px}#personalHud .personal-wards kbd{font-size:9px}
.champion-hud-active .camera-controls{bottom:calc(var(--champion-hud-height,115px) + 17px)!important}body.champion-hud-active #personalCommand{bottom:calc(var(--champion-hud-height,115px) + 66px)}#personalHud.hud-dead .personal-portrait{filter:grayscale(1);opacity:.65}.champion-hud-active .canvas-label{display:none}
@media(min-width:821px) and (max-width:1100px){body #personalHud.champion-hud,body.personal-control-mode #personalHud.champion-hud{left:12px;transform:none;width:calc(100% - 258px);max-width:none;grid-template-columns:78px 58px minmax(0,1fr) 102px;gap:7px;padding-left:8px;padding-right:8px}#personalHud .hud-combat-stats{font-size:10px;gap:6px;padding-right:5px}.hud-combat-stats svg{width:10px;height:10px}.hud-combat-stats>div{gap:3px}#personalHud .personal-identity{width:54px;height:67px}#personalHud .personal-portrait{transform:scale(1.02)}#personalHud .personal-level{right:-3px;bottom:13px;width:20px;height:20px}#personalHud .personal-equipment{grid-template-columns:repeat(4,23px);grid-template-rows:repeat(2,23px);gap:2px}#personalHud .personal-equipment button{width:23px;height:23px}#personalHud .personal-skills{gap:4px}.hud-ability-row{gap:4px}#personalHud .skill-choice{height:39px}#personalHud .skill-icon-clip{transform:translate(-50%,-50%) scale(.74)}.hud-summoners{width:18px}}
@media(max-width:820px){body #personalHud.champion-hud,body.personal-control-mode #personalHud.champion-hud{left:10px;right:10px;bottom:4px;width:auto;max-width:none;transform:none;grid-template-columns:48px minmax(0,1fr) 94px;gap:6px;padding:6px 8px 23px}#personalHud .hud-combat-stats{grid-column:1 / -1;grid-row:1;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:0 0 5px;border-right:0;border-bottom:1px solid #66593680;font-size:9px}.hud-combat-stats>div{gap:3px;justify-content:center}.hud-combat-stats svg{width:10px;height:10px}#personalHud .personal-identity{grid-column:1;grid-row:2;width:44px;height:61px}#personalHud .personal-portrait{left:0;top:0;transform:scale(.82)}#personalHud .personal-level{right:-1px;bottom:12px;width:18px;height:18px;font-size:9px}.hud-champion-name{font-size:8px;bottom:0}#personalHud .hud-core{grid-column:2;grid-row:2}#personalHud .hud-inventory{grid-column:3;grid-row:2}#personalHud .personal-skills{gap:3px}#personalHud .skill-choice{height:34px}#personalHud .skill-icon-clip{transform:translate(-50%,-50%) scale(.67)}.hud-ability-row{gap:4px;padding-bottom:5px}.hud-summoners{width:16px;gap:2px}.hud-summoners span{font-size:8px}.hud-skill-ranks{gap:2px;left:2px;right:2px;bottom:-5px;height:2px}.hud-skill-ranks i{max-width:5px}#personalHud .personal-health{height:14px}#personalHud .personal-health span{font-size:9px;line-height:12px}#personalHud .personal-resource{height:12px}#personalHud .personal-resource span{font-size:8px;line-height:10px}#personalHud .personal-equipment{grid-template-columns:repeat(4,21px);grid-template-rows:repeat(2,21px);gap:2px}#personalHud .personal-equipment button{width:21px;height:21px}#personalHud .personal-equipment kbd{font-size:7px;line-height:8px}.hud-inventory-meta{height:15px;font-size:8px;gap:3px}.hud-inventory-meta svg{width:10px;height:10px}#personalHud .personal-footnote{font-size:8px;left:8px;right:8px;bottom:4px}#personalHud .personal-wards{right:8px;bottom:2px;width:98px}body.champion-hud-active .minimap-wrap{bottom:calc(var(--champion-hud-height,115px) + 72px)!important}body.champion-hud-active .camera-controls{bottom:calc(var(--champion-hud-height,115px) + 17px)!important}}
/* Narrow screens use the responsive HUD offset above immediately, before observer delivery. */
@media(min-width:821px){body.champion-hud-active .minimap-wrap{bottom:var(--hud-minimap-offset,14px)!important}}
#personalHud .skill-choice{min-height:0;padding:0!important}#personalHud .skill-icon-atlas{width:48px;height:48px;transform:scale(.916667);transform-origin:0 0}

/* Keep comparison actions above both the shared HUD and the view selector. */
body.champion-hud-active #libraryCompareBar{bottom:calc(var(--champion-hud-height,115px) + 76px)}

/* Persistent possession rail: switch heroes without opening a picker. */
#personalRoster{position:absolute;left:12px;top:90px;bottom:calc(var(--champion-hud-height,129px) + 88px);width:146px;display:flex;flex-direction:column;gap:7px;padding:9px 5px;background:linear-gradient(180deg,#0b1c27ed,#08131bd9);border:1px solid #405460;border-radius:9px;box-shadow:0 6px 20px #0004;pointer-events:auto}
.personal-roster-heading{text-align:center;font-size:11px;letter-spacing:2px;color:#c9d7dc}#personalRoster>small{text-align:center;color:#91a7b3;font-size:9px;white-space:nowrap}
#personalHeroList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:start;gap:8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
.personal-roster-team{min-width:0;display:flex;flex-direction:column;gap:7px}.personal-roster-team h3{margin:0;padding:0;border:0;font-size:10px;line-height:18px;text-align:center;white-space:nowrap;color:#7acdf4}.personal-roster-team.red h3{color:#f09cab}.personal-team-heroes{display:flex;flex-direction:column;gap:7px}
#personalHeroList button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;width:100%;padding:5px 2px;background:#102330;border:1px solid #375c71;border-radius:6px;color:#cbd9e3;box-shadow:inset 2px 0 #54b9e8;transition:border-color .12s,background .12s}
#personalHeroList button.red{border-color:#70424b;box-shadow:inset 2px 0 #df6b80}#personalHeroList button:hover:not(:disabled){background:#213b4a;border-color:#b9a67c}#personalHeroList button:focus-visible{outline:2px solid #e7ca89;outline-offset:-2px}
#personalHeroList button[aria-pressed=true]{border-color:#ead092;background:#314139;box-shadow:inset 0 0 0 1px #bea66a,0 0 9px #dfb75a30;color:#fff2c9}
#personalHeroList .personal-portrait{margin:0;width:48px;height:48px;border-radius:4px;transform:none}#personalHeroList .personal-roster-name{font-size:10px;line-height:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#personalHeroList .personal-roster-status{font-size:9px;line-height:12px;color:#8abed8}#personalHeroList .red .personal-roster-status{color:#e399a7}#personalHeroList [aria-pressed=true] .personal-roster-status{color:#f2d791}
#personalHeroList button:disabled{cursor:default;opacity:.45;filter:grayscale(1)}
@media(max-width:820px){#personalRoster{left:7px;top:124px;width:126px;bottom:calc(var(--champion-hud-height,129px) + 88px);padding:7px 3px;gap:5px}#personalHeroList{gap:5px;padding:1px}#personalHeroList button{padding:4px 1px;gap:2px}#personalRoster>small{font-size:8px}}
@media(prefers-reduced-motion:reduce){#personalHeroList button{transition:none}}