/* Colors and original artwork from the supplied BDR CINZA presentation. */
:root{color-scheme:dark;--paper:#545454;--ink:#fdfafa;--muted:#d3d3d3;--line:#727272;--red:#980000;--red-dark:#7b0000;--green:#93dfb0}
body{background:var(--paper) url("/assets/grafismo-bdr-cinza.png") left -340px top -180px/800px auto no-repeat fixed}
.header{background:#545454e8}
body .header .brand{position:relative;width:clamp(100px,16vw,150px);aspect-ratio:2.49;overflow:hidden}
body .header .brand img,body[data-screen] .header .brand img{position:absolute;width:121.62%;height:auto;max-width:none;left:-10.81%;top:50%;transform:translateY(-47.22%)}
.eyebrow,.text-button,.login h1 em{color:var(--ink)}
.card,.team,.rank-list li,.library-row,.login-box{background:#414141}
.training-welcome{background:#414141ed}
.login-intro:after{background-image:url("/assets/grafismo-bdr-cinza.png");opacity:.25}
.secondary{background:#505050;border-color:#858585;color:#fff}
.secondary:not(:disabled):hover{background:#646464}
.dark{background:#252525;color:#fff}
.pill{background:#414141;color:#f5f5f5}.pill.live{color:#a9e9c1}
.question-meta{border-color:#6c6c6c}
.question-footer{background:#373737;border-color:#6c6c6c}
.answer{background:#585858;border-color:#858585;color:#fff}
.answer b{background:#727272;color:#fff}
.answer:not(:disabled):hover{background:#6b5858;border-color:#e1aaaa}
.answer.selected{background:#663d3d;border-color:#f1baba}
.answer.correct{background:#294d38;border-color:#8cc6a0}
.answer.correct b{background:#37734e;color:#fff}
.answer.wrong{background:#643c3c;border-color:#e3a2a2}
.answer.wrong b{background:#980000;color:#fff}
.team.correct .result-letter{color:#a1e8b8}
.team.wrong .result-letter{color:#ffc0c0}
.team .position{color:#fff}
.team.empty{background:#4c4c4c}
.training-rank .player-score{border-color:#e4a7a7}
.empty-state{background-image:url("/assets/grafismo-bdr-cinza.png")}
.empty-state>div,.join-banner{background:#414141ed}
.empty-state .big-number,body[data-screen="training"] .training-finish .big-number{color:#fff}
.stage-list li{background:#414141;color:#ddd}.stage-list li.done{background:#36543f;color:#d6eddb}
.progress-track i{background:#777}.progress-track i.filled{background:#b45b5b}
.library-row .used{color:#afe0ba}.presence-list li{border-color:#666}
.host-note{background:#5b4e2d;color:#fff1be}
select,input:not([type="radio"]):not([type="hidden"]),textarea{background:#363636;color:#fff;border-color:#999}
dialog{background:#414141}.icon-button{background:#666;color:#fff}
.error{color:#ffbcbc}.notice{background:#5b4e2d;color:#fff1c2;border-color:#99864e}
.offline{background:#653b3b;color:#ffe3e3;border-color:#ad7171}
.training-pick>span:last-child,.training-welcome .hint{color:var(--muted)}
@media(max-height:500px){body .header .brand{width:90px}}
.live-player .training-teams:has(>.team:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
.live-player .live-waiting{text-align:center}
body.live-player .training-teams .person{max-width:120px}
body.live-player .training-teams .team-top,body.live-player .training-teams .team-top>div{min-width:0;flex:1}
body.live-player .training-teams .person{max-width:100%}
body.live-player .training-teams .team-result{flex-shrink:0}
@media(max-width:600px){
  .live-player .page-title>.pill{font-size:9px;max-width:108px;padding:5px 8px;line-height:1.3}
  body.live-player .training-teams .person{max-width:100%;font-size:8px}
}
@media(max-width:380px){
  body.live-player .page-title h1{font-size:18px}
  body.live-player .page-title>.pill{max-width:85px;font-size:8px;padding:5px 6px}
}
/* Placar do jogador: aparece somente depois da revelação ou do fim da sessão. */
body .rank-list.host-ranking{grid-template-columns:1fr;gap:6px}
body .rank-list.host-ranking li{padding:8px 12px}
body .rank-list.host-ranking li>div{flex:1;min-width:0}
body .rank-list.host-ranking .rank-number{flex:none}
body .rank-list.host-ranking .time{display:block;flex:none;min-width:65px;text-align:right}
body .rank-list.host-ranking strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-person{font-size:11px;font-weight:400;color:var(--muted)}
.training-modes{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.training-welcome>[data-action="treino-retomar"]{align-self:flex-start;margin-top:16px}
body.live-player #account{flex-wrap:wrap;row-gap:0}
body.live-player #account>span:not(.pill){max-width:25vw}
body footer.app-attribution,body[data-screen] footer.app-attribution{
  display:block;flex:none;width:100%;max-width:1440px;margin:0 auto;
  padding:6px 12px;border-top:1px solid var(--line);color:var(--muted);
  font:11px/1.4 "Segoe UI",Arial,sans-serif;letter-spacing:0;text-align:center;
}
@media(max-height:500px){body[data-screen] footer.app-attribution{padding:3px 10px;font-size:10px}}
body.live-player main[data-phase="placar"]{display:flex;flex-direction:column}
.player-winner{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:5px;padding:clamp(8px,1.5dvh,20px);border-top:3px solid var(--team,#999)}
.player-winner h2{font-size:clamp(24px,4dvh,38px);margin:0}
.player-winner p{margin:0;font-size:clamp(12px,1.8dvh,16px)}
.player-winner .winning-answer{max-width:850px;overflow-wrap:anywhere}
.player-winner .pill{font-size:12px;gap:5px}
.player-scoreboard{flex:none;min-width:0}
.player-ranking{list-style:none;padding:0;margin:0;display:grid;gap:clamp(4px,.8dvh,9px)}
.player-ranking li{display:flex;align-items:center;gap:12px;padding:clamp(4px,.7dvh,8px) 16px;border:1px solid var(--line);border-radius:9px;background:#414141;min-width:0}
.player-ranking li.player-score{border-color:#f0baba;box-shadow:inset 3px 0 var(--team)}
.player-ranking .rank-number{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:6px;background:var(--team);color:white;font-weight:800}
.score-team{flex:1;min-width:0}
.score-team strong{display:block;font-size:14px;line-height:1.2}
.score-team small{display:block;color:var(--muted);font-size:11px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-result{font-size:12px;color:var(--muted)}
.has-correct .score-result{color:#a1e8b8}
.score-time{min-width:75px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.score-rule,.score-wait{font-size:11px;margin:8px 0 0;color:var(--muted)}
.score-wait{text-align:center}
@media(max-width:600px){
  .player-winner{gap:6px}
  .player-ranking li{gap:6px;padding:6px 8px}
  .player-ranking .rank-number{width:24px;height:25px;font-size:12px}
  .score-team strong{font-size:12px}.score-team small{font-size:9px}
  .score-result{font-size:10px;max-width:70px}
  .score-time{min-width:52px;font-size:11px}
  .score-rule,.score-wait{font-size:10px;margin-top:5px}
}
@media(max-height:700px){
  .player-winner{padding:7px;gap:3px}.player-winner h2{font-size:24px}
  .player-winner .eyebrow{font-size:8px}.player-winner .pill{font-size:10px;padding:3px 8px}
  .player-ranking li{padding:4px 8px;gap:6px}
  .player-ranking .rank-number{width:24px;height:24px;font-size:12px}
  .score-team small{display:none}
  .score-rule,.score-wait{font-size:10px;margin-top:4px}
}
@media(max-height:570px){
  .player-winner h2{font-size:22px}
  .player-winner p{font-size:11px;line-height:1.3}
  .player-ranking{gap:3px}
  .player-ranking li{padding:3px 6px}
  .player-ranking .rank-number{width:21px;height:21px;font-size:11px}
}
@media(max-height:500px){.player-scoreboard .score-wait{display:none}}
@media(max-height:500px) and (min-width:501px){
  body.live-player main[data-phase="placar"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr)}
  body.live-player main[data-phase="placar"] .page-title,body.live-player main[data-phase="placar"] .notice{grid-column:1/-1}
  .player-scoreboard{display:flex;flex-direction:column;justify-content:center}
  .player-ranking{gap:3px}.player-ranking li{padding:2px 5px}
  .score-team strong{font-size:10px}.score-result{font-size:9px;max-width:60px}
  .score-time{min-width:46px;font-size:10px}
  .player-scoreboard .section-heading .muted{display:none}
  body.live-player .player-scoreboard .section-heading{margin-bottom:4px}
  .player-scoreboard .score-rule{font-size:9px;line-height:1.2}
  .player-scoreboard .score-wait{display:none}
}
@media(max-width:380px) and (max-height:650px){
  body.live-player{--screen-gap:4px}
  body.live-player .question-body{gap:6px}
  body.live-player .question-body h2{font-size:16px}
  .player-winner{padding:4px}
  .player-winner h2{font-size:20px}
  .player-ranking li{padding-top:2px;padding-bottom:2px}
  .player-scoreboard>.button{min-height:26px;padding:4px 8px;font-size:10px}
}
/* Controle prepara a sala; o telão concentra a condução da partida. */
.room-roster{padding:22px;min-width:0;align-self:start}
.room-roster .section-heading{margin:0 0 16px}
.room-roster .section-heading h2{font-size:20px}
.room-roster>p{margin:0}
.management-layout .side{display:block;order:0}
body.projecting{height:100dvh;min-height:100svh;display:flex;flex-direction:column}
body.projecting .topline{height:4px;flex:none}
body.projecting .header{width:100%;flex:none;padding:5px 24px}
body.projecting #account{margin-top:0;font-size:11px}
body.projecting main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 24px}
body.projecting .page-title{margin:0;flex:none;align-items:center;gap:12px}
body.projecting .page-title h1{font-size:clamp(22px,3.7dvh,34px)}
body.projecting .page-title p{display:none}
body.projecting .title-actions{gap:8px}
body.projecting .stage-list{flex:none;margin:0;gap:5px}
body.projecting .stage-list li{padding:6px 10px;min-width:0;font-size:10px}
body.projecting .notice{margin:0;padding:6px 10px;flex:none}
.projector-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);gap:14px}
.projector-stage>.question-card{display:flex;flex-direction:column;min-height:0}
body.projecting .question-meta{padding:8px 16px;gap:8px;flex:none}
body.projecting .question-body{display:flex;flex:1;flex-direction:column;justify-content:center;gap:clamp(12px,2.4dvh,24px);padding:16px}
body.projecting .question-body h2{font-size:clamp(20px,3.6dvh,34px);line-height:1.2;margin:0}
body.projecting .answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.projecting .answer{min-width:0;min-height:54px;padding:10px;gap:8px;font-size:clamp(13px,2dvh,18px);line-height:1.2}
body.projecting .answer b{width:28px;min-width:28px;height:28px}
body.projecting .question-footer{padding:8px 16px;font-size:10px;flex:none}
body.projecting .question-footer>span:last-child{display:none}
.projector-results{min-width:0;display:flex;flex-direction:column;justify-content:center}
.projector-results .section-heading{margin:0 0 8px;gap:8px}
.projector-results .section-heading h2{font-size:18px}
.projector-results .section-heading .muted{font-size:10px}
body.projecting .host-ranking li{gap:8px;padding:7px 10px}
body.projecting .host-ranking .rank-number{width:28px;height:30px;font-size:14px}
body.projecting .host-ranking .ranking-person{display:block;font-size:10px}
body.projecting .host-ranking .time{min-width:56px;font-size:11px}
body.projecting .ranking-note{font-size:10px;margin:8px 0 0}
.projector-stage>.empty-state{min-height:0;padding:16px}
body.projecting .empty-state .big-number{font-size:clamp(48px,12dvh,100px)}
.projector-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 14px;flex:none}
.projector-next{display:flex;align-items:center;gap:10px;min-width:0;flex:1;font-size:11px}
.projector-next>span{flex:none}
.projector-next select{min-width:0;max-width:340px;width:100%;min-height:36px;padding:6px 10px;font-size:12px}
.round-status{font-size:13px}
.round-actions{display:flex;gap:8px;flex:none}
.round-actions .button{min-height:36px;padding:8px 14px;font-size:12px}
@media(max-width:900px){
  .projector-stage{grid-template-columns:minmax(0,1.6fr) minmax(170px,1fr);gap:10px}
  body.projecting .header{padding:4px 14px}
  body.projecting main{padding:10px 14px;gap:8px}
  body.projecting .stage-list,body.projecting .page-title .eyebrow{display:none}
  body.projecting .host-ranking .ranking-person{display:none}
  .projector-next{display:block}.projector-next>span{display:block;margin-bottom:3px}
  .projector-controls{gap:10px;padding:8px 10px}
  .round-actions .button{padding:8px 10px;font-size:11px}
}
@media(max-width:500px){
  body.projecting .header .event-label{display:none}
  body.projecting .header .brand{width:95px}
  body.projecting #account{gap:7px;font-size:10px;flex-wrap:wrap}
  body.projecting #account>span:not(.pill){max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.projecting .page-title h1{font-size:21px;line-height:1.1}
  body.projecting .title-actions{flex-direction:column;gap:4px}
  body.projecting .title-actions .pill{font-size:9px;padding:3px 7px}
  body.projecting .title-actions .button{font-size:10px;padding:5px 10px;min-height:28px}
  .projector-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  body.projecting .question-body{padding:10px;gap:10px}
  body.projecting .question-body h2{font-size:20px}
  body.projecting .answer{min-height:44px;font-size:12px;padding:6px}
  body.projecting .host-ranking{gap:3px}
  body.projecting .host-ranking li{padding:3px 8px}
  body.projecting .host-ranking .rank-number{width:23px;height:23px;font-size:12px}
  body.projecting .host-ranking li>div{display:flex;justify-content:space-between;align-items:center;gap:5px}
  body.projecting .host-ranking strong{font-size:12px}
  body.projecting .host-ranking small{font-size:9px}
  body.projecting .host-ranking .time{font-size:10px;min-width:45px}
  .projector-controls{flex-wrap:wrap;gap:7px}
  .projector-next{flex-basis:100%;display:flex}
  .projector-next>span{margin:0}
  .round-actions{flex:1;justify-content:flex-end}
  body.projecting .ranking-note{font-size:9px;margin-top:4px}
}
@media(max-height:600px) and (min-width:501px){
  body.projecting .header .brand{width:85px}
  body.projecting .event-label,body.projecting .stage-list,body.projecting .page-title .eyebrow{display:none}
  body.projecting .header{padding-top:2px;padding-bottom:2px}
  body.projecting main{gap:6px;padding:6px 12px}
  body.projecting .page-title h1{font-size:22px}
  body.projecting .title-actions .button{min-height:28px;padding:5px 10px;font-size:10px}
  body.projecting .title-actions .pill{padding:4px 8px;font-size:9px}
  body.projecting .question-meta{padding:4px 10px}
  body.projecting .question-body{padding:8px 10px;gap:8px}
  body.projecting .question-body h2{font-size:18px}
  body.projecting .answers{gap:6px}
  body.projecting .answer{min-height:36px;font-size:12px;padding:5px;gap:6px}
  body.projecting .answer b{width:22px;min-width:22px;height:22px}
  body.projecting .question-footer{padding:4px 10px}
  body.projecting .projector-results .section-heading{margin-bottom:4px}
  body.projecting .projector-results .section-heading h2{font-size:14px}
  body.projecting .host-ranking{gap:3px}
  body.projecting .host-ranking li{padding:3px 6px;gap:6px}
  body.projecting .host-ranking .rank-number{width:22px;height:22px;font-size:11px}
  body.projecting .host-ranking strong{font-size:12px}
  body.projecting .host-ranking small{font-size:9px}
  body.projecting .host-ranking .ranking-person{display:none}
  body.projecting .ranking-note{font-size:9px;line-height:1.2;margin-top:4px}
  .projector-controls{padding:5px 9px;gap:8px}
  .projector-next{display:flex}
  .projector-next>span{margin:0}
  .projector-next select{min-height:30px;padding:4px 7px}
  .round-actions .button{min-height:30px;padding:5px 9px;font-size:10px}
}
@media(max-height:400px) and (min-width:501px){
  body.projecting .header .brand{width:60px}
  body.projecting main{padding:4px 12px;gap:4px}
  body.projecting .page-title h1{font-size:18px;line-height:1.1}
  body.projecting .question-meta{padding:3px 8px;font-size:9px}
  body.projecting .clock{font-size:13px}
  body.projecting .question-body{padding:6px 8px;gap:6px}
  body.projecting .question-body h2{font-size:15px;line-height:1.15}
  body.projecting .answer{min-height:30px;font-size:10px;line-height:1.15;padding:4px}
  body.projecting .answer b{height:20px;width:20px;min-width:20px}
  body.projecting .question-footer{padding:3px 8px;font-size:9px}
  body.projecting .projector-results .section-heading{gap:5px;margin-bottom:3px}
  body.projecting .projector-results .section-heading h2{font-size:12px}
  body.projecting .projector-results .section-heading .muted{font-size:8px}
  body.projecting .host-ranking{gap:2px}
  body.projecting .host-ranking li{padding:2px 5px;gap:4px}
  body.projecting .host-ranking .rank-number{width:18px;height:18px;font-size:10px}
  body.projecting .host-ranking li>div{display:flex;justify-content:space-between;align-items:center;gap:4px}
  body.projecting .host-ranking strong{font-size:10px}
  body.projecting .host-ranking small{font-size:8px}
  body.projecting .host-ranking .time{font-size:9px;min-width:38px}
  body.projecting .ranking-note{display:none}
  body.projecting .empty-state h2{font-size:21px}
  body.projecting .empty-state p{font-size:11px;margin:4px 0}
  body.projecting .empty-state .big-number{font-size:48px}
}
.projector-final{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(12px,2vw,28px);align-items:center}
.projector-final .player-winner{height:100%;min-height:0;gap:14px;padding:24px;border-top-width:5px}
.projector-final .winner-medal{font-size:clamp(48px,10dvh,100px);line-height:1.2}
.projector-final .player-winner h2{font-size:clamp(30px,5dvh,54px);line-height:1.15;overflow-wrap:anywhere}
.projector-final .player-winner p{font-size:clamp(15px,2.6dvh,24px)}
.projector-final .player-scoreboard{min-width:0}
.projector-final .section-heading{margin:0 0 14px}
.projector-final .section-heading h2{font-size:clamp(20px,3dvh,30px)}
.projector-final .player-ranking{gap:clamp(5px,1.4dvh,12px)}
.projector-final .player-ranking li{padding:clamp(8px,1.7dvh,16px);gap:12px}
.projector-final .player-ranking .rank-number{width:38px;height:38px;font-size:18px}
.projector-final .score-team strong{font-size:clamp(15px,2.4dvh,22px)}
.projector-final .score-team small{display:block;font-size:12px}
.projector-final .score-result{font-size:14px}
.projector-final .score-time{font-size:18px;min-width:82px}
@media(max-width:700px){
  .projector-final{grid-template-columns:1fr;grid-template-rows:minmax(120px,1fr) auto;gap:12px}
  .projector-final .player-winner{padding:12px;gap:6px}
  .projector-final .winner-medal{font-size:44px}
  .projector-final .player-winner h2{font-size:30px}
  .projector-final .player-winner p{font-size:16px}
  .projector-final .section-heading{margin-bottom:8px;gap:8px}
  .projector-final .section-heading h2{font-size:20px}
  .projector-final .section-heading .muted{font-size:10px}
  .projector-final .player-ranking{gap:5px}
  .projector-final .player-ranking li{padding:7px;gap:7px}
  .projector-final .player-ranking .rank-number{width:27px;height:28px;font-size:13px}
  .projector-final .score-team strong{font-size:14px}
  .projector-final .score-team small{font-size:10px}
  .projector-final .score-result{font-size:11px;max-width:52px}
  .projector-final .score-time{font-size:12px;min-width:60px}
}
@media(max-height:600px) and (min-width:501px){
  .projector-final{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-rows:1fr;gap:12px}
  .projector-final .player-winner{padding:12px;gap:5px}
  .projector-final .winner-medal{font-size:40px}
  .projector-final .player-winner h2{font-size:28px}
  .projector-final .player-winner p{font-size:13px}
  .projector-final .section-heading{margin-bottom:6px}
  .projector-final .section-heading h2{font-size:18px}
  .projector-final .section-heading .muted{display:none}
  .projector-final .player-ranking{gap:3px}
  .projector-final .player-ranking li{padding:4px 6px;gap:6px}
  .projector-final .player-ranking .rank-number{width:24px;height:24px;font-size:12px}
  .projector-final .score-team strong{font-size:13px}
  .projector-final .score-team small{font-size:9px}
  .projector-final .score-result{font-size:10px;max-width:48px}
  .projector-final .score-time{font-size:11px;min-width:55px}
  .projector-final .score-rule{font-size:9px;line-height:1.2;margin-top:5px}
}
@media(max-height:400px) and (min-width:501px){
  .projector-final .player-ranking li{padding:2px 5px}
  .projector-final .player-ranking .rank-number{width:20px;height:20px;font-size:10px}
  .projector-final .score-team strong{font-size:12px;line-height:1.1}
  .projector-final .score-team small{font-size:8px;line-height:1.1}
  .projector-final .score-result{font-size:9px}
  .projector-final .score-time{font-size:10px}
  .projector-final .score-rule{font-size:8px;margin-top:3px}
}