/**
 * MNM Arcade - Unified Font System
 * Applies consistent typography across all arcade games
 *
 * Font Pairings:
 * - Headers + Stats: Press Start 2P + Work Sans (pixel-retro meets arcade scoreboard)
 * - Logo + Buttons: Monoton + Open Sans (neon arcade sign with red drop shadows)
 * - Text-heavy: DM Serif Display + DM Sans (classy retro)
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Work+Sans:wght@400;500;600;700;800&family=Monoton&family=Open+Sans:wght@400;600;700;800&family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ============================================
   FONT FAMILY VARIABLES
   ============================================ */
:root {
  /* Headers + Stats - Pixel-retro meets arcade scoreboard */
  --font-header: 'Press Start 2P', cursive, monospace;
  --font-stats: 'Work Sans', sans-serif;

  /* Logo + Buttons - Neon arcade sign look */
  --font-logo: 'Monoton', cursive, display;
  --font-button: 'Open Sans', sans-serif;

  /* Text-heavy pages - Classy retro */
  --font-body-serif: 'DM Serif Display', serif;
  --font-body-sans: 'DM Sans', sans-serif;

  /* Neon red drop shadow for logos and buttons */
  --neon-red-shadow:
    0 0 10px rgba(255, 0, 0, 0.8),
    0 0 20px rgba(255, 0, 0, 0.6),
    0 0 30px rgba(255, 0, 0, 0.4),
    0 0 40px rgba(255, 0, 0, 0.2);

  --neon-red-text-shadow:
    2px 2px 0 rgba(220, 0, 0, 0.9),
    4px 4px 0 rgba(180, 0, 0, 0.7),
    0 0 10px rgba(255, 0, 0, 0.5);
}

/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */

/* Headers - Press Start 2P (pixel-retro) */
.arcade-header,
.arcade-title,
h1.arcade,
h2.arcade {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.6;
}

/* Stats/Numbers - Work Sans (clean arcade scoreboard) */
.arcade-stats,
.arcade-score,
.arcade-number,
.stat-value {
  font-family: var(--font-stats);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Logos - Monoton with neon red glow */
.arcade-logo,
.game-logo {
  font-family: var(--font-logo);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: var(--neon-red-text-shadow);
  color: #fff;
}

/* Buttons - Open Sans with optional neon effect */
.arcade-button,
.carnival-button,
button.arcade {
  font-family: var(--font-button);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Buttons with neon effect */
.arcade-button-neon,
.carnival-button-neon {
  font-family: var(--font-button);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: var(--neon-red-text-shadow);
  box-shadow: var(--neon-red-shadow);
}

/* Body text - DM Sans (main content) */
.arcade-body,
.arcade-text,
p.arcade,
.arcade-description {
  font-family: var(--font-body-sans);
  font-weight: 400;
  line-height: 1.6;
}

/* Serif body text - DM Serif Display (text-heavy pages) */
.arcade-body-serif,
.arcade-about,
.arcade-rules {
  font-family: var(--font-body-serif);
  font-weight: 400;
  line-height: 1.8;
  font-size: 1.1em;
}

/* ============================================
   ELEMENT-SPECIFIC OVERRIDES
   ============================================ */

/* Main page titles */
h1 {
  font-family: var(--font-logo);
  text-shadow: var(--neon-red-text-shadow);
}

/* Section headers */
h2 {
  font-family: var(--font-header);
}

/* Sub-headers */
h3 {
  font-family: var(--font-stats);
  font-weight: 700;
}

/* Body paragraphs */
p {
  font-family: var(--font-body-sans);
}

/* All buttons */
button {
  font-family: var(--font-button);
  font-weight: 700;
}

/* ============================================
   RESPONSIVE FONT SIZES
   ============================================ */

/* Press Start 2P needs smaller sizes on mobile */
@media (max-width: 768px) {
  .arcade-header,
  .arcade-title,
  h1.arcade,
  h2.arcade {
    font-size: 0.85em;
    letter-spacing: 1px;
  }

  .arcade-logo,
  .game-logo {
    font-size: 1.5em;
    letter-spacing: 2px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.font-pixel { font-family: var(--font-header); }
.font-stats { font-family: var(--font-stats); }
.font-neon { font-family: var(--font-logo); }
.font-button { font-family: var(--font-button); }
.font-serif { font-family: var(--font-body-serif); }
.font-sans { font-family: var(--font-body-sans); }

.neon-glow { text-shadow: var(--neon-red-text-shadow); }
.neon-box { box-shadow: var(--neon-red-shadow); }