/* =========================================================================
   AlligatorCON BR4z1l  :: 
   ========================================================================= */

:root {
  --bg:        #000000;
  --bg-panel:  #050805;
  --bg-box:    #0a0f0a;
  --green:     #00ff41;   /* verde-terminal principal */
  --green-dim: #00b32d;
  --amber:     #ffb000;   /* acento ambar */
  --cyan:      #00e5ff;   /* links */
  --magenta:   #ff2fb0;   /* glitch */
  --text:      #33ff66;
  --dim:       #2f7a3f;
  --border:    #1f3a24;
  --border-hi: #00ff41;
}

/* ---- reset leve ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", "Courier New", Courier, monospace;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  /* scanlines CRT sutis */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 65, 0.03) 0px,
    rgba(0, 255, 65, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--amber); text-decoration: underline; background: rgba(0,255,65,0.08); }
p { margin: 0 0 .8em; }
strong { color: var(--green); }
em { color: var(--amber); font-style: normal; }
hr.hr { border: 0; border-top: 1px dashed var(--border); margin: .8em 0; }

.dim { color: var(--dim); }
.small { font-size: 12px; }
.center { text-align: center; }

/* ---- matrix canvas atras do topo ---- */
#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
}

/* ---- barra de status / marquee ---- */
.statusbar {
  position: relative;
  z-index: 2;
  background: var(--green-dim);
  color: #000;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--green);
  padding: 2px 0;
}
.statusbar marquee { padding: 1px 0; }

/* ---- container ---- */
.page {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8px 24px;
}

/* ---- TOPO / LOGO ---- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--border-hi);
  border-top: none;
  background: linear-gradient(180deg, #001a0a, #000);
  padding: 10px 14px;
  margin-bottom: 6px;
}
.topbar__logo { flex: 1 1 320px; min-width: 0; }
.ascii-logo {
  margin: 0;
  color: var(--green);
  text-shadow: 0 0 6px rgba(0,255,65,0.7);
  font-size: 8px;
  line-height: 1.05;
  overflow-x: auto;
  white-space: pre;
}
.ascii-tag {
  margin-top: 6px;
  color: var(--amber);
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255,176,0,.5);
}
.tagline { color: var(--green-dim); font-size: 13px; margin-top: 2px; }

.topbar__mascot {
  flex: 0 0 auto;
  border: 2px solid var(--border);
  padding: 3px;
  background: #000;
  line-height: 0;
}
.topbar__mascot img {
  display: block;
  width: 220px;
  max-width: 40vw;
  height: auto;
  image-rendering: auto;
}

/* glitch simples no BR4z1l */
.glitch {
  color: var(--magenta);
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--amber);
}

/* piscas */
.blink-slow { animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { opacity: .25; } }

/* ---- NAV ---- */
.navbar {
  border: 2px solid var(--border-hi);
  background: #010c04;
  margin-bottom: 6px;
}
.navbar__toggle {
  display: none;
  width: 100%;
  background: #001a0a;
  color: var(--green);
  border: none;
  border-bottom: 1px solid var(--border);
  font: inherit;
  font-weight: bold;
  padding: 8px;
  cursor: pointer;
}
.navbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}
.navbar__links a {
  color: var(--green);
  padding: 2px 4px;
  white-space: nowrap;
}
.navbar__links a:hover { color: #000; background: var(--green); text-decoration: none; }

/* ---- GRID 3 COLUNAS ---- */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 6px;
  align-items: stretch;
}
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col--left { height: 100%; }

/* ---- BOX generico (janela) ---- */
.box {
  border: 2px solid var(--border);
  background: var(--bg-box);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(0,255,65,.05);
}
.box__title {
  background: linear-gradient(180deg, #00330f, #001a08);
  color: var(--green);
  border-bottom: 1px solid var(--border-hi);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .5px;
  text-shadow: 0 0 4px rgba(0,255,65,.6);
}
.box__body { padding: 10px 10px; }
.box--highlight { border-color: var(--amber); }
.box--highlight .box__title { color: var(--amber); border-color: var(--amber); background: #201400; }

/* listas de diretorio */
.dirlist { list-style: none; margin: 0; padding: 6px 8px; }
.dirlist li { margin: 0; padding: 1px 0; }
.dirlist a { color: var(--cyan); display: block; padding: 1px 3px; }
.dirlist a:hover { color: #000; background: var(--cyan); text-decoration: none; }

/* separadores / preformat ASCII */
.ascii-sep { color: var(--border); margin: .6em 0; overflow-x: auto; white-space: pre; font-size: 11px; }
.ascii-map, .ascii-logo { overflow-x: auto; }
.ascii-map { color: var(--green-dim); font-size: 11px; margin: .4em 0 0; white-space: pre; }

/* ---- ESPACO RESERVADO PARA MIDIA / BANNER VERTICAL ---- */
.box--banner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.box--banner .box__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.media-placeholder {
  background: #010c04;
  color: var(--dim);
  font-size: 11px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
.media-placeholder span {
  display: flex;
  width: 100%;
  height: 100%;
}
.media-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* ---- NEWS ---- */
.news { border-left: 3px solid var(--border); padding: 2px 0 8px 10px; margin-bottom: 8px; }
.news__date { color: var(--amber); font-size: 12px; }
.news__item strong { color: var(--green); }

/* ticks */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding: 1px 0; }

/* ---- TABELA RETRO ---- */
.tablewrap { overflow-x: auto; }
.retro-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.retro-table th, .retro-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}
.retro-table th { background: #00250c; color: var(--green); }
.retro-table tbody tr:nth-child(even) { background: rgba(0,255,65,.04); }

/* ---- SPEAKERS ---- */
.speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.speaker { border: 1px solid var(--border); padding: 8px; text-align: center; background: #010c04; }
.speaker__avatar {
  width: 46px; height: 46px; margin: 0 auto 6px;
  border: 1px dashed var(--green-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--green-dim);
}
.speaker__name { color: var(--green); font-weight: bold; font-size: 13px; }
.speaker__topic { color: var(--dim); font-size: 12px; }

/* ---- INGRESSOS ---- */
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.tier { border: 1px solid var(--border); padding: 8px; text-align: center; background: #010c04; }
.tier__name { color: var(--green); font-size: 12px; }
.tier__price { color: var(--amber); font-size: 20px; font-weight: bold; margin: 4px 0; }
.tier__note { color: var(--dim); font-size: 11px; }

/* ---- BOTOES ---- */
.btn {
  font: inherit; font-weight: bold;
  color: var(--green); background: #001a0a;
  border: 2px outset var(--green-dim);
  padding: 6px 12px; cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--green); color: #000; }
.btn:disabled { color: var(--dim); border-color: var(--border); cursor: not-allowed; opacity: .7; }
.btn--sm { padding: 3px 8px; }

/* ---- BOX destaque direita ---- */
.big { font-size: 32px; color: var(--amber); font-weight: bold; text-shadow: 0 0 8px rgba(255,176,0,.5); }
.big-sm { font-size: 22px; color: var(--green); font-weight: bold; }

/* ---- MAILING LIST ---- */
.ml-form { display: flex; gap: 4px; }
.ml-form input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 12px;
  background: #000; color: var(--green);
  border: 1px solid var(--border); padding: 4px 6px;
}
.ml-form input:focus { outline: 1px solid var(--green); }

/* ---- SPONSORS ---- */
.sponsor-slot {
  border: 1px dashed var(--border); color: var(--dim);
  padding: 12px; margin-bottom: 6px; font-size: 12px;
}

/* ---- ADS ---- */
.box--ad .box__title { color: var(--dim); }
.ad {
  border: 1px dashed var(--amber); color: var(--amber);
  text-align: center; padding: 14px 6px; background: #100b00;
}
.ad--tall { padding: 40px 6px; }
.ad__pixels { font-size: 11px; color: var(--dim); }
.ad__txt { font-weight: bold; margin: 6px 0; }
.ad__cta { font-size: 11px; }

/* ---- RODAPE ---- */
.footer {
  border: 2px solid var(--border);
  border-top: 2px solid var(--border-hi);
  margin-top: 8px; padding: 10px 12px; text-align: center;
  background: var(--bg-panel); font-size: 12px;
}
.footer__ring { color: var(--green); }
.counter {
  color: var(--amber); font-weight: bold; letter-spacing: 2px;
  background: #000; border: 1px solid var(--border); padding: 0 4px;
}
.clock { color: var(--cyan); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .col--left  { order: 2; }
  .col--center{ order: 1; }
  .col--right { order: 3; }
  .ascii-logo { font-size: 6px; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar__mascot img { max-width: 70vw; width: 100%; }
  .ascii-tag { font-size: 15px; }

  .navbar__toggle { display: block; }
  .navbar__links {
    display: none;
    flex-direction: column;
    padding: 0;
  }
  .navbar__links.is-open { display: flex; }
  .navbar__links li { border-top: 1px solid var(--border); }
  .navbar__links a { display: block; padding: 8px; }
}

/* respeitar quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .blink-slow { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
  #matrix { display: none; }
  .statusbar marquee { animation: none; }
}