body {
  background-color: #03030c;
  color: #ffffff;
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

.clip-cyber-btn {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.clip-cyber-card {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0, 243, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 127, 0.07) 1px, transparent 1px);
}

.nav-btn.active {
  color: #00f3ff;
  border-bottom: 3px solid #00f3ff;
  background: rgba(0, 243, 255, 0.1);
  box-shadow: inset 0 -10px 15px -5px rgba(0, 243, 255, 0.3);
}

/* Real page load animation (replaces the old display:none fade that never animated) */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageIn 0.4s ease both; }

.key-cap { transition: all 0.1s ease; }
.key-cap.pressed {
  background-color: #00f3ff;
  color: #03030c;
  box-shadow: 0 0 20px #00f3ff;
  transform: scale(0.92);
}

canvas { image-rendering: pixelated; }

/* Media slots: image/video with a neon placeholder shown until the real file exists */
.media-slot {
  position: relative;
  background: linear-gradient(135deg, #0a0a20, #03030c);
  overflow: hidden;
}
.media-slot .slot-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
  font-family: 'Press Start 2P', cursive; font-size: 10px; line-height: 1.6;
  color: rgba(255,255,255,0.45);
  z-index: 0;
}
.media-slot img, .media-slot video { position: relative; z-index: 1; }

:focus-visible { outline: 2px solid #ffe600; outline-offset: 2px; }