:root {
  /* Connections theme: warm marquee. --bg is the flat fallback and the colour for
     text on dark fills; --bg-fun is the page background. */
  --bg: #fff0dc;
  --bg-fun: linear-gradient(165deg, #ffe6bd 0%, #ffd2c4 50%, #f8c4de 100%);
  --fg: #2a1a1e;
  --muted: #6d5648;
  --card: #ffffff;
  --card-border: #f0d9c6;
  --selected: #8a1f4a;
  --selected-fg: #fff;
  --accent: #b4235a;
  --on-accent: #fff;
  --yellow: #f3c94e;
  --green: #9ecf63;
  --blue: #86b7e8;
  --purple: #bb8ad8;
  --coral: #f2a08c;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  --radius: 18px;
  --max: 760px;
  --gap: 8px;
  /* everything but the 4x4 board: header, meta, message, mistakes, controls, credit row */
  --chrome: 236px;
  --cols: 4;
  /* tiles are full-frame portrait photos, --photo times as tall as wide: the height is what the
     page height allows, capped by what the width allows */
  --photo: 1.5;
  --tile-w: calc((min(100vw, var(--max)) - 32px - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --tile-h: min(clamp(90px, calc((100vh - var(--chrome)) / var(--cols) - var(--gap)), 300px), calc(var(--tile-w) * var(--photo)));
  /* faces are a fixed share of the tile, or less when a two-line name needs the room
     (2.3 = two lines at 1.15; 7px = the name's margin plus the tile border) */
  --tile-pad: 6px;
  --name-size: clamp(.72rem, 1.75vw, .92rem);
  --face: min(calc(var(--tile-h) * .6), calc(var(--tile-h) - 2.3 * var(--name-size) - 2 * var(--tile-pad) - 7px));
  --board-w: calc(var(--cols) * var(--tile-h) / var(--photo) + (var(--cols) - 1) * var(--gap));
}
@supports (height: 100dvh) {
  :root { --tile-h: min(clamp(90px, calc((100dvh - var(--chrome)) / var(--cols) - var(--gap)), 300px), calc(var(--tile-w) * var(--photo))); }
}
/* Strands theme: cool lagoon */
body.strands-game {
  --bg: #e2f1f8;
  --bg-fun: linear-gradient(165deg, #c6f1e2 0%, #cbe5ff 50%, #dcd3ff 100%);
  --fg: #151c2e;
  --muted: #4d5a73;
  --card-border: #cbdaee;
  --selected: #25348a;
  --accent: #2b4acb;
}
/* Hive theme: honey and meadow */
body.theme-find {
  --bg: #fff5d0;
  --bg-fun: linear-gradient(165deg, #fff3b8 0%, #fbe6a6 45%, #d9ebb6 100%);
  --fg: #2a2110;
  --muted: #6b5a33;
  --card-border: #e6d49c;
  --selected: #3d2c0c;
  --accent: #7a4d00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #251a1d; --bg-fun: linear-gradient(165deg, #2e2016 0%, #2c1820 50%, #26192f 100%);
    --fg: #f3eae5; --muted: #ab9a90; --card: #35272b; --card-border: #4d3a40;
    --selected: #f3eae5; --selected-fg: #251a1d; --accent: #ff9ab8; --on-accent: #2a1018;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
  :root:not([data-theme="light"]) body.strands-game {
    --bg: #151c27; --bg-fun: linear-gradient(165deg, #11261f 0%, #131e30 50%, #1d1a38 100%);
    --fg: #e8eef6; --muted: #94a2b8; --card: #212b3a; --card-border: #34425c;
    --selected: #e8eef6; --selected-fg: #151c27; --accent: #9db4ff; --on-accent: #0f1630;
  }
  :root:not([data-theme="light"]) body.theme-find {
    --bg: #221c10; --bg-fun: linear-gradient(165deg, #2b2410 0%, #2a2012 45%, #1c2a1a 100%);
    --fg: #f4ecd8; --muted: #b3a37c; --card: #33291a; --card-border: #54452a;
    --selected: #f4ecd8; --selected-fg: #221c10; --accent: #ffc94d; --on-accent: #2a1c00;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
button, select { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg-fun, var(--bg)) fixed; color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  line-height: 1.4; min-height: 100vh; display: flex; flex-direction: column;
  /* clear of the notch and home bar when it runs full screen from the Home Screen */
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@supports (height: 100dvh) { body { min-height: 100dvh; } }
main { max-width: var(--max); width: 100%; margin: 0 auto; flex: 1; }
header.top { max-width: var(--max); width: 100%; margin: 0 auto; padding: 10px 0 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; }
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; font-family: Georgia, "Times New Roman", serif; color: var(--accent); }
.modes { display: flex; gap: 2px; align-items: center; flex: none; margin-left: auto; }
.modes .btn { margin: 0 0 0 4px; }
/* New is a plus in a circle, drawn like the find field's magnifier */
.circle-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; padding: 0;
  border: 1.5px solid var(--accent); border-radius: 50%; background: none; color: var(--accent); cursor: pointer; }
.circle-btn svg { width: 20px; height: 20px; display: block; }
.circle-btn:hover, .circle-btn[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
/* New game menu: a column of levels per board size */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; display: grid; grid-template-columns: repeat(var(--menu-cols, 1), auto);
  gap: 2px 6px; padding: 8px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow); }
.menu.left { right: auto; left: 0; }
.menu-item { font: inherit; font-size: .88rem; padding: 6px 18px; border: 0; border-radius: 10px; background: none; color: var(--fg); cursor: pointer; white-space: nowrap; text-align: center; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--bg); outline: none; }
.menu-item:disabled { opacity: .35; cursor: default; }
.chip-group { display: inline-flex; gap: 0; margin-right: 10px; }
.brand .chip-group { margin-right: 0; }
/* game names are links like the hints: underlined, the current one in bold */
.brand .chip { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.brand .chip:hover { text-decoration-thickness: 2px; }
.brand .chip:not(.active) { color: color-mix(in srgb, var(--muted) 62%, transparent); }
.brand .chip:not(.active):hover { color: var(--fg); }
/* header links are plain text: bold for the active one, nothing else */
.chip { border: 0; background: none; color: var(--muted); border-radius: 6px; padding: 4px 6px; cursor: pointer; font: inherit; font-size: .9rem; }
.chip:hover { color: var(--fg); }
.chip.active { color: var(--accent); font-weight: 700; }
/* the game names follow the title on its line; a long list scrolls sideways rather than pushing New away */
.brand { min-width: 0; }
/* the current game's icon, circled at the far left, opens a menu of the other games; the game's name follows it */
.brand { align-items: center; }
.games-wrap .circle-btn { margin-left: 0; }
#game-group .menu-item { display: flex; align-items: center; gap: 9px; text-align: left; padding-left: 12px; }
.game-name { font-size: .95rem; color: var(--accent); white-space: nowrap; }
/* each game has a line icon, drawn like the header's: in the circle, and before the name in the menu and on the entry card */
.game-icon { width: 1.25em; height: 1.25em; flex: none; display: block; }
#game-group .game-icon { width: 20px; height: 20px; }
.entry-head h2 { display: flex; align-items: center; gap: 8px; }
.entry-head .game-icon { width: 1.15em; height: 1.15em; }
/* share and help are line icons in the text colour */
.chip.icon { display: inline-flex; align-items: center; padding: 4px 5px; }
.chip.icon svg { width: 19px; height: 19px; display: block; }
/* phones: New stays flush top right; if the row is too narrow the game names wrap under the title instead */
@media (max-width: 480px) { header.top { gap: 6px; align-items: flex-start; } .brand { gap: 0 6px; } .chip { padding: 4px; } .chip.icon { padding: 4px 2px; } .circle-btn { margin-left: 2px; } }
@media (max-width: 380px) { h1 { font-size: 1.05rem; } .brand .chip { font-size: .85rem; padding: 4px 3px; } }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; min-height: 30px; }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.hints { display: flex; gap: 10px; align-items: baseline; margin-right: auto; }
.hints-label { color: var(--muted); font-size: .85rem; margin-right: -2px; }
/* hints are underlined links; once used, the answer shows in bold with no underline */
.hint { font: inherit; font-size: .85rem; padding: 2px 0; border: 0; background: none; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hint:hover:not(:disabled) { text-decoration-thickness: 2px; }
.hint.revealed { text-decoration: none; cursor: default; font-weight: 700; }
.hint.on { font-weight: 700; }
.hint:disabled:not(.revealed) { opacity: .45; cursor: default; }
/* The find field has its own row under the game: a magnifier in a circle at the
   right until it is clicked or holds text, then a field across the whole row. The
   match count floats just above its right end, so nothing on the page moves.
   16px so phones don't zoom the page when it takes focus. */
.find-row { position: relative; display: flex; justify-content: flex-end; margin: 8px 0 4px; }
/* the credit, centred under the grid; the open field and a game's own controls sit over it */
.credit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; pointer-events: none; white-space: nowrap;
  font-size: .68rem; color: color-mix(in srgb, var(--muted) 60%, transparent); }
.credit a { color: inherit; text-decoration: none; pointer-events: auto; }
.credit a:hover { text-decoration: underline; color: var(--muted); }
.find-row:has(.find:focus, .find:not(:placeholder-shown), .mq-ask) .credit { visibility: hidden; }
/* a game's own controls at the left of the row (Marquee's Show cast); they step aside while the field is open */
.find-extra { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 30px; }
.find-extra:empty, body:not(.theme-lights) .find-extra, .find-row:has(.find:focus, .find:not(:placeholder-shown)) .find-extra { display: none; }
.find-extra .circle-btn { margin: 0; }
.circle-btn:disabled { opacity: .35; cursor: default; background: none; color: var(--accent); }
.find-wrap { position: relative; flex: 1; height: 30px; }
.find { position: absolute; right: 0; top: 0; z-index: 4; width: 30px; height: 30px; padding: 0; font: inherit; font-size: 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); background: var(--card); color: var(--fg); cursor: pointer; transition: width .2s ease; }
.find::placeholder { color: transparent; }
.find:focus, .find:not(:placeholder-shown) { width: 100%; padding: 0 36px 0 14px; cursor: text; }
.find:focus::placeholder { color: var(--muted); }
.find:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.find-icon { position: absolute; right: 0; top: 0; z-index: 5; width: 30px; height: 30px; padding: 7px; color: var(--accent); pointer-events: none; }
.typed { position: absolute; right: 6px; bottom: calc(100% + 6px); z-index: 4; font-size: .85rem; padding: 3px 10px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* a top row with nothing showing in it (the modes have no hints) takes no room */
.row:not(:has(> :not(.hidden))) { display: none; }
/* Strands: the row above the board is as wide as the board, so the magnifier sits flush right with the grid */
.strands-game .row, .strands-game .find-row { max-width: var(--board, 402px); margin-left: auto; margin-right: auto; }
.tile.match { outline: 3px solid var(--accent); outline-offset: -3px; }
.meta { color: var(--muted); font-size: .85rem; margin: 0 auto 0 0; }
.games { font: inherit; font-size: .85rem; font-weight: 600; color: var(--fg); background: transparent; border: 0;
  border-radius: 6px; padding: 2px 4px 2px 0; margin-right: 6px; max-width: 60%; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* the puzzle picker follows the game names on the top line */
.brand .games { flex: none; margin: 0; padding: 2px 0; font-size: .9rem; font-weight: 400; max-width: 12em; field-sizing: content; }   /* as wide as the chosen puzzle, not the longest */
.hidden { display: none !important; }
/* read by screen readers, not shown (the page title in the header) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); width: var(--board-w); max-width: 100%; margin: 0 auto; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card) 78%, transparent); border: 1px solid var(--card-border); border-radius: min(var(--radius), calc(var(--tile-h) * .2));
  padding: var(--tile-pad); cursor: pointer; font: inherit; color: inherit;
  transition: transform .08s ease, background .12s ease; height: var(--tile-h); text-align: center; overflow: hidden;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.tile:active { transform: scale(.97); }
.tile img { width: var(--face); height: var(--face); border-radius: 50%; object-fit: cover; background: var(--card-border); display: block; flex: none; }
/* names break at spaces; only a long word (Mahershala) is hyphenated, never a short surname */
.tile .name { font-size: var(--name-size); line-height: 1.15; margin-top: 5px; font-weight: 600; overflow-wrap: anywhere;
  hyphens: auto; hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.selected { background: var(--selected); color: var(--selected-fg); border-color: var(--selected); }
.tile.shake { animation: shake .4s; }
.tile.bounce { animation: bounce .35s; }
@keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-5px);} 75% { transform: translateX(5px);} }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
@media (max-width: 420px) {
  :root { --tile-pad: 4px; }
  .tile .name { margin-inline: -2px; }   /* a little more line for long surnames */
}
/* Connections and Strands: full-frame photos like Marquee's, the name over the foot of the photo */
.grid .tile { padding: 0; justify-content: flex-end; border: 0; border-radius: min(10px, calc(var(--tile-h) * .08)); background: #2a211d; color: #fff; }
.grid .tile img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 22%; background: #2a211d; pointer-events: none; }
.grid .tile .name { position: relative; z-index: 1; width: 100%; margin: 0; padding: 20px 4px 6px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  background: linear-gradient(transparent, rgba(0, 0, 0, .74) 55%); -webkit-line-clamp: 3; }
/* selected and found tiles are a ring over the photo, the name band in the same colour */
.grid .tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.grid .tile.selected { background: #2a211d; color: #fff; }
.grid .tile.selected::after { box-shadow: inset 0 0 0 4px var(--selected); }
.grid .tile.selected .name { background: var(--selected); color: var(--selected-fg); text-shadow: none; }
/* an outline would sit under the photo, so a type-to-find match and an outlined cast are drawn on the ring too */
.grid .tile.match { outline: none; }
.grid .tile.match::after { box-shadow: inset 0 0 0 4px var(--accent); }
.grid .tile.hinted { outline: none; }
.grid .tile.hinted::after { outline: 3px dashed #fff; outline-offset: -6px; }

.solved { display: flex; flex-direction: column; gap: var(--gap); width: var(--board-w); max-width: 100%; margin-left: auto; margin-right: auto; }
.solved:not(:empty) { margin-bottom: var(--gap); }
.group {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; height: var(--tile-h); overflow: hidden;
  border-radius: var(--radius); padding: 8px 12px; color: #1d1b19; animation: pop .3s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.group.d0 { background: var(--yellow); } .group.d1 { background: var(--green); }
.group.d2 { background: var(--blue); } .group.d3 { background: var(--purple); }
.group .poster { height: calc(var(--tile-h) - 16px); width: calc((var(--tile-h) - 16px) * 2 / 3); border-radius: 10px; object-fit: cover; background: rgba(0,0,0,.1); }
.group .poster.empty { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.group > div { min-width: 0; }
.group h3 { margin: 0 0 4px; font-size: 1.05rem; }
.group h3 small { font-weight: 400; opacity: .75; }
.group .faces { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .85rem; }
.group .faces span { display: inline-flex; align-items: center; gap: 5px; }
.group .faces img { width: 20px; height: 30px; border-radius: 3px; object-fit: cover; object-position: 50% 22%; }
@media (max-width: 480px), (max-height: 480px) {
  .group { gap: 8px; padding: 6px 8px; }
  .group h3 { font-size: .9rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .group .faces { font-size: .72rem; gap: 2px 8px; }
  .group .faces span { gap: 4px; }
  .group .faces img { width: 14px; height: 21px; border-radius: 2px; }
}

.message { min-height: 1.4em; text-align: center; margin: 8px 0 2px; font-weight: 600; }
.mistakes { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.dots span { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin: 0 3px; transition: transform .2s, opacity .2s; }
.dots span.gone { transform: scale(0); opacity: 0; }

.controls { display: flex; justify-content: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.btn { font: inherit; font-size: .9rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 360px) { .controls { gap: 8px; } .controls .btn { padding: 8px 12px; } }
/* touch screens: the header links, hints and buttons keep their look but get a finger-sized
   hit area (about 44px tall) */
@media (pointer: coarse) {
  .chip, .hint, .btn { position: relative; }
  .chip::after, .hint::after, .btn::after { content: ""; position: absolute; inset: -8px -2px; }
  .hint::after { inset: -10px -5px; }
  .btn::after { inset: -6px 0; }
  .games { padding-block: 11px; margin-block: -9px; }
  .menu-item { padding-block: 10px; }
}

.results { text-align: center; border-top: 1px solid var(--card-border); padding-top: 16px; margin-top: 8px; }
.results h2 { font-family: Georgia, serif; margin: 0 0 8px; }
.emoji { font-size: 1.4rem; line-height: 1.3; margin: 0; font-family: inherit; }
.decoys { list-style: none; padding: 0; margin: 8px auto 0; text-align: left; max-width: 480px; font-size: .9rem; color: var(--muted); }
.decoys li { padding: 6px 0; border-bottom: 1px dashed var(--card-border); }
.decoys b { color: var(--fg); }


.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal-card { background: var(--card); color: var(--fg); border-radius: 24px; padding: 24px; max-width: 460px; width: 100%; box-shadow: var(--shadow);
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@supports (height: 100dvh) { .modal-card { max-height: calc(100dvh - 32px); } }
.modal-card h2 { margin-top: 0; font-family: Georgia, serif; }
.modal-card li { margin: 8px 0; }
.modal-card ul { padding-left: 18px; }
@media (max-width: 480px) {
  .modal-card { padding: 18px 20px; border-radius: 20px; font-size: .92rem; }
  .modal-card h2 { margin-bottom: 8px; }
  .modal-card li { margin: 6px 0; }
}
.share-card { text-align: center; }
.share-card p { color: var(--muted); font-size: .9rem; }
.qr { display: flex; justify-content: center; margin: 8px 0; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.share-urls { list-style: none; padding: 0 !important; margin: 8px 0 16px; }
.share-urls li { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; padding: 4px 0; }
.share-urls a { color: inherit; }
/* the entry card, one small card in the middle of the screen: the rules (the first time, and
   from the ?) with Make Your Own Game under them, or the picks (New game); the game behind
   stays on screen, under the same dim as the other modals */
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.entry-head h2 { margin: 0; }
#entry-today { flex: none; }
html.entry-open, html.entry-open body { overflow: hidden; }
#entry { overscroll-behavior: contain; touch-action: none; }
.entry-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.entry-card { max-width: 380px; padding: 18px 18px 16px; font-size: .88rem; line-height: 1.35; border-radius: 18px;
  border: 1px solid var(--card-border); box-shadow: 0 6px 28px rgba(0, 0, 0, .35); }
.entry-card h2 { font-size: 1.2rem; margin: 0 0 6px; }
/* the rules: short lines, one each, without bullets, smaller than the card's text, with a little air above */
.entry-card ul { list-style: none; padding: 0; margin: 12px 0 10px; font-size: .8rem; line-height: 1.4; }
.entry-card li { margin: 3px 0; }
.help-foot { color: var(--muted); font-size: .78rem; margin: 0 0 6px; }
.help-foot.tmdb { font-size: .7rem; opacity: .75; }
.help-foot a { color: inherit; }
/* a control the rules name is drawn as it is in the game: the eye, Moneyshot's buttons, Marquee's numbered doors */
.help-ic { width: 1.15em; height: 1.15em; vertical-align: -.22em; display: inline-block; }
.help-door { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; margin: 0 2px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .72em; font-style: normal; vertical-align: -.3em; }
/* Make Your Own Game is hollow and gives way to the picks; Play My Game is filled, like Play Today's Game */
.entry-own, .entry-play { display: block; width: 100%; margin: 12px 0 0; }
#entry-rules + .entry-own { margin-top: 16px; }
.entry-play { margin-top: 16px; }
.entry-row { margin: 12px 0 0; }
.entry-label { display: block; margin: 0 0 6px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { font: inherit; font-size: .82rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--card-border); background: none; color: var(--fg); cursor: pointer; }
.pick:hover:not(:disabled) { border-color: var(--accent); }
/* a picked chip is outlined in the accent; the filled accent is kept for Play Today's Game */
.pick.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.pick:disabled { opacity: .3; cursor: default; }

/* ---------------------------------------------------------------- strands */
.board { position: relative; }
.strand-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.strand-lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strand-lines .chain-line { stroke: var(--selected); stroke-width: 6; opacity: .55; }
.strand-lines .found-line { stroke: rgba(0,0,0,.28); stroke-width: 4; }

/* the 3x5 board: game.js (fit) sizes --strand-h and --board so the whole game
   fits the viewport without scrolling */
.strands-game { --gap: 6px; }
.strands-game .board { max-width: var(--board, 402px); margin: 0 auto; }
.grid.strands { touch-action: none; user-select: none; -webkit-user-select: none; width: auto; }
.grid.strands.done { touch-action: auto; }
.grid.strands .tile { height: var(--strand-h, 132px); border-radius: min(10px, calc(var(--strand-h, 132px) * .08)); }
.grid.strands .tile .name { font-size: clamp(.66rem, calc(var(--strand-h, 132px) * .09), .85rem); padding: 18px 3px 5px; line-height: 1.12; }
/* game.js sets --strand to the film's own colour.
   tracing: two or more chain tiles from the same film, halfway to the found colour */
.tile.selected.partial::after { box-shadow: inset 0 0 0 4px var(--strand, var(--blue)); }
.tile.selected.partial .name { background: color-mix(in srgb, var(--strand, var(--blue)) 50%, var(--selected)); }
.tile.found { cursor: default; }
.tile.found::after { box-shadow: inset 0 0 0 4px var(--strand, var(--blue)); }
.tile.found .name { background: var(--strand, var(--blue)); color: #1d1b19; text-shadow: none; }
.tile.hinted { outline: 3px dashed var(--fg); outline-offset: -4px; }
.tile.hinted.match { outline: 3px solid var(--accent); outline-offset: -3px; }   /* a type-to-find match still shows on an outlined cast */
.tile .badge {
  position: absolute; top: 6px; left: 6px; z-index: 3; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: .65rem; font-weight: 700; line-height: 18px; text-align: center;
}
.tile.selected .badge { background: var(--selected-fg); color: var(--selected); }
.tile.found .badge { background: rgba(0,0,0,.6); color: #fff; }

/* One status slot under the board: the message (or the chain being traced) and
   the list of found films share it, so the board gets the rest of the page. */
.strands-game .status { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 5px; }
.strands-game .status > * { grid-area: 1 / 1; }
.strands-game .message { min-height: 24px; margin: 0; font-size: .88rem; line-height: 24px; }
.strands-game .message.chain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strands-game .message:not(:empty) + .found-list > * { visibility: hidden; }
.found-list { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; align-items: center; min-height: 24px; }
.pill { font-size: .75rem; line-height: 1.3; padding: 2px 10px; border-radius: 999px; background: var(--strand, var(--blue)); color: #1d1b19;
  max-width: 17em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: pop .3s ease; }
.pill small { opacity: .7; }
.strands-game .controls { margin: 5px 0 2px; }
.strands-game .controls .btn { padding: 5px 16px; font-size: .85rem; }

/* ------------------------------------------------------------------ modes */
/* modes.js draws a whole game into #mode-root and sizes it through --T (see fit) */
.mode { max-width: 460px; margin: 0 auto; }
.m-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9rem; color: var(--muted); }
.m-bar b { color: var(--fg); }
.m-score { display: inline-block; font-variant-numeric: tabular-nums; }
.m-score.pop { animation: score .5s ease; color: var(--fg); font-weight: 700; }
@keyframes score { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* hive: the rank ladder, then the centre actor with six around */
.m-rank { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.m-rank b { color: var(--fg); font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.m-track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.m-track i { position: absolute; inset: 0 auto 0 0; min-width: 8px; border-radius: 999px; background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: width .45s ease; }
.m-track u { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -12px; border-radius: 50%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent); transition: background .3s, border-color .3s; }
.m-track u.on { background: var(--yellow); border-color: var(--selected); }
.hive { --honey: #f2b01e; position: relative; width: calc(var(--T, 96px) * 4); max-width: 100%; aspect-ratio: 1 / 1.2; margin: 0 auto; }
/* full-frame portrait photos, the name over the foot of each */
.hive .node { position: absolute; width: 21.5%; height: auto; aspect-ratio: 2 / 3; translate: -50% -50%; padding: 0; border: 0; border-radius: 8px;
  background: #2a211d; color: #fff; overflow: hidden; justify-content: flex-end; box-shadow: 0 0 0 1.5px var(--card-border); transition: box-shadow .12s ease; }
.hive .node:disabled { cursor: default; }
.hive .node img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 22%; }
.hive .node .name { position: relative; z-index: 1; width: 100%; margin: 0; padding: 18px 3px 5px; font-size: clamp(.62rem, calc(var(--T, 96px) * .12), .82rem); line-height: 1.1;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); background: linear-gradient(transparent, rgba(0, 0, 0, .74) 55%); -webkit-line-clamp: 3; }
.hive .node.selected { box-shadow: 0 0 0 4px var(--selected); }
.hive .node.selected .name { background: var(--selected); color: var(--selected-fg); text-shadow: none; }
.hive .node.centre { box-shadow: 0 0 0 4px var(--honey), 0 0 0 5px rgba(0,0,0,.18); }
.hive .node.centre.selected { box-shadow: 0 0 0 4px var(--honey), 0 0 0 8px var(--selected); }
.hive .node.match { outline: none; box-shadow: 0 0 0 4px var(--accent); }
.m-line { min-height: 1.4em; margin: 2px 0 0; text-align: center; font-size: .9rem; font-weight: 600; }
.m-line small { font-weight: 400; opacity: .75; }
.m-line.picking { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.m-line.bad { color: var(--muted); }
.m-line em { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--yellow); color: #1d1b19; font-style: normal; font-weight: 700; animation: pop .3s ease; }
.m-found { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; font-size: .85rem; }
.m-found div { display: flex; gap: 8px; align-items: baseline; }
.m-found b { flex: 0 1 auto; min-width: 0; }
.m-found div:first-child:not(.missed) { animation: pop .3s ease; }
.m-found b small { font-weight: 400; opacity: .7; }
.m-found span { color: var(--muted); flex: 0 2 auto; min-width: 4.5em; }
.m-found i { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-found .missed { opacity: .55; }
.m-after { display: flex; justify-content: center; margin: 12px 0 0; }
.m-after .btn { padding: 4px 12px; font-size: .8rem; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.mode-game .message { margin: 2px 0 0; }

/* --------------------------------------------------------------- marquee */
/* a black page whatever the colour scheme: the faces are the only light */
body.theme-lights {
  --bg: #000; --bg-fun: #000;
  --fg: #f5efe6; --muted: #958b80; --card: #17130f; --card-border: #2c251d;
  --selected: #ffd27a; --selected-fg: #140c00; --accent: #ffc24d; --on-accent: #1a1000;
  --shadow: 0 1px 2px rgba(0,0,0,.6);
  --bulb: #ffcf6b;
  color-scheme: dark;
}
.mode-marquee { max-width: none; }
/* the search sits just under the wall's bottom right corner and opens across the wall's width:
   #mode-root steps out of the way so its parts and the find row line up in one column */
body.theme-lights main { display: flex; flex-direction: column; }
body.theme-lights #mode-root { display: contents; }
body.theme-lights .mq-sign { width: 100%; }
body.theme-lights .mq-wall { align-self: center; }   /* as wide as its photos, so the find row can match it */
body.theme-lights .find-row { order: 1; align-self: center; width: var(--grid-w, 100%); max-width: 100%; margin: 6px 0 0; }
body.theme-lights .status { order: 2; }
/* Marquee ends on the wall itself: no results panel (title, emoji row, share) under it */
body.theme-lights #results { display: none; }
.mq-ask { display: flex; align-items: center; gap: 6px; font-size: .88rem; white-space: nowrap; }
.mq-ask .btn { padding: 3px 12px; font-size: .82rem; }
.mq-ask .btn:first-of-type { margin-left: 4px; }
/* the sign: a backlit letter board with track lines, in an amber frame with a row of
   bulbs top and bottom and neon fins at the sides. Nothing on it blinks; two
   bulbs flicker faintly. */
.mq-sign { position: relative; max-width: min(100%, 640px); margin: 4px auto 14px; padding: 20px; border-radius: 10px;
  background: linear-gradient(#e99a40, #c4691d);
  box-shadow: 0 0 0 2px #ffc66e, 0 0 28px 6px rgba(255, 150, 50, .4); }
.mq-board { min-width: 0; padding: 4px 14px 2px; border: 3px solid #2a1b0c; border-radius: 3px; text-align: center; color: #262626;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(0, 0, 0, .07) calc(20% - 1px) 20%), linear-gradient(#fbf8f0, #ece6d8);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 240, 210, .6);
  font-family: "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", Impact, sans-serif; font-weight: 700; text-transform: uppercase; }
.mq-kicker, .mq-board h2 { display: block; border-bottom: 2px solid #c9c2b3; }
.mq-kicker { padding: 3px 0 1px; font-size: .78rem; letter-spacing: .16em; color: #5a5048; }
/* the title band is always the height of a full-size line; modes.js shrinks a long title's letters
   inside it, so changing films never moves the sign */
.mq-board h2 { --title: clamp(1.7rem, 6.4vw, 2.7rem); margin: 0; padding: 4px 0 0; white-space: nowrap; overflow: hidden;
  height: calc(var(--title) * 1.15 + 4px); line-height: calc(var(--title) * 1.15);
  font-family: inherit; font-size: var(--title); letter-spacing: .05em; color: #262626;
  /* slotted plastic letters standing a little proud of the board: lit from above, a soft shadow below */
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .7), 0 1px 0 #8f887d, 0 2px 2px rgba(0, 0, 0, .16); }
/* each letter hangs on the board a little crooked (modes.js gives it a turn of up to 2 degrees) */
.mq-board h2 span { display: inline-block; }
.mq-board h2:last-child { border-bottom: 0; }
/* the frame's bulbs, placed by modes.js at an even spacing all the way round: glass with a hot
   spot up and to the left, each at its own brightness (--b); a dead one is dark glass */
.mq-bulb { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; filter: brightness(var(--b, 1));
  background: radial-gradient(circle at 36% 34%, #fff 0 15%, #fff3cc 32%, #ffcd66 62%, #e38a28 100%);
  box-shadow: 0 0 7px 2px rgba(255, 185, 80, .55); }
/* the two flickering bulbs (modes.js): never darker than about four-fifths of their own glow,
   on uneven beats so the pair never fall into step */
.mq-bulb.flicker { animation: mq-flicker 2.9s steps(1, end) infinite; }
.mq-bulb.flicker ~ .mq-bulb.flicker { animation-duration: 3.7s; animation-delay: -1.3s; }
@keyframes mq-flicker {
  0%, 100% { filter: brightness(var(--b, 1)); }
  11% { filter: brightness(calc(var(--b, 1) * .84)); }
  14% { filter: brightness(var(--b, 1)); }
  17% { filter: brightness(calc(var(--b, 1) * .9)); }
  19%, 52% { filter: brightness(var(--b, 1)); }
  55% { filter: brightness(calc(var(--b, 1) * .87)); }
  60%, 78% { filter: brightness(var(--b, 1)); }
  80% { filter: brightness(calc(var(--b, 1) * .82)); }
  82% { filter: brightness(calc(var(--b, 1) * .93)); }
  85% { filter: brightness(var(--b, 1)); }
}
@media (prefers-reduced-motion: reduce) { .mq-bulb.flicker { animation: none; } }
.mq-bulb.out { filter: none; background: radial-gradient(circle at 36% 34%, #7a5a38 0 12%, #4a2e12 48%, #2a1806 100%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
/* centred on the bottom run of bulbs, 10px up from the frame's edge */
.mq-dots { position: absolute; left: 50%; bottom: 10px; translate: -50% 50%; display: flex; gap: 7px; padding: 2px 9px; border-radius: 9px; background: #b8601c; }
.mq-dots i { width: 12px; height: 12px; border-radius: 50%; background: #6e3a10; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); transition: background .3s, box-shadow .3s; }
.mq-dots i.on { background: #fffbea; box-shadow: 0 0 6px 2px #ffd27a, 0 0 14px 4px rgba(255, 190, 80, .7); }

/* the theaters: a neon numeral in a neon ring per film, arrows either side. Pink tubes
   for a dark theater, green once you lit it cleanly, yellow if it took misses, red if
   Show cast lit it; the one on the sign burns brightest. Now and then one of them
   buzzes (modes.js, at random). */
.mq-theaters { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 2px auto 14px; flex-wrap: wrap; }
.mq-theaters button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mq-door { --neon: #ff4fa8; --tube: #ffc2e2; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: none;
  border: 2px solid var(--tube); color: var(--tube); font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: .95rem; font-weight: 500;
  text-shadow: 0 0 2px #fff, 0 0 6px var(--neon), 0 0 12px var(--neon);
  box-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon), inset 0 0 4px var(--neon);
  filter: brightness(.55) saturate(.8); }
.mq-door:hover { filter: brightness(.85); }
.mq-door.lit { --neon: #2bff6a; --tube: #c4ffd2; }
.mq-door.missed { --neon: #ffd21f; --tube: #fff3b0; }
.mq-door.given { --neon: #ff2a2a; --tube: #ffc0b8; }
.mq-door.on { filter: none; color: #fff; border-color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--neon), 0 0 16px var(--neon), 0 0 26px var(--neon);
  box-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon), 0 0 28px var(--neon), inset 0 0 6px var(--neon); }
.mq-arrow { width: 30px; height: 30px; padding: 0 0 3px; border: 0; background: none; font-size: 1.6rem; line-height: 1;
  color: #ffc2e2; text-shadow: 0 0 6px #ff4fa8, 0 0 12px #ff4fa8; opacity: .8; }
.mq-arrow:hover { opacity: 1; color: #fff; }
/* touch-action: a finger dragged over the wall moves the spotlight instead of scrolling */
.mq-wall { touch-action: none; position: relative; display: grid; grid-template-columns: repeat(var(--cols), var(--T, 80px)); gap: 4px; justify-content: center; }
/* whole photos, full colour underneath; the shade on top greys and dims everything
   outside a soft-edged circle at the pointer (modes.js sets --x, --y and --R) */
.mode-marquee .bulb { height: auto; padding: 0; border: 0; border-radius: 3px; background: #111; overflow: hidden; justify-content: flex-start; transition: none; }
.mode-marquee .bulb:active { transform: none; }
.mode-marquee .bulb img { width: var(--T, 80px); height: calc(var(--T, 80px) * 1.5); border-radius: 0; object-fit: cover; background: #111; }
/* the name stays hidden until the pointer rests on the photo (or a key lands on it) */
.mode-marquee .bulb .name { position: absolute; inset: auto 0 0; margin: 0; padding: 18px 4px 5px; color: rgba(245, 236, 222, .72); text-shadow: 0 1px 2px #000;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6) 50%); font-size: clamp(.58rem, calc(var(--T, 80px) * .13), .8rem); font-weight: 500;
  display: flex; flex-direction: column; gap: 0; line-height: 1; -webkit-line-clamp: unset; opacity: 0; transition: opacity .2s ease-out; }
.mode-marquee .bulb .name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* on a touch screen the name sits at the top of the photo, above the finger */
@media (pointer: coarse) {
  .mode-marquee .bulb .name { inset: 0 0 auto; padding: 5px 4px 18px; background: linear-gradient(rgba(0, 0, 0, .6) 50%, transparent); }
}
/* modes.js adds .rest once the pointer has stopped on a photo; fade in slowly, out quickly */
/* once shown the name is full white, on a darker band, so it reads over any photo (a lit face's too) */
.mode-marquee .bulb.rest .name, .mode-marquee .bulb:focus-visible .name { opacity: 1; color: #fff; font-weight: 600;
  text-shadow: 0 1px 3px #000, 0 0 2px #000; transition: opacity .6s ease-in; }
/* the spotlight is the pointer: no arrow or hand over the photos */
.mq-wall, .mode-marquee .bulb, .mode-marquee .bulb:disabled { cursor: none; }
.mq-shade { --hole: radial-gradient(circle var(--R, 140px) at var(--x, -9999px) var(--y, -9999px), transparent 72%, #000 100%);
  position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: grayscale(1) brightness(.28); backdrop-filter: grayscale(1) brightness(.28);
  -webkit-mask-image: var(--hole); mask-image: var(--hole); }
@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) { .mq-shade { background: rgba(0, 0, 0, .72); } }
/* found casts, and type-to-find matches, sit above the shade */
.mode-marquee .bulb.lit, .mode-marquee .bulb.given, .mode-marquee .bulb.match { z-index: 2; }
.mode-marquee .bulb.lit { box-shadow: 0 0 0 3px var(--bulb), 0 0 22px 4px rgba(255, 190, 80, .5); }
.mode-marquee .bulb.lit:not(.rest, :focus-visible) .name { color: rgba(255, 207, 107, .8); }
.mode-marquee .bulb.given { filter: brightness(.75); }
.mq-wall.wrap .bulb.given { filter: none; }   /* the wrap lights everyone in full */
/* after the game the theaters change slowly: the letters come up and the cast warms into colour */
.mq-sign.fade .mq-kicker, .mq-sign.fade h2 { animation: letters-in 1.4s ease-out; }
/* one face at a time: modes.js staggers the delays in a random order; each waits dark until its turn */
.mq-wall.fade .bulb.lit, .mq-wall.fade .bulb.given { animation: cast-in 1.2s ease-out backwards; }
@keyframes letters-in { from { opacity: 0; } }
@keyframes cast-in { from { filter: grayscale(1) brightness(.25); } }
.mode-marquee .bulb.dud img { filter: grayscale(1) brightness(.5); }
.mode-marquee .bulb.dud::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #a02828; pointer-events: none; }
.mode-marquee .bulb.match { outline: 3px solid var(--accent); outline-offset: -3px; }
/* one gentle fade each, no flashing */
.mode-marquee .bulb.ignite { animation: ignite .6s ease-out; }
.mode-marquee .bulb.fizzle img { animation: fizzle .6s ease-out; }
@keyframes ignite { from { filter: grayscale(1) brightness(.3); } to { filter: none; } }
@keyframes fizzle { from { filter: sepia(1) hue-rotate(-45deg) saturate(4) brightness(.8); } to { filter: grayscale(1) brightness(.5); } }
/* phones: a narrower frame, and all the doors on one row */
@media (max-width: 520px) {
  .mq-sign { padding: 20px; }
  .mq-board { padding: 3px 8px 2px; }
  .mq-theaters { gap: 4px; flex-wrap: nowrap; }
  .mq-door, .mq-arrow { width: 28px; height: 28px; }
}

/* -------------------------------------------------------------- moneyshot */
/* a dark screening room whatever the colour scheme, so the stills read as projected */
body.theme-shot {
  --bg: #0c0d10; --bg-fun: radial-gradient(120% 90% at 50% 0%, #1b1e26 0%, #0c0d10 60%);
  --fg: #f1eee8; --muted: #9a958c; --card: #191b21; --card-border: #2c2f38;
  --selected: #f1eee8; --selected-fg: #0c0d10; --accent: #ece8e1; --on-accent: #0c0d10;   /* the controls are a soft white */
  --shadow: 0 1px 2px rgba(0,0,0,.6);
  --ms-ok: #6fd3a0; --ms-no: #ff7a5c;
  --ms-hush: #8b8d93;   /* the placeholder and the hint in the box: one light grey */
  color-scheme: dark;
}
.mode-moneyshot { max-width: none; }
.ms { display: grid; gap: 10px 18px; align-items: start; }
.ms-shot { position: relative; justify-self: center; margin: 0; line-height: 0; border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 40px rgba(0, 0, 0, .6); transition: box-shadow .25s; }
/* modes.js sizes the frame to the room the page leaves; each still fits inside it */
.ms-shot { background: #000; }
.ms-shot > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ms-shot.ok { box-shadow: 0 0 0 3px var(--ms-ok), 0 12px 40px rgba(0, 0, 0, .6); }
.ms-shot.no { box-shadow: 0 0 0 3px var(--ms-no), 0 12px 40px rgba(0, 0, 0, .6); }
.ms-shot[data-act] { cursor: pointer; }
.ms-shot figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 28px 14px 10px; line-height: 1.3; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85) 55%); color: #fff; animation: ms-in .3s ease-out; }
.ms-shot figcaption b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; }
.ms-shot figcaption b small { font-weight: 400; opacity: .75; }
.ms-shot figcaption.ok b { color: var(--ms-ok); }
.ms-shot figcaption.no b { color: var(--ms-no); }
.ms-shot figcaption div > span { font-size: .78rem; color: rgba(255, 255, 255, .7); }
@keyframes ms-in { from { opacity: 0; translate: 0 6px; } }
/* the panel is as wide as the box wants: a long title, or the hint, typed in full view */
.ms-panel { width: 100%; max-width: 560px; justify-self: center; text-align: center; }
/* the verdict once it's over, in the serif of the titles */
.ms-verdict { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; line-height: 1.25; }
.ms-verdict.won { color: var(--ms-ok); }
.ms-verdict.lost { color: var(--ms-no); }
/* one line of measures, every icon one size: the seven films to name, misses, streak, passes */
.ms-line { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 4px 0 14px; white-space: nowrap; }
.ms-pips { display: inline-flex; align-items: center; gap: 2px; }
.ms-pips i, .ms-pips button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #3a3e48; }
.ms-pips svg { width: 16px; height: 16px; }
.ms-pips.shots button { color: #fff; cursor: pointer; border-radius: 3px; }
.ms-pips.shots button:hover, .ms-pips.shots button.on { color: var(--ms-ok); }
.ms-pips.miss i.lit { color: var(--ms-no); }
.ms-pips.miss svg { stroke-width: 2.6; }
.ms-pips.streak i.lit { color: #ffb53b; }
.ms-pips.streak i.lit svg { fill: currentColor; }
.ms-pips.pass i.lit { color: var(--fg); }
/* back and forth: arrows on the frame's edges */
.ms-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; opacity: .75;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ms-nav:hover { opacity: 1; background: rgba(0, 0, 0, .7); }
.ms-nav.prev { left: 8px; }
.ms-nav.next { right: 8px; }
.ms-nav svg { width: 20px; height: 20px; }
/* film info on TMDB: a pill at the caption's right, opening a window of its own */
.ms-film { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 999px;
  background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.ms-film span { font-size: 1.1em; }
.ms-film:hover { background: #fff; color: #000; }
.ms-shot.pass { box-shadow: 0 0 0 3px var(--muted), 0 12px 40px rgba(0, 0, 0, .6); }
.ms-shot figcaption.pass b { color: #fff; }
/* the box with its arrow inside, and the pass button beside it */
.ms-form { position: relative; display: flex; gap: 8px; align-items: center; }
/* 16px so phones don't zoom the page when the box takes focus */
.ms-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 46px 9px 14px; border-radius: 999px; color: var(--fg);
  background: var(--card); border: 1.5px solid var(--card-border); outline: none; }
.ms-input:focus { border-color: var(--accent); }
.ms-input::placeholder { color: var(--ms-hush); opacity: 1; }
/* a right answer: the box takes the proper title in green, and a check draws itself where the arrow was */
.ms-input.right { border-color: var(--ms-ok); color: var(--ms-ok); animation: ms-glow .7s ease-out; }
.ms-check { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ms-ok); color: #062014; animation: ms-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.ms-check svg { width: 22px; height: 22px; stroke-width: 3; }
.ms-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ms-draw .35s .15s ease-out forwards; }
@keyframes ms-pop { from { scale: .3; opacity: 0; } }
@keyframes ms-draw { to { stroke-dashoffset: 0; } }
@keyframes ms-glow { from { box-shadow: 0 0 0 6px rgba(111, 211, 160, .35); } to { box-shadow: 0 0 0 0 rgba(111, 211, 160, 0); } }
@media (prefers-reduced-motion: reduce) { .ms-check, .ms-input.right { animation: none; } .ms-check path { animation: none; stroke-dashoffset: 0; } }
/* the hint, inert in the box like a placeholder (up to two small lines) until typing covers it */
.ms-said { position: absolute; left: 16px; right: 44px; top: 50%; translate: 0 -50%; pointer-events: none;
  font-size: 16px; line-height: 1.15; text-align: left; color: var(--ms-hush); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  animation: ms-fade .3s ease-out; }
@keyframes ms-fade { from { opacity: 0; } }
.ms-input:not(:placeholder-shown) + .ms-said { display: none; }
.ms-field { position: relative; flex: 1; min-width: 0; display: flex; }
.ms-go, .ms-round { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border-radius: 50%; cursor: pointer; }
.ms-go svg, .ms-round svg { width: 20px; height: 20px; }
.ms-go { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border: 0; background: var(--accent); color: var(--on-accent); }
.ms-round { width: 42px; height: 42px; border: 1.5px solid var(--accent); background: none; color: var(--accent); }
.ms-round:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.ms-round:disabled { opacity: .35; cursor: default; }
.ms-credit { margin: 12px 0 0; font-size: .7rem; color: var(--muted); }
.ms-credit a { color: inherit; }
.ms-pre { display: none; }
/* Moneyshot ends on the still itself (the verdict, the shots to look back at): no results panel under it */
body.theme-shot #results { display: none; }
/* while a game is on, the page's other controls dim; a pointer or focus brings them back */
body.theme-shot.ms-playing header.top, body.theme-shot.ms-playing .ms-credit { opacity: .35; transition: opacity .3s; }
body.theme-shot.ms-playing header.top:hover, body.theme-shot.ms-playing header.top:focus-within,
body.theme-shot.ms-playing .ms-credit:hover { opacity: 1; }
.ms-rotate { display: none; }
/* a phone held sideways: the still takes the height of the screen, the box sits beside it,
   and the page uses the whole width (less the safe areas) so the box's column costs the still nothing */
@media (orientation: landscape) and (max-height: 560px) {
  body.theme-shot main, body.theme-shot header.top { max-width: none; }
  .ms { grid-template-columns: minmax(0, 1fr) 350px; }
  .ms-shot { justify-self: end; }
  .ms-panel { align-self: center; }
  .ms-line { gap: 10px; }
  .ms-pips svg { width: 13px; height: 13px; }   /* all eighteen fit the panel's line */
  .ms-form { gap: 6px; }
  .ms-said { font-size: 13px; }
  .ms-round { width: 38px; height: 38px; }
  .ms-verdict { font-size: 1.05rem; }
  body.theme-shot header.top { padding-top: 4px; }
}
/* ...and upright, it asks to be turned */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  .ms { display: none; }
  .ms-rotate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18vh 24px 0; text-align: center; color: var(--muted); }
  .ms-rotate svg { width: 64px; height: 64px; color: var(--accent); animation: ms-turn 2.4s ease-in-out infinite; }
  @keyframes ms-turn { 0%, 30% { rotate: 0deg; } 60%, 100% { rotate: -90deg; } }
}
@media (prefers-reduced-motion: reduce) { .ms-rotate svg { animation: none; } }