/* ============================================================
   app.css — Duolingo-style shell: no-scroll, one screen at a
   time, top progress, bottom action bar, transitions, buttons,
   feedback banner, hint bubble, mascot. Desktop-first, responsive.
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* NO page scroll */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  -webkit-text-size-adjust: 100%;
}
body { line-height: 1.45; }
button { font-family: inherit; }

/* Use dynamic viewport height so mobile browser chrome doesn't cause scroll */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

/* ---------- Top bar: progress (+ optional close) ---------- */
.topbar {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 clamp(12px, 4vw, 28px);
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.progress {
  flex: 1 1 auto;
  height: 16px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: var(--r-pill);
  transition: width 420ms var(--ease);
  position: relative;
}
.progress__fill::after {       /* glossy highlight, very Duolingo */
  content: "";
  position: absolute;
  inset: 3px 6px auto 6px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.35);
}
.streak {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.05rem;
}

/* ---------- Stage: holds exactly one screen ---------- */
.stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12px, 3vh, 28px) clamp(16px, 4vw, 28px) 8px;
  overflow: hidden;
}
.screen__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: auto;                  /* vertically + horizontally centre content */
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  align-items: stretch;
}
.screen__title {
  font-size: var(--fs-title);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--s2);
}
.screen__sub {
  text-align: center;
  color: var(--ink-soft);
  margin: 0;
}

/* Screen transitions (slide + fade). Engine toggles these. */
.screen--enter { animation: screen-in var(--t-screen) var(--ease) both; }
.screen--exit  { animation: screen-out var(--t-screen) var(--ease) both; }
.screen--enter-back { animation: screen-in-back var(--t-screen) var(--ease) both; }
.screen--exit-back  { animation: screen-out-back var(--t-screen) var(--ease) both; }
@keyframes screen-in      { from { opacity:0; transform: translateX(40px);  } to { opacity:1; transform:none; } }
@keyframes screen-out     { from { opacity:1; transform:none; } to { opacity:0; transform: translateX(-40px); } }
@keyframes screen-in-back { from { opacity:0; transform: translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes screen-out-back{ from { opacity:1; transform:none; } to { opacity:0; transform: translateX(40px);  } }

/* ---------- Bottom action zone ---------- */
.footer {
  flex: 0 0 auto;
  min-height: var(--foot-h);
  border-top: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) clamp(16px, 4vw, 28px);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.footer__inner {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  gap: var(--s4);
  justify-content: space-between;
}
/* Feedback state recolours the whole footer */
.footer--correct { background: var(--green-soft); border-color: transparent; }
.footer--wrong   { background: var(--red-soft);   border-color: transparent; }

.feedback {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
}
.feedback--show { opacity: 1; transform: none; transition: opacity 180ms var(--ease), transform 220ms var(--ease-back); }
.feedback--correct { color: var(--green-ink); }
.feedback--wrong   { color: var(--red-ink); }
.feedback__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: #fff; font-size: 1.5rem;
}
.feedback__text { display: flex; flex-direction: column; gap: 2px; }
.feedback__title { font-size: 1.05rem; }
.feedback__detail { font-weight: 500; font-size: 0.95rem; }

/* ---------- 3D buttons ---------- */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: var(--r);
  padding: var(--s4) var(--s6);
  min-height: 56px;
  box-shadow: 0 4px 0 var(--green-d);
  transition: transform 70ms var(--ease), box-shadow 70ms var(--ease), background-color 120ms;
  flex: 0 0 auto;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--green-d); }
.btn:disabled {
  background: var(--line);
  color: #afafaf;
  box-shadow: 0 4px 0 var(--line-d);
  cursor: not-allowed;
}
.btn--wide { width: 100%; }
.btn--blue  { background: var(--blue); box-shadow: 0 4px 0 var(--blue-d); }
.btn--blue:active { box-shadow: 0 0 0 var(--blue-d); }
.btn--red   { background: var(--red); box-shadow: 0 4px 0 var(--red-d); }
.btn--ghost {
  background: #fff; color: var(--blue);
  border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line);
  text-transform: none;
}
.btn--skip {
  background: transparent; color: var(--ink-soft);
  box-shadow: none; text-transform: uppercase; min-height: 44px;
  padding: var(--s3) var(--s4);
}
.btn--skip:active { transform: none; }

/* ---------- Hint bubble (animated, explicit step-by-step) ---------- */
.hint {
  align-self: stretch;
  background: var(--blue-soft);
  border: 2px solid var(--blue);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  color: #0b6fa6;
  font-weight: 600;
  display: flex; gap: var(--s3); align-items: flex-start;
  animation: pop-in 260ms var(--ease-back) both;
}
.hint__bulb { font-size: 1.3rem; flex: 0 0 auto; }
.hint__steps { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; }
.hint__steps li { animation: step-in 300ms var(--ease) both; }

/* ---------- Mascot (lightweight emoji character) ---------- */
.mascot {
  font-size: clamp(48px, 12vw, 84px);
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.06));
}
.mascot--happy { animation: bob 1.6s var(--ease) infinite; }
.mascot--wrong { animation: shake 420ms var(--ease) both; }

/* ---------- Shared animations ---------- */
@keyframes pop-in   { from { opacity:0; transform: scale(0.7); } to { opacity:1; transform: scale(1); } }
@keyframes step-in  { from { opacity:0; transform: translateX(-8px);} to { opacity:1; transform:none; } }
@keyframes bob      { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

/* Confetti burst */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i {
  position: absolute; top: -10vh; width: 11px; height: 16px; border-radius: 2px;
  animation: fall 2.4s var(--ease) forwards;
}
.confetti i:nth-child(6n+1){left:8%;background:var(--green);animation-delay:0s}
.confetti i:nth-child(6n+2){left:24%;background:var(--blue);animation-delay:.12s}
.confetti i:nth-child(6n+3){left:40%;background:var(--yellow);animation-delay:.24s}
.confetti i:nth-child(6n+4){left:56%;background:var(--purple);animation-delay:.08s}
.confetti i:nth-child(6n+5){left:72%;background:var(--red);animation-delay:.2s}
.confetti i:nth-child(6n+6){left:88%;background:var(--green);animation-delay:.05s}
@keyframes fall { 0%{transform:translateY(0) rotate(0);opacity:1} 100%{transform:translateY(115vh) rotate(620deg);opacity:0} }

/* ---------- Utility ---------- */
.visually-hidden {
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.no-print {}
.stack { display:flex; flex-direction:column; gap: var(--s3); }
.row { display:flex; gap: var(--s3); align-items:center; }
.center { text-align:center; justify-content:center; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Phone tweaks */
@media (max-width: 560px) {
  :root { --foot-h: 84px; }
  .screen { padding-left: 14px; padding-right: 14px; }
  .footer__inner { gap: var(--s2); }
}