/* Compact Penalty view for a fixed-height SharePoint / iframe embed. */
body.penalty-game-active .topbar {
  display: none;
}

body.penalty-game-active main {
  padding: .35rem .5rem 5.25rem;
  max-width: 600px;
}

body.penalty-game-active .penalty-game__head {
  min-height: 70px;
  padding: 5px 3px 8px;
}

body.penalty-game-active .penalty-game__title strong {
  font-size: 22px;
}

body.penalty-game-active .penalty-game__field {
  min-height: 0;
  height: clamp(340px, calc(100dvh - 160px), 500px);
}

/* The modal never grows past the game field. Only the score rows scroll. */
.penalty-game__ranking {
  padding: 8px;
  overflow: hidden;
}

.penalty-game__ranking-card {
  width: min(100%, 360px);
  max-height: calc(100% - 2px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.penalty-game__ranking-card h2,
.penalty-game__ranking-card p,
.penalty-game__ranking-actions {
  flex: 0 0 auto;
}

.penalty-game__ranking-card h2 {
  margin-bottom: 5px;
  font-size: 20px;
}

.penalty-game__ranking-card p {
  margin-bottom: 9px;
  line-height: 1.25;
}

.penalty-game__ranking-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.penalty-game__ranking-list li {
  padding: 8px 10px;
}

.penalty-game__ranking-actions {
  margin-top: 9px;
  padding-top: 9px;
  background: linear-gradient(180deg, transparent, #10275f 24%);
}

.penalty-game__ranking-card button {
  padding: 10px 14px;
}

@media (max-height: 540px) {
  body.penalty-game-active .penalty-game__field {
    height: clamp(315px, calc(100dvh - 150px), 390px);
  }

  .penalty-game__ranking-card {
    padding: 11px;
  }

  .penalty-game__ranking-list {
    gap: 5px;
  }

  .penalty-game__ranking-list li {
    padding: 6px 9px;
  }
}