/* Kit de reels */
.reels { padding-top: 84px; }
.abre .texto { margin-top: 16px; }
.escolha { margin-top: 20px; display: grid; gap: 8px; }
.escolha .campo { width: min(300px, 100%); background: var(--papel); cursor: text; }
.escolha .campo:focus { outline: 1px solid var(--acento-borda); }
.escolha select.pill { appearance: none; -webkit-appearance: none; padding-right: 26px; background-color: var(--papel); background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 13px) 11px, calc(100% - 8px) 11px; background-size: 5px 5px; background-repeat: no-repeat; }

/* lista de cidades, da que tem mais votos em jogo para a que tem menos */
.lista-reels { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.cid { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "pos nome v" "pos info info"; gap: 2px 8px; align-items: baseline; text-align: left; border: 0; border-radius: var(--r); background: var(--papel); padding: 8px 10px; cursor: pointer; font: 400 15px/19px var(--ui); color: var(--tinta); }
.cid:hover { background: var(--acento-3); }
.cid.sel { background: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento-borda); }
.cid__pos { grid-area: pos; font: 600 15px/19px var(--ui); color: #6b6b6b; font-variant-numeric: tabular-nums; }
.cid__nome { grid-area: nome; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cid__nome b { font-weight: 600; }
.cid__v { grid-area: v; font: 650 17px/19px var(--ui); font-variant-numeric: tabular-nums; }
.cid__info { grid-area: info; font-size: 12px; line-height: 16px; color: #4a4a4a; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cid .ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ponto.f1 { background: var(--f1); } .ponto.f2 { background: var(--f2); } .ponto.f3 { background: var(--f3); }
.selo { background: var(--cinza-3); border-radius: 3px; padding: 0 4px; }
.selo--pl { background: #0d0d0d; color: #fff; }
.cid.sel .selo { background: rgba(255, 255, 255, 0.65); }
.cid.sel .selo--pl { background: #0d0d0d; }
.mais-linha { margin: 12px 0 0; }

/* fotos e créditos */
.arquivo { position: relative; overflow: hidden; cursor: pointer; }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.campo--p { font-size: 14px; min-height: 24px; width: min(100%, 380px); margin-top: 6px; background: var(--papel); cursor: text; }
.fotos .nota { margin: 0 0 4px; }
.noticia--pl { margin-top: 10px; box-shadow: inset 4px 0 0 #0d0d0d; padding-left: 16px; }

.kit { padding: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
.kit .rotulo { white-space: normal; }
.kit__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.kit__cab .medio { max-width: 900px; }
.kit__cab .medio em { font-style: normal; }
.kit__grade { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: calc(2 * var(--gutter)); align-items: start; }

.roteiro-reel { background: var(--cinza-3); padding: 12px; }
.roteiro-reel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.roteiro-reel li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.roteiro-reel .tempo { font: 600 14px/18px var(--ui); font-variant-numeric: tabular-nums; }
.roteiro-reel .tempo small { display: block; font-weight: 400; color: #555; font-size: 12px; }
.roteiro-reel .tela { font: 500 15px/19px var(--ui); background: var(--papel); padding: 6px 8px; }
.roteiro-reel .fala { font: italic 400 17px/22px var(--texto); margin: 6px 0 0; }
.roteiro-reel .fonte { font: 400 11px/14px var(--ui); color: #555; margin: 4px 0 0; }
.roteiro-reel .fonte a { color: inherit; }
.dica { font: 400 15px/20px var(--texto); margin: 12px 0 0; }
.acoes-kit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }

/* reel: prévia tocável, controles e opções */
.reel { display: grid; gap: 10px; align-content: start; }
.reel__tela { position: relative; width: min(100%, 380px); }
.reel__tela canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #0d0d0d; cursor: pointer; }
.reel__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 34px; line-height: 84px; padding-left: 6px; cursor: pointer; }
.reel__play[hidden] { display: none; }
.reel__controles { display: flex; align-items: center; gap: 8px; width: min(100%, 380px); }
.reel__controles input[type="range"] { flex: 1; accent-color: var(--acento-borda); }
.reel__controles .num { font: 500 13px/1 var(--ui); color: #444; white-space: nowrap; }
.reel__opcoes { display: grid; gap: 8px; }
.reel__opcoes .nota { display: block; margin: 0 0 4px; }
.reel .pill:disabled { opacity: 0.7; cursor: progress; }
.reel__opcoes .pill { white-space: normal; text-align: left; }
.noticia { background: var(--papel); padding: 10px 12px; }
.noticia .nota { margin: 0; }
.noticia__resumo { font: 400 18px/24px var(--texto); margin: 6px 0; }

.videos .grade { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.videos .cartao { min-height: 120px; }
.videos .cartao__sub { font-size: 15px; line-height: 19px; }

.mensagem textarea { width: 100%; min-height: 150px; border: 0; padding: 10px; font: 400 16px/21px var(--texto); background: var(--papel); resize: vertical; }

.lista-regras { margin: 0; padding-left: 18px; display: grid; gap: 8px; max-width: 900px; font: 400 17px/22px var(--texto); }
.lista-regras b { font-weight: 650; }

@media (max-width: 1000px) { .kit__grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .reels { padding-top: 76px; } .reel__tela, .reel__controles { width: 100%; } }