/* Original command frames and portraits, adapted to the turn-based controls. */
:root{--console-edge:#59676d;--console-light:#a8bbb9;--command-green:#b1f9a0}
.panel{border-color:#49585e;background:linear-gradient(125deg,#293238,#141e26 47%,#0d171f);box-shadow:inset 0 1px 0 #b0bfc325,inset 0 -3px 0 #080f15,0 3px 9px #0005;border-radius:3px}
.panel-heading{border-bottom:1px solid #53616966;padding-bottom:8px;color:#b4c8cb}
.selected-panel{border:2px solid #596970;position:relative;box-shadow:inset 0 0 0 2px #0a1218,inset 0 4px 0 #d0dfdd18,0 5px 14px #0007}
.selected-panel:after{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid #90a1a315;clip-path:polygon(0 0,15px 0,15px 3px,3px 3px,3px 15px,0 15px,0 0,100% 100%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) calc(100% - 15px),100% calc(100% - 15px))}
.selected-panel .selected-hero{gap:13px;margin:3px 0 11px;align-items:center;min-height:118px}
.portrait-monitor{position:relative;flex:none;width:78px;height:118px;background:#040a09;border:2px solid #10191c;outline:1px solid #667375;box-shadow:0 2px 5px #000b;overflow:hidden}
.portrait-monitor>img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-monitor>.unit-portrait{object-fit:contain}
.portrait-monitor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#07171818 3px 4px);box-shadow:inset 0 0 10px #0009;pointer-events:none}
.monitor-light{position:absolute;bottom:4px;right:4px;width:4px;height:4px;background:#b5ffa0;box-shadow:0 0 7px #a2ff87;z-index:1}
.zerg-monitor .monitor-light{background:#d78fff;box-shadow:0 0 7px #db94ff}
.selected-identity{min-width:0;flex:1}.comms-label{font-size:8px;color:#8fbe91;letter-spacing:1px}.selected-hero h2{font-size:18px;margin-top:8px}.selected-hero p{font-size:10px;color:#b3c4c7;line-height:1.6}.selected-identity>small{font-size:9px;color:#8faf9b;display:block;margin-top:5px}.portrait-health{height:4px;background:#071713;margin-top:12px;border:1px solid #456651}.portrait-health>span{display:block;height:100%;background:#91da7e}
.selected-stats{background:#09151ae6;border:1px solid #4b6168;box-shadow:inset 0 2px 6px #0006}
.selected-stats strong{color:#b9edac}.selected-stats span{color:#a1b2b6}
.action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-top:1px solid #4b626755;padding-top:10px}
.action-button,.action-button.active,.attack-action.active{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:0 0 4px;border:0;box-shadow:none;background:none;font-size:10px;text-align:center;line-height:1.4;color:#c7d3ca;min-width:0}
.transform-action{grid-column:auto}.command-glyph{position:relative;display:block;width:min(100%,68px);aspect-ratio:1;background:#0c2417 url('assets/sc2/ui/command-frame.png') center/100% 100% no-repeat;box-shadow:0 2px 5px #0008}
.command-glyph>img{width:100%;height:100%;object-fit:contain;pointer-events:none}.command-glyph:after{content:"";position:absolute;inset:0;border:1px solid #98d49166;box-shadow:inset 0 0 8px #0008;pointer-events:none}
.command-glyph kbd{position:absolute;right:3px;bottom:3px;color:#e7ffc5;background:#07180fe0;border-color:#8dc881a0;opacity:1;font-size:9px;padding:1px 3px;text-shadow:0 1px 2px #000}
.action-button:hover:not(:disabled) .command-glyph{filter:brightness(1.28);box-shadow:0 0 9px #a9fb6655}
.action-button.active .command-glyph:after{border:2px solid #d8ff93;background:url('assets/sc2/ui/command-active.png') center/100% 100%;box-shadow:0 0 9px #a9fb66a0}
.attack-action.active .command-glyph:after{border-color:#ffbd91}.action-button:disabled{opacity:.38;filter:grayscale(.6)}
.action-button:focus-visible{outline:2px solid #d5f794;outline-offset:3px}
.skill-button{background:linear-gradient(100deg,#26343a,#17242b);border-color:#526970;box-shadow:inset 0 1px 0 #ffffff12}.skill-icon{width:38px;height:38px;flex:none;padding:0;display:block;background:#14251b url('assets/sc2/ui/command-frame.png') center/100% 100%;border:1px solid #57715b}.skill-icon img{width:100%;height:100%;object-fit:contain;display:block}
.quiet-button{background:linear-gradient(#37444c,#1b2931);border-color:#5a707b;box-shadow:inset 0 1px 0 #c8ebf41a,0 2px 3px #0004}.quiet-button:hover{border-color:#b2c8bd;background:linear-gradient(#43525c,#263a46)}
.board-frame{border-color:#5b6e74;box-shadow:inset 0 0 0 2px #080f17,0 4px 16px #0005}.roster-card{background:linear-gradient(#28333c,#13212a);border-color:#4e636c}.roster-card.selected{border-color:#a1dcb0;box-shadow:inset 0 0 0 1px #73b78d}
.unit-badge .unit-portrait{object-fit:contain;background:#091910}.unit-badge.zerg .unit-portrait{background:#0b100b}.unit-badge.selected{border-color:#adf098;box-shadow:0 0 0 2px #adf09866,0 0 12px #92ec7e55}
.battle-panel .skill-footnote{line-height:1.55}.page-footer a{color:#a4cdb3}
@media(min-width:901px){.game-shell{max-width:min(1400px,calc((100dvh - 380px)*1.2 + 390px))}.selected-panel .unit-description{font-size:10px}.unit-mechanics{max-height:120px}.command-column{max-height:calc(100dvh - 178px)}.battle-panel .skill-icon{width:32px;height:32px}.selected-panel .panel-heading{margin-bottom:10px}}
@media(min-width:901px) and (max-height:760px){.game-shell{max-width:1080px}}
@media(max-width:550px){.portrait-monitor{width:86px;height:130px}.selected-hero h2{font-size:19px}.comms-label{font-size:9px}.command-glyph{width:76px}.action-button{font-size:11px}.selected-panel .selected-hero{gap:18px}.skill-icon{width:40px;height:40px}}