:root{
  --red:#d71920;
  --red-dark:#a91015;
  --pink:#f7e2e2;
  --text:#333;
  --shadow:0 10px 26px rgba(0,0,0,.18);
  --radius:22px;
  --safe-top:max(env(safe-area-inset-top), 8px);
  --safe-bottom:max(env(safe-area-inset-bottom), 8px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;background:#000;color:#fff;
}
body.installable::after{
  content:"";
  position:fixed;inset:auto 0 0 0;height:env(safe-area-inset-bottom);
}
button{font:inherit}
#app,.screen,.layout{width:100vw;height:100svh;height:100vh}
.screen{
  position:relative;overflow:hidden;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.screen::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.04)}
.fade-in{animation:fadeIn .28s ease both}
.slide-up{animation:slideUp .3s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.topbar{
  position:absolute;top:var(--safe-top);right:10px;left:10px;z-index:50;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.chip, .chip-btn{
  border:none;border-radius:999px;padding:9px 13px;font-weight:700;font-size:13px;
  box-shadow:var(--shadow);backdrop-filter:blur(8px)
}
.chip{background:rgba(0,0,0,.55);color:#fff}
.chip.warning{background:#facc15;color:#111}
.chip.info{background:rgba(255,255,255,.92);color:#111}
.chip-btn{cursor:pointer;background:rgba(0,0,0,.65);color:#fff}
.chip-btn:hover{background:rgba(0,0,0,.8)}
.btn{
  border:none;border-radius:20px;padding:12px 18px;font-weight:800;font-size:17px;
  box-shadow:var(--shadow);cursor:pointer;transition:.2s transform,.2s background,.2s opacity;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-soft{background:rgba(255,255,255,.88);color:#222}
.btn-soft:hover{background:#fff}
.btn-arrow{border-top-left-radius:0;border-bottom-left-radius:0}
.btn.disabled{opacity:.55;pointer-events:none}
.layout{position:relative;z-index:2;padding-top:56px;padding-bottom:26px}
.footer-mini{
  position:absolute;left:14px;bottom:8px;z-index:40;font-size:11px;opacity:.5
}
.hidden{display:none!important}
#install-inline{display:none}
#install-inline.show{display:inline-flex}
.action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ABERTURA */
.opening{
  display:grid;grid-template-columns:56% 44%;gap:1.6vw;
  height:100%;padding:2.8vw 3.2vh 2.4vh;
  margin-left: 50px;
}
.opening-copy{display:flex;flex-direction:column;justify-content:space-between;color:#444;min-width:0}
.kicker{font-size:6vw;line-height:.95;font-weight:900;color:var(--red);text-transform:uppercase}
.kicker-sub{font-size:2.2vw;color:var(--red);margin-top:.5vh}
.hero-title{font-size:4.1vw;line-height:1.02;font-weight:900;color:#333;max-width:95%}
.hero-text{font-size:1.28vw;max-width:36vw;color:#555;line-height:1.36;margin:.8vh 0 0}
.hero-media{display:flex;align-items:center;justify-content:center}
.hero-circle{
  width:31vw;height:min(62vh,31vw);border-radius:999px;background:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)
}
.hero-circle img{max-width:90%;max-height:88%;object-fit:contain}

/* NARRATIVAS */
.narrative{
  display:grid;grid-template-columns:53% 47%;gap:1vw;
  height:100%;padding:2.4vw 3.2vh 1.5vh;color:var(--text)
}
.panel{
  background:rgba(255,255,255,.62);border-radius:26px;padding:2vw 2.2vw;
  box-shadow:var(--shadow);backdrop-filter:blur(3px);height:100%;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
}
.label{font-size:1.75vw;color:var(--red);font-weight:800;text-transform:uppercase;margin-bottom:1.2vh}
.narrative-text{
  font-size:2.05vw;line-height:1.18;font-weight:700;overflow:auto;padding-right:.4vw;
}
.progress-wrap{display:flex;align-items:center;gap:10px;margin-top:1.6vh;flex-wrap:wrap}
.progress{width:15vw;height:10px;background:rgba(255,255,255,.6);border-radius:999px;overflow:hidden}
.progress > div{height:100%;background:var(--red);width:0}
.narrative-side{display:flex;align-items:center;justify-content:center;overflow:hidden}
.narrative-side img{max-width:100%;max-height:calc(100svh - 110px);object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.16))}

/* QUESTÕES */
.question{
  display:grid;grid-template-columns:minmax(0,76%) minmax(120px,24%);height:100%;padding:2.4vw 3.2vh 1.5vh;color:var(--text)
}
.question-main{display:flex;flex-direction:column;min-width:0;height:100%}
.question-title{font-size:2.2vw;font-weight:900;text-transform:uppercase}
.question-meta{font-size:1.02vw;color:#555;margin-top:4px}
.question-prompt{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:5.1vw;font-weight:900;letter-spacing:-.03em;padding:1vh .8vw;text-align:center;line-height:1;color:var(--text)
}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:1.6vh 1.6vw;padding:0 1.2vw 0.4vh}
.answer{
  min-height:11.5vh;border:2px solid rgba(0,0,0,.72);border-radius:20px;background:var(--red);color:#fff;
  font-size:2.02vw;font-weight:800;padding:.9vw 1vw;text-align:left;cursor:pointer;
  box-shadow:var(--shadow);transition:.18s transform,.18s background;display:flex;align-items:center
}
.answer:hover{transform:scale(1.02);background:var(--red-dark)}
.side{display:flex;align-items:flex-start;justify-content:center;padding-top:.8vh}
.timer-wrap{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:.4vh}
.timer{
  width:min(18vh,18vw);height:min(18vh,18vw);min-width:112px;min-height:112px;border-radius:50%;
  border:3px solid #ef4444;background:#dc2626;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px rgba(0,0,0,.24);color:#fff;position:relative
}
.timer::before{content:"";position:absolute;inset:8%;border-radius:50%;background:rgba(255,255,255,.13)}
.timer-inner{position:relative;z-index:2;text-align:center}
.timer-num{font-size:3.1vw;line-height:1;font-weight:900}
.timer-label{font-size:.88vw;text-transform:uppercase;letter-spacing:.08em}
.timer-bar{width:min(15vh,15vw);min-width:112px;height:7px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.35);margin-top:12px}
.timer-bar > div{height:100%;background:#fff;width:100%}
.pulse{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* FEEDBACK */
.feedback{display:grid;grid-template-columns:50% 50%;height:100%;padding:2.8vw 3.2vh 1.8vh}
.feedback-copy{display:flex;flex-direction:column;justify-content:center;gap:2.2vh;min-width:0; text-align: center;}
.feedback-title{font-size:4.25vw;font-weight:900;line-height:1.2;text-transform:uppercase;white-space:pre-line}
.feedback-title.red{color:#ff1a1a}
.feedback-title.light{color:#d71920}
.feedback-copy .hint{font-size:1.15vw;max-width:26vw;color:#fff;opacity:.9;line-height:1.35; text-align: center}
.feedback-media{display:flex;align-items:center;justify-content:center;overflow:hidden}
.feedback-media img{max-width:100%;max-height:calc(100svh - 110px);object-fit:contain}

/* PISTA */
.clue{display:grid;grid-template-columns:23% 77%;gap:1vw;height:100%;padding:3vw 3.2vh 1.8vh}
.clue-icon{display:flex;align-items:center;justify-content:center}
.clue-icon-badge{
  width:min(15vw,180px);aspect-ratio:1/1;border-radius:28px;background:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);font-size:5vw
}
.clue-card{
  background:rgba(255,255,255,.88);border-radius:26px;padding:2vw;color:#111;box-shadow:var(--shadow);
  display:flex;flex-direction:column;justify-content:space-between;height:100%
}
.clue-title{font-size:2.25vw;font-weight:900;color:var(--red);text-transform:uppercase;margin-bottom:1vh}
.clue-text{font-size:1.95vw;line-height:1.18;flex:1}

/* DESAFIO FINAL */
.final-challenge{display:grid;grid-template-columns:minmax(0,78%) minmax(120px,22%);height:100%;padding:2.4vw 3.2vh 1.5vh;color:var(--text)}
.challenge-main{display:flex;flex-direction:column;min-width:0}
.challenge-main .panel{padding:1.7vw 1.8vw}
.challenge-headline{font-size:2.45vw;font-weight:900;text-transform:uppercase;color:#333;line-height:1.04}
.challenge-sub{margin-top:.6vh;font-size:1.05vw;color:#555;max-width:40vw;line-height:1.3}
.suspects{display:grid;grid-template-columns:1fr 1fr;gap:1.3vh 1.2vw;margin-top:1.5vh;padding-right:.3vw}
.suspect{
  background:rgba(255,255,255,.84);border:2px solid rgba(0,0,0,.08);border-radius:20px;padding:.75vw;
  box-shadow:var(--shadow);display:grid;grid-template-columns:33% 67%;gap:.7vw;align-items:center;
  cursor:pointer;transition:.2s transform,.2s border,.2s background;min-height:17vh
}
.suspect:hover{transform:translateY(-2px);border-color:rgba(215,25,32,.45);background:#fff}
.suspect img{width:100%;max-height:15vh;object-fit:contain}
.suspect-name{font-size:1.6vw;font-weight:900;color:#222;margin-bottom:.3vh}
.suspect-note{font-size:.92vw;color:#666;line-height:1.23}
.final-solution{display:grid;grid-template-columns:64% 36%;gap:1vw;height:100%;padding:2.8vw 3.2vh 1.8vh}
.solution-card{background:rgba(255,255,255,.92);border-radius:28px;padding:2vw;color:#111;box-shadow:var(--shadow);height:100%;overflow:auto}
.solution-title{font-size:2.35vw;font-weight:900;color:var(--red);text-transform:uppercase;margin-bottom:1vh}
.solution-text{font-size:1.55vw;line-height:1.28}
.solution-list{margin:1.4vh 0 0;padding:0;list-style:none;display:grid;gap:.8vh}
.solution-list li{font-size:1.08vw;background:#f6f6f6;padding:.85vw 1vw;border-radius:16px}
.solution-media{display:flex;align-items:center;justify-content:center;overflow:hidden}
.solution-media img{max-width:100%;max-height:calc(100svh - 110px);object-fit:contain}
.install-panel{margin-top:1.2vh;font-size:.92vw;color:#666;max-width:36vw;line-height:1.35}

/* LANDSCAPE MOBILE - alvo: ~15,5cm x 7,5cm */
@media (max-width: 950px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape){
  .layout{padding-top:44px;padding-bottom:12px}
  .topbar{gap:6px;top:max(env(safe-area-inset-top),4px)}
  .chip,.chip-btn{padding:6px 10px;font-size:11px}
  .btn{padding:9px 14px;font-size:13px;min-height:38px;border-radius:16px}
  .footer-mini{display:none}

  .opening,.narrative,.question,.feedback,.clue,.final-challenge,.final-solution{
    padding:10px 10px 8px;
  }

  .opening{grid-template-columns:57% 43%;gap:8px}
  .kicker{font-size:34px}
  .kicker-sub{font-size:14px}
  .hero-title{font-size:30px;max-width:100%}
  .hero-text{font-size:11px;max-width:100%;line-height:1.25}
  .hero-circle{width:42vh;height:42vh;max-width:42vw;max-height:42vw}
  .hero-circle img{max-width:92%;max-height:92%}

  .narrative{grid-template-columns:58% 42%;gap:8px}
  .panel{padding:12px 14px;border-radius:18px}
  .label{font-size:15px;margin-bottom:6px}
  .narrative-text{font-size:17px;line-height:1.14}
  .progress-wrap{margin-top:10px;gap:8px}
  .progress{width:120px;height:8px}
  .narrative-side img{max-width:100%;max-height:calc(100svh - 70px)}

  .question{grid-template-columns:78% 22%;gap:6px}
  .question-title{font-size:18px}
  .question-meta{font-size:10px}
  .question-prompt{font-size:50px;padding:4px 0}
  .answers{gap:8px;padding:0 2px}
  .answer{min-height:58px;font-size:20px;padding:8px 12px;border-radius:16px}
  .timer{width:115px;height:115px;min-width:115px;min-height:115px}
  .timer-inner > div:first-child{font-size:14px!important}
  .timer-num{font-size:30px}
  .timer-label{font-size:9px}
  .timer-bar{width:105px;min-width:105px;margin-top:10px}

  .feedback{grid-template-columns:55% 45%;gap:8px}
  .feedback-title{font-size:34px}
  .feedback-copy{gap:14px}
  .feedback-copy .hint{font-size:11px;max-width:none}
  .feedback-media img{max-height:calc(100svh - 70px)}

  .clue{grid-template-columns:20% 80%;gap:8px}
  .clue-icon-badge{width:82px;border-radius:18px;font-size:34px}
  .clue-card{padding:12px 14px;border-radius:18px}
  .clue-title{font-size:18px;margin-bottom:6px}
  .clue-text{font-size:18px;line-height:1.16}

  .final-challenge{grid-template-columns:80% 20%;gap:6px}
  .challenge-main .panel{padding:10px 12px;border-radius:18px}
  .challenge-headline{font-size:19px}
  .challenge-sub{font-size:10px;max-width:none;margin-top:4px}
  .suspects{gap:8px;margin-top:10px}
  .suspect{grid-template-columns:30% 70%;min-height:72px;padding:7px 8px;border-radius:16px}
  .suspect img{max-height:62px}
  .suspect-name{font-size:16px}
  .suspect-note{font-size:10px;line-height:1.18}
  .install-panel{font-size:10px;max-width:none;margin-top:8px}

  .final-solution{grid-template-columns:64% 36%;gap:8px}
  .solution-card{padding:12px 14px;border-radius:18px}
  .solution-title{font-size:18px}
  .solution-text{font-size:13px;line-height:1.3}
  .solution-list{gap:6px}
  .solution-list li{font-size:10px;padding:8px 10px;border-radius:12px}
  .solution-media img{max-height:calc(100svh - 70px)}
}

/* telas muito estreitas em paisagem */
@media (max-width: 740px) and (orientation: landscape){
  .opening{grid-template-columns:60% 40%}
  .kicker{font-size:28px}
  .hero-title{font-size:24px}
  .hero-text{font-size:10px}
  .narrative{grid-template-columns:60% 40%}
  .narrative-text{font-size:15px}
  .question{grid-template-columns:76% 24%}
  .question-prompt{font-size:42px}
  .answer{min-height:52px;font-size:18px}
  .timer{width:100px;height:100px;min-width:100px;min-height:100px}
  .timer-num{font-size:26px}
  .feedback-title{font-size:28px}
  .feedback-copy .hint{font-size:10px}
  .clue-text{font-size:16px}
  .final-challenge{grid-template-columns:1fr 104px}
  .suspect{min-height:66px}
  .suspect-name{font-size:14px}
  .suspect-note{font-size:9px}
  .final-solution{grid-template-columns:1fr 34%}
}

/* fallback geral para telas verticais */
@media (max-width: 1024px) and (orientation: portrait){
  .opening{grid-template-columns:1fr;padding:4vw 4vw 3vh}
  .hero-text{max-width:none;font-size:3.2vw}
  .hero-title{font-size:8vw;max-width:none}
  .kicker{font-size:8.2vw}
  .kicker-sub{font-size:3.2vw}
  .hero-circle{width:58vw;height:34vh}
  .narrative,.question,.feedback,.clue,.final-challenge,.final-solution{grid-template-columns:1fr;padding:4vw}
  .panel,.clue-card,.solution-card{padding:4.4vw}
  .narrative-text{font-size:5vw}
  .label{font-size:4vw}
  .progress{width:34vw}
  .narrative-side img,.feedback-media img,.solution-media img{max-width:74vw;max-height:32vh}
  .question-title,.challenge-headline,.solution-title{font-size:5vw}
  .question-meta,.challenge-sub{font-size:3vw;max-width:none}
  .question-prompt{font-size:12vw}
  .answers,.suspects{grid-template-columns:1fr;gap:2vh;padding:0}
  .answer{font-size:5.6vw;min-height:10vh;padding:3vw}
  .feedback-title{font-size:9vw}
  .feedback-copy .hint{font-size:3.4vw;max-width:none}
  .clue-title{font-size:5vw}
  .clue-text{font-size:4.6vw}
  .suspect{grid-template-columns:32% 68%;padding:3vw}
  .suspect-name{font-size:5vw}
  .suspect-note,.solution-list li,.install-panel,.solution-text{font-size:3.3vw}
  .topbar{left:10px;right:10px;justify-content:flex-end}
}