/* =============================================================================
   Dungeon Weekly Design System
   Based on ENDESGA 32 (EDG32) palette — see plans/style.md
   ============================================================================= */

/* --- EDG32 Palette --- */
:root {
  --c-rust: #be4a2f;
  --c-copper: #d77643;
  --c-parchment: #ead4aa;
  --c-sand: #e4a672;
  --c-leather: #b86f50;
  --c-mahogany: #733e39;
  --c-wine: #3e2731;
  --c-crimson: #a22633;
  --c-red: #e43b44;
  --c-orange: #f77622;
  --c-gold: #feae34;
  --c-yellow: #fee761;
  --c-green: #63c74d;
  --c-forest: #3e8948;
  --c-pine: #265c42;
  --c-deep-teal: #193c3e;
  --c-navy: #124e89;
  --c-blue: #0099db;
  --c-cyan: #2ce8f5;
  --c-white: #ffffff;
  --c-silver: #c0cbdc;
  --c-steel: #8b9bb4;
  --c-slate: #5a6988;
  --c-storm: #3a4466;
  --c-midnight: #262b44;
  --c-abyss: #181425;
  --c-hot-pink: #ff0044;
  --c-purple: #68386c;
  --c-magenta: #b55088;
  --c-coral: #f6757a;
  --c-skin-light: #e8b796;
  --c-skin-dark: #c28569;

  /* --- Semantic Colors --- */

  /* Backgrounds */
  --bg-page: var(--c-abyss);
  --bg-surface: var(--c-midnight);
  --bg-elevated: var(--c-storm);
  --bg-input: var(--c-midnight);
  --bg-landing: var(--c-parchment);

  /* Text */
  --text-primary: var(--c-parchment);
  --text-secondary: var(--c-silver);
  --text-muted: var(--c-steel);
  --text-dark: var(--c-abyss);
  --text-heading: var(--c-gold);

  /* Interactive */
  --interactive: var(--c-gold);
  --interactive-hover: var(--c-orange);
  --link: var(--c-blue);
  --link-hover: var(--c-cyan);

  /* Borders */
  --border-default: var(--c-storm);
  --border-strong: var(--c-slate);
  --border-light: var(--c-sand);

  /* Feedback */
  --color-success: var(--c-green);
  --color-warning: var(--c-orange);
  --color-danger: var(--c-red);
  --color-info: var(--c-blue);

  /* Gameplay */
  --hp-full: var(--c-green);
  --hp-mid: var(--c-gold);
  --hp-low: var(--c-orange);
  --hp-critical: var(--c-crimson);
  --xp-color: var(--c-orange);
  --mana-color: var(--c-blue);
  --wound-color: var(--c-coral);

  /* Item rarity */
  --rarity-common: var(--c-silver);
  --rarity-uncommon: var(--c-green);
  --rarity-rare: var(--c-blue);
  --rarity-epic: var(--c-purple);
  --rarity-legendary: var(--c-magenta);

  /* --- Typography --- */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font sizes (14px minimum) */
  --fs-xs: 0.875rem;   /* 14px */
  --fs-sm: 1rem;        /* 16px */
  --fs-base: 1.125rem;  /* 18px */
  --fs-md: 1.25rem;     /* 20px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 1.875rem;    /* 30px */
  --fs-2xl: 2.25rem;    /* 36px */
  --fs-3xl: 3rem;       /* 48px */

  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(24, 20, 37, 0.3);
  --shadow-md:
    0 2px 4px rgba(24, 20, 37, 0.2),
    0 4px 8px rgba(24, 20, 37, 0.15);
  --shadow-lg:
    0 4px 8px rgba(24, 20, 37, 0.2),
    0 8px 16px rgba(24, 20, 37, 0.15),
    0 16px 32px rgba(24, 20, 37, 0.1);
  --shadow-glow: 0 0 12px rgba(254, 174, 52, 0.4);

  /* --- Border Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --duration-fast: 0.1s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;

  /* --- Layout --- */
  --header-height: 64px;
  --game-max-width: 420px;
  --landing-max-width: 1200px;
}

/* =============================================================================
   Base Resets & Defaults
   ============================================================================= */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: var(--lh-normal);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =============================================================================
   Typography
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-top: 0;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-normal) ease;
}

a:hover {
  color: var(--link-hover);
}

small, .text-sm {
  font-size: var(--fs-xs); /* 14px — absolute minimum */
}

.text-muted {
  color: var(--text-muted) !important;
}

.font-display {
  font-family: var(--font-display);
}

.font-mono {
  font-family: var(--font-mono);
}

/* =============================================================================
   Navbar (Dark dungeon theme)
   ============================================================================= */

.navbar-custom {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  min-height: var(--header-height);
  padding: 0;
}

.navbar-custom .navbar-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--text-heading) !important;
  letter-spacing: 0.02em;
}

.navbar-custom .nav-link {
  color: var(--text-secondary) !important;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  color: var(--text-heading) !important;
  background-color: var(--bg-elevated);
}

.navbar-custom .navbar-toggler {
  border-color: var(--border-default);
}

.navbar-custom .navbar-toggler-icon {
  filter: invert(0.8);
}

/* =============================================================================
   Buttons
   ============================================================================= */

.btn-primary {
  background-color: var(--interactive);
  border-color: var(--interactive);
  color: var(--c-abyss);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) ease;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--interactive-hover);
  border-color: var(--interactive-hover);
  color: var(--c-abyss);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
  color: var(--text-primary);
  border-color: var(--border-strong);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) ease;
}

.btn-outline-secondary:hover {
  background-color: var(--bg-elevated);
  border-color: var(--text-muted);
  color: var(--text-heading);
}

.btn-danger {
  background-color: var(--c-crimson);
  border-color: var(--c-crimson);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.btn-danger:hover {
  background-color: var(--c-red);
  border-color: var(--c-red);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--interactive);
  font-weight: var(--fw-semibold);
  padding: 10px 20px;
  min-height: 44px;
  transition: color var(--duration-normal) ease;
}

.btn-ghost:hover {
  color: var(--interactive-hover);
}

/* =============================================================================
   Dropdown Menu
   ============================================================================= */

.dropdown-menu {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.dropdown-item {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  transition: all var(--duration-fast) ease;
}

.dropdown-item:hover {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
}

.dropdown-header {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.dropdown-divider {
  border-color: var(--border-default);
}

/* =============================================================================
   Cards
   ============================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  font-family: var(--font-display);
}

.card-body {
  color: var(--text-primary);
}

/* =============================================================================
   Forms
   ============================================================================= */

.form-label {
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.form-control {
  background-color: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  padding: 12px 16px;
  min-height: 44px;
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.form-control:focus {
  background-color: var(--bg-input);
  border-color: var(--interactive);
  box-shadow: var(--shadow-glow);
  color: var(--text-primary);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.form-control.is-invalid {
  border-color: var(--color-danger);
}

.invalid-feedback {
  color: var(--color-danger);
  font-size: var(--fs-xs);
}

/* =============================================================================
   Main Content Area
   ============================================================================= */

.main-content {
  flex: 1;
  padding: var(--space-7) 0;
}

/* =============================================================================
   Alerts
   ============================================================================= */

.alert {
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: none;
}

.alert-success {
  background-color: rgba(99, 199, 77, 0.15);
  color: var(--c-green);
}

.alert-warning {
  background-color: rgba(247, 118, 34, 0.15);
  color: var(--c-orange);
}

.alert-danger,
.alert-error {
  background-color: rgba(228, 59, 68, 0.15);
  color: var(--c-red);
}

.alert-info {
  background-color: rgba(0, 153, 219, 0.15);
  color: var(--c-blue);
}

/* =============================================================================
   Footer
   ============================================================================= */

.footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  padding: var(--space-7) 0;
  margin-top: auto;
  color: var(--text-muted);
}

.footer a {
  color: var(--text-secondary);
  transition: color var(--duration-normal) ease;
}

.footer a:hover {
  color: var(--text-heading);
}

/* =============================================================================
   User Avatar
   ============================================================================= */

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-gold), var(--c-orange));
  color: var(--c-abyss);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}

/* =============================================================================
   Code
   ============================================================================= */

code {
  font-family: var(--font-mono);
  background-color: var(--bg-elevated);
  color: var(--c-cyan);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

pre {
  background-color: var(--c-abyss);
  color: var(--text-primary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* =============================================================================
   Gameplay Container (420px constraint)
   ============================================================================= */

.game-surface {
  max-width: var(--game-max-width);
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 var(--space-3);
  background: var(--bg-page);
}

/* =============================================================================
   HP Bar
   ============================================================================= */

.hp-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--c-storm);
  overflow: hidden;
}

.hp-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--duration-normal) ease;
}

.hp-bar__fill--full     { background: var(--hp-full); }
.hp-bar__fill--mid      { background: var(--hp-mid); }
.hp-bar__fill--low      { background: var(--hp-low); }
.hp-bar__fill--critical { background: var(--hp-critical); }

/* =============================================================================
   Utility Classes
   ============================================================================= */

.text-gold {
  color: var(--text-heading);
}

.text-gradient {
  background: linear-gradient(135deg, var(--c-gold), var(--c-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge-rarity-common    { background: var(--rarity-common); color: var(--c-abyss); }
.badge-rarity-uncommon  { background: var(--rarity-uncommon); color: var(--c-abyss); }
.badge-rarity-rare      { background: var(--rarity-rare); color: var(--c-white); }
.badge-rarity-epic      { background: var(--rarity-epic); color: var(--c-white); }
.badge-rarity-legendary { background: var(--rarity-legendary); color: var(--c-white); }

/* =============================================================================
   Focus & Accessibility
   ============================================================================= */

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

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

/* =============================================================================
   Animation
   ============================================================================= */

.fade-in-llm {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .navbar-custom .navbar-nav {
    padding-top: var(--space-4);
  }

  .main-content {
    padding: var(--space-4) 0;
  }
}