Merge pull request 'Add funcionamiento del juego' (#12) from juegophp into main

Reviewed-on: #12
Reviewed-by: jorge <jdavidnunez@gmail.com>

css/juego.css

@@ -116,4 +116,66 @@
             .btn-answer {
                 font-size: 18px;
             }
-        }
+        }
+
+/* ===== Lógica de juego (js/juego.js) ===== */
+
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.progress-track {
+    height: 8px;
+    background-color: #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 16px;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0;
+    background-color: #1368ce;
+    transition: width 0.3s ease;
+}
+
+.feedback {
+    min-height: 1.5em;
+    margin-top: 12px;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.feedback.ok { color: #26890c; }
+.feedback.ko { color: #e21b3c; }
+
+/* Mientras se envía la respuesta o se ve el feedback no se puede volver a pulsar */
+.answers-grid.bloqueado .btn-answer {
+    pointer-events: none;
+}
+
+.btn-answer.correcta {
+    box-shadow: 0 0 0 6px #fff, 0 0 0 10px #26890c;
+}
+
+.btn-answer.incorrecta,
+.btn-answer.atenuada {
+    opacity: 0.45;
+}
+
+.btn-answer:focus-visible {
+    outline: 4px solid #333;
+    outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .progress-fill,
+    .btn-answer {
+        transition: none;
+    }
+}