/* Sky Hop. Builds on site.css. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.play-main { padding-top: 24px; }
.play-top { color: var(--text); margin-bottom: 18px; }
.play-top .back-link { color: var(--text); text-decoration: none; }
.play-top .back-link:hover { text-decoration: underline; }
.play-window { max-width: 420px; margin: 0 auto; }
.play-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 180 / 300;
  max-height: 72vh;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background: #cdc2f5;
}
.play-canvas:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }
.play-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-family: var(--pixel); color: var(--panel-ink);
}
.play-help { max-width: 420px; margin: 18px auto 6px; color: var(--text); line-height: 1.6; }
.play-help kbd {
  font-family: var(--pixel); font-size: 0.85em; padding: 1px 6px;
  border: 2px solid var(--line); background: var(--deep); color: var(--yellow);
}
.play-credit { max-width: 420px; margin: 0 auto; }
.play-top { padding-inline: 0; }
.btn-small { font-size: 12px; min-height: 36px; padding: 4px 14px; box-shadow: 3px 3px 0 var(--ink); }