@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root{
  --rc-green-950:#0c2e27;
  --rc-green-900:#123d32;
  --rc-green-800:#18503f;
  --rc-green-700:#21664f;
  --rc-green-600:#2d7a5e;
  --rc-green-100:#dff0e7;
  --rc-green-50:#eef7f2;
  --rc-gold-700:#9c742a;
  --rc-gold-500:#d1a347;
  --rc-gold-100:#f8edcf;
  --rc-cream:#fbfaf6;
  --rc-paper:#ffffff;
  --rc-ink:#1e2b27;
  --rc-muted:#65736e;
  --rc-line:#dfe7e2;
  --rc-danger:#c9443b;
  --rc-danger-soft:#fce9e7;
  --rc-success-soft:#e2f2e9;
  --rc-shadow:0 18px 46px rgba(18,61,50,.10);
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--rc-cream)}
body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 8% 8%,rgba(223,240,231,.92),transparent 30rem),
    radial-gradient(circle at 92% 14%,rgba(248,237,207,.76),transparent 30rem),
    var(--rc-cream);
  color:var(--rc-ink);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.container{
  width:min(100% - 32px,980px);
  max-width:980px;
  margin:0 auto;
}

.container.py-5{
  padding-top:28px!important;
  padding-bottom:42px!important;
}

h1{
  position:relative;
  margin:0 0 18px!important;
  padding:34px 34px 30px;
  border:1px solid #d5e4dc;
  border-radius:24px;
  background:linear-gradient(120deg,rgba(238,247,242,.96),rgba(248,237,207,.72));
  box-shadow:var(--rc-shadow);
  color:var(--rc-green-950);
  font-size:clamp(34px,5vw,54px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.04em;
  text-shadow:none;
}

h1::before{
  display:block;
  margin-bottom:10px;
  color:var(--rc-green-700);
  content:"DESAFIO DE CATEQUESE";
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
}

h1::after{
  display:block;
  width:58px;
  height:3px;
  margin:16px auto 0;
  border-radius:999px;
  background:var(--rc-gold-500);
  content:"";
}

h3{color:var(--rc-green-950);text-shadow:none}

.step{display:none}
.step.active{display:block}

#step-inicio,
#step-resultado{
  padding:28px;
  border:1px solid var(--rc-line);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--rc-shadow);
}

#step-inicio::before{
  display:block;
  margin-bottom:22px;
  color:var(--rc-muted);
  content:"Informe os dados abaixo, escolha um nível e comece o desafio.";
  font-size:14px;
}

.form-label{
  margin-bottom:7px;
  color:var(--rc-green-950);
  font-size:13px;
  font-weight:800;
}

.form-control,
.form-select{
  min-height:48px;
  border:1px solid #cad9d1;
  border-radius:12px;
  background:#fff;
  color:var(--rc-ink);
  font-family:inherit;
  box-shadow:none;
}

.form-control::placeholder{color:#8a9691}
.form-control:hover,
.form-select:hover,
.form-control:focus,
.form-select:focus{
  border-color:var(--rc-green-600);
  background:#fff;
  color:var(--rc-ink);
  box-shadow:0 0 0 4px rgba(45,122,94,.09);
}

.form-select option{background:#fff;color:var(--rc-ink)}

.btn{
  min-height:46px;
  border-radius:12px;
  padding:.65rem 1.15rem;
  font-family:inherit;
  font-weight:800;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-1px)}

.btn-verde,
.btn-success{
  background:var(--rc-green-700)!important;
  border-color:var(--rc-green-700)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(33,102,79,.16);
}
.btn-verde:hover,.btn-verde:focus,.btn-success:hover,.btn-success:focus{
  background:var(--rc-green-800)!important;
  border-color:var(--rc-green-800)!important;
}

#step-quiz .card{
  margin-top:0;
}

.card{
  border:1px solid var(--rc-line);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  color:var(--rc-ink);
  box-shadow:var(--rc-shadow);
  overflow:hidden;
}

.card-body{padding:28px}
.card-title{
  margin-bottom:22px;
  color:var(--rc-green-950);
  font-size:clamp(22px,2.7vw,30px);
  font-weight:600;
  line-height:1.35;
}

.list-group{gap:10px}
.list-group-item{
  cursor:pointer;
  margin:0;
  border:1px solid var(--rc-line)!important;
  border-radius:12px!important;
  background:var(--rc-green-50);
  color:var(--rc-ink);
  padding:14px 16px;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.list-group-item:hover{
  border-color:#b9d2c4!important;
  background:#e7f3ec;
  transform:translateY(-1px);
}
.list-group-item.answer-correct{
  border-color:#a8d5bd!important;
  background:var(--rc-success-soft);
  color:var(--rc-green-950);
  font-weight:800;
}
.list-group-item.answer-wrong{
  border-color:#e8b4af!important;
  background:var(--rc-danger-soft);
  color:#8e2f2a;
  font-weight:800;
}
.list-group-item.disabled{pointer-events:none;opacity:.78}
.list-group-item.answer-correct.disabled,.list-group-item.answer-wrong.disabled{opacity:1}

.text-muted{
  color:var(--rc-gold-700)!important;
  line-height:1.65;
}

#proxima{margin-top:22px!important}

#step-resultado h3{
  margin-bottom:20px;
  font-size:clamp(26px,3vw,34px);
  font-weight:800;
  letter-spacing:-.03em;
}
#resumo>p{margin-bottom:10px}
#resumo>p em{
  display:block;
  margin-top:8px;
  padding:16px 18px;
  border-radius:14px;
  background:var(--rc-gold-100);
  color:#765820;
}
#resumo hr{border-color:var(--rc-line);opacity:1}

/* A logomarca grande fazia parte do visual antigo do jogo. */
.logo{display:none!important}

@media (max-width:720px){
  .container{width:min(100% - 24px,980px)}
  .container.py-5{padding-top:16px!important;padding-bottom:28px!important}
  h1{
    margin-bottom:14px!important;
    padding:24px 22px 22px;
    border-radius:20px;
    font-size:36px;
  }
  h1::before{font-size:11px}
  #step-inicio,#step-resultado,.card-body{padding:20px}
  #step-inicio,.card,#step-resultado{border-radius:20px}
  .card-title{font-size:23px}
  .btn{width:100%}
}

.quiz-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn-fechar{
  border-color:#c9362d!important;
  background:#c9362d!important;
  color:#fff!important;
}
.btn-fechar:hover,.btn-fechar:focus{
  border-color:#a92d26!important;
  background:#a92d26!important;
  color:#fff!important;
}

@keyframes close-button-pulse{
  0%,100%{box-shadow:0 8px 20px rgba(201,54,45,.22),0 0 0 0 rgba(201,54,45,.22)}
  50%{box-shadow:0 10px 24px rgba(201,54,45,.30),0 0 0 6px rgba(201,54,45,.10)}
}

html.dedicated-game-window,
body.dedicated-game-window{min-height:100%}
body.dedicated-game-window{min-height:100dvh}
body.dedicated-game-window .container{
  width:min(1440px,calc(100% - 24px));
  max-width:1440px;
}
body.dedicated-game-window .container.py-5{
  padding-top:18px!important;
  padding-bottom:28px!important;
}
body.dedicated-game-window h1{
  display:none!important;
}
body.dedicated-game-window #btnFechar,
body.dedicated-game-window #btnFecharResultado{
  animation:close-button-pulse 1.8s ease-in-out infinite;
}

@media (max-width:720px){
  .quiz-actions{display:grid;grid-template-columns:1fr;gap:10px}
}