:root{
  /* --- unidade do pixel: escada de INTEIROS.
         Fluido (clamp/vw) daria bordas em meio-pixel (volta o antialiasing)
         e forçaria re-rasterizar as máscaras a cada quadro do resize. --- */
  --px:4px;

  --ground:#060B08;

  /* --- superfícies: cores sólidas da primeira versão do projeto --- */
  --surface:#0F1712;     /* painel v1 */
  --hairline:#1E2B22;    /* linha v1 */
  --field:#060B08;       /* fundo de input v1 */
  --card:#152219;        /* moldura dos cards v1 */
  --card-inner:#081209;  /* tela dos cards v1 */
  --text:#F4F1E6;
  /* v1 usava #6E8073, que sobre o painel dá 4,3:1 e reprova em texto pequeno.
     Mesma família, um passo mais claro, chega a 5,3:1. */
  --text-dim:#7D8F82;

  /* --- painel do outdoor: identidade âmbar preservada --- */
  --board-bg:#0B0A06;
  --board-bg-2:#14110A;
  --amber:#FFD400;
  --amber-dim:rgba(255,212,0,0.14);
  --cyan:#29B6F6;
  --green:#00A859;
  --red:#FF3D57;

  /* --- moldura e estrutura --- */
  --frame-1:#F2F0EA;
  --frame-2:#B9B3A6;
  --frame-3:#6E685C;
  --steel-1:#8E8778;
  --steel-2:#4A453C;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ==========================================================================
   FLORESTA EM PIXEL ART
   Blocos de tamanho FIXO (--px) ladrilhados horizontalmente — e não uma cena
   única esticada. Esticar faria o bloco variar de ~4px no celular a ~11px em
   ultrawide (fracionário = borrão) e cortaria 3/4 da cena no celular em pé.
   As silhuetas entram como MÁSCARA e a cor vem de variável, e é isso que
   permite re-tingir tudo conforme a hora do dia.
   ========================================================================== */
@media (min-width:700px){  :root{ --px:5px; } }
@media (min-width:1100px){ :root{ --px:6px; } }
@media (min-width:1700px){ :root{ --px:8px; } }

/* ---------- Paleta por faixa horária (padrão = noite) ---------- */
:root,
html.t-noite{
  --sky-a:#070D0A; --sky-b:#0B1410; --sky-c:#122019; --sky-d:#1B2E23; --sky-e:#28402F;
  --px-far:#22382B; --px-mid:#132018; --px-near:#070D0A;
  --ray:rgba(41,182,246,.07);
  --spark:#FFD400;  --spark-op:1;    --star-op:1;
  --orb:#F4F1E6;    --orb-glow:rgba(244,241,230,.12);
  --scrim-op:.62;
}
html.t-amanhecer{
  --sky-a:#0A1420; --sky-b:#10222E; --sky-c:#1A3440; --sky-d:#2A4A54; --sky-e:#3E6068;
  --px-far:#26424A; --px-mid:#14262C; --px-near:#080F12;
  --ray:rgba(41,182,246,.11);
  --spark:#8FD8F5;  --spark-op:.5;   --star-op:.35;
  --orb:#9FE0FF;    --orb-glow:rgba(41,182,246,.14);
  --scrim-op:.68;
}
html.t-dia{
  --sky-a:#2E4237; --sky-b:#3A5244; --sky-c:#486351; --sky-d:#57755F; --sky-e:#68886F;
  --px-far:#2C4033; --px-mid:#1B2A20; --px-near:#0D1610;
  --ray:rgba(244,241,230,.09);
  --spark:#F4F1E6;  --spark-op:.22;  --star-op:0;
  --orb:#FFF3C4;    --orb-glow:rgba(255,243,196,.16);
  --scrim-op:.95;
}
html.t-tarde{
  --sky-a:#141E16; --sky-b:#26281A; --sky-c:#453A1E; --sky-d:#6B4E1F; --sky-e:#9A6A22;
  --px-far:#2A3520; --px-mid:#161E14; --px-near:#080D08;
  --ray:rgba(255,212,0,.10);
  --spark:#FFD400;  --spark-op:.85;  --star-op:.15;
  --orb:#FFD400;    --orb-glow:rgba(255,212,0,.18);
  --scrim-op:.78;
}

.pixelscape{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
  background:var(--sky-a);   /* preenche a sobra em telas muito altas */
  contain:strict;            /* isola paint/layout do resto da página */
}
.pixelscape > *{position:absolute;}

/* transição suave quando a hora vira com a página aberta */
.ps__sky,.ps__dither,.ps__far,.ps__mid,.ps__near,.ps__rays,.ps__orb,.ps__scrim,.ps__fly{
  transition:background-color 1.6s ease, background-image 1.6s ease, opacity 1.6s ease;
}

/* --- céu: altura TOTAL, com as bandas do horizonte ancoradas embaixo --- */
.ps__sky{
  inset:0;
  background:linear-gradient(180deg,
    var(--sky-a) 0                            calc(100% - 54 * var(--px)),
    var(--sky-b) calc(100% - 54 * var(--px))  calc(100% - 40 * var(--px)),
    var(--sky-c) calc(100% - 40 * var(--px))  calc(100% - 26 * var(--px)),
    var(--sky-d) calc(100% - 26 * var(--px))  calc(100% - 14 * var(--px)),
    var(--sky-e) calc(100% - 14 * var(--px))  100%);
}

/* --- estrelas: some de dia via --star-op --- */
.ps__stars{
  inset:0; opacity:var(--star-op);
  background-repeat:repeat;
  background-size:calc(76 * var(--px)) calc(76 * var(--px));
  background-image:var(--m-stars);
  -webkit-mask-image:linear-gradient(180deg,#000 0 45%, transparent 82%);
          mask-image:linear-gradient(180deg,#000 0 45%, transparent 82%);
  --m-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' shape-rendering='crispEdges'%3E%3Cg fill='%23F4F1E6' fill-opacity='.55'%3E%3Crect x='7' y='11' width='1' height='1'/%3E%3Crect x='31' y='5' width='1' height='1'/%3E%3Crect x='58' y='19' width='1' height='1'/%3E%3Crect x='19' y='38' width='1' height='1'/%3E%3Crect x='68' y='47' width='1' height='1'/%3E%3Crect x='44' y='63' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23FFD400' fill-opacity='.7'%3E%3Crect x='49' y='28' width='1' height='1'/%3E%3Crect x='11' y='57' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- dithering: xadrez 2x2 de verdade na transição das bandas --- */
.ps__dither{
  left:0; right:0; bottom:calc(38 * var(--px)); height:calc(8 * var(--px));
  background-image:repeating-conic-gradient(var(--sky-d) 0% 25%, transparent 0% 50%);
  background-size:calc(2 * var(--px)) calc(2 * var(--px));
  opacity:.85;
}

/* --- lua / sol --- */
.ps__orb{
  right:calc(16 * var(--px)); top:calc(10 * var(--px));
  width:calc(10 * var(--px)); height:calc(10 * var(--px));
  background-color:var(--orb);
  box-shadow:0 0 0 var(--px) var(--orb-glow), 0 0 0 calc(2 * var(--px)) var(--orb-glow);
  -webkit-mask:var(--orb-mask) center/100% 100% no-repeat;
          mask:var(--orb-mask) center/100% 100% no-repeat;
  --orb-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='3' y='0' width='4' height='1'/%3E%3Crect x='2' y='1' width='6' height='1'/%3E%3Crect x='1' y='2' width='8' height='6'/%3E%3Crect x='2' y='8' width='6' height='1'/%3E%3Crect x='3' y='9' width='4' height='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- camadas de silhueta: máscara define a forma, variável define a cor --- */
.ps__far,.ps__mid,.ps__near{
  left:0; right:0;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-position:left bottom; mask-position:left bottom;
}
/* morros distantes — tile 64x20 (o mais claro: perspectiva atmosférica) */
.ps__far{
  bottom:calc(26 * var(--px)); height:calc(20 * var(--px));
  background-color:var(--px-far);
  -webkit-mask-size:calc(64 * var(--px)) calc(20 * var(--px));
          mask-size:calc(64 * var(--px)) calc(20 * var(--px));
  -webkit-mask-image:var(--m-far); mask-image:var(--m-far);
  --m-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='12' width='8' height='8'/%3E%3Crect x='8' y='9' width='8' height='11'/%3E%3Crect x='16' y='6' width='8' height='14'/%3E%3Crect x='24' y='4' width='8' height='16'/%3E%3Crect x='32' y='7' width='8' height='13'/%3E%3Crect x='40' y='10' width='8' height='10'/%3E%3Crect x='48' y='13' width='8' height='7'/%3E%3Crect x='56' y='12' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
}
/* mata distante — tile 32x24 */
.ps__mid{
  bottom:calc(12 * var(--px)); height:calc(24 * var(--px));
  background-color:var(--px-mid);
  background-position-x:calc(9 * var(--px));
  -webkit-mask-size:calc(32 * var(--px)) calc(24 * var(--px));
          mask-size:calc(32 * var(--px)) calc(24 * var(--px));
  -webkit-mask-image:var(--m-mid); mask-image:var(--m-mid);
  --m-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='7' y='2' width='2' height='2'/%3E%3Crect x='6' y='4' width='4' height='2'/%3E%3Crect x='5' y='6' width='6' height='2'/%3E%3Crect x='4' y='8' width='8' height='2'/%3E%3Crect x='3' y='10' width='10' height='2'/%3E%3Crect x='2' y='12' width='12' height='2'/%3E%3Crect x='7' y='14' width='2' height='4'/%3E%3Crect x='21' y='6' width='2' height='2'/%3E%3Crect x='20' y='8' width='4' height='2'/%3E%3Crect x='19' y='10' width='6' height='2'/%3E%3Crect x='18' y='12' width='8' height='2'/%3E%3Crect x='21' y='14' width='2' height='4'/%3E%3Crect x='0' y='18' width='32' height='6'/%3E%3C/g%3E%3C/svg%3E");
}
/* mata próxima — tile 40x18 (a mais escura: primeiro plano) */
.ps__near{
  bottom:0; height:calc(18 * var(--px));
  background-color:var(--px-near);
  background-position-x:calc(23 * var(--px));
  -webkit-mask-size:calc(40 * var(--px)) calc(18 * var(--px));
          mask-size:calc(40 * var(--px)) calc(18 * var(--px));
  -webkit-mask-image:var(--m-near); mask-image:var(--m-near);
  --m-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18' shape-rendering='crispEdges'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='8' width='40' height='10'/%3E%3Crect x='3' y='6' width='2' height='2'/%3E%3Crect x='2' y='7' width='4' height='1'/%3E%3Crect x='12' y='4' width='2' height='4'/%3E%3Crect x='11' y='6' width='4' height='2'/%3E%3Crect x='24' y='6' width='2' height='2'/%3E%3Crect x='23' y='7' width='4' height='1'/%3E%3Crect x='33' y='3' width='2' height='5'/%3E%3Crect x='32' y='5' width='4' height='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- raios de luz: colunas verticais duras, com máscara escalonada --- */
.ps__rays{
  left:0; right:0; top:0; height:calc(52 * var(--px));
  background-image:repeating-linear-gradient(90deg,
      var(--ray) 0 calc(3 * var(--px)),
      transparent calc(3 * var(--px)) calc(17 * var(--px)));
  -webkit-mask-image:var(--ray-mask); mask-image:var(--ray-mask);
  --ray-mask:linear-gradient(180deg,
      #000 0 calc(14 * var(--px)),
      rgba(0,0,0,.55) calc(14 * var(--px)) calc(30 * var(--px)),
      rgba(0,0,0,.22) calc(30 * var(--px)) calc(42 * var(--px)),
      transparent calc(42 * var(--px)));
  animation:ps-rays 9s steps(3,end) infinite alternate;
}
@keyframes ps-rays{from{opacity:.45} to{opacity:1}}

/* --- vaga-lumes: quadrado + halo QUADRADO (spread, nunca blur) --- */
.ps__flies{inset:0;}
.ps__fly{
  position:absolute; width:var(--px); height:var(--px);
  background:var(--spark); opacity:0;
  box-shadow:0 0 0 var(--px) color-mix(in srgb, var(--spark) 16%, transparent);
  animation-name:ps-fly;
  animation-timing-function:steps(1,end);  /* brilho quantizado, não interpolado */
  animation-iteration-count:infinite;
}
/* os vaga-lumes vivem nas laterais, fora do corredor central de 1040px:
   backdrop-filter sobre área animada obriga o navegador a refazer o blur */
@keyframes ps-fly{
  0%,100%{opacity:0}
  15%{opacity:calc(.30 * var(--spark-op))}
  30%{opacity:calc(.85 * var(--spark-op))}
  45%{opacity:calc(.55 * var(--spark-op))}
  60%{opacity:calc(.18 * var(--spark-op))}
  75%{opacity:0}
}

/* --- scrim: escurecimento em degraus (gradiente suave trairia a estética) --- */
.ps__scrim{
  inset:0; opacity:var(--scrim-op);
  background:linear-gradient(180deg,
    rgba(6,11,8,.80) 0 16%,   rgba(6,11,8,.62) 16% 32%,
    rgba(6,11,8,.42) 32% 52%, rgba(6,11,8,.34) 52% 70%,
    rgba(6,11,8,.48) 70% 86%, rgba(6,11,8,.70) 86% 100%);
}

/* conteúdo sempre acima da cena, sem depender de z-index negativo */
.wrap{max-width:1040px; margin:0 auto; padding:44px 24px 96px; position:relative; z-index:1;}

/* ---------- CABEÇALHO ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:#FFD9A8; margin:0 0 8px;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.wordmark-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
h1.wordmark{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(22px,5vw,30px);
  color:var(--amber); margin:0; line-height:1.4;
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 0 30px rgba(255,182,39,.35);
}
.domain-tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--text); background:var(--surface);
  border:1px solid var(--hairline); padding:4px 10px; border-radius:12px;
}
.claim{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(20px,4.6vw,30px);
  color:var(--text);
  margin:2px 0 12px;
  letter-spacing:-0.01em;
  text-shadow:0 0 18px rgba(255,212,0,.35), 0 2px 12px rgba(0,0,0,.7);
}
.claim::after{
  content:''; display:inline-block; width:.5em; height:1em;
  background:var(--amber); margin-left:.18em; vertical-align:-0.12em;
  animation:caret 1.05s steps(1,end) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.tagline{
  color:var(--text); font-size:15px; margin:0 0 28px; max-width:620px;
  line-height:1.6; text-shadow:0 1px 10px rgba(0,0,0,.55);
}

/* ---------- BARRA DE STATUS ---------- */
.statusbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:flex-end; margin:0 0 14px;
}
.live-pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border-radius:999px; background:var(--surface);
  border:1px solid rgba(255,61,87,.5); color:#FF8A98;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.1em;
}
.live-pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:blink 1.1s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}

.viewers-pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px;
  border-radius:999px; color:var(--text); font-size:13px;
  background:var(--surface); border:1px solid var(--hairline);
}
.viewers-pill[hidden]{display:none;}
.viewers-pill b{
  font-family:'Press Start 2P', monospace; font-size:15px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.viewers-pill__pulse{
  width:9px; height:9px; border-radius:50%; background:var(--red);
  animation:viewPulse 1.8s ease-out infinite;
}
@keyframes viewPulse{
  0%{box-shadow:0 0 0 0 rgba(255,61,87,.6);}
  70%{box-shadow:0 0 0 12px rgba(255,61,87,0);}
  100%{box-shadow:0 0 0 0 rgba(255,61,87,0);}
}

/* ---------- OUTDOOR ---------- */
.billboard{position:relative; margin:0 0 8px;}
.billboard__rig{
  position:relative; z-index:2;
  transform:perspective(1600px) rotateX(2deg);
  transform-origin:50% 100%;
}
.billboard__lights{
  position:absolute; left:0; right:0; top:-26px; height:26px;
  display:flex; justify-content:space-evenly; z-index:3; pointer-events:none;
}
.lamp{
  position:relative; width:34px; height:14px; align-self:flex-end;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--steel-1),var(--steel-2));
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.lamp::before{
  content:""; position:absolute; left:50%; top:-12px; width:3px; height:14px;
  background:var(--steel-2); transform:translateX(-50%);
}
.lamp::after{
  content:""; position:absolute; left:50%; top:12px; width:190px; height:150px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,236,180,.34), rgba(255,236,180,0) 78%);
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter:blur(6px);
}
.billboard__frame{
  position:relative;
  padding:clamp(12px,2.2vw,22px);
  border-radius:10px;
  background:linear-gradient(180deg,var(--frame-1) 0%, var(--frame-2) 42%, var(--frame-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 0 0 3px rgba(0,0,0,.35),
    0 34px 60px -24px rgba(20,4,20,.85),
    0 0 90px -20px rgba(255,190,90,.45);
}
/* rebites nos 4 cantos, sem markup extra */
.billboard__frame::before{
  content:""; position:absolute; inset:6px; border-radius:6px; pointer-events:none;
  background:
    radial-gradient(circle at 10px 10px, rgba(0,0,0,.5) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(0,0,0,.5) 0 2.5px, transparent 3px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(0,0,0,.5) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0,0,0,.5) 0 2.5px, transparent 3px);
}
.board{
  position:relative; border-radius:4px; overflow:hidden;
  min-height:clamp(210px,30vw,300px);
  padding:clamp(20px,3.2vw,38px);
  display:flex; flex-direction:column; justify-content:center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 0%, var(--board-bg-2) 0%, var(--board-bg) 72%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,212,0,.10);
}
.board::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%);
}
/* ---------- POST (estilo tweet) ---------- */
.quadro-vacant{
  font-family:'IBM Plex Mono', monospace; color:#9C8B6E; font-size:15px; margin:0;
}
.post{display:grid; grid-template-columns:auto 1fr; gap:clamp(10px,1.6vw,16px); align-items:start;}
.avatar{
  width:clamp(44px,6vw,60px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Press Start 2P', monospace;
  font-size:clamp(14px,2vw,20px); color:#12100A;
  box-shadow:0 0 0 2px rgba(255,212,0,.35), 0 0 18px rgba(0,0,0,.5);
}
.post__name{
  font-family:'Press Start 2P', monospace; color:var(--amber);
  font-size:clamp(15px,3.4vw,26px); line-height:1.45; margin:6px 0 0;
  word-break:break-word; text-shadow:0 0 16px rgba(255,182,39,.4);
}
.post__msg{
  font-family:'IBM Plex Sans', sans-serif; color:#FFF3DA;
  font-size:clamp(14px,1.9vw,19px); line-height:1.5; margin:10px 0 0;
  overflow-wrap:anywhere;
}
.contact-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.contact-links a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; text-decoration:none;
  color:var(--amber); border:1px solid rgba(255,212,0,.35); border-radius:999px;
  padding:5px 11px; background:rgba(255,212,0,.07);
}
.contact-links a:hover{background:rgba(255,212,0,.16);}
.post__meta{
  margin-top:16px; font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; color:#C9B38B; display:flex; gap:16px; flex-wrap:wrap;
}
.post__meta b{color:var(--text);}


/* ---------- ÚLTIMOS 5 ---------- */
.lastfive-wrap{margin-bottom:14px;}
.lastfive-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 8px; text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.lastfive-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;}
.lf-card{
  background:var(--card); border-radius:6px; padding:5px;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.7);
}
.lf-inner{
  background:var(--card-inner); border-radius:3px;
  padding:10px 10px 8px; min-height:88px; position:relative;
}
.lf-card.is-live .lf-inner{box-shadow:0 0 0 1px var(--amber) inset;}
.lf-rank{font-family:'IBM Plex Mono', monospace; font-size:10px; color:#8B7A5E;}
.lf-live-tag{
  position:absolute; top:8px; right:8px;
  font-family:'IBM Plex Mono', monospace; font-size:9px; color:var(--red);
}
.lf-avatar{
  width:22px; height:22px; border-radius:50%; margin:6px 0 4px;
  display:grid; place-items:center;
  font-family:'Press Start 2P', monospace; font-size:9px; color:#12100A;
}
.lf-name{
  font-weight:600; font-size:13px; color:var(--amber);
  margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lf-dur{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#9C8B6E;}
.lf-empty .lf-inner{display:flex; align-items:center; justify-content:center;}
.lf-empty .lf-dur{font-size:10px; opacity:0.6;}




/* ---------- COMPOSITOR (o formulário parece escrever um post) ---------- */
.composer{
  background:var(--card-inner); border:1px solid var(--hairline);
  border-radius:8px; padding:16px; margin-bottom:4px;
}
.composer label:first-of-type{margin-top:0;}
.composer__author{display:flex; align-items:center; gap:10px;}
.composer__avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Press Start 2P', monospace; font-size:14px; color:#12100A;
  background:#3A4A40; transition:background .25s ease;
}
.composer__author input{flex:1;}
.composer textarea{
  margin-top:0; font-size:15px; line-height:1.55; min-height:110px;
}

/* ---------- RECORDE EM DESTAQUE ---------- */
.record{
  background:var(--surface); border:1px solid var(--hairline);
  border-left:3px solid var(--amber); border-radius:8px;
  padding:16px 20px; margin:14px 0 26px; text-align:center;
}
.record[hidden]{display:none;}
.record__label{
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 8px;
}
.record__time{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(22px,5vw,34px); color:var(--amber);
  margin:0; text-shadow:0 0 18px rgba(255,182,39,.35);
}
.record__who{
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  color:var(--text); margin:8px 0 0;
}
.record__dare{
  font-size:13px; color:var(--text-dim); margin:10px 0 0;
}

/* ---------- TELA "VOCÊ ESTÁ NO TELÃO" ---------- */
.modal--share{max-width:400px;}
.live-box{
  background:var(--card-inner); border:1px solid var(--hairline);
  border-radius:6px; padding:14px; margin:0 0 16px;
}
.live-box__who{
  font-family:'Press Start 2P', monospace; font-size:15px;
  color:var(--amber); margin:0 0 8px; word-break:break-word;
}
.live-box__pub{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:#8CF0C0; margin:0 0 6px;
}
.live-box__pub::before{content:'✓ ';}
.live-box__time{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:var(--text); margin:0; font-variant-numeric:tabular-nums;
}
.share-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.share-actions button{margin-top:0;}
.link-btn{
  background:transparent; border:1px solid var(--amber); color:var(--amber);
  padding:13px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600;
  font-family:'IBM Plex Sans', sans-serif;
}
.link-btn:hover{background:rgba(255,212,0,.10);}

/* ---------- COMO FUNCIONA (3 passos) ---------- */
.steps{
  list-style:none; margin:0 0 24px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.steps li{
  background:var(--surface); border:1px solid var(--hairline); border-radius:8px;
  padding:14px 16px; font-size:13.5px; color:var(--text); line-height:1.45;
}
.steps b{
  display:block; font-family:'Press Start 2P', monospace;
  font-size:13px; color:var(--amber); margin-bottom:8px;
}

/* ---------- STATUS AO VIVO DENTRO DO TELÃO ---------- */
.post__live{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em;
  color:#FF8A98; margin-bottom:8px;
}
.post__live i{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:blink 1.1s ease-in-out infinite;
}

/* ---------- CARD DE COMPARTILHAMENTO ---------- */
.share-preview{
  width:100%; max-width:280px; margin:0 auto 16px;
  border:1px solid var(--hairline); border-radius:6px; overflow:hidden;
  background:#070D0A;
}
.share-preview canvas{display:block; width:100%; height:auto;}

label .opt{color:var(--text-dim); font-weight:400;}

/* ---------- PAINÉIS ---------- */
/* o formulário é o único painel agora: largura contida para não esticar demais */
.form-wrap{max-width:560px; margin:0 auto 24px;}
.panel{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:8px; padding:24px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
.panel h2{font-size:17px; font-weight:600; margin:0 0 4px;}
.panel .sub{color:var(--text-dim); font-size:12.5px; margin:0 0 16px;}

label{display:block; font-size:12px; color:var(--text-dim); margin:14px 0 6px;}
label:first-of-type{margin-top:0;}
input[type=text], input[type=tel], input[type=url], textarea{
  width:100%;
  background:var(--field);
  border:1px solid var(--hairline);
  color:var(--text);
  padding:10px 12px; border-radius:4px;
  font-family:'IBM Plex Sans', sans-serif; font-size:14px;
}
textarea{resize:vertical; line-height:1.5;}
:where(a,button,input,textarea,summary,details):focus-visible{
  outline:3px solid var(--amber); outline-offset:2px; border-radius:4px;
}

.char-counter{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  color:var(--text-dim); text-align:right; margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.char-counter.is-warn{color:#FFB25E;}
.char-counter.is-over{color:var(--red); font-weight:600;}

.contact-fields{margin-top:18px; border-top:1px solid var(--hairline); padding-top:14px;}
.contact-title{
  font-size:13px; color:var(--amber); margin:0 0 2px; font-weight:600;
}
.contact-title span{color:var(--text-dim); font-weight:400; font-size:12px;}
.input-prefix{display:flex; align-items:center; gap:0;}
.input-prefix span{
  background:var(--field); border:1px solid var(--hairline); border-right:none;
  padding:10px 0 10px 12px; border-radius:4px 0 0 4px;
  font-family:'IBM Plex Mono', monospace; color:var(--text-dim); font-size:14px;
}
.input-prefix input{border-radius:0 4px 4px 0; border-left:none;}
.field-note{color:var(--text-dim); font-size:11.5px; margin:12px 0 0;}

button.cta{
  margin-top:20px; width:100%;
  background:var(--green); color:#04160D; border:none;
  padding:14px; border-radius:4px; font-weight:600; font-size:14px;
  cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
}
button.cta:hover{filter:brightness(1.12);}
button.cta:disabled{opacity:0.55; cursor:not-allowed;}
.form-error{color:#FF8A98; font-size:12.5px; margin-top:10px; min-height:16px;}
.price-tag{
  font-family:'Press Start 2P', monospace; font-size:12px;
  color:var(--amber); text-align:center; margin-top:14px;
}

.footer-note{
  color:var(--text-dim); font-size:12px; text-align:center; margin-top:8px;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

/* ---------- MODAL PIX ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,11,8,0.86);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:40; overflow-y:auto;
}
.modal{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:8px; padding:28px; max-width:360px; width:100%; text-align:center;
}
.modal h3{margin:0 0 6px; font-size:19px; font-weight:600;}
.modal p{color:var(--text-dim); font-size:13.5px; margin:0 0 18px;}
.qr-real{
  width:200px; height:200px; margin:0 auto 16px;
  background:#fff; border-radius:6px; padding:8px;
  display:flex; align-items:center; justify-content:center;
}
.qr-real img{width:100%; height:100%; object-fit:contain;}
.pix-or{color:var(--text-dim); font-size:12px; margin:2px 0 8px;}
.copia-input{
  width:100%; background:var(--field); border:1px solid var(--hairline);
  color:var(--text-dim); padding:10px 12px; border-radius:4px;
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; cursor:pointer;
}
.copy-btn-full{
  width:100%; background:var(--amber); color:#1A1400; border:none;
  padding:13px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600;
  font-family:'IBM Plex Sans', sans-serif;
}
.copy-btn-full:hover{filter:brightness(1.08);}
.copy-btn-full.copied{background:var(--green); color:#04160D;}
.pix-status{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--cyan);
  margin:12px 0 6px; min-height:16px;
}
.pix-status .spinner{
  display:inline-block; width:11px; height:11px; margin-right:6px;
  border:2px solid var(--hairline); border-top-color:var(--cyan);
  border-radius:50%; animation: spin 0.8s linear infinite; vertical-align:-1px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.modal button{width:100%; margin-top:8px;}
.modal .cancel{
  background:transparent; border:1px solid var(--hairline); color:var(--text-dim);
  padding:11px; border-radius:4px; cursor:pointer; font-size:13px;
  font-family:'IBM Plex Sans', sans-serif;
}
.modal-loading{
  padding:30px 0; color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace; font-size:13px;
}

/* ---------- EFEITOS DE TROCA ---------- */
.confetti{
  position:fixed; top:-10px; width:8px; height:8px; z-index:25;
  animation: confettiFall 1.1s ease-in forwards; pointer-events:none;
}
@keyframes confettiFall{to{transform:translateY(100vh) rotate(360deg); opacity:0.2;}}

.smoke{
  position:fixed; bottom:-40px; width:120px; height:120px; border-radius:50%;
  filter:blur(18px); opacity:0.55; pointer-events:none; z-index:24;
  animation: riseSmoke 1.9s ease-out forwards;
}
@keyframes riseSmoke{
  0%{transform:translateY(0) scale(0.6); opacity:0.5;}
  100%{transform:translateY(-280px) scale(1.5); opacity:0;}
}

/* ---------- RESPONSIVO ---------- */
@media (max-width:760px){
  .wrap{padding:32px 16px 72px;}
  .billboard__lights{display:none;}
  .billboard__rig{transform:none;}   /* perspectiva borra texto em tela pequena */
  .billboard__frame{padding:10px; border-radius:8px;}
  .lastfive-grid{grid-template-columns:repeat(2, 1fr);}
  .steps{grid-template-columns:1fr; gap:8px;}
  .statusbar{justify-content:flex-start;}
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .board{
    background:radial-gradient(ellipse at 50% 0%, var(--board-bg-2) 0%, var(--board-bg) 72%);
  }
  /* A regra global acima congela a animação no keyframe 0% — que para o
     vaga-lume é opacity:0, ou seja, sumiriam todos. Parar num estado visível. */
  .ps__rays{animation:none !important; opacity:.7;}
  .ps__fly{animation:none !important; opacity:calc(.5 * var(--spark-op));}
}