/* ═══════════════════════════════════════════════════════════════════════════
   The Life of Kevin — main.css
   Global styles, index page, auth card, shared components
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --bg-deep:      #07070d;
  --bg-base:      #0d0d18;
  --bg-panel:     #12121e;
  --bg-elevated:  #1a1a2e;
  --bg-hover:     #20203a;

  --accent:       #e8a045;
  --accent-dim:   #c07a28;
  --accent-glow:  rgba(232, 160, 69, 0.18);
  --accent-text:  #f5c070;

  --text-primary: #e8e8f0;
  --text-second:  #9898b8;
  --text-muted:   #5a5a7a;
  --text-dim:     #3a3a55;

  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(232,160,69,0.4);

  --danger:       #e05555;
  --success:      #55c080;
  --info:         #5590e0;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  --font-ui:    'Rajdhani', system-ui, sans-serif;
  --font-story: 'Crimson Pro', Georgia, serif;
  --font-mono:  'Courier New', monospace;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.7);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.85);
  --shadow-accent: 0 0 30px rgba(232,160,69,0.15);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.index-page,
body.chars-page {
  overflow: auto;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.btn-primary {
  display: inline-block;
  padding: 12px 28px;
  background: var(--accent);
  color: #0a0808;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
}
.btn-primary:hover  { background: #f5b454; transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.btn-primary:active { transform: translateY(0); }

.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover { color: var(--accent); }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-second);
  text-decoration: none;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  transition: color .2s;
}
.btn-back:hover { color: var(--accent); }

.admin-badge {
  background: var(--accent);
  color: #0a0808;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
}

.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.index-page {
  background: radial-gradient(ellipse at 50% 120%, #1a0e00 0%, #0d0a18 40%, #07070d 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Particles */
.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: floatUp var(--dur) ease-in infinite;
  animation-delay: var(--delay);
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: .6; }
  90%  { opacity: .2; }
  100% { opacity: 0; transform: translateY(-80vh) scale(.3); }
}

/* Amsterdam skyline silhouette */
.skyline-silhouette {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%230d0d18' d='M0 200 L0 140 L20 140 L20 100 L40 100 L40 80 L60 80 L60 100 L80 100 L80 130 L100 130 L100 90 L110 85 L120 90 L120 130 L140 130 L140 110 L160 110 L160 70 L165 60 L170 70 L170 110 L200 110 L200 130 L220 130 L220 100 L230 95 L240 100 L240 120 L260 120 L260 80 L270 75 L280 80 L280 130 L300 130 L300 110 L320 110 L320 100 L340 100 L340 130 L360 130 L360 90 L370 80 L380 90 L380 130 L400 130 L400 120 L420 120 L420 90 L430 75 L440 90 L440 120 L460 120 L460 130 L480 130 L480 100 L500 100 L500 80 L510 70 L520 80 L520 100 L540 100 L540 120 L560 120 L560 90 L580 90 L580 120 L600 120 L600 100 L620 100 L620 110 L640 110 L640 80 L650 65 L660 80 L660 110 L680 110 L680 130 L700 130 L700 100 L720 100 L720 130 L740 130 L740 120 L760 120 L760 90 L770 80 L780 90 L780 120 L800 120 L800 130 L820 130 L820 100 L840 100 L840 80 L850 70 L860 80 L860 130 L880 130 L880 110 L900 110 L900 130 L920 130 L920 100 L940 100 L940 120 L960 120 L960 90 L970 80 L980 90 L980 120 L1000 120 L1000 130 L1020 130 L1020 100 L1040 100 L1040 80 L1060 80 L1060 100 L1080 100 L1080 130 L1100 130 L1100 110 L1120 110 L1120 90 L1130 75 L1140 90 L1140 110 L1160 110 L1160 130 L1180 130 L1180 100 L1200 100 L1200 120 L1220 120 L1220 80 L1240 80 L1240 120 L1260 120 L1260 130 L1280 130 L1280 100 L1300 100 L1300 120 L1320 120 L1320 90 L1340 90 L1340 130 L1360 130 L1360 110 L1380 110 L1380 140 L1440 140 L1440 200 Z'/%3E%3C/svg%3E") bottom center / cover no-repeat;
  z-index: 0;
}

.index-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Logo */
.index-header { text-align: center; }

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.logo-pre {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: .6em;
  color: var(--accent);
  text-transform: uppercase;
}

.logo-title {
  font-family: var(--font-story);
  font-size: clamp(2.8rem, 8vw, 4.2rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  text-shadow: 0 2px 40px rgba(232,160,69,.3);
}

.logo-sub {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--text-second);
  text-transform: uppercase;
  margin-top: 4px;
}

.version-badge {
  margin-top: 16px;
  display: inline-block;
  padding: 4px 14px;
  background: rgba(232,160,69,0.1);
  border: 1px solid rgba(232,160,69,0.25);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .1em;
  font-family: var(--font-mono);
}

/* Auth card */
.auth-card {
  width: 100%;
  background: rgba(18, 18, 30, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  padding: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.auth-tab:hover  { color: var(--text-second); }
.auth-tab.active {
  color: var(--accent);
  background: rgba(232,160,69,0.06);
  border-bottom: 2px solid var(--accent);
}

.auth-form {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-second);
}
.form-group .hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.form-group input {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border-color .2s, background .2s;
  outline: none;
}
.form-group input:focus {
  border-color: var(--accent-dim);
  background: rgba(255,255,255,0.06);
}
.form-group input::placeholder { color: var(--text-dim); }

.form-error {
  color: var(--danger);
  font-size: 0.88rem;
  min-height: 20px;
  padding: 4px 0;
}

.form-note {
  background: rgba(232,160,69,0.1);
  border: 1px solid rgba(232,160,69,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--accent-text);
  font-size: 0.88rem;
}

.auth-form .btn-primary { width: 100%; text-align: center; padding: 14px; }

.index-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHARACTERS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
/* (see characters.css for card styles, here just the shell) */

.chars-page { background: var(--bg-deep); overflow-y: auto; }

.chars-header {
  position: sticky;
  top: 0;
  background: rgba(7,7,13,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 0 32px;
}
.chars-header-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.chars-title { flex: 1; }
.chars-title h1 {
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.chars-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chars-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chars-username { color: var(--text-second); font-size: 0.9rem; }

.chars-loading, .chars-error {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-second);
}
.chars-error { color: var(--danger); }