html,body{overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column;min-height:100dvh;height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);transition:background .5s}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 6px;font-size:15px;font-weight:600}
.who{display:flex;align-items:center;gap:9px}
.spark{width:14px;height:14px;border-radius:50%;background:var(--me,#fff);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.langs{display:flex;gap:2px}
.langs button{padding:8px 9px;font-size:13px;font-weight:700;opacity:.55;border-radius:8px}
.langs button[aria-pressed=true]{opacity:1;background:var(--navy)}
.foot{display:flex;justify-content:space-between;padding:8px 18px 14px;font-size:13px;font-weight:500;opacity:.8;min-height:38px}
#net{background:var(--sun);color:var(--navy);padding:2px 10px;border-radius:99px;font-weight:700}
main{flex:1;display:flex;flex-direction:column;padding:8px 18px 4px;min-height:0;overflow-y:auto}
.scene{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}
.scene.enter{animation:in .35s ease-out}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:clamp(30px,9.4vw,46px);line-height:1.02;font-weight:800;font-stretch:78%;letter-spacing:-.015em;text-wrap:balance}
h1.xl{font-size:clamp(40px,13vw,64px);line-height:.96}
p.lead{font-size:18px;line-height:1.35;font-weight:500;max-width:30ch}
.grow{flex:1}
.note{font-size:15px;font-weight:500;opacity:.85;line-height:1.35}

/* botões de resposta */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:180px;max-height:46dvh}
.big{border-radius:22px;font-size:clamp(26px,8vw,38px);font-weight:800;font-stretch:80%;line-height:1;color:var(--navy);display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:18px;transition:transform .12s,opacity .25s,box-shadow .2s}
.big:active{transform:scale(.97)}
.big.y{background:var(--sun)} .big.n{background:var(--paper)}
.big.on{box-shadow:inset 0 0 0 6px var(--navy)}
.pair.has .big:not(.on){opacity:.38}
.cta{background:var(--sun);color:var(--navy);border-radius:18px;padding:20px 22px;font-size:21px;font-weight:800;text-align:left;width:100%;transition:transform .12s}
.cta:active{transform:scale(.98)} .cta:disabled{opacity:.4}
.cta.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);font-size:17px;padding:15px 18px}

/* resultado ao vivo no telemóvel */
.live{background:var(--navy);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.live b{font-size:44px;font-weight:800;font-stretch:80%;line-height:1;color:var(--sun)}
.bar{height:12px;border-radius:99px;background:var(--paper);overflow:hidden}
.bar i{display:block;height:100%;background:var(--sun);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* sala de espera */
.orb{align-self:center;width:min(56vw,230px);aspect-ratio:1;border-radius:50%;background:var(--me,#fff);color:var(--navy);font-size:22px;font-weight:800;display:grid;place-items:center;text-align:center;padding:20px;line-height:1.05;box-shadow:0 0 0 14px rgba(255,255,255,.14),0 0 0 34px rgba(255,255,255,.07);transition:transform .15s}
.orb:active{transform:scale(.93)}
.orb.fire{animation:fire .7s ease-out}
@keyframes fire{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9),0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 60px rgba(255,255,255,0),0 0 0 120px rgba(255,255,255,0)}}

/* régua 0 a 10 */
.dial{font-size:clamp(120px,40vw,190px);font-weight:800;font-stretch:75%;line-height:.8;color:var(--sun);text-align:center;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:56px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:99px;background:var(--navy)}
input[type=range]::-moz-range-track{height:14px;border-radius:99px;background:var(--navy)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:48px;border-radius:50%;background:var(--sun);border:5px solid var(--navy);margin-top:-17px}
input[type=range]::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background:var(--sun);border:5px solid var(--navy)}
.ends{display:flex;justify-content:space-between;font-size:14px;font-weight:600}

/* candidatos */
.cands{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.cand{background:var(--navy);border-radius:20px;padding:16px 18px;text-align:left;display:flex;flex-direction:column;gap:6px;flex:1;transition:transform .12s,opacity .25s,box-shadow .2s}
.cand:active{transform:scale(.98)}
.cand strong{font-size:22px;font-weight:800;font-stretch:80%;color:var(--sun);display:flex;justify-content:space-between;align-items:baseline}
.cand strong em{font-style:normal;font-size:14px;background:var(--sun);color:var(--navy);padding:4px 12px;border-radius:99px}
.cand li{list-style:none;font-size:16px;line-height:1.3;font-weight:500}
.cand.on{box-shadow:inset 0 0 0 5px var(--sun)}
.cands.has .cand:not(.on){opacity:.42}

/* revelação */
body.machine{background:var(--navy)}
body.human{background:var(--sun);color:var(--navy)}
body.human .langs button[aria-pressed=true]{color:var(--paper)}
.glitch{position:relative;animation:jit 1.6s steps(1) 2}
@keyframes jit{0%{transform:translate(0)}8%{transform:translate(-5px,2px) skewX(-6deg)}12%{transform:translate(4px,-1px)}16%{transform:none}52%{transform:translate(3px,1px) skewX(4deg);opacity:.7}56%{transform:none;opacity:1}}
.pixels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:min(60vw,240px)}
.pixels i{aspect-ratio:1;background:var(--paper);animation:px 1.4s steps(2) infinite}
.pixels i:nth-child(3n){animation-delay:.3s;background:var(--blue)} .pixels i:nth-child(5n){animation-delay:.7s}
@keyframes px{50%{opacity:.25}}

/* competências e paixões */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{background:var(--navy);border-radius:14px;padding:14px 16px;font-size:17px;font-weight:700;transition:transform .1s,background .15s,color .15s}
.chips.col .chip{width:100%;text-align:left;font-size:20px;padding:15px 18px;display:flex;justify-content:space-between}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--sun);color:var(--navy)}
.chips.full .chip:not(.on){opacity:.4}
.txt{width:100%;font:inherit;font-size:17px;font-weight:600;color:var(--paper);background:transparent;border:0;border-bottom:3px solid rgba(255,255,255,.55);padding:10px 2px;border-radius:0}
.txt::placeholder{color:rgba(255,255,255,.7)}

/* cartão 2036 */
.card{background:var(--navy);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.enter .card{animation:flip .7s cubic-bezier(.2,.9,.2,1)}
@keyframes flip{from{transform:perspective(900px) rotateX(-70deg);opacity:0}to{transform:none;opacity:1}}
.card small{font-size:14px;font-weight:600;opacity:.8}
.card h2{font-size:clamp(30px,9.6vw,44px);line-height:.98;font-weight:800;font-stretch:76%;color:var(--sun);text-wrap:balance}
.card p{font-size:17px;line-height:1.35;font-weight:500}
.card dl{display:grid;gap:12px;border-top:2px solid rgba(255,255,255,.16);padding-top:14px}
.card dt{font-size:13px;font-weight:700;color:var(--sun);margin-bottom:2px}
.card dd{font-size:15.5px;line-height:1.35}
.card footer{font-size:12.5px;line-height:1.35;opacity:.75;border-top:2px solid rgba(255,255,255,.16);padding-top:12px}
.dots{display:flex;gap:10px;align-self:center;margin:30px 0}
.dots i{width:16px;height:16px;border-radius:50%;background:var(--sun);animation:hop 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes hop{50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}