/* =========================================================================
   MIC360 · sinapse.css — a travessia das dezasseis formas, 23.10.97
   -------------------------------------------------------------------------
   PORQUE É QUE ISTO É UM FICHEIRO À PARTE, E ESCURO

   A 96 tinha vestido a travessia com a pele da casa (creme, ouro, lavanda).
   A titular comparou-a com o jogo original e decidiu, a 01/09/2026: «gosto
   mais do jogo como era». A 97 devolve-lhe o registo do jogo — espaço
   profundo, tipografia técnica, néon — sem devolver o motor de recompensa ao
   ecrã: XP, combo e emblemas continuam a ser calculados e gravados no
   servidor, e continuam a não aparecer.

   É a PRIMEIRA sala do MIC360 com registo próprio, e por isso não vive no
   patient.css: vive aqui, carregado DEPOIS do caminho.css, o que resolve
   pela ordem a briga de especificidade que na 95 esticava a travessia pelo
   ecrã inteiro (`.est-wrap { max-width: none }` ganhava a `.sn-wrap`).

   A pele só se aplica quando o shell tem `.sinapse-view` — a classe que o
   app.js liga na rota `/p/sinapse`, à maneira do `.oraculo-view` e do
   `.hoje-view`. Fora dessa rota este ficheiro não pinta nada.

   TIPOGRAFIA AUTO-ALOJADA. O jogo pedia as três faces ao Google Fonts. Aqui
   vêm de `public/fonts/sinapse/` (SIL Open Font License, as licenças estão
   ao lado dos ficheiros): 116 KB no total, sem pedido a terceiros e sem nada
   para consentir.
   ========================================================================= */

@font-face { font-family: "Orbitron 360"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/sinapse/orbitron-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron 360"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/sinapse/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron 360"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/sinapse/orbitron-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani 360"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/sinapse/rajdhani-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani 360"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/sinapse/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani 360"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/sinapse/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Tech Mono 360"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/sinapse/share-tech-mono-latin-400-normal.woff2") format("woff2"); }

/* ⚠️ O TIL DO ORBITRON — corrigido NA FONTE, não com um remendo de CSS.
   O Orbitron desenha um til em degrau único e raso que, abaixo dos ~30px,
   colapsa e se lê como acento grave: «regiões» sai «regiòes». A primeira
   tentativa (23.10.97, nunca publicada) mandava esses quatro pontos de código
   vir do Rajdhani por `unicode-range` — e o remédio era pior do que o
   defeito: metia uma letra de OUTRA FONTE no meio de uma palavra, e via-se à
   primeira num botão em maiúsculas.
   O glifo `tildecomb` foi redesenhado nos três pesos com fontTools —
   zigue-zague com patamares no cume e no vale, a mesma caixa, amplitude que
   fecha a 15px. **Não há remendo aqui, e não deve voltar a haver.**
   Ver `mockups/fontes-orbitron-til/LEIA-ME-til-orbitron.md`. */

/* -------------------------------------------------------------------------
   Os tons da travessia. Nenhum valor destes é escrito outra vez: os SVG do
   ecrã pedem-nos por `var(--sn-*)`, que é a dívida que a 95 tinha deixado
   aberta com vinte e um hexadecimais à mão.
   ------------------------------------------------------------------------- */
.sn-espaco {
  /* ═══════════════════════════════════════════════════════════════════════
     A NEBULOSA MIC — decidida pela titular a 01/09/2026, sobre a pele preta e
     néon do jogo original: «manter o céu estrelado, a nebulosa no fundo, pode
     até ser azul mas mais claro, e aplicar os tons e estilos do MIC sem perder
     a interface do próprio jogo, que é a parte mais interessante».

     A ponte não é uma paleta inventada: TRÊS das quatro cores das regiões são
     tokens da casa — o ouro, o `--info` e o `--support` — e o ciano néon dá
     lugar à lavanda `--primary-light`. Entra do MIC a cor e o raio; fica do
     jogo a tipografia, a geometria e a mecânica.
     ═══════════════════════════════════════════════════════════════════════ */
  --sn-noite-alta: #4b5aa6;   /* o alto do céu — o azul mais claro que ela pediu */
  --sn-noite: #2c3873;
  --sn-void: #1a2350;         /* o fundo: índigo, nunca preto */
  --sn-deep: #222c5e;

  /* ⚠️ Os painéis são VIDRO, não caixas: a nebulosa vê-se através deles. É a
     peça que mais muda em relação ao jogo — a interface passa a estar DENTRO
     do céu, em vez de o tapar com retângulos escuros. */
  --sn-painel: rgba(226, 222, 246, .06);
  --sn-painel-2: rgba(226, 222, 246, .10);
  --sn-linha: rgba(201, 191, 224, .22);
  --sn-linha-forte: rgba(201, 191, 224, .42);

  --sn-txt: #ece9f7;
  --sn-txt-dim: #bdb6d8;
  --sn-txt-faint: #8f89b2;

  --sn-cyan: #c9bfe0;         /* era o ciano néon — é a lavanda do MIC */
  --sn-ambar: #eec97e;        /* EI · o ouro do MIC, uma nota mais aberto */
  --sn-azul: #8fb6da;         /* SN · o --info do MIC */
  --sn-laranja: #e8a87c;      /* TF · terracota quente */
  --sn-menta: #8fd6b1;        /* JP · o --support do MIC */
  --sn-rosa: #e2938d;
  --sn-star: #dcd7f2;
  --sn-brilho: #ffffff;       /* o coração do núcleo, no despertar */
  --sn-silhueta: #101636;     /* o interior das figuras das cenas */
  --sn-vazio: #0d1330;        /* o escuro de dentro da vigia */
  --sn-disp: "Orbitron 360", "Arial Black", sans-serif;
  --sn-corpo: "Rajdhani 360", "Segoe UI", system-ui, sans-serif;
  --sn-mono: "Tech Mono 360", ui-monospace, Menlo, monospace;
  --sn-tom: var(--sn-ambar);
}


/* -------------------------------------------------------------------------
   O shell na rota da travessia: a sala ocupa o ecrã, e a barra de baixo
   escurece com ela — a pessoa continua a poder sair por onde entrou.
   ------------------------------------------------------------------------- */
#app-shell.patient-mode.sinapse-view {
  background: #1a2350;
}
#app-shell.patient-mode.sinapse-view:not(.no-chrome) main#view {
  max-width: none;
  padding: 0 0 calc(var(--p-tabbar-h) + 8px);
  color: #ece9f7;
}
#app-shell.patient-mode.sinapse-view .patient-tabbar {
  background: rgba(16, 22, 52, .90);
  border-top-color: rgba(201, 191, 224, .20);
  box-shadow: 0 -10px 34px rgba(6, 8, 26, .5);
}
#app-shell.patient-mode.sinapse-view .patient-tab { color: #9a94bd; }
#app-shell.patient-mode.sinapse-view .patient-tab.is-active { color: #f0d9a8; }

/* -------------------------------------------------------------------------
   O CÉU, EM CAMADAS — e todas em CSS: nem canvas, nem animação a correr em
   ciclo, nem imagem pedida à rede. Não gasta bateria em telemóvel nenhum, e a
   folha continua a ser a única coisa que viaja.

   1 · o gradiente da noite (índigo, não preto);
   2 · a nebulosa — três nuvens grandes: a lavanda do MIC, o azul e um sopro
       de ouro. Deriva muito devagar, e para com `prefers-reduced-motion`;
   3 · a faixa da via láctea, atravessada;
   4 · duas camadas de estrelas — a de trás fixa, a da frente com algumas
       douradas a cintilar;
   5 · grão e vinheta, para o gradiente não parecer plástico.
   ------------------------------------------------------------------------- */
.sn-espaco {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 22px 18px 40px;
  background:
    radial-gradient(150% 95% at 50% -22%, var(--sn-noite-alta) 0%, var(--sn-noite) 42%, var(--sn-void) 100%);
  color: var(--sn-txt);
  font-family: var(--sn-corpo);
  font-size: 17px;
  line-height: 1.55;
  overflow: hidden;
}
/* 2 · a nebulosa */
.sn-neb {
  position: absolute; inset: -12% -6%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(52% 46% at 18% 22%, rgba(154,132,204,.85), transparent 70%),
    radial-gradient(46% 40% at 78% 18%, rgba(112,162,212,.68), transparent 72%),
    radial-gradient(50% 44% at 66% 78%, rgba(230,186,106,.32), transparent 74%),
    radial-gradient(34% 30% at 30% 74%, rgba(207,199,235,.26), transparent 70%);
  filter: blur(14px);
  animation: sn-deriva 46s ease-in-out infinite alternate;
}
@keyframes sn-deriva { to { transform: translate3d(-1.4%, 1.1%, 0) scale(1.04); } }
/* 3 · a via láctea */
.sn-via {
  position: absolute; inset: -30% -20%; z-index: -2; pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(220,215,242,.13) 47%,
    rgba(238,201,126,.07) 53%, transparent 66%);
  filter: blur(22px);
}
/* 4 · as estrelas, em duas profundidades */
.sn-ceu { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sn-ceu i { position: absolute; inset: -40px; display: block; }
.sn-ceu i:nth-child(1) {
  background:
    radial-gradient(1.3px 1.3px at 12% 18%, rgba(220,215,242,.95), transparent),
    radial-gradient(1px 1px at 42% 8%, rgba(220,215,242,.7), transparent),
    radial-gradient(1.5px 1.5px at 68% 26%, rgba(220,215,242,.9), transparent),
    radial-gradient(1px 1px at 88% 12%, rgba(220,215,242,.6), transparent),
    radial-gradient(1.2px 1.2px at 22% 62%, rgba(220,215,242,.75), transparent),
    radial-gradient(1px 1px at 55% 78%, rgba(220,215,242,.55), transparent),
    radial-gradient(1.4px 1.4px at 78% 58%, rgba(220,215,242,.8), transparent),
    radial-gradient(1px 1px at 34% 92%, rgba(220,215,242,.5), transparent),
    radial-gradient(1.1px 1.1px at 92% 84%, rgba(220,215,242,.6), transparent),
    radial-gradient(1px 1px at 6% 44%, rgba(220,215,242,.5), transparent);
  background-size: 380px 340px; opacity: .9;
}
.sn-ceu i:nth-child(2) {
  background:
    radial-gradient(2px 2px at 30% 34%, rgba(238,201,126,.85), transparent),
    radial-gradient(1.8px 1.8px at 84% 66%, rgba(238,201,126,.6), transparent),
    radial-gradient(1.7px 1.7px at 58% 14%, rgba(201,191,224,.8), transparent),
    radial-gradient(1.6px 1.6px at 14% 82%, rgba(201,191,224,.6), transparent);
  background-size: 760px 620px; opacity: .85;
  animation: sn-cintila 7s ease-in-out infinite alternate;
}
@keyframes sn-cintila { from { opacity: .45; } to { opacity: .95; } }
/* 5 · grão e vinheta */
.sn-espaco::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(125% 105% at 50% 42%, transparent 44%, rgba(16,21,54,.46) 100%);
  opacity: .42;
  mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: reduce) {
  .sn-neb, .sn-ceu i:nth-child(2) { animation: none; }
}
.sn-espaco > * { position: relative; z-index: 1; }

/* a moldura interior — a travessia tem largura de leitura, o mapa não */
.sn-wrap { max-width: 640px; margin: 0 auto; }
.sn-wrap-larga { max-width: 940px; }

/* -------------------------------------------------------------------------
   Cabeçalho da sala
   ------------------------------------------------------------------------- */
.sn-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sn-back {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-family: var(--sn-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sn-cyan);
}
.sn-back:hover { text-shadow: 0 0 12px rgba(201,191,224,.6); }
.sn-marca { font-family: var(--sn-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sn-txt-faint); }
.sn-eyebrow { margin: 0 0 8px; font-family: var(--sn-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sn-tom); }
.sn-titulo {
  margin: 0 0 10px; font-family: var(--sn-disp); font-weight: 700;
  font-size: clamp(1.5rem, 4.6vw, 2.1rem); line-height: 1.12; color: #fff;
  text-wrap: balance; text-shadow: 0 0 28px rgba(201,191,224,.22);
}
.sn-lede { margin: 0 0 20px; color: var(--sn-txt-dim); max-width: 60ch; }
.sn-nota { margin: 12px 0 0; font-size: 14px; color: var(--sn-txt-faint); text-align: center; }
.sn-nota-l { text-align: left; margin-top: 6px; }
.sn-disc { margin-top: 20px; }
.sn-disc .p-disclaimer {
  background: rgba(226,222,246,.06); border-color: var(--sn-linha); color: var(--sn-txt-faint);
}

/* -------------------------------------------------------------------------
   Botões — o canto cortado do jogo, sem o cinzento do browser.
   ------------------------------------------------------------------------- */
.sn-btn {
  display: block; width: 100%; padding: 15px 20px; cursor: pointer;
  font: inherit; font-family: var(--sn-disp); font-weight: 700; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: #241d0c;
  background: linear-gradient(180deg, #f4d68f, #d9ab52);
  border: 1px solid var(--sn-tom);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: box-shadow .18s ease, background .18s ease;
}
.sn-btn:hover:not(:disabled) { box-shadow: 0 0 26px rgba(238,201,126,.28) inset, 0 0 20px rgba(238,201,126,.18); }
.sn-btn:disabled { opacity: .35; cursor: not-allowed; }
.sn-btn-2 {
  color: var(--sn-txt-dim); border-color: var(--sn-linha-forte);
  background: rgba(226,222,246,.06);
}
.sn-btn-2:hover:not(:disabled) { color: var(--sn-cyan); border-color: rgba(201,191,224,.5); box-shadow: 0 0 18px rgba(201,191,224,.12); }
.sn-pause {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-family: var(--sn-mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sn-txt-faint);
}
.sn-pause:hover { color: var(--sn-cyan); }

/* painel — a caixa de vidro escura, com o canto cortado */
.sn-painel {
  background: linear-gradient(165deg, var(--sn-painel-2), var(--sn-painel));
  border: 1px solid var(--sn-linha);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 18px 50px rgba(8,10,30,.34), inset 0 1px 0 rgba(255,255,255,.10);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 20px 22px;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
   1 · O despertar: o registo de arranque, o drone e os avatares
   ------------------------------------------------------------------------- */
.sn-boot { display: grid; gap: 26px; align-items: start; }
@media (min-width: 860px) { .sn-boot { grid-template-columns: 1fr 1fr; gap: 40px; } }
.sn-log { font-family: var(--sn-mono); font-size: 13.5px; line-height: 2; color: var(--sn-txt-dim); margin: 0; }
.sn-log li { list-style: none; }
.sn-log li::before { content: "> "; color: var(--sn-cyan); }
.sn-log li.is-alvo { color: var(--sn-ambar); }
.sn-log .sn-cursor {
  display: inline-block; width: 8px; height: 15px; background: var(--sn-cyan);
  vertical-align: -2px; animation: sn-pisca 1s steps(2) infinite;
}
@keyframes sn-pisca { 50% { opacity: 0; } }
.sn-nucleo-vivo { display: block; width: 100%; max-width: 320px; margin: 0 auto; height: auto; }
.sn-drone { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 22px; }
.sn-drone svg { flex: 0 0 auto; }
.sn-fala {
  flex: 1 1 auto; background: rgba(226,222,246,.06); border: 1px solid var(--sn-linha);
  padding: 12px 15px; font-family: var(--sn-mono); font-size: 13.5px; line-height: 1.7; color: var(--sn-txt);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.sn-avatares { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 22px; }
.sn-avatar {
  width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(226,222,246,.06); border: 1px solid var(--sn-linha); cursor: pointer; padding: 0;
  border-radius: 50%; transition: border-color .15s ease, box-shadow .15s ease;
}
.sn-avatar svg { width: 34px; height: 34px; }
.sn-avatar:hover { border-color: var(--sn-linha-forte); }
.sn-avatar.is-on { border-color: var(--sn-cyan); box-shadow: 0 0 22px rgba(201,191,224,.35); }
.sn-avatar-nome { font-family: var(--sn-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-cyan); }
.sn-saltar {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-family: var(--sn-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--sn-txt-faint);
}
.sn-saltar:hover { color: var(--sn-cyan); text-decoration: underline; }

/* -------------------------------------------------------------------------
   2 · A carta estelar
   ------------------------------------------------------------------------- */
.sn-carta { margin: 4px 0 18px; }
.sn-carta-svg { display: block; width: 100%; height: auto; }
.sn-carta-mini { max-width: 520px; margin: 14px auto 6px; opacity: .95; }
.sn-carta-info { text-align: center; margin: 0 0 18px; }
.sn-zona-nome { margin: 0; font-family: var(--sn-disp); font-weight: 500; font-size: 1.2rem; color: #fff; }

/* -------------------------------------------------------------------------
   3 · A travessia
   ------------------------------------------------------------------------- */
.sn-hud { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
.sn-hud-l { flex: 1 1 auto; min-width: 0; }
.sn-hud-l .sn-eyebrow { margin-bottom: 5px; }
.sn-nucleo { display: block; height: 6px; background: rgba(12,16,38,.5); border: 1px solid var(--sn-linha); overflow: hidden; }
.sn-nucleo i { display: block; height: 100%; background: linear-gradient(90deg, var(--sn-menta), var(--sn-cyan)); box-shadow: 0 0 12px rgba(143,214,177,.5); transition: width .5s ease; }
.sn-passo { flex: 0 0 auto; font-family: var(--sn-mono); font-size: 13px; letter-spacing: .1em; color: var(--sn-txt-dim); }
.sn-play { margin-bottom: 18px; }
.sn-rodape { font-family: var(--sn-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--sn-txt-faint); text-align: center; margin: 16px 0 0; }
.sn-rodape.sn-nota-l { text-align: left; }

/* escolha forçada */
.sn-force { display: grid; gap: 12px; position: relative; }
@media (min-width: 640px) { .sn-force { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.sn-opt {
  text-align: left; cursor: pointer; font: inherit; color: var(--sn-txt);
  background: linear-gradient(165deg, var(--sn-painel-2), var(--sn-painel));
  border: 1px solid var(--sn-linha);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 18px 50px rgba(8,10,30,.34), inset 0 1px 0 rgba(255,255,255,.10); padding: 18px 20px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sn-opt strong { display: block; font-family: var(--sn-disp); font-weight: 500; font-size: 15px; margin-bottom: 6px; color: var(--sn-tom); }
.sn-opt span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--sn-txt-dim); }
.sn-opt:hover, .sn-opt:focus-visible { border-color: var(--sn-tom); outline: none; box-shadow: 0 0 24px rgba(238,201,126,.14); }
.sn-ou {
  align-self: center; justify-self: center; font-family: var(--sn-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sn-txt-faint);
  border: 1px solid var(--sn-linha); padding: 6px 9px; background: var(--sn-void);
}

/* dois lados, com cena */
.sn-cenas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .sn-cenas { grid-template-columns: 1fr; } }
.sn-cena {
  display: block; padding: 0; cursor: pointer; font: inherit; text-align: left;
  background: var(--sn-painel); border: 1px solid var(--sn-linha); overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sn-cena:hover, .sn-cena:focus-visible { border-color: var(--sn-tom); outline: none; box-shadow: 0 0 24px rgba(238,201,126,.16); }
.sn-cena-svg { display: block; width: 100%; height: auto; }
.sn-cena-txt { display: block; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; color: var(--sn-txt); }

/* cursor */
.sn-poles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sn-poles p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sn-txt); }
.sn-poles p:last-child { text-align: right; }
.sn-poles em { display: block; font-style: normal; font-family: var(--sn-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-cyan); margin-bottom: 5px; }
.sn-poles p:last-child em { color: var(--sn-laranja); }
.sn-trilho { position: relative; height: 52px; margin: 18px 0 8px; cursor: ew-resize; touch-action: none; outline: none; }
.sn-trilho-fundo {
  position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px;
  background: linear-gradient(90deg, var(--sn-azul), rgba(26,35,80,.9) 50%, var(--sn-laranja));
  border: 1px solid var(--sn-linha);
}
.sn-trilho:focus-visible .sn-trilho-fundo { box-shadow: 0 0 0 2px rgba(201,191,224,.4); }
.sn-punho {
  position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  transform: rotate(45deg); background: var(--sn-void); border: 2px solid var(--sn-cyan);
  box-shadow: 0 0 22px rgba(201,191,224,.55);
}
.sn-estado { margin: 0 0 16px; text-align: center; font-family: var(--sn-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sn-txt-faint); }

/* ordem */
.sn-rank { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.sn-rank-card {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; color: var(--sn-txt);
  background: linear-gradient(165deg, var(--sn-painel-2), var(--sn-painel));
  border: 1px solid var(--sn-linha);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 18px 50px rgba(8,10,30,.34), inset 0 1px 0 rgba(255,255,255,.10);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sn-rank-n {
  flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sn-disp); font-weight: 700; font-size: 13px; color: var(--sn-tom);
  border: 1px solid var(--sn-tom); background: rgba(0,0,0,.4);
}
.sn-rank-t { flex: 1 1 auto; font-size: 15px; line-height: 1.4; }
.sn-rank-mv { flex: 0 0 auto; display: grid; gap: 4px; }
.sn-mv {
  width: 30px; height: 21px; cursor: pointer; font-size: 10px; line-height: 1;
  color: var(--sn-cyan); background: rgba(0,0,0,.4); border: 1px solid var(--sn-linha);
}
.sn-mv:disabled { opacity: .25; cursor: default; }
.sn-mv:hover:not(:disabled) { border-color: var(--sn-cyan); }

/* -------------------------------------------------------------------------
   4 · A dobra e a região acesa
   ------------------------------------------------------------------------- */
.sn-dobra-wrap { min-height: 70vh; display: flex; align-items: center; }
.sn-dobra { position: relative; width: 100%; height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sn-dobra-curta { height: 200px; }
.sn-dobra-riscos {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--sn-tom) 0deg 0.35deg, transparent 0.35deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 4%, #000 22%, #000 60%, transparent 88%);
  mask-image: radial-gradient(closest-side, transparent 4%, #000 22%, #000 60%, transparent 88%);
  opacity: .55; animation: sn-dobrar 1.5s ease-out both;
}
@keyframes sn-dobrar { from { transform: scale(.15); opacity: 0; } 40% { opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
.sn-dobra-txt { position: relative; margin: 0; font-family: var(--sn-disp); font-weight: 500; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--sn-txt-dim); }
@media (prefers-reduced-motion: reduce) {
  .sn-dobra-riscos { animation: none; opacity: .3; }
  .sn-nucleo i { transition: none; }
  .sn-log .sn-cursor { animation: none; }
}

.sn-letra-linha { display: flex; align-items: center; gap: 20px; }
.sn-letra {
  flex: 0 0 auto; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sn-disp); font-weight: 900; font-size: 30px; color: var(--sn-tom);
  border: 2px solid var(--sn-tom); background: rgba(0,0,0,.35);
  box-shadow: 0 0 32px rgba(238,201,126,.18) inset;
}
.sn-letra-txt { flex: 1 1 auto; min-width: 0; }
.sn-frase { margin: 0 0 10px; font-size: 16px; color: #fff; }
.sn-barra { display: block; height: 8px; background: rgba(12,16,38,.5); border: 1px solid var(--sn-linha); overflow: hidden; }
.sn-barra i { display: block; height: 100%; background: var(--sn-tom); box-shadow: 0 0 14px currentColor; }

/* -------------------------------------------------------------------------
   5 · A revelação
   ------------------------------------------------------------------------- */
.sn-rev-topo { display: grid; gap: 22px; align-items: center; }
@media (min-width: 820px) { .sn-rev-topo { grid-template-columns: 1fr 1fr; gap: 36px; } }
.sn-const { display: block; width: 100%; max-width: 340px; margin: 0 auto; height: auto; }
.sn-codigo {
  font-family: var(--sn-disp); font-weight: 900; font-size: clamp(2.6rem, 12vw, 4.4rem);
  letter-spacing: .06em; color: #fff; text-align: center; margin: 6px 0 2px;
  text-shadow: 0 0 40px rgba(201,191,224,.35);
}
.sn-codigo-nota { font-family: var(--sn-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--sn-txt-faint); text-align: center; margin: 0; }
.sn-nome { margin: 0 0 6px; font-family: var(--sn-disp); font-weight: 700; font-size: 1.7rem; color: #fff; }
.sn-epit { margin: 0 0 14px; font-family: var(--sn-mono); font-size: 13px; letter-spacing: .1em; color: var(--sn-tom); }
.sn-desc { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--sn-txt); }
.sn-classe { font-family: var(--sn-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-txt-faint); margin: 0 0 8px; }
.sn-certeza { font-family: var(--sn-mono); font-size: 13px; color: var(--sn-txt-dim); text-align: center; margin: 12px 0 0; }
.sn-certeza b { color: var(--sn-cyan); }
.sn-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sn-link { background: none; border: 0; font: inherit; font-family: var(--sn-mono); font-size: 12px; letter-spacing: .1em; color: var(--sn-cyan); cursor: pointer; padding: 2px 0; }
.sn-link:hover { text-decoration: underline; }
.sn-espectro { margin-top: 18px; }
.sn-espectro-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.sn-lado { color: var(--sn-txt-faint); }
.sn-lado.is-on { color: var(--sn-tom); font-weight: 600; }
.sn-pcts { flex: 0 0 auto; font-family: var(--sn-mono); font-size: 12.5px; color: var(--sn-txt-dim); font-variant-numeric: tabular-nums; }
.sn-trilho-esp { height: 34px; margin: 6px 0 0; }
.sn-simulado { margin: 16px 0 0; min-height: 22px; font-family: var(--sn-mono); font-size: 13px; color: var(--sn-menta); }
.sn-radar { display: block; width: 100%; max-width: 320px; margin: 8px auto 6px; height: auto; }
.sn-funcs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.sn-funcs li { display: grid; grid-template-columns: 34px 1fr 96px; align-items: center; gap: 12px; font-size: 14px; }
.sn-funcs b { font-family: var(--sn-disp); font-weight: 700; color: var(--sn-tom); }
.sn-funcs span:first-of-type { color: var(--sn-txt-dim); }
.sn-barra-fn { height: 6px; }
.sn-acoes { display: grid; gap: 10px; margin-top: 18px; }

/* -------------------------------------------------------------------------
   6 · O cartão do capitão
   ------------------------------------------------------------------------- */
.sn-cartao-wrap { display: grid; gap: 26px; align-items: start; }
@media (min-width: 860px) { .sn-cartao-wrap { grid-template-columns: 340px 1fr; gap: 40px; } }
.sn-cartao {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(132,116,173,.55), transparent 62%),
    linear-gradient(178deg, #28315f, #161d40 68%, #121838);
  border: 1px solid var(--sn-tom);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  padding: 22px 22px 26px;
  box-shadow: 0 26px 70px rgba(6,8,26,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.sn-cartao-marca { font-family: var(--sn-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sn-txt-dim); margin: 0; }
.sn-cartao-reg { font-family: var(--sn-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--sn-txt-faint); margin: 2px 0 16px; }
.sn-cartao-nave { display: flex; justify-content: center; margin: 4px 0 12px; }
.sn-cartao-nave svg { width: 74px; height: 74px; }
.sn-cartao .sn-codigo { font-size: 2.6rem; margin: 0; }
.sn-cartao-nome { font-family: var(--sn-disp); font-weight: 500; font-size: 1.1rem; color: var(--sn-tom); text-align: center; margin: 6px 0 2px; }
.sn-cartao-epit { font-family: var(--sn-mono); font-size: 11.5px; color: var(--sn-txt-dim); text-align: center; margin: 0 0 16px; }
.sn-cartao-linhas { display: grid; gap: 8px; margin: 0 0 16px; }
.sn-cartao-l { display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; gap: 10px; font-family: var(--sn-disp); font-weight: 700; font-size: 12px; color: var(--sn-txt-dim); }
.sn-cartao-l .on { color: var(--sn-tom); }
.sn-cartao-rodape { display: flex; justify-content: space-between; gap: 10px; font-family: var(--sn-mono); font-size: 11px; color: var(--sn-txt-faint); border-top: 1px solid var(--sn-linha); padding-top: 12px; }
.sn-cartao-canvas { display: none; }