:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --accent: rgb(26, 175, 255);
}

html {
  background-color: var(--gray-10);
  color: var(--gray-2);
  background-color: #16191d;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23212529' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h1,
h2,
p {
  margin: 0;
}

main {
  margin-block: 3rem;
}

.site-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  animation: glitch 500ms infinite;
  position: relative;
  letter-spacing: 0.1em;
  overflow: hidden;
}
@media (min-width: 740px) {
  .site-title {
    font-size: 4.2rem;
  }
}

.site-title::before,
.site-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gray-10);
}

.site-title::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  animation: noise-1 3s linear infinite alternate-reverse;
  opacity: 0.7;
}

.site-title::after {
  left: -2px;
  text-shadow: 2px 0 #00fff9;
  animation: noise-2 2s linear infinite alternate-reverse;
  opacity: 0.7;
}

@keyframes noise-1 {
  0%,
  20%,
  40%,
  60%,
  70%,
  90% {
    clip-path: inset(80% 0 0 0);
  }
  10%,
  30%,
  50%,
  80%,
  100% {
    clip-path: inset(0 0 60% 0);
  }
  15%,
  35%,
  55%,
  75%,
  95% {
    clip-path: inset(30% 0 85% 0);
  }
}

@keyframes noise-2 {
  15%,
  35%,
  55%,
  75%,
  95% {
    clip-path: inset(80% 0 0 0);
  }
  0%,
  20%,
  40%,
  60%,
  70%,
  90% {
    clip-path: inset(0 0 60% 0);
  }
  10%,
  30%,
  50%,
  80%,
  100% {
    clip-path: inset(30% 0 85% 0);
  }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}

.game-container {
  width: 640px;
  height: 480px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--gray-11);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.controls-container {
  max-width: 640px;
  width: 100%;
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 34px;
}
@media (min-width: 600px) {
  .controls-container {
    display: flex;
  }
}

#controls {
  flex: 1;
}

.controls-summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--gray-7);
}

.key {
  padding: 2px 6px;
  background-color: var(--gray-8);
  border-radius: 4px;
}

#buttons {
  margin-top: 10px;
  gap: 10px;
}
@media (min-width: 600px) {
  #buttons {
    margin-top: 0;
  }
}

.action-button {
  padding: 5px 10px;
  border-radius: 6px;
  border-style: none;
  background-color: var(--gray-8);
  color: var(--gray-5);
  font-size: 1rem;
  cursor: pointer;
}
.action-button:hover {
  background-color: var(--gray-7);
}
@media (min-width: 600px) {
  .action-button + .action-button {
    margin-left: 4px;
  }
}

#games-list {
  margin-top: 80px;
  max-width: 90%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.games-list__item {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(50% - 10px); /* 2 per row */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background-color: var(--gray-9);
  text-decoration: none;
}
.games-list__item:hover {
  transform: scale(1.06);
}
@media (min-width: 650px) {
  .games-list__item {
    flex: 0 1 calc(33.33% - 14px); /* 3 per row */
  }
}
@media (min-width: 850px) {
  .games-list__item {
    flex: 0 1 calc(25% - 15px); /* 4 per row */
  }
}
@media (min-width: 1050px) {
  .games-list__item {
    flex: 0 1 calc(20% - 16px); /* 5 per row */
  }
}

.games-list__item img {
  width: 100%;
  height: auto;
}

.games-list__item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: 20px;
  color: var(--gray-2);
  font-size: 0.8rem;
}
@media (min-width: 900px) {
  .games-list__item-info {
    font-size: 0.9rem;
  }
}

.games-list__item-info h2 {
  flex: 1;
}

.games-list__item-info p {
  color: var(--gray-7);
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}