: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;
}

/* ---------- DEBUG VISUAL ---------- */

.debug .nav-home,
.debug .nav-back,
.debug .nav-cardapio{
  background:rgba(0,128,255,.28) !important;
  outline:2px dashed rgba(255,255,255,.92) !important;
}

.debug .btn-start,
.debug .btn-swap,
.debug .btn-restart,
.debug .btn-exit{
  background:rgba(255,0,0,.22) !important;
  outline:2px dashed rgba(255,255,255,.92) !important;
}

.debug .option{
  background:rgba(0,255,0,.18) !important;
  outline:2px dashed rgba(255,255,255,.92) !important;
}

/* ---------- menu lateral ---------- */

.nav-home,
.nav-back,
.nav-cardapio{
  position:absolute;
  left:4%;
  width:11%;
  height:4.5%;
  z-index:90;
}

.nav-home{ top:15.7%; }
.nav-back{ top:22.7%; }
.nav-cardapio{ top:29.3%; }

/* ---------- botões ---------- */

.btn-start{
  position:absolute;
  z-index:80;
  left:50%;
  top:90%;
  transform:translate(-50%,-50%);
  width:26%;
  height:12.5%;
  border:0;
  background:transparent;
  cursor:pointer;
}

.btn-swap{
  position:absolute;
  z-index:80;
  left:15%;
  top:85%;
  transform:translate(-50%,-50%);
  width:8%;
  height:12%;
  border-radius:50%;
  border:0;
  background:transparent;
  cursor:pointer;
}

.btn-restart{
  position:absolute;
  z-index:80;
  left:36.2%;
  top:84.7%;
  transform:translate(-50%,-50%);
  width:14%;
  height:18%;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:50%;
}

.btn-exit{
  position:absolute;
  z-index:80;
  left:48.2%;
  top:84.7%;
  transform:translate(-50%,-50%);
  width:14%;
  height:18%;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:50%;
}

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

.kiki-speech{
  position:absolute;
  z-index:20;
  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{
  position:absolute;
  z-index:20;
  right:4%;
  top:30%;
  width:14.2%;
  min-height:10%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(28px, 2.1vw, 42px);
  line-height:1.1;
}

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

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

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

.option{
  position:absolute;
  z-index:25;
  left:48.55%;
  width:36.4%;
  transform:translateX(-50%);
  border:0;
  background:transparent;
  color:var(--white);
  text-align:center;
  cursor:pointer;
  padding:0.6% 2%;
  font-family:var(--font-ui);
  font-size:clamp(22px, 1.68vw, 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:55.7%; }
.option-b{ top:63.25%; }
.option-c{ top:69.8%; }

.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:45%;
  font-size:clamp(25px, 1.95vw, 34px);
  font-weight:700;
  line-height:1.15;
}

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

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

.score-dots{
  position:absolute;
  z-index:30;
  width:3.2%;
  height:25%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}

.score-dot{
  display:block;
  width:95%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  flex:0 0 auto;
}

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

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

/* pergunta */
#screen-question .score-dots,
#scoreDots{
  left:5%;
  top:56%;
}

#screen-question .level-strip,
#levelStrip{
  left:3%;
  top:87.4%;
}

/* feedback */
#screen-feedback .score-dots,
#feedbackDots{
  left:5%;
  top:56%;
}

#screen-feedback .level-strip,
#feedbackLevelStrip{
  left:3%;
  top:87.4%;
}

/* resultado */
#screen-result .score-dots,
#resultDots{
  left:5%;
  top:56%;
}

#screen-result .level-strip,
#resultLevelStrip{
  left:3%;
  top:87.4%;
}

/* ---------- 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 .22s ease-in-out 6 alternate;
}

@keyframes marqueeFlash{
  from{
    opacity:1;
    transform:translateX(-50%) scale(1);
    text-shadow:
      0 0 6px rgba(0,0,0,.78),
      0 0 14px rgba(0,0,0,.58);
  }
  to{
    opacity:.55;
    transform:translateX(-50%) scale(1.035);
    text-shadow:
      0 0 10px rgba(255,255,255,.45),
      0 0 22px rgba(255,255,255,.35),
      0 0 6px rgba(0,0,0,.78);
  }
}

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

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

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

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

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

  .kiki-speech-question,
  .kiki-speech-feedback,
  .kiki-speech-result{
    font-size:clamp(28px, 2.1vw, 42px);
  }
}

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

  .option-a{ top:58.2%; }
  .option-b{ top:65.7%; }
  .option-c{ top:73.2%; }

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