/* Shared ranking panel and mobile sheet. */
.desktop-ranking,
.home-right-column,
.ranking-reveal { display: none; }

/* Panel show/hide switches immediately; only the score digits update during counting. */
.desktop-ranking,
.desktop-ranking * {
  animation: none;
  transition: none;
  scroll-behavior: auto;
}

  .ranking-panel {
    width: min(100%, 360px);
    max-height: 100%;
    color: var(--text);
    font-family: var(--modal-font);
    box-shadow: 0 16px 48px #0006;
  }
  .ranking-panel-header { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .ranking-panel-header .ranking-hide { padding: 0 12px 0 0; color: var(--text); }
  .ranking-reveal-title { font-size: 20px; font-weight: 700; text-align: center; }
  .ranking-reveal-action { padding-right: 12px; font-size: 14px; text-align: right; }
  .ranking-panel-header h2 { font-size: 20px; }
  .ranking-panel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
  .ranking-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
  .ranking-table caption { padding: 10px 0 0; color: var(--muted); font-size: 11px; text-align: right; }
  .ranking-table th, .ranking-table td { height: 36px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ranking-table th { font-weight: 400; text-align: left; }
  .ranking-table tr:last-child > * { border-bottom: 0; }
  .ranking-position { width: 32px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .ranking-flag { display: inline-block; width: 30px; font-size: 17px; vertical-align: middle; }
  .ranking-table .ranking-count { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
  .ranking-global th, .ranking-global td { height: 52px; font-weight: 700; font-size: 15px; }
  .ranking-global .ranking-count { color: var(--pink); }
  .ranking-panel-footer {
    flex: 0 0 auto;
    padding: 16px 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }
@media (min-width: 901px), (min-width: 769px) and (min-height: 501px) {
  [data-page="index"] .site-layout { height: 100svh; min-height: 0; }
  [data-page="index"] .site-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    align-items: center;
    padding: 24px 0;
  }
  [data-page="index"] .site-main > .container {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  [data-page="index"] #logoBtn { width: min(420px, calc(100% - 40px)); }
  [data-page="index"] #logoBtn img { width: 100%; max-width: none; }
  .desktop-ranking {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1;
    min-width: 0;
    padding: 0 20px;
    height: 100%;
  }
  .home-right-column { display: block; grid-column: 3; }
  .ranking-reveal {
    position: fixed;
    bottom: 0;
    left: calc(100% / 6);
    transform: translateX(-50%);
    z-index: 900;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    width: min(360px, calc(100% / 3 - 40px));
    min-height: 52px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-family: var(--modal-font);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 -8px 32px #0004;
  }
  [data-page="index"] .footer .copyright {
    max-width: calc(100vw / 3 - 32px);
    margin-inline: auto;
  }

}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  [data-page="index"] .site-layout { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .desktop-ranking {
    position: fixed;
    inset: auto 0 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    font-family: var(--modal-font);
  }
  .desktop-ranking.is-expanded { inset: 0; height: 100dvh; }
  .ranking-reveal {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    align-items: center;
    width: 100%;
    min-height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-family: var(--modal-font);
    cursor: pointer;
    box-shadow: 0 -8px 32px #0004;
  }
  .ranking-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
  }
  .ranking-panel-header {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .ranking-panel-header h2, .ranking-reveal-title { font-size: 20px; }
  .ranking-panel-body { flex: 1; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .ranking-table th, .ranking-table td { height: 44px; padding-block: 10px; }
  .ranking-panel-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

.ranking-sync-status { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ranking-retry { min-height: 44px; margin: 0 0 12px; padding: 8px 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }

/* CPS comes from the server snapshot. Only accepted score changes animate. */
.ranking-metrics { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 3px 8px; }
.ranking-cps { color: #59df92; font-size: 11px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranking-number-wrap { display: inline-flex; position: relative; max-width: 100%; min-width: 0; }
.ranking-number { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ranking-global .ranking-cps { font-size: 12px; }

.ranking-table { table-layout: fixed; }
.ranking-col-position { width: 28px; }
.ranking-col-metrics { width: 45%; }