:root{
  --bg:#0b0c10;
  --bg-elevated:#14161c;
  --bg-card:#101218;
  --line:#23262f;
  --text:#f5f3ee;
  --text-dim:#9a9ca5;
  --magenta:#ff2e63;
  --yellow:#ffd23f;
  --cyan:#00d9c0;
  --violet:#7b5cff;
  --gradient: linear-gradient(90deg, var(--magenta) 0%, var(--yellow) 33%, var(--cyan) 66%, var(--violet) 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
}

.display{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:0.95;
}

.mono{ font-family:'JetBrains Mono', monospace; }

a{color:inherit; text-decoration:none;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

.gradient-bar{ height:5px; background:var(--gradient); }

/* ---------- HEADER ---------- */

header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,16,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:1180px; margin:0 auto;
}

.logo{ display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:700; }

.logo-img{
  height:34px;
  width:auto;
  display:block;
}

.logo-text .tv{ color:var(--yellow); }

.navlinks{ display:flex; gap:32px; font-size:0.92rem; color:var(--text-dim); }
.navlinks a:hover{color:var(--text);}

.live-badge{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:0.75rem; letter-spacing:1px;
  color:var(--magenta); border:1px solid var(--magenta); border-radius:999px; padding:6px 14px;
}

.live-dot{ width:7px;height:7px;border-radius:50%; background:var(--magenta); animation:pulse 1.4s infinite; }

@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}

@media (max-width:820px){ .navlinks{display:none;} }

/* ---------- TICKER ---------- */

.ticker-outer{
  background:var(--bg-elevated); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
}

.ticker-track{
  display:inline-flex; animation:scroll-left 32s linear infinite; padding:10px 0;
}

.ticker-track span{
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--text-dim);
  margin-right:48px; display:inline-flex; align-items:center; gap:10px;
}

.ticker-track span b{color:var(--yellow); font-weight:700;}

@keyframes scroll-left{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
  .live-dot{animation:none;}
}

/* ---------- HERO ---------- */

.hero{
  position:relative; padding:88px 32px 64px;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(123,92,255,0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(255,46,99,0.14), transparent 60%);
}

.hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; letter-spacing:2px;
  color:var(--cyan); margin-bottom:18px; display:block;
}

.hero h1{ font-size:clamp(3.2rem, 9vw, 6.4rem); color:var(--text); }
.hero h1 .accent{ color:transparent; -webkit-text-stroke:2px var(--yellow); }

.hero-sub{ color:var(--text-dim); font-size:1.05rem; max-width:480px; margin-top:20px; line-height:1.6; }

.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

.btn{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.92rem;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform 0.15s ease, background 0.15s ease; display:inline-block;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{ background:var(--yellow); color:#111; }
.btn-outline{ border-color:var(--line); color:var(--text); background:transparent; }
.btn-outline:hover{border-color:var(--text);}

.onair-panel{ background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.onair-panel h3{
  font-family:'JetBrains Mono', monospace; font-size:0.75rem; letter-spacing:1.5px;
  color:var(--text-dim); margin-bottom:16px; text-transform:uppercase;
}

.onair-item{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.onair-item:first-of-type{border-top:none;}
.onair-num{ font-family:'Anton', sans-serif; font-size:1.3rem; color:var(--violet); width:28px; flex-shrink:0; }
.onair-item p{ font-size:0.88rem; line-height:1.4; }
.onair-item small{ color:var(--text-dim); font-family:'JetBrains Mono', monospace; font-size:0.7rem; }

@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }

/* ---------- SECTION TITLES ---------- */

.section{ padding:72px 32px; border-top:1px solid var(--line); }
.section-inner{ max-width:1180px; margin:0 auto; }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:40px; gap:20px; flex-wrap:wrap;
}

.section-head h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); }
.section-tag{ font-family:'JetBrains Mono', monospace; font-size:0.75rem; letter-spacing:1.5px; color:var(--text-dim); }
.mini-gradient{ height:3px; width:64px; background:var(--gradient); margin-top:14px; border-radius:2px; }

/* ---------- FEATURED STORY ---------- */

.featured{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }

.featured-media{
  aspect-ratio:4/3; border-radius:20px; border:1px solid var(--line);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}

.featured-media .glyph{ font-family:'Anton', sans-serif; font-size:5rem; color:rgba(255,255,255,0.08); z-index:1; }

.featured-media img,
.news-media img,
.archive-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tag{
  display:inline-block; font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  letter-spacing:1px; padding:5px 11px; border-radius:999px; text-transform:uppercase;
}

.tag-lancamento{background:rgba(255,46,99,0.15); color:var(--magenta);}
.tag-atualizacao{background:rgba(0,217,192,0.15); color:var(--cyan);}
.tag-esports{background:rgba(123,92,255,0.15); color:var(--violet);}
.tag-hardware{background:rgba(255,210,63,0.15); color:var(--yellow);}

.featured-text h3{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); margin:14px 0 16px; line-height:1.1; }
.featured-text p{ color:var(--text-dim); line-height:1.7; margin-bottom:24px; }

.meta-row{
  display:flex; gap:20px; margin:20px 0 4px;
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--text-dim);
}
.meta-row b{color:var(--text); font-weight:500;}

@media (max-width:860px){ .featured{grid-template-columns:1fr;} }

/* ---------- ALTERNATING NEWS ROWS ---------- */

.news-row{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:48px 0; border-top:1px solid var(--line);
}
.news-row:first-of-type{border-top:none; padding-top:0;}
.news-row.reverse .news-media{order:2;}
.news-row.reverse .news-text{order:1;}

.news-media{
  aspect-ratio:16/10; border-radius:16px; border:1px solid var(--line);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.news-media .glyph{ font-family:'Anton', sans-serif; font-size:3.4rem; color:rgba(255,255,255,0.1); }

.tema-a{background:linear-gradient(135deg,#241a3a,#3a1830);}
.tema-b{background:linear-gradient(135deg,#1c2438,#111522);}
.tema-c{background:linear-gradient(135deg,#2a1a1f,#171114);}
.tema-d{background:linear-gradient(135deg,#122a28,#0e1a1a);}
.tema-e{background:linear-gradient(135deg,#3a2a1a,#241a0f);}
.tema-f{background:radial-gradient(circle at 40% 40%, #2a2a3a, #111);}

.news-text h3{ font-size:clamp(1.3rem, 2.6vw, 1.8rem); margin:14px 0 12px; }
.news-text p{ color:var(--text-dim); line-height:1.65; margin-bottom:20px; }

@media (max-width:820px){
  .news-row, .news-row.reverse{grid-template-columns:1fr;}
  .news-row.reverse .news-media, .news-row.reverse .news-text{order:unset;}
}

/* ---------- GRID ARCHIVE ---------- */

.archive-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }

.archive-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; transition:border-color 0.15s ease, transform 0.15s ease;
}
.archive-card:hover{ border-color:var(--text-dim); transform:translateY(-4px); }

.archive-thumb{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.archive-thumb .glyph{ font-family:'Anton', sans-serif; font-size:2.2rem; color:rgba(255,255,255,0.12); }

.archive-body{padding:18px 20px 22px;}
.archive-body h4{ font-size:1.02rem; margin:12px 0 6px; }
.archive-body small{ color:var(--text-dim); font-family:'JetBrains Mono', monospace; font-size:0.72rem; }

@media (max-width:900px){ .archive-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .archive-grid{grid-template-columns:1fr;} }

/* ---------- LIVE CARD ---------- */

.live-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:48px;
  text-align:center;
}

.live-card-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  letter-spacing:1px;
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 16px;
}

.live-status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-dim);
}

.live-status-dot.on-air{
  background:var(--magenta);
  animation:pulse 1.4s infinite;
}

/* ---------- CHAT ---------- */

.chat-box{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}

.chat-messages{
  max-height:360px;
  overflow-y:auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chat-empty{
  color:var(--text-dim);
  font-size:0.9rem;
  text-align:center;
}

.chat-msg{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:0.92rem;
  line-height:1.5;
}

.chat-msg .apelido{
  color:var(--cyan);
  font-weight:600;
  flex-shrink:0;
}

.chat-msg .hora{
  color:var(--text-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  flex-shrink:0;
}

.chat-form{
  display:flex;
  gap:10px;
  padding:18px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}

.chat-form input{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 16px;
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  font-size:0.9rem;
}

.chat-form input:focus{ outline:2px solid var(--cyan); outline-offset:2px; }

#chat-apelido{ flex:0 0 160px; }
#chat-mensagem{ flex:1 1 240px; }

@media (max-width:560px){
  #chat-apelido, #chat-mensagem{ flex:1 1 100%; }
}

/* ---------- CADASTRO ---------- */

.signup-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:36px;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.signup-field{ display:flex; flex-direction:column; gap:8px; }

.signup-field label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:1px;
  color:var(--text-dim);
  text-transform:uppercase;
}

.signup-field input{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  font-size:0.95rem;
}

.signup-field input:focus{ outline:2px solid var(--cyan); outline-offset:2px; }

.signup-submit{ width:100%; text-align:center; }

.signup-feedback{
  font-size:0.85rem;
  text-align:center;
  min-height:1.2em;
}

.signup-feedback.sucesso{ color:var(--cyan); }
.signup-feedback.erro{ color:var(--magenta); }

/* ---------- MANIFESTO ---------- */

.manifesto{ background:var(--bg-elevated); }
.manifesto h2{ font-size:clamp(2.2rem, 5.5vw, 3.6rem); color:var(--cyan); max-width:760px; }

.manifesto-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:32px; }
.manifesto-cols p{ color:var(--text-dim); line-height:1.75; }

@media (max-width:800px){ .manifesto-cols{grid-template-columns:1fr;} }

.pitch-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:20px;
}
.pitch-row p{ color:var(--text-dim); font-size:1.05rem; }

/* ---------- NEWSLETTER ---------- */

.newsletter-box{
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:44px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
}
.newsletter-box h3{ font-size:1.7rem; }
.newsletter-box p{ color:var(--text-dim); margin-top:12px; line-height:1.6; }

.newsletter-form{ display:flex; gap:10px; }
.newsletter-form input{
  flex:1; background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:13px 18px; color:var(--text); font-family:'Space Grotesk', sans-serif; font-size:0.92rem;
}
.newsletter-form input:focus{ outline:2px solid var(--cyan); outline-offset:2px; }
.newsletter-form button{
  background:var(--yellow); color:#111; border:none; border-radius:999px; padding:13px 24px;
  font-weight:700; font-family:'Space Grotesk', sans-serif; cursor:pointer; flex-shrink:0;
}

@media (max-width:760px){ .newsletter-box{grid-template-columns:1fr;} }

/* ---------- FOOTER ---------- */

footer{ padding:44px 32px 30px; }

.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:32px; padding-bottom:32px;
}

.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-cols a{ display:block; color:var(--text-dim); font-size:0.9rem; margin-bottom:10px; }
.footer-cols a:hover{color:var(--text);}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line); color:var(--text-dim);
  font-size:0.8rem; flex-wrap:wrap; gap:12px;
}

.footer-desc{ color:var(--text-dim); max-width:280px; font-size:0.9rem; line-height:1.6; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
