/* section-ranking.css */

.s-ranking {
  background: url(../images/s-ranking/bg-ranking-section.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 90vh;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s-ranking .title-ranking {
  font-size: 40px;
  color: #fff;
  margin-bottom: 0;
  font-family: "Unblocker", sans-serif;
  letter-spacing: 4px;
}

.s-ranking .subtitle-ranking {
  font-size: 20px;
  color: #ffffff;
  margin-top: -10px;
}

/* Base Board Style */
.ranking-board {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(
      6deg,
      rgba(146, 209, 255, 0.6) -6.57%,
      rgba(226, 243, 250, 0.4) 83.13%
    ),
    #fff;
}

.ranking-board::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center bottom;
  z-index: 0;
  opacity: 0.8;
}

.ranking-board > * {
  position: relative;
  z-index: 1;
}

/* Board Header */
.board-header {
  text-align: center;
}

.theme-blue .board-header {
  border-radius: var(--Gap-16px, 16px) var(--Gap-16px, 16px) 0 0;
  border: 1px solid rgba(255, 255, 255, 0.53);
  border-radius: var(--Gap-16px, 16px) var(--Gap-16px, 16px) 0 0;
  border: 1px solid rgba(255, 255, 255, 0.53);
  background: linear-gradient(10deg, #c281ff -255.81%, #7ca1ff 71.36%);
  box-shadow: 0 4px 6px 0 rgba(255, 255, 255, 0.6) inset;
}

.theme-pink .board-header {
  border-radius: 14.034px 14.034px 0 0;
  border: 0.877px solid rgba(255, 255, 255, 0.53);
  background: linear-gradient(180deg, #f265bf 0.93%, #ffa6de 100.93%);
  box-shadow: 0 3.509px 5.263px 0 rgba(255, 255, 255, 0.6) inset;
}

.theme-orange .board-header {
  border-radius: 14.034px 14.034px 0 0;
  border: 0.877px solid rgba(255, 255, 255, 0.53);
  background: linear-gradient(180deg, #f6850e 0%, #ffaf48 100%);
  box-shadow: 0 3.509px 5.263px 0 rgba(255, 255, 255, 0.6) inset;
}

.board-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 3px 30px;
  position: relative;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  gap: 5px;
}

.board-title::before {
  content: "";
  background: url(../images/s-ranking/title-arrow.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 46px;
  aspect-ratio: 66/19;
}

.board-title::after {
  content: "";
  background: url(../images/s-ranking/title-arrow.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 46px;
  display: block;
  aspect-ratio: 66/19;
  transform: scaleX(-1);
}

/* Podium Area */
.board-podium-area {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  font-size: 4vw;
  margin-bottom: -15px;
  padding-top: 15px;
}

.theme-blue .board-podium-area {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0.01%,
    #d3e8f5 44.05%,
    #616ef5 113.12%
  );
}

.theme-pink .board-podium-area {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0.01%,
    #fff0fa 44.05%,
    #f265bf 113.12%
  );
}

.theme-orange .board-podium-area {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0.01%,
    #fff4e9 44.05%,
    #f6850e 113.12%
  );
}

.char-img.avatar {
  width: 70% !important;
  height: auto;
  border-radius: 999px;
}

.char-img.frame {
  position: absolute;
  bottom: 0;
  z-index: 2;
}

.l-char-img.frame {
  position: absolute;
  bottom: 0;
  width: 70% !important;
  height: auto;
  margin: 16%;
  border-radius: 100%;
}

.theme-orange .rank-1 .p-avatar::before {
  width: 122%;
  margin-top:5px;
}

.theme-orange .p-avatar img {
  display: none;
}

.theme-orange .rank-3 .p-avatar::before,
.theme-orange .rank-2 .p-avatar::before {
  width: 130%;
}

.theme-orange .rank-2 .p-avatar,
.theme-orange .rank-3 .p-avatar {
  width: 36%;
  margin-top: 9px;
}

.podium-col {
  text-align: center;
  position: relative;
  width: 35%;
  margin: 0 auto;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 296/320;
  padding-bottom: 15%;
}

.podium-col.rank-1 {
  width: 55%;
  z-index: 3;
  margin-bottom: 20px;
  background: url("../images/s-ranking/podium-gold.webp");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.podium-col.rank-2,
.podium-col.rank-3 {
  z-index: 2;
  position: absolute;
  padding-bottom: 10%;
  font-size: 0.8em;
}

.podium-col.rank-2 {
  background: url("../images/s-ranking/podium-silver.webp");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  left: 3%;
  bottom: 20%;
}

.podium-col.rank-3 {
  background: url("../images/s-ranking/podium-copper.webp");
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  right: 3%;
  bottom: 20%;
}

.theme-pink .podium-col.rank-1 {
  padding-bottom: 22%;
}

.theme-pink .podium-col.rank-2,
.theme-pink .podium-col.rank-3 {
  padding-bottom: 11%;
}

/* Podium text details */
.p-user-name {
  white-space: nowrap;
  margin-bottom: 2px;
}

.theme-pink .p-user-name {
  font-size: 0.7em;
}

.p-user-point,
.theme-blue .p-user-name {
  font-size: 1em;
  margin: 0 auto;
  aspect-ratio: 185/39;
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: center;
}

.theme-blue .p-user-name {
  background: url(../images/s-ranking/user-point-blue.webp);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 1em;
  margin: 0 auto;
  aspect-ratio: 185/39;
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: center;
}

.theme-pink .p-user-point {
  background: url(../images/s-ranking/user-point-pink.webp);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.theme-orange .p-user-point {
  background: url(../images/s-ranking/user-point-orange.webp);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.rank-1 .p-user-point,
.theme-blue .rank-1 .p-user-name {
  background: url(../images/s-ranking/user-point.webp) !important;
  background-size: 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 65%;
}

.rank-1 .p-user-point {
  color: #fff;
}

/* Pointer Avatars */
.avatar-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.board-list-area .list-item .l-avatar .avatar-container {
  width: calc(100% * 100 / 70);
  height: auto;
  display: block;
  z-index: 1;
  position: relative;
}

.p-avatar {
  position: relative;
  width: 55%;
  margin: 0 auto;
  aspect-ratio: 1/1;
}

.rank-2 .p-avatar,
.rank-3 .p-avatar {
  width: 60%;
  margin-top: -10px;
}

.rank-1 .p-avatar::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 70%;
  aspect-ratio: 1/1;
  background: url(../images/s-ranking/tag-rank1.webp);
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
}

.rank-2 .p-avatar::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 55%;
  aspect-ratio: 1/1;
  background: url(../images/s-ranking/tag-rank2.webp);
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
}

.rank-3 .p-avatar::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 55%;
  aspect-ratio: 1/1;
  background: url(../images/s-ranking/tag-rank3.webp);
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
}

/* Guild podium rank badges */
.rank-top-guilds .rank-1 .p-avatar::before {
  background-image: url(../images/s-ranking/tag-rank-guild1.webp) !important;
}

.rank-top-guilds .rank-2 .p-avatar::before {
  background-image: url(../images/s-ranking/tag-rank-guild2.webp) !important;
}

.rank-top-guilds .rank-3 .p-avatar::before {
  background-image: url(../images/s-ranking/tag-rank-guild3.webp) !important;
}

.p-avatar .rank-bg {
  width: 100%;
  display: block;
  z-index: 1;
  position: relative;
}

.p-avatar .char-img {
  width: 100%;
  height: auto;
  z-index: 2;
  object-fit: contain;
  display: block;
  border-radius: 100px;
}

.theme-pink .p-avatar {
  display: flex;
  justify-content: center;
  width: 30%;
  aspect-ratio: 1/1.6;
}

.theme-pink .rank-2 .p-avatar,
.theme-pink .rank-3 .p-avatar {
  width: 36%;
  margin-top: -25px;
}

/* Rank 1 char pops out more */
.eff-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  z-index: 0;
  animation: spin 10s linear infinite;
  opacity: 0.6;
}

@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Base Image */
.p-base {
  position: relative;
  width: 100%;
  z-index: 3;
}

.p-base .base-img {
  width: 100%;
  display: block;
}

.p-base .p-tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 20%);
  width: 70%;
  /* Adjust tag width */
  z-index: 4;
}

/* List Area */
.board-list-area {
  padding: 0 10px 10px 10px;
  gap: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  padding: 3px 8px;
  transition: all 0.3s ease;
  font-size: 12px;
  gap: 5px;
  margin-bottom: 4px;
  font-weight: 300;
}

.list-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.02);
}

.l-rank {
  font-size: 0.8em;
  min-width: 56px;
  text-align: center;
  border-radius: 15px;
  padding: 2px 5px;
  color: #fff;
  flex-shrink: 0;
}

.l-rank::before {
  content: "อันดับ";
  margin-right: 2px;
}

.theme-blue .l-rank {
  border-radius: 50px;
  background:
    linear-gradient(90deg, #616ef5 41.37%, #6c78fc 171.33%),
    linear-gradient(207deg, #58b7ff 37.5%, #9dbcff 83.11%);
}

.theme-pink .l-rank {
  border-radius: 43.857px;
  background:
    linear-gradient(0deg, #f265bf 0%, #f265bf 100%),
    linear-gradient(207deg, #58b7ff 37.5%, #9dbcff 83.11%);
}

.theme-orange .l-rank {
  border-radius: 43.857px;
  background:
    linear-gradient(0deg, #f88f1d 0%, #f88f1d 100%),
    linear-gradient(207deg, #58b7ff 37.5%, #9dbcff 83.11%);
}

.l-avatar-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.l-avatar {
  height: 28px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
  display: block;
  position: relative;
}

.l-avatar .avatar-container {
  border-radius: 50%;
  overflow: hidden;
}

.l-avatar .char-img.frame {
  width: 140%;
  height: 140%;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.l-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-name {
  font-size: 1em;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1a1a;
}

.list-item span {
  color: #de6fe3;
}

.l-point {
  font-size: 0.9em;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.1em;
  flex-shrink: 0;
  border-radius: 30px;
  margin-left: auto;
}

.theme-blue .l-point {
  background-color: rgba(28, 107, 164, 0.3);
  border-color: #2798e8;
}

.theme-pink .l-point {
  border-radius: 26.314px;
  background:
    linear-gradient(90deg, #f265bf 41.37%, #ffbee7 171.33%),
    linear-gradient(90deg, #2db1ff 41.37%, #f9fbfd 171.33%), #eee4ff;
}

.theme-orange .l-point {
  border-radius: 26.314px;
  background:
    linear-gradient(270deg, #f4d000 -7.32%, #ff880b 59.91%),
    linear-gradient(90deg, #f265bf 41.37%, #ffbee7 171.33%),
    linear-gradient(90deg, #2db1ff 41.37%, #f9fbfd 171.33%), #eee4ff;
}

/* Nav positioning */
.owl-ranking .owl-nav.disabled {
  display: flex !important;
}

.owl-ranking .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 20;
}

.owl-ranking .owl-nav button {
  pointer-events: auto;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: url(../images/s-ranking/owl-arrow.webp) !important;
  background-size: 100% !important;
  background-position: center;
  background-repeat: no-repeat;
}

.owl-ranking .owl-nav button.owl-prev {
  transform: rotate(180deg);
}

.owl-ranking .owl-nav button span {
  display: none;
}

.owl-ranking .owl-stage-outer {
  height: 560px;
}

.owl-ranking .owl-item {
  padding: 0 10px;
}

/* Responsive adjustments */
@media (min-width: 550px) {
  .owl-ranking .owl-stage-outer {
    height: 630px;
  }

  .board-podium-area {
    font-size: 20px;
  }

  .ranking-board {
    width: 550px;
  }

  .board-title {
    font-size: 24px;
  }

  .p-user-point {
    width: 73%;
  }

  .rank-1 .p-user-point {
    width: 70%;
  }

  .podium-col.rank-1 {
    width: 43%;
  }

  .podium-col.rank-2,
  .podium-col.rank-3 {
    width: 30%;
  }

  .podium-col.rank-2 {
    left: 8%;
  }

  .podium-col.rank-3 {
    right: 8%;
  }

  .list-item {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .l-avatar {
    display: block;
  }
}

@media (min-width: 992px) {
  .ranking-board {
    width: 800px;
  }

  .warper-carousel {
    margin-right: 10px;
    height: 900px;
  }

  .owl-ranking .owl-stage-outer {
    height: 730px;
  }

  .board-title::before,
  .board-title::after {
    width: 80px;
  }

  .list-item {
    font-size: 18px;
  }

  .podium-col {
    padding-bottom: 16%;
  }

  .podium-col.rank-2,
  .podium-col.rank-3 {
    padding-bottom: 12%;
  }

  .p-avatar {
    width: 50%;
  }

  .rank-2 .p-avatar,
  .rank-3 .p-avatar {
    width: 45%;
    margin-top: -10px;
  }

  .rank-3 .p-avatar::before,
  .rank-2 .p-avatar::before {
    width: 48%;
  }

  .l-name {
    font-size: 0.95em;
  }

  .l-rank {
    min-width: 65px;
  }

  .theme-pink .podium-col.rank-1 {
    padding-bottom: 16%;
  }
}

@media (min-width: 1200px) {
  .s-ranking .title-ranking {
    font-size: 60px;
  }

  .board-title {
    font-size: 30px;
  }

  .warper-carousel {
    width: 1200px;
    margin: auto;
    position: relative;
    overflow: visible;
  }

  .owl-ranking.owl-carousel {
    overflow: visible;
    height: 700px;
  }

  .owl-ranking .owl-stage-outer {
    overflow: visible !important;
    height: auto !important;
  }

  .owl-ranking .owl-stage {
    overflow: visible;
    will-change: transform;
  }

  /* Let Owl calculate item width naturally (~400px for 3 items in 1200px) */
  .owl-ranking .owl-item {
    overflow: visible;
    opacity: 0;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
    filter: contrast(0.5) brightness(0.7);
  }

  /* Inner content overflows to 800px, centered in the ~400px owl-item */
  .owl-ranking .owl-item > div {
    width: 800px;
    margin-left: -200px;
    /* center 800px in ~400px: (400-800)/2 = -200 */
    position: relative;
    transform: scale(0.85);
    backface-visibility: hidden;
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .owl-ranking .owl-item .item {
    width: 800px;
  }

  /* Center board: full size, on top */
  .owl-ranking .owl-item.active.center {
    z-index: 100;
    opacity: 1;
    filter: none;
  }

  .owl-ranking .owl-item.active.center > div {
    transform: scale(1);
  }

  /* Side boards: slightly smaller, behind center */
  .owl-ranking .owl-item.active {
    z-index: 50;
    opacity: 1;
  }

  .owl-ranking .owl-item.active:not(.center) > div {
    transform: scale(0.85);
  }

  /* Clones use the same center/side rules as real items. Keeping a separate
     scale here overrides .active.center when looping backwards. */
  .owl-ranking .owl-item.cloned:not(.active) {
    opacity: 0;
  }

  /* Nav arrows above boards */
  .owl-ranking .owl-nav {
    z-index: 200;
    padding: 0 200px;
  }

  .owl-ranking .owl-nav button {
    width: 40px;
    height: 40px;
  }

  .rank-2 .p-avatar,
  .rank-3 .p-avatar {
    width: 36%;
    margin-top: -10px;
  }
}