/* fitur boat — petunjuk kontrol saat naik sampan (memudar sendiri) */
.boat-hint { position: fixed; left: 50%; bottom: calc(176px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 18px 9px 10px; background: rgba(21, 18, 14, 0.78); color: var(--washi, #f3ead6); border-radius: 6px; font: 500 14.5px var(--ui, 'Alegreya Sans', system-ui, sans-serif); pointer-events: none; transition: opacity 0.8s, transform 0.8s; box-shadow: 0 6px 18px rgba(10, 6, 2, 0.25); }
.boat-hint[hidden] { display: none; }
.boat-hint.fade { opacity: 0; transform: translate(-50%, 8px); }
.boat-hint b { flex: none; padding: 3px 10px 4px; border-radius: 4px; background: var(--shu, #c0412f); font: 700 13px var(--sc, 'Alegreya Sans SC', sans-serif); letter-spacing: 0.06em; }
.boat-hint span { line-height: 1.35; }
.boat-hint kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 1px; border-radius: 3px; background: var(--washi, #f3ead6); color: var(--ink, #1f1c18); font: 700 11.5px var(--sc, 'Alegreya Sans SC', sans-serif); vertical-align: 1px; }
.boat-hint i { font-style: normal; font-weight: 700; color: var(--shu-l, #ef8f74); }
@media (max-width: 640px) {
  .boat-hint { bottom: calc(236px + var(--safe-b, 0px)); font-size: 13px; padding: 7px 12px 8px 8px; gap: 9px; width: max-content; }
}