/* Leaderboard modal: compact, always-readable phone landscape (including X's
   in-app Chrome view, where the top browser chrome reduces visible height).
   Display changes only. No score, session, or storage logic is touched. */
@media (orientation:landscape) and (max-height:700px) {
  #leaderboard {
    box-sizing:border-box;
    padding:
      max(4px, env(safe-area-inset-top))
      max(5px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(5px, env(safe-area-inset-left));
    overflow:hidden;
  }
  #leaderboard .card {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    width:min(96vw,940px);
    /* A definite card height is essential. The earlier max-height-only
       layout shrank #leaderRows to zero behind the fixed Close button. */
    height:calc(100dvh - 12px);
    max-height:calc(100dvh - 12px);
    min-height:0;
    margin:auto;
    padding:clamp(6px,1.4dvh,10px) clamp(8px,1.7vw,15px);
    overflow:hidden;
    border-width:2px;
    border-radius:17px;
    text-align:center;
  }
  #leaderboard .card > .tag {
    flex:0 0 auto;
    font-size:clamp(9px,1.65dvh,11px);
    line-height:1.05;
    margin:0;
  }
  #leaderboard .card > h1 {
    flex:0 0 auto;
    font-size:clamp(20px,5dvh,29px);
    line-height:1.02;
    margin:0 0 2px;
  }
  #leaderboard .card > p.small {
    flex:0 0 auto;
    font-size:clamp(10px,2dvh,12px);
    line-height:1.12;
    margin:0;
  }
  #leaderboard .leaderTabs {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    column-gap:clamp(4px,.75vw,8px);
    row-gap:3px;
    margin:clamp(3px,.8dvh,6px) 0 0;
  }
  #leaderboard .leaderTab {
    flex:0 0 auto;
    min-height:clamp(26px,6.5dvh,34px);
    border-width:1.5px;
    padding:4px clamp(6px,1vw,10px);
    font-size:clamp(10px,2.15dvh,12px);
    line-height:1.1;
    margin:0;
    touch-action:manipulation;
  }
  #leaderboard #leaderStatus {
    flex:0 0 auto;
    min-height:0;
    margin:clamp(3px,.7dvh,6px) 0 3px;
    font-size:clamp(11px,2.3dvh,14px);
    line-height:1.12;
  }
  #leaderboard #leaderRows {
    display:block;
    box-sizing:border-box;
    /* Scores get ALL remaining height, not whichever space an intrinsic
       table happens to occupy during its first async render. */
    flex:1 1 0%;
    height:auto;
    width:100%;
    min-height:48px;
    max-height:none;
    padding:0;
    overflow-y:auto;
    overflow-x:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    touch-action:pan-y;
    text-align:left;
  }
  #leaderboard .leaderTable {
    width:100%;
    margin:0;
    border-collapse:separate;
    border-spacing:0;
    font-size:clamp(10px,2dvh,12px);
    line-height:1.18;
  }
  #leaderboard .leaderTable thead {
    position:sticky;
    top:0;
    z-index:1;
    background:#fff7e1;
  }
  #leaderboard .leaderTable th {
    white-space:nowrap;
    font-size:clamp(10px,1.8dvh,11px);
    background:#fff7e1;
    border-bottom:2px solid #a9b59c;
  }
  #leaderboard .leaderTable td,
  #leaderboard .leaderTable th {
    padding:clamp(4px,1.05dvh,7px) clamp(3px,.8vw,7px);
  }
  #leaderboard .leaderTable td {white-space:nowrap}
  #leaderboard #closeLeaderboard {
    flex:0 0 auto;
    display:block;
    align-self:stretch;
    box-sizing:border-box;
    min-height:clamp(31px,7dvh,42px);
    width:100%;
    margin:clamp(4px,1dvh,7px) auto 0;
    padding:5px 10px;
    font-size:clamp(12px,2.35dvh,15px);
    line-height:1.2;
    touch-action:manipulation;
  }
}
/* Extremely short Android in-app-browser landscape.
   Remove decorative copy before taking space away from actual rankings. */
@media (orientation:landscape) and (max-height:400px) {
  #leaderboard .card {
    padding:4px 8px 5px;
    height:calc(100dvh - 8px);
    max-height:calc(100dvh - 8px);
    border-radius:13px;
  }
  #leaderboard .card > .tag,
  #leaderboard .card > p.small {display:none}
  #leaderboard .card > h1 {font-size:clamp(18px,5.5dvh,23px);margin:0}
  #leaderboard .leaderTabs {margin:3px 0 0}
  #leaderboard .leaderTab {min-height:25px;font-size:10px;padding:3px 6px}
  #leaderboard #leaderStatus {font-size:11px;margin:2px 0}
  #leaderboard #leaderRows {min-height:42px}
  #leaderboard #closeLeaderboard {min-height:29px;margin-top:3px;font-size:12px}
}