/* Primeira partida guiada (M2-20). O index.html já liga este arquivo. Nenhum font-size abaixo de 11px (typography.test.mjs). */
/* Menu: o passo 'first' troca o menu e a preparação pela oferta do guia (mesma tipografia do title-option). */
#intro[data-step=first] :is(.title-menu,.title-setup),#intro:not([data-step=first]) .title-first{display:none}
.title-first{display:grid;gap:14px;animation:menu-in .5s cubic-bezier(.16,1,.3,1) both}
.title-first header{display:flex;align-items:center;gap:10px}
.title-first h2{margin:0;font:600 26px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#f6efe4}
.first-options{display:grid}
/* screens.css encolhe o voltar para 40px em telas baixas; aqui ele fica nos 44px do alvo mínimo. */
.title-first .setup-back{width:44px;height:44px}

/* Balão do guia: o mesmo painel da dica (#tip, map-shell.css), com o Entendi em âmbar para ler como "o jogo espera você".
   Fica sob os painéis laterais (z 150) e o aviso (z 160), acima da dica (z 140). */
#guide{position:fixed;z-index:145;display:grid;gap:8px;width:min(320px,calc(100vw - 24px));padding:12px 10px 10px 14px;border:1px solid #efba7166;border-radius:8px;background:#0b1d25f7;box-shadow:0 10px 32px #000a;color:#e3efe9;font:14px/1.4 var(--body);animation:guide-in .35s cubic-bezier(.16,1,.3,1) both}
#guide[hidden]{display:none}
#guide-text{margin:0;text-wrap:pretty}
.guide-actions{display:flex;align-items:center;gap:6px}
#guide-step{margin-right:auto;font:600 12px var(--body);font-variant-numeric:tabular-nums;color:#c9b38f}
.guide-actions button{min-height:44px;padding:0 14px;border-radius:6px;font:600 13px var(--body);cursor:pointer}
#guide-ok{border:1px solid #efba71;background:#efba71;color:#24180a}
#guide-ok[hidden]{display:none}
#guide-skip{border:1px solid #ffffff2e;background:none;color:#cfe0da}
.guide-actions button:focus-visible{outline:2px solid #fff1c8;outline-offset:2px}
/* Sem batida na tela: só a pílula "Guia n de 8 · Pular guia", à direita, sob o relógio (map-shell.css: 7px + 38px).
   À esquerda, o evento recolhido (live-event, y 242–286 em 390px) a cobria. */
#guide.is-idle{right:max(12px,env(safe-area-inset-right));top:calc(54px + env(safe-area-inset-top));width:auto;padding:0 0 0 12px;border-color:#ffffff24;background:#0b1d25d9;box-shadow:0 6px 20px #0007;animation:none}
#guide.is-idle #guide-skip{border:0;border-left:1px solid #ffffff1f;border-radius:0 8px 8px 0}
/* Anel sobre o alvo: pulsa devagar para o olho achar a bolha, o país ou o botão; não pega o toque. */
#guide-ring{position:fixed;z-index:144;border:2px solid #efba71;border-radius:12px;box-shadow:0 0 0 4px #efba7126,0 6px 18px #0006;pointer-events:none;animation:guide-ring 1.6s ease-out infinite}
#guide-ring[hidden]{display:none}
@keyframes guide-in{from{opacity:0;transform:translateY(6px)}}
@keyframes guide-ring{50%{box-shadow:0 0 0 9px #efba7100,0 6px 18px #0006}}
/* Diálogo modal (menu inicial incluso), evento aberto (live-event sem .compact, por cima do mapa) ou escolha da origem na
   frente: o guia espera, sem sumir do estado. O aviso do topo não esconde nada: fica acima (z 160) e não alcança a pílula. */
body:has(dialog:modal) :is(#guide,#guide-ring),body:has(#live-event:not([hidden]):not(.compact)) :is(#guide,#guide-ring),body.choosing-origin :is(#guide,#guide-ring){visibility:hidden}
@media(prefers-reduced-motion:reduce){#guide,#guide-ring{animation:none}}