:root{
  --font-ui: 'Montserrat', Arial, sans-serif;
  --font-kiki: 'Dancing Script', cursive;
  --white: #ffffff;
  --shadow:
    0 0 6px rgba(0,0,0,.78),
    0 0 14px rgba(0,0,0,.58);
}

*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#000;
  font-family:var(--font-ui);
}

body{
  position:relative;
  margin:0;
}

.stage-wrapper{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

.stage-box{
  position:relative;
  aspect-ratio:16/9;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  overflow:hidden;
  background:#000;
}

.screen{
  display:none;
  position:absolute;
  inset:0;
}

.screen.active{
  display:block;
}

.stage{
  position:absolute;
  inset:0;
  background:#000 center / contain no-repeat;
  z-index:1;
}

/* ---------- hitboxes ---------- */

.hitbox{
  position:absolute;
  z-index:60;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin:0;
  appearance:none;
}

.hitbox:focus-visible,
.option:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:4px;
}

.btn-start{
  left:50%;
  bottom:4%;
  transform:translateX(-50%);
  width:31vw;
  max-width:430px;
  min-width:250px;
  height:12.8vh;
  min-height:88px;
}

.btn-swap{
  left:20%;
  top:78%;
  width:4%;
  max-width:110px;
  min-width:72px;
  aspect-ratio:1/1;
}

.btn-restart{
  left:50%;
  bottom:9%;
  transform:translateX(-50%);
  width:31vw;
  max-width:430px;
  min-width:250px;
  height:12.8vh;
  min-height:88px;
}

/* ---------- Kiki ---------- */

.kiki-speech{
  position:absolute;
  z-index:20;
  width:14%;
  max-width:220px;
  min-width:150px;
  min-height:120px;
  color:var(--white);
  text-align:center;
  line-height:1.12;
  font-family:var(--font-kiki);
  font-weight:600;
  white-space:pre-line;
  pointer-events:none;
  text-shadow:var(--shadow);
  letter-spacing:.01em;
}

.kiki-speech-start{
  display:none;
}

.kiki-speech-question,
.kiki-speech-feedback,
.kiki-speech-result{
  right:7%;
  top:26%;
  font-size:clamp(24px, 1.8vw, 34px);
}

/* ---------- textos ---------- */

.marquee-text{
  color:var(--white);
  text-shadow:var(--shadow);
}

.question-text{
  position:absolute;
  z-index:20;
  left:48.55%;
  top:34%;
  width:36%;
  transform:translateX(-50%);
  text-align:center;
  padding:0 6%;
  font-size:clamp(24px, 2vw, 34px);
  font-weight:700;
  line-height:1.2;
}

.option{
  position:absolute;
  z-index:25;
  left:48.55%;
  width:36.9%;
  transform:translateX(-50%);
  border:0;
  background:transparent;
  color:var(--white);
  text-align:center;
  cursor:pointer;
  padding:4px 2%;
  font-family:var(--font-ui);
  font-size:clamp(23px, 1.75vw, 30px);
  font-weight:600;
  line-height:1.1;
  text-shadow:var(--shadow);
  transition:transform .12s ease, filter .12s ease;
}

.option:hover{
  transform:translateX(-50%) scale(1.02);
  filter:brightness(1.08);
}

.option-a{ top:58.5%; }
.option-b{ top:66.2%; }
.option-c{ top:73.9%; }

.result-title,
.result-score{
  position:absolute;
  z-index:20;
  left:48.55%;
  width:36.9%;
  transform:translateX(-50%);
  text-align:center;
  color:var(--white);
  text-shadow:var(--shadow);
}

.result-title{
  top:53.5%;
  font-size:clamp(26px, 2vw, 34px);
  font-weight:700;
  line-height:1.15;
}

.result-score{
  top:65.4%;
  font-size:clamp(22px, 1.6vw, 28px);
  font-weight:600;
  line-height:1.2;
}

/* ---------- placar ---------- */

.score-dots{
  position:absolute;
  z-index:30;
  left:5.3%;
  top:56%;
  width:2.2%;
  min-width:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2%;
}

.score-dot{
  width:120%;
  max-width:210px;
  aspect-ratio:1/1;
  object-fit:contain;
}

.level-strip{
  position:absolute;
  z-index:30;
  left:7%;
  top:85%;
  width:12%;
  display:flex;
  justify-content:center;
  color:var(--white);
  text-shadow:var(--shadow);
  font-family:var(--font-ui);
}

.level-item{
  font-size:clamp(18px, 1.15vw, 28px);
  font-weight:700;
  line-height:1;
}

#screen-feedback .score-dots,
#screen-result .score-dots,
#feedbackDots,
#resultDots{
  left:15.5%;
  top:56%;
}

#screen-feedback .level-strip,
#screen-result .level-strip,
#feedbackLevelStrip,
#resultLevelStrip{
  left:11%;
  top:85%;
}

/* ---------- enigma ---------- */

.morse-hidden{
  position:absolute;
  bottom:4%;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  letter-spacing:6px;
  color:rgba(255,255,255,0.04);
  pointer-events:none;
  user-select:none;
  font-family:monospace;
  z-index:10;
}

.greek-hidden{
  position:absolute;
  bottom:3%;
  right:8%;
  font-size:14px;
  color:rgba(255,255,255,0.05);
  pointer-events:none;
  user-select:none;
  font-family:serif;
  letter-spacing:1px;
  z-index:10;
}

/* ---------- animações ---------- */

.question-enter{
  animation:questionIn .32s ease-out both;
}

.option-enter{
  animation:optionIn .28s ease-out both;
}

.option-enter-a{ animation-delay:.04s; }
.option-enter-b{ animation-delay:.09s; }
.option-enter-c{ animation-delay:.14s; }

@keyframes questionIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(18px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes optionIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(10px);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

.marquee-flash{
  animation:marqueeFlash .18s linear 6 alternate;
}

@keyframes marqueeFlash{
  from{
    filter:brightness(1);
  }
  to{
    filter:brightness(1.22);
  }
}

/* ---------- tv guard ---------- */

@media (max-width: 1600px){
  .question-text{
    font-size:clamp(22px, 1.8vw, 30px);
  }

  .option{
    font-size:clamp(20px, 1.55vw, 27px);
  }

  .result-title{
    font-size:clamp(24px, 1.9vw, 31px);
  }

  .result-score{
    font-size:clamp(20px, 1.45vw, 25px);
  }

  .score-dot{
    width:110%;
  }
}

@media (max-height: 900px){
  .question-text{
    top:35%;
  }

  .option-a{ top:59.2%; }
  .option-b{ top:66.8%; }
  .option-c{ top:74.4%; }

  .btn-swap{
    top:78.5%;
  }
}