:root {
  --color-primary: #16A34A;
  --color-primary-dark: #0E7C38;
  --color-amber: #F59E0B;
  --color-blue: #3B82F6;
  --color-pink: #EC4899;
  --color-red: #EF4444;
  --color-heading: #14532D;
  --color-body: #3D5346;
  --color-body-dark: #1E2B22;
  --color-muted: #5B7263;
  --color-border: #DCEDE1;
  --color-border-light: #E2EFE6;
  --color-track: #F4F1E8;
  --color-surface: #FDFEFB;
  --page-bg: linear-gradient(150deg,#FEF6E4 0%,#EAF7EE 35%,#E7F1FE 70%,#FDEEF6 100%);
  --hero-gradient: linear-gradient(120deg, #16A34A 0%, #0EA5A0 55%, #3B82F6 110%);
  --radius-card: 24px;
  --radius-inner: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 40px rgba(20,83,45,.14);
  --shadow-inner: 0 6px 18px rgba(20,83,45,.10);
  --shadow-cta: 0 8px 20px rgba(245,158,11,.35);
  --font-heading: 'Baloo 2', sans-serif;
  --font-body: 'Nunito', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--color-body);
  min-height: 100vh;
}

.screen {
  max-width: 390px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.hero {
  background: var(--hero-gradient);
  color: #fff;
  padding: 28px 24px 88px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: -36px;
}

.card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-inner);
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.field-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: 22px;
  padding: 4px 0;
  background: transparent;
  outline: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: #F3F4F6;
  color: #374151;
}

.chip.selected {
  background: var(--color-primary);
  color: #fff;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-inner);
  border: 1.5px solid var(--color-border-light);
  padding: 14px 16px;
  cursor: pointer;
  margin-bottom: 8px;
}

.option-row.selected {
  border: 2px solid var(--color-primary);
  background: #F0FAF3;
}

.btn-primary {
  width: 100%;
  background: var(--color-amber);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  box-shadow: var(--shadow-cta);
  cursor: pointer;
}

.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-light);
  border-radius: 20px;
  padding: 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}

.error-text {
  color: var(--color-red);
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}

.stat-income    { color: #B45309; }
.stat-wealth    { color: #166534; }
.stat-happiness { color: #9D2463; }
.stat-health    { color: #B91C1C; }
.stat-skill     { color: #1D4ED8; }

.stats-strip {
  background: #fff;
  border-radius: var(--radius-inner);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
}

.stat-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.progress-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.progress-dot {
  height: 8px;
  border-radius: var(--radius-pill);
  background: #C9E3D1;
  width: 8px;
}

.progress-dot.active {
  width: 26px;
  background: var(--color-primary);
}