:root{
  --celeste:#74ACDF; --celeste-claro:#E6F1FB; --azul:#1F4E79; --azul-fundo:#F4F8FC;
  --sol:#F6B40E; --sol-claro:#FFF4D6; --tinta:#14213D; --tinta-2:#4A5568; --tinta-3:#7A8699;
  --linha:#DCE5EF; --branco:#FFFFFF; --ok:#2E8B57; --ok-claro:#E3F4EA; --ambar:#C77D00; --ambar-claro:#FFF1D9;
  --coral:#E86A5C; --coral-claro:#FDE9E6; --lilas:#7B61C9; --lilas-claro:#EFEAFB;
  --r:18px; --sombra:0 6px 24px rgba(20,33,61,.08); --sombra-forte:0 14px 40px rgba(20,33,61,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--azul-fundo);color:var(--tinta);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.45}
body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,.titulo{font-family:"Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.01em;margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--tinta)}
a{color:var(--azul)}
.carregando{display:grid;place-items:center;min-height:100dvh;color:var(--tinta-3)}
#confete{position:fixed;inset:0;pointer-events:none;z-index:90}

/* moldura */
.topo{position:sticky;top:0;z-index:20;background:rgba(244,248,252,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.topo-linha{display:flex;align-items:center;gap:10px;max-width:760px;margin:0 auto}
.marca{display:flex;align-items:center;gap:8px;font-family:"Bricolage Grotesque";font-weight:800;font-size:18px}
.marca .sol{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,var(--sol) 45%,transparent 47%),conic-gradient(from 0deg,var(--sol) 0 10deg,transparent 10deg 30deg,var(--sol) 30deg 40deg,transparent 40deg 60deg,var(--sol) 60deg 70deg,transparent 70deg 90deg,var(--sol) 90deg 100deg,transparent 100deg 120deg,var(--sol) 120deg 130deg,transparent 130deg 150deg,var(--sol) 150deg 160deg,transparent 160deg 180deg,var(--sol) 180deg 190deg,transparent 190deg 210deg,var(--sol) 210deg 220deg,transparent 220deg 240deg,var(--sol) 240deg 250deg,transparent 250deg 270deg,var(--sol) 270deg 280deg,transparent 280deg 300deg,var(--sol) 300deg 310deg,transparent 310deg 330deg,var(--sol) 330deg 340deg,transparent 340deg 360deg)}
.contagem{margin-left:auto;font-size:13px;color:var(--tinta-2);text-align:right;line-height:1.2}
.contagem b{display:block;font-family:"Bricolage Grotesque";font-size:18px;color:var(--azul)}
.presenca{display:flex;gap:6px;max-width:760px;margin:8px auto 0}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:var(--branco);border:2px solid var(--linha);position:relative;flex:none}
.av.on{border-color:var(--ok)}
.av.grande{width:56px;height:56px;font-size:30px}
.av .marquinha{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;display:grid;place-items:center;border:2px solid var(--azul-fundo)}

.abas{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--branco);border-top:1px solid var(--linha);display:flex;justify-content:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.abas button{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;font-size:12px;color:var(--tinta-3);font-weight:600}
.abas button span{font-size:20px;line-height:1}
.abas button.ativa{color:var(--azul);background:var(--celeste-claro)}

main{max-width:760px;margin:0 auto;padding:16px 16px 110px}

/* trilha das rodadas */
.trilha{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.trilha::-webkit-scrollbar{display:none}
.passo{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--branco);border:1.5px solid var(--linha);font-size:14px;font-weight:600;color:var(--tinta-2)}
.passo.ativo{border-color:var(--azul);color:var(--azul);background:var(--celeste-claro)}
.passo.feito{color:var(--ok)}
.passo .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--azul-fundo);font-size:12px}
.passo.feito .n{background:var(--ok);color:#fff}

.cartao{background:var(--branco);border-radius:var(--r);box-shadow:var(--sombra);padding:18px;margin-bottom:14px}
.cabeca-rodada{margin:6px 0 14px}
.cabeca-rodada .rot{font-size:13px;font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.06em}
.cabeca-rodada h2{font-size:28px;line-height:1.1;margin:4px 0 6px}
.cabeca-rodada p{margin:0;color:var(--tinta-2)}
.mestre{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;background:var(--sol-claro);color:#7A5600;padding:5px 10px;border-radius:999px;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:14px;font-weight:700;background:var(--azul);color:#fff;min-height:50px;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--celeste-claro);color:var(--azul)}
.btn.sol{background:var(--sol);color:var(--tinta)}
.btn.fant{background:transparent;color:var(--tinta-2);text-decoration:underline;min-height:auto;padding:8px}
.btn.cheio{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.linha-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.linha-btns .btn{flex:1}

.dica{font-size:13px;color:var(--tinta-3)}
.selo-ok{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:700}
.etiqueta{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--azul-fundo);color:var(--tinta-2)}
.etiqueta.ok{background:var(--ok-claro);color:var(--ok)}
.etiqueta.ambar{background:var(--ambar-claro);color:var(--ambar)}
.etiqueta.sol{background:var(--sol-claro);color:#7A5600}
.etiqueta.lilas{background:var(--lilas-claro);color:var(--lilas)}

/* espera e revelação */
.espera{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 10px}
.espera .avs{display:flex;gap:14px}
.espera .avs .av{width:64px;height:64px;font-size:34px}
.espera .nome{font-size:13px;margin-top:4px;color:var(--tinta-2)}
.contagem-reg{font-family:"Bricolage Grotesque";font-size:120px;font-weight:800;color:var(--azul);text-align:center;line-height:1;padding:40px 0;animation:pulso .9s ease-in-out infinite}
@keyframes pulso{0%{transform:scale(.7);opacity:.3}50%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:.9}}
.revela{animation:surge .5s ease-out both}
@keyframes surge{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.ordem-leitura{font-size:13px;color:#7A5600;background:var(--sol-claro);padding:8px 12px;border-radius:12px;margin-bottom:12px}

/* rodada 1: cartas de desejo */
.grade-cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:560px){.grade-cartas{grid-template-columns:repeat(4,1fr)}}
.carta{aspect-ratio:3/3.6;border-radius:16px;background:var(--branco);border:2px solid var(--linha);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center;font-size:13px;font-weight:600;color:var(--tinta-2);transition:transform .12s, border-color .12s}
.carta .emo{font-size:34px}
.carta.marcada{border-color:var(--azul);background:var(--celeste-claro);color:var(--azul);transform:translateY(-3px)}
.carta.coincide{border-color:var(--sol);background:var(--sol-claro)}
textarea{width:100%;min-height:84px;border:1.5px solid var(--linha);border-radius:14px;padding:12px;resize:vertical;background:var(--branco)}
input[type=text],input[type=number],input[type=date],select{width:100%;border:1.5px solid var(--linha);border-radius:12px;padding:12px;background:var(--branco);min-height:48px}
label.campo{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
.frase{font-family:"Bricolage Grotesque";font-size:20px;line-height:1.3;margin:6px 0 0}
.pessoa-linha{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--linha)}
.pessoa-linha:first-child{border-top:0}
.mini-cartas{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* rodada 2: dinheiro */
.dinheiro{font-family:"Bricolage Grotesque";font-weight:800;font-size:30px;color:var(--azul)}
.regua{position:relative;height:56px;margin:20px 4px 30px}
.regua .eixo{position:absolute;left:0;right:0;top:26px;height:4px;background:var(--linha);border-radius:4px}
.regua .faixa{position:absolute;top:18px;height:20px;border-radius:10px;opacity:.85}
.regua .ponto{position:absolute;top:8px;transform:translateX(-50%);font-size:24px}
.regua .rot-p{position:absolute;top:44px;transform:translateX(-50%);font-size:11px;color:var(--tinta-3);white-space:nowrap}

/* rodada 3: mapa de fichas */
.cidade{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
.cidade:first-of-type{border-top:0}
.cidade .info{flex:1;min-width:0}
.cidade .info b{display:block;font-size:16px}
.cidade .info small{color:var(--tinta-3);font-size:12px}
.contador{display:flex;align-items:center;gap:8px}
.contador button{width:40px;height:40px;border-radius:12px;background:var(--celeste-claro);color:var(--azul);font-size:22px;font-weight:700}
.contador .v{min-width:22px;text-align:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:22px}
.fichas{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.ficha{width:30px;height:30px;border-radius:50%;background:var(--sol);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);display:grid;place-items:center;font-size:13px;font-weight:800}
.ficha.vazia{background:var(--linha);box-shadow:none}
.ficha.transito{background:var(--celeste);color:#fff}
.barra-cidade{margin:12px 0}
.barra-cidade .rot{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:4px}
.barra-cidade .trilho{height:14px;background:var(--azul-fundo);border-radius:8px;overflow:hidden;display:flex}
.barra-cidade .seg{height:100%}

/* rodada 4: baralho */
.baralho{position:relative;height:max(330px,calc(100dvh - 460px));max-height:560px;margin:6px 0 10px;touch-action:pan-y}
.pcard{position:absolute;inset:0;background:var(--branco);border-radius:24px;box-shadow:var(--sombra-forte);overflow:hidden;display:flex;flex-direction:column;will-change:transform;user-select:none}
.pcard .capa{height:30%;display:grid;place-items:center;font-size:64px;position:relative}
.pcard .capa .cid{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.9);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--tinta)}
.pcard .capa .res{position:absolute;right:14px;top:14px}
.pcard .corpo{padding:16px 18px;overflow:auto;flex:1}
.pcard h3{font-size:24px;line-height:1.15;margin-bottom:6px}
.pcard .meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pcard p{margin:6px 0;color:var(--tinta-2);font-size:15px}
.pcard .liz{background:var(--lilas-claro);color:var(--lilas);padding:8px 10px;border-radius:12px;font-size:14px;margin-top:8px}
.carimbo{position:absolute;top:40px;padding:6px 14px;border:4px solid;border-radius:12px;font-family:"Bricolage Grotesque";font-weight:800;font-size:28px;opacity:0;transform:rotate(-12deg);pointer-events:none}
.carimbo.quero{left:20px;color:var(--ok);border-color:var(--ok)}
.carimbo.passo{right:20px;color:var(--coral);border-color:var(--coral);transform:rotate(12deg)}
.carimbo.topo{left:50%;top:auto;bottom:40px;transform:translateX(-50%);color:var(--azul);border-color:var(--azul)}
.botoes-voto{display:flex;justify-content:center;gap:14px;align-items:center}
.bv{width:64px;height:64px;border-radius:50%;background:var(--branco);box-shadow:var(--sombra);display:grid;place-items:center;font-size:28px}
.bv.grande{width:76px;height:76px;font-size:34px}
.bv.ouro{width:52px;height:52px;font-size:22px}
.bv.ouro.usado{opacity:.35}
.bv-rot{display:flex;justify-content:center;gap:14px;font-size:11px;color:var(--tinta-3);margin-top:6px;text-align:center}
.bv-rot span{width:64px}.bv-rot span.g{width:76px}.bv-rot span.o{width:52px}
.progresso{height:6px;background:var(--linha);border-radius:4px;overflow:hidden;margin-bottom:8px}
.progresso i{display:block;height:100%;background:var(--azul);transition:width .3s}

.faixa-res{margin:14px 0 6px;display:flex;align-items:center;gap:8px}
.faixa-res h3{font-size:18px}
.item-res{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--azul-fundo);margin:6px 0}
.item-res .emo{font-size:24px}
.item-res .txt{flex:1;min-width:0}
.item-res .txt b{display:block;font-size:15px}
.item-res .txt small{color:var(--tinta-3)}
.item-res .vts{display:flex;gap:2px;font-size:16px}
.troca{width:46px;height:28px;border-radius:999px;background:var(--linha);position:relative;flex:none;transition:background .15s}
.troca::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.troca.on{background:var(--ok)}
.troca.on::after{left:21px}

/* rodada 5: roteiro */
.medidor{position:sticky;top:92px;z-index:10;background:var(--branco);border-radius:16px;box-shadow:var(--sombra);padding:12px 14px;margin-bottom:12px}
.medidor .num{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.medidor .num b{font-family:"Bricolage Grotesque";font-size:22px}
.medidor .trilho{height:10px;border-radius:6px;background:var(--azul-fundo);margin-top:8px;overflow:hidden}
.medidor .trilho i{display:block;height:100%;background:var(--ok);transition:width .3s}
.medidor.estourou .trilho i{background:var(--sol)}
.dia{background:var(--branco);border-radius:var(--r);box-shadow:var(--sombra);padding:14px 16px;margin-bottom:12px;border:2px solid transparent}
.dia.da-liz{border-color:var(--lilas)}
.dia .cab{display:flex;align-items:center;gap:10px}
.dia .cab .data{font-family:"Bricolage Grotesque";font-weight:800;font-size:20px}
.dia .cab .cid{font-size:13px;color:var(--tinta-2)}
.dia .cab .horas{margin-left:auto;font-size:12px}
.ativ{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:var(--azul-fundo);margin-top:8px;font-size:14px}
.ativ .emo{font-size:20px}
.ativ .t{flex:1;min-width:0}
.ativ select{width:auto;min-height:36px;padding:4px 8px;font-size:13px;border-radius:10px}
.transito-box{font-size:13px;color:var(--azul);background:var(--celeste-claro);padding:8px 10px;border-radius:12px;margin-top:8px}

/* rodada cravar */
.cravar{margin-top:16px;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,var(--sol-claro),#fff);border:2px dashed var(--sol);text-align:center}
.cravar .avs{display:flex;justify-content:center;gap:12px;margin:10px 0}
.cravar .av{width:48px;height:48px;font-size:26px;opacity:.35}
.cravar .av.sim{opacity:1;border-color:var(--sol)}
.carimbo-final{display:inline-block;margin-top:8px;padding:6px 16px;border:4px solid var(--ok);color:var(--ok);border-radius:12px;font-family:"Bricolage Grotesque";font-weight:800;font-size:24px;transform:rotate(-4deg)}

/* reservas */
.reserva{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--linha)}
.reserva:first-of-type{border-top:0}
.reserva .emo{font-size:24px;width:30px;text-align:center}
.reserva .t{flex:1;min-width:0}
.reserva .t b{display:block}
.reserva .ctrl{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.reserva .ctrl input{width:auto;min-height:38px;padding:6px 10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--celeste-claro);color:var(--azul);font-weight:700;font-size:13px}
.chip.feito{background:var(--ok-claro);color:var(--ok)}

/* explorar */
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin:0 -16px 6px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.filtros button{flex:none;padding:8px 12px;border-radius:999px;background:var(--branco);border:1.5px solid var(--linha);font-size:13px;font-weight:600;color:var(--tinta-2)}
.filtros button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.dest{display:block}
.dest h3{font-size:22px}
.dest .pc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;font-size:14px}
.dest .pc ul{margin:4px 0 0;padding-left:18px}
.lista-p .item-res{background:var(--branco);box-shadow:var(--sombra)}
details.pratica{background:var(--branco);border-radius:14px;box-shadow:var(--sombra);margin:8px 0;padding:12px 14px}
details.pratica summary{font-weight:700;cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center}
details.pratica summary::-webkit-details-marker{display:none}
details.pratica p{margin:8px 0 0;color:var(--tinta-2);font-size:15px}
.fonte{font-size:12px;color:var(--tinta-3);margin-top:6px}

/* mural */
.ev{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--linha);font-size:15px}
.ev:first-child{border-top:0}
.ev time{margin-left:auto;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.recado{display:flex;gap:8px;margin-bottom:12px}
.recado input{flex:1}

/* entrada */
.entrada{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px 16px;max-width:460px;margin:0 auto}
.entrada h1{font-size:40px;line-height:1.02;margin:14px 0 8px}
.entrada .sub{color:var(--tinta-2);margin:0 0 22px}
.quem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quem button{background:var(--branco);border:2px solid var(--linha);border-radius:18px;padding:16px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700}
.quem button span{font-size:38px}
.quem button.on{border-color:var(--azul);background:var(--celeste-claro);color:var(--azul)}
.erro{color:var(--coral);font-weight:600;font-size:14px;margin-top:10px;min-height:20px}
.bandeira{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--celeste) 0 33%,#fff 33% 66%,var(--celeste) 66%);border:1px solid var(--linha)}

/* telão */
body.telao{background:var(--azul)}
.telao-tela{min-height:100dvh;color:#fff;padding:32px 40px;display:flex;flex-direction:column}
.telao-tela h1{font-size:56px;line-height:1.05}
.telao-tela .rot{color:var(--sol);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.telao-tela .cartao{color:var(--tinta)}
.telao-avs{display:flex;gap:30px;margin:30px 0}
.telao-avs .av{width:110px;height:110px;font-size:60px}
.telao-avs .nm{text-align:center;margin-top:8px;font-weight:600}

.aviso-rede{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--ambar-claro);color:var(--ambar);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;z-index:40;box-shadow:var(--sombra)}
.resumo-final h3{font-size:20px;margin:18px 0 6px}
.resumo-final ul{margin:4px 0;padding-left:20px}
.rodape{text-align:center;font-size:12px;color:var(--tinta-3);margin-top:24px}
.rodape button{text-decoration:underline;color:var(--tinta-3);font-size:12px}
@media print{.topo,.abas,.trilha,.linha-btns,.cravar button{display:none!important}main{padding:0}.cartao{box-shadow:none;border:1px solid var(--linha)}}