/* =========================================================
   AUTH SCREEN
   Login / Sign-up screen only — no game UI styles here
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');

#authScreen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fdf3c8 0%, #fce4a0 40%, #f9c97c 100%);
  z-index: 8000;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  padding: 16px;
}

/* Animated background decorations */
.authBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.authCloud {
  position: absolute;
  background: rgba(255,255,255,0.55);
  border-radius: 50px;
  filter: blur(2px);
}
.authCloud::before, .authCloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.authCloud1 {
  width: 120px; height: 40px;
  top: 8%; left: -10%;
  animation: cloudDrift 18s linear infinite;
}
.authCloud1::before { width:55px; height:55px; top:-25px; left:15px; }
.authCloud1::after  { width:40px; height:40px; top:-18px; left:50px; }

.authCloud2 {
  width: 90px; height: 30px;
  top: 20%; left: -8%;
  animation: cloudDrift 24s linear infinite 4s;
  opacity: 0.7;
}
.authCloud2::before { width:40px; height:40px; top:-18px; left:12px; }
.authCloud2::after  { width:30px; height:30px; top:-12px; left:38px; }

.authCloud3 {
  width: 100px; height: 35px;
  top: 35%; left: -10%;
  animation: cloudDrift 20s linear infinite 9s;
  opacity: 0.5;
}
.authCloud3::before { width:45px; height:45px; top:-22px; left:14px; }
.authCloud3::after  { width:35px; height:35px; top:-15px; left:44px; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(120vw); }
}

.authFlower {
  position: absolute;
  font-size: 28px;
  animation: floatBob 3s ease-in-out infinite;
  opacity: 0.7;
}
.authFlower1 { bottom: 12%; left: 6%;  animation-delay: 0s; }
.authFlower2 { bottom: 8%;  right: 8%; animation-delay: 1.2s; font-size: 32px; }
.authFlower3 { bottom: 18%; right: 16%; animation-delay: 0.6s; font-size: 22px; }

@keyframes floatBob {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}

/* Card */
.authCard {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 28px;
  padding: 28px 24px 20px;
  box-shadow:
    0 8px 0 #e8b84b,
    0 16px 40px rgba(0,0,0,0.15);
  animation: cardPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes cardPop {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Logo area */
.authLogoArea {
  text-align: center;
  margin-bottom: 18px;
}
.authTitleImg {
  max-width: 200px;
  width: 100%;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}
.authTagline {
  margin: 6px 0 0;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #b07d2a;
  letter-spacing: 0.3px;
}

/* Tabs */
.authTabs {
  display: flex;
  background: #f5ead5;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 18px;
  gap: 4px;
}
.authTab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #a07840;
  transition: all 0.2s;
}
.authTab.active {
  background: #fff;
  color: #3d2a0a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Form */
.authForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.authInputGroup {
  display: flex;
  align-items: center;
  background: #fdf6e8;
  border: 2px solid #f0d89a;
  border-radius: 14px;
  padding: 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.authInputGroup:focus-within {
  border-color: #f4a427;
  box-shadow: 0 0 0 3px rgba(244,164,39,0.18);
}
.authInputIcon {
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
}
.authInputGroup input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #3d2a0a;
  outline: none;
}
.authInputGroup input::placeholder {
  color: #c4a45a;
  font-weight: 600;
}

/* Submit buttons */
.authSubmitBtn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  font-family: 'Fredoka One', cursive;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: linear-gradient(135deg, #f4a427 0%, #e8851a 100%);
  color: #fff;
  box-shadow: 0 4px 0 #c06a10, 0 6px 16px rgba(232,133,26,0.35);
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  top: 0;
}
.authSubmitBtn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c06a10, 0 2px 8px rgba(232,133,26,0.2);
  top: 3px;
}
.authSubmitSecondary {
  background: linear-gradient(135deg, #5bbf6e 0%, #3da855 100%);
  box-shadow: 0 4px 0 #2a8040, 0 6px 16px rgba(61,168,85,0.35);
}
.authSubmitSecondary:active {
  box-shadow: 0 1px 0 #2a8040;
}

/* Divider */
.authDivider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c4a45a;
  font-size: 12px;
  font-weight: 700;
}
.authDivider::before, .authDivider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f0d89a;
}

/* Guest button */
.authGuestBtn {
  width: 100%;
  padding: 11px;
  border: 2px solid #e8d08a;
  border-radius: 14px;
  background: #fffbf0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #a07840;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.authGuestBtn:hover {
  background: #fff8e0;
  border-color: #f4a427;
  color: #7a5820;
}

/* Status */
.authStatus {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #e85a1a;
  min-height: 18px;
  font-family: 'Nunito', sans-serif;
}

/* Footer */
.authFooter {
  position: relative;
  margin-top: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #b07d2a;
  text-align: center;
  opacity: 0.8;
}

/* =========================================================
   LOADING SCREEN
========================================================= */
#loadingScreen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fdf3c8 0%, #fce4a0 40%, #f9c97c 100%);
  z-index: 9000;
  font-family: 'Nunito', sans-serif;
  transition: opacity 0.5s ease;
}
#loadingScreen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loadingContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 24px;
  animation: cardPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}

.loadingLogo {
  animation: floatBob 2s ease-in-out infinite;
}
.loadingTitle {
  max-width: 220px;
  width: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

.loadingBarOuter {
  width: 220px;
  height: 14px;
  background: rgba(255,255,255,0.6);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 0 #e8b84b;
}
.loadingBarInner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f4a427, #e8851a);
  border-radius: 99px;
  transition: width 0.3s ease;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}

.loadingTip {
  font-size: 13px;
  font-weight: 700;
  color: #a07840;
  min-height: 20px;
}

.loadingPaws {
  font-size: 28px;
  animation: pawBounce 0.8s ease-in-out infinite alternate;
}

@keyframes pawBounce {
  from { transform: scale(0.9) rotate(-10deg); }
  to   { transform: scale(1.15) rotate(10deg); }
}