/* ===== Kezdőképernyő – hangulati csiszolás ===== */

/* Belépő stagger-animáció */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#start-screen .logo-title,
#start-screen .lead,
#start-screen .rules li {
  animation: riseIn .5s ease both;
}
#start-screen .logo-title { animation-delay: .08s; }
#start-screen .lead       { animation-delay: .18s; }
#start-screen .rules li:nth-child(1) { animation-delay: .28s; }
#start-screen .rules li:nth-child(2) { animation-delay: .36s; }
#start-screen .rules li:nth-child(3) { animation-delay: .44s; }

/* PLAY gomb: finoman beúszik a többivel együtt */
#start-screen .play-btn {
  animation: riseIn .5s ease .52s both;
}
#start-screen .play-btn:active { animation: none; }

/* Levegősebb, letisztultabb szabály-lista */
#start-screen .rules li {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(216, 176, 114, 0.45);
  box-shadow: 0 2px 6px -3px var(--shadow);
}
#start-screen .rules .ic {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 122, 63, 0.13);
  border-radius: 50%;
  font-size: 16px;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  #start-screen .play-btn,
  #start-screen .logo-title,
  #start-screen .lead,
  #start-screen .rules li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Kihívás-banner (challenge-link) ===== */
.challenge-banner {
  display: none;   /* alapból rejtve; a .show teszi láthatóvá (initChallenge) */
  align-items: center; gap: 9px;
  background: linear-gradient(180deg, #ffe08a, #ffcf5a);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px; margin: 0 0 12px;
  color: #3a2612; font-weight: 700; font-size: 14px; line-height: 1.32;
  text-align: left;
  box-shadow: 0 3px 0 var(--accent-hover), 0 6px 14px -8px var(--shadow);
}
.challenge-banner.show { display: flex; }
.challenge-banner .ch-emoji { font-size: 22px; flex: 0 0 auto; }
.challenge-banner b { color: #8a3410; white-space: nowrap; }  /* fix sötét, jó kontraszt a sárgán (nem theme-függő) */

.challenge-result {
  display: none;   /* alapból rejtve; a .win/.lose teszi láthatóvá (game over) */
  font-weight: 700; font-size: 14px; line-height: 1.3;
  padding: 8px 12px; border-radius: 10px; margin: 0 0 10px;
}
.challenge-result.win  { display: block; background: #d7f5df; color: #1f7a3d; border: 2px solid #52c47a; }
.challenge-result.lose { display: block; background: #ffe6d6; color: #b3541e; border: 2px solid var(--accent); }
html[data-theme="dark"] .challenge-result.win  { background: rgba(40,90,55,.45); color: #8fe6a8; border-color: #3f8a5a; }
html[data-theme="dark"] .challenge-result.lose { background: rgba(90,55,35,.45); color: #f2ad75; }

/* ===== Megosztás-gomb (game over) ===== */
.share-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--accent);
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--accent-hover), 0 8px 18px -6px var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 2px auto 0;
}
.share-btn:hover { filter: brightness(1.05); }
.share-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-hover), 0 4px 12px -6px var(--shadow); }
.share-msg {
  font-size: 12.5px;
  line-height: 1.35;
  margin: 8px 2px 0;
  min-height: 1em;
  font-weight: 700;
  color: #2e9b57;
}
html[data-theme="dark"] .share-msg { color: #6fe0a0; }