:root {
  --lena-purple: #8e5bd9;
  --lena-purple-dark: #6f3fc0;
  --lena-yellow: #f7c948;
  --lena-yellow-dark: #e0aa1a;
  --lena-pink: #f76fa6;
  --lena-pink-dark: #e8478a;
  --lena-red: #ef5350;
  --lena-red-dark: #d63a37;
  --lena-green: #4caf50;
}

body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  background: linear-gradient(160deg, #fdf1ff 0%, #fff6e0 50%, #ffeef5 100%);
  min-height: 100vh;
  color: #4a3f55;
}

.game-title {
  font-weight: 800;
  color: var(--lena-purple-dark);
  font-size: 2.4rem;
}

.game-title .fa-star {
  color: var(--lena-yellow);
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: fade-in 0.25s ease-in;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-panel {
  background: #ffffffcc;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 480px;
  box-shadow: 0 6px 20px rgba(80, 40, 100, 0.12);
}

.name-input {
  border-radius: 1rem;
  font-family: inherit;
  font-size: 1.3rem;
  border: 3px solid #ddd2ea;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.name-input.answer-incorrect {
  border-color: var(--lena-red);
  background-color: #fde3e2;
}

/* Fun buttons */
.btn-fun {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 1rem;
  color: #fff;
  padding: 0.6rem 1.6rem;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
  transition: transform 0.1s ease;
}
.btn-fun:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.btn-fun-purple { background: var(--lena-purple); }
.btn-fun-purple:hover { background: var(--lena-purple-dark); color: #fff; }
.btn-fun-yellow { background: var(--lena-yellow-dark); }
.btn-fun-yellow:hover { background: #c98f10; color: #fff; }
.btn-fun-pink { background: var(--lena-pink); }
.btn-fun-pink:hover { background: var(--lena-pink-dark); color: #fff; }
.btn-fun-red { background: var(--lena-red); }
.btn-fun-red:hover { background: var(--lena-red-dark); color: #fff; }
.btn-fun-back { background: #b9aec9; }
.btn-fun-back:hover { background: #9c8fb3; color: #fff; }

.name-highlight {
  color: var(--lena-purple-dark);
  font-weight: 700;
}

.change-name-link {
  color: var(--lena-purple-dark);
  text-decoration: underline;
  font-size: 0.95rem;
}

/* Tile grid (game select) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 700px;
  margin: 2rem auto 0;
}

.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  border-radius: 1.5rem;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  border: none;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15);
  transition: transform 0.12s ease;
}
.game-tile:hover, .game-tile:focus {
  transform: translateY(-3px) scale(1.02);
  color: #fff;
}
.game-tile:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}
.game-tile i {
  font-size: 2.8rem;
}

.tile-purple { background: linear-gradient(160deg, var(--lena-purple), var(--lena-purple-dark)); }
.tile-yellow { background: linear-gradient(160deg, var(--lena-yellow), var(--lena-yellow-dark)); }
.tile-pink   { background: linear-gradient(160deg, var(--lena-pink), var(--lena-pink-dark)); }
.tile-red    { background: linear-gradient(160deg, var(--lena-red), var(--lena-red-dark)); }

/* Level select */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 750px;
  margin: 0 auto;
}

.level-card {
  background: #ffffffcc;
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border: none;
  box-shadow: 0 6px 20px rgba(80, 40, 100, 0.12);
  transition: transform 0.12s ease;
}
.level-card:hover, .level-card:focus {
  transform: translateY(-3px);
}
.level-card .level-number {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--lena-pink-dark);
  margin-bottom: 0.25rem;
  display: block;
}
.level-card .level-label {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--lena-purple-dark);
  margin-bottom: 0.5rem;
  display: block;
}
.level-card .level-stars {
  color: var(--lena-yellow-dark);
  font-size: 1.3rem;
}
.level-card .level-stars .fa-star.empty {
  color: #ddd2ea;
}

/* Quiz */
.progress-label {
  font-weight: 700;
  color: var(--lena-purple-dark);
  font-size: 1.1rem;
}

.question-text {
  font-size: 2.2rem;
  font-weight: 700;
  color: #4a3f55;
  margin-bottom: 1.5rem;
}

.answer-input {
  border-radius: 1rem;
  font-family: inherit;
  font-size: 1.6rem;
  text-align: center;
  max-width: 200px;
  margin: 0 auto 1rem;
  border: 3px solid #ddd2ea;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.answer-input.answer-correct {
  border-color: var(--lena-green);
  background-color: #e3f7e4;
}

.answer-input.answer-incorrect {
  border-color: var(--lena-red);
  background-color: #fde3e2;
}

/* End screen */
.stars-display {
  font-size: 3rem;
  color: var(--lena-yellow-dark);
  margin-bottom: 1rem;
}
.stars-display .fa-star.empty {
  color: #ddd2ea;
}