/* virada.26 · jogo — tudo sob .jogo */
.jogo { --jg-cor-l: var(--lula); --jg-cor-f: var(--fla); max-width:720px; margin:0 auto; padding:14px 16px 28px; color:var(--tinta); font-family:var(--sans); }
.jogo * { box-sizing:border-box; }

/* topo */
.jogo .jg-topo { display:flex; flex-direction:column; justify-content:center; text-align:center; padding:4px 4px 6px; min-height:178px; }
.jogo .jg-chapeu { margin:0 0 8px; font:600 15px/1.2 var(--sans); color:var(--tinta3); }
.jogo .jg-tit { margin:0 auto; max-width:16em; font:500 clamp(27px,7.4vw,40px)/1.08 var(--serif); letter-spacing:-.015em; text-wrap:balance; }
.jogo .jg-f, .jogo .jg-c-f { color:var(--fla); }
.jogo .jg-c-l { color:var(--lula); }
.jogo .jg-c-e { color:var(--tinta2); }
.jogo .jg-sub { margin:10px auto 0; max-width:30em; font-size:15px; line-height:1.45; color:var(--tinta2); text-wrap:pretty; }
.jogo.jg-jogou .jg-topo > * { animation:jg-sobe .45s cubic-bezier(.2,.8,.2,1) both; }
.jogo.jg-jogou .jg-topo > :nth-child(2) { animation-delay:.06s; }
.jogo.jg-jogou .jg-topo > :nth-child(3) { animation-delay:.12s; }
.jogo .jg-vered { font-size:clamp(34px,9.4vw,52px); }

/* mapa */
.jogo .jg-palco { position:relative; margin:4px 0 0; }
.jogo .jg-mapa { display:block; width:100%; height:auto; max-height:76vh; margin:0 auto; overflow:visible; fill:var(--neutro); stroke:none; stroke-width:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.jogo .jg-mapa path { fill:var(--neutro); stroke:var(--bg); stroke-width:.35; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:fill .55s ease; }
.jogo.jg-pronto:not(.jg-jogou) .jg-mapa { cursor:crosshair; }
.jogo.jg-pronto:not(.jg-jogou) .jg-mapa path:hover { fill:color-mix(in srgb, var(--neutro) 80%, var(--tinta)); transition:none; }
.jogo:not(.jg-pronto) .jg-mapa { min-height:300px; }
.jogo .jg-mapa path.jg-l { fill:var(--lula); fill:color-mix(in srgb, var(--lula) calc(var(--t, 1) * 100%), var(--neutro)); }
.jogo .jg-mapa path.jg-f { fill:var(--fla); fill:color-mix(in srgb, var(--fla) calc(var(--t, 1) * 100%), var(--neutro)); }
.jogo .jg-mapa path.jg-e { fill:var(--neutro); }
.jogo .jg-mapa path.jg-x { fill:var(--vazio); }
.jogo .jg-mapa path.jg-alvo { stroke:var(--tinta); stroke-width:1.6; transition:fill .25s ease; }

/* marcador da cidade escolhida */
.jogo .jg-marca circle { fill:none; vector-effect:non-scaling-stroke; pointer-events:none; transform-box:fill-box; transform-origin:center; }
.jogo .jg-onda { stroke:var(--tinta); stroke-width:2; opacity:0; animation:jg-onda 1.1s cubic-bezier(.2,.7,.3,1) both; }
.jogo[data-v="f"] .jg-onda { stroke:var(--fla); } .jogo[data-v="l"] .jg-onda { stroke:var(--lula); }
.jogo .jg-pino-halo { stroke:var(--bg); stroke-width:6; animation:jg-pino .5s .15s cubic-bezier(.3,1.6,.5,1) both; }
.jogo .jg-pino { stroke:var(--tinta); stroke-width:2.2; animation:jg-pino .5s .15s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes jg-onda { 0% { opacity:.9; transform:scale(.3); } 100% { opacity:0; transform:scale(5); } }
@keyframes jg-pino { 0% { opacity:0; transform:scale(2.2); } 100% { opacity:1; transform:scale(1); } }
@keyframes jg-sobe { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:none; } }

/* dica sob o mapa */
.jogo .jg-dica { display:flex; align-items:center; justify-content:center; gap:9px; min-height:40px; margin:8px auto 0; font-size:14px; color:var(--tinta2); text-align:center; }
.jogo .jg-dica b { color:var(--tinta); font-weight:600; }
.jogo .jg-ponto { flex:none; width:9px; height:9px; border-radius:50%; background:var(--tinta); animation:jg-respira 1.6s ease-in-out infinite; }
.jogo .jg-erro { color:var(--tinta); font-weight:500; animation:jg-treme .35s ease; }
@keyframes jg-respira { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--tinta) 35%, transparent); } 50% { box-shadow:0 0 0 7px transparent; } }
@keyframes jg-treme { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }

/* resultado */
.jogo .jg-res { opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.jogo .jg-res.jg-mostra { opacity:1; transform:none; }
.jogo .jg-cart { margin-top:14px; padding:16px; background:var(--sup); border:1px solid var(--linha); border-radius:16px; }
.jogo .jg-cid { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.jogo .jg-cid h3 { margin:0; font:500 28px/1.05 var(--serif); letter-spacing:-.01em; }
.jogo .jg-cid span { flex:none; font-size:13px; color:var(--tinta3); }
.jogo .jg-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.jogo .jg-duo div { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--bg); }
.jogo .jg-duo div:last-child { text-align:right; }
.jogo .jg-duo span { font-size:13px; font-weight:600; color:var(--tinta2); }
.jogo .jg-duo b { font:500 34px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.jogo .jg-duo small { font-size:13px; color:var(--tinta3); font-variant-numeric:tabular-nums; }
.jogo .jg-duo .jg-l b { color:var(--lula); } .jogo .jg-duo .jg-f b { color:var(--fla); }
.jogo .jg-duo .jg-venc.jg-l { box-shadow:inset 0 0 0 1.5px var(--lula); }
.jogo .jg-duo .jg-venc.jg-f { box-shadow:inset 0 0 0 1.5px var(--fla); }
.jogo .jg-cart h4 { margin:0 0 12px; font:500 22px/1.15 var(--serif); }

.jogo .jg-barra { position:relative; display:flex; gap:2px; height:22px; border-radius:7px; overflow:hidden; }
.jogo .jg-barra div { min-width:3px; transform-origin:left; animation:jg-cresce .8s .1s cubic-bezier(.2,.8,.2,1) both; }
.jogo .jg-bl { background:var(--lula); }
.jogo .jg-bf { background:var(--fla); justify-content:flex-end; transform-origin:right !important; }
.jogo .jg-barra i { position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--tinta); opacity:.55; }
@keyframes jg-cresce { 0% { transform:scaleX(0); } 100% { transform:none; } }
.jogo .jg-barra.jg-fina { height:10px; border-radius:5px; }
.jogo .jg-rots { display:flex; justify-content:space-between; gap:10px; margin-top:5px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.jogo .jg-bolo { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; padding:10px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.jogo .jg-bolo span { font-size:14px; color:var(--tinta2); }
.jogo .jg-bolo b { font:500 26px/1 var(--serif); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.jogo .jg-dif { margin:10px 0 0; font-size:14px; color:var(--tinta2); }
.jogo .jg-dif b { font-weight:600; }

.jogo .jg-linha { margin-bottom:14px; }
.jogo .jg-rot { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.jogo .jg-rot span { font-weight:600; font-size:14px; }
.jogo .jg-rot small { font-size:12px; color:var(--tinta3); text-align:right; }
.jogo .jg-abs { display:flex; justify-content:space-between; margin-top:4px; font-size:12px; color:var(--tinta3); font-variant-numeric:tabular-nums; }
.jogo .jg-nota { margin:4px 0 0; padding-top:12px; border-top:1px solid var(--linha); font-size:14px; line-height:1.5; color:var(--tinta2); }
.jogo .jg-nota b { color:var(--tinta); font-weight:600; }
.jogo .jg-mini { margin:8px 0 0; font-size:12px; color:var(--tinta3); }

.jogo .jg-placar { margin:16px 0 0; text-align:center; font-size:13px; color:var(--tinta3); font-variant-numeric:tabular-nums; }
.jogo .jg-botoes { display:flex; gap:8px; margin-top:10px; }
.jogo .jg-botoes button { flex:1; min-height:50px; padding:12px; border-radius:14px; border:1px solid var(--linha); background:var(--sup); color:var(--tinta); font:600 15px/1.2 var(--sans); cursor:pointer; transition:transform .12s ease; }
.jogo .jg-botoes button:active { transform:scale(.97); }
.jogo .jg-botoes .jg-pri { flex:1.35; background:var(--tinta); border-color:var(--tinta); color:var(--bg); }
.jogo .jg-botoes button:focus-visible { outline:2px solid var(--tinta); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  .jogo *, .jogo *::before { animation:none !important; transition:none !important; }
  .jogo .jg-pino, .jogo .jg-pino-halo { opacity:1; }
}
.jogo .jg-leg { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.jogo .jg-dica .jg-leg + .jg-leg { margin-left:8px; }
.jogo .jg-q { width:11px; height:11px; border-radius:3px; display:inline-block; }
.jogo .jg-qf { background:var(--fla); } .jogo .jg-ql { background:var(--lula); }
.jogo .jg-qm { border-radius:50%; border:2px solid var(--tinta); box-shadow:0 0 0 2px var(--bg); }