/* Escritório 3D (sobre a cena): rótulo, botões de modo (Agência | Trader), aviso do modo trader, cartões de evento e o
   letreiro legível que repete o essencial da TV. Arquivo separado de landing.css de propósito: mexer na aba de inscrição
   não mexe aqui, e vice-versa. Celular primeiro: botões com 40 px de altura, nada depende de hover. */

.hud {
  position: absolute; z-index: 2; top: 16px; left: 16px; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none;
}
.hud .tag { position: static; max-width: 100%; }
.hud .toast { position: relative; top: auto; left: auto; max-width: 100%; }

/* botões de modo (controle segmentado) */
.modes {
  pointer-events: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px;
  background: rgba(9, 9, 15, 0.66); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mode-chip {
  min-width: 92px; height: 40px; padding: 0 16px; border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: #b4b4c8; background: transparent;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mode-chip[aria-pressed="true"] { color: #fff; background: var(--brand, #7c5cff); box-shadow: 0 6px 16px rgba(104, 67, 255, 0.4); }
.mode-chip:focus-visible { outline: 3px solid var(--accent, #ffb547); outline-offset: 2px; }
@media (hover: hover) { .mode-chip[aria-pressed="false"]:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } }

/* aviso fixo do modo trader */
.mode-note {
  margin: 0; padding: 5px 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.35; font-weight: 650;
  color: #f6e0b3; background: rgba(36, 25, 6, 0.78); border: 1px solid rgba(255, 181, 71, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* letreiro: agora / próximo / progresso do dia (o mesmo que a TV mostra, em letra de ler) */
.letreiro {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); padding: 9px 12px 10px;
  border-radius: 14px; color: #f1f1f8; background: rgba(12, 11, 22, 0.86); border: 1px solid rgba(185, 173, 255, 0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none;
}
.lt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.lt-head b { flex: none; color: var(--brand-soft, #b9adff); font-weight: 800; white-space: nowrap; }
.lt-seal { flex: none; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent, #ffb547); font-weight: 800; white-space: nowrap; }
.lt-row { margin: 6px 0 0; display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.lt-k { flex: none; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; }
.lt-now .lt-k { color: #1a1200; background: var(--accent, #ffb547); }
.lt-now.is-done .lt-k { color: #06150e; background: var(--green, #3ddc97); }
.lt-next .lt-k { color: #b4b4c8; background: rgba(255, 255, 255, 0.09); }
.lt-h { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-soft, #b9adff); }
.lt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lt-now .lt-t { font-size: 15px; font-weight: 700; }
.lt-next .lt-t { font-size: 13px; color: #c9c9da; }
/* cartão de evento dentro do letreiro (celular): troca a linha AGORA por alguns segundos */
.lt-ev { display: none; }
.letreiro.is-event .lt-ev { display: flex; align-items: flex-start; margin-top: 0; white-space: normal; animation: lt-ev 0.35s ease both; }
.letreiro.is-event .lt-now { display: none; }
.lt-ev .lt-t { font-size: 14.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.lt-ev .lt-k { margin-top: 1px; color: #0b0714; background: var(--ev, #2de2c5); }
.letreiro[data-ev="nova"] { --ev: #ffb547; }
.letreiro[data-ev="feito"] { --ev: #3ddc97; }
.letreiro[data-ev="alerta"] { --ev: #ff6b81; }
.letreiro[data-ev="decisao"] { --ev: #2de2c5; }
.letreiro.is-event { border-color: color-mix(in srgb, var(--ev, #2de2c5) 55%, transparent); }
@keyframes lt-ev { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lt-bar { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.lt-track { flex: 1; min-width: 48px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.lt-track i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand, #7c5cff), var(--green, #3ddc97));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.6s ease; }
.lt-count { flex: none; font-size: 11px; font-weight: 700; color: #b4b4c8; font-variant-numeric: tabular-nums; }

/* enquanto o 3D não aparece (só o poster), botões, aviso e letreiro guardam o lugar mas ficam invisíveis */
.stage:not(.is-3d) .modes, .stage:not(.is-3d) .mode-note, .stage:not(.is-3d) .letreiro { visibility: hidden; }
/* sem o 3D (antes de aparecer, ou depois de voltar ao poster num aparelho lento) o balão e o cartão ao vivo também somem:
   o poster do celular já traz o balão desenhado e não pode ficar com dois balões sobrepostos */
.stage:not(.is-3d) .bubble, .stage:not(.is-3d) .toast { visibility: hidden !important; }

/* troca de modo: a cena escurece rápido e volta */
.stage.is-switching .gl { opacity: 0.08 !important; transition: opacity 0.18s ease; }
.stage.is-3d.gl-fast .gl { transition-duration: 0.45s; }

/* celular / tela vertical: o letreiro fica logo acima da aba de inscrição recolhida */
@media (max-width: 760px), (max-height: 480px), (max-aspect-ratio: 5/6) {
  .hud { gap: 7px; }
  /* duas linhas só: AGORA + barra do dia com o selo (o "próximo" e o relógio ficam na TV) */
  .letreiro { right: 16px; width: auto; bottom: calc(var(--sheet-h, 0px) + 10px); padding: 8px 12px 9px; }
  .letreiro .lt-head, .letreiro .lt-next { display: none; }
  .hud .toast { display: none !important; }                     /* no celular o cartão de evento vai para o letreiro */
  .letreiro .lt-now { margin-top: 0; }
  .letreiro .lt-bar { margin-top: 7px; }
  html[data-sheet="open"] .letreiro { visibility: hidden; }
  html[data-sheet="open"] .modes { display: none; }           /* aba aberta: sobra pouco cenário; o aviso do trader sobe e continua visível */
}
/* celular deitado: pouca altura, o letreiro sai para a cena caber; rótulo, botões e aviso formam uma coluna estreita à esquerda
   (demo-ui.js reserva essa coluna e o cenário fica centrado à direita dela) */
@media (max-height: 480px) and (min-aspect-ratio: 6/5) {
  .letreiro { display: none; }
  .mode-note, .hud .tag { max-width: 300px; }
}
@media (max-width: 380px) {
  .mode-chip { min-width: 84px; padding: 0 12px; }
  .lt-head { font-size: 9.5px; letter-spacing: 0.05em; }
  .mode-note { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .lt-track i { transition: none; } .letreiro.is-event .lt-ev { animation: none; } }