/* Dekapai — shared styles for ranked-list pages
   (skin_rankings, ship_rankings, boobflation_rankings, ship).
   Load after common.css. */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.row {
  display: grid;
  grid-template-columns: 52px 64px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  align-items: center;
  position: relative;
  overflow: hidden;
  --rowPadY: 12px;
  --rowPadX: 14px;
  /* Width of the right actions strip (inside the row border). */
  --actionsStripWidth: 152px;
}
.row::before {
  content: "";
  position: absolute;
  inset: 0 var(--actionsStripWidth) 0 0;
  background-image: var(--rowbg, none);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.22;
  transform: none;
  filter: saturate(1.05) blur(0.6px);
}
.row::after {
  content: "";
  position: absolute;
  inset: 0 var(--actionsStripWidth) 0 0;
  /* Fade the background image out on the LEFT, but let it show clearly on the RIGHT. */
  background: linear-gradient(
    90deg,
    var(--bg1) 0%,
    color-mix(in srgb, var(--bg1) 72%, transparent) 52%,
    transparent 100%
  );
}
.row > * {
  position: relative;
  z-index: 1;
}
.row.noBg::before,
.row.noBg::after {
  display: none;
}
@media (min-width: 760px) {
  .row {
    grid-template-columns: 62px 92px 1fr auto;
    --actionsStripWidth: 168px;
  }
}
.rowActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-self: stretch;
  justify-self: stretch;
  width: var(--actionsStripWidth);
  /* Pull to row edges so it becomes a true right-side strip. */
  margin: calc(-1 * var(--rowPadY)) calc(-1 * var(--rowPadX)) calc(-1 * var(--rowPadY)) 0;
  padding: var(--rowPadY) var(--rowPadX);
  border-left: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg1) 92%, transparent);
  z-index: 2; /* above row background */
}
.rowActions .btn {
  white-space: nowrap;
  width: 100%;
}
@media (max-width: 720px) {
  .row {
    grid-template-columns: 46px 56px 1fr;
    gap: 10px;
    --actionsStripWidth: 0px;
  }
  .row::before,
  .row::after {
    inset: 0;
  }
  .thumb,
  .thumbLink {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .rowActions {
    grid-column: 1 / -1;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: start;
    justify-self: stretch;
    margin: 8px 0 0;
    padding: 0;
    border-left: 0;
    background: transparent;
  }
  .rowActions .btn {
    width: auto;
    flex: 1 1 140px;
  }
}
.rank {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.rankNum {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.mini {
  font-size: 12px;
  color: var(--muted2);
}
.thumb,
.thumbLink {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 75%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow2);
}
@media (min-width: 760px) {
  .thumb,
  .thumbLink {
    width: 92px;
    height: 92px;
    border-radius: 16px;
  }
}
.thumb img,
.thumbLink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.meta {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.meta .name {
  font-size: 15px;
  font-weight: 780;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta .sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loading shimmer */
.skeleton {
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Full-size image overlay */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.overlay[data-open="true"] {
  display: grid;
  place-items: center;
  padding: 14px;
}
.overlayBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
}
@media (prefers-color-scheme: light) {
  .overlayBackdrop {
    background: rgba(0, 0, 0, 0.48);
  }
}
.overlayCard {
  position: relative;
  width: min(980px, 96vw);
  max-height: min(88vh, 920px);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.overlayTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--stroke);
}
.overlayTitle {
  font-weight: 780;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlayBody {
  display: grid;
  place-items: center;
  background:
    radial-gradient(700px 420px at 20% 20%, rgba(179, 140, 255, 0.16), transparent 60%),
    radial-gradient(700px 420px at 80% 10%, rgba(100, 214, 255, 0.14), transparent 62%);
}
.overlayImg {
  width: 100%;
  height: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}
.overlayClose {
  min-width: 40px;
}
@media (max-width: 720px) {
  .overlay[data-open="true"] {
    padding: 0;
    place-items: stretch;
  }
  .overlayCard {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .overlayTop {
    padding: 10px 10px;
  }
  .overlayTitle {
    font-size: 14px;
    white-space: normal;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .overlayImg {
    max-height: none;
    height: 100%;
  }
}