/* ============================================
   main.css — Global styles, CSS Variables, Reset
   ============================================ */

/* --- Font Face --- */
@font-face {
  font-family: 'Noto Serif SC';
  src: url('../assets/fonts/NotoSerifSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif SC';
  src: url('../assets/fonts/NotoSerifSC-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
       url('../assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Italic.woff2') format('woff2'),
       url('../assets/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
       url('../assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* --- CSS Variables (Design Tokens) --- */
:root {
  /* Colors — Terminal Phase */
  --color-terminal-bg: #000000;
  --color-terminal-text: #33ff66;
  --color-terminal-dim: #1a8033;

  /* Colors — Minimal Phase */
  --color-minimal-bg: #000000;
  --color-minimal-text: #e0dcd4;

  /* Colors — Full Game Phase */
  --color-bg-primary: #0a0e1a;
  --color-bg-secondary: #121828;
  --color-text-primary: #e0dcd4;
  --color-text-secondary: #7a8599;
  --color-text-dialogue: #8ab4d6;
  --color-accent-gold: #c9a84c;
  --color-accent-gold-bright: #f0d060;
  --color-error: #8b3a3a;

  /* Typography */
  --font-serif: 'Noto Serif SC', 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Source Code Pro', 'Courier New', monospace;

  /* Font Sizes */
  --font-size-sm: 14px;
  --font-size-base: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 26px;
  --font-size-mono: 16px;

  /* Spacing */
  --content-max-width: 720px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Timing */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.5s ease;
  --transition-slow: 1.5s ease;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-terminal-bg);
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Phase Container --- */
.phase {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  z-index: 1;
}

.phase.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* --- Shared Input Styles --- */
input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  caret-color: currentColor;
  width: 100%;
}

input[type="text"]::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.5;
}

/* --- Scrollbar (thin, subtle) --- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-secondary);
  border-radius: 2px;
}

/* --- Selection --- */
::selection {
  background: var(--color-accent-gold);
  color: var(--color-bg-primary);
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --font-size-sm: 13px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-mono: 14px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;
  }
}