:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --line-strong: #86868b;
  --blue: #0071e3;
  --shadow: 0 18px 55px rgb(0 0 0 / 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, #ffffff 0%, transparent 32%),
    linear-gradient(180deg, #fdfdff 0%, var(--bg) 42%, #ececf1 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

.game-shell,
.answer-shell {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 42px 0 56px;
}

.game-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto 30px;
}

.eyebrow,
.label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}

h1 {
  margin: 0;
  max-width: 820px;
  color: var(--ink);
  font-size: clamp(2.8rem, 6vw, 6rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.96;
}

.secondary-button,
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 999px;
  color: var(--ink);
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(18px);
}

.secondary-button:hover,
.back-link:hover {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

.board-wrap {
  position: relative;
  width: min(78vh, 920px);
  margin: 0 auto;
  padding: 18px 20px 20px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 28px;
  background: rgb(255 255 255 / 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.board-labels {
  display: grid;
  color: var(--muted);
  font-size: clamp(0.88rem, 1.5vw, 1.1rem);
  font-weight: 600;
  text-align: center;
}

.board-cols {
  grid-template-columns: 38px repeat(10, 1fr);
  margin-bottom: 9px;
}

.board-body {
  display: grid;
  grid-template-columns: 38px 1fr;
}

.board-rows {
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  aspect-ratio: 10 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--line);
  gap: 1px;
}

.poster-cell {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 0;
  background: #e8e8ed;
  cursor: pointer;
  isolation: isolate;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease, box-shadow 420ms ease;
  will-change: transform;
}

.poster-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  transform: scale(1);
  filter: saturate(1.05) contrast(1.03);
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.poster-grid.is-hovering .poster-cell:not(.is-hovered) {
  filter: brightness(0.32) saturate(0.45);
  transition: filter 420ms ease;
}

.poster-cell.is-hovered {
  z-index: 10;
  transform: scale(1.3);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.32);
}

.fragment-timer {
  position: static;
  z-index: auto;
  min-width: 52px;
  width: fit-content;
  padding: 8px 12px;
  margin: 10px auto 0;
  border-radius: 999px;
  color: white;
  background: rgb(0 0 0 / 0.78);
  font-size: 1.3rem !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

.fragment-timer[hidden] {
  display: none;
}

.cell-code {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 26px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: rgb(29 29 31 / 0.70);
  background: rgb(255 255 255 / 0.58);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
}

/* Direction cinéma / plateforme de streaming. */
:root {
  --bg: #080808;
  --surface: #151515;
  --surface-soft: #1d1d1d;
  --ink: #f5f5f5;
  --muted: #a6a6a6;
  --line: rgb(255 255 255 / 0.18);
  --line-strong: rgb(255 255 255 / 0.42);
  --blue: #e50914;
  --red: #e50914;
  --shadow: 0 18px 55px rgb(0 0 0 / 0.42);
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(128 0 0 / 0.24), transparent 42%),
    linear-gradient(180deg, #090909 0%, #120606 52%, #050505 100%);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

.game-shell,
.answer-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.setup-page,
.game-page,
.results-page {
  min-height: 100svh;
  padding: clamp(34px, 5vw, 80px) clamp(22px, 6vw, 110px);
}

.setup-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 34px);
  text-align: center;
  background: radial-gradient(ellipse at 50% 15%, rgb(160 0 0 / 0.18), transparent 48%);
}

.setup-header,
.rules,
.player-setup {
  width: min(100%, 780px);
}

.setup-header .eyebrow,
.results-page .eyebrow,
.game-header .eyebrow,
.answer-heading .eyebrow {
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

h1,
h2,
h3,
.primary-button,
.secondary-button,
.back-link,
.eyebrow,
.label {
  font-family: "Arial Narrow", Impact, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.setup-header h1 {
  max-width: none;
  color: var(--red);
  font-size: clamp(3.1rem, 9vw, 8.8rem);
  line-height: 0.84;
  text-shadow: 0 8px 35px rgb(229 9 20 / 0.24);
}

.rules h2,
.player-setup h2 {
  margin: 0 0 18px;
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-align: center;
}

.rules ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.rules li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #dedede;
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
}

.player-count-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.player-count-control button,
.primary-button,
.secondary-button {
  border: 1px solid rgb(255 255 255 / 0.22);
  color: var(--ink);
  background: rgb(255 255 255 / 0.07);
  box-shadow: none;
  cursor: pointer;
}

.player-count-control button {
  width: 46px;
  height: 38px;
  border-radius: 999px;
  font-size: 1.4rem;
}

.player-count-control output {
  min-width: 38px;
  font-size: 1.8rem;
  font-weight: 800;
}

.player-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.player-list input {
  width: 126px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgb(255 255 255 / 0.06);
  text-align: center;
}

.setup-help,
.results-intro {
  color: var(--muted);
}

.primary-button {
  min-height: 48px;
  padding: 0 30px;
  border-color: var(--red);
  border-radius: 999px;
  background: var(--red);
  font-weight: 800;
}

.primary-button:hover,
.secondary-button:hover,
.player-count-control button:hover {
  border-color: #ff3540;
  background: #ff3540;
}

.primary-button.results-button {
  border-color: #f3c64d;
  background: #f3c64d;
  color: #111;
}

.primary-button.results-button:hover {
  border-color: #ffe083;
  background: #ffe083;
  color: #111;
}

.finish-confirm {
  width: min(420px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 12px;
  color: #fff;
  background: #1c1c1e;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.55);
}

.finish-confirm::backdrop {
  background: rgb(0 0 0 / 0.62);
}

.finish-confirm p {
  margin: 0;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 700;
}

.finish-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.finish-confirm-actions button {
  min-width: 104px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  color: #111;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.finish-confirm-cancel { background: #e85b5b; }
.finish-confirm-confirm { background: #70c77b; }
.finish-confirm-cancel:hover { background: #f27676; }
.finish-confirm-confirm:hover { background: #8ad994; }

.game-page {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) minmax(190px, 250px);
  gap: 20px;
  align-content: center;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  background: radial-gradient(ellipse at 50% 50%, rgb(100 0 0 / 0.12), transparent 52%);
}

.game-header {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0 0 4px;
}

.game-header h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.5rem);
}

.game-topbar {
  display: contents;
}

.timer-panel,
.scores-panel {
  grid-row: 2;
  width: 100%;
  align-self: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgb(0 0 0 / 0.35);
  box-shadow: none;
}

.timer-panel {
  grid-column: 1;
}

.scores-panel {
  grid-column: 3;
}

.game-page > .board-wrap {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  align-self: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(0 0 0 / 0.28);
  box-shadow: none;
  backdrop-filter: none;
}

.game-page .secondary-button,
.back-link {
  color: var(--ink);
  background: rgb(255 255 255 / 0.06);
}

.current-player {
  color: #ff4a53;
}

.timer-panel output {
  color: var(--ink);
}

.fragment-timer {
  color: var(--ink);
  background: var(--red);
}

.board-labels {
  color: #e8e8e8;
}

.poster-grid {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: var(--line-strong);
}

.poster-cell {
  background: #252525;
}

.results-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 20%, rgb(160 0 0 / 0.2), transparent 55%);
}

.results-page h1 {
  margin: 0;
  color: var(--red);
  font-size: clamp(3rem, 8vw, 7rem);
}

.results-list {
  width: min(100%, 720px);
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.results-list li {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.result-rank {
  color: var(--red);
  font-size: 1.3rem;
  font-weight: 800;
}

.result-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.results-list strong {
  font-size: 1.4rem;
}

.results-summary {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
}

.results-summary div {
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.results-summary strong {
  color: var(--red);
  font-size: 2rem;
}

.results-summary span {
  color: var(--muted);
}

.found-badge {
  display: none;
}

.poster-cell.is-found img {
  filter: grayscale(1) saturate(0) contrast(0.9) brightness(0.34);
  opacity: 0.88;
}

.poster-cell.is-found::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: rgb(0 0 0 / 0.32);
  pointer-events: none;
}

.poster-cell.is-found .cell-code,
.poster-cell.is-found .found-badge {
  display: none;
}

/* Vue de jeu : la grille occupe l'écran après le démarrage. */
.game-shell {
  width: min(96vw, 1540px);
}

.game-topbar {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 20px;
  align-items: start;
  min-height: 116px;
  margin: 0 auto 20px;
}

.timer-panel,
.scores-panel {
  padding: 18px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.78);
  box-shadow: var(--shadow);
}

.timer-panel {
  position: relative;
}

.timer-panel h3,
.scores-panel h3 {
  margin: 0 0 14px;
  font-size: 0.9rem;
}

.current-player {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
}

.timer-panel output {
  display: block;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.scores-panel ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scores-panel li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.scores-panel li strong {
  font-variant-numeric: tabular-nums;
}

.scores-panel li.is-current {
  color: var(--ink);
  font-weight: 800;
}

.scores-panel .secondary-button {
  width: 100%;
  margin-top: 14px;
}

.scores-panel {
  grid-column: 2;
  width: min(100%, 900px);
  justify-self: center;
}

.timer-panel {
  grid-column: 1;
  grid-row: 1;
}

.game-topbar::after {
  grid-column: 3;
  content: "";
}

.game-page > .board-wrap {
  width: min(86vw, 1320px);
  max-width: none;
  padding: 14px 16px 16px;
}

.back-link {
  margin-bottom: 26px;
}

.answer-layout {
  display: grid;
  grid-template-columns: minmax(260px, 430px) 1fr;
  gap: 46px;
  align-items: start;
}

.poster-panel {
  margin: 0;
  padding: 10px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.poster-panel img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 18px;
  object-fit: contain;
}

.details-panel {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.answer-heading {
  padding-top: 6px;
}

.answer-heading h1 {
  font-size: clamp(2.8rem, 5.8vw, 6.2rem);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.facts div,
.director-block,
.empty-state {
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.05);
  backdrop-filter: blur(18px);
}

.facts div {
  padding: 16px 18px;
}

.facts dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.video-box {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 24px;
  background:
    linear-gradient(135deg, #1d1d1f, #3a3a3c),
    #1d1d1f;
  box-shadow: var(--shadow);
}

.video-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-fallback {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: white;
  background: rgb(0 0 0 / 0.72);
  font-size: 0.78rem;
  text-decoration: none;
}

.video-placeholder {
  color: rgb(255 255 255 / 0.72);
  font-size: 0.95rem;
  font-weight: 500;
}

.director-block {
  padding: 18px 20px;
}

.director-block p:last-child {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 600;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-list li {
  display: flex;
  align-items: flex-end;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f5f5f7);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.rating {
  color: #ff9f0a;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: 0;
}

.empty-state {
  max-width: 720px;
  padding: 32px;
}

.empty-state p {
  color: var(--muted);
}

code {
  color: var(--blue);
}

@media (max-width: 820px) {
  .game-shell,
  .answer-shell {
    width: min(100vw - 24px, 760px);
    padding: 24px 0 36px;
  }

  .game-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
  }

  .board-wrap {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
  }

  .game-topbar {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .timer-panel,
  .scores-panel {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .board-cols {
    grid-template-columns: 30px repeat(10, 1fr);
  }

  .board-body {
    grid-template-columns: 30px 1fr;
  }

  .poster-grid {
    border-radius: 16px;
  }

  .cell-code {
    left: 4px;
    top: 4px;
    min-width: 22px;
    min-height: 18px;
    font-size: 0.62rem;
  }

  .answer-layout,
  .facts,
  .related-list {
    grid-template-columns: 1fr;
  }

  .answer-layout {
    gap: 24px;
  }
}

/* Corrections finales de rythme, chrono et séparateurs de la réponse. */
.player-setup h2 { margin-bottom: 24px; }

.timer-panel output { width: 100%; }
.fragment-timer { width: 100%; margin-left: auto; }

.answer-shell > .back-link {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 8px;
  color: #f5f5f5;
  background: rgb(255 255 255 / 0.07);
  box-shadow: none;
  cursor: pointer;
}

.answer-shell > .back-link:hover {
  border-color: #e50914 !important;
  color: #fff;
  background: #e50914 !important;
}

.facts { border-bottom: 1px solid rgb(229 9 20 / 0.9) !important; }
.director-block { border-top: 1px solid rgb(229 9 20 / 0.75) !important; }
.details-panel > .director-block + .director-block { border-top-color: #e50914 !important; }
.related-list li { border-bottom: 1px solid #e50914 !important; }

/* Une seule typographie d'interface, lisible en minuscules comme en capitales. */
body,
button,
a,
input,
h1,
h2,
h3,
.eyebrow,
.label,
.primary-button,
.secondary-button,
.back-link {
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-size: 16px;
}

.setup-header h1,
.rules h2,
.player-setup h2,
.game-topbar h3,
.primary-button,
.secondary-button {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rules h2,
.player-setup h2 {
  font-size: 1.18rem;
}

.rules li {
  font-size: 1.05rem;
  line-height: 1.4;
}

.player-count-control output,
.player-list input,
.setup-page > .primary-button {
  font-size: 1rem;
}

.setup-page > .primary-button,
.turn-panel .secondary-button,
.scores-panel .secondary-button {
  font-size: 1rem;
}

.game-topbar h3 {
  font-size: 0.9rem;
}

.scores-panel li,
.scores-panel li.is-current {
  font-size: 0.95rem;
}

.answer-shell {
  color: #f5f5f5;
}

.answer-heading .eyebrow,
.facts dt,
.director-block .label {
  color: #e50914;
  font-size: 0.82rem;
  font-weight: 700;
}

.answer-heading h1 {
  color: #fff;
  font-family: inherit;
  font-weight: 750;
}

.facts dd,
.director-block p:last-child {
  color: #ededed;
  font-size: 1rem;
}

.related-list li {
  color: #c7c7c7;
  font-size: 0.9rem;
}

.back-link,
.video-fallback,
.video-placeholder {
  font-size: 0.875rem;
}

/* Priorité finale des tailles et de la famille typographique. */
body,
button,
a,
input,
h1,
h2,
h3,
.eyebrow,
.label,
.primary-button,
.secondary-button,
.back-link {
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.rules h2,
.player-setup h2 { font-size: 1.18rem; }
.eyebrow { font-size: 0.875rem; }
.rules li { font-size: 1.05rem; line-height: 1.4; }
.setup-page > .primary-button,
.turn-panel .secondary-button,
.scores-panel .secondary-button { font-size: 1rem; }
.game-topbar h3 { font-size: 0.9rem; }
.scores-panel li,
.scores-panel li.is-current { font-size: 0.95rem; }
.facts dt,
.director-block .label { font-size: 0.82rem; }
.facts dd,
.director-block p:last-child { font-size: 1rem; }
.related-list li { font-size: 0.9rem; }
.back-link,
.video-fallback,
.video-placeholder { font-size: 0.875rem; }

/* Rythme vertical régulier sur l'accueil. */
.setup-page {
  gap: 0;
}

.rules h2,
.player-setup h2 {
  margin-bottom: 24px;
}

.rules {
  margin-bottom: 16px;
}

.player-setup {
  padding-top: 0;
  margin-bottom: 16px;
}

.player-list {
  margin-top: 16px;
}

.setup-page > .primary-button {
  margin-top: 0;
}

.player-setup h2 {
  margin-bottom: 24px;
}

/* Page réponse : boutons et contrastes plus proches de l'écran de jeu. */
.answer-shell > .back-link {
  display: inline-flex;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 8px;
  color: #f5f5f5;
  background: rgb(255 255 255 / 0.07);
  box-shadow: none;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}

.setup-header > #resetProgress {
  min-height: 42px;
  padding: 0 16px;
}

.answer-shell > .back-link:hover {
  border-color: var(--red) !important;
  color: #fff;
  background: var(--red) !important;
}

.answer-heading .eyebrow {
  color: var(--red);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.facts dt,
.director-block .label {
  color: #c5c5c5;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.facts dd,
.director-block p:last-child {
  color: #f0f0f0;
  font-size: 1rem;
}

.related-list li {
  color: #d0d0d0;
  font-size: 0.95rem;
  border-bottom: 1px solid rgb(229 9 20 / 0.7);
}

.video-fallback,
.video-placeholder {
  font-size: 0.875rem;
}

.facts {
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.22);
}

.director-block {
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}

.details-panel > .director-block + .director-block {
  border-top-color: rgb(229 9 20 / 0.65);
}

/* Priorité d'affichage : la grille reste centrale et entière. */
.setup-page,
.game-page,
.results-page {
  min-height: 100svh;
  padding: clamp(34px, 5vw, 80px) clamp(22px, 6vw, 110px);
}

.setup-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 34px);
  text-align: center;
}

.setup-header,
.rules,
.player-setup {
  width: min(100%, 780px);
}

.setup-header h1 {
  max-width: none;
  color: var(--red);
  font-size: clamp(3.1rem, 9vw, 8.8rem);
  line-height: 0.84;
}

.game-page {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) minmax(190px, 250px);
  gap: 20px;
  align-content: center;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

.game-header {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0 0 4px;
}

.game-topbar {
  display: contents;
}

.timer-panel,
.scores-panel {
  grid-row: 2;
  width: 100%;
  align-self: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgb(0 0 0 / 0.35);
  box-shadow: none;
}

.timer-panel { grid-column: 1; }
.scores-panel { grid-column: 3; }

.game-page > .board-wrap {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  align-self: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(0 0 0 / 0.28);
  box-shadow: none;
  backdrop-filter: none;
}

.results-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.results-page h1 {
  margin: 0;
  color: var(--red);
  font-size: clamp(3rem, 8vw, 7rem);
}

.results-list {
  width: min(100%, 720px);
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.results-list li {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.result-rank { color: var(--red); font-size: 1.3rem; font-weight: 800; }
.result-name { font-size: 1.1rem; font-weight: 700; }
.results-list strong { font-size: 1.4rem; }

.winner-badge {
  display: inline-block;
  margin-left: 5px;
  color: #f3c64d;
  font-size: 0.76em;
  font-weight: 800;
  white-space: nowrap;
}

.results-summary {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
}

.results-summary div {
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.results-summary strong { color: var(--red); font-size: 2rem; }
.results-summary span { color: var(--muted); }

@media (max-width: 820px) {
  .game-page {
    display: block;
    min-height: 100svh;
  }

  .game-header { margin-bottom: 18px; }
  .timer-panel,
  .scores-panel,
  .game-page > .board-wrap {
    width: 100%;
    margin-bottom: 14px;
  }

  .game-page > .board-wrap { padding: 10px; }
  .results-summary { flex-direction: column; width: min(100%, 320px); }
  .results-summary div { min-width: 0; }
}

.setup-page[hidden],
.game-page[hidden],
.results-page[hidden] {
  display: none;
}

/* Composition finale : première page compacte, grille conservée dans sa taille dédiée. */
.setup-page {
  min-height: 100svh;
  justify-content: flex-start;
  gap: 14px;
  padding: clamp(22px, 4vh, 42px) 24px 34px;
}

.setup-header {
  width: min(100%, 760px);
}

.setup-header .eyebrow {
  margin-bottom: 8px;
  color: var(--red);
  font-size: 0.78rem;
}

.setup-header h1 {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: clamp(1.25rem, 2.4vw, 2.2rem);
  line-height: 1;
}

.title-line {
  color: white;
  font-size: 1em;
  text-transform: uppercase;
}

.brand-logo {
  display: block;
  width: min(78vw, 510px);
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center 47%;
}

.rules ol {
  list-style: decimal;
  padding-left: 28px;
}

.rules li {
  padding: 8px 0 8px 4px;
}

.primary-button,
.secondary-button,
.player-count-control button {
  border-radius: 8px;
}

.primary-button {
  min-height: 44px;
}

.game-page {
  display: block;
  min-height: 100svh;
  padding: clamp(28px, 5vh, 64px) 24px 48px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

.game-header {
  max-width: 1540px;
  margin: 0 auto 18px;
}

.game-topbar {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 20px;
  align-items: start;
  width: min(96vw, 1540px);
  min-height: 116px;
  margin: 0 auto 20px;
}

.timer-panel {
  grid-column: 1;
  grid-row: 1;
}

.scores-panel {
  grid-column: 2;
  grid-row: 1;
  width: min(100%, 900px);
  justify-self: center;
}

.game-topbar::after {
  display: block;
  grid-column: 3;
  content: "";
}

.game-page > .board-wrap {
  display: block;
  width: min(86vw, 1320px);
  margin: 0 auto;
  padding: 14px 16px 16px;
}

.scores-panel li {
  padding: 5px 0;
  font-size: 0.78rem;
}

.scores-panel .secondary-button {
  min-height: 34px;
  margin-top: 10px;
  font-size: 0.78rem;
}

@media (max-width: 820px) {
  .game-shell {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .setup-page { padding-inline: 16px; }
  .game-page { padding-inline: 12px; }
  .game-topbar { display: grid; width: 100%; grid-template-columns: 1fr; min-height: 0; }
  .timer-panel,
  .scores-panel { grid-column: 1; grid-row: auto; width: 100%; }
  .game-topbar::after { display: none; }
.game-page > .board-wrap { width: 100%; }
}

/* Ajustements de finition : Public Sans, densité et hiérarchie cinéma. */
body,
button,
a,
input {
  font-family: "Public Sans", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
.eyebrow,
.label,
.primary-button,
.secondary-button,
.back-link {
  text-transform: none;
  letter-spacing: normal;
}

body {
  background:
    radial-gradient(ellipse at 50% 42%, #252020 0%, #111010 38%, #070707 78%),
    #070707;
}

.setup-page {
  gap: 10px;
  padding-top: clamp(18px, 3vh, 30px);
  padding-bottom: 24px;
}

.setup-header .eyebrow {
  margin-bottom: 2px;
  font-size: 0.86rem;
  font-weight: 700;
}

.setup-header h1 {
  gap: 0;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
}

.title-line {
  text-transform: none;
  font-weight: 600;
}

.brand-logo {
  width: min(72vw, 450px);
  margin-top: -4px;
}

.rules h2,
.player-setup h2 {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
}

.rules li {
  padding: 5px 0 5px 4px;
  font-size: 0.92rem;
}

.player-count-control {
  gap: 14px;
}

.player-list {
  margin-top: 8px;
}

.primary-button {
  min-height: 40px;
  padding-inline: 24px;
}

.game-page {
  background:
    radial-gradient(ellipse at 50% 42%, #252020 0%, #111010 40%, #070707 82%),
    #070707;
}

.timer-panel,
.scores-panel {
  padding: 4px 8px;
  border: 0;
  background: transparent;
}

.timer-panel h3,
.scores-panel h3 {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.timer-panel output {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.fragment-timer {
  margin-top: 5px;
  padding: 3px 8px;
  font-size: 1rem !important;
}

.current-player {
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.scores-panel ol {
  gap: 2px;
}

.scores-panel li {
  gap: 5px;
  padding: 2px 0;
  border: 0;
  color: #f5f5f5;
  font-size: 0.74rem;
  justify-content: flex-start;
}

.scores-panel li strong {
  color: var(--red);
}

.scores-panel .secondary-button {
  min-height: 28px;
  margin-top: 5px;
  padding-inline: 10px;
  font-size: 0.74rem;
}

.game-page > .board-wrap {
  padding: 0;
  border: 0;
  background: transparent;
}

.poster-grid {
  border: 1px solid rgb(255 255 255 / 0.25);
}

.answer-shell {
  min-height: 100svh;
  padding: 24px clamp(20px, 5vw, 80px) 28px;
  background:
    radial-gradient(ellipse at 48% 45%, #251f1f 0%, #100f0f 42%, #050505 85%),
    #050505;
}

.answer-shell > .back-link {
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.answer-layout {
  grid-template-columns: minmax(250px, 39vw) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 58px);
  width: min(1200px, 100%);
  min-height: calc(100svh - 70px);
  margin: 0 auto;
  align-items: center;
}

.poster-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.poster-panel img {
  width: 100%;
  max-height: calc(100svh - 105px);
  border-radius: 8px;
}

.details-panel {
  gap: 10px;
}

.answer-heading {
  padding-top: 0;
}

.answer-heading h1 {
  max-width: 800px;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: 0.98;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
}

.facts div {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.facts dt {
  display: inline;
  margin-right: 5px;
}

.facts dd {
  display: inline;
  font-size: 0.95rem;
}

.video-box {
  width: 100%;
  max-height: 310px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.director-block {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.director-block p:last-child {
  font-size: 1rem;
}

.related-list {
  gap: 6px;
}

.related-list li {
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 0.86rem;
}

.rating { display: none; }

@media (max-width: 820px) {
  .answer-shell { padding: 18px 16px 24px; }
  .answer-layout { min-height: 0; gap: 18px; }
  .poster-panel img { max-height: 58svh; }
  .video-box { max-height: none; }
}

/* Dernier réglage de composition pour la projection. */
.setup-header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.setup-header > #resetProgress {
  position: absolute;
  top: 0;
  right: 0;
}

.setup-header h1 {
  gap: 12px;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
}

.title-line {
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-logo {
  width: min(70vw, 450px);
  margin-top: 0;
}

.rules h2,
.player-setup h2 {
  margin-bottom: 12px;
  font-size: 1.22rem;
}

.rules li {
  padding: 8px 0 8px 8px;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.25;
}

.rules li::marker {
  color: var(--red);
  font-weight: 800;
}

.player-count-control button,
.player-list input,
.primary-button,
.secondary-button {
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 8px;
}

.player-count-control button {
  width: 48px;
  height: 42px;
  font-size: 1.5rem;
}

.player-count-control output {
  font-size: 2rem;
}

.player-list {
  gap: 10px;
  margin-top: 12px;
}

.player-list input {
  width: 140px;
  padding: 11px 13px;
  font-size: 1rem;
}

.setup-page > .primary-button {
  min-height: 48px;
  padding-inline: 30px;
  font-size: 1.05rem;
}

.game-page {
  padding-top: 22px;
  padding-bottom: 26px;
}

.game-topbar {
  grid-template-columns: 180px minmax(0, 1fr) 180px;
  min-height: 92px;
  margin-bottom: 12px;
}

.turn-panel {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.turn-panel .secondary-button {
  width: 100%;
  min-height: 42px;
  font-size: 0.95rem;
}

.scores-panel {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 0 8px;
}

.scores-panel h3 {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.scores-panel ol {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}

.scores-panel li,
.scores-panel li.is-current {
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1;
}

.scores-panel li strong {
  font-size: inherit;
  font-weight: 700;
}

.scores-panel li.is-current {
  border-color: var(--red);
  box-shadow: 0 0 12px rgb(229 9 20 / 0.55), inset 0 0 8px rgb(229 9 20 / 0.16);
  transform: scale(1.04);
  font-size: 1.05rem;
  font-weight: 800;
}

.timer-panel {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  text-align: right;
}

.timer-panel output {
  text-align: right;
}

.fragment-timer {
  margin-left: auto;
}

.game-page > .board-wrap {
  width: min(86vw, 1320px);
  margin-inline: auto;
}

@media (max-width: 820px) {
  .setup-header > #resetProgress {
    position: static;
  }

  .game-topbar {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .turn-panel,
  .scores-panel,
  .timer-panel {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
  }

  .timer-panel output,
  .fragment-timer {
    margin-inline: auto;
    text-align: center;
  }
}

/* Corrections finales visibles après toutes les règles responsive. */
.rules h2,
.player-setup h2 { margin-bottom: 24px; }
.rules h2 { display: block; width: 100%; text-align: center; }
.rules { width: min(100%, 840px); }
.rules li {
  position: relative;
  border-bottom: 0;
}
.rules li::after {
  position: absolute;
  right: 40px;
  bottom: 0;
  left: 0;
  content: "";
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1100px) {
  .rules {
    width: min(100%, 920px);
    transform: translateX(40px);
  }

  .rules h2 {
    transform: translateX(-40px);
  }
}
.timer-panel output { width: 100%; }
.fragment-timer { width: 100%; }
.fragment-timer[hidden] { display: none !important; }
.facts { border-bottom: 1px solid #e50914 !important; }

/* Sur écran projeté, la barre des scores et les 50 fragments restent dans
   la même vue. La grille se réduit légèrement si la hauteur disponible est
   plus courte, au lieu de pousser la page sous la ligne de flottaison. */
@media (min-width: 821px) {
  .game-page {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .game-page > .board-wrap {
    width: min(86vw, calc((100svh - 180px) * 2));
    max-height: calc(100svh - 145px);
    overflow: hidden;
  }

  .game-page > .board-wrap .poster-grid {
    max-height: calc(100svh - 180px);
  }
}

/* La zone des scores garde une structure stable : quatre colonnes sur
   desktop, que la partie compte quatre joueurs ou davantage. */
.scores-panel ol {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px 10px !important;
}

.scores-panel li {
  min-width: 0;
}

.scores-panel li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scores-panel li strong {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .scores-panel ol {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Accent rouge directement sous le titre des films associés. */
.related-list li {
  border-bottom: 0 !important;
}

.related-film-title {
  display: inline-block;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
}

/* Affiche d'abord, titre ensuite, avec le séparateur placé sous le texte. */
.related-film-card {
  grid-template-rows: auto 2.4em;
}

.related-film-card img,
.related-film-card .related-poster-placeholder {
  grid-row: 1;
}

.related-film-card .related-film-title {
  grid-row: 2;
}

.related-list,
.related-list li {
  border-top: 0 !important;
}
.director-block { border-top: 1px solid #e50914 !important; }
.related-list li { border-bottom: 1px solid #e50914 !important; }
.answer-shell > .back-link {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.07);
}
.answer-shell > .back-link:hover {
  border-color: #e50914 !important;
  background: #e50914 !important;
}
.answer-shell > .back-link { font-family: inherit; }

/* Configuration compacte : intitulé à gauche, compteur à droite. */
.player-setup {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
}

.player-setup h2 {
  margin: 0;
  text-align: left;
}

.player-count-control {
  justify-content: flex-end;
}

.player-list {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 620px) {
  .player-setup {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .player-setup h2,
  .player-count-control {
    justify-self: center;
    text-align: center;
  }
}

/* Chrono de tour aligné exactement sur le chrono général. */
.timer-panel output.fragment-timer {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
  border-radius: 8px;
  text-align: center;
}

/* Les séparateurs restent uniquement sous les trois informations principales. */
.facts {
  gap: 5px 28px !important;
  border-bottom: 1px solid #e50914 !important;
}

.director-block,
.details-panel > .director-block + .director-block,
.related-list li {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.facts dt,
.director-block .label {
  color: #999 !important;
}

.director-block a,
.related-list a {
  color: #f0f0f0;
  text-decoration: none;
}

.director-block a:hover,
.related-list a:hover {
  color: #e50914;
}

/* Chrono de tour : pastille néon assortie au joueur actif. */
.timer-panel output.fragment-timer {
  width: 58px;
  height: 58px;
  min-width: 58px;
  max-width: 58px;
  margin: 8px 0 0 auto;
  padding: 0;
  border: 2px solid #e50914;
  border-radius: 50%;
  color: #ff3340;
  background: rgb(229 9 20 / 0.08);
  box-shadow: 0 0 12px rgb(229 9 20 / 0.65), inset 0 0 10px rgb(229 9 20 / 0.16);
  font-size: 1.25rem !important;
  font-weight: 800;
  line-height: 54px;
  text-align: center;
  text-shadow: 0 0 8px rgb(255 51 64 / 0.9);
}

.related-list li {
  border-bottom: 1px solid #e50914 !important;
}

.synopsis-box {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}

.synopsis-box .label {
  margin: 0;
  color: #999;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.synopsis-copy {
  margin: 0;
  color: #ededed;
  font-size: 1rem;
  line-height: 1.45;
}

.trailer-link {
  width: fit-content;
  margin-top: 4px;
  color: #e50914;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.trailer-link:hover {
  color: #ff5660;
  text-decoration: underline;
}

.related-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.related-list li {
  min-height: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid #e50914 !important;
}

.related-film-card {
  display: grid;
  grid-template-rows: 2.4em auto;
  gap: 7px;
  color: #d0d0d0;
  text-decoration: none;
}

/* Chaque titre réserve deux lignes : les affiches restent alignées lorsque
   l'un des noms est plus long que les autres. */
.related-film-card .related-film-title {
  grid-row: 1;
  min-height: 2.4em;
}

.related-film-card img,
.related-film-card .related-poster-placeholder {
  grid-row: 2;
}

.related-film-card img {
  display: block;
  width: clamp(62px, 7.7vw, 88px);
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  object-fit: cover;
}

.related-poster-placeholder {
  display: block;
  width: clamp(62px, 7.7vw, 88px);
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  background: linear-gradient(145deg, #333, #171717);
}

.related-film-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

.related-film-card:hover .related-film-title {
  color: #e50914;
}

/* Films associés : affiche, puis titre, avec le seul trait sous le titre. */
.related-film-card {
  grid-template-rows: auto 2.4em;
}

.related-film-card img,
.related-film-card .related-poster-placeholder {
  grid-row: 1;
}

.related-film-card .related-film-title {
  grid-row: 2;
  align-self: start;
  border-bottom: 1px solid var(--red);
}

/* Le chrono de tour réserve sa place, même lorsqu'il est masqué. Ainsi,
   l'apparition des 20 secondes ne pousse jamais la grille vers le bas. */
@media (min-width: 821px) {
  .game-topbar {
    min-height: 128px;
  }
}

/* Projection sur grand écran : la grille conserve un format maîtrisé et
   laisse toujours respirer le bas de page. La page réponse garde deux
   colonnes équilibrées, plutôt que d'agrandir l'affiche au détriment du
   titre et des informations du film. */
@media (min-width: 821px) {
  .game-page > .board-wrap {
    width: min(86vw, 1320px, calc((100svh - 270px) * 2));
    margin: 0 auto 24px;
  }

  .answer-layout {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 48px);
  }

  .answer-heading h1 {
    font-size: clamp(2.4rem, 3.4vw, 3.6rem);
    line-height: 1.02;
  }
}

/* Sur écran de projection, les commandes encadrent directement la grille :
   bouton de tour à gauche, chronos à droite, scores au-dessus. */
@media (min-width: 1100px) {
  .game-page {
    display: block;
  }

  .game-topbar {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 20px;
    align-items: start;
    min-height: 128px;
    margin: 0 auto 12px;
  }

  .scores-panel {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 900px);
    margin: 0 auto;
  }

  .turn-panel {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .timer-panel {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }

  .game-page > .board-wrap {
    width: min(86vw, 1320px, calc((100svh - 220px) * 2));
    margin: 0 auto 24px;
  }
}

/* L'écran d'accueil garde une ambiance cinéma discrète, sans réduire la
   lisibilité des règles ni des champs de joueurs. */
.setup-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 58% 82% at 50% 42%, rgb(0 0 0 / 0.98) 0%, rgb(0 0 0 / 0.9) 52%, rgb(0 0 0 / 0.38) 78%, transparent 100%),
    linear-gradient(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.3)),
    url("assets/images/background-rule.jpeg") center 38% / cover no-repeat;
}

/* Le conteneur général était limité à 96 % sur ordinateur : son fond noir
   restait visible en bordure. L'accueil occupe donc toute la fenêtre. */
body[data-page="setup"] .game-shell {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.photo-credit {
  margin: 18px 0 0;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.9);
}

.photo-credit p {
  margin: 0;
}

.photo-credit p + p {
  margin-top: 5px;
}

.photo-credit p:not(.photo-credit-title) {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  gap: 4px;
}

.photo-credit-title {
  font-weight: 700;
}

.player-setup {
  margin-top: 10px;
}

/* Le crédit suit naturellement le contenu de la page des résultats. */
.results-page .photo-credit {
  position: static;
  margin-top: 18px;
}

/* Réduire l'espace avant le classement pour garder davantage de joueurs
   visibles sur un même écran. */
.results-page .results-intro {
  margin: 6px 0 0;
}

.results-page .results-list {
  margin: 12px 0 22px;
}

/* Fond de la page des résultats : le centre reste très sombre pour que le
   classement soit lisible, tandis que la façade du cinéma apparaît autour. */
.results-page {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.84) 0%, rgb(0 0 0 / 0.68) 29%, rgb(0 0 0 / 0.22) 47%, transparent 64%),
    linear-gradient(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.16)),
    url("assets/images/background-result-jaws-premiere.png") center / cover no-repeat;
}

@media (min-width: 821px) {
  .results-page {
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: clamp(32px, 7vw, 130px);
    text-align: left;
  }

  .results-page .results-list {
    width: min(100%, 390px);
    margin: 14px 0 12px;
  }

  .results-page .results-list li {
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    padding: 6px 10px;
  }

  .results-page .result-rank {
    font-size: 1.05rem;
  }

  .results-page .result-name {
    font-size: 0.95rem;
  }

  .results-page .results-list strong {
    font-size: 1.1rem;
  }

  .results-page .results-summary {
    gap: 8px;
    margin-bottom: 12px;
  }

  .results-page .results-summary div {
    min-width: 160px;
    padding: 10px;
  }

  .results-page .photo-credit {
    align-self: flex-start;
    position: relative;
    top: 24px;
    margin-top: 22px;
    text-align: left;
  }
}

.related-list,
.related-list li {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Les titres des films associés occupent toujours la même hauteur.
   Ainsi, le trait séparateur reste aligné même lorsqu'un titre revient
   sur deux lignes. */
.related-film-card {
  grid-template-rows: auto 2.6em !important;
}

.related-film-card .related-film-title {
  display: -webkit-box;
  width: 100%;
  height: 2.6em;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 2px 0.35em;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--red);
}