/* Gorillaz-inspired comic/punk skin for the games overview. Loaded after games.css. */
:root {
  --ink: #111014;
  --paper: #f3ead3;
  --yellow: #ffd60a;
  --red: #e3262f;
  --teal: #1db5a6;
  --purple: #6b3fa0;
  --muted: #4b4552;
  --text: var(--ink);
}

body {
  font-family: "Special Elite", "Courier New", monospace;
  color: var(--ink);
  background-color: #1a1720;
  background-image:
    radial-gradient(rgba(255, 214, 10, 0.16) 1.4px, transparent 1.6px),
    radial-gradient(circle at 15% 0%, rgba(107, 63, 160, 0.55), transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(29, 181, 166, 0.35), transparent 40%),
    radial-gradient(circle at 40% 100%, rgba(227, 38, 47, 0.35), transparent 50%);
  background-size: 14px 14px, auto, auto, auto;
}

/* Replace the monochrome grid/spotlight with film grain */
body::before {
  z-index: 50;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  mask-image: none;
  background-size: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(3) infinite;
}

body::after {
  display: none;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3px, 2px); }
  66% { transform: translate(2px, -3px); }
  100% { transform: translate(0, 0); }
}

/* Ticker */
.ticker {
  position: relative;
  z-index: 2;
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
  font-family: "Bangers", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  padding: 6px 0;
}

.ticker-track {
  display: inline-block;
  animation: ticker 24s linear infinite;
}

.ticker-track span {
  margin: 0 18px;
}

.ticker-track .dot {
  color: var(--red);
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

.wrap {
  width: min(1140px, 100% - 32px);
  padding-top: 34px;
}

/* Comic panels */
.panel {
  overflow: visible;
  border: 4px solid var(--ink);
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: 6px 6px 0 var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(17, 16, 20, 0.07) 1px, transparent 1.2px);
  background-size: 6px 6px;
}

.panel::before {
  display: none;
}

h1,
h2 {
  font-family: "Bangers", sans-serif;
  font-weight: 400;
  text-shadow: none;
}

.top-panel {
  transform: rotate(-0.6deg);
  box-shadow: 10px 10px 0 var(--ink);
  align-items: center;
  flex-wrap: wrap;
  background-image:
    repeating-conic-gradient(from 0deg at 92% 50%, rgba(255, 214, 10, 0.32) 0 9deg, transparent 9deg 18deg);
  background-size: auto;
  overflow: hidden;
}

.kicker {
  display: inline-block;
  font-family: "Permanent Marker", cursive;
  background: var(--ink);
  color: var(--yellow);
  padding: 2px 12px;
  transform: rotate(-2deg);
  font-size: 1.05rem;
}

.top-panel h1 {
  margin-top: 8px;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--red);
}

.subtitle {
  color: var(--muted);
  font-size: 1.05rem;
}

.back-btn {
  font-family: "Bangers", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(2deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.back-btn:hover,
.back-btn:focus-visible {
  transform: rotate(0) translate(-3px, -3px);
  background: var(--teal);
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--red);
  outline: none;
}

/* Game cards as comic panels */
.games-grid {
  margin-top: 34px;
  gap: 28px;
  counter-reset: track;
}

.game-card {
  padding: 12px 12px 16px;
  counter-increment: track;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card:nth-child(4n + 1) { transform: rotate(-1.4deg); }
.game-card:nth-child(4n + 2) { transform: rotate(1deg); }
.game-card:nth-child(4n + 3) { transform: rotate(-0.6deg); }
.game-card:nth-child(4n + 4) { transform: rotate(1.6deg); }

.game-card::after {
  content: "B-" counter(track, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  font-family: "Bangers", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 0 8px;
}

.game-card:nth-child(3n + 2)::after { background: var(--teal); }
.game-card:nth-child(3n)::after { background: var(--red); color: #fff; }

.game-card:hover {
  transform: rotate(0) translate(-3px, -6px) scale(1.02);
  border-color: var(--ink);
  box-shadow: 12px 12px 0 var(--red);
  z-index: 2;
}

.game-art {
  border: 3px solid var(--ink);
  border-radius: 0;
  filter: contrast(1.15) saturate(1.4);
  position: relative;
}

.game-card:hover .game-art {
  border-color: var(--ink);
  transform: none;
}

.game-card h2 {
  margin-top: 12px;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

.game-card p {
  color: var(--muted);
}

.play-btn {
  font-family: "Bangers", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.play-btn:hover,
.play-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
  outline: none;
}

.game-card:nth-child(even) .play-btn {
  color: var(--ink);
  background: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}