/* ============================================================
   FOCO — estilos do protótipo
   Paleta: roxo + azul sobre fundo claro acinzentado.
   Cada matéria tem uma cor própria, usada só em detalhes.
   ============================================================ */

:root{
  /* Cores base */
  --bg:#F2F2F9;
  --surface:#FFFFFF;
  --ink:#15132B;
  --muted:#6E6B8F;
  --line:#E6E4F2;

  /* Cores principais */
  --roxo:#6C3BF4;
  --roxo-esc:#4B21C4;
  --azul:#2B6BF3;
  --azul-claro:#5FA8FF;
  --grad:linear-gradient(135deg,var(--roxo) 0%,var(--azul) 100%);

  /* Estados */
  --ok:#0E9F5B;
  --ok-bg:#E6F7EE;
  --erro:#DC2B5C;
  --erro-bg:#FDECF1;

  /* Medidas */
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --pad:20px;
  --shadow:0 10px 30px -18px rgba(35,20,90,.45);
  --tab-h:70px;

  /* Cor da matéria atual (trocada pelo JS) */
  --materia:var(--roxo);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{
  font-family:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  letter-spacing:-.02em;
  margin:0;
}
.num{font-family:"JetBrains Mono","Inter",ui-monospace,monospace;font-variant-numeric:tabular-nums;}
button{font:inherit;color:inherit;}

/* ---------- Container do app (celular primeiro, centralizado no desktop) ---------- */
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  position:relative;
}
@media (min-width:600px){
  body{background:#E9E8F4;}
  .app{
    box-shadow:0 24px 60px -30px rgba(30,15,80,.5);
    min-height:100dvh;
  }
}

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad) 12px;
  background:rgba(242,242,249,.86);
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:9px;}
.brand-mark{
  width:26px;height:26px;border-radius:9px;
  background:var(--grad);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.9), 0 4px 12px -4px var(--roxo);
}
.brand-name{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:800;font-size:20px;letter-spacing:-.03em;
}
.status{display:flex;gap:8px;}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--surface);
  font-size:13px;font-weight:700;
  box-shadow:var(--shadow);
}
.chip .ic{width:15px;height:15px;}
.chip-streak{color:#E2622B;}
.chip-points{color:var(--roxo);}
.ic{fill:currentColor;display:block;}

/* Animação do contador quando ganha pontos */
.chip-points.pulse{animation:pop .45s ease;}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- Áreas de tela ---------- */
.viewport{flex:1;padding:4px var(--pad) calc(var(--tab-h) + 28px);}
.screen{display:none;}
.screen.is-active{display:block;animation:fadeUp .32s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.screen-title{font-size:24px;font-weight:700;margin-top:10px;}
.screen-sub{color:var(--muted);font-size:14px;margin:4px 0 18px;}

/* ---------- Cards genéricos ---------- */
.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--pad);
  box-shadow:var(--shadow);
  margin-bottom:16px;
}
.card-title{font-size:15px;font-weight:700;margin-bottom:12px;}

/* ---------- Botões ---------- */
.btn{
  border:0;border-radius:var(--r-md);
  padding:17px 20px;
  font-weight:700;font-size:16px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-block{display:block;width:100%;}
.btn-primary{
  color:#fff;background:var(--grad);
  box-shadow:0 12px 24px -12px var(--roxo);
}
.btn-primary:active{transform:scale(.985);}
.btn-primary:disabled{opacity:.4;box-shadow:none;cursor:default;}
.btn-ghost{
  background:transparent;color:var(--muted);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:active{transform:scale(.985);}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;}

/* ---------- TELA INÍCIO ---------- */
.hero{padding:26px 2px 22px;}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--roxo);margin:0 0 14px;
}
.hero-title{font-size:31px;line-height:1.15;font-weight:700;}
.hero-title em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--muted);font-size:15px;margin:14px 0 24px;}

.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.sum-card{
  background:var(--surface);border-radius:var(--r-md);
  padding:16px 10px;text-align:center;box-shadow:var(--shadow);
}
.sum-value{display:block;font-size:24px;font-weight:700;color:var(--roxo);}
.sum-label{font-size:11.5px;color:var(--muted);}

.level-card{padding:18px var(--pad);}
.level-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px;}
.level-tag{font-size:15px;font-weight:700;}
.level-hint{font-size:12.5px;color:var(--muted);}
.bar{height:10px;border-radius:999px;background:#EDEBF7;overflow:hidden;}
.bar-fill{height:100%;border-radius:999px;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1);}
.foot-note{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0;}

/* ---------- TELA QUESTÕES ---------- */
.track{display:flex;gap:4px;margin:14px 0 8px;}
.track span{flex:1;height:4px;border-radius:999px;background:#E2DFF0;transition:background .3s ease;}
.track span.done{background:var(--roxo);}
.track span.current{background:var(--azul-claro);}
.track-label{font-size:12px;color:var(--muted);margin:0 0 14px;}

.question-card{
  position:relative;overflow:hidden;
  padding-left:calc(var(--pad) + 6px);
  animation:cardIn .35s ease both;
}
/* Faixa lateral com a cor da matéria — assinatura visual do feed */
.question-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--materia);
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

.q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.tag{
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;
  color:var(--materia);background:color-mix(in srgb,var(--materia) 12%,#fff);
}
.q-origin{font-size:12px;color:var(--muted);}
.q-origin b{color:var(--ink);}
.q-text{font-size:16.5px;line-height:1.55;margin:0 0 18px;}

.options{display:flex;flex-direction:column;gap:9px;}
.option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 15px;border:0;border-radius:var(--r-md);
  background:#F6F5FC;box-shadow:inset 0 0 0 1.5px transparent;
  cursor:pointer;font-size:15px;line-height:1.4;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.option:active{transform:scale(.99);}
.option .letter{
  flex:none;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:#fff;font-weight:700;font-size:13.5px;color:var(--muted);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.option.selected{background:#EFEAFE;box-shadow:inset 0 0 0 1.5px var(--roxo);}
.option.selected .letter{background:var(--roxo);color:#fff;box-shadow:none;}
.option.correct{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok);}
.option.correct .letter{background:var(--ok);color:#fff;box-shadow:none;}
.option.wrong{background:var(--erro-bg);box-shadow:inset 0 0 0 1.5px var(--erro);}
.option.wrong .letter{background:var(--erro);color:#fff;box-shadow:none;}
.option:disabled{cursor:default;}

.feedback{margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:#F6F5FC;animation:fadeUp .3s ease both;}
.feedback.ok{background:var(--ok-bg);}
.feedback.erro{background:var(--erro-bg);}
.fb-title{margin:0 0 5px;font-weight:700;font-size:14.5px;}
.feedback.ok .fb-title{color:var(--ok);}
.feedback.erro .fb-title{color:var(--erro);}
.fb-text{margin:0;font-size:14px;color:#3A3556;}

.action-bar{margin-top:4px;}

.done-card{text-align:center;}
.done-emoji{font-size:34px;display:block;margin-bottom:8px;}
.done-card h2{font-size:20px;margin-bottom:6px;}
.done-card p{color:var(--muted);font-size:14px;margin:0 0 18px;}

/* ---------- TELA RANKING ---------- */
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.rank-item{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--shadow);
}
.rank-pos{
  flex:none;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;font-weight:700;font-size:14px;
  background:#F1EFFA;color:var(--muted);
}
.rank-item:nth-child(1) .rank-pos{background:#FFF0D4;color:#B4780A;}
.rank-item:nth-child(2) .rank-pos{background:#EFF1F6;color:#69748C;}
.rank-item:nth-child(3) .rank-pos{background:#FBEDE2;color:#A66A3C;}
.rank-name{flex:1;font-weight:600;font-size:15px;}
.rank-points{font-weight:700;font-size:14px;color:var(--roxo);}
.rank-item.me{
  background:var(--grad);color:#fff;
  box-shadow:0 14px 30px -16px var(--roxo);
}
.rank-item.me .rank-pos{background:rgba(255,255,255,.22);color:#fff;}
.rank-item.me .rank-points{color:#fff;}

/* ---------- TELA PERFIL ---------- */
.profile-card{text-align:center;padding-top:26px;}
.avatar{
  width:74px;height:74px;margin:0 auto 12px;border-radius:26px;
  background:var(--grad);color:#fff;
  display:grid;place-items:center;
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:30px;font-weight:800;
  box-shadow:0 14px 28px -14px var(--roxo);
}
.profile-name{font-size:21px;font-weight:700;}
.profile-level{color:var(--muted);font-size:14px;margin:4px 0 16px;}
.profile-card .level-hint{margin:10px 0 0;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.stat{background:var(--surface);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow);}
.stat-value{display:block;font-size:22px;font-weight:700;color:var(--azul);}
.stat-label{font-size:12px;color:var(--muted);}

.subject-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);}
.subject-row:first-of-type{border-top:0;}
.subject-flag{
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.02em;
}
.subject-flag.ok{background:var(--ok-bg);color:var(--ok);}
.subject-flag.warn{background:#FFF2E2;color:#C1721A;}
.subject-name{flex:1;font-size:14.5px;font-weight:600;}
.subject-score{font-size:13px;color:var(--muted);}

/* ---------- Navegação inferior ---------- */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  z-index:30;
}
.tab{
  border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--muted);
  transition:color .2s ease;
}
.tab .ic{width:22px;height:22px;transition:transform .22s ease;}
.tab.is-active{color:var(--roxo);}
.tab.is-active .ic{transform:translateY(-2px) scale(1.06);}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}