/* Salve-se Quem Souber: o quadro e 16:9 e tudo dentro usa em (1em = 3,3% da altura) */
*{margin:0;padding:0;box-sizing:border-box}
:root{--roxo:#6a2cf5;--roxo2:#4a18d6;--traco:#2b1d4d;--mar1:#19b7e6;--mar2:#0a68b5}
html,body{height:100%;background:#0a3a6b;overflow:hidden;font-family:'Segoe UI',Arial,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#palco{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#quadro{position:relative;aspect-ratio:16/9;width:min(100vw,177.78vh);height:min(56.25vw,100vh);overflow:hidden;font-size:16px;background:#7fd6ff;box-shadow:0 0 40px #0008}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}

/* ---------- cenario ---------- */
#cenario{position:absolute;inset:0;background:linear-gradient(180deg,#4cbcff 0%,#a9e8ff 46%,#d6f6ff 62%)}
#cenario .sol{position:absolute;right:7%;top:7%;width:11%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6b0 0 55%,#ffe66b 56% 100%);box-shadow:0 0 0 .9em #ffe66b55,0 0 0 1.9em #ffe66b2a}
#cenario .nuvem{position:absolute;width:15%;animation:vento linear infinite}
#cenario .nuvem.a{top:8%;left:6%;animation-duration:70s}
#cenario .nuvem.b{top:17%;left:42%;width:11%;animation-duration:95s;animation-delay:-30s}
#cenario .nuvem.c{top:5%;left:68%;width:9%;animation-duration:80s;animation-delay:-55s}
@keyframes vento{from{transform:translateX(-30vw)}to{transform:translateX(60vw)}}
#cenario .ilha{position:absolute;left:3%;top:36%;width:17%}
#cenario .mar{position:absolute;left:0;right:0;bottom:0;top:49%;background:linear-gradient(180deg,var(--mar1),var(--mar2))}
#cenario .onda{position:absolute;left:-25%;width:150%;height:7%;animation:ondular 7s ease-in-out infinite alternate}
#cenario .onda svg{width:100%;height:100%;display:block}
#cenario .onda.o1{top:46.5%;animation-duration:6s}
#cenario .onda.o2{top:56%;animation-duration:8s;animation-delay:-3s;opacity:.55}
#cenario .onda.o3{top:68%;animation-duration:9s;animation-delay:-5s;opacity:.4}
#cenario .onda.o4{top:82%;animation-duration:11s;animation-delay:-2s;opacity:.3}
@keyframes ondular{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

/* ---------- telas ---------- */
.tela{position:absolute;inset:0;display:none;z-index:2}
.tela.on{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-weight:800;font-size:1em;color:#fff;border-radius:.9em;padding:.55em 1.1em;background:linear-gradient(180deg,#8a4dff,var(--roxo2));box-shadow:0 .28em 0 #34109b,0 .6em 1em #0004;transition:transform .12s,box-shadow .12s,filter .12s;text-shadow:0 .08em 0 #0003}
.btn:hover{transform:translateY(-.12em);filter:brightness(1.08)}
.btn:active{transform:translateY(.2em);box-shadow:0 .06em 0 #34109b}
.btn.verde{background:linear-gradient(180deg,#3ddc97,#10a35f);box-shadow:0 .28em 0 #0a6b3e,0 .6em 1em #0004}
.btn.laranja{background:linear-gradient(180deg,#ffd84d,#ff8a1f);color:#3b1d00;text-shadow:none;box-shadow:0 .28em 0 #c25b00,0 .6em 1em #0004}
.btn.azul{background:linear-gradient(180deg,#59a8ff,#1f6fe0);box-shadow:0 .28em 0 #123f8a,0 .6em 1em #0004}
.btn.vermelho{background:linear-gradient(180deg,#ff7a8a,#e0283f);box-shadow:0 .28em 0 #8f0f22,0 .6em 1em #0004}
.btn.amarelo{background:linear-gradient(180deg,#ffe273,#ffb020);color:#3b2a00;text-shadow:none;box-shadow:0 .28em 0 #b87500,0 .6em 1em #0004}
.btn.roxo{background:linear-gradient(180deg,#8a4dff,var(--roxo2))}
.btn.pequeno{font-size:.8em;padding:.45em .85em}
.btn.grande{font-size:2em;padding:.4em 1.8em;border-radius:1.1em}

/* ---------- titulo ---------- */
#tela-titulo{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#tela-titulo.on{display:flex}
.logo-art{position:relative;display:flex;flex-direction:column;align-items:center;line-height:.86;font-weight:900;text-transform:uppercase;font-family:'Arial Black','Segoe UI',Impact,sans-serif;transform:rotate(-2deg);padding:0 3em}
.logo-art span{display:block;-webkit-text-stroke:.09em var(--traco);paint-order:stroke fill;text-shadow:0 .1em 0 var(--traco),0 .2em .5em #0006}
.logo-art .l1{font-size:3.5em;color:#fff;letter-spacing:.02em}
.logo-art .l2{font-size:2.1em;color:#ffd84d;margin:.04em 0}
.logo-art .l3{font-size:3.9em;color:#ff5470;letter-spacing:.03em}
.logo-boia{position:absolute !important;right:-.3em;top:-.7em;width:3.3em;height:3.3em;animation:balanca 3s ease-in-out infinite;-webkit-text-stroke:0 !important;text-shadow:none !important}
.logo-boia svg{width:100%;height:100%;filter:drop-shadow(0 .2em .2em #0005)}
@keyframes balanca{50%{transform:rotate(14deg) translateY(.3em)}}
#tela-titulo .sub{margin:1.1em 0 1.1em;font-size:1.25em;font-weight:700;text-shadow:0 .1em .3em #0007}
.banco-atual{margin-top:1.3em;font-size:.8em;background:#0a3a6bcc;border:.1em solid #ffffff55;border-radius:2em;padding:.4em 1.1em}

/* ---------- tabuleiro ---------- */
#faixa{position:absolute;left:50%;top:3.5%;transform:translateX(-50%);width:44%;min-height:19%;background:#0a2a5ae6;border:.18em solid #ffffff88;border-radius:1em;padding:.7em 1em .9em;text-align:center;box-shadow:0 .5em 1.4em #0006;z-index:6}
#faixa .l1{font-size:.8em;color:#bcd9ff}
#faixa .l2{font-size:1.8em;font-weight:900;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#faixa .acoes{display:flex;gap:.7em;justify-content:center;margin-top:.5em}
#faixa .acoes .btn{font-size:.85em}
#faixa .modo-res{display:none}
#faixa.resultado .modo-vez{display:none}
#faixa.resultado .modo-res{display:block}
#faixa.acertou{border-color:#3ddc97;background:#0a4a3ae6}
#faixa.errou{border-color:#ff7a8a;background:#5a0a1ee6}
#faixa.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.res-resp{font-size:.95em;margin-top:.2em;color:#fff}
.res-resp b{color:#ffe273}
#arena{position:absolute;left:1%;right:1%;top:30%;height:62%;display:flex;justify-content:space-around;align-items:flex-end;z-index:3}
.jog{position:relative;height:100%;flex:0 0 auto;width:var(--lar,12%)}
.jog .pessoa{position:absolute;left:12%;width:76%;bottom:38%}
.jog .av{position:relative;z-index:1;transition:transform .3s}
.jog .av svg{width:100%;display:block;filter:drop-shadow(0 .25em .15em #0004)}
.jog .plat{position:absolute;left:0;right:0;bottom:30%;transition:transform .7s,opacity .7s}
.jog .plat svg{width:100%;display:block}
/* o salva-vidas e usado de verdade: metade de tras fica atras do bichinho, metade da frente passa na frente da barriga */
.jog .boia{position:absolute;left:1%;width:98%;top:33%;aspect-ratio:1;opacity:0;pointer-events:none;transform:scaleY(.5)}
.jog .boia svg{width:100%;display:block}
.jog .boia.tras{z-index:0}
.jog .boia.frente{z-index:2;clip-path:inset(50% 0 0 0)}
.jog .pill{position:absolute;left:-4%;right:-4%;bottom:2%;height:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#e3f1ff);border:.16em solid var(--traco);border-radius:.8em;color:var(--traco);cursor:pointer;box-shadow:0 .25em 0 #0a2a5a,0 .5em .8em #0004;z-index:4;transition:transform .15s}
.jog .pill:hover{transform:translateY(-.1em)}
.jog .nome{font-weight:900;font-size:.72em;line-height:1.05;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;cursor:text}
.jog .nome:focus{background:#fff6c2;border-radius:.3em;text-overflow:clip}
.jog .pts{font-weight:900;font-size:1.35em;line-height:1}
.jog .pts.sobe{animation:sobe .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes sobe{from{transform:scale(2.2);color:#10a35f}to{transform:scale(1)}}
.jog .ok{position:absolute;bottom:21%;right:-.5em;width:1.5em;height:1.5em;border-radius:50%;background:#3ddc97;border:.12em solid var(--traco);color:#fff;font-size:.75em;font-weight:900;display:none;align-items:center;justify-content:center}
.jog.respondeu .ok{display:flex}
.jog.atual .pill{background:linear-gradient(180deg,#fff6b0,#ffd84d);box-shadow:0 0 0 .22em #ffd84d,0 .25em 0 #b87500,0 .6em 1em #0005}
.jog.atual .av{animation:atual 1.1s ease-in-out infinite}
@keyframes atual{50%{transform:translateY(-.5em)}}
/* quem errou: a plataforma afunda e o bichinho boia no salva-vidas */
.jog.agua .plat{transform:translateY(45%) scale(.9);opacity:0}
.jog.agua .pessoa{bottom:37%;animation:boiar 2.4s ease-in-out infinite;z-index:2}
.jog.agua .boia{opacity:1}
@keyframes boiar{50%{transform:translateY(.35em) rotate(3deg)}}
.jog.agua.emerge .pessoa{animation:emerge .8s ease-out both}
@keyframes emerge{from{transform:translateY(60%) scale(.4);opacity:0}to{transform:none;opacity:1}}
.jog.volta .av{animation:volta .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes volta{from{transform:translateY(-1.6em) scale(.7);opacity:0}to{transform:none;opacity:1}}
/* queda */
.jog.cair .av{animation:cai 1.5s cubic-bezier(.5,0,.8,.6) forwards;z-index:2}
.jog.cair .plat{animation:abre 1.2s ease forwards}
@keyframes cai{0%{transform:translateY(0)}10%{transform:translate(-.3em,-.3em) rotate(-6deg)}20%{transform:translate(.3em,0) rotate(5deg)}100%{transform:translateY(7em) rotate(28deg) scale(.35);opacity:.2}}
@keyframes abre{40%{transform:rotate(-8deg)}100%{transform:translateY(1.4em) rotate(4deg);opacity:.35}}
.jog.salvo .av{animation:pula .55s ease-in-out 3}
@keyframes pula{50%{transform:translateY(-2.4em) rotate(-8deg)}}
.splash{position:absolute;left:50%;bottom:30%;width:0;height:0;pointer-events:none;z-index:5}
.splash .anel{position:absolute;left:-2.5em;top:-.6em;width:5em;height:1.4em;border:.22em solid #fff;border-radius:50%;opacity:.9;animation:anel 1.1s ease-out forwards}
@keyframes anel{from{transform:scale(.2);opacity:.95}to{transform:scale(1.8);opacity:0}}
.splash i{position:absolute;left:0;top:0;width:.6em;height:.6em;border-radius:50%;background:#e6f8ff;animation:gota .95s ease-out forwards}
@keyframes gota{0%{transform:translate(0,0)}55%{transform:translate(calc(var(--dx)*.7),calc(var(--dy)*-1))}100%{transform:translate(var(--dx),1.2em);opacity:0}}

/* ---------- escolher pergunta ---------- */
.topo-tela{position:absolute;left:3%;right:3%;top:3%;display:flex;align-items:center;justify-content:space-between;gap:1em;z-index:3}
.topo-tela h2{font-size:1.7em;font-weight:900;text-shadow:0 .1em .3em #0008;text-align:center;flex:1}
#tela-escolher::before{content:"";position:absolute;inset:0;background:#0a2a5ab8}
#grade{position:absolute;left:3%;right:3%;top:17%;bottom:3%;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(4.2em,1fr));gap:.7em;align-content:start;padding:.5em;z-index:3}
.tile{position:relative;aspect-ratio:1;border-radius:.9em;font-weight:900;font-size:1.25em;color:#fff;background:linear-gradient(180deg,#59a8ff,#1f6fe0);box-shadow:0 .22em 0 #123f8a;transition:transform .12s}
.tile:nth-child(4n+2){background:linear-gradient(180deg,#ff7a8a,#e0283f);box-shadow:0 .22em 0 #8f0f22}
.tile:nth-child(4n+3){background:linear-gradient(180deg,#ffd84d,#ff8a1f);box-shadow:0 .22em 0 #c25b00;color:#3b1d00}
.tile:nth-child(4n+4){background:linear-gradient(180deg,#3ddc97,#10a35f);box-shadow:0 .22em 0 #0a6b3e}
.tile:hover{transform:translateY(-.15em) scale(1.05)}
.tile.usada{filter:grayscale(1) brightness(.6);box-shadow:none;pointer-events:none}
.tile.usada::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2em;color:#fff}

/* ---------- pergunta ---------- */
#tela-pergunta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#123f8aef,#0a1f4af2)}
.chip-jog{position:absolute;left:3%;top:4%;z-index:3;display:flex;align-items:center;gap:.5em;background:#ffffff1f;border:.12em solid #ffffff55;border-radius:2em;padding:.25em 1em .25em .3em;font-weight:800;font-size:.95em;max-width:40%}
.chip-jog .mini{width:2.2em;display:block;flex:none}
.chip-jog .mini svg{width:100%;display:block}
.chip-jog #pg-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bVoltarPg{position:absolute;right:3%;top:4%;z-index:3}
#cronometro{position:absolute;left:3%;top:22%;width:10%;aspect-ratio:1;z-index:3;display:flex;align-items:center;justify-content:center}
#cronometro svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#cronometro circle{fill:#0a2a5a;stroke-width:9}
#cronometro .trilha{stroke:#ffffff33}
#cronometro .barra{fill:none;stroke:#3ddc97;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s}
#cronometro.baixo .barra{stroke:#ff4d5e}
#cronometro.baixo{animation:pisca .5s infinite}
@keyframes pisca{50%{transform:scale(1.08)}}
#cr-num{position:relative;font-size:2.4em;font-weight:900}
#pg-card{position:absolute;left:17%;right:5%;top:13%;min-height:27%;background:#fff;color:var(--traco);border-radius:1.1em;border:.2em solid #ffd84d;padding:.9em 1.4em 1em;box-shadow:0 .4em 0 #b87500,0 1em 1.6em #0006;display:flex;flex-direction:column;justify-content:center;z-index:3}
.pg-num{font-size:.75em;font-weight:900;color:var(--roxo);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.3em}
#pg-texto{font-size:1.5em;font-weight:800;line-height:1.25}
#pg-ops{position:absolute;left:5%;right:5%;top:50%;bottom:4%;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1em;z-index:3}
.op{position:relative;display:flex;align-items:center;gap:.8em;text-align:left;font-size:1.15em;font-weight:800;line-height:1.2;border-radius:1em;padding:.5em 1em .5em .6em;color:#fff;border:.16em solid #ffffffaa;transition:transform .12s,filter .15s;text-shadow:0 .08em 0 #0004}
.op:hover{transform:translateY(-.12em);filter:brightness(1.1)}
.op .letra{flex:none;width:2.1em;height:2.1em;border-radius:50%;background:#fff;color:var(--traco);display:flex;align-items:center;justify-content:center;font-weight:900;text-shadow:none}
.op.c0{background:linear-gradient(180deg,#ff7a8a,#e0283f);box-shadow:0 .3em 0 #8f0f22}
.op.c1{background:linear-gradient(180deg,#59a8ff,#1f6fe0);box-shadow:0 .3em 0 #123f8a}
.op.c2{background:linear-gradient(180deg,#ffd84d,#f59a14);box-shadow:0 .3em 0 #b87500;color:#3b1d00;text-shadow:none}
.op.c3{background:linear-gradient(180deg,#3ddc97,#10a35f);box-shadow:0 .3em 0 #0a6b3e}
.op.escolhida{outline:.25em solid #fff;filter:brightness(1.2)}
.op.dim{filter:brightness(.45) grayscale(.4)}
.op.certa{outline:.28em solid #fff;filter:none;animation:pisca .6s 3;z-index:2}
.op.certa::after{content:"✔";position:absolute;right:.7em;font-size:1.3em}

/* ---------- suspense e confete ---------- */
#suspense{position:absolute;inset:0;z-index:14;display:none;flex-direction:column;align-items:center;justify-content:center;background:#04122ed0;text-align:center}
#suspense.on{display:flex}
#suspense .txt{font-size:2.6em;font-weight:900;text-shadow:0 .1em .4em #000a}
#suspense .esc{margin-top:.6em;font-size:1.5em;font-weight:800;background:linear-gradient(180deg,#8a4dff,var(--roxo2));padding:.4em 1em;border-radius:.7em;border:.12em solid #ffffffaa;animation:pulso 1s infinite;max-width:80%}
#suspense .pontos{margin-top:.8em;display:flex;gap:.5em}
#suspense .pontos i{width:1.1em;height:1.1em;border-radius:50%;background:#ffd84d;animation:pulso .7s infinite}
#suspense .pontos i:nth-child(2){animation-delay:.15s}#suspense .pontos i:nth-child(3){animation-delay:.3s}
@keyframes pulso{50%{transform:scale(1.15);opacity:.8}}
#confete{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:12}

/* ---------- modais ---------- */
#bCfg{position:fixed;top:8px;right:10px;z-index:20;font-size:18px;color:#fff;background:#0a2a5a99;border:1px solid #ffffff55;border-radius:50%;width:40px;height:40px;opacity:.35;transition:opacity .2s}
#bCfg:hover,#bCfg:focus{opacity:1}
.modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:#04122ecc;font-size:16px}
.modal.on{display:flex}
.modal .caixa{background:#102a5e;border:2px solid #ffffff44;border-radius:18px;padding:22px;width:min(520px,94vw);max-height:92vh;overflow:auto;box-shadow:0 20px 50px #000a}
.modal .caixa.larga{width:min(900px,96vw);height:92vh;display:flex;flex-direction:column}
.modal h3{font-size:22px;text-align:center;margin-bottom:14px}
.modal h3 small{display:block;font-size:13px;font-weight:600;color:#bcd9ff;margin-top:2px}
.modal .btn{font-size:15px}
.modal .btn.pequeno{font-size:13px}
.grade-cfg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grade-cfg .largo{grid-column:1/3}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#bcd9ff}
.campo select{font:inherit;font-size:15px;color:#fff;background:#0a1f4a;border:1px solid #4b6fc0;border-radius:10px;padding:10px}
.contador{display:flex;align-items:center;justify-content:center;gap:18px;font-size:22px;color:#fff}
.modal .fechar{display:flex;margin:16px auto 0}
#ranking{list-style:none;display:flex;flex-direction:column;gap:8px}
#ranking li{display:flex;align-items:center;gap:12px;background:#ffffff14;border-radius:12px;padding:8px 14px;font-weight:800;font-size:18px}
#ranking li:nth-child(1){background:linear-gradient(90deg,#ffd84d55,#ffffff14)}
#ranking .pos{width:34px;text-align:center;font-size:22px}
#ranking .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ranking .pt{color:#ffe273}
.barra-ed{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:14px}
.barra-ed .esp{flex:1}
#ed-lista{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px}
.ed-card{background:#18356f;border:1px solid #3c5fb0;border-radius:12px;padding:12px;position:relative}
.ed-card .pt{width:100%;font:inherit;font-size:16px;font-weight:700;margin-bottom:8px;background:#0a1f4a;color:#fff;border:1px solid #3c5fb0;border-radius:8px;padding:8px;resize:vertical}
.ed-op{display:flex;gap:8px;align-items:center;margin:5px 0}
.ed-op input[type=radio]{width:20px;height:20px;flex:none;accent-color:#3ddc97}
.ed-op input[type=text]{flex:1;font:inherit;font-size:14px;background:#0a1f4a;color:#fff;border:1px solid #3c5fb0;border-radius:8px;padding:7px}
.ed-op .tag{width:22px;font-size:13px;color:#bcd9ff;flex:none;font-weight:800}
.ed-del{position:absolute;right:10px;top:8px;font-size:13px;color:#ff9aa8;font-weight:700}
.ed-card .num{font-size:12px;color:#bcd9ff;font-weight:800;margin-bottom:4px}
#aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:40;background:#ffd84d;color:#3b2a00;font-weight:800;padding:10px 20px;border-radius:30px;opacity:0;pointer-events:none;transition:.25s;font-size:15px;max-width:90vw;text-align:center}
#aviso.on{opacity:1;transform:translateX(-50%)}
.oculto{display:none !important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s !important;animation-iteration-count:1 !important;transition:none !important}}

.nota{font-size:13px;color:#bcd9ff;line-height:1.4;margin:6px 0 10px}
#lista-bancos{display:flex;flex-direction:column;gap:8px}
.linha-banco{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#18356f;border:1px solid #3c5fb0;border-radius:12px;padding:10px 12px}
.linha-banco.ativo{border-color:#3ddc97;background:#16497a}
.linha-banco .nm{flex:1 1 180px;font-weight:800;font-size:15px}
.linha-banco .nm small{display:block;font-weight:600;font-size:12px;color:#bcd9ff}
#co-link{width:100%;font:12px/1.3 monospace;color:#fff;background:#0a1f4a;border:1px solid #3c5fb0;border-radius:8px;padding:8px;resize:none;word-break:break-all;-webkit-user-select:text;user-select:text}
.grade-cfg .btn:disabled{opacity:.4;pointer-events:none}
body.foto #bCfg{display:none}