/* The TV picture (tv.js): the CRT glass, scanlines, static and the three channels.
   Everything here is scoped to s- classes; a scene draws the case around .s-screen
   and may override its border-radius. Contract: docs/SCENES.md. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;800;900&family=Inter:wght@500;600;700&display=swap");

.s-screen {
  position: relative; overflow: hidden; border-radius: 20px / 26px;
  font-family: Inter, system-ui, sans-serif; text-align: left; line-height: normal;
  background: radial-gradient(ellipse at 50% 42%, #f6f8ff 0%, #e6ecfb 58%, #c8d3ef 100%);
  box-shadow: inset 0 0 34px rgba(16, 26, 70, .38);
  animation: s-crt 6s steps(1) infinite;
}
@keyframes s-crt { 0%, 97% { filter: none; } 98% { filter: brightness(1.04) contrast(.98); } }
.s-screen *, .s-screen *::before, .s-screen *::after { box-sizing: border-box; }
.s-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(20, 30, 70, .055) 0 1px, transparent 1px 3px); }
.s-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 22% 8%, rgba(255, 255, 255, .45), transparent 60%); mix-blend-mode: soft-light; }
.s-static { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-size: 160px 120px; image-rendering: pixelated; }
.s-static.on { opacity: 1; animation: s-noise .12s steps(3) infinite; }
@keyframes s-noise { 0% { background-position: 0 0; } 33% { background-position: -37px 23px; } 66% { background-position: 51px -41px; } }

.s-scr {
  position: absolute; inset: 0; padding: .9em 1em .8em; display: flex; flex-direction: column; gap: .6em;
  color: #17224a; font-size: var(--s-fs, 11px); letter-spacing: -.005em;
}
.s-scr.fade { animation: s-scrin .5s ease-out; }
@keyframes s-scrin { from { opacity: 0; filter: blur(2px) brightness(1.4); } to { opacity: 1; filter: none; } }
.s-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; white-space: nowrap; }
.s-brand { display: flex; align-items: center; gap: .45em; font: 800 1em/1 Archivo, sans-serif; letter-spacing: .02em; color: #1d2c66; }
.s-mark { width: 1.3em; height: 1.3em; flex: none; }
.s-brand small { font: 600 .78em/1 Inter, sans-serif; color: #5b6895; letter-spacing: .04em; }
.s-live { display: flex; align-items: center; gap: .4em; font-weight: 700; font-size: .74em; letter-spacing: .05em; text-transform: uppercase; color: #5b6895; }
.s-live i { width: .6em; height: .6em; border-radius: 50%; background: #9aa6c9; }
.s-live.on { color: #c2283a; }
.s-live.on i { background: #e23a4c; box-shadow: 0 0 0 0 rgba(226, 58, 76, .6); animation: s-pulse 1.6s infinite; }
@keyframes s-pulse { to { box-shadow: 0 0 0 .55em rgba(226, 58, 76, 0); } }

.s-card { background: rgba(255, 255, 255, .78); border: 1px solid rgba(40, 60, 130, .12); border-radius: .7em; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 .2em .6em rgba(30, 45, 110, .08); }
.s-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: .6em; }
.s-hero > div { padding: .6em .75em; }
.s-kicker { font: 800 .72em/1.15 Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #3a4c8c; }
.s-big { font: 900 2.3em/1 Archivo, sans-serif; letter-spacing: -.02em; margin: .1em 0 .08em; color: #142057; }
.s-big small { font-size: .5em; font-weight: 800; margin-left: .05em; }
.s-sub { font-size: .74em; color: #55618c; line-height: 1.2; }
.s-count { display: flex; flex-direction: column; justify-content: center; }
.s-count .s-kicker { color: #3a4c8c; text-align: center; }
.s-timer { display: flex; align-items: center; justify-content: center; gap: .35em; font: 800 1.55em/1.05 Archivo, sans-serif; color: #142057; margin: .25em 0 .2em; text-align: center; }
.s-timer svg { width: .95em; height: .95em; flex: none; }
.s-count .s-sub { text-align: center; }

.s-list { display: flex; flex-direction: column; justify-content: space-around; padding: .3em .7em; flex: 1; min-height: 0; overflow: hidden; }
.s-row { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: .6em; padding: .2em 0; }
.s-row + .s-row { border-top: 1px solid rgba(40, 60, 130, .08); }
.s-ph { width: 2.2em; height: 2.2em; border-radius: 50%; position: relative; overflow: hidden; background: var(--pc); box-shadow: 0 0 0 .14em #fff, 0 0 0 .27em var(--pc); }
.s-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-ph b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 .8em/1 Archivo, sans-serif; }
.s-name { min-width: 0; }
.s-name b { display: block; font: 800 .88em/1.15 Archivo, sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #142057; }
.s-name b span { font: 600 .82em/1 Inter, sans-serif; color: #6a76a0; margin-left: .35em; text-transform: none; }
.s-bar { height: .45em; border-radius: 1em; background: #dfe5f5; margin-top: .25em; overflow: hidden; }
.s-bar i { display: block; height: 100%; width: var(--w); background: var(--pc); border-radius: 1em; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.s-num { text-align: right; }
.s-num b { display: block; font: 800 1.02em/1.1 Archivo, sans-serif; color: #142057; font-variant-numeric: tabular-nums; }
.s-num small { font-size: .68em; color: #6a76a0; font-variant-numeric: tabular-nums; }
.s-foot { display: flex; justify-content: space-between; gap: .6em; font-size: .7em; color: #6a76a0; }
.s-tag { display: inline-block; padding: .15em .45em; border-radius: .35em; font: 800 .82em/1.2 Archivo, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.s-tag.win { background: #1f9d55; color: #fff; }
.s-tag.run { background: #2b59c3; color: #fff; }
.s-tag.sim { background: #f2c94c; color: #3a2c00; }
.s-msg { margin: auto; text-align: center; color: #3a4c8c; font-weight: 600; padding: 1em; }

.s-body { display: flex; flex: 1; min-height: 0; }
.s-side { display: none; }
/* a wide screen (s-wide, set by tv.js) gets a second column */
.s-wide .s-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: .6em; }
.s-wide .s-side { display: flex; flex-direction: column; gap: .5em; padding: .7em .8em; min-height: 0; }
.s-main { display: flex; flex-direction: column; gap: .6em; flex: 1; min-height: 0; }
.s-map { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.s-map svg { width: 100%; height: 100%; }
.s-map path { stroke: #f4f7ff; stroke-width: 1.4; transition: fill .8s; }
.s-map path.sel { stroke: #142057; stroke-width: 3; }
.s-legend { display: flex; flex-wrap: wrap; gap: .3em .8em; font-size: .72em; color: #3a4c8c; }
.s-legend span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.s-legend i { width: .75em; height: .75em; border-radius: .2em; background: var(--pc); }

/* map channel */
.s-mapwrap { display: flex; flex-direction: column-reverse; gap: .5em; flex: 1; min-height: 0; padding: .5em .7em; }
.s-mapinfo { display: flex; flex-direction: column; gap: .35em; }
.s-wide .s-mapwrap { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; }
.s-wide .s-mapwrap .s-map { height: 100%; }
.s-pick { font-size: .8em; color: #3a4c8c; }
.s-pick b { font: 800 1.1em/1.2 Archivo, sans-serif; color: #142057; display: block; }

/* state channel */
.s-uf { display: flex; align-items: center; gap: .5em; }
.s-uf select {
  font: 800 .95em/1 Archivo, sans-serif; color: #142057; background: #fff; border: 1px solid rgba(40, 60, 130, .25);
  border-radius: .5em; padding: .3em .5em; max-width: 12em;
}
.s-two { display: grid; grid-template-columns: 1fr; gap: .5em; flex: 1; min-height: 0; }
.s-wide .s-two { grid-template-columns: 1fr 1fr; }
.s-two .s-list { padding-top: .5em; }
.s-two .s-kicker { margin-bottom: .1em; display: flex; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .s-screen *, .s-screen *::before, .s-screen *::after { animation: none !important; transition: none !important; }
}
/* CH 4: a view shared from the data site, drawn by its own page (/dados/tv.html) */
.s-visao { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.s-visao iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* CH 4 Mundo: the world map of who leads among Brazilians abroad */
.s-world { display: flex; flex-direction: column; gap: .5em; flex: 1; min-height: 0; }
.s-wmap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .3em; padding: .45em .65em .5em; }
.s-wmap .s-kicker { display: flex; justify-content: space-between; }
.s-map [data-pais] { stroke: #f4f7ff; stroke-width: .7; }
.s-map path.s-land { fill: #dfe5f3; stroke: none; }
.s-map [data-pais].sel { stroke: #142057; stroke-width: 2.2; }
.s-wmap .s-map [data-pais] { cursor: pointer; }
.s-wside { padding: .5em .75em; }
.s-wside .s-kicker { display: flex; justify-content: space-between; gap: .5em; }
.s-wide .s-world { display: grid; grid-template-columns: 1.4fr 1fr; }
.s-wide .s-wside .s-kicker { flex-direction: column; gap: .15em; }
.s-extk { display: flex; justify-content: space-between; gap: .5em; margin-bottom: .2em; }