/* SequeLariGTA — Leonida (#leonida). Mapa esquemático em arte própria, cartões de região, lugares e quiz. */

#leo-numeros { grid-template-columns: repeat(4, 1fr); }

/* Selo redondo de néon (arte própria) */
.leo-selo { --t: 52px; flex: none; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 50%; font-size: calc(var(--t) * .48); line-height: 1;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cor, var(--sol)) 70%, #fff) 0, var(--cor, var(--sol)) 40%, color-mix(in srgb, var(--cor, var(--sol)) 35%, #120c2a) 100%);
  box-shadow: 0 0 0 3px #120c2a, 0 0 0 5px color-mix(in srgb, var(--cor, var(--sol)) 80%, transparent), 0 0 18px color-mix(in srgb, var(--cor, var(--sol)) 55%, transparent); }
.leo-selo.grande { --t: 74px; }

/* O estado */
.leo-estado { display: flex; gap: 20px; align-items: center; margin-top: 18px; --cor: var(--neon-rosa); border-left: 4px solid var(--neon-rosa); }
.leo-estado h2 { font-family: var(--fonte-display); margin: 0 0 4px; font-style: italic; }
.leo-estado p { margin: 0 0 6px; }

/* ---------- Mapa ---------- */
.leo-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; margin-top: 14px; }
.leo-mapa-caixa { position: sticky; top: 84px; }
.leo-mapa { position: relative; aspect-ratio: 100 / 130; padding: 0; overflow: hidden; max-height: 78vh; margin: 0 auto; }
.leo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leo-terra { fill: url(#leo-terra); stroke: #5ff0d8; stroke-width: .45; stroke-opacity: .7; filter: drop-shadow(0 0 1.2px rgba(45, 226, 200, .6)); }
.leo-ilha { stroke-width: .3; }
.leo-divisa { stroke: var(--sol); stroke-width: .5; stroke-dasharray: 1.6 1.2; fill: none; opacity: .8; }
.leo-texto-mapa { font-size: 2.6px; font-weight: 700; letter-spacing: .4px; fill: var(--sol); text-transform: uppercase; }
.leo-texto-mapa.mar { fill: #7fd1ff; opacity: .55; font-style: italic; }
.leo-onda { fill: none; stroke: #7fd1ff; stroke-width: .35; stroke-linecap: round; opacity: .35; animation: leo-onda 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes leo-onda { 50% { transform: translateX(1.6px); opacity: .6; } }
.leo-rosa circle { fill: rgba(13, 16, 40, .6); stroke: var(--sol); stroke-width: .3; }
.leo-rosa path { fill: var(--sol); }
.leo-rosa text { font-size: 2.6px; font-weight: 900; fill: var(--sol); }
.leo-zona { transition: opacity .3s; transform-box: fill-box; transform-origin: center; }
.leo-zona circle { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; transform-origin: center; }
.leo-zona.ativa circle:first-child { transform: scale(1.25); animation: leo-pulsa 2.6s ease-in-out infinite; }
@keyframes leo-pulsa { 50% { opacity: .7; } }
.leo-zona.fora { opacity: .12; }
.leo-incerta { fill: none; stroke: var(--cor); stroke-width: .35; stroke-dasharray: 1 1; opacity: .8; }

.leo-pino { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; cursor: pointer; z-index: 2; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.leo-pino-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.25rem; background: #120c2a;
  border: 2px solid var(--cor); box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 55%, transparent); transition: box-shadow .25s, background .25s; }
.leo-pino-nome { padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 800; white-space: nowrap; background: rgba(13, 16, 40, .8); border: 1px solid color-mix(in srgb, var(--cor) 50%, transparent); }
.leo-pino:hover, .leo-pino:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.leo-pino.ativo { z-index: 3; transform: translate(-50%, -50%) scale(1.18); }
.leo-pino.ativo .leo-pino-icone { background: var(--cor); box-shadow: 0 0 0 4px rgba(13, 16, 40, .8), 0 0 24px var(--cor); }
.leo-pino.ativo .leo-pino-nome { background: var(--cor); color: #120c2a; }
.leo-pino.fora { opacity: .25; }
.leo-aviso { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--raio-p); background: rgba(13, 16, 40, .82); border: 1px solid var(--borda); color: var(--texto-2); }
.leo-ficha .leo-aviso { margin: 0; }

.leo-ficha { --cor: var(--neon-rosa); border-top: 4px solid var(--cor); display: grid; gap: 12px; min-height: 100%; }
.leo-ficha-topo, .leo-regiao-topo { display: flex; gap: 14px; align-items: center; }
.leo-ficha h3 { font-family: var(--fonte-display); margin: 4px 0; font-size: clamp(1.35rem, 3.6vw, 1.85rem); font-style: italic; line-height: 1.1; color: color-mix(in srgb, var(--cor) 45%, #fff); }
.leo-apelido { background: color-mix(in srgb, var(--cor) 18%, transparent); color: color-mix(in srgb, var(--cor) 60%, #fff); }
.leo-resumo { margin: 0; font-weight: 600; }
.leo-ficha .pers-fatos div { border-left-color: color-mix(in srgb, var(--cor) 80%, transparent); }
a.leo-gente { text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.leo-gente:hover { transform: translateY(-2px); box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--agua)) 60%, transparent); }

/* ---------- Regiões ---------- */
.leo-regioes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.leo-regioes .cartao + .cartao { margin-top: 0; }
.leo-regiao { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--cor); }
.leo-regiao h3 { font-family: var(--fonte-display); margin: 0; font-style: italic; color: color-mix(in srgb, var(--cor) 45%, #fff); }
.leo-regiao p { margin: 0; }
.leo-regiao.ativa { box-shadow: var(--sombra), 0 0 0 2px var(--cor), 0 0 26px color-mix(in srgb, var(--cor) 40%, transparent); }
.leo-conta { color: var(--texto-2); }

/* Entrada ao rolar (todas as listas da página) */
.leo-regiao, .leo-lugar, .leo-par { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s; transition-delay: calc(var(--i, 0) * 70ms); }
.leo-regiao.visivel, .leo-lugar.visivel, .leo-par.visivel { opacity: 1; transform: none; }

/* ---------- Lugares ---------- */
.leo-lugares { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.leo-lugares .cartao + .cartao { margin-top: 0; }
.leo-lugar { display: flex; gap: 12px; align-items: flex-start; border-left: 4px solid var(--cor); padding: 16px; }
.leo-lugar[hidden] { display: none; }
.leo-lugar h3 { margin: 0 0 4px; font-size: 1.02rem; }
.leo-lugar p { margin: 6px 0 0; font-size: .92rem; }
.leo-lugar-icone, .leo-par-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.3rem; background: color-mix(in srgb, var(--cor) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); }
.leo-lugar-reg { font: inherit; font-size: .75rem; font-weight: 800; padding: 2px 10px; border-radius: 99px; cursor: pointer; color: var(--texto); background: color-mix(in srgb, var(--cor) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); transition: transform .2s, box-shadow .2s; }
.leo-lugar-reg:hover { transform: translateY(-1px); box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 55%, transparent); }

/* ---------- Inspirações ---------- */
.leo-inspira { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.leo-inspira .cartao + .cartao { margin-top: 0; }
.leo-par { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 14px 18px; }
.leo-par-nome, .leo-par-real { font-weight: 800; font-size: 1.05rem; }
.leo-par-nome .leo-lugar-reg { font-size: 1rem; }
.leo-par-real { color: var(--sol); }
.leo-par-seta { font-size: 1.4rem; color: var(--cor); text-shadow: 0 0 10px var(--cor); text-align: center; }
.leo-par .fonte { grid-column: 2 / -1; margin: 0; }

/* ---------- Quiz ---------- */
.leo-quiz { display: grid; gap: 16px; }
.leo-quiz-cabeca h3 { margin: 0; font-style: italic; }
.leo-quiz-cabeca p { margin: 4px 0 0; }
.leo-pergunta { border: 0; margin: 0; padding: 0; }
.leo-pergunta legend { font-weight: 800; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.leo-quiz-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--neon-rosa); color: #1a0a1e; font-weight: 800; font-size: .85rem; } /* C5: texto escuro no rosa (contraste AA) */
.leo-pergunta.respondida .leo-quiz-n { background: var(--agua); color: #120c2a; }
.leo-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.leo-opcao { font: inherit; font-weight: 700; text-align: left; padding: 12px 16px; border-radius: var(--raio-p); cursor: pointer; color: var(--texto); background: rgba(13, 16, 40, .55); border: 1px solid var(--borda); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.leo-opcao:hover { transform: translateY(-2px); border-color: var(--neon-agua); box-shadow: 0 0 14px rgba(25, 227, 255, .3); }
.leo-opcao[aria-pressed="true"] { background: color-mix(in srgb, var(--neon-agua) 22%, var(--cartao)); border-color: var(--neon-agua); }
.leo-quiz-resultado { display: none; gap: 16px; align-items: center; padding: 16px; border-radius: var(--raio-p); background: color-mix(in srgb, var(--cor, var(--sol)) 12%, rgba(13, 16, 40, .6)); border: 2px solid var(--cor, var(--sol)); }
.leo-quiz-resultado.on { display: flex; animation: leo-surge .5s cubic-bezier(.3, 1.5, .5, 1); }
.leo-quiz-resultado p { margin: 0 0 6px; }
.leo-quiz-nome { font-family: var(--fonte-display); display: block; font-size: 1.5rem; font-style: italic; color: color-mix(in srgb, var(--cor) 45%, #fff); }
@keyframes leo-surge { from { opacity: 0; transform: scale(.94); } }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .leo-palco { grid-template-columns: 1fr; }
  .leo-mapa-caixa { position: static; }
  .leo-mapa { max-height: none; max-width: 460px; }
  .leo-regioes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #leo-numeros { grid-template-columns: repeat(2, 1fr); }
  .leo-regioes, .leo-opcoes { grid-template-columns: 1fr; }
  .leo-estado { flex-direction: column; align-items: flex-start; }
  .leo-pino-icone { width: 34px; height: 34px; font-size: 1.05rem; }
  .leo-pino-nome { font-size: .64rem; padding: 1px 6px; }
  .leo-par { grid-template-columns: auto minmax(0, 1fr); }
  .leo-par-seta { display: none; }
  .leo-par-real::before { content: "lembra "; color: var(--texto-2); font-weight: 600; font-size: .85rem; }
  .leo-par-real { grid-column: 2; }
  .leo-par .fonte { grid-column: 1 / -1; }
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .leo-onda, .leo-zona.ativa circle:first-child, .leo-quiz-resultado.on { animation: none; }
  .leo-regiao, .leo-lugar, .leo-par { opacity: 1; transform: none; transition: none; }
  .leo-pino, .leo-zona circle { transition: none; }
}

/* ---------- Marcações da comunidade no mapa (pendência 21) ---------- */
.leo-com-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; padding: 10px 14px; border-radius: var(--raio-p);
  background: rgba(13, 16, 40, .78); border: 1px solid rgba(25, 227, 255, .25); }
.leo-com-barra:empty { display: none; }
.leo-com-texto { margin: 0; flex: 1 1 240px; font-size: .9rem; color: var(--texto-2); }
.leo-com-texto b { color: var(--texto); }
.leo-com-botao { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; border: 1px solid rgba(25, 227, 255, .45);
  background: #120c2a; color: var(--texto); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.leo-com-botao:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 16px rgba(25, 227, 255, .35); }
.leo-com-botao:disabled { opacity: .55; cursor: default; }
.leo-com-chave { position: relative; width: 36px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .15); transition: background .25s; }
.leo-com-chave i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.leo-com-botao[aria-pressed="true"] .leo-com-chave { background: var(--neon-agua); }
.leo-com-botao[aria-pressed="true"] .leo-com-chave i { transform: translateX(16px); }
.leo-com-mural { font-size: .85rem; font-weight: 700; white-space: nowrap; }

.leo-pino-icone { position: relative; }
/* Bolha com a quantidade de marcações (agrupadas por região) */
.leo-pino-com { position: absolute; top: -8px; right: -10px; min-width: calc(22px * var(--tam, 1)); height: calc(22px * var(--tam, 1)); padding: 0 5px;
  display: grid; place-items: center; border-radius: 99px; font-size: calc(.72rem * var(--tam, 1)); font-weight: 900; color: #120c2a;
  background: var(--neon-agua); box-shadow: 0 0 0 2px #120c2a, 0 0 14px rgba(25, 227, 255, .8); animation: leo-com-entra .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.leo-pino-com::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--neon-agua); opacity: 0; animation: leo-com-pulso 2.4s ease-out infinite; }
@keyframes leo-com-entra { from { transform: scale(0); } }
@keyframes leo-com-pulso { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.leo-zona.tem-com circle:first-child { stroke: var(--neon-agua); stroke-width: .35; stroke-dasharray: 1.2 1.2; animation: leo-com-gira 18s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes leo-com-gira { to { transform: rotate(360deg); } }

/* Bloco "Marcado pela comunidade" na ficha da região */
.leo-com-ficha { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.leo-com-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--neon-agua); color: #120c2a; font-size: .75rem; font-weight: 900; }
.leo-com-lista { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 8px; }
.leo-com-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgba(13, 16, 40, .6); border-left: 3px solid var(--neon-agua);
  overflow-wrap: anywhere; animation: leo-com-surge .45s ease both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s, background .2s; }
.leo-com-item:hover { transform: translateX(3px); background: rgba(25, 227, 255, .08); }
@keyframes leo-com-surge { from { opacity: 0; transform: translateY(8px); } }
.leo-com-desc { font-size: .9rem; }
.leo-com-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .78rem; color: var(--texto-2); }
.leo-com-den { margin-left: auto; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--borda); background: transparent; color: var(--texto-2); font: inherit; font-size: .74rem; cursor: pointer; }
.leo-com-den:hover:not(:disabled) { color: var(--coral); border-color: var(--coral); }
.leo-com-den:disabled { opacity: .6; cursor: default; }
.leo-com-marcar { margin-top: 2px; }
.leo-com-nota { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .leo-pino-com, .leo-pino-com::after, .leo-zona.tem-com circle:first-child, .leo-com-item { animation: none; }
  .leo-com-chave i, .leo-com-item, .leo-com-botao { transition: none; }
  .leo-com-item:hover, .leo-com-botao:hover:not(:disabled) { transform: none; }
}