/**
 * 🕷️ ANT TEA GAMES — Broken Variant Styles
 * 
 * Maximum chaos, corrupted everything, barely functional
 */

/* Root Variables */
:root {
  --broken-primary: #ff0000;
  --broken-secondary: #000000;
  --broken-accent: #333333;
  --broken-text: #ffffff;
  --broken-bg: #000000;
}

/* Base Styles */
body {
  background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
  background-size: 20px 20px;
  color: var(--broken-text);
  font-family: 'Comic Sans MS', cursive;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  animation: chaosGlitch 1s infinite;
  transform: skew(-1deg, 0.5deg);
}

@keyframes chaosGlitch {
  0% { 
    background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
    transform: skew(-1deg, 0.5deg);
  }
  25% { 
    background: linear-gradient(45deg, #000 0%, #ff0000 25%, #000 50%, #ff0000 75%, #000 100%);
    transform: skew(1deg, -0.5deg);
  }
  50% { 
    background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
    transform: skew(-0.5deg, 1deg);
  }
  75% { 
    background: linear-gradient(45deg, #000 0%, #ff0000 25%, #000 50%, #ff0000 75%, #000 100%);
    transform: skew(0.5deg, -1deg);
  }
  100% { 
    background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
    transform: skew(-1deg, 0.5deg);
  }
}

/* Navigation */
.broken-nav {
  background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
  background-size: 20px 20px;
  border-bottom: 5px dashed var(--broken-primary);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: glitch 1s infinite;
  transform: skew(-2deg, 1deg);
}

@keyframes glitch {
  0%, 100% { transform: skew(-2deg, 1deg); }
  25% { transform: skew(2deg, -1deg); }
  50% { transform: skew(-1deg, 2deg); }
  75% { transform: skew(1deg, -2deg); }
}

.chaos-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--broken-primary);
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

@keyframes textGlitch {
  0%, 100% { 
    color: #ff0000;
    text-shadow: 2px 2px 0px #000;
  }
  25% { 
    color: #00ff00;
    text-shadow: -2px 2px 0px #000;
  }
  50% { 
    color: #0000ff;
    text-shadow: 2px -2px 0px #000;
  }
  75% { 
    color: #ffff00;
    text-shadow: -2px -2px 0px #000;
  }
}

.brand-subtitle {
  font-size: 0.8rem;
  color: var(--broken-text);
  margin-left: 0.5rem;
  animation: flicker 0.5s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-links a {
  color: var(--broken-text);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.3s;
  animation: linkGlitch 2s infinite;
}

@keyframes linkGlitch {
  0%, 90%, 100% { 
    color: #ffffff;
    transform: skew(0deg);
  }
  5% { 
    color: #ff0000;
    transform: skew(-5deg, 2deg);
  }
  10% { 
    color: #00ff00;
    transform: skew(5deg, -2deg);
  }
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--broken-primary);
  text-shadow: 2px 2px 0px #000;
  filter: hue-rotate(180deg) contrast(2);
}

/* Hero Section */
.broken-hero {
  background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
  background-size: 15px 15px;
  padding: 4rem 2rem;
  text-align: center;
  animation: chaosGlitch 1s infinite;
}

.chaos-title {
  font-size: 3rem;
  font-weight: bold;
  color: var(--broken-primary);
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: titleGlitch 0.5s infinite;
  transform: skew(-5deg, 2deg);
}

@keyframes titleGlitch {
  0%, 100% { 
    color: #ff0000;
    transform: skew(-5deg, 2deg);
  }
  25% { 
    color: #00ff00;
    transform: skew(5deg, -2deg);
  }
  50% { 
    color: #0000ff;
    transform: skew(-2deg, 5deg);
  }
  75% { 
    color: #ffff00;
    transform: skew(2deg, -5deg);
  }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--broken-text);
  margin: 0 0 2rem 0;
  animation: flicker 1s infinite;
}

.broken-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.chaos-btn {
  background: var(--broken-primary);
  color: var(--broken-text);
  border: 2px dashed var(--broken-primary);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  animation: buttonGlitch 0.8s infinite;
  transform: skew(-3deg, 1deg);
}

@keyframes buttonGlitch {
  0%, 100% { 
    background: #ff0000;
    transform: skew(-3deg, 1deg);
  }
  50% { 
    background: #000;
    transform: skew(3deg, -1deg);
  }
}

.chaos-btn:hover {
  background: var(--broken-secondary);
  color: var(--broken-primary);
  animation: buttonHoverGlitch 0.2s infinite;
}

@keyframes buttonHoverGlitch {
  0%, 100% { 
    background: #000;
    color: #ff0000;
  }
  50% { 
    background: #ff0000;
    color: #000;
  }
}

/* Errors Section */
.errors-section {
  padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.errors-section h2 {
  color: var(--broken-primary);
  font-size: 2rem;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

.error-messages {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.error-message {
  background: var(--broken-secondary);
  border: 2px dashed var(--broken-primary);
  padding: 2rem;
  animation: errorGlitch 1.5s infinite;
  transform: skew(-2deg, 1deg);
}

@keyframes errorGlitch {
  0%, 100% { 
    transform: skew(-2deg, 1deg);
    border-color: #ff0000;
  }
  50% { 
    transform: skew(2deg, -1deg);
    border-color: #00ff00;
  }
}

.error-code {
  color: var(--broken-primary);
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

/* Broken Features Section */
.broken-features-section {
  background: var(--broken-accent);
  padding: 4rem 2rem;
  text-align: center;
}

.broken-features-section h2 {
  color: var(--broken-primary);
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 2rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

.broken-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.broken-card {
  background: var(--broken-secondary);
  border: 2px dashed var(--broken-primary);
  padding: 2rem;
  text-align: center;
  animation: cardGlitch 2s infinite;
  transform: skew(-3deg, 2deg);
}

@keyframes cardGlitch {
  0%, 100% { 
    transform: skew(-3deg, 2deg);
    border-color: #ff0000;
  }
  33% { 
    transform: skew(3deg, -2deg);
    border-color: #00ff00;
  }
  66% { 
    transform: skew(-2deg, 3deg);
    border-color: #0000ff;
  }
}

.chaos-border {
  border: 2px dashed var(--broken-primary);
  background: linear-gradient(45deg, #ff0000 0%, #000 25%, #ff0000 50%, #000 75%, #ff0000 100%);
  background-size: 10px 10px;
  padding: 2rem;
  margin-bottom: 1rem;
  animation: glitch 0.5s infinite;
}

.glitch-text {
  color: var(--broken-primary);
  font-size: 2rem;
  animation: textGlitch 0.3s infinite;
}

.broken-title {
  color: var(--broken-primary);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 1rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
  transform: skew(-5deg, 2deg);
}

.broken-description {
  font-size: 1rem;
  margin: 1rem 0;
  line-height: 1.6;
  animation: flicker 1s infinite;
}

.broken-btn {
  background: var(--broken-primary);
  color: var(--broken-text);
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  animation: buttonGlitch 0.8s infinite;
  transform: skew(-3deg, 1deg);
}

.broken-btn:hover {
  background: var(--broken-secondary);
  color: var(--broken-primary);
  animation: buttonHoverGlitch 0.2s infinite;
}

/* System Status Section */
.system-status-section {
  padding: 4rem 2rem;
  text-align: center;
}

.system-status-section h2 {
  color: var(--broken-primary);
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 2rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.status-item {
  background: var(--broken-secondary);
  border: 2px dashed var(--broken-primary);
  padding: 1rem;
  animation: errorGlitch 1.5s infinite;
  transform: skew(-2deg, 1deg);
}

.status-label {
  color: var(--broken-text);
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.status-value {
  color: var(--broken-primary);
  font-weight: bold;
  text-transform: uppercase;
  animation: textGlitch 0.3s infinite;
}

/* Crash Log Section */
.crash-log-section {
  background: var(--broken-accent);
  padding: 4rem 2rem;
  text-align: center;
}

.crash-log-section h2 {
  color: var(--broken-primary);
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 2rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

.crash-log {
  max-width: 800px;
  margin: 0 auto;
  background: var(--broken-secondary);
  border: 2px dashed var(--broken-primary);
  padding: 2rem;
  text-align: left;
  font-family: 'Courier New', monospace;
  animation: errorGlitch 1.5s infinite;
  transform: skew(-2deg, 1deg);
}

.log-entry {
  display: block;
  margin: 1rem 0;
  animation: flicker 2s infinite;
}

.timestamp {
  color: var(--broken-primary);
  font-weight: bold;
}

.log-message {
  color: var(--broken-text);
  margin-left: 1rem;
}

/* Recovery Section */
.recovery-section {
  padding: 4rem 2rem;
  text-align: center;
}

.recovery-section h2 {
  color: var(--broken-primary);
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 2rem 0;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

.recovery-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

.recovery-btn {
  background: var(--broken-primary);
  color: var(--broken-text);
  border: 2px dashed var(--broken-primary);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  animation: buttonGlitch 0.8s infinite;
  transform: skew(-3deg, 1deg);
}

.recovery-btn:hover {
  background: var(--broken-secondary);
  color: var(--broken-primary);
  animation: buttonHoverGlitch 0.2s infinite;
}

.recovery-note {
  color: var(--broken-text);
  font-style: italic;
  animation: flicker 1s infinite;
}

/* Footer */
.broken-footer {
  background: var(--broken-secondary);
  border-top: 5px dashed var(--broken-primary);
  padding: 2rem;
  text-align: center;
  animation: glitch 1s infinite;
  transform: skew(-2deg, 1deg);
}

.broken-footer p {
  margin: 0.5rem 0;
  font-weight: bold;
  text-transform: uppercase;
  animation: flicker 1s infinite;
}

.broken-footer p:first-child {
  color: var(--broken-primary);
  font-size: 1.2rem;
  text-shadow: 2px 2px 0px #000;
  animation: textGlitch 0.3s infinite;
}

/* Responsive */
@media (max-width: 768px) {
  .broken-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-links {
    gap: 1rem;
  }
  
  .chaos-title {
    font-size: 2rem;
  }
  
  .broken-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .broken-grid {
    grid-template-columns: 1fr;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .recovery-options {
    flex-direction: column;
    align-items: center;
  }
}