/* Links to the browser version of Creatures (/play/). */
.play {
  position: relative; display: block; overflow: hidden; box-sizing: border-box;
  border: 1px solid rgba(236, 240, 222, 0.25); border-radius: 6px;
  background: #3b4430 url(/media/img/play-forest.jpg) no-repeat center / cover;
  text-decoration: none; color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.play::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 18, 10, 0.78) 0%, rgba(14, 18, 10, 0.45) 55%, rgba(14, 18, 10, 0.1) 100%);
  transition: opacity 0.25s ease;
}
.play span { position: relative; display: block; }
.play__title { font-family: Georgia, Times, serif; letter-spacing: -0.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.play__sub { color: #c5b683; margin-top: 4px; }
.play:hover, .play:focus-visible { border-color: #fd005b; box-shadow: 0 4px 22px rgba(253, 0, 91, 0.25); outline: none; transform: translateY(-1px); }
.play:hover::before, .play:focus-visible::before { opacity: 0.8; }
.play:hover .play__sub, .play:focus-visible .play__sub { color: #b4ff00; }

/* Home page: next to the welcome text, as wide as the sidebar below it. */
#homepage #sectionhead { position: relative; }
.play--big { position: absolute; right: 10px; top: 26px; width: 240px; height: 132px; padding: 32px 18px; }
.play--big .play__title { font-size: 26px; }
.play--big .play__sub { font-size: 12px; }

/* Sidebar on the other pages. */
.play--small { float: left; width: 240px; height: 96px; margin: 10px 0; padding: 22px 16px; }
.play--small .play__title { font-size: 21px; }
.play--small .play__sub { font-size: 11px; }