/* 🔥💀 HACKER TERMINAL ULTRA SINISTRO 💀🔥 */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #1a0a1a 50%, #0a1a0a 75%, #000000 100%);
  background-size: 400% 400%;
  animation: hackingBackground 10s ease infinite;
  color: #00ff41;
  font-family: 'Fira Code', 'Courier New', monospace;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Efeito Matrix Background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, #00ff41 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, #ff0040 0%, transparent 50%);
  opacity: 0.03;
  z-index: -1;
  animation: matrixGlow 15s ease-in-out infinite alternate;
}

@keyframes hackingBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes matrixGlow {
  0% { opacity: 0.03; }
  100% { opacity: 0.08; }
}

h1 {
  color: #00ff41;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 
    0 0 5px #00ff41,
    0 0 10px #00ff41,
    0 0 15px #00ff41,
    0 0 20px #00ff41;
  animation: glitchTitle 3s ease-in-out infinite;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

@keyframes glitchTitle {
  0%, 90%, 100% { 
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  10% { 
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg);
  }
  20% { 
    transform: translate(2px, -2px);
    filter: hue-rotate(180deg);
  }
  30% { 
    transform: translate(-2px, -2px);
    filter: hue-rotate(270deg);
  }
  40% { 
    transform: translate(2px, 2px);
    filter: hue-rotate(360deg);
  }
}

.section {
  margin-bottom: 30px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border: 2px solid #00ff41;
  border-radius: 10px;
  box-shadow: 
    0 0 20px rgba(0, 255, 65, 0.3),
    inset 0 0 20px rgba(0, 255, 65, 0.1);
  position: relative;
}

.section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00ff41, #ff0040, #4000ff, #ff4000, #00ff41);
  border-radius: 10px;
  z-index: -1;
  animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

button {
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, #001100 0%, #003300 50%, #001100 100%);
  color: #00ff41;
  border: 2px solid #00ff41;
  border-radius: 8px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
  transition: left 0.5s;
}

button:hover::before {
  left: 100%;
}

button:hover {
  background: linear-gradient(135deg, #002200 0%, #004400 50%, #002200 100%);
  box-shadow: 
    0 0 20px rgba(0, 255, 65, 0.5),
    inset 0 0 20px rgba(0, 255, 65, 0.1);
  transform: translateY(-2px);
  text-shadow: 0 0 10px #00ff41;
}

button:active {
  transform: translateY(0);
  box-shadow: 
    0 0 10px rgba(0, 255, 65, 0.8),
    inset 0 0 10px rgba(0, 255, 65, 0.2);
}

/* Botões especiais com cores diferentes */
button:nth-child(2) {
  background: linear-gradient(135deg, #110000 0%, #330000 50%, #110000 100%);
  border-color: #ff0040;
  color: #ff0040;
}

button:nth-child(2):hover {
  background: linear-gradient(135deg, #220000 0%, #440000 50%, #220000 100%);
  box-shadow: 
    0 0 20px rgba(255, 0, 64, 0.5),
    inset 0 0 20px rgba(255, 0, 64, 0.1);
  text-shadow: 0 0 10px #ff0040;
}

button:nth-child(4), button:nth-child(5) {
  background: linear-gradient(135deg, #001111 0%, #003333 50%, #001111 100%);
  border-color: #00ffff;
  color: #00ffff;
}

button:nth-child(4):hover, button:nth-child(5):hover {
  background: linear-gradient(135deg, #002222 0%, #004444 50%, #002222 100%);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.5),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  text-shadow: 0 0 10px #00ffff;
}

.payload-output {
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border: 2px solid #00ff41;
  border-radius: 8px;
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
  color: #00ff41;
  box-shadow: 
    0 0 20px rgba(0, 255, 65, 0.3),
    inset 0 0 20px rgba(0, 255, 65, 0.05);
  position: relative;
}

.payload-output::before {
  content: '> TERMINAL_OUTPUT_';
  position: absolute;
  top: -10px;
  left: 10px;
  background: #000;
  padding: 0 10px;
  color: #00ff41;
  font-size: 10px;
  animation: terminalCursor 1s infinite;
}

@keyframes terminalCursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.payload-output::-webkit-scrollbar {
  width: 8px;
}

.payload-output::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.payload-output::-webkit-scrollbar-thumb {
  background: #00ff41;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

.button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.button-group button {
  margin-top: 0;
  background: linear-gradient(135deg, #110011 0%, #330033 50%, #110011 100%);
  border-color: #ff00ff;
  color: #ff00ff;
  font-size: 12px;
}

.button-group button:hover {
  background: linear-gradient(135deg, #220022 0%, #440044 50%, #220022 100%);
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.5),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  text-shadow: 0 0 10px #ff00ff;
}

.advanced-mode {
  background: linear-gradient(45deg, #ff0040, #00ff41, #4000ff, #ff4000) !important;
  background-size: 400% 400% !important;
  animation: advancedPulse 2s ease infinite, hackingBackground 3s ease infinite !important;
  color: #fff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
}

@keyframes advancedPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 255, 65, 0.8);
  }
}

/* Efeito de digitação */
.typing-effect {
  border-right: 2px solid #00ff41;
  animation: typing 2s steps(40, end), blinkCursor 1s infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  0%, 50% { border-color: #00ff41; }
  51%, 100% { border-color: transparent; }
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
  
  .button-group {
    grid-template-columns: 1fr;
  }
  
  button {
    font-size: 12px;
    padding: 12px 15px;
  }
  
  .section {
    padding: 15px;
  }
}

/* 🔥💀 FOOTER DE CRÉDITOS ULTRA HACKER 💀🔥 */
.footer-credits {
  margin-top: 50px;
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #1a0a1a 50%, #0a1a0a 75%, #000000 100%);
  border-top: 3px solid #00ff41;
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
}

.footer-credits::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, #00ff41 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #ff0040 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, #00ffff 0%, transparent 50%);
  opacity: 0.05;
  z-index: 1;
  animation: footerGlow 20s ease-in-out infinite alternate;
}

@keyframes footerGlow {
  0% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.05;
  }
  100% { 
    transform: scale(1.1) rotate(5deg);
    opacity: 0.1;
  }
}

.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.credits-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.hacker-logo {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Fira Code', monospace;
  display: flex;
  align-items: center;
  gap: 5px;
}

.logo-brackets {
  color: #ff0040;
  text-shadow: 
    0 0 10px #ff0040,
    0 0 20px #ff0040,
    0 0 30px #ff0040;
  animation: bracketPulse 2s ease-in-out infinite alternate;
}

.logo-text {
  color: #00ff41;
  text-shadow: 
    0 0 10px #00ff41,
    0 0 20px #00ff41,
    0 0 30px #00ff41;
  animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes bracketPulse {
  0% { 
    transform: scale(1);
    text-shadow: 0 0 10px #ff0040, 0 0 20px #ff0040, 0 0 30px #ff0040;
  }
  100% { 
    transform: scale(1.1);
    text-shadow: 0 0 15px #ff0040, 0 0 25px #ff0040, 0 0 35px #ff0040;
  }
}

@keyframes logoGlow {
  0% { 
    text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41;
  }
  100% { 
    text-shadow: 0 0 15px #00ff41, 0 0 25px #00ff41, 0 0 35px #00ff41, 0 0 40px #00ff41;
  }
}

.credits-text {
  text-align: center;
}

.creator {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00ff41;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.highlight {
  color: #ff0040;
  text-shadow: 0 0 10px #ff0040;
  animation: highlightFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes highlightFlicker {
  0% { 
    opacity: 1;
    text-shadow: 0 0 10px #ff0040;
  }
  100% { 
    opacity: 0.8;
    text-shadow: 0 0 15px #ff0040, 0 0 20px #ff0040;
  }
}

.description {
  font-size: 1.1rem;
  color: #00ffff;
  margin-bottom: 8px;
  font-weight: 500;
}

.tech {
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
}

.credits-links {
  margin-bottom: 30px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #00ff41;
  border-radius: 25px;
  color: #00ff41;
  text-decoration: none;
  font-family: 'Fira Code', monospace;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
  transition: left 0.5s;
}

.social-link:hover::before {
  left: 100%;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 5px 20px rgba(0, 255, 65, 0.4),
    inset 0 0 20px rgba(0, 255, 65, 0.1);
  border-color: #00ffff;
  color: #00ffff;
}

.social-link[data-platform="github"]:hover {
  border-color: #ff0040;
  color: #ff0040;
  box-shadow: 
    0 5px 20px rgba(255, 0, 64, 0.4),
    inset 0 0 20px rgba(255, 0, 64, 0.1);
}

.social-link[data-platform="discord"]:hover {
  border-color: #ff00ff;
  color: #ff00ff;
  box-shadow: 
    0 5px 20px rgba(255, 0, 255, 0.4),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.social-icon {
  font-size: 1.2rem;
}

.social-text {
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 20px;
}

.terminal-line {
  background: rgba(0, 0, 0, 0.9);
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid #00ff41;
  margin-bottom: 20px;
  font-family: 'Fira Code', monospace;
  display: flex;
  align-items: center;
  gap: 10px;
}

.prompt {
  color: #ff0040;
  font-weight: 700;
}

.command {
  color: #00ff41;
  flex: 1;
}

.typing-effect {
  overflow: hidden;
  border-right: 2px solid #00ff41;
  white-space: nowrap;
  animation: typing 4s steps(40, end) infinite, blinkCursor 1s infinite;
}

@keyframes typing {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 0; }
}

@keyframes blinkCursor {
  0%, 50% { border-color: #00ff41; }
  51%, 100% { border-color: transparent; }
}

.copyright {
  text-align: center;
  color: #666;
  font-size: 0.85rem;
}

.copyright p {
  margin-bottom: 5px;
}

.warning {
  color: #ffaa00 !important;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5);
}

.matrix-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, transparent 98%, #00ff41 100%),
    linear-gradient(0deg, transparent 98%, #00ff41 100%);
  background-size: 50px 50px;
  opacity: 0.03;
  z-index: 1;
  animation: matrixMove 30s linear infinite;
}

@keyframes matrixMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Responsivo para footer */
@media (max-width: 768px) {
  .credits-main {
    flex-direction: column;
    gap: 20px;
  }
  
  .hacker-logo {
    font-size: 2.5rem;
  }
  
  .creator {
    font-size: 1.2rem;
  }
  
  .social-links {
    gap: 15px;
  }
  
  .social-link {
    padding: 10px 15px;
    font-size: 0.8rem;
  }
  
  .terminal-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .command {
    font-size: 0.8rem;
  }
}

/* 🔥💀 ADSENSE CONTAINERS CYBERPUNK STYLE 💀🔥 */
.ad-container {
  background: linear-gradient(135deg, #001122 0%, #002244 50%, #001122 100%);
  border: 2px solid #00ffff;
  border-radius: 8px;
  margin: 20px 0;
  padding: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.05);
}

.ad-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00ffff, #ff0040, #00ff41, #ff00ff, #00ffff);
  border-radius: 8px;
  z-index: -1;
  animation: adBorderGlow 4s linear infinite;
}

@keyframes adBorderGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ad-label {
  position: absolute;
  top: -12px;
  left: 15px;
  background: #000;
  color: #00ffff;
  padding: 2px 8px;
  font-family: 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  animation: adLabelBlink 2s infinite;
}

@keyframes adLabelBlink {
  0%, 70% { opacity: 1; }
  71%, 85% { opacity: 0.3; }
  86%, 100% { opacity: 1; }
}

.ad-top {
  margin-bottom: 30px;
}

.ad-center {
  margin: 25px 0;
}

.ad-container .adsbygoogle {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading placeholder para ads que não carregaram */
.ad-container .adsbygoogle[data-ad-status="unfilled"]::after {
  content: '[ LOADING CYBER ADS... ]';
  color: #00ffff;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  animation: loadingDots 2s infinite;
}

@keyframes loadingDots {
  0%, 20% { content: '[ LOADING CYBER ADS    ]'; }
  40% { content: '[ LOADING CYBER ADS.   ]'; }
  60% { content: '[ LOADING CYBER ADS..  ]'; }
  80%, 100% { content: '[ LOADING CYBER ADS... ]'; }
}

/* Responsivo para ads */
@media (max-width: 768px) {
  .ad-container {
    margin: 15px 0;
    padding: 10px;
  }
  
  .ad-label {
    font-size: 9px;
  }
}