* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  color: #0f172a;
  background: #d6f4eb;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #d6f4eb 0%, #b4e5d7 100%);
  pointer-events: none;
}

.screen {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 10px 12px 18px;
}

.brand-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  align-items: end;
  gap: 8px;
  margin: 0 0 12px;
  width: 100%;
  max-width: 100%;
}

.brand-header__logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

.brand-header__kuq {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  justify-self: end;
}

.brand-header__kuq img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

.brand-header__kuq:focus-visible {
  outline: 2px solid #1f8f7d;
  outline-offset: 3px;
  border-radius: 4px;
}

.icon-btn {
  border: 1px solid #a9d5cc;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f6fffc;
  color: #12433a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.summary-card {
  background: #f6fffc;
  border: 1px solid #abd9cf;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(24, 77, 67, 0.08);
  display: grid;
  gap: 4px;
}

.summary-label {
  font-size: 0.8rem;
  color: #3f6e65;
}

.summary-card strong {
  font-size: 1.2rem;
  color: #116657;
}

.meta {
  margin: 2px 2px 10px;
  color: #476f67;
  font-size: 0.82rem;
  line-height: 1.35;
}

.site-footer {
  margin: 16px 4px 8px;
  text-align: center;
  font-size: 0.78rem;
  color: #5a8279;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.member-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  --member-row-h: 44px;
}

.member-row {
  --row-scale: 1;
  width: 100%;
  border: 1px solid #b8ddd4;
  border-radius: 14px;
  background: #f6fffc;
  color: #134a40;
  text-align: left;
  padding: 0 12px;
  min-height: calc(var(--member-row-h) * var(--row-scale));
  display: grid;
  grid-template-columns: calc(30px * var(--row-scale)) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(25, 72, 62, 0.08);
  cursor: pointer;
}

.member-row--podium {
  border-color: #1a1a1a;
  border-width: 1.5px;
  padding: 2px 12px;
  gap: 8px;
  grid-template-columns: calc(26px * var(--row-scale)) minmax(0, 1fr) auto;
}

.member-row--podium-1 {
  --row-scale: 2.2;
}

.member-row--podium-2 {
  --row-scale: 1.8;
}

.member-row--podium-3 {
  --row-scale: 1.6;
}

.member-row__star {
  position: relative;
  width: calc(26px * var(--row-scale));
  height: calc(26px * var(--row-scale));
  display: grid;
  place-items: center;
  justify-self: start;
  align-self: center;
  transform-origin: 50% 50%;
}

.member-row__star-icon {
  width: 88%;
  height: 88%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.member-row__star--gold .member-row__star-icon {
  fill: #f5c518;
}

.member-row__star--silver .member-row__star-icon {
  fill: #c5ccd4;
}

.member-row__star--bronze .member-row__star-icon {
  fill: #cd7f32;
}

.member-row__sparkle {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

.member-row__sparkle--a {
  top: 6%;
  right: 10%;
  width: calc(5px * var(--row-scale));
  height: calc(5px * var(--row-scale));
  animation: star-sparkle 2.4s ease-in-out 0.3s infinite;
}

.member-row__sparkle--b {
  bottom: 14%;
  left: 8%;
  width: calc(3.5px * var(--row-scale));
  height: calc(3.5px * var(--row-scale));
  animation: star-sparkle 2.8s ease-in-out 1.1s infinite;
}

@keyframes star-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.35);
  }

  45%,
  55% {
    opacity: 0.95;
    transform: scale(1);
  }
}

@keyframes star-glow-gold {
  0%,
  100% {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 2px rgba(245, 197, 24, 0.35));
  }

  50% {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 0 7px rgba(245, 197, 24, 0.85));
  }
}

.member-row--podium-1 .member-row__star-icon {
  animation: star-glow-gold 2.5s ease-in-out infinite;
}

@keyframes star-wiggle-strong {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  15% {
    transform: translateX(-8px) rotate(-6deg);
  }

  30% {
    transform: translateX(4px) rotate(6deg);
  }

  45% {
    transform: translateX(-4px) rotate(-3.6deg);
  }

  60% {
    transform: translateX(2.5px) rotate(2.4deg);
  }

  75% {
    transform: translateX(-1.5px) rotate(-1.2deg);
  }
}

@keyframes star-wiggle-medium {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  15% {
    transform: translateX(-4px) rotate(-3deg);
  }

  30% {
    transform: translateX(2px) rotate(3deg);
  }

  45% {
    transform: translateX(-2px) rotate(-1.8deg);
  }

  60% {
    transform: translateX(1.25px) rotate(1.2deg);
  }

  75% {
    transform: translateX(-0.75px) rotate(-0.6deg);
  }
}

@keyframes star-wiggle-subtle {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  15% {
    transform: translateX(-1px) rotate(-0.6deg);
  }

  30% {
    transform: translateX(0.5px) rotate(0.6deg);
  }

  45% {
    transform: translateX(-0.5px) rotate(-0.35deg);
  }

  60% {
    transform: translateX(0.35px) rotate(0.25deg);
  }

  75% {
    transform: translateX(-0.2px) rotate(-0.15deg);
  }
}

.member-row--podium-1 .member-row__star {
  animation: star-wiggle-strong 3s ease-in 1s infinite alternate-reverse forwards;
}

.member-row--podium-2 .member-row__star {
  animation: star-wiggle-medium 3s ease-in 1.2s infinite alternate-reverse forwards;
}

.member-row--podium-3 .member-row__star {
  animation: star-wiggle-subtle 3s ease-in 1.4s infinite alternate-reverse forwards;
}

@media (prefers-reduced-motion: reduce) {
  .member-row--podium-1 .member-row__star,
  .member-row--podium-2 .member-row__star,
  .member-row--podium-3 .member-row__star,
  .member-row__sparkle,
  .member-row--podium-1 .member-row__star-icon {
    animation: none;
  }
}

.member-row__rank {
  width: calc(26px * var(--row-scale));
  height: calc(26px * var(--row-scale));
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #1f8f7d;
  color: white;
  font-weight: 800;
  font-size: 0.82rem;
}

.member-row__label {
  display: block;
  font-weight: 800;
  line-height: 1.15;
}

.member-row__meta {
  display: block;
  margin-top: 2px;
  color: #4a756d;
  font-size: 0.76rem;
}

.member-row__delta {
  text-align: right;
  display: grid;
  gap: 2px;
}

.member-row__delta strong {
  font-size: 0.95rem;
}

.member-row__delta small {
  color: #48736a;
  font-size: 0.74rem;
}

#memberDialog {
  border: none;
  border-radius: 16px;
  max-width: min(460px, calc(100vw - 24px));
  width: 100%;
  padding: 0;
  box-shadow: 0 24px 46px rgba(10, 30, 26, 0.35);
}

#memberDialog::backdrop {
  background: rgba(7, 24, 19, 0.48);
}

.dialog-inner {
  padding: 14px;
  background: #f5fffb;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.dialog-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.muted {
  margin: 2px 0 10px;
  color: #4d756d;
  font-size: 0.82rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.detail-grid div {
  margin: 0;
  background: white;
  border: 1px solid #b8ddd4;
  border-radius: 10px;
  padding: 9px;
}

.detail-grid dt {
  font-size: 0.73rem;
  color: #557f77;
  margin-bottom: 3px;
}

.detail-grid dd {
  margin: 0;
  font-weight: 800;
  color: #11433a;
}