/* Fonte hospedada no próprio site (funciona offline) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 62% 125%; font-display: swap;
  src: url("../vendor/fontes/archivo.woff2") format("woff2"); }

/* Paleta inspirada na direção THOR: preto profundo, azul elétrico, feixe violeta, brilho âmbar */
:root {
  --tinta: #04050a;
  --noite: #090e1c;
  --azul-fundo: #0a2a6b;
  --eletrico: #2f7bff;
  --ciano: #46c8ff;
  --violeta: #8a6cff;
  --lavanda: #c7bdff;
  --ambar: #ffb547;
  --ouro: #ffd27a;
  --texto: #ffffff;
  --texto-2: rgba(255,255,255,.62);
  --texto-3: rgba(255,255,255,.38);
  --linha: rgba(255,255,255,.10);
  --vidro: rgba(255,255,255,.07);
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-base: env(safe-area-inset-bottom, 0px);
  --fonte-marca: "Archivo", -apple-system, system-ui, sans-serif;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--tinta); color: var(--texto); font-family: var(--fonte); }
body { overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.oculto { display: none !important; }

/* ---------- Fundo cinematográfico ---------- */
.cena { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(520px 520px at 25% 32%, rgba(10,42,107,.55), transparent 70%),
    radial-gradient(420px 420px at 85% 92%, rgba(47,123,255,.16), transparent 70%),
    linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.6)),
    var(--tinta);
  transition: opacity .6s ease;
}
.feixe { position: absolute; width: 150px; height: 140%; left: 62%; top: -30%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(138,108,255,.30), rgba(199,189,255,.20), transparent);
  filter: blur(40px); opacity: .9; }
.brilho { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 38%, rgba(47,123,255,.10), transparent 70%); opacity: 0; transition: opacity .6s; }
body[data-modo="ouvindo"] .brilho, body[data-modo="falando"] .brilho { opacity: 1; }

/* ---------- Layout ---------- */
.tela { position: relative; z-index: 1; height: 100dvh; display: flex; flex-direction: column;
  padding: calc(var(--seguro-topo) + 6px) 16px calc(var(--seguro-base) + 10px); }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; min-height: 44px; }
.marca { font-family: var(--fonte-marca); font-stretch: 125%; font-weight: 600; font-size: 15px; letter-spacing: .55em; }
.acoes-topo { display: flex; gap: 10px; }

/* ---------- Vidro (estilo Liquid Glass) ---------- */
.vidro { position: relative; background: var(--vidro);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.35);
  transition: transform .18s cubic-bezier(.3,.7,.4,1.4), background .25s; }
.vidro:active { transform: scale(.95); }
.redondo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.redondo.grande { width: 56px; height: 56px; }
.pilula { border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; }
.pilula span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.pilula strong { font-size: 16px; font-weight: 600; }

.pilula small { white-space: nowrap; font-family: var(--fonte-marca); font-stretch: 125%; font-size: 9px; letter-spacing: .14em; opacity: .7; }
.ambar-tint { background: linear-gradient(135deg, rgba(255,181,71,.55), rgba(255,140,40,.35)); }
.ciano-tint { background: linear-gradient(135deg, rgba(47,123,255,.6), rgba(70,200,255,.35)); }

/* ---------- Orbe (desenhado em WebGL, ver orbe.js) ---------- */
.palco { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 3vh; transition: padding .5s; }
.orbe { --s: min(70vw, 300px); position: relative; width: var(--s); height: var(--s); display: block;
  transition: width .55s cubic-bezier(.3,.8,.3,1), height .55s cubic-bezier(.3,.8,.3,1); touch-action: manipulation; }
.orbe canvas { width: 100%; height: 100%; display: block;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 70%, transparent 100%); }
.orbe:active { transform: scale(.97); transition: transform .15s; }
body.compacto .orbe { --s: 128px; }
body.compacto .palco { padding-top: 0; gap: 0; margin-top: -14px; }
/* sem WebGL: círculo simples */
.orbe.sem-webgl canvas { display: none; }
.orbe.sem-webgl::after { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #46c8ff, #2f7bff 45%, #0a2a6b 80%); box-shadow: 0 0 40px rgba(47,123,255,.5); }

.status { margin: 0; font-family: var(--fonte-marca); font-stretch: 125%; font-size: 11px; letter-spacing: .22em; color: var(--texto-3); font-weight: 500; text-align: center; transition: color .3s; }
.status.ciano { color: var(--ciano); } .status.ouro { color: var(--ouro); }

/* ---------- Preparo da IA ---------- */
.preparo { margin: 14px 0 0; padding: 18px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(135deg, rgba(255,181,71,.12), transparent 60%), rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06); animation: entrar .35s ease; }
.preparo h3 { margin: 0; font-size: 20px; font-weight: 600; }
.preparo .nota { margin: 0; }
.preparo .pilula { align-self: flex-start; }
.barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.barra span { display: block; height: 100%; width: 2%; border-radius: 3px; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); transition: width .2s; }

/* ---------- Histórico ---------- */
.historico { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 8px; display: flex; flex-direction: column; gap: 12px;
  mask-image: linear-gradient(to bottom, transparent, #000 18px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px); scrollbar-width: none; }
.historico::-webkit-scrollbar { display: none; }
.cartao { position: relative; border-radius: 24px; padding: 16px; -webkit-user-select: text; user-select: text;
  background: linear-gradient(135deg, rgba(47,123,255,.10), transparent 60%), rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: entrar .35s cubic-bezier(.2,.8,.2,1); }
.cartao.eu { background: linear-gradient(135deg, rgba(255,181,71,.12), transparent 60%), rgba(255,255,255,.05); }
.cartao .cab { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.cartao .cab .rotulo { flex: 1; margin: 0; }
.cartao .cab button { color: var(--texto-2); padding: 2px; }
.cartao .cab button svg { width: 16px; height: 16px; }
.cartao .principal { font-size: 22px; line-height: 1.28; font-weight: 500; letter-spacing: -.01em; }
.cartao .original { margin-top: 6px; font-size: 14px; color: var(--texto-3); line-height: 1.35; }
.cartao.ao-vivo .principal { color: rgba(255,255,255,.92); }
.cartao.ao-vivo .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: piscar 1.2s ease-in-out infinite; }
.carregando { display: inline-block; opacity: .5; animation: piscar 1s infinite; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes piscar { 50% { opacity: .25; } }

.rotulo { margin: 0; font-family: var(--fonte-marca); font-stretch: 125%; font-size: 10.5px; letter-spacing: .2em; font-weight: 600; color: var(--texto-3); display: flex; align-items: center; gap: 6px; }
.rotulo.ciano { color: var(--ciano); } .rotulo.ouro { color: var(--ouro); }

/* ---------- Controles: dois botões grandes na altura do polegar ---------- */
.controles { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.botoes-grandes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; padding: 0 2px; }
.botoes-meio { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-bottom: 30px; }
.redondo.medio { width: 50px; height: 50px; }
.botao-grande { display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.botao-grande * { pointer-events: none; }
.botao-grande .disco { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.45);
  transition: transform .14s cubic-bezier(.3,.7,.4,1.4), background .25s, box-shadow .25s; }
.botao-grande svg { width: 36px; height: 36px; stroke-width: 2; }
.botao-grande .ico-ativo { display: none; }
.botao-grande.ativo .ico-ativo { display: block; }
.botao-grande.ativo .ico-parado { display: none; }
.botao-grande:active .disco { transform: scale(.93); }
.botao-grande strong { font-size: 17px; font-weight: 600; }
.botao-grande small { font-family: var(--fonte-marca); font-stretch: 125%; font-size: 9px; letter-spacing: .14em; color: var(--texto-2); }
.botao-grande.ouvir .disco { background: radial-gradient(circle at 35% 30%, rgba(70,200,255,.55), rgba(47,123,255,.45) 55%, rgba(10,42,107,.55)); }
.botao-grande.falar .disco { background: radial-gradient(circle at 35% 30%, rgba(255,210,122,.6), rgba(255,160,50,.45) 55%, rgba(120,60,10,.5)); }
.botao-grande.ativo .disco::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid currentColor; opacity: .8;
  animation: anel 1.3s ease-out infinite; }
.botao-grande.ouvir.ativo { color: var(--ciano); }
.botao-grande.falar.ativo { color: var(--ouro); }
.botao-grande.ativo strong, .botao-grande.ativo svg { color: #fff; }
.botao-grande:disabled { opacity: .45; }
@keyframes anel { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.digitar { display: flex; gap: 10px; animation: entrar .25s ease; }
.digitar input { flex: 1; min-width: 0; height: 46px; border-radius: 23px; border: 0; padding: 0 18px; font: inherit; font-size: 16px; color: #fff; outline: none;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); -webkit-user-select: text; user-select: text; }
.digitar .redondo { width: 46px; height: 46px; }

/* ---------- Tradução de foto ---------- */
.leitura-foto { width: 100%; max-height: 32dvh; object-fit: contain; border-radius: 16px; background: rgba(255,255,255,.04); }
.leitura-itens { display: flex; flex-direction: column; gap: 10px; }
.leitura-item { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.leitura-item .pt { font-size: 17px; font-weight: 600; line-height: 1.3; }
.leitura-item .en { font-size: 13px; color: var(--texto-3); margin-top: 3px; }
.leitura-item .nota-item { font-size: 13px; color: var(--ouro); margin-top: 4px; }

/* ---------- Vitrine (tela cheia) ---------- */
.vitrine { position: fixed; inset: 0; z-index: 20; background: var(--tinta); display: flex; flex-direction: column; gap: 22px;
  padding: calc(var(--seguro-topo) + 40px) 28px calc(var(--seguro-base) + 24px); animation: entrar .3s ease; }
.vitrine-texto { flex: 1; margin: 0; font-size: clamp(30px, 10vw, 52px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; overflow-y: auto; }
.vitrine-acoes { display: flex; justify-content: space-between; }

/* ---------- Painel de ajustes ---------- */
.painel { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-end; }
.painel-corpo { width: 100%; max-height: 88dvh; overflow-y: auto; border-radius: 28px 28px 0 0; background: #0b0f1d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); padding: 20px 20px calc(var(--seguro-base) + 24px); display: flex; flex-direction: column; gap: 14px;
  animation: subir .32s cubic-bezier(.2,.8,.2,1); }
@keyframes subir { from { transform: translateY(100%); } }
.painel-topo { display: flex; align-items: center; justify-content: space-between; }
.painel-topo h2 { margin: 0; font-size: 22px; }
.painel .rotulo { margin-top: 10px; }
.segmentado { display: flex; background: rgba(255,255,255,.07); border-radius: 12px; padding: 3px; }
.segmentado button { flex: 1; padding: 9px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.segmentado button.ativo { background: rgba(255,255,255,.16); color: #fff; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }
.campo select { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.07); border: 0; border-radius: 12px; padding: 12px; }
.campo input[type=range] { accent-color: var(--eletrico); }
.alternar { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.alternar input { width: 22px; height: 22px; accent-color: var(--eletrico); }
.nota { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-3); }

/* ---------- Aviso ---------- */
.aviso { position: fixed; left: 16px; right: 16px; top: calc(var(--seguro-topo) + 60px); z-index: 40; padding: 14px 16px; border-radius: 18px;
  background: rgba(30,12,12,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,120,120,.3);
  font-size: 14px; line-height: 1.4; animation: entrar .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .malha, .tunel, .aro, .aro-brilho, .ambar { animation: none; }
}