/* =========================================================
   AuraHub — style.css
   Tema "Ember": grafite-ameixa escuro com gradiente
   laranja→magenta, moldura de app e navbar inferior.
   Tema único e escuro por design (como Discord/Steam) —
   não segue prefers-color-scheme de propósito.
   ========================================================= */

:root {
  --bg: #120c14;
  --bg-ambient: #08060a;
  --card: #1e1420;
  --card-hover: #2a1b28;
  --border: #33222f;
  --text: #f5ece8;
  --muted: #ab8f97;
  --accent-1: #ff6a3d;
  --accent-2: #ff2e63;
  --accent-3: #ffb84d;
  --positive: #6bcf7f;
  --negative: #ff4d4d;
  --radius-frame: 32px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
}

body {
  background: var(--bg-ambient);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  /* Textura ambiente sutil atrás da moldura, só visível em telas largas */
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255, 106, 61, 0.14), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(255, 46, 99, 0.12), transparent 45%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }

/* ---------- Moldura do app ---------- */
.app-shell {
  width: 100%;
  max-width: 430px;
  padding: 28px 14px 40px;
}

.app-frame {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 78vh;
}

.disclaimer {
  text-align: center;
  color: var(--muted);
  font-size: 0.74rem;
  margin: 16px 10px 0;
  line-height: 1.5;
}

/* ---------- Top bar ---------- */
.top-bar {
  padding: 20px 22px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* ---------- Main app area ---------- */
#app {
  flex: 1;
  width: 100%;
  padding: 8px 20px 24px;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
  display: flex;
  gap: 4px;
  padding: 10px;
  margin: 0 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-btn .nav-icon { font-size: 1.2rem; line-height: 1; }
.nav-btn:hover { color: var(--text); }
.nav-btn.active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
}

/* ---------- Reusable: buttons ---------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 46, 99, 0.35);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 46, 99, 0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--card-hover); border-color: var(--accent-1); }

.btn-big {
  font-size: 1.1rem;
  padding: 16px 30px;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.btn-row .btn-secondary,
.btn-row .btn-primary {
  flex: 1;
  min-width: 120px;
  padding: 13px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---------- Hero (home) ---------- */
.hero {
  text-align: center;
  padding: 20px 0 8px;
  animation: fadeIn 0.5s ease;
}

.hero .hero-logo {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

.hero p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 320px;
  margin: 0 auto 20px;
}

.welcome-back {
  margin: 0 auto 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
  animation: fadeIn 0.5s ease;
}
.welcome-back p { margin: 4px 0; font-size: 0.85rem; }
.welcome-back .aura-value {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Card grid / tiles de coleção ---------- */
.section-title {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 30px 0 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.categoria-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 10px 14px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
  animation: fadeIn 0.4s ease;
  /* <button> não herda a cor de texto da página por padrão (fica preto no navegador) —
     precisa ser setada explicitamente, igual já era feito nos outros botões do site. */
  color: var(--text);
}

/* Rotaciona o gradiente do badge por posição, pra cada tile parecer parte de uma coleção variada.
   Duas cores nomeadas (--tile-a/--tile-b) em vez de um glow difuso: garante contraste sólido
   atrás do emoji mesmo quando o glifo renderiza em preto/monocromático (ex: 🏙️, 📱). */
.categoria-card:nth-of-type(4n+1) { --tile-a: var(--accent-1); --tile-b: var(--accent-2); }
.categoria-card:nth-of-type(4n+2) { --tile-a: var(--accent-2); --tile-b: var(--accent-3); }
.categoria-card:nth-of-type(4n+3) { --tile-a: var(--accent-3); --tile-b: #b06bff; }
.categoria-card:nth-of-type(4n+4) { --tile-a: #b06bff; --tile-b: var(--accent-1); }

.categoria-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-1);
}

.categoria-card .icone-badge {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tile-a, var(--accent-1)), var(--tile-b, var(--accent-2)));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.categoria-card .icone {
  font-size: 1.6rem;
  line-height: 1;
}
.categoria-card .titulo {
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* ---------- Quiz ---------- */
.quiz-box {
  animation: fadeIn 0.4s ease;
  text-align: center;
}

.quiz-box h1 { font-size: 1.3rem; margin: 8px 0 6px; text-wrap: balance; }
.quiz-box .subtitle { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; }

.quiz-box input[type="text"],
.quiz-box input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.quiz-box input[type="text"]:focus,
.quiz-box input[type="number"]:focus { outline: 2px solid var(--accent-1); }

.quiz-progress-wrap {
  margin-bottom: 22px;
}
.quiz-progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.quiz-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
  border: 1px solid var(--border);
}
.quiz-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transition: width 0.35s ease;
}

.quiz-question-emoji { font-size: 3rem; margin-bottom: 6px; }
.quiz-question-text { font-size: 1.15rem; font-weight: 600; margin-bottom: 24px; text-wrap: balance; }

.quiz-answers {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.quiz-answers button {
  flex: 1;
  padding: 15px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.quiz-answers button:hover { transform: translateY(-2px); background: var(--card-hover); }
.quiz-answers .btn-sim:hover { border-color: var(--positive); }
.quiz-answers .btn-nao:hover { border-color: var(--negative); }

/* Lista vertical de opções (Simulações) — mesma base visual do .btn-secondary,
   empilhada porque o número de alternativas varia de pergunta pra pergunta */
.sim-opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sim-opcoes .btn-secondary {
  width: 100%;
  text-align: center;
}
.sim-opcoes .btn-secondary:hover { border-color: var(--accent-1); }

/* Tela de "processando", entre as perguntas e o resultado da simulação */
.processando { padding: 30px 0; }
.spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid var(--card-hover);
  border-top-color: var(--accent-1);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Resultado ---------- */
.resultado-box {
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.resultado-box .aura-total {
  font-size: 2.4rem;
  font-weight: 900;
  margin: 6px 0 4px;
}
.aura-total.positivo { color: var(--positive); }
.aura-total.negativo { color: var(--negative); }

.aura-xp-wrap {
  margin: 18px auto;
}
.aura-xp-bar {
  height: 20px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.aura-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2) 60%, var(--accent-3));
  transition: width 0.8s ease;
}
.aura-xp-label {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.classe-card {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 30px;
  margin: 12px auto 22px;
}
.classe-card .classe-emoji { font-size: 2rem; }
.classe-card .classe-nome { font-size: 1.2rem; font-weight: 800; margin: 4px 0; }
.classe-card .classe-desc { color: var(--muted); font-size: 0.85rem; }

/* ---------- Wallet / carteira ---------- */
.wallet-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.wallet-card {
  width: 100%;
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(160deg, #241725 0%, #1a1119 60%, #120c14 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.wallet-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255, 46, 99, 0.35), transparent 70%);
}
.wallet-card::after {
  content: "";
  position: absolute;
  bottom: -70px; left: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 106, 61, 0.28), transparent 70%);
}

.wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.wallet-header .wallet-brand { font-weight: 800; letter-spacing: 1px; font-size: 0.85rem; }
.wallet-header .wallet-level {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.wallet-body {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wallet-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.wallet-name { font-size: 1.2rem; font-weight: 800; }
.wallet-classe { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

.wallet-aura {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-size: 1.9rem;
  font-weight: 900;
}
.wallet-aura.positivo { color: var(--positive); }
.wallet-aura.negativo { color: var(--negative); }

.wallet-footer {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.wallet-meta { font-size: 0.7rem; color: var(--muted); line-height: 1.5; font-variant-numeric: tabular-nums; }
.wallet-qr canvas {
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  display: block;
}

/* ---------- Categoria (reveal) ---------- */
.categoria-reveal {
  text-align: center;
  animation: fadeIn 0.4s ease;
}
.categoria-reveal .item-emoji {
  font-size: 4.5rem;
  margin-bottom: 10px;
  animation: pop 0.35s ease;
}
.categoria-reveal .item-nome { font-size: 1.4rem; font-weight: 800; }
.categoria-reveal .item-aura { font-size: 1.6rem; font-weight: 900; margin: 6px 0; }
.categoria-reveal .item-aura.positivo { color: var(--positive); }
.categoria-reveal .item-aura.negativo { color: var(--negative); }
.categoria-reveal .item-desc { color: var(--muted); font-size: 0.88rem; margin-bottom: 20px; }

/* ---------- Simulações: card de resultado ---------- */
/* Mesma linguagem visual do wallet-card (gradiente + glow), só que com
   conteúdo genérico (destaque + lista de linhas) pra servir qualquer simulação. */
.sim-resultado-card {
  margin: 16px 0;
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(160deg, #241725 0%, #1a1119 60%, #120c14 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.sim-resultado-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255, 46, 99, 0.3), transparent 70%);
}

.sim-destaque { position: relative; z-index: 1; margin-bottom: 18px; }
.sim-destaque-emoji { font-size: 2.6rem; animation: pop 0.35s ease; }
.sim-destaque-valor {
  font-size: 1.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sim-destaque-label { color: var(--muted); font-size: 0.85rem; }

.sim-linhas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.sim-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.86rem;
}
.sim-linha span { color: var(--muted); }
.sim-linha strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sim-frase {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text);
}

.sim-disclaimer {
  color: var(--muted);
  font-size: 0.74rem;
  margin: 0 0 4px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--accent-1);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

/* Acima de ~460px a moldura de app flutua centralizada, como um mockup de celular */
@media (min-width: 461px) {
  .app-shell { padding-top: 40px; }
}

/* Abaixo disso, a moldura vira a própria tela cheia — sem bordas/soltura desperdiçando espaço */
@media (max-width: 460px) {
  .app-shell { max-width: 100%; padding: 0; }
  .app-frame { border-radius: 0; border: none; min-height: 100vh; }
  .disclaimer { padding: 0 16px; }
}

@media (max-width: 340px) {
  .card-grid { gap: 8px; }
  .categoria-card { padding: 16px 6px 12px; }
}