/* ==========================================================================
   GALIZA — folha única de estilo. Serve TODAS as páginas.
   Para mudar o site inteiro, mexa no bloco :root.
   Índice:
     [0] paleta   [1] reset/fundo   [2] ruído CRT   [3] tipografia
     [4] links    [5] esqueleto     [6] nav         [7] módulos
     [8] terminal [9] fendas        [10] imagens    [11] vídeo
     [12] rádio   [13] chat         [14] widgets    [15] janelas
     [16] mesa    [17] rodapé       [18] telas
   ========================================================================== */

/* [0] ------------------------------------------------------------- PALETA */
:root{
  --asfalto:#0a0c0b;
  --asfalto-fundo:rgba(4,6,5,.88);
  --asfalto-caixa:rgba(9,12,10,.84);

  --musgo:#c9f5da;          /* texto primário   */
  --musgo-palido:#96bda6;   /* legendas         */
  --musgo-escuro:#46714f;   /* bordas           */
  --toxico:#5fff3e;         /* verde terminal   */

  --crepusculo:#dd7dff;     /* links, destaques */
  --ourple:#7a1aff;

  --tartaro:#ff4040;        /* avisos, carne    */
  --arterial:#a30606;

  --osso:#f6f6ee;

  --mono:'JetBrains Mono','DejaVu Sans Mono','Courier New',Courier,monospace;
  --corpo-tam:15px;

  --borda:1px solid var(--musgo-escuro);
  --borda-arterial:1px solid var(--arterial);
  --largura-crt:1080px;
  --altura-radio:64px;      /* altura da barra fixa da rádio */
  --logo-alt:84px;          /* altura do logo no cabeçalho */

  --op-scanline:.8;
  --op-grao:.04;
  --op-fundo:.34;
}

/* TRÊS ESTADOS DE MOVIMENTO
   1. sobrio        -> o visitante desligou o ruído na mão. Manda em tudo.
   2. ruido-total   -> o visitante EXIGE o ruído, mesmo com o sistema pedindo calma.
   3. nenhum dos dois -> obedece o sistema operacional.

   Windows 11 vem com "efeitos de animação" DESLIGADO em muitas máquinas
   (Configurações > Acessibilidade > Efeitos visuais). Sem o estado 2, o site
   inteiro ficaria parado sem explicação. */
html.sobrio{ --op-scanline:0; --op-grao:0; --op-fundo:.12; }
html.sobrio *{ animation:none !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  html:not(.ruido-total) *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}

/* [1] ------------------------------------------------- RESET E FUNDO
   Trocar o fundo = trocar midia/mosaico-bg.jpg. Intensidade = --op-fundo. */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    linear-gradient(rgba(6,9,7,.90), rgba(6,9,7,.94)),
    url('midia/mosaico-bg.jpg') center top / cover fixed no-repeat,
    var(--asfalto);
  color:var(--musgo); font-family:var(--mono); font-size:var(--corpo-tam);
  line-height:1.6; cursor:crosshair; overflow-x:hidden;
  padding-bottom:var(--altura-radio);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url('midia/mosaico-bg.jpg') center top / cover no-repeat;
  opacity:var(--op-fundo); filter:saturate(145%) contrast(115%); mix-blend-mode:soft-light;
}

/* [2] --------------------------------------------------------- RUÍDO CRT */
.grao{
  position:fixed; inset:0; z-index:99998; pointer-events:none; opacity:var(--op-grao);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size:140px 140px; animation:grao 700ms steps(4) infinite; mix-blend-mode:screen;
}
@keyframes grao{
  0%,100%{transform:translate(0,0);} 25%{transform:translate(-3px,2px);}
  50%{transform:translate(2px,-3px);} 75%{transform:translate(-2px,-2px);}
}
body::after{
  content:" "; position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.22) 50%),
    linear-gradient(90deg, rgba(255,0,0,.05), rgba(0,255,0,.02), rgba(0,0,255,.05));
  background-size:100% 4px, 6px 100%;
  opacity:var(--op-scanline); animation:crt-flicker .15s infinite;
}
@keyframes crt-flicker{ 0%{opacity:.98;} 50%{opacity:1;} 100%{opacity:.99;} }
.varredura{
  position:fixed; left:0; right:0; top:0; height:110px; z-index:99997; pointer-events:none;
  background:linear-gradient(to bottom, rgba(95,255,62,0) 0%, rgba(95,255,62,.05) 55%, rgba(221,125,255,.08) 100%);
  animation:varre 7.5s linear infinite;
}
@keyframes varre{ 0%{transform:translateY(-120px);} 100%{transform:translateY(105vh);} }

/* [3] --------------------------------------------------------- TIPOGRAFIA */
h1,h2,h3,h4{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; margin:0 0 .6em 0; color:var(--osso);
}
h1{ font-size:30px; line-height:1.05; }
h2{ font-size:20px; color:var(--toxico); text-shadow:0 0 14px rgba(95,255,62,.28); }
h3{ font-size:15px; color:var(--crepusculo); }
h4{ font-size:13px; color:var(--crepusculo); letter-spacing:.18em; }
.desalinhado > *:nth-child(odd){ transform:translateX(-6px) rotate(-.4deg); }
.desalinhado > *:nth-child(even){ transform:translateX(9px) rotate(.3deg); }
p{ margin:0 0 1em 0; max-width:74ch; }
small,.legenda{ font-size:12.5px; color:var(--musgo-palido); letter-spacing:.03em; }
hr{ border:0; border-top:1px dashed var(--musgo-escuro); margin:26px 0; }
code{ color:var(--toxico); background:#000; padding:0 4px; border:1px solid var(--musgo-escuro); }
.centro{ text-align:center; }
.etiqueta{ font-size:11.5px; letter-spacing:.22em; color:var(--tartaro); text-transform:uppercase; }

/* [4] -------------------------------------------------------------- LINKS */
a{
  color:var(--crepusculo); text-decoration:none;
  border-bottom:1px dotted var(--crepusculo); cursor:crosshair;
  transition:color .1s linear, text-shadow .1s linear, transform .05s linear;
}
a:hover{
  color:var(--toxico); border-bottom-color:var(--tartaro);
  text-shadow:1px 0 var(--tartaro), -1px 0 var(--crepusculo); transform:translate(1px,-1px);
}
a:active{ color:var(--tartaro); transform:translate(-2px,2px); }
a:focus-visible{ outline:1px dashed var(--toxico); outline-offset:2px; }
@keyframes textGlitch{
  0%  {text-shadow:2px -2px 0 var(--crepusculo), -2px 2px 0 var(--toxico);}
  15% {text-shadow:-2px 2px 0 var(--crepusculo), 2px -2px 0 var(--toxico); transform:skewX(1deg);}
  16% {text-shadow:none; transform:none;}
  100%{text-shadow:2px -2px 0 var(--crepusculo), -2px 2px 0 var(--toxico);}
}
.glitch-title:hover{ animation:textGlitch .3s infinite linear alternate-reverse; }

*{ scrollbar-width:thin; scrollbar-color:var(--crepusculo) #121a15; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#121a15; border-left:1px solid var(--musgo-escuro); }
::-webkit-scrollbar-thumb{ background:var(--crepusculo); border:1px solid #000; box-shadow:inset 0 0 0 1px var(--ourple); }
::-webkit-scrollbar-thumb:hover{ background:var(--tartaro); }

/* [5] ----------------------------------------------------------- ESQUELETO */
.crt{ max-width:var(--largura-crt); margin:0 auto; padding:18px 20px 60px 20px; }
.crt.largo{ max-width:1400px; }

.marquee-broadcast{
  white-space:nowrap; overflow:hidden; background:#000; color:var(--tartaro);
  border-top:1px solid var(--arterial); border-bottom:1px solid var(--arterial);
  font-size:13px; letter-spacing:.14em; padding:4px 0;
}
.marquee-broadcast span{ display:inline-block; padding-left:100%; animation:marqueeRun 28s linear infinite; }
.marquee-broadcast:hover span{ animation-play-state:paused; }
@keyframes marqueeRun{ 0%{transform:translate(0,0);} 100%{transform:translate(-100%,0);} }

header.membrana{
  position:relative; border:var(--borda); border-left:3px solid var(--tartaro);
  background:repeating-linear-gradient(180deg, rgba(95,255,62,.03) 0 2px, transparent 2px 4px), var(--asfalto-caixa);
  padding:16px 18px 14px 18px; margin:14px 0 10px 0;
  animation:membranaFlicker 6s infinite steps(1);
}
@keyframes membranaFlicker{
  0%,92%,100%{box-shadow:none;}
  93%{box-shadow:inset 0 0 40px rgba(221,125,255,.18);}
  95%{box-shadow:inset 0 0 60px rgba(255,64,64,.16);}
}
header.membrana .assinatura{ font-size:12.5px; color:var(--musgo-palido); letter-spacing:.2em; }

.divisor{
  height:6px; margin:20px 0; border:0; opacity:.8;
  background:repeating-linear-gradient(90deg,
    var(--crepusculo) 0 4px, var(--toxico) 4px 8px, var(--tartaro) 8px 12px, #000 12px 18px);
  background-size:36px 100%; animation:corre 1.4s linear infinite;
}
@keyframes corre{ from{background-position:0 0;} to{background-position:36px 0;} }

/* [6] ------------------------------------------------ NAVEGAÇÃO RIZOMÁTICA */
nav.rizoma{ margin:0 0 16px 0; }
nav.rizoma ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; border:1px dashed var(--musgo-escuro); }
nav.rizoma li{ flex:1 1 auto; }
nav.rizoma a{
  display:block; text-align:center; padding:8px 10px; font-size:12.5px; letter-spacing:.06em;
  border:0; border-right:1px dashed var(--musgo-escuro); color:var(--musgo); background:rgba(8,12,9,.88);
}
nav.rizoma li:last-child a{ border-right:0; }
nav.rizoma a:hover{ background:var(--arterial); color:var(--osso); text-shadow:none; transform:none; }
nav.rizoma a.aqui{ color:var(--toxico); background:#111a13; box-shadow:inset 0 -2px 0 var(--crepusculo); }
nav.rizoma a.aqui::before{ content:"▓ "; color:var(--tartaro); }

/* segunda linha do rizoma: os nós que não cabem no menu principal */
.rizoma-sub{
  display:flex; flex-wrap:wrap; gap:0 14px; align-items:center;
  margin:6px 0 0 0; font-size:11.5px; letter-spacing:.1em; color:var(--musgo-escuro);
}
.rizoma-sub a{ border-bottom:1px dotted var(--musgo-escuro); color:var(--musgo-palido); }
.rizoma-sub a:hover{ color:var(--toxico); border-bottom-color:var(--tartaro); }
.rizoma-sub a.aqui{ color:var(--toxico); border-bottom-color:var(--crepusculo); }

.salto{
  display:inline-block; margin:8px 6px 0 0; border:1px solid var(--crepusculo);
  background:#000; color:var(--crepusculo); padding:5px 11px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; cursor:crosshair;
}
.salto:hover{ background:var(--crepusculo); color:#000; }

/* barrinha de carregamento da navegação sem recarregar */
.carga{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:100002;
  background:linear-gradient(90deg,var(--crepusculo),var(--toxico));
  transition:width .25s ease, opacity .3s ease; opacity:0;
}
.carga.viva{ opacity:1; }

/* [7] ------------------------------------------------------------ MÓDULOS */
.grade{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.col-larga{ flex:2 1 560px; min-width:320px; }
.col-fina{ flex:0 1 270px; min-width:230px; }

.modulo{ border:var(--borda); background:var(--asfalto-caixa); padding:12px 14px; margin:0 0 14px 0; position:relative; }
.modulo > h2{ margin-top:0; }
.modulo::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px;
  background:linear-gradient(135deg, transparent 50%, var(--tartaro) 50%);
}
.modulo.alerta{ border:var(--borda-arterial); border-left:4px solid var(--tartaro); }

.barra-titulo{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,rgba(24,36,27,.95),rgba(8,12,9,.95));
  border-bottom:1px solid var(--musgo-escuro);
  margin:-12px -14px 10px -14px; padding:5px 8px;
  font-size:12px; letter-spacing:.12em; color:var(--musgo-palido); text-transform:uppercase;
}
.botao-x{
  width:17px; height:16px; line-height:14px; text-align:center;
  border:1px solid var(--musgo-escuro); background:#000; color:var(--tartaro);
  font-size:11px; cursor:crosshair; font-family:var(--mono); padding:0;
}
.botao-x:hover{ background:var(--tartaro); color:#000; }

/* [8] ------------------------------------------------------ TERMINAL .TXT */
.terminal{
  background:var(--asfalto-fundo); border:var(--borda-arterial); color:var(--musgo);
  font-family:var(--mono); font-size:13.5px; padding:12px 14px; height:230px;
  overflow-y:scroll; overflow-x:hidden; white-space:pre-wrap; word-break:break-word;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9);
}
.terminal.baixa{ height:170px; }
.terminal b{ color:var(--toxico); font-weight:700; }
.terminal .data{ color:var(--crepusculo); }
.terminal .sangue{ color:var(--tartaro); font-weight:700; }
.prompt::after{ content:"█"; color:var(--toxico); animation:pisca 1s steps(1) infinite; }
@keyframes pisca{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* [9] ------------------------------------------------------ FENDA / ZÍPER */
.fenda{ border:1px double var(--musgo-escuro); background:var(--asfalto-fundo); margin:0 0 12px 0; }
.fita{
  display:block; width:100%; text-align:left;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--musgo); cursor:crosshair; border:0; border-bottom:1px solid transparent;
  padding:10px 12px 10px 34px; position:relative;
  background:
    repeating-linear-gradient(90deg, var(--musgo-escuro) 0 3px, transparent 3px 7px) left top / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--musgo-escuro) 0 3px, transparent 3px 7px) left bottom / 100% 2px no-repeat,
    linear-gradient(180deg,#131b11,#0a0d0b);
}
.fita::before{
  content:"⌥"; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--tartaro); font-size:14px; transition:transform .35s ease;
}
.fita:hover{ color:var(--toxico); letter-spacing:.16em; }
.fenda.aberta > .fita{ color:var(--osso); border-bottom:1px solid var(--arterial); }
.fenda.aberta > .fita::before{ transform:translateY(-50%) rotate(90deg); color:var(--toxico); }
.fenda-corpo{ max-height:0; overflow:hidden; transition:max-height .8s cubic-bezier(.25,1,.5,1); border-left:2px solid var(--arterial); }
.fenda.aberta > .fenda-corpo{ max-height:40000px; }
.fenda-corpo > .interior{ padding:14px; }

/* [10] ------------------------------------------------------------ IMAGENS */
.pb{
  filter:grayscale(100%) contrast(185%) brightness(.95);
  display:block; max-width:100%; height:auto;
  border:1px solid var(--musgo-escuro); background:#000;
  transition:filter .12s steps(2), transform .12s steps(2);
}
.pb:hover{
  filter:grayscale(0%) contrast(225%) saturate(270%) hue-rotate(65deg) brightness(1.15);
  transform:translate(-2px,1px) scale(1.02);
  animation:piscaGlitch .28s steps(2) infinite;
}
@keyframes piscaGlitch{
  0%,100%{filter:grayscale(0%) contrast(240%) hue-rotate(65deg) saturate(300%);}
  50%    {filter:grayscale(0%) contrast(240%) hue-rotate(285deg) saturate(300%);}
}
figure{ margin:0 0 14px 0; }
figcaption{ font-size:12px; color:var(--musgo-palido); padding-top:5px; letter-spacing:.04em; }

/* mosaico rizomático: sem título, sem crédito, sem ordem */
.detritos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:4px; }
.detritos img{ width:100%; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; }

/* GALERIA — fotos livres para uso (bio). Abre na mesma mesa dos detritos. */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.galeria figure{ margin:0; border:var(--borda); background:#000; }
.galeria img{ width:100%; aspect-ratio:16/9; object-fit:cover; cursor:zoom-in; display:block; }
.galeria figcaption{ padding:4px 6px; text-align:right; font-size:11px; letter-spacing:.08em; }
.galeria figcaption a{ color:var(--toxico); }
.galeria figcaption a:hover{ color:var(--asfalto); background:var(--toxico); }

.rasgo{
  min-height:110px; width:100%; border:1px solid var(--arterial);
  background:repeating-linear-gradient(115deg, var(--arterial) 0 6px, #2a0000 6px 11px, #000 11px 20px);
  animation:none !important;
}
.detritos .rasgo{ aspect-ratio:1/1; min-height:0; }
.rasgo-legenda{ display:block; text-align:center; color:var(--tartaro); font-size:10px; letter-spacing:.18em; padding:6px 4px; }
.detritos .rasgo-legenda{ display:none; }

/* [11] -------------------------------------------------------------- VÍDEO */
.grade-video{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
video.carne{
  display:block; width:100%; height:min(50vh,380px); object-fit:contain; background:#000;
  border:1px solid var(--musgo-escuro); border-top:3px solid var(--crepusculo);
  filter:grayscale(55%) contrast(135%); transition:filter .15s steps(2);
}
video.carne:hover{ filter:grayscale(0%) contrast(165%) saturate(150%); }

/* [12] ----------------------------------------------- RÁDIO (barra fixa)
   Fica FORA do miolo que a navegação troca — por isso o som não corta. */
.radio-bar{
  position:fixed; left:0; right:0; bottom:0; height:var(--altura-radio); z-index:99996;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  background:linear-gradient(180deg,#12061c,#000);
  border-top:1px solid var(--crepusculo);
  box-shadow:0 -8px 24px rgba(0,0,0,.7);
  font-size:12.5px;
}
.radio-bar .rb-ligar{
  flex:0 0 auto; border:1px solid var(--toxico); background:#000; color:var(--toxico);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; padding:8px 14px; cursor:crosshair;
}
.radio-bar .rb-ligar:hover{ background:var(--toxico); color:#000; }
.radio-bar .rb-ligar[data-no-ar="1"]{ border-color:var(--tartaro); color:var(--tartaro); }
.radio-bar .rb-ligar[data-no-ar="1"]:hover{ background:var(--tartaro); color:#000; }

.radio-bar .rb-visor{
  flex:1 1 auto; min-width:0; background:#000; border:1px solid var(--musgo-escuro);
  padding:5px 8px; color:var(--toxico); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.radio-bar .rb-visor .rb-rot{ display:inline-block; }
.radio-bar .rb-tempo{ flex:0 0 auto; color:var(--musgo-palido); font-size:11.5px; letter-spacing:.08em; }
.radio-bar .rb-vol{ flex:0 0 90px; accent-color:var(--crepusculo); cursor:crosshair; }

.equalizador{ display:flex; align-items:flex-end; gap:2px; height:22px; flex:0 0 auto; }
.equalizador i{ display:block; width:4px; height:3px; background:var(--crepusculo); }
.equalizador.viva i{ animation:eq .9s ease-in-out infinite alternate; }
.equalizador i:nth-child(2){ animation-delay:.1s; background:var(--toxico); }
.equalizador i:nth-child(3){ animation-delay:.25s; }
.equalizador i:nth-child(4){ animation-delay:.4s; background:var(--tartaro); }
.equalizador i:nth-child(5){ animation-delay:.55s; }
.equalizador i:nth-child(6){ animation-delay:.7s; background:var(--toxico); }
.equalizador i:nth-child(7){ animation-delay:.85s; }
@keyframes eq{ from{height:3px;} to{height:22px;} }

/* grade de programação (widget lateral) */
.grade-radio{ list-style:none; margin:8px 0 0 0; padding:0; }
.grade-radio li{
  border-bottom:1px dotted var(--musgo-escuro); padding:5px 4px;
  font-size:12px; color:var(--musgo-palido); display:flex; justify-content:space-between; gap:8px;
}
.grade-radio li.agora{ color:var(--toxico); background:rgba(95,255,62,.09); }
.grade-radio li.agora::before{ content:"▶ "; color:var(--tartaro); }
.grade-radio .dur{ flex:0 0 auto; color:var(--musgo-escuro); }

/* [13] -------------------------------------------------------------- CHAT */
.chat{ border:1px solid var(--crepusculo); background:#000; margin-top:12px; display:flex; flex-direction:column; }
.chat-topo{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg,var(--ourple),#150022); color:var(--osso);
  font-size:11.5px; letter-spacing:.14em; padding:4px 8px; text-transform:uppercase;
}
.chat-estado{ font-size:10.5px; letter-spacing:.1em; }
.chat-estado.on{ color:var(--toxico); }
.chat-estado.off{ color:var(--tartaro); }

.chat-fluxo{
  height:260px; overflow-y:auto; padding:8px 10px;
  background:var(--asfalto-fundo); font-size:13px;
  display:flex; flex-direction:column; gap:5px;
}
.chat-msg{ word-break:break-word; }
.chat-msg .quem{ color:var(--crepusculo); font-weight:700; }
.chat-msg .hora{ color:var(--musgo-escuro); font-size:10.5px; margin-left:4px; }
.chat-msg.eu .quem{ color:var(--toxico); }
.chat-sistema{ color:var(--musgo-palido); font-size:11.5px; font-style:italic; }

.chat-forma{ display:flex; gap:4px; padding:6px; border-top:1px solid var(--musgo-escuro); background:#000; flex-wrap:wrap; }
.chat-forma input, .chat-forma button{
  font-family:var(--mono); font-size:12.5px; background:#050a07;
  border:1px solid var(--musgo-escuro); color:var(--musgo); padding:6px 8px;
}
.chat-forma input:focus{ outline:1px solid var(--crepusculo); }
.chat-forma .quem-in{ flex:0 0 110px; min-width:80px; }
.chat-forma .texto-in{ flex:1 1 140px; min-width:0; }
.chat-forma button{ flex:0 0 auto; border-color:var(--crepusculo); color:var(--crepusculo); cursor:crosshair; }
.chat-forma button:hover:not(:disabled){ background:var(--crepusculo); color:#000; }
.chat-forma button:disabled{ opacity:.4; cursor:not-allowed; }

.chat-desligado{
  padding:18px 14px; text-align:center; font-size:12.5px; color:var(--musgo-palido);
  background:repeating-linear-gradient(135deg, rgba(122,26,255,.07) 0 8px, transparent 8px 16px);
}
.chat-desligado b{ color:var(--tartaro); }

/* [12.5] ================================================== GALIZA.TV
   Um aparelho de tubo inteiro em CSS: antena, gabinete de plástico,
   vidro abaulado, grelha de alto-falante, dial e botoeira.
   Nenhuma imagem — só borda, gradiente e sombra. Não quebra nunca. */
.tv{ margin:0 0 14px 0; }
.tv-corpo{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.tv-aparelho{ flex:1 1 480px; min-width:290px; }

/* --- antena --- */
.tv-antena{ position:relative; height:56px; margin:0 0 -6px 0; pointer-events:none; }
.tv-antena i{
  position:absolute; bottom:0; left:50%; width:3px; height:54px;
  background:linear-gradient(180deg,#8d979c,#3a4145);
  transform-origin:bottom center; border-radius:2px;
}
.tv-antena i:first-child{ transform:translateX(-28px) rotate(-32deg); }
.tv-antena i:last-child{ transform:translateX(24px) rotate(30deg); }
.tv-antena i::before{
  content:""; position:absolute; top:-4px; left:-2px; width:7px; height:7px;
  border-radius:50%; background:#aeb6ba;
}
html:not(.sobrio) .tv-antena i:first-child{ animation:antena 9s ease-in-out infinite; }
@keyframes antena{
  0%,100%{ transform:translateX(-28px) rotate(-32deg); }
  50%    { transform:translateX(-28px) rotate(-29deg); }
}

/* --- gabinete --- */
.tv-caixa{
  position:relative; display:flex; gap:0; align-items:stretch;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 12%),
    linear-gradient(155deg,#3a4045 0%,#20262a 38%,#12171a 72%,#1b2124 100%);
  border:1px solid #05080a;
  border-radius:26px 26px 16px 16px;
  padding:16px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -6px 16px rgba(0,0,0,.85),
    inset 6px 0 14px rgba(0,0,0,.4),
    0 14px 40px rgba(0,0,0,.7);
}

/* --- a tela --- */
.tv-tela-area{ flex:1 1 auto; min-width:0; }
.tv-tela{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:#000;
  border:3px solid #05080a;
  /* a curvatura do tubo: raio maior no eixo horizontal que no vertical */
  border-radius:9% / 13%;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.95),
    inset 0 0 22px rgba(95,255,62,.10),
    0 0 0 3px #2b3237,
    0 0 0 4px #0a0e10;
}
.tv-tela .tv-video{
  width:100%; height:100%; object-fit:contain; background:#000; display:block;
  filter:grayscale(30%) contrast(132%) saturate(125%);
}
/* vidro: brilho no alto, vinheta nos cantos */
.tv-tela::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  border-radius:9% / 13%;
  background:
    radial-gradient(60% 42% at 30% 6%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.8) 100%);
}
/* linhas de varredura próprias da tela */
.tv-scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}
html:not(.sobrio) .tv-scan{ animation:tvScan 7s linear infinite; }
@keyframes tvScan{ from{ background-position:0 0; } to{ background-position:0 60px; } }

.tv-osd{
  position:absolute; top:10px; left:12px; z-index:5;
  font-size:12px; letter-spacing:.16em; color:var(--toxico);
  text-shadow:0 0 10px rgba(95,255,62,.85); pointer-events:none;
}
.tv-sem-sinal{
  position:absolute; inset:0; z-index:2; display:none;
  align-items:center; justify-content:center;
  color:var(--tartaro); letter-spacing:.3em; font-size:14px;
}
.tv.sem-sinal .tv-sem-sinal{ display:flex; }

/* chuvisco na troca de canal */
.tv-estatica{
  position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='120' height='120' filter='url(%23s)'/></svg>");
  background-size:120px 120px;
}
.tv.chiando .tv-estatica{ opacity:.9; animation:chuvisco .34s steps(5); }
.tv.chiando .tv-video{ filter:grayscale(100%) contrast(340%) brightness(1.6); }
@keyframes chuvisco{
  0%,100%{ background-position:0 0; }
  20%{ background-position:44px -30px; } 40%{ background-position:-34px 26px; }
  60%{ background-position:26px 44px; }  80%{ background-position:-20px -18px; }
}

/* --- coluna de controles do gabinete --- */
.tv-controles{
  flex:0 0 84px; margin-left:14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.tv-marca{
  font-size:9px; letter-spacing:.22em; color:#79848a;
  text-shadow:0 1px 0 rgba(0,0,0,.9);
}
.tv-dial{
  width:60px; height:60px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #4a5257, #191e21 62%, #0b0e10);
  border:1px solid #05080a;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.16), 0 3px 8px rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:19px; font-weight:700;
  color:var(--toxico); text-shadow:0 0 10px rgba(95,255,62,.8);
}
.tv-knobs{ display:flex; gap:8px; }
.tv-knobs i{
  width:19px; height:19px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #444c51, #14181b);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.7);
}
.tv-grelha{
  width:56px; height:74px; border-radius:3px;
  background:repeating-linear-gradient(180deg, #0c1012 0 2px, #262d31 2px 5px);
  box-shadow: inset 0 0 6px rgba(0,0,0,.9);
}
.tv-luz{
  width:8px; height:8px; border-radius:50%;
  background:var(--tartaro); box-shadow:0 0 10px var(--tartaro);
}
html:not(.sobrio) .tv-luz{ animation:tvLuz 2.6s ease-in-out infinite; }
@keyframes tvLuz{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* --- pés --- */
.tv-pes{ display:flex; justify-content:space-between; padding:0 42px; margin-top:-2px; }
.tv-pes i{
  width:46px; height:11px; border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#20262a,#0a0d0f);
  box-shadow:0 4px 10px rgba(0,0,0,.7);
}

/* --- botoeira lateral (os canais) --- */
.tv-painel{
  flex:0 1 196px; min-width:170px;
  display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(160deg,#1b1f22,#0b0d0f);
  border:1px solid #05080a; border-radius:12px; padding:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.5);
}
.tv-painel-titulo{
  font-size:9.5px; letter-spacing:.24em; color:#79848a; text-align:center; padding-bottom:2px;
}
.tv-btn{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  font-family:var(--mono); cursor:crosshair;
  background:linear-gradient(180deg,#12180f,#080b09);
  border:1px solid var(--musgo-escuro); color:var(--musgo);
  padding:8px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.tv-btn:hover{ border-color:var(--crepusculo); color:var(--osso); }
.tv-btn .tv-btn-num{ font-size:11px; letter-spacing:.2em; color:var(--musgo-escuro); }
.tv-btn .tv-btn-nome{ font-size:12px; letter-spacing:.05em; }
.tv-btn.ligado{
  background:linear-gradient(180deg,#132a17,#0a1a0d);
  border-color:var(--toxico); color:var(--toxico);
  box-shadow: inset 0 0 16px rgba(95,255,62,.2);
}
.tv-btn.ligado .tv-btn-num{ color:var(--tartaro); }
.tv-passos{ display:flex; gap:6px; margin-top:auto; padding-top:4px; }
.tv-passos button{
  flex:1; font-family:var(--mono); font-size:14px; cursor:crosshair;
  background:#000; border:1px solid var(--crepusculo); color:var(--crepusculo); padding:5px 0;
}
.tv-passos button:hover{ background:var(--crepusculo); color:#000; }

/* --- blocos do canal --- */
.tv-blocos{ list-style:none; margin:10px 0 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.tv-blocos li{
  font-size:11px; letter-spacing:.1em; padding:4px 8px; cursor:crosshair;
  border:1px solid var(--musgo-escuro); background:#050a07; color:var(--musgo-palido);
}
.tv-blocos li:hover{ border-color:var(--crepusculo); color:var(--osso); }
.tv-blocos li.no-ar{ border-color:var(--toxico); color:var(--toxico); background:rgba(95,255,62,.09); }

@media (max-width:640px){
  .tv-controles{ flex-basis:64px; margin-left:10px; }
  .tv-dial{ width:46px; height:46px; font-size:15px; }
  .tv-grelha{ width:40px; height:52px; }
  .tv-antena{ height:44px; }
}

/* [12.6] ------------------------------------- ITENS DE ACERVO (componente)
   Um só desenho serve rádio, biblioteca e loja. */
/* Gaveta cheia não toma a janela inteira: passou da altura, vira rolagem.
   A barra é a mesma roxa do resto do site (bloco [1]). Para uma gaveta
   específica escapar do teto, ponha class="acervo solta" nela. */
.acervo{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;
  max-height:clamp(320px,62vh,560px); overflow-y:auto; overscroll-behavior:contain;
  padding:2px 6px 2px 2px;
}
.acervo.solta{ max-height:none; overflow-y:visible; }
.acervo.larga{ grid-template-columns:1fr; }
.item{
  border:var(--borda); background:var(--asfalto-fundo); padding:10px 12px; position:relative;
}
.item h3{ margin:0 0 4px 0; font-size:13.5px; color:var(--osso); letter-spacing:.05em; }
.item p{ margin:0 0 .5em 0; font-size:13px; }
.item .item-meta{ font-size:11.5px; letter-spacing:.1em; color:var(--musgo-escuro); text-transform:uppercase; }
.item .item-capa{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:8px; }
/* recorte de clipping: mostra a matéria inteira, não corta em quadrado */
.item .item-recorte{ width:100%; max-height:320px; object-fit:contain; object-position:top; margin-bottom:8px; background:#000; }
.item audio{ margin-top:6px; width:100%; }

/* PEÇA — player de set, mixtape e programa.
   Tocar uma peça derruba a transmissão (ver galiza.js, bloco [7.25]). */
.peca{
  display:flex; align-items:center; gap:8px; margin:8px 0 2px 0;
  border:1px solid var(--musgo-escuro); background:rgba(0,0,0,.62); padding:5px 7px;
}
.peca.tocando{ border-color:var(--toxico); box-shadow:0 0 0 1px rgba(95,255,62,.25); }
.peca-botao{
  flex:0 0 auto; width:30px; height:26px; cursor:crosshair;
  font-family:var(--mono); font-size:12px; line-height:1;
  color:var(--toxico); background:#0d130f; border:1px solid var(--musgo-escuro);
}
.peca-botao:hover{ color:var(--asfalto); background:var(--toxico); }
.peca.tocando .peca-botao{ color:var(--crepusculo); border-color:var(--crepusculo); }
.peca-trilho{
  flex:1 1 auto; height:9px; min-width:40px; position:relative; cursor:crosshair;
  background:#121a15; border:1px solid var(--musgo-escuro);
}
.peca-trilho i{ display:block; height:100%; width:0; background:var(--toxico); transition:width .18s linear; }
.peca.tocando .peca-trilho i{ background:var(--crepusculo); }
.peca-tempo{ flex:0 0 auto; font-size:11px; letter-spacing:.06em; color:var(--musgo-palido); white-space:nowrap; }

/* GIFS — enfeite, nunca informação. Somem no modo sóbrio.

   DOIS TIPOS, de propósito:
   1. o COLADO  <span data-gif>  — vai junto de um título, na linha do texto.
      Esse é escolhido a dedo, fica onde você puser.
   2. o ESPARRAMADO — o site sorteia e joga nas margens fora da coluna,
      em tamanho e inclinação aleatórios. Ninguém escolhe onde cai.
      Ver galiza.js, bloco [7.06]. */
.gif-solto{
  height:34px; width:auto; max-width:100%; vertical-align:middle;
  margin:0 4px; image-rendering:pixelated;
}
.parede-gifs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 2px 0; }
.parede-gifs .gif-solto{ height:52px; margin:0; }
html.sobrio .gif-solto{ display:none; }

/* O CAOS DOS CANTOS.
   z-index 1: acima do fundo, abaixo de qualquer coisa que se clique.
   pointer-events:none no contêiner inteiro — nunca rouba um clique. */
.gifs-soltos{
  position:absolute; left:0; top:0; width:100%;
  z-index:1; pointer-events:none; overflow:hidden;
}
/* width/height AUTO com max-width/max-height vindos do script: o gif se
   encaixa na margem livre sem distorcer, seja ele alto ou largo. */
.gif-esparramado{
  position:absolute; width:auto; height:auto; image-rendering:pixelated;
  transform:rotate(var(--giro, 0deg));
  filter:saturate(120%) contrast(108%);
}
html:not(.sobrio) .gif-esparramado{
  animation:vagar var(--ritmo, 9s) ease-in-out infinite;
}
@keyframes vagar{
  0%,100%{ transform:translate(0,0) rotate(var(--giro,0deg)); }
  50%     { transform:translate(var(--desvio,0), -7px) rotate(calc(var(--giro,0deg) * -0.7)); }
}
html.sobrio .gifs-soltos{ display:none; }
.item .preco{ font-size:15px; color:var(--toxico); letter-spacing:.08em; margin:6px 0; }
.item .preco.esgotado{ color:var(--tartaro); text-decoration:line-through; }
.item .comprar{ margin:2px 0 0 0; }
.item-esgotado{ opacity:.55; }
.item-esgotado::after{
  content:"ARQUIVO"; position:absolute; top:6px; right:6px;
  font-size:9px; letter-spacing:.18em; color:var(--tartaro); border:1px solid var(--arterial); padding:2px 5px;
}

/* estado vazio — honesto, não preenche com nada inventado */
.vazio{
  border:1px dashed var(--musgo-escuro); background:rgba(5,10,7,.6);
  padding:24px 18px; text-align:center;
}
.vazio .vazio-marca{ color:var(--tartaro); letter-spacing:.4em; font-size:13px; }
.vazio p{ margin:8px 0 4px 0; color:var(--crepusculo); letter-spacing:.2em; text-transform:uppercase; font-size:13px; }
.vazio small{ color:var(--musgo-palido); }

/* [12.7] ------------------------------------------ INDÍCIOS (na entrada)
   Cartões que dizem "este ambiente existe" sem despejar o conteúdo todo. */
.indicios{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.indicio{
  border:var(--borda); background:var(--asfalto-caixa); padding:0; position:relative;
  display:flex; flex-direction:column; overflow:hidden;
}
.indicio > a.indicio-capa{ border-bottom:0; display:block; line-height:0; }
.indicio-corpo{ padding:10px 12px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.indicio h3{ margin:0; font-size:14px; color:var(--toxico); letter-spacing:.1em; }
.indicio p{ margin:0; font-size:12.5px; color:var(--musgo-palido); }
.indicio .indicio-ir{ margin-top:auto; padding-top:8px; font-size:12px; letter-spacing:.08em; }
.indicio::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px;
  background:linear-gradient(135deg, transparent 50%, var(--tartaro) 50%);
}
/* mini-monitor do indício da TV */
.mini-tv{
  position:relative; aspect-ratio:4/3; background:#000; overflow:hidden;
  border-bottom:1px solid var(--musgo-escuro);
}
.mini-tv video{ width:100%; height:100%; object-fit:cover; filter:grayscale(60%) contrast(140%); display:block; }
.mini-tv .tv-osd{ font-size:10.5px; top:6px; left:7px; }
.mini-tv::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
/* mini-mosaico do indício dos detritos */
.mini-detritos{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.mini-detritos img{ width:100%; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; }

/* [13.5] ------------------------------------ SISTEMA (painel vivo)
   Leitura real da sessão: relógio, tempo na página, o que está no ar.
   Nada inventado — só o que o navegador realmente sabe. */
.sistema{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  font-size:11.5px; background:#000; border:1px solid var(--musgo-escuro); padding:8px;
}
.sistema .sis-k{ color:var(--musgo-escuro); text-transform:uppercase; letter-spacing:.1em; }
.sistema .sis-v{ color:var(--toxico); text-align:right; }

/* interferência: a tela treme de vez em quando, como sinal ruim.
   IMPORTANTE: quem treme é o MIOLO, nunca o <body>. Transform e filter no body
   criariam um novo bloco de contenção e a barra da rádio, o grão e a mesa
   (todos position:fixed) sairiam do lugar durante a tremida. */
body.interferencia [data-conteudo]{ animation:interfere .12s steps(2) 2; }
@keyframes interfere{
  0%  { transform:translate(0,0); filter:none; }
  40% { transform:translate(-2px,1px); filter:hue-rotate(18deg) saturate(160%); }
  70% { transform:translate(2px,-1px); filter:hue-rotate(-18deg); }
  100%{ transform:translate(0,0); filter:none; }
}

/* [13.55] ------------------------------------------------------- LOGO
   O logo é preto com fundo transparente. No breu do site ele sumiria:
   invert() vira branco e o drop-shadow devolve a cor da casa. */
.logo{
  display:block; height:var(--logo-alt,84px); width:auto;
  filter: invert(1) drop-shadow(0 0 6px rgba(221,125,255,.55));
  transition: filter .15s steps(2), transform .15s steps(2);
}
.logo:hover{
  filter: invert(1) sepia(1) hue-rotate(70deg) saturate(6)
          drop-shadow(0 0 10px rgba(95,255,62,.8));
  transform: translate(-1px,1px) rotate(-1deg);
}
.membrana-topo{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.membrana-topo .membrana-texto{ flex:1 1 240px; min-width:0; }
html:not(.sobrio) .logo{ animation:logoPulso 5.5s ease-in-out infinite; }
@keyframes logoPulso{
  0%,100%{ filter: invert(1) drop-shadow(0 0 6px rgba(221,125,255,.55)); }
  50%    { filter: invert(1) drop-shadow(0 0 13px rgba(255,64,64,.6)); }
}
@media (max-width:520px){ :root{ --logo-alt:58px; } }

/* [13.56] ------------------------------------- GLIFOS (SVG animados)
   Caveira, costela, olho, hélice, circuito, mão. Desenhados em SVG inline,
   animados em CSS. Sem arquivo externo: não some quando o host cair. */
.glifo{
  display:inline-block; vertical-align:middle;
  width:var(--glifo,26px); height:var(--glifo,26px);
  color:var(--crepusculo);
}
.glifo svg{ width:100%; height:100%; display:block; }
.glifo svg *{ vector-effect:non-scaling-stroke; }
.glifo.toxico{ color:var(--toxico); }
.glifo.sangue{ color:var(--tartaro); }
.glifo.osso{ color:var(--musgo-palido); }
.glifo.g{ --glifo:40px; }
.glifo.gg{ --glifo:64px; }

html:not(.sobrio) .glifo.gira svg{ animation:glifoGira 9s linear infinite; }
html:not(.sobrio) .glifo.bate svg{ animation:glifoBate 1.15s ease-in-out infinite; }
html:not(.sobrio) .glifo.pisca svg{ animation:glifoPisca 3.4s steps(1) infinite; }
html:not(.sobrio) .glifo.treme svg{ animation:glifoTreme 4.2s steps(2) infinite; }
@keyframes glifoGira{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes glifoBate{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.16); } }
@keyframes glifoPisca{ 0%,88%,100%{ opacity:1; } 90%,96%{ opacity:.15; } }
@keyframes glifoTreme{
  0%,92%,100%{ transform:translate(0,0); }
  94%{ transform:translate(-2px,1px); } 97%{ transform:translate(2px,-1px); }
}

/* [13.57] --------------------------------------------- GIFS ESPALHADOS
   Arquivos que você joga em midia/gifs/. Ficam com cara de adesivo colado
   na página — meio tortos, um pouco fora do prumo, como em site de 1999. */
.gif-solto{
  display:inline-block; height:56px; width:auto; vertical-align:middle;
  image-rendering:pixelated; margin:2px;
  filter:contrast(115%) saturate(120%);
}
.gif-solto:nth-child(2n){ transform:rotate(-2.5deg); }
.gif-solto:nth-child(3n){ transform:rotate(2deg); }
.gif-solto:nth-child(5n){ transform:rotate(-1deg) scale(1.06); }
.gif-solto:hover{ filter:contrast(150%) saturate(180%) drop-shadow(0 0 7px var(--crepusculo)); }

.parede-gifs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  padding:10px 6px; border:1px dashed var(--musgo-escuro); background:rgba(5,10,7,.5);
}
.parede-gifs:empty{ display:none; }

/* fita de glifos: substitui os "divisores glitter" quando quiser respiro */
.tira-glifos{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 0; opacity:.85;
}
/* enfeite de canto dentro de um módulo */
.modulo > .glifo-canto{
  position:absolute; top:-13px; right:16px; --glifo:26px; z-index:2;
  background:var(--asfalto-caixa); padding:2px;
}

/* piscada na troca de página — o corte de canal */
body.trocando [data-conteudo]{ animation:corteCanal .26s steps(3); }
@keyframes corteCanal{
  0%  { opacity:.15; transform:translateY(-6px) scaleY(1.02); filter:contrast(220%) hue-rotate(70deg); }
  45% { opacity:.55; transform:translateY(3px);  filter:contrast(160%) hue-rotate(-60deg); }
  100%{ opacity:1;   transform:none;             filter:none; }
}

/* [13.6] ------------------------------------ PAREDE DE VIZINHOS (88x31) */
.vizinhos{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.vizinhos a{ border-bottom:0; line-height:0; }
.rasgo-88{ width:88px; height:31px; min-height:0; display:inline-block; }
.rasgo-88 .rasgo-legenda{ display:none; }
.vaga{
  width:88px; height:31px; border:1px dashed var(--musgo-escuro); background:#050a07;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:8.5px; letter-spacing:.12em; color:var(--musgo-escuro); text-transform:uppercase;
}
.vaga:hover{ border-color:var(--crepusculo); color:var(--crepusculo); }

/* [14] ---------------------------------------------------------- WIDGETS */
.widget{ border:1px solid var(--musgo-escuro); background:rgba(0,0,0,.80); padding:9px; margin:0 0 12px 0; }
.widget h4{ margin:0 0 7px 0; }
.lista-crua{ list-style:none; margin:0; padding:0; }
.lista-crua li{ border-bottom:1px dotted var(--musgo-escuro); padding:6px 0; }
.lista-crua li::before{ content:"› "; color:var(--tartaro); }

.parede-botoes{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.parede-botoes a{ border-bottom:0; line-height:0; }
.botao88{
  width:88px; height:31px; image-rendering:pixelated; border:1px solid #000; display:block; background:#111;
  transition:filter .1s steps(2), transform .1s steps(2);
}
.botao88:hover{ filter:brightness(1.5) saturate(180%) drop-shadow(0 0 4px var(--crepusculo)); transform:translate(-1px,-1px); }

@keyframes heartPulse{
  0%,100%{transform:scale(1); filter:brightness(1);}
  50%    {transform:scale(1.05); filter:brightness(1.3) drop-shadow(0 0 5px var(--crepusculo));}
}
.pulse-stamp{ animation:heartPulse 1.2s infinite ease-in-out; display:inline-block; }

.selo{
  display:inline-block; border:1px solid var(--musgo-escuro); background:#000; color:var(--toxico);
  font-size:11px; letter-spacing:.08em; padding:4px 7px; margin:3px 4px 3px 0; text-transform:uppercase;
}
.selo.rosa{ color:var(--crepusculo); border-color:var(--crepusculo); }
.selo.sangue{ color:var(--tartaro); border-color:var(--arterial); }

table.modular{ width:100%; border-collapse:collapse; border:1px solid var(--musgo-escuro); }
table.modular td, table.modular th{ border:1px solid var(--musgo-escuro); padding:8px 10px; vertical-align:top; font-size:13px; }
table.modular th{ background:rgba(16,24,18,.9); color:var(--crepusculo); text-align:left; letter-spacing:.1em; text-transform:uppercase; font-size:12px; }

.obras{ border:1px dashed var(--crepusculo); background:rgba(11,4,16,.7); padding:26px 20px; text-align:center; margin:18px 0; }
.obras .grande{ font-size:19px; color:var(--tartaro); letter-spacing:.2em; text-transform:uppercase; }

/* [15] -------------------------------------------- JANELAS ARRASTÁVEIS */
.janela{
  position:fixed; width:340px; max-width:88vw; background:#0d100e; border:1px solid var(--crepusculo);
  box-shadow:0 0 0 1px #000, 0 12px 40px rgba(0,0,0,.85), 0 0 22px rgba(221,125,255,.24);
  z-index:100000; font-size:13px;
}
.janela .barra-titulo{
  margin:0; cursor:move; user-select:none;
  background:linear-gradient(90deg,var(--ourple),#150022); color:var(--osso);
  border-bottom:1px solid var(--crepusculo);
}
.janela .conteudo-janela{ padding:12px; max-height:60vh; overflow:auto; }
.janela .fechar-de-verdade{
  border:1px solid var(--crepusculo); background:#000; color:var(--crepusculo);
  width:18px; height:16px; line-height:14px; font-size:11px; cursor:crosshair;
}
.janela .fechar-de-verdade:hover{ background:var(--crepusculo); color:#000; }

/* [16] --------------------------------------------------- MESA (lightbox) */
.mesa{
  position:fixed; inset:0; z-index:100001; background:rgba(2,4,3,.96);
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:26px 16px;
}
.mesa.acesa{ display:flex; }
.mesa img{
  max-width:min(96vw,1400px); max-height:82vh; width:auto; height:auto;
  border:1px solid var(--crepusculo); box-shadow:0 0 34px rgba(221,125,255,.3);
  filter:contrast(115%); background:#000;
}
.mesa .mesa-conta{ margin-top:12px; font-size:12px; letter-spacing:.2em; color:var(--musgo-palido); }
.mesa button{ position:absolute; font-family:var(--mono); background:#000; cursor:crosshair; }
.mesa-fechar{ top:12px; right:14px; border:1px solid var(--tartaro); color:var(--tartaro); font-size:14px; padding:4px 11px; }
.mesa-fechar:hover{ background:var(--tartaro); color:#000; }
.mesa-passo{ top:50%; transform:translateY(-50%); border:1px solid var(--crepusculo); color:var(--crepusculo); font-size:22px; padding:6px 13px; }
.mesa-passo:hover{ background:var(--crepusculo); color:#000; }
.mesa-anterior{ left:10px; }
.mesa-proxima{ right:10px; }

/* [17] ------------------------------------------------------------ RODAPÉ */
footer.rodape{ margin-top:34px; border-top:1px solid var(--arterial); padding:14px 0 20px 0; font-size:12.5px; color:var(--musgo-palido); }
footer.rodape p{ margin:.25em 0; }

/* moldura do portfólio */
.pf-palco{ border:1px solid var(--musgo-escuro); border-top:3px solid var(--crepusculo); background:#09090b; overflow:hidden; }
.pf-palco iframe{ display:block; border:0; transform-origin:0 0; background:#09090b; }
.pf-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px 0; }

/* [18] ------------------------------------------------------------ TELAS */
@media (max-width:820px){
  :root{ --corpo-tam:14px; --altura-radio:58px; }
  .crt{ padding:12px 12px 50px 12px; }
  .col-larga,.col-fina{ flex:1 1 100%; min-width:0; }
  nav.rizoma ul{ flex-direction:column; }
  nav.rizoma a{ border-right:0; border-bottom:1px dashed var(--musgo-escuro); text-align:left; }
  .terminal{ height:200px; }
  h1{ font-size:23px; }
  .detritos{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
  body{ background-attachment:scroll; }
  .radio-bar .rb-vol, .radio-bar .equalizador{ display:none; }
}
@media (max-width:520px){
  .janela{ width:94vw; }
  .mesa-passo{ font-size:17px; padding:4px 9px; }
  .radio-bar .rb-tempo{ display:none; }
  .chat-forma .quem-in{ flex:1 1 100%; }
}

@media print{
  body::before, body::after, .varredura, .grao, .marquee-broadcast, .radio-bar, .chat{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  .terminal{ height:auto; overflow:visible; border:1px solid #000; }
  a{ color:#000; }
}