/* OVERTIME — escritório de Wall Street depois do expediente.
   Linguagem: objetos de escritório de verdade (painel de LED da bolsa, quadro de letras da recepção, crachá com código de
   barras, memorando datilografado, botoeira de elevador), cantos retos, letra alta condensada nos títulos e letra de
   terminal nos números. Nada de cartão arredondado de template. */
@font-face { font-family: Anton; src: url(/fonts/Anton.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(/fonts/Archivo.woff2) format("woff2"); font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-1.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-2.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fundo: #0A0E1A; --papel: #111726; --papel2: #161D30; --linha: #232C45; --linha2: #313C5E;
  --tinta: #E9EDF6; --cinza: #8C95B3; --apagado: #5D6788;
  --ambar: #FFB23E; --ambar-fundo: #2A1F0B; --verde: #3DDC84; --vermelho: #FF5A5F; --ouro: #F2C14E;
  --titulo: Anton, Impact, "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --texto: Archivo, "Helvetica Neue", Arial, sans-serif;
  --raio: 2px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinta); font: 500 16px/1.5 var(--texto); overflow-x: hidden;
  background-color: var(--fundo);
  background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px);
  background-size: 44px 44px;
}
a { color: inherit; }
h1, h2, h3, h4, .fredoka { font-family: var(--titulo); font-weight: 400; letter-spacing: .01em; margin: 0; text-transform: uppercase; }
button { font: inherit; }
.mono { font-family: var(--mono); }
.pos { color: var(--verde); } .neg { color: var(--vermelho); }

/* ---------- faixa do CA (aparece quando o token existe) ---------- */
#faixa-ca { background: var(--ambar); color: #140E02; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 7px 16px; font: 700 13px var(--mono); text-transform: uppercase; }
#faixa-ca code { background: #0000001f; padding: 2px 8px; word-break: break-all; font: 700 12.5px var(--mono); }
#faixa-ca button, #faixa-ca a { background: #140E02; color: var(--ambar); border: 0; border-radius: var(--raio); padding: 4px 10px; font: 700 12px var(--mono); cursor: pointer; text-decoration: none; text-transform: uppercase; }

/* ---------- painel de LED da bolsa (faixa de preços) ---------- */
.fita { position: relative; overflow: hidden; background: #050709; border-bottom: 1px solid #1B2238; white-space: nowrap; font: 700 13px var(--mono); }
.fita::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#0000 55%, #050709 56%); background-size: 3px 3px; opacity: .55; }
.fita-trilho { display: inline-flex; align-items: center; gap: 16px; padding: 7px 0; animation: fita linear infinite; }
.fita:hover .fita-trilho { animation-play-state: paused; }
.fita a { color: var(--ambar); text-decoration: none; display: inline-flex; gap: 7px; text-shadow: 0 0 8px #FFB23E88; }
.fita a b { color: #FFD9A0; font-weight: 700; }
.fita a i { font-style: normal; }
.fita a i.pos { text-shadow: 0 0 8px #3DDC8488; } .fita a i.neg { text-shadow: 0 0 8px #FF5A5F88; }
.fita span { color: #3A2C12; }
@keyframes fita { to { transform: translateX(-50%); } }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 26px; padding: 0 28px; height: 60px; background: #0A0E1Aee; backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-ic { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff9 0 16%, transparent 17%), #E2E6EF; position: relative; box-shadow: 0 0 0 2px #FFB23E66; }
.marca-ic::before, .marca-ic::after { content: ""; position: absolute; top: 12px; width: 4px; height: 6px; border-radius: 2px; background: #6FF2FF; box-shadow: 0 0 6px #6FF2FF; }
.marca-ic::before { left: 9px; } .marca-ic::after { right: 9px; }
.marca-nome { font: 400 26px/1 var(--titulo); letter-spacing: .04em; }
.marca-nome.pequeno { font-size: 22px; }
.menu { display: flex; gap: 2px; height: 100%; }
.menu a { display: flex; align-items: center; padding: 0 14px; text-decoration: none; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--tinta); }
.menu a.ativo { color: var(--tinta); border-bottom-color: var(--ambar); }
.topo-acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- botões: retos, letra de terminal ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ambar); color: #140E02; border: 0; border-radius: var(--raio); padding: 12px 18px; font: 800 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 -3px 0 #0003; transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.fantasma { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha2); }
.btn.fantasma:hover { box-shadow: inset 0 0 0 1px var(--ambar); }
.btn.verde { background: var(--verde); color: #04160B; }
.btn.perigo { background: transparent; color: var(--vermelho); box-shadow: inset 0 0 0 1px #FF5A5F77; }
.btn.grande { padding: 15px 24px; font-size: 13.5px; }

/* ---------- a sala no topo ---------- */
.hero { position: relative; }
.hero.hero-sala { display: block; height: min(90vh, 880px); overflow: hidden; border-bottom: 1px solid var(--linha); }
.hero-sala .maquete { position: absolute; inset: 0; background: #0D1224; }
.maquete canvas { display: block; touch-action: pan-y; }
.hero-sala::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #0A0E1Af2 0, #0A0E1Aa8 25%, #0A0E1A00 45%); }
.hero-sala .hero-texto { position: absolute; z-index: 2; left: max(28px, calc((100vw - 1440px) / 2 + 40px)); top: 50%; transform: translateY(-52%); max-width: 460px; pointer-events: none; }
.hero-sala .hero-texto > * { pointer-events: auto; }
.selo { display: inline-flex; align-items: center; gap: 9px; background: #050709; border: 1px solid #2A2412; color: var(--ambar); padding: 6px 12px; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 8px #FFB23E77; }
.selo i { width: 8px; height: 8px; background: var(--verde); box-shadow: 0 0 8px var(--verde); animation: pulsa 1.4s infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.hero h1 { font-size: clamp(56px, 7vw, 104px); line-height: .9; margin: 18px 0 20px; color: #fff; text-shadow: 0 6px 30px #000; }
.hero h1 em { font-style: normal; color: var(--ambar); text-shadow: 0 0 34px #FFB23E55; }
.hero p.sub { font-size: 18px; color: #C3CAE0; max-width: 420px; margin: 0 0 28px; }
.hero-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.dica { position: absolute; z-index: 2; left: 28px; bottom: 18px; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }

/* balões, crachá e placas por cima da sala */
.of-camada { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.of-balao { position: absolute; left: 0; top: 0; background: #F2F4FA; color: #0B0F1A; border-radius: 3px; padding: 5px 10px; font: 700 12.5px var(--texto); white-space: nowrap; box-shadow: 0 6px 16px -6px #000c; animation: sobe .3s cubic-bezier(.3,1.6,.5,1); }
.of-balao::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #F2F4FA; }
.of-balao.verde { background: #BFF5D3; } .of-balao.verde::after { border-top-color: #BFF5D3; }
.of-balao.vermelho { background: #FFD0D1; } .of-balao.vermelho::after { border-top-color: #FFD0D1; }
.of-balao.ouro { background: #FFE2A8; } .of-balao.ouro::after { border-top-color: #FFE2A8; }
@keyframes sobe { from { opacity: 0; margin-top: 10px; } }
.of-cracha { position: absolute; left: 0; top: 0; display: none; background: #050709; border: 1px solid var(--ambar); color: var(--tinta); padding: 5px 10px; font: 600 12px var(--mono); white-space: nowrap; }
.of-cracha b { font-weight: 800; margin-right: 6px; color: var(--ambar); }
.of-cracha .pos, .of-cracha .neg { font-style: normal; }
.of-pino { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer; background: #050709e8; border: 1px solid var(--linha2); color: var(--tinta); border-radius: var(--raio); padding: 4px 10px 4px 4px; text-align: left; box-shadow: 0 8px 20px -8px #000c; }
.of-pino:hover { border-color: var(--ambar); }
.of-pino::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--linha2); }
.of-pino i { display: grid; place-items: center; width: 22px; height: 22px; background: var(--ambar); color: #140E02; font: 800 13px var(--mono); font-style: normal; }
.of-pino b { display: block; font: 800 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.of-pino small { display: block; font-size: 10.5px; color: var(--cinza); line-height: 1.25; white-space: nowrap; }

/* botoeira do elevador: chapa de aço escovado com botões redondos (botão de elevador é redondo de verdade) */
.of-botoeira { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; background: linear-gradient(90deg, #7D8499, #B7BDCC 30%, #8A91A6 55%, #C3C8D5 80%, #7D8499); border: 1px solid #555C70; box-shadow: 0 14px 30px -12px #000, inset 0 1px 0 #fff6; }
.of-bt-tit { font: 800 9px var(--mono); letter-spacing: .24em; color: #2A2F3E; text-align: center; }
.of-botoeira button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 2px solid #5C6275; background: radial-gradient(circle at 40% 35%, #F4F5F8, #B9BECB 70%); cursor: pointer; box-shadow: 0 2px 0 #0004, inset 0 -2px 3px #0003; }
.of-botoeira button b { font: 800 12px var(--mono); color: #2A2F3E; }
.of-botoeira button span { display: none; }
.of-botoeira button i { position: absolute; top: -4px; right: -8px; font: 800 9px var(--mono); font-style: normal; color: #04160B; background: var(--verde); padding: 1px 4px; }
.of-botoeira button i:empty { display: none; }
.of-botoeira button.ativo { border-color: #C77A12; background: radial-gradient(circle at 40% 35%, #FFE3AE, #FFB23E 70%); box-shadow: 0 0 16px #FFB23Eaa, inset 0 -2px 3px #0003; }
.of-botoeira button.ativo b { color: #140E02; }
.of-botoeira button.pisca { animation: bt-pisca 1s 3; }
@keyframes bt-pisca { 50% { box-shadow: 0 0 0 4px var(--verde); } }
.of-bt-nome { text-align: center; max-width: 60px; margin-top: 2px; }
.of-bt-nome b { display: block; font: 800 10px var(--mono); color: #2A2F3E; text-transform: uppercase; }
.of-bt-nome span { font: 700 9px var(--mono); color: #3E4458; }

/* ---------- títulos de seção ---------- */
.secao { max-width: 1240px; margin: 0 auto; padding: 72px 28px 0; }
.secao-cab { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); padding-bottom: 12px; }
.secao-cab h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1; }
.secao-cab p { color: var(--cinza); margin: 6px 0 0; max-width: 560px; font-size: 16px; }
.secao-cab.mini { margin-bottom: 12px; padding-bottom: 10px; align-items: center; }
.secao-cab.mini h2 { font-size: 26px; letter-spacing: .03em; display: flex; align-items: center; }
.ponto { display: inline-block; width: 8px; height: 8px; background: var(--vermelho); box-shadow: 0 0 10px var(--vermelho); margin-right: 10px; }
.aovivo, .tag-live { font: 800 9.5px var(--mono); letter-spacing: .14em; background: var(--vermelho); color: #fff; padding: 2px 6px; animation: pulsa 1.4s infinite; }
.secao-cab.mini .tag-live { margin-left: 10px; }
.link { color: var(--ambar); font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cinza { color: var(--cinza); font: 600 12px var(--mono); }

.painel, .mural, .cartao, .bloco, .previa, .passo, .estrategia, .cracha, .moeda, .numeros div, .card-chefe, .dono, .espera { border-radius: var(--raio); }
.painel { background: var(--papel); border: 1px solid var(--linha); padding: 16px; position: relative; }
.painel::before, .mural::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--ambar); }

/* ---------- números: contador de LED ---------- */
.placar { max-width: 1240px; margin: 0 auto; padding: 22px 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.placar.seis { grid-template-columns: repeat(6, 1fr); }
.placar > div { background: #06080F; border: 1px solid var(--linha); margin-left: -1px; padding: 14px 16px; position: relative; }
.placar > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#0000 55%, #06080F 56%); background-size: 3px 3px; opacity: .35; }
.placar .lbl { display: flex; align-items: center; gap: 7px; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); margin-bottom: 6px; }
.placar .lbl .ponto { width: 7px; height: 7px; margin: 0; background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.placar b { display: block; font: 800 28px/1.1 var(--mono); color: var(--ambar); text-shadow: 0 0 12px #FFB23E66; }
.placar b.pos { color: var(--verde); text-shadow: 0 0 12px #3DDC8466; } .placar b.neg { color: var(--vermelho); }
.placar b.curto { font-size: 17px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar small { color: var(--apagado); font: 600 11px var(--mono); }

/* ---------- o chefe no pedestal, a TV da recepção, o memorando ---------- */
.linha-vitrine { max-width: 1240px; margin: 0 auto; padding: 34px 28px 0; display: grid; grid-template-columns: 1fr 1.25fr 0.95fr; gap: 18px; align-items: stretch; }
.card-chefe { position: relative; background: radial-gradient(circle at 50% 72%, #2E2214 0, #0E1220 62%); border: 1px solid #3A2E18; overflow: hidden; min-height: 390px; display: flex; flex-direction: column; }
.chefe-cab { padding: 14px 16px 0; position: relative; z-index: 2; }
.chefe-cab .rot { display: inline-block; font: 800 10px var(--mono); letter-spacing: .24em; color: #140E02; background: linear-gradient(90deg, #B8862F, #F2C14E, #B8862F); padding: 3px 8px; }
.chefe-cab b { display: block; font: 400 30px/1.05 var(--titulo); text-transform: uppercase; margin-top: 8px; }
.chefe-cab small { color: #C9B48A; font: 600 12px var(--mono); }
.vitrine { position: relative; flex: 1; min-height: 280px; cursor: grab; }
.vitrine canvas { display: block; }
.chefe-dica { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: var(--apagado); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vt-balao { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 86%; background: #F2F4FA; color: #0B0F1A; border-radius: 3px; padding: 7px 12px; font: 700 13px var(--texto); text-align: center; opacity: 0; pointer-events: none; z-index: 3; }
.vt-balao::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #F2F4FA; }
.vt-balao.mostra { animation: vt-in .3s cubic-bezier(.3,1.6,.5,1) forwards; }
.vt-balao.some { animation: vt-out .4s forwards; }
@keyframes vt-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes vt-out { to { opacity: 0; } }

.tv { display: flex; flex-direction: column; align-items: center; }
.tv-moldura { width: 100%; flex: 1; background: linear-gradient(#23283A, #111420); border-radius: 8px; padding: 12px 12px 18px; box-shadow: 0 20px 40px -18px #000, inset 0 1px 0 #ffffff12; position: relative; }
.tv-moldura::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 6px var(--vermelho); }
.tv-tela { height: 100%; min-height: 330px; background: radial-gradient(circle at 50% 0%, #13224A, #060B1A 70%); position: relative; overflow: hidden; padding: 12px; }
.tv-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 3px); box-shadow: inset 0 0 60px #000a; }
.tv-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tv-cab b { font: 400 24px var(--titulo); text-transform: uppercase; }
.tv-cab small { color: var(--cinza); font: 600 11px var(--mono); text-transform: uppercase; }
.tv-linha { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; text-decoration: none; border-bottom: 1px solid #ffffff0d; position: relative; z-index: 1; }
.tv-linha:hover { background: #ffffff0c; }
.tv-logo { position: relative; width: 36px; height: 36px; overflow: hidden; background: #1D6B5E; display: grid; place-items: center; }
.tv-logo i { font: 800 16px var(--mono); font-style: normal; color: #fff; }
.tv-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-nome b { display: block; font: 700 14px var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.tv-nome small { color: var(--cinza); font: 600 11.5px var(--mono); }
.tv-idade { font: 700 11px var(--mono); color: var(--cinza); text-align: right; min-width: 46px; }
.tv-idade i { display: block; height: 3px; margin-top: 4px; background: var(--verde); }
.tv-vazio { color: var(--cinza); text-align: center; padding: 60px 0; font: 700 14px var(--mono); text-transform: uppercase; }
.tv-pe { width: 80px; height: 14px; background: linear-gradient(#23283A, #111420); }

.memo { position: relative; background: #F4EFDF; color: #1E1A12; padding: 26px 22px 22px; font-family: "Courier Prime", "Courier New", monospace; box-shadow: 0 18px 30px -18px #000; transform: rotate(.8deg); background-image: repeating-linear-gradient(#0000 0 25px, #9DB5D422 25px 26px); }
.memo .alfinete { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A8A, #B41C2B); box-shadow: 0 3px 4px #0006; }
.memo-cab { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border-bottom: 2px solid #1E1A12; padding-bottom: 10px; margin-bottom: 12px; }
.memo-cab b { font: 700 26px/1 "Courier Prime", monospace; letter-spacing: .08em; }
.memo-cab span { font-size: 11.5px; line-height: 1.35; }
.memo ol { margin: 0 0 12px; padding-left: 18px; font-size: 14.5px; }
.memo li { margin-bottom: 7px; }
.memo a { font-weight: 700; color: #1E1A12; }
.carimbo { position: absolute; right: 16px; bottom: 16px; transform: rotate(-12deg); border: 3px solid #C7262E; color: #C7262E; padding: 3px 10px; font: 800 16px var(--mono); letter-spacing: .14em; opacity: .75; mix-blend-mode: multiply; }

/* ---------- trading desk: fita de terminal ---------- */
.dupla { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.dupla.igual { grid-template-columns: 1fr 1fr; }
.dupla > *, .ficha > *, .agente-topo > *, .hero > * { min-width: 0; }
.mural { position: relative; background: #070A13; border: 1px solid var(--linha); max-height: 620px; overflow: auto; }
.linha-mural { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; text-decoration: none; border-bottom: 1px solid #ffffff08; }
.linha-mural:hover { background: #111A30; }
.linha-mural .retrato { width: 40px; height: 40px; overflow: hidden; }
.linha-mural b { font-weight: 700; }
.linha-mural small { display: block; color: var(--cinza); font: 500 11.5px var(--mono); margin-top: 2px; }
.linha-mural .valor { font: 800 13px var(--mono); text-align: right; white-space: nowrap; }
.etq { display: inline-block; font: 800 9.5px var(--mono); letter-spacing: .1em; padding: 1px 6px; margin-right: 7px; vertical-align: 1px; }
.etq.buy { background: #0F2A4A; color: #7DBBFF; } .etq.sell { background: #0E3320; color: #62F0A0; } .etq.loss { background: #3A1417; color: #FF8F92; } .etq.ev { background: #3A2A0B; color: var(--ambar); }
.vazio { padding: 40px 20px; text-align: center; color: var(--cinza); font: 600 13px var(--mono); }
.escolhas { display: flex; gap: 0; flex-wrap: wrap; }
.escolhas button { border: 1px solid var(--linha2); margin-left: -1px; background: #0C111F; color: var(--cinza); padding: 7px 13px; font: 700 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.escolhas button.sel { background: var(--ambar); border-color: var(--ambar); color: #140E02; position: relative; z-index: 1; }

/* ---------- quadro de letras da recepção (os andares) ---------- */
.andares { background: #1B1712; border: 8px solid #4A3321; box-shadow: inset 0 0 0 1px #000, 0 16px 30px -16px #000; }
.andares-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 8px; background: #4A3321; }
.andares-cab span { font: 800 12px var(--mono); letter-spacing: .24em; color: #F2E3C6; }
.andares-cab small { font: 700 9.5px var(--mono); letter-spacing: .16em; color: #BFA07A; }
.feltro { padding: 10px 16px 14px; background-color: #151515; background-image: repeating-linear-gradient(#0000 0 11px, #00000080 11px 12px, #ffffff08 12px 13px); }
.andar { display: grid; grid-template-columns: 46px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0 6px; border-bottom: 1px dashed #ffffff14; }
.andar .n { font: 800 16px var(--mono); color: #F3F3F0; text-shadow: 0 1px 0 #000; border-left: 3px solid var(--cor, #fff); padding-left: 8px; }
.andar .nome { font: 800 16px var(--mono); letter-spacing: .14em; color: #F3F3F0; text-shadow: 0 1px 0 #000; }
.andar .pontos { border-bottom: 2px dotted #ffffff40; height: 1px; align-self: center; }
.andar .qtd { font: 800 16px var(--mono); color: #F3F3F0; }
.andar small { grid-column: 2 / -1; font: 700 9.5px var(--mono); letter-spacing: .12em; color: #9A9A94; margin-top: -2px; }

/* ---------- pódio: blocos de mármore com número gravado ---------- */
.podio { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; padding: 6px 4px 0; }
.degrau { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.degrau .av { width: 100%; height: 160px; }
.degrau.d1 .av { height: 200px; }
.podio-vaga { width: 88px; height: 130px; display: grid; place-items: center; font: 400 44px var(--titulo); color: var(--linha2); border: 1px dashed var(--linha2); margin-bottom: 10px; }
.podio-nome { font: 400 18px var(--titulo); text-transform: uppercase; margin-top: 4px; text-align: center; }
.podio-pnl { font: 800 12px var(--mono); }
.bloco-podio { width: 100%; margin-top: 8px; display: grid; place-items: center; font: 400 38px var(--titulo); color: #1E2230; text-shadow: 0 1px 0 #ffffff80; background: linear-gradient(#D9DCE5, #9EA5B8); height: 58px; box-shadow: inset 0 -5px 0 #0002, inset 0 1px 0 #fff; }
.d1 .bloco-podio { background: linear-gradient(#FFE08A, #D29A22); height: 84px; }
.d3 .bloco-podio { background: linear-gradient(#E7A877, #9E5A2A); height: 44px; }
.rank-linha, .novo-linha { display: grid; align-items: center; gap: 12px; padding: 8px 8px; text-decoration: none; border-top: 1px solid var(--linha); }
.rank-linha { grid-template-columns: 26px 40px 1fr auto; }
.rank-linha .av, .novo-linha .av { width: 40px; height: 40px; overflow: hidden; background: radial-gradient(circle at 50% 38%, #25305C, #10152A 70%); }
.rank-n { font: 800 13px var(--mono); color: var(--cinza); text-align: center; }
.rank-linha b { font-weight: 700; }
.rank-linha > span:last-child { font: 800 13px var(--mono); }
.novo-linha { grid-template-columns: 44px 1fr auto; }
.novo-linha:hover, .rank-linha:hover { background: #151D34; }
.novo-linha .av { width: 44px; height: 44px; }
.novo-linha b { font-weight: 700; display: block; }
.novo-linha small { color: var(--cinza); font: 600 11px var(--mono); }
.novo-mc { text-align: right; }
.novo-mc b { font: 800 13px var(--mono); color: var(--ambar); }

/* ---------- queima: fornalha ---------- */
.queima { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; background: linear-gradient(135deg, #1D120C, #120E16); border: 1px solid #4A2A18; padding: 34px; position: relative; overflow: hidden; }
.queima::before { content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 320px; background: radial-gradient(ellipse, #FF7A2A44, transparent 65%); }
.queima h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1; margin: 12px 0 10px; position: relative; }
.queima p { color: #D8C3B5; margin: 0; position: relative; }
.selo-fogo { display: inline-block; background: #FF7A2A; color: #140802; padding: 4px 10px; font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; position: relative; }
.queima-num { display: grid; gap: 0; position: relative; }
.queima-num div { background: #070A13; border: 1px solid #3A2418; margin-top: -1px; padding: 12px 16px; }
.queima-num b { display: block; font: 800 24px var(--mono); color: #FF9A4A; text-shadow: 0 0 12px #FF7A2A66; }
.queima-num span { color: #A88E80; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- crachá de funcionário ---------- */
.crachas { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.cracha { position: relative; display: block; background: var(--papel); border: 1px solid var(--linha); text-decoration: none; transition: transform .2s, border-color .2s; overflow: hidden; }
.cracha:hover { transform: translateY(-3px); border-color: var(--linha2); }
.cracha.v2 { padding: 26px 16px 12px; }
.cracha .faixa { position: absolute; inset: 0 0 auto; height: 8px; }
.cracha .presilha { position: absolute; top: 12px; left: 50%; width: 44px; height: 7px; margin-left: -22px; background: var(--fundo); box-shadow: inset 0 1px 2px #000; }
.cr-cab { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; margin-top: 6px; }
.cr-cab .retrato { width: 62px; height: 70px; overflow: hidden; border: 1px solid var(--linha2); }
.cr-id { font: 800 9.5px var(--mono); letter-spacing: .16em; color: var(--cinza); }
.cracha h3 { font: 400 22px/1.05 var(--titulo); text-transform: uppercase; margin: 2px 0 6px; word-break: break-word; }
.cr-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cargo { font: 800 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; background: #0A0E1A; color: var(--tinta); border-left: 3px solid var(--cor, var(--ambar)); }
.st { font: 800 9px var(--mono); letter-spacing: .1em; padding: 2px 6px; }
.st.ativo { background: #0E3320; color: #62F0A0; } .st.pausa { background: #3A2A0B; color: var(--ambar); }
.cr-coin { font: 800 9.5px var(--mono); color: #C9B5F2; background: #221C3E; padding: 2px 6px; }
.cr-num { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.cr-num small { display: block; font: 800 9.5px var(--mono); letter-spacing: .14em; color: var(--cinza); }
.cr-num b { font: 800 19px var(--mono); }
.cr-num i { font-style: normal; font-size: 11px; color: var(--cinza); }
.faisca { display: block; width: 100%; height: 50px; margin: 4px 0 8px; }
.cr-pe { display: flex; justify-content: space-between; gap: 8px; font: 600 10.5px var(--mono); color: var(--cinza); border-top: 1px dashed var(--linha2); padding-top: 8px; }
.cr-barras { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.barras { width: 120px; height: 22px; fill: #C9CEDD; }
.cr-barras small { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--apagado); }
.retrato { background: radial-gradient(circle at 50% 38%, #25305C, #10152A 70%); }
.av { display: block; width: 100%; height: 100%; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.corpo img { object-fit: contain; }

/* ---------- como funciona ---------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: p; }
.passo { background: var(--papel); border: 1px solid var(--linha); margin-left: -1px; padding: 22px; }
.passo::before { counter-increment: p; content: "0" counter(p); display: block; font: 800 13px var(--mono); color: var(--ambar); letter-spacing: .1em; margin-bottom: 14px; }
.passo h3 { font-size: 22px; margin-bottom: 6px; }
.passo p { margin: 0; color: #B3BAD2; }
.estrategias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.estrategia { background: var(--papel); border: 1px solid var(--linha); padding: 20px; }
.estrategia h3 { font-size: 26px; }
.estrategia .tag { display: inline-block; margin: 4px 0 10px; font: 700 11px var(--mono); color: var(--cinza); text-transform: uppercase; letter-spacing: .06em; }
.estrategia p { margin: 0 0 14px; color: #B3BAD2; }
.regras { display: flex; flex-wrap: wrap; gap: 6px; }
.regras span { background: #0A0E1A; border: 1px solid var(--linha2); padding: 3px 8px; font: 700 11px var(--mono); }
.risco-extreme { border-color: #6A2429; }
.risco-extreme .tag { color: var(--vermelho); }
.cartao { background: var(--papel); border: 1px solid var(--linha); padding: 22px; }
.cartao h3 { font-size: 24px; margin-bottom: 8px; }
.cartao p { color: #B3BAD2; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- ficha de contratação ---------- */
.ficha { max-width: 1100px; margin: 30px auto 0; padding: 0 28px; display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.ficha h1 { font-size: clamp(46px, 5vw, 72px); line-height: .95; margin-bottom: 8px; }
.ficha .sub { color: var(--cinza); font-size: 17px; margin: 0 0 24px; }
.bloco { background: var(--papel); border: 1px solid var(--linha); padding: 22px; margin-bottom: 16px; position: relative; }
.bloco h2 { font-size: 26px; margin-bottom: 4px; }
.bloco > p { color: var(--cinza); margin: 0 0 16px; }
label.campo, .campo { display: block; margin-bottom: 14px; }
label.campo > span, .rotulo { display: block; font: 800 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); margin-bottom: 7px; }
input[type=text], input[type=url], input[type=number], textarea, select { width: 100%; border: 1px solid var(--linha2); background: #070A13; border-radius: var(--raio); padding: 11px 13px; font: 500 15px var(--texto); color: var(--tinta); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--ambar); box-shadow: 0 0 0 1px var(--ambar); }
textarea { resize: vertical; min-height: 76px; }
input[type=file] { max-width: 100%; min-width: 0; font-size: 14px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cores { display: flex; flex-wrap: wrap; gap: 6px; }
.cores button { width: 32px; height: 32px; border: 1px solid #0006; cursor: pointer; }
.cores button.sel { outline: 2px solid var(--ambar); outline-offset: 2px; }
.opcoes-est { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcao { text-align: left; border: 1px solid var(--linha2); background: #0A0E1A; color: var(--tinta); padding: 11px 13px; cursor: pointer; }
.opcao b { font: 400 20px var(--titulo); text-transform: uppercase; display: block; }
.opcao small { color: var(--cinza); font: 600 11px var(--mono); }
.opcao.sel { border-color: var(--ambar); box-shadow: inset 0 0 0 1px var(--ambar); }
.opcao.extreme small { color: var(--vermelho); }
.risco { display: flex; gap: 10px; align-items: flex-start; background: #2A1013; border: 1px solid #6A2429; padding: 12px 14px; margin-top: 12px; font: 600 13px var(--texto); color: #FFB0B2; }
.upload { display: flex; gap: 14px; align-items: center; }
.upload .prev { width: 76px; height: 76px; background: #070A13 center/cover; border: 1px dashed var(--linha2); flex: none; }
.lateral { position: sticky; top: 84px; }
.previa { background: var(--papel); border: 1px solid var(--linha); padding: 22px 18px 18px; text-align: center; }
.previa .retrato { width: 200px; height: 230px; margin: 0 auto 12px; overflow: hidden; }
.previa h3 { font-size: 30px; }
.previa .conta { margin-top: 16px; text-align: left; background: #070A13; border: 1px solid var(--linha); padding: 12px 14px; font: 600 12.5px var(--mono); }
.previa .conta div { display: flex; justify-content: space-between; padding: 3px 0; }
.previa .conta .total { border-top: 1px dashed var(--linha2); margin-top: 6px; padding-top: 8px; font: 800 15px var(--mono); color: var(--ambar); }
.erro { color: var(--vermelho); font: 700 13px var(--mono); margin: 10px 0 0; }
.ok-msg { color: var(--verde); font-weight: 800; }

/* ---------- página do agente ---------- */
.agente-topo { max-width: 1240px; margin: 0 auto; padding: 24px 28px 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
.sala-agente { position: relative; background: #0D1224; border: 1px solid var(--linha); min-height: 480px; overflow: hidden; }
.ficha-agente { display: flex; flex-direction: column; gap: 12px; }
.ficha-agente .cab { display: flex; gap: 16px; align-items: center; }
.ficha-agente .retrato { width: 88px; height: 100px; overflow: hidden; flex: none; border: 1px solid var(--linha2); }
.ficha-agente h1 { font-size: 52px; line-height: .95; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.chip { background: #0A0E1A; border: 1px solid var(--linha2); padding: 3px 8px; font: 800 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.numeros div { background: #06080F; border: 1px solid var(--linha); margin: -1px 0 0 -1px; padding: 11px 14px; }
.numeros b { display: block; font: 800 20px var(--mono); color: var(--ambar); }
.numeros b.pos { color: var(--verde); } .numeros b.neg { color: var(--vermelho); }
.numeros span { color: var(--cinza); font: 800 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.moeda { display: flex; gap: 14px; align-items: center; background: var(--papel); border: 1px solid var(--linha); padding: 12px; }
.moeda img { width: 54px; height: 54px; object-fit: cover; background: #070A13; }
.moeda code { display: block; font: 600 11px var(--mono); word-break: break-all; color: var(--cinza); }
.progresso { height: 8px; background: #070A13; border: 1px solid var(--linha); }
.progresso i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ambar) 0 6px, #0000 6px 8px); }
.tabela { width: 100%; border-collapse: collapse; font: 600 13px var(--mono); }
.tabela th { text-align: left; color: var(--cinza); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 10px; }
.tabela td { padding: 10px; border-top: 1px solid var(--linha); }
.tabela a { text-decoration: none; font-weight: 800; }
.dono { background: #0E0B06; border: 1px solid #4A3818; padding: 20px; }
.dono h3 { font-size: 24px; margin-bottom: 4px; color: var(--ambar); }
.dono p { color: #BFB39A; margin: 0 0 14px; font-size: 14px; }
.dono .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.dono select { width: auto; }
.espera { background: #1A1405; border: 1px solid #5A4414; padding: 20px; }
.espera code { display: block; background: #070A13; color: var(--ambar); padding: 10px 12px; margin: 10px 0; word-break: break-all; font: 700 13px var(--mono); }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #050709; border: 1px solid var(--ambar); color: var(--ambar); padding: 11px 18px; font: 700 13px var(--mono); z-index: 50; max-width: calc(100% - 32px); }

.rodape { max-width: 1240px; margin: 100px auto 0; padding: 30px 28px 44px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; border-top: 1px solid var(--linha); }
.rodape p { color: var(--cinza); margin: 8px 0 0; max-width: 360px; }
.rodape h4 { font: 800 11px var(--mono); letter-spacing: .14em; margin-bottom: 8px; color: var(--cinza); }
.rodape a { display: block; text-decoration: none; color: var(--tinta); font-weight: 600; padding: 2px 0; }
.rodape .aviso { grid-column: 1 / -1; font: 600 11px var(--mono); max-width: none; color: var(--apagado); }

@media (max-width: 980px) {
  .menu { display: none; }
  .topo { padding: 0 16px; gap: 10px; }
  #btn-carteira { display: none; }
  .hero.hero-sala { height: auto; display: flex; flex-direction: column; }
  .hero-sala::before { display: none; }
  .hero-sala .hero-texto { position: static; transform: none; max-width: none; padding: 26px 16px 10px; }
  .hero-sala .maquete { position: relative; inset: auto; height: 480px; }
  .dica { display: none; }
  .of-botoeira { top: auto; bottom: 10px; right: 50%; transform: translateX(50%); flex-direction: row; padding: 7px 9px; }
  .of-bt-tit, .of-bt-nome { display: none; }
  .of-botoeira button { width: 38px; height: 38px; }
  .linha-vitrine { grid-template-columns: 1fr; padding: 24px 16px 0; }
  .memo { transform: none; }
  .placar { padding: 18px 16px 0; }
  .placar.seis { grid-template-columns: 1fr 1fr; }
  .secao { padding: 56px 16px 0; }
  .dupla, .dupla.igual, .ficha, .agente-topo, .grade2, .queima { grid-template-columns: 1fr; }
  .queima { padding: 24px 18px; }
  .ficha, .agente-topo { padding: 16px 16px 0; }
  .lateral { position: static; }
  .passos { grid-template-columns: 1fr 1fr; }
  .estrategias { grid-template-columns: 1fr; }
  .opcoes-est, .linha2 { grid-template-columns: 1fr; }
  .rodape { grid-template-columns: 1fr; padding: 30px 16px 40px; }
}
@media (max-width: 520px) {
  .passos { grid-template-columns: 1fr; }
  .crachas { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .marca-nome { font-size: 22px; }
  .topo .btn { padding: 9px 12px; font-size: 11px; }
  .hero h1 { font-size: 58px; }
  .degrau .av { height: 120px; } .degrau.d1 .av { height: 150px; }
  .of-pino small { display: none; }
  .of-pino b { font-size: 10px; }
}

/* balões de ação em cima dos robôs: cada um é um botão (como no BAGWORK) */
.of-acao { position: absolute; left: 0; top: 0; display: none; white-space: nowrap; align-items: center; gap: 9px; pointer-events: auto; cursor: pointer; background: #0B0F1Cee; border: 1px solid #3A4468; color: var(--tinta); border-radius: 3px; padding: 5px 11px 5px 5px; text-align: left; box-shadow: 0 10px 22px -8px #000e; transition: border-color .15s, transform .15s; }
.of-acao:hover { border-color: var(--ambar); }
.of-acao::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #3A4468; }
.of-acao i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; font-style: normal; flex: none; }
.of-acao i svg { width: 16px; height: 16px; fill: currentColor; }
.of-acao i b { font: 800 15px var(--mono); }
.of-acao.lancar i { background: #E5484D; color: #fff; }
.of-acao.shill i { background: #F2F4FA; color: #0B0F1A; }
.of-acao.trade i { background: var(--verde); color: #04160B; }
.of-acao.como i { background: var(--ambar); color: #140E02; }
.of-acao span > b { display: block; font: 800 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.of-acao small { display: block; font: 600 10.5px var(--mono); color: var(--cinza); line-height: 1.25; white-space: nowrap; }
@media (max-width: 520px) { .of-acao small { display: none; } .of-acao { padding: 3px 8px 3px 3px; } .of-acao i { width: 20px; height: 20px; } .of-acao span > b { font-size: 10px; } }

/* explicação curta embaixo do rótulo de um campo da ficha */
.nota-campo { margin: 2px 0 10px; color: var(--cinza); font-size: 14px; line-height: 1.45; }