/* Keep the aiming area, radar and touch controls clear, including short landscape. */
#commentary{position:fixed;inset:auto auto max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));transform:none;text-align:left;max-width:min(340px,calc(100vw - 20px));width:auto;z-index:3;font:18px/1.1 VT323,monospace;color:#e9eee4;pointer-events:none;box-sizing:border-box}
#commentary:empty{display:none}
#commentary:not(:empty){display:flex;gap:7px;align-items:center;padding:5px 8px;background:#071820d9;border:0;border-left:2px solid #75d9bd}
#commentary[data-speaker=bolt]{border-left-color:#edb567}
#commentary img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex:0 0 40px}
#commentary strong{display:block;font:14px/1 VT323,monospace;color:#84d9c2;margin-bottom:2px}
#commentary[data-speaker=bolt] strong{color:#edb567}
#commentary .radioText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#commentary .radioBody{min-width:0}
#commentary{width:min(340px,calc(100vw - 20px))}
body:has(#joy:not([hidden])) #commentary{left:50%;transform:translateX(-50%);max-width:min(300px,calc(100vw - 24px));bottom:calc(154px + env(safe-area-inset-bottom))}
body:has(#spectatorBar:not([hidden])) #commentary{bottom:110px}
@media(max-height:500px){#commentary,body:has(#joy:not([hidden])) #commentary{left:50%;transform:translateX(-50%);max-width:calc(100vw - 370px);font-size:16px;bottom:max(5px,env(safe-area-inset-bottom))}#commentary img{width:32px;height:32px;flex-basis:32px}body:has(#spectatorBar:not([hidden])) #commentary{bottom:65px}}
@media(max-width:540px) and (max-height:500px){#commentary,body:has(#joy:not([hidden])) #commentary{max-width:calc(100vw - 24px);bottom:8px}#commentary img{display:none}}
#replayMatch{width:100%;min-height:48px;font:23px VT323,monospace;margin:8px 0}#replayMatch[hidden]{display:none!important}#replayNotice:empty{display:none}#replayNotice{font:18px VT323,monospace;color:#ffdc92}
body:not(.inMatch) #commentary.resultRadio:not(:empty){display:flex!important} #matchCard #commentary.resultRadio{position:static;transform:none;width:100%;max-width:none;margin-top:12px;font-size:18px;text-align:left}