:root{
  --teal: #2e8b96;
  --teal-dark: #1f6a73;
  --coral: #e85a6a;
  --coral-dark: #d43f50;
  --cream: #fdf9f2;
  --ink: #2b2b2b;
  --verde: #4caf50;
  --verde-dark: #3d8c40;
  --amarelo: #ffc107;
  --amarelo-dark: #d9a406;
  --vermelho: #f44336;
  --vermelho-dark: #cc3025;
  --radius: 20px;
  --sombra: 0 8px 24px rgba(43,43,43,0.08);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family:'Nunito', sans-serif;
  background: linear-gradient(180deg, #fdf9f2 0%, #f3ede0 100%);
  color: var(--ink);
  min-height:100vh;
}

.page{
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.btn-voltar{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size:13px;
  color: var(--teal-dark);
  text-decoration:none;
  background: white;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: var(--sombra);
  margin-bottom: 14px;
  transition: transform .1s ease, background .2s ease;
}
.btn-voltar:hover{ background:#eaf4f4; transform: translateX(-2px); }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:48px; height:48px; border-radius:50%;
  background: white;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  box-shadow: var(--sombra);
  padding:4px;
}
.brand-mark img{
  width:100%; height:100%; object-fit:contain;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ color: var(--teal-dark); font-family:'Baloo 2', sans-serif; }
.brand-text span{ font-size:12px; color:#7a7a7a; }

.legend-chip{
  display:flex; gap:6px; background:#1a1a1a; padding:6px 10px; border-radius: 20px;
}
.legend-chip .dot{
  width:12px; height:12px; border-radius:50%;
  opacity:.28;
  animation: piscar-semaforo 3s infinite;
}
.dot.verde{ background: var(--verde); animation-delay: 0s; }
.dot.amarelo{ background: var(--amarelo); animation-delay: 1s; }
.dot.vermelho{ background: var(--vermelho); animation-delay: 2s; }

@keyframes piscar-semaforo{
  0%   { opacity:.28; box-shadow:none; }
  10%  { opacity:1; box-shadow: 0 0 8px 2px currentColor; }
  33%  { opacity:1; box-shadow: 0 0 8px 2px currentColor; }
  43%  { opacity:.28; box-shadow:none; }
  100% { opacity:.28; box-shadow:none; }
}
.dot.verde{ color: var(--verde); }
.dot.amarelo{ color: var(--amarelo); }
.dot.vermelho{ color: var(--vermelho); }

/* Telas */
.tela{ display:none; animation: entrar .35s ease; }
.tela.ativa{ display:block; }
@keyframes entrar{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

h1{
  font-family:'Baloo 2', sans-serif;
  font-size: 40px;
  color: var(--teal-dark);
  margin-bottom: 4px;
}
h1 .destaque{ color: var(--coral); }
h2{ font-family:'Baloo 2', sans-serif; color: var(--teal-dark); font-size: 30px; margin-bottom:4px; }
.subtitulo{ color:#6b6b6b; font-size:17px; margin-top:0; margin-bottom:22px; font-weight:600; }

.cartao-explicacao{
  background:white;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--sombra);
  margin-bottom: 24px;
}
.cartao-explicacao p{ line-height:1.55; }

.semaforo-legenda{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.item-legenda{
  display:grid;
  grid-template-columns: 120px 1fr;
  align-items:start;
  gap: 14px;
}
.legenda-textos p{ margin:0 0 8px; font-size:14px; color:#555; line-height:1.4; }
.legenda-textos p:last-child{ margin-bottom:0; }
.luz{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  text-align:center;
  padding: 10px 6px;
  border-radius: 12px;
  color:white;
}
.luz.verde{ background: var(--verde); }
.luz.amarelo{ background: var(--amarelo); color:#4a3900; }
.luz.vermelho{ background: var(--vermelho); }

.botao-principal{
  display:block;
  width:100%;
  background: var(--coral);
  color:white;
  border:none;
  padding: 16px 20px;
  font-family:'Baloo 2', sans-serif;
  font-size: 19px;
  font-weight:700;
  border-radius: 16px;
  cursor:pointer;
  box-shadow: 0 6px 0 var(--coral-dark);
  transition: transform .08s ease, opacity .2s ease;
}
.botao-principal:active{ transform: translateY(4px); box-shadow: 0 2px 0 var(--coral-dark); }
.botao-principal:disabled{
  background:#d8cfc0; box-shadow:0 6px 0 #bdb29d; cursor:not-allowed; opacity:.8;
}

.botao-secundario{
  background: var(--teal);
  color:white;
  border:none;
  padding: 12px 18px;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 5px 0 var(--teal-dark);
  white-space:nowrap;
}
.botao-secundario:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--teal-dark); }
.botao-secundario:disabled{ opacity:.6; cursor:not-allowed; }

/* Selecao de personagem */
.rotulo-campo{
  font-family:'Baloo 2', sans-serif;
  color: var(--teal-dark);
  font-weight:700;
  display:block;
  margin-bottom:8px;
}
#input-nome-jogador{
  width:100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e0dcd0;
  font-family:'Nunito', sans-serif;
  font-size:16px;
}
.cards-personagem{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.card-personagem{
  background:#faf6ec;
  border: 3px solid transparent;
  border-radius: 18px;
  padding: 10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transition: border-color .2s ease, transform .1s ease;
}
.card-personagem img{
  width:100%;
  max-width:150px;
  height:auto;
}
.card-personagem span{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  color: var(--teal-dark);
}
.card-personagem:hover{ transform: translateY(-2px); }
.card-personagem.selecionado{
  border-color: var(--coral);
  background: #fff0ef;
}

/* Jogo */
.oculto{ display:none !important; }

.layout-jogo{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items:start;
}
.coluna-painel{ display:flex; flex-direction:column; gap:12px; }

.hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.progresso-wrap{ flex:1; margin-right:16px; }
#progresso-texto{ font-size:13px; font-weight:700; color:#7a7a7a; }
.barra-progresso{
  height:10px; background:#e6ddc9; border-radius:10px; margin-top:4px; overflow:hidden;
}
#barra-preenchida{
  height:100%; width:0%; background: var(--teal); transition: width .3s ease;
}
.pontuacao{
  font-family:'Baloo 2', sans-serif; font-weight:700; color: var(--coral-dark);
  background:white; padding:8px 14px; border-radius:14px; box-shadow: var(--sombra);
}

.instrucao{
  margin:0;
  text-align:left; font-weight:700; color: var(--teal-dark);
  background:#eaf4f4; padding:10px 16px; border-radius:14px;
  line-height:1.35;
}

.area-jogo{
  background:white;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 20px;
  display:flex;
  justify-content:center;
  margin: 16px 0;
}
.coluna-personagem .area-jogo{ margin:0; }
.area-jogo.pequena .boneco-wrap{ width: min(100%, 260px); }

/* A largura acompanha a altura da tela, para o personagem caber sem rolar a página */
.boneco-wrap{
  --ratio: .5;
  position:relative;
  width: min(100%, 360px, max(200px, calc((100vh - 230px) * var(--ratio))));
  margin: 0 auto;
}
.boneco-wrap img{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  pointer-events:none;
}

#zonas-container, #zonas-container-gabarito{
  position:absolute;
  inset:0;
}

.zona{
  position:absolute;
  transform: translate(-50%,-50%);
  min-width:22px;
  border-radius:50%;
  background: rgba(255,255,255,0.8);
  border: 2px dashed #6b6b6b;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 1px 5px rgba(0,0,0,.3);
  cursor:pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
}
.zona:hover{ border-color: var(--teal); transform: translate(-50%,-50%) scale(1.08); }
.zona.respondida{ cursor:default; border-style:solid; border-color:#3a3a3a; }
.zona.selecionada{ border-style:solid; border-color: var(--coral); border-width:3px; background:#fff; box-shadow: 0 0 0 4px rgba(232,90,106,.4), 0 1px 5px rgba(0,0,0,.3); }
.zona.cor-verde{ background: var(--verde); }
.zona.cor-amarelo{ background: var(--amarelo); }
.zona.cor-vermelho{ background: var(--vermelho); }

/* Legenda do semáforo (também são os botões de resposta) */
.painel-resposta{
  background:white;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 12px;
}
.opcoes-cor{ display:flex; flex-direction:column; gap:10px; }
.opcao{
  display:grid;
  grid-template-columns: 96px 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:#fff;
  border:2px solid #ece6d8;
  border-radius:14px;
  padding:8px;
  font:inherit;
  color: var(--ink);
  cursor:pointer;
  transition: border-color .15s ease, transform .08s ease, opacity .2s ease;
}
.opcao-titulo{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  line-height:1.15;
  text-align:center;
  padding:11px 4px;
  border-radius:10px;
  color:white;
}
.opcao.verde .opcao-titulo{ background: var(--verde); }
.opcao.amarelo .opcao-titulo{ background: var(--amarelo); color:#4a3900; }
.opcao.vermelho .opcao-titulo{ background: var(--vermelho); }
.opcao-desc{ font-size:13px; font-weight:600; color:#555; line-height:1.35; }
.opcao:not(:disabled):hover{ transform: translateY(-1px); }
.opcao.verde:not(:disabled):hover{ border-color: var(--verde); }
.opcao.amarelo:not(:disabled):hover{ border-color: var(--amarelo); }
.opcao.vermelho:not(:disabled):hover{ border-color: var(--vermelho); }
.opcao:not(:disabled):active{ transform: translateY(2px); }
.opcao:not(:disabled){ border-color:#d8cdb4; box-shadow: 0 3px 0 #e3dcc9; }
.opcao:disabled{ cursor:not-allowed; opacity:.85; }

/* Caixa de mensagem após cada resposta */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: rgba(31,46,50,.55);
}
.modal-caixa{
  position:relative;
  width:100%; max-width:440px;
  max-height: calc(100vh - 40px);
  overflow:auto;
  background:white;
  border-radius:22px;
  border-top:10px solid var(--teal);
  padding:24px 24px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  animation: abrir-modal .22s ease;
}
.modal-caixa[data-cor="verde"]{ border-top-color: var(--verde); }
.modal-caixa[data-cor="amarelo"]{ border-top-color: var(--amarelo); }
.modal-caixa[data-cor="vermelho"]{ border-top-color: var(--vermelho); }
@keyframes abrir-modal{ from{ opacity:0; transform: translateY(10px) scale(.97);} to{ opacity:1; transform:none; } }

.modal-fechar{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px;
  border:none; border-radius:50%;
  background:#f3ede0; color:#555;
  font-size:26px; line-height:1;
  cursor:pointer;
}
.modal-fechar:hover{ background:#e8dfcc; }

.feedback-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin: 0 44px 10px 0; }
.feedback-parte{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px; color: var(--teal-dark); }
.feedback-pill{
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:12px;
  color:white; padding:4px 10px; border-radius:999px;
}
.feedback-pill.cor-verde{ background: var(--verde); }
.feedback-pill.cor-amarelo{ background: var(--amarelo); color:#4a3900; }
.feedback-pill.cor-vermelho{ background: var(--vermelho); }

.feedback-titulo{ font-family:'Baloo 2', sans-serif; font-size:26px; line-height:1.15; margin:0 0 8px; color: var(--ink); }
.feedback-texto{ font-size:16px; line-height:1.5; margin:0 0 14px; }
.feedback-reforco{
  margin:0 0 16px;
  padding:10px 12px;
  background:#eef7ee;
  border-left:4px solid var(--verde);
  border-radius:10px;
  font-size:14px; line-height:1.45; color:#2f5d31;
}
body.modal-aberto{ overflow:hidden; }

.salvar-pontuacao{
  display:flex;
  gap:10px;
  margin: 20px 0 6px;
}
#salvar-status{ font-size:13px; color:#6b6b6b; min-height:18px; }

.rodape{
  text-align:center;
  font-size:12px;
  color:#9a9184;
  margin-top: 30px;
}

button:focus-visible, a:focus-visible, input:focus-visible, .zona:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
}

@media (max-width:619px){
  .item-legenda{ grid-template-columns: 96px 1fr; }

  /* No celular, a legenda/botões ficam fixos embaixo da tela */
  .layout-jogo{ grid-template-columns: 1fr; }
  .boneco-wrap{ width: min(100%, 340px); }
  .coluna-painel{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#fffdf8;
    border-radius:20px 20px 0 0;
    box-shadow: 0 -8px 24px rgba(43,43,43,.16);
  }
  .coluna-painel .painel-resposta{ padding:0; box-shadow:none; background:transparent; }
  .instrucao{ font-size:13px; padding:8px 12px; }
  .opcoes-cor{ flex-direction:row; gap:8px; }
  .opcao{ grid-template-columns:1fr; padding:0; border:none; background:transparent; }
  .opcao-desc{ display:none; }
  .opcao-titulo{ padding:14px 4px; font-size:12px; }
  body.jogando .page{ padding-bottom: 230px; }
}

@media (max-width:480px){
  h1{ font-size:32px; }
}

@media (prefers-reduced-motion: reduce){
  .legend-chip .dot{ animation:none; opacity:1; }
  .tela, .modal-caixa{ animation:none; }
}