:root {
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(0, 0%, 100%);
  --muted: hsl(0, 0%, 15%);
  --muted-foreground: hsl(0, 0%, 50%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(0, 0%, 100%);
  --card: hsl(0, 0%, 0%);
  --card-foreground: hsl(0, 0%, 100%);
  --border: hsl(0, 0%, 50%);
  --input: hsl(0, 0%, 0%);
  --primary: hsl(120, 100%, 50%);
  --primary-foreground: hsl(0, 0%, 0%);
  --secondary: hsl(60, 100%, 50%);
  --secondary-foreground: hsl(0, 0%, 0%);
  --accent: hsl(180, 100%, 50%);
  --accent-foreground: hsl(0, 0%, 0%);
  --destructive: hsl(0, 100%, 50%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --ring: hsl(0, 0%, 50%);
  --radius: 0px;
  
  /* Retro colors */
  --retro-green: hsl(120, 100%, 50%);
  --retro-red: hsl(0, 100%, 50%);
  --retro-yellow: hsl(60, 100%, 50%);
  --retro-cyan: hsl(180, 100%, 50%);
  --retro-gray: hsl(0, 0%, 50%);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 0;
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
  image-rendering: pixelated;
}

.min-h-screen {
  min-height: 100vh;
}

.bg-black {
  background-color: hsl(0, 0%, 0%);
}

.text-white {
  color: hsl(0, 0%, 100%);
}

.font-mono {
  font-family: 'Courier New', monospace;
}

.w-full {
  width: 100%;
}

.pixel-border {
  border: 2px solid var(--retro-gray);
  box-shadow: inset 2px 2px 0 hsl(0, 0%, 100%), inset -2px -2px 0 hsl(0, 0%, 0%);
}

.p-4 {
  padding: 1rem;
}

.p-2 {
  padding: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.text-center {
  text-align: center;
}

.ascii-title {
  font-family: 'Courier New', monospace;
  font-size: 8px;
  line-height: 1;
  white-space: pre;
  color: var(--retro-green);
}

.text-yellow-400 {
  color: hsl(60, 100%, 50%);
}

.text-cyan-400 {
  color: hsl(180, 100%, 50%);
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 0.25rem;
}

.retro-button {
  background: linear-gradient(135deg, var(--retro-gray) 0%, hsl(0, 0%, 75%) 50%, var(--retro-gray) 100%);
  border: 2px outset hsl(0, 0%, 75%);
  color: hsl(0, 0%, 0%);
  font-weight: bold;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.retro-button:hover {
  background: linear-gradient(135deg, hsl(0, 0%, 62%) 0%, hsl(0, 0%, 87%) 50%, hsl(0, 0%, 62%) 100%);
}

.retro-button:active {
  border-style: inset;
}

.retro-button.active {
  background-color: var(--retro-yellow);
  color: hsl(0, 0%, 0%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.font-bold {
  font-weight: bold;
}

.border {
  border: 1px solid;
}

.border-b {
  border-bottom: 1px solid;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.retro-input {
  background-color: hsl(0, 0%, 0%);
  border: 1px solid var(--retro-gray);
  color: hsl(0, 0%, 100%);
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.retro-input:focus {
  outline: none;
  border-color: var(--retro-cyan);
}

.h-64 {
  height: 16rem;
}

.overflow-y-auto {
  overflow-y: auto;
}

.page-link {
  color: var(--retro-cyan);
  cursor: pointer;
  padding: 2px 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.page-link:hover {
  color: var(--retro-yellow);
}

.page-link.active {
  background-color: var(--retro-yellow);
  color: hsl(0, 0%, 0%);
  font-weight: bold;
}

.inline-flex {
  display: inline-flex;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.items-center {
  align-items: center;
}

.game-card {
  margin-bottom: 1rem;
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1rem;
}

.game-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border: 1px solid var(--retro-gray);
  image-rendering: pixelated;
}

.text-retro-yellow {
  color: var(--retro-yellow);
}

@media (min-width: 1024px) {
  .lg\\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 1rem;
  }
  
  .lg\\:col-span-2 {
    grid-column: 1 / 2 !important;
  }
  
  .lg\\:col-span-1 {
    grid-column: 2 / 3 !important;
  }
  
  .ascii-title {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .md\\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .md\\:col-span-1 {
    grid-column: span 1;
  }
  
  .md\\:col-span-5 {
    grid-column: span 5;
  }
}

/* Remove old md grid classes - replaced above */

@media (min-width: 640px) {
  .sm\\:text-sm .ascii-title {
    font-size: 9px;
  }
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Home page layout fix */
.home-layout {
  display: block;
}

@media (min-width: 1024px) {
  .home-layout {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 1rem !important;
  }
  
  .changelog-section {
    grid-column: 1 / 2 !important;
  }
  
  .yellbox-section {
    grid-column: 2 / 3 !important;
  }
}