/* Fortnite font */
@font-face {
  font-family: "FortniteFont";
  src: url("../fonts/fortnite.eot");
  src: url("../fonts/fortnite.otf") format("opentype"),
    url("../fonts/fortnite.svg#filename") format("svg");
}

body {
  padding: 50px;
  font: 48px "FortniteFont", Arial, sans-serif;
  color: white;
  background-image: url("../images/fortnite_background.jpg");
  background-size: 100vw 100vh;
  --winner: "Loading...";
}

h1 {
  text-align: center;
  font-size: 48px;
}

h2 {
  text-align: center;
  font-size: 36px;
}

h3 {
  text-align: left;
  font-size: 24px;
}

.filter {
  width: 100%;
  height: 100px;
  /*border-bottom: 10px solid rgba(255,255,255,.25);*/
}

a {
  color: white;
  padding: 5px 15px;
  text-decoration: none;
  margin-inline: 10px;
}

a.selected {
  color: #457db6;
  background-color: white;
  padding: 5px 15px;
  text-decoration: none;
}

a.hidden {
  display: none;
}

a:hover {
  background-color: white;
  color: #457db6;
  box-shadow: 0px 4px 15px 0px rgba(17, 17, 17, 0.8);
}

/* Fortnite buttons */
.button-wrapper {
  height: 110px;
  width: 780px;
  /*background: linear-gradient(#eee802, #fefb72);*/
  background: #eee802;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  cursor: pointer;
  transition: 0.2s;
  border: 10px solid transparent;
}
.button-wrapper:hover {
  /*transform: scale(0.97);*/
  box-shadow: 0px 0px 0px 4px white;
  background-color: white;
  background: white;
  background-clip: padding-box;
}
.button-wrapper .button-inner {
  height: 100%;
  width: 100%;
  /* background: linear-gradient(#eee802, #fefb72); */
  background: #eee802;
  /*transform: skew(-5deg);*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-wrapper .button-inner:hover {
  background: white;
}

.button-wrapper .button-inner a {
  color: #2c3076;
  margin: 6px 0 0 0;
  font-size: 48pt;
  text-decoration: none;
}

/* Fornite Winner, for whom is ranked #1 */
@font-face {
  font-family: "BurbankBigCondensed-Black";
  font-style: "normal";
  font-weight: "400";
  src: url(../fonts/fortnitewinner.woff) format("woff");
}

.fortnite-winner {
  font-family: BurbankBigCondensed-Black;
  position: relative;
  display: block;
  margin: auto;
  width: 870px;
  height: 120px;
  line-height: 120px;
  margin-top: 5%;
}

.fortnite-banner {
  font-family: BurbankBigCondensed-Black;
  position: relative;
  display: block;
  margin: auto;
  width: 870px;
  height: 120px;
  line-height: 120px;
  margin-top: 5%;
}

.fortnite-title {
  /*opacity:0.8;*/
  display: block;
  width: 100%;
  height: 100%;
  font-size: 74px;
  text-align: center;
  color: #fff;
  background-color: #457db6;

  clip-path: polygon(
    0% 0%,
    75.5% 5.8%,
    76.2% 11.6%,
    88.96% 10%,
    91% 16.66%,
    91.95% 7.5%,
    100% 5%,
    97.45% 100%,
    72.41% 96.67%,
    71.49% 91.67%,
    70.46% 95.83%,
    39.66% 93.33%,
    38.16% 100%,
    1.61% 95.83%
  );
}

.fortnite-winner::after {
  content: "#1";
  color: white;
  position: absolute;
  top: 0;
  left: 10px;
  transform: rotate(-10deg);
  font-size: 200px;
  text-shadow: 2px 3px rgba(0, 0, 0, 0.4);
}

.fortnite-banner.after {
  content: "#34";
  color: white;
  position: absolute;
  top: 0;
  left: 10px;
  transform: rotate(-10deg);
  font-size: 200px;
  text-shadow: 2px 3px rgba(0, 0, 0, 0.4);
}

/* Drop Down */
.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

/* Button to look like links */
button {
  background: none !important;
  border: none;
  padding: 0 !important;
  font-family: "FortniteFont";
  cursor: pointer;
  color: #2c3076;
  margin: 6px 0 0 0;
  font-size: 48pt;
}

.version {
  text-align: center;
  margin-top: 100px;
  font-size: smaller;
}

.status-image {
  transform: scale(0.75);
}

button .status-message {
  display: block;
  font-size: 0.6em;
  color: #38cbf8;
  margin-top: 4px;
}

.stats-container {
  width: 860px; /* MUST match image width */
  margin: 40px auto;
}

/* Display User Stats Image Sections */
.stats-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 1280px; /* Match your image width */
  margin: 0; /* Remove any default margin */
}

/* OVERALL section (top) */
.stats-overall {
  height: 720px;
  background-repeat: no-repeat;
  background-size: 1280px 720px;
  background-position: 840 0cqmax;
}

/* SOLO/DUO/SQUAD section (bottom) */
.stats-modes {
  height: 720px;
  background-repeat: no-repeat;
  background-size: 1280px auto;
  background-position: -440 0px;
  flex-shrink: 0;
}

/* ===== Rocket Racing style leaderboard ===== */

.leaderboard {
  margin: 30px auto 60px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(25, 40, 120, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

/* Header strip */
.leaderboard__header {
  position: relative;
  padding: 16px 16px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(40, 70, 210, 0.75),
    rgba(20, 35, 120, 0.55)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.leaderboard__mode {
  font-size: 18px;
  letter-spacing: 1px;
  opacity: 0.9;
}

.leaderboard__title {
  font-size: 40px;
  line-height: 1.05;
  margin-top: 6px;
}

.leaderboard__sub {
  font-size: 16px;
  opacity: 0.8;
  margin-top: 4px;
}

/* Layout grid */
.leaderboard__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

/* Mobile: stack side under main */
@media (max-width: 820px) {
  body {
    padding: 18px;
  }
  .leaderboard {
    padding: 14px;
  }
  .leaderboard__grid {
    grid-template-columns: 1fr;
  }
}

/* Main area */
.leaderboard__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* #2-#4 row */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 820px) {
  .lb-podium {
    grid-template-columns: 1fr;
  }
}

/* Card base */
.lb-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    180deg,
    rgba(60, 95, 255, 0.55),
    rgba(20, 30, 110, 0.5)
  );
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 10px;
}

/* Make forms not add spacing */
.lb-card,
.lb-row {
  margin: 0;
}

/* Buttons inside cards/rows */
.lb-card__btn,
.lb-row__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 60px;
  /* override your global button rules */
  font-family: "FortniteFont", Arial, sans-serif;
  text-align: left;
  color: #ffffff;
}

/* Hover */
.lb-card__btn:hover,
.lb-row__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* First card is bigger */
.lb-card--first .lb-card__btn {
  padding: 18px 16px;
  grid-template-columns: auto 1fr;
  height: 160px;
}
.lb-card--first .lb-name {
  font-size: 72px;
  text-align: center;
}
@media (max-width: 820px) {
  .lb-card--first .lb-name {
    font-size: 42px;
    height: 100px;
  }
}

/* Podium cards smaller */
.lb-card--podium  .lb-card__btn {
  padding: 18px 16px;
  grid-template-columns: auto 1fr;
  height: 80px;
}
.lb-card--podium .lb-name {
  font-size: 34px;
  text-align: center;
}
@media (max-width: 820px) {
  .lb-card--podium .lb-name {
    font-size: 32px;
    height: 40px;
  }
}

/* Rank badge (yellow tile) */
.lb-rank-badge {
  min-width: 74px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;
  color: #141414;
  background: #f2e300;
  border-radius: 10px;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25) inset,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Card text: name + level aligned */
.lb-card__body {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto; /* name | level */
  align-items: center;
  column-gap: 12px;
}

.lb-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-meta {
  margin: 0;
  font-size: 26px;
  opacity: 0.85;
  text-align: center;
}

.lb-card--podium .lb-meta {
  font-size: 18px;
}

.lb-meta .sub {
  margin-left: 5px;
}

.lb-msg {
  grid-column: 1 / -1; /* message under both columns */
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
  font: menu;
  font-size: 8px;
}

/* Side area */
.leaderboard__side {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    180deg,
    rgba(30, 55, 190, 0.55),
    rgba(10, 15, 70, 0.55)
  );
  overflow: hidden;
}

.lb-side__title {
  padding: 14px 14px 10px;
  font-size: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.95;
}

.lb-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-row {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding: 10px;
}
.lb-rank-podium {
  width: 48px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  color: #141414;
  background: #f2e300;
  border-radius: 10px;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25) inset,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

.lb-rank-chip {
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  color: #141414;
  background: #f2e300;
  border-radius: 10px;

  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25) inset,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Side rows: rank | name | level */
.lb-row__btn {
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
}

.lb-row__name {
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-row__meta {
  justify-self: end;
  font-size: 22px;
  opacity: 0.8;
  text-align: center;
}

/* Empty */
.lb-empty {
  padding: 14px;
  font-size: 18px;
  opacity: 0.85;
}

/* Filters and menus */
.filter__desktop{ display:block; }
.filter__mobile{ display:none; }

.filter__group{
  padding:8px;
}

@media (max-width: 600px){
  .filter__desktop{ display:none; }
  .filter__mobile{ display:grid; gap:12px; }
}

/* Mobile sort: horizontal scrolling tab strip */
.filter__strip{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;                 /* Firefox */
  /* fade the right edge as a "more, swipe across" cue */
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
}
.filter__strip::-webkit-scrollbar{ display: none; }  /* Chrome/Safari */

.filter__strip a.filter__chip{
  flex: 0 0 auto;
  margin: 0;                             /* override generic <a> margin */
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.filter__strip a.filter__chip.selected{
  background: #fff;
  color: #1a1f55;
  border-color: #fff;
}

/* Dropper is the last sort item and navigates away — give it an accent */
.filter__strip a.filter__chip:last-child{
  background: linear-gradient(180deg, rgba(47,208,255,0.20), rgba(47,208,255,0.10));
  border-color: rgba(47,208,255,0.55);
  color: #cdf3ff;
}

/* Mobile filter: same pills as sort, smaller */
.filter__strip--sm{
  /* only a few items — drop the "swipe for more" fade */
  -webkit-mask-image: none;
          mask-image: none;
}
.filter__strip--sm a.filter__chip{
  padding: 6px 12px;
  font-size: 13px;
}
/* filter strip's last item isn't the Dropper — cancel that accent */
.filter__strip--sm a.filter__chip:last-child{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.filter__strip--sm a.filter__chip.selected{
  background: #fff;
  color: #1a1f55;
  border-color: #fff;
}

/* Selected-name + refresh button grouped above the map */
.dropper-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.dropper-controls .dropper-name {
  margin: 0;
  /* stay on one line, shrinking to fit narrow screens */
  font-size: clamp(28pt, 9vw, 48pt);
  white-space: nowrap;
}

.dropper-controls form {
  margin: 0;
}

.dropper-controls button {
  white-space: nowrap;
  font-size: 48px;
}

/* Map image sizing and cropping */

.image-crop {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.image-crop img {
  display: block;
  width: 100%; /* fill the stage exactly so the % pin overlay stays aligned */
  height: auto;
}

/* Dropper Pin */
.map-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.map-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* Map is square, so capping width by viewport height keeps the whole map
     (and the pin) on screen without vertical scrolling on desktop. On mobile
     the screen is narrower than 80vh, so it falls back to full width. */
  max-width: min(100%, 80vh);
}

.map-base {
  display: block;
  width: 2048px;
  max-width: 100%;
  height: auto;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Selected location name, styled like the map's burnt-in POI labels */
.map-pin-name {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 5px rgba(0, 0, 0, 0.85);
}

.map-pin img {
  width: 48px;
  height: 48px;
  display: block;
  /* bright halo so the dark icon stands out on any map biome */
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

/* pulsing ring sitting on the exact location point (the pin tip) */
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 14px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: rgba(255, 45, 45, 0.9);
  box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(255, 45, 45, 0.7);
  animation: map-pin-pulse 1.6s ease-out infinite;
}

@keyframes map-pin-pulse {
  0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 0   rgba(255, 45, 45, 0.7); }
  70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 22px rgba(255, 45, 45, 0); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0   rgba(255, 45, 45, 0); }
}