/* ===========================
   UnityPro – Points / Leaderboard CSS (clean)
   =========================== */

/* Shell & Heading */
.upp-wrap{max-width:1080px;margin-bottom:50px!important;margin-top:15px;}
.upp-h1{font-size:28px;font-weight:800;margin-bottom:15px !important;width:min(96vw,1080px);max-width:1080px;margin:0 auto;}

/* Hero */
.upp-hero{width:min(96vw,1080px);max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:280px 1fr;gap:28px;
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  padding:22px;box-shadow:0 1px 2px rgba(0,0,0,.04);margin-bottom:18px
}
@media (max-width:1000px){.upp-hero{grid-template-columns:1fr}}
.upp-hero .left{display:flex;flex-direction:column;align-items:flex-start}

/* Right: two columns (1–5 left, 6–10 right) */
.upp-hero .right{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px}
@media (max-width:800px){.upp-hero .right{grid-template-columns:1fr}}
.lvl-col{display:flex;flex-direction:column;gap:12px}

/* Avatar ring + points badge */
.upp-avatar{margin-top:15px;position:relative;width:170px;height:170px;display:grid;place-items:center}
.upp-avatar img{width:162px;height:162px;border-radius:50%}
.upp-ring{position:absolute;inset:-8px;border:8px solid var(--avatar-ring);border-radius:50%}
.upp-badge{
  position:absolute;right:-2px;bottom:6px;background:var(--avatar-ring);color:#fff;
  border-radius:999px;min-width:44px;height:44px;display:grid;place-items:center;
  border:3px solid #ffffff;font-size:22px;font-weight:800;padding:0 10px;box-shadow:0 2px 4px rgba(0,0,0,.08)
}
.upp-name-xl{font-size:20px;color:#353535;font-weight:600;margin-top:18px}
.upp-level-link a{margin:4px 0 0;font-size:15px;color:var(--avatar-ring);font-weight:700;text-decoration:none}
.upp-next{font-size:13px;color:#565656;font-weight:400;}
.upp-info{cursor:pointer;font-size:15px !important;color:#565656;}
.upp-info-hov{cursor:pointer;margin-left:5px;font-size:13px !important;color:#565656;}

/* center everything in the left column */
.upp-hero .left{ align-items:center; }

/* center the text under the avatar */
.upp-name-xl, .upp-level-link, .upp-next{
  text-align:center; width:100%;
}
.upp-info {margin-left:5px;}

.upp-avatar img{
  width:162px;height:162px;border-radius:50%;
  display:block;
  box-shadow:0 0 0 6px #fff;   /* ← white gap size */
}

/* Compact leaderboard (sidebar) */
.upp-card.upp-card-compact{padding:12px 14px;margin-top:15px;}
.upp-card-compact .upp-card-title{font-weight:700;margin:0 0 10px}
.upp-top-compact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.upp-top-compact li{display:grid;grid-template-columns:20px 28px 1fr auto;align-items:center;gap:8px}
.upp-top-compact .rank{width:24px;height:24px;border-radius:999px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#111827}
.upp-top-compact .ava{width:28px;height:28px;border-radius:999px;object-fit:cover}
.upp-top-compact .nm{font-weight:600; font-size:13px;text-decoration:none;color:#0f172a}
.upp-top-compact .nm:hover{text-decoration:underline}
.upp-top-compact .pts{font-weight:700;font-size:13px; opacity:.85}
.upp-compact-sep{height:1px;background:#e5e7eb;margin:10px 0 6px}
.upp-compact-more{text-align:center}
.upp-compact-link{font-weight:600;text-decoration:none}
.upp-compact-link:hover{text-decoration:underline}


/* Levels list — unified badge system */
.lvl-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:#fff;border:1px solid #eef2f7;border-radius:12px
}
/* single left badge: lock when locked, number when unlocked */
.lvl-badge{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:800
}
.lvl-badge.is-locked{background:#e5e7eb;position:relative}
.lvl-badge.is-locked::before{content:none} /* ensure no emoji/pseudo double-lock */
.lvl-badge.is-unlocked{background:#f3f4f6;color:#111827}
.lvl-badge.is-unlocked.current{background:#feeec7} /* highlight current */

/* dashicons lock inside the badge */
.lvl-badge .dashicons{font-size:20px;line-height:1}

/* text */
.lvl-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.lvl-title{margin:0;line-height:1.1;font-weight:700;color:#111827}
.lvl-sub{margin:4px 0 0;line-height:1.1;font-size:13px;color:#6b7280}

/* if you wrap a heading inside .lvl-title, nuke its margins too */
.lvl-title h1,
.lvl-title h2,
.lvl-title h3,
.lvl-title h4,
.lvl-title h5,
.lvl-title h6{margin:0;line-height:1.1}

/* Leaderboards (7-day / 30-day / all-time) */
.upp-grid{width:min(96vw,1080px);max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
@media (max-width:900px){.upp-grid{grid-template-columns:1fr}}
.upp-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;min-height:120px}
.upp-card-title{font-weight:800;color:#353535;font-size:18px;margin:6px 4px 10px}
.upp-top{list-style:none;margin:0;padding:0}
.upp-top li{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
  background:#fff;border:1px solid #eef2f7;margin-bottom:6px
}
.upp-top li .rank{width:18px;text-align:center;font-weight:800;color:#374151}
.upp-top li .ava{width:32px;height:32px;border-radius:50%}
.upp-top li .nm{flex:1;color:#111827;font-weight:600}
.upp-top li .pts{font-weight:800;color:#4b5563}

/* Modal */
/* Modal */
.upp-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* hidden by default */
  padding: 24px;                 /* keeps box off edges on small screens */
}
.upp-modal[aria-hidden="false"]{
  display: flex;                 /* center the box */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
}
.upp-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.55);
}

/* The dialog */
.upp-modal-box{
  position: relative;
  background: #fff;
  width: min(600px, 100%);
  max-height: 85vh;              /* so it never spills off-screen */
  overflow: auto;                /* scroll inside if content is tall */
  padding: 22px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* (Optional) small screens: tighten padding a bit */
@media (max-width: 480px){
  .upp-modal { padding: 12px; }
  .upp-modal-box { padding: 18px; }
}

.upp-modal-box h3{font-size:22px;margin:0 0 10px 0;font-weight:800}
.upp-modal-box p{font-size:14.5px;font-weight:500;line-height:1.4;color:#353535;}
.upp-levels-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.upp-levels-grid .it{display:flex;gap:4px;font-size:14.5px;color:#353535;}
.level-bold {color:#353535; font-weight:600;}
.myers-name{font-size:14.5px;font-weight:500;color:#353535;}
.points{font-size:14px;font-weight:500;color:#353535;}
.upp-close{
  margin-top:16px;border:0;background:#e8ce20;color:#333;border-radius:6px;width:100%;
  padding:10px 16px;font-weight:700;cursor:pointer
}
.upp-close:hover{
  margin-top:16px;border:0;background:#ffde00 !important;color:#333;border-radius:6px;width:100%;
  padding:10px 16px;font-weight:700;cursor:pointer
}

/* Full-bleed section whose inner content is centered and constrained */
.unitypro-leaderboard-screen .upp-shell{
  position: relative;
  width: 100vw;
  /* break out of theme container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  justify-content: center;

  background: #f3f5f9;
  min-height: 100vh;
  padding: 0;
}

/* The centered, max-width inner wrapper */
.unitypro-leaderboard-screen .upp-shell > .upp-wrap{
  width: 100%;
  max-width: 1180px;
  margin: 28px auto !important; /* vertical spacing only */
  padding: 0 18px;
  box-sizing: border-box;
}

/* In case a theme container clips overflow, unclip on common wrappers */
.unitypro-leaderboard-screen #primary,
.unitypro-leaderboard-screen .site-content,
.unitypro-leaderboard-screen .content-area{
  overflow: visible !important;
}




/* Breakdown (7d / 30d / All) */
.upp-breakdown{display:flex;gap:16px;margin-top:12px;font-size:13px;color:#475569}
.upp-breakdown .bd-it strong{font-weight:700;margin-right:6px}