/* Pages: Together (doors, chat, Love Mail), Memories (radio) and My Bear. */
.portas { display: grid; gap: 14px; margin-bottom: 8px; }
.porta-pagina { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); color: var(--carvao); text-decoration: none; }
.porta-pagina .ico { grid-row: span 2; --t: calc(16 * var(--k3, 3) * var(--d, 1px)); width: var(--t); height: var(--t); background-size: var(--t) var(--t); }
.porta-pagina:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sombra); }
.px-ico { display: block; --t: calc(16 * var(--k2, 2) * var(--d, 1px)); width: var(--t); height: var(--t); background: center / var(--t) var(--t) no-repeat; image-rendering: pixelated; }
.px-camera { background-image: url(/img/ui/ico-camera.png); }
.px-mic { background-image: url(/img/ui/ico-mic.png); }

/* ---------- chat */
.corpo-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); padding: 0 !important; overflow: hidden !important; min-height: 0; }
.chat-lista { list-style: none; margin: 0; padding: 14px 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; overscroll-behavior: contain; }
.msg { position: relative; max-width: 82%; min-width: 0; display: grid; gap: 2px; }
.msg.minha { align-self: flex-end; justify-items: end; }
.msg.dele { align-self: flex-start; justify-items: start; }
.msg-papel { display: grid; gap: 6px; width: fit-content; max-width: 100%; padding: 8px 12px; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); }
.msg.minha .msg-papel { background: var(--rosa); }
.msg.so-fig .msg-papel { background: none; border: 0; box-shadow: none; padding: 0; }
.msg-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-info { font-size: 12px; color: var(--chocolate); opacity: .8; }
.msg-reacoes { display: flex; gap: 4px; }
.reacao { font: 600 12px var(--f-px); padding: 1px 6px; background: var(--creme); border: 1px solid var(--carvao); }
.msg-menu { position: absolute; z-index: 5; bottom: 100%; display: flex; gap: 2px; padding: 4px; background: var(--creme); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); }
.msg.minha .msg-menu { right: 0; }
.msg-menu button { min-width: 44px; min-height: 40px; background: var(--branco); border: 1px solid var(--carvao); font: 600 13px var(--f-px); }
.msg-menu .apaga { color: var(--vermelho); }
.chat-envio { display: flex; align-items: flex-end; gap: 4px; padding: 8px; background: var(--creme); border-top: var(--px) solid var(--carvao); }
.chat-texto { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; background: var(--branco); border: var(--px) solid var(--carvao); font: 500 16px/1.4 var(--f-txt); }
.ico-btn { width: 44px; height: 44px; font: 600 18px var(--f-px); color: var(--rosa-forte); }
.chat-manda { padding: 8px 12px; }
.bandeja-figurinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; padding: 8px; max-height: 40vh; overflow: auto; background: var(--bege); border-top: var(--px) solid var(--carvao); }
.fig-opcao { display: grid; place-items: center; padding: 2px; background: var(--creme); border: 1px solid var(--carvao); min-height: 64px; }
.figurinha { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(2px 2px 0 var(--sombra)); }
.foto-anexo { display: block; width: min(260px, 62vw); height: auto; max-width: none; max-height: 300px; object-fit: contain; border: var(--px) solid var(--branco); box-shadow: 0 0 0 var(--px) var(--carvao), 3px 3px 0 3px var(--sombra); image-rendering: auto; transform: rotate(-1deg); }

.video-anexo { max-width: 100%; max-height: 320px; }
.grava { display: grid; justify-items: center; gap: 10px; }
.grava-onda { display: flex; align-items: center; gap: 3px; height: 36px; }
.grava-onda i { width: 4px; height: 4px; background: var(--rosa-forte); }
.grava-tempo { font: 600 20px var(--f-px); }
.confirma { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: repeating-conic-gradient(rgba(46, 43, 64, .38) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.confirma-caixa { width: min(100%, 360px); padding: 20px; display: grid; gap: 14px; text-align: center; }
.confirma-botoes { display: flex; justify-content: center; gap: 14px; }

/* ---------- Love Mail */
.mail-topo { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.cartas { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.carta-item { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); text-decoration: none; color: var(--carvao); text-align: center; }
.carta-item.nova { background: var(--rosa); }
.carta-item.trancada { background: var(--bege); }
.carta-item.apagadinha { opacity: .55; }
.carta-titulo { font: 600 14px var(--f-px); }
.carta-de, .carta-estado { font-size: 13px; color: var(--chocolate); }
.envelope { display: inline-block; background: url(/img/carta/envelope.png?v=1) 0 0 no-repeat; image-rendering: pixelated; }
.envelope-palco { position: relative; display: grid; place-items: center; min-height: 280px; flex: 1 0 auto; }

.lacre { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -30%); border-radius: 50%; background: none; border: 0; cursor: pointer; }
.lacre:focus-visible { outline: var(--px) dashed var(--rosa-forte); }
.centro { text-align: center; margin: 4px 0; }
.vazio { color: var(--chocolate); opacity: .8; }
.carta-trancada { display: grid; justify-items: center; gap: 10px; padding: 30px 0; }
.carta-trancada .envelope { margin: 16px 0; filter: grayscale(.4); }

.escreve { display: grid; gap: 14px; }
.escolhe-papel { display: flex; gap: 10px; flex-wrap: wrap; }
.papel-amostra { width: 48px; height: 48px; border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); }
.papel-amostra[aria-checked="true"] { outline: var(--px) dashed var(--rosa-forte); outline-offset: 3px; transform: translateY(-2px); }

.anexar { display: flex; gap: 12px; flex-wrap: wrap; }
.anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.anexos li { display: flex; align-items: center; gap: 4px; }
.anexos .foto-anexo { max-width: 120px; max-height: 120px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }


/* the five papers, all pixel patterns */
.carta-papel { padding: 18px 16px; border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); display: grid; gap: 10px; }
.carta-papel .campo input, .carta-papel .campo textarea { background: rgba(255, 255, 255, .7); }
.carta-corpo { font: 500 18px/1.6 var(--f-txt) !important; resize: vertical; }
.papel-creme { background: #FFFDF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='28' shape-rendering='crispEdges'%3E%3Crect y='27' width='4' height='1' fill='%23EADBC8'/%3E%3C/svg%3E") 0 0 / 8px 28px; }
.papel-rosa { background: #FDEEF1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='1' fill='%23F4C6CF'/%3E%3Crect width='1' height='16' fill='%23F4C6CF'/%3E%3C/svg%3E") 0 0 / 16px 16px; }
.papel-xadrez { background: #FFF7F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='4' height='8' fill='%23F4C6CF' fill-opacity='.5'/%3E%3Crect width='8' height='4' fill='%23F4C6CF' fill-opacity='.5'/%3E%3C/svg%3E") 0 0 / 16px 16px; }
.papel-floral { background: #FFFBF4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='1' fill='%23E58FA3'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23E58FA3'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23E58FA3'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23F6D678'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239EC48C'/%3E%3C/svg%3E") 0 0 / 24px 24px; }
.papel-noite { background: #3E3A5C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='1' height='1' fill='%23F6D678'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 0 0 / 32px 32px; color: var(--creme); }
.papel-noite .campo, .papel-noite.lida h3, .papel-noite .carta-assina { color: var(--creme); }
.papel-noite .campo input, .papel-noite .campo textarea { color: var(--carvao); }
.carta-papel.lida { gap: 12px; }
.carta-papel.lida h3 { font-size: 22px; }
.carta-papel.sobe { animation: carta-sobe 320ms steps(5) both; }
@keyframes carta-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.carta-texto { margin: 0; white-space: pre-wrap; font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.carta-assina { margin: 0; text-align: right; font-family: var(--f-px); color: var(--chocolate); }
.postal { justify-self: center; width: 176px; height: auto; border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); transform: rotate(2deg); }
.carta-papel.apagadinha { opacity: .6; filter: grayscale(.5); }
.responde { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.responde .dica { grid-column: 1 / -1; }
.respostas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.apaga-carta { margin-top: 14px; }

/* ---------- Our Radio */
.radio-topo { position: relative; display: grid; justify-items: center; gap: 6px; margin-bottom: 8px; }
.radio-img { width: calc(34 * var(--k4, 4) * var(--d, 1px)); height: calc(30 * var(--k4, 4) * var(--d, 1px)); image-rendering: pixelated; }
.radio-topo.tocando .radio-img { animation: radio-toca 900ms steps(2) infinite; }
@keyframes radio-toca { 50% { transform: translateY(-2px) rotate(-1deg); } }
.do-dia { display: grid; gap: 6px; margin: 6px 0 16px; padding: 12px; background: var(--branco); border: var(--px) dashed var(--rosa-forte); }
.do-dia-um { display: flex; align-items: center; gap: 10px; }
.do-dia-um span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.do-dia-um img { width: 48px; height: 48px; }
.radio-form { display: grid; gap: 12px; margin-bottom: 16px; }
.linha-pl { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-pl input { min-height: 44px; padding: 8px; background: var(--branco); border: var(--px) solid var(--carvao); font: 500 15px var(--f-txt); flex: 1; min-width: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtro { min-height: 36px; padding: 4px 12px; background: var(--creme); border: var(--px) solid var(--carvao); font: 700 13px var(--f-txt); }
.filtro[aria-pressed="true"] { background: var(--rosa); transform: translateY(-2px); box-shadow: 0 2px 0 var(--sombra); }
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ficha { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); }
.capa { width: 72px; height: 72px; object-fit: cover; border: var(--px) solid var(--carvao); image-rendering: auto; }
.sem-capa { display: grid; place-items: center; background: var(--rosa); font: 600 28px var(--f-px); }
.ficha-info { display: grid; gap: 4px; min-width: 0; }
.ficha-info p { margin: 0; overflow-wrap: anywhere; }
.ficha-titulo { font: 700 15px/1.35 var(--f-txt); }
.ficha-artista, .ficha-quem { font-size: 13px; color: var(--chocolate); }
.ficha-dedica { font-style: italic; }
.ficha-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-items: center; }
.ficha-botoes .botao-px { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.player-musica { width: 100%; border: 0; grid-column: 1 / -1; }
.player-musica.spotify { height: 152px; }
.player-musica.youtube { aspect-ratio: 16 / 9; height: auto; }

/* ---------- My Bear */
.meu-urso { display: grid; justify-items: center; gap: 2px; margin-bottom: 4px; }
.retrato-meu { padding: 6px; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); }
.retrato-meu img { display: block; }
.retrato-meu.pula img { animation: pulinho 480ms steps(6) 1; }
.ajustes { display: grid; gap: 12px; margin-top: 8px; }
.ajustes h3 { margin-top: 10px; }
.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; background: var(--branco); border: var(--px) solid var(--carvao); font: 500 16px var(--f-txt); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.instalar p { margin: 4px 0; }

/* ---------- pixel form controls (no system chevrons, pills or ticks) */
select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 8px 36px 8px 10px; border-radius: 0; background: var(--branco)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z' fill='%234A3F45'/%3E%3C/svg%3E") right 12px center / 14px 8px no-repeat;
  border: var(--px) solid var(--carvao); box-shadow: inset 2px 2px 0 var(--bege); font: 500 15px var(--f-txt); color: var(--carvao); flex: 1; min-width: 0; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; border: var(--px) solid var(--carvao); border-radius: 0; background: var(--branco); box-shadow: 2px 2px 0 var(--sombra); }
input[type="checkbox"]:checked { background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23C8434F'/%3E%3C/svg%3E") center / 14px 12px no-repeat; }
input[type="date"] { border-radius: 0; }

/* the voice-note player, drawn in pixels */
.tocador { display: flex; align-items: center; gap: 8px; width: min(240px, calc(100vw - 110px)); }
.tocador::before { content: ''; width: 16px; height: 16px; flex: none; background: url(/img/ui/ico-mic.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.tocador .tocador-botao { background: var(--rosa); }
.tocador-botao { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--creme); border: var(--px) solid var(--carvao); box-shadow: 2px 2px 0 var(--sombra); }
.tocador-botao i { width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h1v1h1v1h1v1H4v1H3v1H2v1H1z' fill='%234A3F45'/%3E%3C/svg%3E") 0 0 / 14px 14px; }
.tocador-botao.tocando i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v7H1zM4 0h2v7H4z' fill='%234A3F45'/%3E%3C/svg%3E"); }
.tocador-barra { flex: 1; height: 10px; background: var(--branco); border: var(--px) solid var(--carvao); position: relative; }
.tocador-barra b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rosa-forte); }
.tocador-tempo { font: 600 12px var(--f-px); min-width: 34px; text-align: right; }

/* ---------- the diary's right page beside the house */
.hoje-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hoje-topo img { width: 64px; height: 64px; }
.hoje-estado { margin: 0; font: 700 18px/1.35 var(--f-txt); color: var(--chocolate); }
.folha-corpo .hoje-topo + .mensagem-do-dia { max-width: none; }
.hoje-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; align-items: start; }
.hoje-cartao { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; padding: 12px; background: var(--branco); border: var(--px) solid var(--carvao);
  box-shadow: 3px 3px 0 var(--sombra); color: var(--carvao); text-decoration: none; font: 600 15px var(--f-px); }
.hoje-cartao .ico { grid-row: span 2; }
.hoje-sub { font: 500 13px var(--f-txt); color: var(--chocolate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.como ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.como li::marker { content: '♡ '; color: var(--rosa-forte); }

.msg-info { display: inline-flex; align-items: center; gap: 4px; }
.msg-mais { min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; background: none; border: 0; }
.msg-mais::before { content: '⋯'; display: grid; place-items: center; width: 30px; height: 22px; background: var(--creme); border: var(--px) solid var(--carvao); box-shadow: 2px 2px 0 var(--sombra); font: 600 16px/1 var(--f-px); color: var(--carvao); }
.msg-mais:hover::before, .msg-mais:focus-visible::before { background: var(--rosa); }
.msg-mais:focus-visible { outline: none; }

/* ---------- Movie Night: the picture in the little TV's frame on top, the chat below (or the picture full screen) */
.corpo-tv { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr); padding: 0 !important; overflow: hidden !important; }
.corpo-tv > div:empty:not(.tv-barra):not(.tv-midia):not(.tv-conversa) { display: none; }   /* the router's empty placeholder would shift the rows */
.tv-midia { padding: 18px 14px 10px; display: grid; justify-items: center; }
.tv-moldura { position: relative; width: min(100%, 720px); padding: 10px 10px 8px; margin-top: 28px; background: var(--creme);
  border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra);
  clip-path: polygon(0 6px, 2px 6px, 2px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 6px), 0 calc(100% - 6px)); overflow: visible; clip-path: none; }
.tv-moldura::before { content: ''; position: absolute; left: 50%; bottom: calc(100% - 2px); width: 99px; height: 24px; margin-left: -49px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='3' fill='%23F4C6CF'/%3E%3Crect x='29' y='0' width='3' height='3' fill='%23F4C6CF'/%3E%3Cpath d='M4 3h1v1h1v1h1v1h1v1h2v1H8V7H7V6H6V5H5V4H4zM29 3h-1v1h-1v1h-1v1h-1v1h-2v1h2V7h1V6h1V5h1V4h1z' fill='%234A3F45'/%3E%3Crect x='12' y='6' width='9' height='2' fill='%23F4C6CF'/%3E%3Crect x='14' y='6' width='5' height='2' fill='%234A3F45'/%3E%3C/svg%3E") 0 0 / 99px 24px; }
.tv-midia-antiga-antena { display: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='3' fill='%23F4C6CF' stroke='%234A3F45' stroke-width='0'/%3E%3Crect x='29' y='0' width='3' height='3' fill='%23F4C6CF'/%3E%3Cpath d='M4 3h1v1h1v1h1v1h1v1h2v1H8V7H7V6H6V5H5V4H4zM29 3h-1v1h-1v1h-1v1h-1v1h-2v1h2V7h1V6h1V5h1V4h1z' fill='%234A3F45'/%3E%3Crect x='12' y='6' width='9' height='2' fill='%23F4C6CF'/%3E%3C/svg%3E") 0 0 / 66px 16px; }
.tv-tela { position: relative; background: var(--carvao); border: var(--px) solid var(--carvao); overflow: hidden; }
.tv-video, .tv-yt, .tv-tela iframe { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: min(34vh, 250px); background: var(--carvao); border: 0; object-fit: contain; }
.tv-tela iframe { pointer-events: none; }   /* YouTube's own controls are hidden: ours steer it */
.tv-moldura.toque-no-video .tv-tela iframe { pointer-events: auto; }   /* …except when the browser wants a touch on the player itself */
.tv-dica-toque { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); margin: 0; padding: 4px 12px; z-index: 3; pointer-events: none; background: var(--creme); border: var(--px) solid var(--carvao); font: 600 14px var(--f-px); white-space: nowrap; }
.tv-moldura:fullscreen { width: 100%; height: 100%; padding: 0; clip-path: none; border: 0; background: #000; display: grid; grid-template-rows: 1fr auto; }
.tv-moldura:fullscreen .tv-tela { border: 0; } .tv-moldura:fullscreen .tv-video, .tv-moldura:fullscreen iframe { max-height: none; height: 100%; aspect-ratio: auto; }
.tv-controles { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.tv-c-botao { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 2px 2px 0 var(--sombra); }
.tv-c-botao i { width: 14px; height: 14px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h1v1h1v1h1v1H4v1H3v1H2v1H1z' fill='%234A3F45'/%3E%3C/svg%3E") 0 0 / 14px 14px; }
.tv-c-botao.tocando i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v7H1zM4 0h2v7H4z' fill='%234A3F45'/%3E%3C/svg%3E"); }
.tv-c-som i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h2V1h1V0h1v7H3V6H2V5H0zM5 2h1v3H5z' fill='%234A3F45'/%3E%3C/svg%3E"); }
.tv-c-som.mudo i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h2V1h1V0h1v7H3V6H2V5H0z' fill='%234A3F45'/%3E%3Cpath d='M5 2h1v1H5zM6 3h1v1H6zM5 4h1v1H5z' fill='%23C8434F'/%3E%3C/svg%3E"); }
.tv-c-cheia i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v1H1v2H0zM4 0h3v3H6V1H4zM0 4h1v2h2v1H0zM6 4h1v3H4V6h2z' fill='%234A3F45'/%3E%3C/svg%3E"); }
.tv-c-barra { flex: 1; height: 12px; position: relative; background: var(--branco); border: var(--px) solid var(--carvao); cursor: pointer; }
.tv-c-barra::before { content: ''; position: absolute; inset: -16px 0; }
.tv-c-barra:focus-visible { outline: var(--px) dashed var(--rosa-forte); outline-offset: 4px; }
.tv-c-barra b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rosa-forte); }
.tv-c-tempo { font: 600 12px var(--f-px); white-space: nowrap; text-align: right; color: var(--chocolate); }
.tv-moldura:fullscreen .tv-controles { padding: 8px 12px; background: var(--creme); }
.tv-selo { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; padding: 4px 12px; z-index: 3; white-space: nowrap;
  background: var(--rosa); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); font: 600 14px var(--f-px); animation: bilhete-entra 200ms steps(4) both; }
.tv-aviso { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 8px 12px; background: #FDE9EC; border: var(--px) solid var(--carvao); font-size: 14px; z-index: 2; }
.tv-aviso.leve { background: var(--creme); }
.tv-entrar { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 4; }
.tv-escolhe { width: min(100%, 720px); display: grid; gap: 12px; }
.tv-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .tv-opcoes { grid-template-columns: 1fr; } }
.tv-opcoes .botao-px { width: 100%; text-decoration: none; }
.botao-px.desligado { opacity: .55; cursor: default; }
a.botao-px { text-decoration: none; }
.tv-barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--rosa); border-top: var(--px) solid var(--carvao); border-bottom: var(--px) solid var(--carvao); }
.tv-info { flex: 1; min-width: 0; display: grid; }
.tv-titulo { margin: 0; font: 700 14px/1.3 var(--f-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-presenca { margin: 0; font-size: 13px; color: var(--chocolate); }
.tv-presenca.junto { color: var(--carvao); font-weight: 700; }
.tv-barra .botao-px { min-height: 44px; padding: 6px 12px; font-size: 13px; box-shadow: 3px 3px 0 var(--sombra); }
.tv-conversa { min-height: 0; display: grid; border-top: var(--px) dashed var(--rosa-forte); }
.chat-lista { scroll-padding-bottom: 16px; padding-bottom: 20px; }