/* Loaded after every legacy race stylesheet: compact, readable phone podium. */
@media (max-width:900px) {
  #racePage .race-champ-wrap,#racePage .race-arena { padding-bottom:96px!important; overflow:visible!important; }
  #racePage .race-podium-stage { height:auto!important; min-height:0!important; overflow:visible!important; }

  #racePage .race-stage-header { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important; align-items:start!important; justify-content:stretch!important; min-height:0!important; height:auto!important; padding:14px 15px 13px!important; gap:10px!important; }
  #racePage .race-stage-title { grid-column:1!important; grid-row:1!important; }
  #racePage .race-stage-title>span { font-size:18px!important; line-height:1.05!important; }
  #racePage .race-stage-stats { display:flex!important; grid-column:1!important; grid-row:2!important; align-items:center!important; justify-content:space-between!important; width:100%!important; gap:14px!important; }
  #racePage .race-stage-stats .race-stage-total,#racePage .race-stage-stats>span:last-child { position:static!important; display:flex!important; grid-column:auto!important; grid-row:auto!important; align-items:center!important; width:auto!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; }
  #racePage .race-stage-stats .race-stage-total b { font-size:22px!important; }
  #racePage .race-stage-stats>span:last-child { gap:6px!important; text-align:left!important; }
  #racePage .race-stage-stats>span:last-child small { display:inline!important; font-size:8px!important; }
  #racePage .race-stage-stats>span:last-child b { display:inline!important; font-size:13px!important; }

  #racePage .race-podium-grid { display:flex!important; flex-direction:column!important; height:auto!important; min-height:0!important; padding:10px!important; gap:10px!important; }
  #racePage .race-podium-racer,#racePage .race-podium-racer-1,#racePage .race-podium-racer-2,#racePage .race-podium-racer-3 { display:grid!important; grid-template-columns:31px 64px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; align-items:center!important; align-content:start!important; justify-content:start!important; width:100%!important; min-height:0!important; height:auto!important; margin:0!important; padding:13px!important; gap:0!important; text-align:left!important; }
  /* Legacy #2/#3 rings need a touch more reserved avatar space than #1.
     This keeps their name, rank crest, and GF total out of the portrait. */
  #racePage .race-podium-racer-2,#racePage .race-podium-racer-3 { grid-template-columns:31px 78px minmax(0,1fr)!important; }
  #racePage .race-podium-racer-2 .race-podium-person,#racePage .race-podium-racer-3 .race-podium-person { padding-left:8px!important; }
  #racePage .race-podium-racer:before { inset:0!important; height:100%!important; }
  #racePage .race-podium-place { grid-column:1!important; grid-row:1!important; align-self:start!important; }
  #racePage .race-podium-avatar { grid-column:2!important; grid-row:1!important; align-self:start!important; margin:0!important; }
  #racePage .race-podium-avatar .pg-av,#racePage .race-podium-racer-1 .race-podium-avatar .pg-av { width:56px!important; height:56px!important; }
  #racePage .race-podium-person { grid-column:3!important; grid-row:1!important; align-self:center!important; justify-self:stretch!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; min-width:0!important; width:100%!important; margin:0!important; padding:0 0 0 11px!important; text-align:left!important; overflow:hidden!important; }
  #racePage .race-podium-person b,#racePage .race-podium-racer-1 .race-podium-person b { display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; font-size:16px!important; line-height:1.1!important; text-align:left!important; }
  #racePage .race-podium-person .race-podium-amount,#racePage .race-podium-amount { display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-width:0!important; margin:7px 0 0!important; color:#cba8f4!important; font-size:12px!important; line-height:1!important; text-align:left!important; white-space:nowrap!important; }
  #racePage .race-podium-person .race-podium-amount .g-coin { flex:0 0 13px!important; width:13px!important; height:13px!important; margin:0 4px 0 0!important; }
  #racePage .race-podium-reward { grid-column:2 / -1!important; grid-row:2!important; align-self:center!important; justify-self:stretch!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; min-height:46px!important; margin:12px 0 0!important; padding:10px 0 0!important; gap:10px!important; border-top:1px solid rgba(255,255,255,.08)!important; overflow:visible!important; text-align:left!important; }
  #racePage .race-podium-reward .race-prize-item,#racePage .race-podium-racer-1 .race-podium-reward .race-prize-item { width:43px!important; height:43px!important; flex:0 0 43px!important; }
  #racePage .race-podium-reward>span { align-items:flex-start!important; min-width:0!important; }
  #racePage .race-podium-reward small { font-size:8px!important; }
  #racePage .race-podium-reward b { max-width:100%!important; font-size:13px!important; text-align:left!important; }
  #racePage .race-podium-meter { grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; width:100%!important; margin:11px 0 0!important; }

  #racePage .race-my-position { position:relative!important; right:auto!important; bottom:auto!important; left:auto!important; min-height:0!important; height:auto!important; margin:10px!important; padding:13px!important; }
}