:root {
  /* Slightly lighter purple hues for the page background */
  --bg1: #4b24b8;
  --bg2: #6520c8;
  --accent: #ffd33d;
  --accent-2: #ff7bd8;
  --white: #fff;
  --card: #6b2bd6;
  --glass: rgba(255, 255, 255, .12);
  --shadow: 0 8px 24px rgba(0, 0, 0, .25);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg2), var(--bg1));
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--white);
}

.phone {
  width: 390px;
  margin: 0 auto;
  min-height: 100dvh;
  background: transparent;
}

.page {
  padding: 8px 12px 120px;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  opacity: .95;
}

.back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass);
}

.top-title {
  font-weight: 600;
}


/* Rule button wrapper */
.rule-btn {
  position: absolute;
  top: 15px;
  right: 0px;
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  line-height: 0;       /* remove any text line-box */
  z-index: 3;
}

/* Rule button image */
.rule-img {
  display: block;
  width: 90px;     /* adjust to match your PNG size */
  height: auto;
  margin: 0px;
}

/* Rule text over the PNG */
.rule-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #fff;   /* text color – change if PNG is light */
  pointer-events: none; /* so clicking still hits the link */
}
/* Tabs wrapper (like toggle frame) */
.toggle-style .tabs {
  position: relative;
  width: 220px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url("images/button_slider_frame.png") no-repeat center/cover;
  border-radius: 999px;
  overflow: hidden;
}

/* sliding highlight */
.toggle-style .tabs::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px; /* default = "This Week" */
  width: calc(50% - 10px);
  height: calc(100% - 10px);
  background: linear-gradient(135deg, #ff7bd8, #ffd33d);
  border-radius: 999px;
  transition: left 0.3s ease;
  z-index: 1;
}

/* move highlight when last week is active */
.toggle-style .tabs.second-active::before {
  left: calc(50% + 5px);
}

/* tab styles */
.toggle-style .tabs .tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  position: relative;
  z-index: 2; /* keep text above the highlight */
  text-decoration: none;
}
/* Space below the toggle-style before the gift slider */
.toggle-style {
  margin-bottom: 15px; /* default mobile spacing */
}

/* Tablet */
@media (min-width: 768px) {
  .toggle-style {
    margin-bottom: 20px;
  }
}

/* Laptop */
@media (min-width: 1024px) {
  .toggle-style {
    margin-bottom: 25px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .toggle-style {
    margin-bottom: 30px;
  }
}











@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* helper */
.note {
  font-size: 11px;
  text-align: center;
  opacity: .9;
}

.hide-scroll {
  scrollbar-width: none;
}

.hide-scroll::-webkit-scrollbar {
  display: none;
}

/* Demo footer gap */
.spacer {
  height: 60px;
}

/* Small phones */
@media (max-width: 400px) {
  .phone {
    width: 100vw;
  }
}
.banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
    position: relative;
    padding: 0;           /* no inner gap */
  margin: 0;
}

.banner-img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  display: block;
}
/* Rectangle container is the positioning context */
.rect-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  display: inline-block;
}

/* Base rectangle */
.rect-banner {
  width: 100%;
  height: auto;          /* keep natural ratio */
  max-height: 40vh;      
  display: block;
   object-fit: contain;   /* safe scaling */
}


/* Hang the frame on the top-middle edge of the rectangle */
.frame-box {
  position: absolute;
  left: 50%;
  top: 0;                        
  transform: translate(-50%, -50%); 
  z-index: 3;                    
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;          
}

.frame-img {
  width: 260px;                  
  height: auto;
  display: block;
}

.frame-text {
  position: absolute;
  font-weight: 700;
  font-size: 16px; 
      top: 40%;           
  color: #fff;
  text-align: center;
  line-height: 1;
}

/* ——— TOP3 layout ——— */
.top3-container {
  position: absolute;           
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  width: 92%;
  z-index: 5;
  margin-top: clamp(8px, 2vw, 24px);
}

/* All three frames: same size */
.main-frame {
  position: relative;
  width: 140px;                 /* set a uniform width */
  height: 200px;                
  text-align: center;
}

.frame-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Content positioning: use absolute coordinates so nothing drifts */
.frame-content {
  position: absolute;
  inset: 0;
}

/* Circular frame: slightly overlapping but mostly inside */
.circular-frame {
  position: absolute;
  left: 50%;
  top: 12px;               /* More inward compared to 4px */
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
}


/* Circular border sits on top */
.circular-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* User photo inside the circular border */
.userphoto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;                  /* smaller than frame so it fits the ring */
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}
/* User name text */
.user-name {
  margin-top: 105px;       /* pushes text below the circle */
  font-size: 13px;         /* smaller text */
  font-weight: 600;
  text-align: center;
  color: purple;
}

/* Smaller capsule, inside the frame */
.main-frame .capsule {
  position: absolute;
  left: 50%;
  top: 110px;                   
  transform: translateX(-50%);
  background: #46458b;
  color: #000;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.2;
 margin-top: 14px; 
}


.main-frame .user-name,
.main-frame .capsule {
  -webkit-user-select: none;
  user-select: none;
}

.badge-box {
  position: absolute;
  top: 8px;   /* padding from top edge of rectangle */
  left: 8px;  /* padding from left edge */
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 20; /* make sure it's above frames */
}

.badge-img {
  width: 80px;   /* bigger size so it overlaps circular frame */
  height: auto;
}

.badge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center inside png */
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}
.star-list {
  display: flex;
  justify-content: space-between; /* push badges to take full width with spacing only at edges */
  margin: 0 20px 15px;  /* space top + padding from start/end */
}

.star-badge {
  position: relative;
  flex: 1; /* each badge takes equal width */
  margin: 0 2px; 
}

.star-badge img {
  width: 100%;
  height: auto;
  display: block;
}

.star-badge span {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px; /* smaller text */
  font-weight: 200;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}


    /* Main container with side gradient */
    .container {
        position: relative;
        width: 95%;
  max-width: 400px;
  margin: 40px auto 20px auto;
  border: 2px solid #FFD700;   /* slim golden border */
  background: #6b2bd6;
  padding: 20px 10px 20px 10px; 
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  z-index: 1;     
   
 
    }




    /* Countdown box */
    .countdown {
       display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;         /* spacing between boxes */
  margin: 5px auto; /* center horizontally */
  max-width: 350px; 
  margin-top: 10px; 
    }

    .time-box {
      width: 40px;      
  height: 40px;     
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
  color: #fff;      /* text color */
  background: url("images/countdown_box.png") no-repeat center;
  background-size: contain; /* scale PNG to fit box */
  border-radius: 8px; 
    }
.unit-text {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin: 0 4px;
  text-align: center;
}
/* Colons between time boxes */
.colon {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin: 0 2px;
}


.paragraph {
  font-size: 10px; 
  /* reduce from default size */
  line-height: 1.4; /* optional: adjust spacing between lines */
  color: #fff;  
   margin-bottom: 15px;
  padding: 0 15px;   /* ← 15px space on left & right */
  text-align: center; /* optional: keep text centered *    /* keep text color white or as needed */
}





    /* Cards */
    .card {
      background: linear-gradient(90deg, #a66bff, #6b2bd6);
      border-radius: 15px;
      padding: 15px;
      margin: 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .rank {
      font-size: 20px;
      font-weight: bold;
    }

    .user {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 3px solid #ffd33d;
    }

    .points {
      font-size: 16px;
      background: #ffd33d;
      color: black;
      border-radius: 8px;
      padding: 5px 10px;
    }

    .supporter {
      background: #ff7bd8;
      padding: 5px 10px;
      border-radius: 10px;
      font-size: 14px;
    }
    .top-frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* center + lift half above border */
  z-index: 2; /* stay above border *ay above border */
}

.top-frame img {
  width: 360px;  /* set based on your PNG size */
  height: 400;
  display: block;
}



/*
 * Leaderboard card styling for positions beyond the top 3.
 * Each card displays a decorative gradient background with a star top
 * and contains the rank with crown, the user's avatar, and their coin count
 * with a trio of stars. The avatar is positioned slightly to the right
 * and the coin counter sits inside the frame at the right.
 */

.leader-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 16px auto;
  min-height: 110px;
  padding-top: 16px;
  box-sizing: border-box;
}

/* Gradient frame for the card */
.card-frame-below {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

/* Rank and name section with crown */
.left-section-below {
  position: absolute;
  top: 40px;
  left: 16px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.left-section-below .crown {
  width: 22px;
  height: auto;
  margin-right: 6px;
}

.left-section-below .name-below_1 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* Main user avatar section */
.main-user-below {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-20%);
  width: 70px;
  height: 70px;
  z-index: 3;
}

.main-user-below .circle-frame-below {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 0;
  left: 0;
  z-index: 2;
}

.main-user-below .user-img-below {
  position: absolute;
  width: 58px;
  height: 58px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

/* Stars and coin counter */
.score-below {
  position: absolute;
  top: 26px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* -------------------------------------------------------------------------
   Custom styles for the updated leaderboard project
   ------------------------------------------------------------------------- */

/* 
.tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px auto 14px;
  max-width: 320px;
}


.tabs .tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 30px;
  background: linear-gradient(180deg, #9e63ff, #6a2dd9);
  border: 2px solid #cda9ff22;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  box-shadow: var(--shadow);
  text-decoration: none;
}


.tabs .tab.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #3f0c6d;
  border-color: var(--accent);
} */

/* Gift list slider component */
.gift-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0;
}

.gift-scroll-btn {
  background: none;
  border: none;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
  padding: 0 6px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.gift-scroll-btn:hover {
  opacity: 1;
}

.gift-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gift-list::-webkit-scrollbar {
  display: none;
}

.gift-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.gift-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.gift-name-text {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .gift-item img {
    width: 44px;
    height: 44px;
  }
}

.stars-rating {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
}

.stars-rating img {
  width: 18px;
  height: 18px;
}

.capsule-below {
  position: relative;
  display: inline-block;
}

.capsule-img-below {
  width: 90px;
  height: auto;
}

.score-text-below {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/*
 * --------------------------------------------------------------------------
 * Supporter section for bottom leaderboard cards
 *
 * The "supporter" (or "receiver") information is displayed on the right
 * side of each leaderboard card.  It consists of a label (e.g. "Best
 * Supporter" or "Best Receiver"), an optional supporter name and a
 * circular avatar with its own decorative frame.  The container is
 * absolutely positioned within the card so it sits above the card
 * background and decorative elements.  Adjust the dimensions and
 * offsets to suit your design; these values were derived from the
 * provided Figma mockups and sample screenshots.
 */
.supporter-section {
  position: absolute;
  right: 12px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

/* Container for the label and supporter name.  We align text to the right
 * so that labels align neatly next to the avatar.  Small font sizes
 * maintain visual hierarchy relative to the main rank and name on the
 * left of the card. */
.supporter-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

/* Label text (e.g. "Best Supporter", "Best Receiver").  A contrasting
 * colour is used to make the label stand out from the card background.
 */
.supporter-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.9;
}

/* Name of the supporter/receiver.  Slightly larger than the label and
 * rendered in white for readability.  Names are constrained to one line;
 * overflowing text will fade with an ellipsis via the utility below.
 */
.supporter-name {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar container for the supporter.  Provides a fixed square area
 * within which we stack the decorative frame and the image.  The
 * dimensions should match the main avatar size for visual harmony.
 */
.supporter-photo {
  position: relative;
  width: 48px;
  height: 48px;
}

/* Decorative circular frame for supporter avatars.  Because the image
 * assets include padding, we match the container size exactly.  This
 * frame sits above the avatar image in the stacking order to preserve
 * the border.
 */
.supporter-photo .supporter-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Actual supporter image.  We inset it slightly inside the frame to
 * allow the border to show through.  The border-radius creates a
 * circular crop.  If no avatar is available, a default image can be
 * used from the markup.
 */
.supporter-photo .supporter-img {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

/*
 * ==========================================================================
 * Redesigned list card for positions 4 and beyond
 *
 * The new `.list-card` component restructures the leaderboard row to more
 * closely match the provided mockups.  Cards use a light gradient with a
 * golden border, arranged in a compact horizontal layout.  On the left
 * resides the rank and the primary user’s truncated name.  In the middle
 * we align two avatars (the ranked user and their best supporter) on
 * either side of a central score stack: star icons above and the coin
 * amount below.  The right side features the supporter avatar with a
 * small “Best Supporter” tag and their truncated name beneath.  Cards
 * automatically wrap on narrow screens.
 */
.list-card {
  position: relative;
  width: 100%;
  max-width: 360px;     /* match your PNG size */
  margin: 0px auto;
  box-sizing: border-box;
}

/* The frame image itself */
.list-card .card-frame {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* frame is just visual */
}

/* Content sits above the frame */
.list-card .card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 19px;       /* space inside frame */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box; 
}


.list-card .left-info {
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal center */
  justify-content: center;  /* vertical center */
  text-align: center;
  padding-right: 0;         /* remove extra right padding */
  height: 100%;             /* ensure it fills the left section */
  box-sizing: border-box;
}
.list-card .top-row {
  display: flex;
  align-items: flex-start;   /* align children to the top */
  justify-content: flex-start; /* align left */
  width: 100%;
  gap: 6px;                 /* optional spacing between items */
  position: relative;
}

/* Rank number on the left-most side */
.list-card .rank-area {
  position: absolute;   /* remove it from flex flow */
  top: 15px;             /* distance from top of card */
  left: 30px;            /* distance from left edge */
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}


.list-card .left-info .rank-label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;                /* remove padding/margin */
  line-height: 1;
}

.list-card .left-info .user-name {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  margin: 2px 0 0;          /* small spacing below rank */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Container for the avatars and score stack */
.list-card .center-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-sizing: border-box;
}

/* Row containing the two avatars and the score stack */
.list-card .avatars-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  gap: 6px;
}

/* Individual avatar container (left and right).  The size
 * matches the mid‑tier avatars used in the design. */
.list-card .avatar-container {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 52px;
}
.list-card .avatar-container .avatar-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.list-card .avatar-container .avatar-img {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

/* Tag indicating the role of the right avatar (Best Supporter/Receiver).  It
 * sits above the avatar on the right and uses a compact pill shape. */
.list-card .avatar-container .supporter-tag {
  position: absolute;
  top: -12px;
  right: -6px;
  background: linear-gradient(90deg, #f8a2ff, #e172e1);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 3;
}

/* Middle stack containing star icons and the coin amount.  Centered between
 * the avatars. */
.list-card .score-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  flex: 0 0 80px;
}
.list-card .score-stack .stars-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
  margin-top: 10px;
}
.list-card .score-stack .stars-row img {
  width: 27px;
  height: 27px;
}
/* Coin pill wrapper */
.list-card .score-stack .coin-pill {
  position: relative;
  width: 90%;                /* bigger pill inside score stack */
  max-width: 120px;          /* optional max size */
  aspect-ratio: 90/24;       /* maintain pill shape */
  margin: 0 auto; 
  margin-top: 2px;           /* center horizontally */
}

/* Capsule image */
.list-card .score-stack .coin-pill .pill-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* scales PNG properly */
  display: block;
}

/* Coin text on top of capsule */
.list-card .score-stack .coin-pill .coin-text {
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;         /* text size relative to pill */
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  max-width: 90%;             /* prevent overflow outside pill */
  pointer-events: none;       /* so clicks pass through if needed */
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .list-card .score-stack .coin-pill {
    width: 80%;
  }
  .list-card .score-stack .coin-pill .coin-text {
    font-size: 0.45rem;
  }
}

@media (min-width: 1024px) {
  .list-card .score-stack .coin-pill {
    width: 100%;
  }
  .list-card .score-stack .coin-pill .coin-text {
    font-size: 0.6rem;
  }
}
/* Right info container includes the supporter name below the avatar. */
.list-card .right-info {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.list-card .right-info .supporter-name {
  font-size: 9px;
  font-weight: 500;
  color: #fff;
  margin-top: 2px;
  max-width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Layout rows for the redesigned card.  The top row holds the rank,
 * avatars and score stack.  The bottom row holds the user and
 * supporter names for better readability. */
.list-card .top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Rank area: number on top, name below */
.list-card .rank-area {
  display: flex;
  flex-direction: column;
  align-items: center;   /* center number and name horizontally */
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* Name below rank */
.list-card .rank-area .name-left {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;      /* spacing below rank number */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

/* Right avatar name */
.list-card .avatar-container .name-right {
  display: block;
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;       /* spacing below avatar */
  text-align: center;
  max-width: 60px;        /* prevent overflow */
  white-space: nowrap;
  text-overflow: ellipsis;
}


.list-card .bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 2px;
  padding: 0 8px;
  box-sizing: border-box;
   margin-bottom: 8px;
}

.list-card .bottom-row .name-left,
.list-card .bottom-row .name-right {
  font-size: 10px;
  font-weight: 600;
  color: #720606;
  max-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-card .bottom-row .name-left {
  text-align: left;
}

.list-card .bottom-row .name-right {
  text-align: right;
}

/* Reduce the vertical spacing between cards when stacked. */
.leader .list-card + .list-card {
  margin-top: 0px;
}

/*
 * --------------------------------------------------------------------------
 * Enhanced design for bottom leaderboard cards (positions 4+)
 *
 * To mirror the more ornate example provided, bottom list entries now
 * support a gradient background and decorative top and bottom border
 * illustrations.  Apply the `.new-card` class to any `.leader-card` to
 * activate this style.  The additional border images are absolutely
 * positioned so that they span the full width of the card.  They sit
 * behind the main content via a lower z‑index so that crowns, avatars
 * and scores remain clearly visible.
 * --------------------------------------------------------------------------
 */

/* Apply a vibrant gradient and rounded corners when the new‑card class is
 * present.  Overflow is hidden so the decorative borders don’t protrude
 * beyond the card bounds.  Additional padding creates breathing room
 * above and below the content. */
.leader-card.new-card {
  background: linear-gradient(180deg, #8e42e1, #6c24c5);
  border-radius: 16px;
  overflow: hidden;
  padding-top: 32px;
  padding-bottom: 26px;
}

/* Decorative borders for top and bottom of bottom leaderboard cards.  These
 * images are optional; they are only shown when inserted into the markup.
 * The low z-index ensures they stay behind the card’s main content. */
.leader-card.new-card .top-border-img,
.leader-card.new-card .bottom-border-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.leader-card.new-card .top-border-img {
  top: 0;
}

.leader-card.new-card .bottom-border-img {
  bottom: 0;
}

/* -------------------------------------------------------------------------
   Frame for the entire leaderboard list (positions 4 onward)

   The wrapper provides vertical accent lines and positions the
   decorative top and bottom frames so they appear to enclose the
   list.  Padding is added to ensure the list content does not
   overlap the decorative frames.  Adjust the max-width to match
   your card width.  The border colour is tied to the accent
   palette for consistency.
   ------------------------------------------------------------------------- */
.leader-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-top: 5vh; /* 5% of viewport height */
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 6px;
}

/* Very small phones (<360px width) */
@media (max-width: 360px) {
  .leader-wrapper {
    margin-top: 6vh; /* slightly bigger gap */
  }
}

/* Larger phones (≥400px) */
@media (min-width: 400px) {
  .leader-wrapper {
    margin-top: 7vh;
  }
}

/* Tablets */
@media (min-width: 768px) {
  .leader-wrapper {
    margin-top: 8vh;
  }
}

/* Laptops */
@media (min-width: 1024px) {
  .leader-wrapper {
    margin-top: 10vh;
  }
}

/* Large desktops */
@media (min-width: 1440px) {
  .leader-wrapper {
    margin-top: 12vh;
  }
}



.leader-wrapper .list-top-frame,
.leader-wrapper .list-bottom-frame {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.leader-wrapper .list-top-frame {
  top: -18px;
}

.leader-wrapper .list-bottom-frame {
  bottom: -18px;
}

/* --------------------------------------------------------------------------
   Enhanced design for bottom leaderboard cards
   The .new-card class applies a gradient background with rounded
   corners.  Top and bottom border images are positioned
   absolutely within the card for decoration.  Existing content
   (crown/name, avatar, score) remains above these decorations.
   -------------------------------------------------------------------------- */
.leader-card.new-card {
  background: linear-gradient(180deg, #8e42e1, #6c24c5);
  border-radius: 16px;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 30px;
}

.leader-card .top-border-img,
.leader-card .bottom-border-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.leader-card .top-border-img {
  top: 0;
}

.leader-card .bottom-border-img {
  bottom: 0;
}

/* .star-badge span {
  color: white;
  text-shadow: 
    -1px -1px 0 red,
     1px -1px 0 red,
    -1px  1px 0 red,
     1px  1px 0 red;

  font-size: 10px;
} */
.star-badge span {
  color: white;                   /* Fill inside */
  -webkit-text-stroke: 0.5px red; /* Thin red outline */
  text-stroke: 0.5px red;         /* Non-standard but safe to add */
  font-weight: 600;               /* Optional */
  font-size: 15px;                /* Adjust size */
}