diff --git a/frontend/src/pages/QuizPage.jsx b/frontend/src/pages/QuizPage.jsx
index 683ccd3..5db20f8 100644
--- a/frontend/src/pages/QuizPage.jsx
+++ b/frontend/src/pages/QuizPage.jsx
@@ -1627,7 +1627,7 @@ const timerStarted = timeLeft !== null
       )}
 
       {/* Header */}
-      <div className="card quiz-header-card" style={{ marginBottom: 14 }}>
+      <div className="card quiz-header-card" style={{ marginBottom: 6 }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
           <div>
             <h2 className="quiz-header-title">{quiz.title}</h2>
diff --git a/frontend/src/pages/QuizPlayer.css b/frontend/src/pages/QuizPlayer.css
index 6f0751a..8a1c559 100644
--- a/frontend/src/pages/QuizPlayer.css
+++ b/frontend/src/pages/QuizPlayer.css
@@ -1,7 +1,11 @@
 .container:has(> .quiz-player), .container:has(> .quiz-results) { max-width: 1500px; }
 .quiz-player, .quiz-results { --primary: #496fa5; --primary-hover: #365b8d; --border: #e8eaf1; --card-shadow: none; --card-radius: 0; --text: #333; --text-muted: #737982; --correct-fg: #327b64; --correct-bg: #e6edf8; --wrong-fg: #a13c51; background: #fff; padding: 24px 32px 40px; min-width: 0; }
-.quiz-player .quiz-header-card { padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
-.quiz-player .quiz-header-title { font-size: .9rem; font-weight: 500; color: #737982; }
+/* Tight. Everything above the stem is furniture — the session's name, the
+   mode, where you are in it — and eighteen pixels under it plus twenty over
+   the counter plus the counter's own line spacing pushed the first line of the
+   question a third of the way down the screen. */
+.quiz-player .quiz-header-card { padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
+.quiz-player .quiz-header-title { margin: 0 0 2px; font-size: .9rem; line-height: 1.3; font-weight: 500; color: #737982; }
 .quiz-player .quiz-code-badge { font-size: .75rem; }
 .quiz-player .quiz-code-badge code { background: transparent; border: 0; }
 /* Session rail beside the question, like a Qbank session's left column.
@@ -51,11 +55,11 @@
 }
 .quiz-player .quiz-nav-toggle { display: inline-flex; }
 .quiz-player .progress-bar { height: 3px; }
-.quiz-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 0 20px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
+.quiz-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 6px 0 10px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
 .quiz-topbar button { border: 1px solid transparent; padding: 10px 13px; background: #f8f9fb; color: #333; cursor: pointer; font: inherit; border-radius: 2px; }
 .quiz-topbar button:disabled { opacity: .35; cursor: not-allowed; }
-.quiz-topbar .quiz-question-select { padding: 0; background: transparent; text-align: left; white-space: nowrap; font-size: 1.15rem; color: #898d92; }
-.quiz-question-select small { display: block; font-size: .8rem; margin-bottom: 3px; color: #858b94; }
+.quiz-topbar .quiz-question-select { padding: 0; background: transparent; text-align: left; white-space: nowrap; font-size: 1.05rem; line-height: 1.2; color: #898d92; }
+.quiz-question-select small { display: block; font-size: .72rem; margin-bottom: 0; line-height: 1.3; color: #858b94; }
 .quiz-question-select strong { color: #30343a; font-weight: 650; }
 .quiz-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
 .quiz-top-actions button { font-size: .85rem; min-height: 42px; }
@@ -251,6 +255,9 @@
 .quiz-clock {
   display: inline-flex; align-items: center; gap: 14px;
   padding: 2px 12px; border-inline: 1px solid var(--border);
+  /* Never squeezed by what shares its row. Three readings of known width is
+     the one thing in the bar whose size is not negotiable. */
+  flex: none;
 }
 .quiz-clock-pause {
   width: 28px; height: 28px; flex-shrink: 0; cursor: pointer;
@@ -258,8 +265,16 @@
   font-size: 0.72rem; color: var(--text-muted); line-height: 1;
 }
 .quiz-clock-pause:hover { border-color: var(--primary); color: var(--primary); }
-.quiz-clock-cell { display: flex; flex-direction: column; line-height: 1.15; }
-.quiz-clock-cell strong { font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--text); }
+/* `flex: none` and no wrapping: squeezed between the pause button and whatever
+   sits beside it, "0h 00m" broke after the hours and the three readings each
+   became two lines of their own height, which is what pushed the group out of
+   the bar it sits in. A clock is a fixed-width thing; it may not be the part
+   that gives. */
+.quiz-clock-cell { display: flex; flex-direction: column; flex: none; line-height: 1.15; }
+.quiz-clock-cell strong {
+  font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--text);
+  white-space: nowrap;
+}
 .quiz-clock-cell em {
   font-style: normal; font-size: 0.6rem; font-weight: 700;
   letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle);
@@ -892,8 +907,10 @@ body:has(.quiz-player.is-exam-chrome) .site-footer { display: none; }
 .quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-secondary:hover:not(:disabled) {
   background: var(--bg); color: var(--text);
 }
-/* Two thirds of the bar, because moving on is what the hand is there for. */
-.quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-primary { flex: 2; }
+/* An equal half each. It was two thirds of everything left over, which on a
+   wide window made Next a blue band across most of the screen — emphasis it
+   does not need, since it is the only coloured thing down there. */
+.quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-primary { flex: 1; }
 
 @media (max-width: 640px) {
   .quiz-player.is-boxed .quiz-footbar > .quiz-exit { min-width: 0; flex: 1; }