/* First-visit hints and the film pill/dialog. */
.ob-hint {
  position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100% - 32px));
  padding: 12px 12px 12px 16px; border-radius: var(--r-card);
  background: rgba(23, 26, 28, .82); color: #fff; font-size: 14px; line-height: 1.45;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s;
}
.ob-hint .ob-ic { font-size: 22px; display: grid; }
.ob-anim .ob-ic { animation: ob-drag 1.8s ease-in-out infinite; }
@keyframes ob-drag { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }
.ob-x { border: 0; background: none; color: rgba(255, 255, 255, .8); cursor: pointer; padding: 4px; display: grid; border-radius: var(--r-btn); }
.ob-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.ob-out { opacity: 0; }

.ob-film {
  position: fixed; left: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font: 600 14px var(--font-body);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--t);
}
.ob-film:hover { background: rgba(255, 255, 255, .26); }
.ob-film i { font-size: 18px; }

.ob-dialog { border: 0; padding: 0; background: #0c0e0f; color: #fff; width: min(1100px, calc(100% - 24px)); border-radius: var(--r-card); }
.ob-dialog::backdrop { background: rgba(8, 10, 11, .86); }
.ob-dialog video { display: block; width: 100%; height: auto; max-height: 78vh; background: #000; }
.ob-cap { margin: 0; padding: 12px 16px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.ob-close { position: absolute; top: 8px; right: 8px; z-index: 1; background: rgba(0, 0, 0, .45); color: #fff; }
.ob-close:hover { background: rgba(0, 0, 0, .65); }
@media (max-width: 760px) { .ob-film { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media print { .ob-film, .ob-hint { display: none !important; } }