* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --purple: #8b3dff;
    --pink: #ff3ea5;
    --blue: #238cff;
    --card: rgba(20, 10, 42, .94);
    --muted: #cfc5df;
    --success: #20d890;
    --danger: #ff5577
}

header {
    background-image: url(banner_quiz.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background: radial-gradient(circle at top left, rgba(139, 61, 255, .35), transparent 35%), radial-gradient(circle at bottom right, rgba(35, 140, 255, .25), transparent 35%), linear-gradient(135deg, #17002b, #3b075c 48%, #081f45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px
}

.quiz-container {
    width: 100%;
    max-width: 900px;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .45)
}

.hero {
    text-align: center;
    padding: 32px 24px 28px;
    

}

.logo {
    font-size: 44px
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
    margin: 5px 0
}

.hero p {
    margin-bottom: 7px
}

.hero small {
    opacity: .9
}

.screen {
    padding: 30px
}

.hidden {
    display: none !important
}

#start-screen {
    text-align: center
}

#start-screen h2 {
    font-size: 1.8rem;
    margin-bottom: 12px
}

#start-screen>p {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 25px
}

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 0 auto 24px;
    max-width: 650px
}

.options label {
    text-align: left;
    font-weight: bold
}

select {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #211033;
    color: #fff;
    font-size: 1rem
}

.primary-button,
.secondary-button {
    border: 0;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: .2s
}

.primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--pink))
}

.secondary-button {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18)
}

.primary-button:hover,
.secondary-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.12)
}

.muted {
    margin-top: 18px !important;
    font-size: .9rem;
    color: var(--muted)
}

.quiz-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: .95rem
}

.progress-container {
    width: 100%;
    height: 9px;
    background: rgba(255, 255, 255, .1);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 20px
}

#progress-bar {
    width: 10%;
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--pink), var(--blue));
    transition: width .3s
}

.question-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px
}

.question-meta span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .8rem
}

.question-box {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(139, 61, 255, .14), rgba(35, 140, 255, .09));
    border: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 20px
}

#question {
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    line-height: 1.4
}

.answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.answer {
    min-height: 70px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition: .2s
}

.answer:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(139, 61, 255, .2)
}

.answer:disabled {
    cursor: default
}

.letter {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    font-weight: bold
}

.answer-text {
    line-height: 1.3
}

.answer.correct {
    background: rgba(32, 216, 144, .2);
    border-color: var(--success)
}

.answer.wrong {
    background: rgba(255, 85, 119, .2);
    border-color: var(--danger)
}

.feedback {
    margin-top: 20px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    text-align: center
}

.feedback h3 {
    margin-bottom: 8px
}

.feedback p {
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 15px
}

#result {
    text-align: center
}

.result-icon {
    font-size: 60px;
    margin-bottom: 10px
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 25px 0
}

.result-grid div {
    padding: 18px 8px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1)
}

.result-grid strong {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 5px
}

.result-grid span {
    color: var(--muted);
    font-size: .85rem
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.back {
    display: block;
    width: max-content;
    margin: 42px auto 0;
    color: #BDB4C9;
    transition: .3s
}

.back:hover {
    color: #EC4899
}

footer {
    text-align: center;
    padding: 18px;
    color: #aaa0b8;
    font-size: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

@media(max-width:650px) {
    body {
        padding: 0;
        align-items: stretch
    }

    .quiz-container {
        min-height: 100vh;
        border-radius: 0
    }

    .screen {
        padding: 22px 16px
    }

    .options,
    .answers {
        grid-template-columns: 1fr
    }

    .quiz-info {
        font-size: .82rem
    }

    .question-box {
        min-height: 170px;
        padding: 20px 15px
    }

    .result-grid {
        grid-template-columns: 1fr 1fr
    }

    .result-actions button {
        width: 100%
    }
}
/* Fundos temáticos fornecidos pela usuária */
body{
  background-image:
    linear-gradient(rgba(7,3,20,.72),rgba(7,3,20,.84)),
    var(--quiz-bg, url("fundos/geek-geral.png"));
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.quiz-container{backdrop-filter:blur(4px)}
.question-visual{
  position:relative;
  width:100%;
  aspect-ratio:16/7;
  max-height:300px;
  overflow:hidden;
  border-radius:18px;
  margin:0 0 16px;
  background-image:var(--question-bg);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 35px rgba(0,0,0,.3)
}
.visual-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,3,25,.72),rgba(8,3,25,.04) 65%)}
.visual-label{position:absolute;left:14px;bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(10,4,28,.72);border:1px solid rgba(255,255,255,.18);font-weight:bold;font-size:.82rem}
@media(max-width:650px){.question-visual{aspect-ratio:16/9;max-height:220px;background-position:center}}

/* V2: pergunta sobreposta ao cenário */
.question-visual{
  min-height:310px;
  display:flex;
  align-items:flex-end;
  position:relative;
}
.question-visual .visual-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(7,3,22,.94) 0%,rgba(7,3,22,.72) 40%,rgba(7,3,22,.18) 76%,rgba(7,3,22,.05) 100%);
  z-index:1;
}
.question-overlay{
  position:relative;
  z-index:3;
  width:100%;
  padding:52px 28px 28px;
  text-align:center;
}
.question-overlay h2{
  margin:0 auto;
  max-width:850px;
  color:#fff;
  font-size:clamp(1.25rem,2.6vw,2rem);
  line-height:1.3;
  text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.75);
}
.question-visual .visual-label{
  z-index:4;
  top:12px;
  bottom:auto;
}
.question-box{display:none!important}
@media(max-width:650px){
  .question-visual{min-height:260px;aspect-ratio:auto}
  .question-overlay{padding:52px 16px 20px}
  .question-overlay h2{font-size:1.18rem}
}

/* HERO: somente a imagem fica opaca; texto permanece branco e nítido */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:none !important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("banner_quiz.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.38;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(8,3,24,.18);
  pointer-events:none;
}
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero span,
.hero a{
  opacity:1 !important;
  color:#fff !important;
  filter:none !important;
}

/* PERGUNTA: altura proporcional ao conteúdo */
.question-visual{
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:block !important;
  position:relative;
  overflow:hidden;
  padding:0;
}

/* A imagem continua preenchendo todo o bloco, mas o bloco cresce
   conforme a quantidade de linhas da pergunta. */
.question-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--question-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

.question-visual .visual-overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.question-overlay{
  position:relative;
  z-index:3;
  width:100%;
  min-height:150px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:58px 28px 28px !important;
}

.question-overlay h2{
  width:100%;
  margin:0 auto;
}

/* Etiqueta da categoria permanece no topo */
.question-visual .visual-label{
  position:absolute;
  z-index:4;
}

/* Celular: menor altura mínima e espaçamento */
@media(max-width:650px){
  .question-visual{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
  .question-overlay{
    min-height:125px;
    padding:50px 16px 20px !important;
  }
}


/* CORRECAO FINAL DOS FUNDOS DO QUIZ — 2026-09-26 */
body.quiz-geek-page {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.question-visual {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.question-visual::before {
  background-image: none !important;
  display: none !important;
}