/* Way back to the playground index.
 *
 * Shared by every page that is somewhere *inside* the playground, so there is
 * always one consistent way out. Deliberately quiet: it is a door, not a
 * feature, and it must never compete with the thing on the page.
 *
 * Two pages leave it off on purpose - the TV display (nobody clicks a TV, and
 * it would sit over the puzzle) and the birthday card (unlisted, so a link up
 * would expose the rest of the playground to anyone it is shared with).
 */

.home-link {
  /* Bottom-left on every page in the playground. App headers live at the
     top, so this corner is the one that is reliably free. */
  position: fixed;
  bottom: clamp(14px, 2.6vh, 28px);
  left: clamp(14px, 2.6vw, 32px);
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 8px 14px 8px 11px;
  border-radius: 999px;

  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;

  color: #6b7488;
  background: rgba(20, 24, 35, 0.72);
  border: 1px solid rgba(35, 41, 54, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* The three dots are the playground's mark, shrunk down. */
.home-link::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffcc33;
  box-shadow: 10px 0 0 -1px #7cf5c8, 20px 0 0 -2px #ff5e7a;
  margin-right: 14px;
  flex: none;
}

.home-link:hover,
.home-link:focus-visible {
  color: #f2f4f8;
  background: rgba(26, 32, 48, 0.9);
  border-color: rgba(255, 204, 51, 0.5);
}

.home-link:focus-visible {
  outline: 2px solid #ffcc33;
  outline-offset: 3px;
}

/* On a phone the chrome is tight; shrink to just the mark. */
@media (max-width: 560px) {
  .home-link {
    padding: 8px;
    gap: 0;
    font-size: 0;
  }
  .home-link::before { margin-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-link { transition: none; }
}

/* The rebus controls run along the bottom too, so on pages carrying the door
   they start after it rather than under it. On a phone the controls become a
   full-width grid, so they get a row of clearance beneath instead. */
body:has(> .home-link) #controls {
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}