Improve quiz page layouts: WIDM-style answers and responsive centering

- Add green square answer buttons styled after the TV show
- Two-column answer grid for 6+ answers, single column on mobile
- fit-content centering for question pages so block matches question width
- Narrow fixed-width centering for form pages (enter name, select season)

assets/styles/quiz.scss

@@ -17,7 +17,72 @@ body {
     background-color: black;
     display: grid;
     align-content: center;
-    justify-self: center;
+}
+
+.quiz-form-narrow {
+    max-width: 320px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.quiz-content {
+    width: fit-content;
+    max-width: min(760px, 100%);
+    margin: 0 auto;
+}
+
+.quiz-answers-grid {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    column-gap: 2rem;
+
+    @media (max-width: 767px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.answer-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 1.1rem;
+    padding: 0.4rem 0;
+    cursor: pointer;
+    text-align: left;
+    line-height: 1.3;
+
+    &::before {
+        content: '';
+        display: block;
+        flex-shrink: 0;
+        width: 2rem;
+        height: 2rem;
+        background: radial-gradient(ellipse at 35% 30%, #6abf4b, #2d7a1f);
+        border-radius: 4px;
+        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.6);
+    }
+
+    &:hover,
+    &:focus {
+        color: #7ed45a;
+        outline: none;
+
+        &::before {
+            background: radial-gradient(ellipse at 35% 30%, #86d45f, #3d9c2a);
+        }
+    }
+}
+
+input.btn-check:checked + label.answer-btn {
+    color: #7ed45a;
+
+    &::before {
+        background: radial-gradient(ellipse at 35% 30%, #86d45f, #3d9c2a);
+        box-shadow: 0 0 10px rgba(106, 191, 75, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.3);
+    }
 }
 
 .elimination-screen {