feat: initial mvp release

style.css

@@ -0,0 +1,137 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  background: #050505;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  font-family: "Courier New", monospace;
+  overflow: hidden;
+}
+#game-container {
+  width: 500px;
+  height: 950px;
+  position: relative;
+  background: #0a0a0a;
+  border: 2px solid #00ff41;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow:
+    0 0 30px rgba(0, 255, 65, 0.2),
+    inset 0 0 60px rgba(0, 255, 65, 0.05);
+}
+#game-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+#game-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 255, 65, 0.03) 2px,
+    rgba(0, 255, 65, 0.03) 4px
+  );
+  pointer-events: none;
+  z-index: 10;
+}
+#ui-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid #00ff41;
+}
+.ui-text {
+  color: #00ff41;
+  font-size: 14px;
+  text-shadow: 0 0 8px #00ff41;
+  letter-spacing: 1px;
+}
+#input-display {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 14px 16px;
+  background: rgba(0, 0, 0, 0.85);
+  border-top: 1px solid #00ff41;
+  z-index: 5;
+  text-align: center;
+}
+#typed-text {
+  color: #00ff41;
+  font-size: 20px;
+  min-height: 28px;
+  letter-spacing: 2px;
+  text-shadow: 0 0 10px #00ff41;
+}
+#start-screen,
+#gameover-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(5, 5, 5, 0.95);
+  z-index: 20;
+  text-align: center;
+}
+.screen-title {
+  color: #00ff41;
+  font-size: 32px;
+  margin-bottom: 12px;
+  text-shadow: 0 0 20px #00ff41;
+  letter-spacing: 4px;
+}
+.screen-subtitle {
+  color: #00cc33;
+  font-size: 14px;
+  margin-bottom: 30px;
+  opacity: 0.8;
+}
+.hidden {
+  display: none !important;
+}
+.glitch {
+  animation: glitch 0.3s ease-in-out;
+}
+@keyframes glitch {
+  0%,
+  100% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-3px, 2px);
+  }
+  40% {
+    transform: translate(3px, -2px);
+  }
+  60% {
+    transform: translate(-2px, -1px);
+  }
+  80% {
+    transform: translate(2px, 1px);
+  }
+}