/* Shared leaderboard styling - matches Paw Words across all games */

/* ════════════════════════════════════════════════════════════
   LEADERBOARD MODAL CHROME - single source of truth for all 4
   games (Paw Words, Connect Paws, Paw Logic, Paw Paths).
   Per-game CSS must not redefine any .lb-* class below.
   ════════════════════════════════════════════════════════════ */
.lb-panel{
  background:linear-gradient(160deg,#2e1a0c,#1e1008);
  border:1.5px solid rgba(255,210,140,0.22);
  border-radius:24px;
  padding:22px 18px 20px;
  width:100%;
  max-width:380px;
  position:relative;
  max-height:88vh;
  max-height:88dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.lb-panel::-webkit-scrollbar{display:none}
body.light .lb-panel, .light .lb-panel{
  background:linear-gradient(160deg,#fdf5e4,#f5edd8);
  border-color:rgba(26,15,9,0.12);
}
.lb-close{
  position:absolute;top:10px;right:10px;width:44px;height:44px;
  border-radius:50%;background:transparent;border:none;
  color:rgba(245,237,216,.65);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color 0.2s;
}
.lb-close::before{content:'';position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(255,210,140,.1);border:1px solid rgba(255,210,140,.2);transition:background 0.2s}
.lb-close:hover::before{background:rgba(255,210,140,.2)}
.lb-close:hover{color:#F5EDD8}
.lb-close span{position:relative;z-index:1}
body.light .lb-close, .light .lb-close{color:rgba(44,26,10,.5)}
body.light .lb-close:hover, .light .lb-close:hover{color:#2c1a0a}
.lb-heading{font-family:'Bree Serif',Georgia,serif;font-size:22px;color:#F5EDD8;margin-bottom:6px;text-align:center}
body.light .lb-heading, .light .lb-heading{color:#2c1a0a}
.lb-subhead{font-family:'DM Sans',system-ui,sans-serif;font-size:13px;color:rgba(245,237,216,.65);margin:-4px 0 14px;text-align:center}
body.light .lb-subhead, .light .lb-subhead{color:rgba(44,26,10,.55)}

.lb-list{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.lb-loading{text-align:center;color:rgba(245,237,216,0.65);padding:8px 20px 16px;font-size:14px;font-family:'DM Sans',system-ui,sans-serif}
.lb-month{font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#E8801C;text-align:center;margin:0 0 12px}
.lb-row--top3{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:14px 18px;border-radius:28px;border:1px solid rgba(199,140,73,.45);background:linear-gradient(135deg,rgba(120,58,18,.28),rgba(49,22,6,.48));overflow:hidden}
.lb-row--top3::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.045),transparent 62%);pointer-events:none}
.lb-medal{position:relative;z-index:2;font-size:34px;width:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-avatar-wrap{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#dfc08f,#7a4b1f);flex-shrink:0;display:block;overflow:hidden}
.lb-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.lb-avatar--blank{display:block;width:100%;height:100%;border-radius:50%;background:rgba(26,15,9,.5);border:1px solid rgba(245,237,216,.12)}
.lb-row--top3 .lb-name{position:relative;z-index:2;flex:1;min-width:0;font-size:1.2rem;font-weight:700;font-family:'DM Sans',system-ui,sans-serif;color:#f5ead8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row--top3 .lb-pts{position:relative;z-index:2;font-size:1rem;font-weight:700;color:#f3c84e;white-space:nowrap;margin-left:auto;flex-shrink:0;font-family:'DM Sans',system-ui,sans-serif}
.lb-rest{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.lb-row--rest{display:flex;align-items:center;gap:10px;background:rgba(255,210,140,.04);border:1px solid rgba(255,210,140,.18);border-radius:10px;padding:8px 14px;font-size:14px}
.lb-row--rest .lb-rank{font-family:'Bree Serif',Georgia,serif;font-size:13px;color:rgba(245,237,216,.65);width:18px;text-align:center;flex-shrink:0}
.lb-row--rest .lb-name{flex:1;min-width:0;color:#F5EDD8;font-weight:500;font-family:'DM Sans',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row--rest .lb-pts{font-size:13px;color:#f5c842;font-weight:700;flex-shrink:0;font-family:'DM Sans',system-ui,sans-serif}
.lb-note{font-family:'DM Sans',system-ui,sans-serif;font-size:.74rem;color:rgba(245,237,216,.45);text-align:center;margin:12px 0 0;line-height:1.5}
/* "Your row" highlight - shared across Paw Words, Merge, Connect Paws, Paw Paths */
.lb-row--me.lb-row--top3{border-color:rgba(201,122,53,.75);box-shadow:0 0 0 1px rgba(201,122,53,.35),inset 0 0 24px rgba(201,122,53,.08)}
.lb-row--me.lb-row--rest{background:rgba(201,122,53,.14);border-color:rgba(201,122,53,.45)}
/* "You" indicator - same green dot used in the navbar's signed-in account menu (.cp-auth-dot) */
.lb-you-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5a7a4a;margin-left:6px;vertical-align:middle;flex-shrink:0}

/* Scoring footer (point breakdown) - shared chrome; each game keeps its own row labels */
.lb-scoring{border-top:1px solid rgba(255,210,140,.18);padding-top:16px;margin-top:16px}
body.light .lb-scoring, .light .lb-scoring{border-top-color:rgba(44,26,10,.18)}
.lb-scoring-title{font-family:'DM Sans',system-ui,sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(245,237,216,.65);text-align:center;margin-bottom:10px}
body.light .lb-scoring-title, .light .lb-scoring-title{color:rgba(44,26,10,.55)}
.lb-scoring-grid{display:grid;grid-template-columns:1fr auto;max-width:240px;margin:0 auto;gap:6px 10px;font-size:13px;color:#F5EDD8;align-items:center;font-family:'DM Sans',system-ui,sans-serif}
body.light .lb-scoring-grid, .light .lb-scoring-grid{color:#2c1a0a}
.lb-scoring-pts{color:#f3c84e;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
body.light .lb-scoring-pts, .light .lb-scoring-pts{color:#a85e1a}
@media (max-width:700px){
  .lb-row--top3{min-height:76px;padding:12px 14px;gap:10px}
  .lb-medal{font-size:26px;width:30px}
  .lb-avatar-wrap{width:52px;height:52px}
  .lb-row--top3 .lb-name{font-size:.92rem}
  .lb-row--top3 .lb-pts{font-size:.88rem}
}

/* v1.5.254 - shared light-mode lb-row contrasts for body.light games */
body.light .lb-row--top3,
.light .lb-row--top3{
  background:linear-gradient(135deg,rgba(255,228,176,.72),rgba(230,195,128,.60));
  border-color:rgba(168,94,26,0.38);
}
body.light .lb-row--top3 .lb-name,
.light .lb-row--top3 .lb-name{ color:#2c1a0a; }
body.light .lb-row--top3 .lb-pts,
.light .lb-row--top3 .lb-pts{ color:#a85e1a; }
body.light .lb-row--rest,
.light .lb-row--rest{
  background:rgba(255,210,140,0.10);
  border-color:rgba(168,94,26,0.22);
}
body.light .lb-row--rest .lb-name,
.light .lb-row--rest .lb-name{ color:#2c1a0a; }
body.light .lb-row--rest .lb-rank,
.light .lb-row--rest .lb-rank{ color:rgba(44,26,10,0.45); }
body.light .lb-row--rest .lb-pts,
.light .lb-row--rest .lb-pts{ color:#a85e1a; }
body.light .lb-row--me.lb-row--rest,
.light .lb-row--me.lb-row--rest{
  background:rgba(201,122,53,0.12);
  border-color:rgba(201,122,53,0.40);
}
body.light .lb-loading,
.light .lb-loading{ color:rgba(44,26,10,0.55); }
body.light .lb-note,
.light .lb-note{ color:rgba(44,26,10,0.42); }

/* ── Month display + navigation - v1.0.230 ────────────────────────────────
   Shared across all 5 games. Do not redefine in per-game CSS.
   ────────────────────────────────────────────────────────────────────────*/
.lb-month-display {
  font-family: 'Bree Serif', Georgia, serif;
  font-size: .95rem;
  color: #E8801C;
  text-align: center;
  margin: -6px 0 8px;
  letter-spacing: .02em;
}
body.light .lb-month-display,
.light .lb-month-display { color: #a85e1a; }

.lb-month-nav { margin: 0 0 16px; }

.lb-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border: 1px solid rgba(255,210,140,0.18);
  border-radius: 10px;
  padding: 5px 8px;
  background: rgba(255,210,140,0.04);
}
body.light .lb-nav-inner,
.light .lb-nav-inner {
  border-color: rgba(44,26,10,0.12);
  background: rgba(44,26,10,0.03);
}

.lb-nav-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #F5EDD8;
  text-align: center;
  flex: 1;
  white-space: nowrap;
}
body.light .lb-nav-label,
.light .lb-nav-label { color: #2c1a0a; }

.lb-nav-btn {
  background: transparent;
  border: none;
  color: rgba(245,237,216,0.68);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 500;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
.lb-nav-btn:hover:not(:disabled) {
  background: rgba(255,210,140,0.12);
  color: #F5EDD8;
}
.lb-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
body.light .lb-nav-btn,
.light .lb-nav-btn { color: rgba(44,26,10,0.52); }
body.light .lb-nav-btn:hover:not(:disabled),
.light .lb-nav-btn:hover:not(:disabled) {
  background: rgba(44,26,10,0.06);
  color: #2c1a0a;
}