/* ============================================================
   EcoLingo — estilos globais
   ============================================================ */
:root{
  --green: #58cc02;
  --green-dark: #45a302;
  --green-darker: #3a8c02;
  --blue: #1cb0f6;
  --blue-dark: #1899d6;
  --red: #ff4b4b;
  --red-dark: #e63e3e;
  --gold: #ffc800;
  --gold-dark: #e0ac00;
  --purple: #ce82ff;
  --purple-dark: #a568cc;
  --gray-100: #f7f7f7;
  --gray-200: #e5e5e5;
  --gray-300: #d9d9d9;
  --gray-400: #afafaf;
  --gray-500: #777777;
  --gray-700: #4b4b4b;
  --gray-900: #3c3c3c;
  --ink: #232323;
  --radius: 16px;
  --shadow-btn: 0 4px 0 0;
  font-size: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  background:#fff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Baloo 2', 'Nunito', sans-serif; margin:0; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; }
::selection{ background:var(--green); color:#fff; }

#app{ min-height:100vh; display:flex; flex-direction:column; }

/* ---------- utility button (3D duolingo-style) ---------- */
.btn{
  border:none; border-radius:16px; padding:14px 20px;
  font-weight:800; font-size:15px; letter-spacing:.5px; text-transform:uppercase;
  transition: transform .05s ease, box-shadow .05s ease, filter .15s;
  box-shadow: var(--shadow-btn) var(--btn-shadow-color, var(--gray-300));
  color:#fff;
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform: translateY(4px); box-shadow:0 0 0 0 transparent; }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.3); }
.btn:disabled:active{ transform:none; }

.btn-green{ background:var(--green); --btn-shadow-color:var(--green-darker); }
.btn-green:hover:not(:disabled){ background:#62d905; }
.btn-blue{ background:var(--blue); --btn-shadow-color:var(--blue-dark); }
.btn-red{ background:var(--red); --btn-shadow-color:var(--red-dark); }
.btn-gold{ background:var(--gold); --btn-shadow-color:var(--gold-dark); color:#5c4400; }
.btn-purple{ background:var(--purple); --btn-shadow-color:var(--purple-dark); }
.btn-outline{
  background:#fff; color:var(--gray-500); border:2px solid var(--gray-200);
  box-shadow: var(--shadow-btn) var(--gray-200);
}
.btn-outline:hover:not(:disabled){ background:var(--gray-100); }
.btn-ghost{ background:transparent; color:var(--gray-500); box-shadow:none; text-transform:none; font-weight:700; }
.btn-block{ width:100%; display:block; text-align:center; }
.btn-lg{ padding:16px 24px; font-size:16px; }

/* ============================================================
   TOP NAV BAR (in-app screens)
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:20; background:#fff;
  border-bottom:2px solid var(--gray-200);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; gap:16px;
}
.topbar .brand{ display:flex; align-items:center; gap:8px; font-family:'Baloo 2'; font-weight:800; font-size:22px; color:var(--green-dark); }
.topbar .brand .owl{ font-size:28px; }
.stat-pill{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:15px;
  padding:6px 12px; border-radius:999px; background:var(--gray-100); border:2px solid var(--gray-200);
}
.stat-pill.streak{ color:#ff9600; }
.stat-pill.gems{ color:#1cb0f6; }
.stat-pill.hearts{ color:var(--red); }
.stats-row{ display:flex; gap:10px; align-items:center; }
.icon-btn{
  background:var(--gray-100); border:2px solid var(--gray-200); border-radius:12px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.icon-btn:hover{ background:var(--gray-200); }

/* ============================================================
   BOTTOM NAV (mobile-esque tab bar)
   ============================================================ */
.bottombar{
  position:sticky; bottom:0; z-index:20; background:#fff; border-top:2px solid var(--gray-200);
  display:flex; justify-content:space-around; padding:8px 4px 10px;
}
.bottombar .tab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--gray-400); font-weight:800; font-size:11px;
  padding:6px 14px; border-radius:12px;
}
.bottombar .tab.active{ color:var(--green-dark); }
.bottombar .tab .ico{ font-size:22px; }

/* ============================================================
   SCREEN: WELCOME / ONBOARDING
   ============================================================ */
.screen{ flex:1; display:flex; flex-direction:column; }
.welcome{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; text-align:center; background:
    radial-gradient(circle at 15% 20%, #eaffd6 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #d6f7ff 0%, transparent 45%),
    #ffffff;
  gap:18px;
}
.welcome .mascot{ font-size:110px; line-height:1; animation:float 3.2s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.12)); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-14px) rotate(2deg);} }
.welcome h1{ font-size:38px; color:var(--green-dark); font-weight:800; }
.welcome p.tag{ font-size:17px; color:var(--gray-700); max-width:420px; font-weight:600; }
.welcome .cta-col{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.welcome .name-input{
  width:100%; max-width:340px; padding:14px 16px; border-radius:14px; border:2px solid var(--gray-300);
  font-size:16px; font-weight:700; text-align:center; outline:none;
}
.welcome .name-input:focus{ border-color:var(--blue); }
.welcome .feature-row{ display:flex; gap:18px; margin-top:6px; flex-wrap:wrap; justify-content:center; }
.welcome .feature{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--gray-500); width:74px; }
.welcome .feature .ico{ font-size:26px; }

/* ============================================================
   SCREEN: COURSE SELECT
   ============================================================ */
.course-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;
  padding:20px; max-width:900px; margin:0 auto; width:100%;
}
.course-card{
  border:2px solid var(--gray-200); border-radius:18px; padding:18px 14px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:#fff; transition:transform .1s, box-shadow .1s, border-color .1s;
  position:relative; overflow:hidden;
}
.course-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 0 var(--gray-200); border-color:var(--gray-300); }
.course-card.active{ border-color:var(--green); box-shadow:0 6px 0 0 var(--green-darker); }
.course-card .emoji{ font-size:46px; }
.course-card .title{ font-weight:800; font-size:15px; }
.course-card .desc{ font-size:11.5px; color:var(--gray-500); font-weight:600; }
.course-card .badge-progress{
  font-size:10px; font-weight:800; color:#fff; background:var(--green); border-radius:999px; padding:2px 8px; position:absolute; top:10px; right:10px;
}

/* ============================================================
   SCREEN: SKILL PATH (unit tree)
   ============================================================ */
.path-wrap{ flex:1; background:#fff; padding-bottom:40px; }
.unit-banner{
  max-width:640px; margin:16px auto 28px; padding:16px 20px; border-radius:16px;
  color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.unit-banner .u-title{ font-weight:800; font-size:18px; }
.unit-banner .u-sub{ font-size:12.5px; font-weight:700; opacity:.9; }
.unit-banner button{ background:rgba(0,0,0,.15); border:2px solid rgba(255,255,255,.5); }

.path{ max-width:420px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.path-row{ display:flex; justify-content:center; width:100%; margin:2px 0; }
.node-wrap{ display:flex; flex-direction:column; align-items:center; position:relative; }
.node{
  width:74px; height:74px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  box-shadow: 0 6px 0 0 var(--node-shadow, var(--gray-300));
  background: var(--node-bg, var(--gray-200)); color:#fff;
  position:relative; transition:transform .08s;
}
.node:active:not(.locked){ transform:translateY(5px); box-shadow:0 1px 0 0 var(--node-shadow,var(--gray-300)); }
.node.locked{ background:var(--gray-200); --node-shadow:var(--gray-300); color:var(--gray-400); cursor:not-allowed; }
.node.done{ background:var(--gold); --node-shadow:var(--gold-dark); }
.node.current{ background:var(--green); --node-shadow:var(--green-darker); }
.node .ring{
  position:absolute; inset:-8px; border:3px dashed var(--green); border-radius:50%; opacity:.55;
  animation:spin 12s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.node-label{ margin-top:6px; font-size:11px; font-weight:800; color:var(--gray-500); max-width:90px; text-align:center; }
.node-stars{ display:flex; gap:2px; margin-top:2px; }
.node-stars span{ font-size:10px; }
.crown{ position:absolute; top:-16px; font-size:20px; }
.chest-node{ font-size:34px; }

/* zig-zag offsets */
.o0{ transform:translateX(0px); }
.o1{ transform:translateX(-64px); }
.o2{ transform:translateX(-92px); }
.o3{ transform:translateX(-64px); }
.o4{ transform:translateX(0px); }
.o5{ transform:translateX(64px); }
.o6{ transform:translateX(92px); }
.o7{ transform:translateX(64px); }

/* ============================================================
   SCREEN: LESSON
   ============================================================ */
.lesson-header{ display:flex; align-items:center; gap:14px; padding:14px 18px; }
.lesson-header .close{ background:none; border:none; font-size:24px; color:var(--gray-400); }
.progressbar{ flex:1; height:16px; background:var(--gray-200); border-radius:999px; overflow:hidden; }
.progressbar-fill{ height:100%; background:var(--green); border-radius:999px; transition:width .35s ease; position:relative; }
.progressbar-fill::after{ content:''; position:absolute; right:0; top:2px; width:10px; height:10px; background:#fff3; border-radius:50%; }
.lesson-hearts{ display:flex; align-items:center; gap:4px; font-weight:800; color:var(--red); font-size:15px; min-width:44px; justify-content:flex-end; }

.lesson-body{ flex:1; display:flex; flex-direction:column; padding:20px 20px 100px; max-width:640px; margin:0 auto; width:100%; }
.q-kicker{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--gray-400); margin-bottom:6px; }
.q-prompt{ font-size:22px; font-weight:800; color:var(--ink); margin-bottom:22px; line-height:1.35; }
.q-sub{ font-size:14px; font-weight:600; color:var(--gray-500); margin-top:-14px; margin-bottom:20px; }

.options{ display:flex; flex-direction:column; gap:12px; }
.options.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.option{
  border:2px solid var(--gray-200); border-radius:14px; padding:15px 18px; background:#fff;
  font-weight:700; font-size:15.5px; text-align:left; color:var(--ink);
  box-shadow:0 3px 0 0 var(--gray-200);
  display:flex; align-items:center; gap:10px;
  transition:border-color .1s, background .1s;
}
.option:hover:not(.correct):not(.wrong):not([disabled]){ background:var(--gray-100); border-color:var(--gray-300); }
.option.selected{ border-color:var(--blue); background:#ddf4ff; box-shadow:0 3px 0 0 var(--blue); }
.option.correct{ border-color:var(--green); background:#d7ffb8; box-shadow:0 3px 0 0 var(--green-darker); color:var(--green-darker); }
.option.wrong{ border-color:var(--red); background:#ffdfe0; box-shadow:0 3px 0 0 var(--red-dark); color:var(--red-dark); }
.option .letter{
  width:26px; height:26px; border-radius:8px; border:2px solid var(--gray-300); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--gray-500); flex-shrink:0;
}
.option.selected .letter{ border-color:var(--blue); background:var(--blue); color:#fff; }
.option.correct .letter{ border-color:var(--green-darker); background:var(--green); color:#fff; }
.option.wrong .letter{ border-color:var(--red-dark); background:var(--red); color:#fff; }

.tf-row{ display:flex; gap:14px; }
.tf-row .option{ flex:1; justify-content:center; text-align:center; font-size:17px; }

.fill-row{ display:flex; }
.fill-input{
  width:100%; border:2px solid var(--gray-300); border-radius:14px; padding:16px 18px; font-size:17px;
  font-weight:700; outline:none;
}
.fill-input:focus{ border-color:var(--blue); }

/* footer feedback bar */
.lesson-footer{
  position:fixed; left:0; right:0; bottom:0; padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  background:#fff; border-top:2px solid var(--gray-200); z-index:15;
}
.lesson-footer.state-correct{ background:#d7ffb8; border-top-color:#b6f27c; }
.lesson-footer.state-wrong{ background:#ffdfe0; border-top-color:#ffb3b6; }
.footer-inner{ max-width:640px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.feedback-msg{ display:flex; align-items:center; gap:10px; font-weight:800; }
.feedback-msg .ico{ font-size:26px; }
.feedback-msg.correct{ color:var(--green-darker); }
.feedback-msg.wrong{ color:var(--red-dark); }
.feedback-explain{ font-size:13px; font-weight:600; color:var(--gray-700); margin-top:2px; }

/* ============================================================
   LESSON COMPLETE
   ============================================================ */
.complete-screen{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:40px 20px; text-align:center; background:linear-gradient(#fffdf0,#fff);
}
.complete-screen .big-emoji{ font-size:90px; animation:pop .5s ease; }
@keyframes pop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.15);} 100%{ transform:scale(1);} }
.complete-stats{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
.complete-stat{
  background:var(--gray-100); border-radius:16px; padding:16px 22px; min-width:110px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.complete-stat .val{ font-size:22px; font-weight:800; }
.complete-stat .lbl{ font-size:11px; font-weight:800; color:var(--gray-500); text-transform:uppercase; }
.complete-stat.xp .val{ color:var(--gold-dark); }
.complete-stat.acc .val{ color:var(--blue); }
.complete-stat.streak .val{ color:#ff9600; }

/* ============================================================
   OUT OF HEARTS / GAME OVER
   ============================================================ */
.gameover{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px 20px; text-align:center;
}
.gameover .big-emoji{ font-size:90px; }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-wrap{ max-width:640px; margin:0 auto; width:100%; padding:20px; }
.profile-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.profile-avatar{ font-size:60px; background:var(--gray-100); border-radius:50%; width:90px; height:90px; display:flex; align-items:center; justify-content:center; }
.profile-name{ font-size:24px; font-weight:800; }
.profile-sub{ font-size:13px; color:var(--gray-500); font-weight:700; }
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
@media(min-width:480px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-box{ background:var(--gray-100); border-radius:14px; padding:14px; text-align:center; }
.stat-box .v{ font-size:20px; font-weight:800; }
.stat-box .l{ font-size:10.5px; font-weight:800; color:var(--gray-500); text-transform:uppercase; margin-top:2px; }
.section-title{ font-size:14px; font-weight:800; text-transform:uppercase; color:var(--gray-500); margin:22px 0 10px; letter-spacing:.5px; }
.achv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; }
.achv{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; border-radius:14px; background:var(--gray-100); text-align:center; opacity:.35; filter:grayscale(1); }
.achv.unlocked{ opacity:1; filter:none; background:#fff9db; }
.achv .ico{ font-size:26px; }
.achv .name{ font-size:10px; font-weight:800; }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lb-wrap{ max-width:520px; margin:0 auto; width:100%; padding:20px; }
.lb-league{ text-align:center; margin-bottom:18px; }
.lb-league .lg-ico{ font-size:54px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; margin-bottom:6px; background:#fff; border:2px solid var(--gray-200); }
.lb-row.me{ border-color:var(--blue); background:#eaf8ff; }
.lb-rank{ width:26px; font-weight:800; color:var(--gray-500); text-align:center; }
.lb-avatar{ font-size:26px; }
.lb-name{ flex:1; font-weight:700; }
.lb-xp{ font-weight:800; color:var(--gray-700); font-size:13px; }
.lb-row.top1 .lb-rank{ color:var(--gold-dark); }
.lb-row.top2 .lb-rank{ color:#9aa0a6; }
.lb-row.top3 .lb-rank{ color:#c07a3e; }

/* ============================================================
   SHOP
   ============================================================ */
.shop-grid{ display:grid; grid-template-columns:1fr; gap:14px; max-width:520px; margin:0 auto; padding:20px; }
@media(min-width:520px){ .shop-grid{ grid-template-columns:1fr 1fr; } }
.shop-item{ border:2px solid var(--gray-200); border-radius:16px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.shop-item .ico{ font-size:40px; }
.shop-item .name{ font-weight:800; font-size:15px; }
.shop-item .desc{ font-size:12px; color:var(--gray-500); font-weight:600; min-height:32px; }

/* ============================================================
   TOASTS
   ============================================================ */
#toast-layer{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-weight:800; font-size:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.2); animation:toast-in .25s ease, toast-out .3s ease 2.2s forwards;
}
@keyframes toast-in{ from{ transform:translateY(-16px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
@keyframes toast-out{ to{ transform:translateY(-16px); opacity:0;} }

/* confetti */
.confetti-piece{ position:fixed; top:-10px; z-index:998; border-radius:2px; animation:confetti-fall linear forwards; }
@keyframes confetti-fall{ to{ transform:translateY(110vh) rotate(540deg); opacity:.9; } }

/* shake animation for wrong answers / hearts */
.shake{ animation:shake .4s; }
@keyframes shake{ 10%,90%{ transform:translateX(-2px);} 20%,80%{ transform:translateX(4px);} 30%,50%,70%{ transform:translateX(-8px);} 40%,60%{ transform:translateX(8px);} }

.hidden{ display:none !important; }

/* ad slot */
.ad-slot{
  max-width:640px; margin:24px auto 0; padding:10px;
  border:1px dashed var(--gray-300); border-radius:14px;
  min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  overflow:hidden;
}
.ad-label{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gray-400); }

/* empty state / small text */
.muted{ color:var(--gray-500); font-weight:600; font-size:13px; }
.center{ text-align:center; }

/* scrollable content area */
.scroll-area{ flex:1; overflow-y:auto; }

@media(max-width:420px){
  .welcome h1{ font-size:30px; }
  .welcome .mascot{ font-size:86px; }
}