Update css/style.css

css/style.css

@@ -1,28 +1,35 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+:root {
+    --bg: #f0f0f0;
+    --panel: #ffffff;
+    --border: #000000;
+    --shadow-hard: 5px 5px 0px 0px #000000;
+    --primary: #bef264; /* Lime */
+    --danger: #f87171;  /* Red */
+    --replay: #fb923c;  /* Orange */
 }
+body { font-family: 'Space Mono', monospace; background-color: var(--bg); height: 100vh; overflow: hidden; color: #000; }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+/* Utilities */
+.neo-box { background: var(--panel); border: 3px solid var(--border); box-shadow: var(--shadow-hard); }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.neo-btn { 
+    background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0px 0px #000; 
+    font-weight: bold; cursor: pointer; transition: transform 0.1s;
 }
+.neo-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px 0px #000; }
+.neo-btn:active { transform: translate(0px, 0px); box-shadow: 0px 0px 0px 0px #000; }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.bubble {
+    position: absolute; border-radius: 50%; border: 2px solid black; pointer-events: none;
+    display: flex; align-items: center; justify-content: center; z-index: 10; 
+    font-weight: bold; animation: popFloat 4s forwards ease-out; text-align: center; line-height: 1;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes popFloat {
+    0% { transform: scale(0) translateY(0); opacity: 0; }
+    20% { transform: scale(1) translateY(-20px); opacity: 1; }
+    100% { transform: scale(1) translateY(-100px); opacity: 0; }
 }
+
+.blink { animation: blinker 1.5s linear infinite; }
+@keyframes blinker { 50% { opacity: 0; } }