/* "Bora conversar?": a linguagem da direção v0.5 com a v0.5.1 (designer-chefe, D2). Sempre escuro; grade de 4, massas
   em 8, linha de 2, raio 2 (zero na marca); Departure Mono no que é rótulo, Plex Sans no que se lê; cor = presença.
   Os componentes vêm do gerador das provas (v05_gerar_provas.py), com a tela em 100% (e não nos 360 fixos da prova). */
@font-face{font-family:"Departure Mono";src:url("/fontes/DepartureMono-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"IBM Plex Sans";src:url("/fontes/IBMPlexSans-latin.woff2") format("woff2");font-weight:100 700;font-display:block}
:root{--fundo:#131110;--s2:#26221F;--linha:#35302B;--tinta:#F0E8D8;--tinta2:#A69D8D;--tinta3:#968E80;--apagado:#6E675D;
--amigo:#EAC26B;--amiga:#CE6656;--mano:#77B1B0;--genz:#E49156;--profa:var(--tinta);--saia:#B8AD98;
--anil:#6E86D7;--lilas:#CFA2EA;--malva:#BC6A8E;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--fundo);overscroll-behavior:none}
body{font:400 15px/1.55 "IBM Plex Sans",sans-serif;color:var(--tinta);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
.fone{width:100%;height:100dvh;background:var(--fundo);position:relative;overflow:hidden;display:flex;flex-direction:column}
.tela{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--tinta2);outline-offset:-2px}
.px{font-family:"Departure Mono",monospace;font-size:11px;line-height:12px;letter-spacing:0}
.px22{font-family:"Departure Mono",monospace;font-size:22px;line-height:24px}
.pix{display:block;flex:none} .pix rect{shape-rendering:crispEdges}
[hidden]{display:none!important}
.lt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* o que ainda não existe: visível, desativado, com "em breve" (briefing D2.5) */
.embreve{color:var(--tinta3)}
[aria-disabled="true"]{opacity:1}
.desativado,.desativado *{color:var(--apagado)!important;border-color:var(--linha)!important}
.desativado .embreve{color:var(--tinta3)!important}

/* cabeçalho */
.topo{height:58px;flex:none;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:0 4px;border-bottom:2px solid var(--linha);position:relative;z-index:2;background:var(--fundo)}
.topo .meio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:48px;min-width:0}
.topo h1{margin:0;font-size:15px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topo .sub{color:var(--tinta3);white-space:nowrap}
.icone{width:48px;height:48px;display:grid;place-items:center;color:var(--tinta2)}
.dialler{color:var(--tinta3);white-space:nowrap}

/* conversa */
.conversa{flex:1;min-height:0;overflow-y:auto;padding:24px 16px 32px;display:flex;flex-direction:column;gap:24px;position:relative;overflow-anchor:auto;-webkit-user-select:text;user-select:text}
.conversa>*{flex-shrink:0}
.conversa.com-faixa{padding-top:56px}
.conversa::-webkit-scrollbar{display:none}
.marco{align-self:center;color:var(--tinta3);text-align:center}
.pedro{align-self:flex-end;max-width:84%;padding-right:12px;border-right:2px solid var(--tinta3);color:var(--tinta2);text-align:right;margin:0;white-space:pre-wrap}
.pedro.falhou{color:var(--tinta3)}
.sob{align-self:flex-end;color:var(--tinta3);margin-top:-16px;text-align:right}
.tecla-txt{height:48px;display:flex;align-items:center;color:var(--tinta);padding:0 4px}
.dir{align-self:flex-end;margin-top:-16px}
.voz{padding-left:16px;box-shadow:inset 2px 0 0 var(--c)}
.voz header{display:flex;justify-content:space-between;align-items:center;height:12px;gap:8px}
.voz .quem{color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .voz .dur{color:var(--tinta3);white-space:nowrap;flex:none}
.linha-onda{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:center;height:48px;margin-top:8px}
.linha-onda.semaudio{grid-template-columns:1fr 48px}
.semaudio p{margin:0;color:var(--tinta2)}
.tocar{height:48px;display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:center;color:var(--tinta2);min-width:0}
.onda{display:flex;align-items:center;gap:2px;height:32px;overflow:hidden}
.onda i{display:block;width:2px;flex:none;background:var(--apagado)}
.voz .onda i.ja{background:var(--c)}
.ler{width:48px;height:48px;display:grid;place-items:center;color:var(--tinta2)}
.ler[aria-expanded="true"]{color:var(--tinta)}
.voz .texto{margin:8px 0 0;color:var(--tinta2);white-space:pre-wrap}
.evento{align-self:flex-start;color:var(--tinta3);display:flex;align-items:center;gap:16px}
.faixa-net{position:absolute;top:58px;left:0;right:0;height:32px;background:var(--s2);color:var(--tinta2);display:grid;place-items:center;z-index:1}

/* caixa de pergunta (aviso 15) */
.pergunta-cx{border:2px solid var(--linha);border-radius:2px;overflow:hidden}
.pergunta-cx p{margin:0;padding:12px 16px;color:var(--tinta);font-size:15px;line-height:20px}
.teclas2{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linha);border-top:2px solid var(--linha)}
.teclas2 button{height:48px;color:var(--tinta2);background:var(--fundo)}

/* doca */
.doca{flex:none;position:relative;border-top:2px solid var(--linha);padding:24px 16px 16px;background:var(--fundo);display:grid;gap:8px;justify-content:start;z-index:2}
.doca.titulo-doca{padding-top:16px}
.jog{height:72px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid var(--linha);border-radius:2px;color:var(--tinta2);touch-action:pan-x}
.jog .nome{color:var(--tinta2);white-space:nowrap}
.jog.fora{color:var(--apagado)}
.jog.pensa,.jog.quer,.jog.marcado{color:var(--c)}
.jog.marcado .nome{color:var(--tinta)}
.jog.fala{background:var(--c);border-color:var(--c);color:var(--fundo)} .jog.fala .nome{color:var(--fundo)}
.grupo{display:flex;align-items:center;gap:4px;height:32px}
.ondas{display:none;position:absolute;left:calc(50% + 20px)}
.jog.fala .ondas{display:block}
.balao{position:absolute;top:-16px;left:50%;margin-left:-12px;width:24px;height:24px;display:none;place-items:center;background:var(--c);color:var(--fundo);border-radius:2px;box-shadow:0 0 0 2px var(--fundo)}
.balao::after{content:"";position:absolute;bottom:-4px;left:50%;margin-left:-2px;width:4px;height:4px;background:var(--c)}
.jog.quer .balao{display:grid;animation:quique .5s steps(2) 3}
@keyframes quique{50%{transform:translateY(-2px)}}
.mira{position:absolute;inset:4px;display:none;pointer-events:none}
.jog.marcado .mira{display:block}
.mira i{position:absolute;width:6px;height:6px;border:0 solid var(--c)}
.mira i:nth-child(1){left:0;top:0;border-left-width:2px;border-top-width:2px}
.mira i:nth-child(2){right:0;top:0;border-right-width:2px;border-top-width:2px}
.mira i:nth-child(3){left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}
.mira i:nth-child(4){right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.ordem{position:absolute;top:6px;right:8px;color:var(--c);display:none} .jog.marcado .ordem{display:block}
.sigla{font-family:"Departure Mono",monospace;line-height:1;letter-spacing:0;display:grid;place-items:center;width:32px;height:32px}
.tecla{height:64px;display:grid;place-items:center;border:2px solid var(--linha);border-radius:2px;color:var(--tinta)}
.trocar{height:64px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--s2);color:var(--tinta);border-radius:2px;touch-action:none}
.trocar .rot{font-family:"Departure Mono",monospace;font-size:11px;line-height:12px;letter-spacing:1px;text-transform:uppercase}
.trocar .col{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.trocar .sub2{color:var(--tinta3);white-space:nowrap}
.trocar.acesa{background:var(--tinta);color:var(--fundo);box-shadow:0 4px 0 var(--saia)} .trocar.acesa .sub2{color:var(--apagado)}
.trocar:active{transform:translateY(4px);box-shadow:none}
.vu{display:flex;align-items:flex-end;gap:4px;height:20px} .vu i{width:4px;background:var(--fundo);animation:vu 1.2s steps(4) infinite}
.vu i:nth-child(2){animation-delay:-.3s}.vu i:nth-child(3){animation-delay:-.6s}.vu i:nth-child(4){animation-delay:-.9s}.vu i:nth-child(5){animation-delay:-.45s}.vu i:nth-child(6){animation-delay:-.75s}.vu i:nth-child(7){animation-delay:-.15s}
@keyframes vu{0%{height:8px}25%{height:16px}50%{height:12px}75%{height:20px}100%{height:4px}}
@media (prefers-reduced-motion:reduce){.vu i{animation:none}.jog.quer .balao{animation:none}}

/* a fila que rola (v0.5.1): quatro à vista, a última coluna presa fora do rolo */
.rolo-wrap{position:relative;min-width:0}
.rolo{overflow-x:auto;overflow-y:visible;overflow-anchor:none;scroll-snap-type:x mandatory;scrollbar-width:none;padding-top:24px;margin-top:-24px}
.rolo::-webkit-scrollbar{display:none}
.fila{display:flex;gap:8px;width:max-content}
.fila .jog{flex:none;scroll-snap-align:start}
.fila.anda .jog{transition:transform 160ms steps(4)}
@media (prefers-reduced-motion:reduce){.fila.anda .jog{transition:none}}
.maisn{position:absolute;top:-4px;height:16px;line-height:16px;padding:0 3px;background:var(--s2);color:var(--tinta2);border-radius:2px;box-shadow:0 0 0 2px var(--fundo);z-index:2}
.maisn.dir{right:0;transform:translateX(50%)} .maisn.esq{left:0;transform:translateX(-50%)}
.maisn::before{content:"";position:absolute;inset:-12px -8px}

/* fileira de escolha */
.escolha{display:grid;border:2px solid var(--linha);border-radius:2px;min-height:48px}
.escolha button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--tinta3);min-height:44px}
.escolha button+button{border-left:2px solid var(--linha)}
.escolha button[aria-checked="true"]{background:var(--s2);color:var(--tinta)}
.escolha .beta{color:var(--tinta3)}

/* entrada */
.titulo{flex:1;min-height:0;overflow-y:auto;padding:24px 24px 16px;display:flex;flex-direction:column;position:relative;scrollbar-width:none} .titulo>*{flex-shrink:0}
.titulo::-webkit-scrollbar{display:none}
.listras{display:grid;grid-template-rows:repeat(4,1fr);width:56px;height:56px}
.listras i:nth-child(1){background:var(--amigo)} .listras i:nth-child(2){background:var(--genz)} .listras i:nth-child(3){background:var(--amiga)} .listras i:nth-child(4){background:var(--mano)}
.logo{margin:24px 0 0 -4px;font-family:"Departure Mono",monospace;font-weight:400;font-size:44px;line-height:48px}
.logo span{display:block} .logo .de{color:var(--tinta2);display:inline}
.ola{margin:16px 0 0;color:var(--tinta2)}
.discreta{margin:8px 0 0;color:var(--tinta3)}
.secao{display:flex;justify-content:space-between;color:var(--tinta3);margin:32px 0 0;padding-bottom:12px;border-bottom:2px solid var(--linha)}
.slot{display:grid;grid-template-columns:40px 1fr;gap:4px 8px;padding:16px 0;border-bottom:2px solid var(--linha);text-align:left;width:100%}
.slot .n{grid-row:1/3;color:var(--tinta3);display:flex;flex-direction:column;gap:4px}
.slot h3{margin:0;font-size:15px;font-weight:500;line-height:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .slot .meta{color:var(--tinta3)}
.slot .n .px22{color:var(--tinta3)}
.vazio{margin:32px 0 0;color:var(--tinta3)}
.hamb{position:absolute;top:28px;right:12px;width:48px;height:48px;display:grid;place-items:center;color:var(--tinta2)}

/* folha */
.veu{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:5}
.folha{position:absolute;left:0;right:0;bottom:0;background:var(--fundo);border-top:2px solid var(--linha);padding:16px 16px 24px;display:flex;flex-direction:column;gap:12px;z-index:6;max-height:90%;overflow-y:auto}
.folha .exp{color:var(--tinta2);margin:0}
.folha.menu{padding:8px 16px 24px;gap:0}
.folha.idiomasf{min-height:320px}

/* telas de seção */
.corpo{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 16px;display:flex;flex-direction:column;scrollbar-width:none}
.corpo::-webkit-scrollbar{display:none}
.corpo>*{flex-shrink:0}
.rotulo{color:var(--tinta3)}
.linha-menu{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--linha);color:var(--tinta);width:100%;text-align:left;gap:12px}
.linha-menu .pix{color:var(--tinta3)}
.linha-menu .dir2{display:flex;align-items:center;gap:8px}
.pes{flex:none;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--fundo);position:relative}
.principal{height:64px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--s2);color:var(--tinta);border-radius:2px;width:100%;
  font-family:"Departure Mono",monospace;font-size:11px;line-height:12px;letter-spacing:1px;text-transform:uppercase}
.principal .embreve{text-transform:none;letter-spacing:0}
.principal:disabled,.principal.apagada{color:var(--apagado)}
.secundaria{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--linha);border-radius:2px;color:var(--tinta2);width:100%}
.secundaria.clara{color:var(--tinta)}
.campo{min-height:48px;border:2px solid var(--linha);border-radius:2px;padding:12px 14px;color:var(--tinta);font:400 15px/20px "IBM Plex Sans",sans-serif;background:var(--fundo);width:100%;outline:none;-webkit-user-select:text;user-select:text}
.campo:focus{border-color:var(--tinta2)}
.campo::placeholder{color:var(--tinta3)}
.campo.grande{height:56px;padding:0 14px;font-family:"Departure Mono",monospace;font-size:22px;line-height:24px;letter-spacing:2px;text-transform:uppercase}
.campo-us{display:flex;align-items:center;height:56px;border:2px solid var(--tinta2);border-radius:2px;padding:0 14px;gap:12px}
.campo-us span{color:var(--tinta3)}
.campo-us input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tinta);font-family:"Departure Mono",monospace;font-size:22px;line-height:24px}
.dica{color:var(--tinta3);margin:0}
.erro-linha{color:var(--tinta2);margin:0}
.p2{color:var(--tinta2);margin:0}
.persona{min-height:56px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--linha);width:100%;text-align:left}
.persona .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:6px 0}
.persona .nm b{font-weight:400;color:var(--tinta);font-size:15px;line-height:20px}
.persona .nm span{color:var(--tinta3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona.guardada .nm b{color:var(--tinta2)} .persona.guardada .em{color:var(--apagado)}
.persona .em{width:32px;height:32px;display:grid;place-items:center;color:var(--tinta2);flex:none}
.persona>.pix{color:var(--tinta3)}
.trazer{height:40px;padding:0 12px;border:2px solid var(--linha);border-radius:2px;display:grid;place-items:center;color:var(--tinta);position:relative}
.trazer::before{content:"";position:absolute;inset:-4px 0}
.cab-sec{display:flex;justify-content:space-between;color:var(--tinta3);padding:20px 0 12px;border-bottom:2px solid var(--linha)}

/* barra de escrever */
.barra{flex:none;border-top:2px solid var(--linha);padding:8px 16px;display:grid;gap:8px;align-items:end;background:var(--fundo);z-index:2}
.barra textarea{resize:none;max-height:104px;overflow-y:auto;display:block}
.mandar{height:48px;background:var(--s2);border-radius:2px;display:grid;place-items:center;color:var(--tinta);font-family:"Departure Mono",monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.mandar:disabled{color:var(--apagado)}

/* prévia do jogador */
.previa{display:grid;grid-template-columns:repeat(3,76px);gap:8px}

/* ajustes */
.ajuste{padding:12px 0;border-bottom:2px solid var(--linha);display:flex;flex-direction:column;gap:12px}
.ajuste.linha1{flex-direction:row;align-items:center;justify-content:space-between}
.ajuste .nome-aj{font-size:15px;line-height:20px;color:var(--tinta)}
.interr{display:grid;grid-template-columns:48px 48px;width:100px}

/* o trilho do silêncio (v0.5.1): 1 a 30 s, escala de rádio */
.trilho{display:flex;flex-direction:column;gap:12px}
.trilho .cab{display:flex;justify-content:space-between;align-items:baseline}
.visor{position:relative;height:56px;border:2px solid var(--linha);border-radius:2px;background:var(--s2);touch-action:none;cursor:pointer}
.visor .tr{position:absolute;bottom:4px;width:2px}
.visor .num{position:absolute;top:6px;text-align:center;color:var(--tinta3)}
.visor .escala{position:absolute;top:0;bottom:0;left:50%;width:282px;margin-left:-141px}
.visor .agulha{position:absolute;top:22px;bottom:2px;width:2px;background:var(--tinta);box-shadow:0 0 0 2px var(--s2)}
.fino{display:grid;grid-template-columns:1fr 1fr;height:48px;border:2px solid var(--linha);border-radius:2px}
.fino button{display:flex;align-items:center;justify-content:center;color:var(--tinta);touch-action:none}
.fino button+button{border-left:2px solid var(--linha)}
.fino button:disabled{color:var(--apagado)}

/* gastos */
.prov{display:flex;justify-content:space-between;color:var(--tinta3);padding:20px 0 12px;border-bottom:2px solid var(--linha);width:100%}
.prov b{font-weight:400;color:var(--tinta)}
.modelo{padding:12px 0;border-bottom:2px solid var(--linha);display:flex;flex-direction:column;gap:8px;width:100%;text-align:left}
.modelo .l1{display:flex;justify-content:space-between;align-items:baseline}
.modelo .l1 b{font-weight:400;font-size:15px;line-height:20px;color:var(--tinta)} .modelo .l1 .px{color:var(--tinta2)}
.modelo .l1 .px.cheio{color:var(--tinta)}
.barra-g{height:4px;background:var(--linha);position:relative} .barra-g i{position:absolute;left:0;top:0;bottom:0;background:var(--tinta2)}
.modelo .meta{color:var(--tinta3)}

/* escolher o idioma (v0.5.1) */
.idiomas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.idiomas .lado{height:120px;border:2px solid var(--linha);border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--tinta2)}
.idiomas .lado .px.n{color:var(--tinta)} .idiomas .lado .px.m{color:var(--tinta3)}

/* cartões de idioma (v0.4) */
.cartucho{border:2px solid var(--linha);border-radius:2px;overflow:hidden;-webkit-user-select:text;user-select:text}
.faixa{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--c,var(--s2));color:var(--fundo)}
.cartucho.obs .faixa{background:var(--s2);color:var(--tinta2)}
.ccorpo{padding:4px 16px 12px}
.ccorpo dl{margin:0;display:grid;grid-template-columns:80px 1fr}
.ccorpo dt,.ccorpo dd{margin:0;padding:12px 0 0}
.ccorpo dt{color:var(--tinta3);padding-top:16px} .ccorpo dd{color:var(--tinta2)}
.ccorpo dd+dt,.ccorpo dd+dt+dd{border-top:2px solid var(--linha)}
.ccorpo .acoes{display:flex;justify-content:flex-end;margin-top:8px}
.abas{display:flex;gap:16px;height:48px;align-items:stretch;border-bottom:2px solid var(--linha);padding:0 16px;flex:none}
.abas button{color:var(--tinta3);display:flex;align-items:center;border-bottom:2px solid transparent;margin-bottom:-2px}
.abas button[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--tinta)}
.abas .filtrar{margin-left:auto;color:var(--tinta2)}
.grupo-cab{display:flex;justify-content:space-between;gap:12px;color:var(--tinta3);padding:20px 0 12px;border-bottom:2px solid var(--linha)}
.grupo-cab span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.freq{padding:12px 0;border-bottom:2px solid var(--linha);display:flex;flex-direction:column;gap:4px}
.freq b{font-weight:400;color:var(--tinta)} .freq span{color:var(--tinta3)}

/* a linha acima da doca (v0.4 §4.3) */
.recado{position:absolute;left:0;right:0;bottom:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;
  background:var(--fundo);border-top:2px solid var(--linha);padding:0 0 0 16px;color:var(--tinta2);font-size:15px;line-height:20px;z-index:3}
.recado span:first-child{padding:12px 8px 12px 0}
.recado .tec{display:flex;min-height:48px;flex:none} .recado .tec button{padding:0 16px;color:var(--tinta);border-left:2px solid var(--linha)}

/* Licenças */
.licenca{white-space:pre-wrap;font:12px/1.5 "IBM Plex Sans",sans-serif;color:var(--tinta2);margin:0 0 24px;-webkit-user-select:text;user-select:text}
.bloco-sobre{padding:16px 0;border-bottom:2px solid var(--linha);display:flex;flex-direction:column;gap:8px}
.bloco-sobre p{margin:0;color:var(--tinta2)}