/* Final phone layout pass — intentionally loaded after the legacy desktop rules. */
@media (max-width:900px) {
  /* Keep the mobile shell compact enough that the actual page begins above the fold. */
  html.gf-scale main > header,
  main > header {
    grid-template-rows:46px 34px !important;
    height:80px !important;
    min-height:80px !important;
  }
  html.gf-scale main > header #gfPrimaryNav,
  main > header #gfPrimaryNav {
    height:34px !important;
    min-height:34px !important;
  }
  html.gf-scale main > header #gfPrimaryNav button,
  main > header #gfPrimaryNav button {
    height:34px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }
  html.gf-scale main > header #gfPrimaryNav button::after,
  main > header #gfPrimaryNav button::after {
    left:11px !important;
    right:11px !important;
  }

  /* Race: one clean identity row, then its prize. No desktop-centred names. */
  #racePage .race-champ-wrap,
  #racePage .race-arena,
  #racePage .race-podium-stage {
    min-height:0 !important;
    height:auto !important;
    background:transparent !important;
  }
  #racePage .race-podium-grid { 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 {
    grid-template-columns:32px 64px minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    column-gap:8px !important;
    row-gap:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:14px !important;
  }
  /* The winner already reads correctly. The second and third cards need an
     extra avatar lane because their inherited portrait glow is wider. */
  #racePage .race-podium-racer-2,
  #racePage .race-podium-racer-3 {
    grid-template-columns:32px 78px minmax(0,1fr) !important;
  }
  #racePage .race-podium-place { position:static !important; 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:center !important; margin:0 !important; }
  #racePage .race-podium-avatar .pg-av,
  #racePage .race-podium-racer-1 .race-podium-avatar .pg-av { width:60px !important; height:60px !important; }
  #racePage .race-podium-person {
    grid-column:3 !important;
    grid-row:1 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    text-align:left !important;
    background:transparent !important;
  }
  #racePage .race-podium-person b,
  #racePage .race-podium-racer-1 .race-podium-person b {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    gap:5px !important;
    overflow:hidden !important;
    text-align:left !important;
    font-size:17px !important;
  }
  #racePage .race-podium-person .race-global-rank { width:20px !important; height:20px !important; flex:0 0 20px !important; }
  #racePage .race-podium-amount {
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:7px 0 0 !important;
    color:#d1abff !important;
    font-size:12px !important;
    text-align:left !important;
  }
  #racePage .race-podium-reward { grid-column:2 / -1 !important; grid-row:2 !important; }
  #racePage .race-podium-meter { grid-column:1 / -1 !important; grid-row:3 !important; }
  #racePage .race-my-position { min-height:0 !important; margin:10px !important; }

  /* Create a flip: choice is a dedicated centred row, amount never shares it. */
  #creator .creator-total {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"count amount" "side side" "clear clear" !important;
    align-items:center !important;
    gap:9px 12px !important;
    min-height:0 !important;
    padding:12px 0 !important;
  }
  #creator .creator-total > span,
  #creator #selectionCount { grid-area:count !important; min-width:0 !important; }
  #creator .creator-total > b,
  #creator .creator-total > .creator-amount { grid-area:amount !important; margin:0 !important; justify-self:end !important; white-space:nowrap !important; }
  #creator #cfSide,
  #creator .cf-side {
    grid-area:side !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto 52px !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #creator #cfSide .cf-side-lbl,
  #creator .cf-side .cf-side-lbl { grid-column:1 / -1 !important; text-align:center !important; }
  #creator #cfSide .cf-side-btn,
  #creator .cf-side .cf-side-btn {
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:52px !important;
    min-width:0 !important;
    margin:0 !important;
  }
  #creator #cfSide .cf-side-btn img,
  #creator .cf-side .cf-side-btn img { width:36px !important; height:36px !important; }
  #creator #clearOffer,
  #creator .creator-total > button { grid-area:clear !important; justify-self:end !important; margin:0 !important; }

  /* Active flips are one compact, squared match bar — not a full screen row. */
  #lobbyList .lobby.gfl-live,
  #lobbyList .lobby:has(.player.matched) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:"match match" "stake pot" !important;
    width:100% !important;
    min-height:142px !important;
    height:auto !important;
    padding:12px !important;
    gap:8px 10px !important;
    align-items:center !important;
    border-radius:8px !important;
  }
  #lobbyList .lobby.gfl-live > .player.matched,
  #lobbyList .lobby:has(.player.matched) > .player.matched {
    grid-area:match !important;
    position:static !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) !important;
    grid-template-rows:50px 38px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    column-gap:5px !important;
    row-gap:5px !important;
    align-items:center !important;
    background:transparent !important;
  }
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player,
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player {
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    gap:7px !important;
    align-items:center !important;
    zoom:1 !important;
  }
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player:not(.opponent),
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player:not(.opponent) { grid-column:1 !important; grid-row:1 !important; }
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player.opponent,
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player.opponent { grid-column:3 !important; grid-row:1 !important; }
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player img,
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player img { width:42px !important; height:42px !important; }
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player span,
  #lobbyList .lobby.gfl-live .player.matched > .live-match-player span b,
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player span,
  #lobbyList .lobby:has(.player.matched) .player.matched > .live-match-player span b { min-width:0 !important; max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  #lobbyList .lobby.gfl-live .player.matched > i,
  #lobbyList .lobby:has(.player.matched) .player.matched > i {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    margin:0 !important;
    transform:none !important;
  }
  #lobbyList .lobby.gfl-live .player.matched > .match-status,
  #lobbyList .lobby.gfl-live .player.matched > .match-status.countdown,
  #lobbyList .lobby.gfl-live .player.matched > .match-status.spinning,
  #lobbyList .lobby.gfl-live .player.matched > .match-status.result,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.countdown,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.spinning,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.result {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-self:center !important;
    align-self:center !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
  }
  #lobbyList .lobby.gfl-live .player.matched > .match-status.countdown,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.countdown {
    font-size:24px !important;
    line-height:38px !important;
    text-align:center !important;
  }
  #lobbyList .lobby.gfl-live .player.matched > .match-status.result,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.result { grid-template-rows:1fr !important; }
  #lobbyList .lobby.gfl-live .player.matched > .match-status.result > span,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status.result > span { display:none !important; }
  #lobbyList .lobby.gfl-live .player.matched > .match-status .match-result-icon,
  #lobbyList .lobby:has(.player.matched) .player.matched > .match-status .match-result-icon { width:36px !important; height:36px !important; margin:0 !important; }
  #lobbyList .lobby.gfl-live > .offer,
  #lobbyList .lobby:has(.player.matched) > .offer {
    grid-area:stake !important;
    display:flex !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  #lobbyList .lobby.gfl-live > .pot,
  #lobbyList .lobby:has(.player.matched) > .pot {
    grid-area:pot !important;
    justify-self:end !important;
    align-self:center !important;
    margin:0 !important;
    font-size:15px !important;
  }
  #lobbyList .lobby.gfl-live > .chance,
  #lobbyList .lobby.gfl-live > .actions,
  #lobbyList .lobby:has(.player.matched) > .chance,
  #lobbyList .lobby:has(.player.matched) > .actions { display:none !important; }

  /* The replay viewer owns its scrolling on a phone instead of trapping the page. */
  #viewer.modal {
    display:none !important;
    align-items:flex-start !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding:9px !important;
  }
  #viewer.modal.show { display:block !important; }
  #viewer.modal .viewer-card {
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    min-height:0 !important;
    margin:9px auto 28px !important;
    overflow:visible !important;
  }
  #viewer .flip-stage,
  #viewer .flip-stage.is-countdown,
  #viewer .flip-stage.is-spinning,
  #viewer .flip-stage.is-result {
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:200px !important;
    min-height:200px !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  #viewer .flip-stage.is-countdown #flipCount {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
    text-align:center !important;
  }
  #viewer .flip-stage.is-countdown #flipStatus {
    position:absolute !important;
    top:calc(50% + 38px) !important;
    right:0 !important;
    left:0 !important;
    margin:0 !important;
    text-align:center !important;
  }
  #viewer .flip-stage.is-spinning #flipCoin,
  #viewer .flip-stage.is-result #flipCoin,
  #viewer[data-outcome] #flipCoin {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }
  #viewer .flip-stage.is-spinning #flipStatus {
    position:absolute !important;
    top:calc(50% + 72px) !important;
    right:0 !important;
    left:0 !important;
    margin:0 !important;
    text-align:center !important;
  }
  #viewer .flip-stage.is-result #flipCount,
  #viewer[data-outcome] #flipCount {
    position:absolute !important;
    top:calc(50% + 69px) !important;
    right:0 !important;
    left:0 !important;
    margin:0 !important;
    transform:none !important;
    text-align:center !important;
  }
}

@media (max-width:390px) {
  #creator .creator-total { grid-template-rows:auto 47px auto !important; }
  #creator #cfSide,
  #creator .cf-side { grid-template-rows:auto 47px !important; }
  #creator #cfSide .cf-side-btn,
  #creator .cf-side .cf-side-btn { height:47px !important; }
}

/*
 * Final phone layout for a matched flip.
 *
 * Live rows are rendered inside #gfLobby (rather than #lobbyList) and their
 * runtime styles are injected after the normal stylesheets.  Keep this
 * selector deliberately specific so every moving piece stays in its own grid
 * cell: player one / VS / player two on top, then the flip and pot below.
 */
@media (max-width:900px) {
  #gfLobby .lobby.gfl-live,
  #gfLobby .lobby:has(> .player.matched) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content max-content !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:
      "match match match"
      "offer pot actions" !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:132px !important;
    height:auto !important;
    margin:0 0 10px !important;
    padding:12px 13px !important;
    gap:9px 10px !important;
    align-items:center !important;
    border-radius:8px !important;
  }

  #gfLobby .lobby.gfl-live > .player.matched,
  #gfLobby .lobby:has(> .player.matched) > .player.matched {
    grid-area:match !important;
    position:static !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) !important;
    grid-template-rows:48px 38px !important;
    grid-template-areas:
      "host vs guest"
      ". result ." !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:91px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:5px 7px !important;
    align-items:center !important;
    justify-items:stretch !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player {
    position:static !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:7px !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:48px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player:not(.opponent),
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player:not(.opponent) {
    grid-area:host !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player.opponent,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player.opponent {
    grid-area:guest !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player.opponent,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player.opponent {
    grid-template-columns:minmax(0,1fr) 42px !important;
    text-align:right !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player.opponent > img,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player.opponent > img {
    grid-column:2 !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player.opponent > span,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player.opponent > span {
    grid-column:1 !important;
    grid-row:1 !important;
    align-items:flex-end !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player > img,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player > img {
    box-sizing:border-box !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    margin:0 !important;
    border-radius:50% !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player > span,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player > span {
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player > span > b,
  #gfLobby .lobby.gfl-live > .player.matched > .live-match-player > span > small,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player > span > b,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .live-match-player > span > small {
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #gfLobby .lobby.gfl-live > .player.matched > i,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > i {
    grid-area:vs !important;
    position:static !important;
    inset:auto !important;
    display:grid !important;
    place-items:center !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    text-align:center !important;
  }

  #gfLobby .lobby.gfl-live > .player.matched > .match-status,
  #gfLobby .lobby.gfl-live > .player.matched > .match-status.countdown,
  #gfLobby .lobby.gfl-live > .player.matched > .match-status.spinning,
  #gfLobby .lobby.gfl-live > .player.matched > .match-status.result,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status.countdown,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status.spinning,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status.result {
    grid-area:result !important;
    position:static !important;
    inset:auto !important;
    display:grid !important;
    place-items:center !important;
    justify-self:center !important;
    align-self:center !important;
    box-sizing:border-box !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    transform-origin:center !important;
    line-height:38px !important;
    text-align:center !important;
    will-change:auto !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .match-status.countdown,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status.countdown {
    font-size:24px !important;
    transition:none !important;
  }
  #gfLobby .lobby.gfl-live > .player.matched > .match-status .match-result-icon,
  #gfLobby .lobby:has(> .player.matched) > .player.matched > .match-status .match-result-icon {
    display:block !important;
    width:36px !important;
    height:36px !important;
    margin:0 !important;
  }

  #gfLobby .lobby.gfl-live > .offer,
  #gfLobby .lobby:has(> .player.matched) > .offer {
    grid-area:offer !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  #gfLobby .lobby.gfl-live > .pot,
  #gfLobby .lobby:has(> .player.matched) > .pot {
    grid-area:pot !important;
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-self:end !important;
    white-space:nowrap !important;
    margin:0 !important;
    font-size:14px !important;
  }
  #gfLobby .lobby.gfl-live > .actions,
  #gfLobby .lobby:has(> .player.matched) > .actions {
    grid-area:actions !important;
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
  }
  #gfLobby .lobby.gfl-live > .actions .join,
  #gfLobby .lobby:has(> .player.matched) > .actions .join { display:none !important; }
  #gfLobby .lobby.gfl-live > .actions .view,
  #gfLobby .lobby:has(> .player.matched) > .actions .view {
    display:block !important;
    min-width:48px !important;
    height:30px !important;
    margin:0 !important;
    padding:0 9px !important;
    font-size:10px !important;
    line-height:30px !important;
  }
  #gfLobby .lobby.gfl-live > .chance,
  #gfLobby .lobby:has(> .player.matched) > .chance { display:none !important; }
}

/* The creator's side choice belongs in the same compact action strip as CLEAR.
   Keeping that strip intact prevents the GF amount from ever sitting on top
   of Heads or Tails. */
@media (max-width:900px) {
  #creator .creator-total {
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto 46px !important;
    grid-template-areas:
      "count amount"
      "side clear" !important;
    gap:10px 12px !important;
    padding:10px 0 !important;
  }
  #creator #cfSide,
  #creator .cf-side {
    grid-area:side !important;
    grid-template-columns:46px 46px !important;
    grid-template-rows:46px !important;
    justify-content:start !important;
    width:auto !important;
    height:46px !important;
    gap:7px !important;
  }
  #creator #cfSide .cf-side-lbl,
  #creator .cf-side .cf-side-lbl { display:none !important; }
  #creator #cfSide .cf-side-btn,
  #creator .cf-side .cf-side-btn {
    grid-row:1 !important;
    width:46px !important;
    height:46px !important;
  }
  #creator #cfSide .cf-side-btn img,
  #creator .cf-side .cf-side-btn img { width:31px !important; height:31px !important; }
  #creator #clearOffer,
  #creator .creator-total > button {
    grid-area:clear !important;
    align-self:stretch !important;
    justify-self:end !important;
    min-width:76px !important;
    height:46px !important;
    margin:0 !important;
  }

  /* View coinflip is a true top-most overlay: the page and its tabs never
     scroll through it. */
  html:has(#viewer.show),
  body:has(#viewer.show) {
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
  #viewer.modal.show {
    position:fixed !important;
    inset:0 !important;
    z-index:2147483646 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }
  body:has(#viewer.show) main > header,
  body:has(#viewer.show) #gfPrimaryNav { z-index:0 !important; }

  /* Keep each pick inside its own participant cell on phones. */
  #viewer .replay-players {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) !important;
    gap:6px !important;
    margin:12px 0 !important;
  }
  #viewer .replay-players > strong {
    display:grid !important;
    place-items:center !important;
    min-width:28px !important;
    font-size:9px !important;
  }
  #viewer .replay-player {
    grid-template-columns:minmax(0,1fr) 34px !important;
    grid-template-rows:44px 22px !important;
    min-width:0 !important;
    min-height:74px !important;
    padding:8px !important;
    gap:4px 6px !important;
  }
  #viewer .replay-profile-hit {
    grid-column:1 !important;
    grid-row:1 !important;
    grid-template-columns:40px minmax(0,1fr) !important;
    gap:6px !important;
    min-width:0 !important;
    width:100% !important;
    overflow:hidden !important;
  }
  #viewer .replay-profile-hit > img {
    width:38px !important;
    height:38px !important;
    padding:2px !important;
  }
  #viewer .replay-identity { gap:3px !important; min-width:0 !important; overflow:hidden !important; }
  #viewer .replay-identity b {
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    font-size:12px !important;
  }
  #viewer .replay-identity b .replay-name {
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #viewer .replay-identity b .replay-rank {
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
  }
  #viewer .replay-identity small { font-size:7px !important; }
  #viewer .replay-pick {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
    width:34px !important;
    height:34px !important;
  }
  #viewer .replay-pick img { width:32px !important; height:32px !important; }
  #viewer .replay-entry {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    padding-top:4px !important;
    min-width:0 !important;
  }
  #viewer .replay-entry small,
  #viewer .replay-odds { display:none !important; }
  #viewer .replay-entry b { font-size:11px !important; }
  #viewer .replay-entry .g-coin { width:13px !important; height:13px !important; }
  #viewer .viewer-fair {
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  #viewer .viewer-fair .modal-actions {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
  }
  #viewer #fairnessButton {
    display:inline-flex !important;
    min-width:0 !important;
    justify-content:center !important;
  }
}

/* A rank crest is artwork, never a colored square/button. */
#profile #profileRank,
#settings .username-row .rank-icon,
.jp-rank-icon,
.race-global-rank,
.lb-rank {
  box-sizing:border-box !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Close the outside edge around every profile stat, including WINS. */
#profile .profile-performance {
  border:1px solid rgba(84,75,98,.72) !important;
  overflow:hidden !important;
}
#profile .profile-performance > div:first-child {
  border-left:0 !important;
}

/* Resolved rows use #pastGames, so they need the same phone grid as live rows.
   This keeps the result coin in its own middle cell and the two people apart. */
@media (max-width:900px) {
  #pastGames .lobby.gfl-live {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content max-content !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:
      "match match match"
      "offer pot actions" !important;
    width:100% !important;
    min-width:0 !important;
    min-height:132px !important;
    height:auto !important;
    margin:0 0 10px !important;
    padding:12px 13px !important;
    gap:9px 10px !important;
    border-radius:8px !important;
  }
  #pastGames .lobby.gfl-live > .player.matched {
    grid-area:match !important;
    position:static !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) !important;
    grid-template-rows:48px 38px !important;
    grid-template-areas:
      "host vs guest"
      ". result ." !important;
    width:100% !important;
    min-width:0 !important;
    min-height:91px !important;
    margin:0 !important;
    padding:0 !important;
    gap:5px 7px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > .live-match-player {
    position:static !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > .live-match-player:not(.opponent) { grid-area:host !important; }
  #pastGames .lobby.gfl-live > .player.matched > .live-match-player.opponent {
    grid-area:guest !important;
    grid-template-columns:minmax(0,1fr) 42px !important;
    text-align:right !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > .live-match-player.opponent > img { grid-column:2 !important; }
  #pastGames .lobby.gfl-live > .player.matched > .live-match-player > img {
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    margin:0 !important;
    border-radius:50% !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > i {
    grid-area:vs !important;
    position:static !important;
    display:grid !important;
    place-items:center !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > .match-status,
  #pastGames .lobby.gfl-live > .player.matched > .match-status.countdown,
  #pastGames .lobby.gfl-live > .player.matched > .match-status.spinning,
  #pastGames .lobby.gfl-live > .player.matched > .match-status.result {
    grid-area:result !important;
    position:static !important;
    inset:auto !important;
    display:grid !important;
    place-items:center !important;
    justify-self:center !important;
    align-self:center !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    line-height:38px !important;
  }
  #pastGames .lobby.gfl-live > .player.matched > .match-status.countdown { font-size:24px !important; }
  #pastGames .lobby.gfl-live > .player.matched > .match-status .match-result-icon {
    display:block !important;
    width:36px !important;
    height:36px !important;
    margin:0 !important;
  }
  #pastGames .lobby.gfl-live > .offer {
    grid-area:offer !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    overflow:hidden !important;
    margin:0 !important;
  }
  #pastGames .lobby.gfl-live > .pot {
    grid-area:pot !important;
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-self:end !important;
    white-space:nowrap !important;
    margin:0 !important;
    font-size:14px !important;
  }
  #pastGames .lobby.gfl-live > .actions {
    grid-area:actions !important;
    display:block !important;
    margin:0 !important;
  }
  #pastGames .lobby.gfl-live > .actions .join { display:none !important; }
  #pastGames .lobby.gfl-live > .actions .view {
    display:block !important;
    min-width:48px !important;
    height:30px !important;
    margin:0 !important;
    padding:0 9px !important;
    font-size:10px !important;
    line-height:30px !important;
  }
  #pastGames .lobby.gfl-live > .chance { display:none !important; }

  /* A crest gets a fixed 15px slot next to the clipped display name. */
  :is(#gfLobby,#pastGames) .lobby.gfl-live > .player.matched > .live-match-player > span {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 15px !important;
    grid-template-rows:20px 14px !important;
    align-items:center !important;
    column-gap:4px !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  :is(#gfLobby,#pastGames) .lobby.gfl-live > .player.matched > .live-match-player > span > b {
    grid-column:1 !important;
    grid-row:1 !important;
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  :is(#gfLobby,#pastGames) .lobby.gfl-live > .player.matched > .live-match-player > span > .gfl-rank {
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
    width:15px !important;
    min-width:15px !important;
    height:15px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:contain !important;
  }
  :is(#gfLobby,#pastGames) .lobby.gfl-live > .player.matched > .live-match-player > span > .gfl-handle {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  :is(#gfLobby,#pastGames) .lobby.gfl-live > .player.matched > .live-match-player.opponent > span > b {
    text-align:right !important;
  }

  /* The checker must render above the replay viewer. */
  #gfFairModal.modal.show { z-index:2147483647 !important; }
}

/* Create / join summary on phones.
   The range hint is a real grid row instead of an absolutely centred overlay:
   item count, GF value, match range, and the Heads/Tails picker can never
   occupy the same space. */
@media (max-width:900px) {
  #creator .creator-total {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-areas:
      "count amount clear"
      "hint hint hint"
      "side side side" !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:10px !important;
    min-height:0 !important;
    padding:12px 0 !important;
  }
  #creator .creator-total > #selectionCount {
    grid-area:count !important;
    justify-self:start !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #creator .creator-total > b,
  #creator .creator-total > .creator-amount {
    grid-area:amount !important;
    display:inline-flex !important;
    justify-self:center !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:20px !important;
  }
  #creator .creator-total > b em,
  #creator .creator-total > .creator-amount em {
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    margin:0 !important;
  }
  #creator .gfj-hint {
    grid-area:hint !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:flex !important;
    justify-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font:800 13px/1.2 "Space Grotesk","Manrope",sans-serif !important;
    letter-spacing:0 !important;
  }
  #creator .gfj-hint .g-coin { width:16px !important; height:16px !important; }
  #creator #cfSide,
  #creator .cf-side {
    grid-area:side !important;
    display:grid !important;
    grid-template-columns:46px 46px !important;
    grid-template-rows:46px !important;
    justify-self:center !important;
    justify-content:center !important;
    width:99px !important;
    height:46px !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #creator #cfSide .cf-side-lbl,
  #creator .cf-side .cf-side-lbl { display:none !important; }
  #creator #cfSide .cf-side-btn,
  #creator .cf-side .cf-side-btn {
    grid-row:1 !important;
    width:46px !important;
    height:46px !important;
    margin:0 !important;
  }
  #creator #cfSide .cf-side-btn img,
  #creator .cf-side .cf-side-btn img { width:31px !important; height:31px !important; }
  #creator #clearOffer,
  #creator .creator-total > button {
    grid-area:clear !important;
    justify-self:end !important;
    align-self:center !important;
    min-width:54px !important;
    height:34px !important;
    margin:0 !important;
    padding:0 7px !important;
    font-size:9px !important;
  }
  #creator.gf-join-mode #cfSide,
  #creator.gf-join-mode .cf-side { display:none !important; }
  #creator.gf-join-mode .creator-total {
    grid-template-areas:
      "count amount clear"
      "hint hint hint" !important;
  }
}