/* Cams ao vivo (src/ui/cams-ui.js): botão CAM ao lado do chat, janelinha da cam e a TV da Sala de TV (lista e modo assistir) */
.cam-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.cam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--x-6b6f78); flex: none; }
.cam-btn.on .cam-dot { background: var(--c-warn); }
.cam-btn.live .cam-dot { background: var(--rar-mitico); box-shadow: 0 0 6px var(--rar-mitico); animation: cam-blink 1.6s ease-in-out infinite; }
.cam-btn.live { border-color: color-mix(in srgb, var(--rar-mitico) 60%, transparent); }
.cam-count { font-weight: 600; font-size: var(--fs-min); opacity: .85; }
@keyframes cam-blink { 50% { opacity: .35; } }

.cam-pop { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 12px 14px; display: grid; gap: 8px;
  background: var(--panel, var(--c-panel-2)); border: 1px solid var(--edge-2, color-mix(in srgb, var(--c-ink-light) 14%, transparent)); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, var(--x-000000) 50%, transparent); }
.cam-pop p { margin: 0; }
.cam-pop-head { display: flex; align-items: center; justify-content: space-between; }
.cam-x { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; padding: 2px 6px; }
.cam-field { display: grid; gap: 4px; font-size: 12px; }
.cam-field input { width: 100%; padding: 6px 8px; }
.cam-state { font-weight: 700; font-size: 12px; color: var(--text-dim, var(--x-9aa0a6)); }
.cam-state.wait { color: var(--c-warn); }
.cam-state.live { color: var(--rar-mitico); }
.cam-acts { display: flex; gap: 8px; justify-content: flex-end; }

.tv-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.tv-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tv-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; cursor: pointer;
  background: var(--inset, color-mix(in srgb, var(--x-000000) 25%, transparent)); color: inherit; border: 1px solid var(--edge-2, color-mix(in srgb, var(--c-ink-light) 12%, transparent)); border-radius: 10px; font: inherit; }
.tv-card:hover, .tv-card:focus-visible { border-color: var(--x-35dcb4); }
.tv-card canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.tv-card-main { display: grid; gap: 2px; min-width: 0; }
.tv-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-who, .tv-what { font-size: 12px; color: var(--text-dim, var(--x-9aa0a6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-card-side { display: grid; gap: 2px; justify-items: end; }
.tv-live { background: var(--rar-mitico); color: var(--c-ink-light); font-style: normal; font-size: var(--fs-min); font-weight: 800; padding: 1px 6px; border-radius: 4px; letter-spacing: .05em; }
.tv-empty { padding: 24px; text-align: center; color: var(--text-dim, var(--x-9aa0a6)); border: 1px dashed var(--edge-2, color-mix(in srgb, var(--c-ink-light) 14%, transparent)); border-radius: 10px; margin: 0; }
.tv-tip { margin: 10px 0 0; }
/* lives oficiais dos streamers na Sala de TV (bloco 2, 2026-11-01): abrem no player flutuante (live-pip.js) */
.tv-lives { margin-bottom: 12px; }
.tv-lives-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: var(--fw-bold) var(--fs-md) var(--font-title); letter-spacing: .06em; text-transform: uppercase; color: var(--c-gold-2); }
.tv-lives-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rar-mitico); box-shadow: 0 0 6px var(--rar-mitico); animation: cam-blink 1.6s ease-in-out infinite; }
.tv-lives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tv-live-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-edge-2); }
.tv-live-card.bonus { box-shadow: inset 0 0 0 1px var(--c-gold-3); }
.tv-live-card.watching { box-shadow: inset 0 0 0 1px var(--c-gold), inset 4px 0 0 var(--c-gold); }
.tv-live-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tv-live-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-live-main .ok { color: var(--c-ok); }

.tv-now { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.tv-now b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-stage { display: grid; grid-template-columns: 1fr 260px; gap: 10px; align-items: stretch; }
.tv-screen { position: relative; aspect-ratio: 16 / 10; background: var(--x-000000); border: 3px solid var(--c-panel-3); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x-35dcb4) 33.3%, transparent); }
.tv-screen canvas { display: block; width: 100%; height: 100%; }
.tv-msg { position: absolute; inset: auto 0 0 0; margin: 0; padding: 6px 10px; background: color-mix(in srgb, var(--x-000000) 70%, transparent); color: var(--c-ink-light); font-size: 12px; text-align: center; }
.tv-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.tv-sum { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 8px 10px; background: var(--inset, color-mix(in srgb, var(--x-000000) 25%, transparent)); border-radius: 10px; }
.tv-sum canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.tv-mon-name { font-size: 14px; }
.tv-sum dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 4px 0 0; width: 100%; font-size: var(--fs-min); }
.tv-sum dt { color: var(--text-dim, var(--x-9aa0a6)); }
.tv-sum dd { margin: 0; text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* chat da cam (quem assiste fala com quem transmite) */
.tv-chat { flex: 1; min-height: 150px; display: flex; flex-direction: column; background: var(--inset, color-mix(in srgb, var(--x-000000) 25%, transparent)); border-radius: 10px; overflow: hidden; }
.tv-chat-log { flex: 1; min-height: 0; max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 6px 8px; display: grid; align-content: start; gap: 3px; font-size: 12px; overflow-wrap: anywhere; }
.tv-msg-line { color: var(--c-shiny); }
.tv-msg-line .t { color: var(--text-dim, var(--x-9aa0a6)); font-size: var(--fs-min); }
.tv-msg-line b { color: var(--c-ink-light); }
.tv-msg-line.host b, .tv-host { color: var(--rar-mitico); }
.tv-host, .tv-adm { font-weight: 700; font-size: var(--fs-min); }
.tv-adm { color: var(--c-warn); }
.tv-msg-line.mine b { color: var(--x-5ef05e); }
.tv-chat-form { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--edge-2, color-mix(in srgb, var(--c-ink-light) 12%, transparent)); }
.tv-chat-form input { flex: 1; min-width: 0; padding: 4px 6px; }
@media (max-width: 760px) { .tv-stage { grid-template-columns: 1fr; } .tv-sum { justify-items: start; } .tv-chat-log { max-height: 180px; } }

/* /goto do administrador (cams-ui.js → watchIn): tela cheia com o mapa onde o jogador está */
.spec-window { position: fixed; inset: 0; z-index: 110; background: var(--x-000000); }
.spec-window .spec-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spec-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; color: var(--c-ink-light); font-size: 13px; background: linear-gradient(color-mix(in srgb, var(--x-000000) 80%, transparent), transparent); }
.spec-top .spec-stats { margin-left: auto; opacity: .9; }
/* /goto ao vivo (gm-visit.js): aviso de que o GM está no mapa, sem Pokémon e invulnerável */
.spec-top .spec-gm { flex-basis: 100%; order: 9; font-size: 12px; color: var(--c-gold); }
.spec-window .spec-canvas { cursor: crosshair; }
.spec-log { position: absolute; left: 12px; bottom: 12px; max-width: min(560px, 80%); list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; color: var(--c-ink-light); }
.spec-log li { background: color-mix(in srgb, var(--x-000000) 66.7%, transparent); padding: 2px 8px; border-radius: 6px; }
.spec-msg { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: var(--c-ink-light); font-size: 14px; text-shadow: 0 1px 3px var(--x-000000); }
.spec-msg[hidden] { display: none; }