/* =========================================================
SPRINT (sprint.js) — raio do Livro, atalho do Claude, cartoes discretos
e o painel da fase (Livro como acao principal, PDF secundario).
========================================================= */
/* ---------- cartao discreto (pergunta, aviso, configuracao) ---------- */
.sx-cartao{position:fixed;left:50%;bottom:calc(var(--alt-ctl,0px) + 22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
z-index:95;width:min(420px,calc(100vw - 32px));background:#141210;border:1px solid #4a3822;border-radius:12px;
padding:14px 14px 12px;color:#EDE7DA;font:14px/1.5 Inter,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.7);
animation:sxEntra .22s ease-out}
@keyframes sxEntra{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.sx-txt{margin-bottom:10px}
.sx-tit{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#F5B700;margin-bottom:2px}
.sx-sub{display:block;font-size:12.5px;color:#8A857B;margin-bottom:8px}
.sx-bts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.sx-bt{flex:1 1 auto;min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid #3a3530;background:transparent;color:#EDE7DA;
font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.04em;cursor:pointer}
.sx-bt:hover{border-color:#FF5A2A}
.sx-bt.prim{background:#F5B700;border-color:#F5B700;color:#0D0D0D}
.sx-ops{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
.sx-op{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #2c2824;border-radius:8px;cursor:pointer;font-size:13.5px}
.sx-op:has(input:checked){border-color:#F5B700;background:rgba(245,183,0,.07)}
.sx-op input{accent-color:#F5B700;margin:0}
.sx-url{width:100%;padding:9px 10px;border-radius:8px;border:1px solid #3a3530;background:#0D0D0D;color:#EDE7DA;font:13px 'IBM Plex Mono',monospace}
.sx-url[hidden],.sx-erro[hidden]{display:none}
.sx-erro{display:block;color:#FF5A2A;font-size:12px;margin-top:4px}
/* ---------- painel da fase (index): Livro principal, PDF secundario ---------- */
.btn.livro-prim{border-color:#F5B700;color:#F5B700;font-weight:600;background:rgba(245,183,0,.06)}
.btn.livro-prim:hover{background:rgba(245,183,0,.12);border-color:#F5B700}
.conta-livro{margin:-4px 0 4px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:#8A857B;text-align:center}
.btn.sec{padding:8px;font-size:12.5px;opacity:.7}
.btn.sec:hover{opacity:1}
/* ---------- o raio do Livro (botao do sprint) + atalho do Claude ----------
A barra tem a mesma altura do raio decorativo de antes (30px + 4px; 22px + 2px no celular). */
.sprint-barra{position:relative;height:30px;margin:0 0 4px;display:flex;align-items:center;justify-content:center;flex:none}
.bt-raio{all:unset;cursor:pointer;height:100%;display:flex;align-items:center;border-radius:6px;padding:0 4px}
.bt-raio:focus-visible,.bt-claude:focus-visible{outline:2px solid #F5B700;outline-offset:2px}
.bt-raio .fraio-topo{margin:0!important;height:100%}
.bt-raio:hover .fraio-topo{opacity:1;filter:drop-shadow(0 0 12px rgba(245,183,0,.7))}
.sprint-barra.on .fraio-topo{opacity:1;animation:raioSprint 1.1s ease-in-out infinite}
@keyframes raioSprint{0%,100%{filter:drop-shadow(0 0 6px rgba(245,183,0,.55)) brightness(1)}
50%{filter:drop-shadow(0 0 16px rgba(245,183,0,1)) brightness(1.25)}}
.raio-tempo{position:absolute;right:calc(50% + 22px);top:50%;transform:translateY(-50%);font:600 11px 'IBM Plex Mono',monospace;
color:#F5B700;letter-spacing:.05em;white-space:nowrap;text-shadow:0 1px 4px #000}
.raio-tempo[hidden]{display:none}
.bt-claude{position:absolute;left:calc(50% + 22px);top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
border:1px solid #4a3822;background:rgba(13,13,13,.75);color:#FF5A2A;font-size:15px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0}
.bt-claude:hover{border-color:#FF5A2A;color:#FFB39A}
.balao-raio{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);z-index:30;
width:max-content;max-width:min(300px,calc(100vw - 32px));padding:8px 12px;border-radius:9px;background:#16120d;
border:1px solid #F5B700;color:#EDE7DA;font:12px/1.45 Inter,sans-serif;text-align:center;opacity:0;pointer-events:none;
transition:opacity .18s,transform .18s;box-shadow:0 10px 26px rgba(0,0,0,.6)}
.balao-raio.on{opacity:1;transform:translateX(-50%) translateY(0)}
.balao-raio b{color:#F5B700;font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}
@media(max-width:759px) and (orientation:portrait), (max-width:759px) and (min-height:521px){
.sprint-barra{height:22px;margin-bottom:2px}
.bt-claude{width:22px;height:22px;font-size:13px;left:calc(50% + 18px)}
.raio-tempo{right:calc(50% + 18px);font-size:10px}
}
/* celular deitado: o raio decorativo sumia; o botao flutua no topo sem tirar altura do livro */
@media(orientation:landscape) and (max-height:520px){
.sprint-barra{position:absolute;top:2px;left:50%;transform:translateX(-50%);height:22px;margin:0;z-index:5;width:140px}
.sprint-barra .fraio-topo{display:block}
}
@media(prefers-reduced-motion:reduce){ .sprint-barra.on .fraio-topo{animation:none;filter:drop-shadow(0 0 12px rgba(245,183,0,.9))} }
/* =========================================================
24/10 (PEDIDOS FBK D2) — botoes do topo com icone, LIVRO vivo e o Claude pulsando
Icones: arte/ui/icone-livro.webp / icone-mapa.webp / icone-claude.webp. Enquanto a
arte nao existe, o ![]()
some no onerror e fica o SVG de reserva (img + svg).
========================================================= */
.modos .bt-ic,.modos .bt-livro-vivo{display:inline-flex;align-items:center;gap:6px}
.ic-topo{position:relative;display:inline-flex;width:16px;height:16px;flex:none;margin:-3px 0}
.ic-topo img,.ic-topo svg{width:100%;height:100%;display:block;object-fit:contain}
.ic-topo img{transform:scale(1.25)}
.ic-topo img + svg,.ic-claude img + svg{display:none}
/* LIVRO vivo: respira (halo dourado, igual ao .teste10 da LP), um brilho atravessa e
um raio de energia corre pela borda. @property deixa o angulo animar; sem suporte
o anel fica parado e o resto continua. */
@property --lv-ang{syntax:'';inherits:false;initial-value:0deg}
.modos .bt-livro-vivo{position:relative;isolation:isolate;color:#F5B700;border-color:rgba(245,183,0,.55);
background:linear-gradient(100deg,transparent 40%,rgba(255,235,190,.30) 50%,transparent 60%) no-repeat,
linear-gradient(180deg,rgba(255,90,42,.14),rgba(234,179,8,.08));
background-size:260% 100%,100% 100%;background-position:160% 0,0 0;
animation:lvRespira 3.2s ease-in-out infinite,lvBrilho 4.6s ease-in-out infinite;
transition:transform .22s ease,border-color .22s ease}
.modos .bt-livro-vivo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
background:conic-gradient(from var(--lv-ang),transparent 0 62%,rgba(255,231,163,.15) 70%,#FFE7A3 84%,#F5B700 90%,#FF5A2A 94%,transparent 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
animation:lvGira 2.8s linear infinite}
.modos .bt-livro-vivo:hover{transform:translateY(-1px) scale(1.04);border-color:#F5B700}
@keyframes lvRespira{0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,0)}50%{box-shadow:0 0 16px 2px rgba(234,179,8,.38)}}
@keyframes lvBrilho{0%,62%{background-position:160% 0,0 0}88%,100%{background-position:-60% 0,0 0}}
@keyframes lvGira{to{--lv-ang:360deg}}
/* card da fase: o botao principal ganha um pouco do mesmo brilho */
.btn.livro-prim.livro-sprint{font-weight:700;animation:lvRespira 3.2s ease-in-out infinite}
.sprint-status{margin:2px 0 6px;font-size:11px;letter-spacing:.05em;color:#F5B700;text-align:center}
/* dentro do Livro: o Claude com destaque vivo */
.bt-claude.bt-claude-vivo{width:30px;height:30px;border:1px solid #FF5A2A;color:#FF7A4D;
background:radial-gradient(circle at 50% 40%,rgba(255,90,42,.35),rgba(13,13,13,.85) 70%);
animation:claudePulsa 1.9s ease-in-out infinite}
.bt-claude-vivo::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,90,42,.7);
pointer-events:none;animation:claudeOnda 1.9s ease-out infinite}
.ic-claude{display:flex;width:70%;height:70%}
.ic-claude img,.ic-claude svg{width:100%;height:100%;object-fit:contain;display:block}
.ic-claude img{transform:scale(1.3);border-radius:50%}
.bt-claude.bt-claude-vivo:hover{color:#FFB39A;border-color:#FFB39A;filter:brightness(1.15)}
@keyframes claudePulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,90,42,0),0 0 6px rgba(255,90,42,.35)}
50%{box-shadow:0 0 14px 3px rgba(255,90,42,.55),0 0 6px rgba(255,90,42,.35)}}
@keyframes claudeOnda{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media(max-width:759px) and (orientation:portrait), (max-width:759px) and (min-height:521px){
.bt-claude.bt-claude-vivo{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
.modos .bt-livro-vivo,.modos .bt-livro-vivo::before,.btn.livro-prim.livro-sprint,
.bt-claude.bt-claude-vivo,.bt-claude-vivo::after{animation:none}
.modos .bt-livro-vivo{box-shadow:0 0 10px 1px rgba(234,179,8,.3)}
.modos .bt-livro-vivo:hover{transform:none}
.bt-claude-vivo::after{display:none}
}
#painel p.conta-livro{font-size:10.5px;line-height:1.4;margin:-2px 0 6px}