Summer cleanup: XLSX export, WIDM-style quiz UI, CSS fixes (#162)

* Add CLAUDE.md, replace Makefile with Justfile, remove .junie

- Add CLAUDE.md with project overview, commands, architecture, and domain entity docs
- Remove Makefile in favour of the existing Justfile
- Remove .junie/AGENTS.md (knowledge transferred to CLAUDE.md)
- Update .gitignore: drop .junie/ entries, add .claude/settings.local.json
- Minor doc fixes in config/reference.php (typo, type correction)

* Clean up templates and CSS

- season.html.twig: remove dead empty column, drop redundant flex-row
- tab_overview.html.twig: extract Twig macro for confirm modals, fix duplicate aria-labelledby IDs
- tab_result.html.twig: remove dead comment, replace inline widths with CSS classes, simplify nested row/col forms to d-flex gap-1
- backoffice.scss: add col-result-xs/sm/md column width classes
- quiz.scss: replace broken display:grid + justify-self:center with flexbox centering

* Implement quizToXlsx() export and add export button

- QuizSpreadsheetService: implement quizToXlsx() as the inverse of
  fillQuizFromArray() — writes quiz questions and answers to XLSX using
  the same column layout as the import template
- BackofficeController: add exportQuiz() action at GET /backoffice/quiz/{quiz}/export
- tab_overview.html.twig: add Export to XLSX button in Quick actions

* Add unit tests for QuizSpreadsheetService

7 tests covering generateTemplate(), quizToXlsx(), and xlsxToQuiz():
- valid XLSX output and MIME type
- template without example reimports as empty
- template example data survives a reimport
- round-trip (export → reimport) preserves questions, answers, and correct flags
- empty quiz exports and reimports cleanly
- invalid MIME type throws InvalidArgumentException
- question with no answers throws SpreadsheetDataException with error list

* Fix quiz page vertical centering regression

The CSS cleanup broke vertical centering: flex on body causes main to
stretch full-width; place-items:center on a grid body only centers
items within their auto-sized track (not the track within body).

Fix: move background/color to html (full-viewport grid that centers
body), give body height:100% + display:grid + align-content:center
(centers the content track within full-height body) + justify-self:center
(shrink-wraps body width). Matches production behavior exactly.

* 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)

* Use HeaderUtils::makeDisposition() for safe Content-Disposition filename

* Fix quizToXlsx to support unlimited answers and add header count tests

- Replace hardcoded 6-column arrays with dynamic Coordinate arithmetic
- Write data rows first to determine max answer count, write headers last
- Replace try/catch ErrorException in fillQuizFromArray with array_key_exists
- Add data-provider test covering 2, 6, 7, and 10 answers
- Add cross-question max-header and 7-answer round-trip tests

* Fix Sass healthcheck

* Improve quiz layout: add fixed topbar, include navigation, and clean up unused elements

- Add `.quiz-topbar` with fixed positioning and spacing in `quiz.scss`
- Update `base.html.twig` to include `quiz/nav.html.twig` in a new `nav` block
- Remove unused "Manage Quiz" button from `select_season.html.twig`

* Refactor generateTemplate to reuse quizToXlsx and add second example question

- generateTemplate now builds an in-memory Quiz entity and delegates to
  quizToXlsx, eliminating duplicate spreadsheet-building logic
- Adds a second example question "Wie is de mol?" with 10 Dutch names
  (5 male, 5 female) to better illustrate the import format
- Updates tests to assert both example questions and adds a test for the
  blank-row halt behaviour in fillQuizFromArray (achieving 100% coverage)

* Move PHPUnit cache to /tmp to avoid writing into the mounted volume

* Update src/Service/QuizSpreadsheetService.php

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

templates/quiz/base.html.twig

@@ -1,2 +1,3 @@
 {% extends 'base.html.twig' %}
 {% block importmap %}{{ importmap('quiz') }}{% endblock %}
+{% block nav %}{{ include('quiz/nav.html.twig') }}{% endblock %}

templates/quiz/enter_name.twig

@@ -1,4 +1,6 @@
 {% extends 'quiz/base.html.twig' %}
 {% block body %}
-    {{ form(form) }}
+    <div class="quiz-form-narrow">
+        {{ form(form) }}
+    </div>
 {% endblock body %}

templates/quiz/question.twig

@@ -1,36 +1,43 @@
 {% extends 'quiz/base.html.twig' %}
 {% block body %}
-    <h4>
-        {% if season.settings.showNumbers %}
-            ({{ question.ordering }}/{{ question.quiz.questions.count }})
-        {% endif %}{{ question.question }}<br/>
-    </h4>
-    <form method="post">
-        <input type="hidden" name="token" value="{{ csrf_token('question') }}">
-        {% if season.settings.confirmAnswers == false %}
-            {% for answer in question.answers %}
+    <div class="quiz-content">
+        <h4>
+            {% if season.settings.showNumbers %}
+                ({{ question.ordering }}/{{ question.quiz.questions.count }})
+            {% endif %}{{ question.question }}<br/>
+        </h4>
+        <form method="post">
+            <input type="hidden" name="token" value="{{ csrf_token('question') }}">
+            {% set twoCol = question.answers|length >= 6 %}
+            {% if season.settings.confirmAnswers == false %}
+                <div class="{{ twoCol ? 'quiz-answers-grid' : '' }}">
+                    {% for answer in question.answers %}
+                        <div class="py-2">
+                            <button class="answer-btn"
+                                    type="submit"
+                                    name="answer"
+                                    value="{{ answer.id }}">{{ answer.text }}</button>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="{{ twoCol ? 'quiz-answers-grid' : '' }}">
+                    {% for answer in question.answers %}
+                        <div class="py-1">
+                            <input required="required" type="radio" class="btn-check" name="answer"
+                                   id="answer-{{ loop.index0 }}" autocomplete="off"
+                                   value="{{ answer.id }}">
+                            <label class="answer-btn" for="answer-{{ loop.index0 }}">{{ answer.text }}</label>
+                        </div>
+                    {% endfor %}
+                </div>
                 <div class="py-2">
-                    <button class="btn btn-outline-success"
+                    <button class="btn btn-success"
                             type="submit"
-                            name="answer"
-                            value="{{ answer.id }}">{{ answer.text }}</button>
+                    >{{ 'Next'|trans }}</button>
                 </div>
-            {% endfor %}
-        {% else %}
-            {% for answer in question.answers %}
-                <div class="py-1">
-                    <input required="required" type="radio" class="btn-check" name="answer"
-                           id="answer-{{ loop.index0 }}" autocomplete="off"
-                           value="{{ answer.id }}">
-                    <label class="btn btn-outline-secondary" for="answer-{{ loop.index0 }}">{{ answer.text }}</label>
-                </div>
-            {% endfor %}
-            <div class="py-2">
-                <button class="btn btn-success"
-                        type="submit"
-                >{{ 'Next'|trans }}</button>
-            </div>
 
-        {% endif %}
-    </form>
+            {% endif %}
+        </form>
+    </div>
 {% endblock body %}

templates/quiz/select_season.html.twig

@@ -1,5 +1,6 @@
 {% extends 'quiz/base.html.twig' %}
 {% block body %}
-    {{ form(form) }}
-    <a href="{{ path('tvdt_backoffice_index') }}" class="btn btn-outline-secondary">{{ 'Manage Quiz'|trans }}</a>
+    <div class="quiz-form-narrow">
+        {{ form(form) }}
+    </div>
 {% endblock body %}