/* ============================================
   Claude Buddy — Terminal Theme
   Matching reference: claude-buddy.vercel.app
   Nord-like dark palette + JetBrains Mono
   ============================================ */

/* --- Google Fonts: JetBrains Mono --- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Backgrounds — Nord-like palette matching reference */
  --bg-primary: #1a1e23;
  --bg-card: #21262e;
  --bg-surface: #1a1e23;
  --border-color: #3b4554;

  /* Text */
  --fg-primary: #d8e0e9;
  --fg-muted: #99a5b2;
  --fg-accent: #86c0d0;

  /* Rarity accent colors — matching reference exactly */
  --color-common: #99a5b2;
  --color-uncommon: #a4bf8d;
  --color-rare: #86c0d0;
  --color-epic: #ebca89;
  --color-legendary: #d3737b;

  /* Special */
  --color-shiny-1: #d3737b;
  --color-shiny-2: #ebca89;
  --color-shiny-3: #a4bf8d;
  --color-shiny-4: #86c0d0;
  --color-shiny-5: #b78aaf;
  --color-destructive: #d3737b;
  --color-focus: #86c0d0;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

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

body {
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  padding: var(--space-2xl) var(--space-lg);
}

/* --- Screen Containers --- */
.screen {
  display: none;
  max-width: 900px;
  margin: 0 auto;
}

.screen.active {
  display: block;
}

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

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

.screen--main {
  display: none;
}

.screen--main.active {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 767px) {
  .screen--main.active {
    grid-template-columns: 1fr;
  }
}

/* --- Typography Classes --- */
.text-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.text-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.text-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.text-display {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.text-dim {
  color: var(--fg-muted);
}

/* --- Rarity Color Classes --- */
.rarity-common { color: var(--color-common); }
.rarity-uncommon { color: var(--color-uncommon); }
.rarity-rare { color: var(--color-rare); }

.rarity-epic {
  color: var(--color-epic);
  text-shadow: 0 0 6px rgba(235, 202, 137, 0.4);
}

.rarity-legendary {
  color: var(--color-legendary);
  text-shadow: 0 0 8px rgba(211, 115, 123, 0.5), 0 0 20px rgba(211, 115, 123, 0.2);
}

/* --- Rarity Badge --- */
.rarity-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 8px;
}

/* --- ASCII Art Container --- */
.sprite-container {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--space-md);
  display: inline-block;
  position: relative;
}

/* --- Sprite Bob Animation (matching reference) --- */
@keyframes sprite-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.sprite-bob {
  animation: sprite-bob 3s ease-in-out infinite;
}

/* --- Input Styling --- */
.terminal-input {
  font-family: var(--font-mono);
  background: var(--bg-card);
  color: var(--fg-primary);
  border: 1px solid var(--border-color);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  outline: none;
  border-radius: 4px;
  width: 100%;
  max-width: 320px;
}

.terminal-input:focus {
  outline: none;
  border-color: var(--fg-accent);
  box-shadow: 0 0 0 1px var(--fg-accent);
}

/* --- Button Styling --- */
.btn-primary {
  font-family: var(--font-mono);
  color: var(--fg-accent);
  background: transparent;
  border: 1px solid var(--fg-accent);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-primary:hover {
  background: rgba(134, 192, 208, 0.15);
  color: var(--fg-primary);
}

.btn-danger {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 6px 16px;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-danger:hover {
  color: var(--color-destructive);
  border-color: var(--color-destructive);
}

/* --- Stat Bar --- */
.stat-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.stat-name {
  font-size: 12px;
  color: var(--fg-muted);
  text-align: right;
}

.stat-bar-track {
  background: rgba(59, 69, 84, 0.3);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stat-value {
  font-size: 12px;
  color: var(--fg-muted);
  min-width: 24px;
  text-align: right;
}

/* Stat colors matching reference rarity colors */
.stat-debugging .stat-bar-fill { background: var(--color-rare); }
.stat-patience .stat-bar-fill { background: var(--color-uncommon); }
.stat-chaos .stat-bar-fill { background: var(--color-legendary); }
.stat-wisdom .stat-bar-fill { background: var(--color-shiny-5); }
.stat-snark .stat-bar-fill { background: var(--color-epic); }

/* --- Panel Classes --- */
.panel-left {
  padding: var(--space-lg);
}

.panel-right {
  padding: var(--space-lg);
}

/* --- Info Section --- */
.buddy-info {
  margin-top: var(--space-md);
}

.buddy-species-name {
  font-size: 20px;
  font-weight: 700;
}

.buddy-personality {
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
  margin-top: 4px;
}

.buddy-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: var(--space-sm);
}

.buddy-meta span {
  color: var(--fg-accent);
}

/* --- Speech Bubble --- */
.speech-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: 12px;
  color: var(--fg-muted);
  min-height: 40px;
}

/* --- Shiny Effects (matching reference exactly) --- */
@keyframes shiny-color {
  0%   { color: var(--color-shiny-1); }
  20%  { color: var(--color-shiny-2); }
  40%  { color: var(--color-shiny-3); }
  60%  { color: var(--color-shiny-4); }
  80%  { color: var(--color-shiny-5); }
  100% { color: var(--color-shiny-1); }
}

@keyframes shiny-glow {
  0%   { text-shadow: 0 0 8px rgba(211,115,123,0.5), 0 0 20px rgba(211,115,123,0.2); }
  20%  { text-shadow: 0 0 8px rgba(235,202,137,0.5), 0 0 20px rgba(235,202,137,0.2); }
  40%  { text-shadow: 0 0 8px rgba(164,191,141,0.5), 0 0 20px rgba(164,191,141,0.2); }
  60%  { text-shadow: 0 0 8px rgba(134,192,208,0.5), 0 0 20px rgba(134,192,208,0.2); }
  80%  { text-shadow: 0 0 8px rgba(183,138,175,0.5), 0 0 20px rgba(183,138,175,0.2); }
  100% { text-shadow: 0 0 8px rgba(211,115,123,0.5), 0 0 20px rgba(211,115,123,0.2); }
}

@keyframes shiny-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.92; transform: scale(1.01); }
}

.shiny-text {
  animation: shiny-color 2.5s linear infinite, shiny-glow 2.5s linear infinite, shiny-pulse 4s ease-in-out infinite;
}

/* --- Heart Float Animation (for Phase 2 pet interaction) --- */
@keyframes heart-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateY(-10px) scale(1); }
  70%  { opacity: 1; transform: translateY(-50px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.6) rotate(15deg); }
}

/* --- Sparkle Animation --- */
@keyframes sparkle-float {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: 1; transform: translateY(-8px) scale(1); }
  80%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0); }
}

/* --- Other Animations --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 5px currentColor; }
  50% { text-shadow: 0 0 15px currentColor, 0 0 30px currentColor; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Divider --- */
.divider {
  border-top: 1px solid var(--border-color);
  margin: var(--space-md) 0;
}

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

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

/* --- Welcome Screen Specifics --- */
.welcome-logo {
  color: var(--fg-accent);
  margin-bottom: var(--space-2xl);
}

.welcome-prompt {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: 14px;
  color: var(--fg-muted);
}

/* --- Return Overlay --- */
.return-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.return-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--space-xl);
  text-align: center;
}

/* --- Warning Bar --- */
.warning-bar {
  background: rgba(235, 202, 137, 0.1);
  border: 1px solid var(--color-epic);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  color: var(--color-epic);
  margin-bottom: var(--space-md);
}