.mobile-tip { position: fixed; z-index: 8; bottom: calc(96px + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); max-width: 370px; margin-inline: auto; padding: 22px 54px 22px 22px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 36px #140c0640; }
.mobile-tip strong { display: block; font: 23px/1.2 Georgia, serif; letter-spacing: -.02em; }
.mobile-tip p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.mobile-tip button { position: absolute; top: 10px; right: 7px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.mobile-tip button:active { background: #29251f12; }
.mobile-tip-visible .room-hint { visibility: hidden; }
@keyframes room-tip-arrive { from { opacity: .5; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes room-story-arrive { from { opacity: .7; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .mobile-tip:not([hidden]) { animation: room-tip-arrive 340ms cubic-bezier(.16,1,.3,1) both; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  #chapter[open] #chapter-content { animation: room-story-arrive 320ms cubic-bezier(.16,1,.3,1) both; }
}