:root {
  --fundo: #07111f;
  --fundo2: #0d1b2e;
  --cartao: #122238;
  --borda: #22384f;
  --texto: #e8eef6;
  --texto2: #9fb0c4;
  --ouro: #f2c14e;
  --atm: #4ea3ff;
  --gas: #b07cff;
  --oce: #2fd4c2;
  --sup: #6fcf5a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
#app { height: 100dvh; max-width: 640px; margin: 0 auto; position: relative; background: var(--fundo); }
@media (min-width: 700px) { #app { box-shadow: 0 0 0 1px var(--borda); } }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; margin: 0; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
p { margin: 0.4rem 0; line-height: 1.45; }
button { font: inherit; color: inherit; cursor: pointer; }
.mini { font-size: 0.8rem; color: var(--texto2); }
.rotulo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto2); }
.secao { margin: 1.4rem 0 0.6rem; display: flex; align-items: baseline; gap: 0.6rem; }

/* ---------- telas */
.tela { position: absolute; inset: 0; display: none; flex-direction: column; padding: 16px; padding-bottom: calc(16px + var(--safe-b)); }
.tela.ativa { display: flex; }
.tela.rolavel { overflow-y: auto; padding: 0; }
.tela.rolavel .conteudo { padding: 16px; padding-bottom: calc(24px + var(--safe-b)); }
#tela-inicio { overflow-y: auto; }
#tela-inicio > * { flex: none; }

/* ---------- botões */
.btn { background: var(--cartao); border: 1px solid var(--borda); color: var(--texto); border-radius: 14px; padding: 12px 16px; font-size: 1rem; transition: transform 0.08s, background 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primario { background: var(--ouro); color: #1a1405; border-color: transparent; font-weight: 600; }
.btn.grande { padding: 16px 20px; font-size: 1.15rem; width: 100%; flex-direction: column; gap: 0; }
.btn.grande .mini { color: inherit; opacity: 0.75; font-weight: 400; }
.btn.mini-btn { padding: 6px 10px; font-size: 0.85rem; border-radius: 10px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1rem; }
.chip { border: 1px solid var(--borda); background: var(--fundo2); border-radius: 999px; padding: 7px 12px; font-size: 0.85rem; }
.chip.sel { background: var(--ouro); color: #1a1405; border-color: transparent; font-weight: 600; }
.chip.fam-atm.sel, .fam-atm { border-color: var(--atm); } .chip.fam-gas.sel, .fam-gas { border-color: var(--gas); }
.chip.fam-oce.sel, .fam-oce { border-color: var(--oce); } .chip.fam-sup.sel, .fam-sup { border-color: var(--sup); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ---------- início */
.hero { text-align: center; padding: 24px 0 12px; }
.logo { width: 92px; height: 92px; filter: drop-shadow(0 0 18px rgba(47, 212, 194, 0.35)); }
.hero .sub { color: var(--texto2); font-family: var(--serif); font-style: italic; font-size: 1.05rem; max-width: 34ch; margin: 0.5rem auto 1rem; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 14px; margin-top: 14px; }
.cartao .linha { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0; }
.disco-dia { background: linear-gradient(135deg, #122238, #0f2a3a); }
.disco-dia .btn { width: 100%; margin-top: 8px; }
.carrossel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.carrossel::-webkit-scrollbar { display: none; }
.disco { flex: 0 0 150px; scroll-snap-align: start; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.disco .capa { width: 100%; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 35% 35%, var(--cor) 0, transparent 60%), repeating-radial-gradient(circle, #0b1a2e 0 2px, #0f2238 2px 4px); position: relative; }
.disco .capa::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--fundo); border: 2px solid var(--cor); }
.disco b { font-family: var(--serif); font-size: 1rem; }
.disco .mini { font-size: 0.72rem; }
.disco .melhor { color: var(--ouro); font-size: 0.72rem; }
.rodape { margin-top: 1.4rem; }
.selo { font-size: 0.78rem; color: var(--texto2); border-left: 3px solid var(--ouro); padding-left: 10px; }

/* ---------- escuta */
.topo { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--texto2); }
.pontos { font-family: var(--serif); color: var(--ouro); font-size: 1.1rem; }
.crono { position: relative; width: 140px; height: 140px; margin: 18px auto 6px; }
.crono svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.crono circle { fill: none; stroke-width: 4; }
.crono .trilha { stroke: var(--borda); }
.crono .arco { stroke: var(--ouro); stroke-dasharray: 283; stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s linear; stroke-linecap: round; }
.crono .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 2.4rem; }
.crono.pequeno { width: 64px; height: 64px; margin: 0; }
.crono.pequeno .num { font-size: 1.2rem; }
.crono.alerta .arco { stroke: #ff6b6b; }
#ondas { flex: 1; width: 100%; min-height: 200px; border-radius: 16px; background: linear-gradient(180deg, rgba(78,163,255,0.04), rgba(176,124,255,0.04), rgba(47,212,194,0.04), rgba(111,207,90,0.04)); border: 1px solid var(--borda); margin: 10px 0; }
.acoes-escuta { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.acoes-escuta .btn { padding: 14px 8px; flex-direction: column; gap: 2px; }
.pulsa { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,0.5); } 50% { box-shadow: 0 0 0 10px rgba(242,193,78,0); } }

/* ---------- sheets */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; background: var(--fundo2); border-top: 1px solid var(--borda); border-radius: 22px 22px 0 0; padding: 14px 16px calc(20px + var(--safe-b)); box-shadow: 0 -20px 60px rgba(0,0,0,0.5); z-index: 20; animation: sobe 0.25s ease-out; }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.sheet-cabeca { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sheet-cabeca .fechar { margin-left: auto; background: none; border: 0; font-size: 1.2rem; color: var(--texto2); }
.pista { display: block; width: 100%; text-align: left; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 12px; margin: 8px 0; }
.pista p { margin: 2px 0 0; font-size: 0.82rem; color: var(--texto2); }
.pista .custo { color: var(--ouro); font-family: var(--serif); margin-left: 6px; }
.pista.usada { opacity: 0.5; }
.pista .familias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pistas-status { min-height: 1.2em; color: var(--oce); margin-bottom: 4px; }
.satelites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.sat { text-align: left; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 10px; }
.sat.sel { border-color: var(--ouro); background: #1a2a40; }
.sat b { display: block; font-family: var(--serif); }
.sat .mini { display: block; }
.campo { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.campo input[type=range] { flex: 1; }

/* ---------- palpite */
#tela-palpite { padding: 0; }
.globo-slot { flex: 1; min-height: 0; position: relative; }
.globo-slot.curto { flex: none; height: 46vh; min-height: 260px; }
#globo { position: absolute; inset: 0; }
.maplibregl-canvas { outline: none; }
.sobre-topo { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.sobre-topo > * { pointer-events: auto; }
.dica-globo { flex: 1; text-align: center; font-size: 0.85rem; color: var(--texto2); background: rgba(7,17,31,0.6); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.painel-palpite { background: var(--fundo2); border-top: 1px solid var(--borda); padding: 10px 16px calc(14px + var(--safe-b)); }
.painel-palpite summary { cursor: pointer; font-size: 0.9rem; color: var(--texto2); margin-bottom: 4px; }
.pin { width: 22px; height: 30px; background: var(--ouro); clip-path: polygon(50% 100%, 0 40%, 15% 15%, 50% 0, 85% 15%, 100% 40%); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); cursor: grab; }
.alvo { width: 18px; height: 18px; border-radius: 50%; background: var(--sup); box-shadow: 0 0 0 4px rgba(111,207,90,0.3), 0 0 18px var(--sup); animation: alvo 1.2s ease-out infinite; }
@keyframes alvo { 0% { box-shadow: 0 0 0 0 rgba(111,207,90,0.6); } 100% { box-shadow: 0 0 0 16px rgba(111,207,90,0); } }

/* ---------- revelação */
.rev-cabeca { margin-top: 6px; }
.rev-dist { font-family: var(--serif); font-size: 1.25rem; color: var(--ouro); margin-top: 6px; }
.notas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 14px 0 6px; }
.nota { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 10px; text-align: center; }
.nota .valor { font-family: var(--serif); font-size: 1.7rem; margin: 2px 0; }
.nota.total { border-color: var(--ouro); }
.nota.total .valor { color: var(--ouro); }
.extras { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.extras li { font-size: 0.82rem; border-radius: 999px; padding: 4px 10px; background: var(--fundo2); border: 1px solid var(--borda); }
.extras li.mais { color: var(--sup); } .extras li.menos { color: #ff8a8a; }
.rev-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.rev-botoes .btn { font-size: 0.88rem; padding: 10px; text-align: left; justify-content: flex-start; }
.rev-botoes .btn.tocando { border-color: var(--oce); color: var(--oce); }
.ficha { display: flex; flex-direction: column; gap: 4px; }
.ficha .fam-cabeca { margin: 10px 0 2px; font-family: var(--serif); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.ficha .fam-cabeca::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.canal { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 10px; }
.canal.mudo { opacity: 0.5; }
.canal .play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo2); font-size: 0.8rem; }
.canal .play.tocando { border-color: var(--oce); color: var(--oce); }
.canal .nome b { font-size: 0.92rem; }
.canal .nome .mini { display: block; }
.canal .barra { height: 4px; background: var(--borda); border-radius: 2px; margin-top: 5px; position: relative; overflow: hidden; }
.canal .barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 2px; }
.canal .barra i.ref { background: transparent; border-right: 2px solid var(--texto); opacity: 0.7; }
.canal .valor { text-align: right; font-family: var(--serif); font-size: 0.95rem; white-space: nowrap; }
.canal .valor .mini { display: block; max-width: 140px; white-space: normal; text-align: right; }
#btn-proxima { margin-top: 14px; }

/* ---------- resumo */
.total-partida { font-family: var(--serif); font-size: 3rem; color: var(--ouro); display: flex; align-items: baseline; gap: 10px; }
.lista-rodadas { padding-left: 1.2rem; margin: 10px 0; }
.lista-rodadas li { padding: 8px 0; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 10px; }
.lista-rodadas li .mini { display: block; }
.lista-rodadas li.melhor { color: var(--sup); } .lista-rodadas li.pior { color: #ff8a8a; }
.lista-rodadas li b { font-family: var(--serif); }

/* ---------- tutorial */
.tut-card { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; margin-top: 12px; }
.tut-card h2 { margin-bottom: 6px; }
.tut-lugares { display: grid; gap: 8px; margin: 10px 0; }
.tut-lugar { display: flex; align-items: center; gap: 10px; background: var(--fundo2); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; text-align: left; }
.tut-lugar.tocando { border-color: var(--oce); }
.tut-lugar .n { font-family: var(--serif); font-size: 1.3rem; width: 28px; color: var(--texto2); }
.tut-lugar b { font-family: var(--serif); }
.tut-lugar .mini { display: block; }
.tut-quiz { display: grid; gap: 10px; margin-top: 10px; }
.tut-quiz .q { background: var(--fundo2); border: 1px solid var(--borda); border-radius: 12px; padding: 10px; }
.tut-quiz .q .opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tut-quiz .q.certo { border-color: var(--sup); } .tut-quiz .q.errado { border-color: #ff8a8a; }
.tut-acoes { display: flex; gap: 8px; margin-top: 14px; }
.tut-acoes .btn { flex: 1; }
.pontos-prog { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.pontos-prog i { width: 8px; height: 8px; border-radius: 50%; background: var(--borda); } .pontos-prog i.on { background: var(--ouro); }

/* ---------- loading / toast */
#loading { position: absolute; inset: 0; background: var(--fundo); display: grid; place-items: center; align-content: center; gap: 12px; z-index: 50; color: var(--texto2); font-family: var(--serif); }
#loading[hidden] { display: none; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--borda); border-top-color: var(--oce); animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
#toast { position: absolute; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); background: #1a2a40; border: 1px solid var(--borda); padding: 10px 16px; border-radius: 999px; font-size: 0.9rem; z-index: 60; max-width: 90%; text-align: center; }
#toast[hidden] { display: none; }