/* Onde Fica? — mapa-múndi de viagem: mar claro, terra em cores vivas, tinta azul-marinho, alfinete vermelho.
   Celular: o mapa é o palco (tela cheia), com cartão no topo e folha de ação embaixo. Computador: painel à esquerda + mapa. */
:root{
  --ink:#14284B; --ink2:#3C5078; --muted:#51608A;
  --sea:#CDE9F5; --sea2:#B4DCEE; --paper:#FFFDF6;
  --red:#D93636; --red-t:#C42F2F; --pin:#FF4B4B; --sun:#FFC93C; --ok:#2FB36B;
  --N:#9BDBA8; --NE:#FFD58A; --CO:#FFB59A; --SE:#F59DA0; --S:#BBAAF3;
  --r:20px; --shadow:0 6px 0 #14284B2e;
  --f-title:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --listras:repeating-linear-gradient(135deg,#ffffff00 0 22px,#ffffff38 22px 24px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--sea);background-image:var(--listras);color:var(--ink);font:17px/1.45 var(--f-body);overscroll-behavior:none}
h1,h2{font-family:var(--f-title);font-weight:600;line-height:1.08;margin:0 0 .4em}
h1{font-size:clamp(1.9rem,7vw,2.6rem)}
h2{font-size:1.3rem}
p{margin:0 0 .8em}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.app{max-width:980px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 18px env(safe-area-inset-bottom,0)}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 0 10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-title);font-weight:700;font-size:1.7rem}
.logo i{font-style:normal;color:#E03A3A}
.top-btns{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:var(--paper);font-family:var(--f-title);font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;padding:0;flex:none}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.icon-btn.small{width:38px;height:38px;border-radius:12px;font-size:1rem}

.screen{flex:1;display:flex;flex-direction:column;gap:16px;padding-bottom:22px}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:20px 18px}
.big-pin{margin-bottom:6px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:3px solid var(--ink);border-radius:18px;padding:.75em 1em;font-family:var(--f-title);font-weight:600;font-size:1.1rem;cursor:pointer;background:var(--paper);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s;margin-top:12px}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-red{background:var(--red);color:#fff;box-shadow:0 5px 0 var(--ink)}
.btn-ghost{background:#ffffffbb}
.btn-big{font-size:1.3rem;min-height:62px}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,input:focus-visible,.zoom button:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
input{width:100%;font:inherit;font-weight:700;padding:.7em .9em;border:3px solid var(--ink);border-radius:14px;background:#fff;text-align:center;margin-top:6px}
.err{color:var(--red-t);font-weight:700;min-height:1.4em;margin:.4em 0 0}

.kicker{font-family:var(--f-title);font-weight:600;color:var(--red-t);text-transform:uppercase;letter-spacing:.09em;font-size:.88rem;margin:0 0 .3em}
.board{list-style:none;margin:8px 0 0;padding:0}
.board li{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px;font-weight:700}
.board li.me{background:var(--sun);font-weight:800}
.board li:nth-child(even):not(.me){background:#14284B0d}
.board .pos{width:2em;font-family:var(--f-title);font-weight:600}
.board .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pt{font-family:var(--f-title);font-weight:600}
.board-head{display:flex;align-items:baseline;justify-content:space-between}
.board-head h2{margin:0}
.link-btn{background:none;border:0;padding:6px 0 6px 10px;font-weight:800;font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:underline;text-decoration-thickness:2px}

/* ---------- partida ---------- */
.jogando .top,.jogando .aviso-ck{display:none!important}
.jogando .app{max-width:none;padding:0}
.game{position:fixed;inset:0;z-index:5;overflow:hidden;background:var(--sea2)}
.stage{position:absolute;inset:0;background:var(--sea2);background-image:var(--listras);touch-action:none}
#map{width:100%;height:100%;display:block;cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:none}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 0}
.top-group>*,.dock>*{pointer-events:auto}
.panel-logo{display:none}
.hud{display:flex;align-items:center;gap:10px}
.steps{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.st{display:flex;align-items:center;gap:12px}
.st .dot{width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--f-title);font-weight:700;font-size:.9rem;background:var(--paper);flex:none}
.st .nm,.st .km{display:none}
.st.cur .dot{width:40px;height:40px;background:var(--sun);font-size:1.1rem;box-shadow:0 3px 0 var(--ink)}
.st.next .dot{border-style:dashed;color:var(--ink2);font-weight:600}
.st.done .dot{color:#fff}
.st.done.q3 .dot,.st.done.q4 .dot{color:var(--ink)}
.q5 .dot{background:#2FB36B}.q4 .dot{background:#8ACB6B}.q3 .dot{background:#F2D250}.q2 .dot{background:#F5974E}.q1 .dot{background:#E85D5D}
.score{min-width:66px;text-align:right;font-family:var(--f-title);font-weight:600;font-size:1.5rem;line-height:1}
.score span{display:block;font-size:.75rem;color:var(--ink2);font-weight:600}

.prompt{margin-top:12px;display:flex;align-items:center;gap:10px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:12px 14px 12px 16px;box-shadow:0 5px 0 var(--ink)}
.prompt-main{flex:1;min-width:0}
.prompt-lbl{display:block;font-size:.75rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.prompt strong{display:block;font-family:var(--f-title);font-weight:600;font-size:clamp(1.8rem,9vw,2.4rem);line-height:1.05;overflow-wrap:anywhere}
.prompt strong small{font-size:.5em;color:var(--red-t);margin-left:.4em;font-weight:600}
.chip{min-height:44px;padding:0 14px;border-radius:99px;border:3px solid var(--ink);background:var(--sun);box-shadow:0 3px 0 var(--ink);font-weight:800;font-size:.88rem;line-height:1.1;text-align:center;cursor:pointer;color:var(--ink)}
.chip small{display:block;font-size:.75rem;font-weight:700;opacity:.8}
.chip:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.chip:disabled{opacity:.5;cursor:not-allowed}

.zoom{position:absolute;right:12px;top:calc(50% - 30px);display:flex;flex-direction:column;gap:8px;z-index:2}
.zoom button{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink);font:700 1.5rem var(--f-title);cursor:pointer;display:grid;place-items:center;padding:0;color:var(--ink)}
.zoom button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.toast{position:absolute;left:50%;bottom:190px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.5em 1.1em;border-radius:99px;font-weight:800;font-size:.92rem;opacity:0;pointer-events:none;transition:.25s;max-width:86%;text-align:center;z-index:3}
.toast.on{opacity:1;transform:translate(-50%,0)}

.dock{margin:auto -14px 0;background:var(--paper);border-top:3px solid var(--ink);border-radius:26px 26px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 22px #14284B2e}
.dock-help{text-align:center;font-size:.88rem;font-weight:700;color:var(--ink2);margin:0 0 10px}
.dock-keys{display:none}
.actions .btn,.reveal .btn{margin-top:0}
.reveal-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.reveal-dist b{font-family:var(--f-title);font-weight:600;font-size:3.1rem;line-height:1}
.reveal-dist span{margin-left:8px;color:var(--muted);font-weight:800;font-size:1.05rem}
.reveal-pts{text-align:right;font-family:var(--f-title);font-weight:600;color:#1B7F4B;line-height:1}
.reveal-pts b{font-size:2.6rem}
.reveal-pts span{display:block;font-size:.95rem}
.reveal-msg{margin:6px 0 14px;font-weight:800;font-size:1.05rem;color:var(--ink2)}

/* mapa */
.uf{stroke:#fff;stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .25s}
.uf-N{fill:var(--N)}.uf-NE{fill:var(--NE)}.uf-CO{fill:var(--CO)}.uf-SE{fill:var(--SE)}.uf-S{fill:var(--S)}
.uf.hot{fill:#fff;stroke:var(--pin);stroke-width:3}
.uf-lbl{font:800 11px var(--f-body);fill:#14284B99;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#ffffffb0;stroke-width:2.5px}
.pin-me .pin-body{fill:var(--pin);stroke:var(--ink);stroke-width:2.8}
.pin-real .pin-body{fill:var(--ok);stroke:var(--ink);stroke-width:2.8}
.pin-dot{fill:#fff;stroke:var(--ink);stroke-width:2.4}
.tag rect{fill:var(--paper);stroke:var(--ink);stroke-width:2.2}
.tag.real rect{fill:var(--ok)}
.tag text{font:800 12px var(--f-body);fill:var(--ink);text-anchor:middle}
.tag.real text{fill:#fff}
.link-line{stroke:var(--ink);stroke-width:2.6;stroke-dasharray:7 6;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.ring{fill:#2FB36B33;stroke:var(--ok);stroke-width:3;vector-effect:non-scaling-stroke}

/* ---------- resultado ---------- */
.final{max-width:560px;margin:0 auto;width:100%}
.postal{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:20px 18px 18px}
.selo{position:absolute;right:16px;top:14px;width:64px;height:76px;border:3px dashed var(--ink);border-radius:6px;background:var(--sun);display:grid;place-items:center;transform:rotate(4deg)}
.final-score b{display:block;font-family:var(--f-title);font-weight:700;font-size:5rem;line-height:1;margin-top:4px}
.final-score span{font-weight:800;color:var(--muted)}
.final-msg{font-family:var(--f-title);font-weight:600;font-size:1.5rem;margin:10px 0 0}
.rank-pill{display:inline-block;margin:10px 0 0;background:var(--sun);border:3px solid var(--ink);border-radius:99px;padding:3px 14px;font-weight:800;font-size:.95rem}
.bars{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:11px}
.bars li{display:grid;grid-template-columns:30px minmax(0,7.2em) minmax(0,1fr) 4.2em;align-items:center;gap:8px;font-weight:800;font-size:.95rem}
.bars .stamp{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--f-title);font-weight:700;font-size:.85rem;color:#fff}
.bars .stamp.q3,.bars .stamp.q4{color:var(--ink)}
.bars .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .tr{height:14px;border-radius:99px;border:3px solid var(--ink);background:#fff;overflow:hidden}
.bars .tr i{display:block;height:100%}
.bars .km{text-align:right;color:var(--muted);font-size:.82rem;font-weight:700}
.share-box{background:#ffffffbf;border:3px dashed var(--ink);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.share-box p{margin:0;font-size:.84rem;font-weight:700;color:var(--ink2);line-height:1.3}
.squares{display:flex;gap:5px;flex:none}
.squares i{width:26px;height:26px;border-radius:6px;border:2px solid var(--ink);display:block}
.final-actions .btn:first-child{margin-top:0}
.final-actions .two{display:flex;gap:10px}
.next-line{text-align:center;font-weight:800;color:var(--ink2);margin:0}
.next-line b{font-family:var(--f-title);font-weight:600;font-size:1.15rem;color:var(--ink)}

/* ---------- janela ---------- */
.sheet{position:fixed;inset:0;background:#14284Bb0;display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet-card{background:var(--paper);border:3px solid var(--ink);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:86dvh;overflow:auto;padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px))}
@media(min-width:600px){.sheet{align-items:center}.sheet-card{border-radius:22px}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-head h2{margin:0}
.how li{margin:.5em 0}
.sheet pre{white-space:pre-wrap;font:700 1rem/1.5 var(--f-body)}

/* ---------- computador: painel à esquerda, mapa à direita ---------- */
@media(min-width:900px){

  /* jogo: o painel ocupa a altura toda da janela e não rola; o que sobra de espaço vai para o meio */
  .game{display:grid;grid-template-columns:minmax(360px,430px) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .stage{position:relative;inset:auto;order:2;min-height:0}
  .panel{position:relative;inset:auto;order:1;pointer-events:auto;background:var(--paper);border-right:3px solid var(--ink);padding:clamp(14px,3vh,26px) 28px;gap:clamp(8px,1.8vh,16px);overflow:hidden;min-height:0;height:100%}
  .top-group{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,16px)}
  .panel-logo{display:flex;order:-1}
  .hud{flex-direction:column;align-items:stretch;gap:12px;order:1}
  .hud .icon-btn,.score{display:none}
  .prompt{order:0;margin:0;flex-direction:column;align-items:flex-start;background:var(--ink);color:#fff;box-shadow:0 6px 0 #14284B38;padding:18px 20px 20px}
  .prompt-lbl{color:#BFD0F0}
  .prompt strong{font-size:3.2rem;margin-top:6px}
  .prompt strong small{color:var(--sun)}
  .chip{margin-top:12px;border-color:var(--paper)}
  .chip small{display:inline;margin-left:6px}
  .steps{flex-direction:column;align-items:stretch;gap:10px;justify-content:flex-start}
  .st .nm,.st .km{display:block}
  .st .nm{flex:1;font-weight:800}
  .st .km{font-weight:700;font-size:.86rem;color:var(--muted)}
  .st.cur{background:#FFF1BF;border:3px solid var(--ink);border-radius:14px;padding:5px 10px;margin:0 -6px}
  .st.cur .dot{width:34px;height:34px;font-size:1rem;box-shadow:none}
  .st.next .nm{color:var(--muted);font-weight:700}
  .dock{margin:auto 0 0;background:none;border:0;box-shadow:none;border-radius:0;padding:0}
  .dock-help{display:none}
  .dock-keys{display:block;text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);margin:10px 0 0}
  .zoom{top:20px;right:20px}
  .toast{bottom:24px}
  .prompt{padding:clamp(12px,2.2vh,18px) 20px clamp(12px,2.4vh,20px)}
  .prompt strong{font-size:clamp(2.1rem,6.2vh,3.2rem)}
  .chip{margin-top:clamp(6px,1.4vh,12px)}
  .panel .btn-big{min-height:clamp(50px,7.6vh,62px)}
  .reveal-dist b{font-size:clamp(2.2rem,5.4vh,3.1rem)}
  .reveal-pts b{font-size:clamp(2rem,4.8vh,2.6rem)}
  .reveal-msg{margin:4px 0 clamp(8px,1.6vh,14px)}
}
@media(min-width:900px) and (max-height:780px){
  .dock-keys{display:none}
  .st .dot{width:30px;height:30px}
  .steps{gap:6px}
  .st.cur{padding:3px 10px}
  .panel-logo{font-size:1.4rem}
}
@media(min-width:900px) and (max-height:700px){
  .panel-logo{display:none}
  .prompt strong{font-size:2rem}
  .st .dot{width:28px;height:28px;font-size:.8rem}
  .reveal-msg{margin-bottom:8px}
  .panel .btn-big{min-height:48px;font-size:1.15rem}
}

@keyframes cai{from{transform:translateY(-34px);opacity:0}}
@keyframes onda{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.7)}}
@keyframes traco{from{stroke-dashoffset:300}}
@keyframes sobe{from{transform:translateY(26px);opacity:0}}
@keyframes pulsa{50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:no-preference){
  .pin-drop{animation:cai .45s cubic-bezier(.3,1.6,.5,1)}
  .ring.on{animation:onda 1.1s ease-out 2;transform-box:fill-box;transform-origin:center}
  .link-line.draw{animation:traco .7s ease-out}
  .reveal,.sheet-card{animation:sobe .25s ease-out}
  .btn-red.pulse:not(:disabled){animation:pulsa 1.5s ease-in-out infinite}
}

/* ---------- tela de título (início): uma tela só, como a de um jogo ---------- */
.home-on .top{display:none}
.home-on .app{max-width:none;padding:0}
.titulo{position:fixed;inset:0;z-index:5;overflow:hidden;background:var(--sea);background-image:radial-gradient(ellipse 80% 55% at 50% 40%,#ffffffa6,#ffffff00),var(--listras);--tmapa-top:190px;--tmapa-h:clamp(220px,calc(100dvh - 520px),345px)}
.titulo[hidden]{display:none}
.t-marca{position:absolute;left:0;right:0;top:calc(84px + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;z-index:3}
.t-logo{margin:0;display:inline-flex;align-items:center;gap:10px;font:700 56px/1 var(--f-title);letter-spacing:-.01em;text-shadow:0 3px 0 #fff}
.t-logo i{font-style:normal;color:#E03A3A}
.t-pin{width:38px;height:48px;filter:drop-shadow(0 3px 0 #14284B40)}
.t-pin path{fill:#FF4B4B}
.ouro .t-pin path{fill:var(--sun)}
.t-sub{margin:4px 0 0;font-size:16px;font-weight:800;color:var(--ink2)}

.t-barra{position:absolute;left:14px;right:14px;top:calc(16px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:6}
.t-voltar{flex:none;display:inline-flex;align-items:center;gap:8px;width:48px;height:48px;justify-content:center;border-radius:15px;border:3px solid var(--ink);background:var(--ink);color:#fff;box-shadow:0 3px 0 #14284B66;text-decoration:none;font:600 18px var(--f-title)}
.t-voltar span{display:none}
.t-chip{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:48px;background:var(--paper);border:3px solid var(--ink);border-radius:99px;padding:0 14px 0 4px;box-shadow:0 3px 0 var(--ink);cursor:pointer;text-align:left}
.t-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);display:grid;place-items:center;font:700 16px var(--f-title)}
.t-nome{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-seq{flex:none;display:flex;align-items:center;gap:3px;font:600 17px var(--f-title)}
.t-estrela{display:none;flex:none}
.ouro .t-estrela{display:block}
.t-botoes{flex:none;display:flex;gap:8px}
.t-botoes .icon-btn{width:48px;height:48px;border-radius:15px}

.t-mapa,.t-rota{position:absolute;left:50%;transform:translateX(-50%);top:var(--tmapa-top);height:var(--tmapa-h);aspect-ratio:796.7/808}
.t-mapa{z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 96%);mask-image:linear-gradient(to bottom,#000 60%,transparent 96%)}
.t-rota{z-index:2;pointer-events:none}
.t-mapa>svg.t-uf{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 5px 0 #14284B2e)}
.t-mapa .uf{vector-effect:non-scaling-stroke}
.t-mapa>svg.t-trilha{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.t-parada{position:absolute;z-index:1;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--paper);border:3px dashed var(--ink);display:grid;place-items:center;font:600 16px var(--f-title);color:var(--ink2);box-sizing:border-box}
.t-parada.atual{width:38px;height:38px;background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink);font-weight:700;font-size:18px}
.t-parada.atual::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:#FFC93C66;border:3px solid var(--sun);z-index:-1}
.t-parada.feita{border:3px solid var(--ink);color:#fff;font-weight:700}
.t-parada.q5{background:#2FB36B}.t-parada.q4{background:#8ACB6B;color:var(--ink)}.t-parada.q3{background:#F2D250;color:var(--ink)}.t-parada.q2{background:#F5974E}.t-parada.q1{background:#E85D5D}
.t-parada small{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--paper);border:2px solid var(--ink);border-radius:99px;padding:1px 10px;font:800 12px var(--f-body);color:var(--ink);white-space:nowrap}
.t-parada.atual small{background:var(--ink);color:#fff}

.t-rota .seg{stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.t-rota .seg.fundo{stroke:var(--ink);stroke-width:9}
.t-rota .seg.ouro{stroke:var(--sun);stroke-width:4.5}
.t-rota .mk{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);box-sizing:border-box;display:grid;place-items:center;font:700 13px var(--f-title)}

.t-balao{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;min-height:44px;background:var(--bg,#FFFDF6);color:var(--ink);border:3px solid var(--ink);border-radius:99px;padding:4px 14px 4px 8px;box-shadow:0 4px 0 #14284B40;font:600 19px var(--f-title);cursor:pointer;transition:transform .15s}
.t-balao:hover{transform:scale(1.06) rotate(0)!important}
.t-balao.achado{background:#C9F0D5}
.t-balao.aberto{visibility:hidden}
.t-balao svg{flex:none}
.t-balao small{font:600 .72em var(--f-title);color:var(--red-t)}
.b-macapa,.b-bage,.b-pelotas{display:none}
.b-petrolina{left:10px;top:calc(var(--tmapa-top) + 46px);transform:rotate(-7deg);--bg:#FFFDF6}
.b-sobral{right:8px;top:calc(var(--tmapa-top) + 128px);transform:rotate(6deg);--bg:#9BDBA8;font-size:18px}
.b-guapimirim{left:12px;top:calc(var(--tmapa-top) + 230px);transform:rotate(4deg);--bg:#FFC93C;font-size:18px}

.t-fato{position:absolute;z-index:8;width:min(310px,calc(100% - 24px));background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:0 7px 0 #14284B4d;padding:14px 16px 16px}
.t-fato h2{margin:4px 0 0;padding-right:30px;font-size:24px}
.t-fato p{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink2)}
.t-fato .rotulo,.t-ouro .rotulo{font:600 12px var(--f-title);letter-spacing:.1em;text-transform:uppercase;color:var(--red-t)}
.t-x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:0;cursor:pointer}
.t-contador{position:absolute;z-index:5;right:14px;top:calc(178px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 4px;border-radius:99px;border:3px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink)}
.t-contador.ouro-ok{background:var(--sun)}
.t-contador b{width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font:700 13px var(--f-title)}
.t-contador span{font:600 14px var(--f-title)}
.t-ouro{position:absolute;z-index:9;left:50%;top:calc(var(--tmapa-top) + 80px);width:min(440px,calc(100% - 56px));transform:translateX(-50%) rotate(-2deg);box-sizing:border-box;background:var(--sun);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:20px;text-align:center}
.t-ouro h2{font-size:34px;margin:2px 0 0}
.t-ouro p{margin:8px 0 0;font-size:17px;font-weight:700;line-height:1.35}
.t-ouro .selo-txt{font:600 13px var(--f-title);letter-spacing:.08em;text-transform:uppercase;color:#7A4A00}

.t-contorno{position:absolute;z-index:5;left:14px;right:14px;bottom:calc(218px + env(safe-area-inset-bottom,0px) + var(--aviso-h,0px));display:flex;align-items:center;gap:12px;background:#ECDCB4;color:#3B2A17;border:3px solid #3B2A17;border-radius:6px;box-shadow:4px 4px 0 #3B2A17;padding:10px 6px 10px 10px;font-family:'EB Garamond',Georgia,serif}
.t-contorno[hidden]{display:none}
.t-contorno .mini{flex:none;width:52px;height:52px;background:#C9D3BB;border:2px solid #3B2A17;display:grid;place-items:center}
.t-contorno .tx{flex:1;min-width:0}
.t-contorno .jt,.t-contorno .nome{font-family:'IM Fell English SC',Georgia,serif}
.t-contorno .jt{font-size:12px;letter-spacing:.14em;color:#9C3B22}
.t-contorno .nome{font-size:25px;letter-spacing:.04em;line-height:1}
.t-contorno .nome span{color:#9C3B22}
.t-contorno p{display:none;margin:0}
.t-contorno .ir{flex:none;padding:8px 14px;background:#3B2A17;color:#ECDCB4;border-radius:4px;box-shadow:3px 3px 0 #9C3B22;font:16px 'IM Fell English SC',Georgia,serif;letter-spacing:.05em;text-decoration:none}
.t-contorno .fechar{flex:none;width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:0;cursor:pointer}

.t-cta{position:absolute;z-index:5;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px) + var(--aviso-h,0px));padding:0 18px;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.t-cta>*{pointer-events:auto}
.t-jogar{width:100%;max-width:440px;height:78px;border-radius:24px;border:4px solid var(--ink);background:var(--red);color:#fff;box-shadow:0 7px 0 var(--ink);font:700 32px var(--f-title);display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;margin:0}
.t-jogar span{font-weight:600;font-size:18px;opacity:.9}
.t-jogar:active:not(:disabled){transform:translateY(4px);box-shadow:0 3px 0 var(--ink)}
.t-jogar:focus-visible,.t-treino:focus-visible,.t-chip:focus-visible,.t-balao:focus-visible,.t-voltar:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
.ouro .t-jogar{background:var(--sun);color:var(--ink)}
.t-treino{width:100%;max-width:440px;height:52px;border-radius:16px;border:3px solid var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--ink);font:600 18px var(--f-title);color:var(--ink);cursor:pointer;margin:6px 0 0}
.t-cta .cta-sub{margin:0;font-size:14px;font-weight:800;color:var(--ink2);text-align:center}
@media(prefers-reduced-motion:no-preference){.t-balao.achado{transition:background .3s}.t-ouro,.t-fato{animation:sobe .25s ease-out}}

@media(min-width:900px){
  .titulo{--tmapa-top:clamp(150px,21vh,200px);--tmapa-h:min(68vh,640px)}
  .t-marca{top:30px}
  .t-logo{font-size:clamp(64px,12.4vh,112px);gap:16px;text-shadow:0 5px 0 #fff}
  .t-pin{width:clamp(44px,8.4vh,76px);height:auto;aspect-ratio:32/40}
  .t-sub{font-size:clamp(16px,2.4vh,22px)}
  .t-barra{display:contents}
  .t-voltar{position:absolute;left:32px;top:28px;width:auto;height:56px;border-radius:99px;padding:0 20px 0 14px;font-size:18px}
  .t-voltar span{display:inline}
  .t-chip{position:absolute;right:32px;top:98px;flex:none;height:56px;gap:12px;padding:0 20px 0 6px}
  .t-avatar{width:40px;height:40px;font-size:18px}
  .t-nome{font-size:17px}
  .t-botoes{position:absolute;right:32px;top:30px;gap:10px}
  .t-botoes .icon-btn{width:52px;height:52px;border-radius:16px}
  .t-parada{width:42px;height:42px;font-size:19px}
  .t-parada.atual{width:46px;height:46px;font-size:22px}
  .t-parada small{display:block}
  .t-balao{font-size:var(--fs,26px);padding:6px 20px 6px 12px;box-shadow:0 5px 0 #14284B40;gap:8px}
  .b-macapa,.b-bage,.b-pelotas{display:flex}
  .b-petrolina{left:10.4%;top:33.3vh;--fs:30px;--bg:#FFFDF6}
  .b-macapa{left:4.9%;top:57.8vh;transform:rotate(4deg);--fs:24px;--bg:#FFC93C}
  .b-bage{left:16%;top:76.7vh;transform:rotate(-3deg);--fs:21px;--bg:#BBAAF3}
  .b-sobral{left:auto;right:11.8%;top:32.2vh;transform:rotate(5deg);--fs:26px;--bg:#9BDBA8}
  .b-guapimirim{left:auto;right:4.2%;top:53.3vh;transform:rotate(-5deg);--fs:32px;--bg:#FFFDF6}
  .b-pelotas{right:22.9%;top:62.8vh;transform:rotate(3deg);--fs:22px;--bg:#FFD58A}
  .t-contador{right:auto;left:32px;top:auto;bottom:calc(30px + var(--aviso-h,0px));height:52px;padding:0 20px 0 8px;box-shadow:0 4px 0 var(--ink)}
  .t-contador b{width:34px;height:34px;font-size:15px}
  .t-contador span{font-size:17px}
  .t-ouro{top:32vh;padding:26px 28px;border-radius:26px;box-shadow:0 10px 0 var(--ink)}
  .t-ouro h2{font-size:44px}
  .t-ouro p{font-size:19px}
  .t-contorno{left:auto;right:32px;bottom:calc(30px + var(--aviso-h,0px));width:316px;display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;padding:20px 22px;border-radius:6px;box-shadow:6px 6px 0 #3B2A17;outline:1px solid #3B2A17;outline-offset:-9px;transform:rotate(1.5deg)}
  .t-contorno .tx{display:contents}
  .t-contorno .jt{grid-column:1/-1;font-size:15px;letter-spacing:.16em}
  .t-contorno .nome{grid-column:1/-1;font-size:42px;line-height:1.05}
  .t-contorno .mini{grid-column:1;grid-row:3;width:72px;height:72px;margin-top:8px}
  .t-contorno p{display:block;grid-column:2;grid-row:3;margin:8px 0 0;font-size:18px;line-height:1.25}
  .t-contorno .ir{grid-column:1/-1;justify-self:start;margin-top:14px;padding:9px 22px;font-size:19px;box-shadow:4px 4px 0 #9C3B22}
  .t-contorno .fechar{position:absolute;right:4px;top:4px}
  .t-cta{bottom:calc(clamp(14px,3.2vh,30px) + var(--aviso-h,0px));gap:clamp(8px,1.5vh,14px)}
  .t-jogar{max-width:440px;height:clamp(64px,9.4vh,84px);font-size:clamp(28px,3.8vh,34px);gap:14px;border-radius:26px;box-shadow:0 8px 0 var(--ink)}
  .t-jogar span{font-size:22px}
  .t-treino{width:auto;max-width:none;height:54px;padding:0 34px;font-size:20px;border-radius:18px;margin:0}
  .t-cta .cta-sub{font-size:16px}
}