/* POLITA EXISTING MINI GAMES PAGE FIX */
/* Header untouched. No emojis added to buttons. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Home Mini Games entry */
#polita-home-minigames-entry {
  width: min(1120px, calc(100% - 28px));
  margin: 22px auto 18px;
  display: flex;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

#polita-home-minigames-entry a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  text-align: center;
  color: inherit;
  border: 1px solid rgba(68, 255, 171, 0.36);
  background: linear-gradient(135deg, rgba(41,255,168,.18), rgba(52,140,255,.14));
  box-shadow: 0 10px 32px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#polita-home-minigames-entry a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  border-color: rgba(68, 255, 171, 0.72);
}

/* Existing Mini Games page additions */
#polita-existing-minigames-list {
  width: min(1120px, calc(100% - 28px));
  margin: 34px auto 44px;
  text-align: center;
  box-sizing: border-box;
}

#polita-existing-minigames-list h2 {
  max-width: 100%;
  margin: 0 auto 10px;
  text-align: center;
  font-size: clamp(1.55rem, 4.5vw, 2.55rem);
  line-height: 1.08;
}

#polita-existing-minigames-list p.polita-mini-intro {
  max-width: 860px;
  margin: 0 auto 24px;
  text-align: center;
  line-height: 1.6;
  opacity: .88;
}

.polita-existing-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 15px;
  width: 100%;
}

.polita-existing-game-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.polita-existing-game-card {
  height: 100%;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  cursor: pointer;
  background: rgba(8, 14, 30, 0.72);
  border: 1px solid rgba(110, 231, 255, 0.18);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.polita-existing-game-card-link:hover .polita-existing-game-card {
  transform: translateY(-6px);
  box-shadow: 0 22px 58px rgba(0,0,0,.38);
  border-color: rgba(68, 255, 171, 0.5);
  background: rgba(14, 28, 55, 0.82);
}

.polita-existing-game-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  text-align: center;
}

.polita-existing-game-card p {
  margin: 0 auto 12px;
  opacity: .86;
  line-height: 1.55;
  text-align: center;
}

.polita-existing-game-action {
  display: inline-block;
  margin-top: 10px;
  opacity: .9;
  font-weight: 900;
}

.polita-existing-command-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 14px auto 0;
}

.polita-existing-command-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .86rem;
  white-space: nowrap;
}

.polita-existing-game-detail {
  width: min(1120px, calc(100% - 28px));
  margin: 34px auto 44px;
  text-align: center;
  box-sizing: border-box;
}

.polita-existing-game-detail h1 {
  max-width: 100%;
  margin: 0 auto 10px;
  text-align: center;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.06;
}

.polita-existing-detail-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 15px;
  margin-top: 24px;
}

.polita-existing-detail-panel {
  box-sizing: border-box;
  padding: 18px;
  border-radius: 22px;
  background: rgba(8, 14, 30, 0.72);
  border: 1px solid rgba(110, 231, 255, 0.18);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  text-align: center;
}

.polita-existing-detail-panel p {
  line-height: 1.6;
  opacity: .88;
}

/* Leaderboard mobile heading fix */
body.polita-leaderboard-clean-fix h1,
body.polita-leaderboard-clean-fix h2,
body.polita-leaderboard-clean-fix .hero-title,
body.polita-leaderboard-clean-fix .page-title,
body.polita-leaderboard-clean-fix [class*="leaderboard"] h1,
body.polita-leaderboard-clean-fix [id*="leaderboard"] h1,
body.polita-leaderboard-clean-fix [class*="leader"] h1,
body.polita-leaderboard-clean-fix [id*="leader"] h1 {
  max-width: min(900px, calc(100vw - 42px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  line-height: 1.1 !important;
}

@media (max-width: 760px) {
  #polita-home-minigames-entry,
  #polita-existing-minigames-list,
  .polita-existing-game-detail {
    width: min(100%, calc(100vw - 22px));
    max-width: calc(100vw - 22px);
    margin-left: auto;
    margin-right: auto;
  }

  #polita-existing-minigames-list h2,
  .polita-existing-game-detail h1,
  body.polita-leaderboard-clean-fix h1,
  body.polita-leaderboard-clean-fix h2,
  body.polita-leaderboard-clean-fix .hero-title,
  body.polita-leaderboard-clean-fix .page-title,
  body.polita-leaderboard-clean-fix [class*="leaderboard"] h1,
  body.polita-leaderboard-clean-fix [id*="leaderboard"] h1,
  body.polita-leaderboard-clean-fix [class*="leader"] h1,
  body.polita-leaderboard-clean-fix [id*="leader"] h1 {
    max-width: calc(100vw - 46px) !important;
    width: 100% !important;
    margin: 0 auto 12px auto !important;
    padding: 0 10px !important;
    text-align: center !important;
    font-size: clamp(1.05rem, 5.9vw, 1.72rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  #polita-existing-minigames-list p,
  .polita-existing-game-detail p,
  body.polita-leaderboard-clean-fix p,
  body.polita-leaderboard-clean-fix [class*="leaderboard"] p,
  body.polita-leaderboard-clean-fix [id*="leaderboard"] p {
    max-width: calc(100vw - 50px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
    font-size: clamp(.82rem, 3.6vw, .96rem) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .polita-existing-game-grid,
  .polita-existing-detail-grid {
    grid-template-columns: 1fr;
  }

  .polita-existing-game-card,
  .polita-existing-detail-panel {
    padding: 15px 12px;
    border-radius: 18px;
  }

  .polita-existing-command-pill {
    font-size: .8rem;
    padding: 5px 8px;
  }
}