/* One stylesheet, hand-written. The game is a title, a text box, and a clock; a
   framework would be more code than the thing it styles.

   Phone-first and narrow on purpose. The board is one column with the built
   title as the largest thing on it, because that title is both the state of the
   game and the whole of the question being asked. */

:root {
  --ink: #16151a;
  --paper: #faf9f6;
  --muted: #6c6a75;
  --rule: #e2dfd8;
  --accent: #b4342a;
  --computer: #2f5d7c;
  /* Narrower than a reading measure: nothing here is a paragraph. */
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceaf2;
    --paper: #16151a;
    --muted: #9a97a5;
    --rule: #34313c;
    --accent: #e8695c;
    --computer: #7fb2d4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-serif, Georgia, "Iowan Old Style", serif;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

a { color: inherit; }
a.quiet { color: var(--muted); text-decoration-color: var(--rule); }
a.quiet:hover { color: var(--ink); }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}

.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.5rem 1rem; }
.signed-in { color: var(--muted); }
.sign-out { display: inline; margin: 0; }
.sign-out button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  cursor: pointer;
}
.sign-out button:hover { color: var(--ink); }

.wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

h1 { font-size: 2rem; line-height: 1.1; margin: 0.5rem 0 1rem; }
h2 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
     color: var(--muted); margin: 2rem 0 0.75rem; font-weight: 700; }

.lede { font-size: 1.05rem; }
.footnote { color: var(--muted); font-size: 0.9rem; }
.worked-example {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* --- the picker ----------------------------------------------------------- */

/* Three cards, and the whole card is the button. One large target each rather
   than a small control beside the text explaining it. */

.difficulties { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

button.difficulty {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

button.difficulty:hover,
button.difficulty:focus-visible {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  outline: none;
}

.difficulty-name { font-size: 1.15rem; font-weight: 700; }
.difficulty-detail { color: var(--muted); font-size: 0.88rem; }
.difficulty-clock { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.primary {
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.primary:hover { background: var(--accent); border-color: var(--accent); }

/* --- the built title ------------------------------------------------------ */

.built { margin: 1.25rem 0 1.5rem; }

/* The thing the game is named for, and the largest thing on the page. */
.built-title {
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: break-word;
}

/* The two open ends, marked in place. A move joins the head or the tail and
   never the middle (ADR 0012), so the words a player can act on are the ones
   the title already begins and ends with -- there is nothing to show but these.

   Underlined rather than filled: a filled highlight reads as a verdict on the
   word, and nothing here has been judged. The legend below names both words in
   prose, so no part of the position is carried by colour alone. */
.built-title .open,
.tv-title .open {
  background: none;
  color: inherit;
  box-shadow: inset 0 -0.18em 0 color-mix(in srgb, var(--accent) 34%, transparent);
}

.ends-legend {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.ends-legend strong { color: var(--ink); font-weight: 700; }

/* --- the turn ------------------------------------------------------------- */

.turn { margin: 1.5rem 0 0; }

/* A bar with the number beside it. The bar is readable peripherally, which a
   numeral is not, and the player's attention belongs on recalling a film. */
.timer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.timer-track {
  flex: 1 1 auto;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  width: var(--start, 100%);
  border-radius: 999px;
  background: var(--muted);
  animation: drain var(--seconds, 0s) linear forwards;
}

@keyframes drain {
  from { width: var(--start, 100%); }
  to   { width: 0%; }
}

.clock {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 3ch;
  text-align: right;
}

.turn.urgent .clock { color: var(--accent); }
.turn.urgent .timer-bar { background: var(--accent); }

.move-form { display: flex; gap: 0.5rem; }
.move-form input[type="text"] {
  flex: 1 1 auto;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.move-form input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* The React board's "checking ..." line while a move is in flight (ADR 0020). */
.pending { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.88rem; }

.alert {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 0.92rem;
}

/* --- what has been played ------------------------------------------------- */

/* Quiet, and one flowing line. The built title above is the real record; this
   is the only place the films keep their actual titles, which is why it stays. */
.log { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; }

.films { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; color: var(--muted); }
.films .film { display: inline; }
.films .film + .film::before { content: " · "; color: var(--rule); }
.films .computer .film-title { color: var(--computer); }
.films .opening .film-title { font-style: italic; }

.film-count { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.78rem; }

/* --- the end -------------------------------------------------------------- */

.result { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.result h2 { margin-top: 0; font-size: 1.6rem; text-transform: none; letter-spacing: normal; color: var(--ink); }
.result .length { color: var(--muted); }

/* --- rooms (ADR 0024) ---------------------------------------------------- */

.start-room { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.start-room select { font: inherit; padding: 0.55rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); }

.room-share { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
/* Dark modules on a light ground in both themes: a phone camera reads that. */
.room-qr { background: #fff; padding: 0.6rem; border-radius: 4px; width: 11rem; height: 11rem; }
.room-link { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; flex: 1 1 12rem; }

.share { font: inherit; padding: 0.45rem 0.8rem; border: 1px solid var(--rule); border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer; }
.players { padding-left: 1.4rem; }
.players .quiet, .lobby .quiet { color: var(--muted); }
.players .out { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
.whose-turn { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; text-transform: none; letter-spacing: normal; color: var(--ink); }
.players-in { margin-top: 1.5rem; }
.films .film-by { color: var(--muted); }

/* --- a room on a TV (BT-16) ---------------------------------------------- */

/* The whole screen, without scrolling, whether it is a 1920x1080 TV or a phone
   held sideways. Sizes are in vmin so they follow the shorter side. The site
   header goes; the TMDb notice in the footer stays, as it must. */
/* dvh, so a phone's own address bar cannot push the footer out of reach. */
body.tv { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.tv .site-header { display: none; }
body.tv main { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 2vmin 3vmin; }
body.tv .attribution { margin: 0 auto; padding: 0.8vmin 3vmin; font-size: 1.6vmin; max-width: none; }
body.tv .tmdb-logo { height: 2vmin; }
.tv-root, .tv { height: 100%; }

.tv-lobby { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5vmin; }
.tv-qr { height: min(70vmin, 60vh); width: min(70vmin, 60vh); background: #fff; padding: 2vmin; border-radius: 1vmin; }
.tv-lobby-side { max-width: 45vw; }
.tv-join { font-size: 3.5vmin; margin: 0; color: var(--muted); }
.tv-link { font-size: 3vmin; overflow-wrap: anywhere; margin: 1vmin 0 3vmin; }

.tv-game { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, auto); gap: 2vmin; }
.tv-built { align-self: center; overflow: hidden; min-height: 0; }
.tv-title { margin: 0; line-height: 1.12; font-weight: 700; }
.tv-built .ends-legend { font-size: 2.6vmin; margin-top: 1.5vmin; }
.tv-status { display: flex; align-items: center; gap: 3vmin; }
.tv-turn { font-size: 5vmin; font-weight: 700; margin: 0; white-space: nowrap; }
.tv-status .turn { flex: 1 1 auto; margin: 0; }
.tv-status .clock { font-size: 4vmin; min-width: 5ch; }
.tv-status .timer-track { height: 1.6vmin; }

.tv-columns { display: flex; gap: 4vmin; overflow: hidden; }
.tv-films { flex: 2 1 0; list-style: none; padding: 0; margin: 0; font-size: 2.6vmin; overflow: hidden; }
.tv-films li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-film-by { color: var(--muted); margin-left: 1ch; }
.tv-players { flex: 1 1 0; padding-left: 4vmin; margin: 0; font-size: 3.2vmin; }
.tv-players .out { color: var(--muted); text-decoration: line-through; }
.tv-players .quiet { color: var(--muted); font-size: 0.7em; }
.tv-last h2 { font-size: 5vmin; margin: 0; text-transform: none; letter-spacing: normal; color: var(--ink); }
.tv-last .length { font-size: 2.6vmin; color: var(--muted); }
.tv-last .players { font-size: 3vmin; padding-left: 4vmin; }
.tv-last .last-title { font-size: 3.4vmin; font-weight: 700; margin: 1vmin 0; }
.result .last-title { font-weight: 700; margin: 0.5rem 0; }
.last-title .open { background: none; color: inherit; box-shadow: inset 0 -0.18em 0 color-mix(in srgb, var(--accent) 34%, transparent); }

/* --- attribution ---------------------------------------------------------- */

/* Required wherever TMDb data appears. Quiet, but never hidden. */
.attribution {
  max-width: var(--measure);
  margin: 2rem auto 0;
  padding: 1rem 1.25rem 2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.attribution p { margin: 0; }
.tmdb-logo { height: 1.25rem; width: auto; }

.prose h2 { font-size: 1.05rem; text-transform: none; letter-spacing: normal; color: var(--ink); }
.prose li { margin-bottom: 0.35rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}