/* ============================================================
   THE ROOM — the close on the home page.

   It sits under LOCK IN, where four buttons used to. A card of dark
   glass on the finale's red glow: a transcript that scrolls itself, a
   tray of answers under it, and one line of input for the people who
   would rather type. The card is the only thing left on the page below
   the film, so it gets the width and the weight that four buttons in a
   row were never going to carry.

   The card scrolls its own log rather than growing. A close that pushes
   the page down every time somebody answers a question is a close that
   moves the send button away from the thumb reaching for it.
   ============================================================ */

.lockroom { margin: clamp(2.2rem, 6vh, 3.6rem) auto 0; width: min(46rem, 100%);
  text-align: left; }

.lockroom__card { position: relative; display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden; color: var(--cream);
  background: linear-gradient(180deg, rgba(24,18,16,.94), rgba(9,7,6,.97));
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.14), inset 0 1px 0 rgba(255,255,255,.1),
    0 44px 100px -34px rgba(0,0,0,.95); }

/* ---- the head: who is on the other side of this ---- */
.lockroom__top { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem 1.15rem; background: rgba(244,239,230,.045);
  box-shadow: inset 0 -1px 0 rgba(244,239,230,.1); }
.lockroom__who { display: grid; gap: .12rem; min-width: 0; }
.lockroom__who b { font: 800 .72rem var(--body); letter-spacing: .24em;
  text-transform: uppercase; color: var(--cream); }
.lockroom__who small { font: 500 .78rem var(--body); color: var(--cream-dim); font-size: .72rem; }
.lockroom__who b::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: .6em; border-radius: 50%; background: var(--ruby-hot);
  box-shadow: 0 0 10px rgba(229,56,59,.9); vertical-align: 1px; }
.lockroom__reset { flex: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid rgba(244,239,230,.22); background: transparent; color: var(--cream-dim);
  border-radius: 99px; padding: .42em .9em; font: 700 .62rem var(--body);
  letter-spacing: .16em; text-transform: uppercase; transition: color .25s, border-color .25s; }
.lockroom__reset:hover { color: var(--cream); border-color: rgba(244,239,230,.45); }

/* ---- the rail: how far in you are, without a percentage ---- */
.lockroom__rail { display: flex; gap: .3rem; margin: 0; padding: .7rem 1.15rem .6rem;
  list-style: none; box-shadow: inset 0 -1px 0 rgba(244,239,230,.09); }
.lockroom__rail li { flex: 1; display: grid; gap: .35rem; min-width: 0; }
.lockroom__rail li::before { content: ""; height: 3px; border-radius: 99px;
  background: rgba(244,239,230,.13); transition: background .35s ease; }
.lockroom__rail li span { font: 800 .54rem var(--body); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(244,239,230,.34); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; transition: color .35s ease; font-size: .48rem; }
.lockroom__rail li.is-done::before { background: rgba(229,56,59,.55); }
.lockroom__rail li.is-here::before { background: var(--ruby-hot);
  box-shadow: 0 0 14px rgba(229,56,59,.75); }
.lockroom__rail li.is-here span { color: var(--cream); }

/* ---- the transcript ---- */
/* the transcript scrolls itself and the card does not grow past the cap, so
   the send button never walks away from the thumb reaching for it. The top
   few pixels fade, because a bubble sliding under the rail with a hard edge
   reads as a layout bug rather than as scrolling. */
.lockroom__log { padding: 1.05rem 1.15rem .3rem; display: flex; flex-direction: column;
  gap: .6rem; min-height: 7rem; max-height: 19rem; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px); }
.lockroom__m { max-width: 94%; padding: .78rem .95rem; border-radius: 16px;
  font: 500 1rem/1.45 var(--body); animation: lockroomIn .34s cubic-bezier(.2,.7,.2,1) both; font-size: .95rem; }
.lockroom__m p { margin: 0; }
.lockroom__m p + p { margin-top: .5rem; }
.lockroom__m--them { align-self: flex-start; border-bottom-left-radius: 6px;
  background: rgba(244,239,230,.07); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.09); }
.lockroom__m--me { align-self: flex-end; border-bottom-right-radius: 6px;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(229,56,59,.8); }
.lockroom__m--skip { background: rgba(244,239,230,.08); color: var(--cream-dim);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.09); }
.lockroom__note { display: block; margin-top: .4rem; font: 500 .84rem/1.4 var(--body);
  color: var(--cream-dim); }
@keyframes lockroomIn { from { opacity: 0; transform: translateY(8px); }
                        to { opacity: 1; transform: none; } }

/* the three dots: the beat before a question, so it reads as answered
   rather than rendered */
.lockroom__typing { display: flex; gap: .3rem; padding: .95rem; }
.lockroom__typing i { width: 7px; height: 7px; border-radius: 50%;
  background: rgba(244,239,230,.55); animation: lockroomDot 1.1s ease-in-out infinite; }
.lockroom__typing i:nth-child(2) { animation-delay: .16s; }
.lockroom__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes lockroomDot { 0%, 60%, 100% { opacity: .3; transform: none; }
                         30% { opacity: 1; transform: translateY(-3px); } }

/* ---- the brief, read back before it goes ---- */
.lockroom__brief { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lockroom__brief li { display: grid; gap: .1rem; align-items: baseline;
  padding-top: .4rem; box-shadow: inset 0 1px 0 rgba(244,239,230,.09); }
.lockroom__brief li:first-child { box-shadow: none; padding-top: 0; }
.lockroom__brief span { flex: none; width: auto; font: 800 .6rem var(--body);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,230,.5); }
.lockroom__brief b { font-weight: 700; color: var(--cream); }

/* ---- the answers on screen ---- */
.lockroom__tray { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.15rem 0; }
.lockroom__tray:empty { padding: 0; }
.lockroom__chip { -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid rgba(244,239,230,.24); background: rgba(244,239,230,.05);
  color: var(--cream); border-radius: 99px; padding: .58em .9em;
  font: 600 .92rem var(--body); text-align: left;
  transition: border-color .22s, background .22s, transform .22s;
  font-size: .86rem; }
.lockroom__chip:hover { border-color: var(--ruby-hot); background: rgba(229,56,59,.2); }
.lockroom__chip:active { transform: scale(.97); }
.lockroom__chip--skip { border-style: dashed; color: var(--cream-dim); font-weight: 500; }
.lockroom__send { -webkit-appearance: none; appearance: none; cursor: pointer; border: 0;
  border-radius: 99px; padding: .85em 1.9em; color: #fff;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  font: 800 .78rem var(--body); letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 12px 30px -12px rgba(229,56,59,.95); transition: transform .22s, filter .22s; }
.lockroom__send:hover { filter: brightness(1.1); }
.lockroom__send:active { transform: scale(.97); }
.lockroom__send[disabled] { opacity: .6; cursor: default; }

/* ---- one line for the people who would rather type ---- */
.lockroom__bar { display: flex; gap: .55rem; padding: .85rem 1.15rem 1.05rem; }
.lockroom__bar[hidden] { display: none; }
.lockroom__in { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(244,239,230,.2); background: rgba(244,239,230,.05);
  color: var(--cream); border-radius: 99px; padding: .75em 1.1em; min-height: 44px;
  font: 500 1rem var(--body); transition: border-color .22s; }
.lockroom__in::placeholder { color: rgba(244,239,230,.42); }
.lockroom__in:focus { outline: none; border-color: var(--ruby-hot); }
.lockroom__bar.is-required .lockroom__in { border-color: rgba(229,56,59,.5); }
.lockroom__go { flex: none; width: 46px; min-height: 46px; -webkit-appearance: none; appearance: none;
  cursor: pointer; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 10px 24px -12px rgba(229,56,59,.95); }
.lockroom__go svg { width: 20px; height: 20px; fill: #fff; }

/* ---- the receipt ---- */
.lockroom__door { display: inline-flex; align-items: center; gap: .5em; margin-top: .85rem;
  color: var(--ruby-hot); font: 800 .72rem var(--body); letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid rgba(229,56,59,.45); padding-bottom: .2em;
  transition: color .25s, border-color .25s; }
.lockroom__door:hover { color: var(--cream); border-color: var(--cream); }
.lockroom__mail { color: var(--ruby-hot); font-weight: 700; }
/* sent: the tray is gone and the card settles, so the receipt is the
   last thing with any weight on the page */
.lockroom__card.is-done { box-shadow: inset 0 0 0 1px rgba(229,56,59,.4),
  inset 0 1px 0 rgba(255,255,255,.1), 0 44px 100px -34px rgba(0,0,0,.95),
  0 0 60px -18px rgba(229,56,59,.5); }

@media (min-width: 560.02px) {
  .lockroom__who small { font-size: .78rem; }
  .lockroom__rail li span { font-size: .54rem; letter-spacing: .18em; }
  .lockroom__log { max-height: 22rem; min-height: 8rem; }
  .lockroom__m { max-width: 88%; font-size: 1rem; }
  .lockroom__brief li { display: flex; gap: .8rem; }
  .lockroom__brief span { width: 7.4rem; }
  .lockroom__chip { font-size: .92rem; padding: .62em 1.05em; }
}

@media (prefers-reduced-motion: reduce) {
  .lockroom__m, .lockroom__typing i { animation: none; }
  .lockroom__chip:active, .lockroom__send:active { transform: none; }
}