*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:Arial,"Liberation Sans",Helvetica,sans-serif;color:#fff;
  background:#0a76d8 url(/img/bg_landscape.jpg) center/cover no-repeat;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
body.espera{background-image:url(/img/kv.jpg)}
input,select,button{font-family:inherit}
input{-webkit-user-select:text;user-select:text}

#app{position:fixed;inset:0;display:flex;flex-direction:column}
.cond{font-family:"Pura Titulo","Roboto Condensed","Arial Narrow","sans-serif-condensed","DejaVu Sans Condensed",Arial,sans-serif;font-weight:700;letter-spacing:-0.02em}

/* Barra de estado */
#barra{position:fixed;top:max(10px,1.4vmin);right:max(12px,1.8vmin);display:flex;gap:10px;z-index:30;font-size:clamp(12px,2vmin,18px)}
.chip{padding:.5em 1em;border-radius:999px;background:rgba(0,40,90,.5);white-space:nowrap}
.chip.alerta{background:#b3261e}
body.pergunta #barra{display:none}

/* Botões */
.btn{display:inline-block;border:0;border-radius:999px;background:#fff;color:#0a64c0;font-weight:700;font-size:clamp(20px,3.6vmin,40px);padding:.65em 1.6em;cursor:pointer;min-height:56px}
.btn:active{transform:scale(.97)}
.btn.sec{background:rgba(255,255,255,.22);color:#fff;border:3px solid rgba(255,255,255,.7)}
.btn.pequeno{font-size:clamp(14px,2.2vmin,22px);padding:.55em 1.1em;min-height:44px;background:rgba(0,40,90,.5);color:#fff}
.btn.escuro{background:#0a64c0;color:#fff}
.btn[disabled]{opacity:.6}
.link{background:none;border:0;color:#0a64c0;text-decoration:underline;font-size:clamp(14px,2.2vmin,22px);padding:.8em;cursor:pointer}

/* Painéis (check-in, definições) */
.centro{flex:1;display:flex;align-items:center;justify-content:center;padding:3vmin}
.painel{background:rgba(255,255,255,.96);color:#0a3f73;border-radius:28px;padding:clamp(20px,4vmin,48px);width:min(92vw,640px);box-shadow:0 20px 50px rgba(0,30,80,.35)}
.painel h1{font-size:clamp(28px,5.4vmin,56px);color:#0a64c0;margin-bottom:.4em}
.painel label{display:block;font-size:clamp(14px,2.4vmin,24px);margin:1em 0 .3em}
.painel select,.painel input{width:100%;padding:.7em .8em;font-size:clamp(18px,3vmin,30px);border:2px solid #9cc6ee;border-radius:16px;color:#0a3f73;background:#fff}
.painel .acoes{margin-top:1.4em;text-align:center}
.erro{color:#b3261e;font-size:clamp(14px,2.3vmin,22px);margin-top:.8em;min-height:1.2em}
.ok{color:#0a7a3d}

/* Ecrã de espera */
.espera-fundo{flex:1;position:relative}
.espera-base{position:absolute;left:0;right:0;bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:2vh}
.espera-topo{position:absolute;left:max(12px,1.8vmin);top:max(10px,1.4vmin);display:flex;gap:10px;flex-wrap:wrap;z-index:5}
.espera-contador{position:absolute;left:0;right:0;bottom:1.4vh;text-align:center;font-size:clamp(12px,1.9vmin,18px);opacity:.95}

/* Perguntas */
.pergunta-ecra{flex:1;display:flex;flex-direction:column;padding:3vmin 5vmin 4vmin}
.pergunta-topo{display:flex;justify-content:space-between;align-items:center}
.pergunta-topo img{height:clamp(56px,11vmin,120px)}
.pergunta-topo .passo{font-size:clamp(14px,2.4vmin,24px);opacity:.95}
.pergunta-meio{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4vmin}
.pergunta-meio h1{font-size:clamp(34px,7.2vmin,84px);line-height:1.1}
.opcoes{display:flex;flex-wrap:wrap;gap:2.2vmin;justify-content:center;max-width:94vw}
.opcao{min-width:clamp(150px,24vmin,300px);padding:.9em 1em;font-size:clamp(20px,3.8vmin,42px);font-weight:700;color:#fff;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.75);border-radius:26px;cursor:pointer}
.opcao:active,.opcao.sel{background:#fff;color:#0a64c0}
.nota{font-size:clamp(13px,2.2vmin,22px);opacity:.95}
.campo-nome{width:min(86vw,720px);padding:.6em .8em;font-size:clamp(28px,5.6vmin,60px);border-radius:24px;border:3px solid #fff;text-align:center;color:#0a3f73}
.progresso{height:12px;border-radius:8px;background:rgba(255,255,255,.3);margin-top:2vmin}
.progresso div{height:100%;border-radius:8px;background:#fff;transition:width .2s}
.pergunta-rodape{display:flex;justify-content:space-between;align-items:center;min-height:56px}

/* Resultado */
.resultado{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3vmin 4vmin;padding:6vmin 4vmin 3vmin;overflow:auto}
.res-texto{flex:1 1 34vmax;max-width:560px}
.res-texto .pre{font-size:clamp(18px,3.2vmin,34px)}
.res-texto .num{display:flex;align-items:baseline;gap:.2em}
.res-texto .num b{font-size:clamp(90px,20vmin,220px);line-height:1}
.res-texto .num span{font-size:clamp(34px,6vmin,72px)}
.res-texto .copos{font-size:clamp(22px,4.2vmin,48px)}
.res-texto .meio{margin-top:1.2vmin;font-size:clamp(16px,2.8vmin,30px)}
.res-texto .aviso{margin-top:1.6vmin;font-size:clamp(12px,1.9vmin,18px);opacity:.92}
.res-botoes{margin-top:2.4vmin;display:flex;gap:1.6vmin;flex-wrap:wrap}
.res-botoes .btn{font-size:clamp(16px,2.8vmin,30px)}
#cartaoTela{height:min(64vh,720px);width:auto;aspect-ratio:9/16;border-radius:18px;box-shadow:0 10px 30px rgba(0,30,80,.45);background:rgba(255,255,255,.2)}
.qr-caixa{background:#fff;color:#0a3f73;border-radius:24px;padding:2vmin;width:clamp(210px,34vmin,360px);text-align:center;font-size:clamp(13px,2.2vmin,22px);line-height:1.3}
.qr-caixa canvas{width:100%;height:auto;image-rendering:pixelated;display:block;margin-bottom:.6em}
@media (orientation:portrait){#cartaoTela{height:min(46vh,720px)}}

/* Toast e diálogo */
#toast{position:fixed;left:50%;bottom:4vh;transform:translateX(-50%);background:#0a3f73;color:#fff;padding:.9em 1.4em;border-radius:999px;font-size:clamp(14px,2.4vmin,24px);display:none;gap:1em;align-items:center;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.35)}
#toast button{background:#fff;color:#0a64c0;border:0;border-radius:999px;padding:.4em 1em;font-weight:700;font-size:inherit;cursor:pointer}
.sobreposicao{position:fixed;inset:0;background:rgba(0,30,80,.6);display:flex;align-items:center;justify-content:center;z-index:40;padding:3vmin}
.sobreposicao .painel{max-height:92vh;overflow:auto}
.sobreposicao p{font-size:clamp(16px,2.8vmin,28px);line-height:1.4;margin:.6em 0}
.sobreposicao .acoes{display:flex;gap:2vmin;justify-content:center;flex-wrap:wrap}
.resumo{display:grid;grid-template-columns:1fr auto;gap:.4em 1.4em;font-size:clamp(18px,3vmin,30px);margin:1em 0}
.resumo b{color:#0a64c0;text-align:right}