/* ───────────────────────────────────────────────
   Swords-of-Ditto style storybook adventure login
   Bright painted sky · rolling hills · parchment quest board
   ─────────────────────────────────────────────── */

/* Repaint the world: sunny storybook sky */
body {
  background: linear-gradient(180deg,
    #2bb7e6 0%,
    #5fcdef 30%,
    #a7e6f6 58%,
    #ffe9bd 82%,
    #ffd79a 100%) !important;
}
/* Silence the dark sci-fi glows from base.html */
body::before, body::after { background: none !important; }

main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 16px;
}

/* ── Scenery (sun, clouds, hills, sparkles) ── */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sun {
  position: absolute;
  top: -90px; right: -70px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fff6d0 0%, #ffe27a 38%, #ffc23d 70%, rgba(255,194,61,0) 72%);
  filter: drop-shadow(0 0 40px rgba(255,210,90,0.6));
}
.sun::before {
  content: '';
  position: absolute;
  inset: -120px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,228,140,0.55) 0deg 7deg,
    transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 78%, transparent 79%);
          mask: radial-gradient(circle, transparent 56%, #000 57%, #000 78%, transparent 79%);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Soft puffy storybook clouds (SVG) */
.cloud {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 10px 7px rgba(60,120,160,0.18));
  will-change: left;
}
.cloud.c1 { width: 200px; top: 14%; left: -220px; animation: drift 46s linear infinite; }
.cloud.c2 { width: 140px; top: 31%; left: -260px; opacity: 0.85; animation: drift 64s linear infinite 6s; }
.cloud.c3 { width: 170px; top: 7%;  left: -240px; opacity: 0.7;  animation: drift 82s linear infinite 18s; }
@keyframes drift { to { left: 115%; } }

/* Layered rolling hills */
.hills {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Twinkling sparkles */
.sparkle {
  position: absolute;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255,236,150,0.9));
  animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.5) rotate(0deg);  opacity: 0.25; }
  50%      { transform: scale(1.1) rotate(20deg); opacity: 1; }
}
.sp1 { top: 18%; left: 22%; animation-delay: 0s;   }
.sp2 { top: 34%; left: 78%; animation-delay: 0.8s; }
.sp3 { top: 60%; left: 12%; animation-delay: 1.6s; }
.sp4 { top: 12%; left: 60%; animation-delay: 2.3s; }
.sp5 { top: 52%; left: 88%; animation-delay: 1.1s; }

/* ── Quest board (the parchment card) ── */
.card-wrapper {
  position: relative;
  width: min(420px, 94vw);
  z-index: 2;
}

.card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-radius: 26px;
  padding: 30px 30px 36px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.55) 0%, transparent 55%),
    linear-gradient(170deg, #fff7e2 0%, #fbecc4 55%, #f3dea6 100%);
  border: 5px solid #3a2415;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.35) inset,
    0 14px 0 0 #2a1a0f,
    0 26px 40px rgba(30,18,10,0.45);
  transform: rotate(-1deg);
  animation: bobIn 0.8s cubic-bezier(.2,1.1,.3,1) both, idleBob 6s ease-in-out 0.8s infinite;
}

@keyframes bobIn {
  from { opacity: 0; transform: rotate(-1deg) translateY(40px) scale(0.94); }
  to   { opacity: 1; transform: rotate(-1deg) translateY(0)    scale(1); }
}
@keyframes idleBob {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-7px); }
}

/* little stitched corner studs */
.card::before, .card::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3a2415;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4) inset;
}
.card::before { left: 14px; }
.card::after  { right: 14px; }

/* Wooden ribbon banner across the top */
.banner {
  position: relative;
  margin-top: -6px;
  padding: 9px 30px;
  background: linear-gradient(180deg, #ff9d3c 0%, #f57a18 100%);
  border: 4px solid #3a2415;
  border-radius: 12px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(120,50,0,0.6);
  box-shadow: 0 5px 0 #3a2415, 0 7px 10px rgba(0,0,0,0.25);
}
/* ribbon tails */
.banner::before, .banner::after {
  content: '';
  position: absolute;
  top: 4px; bottom: 4px;
  width: 16px;
  background: #c85a0e;
  border: 3px solid #3a2415;
  z-index: -1;
}
.banner::before { left: -16px;  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,40% 50%); border-radius: 6px 0 0 6px; }
.banner::after  { right: -16px; clip-path: polygon(0 0,100% 0,60% 50%,100% 100%,0 100%); border-radius: 0 6px 6px 0; }

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}
.logo-wrap img {
  width: 330px;
  filter: drop-shadow(0 3px 0 rgba(255,255,255,0.7)) drop-shadow(0 6px 6px rgba(20,40,80,0.35));
  animation: logoPulse 3.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.03) rotate(0.6deg); }
}

.tagline {
  margin-top: -6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #8a5a22;
  text-align: center;
}

.divider {
  width: 90%;
  height: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg,
    #cda85e 0 14px, transparent 14px 22px);
  opacity: 0.7;
}

.fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  color: #5e3c18;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card label svg { width: 15px; height: 15px; flex: none; }

.card input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 13px;
  border: 3px solid #3a2415;
  background: #fffdf6;
  color: #3a2415;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  outline: none;
  box-shadow: 0 3px 0 #c9a55e, inset 0 2px 5px rgba(120,80,30,0.12);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s, background 0.2s;
}
.card input::placeholder { color: #b79a6a; font-weight: 600; }
.card input:focus {
  border-color: #f57a18;
  background: #fffef9;
  box-shadow: 0 3px 0 #f0a23a, inset 0 2px 5px rgba(120,80,30,0.1), 0 0 0 4px rgba(255,180,70,0.3);
  transform: translateY(-1px);
}

/* The big adventure button */
.btn-login {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  border: 4px solid #3a2415;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #6cc442 0%, #4ea22b 55%, #3c861f 100%);
  box-shadow: 0 7px 0 #2c5e17, 0 9px 14px rgba(20,40,10,0.35), inset 0 2px 0 rgba(255,255,255,0.4);
  text-shadow: 0 2px 0 rgba(30,70,15,0.6);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-login svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 0 rgba(30,70,15,0.6)); }
.btn-login::before {
  content: '';
  position: absolute;
  top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-22deg);
  transition: left 0.55s;
}
.btn-login:hover::before { left: 130%; }
.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 #2c5e17, 0 12px 18px rgba(20,40,10,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
}
.btn-login:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #2c5e17, 0 3px 6px rgba(20,40,10,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
}

/* Warning scroll for failed login */
.alert {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 13px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #7a2410;
  background: linear-gradient(180deg, #ffd9b0 0%, #ffc089 100%);
  border: 3px solid #3a2415;
  box-shadow: 0 4px 0 #b85a2a;
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.alert svg { width: 22px; height: 22px; flex: none; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}