/* Extend the existing flight banners; preserve their artwork and skip button. */
#app .vs-detail-portrait{display:block;width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
#app .vs-details>div{grid-template-rows:64px auto auto}
#app .vs-detail-icon{align-self:center}
#app .flight-art-stage{display:block;width:min(112px,100%);height:100%;align-self:center}
#app .flight-art{display:block;width:100%;height:100%;overflow:visible}
#app .match-info.in .flight-ball{animation:flight-ball-hop 2s ease-in-out infinite;transform-origin:76px 53px}
#app .match-info.in .flight-ball-shadow{animation:flight-ball-shadow 2s ease-in-out infinite;transform-origin:76px 55px}
#app .match-info.in .flight-sun{animation:flight-sun-sway 3s ease-in-out infinite;transform-origin:73px 23px}
#app .match-info.in .flight-cloud{animation:flight-cloud-drift 3s ease-in-out infinite alternate}
#app .match-info.in .flight-stars{animation:flight-star-glow 2s ease-in-out infinite alternate}
@keyframes flight-ball-hop{0%,100%{transform:translate(0,0)}25%,75%{transform:translate(-18.5px,-30px)}50%{transform:translate(-37px,-13px)}}
@keyframes flight-ball-shadow{0%,100%{transform:translate(0,0) scaleX(1);opacity:.25}25%,75%{transform:translate(-18.5px,-6.5px) scaleX(.6);opacity:.12}50%{transform:translate(-37px,-13px) scaleX(1);opacity:.25}}
@keyframes flight-sun-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes flight-cloud-drift{from{transform:translateX(-2px)}to{transform:translateX(6px)}}
@keyframes flight-star-glow{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#app .match-info .flight-art *{animation:none!important}}

/* On portrait phones both heads share one row and look across the VS badge. */
@media(max-width:700px) and (orientation:portrait){
  #app .vs-strip{--vs-h:min(340px,calc(100dvh - 170px));--face-size:min(31vw,155px,calc((var(--vs-h) - 90px) * .9));grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px}
  #app .vs-band{display:block}
  #app .vs-side,#app .vs-right{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 90px;padding:0 6px;gap:0}
  #app .vs-right{grid-column:3}
  #app .vs-side::before{content:none}
  #app .vs-face,#app .vs-right .vs-face{grid-column:1;grid-row:1;width:100%;height:100%;justify-self:stretch}
  #app .vs-text,#app .vs-right .vs-text{grid-column:1;grid-row:2;padding:7px 0;align-self:start;text-align:center;gap:5px}
  #app .vs-text b{font-size:clamp(17px,4.5vw,23px);letter-spacing:-.3px}
  #app .vs-text small{font-size:10px;line-height:1.35;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #app .vs-mark{position:relative;grid-column:2;grid-row:1;left:auto;top:auto;width:58px;height:58px;justify-self:center;align-self:center;transform:translateY(-45px);padding:0}
  #app .vs-mark>span{font-size:38px;letter-spacing:-2px}
  #app .vs-details>div{grid-template-rows:56px auto auto}
  #app .vs-detail-portrait{width:56px;height:56px}
}
@media(max-width:360px) and (orientation:portrait){
  #app .vs-details{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .vs-details>div:last-child{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  #app .vs-details>div:last-child :is(small,b),#app .vs-details>div:last-child .vs-detail-icon{grid-column:auto;grid-row:auto}
  #app .vs-details b{font-size:13px}
}
/* Reserve the existing skip control's space on short landscape screens. */
@media(max-height:500px) and (orientation:landscape){
  #app .vs-strip{--vs-h:calc(100dvh - 124px);--vs-caption-h:80px;--face-size:min(27vw,190px,calc((var(--vs-h) - var(--vs-caption-h)) * .9));top:calc((100dvh - 90px)/2)}
  #app .vs-text b{font-size:18px}
  #app .vs-text small{font-size:10px;line-height:1.3;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #app .match-info{top:calc((100dvh - 90px)/2);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:12px 16px;gap:12px}
  #app .vs-goal{padding:14px 16px;gap:6px}
  #app .vs-goal b{font-size:24px}
  #app .vs-goal p{font-size:11px;line-height:1.35}
  #app .vs-details{gap:7px}
  #app .vs-details>div{grid-template-rows:44px auto auto;padding:7px 4px;gap:5px}
  #app .vs-detail-portrait{width:44px;height:44px}
  #app .vs-details b{font-size:12px}
}