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

body {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  color: white;
}

/* ─── AUTH PAGE SCENE ─── */

@keyframes auth-cloud-drift {
  0%   { transform: translateX(-200px); }
  100% { transform: translateX(calc(100vw + 250px)); }
}
@keyframes auth-sun-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes auth-sun-pulse {
  0%,100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #4ECDC4 0%,
    #44A5E8 20%,
    #87CEEB 50%,
    #98E060 72%,
    #5aaa28 100%
  );
}

.auth-scene {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Sun */
.auth-sun {
  position: absolute;
  top: 30px; right: 80px;
  width: 80px; height: 80px;
  animation: auth-sun-pulse 3s ease-in-out infinite;
}
.auth-sun-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF9A0 0%, #FFE44A 50%, #FFB800 100%);
  box-shadow: 0 0 35px 12px rgba(255,220,0,0.6), 0 0 70px 24px rgba(255,180,0,0.3);
  z-index: 2;
}
.auth-sun-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: conic-gradient(
    rgba(255,230,0,0.5) 0deg, transparent 15deg,
    rgba(255,230,0,0.5) 30deg, transparent 45deg,
    rgba(255,230,0,0.5) 60deg, transparent 75deg,
    rgba(255,230,0,0.5) 90deg, transparent 105deg,
    rgba(255,230,0,0.5) 120deg, transparent 135deg,
    rgba(255,230,0,0.5) 150deg, transparent 165deg,
    rgba(255,230,0,0.5) 180deg, transparent 195deg,
    rgba(255,230,0,0.5) 210deg, transparent 225deg,
    rgba(255,230,0,0.5) 240deg, transparent 255deg,
    rgba(255,230,0,0.5) 270deg, transparent 285deg,
    rgba(255,230,0,0.5) 300deg, transparent 315deg,
    rgba(255,230,0,0.5) 330deg, transparent 345deg
  );
  border-radius: 50%;
  animation: auth-sun-rotate 8s linear infinite;
  z-index: 1;
  scale: 1.6;
}

/* Clouds */
.auth-cloud {
  position: absolute;
  background: white;
  border-radius: 50px;
  opacity: 0.9;
  filter: blur(1px);
}
.auth-cloud::before,
.auth-cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}
.auth-cloud-1 {
  width: 140px; height: 46px;
  top: 55px;
  animation: auth-cloud-drift 30s linear infinite;
}
.auth-cloud-1::before { width: 68px; height: 68px; top: -32px; left: 20px; }
.auth-cloud-1::after  { width: 52px; height: 52px; top: -22px; left: 60px; }

.auth-cloud-2 {
  width: 110px; height: 38px;
  top: 100px;
  animation: auth-cloud-drift 42s linear infinite 12s;
}
.auth-cloud-2::before { width: 54px; height: 54px; top: -26px; left: 14px; }
.auth-cloud-2::after  { width: 40px; height: 40px; top: -18px; left: 48px; }

.auth-cloud-3 {
  width: 170px; height: 54px;
  top: 32px;
  animation: auth-cloud-drift 55s linear infinite 22s;
}
.auth-cloud-3::before { width: 76px; height: 76px; top: -36px; left: 28px; }
.auth-cloud-3::after  { width: 60px; height: 60px; top: -26px; left: 78px; }

/* Grass */
.auth-grass {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(180deg, #5aaa28 0%, #3d7a18 50%, #2d5c10 100%);
}
.auth-grass::before {
  content: '';
  position: absolute;
  top: -20px; left: 0; right: 0;
  height: 30px;
  background: radial-gradient(ellipse 9px 20px at 50% 100%, #5aaa28 45%, transparent 100%);
  background-size: 18px 20px;
  background-repeat: repeat-x;
}

.auth-flowers-left,
.auth-flowers-right {
  position: absolute;
  bottom: 78px;
  font-size: 24px;
  letter-spacing: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.auth-flowers-left  { left: 20px; }
.auth-flowers-right { right: 20px; }

.auth-tree-left,
.auth-tree-right {
  position: absolute;
  bottom: 72px;
  font-size: 64px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
}
.auth-tree-left  { left: 60px; }
.auth-tree-right { right: 60px; }

/* ─── AUTH CARD (glassmorphism) ─── */
.auth-container {
  position: relative;
  z-index: 1;
  background: rgba(20, 10, 0, 0.62);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255,215,0,0.3);
  border-radius: 28px;
  padding: 44px 40px;
  width: 420px;
  max-width: 95vw;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,215,0,0.08),
    0 0 50px rgba(255,215,0,0.08),
    inset 0 1px 0 rgba(255,215,0,0.15);
}

.auth-logo { text-align: center; margin-bottom: 28px; }
.logo-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.9));
}
.auth-logo h1 {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #FFF5A0 0%, #FFE566 20%, #FFD700 50%, #d4900a 75%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.7));
}
.auth-logo-sub {
  font-size: 11px;
  color: rgba(255,200,100,0.55);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  padding: 5px;
  border: 1px solid rgba(255,215,0,0.1);
}
.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s;
  letter-spacing: 0.5px;
}
.tab-btn.active {
  background: linear-gradient(135deg, #e6a800, #FFD700);
  color: #1a0a00;
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(255,165,0,0.4);
}

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-group input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: white;
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
  outline: none;
}
.form-group input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.15);
  background: rgba(255,255,255,0.1);
}
.form-group input::placeholder { color: rgba(255,255,255,0.25); }

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #d4900a, #FFD700, #e6a800);
  border: none;
  border-radius: 14px;
  color: #1a0800;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(200,120,0,0.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200,120,0,0.65);
}
.btn-primary:active { transform: translateY(0); }

.form-error {
  color: #FF6666;
  font-size: 12px;
  margin-bottom: 10px;
  min-height: 16px;
  font-weight: 600;
}
.bonus-info {
  text-align: center;
  color: #66CC66;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
}

.hidden { display: none !important; }