/* ─── CSS Variables ─── */
:root {
  --sky1: #2D6A58;
  --sky2: #4A8070;
  --ground1: #0E2E28;
  --ground2: #1A4A42;
  --cream: #f2f9f6;
  --warm: #e8f5ef;
  --text: #0c2820;
  --text-light: #2A6050;
  --shadow: rgba(10,42,30,0.18);
  --radius: 20px;
  --radius-sm: 12px;

  /* Player building colors */
  --col-0: #FF6B6B; --col-1: #4ECDC4; --col-2: #45B7D1;
  --col-3: #96CEB4; --col-4: #F7DC6F; --col-5: #DDA0DD;
  --col-6: #F0A500; --col-7: #85C1E9; --col-8: #E8A87C;
  --col-9: #A8D8EA;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { width: 100%; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
body {
  font-family: 'Nunito', sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #1A4A42 0%, #2D6A58 40%, #1A4A42 70%, #091E1A 100%);
  min-height: 100vh;
  position: relative;
}

/* ─── Khan Bank teal sky background ─── */
#sky-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Warm golden accent — mirrors the logo's top-right glow */
    radial-gradient(ellipse at 84% 7%,  rgba(200,128,64,0.50) 0%, transparent 36%),
    radial-gradient(ellipse at 12% 18%, rgba(80,180,140,0.18) 0%, transparent 30%),
    /* Main teal gradient */
    linear-gradient(162deg,
      #224E46 0%,
      #2D6A58 22%,
      #1E5246 48%,
      #143C34 74%,
      #091E1A 100%
    );
}

/* Floating sparkles — "sparkling clean data" */
.leaf {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  opacity: 0;
  animation: leaf-fall linear infinite;
  will-change: transform, opacity;
}
.l1 { left: 8%;  top: -30px; animation-duration: 10s; animation-delay: 0s;   font-size: 18px; opacity: 0; }
.l2 { left: 23%; top: -30px; animation-duration: 14s; animation-delay: 2.5s; font-size: 13px; opacity: 0; }
.l3 { left: 40%; top: -30px; animation-duration: 11s; animation-delay: 5.5s; font-size: 22px; opacity: 0; }
.l4 { left: 60%; top: -30px; animation-duration: 12s; animation-delay: 1.2s; font-size: 16px; opacity: 0; }
.l5 { left: 74%; top: -30px; animation-duration: 9s;  animation-delay: 4s;   font-size: 20px; opacity: 0; }
.l6 { left: 89%; top: -30px; animation-duration: 15s; animation-delay: 7.5s; font-size: 12px; opacity: 0; }

@keyframes leaf-fall {
  0%   { transform: translateY(0)    rotate(0deg)   translateX(0px);   opacity: 0; }
  5%   { opacity: 0.85; }
  45%  { transform: translateY(45vh) rotate(180deg) translateX(40px); }
  75%  { transform: translateY(75vh) rotate(300deg) translateX(-25px); }
  95%  { opacity: 0.85; }
  100% { transform: translateY(105vh) rotate(400deg) translateX(20px);  opacity: 0; }
}

@keyframes drift {
  0%,100% { transform: translateX(0) translateY(0); }
  33% { transform: translateX(15px) translateY(-5px); }
  66% { transform: translateX(-8px) translateY(5px); }
}

/* ─── App container ─── */
#app {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow-x: hidden;
}

/* ─── Scrollable panes ─── */
.screen {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

/* ─── Cards / panels ─── */
.card {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px var(--shadow), 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px;
}
.card-sm { border-radius: var(--radius-sm); padding: 16px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 24px;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 4px 12px var(--shadow);
  letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.96); }
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

.btn-primary { background: #4CAF50; color: white; }
.btn-secondary { background: var(--cream); color: var(--text); border: 2px solid #d0e8d0; }
.btn-danger { background: #FF6B6B; color: white; }
.btn-gold { background: linear-gradient(135deg, #f6d365, #fda085); color: white; }
.pulse-btn { animation: pulse-glow 0.8s ease infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(253,160,133,0.6)} 50%{box-shadow:0 0 0 10px rgba(253,160,133,0)} }
.btn-blue { background: #45B7D1; color: white; }
.btn-lg { font-size: 1.2rem; padding: 16px 36px; border-radius: var(--radius); }

/* ─── Badge / chip ─── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
}
.badge-green { background: #e8f5e9; color: #2e7d32; }
.badge-red   { background: #ffebee; color: #c62828; }
.badge-blue  { background: #e3f2fd; color: #1565c0; }
.badge-gold  { background: #fff8e1; color: #e65100; }

/* ─── Loading screen ─── */
.loading-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  gap: 20px;
}
.loading-screen img { width: 80px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.loading-screen h1 { font-size: 1.8rem; font-weight: 900; color: var(--text); }
.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(76,175,80,0.2);
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast notifications ─── */
.toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: #333; color: white;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
  animation: toastIn 0.3s ease, toastOut 0.3s 2.5s ease forwards;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.toast.success { background: #4CAF50; }
.toast.error   { background: #FF6B6B; }
@keyframes toastIn  { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to   { opacity:0; transform: translateY(12px); } }

/* ─── Utility ─── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.text-center { text-align: center; }
.font-black { font-weight: 900; }
.text-sm { font-size: 0.85rem; }
.text-lg { font-size: 1.2rem; }
.text-xl { font-size: 1.6rem; }
.text-2xl { font-size: 2rem; }
.w-full { width: 100%; }
.mt-auto { margin-top: auto; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }