html, body { height: 100%; margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); }

.tv {
  position: relative;
  height: 100vh; width: 100vw;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: clamp(12px,1.2vw,24px) clamp(16px,2vw,40px);
  gap: clamp(8px,1vh,16px);
}

.hero {
  flex-shrink: 0;
  background: linear-gradient(135deg, #0B0A12, #171425);
  border-radius: var(--radius-panel);
  padding: clamp(14px,1.6vh,26px) clamp(20px,2vw,34px);
  color: #EDEAF6;
  box-shadow: var(--shadow-card);
}
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: clamp(12px,1.4vw,20px); }
.brand-logo { height: clamp(31px,3.92vh,56px); width: auto; flex-shrink: 0; }
.brand-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.64vh,38px); }
.brand-sub { font-family: var(--font-body); font-size: clamp(14px,1.32vh,18px); color: #B9B2D6; margin-top: 2px; }
.clock { font-family: var(--font-mono); font-weight: 700; font-size: clamp(19px,2.28vh,31px); color: var(--violet-bright); }

.kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.2vw,20px); margin-top: clamp(10px,1.3vh,16px); }
.kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-card); padding: clamp(8px,1.1vh,14px) clamp(10px,1.4vw,18px); }
.kpi-label { font-size: clamp(12px,1.14vh,16px); color: #B9B2D6; text-transform: uppercase; letter-spacing: .06em; }
.kpi-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,2.28vh,31px); margin-top: 2px; }
.kpi-value.neg { color: var(--sev-critico); }
#kpi-bruta { color: var(--sev-ok); }

.meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(8px,0.9vh,12px); font-size: clamp(13px,1.14vh,16px); color: #B9B2D6; }
.legend { display: flex; gap: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.leg-dot.ok { background: var(--sev-ok); } .leg-dot.atencao { background: var(--sev-atencao); } .leg-dot.critico { background: var(--sev-critico); }

.board { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); overflow: hidden; }

.row { display: grid; grid-template-columns: 0.6fr 1.5fr 2.4fr 1.6fr 1.6fr; align-items: center; gap: clamp(10px,1.3vw,21px); padding: clamp(8px,1.17vh,16px) clamp(18px,2.08vw,29px); }

.board-header { flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px,1.64vh,22px); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); background: var(--paper-2); }

.pages { position: relative; flex: 1; min-height: 0; }
.page { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.page.active { opacity: 1; pointer-events: auto; }

.data-row { border-bottom: 1px solid var(--grid); }
.data-row:last-child { border-bottom: none; }
.data-row.top { background: var(--violet-050); }

.pos-badge { display: inline-flex; align-items: center; justify-content: center; width: clamp(40px,4.06vh,56px); height: clamp(40px,4.06vh,56px); border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.95vh,26px); color: var(--muted); background: var(--grid); }
.data-row.top .pos-badge { background: var(--violet); color: #fff; }

.team-pill { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(18px,1.79vh,23px); color: var(--text); }
.team-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--team-color, var(--muted)); flex-shrink: 0; }
.team-logo { width: clamp(42px,4.8vh,66px); height: clamp(42px,4.8vh,66px); border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-left: -6px; }

.c-assessor { font-family: var(--font-display); font-weight: 600; font-size: clamp(23px,2.5vh,33px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.metric { display: flex; flex-direction: row; align-items: center; gap: clamp(8px,1vw,14px); flex-wrap: wrap; }
.metric-value { font-family: var(--font-mono); font-size: clamp(18px,1.95vh,25px); color: var(--muted); }
.pill { display: inline-block; width: fit-content; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,2.11vh,26px); padding: 3px 13px; border-radius: var(--radius-pill); }
.pill.ok { background: rgba(39,174,96,.15); color: var(--sev-ok); }
.pill.atencao { background: rgba(242,153,74,.16); color: var(--sev-atencao); }
.pill.critico { background: rgba(232,75,138,.15); color: var(--sev-critico); }
.pill.none { background: var(--grid); color: var(--muted); }

.foot { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-top: clamp(6px,0.8vh,10px); font-size: clamp(17px,1.48vh,21px); color: var(--muted); }
.dots { display: flex; gap: 6px; }
.dot-page { width: 7px; height: 7px; border-radius: 50%; background: var(--grid-2); }
.dot-page.active { background: var(--violet); }

.overlay { position: absolute; inset: 0; background: rgba(11,10,18,.9); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; border-radius: var(--radius-panel); padding: 24px; }
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay-box { max-width: 560px; }
.overlay-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.4vh,31px); }
.overlay-sub { margin-top: 8px; font-size: clamp(16px,1.44vh,19px); color: #B9B2D6; }

/* ---- Podium ---- */
.page.podium-bg {
  background: radial-gradient(120% 140% at 50% -10%, #241c3d 0%, #171425 45%, #0B0A12 100%);
  border-radius: var(--radius-panel);
  overflow: hidden;
  padding: clamp(14px,1.8vh,28px) clamp(18px,2.4vw,40px);
  box-sizing: border-box;
}
.podium-header { flex-shrink: 0; text-align: center; margin-bottom: clamp(6px,1vh,14px); }
.podium-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.6vh,36px); color: #fff; letter-spacing: .02em; }
.podium-subtitle { font-family: var(--font-body); font-size: clamp(13px,1.2vh,17px); color: #B9B2D6; margin-top: 2px; }

.podium-stage { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px,1.6vw,28px); }
.podium-slot { display: flex; flex-direction: column; align-items: center; width: clamp(150px,20vw,280px); opacity: 0; transform: translateY(24px); animation: podiumRise .6s cubic-bezier(.2,.8,.3,1) forwards; }
.podium-slot[data-rank="1"] { order: 2; width: clamp(170px,23vw,310px); animation-delay: .12s; }
.podium-slot[data-rank="2"] { order: 1; animation-delay: .24s; }
.podium-slot[data-rank="3"] { order: 3; animation-delay: .36s; }
@keyframes podiumRise { to { opacity: 1; transform: translateY(0); } }

.podium-photo-wrap { position: relative; width: clamp(72px,9vh,120px); height: clamp(72px,9vh,120px); border-radius: 50%; margin-bottom: clamp(8px,1vh,14px); }
.podium-slot[data-rank="1"] .podium-photo-wrap { width: clamp(92px,11.5vh,150px); height: clamp(92px,11.5vh,150px); }
.podium-photo-glow { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(164,107,255,.55) 0%, rgba(164,107,255,0) 70%); filter: blur(2px); animation: podiumGlow 2.6s ease-in-out infinite; }
.podium-slot[data-rank="1"] .podium-photo-glow { background: radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(164,107,255,.35) 45%, rgba(164,107,255,0) 72%); }
@keyframes podiumGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.podium-photo { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; border: 3px solid var(--violet-bright); box-shadow: 0 6px 20px rgba(0,0,0,.4); background: #1E1834; }
.podium-slot[data-rank="1"] .podium-photo { border-color: #fff; border-width: 4px; }
.podium-photo.is-fallback { object-fit: contain; padding: 14%; box-sizing: border-box; }

.podium-rank-chip { position: relative; margin-top: -18px; margin-bottom: 8px; width: clamp(28px,3.2vh,40px); height: clamp(28px,3.2vh,40px); border-radius: 50%; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px,1.5vh,18px); border: 2px solid #171425; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.podium-slot[data-rank="1"] .podium-rank-chip { background: linear-gradient(135deg, var(--violet-bright), var(--violet)); width: clamp(32px,3.6vh,46px); height: clamp(32px,3.6vh,46px); font-size: clamp(15px,1.7vh,20px); }

.podium-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px,1.6vh,21px); color: #fff; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-slot[data-rank="1"] .podium-name { font-size: clamp(17px,1.9vh,25px); }
.podium-team-row { margin-top: 4px; }
.podium-team-row .team-pill { font-size: clamp(11px,1.05vh,14px); color: #C9C3E0; }
.podium-team-row .team-logo { width: clamp(20px,2.4vh,30px); height: clamp(20px,2.4vh,30px); margin-left: 0; }

.podium-stats { margin-top: clamp(8px,1vh,14px); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.podium-stat-line { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.podium-stats .pill { font-size: clamp(11px,1.27vh,16px); padding: 2px 9px; }
.podium-stat-label { font-size: clamp(10px,0.95vh,13px); color: #9A93BD; text-transform: uppercase; letter-spacing: .04em; }
.podium-stat-value { font-family: var(--font-mono); font-size: clamp(13px,1.3vh,17px); color: #EDEAF6; }

.podium-pedestal { width: 100%; margin-top: clamp(10px,1.2vh,16px); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--violet-dim), #4a2f8a); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 -6px 24px rgba(122,43,255,.25); display: flex; align-items: center; justify-content: center; position: relative; }
.podium-pedestal::after { content: ""; position: absolute; inset: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%); }
.podium-pedestal-num { font-family: var(--font-display); font-weight: 700; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.podium-slot[data-rank="1"] .podium-pedestal { height: clamp(80px,11vh,150px); background: linear-gradient(180deg, var(--violet-bright), var(--violet)); }
.podium-slot[data-rank="1"] .podium-pedestal-num { font-size: clamp(30px,4.2vh,58px); }
.podium-slot[data-rank="2"] .podium-pedestal { height: clamp(58px,7.6vh,104px); }
.podium-slot[data-rank="2"] .podium-pedestal-num { font-size: clamp(24px,3.2vh,42px); }
.podium-slot[data-rank="3"] .podium-pedestal { height: clamp(40px,5.4vh,74px); }
.podium-slot[data-rank="3"] .podium-pedestal-num { font-size: clamp(22px,2.9vh,38px); }

/* Team podium: bigger cards with an embedded roster of members */
.team-podium-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: clamp(10px,1.6vw,24px); }
.team-podium-card { display: flex; flex-direction: column; width: clamp(220px,26vw,360px); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-card); padding: clamp(10px,1.4vh,18px); opacity: 0; transform: translateY(24px); animation: podiumRise .6s cubic-bezier(.2,.8,.3,1) forwards; min-height: 0; }
.team-podium-card[data-rank="1"] { order: 2; border-color: rgba(164,107,255,.5); box-shadow: 0 0 0 1px rgba(164,107,255,.3), 0 12px 30px rgba(122,43,255,.25); animation-delay: .12s; }
.team-podium-card[data-rank="2"] { order: 1; animation-delay: .24s; }
.team-podium-card[data-rank="3"] { order: 3; animation-delay: .36s; }
.team-podium-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.team-podium-head .podium-rank-chip { margin: 0; flex-shrink: 0; }
.team-podium-head .team-logo, .team-podium-head .team-dot { margin-left: 0; }
.team-podium-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px,1.6vh,21px); color: #fff; }
.team-podium-count { font-size: clamp(11px,1vh,14px); color: #9A93BD; }
.team-podium-stats { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.team-podium-roster { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.roster-row { display: flex; align-items: center; gap: 8px; }
.roster-photo { width: clamp(24px,2.8vh,34px); height: clamp(24px,2.8vh,34px); border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; background: #1E1834; border: 1px solid rgba(255,255,255,.2); }
.roster-photo.is-fallback { object-fit: contain; padding: 12%; box-sizing: border-box; }
.roster-name { font-size: clamp(11px,1.05vh,14px); color: #EDEAF6; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(10px,1vh,13px); padding: 1px 8px; border-radius: var(--radius-pill); flex-shrink: 0; }

@media (max-width: 820px) {
  .tv { height: auto; min-height: 100vh; overflow: visible; }
  .board { overflow: visible; }
  .pages { position: static; }
  .page { position: static; opacity: 1; pointer-events: auto; display: block; transition: none; }
  .board-header { display: none; }
  .row { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; }
  .c-pos, .c-time { display: inline-block; margin-right: 8px; }
  .metric { flex-direction: row; justify-content: space-between; align-items: center; }
  .kpis { grid-template-columns: 1fr; }

  .page.podium-bg { position: static; height: auto; padding: 16px; }
  .podium-stage, .team-podium-stage { flex-direction: column; align-items: center; }
  .podium-slot, .team-podium-card { width: 100%; max-width: 320px; }
  .podium-slot[data-rank="1"] { width: 100%; max-width: 320px; }
  .podium-pedestal { display: none; }
  .team-podium-roster { max-height: 220px; }
}