@layer app {
/* ============================================================
   Leaderboard page
   ============================================================ */
.leaderboard {
  /* Match .lobby (max-width 480, width 100%) so rank rows render at
     the same width as lobby cards. Without width: 100%, the element
     was sizing to its content's intrinsic width rather than filling
     the viewport up to the max, so on the iOS WebView the rows had
     visibly more horizontal margin than the lobby. */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px;
}

.leaderboard-header {
  text-align: center;
  margin-bottom: 16px;
}

.leaderboard-title {
  font-family: var(--font-flap);
  font-size: 28px;
  color: var(--page-text);
  margin: 0;
}

.leaderboard-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}

.leaderboard-tab {
  font-family: var(--font-flap);
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--screen-bg);
  color: var(--page-sub);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.leaderboard-tab:hover {
  background: var(--row-hover);
}

.leaderboard-tab.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange-dim);
}

.leaderboard-explainer {
  font-size: 13px;
  color: var(--page-sub);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
}

.daily-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.daily-date-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--page-fg);
  min-width: 120px;
  text-align: center;
}

.daily-date-arrow {
  font-size: 18px;
  color: var(--orange);
  text-decoration: none;
  padding: 4px 8px;
}

.daily-date-arrow.disabled {
  color: var(--page-sub);
  opacity: 0.3;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--screen-bg);
  border-radius: var(--radius);
  gap: 16px;
}

.leaderboard-row.is-you {
  background: var(--orange-glow);
  border: 1px solid var(--orange);
}

.leaderboard-rank-tile {
  font-family: var(--font-flap);
  font-size: 20px;
  font-style: italic;
  color: var(--flap-text);
  background: var(--cell-bg);
  border: 1px solid var(--cell-brd);
  border-radius: 4px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Italic numerals lean right; nudge content left so they look centered. */
  padding-right: 4px;
}

.leaderboard-gap {
  text-align: center;
  color: var(--page-sub);
  font-size: 18px;
  padding: 4px 0;
  line-height: 1;
}

.leaderboard-player-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.leaderboard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cell-bg);
  border: 1px solid var(--cell-brd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-flap);
  font-size: 14px;
  color: var(--page-text);
  flex-shrink: 0;
}

img.game-card-avatar--img,
img.gbar-avatar--img,
img.profile-avatar--img,
img.leaderboard-avatar--img,
img.recap-player-avatar--img {
  object-fit: cover;
  flex-shrink: 0;
}

.game-card-avatar--svg,
.gbar-avatar--svg,
.profile-avatar--svg,
.leaderboard-avatar--svg,
.recap-player-avatar--svg {
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}

.game-card-avatar--svg svg,
.gbar-avatar--svg svg,
.profile-avatar--svg svg,
.leaderboard-avatar--svg svg,
.recap-player-avatar--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.leaderboard-name {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--page-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.leaderboard-words {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--page-sub);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a.leaderboard-row,
a.leaderboard-row--linked {
  color: inherit;
  text-decoration: none;
}

a.leaderboard-row--linked:hover {
  background: var(--cell-bg);
}

.leaderboard-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--page-text);
  white-space: nowrap;
}

.leaderboard-secondary {
  font-size: 12px;
  color: var(--page-sub);
  font-weight: 400;
}

.leaderboard-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--page-sub);
  font-size: 14px;
}

.leaderboard-more {
  text-align: center;
  margin-top: 16px;
}

.leaderboard-back {
  text-align: center;
  margin-top: 20px;
}

/* Native app (WordtrakApp WebView)
   iOS uses NativeTabs (translucent overlay — WebView extends behind it, so we pad to clear it).
   Android uses standard Tabs (tab bar is outside the WebView viewport — no padding needed). */
body.native-app [data-back] { display: none; }
body.native-app-ios { padding-bottom: 100px; }
body.native-app-ios:has(.hand-actions-bar) { padding-bottom: 0; }
body.native-app-ios .hand-actions-bar { padding-bottom: 100px; }
body.native-app-ios .manual-nav { bottom: 100px; }

/* In-feed ad (AdSense) — sits as a card row inside a game-list section */
.in-feed-ad {
  margin: 8px 0;
  width: 100%;
  min-height: 90px;
}
.in-feed-ad .adsbygoogle { display: block; width: 100%; }
.in-feed-ad + .game-list-heading,
.in-feed-ad-placeholder + .game-list-heading { margin-top: 16px; }
.session-ad { width: 100%; max-width: 400px; margin: 32px auto 0; }
.homepage-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; width: 100%; max-width: 320px; }
.homepage-actions .btn { width: 100%; }
.daily-high-score { margin: 0; font-size: 13px; color: var(--label-col); text-align: center; letter-spacing: 1px; text-transform: uppercase; }
.daily-high-score strong { color: var(--orange); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.in-feed-ad-placeholder {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed color-mix(in srgb, var(--orange, #ff9900) 50%, transparent);
  color: color-mix(in srgb, var(--orange, #ff9900) 80%, transparent);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.native-app .in-feed-ad,
body.native-app .game-list-heading-ad,
body.native-app .in-feed-ad-placeholder { display: none; }

}