/* =========================================================
   PODCAST (podcast.js) — aba ao lado do rádio WSQK, no canto da tela
   TV de tubo com a fita VHS, videocassete embaixo e a estante de fitas. Prefixo .pod-
   Celular: bloco "PODCAST" no fim do mobile.css.
   ========================================================= */

/* ---------- abas Rádio | Podcast (teclas do aparelho) ---------- */
.radio-float .pod-tabs.radio-body { display: flex; gap: 4px; padding: 8px 12px 0; }
.pod-tabs [role="tab"] { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 5px; color: var(--muted); font: 700 11px var(--font-small); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.pod-tabs [role="tab"][aria-selected="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: linear-gradient(var(--h1), var(--h2) 50%, var(--h3) 51%, var(--h4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.pod-tabs [role="tab"]:hover { filter: brightness(1.2); }
.pod-led { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #4a3f48; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7); }
.radio-playing #pod-tab-radio .pod-led, .pod-tocando #pod-tab-pod .pod-led { background: #ff3d5e; box-shadow: 0 0 6px #ff3668; }

/* ---------- o painel ---------- */
.radio-float .pod-body { padding: 10px 12px 12px; }
.pod-tv { position: relative; padding: 6px; border-radius: 9px; background: linear-gradient(#26222d, #121016); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45); }
.pod-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px / 10px; background: #000; box-shadow: 0 0 0 2px #050406, inset 0 0 18px rgba(0, 0, 0, 0.9); }
.pod-screen[hidden] { display: none; }
/* sem filtro CSS aqui: brilho e contraste já saem prontos do podcast.js (filtro redesenhado 30×/s pesa no celular) */
.pod-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* linhas da TV, cantos escuros e o reflexo do vidro */
.pod-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 40%); }
.pod-osd { position: absolute; z-index: 1; color: #f2f2f2; font: 15px/1 var(--font-crt); letter-spacing: 0.06em; text-shadow: 1px 0 rgba(255, 0, 40, 0.6), -1px 0 rgba(0, 200, 255, 0.6), 0 0 3px rgba(0, 0, 0, 0.8); white-space: nowrap; pointer-events: none; }
.pod-osd-tl { top: 6px; left: 8px; }
.pod-osd-tr { top: 6px; right: 8px; }
.pod-osd-bl { bottom: 5px; left: 8px; font-size: 12px; line-height: 1.05; white-space: pre; }
.pod-osd-br { bottom: 5px; right: 8px; font-size: 13px; }
.pod-pisca { animation: podPisca 1.2s steps(1) infinite; }
@keyframes podPisca { 50% { opacity: 0; } }
/* legendas "CC" da TV: letra branca em tarja preta */
.pod-cc { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 27px; display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.pod-cc[hidden] { display: none; }
.pod-cc span { max-width: 100%; padding: 1px 4px 0; overflow: hidden; color: #fff; font: 14px/1.1 var(--font-crt); white-space: nowrap; background: rgba(0, 0, 0, 0.84); }
.pod-cc span[hidden] { display: none; }
.pod-cc .pod-cc-sonda { position: absolute; left: 0; top: 0; padding: 0; visibility: hidden; }
/* tela azul do videocassete: carregando, sem sinal, esperando o toque, fim da fita */
.pod-azul { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; color: #fff; background: #1537c9; font-family: var(--font-crt); }
.pod-azul[hidden] { display: none; }
.pod-azul p { margin: 0; }
.pod-azul-t { font-size: 22px; letter-spacing: 0.1em; text-shadow: 2px 2px 0 rgba(0, 0, 40, 0.45); }
.pod-azul-s { min-height: 1em; font-size: 15px; opacity: 0.92; }
.pod-azul-bar { display: none; width: 70%; height: 8px; padding: 1px; border: 1px solid #fff; }
.pod-azul-load .pod-azul-bar { display: block; }
.pod-azul-bar i { display: block; width: 0; height: 100%; background: #fff; transition: width 0.15s linear; }

/* ---------- a estante de fitas (episódios) ---------- */
.pod-estante { aspect-ratio: 4 / 3; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 10px; background: repeating-linear-gradient(to bottom, #2b1c12 0 44px, #1a1009 44px 48px); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8); }
.pod-estante[hidden] { display: none; }
.pod-estante-t { margin: 0 0 6px; color: #d8c090; font: 14px/1 var(--font-crt); letter-spacing: 0.08em; text-transform: uppercase; }
.pod-fitas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pod-fita { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; min-height: 40px; padding: 5px 8px 7px; overflow: hidden; border: 1px solid #000; border-radius: 3px; text-align: left; color: #1c1c1c; cursor: pointer; background: linear-gradient(90deg, #111 0 10px, #ece6d2 10px calc(100% - 10px), #111 calc(100% - 10px)); box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.pod-fita:hover { filter: brightness(1.08); }
.pod-fita[aria-current="true"] { outline: 2px solid #ff3d5e; outline-offset: -2px; }
.pod-fita-n { grid-row: 1 / 3; padding-left: 8px; color: #b3261e; font: 18px/1 var(--font-crt); }
.pod-fita-t { overflow: hidden; font: 14px/1.15 var(--font-paint); text-overflow: ellipsis; white-space: nowrap; }
.pod-fita-s { color: #5a5446; font: 12px/1 var(--font-crt); }
.pod-fita i { position: absolute; left: 10px; bottom: 2px; height: 2px; width: calc((100% - 20px) * var(--p, 0)); background: #b3261e; }

/* ---------- a barra da fita, o nome e o videocassete ---------- */
.pod-seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 16px; margin: 8px 0 0; padding: 0; background: transparent; cursor: pointer; --p: 0%; }
.pod-seek:disabled { cursor: default; opacity: 0.5; }
.pod-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--p), rgba(255, 255, 255, 0.18) var(--p)); }
.pod-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--p), rgba(255, 255, 255, 0.18) var(--p)); }
.pod-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 14px; margin-top: -5px; border: 1px solid #000; border-radius: 2px; background: #e9e4d8; }
.pod-seek::-moz-range-thumb { width: 8px; height: 14px; border: 1px solid #000; border-radius: 2px; background: #e9e4d8; }
.pod-info { margin: 5px 0 0; overflow: hidden; color: var(--text); font: 12px/1.3 var(--font-small); white-space: nowrap; text-overflow: ellipsis; }
.pod-info-n { color: var(--gold); font: 15px/1 var(--font-crt); letter-spacing: 0.04em; }
.pod-info-d { color: var(--muted); font-size: 11px; }
.pod-deck { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.pod-deck-sp { flex: 1 1 0; min-width: 0; }
.pod-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 34px; height: 30px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 5px; color: #fff; font: 700 12px/1 var(--font-ui); background: linear-gradient(#4a405d, #261d36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.3); cursor: pointer; }
.pod-btn small { font: 700 9px/1 var(--font-small); opacity: 0.85; }
.pod-back, .pod-fwd { min-width: 0; padding: 0 5px; }
.pod-back span, .pod-fwd span { font-size: 8px; letter-spacing: -1px; }
.pod-btn:hover:not(:disabled) { filter: brightness(1.25); }
.pod-btn:disabled { opacity: 0.45; cursor: default; }
.pod-play { min-width: 44px; font-size: 13px; }
.pod-play.pod-on { background: linear-gradient(var(--g1), var(--g2) 50%, var(--g3) 51%, var(--g4)); border-color: var(--gb); }
.pod-mini { min-width: 29px; padding: 0 4px; font-size: 11px; }
.pod-mini[aria-pressed="false"] { color: rgba(255, 255, 255, 0.45); text-decoration: line-through; }
.pod-mini[aria-expanded="true"] { background: linear-gradient(var(--h1), var(--h2) 50%, var(--h3) 51%, var(--h4)); }
.pod-vol { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); font: 13px/1 var(--font-crt); letter-spacing: 0.06em; }
.pod-vol[hidden] { display: none; }
.pod-vol input { flex: 1; min-width: 0; margin: 0; accent-color: var(--teal); cursor: pointer; }
.pod-vol output { flex: 0 0 34px; text-align: right; color: var(--text); }
.pod-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- rádio encolhido: a luzinha acende com o podcast e o aviso aparece ao lado ---------- */
.pod-playing .radio-open-led { background: #f94872; box-shadow: 0 0 8px #ff3668, 0 0 16px rgba(255, 54, 104, 0.5); }
.pod-chama .radio-open { animation: podChama 1.6s ease-in-out infinite; }
@keyframes podChama { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 6px rgba(255, 61, 94, 0.35), 0 6px 18px rgba(0, 0, 0, 0.55); } }
.pod-aviso { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 2; display: flex; align-items: center; gap: 6px; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: 12px/1.25 var(--font-small); background: var(--panel); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); }
.pod-aviso[hidden] { display: none; }
.pod-aviso-t { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.pod-aviso-t span { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.pod-aviso button { flex: 0 0 auto; min-height: 30px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 5px; color: #fff; font: 700 11px var(--font-ui); background: linear-gradient(#4a405d, #261d36); cursor: pointer; }
.pod-aviso .pod-aviso-x { min-width: 30px; padding: 0; background: transparent; border-color: transparent; color: var(--muted); }
/* aberto com o rádio "espiando" (bolinha clicada) o aviso não precisa aparecer */
.radio-float:not(.radio-mini).radio-peek .pod-aviso { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pod-pisca, .pod-chama .radio-open { animation: none; }
  .pod-azul-bar i { transition: none; }
}

/* ---------- Hawkins: o mesmo aparelho preto do rádio (teclas, visor âmbar) ---------- */
.theme-hawkins #site .radio-float .pod-tabs.radio-body { padding: 8px 8px 0; }
.theme-hawkins #site .radio-float .pod-body { padding: 10px 12px 12px; }
.theme-hawkins #site .pod-tabs [role="tab"] { height: 26px; border: 1px solid #000; border-radius: 4px; color: #b9b3a6; font: 17px/1 var(--font-crt); letter-spacing: 0.08em; background: linear-gradient(#3b3e44, #222428); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 0 #000; }
.theme-hawkins #site .pod-tabs [role="tab"][aria-selected="true"] { color: #ffc764; text-shadow: 0 0 6px rgba(255, 180, 70, 0.55); background: linear-gradient(#18171a, #0e0d0f); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 0 #000; transform: translateY(1px); }
.theme-hawkins #site .pod-tv { background: linear-gradient(#2a2b30, #111215); }
.theme-hawkins #site .pod-info { color: #e9e4d8; }
.theme-hawkins #site .pod-info-n { color: #ffc764; }
.theme-hawkins #site .pod-info-d { color: #9a9486; }
.theme-hawkins #site .pod-seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffc764 var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
.theme-hawkins #site .pod-seek::-moz-range-track { background: linear-gradient(90deg, #ffc764 var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
.theme-hawkins #site :is(.pod-btn, .pod-aviso button:not(.pod-aviso-x)) { border: 1px solid #000; color: #f1ebdd; background: linear-gradient(#3b3e44, #222428); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 #000; }
.theme-hawkins #site .pod-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 #000; }
.theme-hawkins #site .pod-play.pod-on { background: linear-gradient(#b8412f, #8e2c1f); border-color: #3d110b; }
.theme-hawkins #site .pod-mini[aria-expanded="true"] { color: #ffc764; background: linear-gradient(#18171a, #0e0d0f); }
.theme-hawkins #site .pod-vol { color: #9a9486; }
.theme-hawkins #site .pod-vol input { accent-color: #ffc764; }
.theme-hawkins #site .pod-vol output { color: #ffc764; }
.theme-hawkins #site .pod-aviso { border-color: #000; color: #e9e4d8; background: linear-gradient(#2d2f33, #1c1d20); }
.theme-hawkins #site .pod-aviso-t span { color: #b9b3a6; }
.theme-hawkins #site .radio-float :is(.pod-btn, .pod-tabs button, .pod-seek, .pod-vol input, .pod-fita, .pod-aviso button):focus-visible { outline-color: #ffc764; }

/* ---------- Mundo Invertido: o mesmo aparelho, gasto e avermelhado ---------- */
.theme-upside .pod-tv { background: linear-gradient(#1a0c10, #080305); box-shadow: inset 0 1px 0 rgba(255, 120, 120, 0.08), 0 2px 6px rgba(0, 0, 0, 0.6); }
.theme-upside .pod-azul { background: #3a0d18; }
.theme-upside .pod-estante { background: repeating-linear-gradient(to bottom, #1c0e10 0 44px, #0d0507 44px 48px); }
.theme-upside .pod-fita { background: linear-gradient(90deg, #0b0b0b 0 10px, #b9b3a4 10px calc(100% - 10px), #0b0b0b calc(100% - 10px)); }