/* The passage on top and a live feed of the messages speaking it underneath, like
   Twitch's own mobile layout; side by side on wide screens, like Twitch on desktop.
   The page opens on the passage alone; the Live chat button brings the feed in.
   Set in IM Fell English, a revival of type cut in the 1670s, on newsprint grey: a word is black if it was said in the
   last minute and grey if not, and flashes yellow when said again. The chat panel
   keeps Twitch's dark chat colours. */
:root {
  --paper: #ecebe8;
  --paper-2: #e2e1dd;
  --ink: #1b1b1b;
  --faint: #a3a29e;
  --hair: #d2d1cd;
  --grey: #65645f;
  --mark: #ffe14d;
  --fell: 'IM Fell English', Georgia, serif;
  /* IM Fell has no true small caps, so small-cap text uses its companion SC face */
  --fell-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --panel-w: clamp(360px, 40vw, 640px);   /* the chat log and VOD panel */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  font: 400 17px/1.5 var(--fell);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.sc { font-family: var(--fell-sc); letter-spacing: 0.03em; }

/* One slim bar: the page's name (with a small "i" for how it works), the passage
   switcher, and About and the chat button. On a phone the switcher drops to its own
   scrolling row and About moves to the footer. The passage's credit and stats sit
   below the rule, at the top of the passage. */
header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 14px 8px;
  border-bottom: 2px solid var(--ink);
  min-width: 0;
}
header .title { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
header h1 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 400; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The "i" opens a note on how the page works, so the header doesn't have to say it every visit */
#info {
  flex: none;
  width: 19px;
  height: 19px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--grey);
  border-radius: 50%;
  background: none;
  color: var(--grey);
  font: italic 13px/1 var(--fell);
  cursor: pointer;
}
#info:hover, #info:focus-visible, #info[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
#howto {
  position: absolute;
  z-index: 10;
  left: 14px;
  top: 100%;
  margin-top: 6px;
  width: min(320px, calc(100vw - 28px));
  padding: 9px 13px 10px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 15px;
  line-height: 1.35;
}
#howto[hidden] { display: none; }
#howto p { margin: 0; font-style: italic; }
#howto a { display: inline-block; margin-top: 5px; font-size: 14px; color: var(--grey); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#howto a:hover, #howto a:focus-visible { color: var(--ink); }
/* The passage switcher: the plays, in small caps; the one on show is black and underlined.
   A single row that scrolls sideways when it is too long (the page centres the open one). */
#menu {
  order: 3;
  flex: 0 0 100%;
  display: flex;
  gap: 0 14px;
  min-height: 21px;
  margin: 0 -14px;
  padding: 0 14px 1px;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 14px;
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent);
}
#menu::-webkit-scrollbar { display: none; }
#menu a { color: var(--grey); text-decoration: none; white-space: nowrap; }
#menu a:hover, #menu a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#menu a.here { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* How much is performed, centred under the passage's credit */
.stats { margin: 0 0 12px; text-align: center; font-size: 13px; color: var(--grey); }
.stats b { color: var(--ink); font-weight: 400; }
/* About and the chat button share the right-hand corner; About is in the footer on a phone */
header .actions { display: flex; align-items: center; gap: 12px; }
header .about { display: none; font-size: 15px; color: var(--grey); text-decoration: none; }
header .about:hover, header .about:focus-visible, #passage .foot .about:hover, #passage .foot .about:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#toggle {
  white-space: nowrap;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  padding: 3px 10px 4px;
  font: 400 15px/1.2 var(--fell-sc);
  letter-spacing: 0.03em;
  cursor: pointer;
}
/* Connection trouble: a full-width line along the bottom of the header */
#notice { order: 4; flex: 0 0 100%; margin: 2px 0 0; text-align: center; font-size: 14px; line-height: 1.35; font-style: italic; }
#notice[hidden] { display: none; }
#toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
body.chat-open { grid-template-rows: auto minmax(0, 1fr) minmax(0, 42dvh); }
@media (max-width: 520px) { .stats .more { display: none; } }

/* Hovering a lit word: the latest message that said it, styled like a feed entry */
#tip {
  position: fixed;
  z-index: 10;
  max-width: min(340px, calc(100vw - 16px));
  padding: 8px 12px 9px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 16px;
  line-height: 1.35;
  pointer-events: none;
}
#tip .quote { font-style: italic; overflow-wrap: anywhere; }
#tip .quote::before { content: '“'; }
#tip .quote::after { content: '”'; }
#tip .quote u { font-style: normal; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#tip .by { display: block; font-size: 13px; color: var(--grey); }
#tip .by .user { color: var(--ink); }
#tip .by .ch { font-family: var(--fell-sc); letter-spacing: 0.02em; }
#tip .meta { display: block; margin-top: 3px; font-size: 12px; color: var(--grey); }
#tip.quiet { color: var(--grey); font-style: italic; }

/* the passage */
#passage { overflow-y: auto; padding: 12px 16px 24px; font-size: 17px; line-height: 1.5; }
/* The speech's credit, set like a title page: its name, then the play in small caps */
#passage .credit { margin: 0 0 4px; text-align: center; }
#passage .credit h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 400; font-style: italic; text-wrap: balance; }
#passage .credit .source { margin: 1px 0 0; font-size: 14px; color: var(--grey); }
/* The footer under the verse: "by shindigs", then their links as icons in the text colour */
#passage .foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--grey); }
#passage .foot .text { flex: 0 0 100%; margin: 0; text-align: center; font-size: 13px; }
#passage .foot .text a { color: var(--grey); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#passage .foot .text a:hover, #passage .foot .text a:focus-visible { color: var(--ink); }
#passage .foot .about { font-size: 15px; color: var(--grey); text-decoration: none; }
.socials { display: inline-flex; gap: 18px; }
.socials a { display: inline-flex; color: var(--grey); }
.socials a:hover, .socials a:focus-visible { color: var(--ink); }
.socials svg { width: 20px; height: 20px; }
.ln { display: block; }
.ln .n { display: none; color: var(--grey); font-size: 13px; }
.ln .t { display: block; padding-left: 1.2em; text-indent: -1.2em; color: var(--faint); white-space: pre-wrap; }
.w { color: var(--faint); transition: color 0.2s linear, background-color 1.2s ease-out; }
.w.on { color: var(--ink); cursor: pointer; }
/* Punctuation after a word inks with it, so a lit line reads as set type, not loose words */
.p { transition: color 0.2s linear; }
.p.on { color: var(--ink); }
.w.fresh { color: #000; background: var(--mark); transition: none; }
@media (hover: hover) { .w.on:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }

/* the live feed */
#feed { border-top: 1px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; min-height: 0; }
#feed[hidden] { display: none; }
#feed .label { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; padding: 6px 16px; border-bottom: 1px solid var(--hair); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
#list { list-style: none; margin: 0; padding: 4px 0 8px; overflow-y: auto; flex: 1; }
#list li { padding: 5px 16px; font-size: 16px; line-height: 1.35; cursor: pointer; }
#list li:active, #list li:hover { background: var(--hair); }
#list .quote { font-style: italic; }
#list .quote::before { content: '“'; }
#list .quote::after { content: '”'; }
#list .quote u { font-style: normal; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#list .by { display: block; font-size: 13px; color: var(--grey); }
#list .by .user { color: var(--ink); }
#list .by .ch { font-family: var(--fell-sc); letter-spacing: 0.02em; }
#list .waiting { color: var(--grey); font-style: italic; cursor: default; }

@media (min-width: 900px) {
  body.chat-open { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 400px; }
  /* The bar is one row: name left, switcher in the middle, buttons right. With the chat
     log and VOD panel open it keeps its phone shape (switcher on its own row) to fit. */
  header { grid-column: 1 / -1; }
  body:not(.panel-open) header { flex-wrap: nowrap; gap: 18px; padding: 9px 32px 8px; }
  body:not(.panel-open) header h1 { font-size: 22px; }
  body:not(.panel-open) header .title { flex: none; }
  body:not(.panel-open) header .about { display: inline; }
  body:not(.panel-open) #howto { left: 32px; }
  body:not(.panel-open) #menu { order: 0; flex: 1; justify-content: safe center; margin: 0; padding: 0; mask-image: none; }
  /* With the chat log and VOD panel open, the page moves left to make room for it, so
     the passage stays readable beside it. The live feed steps aside meanwhile: the
     panel is showing chat anyway, and three columns would squeeze the verse. */
  body { transition: padding-right 0.38s ease; }   /* in step with the ink's sweep (PUSH_MS in page.js) */
  body.panel-open { padding-right: var(--panel-w); grid-template-columns: minmax(0, 1fr); }
  body.panel-open #feed { display: none; }
  /* The verse is centred as a block, sized to its longest line, whether or not chat is
     open beside it. The credit and footer centre over it without setting its width. */
  #passage { display: grid; grid-template-columns: max-content; justify-content: center; align-content: start; padding: 24px 32px 48px; font-size: 20px; }
  /* Centred on the same axis as the title above the rule, so the two read as one column */
  #passage .credit { contain: inline-size; margin-bottom: 6px; }
  #passage .stats { contain: inline-size; margin-bottom: 22px; }
  #passage .credit h2 { font-size: 26px; }
  #passage .credit .source { font-size: 16px; }
  #passage .foot { contain: inline-size; margin-top: 48px; border-top: 0; }
  body:not(.panel-open) #passage .foot .about { display: none; }   /* it's in the header */

  /* The number gutter only when the passage has line numbers */
  #passage.numbered .ln { display: grid; grid-template-columns: 3em minmax(0, 1fr); }
  #passage.numbered .ln .n { display: block; }
  #feed { border-top: 0; border-left: 1px solid var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .w, .p { transition: none; }
  body { transition: none; }
}

/* Chat around a clicked word, styled like Twitch's dark chat. It comes in like ink over the
   right side of the page (see page.js), wide enough that the VOD
   above the chat is watchable. */
#chatbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(100vw, var(--panel-w));
  display: flex;
  flex-direction: column;
  background: #18181b;
  color: #efeff1;
  border-left: 1px solid #2f2f35;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  font: 13px/20px Inter, 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: normal;
  -webkit-font-smoothing: auto;
  visibility: hidden;
}
#chatbox.open { visibility: visible; }
/* The drop of ink on the clicked word that the panel spreads from */
.drop { position: fixed; z-index: 21; pointer-events: none; background: #18181b; mix-blend-mode: multiply; border-radius: 47% 53% 44% 56% / 56% 44% 53% 47%; }
#chatbox .cb-player { flex: none; }
#chatbox .cb-frame { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #000; color: #adadb8; }
#chatbox .cb-frame iframe { width: 100%; height: 100%; border: 0; }
#chatbox .cb-note { padding: 4px 16px; border-bottom: 1px solid #2f2f35; color: #adadb8; font-size: 12px; }
#chatbox .cb-note a { color: #bf94ff; text-decoration: none; }
#chatbox .cb-note a:hover { text-decoration: underline; }
#chatbox .cb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  flex: none;
  padding: 0 16px 0 10px;
  border-bottom: 1px solid #2f2f35;
}
#chatbox .cb-head a { font-weight: 600; color: #efeff1; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatbox .cb-head a:hover { color: #bf94ff; }
#chatbox .cb-meta { color: #adadb8; flex: 1; text-align: right; white-space: nowrap; }
/* Back sits top left, where phones put it, and reads as returning to the passage */
#cb-close {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: 40px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #efeff1;
  font: 600 14px/1 Inter, 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
}
#cb-close svg { width: 22px; height: 22px; }
#cb-close:hover { background: rgba(83, 83, 95, 0.48); }
#cb-close:focus-visible { outline: 3px solid #bf94ff; outline-offset: 2px; }
#chatbox ol {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #53535f transparent;
}
#chatbox li { padding: 5px 20px; overflow-wrap: anywhere; }
#chatbox li.hit { background: rgba(145, 71, 255, 0.16); box-shadow: inset 4px 0 #9147ff; }
#chatbox li.pending { color: #adadb8; }
#chatbox .user { font-weight: 700; }
#chatbox mark { background: none; color: inherit; font-weight: 700; text-decoration: underline 2px #bf94ff; text-underline-offset: 3px; }
#chatbox li.hidden { color: #adadb8; font-style: italic; }

/* On a phone the chat panel takes the whole screen */
@media (max-width: 700px) {
  #chatbox { width: 100vw; border-left: 0; }
}