/* Grid background */
body {
  background-color: #020810;
  background-image:
    linear-gradient(rgba(0,245,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  cursor: crosshair;
}

/* Scanlines overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
  pointer-events: none;
  z-index: 50;
}

/* Glitch title */
.glitch { position: relative; display: inline-block; animation: glitch 8s infinite; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
}
.glitch::before {
  color: #ff0080; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-top 8s infinite;
}
.glitch::after {
  color: #ffe500; clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-bot 8s infinite;
}
@keyframes glitch-top { 0%,90%,100%{transform:none;opacity:0} 92%{transform:translate(-4px,-2px);opacity:1} 94%{transform:translate(4px,0);opacity:0} }
@keyframes glitch-bot { 0%,90%,100%{transform:none;opacity:0} 92%{transform:translate(4px,2px);opacity:1} 94%{transform:translate(-4px,0);opacity:0} }

/* Clip-path buttons */
.btn-clip { clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* Ticker */
.ticker-track { display: flex; gap: 3rem; animation: ticker 18s linear infinite; white-space: nowrap; }

/* Mode card top border reveal */
.mode-card { position: relative; overflow: hidden; }
.mode-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.mode-card:hover::before { transform: scaleX(1); }

/* Powerup chip bottom border reveal */
.pu-chip { position: relative; overflow: hidden; }
.pu-chip::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--chip); box-shadow: 0 0 8px var(--chip);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.pu-chip:hover::after  { transform: scaleX(1); }
.pu-chip:hover { border-color: var(--chip) !important; transform: translateY(-2px); }

/* Diff pip */
.diff-pip { width: 20px; height: 4px; background: rgba(200,232,240,0.12); display: inline-block; }
.diff-pip.active { box-shadow: 0 0 6px var(--pip-color); background: var(--pip-color); }

/* Sensor dot blink */
.sensor-dot { width: 6px; height: 6px; border-radius: 9999px; background: #00f5ff; box-shadow: 0 0 8px #00f5ff; animation: pulse 2s ease-in-out infinite; }

/* Screen hover zoom */
.screen-item img { transition: transform 0.5s ease, filter 0.3s; filter: brightness(0.85) saturate(1.2); }
.screen-item:hover img { transform: scale(1.04); filter: brightness(1) saturate(1.4); }
.screen-overlay { opacity: 0; transition: opacity 0.3s; }
.screen-item:hover .screen-overlay { opacity: 1; }

/* Store badges */
.store-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.store-btn:hover {
  border-color: rgba(0,245,255,0.5);
  background: rgba(0,245,255,0.04);
  box-shadow: 0 0 24px rgba(0,245,255,0.12), inset 0 0 20px rgba(0,245,255,0.03);
}
.store-btn svg { transition: color 0.25s; }
.store-btn:hover svg { color: #00f5ff; filter: drop-shadow(0 0 6px rgba(0,245,255,0.7)); }
.store-btn .store-name { transition: color 0.25s; }
.store-btn:hover .store-name { color: #fff; }

/* Contact form inputs */
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  resize: none;
}
.form-input:focus {
  border-color: rgba(0,245,255,0.5);
  background: rgba(0,245,255,0.02);
  box-shadow: 0 0 0 1px rgba(0,245,255,0.15), inset 0 0 20px rgba(0,245,255,0.02);
}
.form-input::placeholder {
  color: rgba(255,255,255,0.18);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.form-label {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  color: rgba(0,245,255,0.5);
  margin-bottom: 0.5rem;
}
.form-btn {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  padding: 0.85rem 2.5rem;
  background: #00f5ff;
  color: #020810;
  border: none;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(0,245,255,0.5);
}
.form-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(0,245,255,0.7);
}
.form-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Language switcher */
.lang-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.35);
  background: rgba(2,8,16,0.8);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lang-btn:hover {
  color: #00f5ff;
  border-color: rgba(0,245,255,0.4);
}
.lang-btn.active {
  color: #00f5ff;
  border-color: #00f5ff;
  box-shadow: 0 0 10px rgba(0,245,255,0.3);
}