.no-js .tour-control { display: none; }
.tour-control {
  position: fixed;
  z-index: 48;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: #f0e7d1;
  transition: opacity .6s ease, translate .6s ease;
}
.tour-control button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid #dfd3b745;
  border-radius: 30px;
  background: #142638d9;
  box-shadow: 0 6px 28px #0b162633, inset 0 1px 0 #fff1;
  backdrop-filter: blur(14px);
  color: inherit;
  overflow: hidden;
  cursor: pointer;
  font: 12px var(--serif);
  letter-spacing: .06em;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tour-control button:hover { background: #213c50ed; box-shadow: 0 8px 32px #0b162655; transform: translateY(-2px); }
.tour-control button:focus-visible { outline: 2px solid #f0dba4; outline-offset: 4px; }
.tour-control button::after {
  content: "";
  position: absolute;
  inset: auto 15px 0;
  height: 2px;
  background: linear-gradient(90deg, #8babab80, #ead4a0);
  transform: scaleX(var(--tour-progress, 0));
  transform-origin: left;
  transition: transform .2s linear;
}
.tour-icon { width: 13px; text-align: center; font: 12px Georgia, serif; }
.tour-caption { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8dfc4b3; font-size: 11px; }
.tour-count { font: 11px Georgia, serif; min-width: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.tour-count:empty { display: none; }
.tour-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cloud-arriving .tour-control, .body-modal .tour-control { opacity: 0; pointer-events: none; }
.tour-control[data-mode="paused"] button::after, .tour-control[data-mode="complete"] button::after { opacity: 0; }
@media (max-width: 760px) {
  .tour-control { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  .tour-control button { gap: 8px; padding: 8px 13px; }
  .tour-caption { max-width: 115px; }
  /* Share the first screen's bottom row without covering sound or replay. */
  .opening-visible .tour-control {
    left: auto;
    right: 25px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .opening-visible .tour-control button { padding: 8px 10px; gap: 6px; font-size: 10px; white-space: nowrap; }
  .opening-visible .tour-control :is(.tour-caption, .tour-count) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-control, .tour-control button, .tour-control button::after { transition: none; }
}