@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800;900&family=Fredoka:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap);

:root {
  --bg: #f3efe6;
  --ink: #0a0a0a;
  --muted: #666055;
  --surface: #ffffff;
  --blue: #2f5bff;
  --pink: #ff2d78;
  --yellow: #ffd400;
  --green: #00c853;
  --radius-pill: 999px;
  --radius-lg: 24px;
  --shadow-hard: 7px 7px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-hard-press: 2px 2px 0 var(--ink);
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-logo: 'Fredoka', 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  position: relative;
  height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

#main-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(10px, 2.5vh, 20px) clamp(16px, 4vw, 24px);
  min-height: 0;
  overflow-y: auto;
}

@media (min-width: 1280px) {
  #main-container {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.page-home,
.page-quiz {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

a, a:hover {
  color: var(--ink);
}

/* ================= BRAND (fixed, true top-left browser corner) ================= */

#brand {
  position: fixed;
  top: clamp(10px, 2.4vh, 20px);
  left: clamp(10px, 2.4vw, 20px);
  z-index: 45;
}

#startscreen #brand {
  margin-bottom: calc(clamp(16px, 3vh, 28px) + 32px);
}

#startscreen #brand h1 {
  font-size: clamp(34px, 7.5vw, 52px);
}

#brand a {
  text-decoration: none;
  display: inline-block;
}

h1 {
  font-family: var(--font-logo);
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  font-size: clamp(26px, 5.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
  display: inline-block;
  transition: transform 0.18s var(--ease), text-shadow 0.18s var(--ease);
}

#brand a:hover h1 {
  transform: translate(-2px, -2px);
  text-shadow: 6px 6px 0 var(--ink);
}

/* Quiz page only: the fixed top-left corner holds the live score instead
   of the logo — the logo itself moved into #header (see .quiz-brand).
   Same bare yellow + hard-shadow treatment the logo used to have here,
   no pill/card around it. */
.round-counter-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(16px, 2.8vw, 22px);
  letter-spacing: -0.3px;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  white-space: nowrap;
}

.round-counter-badge strong {
  /* #main-container strong sets color: var(--ink) globally (for the
     Imprint page's bold address line) — without this, that rule wins
     over the inherited yellow here since it targets the element
     directly rather than just inheriting it. */
  color: var(--yellow);
  font-size: 1.1em;
}

.round-counter-unit {
  opacity: 0.9;
}

/* "kleiner Smartphone Breakpoint": hidden below the same width the rest
   of the chrome already collapses to a compact mobile layout at. */
@media (max-width: 1300px) {
  .round-counter-badge {
    display: none;
  }
}

/* ================= VERTICAL ROUND COUNTER (left side, below the logo) =================
   moquiz2's single game spans one actor across 10 rounds, so the per-round
   score panel moved out of the top-center header (freed up for the actor's
   name, see #actor-panel below) and down the left edge instead, stacked
   under the fixed logo. */

#counter-vertical {
  position: fixed;
  top: calc(clamp(10px, 2.4vh, 20px) + 50px);
  left: clamp(10px, 2.4vw, 20px);
  z-index: 44;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  max-width: min(260px, 32vw);
}

.counter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-dot-v {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(13px, 2.1vw, 18px);
  height: clamp(13px, 2.1vw, 18px);
  border-radius: 5px;
  border: 2px solid var(--ink);
  background: var(--surface);
  opacity: 0.5;
  transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.dot-icon {
  width: 70%;
  height: 70%;
  display: block;
}

.dot-icon--check {
  color: var(--ink);
}

.dot-icon--x {
  color: var(--pink);
}

/* Yellow fill (matching the logo) + a black checkmark, from the same
   Material Design Icons set as the panel icons. */
.counter-row.is-correct .score-dot-v {
  background: var(--yellow);
  border-color: var(--ink);
  opacity: 1;
}

/* "ohne Punkt": a wrong round stays hollow (no fill) but tints red so it
   still reads as an attempt, distinct from a not-yet-played round. */
.counter-row.is-wrong .score-dot-v {
  background: transparent;
  border-color: var(--pink);
  opacity: 1;
}

/* The movie title (correct) or the player's own guess (wrong) next to the
   dot — only makes sense in the vertical left-column layout, so it's
   hidden again in the horizontal responsive row (see RESPONSIVE below). */
.counter-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink);
}

.counter-row.is-correct .counter-label {
  color: var(--yellow);
}

.counter-row.is-wrong .counter-label {
  color: var(--pink);
}

/* ================= HEADER / ACTOR NAME PANEL ================= */

#header,
#imprint-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: clamp(6px, 1.5vh, 14px) 0;
}

#header {
  position: relative;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: clamp(2px, 0.6vh, 6px);
}

/* Name10 + "movies with" + the actor panel read as one sentence-like
   lockup, stacked and centred — the actor panel sits a little lower than
   before now that the logo moved down here above it. */
.quiz-brand {
  text-align: center;
}

/* Same yellow + hard-shadow Fredoka treatment as the logo itself, just
   smaller — tucked right underneath it rather than floating further down. */
/* #header-scoped on purpose: #main-container p (generic, for the Imprint
   page's body copy) targets the <p> element directly and otherwise wins
   over a plain .quiz-tagline class for `color` — same specificity gotcha
   as the strong/.round-counter-badge fix above. */
#header .quiz-tagline {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(13px, 2.2vw, 17px);
  letter-spacing: -0.2px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink);
  -webkit-text-stroke: 0.5px var(--ink);
  margin: 0;
}

.actor-name-panel {
  margin-top: clamp(6px, 1.4vh, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: clamp(6px, 1.4vh, 10px) clamp(10px, 2vw, 16px);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2.8vw, 24px);
  letter-spacing: -0.2px;
  color: var(--ink);
}

.panel-display,
.panel-edit,
.panel-loading {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 12px);
  /* ng-if tears down and rebuilds this element on every state swap (name
     shown ↔ loading ↔ search form), so the animation restarts cleanly
     each time rather than needing a class-toggle trick — see the same
     pattern on .result-flash. This is what turns the panel's abrupt
     resize into a deliberate-looking motion instead of a flicker. */
  animation: panel-fade-in 0.3s var(--ease);
}

@keyframes panel-fade-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-display,
  .panel-edit,
  .panel-loading {
    animation: none;
  }
}

.actor-name-text {
  padding: 0 2px;
  min-width: 9ch;
  text-align: center;
  white-space: nowrap;
}

/* The "…" placeholder is intentionally compact rather than padded out to
   the same 9ch as a name — the fade/scale-in on .panel-loading (see
   panel-fade-in) already smooths the resize when the real name replaces
   it, so there's no need to reserve a wide, mostly-empty box here. */
.actor-name-text--loading {
  min-width: 0;
  padding: 0 6px;
  color: var(--muted);
  font-weight: 700;
}

/* Small borderless icon buttons that sit right inside the pill — refresh
   (new game), edit (search another actor), close (cancel search), and
   search (submit search), all sharing one compact circular hit area. */
.panel-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s var(--ease), background-color 0.15s var(--ease);
}

.panel-icon-btn svg {
  width: clamp(16px, 2.4vw, 20px);
  height: clamp(16px, 2.4vw, 20px);
  display: block;
}

.panel-icon-btn:hover {
  background: rgba(10, 10, 10, 0.08);
  transform: scale(1.08);
}

.panel-icon-btn:active {
  transform: scale(0.94);
}

.panel-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  background: transparent;
}

.panel-search-btn {
  background: var(--yellow);
}

.panel-search-btn:hover {
  background: var(--yellow);
  transform: scale(1.08);
}

.actor-search-form input[type="text"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 17px);
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  width: clamp(140px, 24vw, 220px);
  min-width: 0;
}

.actor-search-form input[type="text"]::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.actor-search-error {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 1.8vw, 14px);
  color: var(--pink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
}

/* ================= HERO VISUAL (start screen / actor photo) ================= */

#startscreen,
#moviescreenshot {
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 900px;
  margin-top: 24px;
  position: relative;
}

#startscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#startscreen-bg,
#moviescreenshot-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}

/* Home screen keeps the simple full-cover movie backdrop — only the quiz
   page's actor photo gets the height-locked + ambient-blur treatment. */
#startscreen-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#startscreen-bg::after,
#moviescreenshot-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.82) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ================= ACTOR PHOTO STAGE (quiz page) =================
   A portrait headshot stretched to `cover` a wide/large viewport would
   scale up massively and crop the bottom off — the actual bug this fixes.
   Instead the sharp photo is locked to 100% of the viewport HEIGHT (auto
   width, so it never crops vertically) and centred; the real gaps that
   opens up on the sides are filled by a blurred, scaled-up copy of the
   very same photo, so the edges still read as "colours from the photo"
   without needing canvas pixel sampling (TMDb's image CDN sends no CORS
   headers, so reading pixels back out would throw a tainted-canvas error
   anyway). */
#moviescreenshot-bg.photo-stage {
  overflow: hidden;
}

.photo-ambient,
.photo-sharp {
  position: absolute;
  background-repeat: no-repeat;
}

.photo-ambient {
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(60px) saturate(1.15) brightness(0.55);
  transform: scale(1.15);
}

.photo-sharp {
  inset: 0;
  /* Slightly taller than the viewport (not a flush 100%) so the sharp photo
     bleeds a little off the top/bottom edges instead of ending in a hard
     rectangular cut — still centred both ways, just a softer transition
     into the blurred ambient layer. */
  background-size: auto 125%;
  background-position: center center;
}

/* ================= LOADING SPINNER ================= */

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: clamp(40px, 8vw, 56px);
  height: clamp(40px, 8vw, 56px);
  border-radius: 999px;
  background: conic-gradient(from 0deg, var(--pink), var(--blue), var(--green), var(--yellow), var(--pink));
  animation: moquiz-spin 0.85s linear infinite;
  border: 3px solid var(--ink);
}

.loader::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--ink);
}

@keyframes moquiz-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 2.4s; }
}

@keyframes moquiz-punch {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.965); }
  100% { transform: scale(1); }
}

/* ================= BUTTONS ================= */

.btn,
.btn-start {
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.1px;
  display: inline-block;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn {
  margin: 0;
  padding: clamp(10px, 2vh, 16px) 20px;
  font-size: clamp(13px, 2vw, 17px);
}

.btn-start {
  background: var(--pink);
  color: #fff;
  padding: clamp(12px, 2.4vh, 18px) clamp(24px, 5vw, 42px);
  font-size: clamp(15px, 2.4vw, 22px);
  margin-top: 0;
  position: relative;
  z-index: 2;
  max-width: min(420px, 85vw);
  white-space: normal;
  text-align: center;
}

.orange,
.orange-start {
  background: var(--yellow);
  color: var(--ink);
}

.orange:hover,
.orange-start:hover,
.btn:not(:disabled):hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
}

.orange:active,
.orange-start:active,
.btn:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-hard-press);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buttons {
  padding-top: 30px;
  text-align: center;
}

.link {
  border-bottom: 2px solid var(--pink);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  transition: 0.2s;
}

.link:hover {
  color: var(--pink);
}

/* ================= ANSWER FORM (quiz page) =================
   Replaces moquiz1's 4-button grid: a single text input + submit button
   overlaid at the bottom of the photo, same anchor point/z-index the old
   answer grid used. */

#answerform {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(10px, 2.5vh, 20px) clamp(10px, 3vw, 20px) clamp(14px, 3vh, 24px);
}

#answerform form {
  display: flex;
  gap: clamp(8px, 1.5vh, 14px);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

#answerform input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 18px);
  color: var(--ink);
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  padding: clamp(10px, 2vh, 16px) clamp(16px, 2.6vw, 22px);
  outline: none;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

#answerform input[type="text"]:focus {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--ink);
}

#answerform input[type="text"]::placeholder {
  color: var(--muted);
  font-weight: 500;
}

/* Short "GO" submit button — compact rather than the wide pill padding
   meant for a longer text label. */
#answerform .btn {
  flex: 0 0 auto;
  min-width: clamp(56px, 8vh, 72px);
  padding-left: clamp(10px, 1.6vw, 16px);
  padding-right: clamp(10px, 1.6vw, 16px);
  text-align: center;
  font-size: clamp(14px, 2.2vw, 18px);
}

#moviescreenshot.is-loading #answerform {
  opacity: 0.45;
  pointer-events: none;
}

/* ================= RESULT FLASH (centred, per-round feedback) =================
   Replaces the old inline text under the input: correct/wrong now pops up
   dead-centre on the viewport in the logo typeface, then fades — a fresh
   element each round (ng-if, not a class toggle) so the animation always
   restarts cleanly instead of silently no-opping on a still-mounted node. */

.result-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  text-align: center;
  max-width: min(640px, 86vw);
  opacity: 0;
  animation: moquiz-result-pop 1.1s var(--ease) forwards;
}

.result-flash-text {
  display: block;
  font-family: var(--font-logo);
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.result-flash-x {
  display: block;
  font-family: var(--font-logo);
  font-weight: 700;
  color: var(--pink);
  text-shadow: 5px 5px 0 var(--ink);
  -webkit-text-stroke: 2px var(--ink);
  font-size: clamp(72px, 15vw, 150px);
  line-height: 1;
}

@keyframes moquiz-result-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .result-flash {
    animation: moquiz-result-fade 1.1s ease forwards;
  }
}

@keyframes moquiz-result-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ================= END SCREEN ================= */

#finalscore {
  flex: 0 1 auto;
  min-height: 0;
  position: relative;
}

#finalscore:not(:empty) {
  flex: 1 1 auto;
}

#endscreen {
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#scores {
  width: min(420px, 100%);
  border-radius: var(--radius-lg);
  background: var(--ink);
  border: 3px solid var(--ink);
  padding: 36px 30px;
  margin: 0 auto;
  box-shadow: var(--shadow-hard);
}

#congrats {
  font-family: var(--font-logo);
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  text-align: center;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.3px;
  margin-top: 0;
  display: block;
}

#finalsentence {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  margin-top: 14px;
}

#endscreen .btn {
  margin-top: 20px;
}

/* ================= IMPRINT ================= */

.imprint-content {
  max-width: 520px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 16px;
}

/* Scoped to .imprint-content specifically (not the whole #main-container)
   — a blanket #main-container p/strong rule outranks any same-element
   class selector elsewhere in the app by CSS specificity (an ID beats any
   number of classes), which is exactly what broke the round-counter badge
   and the quiz tagline's colour the first time this was tried. */
.imprint-content p {
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.7;
}

.imprint-content strong {
  color: var(--ink);
}

/* ================= FOOTER (discreet, fixed bottom-right) ================= */

hr {
  display: none;
}

#footer {
  position: fixed;
  right: clamp(10px, 2.4vw, 20px);
  bottom: clamp(10px, 2.4vh, 20px);
  z-index: 40;
}

.footer-imprint {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(15px, 2.6vw, 19px);
  letter-spacing: -0.3px;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.18s var(--ease), text-shadow 0.18s var(--ease);
}

.footer-imprint:hover {
  color: var(--yellow);
  transform: translate(-2px, -2px);
  text-shadow: 6px 6px 0 var(--ink);
}

.footertext {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.footertext a {
  color: var(--ink);
  text-decoration: underline;
}

.footertext a:hover {
  color: var(--pink);
}

.imprint-tmdb {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
}

.imprint-tmdb img {
  width: 140px;
  height: auto;
  display: block;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1300px) {
  #footer {
    position: static;
    flex: 0 0 auto;
    margin: clamp(32px, 1.5vh, 38px) auto 0;
    text-align: center;
  }

  #brand {
    position: static;
    flex: 0 0 auto;
    text-align: center;
    margin-bottom: 16px;
  }

  /* The vertical counter loses its fixed left-column anchor once the logo
     drops into normal flow above the header — it moves into flow too,
     centered as a horizontal row directly under the logo instead. */
  #counter-vertical {
    position: static;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 12px;
  }

  /* The per-round title/guess label only makes sense next to a vertical
     list of dots — in the horizontal row it would overflow badly, so it's
     dot-only here, same as moquiz1's original score panel. */
  .counter-label {
    display: none;
  }
}

@media (max-height: 480px) {
  #brand {
    position: static;
    flex: 0 0 auto;
    text-align: center;
    margin-bottom: 6px;
  }

  h1 {
    font-size: 13px;
  }

  #header,
  #imprint-header {
    padding: 4px 0;
  }

  .actor-name-panel {
    padding: 4px 14px;
    font-size: 13px;
  }

  #counter-vertical {
    gap: 4px;
    margin-bottom: 6px;
  }

  .score-dot-v {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }

  #startscreen,
  #moviescreenshot {
    min-height: 170px;
    margin-top: 4px;
  }

  #answerform {
    padding: 6px 8px 10px;
  }

  #answerform input[type="text"] {
    padding: 7px 12px;
    font-size: 12px;
  }

  #answerform .btn {
    min-width: 48px;
    padding: 7px 12px;
    font-size: 12px;
  }

  .loader {
    width: 30px;
    height: 30px;
  }

  #footer {
    position: static;
    flex: 0 0 auto;
    margin: 4px auto 0;
    text-align: center;
  }

  .footer-imprint {
    font-size: 12px;
  }
}