/* styles.css
   Minimal, responsive CSS for a clean leaderboard-only page.
   Breakpoint: mobile <= 768px
*/
:root{
  --bg: #eef1f5;
  --panel: #ffffff;
  --ink: #1a1a1f;
  --muted: #6b6f76;
  --primary: #2c246b;    /* deep indigo like in the screenshot */
  --accent: #c59b2b;     /* gold for ribbons */
  --line: #e6e7eb;
  --shadow: 0 10px 25px rgba(21, 23, 31, .08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* Page shell */
.shell{
  max-width: 1080px;   /* take the space where the left menu used to be */
  margin: clamp(12px, 2.5vw, 32px) auto;
  padding: 0 clamp(12px, 2vw, 24px);
}

/* Leaderboard panel */
.leaderboard{
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #dde1e8;
}

/* Header (kept tiny, no global site header, no tabs) */
.lb-header{
  background: var(--primary);
  color: #fff;
  padding: 18px 22px;
}
.lb-title{
  margin: 0;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.2vw, 22px);
}
.lb-status{
  margin: 6px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
}

/* Summary card */
.summary-card{
  position: relative;
  background: linear-gradient(180deg, #fafbfe 0%, #ffffff 80%);
  padding: 56px 22px 22px;
  text-align: center;
}

.summary-avatar{
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  width: 96px; height: 96px;
  border-radius: 999px;
  background: #fff;
  border: 6px solid #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.summary-avatar img{ width:100%; height:100%; object-fit: cover; }

/* Ribbons */
.ribbon{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color:#fff;
  padding: 10px 18px;
  border-radius: 10px;
  min-width: 140px;
  box-shadow: 0 6px 0 rgba(197,155,43,.35);
}
.ribbon-right{}
.ribbon-title{
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .8px;
  opacity:.95;
}
.ribbon-score{
  font-size: 18px;
}

.summary-left,
.summary-right{
  position: absolute;
  top: 8px;
}
.summary-left{ left: 16px; }
.summary-right{ right: 16px; }

.summary-subtitle{
  margin: 54px 0 0;
  color: var(--muted);
  font-weight: 600;
}
.trophy{ filter: grayscale(0.1); margin-right: 6px; }

/* List */
.lb-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.lb-row{
  display: grid;
  grid-template-columns: 44px 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.lb-row:last-child{ border-bottom: none; }

.pos{
  color: var(--muted);
  font-weight: 700;
  text-align: right;
  width: 44px;
}
.avatar{
  width: 48px; height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.who .name{
  font-weight: 700;
}
.who .meta{
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.points{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #7b6220;
}

/* Hover affordance on desktop */
@media (hover:hover){
  .lb-row:hover{ background: #fafbff; }
}

/* MOBILE (no site header, no achievements tab — already removed)
   Keep the main content comfortable and readable. */
@media (max-width: 768px){
  .shell{ padding: 0 12px; }
  .lb-header{ padding: 14px 16px; }
  .summary-left, .summary-right{
    position: static;
    display: inline-flex;
    margin: 8px 6px 0;
  }
  .summary-card{
    padding: 48px 12px 16px;
  }
  .lb-row{
    grid-template-columns: 28px 44px 1fr auto;
    gap: 12px;
    padding: 12px 12px;
  }
  .avatar{ width: 40px; height: 40px; }
  .ribbon{ min-width: 120px; padding: 8px 12px; }
}

/* ==== base & shell (safe to keep if you already use the earlier file) ==== */
:root {
    --bg: #eef1f5;
    --panel: #fff;
    --ink: #1a1a1f;
    --muted: #6b6f76;
    --line: #e6e7eb;
    --primary: #2c246b; /* deep indigo header */
    --gold: #c59b2b; /* gold */
    --gold-dark: #b28b28;
    --silver: #9ea3ae;
    --bronze: #b86e2f;
    --shadow: 0 10px 25px rgba(21,23,31,.08);
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}

.shell {
    max-width: 1080px;
    margin: clamp(12px,2.5vw,32px) auto;
    padding: 0 clamp(12px,2vw,24px)
}

.leaderboard {
    background: var(--panel);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid #dde1e8
}

/* header strip inside the card */
.lb-header {
    background: var(--primary);
    color: #fff;
    padding: 18px 22px
}

.lb-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: clamp(18px,2.2vw,22px)
}

/* ==== HERO ribbon (no avatar, centered group name) ==== */
.hero {
    position: relative;
    background: linear-gradient(180deg,#fafbfe 0%,#fff 80%);
    padding: 26px 18px 18px;
    text-align: center
}

.banner {
    position: relative;
    margin: 0 auto;
    max-width: 860px;
    background: var(--gold);
    color: #fff;
    padding: 18px clamp(16px,3vw,36px);
    border-radius: 12px;
    box-shadow: 0 6px 0 rgba(197,155,43,.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .banner:before, .banner:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 62px;
        height: 30px;
        background: var(--gold-dark);
        transform: translateY(-50%) skewX(-12deg);
        z-index: -1
    }

    .banner:before {
        left: -28px
    }

    .banner:after {
        right: -28px
    }

.group-name {
    flex: 1;
    text-align: center;
    font-size: clamp(24px,4.2vw,44px);
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(0,0,0,.08)
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.banner-right.stat {
    align-items: flex-end
}

.stat .label {
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .95
}

.stat .value {
    font-weight: 800;
    font-size: 20px
}

.summary-subtitle {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 600
}

/* ==== List ==== */
.lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

.lb-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line)
}

    .lb-row:last-child {
        border-bottom: none
    }

.pos {
    color: var(--muted);
    font-weight: 700;
    text-align: right;
    width: 44px
}

.who .name {
    font-weight: 800
}

.who .meta {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px
}

.points {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #7b6220
}

/* Hover feel on desktop */
@media (hover:hover) {
    .lb-row:hover {
        background: #fafbff
    }
}

/* ==== Top 3 medals (gold/silver/bronze) ==== */
.lb-list > li:nth-child(1) .pos,
.lb-list > li:nth-child(1) .points {
    color: var(--gold);
}

.lb-list > li:nth-child(2) .pos,
.lb-list > li:nth-child(2) .points {
    color: var(--silver);
}

.lb-list > li:nth-child(3) .pos,
.lb-list > li:nth-child(3) .points {
    color: var(--bronze);
}

/* Optional subtle left edge indicator */
.lb-list > li:nth-child(1) {
    box-shadow: inset 4px 0 0 var(--gold, #c59b2b);
}

.lb-list > li:nth-child(2) {
    box-shadow: inset 4px 0 0 var(--silver, #9ea3ae);
}

.lb-list > li:nth-child(3) {
    box-shadow: inset 4px 0 0 var(--bronze, #b86e2f);
}

/* ==== Mobile ==== */
@media (max-width:768px) {
    .shell {
        padding: 0 12px
    }

    .lb-header {
        padding: 14px 16px
    }

    .banner {
        padding: 14px 14px;
        border-radius: 10px
    }

        .banner:before, .banner:after {
            width: 42px;
            height: 24px
        }

    .stat .value {
        font-size: 18px
    }

    .lb-row {
        grid-template-columns: 32px 1fr auto;
        gap: 12px;
        padding: 12px
    }
}

@media (max-width:768px) {

    /* fix rank cell sizing & vertical alignment */
    .lb-row {
        grid-template-columns: 36px 1fr auto; /* a touch wider for the “n.” */
        align-items: start; /* top-align cells so rank lines up with name */
    }

    .pos {
        width: auto; /* stop overflowing the first column (was 44px) */
        text-align: right;
        align-self: start; /* ensure the number sticks to the top */
        line-height: 1; /* remove extra vertical slack */
        padding-top: 2px; /* tiny nudge to match name baseline */
    }
}