/* Palco mobile · Checagem dos Fatos. Fundo #0B0B0B, texto #F2F2EE (tokens DA). */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--da-bg); color: var(--da-ink); overflow: hidden; }
body { font-family: var(--da-font-body); font-size: var(--da-text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: rgba(235,255,0,0.22); }
:focus-visible { outline: 2px solid var(--da-focus); outline-offset: 2px; }
.mono { font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.soft { color: var(--da-ink-soft); }

#dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* topo */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 0;
  padding: calc(env(safe-area-inset-top) + 13px) var(--da-gutter) 21px;
  background: linear-gradient(var(--da-bg) 55%, rgba(11,11,11,0)); pointer-events: none; }
.top a, .top .live { pointer-events: auto; }
.top .brand { display: inline-flex; margin-right: var(--da-space-3); }
.top .brand .face { width: 38px; height: 23px; }
.top > .brand + .live { margin-right: auto; }
.top nav a { text-decoration: none; color: var(--da-ink-soft); }
.live { color: var(--da-ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.live i { width: 8px; height: 8px; background: var(--c-green); animation: blink 1.4s steps(2) infinite; }
.live.off i { background: var(--da-ink-mute); animation: none; }
@keyframes blink { 50% { opacity: 0.25; } }

/* chip: qual debate está em exibição */
.debate-chip { position: fixed; top: calc(env(safe-area-inset-top) + 52px); left: 50%; transform: translateX(-50%); z-index: 3; max-width: calc(100vw - 2 * var(--da-gutter)); text-align: center; padding: 6px 12px; background: var(--da-surface); border: var(--da-border-w) solid var(--da-border); color: var(--da-ink-soft); line-height: 1.5; pointer-events: none; animation: enterTip var(--da-dur-base) var(--da-ease-out); }
.debate-chip[hidden] { display: none; }
.debate-chip span { white-space: nowrap; }
@media (max-width: 719px) { .debate-chip { font-size: var(--da-text-2xs); letter-spacing: 0.06em; } .debate-chip > span { display: block; } .debate-chip .sep { display: none; } }
.debate-chip b { color: var(--da-ink); font-weight: 400; white-space: nowrap; }
.debate-chip.live b { color: var(--da-yellow); }
.debate-chip.live b::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--da-yellow); margin-right: 6px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }

/* contagem regressiva no centro da tela, com o palco desfocado */
.incoming { position: fixed; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; gap: var(--da-space-3); background: rgba(11,11,11,0.35); pointer-events: none; animation: enterTip var(--da-dur-base) var(--da-ease-out); }
.incoming[hidden] { display: none; }
.incoming .lbl { color: var(--da-ink-soft); }
.incoming b { display: block; font-family: var(--da-font-display); font-weight: 900; font-size: 7.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--da-yellow); }
.incoming.tick b { animation: tick 0.6s var(--da-ease-out); }
@keyframes tick { from { transform: scale(1.5); opacity: 0.2; } }
#stage .claim { transition: filter 0.45s var(--da-ease-inout), opacity 0.45s; }
#stage.blurred .claim { filter: blur(7px); opacity: 0.55; }
/* chip quando uma afirmação nova chega e você está lendo as antigas */
.newchip { position: fixed; top: auto; bottom: calc(var(--score-h, 112px) + var(--caption-h, 0px) + var(--da-space-4)); left: 50%; transform: translateX(-50%); z-index: 4; background: var(--da-yellow); color: var(--da-yellow-ink); border: 0; padding: 9px 14px; cursor: pointer; font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; animation: enterTip var(--da-dur-base) var(--da-ease-out); }
.newchip[hidden] { display: none; }

/* palco: uma frase por tela, rolagem com snap */
#stage { position: fixed; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; -webkit-overflow-scrolling: touch;
  padding: 0 var(--da-gutter); scrollbar-width: none; }
#stage::-webkit-scrollbar { display: none; }
#stage { overflow-anchor: none; }
.claim, .empty { min-height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: var(--da-space-5);
  padding: 76px 0 calc(var(--score-h, 112px) + var(--caption-h, 0px) + 34px); max-width: 640px; margin: 0 auto; }
.empty { text-align: center; color: var(--da-ink-mute); gap: var(--da-space-3); }
.empty[hidden] { display: none; }
.empty .tick { color: var(--da-ink-mute); font-size: var(--da-text-sm); max-width: 44ch; margin: var(--da-space-3) auto 0; font-style: italic; }
.empty .live-dot { color: var(--c-green); }
.empty .live-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--c-green); margin-right: 8px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }

.c-head { display: flex; justify-content: space-between; gap: var(--da-space-3); color: var(--da-ink-mute); }
.c-head .who { color: var(--da-ink); }

/* a frase */
.qwrap { display: grid; gap: var(--da-space-3); }
/* o personagem: as aspas com olhos. A cor acompanha o estado. */
.face { width: 76px; height: 46px; display: block; overflow: visible; color: var(--c-blue); transition: color 0.6s; }
.face .blob, .face .lid, .face .blink { fill: currentColor; transition: fill 0.6s; }
.face .white { fill: var(--da-ink); }
.face .pupil { fill: var(--da-bg); transition: transform 0.18s var(--da-ease-out), r 0.3s; }
.face .lid { transition: transform 0.35s var(--da-ease-out); }
.face .blink { animation: blink-eye 5.2s infinite; animation-delay: var(--bd, 0s); }
@keyframes blink-eye { 0%, 93%, 100% { transform: translateY(0); } 95.5%, 97% { transform: translateY(22px); } }
.face .brow { fill: none; stroke: var(--da-bg); stroke-width: 3.2; stroke-linecap: round; opacity: 0; transition: transform 0.4s var(--da-ease-out), opacity 0.3s; transform-box: fill-box; transform-origin: center; }
.face .smile { fill: none; stroke: var(--da-bg); stroke-width: 3.6; stroke-linecap: round; opacity: 0; transition: opacity 0.3s; }
.face .heart { fill: var(--da-bg); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.3s; }
/* humores (valem para o card e para o placar) · na fila: sonolento */
.mood-sleepy .face { color: #3B5FB8; }
.mood-sleepy .face .lid { transform: translateY(9px); }
/* checando: curioso */
.mood-curious .face .brow { opacity: 1; }
.mood-curious .face .l .brow { transform: translateY(-4px) rotate(-6deg); }
.mood-curious .face .r .brow { transform: translateY(-1px) rotate(4deg); }
.mood-curious .face .pupil { r: 5.6; }
/* FATO: feliz */
.mood-happy .face { color: var(--c-green); animation: face-bounce 0.7s var(--da-ease-snap) 1; }
.mood-happy .face .white, .mood-happy .face .pupil, .mood-happy .face .lid, .mood-happy .face .blink { opacity: 0; }
.mood-happy .face .heart { opacity: 1; animation: heart-beat 1.5s ease-in-out infinite; }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.2); } 44% { transform: scale(1); } 58% { transform: scale(1.12); } }
.mood-happy .face .brow { opacity: 1; transform: translateY(-3px); }
@keyframes face-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.08, 0.94); } 65% { transform: translateY(2px) scale(0.97, 1.04); } 100% { transform: none; } }
/* FALSO: pistola */
.mood-angry .face { color: var(--da-red); animation: face-rage 0.11s linear infinite alternate; }
.mood-angry .face .brow { opacity: 1; }
.mood-angry .face .l .brow { transform: translateY(3px) rotate(24deg); }
.mood-angry .face .r .brow { transform: translateY(3px) rotate(-24deg); }
.mood-angry .face .lid { transform: translateY(6px); }
.mood-angry .face .pupil { r: 3.4; }
@keyframes face-rage { from { transform: translate(-0.8px, 0.4px) rotate(-1deg); } to { transform: translate(0.8px, -0.4px) rotate(1deg); } }
/* IMPRECISO: insatisfeito, revira os olhos */
.mood-meh .face { color: #B9C600; } /* amarelo mais escuro: contraste com a bola do olho */
.mood-meh .face .brow { opacity: 1; transform: translateY(2px); }
.mood-meh .face .lid { transform: translateY(11px); }
/* INVERIFICÁVEL: dá de ombros */
.mood-shrug .face { color: var(--da-ink-mute); }
.mood-shrug .face .brow { opacity: 1; }
.mood-shrug .face .l .brow { transform: translateY(-3px) rotate(-10deg); }
.mood-shrug .face .r .brow { transform: translateY(1px) rotate(10deg); }
.mood-shrug .face .lid { transform: translateY(5px); }
/* neutro */
.mood-neutral .face .brow { opacity: 0; }
/* erro: apagado */
.mood-off .face { color: var(--da-border); }
.mood-off .face .lid { transform: translateY(22px); }
.quote { margin: 0; font-family: var(--da-font-display); font-weight: 900; font-size: clamp(1.9rem, 8vw, 3.25rem); line-height: 1.04; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.quote .w { display: inline-block; background: linear-gradient(100deg, var(--c-blue), var(--c-orange)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--da-ink); transition: -webkit-text-fill-color 0.9s var(--da-ease-inout); }
.quote.reveal .w { opacity: 0; transform: translateY(0.35em); animation: wIn 0.55s var(--da-ease-out) forwards; animation-delay: calc(var(--i) * 42ms); }
@keyframes wIn { to { opacity: 1; transform: none; } }
.quote.settled .w { -webkit-text-fill-color: var(--da-ink); }
/* modo shader: as palavras ficam invisíveis enquanto as partículas desenham; depois crossfade */
.quote.fx .w { opacity: 0; animation: none; background: none; -webkit-text-fill-color: var(--da-ink); transition: opacity 1s var(--da-ease-inout), -webkit-text-fill-color 0.9s var(--da-ease-inout); }
.quote.fx.settled .w { opacity: 1; }
.norm { margin: 0; color: var(--da-ink-soft); font-size: var(--da-text-sm); line-height: 1.45; }

/* a frase fica branca depois do veredito; só o rótulo tem cor */

/* checagem em andamento */
.work { display: grid; gap: var(--da-space-3); margin-top: var(--da-space-4); padding-top: var(--da-space-4); border-top: 1px solid var(--da-border-soft); }
.checking { display: flex; align-items: center; gap: var(--da-space-3); color: var(--da-ink-soft); height: 1.5em; }
.checking .spin { display: none; }
.spin { width: 12px; height: 12px; border: 2px solid var(--da-border); border-top-color: var(--c-blue); border-radius: 50%; animation: rot 0.9s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--da-space-2);
  height: 10.5em; overflow: hidden; font-size: var(--da-text-sm); line-height: 1.4; color: var(--da-ink-soft);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48%); mask-image: linear-gradient(to bottom, transparent, #000 48%); }
.steps li { display: flex; gap: var(--da-space-3); align-items: flex-start; animation: lineIn 0.35s var(--da-ease-out) both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } }
.steps li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.steps li .mark { flex: none; width: 1.25em; text-align: right; font-family: var(--da-font-mono); line-height: 1.4; }
.steps li.done .mark::after { content: "✓"; color: var(--c-green); }
.steps li.done.k-discarded .mark::after, .steps li.done.k-error .mark::after { content: "✕"; color: var(--da-red); }
.steps li.now .mark::after { content: ""; display: inline-block; width: 9px; height: 9px; border: 2px solid var(--da-border); border-top-color: var(--c-blue); border-radius: 50%; animation: rot 0.9s linear infinite; vertical-align: -1px; }
.steps li.k-tier_insufficient, .steps li.k-note { color: var(--da-ink-mute); }
.steps li.k-verdict { color: var(--da-ink); }

/* resultado */
.result { position: relative; display: grid; gap: var(--da-space-4); }
.result:empty { display: none; }
/* tooltip global (fora do palco, acima de tudo): explicação, fontes e trilha */
#tip { display: none; position: fixed; z-index: 6; left: var(--da-gutter); right: var(--da-gutter); bottom: calc(var(--score-h, 112px) + var(--da-space-3)); max-height: 52vh; overflow: auto; background: var(--da-surface); border: var(--da-border-w) solid var(--da-border); padding: var(--da-space-4); gap: var(--da-space-4); box-shadow: 0 13px 34px rgba(0,0,0,0.6); animation: enterTip var(--da-dur-base) var(--da-ease-out); }
#tip.open { display: grid; }
#tip .expl { margin: 0; font-size: var(--da-text-sm); line-height: 1.5; }
#tip .srcs { font-size: var(--da-text-sm); }
#tip .who { color: var(--da-ink-mute); }
#tip .tip-head { display: flex; justify-content: space-between; align-items: center; gap: var(--da-space-3); }
#tip .close { font: inherit; font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; background: none; border: var(--da-border-w) solid var(--da-ink); color: var(--da-ink); padding: 5px 10px; cursor: pointer; }
#tip .close:hover { background: var(--da-ink); color: var(--da-bg); }
@media (min-width: 720px) { #tip { right: auto; bottom: auto; width: min(560px, calc(100vw - 2 * var(--da-gutter))); max-height: 60vh; } }
.vwrap { display: flex; align-items: center; gap: var(--da-space-3); flex-wrap: wrap; }
.label { font: inherit; font-family: var(--da-font-mono); font-size: var(--da-text-sm); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 13px 5px; border: 2px solid currentColor; background: none; cursor: pointer;
  animation: pop 0.45s var(--da-ease-snap) both; }
.label:hover, .vwrap.open .label { filter: brightness(1.08); }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } }
.label.FATO { background: var(--c-green); color: var(--c-green-ink); border-color: var(--c-green); }
.label.MENTIRA { background: var(--da-red); color: var(--da-red-ink); border-color: var(--da-red); }
.label.IMPRECISO { background: var(--da-yellow); color: var(--da-yellow-ink); border-color: var(--da-yellow); }
.label.INVERIFICAVEL { color: var(--da-ink-soft); border-color: var(--da-border); }
.label.ERRO { color: var(--da-ink-mute); border-color: var(--da-border); }
.conf { color: var(--da-ink-mute); }
.expl { margin: 0; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--da-space-2); font-size: var(--da-text-sm); }
.srcs a { display: flex; gap: var(--da-space-3); color: var(--da-ink-soft); text-decoration: none; }
.srcs a:hover { color: var(--da-ink); }
.srcs .t { flex: none; font-family: var(--da-font-mono); font-size: var(--da-text-2xs); letter-spacing: 0.08em; color: var(--da-ink-mute); padding-top: 0.25em; }
.trail-btn { background: none; border: 0; padding: 0; color: var(--da-ink-mute); font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; justify-self: start; text-align: left; }
.claim.v .work { margin-top: var(--da-space-3); }
.trail-btn:hover { color: var(--da-ink); }
.claim.v .work, .claim.err .work { display: none; }
.claim.v.show-trail .work, .claim.err.show-trail .work { display: grid; }
.claim.show-trail .steps { height: auto; max-height: none; -webkit-mask-image: none; mask-image: none; }
.claim.show-trail .checking, .claim.show-trail .steps li.now .mark::after { display: none; }

/* legenda ao vivo: última fala transcrita, acima do placar */
.caption { position: fixed; left: 0; right: 0; bottom: var(--score-h, 112px); z-index: 2; text-align: center; padding: 8px var(--da-gutter) 9px; background: rgba(11,11,11,0.86); backdrop-filter: blur(6px); border-top: 1px solid var(--da-border-soft); font-size: var(--da-text-sm); line-height: 1.4; color: var(--da-ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; pointer-events: none; }
.caption[hidden], body.no-cc .caption { display: none; }
.caption b { color: var(--da-ink); font-weight: 600; margin-right: var(--da-space-2); }
.caption.pulse { animation: capIn 0.35s var(--da-ease-out); }
@keyframes capIn { from { opacity: 0.4; } }
.top nav { display: flex; gap: var(--da-space-4); align-items: center; }
.top .cc { font: inherit; font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; padding: 0; color: var(--da-ink-soft); cursor: pointer; pointer-events: auto; }
.top .cc[aria-pressed="false"] { color: var(--da-ink-mute); text-decoration: line-through; }
@media (min-width: 720px) { .caption { padding-left: max(var(--da-gutter), calc((100vw - 640px) / 2)); padding-right: max(var(--da-gutter), calc((100vw - 640px) / 2)); } }

/* fila: chip e painel das próximas afirmações */
.queuechip { position: fixed; bottom: calc(var(--score-h, 112px) + var(--caption-h, 0px) + var(--da-space-4)); left: 50%; transform: translateX(-50%); z-index: 4; background: var(--da-surface); color: var(--da-ink); border: var(--da-border-w) solid var(--da-border); padding: 9px 14px; cursor: pointer; font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; animation: enterTip var(--da-dur-base) var(--da-ease-out); }
.queuechip[hidden] { display: none; }
.queuechip:hover { border-color: var(--da-ink); }
.qsheet { display: none; position: fixed; z-index: 6; left: var(--da-gutter); right: var(--da-gutter); bottom: calc(var(--score-h, 112px) + var(--da-space-3)); max-height: 60vh; overflow: auto; background: var(--da-surface); border: var(--da-border-w) solid var(--da-border); padding: var(--da-space-4); gap: var(--da-space-3); box-shadow: 0 13px 34px rgba(0,0,0,0.6); animation: enterTip var(--da-dur-base) var(--da-ease-out); }
.qsheet.open { display: grid; }
.qsheet .tip-head { display: flex; justify-content: space-between; align-items: center; gap: var(--da-space-3); }
.qsheet .who { color: var(--da-ink-mute); }
.qsheet .close { font: inherit; font-family: var(--da-font-mono); font-size: var(--da-text-xs); letter-spacing: 0.08em; text-transform: uppercase; background: none; border: var(--da-border-w) solid var(--da-ink); color: var(--da-ink); padding: 5px 10px; cursor: pointer; }
.qsheet .rows { display: grid; }
.qrow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--da-space-3); align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--da-border-soft); padding: 9px 0; color: var(--da-ink); font: inherit; font-size: var(--da-text-sm); cursor: pointer; }
.qrow:hover .q { color: var(--da-ink); }
.qrow .who { color: var(--da-ink-soft); }
.qrow .q { color: var(--da-ink-soft); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qrow .st { color: var(--da-ink-mute); white-space: nowrap; }
.label.mini { font-size: 10px; padding: 3px 7px 2px; letter-spacing: 0.1em; animation: none; }
@media (min-width: 720px) { .qsheet { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100vw - 2 * var(--da-gutter))); } }

/* placar */
.score { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; background: var(--da-surface);
  border-top: var(--da-border-w) solid var(--da-border); padding-bottom: env(safe-area-inset-bottom); }
.side { padding: 11px var(--da-gutter) 10px; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 4px 10px; align-items: end; }
.side .face { width: 50px; height: 30px; align-self: center; }
.side + .side { border-left: var(--da-border-w) solid var(--da-border); }
.side .name { grid-column: 1 / 3; font-family: var(--da-font-display); font-weight: 800; font-size: var(--da-text-md); letter-spacing: -0.02em; line-height: 1; align-self: baseline; }
.side .n { color: var(--da-ink-mute); justify-self: end; align-self: baseline; font-size: var(--da-text-2xs); }
.side .idx { font-family: var(--da-font-display); font-weight: 900; font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; transition: color 0.6s; }
.side .counts { display: grid; gap: 1px; font-family: var(--da-font-mono); font-size: var(--da-text-2xs); letter-spacing: 0.04em; color: var(--da-ink-mute); line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.side .counts b { color: var(--da-ink-soft); font-weight: 400; }
.side .counts span { transform-origin: left center; }
.side .counts span.flash { animation: count-flash 1.1s var(--da-ease-out) 1; }
.side .counts span.flash b { color: inherit; }
.flash-FATO { color: var(--c-green); } .flash-IMPRECISO { color: var(--da-yellow); } .flash-MENTIRA { color: var(--da-red); }
@keyframes count-flash { 0% { transform: scale(1); } 20% { transform: scale(1.35); filter: brightness(1.5); } 40% { transform: scale(1); } 55% { opacity: 0.25; } 70% { opacity: 1; } 82% { opacity: 0.35; } 100% { opacity: 1; transform: scale(1); } }
.side.lead .idx { color: var(--da-yellow); }

@media (min-width: 720px) {
  .side { padding: 13px 34px; }
  .side .idx { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .face .pupil { transform: none !important; }
  .quote.reveal .w { opacity: 1; transform: none; -webkit-text-fill-color: var(--da-ink); }
}
