/* =========================================================
   SISTEMA DETONADO — estilo compartilhado (shell + telas)
   Identidade: #0D0D0D fundo · #EDE7DA creme · #FF5A2A laranja · #EAB308 amarelo
   ========================================================= */
:root{
  --bg:#0D0D0D; --card:#141412; --card2:#0f0f0e; --line:#262624;
  --creme:#EDE7DA; --muted:#8A857B; --lar:#FF5A2A; --am:#EAB308; --verde:#3FD6C4;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --side:232px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(ellipse at 58% 42%,rgba(234,179,8,.085),transparent 62%),var(--bg);
  color:var(--creme);font-family:Inter,system-ui,sans-serif;min-height:100vh;
}
a{color:var(--lar);text-decoration:none}
.rot{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-family:Anton,Impact,sans-serif;font-size:26px;letter-spacing:.5px;line-height:1;white-space:nowrap;color:var(--creme)}
.logo b{color:var(--lar);font-weight:400}
a.logo{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* selo de versao ao lado do logo ("DETONADO CLAUDE 1.0"); o livro.css copia este visual */
.logo-versao{display:inline-block;font-family:var(--mono);font-size:.42em;font-weight:600;letter-spacing:.06em;line-height:1;
  color:#a39d92;border:1px solid #45423b;border-radius:4px;padding:.22em .38em .18em;margin-left:.3em;vertical-align:.45em}
.modos{display:flex;gap:6px}
.modos a,.modos button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;background:none;
  color:var(--creme);border:1px solid var(--line);border-radius:99px;padding:7px 14px;cursor:pointer}
.modos .on{border-color:var(--am);color:var(--am)}
.modos a:hover,.modos button:hover{border-color:var(--lar)}

/* ---------- estrutura ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0;align-items:start}
nav.lateral{position:sticky;top:0;align-self:start;padding:16px 12px 24px;
  border-right:1px solid var(--line);min-height:calc(100vh - 57px);
  display:flex;flex-direction:column}
nav.lateral .item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#b9b3a8;cursor:pointer;
  border:1px solid transparent;background:none;width:100%;text-align:left;text-transform:uppercase}
nav.lateral .item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
nav.lateral .item:hover{color:var(--creme);background:#171715}
nav.lateral .item.on{color:var(--am);border-color:#4a3c10;background:linear-gradient(90deg,rgba(234,179,8,.12),transparent)}
/* SAIR (05/10): empurrado pro pe da lateral e com um fio por cima, pra ficar
   claro que nao e mais uma aba. Discreto ate o hover. */
nav.lateral .item-sair{margin-top:auto;color:#6f6a62;border-top:1px solid var(--line);
  border-radius:0;padding-top:16px}
nav.lateral .item-sair:hover{color:#E8826A;background:rgba(232,130,106,.07)}
/* no modo teste nao houve login nenhum: nada pra sair */
.teste10-on nav.lateral .item-sair{display:none}

/* ---------- confirmacao de saida ---------- */
.sair-veu{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(8,8,7,.78);backdrop-filter:blur(3px);padding:20px}
.sair-veu[hidden]{display:none}
.sair-caixa{width:100%;max-width:410px;background:#13120f;border:1px solid #33302a;
  border-radius:14px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.sair-caixa h2{margin:0 0 10px;font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:23px;letter-spacing:.02em;color:var(--creme)}
.sair-caixa p{margin:0 0 9px;font-size:14px;line-height:1.5;color:#b9b3a8}
.sair-caixa .sair-calma{color:#7d776e;font-size:13px}
.sair-acoes{display:flex;gap:10px;margin-top:16px}
.sair-acoes button{flex:1;padding:12px 10px;border-radius:9px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.sair-nao{background:var(--am);color:#12100b;border:0;font-weight:700}
.sair-nao:hover{filter:brightness(1.08)}
.sair-sim{background:none;border:1px solid #403b33;color:#9a938a}
.sair-sim:hover{border-color:#E8826A;color:#E8826A}
@media(max-width:520px){.sair-acoes{flex-direction:column-reverse}}
.conteudo{padding:18px 18px 110px;max-width:1180px}
.tela{display:none}.tela.on{display:block}
h1.titulo{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;margin:4px 0 2px;letter-spacing:.02em}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}

/* ---------- mapa radial ---------- */
.mapa-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}
#mapa{width:100%;height:auto;display:block;max-height:76vh}
.fio{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fio-base{stroke:#38352f;stroke-width:1.6;stroke-dasharray:7 9;opacity:.75}
/* VEIAS NEURAIS — a veia inteira tem opacidade --op (10%..100% em degraus de
   10%, pelo progresso da fase) e "respira" no ciclo de 3,2 s do brilho do
   F-Raio; por cima, um pulso de energia sai do raio e corre ate o no. */
.fio-luz{stroke-width:2.6;opacity:var(--op,.1);animation:veia 3.2s ease-in-out infinite;transition:opacity .8s}
@keyframes veia{0%,100%{opacity:calc(var(--op,.1)*.7)}50%{opacity:var(--op,.1)}}
.fio-energia{stroke-width:3.4;stroke-dasharray:22 calc(var(--len)*1px + 40px);
  stroke-dashoffset:22px;opacity:calc(var(--op,.1)*.85 + .15);filter:drop-shadow(0 0 4px var(--c));
  animation:energia 3.2s cubic-bezier(.45,0,.35,1) infinite}
@keyframes energia{0%,30%{stroke-dashoffset:22px}100%{stroke-dashoffset:calc(var(--len)*-1px)}}
.zerada-fio .fio-luz{stroke-width:4;filter:drop-shadow(0 0 7px var(--c));animation:pulso 3.2s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.8}50%{opacity:1;stroke-width:5.6;filter:drop-shadow(0 0 15px var(--c))}}
.no{cursor:pointer;outline:none}
.no circle.anel{fill:#0b0b0a;stroke-width:2.4;transition:all .6s}
.no .glifo{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.no text.nome{font-family:var(--mono);font-size:12.5px;text-anchor:middle;fill:currentColor;letter-spacing:.12em}
.no text.num{font-family:var(--mono);font-size:10px;text-anchor:middle;fill:var(--muted);letter-spacing:.16em}
.no.oculta{opacity:.55;color:#6b6760}.no.oculta .anel{stroke:#3a3934;stroke-dasharray:3 4}
/* arte do no (arte/fases/<id>.webp): so aparece quando carrega; ai o glifo some */
.no .arte{opacity:0;pointer-events:none}
.no.com-arte .arte{opacity:1}
.no.com-arte .glifo{display:none}
.no.disponivel .arte{opacity:.75}
.no.disponivel{opacity:.9}.no.disponivel .anel{stroke:var(--c);stroke-dasharray:4 5}
.no.andamento{opacity:1}.no.andamento .anel{stroke:var(--c);filter:drop-shadow(0 0 5px var(--c))}
.no.zerada{opacity:1}
.no.zerada .anel{stroke:var(--c);fill:color-mix(in srgb,var(--c) 16%,#0b0b0a);filter:drop-shadow(0 0 12px var(--c))}
.no.sel .anel{stroke-width:4.5}
/* #raio agora é a arte oficial do F-Raio (PNG com alpha) — o glow/pulso é
   só efeito de CSS por cima do traço real, a forma não muda. */
#raio{animation:brilho 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes brilho{50%{filter:drop-shadow(0 0 22px #EAB308) drop-shadow(0 0 44px rgba(255,160,40,.55)) brightness(1.18)}
  0%,100%{filter:drop-shadow(0 0 10px #EAB308) drop-shadow(0 0 20px rgba(255,160,40,.3)) brightness(1)}}
.estoura{animation:estoura 1.2s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes estoura{0%{transform:scale(1)}30%{transform:scale(1.5)}100%{transform:scale(1)}}
.onda{fill:none;stroke-width:3;animation:onda 1.2s ease-out forwards}
@keyframes onda{from{r:30;opacity:1}to{r:120;opacity:0}}

/* ---------- painel lateral da fase ---------- */
aside.painel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start}
aside.painel h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:32px;margin:4px 0 6px;color:var(--c,var(--creme))}
.estado{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:3px 9px;
  border-radius:99px;border:1px solid currentColor;margin-bottom:12px;color:var(--c)}
aside.painel p{line-height:1.55;font-size:14px;color:#cfc9bc}
.btn{display:block;width:100%;margin:8px 0;padding:12px;border-radius:8px;border:1px solid var(--line);
  background:#1b1b18;color:var(--creme);font-family:var(--mono);font-size:12.5px;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{border-color:var(--lar)}
.btn.prim{background:var(--lar);border-color:var(--lar);color:#0D0D0D;font-weight:600}
.btn:disabled,.btn.prim:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}
.btn:disabled:hover{border-color:var(--line)}
.crono{display:flex;gap:10px;margin:10px 0}
.crono div{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:8px}
.crono b{display:block;font-family:var(--mono);font-size:18px}
.crono .l b{color:var(--lar)}.crono .e b{color:var(--verde)}
input[type=range]{width:100%;accent-color:var(--lar)}

/* ---------- barra inferior ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;background:rgba(13,13,13,.96);border-top:1px solid var(--line);
  padding:11px 16px;display:flex;gap:14px;align-items:center;z-index:6}
.trilho{flex:1;height:12px;background:#1a1a18;border-radius:99px;overflow:hidden}
#enche{height:100%;width:0;background:linear-gradient(90deg,#FF3D1F,var(--lar),var(--am));
  transition:width 1.4s cubic-bezier(.6,0,.2,1);position:relative;overflow:hidden}
#enche.sobe::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:corre 1.2s}
@keyframes corre{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
#leitura{font-family:var(--mono);font-size:12.5px;white-space:nowrap}

/* ---------- caixas genericas ---------- */
.caixa{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.num-grande{font-family:Anton,Impact,sans-serif;font-size:36px;line-height:1;letter-spacing:.02em}
table.dados{border-collapse:collapse;width:100%;font-size:13.5px}
table.dados th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);text-transform:uppercase;font-weight:400}
table.dados td{padding:9px 10px;border-bottom:1px solid #1d1d1a}
table.dados tr.eu td{background:rgba(255,90,42,.09)}
.barra2{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#1a1a18;min-width:80px}
.barra2 i{display:block;height:100%}
.pilula{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:3px 9px;border-radius:99px;border:1px solid var(--line);display:inline-block}
.aviso{font-size:12.5px;color:var(--muted);line-height:1.55;border-left:2px solid var(--line);padding-left:12px;margin:12px 0}
label.campo{display:block;margin:14px 0 4px}
select,input[type=text]{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--creme);
  border-radius:8px;padding:10px;font-family:var(--mono);font-size:12.5px}
/* iOS amplia a pagina sozinho ao tocar num campo com letra menor que 16px (o "zoom que prende") */
@media(pointer:coarse){ select,input[type=text]{font-size:16px} }
iframe.moldura{width:100%;border:1px solid var(--line);border-radius:12px;background:#000;display:block}
.rolagem{overflow:auto}

/* ---------- Mapa da Jornada (quadro escalado) ---------- */
#caixaQuadro{padding:10px}
/* se a escala chegar a sobrar (giro no meio do caminho), da pra arrastar em vez de cortar */
.quadro-rolo{overflow:auto}
.quadro-palco{position:relative;overflow:hidden;margin:0 auto;border-radius:8px}
/* sem eventos no iframe: arrastar e pinçar em cima do quadro move/amplia a pagina (iPhone) */
.quadro-palco .moldura{position:absolute;left:0;top:0;transform-origin:0 0;border:0;border-radius:0;pointer-events:none}

/* ---------- tela de conquista ---------- */
#conq{position:fixed;inset:0;background:rgba(5,5,5,.94);display:none;align-items:center;justify-content:center;z-index:12;padding:16px}
#conq.on{display:flex;animation:fade .4s}
@keyframes fade{from{opacity:0}}
.card{width:min(380px,100%);aspect-ratio:9/16;max-height:92vh;overflow:auto;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 30%,transparent),var(--bg) 65%);
  border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px;text-align:center}
.bola{width:110px;height:110px;flex:none;border-radius:50%;border:4px solid var(--c);
  box-shadow:0 0 40px var(--c),inset 0 0 30px var(--c);display:flex;align-items:center;justify-content:center;
  font-family:Anton,Impact,sans-serif;font-size:40px;animation:estoura 1.2s}
.card h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:28px;margin:18px 0 4px;line-height:1.08}
.card h3 span{color:var(--c)}
.card ul{list-style:none;padding:0;font-size:13px;color:#cfc9bc;line-height:1.5}
.card small{font-family:var(--mono);font-size:9.5px;color:#777;line-height:1.6}

/* ---------- parar sprint ---------- */
.btn.parar{margin-top:-2px}
.btn.parar.on{border-color:#7a2a1a;color:#ffb39a;background:#1f1411}
.btn.parar.on:hover{border-color:var(--lar)}
.btn .mono,.mono{font-family:var(--mono)}

/* ---------- icones com arte + fallback ---------- */
.icf,.icr{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle}
.icf svg{width:72%;height:72%;stroke:var(--c);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icf{border:1.5px solid var(--c);border-radius:50%;background:#0b0b0a}
.icf img,.icr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s}
.icf.ok{border-color:transparent;background:none}
.icf.ok svg,.icr.ok b{display:none}
.icf.ok img,.icr.ok img{opacity:1}
.icr b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  border:2px solid var(--c);color:var(--c);font-family:Anton,Impact,sans-serif;font-weight:400;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,#0b0b0a),#0b0b0a 70%);box-shadow:0 0 10px color-mix(in srgb,var(--c) 40%,transparent)}
.icr.ok{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 55%,transparent))}
.cel-rank,.cel-fase{display:inline-flex;align-items:center;gap:9px}
td.cel-fase{display:flex}
.meu-rank-icone{margin-top:12px}
tr.reticencias td{text-align:center;color:var(--muted);padding:4px}
/* nome de player real tem ate 40 letras, as vezes sem espaco: quebra em vez de alargar a tabela */
td.col-nome{overflow-wrap:anywhere}
.aviso-alerta{border-left-color:var(--am);color:#d9c58a}
/* indicador da sincronizacao com a conta (Configuracoes, area do player) */
.sync-estado{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:-4px 0 12px;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card2);line-height:1.45}
.sync-estado.ok{color:var(--verde);border-color:color-mix(in srgb,var(--verde) 35%,var(--line))}
.sync-estado.alerta{color:var(--am);border-color:color-mix(in srgb,var(--am) 40%,var(--line))}
.mini-veia{width:40px;height:12px;flex:none}
.mini-veia path{fill:none;stroke:var(--c);stroke-width:1.6;stroke-linejoin:round}
.mini-veia .v{opacity:max(var(--op),.18)}
.mini-veia .en{stroke-width:2.2;opacity:calc(var(--op)*.6 + .4);stroke-dasharray:7 60;
  filter:drop-shadow(0 0 2px var(--c));animation:mini-veia 3.2s cubic-bezier(.45,0,.35,1) infinite}
@keyframes mini-veia{from{stroke-dashoffset:6}to{stroke-dashoffset:-60}}
table.sprints td.cel-fase{min-width:200px}

/* ---------- copiar ---------- */
.legenda-copia{display:flex;gap:8px;align-items:center;background:#0f0f0e;border:1px solid var(--line);border-radius:8px;
  padding:8px 8px 8px 12px;margin:0 0 6px;text-align:left;width:100%}
.legenda-copia span{flex:1;font-size:12px;color:#cfc9bc;line-height:1.4}
button.mini{flex:none;font-family:var(--mono);font-size:11px;padding:7px 10px;border-radius:6px;border:1px solid var(--line);
  background:#1b1b18;color:var(--creme);cursor:pointer;white-space:nowrap}
button.mini:hover{border-color:var(--lar)}
.copiado{border-color:var(--verde)!important;color:var(--verde)!important}

/* ---------- conquista com arte ---------- */
.conq-arte{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:none;flex:none;margin-bottom:6px;
  box-shadow:0 0 30px color-mix(in srgb,var(--c) 45%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,var(--line))}
.conq-arte img{width:100%;height:100%;object-fit:cover;display:block}
.conq-arte.ok{display:block}
.conq-arte.ok + .bola{width:64px;height:64px;font-size:24px;margin-top:-38px;background:#0b0b0a;position:relative}
.card{justify-content:flex-start}
.card > :first-child{margin-top:auto}.card > :last-child{margin-bottom:auto}

/* ---------- modal compartilhar ---------- */
#compart{position:fixed;inset:0;background:rgba(5,5,5,.94);display:none;align-items:center;justify-content:center;z-index:13;padding:16px}
#compart.on{display:flex;animation:fade .4s}
.compart-caixa{width:min(400px,100%);max-height:96vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
#cmpCanvas{display:block;width:auto;max-width:100%;height:min(54vh,560px);aspect-ratio:9/16;margin:0 auto;border-radius:10px;border:1px solid var(--line);background:#0D0D0D}

/* ---------- tela cheia / modo foco (tela-cheia.js liga html.modo-foco) ---------- */
html.modo-foco .some-no-foco{display:none!important}
/* o iPhone deitado aumenta o texto sozinho; o tamanho testado e o desenhado */
.pagina-sistema{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.modo-foco .pagina-sistema .shell{grid-template-columns:minmax(0,1fr)}
/* width:100% porque item de grid com margin:auto encolhe pro conteudo em vez de esticar */
html.modo-foco .pagina-sistema .conteudo{width:100%;margin:0 auto;padding-bottom:84px}
/* doca flutuante: so existe no modo foco. Icones das abas + sair. */
.doca{display:none}
html.modo-foco .doca{display:flex;align-items:center;gap:2px;position:fixed;z-index:11;
  right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));
  padding:4px;border-radius:99px;background:rgba(13,13,13,.9);border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.doca button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:99px;
  border:1px solid transparent;background:none;color:#b9b3a8;cursor:pointer;-webkit-tap-highlight-color:transparent}
.doca button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.doca button:hover{color:var(--creme)}
.doca button.on{color:var(--am);border-color:#4a3c10;background:rgba(234,179,8,.12)}
.doca .btn-tela-cheia{width:auto;padding:0 12px;margin-left:4px;gap:6px;border-color:var(--line);color:var(--creme);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;white-space:nowrap}
.doca .btn-tela-cheia:hover{border-color:var(--lar)}
.topo .btn-tela-cheia{white-space:nowrap}

/* ---------- celular ---------- */
/* abaixo disso o rotulo "TELA CHEIA" nao cabe na fileira de botoes: fica so o ⤢ */
@media(max-width:410px){ .pagina-sistema .topo .tc-rot{display:none} }
@media(max-width:980px){ .mapa-wrap{grid-template-columns:1fr} }
@media(max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}  /* minmax: o iframe de 1400px do Mapa da Jornada nao estica a pagina */
  nav.lateral{position:static;min-height:0;border-right:0;border-bottom:1px solid var(--line);
    display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding:10px;scrollbar-width:none}
  /* na faixa horizontal o Sair vira o ultimo item da fileira, sem fio nem empurrao */
  nav.lateral .item-sair{margin-top:0;border-top:0;padding-top:9px;border-radius:8px}
  nav.lateral::-webkit-scrollbar{display:none}
  nav.lateral .item{width:auto;white-space:nowrap;padding:9px 12px;font-size:11px}
  .conteudo{padding:14px 12px 108px}
  .logo{font-size:21px}
  h1.titulo{font-size:24px}
}
/* Nome de TODA aba sempre visivel (pedido do dono, 03/10). No sidebar vertical ja cabia;
   na faixa horizontal (<=860px) os 5 nomes medem 628px, entao acima de 660px tambem cabem.
   Abaixo disso nao cabe sem rolar a faixa: volta ao antigo, so o ativo leva o nome. */
@media(max-width:659px){
  nav.lateral .item span{display:none}
  nav.lateral .item.on span{display:inline}
}
@media(max-width:520px){
  .col-fases,.mini-veia{display:none}
  table.sprints td.cel-fase{min-width:0}
  table.dados td,table.dados th{padding:8px 6px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =========================================================
   PERFIL, ESTANTE DE CONQUISTAS E RANKING REAL (02/10) — ver perfil.js
   ========================================================= */
/* avatar: a foto redonda, ou a inicial num circulo na cor do rank (--c) */
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;
  overflow:hidden;border:2px solid var(--c);vertical-align:middle;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 38%,#1a1a18),#0b0b0a 75%);
  box-shadow:0 0 12px color-mix(in srgb,var(--c) 35%,transparent)}
.avatar b{font-family:Anton,Impact,sans-serif;font-weight:400;color:var(--creme);line-height:1;
  text-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.avatar.ok img{opacity:1}
.avatar.ok b{visibility:hidden}

/* insignias: o icone de cada fase zerada (arte/fases); sem a arte, a bolinha na cor da fase */
.insignias{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center;vertical-align:middle}
.ins{position:relative;width:var(--t);height:var(--t);border-radius:50%;flex:none;border:1px solid var(--c);
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,#0b0b0a),#0b0b0a 75%);
  box-shadow:0 0 5px color-mix(in srgb,var(--c) 55%,transparent)}
.ins img{position:absolute;left:-8%;top:-8%;width:116%;height:116%;object-fit:contain;opacity:0}
.ins.ok{border-color:transparent;background:none}
.ins.ok img{opacity:1}
.ins.secreta{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:calc(var(--t)*.6);
  color:#8a857b;border:1px dashed #5f5b54;background:#0b0b0a;box-shadow:none}
.ins-vazio{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#5f5b54}

/* trofeus do top 10 (arte/top10): ouro pulsando, prata, bronze e o emblema 4-10 com o numero por cima */
.trofeu{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--t);height:var(--t)}
.trofeu img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.trofeu.ok img{opacity:1}
.trofeu i{font-style:normal;font-family:Anton,Impact,sans-serif;font-size:calc(var(--t)*.42);color:var(--am)}
.trofeu.ok i{display:none}
/* o centro do circulo vazio do emblema fica em 50% x 48,8% da arte */
.trofeu b{display:none;position:absolute;left:0;right:0;top:48.8%;transform:translateY(-50%);text-align:center;
  font-family:Anton,Impact,sans-serif;font-weight:400;font-size:calc(var(--t)*.36);line-height:1;color:#FFE3C2;
  text-shadow:0 0 6px #FF7A3D,0 0 2px #FF5A2A}
.trofeu.ok b{display:block}
.trofeu.t1{animation:ouro 2.8s ease-in-out infinite}
@keyframes ouro{0%,100%{filter:drop-shadow(0 0 4px rgba(234,179,8,.45))}50%{filter:drop-shadow(0 0 16px rgba(255,200,40,.95))}}
.trofeu.t2{filter:drop-shadow(0 0 6px rgba(200,215,235,.35))}
.trofeu.t3{filter:drop-shadow(0 0 6px rgba(205,127,50,.4))}
.pos-num{display:inline-block;min-width:34px;text-align:center;font-family:var(--mono);font-size:13px;color:var(--muted)}

/* sub-abas do Ranking: o quadro e a estante */
.sub-abas{display:flex;gap:4px;margin:0 0 14px;padding:4px;background:var(--card2);border:1px solid var(--line);
  border-radius:99px;width:max-content;max-width:100%}
.sub-abas button{font-family:var(--mono);font-size:12px;letter-spacing:.08em;border:1px solid transparent;background:none;
  color:#b9b3a8;padding:9px 16px;border-radius:99px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.sub-abas button:hover{color:var(--creme)}
.sub-abas button.on{color:var(--am);border-color:#4a3c10;background:rgba(234,179,8,.12)}
.sub-cont{font-size:10.5px;color:var(--muted);margin-left:3px}
.meu-rank-ins{margin-top:10px}

/* podio: 1o no meio (degrau mais alto), 2o a esquerda, 3o a direita */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:2px auto 4px;max-width:760px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;gap:3px}
.pod.vazio{visibility:hidden}
.pod-trofeu{display:flex;justify-content:center;margin-bottom:-14px}
.pod-av{position:relative;z-index:1}
.pod-nome{font-weight:600;font-size:13.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.pod.eu .pod-nome{color:var(--lar)}
.pod-xp{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.pod-xp small{font-size:9.5px;color:var(--muted)}
.pod-ins{max-width:100%;min-height:13px}
.pod-ins .insignias{justify-content:center}
.pod-degrau{width:100%;margin-top:6px;border:1px solid var(--borda,var(--line));border-bottom:0;border-radius:10px 10px 0 0;
  display:flex;align-items:flex-start;justify-content:center;padding-top:6px;
  box-shadow:0 0 var(--brilho,0) var(--sombra,transparent)}
.pod-degrau span{font-family:Anton,Impact,sans-serif;font-size:22px;line-height:1}
.pod.p1 .pod-degrau{height:64px;background:linear-gradient(180deg,rgba(234,179,8,.24),#121210 85%)}
.pod.p1 .pod-degrau span{color:var(--am)}
.pod.p2 .pod-degrau{height:46px;background:linear-gradient(180deg,rgba(200,215,235,.15),#121210 85%)}
.pod.p2 .pod-degrau span{color:#c9d3e0}
.pod.p3 .pod-degrau{height:34px;background:linear-gradient(180deg,rgba(205,127,50,.2),#121210 85%)}
.pod.p3 .pod-degrau span{color:#cd7f32}

/* card de player: brilho na borda proporcional as insignias (--borda/--brilho/--sombra, perfil.js) */
.lista-players{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pcard{display:grid;grid-template-columns:48px auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--borda,var(--line));border-radius:12px;background:var(--card2);
  box-shadow:0 0 var(--brilho,0) var(--sombra,transparent)}
.pcard.eu{background:linear-gradient(90deg,rgba(255,90,42,.11),var(--card2) 70%);
  border-color:color-mix(in srgb,var(--lar) 50%,var(--borda,var(--line)))}
.pc-pos{display:flex;justify-content:center}
.pc-meio{min-width:0}
.pc-nome{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;min-width:0}
.pc-nome > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-voce{color:var(--lar);flex:none;font-size:9px;padding:2px 7px}
.pcard.previa{grid-template-columns:auto minmax(0,1fr) auto}
/* a frase pode ter ate 80 letras: ate 2 linhas, depois reticencias */
.pc-sub{font-size:12px;line-height:1.35;color:#b9b3a8;margin-top:2px;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* o @ (ate 30 caracteres) nunca e cortado: se nao couber numa linha, quebra em qualquer ponto */
.pc-insta-linha{font-size:12px;line-height:1.35;margin-top:1px;overflow-wrap:anywhere;word-break:break-word}
.pc-insta{color:var(--am)}
.pc-ins{margin-top:5px}
.pc-dir{display:flex;align-items:center;gap:8px;text-align:right}
.pc-xp{font-family:var(--mono);font-size:14px;white-space:nowrap}
.pc-xp small{font-size:10px;color:var(--muted)}
.pc-rk{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.reticencias{text-align:center;color:var(--muted);line-height:1}

/* fora da area do player: o convite no lugar do quadro */
.ranking-fechado{text-align:center;padding:24px 20px;
  background:radial-gradient(circle at 50% 0%,rgba(234,179,8,.13),transparent 60%),var(--card)}
.rf-trofeus{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin-bottom:4px}
.ranking-fechado h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;line-height:1.15;margin:8px auto 10px;max-width:560px}
.ranking-fechado p{color:#cfc9bc;font-size:14px;line-height:1.55;max-width:520px;margin:0 auto 10px}
.ranking-fechado .btn{max-width:360px;margin:16px auto 10px}
.ranking-fechado small{font-family:var(--mono);font-size:9.5px;color:#777}

/* estante de conquistas */
.estante-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.estante-topo .num-grande small{font-size:18px;color:var(--muted)}
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-top:6px}
.conq-item{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:3px;padding:8px 8px 10px;border-radius:12px;min-width:0;
  border:1px solid color-mix(in srgb,var(--c,#3a3934) 40%,var(--line));background:var(--card2);color:var(--creme);font:inherit}
button.conq-item{cursor:pointer}
button.conq-item:hover{border-color:#4a4740}
.conq-item.ganha{box-shadow:0 0 18px color-mix(in srgb,var(--c) 22%,transparent);
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--c) 15%,transparent),var(--card2) 70%)}
.ci-arte{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b0b0a;
  border:0;padding:0;margin:0 0 4px;cursor:pointer}
.ci-arte img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.ci-arte.ok img{opacity:1}
.trancada .ci-arte img{filter:grayscale(1) brightness(.3)}
.ci-cadeado{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;filter:drop-shadow(0 0 6px #000)}
.secreta .ci-arte,.bl-arte.secreta{background:repeating-linear-gradient(45deg,#141412 0 8px,#0e0e0d 8px 16px);outline:1px dashed #3a3934;outline-offset:-1px}
.secreta .ci-cadeado{font-family:Anton,Impact,sans-serif;font-size:38px;color:#5f5b54}
.ci-rot{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.ci-nome{font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:.02em;line-height:1.05;color:var(--c,var(--creme))}
.trancada .ci-nome{color:#6f6a62}
.ci-data{font-family:var(--mono);font-size:10.5px;color:#b9b3a8;line-height:1.35}
.trancada .ci-data{color:#6f6a62}
.ci-botoes{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.ci-botoes .mini{width:100%;text-align:center}

/* balao: "O que aprendi" e a previa da conquista trancada */
#balao{position:fixed;inset:0;background:rgba(5,5,5,.9);display:none;align-items:center;justify-content:center;z-index:14;padding:16px}
#balao.on{display:flex;animation:fade .3s}
.balao-caixa{width:min(420px,100%);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px;text-align:center}
.bl-arte{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:12px;background:#0b0b0a;
  border:1px solid color-mix(in srgb,var(--c,#3a3934) 50%,var(--line));box-shadow:0 0 26px color-mix(in srgb,var(--c,#000) 35%,transparent)}
.bl-arte img{width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.bl-arte.ok img{opacity:1}
.bl-arte.trancada img{filter:grayscale(1) brightness(.35)}
.bl-arte .ci-cadeado{font-size:34px}
.bl-arte.secreta .ci-cadeado{font-family:Anton,Impact,sans-serif;font-size:56px;color:#5f5b54}
.bl-titulo{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;margin:4px 0}
.bl-desc{color:#cfc9bc;font-size:14px;line-height:1.5;margin:0 0 6px}
.bl-rot{margin:14px 0 6px}
.bl-lista{list-style:none;padding:0;margin:0 0 12px;text-align:left}
.bl-lista li{position:relative;padding:8px 10px 8px 30px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;
  font-size:13.5px;line-height:1.45;background:var(--card2)}
.bl-lista li::before{content:"✓";position:absolute;left:11px;top:8px;color:var(--c);font-weight:700}
.balao-caixa .aviso{text-align:left}

/* mini perfil (Configuracoes) */
.perfil{background:radial-gradient(circle at 10% 0%,rgba(255,90,42,.11),transparent 55%),var(--card)}
.perfil-topo{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:12px}
.perfil-desde{color:#b9b3a8;letter-spacing:.1em}
.perfil-grade{display:grid;grid-template-columns:172px minmax(0,1fr);gap:22px;align-items:start}
.perfil-foto-col{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.perfil-foto{position:relative;width:116px;height:116px;margin:2px 0 8px}
.pf-av{border-width:3px;box-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.pf-selo{position:absolute;right:-10px;bottom:-8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.85))}
.pf-ins{position:absolute;left:-10px;bottom:-4px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:#0D0D0D;
  background:var(--am);border-radius:99px;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,.6);white-space:nowrap}
.pf-rank{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.pf-btn{margin:4px 0 0;padding:9px 10px;font-size:12px}
.pf-remover{opacity:.75}
/* o input de arquivo fica escondido "so pra tela": o label abre ele (inclusive no iPhone) */
.so-leitor{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pf-status{font-size:12px;line-height:1.45;margin:4px 0 0;color:var(--muted)}
.pf-status:empty{display:none}
.pf-status.ok{color:var(--verde)}
.pf-status.erro{color:#ff9a7a}
.perfil-campos label.campo:first-child{margin-top:0}
.pf-cont{float:right;letter-spacing:.04em}
.campo-arroba{display:flex;align-items:stretch}
.campo-arroba span{display:flex;align-items:center;padding:0 11px;border:1px solid var(--line);border-right:0;
  border-radius:8px 0 0 8px;background:#1b1b18;color:var(--am);font-family:var(--mono)}
.campo-arroba input{border-radius:0 8px 8px 0;min-width:0}
input.invalido{border-color:#a8442c}
.pf-erro{font-size:11.5px;color:#ff9a7a;margin:5px 0 0}
.pf-ajuda{font-size:12px;line-height:1.45;color:var(--muted);margin:6px 0 0}
.pf-erro:empty{display:none}
.pf-previa-rot{margin:18px 0 8px}

/* celular deitado (pouca altura): podio mais baixo e o balao em duas colunas (arte | texto) */
@media(orientation:landscape) and (max-height:520px){
  .pod.p1 .trofeu{--t:76px!important}
  .pod.p2 .trofeu{--t:62px!important}
  .pod.p3 .trofeu{--t:54px!important}
  .pod.p1 .pod-degrau{height:44px}
  .pod.p2 .pod-degrau{height:32px}
  .pod.p3 .pod-degrau{height:24px}
  /* esquerda: arte + botoes (sempre a vista); direita: o texto, que rola por dentro se
     passar da altura (a caixa tem 92vh, menos 16+16 de padding e 1+1 de borda) */
  .balao-caixa{width:min(760px,100%);display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);
    grid-template-rows:auto 1fr;column-gap:16px;align-items:start;text-align:left}
  .balao-caixa > *{grid-column:2}
  .balao-caixa > .bl-arte{grid-column:1;grid-row:1;margin:0}
  .balao-caixa > .bl-botoes{grid-column:1;grid-row:2;margin-top:4px}
  .balao-caixa > .bl-texto{grid-column:2;grid-row:1 / span 2;max-height:calc(92vh - 34px);overflow:auto;
    overscroll-behavior:contain;padding-right:2px}
  .balao-caixa .btn{margin:6px 0}
}
@media(max-width:600px){
  .perfil-grade{grid-template-columns:minmax(0,1fr);gap:12px}
  .perfil-foto-col .pf-btn{max-width:280px}
}
@media(max-width:520px){
  .quadro-players{padding:14px 10px}
  .pcard{grid-template-columns:36px auto minmax(0,1fr) auto;gap:8px;padding:9px 8px}
  .pc-pos .trofeu{--t:32px!important}
  .pc-av{width:36px!important;height:36px!important;font-size:16px!important}
  .pc-rk{display:none}
  .pc-dir{gap:5px}
  /* no celular o nome pode quebrar em 2 linhas em vez de virar "Fabrício Ba..." */
  .pc-nome{align-items:flex-start}
  .pc-nome > span:first-child{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .pc-dir .icr{width:22px!important;height:22px!important}
  .pc-xp{font-size:12.5px}
  .estante{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ci-nome{font-size:17px}
  .ci-botoes .mini{font-size:10.5px;padding:7px 4px;white-space:normal}
  .podio{gap:5px}
  .pod-nome{font-size:12px}
  .sub-abas button{padding:9px 13px}
}

/* =========================================================
   COPILOTO DO DETONADO (03/10) — ver copiloto.js
   Card "Seu copiloto do Detonado" na tela DETONADO, a caixa de Configuracoes e
   o destaque discreto da ABERTURA do Livro (.cop-no-livro).
   Discreto de proposito: sem fundo laranja, so o fio de luz da esquerda.
   ========================================================= */
.cop-card{position:relative;margin-top:18px;border-color:#2f2a22;
  background:linear-gradient(180deg,rgba(234,179,8,.05),transparent 42%),var(--card);
  animation:cop-entra .34s ease both}
.cop-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--am),var(--lar));opacity:.75}
/* .001 e nao 0 de proposito: o tour.js so aponta pra elemento com opacidade > 0, e
   um tour aberto nos 340 ms da entrada do card pulava o passo do copiloto */
@keyframes cop-entra{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
/* "chama a atencao": quando aberto pelo botao de Configuracoes */
.cop-card.cop-chama{animation:cop-chama 1.1s ease 2}
@keyframes cop-chama{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px rgba(234,179,8,.45)}}

/* ---------- a barra (cabeca clicavel) ----------
   fechada ela e TUDO que aparece: fina e discreta, porque quem ja aplicou o
   prompt nao precisa mais dos 4 passos — mas o lugar continua ali */
.cop-barra{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--creme)}
.cop-raio{color:var(--am);font-size:14px;flex:none;line-height:1}
.cop-barra-tit{flex:1;font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:19px;letter-spacing:.02em;line-height:1.15}
.cop-seta{flex:none;color:var(--muted);font-size:12px;line-height:1;
  transition:transform .22s ease,color .22s ease;transform:rotate(180deg)}
.cop-barra:hover .cop-seta,.cop-barra:focus-visible .cop-seta{color:var(--am)}
.cop-card.cop-fechado .cop-seta{transform:none}
/* fechada: a caixa encolhe (menos respiro) e o fio de luz acompanha */
.cop-card.cop-fechado{padding-top:13px;padding-bottom:13px}
.cop-card.cop-fechado::before{top:10px;bottom:10px}
.cop-card.cop-fechado .cop-barra-tit{font-size:17px}

.cop-corpo{margin-top:12px}
.cop-corpo.cop-abrindo{animation:cop-abre .24s ease both}
@keyframes cop-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cop-sub{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 14px}

/* os 4 passos: numero proprio (contador), pra nao depender do marcador do <ol> */
.cop-passos{list-style:none;counter-reset:cop;margin:0;padding:0;display:grid;gap:14px}
.cop-passos li{counter-increment:cop;position:relative;padding-left:38px}
.cop-passos li::before{content:counter(cop);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:99px;border:1px solid #4a3c10;background:rgba(234,179,8,.1);
  color:var(--am);font-family:var(--mono);font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.cop-passos li b{display:block;font-size:14.5px;line-height:1.35;padding-top:4px}
.cop-passos li p{color:var(--muted);font-size:13px;line-height:1.55;margin:5px 0 0}
.cop-passos li p b{display:inline;font-size:inherit;color:var(--creme);padding:0}
.cop-ajuda{border-left:2px solid var(--line);padding-left:10px;font-size:12.5px!important}

/* botoes em fileira (nao ocupam a largura toda como o .btn do painel) */
.cop-bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.cop-bt{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  background:none;color:var(--creme);border:1px solid var(--line);border-radius:99px;padding:9px 14px;
  cursor:pointer;text-decoration:none;white-space:nowrap;text-align:center}
.cop-bt:hover{border-color:var(--lar)}
.cop-bt.prim{background:var(--am);border-color:var(--am);color:#0D0D0D;font-weight:600}
.cop-bt.prim:hover{background:var(--lar);border-color:var(--lar)}
.cop-bt.copiado{border-color:var(--verde);color:var(--verde);background:none;font-weight:600}

/* o prompt pronto: bloco de leitura, com rolagem propria se for alto */
.cop-prompt{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#cfc8ba;
  background:var(--card2);border:1px solid var(--line);border-radius:8px;
  margin:10px 0 0;padding:12px;max-height:190px;overflow:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}

/* ---------- destaque na ABERTURA do Livro ----------
   entra no html do capitulo (copiloto.js) e e paginado pelo livro.js como texto
   normal; o <pre class="prompt"> ja ganha o botao ⧉ Copiar dele */
.cop-no-livro{border-left:2px solid currentColor;padding-left:14px;opacity:.95}
.cop-no-livro-rot{font-family:var(--mono);font-size:.72em;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin:0 0 .3em}

/* ---------- MISSÃO 0 (missao0.js, 23/10) ----------
   bloco no fim da ABERTURA do Livro (paginado pelo livro.js) + faixa fina no Sistema */
.m0{border-left:3px solid var(--am);padding-left:14px}
.m0-rot{font-family:var(--mono);font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--am);margin:0 0 .3em}
.m0-passos li{margin:0 0 .55em}
.m0-tempo{font-family:var(--mono);font-size:.78em;opacity:.65;white-space:nowrap}
.m0-bt{font:600 15px/1.2 Inter,sans-serif;padding:12px 16px;border-radius:8px;cursor:pointer;
  background:var(--am);color:#0D0D0D;border:1px solid var(--am);min-height:44px}
.m0-bt.feita{background:transparent;color:var(--verde);border-color:var(--verde)}
.m0-status{font-family:var(--mono);font-size:.8em;color:var(--verde);min-height:1em}
.m0-faixa{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:10px 0 0;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--am);border-radius:8px;
  font:500 14px/1.35 Inter,sans-serif}
.m0-faixa.feita{border-left-color:var(--verde);color:var(--verde)}
.m0-faixa-bt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;white-space:nowrap}

/* ---------- celular ---------- */
@media(max-width:520px){
  .cop-barra-tit{font-size:17px}
  .cop-card.cop-fechado .cop-barra-tit{font-size:15.5px}
  .cop-passos li{padding-left:32px}
  .cop-passos li::before{width:22px;height:22px;font-size:11px}
  .cop-passos li b{font-size:14px}
  /* os botoes viram coluna: "💬 WhatsApp do suporte ↗" nao cabe lado a lado em 390 px */
  .cop-bts{flex-direction:column;align-items:stretch}
  .cop-bt{justify-content:center;white-space:normal}
  .cop-prompt{max-height:150px;font-size:11px}
}
/* deitado (pouca altura): o prompt nao come a tela inteira */
@media(orientation:landscape) and (max-height:520px){
  .cop-prompt{max-height:110px}
}

/* =========================================================
   CARREGANDO — a tela de espera do F-Raio (carregando.js)

   Receita herdada do LoadingOverlay do Marco Zero OS, pra manter a familia
   visual da marca: fundo #0A0A0A, uma "fumaca" amarela respirando atras e o
   F-Raio oficial pulsando na frente. Aqui, de proposito, SEM TEXTO — so o
   raio e a aura.

   Ela so entra em espera DEMORADA (ver o atraso de 350 ms no carregando.js):
   nunca pisca a cada clique.
   ========================================================= */
.carregando{
  position:fixed;inset:0;z-index:8500;
  display:flex;align-items:center;justify-content:center;
  background:#0A0A0A;
  /* o fade e ANIMACAO, nao transicao: animacao comeca sozinha assim que o
     elemento entra no documento. Transicao precisaria de um "empurrao" de
     layout antes de trocar a opacidade, e esse empurrao falha justamente
     quando a aba esta ocupada — que e sempre, numa tela de carregamento. */
  opacity:1;animation:carreg-entra .5s ease;
  /* a tela de espera nao e clicavel, mas engole o clique pra ninguem
     apertar um botao que esta mudando de lugar debaixo dela */
  cursor:progress;-webkit-tap-highlight-color:transparent;
}
.carregando.sai{animation:carreg-sai .5s ease forwards}
@keyframes carreg-entra{from{opacity:0}to{opacity:1}}
@keyframes carreg-sai{from{opacity:1}to{opacity:0}}
/* modo "dentro de um elemento": cobre so a area dada (o livro, o quadro do
   mapa, a caixa do compartilhar). O position:absolute pede que o pai tenha
   position — o carregando.js confere e corrige isso sozinho. */
.carregando--dentro{position:absolute;z-index:40}

/* a fumaca: um circulo grande de luz amarela que respira atras do raio */
.carregando-fumaca{
  position:absolute;width:480px;height:480px;max-width:120vw;max-height:120vw;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(245,197,24,.10) 0%,
    rgba(245,197,24,.03) 45%,
    transparent 70%);
  filter:blur(20px);
  animation:carreg-fumaca 3.2s ease-in-out infinite;
}
/* o F-Raio oficial da marca (guia/f-raio-200.webp): 16 KB, ja fica em cache
   nas duas paginas — a tela de espera nao pode esperar o proprio enfeite */
.carregando-raio{
  position:relative;width:72px;height:auto;opacity:.9;
  filter:drop-shadow(0 0 24px rgba(245,197,24,.5));
  animation:carreg-raio 1.6s ease-in-out infinite;
}
@keyframes carreg-fumaca{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.15);opacity:1}
}
@keyframes carreg-raio{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
/* quem pediu menos movimento fica so com o fade: nada pulsa, nada respira */
@media(prefers-reduced-motion:reduce){
  .carregando-fumaca,.carregando-raio{animation:none}
}