/* The Study: the talk box, scenes and captions (study-talk.js).

   The talk box comes up along the bottom when you tap a member: his face
   and name, what he says, and what you can say back. A scene (the founding
   story, the ballot, a toast) plays in the same box, a line at a time, and
   a caption is a member's line from off screen. All three are card stock
   with an ink edge and the house's offset shadow; the box has a double
   gilt rule inside its edge, and the names are in the club's serif, in
   small capitals. Targets are 44 px at least.

   The colours and the face come from the variables study.css defines, with
   these fallbacks: --club-ink, --club-card, --club-brass, --club-serif. */

.talk,
.caption {
  --tk-ink: var(--club-ink, #231f20);
  --tk-card: var(--club-card, #f6efdc);
  --tk-brass: var(--club-brass, #b8923a);
  --tk-serif: var(--club-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif);
  --tk-name: #6b1d1d;
  --tk-soft: #5e5245;
}

/* ---------- The talk box ---------- */
.talk {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(620px, calc(100% - 24px));
  max-height: min(64%, 560px);
  padding: 13px 16px 14px;
  translate: -50% 0;
  color: var(--tk-ink);
  background: var(--tk-card);
  border: 3px solid var(--tk-ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--tk-ink);
  font-family: var(--tk-serif);
  animation: talk-in 0.25s var(--ease-out, ease-out);
}
.talk[hidden] {
  display: none;
}
/* the double gilt rule inside the edge */
.talk::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px double var(--tk-brass);
  border-radius: 4px;
  pointer-events: none;
}
@keyframes talk-in {
  from { opacity: 0; translate: -50% 16px; }
  to { opacity: 1; translate: -50% 0; }
}
.talk__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-right: 40px;
}
.talk__head[hidden] {
  display: none;
}
/* his face: study-talk.js sets the picture, its size and where it sits */
.talk__face {
  flex: none;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background-color: #eadfc2;
  background-repeat: no-repeat;
  border: 3px solid var(--tk-ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tk-brass);
}
.talk__face[hidden] {
  display: none;
}
.talk__name {
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--tk-name);
}
/* the way out of any conversation (Skip, in a scene), in the top corner */
.talk__x {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--tk-ink);
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.talk__x[hidden] {
  display: none;
}
.talk__x::before {
  content: "\00d7";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  font-family: var(--font-body, Archivo, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: #fffaf0;
  border: 2px solid var(--tk-ink);
  border-radius: 50%;
}
.talk__x:focus-visible::before {
  background: var(--tk-brass);
}
.talk__x:focus-visible {
  outline: none;
}
/* a line with no speaker (what you see, in a scene) clears the corner */
.talk.is-narration .talk__line {
  padding-right: 40px;
}
.talk__line {
  position: relative;
  margin: 0;
  min-height: 1.4em;
  overflow-y: auto;
  font-size: 1.16rem;
  line-height: 1.38;
}
.talk__line.is-new {
  animation: talk-line-in 0.2s ease-out;
}
@keyframes talk-line-in {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
/* what you see, in a scene: no one's saying it */
.talk__line--narration {
  font-style: italic;
  color: var(--tk-soft);
}
.talk__opts {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
}
.talk__opts:empty {
  display: none;
}
@media (min-width: 680px) {
  .talk__opts {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  }
}
.talk__opt {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.45em 0.8em 0.45em 2.2em;
  font-family: var(--font-body, Archivo, sans-serif);
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  color: var(--tk-ink);
  background: #fffaf0;
  border: 2px solid var(--tk-ink);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}
.talk__opt::before {
  content: attr(data-n);
  position: absolute;
  left: 0.75em;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--tk-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: #8a6a24;
}
.talk__opt:focus-visible {
  background: #f3e2b3;
  outline: none;
  box-shadow: inset 0 0 0 2px var(--tk-brass);
}
/* something you do rather than say */
.talk__opt--action {
  font-style: italic;
}
/* talked about on another visit */
.talk__opt--heard {
  color: #6a5f52;
  background: #efe6d2;
  border-color: #8f8576;
}
.talk__opt--more,
.talk__opt--done {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  min-width: 96px;
  padding: 0.3em 1.2em;
  text-align: center;
  font-family: var(--tk-serif);
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  background: var(--tk-brass);
}
.talk__opt--more:focus-visible,
.talk__opt--done:focus-visible {
  background: #e3c06a;
}
/* (hover only where there's a pointer that hovers: on a phone a tapped
   button would keep it) */
@media (hover: hover) {
  .talk__x:hover::before {
    background: var(--tk-brass);
  }
  .talk__opt:hover {
    background: #f3e2b3;
    box-shadow: inset 0 0 0 2px var(--tk-brass);
  }
  .talk__opt--more:hover,
  .talk__opt--done:hover {
    background: #e3c06a;
  }
}
/* in a scene: the whole box (and the room behind) is the button that goes on */
.talk--scene {
  cursor: pointer;
}
.talk__next {
  position: relative;
  align-self: flex-end;
  margin: -2px 2px 0 0;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--tk-soft);
}
.talk__next[hidden] {
  display: none;
}
.talk-catch {
  position: absolute;
  inset: 0;
  z-index: 29;
  background: rgba(12, 6, 2, 0.12);
  cursor: pointer;
}
.talk-catch[hidden] {
  display: none;
}

/* ---------- A caption: a member's line from off screen ---------- */
.caption {
  position: absolute;
  left: 50%;
  bottom: var(--caption-bottom, max(76px, calc(env(safe-area-inset-bottom) + 68px)));
  z-index: 28;
  box-sizing: border-box;
  width: max-content;
  max-width: min(560px, calc(100% - 24px));
  margin: 0;
  padding: 6px 14px 8px;
  translate: -50% 0;
  color: var(--tk-ink);
  background: var(--tk-card);
  border: 3px solid var(--tk-ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--tk-ink);
  font-family: var(--tk-serif);
  pointer-events: none;
}
.caption[hidden] {
  display: none;
}
.caption.is-in {
  animation: caption-in 0.22s ease-out;
}
@keyframes caption-in {
  from { opacity: 0; translate: -50% 8px; }
  to { opacity: 1; translate: -50% 0; }
}
.caption__who {
  display: block;
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.07em;
  color: var(--tk-name);
}
.caption__who[hidden] {
  display: none;
}
.caption__line {
  display: block;
  font-size: 1.04rem;
  line-height: 1.3;
}

/* A short screen (a small phone, or one on its side): the same box, closer
   set, so more of the room shows above it */
@media (max-height: 700px) {
  .talk {
    gap: 6px;
    padding: 10px 14px 11px;
  }
  .talk__head {
    min-height: 40px;
  }
  .talk__face {
    width: 42px;
    height: 42px;
  }
  .talk__name {
    font-size: 1.18rem;
  }
  .talk__x {
    top: 5px;
    right: 6px;
  }
  .talk__line {
    font-size: 1.06rem;
    line-height: 1.32;
  }
  .talk__opts {
    gap: 5px;
  }
  .talk__opt {
    padding-top: 0.35em;
    padding-bottom: 0.35em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talk,
  .talk__line.is-new,
  .caption.is-in {
    animation: none;
  }
}