/* ========================================================================
   DreamsChat – belépő (mesés / storybook dizájn)
   ===================================================================== */
:root {
  --magic:        #8b5cf6;   /* elvarázsolt ibolya */
  --magic-2:      #c084fc;   /* világos levendula  */
  --magic-deep:   #6d28d9;
  --magic-soft:   #f3eaff;
  --gold:         #fbbf24;   /* tündérarany        */
  --gold-2:       #fcd34d;
  --rose:         #f472b6;   /* rózsaszín csillám  */
  --surface:      #fffaf3;   /* meleg pergamen     */
  --ink:          #3b2e54;
  --ink-soft:     #7a6e93;
  --ink-faint:    #a99fc0;
  --border:       #efe4d6;
  --danger:       #e0567a;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
  /* Éjszakai mesebeli égbolt: alkonyi ibolyától a mély éjkékig */
  background:
    radial-gradient(120% 90% at 50% -10%, #fcd9a8 0%, transparent 38%),
    radial-gradient(140% 120% at 80% 10%, #c084fc 0%, transparent 45%),
    linear-gradient(180deg, #3a2a6e 0%, #2b1d52 45%, #1a1140 100%);
}

/* Csillagpor – apró fénypontok az égen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 64%, #fff, transparent),
    radial-gradient(2px 2px   at 47% 18%, #fff7e0, transparent),
    radial-gradient(1px 1px   at 63% 48%, #fff, transparent),
    radial-gradient(2px 2px   at 78% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 70%, #ffe9b5, transparent),
    radial-gradient(1px 1px   at 38% 84%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 82%, #fff, transparent);
  opacity: .85;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .85; }
  50%      { opacity: .45; }
}

/* Lágyan lebegő hold-fény a háttérben */
body::after {
  content: "";
  position: fixed;
  top: -80px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7e6, #fcd9a8 55%, transparent 72%);
  filter: blur(2px);
  opacity: .55;
  pointer-events: none;
}

.card {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--surface) 0%, #fff5ea 100%);
  border: 1px solid rgba(251,191,36,.45);
  border-radius: 32px;
  padding: 40px 32px 38px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 30px 80px rgba(26,17,64,.55),
    0 0 60px rgba(192,132,252,.35);
  animation: card-in .5s var(--ease);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Mesekönyv-logó: ragyogó varázsgömb csillámmal */
.card::before {
  content: "✨";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 1.9rem;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--magic) 70%, var(--magic-deep));
  box-shadow:
    0 10px 30px rgba(139,92,246,.5),
    0 0 26px rgba(251,191,36,.5);
  animation: float 3.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-7px) rotate(3deg);  }
}

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: 6px;
  background: linear-gradient(120deg, var(--magic-deep), var(--rose) 50%, var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
p  { color: var(--ink-faint); margin-bottom: 30px; font-size: 0.95rem; font-style: italic; }

.lang-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}
.lang-row button {
  width: auto;
  padding: 6px 11px;
  font-size: 1.3rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.lang-row button:hover   { opacity: .85; background: var(--magic-soft); }
.lang-row button.current { opacity: 1; background: var(--magic-soft); border-color: rgba(139,92,246,.35); }

.buttons { display: flex; flex-direction: column; gap: 12px; }

.buttons button {
  width: 100%;
  padding: 16px;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--magic) 0%, var(--rose) 60%, var(--gold) 130%);
  color: white;
  box-shadow: 0 10px 26px rgba(139,92,246,.4), 0 0 16px rgba(244,114,182,.3);
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.buttons button:hover  { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(139,92,246,.5), 0 0 24px rgba(251,191,36,.4); }
.buttons button:active { transform: none; box-shadow: 0 4px 12px rgba(139,92,246,.4); }

#password {
  width: 100%;
  padding: 15px 16px;
  font-size: 1.02rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  outline: none;
  text-align: center;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#password:focus {
  border-color: var(--magic-2);
  box-shadow: 0 0 0 4px rgba(192,132,252,.22);
}

.error {
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}

.buttons button.ghost {
  background: none;
  color: var(--ink-soft);
  box-shadow: none;
  font-weight: 600;
  padding: 10px;
}
.buttons button.ghost:hover { transform: none; filter: none; background: var(--magic-soft); box-shadow: none; }

/* ── Mesés égbolt-jelenet ── */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.scene .moon {
  position: absolute;
  top: 6%;
  right: 9%;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 0 28px rgba(252,217,168,.7));
  animation: moon-float 9s ease-in-out infinite;
}
@keyframes moon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.scene .star {
  position: absolute;
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 6px rgba(255,247,224,.9));
  animation: star-twinkle 3s ease-in-out infinite;
}
.scene .star.s1 { top: 18%; left: 14%; width: 22px; height: 22px; animation-delay: 0s; }
.scene .star.s2 { top: 30%; left: 78%; width: 14px; height: 14px; animation-delay: .8s; }
.scene .star.s3 { top: 60%; left: 22%; width: 16px; height: 16px; animation-delay: 1.6s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1)   rotate(0deg); }
  50%      { opacity: .35; transform: scale(.7)  rotate(20deg); }
}

.scene .cloud { position: absolute; opacity: .9; }
.scene .cloud g { fill: rgba(255,255,255,.92); }
.scene .cloud.c1 { top: 12%; width: 190px; left: -200px; animation: drift 38s linear infinite; }
.scene .cloud.c2 { top: 46%; width: 130px; left: -150px; opacity: .7; animation: drift 52s linear infinite 6s; }
.scene .cloud.c3 { top: 74%; width: 240px; left: -260px; opacity: .55; animation: drift 64s linear infinite 14s; }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 320px)); }
}

@media (prefers-reduced-motion: reduce) {
  .scene .moon, .scene .star, .scene .cloud, .card::before { animation: none; }
}