/* ============================================================
   Trading$yphers · Camada Mobile v1.2 — ts-mobile.css
   ------------------------------------------------------------
   Todas as regras são escopadas em body.ts-mobile-on
   (classe adicionada pelo ts-mobile.js apenas em telas <= breakpoint).
   O desktop permanece intocado.
   ============================================================ */

:root{
  --ts-accent:#f2efe4;            /* atualizado pelo JS a cada ato   */
  --ts-void:#04060c;
  --ts-dim:#7d84a0;
  --ts-hair:rgba(255,255,255,.08);
  --ts-tick-h:38px;
  --ts-chalk:'Fredericka the Great', Georgia, 'Times New Roman', serif;
}

/* ---------- utilitário: esconder elementos de desktop ---------- */
body.ts-mobile-on .ts-hide{ display:none !important; }

/* ============================================================
   v1.2 — HERO ENXUTO (operador 2026-08-14)
   O sistema palavras+pontos conectados sai: o spine é o nav.
   updateLine() degenera a 0×0 sem crash (hero.js só guarda
   contra nós ausentes, não ocultos).
   ============================================================ */
body.ts-mobile-on .stage-words,
body.ts-mobile-on #connection-svg{ display:none !important; }

/* v1.2 — sem ticker no mobile: o companheiro desce ao rodapé */
body.ts-mobile-on{ --ts-tick-h:0px; }

/* v1.2 — descrições enxutas: intro de cada ato em 2 linhas
   (clamp por CSS — imune ao rewrite do lang.js/hero.js) */
body.ts-mobile-on .division .div-body{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* idem para a descrição do herói (mesma copy, via hero.js) —
   e contém o bloco no viewport (base tem largura de desktop) */
body.ts-mobile-on .footer-row,
body.ts-mobile-on .description{ max-width:100%; }
body.ts-mobile-on .desc-body{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* v1.2 — Think: a Rosa é a protagonista; os 3 cards saem */
body.ts-mobile-on #div-think .div-cards{ display:none !important; }

/* v1.3 — Cypher: cards de preço FORA no mobile (operador 2026-08-14);
   a descrição vira o conteúdo do ato — inteira, sem clamp.
   Os preços continuam em sinais.html. */
body.ts-mobile-on #div-cypher .div-cards{ display:none !important; }
body.ts-mobile-on #div-cypher .div-body{ display:block; overflow:visible; }

/* v1.2.1 — a coluna do Cypher era mais alta que a tela em retrato
   (ancorada por flex-end, o topo vazava acima do spine — o pin do
   journeys só ergue, nunca desce). Enxuga: eyebrows ornamentais
   fora no mobile + coluna compacta em retrato. */
body.ts-mobile-on .division .div-eyebrow{ display:none; }
@media (orientation: portrait){
  body.ts-mobile-on #div-cypher .div-stats{ margin-bottom:10px; gap:16px; }
  body.ts-mobile-on #div-cypher .div-title{ margin-bottom:8px; }
  body.ts-mobile-on #div-cypher .div-body{ margin-bottom:10px; }
  /* âncora no topo (sob o spine) + scroll interno nativo — com
     flex-end o excedente vazava ACIMA, inalcançável (o pin do
     journeys só ergue; com eyebrow display:none ele vira no-op
     e esta regra assume o posicionamento) */
  body.ts-mobile-on #div-cypher{
    justify-content:flex-start;
    padding-top:calc(86px + env(safe-area-inset-top));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ============================================================
   PT–EN — o par de idiomas no rodapé, sob o "role para subir"
   (v1.3, operador 2026-08-14). Segue o fade do #axis-hint.
   ============================================================ */
body.ts-mobile-on #ts-m-lang{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(28px + env(safe-area-inset-bottom));
  z-index:9945; display:flex; align-items:center; gap:2px;
  transition:opacity .5s;
}
body.ts-mobile-on #ts-m-lang button{
  border:0; background:none; color:var(--ts-dim);
  font-size:12px; letter-spacing:.22em; font-weight:600;
  padding:12px 10px; min-height:44px; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:color .3s, text-shadow .3s;
}
body.ts-mobile-on #ts-m-lang button.on{
  color:#FFD700; text-shadow:0 0 12px rgba(255,215,0,.45);
}
body.ts-mobile-on #ts-m-lang .tsl-sep{
  color:rgba(255,255,255,.18); font-size:11px;
}

/* âncoras não somem sob o spine */
body.ts-mobile-on [data-ts-act]{ scroll-margin-top:70px; }

/* ============================================================
   SPINE — o lema como barra de progresso semântica
   ============================================================ */
body.ts-mobile-on #ts-m-spine{
  position:fixed; top:0; left:0; right:0; z-index:9950;
  padding:calc(10px + env(safe-area-inset-top)) 0 12px;
  background:linear-gradient(rgba(4,6,12,.82), rgba(4,6,12,.55) 70%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;               /* não bloqueia toques no herói */
}
body.ts-mobile-on #ts-m-progress{
  position:absolute; top:0; left:0; height:2px; width:0%;
  background:var(--ts-accent);
  box-shadow:0 0 8px var(--ts-accent);
  transition:background .6s;
}
body.ts-mobile-on .ts-m-words{
  display:flex; justify-content:center; gap:26px;
  font-family:var(--ts-chalk); font-size:19px; letter-spacing:1px;
  position:relative;
}
body.ts-mobile-on .ts-m-words span{
  color:#3a3f52;
  transition:color .5s, text-shadow .5s, transform .15s;
  /* v1.2 — o spine é o nav: palavras tocáveis (header segue
     pointer-events:none; só os spans recebem toque);
     padding leva o alvo a ~44px */
  pointer-events:auto; cursor:pointer; padding:11px 8px;
  display:inline-block; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.ts-mobile-on .ts-m-words span:active{ transform:scale(0.94); }

/* paisagem: spine compacto — mais palco para o $niper */
@media (orientation: landscape){
  body.ts-mobile-on #ts-m-spine{ padding:calc(4px + env(safe-area-inset-top)) 0 5px; }
  body.ts-mobile-on .ts-m-words{ font-size:15px; gap:20px; }
  body.ts-mobile-on .ts-m-words span{ padding:5px 6px; }
}

/* o logo THINK?SYS desce com a safe-area (o spine cresce com o
   notch e cobria o logo no aparelho real) */
body.ts-mobile-on #rosa-logo{ top:calc(76px + env(safe-area-inset-top)); }
body.ts-mobile-on .ts-m-words span.on{
  color:var(--ts-accent);
  text-shadow:0 0 14px var(--ts-accent);
}
body.ts-mobile-on #ts-m-marker{
  position:absolute; bottom:2px; left:0;
  width:7px; height:7px; background:var(--ts-accent);
  transform:rotate(45deg);
  box-shadow:0 0 10px var(--ts-accent);
  transition:transform .55s cubic-bezier(.6,.05,.2,1), background .6s, box-shadow .6s;
}

/* ============================================================
   DIAMANTE COMPANHEIRO
   ============================================================ */
body.ts-mobile-on #ts-m-companion{
  position:fixed; right:20px;
  bottom:calc(var(--ts-tick-h) + 18px + env(safe-area-inset-bottom));
  z-index:9960; border:0; background:transparent; color:inherit;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:system-ui, -apple-system, sans-serif; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.ts-mobile-on #ts-m-dia{
  width:46px; height:46px; background:rgba(6,9,18,.85);
  border:1px solid var(--ts-accent); transform:rotate(45deg);
  box-shadow:0 0 20px var(--ts-accent), inset 0 0 12px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .6s, box-shadow .6s;
}
body.ts-mobile-on #ts-m-dia span{
  transform:rotate(-45deg); font-size:19px; color:var(--ts-accent);
  transition:color .6s;
}
body.ts-mobile-on #ts-m-companion.pulse #ts-m-dia{ animation:ts-seat .5s ease; }
@keyframes ts-seat{ 40%{ transform:rotate(45deg) scale(1.22); } }
body.ts-mobile-on #ts-m-comp-label{
  font-size:9px; letter-spacing:.32em; color:var(--ts-dim); text-transform:uppercase;
}

/* ============================================================
   CONSTELAÇÃO — mapa de navegação (O Campo)
   ============================================================ */
body.ts-mobile-on #ts-m-co{
  position:fixed; inset:0; z-index:9990;
  background:rgba(3,5,12,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .35s;
}
body.ts-mobile-on #ts-m-co.on{ opacity:1; pointer-events:auto; }
body.ts-mobile-on .ts-m-co-close{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:20px;
  border:1px solid var(--ts-hair); background:transparent; color:var(--ts-dim);
  width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer;
}
body.ts-mobile-on .ts-m-co-title{
  position:absolute; top:calc(24px + env(safe-area-inset-top)); left:26px;
  font-family:var(--ts-chalk); font-size:20px; color:#e7e9f0; margin:0;
}
body.ts-mobile-on .ts-m-co-sub{
  position:absolute; top:calc(58px + env(safe-area-inset-top)); left:26px;
  font-size:10.5px; letter-spacing:.26em; color:var(--ts-dim);
  text-transform:uppercase; margin:0;
}
/* mvt III: o fundo sobe de 180 para 290 — abre a faixa das estações
   (medido a 390×844: estações 66px + páginas ~130px + folgas) */
body.ts-mobile-on .ts-m-co-field{ position:absolute; inset:110px 0 290px; }
body.ts-mobile-on .ts-m-co-field svg{ position:absolute; inset:0; width:100%; height:100%; }
body.ts-mobile-on .ts-m-co-field line{
  stroke:rgba(210,215,235,.28); stroke-width:1; stroke-dasharray:3 6;
}
body.ts-mobile-on .ts-m-co-node{
  position:absolute; transform:translate(-50%,-50%);
  border:0; background:transparent; color:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  -webkit-tap-highlight-color:transparent;
}
body.ts-mobile-on .ts-m-co-node i{
  width:26px; height:26px; transform:rotate(45deg); display:block;
  box-shadow:0 0 24px currentColor; background:currentColor;
}
body.ts-mobile-on .ts-m-co-node span{
  font-family:var(--ts-chalk); font-size:18px; letter-spacing:.04em;
}
body.ts-mobile-on .ts-m-co-node small{
  font-size:9px; letter-spacing:.28em; color:var(--ts-dim); text-transform:uppercase;
}
/* mvt III — o eixo interior: estações da jornada ativa, entre o
   campo e os chips de páginas */
body.ts-mobile-on .ts-m-co-stations{
  position:absolute; left:0; right:0;
  bottom:calc(224px + env(safe-area-inset-bottom)); padding:0 26px;
}
body.ts-mobile-on .ts-m-co-stations p{
  font-size:10px; letter-spacing:.26em; color:var(--ts-dim);
  text-transform:uppercase; margin:0 0 10px;
}
body.ts-mobile-on .ts-m-st-rail{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:4px;
}
body.ts-mobile-on .ts-m-st-rail::-webkit-scrollbar{ display:none; }
body.ts-mobile-on .ts-m-st-rail button{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  border:1px solid var(--ts-hair); border-radius:18px;
  background:rgba(255,255,255,.03); color:#b9bfd2;
  font-size:12px; padding:10px 14px; min-height:40px; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; transition:transform .15s;
}
body.ts-mobile-on .ts-m-st-rail button:active{ transform:scale(0.95); }
body.ts-mobile-on .ts-m-st-rail button i{
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--st-c,#fff); box-shadow:0 0 8px var(--st-c,#fff);
}

body.ts-mobile-on .ts-m-co-pages{
  position:absolute; left:0; right:0;
  bottom:calc(70px + env(safe-area-inset-bottom)); padding:0 26px;
}
body.ts-mobile-on .ts-m-co-pages p{
  font-size:10px; letter-spacing:.26em; color:var(--ts-dim);
  text-transform:uppercase; margin:0 0 12px;
}
body.ts-mobile-on .ts-m-chips{ display:flex; gap:8px; flex-wrap:wrap; }
body.ts-mobile-on .ts-m-chips a{
  padding:8px 12px; border:1px solid var(--ts-hair); border-radius:18px;
  color:#b9bfd2; font-size:11px; text-decoration:none;
  background:rgba(255,255,255,.03);
  display:inline-block; transition:transform .15s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
body.ts-mobile-on .ts-m-chips a:active{ transform:scale(0.95); }

/* ============================================================
   RAIL — pilares T·M·D viram carrossel horizontal (Trade →)
   Aplicado ao container definido em railSelector na config.
   `row` precisa vencer o `.div-cards { flex-direction: column }`
   do breakpoint <=900px em styles.css.
   ============================================================ */
body.ts-mobile-on .ts-rail{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  /* flex-start: com justify flex-end (layout à direita das divisions),
     o overflow cai à ESQUERDA e fica inalcançável ao scroll */
  justify-content:flex-start !important;
  /* stretch: as .division são flex column com align-items:flex-end —
     sem isto o rail encolhe e desloca */
  align-self:stretch;
  gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:26px;   /* snap respeita o padding — card nunca corta */
  padding:6px 26px 18px;
  margin-left:-26px; margin-right:-26px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
body.ts-mobile-on .ts-rail::-webkit-scrollbar{ display:none; }
body.ts-mobile-on .ts-rail > *{
  scroll-snap-align:start;
  flex:0 0 78% !important;
  max-width:78%;
}
body.ts-mobile-on .ts-rail-hint{
  margin:34px 26px 10px 0; font-size:10.5px; letter-spacing:.3em;
  color:var(--ts-accent); text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
body.ts-mobile-on .ts-rail-hint::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--ts-accent), transparent);
  opacity:.6;
}

/* ============================================================
   ROSA DOS PENSAMENTOS — modal de desktop vira bottom sheet
   Aplicado ao elemento definido em rosaModal na config.
   ============================================================ */
body.ts-mobile-on .ts-sheet{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  top:auto !important; width:auto !important; max-width:none !important;
  /* sem !important: o swipe-down escreve transform inline durante o arraste */
  transform:none;
  border-radius:18px 18px 0 0 !important;
  border-top:1px solid rgba(240,238,228,.18);
  padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;
  max-height:82vh; max-height:82svh; overflow-y:auto;
  z-index:9995 !important;
  touch-action:pan-y;
}
/* alça de arraste injetada visualmente */
body.ts-mobile-on .ts-sheet::before{
  content:""; display:block; width:44px; height:4px; border-radius:2px;
  background:#333a52; margin:10px auto 16px;
}

/* ============================================================
   FLIP — Trade é exclusivo landscape (operador 2026-08-14)
   Overlay bloqueante em retrato: celular branco girando + arco.
   z 9980: acima do spine (9950); companheiro sobe a 9985 para
   permitir trocar de ato sem girar; O Campo (9990) fica acima.
   ============================================================ */
body.ts-mobile-on #ts-m-flip{
  position:fixed; inset:0; z-index:9980;
  background:rgba(3,5,12,.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
body.ts-mobile-on #ts-m-flip.on{ opacity:1; pointer-events:auto; }
body.ts-mobile-on.ts-flip-on #ts-m-companion{ z-index:9985; }
body.ts-mobile-on .ts-flip-visual{
  position:relative; width:150px; height:150px;
  display:flex; align-items:center; justify-content:center;
}
body.ts-mobile-on .ts-flip-visual svg{
  position:absolute; inset:0; width:100%; height:100%;
}
body.ts-mobile-on .ts-flip-phone{
  width:44px; height:80px; position:relative;
  border:3px solid #fff; border-radius:10px;
  box-shadow:0 0 26px rgba(255,255,255,.35);
  animation:ts-flip-rotate 2.8s ease-in-out infinite;
}
body.ts-mobile-on .ts-flip-phone i{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:14px; height:3px; border-radius:2px; background:#fff; opacity:.8;
}
@keyframes ts-flip-rotate{
  0%, 16%   { transform:rotate(0deg); }
  46%, 78%  { transform:rotate(90deg); }
  100%      { transform:rotate(0deg); }
}
body.ts-mobile-on .ts-flip-title{
  font-family:var(--ts-chalk); font-size:24px; color:#fff; margin:0;
}
body.ts-mobile-on .ts-flip-sub{
  font-size:11px; letter-spacing:.28em; color:var(--ts-dim);
  text-transform:uppercase; margin:0; padding:0 30px;
}

/* ============================================================
   TICKER DO ECOSSISTEMA — safe-area + pausa por toque
   ============================================================ */
body.ts-mobile-on .ts-ticker{
  padding-bottom:env(safe-area-inset-bottom);
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  body.ts-mobile-on #ts-m-marker,
  body.ts-mobile-on #ts-m-co{ transition:none; }
  body.ts-mobile-on #ts-m-companion.pulse #ts-m-dia{ animation:none; }
  /* flip: ícone estático já na orientação-alvo */
  body.ts-mobile-on .ts-flip-phone{ animation:none; transform:rotate(90deg); }
  /* mvt V: micro-transições novas também param */
  body.ts-mobile-on .ts-m-st-rail button,
  body.ts-mobile-on .ts-m-chips a,
  body.ts-mobile-on .ts-m-words span,
  body.ts-mobile-on #ts-m-lang{ transition:none; }
}