@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* BASE */
body {
  background-color: #000;
  color: #ccc;
  font-family: 'Courier New', monospace;
  background-image: url('https://i.pinimg.com/736x/da/ee/3c/daee3caef906cf9b8782aefbb975764a.jpg');
  background-size: 50px 50px;
  background-repeat: repeat;
  background-attachment: fixed;

  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* SCANLINE */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.08) 2px,
    transparent 4px
  );
  pointer-events: none;
}

/* LINKS (REMOVE AZUL) */
a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a:hover {
  color: #fff;
}

a:focus,
button:focus {
  outline: none;
}

/* GRID */
.container {
  width: 900px;
  max-width: 100%;
  margin: 20px auto;

  display: grid;
  grid-template-areas:
    "header header header"
    "menu menu menu"
    "left main right"
    "footer footer footer";

  grid-template-columns: 1fr 4fr 1fr;
  gap: 8px;
  padding: 8px;
}

/* HEADER */
.header {
  grid-area: header;
  background: #1a1a1a;
  border: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

/* MENU */
.menu {
  grid-area: menu;
  background: linear-gradient(to bottom, #e6e6e6, #bfbfbf);
  border: 1px solid #666;
  box-shadow: inset 0 0 10px #999;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  overflow: hidden;
}

/* LOGO */
.logo {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* SIDEBAR METÁLICA */
.sidebar {
  padding: 10px;
  background: linear-gradient(145deg, #2a2a2a, #111);
  border: 1px solid #333;

  color: #cfcfcf;
  font-size: 13px;

  box-shadow:
    inset 0 0 10px #000,
    0 0 5px rgba(255,255,255,0.05);

  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #000,
    0 0 3px rgba(255,255,255,0.25);
}

.left { grid-area: left; }
.right { grid-area: right; }

/* TITULOS METAL */
.sidebar h2 {
  color: #ddd;
  letter-spacing: 2px;

  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #000,
    0 0 5px rgba(255,255,255,0.3);
}

/* BOTÕES METAL */
.btn {
  display: block;
  width: 100%;
  padding: 6px 0;

  background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
  border: 1px solid #444;

  color: #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 2px;

  cursor: pointer;

  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #000,
    0 0 3px rgba(255,255,255,0.25);
}

.btn:hover {
  background: linear-gradient(to bottom, #3a3a3a, #111);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
}

/* MAIN */
.main {
  grid-area: main;
  background: #111;
  color: #ccc;
  border: 1px solid #555;
  padding: 6px;
}

/* GRID DOS QUADROS */
.grade-quadro {
  display: grid;
  grid-template-areas:
    "horizontal horizontal horizontal"
    "vertical pequeno pequeno"
    "horizontal2 horizontal2 horizontal2"
    "horizontal3 horizontal3 horizontal3";
  gap: 6px;
}

/* QUADROS */
.horizontal,
.horizontal2,
.horizontal3,
.vertical,
.pequeno {
  background: #1a1a1a;
  color: #ccc;
  border: 1px solid #555;
  padding: 8px;
}

/* POSIÇÕES */
.horizontal { grid-area: horizontal; display: flex; align-items: center; gap: 10px; }
.vertical { grid-area: vertical; }
.pequeno { grid-area: pequeno; }
.horizontal2 { grid-area: horizontal2; }
.horizontal3 { grid-area: horizontal3; }

/* TEXTO */
.texto {
  font-size: 12px;
}

/* DIVISOR FANTASMA */
.divider {
  height: 1px;
  border: none;
  margin: 16px 0;

  background: linear-gradient(
    to right,
    transparent,
    #888,
    transparent
  );

  opacity: 0.6;
}

/* FOOTER */
.footer {
  grid-area: footer;
  background: #111;
  border: 1px solid #444;
  text-align: center;
  padding: 6px;
}

/* BLINK */
.updates {
  animation: blink 1s steps(1) infinite;
  color: red;
  font-family: 'Press Start 2P', monospace;
}

@keyframes blink {
  50% { opacity: 0; }
}