/* NOMAD Live 3.41 — mobile team-row score alignment.
   Presentation only. The real live score node remains owned by live-score-status.js.
   Mobile mirrors HOME/AWAY score values into the same visual rows as shirt + team name. */

@media (max-width:520px){
  /* Preserve the existing four card columns while giving the team block a little more room. */
  .match-row{
    grid-template-columns:56px minmax(0,1fr) 58px 54px!important;
  }

  /* Required mobile row: shirt | team name | live score. */
  .mobile-team-line.mobile-team-score-ready{
    grid-template-columns:22px minmax(0,1fr) 34px!important;
    column-gap:6px!important;
    align-items:center!important;
    overflow:visible!important;
  }

  /* Original mobile score size restored. */
  .mobile-team-score{
    grid-column:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;
    min-width:34px!important;
    min-height:24px!important;
    height:auto!important;
    margin:0!important;
    overflow:visible!important;
    color:var(--green)!important;
    font-size:15px!important;
    font-weight:900!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    font-variant-numeric:tabular-nums!important;
  }

  /* Keep the live source node exactly where the updater expects it; hide only its visual copy. */
  .score.score-live-stack.mobile-score-layout-ready > .score-live-value.mobile-score-source-hidden{
    display:none!important;
  }

  /* LIVE/phase + the single existing clock stay in the next horizontal card column. */
  .score.score-live-stack.mobile-score-layout-ready{
    min-width:0!important;
    align-self:center!important;
  }

  .score.score-live-stack.mobile-score-layout-ready > .score-live-head,
  .score.score-live-stack.mobile-score-layout-ready > .score-live-time{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:center!important;
  }

  /* Live time is +30% from original, then visually enlarged another 10%.
     transform does not participate in layout, so card height stays unchanged. */
  .score.score-live-stack.mobile-score-layout-ready > .score-live-time{
    font-size:8.06px!important;
    transform:scale(1.10)!important;
    transform-origin:center center!important;
    line-height:1!important;
  }
  .score.score-live-stack.mobile-score-layout-ready > .score-live-time svg{
    width:9.1px!important;
    height:9.1px!important;
  }
}

@media (max-width:360px){
  .match-row{
    grid-template-columns:56px minmax(0,1fr) 54px 54px!important;
  }

  .mobile-team-line.mobile-team-score-ready{
    grid-template-columns:20px minmax(0,1fr) 30px!important;
    column-gap:5px!important;
  }

  .mobile-team-score{
    width:30px!important;
    min-width:30px!important;
    min-height:22px!important;
    font-size:14px!important;
  }
}