/* The tour link lives in existing navigation, so it does not cover the board. */
.homepage-tour-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 2.25rem;
  padding: 0.25rem 0.65rem;
  margin-block: 0.35rem 0;
  border: 1px solid #bce08c;
  border-radius: 0.55rem;
  background: #d9f982;
  color: #19332d !important;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  white-space: normal;
}
.homepage-tour-link:hover {
  background: #e8ffad;
}
.homepage-tour-link:focus-visible {
  outline: 3px solid #ffad84;
  outline-offset: 3px;
}
.topbar .homepage-tour-link {
  margin: 0;
  min-block-size: 2.5rem;
}
:is(.orbit-heading, .classic-heading) > .homepage-tour-banner {
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 0.7rem;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  background: #e1f4bd;
  color: #203b2c !important;
  border-color: #b5d895;
  box-shadow: none;
}
.homepage-tour-banner > span:last-child {
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 800;
}
.onboarding-tour-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid #a7c976;
  border-radius: 0.7rem;
  background: #e7f1d6;
  color: #19332d;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 800;
}
.onboarding-tour-link small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  margin-top: 0.2rem;
  line-height: 1.5;
}
.onboarding-tour-link:focus-visible {
  outline: 3px solid #ba4c36;
  outline-offset: 3px;
}
.profile-action-grid .tour-setting-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}
html[data-arcade-frame="true"] .homepage-tour-link {
  display: none !important;
}
/* Classic's compact header needs a real second row for the tour banner. */
html:not([data-arcade-frame="true"])[data-view="play"][data-play-mode="classic"] .view-play .classic-heading,
html:not([data-arcade-frame="true"])[data-view="play"][data-play-mode="classic"] .view-play .classic-heading:has(.score-block[hidden]) {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto;
}
html:not([data-arcade-frame="true"])[data-view="play"][data-play-mode="classic"] .classic-heading > .homepage-tour-banner {
  grid-row: 2;
}
.arcade-menu .arcade-tour-link {
  border-color: #b5d895;
  background: #e1f4bd;
  color: #203b2c;
}
.arcade-menu .arcade-tour-link:is(:hover, :focus-visible) {
  background: #e8ffad;
  color: #19332d;
}
.arcade-menu .arcade-tour-link:focus-visible {
  outline: 3px solid #ffad84;
  outline-offset: -3px;
}
.classic-quick-actions > .classic-tour-compact {
  display: none;
  grid-column: 1 / -1;
  justify-content: center;
  min-block-size: 2.75rem;
  margin: 0;
  font-size: 0.875rem;
}
html:not([data-arcade-frame="true"])[data-view="play"][data-play-mode="classic"] .classic-game-panel > .classic-quick-actions {
  height: auto;
}
/* Laptop layouts hide the level header; keep the link in the visible rail. */
@media (min-width: 48.01rem) and (max-height: 56.25rem) {
  .classic-quick-actions > .classic-tour-compact {
    display: flex;
  }
}
@media (orientation: landscape) and (max-height: 32rem) and (max-width: 64rem) {
  .classic-quick-actions > .classic-tour-compact {
    display: flex;
  }
  .classic-heading > .homepage-tour-banner {
    display: none;
  }
  html:not([data-arcade-frame="true"])[data-view="play"][data-play-mode="classic"] .view-play .classic-heading {
    grid-template-rows: auto;
  }
}
@media (max-width: 600px) {
  .homepage-tour-link {
    font-size: 0.6rem;
    min-block-size: 1.8rem;
    padding: 0.2rem 0.5rem;
  }
  .topbar .homepage-tour-link {
    font-size: 0.65rem;
  }
  .onboarding-tour-link {
    font-size: 0.8rem;
  }
}
@media (max-width: 600px) {
  :is(.orbit-heading, .classic-heading) > .homepage-tour-banner {
    font-size: 0.8rem;
    padding: 0.45rem 0.65rem;
  }
  .homepage-tour-banner > span:last-child {
    font-size: 0.7rem;
  }
  .homepage-tour-banner strong {
    font-weight: 800;
  }
}
@media (max-width: 360px) {
  :is(.orbit-heading, .classic-heading) > .homepage-tour-banner {
    font-size: 0.75rem;
    gap: 0.4rem;
    padding-inline: 0.5rem;
  }
  .homepage-tour-banner > span:last-child {
    font-size: 0.65rem;
  }
}
@media (forced-colors: active) {
  .homepage-tour-link,
  .onboarding-tour-link {
    border-color: LinkText;
    background: Canvas;
    color: LinkText !important;
  }
}