@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');


body {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    background: #000022;
    color: #056CF2;
    cursor: crosshair;
    overflow-x: hidden;
}

.glitch-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/glitch.gif') repeat;
    opacity: 0.05;
    z-index: -1;
}

.header {
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #030A8C;
}

.energy-bar {
    margin: 10px auto;
    text-align: center;
    width: 80%;
}

.bar {
    background: #030A8C;
    height: 10px;
    border: 1px solid #030A8C;
    overflow: hidden;
}

.fill {
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #05AFF2, #00F2F2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.main-content-area {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.locked-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.lock-item {
    border: 1px solid #030A8C;
    padding: 10px;
    width: 150px;
    cursor: pointer;
    transition: background 0.3s;
}

.lock-item:hover {
    background: rgba(5, 108, 242, 0.1);
}

.footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #030A8C;
    font-size: 0.8em;
}

.countdown-section {
    width: 100%;
    max-width: 400px;
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #030A8C;
    text-align: center;
}

.countdown-section h2 {
    margin-bottom: 10px;
}

.countdown-image {
    width: 300px;
    height: auto;
    margin-bottom: 10px;
}

.countdown-timer {
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    color: #00F2F2;
    letter-spacing: 3px;
    text-shadow: 0 0 10px #00F2F2;
}


.scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #05AFF2, #00F2F2, transparent);
    opacity: 0.6;
    z-index: 9999;
    animation: scan 3s linear infinite;
    box-shadow: 0 0 10px #05AFF2, 0 0 20px #00F2F2;
}

.scan-line:nth-child(1) { animation-delay: 0s; }
.scan-line:nth-child(2) { animation-delay: 1s; }
.scan-line:nth-child(3) { animation-delay: 2s; }

@keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
}

.chaos {
    animation: chaos-glitch 0.1s infinite;
}

@keyframes chaos-glitch {
    0% { transform: translate(0, 0) rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
    25% { transform: translate(2px, -2px) rotate(1deg); filter: hue-rotate(20deg) brightness(1.2); }
    50% { transform: translate(-2px, 2px) rotate(-1deg); filter: hue-rotate(-20deg) brightness(0.8); }
    75% { transform: translate(2px, 2px) rotate(2deg); filter: hue-rotate(40deg) brightness(1.1); }
    100% { transform: translate(0, 0) rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
}

.fex-logo {
    position: relative;
    display: block;
    margin: 10px;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fex-logo img {
    width: 100px;
    height: auto;
    transition: transform 0.3s ease;
}

.fex-logo img:hover {
    transform: scale(1.1) rotate(5deg);
}

.header h1 {
    font-size: 1.8em;
    margin: 0;
}

.site-title {
    margin-left: 0;
    white-space: normal;
    text-align: center;
}

#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/background-login.png') no-repeat center center / cover, #000022;
    color: #056CF2;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    font-family: 'IBM Plex Mono', monospace;
    
}
#login-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 34, 0.7); /* azul escuro com 70% de transparência */
    z-index: 1;
}


.login-box {
    position: relative;
    z-index: 2;
    border: 2px solid #030A8C;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 20px #030A8C;
    background-color: rgba(0, 0, 34, 0.8); /* azul escuro com 80% transparência */
    border-radius: 10px; /* opcional: deixa as bordas arredondadas */
}


.login-box .label {
    color: #05AFF2;
}

#login-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid #030A8C;
    color: #05AFF2;
    font-family: inherit;
    cursor: url('../img/cursor-click.cur'), pointer;
    transition: background 0.3s;
}

#login-btn:hover {
    background: rgba(5, 175, 242, 0.2);
}

.login-image {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

#noise-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.15;
}

#scanline-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.6;
}

.user-info {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 34, 0.6);
    border: 1px solid #030A8C;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10000;
}

.welcome-text {
    color: #05AFF2;
    font-family: 'IBM Plex Mono', monospace;
    margin-right: 10px;
    font-size: 14px;
}

.profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #030A8C;
}

button {
    background: none;
    border: 1px solid #030A8C;
    color: #05AFF2;
    padding: 10px 20px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: rgba(5, 175, 242, 0.2);
}

a, a:visited {
    color: #05AFF2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.terminal-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
}

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

.profile-container {
    position: relative;
    z-index: 10; /* acima dos efeitos de noise e scanline */
    background: rgba(0,0,34,0.4); /* fundo preto com 80% opacidade */
    border: 2px solid #056CF2;
    border-radius: 10px;
    box-shadow: 0 0 20px #00F2F2;
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
    color: #05AFF2;
    font-family: 'IBM Plex Mono', monospace;
}

.profile-container h1 {
    font-family: 'Orbitron', sans-serif;
    color: #00F2F2;
    text-shadow: 0 0 10px #00F2F2;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
}


.profile-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #056CF2;
}

.profile-pic-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #030A8C;
    margin-bottom: 20px;
}

button {
    margin-top: 10px;
}


.missions {
    color: #00F2F2;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid #030A8C;
    color: #05AFF2;
    cursor: pointer;
}

button:hover {
    background: rgba(5, 175, 242, 0.2);
}


@keyframes border-flicker {
    0%   { box-shadow: 0 0 5px #00F2F2; }
    20%  { box-shadow: 0 0 10px #05AFF2; }
    40%  { box-shadow: 0 0 5px #056CF2; }
    60%  { box-shadow: 0 0 15px #00F2F2; }
    80%  { box-shadow: 0 0 10px #05AFF2; }
    100% { box-shadow: 0 0 5px #056CF2; }
}

.login-box, .countdown-section, .user-info {
    animation: border-flicker 2s infinite;
}

body {
    cursor: url('../img/cursor-retro.cur'), auto;
}

button, a {
    cursor: url('../img/cursor-click.cur'), pointer;
}
@keyframes pulse-ponto-zero {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.1); }
    50%  { transform: scale(1); }
    75%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#ponto-zero {
    width: 100px;
    height: 100px;
    animation: pulse-ponto-zero 4s infinite ease-in-out;
}
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.button-container button {
    margin: 10px 0;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid #030A8C;
    color: #05AFF2;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: background 0.3s;
}

.button-container button:hover {
    background: rgba(5, 175, 242, 0.2);
}
.navbar {
    background: rgba(0, 0, 34, 0.9);
    padding: 10px 20px;
    border-bottom: 2px solid #030A8C;
    position: sticky;
    top: 0;
    z-index: 10000;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.navbar li {
    display: inline;
}

.navbar a {
    color: #05AFF2;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s, color 0.3s;
}

.navbar a:hover {
    background: rgba(5, 175, 242, 0.2);
    color: #00F2F2;
}

.map-container {
    position: relative;
    display: inline-block;
}

.zoom-buttons {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.zoom-buttons button {
    padding: 5px 10px;
    font-size: 20px;
    background: rgba(0,0,0,0.6);
    color: #05AFF2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.zoom-buttons button:hover {
    background: rgba(5, 175, 242, 0.6);
}

.countdown-image {
    max-width: 100%;
    height: auto;
    transition: opacity 0.5s ease;
}

.evento-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: rgba(0,0,34,0.8);
  border: 2px solid #056CF2;
  box-shadow: 0 0 20px #00F2F2;
  border-radius: 10px;
  color: #05AFF2;
  font-family: 'IBM Plex Mono', monospace;
}

.evento-banner {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.batalha-banner {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.evento-info, .lineup, .batalha, .expectativa {
  margin-bottom: 30px;
}

.lineup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.artista {
  flex: 1 1 45%;
  text-align: center;
}

.artista img {
  width: 100%;
  max-width: 200px;
  border: 2px solid #030A8C;
  box-shadow: 0 0 15px #00F2F2;
  border-radius: 8px;
}

.batalha button {
  background: transparent;
  border: 2px solid #05AFF2;
  padding: 10px 20px;
  color: #05AFF2;
  font-family: inherit;
  cursor: pointer;
  margin-top: 10px;
}

.batalha button:hover {
  background: rgba(0, 242, 242, 0.1);
}

@media (max-width: 768px) {
  .lineup-grid {
    flex-direction: column;
    align-items: center;
  }

  .artista {
    flex: 1 1 100%;
  }
}
.perfil-tatico {
  background: #000022;
  color: #00F2F2;
  font-family: 'IBM Plex Mono', monospace;
}

.tactical-container {
  position: relative;
  z-index: 10; /* acima dos efeitos */
  background: rgba(0, 0, 0, 0.4); /* fundo preto com transparência */
  border: 2px solid #056CF2;
  border-radius: 10px;
  box-shadow: 0 0 20px #00F2F2;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  color: #05AFF2;
  font-family: 'IBM Plex Mono', monospace;
}


.tactical-header {
  font-size: 1.5em;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid #05AFF2;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.tactical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "img chip chip"
    "finger data data"
    "finger stats stats";
  gap: 20px;
}

.tactical-image {
  grid-area: img;
  border: 1px solid #056CF2;
  padding: 5px;
}

.tactical-chip {
  grid-area: chip;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #030A8C;
}

.tactical-fingerprint {
  grid-area: finger;
  border: 1px solid #030A8C;
  padding: 10px;
  text-align: center;
}

.tactical-data {
  grid-area: data;
  border: 1px solid #056CF2;
  padding: 15px;
  font-size: 0.95em;
}

.tactical-stats {
  grid-area: stats;
  border: 1px solid #030A8C;
  padding: 10px;
  text-align: center;
}

.tactical-grid img {
  width: 100%;
  height: auto;
  filter: contrast(120%) brightness(120%);
}
#noise-canvas, #scanline-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#noise-canvas {
  z-index: 1;
  opacity: 0.15;
}

#scanline-canvas {
  z-index: 2;
  opacity: 0.6;
}
.evento-container {
  position: relative; /* necessário para z-index funcionar */
  z-index: 10; /* maior que os canvas */
  background: rgba(0, 0, 34, 0.4);
  border: 2px solid #030A8C;
  border-radius: 10px;
  box-shadow: 0 0 20px #00F2F2;
  padding: 30px;
  color: #05AFF2;
  font-family: 'IBM Plex Mono', monospace;
}

body,
.evento-container,
.navbar,
p, button {
  font-family: 'Orbitron', sans-serif;
}

.evento-container h1,h2 {
  color: #00F2F2;
  text-shadow: 0 0 10px #00F2F2;
}



/* Padrão Mobile (até 767px) */
.navbar ul {
    flex-direction: column;
    gap: 10px;
    font-size: 20px;
}

.evento-container,
.profile-container,
.tactical-container {
    width: 100%;
    padding: 15px;
}

.lineup-grid,
.camera-grid {
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.artista, .camera-feed {
    flex: 1 1 100%;
}

.evento-page .navbar a {
    font-size: 18px;
}

.perfil-tatico .navbar a {
        font-size: 18px;
    }

.barra-aovivo .navbar a {
        font-size: 18px;
    }

.barra-codigo .navbar a {
        font-size: 18px;
    }

.camera-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 câmera por linha */
    gap: 10px;
    margin: 10px 0;
}

.camera-feed img {
        width: 100%;
        height: 300px; /* Força maior no mobile */
        object-fit: cover;
        display: block;
    }

.tactical-header {
    font-size: 20px; /* Mobile First */
    color: #05AFF2;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
}

.tactical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.tactical-stats img {
    width: 100%;
    height: auto;
}

/* Mobile já é full width, mas se quiser ampliar visualmente: */
.tactical-stats {
    margin-top: 10px;
}

.tactical-data p {
    font-size: 16px; /* Mobile First */
    line-height: 1.5;
    color: #05AFF2;
    margin-bottom: 10px;
    font-family: 'IBM Plex Mono', monospace;
}

.tactical-fingerprint img {
    width: 80%;  /* Mobile First */
    height: 80%;
    display: block;
    margin: 0 auto;
}

.tactical-fingerprint {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px; /* FORÇA altura no mobile */
}

.tactical-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tactical-chip img {
    width: 90%;
    height: auto;
    object-fit: cover;
    display: block;
    max-width: 200px; /* Limite para desktop */
}

/* Tablets (mínimo 768px) */
@media (min-width: 768px) {
    .navbar ul {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        font-size: 24px;
    }

    .evento-container,
    .profile-container,
    .tactical-container {
        width: 80%;
        padding: 20px;
    }

    .lineup-grid,
    .camera-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .artista, .camera-feed {
        flex: 1 1 45%;
    }

    .evento-page .navbar a {
        font-size: 55px;
    }

    .perfil-tatico .navbar a {
        font-size: 55px;
    }

    .barra-aovivo .navbar a {
        font-size: 55px;
    }

    .barra-codigo .navbar a {
        font-size: 55px;
    }

    .camera-grid {
        grid-template-columns: 1fr; /* 2 câmeras lado a lado */
        gap: 15px;
    }

    .camera-feed img {
        height: 250px;
    }

    .tactical-header {
        font-size: 26px;
    }

    .tactical-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .tactical-stats img {
        width: 100%;
    }

    .tactical-data p {
        font-size: 16px;
    }

    .tactical-fingerprint img {
        width: 100%;
    }

    .tactical-fingerprint {
        height: 480px;
    }

    .tactical-chip {
        height: auto;
    }

    .tactical-chip img {
        max-width: 500px;
    }

}

/* Desktop (mínimo 992px) */
@media (min-width: 992px) {
    .navbar ul {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        font-size: 24px;
    }

    .evento-container,
    .profile-container,
    .tactical-container {
        max-width: 1000px;
        padding: 35px;
    }
    

    .navbar a {
        font-size: 16px;
        padding: 10px 15px;
    }

    .artista, .camera-feed {
        flex: 1 1 30%;
    }

    .evento-page .navbar a {
        font-size: 24px;
    }

    .perfil-tatico .navbar a {
        font-size: 24px;
    }

    .barra-aovivo .navbar a {
        font-size: 24px;
    }

    .barra-codigo .navbar a {
        font-size: 24px;
    }

    .camera-grid {
        grid-template-columns: 1fr 1fr; /* continua 2 câmeras */
        gap: 20px;
    }

    .profile-container {
        max-width: 1000px;
        padding: 20px;
    }

    .camera-feed img {
        height: 200px;
    }

    .tactical-header {
        font-size: 32px;
    }

    .tactical-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .tactical-stats img {
        width: 100%;
    }

    .tactical-data p {
        font-size: 20px;
    }

    .tactical-fingerprint img {
        width: 120%;
    }

    .tactical-fingerprint {
        height: 600px;
    }

    .tactical-chip {
        height: 470px;
        width: 470px;
    }

    .tactical-chip img {
        max-width: 500px;
        max-height: 500px;
    }


}

/* Ajustes Específicos Mobile-First */

/* .artista maior no mobile */
.artista img {
    max-width: 350px; /* aumentei de 200px para 250px */
}

/* .user-info menor no mobile */
.user-info {
    padding: 3px 8px;
    font-size: 12px;
}

.user-info .welcome-text {
    font-size: 12px;
}

.user-info .profile-pic {
    width: 30px;
    height: 30px;
}

/* Navbar da evento.html com texto maior no mobile */
.navbar a {
    flex-direction: column;
    font-size: 19px;
}

/* Códigos Secreto (codigo.html) Mobile First */

/* Padrão Mobile */
.barra-codigo .terminal {
    width: 90%;
    margin: 20px auto;
    padding: 15px;
    font-size: 14px;
}

/* Tablets */
@media (min-width: 768px) {
    .barra-codigo .terminal {
        width: 80%;
        margin: 40px auto;
        padding: 20px;
        font-size: 16px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .barra-codigo .terminal {
        max-width: 800px;
        margin: 50px auto;
        padding: 25px;
        font-size: 18px;
    }
}

.tactical-fingerprint img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}