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

body {
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  background: #1a6b2a
}

/* ---- LOGIN ---- */
.login-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000
}

.login-screen.active {
  display: flex
}

.login-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 90, 180, .55) 0%, rgba(20, 120, 60, .7) 60%, rgba(10, 70, 30, .85) 100%),
    url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1600&q=80') center/cover no-repeat;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  opacity: .9
}

.c1 {
  width: 180px;
  height: 50px;
  top: 12%;
  left: 5%;
  animation: drift 8s infinite linear
}

.c2 {
  width: 120px;
  height: 35px;
  top: 20%;
  left: 55%;
  animation: drift 12s infinite linear
}

.c3 {
  width: 150px;
  height: 40px;
  top: 8%;
  right: 10%;
  animation: drift 10s 3s infinite linear
}

@keyframes drift {
  0% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(30px)
  }

  100% {
    transform: translateX(0)
  }
}

.login-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #fff9 80%, #e0f7fa88);
  backdrop-filter: blur(12px);
  border: 3px solid #fff;
  border-radius: 24px;
  padding: 36px 40px;
  width: 380px;
  box-shadow: 0 20px 60px #0004;
  text-align: center
}

.login-logo .logo-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #f7b731, #f0932b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 6px 20px #f7b73155;
  font-size: 30px;
  color: #fff
}

.login-logo h1 {
  font-family: 'Fredoka One', sans-serif;
  font-size: 2rem;
  color: #1a6b2a;
  letter-spacing: 2px
}

.login-logo p {
  font-size: .8rem;
  color: #555;
  margin-bottom: 20px
}

.form-group {
  text-align: left;
  margin-bottom: 14px
}

.form-group label {
  font-size: .82rem;
  font-weight: 700;
  color: #444;
  display: block;
  margin-bottom: 5px
}

.form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #ddd;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  outline: none;
  transition: .3s
}

.form-group input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px #4caf5033
}

.btn-login {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #43a047, #1b5e20);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: .3s;
  margin-top: 6px;
  box-shadow: 0 6px 20px #43a04755
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px #43a04788
}

.login-hint {
  font-size: .78rem;
  color: #888;
  margin-top: 12px
}

/* ---- APP SHELL ---- */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden
}

.app-header {
  height: 58px;
  background: linear-gradient(90deg, #1b5e20, #2e7d32, #388e3c);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 3px 12px #0003;
  z-index: 100;
  flex-shrink: 0
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: 12px
}

.menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px
}

.hdr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff
}

.logo-star {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f7b731, #f0932b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px
}

.hdr-logo b {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.1rem;
  display: block;
  line-height: 1.1
}

.hdr-logo small {
  font-size: .65rem;
  opacity: .85;
  display: block
}

.hdr-stats {
  display: flex;
  align-items: center;
  gap: 8px
}

.stat {
  background: #ffffff22;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 5px
}

.stat.coins {
  background: linear-gradient(135deg, #f7b731aa, #f0932baa)
}

.stat.level {
  background: linear-gradient(135deg, #42a5f5aa, #1565c0aa)
}

.stat.xp {
  background: linear-gradient(135deg, #ab47bcaa, #6a1b9aaa)
}

.xp-wrap {
  width: 90px
}

.xp-bar {
  height: 10px;
  background: #ffffff33;
  border-radius: 10px;
  overflow: hidden
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #a5d6a7, #fff);
  border-radius: 10px;
  transition: width .6s
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.notif-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative
}

.notif-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: #f44336;
  border-radius: 50%;
  border: 2px solid #2e7d32
}

.hdr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  object-fit: cover
}

.lang-btn {
  background: #ffffff22;
  border: 2px solid #ffffff33;
  color: #fff;
  padding: 6px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 800
}

.lang-btn span {
  font-size: .9rem
}

.install-btn {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .3s;
  box-shadow: 0 2px 8px #4caf5055;
}

.install-btn:hover {
  background: linear-gradient(135deg, #66bb6a, #1b5e20);
  box-shadow: 0 4px 12px #4caf5077;
  transform: scale(1.05);
}

.install-btn:active {
  transform: scale(0.98);
}

.install-btn span {
  font-size: .85rem;
}

/* ---- BODY ---- */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden
}

.sidebar {
  width: 200px;
  background: linear-gradient(180deg, #1b5e20, #2e7d32);
  display: flex;
  flex-direction: column;
  transition: width .3s;
  overflow: hidden;
  flex-shrink: 0
}

.sidebar.collapsed {
  width: 60px
}

.nav-links {
  flex: 1;
  padding: 12px 0
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  color: #c8e6c9;
  text-decoration: none;
  cursor: pointer;
  transition: .2s;
  border-radius: 0 30px 30px 0;
  margin: 2px 8px 2px 0;
  font-size: .9rem;
  font-weight: 700;
  position: relative;
  white-space: nowrap
}

.nav-item i {
  font-size: 1.1rem;
  min-width: 22px;
  text-align: center
}

.nav-item:hover {
  background: #ffffff22;
  color: #fff
}

.nav-item.active {
  background: linear-gradient(90deg, #f7b731, #f0932b);
  color: #fff;
  box-shadow: 0 4px 14px #f7b73155
}

.badge {
  background: #f44336;
  color: #fff;
  font-size: .65rem;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: auto;
  font-style: normal
}

.btn-logout {
  margin: 12px;
  padding: 10px;
  background: #ffffff22;
  border: 2px solid #81c784;
  color: #c8e6c9;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  transition: .2s
}

.btn-logout:hover {
  background: #f4433622;
  border-color: #ef9a9a;
  color: #ffcdd2
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .badge,
.sidebar.collapsed .btn-logout {
  display: none
}

/* ---- MAIN CONTENT ---- */
.main-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background:
    linear-gradient(180deg, rgba(232, 245, 233, .92) 0%, rgba(241, 248, 233, .95) 100%),
    url('https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=1400&q=75') center/cover fixed;
}

.main-content::-webkit-scrollbar {
  width: 6px
}

.main-content::-webkit-scrollbar-track {
  background: #c8e6c9
}

.main-content::-webkit-scrollbar-thumb {
  background: #4caf50;
  border-radius: 6px
}

/* ---- PAGE WRAPPER ---- */
.page {
  padding: 20px;
  animation: fadeIn .3s
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ---- WELCOME BANNER ---- */
.welcome-banner {
  background: linear-gradient(135deg, #1565c0, #0d47a1, #283593);
  border-radius: 20px;
  padding: 24px 28px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px #1565c044
}

.welcome-banner::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  background: #ffffff11;
  border-radius: 50%
}

.welcome-banner h2 {
  font-size: 1.3rem;
  margin-bottom: 4px
}

.welcome-banner p {
  font-size: .85rem;
  opacity: .85
}

.banner-streak {
  background: #ffffff22;
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
  flex-shrink: 0
}

.banner-streak .streak-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffd54f
}

.banner-streak small {
  font-size: .7rem;
  opacity: .9;
  display: block
}

/* ---- SECTION TITLE ---- */
.section-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1b5e20;
  margin: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px
}

.section-title i {
  color: #f0932b
}

/* ---- CARDS ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px
}

.card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 20px #0001;
  transition: .3s;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px #0002;
  border-color: #4caf50
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 12px
}

.card-icon.blue {
  background: linear-gradient(135deg, #42a5f5, #1565c0)
}

.card-icon.green {
  background: linear-gradient(135deg, #66bb6a, #1b5e20)
}

.card-icon.orange {
  background: linear-gradient(135deg, #ffa726, #e65100)
}

.card-icon.purple {
  background: linear-gradient(135deg, #ab47bc, #6a1b9a)
}

.card-icon.red {
  background: linear-gradient(135deg, #ef5350, #b71c1c)
}

.card-icon.teal {
  background: linear-gradient(135deg, #26c6da, #006064)
}

.card h3 {
  font-size: .95rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 4px
}

.card p {
  font-size: .78rem;
  color: #666;
  line-height: 1.4
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ffd54f, #f57f17);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 10px
}

.card-progress {
  margin-top: 10px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden
}

.card-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .6s
}

.card-progress-fill.blue {
  background: linear-gradient(90deg, #42a5f5, #1565c0)
}

.card-progress-fill.green {
  background: linear-gradient(90deg, #66bb6a, #1b5e20)
}

.card-progress-fill.orange {
  background: linear-gradient(90deg, #ffa726, #e65100)
}

.card-progress-fill.purple {
  background: linear-gradient(90deg, #ab47bc, #6a1b9a)
}

/* ---- LEADERBOARD ---- */
.leaderboard-list {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px #0001
}

.lb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: .2s
}

.lb-item:hover {
  background: #f1f8e9
}

.lb-item.me {
  background: linear-gradient(90deg, #e8f5e9, #f1f8e9);
  border-left: 4px solid #4caf50
}

.lb-rank {
  font-size: 1rem;
  font-weight: 900;
  min-width: 28px;
  text-align: center
}

.lb-rank.gold {
  color: #f7b731
}

.lb-rank.silver {
  color: #9e9e9e
}

.lb-rank.bronze {
  color: #a1622c
}

.lb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #e0e0e0
}

.lb-info {
  flex: 1
}

.lb-info b {
  font-size: .9rem;
  display: block
}

.lb-info small {
  font-size: .75rem;
  color: #888
}

.lb-coins {
  font-weight: 800;
  color: #f0932b;
  font-size: .9rem
}

/* ---- MISSION ITEMS ---- */
.mission-item {
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 16px #0001;
  margin-bottom: 10px;
  cursor: pointer;
  transition: .3s;
  border: 2px solid transparent
}

.mission-item:hover {
  border-color: #4caf50;
  transform: translateX(4px)
}

.mission-item.done {
  opacity: .6
}

.mission-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0
}

.mission-info {
  flex: 1
}

.mission-info h4 {
  font-size: .9rem;
  font-weight: 800;
  margin-bottom: 3px
}

.mission-info p {
  font-size: .75rem;
  color: #666
}

.mission-reward {
  font-weight: 800;
  color: #f0932b;
  font-size: .85rem;
  white-space: nowrap
}

/* ---- GAME SCREENS ---- */
.game-header {
  text-align: center;
  margin-bottom: 20px
}

.game-header h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #1b5e20
}

.game-header p {
  font-size: .85rem;
  color: #666;
  margin-top: 4px
}

.game-prompt {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.6
}

.game-prompt img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px
}

.answer-input {
  width: 100%;
  padding: 14px;
  border: 3px solid #e0e0e0;
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: .3s;
  resize: none
}

.answer-input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 4px #4caf5022
}

.btn-group {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: .3s;
  font-size: .95rem
}

.btn-primary {
  background: linear-gradient(135deg, #43a047, #1b5e20);
  color: #fff;
  box-shadow: 0 4px 14px #43a04744
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #43a04766
}

.btn-secondary {
  background: #f0f0f0;
  color: #555
}

.btn-danger {
  background: linear-gradient(135deg, #ef5350, #b71c1c);
  color: #fff
}

.btn-orange {
  background: linear-gradient(135deg, #ffa726, #e65100);
  color: #fff;
  box-shadow: 0 4px 14px #ffa72644
}

.btn-blue {
  background: linear-gradient(135deg, #42a5f5, #1565c0);
  color: #fff;
  box-shadow: 0 4px 14px #42a5f544
}

/* ---- RECORDING BUTTON ---- */
.record-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef5350, #b71c1c);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: .3s;
  box-shadow: 0 6px 24px #ef535055;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto
}

.record-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 32px #ef535088
}

.record-btn.recording {
  animation: pulse-rec 1s infinite;
  background: linear-gradient(135deg, #b71c1c, #ef5350)
}

@keyframes pulse-rec {

  0%,
  100% {
    box-shadow: 0 0 0 0 #ef535088
  }

  50% {
    box-shadow: 0 0 0 16px #ef535000
  }
}

.recording-status {
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  color: #ef5350;
  font-size: .9rem
}

/* ---- AUDIO PLAYER ---- */
.audio-player {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  border-radius: 16px;
  padding: 20px;
  color: #fff;
  text-align: center;
  margin-bottom: 16px
}

.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #1565c0;
  font-size: 1.6rem;
  cursor: pointer;
  transition: .3s;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px #00000044
}

.play-btn:hover {
  transform: scale(1.08)
}

.audio-progress {
  height: 6px;
  background: #ffffff44;
  border-radius: 6px;
  margin: 12px 0 6px;
  overflow: hidden
}

.audio-prog-fill {
  height: 100%;
  background: #fff;
  border-radius: 6px;
  transition: width .3s
}

/* ---- CHOICES ---- */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px
}

.choice-btn {
  padding: 14px;
  border: 3px solid #e0e0e0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  transition: .3s;
  text-align: left
}

.choice-btn:hover {
  border-color: #4caf50;
  background: #f1f8e9
}

.choice-btn.correct {
  border-color: #4caf50;
  background: #e8f5e9;
  color: #1b5e20
}

.choice-btn.wrong {
  border-color: #ef5350;
  background: #ffebee;
  color: #b71c1c
}

/* ---- SCORE DISPLAY ---- */
.score-card {
  text-align: center;
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 16px
}

.score-number {
  font-size: 3rem;
  font-weight: 900;
  color: #ffd54f
}

.score-stars {
  font-size: 2rem;
  margin: 10px 0
}

.score-stars .star {
  color: #ffd54f;
  margin: 0 4px;
  animation: starPop .3s backwards
}

.score-stars .star:nth-child(2) {
  animation-delay: .15s
}

.score-stars .star:nth-child(3) {
  animation-delay: .3s
}

@keyframes starPop {
  from {
    transform: scale(0) rotate(-20deg)
  }

  to {
    transform: scale(1) rotate(0)
  }
}

/* ---- PROFILE ---- */
.profile-header {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  border-radius: 20px;
  padding: 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 16px
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block
}

.profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover
}

.profile-level-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: linear-gradient(135deg, #f7b731, #f0932b);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px
}

.profile-stat {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 4px 16px #0001
}

.profile-stat .val {
  font-size: 1.5rem;
  font-weight: 900;
  display: block
}

.profile-stat small {
  font-size: .75rem;
  color: #888
}

/* ---- BADGES ---- */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

.badge-item {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 4px 14px #0001
}

.badge-item .badge-icon {
  font-size: 1.8rem;
  margin-bottom: 6px
}

.badge-item small {
  font-size: .7rem;
  color: #666;
  display: block
}

.badge-item.locked {
  opacity: .4;
  filter: grayscale(1)
}

/* ---- MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000077;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center
}

.modal-overlay.open {
  display: flex
}

.game-modal {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  width: 90%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  animation: popIn .3s
}

@keyframes popIn {
  from {
    transform: scale(.8);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 1rem;
  transition: .2s
}

.modal-close:hover {
  background: #ef5350;
  color: #fff
}

/* ---- TOAST ---- */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.toast-msg {
  background: #1b5e20;
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .9rem;
  animation: slideUp .3s;
  box-shadow: 0 6px 20px #0004;
  display: flex;
  align-items: center;
  gap: 8px
}

.toast-msg.error {
  background: #b71c1c
}

.toast-msg.info {
  background: #0d47a1
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

/* ---- TABS ---- */
.tabs {
  display: flex;
  gap: 6px;
  background: #e8f5e9;
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 16px
}

.tab {
  flex: 1;
  padding: 9px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  transition: .2s;
  border: none;
  background: none;
  color: #555
}

.tab.active {
  background: linear-gradient(135deg, #43a047, #1b5e20);
  color: #fff;
  box-shadow: 0 4px 12px #43a04744
}

/* ---- LEVEL CARD ---- */
.level-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 6px
}

.level-card {
  min-width: 90px;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 16px #0001;
  cursor: pointer;
  transition: .3s;
  border: 2px solid transparent;
  flex-shrink: 0
}

.level-card:hover {
  border-color: #4caf50;
  transform: translateY(-3px)
}

.level-card.active {
  border-color: #f7b731;
  background: linear-gradient(135deg, #fffde7, #fff9c4)
}

.level-card.locked {
  opacity: .5;
  cursor: not-allowed
}

.level-card .lc-icon {
  font-size: 1.5rem;
  margin-bottom: 4px
}

.level-card small {
  font-size: .72rem;
  color: #666;
  display: block
}

.level-card b {
  font-size: .85rem;
  display: block
}

/* ---- PROGRESS RING ---- */
.prog-ring-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto
}

.prog-ring {
  transform: rotate(-90deg)
}

/* ---- THEMED MATERI CARDS ---- */
.mat-card {
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 8px 28px #0003;
  position: relative;
  min-height: 175px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 2px solid transparent;
}

.mat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 42px #0004
}

.mat-card:active {
  transform: scale(.97)
}

/* Decorative circles */
.mat-card::before,
.mat-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #ffffff11;
  pointer-events: none;
}

.mat-card::before {
  width: 140px;
  height: 140px;
  top: -40px;
  right: -30px
}

.mat-card::after {
  width: 80px;
  height: 80px;
  bottom: 30px;
  left: -20px
}

.mat-card-bg {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.mat-card-bg .bg-icon {
  font-size: 9rem;
  opacity: .15;
  position: absolute;
  right: -15px;
  bottom: -20px;
  transform: rotate(-20deg);
  filter: drop-shadow(0 4px 24px #fff6);
  transition: transform .4s, opacity .3s;
}

.mat-card:hover .bg-icon {
  opacity: .25;
  transform: rotate(-10deg) scale(1.08)
}

.mat-card-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 3;
}

.mat-card-emoji {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 6px #0004);
}

.mat-card-badge {
  background: #ffffff33;
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #ffffff55;
  white-space: nowrap;
}

.mat-card-body {
  position: relative;
  z-index: 2;
  padding: 14px 16px 16px;
  background: linear-gradient(to top, #000a 0%, #0004 60%, #0000 100%);
  color: #fff;
}

.mat-card-body h3 {
  font-size: 1rem;
  font-weight: 900;
  margin-bottom: 3px;
  text-shadow: 0 2px 6px #0007;
  letter-spacing: .3px;
}

.mat-card-body p {
  font-size: .75rem;
  opacity: .88;
  text-shadow: 0 1px 3px #0005;
  line-height: 1.4
}

.mat-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.mat-card-stars {
  display: flex;
  gap: 3px;
  align-items: center
}

.mat-card-prog {
  flex: 1;
  height: 5px;
  background: #ffffff33;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 10px
}

.mat-card-prog-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #fff6, #fff);
  transition: width .8s
}

.mat-card-pct {
  font-size: .68rem;
  color: #ffffffbb;
  font-weight: 800;
  white-space: nowrap
}

/* Themes */
.mat-speaking {
  background: linear-gradient(145deg, #7f0000, #c62828 40%, #ef5350);
}

.mat-listening {
  background: linear-gradient(145deg, #002171, #0d47a1 40%, #1976d2);
}

.mat-writing {
  background: linear-gradient(145deg, #003300, #1b5e20 40%, #43a047);
}

.mat-grammar {
  background: linear-gradient(145deg, #1a0033, #4a148c 40%, #8e24aa);
}

/* ---- MUSIC TOGGLE ---- */
.music-btn {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 400;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7b731, #f0932b);
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px #f7b73166;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center
}

.music-btn:hover {
  transform: scale(1.1)
}

@media(min-width:769px) {
  .music-btn {
    bottom: 24px
  }
}

/* ---- MOBILE BOTTOM NAV ---- */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: linear-gradient(90deg, #1b5e20, #2e7d32);
  z-index: 300;
  box-shadow: 0 -3px 16px #0003;
  border-top: 1px solid #ffffff22
}

.bottom-nav-inner {
  display: flex;
  height: 100%;
  align-items: stretch
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #a5d6a7;
  cursor: pointer;
  transition: .2s;
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
  padding: 0;
  position: relative
}

.bn-item i {
  font-size: 1.2rem;
  transition: .2s
}

.bn-item span {
  font-size: .6rem;
  font-weight: 700;
  transition: .2s
}

.bn-item.active {
  color: #ffd54f
}

.bn-item.active i {
  transform: translateY(-2px)
}

.bn-badge {
  position: absolute;
  top: 8px;
  right: 18px;
  background: #f44336;
  color: #fff;
  font-size: .55rem;
  border-radius: 8px;
  padding: 1px 5px;
  font-weight: 800
}

/* ---- RESPONSIVE ---- */
@media(max-width:768px) {

  /* Header compact */
  .app-header {
    height: auto;
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 4px
  }

  .hdr-left {
    gap: 8px
  }

  /* Hide hamburger on mobile – bottom nav handles navigation */
  .menu-btn {
    display: none
  }

  .logo-star {
    width: 26px;
    height: 26px;
    font-size: 13px
  }

  .hdr-logo b {
    font-size: .95rem
  }

  .hdr-logo small {
    display: none
  }

  /* Stats row becomes full-width second row */
  .hdr-stats {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
    background: #00000022;
    border-radius: 10px;
    padding: 5px 8px;
    margin-top: 2px;
  }

  .stat {
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 12px
  }

  .stat.xp {
    display: none
  }

  .xp-wrap {
    flex: 1;
    min-width: 60px
  }

  .xp-bar {
    height: 7px
  }

  .hdr-right {
    gap: 6px
  }

  .hdr-avatar {
    width: 30px;
    height: 30px;
    border-width: 2px
  }

  .notif-btn {
    font-size: 1rem
  }

  .install-btn {
    padding: 6px 10px;
    font-size: .8rem;
  }

  .install-btn span {
    display: none;
  }

  /* Hide sidebar completely on mobile – use bottom nav instead */
  .sidebar {
    display: none !important
  }

  /* Content */
  .bottom-nav {
    display: block
  }

  .app-body {
    padding-bottom: 62px
  }

  .main-content {
    padding-bottom: 4px
  }

  .cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .badges-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .page {
    padding: 12px
  }

  .welcome-banner {
    padding: 14px 16px
  }

  .welcome-banner h2 {
    font-size: 1rem
  }

  .welcome-banner p {
    font-size: .78rem
  }

  #toast {
    bottom: 72px;
    right: 12px
  }

  .music-btn {
    bottom: 72px
  }

  .game-modal {
    width: 96%;
    padding: 18px 16px;
    max-height: 92vh
  }

  /* Cards */
  .mat-card {
    min-height: 145px
  }

  .mat-card-body h3 {
    font-size: .9rem
  }

  .mat-card-emoji {
    font-size: 1.5rem
  }
}

@media(max-width:480px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .choices {
    grid-template-columns: 1fr
  }

  .stat.level {
    display: none
  }

  .mat-card {
    min-height: 130px
  }
}