/* ───────────────────────────────────────────────────────────────
   Capilingo — Estilos compartilhados (Capi games)
   Mantém os mesmos nomes de variáveis do antigo common.css
   pra que os styles inline dos jogos continuem funcionando.
   ─────────────────────────────────────────────────────────────── */

:root{
  /* ── Capi brand tokens ────────────────────────────────────── */
  --capi-bg:        #FAF7EE;
  --capi-bg-soft:   #F2EEDF;
  --capi-ink:       #14201B;
  --capi-ink-2:     #4A5650;
  --capi-line:      #E6E0CE;

  --green:          #1FB061;
  --green-dark:     #0E7A42;
  --green-soft:     #D6F2E2;

  --yellow:         #FFC91F;
  --yellow-dark:    #B98800;
  --yellow-soft:    #FFF3C2;

  --blue:           #2E4DA8;
  --blue-dark:      #1A3478;
  --blue-soft:      #DCE4F7;

  --red:            #E0524A;
  --red-dark:       #A8332C;

  --orange:         #E07A1F;
  --orange-dark:    #B95E10;

  --purple:         #7B4FCB;
  --purple-dark:    #4F2E92;

  /* ── Primary (CTAs principais) → verde Capi ───────────────── */
  --primary:        var(--green);
  --primary-dark:   var(--green-dark);

  /* ── Backgrounds e textos ─────────────────────────────────── */
  --bg:             var(--capi-bg);
  --gray-bg:        var(--capi-bg-soft);
  --gray-text:      var(--capi-ink);
  --gray-light:     var(--capi-line);
  --gray-mid:       #7C8782;

  --nav-h:          0px;
}

*{
  box-sizing:border-box;
  margin:0; padding:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
html,body{ height:100%; }
body{
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background:var(--bg);
  color:var(--gray-text);
  font-weight:600;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
}

#app{
  display:flex; flex-direction:column;
  height:100vh;
  max-width:600px; margin:0 auto;
  position:relative;
  padding-top:var(--sat,0px);
  padding-bottom:var(--nav-h,0px);
}

/* ── HEADER ─────────────────────────────────────────────────── */
header{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--gray-light);
  background:var(--bg);
  z-index:10;
}
.back-btn{
  background:none; border:none;
  font-size:24px; font-weight:800;
  color:var(--capi-ink-2);
  cursor:pointer;
  padding:4px 8px; border-radius:10px;
  transition:background .15s;
  min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif;
}
.back-btn:hover{ background:var(--gray-light); }
.back-btn.hidden{ visibility:hidden; }
.progress-bar-wrap{
  flex:1; height:14px;
  background:var(--gray-light); border-radius:999px;
  overflow:hidden;
}
.progress-bar-fill{
  height:100%; background:var(--primary);
  border-radius:999px;
  transition:width .4s ease;
}
.heart-counter,.score-counter{
  display:flex; align-items:center; gap:6px;
  font-weight:800; font-size:18px;
  font-family:'Sora','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.heart-counter{ color:var(--red); }
.score-counter{ color:var(--yellow-dark); }
.global-hearts{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:800; font-size:18px; color:var(--red);
  white-space:nowrap;
  font-family:'Sora','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.global-hearts .gh-icon{ font-size:18px; line-height:1; }

/* ── Capi brand pill no header ─────────────────────────────── */
.capi-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Sora',sans-serif;
  font-weight:800; font-size:18px;
  color:var(--capi-ink);
  letter-spacing:-0.02em;
}
.capi-brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:var(--green); color:#fff;
  display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  box-shadow:0 3px 0 var(--green-dark);
}

/* ── MAIN + SCREENS ────────────────────────────────────────── */
main{
  flex:1;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:16px;
}
.screen{ display:none; }
.screen.active{ display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}

/* ── TIPOGRAFIA ────────────────────────────────────────────── */
h1{
  font-family:'Sora',sans-serif;
  font-size:30px; font-weight:800;
  color:var(--capi-ink);
  margin-bottom:8px;
  line-height:1.05;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
h2{
  font-family:'Sora',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--capi-ink);
}
.subtitle{
  font-size:16px;
  color:var(--capi-ink-2);
  margin-bottom:24px;
  font-weight:500;
}
.eyebrow{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:11px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:8px;
}

/* Yellow highlight (linha amarela da marca Capi) */
.hl{
  background:linear-gradient(180deg, transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%);
  padding:0 6px;
}

/* ── BOTÕES (Duo-style chunky) ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:16px 20px;
  border:none;
  border-radius:14px;
  font-family:'Sora',sans-serif;
  font-weight:700; font-size:15px;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:transform .08s, box-shadow .08s;
  position:relative;
  box-shadow:0 4px 0 var(--primary-dark);
  background:var(--primary);
  color:white;
}
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--primary-dark); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn-ghost{
  background:#fff; color:var(--capi-ink);
  border:2px solid var(--gray-light);
  box-shadow:0 4px 0 var(--gray-light);
}
.btn-ghost:active{ box-shadow:0 2px 0 var(--gray-light); }

.btn-red{
  background:var(--red);
  box-shadow:0 4px 0 var(--red-dark);
}
.btn-red:active{ box-shadow:0 2px 0 var(--red-dark); }

.btn-blue{
  background:var(--blue);
  box-shadow:0 4px 0 var(--blue-dark);
}
.btn-blue:active{ box-shadow:0 2px 0 var(--blue-dark); }

.btn-yellow{
  background:var(--yellow);
  color:var(--capi-ink);
  box-shadow:0 4px 0 var(--yellow-dark);
}
.btn-yellow:active{ box-shadow:0 2px 0 var(--yellow-dark); }

.btn-green{
  background:var(--green);
  color:#fff;
  box-shadow:0 4px 0 var(--green-dark);
}
.btn-green:active{ box-shadow:0 2px 0 var(--green-dark); }

.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; }

/* ── ANIMAÇÕES ─────────────────────────────────────────────── */
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

/* ── FEEDBACK CARD ─────────────────────────────────────────── */
.feedback{
  position:fixed;
  bottom:40%; left:16px; right:16px;
  max-width:568px; margin:0 auto;
  transform:translateY(20px) scale(.95);
  opacity:0;
  border-radius:20px;
  padding:18px 20px 20px;
  z-index:20;
  transition:transform .22s ease, opacity .18s ease;
  pointer-events:none;
}
.feedback.show{
  transform:translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}
.feedback.correct{ background:var(--green-soft); }
.feedback.wrong{ background:#FFD9D9; }
.feedback-msg{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
  font-size:18px; font-weight:800;
  font-family:'Sora',sans-serif;
  letter-spacing:-0.01em;
}
.feedback.correct .feedback-msg{ color:var(--green-dark); }
.feedback.wrong .feedback-msg{ color:var(--red-dark); }
.feedback-icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:white; font-size:24px;
  flex-shrink:0;
}

/* ── RESULT SCREEN (estrelas) ──────────────────────────────── */
.results-hero{ text-align:center; padding:28px 0 20px; }
.results-hero .big-emoji{ font-size:96px; display:block; margin-bottom:12px; }
.results-stats{
  background:var(--gray-bg);
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
}
.results-stat{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4px;
  border-bottom:1px solid var(--gray-light);
  font-size:16px;
}
.results-stat:last-child{ border-bottom:none; }
.results-stat .label{ color:var(--capi-ink-2); font-weight:600; }
.results-stat .value{
  color:var(--capi-ink);
  font-weight:800; font-size:18px;
  font-family:'Sora',sans-serif;
}
.stars{
  display:flex; justify-content:center; gap:8px;
  margin:14px 0 24px;
}
.star{
  font-size:48px;
  filter:grayscale(1); opacity:.3;
  transition:all .4s;
}
.star.lit{
  filter:none; opacity:1;
  animation:starpop .5s;
}
@keyframes starpop{
  0%{ transform:scale(0); }
  60%{ transform:scale(1.3); }
  100%{ transform:scale(1); }
}

/* ── BOTTOM NAV ────────────────────────────────────────────── */
.bottom-nav{
  display:flex; align-items:stretch; justify-content:space-around;
  border-top:1px solid var(--gray-light);
  background:var(--bg);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:15;
  flex-shrink:0;
  position:fixed;
  bottom:0; left:0; right:0;
  max-width:600px; margin:0 auto;
  width:100%;
}
.bottom-nav__item{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  padding:8px 2px; min-height:60px;
  text-decoration:none;
  color:var(--capi-ink-2);
  font-weight:700;
  font-family:'Sora',sans-serif;
  border-radius:10px;
  margin:4px 2px;
  transition:background .15s;
}
.bottom-nav__item:active{ background:var(--gray-light); }
.bottom-nav__icon{ font-size:24px; line-height:1; }
.bottom-nav__label{
  font-size:10px;
  letter-spacing:0.04em;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.bottom-nav__item.active{
  background:var(--green-soft);
  color:var(--green-dark);
}
.bottom-nav__item.active .bottom-nav__label{ color:var(--green-dark); }

body.admob-banner-visible{ --nav-h:68px; }

body > .bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  max-width:600px;
  margin-left:auto; margin-right:auto;
}

/* ── FEEDBACK DUOLINGO ─────────────────────────────────────── */
.feedback-answer{
  font-size:14px; font-weight:700;
  color:var(--red-dark);
  margin-top:-4px; margin-bottom:10px;
  line-height:1.35;
}
.feedback-answer .answer-text{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}

/* ── OPTION SELECTED ───────────────────────────────────────── */
.option--selected{
  border:3px solid var(--primary) !important;
  background:rgba(31,176,97,0.10) !important;
  color:var(--green-dark) !important;
}

/* ── BUTTON STATES ─────────────────────────────────────────── */
.btn--check-disabled{
  background:var(--gray-light) !important;
  color:var(--gray-mid) !important;
  box-shadow:0 4px 0 #C8C8C8 !important;
  cursor:not-allowed !important;
  pointer-events:none;
}
.btn--check-active{
  background:var(--primary) !important;
  color:white !important;
  box-shadow:0 4px 0 var(--primary-dark) !important;
}
.btn--continue{
  background:var(--green) !important;
  color:white !important;
  box-shadow:0 4px 0 var(--green-dark) !important;
}
.btn--gotit{
  background:var(--red) !important;
  color:white !important;
  box-shadow:0 4px 0 var(--red-dark) !important;
}