/* Shared story-style dock. Court, joystick and four shot targets keep their geometry. */
#frame .controls #power-bar{left:calc(40% - 14px);top:14px;bottom:auto;width:18%;max-width:74px;z-index:15;pointer-events:none}
#frame .controls #power-bar>div:first-of-type{display:grid;grid-template-columns:1fr;gap:5px;width:100%}
#frame .controls #power-bar #power-count{display:none}
#frame .controls #power-bar button[data-skill-phase]{box-sizing:border-box;display:block;position:relative;width:100%;min-width:44px;height:44px;min-height:44px;padding:3px;border:1px solid #d8ac5d;border-radius:10px;background:#132f41f5;color:#f7e3b6;pointer-events:auto;touch-action:manipulation;overflow:hidden;box-shadow:none}
#frame .controls #power-bar button[data-skill-phase] .mini,#frame .controls #power-bar button[data-skill-phase] .new-portrait,#frame .controls #power-bar .skill-player-name213{display:none}
#frame .controls #power-bar button[data-skill-phase] .skill-symbol58{left:3px;top:14px;right:auto;bottom:auto;width:16px;height:16px;padding:0;background:none}
#frame .controls #power-bar button[data-skill-phase] .skill-symbol58 svg{width:16px;height:16px}
#frame .controls #power-bar button[data-skill-phase] .skill-role381{position:absolute;top:2px;left:21px;right:2px;font-size:7px;line-height:8px;text-align:center;color:#b3cbd0;padding:0;white-space:nowrap}
#frame .controls #power-bar button[data-skill-phase] .skill-name381{top:11px;left:21px;right:2px;max-height:20px;font-size:9px;line-height:10px;white-space:normal;overflow-wrap:anywhere;text-align:center;color:#f7e3b6}
#frame .controls #power-bar button[data-skill-phase] .power-charge{top:auto;bottom:3px;left:20px;right:2px;font-size:8px!important;line-height:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b5d0d1}
#frame .controls #power-bar button[data-skill-phase=ready]{border-color:#f2d79a;box-shadow:inset 2px 0 #f2d79a}
#frame .controls #power-bar button[data-skill-phase=armed]{background:#614927;border-color:#ffd47b;box-shadow:0 0 9px #e9bb5b44}
#frame .controls #power-bar button[data-skill-phase=active]{background:#125a60;border-color:#a4fff0;box-shadow:0 0 8px #74efdc44}
#frame .controls #power-bar button[data-skill-phase=cooling]{background:#1d3442;border-color:#607d89;color:#b8cacd}
#frame .controls #power-bar button[data-skill-phase]:focus-visible{outline:2px solid white;outline-offset:2px}
#frame .controls #power-bar button[data-skill-phase] .cooldown-track58{height:2px;bottom:0}
#frame .controls .supply-dock594{left:10px;top:17px;bottom:auto;display:flex;flex-direction:row;gap:5px;z-index:16}
#frame .controls .supply-dock594 button{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:1px;width:44px;height:44px;min-width:44px;min-height:44px;padding:3px;border-radius:10px;touch-action:manipulation}
#frame .controls .supply-dock594 svg{width:20px;height:20px}
#frame .controls .supply-dock594 small{font-size:8px;line-height:1.1;white-space:nowrap;pointer-events:none}
#frame .controls .supply-dock594 button.recommended512{border-color:#ead99b;box-shadow:0 0 0 2px #e5d39930}
#frame .controls .energy-meter512{position:absolute;left:10px;top:1px;width:93px;display:flex;align-items:center;gap:5px;font-size:9px;line-height:12px;color:var(--energy-color,#78deb1);pointer-events:none;z-index:16}
#frame .controls .energy-meter512 span{white-space:nowrap;min-width:43px}
#frame .controls .energy-meter512 i{display:block;height:4px;width:42px;border-radius:3px;overflow:hidden;background:#52656a}
#frame .controls .energy-meter512 i b{display:block;height:100%;background:var(--energy-color,#78deb1)}
#frame .controls .energy-meter512[hidden]{display:none!important}
@media(max-width:375px){
 #frame .controls #power-bar button[data-skill-phase] .skill-symbol58{display:none}
 #frame .controls #power-bar button[data-skill-phase] .skill-role381,#frame .controls #power-bar button[data-skill-phase] .skill-name381,#frame .controls #power-bar button[data-skill-phase] .power-charge{left:2px;right:2px}
}


/* v5.12.2: use the full dock when classic play has two skills and two supplies.
 * Three skill rows keep the 44px height. The legacy Story200 HUD is separate.
 */
body:not(.story-match200) #frame .controls #power-bar>div:first-of-type{
 height:142px;grid-auto-rows:minmax(0,1fr)
}
body:not(.story-match200) #frame .controls #power-bar button[data-skill-phase]{
 height:100%;min-height:44px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-symbol58{
 top:50%;margin-top:-10px;width:20px;height:20px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-symbol58 svg{
 width:20px;height:20px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-role381{
 top:5px;left:24px;font-size:8px;line-height:9px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-name381{
 top:18px;left:24px;max-height:28px;font-size:10px!important;line-height:12px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .power-charge{
 bottom:6px;left:2px;font-size:9px!important;line-height:10px
}
#frame .controls .supply-dock594[data-item-count="2"]{
 top:14px;width:calc(40% - 36px);min-width:93px;max-width:149px
}
#frame .controls .supply-dock594[data-item-count="2"] button{
 flex:1;min-width:44px;width:auto;height:46px;min-height:46px
}
#frame .controls .supply-dock594[data-item-count="2"] svg{width:24px;height:24px}
#frame .controls .supply-dock594[data-item-count="2"] small{font-size:9px}
#frame .controls .energy-meter512{width:calc(40% - 36px);min-width:93px;max-width:149px}
#frame .controls .energy-meter512 i{flex:1;width:auto;min-width:0}
@media(max-width:375px){
 body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-role381,
 body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-name381{left:2px}
}


/* v5.12.3: state colours and readable status. No dock or court geometry changes. */
#frame .controls #power-bar button[data-skill-phase]{
 border-width:2px;opacity:1;filter:none;animation:none
}
#frame .controls #power-bar button[data-skill-phase=ready]{
 background:#f59e0b;border-color:#ffd18b;color:#291900;
 box-shadow:inset 0 0 0 1px #fff0b344,0 0 7px #f59e0b44
}
#frame .controls #power-bar button[data-skill-phase=ready] .skill-name381,
#frame .controls #power-bar button[data-skill-phase=ready] .power-charge{color:#291900}
#frame .controls #power-bar button[data-skill-phase=ready] .skill-role381{color:#4c2c00}
#frame .controls #power-bar button[data-skill-phase=armed]{
 background:#0d7777;border-color:#54f1dc;color:#e8fffc;
 box-shadow:inset 0 0 0 1px #54f1dc33,0 0 7px #2dd4bf44
}
#frame .controls #power-bar button[data-skill-phase=armed] .skill-name381,
#frame .controls #power-bar button[data-skill-phase=armed] .power-charge{color:#e8fffc}
#frame .controls #power-bar button[data-skill-phase=armed] .skill-role381{color:#bafff3}
#frame .controls #power-bar button[data-skill-phase=active]{
 background:#0c555d;border-color:#f2fffd;color:#e8fffc;
 box-shadow:0 0 0 1px #54f1dc77,0 0 9px #2dd4bf66
}
#frame .controls #power-bar button[data-skill-phase=active] .skill-name381,
#frame .controls #power-bar button[data-skill-phase=active] .power-charge{color:#f2fffd}
#frame .controls #power-bar button[data-skill-phase=cooling]{
 background:#203246;border-color:#667d90;color:#e3ebf4;box-shadow:none;opacity:1
}
#frame .controls #power-bar button[data-skill-phase=cooling] .skill-name381{color:#b9c7d5}
#frame .controls #power-bar button[data-skill-phase=cooling] .skill-role381{color:#99aec1}
#frame .controls #power-bar button[data-skill-phase=cooling] .power-charge{color:#ffffff;font-variant-numeric:tabular-nums}
#frame .controls #power-bar button[data-skill-phase=cooling] .cooldown-track58{height:4px}
#frame .controls #power-bar button[data-skill-phase=cooling] .cooldown-track58::after{background:#b6d9ed}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-roomy=true] .skill-name381{top:16px;max-height:24px}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-roomy=true] .power-charge{
 bottom:5px;white-space:pre-line;line-height:10px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase=cooling] .power-charge{
 font-size:11px!important;line-height:12px;bottom:7px
}
#frame .controls #power-bar button[data-skill-phase=ready].skill-recharged5123{
 animation:skillReady5123 .48s ease-out 1
}
@keyframes skillReady5123{
 0%{box-shadow:0 0 0 2px #ffe4a3,0 0 14px #f59e0b99}
 100%{box-shadow:inset 0 0 0 1px #fff0b344,0 0 7px #f59e0b44}
}
@media(prefers-reduced-motion:reduce){
 #frame .controls #power-bar button[data-skill-phase=ready].skill-recharged5123{animation:none}
}

/* Compact rows keep the skill name clear of the one-line status. */
#frame .controls #power-bar button[data-skill-roomy=false] .skill-name381{top:10px;max-height:18px;line-height:9px}
#frame .controls #power-bar button[data-skill-roomy=false] .power-charge{bottom:4px;line-height:9px;font-size:8px!important;white-space:nowrap}

/* v5.13.0: shared supply-style dark surface, concise states and identity labels. */
#frame .controls #power-bar button[data-skill-phase=ready],
#frame .controls #power-bar button[data-skill-phase=armed],
#frame .controls #power-bar button[data-skill-phase=active],
#frame .controls #power-bar button[data-skill-phase=cooling]{
 background:linear-gradient(#234957,#102b3e);opacity:1;filter:none
}
#frame .controls #power-bar button[data-skill-phase=ready]{border-color:#e7be73;color:#f5d89c;box-shadow:0 0 0 1px #e7be7333}
#frame .controls #power-bar button[data-skill-phase=armed]{border-color:#64d9c5;color:#a1f6e5;box-shadow:inset 0 0 10px #2dd4bf18,0 0 0 1px #64d9c544}
#frame .controls #power-bar button[data-skill-phase=active]{border-color:#e7fffa;color:#d8fff4;box-shadow:0 0 0 1px #64d9c566}
#frame .controls #power-bar button[data-skill-phase=cooling]{border-color:#627c8c;color:#91a9b9;box-shadow:none}
#frame .controls #power-bar button[data-skill-phase] .skill-name381{color:#edf2f3}
#frame .controls #power-bar button[data-skill-phase] .skill-role381{color:#b3cbd0}
#frame .controls #power-bar button[data-skill-phase=ready] .power-charge{color:#f5d89c}
#frame .controls #power-bar button[data-skill-phase=armed] .power-charge{color:#a1f6e5}
#frame .controls #power-bar button[data-skill-phase=active] .power-charge{color:#e7fffa}
#frame .controls #power-bar button[data-skill-phase=cooling] .power-charge{color:#edf5fa}
#frame .controls #power-bar button[data-skill-phase=cooling] .skill-symbol58{filter:grayscale(1);opacity:.6}
#frame .controls #power-bar button[data-skill-phase=ready] .skill-symbol58{color:#f5d89c}
#frame .controls #power-bar button[data-skill-phase=armed] .skill-symbol58{color:#a1f6e5}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-role381{
 top:3px;left:4px;right:auto;font-size:8px;line-height:9px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-symbol58{
 left:50%;top:14px;right:auto;transform:translateX(-50%);margin:0;width:16px;height:16px;display:block
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-symbol58 svg{width:16px;height:16px}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .skill-name381{
 top:32px;left:2px;right:2px;max-height:18px;font-size:9px!important;line-height:9px
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase] .power-charge{
 bottom:5px;left:2px;right:2px;line-height:10px;font-size:9px!important;white-space:nowrap
}
body:not(.story-match200) #frame .controls #power-bar>div[data-skill-slots="2"] button[data-skill-phase=cooling] .power-charge{font-size:11px!important;line-height:12px}
@keyframes skillReady5123{0%{box-shadow:0 0 0 2px #e7be73,0 0 10px #e7be7355}100%{box-shadow:0 0 0 1px #e7be7333}}
.skill-legend381 i{background:linear-gradient(#234957,#102b3e);border-color:#e7be73}
.skill-legend381 .armed i{background:linear-gradient(#234957,#102b3e);border-color:#64d9c5}
.skill-legend381 .active i{background:linear-gradient(#234957,#102b3e);border-color:#e7fffa}
.skill-legend381 .cooling i{background:linear-gradient(#234957,#102b3e);border-color:#627c8c}