/* Share Together. Premise: the living room after the lights go down; the screen is the only lamp.
   Device: the spill. The show's own colour, measured from the picture, falls on the floor where the seats are.
   Tokens and rules: DESIGN.md */

:root {
  --ink-0: #0e0d10;      /* the room */
  --ink-1: #151418;      /* panels */
  --ink-2: #1c1b20;      /* raised controls */
  --ink-3: #27262c;      /* pressed / hover */
  --line: rgb(236 231 222 / 0.09);
  --line-2: rgb(236 231 222 / 0.17);
  --bone: #ece7de;
  --bone-2: #a8a399;
  --bone-3: #6f6b64;
  --standby: #7ef0b4;    /* accent: live mic, speaking ring, Go live, focus */
  --standby-ink: #08241a;
  --brick: #f0907f;      /* leaving, stopping, blocked */
  --spill: 70 66 78;     /* rgb triplet, written by the page from the live picture */

  --r: 6px;
  --f-display: "Big Shoulders Display", "Albert Sans", sans-serif;
  --f-ui: "Albert Sans", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink-0);
  color: var(--bone);
  font: 400 15px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--standby); outline-offset: 2px; }
.i { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }

/* ---------- shared controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ink-2);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--ink-3); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-go { background: var(--standby); color: var(--standby-ink); border-color: transparent; font-weight: 600; }
.btn-go:hover { background: #9af5c6; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--bone-2); }
.btn-quiet:hover { background: var(--ink-2); color: var(--bone); }
.btn-danger { background: transparent; border-color: rgb(240 144 127 / .4); color: var(--brick); }
.btn-danger:hover { background: rgb(240 144 127 / .1); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r);
  border: 0; background: transparent; color: var(--bone-2);
}
.icon-btn:hover { background: var(--ink-2); color: var(--bone); }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--bone-2); }
.field input, .field select, .sound-opt select {
  height: 46px; padding: 0 14px;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r);
}
.field input::placeholder, .chat-form input::placeholder { color: var(--bone-3); }
.field input:focus, .field select:focus { outline: none; border-color: var(--standby); }
.field-sm select { height: 38px; font-size: 14px; }

.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bone-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--standby); margin: 0; }

.form-note { min-height: 20px; margin: 0; font-size: 14px; color: var(--brick); }

/* ---------- lobby ---------- */

.lobby {
  min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 400px);
  align-items: end; gap: 64px;
  padding: 56px clamp(20px, 6vw, 96px) clamp(40px, 9vh, 96px);
  /* the room before anything plays: a faint lamp below the fold */
  background: radial-gradient(90% 55% at 30% 115%, rgb(var(--spill) / .55), transparent 70%), var(--ink-0);
}
.wordmark {
  margin: 0 0 auto; font: 700 20px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase;
  color: var(--bone-2);
}
.lobby-copy { display: flex; flex-direction: column; min-height: 100%; }
.lobby-copy .wordmark { margin-bottom: 18vh; }
.lobby-title {
  margin: 0; font: 800 clamp(64px, 11vw, 168px)/.84 var(--f-display);
  letter-spacing: -.01em; text-transform: uppercase;
}
.lobby-sub { margin: 28px 0 0; max-width: 34ch; font-size: 18px; color: var(--bone-2); }
.lobby-form { display: grid; gap: 18px; }
.lobby-form .btn-go { min-height: 52px; font-size: 16px; }

.device-check { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.can { margin: 0; font-size: 14px; color: var(--bone-2); }
.mic-test { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.mic-test .btn, #installBtn { justify-self: start; padding: 0 10px 0 6px; }

/* ---------- room ---------- */

.room {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr);
}
.topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--line);
}
.wordmark-sm { margin: 0; font-size: 17px; }
.room-code {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: transparent;
  font: 500 13px var(--f-mono); color: var(--bone);
}
.room-code:hover { background: var(--ink-2); }
.room-code .i { width: 15px; height: 15px; color: var(--bone-2); }
.conn { margin: 0 0 0 auto; font-size: 13px; color: var(--brick); }
.only-narrow { display: none; }

.theatre { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; container-type: inline-size; }

/* the screen: a hard black rectangle, the only thing that gives off light */
.stage {
  position: relative; min-height: 0;
  background: #000;
  overflow: hidden;
}
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.stage.has-video video { opacity: 1; }
.stage-empty {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start;
  padding: 0 clamp(24px, 7%, 96px); gap: 14px;
}
.stage.has-video .stage-empty { display: none; }
.stage-line { margin: 0; font: 700 clamp(36px, 5.4vw, 76px)/.92 var(--f-display); text-transform: uppercase; color: var(--bone); max-width: 14ch; }
.stage.is-empty .stage-line { color: var(--bone-3); }
.stage-sub { margin: 0 0 10px; max-width: 46ch; color: var(--bone-2); }
.stage-sub:empty { display: none; }
.stage-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  pointer-events: none;
}
.stage-who { margin: 0; font-size: 13px; color: var(--bone-2); text-shadow: 0 1px 2px #000; }
.sharer-switch { display: flex; gap: 4px; pointer-events: auto; }
.sharer-switch button {
  height: 28px; padding: 0 10px; border-radius: var(--r); font-size: 13px;
  border: 1px solid var(--line-2); background: rgb(14 13 16 / .7); color: var(--bone-2);
}
.sharer-switch button.is-on { background: var(--bone); color: var(--ink-0); border-color: transparent; }
.stage-full { position: absolute; right: 10px; bottom: 10px; background: rgb(14 13 16 / .55); opacity: 0; transition: opacity .2s; }
.stage:hover .stage-full, .stage-full:focus-visible { opacity: 1; }
.hear-btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--r); background: var(--standby); color: var(--standby-ink); font-weight: 600;
}

/* reactions rise off the bottom of the picture */
.reaction-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float {
  position: absolute; left: var(--x); bottom: 8px;
  display: grid; justify-items: center; gap: 2px;
  animation: rise 2.6s cubic-bezier(.2, .7, .3, 1) forwards;
}
.float b { font-size: 34px; line-height: 1; font-weight: 400; }
.float small { font-size: 11px; color: var(--bone); text-shadow: 0 1px 2px #000; }
@keyframes rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { transform: translate(0, -24px) scale(1); opacity: 1; }
  100% { transform: translate(var(--drift), -260px) scale(1); opacity: 0; }
}

.ticker { position: absolute; left: 16px; bottom: 56px; display: grid; gap: 6px; max-width: min(520px, 70%); pointer-events: none; }
.ticker p {
  margin: 0; padding: 6px 10px; border-radius: var(--r);
  background: rgb(14 13 16 / .72); font-size: 15px;
  animation: tick-in .25s ease-out, tick-out .6s 6.4s forwards;
}
@keyframes tick-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tick-out { to { opacity: 0; } }
.stage:fullscreen { background: #000; }

/* the floor: where the screen's light lands, and where everyone sits */
.floor {
  position: relative;
  border-top: 1px solid rgb(var(--spill) / .55);
  background:
    radial-gradient(70% 160% at 50% 0%, rgb(var(--spill) / .34), transparent 72%),
    var(--ink-0);
  transition: border-color 1s linear;
}
.row {
  list-style: none; margin: 0; padding: 18px 24px 12px;
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
}
.seat { display: grid; justify-items: center; gap: 6px; width: 72px; cursor: pointer; }
.seat.is-me { cursor: default; }
.seat-face {
  position: relative;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink-2);
  /* the top of each head catches the screen's light */
  box-shadow: inset 0 1px 0 rgb(var(--spill) / .9), inset 0 10px 18px -12px rgb(var(--spill) / .8);
  font: 700 20px/1 var(--f-display); letter-spacing: .02em;
  transition: box-shadow .12s;
}
.seat.is-speaking .seat-face {
  box-shadow: inset 0 1px 0 rgb(var(--spill) / .9), 0 0 0 2px var(--ink-0), 0 0 0 4px var(--standby);
}
.seat.is-linking .seat-face { opacity: .45; }
.seat.is-muted .seat-face { opacity: .55; }
.seat-name { max-width: 100%; font-size: 12px; color: var(--bone-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-marks { display: flex; gap: 4px; height: 14px; color: var(--bone-3); }
.seat-marks .i { width: 14px; height: 14px; }

/* the dock */
.dock {
  position: relative;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 24px 16px;
}
.dock-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--ink-1);
  font-weight: 500;
}
.dock-btn:hover { background: var(--ink-2); }
.dock-btn.is-live { background: var(--standby); color: var(--standby-ink); border-color: transparent; }
#micBtn:not(.is-live) { color: var(--bone-2); }
.dock-leave { color: var(--brick); }
.dock-end { display: flex; gap: 8px; margin-left: auto; }
.reacts { display: flex; gap: 2px; margin-left: 8px; }
.reacts button {
  width: 40px; height: 40px; border: 0; border-radius: var(--r); background: transparent;
  font-size: 21px; line-height: 1; transition: transform .1s, background .15s;
}
.reacts button:hover { background: var(--ink-2); }
.reacts button:active { transform: scale(.88); }

.pop {
  position: absolute; right: 24px; bottom: calc(100% + 8px); z-index: 5;
  width: 300px; display: grid; gap: 16px; padding: 18px;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 18px 40px -16px rgb(0 0 0 / .7);
}
.slider { display: grid; gap: 6px; font-size: 13px; color: var(--bone-2); }
.slider input { accent-color: var(--bone); width: 100%; }

/* chat */
.chat {
  grid-row: 2; grid-column: 2;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--ink-1);
}
.chat-log { list-style: none; margin: 0; padding: 18px 18px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.chat-log > :first-child { margin-top: auto; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: 13px; }
.msg-head b { font-weight: 600; }
.msg-head time { color: var(--bone-3); font-size: 12px; }
.msg.is-mine .msg-head b { color: var(--bone-2); }
.msg-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sys { font-size: 13px; color: var(--bone-3); }
.chat-form { display: flex; gap: 6px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  background: var(--ink-0); border: 1px solid var(--line-2); border-radius: var(--r);
}
.chat-form input:focus { outline: none; border-color: var(--standby); }

/* ---------- share sheet ---------- */

.sheet {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ink-1); color: var(--bone);
}
.sheet::backdrop { background: rgb(6 6 8 / .72); }
.sheet-body { display: grid; gap: 26px; padding: 26px; }
.sheet-title { margin: 0; font: 800 38px/.9 var(--f-display); text-transform: uppercase; }
.sheet-part { display: grid; gap: 12px; }
.sheet-part h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--bone-2); }

.pick-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: center; }
#pickPreview {
  width: 168px; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r);
  background: #000 repeating-linear-gradient(135deg, transparent 0 7px, rgb(236 231 222 / .05) 7px 8px);
}
#pickPreview.is-on { background: #000; }
.pick-info { display: grid; gap: 10px; }
.pick-label { margin: 0; font-weight: 500; }
.pick-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg label { display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; padding: 10px 14px; font-weight: 500; }
.seg small { font-weight: 400; font-size: 13px; color: var(--bone-3); }
.seg label + label span { border-left: 1px solid var(--line-2); }
.seg input:checked + span { background: var(--bone); color: var(--ink-0); }
.seg input:checked + span small { color: #4a4740; }
.seg input:focus-visible + span { outline: 2px solid var(--standby); outline-offset: -2px; }

.sound-list { display: grid; border-top: 1px solid var(--line); }
.sound-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.sound-opt input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--standby); }
.sound-opt > span { display: grid; gap: 2px; }
.sound-opt b { font-weight: 500; }
.sound-opt small { font-size: 13px; color: var(--bone-3); }
.sound-opt select { height: 38px; max-width: 210px; font-size: 14px; }
.sound-opt.is-off { cursor: default; }
.sound-opt.is-off b { color: var(--bone-3); }

/* live level of the chosen sound */
.level { height: 4px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.level i { display: block; height: 100%; background: var(--standby); transform-origin: left; transform: scaleX(0); transition: transform .06s linear; }
.hint { margin: 0; font-size: 13px; color: var(--bone-3); }

.sheet-actions {
  display: flex; gap: 8px; align-items: center;
  position: sticky; bottom: -26px; margin: -10px 0 -26px; padding: 14px 0 26px;
  background: var(--ink-1); border-top: 1px solid var(--line);
}
.sheet-actions .spacer { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 50;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r);
  background: var(--bone); color: var(--ink-0); font-weight: 500;
}

/* the dock folds its words away before it ever wraps */
@container (max-width: 780px) {
  .dock-end .dock-btn span { display: none; }
  .dock-end .dock-btn { width: 44px; padding: 0; justify-content: center; }
  .reacts { margin-left: 0; }
}
@container (max-width: 600px) {
  .reacts { order: 3; width: 100%; justify-content: space-between; }
}

/* ---------- narrow screens: phone and tablet portrait ---------- */

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; gap: 40px; align-items: start; padding: 28px 16px 40px; }
  .lobby-copy { min-height: 0; }
  .lobby-copy .wordmark { margin-bottom: 10vh; }
  .lobby-sub { font-size: 16px; }

  .room { height: auto; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .topbar { position: sticky; top: 0; z-index: 4; background: var(--ink-0); padding: 0 8px 0 16px; gap: 10px; }
  .wordmark-sm { display: none; }
  .only-narrow { display: inline-grid; }
  .theatre { grid-template-rows: auto auto auto; }
  .stage { aspect-ratio: 16 / 9; }
  .stage-full { opacity: 1; }
  .row { padding: 14px 16px 8px; gap: 14px; }
  .seat { width: 60px; }
  .seat-face { width: 46px; height: 46px; font-size: 18px; }
  .dock { padding: 8px 16px 14px; }
  .dock-btn { padding: 0 12px; }
  .dock-end { margin-left: auto; }
  .pop { right: 16px; left: 16px; width: auto; }
  .chat { grid-row: auto; grid-column: 1; height: 62dvh; border-left: 0; border-top: 1px solid var(--line); }
  .stage-line { font-size: 34px; }
  .stage-sub { font-size: 14px; }
}
@media (max-width: 520px) {
  .dock-btn span { display: none; }
  .dock-btn { width: 44px; padding: 0; justify-content: center; }
  .pick-row { grid-template-columns: 1fr; }
  #pickPreview { width: 100%; }
  .sound-opt { grid-template-columns: auto minmax(0, 1fr); }
  .sound-opt select, .sound-opt .btn { grid-column: 2; justify-self: start; }
  .sheet-body { padding: 20px 16px; }
  .sheet-actions { bottom: -20px; margin-bottom: -20px; padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation-duration: 1.2s; }
  * { transition: none !important; }
}