/* ==================================================================
   VIX — folha de estilo única
   ------------------------------------------------------------------
   Organização:
     01. Tokens (cores, fontes, medidas)
     02. Base e utilitários
     03. Fundo e estrutura (topo, palco, navegação)
     04. Peças reutilizadas (painel, rótulo, botão, campo, barra)
     05. Tela de boas-vindas
     06. Tela Início (patente, contador, emergência, números)
     07. Tela Registros (padrões e histórico)
     08. Tela Honra (patentes e medalhas)
     09. Tela Hábitos
     10. Tela Ajustes
     11. Modo emergência
     12. Caixas de diálogo e avisos de conquista
     13. Animações
     14. Computador (telas largas)
     15. Menos movimento (acessibilidade)
   ================================================================== */

/* ==================================================================
   01. TOKENS
   ================================================================== */
:root{
  /* Superfícies, do mais fundo ao mais alto */
  --bg:        #07080A;
  --bg-2:      #0B0D11;
  --card:      #101317;
  --card-alto: #161B21;

  --linha:       #23262B;
  --linha-forte: #31373F;

  /* Texto */
  --branco: #F5F5F4;
  --corpo:  #B9C1CB;
  --mudo:   #868E99;

  /* Cores com papel definido (não usar fora do papel) */
  --lima:       #C6FF3A;   /* sistema: progresso, números, destaque frio */
  --plasma:     #4EF07A;   /* energia: brilho, feixe, vitória */
  --plasma-esc: #14532B;
  --ouro:       #FFC24A;   /* honra: emergência, medalhas, patente alta */
  --ouro-claro: #FFE7B0;
  --vermelho:   #E05656;   /* só destruição: apagar, zerar */

  /* Tipografia */
  --disp:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Medidas */
  --r-g: 26px;
  --r-m: 18px;
  --r-p: 12px;
  --gut: 18px;
  --col: 560px;

  /* Movimento */
  --ease:  cubic-bezier(.2,.7,.2,1);
  --forte: cubic-bezier(.76,0,.24,1);

  /* Alturas de barra do sistema no celular */
  --topo-h: 56px;
  --nav-h: 64px;
}

/* ==================================================================
   02. BASE E UTILITÁRIOS
   ================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--corpo);
  font-family:var(--texto);
  font-size:15.5px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* Enquanto o JS não decidiu o que mostrar, nada pisca na tela */
body.carregando .app,
body.carregando .onboarding{ visibility:hidden; }

h1,h2,h3{ font-family:var(--disp); color:var(--branco); margin:0; letter-spacing:-.02em; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
svg{ display:block; }

.oculto{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* Rótulo mono em caixa alta: é ele que dá o ar de "painel de sistema" */
.rotulo{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mudo);
}

.tela-titulo{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.tela-sub{ color:var(--mudo); font-size:14px; margin:6px 0 20px; }

/* ==================================================================
   03. FUNDO E ESTRUTURA
   ================================================================== */

/* Aurora verde que fica viva bem devagar no fundo */
.luz-fundo{
  position:fixed; inset:-20% -20% auto -20%; height:70vh; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(48% 40% at 50% 0%, rgba(78,240,122,.15), transparent 70%),
    radial-gradient(40% 36% at 78% 12%, rgba(198,255,58,.07), transparent 72%);
  filter:blur(8px);
  animation:respirar 14s var(--ease) infinite alternate;
}

.app{
  position:relative; z-index:1;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}

.topo{
  position:sticky; top:0; z-index:20;
  height:calc(var(--topo-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gut) 0;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, var(--bg) 62%, transparent);
}
.topo-marca{ display:flex; align-items:center; gap:9px; }
.topo-logo{ width:22px; height:22px; display:block; }
.topo-logo svg{ width:100%; height:100%; }
.topo-nome{
  font-family:var(--disp); font-weight:700; font-size:17px;
  letter-spacing:.16em; color:var(--branco);
}
.topo-honra{
  display:flex; align-items:baseline; gap:6px;
  padding:6px 12px; border-radius:99px;
  border:1px solid var(--linha); background:var(--bg-2);
  transition:border-color .2s var(--ease);
}
.topo-honra:active{ border-color:var(--ouro); }
.topo-honra-num{ font-family:var(--mono); font-weight:700; font-size:14px; color:var(--ouro); }
.topo-honra-rotulo{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--mudo); }

.palco{
  flex:1;
  width:100%; max-width:var(--col); margin-inline:auto;
  padding:8px var(--gut) 28px;
}

.tela{ display:none; animation:entrar .32s var(--ease) both; }
.tela.ativa{ display:block; }

/* Navegação inferior */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  background:rgba(7,8,10,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linha);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--mudo); padding:0 2px;
  transition:color .2s var(--ease);
}
.nav-item svg{
  width:21px; height:21px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.nav-item span{ font-size:10px; letter-spacing:.02em; }
.nav-item.ativa{ color:var(--lima); }
.nav-item.ativa svg{ transform:translateY(-1px); filter:drop-shadow(0 0 7px rgba(198,255,58,.45)); }

/* ==================================================================
   04. PEÇAS REUTILIZADAS
   ================================================================== */
.painel{
  position:relative;
  background:linear-gradient(180deg, var(--card) 0%, var(--bg-2) 100%);
  border:1px solid var(--linha);
  border-radius:var(--r-g);
  padding:20px;
  margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 20px 44px -28px #000;
}
.painel-cabeca{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Cantos marcados: detalhe de "janela de sistema" */
.painel-contador::before,
.painel-contador::after{
  content:''; position:absolute; width:16px; height:16px; pointer-events:none;
  border:1px solid rgba(198,255,58,.4);
}
.painel-contador::before{ top:12px; left:12px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.painel-contador::after{ bottom:12px; right:12px; border-left:0; border-top:0; border-radius:0 0 4px 0; }

.selo-ativo{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--plasma);
  padding:4px 9px; border-radius:99px;
  border:1px solid rgba(78,240,122,.28); background:rgba(78,240,122,.07);
}
.selo-ativo i{
  width:5px; height:5px; border-radius:50%; background:var(--plasma);
  box-shadow:0 0 8px var(--plasma);
  animation:pulsar 2.4s ease-in-out infinite;
}

/* Botões -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 24px; border-radius:99px;
  font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.01em;
  transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:scale(.975); }
.btn-largo{ width:100%; }

.btn-principal{
  background:var(--lima); color:#0A0C06;
  box-shadow:0 10px 30px -14px rgba(198,255,58,.75);
}
.btn-secundario{
  background:var(--card-alto); color:var(--branco);
  border:1px solid var(--linha-forte);
}
.btn-secundario:hover{ border-color:var(--linha-forte); background:#1B2128; }

.btn-perigo{
  background:transparent; color:var(--vermelho);
  border:1px solid rgba(224,86,86,.42);
}

.btn-vitoria{
  background:linear-gradient(180deg, var(--plasma), #2FBF5C);
  color:#04180C; font-weight:700;
  box-shadow:0 12px 34px -16px rgba(78,240,122,.9);
}

/* INICIAR: o botão mais importante do primeiro dia */
.btn-iniciar{
  width:100%; flex-direction:column; gap:2px;
  padding:18px 24px; border-radius:var(--r-m);
  background:linear-gradient(180deg, #DFFF7A, var(--lima));
  color:#0A0C06;
  box-shadow:0 16px 40px -18px rgba(198,255,58,.85);
}
.btn-iniciar span{ font-size:19px; font-weight:700; letter-spacing:.14em; }
.btn-iniciar small{ font-family:var(--texto); font-size:11.5px; font-weight:500; opacity:.62; letter-spacing:0; }

/* Ação apagada, de propósito difícil de apertar sem querer */
.btn-discreto{
  display:block; width:100%; margin-top:18px; padding:13px;
  font-size:13px; color:var(--mudo);
  border:1px solid var(--linha); border-radius:var(--r-p);
  background:transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.btn-discreto:active{ color:var(--corpo); border-color:var(--linha-forte); }

/* Campos --------------------------------------------------------- */
.campo{ display:block; margin-bottom:14px; }
.campo-rotulo{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mudo);
}
.campo input, .campo textarea, .campo select{
  width:100%; padding:13px 14px;
  background:var(--bg-2); border:1px solid var(--linha); border-radius:var(--r-p);
  color:var(--branco); font-size:15px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  resize:vertical;
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--plasma);
  box-shadow:0 0 0 3px rgba(78,240,122,.12);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#5C646E; }

/* Barra de progresso --------------------------------------------- */
.barra{
  height:7px; border-radius:99px; overflow:hidden;
  background:#1A1F25; border:1px solid var(--linha);
}
.barra-preenchida{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--plasma), var(--lima));
  border-radius:99px;
  box-shadow:0 0 12px rgba(198,255,58,.5);
  transition:width .6s var(--ease);
}

/* Abas ----------------------------------------------------------- */
.abas{
  display:flex; gap:4px; padding:4px; margin-bottom:16px;
  background:var(--bg-2); border:1px solid var(--linha); border-radius:99px;
}
.aba{
  flex:1; padding:9px 10px; border-radius:99px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mudo);
  transition:background .22s var(--ease), color .22s var(--ease);
}
.aba.ativa{ background:var(--card-alto); color:var(--branco); }
.aba-conteudo{ display:none; animation:entrar .3s var(--ease) both; }
.aba-conteudo.ativa{ display:block; }

/* Estado vazio ---------------------------------------------------- */
.vazio{
  text-align:center; padding:34px 18px; color:var(--mudo); font-size:14px;
  border:1px dashed var(--linha); border-radius:var(--r-m);
}
.vazio strong{ display:block; color:var(--corpo); font-weight:600; margin-bottom:5px; }

/* ==================================================================
   05. BOAS-VINDAS
   ================================================================== */
.onboarding{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 24px) var(--gut) calc(env(safe-area-inset-bottom) + 24px);
  background:var(--bg);
  overflow-y:auto;
}
.onb-fundo{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(7,8,10,.35) 0%, rgba(7,8,10,.88) 62%, var(--bg) 100%),
    url('../assets/hero.jpg') center 22% / cover no-repeat;
}
.onb-conteudo{ position:relative; z-index:1; width:100%; max-width:440px; }
.onb-passo{ display:none; animation:subir .5s var(--ease) both; }
.onb-passo.ativo{ display:block; }

.onb-marca{ width:66px; height:66px; margin-bottom:18px; }
.onb-marca svg{ width:100%; height:100%; }
.onb-titulo{
  font-size:52px; font-weight:700; letter-spacing:.2em; line-height:1;
  color:var(--branco); text-shadow:0 0 34px rgba(78,240,122,.45);
}
.onb-linha{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--plasma); margin:10px 0 18px; }
.onb-texto{ font-size:16px; color:var(--corpo); margin-bottom:28px; }
.onb-subtitulo{ font-size:23px; font-weight:700; margin:10px 0 20px; letter-spacing:-.025em; }

.onb-lista{ list-style:none; margin:16px 0 22px; padding:0; }
.onb-lista li{ display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--linha); font-size:14.5px; }
.onb-lista li:last-child{ border-bottom:0; }
.onb-lista strong{ color:var(--branco); font-weight:600; }
.onb-ico{ color:var(--plasma); font-size:17px; line-height:1.4; }

.onb-aviso{
  padding:14px; border-radius:var(--r-p); font-size:13.5px;
  background:rgba(78,240,122,.06); border:1px solid rgba(78,240,122,.22); color:var(--corpo);
  margin-bottom:24px;
}
.onb-aviso strong{ color:var(--plasma); }
.onb-nota{ font-size:12.5px; color:var(--mudo); margin:-2px 0 20px; }
.onboarding .btn-principal{ width:100%; }

.onb-pontos{ display:flex; gap:7px; justify-content:center; margin-top:22px; }
.onb-pontos i{ width:6px; height:6px; border-radius:50%; background:var(--linha-forte); transition:background .3s var(--ease), width .3s var(--ease); }
.onb-pontos i.ativo{ width:20px; border-radius:99px; background:var(--plasma); }

/* ==================================================================
   06. TELA INÍCIO
   ================================================================== */

/* Ponto de partida */
.painel-partida{ overflow:hidden; padding-top:0; }
.partida-arte{
  height:190px; margin:0 -20px 18px;
  background:
    linear-gradient(180deg, transparent 38%, rgba(16,19,23,.96) 96%),
    url('../assets/hero.jpg') center 26% / cover no-repeat;
}
.partida-titulo{ font-size:23px; font-weight:700; margin:10px 0 8px; letter-spacing:-.025em; }
.partida-texto{ font-size:14.5px; color:var(--corpo); margin-bottom:22px; }

/* Patente */
.painel-patente{ display:flex; align-items:center; gap:16px; }
.patente-insignia{ width:74px; height:88px; flex:0 0 auto; }
.patente-insignia svg{ width:100%; height:100%; }
.patente-info{ flex:1; min-width:0; }
.patente-nome{
  font-size:22px; font-weight:700; letter-spacing:-.02em; margin:3px 0 11px;
  color:var(--branco);
}
.patente-proxima{ font-size:12px; color:var(--mudo); margin-top:9px; }
.patente-proxima b{ color:var(--lima); font-weight:600; }

/* Contador */
.contador{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin:20px 0 16px; padding:0 2px;
}
.contador-bloco{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.contador-num{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(30px, 10.5vw, 46px);
  line-height:1; color:var(--branco);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(78,240,122,.28);
}
.contador-uni{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--mudo);
}
.contador-sep{
  font-family:var(--mono); font-size:clamp(22px, 7vw, 32px); line-height:1;
  color:var(--linha-forte); padding-top:2px;
}
/* O segundo pisca de leve a cada batida */
.contador-num.bate{ animation:batida .5s var(--ease); }

.recorde{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--linha);
}
.recorde-rotulo{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mudo); }
.recorde-valor{ font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--lima); font-variant-numeric:tabular-nums; }
.recorde-nota{
  margin-top:10px; font-size:12px; color:var(--plasma);
  display:flex; align-items:center; gap:6px;
}
.recorde-nota::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--plasma); box-shadow:0 0 8px var(--plasma); }

/* Emergência */
.btn-emergencia{
  position:relative; overflow:hidden;
  width:100%; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:21px 20px; border-radius:var(--r-m); margin-bottom:14px;
  background:linear-gradient(180deg, #FFD87A 0%, var(--ouro) 55%, #F0A62E 100%);
  color:#1A1200;
  box-shadow:0 0 0 1px rgba(255,194,74,.35), 0 18px 44px -18px rgba(255,194,74,.7);
  animation:brilho-emergencia 3.4s ease-in-out infinite;
}
.btn-emergencia:active{ transform:scale(.98); }
.btn-emergencia-topo{ font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:.16em; }
.btn-emergencia-sub{ font-size:12px; font-weight:500; opacity:.72; }
/* reflexo que atravessa o botão de vez em quando */
.btn-emergencia::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:reflexo 5.5s ease-in-out infinite;
}

/* Números */
.grade-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.stat{
  background:var(--card); border:1px solid var(--linha); border-radius:var(--r-m);
  padding:14px 8px; text-align:center;
}
.stat-num{
  display:block; font-family:var(--mono); font-weight:700; font-size:22px; color:var(--branco); line-height:1.15;
}
.stat-num-texto{ font-family:var(--disp); font-size:14px; letter-spacing:-.01em; }
.stat-rotulo{ display:block; margin-top:5px; font-size:10.5px; color:var(--mudo); line-height:1.3; }

/* ==================================================================
   07. TELA REGISTROS
   ================================================================== */
.resumo-linha{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:16px; }

.grafico{ margin-bottom:22px; }
.grafico-titulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mudo); margin-bottom:13px;
}
.grafico-item{ margin-bottom:12px; }
.grafico-topo{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.grafico-nome{ font-size:13.5px; color:var(--corpo); }
.grafico-valor{ font-family:var(--mono); font-size:12px; color:var(--lima); }
.grafico-trilho{ height:8px; background:#1A1F25; border-radius:99px; overflow:hidden; border:1px solid var(--linha); }
.grafico-preenchido{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, rgba(78,240,122,.85), var(--lima));
  animation:crescer .7s var(--ease) both;
  transform-origin:left;
}
.grafico-item.destaque .grafico-nome{ color:var(--branco); font-weight:600; }

.registro{
  background:var(--card); border:1px solid var(--linha); border-radius:var(--r-m);
  padding:15px; margin-bottom:10px;
}
.registro-topo{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px; }
.registro-data{ font-family:var(--mono); font-size:11.5px; color:var(--mudo); letter-spacing:.06em; }
.registro-dur{ font-family:var(--mono); font-size:12.5px; color:var(--lima); font-weight:500; }
.registro-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:11.5px; padding:4px 10px; border-radius:99px;
  background:rgba(198,255,58,.07); border:1px solid rgba(198,255,58,.2); color:#D5E8A8;
}
.registro-nota{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--linha);
  font-size:13.5px; color:var(--corpo); font-style:italic;
}
.registro-vitoria{ border-color:rgba(78,240,122,.28); }
.registro-vitoria .registro-dur{ color:var(--plasma); }

/* ==================================================================
   08. TELA HONRA
   ================================================================== */
.honra-destaque{
  display:flex; align-items:center; gap:16px;
  padding:20px; margin-bottom:18px;
  border:1px solid var(--linha); border-radius:var(--r-g);
  background:linear-gradient(180deg, var(--card), var(--bg-2));
}
.honra-destaque .patente-insignia{ width:84px; height:100px; }
.honra-destaque-num{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--ouro); line-height:1; }

.trilha{ position:relative; padding-left:6px; }
.trilha-item{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:10px 12px; margin-bottom:7px;
  border:1px solid var(--linha); border-radius:var(--r-m);
  background:var(--card);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.trilha-item .mini-insignia{ width:38px; height:45px; flex:0 0 auto; opacity:.38; filter:grayscale(1); transition:opacity .3s var(--ease), filter .3s var(--ease); }
.trilha-item.conquistada .mini-insignia{ opacity:1; filter:none; }
.trilha-item.atual{
  border-color:rgba(198,255,58,.5);
  background:linear-gradient(90deg, rgba(198,255,58,.08), var(--card) 60%);
}
.trilha-item.atual .mini-insignia{ opacity:1; filter:none; }
.trilha-nome{ font-family:var(--disp); font-weight:600; font-size:15px; color:var(--corpo); }
.trilha-item.conquistada .trilha-nome, .trilha-item.atual .trilha-nome{ color:var(--branco); }
.trilha-req{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--mudo); margin-top:2px; }
.trilha-marca{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  padding:4px 9px; border-radius:99px; white-space:nowrap;
}
.trilha-item.atual .trilha-marca{ color:#0A0C06; background:var(--lima); }
.trilha-item.conquistada .trilha-marca{ color:var(--plasma); border:1px solid rgba(78,240,122,.3); }

.grade-medalhas{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.medalha{
  position:relative; overflow:hidden;
  padding:16px 14px; text-align:center;
  border:1px solid var(--linha); border-radius:var(--r-m);
  background:var(--card);
}
.medalha-ico{
  width:46px; height:46px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; border-radius:50%;
  background:#171C22; border:1px solid var(--linha);
  filter:grayscale(1); opacity:.42;
}
.medalha-nome{ font-family:var(--disp); font-weight:600; font-size:14px; color:var(--mudo); }
.medalha-cond{ font-size:11.5px; color:#6B737D; margin-top:4px; line-height:1.4; }
.medalha.ganha{ border-color:rgba(255,194,74,.32); background:linear-gradient(180deg, rgba(255,194,74,.07), var(--card) 70%); }
.medalha.ganha .medalha-ico{
  filter:none; opacity:1;
  border-color:rgba(255,194,74,.45);
  background:radial-gradient(circle at 50% 35%, rgba(255,194,74,.28), #1A1508);
  box-shadow:0 0 22px -4px rgba(255,194,74,.5);
}
.medalha.ganha .medalha-nome{ color:var(--branco); }
.medalha.ganha .medalha-cond{ color:var(--ouro); }

/* ==================================================================
   09. TELA HÁBITOS
   ================================================================== */
.habito{
  display:flex; align-items:center; gap:13px;
  padding:14px; margin-bottom:10px;
  border:1px solid var(--linha); border-radius:var(--r-m);
  background:var(--card);
  transition:border-color .25s var(--ease);
}
.habito.feito{ border-color:rgba(78,240,122,.35); background:linear-gradient(90deg, rgba(78,240,122,.07), var(--card) 65%); }
.habito-ico{
  width:44px; height:44px; flex:0 0 auto; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:#171C22; border:1px solid var(--linha);
}
.habito-meio{ flex:1; min-width:0; }
.habito-nome{ font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--branco); }
.habito-info{ display:flex; flex-wrap:wrap; gap:9px; margin-top:3px; font-family:var(--mono); font-size:10.5px; color:var(--mudo); letter-spacing:.06em; }
.habito-info b{ color:var(--lima); font-weight:500; }
.habito-marcar{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--linha-forte); background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  transition:all .22s var(--ease);
}
.habito-marcar svg{ width:20px; height:20px; fill:none; stroke:var(--mudo); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.habito.feito .habito-marcar{ background:var(--plasma); border-color:var(--plasma); box-shadow:0 0 20px -5px var(--plasma); }
.habito.feito .habito-marcar svg{ stroke:#04180C; }
.habito-marcar:active{ transform:scale(.9); }
.habito-editar{ padding:8px; color:var(--mudo); }
.habito-editar svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

.habito-folga{ opacity:.55; }
.habito-folga .habito-marcar{ opacity:.5; }

.dias-semana{ display:flex; gap:5px; }
.dia-botao{
  flex:1; padding:9px 0; border-radius:10px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  border:1px solid var(--linha); background:var(--bg-2); color:var(--mudo);
  transition:all .18s var(--ease);
}
.dia-botao.ligado{ background:rgba(198,255,58,.14); border-color:var(--lima); color:var(--lima); }

.sugestoes{ display:flex; flex-wrap:wrap; gap:7px; margin-top:-4px; margin-bottom:14px; }
.sugestao{
  padding:7px 12px; border-radius:99px; font-size:12.5px;
  border:1px solid var(--linha); background:var(--bg-2); color:var(--corpo);
}
.sugestao:active{ border-color:var(--lima); }

/* ==================================================================
   10. TELA AJUSTES
   ================================================================== */
.bloco-ajuste{
  border:1px solid var(--linha); border-radius:var(--r-g);
  background:var(--card); padding:18px; margin-bottom:14px;
}
.bloco-ajuste h3{ font-size:16px; font-weight:600; margin-bottom:4px; }
.bloco-ajuste .ajuste-desc{ font-size:13px; color:var(--mudo); margin-bottom:14px; }

.frase-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; margin-bottom:8px;
  border:1px solid var(--linha); border-radius:var(--r-p); background:var(--bg-2);
  font-size:13.5px; color:var(--corpo);
}
.frase-texto{ flex:1; }
.frase-apagar{ color:var(--mudo); padding:2px 4px; font-size:16px; line-height:1; }
.frase-apagar:active{ color:var(--vermelho); }
.frase-minha{ border-color:rgba(78,240,122,.3); }
.frase-minha .frase-texto::after{
  content:'SUA'; display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:var(--plasma);
  padding:2px 6px; border-radius:99px; border:1px solid rgba(78,240,122,.3);
}

.linha-botoes{ display:flex; gap:9px; flex-wrap:wrap; }
.linha-botoes .btn{ flex:1; min-width:140px; padding:13px 18px; font-size:14px; }

.sobre{ text-align:center; padding:8px 0 4px; color:var(--mudo); font-size:12px; }
.sobre b{ font-family:var(--mono); color:var(--corpo); letter-spacing:.1em; }

/* ==================================================================
   11. MODO EMERGÊNCIA
   ================================================================== */
.emergencia{
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(255,194,74,.1), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(78,240,122,.08), transparent 70%),
    #05060800;
  background-color:#050608;
  overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 54px) var(--gut) calc(env(safe-area-inset-bottom) + 30px);
  animation:entrar-forte .4s var(--forte) both;
}
.emg-sair{
  position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:14px;
  font-size:13px; color:#5F666F; padding:8px 12px;
  border:1px solid var(--linha); border-radius:99px;
}
.emg-corpo{ max-width:420px; margin-inline:auto; text-align:center; }
.emg-rotulo{ color:var(--ouro); margin-bottom:18px; }

.emg-frase{
  margin:0 0 10px; padding:0;
  font-family:var(--disp); font-weight:600;
  font-size:clamp(21px, 6.4vw, 27px); line-height:1.3; letter-spacing:-.02em;
  color:var(--branco);
  text-shadow:0 0 40px rgba(78,240,122,.3);
  animation:subir .5s var(--ease) both;
}
.emg-trocar{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mudo); padding:6px; margin-bottom:22px; }

.emg-relogio{ position:relative; width:min(260px, 72vw); margin:0 auto 24px; }
.emg-anel{ width:100%; height:auto; transform:rotate(-90deg); }
.anel-trilho{ fill:none; stroke:#181D23; stroke-width:8; }
.anel-ativo{
  fill:none; stroke:url(#grad-anel); stroke-width:8; stroke-linecap:round;
  stroke:var(--ouro);
  filter:drop-shadow(0 0 10px rgba(255,194,74,.55));
  transition:stroke-dashoffset 1s linear, stroke .6s var(--ease);
}
.emergencia.quase .anel-ativo{ stroke:var(--plasma); filter:drop-shadow(0 0 12px rgba(78,240,122,.6)); }
.emg-tempo{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.emg-tempo span{
  font-family:var(--mono); font-weight:700; font-size:clamp(38px, 12vw, 52px);
  color:var(--branco); font-variant-numeric:tabular-nums; line-height:1;
}
.emg-tempo small{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mudo); }

.emg-acao{
  padding:16px; margin-bottom:14px;
  border:1px solid rgba(78,240,122,.25); border-radius:var(--r-m);
  background:rgba(78,240,122,.05);
}
.emg-acao-titulo{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--plasma); margin-bottom:7px; }
.emg-acao-texto{ font-family:var(--disp); font-size:17px; font-weight:600; color:var(--branco); }
.emg-acao-trocar{ font-size:11.5px; color:var(--mudo); margin-top:8px; text-decoration:underline; text-underline-offset:3px; }

.emergencia .btn-largo{ margin-bottom:10px; }

/* ==================================================================
   12. CAIXAS DE DIÁLOGO E AVISOS
   ================================================================== */
.modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,5,7,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:0; overflow-y:auto;
  animation:aparecer .22s var(--ease) both;
}
.modal-caixa{
  width:100%; max-width:480px;
  background:var(--card); border:1px solid var(--linha);
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom));
  animation:subir-modal .32s var(--forte) both;
  max-height:92dvh; overflow-y:auto;
}
.modal-puxador{ width:40px; height:4px; border-radius:99px; background:var(--linha-forte); margin:-8px auto 18px; }
.modal-titulo{ font-size:21px; font-weight:700; letter-spacing:-.025em; margin-bottom:8px; }
.modal-texto{ font-size:14.5px; color:var(--corpo); margin-bottom:20px; }
.modal-acoes{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.modal-acoes .btn{ width:100%; }

/* escolhas de gatilho */
.escolhas{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.escolha{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px; text-align:left;
  border:1px solid var(--linha); border-radius:var(--r-p); background:var(--bg-2);
  font-size:14px; color:var(--corpo);
  transition:all .18s var(--ease);
}
.escolha i{
  width:19px; height:19px; flex:0 0 auto; border-radius:6px;
  border:1.5px solid var(--linha-forte); position:relative;
}
.escolha.marcada{ border-color:var(--lima); background:rgba(198,255,58,.08); color:var(--branco); }
.escolha.marcada i{ background:var(--lima); border-color:var(--lima); }
.escolha.marcada i::after{
  content:''; position:absolute; left:5.5px; top:2px; width:5px; height:10px;
  border:solid #0A0C06; border-width:0 2px 2px 0; transform:rotate(43deg);
}

/* Avisos de conquista */
.avisos{
  position:fixed; z-index:400; left:0; right:0;
  top:calc(env(safe-area-inset-top) + 10px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 var(--gut); pointer-events:none;
}
.aviso{
  width:100%; max-width:420px;
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:var(--r-m);
  background:linear-gradient(135deg, var(--card-alto), var(--card));
  border:1px solid var(--linha-forte);
  box-shadow:0 22px 48px -20px #000;
  animation:aviso-entra .5s var(--forte) both;
}
.aviso.saindo{ animation:aviso-sai .35s var(--ease) both; }
.aviso-ico{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.aviso-corpo{ flex:1; min-width:0; }
.aviso-rotulo{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.aviso-titulo{ font-family:var(--disp); font-weight:700; font-size:16px; color:var(--branco); margin-top:2px; letter-spacing:-.01em; }
.aviso-texto{ font-size:12px; color:var(--mudo); margin-top:1px; }

.aviso.patente{ border-color:rgba(198,255,58,.4); }
.aviso.patente .aviso-ico{ background:radial-gradient(circle at 50% 35%, rgba(198,255,58,.3), #141A08); box-shadow:0 0 24px -6px var(--lima); }
.aviso.patente .aviso-rotulo{ color:var(--lima); }
.aviso.patente .aviso-ico svg{ width:30px; height:34px; }

.aviso.medalha-aviso{ border-color:rgba(255,194,74,.4); }
.aviso.medalha-aviso .aviso-ico{ background:radial-gradient(circle at 50% 35%, rgba(255,194,74,.32), #1A1508); box-shadow:0 0 24px -6px var(--ouro); }
.aviso.medalha-aviso .aviso-rotulo{ color:var(--ouro); }

.aviso.honra{ border-color:rgba(78,240,122,.35); }
.aviso.honra .aviso-ico{ background:radial-gradient(circle at 50% 35%, rgba(78,240,122,.28), #04180C); box-shadow:0 0 24px -6px var(--plasma); }
.aviso.honra .aviso-rotulo{ color:var(--plasma); }

/* Comemoração de crise vencida */
.vitoria-tela{
  position:fixed; inset:0; z-index:350;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:radial-gradient(60% 45% at 50% 45%, rgba(78,240,122,.18), rgba(5,6,8,.97) 70%);
  text-align:center; padding:var(--gut);
  animation:aparecer .3s var(--ease) both;
}
.vitoria-anel{
  position:absolute; width:180px; height:180px; border-radius:50%;
  border:2px solid var(--plasma); opacity:0;
  animation:onda 2.2s var(--ease) infinite;
}
.vitoria-anel:nth-child(2){ animation-delay:.45s; }
.vitoria-anel:nth-child(3){ animation-delay:.9s; }
.vitoria-selo{
  position:relative; width:96px; height:96px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  background:radial-gradient(circle at 50% 35%, rgba(78,240,122,.35), #06210F);
  border:1px solid rgba(78,240,122,.5);
  box-shadow:0 0 50px -8px var(--plasma);
  animation:selo-entra .6s var(--forte) both;
}
.vitoria-selo svg{ width:44px; height:44px; fill:none; stroke:var(--plasma); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.vitoria-titulo{ font-family:var(--disp); font-size:27px; font-weight:700; color:var(--branco); letter-spacing:-.02em; animation:subir .5s .12s var(--ease) both; }
.vitoria-texto{ font-size:14.5px; color:var(--corpo); max-width:300px; animation:subir .5s .2s var(--ease) both; }
.vitoria-pontos{
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--plasma); margin-top:14px;
  padding:7px 14px; border:1px solid rgba(78,240,122,.3); border-radius:99px;
  animation:subir .5s .28s var(--ease) both;
}

/* ==================================================================
   13. ANIMAÇÕES
   ================================================================== */
@keyframes entrar{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
@keyframes entrar-forte{ from{ opacity:0; transform:scale(1.04);} to{ opacity:1; transform:none; } }
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }
@keyframes subir{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
@keyframes subir-modal{ from{ transform:translateY(100%);} to{ transform:none; } }
@keyframes crescer{ from{ transform:scaleX(0);} to{ transform:scaleX(1); } }
@keyframes pulsar{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes respirar{ from{ opacity:.75; transform:translateY(-6px) scale(1);} to{ opacity:1; transform:translateY(6px) scale(1.06); } }
@keyframes batida{ 0%{ transform:scale(1);} 22%{ transform:scale(1.07); color:var(--plasma);} 100%{ transform:scale(1);} }
@keyframes reflexo{ 0%,68%{ left:-60%; } 92%,100%{ left:120%; } }
@keyframes brilho-emergencia{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,194,74,.35), 0 18px 44px -18px rgba(255,194,74,.65); }
  50%{ box-shadow:0 0 0 1px rgba(255,194,74,.55), 0 20px 54px -16px rgba(255,194,74,.95); }
}
@keyframes aviso-entra{ from{ opacity:0; transform:translateY(-26px) scale(.96);} to{ opacity:1; transform:none; } }
@keyframes aviso-sai{ to{ opacity:0; transform:translateY(-18px) scale(.97); } }
@keyframes onda{ 0%{ opacity:.7; transform:scale(.5);} 100%{ opacity:0; transform:scale(2.1); } }
@keyframes selo-entra{ from{ opacity:0; transform:scale(.4) rotate(-12deg);} to{ opacity:1; transform:none; } }
@keyframes girar-lento{ to{ transform:rotate(360deg); } }

/* ==================================================================
   14. COMPUTADOR
   ================================================================== */
@media (min-width:860px){
  :root{ --gut:26px; }

  .nav{
    top:0; right:auto; width:104px; height:100dvh;
    flex-direction:column; justify-content:center; gap:6px;
    padding:0; border-top:0; border-right:1px solid var(--linha);
    background:rgba(7,8,10,.72);
  }
  .nav-item{ flex:0 0 auto; padding:14px 0; gap:6px; }
  .nav-item svg{ width:22px; height:22px; }
  .nav-item span{ font-size:10.5px; }

  .app{ padding-left:104px; padding-bottom:0; }
  /* alinha o topo com a coluna de conteúdo, sem perder o fundo inteiro */
  .topo{ padding-inline:max(32px, calc((100% - 620px) / 2)); }
  .palco{ max-width:620px; padding-bottom:60px; }

  .grade-medalhas{ grid-template-columns:repeat(3,1fr); }
  .btn-emergencia{ cursor:pointer; }
  .btn:hover{ transform:translateY(-2px); }
  .painel:hover{ border-color:#2A2F36; }
  .habito:hover, .trilha-item:hover, .medalha:hover{ border-color:var(--linha-forte); }
  .modal{ align-items:center; }
  .modal-caixa{ border-radius:var(--r-g); animation:entrar-forte .3s var(--forte) both; }
  .modal-puxador{ display:none; }
  .onboarding{ align-items:center; }
  .emergencia{ padding-top:72px; }
}

/* Telas muito baixas (celular pequeno deitado) */
@media (max-height:620px){
  .emg-relogio{ width:min(190px, 48vw); }
  .partida-arte{ height:130px; }
}

/* ==================================================================
   15. MENOS MOVIMENTO
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .luz-fundo{ animation:none; }
}