@media (min-width: 1124px) {
    dialog > article {
        max-width: 1000px;
    }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1500px;
  }
}

.toastify {
  z-index: 10000 !important;
}

.icons a {
    font-size: 1.2rem;
    color: var(--pico-contrast);
}

.icon-github {
    width: 1em;
    height: 1em;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
  display: flex;
  align-items: center;
  gap: 2em;
}

.title h2 {
  margin: auto;
  font-size: 1.5rem;
}

.title a {
    font-weight: bold;
    font-size: 2rem;
    text-decoration: none;
    color: var(--pico-h1-color);
}


.games-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

.game-card:last-child:nth-child(odd):only-child {
  margin-left: auto;
  margin-right: auto;
}

.game-card {
    position: relative;
    display: inline-block;
    height: 11em;
    overflow: hidden;
    cursor: pointer;
}

@media (min-width: 1536px) {
  .game-card {
    height: 12em;
  }
}

.game-card img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

.game-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    padding: 10px;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
}

.game-card:hover .overlay {
    opacity: 1;
}

.game-title {
    color: white;
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    padding: 0 10px;
}

.game-status {
    color: lightgray;
    font-size: 0.9rem;
    text-align: center;
    font-weight: bold;
}

.game-status {
  background-color: #1a1a1a;
  padding: 0.4em 0.6em;
  border-radius: 10px;
  font-weight: bold;
  display: inline-block;
}

.status-finished {
  color: #4caf50;
}

.status-playing {
  color: #2196f3;
}

.status-unfinished {
  color: #ff9800;
}

.status-dropped {
  color: #f44336;
}

.status-backlog {
  color: #9c27b0;
}

.status-unreleased {
  color: #607d8b;
}

/* Star Rating */
.star-rating {
  display: inline-flex;
  font-size: 2rem;
  cursor: pointer;
}

.star {
  color:   #ccc;
  transition: color 0.3s;
  user-select: none;
}

.star.selected {
  color: #f5c518;
}

.star.hovered {
  color: #ffe066;
}


@media (min-width: 1124px) {
  .filter-container {
    display: flex;
    gap: 1em;
    height: 5em;
    justify-content: space-between;
  }

  .filter-options {
    display: flex;
    gap: 1em;
    height: 100%;
  }

  .filter-container input, .filter-container select {
    width: 12em;
    height: 100%;
  }
}

.filter-update {
  align-self: end;
  display: block;
  height: 3em;
}

.dialog-cover-img {
  border-radius: 0.25em;
}

@media (min-width: 1124px) {
  .dialog-content {
    max-width: 775px;
  }
}

/* Progress bar */

.circular-progress {
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 20px;
  --stroke-width-inside: 22px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);

  --color: var(--pico-primary-hover-background);

  width: 12rem;
}

.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

.circular-progress text {
  font-size: 1.2rem;
}

.circular-progress circle.bg {
  stroke: #ddd;
}

.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  stroke: var(--color);
  stroke-width: var(--stroke-width-inside);
}

@media (max-width: 1000px) {
  .circular-progress {
    display: none;
  }

  .stats-grid {
    margin: auto;
  }
}

.stats {
  margin: auto;
  display: flex;
  justify-content: space-between;

  max-width: 1000px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 20px 40px;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
}

.stat .number {
  font-size: 2rem;
}