:root {
  --bg: #0b0b0a;
  --fg: #e7e4db;
  --dim: #85827a;
  --accent: #f0b54a;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font:
    15px/1.6 ui-monospace,
    Menlo,
    Consolas,
    monospace;
}

main {
  width: 64ch;
  margin: 10vh auto;
}

h1 {
  font: inherit;
  color: var(--dim);
}

pre {
  font: inherit;
  line-height: 1.3;
  overflow-x: auto;
}

/* --decay runs 0 -> 1 (set per room in room.jsx). The drawing fades toward the
   background and its colors split apart, but the filenames keep their accent
   color, so the objects outlast the room around them. */
.art {
  color: color-mix(in oklab, var(--fg), var(--bg) calc(var(--decay) * 60%));
  text-shadow:
    calc(var(--decay) * 2px) 0 rgb(255 70 100 / calc(var(--decay) * 0.7)),
    calc(var(--decay) * -2px) 0 rgb(70 200 255 / calc(var(--decay) * 0.7));
}

.art.unstable {
  animation: flicker 5s steps(1) infinite;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41% {
    opacity: 0.55;
  }
  43% {
    opacity: 1;
  }
  77% {
    opacity: 0.8;
    transform: translateX(1px);
  }
  78% {
    transform: none;
  }
}

.meter {
  color: var(--dim);
  font-size: 13px;
}

.ghost {
  visibility: hidden;
}

/* Objects in the room, and [go further]. */
.obj {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.obj:hover,
.obj:focus-visible,
.obj.selected {
  background: var(--accent);
  color: var(--bg);
  outline: 1px solid var(--fg);
}

/* While a room is being written: the dots count up . .. ... and start over. */
.loading::after {
  content: "...";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: dots 1.2s steps(4) infinite;
}

@keyframes dots {
  to {
    width: 4ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art.unstable {
    animation: none;
  }

  .loading::after {
    width: auto;
    animation: none;
  }
}

.opened .status {
  margin-bottom: 0.5rem;
}

.status::before {
  content: "> ";
  color: var(--dim);
}

footer {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  color: var(--dim);
}

a {
  color: inherit;
}

input {
  width: 40ch;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dim);
  outline: none;
}

.echo {
  color: var(--dim);
}

input[type="number"] {
  width: 6ch;
}

/* The check-in between rooms: a camera window over a dimmed room. */
.backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 0.75);
}

.checkin {
  width: min(44ch, 100%);
  padding: 0 1rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--dim);
}

.titlebar {
  display: flex;
  justify-content: space-between;
  margin: 0 -1rem 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--dim);
  color: var(--dim);
}

.rec {
  color: #e5484d;
}

/* Mirrored like a selfie, drained of color, a little too sharp. */
.checkin video,
.nosignal {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
}

.checkin video {
  transform: scaleX(-1);
  filter: grayscale(1) contrast(1.4) brightness(0.9);
}

.nosignal {
  display: grid;
  place-items: center;
  color: var(--dim);
}