/* Fore The Youth — Levels Rail (always horizontal) + Flag outside box; full-width row
   Boxes are equal width, capped via clamp() so they never look too wide. */

/* Ensure the flag can sit outside and not get clipped */
.card { overflow: visible; }
.xp-rail{
  position: relative;
  background: var(--rail, #dff3de);
  border-radius: 1rem;
  padding: 18px 12px 14px;
  overflow: visible;
}

/* Full-width wrapper */
.xp-rail .levels-wrap{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  overflow-x: hidden;
}

/* Single horizontal row, equal spacing */
#xpLevels{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .5rem;
  justify-content: space-between;
  width: 100%;
}

/* Equal-sized boxes — use clamp(min, computed var, max) to keep them from getting too wide */
#xpLevels .level{
  position: relative;
  /*  ➜ Clamp keeps widths reasonable:
      min  = 120px, preferred = var(--levelBoxWidth) from JS, max = 160px  */
  flex: 0 0 clamp(120px, var(--levelBoxWidth, 140px), 160px);
  text-align: center;
  padding: 1.1rem .55rem .3rem;     /* compact height */
  border-radius: 12px;
  color: #0b1f16;
  background: #e8f2ea;
  border: 1px solid rgba(0,0,0,.05);
  overflow: visible;
  z-index: 1;
}

/* Flag outside the box, centered above the label */
#xpLevels .level .flag-wrap{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 92px; height: 40px;       /* slightly smaller to match narrower boxes */
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none; z-index: 5;
}
#xpLevels .level .flag-img{ width:100%; height:100%; object-fit:contain; display:block; }
#xpLevels .level.active .flag-wrap{ opacity:1; transform:translateX(-50%) translateY(-2px); }

/* Labels */
#xpLevels .level .name{ font-weight:800; letter-spacing:.2px; line-height:1.1; white-space:nowrap; }
#xpLevels .level .pts{  display:block; color:#335e3c; font-weight:600; line-height:1.1; margin-top:2px; }

/* Tier colors */
#xpLevels .level.lvl-0{ background:#e6f7e7; border-color:#cdeacd; }
#xpLevels .level.lvl-1{ background:#e9f6ff; border-color:#cfe8fa; }
#xpLevels .level.lvl-2{ background:#fff6e7; border-color:#ffe1a9; }
#xpLevels .level.lvl-3{ background:#f3ecff; border-color:#e2d4ff; }
#xpLevels .level.lvl-4{ background:#fff0f2; border-color:#ffd1d8; }
#xpLevels .level.active{ box-shadow:0 6px 16px rgba(21,94,44,.08); outline:2px solid #67c587; }

/* Icon row full width (if you use it below the rail) */
.icon-row{ width: 100%; }

/* Responsive tweaks */
@media (max-width: 992px){
  #xpLevels{ gap: .4rem; }
  #xpLevels .level .flag-wrap{ width: 86px; height: 36px; }
}
@media (max-width: 576px){
  #xpLevels{ gap: .35rem; }
  #xpLevels .level{
    /* allow slightly narrower at phone sizes */
    flex-basis: clamp(110px, var(--levelBoxWidth, 130px), 150px);
    padding: .95rem .45rem .25rem;
  }
  #xpLevels .level .flag-wrap{ width: 80px; height: 34px; }
}